# ARCHETYPES · brand-006 RJ Laravel Admin · decision B

**Sheet:** https://archetypes.pina-brand-006-rj-laravel-admin.pages.dev/ · **artboards:** /canvas/ · **one-image contact sheet:** /contact-sheet.png
**Status:** approved-for-non-flagship; flagships in bespoke rounds (Frank, 2026-10-18 · `../FEEDBACK-B-r1.md`). A02·a and A11·a approved explicitly. **Five flagships** get bespoke back-and-forth rounds and are NOT built from the archetype alone: **Orders index (A01) · Order detail (A02) · Support tickets (A11) · Pricing (A12) · Designs (A03, everything in designs)**. Round r1 global fixes applied and redeployed 2026-10-18 (same URLs).
**Boards:** 19 = 1 summary + 12 archetypes (five with two layout variants, a ★ / b) + 1 menu-mechanics board (A02·a with the T-d flyout and the T-f breadcrumb dropdown open).
**Source:** `src/arch_build.py` (composite, shots, sheet, canvas, dist) · `src/arch_pages.py` (heroes + phone answers) · `src/arch_data.py` (fixtures) · `src/arch.css` · `src/api/` (raw mock responses).

## Conventions on every board

- Hero at 1440×900, compact, menu collapsed to the 76px labelled rail. The rail is the **live `/me/menu` of the role that does the job** (EVIDENCE §1): orders, catalogue, pricing, support; super (derived) for vision checks, settings and email templates. Menu content is rendered verbatim. It is server-owned and out of scope, and the rail scrolls to keep the active item in view ("N more").
- Shell power-ups on every desktop page: **⌘K palette** (rail search), **Find order** field in the header, **Job tray** chip, **times in my timezone** (header clock shows the staff zone; all dates are converted from API UTC: Asia/Shanghai, or Europe/Dublin on A11).
- Data: mock admin API shapes (2026-10-18, `Authorization: Bearer x`). Values the mock returned as `"sample"`, `{}` or `[]`, and every extra row, are type-correct examples with a **dotted underline**. Names are initial + surname or the mock's business names. Each table archetype carries a long-string row and a CJK row.
- Dashed amber = **needs backend** ghost (logged in `../../PROPOSALS.md`).

## Menu mechanics (locked by Frank, 2026-10-18 · phase-1/menu-techniques/MENU-TECHNIQUES.md)

- **Collapsed rail:** T-d mega flyout. Level-2 headings sit over level-3 links in up to 3 columns. At depth 2 it degrades to a plain link list, and at depth 1 the rail item is a direct link.
- **Header:** T-f breadcrumb dropdowns at every depth. Each crumb opens its siblings.
- **Expanded sidebar:** accordion with level 2 as headings. Max depth 3; anything deeper becomes in-page tabs.
- Shown on board **A02m**: the record hero with the Materials flyout open from the rail and the Orders crumb's sibling list open. The live orders-role tree is depth 2, so the flyout appears in its plain-list form.

## Summary

| id | Archetype | Pages | Hero | Variant ★ | Fold default |
|---|---|---|---|---|---|
| A01 | Index table (list, filter, bulk) | 103 | `/admin/orders` | a full-width table / b list + pinned peek | — |
| A02 | Record detail (header + tabs + side panel) | 18 | `/admin/orders/{order}` | a tabs / b single scroll + section nav | — |
| A03 | Create / edit form (long, sectioned, save bar) | 137 | `/admin/designs/{design}/edit` | a section nav left / b stepped sections | — |
| A04 | Wizard / import / bulk operation | 13 | `/admin/designs/bulk-hub` | — | — |
| A05 | Dashboard / report | 12 | `/admin/dashboard` | — | absorbs A07 |
| A06 | Live job / run monitor | 7 | `/admin/orders/print-jobs` | a table of runs / b cards by state | — |
| A07 | Timeline / gantt / schedule | 1 | `/admin/gantt` | — | **fold → A05** |
| A08 | Media / photo review | 2 | `/admin/vision-checks/results` | — | **keep** |
| A09 | Settings / configuration | 17 | `/admin/settings` | — | — |
| A10 | Preview / document / layout designer | 7 | `/admin/email-templates/{templateKey}/edit` | — | — |
| A11 | Inbox / thread | 1 | `/admin/tickets/{ticket}` | a 3-pane / b 2-pane + context sheet | **keep** |
| A12 | Matrix / grid editor | 7 | `/admin/pricing/create` | — | — |
| | **Total** | **325** live (2 retired) | | | 11 archetypes after the fold |

---

## A01 · Index table (list, filter, bulk) · 103 pages

**Definition.** A server-paged list with status tabs, search, facet chips, column chooser, row menu and a bulk bar. Most module landing pages.
**Hero** `/admin/orders` · **examples** `/admin/designs`, `/admin/tickets`, `/admin/users` · **density** compact, 30px rows.
**Layout lever: a full-width table ★** vs **b list + pinned peek split**. Why a: ten or more columns need the width at 1440. The peek is one key away and pins to b's split when someone wants it. b shows `status=manufacturing,on-hold` (multi-status is in the status catalogue) with 4505 pinned.
**Components.** data-table F1 (sticky header, server paging, LS, SA), filter-bar F1, tabs, bulk-bar / action-bar F1, pagination F1, status-chip, column-types F1, segmented (density), sheet + M06 resizable split (b), saved-views F1 (ghost: P2).
**Power-ups.** shell four + **bulk bar** (a: all 240 matching, "Mark completed" in batch 2 of 3, 100 per request, stop after this batch) + **peek → split** (b).
**API ops.** `admin.orders.index`, `admin.orders.status-catalogue`, `admin.orders.completed` (orders[], all-or-nothing per batch), `admin.orders.bulk-print`, `admin.orders.export`, `admin.orders.show` (peek), `admin.dashboard.quick-search`.
**Phone.** Order lookup: cards in a list, scrolling status chips, search on top (390 thumbnail).
**Ghost.** Saved views (existing P2).

## A02 · Record detail (header + tabs + side panel) · 18 pages

**Definition.** A record header (id, status, was-status, facts strip, split actions) over sub-resources.
**Hero** `/admin/orders/{order}` (4505) · **examples** `/admin/access/keys/{key}`, `/admin/accessory-codes/{accessoryCode}/edit`, `/admin/suppliers/{supplier}/edit` · **density** comfortable shell, compact tables.
**Layout lever: a tabs, one sub-resource per tab ★** vs **b single scroll with section nav**. Why a: the order has 10+ sub-resources with their own endpoints, so tabs load each on demand. b suits the short records in this archetype (keys, codes, suppliers).
**Components.** record-header F1, tabs, key-value, M17 measurement grid (body · pattern · factory · alt 1 · alt 2 · result), alert F1 (conflict), confirm / alert-dialog ladder F1, step-rail section-nav mode (b), toast.
**Power-ups.** shell four + **inline edit + undo** (a: a sleeve alt-2 cell saved per cell, undo toast) + **"someone else changed this"** (b: the 409 `version_conflict` banner with Compare / Reload theirs / Keep mine, your edits vs theirs marked) + **typed confirmation** (b: Void 4505, consequences, then type the id; sent with an Idempotency-Key).
**API ops.** `admin.orders.show`, `admin.orders.measurement-check` (version + ETag), `admin.orders.measurements.update` (If-Match / expected_version), `admin.orders.void`, `admin.orders.cloud-print`, `admin.orders.print-url`, `admin.orders.phase-summary`, `admin.orders.pricing`, `admin.orders.notes.index`.
**Phone.** Order lookup lands here, read-mostly: facts, production, cloud print, hold (thumbnail). Measurement edits stay on desktop.

## A03 · Create / edit form (long, sectioned, save bar) · 137 pages

**Definition.** Long sectioned forms with a 180px inline label column in compact, bilingual pairs and repeatable rows, under one floating save bar.
**Hero** `/admin/designs/{design}/edit` (design 101 "Collar / 领子") · **examples** `/admin/tickets/new`, `/admin/designs/create`, `/admin/users/{user}/edit` · **density** comfortable; compact = inline labels (shown).
**Layout lever: a section nav left, one scroll ★** vs **b stepped sections, one at a time**. Why a: edits are random access (jump straight to Fields) and one save bar covers the whole form. Steps only help a first-time create.
**Components.** form-section F1, step-rail (section nav / stepper), M07 bilingual pair, combobox F1, switch, textarea, data-table (fields grid with drag sort, M14), bulk-bar, save-bar + unsaved-guard F1.
**Power-ups.** shell four + **unsaved-changes bar** (2 changes: name 中文, field 505 surcharge) + **bulk bar** (Set surcharge / Set supplier on the selected fields).
**API ops.** `admin.designs.show`, `admin.designs.update` (name, fields, blockers, links, camera_frame, info, validation, component…), `admin.designs.edit-options`, `admin.designs.fields.sort`, `admin.designs.fields.bulk-surcharge`, `admin.designs.fields.bulk-supplier`, `admin.designs.popups.export`, `admin.designs.popups.order-refs`.
**Phone.** Read-mostly: no phone evidence for long edits (EVIDENCE §7).

## A04 · Wizard / import / bulk operation · 13 pages

**Definition.** Pick, then operation, then preview (diff), then apply, then result, with the job running in the tray.
**Hero** `/admin/designs/bulk-hub` · **examples** `/admin/users/bulk-permissions`, `/admin/fabric-codes/photos`, `/admin/materials/onboard` · **density** comfortable shell, compact review table.
**Components.** stepper F1, review-step F1 + M05 diff viewer, tree of opted-in designs (M15), confirm ladder, M01 job tray.
**Power-ups.** shell four (tray **open**: job batches with progress, done + download, partial with failed CSV) + **confirmation ladder** tier 2 (consequences: "Applies 7 popup rows on 1 design").
**API ops.** `admin.designs.bulk-hub.index`, `.preview` (preview_hash), `.apply`, `.cancel`, `.export`, `admin.dashboard.job-batches`, `admin.notifications.index`.
**Phone.** Not on phone; the job still shows in the phone tray.

## A05 · Dashboard / report · 12 pages (13 with A07 folded in)

**Renamed (r1).** Dashboard ≠ analytics. Analytics is a future deep workstream with Frank, not this archetype.
**Definition.** The working dashboard and operational reports. The hero now follows the real page (`dashboard.blade.php` + `partials/order-countdown-widget.blade.php`): Quick order search + Queue health, then **Order Countdown & Staff Needed** in Frank's structure: **days → factories nested → orders due** (DUE +3 · +2 · +1 · DUE TODAY · OVER DUE, Asia/Shanghai business day), one pill per main product (`4505-1-2`), "N Days" on overdue pills, Copy per factory and Copy all per day, the OVERDUE COMPONENTS column and the STAFF NEEDED strip.
**Hero** `/admin/dashboard` · **examples** `/admin/vision-checks/failure-reasons/report`, `/admin/article-analytics`, `/admin/stock-report` · **density** comfortable.
**Components.** kpi-tile F1, data-table, chart-frame F1 (reports), command-palette F1, M01.
**Power-ups.** shell four (⌘K stays in the shell; the palette overlay was removed so the countdown reads clearly).
**API ops.** `admin.dashboard.index` (queue_stats, staff_needed, factory countdown, fabric overdue), `admin.dashboard.quick-search`, `admin.me.menu`.
**Phone.** Order lookup via quick search, plus the factory countdown (thumbnail).
**Ghost.** One search across tickets and fabrics (GET /admin/search missing; already in POWERUPS).

## A06 · Live job / run monitor · 7 pages

**Definition.** Polled list of runs: queued, sending, accepted, printing, printed, failed with retry, PDF via a short-lived link.
**Hero** `/admin/orders/print-jobs` · **examples** `/admin/job/batches`, `/admin/schedule-monitor`, `/admin/fabric-codes/photos/batches/{batch}` · **density** compact.
**Layout lever: a table of runs ★** vs **b cards by state with progress**. Why a: 19+ jobs a day, scanned by time and state. Once most are printed, cards waste the screen. Failed jobs float via the tab.
**Components.** data-table, tabs with counts, M04 prepare → open PDF + cloud-print status, progress, live/stale banner state.
**Power-ups.** shell four (the job tray mirrors this page).
**API ops.** `admin.orders.print-jobs.index` (dispatch_status × print_status enums), `.pdf-url`, `.reprint`, `.kanban-reprint`.
**Phone.** Job status: polled list, failed first with reprint (thumbnail).
**Ghost.** G1 cancel a queued job.

## A07 · Timeline / gantt / schedule · 1 page · recommended **fold into A05**

**Definition.** A month × order grid, status-coloured bars, due markers, drill to a sheet.
**Hero** `/admin/gantt` · **examples** none · **density** compact.
**Components.** M03 gantt, sheet (peek), legend from status-legend.
**Power-ups.** shell four + **peek sheet** (gantt-detail for 4505).
**API ops.** `admin.orders.gantt`, `admin.orders.gantt-grid`, `admin.orders.gantt.status-legend`, `admin.orders.gantt-detail`.
**Phone.** Read-mostly: the same orders as a due-date list.
**Fold why.** One page whose shell is a report (filters, one big view, drill sheet). Keep the Gantt component and drop the archetype.

## A08 · Media / photo review · 2 pages · recommended **keep**

**Definition.** A photo grid filtered by verdict state, with a lightbox that shows both model reads and takes Pass / Fail (P / F) and a paid re-run.
**Hero** `/admin/vision-checks/results` · **examples** `/admin/media-library` · **density** comfortable.
**Components.** card-gallery, M10 lightbox with verdict shortcuts, tabs with counts, bulk-bar (ghosted), sheet.
**Power-ups.** shell four + **peek** (lightbox panel) + **bulk bar** (selection shown; the action is a ghost).
**API ops.** `admin.vision-checks.results.index` (`shape=v2`: photo_url + photo_expires_at, can_resolve, can_rerun, read_a/read_b, single_leg_slot), `.resolve`, `.rerun`.
**Phone.** Photo review: one photo per screen, big Pass / Fail, swipe for the next (thumbnail). Photos on the board are drawn examples (the mock returns no image).
**Ghost.** G2 resolve several at once.

## A09 · Settings / configuration · 17 pages

**Definition.** Grouped key-value settings with a section sub-nav. Money-affecting settings get a consequence preview.
**Hero** `/admin/settings` · **examples** `/admin/vision-checks/failure-reasons/manage`, `/admin/vision-checks/settings`, `/admin/tickets/settings` · **density** compact.
**Components.** settings-subnav, form-section, input with unit, switch, tag-input, save-bar, confirm ladder.
**Power-ups.** shell four + **unsaved bar** + **confirmation ladder** tier 2 (FX USD/CNY 7.25 → 7.31: 12 bands, USD +84, EUR +61, biggest swing band 7).
**API ops.** `admin.settings.index`, `admin.settings.update`, `admin.fx-rates.index`, `admin.fx-rates.preview`, `admin.fx-rates.save`, `admin.settings.header-ids.index`.
**Phone.** Read-only.

## A10 · Preview / document / layout designer · 7 pages

**Definition.** Edit a template beside a server-rendered preview, with versions, diff, revert and send proof. Printed PDFs and the Print Studio canvas are not redesigned.
**Hero** `/admin/email-templates/{templateKey}/edit` (`order.status_updated`) · **examples** `/admin/shipping/containers/{container}/ticket`, `/admin/print-studio/designer`, `/admin/print-studio` · **density** shell comfortable.
**Components.** field, segmented (markdown / document frame), token chips from variable_bank, preview frame, version list (timeline F1 + M05), save-bar.
**Power-ups.** shell four + **unsaved bar**.
**API ops.** `admin.email-templates.show`, `.update`, `.preview`, `.send-proof`, `.versions.index`, `.versions.revert`, `.reset`.
**Phone.** Preview only.

## A11 · Inbox / thread · 1 page · recommended **keep**

**Definition.** Ticket queue, thread with attachments and history, a composer (AI draft, template, citation, voice), and a context panel holding the order and a wallet credit/debit.
**Hero** `/admin/tickets/{ticket}` (#110 "Order arrived damaged") · **examples** none · **density** compact list, comfortable thread.
**Layout lever: a 3-pane, list · thread · context ★** vs **b 2-pane, list · thread, context in a sheet**. Why a: support triages all day, and the queue, thread and money box together save a click per ticket. b is the 1280 fallback.
**Components.** list-row, thread F1, M16 rich composer, sheet, money-input F1, confirm ladder, toast.
**Power-ups.** shell four (staff in Europe/Dublin, UTC+1) + **inline edit + undo** (status Open → In Progress) + **peek** (order) + **confirmation ladder** tier 2 (credit EUR 25.00: EUR 250.00 → 275.00; the reason is shown to the retailer).
**API ops.** `admin.tickets.index`, `admin.tickets.show`, `admin.tickets.update-status`, `admin.tickets.comments.store` (ai_suggestion, attachment_ids, citations), `admin.tickets.ai.suggest`, `admin.tickets.ai.voice-transcribe`, `admin.tickets.templates.index`, `admin.tickets.citations.search`, `admin.tickets.billable-account`, `admin.tickets.wallet-transactions.store` (Idempotency-Key).
**Phone.** Ticket reply: thread, AI draft, voice recorder (thumbnail).
**Ghosts.** G3 assign owner, G4 internal note.

## A12 · Matrix / grid editor · 7 pages

**Definition.** A spreadsheet-like grid (frozen first column, group rows) where each cell saves on its own. Cell states: editing, saved (undo), rejected 422 (the typed value is kept).
**Hero** `/admin/pricing/create` (retailer × design pricing) · **examples** `/admin/pt-colors`, `/admin/formulas/{formula}`, `/admin/matrix/factories` · **density** compact.
**Components.** M02 matrix editor, combobox F1 (retailer, main product), toast, error-state 422, M01 (queued export).
**Power-ups.** shell four + **inline edit + undo**.
**API ops.** `admin.pricing.designs.index`, `admin.pricing.designs.store`, `admin.pricing.retailer.index`, `admin.pricing.export`, `admin.pricing.exports.index`.
**Phone.** Read-only.

---

## Power-up coverage (the 10 chosen)

| Power-up | Shown on |
|---|---|
| ⌘K palette | every desktop board (rail search); open on A05 |
| Find order in header | every desktop board |
| Job tray | every desktop board; open on A04 |
| Bulk bar · batches of 100 | A01·a (batch 2 of 3), A03 a/b, A08 (action ghosted) |
| Peek sheet → split | A01·b (pinned), A07, A08 lightbox, A11 a/b |
| Inline edit + undo | A02·a, A02·b, A11·a, A12 |
| "Someone else changed this" | A02·b (backed in the spec; see the PROPOSALS correction) |
| Confirmation ladder | A02·b (tier 3, typed), A04, A09, A11 (tier 2) |
| Unsaved-changes bar | A03 a/b, A09, A10 |
| Times in my timezone | every board (A11 in Europe/Dublin) |

## Round r1 · global fixes (FEEDBACK-B-r1, 2026-10-18)

- **Order numbers:** the real format is the bare numeric id (`Order::getFormattedIdAttribute()` returns `$this->id`; the Blade index prints `{{$order->formatted_id}}`, the PDP header prints `Order #{{ $order->id }}`). Every `RJ-…` is gone: `4505`, product numbers `4505-1`, main-product groups `4505-1-2`, email token `#456`. Invented container codes (`CN-SH-…`), printer ids and tracking numbers were removed too.
- **Statuses:** only the real list from `App\Constants\NewQrCode\OrderStatus::getStatusList()` (Draft · Awaiting Payment · Awaiting Fit · Ready For Fulfilment · Build · Manufacturing · Outbound · Completed · Delivered · On Hold · Voided). Gantt uses `relevantAdminStatus()` + sub-statuses (Order Bill, Fabric Purchase, Assembly, In-Production) in their real colours. Production steps use `ProcessList` titles (`BEGIN PRODUCTION | 0.1` …). Print jobs use the real `job_type` (order · tag · shipping container) and dispatch/print enums; agent jobs use `CloudJob::TYPES` and dispatch/send enums.
- **Hold:** no Hold button on any order page or ticket. Hold is real only as the **“Put Order On Hold”** checkbox inside **Raise Issue** (`partials/pdp/_raiseissue_modal.blade.php`; API twin `POST orders/{order}/hold`). The order header now shows the real actions: Raise Issue · Cloud print · Print ▾ · Edit · ⋯.
- **Shell (every board):** Find order · **Jobs** = one compact button (count of running/queued, red count of failed); hover/click opens a tight list of ALL jobs, right edge aligned to the button (open on A04) · **bell** with its own notification menu (open on A06·a) · **globe** icon only, click toggles EN ↔ 中文 · **clock** opens the timezone choice (open on A09).
- **Fixture patch (orders flagship round, 2026-10-18):** every 5-digit id is now a bare **4-digit** id in the real range (`842NN` → `4492+NN`, i.e. 4505–4528; prod max ≈ 4528, TRUTH-ORDERS §1); vision-check and ticket order ids too. Factories are the real short codes **FX · FRR · F3.5 · FPS** with no location (TRUTH-ORDERS §5), production steps are `ProcessList` titles, the staff strip is **4 days** (today..+3), agent-job types use the exact `CloudJob::TYPES` labels (Order · Notification · Factory Message · Scheduled Message · Event Message). Source: `src/arch_data.py`, truth patch in `src/arch_pages.py`.
- **A06:** two real lists: Order print jobs (print agent) and **Agent jobs** (WeChat agent: fabric order, reminder, factory message, scheduled message, event message), each row tagged with its agent. Proposed rename: “Fabric Purchase Jobs” → **“Agent jobs”** (for Frank).
- **A07:** columns order · customer · factory (no location), real statuses and colours.
- **A08:** Pass / Fail rebuilt as one `verdict` component: 12px inner padding, icon + label + centred inline key hint, nothing touches the border. Verified on headless 2× zooms at 1440, 1280 and 390.
- **A10:** versions panel narrowed (230 → 176px). **A12:** no Chinese (super-admin only).
- **A11:** “Get AI suggestion” (the system's own label) is an explicit button beside Cite article and never auto-runs: A11·a shows the empty state, A11·b the draft after the click. The original ticket body is the first card of the thread. A11·b is now the **no-order** ticket. “Hold order” and “Peek order” are gone (now “Open order”). The wallet gains **Reason template** (real: wallet action templates). Context is a flex column, never an overlay.

## Left for the flagship rounds

- **Orders index:** how it is actually used (65–80% of Frank's day), saved views, choosing which status tabs show (and seeing the available ones; the real list is 12 + Paid Shipping), the unclear “Meas.” column, a new **Product type** column. The status column is too narrow for “Ready For Fulfilment”.
- **Order detail:** a much fuller PDP and a better action UX. Today's real header has ~10 buttons (Raise Issue, 4 local prints, Cloud Print, Cloud Order, Photos, Edit, plus conditional validation, build-flag and FitQ buttons).
- **Designs:** EN/CN side by side; every setup step (images, codes, system EN/CN, printer EN/CN, surcharge, supplier, radio/option type).
- **Tickets:** Frank's full A11 list beyond r1.
- **Pricing:** full redesign (English only).