Add analytics dashboard for tracking key performance metrics

Adds new analytics routes and functionality to display summary data, time series, and supplier/store breakdowns, with role-based access control. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/nSTv9k9
2026-10-16 03:40:06 +02:00 · 2025-09-22 15:02:00 +00:00
1 parent 314f56ed01
commit e23f826f0a
@@ -23,6 +23,7 @@ import Tasks from "@/pages/Tasks";
 import SavTickets from "@/pages/SavTickets";
 import Avoirs from "@/pages/Avoirs";
 import WeatherSettings from "@/pages/WeatherSettings";
+import Analytics from "@/pages/Analytics";
 import Layout from "@/components/Layout";

 function RouterProduction() {
@@ -102,6 +103,7 @@ function RouterProduction() {
        <Route path="/tasks" component={Tasks} />
        <Route path="/sav" component={SavTickets} />
        <Route path="/avoirs" component={Avoirs} />
+        <Route path="/analytics" component={Analytics} />
        
        {/* Routes de compatibilité - redirection vers utilities */}
        <Route path="/backup" component={Utilities} />
@@ -257,6 +257,12 @@ export default function Sidebar() {
      icon: FileText, 
      roles: ["admin", "directeur"] 
    },
+    { 
+      path: "/analytics", 
+      label: "Statistiques", 
+      icon: BarChart3, 
+      roles: ["admin", "directeur", "manager"] 
+    },
    { 
      path: "/avoirs", 
      label: "Avoirs", 
@@ -0,0 +1,526 @@
+import { useState, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { useStore } from "@/contexts/StoreContext";
+import { CalendarIcon, Download, RefreshCw, TrendingUp, Package, Clock, Euro, Store, Truck, BarChart3, PieChart, Activity, FileDown } from "lucide-react";
+import { addDays, format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, startOfYear, endOfYear } from "date-fns";
+import { fr } from "date-fns/locale";
+import { LineChart, Line, BarChart, Bar, PieChart as RechartsChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+
+// Couleurs pour les graphiques
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D', '#FFC658', '#8DD1E1', '#D084D0', '#FFB3BA'];
+
+export default function Analytics() {
+  const { user } = useAuthUnified();
+  const { selectedStoreId } = useStore();
+  
+  // États des filtres
+  const [dateRange, setDateRange] = useState({
+    from: startOfMonth(new Date()),
+    to: endOfMonth(new Date())
+  });
+  const [selectedSuppliers, setSelectedSuppliers] = useState<number[]>([]);
+  const [selectedStores, setSelectedStores] = useState<number[]>([]);
+  const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
+  const [granularity, setGranularity] = useState<'day' | 'week' | 'month'>('day');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  // Périodes rapides
+  const quickPeriods = [
+    { label: "Aujourd'hui", value: () => ({ from: new Date(), to: new Date() }) },
+    { label: "Cette semaine", value: () => ({ from: startOfWeek(new Date(), { locale: fr }), to: endOfWeek(new Date(), { locale: fr }) }) },
+    { label: "Ce mois", value: () => ({ from: startOfMonth(new Date()), to: endOfMonth(new Date()) }) },
+    { label: "Cette année", value: () => ({ from: startOfYear(new Date()), to: endOfYear(new Date()) }) },
+    { label: "30 derniers jours", value: () => ({ from: addDays(new Date(), -30), to: new Date() }) },
+    { label: "90 derniers jours", value: () => ({ from: addDays(new Date(), -90), to: new Date() }) }
+  ];
+
+  // Construction des paramètres de requête
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams();
+    if (dateRange.from) params.append('startDate', dateRange.from.toISOString());
+    if (dateRange.to) params.append('endDate', dateRange.to.toISOString());
+    if (selectedSuppliers.length) params.append('supplierIds', selectedSuppliers.join(','));
+    if (selectedStores.length) params.append('groupIds', selectedStores.join(','));
+    if (selectedStatus.length) params.append('status', selectedStatus.join(','));
+    return params.toString();
+  }, [dateRange, selectedSuppliers, selectedStores, selectedStatus]);
+
+  // Récupération des données
+  const { data: summary, isLoading: summaryLoading } = useQuery({
+    queryKey: ['/api/analytics/summary', queryParams],
+    queryFn: async () => {
+      const response = await fetch(`/api/analytics/summary?${queryParams}`, {
+        credentials: 'include'
+      });
+      if (!response.ok) throw new Error('Failed to fetch summary');
+      return response.json();
+    },
+    refetchInterval: isRefreshing ? 30000 : false
+  });
+
+  const { data: timeseries } = useQuery({
+    queryKey: ['/api/analytics/timeseries', queryParams, granularity],
+    queryFn: async () => {
+      const response = await fetch(`/api/analytics/timeseries?${queryParams}&granularity=${granularity}`, {
+        credentials: 'include'
+      });
+      if (!response.ok) throw new Error('Failed to fetch timeseries');
+      return response.json();
+    }
+  });
+
+  const { data: bySupplier } = useQuery({
+    queryKey: ['/api/analytics/by-supplier', queryParams],
+    queryFn: async () => {
+      const response = await fetch(`/api/analytics/by-supplier?${queryParams}`, {
+        credentials: 'include'
+      });
+      if (!response.ok) throw new Error('Failed to fetch by supplier');
+      return response.json();
+    }
+  });
+
+  const { data: byStore } = useQuery({
+    queryKey: ['/api/analytics/by-store', queryParams],
+    queryFn: async () => {
+      const response = await fetch(`/api/analytics/by-store?${queryParams}`, {
+        credentials: 'include'
+      });
+      if (!response.ok) throw new Error('Failed to fetch by store');
+      return response.json();
+    }
+  });
+
+  const { data: suppliers } = useQuery({
+    queryKey: ['/api/suppliers'],
+  });
+
+  const { data: stores } = useQuery({
+    queryKey: ['/api/groups'],
+  });
+
+  // Fonction d'export
+  const handleExport = async (type: string) => {
+    const response = await fetch(`/api/analytics/export?${queryParams}&type=${type}`, {
+      credentials: 'include'
+    });
+    if (response.ok) {
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `analytics_${type}_${format(new Date(), 'yyyy-MM-dd')}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    }
+  };
+
+  if (summaryLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-gray-600">Chargement des statistiques...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="bg-white border-b p-6 -m-6 mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold flex items-center gap-2">
+              <BarChart3 className="h-6 w-6 text-primary" />
+              Tableau de bord Analytics
+            </h1>
+            <p className="text-gray-600 mt-1">Analysez vos performances logistiques</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsRefreshing(!isRefreshing)}
+              className={isRefreshing ? "animate-pulse" : ""}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              {isRefreshing ? "Actualisé" : "Temps réel"}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleExport('summary')}
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Export CSV
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Filtres */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center gap-2">
+            <CalendarIcon className="h-5 w-5" />
+            Filtres
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Périodes rapides */}
+          <div className="flex flex-wrap gap-2">
+            {quickPeriods.map(period => (
+              <Button
+                key={period.label}
+                variant="outline"
+                size="sm"
+                onClick={() => setDateRange(period.value())}
+              >
+                {period.label}
+              </Button>
+            ))}
+          </div>
+
+          {/* Sélecteur de dates */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="md:col-span-1">
+              <label className="text-sm font-medium mb-1 block">Période</label>
+              <div className="flex gap-2">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="justify-start text-left font-normal">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {dateRange.from ? format(dateRange.from, 'dd/MM/yyyy', { locale: fr }) : 'Date début'}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar
+                      mode="single"
+                      selected={dateRange.from}
+                      onSelect={(date) => date && setDateRange(prev => ({ ...prev, from: date }))}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <span className="text-gray-500 self-center">→</span>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="justify-start text-left font-normal">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {dateRange.to ? format(dateRange.to, 'dd/MM/yyyy', { locale: fr }) : 'Date fin'}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar
+                      mode="single"
+                      selected={dateRange.to}
+                      onSelect={(date) => date && setDateRange(prev => ({ ...prev, to: date }))}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium mb-1 block">Granularité</label>
+              <Select value={granularity} onValueChange={(value: any) => setGranularity(value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="day">Jour</SelectItem>
+                  <SelectItem value="week">Semaine</SelectItem>
+                  <SelectItem value="month">Mois</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium mb-1 block">Fournisseurs</label>
+              <Select 
+                value={selectedSuppliers.length === 0 ? "all" : 
+                       selectedSuppliers.length === 1 ? selectedSuppliers[0].toString() : "multiple"}
+                onValueChange={(value) => {
+                  if (value === "all") {
+                    setSelectedSuppliers([]);
+                  } else if (value !== "multiple") {
+                    // Basculer entre sélection unique ou multiple
+                    const supplierId = parseInt(value);
+                    if (selectedSuppliers.includes(supplierId)) {
+                      setSelectedSuppliers(selectedSuppliers.filter(id => id !== supplierId));
+                    } else {
+                      setSelectedSuppliers([supplierId]);
+                    }
+                  }
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Tous les fournisseurs" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les fournisseurs</SelectItem>
+                  {suppliers?.map((supplier: any) => (
+                    <SelectItem key={supplier.id} value={supplier.id.toString()}>
+                      {selectedSuppliers.includes(supplier.id) ? "✓ " : ""}{supplier.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium mb-1 block">Magasins</label>
+              <Select 
+                value={selectedStores.length === 0 ? "all" : 
+                       selectedStores.length === 1 ? selectedStores[0].toString() : "multiple"}
+                onValueChange={(value) => {
+                  if (value === "all") {
+                    setSelectedStores([]);
+                  } else if (value !== "multiple") {
+                    // Basculer entre sélection unique ou multiple
+                    const storeId = parseInt(value);
+                    if (selectedStores.includes(storeId)) {
+                      setSelectedStores(selectedStores.filter(id => id !== storeId));
+                    } else {
+                      setSelectedStores([storeId]);
+                    }
+                  }
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Tous les magasins" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les magasins</SelectItem>
+                  {stores?.map((store: any) => (
+                    <SelectItem key={store.id} value={store.id.toString()}>
+                      {selectedStores.includes(store.id) ? "✓ " : ""}{store.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* KPIs */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium text-gray-600">
+              Commandes totales
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div className="text-2xl font-bold">{summary?.totalOrders || 0}</div>
+              <Package className="h-8 w-8 text-blue-500 opacity-50" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium text-gray-600">
+              Livraisons totales
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div className="text-2xl font-bold">{summary?.totalDeliveries || 0}</div>
+              <Truck className="h-8 w-8 text-green-500 opacity-50" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium text-gray-600">
+              Taux de ponctualité
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div className="text-2xl font-bold">
+                {summary?.onTimeRate ? `${summary.onTimeRate.toFixed(1)}%` : '0%'}
+              </div>
+              <Clock className="h-8 w-8 text-orange-500 opacity-50" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium text-gray-600">
+              Montant total
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div className="text-2xl font-bold">
+                {summary?.totalAmount ? `${summary.totalAmount.toFixed(2)}€` : '0€'}
+              </div>
+              <Euro className="h-8 w-8 text-purple-500 opacity-50" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Graphiques */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Évolution temporelle */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Activity className="h-5 w-5" />
+              Évolution temporelle
+            </CardTitle>
+            <CardDescription>Commandes vs Livraisons</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <LineChart data={timeseries || []}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Line type="monotone" dataKey="orders" stroke="#8884d8" name="Commandes" />
+                <Line type="monotone" dataKey="deliveries" stroke="#82ca9d" name="Livraisons" />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Répartition par fournisseur */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <PieChart className="h-5 w-5" />
+              Répartition par fournisseur
+            </CardTitle>
+            <CardDescription>Top 5 fournisseurs</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <RechartsChart>
+                <Pie
+                  data={bySupplier?.slice(0, 5) || []}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={(entry) => entry.supplierName}
+                  outerRadius={80}
+                  fill="#8884d8"
+                  dataKey="deliveries"
+                >
+                  {bySupplier?.slice(0, 5).map((entry: any, index: number) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </RechartsChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Performance par magasin */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Store className="h-5 w-5" />
+              Performance par magasin
+            </CardTitle>
+            <CardDescription>Commandes et livraisons</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={byStore?.slice(0, 5) || []} layout="horizontal">
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis type="number" />
+                <YAxis dataKey="storeName" type="category" />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="orders" fill="#8884d8" name="Commandes" />
+                <Bar dataKey="deliveries" fill="#82ca9d" name="Livraisons" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Top fournisseurs */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <TrendingUp className="h-5 w-5" />
+              Top 5 Fournisseurs
+            </CardTitle>
+            <CardDescription>Par volume et montant</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {summary?.topSuppliers?.map((supplier: any, index: number) => (
+                <div key={supplier.id} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Badge variant="outline" className="w-8 h-8 rounded-full p-0 flex items-center justify-center">
+                      {index + 1}
+                    </Badge>
+                    <div>
+                      <p className="font-medium">{supplier.name}</p>
+                      <p className="text-sm text-gray-600">
+                        {supplier.count} livraisons • {supplier.amount.toFixed(2)}€
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-sm font-medium">{supplier.count}</div>
+                    <div className="text-xs text-gray-600">livraisons</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Actions d'export */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileDown className="h-5 w-5" />
+            Export des données
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" onClick={() => handleExport('summary')}>
+              Export Résumé
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => handleExport('timeseries')}>
+              Export Évolution
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => handleExport('suppliers')}>
+              Export Fournisseurs
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => handleExport('stores')}>
+              Export Magasins
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}