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
This commit is contained in:
michaelschal committed 2025-09-03 15:06:53 +00:00
1 parent 6ba8919487
commit e5963d960b
3 files changed
+34 -9

No files matched your search

+1 -1
View File
@@ -37,4 +37,4 @@ args = "npm run dev"
waitForPort = 5000 waitForPort = 5000
[agent] [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"]
+5 -5
View File
@@ -14,8 +14,8 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
const year = currentDate.getFullYear(); const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1; const month = currentDate.getMonth() + 1;
// Construire l'URL pour les statistiques annuelles // Construire l'URL avec les paramètres
const statsUrl = `/api/stats/yearly?year=${year}${selectedStoreId ? `&storeId=${selectedStoreId}` : ''}`; const statsUrl = `/api/stats/monthly?year=${year}&month=${month}${selectedStoreId ? `&storeId=${selectedStoreId}` : ''}`;
const { data: stats, isLoading } = useQuery({ const { data: stats, isLoading } = useQuery({
queryKey: [statsUrl, selectedStoreId], // Include selectedStoreId in key to force refetch 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) { if (!response.ok) {
throw new Error('Failed to fetch yearly stats'); throw new Error('Failed to fetch stats');
} }
return response.json(); return response.json();
@@ -55,7 +55,7 @@ export default function StatsPanel({ currentDate = new Date() }: StatsPanelProps
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="text-lg flex items-center"> <CardTitle className="text-lg flex items-center">
<TrendingUp className="w-5 h-5 text-accent mr-2" /> <TrendingUp className="w-5 h-5 text-accent mr-2" />
Statistiques de l'année Statistiques du mois
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <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="mt-3 pt-3 border-t border-gray-200 text-center">
<div className="text-sm text-gray-600 flex items-center justify-center"> <div className="text-sm text-gray-600 flex items-center justify-center">
<Clock className="w-4 h-4 mr-1" /> <Clock className="w-4 h-4 mr-1" />
Délai commande → livraison: Délai moyen:
<span className="font-medium text-gray-900 ml-1"> <span className="font-medium text-gray-900 ml-1">
{stats?.averageDeliveryTime?.toFixed(1) || '0'} jours {stats?.averageDeliveryTime?.toFixed(1) || '0'} jours
</span> </span>
+28 -3
View File
@@ -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) // 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 ordersUrl = `/api/orders${selectedStoreId && user?.role === 'admin' ? `?storeId=${selectedStoreId}` : ''}`;
const deliveriesUrl = `/api/deliveries${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 // Calculs pour les statistiques
const pendingOrdersCount = Array.isArray(allOrders) ? allOrders.filter((order: any) => order.status === 'pending').length : 0; 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 deliveredThisMonth = Array.isArray(allDeliveries) ? allDeliveries.filter((delivery: any) => {
const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt); const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
if (!deliveryDate) return false; if (!deliveryDate) return false;
@@ -405,8 +430,8 @@ export default function Dashboard() {
<CardContent className="p-4 sm:p-6"> <CardContent className="p-4 sm:p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-xs sm:text-sm font-medium text-gray-600">Délai moyen (jours)</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}</p> <p className="text-2xl sm:text-3xl font-bold text-gray-900 mt-1 sm:mt-2">{averageDeliveryTime} jours</p>
</div> </div>
<div className="h-10 w-10 sm:h-12 sm:w-12 bg-blue-100 flex items-center justify-center rounded-lg"> <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" /> <BarChart3 className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600" />