# Admin · Catalogue — UI / Screens & States

Demo: `/private/tmp/Navagoo_MI_dev/navagoo-app/src/portals/admin/Catalogue.tsx`
Ours: `backend/views/shop-category/{index,_form,view,create,update}.php`

## Demo screen

A single page (`PageHeader` "Catalogue" / "Global service categories & taxonomy",
`Catalogue.tsx:95-103`) with one `Card` titled "Categories" / "Groups and their nested
categories, shared across all shops" (`:104-105`).

### List (`:106-135`)
- Vertically divided rows (`divide-y`), no table chrome.
- Each row: leading icon tile — `FolderTree` (brand) for a **group**, `Tag` (slate) for
  a **child**, child rows indented with `ps-7` (`:109-117`).
- Group name bold + a `Badge tone="slate"` reading "Group"; child name medium weight
  (`:118-119`).
- Right side, muted: `{services} svc` and `{shops} shops`, tabular-number aligned
  (`:121-124`).
- Hover-revealed Edit (`Pencil`) and Delete (`Trash2`) icon buttons per row
  (`:125-132`), with `aria-label`s.

### Add/Edit modal (`:139-171`)
- Title toggles "Add category" / "Edit category".
- Fields: `Category name` text input (placeholder "e.g. Spa"); `Parent group`
  `<Select>` with hint, first option "Top-level group", then groups excluding self.
- Footer: secondary Cancel + primary "Add"/"Save changes", primary **disabled while
  name empty**.

### Delete-confirm modal (`:174-198`)
- Title "Remove category". Body: "Delete **{name}**? [Its nested categories will also
  be removed.] Services in it become uncategorised." (nested-warning shown only for a
  parent group that actually has children).
- Footer: secondary Cancel + **danger** Delete.

### States
- Empty list: renders nothing (no rows) — no dedicated empty-state copy.
- Toasts on add/update (success) and delete (info).
- RTL: uses logical props throughout (`ps-7`, `ms-auto`, `text-end`) so it mirrors
  cleanly in Arabic.

## Our screen

Three separate pages (Yii CRUD): list (`index.php`), create/update (full-page form
`_form.php`), detail (`view.php`) — **not** a single in-place modal screen.

### List (`index.php`)
- Tailwind "aurora" reskin (header, brand button, card, pager). Heading "Shops
  Categories" (`:109`) + helper line about reordering (`:112-115`).
- Real `<table>`: columns **drag-handle | Order (arrows + sort_order) | Image
  thumbnail | Name (link to view) | name (en) | Actions (Update pencil)**
  (`:148-216`).
- Name GET filter with search/reset (`:124-143`).
- Empty state: "No results found." row (`:160-161`).
- Footer: data-provider summary + `LinkPager` (`:219-231`).
- Drag-to-reorder via jQuery-UI sortable → POST `save-order`; per-row move up/down.

### Form (`_form.php`)
- Bilingual `name` field + single **image** upload (filekit) + tabular sub-grids to
  attach services/shops. **No parent-group field** (none exists).

### Detail (`view.php`)
- DetailView of the category plus related **services** and **shops** grids
  (`view.php:88`, `:122`).

## Concrete UI gaps (demo → ours)
1. **No group/child visual hierarchy**: no indentation, no group `Badge`, no
   FolderTree-vs-Tag iconography. Flat rows only.
2. **No inline `N svc / N shops` counts** in the list (counts only on the separate
   detail page).
3. **Modal vs page**: demo edits inline in a modal; ours navigates to a full create/
   update page (acceptable per the project's "full-page forms replace dead modals"
   convention, but it is a UX divergence from the demo).
4. **No parent-group select** in the form.
5. **Delete UX**: demo has an in-app confirm modal with cascade/uncategorise warning;
   ours relies on the standard `data-method=post` delete (a browser confirm at best),
   with no cascade/uncategorise messaging.

## Ours-only UI (not in demo)
- Image thumbnail column + upload, sort_order display, drag + arrow reordering,
  bilingual name column, pagination, name search filter, PDF/detail views,
  tabular service/shop assignment editor.