finance-dashboard

💰 FinSight – Finance Dashboard UI

A clean, responsive, and interactive Finance Dashboard built using HTML,CSS,Javascript. This project focuses on intuitive UI design, structured components, and smooth user interactions for managing financial data.

🚀 Live Demo

https://yaminimanda28.github.io/finance-dashboard/

📌 Features

🔐 Authentication

Login page UI
Simple navigation flow into dashboard

📊 Overview Dashboard

Summary cards (Revenue, Expenses, Balance)
Visual representation using charts
Quick navigation to other sections

💳 Transactions Manager

View all transactions in a structured table
Search functionality
Filter and sort UI (with drawer + modal)
Add / Edit transactions via drawer
Status indicators (Completed, Pending, Failed)
Pagination support

📈 Insights & Analytics

Key financial metrics
Insight cards with performance indicators
Clean and minimal layout

👥 Role-Based Access

Admin / Manager / Viewer roles
Restricted actions based on role:
- Viewer → cannot add/edit transactions
- Admin/Manager → full access

🎨 UI/UX Highlights

Responsive layout
Modern dashboard design
Drawer & modal interactions
Empty, error, and restricted states handled
Smooth transitions and hover effects

🛠️ Tech Stack

HTML5 – Structure
CSS3 – Styling & Layout
JavaScript – Interactivity

📂 Project Structure

``` finance-dashboard/ │ ├── index.html # Overview Dashboard ├── transactions.html # Transactions Page ├── insights.html # Insights Page ├── login.html # Login Page

🔮 Future Improvements

Connect to backend (Node.js / Firebase)
Store transactions using database or localStorage
Implement real filtering & sorting logic
Add authentication system
Improve accessibility (ARIA, keyboard navigation)
Add charts using libraries (Chart.js / Recharts)

🙌 Acknowledgements

This project was built as part of a frontend development assignment to demonstrate:

UI/UX design skills
Component structuring
Frontend logic handling