# Admin · Marketing — UI Parity

## Demo layout
Single page `AdminMarketing` (`Marketing.tsx`):
- `PageHeader` "Marketing" / "Platform deals, ads & push notifications".
- `Segmented` control with 3 tabs: **Deals (n)**, **Ads**, **Push** — count badge on Deals.
- Tab content swaps in-place (no route change). Ref: `Marketing.tsx:55-159`.

There is **no single unified Marketing screen on our side** — the three concepts are three
separate admin controllers/menu entries (Promo Codes, Ads, Push Notifications). This is the
biggest structural UI gap.

---

## Deals tab → our Promo Codes

| Demo element | Demo ref | Our element | Note |
|---|---|---|---|
| DataTable: Deal/Discount/Usage bar/Expiry/Delete | `Deals.tsx:24-71` | `backend/views/promo-code/index.php` table (#, Code, Discount, Expiry, Status, Actions) | No **usage bar**; has Status col demo lacks |
| Discount badge `%` / `SAR` | `Deals.tsx:31-37` | `%`/SAR suffix on discount value | done |
| Usage progress `Bar(count/cap)` | `Deals.tsx:42-49` | — | **missing** in list |
| "New deal" modal (desc/type/value/cap/expiry) | `Deals.tsx:115-176` | `backend/views/promo-code/_form.php` full-page form (code/value/type/status/expiry) | full page, not modal; no usage-cap or description field |
| Empty state "No deals yet" | `Deals.tsx:84-90` | "No results found." cell | present, less rich |
| Delete confirm dialog | `Deals.tsx:55-67` | POST delete + verb filter | confirm UX differs |

## Ads tab → our Ads (banners)

| Demo element | Demo ref | Our element | Note |
|---|---|---|---|
| 3-col campaign cards (name/placement/impressions/CTR/status) | `Marketing.tsx:71-99` | `backend/views/ads/index.php` table (#, Image, Shop) | **divergent**: ours is banner-image grid; no metrics/placement/status |
| live/scheduled status Badge | `Marketing.tsx:78-80` | — | **missing** |
| Impressions / CTR stats | `Marketing.tsx:84-93` | — | **missing** (no analytics) |
| — | — | Image upload + crop, shop filter, create/edit | **new in ours**, absent in demo |

## Push tab → our Push Notifications

| Demo element | Demo ref | Our element | Note |
|---|---|---|---|
| Compose card (Title, Audience) | `Marketing.tsx:104-127` | `backend/views/push-notification/index.php` compose form | ours adds bilingual title/message + audience select + route |
| Send button (simulated) | `Marketing.tsx:113-122` | `actionSend` real FCM broadcast | ours is real |
| "Recent sends" open-rate bars | `Marketing.tsx:128-153` | `backend/views/push-notification/history.php` real list | ours persisted; no open-rate metric |

---

## States
- **RTL / bilingual**: demo is English-only, LTR. Our admin is fully bilingual
  (`common/messages/{ar,en}/backend.php`) and RTL-aware — *ahead* of demo.
- **Empty**: demo has explicit `EmptyState` for deals + table empties for ads/push (static, never
  empty). Ours: promo "No results found.", ads/push have their own empties. Acceptable.
- **Error**: demo Deals create is client-validated (button disabled); push send is fire-and-toast.
  Ours has server validation + flash errors (push `actionSend` validates required, flashes error).
  Ours stronger.

## Structural UI gap (highest priority)
The demo's **tabbed single "Marketing" hub** does not exist. To reach parity we'd either (a) build
a Marketing landing that tabs across Promo Codes / Ads / Push, or (b) accept three separate menu
items. Currently three separate Tailwind-reskinned admin screens, no unifying hub, no "platform
deals count" badge.