Skip to main content
The Dashboard is your financial command center, providing an at-a-glance view of your net worth, accounts, spending patterns, and recent transactions.

​
Overview

When you navigate to the dashboard, you’ll see:

Account Cards

Quick overview of all your accounts with balances and transaction counts

Summary Metrics

Net worth, total income, and total expenses at a glance

Interactive Charts

Visual representations of your net worth over time and spending by category

​
Account Summary Cards

At the top of your dashboard, you’ll find colorful cards representing each of your accounts:
1

View Account Details

Each card displays:
  • Account name with color indicator
  • Current balance (formatted in your local currency)
  • Total number of transactions
2

Add New Account

Click the + Account button card to create a new account
The account cards are displayed in a responsive grid that adapts from 2 columns on mobile to 5 columns on extra-large screens.

​
Financial Summary Metrics

Three key metric cards provide instant insights into your financial health:

​
Net Worth

Displays your total net worth calculated from all account balances. This is the sum of all your assets minus liabilities.
Net worth is automatically updated whenever you create, update, or delete transactions or accounts.

​
Total Income

Shows the sum of all income transactions across all your accounts. Income transactions are identified by categories marked as “income” type.

​
Total Expenses

Displays the total amount spent across all expense categories. Expenses are tracked as negative amounts internally but displayed as positive values for clarity.

​
Net Worth Chart

The interactive area chart visualizes how your net worth has changed over time.

​
Chart Capabilities

  • Smooth gradient area chart showing net worth trends
  • Interactive tooltips displaying exact values on hover
  • Zoom functionality with the toolbar
  • Date formatting showing “dd MMM yyyy” format

​
Time Range Filters

Quick-access buttons let you view different time periods:
ButtonDescription
1WLast 7 days
1MLast 30 days
6MLast 6 months
1YLast 12 months
YTDYear to date (from January 1st)
ALLAll time data
Click any time range button to instantly zoom the chart to that period. The selected button will be highlighted.

​
Spending by Category Chart

This horizontal bar chart breaks down your expenses by category, helping you identify where your money goes.

​
Chart Features

  • Distributed color scheme - Each category gets a unique color from a gradient palette
  • Sorted by amount - Categories are ordered to show your biggest spending areas
  • Responsive design - Adapts to screen size while maintaining readability
  • Interactive tooltips - Hover to see exact spending amounts
Only expense categories are included in this chart. Income and transfer categories are excluded.

​
How It Works

The chart aggregates data from all transactions: 
// Calculated in app/Charts/SpendingChart.php
$categories = Auth::user()->categories()->where('type', 'expense')->get();

foreach ($categories as $category) {
    $totalAmount = abs(Transaction::where('category_id', $category->id)->sum('amount'));
    $data[] = $totalAmount;
    $labels[] = $category->name;
}

​
Latest Transactions Panel

The right side of the dashboard features a tabbed panel showing your most recent transactions.
Shows the 5 most recent transactions across all categories, grouped by date.

​
Transaction Display

Each transaction row includes:
  • Category icon and color - Visual identification of the transaction type
  • Title and details - What the transaction was for
  • Date - When the transaction occurred
  • Amount - Transaction value in your local currency
Transactions are grouped by date (Today, Yesterday, or specific dates) for easier scanning.

​
Quick Actions

Click any transaction to navigate to its edit page where you can:
  • Modify the amount
  • Change the category or account
  • Update the title and details
  • Delete the transaction

​
Real-Time Updates

The dashboard uses HTMX for seamless updates:
  • No page reloads when navigating between tabs
  • Smooth transitions between different views
  • Automatic chart rendering on content load
The dashboard automatically re-initializes charts after HTMX updates, ensuring everything stays functional even after dynamic content changes.

​
Performance Considerations

The dashboard is optimized for speed:
  • Transactions are limited to 5 per tab
  • Charts use aggregated data rather than individual records
  • Eager loading prevents N+1 query problems
  • JavaScript initialization uses event delegation to avoid memory leaks

​
Next Steps

Manage Transactions

Add, edit, or delete transactions

Manage Accounts

Create and manage your financial accounts

Customize Categories

Set up categories with custom icons and colors

Build docs developers (and LLMs) love

Get started for freeTalk to us