# Sub-Agent 1A: Admin Dashboard + Store Management

## Objective
Convert 5 Pencil design files into Blazor Server pages for the Admin module.

## Tech Stack
- **Framework**: Blazor Server (.NET 8) with MudBlazor
- **Styling**: Vanilla CSS using existing `admin.css` tokens (BEM: `.admin-{component}--{variant}`)
- **Icons**: Lucide via `<i data-lucide="icon-name"></i>` (add `lucide.createIcons()` in OnAfterRenderAsync)
- **i18n**: `IStringLocalizer<T>` with locale files at `wwwroot/locales/{vi-VN,en-US}.json`
- **Base class**: Inherit from `AdminBase` at `Pages/Admin/AdminBase.cs`
- **Layout**: Use `@layout AdminLayout` (already created at `Layout/AdminLayout.razor`)

## Design Files (Input)
Read and convert these `.pen` files from `pencil-design/src/pages/tPOS/admin/`:
1. `admin-dashboard.pen` → `Pages/Admin/Dashboard.razor`
2. `store-list.pen` → `Pages/Admin/Store/StoreList.razor`
3. `store-detail.pen` → `Pages/Admin/Store/StoreDetail.razor`
4. `store-create.pen` → `Pages/Admin/Store/StoreCreate.razor`
5. `store-settings.pen` → `Pages/Admin/Store/StoreSettings.razor`

## Route Definitions
```
@page "/admin"          → Dashboard.razor
@page "/admin/stores"   → StoreList.razor
@page "/admin/stores/{Id}" → StoreDetail.razor
@page "/admin/stores/create" → StoreCreate.razor
@page "/admin/stores/{Id}/settings" → StoreSettings.razor
```

## Pattern Reference
Follow the same pattern as `Pages/Auth/LoginCustomer.razor`:
- `@page` directive, `@inherits AdminBase`, `@layout AdminLayout`
- Vietnamese/English bilingual comments with `@* EN: ... VI: ... *@`
- All user-visible text uses `@L["Key"]`
- Add locale keys to both `vi-VN.json` and `en-US.json`

## How to Read .pen Files
Each `.pen` file is JSON with structure:
```json
{
  "children": [{ "type": "frame", "children": [...] }],
  "variables": { "bg-page": { "type": "color", "value": "#0A0A0B" } }
}
```
- `type: "frame"` → `<div>`
- `type: "text"` with `content` → text node
- `type: "icon_font"` with `iconFontName` → `<i data-lucide="icon-name">`
- `fill: "$variable-name"` → use CSS var `--admin-variable-name`
- `layout: "vertical"` → `flex-direction: column`
- `gap`, `padding`, `cornerRadius` → standard CSS properties

## CSS Guidelines
- Use existing classes from `admin.css` wherever possible
- Add new classes to admin.css only if needed, following BEM naming
- Topbar page title/subtitle: use `admin-topbar__title` and `admin-topbar__subtitle`
- For the Dashboard page, include the topbar directly in the page content area

## Output Files
Create these files:
1. `Pages/Admin/Dashboard.razor` (with KPI cards, store overview, alerts, activity feed)
2. `Pages/Admin/Store/StoreList.razor` (data table with search, filters)
3. `Pages/Admin/Store/StoreDetail.razor` (detail view with stats)
4. `Pages/Admin/Store/StoreCreate.razor` (form with validation)
5. `Pages/Admin/Store/StoreSettings.razor` (settings form)
6. Update `wwwroot/locales/vi-VN.json` — add Admin_Dashboard_*, Admin_Store_* keys
7. Update `wwwroot/locales/en-US.json` — matching English translations
