diff --git a/docs/superpowers/specs/2026-07-17-hq-console-redesign-design.md b/docs/superpowers/specs/2026-07-17-hq-console-redesign-design.md index 4eab6fb..52f9237 100644 --- a/docs/superpowers/specs/2026-07-17-hq-console-redesign-design.md +++ b/docs/superpowers/specs/2026-07-17-hq-console-redesign-design.md @@ -70,7 +70,7 @@ overlays); black-ink primary buttons; accent reserved for *state*. | Component | Change | |---|---| -| `PageHeader` | Adds optional `breadcrumb`, inline status-chip slot, and stat-strip slot below desc (Direction A v2 header pattern). Existing call sites keep working (all new props optional). | +| `PageHeader` | Adds optional `breadcrumb` (Direction A v2 header pattern). Existing call sites keep working (all new props optional). *(As built: the status-chip/stat-strip slots were dropped — pages compose `Badge`/`Stats` directly, visually equivalent; record pages hand-roll `wf-crumbs` beside `RecordHeader`.)* | | `DataTable` | Per-row `tone` (subtle `*-soft` tinting — e.g. overdue rows err-soft; APEX-checklist "pending first" is data-side, tinting is the visual half); per-column `mono`; sticky header. | | `FilterChips` **new** | Pill row with counts, single-select (`All · Active · Dormant · Lost`). Serves the funnel spec's `All | Mine | Overdue | Owner` later. | | `Skeleton` **new** | Varied-width shimmer bars; replaces every "Loading…" EmptyState. | @@ -92,9 +92,13 @@ the mockups' emoji placeholders. Used in `apps/hq-web` only, so `@sims/ui` gains - **Clients** — FilterChips by status with counts + existing search + total badge; `code` column mono; inline-create form restyled as a card. - **ClientDetail → "Client 360"** (hero page): - - `RecordHeader`: avatar, name, status pill, meta line (`code · state · GSTIN · since`), + - `RecordHeader`: avatar, name, status pill, meta line (`code · state · GSTIN · contact` + — `since` dropped: the Client API carries no createdAt), actions: Log call · Record payment · New document. - - KPI row: Outstanding ₹ · Active modules · AMC status · Last interaction. + - KPI row *(as built)*: Active modules · Advance on account ₹ · Open documents · Last + interaction. (Spec originally said Outstanding ₹ + AMC status; the server exposes no + outstanding figure and client-side paise math is banned — revisit when the ledger + endpoint grows an outstanding field.) - **Timeline ribbon "Relationship pulse — last 12 months"** (HQ-specific component in `apps/hq-web`): 4 lanes — Documents / Payments / Interactions / AMC & renewals — on a shared 12-month axis, plotted from data the page already loads. Hover → readout bar @@ -129,10 +133,11 @@ banner behavior exactly as today. ## 8. Testing & verification -- `npm run typecheck` and `npm test` (177 tests) stay green — no domain code touched. -- New `@sims/ui` components get vitest render tests where logic exists (FilterChips - selection, Tabs switching, DataTable tone/mono mapping, timeline bucketing math for the - ribbon: month-bucket function is a pure exported helper with unit tests). +- `npm run typecheck` and `npm test` stay green — no domain code touched. +- New `@sims/ui` logic gets vitest tests *(as built: pure-function tests only — avatar + hashing, palette matching, pulse month-bucketing; the repo has no DOM test environment, + so FilterChips/Tabs/DataTable render behavior is covered by typecheck + the e2e walk + rather than render tests)*. - End-to-end: run server + Vite, exercise Dashboard → Clients → Client 360 (all tabs, ribbon hover/click) → DocumentView → NewDocument preview → Reports → theme/accent switch (light+dark) → Ctrl+K palette → narrow-viewport pass, before claiming done.