Skip to main content
The Dashboard is your financial command center, providing an at-a-glance view of your income, expenses, and overall financial health.

Overview

The Dashboard aggregates all your financial data into an intuitive interface with real-time updates. It’s designed to give you immediate insights into your financial status across different time periods.
The Dashboard automatically processes recurring expenses when loaded, ensuring your data is always up-to-date.

Key Performance Indicators (KPIs)

The Dashboard displays four critical metrics at the top:

Income

Total income for the selected period, displayed in Mexican Pesos (MXN)

Expenses

Total expenses for the selected period

Net Balance

Your bottom line: income minus expenses. Color-coded green for positive, red for negative

Transactions

Total number of transactions recorded in the period

Time Period Selector

Analyze your finances across different time frames:

Preset Views

  • Daily View: Shows data for today only
  • Weekly View: Last 7 days of financial activity
  • Monthly View: Last 30 days (default view)
  • Custom Range: Select any specific date range

Using Custom Date Ranges

  1. Click the “Personalizada” (Custom) button
  2. A date picker panel appears with shortcuts
  3. Select your start date and end date
  4. Click “Aplicar” (Apply) to update the view
The selected date range is displayed prominently at the top of the Dashboard, showing both the period label and exact dates.

Trend Chart

The interactive trend chart visualizes your financial patterns over time:
  • Line chart showing income vs. expenses
  • Color-coded lines: Green for income, red for expenses
  • Responsive design adapts to all screen sizes
  • Glassmorphism design with gradient accents for modern aesthetics

Chart Features

  • Hover over data points to see exact values
  • Automatic scaling based on your data range
  • Dark mode compatible
  • Updates dynamically when you change the time period
Dashboard Trend Chart
Screenshot placeholder - shows income and expense trends over time

Transaction Table

Below the chart, view a detailed table of all transactions:

Table Features

  • Sortable columns: Click any column header to sort
  • Filtering: Filter by transaction type (income/expense)
  • Pagination: Adjustable items per page (20, 50, 100, or 500)
  • Color coding:
    • Green rows for income transactions
    • Red rows for expense transactions
  • Grouping: Transactions grouped by date period

Transaction Details

Each transaction displays:
  • Date and time
  • Type (Income or Expense)
  • Category
  • Description
  • Payment method
  • Amount (formatted in MXN)

Sorting and Filtering

  1. Sort: Click column headers to toggle ascending/descending order
  2. Filter by Type: Use the filter buttons above the table:
    • Todos (All): Show all transactions
    • Ingresos (Income): Show only income
    • Gastos (Expenses): Show only expenses
  3. Pagination: Navigate through pages or adjust items per page
The transaction count updates dynamically as you apply filters, helping you track exactly how many transactions match your criteria.

User Workflow

1

Select Time Period

Choose from Daily, Weekly, Monthly, or Custom date range to set your analysis scope
2

Review KPIs

Check the four key metrics at the top to understand your financial position at a glance
3

Analyze Trends

Use the trend chart to identify spending patterns and income fluctuations over time
4

Drill Down

Scroll to the transaction table to review individual transactions, sort by different criteria, or apply filters
5

Adjust View

Modify your time period or filters to explore different aspects of your financial data

Design Features

Visual Enhancements

  • Gradient headers: Emerald to cyan gradient for brand consistency
  • Glassmorphism effects: Frosted glass appearance with blur effects
  • Animated elements: Smooth transitions and hover effects
  • Dark mode support: Full theme compatibility

Responsive Design

The Dashboard adapts seamlessly to different screen sizes:
  • Desktop: Full grid layout with 4 KPI cards across
  • Tablet: 2-column layout for KPIs
  • Mobile: Single column stack with optimized touch targets

Best Practices

Daily Check-In: Start your day by reviewing the Dashboard to understand yesterday’s financial activity and your current position.
Use Custom Ranges: When planning budgets or reviewing specific projects, use custom date ranges to isolate relevant time periods.
The Dashboard processes recurring expenses automatically on load. This may take a few seconds if you have many recurring items due today.

Build docs developers (and LLMs) love