843 lines
36 KiB
TypeScript
843 lines
36 KiB
TypeScript
import { useState } from "react";
|
|
import DashboardLayout from "@/components/DashboardLayout";
|
|
import { useAuth } from "@/_core/hooks/useAuth";
|
|
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
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");
|
|
const [subscriptionFilter, setSubscriptionFilter] = useState<string>("all"); // all | yes | no
|
|
const [entityFilter, setEntityFilter] = useState<string>("all"); // all | santinova | itinova
|
|
const [ventilationFilter, setVentilationFilter] = 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);
|
|
const [textDialogOpen, setTextDialogOpen] = useState(false);
|
|
const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null);
|
|
const { user } = useAuth();
|
|
const isAdmin = user?.role === 'admin';
|
|
const { data: invoices, isLoading } = trpc.invoices.list.useQuery();
|
|
const { data: departments } = trpc.departments.getByUser.useQuery();
|
|
const { data: allocations } = trpc.accountingAllocations.getByUser.useQuery();
|
|
const { data: allUsers } = trpc.admin.getAllUsers.useQuery(undefined, { enabled: isAdmin });
|
|
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,
|
|
'Destinataire': (inv as any).recipientName,
|
|
'N° Facture': inv.invoiceNumber,
|
|
'Date': inv.invoiceDate,
|
|
'N° Bon de livraison': inv.deliveryNoteNumber,
|
|
'N° Commande': inv.orderNumber,
|
|
'Montant': inv.totalAmount,
|
|
'Score': inv.qualityScore,
|
|
'Statut export': inv.exportStatus,
|
|
'Exporté le': inv.exportedAt,
|
|
'Créé 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 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() });
|
|
}
|
|
};
|
|
|
|
// Collect unique recipients for the filter dropdown
|
|
const uniqueRecipients = Array.from(
|
|
new Set(
|
|
(invoices || []).map(inv => (inv as any).recipientName).filter(Boolean)
|
|
)
|
|
).sort();
|
|
|
|
const uniqueVentilations = Array.from(
|
|
new Set(
|
|
(invoices || []).map(inv => (inv as any).ventilationComptable).filter(Boolean)
|
|
)
|
|
).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) {
|
|
const query = searchQuery.toLowerCase();
|
|
const matchesSearch = inv.supplierName?.toLowerCase().includes(query) ||
|
|
inv.invoiceNumber?.toLowerCase().includes(query) ||
|
|
(inv as any).recipientName?.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;
|
|
}
|
|
|
|
// Filter by recipient
|
|
if (recipientFilter !== "all") {
|
|
if (recipientFilter === "__empty__") {
|
|
if ((inv as any).recipientName) return false;
|
|
} else {
|
|
if ((inv as any).recipientName !== recipientFilter) return false;
|
|
}
|
|
}
|
|
// Filter by subscription
|
|
if (subscriptionFilter !== "all") {
|
|
const isSub = (inv as any).isSubscription === 1 || (inv as any).isSubscription === true;
|
|
if (subscriptionFilter === "yes" && !isSub) return false;
|
|
if (subscriptionFilter === "no" && isSub) return false;
|
|
}
|
|
// Filter by entity (SANTINOVA = serviceConcerne === 'DSI SANTINOVA', ITINOVA = autre)
|
|
if (entityFilter !== "all") {
|
|
const service = ((inv as any).serviceConcerne || "").trim().toUpperCase();
|
|
if (entityFilter === "santinova" && service !== "DSI SANTINOVA") return false;
|
|
if (entityFilter === "itinova" && service === "DSI SANTINOVA") return false;
|
|
}
|
|
// Filter by ventilation comptable
|
|
if (ventilationFilter !== "all") {
|
|
if (ventilationFilter === "__empty__") {
|
|
if ((inv as any).ventilationComptable) return false;
|
|
} else {
|
|
if ((inv as any).ventilationComptable !== ventilationFilter) 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,
|
|
};
|
|
|
|
// 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) => {
|
|
return (invoice.qualityScore || 0) === 100;
|
|
};
|
|
|
|
const hasOnlyEligibleSelected = selectedIds.length > 0 && selectedIds.every(id => {
|
|
const invoice = invoices?.find(inv => inv.id === id);
|
|
return invoice && isEligibleForExport(invoice);
|
|
});
|
|
|
|
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 (
|
|
<DashboardLayout>
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Factures</h1>
|
|
<p className="text-gray-500 mt-1">Gérez toutes vos factures importées</p>
|
|
</div>
|
|
<div className="flex 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 || !hasOnlyEligibleSelected || exportMutation.isPending}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
title={!hasOnlyEligibleSelected && selectedIds.length > 0 ? "Seules les factures avec un score de 100% peuvent être exportées" : ""}
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
PDF ({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={() => setLocation("/upload")}>
|
|
<FileText className="w-4 h-4 mr-2" />
|
|
Importer
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== CARTOUCHE FILTRES ===== */}
|
|
<div className="rounded-xl border border-blue-100 bg-blue-50/60 px-4 py-3 mb-4 shadow-sm">
|
|
|
|
{/* Ligne 1 : Recherche + affichage compact/détail */}
|
|
<div className="flex gap-3 items-center flex-wrap mb-3">
|
|
<div className="relative flex-1 min-w-[220px]">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-blue-400 w-4 h-4" />
|
|
<Input
|
|
placeholder="Rechercher par fournisseur, destinataire ou numéro..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-10 bg-white border-blue-200 focus:border-blue-400"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-1 shrink-0">
|
|
<Button
|
|
variant={compactMode ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setCompactMode(true)}
|
|
title="Mode compact"
|
|
className={compactMode ? "bg-blue-600 hover:bg-blue-700" : "bg-white border-blue-200 text-blue-700 hover:bg-blue-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"
|
|
className={!compactMode ? "bg-blue-600 hover:bg-blue-700" : "bg-white border-blue-200 text-blue-700 hover:bg-blue-50"}
|
|
>
|
|
<LayoutGrid className="w-4 h-4 mr-1" /> Détail
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ligne 2 : Filtres destinataire, abonnement, entité, ventilation */}
|
|
<div className="flex gap-2 items-center flex-wrap mb-3">
|
|
<Filter className="w-4 h-4 text-blue-400 shrink-0" />
|
|
<Select value={recipientFilter} onValueChange={setRecipientFilter}>
|
|
<SelectTrigger className="w-[180px] bg-white border-blue-200 text-sm">
|
|
<SelectValue placeholder="Destinataire" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Tous destinataires</SelectItem>
|
|
<SelectItem value="__empty__">Sans destinataire</SelectItem>
|
|
{uniqueRecipients.map((r) => (
|
|
<SelectItem key={r} value={r}>{r}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={subscriptionFilter} onValueChange={setSubscriptionFilter}>
|
|
<SelectTrigger className="w-[170px] bg-white border-blue-200 text-sm">
|
|
<SelectValue placeholder="Abonnement" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Abonnement : tous</SelectItem>
|
|
<SelectItem value="yes">Abonnement : OUI</SelectItem>
|
|
<SelectItem value="no">Abonnement : NON</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={entityFilter} onValueChange={setEntityFilter}>
|
|
<SelectTrigger className="w-[150px] bg-white border-blue-200 text-sm">
|
|
<SelectValue placeholder="Entité" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Toutes entités</SelectItem>
|
|
<SelectItem value="santinova">SANTINOVA</SelectItem>
|
|
<SelectItem value="itinova">ITINOVA</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={ventilationFilter} onValueChange={setVentilationFilter}>
|
|
<SelectTrigger className="w-[170px] bg-white border-blue-200 text-sm">
|
|
<SelectValue placeholder="Ventilation" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Toutes ventilations</SelectItem>
|
|
<SelectItem value="__empty__">Sans ventilation</SelectItem>
|
|
{uniqueVentilations.map((v) => (
|
|
<SelectItem key={v} value={v}>{v}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Ligne 3 : Boutons statut export + tri */}
|
|
<div className="flex gap-2 items-center flex-wrap">
|
|
<Button
|
|
variant={statusFilter === "all" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("all")}
|
|
size="sm"
|
|
className={statusFilter === "all" ? "bg-blue-600 hover:bg-blue-700" : "bg-white border-blue-200 text-blue-700 hover:bg-blue-50"}
|
|
>
|
|
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 text-white" : "bg-white border-green-200 text-green-700 hover:bg-green-50"}
|
|
>
|
|
Exportés ({statusCounts.exported})
|
|
</Button>
|
|
<Button
|
|
variant={statusFilter === "not_exported" ? "default" : "outline"}
|
|
onClick={() => setStatusFilter("not_exported")}
|
|
size="sm"
|
|
className={statusFilter === "not_exported" ? "bg-indigo-600 hover:bg-indigo-700 text-white" : "bg-white border-indigo-200 text-indigo-700 hover:bg-indigo-50"}
|
|
>
|
|
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 text-white" : "bg-white border-red-200 text-red-700 hover:bg-red-50"}
|
|
>
|
|
Erreurs ({statusCounts.export_error})
|
|
</Button>
|
|
<div className="ml-auto flex gap-1 items-center">
|
|
<span className="text-xs text-blue-500 font-medium mr-1">Trier :</span>
|
|
<Button
|
|
variant={sortField === "createdAt" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => handleSort("createdAt")}
|
|
className={sortField === "createdAt" ? "bg-blue-600 hover:bg-blue-700" : "bg-white border-blue-200 text-blue-700 hover:bg-blue-50"}
|
|
>
|
|
Réception <SortIcon field="createdAt" />
|
|
</Button>
|
|
<Button
|
|
variant={sortField === "invoiceDate" ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => handleSort("invoiceDate")}
|
|
className={sortField === "invoiceDate" ? "bg-blue-600 hover:bg-blue-700" : "bg-white border-blue-200 text-blue-700 hover:bg-blue-50"}
|
|
>
|
|
Facture <SortIcon field="invoiceDate" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* ===== FIN CARTOUCHE ===== */}
|
|
|
|
<Card>
|
|
<CardContent className="pt-4">
|
|
|
|
{/* Table */}
|
|
{isLoading ? (
|
|
<div className="text-center py-8 text-gray-500">Chargement...</div>
|
|
) : sortedInvoices.length > 0 ? (
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={allEligibleSelected}
|
|
onCheckedChange={handleSelectAll}
|
|
/>
|
|
</TableHead>
|
|
<TableHead>Fournisseur</TableHead>
|
|
{!compactMode && <TableHead>Destinataire</TableHead>}
|
|
<TableHead>N° Facture</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>
|
|
{!compactMode && <TableHead>Service</TableHead>}
|
|
{!compactMode && <TableHead>Abonnement</TableHead>}
|
|
<TableHead>Score</TableHead>
|
|
<TableHead>Statut</TableHead>
|
|
<TableHead className="w-32">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sortedInvoices.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>
|
|
{!compactMode && <TableCell>{(invoice as any).recipientName || "-"}</TableCell>}
|
|
<TableCell>{invoice.invoiceNumber || "-"}</TableCell>
|
|
<TableCell>
|
|
{invoice.invoiceDate
|
|
? 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)} €`
|
|
: "-"}
|
|
</TableCell>
|
|
{!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: { 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>}
|
|
{!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>
|
|
<div className="flex gap-2">
|
|
<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>
|
|
</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>
|
|
|
|
{/* Info message */}
|
|
{filteredInvoices && filteredInvoices.some(inv => (inv.qualityScore || 0) < 100) && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<p className="text-sm text-blue-800">
|
|
<strong>Note :</strong> Seules les factures avec un score de qualité de 100% peuvent être exportées.
|
|
Les factures avec un score inférieur sont grisées et ne peuvent pas être sélectionnées.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|