feat: enhance transaction table interactions by preventing event propagation on button clicks and adding icons for reconciliation actions

This commit is contained in:
Julien Froidefond
2025-11-29 17:55:47 +01:00
parent ab1f7a65b2
commit 93e1d16a3c

View File

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