# Frontend & Admin Architecture Route Map Specification

- **Audit Artifact**: Phase 3.2 / 3.3 — Frontend Architecture Specification
- **Repository HEAD**: `715873b2ecc3a72ba974bb2a2be87c5ba82bd4e7`
- **Architectural Architecture Split**:
  1. **Storefront (Customer-Facing)**: Next.js framework for server-side rendering (SSR), dynamic open-graph metadata, and maximum SEO performance.
  2. **Admin Panel (Internal Application)**: Standalone, isolated React SPA. SEO is completely irrelevant; absolute priority is **Security**, **Performance**, **Lazy Loading**, and **Type Safety**.

---

## Admin Panel React SPA Route Map (`createBrowserRouter`)

`TASK-FE-001` targets the standalone Admin Panel React SPA using `react-router-dom` (`createBrowserRouter`) for chunk splitting and lazy-loaded admin modules:

| Admin Route Path | Target Lazy-Loaded Module | Function / Sub-System | Auth Boundary | Performance & Code-Splitting Strategy | Confirmation Status |
|---|---|---|---|---|---|
| `/admin/login` | `AdminLogin` | Admin OTP / Credential Authentication | Public / Guest | Eager load login view | `CONFIRMED` |
| `/admin/dashboard` | `AdminDashboard` | Executive Overview & Metrics Widgets | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` |
| `/admin/settings` | `AdminSettings` | System Branding & Global Config | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` (`ADM-001`) |
| `/admin/products/*` | `AdminProductsManager` | Product Catalog, Prices & Scientific Terms | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` |
| `/admin/orders/*` | `AdminOrdersManager` | Order Fulfillment & Decimal Financial Logs | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` (`BE-001`) |
| `/admin/users/*` | `AdminUsersManager` | User Accounts & Address Management | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` |
| `/admin/pets/*` | `AdminPetsManager` | Medical Profiles & Vet Consultation Logs | `@Roles('Admin')` | `lazy()` chunk split | `CONFIRMED` |

---

## Router Implementation Requirements (`TASK-FE-001`)

1. **`createBrowserRouter` Setup**:
   - Use `react-router-dom` `createBrowserRouter([ ... ])` with React `<Suspense>` fallbacks for route-level code splitting.
2. **Type Safety & Nav Guards**:
   - Use strict TypeScript route param schemas (`AdminRouteParams`).
   - Implement client-side route guards enforcing `@Roles('Admin')` session checks prior to rendering lazy chunks.
3. **SEO Non-Requirement**:
   - Zero SEO logic in Admin Panel. Pure client-side SPA rendering with maximum bundle chunk isolation.