From 93e1d16a3c98f37d7b9ae71f1064d457361bcccc Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sat, 29 Nov 2025 17:55:47 +0100
Subject: [PATCH] feat: enhance transaction table interactions by preventing
 event propagation on button clicks and adding icons for reconciliation
 actions

---
 components/transactions/transaction-table.tsx | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/transactions/transaction-table.tsx b/components/transactions/transaction-table.tsx
index 3e2ab8e..5487e31 100644
--- a/components/transactions/transaction-table.tsx
+++ b/components/transactions/transaction-table.tsx
@@ -239,7 +239,7 @@ export function TransactionTable({
                         {transaction.amount >= 0 ? "+" : ""}
                         {formatCurrency(transaction.amount)}
                       </td>
-                      <td className="p-3 text-center">
+                      <td className="p-3 text-center" onClick={(e) => e.stopPropagation()}>
                         <button
                           onClick={() => onToggleReconciled(transaction.id)}
                           className="p-1 hover:bg-muted rounded"
@@ -251,7 +251,7 @@ export function TransactionTable({
                           )}
                         </button>
                       </td>
-                      <td className="p-3">
+                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                             <Button
@@ -264,15 +264,29 @@ export function TransactionTable({
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
                             <DropdownMenuItem
-                              onClick={() => onToggleReconciled(transaction.id)}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onToggleReconciled(transaction.id);
+                              }}
                             >
-                              {transaction.isReconciled
-                                ? "Dépointer"
-                                : "Pointer"}
+                              {transaction.isReconciled ? (
+                                <>
+                                  <Circle className="w-4 h-4 mr-2" />
+                                  Dépointer
+                                </>
+                              ) : (
+                                <>
+                                  <CheckCircle2 className="w-4 h-4 mr-2" />
+                                  Pointer
+                                </>
+                              )}
                             </DropdownMenuItem>
                             <DropdownMenuSeparator />
                             <DropdownMenuItem
-                              onClick={() => onCreateRule(transaction)}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onCreateRule(transaction);
+                              }}
                             >
                               <Wand2 className="w-4 h-4 mr-2" />
                               Créer une règle