1021 lines
46 KiB
TypeScript
1021 lines
46 KiB
TypeScript
import { useState } from "react";
|
|
import DashboardLayout from "@/components/DashboardLayout";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { trpc } from "@/lib/trpc";
|
|
import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, CheckCircle, CheckCircle2, ShieldCheck, RefreshCw, FolderDown } from "lucide-react";
|
|
|
|
// Helper : télécharge un ZIP de plusieurs PDFs annotés BAP
|
|
async function downloadBapZip(
|
|
files: Array<{ pdfPath: string; filename: string }>
|
|
) {
|
|
const response = await fetch('/api/download-bap-zip', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ files }),
|
|
});
|
|
if (!response.ok) {
|
|
const err = await response.json().catch(() => ({}));
|
|
throw new Error((err as any).error || 'Erreur lors de la génération du ZIP');
|
|
}
|
|
const blob = await response.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
const zipFilename = `BAP_export_${new Date().toLocaleDateString('fr-CA')}.zip`;
|
|
a.download = zipFilename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
// Helper : télécharge un PDF annoté BAP depuis son URL de stockage
|
|
// Nommage : AAAA-MM-JJ - Fournisseur - N°Facture.pdf
|
|
function downloadBapPdf(
|
|
pdfUrl: string,
|
|
supplierName?: string,
|
|
invoiceNumber?: string | null,
|
|
validatedAt?: Date | string | null
|
|
) {
|
|
const fallback = pdfUrl.split('/').pop() || 'BAP.pdf';
|
|
const datePart = validatedAt
|
|
? new Date(validatedAt).toLocaleDateString('fr-CA') // AAAA-MM-JJ
|
|
: new Date().toLocaleDateString('fr-CA');
|
|
const supplierPart = (supplierName || '').replace(/[^a-zA-Z0-9\u00e0-\u00ff \-]/g, '').trim();
|
|
const numberPart = (invoiceNumber || '').replace(/[^a-zA-Z0-9\-]/g, '').trim();
|
|
const parts = [datePart, supplierPart, numberPart].filter(Boolean);
|
|
const filename = parts.length > 0 ? `${parts.join(' - ')}.pdf` : fallback;
|
|
// Passer le filename au serveur pour qu'il soit dans Content-Disposition
|
|
const downloadUrl = `/api/download-bap?pdfPath=${encodeURIComponent(pdfUrl)}&filename=${encodeURIComponent(filename)}`;
|
|
const a = document.createElement('a');
|
|
a.href = downloadUrl;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
}
|
|
import * as XLSX from 'xlsx';
|
|
import { toast } from "sonner";
|
|
import { useLocation } from "wouter";
|
|
|
|
// Helper function to determine field color based on origin
|
|
const getFieldColor = (invoice: any, fieldName: string): string => {
|
|
try {
|
|
const autoFilledFields = invoice.autoFilledFields ? JSON.parse(invoice.autoFilledFields) : [];
|
|
if (autoFilledFields.includes(fieldName)) {
|
|
return "text-green-600 font-semibold"; // Auto-filled by rules
|
|
}
|
|
// If field has a value but is not auto-filled, it's manual
|
|
if (invoice[fieldName]) {
|
|
return "text-blue-600 font-semibold"; // Manually filled
|
|
}
|
|
} catch (error) {
|
|
console.error("Error parsing autoFilledFields:", error);
|
|
}
|
|
return ""; // No color for empty fields
|
|
};
|
|
|
|
export default function InvoicesBAP() {
|
|
const [, setLocation] = useLocation();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [invoiceToDelete, setInvoiceToDelete] = useState<number | null>(null);
|
|
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
|
const [addDialogType, setAddDialogType] = useState<"service" | "ventilation" | null>(null);
|
|
const [newItemName, setNewItemName] = useState("");
|
|
const [pendingInvoiceId, setPendingInvoiceId] = useState<number | null>(null);
|
|
// Map invoiceId -> pdfUrl après validation BAP (pour bouton téléchargement)
|
|
const [bapPdfUrls, setBapPdfUrls] = useState<Record<number, string>>({});
|
|
const [textDialogOpen, setTextDialogOpen] = useState(false);
|
|
const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null);
|
|
const [isZipDownloading, setIsZipDownloading] = useState(false);
|
|
const { data: allInvoices, isLoading } = trpc.invoices.list.useQuery();
|
|
// Filter for BAP invoices only (Abonnement = NON, isSubscription = 0)
|
|
const invoices = allInvoices?.filter(inv => inv.isSubscription === 0);
|
|
// IDs des factures déjà validées BAP (pour charger leurs pdfUrl depuis bapHistory)
|
|
const validatedInvoiceIds = (invoices || []).filter(inv => inv.bapValidated === 1).map(inv => inv.id);
|
|
const { data: persistedBapPdfUrls } = trpc.invoices.getBapPdfUrls.useQuery(
|
|
{ invoiceIds: validatedInvoiceIds },
|
|
{ enabled: validatedInvoiceIds.length > 0 }
|
|
);
|
|
// Fusionner les pdfUrl persistés (depuis bapHistory) avec ceux en mémoire (validation en cours)
|
|
const allBapPdfUrls = { ...(persistedBapPdfUrls || {}), ...bapPdfUrls };
|
|
const { data: departments } = trpc.departments.getByUser.useQuery();
|
|
const { data: allocations } = trpc.accountingAllocations.getByUser.useQuery();
|
|
const utils = trpc.useUtils();
|
|
|
|
const exportExcelMutation = trpc.sftp.exportToExcel.useMutation({
|
|
onSuccess: (data) => {
|
|
// Generate Excel file
|
|
const worksheet = XLSX.utils.json_to_sheet(data.invoices.map(inv => ({
|
|
'Fournisseur': inv.supplierName,
|
|
'N\u00b0 Facture': inv.invoiceNumber,
|
|
'Date': inv.invoiceDate,
|
|
'N\u00b0 Bon de livraison': inv.deliveryNoteNumber,
|
|
'N\u00b0 Commande': inv.orderNumber,
|
|
'Montant': inv.totalAmount,
|
|
'Score': inv.qualityScore,
|
|
'Statut export': inv.exportStatus,
|
|
'Export\u00e9 le': inv.exportedAt,
|
|
'Cr\u00e9\u00e9 le': inv.createdAt,
|
|
})));
|
|
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Factures');
|
|
|
|
// Download Excel file
|
|
XLSX.writeFile(workbook, `factures_${new Date().toISOString().split('T')[0]}.xlsx`);
|
|
|
|
toast.success(`${data.invoices.length} facture(s) export\u00e9e(s) en Excel`);
|
|
setSelectedIds([]);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de l'export Excel");
|
|
},
|
|
});
|
|
|
|
const exportMutation = trpc.sftp.exportToPdf.useMutation({
|
|
onSuccess: (data) => {
|
|
toast.success(
|
|
`${data.copiedCount} facture(s) exportée(s) avec succès vers:\n${data.exportFolder}`,
|
|
{ duration: 5000 }
|
|
);
|
|
|
|
setSelectedIds([]);
|
|
utils.invoices.list.invalidate();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de l'export");
|
|
},
|
|
});
|
|
|
|
const deleteMutation = trpc.invoices.delete.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Facture supprimée avec succès");
|
|
utils.invoices.list.invalidate();
|
|
setDeleteDialogOpen(false);
|
|
setInvoiceToDelete(null);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de la suppression");
|
|
},
|
|
});
|
|
|
|
const upsertLearningMutation = trpc.learnings.upsert.useMutation();
|
|
|
|
const reprocessMutation = trpc.invoices.reprocessSelected.useMutation({
|
|
onSuccess: (data) => {
|
|
if (data.errors > 0) {
|
|
toast.warning(`${data.processed} facture(s) retraitée(s), ${data.errors} erreur(s).`, { duration: 5000 });
|
|
} else {
|
|
toast.success(`${data.processed} facture(s) retraitée(s) avec succès !`, { duration: 4000 });
|
|
}
|
|
setSelectedIds([]);
|
|
utils.invoices.list.invalidate();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors du retraitement");
|
|
},
|
|
});
|
|
|
|
const validateBAPBulkMutation = trpc.invoices.validateBAPBulk.useMutation({
|
|
onSuccess: (data) => {
|
|
if (data.processed === 0) {
|
|
toast.info("Aucune facture éligible à valider en BAP.");
|
|
} else {
|
|
toast.success(`${data.processed} facture(s) validée(s) BAP avec succès !`, { duration: 4000 });
|
|
const pdfUrls = (data.results as any[]).filter(r => r.pdfUrl).map(r => r.pdfUrl as string);
|
|
if (pdfUrls.length > 0) {
|
|
pdfUrls.forEach(url => window.open(url, '_blank'));
|
|
}
|
|
}
|
|
utils.invoices.list.invalidate();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de la validation BAP en masse");
|
|
},
|
|
});
|
|
|
|
const validateBAPMutation = trpc.invoices.validateBAP.useMutation({
|
|
onSuccess: (data) => {
|
|
// Stocker le pdfUrl pour le bouton téléchargement
|
|
if (data.invoiceId && data.pdfUrl) {
|
|
setBapPdfUrls(prev => ({ ...prev, [data.invoiceId as number]: data.pdfUrl as string }));
|
|
}
|
|
if (data.exportMode === 'browser' && data.pdfUrl) {
|
|
toast.success("Facture validée BAP ! Ouverture du PDF annoté...", { duration: 3000 });
|
|
window.open(data.pdfUrl, '_blank');
|
|
} else if (data.exportMode === 'folder' && data.exportPath) {
|
|
toast.success(`Facture validée BAP ! PDF enregistré dans : ${data.exportPath}`, { duration: 6000 });
|
|
} else {
|
|
toast.success("Facture validée BAP avec succès !");
|
|
}
|
|
utils.invoices.list.invalidate();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de la validation BAP");
|
|
},
|
|
});
|
|
|
|
const updateFieldMutation = trpc.invoices.update.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Facture mise à jour");
|
|
utils.invoices.list.invalidate();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de la mise à jour");
|
|
},
|
|
});
|
|
|
|
const createDepartmentMutation = trpc.departments.create.useMutation({
|
|
onSuccess: (newDept) => {
|
|
toast.success("Service ajouté avec succès");
|
|
utils.departments.getByUser.invalidate();
|
|
// Update the invoice with the new department
|
|
if (pendingInvoiceId) {
|
|
updateFieldMutation.mutate({
|
|
id: pendingInvoiceId,
|
|
data: { serviceConcerne: newDept.name },
|
|
});
|
|
}
|
|
setAddDialogOpen(false);
|
|
setNewItemName("");
|
|
setPendingInvoiceId(null);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de l'ajout");
|
|
},
|
|
});
|
|
|
|
const createAllocationMutation = trpc.accountingAllocations.create.useMutation({
|
|
onSuccess: (newAlloc) => {
|
|
toast.success("Ventilation ajoutée avec succès");
|
|
utils.accountingAllocations.getByUser.invalidate();
|
|
// Update the invoice with the new allocation
|
|
if (pendingInvoiceId) {
|
|
updateFieldMutation.mutate({
|
|
id: pendingInvoiceId,
|
|
data: { ventilationComptable: newAlloc.name },
|
|
});
|
|
}
|
|
setAddDialogOpen(false);
|
|
setNewItemName("");
|
|
setPendingInvoiceId(null);
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Erreur lors de l'ajout");
|
|
},
|
|
});
|
|
|
|
const handleAddNewItem = () => {
|
|
if (!newItemName.trim()) {
|
|
toast.error("Le nom ne peut pas être vide");
|
|
return;
|
|
}
|
|
if (addDialogType === "service") {
|
|
createDepartmentMutation.mutate({ name: newItemName.trim() });
|
|
} else if (addDialogType === "ventilation") {
|
|
createAllocationMutation.mutate({ name: newItemName.trim() });
|
|
}
|
|
};
|
|
|
|
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);
|
|
if (!matchesSearch) return false;
|
|
}
|
|
|
|
// Filter by export status
|
|
if (statusFilter !== "all") {
|
|
if (statusFilter === "exported" && inv.exportStatus !== "exported") return false;
|
|
if (statusFilter === "not_exported" && inv.exportStatus !== "not_exported") return false;
|
|
if (statusFilter === "export_error" && inv.exportStatus !== "export_error") return false;
|
|
if (statusFilter === "bap_validated" && inv.bapValidated !== 1) return false;
|
|
if (statusFilter === "bap_pending" && inv.bapValidated === 1) return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
const statusCounts = {
|
|
all: invoices?.length || 0,
|
|
exported: invoices?.filter(inv => inv.exportStatus === "exported").length || 0,
|
|
not_exported: invoices?.filter(inv => inv.exportStatus === "not_exported").length || 0,
|
|
export_error: invoices?.filter(inv => inv.exportStatus === "export_error").length || 0,
|
|
bap_validated: invoices?.filter(inv => inv.bapValidated === 1).length || 0,
|
|
bap_pending: invoices?.filter(inv => inv.bapValidated !== 1).length || 0,
|
|
};
|
|
|
|
// Old filter logic (to be removed)
|
|
const _oldFilteredInvoices = invoices?.filter((inv) => {
|
|
if (!searchQuery) return true;
|
|
const query = searchQuery.toLowerCase();
|
|
return (
|
|
inv.supplierName?.toLowerCase().includes(query) ||
|
|
inv.invoiceNumber?.toLowerCase().includes(query)
|
|
);
|
|
});
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
if (checked) {
|
|
// Select ALL invoices (no restriction)
|
|
const allIds = (filteredInvoices || []).map(inv => inv.id);
|
|
setSelectedIds(allIds);
|
|
} else {
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleSelectOne = (id: number, checked: boolean) => {
|
|
if (checked) {
|
|
setSelectedIds([...selectedIds, id]);
|
|
} else {
|
|
setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
|
|
}
|
|
};
|
|
|
|
const handleExport = () => {
|
|
if (selectedIds.length === 0) {
|
|
toast.error("Veuillez s\u00e9lectionner au moins une facture");
|
|
return;
|
|
}
|
|
|
|
exportMutation.mutate({ invoiceIds: selectedIds });
|
|
};
|
|
|
|
const handleExportExcel = () => {
|
|
if (selectedIds.length === 0) {
|
|
toast.error("Veuillez s\u00e9lectionner au moins une facture");
|
|
return;
|
|
}
|
|
|
|
exportExcelMutation.mutate({ invoiceIds: selectedIds });
|
|
};
|
|
|
|
const getExportStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "exported":
|
|
return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Exporté</Badge>;
|
|
case "not_exported":
|
|
return <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">Non exporté</Badge>;
|
|
case "export_error":
|
|
return <Badge className="bg-red-100 text-red-800 hover:bg-red-100">Erreur export</Badge>;
|
|
default:
|
|
return <Badge variant="outline">{status}</Badge>;
|
|
}
|
|
};
|
|
|
|
const getQualityBadge = (score: number | null) => {
|
|
if (score === null) return <Badge variant="outline">-</Badge>;
|
|
if (score === 100) return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{score}%</Badge>;
|
|
if (score >= 80) return <Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">{score}%</Badge>;
|
|
return <Badge className="bg-red-100 text-red-800 hover:bg-red-100">{score}%</Badge>;
|
|
};
|
|
|
|
const isEligibleForExport = (invoice: any) => {
|
|
// Une facture BAP est exportable si :
|
|
// 1. Score = 100%
|
|
// 2. Type d'achat rempli
|
|
// 3. Service concerné rempli
|
|
// 4. Ventilation comptable remplie
|
|
return (
|
|
(invoice.qualityScore || 0) === 100 &&
|
|
invoice.typeAchat &&
|
|
invoice.serviceConcerne &&
|
|
invoice.ventilationComptable
|
|
);
|
|
};
|
|
|
|
const isEligibleForBAPValidation = (invoice: any) => {
|
|
// Une facture peut être validée BAP si :
|
|
// 1. Score = 100%
|
|
// 2. Non encore exportée (exportStatus !== 'exported')
|
|
// 3. Abonnement = NON (isSubscription = 0)
|
|
// 4. Service concerné rempli
|
|
// 5. Type d'achat rempli
|
|
// 6. Ventilation comptable remplie
|
|
return (
|
|
(invoice.qualityScore || 0) === 100 &&
|
|
invoice.exportStatus !== "exported" &&
|
|
invoice.isSubscription === 0 &&
|
|
invoice.serviceConcerne &&
|
|
invoice.typeAchat &&
|
|
invoice.ventilationComptable
|
|
);
|
|
};
|
|
|
|
const getBAPValidationTooltip = (invoice: any): string => {
|
|
const reasons: string[] = [];
|
|
if ((invoice.qualityScore || 0) < 100) reasons.push("Score < 100%");
|
|
if (invoice.exportStatus === "exported") reasons.push("Déjà exportée");
|
|
if (invoice.isSubscription !== 0) reasons.push("Marquée comme abonnement");
|
|
if (!invoice.serviceConcerne) reasons.push("Service manquant");
|
|
if (!invoice.typeAchat) reasons.push("Type d'achat manquant");
|
|
if (!invoice.ventilationComptable) reasons.push("Ventilation manquante");
|
|
if (reasons.length === 0) return "Valider cette facture BAP";
|
|
return `Non éligible : ${reasons.join(", ")}`;
|
|
};
|
|
|
|
const hasOnlyEligibleSelected = selectedIds.length > 0 && selectedIds.every(id => {
|
|
const invoice = invoices?.find(inv => inv.id === id);
|
|
return invoice && isEligibleForExport(invoice);
|
|
});
|
|
|
|
const allEligibleSelected = (filteredInvoices?.length || 0) > 0 &&
|
|
(filteredInvoices || []).every(inv => selectedIds.includes(inv.id));
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="space-y-4">
|
|
{/* En-tête : titre + sous-titre */}
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Factures BAP</h1>
|
|
<p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</p>
|
|
</div>
|
|
{/* Barre d'actions : boutons sur une ligne dédiée avec retour à la ligne automatique */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
onClick={handleExportExcel}
|
|
disabled={selectedIds.length === 0 || exportExcelMutation.isPending}
|
|
variant="outline"
|
|
className="border-green-600 text-green-600 hover:bg-green-50"
|
|
>
|
|
<FileSpreadsheet className="w-4 h-4 mr-2" />
|
|
Excel ({selectedIds.length})
|
|
</Button>
|
|
<Button
|
|
onClick={handleExport}
|
|
disabled={selectedIds.length === 0 || exportMutation.isPending}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Exporter ({selectedIds.length})
|
|
</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
// Construire la liste des PDFs validés parmi la sélection
|
|
const files = selectedIds
|
|
.map(id => {
|
|
const inv = invoices?.find(i => i.id === id);
|
|
const pdfUrl = allBapPdfUrls[id];
|
|
if (!inv || !pdfUrl) return null;
|
|
const datePart = new Date().toLocaleDateString('fr-CA');
|
|
const supplierPart = (inv.supplierName || '').replace(/[^a-zA-Z0-9\u00e0-\u00ff \-]/g, '').trim();
|
|
const numberPart = (inv.invoiceNumber || '').replace(/[^a-zA-Z0-9\-]/g, '').trim();
|
|
const parts = [datePart, supplierPart, numberPart].filter(Boolean);
|
|
const filename = parts.length > 0 ? `${parts.join(' - ')}.pdf` : pdfUrl.split('/').pop() || 'BAP.pdf';
|
|
return { pdfPath: pdfUrl, filename };
|
|
})
|
|
.filter(Boolean) as Array<{ pdfPath: string; filename: string }>;
|
|
if (!files.length) {
|
|
toast.error('Aucune facture validée BAP parmi la sélection');
|
|
return;
|
|
}
|
|
setIsZipDownloading(true);
|
|
try {
|
|
await downloadBapZip(files);
|
|
toast.success(`ZIP généré avec ${files.length} PDF(s)`);
|
|
} catch (err: any) {
|
|
toast.error(err.message || 'Erreur lors de la génération du ZIP');
|
|
} finally {
|
|
setIsZipDownloading(false);
|
|
}
|
|
}}
|
|
disabled={selectedIds.length === 0 || isZipDownloading}
|
|
variant="outline"
|
|
className="border-indigo-500 text-indigo-600 hover:bg-indigo-50"
|
|
>
|
|
<FolderDown className={`w-4 h-4 mr-2 ${isZipDownloading ? 'animate-bounce' : ''}`} />
|
|
{isZipDownloading ? 'ZIP...' : `ZIP (${selectedIds.length})`}
|
|
</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
if (confirm(`Voulez-vous vraiment supprimer ${selectedIds.length} facture(s) ?`)) {
|
|
try {
|
|
for (const id of selectedIds) {
|
|
await utils.client.invoices.delete.mutate({ id });
|
|
}
|
|
toast.success(`${selectedIds.length} facture(s) supprimée(s)`);
|
|
setSelectedIds([]);
|
|
utils.invoices.list.invalidate();
|
|
} catch (error: any) {
|
|
toast.error(error.message || "Erreur lors de la suppression");
|
|
}
|
|
}
|
|
}}
|
|
disabled={selectedIds.length === 0}
|
|
variant="destructive"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Supprimer ({selectedIds.length})
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (confirm("Valider en BAP toutes les factures éligibles (score 100%, champs remplis, non abonnement) ? Les PDFs annotés seront générés automatiquement.")) {
|
|
validateBAPBulkMutation.mutate();
|
|
}
|
|
}}
|
|
disabled={validateBAPBulkMutation.isPending}
|
|
className="bg-green-700 hover:bg-green-800 text-white"
|
|
>
|
|
<ShieldCheck className="w-4 h-4 mr-2" />
|
|
{validateBAPBulkMutation.isPending ? "Validation en cours..." : "Valider tout en BAP"}
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (selectedIds.length === 0) {
|
|
toast.error("Veuillez sélectionner au moins une facture");
|
|
return;
|
|
}
|
|
if (confirm(`Relancer l'analyse IA et les automatismes sur ${selectedIds.length} facture(s) sélectionnée(s) ?\nCela peut prendre quelques secondes par facture.`)) {
|
|
reprocessMutation.mutate({ invoiceIds: selectedIds });
|
|
}
|
|
}}
|
|
disabled={selectedIds.length === 0 || reprocessMutation.isPending}
|
|
variant="outline"
|
|
className="border-purple-500 text-purple-600 hover:bg-purple-50"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 mr-2 ${reprocessMutation.isPending ? 'animate-spin' : ''}`} />
|
|
{reprocessMutation.isPending ? `Retraitement...` : `Relancer (${selectedIds.length})`}
|
|
</Button>
|
|
<Button onClick={() => setLocation("/upload")}>
|
|
<FileText className="w-4 h-4 mr-2" />
|
|
Importer
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
{/* Search */}
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<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..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Filters */}
|
|
<div className="flex gap-2 mb-4">
|
|
<Button
|
|
variant={statusFilter === "all" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("all")}
|
|
size="sm"
|
|
>
|
|
Tous ({statusCounts.all})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "exported" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("exported")}
|
|
size="sm"
|
|
className={statusFilter === "exported" ? "bg-green-600 hover:bg-green-700" : ""}
|
|
>
|
|
Exportés ({statusCounts.exported})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "not_exported" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("not_exported")}
|
|
size="sm"
|
|
className={statusFilter === "not_exported" ? "bg-blue-600 hover:bg-blue-700" : ""}
|
|
>
|
|
Non exportés ({statusCounts.not_exported})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "export_error" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("export_error")}
|
|
size="sm"
|
|
className={statusFilter === "export_error" ? "bg-red-600 hover:bg-red-700" : ""}
|
|
>
|
|
Erreurs ({statusCounts.export_error})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "bap_validated" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("bap_validated")}
|
|
size="sm"
|
|
className={statusFilter === "bap_validated" ? "bg-emerald-600 hover:bg-emerald-700" : ""}
|
|
>
|
|
✅ Validées BAP ({statusCounts.bap_validated})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "bap_pending" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("bap_pending")}
|
|
size="sm"
|
|
className={statusFilter === "bap_pending" ? "bg-orange-600 hover:bg-orange-700" : ""}
|
|
>
|
|
⏳ En attente BAP ({statusCounts.bap_pending})
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
{isLoading ? (
|
|
<div className="text-center py-8 text-gray-500">Chargement...</div>
|
|
) : filteredInvoices && filteredInvoices.length > 0 ? (
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={allEligibleSelected}
|
|
onCheckedChange={handleSelectAll}
|
|
title="Sélectionner toutes les factures"
|
|
/>
|
|
</TableHead>
|
|
<TableHead>Fournisseur</TableHead>
|
|
<TableHead>N° Facture</TableHead>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead>Montant</TableHead>
|
|
<TableHead>Service</TableHead>
|
|
<TableHead>Type achat</TableHead>
|
|
<TableHead>Ventilation</TableHead>
|
|
<TableHead>Score</TableHead>
|
|
<TableHead>Statut</TableHead>
|
|
<TableHead className="w-32">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredInvoices.map((invoice) => {
|
|
return (
|
|
<TableRow key={invoice.id}>
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedIds.includes(invoice.id)}
|
|
onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)}
|
|
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
<button
|
|
onClick={() => setLocation(`/invoices/${invoice.id}`)}
|
|
className="text-blue-600 hover:text-blue-800 hover:underline"
|
|
>
|
|
{invoice.supplierName || "Inconnu"}
|
|
</button>
|
|
</TableCell>
|
|
<TableCell>{invoice.invoiceNumber || "-"}</TableCell>
|
|
<TableCell>
|
|
{invoice.invoiceDate
|
|
? new Date(invoice.invoiceDate).toLocaleDateString("fr-FR")
|
|
: "-"}
|
|
</TableCell>
|
|
<TableCell>
|
|
{invoice.totalAmount
|
|
? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`
|
|
: "-"}
|
|
</TableCell>
|
|
<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 {
|
|
// Remove field from autoFilledFields when manually edited
|
|
const autoFilledFields = invoice.autoFilledFields ? JSON.parse(invoice.autoFilledFields) : [];
|
|
const updatedAutoFields = autoFilledFields.filter((f: string) => f !== "serviceConcerne");
|
|
const newVal = e.target.value || undefined;
|
|
// Apprentissage : mémoriser la correction manuelle
|
|
if (invoice.supplierName && newVal !== (invoice.serviceConcerne || undefined)) {
|
|
upsertLearningMutation.mutate({
|
|
supplierName: invoice.supplierName,
|
|
fieldName: 'serviceConcerne',
|
|
originalValue: invoice.serviceConcerne || undefined,
|
|
correctedValue: newVal || '',
|
|
});
|
|
}
|
|
updateFieldMutation.mutate({
|
|
id: invoice.id,
|
|
data: {
|
|
serviceConcerne: newVal,
|
|
autoFilledFields: updatedAutoFields.length > 0 ? JSON.stringify(updatedAutoFields) : null
|
|
},
|
|
});
|
|
}
|
|
}}
|
|
className={`w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${getFieldColor(invoice, "serviceConcerne")}`}
|
|
>
|
|
<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>
|
|
<TableCell className="text-sm">
|
|
<select
|
|
value={invoice.typeAchat || ""}
|
|
onChange={(e) => {
|
|
// Remove field from autoFilledFields when manually edited
|
|
const autoFilledFields = invoice.autoFilledFields ? JSON.parse(invoice.autoFilledFields) : [];
|
|
const updatedAutoFields = autoFilledFields.filter((f: string) => f !== "typeAchat");
|
|
const newTypeAchat = e.target.value as "CAPEX" | "OPEX" | undefined;
|
|
// Apprentissage : mémoriser la correction manuelle
|
|
if (invoice.supplierName && newTypeAchat !== (invoice.typeAchat || undefined)) {
|
|
upsertLearningMutation.mutate({
|
|
supplierName: invoice.supplierName,
|
|
fieldName: 'typeAchat',
|
|
originalValue: invoice.typeAchat || undefined,
|
|
correctedValue: newTypeAchat || '',
|
|
});
|
|
}
|
|
updateFieldMutation.mutate({
|
|
id: invoice.id,
|
|
data: {
|
|
typeAchat: newTypeAchat,
|
|
autoFilledFields: updatedAutoFields.length > 0 ? JSON.stringify(updatedAutoFields) : null
|
|
},
|
|
});
|
|
}}
|
|
className={`w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${getFieldColor(invoice, "typeAchat")}`}
|
|
>
|
|
<option value="">-</option>
|
|
<option value="CAPEX">CAPEX</option>
|
|
<option value="OPEX">OPEX</option>
|
|
</select>
|
|
</TableCell>
|
|
<TableCell className="text-sm">
|
|
<select
|
|
value={invoice.ventilationComptable || ""}
|
|
onChange={(e) => {
|
|
if (e.target.value === "__ADD_NEW__") {
|
|
setPendingInvoiceId(invoice.id);
|
|
setAddDialogType("ventilation");
|
|
setAddDialogOpen(true);
|
|
e.target.value = invoice.ventilationComptable || "";
|
|
} else {
|
|
// Remove field from autoFilledFields when manually edited
|
|
const autoFilledFields = invoice.autoFilledFields ? JSON.parse(invoice.autoFilledFields) : [];
|
|
const updatedAutoFields = autoFilledFields.filter((f: string) => f !== "ventilationComptable");
|
|
const newVentil = e.target.value || undefined;
|
|
// Apprentissage : mémoriser la correction manuelle
|
|
if (invoice.supplierName && newVentil !== (invoice.ventilationComptable || undefined)) {
|
|
upsertLearningMutation.mutate({
|
|
supplierName: invoice.supplierName,
|
|
fieldName: 'ventilationComptable',
|
|
originalValue: invoice.ventilationComptable || undefined,
|
|
correctedValue: newVentil || '',
|
|
});
|
|
}
|
|
updateFieldMutation.mutate({
|
|
id: invoice.id,
|
|
data: {
|
|
ventilationComptable: newVentil,
|
|
autoFilledFields: updatedAutoFields.length > 0 ? JSON.stringify(updatedAutoFields) : null
|
|
},
|
|
});
|
|
}
|
|
}}
|
|
className={`w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${getFieldColor(invoice, "ventilationComptable")}`}
|
|
>
|
|
<option value="">-</option>
|
|
{allocations?.map((alloc) => (
|
|
<option key={alloc.id} value={alloc.name}>{alloc.name}</option>
|
|
))}
|
|
<option value="__ADD_NEW__" className="font-semibold text-blue-600">➜ Ajouter...</option>
|
|
</select>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
{getQualityBadge(invoice.qualityScore)}
|
|
{isEligibleForExport(invoice) && (
|
|
<div title="Facture exportable">
|
|
<CheckCircle className="h-4 w-4 text-green-600" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setSelectedInvoiceText(invoice.extractedText || "Aucun texte extrait disponible");
|
|
setTextDialogOpen(true);
|
|
}}
|
|
className="h-8 px-2"
|
|
title="Voir le texte extrait"
|
|
>
|
|
<FileText className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setLocation(`/invoices/${invoice.id}`)}
|
|
className="h-8 px-2"
|
|
title="Modifier"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setInvoiceToDelete(invoice.id);
|
|
setDeleteDialogOpen(true);
|
|
}}
|
|
className="h-8 px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
title="Supprimer"
|
|
>
|
|
<Trash className="h-4 w-4" />
|
|
</Button>
|
|
{invoice.bapValidated === 1 ? (
|
|
<div className="flex gap-1 items-center">
|
|
<div
|
|
className="h-8 px-2 flex items-center justify-center rounded border border-green-300 bg-green-50 text-green-700 text-xs font-semibold gap-1"
|
|
title={`Validé BAP le ${invoice.bapValidatedAt ? new Date(invoice.bapValidatedAt).toLocaleDateString('fr-FR') : ''}`}
|
|
>
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
<span>Validé</span>
|
|
</div>
|
|
{allBapPdfUrls[invoice.id] ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-8 px-2 text-blue-600 border-blue-300 hover:bg-blue-50"
|
|
title="Télécharger le PDF annoté BAP"
|
|
onClick={() => downloadBapPdf(allBapPdfUrls[invoice.id], invoice.supplierName || undefined, invoice.invoiceNumber, invoice.bapValidatedAt)}
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-8 px-2 text-gray-400 border-gray-200 cursor-not-allowed"
|
|
title="PDF non disponible"
|
|
disabled
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => validateBAPMutation.mutate({ id: invoice.id })}
|
|
disabled={!isEligibleForBAPValidation(invoice) || validateBAPMutation.isPending}
|
|
className={`h-8 px-2 gap-1 ${
|
|
isEligibleForBAPValidation(invoice)
|
|
? "text-emerald-700 border-emerald-400 hover:bg-emerald-50 hover:border-emerald-500"
|
|
: "text-gray-400 border-gray-200 cursor-not-allowed opacity-50"
|
|
}`}
|
|
title={getBAPValidationTooltip(invoice)}
|
|
>
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
<span className="text-xs">BAP</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<FileText className="w-12 h-12 mx-auto mb-3 text-gray-300" />
|
|
<p className="text-gray-500">Aucune facture trouvée</p>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
{searchQuery ? "Essayez une autre recherche" : "Commencez par importer un fichier PDF"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
|
|
</div>{/* fin space-y-4 */}
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Êtes-vous sûr de vouloir supprimer cette facture ?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Cette action est irréversible. La facture sera définitivement supprimée de la base de données.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel onClick={() => setInvoiceToDelete(null)}>Annuler</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => {
|
|
if (invoiceToDelete) {
|
|
deleteMutation.mutate({ id: invoiceToDelete });
|
|
}
|
|
}}
|
|
className="bg-red-600 hover:bg-red-700"
|
|
>
|
|
Supprimer
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* Add New Item Dialog */}
|
|
<Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
Ajouter {addDialogType === "service" ? "un nouveau service" : "une nouvelle ventilation"}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Entrez le nom {addDialogType === "service" ? "du service" : "de la ventilation comptable"} à ajouter.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<Input
|
|
placeholder="Nom..."
|
|
value={newItemName}
|
|
onChange={(e) => setNewItemName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
handleAddNewItem();
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setAddDialogOpen(false);
|
|
setNewItemName("");
|
|
setPendingInvoiceId(null);
|
|
}}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={handleAddNewItem}>Ajouter</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Extracted Text Dialog */}
|
|
<Dialog open={textDialogOpen} onOpenChange={setTextDialogOpen}>
|
|
<DialogContent className="max-w-3xl max-h-[80vh]">
|
|
<DialogHeader>
|
|
<DialogTitle>Texte extrait de la facture</DialogTitle>
|
|
<DialogDescription>
|
|
Texte complet extrait du PDF lors de l'import
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="overflow-y-auto max-h-[60vh] p-4 bg-gray-50 rounded border">
|
|
<pre className="whitespace-pre-wrap text-sm font-mono">{selectedInvoiceText}</pre>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button onClick={() => setTextDialogOpen(false)}>Fermer</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</DashboardLayout>
|
|
);
|
|
}
|