Agentic AI Admin Dashboard

Agentic AI Admin is a custom Angular admin dashboard application built with Angular Material. It serves as the control panel for managing AI agents, monitoring system performance, and configuring intelligent behavior across users and projects. This project was built with a focus on usability, performance, and seamless design integration with Figma.

---

🚀 Features

• ✅ Built with Angular and Angular Material
• ✅ Integrated with Figma design system using SCSS tokens
• ✅ Customizable dashboard layout with drag-drop potential
• ✅ AI Agent Management: list, edit, activate/deactivate agents
• ✅ Real-time analytics and usage tracking
• ✅ Notification center and user alerts
• ✅ Role-based access control (RBAC)
• ✅ Mobile responsive & dark/light mode toggle
• ✅ Reusable modals and dialogs with Angular Material

---

⚙️ Quick Start

1. Clone the repository

git clone https://github.com/Kennguyen3/agentic-dashboard.git
cd agentic-dashboard

2. Install dependencies

yarn install

3. Start the application

yarn start

Then open your browser at http://localhost:4200

---

📁 Project Structure

src/
├── app/
│   ├── agents/              # Agent list, detail, edit components
│   ├── dashboard/           # Overview + widgets
│   ├── shared/              # Common UI elements, pipes, models
│   └── core/                # Services, guards, themes
├── assets/
│   └── screenshots/         # UI preview images
├── environments/            # Env configs
└── styles/                  # SCSS variables & Figma-based theming

---

🎨 Design Integration

All styles in this project are customized to match our Figma design system. We extracted typography, colors, spacing, and grid system into SCSS variables, which are reused across all Angular Material components. This ensures 1:1 consistency between design and code.

---

📸 Sample Screens

---