Delete Safely with a Custom Confirmation

Do not use window.confirm() for a financial record.

Create a reusable ConfirmDialog component that renders its own overlay and buttons. The transaction list opens the dialog with the exact transaction description and amount.

After a successful delete, keep enough information to offer a short undo action. Restoring an item simply sends it back through the normal create API and updates shared state.

Test it

Delete a transaction. The custom dialog should appear. Choose Keep and verify nothing changes. Choose Delete, confirm the row disappears, then use Undo before the five-second window closes.

Checkpoint

Deletion is explicit, reversible for a short period, and never depends on a browser-native confirmation prompt.