# Shop · Team / specialists + shifts — UI

Demo: `navagoo-app/src/portals/shop/Team.tsx`. Ours: `frontend/views/agents/{index,_form,view,_detail}.php`.

## Screens / components

### Demo
- **PageHeader** title + subtitle (`shop.team.title`, `…subtitle` with shop name) + Add button
  (`Team.tsx:60-70`).
- **Segmented** tabs: Specialists | Payroll (`Team.tsx:71-78`).
- **Specialists tab** — `DataTable`: avatar+name, title, wage badge (purple/teal/slate per
  wageType, `Team.tsx:34-38`), fixed salary (`Money` or "None"), commission % (or "None"),
  status badge (teal/slate), row actions: pencil/edit, UserX/UserCheck toggle, trash delete
  (`Team.tsx:128-215`).
- **Payroll tab** — `Card` with header showing grand-total wallet figure; `DataTable`: name,
  completed count, serviced value, commission base (+ "net of fees" sub-label), fixed,
  commission, **total pay (bold)**, tips owed (accent or "—"); footer tips-owed grand total
  (`Team.tsx:262-371`).
- **Add/Edit Modal** (size lg, `Team.tsx:561-898`) — four `Section`s:
  1. **Profile**: photo upload (avatar + change/remove + hint), then a 2-col grid: name, title,
     email, mobile, gender select, dob (date), nationality, license no, languages (comma hint),
     status select; a **calendar-colour swatch picker** (10-hue palette + Auto reset,
     `Team.tsx:680-706`); bio textarea.
  2. **Compensation**: wage type, pay cycle, fixed salary (if not commission-only), commission %
     (if not fixed-only), commission basis select with per-basis hint.
  3. **Services**: toggle chips of shop services (empty-state text when none).
  4. **Working Hours**: column headers; per weekday row = day label, enable Toggle, list of
     start–end time inputs with `+1d` overnight badge, remove-shift (X) for shifts after the
     first, add-shift (+) and apply-to-all (copy) buttons.
- States: photo uploading spinner; `disabled` save until name non-empty; toasts on add/update/
  remove/activate/deactivate/apply-to-all; confirm dialogs; delete-with-bookings modal.

### Ours
- **index.php** — header (title + subtitle "Manage your team…") + Create button (`index.php:34-45`);
  empty state card with users icon (`index.php:47-55`); **card grid** (not a table): avatar/initials,
  name (links to view), role, availability toggle (real `toggle-status` route w/ confirm+POST),
  MOL/Mostaqqel/tips chips, email/mobile, a single working-hours line (`profile->from_hours`/
  `to_hours`), edit / show-hide / view actions; LinkPager pagination (`index.php:199-213`).
- **_form.php** — full page (not modal): Personal Information card (avatar Upload widget,
  full_name, gender, email, password, mobile, license_no, mol_no, mostaqqel, nationality, locale,
  birth_date datepicker); Bio card; **Opening Hours card** (bespoke `.oh-*` toggle+shift widget with
  shop-hours reference note, per-day toggle, add/remove shift, inline time validation); Agent
  Services card (select-all + checkbox grid). Save button. RTL handled (`dir="rtl"` rules,
  `_form.php:473,623-631`).
- **view.php / _detail.php** — read-only profile + working hours (left) and customer ratings (right).

## Concrete UI gaps (ours vs demo)

1. **No Payroll tab/screen** at all. (Tips-only summary lives on a separate
   `agents-wallet/specialist-tips` page.)
2. **No Compensation UI** — wage type, pay cycle, fixed salary, commission %, commission basis are
   entirely absent (no backing fields).
3. **No wage/salary/commission columns** on the list.
4. **No calendar-colour picker** for the specialist (no `color` field; day-calendar tint N/A).
5. **No `languages` field** in the form (label string exists in i18n but no input/storage).
6. **No `+1d` overnight badge** per shift row (overnight is shop-level only).
7. **No "apply hours to all days"** copy action.
8. **List is a card grid, not a sortable DataTable** — title/wage/commission not shown.
9. **Add/Edit is a full page**, demo is a modal (acceptable skin choice; flagged for parity).
10. **Delete UX**: no "this person has N bookings → deactivate instead / delete anyway" modal; our
    delete is a plain confirm and is barely surfaced in the grid.
11. **Extra on our side (not in demo)**: password/login fields, MOL/Mostaqqel numbers, locale,
    show/hide visibility toggle, shop-hours bounds enforcement + skipped-shift warning, status logs +
    suspension notification, mobile-uniqueness AJAX check.

## Empty / error / RTL
- Empty: ours has a dedicated empty-state card (`index.php:47-55`); demo relies on an empty table.
- Error: ours surfaces `errorSummary` + inline `invalid-feedback` + shift time/overlap/bounds
  errors (`_form.php:711-717,230-301`); demo blocks save only on empty name.
- RTL: both support RTL; ours flips datepicker/input-group/time-arrow explicitly.
</content>