# Admin · Support content — UI parity

Demo: `/private/tmp/Navagoo_MI_dev/navagoo-app/src/portals/admin/SupportContent.tsx`
Ours: `backend/views/faq/*`, `backend/views/questions/*` (+ unrelated `contact-us/*`).

## 1. Demo screens / components / states

One page, two tabs via a `Segmented` control (`SupportContent.tsx:51-58`).

### 1.1 Page chrome
- `PageHeader` title "Support & content", subtitle "FAQs and contact channels"
  (`:41-52`). Header action **"Add FAQ"** button (icon `Plus`) shown **only on the FAQs tab**
  (`view === 'faqs'`, `:46`).

### 1.2 FAQs tab
- A single `Card` titled "Frequently asked questions", subtitle
  "Shown in the customer & shop help centres" (`:62-65`).
- Body is an **accordion**: each FAQ is a full-width button (question text + chevron that
  rotates 180° when open, `:80-88`); the answer paragraph renders only when `openIdx === i`
  (`:89`). Rows divided by `divide-y divide-slate-100` (`:66`). Default open row = first
  (`openIdx=0`).
- **Empty state:** none authored (seed always has 4). No loading/error states (no async).

### 1.3 Contact Us tab
- Responsive grid `grid-cols-1 sm:grid-cols-3` of 3 `ContactCard`s (`:93-106`).
- Each card: brand-tinted rounded icon tile, uppercase title, value text
  (`ContactCard`, `:137-160`). Icons: `Mail`, `Phone`, `MessageCircle`.

### 1.4 Add-FAQ modal
- `Modal` titled "Add FAQ" (`:108`), footer Cancel (secondary) + Add buttons (`:111-130`).
- Body: two `Field`+`Input` rows, Question and Answer (`:132-138`).
- Add disabled until both filled (`:117`); success toast on add (`:121`).

### 1.5 RTL / i18n
- Demo strings are hard-coded English; no i18n layer, no RTL switch in this component.

## 2. Our views

### 2.1 FAQ list — `backend/views/faq/index.php`
- Tailwind table, NOT an accordion. Columns: # / Question (link to view) / Answer (truncated
  80) / Status chip / Sort (up/down) / Actions (edit, delete) (`:82-153`).
- Page header "FAQs" + "Create FAQs" button (`:43-53`).
- Status GET filter dropdown + Search/Reset (`:56-77`).
- Empty state: "No results found." row (`:94-95`). Pager + summary footer (`:160-172`).
- Create/Update are **separate full-page forms** (`actionCreate`/`actionUpdate` render
  `create`/`update` with `layout='tailwind'`, `FaqController.php:106-177`) — not a modal.

### 2.2 Questions list — `backend/views/questions/index.php`
- Same Tailwind grid pattern as FAQ (ES-backed). Parallel `_form/_detail/view/create/update`.

### 2.3 Contact Us — `backend/views/contact-us/*`
- This is an inbound-message grid (different feature), NOT the demo's contact-channel cards.

## 3. Concrete UI gaps (demo → ours)

1. **No unified "Support & content" screen.** Demo = 1 page, 2 tabs; ours = 2+ separate
   menu items (`FAQs` at `Menu.php` ~line 165; `Contact Us` ~line 172) with no segmented tabs.
2. **No accordion read UX.** Demo shows expand/collapse Q&A inline; ours is a CRUD table +
   detail page. (Ours is arguably better for management but does not match the demo read view.)
3. **No Contact-channel cards.** Demo's Email/Phone/WhatsApp display (`SupportContent.tsx:93-106`)
   has no admin screen on our side. MISSING.
4. **Add-FAQ modal vs full-page form.** Demo adds via modal with success toast; ours navigates
   to a full-page create form (the old Bootstrap modal flow was explicitly retired,
   `FaqController.php:108-110`).
5. **"Shown in customer & shop help centres" affordance.** Demo states FAQs feed the help
   centres; ours has `status`/`category_id` to gate visibility but the index gives no hint of
   where FAQs surface.
6. **Questions vs FAQ duplication** has no demo equivalent — extra UI surface NEW on our side.

## 4. Where ours exceeds the demo (UI)
- Status filter, status chips, drag-sort reorder, pagination, delete with confirm, edit,
  category — all absent from the demo (`faq/index.php:34-153`).