Checkpoint: Ajout d'un tableau de bord détaillé avec statistiques avancées et graphiques.

Nouvelles fonctionnalités :
- Cartes de statistiques : Factures traitées, Montant total, Score moyen, Dernière activité
- Graphique en barres : Évolution des factures par semaine (30 derniers jours)
- Graphique circulaire : Top 10 fournisseurs avec pourcentages
- Liste détaillée : Tous les fournisseurs avec nombre de factures et montants
- Bouton "Voir les statistiques détaillées" pour afficher/masquer les graphiques
- Calculs automatiques : montant moyen par facture, score de qualité avec label (Excellent/Bon/Moyen/Faible)

Le dashboard utilise Recharts pour les visualisations et offre une vue complète de l'activité de traitement des factures.

client/src/pages/Dashboard.tsx

@@ -1,117 +1,262 @@
 import DashboardLayout from "@/components/DashboardLayout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { trpc } from "@/lib/trpc";
-import { FileText, CheckCircle, Clock, AlertCircle } from "lucide-react";
+import { FileText, DollarSign, TrendingUp, Clock } from "lucide-react";
+import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+const COLORS = [
+  '#3b82f6', // blue
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#f59e0b', // amber
+  '#10b981', // emerald
+  '#06b6d4', // cyan
+  '#f97316', // orange
+  '#6366f1', // indigo
+  '#14b8a6', // teal
+  '#a855f7', // violet
+];
 
 export default function Dashboard() {
   const { data: stats, isLoading } = trpc.invoices.getStats.useQuery();
-  const { data: invoices } = trpc.invoices.list.useQuery();
+  const [showDetailedStats, setShowDetailedStats] = useState(false);
 
-  const recentInvoices = invoices?.slice(0, 5) || [];
+  if (isLoading) {
+    return (
+      <DashboardLayout>
+        <div className="flex items-center justify-center h-96">
+          <div className="text-muted-foreground">Chargement des statistiques...</div>
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('fr-FR', {
+      style: 'currency',
+      currency: 'EUR',
+    }).format(amount);
+  };
+
+  const formatDate = (date: Date | string | null) => {
+    if (!date) return 'N/A';
+    return new Date(date).toLocaleDateString('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getScoreLabel = (score: number) => {
+    if (score >= 90) return 'Excellent';
+    if (score >= 75) return 'Bon';
+    if (score >= 60) return 'Moyen';
+    return 'Faible';
+  };
+
+  const getScoreColor = (score: number) => {
+    if (score >= 90) return 'text-green-600';
+    if (score >= 75) return 'text-blue-600';
+    if (score >= 60) return 'text-yellow-600';
+    return 'text-red-600';
+  };
 
   return (
     <DashboardLayout>
       <div className="space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold">Tableau de bord</h1>
-          <p className="text-gray-500 mt-1">Vue d'ensemble de vos factures</p>
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold">Tableau de bord</h1>
+            <p className="text-muted-foreground">Activité des 30 derniers jours</p>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => setShowDetailedStats(!showDetailedStats)}
+          >
+            {showDetailedStats ? 'Masquer' : 'Voir les statistiques détaillées'}
+          </Button>
         </div>
 
-        {/* Stats cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* Stats Cards */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-sm font-medium text-gray-600">Total</CardTitle>
-              <FileText className="w-4 h-4 text-gray-400" />
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Factures traitées</CardTitle>
+              <FileText className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">{stats?.total || 0}</div>
-              <p className="text-xs text-gray-500 mt-1">Factures au total</p>
+              <div className="text-2xl font-bold">{stats?.completed || 0}</div>
+              <p className="text-xs text-muted-foreground">
+                {stats?.completed || 0} complétées, {stats?.error || 0} en erreur
+              </p>
             </CardContent>
           </Card>
 
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-sm font-medium text-gray-600">Complétées</CardTitle>
-              <CheckCircle className="w-4 h-4 text-green-500" />
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Montant total</CardTitle>
+              <DollarSign className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-green-600">{stats?.completed || 0}</div>
-              <p className="text-xs text-gray-500 mt-1">Extraction réussie</p>
+              <div className="text-2xl font-bold">{formatCurrency(stats?.totalAmount || 0)}</div>
+              <p className="text-xs text-muted-foreground">
+                Moyenne : {stats?.completed ? formatCurrency((stats.totalAmount || 0) / stats.completed) : '0 €'} / facture
+              </p>
             </CardContent>
           </Card>
 
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-sm font-medium text-gray-600">En cours</CardTitle>
-              <Clock className="w-4 h-4 text-blue-500" />
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Score moyen</CardTitle>
+              <TrendingUp className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-blue-600">{stats?.processing || 0}</div>
-              <p className="text-xs text-gray-500 mt-1">En traitement</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-sm font-medium text-gray-600">Erreurs</CardTitle>
-              <AlertCircle className="w-4 h-4 text-red-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold text-red-600">{stats?.error || 0}</div>
-              <p className="text-xs text-gray-500 mt-1">Échecs d'extraction</p>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Recent invoices */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Factures récentes</CardTitle>
-            <CardDescription>Les 5 dernières factures importées</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {recentInvoices.length === 0 ? (
-              <div className="text-center py-8 text-gray-500">
-                <FileText className="w-12 h-12 mx-auto mb-3 text-gray-300" />
-                <p>Aucune facture pour le moment</p>
-                <p className="text-sm mt-1">Commencez par importer un fichier PDF</p>
+              <div className="flex items-center gap-3">
+                <div className={`text-2xl font-bold ${getScoreColor(stats?.averageScore || 0)}`}>
+                  {stats?.averageScore || 0}
+                </div>
+                <div className={`text-sm font-medium ${getScoreColor(stats?.averageScore || 0)}`}>
+                  {getScoreLabel(stats?.averageScore || 0)}
+                </div>
               </div>
-            ) : (
-              <div className="space-y-3">
-                {recentInvoices.map((invoice) => (
-                  <div
-                    key={invoice.id}
-                    className="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
-                  >
-                    <div className="flex-1">
-                      <div className="font-medium">{invoice.supplierName || "Fournisseur inconnu"}</div>
-                      <div className="text-sm text-gray-500">
-                        {invoice.invoiceNumber || "N° inconnu"} • {invoice.invoiceDate ? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR") : "Date inconnue"}
-                      </div>
+              <p className="text-xs text-muted-foreground">Qualité d'extraction</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Dernière activité</CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {stats?.lastActivity 
+                  ? new Date(stats.lastActivity).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' })
+                  : 'N/A'}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {stats?.lastActivity 
+                  ? new Date(stats.lastActivity).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+                  : ''}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Detailed Stats */}
+        {showDetailedStats && (
+          <>
+            {/* Charts Row */}
+            <div className="grid gap-4 md:grid-cols-2">
+              {/* Weekly Chart */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Factures par semaine</CardTitle>
+                  <CardDescription>
+                    Nombre de factures traitées chaque semaine (30 derniers jours)
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {stats?.weeklyData && stats.weeklyData.length > 0 ? (
+                    <ResponsiveContainer width="100%" height={300}>
+                      <BarChart data={stats.weeklyData}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="week" />
+                        <YAxis />
+                        <Tooltip />
+                        <Bar dataKey="count" fill="#3b82f6" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+                      Aucune donnée disponible
                     </div>
-                    <div className="text-right">
-                      <div className="font-semibold">
-                        {invoice.totalAmount ? `${parseFloat(invoice.totalAmount).toFixed(2)} €` : "-"}
-                      </div>
-                      <div className="text-sm">
-                        {invoice.status === "completed" && (
-                          <span className="text-green-600">Complété</span>
-                        )}
-                        {invoice.status === "processing" && (
-                          <span className="text-blue-600">En cours</span>
-                        )}
-                        {invoice.status === "error" && (
-                          <span className="text-red-600">Erreur</span>
-                        )}
-                      </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Top Suppliers Pie Chart */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Top 10 fournisseurs</CardTitle>
+                  <CardDescription>
+                    Répartition des factures par fournisseur (30 derniers jours)
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {stats?.topSuppliers && stats.topSuppliers.length > 0 ? (
+                    <ResponsiveContainer width="100%" height={300}>
+                      <PieChart>
+                        <Pie
+                          data={stats.topSuppliers}
+                          cx="50%"
+                          cy="50%"
+                          labelLine={false}
+                          label={(entry) => `${entry.name}: ${entry.percentage.toFixed(0)}%`}
+                          outerRadius={80}
+                          fill="#8884d8"
+                          dataKey="count"
+                        >
+                          {stats.topSuppliers.map((entry, index) => (
+                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+                      Aucune donnée disponible
                     </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Suppliers List */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Détail par fournisseur</CardTitle>
+                <CardDescription>Liste des fournisseurs (30 derniers jours)</CardDescription>
+              </CardHeader>
+              <CardContent>
+                {stats?.suppliersList && stats.suppliersList.length > 0 ? (
+                  <div className="space-y-2">
+                    {stats.suppliersList.map((supplier, index) => (
+                      <div
+                        key={index}
+                        className="flex items-center justify-between p-3 rounded-lg border hover:bg-accent transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div
+                            className="w-3 h-3 rounded-full"
+                            style={{ backgroundColor: COLORS[index % COLORS.length] }}
+                          />
+                          <span className="font-medium">{supplier.name}</span>
+                        </div>
+                        <div className="text-right">
+                          <div className="font-semibold">{supplier.count} factures</div>
+                          <div className="text-sm text-muted-foreground">
+                            {formatCurrency(supplier.amount)}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    Aucun fournisseur trouvé
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </>
+        )}
       </div>
     </DashboardLayout>
   );