feat(transactions): add delete button with confirmation dialog

Each transaction row now has a Delete button that prompts for
confirmation before removing the transaction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/App.jsx

@@ -20,6 +20,10 @@ function App() {
     setTransactions([...transactions, transaction]);
   };
 
+  const handleDeleteTransaction = (id) => {
+    setTransactions(transactions.filter(t => t.id !== id));
+  };
+
   return (
     <div className="app">
       <h1>Finance Tracker</h1>
@@ -27,7 +31,7 @@ function App() {
 
       <Summary transactions={transactions} />
       <TransactionForm onAddTransaction={handleAddTransaction} />
-      <TransactionList transactions={transactions} />
+      <TransactionList transactions={transactions} onDeleteTransaction={handleDeleteTransaction} />
     </div>
   );
 }

src/TransactionList.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 const categories = ["food", "housing", "utilities", "transport", "entertainment", "salary", "other"];
 
-function TransactionList({ transactions }) {
+function TransactionList({ transactions, onDeleteTransaction }) {
   const [filterType, setFilterType] = useState("all");
   const [filterCategory, setFilterCategory] = useState("all");
 
@@ -38,6 +38,7 @@ function TransactionList({ transactions }) {
             <th>Description</th>
             <th>Category</th>
             <th>Amount</th>
+            <th>Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -49,6 +50,13 @@ function TransactionList({ transactions }) {
               <td className={t.type === "income" ? "income-amount" : "expense-amount"}>
                 {t.type === "income" ? "+" : "-"}${t.amount}
               </td>
+              <td>
+                <button onClick={() => {
+                  if (window.confirm("Are you sure you want to delete this transaction?")) {
+                    onDeleteTransaction(t.id);
+                  }
+                }}>Delete</button>
+              </td>
             </tr>
           ))}
         </tbody>