manus-admin/demat-facturation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

true message

Browse Source
This commit is contained in:
Manus
2026-06-15 11:54:58 -04:00
parent 2fde4f92a6
commit 295965fa57
2 changed files with 200 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
client/src/pages/Invoices.tsx
View File

@@ -34,14 +34,21 @@ import {
} from "@/components/ui/table"; } from "@/components/ui/table";
import { trpc } from "@/lib/trpc"; import { trpc } from "@/lib/trpc";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; 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 * as XLSX from 'xlsx';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { toast } from "sonner"; import { toast } from "sonner";
import { useLocation } from "wouter"; import { useLocation } from "wouter";
type SortField = "invoiceDate" | "createdAt";
type SortDir = "asc" | "desc";
export default function Invoices() { export default function Invoices() {
const [, setLocation] = useLocation(); const [, setLocation] = useLocation();
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [compactMode, setCompactMode] = useState(true);
const [sortField, setSortField] = useState<SortField>("createdAt");
const [sortDir, setSortDir] = useState<SortDir>("desc");
const [selectedIds, setSelectedIds] = useState<number[]>([]); const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [statusFilter, setStatusFilter] = useState<string>("all"); const [statusFilter, setStatusFilter] = useState<string>("all");
const [recipientFilter, setRecipientFilter] = useState<string>("all"); const [recipientFilter, setRecipientFilter] = useState<string>("all");
@@ -53,9 +60,6 @@ export default function Invoices() {
const [pendingInvoiceId, setPendingInvoiceId] = useState<number | null>(null); const [pendingInvoiceId, setPendingInvoiceId] = useState<number | null>(null);
const [textDialogOpen, setTextDialogOpen] = useState(false); const [textDialogOpen, setTextDialogOpen] = useState(false);
const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null); const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(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 { user } = useAuth();
const isAdmin = user?.role === 'admin'; const isAdmin = user?.role === 'admin';
const { data: invoices, isLoading } = trpc.invoices.list.useQuery(); const { data: invoices, isLoading } = trpc.invoices.list.useQuery();
@@ -193,6 +197,20 @@ export default function Invoices() {
) )
).sort(); ).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 <ArrowUpDown className="w-3 h-3 ml-1 opacity-40" />;
return sortDir === "asc" ? <ArrowUp className="w-3 h-3 ml-1" /> : <ArrowDown className="w-3 h-3 ml-1" />;
};
const filteredInvoices = invoices?.filter((inv) => { const filteredInvoices = invoices?.filter((inv) => {
// Filter by search query // Filter by search query
if (searchQuery) { if (searchQuery) {
@@ -222,27 +240,6 @@ export default function Invoices() {
return true; 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 <ArrowUpDown className="w-3 h-3 ml-1 text-gray-400" />;
return sortDir === "asc" ? <ChevronUp className="w-3 h-3 ml-1 text-blue-600" /> : <ChevronDown className="w-3 h-3 ml-1 text-blue-600" />;
};
const statusCounts = { const statusCounts = {
all: invoices?.length || 0, all: invoices?.length || 0,
exported: invoices?.filter(inv => inv.exportStatus === "exported").length || 0, exported: invoices?.filter(inv => inv.exportStatus === "exported").length || 0,
@@ -325,7 +322,19 @@ export default function Invoices() {
return invoice && isEligibleForExport(invoice); 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)); sortedInvoices.filter(inv => isEligibleForExport(inv)).every(inv => selectedIds.includes(inv.id));
return ( return (
@@ -413,52 +422,42 @@ export default function Invoices() {
</div> </div>
</div> </div>
{/* Barre de tri + mode d'affichage */} {/* Mode compact/détail + Tri */}
<div className="flex items-center justify-between mb-3"> <div className="flex gap-2 mb-4 flex-wrap items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex gap-2">
<span className="text-sm text-gray-500">Trier par :</span> <Button
<button variant={compactMode ? "default" : "outline"}
onClick={() => handleSort("createdAt")} size="sm"
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${ onClick={() => setCompactMode(true)}
sortField === "createdAt" title="Mode compact"
? "bg-blue-50 border-blue-300 text-blue-700 font-medium"
: "border-gray-200 text-gray-600 hover:bg-gray-50"
}`}
> >
Date de réception <SortIcon field="createdAt" /> <LayoutList className="w-4 h-4 mr-1" /> Compact
</button> </Button>
<button <Button
onClick={() => handleSort("invoiceDate")} variant={!compactMode ? "default" : "outline"}
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${ size="sm"
sortField === "invoiceDate" onClick={() => setCompactMode(false)}
? "bg-blue-50 border-blue-300 text-blue-700 font-medium" title="Mode détail"
: "border-gray-200 text-gray-600 hover:bg-gray-50"
}`}
> >
Date de facturation <SortIcon field="invoiceDate" /> <LayoutGrid className="w-4 h-4 mr-1" /> Détail
</button> </Button>
</div> </div>
<div className="flex items-center gap-1 border rounded-md overflow-hidden"> <div className="flex gap-2 items-center">
<button <span className="text-sm text-gray-500">Trier par :</span>
onClick={() => setViewMode("compact")} <Button
title="Vue compacte" variant={sortField === "createdAt" ? "default" : "outline"}
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${ size="sm"
viewMode === "compact" ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-50" onClick={() => handleSort("createdAt")}
}`}
> >
<LayoutList className="w-4 h-4" /> Date réception <SortIcon field="createdAt" />
Compact </Button>
</button> <Button
<button variant={sortField === "invoiceDate" ? "default" : "outline"}
onClick={() => setViewMode("detail")} size="sm"
title="Vue détaillée" onClick={() => handleSort("invoiceDate")}
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
viewMode === "detail" ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-50"
}`}
> >
<AlignJustify className="w-4 h-4" /> Date facture <SortIcon field="invoiceDate" />
Détail </Button>
</button>
</div> </div>
</div> </div>
@@ -500,7 +499,7 @@ export default function Invoices() {
{/* Table */} {/* Table */}
{isLoading ? ( {isLoading ? (
<div className="text-center py-8 text-gray-500">Chargement...</div> <div className="text-center py-8 text-gray-500">Chargement...</div>
) : sortedInvoices && sortedInvoices.length > 0 ? ( ) : sortedInvoices.length > 0 ? (
<div className="border rounded-lg overflow-hidden"> <div className="border rounded-lg overflow-hidden">
<Table> <Table>
<TableHeader> <TableHeader>
@@ -511,23 +510,24 @@ export default function Invoices() {
onCheckedChange={handleSelectAll} onCheckedChange={handleSelectAll}
/> />
</TableHead> </TableHead>
<TableHead>Fournisseur</TableHead> <TableHead>Fournisseur</TableHead>
{viewMode === "detail" && <TableHead>Destinataire</TableHead>} {!compactMode && <TableHead>Destinataire</TableHead>}
<TableHead>N° Facture</TableHead> <TableHead>N° Facture</TableHead>
<TableHead> <TableHead
<button onClick={() => handleSort("invoiceDate")} className="flex items-center hover:text-blue-600"> className="cursor-pointer select-none"
Date facture <SortIcon field="invoiceDate" /> onClick={() => handleSort("invoiceDate")}
</button> >
<span className="flex items-center">Date facture <SortIcon field="invoiceDate" /></span>
</TableHead> </TableHead>
<TableHead> <TableHead
<button onClick={() => handleSort("createdAt")} className="flex items-center hover:text-blue-600"> className="cursor-pointer select-none"
Date réception <SortIcon field="createdAt" /> onClick={() => handleSort("createdAt")}
</button> >
<span className="flex items-center">Date réception <SortIcon field="createdAt" /></span>
</TableHead> </TableHead>
<TableHead>Montant</TableHead> <TableHead>Montant</TableHead>
{viewMode === "detail" && <TableHead>Service</TableHead>} {!compactMode && <TableHead>Service</TableHead>}
{viewMode === "detail" && <TableHead>Abonnement</TableHead>} {!compactMode && <TableHead>Abonnement</TableHead>}
<TableHead>Score</TableHead> <TableHead>Score</TableHead>
<TableHead>Statut</TableHead> <TableHead>Statut</TableHead>
<TableHead className="w-32">Actions</TableHead> <TableHead className="w-32">Actions</TableHead>
@@ -543,7 +543,6 @@ export default function Invoices() {
onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)} onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)}
/> />
</TableCell> </TableCell>
<TableCell className="font-medium"> <TableCell className="font-medium">
<button <button
onClick={() => setLocation(`/invoices/${invoice.id}`)} onClick={() => setLocation(`/invoices/${invoice.id}`)}
@@ -552,7 +551,7 @@ export default function Invoices() {
{invoice.supplierName || "Inconnu"} {invoice.supplierName || "Inconnu"}
</button> </button>
</TableCell> </TableCell>
{viewMode === "detail" && <TableCell>{(invoice as any).recipientName || "-"}</TableCell>} {!compactMode && <TableCell>{(invoice as any).recipientName || "-"}</TableCell>}
<TableCell>{invoice.invoiceNumber || "-"}</TableCell> <TableCell>{invoice.invoiceNumber || "-"}</TableCell>
<TableCell> <TableCell>
{invoice.invoiceDate {invoice.invoiceDate
@@ -561,7 +560,7 @@ export default function Invoices() {
</TableCell> </TableCell>
<TableCell className="text-xs text-gray-500"> <TableCell className="text-xs text-gray-500">
{invoice.createdAt {invoice.createdAt
? new Date(invoice.createdAt).toLocaleDateString("fr-FR") ? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR")
: "-"} : "-"}
</TableCell> </TableCell>
<TableCell> <TableCell>
@@ -569,59 +568,56 @@ export default function Invoices() {
? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €` ? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`
: "-"} : "-"}
</TableCell> </TableCell>
{viewMode === "detail" && ( {!compactMode && <TableCell className="text-sm">
<TableCell className="text-sm"> <select
<select value={invoice.serviceConcerne || ""}
value={invoice.serviceConcerne || ""} onChange={(e) => {
onChange={(e) => { if (e.target.value === "__ADD_NEW__") {
if (e.target.value === "__ADD_NEW__") { setPendingInvoiceId(invoice.id);
setPendingInvoiceId(invoice.id); setAddDialogType("service");
setAddDialogType("service"); setAddDialogOpen(true);
setAddDialogOpen(true); e.target.value = invoice.serviceConcerne || "";
e.target.value = invoice.serviceConcerne || ""; } else {
} else {
updateFieldMutation.mutate({
id: invoice.id,
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"
>
<option value="">-</option>
{departments?.map((dept) => (
<option key={dept.id} value={dept.name}>{dept.name}</option>
))}
<option value="__ADD_NEW__" className="font-semibold text-blue-600">➜ Ajouter...</option>
</select>
</TableCell>
)}
{viewMode === "detail" && (
<TableCell className="text-sm">
<select
value={invoice.isSubscription ? "OUI" : "NON"}
onChange={(e) => {
const newVal = e.target.value === "OUI" ? 1 : 0;
if (invoice.supplierName && newVal !== (invoice.isSubscription ?? 1)) {
upsertLearningMutation.mutate({
supplierName: invoice.supplierName,
fieldName: 'isSubscription',
originalValue: (invoice.isSubscription ?? 1) === 1 ? 'OUI' : 'NON',
correctedValue: newVal === 1 ? 'OUI' : 'NON',
});
}
updateFieldMutation.mutate({ updateFieldMutation.mutate({
id: invoice.id, 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"
<option value="NON">NON</option> >
<option value="OUI">OUI</option> <option value="">-</option>
</select> {departments?.map((dept) => (
</TableCell> <option key={dept.id} value={dept.name}>{dept.name}</option>
)} ))}
<option value="__ADD_NEW__" className="font-semibold text-blue-600">➾ Ajouter...</option>
</select>
</TableCell>}
{!compactMode && <TableCell className="text-sm">
<select
value={invoice.isSubscription ? "OUI" : "NON"}
onChange={(e) => {
const newVal = e.target.value === "OUI" ? 1 : 0;
// Apprentissage : mémoriser la correction manuelle isSubscription
if (invoice.supplierName && newVal !== (invoice.isSubscription ?? 1)) {
upsertLearningMutation.mutate({
supplierName: invoice.supplierName,
fieldName: 'isSubscription',
originalValue: (invoice.isSubscription ?? 1) === 1 ? 'OUI' : 'NON',
correctedValue: newVal === 1 ? 'OUI' : 'NON',
});
}
updateFieldMutation.mutate({
id: invoice.id,
data: { isSubscription: newVal },
});
}}
className="w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="NON">NON</option>
<option value="OUI">OUI</option>
</select>
</TableCell>}
<TableCell>{getQualityBadge(invoice.qualityScore)}</TableCell> <TableCell>{getQualityBadge(invoice.qualityScore)}</TableCell>
<TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell> <TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
<TableCell> <TableCell>

76
client/src/pages/InvoicesBAP.tsx
View File

@@ -32,7 +32,7 @@ import {
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import { trpc } from "@/lib/trpc"; 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"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
// Helper : télécharge un ZIP de plusieurs PDFs annotés BAP // 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 currentYear = new Date().getFullYear();
const [selectedYear, setSelectedYear] = useState<string>(String(currentYear)); const [selectedYear, setSelectedYear] = useState<string>(String(currentYear));
const [selectedMonth, setSelectedMonth] = useState<string>("all"); // "all" ou "01".."12" const [selectedMonth, setSelectedMonth] = useState<string>("all"); // "all" ou "01".."12"
// Tri
const [sortField, setSortField] = useState<"invoiceDate" | "createdAt">("createdAt");
const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
const toggleRow = (id: number) => { const toggleRow = (id: number) => {
setExpandedIds(prev => { setExpandedIds(prev => {
@@ -516,8 +519,34 @@ export default function InvoicesBAP() {
return invoice && isEligibleForExport(invoice); return invoice && isEligibleForExport(invoice);
}); });
const allEligibleSelected = (filteredInvoices?.length || 0) > 0 && const handleSort = (field: "invoiceDate" | "createdAt") => {
(filteredInvoices || []).every(inv => selectedIds.includes(inv.id)); if (sortField === field) {
setSortDir(d => d === "asc" ? "desc" : "asc");
} else {
setSortField(field);
setSortDir("desc");
}
};
const SortIcon = ({ field }: { field: "invoiceDate" | "createdAt" }) => {
if (sortField !== field) return <ArrowUpDown className="w-3 h-3 ml-1 opacity-40" />;
return sortDir === "asc" ? <ArrowUp className="w-3 h-3 ml-1" /> : <ArrowDown className="w-3 h-3 ml-1" />;
};
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 ( return (
<DashboardLayout> <DashboardLayout>
@@ -702,6 +731,25 @@ export default function InvoicesBAP() {
)} )}
</div> </div>
{/* Tri */}
<div className="flex gap-2 items-center mb-3">
<span className="text-sm text-gray-500">Trier par :</span>
<Button
variant={sortField === "createdAt" ? "default" : "outline"}
size="sm"
onClick={() => handleSort("createdAt")}
>
Date réception <SortIcon field="createdAt" />
</Button>
<Button
variant={sortField === "invoiceDate" ? "default" : "outline"}
size="sm"
onClick={() => handleSort("invoiceDate")}
>
Date facture <SortIcon field="invoiceDate" />
</Button>
</div>
{/* Status Filters */} {/* Status Filters */}
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
<Button <Button
@@ -764,7 +812,7 @@ export default function InvoicesBAP() {
{/* Table */} {/* Table */}
{isLoading ? ( {isLoading ? (
<div className="text-center py-8 text-gray-500">Chargement...</div> <div className="text-center py-8 text-gray-500">Chargement...</div>
) : filteredInvoices && filteredInvoices.length > 0 ? ( ) : sortedInvoices.length > 0 ? (
<div className="border rounded-lg overflow-hidden"> <div className="border rounded-lg overflow-hidden">
<Table> <Table>
<TableHeader> <TableHeader>
@@ -788,7 +836,18 @@ export default function InvoicesBAP() {
</TableHead> </TableHead>
<TableHead>Fournisseur</TableHead> <TableHead>Fournisseur</TableHead>
<TableHead>N° Facture</TableHead> <TableHead>N° Facture</TableHead>
<TableHead>Date</TableHead> <TableHead
className="cursor-pointer select-none"
onClick={() => handleSort("invoiceDate")}
>
<span className="flex items-center">Date facture <SortIcon field="invoiceDate" /></span>
</TableHead>
<TableHead
className="cursor-pointer select-none"
onClick={() => handleSort("createdAt")}
>
<span className="flex items-center">Date réception <SortIcon field="createdAt" /></span>
</TableHead>
<TableHead>Montant</TableHead> <TableHead>Montant</TableHead>
<TableHead>Score</TableHead> <TableHead>Score</TableHead>
<TableHead>Statut</TableHead> <TableHead>Statut</TableHead>
@@ -796,7 +855,7 @@ export default function InvoicesBAP() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{filteredInvoices.map((invoice) => { {sortedInvoices.map((invoice) => {
const isExpanded = expandedIds.has(invoice.id); const isExpanded = expandedIds.has(invoice.id);
return ( return (
<React.Fragment key={invoice.id}> <React.Fragment key={invoice.id}>
@@ -831,6 +890,11 @@ export default function InvoicesBAP() {
? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR") ? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR")
: "-"} : "-"}
</TableCell> </TableCell>
<TableCell className="text-xs text-gray-500">
{invoice.createdAt
? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR")
: "-"}
</TableCell>
<TableCell> <TableCell>
{invoice.totalAmount {invoice.totalAmount
? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €` ? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`