📋 Description
A professional and fully responsive Admin Dashboard built using React JS, Material UI, and Nivo Charts.
It features a clean dark/light theme toggle, modern UI components, data visualization charts, forms with validation, and calendar management — all designed to provide a complete admin experience.
✅ What This Project Covers
- Responsive dashboard layout with sidebar and top navbar.
- Dark & Light mode support using Material UI theme.
- Sidebar with collapsible menu and active route highlighting.
- Routing between all pages using React Router v6.
- Data tables using MUI DataGrid with search and filter features.
- Form validation using React Hook Form.
- Interactive calendar built with FullCalendar.
- Multiple chart types using @nivo libraries (bar, line, pie, geo).
- FAQ page implemented with MUI Accordion.
- Reusable card components with integrated mini pie charts.
- Dynamic and elegant dashboard analytics overview.
- Fully responsive across desktop, tablet, and mobile.
🚀 Features Implemented
- 🌓 Dark/Light mode toggle with persistent theme.
- 🧭 Sidebar navigation with animated collapse.
- 📈 Charts: Bar, Pie, Line, and Geo visualization.
- 🗓️ Calendar page with event scheduling.
- 📋 Team, Contacts, and Invoices pages with DataGrid tables.
- 🧾 Form with validation (React Hook Form).
- ❓ FAQ page with expandable accordion items.
⚠️ 404 Not Found page for invalid routes.- 📊 Dashboard cards with statistics and small pie charts.
- 📤 Ability to view and export invoices through the Invoices page.
- 🎨 Modern Material UI design with custom theme colors.
🌟 Ideas for Future Enhancements
- Add authentication system (login/logout).
- Integrate backend for dynamic data (Node.js or Firebase).
- Add drag-and-drop event handling in the calendar.
- Export reports as PDF/Excel.
- Notifications panel and user management page.
- Real-time updates using WebSockets.
🛠️ Technologies Used
- React JS (Vite)
- Material UI (MUI v5)
- React Router v6
- React Hook Form
- FullCalendar
- @nivo/bar, @nivo/pie, @nivo/line, @nivo/geo
- JavaScript (ES6+)
- Git & GitHub
🌐 Live Demo
👉 View Admin Dashboard Live
📸 Screenshots
📦 How to Run Locally
# Clone the repository
git clone https://github.com/elfajome/Admin-Dashboard.git
# Navigate into the project folder
cd Admin-Dashboard
# Install dependencies
npm install
# Run the development server
npm run dev