feat: add Multi-account financial overview dashboard (#132)

app/src/App.tsx

@@ -16,6 +16,9 @@ import NotFound from "./pages/NotFound";
 import { Landing } from "./pages/Landing";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Account from "./pages/Account";
+import { SavingsGoals } from "./pages/SavingsGoals";
+import { WeeklySummaryPage } from "./pages/WeeklySummary";
+import { Accounts } from "./pages/Accounts";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -91,6 +94,30 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="savings-goals"
+              element={
+                <ProtectedRoute>
+                  <SavingsGoals />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="weekly-summary"
+              element={
+                <ProtectedRoute>
+                  <WeeklySummaryPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <Accounts />
+                </ProtectedRoute>
+              }
+            />
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Accounts } from '@/pages/Accounts';
+
+jest.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: jest.fn() }),
+}));
+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 }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogContent: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogHeader: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogTitle: ({ children }: React.PropsWithChildren) => <h3>{children}</h3>,
+  DialogDescription: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogTrigger: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  DialogFooter: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+jest.mock('@/components/ui/alert-dailog', () => ({
+  AlertDialog: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogTrigger: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogContent: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogHeader: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogTitle: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogDescription: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogFooter: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDialogCancel: ({ children }: React.PropsWithChildren) => <button>{children}</button>,
+  AlertDialogAction: ({ children, ...props }: React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>) => <button {...props}>{children}</button>,
+}));
+jest.mock('@/components/ui/select', () => ({
+  Select: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  SelectContent: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  SelectItem: ({ children, value }: React.PropsWithChildren & { value: string }) => <option value={value}>{children}</option>,
+  SelectTrigger: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  SelectValue: ({ placeholder }: { placeholder?: string }) => <span>{placeholder}</span>,
+}));
+jest.mock('@/components/ui/badge', () => ({
+  Badge: ({ children, variant }: React.PropsWithChildren & { variant?: string }) => (
+    <span data-variant={variant}>{children}</span>
+  ),
+}));
+jest.mock('@/components/ui/financial-card', () => ({
+  FinancialCard: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+  FinancialCardHeader: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+  FinancialCardTitle: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <h3 className={className}>{children}</h3>
+  ),
+  FinancialCardDescription: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <p className={className}>{children}</p>
+  ),
+  FinancialCardContent: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+  FinancialCardFooter: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+}));
+
+describe('Accounts', () => {
+  it('renders the page title', () => {
+    render(<Accounts />);
+    expect(screen.getByText('Accounts')).toBeInTheDocument();
+    expect(screen.getByText('View all your financial accounts in one place.')).toBeInTheDocument();
+  });
+
+  it('renders summary cards', () => {
+    render(<Accounts />);
+    expect(screen.getByText('Net Worth')).toBeInTheDocument();
+    expect(screen.getByText('Total Assets')).toBeInTheDocument();
+    expect(screen.getByText('Total Liabilities')).toBeInTheDocument();
+    expect(screen.getByText('By Type')).toBeInTheDocument();
+  });
+
+  it('renders default mock accounts', () => {
+    render(<Accounts />);
+    expect(screen.getByText('Primary Checking')).toBeInTheDocument();
+    expect(screen.getByText('Emergency Savings')).toBeInTheDocument();
+    expect(screen.getByText('Rewards Card')).toBeInTheDocument();
+    expect(screen.getByText('Brokerage')).toBeInTheDocument();
+    expect(screen.getByText('Cash Wallet')).toBeInTheDocument();
+  });
+
+  it('renders Add Account button', () => {
+    render(<Accounts />);
+    // "Add Account" appears in button text and dialog title
+    const addButtons = screen.getAllByText('Add Account');
+    expect(addButtons.length).toBeGreaterThan(0);
+  });
+
+  it('shows account institutions', () => {
+    render(<Accounts />);
+    expect(screen.getAllByText('Chase').length).toBeGreaterThan(0);
+    // Capital One appears in Select options and account display
+    expect(screen.getAllByText('Capital One').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Fidelity').length).toBeGreaterThan(0);
+  });
+
+  it('shows account type badges', () => {
+    render(<Accounts />);
+    // "Checking" appears in badge + select option
+    expect(screen.getAllByText('Checking').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Savings').length).toBeGreaterThan(0);
+  });
+
+  it('calculates net worth correctly', () => {
+    render(<Accounts />);
+    // 4520.50 + 12800 - 1245.30 + 28450 + 320 = 44845.20
+    expect(screen.getByText('$44,845.20')).toBeInTheDocument();
+  });
+
+  it('shows primary account star indicator', () => {
+    render(<Accounts />);
+    expect(screen.getByText('Primary Checking')).toBeInTheDocument();
+  });
+
+  it('renders edit and delete buttons for each account', () => {
+    render(<Accounts />);
+    const editButtons = screen.getAllByText('Edit');
+    expect(editButtons.length).toBe(5);
+  });
+});

app/src/__tests__/Navbar.test.tsx

@@ -27,7 +27,9 @@ describe('Navbar auth state', () => {
   it('shows Account/Logout when signed in (token present)', () => {
     localStorage.setItem('fm_token', 'token');
     renderNav();
-    expect(screen.getByRole('link', { name: /account/i })).toBeInTheDocument();
+    // "Account" link in auth section (href=/account) and "Accounts" nav link (href=/accounts) both exist
+    const accountLinks = screen.getAllByRole('link', { name: /account/i });
+    expect(accountLinks.length).toBeGreaterThanOrEqual(1);
     expect(screen.getByRole('button', { name: /logout/i })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /finmind/i })).toHaveAttribute('href', '/dashboard');
   });

app/src/api/accounts.ts

@@ -0,0 +1,74 @@
+import { apiClient } from './client';
+
+export type AccountType = 'checking' | 'savings' | 'credit_card' | 'investment' | 'cash' | 'loan' | 'other';
+
+export interface FinancialAccount {
+  id: string;
+  name: string;
+  type: AccountType;
+  balance: number;
+  currency: string;
+  institution: string;
+  color: string;
+  lastSyncedAt: string;
+  isPrimary: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateAccountRequest {
+  name: string;
+  type: AccountType;
+  balance: number;
+  currency?: string;
+  institution: string;
+  color?: string;
+  isPrimary?: boolean;
+}
+
+export interface UpdateAccountRequest {
+  name?: string;
+  type?: AccountType;
+  balance?: number;
+  currency?: string;
+  institution?: string;
+  color?: string;
+  isPrimary?: boolean;
+}
+
+export interface AccountsSummary {
+  totalBalance: number;
+  totalAssets: number;
+  totalLiabilities: number;
+  accountCount: number;
+  byType: Record<AccountType, { count: number; total: number }>;
+}
+
+export const getAccounts = async (): Promise<FinancialAccount[]> => {
+  const response = await apiClient.get('/accounts');
+  return response.data;
+};
+
+export const getAccount = async (id: string): Promise<FinancialAccount> => {
+  const response = await apiClient.get(`/accounts/${id}`);
+  return response.data;
+};
+
+export const createAccount = async (data: CreateAccountRequest): Promise<FinancialAccount> => {
+  const response = await apiClient.post('/accounts', data);
+  return response.data;
+};
+
+export const updateAccount = async (id: string, data: UpdateAccountRequest): Promise<FinancialAccount> => {
+  const response = await apiClient.put(`/accounts/${id}`, data);
+  return response.data;
+};
+
+export const deleteAccount = async (id: string): Promise<void> => {
+  await apiClient.delete(`/accounts/${id}`);
+};
+
+export const getAccountsSummary = async (): Promise<AccountsSummary> => {
+  const response = await apiClient.get('/accounts/summary');
+  return response.data;
+};

app/src/components/layout/Navbar.tsx

@@ -8,8 +8,11 @@ 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: 'Savings', href: '/savings-goals' },
+  { name: 'Weekly', href: '/weekly-summary' },
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
   { name: 'Analytics', href: '/analytics' },