# Shop Portal — Design-Parity Audit (typography · color · spacing) **Date:** 2026-07-06 · **Scope:** the SHOP portal (`frontend/`) only, every page + menu item + navbar + drawers, compared class-for-class against the demo `Navagoo_MI/navagoo-app` (v0.19, origin/dev). Method: **code-level Tailwind-class parity** (fonts/sizes/weights, colors, margin/ padding/gap, structural fidelity) — the utility classes ARE the spec. One sub-agent per surface; each produced the per-surface plan below. Synthesized by the orchestrator. This file is the living audit. `[H]`/`[M]`/`[L]` = severity. ## ✅ EXECUTION STATUS (2026-07-06) — plans implemented The plans below were **executed**: 4 systemic fixes + all shared chrome (orchestrator), then **14 sub-agents** applied their per-surface class changes (80 changes total). Verified: every changed PHP `php -l` clean, `aurora-core.js`/`aurora-tabs.js` `node -c` clean, `npm run build:css` rebuilt, **render smoke 30/30**, and browser spot-checks (chrome avatars, focus, toast, confirm dialog, dashboard). **Done (global / systemic):** - Focus-visible rings on all chrome controls + a global `:focus-visible` outline + a `shadow-focus` token. - Header/sidebar avatars → colored ShopTile gradient tile (`rounded-full`/`rounded-xl`), was a flat white square. - Booking-status `st-*` tokens re-aligned to demo hues; `navy-*` ramp added. - **Toast** rebuilt to the demo white-card (bottom-end, colored icon, X dismiss); **modal backdrops** → `navy-950/45`; **ngConfirm** title `text-lg tracking-tight` + `rounded-xl` demo-token buttons. - **Badges** (`Aurora::TONES`) gained `ring-1 ring-inset` + `-700` text (demo Badge) — applies to every badge. - Active segmented-tab label → `text-brand-700`; dashboard hero → `bg-aurora-h`; content max-width 1400→1600 + responsive gutters. - 80 per-surface class fixes across Finance, Settings, Services, Notifications, Team, Customers, Calendar, Booking-detail, Marketing, Reviews, Agents-wallet, Social/Help, Navagoo Plans. **Deferred (flagged — its own pass):** - **Dashboard/Home — full re-port to the demo v0.19 Home** (schedule-hero timeline, attention feed, balance panel, week-at-a-glance bottom band). A dedicated PORTING WAVE, not a class tweak — the bulk of why Dashboard scored 42%. The old Dashboard is now polished but is not the new Home IA. - A few LOW items agents skipped where the premise didn't hold (e.g. runtime `--color-st-*` vars the portal doesn't use) or that needed NEW i18n strings (a design-only pass forbids new keys). --- ## 0. Foundation — design tokens (portal `tailwind.config.js` v3 ⇄ demo `@theme` v4) **Verdict: ~95% identical.** brand 50–900, accent 50–700, ink/ink-soft/ink-muted/page, amberbrand/cyanbrand, radii (xl 14 · 2xl 20 · 3xl 28), shadow-card, shadow-pop, font-sans (Google Sans Text) — all byte-identical. So parity gaps are almost entirely PER-SURFACE class usage, not tokens. The real token deltas to know: | Token | Portal | Demo | Note | |---|---|---|---| | `st-scheduled` | `#594279` | `#6a3ab8` | demo calendar STATUS_COLOR; applied new-route-locally already (playbook) | | `st-progress` | `#e8a833` | `#f5b71b` | " | | `st-completed` | `#2ebf91` | `#57b49b` | " | | `st-noshow` | `#6f7682` | `#4c5663` | " | | `st-cancelled` | `#dc5757` | `#dc5757` | same | | `shadow-focus` | — (missing) | `0 0 0 4px rgba(131,96,195,.22)` | portal has no focus-ring token; inputs may differ | | `navy-600..950` | — | `#46345f..#160f20` | admin chrome only; shop uses brand — N/A for shop | | `--topbar-h` | hardcoded | `3.75rem` (60px) | verify navbar height = 60px | | `font-ar` | Noto Kufi Arabic | — | portal-only RTL family (fine) | **Type scale:** both use Tailwind's DEFAULT type scale (no `--text-*` overrides) → sizes match IFF the same `text-*` utilities are used. **This is the #1 thing every per-surface agent checks.** **Shell:** demo TopBar + Sidebar brand band are both `--topbar-h` (60px); the sidebar's flat gradient zone derives from it + radius-2xl. Portal `.bg-side-shop` / `.bg-head-shop` gradients (tailwind.config) must match the demo `.bg-side-shop`/`.bg-head-shop` in index.css. --- ## Per-surface plans ## Summary — surfaces by work needed | Surface | Parity | High | Med | Low | |---|---:|---:|---:|---:| | [Finance (5 tabs + shell)](#finance-5-tabs-shell) | ~82% | 3 | 2 | 3 | | [Services + Packages](#services-packages) | ~55% | 2 | 4 | 2 | | [Notifications](#notifications) | ~58% | 2 | 4 | 2 | | [Settings (5 tabs: General · Scheduling · Payments · Commercials · Notifications)](#settings-5-tabs-general-scheduling-payments-commercials-notifications) | ~78% | 2 | 3 | 3 | | [Marketing / Promo codes (frontend/views/promo-code/index.php ⇄ shop/Marketing.tsx → marketing/Deals.tsx)](#marketing-promo-codes-frontend-views-promo-code-index-php-shop-marketing-tsx-marketing-deals-tsx) | ~80% | 2 | 3 | 3 | | [Dashboard / Home (shop portal — frontend/views/site/index.php)](#dashboard-home-shop-portal-frontend-views-site-index-php) | ~42% | 2 | 3 | 2 | | [Chrome — Modals, Drawers, Toasts](#chrome-modals-drawers-toasts) | ~68% | 2 | 3 | 2 | | [Chrome — Navbar/TopBar (frontend/views/layouts/_tw_navbar.php ⇄ Navagoo_MI TopBar.tsx, shop variant)](#chrome-navbar-topbar-frontend-views-layouts-tw-navbar-php-navagoo-mi-topbar-tsx-shop-variant) | ~80% | 2 | 2 | 3 | | [Team / Agents (Specialists · Payroll · Structure tabs)](#team-agents-specialists-payroll-structure-tabs) | ~82% | 2 | 3 | 2 | | [Booking detail + booking modals (frontend/views/booking-calendar/_detail.php, _new_booking.php, _group_booking.php vs demo BookingDetailBody.tsx, BookingTimeline.tsx, modals.tsx)](#booking-detail-booking-modals-frontend-views-booking-calendar-detail-php-new-booking-php-group-booking-php-vs-demo-bookingdetailbody-tsx-bookingtimeline-tsx-modals-tsx) | ~90% | 2 | 3 | 2 | | [Chrome — Sidebar](#chrome-sidebar) | ~82% | 2 | 1 | 3 | | [Agents-wallet — Transfer Requests (index.php) + Specialist Tips (specialist-tips.php)](#agents-wallet-transfer-requests-index-php-specialist-tips-specialist-tips-php) | ~88% | 2 | 2 | 2 | | [Customers + Customer Invitations](#customers-customer-invitations) | ~72% | 1 | 4 | 2 | | [Foundation — Layout shell + tokens + gradients (frontend/views/layouts/tailwind.php + tailwind.config.js vs demo ShopLayout/RootLayout/index.css)](#foundation-layout-shell-tokens-gradients-frontend-views-layouts-tailwind-php-tailwind-config-js-vs-demo-shoplayout-rootlayout-index-css) | ~88% | 1 | 2 | 4 | | [Calendar (day / month / list) — booking-calendar v2](#calendar-day-month-list-booking-calendar-v2) | ~88% | 1 | 3 | 3 | | [Social Media + Help Center + Agent Slots (portal-only, no demo counterpart)](#social-media-help-center-agent-slots-portal-only-no-demo-counterpart) | ~88% | 1 | 3 | 3 | | [Reviews (rate) — frontend/views/rate/index.php + _detail.php](#reviews-rate-frontend-views-rate-index-php-detail-php) | ~88% | 0 | 2 | 5 | | [Navagoo Plans (frontend/views/navagoo-plans/index.php + _offer_ticket.php)](#navagoo-plans-frontend-views-navagoo-plans-index-php-offer-ticket-php) | ~93% | 0 | 2 | 2 | | **TOTAL (18 surfaces)** | — | **29** | **49** | **48** | ## Systemic findings (repeat across 3+ surfaces — fix once, globally) - **[color] The interactive focus state is missing across every sidebar control. Demo nav links use 'outline-none focus-visible:ring-2 focus-visible:rin** — hits 6 surfaces: Chrome, Chrome, Foundation, Chrome, Navagoo Plans, Reviews. Fix: Add 'outline-none focus-visible:ring-2 focus-visible:ring-white/40' to the tw-navlink class (line 100) and to the collapse button (line 166); add 'outline-none focus-visible:ring-2 focus-visible:ring-white/30' to the tw-sec-sum (line 151). Rebuild with npm run build:css. - **[structure] The header-chip avatar square diverges from the demo's ShopTile (md). Portal (line 138) uses 'size-9 rounded-lg bg-white/15 text-sm font-bol** — hits 5 surfaces: Chrome, Chrome, Dashboard / Home, Calendar, Customers + Customer Invitations. Fix: Change the chip square to size-10 rounded-xl to match ShopTile md. If a per-shop hue is available, apply the same 135deg oklch gradient; otherwise keep a brand-toned fill rather than bg-white/15 so it reads as a colored tile, not a flat chip. - **[spacing] Header action buttons (New group / New walk-in) are shorter and smaller-typed than the demo. Demo PageHeader actions use Button default size** — hits 4 surfaces: Calendar, Finance, Notifications, Marketing / Promo codes. Fix: If matching the demo button metrics, bump to `px-5 text-[15px]` with a fixed `h-11` (keep the icon `gap-1.5`). Low priority — this is a consistent aurora-wide button substitution. - **[structure] Portal service/routine/addon/bundle/package cards (article.tw-catalog-card, ~line 292) render a full-width gradient banner header (`relative** — hits 3 surfaces: Services + Packages, Customers + Customer Invitations, Notifications. Fix: Replace the banner-header body with the demo layout: card = `group flex flex-col rounded-2xl bg-white p-4 shadow-card ring-1 ring-slate-900/5`; inside a `flex items-start gap-3` row put `
` (image or fallback icon size-8) then a `min-w-0 flex-1` column with badge/status + LifecycleActions on top and `p.mt-2 truncate text-base font-bold text-ink` name below. Drop $thumbTints/gradient strip and the h-28 header. --- ## Per-surface findings + plans ### Finance (5 tabs + shell) **Parity ~82%** · 3H / 2M / 3L Structurally faithful port — all 5 panes exist with the correct columns, cards, filters, modals and drawer, and the shared Card/table-header/PageHeader classes match the demo. But two signature finance widgets diverge from the demo primitives (the P&L StatTile quartet and the Settlement FormulaStrip), plus a cluster of control-level deltas (tab underline color, Segmented filter shape, chip padding), so it reads as a close-but-not-pixel-parity rebuild rather than a 1:1 port. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | typography | P&L quartet (line 124-172) does not match the demo StatTile (shared.tsx). Demo tile value is `text-xl font-extrabold tracking-tight` in a `p-4` card with NO icon; portal renders the value at `text-[26px] font-extrabold leading-none`, uses a `p-5` card, and adds a `size-10` lucide icon chip the demo tile never has. Grid also differs: demo `grid-cols-2 gap-4 lg:grid-cols-4` vs portal `grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4`. | Match StatTile: card `p-4`, value `text-xl font-extrabold tracking-tight text-ink tnum`, caption `mt-1`, action `mt-3`. Remove the icon chip + top accent bar OR keep as a deliberate aurora enhancement applied to all 4. Change grid to `grid grid-cols-2 gap-4 lg:grid-cols-4`. | `views/earnings/_earnings.php` | | H | structure | Settlement formula strip (line 93-109) is not the demo FormulaStrip (shared.tsx). Demo renders each term as a tone-tinted BOXED chip (`rounded-xl px-3.5 py-2.5 ring-1 ring-inset` with teal/sky/purple/cyan/amber/orange tint), operators `text-lg font-bold text-ink-muted`, centered (`justify-center`), value `text-sm font-bold`. Portal renders bare `flex flex-col items-center` text columns (no box, no ring, no per-term tone; loss terms only recolored red), plain operators, left-aligned, value `text-base font-extrabold`. | Rebuild each term as a boxed chip using demo TONES per term (Collected->teal, Tips->sky, Marketing->purple, Payment Processing->cyan, Notifications->amber, Fee VAT->orange): `rounded-xl px-3.5 py-2.5 ring-1 ring-inset ` with label `text-[10px] font-bold uppercase tracking-wide opacity-80` + value `text-sm font-bold tnum text-ink`. Wrap in `justify-center`, make operators `text-lg font-bold`. Result box: keep `bg-brand-600` but `px-4 py-2.5` with value `text-base font-extrabold`. | `views/earnings/_settlement.php` | | H | color | Active-tab underline uses the wrong purple (registerCss, line 56-67). Demo TabNav underline is `bg-brand-600` (2px) and the active label is `text-brand-700`; portal draws the ::after underline off `--ng-purple-600, #594279` (the old brand-900/st-scheduled purple) and — because aurora-tabs.js pill classes are neutralized — leaves the active label at `text-ink` instead of brand-700. | In the injected CSS set the ::after background to the brand-600 token (var(--color-brand-600), not #594279). Add an `[aria-selected="true"]` rule coloring the active tab label `text-brand-700` (color: var(--color-brand-700)) so the active tab reads brand like the demo. | `views/earnings/index.php` | | M | structure | Status Segmented control (line 159-170) differs from demo Field.tsx Segmented. Demo: container `rounded-xl bg-slate-100 p-1`, buttons `rounded-lg px-3 py-1.5`, active `bg-white text-brand-700 shadow-xs`. Portal: container `rounded-full ... p-0.5`, buttons `rounded-full px-4 py-1.5`, active `bg-white text-ink shadow-xs` (pill-shaped, wrong active text color). | Change container to `rounded-xl ... p-1`, buttons to `rounded-lg px-3 py-1.5`, and the active branch from `text-ink` to `text-brand-700` (keep `bg-white shadow-xs`). | `views/earnings/_charges.php` | | M | spacing | Invoice status chip padding + ring diverge from the demo Badge PILL and are internally inconsistent with the Earnings pane. Demo InvoiceBadge = `inline-flex ... px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset`; portal statusChip (line 43) and the JS-built doc chip (line 404) use `inline-block ... px-3 py-1` with no ring, while _earnings.php chips correctly use `px-2.5 py-0.5`. | Change the invoice statusChip wrapper to `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset` plus the matching ring tone; update the JS-generated doc status chip (line 404) to the same padding for consistency. | `views/earnings/_invoices.php` | | L | spacing | Type Select is `h-9` (line 174); demo Field.tsx Select (and Input baseControl) is `h-10`. Control sits one notch shorter than the demo beside the segmented row. | Change the select height from `h-9` to `h-10` to match the demo control height. | `views/earnings/_charges.php` | | L | spacing | Earnings table cells use `px-4` (line 189-252); the demo passes `compact` to this 10-column DataTable, which sets `px-3` on th and td. The Charges 10-column table is likewise `px-4` where the demo would compact it. Slightly wider horizontal rhythm than the demo across the wide finance tables. | For the 10-column Earnings and Charges tables, switch th/td horizontal padding from `px-4` to `px-3` to match the demo compact DataTable; leave the narrower Settlement eligibility table as-is. | `views/earnings/_earnings.php` | | L | spacing | Shell rhythm is 24px where the demo is 20px. Demo ShopFinanceLayout wraps header + TabNav + content in `space-y-5` (20px); portal uses `mb-6` (24px) on both the page header (line 71) and the tab-nav wrapper (line 80). | Change the header wrapper and tab-nav `mb-6` to `mb-5` (or wrap the three blocks in a `space-y-5` container) to match the demo's 20px vertical rhythm. | `views/earnings/index.php` | **Plan:** 1. Fix the Earnings P&L quartet (_earnings.php): reconcile StatTile to the demo — value text-xl not text-[26px], card p-4 not p-5, grid gap-4 + lg:grid-cols-4, and decide the icon chip in/out consistently across all 4 tiles. Highest visual weight, above the fold. 2. Rebuild the Settlement FormulaStrip (_settlement.php) as demo tone-boxed chips (ring-1 ring-inset tints per term, centered, text-lg operators). Second signature widget. 3. Correct the active-tab underline + label color in index.php (brand-600 underline, text-brand-700 active label) — affects every tab on every pane. 4. Align the Charges status Segmented control (_charges.php): rounded-xl container p-1, rounded-lg px-3 buttons, active text-brand-700. 5. Normalize chip padding: invoice status chips to px-2.5 py-0.5 + ring (matching demo Badge and the Earnings pane), including the JS-built doc chip. 6. Sweep the small deltas: Charges select h-10; wide (10-col) Earnings + Charges tables to px-3 (compact); shell rhythm mb-6 -> mb-5. 7. Run npm run build:css and browser-verify each tab side-by-side against the demo at /shop/finance/*. ### Services + Packages **Parity ~55%** · 2H / 4M / 2L The five-tab shell (PageHeader, Segmented tabs, showInactive control) is close, but the card body is a different composition from the demo: the portal ships a gradient banner-header card (tw-catalog-card, h-28 colored strip + centered icon), while the demo uses a horizontal Card with a square left thumbnail, badges-above-name, and a text-lg price. Structure and price-treatment diffs dominate; roughly 55% visual parity. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | structure | Portal service/routine/addon/bundle/package cards (article.tw-catalog-card, ~line 292) render a full-width gradient banner header (`relative flex h-28 items-center justify-center ... rounded-t-2xl bg-gradient-to-br` + centered lucide icon) then a body. The demo ServicesGrid/BundlesGrid use `` (= `rounded-2xl bg-white shadow-card ring-1 ring-slate-900/5`) with a HORIZONTAL top row: a `size-24` rounded-2xl square Thumb on the start side, then a min-w-0 column holding badges+actions on row one and the name (`text-base font-bold`) on row two. No gradient banner, no centered icon. This is the dominant visual gap on the surface. | Replace the banner-header body with the demo layout: card = `group flex flex-col rounded-2xl bg-white p-4 shadow-card ring-1 ring-slate-900/5`; inside a `flex items-start gap-3` row put `
` (image or fallback icon size-8) then a `min-w-0 flex-1` column with badge/status + LifecycleActions on top and `p.mt-2 truncate text-base font-bold text-ink` name below. Drop $thumbTints/gradient strip and the h-28 header. | `views/shop-service/index.php` | | H | color | Service price (~line 322) is a small accent PILL: `inline-flex ... rounded-full bg-accent-50 px-2.5 py-0.5 text-xs font-semibold text-accent-600`. The demo shows the service price as a large plain figure via `` (no pill, no accent bg), right-aligned in a `mt-3 flex items-center justify-between` row opposite the duration. Bundle price (~line 436) has the same mismatch vs demo `text-lg font-extrabold text-ink`. | For services and bundles, drop the `bg-accent-50 ... text-accent-600` price pill and render the price as `text-lg font-extrabold text-ink tnum` inside a `mt-3 flex items-center justify-between` row, with the Clock duration (`text-xs text-ink-muted`) opposite; keep the struck line-through before-price as `text-xs text-ink-muted tnum` immediately before it. | `views/shop-service/index.php` | | M | spacing | Grid metrics differ. Portal uses `grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3` for every tab (~line 275); the demo uses `grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3`. Portal has a wider gap (gap-5 vs gap-4) and stays 2-column until xl while the demo goes 3-up at lg — a visibly looser, later-breaking grid. | Change every catalogue grid on this surface (services, routines/addons, bundles, packages) to `grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3`. | `views/shop-service/index.php` | | M | color | Badges don't match the demo Badge primitive. Portal category badge (~line 303) = `bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-600` (no ring, text -600). Demo Badge tone='purple' = `bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-600/12`. The $badges() Inactive chip (~line 106) = `bg-slate-200 text-ink-soft` vs demo slate `bg-slate-100 text-ink-soft ring-1 ring-inset ring-slate-300/50`; Hidden chip (~line 109) = `bg-amber-100 text-amber-700` vs demo amber `bg-[#FDF3DC] text-[#8A6516] ring-[#E8A833]/25`. | Give badges the demo tone recipe: category -> `bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-600/12`; Inactive -> `bg-slate-100 text-ink-soft ring-1 ring-inset ring-slate-300/50`; Hidden -> `bg-[#FDF3DC] text-[#8A6516] ring-1 ring-inset ring-[#E8A833]/25`. Add ring-1 ring-inset to all pill badges. | `views/shop-service/index.php` | | M | color | Lifecycle action buttons ($lifecycle, ~line 119) use wrong idle/hover colors vs the demo LifecycleActions. Portal eye button hovers `hover:bg-amber-50 hover:text-amber-600` and the power/active button is `text-ink-muted hover:bg-brand-50 hover:text-brand-600` regardless of state. Demo: visibility idle reflects state (`hidden ? 'text-amber-500 hover:bg-amber-50' : 'text-ink-muted hover:bg-slate-100 hover:text-ink'`) and the active button reflects state (`active ? 'text-accent-600 hover:bg-accent-50' : 'text-st-cancelled hover:bg-red-50'`). Portal's power icon never turns accent-green when active or red when inactive. | Match demo per-state coloring: eye -> `text-amber-500 hover:bg-amber-50` when hidden else `text-ink-muted hover:bg-slate-100 hover:text-ink`; active/power -> `text-accent-600 hover:bg-accent-50` when active else `text-st-cancelled hover:bg-red-50`. Keep edit `hover:bg-brand-50 hover:text-brand-600` and delete `hover:bg-red-50 hover:text-st-cancelled`. | `views/shop-service/index.php` | | M | structure | Tab bar + showInactive control diverge from the demo (~lines 193-209). Demo Segmented = `inline-flex items-center gap-0.5 rounded-xl bg-slate-100 p-1`, active tab `bg-white text-brand-700 shadow-xs`, idle `text-ink-muted hover:text-ink`, no per-tab count pill. Portal tab bar = `rounded-2xl bg-white p-1 shadow-card ring-1 ring-slate-900/5`, active `bg-brand-600 text-white`, with a count pill per tab. Demo showInactive is a plain Toggle switch beside a `text-xs font-semibold text-ink-soft` label; portal renders a rounded pill button (`rounded-full ... shadow-card ring-1`). | For parity: tab container `inline-flex items-center gap-0.5 rounded-xl bg-slate-100 p-1`, active `bg-white text-brand-700 shadow-xs`, idle `text-ink-muted hover:text-ink`; fold the count into the label text. Replace the showInactive pill-link with a Toggle switch + `text-xs font-semibold text-ink-soft` label. Lower priority than card body — flag for product decision (the tabbed shell is a portal-specific adaptation). | `views/shop-service/index.php` | | L | structure | Freebie FREE marker differs (~line 371). Portal puts a `bg-white/90 text-accent-600 text-[11px] font-bold` FREE pill on the gradient banner. Demo FreebieGrid uses `` (= `bg-accent-50 text-accent-700 ring-1 ring-inset ring-accent-500/15`) inline in the badge row, and the freebie duration is `inline-flex items-center gap-1 text-xs text-ink-muted` + Clock (no slate pill); portal wraps it in a `bg-slate-100 ... rounded-full` chip (~line 387). | Render the FREE marker as a teal Badge (`bg-accent-50 text-accent-700 ring-1 ring-inset ring-accent-500/15`) in the badge row of the reworked card, and show the freebie duration as plain `inline-flex items-center gap-1 text-xs text-ink-muted` + Clock instead of a slate pill. | `views/shop-service/index.php` | | L | structure | package/index.php (~line 120) and package/subscriptions.php (~line 84) also use the gradient banner-header card (`h-28 ... bg-gradient-to-br` + status chip on the strip) rather than the demo Card layout, and package/index price is an accent pill (`bg-accent-50 text-accent-600`, ~line 184) instead of `text-lg font-extrabold text-ink`. These should track whatever the services surface adopts so all three catalogue surfaces stay consistent. | Once shop-service cards are reworked to the demo Card layout, apply the same square-thumb + badges-above-name + `text-lg font-extrabold text-ink` price treatment to package/index.php and package/subscriptions.php (they currently share the tint/banner pattern). | `views/package/index.php` | **Plan:** 1. Rework the catalogue card body across the surface: drop the tw-catalog-card gradient banner header + $thumbTints, and rebuild each card as the demo Card — `group flex flex-col rounded-2xl bg-white p-4 shadow-card ring-1 ring-slate-900/5` with a `flex items-start gap-3` row (square `size-24 rounded-2xl bg-slate-100` thumb on start; min-w-0 column with badge+actions on top and `text-base font-bold text-ink` name below). 2. Fix the price treatment: for services and bundles replace the accent price pill with a plain `text-lg font-extrabold text-ink tnum` figure in a `mt-3 flex items-center justify-between` row opposite the Clock/duration, keeping any struck before-price as `text-xs text-ink-muted line-through`. 3. Align grid metrics: switch every tab's grid to `gap-4 sm:grid-cols-2 lg:grid-cols-3` (from `gap-5 ... xl:grid-cols-3`). 4. Bring badges onto the demo tone recipe (add ring-1 ring-inset; category `text-brand-700 ring-brand-600/12`; Inactive slate-100 ring; Hidden #FDF3DC/#8A6516), and give the FREE marker the teal Badge treatment inline. 5. Match lifecycle-button per-state colors (eye amber-when-hidden; power accent-when-active / st-cancelled-when-inactive). 6. (Product decision) Reconcile the tabbed shell: consider the demo Segmented (`bg-slate-100 p-1`, active `bg-white text-brand-700 shadow-xs`, count in label) and a real Toggle for showInactive instead of the brand-filled pill tabs + pill toggle. 7. Propagate the same card rework to package/index.php and package/subscriptions.php so all three catalogue surfaces stay consistent. ### Notifications **Parity ~58%** · 2H / 4M / 2L The portal reproduces the PageHeader block faithfully, but the feed itself is a substantial visual reinterpretation rather than a port of the demo: the demo is a single width-capped Card (max-w-3xl, p-0) holding a divide-y list of compact rows with a uniform brand Bell chip and a teal unread dot, whereas the portal renders each notification as its own full-width standalone shadow-card with a left accent bar, purple unread indicators, per-module colored icon chips, and a two-line title/body/timestamp layout. Structurally recognizable but noticeably richer and differently colored than the source of truth. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | structure | Demo wraps the whole feed in ONE Card `rounded-2xl bg-white shadow-card ring-1 ring-slate-900/5` with `max-w-3xl p-0`, and renders rows as `
  • ` inside `
      ` (hairline-separated, no per-row shadow/ring). Portal (line 123-166) drops the container Card entirely, has no max-width cap, and renders each notification as an independent `
      ` in a `space-y-3` stack. Result: full-bleed stack of floating cards vs a single contained divided list. | Wrap the feed in a single `
      ` with a `divide-y divide-slate-100` list inside; change each `
      ` from a shadowed rounded card to a plain row (`px-5 py-3.5`, no rounded-2xl / shadow-card / ring per row). | `views/notifications/index.php` | | H | color | Unread indicator uses the wrong semantic color. Demo unread dot is `bg-accent-500` (teal) at `absolute -end-0.5 -top-0.5 size-2.5 ring-2 ring-white` on the chip. Portal uses purple `bg-brand-500` for the corner/inline dot (lines 98, 152) AND adds a purple left accent bar `before:bg-brand-500` + ring `ring-brand-500/25` (lines 130-131, 134) that the demo has no equivalent for. | Recolor unread affordances from brand→accent: dot `bg-accent-500`; drop the `before:` left-accent bar and the `ring-brand-500/25` unread ring (demo has neither) or, if kept, tint them accent, not brand. Position the unread dot on the icon chip (`-end-0.5 -top-0.5 size-2.5 ring-2 ring-white`) instead of beside the title. | `views/notifications/index.php` | | M | color | Icon chip differs in color strategy and size. Demo uses a single uniform chip `grid size-9 rounded-xl bg-brand-50 text-brand-600` with one `Bell` icon `size-4` for every row. Portal (lines 48-64, 142-143) uses `size-10` chips with per-module multicolor tints (sky/accent/amberbrand/st-cancelled/slate) and per-module Lucide icons at `size-5`. | To match parity, make the chip `size-9 rounded-xl bg-brand-50 text-brand-600` with a `bell` icon at `size-4`. If per-module iconography is a deliberate portal enhancement, at minimum reduce chip to `size-9` and icon to `size-4` and default the tint to `bg-brand-50 text-brand-600`. | `views/notifications/index.php` | | M | typography | Title element and weight logic diverge. Demo renders title as a `

      ` sized `text-sm`, bold ONLY when unread (`text-sm font-bold text-ink` vs `text-sm text-ink`). Portal renders an `

      ` at `text-[15px] font-bold leading-snug tracking-tight text-ink` that is ALWAYS bold regardless of read state (line 148), so read items look heavier than the demo. | Change title to `text-sm` and gate the weight on read state — `font-bold` for unread, normal weight for read — matching the demo; drop `text-[15px]`/`tracking-tight` on this element. | `views/notifications/index.php` | | M | structure | Row content structure adds a block the demo doesn't have. Demo row is two lines: title `

      ` + timestamp `

      {date}

      ` (no icon). Portal adds a separate message paragraph (`mt-1 text-sm text-ink-soft`, line 157) AND a timestamp row with a `clock` Lucide icon (`size-3.5`, lines 160-162), producing a three-line row with iconography the demo lacks. | Collapse to the demo's two-line row: title then a plain `text-xs text-ink-muted` timestamp with no clock icon. If the message line is intentionally kept, at least drop the clock icon so the timestamp matches the demo's bare `

      `. | `views/notifications/index.php` | | M | spacing | Mark-all button is far smaller than the demo's Button. Demo uses `Button variant=secondary size=md` = `h-11 px-5 text-[15px] gap-2 rounded-full` + `bg-white text-ink ring-1 ring-inset ring-slate-200 hover:bg-brand-50 hover:ring-brand-200`. Portal (lines 101-105) uses `px-3.5 py-1.5 text-xs font-semibold text-ink-soft` with `border border-slate-200` and a bare `shadow-xs` — a pill roughly half the height and two type-steps smaller, and border instead of ring. | Match the secondary Button: `h-11 px-5 text-[15px] gap-2 rounded-full bg-white text-ink ring-1 ring-inset ring-slate-200 hover:bg-brand-50 hover:ring-brand-200` (drop `border`, `text-xs`, `text-ink-soft`, `shadow-xs`); icon `size-4`. | `views/notifications/index.php` | | L | structure | Portal adds an extra 'New count' pill in the header actions row (lines 97-100: `rounded-full bg-brand-600/10 px-3 py-1 text-xs font-bold text-brand-700` with a `bg-brand-500` dot) that has no counterpart in the demo's PageHeader (demo actions = just the Mark-all button). | Remove the standalone 'New' count pill from the actions row to match the demo, which surfaces the unread count only in the subtitle, not as a header badge. | `views/notifications/index.php` | | L | structure | Empty state is a richer bespoke block than the demo. Demo empty state is a single line inside the card: `

      You're all caught up.

      `. Portal (lines 112-120) builds an illustrated tile (`size-14 rounded-2xl bg-brand-50`, `bell-off` icon, an `

      ` heading, and a paragraph) at `py-16` inside its own shadow-card. | To match parity, reduce the empty state to a single `text-sm text-ink-muted` centered line (`px-5 py-10`) inside the same container Card, or keep the illustrated version only if the enhancement is intentionally out of scope for parity. | `views/notifications/index.php` | **Plan:** 1. Reunify the feed into one container: wrap rows in a single `max-w-3xl` Card (`rounded-2xl bg-white shadow-card ring-1 ring-slate-900/5`) with a `divide-y divide-slate-100` list; strip per-row rounded-2xl/shadow-card/ring so rows become hairline-separated lines (px-5 py-3.5) instead of floating cards. 2. Recolor unread affordances from brand(purple) to accent(teal): unread dot `bg-accent-500` positioned on the icon chip (`-end-0.5 -top-0.5 size-2.5 ring-2 ring-white`); remove the purple left `before:` accent bar and `ring-brand-500/25` unread ring that the demo has no equivalent for. 3. Normalize the icon chip to the demo: `size-9 rounded-xl bg-brand-50 text-brand-600` with a `bell` icon at `size-4` (down from size-10 chip / size-5 icon); default tint to brand-50 even if per-module icons are kept. 4. Fix title typography: use `text-sm` on the title and apply `font-bold` only when unread (read rows render at normal weight), dropping the always-bold `text-[15px] tracking-tight`. 5. Collapse each row to the demo's two-line shape (title + bare `text-xs text-ink-muted` timestamp, no clock icon); drop the extra message paragraph and the clock glyph, or at minimum remove the clock icon. 6. Restore the Mark-all button to the secondary Button spec: `h-11 px-5 text-[15px] gap-2 rounded-full bg-white text-ink ring-1 ring-inset ring-slate-200 hover:bg-brand-50 hover:ring-brand-200`, icon size-4. 7. Remove the extra 'New' count pill from the header actions row so only the Mark-all button remains, matching the demo PageHeader. 8. Simplify the empty state to a single centered `text-sm text-ink-muted` line (px-5 py-10) inside the container Card unless the illustrated version is deliberately retained. 9. After class changes, run `npm run build:css` so the Tailwind bundle reflects the edits (including any classes referenced only from JS). ### Settings (5 tabs: General · Scheduling · Payments · Commercials · Notifications) **Parity ~78%** · 2H / 3M / 3L Notifications, Commercials, Payments and Scheduling are strong ports of the demo (card shells, tables, pill rows and usage tiles match class-for-class). The dominant parity gaps are systemic: field LABELS across every tab drop the demo's Field/SectionLabel style (bold ink text + brand accent bar) for a lighter text-xs muted label, and the top tab bar plus the General tab diverge in shape/structure from the demo's Segmented pill and single compact card. Roughly 78% visual parity. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | typography | Every field label uses the local $label helper `mb-1.5 block text-xs font-semibold text-ink-soft` (line 50), but the demo renders all Field labels via SectionLabel: `flex items-center gap-2 text-sm font-bold text-ink` PLUS a `h-3.5 w-[3px] shrink-0 rounded-full bg-brand-500` accent bar. Portal labels are smaller (text-xs vs text-sm), lighter (font-semibold vs font-bold), muted (text-ink-soft vs text-ink) and drop the brand accent bar. Repeats on _scheduling.php labels (text-xs font-semibold text-ink-soft, lines 109/137/161/190/210/237) and _payments.php deposit-% label (line 117). | Add a shared SectionLabel-style label helper rendering `{text}` and use it for all field labels across _general/_scheduling/_payments (replace every `text-xs font-semibold text-ink-soft` label span). | `views/settings/_general.php` | | H | structure | General tab is `max-w-4xl space-y-5` (line 60) with FIVE stacked section cards (Quick info, Media, Basic Information, Location, Additional Information) + a Bank card. The demo General is ONE `Card max-w-2xl p-5` with a single CardHeader and 4 fields (Commercial name, Email, Owner mobile, Bank, IBAN). Biggest visual divergence of the surface — documented merge of the legacy /shop-settings profile — changing width, card count and rhythm vs the demo. | Acknowledged intentional merge — for closer parity at minimum narrow the container to the demo `max-w-2xl`, or explicitly record the divergence in the parity doc. Section headers already match demo CardHeader via Aurora::sectionHead, so the label+width fixes carry most of the visual gain. | `views/settings/_general.php` | | M | structure | Top tab switcher is a pill: `inline-flex gap-0 rounded-full bg-slate-100 p-0.5` (line 47) with `rounded-full px-4 py-1.5` buttons. Demo Segmented is `inline-flex items-center gap-0.5 rounded-xl bg-slate-100 p-1` with `rounded-lg px-3 py-1.5` buttons. Portal uses fully-round (rounded-full) vs the demo's rounded-xl container / rounded-lg buttons, gap-0 vs gap-0.5, p-0.5 vs p-1, px-4 vs px-3. Active state (bg-white text-brand-700 shadow-xs) matches, but the shape reads different; portal also adds icons the demo lacks. | Change the tab container to `inline-flex items-center gap-0.5 rounded-xl bg-slate-100 p-1` and each tab button to `rounded-lg px-3 py-1.5` to match the demo Segmented primitive. Keep icons only if intended, else drop for exact parity. | `views/settings/index.php` | | M | spacing | Commercials data rows render `divide-y divide-slate-100 bg-slate-50 rounded-b-2xl` (line 102) with each row `flex items-center justify-between px-5 py-3`. Demo wraps DataRows in an inner `rounded-2xl bg-slate-50 px-4 py-1` block and each DataRow is `flex items-baseline justify-between gap-4 py-2` (no per-row horizontal padding, py-2 not py-3, no divider lines). Portal rows are taller and add divider borders the demo lacks. | Put rows inside an inner `rounded-2xl bg-slate-50 px-4 py-1` container (not a full-bleed slate card body), use `flex items-baseline justify-between gap-4 py-2` per row, and drop the `divide-y divide-slate-100` borders. | `views/settings/_commercials.php` | | M | typography | Commercials row LABEL uses `text-xs font-semibold text-ink-soft` (line 105); the demo DataRow label is `text-sm text-ink-muted` (larger, regular weight, muted tone). The value side `text-sm font-medium text-ink` matches demo except the demo also adds `tnum` for tabular figures. | Change the row label span to `text-sm text-ink-muted` and add `tnum` to the value span (`text-sm font-medium text-ink tnum`) to match the demo DataRow. | `views/settings/_commercials.php` | | L | structure | Time Format Segmented buttons read `24h` / `12h` in that order with `rounded-lg px-4 py-1.5` (lines 214/218). Demo Segmented options are `12-hour` / `24-hour` (12h FIRST) with `rounded-lg px-3 py-1.5`. Label text, option order, and horizontal padding (px-4 vs px-3) all differ. | Reorder to 12h first, relabel to `12-hour` / `24-hour`, and use `px-3` (not px-4) on the buttons. Container `rounded-xl bg-slate-100 p-1` already matches the demo. | `views/settings/_scheduling.php` | | L | color | Scheduling inputs use `bg-slate-50` with `focus:bg-white` (e.g. line 117 and the other selects/inputs); the demo Field Input/Select/TimePicker baseControl uses `bg-white` (no slate-50 resting fill, no focus bg swap). General-tab inputs correctly use `bg-white` ($control, line 46), so Scheduling is internally inconsistent with both the demo and the General tab. | Change Scheduling select/number/text inputs from `bg-slate-50 ... focus:bg-white` to `bg-white`, keeping the shared focus ring `focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20`, to match the demo baseControl and the General tab. | `views/settings/_scheduling.php` | | L | color | Usage-tile overage line uses `text-rose-600` (line 161); the demo UsageStat overage line uses `text-st-cancelled` (the semantic cancelled token, #dc5757). rose-600 (#e11d48) is a visibly different red, and this is a token-vs-raw-slate/rose mismatch. | Change the overage `

      ` color from `text-rose-600` to `text-st-cancelled` to match the demo's semantic token. | `views/settings/_notifications.php` | **Plan:** 1. Introduce a shared SectionLabel-style field-label helper (text-sm font-bold text-ink + brand-500 accent bar) and swap it in for every field label across _general.php, _scheduling.php and _payments.php — the single highest-impact fix, touching all form tabs. 2. Align the top tab switcher (index.php) to the demo Segmented: container rounded-xl bg-slate-100 p-1 gap-0.5, buttons rounded-lg px-3 py-1.5; decide whether to keep the extra tab icons. 3. Fix the Commercials data-row block: inner rounded-2xl bg-slate-50 px-4 py-1 wrapper, per-row flex items-baseline py-2 with no divider borders, label text-sm text-ink-muted, value + tnum. 4. Normalize Scheduling input fills from bg-slate-50/focus:bg-white to bg-white to match the demo baseControl and the General tab. 5. Reorder + relabel the Time Format segmented to 12-hour/24-hour (12h first) with px-3 buttons. 6. Swap the Notifications usage-tile overage color rose-600 → st-cancelled. 7. Decide on the General tab structure: accept the documented multi-card /shop-settings merge (annotate the parity doc) or narrow the container to max-w-2xl to reduce the width divergence from the demo. ### Marketing / Promo codes (frontend/views/promo-code/index.php ⇄ shop/Marketing.tsx → marketing/Deals.tsx) **Parity ~80%** · 2H / 3M / 3L The portal is a deliberately richer, real-data version of the demo's minimal DealsManager (7 columns + filter form + status + pager vs the demo's 5-column read-only table), and the shared chrome — PageHeader classes, Card shell (rounded-2xl bg-white shadow-card ring-1 ring-slate-900/5), table header typography (text-[11px] font-bold uppercase tracking-[0.08em]) — matches the demo primitives closely. The real parity gaps are at the pill/badge level (portal chips drop the demo Badge's ring-1 ring-inset, use px-3 py-1 vs px-2.5 py-0.5, and text-*-600 vs the demo's text-*-700) plus a few token deltas in the usage bar and hover tint. Structurally faithful; visually ~80%. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | color | Discount chip is a flat pill: bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-600 with NO ring. The demo equivalent is Badge tone="purple" = bg-brand-50 text-brand-700 ring-brand-600/12 with the base PILL classes rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset. Portal is missing the ring, uses text-brand-600 (demo text-brand-700), and looser px-3 py-1 (demo px-2.5 py-0.5). | Match the demo Badge: change the discount chip to inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset bg-brand-50 text-brand-700 ring-brand-600/12 (keep whitespace-nowrap tnum). | `views/promo-code/index.php` | | H | color | Status chips via Aurora::badgeTone() render bg-accent-50 text-accent-600 / bg-slate-100 text-ink-soft / bg-[#fbeaea] text-st-cancelled with NO ring, and the view wraps them in px-3 py-1. Every demo Badge carries ring-1 ring-inset ring-*/12-25, px-2.5 py-0.5, and darker -700 text (e.g. red = bg-[#FBEAEA] text-[#B43A3A] ring-[#DC5757]/20, success = accent-700). Portal pills read flat and brighter than the demo's ringed pills. | Add ring-1 ring-inset + matching ring token and bump text to -700 in the badgeTone map (success: bg-accent-50 text-accent-700 ring-accent-500/15; neutral: bg-slate-100 text-ink-soft ring-slate-300/50; danger: bg-[#FBEAEA] text-[#B43A3A] ring-[#DC5757]/20), and change the status-chip wrapper padding from px-3 py-1 to px-2.5 py-0.5. | `components/Aurora.php` | | M | structure | Usage cell composition differs from the demo. Demo (Deals.tsx) uses w-32 with a flex row 'mb-1 flex justify-between text-xs text-ink-muted' showing count (left) and cap (right) above the Bar. Portal uses mx-auto w-32 text-center with a single font-semibold text-ink 'N / M' line above the bar plus an extra 'Remaining Uses: N' line — heavier weight/darker color and a different split. | To match the demo, render the count/cap as a justify-between text-xs text-ink-muted row above the bar (left=uses, right=cap) instead of a combined bold 'N / M' string; drop the extra Remaining-Uses line or demote it, and left-align the column (demo Table default align is text-start, portal uses text-center). | `views/promo-code/index.php` | | M | color | Usage bar tokens differ from the demo Bar. Portal: track bg-slate-100, fill bg-brand-500. Demo Bar: track bg-navy-900/8, fill var(--color-brand-600) = brand-600. Fill is one step lighter and the track is a solid slate vs the demo's translucent ink tint (both are h-1.5 rounded-full). | Change the usage-bar track to bg-navy-900/8 and the fill to bg-brand-600 to match the demo Bar primitive. | `views/promo-code/index.php` | | M | color | Row hover tint diverges. Portal rows use hover:bg-brand-50. In the demo, DealsManager rows are NOT clickable (no onRowClick), so the demo table applies no hover tint at all; the DataTable default when hovering is hover:bg-slate-50. Portal adds a brand-50 hover the demo surface does not have. | For strict parity with this surface, drop the row hover tint (rows are non-interactive in the demo). If keeping a hover for the portal's action buttons, use hover:bg-slate-50 to match the DataTable default rather than brand-50. | `views/promo-code/index.php` | | L | color | Delete-action idle color is darker than the demo. Demo delete button: text-slate-300 hover:text-st-cancelled (very light idle icon). Portal: text-ink-soft with hover:bg-[#fbeaea] hover:text-st-cancelled — a much darker idle icon plus a hover background chip the demo doesn't use. | Set the delete icon idle color to text-slate-300 to match the demo; the hover:text-st-cancelled is already correct. Drop the hover:bg-[#fbeaea] chip if mirroring the demo exactly. | `views/promo-code/index.php` | | L | spacing | Table horizontal inset differs. Demo wraps DataTable directly in Card with no extra padding; DataTable here is non-compact so cells/headers use px-4. Portal adds px-2 py-2 on the scroll container AND uses px-3 (compact-style) on every th/td. Net horizontal rhythm is tighter than the demo (px-3 vs px-4) with an extra px-2 gutter. | Remove the px-2 py-2 wrapper on the overflow container and bump cell/header padding from px-3 to px-4 to match the demo's non-compact DataTable (or intentionally keep compact px-3 but drop the outer px-2). | `views/promo-code/index.php` | | L | structure | Page-header copy differs from the demo (classes already match PageHeader exactly). Demo title is 'Marketing' with subtitle '{commercialName} · promo codes & deals'; portal title is 'Promo codes List' with subtitle = shop title only. | Align copy to the demo: title 'Marketing' and append the '· promo codes & deals' descriptor to the subtitle (typography classes need no change). | `views/promo-code/index.php` | **Plan:** 1. Fix the pill system first (highest visual impact): give the discount chip and all Aurora::badgeTone() status chips the demo Badge treatment — ring-1 ring-inset + matching ring token, text-*-700 (not -600), and px-2.5 py-0.5 instead of px-3 py-1. This aligns both the discount and status pills to the demo in one pass. 2. Retune the usage bar tokens to the demo Bar primitive: track bg-navy-900/8, fill bg-brand-600 (from slate-100 / brand-500). 3. Rework the usage cell composition to the demo layout: a justify-between text-xs text-ink-muted count/cap row above the bar (left-aligned column), demoting or removing the bold 'N / M' and 'Remaining Uses' lines. 4. Normalize table spacing to the demo: drop the outer px-2 py-2 gutter and use px-4 cell/header padding (demo non-compact DataTable), or deliberately keep compact px-3 without the extra gutter. 5. Match hover + delete affordances: set row hover to slate-50 (or none, since the demo rows are non-interactive) and set the delete icon idle color to text-slate-300 with hover:text-st-cancelled. 6. Optional copy alignment: rename the header title to 'Marketing' and extend the subtitle with '· promo codes & deals' to match ShopMarketing (classes already correct). ### Dashboard / Home (shop portal — frontend/views/site/index.php) **Parity ~42%** · 2H / 3M / 2L Large structural gap: the portal is still the OLD finance Dashboard (booking-count + finance KPIs, costs donut, deep-link/action cards), while demo v0.19 replaced Home entirely with a schedule-hero layout (5-KPI band, today's-schedule timeline, AttentionFeed + BalancePanel right column, WeekAtAGlance/ThisWeek/RecentActivity/QuickActions bottom band). On the surfaces that DO overlap the type/spacing tokens are largely faithful, but the aurora banner gradient, KPI icon treatment, and several accent colors drift from the demo primitives. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | structure | Portal is the pre-v0.19 finance Dashboard; demo Home.tsx is a completely different surface. Missing entirely: the 5-tile KPI band (today-bookings / expected-value / revenue-week / utilization-ring / team-on-shift), the ScheduleHero today-timeline card (per-booking time + specialist avatar + service + payment chip + tomorrow-preview footer), the right column (AttentionFeed + BalancePanel), and the 4-card bottom band (WeekAtAGlance bars / ThisWeek / RecentActivity / QuickActions). Portal instead shows booking-count KPIs, an upcoming-bookings table, a costs-to-date donut, store-rating, deep-link + action cards — none of which exist in the demo Home. | Track as the primary parity gap: re-port site/index.php to the demo home/ structure (ScheduleHero + RightColumn + BottomBand + 5-KPI band). This is a rebuild, not a class tweak; scope it as its own wave. The audit below covers only the overlapping elements that survive. | `views/site/index.php` | | H | color | Subscription banner (line 114) uses bg-head-shop = linear-gradient(90deg,#3d2960,#594279,#7554a8,#28937b) — a 4-stop darker ramp ending in a muddy teal #28937b. Demo banner uses bg-aurora-h = linear-gradient(90deg,#594279 0%,#7554a8 50%,#2ebf91 100%) — 3 stops, brighter, ending in the true accent teal #2ebf91. The portal banner reads noticeably darker/greener than the demo. | Swap the banner class to the demo aurora-h ramp (add a bg-aurora-h utility = linear-gradient(90deg,#594279 0%,#7554a8 50%,#2ebf91 100%) with an RTL 270deg variant) or redefine head-shop to match; rebuild CSS. | `views/site/index.php` | | M | color | Banner crown icon roundel (line 117) is bg-white/15 with a plain white crown (text-white). Demo uses the same bg-white/15 chip but the Crown is text-amberbrand (#e8a833), giving the banner a gold focal accent the portal drops. | Add text-amberbrand to the crown icon (keep the bg-white/15 chip). | `views/site/index.php` | | M | color | KPI cards (lines 140-184) render flat tinted icon chips (e.g. bg-brand-600/10 text-brand-700, bg-accent-400/15) and a solid full-width top bar (h-1 bg-brand-600). Demo Home passes variant="gradientIcon": each icon roundel gets a diagonal self-gradient (purple 135deg #8360c3→#46345f, teal #5bd0a2→#1c8865, amber #f0bd63→#c9860f, etc.) with white icons, plus a faint linear-gradient(180deg, accent14, transparent 60%) card wash and a thin rounded-t accent bar. Portal cards read flatter and less premium than the demo band. | Give the four booking-count KPIs (and the two finance KPIs) gradientIcon-style roundels: inline linear-gradient(135deg,...) per tone with white icons, add the 180deg accent wash on the card, and use the rounded-t-2xl thin accent bar instead of the square h-1 full bar. | `views/site/index.php` | | M | color | Banner CTA "Manage/upgrade" (line 132) is a solid white pill: bg-white text-brand-700 rounded-full shadow-sm. On the demo dark banner the equivalent action is a frosted glass button: bg-white/12 text-white ring-1 ring-inset ring-white/20 backdrop-blur-md rounded-xl (hover:bg-white/20). Portal's solid-white pill fights the aurora backdrop instead of sitting on it. | Change the banner CTA to the frosted variant (bg-white/12 text-white ring-1 ring-inset ring-white/20 backdrop-blur-md rounded-xl) to match the demo on-gradient button; note demo uses rounded-xl here, not the rounded-full pill. | `views/site/index.php` | | L | color | Costs-to-date donut stroke (line 255) is hardcoded #7c3aed (violet) with a single full-circumference arc; legend dots use #594279/#2ebf91/#e8a833/#4aa6b5 hex literals. #7c3aed is not a Navagoo token (brand-600 is #594279). The demo Home has no costs donut, so there is no reference — but the violet arc clashes with the brand purple used elsewhere on the same page. | If the donut is kept during the interim, recolor the arc from #7c3aed to brand-600 #594279 (or segment it by the four cost-part token colors) so it stays on-palette; ideally this card is removed when Home is re-ported. | `views/site/index.php` | | L | typography | Banner plan title (line 120) is h2 text-base font-bold; demo renders the plan name as p text-sm font-bold. Minor: portal heading is one step larger (16px vs 14px) than the demo's banner label. | Drop the banner title to text-sm to match the demo (font-bold stays); low priority since this block is slated for rebuild. | `views/site/index.php` | **Plan:** 1. PRIMARY: scope a dedicated wave to re-port site/index.php to the demo v0.19 Home structure — 5-KPI band (today-bookings/expected/revenue-week/utilization-ring/team-on-shift), ScheduleHero today-timeline, AttentionFeed + BalancePanel right column, and the WeekAtAGlance/ThisWeek/RecentActivity/QuickActions bottom band. Everything below is interim polish on the current Dashboard. 2. Fix the subscription banner gradient: replace bg-head-shop (4-stop dark ramp ending #28937b) with the demo bg-aurora-h ramp linear-gradient(90deg,#594279 0%,#7554a8 50%,#2ebf91 100%) + RTL 270deg variant; rebuild tailwind.css. 3. Convert the banner CTA to the demo frosted glass button (bg-white/12 text-white ring-1 ring-inset ring-white/20 backdrop-blur-md rounded-xl) and color the crown icon text-amberbrand. 4. Upgrade the KPI cards to the demo gradientIcon treatment: diagonal self-gradient icon roundels (135deg per-tone, white icons), a faint 180deg accent card wash, and a thin rounded-t accent bar instead of the square full-width h-1 bar. 5. Recolor the interim costs-to-date donut arc from the off-palette #7c3aed to brand-600 #594279 (or segment by the four cost-part token colors) so it stops clashing with the brand purple. 6. After class changes, run npm run build:css and browser-verify the banner + KPI band against the demo at :5173 #/shop (both LTR and RTL). ### Chrome — Modals, Drawers, Toasts **Parity ~68%** · 2H / 3M / 2L The modal shell (_tw_modal.php) is a near-perfect class-for-class match to demo Modal.tsx, but the JS-built primitives in aurora-core.js diverge on several dimensions: the toast is a pill at top-center vs the demo's white card at bottom-right, ngConfirm ignores the demo's shared Modal shell entirely (different radius/header/footer/button anatomy), and every backdrop uses bg-ink/50 vs the demo's bg-navy-950/45. | ⚠ | Dim | Issue | Fix | File | |---|---|---|---|---| | H | structure | ngToast is a rounded-full pill (rounded-full px-4 py-2.5) with a solid brand/status fill and white text, mounted top-center (layout ng-toast-root: fixed inset-x-0 top-4 items-center). The demo Toaster (toast.tsx) is a WHITE card: rounded-2xl border border-slate-200 bg-white p-3.5 shadow-pop, a colored icon (text-accent-600 / text-brand-600 / text-[#b8860b]) plus text-sm font-bold text-ink title + text-xs text-ink-muted description + an X dismiss, positioned bottom-right (fixed bottom-5 end-5, w-[min(92vw,360px)]). Completely different visual language, palette, shape, and screen corner. | Rebuild ngToast to match toast.tsx: white card 'pointer-events-auto flex items-start gap-3 rounded-2xl border border-slate-200 bg-white p-3.5 shadow-pop', colored lucide icon (success text-accent-600, info text-brand-600, warning text-[#b8860b]), title 'text-sm font-bold text-ink' + optional description 'text-xs text-ink-muted', X dismiss button. Move ng-toast-root in tailwind.php from 'fixed inset-x-0 top-4 ... items-center' to 'fixed bottom-5 end-5 z-[80] ... w-[min(92vw,360px)] items-stretch'. Then npm run build:css. | `web/js/aurora-core.js` | | H | structure | ngConfirm hand-rolls its own dialog instead of reusing the modal shell, so its anatomy diverges from the demo's confirm.tsx (which renders +