Admin Dashboard Prototyping Template

This repository is a high-fidelity "sandbox" designed to mimic our current production admin dashboard. It is built specifically for Product Managers to bypass Figma and move straight into functional prototyping using AI.

🚀 Why Use This Repo?

• Skip Figma: Go from idea to a working UI without waiting for design mocks.
• Realistic Prototypes: Use pre-built components that match our production design language, making stakeholder demos feel "real."
• Finalize Specs Faster: Test edge cases in a live environment to identify logic gaps before developers write the first line of production code.

📦 What’s Inside?

The repo contains a library of standardized components (buttons, tables, sidebar navigation, and layouts) that strictly follow our production design system. By using these, your AI-generated features will automatically look and feel like the real product.

---

🛠 Quickstart Guide

Prerequisites

You don't need to be a software engineer, but you should:

• Have a code editor installed (e.g., Visual Studio Code).
• Use an AI assistant within your editor (e.g., Claude Dev, Roo Code, or GitHub Copilot/Codex).
• Know the basics of how to clone a repository from GitHub.

Step-by-Step Setup

1. Clone the repo:

git clone https://github.com/woojiahern/ELSA-B2B-admin-dashboard-mock_up.git

2. Install dependencies:

pnpm install

3. Launch the dashboard:

pnpm dev

Navigate to the localhost URL provided in your terminal to see the dashboard live.

4. Onboard your AI: Before coding, give your AI assistant context. Paste this prompt:

"Analyze this repository to understand the project structure. Please read DESIGN_GUIDE.md to understand our specific design specifications and available components before suggesting any changes."

5. Start Building: Prompt the AI to build the feature you want.

• Example: "Add a new 'Analytics' tab to the sidebar and create a data table that filters student records by grade."

Screenshots

What's Available Out-of-the-box

• Insights Page
• Reporting
• Learner / Student List
• Learner Profile Page
• Class / Team
• Admin & Team Lead/Teacher List
• Curriculum / Content Management
• Settings

Note: None of the buttons are functioning. If you need them to function, please prompt the AI to do so.