From 295965fa57b6f34c84ef7772e4837c7b456af6c9 Mon Sep 17 00:00:00 2001 From: Manus Date: Mon, 15 Jun 2026 11:54:58 -0400 Subject: [PATCH] true message --- client/src/pages/Invoices.tsx | 264 +++++++++++++++---------------- client/src/pages/InvoicesBAP.tsx | 76 ++++++++- 2 files changed, 200 insertions(+), 140 deletions(-) diff --git a/client/src/pages/Invoices.tsx b/client/src/pages/Invoices.tsx index 60a7790..ad59a2c 100644 --- a/client/src/pages/Invoices.tsx +++ b/client/src/pages/Invoices.tsx @@ -34,14 +34,21 @@ import { } from "@/components/ui/table"; import { trpc } from "@/lib/trpc"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, Filter, LayoutList, AlignJustify, ArrowUpDown, ChevronUp, ChevronDown } from "lucide-react"; +import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, Filter, LayoutList, LayoutGrid, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react"; import * as XLSX from 'xlsx'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { toast } from "sonner"; import { useLocation } from "wouter"; +type SortField = "invoiceDate" | "createdAt"; +type SortDir = "asc" | "desc"; + export default function Invoices() { const [, setLocation] = useLocation(); const [searchQuery, setSearchQuery] = useState(""); + const [compactMode, setCompactMode] = useState(true); + const [sortField, setSortField] = useState("createdAt"); + const [sortDir, setSortDir] = useState("desc"); const [selectedIds, setSelectedIds] = useState([]); const [statusFilter, setStatusFilter] = useState("all"); const [recipientFilter, setRecipientFilter] = useState("all"); @@ -53,9 +60,6 @@ export default function Invoices() { const [pendingInvoiceId, setPendingInvoiceId] = useState(null); const [textDialogOpen, setTextDialogOpen] = useState(false); const [selectedInvoiceText, setSelectedInvoiceText] = useState(null); - const [viewMode, setViewMode] = useState<"compact" | "detail">("compact"); - const [sortField, setSortField] = useState<"createdAt" | "invoiceDate">("createdAt"); - const [sortDir, setSortDir] = useState<"asc" | "desc">("desc"); const { user } = useAuth(); const isAdmin = user?.role === 'admin'; const { data: invoices, isLoading } = trpc.invoices.list.useQuery(); @@ -193,6 +197,20 @@ export default function Invoices() { ) ).sort(); + const handleSort = (field: SortField) => { + if (sortField === field) { + setSortDir(d => d === "asc" ? "desc" : "asc"); + } else { + setSortField(field); + setSortDir("desc"); + } + }; + + const SortIcon = ({ field }: { field: SortField }) => { + if (sortField !== field) return ; + return sortDir === "asc" ? : ; + }; + const filteredInvoices = invoices?.filter((inv) => { // Filter by search query if (searchQuery) { @@ -221,28 +239,7 @@ export default function Invoices() { return true; }); - - // Tri - const sortedInvoices = filteredInvoices ? [...filteredInvoices].sort((a, b) => { - const aVal = sortField === "createdAt" ? new Date(a.createdAt).getTime() : (a.invoiceDate ? new Date(a.invoiceDate).getTime() : 0); - const bVal = sortField === "createdAt" ? new Date(b.createdAt).getTime() : (b.invoiceDate ? new Date(b.invoiceDate).getTime() : 0); - return sortDir === "asc" ? aVal - bVal : bVal - aVal; - }) : []; - - const handleSort = (field: "createdAt" | "invoiceDate") => { - if (sortField === field) { - setSortDir(d => d === "asc" ? "desc" : "asc"); - } else { - setSortField(field); - setSortDir("desc"); - } - }; - - const SortIcon = ({ field }: { field: "createdAt" | "invoiceDate" }) => { - if (sortField !== field) return ; - return sortDir === "asc" ? : ; - }; - + const statusCounts = { all: invoices?.length || 0, exported: invoices?.filter(inv => inv.exportStatus === "exported").length || 0, @@ -325,7 +322,19 @@ export default function Invoices() { return invoice && isEligibleForExport(invoice); }); - const allEligibleSelected = sortedInvoices.length > 0 && + const sortedInvoices = [...(filteredInvoices || [])].sort((a, b) => { + let aVal: number, bVal: number; + if (sortField === "invoiceDate") { + aVal = a.invoiceDate ? new Date(a.invoiceDate).getTime() : 0; + bVal = b.invoiceDate ? new Date(b.invoiceDate).getTime() : 0; + } else { + aVal = a.createdAt ? new Date(a.createdAt as unknown as string).getTime() : 0; + bVal = b.createdAt ? new Date(b.createdAt as unknown as string).getTime() : 0; + } + return sortDir === "asc" ? aVal - bVal : bVal - aVal; + }); + + const allEligibleSelected = (sortedInvoices.length || 0) > 0 && sortedInvoices.filter(inv => isEligibleForExport(inv)).every(inv => selectedIds.includes(inv.id)); return ( @@ -413,52 +422,42 @@ export default function Invoices() { - {/* Barre de tri + mode d'affichage */} -
-
- Trier par : - - + + Détail +
-
- - + + Date facture +
@@ -500,7 +499,7 @@ export default function Invoices() { {/* Table */} {isLoading ? (
Chargement...
- ) : sortedInvoices && sortedInvoices.length > 0 ? ( + ) : sortedInvoices.length > 0 ? (
@@ -511,23 +510,24 @@ export default function Invoices() { onCheckedChange={handleSelectAll} /> - Fournisseur - {viewMode === "detail" && Destinataire} + {!compactMode && Destinataire} N° Facture - - + handleSort("invoiceDate")} + > + Date facture - - + handleSort("createdAt")} + > + Date réception Montant - {viewMode === "detail" && Service} - {viewMode === "detail" && Abonnement} + {!compactMode && Service} + {!compactMode && Abonnement} Score Statut Actions @@ -543,7 +543,6 @@ export default function Invoices() { onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)} /> - - {viewMode === "detail" && {(invoice as any).recipientName || "-"}} + {!compactMode && {(invoice as any).recipientName || "-"}} {invoice.invoiceNumber || "-"} {invoice.invoiceDate @@ -561,7 +560,7 @@ export default function Invoices() { {invoice.createdAt - ? new Date(invoice.createdAt).toLocaleDateString("fr-FR") + ? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR") : "-"} @@ -569,59 +568,56 @@ export default function Invoices() { ? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €` : "-"} - {viewMode === "detail" && ( - - - - )} - {viewMode === "detail" && ( - - { + if (e.target.value === "__ADD_NEW__") { + setPendingInvoiceId(invoice.id); + setAddDialogType("service"); + setAddDialogOpen(true); + e.target.value = invoice.serviceConcerne || ""; + } else { updateFieldMutation.mutate({ id: invoice.id, - data: { isSubscription: newVal }, + data: { serviceConcerne: e.target.value || undefined }, }); - }} - className="w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" - > - - - - - )} + } + }} + className="w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + > + + {departments?.map((dept) => ( + + ))} + + + } + {!compactMode && + + } {getQualityBadge(invoice.qualityScore)} {getExportStatusBadge(invoice.exportStatus || "not_exported")} diff --git a/client/src/pages/InvoicesBAP.tsx b/client/src/pages/InvoicesBAP.tsx index 105b36f..ffb8c54 100644 --- a/client/src/pages/InvoicesBAP.tsx +++ b/client/src/pages/InvoicesBAP.tsx @@ -32,7 +32,7 @@ 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, CalendarDays } from "lucide-react"; +import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, CheckCircle, CheckCircle2, ShieldCheck, RefreshCw, FolderDown, ChevronDown, ChevronRight, ChevronsUpDown, CalendarDays, ArrowUpDown, ArrowUp, ArrowDown } 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 @@ -129,6 +129,9 @@ export default function InvoicesBAP() { const currentYear = new Date().getFullYear(); const [selectedYear, setSelectedYear] = useState(String(currentYear)); const [selectedMonth, setSelectedMonth] = useState("all"); // "all" ou "01".."12" + // Tri + const [sortField, setSortField] = useState<"invoiceDate" | "createdAt">("createdAt"); + const [sortDir, setSortDir] = useState<"asc" | "desc">("desc"); const toggleRow = (id: number) => { setExpandedIds(prev => { @@ -516,8 +519,34 @@ export default function InvoicesBAP() { return invoice && isEligibleForExport(invoice); }); - const allEligibleSelected = (filteredInvoices?.length || 0) > 0 && - (filteredInvoices || []).every(inv => selectedIds.includes(inv.id)); + const handleSort = (field: "invoiceDate" | "createdAt") => { + if (sortField === field) { + setSortDir(d => d === "asc" ? "desc" : "asc"); + } else { + setSortField(field); + setSortDir("desc"); + } + }; + + const SortIcon = ({ field }: { field: "invoiceDate" | "createdAt" }) => { + if (sortField !== field) return ; + return sortDir === "asc" ? : ; + }; + + const sortedInvoices = [...(filteredInvoices || [])].sort((a, b) => { + let aVal: number, bVal: number; + if (sortField === "invoiceDate") { + aVal = a.invoiceDate ? new Date(a.invoiceDate).getTime() : 0; + bVal = b.invoiceDate ? new Date(b.invoiceDate).getTime() : 0; + } else { + aVal = a.createdAt ? new Date(a.createdAt as unknown as string).getTime() : 0; + bVal = b.createdAt ? new Date(b.createdAt as unknown as string).getTime() : 0; + } + return sortDir === "asc" ? aVal - bVal : bVal - aVal; + }); + + const allEligibleSelected = (sortedInvoices.length || 0) > 0 && + sortedInvoices.every(inv => selectedIds.includes(inv.id)); return ( @@ -702,6 +731,25 @@ export default function InvoicesBAP() { )} + {/* Tri */} +
+ Trier par : + + +
+ {/* Status Filters */}
- ) : filteredInvoices && filteredInvoices.length > 0 ? ( + ) : sortedInvoices.length > 0 ? (
@@ -788,7 +836,18 @@ export default function InvoicesBAP() { Fournisseur N° Facture - Date + handleSort("invoiceDate")} + > + Date facture + + handleSort("createdAt")} + > + Date réception + Montant Score Statut @@ -796,7 +855,7 @@ export default function InvoicesBAP() { - {filteredInvoices.map((invoice) => { + {sortedInvoices.map((invoice) => { const isExpanded = expandedIds.has(invoice.id); return ( @@ -831,6 +890,11 @@ export default function InvoicesBAP() { ? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR") : "-"} + + {invoice.createdAt + ? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR") + : "-"} + {invoice.totalAmount ? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`