Finance Dashboard System

A full-stack finance dashboard application with role-based access control, interactive analytics, and a modern dark-themed UI.

---

Overview

Finance Dashboard is a web application that allows organizations to manage their financial records, track income and expenses, visualize spending patterns, and control user access through a role-based permission system.

Different users see different things based on their role — a Viewer only sees the dashboard summary, an Analyst can read and analyze transactions, and an Admin has full control over everything including user management.

---

Tech Stack

Backend

Technology	Purpose
Java 21	Core language
Spring Boot 3.2	Backend framework
Spring Security	Authentication & authorization
JWT (JJWT)	Stateless token-based auth
Spring Data JPA	Database ORM
MySQL 8	Relational database
Hibernate	ORM implementation
Lombok	Boilerplate reduction
Maven	Build tool

Frontend

Technology	Purpose
React 18	UI framework
Vite	Build tool & dev server
Tailwind CSS	Styling
Chart.js + react-chartjs-2	Data visualizations
Axios	HTTP client
React Router v6	Client-side routing
Lucide React	Icons
date-fns	Date formatting

---

Features

Authentication

• JWT-based stateless authentication
• Token valid for 24 hours
• Protected routes on both frontend and backend

Role-Based Access Control

Three roles with different levels of access:

Feature	VIEWER	ANALYST	ADMIN
View dashboard	✅	✅	✅
View transactions	❌	✅	✅
Create / Edit / Delete transactions	❌	❌	✅
Manage users	❌	❌	✅

Dashboard

• Total income, total expenses, and net balance (all-time)
• Monthly income vs expense bar chart
• Net balance trend line chart
• Category-wise spending doughnut chart
• Category totals breakdown
• 10 most recent transactions

Transaction Management

• Create, view, update, and soft-delete financial records
• Filter by type (INCOME / EXPENSE), category, and date range
• Each transaction records who created it

User Management (Admin only)

• Create users with specific roles
• Update user details and roles
• Activate / deactivate users

---

Project Structure

finance-dashboard/
├── finance-dashboard-backend/        # Spring Boot application
│   ├── src/main/java/com/finance/dashboard/
│   │   ├── config/                   # Security & app configuration
│   │   ├── controller/               # REST API endpoints
│   │   ├── dto/                      # Request & response objects
│   │   ├── entity/                   # JPA entities
│   │   ├── enums/                    # Role, TransactionType
│   │   ├── exception/                # Custom exceptions & global handler
│   │   ├── repository/               # Data access layer
│   │   ├── security/                 # JWT filter, utils, entry point
│   │   └── service/                  # Business logic
│   └── src/main/resources/
│       └── application.properties
│
└── finance-dashboard-frontend/   # React + Vite application
├── src/
│   ├── api/                      # Axios instance & service calls
│   ├── components/               # UI components by feature
│   ├── context/                  # Auth context
│   ├── hooks/                    # Custom hooks
│   ├── pages/                    # Page components
│   └── utils/                    # Helpers & formatters
└── vite.config.js

---

API Endpoints

Auth

Method	Endpoint	Access
POST	/api/auth/login	Public

Dashboard

Method	Endpoint	Access
GET	/api/dashboard/summary	All roles

Transactions

Method	Endpoint	Access
GET	/api/transactions	ANALYST, ADMIN
GET	/api/transactions?type=INCOME	ANALYST, ADMIN
GET	/api/transactions?type=EXPENSE&category=food	ANALYST, ADMIN
GET	/api/transactions?from=2026-01-01&to=2026-04-30	ANALYST, ADMIN
GET	/api/transactions/{id}	ANALYST, ADMIN
POST	/api/transactions	ADMIN
PUT	/api/transactions/{id}	ADMIN
DELETE	/api/transactions/{id}	ADMIN

Users

Method	Endpoint	Access
GET	/api/users	ADMIN
GET	/api/users/{id}	ADMIN
POST	/api/users	ADMIN
PUT	/api/users/{id}	ADMIN
DELETE	/api/users/{id}	ADMIN

---

Role & Permission Matrix

Endpoint	VIEWER	ANALYST	ADMIN
POST /api/auth/login	✅	✅	✅
GET /api/dashboard/summary	✅	✅	✅
GET /api/transactions	❌	✅	✅
GET /api/transactions/{id}	❌	✅	✅
POST /api/transactions	❌	❌	✅
PUT /api/transactions/{id}	❌	❌	✅
DELETE /api/transactions/{id}	❌	❌	✅
GET /api/users	❌	❌	✅
GET /api/users/{id}	❌	❌	✅
POST /api/users	❌	❌	✅
PUT /api/users/{id}	❌	❌	✅
DELETE /api/users/{id}	❌	❌	✅

---

Setup

Prerequisites

• Java 21+
• Node.js 18+
• MySQL 8+

Backend

Update application.properties with your MySQL credentials, then run FinanceDashboardApplication.java from IntelliJ. The database and tables are created automatically on first startup.

A default admin account is seeded on first run:

Field	Value
username	admin
password	admin123

Frontend

cd finance-dashboard-frontend
npm install
npm run dev

Open http://localhost:5173

The frontend proxies all /api requests to http://localhost:8080 automatically via Vite config — no CORS setup needed on your end.

---

Design Decisions

• Soft delete — transactions and users are never permanently removed, preserving audit history
• Stateless auth — no server-side sessions; the JWT token carries the user's identity and role
• JPA Specifications — used for dynamic transaction filtering instead of hardcoded query methods
• Role enforcement at route level — all access rules are defined in one place inside SecurityConfig
• Vite proxy — frontend dev server proxies API calls to the backend, keeping CORS configuration simple