Sales Dashboard - Static Version

A modern, responsive static sales dashboard built with HTML, CSS, and JavaScript. This is a frontend-only implementation with sample data and interactive features.

🚀 Features

• Static Dashboard - No backend required, all data is simulated
• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Interactive Charts - Using Chart.js for data visualization
• Real-time Simulation - Dynamic data updates every 15 seconds
• Dark/Light Theme - Toggle between themes with persistence
• Notification System - Interactive dropdown with badge counter
• Ripple Effects - Material design inspired button interactions
• Team Performance - Sales rep tracking with avatars
• Sales Analytics - Forecasts, sources, and performance metrics

📁 File Structure

sales-dashboard/ ├── index.html # Main dashboard page ├── css/ │ └── dashboard.css # All styles and responsive design ├── js/ │ └── dashboard.js # All JavaScript functionality └── README.md

🛠 Technologies Used

• HTML5 - Semantic markup structure
• CSS3 - Modern styling with Flexbox/Grid and animations
• JavaScript - Interactive functionality and data simulation
• Chart.js - Data visualization for charts and graphs
• Bootstrap 5 - Responsive grid system (CDN)
• Font Awesome - Icons (CDN)
• Unsplash - Sample user avatars (CDN)

🎯 Dashboard Sections

Header

• Global search functionality
• Status filters (Marketing, Sales, Requests)
• Notification bell with interactive dropdown
• Theme toggle (Dark/Light) with local storage

Main Content Grid

Left Column

• Top Sales Reps - Team performance against targets
• Forecast Chart - Quarterly projections visualization
• Activities Warning - Overdue activities alert

Middle Column

• Sales Metrics - Monthly performance and targets
• Open Requests - Pending customer requests list
• Sales Source Analysis - Doughnut chart breakdown

Right Column

• Forecast Details - Quarterly target breakdown
• Top Performers - Sales rep achievement list
• Sales Reason Analysis - Pie chart breakdown

🎨 Interactive Features

• Status Filters - Click to filter dashboard data
• Time Filters - Switch between monthly views
• Theme Toggle - Switch between dark/light modes
• Notification System - Click bell for dropdown
• Ripple Effects - Visual feedback on all buttons
• Hover Animations - Card lift effects on hover
• Mobile Sidebar - Collapsible navigation on small screens

📱 Responsive Breakpoints

• Desktop (1200px+) - 3-column grid layout
• Tablet (768px-1199px) - 2-column grid layout
• Mobile (<768px) - 1-column stack layout with collapsible sidebar

🚀 Getting Started

1. Download the files or clone the repository
2. Open index.html in your web browser
3. No setup required - everything works out of the box

The dashboard will load immediately with:

• Sample sales data and team information
• Interactive charts and visualizations
• Responsive layout adapting to your screen size
• Dark/light theme based on your preference or system setting

🎭 Sample Data

All data in this dashboard is static and simulated, including:

• Sales team performance metrics
• Quarterly forecast projections
• Customer request tracking
• Real-time performance updates
• Notification examples

🌐 Browser Support

Compatible with all modern browsers:

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

📝 Note

This is a static dashboard - all data is hardcoded and simulated for demonstration purposes. In a production environment, you would connect this to a backend API for real data.

📄 License

This project is open source and available under the MIT License.

Built with ❤️ for modern sales teams - A clean, responsive dashboard that works perfectly across all devices without any backend dependencies.