diff --git a/admin/assets/js/dashboard-chart.js b/admin/assets/js/dashboard-chart.js index fce85d6..7ca03e5 100644 --- a/admin/assets/js/dashboard-chart.js +++ b/admin/assets/js/dashboard-chart.js @@ -7,7 +7,6 @@ $(document).ready(function() { fetchData() .then(function (response) { responseData = response.data; - // console.log(responseData); const completedOrdersCount = countCompletedOrders(responseData); const toPayOrdersCount = countToPayOrders(responseData); const toShipOrdersCount = countToShipOrders(responseData); @@ -339,7 +338,6 @@ $(document).ready(function() { } } - function initializeSalesChart(cod_daily_totals, obpay_daily_totals, cod_monthly_totals, obpay_monthly_totals, months, cod_yearly_totals, obpay_yearly_totals, years) { var acquisition = document.getElementById("salesChart"); if (acquisition !== null) { @@ -486,6 +484,7 @@ $(document).ready(function() { } }; + var ctx = document.getElementById("salesChart").getContext("2d"); var lineAcq = new Chart(ctx, configAcq); document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend(); @@ -493,8 +492,8 @@ $(document).ready(function() { var items = document.querySelectorAll( "#user-acquisition .nav-tabs .nav-item" ); - items.forEach(function (item, index) { - item.addEventListener("click", function() { + items.forEach(function (item, index) { + item.addEventListener("click", function() { // Determine which tab was clicked var selectedTab = this.textContent.trim(); @@ -587,4 +586,196 @@ $(document).ready(function() { event.preventDefault(); downloadCSV('orders_data.csv'); }); + + let customer_data; + let vendor_data; + + function getDataAndInitializeChart () { + userData() + .then(function (users){ + vendorData() + .then(function (venues){ + customer_data = users.data; + vendor_data = venues.data; + const {customer_monthly_total, months} = countCustomerReg(customer_data) + const { vendor_monthly_total} = countVendorReg(vendor_data); + initializeActivityChart(customer_monthly_total, vendor_monthly_total, months); + }) + }) + } + getDataAndInitializeChart(); + + + function userData(){ + return axios.get('https://api.obanana.shop/api/v1/customers'); + } + function vendorData(){ + return axios.get('https://api.obanana.shop/api/v1/vendors'); + } + + function countCustomerReg(customers) { + const currentDate = new Date(); + const monthLabels = []; + const customer_monthly_total = Array(12).fill(0); + for (let i = 11; i >= 0; i--) { + const month = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1); + monthLabels.push(month); + } + + console.log(monthLabels); + + customers.forEach(customer => { + const regDate = new Date(customer.createdAt); + regDate.setHours(0, 0, 0, 0); + + monthLabels.forEach((month, index) => { + let total_count = 0; + if (regDate.getFullYear() === month.getFullYear() && regDate.getMonth() === month.getMonth()) { + total_count ++; + customer_monthly_total[11 - index] += total_count; + } + }); + }); + + console.log(customer_monthly_total) + customer_monthly_total.reverse(); + return { + customer_monthly_total, + months: monthLabels.map(month => `${month.toLocaleString('default', { month: 'short' })} ${month.getFullYear()}`) // Return month labels for use in charts or displays + }; + } + + function countVendorReg(vendors) { + const currentDate = new Date(); + const monthLabels = []; + const vendor_monthly_total = Array(12).fill(0); + for (let i = 11; i >= 0; i--) { + const month = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1); + monthLabels.push(month); + } + + console.log(monthLabels); + + vendors.forEach(vendor => { + const regDate = new Date(vendor.createdAt); + regDate.setHours(0, 0, 0, 0); + + monthLabels.forEach((month, index) => { + let total_count = 0; + if (regDate.getFullYear() === month.getFullYear() && regDate.getMonth() === month.getMonth()) { + total_count ++; + vendor_monthly_total[11 - index] += total_count; + } + }); + }); + + console.log(vendor_monthly_total) + vendor_monthly_total.reverse(); + return { + vendor_monthly_total, + }; + } + + function initializeActivityChart (customer_monthly_total, vendor_monthly_total, months){ + var activity = document.getElementById("registry"); + if (activity !== null) { + var activityData = [ + { + first: customer_monthly_total, + second: vendor_monthly_total + } + + ]; + + var config = { + // The type of chart we want to create + type: "line", + // The data for our dataset + data: { + labels: months, + datasets: [ + { + label: "Customer", + backgroundColor: "rgba(255, 165, 0, .3)", + borderColor: "rgba(255, 165, 0, .7)", + data: activityData[0].first, + lineTension: 0.3, + pointBackgroundColor: "rgba(255, 165, 0, 0)", + pointHoverBackgroundColor: "rgba(255, 165, 0, 1)", + pointHoverRadius: 3, + pointHitRadius: 30, + pointBorderWidth: 2, + pointStyle: "rectRounded" + }, + { + label: "Vendors", + backgroundColor: "rgba(135, 206, 235, .3)", + borderColor: "rgba(135, 206, 235, .7)", + data: activityData[0].second, + lineTension: 0.3, + pointBackgroundColor: "rgba(135, 206, 235, 0)", + pointHoverBackgroundColor: "rgba(135, 206, 235, 1)", + pointHoverRadius: 3, + pointHitRadius: 30, + pointBorderWidth: 2, + pointStyle: "rectRounded" + } + ] + }, + // Configuration options go here + options: { + responsive: true, + maintainAspectRatio: false, + legend: { + display: false + }, + scales: { + xAxes: [ + { + gridLines: { + display: false + } + } + ], + yAxes: [ + { + gridLines: { + display: true, + color: "#eee", + zeroLineColor: "#eee" + }, + ticks: { + beginAtZero: true, + stepSize: 10, + max: 30 + } + } + ] + }, + tooltips: { + mode: "index", + titleFontColor: "#888", + bodyFontColor: "#555", + titleFontSize: 12, + bodyFontSize: 15, + backgroundColor: "rgba(256,256,256,0.95)", + displayColors: true, + xPadding: 20, + yPadding: 10, + borderColor: "rgba(220, 220, 220, 0.9)", + borderWidth: 2, + caretSize: 10, + caretPadding: 15 + } + } + }; + + var ctx = document.getElementById("registry").getContext("2d"); + var actLine = new Chart(ctx, config); + document.getElementById("actLegend").innerHTML = actLine.generateLegend(); + + + } + + } }); diff --git a/admin/index.php b/admin/index.php index 4811983..e60c82f 100644 --- a/admin/index.php +++ b/admin/index.php @@ -108,12 +108,13 @@ $allSignups = array_merge($all_customers, $all_vendors); - @@ -825,7 +827,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
-
+

Orders Overview

@@ -841,7 +843,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
  • Order Completed
  • Order To Pay
  • + style="color: #80e1c1">Order To Pay
  • Order Returned
  • @@ -861,32 +863,35 @@ $allSignups = array_merge($all_customers, $all_vendors);
    -
    +
    -

    User Activity

    -
    +

    Monthly Users Registry

    +
    - + +
    +
    +
    -
    -
    +
    -
    +
    @@ -933,8 +938,8 @@ $allSignups = array_merge($all_customers, $all_vendors);
    -
    - + +
    @@ -1073,21 +1078,40 @@ $allSignups = array_merge($all_customers, $all_vendors); $orderStatus = strtoupper($val['status']); $returnStatus = strtoupper($val['return_order']['status']); - + $style = ''; + $textColor = ''; + $backgroundColor = ''; - $statusClass = ''; - if ($orderStatus === 'UNPAID' || $orderStatus === 'RETURNED') { - $statusClass = '#cb3747'; - } elseif ($orderStatus === 'TO PAY') { - $statusClass = '#50d7ab'; - } elseif ($orderStatus === 'TO SHIP') { - $statusClass = '#9586cd'; - } - elseif ($orderStatus === 'TO RECEIVE') { - $statusClass = '#ffc319'; - } elseif ($orderStatus === 'COMPLETED') { - $statusClass = '#88aaf3'; + switch ($orderStatus) { + case 'TO SHIP': + $backgroundColor = '#8061ef'; + $textColor = 'white'; + break; + case 'TO PAY': + $backgroundColor = '#1E6E58'; + $textColor = 'white'; + break; + case 'TO RECEIVE': + $backgroundColor = '#FFD700'; + $textColor = 'black'; + break; + case 'COMPLETED': + $backgroundColor = '#4c84ff'; + $textColor = 'white'; + break; + case 'RETURNED': + $backgroundColor = '#ff7b7b'; + $textColor = 'white'; + break; + default: + $backgroundColor = '#464646'; + $textColor = 'white'; } + + $style = "display: flex; height: 15px; font-weight: bold; + width: 90px; font-size: 10px !important; padding: 10px; + justify-content: center; align-items: center; + background-color: $backgroundColor; border-radius: 30px; color: $textColor;"; if ($formattedOrderDate == $currentDate) { $ordersDisplayed = true; @@ -1100,7 +1124,7 @@ $allSignups = array_merge($all_customers, $all_vendors); - + @@ -1175,7 +1199,8 @@ $allSignups = array_merge($all_customers, $all_vendors);
    customer image
    @@ -1254,7 +1279,8 @@ $allSignups = array_merge($all_customers, $all_vendors);
    customer image
    diff --git a/admin/order-history.php b/admin/order-history.php index d786135..f09fd4f 100644 --- a/admin/order-history.php +++ b/admin/order-history.php @@ -115,7 +115,7 @@ $orders = getAllOrder(); - Details + Details