Add budget module: FastAPI backend + React frontend

Backend: FastAPI + PostgreSQL with models for accounts, transactions,
and categories. Auto-categorization from merchant patterns, token auth,
CRUD endpoints, and seed data for 16 categories and 4 bank accounts.

Frontend: Login, Dashboard (account balances + recent charges),
Transactions (full CRUD table with search/filter), Cash & Transfers
view. Dark theme with emerald/cyan accents, responsive layout.

Infrastructure: Updated docker-compose for backend + db services,
nginx proxy config for API routing, deploy workflow with secrets.

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

frontend/src/pages/Transfers.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Plus, Search, Pencil, Trash2, ArrowLeftRight } from 'lucide-react';
+
+import api, { type Transaction } from '../api';
+import TransactionModal from '../components/TransactionModal';
+
+function formatAmount(amount: number, currency: string) {
+  const abs = Math.abs(amount);
+  if (currency === 'USD') {
+    return `$${abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+  return `₡${abs.toLocaleString('es-CR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
+type SourceTab = 'CASH' | 'TRANSFER';
+
+export default function Transfers() {
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [search, setSearch] = useState('');
+  const [sourceTab, setSourceTab] = useState<SourceTab>('CASH');
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState<Transaction | null>(null);
+
+  const fetchTransactions = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = { source: sourceTab, limit: '200' };
+      if (search) params.search = search;
+      const { data } = await api.get('/transactions/', { params });
+      setTransactions(data);
+    } finally {
+      setLoading(false);
+    }
+  }, [search, sourceTab]);
+
+  useEffect(() => {
+    const timer = setTimeout(fetchTransactions, 300);
+    return () => clearTimeout(timer);
+  }, [fetchTransactions]);
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this transaction?')) return;
+    await api.delete(`/transactions/${id}`);
+    fetchTransactions();
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold">Cash & Transfers</h1>
+          <p className="text-sm text-slate-500 mt-1">
+            Track non-credit-card expenses
+          </p>
+        </div>
+        <button
+          onClick={() => {
+            setEditing(null);
+            setModalOpen(true);
+          }}
+          className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          Add {sourceTab === 'CASH' ? 'Cash Expense' : 'Transfer'}
+        </button>
+      </div>
+
+      {/* Source tabs */}
+      <div className="flex gap-1 bg-slate-900/40 border border-slate-800/60 rounded-lg p-1 w-fit">
+        {(['CASH', 'TRANSFER'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setSourceTab(tab)}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              sourceTab === tab
+                ? 'bg-emerald-500/10 text-emerald-400'
+                : 'text-slate-500 hover:text-white'
+            }`}
+          >
+            {tab === 'CASH' ? 'Cash' : 'Transfers'}
+          </button>
+        ))}
+      </div>
+
+      {/* Search */}
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full bg-slate-900/60 border border-slate-800/60 rounded-lg pl-10 pr-4 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 transition-colors"
+          placeholder="Search..."
+        />
+      </div>
+
+      {/* List */}
+      <div className="bg-slate-900/40 border border-slate-800/60 rounded-xl divide-y divide-slate-800/30">
+        {transactions.length === 0 && !loading ? (
+          <div className="px-5 py-16 text-center text-slate-600 text-sm">
+            <ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-slate-700" />
+            No {sourceTab.toLowerCase()} transactions yet
+          </div>
+        ) : (
+          <>
+            {transactions.map((tx) => (
+              <div
+                key={tx.id}
+                className="flex items-center justify-between px-5 py-4 hover:bg-slate-800/20 transition-colors group"
+              >
+                <div className="min-w-0">
+                  <p className="text-sm font-medium truncate">{tx.merchant}</p>
+                  <p className="text-xs text-slate-500 mt-0.5">
+                    {new Date(tx.date).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })}
+                    {tx.category && (
+                      <span className="ml-2 bg-slate-800/60 text-slate-400 px-2 py-0.5 rounded">
+                        {tx.category.name}
+                      </span>
+                    )}
+                  </p>
+                </div>
+                <div className="flex items-center gap-3 flex-shrink-0 ml-4">
+                  <span className="font-mono text-sm font-medium text-white">
+                    {formatAmount(tx.amount, tx.currency)}
+                  </span>
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                      onClick={() => {
+                        setEditing(tx);
+                        setModalOpen(true);
+                      }}
+                      className="p-1.5 rounded hover:bg-slate-700/50 text-slate-500 hover:text-white transition-colors"
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                      onClick={() => handleDelete(tx.id)}
+                      className="p-1.5 rounded hover:bg-red-500/10 text-slate-500 hover:text-red-400 transition-colors"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+
+      {modalOpen && (
+        <TransactionModal
+          transaction={editing}
+          source={sourceTab}
+          onClose={() => setModalOpen(false)}
+          onSaved={fetchTransactions}
+        />
+      )}
+    </div>
+  );
+}