From 69ba92b12a6e6e39b79727b513894854af261c99 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 11 Feb 2026 09:11:07 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Transformation=20des=20cellules?=
 =?UTF-8?q?=20Service,=20Type=20d'achat=20et=20Ventilation=20en=20menus=20?=
 =?UTF-8?q?d=C3=A9roulants=20=C3=A9ditables=20directement=20dans=20la=20li?=
 =?UTF-8?q?ste=20des=20factures.=20Les=20modifications=20sont=20sauvegard?=
 =?UTF-8?q?=C3=A9es=20automatiquement=20avec=20notification=20de=20succ?=
 =?UTF-8?q?=C3=A8s.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/Invoices.tsx | 65 +++++++++++++++++++++++++++++++++--
 todo.md                       |  8 +++++
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/Invoices.tsx b/client/src/pages/Invoices.tsx
index c0f6670..78d91c9 100644
--- a/client/src/pages/Invoices.tsx
+++ b/client/src/pages/Invoices.tsx
@@ -37,6 +37,8 @@ export default function Invoices() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [invoiceToDelete, setInvoiceToDelete] = useState<number | null>(null);
   const { data: invoices, isLoading } = trpc.invoices.list.useQuery();
+  const { data: departments } = trpc.departments.getByUser.useQuery();
+  const { data: allocations } = trpc.accountingAllocations.getByUser.useQuery();
   const utils = trpc.useUtils();
 
   const exportExcelMutation = trpc.sftp.exportToExcel.useMutation({
@@ -101,6 +103,16 @@ export default function Invoices() {
     },
   });
 
+  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 filteredInvoices = invoices?.filter((inv) => {
     // Filter by search query
     if (searchQuery) {
@@ -365,9 +377,56 @@ export default function Invoices() {
                               ? `${parseFloat(invoice.totalAmount as string).toFixed(2)} €`
                               : "-"}
                           </TableCell>
-                          <TableCell className="text-sm">{invoice.serviceConcerne || "-"}</TableCell>
-                          <TableCell className="text-sm">{invoice.typeAchat || "-"}</TableCell>
-                          <TableCell className="text-sm">{invoice.ventilationComptable || "-"}</TableCell>
+                          <TableCell className="text-sm">
+                            <select
+                              value={invoice.serviceConcerne || ""}
+                              onChange={(e) => {
+                                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>
+                              ))}
+                            </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) => {
+                                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>
+                              ))}
+                            </select>
+                          </TableCell>
                           <TableCell>{getQualityBadge(invoice.qualityScore)}</TableCell>
                           <TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
                           <TableCell>
diff --git a/todo.md b/todo.md
index 590d263..579c7db 100644
--- a/todo.md
+++ b/todo.md
@@ -222,3 +222,11 @@
 - [x] Ajouter un bouton "Supprimer" avec confirmation (AlertDialog)
 - [x] Utiliser la route tRPC existante pour supprimer une facture
 - [x] Tester la suppression avec confirmation
+
+## Édition directe des champs métier dans la liste
+- [x] Charger les listes de services et ventilations dans la page Invoices
+- [x] Transformer la cellule Service en menu déroulant éditable
+- [x] Transformer la cellule Type d'achat en menu déroulant éditable
+- [x] Transformer la cellule Ventilation en menu déroulant éditable
+- [x] Sauvegarder automatiquement les modifications (mutation updateFieldMutation)
+- [x] Afficher une notification de succès après sauvegarde