Skip to main content

Finance Dashboard Command

Generate a modern HTML dashboard visualizing financial data.

Arguments​

  • $1: Directory containing CSV and graph assets

Input Files​

  • normalized_*.csv - Individual account transactions
  • agentic_merged_transactions.csv - Combined transactions
  • assets/*.png - Generated graphs

Output​

  • index.html - Single-page dashboard with embedded styles

Design System​

Visual Style​

Modern, minimalist fintech aesthetic:

  • Layout: Card-based bento grid with whitespace
  • Colors:
    • Background: soft gray (#F5F7FA)
    • Cards: white (#FFFFFF)
    • Positive: emerald green (#10B981)
    • Negative: coral red (#EF4444)
  • Typography: Large bold numbers (48-64px), clean sans-serif
  • Cards: Rounded corners (16-24px), subtle shadows

Dashboard Sections​

  1. Header - Title, date range
  2. Summary Metrics - Income, Expenses, Net Cash Flow, Count
  3. Graphs Section - Two-column grid of visualizations
  4. Category Treemap - CSS-based spending visualization
  5. Transactions Table - Sortable, all transactions

Workflow​

  1. Read directory path from $1
  2. Load CSV data and compute summaries
  3. Find PNG files in assets/
  4. Generate HTML with embedded CSS
  5. Write to index.html
  6. Stop hook validates HTML structure

Usage​

/finance-dashboard data/january/