feat: multi-account financial overview dashboard (#132)

app/src/App.tsx

@@ -16,6 +16,7 @@ import NotFound from "./pages/NotFound";
 import { Landing } from "./pages/Landing";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Account from "./pages/Account";
+import { MultiAccountDashboard } from "./pages/MultiAccountDashboard";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -91,6 +92,14 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <MultiAccountDashboard />
+                </ProtectedRoute>
+              }
+            />
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />

app/src/api/accounts.ts

@@ -0,0 +1,105 @@
+import { api } from './client';
+
+export type AccountType =
+  | 'CHECKING'
+  | 'SAVINGS'
+  | 'CREDIT_CARD'
+  | 'INVESTMENT'
+  | 'LOAN'
+  | 'CASH'
+  | 'OTHER';
+
+export type FinancialAccount = {
+  id: number;
+  name: string;
+  account_type: AccountType;
+  balance: number;
+  currency: string;
+  institution: string | null;
+  last_four: string | null;
+  color: string | null;
+  include_in_overview: boolean;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+};
+
+export type MultiAccountOverview = {
+  period: { month: string };
+  accounts: FinancialAccount[];
+  totals: {
+    net_worth: number;
+    total_assets: number;
+    total_liabilities: number;
+  };
+  monthly_summary: {
+    income: number;
+    expenses: number;
+    net_flow: number;
+  };
+  upcoming_bills: Array<{
+    id: number;
+    name: string;
+    amount: number;
+    currency: string;
+    next_due_date: string;
+    cadence: string;
+  }>;
+  category_breakdown: Array<{
+    category_id: number | null;
+    category_name: string;
+    amount: number;
+    share_pct: number;
+  }>;
+  errors?: string[];
+};
+
+export type CreateAccountPayload = {
+  name: string;
+  account_type?: AccountType;
+  balance?: number;
+  currency?: string;
+  institution?: string;
+  last_four?: string;
+  color?: string;
+  include_in_overview?: boolean;
+};
+
+export type UpdateAccountPayload = Partial<CreateAccountPayload>;
+
+export async function listAccounts(includeInactive = false): Promise<FinancialAccount[]> {
+  const q = includeInactive ? '?include_inactive=true' : '';
+  return api<FinancialAccount[]>(`/accounts${q}`);
+}
+
+export async function getAccount(id: number): Promise<FinancialAccount> {
+  return api<FinancialAccount>(`/accounts/${id}`);
+}
+
+export async function createAccount(payload: CreateAccountPayload): Promise<FinancialAccount> {
+  return api<FinancialAccount>('/accounts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function updateAccount(
+  id: number,
+  payload: UpdateAccountPayload
+): Promise<FinancialAccount> {
+  return api<FinancialAccount>(`/accounts/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function deleteAccount(id: number): Promise<{ message: string }> {
+  return api<{ message: string }>(`/accounts/${id}`, { method: 'DELETE' });
+}
+
+export async function getMultiAccountOverview(month?: string): Promise<MultiAccountOverview> {
+  const q = month ? `?month=${encodeURIComponent(month)}` : '';
+  return api<MultiAccountOverview>(`/accounts/overview${q}`);
+}

app/src/components/layout/Navbar.tsx

@@ -8,6 +8,7 @@ import { logout as logoutApi } from '@/api/auth';
 
 const navigation = [
   { name: 'Dashboard', href: '/dashboard' },
+  { name: 'Accounts', href: '/accounts' },
   { name: 'Budgets', href: '/budgets' },
   { name: 'Bills', href: '/bills' },
   { name: 'Reminders', href: '/reminders' },