# Shop · Dashboard — UI / Screens / States

Demo: `portals/shop/Dashboard.tsx` · Ours: `frontend/views/site/index.php` (layout `layouts/tailwind.php`)

## Demo screen anatomy (top → bottom)
1. **PageHeader** `Dashboard.tsx:110-131` — title "Welcome back", subtitle `commercialName · dateLong(simNow)`, two actions: secondary "View calendar" + primary "New walk-in booking" (both → `/shop/bookings`).
2. **Subscription banner** `:134-163` — aurora-gradient card (`bg-aurora-h`, white text), crown icon, plan name + optional amber "Free period" badge, trial/next-billing sub-line, "Manage subscription" button → `/shop/finance`.
3. **KPI grid** `:166-198` — 4 `KpiCard`s: Upcoming Bookings (purple), Completed (teal, "realised bookings"), Net Available (navy, withdrawal-eligibility caption), Costs to Date (amber, "fees this period").
4. **Bookings + Costs row** `:201-259`:
   - `Card xl:col-span-2` "Today's bookings" with "View all →" header action + `DataTable` (6 cols incl. Value + SettlementBadge/BookingBadge), clickable rows.
   - Costs `Card` with `Donut` (total in center, "SAR") + 4 colored `CostLine`s + "Detailed charges →" button.
5. **Action cards row** `:262-291` — 3 `ActionCard`s (purple/teal/amber): booking link (Copy link), invite customer, detailed charges.

## Our screen anatomy
1. **Header** `index.php:38-45` — "Hi, {name}", sub-line `asDate('now','long') · shop->title`. **No action buttons** (no View calendar / New booking).
2. **KPI grid** `:48-57` — 4 cards: Scheduled / Completed / In progress / Cancelled (top accent bar + icon chip). Shows the integer only — **no caption, no trend rendered** (trend computed but unused), **no Net Available / Costs cards**.
3. **Upcoming bookings + Store rating row** `:60-106`:
   - Table (5 cols: #, Customer, Appointment time, Duration, Specialist). Empty state present (`:78-79` "No upcoming bookings"). **No Value, no status/settlement badges, no avatars, no "View all", non-clickable rows.**
   - **Store-rating** card (big avg number + 5 stars + review count) — **demo has no rating card on the dashboard**.
4. **No subscription banner. No costs donut. No action cards.**
5. View explicitly notes status/occupancy/customer **charts are un-ported** (`:108-111`).

## State coverage
| State | Demo | Ours |
|---|---|---|
| Empty bookings | row-level (table renders nothing) | explicit "No upcoming bookings" `index.php:79` ✅ better |
| No active plan | "No active plan" / "Subscribe…" `:142,153` | N/A (no subscription) |
| Free-period | amber badge + trial countdown `:143-151` | N/A |
| Withdrawal min not met | KPI caption "Min {amt} to withdraw" `:188` | N/A |
| Zero costs | Donut value 0 `:232` | N/A |
| Empty ratings | — | "—" + grey stars `index.php:97-101` (ours-only) |
| RTL / Arabic | demo is LTR-only mock | ours is RTL-aware via Yii i18n + `text-start` logical classes ✅ |

## Concrete UI gaps (ours vs demo)
1. Missing **header action buttons** (View calendar, New walk-in booking).
2. Missing **subscription banner** entirely.
3. Missing **Net Available** and **Costs to Date** KPI cards (+ their captions).
4. Bookings table missing **Value column**, **status badge**, **settlement badge**, **avatar**, **"View all" link**, **row click-through**.
5. Missing **costs-to-date donut** widget.
6. Missing **action cards** (booking link/copy, invite customer, detailed charges).
7. Ours shows **future** bookings; demo shows recent-first (incl. past).

## UI extras ours has (absent in demo)
- Date-range selector plumbing (`actionDateRange`), trend computation, store-rating card, KPI top-accent styling, RTL support, robust empty state.