feat: add multi-account financial overview dashboard

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 Accounts from "./pages/Accounts";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -83,6 +84,14 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <Accounts />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="account"
               element={

app/src/__tests__/Accounts.integration.test.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Accounts from '@/pages/Accounts';
+
+const toastMock = jest.fn();
+jest.mock('@/components/ui/use-toast', () => ({
+  useToast: () => ({ toast: toastMock }),
+}));
+
+jest.mock('@/components/ui/button', () => ({
+  Button: ({ children, ...props }: React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+jest.mock('@/components/ui/input', () => ({
+  Input: ({ ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+}));
+jest.mock('@/components/ui/label', () => ({
+  Label: ({ children, ...props }: React.PropsWithChildren & React.LabelHTMLAttributes<HTMLLabelElement>) => (
+    <label {...props}>{children}</label>
+  ),
+}));
+jest.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: React.PropsWithChildren & { open?: boolean }) => (
+    <div data-testid="dialog" data-open={open}>{children}</div>
+  ),
+  DialogContent: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogHeader: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogTitle: ({ children }: React.PropsWithChildren) => <h3>{children}</h3>,
+  DialogTrigger: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+jest.mock('@/components/ui/financial-card', () => ({
+  FinancialCard: ({ children, ...props }: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
+    <div {...props}>{children}</div>
+  ),
+  FinancialCardHeader: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  FinancialCardTitle: ({ children, ...props }: React.PropsWithChildren & React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3 {...props}>{children}</h3>
+  ),
+  FinancialCardDescription: ({ children }: React.PropsWithChildren) => <p>{children}</p>,
+  FinancialCardContent: ({ children, ...props }: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
+    <div {...props}>{children}</div>
+  ),
+}));
+
+const overviewMock = jest.fn();
+
+jest.mock('@/api/accounts', () => ({
+  getAccountsOverview: (...args: unknown[]) => overviewMock(...args),
+  createAccount: jest.fn(),
+  updateAccount: jest.fn(),
+  deleteAccount: jest.fn(),
+}));
+
+beforeEach(() => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+  );
+}
+
+const emptyOverview = {
+  accounts: [],
+  total_balance: 0,
+  totals_by_currency: {},
+  account_count: 0,
+  recent_expenses: [],
+  upcoming_bills: [],
+};
+
+describe('Accounts page', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders empty state when no accounts exist', async () => {
+    overviewMock.mockResolvedValue(emptyOverview);
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/no financial accounts yet/i)).toBeInTheDocument();
+    });
+  });
+
+  it('renders accounts list with balances', async () => {
+    overviewMock.mockResolvedValue({
+      accounts: [
+        {
+          id: 1,
+          name: 'Main Checking',
+          account_type: 'CHECKING',
+          balance: 5000,
+          currency: 'USD',
+          institution: 'Chase Bank',
+          active: true,
+          created_at: '2026-01-01T00:00:00',
+        },
+        {
+          id: 2,
+          name: 'Savings',
+          account_type: 'SAVINGS',
+          balance: 10000,
+          currency: 'USD',
+          institution: null,
+          active: true,
+          created_at: '2026-01-01T00:00:00',
+        },
+      ],
+      total_balance: 15000,
+      totals_by_currency: { USD: 15000 },
+      account_count: 2,
+      recent_expenses: [],
+      upcoming_bills: [],
+    });
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Main Checking')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Savings')).toBeInTheDocument();
+    expect(screen.getByText('Chase Bank')).toBeInTheDocument();
+    // Verify currency-aware formatting
+    expect(screen.getByText('$15,000.00')).toBeInTheDocument();
+  });
+
+  it('shows Add Account button', async () => {
+    overviewMock.mockResolvedValue(emptyOverview);
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/add account/i)).toBeInTheDocument();
+    });
+  });
+
+  it('renders recent expenses and upcoming bills', async () => {
+    overviewMock.mockResolvedValue({
+      accounts: [
+        { id: 1, name: 'Checking', account_type: 'CHECKING', balance: 1000, currency: 'USD', institution: null, active: true, created_at: null },
+      ],
+      total_balance: 1000,
+      totals_by_currency: { USD: 1000 },
+      account_count: 1,
+      recent_expenses: [
+        { id: 1, amount: 50, currency: 'USD', description: 'Groceries', date: '2026-03-20' },
+      ],
+      upcoming_bills: [
+        { id: 1, name: 'Internet', amount: 49.99, currency: 'USD', next_due_date: '2026-04-01' },
+      ],
+    });
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Groceries')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Internet')).toBeInTheDocument();
+  });
+
+  it('renders error state on fetch failure', async () => {
+    overviewMock.mockRejectedValue(new Error('Network error'));
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/failed to load accounts/i)).toBeInTheDocument();
+    });
+  });
+
+  it('renders multi-currency totals correctly', async () => {
+    overviewMock.mockResolvedValue({
+      accounts: [
+        { id: 1, name: 'USD', account_type: 'CHECKING', balance: 1000, currency: 'USD', institution: null, active: true, created_at: null },
+        { id: 2, name: 'EUR', account_type: 'SAVINGS', balance: 2000, currency: 'EUR', institution: null, active: true, created_at: null },
+      ],
+      total_balance: 3000,
+      totals_by_currency: { USD: 1000, EUR: 2000 },
+      account_count: 2,
+      recent_expenses: [],
+      upcoming_bills: [],
+    });
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('USD')).toBeInTheDocument();
+    });
+    // Both currency totals should be displayed
+    expect(screen.getByText('EUR')).toBeInTheDocument();
+  });
+
+  it('shows delete confirmation dialog', async () => {
+    overviewMock.mockResolvedValue({
+      accounts: [
+        { id: 1, name: 'Test Account', account_type: 'CHECKING', balance: 100, currency: 'USD', institution: null, active: true, created_at: null },
+      ],
+      total_balance: 100,
+      totals_by_currency: { USD: 100 },
+      account_count: 1,
+      recent_expenses: [],
+      upcoming_bills: [],
+    });
+    renderWithProviders(<Accounts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Account')).toBeInTheDocument();
+    });
+    // Delete confirmation dialog title should be present in the DOM
+    expect(screen.getByText('Delete Account')).toBeInTheDocument();
+  });
+});

app/src/api/accounts.ts

@@ -0,0 +1,75 @@
+import { api } from './client';
+
+export type AccountType = 'CHECKING' | 'SAVINGS' | 'CREDIT_CARD' | 'CASH' | 'INVESTMENT' | 'OTHER';
+
+export type FinancialAccount = {
+  id: number;
+  name: string;
+  account_type: AccountType;
+  balance: number;
+  currency: string;
+  institution: string | null;
+  active: boolean;
+  created_at: string | null;
+};
+
+export type AccountCreate = {
+  name: string;
+  account_type?: AccountType;
+  balance?: number;
+  currency?: string;
+  institution?: string;
+};
+
+export type AccountUpdate = Partial<AccountCreate> & {
+  active?: boolean;
+};
+
+export type AccountsOverview = {
+  accounts: FinancialAccount[];
+  total_balance: number;
+  totals_by_currency: Record<string, number>;
+  account_count: number;
+  recent_expenses: {
+    id: number;
+    amount: number;
+    currency: string;
+    description: string;
+    date: string;
+  }[];
+  upcoming_bills: {
+    id: number;
+    name: string;
+    amount: number;
+    currency: string;
+    next_due_date: string;
+  }[];
+};
+
+export async function listAccounts(includeInactive = false): Promise<FinancialAccount[]> {
+  const qs = includeInactive ? '?include_inactive=true' : '';
+  return api<FinancialAccount[]>(`/accounts${qs}`);
+}
+
+export async function getAccount(id: number): Promise<FinancialAccount> {
+  return api<FinancialAccount>(`/accounts/${id}`);
+}
+
+export async function createAccount(payload: AccountCreate): Promise<FinancialAccount> {
+  return api<FinancialAccount>('/accounts', { method: 'POST', body: payload });
+}
+
+export async function updateAccount(
+  id: number,
+  payload: AccountUpdate,
+): Promise<FinancialAccount> {
+  return api<FinancialAccount>(`/accounts/${id}`, { method: 'PATCH', body: payload });
+}
+
+export async function deleteAccount(id: number): Promise<{ message: string }> {
+  return api<{ message: string }>(`/accounts/${id}`, { method: 'DELETE' });
+}
+
+export async function getAccountsOverview(): Promise<AccountsOverview> {
+  return api<AccountsOverview>('/accounts/overview');
+}

app/src/components/layout/Navbar.tsx

@@ -13,6 +13,7 @@ const navigation = [
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
   { name: 'Analytics', href: '/analytics' },
+  { name: 'Accounts', href: '/accounts' },
 ];
 
 export function Navbar() {