Checkpoint: Ajout du filtre destinataire dans la liste des factures (dropdown + recherche textuelle), graphique "Top 10 destinataires" et liste détaillée dans le dashboard, filtre destinataire dans les paramètres SFTP (sftpRecipientFilter) avec application lors de l'export

client/src/pages/Dashboard.tsx

@@ -218,39 +218,116 @@ export default function Dashboard() {
               </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)}
+            {/* Suppliers List + Recipients List side by side */}
+            <div className="grid gap-4 md:grid-cols-2">
+              <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>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-center py-8 text-muted-foreground">
+                      Aucun fournisseur trouvé
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Recipients List */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Détail par destinataire</CardTitle>
+                  <CardDescription>Liste des destinataires (30 derniers jours)</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {stats?.recipientsList && stats.recipientsList.length > 0 ? (
+                    <div className="space-y-2">
+                      {stats.recipientsList.map((recipient, 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 + 3) % COLORS.length] }}
+                            />
+                            <span className="font-medium">{recipient.name}</span>
+                          </div>
+                          <div className="text-right">
+                            <div className="font-semibold">{recipient.count} factures</div>
+                            <div className="text-sm text-muted-foreground">
+                              {formatCurrency(recipient.amount)}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-center py-8 text-muted-foreground">
+                      Aucun destinataire trouvé
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Top Recipients Pie Chart */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Top 10 destinataires</CardTitle>
+                <CardDescription>
+                  Répartition des factures par destinataire (30 derniers jours)
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {stats?.topRecipients && stats.topRecipients.length > 0 ? (
+                  <ResponsiveContainer width="100%" height={300}>
+                    <PieChart>
+                      <Pie
+                        data={stats.topRecipients}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        label={(entry) => `${entry.name}: ${entry.percentage.toFixed(0)}%`}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="count"
+                      >
+                        {stats.topRecipients.map((entry, index) => (
+                          <Cell key={`cell-r-${index}`} fill={COLORS[(index + 3) % COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
                 ) : (
-                  <div className="text-center py-8 text-muted-foreground">
-                    Aucun fournisseur trouvé
+                  <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+                    Aucun destinataire trouvé — les factures doivent avoir un champ Destinataire rempli
                   </div>
                 )}
               </CardContent>

client/src/pages/Invoices.tsx

@@ -32,7 +32,8 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { trpc } from "@/lib/trpc";
-import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, Filter } from "lucide-react";
 import * as XLSX from 'xlsx';
 import { toast } from "sonner";
 import { useLocation } from "wouter";
@@ -42,6 +43,7 @@ export default function Invoices() {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [recipientFilter, setRecipientFilter] = useState<string>("all");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [invoiceToDelete, setInvoiceToDelete] = useState<number | null>(null);
   const [addDialogOpen, setAddDialogOpen] = useState(false);
@@ -175,12 +177,20 @@ export default function Invoices() {
     }
   };
 
+  // Collect unique recipients for the filter dropdown
+  const uniqueRecipients = Array.from(
+    new Set(
+      (invoices || []).map(inv => (inv as any).recipientName).filter(Boolean)
+    )
+  ).sort();
+
   const filteredInvoices = invoices?.filter((inv) => {
     // Filter by search query
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
       const matchesSearch = inv.supplierName?.toLowerCase().includes(query) ||
-        inv.invoiceNumber?.toLowerCase().includes(query);
+        inv.invoiceNumber?.toLowerCase().includes(query) ||
+        (inv as any).recipientName?.toLowerCase().includes(query);
       if (!matchesSearch) return false;
     }
     
@@ -190,6 +200,15 @@ export default function Invoices() {
       if (statusFilter === "not_exported" && inv.exportStatus !== "not_exported") return false;
       if (statusFilter === "export_error" && inv.exportStatus !== "export_error") return false;
     }
+
+    // Filter by recipient
+    if (recipientFilter !== "all") {
+      if (recipientFilter === "__empty__") {
+        if ((inv as any).recipientName) return false;
+      } else {
+        if ((inv as any).recipientName !== recipientFilter) return false;
+      }
+    }
     
     return true;
   });
@@ -336,17 +355,32 @@ export default function Invoices() {
 
         <Card>
           <CardContent className="pt-6">
-            {/* Search */}
-            <div className="mb-4">
-              <div className="relative">
+            {/* Search + Recipient Filter */}
+            <div className="mb-4 flex gap-3 flex-wrap">
+              <div className="relative flex-1 min-w-[200px]">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
-                  placeholder="Rechercher par fournisseur ou numéro..."
+                  placeholder="Rechercher par fournisseur, destinataire ou numéro..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   className="pl-10"
                 />
               </div>
+              <div className="flex items-center gap-2 min-w-[220px]">
+                <Filter className="w-4 h-4 text-gray-400 shrink-0" />
+                <Select value={recipientFilter} onValueChange={setRecipientFilter}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Filtrer par destinataire" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Tous les destinataires</SelectItem>
+                    <SelectItem value="__empty__">Sans destinataire</SelectItem>
+                    {uniqueRecipients.map((r) => (
+                      <SelectItem key={r} value={r}>{r}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
             
             {/* Status Filters */}

client/src/pages/Settings.tsx

@@ -671,6 +671,7 @@ export default function Settings() {
   const [sftpPassword, setSftpPassword] = useState("");
   const [sftpRemotePath, setSftpRemotePath] = useState("/");
   const [sftpAutoExport, setSftpAutoExport] = useState(false);
+  const [sftpRecipientFilter, setSftpRecipientFilter] = useState("");
   const [llmLogsRetentionMonths, setLlmLogsRetentionMonths] = useState(3);
 
   useEffect(() => {
@@ -689,6 +690,7 @@ export default function Settings() {
       setSftpPassword(settings.sftpPassword || "");
       setSftpRemotePath(settings.sftpRemotePath || "/");
       setSftpAutoExport(settings.sftpAutoExport === 1);
+      setSftpRecipientFilter((settings as any).sftpRecipientFilter || "");
       setLlmLogsRetentionMonths(settings.llmLogsRetentionMonths || 3);
     }
   }, [settings]);
@@ -732,6 +734,7 @@ export default function Settings() {
       sftpPassword,
       sftpRemotePath,
       sftpAutoExport: sftpAutoExport ? 1 : 0,
+      sftpRecipientFilter,
       llmLogsRetentionMonths,
     });
   };
@@ -1093,6 +1096,22 @@ export default function Settings() {
                   </p>
                 </div>
 
+                <div className="space-y-3">
+                  <Label htmlFor="sftpRecipientFilter" className="text-base font-semibold">
+                    Filtre destinataire
+                  </Label>
+                  <Input
+                    id="sftpRecipientFilter"
+                    value={sftpRecipientFilter}
+                    onChange={(e) => setSftpRecipientFilter(e.target.value)}
+                    placeholder="Ex: DSI, Service Travaux, Itinova... (vide = exporter toutes)"
+                    className="h-11"
+                  />
+                  <p className="text-sm text-muted-foreground flex items-center gap-2">
+                    <AlertCircle className="w-4 h-4" />
+                    Seules les factures dont le destinataire contient cette valeur seront exportées automatiquement. Laisser vide pour exporter toutes les factures.
+                  </p>
+                </div>
                 <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg border">
                   <div className="space-y-1">
                     <Label htmlFor="sftpAutoExport" className="text-base font-semibold cursor-pointer">