feat: implement transaction reconciliation feature with keyboard navigation support in transaction table

app/api/banking/transactions/clear-categories/route.ts

@@ -24,3 +24,4 @@ export async function POST() {
     );
   }
 }
+

app/transactions/page.tsx

@@ -146,6 +146,32 @@ export default function TransactionsPage() {
     }
   };
 
+  const markReconciled = async (transactionId: string) => {
+    const transaction = data.transactions.find((t) => t.id === transactionId);
+    if (!transaction || transaction.isReconciled) return; // Skip if already reconciled
+
+    const updatedTransaction = {
+      ...transaction,
+      isReconciled: true,
+    };
+
+    const updatedTransactions = data.transactions.map((t) =>
+      t.id === transactionId ? updatedTransaction : t
+    );
+    update({ ...data, transactions: updatedTransactions });
+
+    try {
+      await fetch("/api/banking/transactions", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updatedTransaction),
+      });
+    } catch (error) {
+      console.error("Failed to update transaction:", error);
+      refresh();
+    }
+  };
+
   const setCategory = async (
     transactionId: string,
     categoryId: string | null
@@ -299,6 +325,7 @@ export default function TransactionsPage() {
         onToggleSelectAll={toggleSelectAll}
         onToggleSelectTransaction={toggleSelectTransaction}
         onToggleReconciled={toggleReconciled}
+        onMarkReconciled={markReconciled}
         onSetCategory={setCategory}
         formatCurrency={formatCurrency}
         formatDate={formatDate}