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/components/Layout.tsx

@@ -0,0 +1,118 @@
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import {
+  LayoutDashboard,
+  CreditCard,
+  ArrowLeftRight,
+  LogOut,
+  Wallet,
+  Menu,
+  X,
+} from 'lucide-react';
+import { useState } from 'react';
+import { useAuth } from '../AuthContext';
+
+const navItems = [
+  { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/transactions', icon: CreditCard, label: 'Transactions' },
+  { to: '/transfers', icon: ArrowLeftRight, label: 'Cash & Transfers' },
+];
+
+export default function Layout() {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white">
+      {/* Top bar */}
+      <header className="border-b border-slate-800/60 backdrop-blur-sm sticky top-0 z-50 bg-slate-950/90">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-cyan-400 flex items-center justify-center">
+              <Wallet className="w-4 h-4 text-slate-950" strokeWidth={2.5} />
+            </div>
+            <span className="text-lg font-bold tracking-tight hidden sm:inline">
+              Wealthy<span className="text-emerald-400">Smart</span>
+            </span>
+          </div>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-1">
+            {navItems.map(({ to, icon: Icon, label }) => (
+              <NavLink
+                key={to}
+                to={to}
+                end={to === '/'}
+                className={({ isActive }) =>
+                  `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-emerald-500/10 text-emerald-400'
+                      : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+                  }`
+                }
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleLogout}
+              className="hidden md:flex items-center gap-2 text-slate-500 hover:text-slate-300 text-sm transition-colors"
+            >
+              <LogOut className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="md:hidden text-slate-400"
+            >
+              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile nav */}
+        {mobileOpen && (
+          <div className="md:hidden border-t border-slate-800/60 px-4 pb-4 space-y-1">
+            {navItems.map(({ to, icon: Icon, label }) => (
+              <NavLink
+                key={to}
+                to={to}
+                end={to === '/'}
+                onClick={() => setMobileOpen(false)}
+                className={({ isActive }) =>
+                  `flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-emerald-500/10 text-emerald-400'
+                      : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+                  }`
+                }
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </NavLink>
+            ))}
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800/50 w-full"
+            >
+              <LogOut className="w-4 h-4" />
+              Sign out
+            </button>
+          </div>
+        )}
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

frontend/src/components/TransactionModal.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import api, { type Category, type Transaction } from '../api';
+
+interface Props {
+  transaction?: Transaction | null;
+  source: 'CREDIT_CARD' | 'CASH' | 'TRANSFER';
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export default function TransactionModal({ transaction, source, onClose, onSaved }: Props) {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [form, setForm] = useState({
+    merchant: '',
+    amount: '',
+    currency: 'CRC',
+    date: new Date().toISOString().slice(0, 16),
+    transaction_type: 'COMPRA',
+    source,
+    bank: 'BAC',
+    city: '',
+    card_type: '',
+    card_last4: '',
+    notes: '',
+    category_id: '' as string | number,
+  });
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.get('/categories/').then((r) => setCategories(r.data));
+  }, []);
+
+  useEffect(() => {
+    if (transaction) {
+      setForm({
+        merchant: transaction.merchant,
+        amount: String(transaction.amount),
+        currency: transaction.currency,
+        date: transaction.date.slice(0, 16),
+        transaction_type: transaction.transaction_type,
+        source: transaction.source as typeof source,
+        bank: transaction.bank,
+        city: transaction.city || '',
+        card_type: transaction.card_type || '',
+        card_last4: transaction.card_last4 || '',
+        notes: transaction.notes || '',
+        category_id: transaction.category_id || '',
+      });
+    }
+  }, [transaction]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const payload = {
+        ...form,
+        amount: parseFloat(form.amount),
+        category_id: form.category_id ? Number(form.category_id) : null,
+        city: form.city || null,
+        card_type: form.card_type || null,
+        card_last4: form.card_last4 || null,
+        notes: form.notes || null,
+      };
+      if (transaction) {
+        await api.patch(`/transactions/${transaction.id}`, payload);
+      } else {
+        await api.post('/transactions/', payload);
+      }
+      onSaved();
+      onClose();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const inputClass =
+    'w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/20 transition-colors';
+  const labelClass = 'block text-xs font-medium text-slate-400 mb-1 uppercase tracking-wider';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-slate-900 border border-slate-800 rounded-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800/60">
+          <h3 className="font-semibold">
+            {transaction ? 'Edit Transaction' : 'New Transaction'}
+          </h3>
+          <button onClick={onClose} className="text-slate-500 hover:text-white transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className={labelClass}>Merchant</label>
+              <input
+                className={inputClass}
+                value={form.merchant}
+                onChange={(e) => setForm({ ...form, merchant: e.target.value })}
+                placeholder="e.g. AUTO MERCADO ON LINE"
+                required
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Amount</label>
+              <input
+                className={inputClass}
+                type="number"
+                step="0.01"
+                value={form.amount}
+                onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                placeholder="0.00"
+                required
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Currency</label>
+              <select
+                className={inputClass}
+                value={form.currency}
+                onChange={(e) => setForm({ ...form, currency: e.target.value })}
+              >
+                <option value="CRC">CRC (₡)</option>
+                <option value="USD">USD ($)</option>
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>Date</label>
+              <input
+                className={inputClass}
+                type="datetime-local"
+                value={form.date}
+                onChange={(e) => setForm({ ...form, date: e.target.value })}
+                required
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Type</label>
+              <select
+                className={inputClass}
+                value={form.transaction_type}
+                onChange={(e) => setForm({ ...form, transaction_type: e.target.value })}
+              >
+                <option value="COMPRA">Compra</option>
+                <option value="DEVOLUCION">Devolución</option>
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>Category</label>
+              <select
+                className={inputClass}
+                value={form.category_id}
+                onChange={(e) => setForm({ ...form, category_id: e.target.value })}
+              >
+                <option value="">Auto-detect</option>
+                {categories.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>Bank</label>
+              <select
+                className={inputClass}
+                value={form.bank}
+                onChange={(e) => setForm({ ...form, bank: e.target.value })}
+              >
+                <option value="BAC">BAC</option>
+                <option value="BCR">BCR</option>
+                <option value="DAVIVIENDA">Davivienda</option>
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>City</label>
+              <input
+                className={inputClass}
+                value={form.city}
+                onChange={(e) => setForm({ ...form, city: e.target.value })}
+                placeholder="SAN JOSE, Costa Rica"
+              />
+            </div>
+            {source === 'CREDIT_CARD' && (
+              <>
+                <div>
+                  <label className={labelClass}>Card Type</label>
+                  <input
+                    className={inputClass}
+                    value={form.card_type}
+                    onChange={(e) => setForm({ ...form, card_type: e.target.value })}
+                    placeholder="MASTER"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Card Last 4</label>
+                  <input
+                    className={inputClass}
+                    value={form.card_last4}
+                    onChange={(e) => setForm({ ...form, card_last4: e.target.value })}
+                    placeholder="6585"
+                    maxLength={4}
+                  />
+                </div>
+              </>
+            )}
+            <div className="col-span-2">
+              <label className={labelClass}>Notes</label>
+              <input
+                className={inputClass}
+                value={form.notes}
+                onChange={(e) => setForm({ ...form, notes: e.target.value })}
+                placeholder="Optional notes"
+              />
+            </div>
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium text-slate-400 border border-slate-800 hover:bg-slate-800/50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium bg-emerald-500 hover:bg-emerald-400 text-slate-950 transition-colors disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : transaction ? 'Update' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}