Merge pull request 'fixed admin dashboard download csv and initialized dynamic dataset for sales report' (#73) from gelo_branch into main

Reviewed-on: #73

admin/assets/js/dashboard-chart.js

@@ -11,7 +11,7 @@ $(document).ready(function() {
                 const completedOrdersCount = countCompletedOrders(responseData);
                 const toPayOrdersCount = countToPayOrders(responseData);
                 const toShipOrdersCount = countToShipOrders(responseData);
-                const returnedOrdersCount = countReturnedpOrders(responseData);
+                const returnedOrdersCount = countReturnedOrders(responseData);
                 initializeChart(completedOrdersCount, toPayOrdersCount, toShipOrdersCount, returnedOrdersCount);
             })
             .catch(function (error) {
@@ -24,50 +24,65 @@ $(document).ready(function() {
     }
 
 
-    function countCompletedOrders(data) {
-        let completedOrdersCount = 0;
-        data.forEach(function(order) {
+    function getCurrentMonthData(data) {
+      const now = new Date();
+      const currentMonth = now.getMonth();
+      const currentYear = now.getFullYear();
+  
+      return data.filter(order => {
+          const orderDate = new Date(order.order_date);
+          return orderDate.getMonth() === currentMonth && orderDate.getFullYear() === currentYear;
+      });
+  }            
+  
+  function countCompletedOrders(data) {
+      const filteredData = getCurrentMonthData(data);
+      let completedOrdersCount = 0;
+      filteredData.forEach(function(order) {
           if (order.status === 'COMPLETED') {
-            completedOrdersCount++;
+              completedOrdersCount++;
           }
-        });
-        console.log(completedOrdersCount)
-        return completedOrdersCount;
-    }
-
-
-    function countToPayOrders(data) {
-        let toPayOrdersCount = 0;
-        data.forEach(function(order) {
+      });
+      console.log(completedOrdersCount);
+      return completedOrdersCount;
+  }
+  
+  function countToPayOrders(data) {
+      const filteredData = getCurrentMonthData(data);
+      let toPayOrdersCount = 0;
+      filteredData.forEach(function(order) {
           if (order.status === 'TO PAY') {
-            toPayOrdersCount++;
+              toPayOrdersCount++;
           }
-        });
-        console.log(toPayOrdersCount)
-        return toPayOrdersCount;
-    }
-
-
-    function countToShipOrders(data) {
-        let toShipOrdersCount = 0;
-        data.forEach(function(order) {
+      });
+      console.log(toPayOrdersCount);
+      return toPayOrdersCount;
+  }
+  
+  function countToShipOrders(data) {
+      const filteredData = getCurrentMonthData(data);
+      let toShipOrdersCount = 0;
+      filteredData.forEach(function(order) {
           if (order.status === 'TO SHIP') {
-            toShipOrdersCount++;
+              toShipOrdersCount++;
           }
-        });
-        console.log(toShipOrdersCount)
-        return toShipOrdersCount;
-    }
-    function countReturnedpOrders(data) {
-        let returnedOrdersCount = 0;
-        data.forEach(function(order) {
+      });
+      console.log(toShipOrdersCount);
+      return toShipOrdersCount;
+  }
+  
+  function countReturnedOrders(data) {
+      const filteredData = getCurrentMonthData(data);
+      let returnedOrdersCount = 0;
+      filteredData.forEach(function(order) {
           if (order.status === 'RETURNED') {
-            returnedOrdersCount++;
+              returnedOrdersCount++;
           }
-        });
-        console.log(returnedOrdersCount)
-        return returnedOrdersCount;
-    }
+      });
+      console.log(returnedOrdersCount);
+      return returnedOrdersCount;
+  }
+  
 
     function initializeChart(completedOrdersCount , toPayOrdersCount, toShipOrdersCount, returnedOrdersCount) {
         var doughnut = document.getElementById("doughnut-chart");
@@ -115,43 +130,248 @@ $(document).ready(function() {
         }
     }
 
+
+
+    var acquisition = document.getElementById("salesChart");
+    if (acquisition !== null) {
+      function updateDailyLabels() {
+        var labelsDaily = [];
+        for (let i = 6; i >= 0; i--) {
+            var date = new Date();
+            date.setDate(date.getDate() - i);
+            labelsDaily.push(formatDate(date));
+        }
+        return labelsDaily;
+      }
+      
+      function formatDate(date) {
+          const options = { day: 'numeric', month: 'short' }; // E.g., 26 Apr
+          return date.toLocaleDateString('en-US', options);
+      }
+      
+      // Updating labelsDaily dynamically
+      var labelsDaily = updateDailyLabels();
+      var labelsMonthly = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+      var labelsYearly = ["2021", "2022", "2023", "2024", "2025"];
+      var acqData = [
+        { //daily data
+          first: [91, 180, 44, 75, 150, 66, 70], //COD
+          second: [300, 44, 177, 76, 23, 189, 12], //ObPay
+          third: [44, 167, 102, 123, 183, 88, 134] //Paymongo
+        },
+        { //monthly data
+          first: [144, 44, 110, 5, 123, 89, 12], //COD
+          second: [22, 123, 45, 130, 112, 54, 181], //ObPay
+          third: [55, 44, 144, 75, 155, 166, 70] //Paymongo
+        },
+        { //yearly data
+          first: [134, 80, 123, 65, 171, 33, 22], //COD
+          second: [44, 144, 77, 76, 123, 89, 112], //ObPay
+          third: [156, 23, 165, 88, 112, 54, 181] //Paymongo
+        }
+      ];
+
+      var configAcq = {
+        // The type of chart we want to create
+        type: "line",
+
+        // The data for our dataset
+        data: {
+          // labels: [
+          //   "4 Jan",
+          //   "5 Jan",
+          //   "6 Jan",
+          //   "7 Jan",
+          //   "8 Jan",
+          //   "9 Jan",
+          //   "10 Jan"
+          // ],
+          datasets: [
+            {
+              label: "Cash on Delivery",
+              backgroundColor: "rgba(52, 116, 212, .2)",
+              borderColor: "rgba(52, 116, 212, .7)",
+              data: acqData[0].first,
+              lineTension: 0.3,
+              pointBackgroundColor: "rgba(52, 116, 212,0)",
+              pointHoverBackgroundColor: "rgba(52, 116, 212,1)",
+              pointHoverRadius: 3,
+              pointHitRadius: 30,
+              pointBorderWidth: 2,
+              pointStyle: "rectRounded"
+            },
+            {
+              label: "ObananaPay",
+              backgroundColor: "rgba(255, 192, 203, .3)",
+              borderColor: "rgba(255, 192, 203, .7)",
+              data: acqData[0].second,
+              lineTension: 0.3,
+              pointBackgroundColor: "rgba(255, 192, 203, 0)",
+              pointHoverBackgroundColor: "rgba(255, 192, 203, 1)",
+              pointHoverRadius: 3,
+              pointHitRadius: 30,
+              pointBorderWidth: 2,
+              pointStyle: "rectRounded"
+            },
+            {
+              label: "Paymongo",
+              backgroundColor: "rgb(178, 251, 212, .3)",
+              borderColor: "rgba(178, 251, 212, .7)",
+              data: acqData[0].third,
+              lineTension: 0.3,
+              pointBackgroundColor: "rgba(178, 251, 212, 0)",
+              pointHoverBackgroundColor: "rgba(178, 251, 212, 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: 100,
+                  max: 1000
+                }
+              }
+            ]
+          },
+          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("salesChart").getContext("2d");
+      var lineAcq = new Chart(ctx, configAcq);
+      document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend();
+
+      var items = document.querySelectorAll(
+        "#user-acquisition .nav-tabs .nav-item"
+      );
+     items.forEach(function (item, index) {
+    item.addEventListener("click", function() {
+        // Determine which tab was clicked
+        var selectedTab = this.textContent.trim();
+        
+        // Choose data and labels based on the selected tab
+        switch (selectedTab) {
+          case "Daily":
+              configAcq.data.labels = labelsDaily;
+              configAcq.data.datasets[0].data = acqData[0].first;
+              configAcq.data.datasets[1].data = acqData[0].second;
+              configAcq.data.datasets[2].data = acqData[0].third;
+              break;
+          case "Monthly":
+              configAcq.data.labels = labelsMonthly;
+              configAcq.data.datasets[0].data = acqData[1].first;
+              configAcq.data.datasets[1].data = acqData[1].second;
+              configAcq.data.datasets[2].data = acqData[1].third;
+              break;
+          case "Yearly":
+              configAcq.data.labels = labelsYearly;
+              configAcq.data.datasets[0].data = acqData[2].first;
+              configAcq.data.datasets[1].data = acqData[2].second;
+              configAcq.data.datasets[2].data = acqData[2].third;
+              break;
+        }
+        
+        lineAcq.update();
+    });
+});
+    items[0].click();
+    }
+  
     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);
-    }
+      const now = new Date();
+      const currentMonth = now.getMonth(); // Months are 0-indexed (0 for January, 11 for December)
+      const currentYear = now.getFullYear();
+  
+      const filteredData = data.filter(order => {
+          const orderDate = new Date(order.order_date);
+          return orderDate.getMonth() === currentMonth && orderDate.getFullYear() === currentYear;
+      });
+  
+      const columnTitles = [
+          'ORDER ID', 'STATUS', 'BUYER NAME', 'TOTAL AMOUNT', 'METHOD', 'ORDER DATE', 
+          'ORDER TIME', 'PRODUCT NAME', 'PRICE', 'QUANTITY', 'VENDOR ID', 'VENDOR NAME'
+      ]; 
+      const header = columnTitles.join(',') + '\n';
+      const body = filteredData.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,
+              order.payment_method,
+              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() {
+    const now = new Date();
+    const months = ["January", "February", "March", "April", "May", "June",
+                    "July", "August", "September", "October", "November", "December"];
+    const currentMonthName = months[now.getMonth()];
+    const filename = `${currentMonthName}_orders_overview.csv`;
+
+    const csv = convertToCSV(responseData); // Ensure responseData is up to date
+    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();

admin/index.php

@@ -800,7 +800,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
 										role="tablist">
 										<li class="nav-item">
 											<a class="nav-link active" data-bs-toggle="tab" href="#todays" role="tab"
-												aria-selected="true">Today's</a>
+												aria-selected="true">Daily</a>
 										</li>
 										<li class="nav-item">
 											<a class="nav-link" data-bs-toggle="tab" href="#monthly" role="tab"
@@ -814,7 +814,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
 									<div class="tab-content pt-4" id="salesReport">
 										<div class="tab-pane fade show active" id="source-medium" role="tabpanel">
 											<div class="mb-6" style="max-height:247px">
-												<canvas id="acquisition" class="chartjs2"></canvas>
+												<canvas id="salesChart" class="chartjs2" style="width: 100%; height: 400px;"></canvas>
 												<div id="acqLegend" class="customLegend mb-2"></div>
 											</div>
 										</div>
@@ -833,7 +833,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
 									<canvas id="doughnut-chart"></canvas>
 								</div>
 								<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>
+										class="mdi mdi-download mr-2"></i> Download Current Month's Overall Report</a>
 								<div class="card-footer d-flex flex-wrap bg-white p-0">
 									<div class="col-6">
 										<div class="p-20">