# UI — Shop · Booking detail + status timeline + actions

## Hosts / screens

| Screen | Demo | Ours |
|---|---|---|
| Inline list drawer | `BookingDrawer.tsx` | (our list `index.php` opens the full `view.php` / calendar modal; no inline expanding drawer beneath the row) |
| Calendar detail modal | `BookingDetailModal` (`modals.tsx:1028`) | calendar AJAX modal injecting `_detail_modal.php` via `actionDetailPartial` |
| Full-page detail | (no standalone page in demo) | `frontend/views/booking/view.php` wrapping `_detail_modal.php` |

## Shared body layout

- **Demo**: `@container` 3-col grid — **Details+Payment (left)** · **Services (middle)** · **Timeline+Actions (right)** (`BookingDetailBody.tsx:75-76`). Stacks to 1 col on narrow hosts.
- **Ours**: `md:grid-cols-3` — **Details (left)** · **Services + Payment summary (middle)** · **Status timeline + Actions (right)** (`_detail_modal.php:112`). Payment summary relocated to middle column.

## Column-by-column

### Booking details (left)
- Demo `DataRow`s: Appointment (date · time, shop `timeFormat`), Booked on, Specialist (avatar+name), Mobile (only if present), Payment method (titleCased), and **Group** row when `groupBookingId` (with guest label). `BookingDetailBody.tsx:83-118`.
- Ours: Appointment, Booked on, Specialist (name only — no avatar), Mobile, Payment method. `_detail_modal.php:118-131`. **Gaps:** no specialist avatar in the row; no Group row; Mobile always shown (demo conditional).

### Payment / amounts
- Demo (left col, second card `BookingDetailBody.tsx:120-165`): conditional rows — Discount, Collected online (+ "(deposit)" hint), Collected in person (+ method), Specialist tip (card), **Outstanding** (bold red when `due>0`), Customer refund (+ zone), and bold **Total**.
- Ours (middle col `_detail_modal.php:167-189`): Subtotal, Discount (if >0), **VAT** row, Total. **Gaps:** no Collected-online / Collected-in-person / Tip / Outstanding / Customer-refund rows. **New on ours:** explicit **VAT** line (demo keeps prices VAT-inclusive and splits only in the catalogue editor).

### Services booked (middle)
- Demo: column header Service · Duration · Amount; per-line image thumb (or scissors), name, duration (`totalDuration`), price; footer Total with summed duration + subtotal. `BookingDetailBody.tsx:170-211`.
- Ours: same header + rows + total footer, scissors icon only (no service image), duration from `service_period`, total duration from `getFormattedScheduledDuration()`. Empty state "No services". `_detail_modal.php:135-165`. **Done** (minus per-service image).

### Status timeline + actions (right)
- Demo timeline `BookingTimeline.tsx`: vertical rail, solid done dots / ringed-pulsing current / ghosted-dashed future, "Now" pill on current, per-node `time` + `details[]` lines. Actions grid: solid status buttons (Start Service in teal, Collect&complete with Wallet icon when balance due, disabled No-show with tooltip), secondary Reschedule, danger Cancel. `BookingDetailBody.tsx:214-277`.
- Ours `_timeline.php`: same rail/dot/connector/pulse, **"LIVE"** pill (demo says "Now"). Actions row (`_detail_modal.php:197-238`): Start service (teal accent), Complete (teal), No-show (outline), Cancel booking (red outline), Reschedule (outline).

## Concrete UI gaps (ours missing vs demo)

1. **No timestamps / detail lines in the timeline** — nodes show label + LIVE pill only; demo shows "Booked …", "Completed at …", "Cancelled by … / refund", "Customer did not arrive".
2. **No outstanding / collected / tip / refund payment rows** — only Subtotal/Discount/VAT/Total.
3. **No "Collect & complete" action** with amount + Wallet icon — we show a plain "Complete".
4. **No no-show disabled state / grace tooltip** — button is always enabled.
5. **No Collection / Settlement labeled chips** in the modal header (demo `modals.tsx:1062`).
6. **No classification / new-returning badges** (demo drawer header `BookingDrawer.tsx:46-49`).
7. **No cancel modal** with by-whom selector + refund-zone preview — ours is a bare `confirm()` (`view.php:75`).
8. **No specialist avatar** in the details row; **no service thumbnail** in the services list; **no Group row**.
9. Label wording: ours uses **"LIVE"** vs demo **"Now"**; column header is **"Status"** vs demo **"Status timeline"**.

## RTL / i18n

- Ours is bilingual (ar/en) and uses logical properties (`start-`, `ms-auto`, `text-end`) — RTL-ready (`_detail_modal.php:103`, `_timeline.php:98`). Strings via `Yii::t('frontend', …)`.
- Demo is English-only (LTR, hard-coded strings). i18n/RTL is therefore an ours-ahead area, but several of our new strings (Start service, No-show, Reschedule, Outstanding, Status timeline, Cancel booking) must be verified present in both `common/messages/{ar,en}/frontend.php` — a grep found only 7 of the relevant keys, so coverage needs an audit when the missing rows/actions are added.