feat: CSV import and batch reconciliation UI

- Add reconciled_with_id column to transactions (links manual → statement tx)
- CSV import wizard: 4-step modal (upload → map columns → review → done)
  - Handles any bank format via column mapping with localStorage presets
  - Single signed or separate debit/credit column modes
  - Editable preview table before committing
  - Auto-tags all imported rows with 'csv-import'
- Batch reconcile page: shows all unreconciled manual transactions with
  potential statement matches (date ±3 days, amount ±1%) pre-fetched
  - Select matches across multiple rows, apply all at once
  - Copies overrides/tags/splits from manual → statement tx atomically
  - Manual tx marked reconciled (linked), hidden from main transactions view
  - Transactions with no matches shown separately
- Import CSV button on transactions page
- Reconcile nav item in sidebar

src/app/transactions/page.tsx

@@ -8,6 +8,7 @@ import { SplitModal } from "@/components/split-modal";
 import { TagPicker } from "@/components/tag-picker";
 import { AddTransactionModal } from "@/components/add-transaction-modal";
 import { EditTransactionModal } from "@/components/edit-transaction-modal";
+import { CsvImportModal } from "@/components/csv-import-modal";
 import type { TransactionRow } from "@/lib/queries";
 
 function formatDate(d: string) {
@@ -507,6 +508,7 @@ function TransactionsContent() {
   const [splitModal, setSplitModal] = useState<{ transactionId?: number; transactionIds?: number[]; amount?: number; description: string; merchant?: string } | null>(null);
   const [addModal, setAddModal] = useState<{ prefill?: Parameters<typeof AddTransactionModal>[0]["prefill"]; title?: string } | null>(null);
   const [editModal, setEditModal] = useState<TransactionRow | null>(null);
+  const [showImportModal, setShowImportModal] = useState(false);
   const [paymentModal, setPaymentModal] = useState<TransactionRow | null>(null);
   const [rulePrompt, setRulePrompt] = useState<{
     tx: { id: number; effective_merchant: string; description: string; bank_name: string };
@@ -562,12 +564,20 @@ function TransactionsContent() {
     <div>
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-xl font-semibold">Transactions</h2>
-        <button
-          onClick={() => setAddModal({})}
-          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium"
-        >
-          + Add Transaction
-        </button>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowImportModal(true)}
+            className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-sm font-medium"
+          >
+            Import CSV
+          </button>
+          <button
+            onClick={() => setAddModal({})}
+            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium"
+          >
+            + Add Transaction
+          </button>
+        </div>
       </div>
 
       {/* Statement context banner */}
@@ -933,6 +943,8 @@ function TransactionsContent() {
         />
       )}
 
+      {showImportModal && <CsvImportModal onClose={() => setShowImportModal(false)} />}
+
       {addModal && (
         <AddTransactionModal
           prefill={addModal.prefill}