Back to portfolio
Finance Dashboard logoPersonal finance

Finance Dashboard

Finance app experience with accounts, budgets, loading/error handling, and financial management surfaces.

ReactViteFinanceDashboard

The finance app is a strict MVP personal finance tracker with mock APIs and backend-ready contracts. It covers authentication, onboarding, dashboard analytics, accounts, transactions, categories, budgets, recurring bills, subscriptions, savings goals, reports, insights, cash flow, net worth, notifications, profile, settings, import/export, bank connections, and support.

The documented routes are protected behind an authenticated app shell, with dynamic routes for account details, transactions, budgets, recurring bills, subscriptions, and savings goals. The presentation below reflects that full scope rather than only the dashboard screenshots.

Presentation

Mockups

HadiFinance light overview mockup
HadiFinance dark analytics mockup
HadiFinance budgets and goals mockup
HadiFinance budget control mockup
HadiFinance reports and cashflow mockup
HadiFinance insights and reports mockup
Details

App presentation

User App

Accounts, budgets, dashboard states, and personal finance flows.

A personal finance workspace for users who need one place to track cash flow and financial commitments. The app includes mock authentication, onboarding preferences, KPI dashboard, account details, transaction CRUD, category management, budget management, recurring bill management, subscription management, savings goal tracking, reports, insight cards, cash-flow analytics, net-worth views, notifications, profile editing, preferences, import/export placeholders, bank connection placeholders, and help/support.

  • Authentication routes include login, register, forgot password, reset password, and session-based protected routes.
  • Onboarding captures goal selection, currency, initial account preferences, and category/budget prompts.
  • Dashboard includes balance, income, expenses, cash-flow KPI cards, trend charts, top categories, recent transactions, and quick actions.
  • Transaction routes support list, search, filter, sort, create, edit, details, and delete with confirm dialogs.
  • Budgets, recurring bills, subscriptions, and savings goals all include create/edit/delete-style management flows with progress or breakdown visualization.
  • Reports, insights, cash flow, and net worth routes provide analytical views beyond simple bookkeeping.
  • Settings support currency, locale, date format, notification preferences, and light/dark/system theme selection.

Setup And Access

  • Public auth routes handle login, register, forgot password, and reset password in mock-safe form.
  • Protected `/app/*` routing sends authenticated users into the main app layout.
  • Onboarding collects finance goals, currency, initial account setup, and budget/category preferences.
  • Unknown routes currently redirect to login, with dedicated unauthorized/not-found pages planned.

Money Tracking

  • Accounts module lists balances, account details, account-level trend visualization, and account transaction subsets.
  • Transactions module includes search, filters, sorting, creation, editing, details, and deletion confirmation.
  • Categories module supports category listing, creation, and category distribution visualization.
  • Mock API mode switching allows default and empty states for showcase and testing scenarios.

Planning Modules

  • Budgets include list, create, view/edit, delete, progress, and usage indicators.
  • Recurring bills include list, create/edit, and delete workflows.
  • Subscriptions include list, create/edit, delete, and category cost breakdown charts.
  • Savings goals include list, create/edit, delete, and progress tracking.

Analytics

  • Reports support month, year, and custom period filters plus account/category filters.
  • Insights route presents health and warning-style cards.
  • Cash-flow and net-worth routes provide higher-level financial summaries and charts.
  • Dashboard combines KPIs, trends, top categories, recent transactions, and quick actions for at-a-glance review.

System Modules

  • Notifications can be filtered and marked read individually or in bulk.
  • Profile and settings include identity updates, currency, locale, date format, notification preferences, and theme mode.
  • Import/export and bank-connections routes are mock-first placeholders for future integrations.
  • Responsive layout includes desktop/mobile navigation, drawer behavior, reusable dialogs, and feedback primitives.