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

Checkpoint: Améliorations Factures BAP : suppression colonne Abonnement, mode d'export configurable (navigateur/dossier), génération PDF annoté avec zone blanche (CAPEX/OPEX | BAP | Destinataire + signature du service) lors du clic BAP, historique BAP dans le menu Traçabilité, table bapHistory en DB.

Browse Source
This commit is contained in:
Manus
2026-04-12 05:57:02 -04:00
parent edf7cc704d
commit 5f7c8c7c7f
12 changed files with 2261 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
client/src/pages/BapHistory.tsx Normal file
View File

@@ -0,0 +1,281 @@
import { useState } from "react";
import { trpc } from "@/lib/trpc";
import DashboardLayout from "@/components/DashboardLayout";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { toast } from "sonner";
import {
Loader2,
CheckSquare,
Search,
Trash2,
ExternalLink,
FolderOpen,
Monitor,
Calendar,
Building2,
User,
FileText,
} from "lucide-react";
export default function BapHistory() {
const { data: entries, isLoading, refetch } = trpc.bapHistory.getAll.useQuery();
const deleteMutation = trpc.bapHistory.delete.useMutation();
const [search, setSearch] = useState("");
const filtered = (entries || []).filter((e) => {
const q = search.toLowerCase();
return (
!q ||
(e.supplierName || "").toLowerCase().includes(q) ||
(e.invoiceNumber || "").toLowerCase().includes(q) ||
(e.serviceConcerne || "").toLowerCase().includes(q) ||
(e.recipientName || "").toLowerCase().includes(q) ||
(e.typeAchat || "").toLowerCase().includes(q)
);
});
const handleDelete = async (id: number) => {
try {
await deleteMutation.mutateAsync({ id });
toast.success("Entrée supprimée");
refetch();
} catch {
toast.error("Impossible de supprimer cette entrée");
}
};
const formatDate = (d: Date | string | null) => {
if (!d) return "—";
return new Date(d).toLocaleDateString("fr-FR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
});
};
const formatAmount = (a: string | null) => {
if (!a) return "—";
const n = parseFloat(a);
return isNaN(n) ? a : n.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
};
return (
<DashboardLayout>
<div className="max-w-7xl space-y-6">
{/* Header */}
<div className="space-y-2">
<div className="flex items-center gap-3">
<div className="p-3 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl shadow-lg">
<CheckSquare className="w-7 h-7 text-white" />
</div>
<div>
<h1 className="text-4xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
Historique BAP
</h1>
<p className="text-muted-foreground mt-1">
Toutes les factures validées "Bon à Payer" avec leur PDF annoté
</p>
</div>
</div>
</div>
{/* Stats rapides */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<Card className="border-green-200 dark:border-green-800">
<CardContent className="pt-4 pb-3">
<div className="text-2xl font-bold text-green-600">{(entries || []).length}</div>
<div className="text-sm text-muted-foreground">Total validations</div>
</CardContent>
</Card>
<Card className="border-blue-200 dark:border-blue-800">
<CardContent className="pt-4 pb-3">
<div className="text-2xl font-bold text-blue-600">
{(entries || []).filter((e) => e.exportMode === "browser").length}
</div>
<div className="text-sm text-muted-foreground">Ouverts navigateur</div>
</CardContent>
</Card>
<Card className="border-orange-200 dark:border-orange-800">
<CardContent className="pt-4 pb-3">
<div className="text-2xl font-bold text-orange-600">
{(entries || []).filter((e) => e.exportMode === "folder").length}
</div>
<div className="text-sm text-muted-foreground">Exportés dossier</div>
</CardContent>
</Card>
<Card className="border-purple-200 dark:border-purple-800">
<CardContent className="pt-4 pb-3">
<div className="text-2xl font-bold text-purple-600">
{(entries || []).filter((e) => e.signatureName).length}
</div>
<div className="text-sm text-muted-foreground">Avec signature</div>
</CardContent>
</Card>
</div>
{/* Tableau */}
<Card>
<CardHeader className="border-b bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20">
<div className="flex items-center justify-between gap-4 flex-wrap">
<div>
<CardTitle>Validations BAP</CardTitle>
<CardDescription>
{filtered.length} résultat{filtered.length !== 1 ? "s" : ""}
{search ? ` pour "${search}"` : ""}
</CardDescription>
</div>
<div className="relative w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Rechercher..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9 h-9"
/>
</div>
</div>
</CardHeader>
<CardContent className="p-0">
{isLoading ? (
<div className="flex items-center justify-center h-40 gap-3">
<Loader2 className="w-6 h-6 animate-spin text-primary" />
<span className="text-muted-foreground">Chargement...</span>
</div>
) : filtered.length === 0 ? (
<div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
<CheckSquare className="w-10 h-10 opacity-30" />
<p className="text-sm">
{search ? "Aucun résultat pour cette recherche" : "Aucune validation BAP enregistrée"}
</p>
</div>
) : (
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow className="bg-muted/30">
<TableHead className="w-36">
<div className="flex items-center gap-1">
<Calendar className="h-3.5 w-3.5" />
Date validation
</div>
</TableHead>
<TableHead>
<div className="flex items-center gap-1">
<Building2 className="h-3.5 w-3.5" />
Fournisseur
</div>
</TableHead>
<TableHead>N° Facture</TableHead>
<TableHead>Montant</TableHead>
<TableHead>Type achat</TableHead>
<TableHead>
<div className="flex items-center gap-1">
<User className="h-3.5 w-3.5" />
Destinataire
</div>
</TableHead>
<TableHead>Service</TableHead>
<TableHead>Signature</TableHead>
<TableHead>Export</TableHead>
<TableHead className="w-20">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filtered.map((entry) => (
<TableRow key={entry.id} className="hover:bg-muted/20">
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
{formatDate(entry.validatedAt)}
</TableCell>
<TableCell className="font-medium max-w-[140px] truncate">
{entry.supplierName || "—"}
</TableCell>
<TableCell className="text-sm">
{entry.invoiceNumber || "—"}
</TableCell>
<TableCell className="text-sm font-mono">
{formatAmount(entry.totalAmount)}
</TableCell>
<TableCell>
{entry.typeAchat ? (
<Badge
variant="outline"
className={
entry.typeAchat.toLowerCase().includes("capex")
? "border-blue-400 text-blue-700 dark:text-blue-300"
: "border-green-400 text-green-700 dark:text-green-300"
}
>
{entry.typeAchat.toUpperCase()}
</Badge>
) : (
"—"
)}
</TableCell>
<TableCell className="text-sm max-w-[120px] truncate">
{entry.recipientName || (
<span className="text-muted-foreground italic text-xs">TOUS</span>
)}
</TableCell>
<TableCell className="text-sm max-w-[120px] truncate">
{entry.serviceConcerne || "—"}
</TableCell>
<TableCell className="text-sm">
{entry.signatureName ? (
<Badge variant="secondary" className="text-xs">
{entry.signatureName}
</Badge>
) : (
<span className="text-muted-foreground text-xs">—</span>
)}
</TableCell>
<TableCell>
{entry.exportMode === "browser" && entry.pdfUrl ? (
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-blue-600 hover:text-blue-700"
onClick={() => window.open(entry.pdfUrl!, "_blank")}
>
<Monitor className="h-3.5 w-3.5 mr-1" />
<span className="text-xs">Voir PDF</span>
</Button>
) : entry.exportMode === "folder" && entry.exportPath ? (
<div className="flex items-center gap-1 text-orange-600">
<FolderOpen className="h-3.5 w-3.5" />
<span className="text-xs truncate max-w-[100px]" title={entry.exportPath}>
Dossier
</span>
</div>
) : (
<span className="text-muted-foreground text-xs">—</span>
)}
</TableCell>
<TableCell>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => handleDelete(entry.id)}
disabled={deleteMutation.isPending}
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</CardContent>
</Card>
</div>
</DashboardLayout>
);
}