A modern, feature-rich sales analytics dashboard built with React and Material-UI. This application showcases a professional-grade admin panel with interactive widgets, real-time data visualization, and comprehensive export capabilities.
- Secure login page with form validation
- Protected routes with authentication context
- Session persistence via localStorage
- User profile display with logout functionality
- Responsive sidebar navigation (collapsible)
- Modern header with search, notifications, and user menu
- Mobile-friendly design with hamburger menu
- Smooth transitions and animations
- Stats Cards - Key metrics with animated counters and trend indicators
- Revenue Chart - Area/Bar chart with weekly/yearly toggle (Recharts)
- Orders Table - Sortable data table with status badges and pagination
- Top Products - Product performance with progress bars
- Customer Insights - Pie chart with segment breakdown
- Activity Feed - Real-time activity timeline
- Fully customizable dashboard layout using @dnd-kit
- Drag widgets to reorder
- Remove/restore widgets as needed
- Layout persistence in localStorage
- Dark mode (default) and Light mode
- Seamless theme switching
- Consistent styling across all components
- CSV Export - Export orders, products, and revenue data
- JSON Export - Full dashboard data export
- PDF Export - Charts exportable as PDF documents
- Individual widget export buttons
Ctrl + K- Open command palette
- Quick navigation to any page
- Search functionality
- Action shortcuts
- Keyboard-friendly interface
- React 18 - UI library
- Vite - Build tool and dev server
- Material-UI (MUI) v5 - Component library
- React Router v6 - Client-side routing
- Recharts - Data visualization
- @dnd-kit - Drag and drop functionality
- html2canvas - Screenshot capture for PDF export
- jsPDF - PDF generation
- Fake Store API - Mock product data
src/
├── components/
│ ├── Auth/
│ │ ├── Login.jsx
│ │ └── ProtectedRoute.jsx
│ ├── Dashboard/
│ │ └── Dashboard.jsx
│ ├── Layout/
│ │ ├── DashboardLayout.jsx
│ │ ├── Sidebar.jsx
│ │ ├── Header.jsx
│ │ └── CommandPalette.jsx
│ └── Widgets/
│ ├── DraggableWidget.jsx
│ ├── StatsCard.jsx
│ ├── RevenueChart.jsx
│ ├── OrdersTable.jsx
│ ├── TopProducts.jsx
│ ├── CustomerInsights.jsx
│ └── ActivityFeed.jsx
├── context/
│ ├── AuthContext.jsx
│ ├── DataContext.jsx
│ ├── ThemeContext.jsx
│ └── NotificationContext.jsx
├── hooks/
│ ├── useAnimatedCounter.js
│ └── useKeyboardShortcuts.js
├── pages/
│ ├── Analytics.jsx
│ ├── Users.jsx
│ ├── Settings.jsx
│ └── Reports.jsx
├── utils/
│ └── exportUtils.js
├── styles/
│ └── animations.css
├── App.jsx
└── main.jsx
- Node.js 18+
- npm or yarn
- Clone the repository
git clone <repository-url>
cd sales-dashboard- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and navigate to
http://localhost:5173
- Email: [email protected] (or any email)
- Password: password123 (or any password)
npm run buildThe build output will be in the dist folder.
npm run preview- No Backend Required - All data is mocked/fetched from public APIs
- Responsive Design - Works seamlessly on desktop, tablet, and mobile
- Accessibility - Keyboard navigation and screen reader support
- Performance - Optimized with React best practices
- Modern UI/UX - Clean, professional design with attention to detail
- Customizable - Easy to extend and modify
MIT License