Add multi-account overview

Author: Iineman2

README.md

@@ -62,10 +62,14 @@ See `backend/app/db/schema.sql`. Key tables:
 ## API Endpoints
 OpenAPI: `backend/app/openapi.yaml`
 - Auth: `/auth/register`, `/auth/login`, `/auth/refresh`
-- Expenses: CRUD `/expenses`
+- Expenses: CRUD `/expenses` with optional `account_id` linking
 - Bills: CRUD `/bills`, pay/mark `/bills/{id}/pay`
 - Reminders: CRUD `/reminders`, trigger `/reminders/run`
 - Insights: `/insights/monthly`, `/insights/budget-suggestion`
+- Accounts: CRUD `/accounts`, consolidated `/accounts/overview`
+
+### Multi-Account Overview
+FinMind supports user-owned financial accounts for checking, savings, credit cards, investments, loans, cash, and other balances. Create accounts with `POST /accounts`, link transactions by passing `account_id` to `/expenses`, and read `GET /accounts/overview?month=YYYY-MM` for assets, liabilities, net worth, currency groups, account type breakdown, per-account monthly income/expense activity, and recent linked transactions.
 
 ## MVP UI/UX Plan
 - Auth screens: register/login.

app/src/App.tsx

@@ -8,6 +8,7 @@ import { Dashboard } from "./pages/Dashboard";
 import { Budgets } from "./pages/Budgets";
 import { Bills } from "./pages/Bills";
 import { Analytics } from "./pages/Analytics";
+import { Accounts } from "./pages/Accounts";
 import Reminders from "./pages/Reminders";
 import Expenses from "./pages/Expenses";
 import { SignIn } from "./pages/SignIn";
@@ -67,6 +68,14 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <Accounts />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="analytics"
               element={

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Accounts } from '@/pages/Accounts';
+
+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/financial-card', () => ({
+  FinancialCard: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  FinancialCardHeader: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  FinancialCardContent: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  FinancialCardTitle: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  FinancialCardDescription: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+
+const toastMock = jest.fn();
+jest.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: toastMock }),
+}));
+
+const getAccountsOverviewMock = jest.fn();
+const createAccountMock = jest.fn();
+jest.mock('@/api/accounts', () => ({
+  getAccountsOverview: (...args: unknown[]) => getAccountsOverviewMock(...args),
+  createAccount: (...args: unknown[]) => createAccountMock(...args),
+}));
+
+describe('Accounts integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getAccountsOverviewMock.mockResolvedValue({
+      period: { month: '2026-05' },
+      summary: {
+        account_count: 2,
+        assets: 7000,
+        liabilities: 300,
+        net_worth: 6700,
+      },
+      accounts: [
+        {
+          id: 1,
+          name: 'Main Checking',
+          account_type: 'CHECKING',
+          balance: 2000,
+          currency: 'USD',
+          institution: 'Acme Bank',
+          active: true,
+          monthly_income: 3000,
+          monthly_expenses: 120,
+          monthly_net_flow: 2880,
+          transaction_count: 2,
+        },
+      ],
+      by_type: [{ account_type: 'CHECKING', count: 1, balance: 2000 }],
+      by_currency: [{ currency: 'USD', assets: 7000, liabilities: 300, net_worth: 6700 }],
+      recent_transactions: [
+        {
+          id: 10,
+          account_id: 1,
+          account_name: 'Main Checking',
+          description: 'Groceries',
+          amount: 120,
+          currency: 'USD',
+          date: '2026-05-04',
+          type: 'EXPENSE',
+        },
+      ],
+    });
+    createAccountMock.mockResolvedValue({ id: 3 });
+  });
+
+  it('renders account overview data', async () => {
+    render(<Accounts />);
+    await waitFor(() => expect(getAccountsOverviewMock).toHaveBeenCalled());
+
+    expect(screen.getByRole('heading', { name: /accounts/i })).toBeInTheDocument();
+    expect(screen.getAllByText(/main checking/i).length).toBeGreaterThan(0);
+    expect(screen.getByText(/acme bank/i)).toBeInTheDocument();
+    expect(screen.getByText(/groceries/i)).toBeInTheDocument();
+    expect(screen.getByText(/currency groups/i)).toBeInTheDocument();
+  });
+
+  it('creates an account and reloads overview', async () => {
+    const user = userEvent.setup();
+    render(<Accounts />);
+    await waitFor(() => expect(getAccountsOverviewMock).toHaveBeenCalledTimes(1));
+
+    await user.type(screen.getByLabelText(/account name/i), 'Savings');
+    await user.selectOptions(screen.getByLabelText(/account type/i), 'SAVINGS');
+    await user.clear(screen.getByLabelText(/account balance/i));
+    await user.type(screen.getByLabelText(/account balance/i), '1500');
+    await user.clear(screen.getByLabelText(/account currency/i));
+    await user.type(screen.getByLabelText(/account currency/i), 'usd');
+    await user.type(screen.getByLabelText(/account institution/i), 'Credit Union');
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    await waitFor(() =>
+      expect(createAccountMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Savings',
+          account_type: 'SAVINGS',
+          balance: 1500,
+          currency: 'USD',
+          institution: 'Credit Union',
+        }),
+      ),
+    );
+    await waitFor(() => expect(getAccountsOverviewMock).toHaveBeenCalledTimes(2));
+  });
+});

app/src/api/accounts.ts

@@ -0,0 +1,72 @@
+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 | string;
+  balance: number;
+  currency: string;
+  institution: string | null;
+  active: boolean;
+  monthly_income?: number;
+  monthly_expenses?: number;
+  monthly_net_flow?: number;
+  transaction_count?: number;
+};
+
+export type AccountsOverview = {
+  period: { month: string };
+  summary: {
+    account_count: number;
+    assets: number;
+    liabilities: number;
+    net_worth: number;
+  };
+  accounts: FinancialAccount[];
+  by_type: Array<{ account_type: string; count: number; balance: number }>;
+  by_currency: Array<{
+    currency: string;
+    assets: number;
+    liabilities: number;
+    net_worth: number;
+  }>;
+  recent_transactions: Array<{
+    id: number;
+    account_id: number;
+    account_name: string;
+    description: string;
+    amount: number;
+    currency: string;
+    date: string;
+    type: 'INCOME' | 'EXPENSE' | string;
+  }>;
+};
+
+export type NewAccount = {
+  name: string;
+  account_type: AccountType;
+  balance: number;
+  currency: string;
+  institution?: string;
+};
+
+export async function getAccountsOverview(month?: string): Promise<AccountsOverview> {
+  const query = month ? `?month=${encodeURIComponent(month)}` : '';
+  return api<AccountsOverview>(`/accounts/overview${query}`);
+}
+
+export async function createAccount(payload: NewAccount): Promise<FinancialAccount> {
+  return api<FinancialAccount>('/accounts', {
+    method: 'POST',
+    body: payload,
+  });
+}

app/src/components/layout/Navbar.tsx

@@ -12,6 +12,7 @@ const navigation = [
   { name: 'Bills', href: '/bills' },
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
+  { name: 'Accounts', href: '/accounts' },
   { name: 'Analytics', href: '/analytics' },
 ];