# Sub-Agent 3A: POS Dialogs

## Objective
Convert 47 POS dialog design files into MudDialog components.

## Tech Stack
- **Component type**: MudBlazor `MudDialog` (not full pages)
- **Styling**: `pos.css` tokens
- **Icons**: Lucide via `<i data-lucide="icon-name"></i>`
- **i18n**: `IStringLocalizer<T>` with locale files
- **Location**: `Components/Pos/Dialogs/{DialogName}.razor`

## Design Files (Input)
Read ALL `.pen` files from `pencil-design/src/pages/tPOS/pos/shared/dialogs/`:
barcode-scan, change-calculator, confirmation, coupon-redeem,
customer-add, customer-edit, customer-history, customer-note, customer-search,
data-export, deposit-withdrawal, discount-apply, expense-entry, expiry-warning,
feedback-form, help-support, hold-recall, keyboard-shortcuts,
low-stock-alert, loyalty-reward, loyalty-scan, manager-override,
modifier-select, multi-discount, network-error, open-price,
order-cancel, order-edit, order-reprint, permission-denied, petty-cash,
price-check, printer-error, product-search, quantity-adjust,
role-switch, session-timeout, split-bill, stock-in, stock-out,
stock-transfer, sync-conflict, sync-status, two-factor,
vip-benefits, void-refund, weight-entry

## MudDialog Pattern
```razor
@* EN: Dialog description / VI: Mô tả dialog *@

<MudDialog>
    <TitleContent>
        <div style="display:flex;align-items:center;gap:10px;">
            <i data-lucide="icon-name"></i>
            <span>@L["Dialog_Title"]</span>
        </div>
    </TitleContent>
    <DialogContent>
        @* Dialog content from .pen design *@
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">@L["Dialog_Cancel"]</MudButton>
        <MudButton Color="Color.Primary" OnClick="Submit">@L["Dialog_Submit"]</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] IMudDialogInstance MudDialog { get; set; }
    private void Cancel() => MudDialog.Cancel();
    private void Submit() => MudDialog.Close(DialogResult.Ok(true));
}
```

## Output
- 47 dialog `.razor` files in `Components/Pos/Dialogs/`
- Locale keys: Pos_Dialog_{DialogName}_*

---

# Sub-Agent 3B: POS Reports + Verticals

## Objective
Convert 22 Pencil design files for POS reports and vertical-specific screens.

## Tech Stack
Same POS conventions — inherit `PosBase`, use `@layout PosLayout`, `pos.css`.

## Design Files (Input)

### Reports (8 files) from `pos/shared/reports/`:
`sales-dashboard.pen`, `shift-report.pen`, `tax-report.pen`,
`cash-reconciliation.pen`, `inventory-alert.pen`, `payment-report.pen`,
`staff-performance.pen`, `top-sellers.pen`

### Café (5+1 files) from `pos/cafe/`:
`desktop.pen`, `tablet.pen`, `mobile.pen`,
`barista-queue.pen`, `customer-display.pen`

### Restaurant (3 files) from `pos/restaurant/`:
`desktop.pen`, `tablet.pen`, `mobile.pen`

### Karaoke (3 files) from `pos/karaoke/`:
`desktop.pen`, `tablet.pen`, `mobile.pen`

### Spa (3 files) from `pos/spa/`:
`desktop.pen`, `tablet.pen`, `mobile.pen`

## Route Definitions
Reports: `/pos/reports/{report-type}`
Verticals: `/pos/{vertical}/{view}` (e.g., `/pos/cafe/desktop`)

## Output
- 8 Report pages in `Pages/Pos/Reports/`
- Vertical pages in `Pages/Pos/Cafe/`, `Pages/Pos/Restaurant/`, etc.
- Locale keys: Pos_Report_*, Pos_Cafe_*, Pos_Restaurant_*, etc.
