Admin Dashboard Landing Page - Next.js, React, TypeScript, TailwindCSS Fundamental Project 4 (including analytics, management, charts, team/contacts/invoices, form, calendar, FAQ, theme)

A modern, fully-featured, and customizable admin dashboard built with React, Next.js, TypeScript, Material-UI, Recharts, and Tailwind CSS. This project is designed for learning, rapid prototyping, and real-world admin panel use cases. It demonstrates responsive layout, theme switching (light/dark), data grids, charts, forms, calendar, and reusable component patterns.

• Live Demo: https://management-admin-panel.vercel.app/

Table of Contents

• Project Overview
• Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Available Scripts
• Routes & Pages
• Components Walkthrough
• Data & Backend
• Theming & Customization
• Reusing Components
• Libraries & Dependencies
• Keywords
• Conclusion
• License
• Happy Coding!

---

Project Overview

This admin dashboard is a front-end only application built with the Next.js 16 App Router. It provides a complete UI for business management: dashboard with KPIs and charts, team/contacts/invoices data grids, a profile form with validation, an interactive calendar, FAQ accordion, and multiple chart types (Bar, Line, Pie, Geography). The app uses mock data from src/data/mockData.ts—there is no backend or API. All state is managed with React (context for theme and sidebar). The project is ideal for learning React patterns, Next.js App Router, TypeScript, and UI composition.

---

Features

Feature	Description
Responsive Sidebar	Collapsible navigation with Lucide icons; active route highlighting.
Dashboard	Summary stat cards (StatBox), Revenue line chart, Campaign progress circle, Sales bar chart, Geography traffic chart, Recent transactions list.
Data Grids	Team, Contacts, and Invoices pages use MUI DataGrid with sorting, filtering, and theme-aware styling.
Profile Form	Create-user form with Formik and Yup validation.
Calendar	FullCalendar with day/week/month/list views; add/delete events via dialogs.
FAQ	Accordion with dark-mode alternate backgrounds; first item open by default; animated expand icon.
Charts	Bar, Line, Pie (with external labels), and Geography (horizontal bar) using Recharts; dashboard and full-page variants.
Light/Dark Theme	Toggle in topbar; theme persisted in localStorage and cookie; CSS variables in app/globals.css for Tailwind tokens.
Global Header	Each page shows a Header with title, subtitle, and “Download Reports” button (white text/icon, theme-aware).

---

Tech Stack

• Next.js 16 – App Router, server/client components, metadata (SEO).
• React 18 – Components, hooks, context.
• TypeScript – Typed components and data.
• Tailwind CSS – Utility classes; design tokens via CSS variables.
• Material-UI (MUI) v5 – Buttons, Dialogs, TextField, Accordion, DataGrid, ThemeProvider.
• Recharts – Line, Bar, Pie, and custom geography-style horizontal bar charts.
• FullCalendar – Calendar views and event handling.
• Formik & Yup – Form state and validation.
• Framer Motion – Staggered animations on dashboard.
• Lucide React – Sidebar and UI icons.

---

Project Structure

admin-dashboard/
├── app/
│   ├── layout.tsx          # Root layout: metadata, theme script, Providers
│   ├── page.tsx            # Home → Dashboard
│   ├── globals.css         # Tailwind + design tokens (:root / .dark)
│   ├── team/page.tsx
│   ├── contacts/page.tsx
│   ├── invoices/page.tsx
│   ├── form/page.tsx
│   ├── calendar/page.tsx
│   ├── faq/page.tsx
│   ├── bar/page.tsx
│   ├── pie/page.tsx
│   ├── line/page.tsx
│   └── geography/page.tsx
├── src/
│   ├── components/         # Reusable UI
│   │   ├── Header.tsx      # Page title, subtitle, Download Reports button
│   │   ├── StatBox.tsx     # KPI card with progress ring
│   │   ├── ProgressCircle.tsx
│   │   ├── LineChart.tsx
│   │   ├── BarChart.tsx
│   │   ├── PieChart.tsx
│   │   ├── GeographyChart.tsx
│   │   ├── DashboardLayout.tsx  # Sidebar + Topbar + main content
│   │   ├── Providers.tsx   # Theme + Sidebar providers
│   │   └── ThemeSync.tsx   # Syncs MUI theme to document .dark class
│   ├── scenes/             # Page-level views
│   │   ├── dashboard/
│   │   ├── team/
│   │   ├── contacts/
│   │   ├── invoices/
│   │   ├── form/
│   │   ├── calendar/
│   │   ├── faq/
│   │   ├── bar/
│   │   ├── pie/
│   │   ├── line/
│   │   ├── geography/
│   │   └── global/
│   │       ├── Sidebar.tsx
│   │       └── Topbar.tsx
│   ├── context/
│   │   └── SidebarContext.tsx
│   ├── data/
│   │   └── mockData.ts     # All demo data (teams, contacts, invoices, charts, etc.)
│   ├── lib/
│   │   ├── theme.ts        # MUI theme + tokens + useMode
│   │   └── utils.ts        # cn() for class names
│   ├── types/
│   │   ├── index.ts
│   │   └── fullcalendar.d.ts
│   └── hooks/
│       └── useChartContainer.ts (if present)
├── public/
│   ├── favicon.ico
│   ├── robots.txt
│   └── assets/
│       └── user.png
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── next.config.mjs
└── eslint.config.mjs

---

Getting Started

Prerequisites

• Node.js 18+ (recommended: 20+)
• npm or yarn

Installation

git clone <your-repo-url>
cd admin-dashboard
npm install

Run Development Server

npm run dev

Open http://localhost:3000. The app runs with mock data only; no backend or environment variables are required.

Build for Production

npm run build
npm start

---

Environment Variables

You do not need any environment variables to run this project. It works out of the box with mock data.

If you later add a backend or external services, you can use optional env vars. Next.js supports:

• .env – all environments
• .env.local – local overrides (git-ignored)
• .env.development / .env.production – per environment

Example (optional, for future use):

# .env.local (optional – not required for current demo)
# NEXT_PUBLIC_API_URL=https://api.example.com
# NEXT_PUBLIC_APP_NAME=Admin Dashboard

Access in code: process.env.NEXT_PUBLIC_*. Only variables prefixed with NEXT_PUBLIC_ are exposed to the browser.

---

Available Scripts

Command	Description
npm run dev	Start Next.js dev server (default: http://localhost:3000).
npm run build	Build for production (Turbopack).
npm start	Run production build.
npm run lint	Run ESLint on the project.

---

Routes & Pages

Route	Page	Description
/	Dashboard	Stats, revenue line chart, campaign circle, sales bar chart, geography chart, recent transactions.
/team	Manage Team	DataGrid of team members (mock).
/contacts	Contacts Information	DataGrid of contacts (mock).
/invoices	Invoices Balances	DataGrid of invoices (mock).
/form	Profile Form	Create-user form (Formik + Yup).
/calendar	Calendar	FullCalendar; click date to add event; click event to delete.
/faq	FAQ Page	Accordion; first item open by default; dark-mode styling.
/bar	Bar Chart	Full-page bar chart (Recharts).
/pie	Pie Chart	Full-page pie/donut with external labels (Recharts).
/line	Line Chart	Full-page line chart (Recharts).
/geography	Geography Chart	Full-page horizontal bar chart (Recharts).

Routing is file-based: each app/<route>/page.tsx exports the page component. The Sidebar uses usePathname() and <Link> for navigation.

---

Components Walkthrough

Header

Used on every page. Renders page title, subtitle, and the global “Download Reports” button with white icon/text.

import Header from "@/components/Header";

<Header title="DASHBOARD" subtitle="Welcome to your dashboard" />;

StatBox

Dashboard KPI card with optional progress ring and icon.

<StatBox