Finance Dashboard UI

A modern, responsive financial management dashboard built with React, Vite, and Tailwind CSS. Track transactions, view analytics, manage accounts, and monitor financial insights with an intuitive admin and user interface.

🌐 Live Demo

👉 View Live Project

🔹 Login

🚀 Features

User Roles

• Admin - Full access to add, delete, and manage transactions
• Viewer - Read-only access to view transactions and analytics

Authentication

• Role-based login system
• Secure session management
• Logout functionality with redirect

Dashboard Components

• Transaction Management - View, search, filter, and delete transactions by category and status
• Financial Analytics - Interactive charts and expense visualization using Recharts
• Insights Panel - Real-time financial summaries and quick statistics
• Credit Card Display - Visual representation of card accounts
• Responsive Design - Optimized for desktop and mobile devices

🔹 Admin Dashboard

📋 Project Structure

FinanceDashboard/
├── src/
│   ├── Components/
│   │   ├── AddTransaction.jsx     # Modal to add new transactions
│   │   ├── CreditCard.jsx         # Credit card display component
│   │   ├── ExpenseChart.jsx       # Expense visualization chart
│   │   ├── Header.jsx             # Dashboard header with user info
│   │   ├── Insights.jsx           # Financial insights panel
│   │   ├── LeftPanel.jsx          # Left sidebar with transactions
│   │   ├── LeftTaskBar.jsx        # Task bar navigation
│   │   ├── RecentTransaction.jsx  # Recent transactions table
│   │   ├── RightDashboard.jsx     # Right panel analytics
│   │   ├── RightPanel.jsx         # Right sidebar content
│   │   ├── StatCard.jsx           # Statistics cards
│   │   └── TransactionChart.jsx   # Transaction history chart
│   ├── Dashboard/
│   │   ├── Admin.jsx              # Admin dashboard view
│   │   └── User.jsx               # User/Viewer dashboard view
│   ├── Login/
│   │   └── Login.jsx              # Authentication page
│   ├── TaskBarComponents/
│   │   ├── Logo.jsx               # Brand logo
│   │   └── Menu.jsx               # Navigation menu
│   ├── Data/
│   │   └── MockData.jsx           # Sample transaction data
│   ├── App.jsx                    # Main app component with routing
│   ├── main.jsx                   # React entry point
│   ├── App.css                    # Global styles
│   └── index.css                  # Base styles
├── public/                        # Static assets
├── package.json                   # Project dependencies
├── vite.config.js                 # Vite configuration
└── index.html                     # HTML template

🛠️ Tech Stack

• React (Vite)
• Tailwind CSS
• Recharts
• Luicide icons
• React icons

⚙️ Installation

git clone https://github.com/codesketch11/Finance-dashboard.git
cd Finance-dashboard
npm install
npm run dev

🔐 Login Credentials

Email	Role
admin@example.com	Admin (Full Access)
Any other email (Click "Sign In")	Viewer (Read-Only)

🎨 Key Features Explained

Transaction Management

• Search - Find transactions by name
• Filter by Category - Subscription, Entertainment, Shopping, Income
• Filter by Status - Success or Pending
• Admin Controls - Add and delete transactions

Admin vs Viewer

• Admin Dashboard - Additional controls for transaction management
• Viewer Dashboard - Limited to viewing and analyzing data

Financial Insights

• Recent transaction highlights
• Total spending summary
• Transaction status indicators

🔹 Recent Transaction

🔄 Routing

Route	Component	Description
/	Login	Authentication page
/dashboard	User/Admin	Main dashboard (role-dependent)

📊 Sample Data

The dashboard includes mock transaction data with:

• Multiple subscription services (Figma, YouTube)
• Various categories and statuses
• Transaction dates and timestamps
• Company information and transaction amounts

---