feat: mode compact/détail, tri date réception/facturation, suppression colonne utilisateur
This commit is contained in:
Manus
@@ -34,7 +34,7 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, Filter } from "lucide-react";
|
||||
import { Search, FileText, Download, FileSpreadsheet, Trash2, Edit, Trash, Filter, LayoutList, AlignJustify, ArrowUpDown, ChevronUp, ChevronDown } from "lucide-react";
|
||||
import * as XLSX from 'xlsx';
|
||||
import { toast } from "sonner";
|
||||
import { useLocation } from "wouter";
|
||||
@@ -53,6 +53,9 @@ export default function Invoices() {
|
||||
const [pendingInvoiceId, setPendingInvoiceId] = useState<number | null>(null);
|
||||
const [textDialogOpen, setTextDialogOpen] = useState(false);
|
||||
const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<"compact" | "detail">("compact");
|
||||
const [sortField, setSortField] = useState<"createdAt" | "invoiceDate">("createdAt");
|
||||
const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.role === 'admin';
|
||||
const { data: invoices, isLoading } = trpc.invoices.list.useQuery();
|
||||
@@ -218,7 +221,28 @@ export default function Invoices() {
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
|
||||
// Tri
|
||||
const sortedInvoices = filteredInvoices ? [...filteredInvoices].sort((a, b) => {
|
||||
const aVal = sortField === "createdAt" ? new Date(a.createdAt).getTime() : (a.invoiceDate ? new Date(a.invoiceDate).getTime() : 0);
|
||||
const bVal = sortField === "createdAt" ? new Date(b.createdAt).getTime() : (b.invoiceDate ? new Date(b.invoiceDate).getTime() : 0);
|
||||
return sortDir === "asc" ? aVal - bVal : bVal - aVal;
|
||||
}) : [];
|
||||
|
||||
const handleSort = (field: "createdAt" | "invoiceDate") => {
|
||||
if (sortField === field) {
|
||||
setSortDir(d => d === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDir("desc");
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ field }: { field: "createdAt" | "invoiceDate" }) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="w-3 h-3 ml-1 text-gray-400" />;
|
||||
return sortDir === "asc" ? <ChevronUp className="w-3 h-3 ml-1 text-blue-600" /> : <ChevronDown className="w-3 h-3 ml-1 text-blue-600" />;
|
||||
};
|
||||
|
||||
const statusCounts = {
|
||||
all: invoices?.length || 0,
|
||||
exported: invoices?.filter(inv => inv.exportStatus === "exported").length || 0,
|
||||
@@ -301,8 +325,8 @@ export default function Invoices() {
|
||||
return invoice && isEligibleForExport(invoice);
|
||||
});
|
||||
|
||||
const allEligibleSelected = (filteredInvoices?.length || 0) > 0 &&
|
||||
(filteredInvoices || []).filter(inv => isEligibleForExport(inv)).every(inv => selectedIds.includes(inv.id));
|
||||
const allEligibleSelected = sortedInvoices.length > 0 &&
|
||||
sortedInvoices.filter(inv => isEligibleForExport(inv)).every(inv => selectedIds.includes(inv.id));
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
@@ -389,6 +413,55 @@ export default function Invoices() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Barre de tri + mode d'affichage */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500">Trier par :</span>
|
||||
<button
|
||||
onClick={() => handleSort("createdAt")}
|
||||
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${
|
||||
sortField === "createdAt"
|
||||
? "bg-blue-50 border-blue-300 text-blue-700 font-medium"
|
||||
: "border-gray-200 text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
Date de réception <SortIcon field="createdAt" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSort("invoiceDate")}
|
||||
className={`flex items-center text-sm px-3 py-1.5 rounded-md border transition-colors ${
|
||||
sortField === "invoiceDate"
|
||||
? "bg-blue-50 border-blue-300 text-blue-700 font-medium"
|
||||
: "border-gray-200 text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
Date de facturation <SortIcon field="invoiceDate" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border rounded-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => setViewMode("compact")}
|
||||
title="Vue compacte"
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
|
||||
viewMode === "compact" ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<LayoutList className="w-4 h-4" />
|
||||
Compact
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("detail")}
|
||||
title="Vue détaillée"
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors ${
|
||||
viewMode === "detail" ? "bg-blue-600 text-white" : "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<AlignJustify className="w-4 h-4" />
|
||||
Détail
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Filters */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Button
|
||||
@@ -427,7 +500,7 @@ export default function Invoices() {
|
||||
{/* Table */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-gray-500">Chargement...</div>
|
||||
) : filteredInvoices && filteredInvoices.length > 0 ? (
|
||||
) : sortedInvoices && sortedInvoices.length > 0 ? (
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -438,21 +511,30 @@ export default function Invoices() {
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
{isAdmin && <TableHead>Utilisateur</TableHead>}
|
||||
|
||||
<TableHead>Fournisseur</TableHead>
|
||||
<TableHead>Destinataire</TableHead>
|
||||
{viewMode === "detail" && <TableHead>Destinataire</TableHead>}
|
||||
<TableHead>N° Facture</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>
|
||||
<button onClick={() => handleSort("invoiceDate")} className="flex items-center hover:text-blue-600">
|
||||
Date facture <SortIcon field="invoiceDate" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<button onClick={() => handleSort("createdAt")} className="flex items-center hover:text-blue-600">
|
||||
Date réception <SortIcon field="createdAt" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead>Montant</TableHead>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead>Abonnement</TableHead>
|
||||
{viewMode === "detail" && <TableHead>Service</TableHead>}
|
||||
{viewMode === "detail" && <TableHead>Abonnement</TableHead>}
|
||||
<TableHead>Score</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
<TableHead className="w-32">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredInvoices.map((invoice) => {
|
||||
{sortedInvoices.map((invoice) => {
|
||||
return (
|
||||
<TableRow key={invoice.id}>
|
||||
<TableCell>
|
||||
@@ -461,11 +543,7 @@ export default function Invoices() {
|
||||
onCheckedChange={(checked) => handleSelectOne(invoice.id, checked as boolean)}
|
||||
/>
|
||||
</TableCell>
|
||||
{isAdmin && (
|
||||
<TableCell className="text-xs text-gray-500">
|
||||
{allUsers?.find(u => u.id === invoice.userId)?.name || `#${invoice.userId}`}
|
||||
</TableCell>
|
||||
)}
|
||||
|
||||
<TableCell className="font-medium">
|
||||
<button
|
||||
onClick={() => setLocation(`/invoices/${invoice.id}`)}
|
||||
@@ -474,68 +552,76 @@ export default function Invoices() {
|
||||
{invoice.supplierName || "Inconnu"}
|
||||
</button>
|
||||
</TableCell>
|
||||
<TableCell>{(invoice as any).recipientName || "-"}</TableCell>
|
||||
{viewMode === "detail" && <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).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 {
|
||||
{viewMode === "detail" && (
|
||||
<TableCell className="text-sm">
|
||||
<select
|
||||
value={invoice.serviceConcerne || ""}
|
||||
onChange={(e) => {
|
||||
if (e.target.value === "__ADD_NEW__") {
|
||||
setPendingInvoiceId(invoice.id);
|
||||
setAddDialogType("service");
|
||||
setAddDialogOpen(true);
|
||||
e.target.value = invoice.serviceConcerne || "";
|
||||
} else {
|
||||
updateFieldMutation.mutate({
|
||||
id: invoice.id,
|
||||
data: { serviceConcerne: e.target.value || undefined },
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="w-full px-2 py-1 border rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">-</option>
|
||||
{departments?.map((dept) => (
|
||||
<option key={dept.id} value={dept.name}>{dept.name}</option>
|
||||
))}
|
||||
<option value="__ADD_NEW__" className="font-semibold text-blue-600">➜ Ajouter...</option>
|
||||
</select>
|
||||
</TableCell>
|
||||
)}
|
||||
{viewMode === "detail" && (
|
||||
<TableCell className="text-sm">
|
||||
<select
|
||||
value={invoice.isSubscription ? "OUI" : "NON"}
|
||||
onChange={(e) => {
|
||||
const newVal = e.target.value === "OUI" ? 1 : 0;
|
||||
if (invoice.supplierName && newVal !== (invoice.isSubscription ?? 1)) {
|
||||
upsertLearningMutation.mutate({
|
||||
supplierName: invoice.supplierName,
|
||||
fieldName: 'isSubscription',
|
||||
originalValue: (invoice.isSubscription ?? 1) === 1 ? 'OUI' : 'NON',
|
||||
correctedValue: newVal === 1 ? 'OUI' : 'NON',
|
||||
});
|
||||
}
|
||||
updateFieldMutation.mutate({
|
||||
id: invoice.id,
|
||||
data: { serviceConcerne: e.target.value || undefined },
|
||||
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="">-</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.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>
|
||||
}}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user