A modern and responsive Finance Dashboard UI built for a frontend assessment.
It helps users view financial summary data, explore transactions, analyze spending patterns, and switch between simulated user roles on the frontend.
- Financial summary cards for Total Balance, Income, and Expenses
- Time-based visualization for balance trend
- Categorical visualization for spending breakdown
- Transactions section with:
- search
- filtering
- sorting
- Simulated role-based UI
- Viewer: can view dashboard data
- Admin: intended for transaction management interactions
- Insights section with useful financial observations
- Responsive and clean dashboard layout
- Dark-themed modern UI
- React
- Vite
- JavaScript
- CSS
- Chart.js
finance-dashboard/
├── public/
├── src/
│ ├── components/
│ ├── context/
│ ├── data/
│ ├── utils/
│ ├── App.jsx
│ └── main.jsx
├── package.json
└── vite.config.jsgit clone https://github.com/manishpxl/finance-dashboard.gitcd finance-dashboardnpm installnpm run devThis project was built with a focus on:
- clean UI design
- readable component structure
- frontend state handling
- simple role-based interaction
- responsive dashboard experience
The dashboard uses mock/static data and does not depend on a backend, which matches the assignment requirements.
- Dashboard Overview
- Transactions Section
- Basic Role-Based UI
- Insights Section
- State Management
- Responsive UI
- Clean UX
- Local storage persistence
- Export transactions as CSV/JSON
- Advanced date filtering
- Editable transactions for Admin mode
- More financial insights and analytics
Manish Kumar
This project is created for assessment and portfolio purposes.