# Demo Sync Plan — v0.26.0 → v0.28.0 (the 36-commit gap)

**Created:** 2026-07-14 · **Demo range:** `5b8c789` (v0.26.0) → `cb48c8d` (v0.28.0), 36 commits.

## Why this plan exists

The local demo checkout was **36 commits / a full version behind** `origin/dev` while the
aura login re-skin was being done (a `git fetch` had silently failed twice — a network timeout,
then macOS has no `timeout` binary). So the first login/sign-up port matched **v0.26.0** (light
theme); the real screens are **v0.28.0**. This plan catalogues everything in that gap and what,
if anything, still needs porting into the Yii2 portal.

> **LESSON (locked into the playbook):** after `git fetch`, VERIFY it succeeded
> (`git rev-list --count HEAD..origin/dev` == 0) before porting. A timed-out/errored fetch
> leaves `origin/dev` stale.

## The 36 commits split into TWO milestones

| Milestone | Commits | What it is |
|---|---|---|
| **v0.28.0** — aura login + setup wizard | `2f20644`..`85757b3` (5) | Dark animated-aura pre-auth + 4-step first-run setup wizard |
| **v0.27.0** — M9: RTL + full Arabic | `4fae2cd`..`4298a92` (~31) | Made the **demo** bilingual/RTL (it was EN-only) |

**Key insight:** the Navagoo **portal is ALREADY bilingual + RTL** (a hard product requirement —
every string is `Yii::t`, `[dir=rtl]` aware). So M9 is mostly the **demo catching up to the
portal**, NOT features to port back. The genuinely net-new, portable items are small and specific
(below). Do NOT wholesale re-port M9.

---

## Porting skills to use (per the aurora-demo playbook)

- **`aurora-port`** — the porting process for any demo screen/modal (run the demo, see it rendered, wave, verify).
- **`demo-fidelity`** — prop-by-prop transcription: exact classes, resolve every `t()` key, verbatim literals, diff audit. MANDATORY when transcribing demo UI.
- **`i18n-guard`** — bilingual reconciliation (every `Yii::t` key in BOTH `ar/`+`en/`, real Arabic in `ar/`).
- **`verify-portal`** — post-change verification (lint, curl smoke, browser interaction test).
- **`api-impact`** — decide portal-only vs shared-mobile-contract BEFORE any data/API touch.

Read [`ai_specs/00_SYSTEM_INSTRUCTIONS/AURORA_DEMO_PORTING_PLAYBOOK.md`](../00_SYSTEM_INSTRUCTIONS/AURORA_DEMO_PORTING_PLAYBOOK.md) first (esp. the 2026-07-14 PORT STATUS entries for the aura + wizard work).

---

## Phase A — v0.28.0 aura login + setup wizard — ✅ DONE (2026-07-14)

Ported + browser-verified. See the playbook PORT STATUS entry.
- Dark aura login/sign-up/confirmation (`frontend/views/sign-in/{login,signup,signup_pending,_preauth_aura,_lang_toggle}.php`).
- First-run setup wizard (`SetupController` + `frontend/views/setup/*`, migration `m260714_140000`, trigger in `SiteController::actionIndex`).
- Size fix: AdminLTE `body.login-page{display:flex}` shrank the wrapper → added `w-full` + `body.login-page{font-size:1rem}`.

**Remaining follow-up:** exercise the wizard's "Add service / Add specialist" iframe flow on a truly-empty shop (the test shop already had 17 services + 5 specialists).

---

## Phase B — Saudi Riyal symbol ⃁ (M9 `afd7426`) — ✅ DONE (2026-07-16)

Replaced all `"SAR"` text with the Saudi Riyal Unicode glyph ⃁ (U+20C1) across the entire portal.

### What was built
1. **Font:** self-hosted `emran-alhaddad/Saudi-Riyal-Font` (OFL) under `frontend/web/fonts/saudi_riyal/` (woff2/woff/ttf), appended LAST in font stacks (per-glyph fallback for U+20C1 only). `font-weight: 100 900` prevents faux-bold. Backend admin (`backend/web/fonts/`) also has the font.
2. **CSS:** `.riyal` class (inline-block, 400 weight, 0.88em, margin-inline 0.1em) + `.riyal-kpi` variant in both `frontend/web/css/tailwind.src.css` and `backend/views/layouts/tailwind.php`.
3. **PHP helper:** `common\helpers\MoneyHelper` — `money($amount)` returns HTML with `<span class="riyal">⃁</span>` (EN prefix, AR suffix); `moneyPlain($amount)` returns plain text; `riyalHtml()` / `riyalSign()` for the symbol alone.
4. **JS helper:** `ngMoney(v)` + `RIYAL` global in `aurora-core.js` — mirrors PHP helper for client-side rendering.
5. **i18n messages:** all 4 message files (`common/messages/{ar,en}/{backend,frontend}.php`) updated — `'SAR'` key values → `'⃁'`, compound keys (`'{amount} SAR'`, `'Fixed Fee (SAR)'`, etc.) updated.
6. **View files:** ~45 frontend + ~29 backend view files updated to use `MoneyHelper::money()` / `riyalHtml()` / `riyalSign()` instead of `Yii::t('backend', 'SAR')`.
7. **JS files:** `shop-service-form.js`, `booking-new.js` delegate to `ngMoney()`.
8. **Components:** `CalendarFormat.php`, `Aurora.php` delegate to `MoneyHelper`.
9. **Common helpers:** `IdGeneratorHelper::formatCurrency()`, `NotificationHelper` updated.

### API impact
Verified: the only `'SAR'` in the API tier is `'currency' => 'SAR'` (ISO 4217 code in `BookingController.php:752`) — intentionally untouched, the mobile app formats its own currency display.

### Browser-verified
- Dashboard (EN + AR): KPI tiles, needs-attention panel — ⃁ renders correctly, prefix/suffix correct per locale.
- Services page: all service cards show ⃁ with VAT breakdown.
- Finance/Earnings: all KPI tiles, in-store line, earnings table.
- Navagoo Plans: pricing cards, billed descriptions, offer badges.
- Tailwind CSS rebuilt and verified.

---

## Phase C — Arabic webfont (M9 `b8e4b41`) — 🟡 OPTIONAL

Demo switched its Arabic face to **Alexandria** (from IBM Plex Sans Arabic). The **portal uses
Noto Kufi Arabic**. Both are clean Arabic faces; switching to Alexandria is a pure visual-parity
choice, not a functional gap.
- **Work (if desired):** self-host Alexandria under `frontend/web/fonts/navagoo/`, swap the
  `[dir="rtl"] body` `@font-face`/font-family in `frontend/web/css/tailwind.src.css`, rebuild.
- **Skills:** `verify-portal` (screenshot AR pages before/after). **Decision needed from user**:
  keep Noto Kufi (current) or match the demo's Alexandria.

---

## Phase D — RTL polish audit (M9 RTL fixes) — 🟡 AUDIT-DRIVEN

M9 fixed several RTL details in the demo. The portal is already RTL-aware, but should be AUDITED
for the same classes of bug. Candidate checks (fix only what actually reproduces in the portal):
- **Logical insets** (`28f7c80`): `start-*`/`end-*` instead of `left-*`/`right-*` on absolute overlays.
- **RTL-aware overlay animations + header gradient continuity** (`c3dcd64`): drawers/modals sliding the correct way; the head gradient (already has an `[dir=rtl] .bg-head-shop` rule).
- **Digit interpolation + percentage/compact abbreviations in Arabic** (`b2c66c7`, `a2f5300`): Arabic-Indic digits + `٪` tail on percentages, `٢٫١٨م` style compaction.
- **Charts:** peak-hours/heatmap hour-axis labels + donut legend digits localized (`7bca1a8`, `a5fb8c8`).
- **react-grid-layout** dashboard widgets collapsing under `dir=rtl` (`73b4cb8`) — only if the portal uses that lib.
- **Skills:** `verify-portal` (RTL screenshots at 375/768/1440) · `demo-fidelity` for any transcribed fix. **This is a review pass, not a big build.**

---

## Phase E — Bilingual-coverage sweep (M9 i18n externalization) — 🟢 GUARD PASS

M9 externalized **~1,586 keys** in the demo (it had hardcoded EN). The portal already externalizes
strings, but a sweep will catch any leftover hardcoded literals in recently-ported surfaces.
- **Work:** run the `i18n-guard` across `frontend/` (+ the new setup wizard + aura auth) — any
  hardcoded user-facing string → `Yii::t` in both `ar/`+`en/`.
- **Skills:** `i18n-guard` (the project already has a PostToolUse hook enforcing this).

---

## Recommended order

1. **Phase B — Riyal symbol ⃁** (clearest net-new, high visual impact, portal-only). ← start here
2. **Phase D — RTL polish audit** (cheap review; fixes real bugs if any).
3. **Phase E — i18n sweep** (guard pass).
4. **Phase C — Alexandria font** (only if the user wants exact font parity).

Each phase = one `aurora-port` wave (Foundation → Build → Verify) using `demo-fidelity` for
transcription and `verify-portal` before commit. Update this file + the playbook PORT STATUS after
each.