Financial Dashboard

Looking for a fully working, production-ready financial dashboard with Sankey diagrams and anomaly detection? Check out Ledger Sync -- Transform messy Excel bank statements into beautiful financial dashboards.

A comprehensive, modern financial dashboard built with React that provides powerful analytics, AI-style insights, and visualizations for personal finance management. Upload your financial data and gain deep insights into your spending patterns, income sources, financial health, investments, tax planning, and lifestyle optimization.

Demo

Live Demo

Quick Start: Just export your Money Manager backup to Excel and upload it on this link UI - you'll get comprehensive financial insights instantly!

📸 Screenshots

Upload your financial data and watch your dashboard come to life with interactive charts, smart insights, and comprehensive analytics.

✨ Features

🆕 NEW: TypeScript Migration v0.5.0

Full TypeScript Support: Enhanced type safety and developer experience
Strict Mode: Robust error checking and improved code quality
Modern Architecture: Updated codebase using latest React patterns
Zero Runtime Errors: Significantly improved stability and reliability

🏗️ Refactored Architecture v0.4.0

Clean Folder Structure: Modular organization by feature and concern
Single Source of Truth: All financial calculations centralized in lib/calculations
No Duplicates: Clean, maintainable codebase with zero duplicate calculation logic
SonarQube Compliant: All code quality warnings resolved
Optimized Performance: Efficient calculations reused across all components
Easy to Extend: Add new features in isolated, focused modules

📊 Advanced Financial Management

📈 Investment Performance Tracker: Stock market P&L, brokerage fees, returns, and actionable insights
📋 Tax Planning Dashboard: Income tax calculations, deductions (80C, HRA), tax slab breakdown, saving recommendations
👨‍👩‍👧 Family & Housing Manager: Family expenses, rent payments, utilities, HRA benefits
💳 Lifestyle Optimizer: Credit card analytics, cashback tracking, food spending, commute cost analysis

📊 Comprehensive Analytics

KPI Overview: Total income, expenses, net balance, transaction counts, and advanced financial health metrics
Account Balances: Real-time view of all account balances
Transfer Tracking: Monitor internal money movements between accounts
Advanced Metrics: Savings rate, spending velocity, burn rate, and category concentration

📈 Rich Visualizations

Income vs Expense Breakdown (Doughnut Chart)
Top Expense Categories (Bar Chart) - with time filtering
Income Sources Analysis (Bar Chart) - with time filtering
Spending by Account (Doughnut Chart)
Monthly Trends (Line Chart) - with time filtering
Daily Spending Patterns (Bar Chart)
Subcategory Analysis with drill-down capabilities
Investment P&L Charts: Cumulative profit/loss tracking over time
Tax Breakdown: Visual representation of tax slabs and deductions
Food & Transport Trends: Monthly spending patterns and optimization opportunities

🕒 Time-Based Analysis

Enhanced Top Categories: Monthly, yearly, and all-time views for expenses and income
Enhanced Monthly Trends: Yearly, last 12 months, and all-time views
Enhanced Subcategory Breakdown: Monthly, yearly, and decade views
Multi-Category Time Analysis: Compare spending across categories over time
Interactive Navigation: Navigate through different time periods
Trend Identification: Spot patterns and seasonal variations

🔍 Data Management

CSV & Excel Upload: Easy data import functionality for both CSV and Excel files (.xlsx, .xls)
Smart Parsing: Handles quoted fields and various file formats
Data Filtering: Search and filter transactions
Sorting & Pagination: Organized transaction table with sorting capabilities
Export Charts: Download visualizations as PNG images

💼 Transaction Types Support

Income: Track all income sources
Expenses: Monitor spending across categories
Transfers: Handle internal account transfers
Categorization: Organize transactions with categories and subcategories

🏗️ Architecture

Clean Modular Structure

src/
├── app/
│   └── App.js                        # Main application component
├── pages/                            # Page-level components
│   ├── OverviewPage/
│   ├── AdvancedAnalyticsPage/
│   ├── CategoryAnalysisPage/
│   ├── IncomeExpensePage/
│   ├── PatternsPage/
│   ├── TransactionsPage/
│   └── TrendsForecastsPage/
├── features/                         # Feature modules
│   ├── analytics/                    # Advanced analytics components
│   │   ├── components/
│   │   └── hooks/
│   ├── budget/                       # Budget & goals features
│   │   ├── components/
│   │   └── utils/
│   ├── charts/                       # Chart components & logic
│   │   ├── components/
│   │   └── hooks/
│   ├── kpi/                          # KPI cards & metrics
│   │   ├── components/
│   │   └── hooks/
│   └── transactions/                 # Transaction management
│       └── components/
├── components/                       # Shared UI components
│   ├── data-display/                 # Charts, health scores, calendars
│   ├── errors/                       # Error boundaries
│   ├── import-export/                # CSV/Excel import
│   ├── layout/                       # Header, footer
│   └── ui/                          # Reusable UI elements
├── lib/                             # Core libraries
│   ├── calculations/                # Financial calculation engine
│   │   ├── aggregations/            # Averages, totals, categories
│   │   ├── financial/               # Financial calculations
│   │   ├── time/                    # Date range calculations
│   │   ├── index.js                 # Main calculation exports
│   │   └── legacy.js                # Backward compatibility
│   ├── analytics/                   # Analytics utilities
│   │   ├── forecasts.js
│   │   ├── insights.js
│   │   ├── trends.js
│   │   └── healthScore.js
│   ├── charts/                      # Chart utilities
│   └── data/                        # Data processing & validation
├── contexts/                        # React contexts
│   └── DataContext.js
├── hooks/                           # Custom React hooks
│   ├── useDataProcessor.js
│   └── useDebouncedValue.js
├── utils/                           # General utilities
│   ├── accessibility.js
│   ├── localStorage.js
│   ├── logger.js
│   └── performance.js
├── config/                          # Configuration files
│   ├── overview.js
│   └── tabs.js
├── constants/                       # App constants
│   └── index.js
└── styles/                          # Global styles
    └── index.css

Key Principles

✅ Feature-Based Structure: Organize code by feature, not by file type
✅ Separation of Concerns: Pages, features, components, and libraries are clearly separated
✅ Single Responsibility: Each module and function does one thing well
✅ No Duplicates: Same calculation or component never written twice
✅ Easy to Test: Pure functions with predictable outputs
✅ Easy to Extend: Add new features without breaking existing ones
✅ Code Quality: SonarQube compliant with proper error handling and logging

🎯 Key Features in Detail

Investment Performance Tracker 📈

Comprehensive stock market analysis:

P&L Tracking
- Total deposits and withdrawals
- Realized profits and losses
- Net profit/loss with return percentage
- Cumulative P&L chart over time
Brokerage Analysis
- Total fees paid
- Fee percentage of invested amount
- Optimization recommendations
Investment Insights
- Win/loss ratio calculation
- Tax loss harvesting opportunities
- Strategy recommendations based on performance
- Recent transaction history

Tax Planning Dashboard 📋

Complete income tax planning (FY 2025-26):

Income Analysis
- Salary, bonus, and other income breakdown
- Gross vs taxable income comparison
- Visual income distribution
Deductions Tracking
- 80C investments (₹1.5L limit) with progress bar
- HRA exemption calculation
- Standard deduction (₹50,000)
- Professional tax
Tax Calculation
- New tax regime slab-wise breakdown
- Effective tax rate calculation
- Post-tax income projection
- Year-end tax estimate
Recommendations
- Tax-saving investment suggestions
- Unutilized deduction alerts
- Optimization opportunities

Family & Housing Manager 👨‍👩‍👧‍👦

Track family and housing expenses:

Family Expenses
- Total family support tracking
- Monthly average calculations
- Subcategory breakdown
- Top expense identification
Housing Costs
- Rent payment history
- Utility bills tracking
- Monthly housing trends
- HRA tax benefit calculation
Insights
- Spending patterns over time
- Budget recommendations
- Tax benefit alerts

Lifestyle Optimizer 💳

Optimize daily spending:

Credit Card Analytics
- Card-wise spending breakdown
- Total Cashback Earned: Sum of all cashback income
- Cashback Shared: Expenses and transfers from "Cashback Shared" account
- Actual Cashback: Total Earned - Shared (what you actually kept)
- Cashback rate calculation
- Category-wise card usage
- Card optimization tips
Food Spending
- Delivery apps vs groceries
- Office cafeteria spending
- Dining out costs
- Daily food average
- Monthly trends and savings opportunities
Transportation
- Daily commute costs
- Intercity travel expenses
- Per-trip averages
- Alternative suggestions (bike, monthly pass)
Reimbursements
- Total Reimbursements: Sum of all expense reimbursement income
- Average reimbursement amount
- Monthly reimbursement trends
- Recent reimbursement activity

Financial Health Metrics

6 Advanced KPI Cards that give you instant insights:

Savings Rate 🐷
- Shows: (Income - Expense) / Income × 100
- Color-coded: Green (≥20%), Yellow (≥10%), Red (<10%)
- Example: "23.5% - Excellent! 🎉"
Daily Spending Rate 🔥
- Shows: Average money spent per day
- Helps understand your daily burn rate
- Example: "₹485.50/day"
Monthly Burn Rate 📅
- Shows: Projected monthly expenses
- Useful for monthly budgeting
- Example: "₹14,750/month"
Net Worth Change 📈
- Shows: Total wealth change over period
- Color-coded: Green (positive), Red (negative)
- Example: "+₹15,250 (+₹5,000/month) ↑"
Spending Velocity (30-day) ⚡
- Shows: If you're spending more/less than usual
- Early warning system for budget overruns
- Color-coded: Red (>120%), Yellow (80-120%), Green (<80%)
- Example: "115% ↑ Above average"
Top Category Concentration 🎯
- Shows: Which category dominates your spending
- Warns if >50% (over-concentration risk)
- Example: "Food - 45% of spending ⚠️"

Smart Insights & Recommendations

AI-style personalized financial advice that includes:

💰 Savings Opportunities: Identifies potential savings from delivery apps, cafeteria spending, and recurring expenses
📊 Pattern Detection: Analyzes weekend vs weekday spending, high-frequency categories, and unusual transactions
🎉 Achievements: Celebrates your good financial behaviors
⚠️ Warnings: Alerts you to concerning patterns or low savings rates
🕐 Time Filtering: Filter insights by year and month to analyze specific periods
🎯 Priority System: High-priority insights shown first for immediate action

Example Insights:

"You order food 4.2x/week (avg ₹350/order). Reducing by 30% could save ₹52,416/year"
"You spend 68% more on weekends vs weekdays - consider planning weekend activities better"
"You're saving 28.5% of your income - that's excellent! Keep it up!"

Running Balance Tracking

See exactly how your balance changes over time:

Chronological View: Transactions sorted by date with cumulative balance
All Transaction Types: Handles income (+), expenses (-), and transfers
Color Coding: Green for positive, Red for negative balances
Historical Analysis: Track exactly when you went positive or negative
Visual Impact: See the immediate effect of large expenses

Example:

Date    | Amount     | Type    | Running Balance
--------|------------|---------|------------------
Jan 1   | ₹50,000    | Income  | ₹50,000 (Positive)
Jan 5   | -₹12,000   | Expense | ₹38,000 (Positive)
Jan 10  | ₹60,000    | Income  | ₹98,000 (Positive)

🚀 Quick Start

Prerequisites

Node.js 20.x or higher
pnpm 9.x or higher (recommended) or npm

Note: This project uses pnpm for faster installs and better disk space usage. Install pnpm: npm install -g pnpm

Installation

Clone the repository

git clone https://github.com/Sagargupta16/Financial-Dashboard.git
cd Financial-Dashboard

Install dependencies
```
pnpm install
```
Start the development server
```
pnpm start
```
Open your browser

Navigate to http://localhost:3000

🪝 Git Hooks with Husky

This project uses Husky for Git hooks to maintain code quality automatically:

What is Husky? Husky is a tool that makes Git hooks easy. It runs scripts before certain Git actions (like commit or push) to ensure code quality.

Pre-commit Hook (.husky/pre-commit):

✅ Automatically runs ESLint on staged files
✅ Automatically formats code with Prettier
✅ Prevents commits if there are linting errors
✅ Ensures consistent code style across the team

Benefits:

No more "fix lint errors" commits
Consistent formatting across all developers
Faster CI/CD pipelines (fewer failed builds)
Higher code quality in the repository

The hook configuration uses lint-staged to only check files you're actually committing.

📋 Data Format (CSV & Excel)

Your CSV or Excel file should follow this format:

Date,Time,Accounts,Category,Subcategory,Note,INR,Income/Expense
01/01/2024,10:30:00,Bank Account,Food,Groceries,Weekly shopping,2500,Expense
01/01/2024,14:15:00,Savings Account,Salary,Basic Salary,Monthly salary,50000,Income

Supported File Types:

.csv - Comma-separated values
.xlsx - Excel workbook format
.xls - Legacy Excel format

Required Columns

Date: DD/MM/YYYY format
Time: HH:MM:SS format
Accounts: Account name (e.g., "Bank Account", "Credit Card")
Category: Transaction category (e.g., "Food", "Transport", "Salary")
Subcategory: Optional subcategory for detailed tracking
Note: Transaction description or notes
INR: Amount in Indian Rupees (can include ₹ symbol and commas)
Income/Expense: Transaction type ("Income", "Expense", "Transfer-In", "Transfer-Out")

🛠️ Technology Stack

Core Technologies

React 19.1.1: Modern UI framework
Chart.js 4.5.0: Powerful charting library
react-chartjs-2: React wrapper for Chart.js
TailwindCSS 3.4: Utility-first CSS framework
Lucide React: Icon library
xlsx: Excel file parsing

Build & Development

Create React App: Zero-configuration setup
ESLint: Code quality and linting
PropTypes: Runtime type checking
pnpm: Fast, disk space efficient package manager
Husky: Git hooks for code quality

Browser Support

Modern browsers (Chrome, Firefox, Safari, Edge)

📁 Project Structure

src/
├── app/                   # Main application entry
├── pages/                 # Page-level components for routing
├── features/              # Feature modules (analytics, budget, charts, kpi, transactions)
├── components/            # Shared UI components (data-display, errors, import-export, layout, ui)
├── lib/                   # Core libraries (calculations, analytics, charts, data)
├── contexts/              # React contexts (DataContext)
├── hooks/                 # Custom React hooks
├── utils/                 # General utilities (logger, localStorage, performance)
├── config/                # Configuration files
├── constants/             # Application constants
└── styles/                # Global styles

🎯 Available Scripts

pnpm start          # Start development server
pnpm build          # Build for production
pnpm test           # Run test suite
pnpm lint           # Run ESLint
pnpm lint:fix       # Fix ESLint issues
pnpm format         # Format code with Prettier

🔧 Configuration

Currency Format

Update the formatCurrency function in src/shared/utils/dataUtils.js to change currency:

export const formatCurrency = (value) => {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR", // Change as needed
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
};

Custom Themes

Modify the color scheme in tailwind.config.js or update the CSS classes in components.

📐 Formulas & Calculations Reference

This dashboard uses a comprehensive set of financial calculations. All formulas are centralized in src/lib/calculations/ for consistency and maintainability.

Core Financial Metrics

1. Total Income

Total Income = Sum of all transactions where type = "Income"

Location: src/lib/calculations/aggregations/totals.js

2. Total Expense

Total Expense = Sum of all transactions where type = "Expense"

Location: src/lib/calculations/aggregations/totals.js

3. Net Balance (Savings)

Net Balance = Total Income - Total Expense

Location: src/lib/calculations/financial/savings.js

4. Savings Rate

Savings Rate = ((Total Income - Total Expense) / Total Income) × 100

Interpretation:

≥20%: Excellent 🎉 (Green)
≥10%: Good 👍 (Yellow)
<10%: Needs Improvement ⚠️ (Red)

Location: src/lib/calculations/financial/savings.js

Spending Analysis

5. Daily Average Spending

Daily Average = Total Expense / Number of Days in Period

Location: src/lib/calculations/aggregations/averages.js

6. Monthly Average Spending

Monthly Average = (Total Expense / Number of Days) × 30.44

Note: 30.44 is the average number of days per month (365.25 / 12)

Location: src/lib/calculations/aggregations/averages.js

7. Average Transaction Value

Average Transaction = Total Transaction Amount / Number of Transactions

Location: src/lib/calculations/aggregations/averages.js

8. Spending Velocity (30-day)

Spending Velocity = (Last 30 Days Daily Average / All-Time Daily Average) × 100

Interpretation:

<80%: Spending less than usual (Green)
80-120%: Normal spending range (Yellow)
120%: Spending more than usual (Red)

Location: src/features/kpi/hooks/useCalculations.js