Checkpoint: Création de la page Factures BAP et restructuration de l'interface
Nouvelles fonctionnalités : ✅ Nouvelle page "Factures BAP" qui affiche uniquement les factures avec Abonnement = NON (isSubscription = 0) ✅ La page Factures BAP inclut les colonnes Type d'achat et Ventilation comptable avec édition directe ✅ Les colonnes Type d'achat et Ventilation ont été supprimées de la page Factures principale ✅ Menu "Factures BAP" ajouté dans la navigation du DashboardLayout ✅ Route /invoices-bap configurée dans App.tsx Architecture : - client/src/pages/InvoicesBAP.tsx : Nouvelle page pour les factures BAP (non-abonnement) - client/src/pages/Invoices.tsx : Page principale modifiée (colonnes Type d'achat et Ventilation supprimées) - client/src/App.tsx : Route /invoices-bap ajoutée - client/src/components/DashboardLayout.tsx : Menu "Factures BAP" ajouté Fonctionnement : 1. La page "Factures" affiche toutes les factures avec les colonnes : Fournisseur, N° Facture, Date, Montant, Service, Abonnement, Score, Statut, Actions 2. La page "Factures BAP" affiche uniquement les factures non-abonnement (Abonnement = NON) avec les colonnes supplémentaires : Type d'achat et Ventilation comptable 3. Les deux pages conservent toutes les fonctionnalités d'édition directe, export, suppression, etc. 4. Le filtrage est automatique basé sur le champ isSubscription (0 = NON, 1 = OUI) Cette restructuration permet une meilleure organisation des factures selon leur nature (abonnement ou BAP).
This commit is contained in:
Manus
682
client/src/pages/InvoicesBAP.tsx
Normal file
682
client/src/pages/InvoicesBAP.tsx
Normal file
@@ -0,0 +1,682 @@
|
||||
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 } from "lucide-react";
|
||||
import * as XLSX from 'xlsx';
|
||||
import { toast } from "sonner";
|
||||
import { useLocation } from "wouter";
|
||||
|
||||
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);
|
||||
const [textDialogOpen, setTextDialogOpen] = useState(false);
|
||||
const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null);
|
||||
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);
|
||||
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.invoices.length} facture(s) exportée(s) avec succès`);
|
||||
|
||||
// Open PDFs in new tabs
|
||||
data.invoices.forEach((inv, index) => {
|
||||
// Add a small delay between each window to avoid popup blocking
|
||||
setTimeout(() => {
|
||||
window.open(inv.fileUrl, '_blank');
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
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 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;
|
||||
}
|
||||
|
||||
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 allEligibleSelected = (filteredInvoices?.length || 0) > 0 &&
|
||||
(filteredInvoices || []).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 BAP</h1>
|
||||
<p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</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>
|
||||
|
||||
<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>
|
||||
</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}
|
||||
/>
|
||||
</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>Abonnement</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 {
|
||||
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>
|
||||
<TableCell className="text-sm">
|
||||
<select
|
||||
value={invoice.typeAchat || ""}
|
||||
onChange={(e) => {
|
||||
updateFieldMutation.mutate({
|
||||
id: invoice.id,
|
||||
data: { typeAchat: e.target.value as "CAPEX" | "OPEX" | 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>
|
||||
<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 {
|
||||
updateFieldMutation.mutate({
|
||||
id: invoice.id,
|
||||
data: { ventilationComptable: 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>
|
||||
{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 className="text-sm">
|
||||
<select
|
||||
value={invoice.isSubscription ? "OUI" : "NON"}
|
||||
onChange={(e) => {
|
||||
updateFieldMutation.mutate({
|
||||
id: invoice.id,
|
||||
data: { isSubscription: e.target.value === "OUI" ? 1 : 0 },
|
||||
});
|
||||
}}
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user