# Admin · Shops — UI / Screens Parity

Demo: `portals/admin/Shops.tsx` · Ours: `backend/views/shop/{index,_form,activate,status,view,create,update}.php`

---

## Demo screens

### A. Page shell (`Shops.tsx:38-86`)
- `PageHeader` "Shops" / "Directory, configuration, plans & subscriptions" with an **Add shop** button (only on the `shops` tab).
- `Segmented` 4-way tab: `Shops (N)` · `Requests (n)` · `Subscription Plans` · `Subscription Dashboard`.
- Modals: `ShopFormModal` (create/edit) and `ActivateModal`, layered over the page.

### B. Shops directory table (`ShopsTable`, `Shops.tsx:89-200`)
Columns: Shop (avatar tile + name + mono id) · City · Type badge (`all`→"Unisex") · VAT badge (Registered/No) · Marketing `%` · **Status** (Pending badge / Grace badge / active-inactive `Toggle` with confirm-on-deactivate) · Deep-link "open" external anchor · Edit pencil. Row click → edit.

### C. Shop form modal (`ShopFormModal`, `Shops.tsx:204-345`)
`lg` modal, 3 sections: **Basic info** (commercial name, email, owner mobile, city, type select) · **Store details** (bank, IBAN, marketing fee %, deposit % cap) · **Settings & transfer thresholds** (VAT toggle card "15% VAT on services", min withdrawal, credit limit `carryForwardThreshold` "blank = inherit global", settlement hold days). Footer Cancel / Create|Save gated on name+email.

### D. Requests queue (`RequestsQueue`, `Shops.tsx:351-457`)
EmptyState when none. Table: Shop · Owner contact (email + mobile) · Submitted-at date · actions **Activate** (primary) / **Reject** (secondary, confirm + danger).

### E. Activate modal (`ActivateModal`, `Shops.tsx:474-541`)
`lg` modal, sections: **Documents** (6 file pickers: cr, vatCert, shopPermit, bankCert, nationalAddress, enrolmentAgreement) · **Commercials** (marketing fee, min withdrawal, settlement hold days, deposit % cap, carry-forward threshold) · **Bank details** (bank name, IBAN) · **Taxable entity** (VAT toggle). Confirm → toast.

### F. Plans (`PlansView`, `Shops.tsx:543-658`)
Grid of plan cards (crown icon, name, monthly Money + `/mo`, 6-mo/12-mo/trial line, top-4 features, hover delete). "New plan" modal: name, monthly price, free-period days; note that 6/12-mo auto-discount.

### G. Subscription dashboard (`SubscriptionDashboard`, `Shops.tsx:660-755`)
Table: Shop · Plan (or "None") · Status badge · Next billing + relative days · masked card. EmptyState "No shops".

---

## Our screens

### index.php — directory (`backend/views/shop/index.php`)
Tailwind "aurora" full-page table (not modal-driven). 4 stat cards (Total / New / Active / Not-active, `index.php:108-127`). GET filter row: Shop ID, name, city, category, mode, status (`index.php:130-183`). A **very wide ~31-column** table: serial, shop id, name, country, city, district, address (maps link), categories, email, mobile, created, gender, rate, total services, total bookings, commercial name, taxable Yes/No, bank, IBAN, 6 document file-links, phone-verified icon, contract-accepted icon, **Mode toggle (Live/Demo)**, **Status chip** (links to activate or status), **Social** chip, actions (social / edit / view). LinkPager footer.

### _form.php — create/edit (`backend/views/shop/_form.php`, 745 lines)
Full-page Tailwind form. Fields incl. commercial_name, bank_name, iban_number, `max_deposit_percent_override` (1–100), is_taxable bespoke checkbox, `minimum_withdrawal_amount` (default 5000), `minimum_elapsed_period_days` (default 7 — settlement-hold analogue), document uploads, address/district/schedule/payment. **No marketing-fee field. No carry-forward/credit-limit field.**

### activate.php / status.php / view.php
`activate.php` (751 lines) — onboarding/activation form (docs + status). `status.php` (328 lines) — reject/activate with reason. `view.php` (538 lines) — read-only detail. All Tailwind-reskinned.

---

## Concrete UI gaps

1. **No tabbed IA.** Demo's single page with 4 segments vs our single directory + separate routed pages. Requests, Plans, Subscriptions tabs are absent.
2. **No Requests queue screen** with owner-contact + submitted-at + inline Activate/Reject. We funnel through status chip → routed activate/status pages.
3. **No Subscription Plans UI** (cards + create modal) — entirely missing.
4. **No Subscription Dashboard** (plan/status/next-billing/card per shop) — entirely missing.
5. **No marketing-fee % column or field** in our list/form (demo shows it in table + both modals).
6. **No deep-link column** / "open" anchor (no deep link stored).
7. **No Grace badge** in the status cell (no grace-window data).
8. **Status as inline toggle**: demo flips active/inactive inline with a confirm; ours routes to a status page.
9. **Add-shop is a modal in demo**, a full page for us (acceptable Tailwind-migration divergence — `create.php` wraps `_form`).
10. **Empty states**: demo uses explicit `EmptyState` components (requests, subscriptions). Our table shows a single "No results found" row (`index.php:226`) — adequate for the directory, but the missing queue/plan/subscription screens have no empty states because the screens don't exist.

## RTL / i18n
- Demo uses `useT()` keys under `onboarding.admin.*` and `common.*` (bilingual via the demo i18n).
- Ours uses `Yii::t('backend'|'common', ...)` with many inline `"English – عربى"` dual strings (e.g. `index.php:30,102`); RTL is handled by the Tailwind layout `dir`. Bilingual coverage exists for the directory; any NEW screens (plans/subscriptions/requests) would need new `ar/en` strings per CLAUDE.md.

## Divergences in our favor
- Live/Demo mode toggle column (no demo equivalent).
- Far more directory columns (documents, district, rate, counts, social).
- Rejection reason capture + owner email.