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

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

@@ -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<SortField>("createdAt");
const [sortDir, setSortDir] = useState<SortDir>("desc");
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [statusFilter, setStatusFilter] = 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 [textDialogOpen, setTextDialogOpen] = useState(false);
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 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 <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) => {
// 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 <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 = {
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() {
</div>
</div>
{/* Barre de tri + mode d'affichage */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">Trier par :</span>
<button
onClick={() => handleSort("createdAt")}
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${
sortField === "createdAt"
? "bg-blue-50 border-blue-300 text-blue-700 font-medium"
: "border-gray-200 text-gray-600 hover:bg-gray-50"
}`}
{/* Mode compact/détail + Tri */}
<div className="flex gap-2 mb-4 flex-wrap items-center justify-between">
<div className="flex gap-2">
<Button
variant={compactMode ? "default" : "outline"}
size="sm"
onClick={() => setCompactMode(true)}
title="Mode compact"
>
Date de réception <SortIcon field="createdAt" />
</button>
<button
onClick={() => handleSort("invoiceDate")}
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${
sortField === "invoiceDate"
? "bg-blue-50 border-blue-300 text-blue-700 font-medium"
: "border-gray-200 text-gray-600 hover:bg-gray-50"
}`}
<LayoutList className="w-4 h-4 mr-1" /> Compact
</Button>
<Button
variant={!compactMode ? "default" : "outline"}
size="sm"
onClick={() => setCompactMode(false)}
title="Mode détail"
>
Date de facturation <SortIcon field="invoiceDate" />
</button>
<LayoutGrid className="w-4 h-4 mr-1" /> Détail
</Button>
</div>
<div className="flex items-center gap-1 border rounded-md overflow-hidden">
<button
onClick={() => setViewMode("compact")}
title="Vue compacte"
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
viewMode === "compact" ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-50"
}`}
<div className="flex gap-2 items-center">
<span className="text-sm text-gray-500">Trier par :</span>
<Button
variant={sortField === "createdAt" ? "default" : "outline"}
size="sm"
onClick={() => handleSort("createdAt")}
>
<LayoutList className="w-4 h-4" />
Compact
</button>
<button
onClick={() => setViewMode("detail")}
title="Vue détaillée"
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"
}`}
Date réception <SortIcon field="createdAt" />
</Button>
<Button
variant={sortField === "invoiceDate" ? "default" : "outline"}
size="sm"
onClick={() => handleSort("invoiceDate")}
>
<AlignJustify className="w-4 h-4" />
Détail
</button>
Date facture <SortIcon field="invoiceDate" />
</Button>
</div>
</div>
@@ -500,7 +499,7 @@ export default function Invoices() {
{/* Table */}
{isLoading ? (
<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">
<Table>
<TableHeader>
@@ -511,23 +510,24 @@ export default function Invoices() {
onCheckedChange={handleSelectAll}
/>
</TableHead>
<TableHead>Fournisseur</TableHead>
{viewMode === "detail" && <TableHead>Destinataire</TableHead>}
{!compactMode && <TableHead>Destinataire</TableHead>}
<TableHead>N° Facture</TableHead>
<TableHead>
<button onClick={() => handleSort("invoiceDate")} className="flex items-center hover:text-blue-600">
Date facture <SortIcon field="invoiceDate" />
</button>
<TableHead
className="cursor-pointer select-none"
onClick={() => handleSort("invoiceDate")}
>
<span className="flex items-center">Date facture <SortIcon field="invoiceDate" /></span>
</TableHead>
<TableHead>
<button onClick={() => handleSort("createdAt")} className="flex items-center hover:text-blue-600">
Date réception <SortIcon field="createdAt" />
</button>
<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>
{viewMode === "detail" && <TableHead>Service</TableHead>}
{viewMode === "detail" && <TableHead>Abonnement</TableHead>}
{!compactMode && <TableHead>Service</TableHead>}
{!compactMode && <TableHead>Abonnement</TableHead>}
<TableHead>Score</TableHead>
<TableHead>Statut</TableHead>
<TableHead className="w-32">Actions</TableHead>
@@ -543,7 +543,6 @@ export default function Invoices() {
onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)}
/>
</TableCell>
<TableCell className="font-medium">
<button
onClick={() => setLocation(`/invoices/${invoice.id}`)}
@@ -552,7 +551,7 @@ export default function Invoices() {
{invoice.supplierName || "Inconnu"}
</button>
</TableCell>
{viewMode === "detail" && <TableCell>{(invoice as any).recipientName || "-"}</TableCell>}
{!compactMode && <TableCell>{(invoice as any).recipientName || "-"}</TableCell>}
<TableCell>{invoice.invoiceNumber || "-"}</TableCell>
<TableCell>
{invoice.invoiceDate
@@ -561,7 +560,7 @@ export default function Invoices() {
</TableCell>
<TableCell className="text-xs text-gray-500">
{invoice.createdAt
? new Date(invoice.createdAt).toLocaleDateString("fr-FR")
? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR")
: "-"}
</TableCell>
<TableCell>
@@ -569,59 +568,56 @@ export default function Invoices() {
? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`
: "-"}
</TableCell>
{viewMode === "detail" && (
<TableCell className="text-sm">
<select
value={invoice.serviceConcerne || ""}
onChange={(e) => {
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: { 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',
});
}
{!compactMode && <TableCell className="text-sm">
<select
value={invoice.serviceConcerne || ""}
onChange={(e) => {
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"
>
<option value="NON">NON</option>
<option value="OUI">OUI</option>
</select>
</TableCell>
)}
}
}}
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>}
{!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>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
<TableCell>

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

@@ -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>(String(currentYear));
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) => {
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 <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 (
<DashboardLayout>
@@ -702,6 +731,25 @@ export default function InvoicesBAP() {
)}
</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 */}
<div className="flex flex-wrap gap-2 mb-4">
<Button
@@ -764,7 +812,7 @@ export default function InvoicesBAP() {
{/* Table */}
{isLoading ? (
<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">
<Table>
<TableHeader>
@@ -788,7 +836,18 @@ export default function InvoicesBAP() {
</TableHead>
<TableHead>Fournisseur</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>Score</TableHead>
<TableHead>Statut</TableHead>
@@ -796,7 +855,7 @@ export default function InvoicesBAP() {
</TableRow>
</TableHeader>
<TableBody>
{filteredInvoices.map((invoice) => {
{sortedInvoices.map((invoice) => {
const isExpanded = expandedIds.has(invoice.id);
return (
<React.Fragment key={invoice.id}>
@@ -831,6 +890,11 @@ export default function InvoicesBAP() {
? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR")
: "-"}
</TableCell>
<TableCell className="text-xs text-gray-500">
{invoice.createdAt
? new Date(invoice.createdAt as unknown as string).toLocaleDateString("fr-FR")
: "-"}
</TableCell>
<TableCell>
{invoice.totalAmount
? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`