Skip to content

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

Open
zacharylyonstx wants to merge 1 commit intorohitdash08:mainfrom
zacharylyonstx:feat/multi-account-overview
Open

feat: Multi-account financial overview dashboard (#132)#689
zacharylyonstx wants to merge 1 commit intorohitdash08:mainfrom
zacharylyonstx:feat/multi-account-overview

Conversation

@zacharylyonstx
Copy link
Copy Markdown

Summary

Closes #132 — implements a complete multi-account financial overview dashboard allowing users to link multiple financial accounts and view a unified dashboard with aggregated data.

What Changed

Backend (packages/backend/)

  • Schema: New financial_accounts table with account_type enum (CHECKING, SAVINGS, CREDIT_CARD, INVESTMENT, LOAN, OTHER), indexed on (user_id, is_active)
  • Model: FinancialAccount SQLAlchemy model with full field mapping
  • REST API (/accounts):
    • GET / — List accounts (filterable by include_inactive)
    • POST / — Create account with validation
    • GET /:id — Get single account
    • PATCH /:id — Partial update with field-level validation
    • DELETE /:id — Delete account
    • GET /overview — Aggregated dashboard data (by type, currency, institution) with Redis caching (5min TTL)
  • All routes are JWT-protected with user-scoped data isolation
  • Comprehensive input validation with descriptive error messages
  • Cache invalidation on write operations

Frontend (app/)

  • AccountsOverview page — Full dashboard with:
    • Net worth summary card
    • Breakdown by account type (with progress bars)
    • Breakdown by institution
    • Account cards grouped by type with inline edit/delete (hover reveal)
    • Add/Edit account modal dialog with form validation
    • Empty state with call-to-action
    • Loading and error states
  • API client (api/accounts.ts) — Typed functions for all endpoints
  • Routing/accounts route added as a protected route
  • Navigation — "Accounts" link added to navbar

Tests

  • Backend (tests/test_accounts.py) — 8 test cases covering:
    • Full CRUD lifecycle
    • Create/update validation (missing fields, invalid types, bad balance)
    • 404 handling for non-existent accounts
    • Overview aggregation (by type, currency, institution)
    • Empty overview
    • Currency defaults from user preferences
    • All 6 account types
    • Inactive account filtering
  • Frontend (__tests__/AccountsOverview.integration.test.tsx) — 4 integration tests:
    • Renders accounts with summary data
    • Empty state display
    • Add account dialog flow
    • Error state on API failure

Files Changed

File Change
packages/backend/app/db/schema.sql Added financial_accounts table + index
packages/backend/app/models.py Added AccountType enum + FinancialAccount model
packages/backend/app/routes/__init__.py Registered accounts blueprint
packages/backend/app/routes/accounts.py New — Full CRUD + overview endpoint
packages/backend/tests/test_accounts.py New — 8 backend test cases
app/src/api/accounts.ts New — Typed API client
app/src/pages/AccountsOverview.tsx New — Dashboard page component
app/src/__tests__/AccountsOverview.integration.test.tsx New — 4 integration tests
app/src/App.tsx Added /accounts protected route
app/src/components/layout/Navbar.tsx Added "Accounts" nav link

Add complete multi-account management with unified dashboard view:

Backend:
- financial_accounts table with account_type enum (CHECKING, SAVINGS,
  CREDIT_CARD, INVESTMENT, LOAN, OTHER)
- FinancialAccount SQLAlchemy model
- Full CRUD REST API: list, create, get, update, delete accounts
- /accounts/overview endpoint with aggregated data (by type, currency,
  institution) with Redis caching
- Input validation and proper error handling
- JWT-protected routes with user-scoped data isolation

Frontend:
- AccountsOverview page with net worth summary card
- Breakdown cards by account type and institution with progress bars
- Account cards grouped by type with inline edit/delete
- Add/Edit account dialog with form validation
- Empty state with call-to-action
- TypeScript API client with full type definitions
- Integration tests covering CRUD, empty state, and error handling

Wiring:
- /accounts route added to React Router (protected)
- Accounts link added to navigation bar
- accounts blueprint registered in Flask app
@zacharylyonstx
Copy link
Copy Markdown
Author

@rohitdash08 Multi-account financial overview dashboard is ready — full backend CRUD with aggregation, React dashboard UI, and 12 tests. 1,114 lines. Ready for review! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Multi-account financial overview dashboard

1 participant