📊 Sales Dashboard (FY 2024–2025)

An interactive and visually modern Sales Analytics Dashboard built using HTML, CSS, and JavaScript (Chart.js).
This dashboard provides insights into sales, cost, profit, transactions, and product performance across India.

---

🚀 Live Overview

This project simulates a real-world Computer Hardware Sales Dashboard with:

• 📈 KPI metrics (Sales, Cost, Profit, Transactions, Quantity)
• 📊 Category-wise product analysis
• 🏷️ Brand-wise sales distribution
• 🌍 State-wise sales performance
• 👨‍💼 Supervisor-based filtering system

---

✨ Key Features

🔹 Interactive Dashboard

• Dynamic filtering by Supervisor
• Real-time updates of charts & KPIs

🔹 Data Visualization

• Bar Charts → Category & State Sales
• Doughnut Chart → Brand Sales Distribution
• Cost Analysis by Brand

🔹 KPI Cards

• Total Sales (₹)
• Total Cost (₹)
• Total Profit (₹)
• Transactions
• Quantity Sold

🔹 Clean UI/UX

• Dark modern theme 🌙
• Responsive layout (mobile-friendly)
• Smooth hover effects & animations

---

🛠️ Tech Stack

• HTML5 – Structure
• CSS3 – Styling (Custom Dark Theme UI)
• JavaScript (Vanilla JS) – Logic & Interactivity
• Chart.js (v4) – Data Visualization

---

📂 Project Structure

sales-dashboard/
│── index.html   # Main dashboard file

---

📊 Dashboard Sections

1. Header

   • Title + Live Badge

2. Filter Panel

   • Supervisor-based filtering

3. KPI Section

   • Sales, Cost, Profit, Transactions, Quantity

4. Charts

   • Quantity by Category
   • Sales by Brand (Doughnut)
   • Sales by State
   • Cost by Brand

5. Supervisor Performance Table

   • Sales, Transactions, and performance bars

---

⚙️ How to Run

1. Download or clone the repository:

git clone https://github.com/harleenkaurkambojgandhi-design/SalesBoard-HTML.git

2. Open the project folder

3. Run the file:

open index.html

Or simply double-click index.html

---

📈 Sample Insights

• Top-performing brands: Intel, Samsung, Dell
• Highest sales regions: Maharashtra, Gujarat
• Best supervisors: Vijay Singh, Roshan Kumar
• Most sold category: Monitors & CPUs

---

🚀 Future Improvements

• 🔗 API integration (real-time data)
• 📥 Export reports (PDF / Excel)
• 🔐 User authentication system
• 📊 Advanced filters (date range, region)

---

💡 Learning Outcomes

• Hands-on experience with Chart.js
• Building interactive dashboards using Vanilla JS
• UI/UX design with modern CSS
• Data representation & analytics concepts

---

👨‍💻 Author

Your Name 🔗 https://github.com/harleenkaurkambojgandhi-design

---

Dashboard Screenshots

🖼️1. Image 1: Main Sales Dashboard – High-Level KPIs

Key Metrics 📊

Metric	Value
Total Sales	₹99M
Total Cost	₹76M
Total Profit	₹23M
Transactions	5.1K orders
Quantity	13K units sold

Quantity by Category 📦 (Top categories)

Monitor, Mouse, CPU, Graphic Card, Keyboard, Cabinet, HDD, SSD, RAM, MotherBoard, Comp. Case, NIC, Printer

Sales by Brand 🏷️

Intel, Samsung, Dell, Nvidia, Western Digital, Acer

Supervisors 👥 (filter options)

All, Aadil Khan, Aarvi Gupta, Advika Joshi, Ajay Sharma, Roshan Kumar, Vijay Singh

💡 This dashboard represents the primary FY 2024–25 overview with the highest reported sales figure (₹99M).

---

🖼️2. Image 2: Supporting Analysis Dashboard 📈

Total Sales by State 🗺️ (Top 10)

Maharashtra, Gujarat, Uttar Pradesh, Bihar, Delhi, Tamil Nadu, Tripura, Orissa, Sikkim, Chandigarh

Cost by Brand 💰

Intel, Dell, Nvidia, Western Digital, Acer, Gigabyte, Hynix, Seagate, MSI, Asus

Supervisor Performance 👨‍💼 (by transaction count)

Supervisor	Transactions
Vijay Singh	1223
Roshan Kumar	1100
Advika Joshi	920
Aadil Khan	860
Ajay Sharma	819
Aarvi Gupta	173

💡 This dashboard provides regional, brand-cost, and individual performance insights not visible in the first two screenshots.

---

🖼️3. Image 3: Filtered Dashboard View.

This dashboard represents a filtered subset 📊 of the main FY 2024–25 data

Compared to the unfiltered view (₹99M sales), this shows approximately 18% of total sales, indicating a specific segment selection.

🔍 Probable Filter Applied (Based on Data)

Metric	Filtered Value	Comparison to Main (₹99M)
Total Sales	₹18M	~18% of total
Total Cost	₹14M	~18% of total
Total Profit	₹4M	~17% of total
Transactions	920	~18% of total (5.1K → 920)
Quantity	2.1K units	~16% of total (13K → 2.1K)

📌 Possible Filter Scenarios

The consistent ~18% proportion suggests one of the following filters:

• Single Supervisor 👤 – Likely Advika Joshi (920 transactions exactly match her count from Screenshot 3) or Aadil Khan (860, close)
• Specific Region/State 🗺️ – One smaller state or a district within a top state
• Single Product Category 🖥️ – e.g., only "Monitor" or "Mouse" sales
• Specific Time Period 📅 – e.g., one quarter or one month

📊 Visible Data Under This Filter

Section	Details
Quantity by Category 📦	Monitor, Mouse, CPU, Graphic Card, Keyboard, Cabinet, HDD, SSD, RAM, MotherBoard, Comp. Case, NIC, Printer (all categories still visible, but values are relative to filter)
Sales by Brand 🏷️	Intel, Samsung, Dell, Nvidia, Western Digital, Acer
Supervisor Options 👥	All, Aadil Khan, Aarvi Gupta, Advika Joshi, Ajay Sharma, Roshan Kumar, Vijay Singh

💡 This dashboard demonstrates the filtering capability of the BI tool. The user has likely selected Advika Joshi (920 transactions) or a similar segment, reducing all KPIs proportionally while preserving the category and brand distribution structure.

---

🔗 Live Dashboard

👉 Click here to view the dashboard

---

⭐ Support

If you like this project, give it a ⭐ on GitHub!