# Admin · Dashboard — UI parity

Demo: `portals/admin/Dashboard.tsx`
Ours: `backend/views/site/index.php` (Tailwind "aurora" reskin) in `backend/views/layouts/tailwind.php`

## Demo screens / components

1. **PageHeader** — title "Dashboard", subtitle "Platform operations · {dateLong(simNow)}",
   primary action **"Process settlements"** → `/admin/finance` (`Dashboard.tsx:80`).
2. **KPI grid** (6 `KpiCard`, responsive 1→2→3 cols) (`:97`):
   - Total Active Shops (caption "across N cities")
   - Today's Bookings (caption "N total in the system")
   - Platform GMV (`moneyCompact`, delta +12.4%)
   - Navagoo Earnings (`moneyCompact`, delta +9.1%)
   - Pending Transfer Requests (caption "{money} awaiting payout")
   - Open Refund Cases
   Each card has icon tone, top-accent color bar, optional delta pill.
3. **Recent bookings card** (xl:col-span-2) — `DataTable` with columns Booking id (mono),
   Shop (ShopTile avatar + name), Customer, Service (line names joined), Value (`Money`),
   Status (`BookingBadge`). "View all" → `/admin/bookings`; row click → `/admin/bookings` (`:150`).
4. **Right rail:**
   - **Settlement queue** — aurora gradient card; 2 glass tiles (Requested count, Total pending
     `moneyCompact`); "Oldest: {shop} · {date}" line; CTA "Process settlements" (`:178`).
   - **Subscription watch** — `Card` listing **every** shop with ShopTile + name + status label,
     and a warn/ok status chip (Clock3 / BadgeAlert / Wallet) (`:213`).

## Our screen (index.php)

- **Header** (`index.php:185`): greeting "Hi, {name}" + long date + shop/All-Shops label.
  No "Process settlements" CTA.
- **Shop selector** (admin/manager): native `<select>` auto-submitting `?shop_id=` (`:203`).
- **Range pills** today/7d/30d + custom date-range form with Apply (`:224`). NEW vs demo.
- **KPI cards** — 4 cards (scheduled/completed/in_progress/cancelled) with top accent + icon chip
  + **trend pill** (`:253`). Different KPIs than demo (booking ops, not finance).
- **Shop Statistics** card (admin only): total/new/active/inactive tiles + last-access line (`:282`).
- **Upcoming bookings** table (xl:col-span-2): #, Shop (admin only), Customer, Appointment time,
  Duration, Specialist. Empty state "No upcoming bookings" (`:320`). No id/value/status columns,
  no avatar tile, no row→detail navigation.
- **Store rating** card: big avg + stars + review count + latest 3 reviews; empty states (`:371`).
- **Charts**: booking-status doughnut, specialist occupancy, specialist hours, new customers,
  returning customers (Chart.js), each with a "No data for the selected range" empty state (`:404`).

## Concrete UI gaps (demo → ours)

| Demo element | Our state |
|---|---|
| "Process settlements" header CTA | Missing — no finance feature |
| Platform GMV / Navagoo Earnings KPI cards | Missing |
| Pending Transfer Requests / Open Refund Cases KPIs | Missing |
| Total Active Shops + city count headline KPI | Partial (in Shop Statistics card, no cities) |
| Today's Bookings + "N total" caption | Missing as a KPI (we show ops-status KPIs) |
| KPI delta pills (+12.4% etc.) | Present, but trend is computed from prior period (different basis) |
| Recent bookings table (id, Shop avatar, Service, Value, Status badge, row→detail) | Partial — we show *upcoming* not *recent*; no id/Service/Value/Status cols, no avatar, no nav |
| Settlement queue rail (aurora card) | Missing |
| Subscription watch rail | Missing |

## Things we have that the demo does NOT
- Date-range filter (today/7d/30d/custom) + period-over-period trend.
- Specialist occupancy %, specialist hours, new/returning customer cohort charts.
- Store rating widget with latest reviews.
- Shop-owner role reuse of the same page (role-scoped).
- RTL: relies on `tailwind.php` chrome + logical props (`start/end`, `ps/pe`); no per-widget RTL issues spotted.