fixed vendor-payments and added doughnut chart for admin dashboard
This commit is contained in:
gelonspr
parent
db76cbc13a
commit
95d2332aa2
|
|
@ -0,0 +1,160 @@
|
|||
$(document).ready(function() {
|
||||
"use strict";
|
||||
|
||||
let responseData;
|
||||
|
||||
function fetchDataAndInitializeChart() {
|
||||
fetchData()
|
||||
.then(function (response) {
|
||||
responseData = response.data;
|
||||
console.log(responseData);
|
||||
const completedOrdersCount = countCompletedOrders(responseData);
|
||||
const toPayOrdersCount = countToPayOrders(responseData);
|
||||
const toShipOrdersCount = countToShipOrders(responseData);
|
||||
const returnedOrdersCount = countReturnedpOrders(responseData);
|
||||
initializeChart(completedOrdersCount, toPayOrdersCount, toShipOrdersCount, returnedOrdersCount);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
}
|
||||
fetchDataAndInitializeChart();
|
||||
function fetchData() {
|
||||
return axios.get('https://api.obanana.shop/api/v1/orders/');
|
||||
}
|
||||
|
||||
|
||||
function countCompletedOrders(data) {
|
||||
let completedOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
if (order.status === 'COMPLETED') {
|
||||
completedOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(completedOrdersCount)
|
||||
return completedOrdersCount;
|
||||
}
|
||||
|
||||
|
||||
function countToPayOrders(data) {
|
||||
let toPayOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
if (order.status === 'TO PAY') {
|
||||
toPayOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(toPayOrdersCount)
|
||||
return toPayOrdersCount;
|
||||
}
|
||||
|
||||
|
||||
function countToShipOrders(data) {
|
||||
let toShipOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
if (order.status === 'TO SHIP') {
|
||||
toShipOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(toShipOrdersCount)
|
||||
return toShipOrdersCount;
|
||||
}
|
||||
function countReturnedpOrders(data) {
|
||||
let returnedOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
if (order.status === 'RETURNED') {
|
||||
returnedOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(returnedOrdersCount)
|
||||
return returnedOrdersCount;
|
||||
}
|
||||
|
||||
function initializeChart(completedOrdersCount , toPayOrdersCount, toShipOrdersCount, returnedOrdersCount) {
|
||||
var doughnut = document.getElementById("doughnut-chart");
|
||||
if (doughnut !== null) {
|
||||
var myDoughnutChart = new Chart(doughnut, {
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels: ["Completed", "To Pay", "To Ship", "Returned"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Order Status",
|
||||
data: [completedOrdersCount, toPayOrdersCount, toShipOrdersCount, returnedOrdersCount],
|
||||
backgroundColor: ["#88aaf3", "#50d7ab", "#9586cd", "#ed9090"],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
cutoutPercentage: 75,
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
title: function(tooltipItem, data) {
|
||||
return "Order : " + data["labels"][tooltipItem[0]["index"]];
|
||||
},
|
||||
label: function(tooltipItem, data) {
|
||||
return data["datasets"][0]["data"][tooltipItem["index"]];
|
||||
}
|
||||
},
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 14,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function convertToCSV(data) {
|
||||
const columnTitles = ['ORDER ID', 'STATUS', 'BUYER NAME', 'TOTAL AMOUNT', 'ORDER DATE',
|
||||
'ORDER TIME', 'PRODUCT NAME','PRICE', 'QUANTITY',
|
||||
'VENDOR ID', 'VENDOR NAME',];
|
||||
const header = columnTitles.join(',') + '\n';
|
||||
const body = data.map(order => {
|
||||
const orderDate = new Date(order.order_date).toLocaleDateString('en-US');
|
||||
const orderTime = new Date(order.order_date).toLocaleTimeString('en-US');
|
||||
const productName = order.items.length > 0 ? `"${order.items[0].product.name}"` : '';
|
||||
return [
|
||||
order._id,
|
||||
order.status,
|
||||
order.customer[0]?.name,
|
||||
order.total_amount,
|
||||
orderDate,
|
||||
orderTime,
|
||||
productName,
|
||||
order.items[0]?.price,
|
||||
order.items[0]?.quantity,
|
||||
order.items[0]?.vendor_id,
|
||||
order.items[0]?.vendor_name
|
||||
].join(',');
|
||||
}).join('\n');
|
||||
return header + body;
|
||||
}
|
||||
function downloadCSV(filename) {
|
||||
const csv = convertToCSV(responseData);
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
$('#download-btn').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
downloadCSV('orders_data.csv');
|
||||
});
|
||||
});
|
||||
|
|
@ -29,6 +29,7 @@ date_default_timezone_set('Asia/Manila');
|
|||
<meta name="description" content="oBanana B2B - Admin Dashboard">
|
||||
|
||||
<title>oBanana B2B - Admin Dashboard</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
|
||||
<!-- GOOGLE FONTS -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
|
@ -803,9 +804,9 @@ date_default_timezone_set('Asia/Manila');
|
|||
<h2>Orders Overview</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="doChart"></canvas>
|
||||
<canvas id="doughnut-chart"></canvas>
|
||||
</div>
|
||||
<a href="#" class="pb-5 d-block text-center text-muted"><i
|
||||
<a href="#" id="download-btn" class="pb-5 d-block text-center text-muted"><i
|
||||
class="mdi mdi-download mr-2"></i> Download overall report</a>
|
||||
<div class="card-footer d-flex flex-wrap bg-white p-0">
|
||||
<div class="col-6">
|
||||
|
|
@ -814,9 +815,9 @@ date_default_timezone_set('Asia/Manila');
|
|||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #4c84ff"></i>Order Completed</li>
|
||||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #80e1c1 "></i>Order Unpaid</li>
|
||||
style="color: #80e1c1 "></i>Order To Pay</li>
|
||||
<li><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #ff7b7b "></i>Order returned</li>
|
||||
style="color: #ff7b7b "></i>Order Returned</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -824,11 +825,7 @@ date_default_timezone_set('Asia/Manila');
|
|||
<div class="p-20">
|
||||
<ul class="d-flex flex-column justify-content-between">
|
||||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #8061ef"></i>Order Pending</li>
|
||||
<li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #ffa128"></i>Order Canceled</li>
|
||||
<li><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
|
||||
style="color: #7be6ff"></i>Order Broken</li>
|
||||
style="color: #8061ef"></i>Order To Ship</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1354,6 +1351,8 @@ date_default_timezone_set('Asia/Manila');
|
|||
<script src="assets/plugins/charts/Chart.min.js"></script>
|
||||
<script src="assets/js/chart.js"></script>
|
||||
|
||||
<!-- gelo added dynamic charts -->
|
||||
<script src="assets/js/dashboard-chart.js"></script>
|
||||
<!-- Google map chart -->
|
||||
<script src="assets/plugins/charts/google-map-loader.js"></script>
|
||||
<script src="assets/plugins/charts/google-map.js"></script>
|
||||
|
|
|
|||
|
|
@ -488,10 +488,10 @@ if ($_SESSION["isCustomer"] == true) {
|
|||
console.log(response);
|
||||
var paymentId = response.payment.reference_number;
|
||||
$('#paymentIdSpan').text(paymentId);
|
||||
var gross_price = response.payment.details[0]?.attributes.data.attributes.amount;
|
||||
var gross_price = (response.payment.details[0]?.attributes.data.attributes.amount / 100).toFixed(2);
|
||||
var payment_status = response.payment.status;
|
||||
var fee = response.payment.details[0]?.attributes.data.attributes.fee;
|
||||
var net_amount = response.payment.details[0]?.attributes.data.attributes.payments[0].attributes.net_amount;
|
||||
var net_amount = (response.payment.details[0]?.attributes.data.attributes.payments[0].attributes.net_amount / 100).toFixed(2);
|
||||
var desc = response.items[0].product.name;
|
||||
var method = response.payment_method;
|
||||
var name = response.billing_address.billing_first_name + " " + response.billing_address.billing_last_name;
|
||||
|
|
@ -522,7 +522,7 @@ if ($_SESSION["isCustomer"] == true) {
|
|||
|
||||
<div class="d-flex justify-content-between p-2">
|
||||
<div class="fw-bold">Gross Amount</div>
|
||||
<div>₱ ${net_amount}</div>
|
||||
<div>₱ ${gross_price}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
|
||||
<div class="fw-bold"> Fees <span data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
|
|
@ -532,7 +532,7 @@ if ($_SESSION["isCustomer"] == true) {
|
|||
</div>
|
||||
<div class="d-flex justify-content-between p-2">
|
||||
<div class="fw-bold"> Net Amount</div>
|
||||
<div>₱ ${gross_price} </div>
|
||||
<div>₱ ${net_amount} </div>
|
||||
</div>
|
||||
<div class="d-flex p-2">
|
||||
<div class="fw-bold"> Payment Description </div>
|
||||
|
|
@ -598,7 +598,7 @@ if ($_SESSION["isCustomer"] == true) {
|
|||
</div>
|
||||
<div class="d-flex justify-content-between p-2">
|
||||
<div class="fw-bold"> Net Amount</div>
|
||||
<div>₱ ${gross_price} </div>
|
||||
<div>₱ ${net_amount} </div>
|
||||
</div>
|
||||
<div class="d-flex p-2">
|
||||
<div class="fw-bold"> Payment Description </div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue