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">

drizzle/0016_tricky_quasimodo.sql

@@ -0,0 +1 @@
+ALTER TABLE `userSettings` ADD `sftpRecipientFilter` text;

drizzle/meta/_journal.json

@@ -113,6 +113,13 @@
       "when": 1775984357982,
       "tag": "0015_cool_redwing",
       "breakpoints": true
+    },
+    {
+      "idx": 16,
+      "version": "5",
+      "when": 1775985531192,
+      "tag": "0016_tricky_quasimodo",
+      "breakpoints": true
     }
   ]
 }

drizzle/schema.ts

@@ -136,6 +136,7 @@ export const userSettings = mysqlTable("userSettings", {
   totalAmountKeywords: text("totalAmountKeywords"), // Ex: "Net à payer, Total à régler, Amount due"
   subscriptionKeywords: text("subscriptionKeywords"), // Ex: "Abonnement, Subscription, Mensuel, Annuel"
   recipientKeywords: text("recipientKeywords"), // Ex: "Destinataire, À l'attention de, Client"
+  sftpRecipientFilter: text("sftpRecipientFilter"), // Filtre destinataire pour l'export SFTP (vide = tous)
   // SFTP Configuration
   sftpHost: varchar("sftpHost", { length: 255 }),
   sftpPort: int("sftpPort").default(22),

server/db.ts

@@ -283,7 +283,9 @@ export async function getInvoiceStats(userId: number) {
     lastActivity: null,
     weeklyData: [],
     topSuppliers: [],
-    suppliersList: []
+    suppliersList: [],
+    topRecipients: [],
+    recipientsList: []
   };
   
   const allInvoices = await getInvoicesByUserId(userId);
@@ -352,7 +354,37 @@ export async function getInvoiceStats(userId: number) {
       amount: data.amount
     }))
     .sort((a, b) => b.count - a.count);
-  
+
+  // Calculate top recipients
+  const recipientMap = new Map<string, { count: number; amount: number }>();
+  completed.forEach(inv => {
+    const recipient = (inv as any).recipientName;
+    if (!recipient) return;
+    const current = recipientMap.get(recipient) || { count: 0, amount: 0 };
+    recipientMap.set(recipient, {
+      count: current.count + 1,
+      amount: current.amount + (Number(inv.totalAmount) || 0)
+    });
+  });
+
+  const topRecipients = Array.from(recipientMap.entries())
+    .map(([name, data]) => ({
+      name,
+      count: data.count,
+      amount: data.amount,
+      percentage: completed.length > 0 ? (data.count / completed.length * 100) : 0
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 10);
+
+  const recipientsList = Array.from(recipientMap.entries())
+    .map(([name, data]) => ({
+      name,
+      count: data.count,
+      amount: data.amount
+    }))
+    .sort((a, b) => b.count - a.count);
+
   return {
     total: allInvoices.length,
     completed: completed.length,
@@ -363,7 +395,9 @@ export async function getInvoiceStats(userId: number) {
     lastActivity,
     weeklyData,
     topSuppliers,
-    suppliersList
+    suppliersList,
+    topRecipients,
+    recipientsList
   };
 }
 

server/routers.ts

@@ -463,6 +463,7 @@ export const appRouter = router({
         totalAmountKeywords: z.string().optional(),
         subscriptionKeywords: z.string().optional(),
         recipientKeywords: z.string().optional(),
+        sftpRecipientFilter: z.string().optional(),
         sftpHost: z.string().optional(),
         sftpPort: z.number().optional(),
         sftpUsername: z.string().optional(),
@@ -750,9 +751,14 @@ export const appRouter = router({
         if (!config) {
           throw new TRPCError({ code: "BAD_REQUEST", message: "SFTP not configured" });
         }
+
+        // Load user settings to check recipient filter
+        const userSettings = await getUserSettings(ctx.user.id);
+        const recipientFilter = (userSettings as any)?.sftpRecipientFilter?.trim() || "";
         
         let successCount = 0;
         let errorCount = 0;
+        let filteredCount = 0;
         
         for (const invoiceId of input.invoiceIds) {
           try {
@@ -761,6 +767,15 @@ export const appRouter = router({
               errorCount++;
               continue;
             }
+
+            // Apply recipient filter if configured
+            if (recipientFilter) {
+              const invoiceRecipient = ((invoice as any).recipientName || "").toLowerCase();
+              if (!invoiceRecipient.includes(recipientFilter.toLowerCase())) {
+                filteredCount++;
+                continue;
+              }
+            }
             
             await exportInvoiceToSftp(
               config,
@@ -782,7 +797,7 @@ export const appRouter = router({
           }
         }
         
-        return { successCount, errorCount };
+        return { successCount, errorCount, filteredCount };
       }),
   }),
   

todo.md

@@ -578,3 +578,11 @@
 - [x] Ajouter colonne Destinataire dans la liste des factures (Invoices.tsx)
 - [x] Ajouter Destinataire dans l'export Excel
 - [ ] Déployer sur le VPS
+
+## Filtre destinataire + Top destinataires + Filtre SFTP
+- [x] Ajouter filtre par destinataire dans Invoices.tsx (dropdown + recherche)
+- [x] Ajouter colonne `sftpRecipientFilter` dans userSettings (schéma DB + migration)
+- [x] Ajouter topRecipients et recipientsList dans getInvoiceStats (db.ts)
+- [x] Ajouter graphique Top destinataires dans Dashboard.tsx
+- [x] Ajouter filtre destinataire dans la section SFTP de Settings.tsx
+- [x] Mettre à jour la route settings.upsert pour sftpRecipientFilter