feat(transactions): add delete button to the edit modal

resources/js/components/transactions/edit-transaction-dialog.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import type React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { EditTransactionDialog } from './edit-transaction-dialog';
@@ -342,4 +342,92 @@ describe('EditTransactionDialog', () => {
 
         expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
     });
+
+    const manualTransaction = {
+        id: 'tx-manual',
+        user_id: 'user-1',
+        account_id: 'account-1',
+        category_id: null,
+        description: 'Groceries',
+        description_iv: null,
+        transaction_date: '2026-05-27',
+        amount: -1200,
+        currency_code: 'EUR',
+        notes: null,
+        notes_iv: null,
+        creditor_name: null,
+        debtor_name: null,
+        source: 'manually_created' as const,
+        created_at: '2026-05-27T00:00:00Z',
+        updated_at: '2026-05-27T00:00:00Z',
+        decryptedDescription: 'Groceries',
+        decryptedNotes: null,
+        label_ids: [],
+    };
+
+    it('closes the dialog and asks the parent to delete when Delete is clicked', () => {
+        const onDelete = vi.fn();
+        const onOpenChange = vi.fn();
+
+        render(
+            <EditTransactionDialog
+                transaction={manualTransaction}
+                categories={[]}
+                accounts={[checkingAccount]}
+                banks={[]}
+                labels={[]}
+                open
+                onOpenChange={onOpenChange}
+                onSuccess={vi.fn()}
+                onDelete={onDelete}
+                mode="edit"
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+        expect(onDelete).toHaveBeenCalledWith(manualTransaction);
+    });
+
+    it('hides the Delete button when no onDelete handler is provided', () => {
+        render(
+            <EditTransactionDialog
+                transaction={manualTransaction}
+                categories={[]}
+                accounts={[checkingAccount]}
+                banks={[]}
+                labels={[]}
+                open
+                onOpenChange={vi.fn()}
+                onSuccess={vi.fn()}
+                mode="edit"
+            />,
+        );
+
+        expect(
+            screen.queryByRole('button', { name: 'Delete' }),
+        ).not.toBeInTheDocument();
+    });
+
+    it('hides the Delete button in create mode', () => {
+        render(
+            <EditTransactionDialog
+                transaction={null}
+                categories={[]}
+                accounts={[checkingAccount]}
+                banks={[]}
+                labels={[]}
+                open
+                onOpenChange={vi.fn()}
+                onSuccess={vi.fn()}
+                onDelete={vi.fn()}
+                mode="create"
+            />,
+        );
+
+        expect(
+            screen.queryByRole('button', { name: 'Delete' }),
+        ).not.toBeInTheDocument();
+    });
 });

resources/js/components/transactions/edit-transaction-dialog.tsx

@@ -42,6 +42,7 @@ import { formatDate } from '@/utils/date';
 import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { getYear, parseISO } from 'date-fns';
+import { Trash2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -61,6 +62,7 @@ interface EditTransactionDialogProps {
         source: 'edit_transaction_modal',
     ) => void;
     onLabelCreated?: (label: Label) => void;
+    onDelete?: (transaction: DecryptedTransaction) => void;
     mode: 'create' | 'edit';
     initialAccountId?: string | null;
 }
@@ -77,6 +79,7 @@ export function EditTransactionDialog({
     onSuccess,
     onCategorized,
     onLabelCreated,
+    onDelete,
     mode,
     initialAccountId = null,
 }: EditTransactionDialogProps) {
@@ -867,6 +870,21 @@ export function EditTransactionDialog({
                     </div>
 
                     <DialogFooter>
+                        {mode === 'edit' && onDelete && transaction && (
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                onClick={() => {
+                                    onOpenChange(false);
+                                    onDelete(transaction);
+                                }}
+                                disabled={isSubmitting}
+                                className="text-destructive hover:bg-destructive/10 hover:text-destructive sm:mr-auto"
+                            >
+                                <Trash2 />
+                                {__('Delete')}
+                            </Button>
+                        )}
                         <Button
                             type="button"
                             variant="outline"

resources/js/components/transactions/transaction-list.tsx

@@ -1111,6 +1111,7 @@ export function TransactionList({
                 onSuccess={updateTransaction}
                 onCategorized={showAutomatizeToast}
                 onLabelCreated={handleLabelCreated}
+                onDelete={setDeleteTransaction}
                 mode="edit"
             />
 

resources/js/pages/transactions/index.tsx

@@ -1542,6 +1542,7 @@ export default function Transactions({
                 onSuccess={updateTransaction}
                 onCategorized={showAutomatizeToast}
                 onLabelCreated={handleLabelCreated}
+                onDelete={setDeleteTransaction}
                 mode="edit"
             />