# Admin · Settings — UI / Screens / States

Demo: `portals/admin/Settings.tsx`. Ours: `backend/views/settings/{_form,index,view,create,update}.php`.

## Demo screen structure

- **Page header** "Settings" / "Booking workflow, policies, documents & colours" (Settings.tsx:336).
- **Segmented tab bar** (rounded pill group, active = white card on slate-100): *Booking workflow* /
  *Policies & documents* / *Color system* (Settings.tsx:339-354).
- Tab content swaps client-side (Settings.tsx:356-358).

### Tab 1 — Booking workflow (Settings.tsx:82-179)
- A `Card` titled "Booking workflow" with a ghost **Reset to defaults** button (RotateCcw icon) in the header.
- One rounded slate-50 row per FROM status: `BookingBadge` (28px wide) → arrow → wrap of toggle chips.
  - Chip ON: solid status color background (`statusSolid(to)`), white text, leading "✓".
  - Chip OFF: white, slate ring, muted text.
  - Empty allowed set → muted "Final — no onward moves" (Settings.tsx:140-142).
- Right-aligned **Reschedule** pill per row (CalendarClock icon), brand-600 when on, with explanatory `title` tooltip (Settings.tsx:144-167).
- **No-show grace period (min)** `NumberInput` with hint (Settings.tsx:160-168).
- Footer explainer paragraph about Cancel/Reschedule semantics (Settings.tsx:170-176).

### Tab 2 — Policies & documents (Settings.tsx:182-225)
- A `Card` + `DataTable`: Document (icon + name) | Version (mono) | Updated | Status badge (blue=published/slate=draft) | right-aligned **View** link (Download icon, simulated).

### Tab 3 — Color system (Settings.tsx:262-330)
- Intro paragraph + **Reset all (N)** ghost button, disabled when `dirtyCount===0` (Settings.tsx:268-291).
- Responsive grid (1 / 2 / 4 cols) of group cards; each group card lists token rows: a live
  preview (badge or solid ramp chip) + a `ColorPicker` (change / save-default / reset, with aria-label) (Settings.tsx:293-326).

### States
- **RTL**: demo uses logical props throughout (`ms-auto`, `border-s`, `ps-3`) (Settings.tsx:144) — RTL-ready.
- **Empty**: per-row "Final — no onward moves"; color tab disables Reset when clean.
- **Error**: none — it's local store state, no network.

## Our screen structure (`backend/views/settings/_form.php`)

- Page header "Website Settings" / "Manage policies, financial rates and system behaviour" (_form.php:69-72).
- **No tabs.** A single vertical `space-y-6` stack of three white cards:
  1. **Policies & Documents** (_form.php:97-110): six file-upload fields (Terms+Privacy × User/Agent/Shop)
     with a "View current document" link when a file already exists (`$docLink`, _form.php:41-51).
  2. **Financial Settings** (_form.php:113-124): taxes, taxes_type dropdown, platform_commission, max_deposit_percent.
  3. **System Settings** (_form.php:127-149): distance_range, not_paid_bookings_period, and a
     **show_agents** pill switch (sr-only checkbox styled via JS, _form.php:164-189).
- Submit button "Create"/"Update" (_form.php:152-157).
- `index.php` is a separate Tailwind table of website-settings rows (contact/social columns) with
  edit/view actions and a pager (index.php:57-121).
- `view.php` and `create.php` exist; `update.php` is the in-place edit rendered by `actionIndex()`.

## Concrete UI gaps (vs canonical demo)

1. **No tab bar** — our settings is one long form, not the 3-tab demo layout. (missing)
2. **No Booking-workflow editor** — no transition chips, no reschedule pills, no grace input,
   no reset-to-defaults. Entirely absent. (missing)
3. **No Color-system tab** — no token grid, no color pickers, no save-default/reset-all, no live theming. (missing)
4. **Policies surface mismatch** — demo shows a versioned *listing* (version / updated / published-draft
   status / view). Ours is an *upload* form with no version/date/status metadata and no listing table. (partial)
5. **Extra-in-ours, not-in-demo** — Financial Settings card, System Settings card, contact/social
   listing (`index.php`). These belong to other parity areas (financial-config) but are bundled into
   our "Settings" surface. Demo keeps financial config in `GlobalConfig` editors elsewhere, not here.
6. **Broken row action** — `index.php` pencil links to `['update']` which 404s (controller stub throws). (defect)