# Project Architecture & Exploration

This document summarizes the findings from the autonomous agents deployed to analyze the CoaxysPanel frontend repository.

## 1. Features & Routing Structure
*Explored by the Features Researcher*

- **Routing Model**: Uses Next.js App Router. The application is divided into `(auth)` (for login, passwords, 2FA flows) and `(panel)` (for the authenticated control panel). The panel relies heavily on a centralized dynamic catch-all route `[...slug]` to manage over 100 configured paths without duplicating page boilerplate.
- **Route Registry**: `src/lib/routes.ts` defines all available panel modules (e.g., Databases, Websites, Files, Security).
- **Core Views**: Handled by the `FeaturePage` component which dynamically loads the relevant feature (like the Dashboard, File Manager, DNS Editor, or Terminal) based on the current path and required permissions. 

## 2. Components & UI Design
*Explored by the Components Researcher*

- **Layered Architecture**: Organized into four groups inside `src/components`:
  - `ui/`: Fundamental design blocks (shadcn/ui style with Radix and Tailwind).
  - `common/`: Reusable composites like `DataTable` (using `@tanstack/react-table`), `PageHeader`, and loading/error states.
  - `shell/`: The main application frame containing the sidebar, header, and global command palette.
  - `features/`: The complex domain-specific pages (e.g., Wizards, Terminals) loaded by the Next.js router.
- **Design System**: A robust, heavily customized "glassmorphic" Tailwind UI, using css variables and variants to construct glowing shadows, backdrops, and seamless transitions.
- **Key Patterns**: Widespread use of client components (`"use client"`), dynamic lazy loading for heavy widgets like the Terminal (xterm.js) and charts, and TanStack React Query for data fetching.

## 3. Architecture & Data Flow
*Explored by the Architecture Researcher*

- **State Management**: Uses Zustand (with persistence) centrally located at `src/stores/ui-store.ts`. Primarily tracks layout views (sidebar status) and complex appearance themes (accents, glass intensity, density).
- **API Contracts**: Strong typing in `src/api/contracts/` for requests, responses, pagination, and data models (e.g., User, Website, Database, Backup).
- **Mock Services**: Because this is a frontend-only control center template, data access occurs through a mock client (`src/api/client.ts`) that simulates network latency and errors. Rich placeholder data is generated by `src/api/mocks/seed.ts` (using `date-fns`), which feeds into the simulated endpoints in `src/api/services/panel-service.ts`.
- **Utilities**: Employs `clsx` and `tailwind-merge` for style class merging, along with robust date utilities.

---
*Generated autonomously via specialized subagents.*