# Admin · Bookings — UI

## Demo screen (`portals/admin/Bookings.tsx`)

A single page, `space-y-5`:
- **PageHeader** — title "Booking details", subtitle "Platform-wide bookings across all shops".
  `Bookings.tsx:83`.
- **Filter row** (`flex flex-wrap gap-3`, `:84-105`):
  - `Segmented` status toggle: All · Scheduled · Completed · No-show · Cancelled.
  - `Select` (w-48): "All shops" + one option per shop (`commercialName`).
- **Card → DataTable** (`:107-109`) with 7 columns (see logic.md). Status badge centered, Value
  right-aligned. Shop cell = ShopTile avatar + name.
- **Footer line** (`:111-113`): muted `N of M bookings`.
- **Empty state**: provided by the shared `DataTable` component when `rows` is empty.
- **States**: no explicit loading/error in this screen (Zustand store is synchronous in-memory).
  RTL is handled globally by the demo shell, not in this file.

## Our screen (`backend/views/booking/index.php`, Tailwind, layout `tailwind`)

- **Header** (`:120-127`): `calendar-check` lucide icon + "Booking Details". No subtitle.
- **Filter row** (`:130-207`): a real GET `<form>` with 10 controls — Booking ID (search input),
  Shop Name, City, District, Customer Name, Gender (selects), Customer Mobile (text), Booking Date
  + Appointment Date (range inputs), Status (select). Plus Search button and conditional Reset link
  (`$hasFilters`). Much wider than the demo.
- **Table** (`:210-348`): 28 columns in a horizontally-scrollable card. Status → colored pill via
  `$statusChip` (`:54-61`, 5 chip styles matching demo hues). Customer + Specialist cells use a
  deterministic oklch initials avatar (`$avatar`, `:64-76`) — analogous to demo's ShopTile but for
  people. Total formatted `SAR x.xx`. Per-row "view" (eye) action.
- **Empty state** (`:246-247`): `colspan=28` "No results found." centered, muted. (done)
- **Footer** (`:351-362`): `getDataProviderSummary()` + on-brand `LinkPager` server pagination.
- **RTL**: uses logical props (`text-start`, `ps-9`, `start-3`) so it flips correctly under the
  ar locale. (done)

## Concrete UI gaps
1. **Subtitle** — demo has "Platform-wide bookings across all shops"; ours has none. Minor. (partial)
2. **Segmented status control** — demo uses an inline segmented toggle (All/Scheduled/Completed/
   No-show/Cancelled); ours is a `<select>` inside the filter form. Functionally equal, visually
   different. (partial)
3. **Shop avatar** — demo shows a ShopTile (logo-hue tile) beside the shop name; our table shows
   shop name as plain text (avatars are on customer/specialist instead). Cosmetic. (partial)
4. Everything else: ours is a strict visual+functional superset (more columns, real filters,
   pagination, reset, view action). No missing demo UI element of substance.

Overall the UI is **done with extras**; only cosmetic deltas (subtitle, segmented-vs-select,
shop tile) remain.