Create a custom Discord Server like Admin Dashboard using Next.js and Tailwind CSS. The dashboard should present server statistics and allow basic interaction (e.g., managing users, viewing messages, toggling roles) — all **mocked in the frontend with no backend or Discord API integration.

You must design and implement everything from scratch, including layout, styling, responsiveness, and mock data handling.

🛠 Stack & Tools

• Framework: [Next.js 14+ (App Router)]
• Styling: Tailwind CSS, Do not use shadcn and any ui component library, build components from scratch and the components code should not look like shadcn-ui library or any other library code
• Icons: Lucide
• State: React Hooks, Context API

🎯 Requirements

• Create a unique dashboard layout:

  • Left sidebar for navigation (e.g., Dashboard, Members, Roles, Messages)
  • Top navbar with profile, notification icon, and theme toggle
  • Main content area that changes based on selected navigation item

• You must design this layout yourself. No templates, UI kits, or Figma mockups are provided.

2. Pages & Components

Build the following interactive sections:

a. Dashboard

• Show 3-5 metric cards (e.g., Total Members, Online Users, Active Roles, Messages Today)
• Include a line/bar chart of member growth over time (use mock data)

b. Members Page

• Display a paginated and searchable table of users with:

  • Avatar, Username, Join Date, Role
  • Filter by role
  • Sort by join date or name

• Modal form to simulate adding a new member (mocked only)

c. Roles Page

• List all server roles with color labels
• Toggle switches to enable/disable role visibility
• Allow renaming a role (mocked input)

d. Messages Page

• Show a list of messages with avatar, username, timestamp, and message content
• Add a “Delete” button (no real deletion required)

3. Responsiveness

• Must work well across desktop, tablet, and mobile views.
• Sidebar should be collapsible on mobile.

4. Accessibility

• Keyboard navigation, ARIA labels, proper heading structure, and contrast.

5. Code Quality

• Modular file structure

• Reusable components

• Descriptive variable and function names

• Comment critical logic

• No unnecessary packages

• Add a dark mode toggle (persisted in local storage)

⛔ Restrictions

• Do not use UI libraries or component kits like MUI, Chakra, Shadcn, or DaisyUI
• Do not copy-paste templates or dashboards from the internet
• No backend, API calls, or actual Discord integration required

Include a short README.md explaining:

• Your approach
• How to run the project