DemoBuy

Dashboard & Transactions

Last updated on 2026-04-05

The dashboard is the landing page of the finance app. It gives users a comprehensive snapshot of their financial health with customizable widgets. The transactions page provides a full ledger for viewing, filtering, and managing all financial transactions.

Dashboard

Route: /dashboard

The dashboard combines stat cards, multiple chart types, and list widgets in a customizable grid layout. Users can switch between four layout presets and toggle individual widgets on or off.

Layout Presets

The dashboard toolbar offers four presets via a Zustand-powered layout store:

Preset Description
Full View All widgets visible -- the complete financial overview
Minimalist Essential stats and charts only
Business Business-focused metrics (P&L, cash flow, merchants)
Personal Personal finance focus (budgets, goals, savings) 
import { useLaoutStore } from "@/lib/stores/use-layout-store"

const { widgets, activePreset, applyPreset } = useLaoutStore()

Primary Stat Cards

Four StatCard components across the top row, each showing a metric with a sparkline and trend badge:

Stat Example Value Description
Net Worth $45,230 Total assets minus liabilities
Income $8,450 Monthly income
Expenses $5,120 Monthly expenses
Savings Rate 39.4% Percentage of income saved 
import StatsGrid from "@/components/dashboard/stats-grid"

<StatsGrid stats={primaryStats} visibleIds={visible} />

Secondary Stat Cards

Three compact stat cards below the primary row:

Stat Accent Color Description
Cash Flow Emerald Net cash flow (inflow minus outflow)
Pending Amber Pending transactions count or value
Upcoming Bills Blue Next bill payment amount

Income vs Expense Chart

A Recharts BarChart showing monthly income versus expenses over the past 6-12 months. Spans the full width of the grid.

import IncomeExpenseChart from "@/components/dashboard/income-expense-chart"

<IncomeExpenseChart data={incomeExpenseData} />

Spending Donut

A Recharts PieChart (donut style) breaking down spending by category. Each slice uses the category's configured color.

import SpendingDonut from "@/components/dashboard/spending-donut"

<SpendingDonut data={categorySpending} />

Cash Flow Timeline

A Recharts AreaChart showing daily or weekly inflow, outflow, and net cash flow over time.

import CashFlowChart from "@/components/dashboard/cash-flow-chart"

<CashFlowChart data={cashFlowData} />

Net Worth Chart

A Recharts chart tracking assets, liabilities, and net worth over time with milestone markers.

import NetWorthChart from "@/components/dashboard/net-worth-chart"

<NetWorthChart data={netWorthData} />

Expense Heatmap

A calendar-style heatmap showing daily spending intensity. Each day is color-coded by spending level (0-4 scale), similar to a GitHub contribution graph.

import ExpenseHeatmap from "@/components/dashboard/expense-heatmap"

<ExpenseHeatmap data={expenseHeatmap} />

Additional Widgets

Widget Description
Budget Progress Category budget bars with spent vs remaining
Savings Progress Goal progress summary with progress rings
Asset Allocation Account type distribution (checking, savings, investment, credit)
Top Merchants Most-frequent and highest-spending merchants
Recent Transactions Latest 10 transactions with amount and category
Bills Due Upcoming bill payments with due dates
Budget Alerts Categories approaching or exceeding budget limits
Largest Expenses Biggest recent expenses by amount
Subscriptions Active recurring subscriptions with monthly cost

Widget Picker

The WidgetPicker component lets users toggle individual widget visibility:

import WidgetPicker from "@/components/dashboard/widget-picker"

<WidgetPicker>
  <Button variant="outline" size="sm">Customize</Button>
</WidgetPicker>

Dashboard Layout

+---------------------------------------------------------+
| Greeting + Layout Presets + Customize Button             |
+---------------------------------------------------------+
| Net Worth    | Income       | Expenses     | Savings Rate|
| (stat card)  | (stat card)  | (stat card)  | (stat card) |
+-----------+-----------+----------------------------------+
| Cash Flow | Pending   | Upcoming Bills                   |
+-----------+-----------+----------------------------------+
| Income vs Expense Chart (full width)                     |
+----------------------------+-----------------------------+
| Spending Donut             | Budget Progress             |
+----------------------------+-----------------------------+
| Cash Flow Timeline (full width)                          |
+----------------------------+-----------------------------+
| Net Worth Chart (full width)                             |
+----------------------------+-----------------------------+
| Expense Heatmap (full width)                             |
+----------------------------+-----------------------------+
| Savings Progress           | Asset Allocation            |
+----------------------------+-----------------------------+
| Top Merchants              |                             |
+----------------------------+-----------------------------+
| Recent Transactions (full width)                         |
+----------------------------+-----------------------------+
| Bills Due                  | Budget Alerts               |
+----------------------------+-----------------------------+
| Largest Expenses           | Subscriptions               |
+---------------------------------------------------------+

Transactions

Route: /transactions

The transactions page provides a full-featured ledger for viewing and managing all financial activity.

Transaction Filters

A filter bar with multiple criteria:

  • Search -- filter by description, merchant name, or tags
  • Category -- filter by spending/income category
  • Account -- filter by linked bank account
  • Status -- filter by cleared, pending, or reconciled
  • Amount range -- filter by minimum and maximum absolute amount
import { TransactionFilters } from "@/components/transactions/transaction-filters"

<TransactionFilters onFilterChange={setFilters} />

Transaction Table

A sortable table displaying all filtered transactions:

Column Description
Date Transaction date
Description Transaction description and merchant
Category Category chip with icon and color
Account Linked bank account
Amount Signed amount (green for income, red for expense)
Status Cleared, pending, or reconciled badge

Click any row to open the transaction detail sheet.

import { TransactionTable } from "@/components/transactions/transaction-table"

<TransactionTable
  transactions={filtered}
  categories={categories}
  accounts={accounts}
  onRowClick={handleRowClick}
/>

Transaction Detail Sheet

A slide-out sheet displaying full transaction details including merchant, category, account, amount, status, notes, tags, and whether the transaction is recurring.

import { TransactionDetailSheet } from "@/components/transactions/transaction-detail-sheet"

<TransactionDetailSheet
  transaction={selectedTxn}
  open={detailOpen}
  onOpenChange={setDetailOpen}
  categories={categories}
  accounts={accounts}
/>

Add Transaction Dialog

A dialog form for manually adding a new transaction with fields for description, merchant, amount, category, account, date, status, and notes.

import { AddTransactionDialog } from "@/components/transactions/add-transaction-dialog"

<AddTransactionDialog />

Data Sources

Data Source Location
Dashboard stats dashboardStats data/seed.ts
Income/expense trend incomeExpenseData data/seed.ts
Category spending categorySpending data/seed.ts
Cash flow data cashFlowData data/seed.ts
Net worth data netWorthData data/seed.ts
Top merchants topMerchants data/seed.ts
Expense heatmap expenseHeatmap data/seed.ts
Transactions transactions data/seed.ts
Categories categories data/seed.ts
Accounts accounts data/seed.ts
Budgets budgets data/seed.ts
Bills bills data/seed.ts
Goals goals data/seed.ts

Next Steps

Previous

Project Structure

Next

Accounts & Budgets