Accounts & Budgets

The accounts page manages all connected financial accounts and displays a consolidated net worth. The budgets page tracks spending against category budgets with visual progress indicators and monthly history.

Accounts

Route: /accounts

The accounts page provides a centralized view of all financial accounts with a prominent net worth calculation.

Net Worth Hero Card

A centered hero card at the top of the page showing:

• Net worth -- total assets (checking, savings, investment, cash) minus total liabilities (credit, loan)
• Account count -- number of connected accounts
• Color coding -- green for positive net worth, red (destructive) for negative

const assetTypes = new Set(["checking", "savings", "investment", "cash"])

const totalAssets = accounts
  .filter((a) => assetTypes.has(a.type))
  .reduce((sum, a) => sum + a.balance, 0)

const totalLiabilities = accounts
  .filter((a) => !assetTypes.has(a.type))
  .reduce((sum, a) => sum + Math.abs(a.balance), 0)

const netWorth = totalAssets - totalLiabilities

Account List

The AccountList component groups accounts by type and displays each with its details:

Account Type	Description
Checking	Everyday bank accounts for daily spending
Savings	Savings accounts and high-yield deposits
Credit	Credit cards with negative balances (liabilities)
Investment	Brokerage, retirement, and investment accounts
Loan	Outstanding loans and mortgages
Cash	Cash on hand

Each AccountCard displays:

• Account name and institution
• Last four digits of account number
• Current balance with currency formatting
• Account color for visual identification
• Last synced timestamp
• Active status indicator

import { AccountList } from "@/components/accounts/account-list"
import { AccountCard } from "@/components/accounts/account-card"

<AccountList accounts={accounts} />

Add Account Dialog

A dialog form for adding a new financial account with fields for account name, institution, type, last four digits, initial balance, and color selection.

import { AddAccountDialog } from "@/components/accounts/add-account-dialog"

<AddAccountDialog />

Account TypeScript Interface

interface Account {
  id: string
  name: string
  institution: string
  type: AccountType // "checking" | "savings" | "credit" | "investment" | "loan" | "cash"
  lastFour: string
  balance: number
  currency: string
  lastSynced: string
  isActive: boolean
  color: string
}

Budgets

Route: /budgets

The budgets page tracks spending against configurable category budgets with visual progress bars and historical comparison.

Summary Cards

Three summary stat cards across the top:

Card	Description
Total Budget	Sum of all category budget amounts
Total Spent	Sum of all spending across budgeted categories
Remaining	Budget minus spent, with color coding (green if under budget, amber at 70%+, red at 90%+)

The overall percentage is displayed alongside the Total Spent card for a quick health check.

const totalBudget = budgets.reduce((sum, b) => sum + b.amount, 0)
const totalSpent = budgets.reduce((sum, b) => sum + b.spent, 0)
const remaining = totalBudget - totalSpent
const overallPct = totalBudget > 0 ? (totalSpent / totalBudget) * 100 : 0

Budget Overview

The BudgetOverview component renders a grid of BudgetCard components, one per category budget:

Each BudgetCard shows:

• Category name with icon and color chip
• Progress bar showing spent vs budget
• Amount labels -- spent amount and budget limit
• Percentage indicator with color-coded status
• Monthly history chart -- a mini chart showing spending vs budget over recent months
• Rollover indicator -- whether unused budget rolls to the next period

import { BudgetOverview } from "@/components/budgets/budget-overview"
import { BudgetCard } from "@/components/budgets/budget-card"

<BudgetOverview budgets={budgets} categories={categories} />

Add Budget Dialog

A dialog form for creating a new budget with fields for category selection, budget amount, period (weekly, monthly, annual), and rollover toggle.

import { AddBudgetDialog } from "@/components/budgets/add-budget-dialog"

<AddBudgetDialog />

Budget TypeScript Interface

interface Budget {
  id: string
  categoryId: string
  amount: number
  spent: number
  period: BudgetPeriod // "weekly" | "monthly" | "annual"
  rollover: boolean
  monthlyHistory: { month: string; spent: number; budget: number }[]
}

Data Sources

Data	Source	Location
Accounts	accounts	data/seed.ts
Budgets	budgets	data/seed.ts
Categories	categories	data/seed.ts

Next Steps

• Bills & Goals -- recurring payments and savings goals
• Reports & Settings -- financial reports and preferences