FinLedger — Finance Dashboard

A production-grade finance dashboard built with React + JavaScript, featuring separate component files, CSS Modules, and full state management.

---

Quick Start

npm install
npm run dev
# Visit http://localhost:5173

Build for production:

npm run build
npm run preview

---

Project Structure

src/
├── main.jsx                        # Entry point
├── App.jsx                         # Root shell — routing + layout wiring
├── App.module.css
│
├── context/
│   └── AppContext.jsx              # useReducer + localStorage persistence
│
├── data/
│   └── transactions.js            # Mock data — CATEGORIES + SEED_TRANSACTIONS
│
├── hooks/
│   └── useToast.js                # Toast notification hook
│
├── utils/
│   └── helpers.js                 # fmt, fmtShort, exportCSV, todayISO
│
├── styles/
│   └── global.css                 # CSS variables (design tokens) + resets
│
└── components/
    ├── layout/
    │   ├── Sidebar.jsx             # Navigation + role switcher
    │   ├── Sidebar.module.css
    │   ├── Topbar.jsx              # Search bar + page title + date
    │   └── Topbar.module.css
    │
    ├── shared/
    │   ├── Icon.jsx                # Inline SVG icon library
    │   ├── Toast.jsx               # Toast notification display
    │   └── Toast.module.css
    │
    ├── dashboard/
    │   ├── Dashboard.jsx           # Dashboard page — composes all sections
    │   ├── Dashboard.module.css
    │   ├── SummaryCards.jsx        # 4 metric cards (Balance/Income/Expense/Savings)
    │   ├── SummaryCards.module.css
    │   ├── TrendChart.jsx          # Area chart — 3M/6M/1Y income vs expenses
    │   ├── TrendChart.module.css
    │   ├── SpendingChart.jsx       # Donut chart — spending by category
    │   └── SpendingChart.module.css
    │
    ├── transactions/
    │   ├── TransactionsPage.jsx    # Transactions page wrapper
    │   ├── TransactionsPage.module.css
    │   ├── TransactionTable.jsx    # Sortable, filterable, paginated table
    │   ├── TransactionTable.module.css
    │   ├── AddTransactionModal.jsx # Add transaction form with validation
    │   └── AddTransactionModal.module.css
    │
    └── insights/
        ├── InsightsPage.jsx        # Insights page — bar chart + donut + cards
        ├── InsightsPage.module.css
        ├── InsightsSection.jsx     # 4 insight metric cards
        └── InsightsSection.module.css

---

Features

Dashboard

• 4 Summary Cards: Net Balance, Total Income, Total Expenses, Savings Rate
• Area Chart: 6-month income vs expenses trend (3M / 6M / 1Y toggle)
• Donut Chart: Spending by category with proportional legend bars
• Insights Panel: Top spend, savings rate, MoM comparison, avg monthly
• Recent Transactions: Full sortable/filterable table

Transactions Page

• Full table with sort on Date, Category, Amount (click column headers)
• Filter by type (Income/Expense) and by category
• Live search across description and category
• Pagination (12 rows/page)
• CSV Export of current filtered view

Role-Based UI (RBAC)

Role	Capabilities
Admin	View all data, Add transactions, Delete entries
Viewer	Read-only. No Add/Delete. Banner shown.

Switch roles via the sidebar dropdown — changes persist via localStorage.

Insights Page

• 4 key insight cards (Top Spend, Savings Rate, Month-on-Month, Avg Monthly)
• Grouped Bar Chart: Monthly income vs expenses (6 months)
• Spending Donut with category breakdown

---

State Management

• useReducer in AppContext.jsx — single source of truth for transactions + role
• localStorage persistence — data survives page refreshes
• Filters, search, pagination = local component state (no need to globalise)
• Toast notifications = local hook state

---

Tech Stack

Layer	Choice
Framework	React 18
Build Tool	Vite 5
Charts	Recharts 2.8
Styling	CSS Modules
State	useReducer + Context
Persistence	localStorage
Fonts	DM Mono + Instrument Serif + DM Sans

---

Design Approach

Aesthetic: Refined dark editorial fintech. Deep navy backgrounds, amber/gold accents, monospaced typography for all numbers.

• DM Mono for financial figures — improves number scannability
• Instrument Serif for section titles — editorial character
• CSS custom properties for the full design token system
• CSS Modules — zero class name collisions, component-scoped styles
• Staggered fadeUp animations on card entry

---

Optional Enhancements Included

• ✅ Dark theme (default)
• ✅ localStorage data persistence
• ✅ CSV export (filtered view)
• ✅ Animations and transitions
• ✅ Form validation on Add Transaction
• ✅ Fully responsive (mobile sidebar drawer)