From e5963d960bfcc789d3601ceca90d06788fe1023b Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 15:06:53 +0000
Subject: [PATCH] Update dashboard to display yearly delivery times and monthly
 stats

Modify the StatsPanel component to fetch and display monthly statistics instead of yearly. Adjust the Dashboard component to fetch and display yearly average delivery times in the 'Average Delivery Time' card.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cfbfe47c-0c9a-4ebf-8a41-2937407eccff
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cfbfe47c-0c9a-4ebf-8a41-2937407eccff/sQhaOQu
---
 .replit                              |  2 +-
 client/src/components/StatsPanel.tsx | 10 ++++-----
 client/src/pages/Dashboard.tsx       | 31 +++++++++++++++++++++++++---
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/.replit b/.replit
index 758bc01..853b5d3 100644
--- a/.replit
+++ b/.replit
@@ -37,4 +37,4 @@ args = "npm run dev"
 waitForPort = 5000
 
 [agent]
-integrations = ["javascript_database==1.0.0", "javascript_log_in_with_replit==1.0.0", "javascript_object_storage==1.0.0"]
+integrations = ["javascript_database==1.0.0", "javascript_object_storage==1.0.0", "javascript_log_in_with_replit==1.0.0"]
diff --git a/client/src/components/StatsPanel.tsx b/client/src/components/StatsPanel.tsx
index efbfbed..003c1e2 100644
--- a/client/src/components/StatsPanel.tsx
+++ b/client/src/components/StatsPanel.tsx
@@ -14,8 +14,8 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth() + 1;
 
-  // Construire l'URL pour les statistiques annuelles
-  const statsUrl = `/api/stats/yearly?year=${year}${selectedStoreId ? `&storeId=${selectedStoreId}` : ''}`;
+  // Construire l'URL avec les paramètres
+  const statsUrl = `/api/stats/monthly?year=${year}&month=${month}${selectedStoreId ? `&storeId=${selectedStoreId}` : ''}`;
 
   const { data: stats, isLoading } = useQuery({
     queryKey: [statsUrl, selectedStoreId], // Include selectedStoreId in key to force refetch
@@ -25,7 +25,7 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
       });
       
       if (!response.ok) {
-        throw new Error('Failed to fetch yearly stats');
+        throw new Error('Failed to fetch stats');
       }
       
       return response.json();
@@ -55,7 +55,7 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
       <CardHeader className="pb-3">
         <CardTitle className="text-lg flex items-center">
           <TrendingUp className="w-5 h-5 text-accent mr-2" />
-          Statistiques de l'année
+          Statistiques du mois
         </CardTitle>
       </CardHeader>
       <CardContent>
@@ -91,7 +91,7 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
         <div className="mt-3 pt-3 border-t border-gray-200 text-center">
           <div className="text-sm text-gray-600 flex items-center justify-center">
             <Clock className="w-4 h-4 mr-1" />
-            Délai commande → livraison: 
+            Délai moyen: 
             <span className="font-medium text-gray-900 ml-1">
               {stats?.averageDeliveryTime?.toFixed(1) || '0'} jours
             </span>
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 3d62420..f89b5c3 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -41,6 +41,31 @@ export default function Dashboard() {
     },
   });
 
+  // Statistiques annuelles pour la carte de délai moyen
+  const { data: yearlyStats } = useQuery({
+    queryKey: ['/api/stats/yearly', selectedStoreId],
+    queryFn: async () => {
+      const currentDate = new Date();
+      const params = new URLSearchParams({
+        year: currentDate.getFullYear().toString(),
+      });
+      
+      if (selectedStoreId && user?.role === 'admin') {
+        params.append('storeId', selectedStoreId.toString());
+      }
+      
+      const response = await fetch(`/api/stats/yearly?${params.toString()}`, {
+        credentials: 'include'
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch yearly stats');
+      }
+      
+      return response.json();
+    },
+  });
+
   // Construire les URLs pour récupérer toutes les données (pas de filtrage par date)
   const ordersUrl = `/api/orders${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
   const deliveriesUrl = `/api/deliveries${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
@@ -247,7 +272,7 @@ export default function Dashboard() {
 
   // Calculs pour les statistiques
   const pendingOrdersCount = Array.isArray(allOrders) ? allOrders.filter((order: any) => order.status === 'pending').length : 0;
-  const averageDeliveryTime = Math.round(stats?.averageDeliveryTime || 0);
+  const averageDeliveryTime = Math.round(yearlyStats?.averageDeliveryTime || 0);
   const deliveredThisMonth = Array.isArray(allDeliveries) ? allDeliveries.filter((delivery: any) => {
     const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
     if (!deliveryDate) return false;
@@ -405,8 +430,8 @@ export default function Dashboard() {
           <CardContent className="p-4 sm:p-6">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-xs sm:text-sm font-medium text-gray-600">Délai moyen (jours)</p>
-                <p className="text-2xl sm:text-3xl font-bold text-gray-900 mt-1 sm:mt-2">{averageDeliveryTime}</p>
+                <p className="text-xs sm:text-sm font-medium text-gray-600">Délai commande → livraison</p>
+                <p className="text-2xl sm:text-3xl font-bold text-gray-900 mt-1 sm:mt-2">{averageDeliveryTime} jours</p>
               </div>
               <div className="h-10 w-10 sm:h-12 sm:w-12 bg-blue-100 flex items-center justify-center rounded-lg">
                 <BarChart3 className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600" />