Merge pull request #108 from khengyun/feat/admin/home-most-sale-compo…

…nent

Update with chart

api/psqlserver/model/Food.py

@@ -78,30 +78,52 @@ def search_food_by_name(self, food_name: str):
 
     def get_daily_revenue(self):
         try:
-            today = date.today()
             with pymssql.connect(**self.db_config) as conn:
                 cursor = conn.cursor()
-
                 cursor.execute("""
-                    SELECT SUM(CI.food_quantity * F.food_price) AS daily_revenue
-                    FROM [Order] AS O
-                    INNER JOIN CartItem AS CI ON O.cart_id = CI.cart_id
-                    INNER JOIN Food AS F ON CI.food_id = F.food_id
-                    WHERE CAST(O.order_time AS DATE) = %s
-                """, (today,))
+                WITH DailySales AS (
+                SELECT
+                    A.account_username,
+                    CI.food_id,
+                    SUM(CI.food_quantity) AS total_items_sold
+                FROM [Order] AS O
+                INNER JOIN CartItem AS CI ON O.cart_id = CI.cart_id
+                INNER JOIN Account AS A ON O.customer_id = A.customer_id
+                WHERE CAST(CONVERT(DATE, O.order_time) AS DATE) = CAST(GETDATE() AS DATE)
+                GROUP BY A.account_username, CI.food_id
+                )
+
+
+
+                SELECT
+                SUM(CI.food_quantity * F.food_price) AS daily_revenue,
+                COUNT(O.order_id) AS daily_orders,
+                A.account_username AS customer_with_most_orders
+                FROM [Order] AS O
+                INNER JOIN CartItem AS CI ON O.cart_id = CI.cart_id
+                INNER JOIN Food AS F ON CI.food_id = F.food_id
+                INNER JOIN Account AS A ON O.customer_id = A.customer_id
+                WHERE CAST(CONVERT(DATE, O.order_time) AS DATE) = CAST(GETDATE() AS DATE)
+                GROUP BY A.account_username;
+
+                """)
                 row = cursor.fetchone()
-                daily_revenue = float(row[0]) if row else 0.0
 
-                return daily_revenue
+                result = {
+                    'daily_revenue': float(row[0]) if row else 0.0,
+                    'daily_orders': int(row[1]) if row else 0,
+                    'customer_with_most_orders': row[2] if row else 0
+                }
+
+                return result
 
         except Exception as e:
-            return str(e)
+            return {'error': str(e)}
 
     def get_top_selling_foods(self):
         try:
             with pymssql.connect(**self.db_config) as conn:
                 cursor = conn.cursor()
-
                 cursor.execute("""
                 SELECT TOP 5
                     F.food_id,

src/main/webapp/WEB-INF/jspf/admin/components/chartRevenueByDay.jspf

@@ -5,44 +5,40 @@
 </div>
 
 <script>
-  const weeklyRevenueChart = document.getElementById('chart-revenue-by-day');
-
-  const week = ["6 ngày trước", "5 ngày trước", "4 ngày trước", "3 ngày trước", "Hôm kia", "Hôm qua", "Hôm nay"];
+  const weeklyRevenueChart = document.getElementById("chart-revenue-by-day");
 
-  // Gets the last 7 days (including today) as Date objects
-  for (let i = 0; i < 6; i++) {
-    // Subtract i from today's date
-    const date = new Date();
-    date.setDate(date.getUTCDate() - 6 + i); // Example: week[0] = 6 days ago, week[5] = yesterday, week[6] = today
-
-    // Gets the date string
-    const dayOfMonth = date.getUTCDate();
-    const month = date.getUTCMonth() + 1; // January is 0
-    const dateString = dayOfMonth + "/" + month;
-    week[i] = dateString;
-  }
+  // Fetch data from the server
+  fetch("http://localhost:8001/get_daily_sales")
+    .then((response) => response.json())
+    .then((data) => {
+      // Reverse the daily_revenue array to display older dates first
+      const weeklyRevenue = data.map((item) => item.daily_revenue).reverse();
+      const dates = data.map((item) => item.date).reverse();
 
-  // Gets the weekly revenue
-  const weeklyRevenue = [12012000, 19000000, 30000000, 5000000, 22000000, 3000000, 12000000];
-
-  new Chart(weeklyRevenueChart, {
-    type: 'line',
-    data: {
-      labels: week,
-      datasets: [{
-        label: 'Doanh thu',
-        data: weeklyRevenue,
-        borderWidth: 1
-      }]
-    },
-    options: {
-      scales: {
-        y: {
-          beginAtZero: false
-        }
-      },
-      responsive: true,
-      maintainAspectRatio: false
-    }
-  });
-</script>
+      new Chart(weeklyRevenueChart, {
+        type: "line",
+        data: {
+          labels: dates,
+          datasets: [
+            {
+              label: "Doanh thu",
+              data: weeklyRevenue,
+              borderWidth: 1,
+            },
+          ],
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: false,
+            },
+          },
+          responsive: true,
+          maintainAspectRatio: false,
+        },
+      });
+    })
+    .catch((error) => {
+      console.error("Error fetching data:", error);
+    });
+</script>

src/main/webapp/WEB-INF/jspf/admin/components/todayview.jspf

@@ -0,0 +1,45 @@
+<%@ page pageEncoding="UTF-8" %>
+<div class="container-fluid p-4 shadow rounded-4 bg-white mb-3">
+  <h2 class="text-start fs-2">Số liệu hôm nay</h2>
+  <div class="d-flex flex-row flex-wrap flex-between-center gap-3 mt-3">
+    <div>
+      <p class="fs-4 fw-bold mb-1">20.035.000đ</p>
+      <h6>Doanh thu bán hàng</h6>
+    </div>
+    <div>
+      <p class="fs-4 fw-bold mb-1" id="order_value">354</p>
+      <h6>Đơn hàng</h6>
+    </div>
+    <div>
+      <p class="fs-4 fw-bold mb-1">2.138</p>
+      <h6>Khách thăm</h6>
+    </div>
+    <div>
+      <p class="fs-4 fw-bold mb-1" id="today-vip">21</p>
+      <h6>khách vip hôm nay</h6>
+    </div>
+    <div>
+      <p class="fs-4 fw-bold mb-1">Cơm gà xối mỡ</p>
+      <h6>Món bán chạy nhất</h6>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Tạo một yêu cầu HTTP đến API
+  fetch("http://localhost:8001/get_daily_revenue")
+    .then(function (response) {
+      return response.json(); // Chuyển đổi phản hồi thành đối tượng JSON
+    })
+    .then(function (data) {
+      // Cập nhật nội dung trang web với dữ liệu từ API
+      document.querySelector(".fs-4.fw-bold.mb-1").textContent =
+        data.daily_revenue + "đ";
+      document.querySelector("#order_value").textContent = data.daily_orders;
+      document.querySelector("#today-vip").textContent =
+        data.customer_with_most_orders;
+    })
+    .catch(function (error) {
+      console.log("Lỗi: " + error);
+    });
+</script>

src/main/webapp/WEB-INF/jspf/admin/home.jspf

@@ -7,33 +7,10 @@
   14) { greeting = "Chào buổi trưa"; } else if (hour >= 14 && hour < 18) {
   greeting = "Chào buổi chiều"; } else { greeting = "Chào buổi tối"; } %>
   <p class="fw-bolder fs-3 mb-4"><%= greeting %>, ${adminName}!</p>
-  
+
   <!-- Daily statistics -->
-  <div class="container-fluid p-4 shadow rounded-4 bg-white mb-3">
-    <h2 class="text-start fs-2">Số liệu hôm nay</h2>
-    <div class="d-flex flex-row flex-wrap flex-between-center gap-3 mt-3">
-      <div>
-        <p class="fs-4 fw-bold mb-1">20.035.000đ</p>
-        <h6>Doanh thu bán hàng</h6>
-      </div>
-      <div>
-        <p class="fs-4 fw-bold mb-1">354</p>
-        <h6>Đơn hàng</h6>
-      </div>
-      <div>
-        <p class="fs-4 fw-bold mb-1">2.138</p>
-        <h6>Khách thăm</h6>
-      </div>
-      <div>
-        <p class="fs-4 fw-bold mb-1">21</p>
-        <h6>Khách hàng mới</h6>
-      </div>
-      <div>
-        <p class="fs-4 fw-bold mb-1">Cơm gà xối mỡ</p>
-        <h6>Món bán chạy nhất</h6>
-      </div>
-    </div>
-  </div>
+  <%@ include file="components/todayview.jspf" %>
+
   <!-- First row -->
   <div class="col-12 d-flex flex-row flex-wrap flex-between-center gap-3">
     <div class="flex-grow-1 col-7 flex-lg-grow-0 p-4 shadow rounded-4 bg-white">
@@ -53,5 +30,4 @@
       <%@ include file="components/chartMonthlyTarget.jspf" %>
     </div>
   </div>
-
 </div>