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/App.tsx

@@ -1,113 +1,46 @@
-import {
-  TrendingUp,
-  Shield,
-  Smartphone,
-  BarChart3,
-  Wallet,
-  ArrowRight,
-} from 'lucide-react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './AuthContext';
+import Layout from './components/Layout';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import Transactions from './pages/Transactions';
+import Transfers from './pages/Transfers';
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated } = useAuth();
+  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+function AppRoutes() {
+  const { isAuthenticated } = useAuth();
 
-function App() {
   return (
-    <div className="min-h-screen bg-slate-950 text-white">
-      {/* Nav */}
-      <nav className="border-b border-slate-800/60 backdrop-blur-sm sticky top-0 z-50 bg-slate-950/80">
-        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2.5">
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-400 to-cyan-400 flex items-center justify-center">
-              <Wallet className="w-5 h-5 text-slate-950" strokeWidth={2.5} />
-            </div>
-            <span className="text-xl font-bold tracking-tight">
-              Wealthy<span className="text-emerald-400">Smart</span>
-            </span>
-          </div>
-          <span className="text-xs font-medium text-slate-500 border border-slate-800 rounded-full px-3 py-1">
-            Coming Soon
-          </span>
-        </div>
-      </nav>
-
-      {/* Hero */}
-      <section className="max-w-6xl mx-auto px-6 pt-24 pb-20">
-        <div className="max-w-2xl">
-          <div className="inline-flex items-center gap-2 text-emerald-400 text-sm font-medium mb-6 bg-emerald-400/10 rounded-full px-4 py-1.5">
-            <TrendingUp className="w-4 h-4" />
-            Personal Finance, Simplified
-          </div>
-          <h1 className="text-5xl sm:text-6xl font-extrabold leading-[1.1] tracking-tight mb-6">
-            Take control of your{' '}
-            <span className="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
-              financial future
-            </span>
-          </h1>
-          <p className="text-lg text-slate-400 leading-relaxed mb-4 max-w-xl">
-            Budget tracking, investment management, and financial insights — all
-            in one place. Built to replace spreadsheets with something smarter.
-          </p>
-          <p className="text-base text-slate-500 leading-relaxed mb-10 max-w-xl">
-            Track every dollar with precision, monitor your investments in real
-            time, and uncover meaningful insights about your financial habits
-            without juggling multiple tools. This platform centralizes your
-            entire financial picture, turning scattered data into clear,
-            actionable intelligence. Instead of manually updating spreadsheets
-            and second-guessing your numbers, you get automated tracking,
-            intelligent categorization, and forward-looking analysis that helps
-            you make better decisions faster. It's not just a replacement for
-            spreadsheets—it's a system designed to actively improve how you
-            manage, grow, and understand your money.
-          </p>
-          <div className="flex items-center gap-3">
-            <div className="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-6 py-3 rounded-lg transition-colors">
-              Get Started
-              <ArrowRight className="w-4 h-4" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features */}
-      <section className="max-w-6xl mx-auto px-6 pb-24">
-        <div className="grid md:grid-cols-3 gap-6">
-          {[
-            {
-              icon: BarChart3,
-              title: 'Budget Tracking',
-              desc: 'Track income, expenses, and savings across multiple accounts and currencies with real-time balance updates.',
-            },
-            {
-              icon: Shield,
-              title: 'Investments & Pensions',
-              desc: 'Monitor your portfolio, pension funds, and long-term savings all in a single dashboard.',
-            },
-            {
-              icon: Smartphone,
-              title: 'Mobile First',
-              desc: 'Check and edit your finances on the go. Designed to work seamlessly on any device.',
-            },
-          ].map(({ icon: Icon, title, desc }) => (
-            <div
-              key={title}
-              className="group border border-slate-800/60 rounded-xl p-6 hover:border-emerald-500/30 transition-colors bg-slate-900/40"
-            >
-              <div className="w-10 h-10 rounded-lg bg-emerald-400/10 flex items-center justify-center mb-4 group-hover:bg-emerald-400/20 transition-colors">
-                <Icon className="w-5 h-5 text-emerald-400" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2">{title}</h3>
-              <p className="text-sm text-slate-400 leading-relaxed">{desc}</p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="border-t border-slate-800/60 py-8">
-        <div className="max-w-6xl mx-auto px-6 flex items-center justify-between text-sm text-slate-500">
-          <span>&copy; {new Date().getFullYear()} WealthySmart</span>
-          <span>wealth.cescalante.dev</span>
-        </div>
-      </footer>
-    </div>
+    <Routes>
+      <Route
+        path="/login"
+        element={isAuthenticated ? <Navigate to="/" replace /> : <Login />}
+      />
+      <Route
+        element={
+          <ProtectedRoute>
+            <Layout />
+          </ProtectedRoute>
+        }
+      >
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/transactions" element={<Transactions />} />
+        <Route path="/transfers" element={<Transfers />} />
+      </Route>
+    </Routes>
   );
 }
 
-export default App;
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}