Reports & Settings

Last updated on 2026-04-05

The reports page provides structured financial analysis through multiple report types. The settings page lets users configure preferences, switch between color themes, and manage data exports.

Financial Reports

Route: /reports

The reports page uses a tabbed layout with three report views.

Tab Structure

Tab	Content
Overview	Monthly summary cards with income, expenses, net income, savings, and savings rate
Profit & Loss	Full P&L statement table with period selector
Balance Sheet	Assets vs liabilities breakdown with net worth

<Tabs defaultValue="overview">
  <TabsTrigger value="overview">Overview</TabsTrigger>
  <TabsTrigger value="pl">Profit & Loss</TabsTrigger>
  <TabsTrigger value="balance-sheet">Balance Sheet</TabsTrigger>
</Tabs>

Overview Tab

A grid of MonthlySummaryCard components showing key metrics for each recent month:

Each card displays:

Month label (e.g., "Jan 2026")
Income -- total income for the month
Expenses -- total expenses for the month
Net income -- income minus expenses with color coding
Savings -- amount saved
Savings rate -- percentage of income saved with visual indicator

import { MonthlySummaryCard } from "@/components/reports/monthly-summary-card"

{monthlyReports.map((report) => (
  <MonthlySummaryCard key={report.month} report={report} />
))}

Profit & Loss Tab

A detailed P&L statement rendered as a table with multiple time columns.

Report header with title, description, and period selector (YTD, last quarter, custom)
P&L table with hierarchical rows:
- Revenue section with income line items
- Expense section with category breakdowns
- Subtotals for gross income and total expenses
- Net income/loss total row
Column headers showing recent months (e.g., Nov 2025 through Apr 2026)
Row styling -- headers are bold, totals have top borders, indented rows for subcategories

import { ReportHeader } from "@/components/reports/report-header"
import { PLTable } from "@/components/reports/pl-table"

<ReportHeader
  title="Profit & Loss Statement"
  description="Revenue and expense breakdown over time."
  period={plPeriod}
  onPeriodChange={setPlPeriod}
/>
<PLTable data={plData} months={plMonths} />

Balance Sheet Tab

A snapshot of assets and liabilities at a point in time.

Report header with period selector (this month, last month, custom)
Balance sheet table with two sections:
- Assets -- checking, savings, investments, cash, property, etc.
- Liabilities -- credit cards, loans, mortgages, etc.
- Net worth -- total assets minus total liabilities

import { BalanceSheetTable } from "@/components/reports/balance-sheet-table"

<BalanceSheetTable items={balanceSheetItems} />

Report TypeScript Interfaces

interface PLRow {
  label: string
  values: number[]
  isHeader: boolean
  isTotal: boolean
  indent: number
}

interface BalanceSheetItem {
  label: string
  amount: number
  type: "asset" | "liability"
  category: string
}

interface MonthlyReport {
  month: string
  income: number
  expenses: number
  netIncome: number
  savings: number
  savingsRate: number
}

Settings

Route: /settings

The settings page uses a tabbed layout with three sections for managing application preferences.

Tab Structure

Tab	Content
General	Currency, date format, fiscal year, density preferences
Appearance	Color theme selection with live preview
Data & Export	Export functionality for financial data

<Tabs defaultValue="general">
  <TabsTrigger value="general">General</TabsTrigger>
  <TabsTrigger value="appearance">Appearance</TabsTrigger>
  <TabsTrigger value="data">Data & Export</TabsTrigger>
</Tabs>

General Settings

The SettingsForm component provides configuration for:

Currency -- select currency format (USD, EUR, GBP, etc.)
Date format -- choose date display format
Fiscal year start -- configure when the fiscal year begins (affects reports)
Finance mode -- toggle between Personal and Business modes
Display density -- comfortable or compact layout

import { SettingsForm } from "@/components/settings/settings-form"

<SettingsForm />

Appearance Settings

The ThemeSwitcher component lets users choose from 6 built-in color themes:

Theme	Hue	Description
Mint Ledger	170	Default teal theme
Midnight	250	Deep blue/indigo
Sunset	25	Warm coral/orange
Emerald	150	Rich green
Lavender	290	Soft purple
Slate	0	Neutral monochrome

Each theme includes full light and dark mode token definitions. The selected theme is applied as a CSS class on the root element.

import { ThemeSwitcher } from "@/components/settings/theme-switcher"

<ThemeSwitcher />

Data & Export

The ExportSection component provides data management tools:

Export transactions -- download transaction history as CSV
Export reports -- download financial reports
Data management -- options for data handling

import { ExportSection } from "@/components/settings/export-section"

<ExportSection />

Settings TypeScript Interface

interface AppSettings {
  currency: string
  dateFormat: string
  fiscalYearStart: number
  theme: ColorTheme // "mint" | "midnight" | "sunset" | "emerald" | "slate"
  mode: FinanceMode // "personal" | "business"
  density: "comfortable" | "compact"
}

Data Sources

Data	Source	Location
Monthly reports	`monthlyReports`	`data/seed.ts`
P&L data	`plData`	`data/seed.ts`
Balance sheet	`balanceSheetItems`	`data/seed.ts`

Next Steps

Design Tokens -- oklch color system and theme customization
Customization -- modifying the kit for your needs

Bills & Goals

Design Tokens