From 54f3f8eeefa9ab9ef822c1f5236bf82a877c884c Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 15 Apr 2026 08:20:43 -0400
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Ajout=20d'un=20s=C3=A9lecteur=20P?=
 =?UTF-8?q?=C3=A9riode=20(ann=C3=A9e=20+=20mois)=20dans=20la=20barre=20de?=
 =?UTF-8?q?=20filtres=20de=20Factures=20BAP,=20cumulable=20avec=20les=20fi?=
 =?UTF-8?q?ltres=20de=20statut=20existants.=20Le=20s=C3=A9lecteur=20mois?=
 =?UTF-8?q?=20est=20d=C3=A9sactiv=C3=A9=20si=20"Toute=20ann=C3=A9e"=20est?=
 =?UTF-8?q?=20s=C3=A9lectionn=C3=A9.=20Bouton=20R=C3=A9initialiser=20visib?=
 =?UTF-8?q?le=20si=20un=20filtre=20est=20actif.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/InvoicesBAP.tsx | 67 +++++++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/InvoicesBAP.tsx b/client/src/pages/InvoicesBAP.tsx
index 6810795..397c306 100644
--- a/client/src/pages/InvoicesBAP.tsx
+++ b/client/src/pages/InvoicesBAP.tsx
@@ -32,7 +32,8 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { trpc } from "@/lib/trpc";
-import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, CheckCircle, CheckCircle2, ShieldCheck, RefreshCw, FolderDown, ChevronDown, ChevronRight, ChevronsUpDown } from "lucide-react";
+import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, CheckCircle, CheckCircle2, ShieldCheck, RefreshCw, FolderDown, ChevronDown, ChevronRight, ChevronsUpDown, CalendarDays } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 // Helper : télécharge un ZIP de plusieurs PDFs annotés BAP
 async function downloadBapZip(
@@ -124,6 +125,10 @@ export default function InvoicesBAP() {
   // Accordéon : lignes dépliées
   const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
   const [allExpanded, setAllExpanded] = useState(false);
+  // Filtre par période
+  const currentYear = new Date().getFullYear();
+  const [selectedYear, setSelectedYear] = useState<string>(String(currentYear));
+  const [selectedMonth, setSelectedMonth] = useState<string>("all"); // "all" ou "01".."12"
 
   const toggleRow = (id: number) => {
     setExpandedIds(prev => {
@@ -354,6 +359,16 @@ export default function InvoicesBAP() {
       if (!matchesSearch) return false;
     }
     
+    // Filter by period (year + optional month)
+    if (selectedYear !== "all") {
+      const invDate = inv.invoiceDate ? new Date(inv.invoiceDate) : null;
+      const fallbackDate = inv.createdAt ? new Date(inv.createdAt) : null;
+      const dateToUse = invDate || fallbackDate;
+      if (!dateToUse) return false;
+      if (dateToUse.getFullYear() !== parseInt(selectedYear)) return false;
+      if (selectedMonth !== "all" && (dateToUse.getMonth() + 1) !== parseInt(selectedMonth)) return false;
+    }
+
     // Filter by export status
     if (statusFilter !== "all") {
       if (statusFilter === "exported" && inv.exportStatus !== "exported") return false;
@@ -614,8 +629,56 @@ export default function InvoicesBAP() {
               </div>
             </div>
             
+            {/* Period Filter + Status Filters */}
+            <div className="flex flex-wrap items-center gap-2 mb-3 p-3 bg-slate-50 dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-700">
+              <div className="flex items-center gap-1.5 text-sm font-medium text-slate-600 dark:text-slate-400">
+                <CalendarDays className="w-4 h-4" />
+                Période :
+              </div>
+              {/* Year selector */}
+              <Select value={selectedYear} onValueChange={(v) => { setSelectedYear(v); if (v === "all") setSelectedMonth("all"); }}>
+                <SelectTrigger className="w-28 h-8 text-sm">
+                  <SelectValue placeholder="Année" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Toute année</SelectItem>
+                  {Array.from({ length: 5 }, (_, i) => currentYear - i).map(y => (
+                    <SelectItem key={y} value={String(y)}>{y}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {/* Month selector — disabled when year = all */}
+              <Select
+                value={selectedMonth}
+                onValueChange={setSelectedMonth}
+                disabled={selectedYear === "all"}
+              >
+                <SelectTrigger className="w-36 h-8 text-sm">
+                  <SelectValue placeholder="Mois" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les mois</SelectItem>
+                  {[
+                    ["01","Janvier"],["02","Février"],["03","Mars"],["04","Avril"],
+                    ["05","Mai"],["06","Juin"],["07","Juillet"],["08","Août"],
+                    ["09","Septembre"],["10","Octobre"],["11","Novembre"],["12","Décembre"]
+                  ].map(([v, label]) => (
+                    <SelectItem key={v} value={v}>{label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {(selectedYear !== "all" || selectedMonth !== "all") && (
+                <button
+                  onClick={() => { setSelectedYear(String(currentYear)); setSelectedMonth("all"); }}
+                  className="text-xs text-slate-500 hover:text-slate-700 underline"
+                >
+                  Réinitialiser
+                </button>
+              )}
+            </div>
+
             {/* Status Filters */}
-            <div className="flex gap-2 mb-4">
+            <div className="flex flex-wrap gap-2 mb-4">
               <Button
                 variant={statusFilter === "all" ? "default" : "outline"}
                 onClick={() => setStatusFilter("all")}