feat: mode compact/détail, tri date réception/facturation, suppression colonne utilisateur

client/src/pages/Invoices.tsx

@@ -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 && 
+  const allEligibleSelected = sortedInvoices.length > 0 && 
-    (filteredInvoices || []).filter(inv => isEligibleForExport(inv)).every(inv => selectedIds.includes(inv.id));
+    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>
+                      {viewMode === "detail" && <TableHead>Service</TableHead>}
-                      <TableHead>Abonnement</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">
+                          {viewMode === "detail" && (
-                            <select
+                            <TableCell className="text-sm">
-                              value={invoice.serviceConcerne || ""}
+                              <select
-                              onChange={(e) => {
+                                value={invoice.serviceConcerne || ""}
-                                if (e.target.value === "__ADD_NEW__") {
+                                onChange={(e) => {
-                                  setPendingInvoiceId(invoice.id);
+                                  if (e.target.value === "__ADD_NEW__") {
-                                  setAddDialogType("service");
+                                    setPendingInvoiceId(invoice.id);
-                                  setAddDialogOpen(true);
+                                    setAddDialogType("service");
-                                  e.target.value = invoice.serviceConcerne || "";
+                                    setAddDialogOpen(true);
-                                } else {
+                                    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"
-                              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="">-</option>
+                                <option value="OUI">OUI</option>
-                              {departments?.map((dept) => (
+                              </select>
-                                <option key={dept.id} value={dept.name}>{dept.name}</option>
+                            </TableCell>
-                              ))}
+                          )}
-                              <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>
                           <TableCell>{getQualityBadge(invoice.qualityScore)}</TableCell>
                           <TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
                           <TableCell>