manual improvement 2 & add telegram bot

.claude/skills/frontend-designer/SKILL.md

@@ -83,9 +83,15 @@ Colors exist in **two mirrored places** that must stay in sync. Pick the right o
 
 **Beyond color** — `tokens.css` also defines non-palette tokens (`colors.ts` never needs
 these; they're define-only in CSS):
-- **Radius** — `--bal-radius-sm` (4px, controls: buttons/inputs), `--bal-radius-md`
-  (10px = `theme.shape.borderRadius`, the house default: cards/paper), `--bal-radius-lg`
-  (16px: dialogs). Reference the token/constant, never invent a new radius.
+- **Radius** — `--bal-radius-sm` (6px, controls: buttons/inputs), `--bal-radius-md`
+  (8px = `theme.shape.borderRadius`, the house default: cards/paper), `--bal-radius-lg`
+  (12px: dialogs). Reference the token, **never a numeric `sx={{ borderRadius: n }}`** —
+  that multiplies the shape unit, which is how the login card once ended up a 30px pill.
+  `MuiPaper` pins the md step so a Paper can't drift past it. `--bal-radius-pill` (999px)
+  is for shapes that genuinely *are* pills — the floating bottom nav, a segmented
+  control's active chip — never for a card.
+- **Frame canvas** — `--bal-frame-canvas`, the backdrop `AppFrame` paints *outside* the
+  phone-width app column. Never a surface a component draws on.
 - **Elevation** — `--bal-shadow-1/2/3`, teal-tinted (black-teal in dark mode) shadow
   steps that back `theme.ts`'s `shadows` array — every MUI elevation (Paper, Dialog,
   Menu, Popover, AppBar) resolves through these, never MUI's default grey stack.
@@ -105,9 +111,9 @@ these; they're define-only in CSS):
 
 ## 3. Typography & fonts
 
-- `shape.borderRadius: 10` (set in `src/theme/theme.ts`) — the house corner radius
+- `shape.borderRadius: 8` (set in `src/theme/theme.ts`) — the house corner radius
   (= `--bal-radius-md`). Don't override per-component unless deliberate; the radius
-  *scale* is `--bal-radius-sm` (4, controls) / `-md` (10, cards) / `-lg` (16, dialogs).
+  *scale* is `--bal-radius-sm` (6, controls) / `-md` (8, cards) / `-lg` (12, dialogs).
 - **Weight system — never write `fontWeight: 600`.** Mikhak and Space Grotesk both load
   only 400/500/700 (no 600 face), so a requested 600 silently renders full Bold. Use
   **700** for headings (`h1`–`h6`) and buttons/strong emphasis, **500** for lighter
@@ -166,74 +172,99 @@ CLAUDE.md "Unit Testing"; wrap with `<ThemeProvider>`, never mock MUI).
 
 ## 5. Layout & page shells
 
-- **Four per-actor shells**, each wrapped in `RoleGuard` (don't touch): `CustomerLayout`
-  (mobile-first — contextual `TopBar`: brand lockup on the 5 root tabs, title + back
-  chevron on pushed routes, an inline desktop top-nav at `≥md` replacing the mobile
-  `BottomBar`), `NurseLayout` / `AdminLayout` / `PartnerLayout` (all three share
-  `TopBarAndSideBarLayout`, `src/layout/`). All chrome navigation goes through
-  `@/i18n/navigation` (`Link`/`usePathname`/`useRouter`) — never a raw `next/link` or a
-  manual `` `/${locale}` `` prefix.
-- `TopBarAndSideBarLayout`: a fixed `TopBar` (title from `useRouteTitle()`, the
-  route→title map in `layout/routeTitle.tsx`) + a `SideBar` rendered as **two Drawers
-  sharing one content tree** — mobile `temporary` and desktop `variant="permanent"` —
-  switched purely by `sx` breakpoint, not `useIsMobile()`; the permanent Drawer is a
-  normal flex sibling of the main column, so desktop reserves its own width with no
-  manual offset math and no post-hydration layout jump. Optional `identity` (TopBar
-  chip — admin/partner), `sidebarIdentity` (sidebar card — nurse's `ProfileSummary`),
-  and `mobileBottomBar` slots.
-- Sidebar nav items are `{ title, path, icon, group? }` arrays (`@/utils`'s
-  `LinkToPage`) built with `useTranslations('nav')`; a shared `group` string on
-  consecutive items renders a `ListSubheader` section (see `NurseLayout`/`AdminLayout`).
-  Selection is computed once via the shared `matchActivePath` (longest-prefix,
-  winner-takes-all) helper — reuse it for any new nav list, never hand-roll
-  `pathname.startsWith`.
-- **Public screens** use `PublicLayout` — a minimal corner strip (logo +
-  `LocaleSwitcher` + dark toggle), no sidebar/bottom bar; the step content (`AuthCard`)
-  carries its own larger `BrandMark`, so don't duplicate a big lockup in the shell.
+**There is one layout: a phone.** `AppFrame` (`src/layout/AppFrame.tsx`) renders every
+screen inside a centered `APP_FRAME_MAX_WIDTH` (480px) column on a `--bal-frame-canvas`
+backdrop, at **every viewport**. A wider window gets more canvas, never a wider app —
+design one set of states, verify one set of states. Do not add a `≥md` branch that widens
+a shell, restores a sidebar, or lays a screen out in columns.
+
+- `AppFrame` owns three structural guarantees, and is the only place any of them is
+  solved: the width cap; the **frame, not the document, owns the scroll** (header /
+  `<main>` / footer are flex siblings, so a top bar is `position: static` and no page
+  needs a top offset); and `overflowX: hidden` + `minWidth: 0`, so an over-wide child
+  clips rather than dragging the app sideways. Genuinely wide content (a data table)
+  scrolls **inside its own container** — see `AdminDataTable`'s `TableContainer`.
+- **One authenticated shell**: `MobileShell` = `AppFrame` + a contextual `TopBar` (brand
+  lockup on a tab's own path, back chevron + `useRouteTitle()` on anything deeper) +
+  `BottomBar` + `ErrorBoundary` + `RouteFadeIn`. The four actor layouts (`CustomerLayout`
+  / `NurseLayout` / `AdminLayout` / `PartnerLayout`, each wrapped in `RoleGuard`) supply
+  only `tabs` and `headerActions`. Add a destination by adding a tab or a hub row — never
+  by forking the shell.
+- **The chrome is light, not structural.** The top bar is *not* an `AppBar` — no filled
+  surface, no rule, no elevation; it sits on the page background. The bottom bar *floats*:
+  inset from the frame edges, fully rounded (`--bal-radius-pill`), elevated. Neither should
+  read as a slab sealing off an edge of a 480px screen.
+- **Navigation is the bottom bar. There is no drawer.** Tabs are `LinkToPage` arrays
+  (`@/utils`) built with `useTranslations('nav')`, 3–5 of them, and by convention the last
+  is a settings/«بیشتر» hub. Active state comes from the shared `matchActivePath`
+  (longest-prefix, winner-takes-all) over each tab's own path **plus its `matchPaths`
+  claims — use `matchPaths` when a tab owns a destination outside its own URL subtree
+  (`/nurse/finance` owning `/nurse/earnings`). Never hand-roll `pathname.startsWith`.
+- **A nav group's root is a real page**, not a drawer section: a short summary of that
+  domain (read only off queries that already answer it — never a fabricated figure) over a
+  `NavHubList` of its destinations. See `/nurse/practice`, `/nurse/finance`,
+  `/admin/trust`, `/admin/system`.
+- **Chrome carries no preferences.** Language and appearance live in `SettingsPanel`
+  (`@/components/settings`), mounted in each actor's settings hub and nowhere else. The
+  top bar is for identity, the page title, and at most a notification bell. Appearance is a
+  three-way segmented control (light/dark/**system**) — never a boolean switch, which cannot
+  express the app's own default.
+- **Public screens** use `PublicLayout` — the frame and nothing else, **no top bar**; the
+  step content (`AuthCard`) carries the only brand mark on screen. `FocusedLayout` is the
+  framed chrome-free shell for can't-tab-away flows (onboarding, `/select-role`).
+- All chrome navigation goes through `@/i18n/navigation` (`Link`/`usePathname`/
+  `useRouter`) — never a raw `next/link` or a manual `` `/${locale}` `` prefix. (Inside a
+  *page*, `AppLink`/`AppButton`'s `to` is a plain `next/link` and still needs the prefix.)
 - Page content is auto-wrapped in `ErrorBoundary` inside every shell.
-- Shell dimensions are constants in `src/layout/config.ts` (`SIDE_BAR_WIDTH = 240px`,
-  top-bar `56px` mobile / `64px` desktop). Respect them; don't hard-code.
+- Shell dimensions are constants in `src/layout/config.ts` (`APP_FRAME_MAX_WIDTH`,
+  `TOP_BAR_HEIGHT`). Respect them; don't hard-code.
 - A page is `src/app/[locale]/(private|public-routes)/…/page.tsx`. Keep page bodies to
   composition + content; push reusable visuals into `src/components/`.
-- Constrain reading width with `CONTENT_MAX_WIDTH` (800) for text-heavy views; full-bleed
-  is fine for dashboards/tables.
-- Prefer MUI breakpoints in `sx` (`{ xs: …, md: … }`) for responsive branching over
-  `useIsMobile()` (`@/hooks`) — the latter is JS/post-hydration and is what caused the
-  desktop SSR flash `TopBarAndSideBarLayout` now avoids; reach for it only for genuinely
-  non-structural, JS-only behavior.
+- `CONTENT_MAX_WIDTH` mirrors the frame width — a page column can never be wider than the
+  frame containing it.
+- Prefer MUI breakpoints in `sx` for the little responsive branching that remains over
+  `useIsMobile()` (`@/hooks`) — the latter is JS/post-hydration and caused a real SSR
+  flash; reach for it only for genuinely non-structural, JS-only behavior.
 
 ---
 
 ## 6. Icons
 
 Icons are a **name registry**, not free imports. `src/components/common/AppIcon/config.ts`
-maps lowercase names → MUI/SVG components. Render with `<AppIcon icon="home" />` or pass
-the name to `AppButton`/`AppIconButton` (`icon="search"`).
+maps lowercase names → components. Render with `<AppIcon icon="home" />` or pass the name
+to `AppButton`/`AppIconButton` (`icon="search"`).
 
-**One visual family: MUI `*Rounded`.** Every registered icon is the `Rounded` variant of
-`@mui/icons-material` (warmer, softer strokes than the old filled/outlined mix — fits
-"clinical-but-human"). When adding an icon, import the `*Rounded` version; don't mix in a
-Filled/Outlined/Sharp/TwoTone icon next to it. ~90 names are registered today, spanning
-navigation, catalog, verification, booking, payments, admin, and messaging — read
-`AppIcon/config.ts` directly for the full list rather than duplicating it here (it drifts
-too fast for a skill doc to track reliably); the two structural rules below don't.
+**One visual family: Lucide.** Every registered icon comes from `lucide-react` — a
+contemporary outline family on a 24px grid with round caps/joins, which reads far lighter
+than the filled glyphs this registry used to carry at the small sizes a phone-width app
+actually uses. `@mui/icons-material` is **no longer a dependency**; never reintroduce it.
+The house stroke weight is `APP_ICON_STROKE_WIDTH` (1.75 — Lucide ships at 2, which
+competes with Mikhak's lighter Persian strokes).
 
-**`size` actually resizes now.** `AppIcon` drives size via `style.fontSize` (the basis for
-MUI SvgIcon's internal `1em` sizing) instead of `width`/`height` attributes, which MUI's
-own CSS used to beat. `<AppIcon icon="verified" size={48} />` renders 48px — no more
-silent 24px flattening.
+**The mapping is semantic, not incidental.** A name describes the domain concept
+("verification", "earnings", "coverage") and the glyph depicts *that*, so swapping the
+underlying glyph never leaks into call sites. Related concepts share a visual root on
+purpose: trust/verification names are shields, money names are coins or cards, clinical
+names are a pulse or a cross. ~110 names are registered — read `AppIcon/config.ts` for the
+list rather than duplicating it here; the structural rules below are what won't drift.
+
+**`size` drives real `width`/`height`.** Lucide sizes off SVG attributes, so
+`<AppIcon icon="verified" size={48} />` is 48px with no `fontSize`/`1em` indirection.
+Icons also default to `flexShrink: 0` — an icon squashed by a flex sibling was the one
+layout bug this component kept quietly reintroducing on narrow rows.
 
 **Directional icons mirror automatically.** Icons authored for LTR that must flip under
-RTL (`back`, `chevron_start`) are registered in `AppIcon/config.ts`'s `DIRECTIONAL_ICONS`
-set. `AppIcon` stamps `data-icon-directional` on those, and one CSS rule
-(`app/globals.css`) does `[dir='rtl'] [data-icon-directional] { transform: scaleX(-1); }`.
-Adding a new directional icon is a one-line registry addition — never hand-roll a
-per-component flip.
+RTL (`back`, `chevron_start`, `chevron_end`) are registered in `AppIcon/config.ts`'s
+`DIRECTIONAL_ICONS` set. `AppIcon` stamps `data-icon-directional` on those, and one CSS
+rule (`app/globals.css`) does
+`[dir='rtl'] [data-icon-directional] { transform: scaleX(-1); }`. Adding a new directional
+icon is a one-line registry addition — never hand-roll a per-component flip.
 
-**Need a new icon:** import the `*Rounded` version into `config.ts`, add a **lowercase**
+**Need a new icon:** import it from `lucide-react` into `config.ts`, add a **lowercase**
 key to `ICONS`, then reference by that name. Custom SVGs (the brand mark) go in
-`AppIcon/icons/`. An unregistered name logs a dev-only warning and falls back to
-`default` — never pass a raw MUI icon where a name is expected.
+`AppIcon/icons/` and must accept the same `size`/`color`/`strokeWidth` contract
+(`AppIcon/utils.ts`'s `IconProps`). An unregistered name logs a dev-only warning and falls
+back to `default` — never pass a raw icon component where a name is expected.
 
 ---
 

client/CLAUDE.md

@@ -19,9 +19,15 @@ i18n, cookies, and the rules every change must follow.
 - **React 19** + **TypeScript** (`strict`).
 - **MUI v9** (`@mui/material`) for components and theming; **Emotion** underneath (RTL via
   `stylis-plugin-rtl`).
+- **Lucide** (`lucide-react`) for icons, behind the `AppIcon` name registry.
+  `@mui/icons-material` was removed — never reintroduce it.
 - **next-intl v4** for i18n — locales `fa` (default, RTL) and `en`.
 - **TanStack Query v5** for server state; a small **AuthContext** (React context + reducer,
   `src/context/auth/`, seeded with server-read auth state) for auth/session state.
+- **react-hook-form v7** for every form with more than one field — uncontrolled fields + per-field
+  subscriptions, so a keystroke re-renders one input rather than the whole screen. Never used through
+  the raw `useController`/`register` API at a call site: bind through the `components/common/form`
+  wrappers (`RhfTextField`, `RhfChipSelect`, `RhfJalaliDateField`, `RhfControlGroup`). See **Forms** below.
 - **notistack** for toasts; **js-cookie** (wrapped) for client cookies.
 - **Jest** + **Testing Library** for unit tests.
 - Quality gates: **tsc**, **ESLint 9** (flat config), **Prettier**.
@@ -121,8 +127,8 @@ client/
     │       ├── [...rest]/page.tsx               # Catch-all — calls notFound() so any unmatched path under a locale renders not-found.tsx (next-intl's recommended 404 pattern)
     │       ├── (private-routes)/
     │       │   ├── layout.tsx                  # 'use client' — wraps PrivateLayout; mounts useSessionRoleSync (hydrates AuthContext roles from /me)
-    │       │   ├── _chrome/SidebarShellSkeleton.tsx  # Private (`_`-prefixed, not a route) shared loading.tsx skeleton for the 3 sidebar shells (nurse/admin/partner)
-    │       │   ├── select-role/page.tsx        # /select-role — first-use role picker (no public role yet); role router lands here
+    │       │   ├── _chrome/ShellContentSkeleton.tsx  # Private (`_`-prefixed, not a route) shared loading.tsx skeleton for nurse/admin/partner — shapes the content area only; MobileShell chrome is already rendered by the enclosing layout
+    │       │   ├── select-role/                # /select-role — first-use role picker (no public role yet); role router lands here. Its own layout.tsx wraps FocusedLayout: outside every actor group (no role to tab for) but still inside the phone-width frame
     │       │   ├── (customer)/                 # Customer (family) app — mobile-first, bottom-tab nav; no URL segment
     │       │   │   ├── layout.tsx              # 'use client' — RoleGuard(expected=customer) → CustomerLayout
     │       │   │   ├── loading.tsx             # Route-group loading skeleton (header + search bar + category-tile row + card stack)
@@ -163,18 +169,21 @@ client/
     │       │   │   ├── profile/page.tsx        # /profile — ui-phase-9 rebuild into the customer's account hub (still the single route — sub-sections are `FormDialogShell` sheets, not sub-routes): `ProfileSummary` identity header (avatar/initials + name + server-masked phone), grouped tappable rows (اطلاعات شخصی/نشانی‌ها/زبان/اعلان‌ها/پشتیبانی/خروج — the زبان row owns the server-stored `preferredLanguage` and hosts the phase-2 `LocaleSwitcher`, never a second locale mechanism), an emergency-contact status card (tel:-only link when complete, a warm nudge otherwise), `ActorSwitcher` preserved; sign-out goes through `useLogout()` only. No national-ID.
     │       │   │   ├── support/tickets/        # /support/tickets — f14 "My Tickets" inbox (TicketInboxScreen role="customer") ↔ support/tickets/[id]/page.tsx thread (TicketThreadScreen); thin role-passing wrappers over @/components/messaging
     │       │   │   └── notifications/page.tsx  # /notifications — f14 notification center (NotificationCenter role="customer"); the TopBar bell deep-links here
-    │       │   ├── nurse/                      # Nurse app (/nurse/…) — sidebar shell
+    │       │   ├── nurse/                      # Nurse app (/nurse/…) — 4-tab bottom nav, one tab per group root
     │       │   │   ├── layout.tsx              # 'use client' — RoleGuard(expected=nurse) → NurseLayout
-    │       │   │   ├── loading.tsx             # → ../_chrome/SidebarShellSkeleton
-    │       │   │   ├── page.tsx                # /nurse (dashboard) — thin RSC (generateMetadata nav.dashboard) rendering NurseDashboardScreen.tsx
-    │       │   │   ├── NurseDashboardScreen.tsx # ui-phase-7 — the «امروز» operational home replacing the old PlaceholderScreen: greeting+TrustBadge, NextVisitCard (useTodaySessions), RequestsStrip (useNurseRequestInbox, the most time-critical widget — sorts above earnings), EarningsSnapshotCard (useNurseEarningsBalance, signed net + eligible), DashboardActivationSlot, NotificationsEntryRow (useUnreadCount) — every widget is a read of an already-cached query, four-state pattern throughout
+    │       │   │   ├── loading.tsx             # → ../_chrome/ShellContentSkeleton
+    │       │   │   ├── page.tsx                # /nurse (the «امروز» tab) — thin RSC (generateMetadata nav.dashboard) rendering NurseDashboardScreen.tsx
+    │       │   │   ├── practice/page.tsx        # /nurse/practice — «حرفهٔ من» group root (NursePracticeScreen): a listing-status card (own TrustBadge + the real accepting-bookings state) over links to profile/services/coverage/verification, each with a count read off its already-cached query (omitted, never faked, while one is in flight)
+    │       │   │   ├── finance/page.tsx         # /nurse/finance — «مالی» group root (NurseFinanceScreen): the SIGNED net payable balance (an owed-back reads as an error tone, never clamped) over links to earnings/payout history/bank
+    │       │   │   ├── more/page.tsx            # /nurse/more — «بیشتر» group root (NurseMoreScreen): ProfileSummary + ActorSwitcher, support/notifications links with unread badges, SettingsPanel, SignOutRow. Everything the sidebar drawer header and footer used to carry
+    │       │   │   ├── NurseDashboardScreen.tsx # ui-phase-7 — the «امروز» operational home replacing the old PlaceholderScreen: NextVisitCard (useTodaySessions), RequestsStrip (useNurseRequestInbox, the most time-critical widget — sorts above earnings), EarningsSnapshotCard (useNurseEarningsBalance, signed net + eligible), DashboardActivationSlot, NotificationsEntryRow (useUnreadCount) — every widget is a read of an already-cached query, four-state pattern throughout. iteration-2 removed the greeting+TrustBadge strip (it spent the screen's most valuable row restating the signed-in name and duplicating the activation tracker's badge) and replaced it with a plain `PageHeader` — load-bearing now that the nav is icon-only, since the page title is the only place the current section is named
     │       │   │   ├── DashboardActivationSlot.tsx # ui-phase-8 — the named composition point from ui-phase-7's hand-off, now filled with the shared `ActivationChecklist` (same component as `/nurse/services`) instead of the old single-row verification banner
     │       │   │   ├── requests/               # /nurse/requests — f7 incoming booking-requests inbox, ui-phase-7 redesign: page.tsx = decision-first cards (service+price headline when served — REQ-050, mock-tolerant) + an urgency-tinted CountdownTimer pill (teal/amber/terracotta tiers) + three tabs (در انتظار/پاسخ‌داده merged-client-side page-1-only/منقضی, shared Pager) ↔ requests/[id]/page.tsx detail (only customerNotes + masked city/district; accept now behind a ConfirmDialog + a post-accept payment-window countdown; reject-with-reason invalidate inbox+detail)
-    │       │   │   ├── profile/                # /nurse/profile — B7 profile bootstrap, ui-phase-8 pass: page.tsx adds editable education level/field (select + "سایر" free-text fallback) + specializations (chips, shared `SPECIALTY_PRESETS` vocab), a beforeunload guard on a staged-but-unsaved avatar, and a link into preview/ ↔ preview/page.tsx «نمایهٔ عمومی من» — the C3 trust-dossier pieces (TrustBadge/VerificationPanel/ServicePriceRow) composed entirely from the nurse's OWN cached data (own profile + useMyVariants + useServiceAreas + own badge), so it renders truthfully pre-publish
-    │       │   │   ├── services/               # /nurse/services — B7 services half: offerings list ↔ variant builder (page.tsx switches mode; MyServicesList + VariantBuilder + PublishGate co-located). ui-phase-8: MyServicesList mounts the shared `ActivationChecklist` + a link to the profile preview above the list; PublishGate rewritten as the REAL `set_accepting_bookings` toggle (state-driven guidance/start/pause — no more no-op snackbar); VariantBuilder's step-3 renders the actual `VariantCard` as a live listing preview, option groups are chips (not a wrapped ToggleButtonGroup), and a 409 duplicate offers "edit the existing listing" (resolved via `optionSetSignature` against the cached `useMyVariants` list)
+    │       │   │   ├── profile/                # /nurse/profile — B7 profile bootstrap, ui-phase-8 pass: page.tsx adds editable education level/field (select + "سایر" free-text fallback) + specializations (chips, shared `SPECIALTY_PRESETS` vocab), a beforeunload guard on a staged-but-unsaved avatar, and a link into preview/ ↔ preview/page.tsx «نمایهٔ عمومی من» — the C3 trust-dossier pieces (TrustBadge/VerificationPanel/ServicePriceRow) composed entirely from the nurse's OWN cached data (own profile + useMyVariants + useServiceAreas + own badge), so it renders truthfully pre-publish. iteration-2: rebuilt on react-hook-form + three `FormSection`s (معرفی / تجربه و تحصیلات / تخصص‌ها), with the blocked-until-verified banner as an `AccentCard` and the trust badge in `PageHeader`'s `meta` slot
+    │       │   │   ├── services/               # /nurse/services — B7 services half: offerings list ↔ variant builder (page.tsx switches mode; MyServicesList + VariantBuilder + PublishGate co-located). ui-phase-8: MyServicesList mounts the shared `ActivationChecklist` + a link to the profile preview above the list; PublishGate rewritten as the REAL `set_accepting_bookings` toggle (state-driven guidance/start/pause — no more no-op snackbar); VariantBuilder's step-3 renders the actual `VariantCard` as a live listing preview, option groups are chips (not a wrapped ToggleButtonGroup), and a 409 duplicate offers "edit the existing listing" (resolved via `optionSetSignature` against the cached `useMyVariants` list). iteration-2 made the create flow deterministic: the step list is DERIVED from the loaded option groups (a category with none skips straight to pricing instead of showing an empty middle step), Next is disabled with the unanswered required groups NAMED under it (was: always enabled, error only after the tap), and the price step recaps the chosen category+options as chips so it doubles as a review; RHF + `FormSection` throughout, sticky step footer
     │       │   │   ├── coverage/page.tsx       # /nurse/coverage — F3 coverage-area editor. ui-phase-8: the separate whole-city/districts scope toggle is gone — `CascadingRegionSelect`'s own district level (its «کل شهر» empty option) is the ONLY control for the whole-city choice; `removeArea` now has an onError toast
     │       │   │   ├── bank/page.tsx           # /nurse/bank — payout IBAN + ownership states (pending/verified/mismatch; `BankStatusPanel` unchanged). ui-phase-8: restructured as an accounts section — a persistent «افزودن حساب دیگر» CTA once ≥1 account exists (never dead-ends a nurse switching banks), an explicit pending-inquiry copy, and a real error state (never the empty-state form) on a failed query
-    │       │   │   ├── verification/           # /nurse/verification — f5 trust flow: ONE cached VerificationStatus query, four views. ui-phase-8: rebuilt as a single vertical journey — one progress metaphor everywhere (the old flat "X از Y" meter + the B4/B5/B6 3-step `StepperHeader` are both gone)
+    │       │   │   ├── verification/           # /nurse/verification — f5 trust flow: ONE cached VerificationStatus query, four views. ui-phase-8: rebuilt as a single vertical journey — one progress metaphor everywhere (the old flat "X از Y" meter + the B4/B5/B6 3-step `StepperHeader` are both gone). iteration-2: B4 and B5 are RHF forms grouped into `FormSection`s — B4's three asks (national id / card photo / selfie) each become a section with the card marked optional and the selfie marked required (the submit gate is a real form field, not a caption near the bottom); B5's four (شماره نظام / مدارک with an «n از m» count / تخصص‌ها / جزئیات مدرک, the last two marked optional) mount only once the status query resolves, so the server read-back IS `defaultValues`
     │       │   │   │   ├── page.tsx            # B3 hub — grouped step cards (هویت/مدارک حرفه‌ای/بانک, `VerificationChecklist`) + `TrustBadgePreviewPanel` («این نشان را خانواده‌ها می‌بینند», fills per group) + single continue CTA + not_started/approved states; dev-only mock admin-decision sim
     │       │   │   │   ├── identity/page.tsx   # B4 — national-ID (checksum) + card/selfie local capture → automated KYC + chained Shahkar; a cheap CSS `CaptureGuideFrame` (viewfinder corners / oval) + static hint per capture, `VerificationJourneyHeader` replaces the old StepperHeader
     │       │   │   │   ├── credentials/page.tsx # B5 — hydrates INO/specialties/registry fields from `status.credentialSubmission` (REQ-056, mock-tolerant) so a returning nurse sees a submitted summary, never blank fields; the INO number locks into a "شمارهٔ نظام ثبت شد" row (never re-prompted, never re-sent blank — the raw value is never read back by design); Jalali `JalaliDateField`s replace the native `type="date"` issue/expiry inputs; the submit gate considers server-side document state too, so a returning nurse is never dead-ended on a disabled button with no explanation
@@ -187,11 +196,16 @@ client/
     │       │   │   ├── earnings/               # /nurse/earnings — f12 nurse earnings (read-only), ui-phase-7 pass: page.tsx = EarningsBalanceHeader (net payable balance + 4 buckets, negative "owed back") + a «برداشت بعدی» ForecastLine (server-served only) + an accessible ButtonBase ExplainerCard (aria-expanded, registered `expand` chevron) + state-segmented EarningsRow list (deep-links to /nurse/visits/[id], shared Pager) ↔ payouts/page.tsx (PayoutHistoryRow list) → payouts/[id]/page.tsx (payout/batch reconciliation detail: money decomposition + masked IBAN + booking links); failed-payout reasons now map through `services/payouts/failureReasons.ts` (mapped label headline, raw code demoted to a secondary LTR caption)
     │       │   │   ├── support/tickets/        # /nurse/support/tickets — f14 nurse "My Tickets" (same TicketInboxScreen/TicketThreadScreen, role="nurse") ↔ support/tickets/[id]/page.tsx
     │       │   │   └── notifications/page.tsx  # /nurse/notifications — f14 notification center (role="nurse"); the nurse-shell bell deep-links here
-    │       │   ├── admin/                      # Admin/backoffice (/admin/…) — desktop sidebar shell (f15). Every screen is role-gated via useAdminCapabilities(); the sidebar hides a console the current admin role can't act on (server still enforces). ui-phase-11: every queue page adopts `useAdminListState` (URL-synced filters+page, `@/hooks`) behind a `<Suspense>` wrapper.
+    │       │   ├── admin/                      # Admin/backoffice (/admin/…) — 5-tab bottom nav over four group roots (f15). Every screen is role-gated via useAdminCapabilities(); the sidebar hides a console the current admin role can't act on (server still enforces). ui-phase-11: every queue page adopts `useAdminListState` (URL-synced filters+page, `@/hooks`) behind a `<Suspense>` wrapper.
     │       │   │   ├── layout.tsx              # 'use client' — RoleGuard(expected=admin) → AdminLayout (capability-gated nav)
-    │       │   │   ├── loading.tsx             # → ../_chrome/SidebarShellSkeleton
+    │       │   │   ├── loading.tsx             # → ../_chrome/ShellContentSkeleton
     │       │   │   ├── page.tsx                # Thin RSC — generateMetadata (admin.overview_title) + renders AdminOverviewScreen
-    │       │   │   ├── AdminOverviewScreen.tsx # 'use client' — f15 overview landing: a capability-gated grid of console cards
+    │       │   │   ├── AdminOverviewScreen.tsx # 'use client' — f15 overview landing: every permitted console as a NavHubList, grouped by the same four sections the bottom nav carries (the old 3-column card grid collapsed to one column of icon-and-a-word tiles inside the frame)
+    │       │   │   ├── _hub/AdminGroupHub.tsx   # Private (`_`-prefixed, not a route) body every admin group root shares: header + capability-filtered NavHubList + an optional tail; an all-denied group renders an explicit no-access state, never an empty card
+    │       │   │   ├── trust/page.tsx           # /admin/trust — «اعتماد» group root (verification queue + review moderation)
+    │       │   │   ├── finance/page.tsx         # /admin/finance — «مالی» group root (the weekly payout run)
+    │       │   │   ├── support/page.tsx         # /admin/support — «پشتیبانی» group root (ticket queue + internal alerts)
+    │       │   │   ├── system/page.tsx          # /admin/system — «سیستم» group root (config/holidays/audit/partners/users/roles) plus the admin identity chip, SettingsPanel and SignOutRow that used to live in the top bar. Always reachable: it is the only way out of the app
     │       │   │   ├── verification/           # /admin/verification — ui-phase-11 rebuild: page.tsx = status **Tabs** with server counts (when served, REQ-062) + a name/phone search behind the draft-vs-applied Apply/Clear pattern + a client-computed SLA-colored waiting-time column (`WAITING_TIME_WARNING_HOURS`/`_ALARM_HOURS`) ↔ [nurseId]/page.tsx per-nurse case (unchanged DocumentViewer signed-URL docs, pass/reject+reason per step, structured credential entry with `JalaliDateField` issued/expires, Approve enabled only when all steps pass) + «پرونده بعدی/قبلی» next/prev case nav (re-derives the queue's cached page via `queueFilters.ts`) + arrow-key bindings — client never writes is_verified
     │       │   │   ├── tickets/                # /admin/tickets — ui-phase-11: page.tsx adds an activity column + a results footer ↔ [id]/page.tsx admin thread gains close/reopen/assign-to-me (`useCloseTicket`/`useReopenTicket`/`useAssignTicket`, gated behind `TICKET_LIFECYCLE_ENABLED` + `canManageTickets` — REQ-063, no live route yet), opens scrolled to the newest message (`useThreadScroll`), and the composer turns amber (`--bal-warning-soft`) + relabels its send button in internal-note mode so a note can't be posted publicly by mistake; AdminMessageBubble still renders isInternal notes distinctly; RefundPanel opens from a refund ticket
     │       │   │   ├── payouts/                # /admin/payouts — ui-phase-11: page.tsx fixes the local-midnight UTC off-by-one on the window default, adopts `JalaliDateField` for the period inputs, and the run-confirm shows the batch total/count/date (from the already-fetched preview) behind `ConfirmDialog`'s new typed-confirmation gate (type «تایید» or the amount) ↔ [batchId]/page.tsx per-nurse rows + failed-payout retry + transfer-reference reconcile, unified onto `PageHeader`
@@ -206,11 +220,12 @@ client/
     │       │   │   └── notifications/page.tsx  # /admin/notifications — still a placeholder; NOT in `AdminLayout`'s nav (no real feed yet, ui-phase-10/11) so it satisfies "no placeholder reachable from admin nav"
     │       │   └── partner/                    # Partner-center portal (/partner/…) — a SEPARATE authz scope (f15). A center admin is not a Balinyaar admin; each page resolves the caller's OWN center (useMyPartnerCenter → access-denied on 403/404).
     │       │       ├── layout.tsx              # 'use client' — RoleGuard (no expected role — hydration-only) → PartnerLayout (own partner nav; self-gates via useMyPartnerCenter)
-    │       │       ├── loading.tsx             # → ../_chrome/SidebarShellSkeleton
+    │       │       ├── loading.tsx             # → ../_chrome/ShellContentSkeleton
     │       │       ├── page.tsx                # Thin RSC — generateMetadata (partner.home_title) + renders PartnerHomeScreen
     │       │       ├── PartnerHomeScreen.tsx   # 'use client' — center home: onboarding/verification state banner + license fields + is_merchant_of_record indicator
     │       │       ├── nurses/page.tsx         # /partner/nurses — the center's sponsored nurses (verification badge)
     │       │       ├── bookings/                # /partner/bookings — ui-phase-11: page.tsx localizes the 7 booking-status codes onto `StatusChip` (was raw English wire codes, e.g. `pending_payment`) in both the table and filter, adopts `useAdminListState`, and rows link to ↔ [id]/page.tsx (new) — a scoped read-only detail (dates, status timeline via the shared `StatusTimeline`, patient display name only — no clinical data; REQ-064, mock-backed)
+    │       │       ├── more/page.tsx           # /partner/more — «بیشتر» group root: the center identity + merchant-of-record status (previously squeezed into the top bar and hidden below `sm`), SettingsPanel, SignOutRow
     │       │       └── settlement/page.tsx     # /partner/settlement — rendered ONLY when is_merchant_of_record: per-booking commission invoices (commission/VAT decomposition via PartnerSettlementRow, signed-URL PDF, masked IBAN); non-MoR shows the "settlement via Balinyaar" state; ui-phase-11 adds a client-side «خروجی CSV» export (`utils/toCsv.ts`, UTF-8 BOM + CRLF for Excel) of the current result set
     │       ├── (customer-focused)/             # ui-phase-3 — chrome-free counterpart to (customer) for can't-tab-away flows; same URL space (route groups add no segment)
     │       │   ├── layout.tsx                  # 'use client' — RoleGuard(expected=customer) → FocusedLayout (no BottomBar/bell/sidebar)
@@ -239,17 +254,19 @@ client/
     │   │   ├── PageHeader/    # title+subtitle+actions+optional back button (backTo/backLabel); ui-phase-11 added `meta` (a chip-row slot below the title, distinct from the button-oriented `actions`) and `onBack` (a callback alternative to `backTo` — pairs with `useAdminBackToList` for `router.back()`-with-fallback semantics; takes precedence over `backTo` when both are given)
     │   │   ├── ConfirmDialog/ # promoted from admin/ — required-reason gating + busy-disable, now usable by any actor; ui-phase-11 added `requireTypedConfirmation`/`typedConfirmationLabel`/`typedConfirmationPlaceholder` — confirm stays disabled until the typed value matches one of the given strings, the guard for an irreversible money-moving action (the admin payout run confirm)
     │   │   ├── SurfaceCard/   # flat Paper wrapper, padding: 'sm'|'md'|'lg'
-    │   │   ├── AccentCard/    # SurfaceCard + tone → 4px borderInlineStart accent (primary/secondary/success/error/warning/info/trust/neutral)
+    │   │   ├── AccentCard/    # SurfaceCard + a semantic `tone` for a STATEFUL panel. iteration-2: the colored edge stripe is GONE — a column of cards read as a row of loose vertical rules down the RTL side of the screen. `tone` survives as the semantic label (reaches the DOM as `data-accent-tone`); state is carried by the StatusChip/icon/copy inside the card. Do not reintroduce the stripe
+    │   │   ├── form/          # (iteration-2) the react-hook-form seam — `FormSection` (a titled/described group of fields, with an optional/status marker) + `RhfTextField` (`transform` normalizes keystrokes into form state; rule message replaces the helper text) / `RhfChipSelect` (multi or single; `allowCustomValues` renders a stored code that isn't in the option list) / `RhfJalaliDateField` / `RhfControlGroup` (label+hint+error shell around ANY non-input control — GenderToggle, RatingInput, a map picker). Every wrapper falls back to the enclosing `FormProvider`'s control, so a form wires it once (all tested)
     │   │   ├── Money/         # <Money amountIrr size tone deduction hideUnit strikethrough> — the one money-rendering primitive (wraps utils/money.ts); size gained `xl` (h4) in ui-phase-6 for the checkout/confirmation prominent-total hero; imports next-intl (see jest.config.ts transformIgnorePatterns note below)
     │   │   ├── StatusTimeline/ # ordered TimelineNode[] (completed/current/pending/failed) with animated pulse on current (respects prefers-reduced-motion)
     │   │   ├── JalaliDatePicker/ # calendarEngine.ts (jalaali-js-backed Jalali↔Gregorian) + grid/chips variants (ui-phase-4: chips variant takes optional `todayLabel`/`tomorrowLabel` overrides — the C1 «امروز»/«فردا» date-intent strip), RTL-aware keyboard nav
     │   │   ├── JalaliDateField/  # read-only TextField + Popover wrapping JalaliDatePicker
     │   │   ├── JalaliDateIntentPicker/ # ui-phase-5 — extracted from C1's local date-intent widget (near-day chip strip + a calendar-icon Popover entry into the full grid) so C4's real required date field reuses it too, not just C1's intent-only one; caller-owned today/tomorrow/pick-other labels (tested)
-    │   │   ├── StickyActionBar/ # ui-phase-4 — a `position:sticky` bottom-pinned action-bar shell for a scrolling screen's primary CTA (C1's live-count CTA, C3's booking CTA); composes with the shell's existing BottomBar safe-area padding rather than reimplementing `env(safe-area-inset-bottom)`
+    │   │   ├── StickyActionBar/ # ui-phase-4 — a `position:sticky` bottom-pinned action-bar shell for a scrolling screen's primary CTA (C1's live-count CTA, C3's booking CTA). iteration-2: offsets off `--bal-chrome-bottom` (published by AppFrame) so it clears the pinned nav; the property already carries `env(safe-area-inset-bottom)` and resolves to `0px` in a chrome-free shell
     │   │   ├── LocaleSwitcher/   # ui-2 fa/en toggle preserving the current route (`router.replace(pathname, {locale})` via `@/i18n/navigation`); sidebar footers, the customer profile hub, the public shell (tested)
     │   │   ├── Pager/            # ui-phase-7 — the shared prev/next "page X of Y" control (common namespace i18n) replacing the near-identical inline pagers hand-rolled per list screen (nurse inbox tabs, payout history/earnings) (tested)
     │   │   ├── InitialsAvatar/   # ui-phase-9 — warm auto-colored initials for a person with no photo: deterministic name-hash → one of 6 `--bal-avatar-*` token pairs (tokens.css, both scheme blocks); `aria-hidden` (decorative next to a visible name); used by `PatientHeader` and (via `ProfileSummary`'s new `initialsFallback` prop) the customer account hub (tested)
     │   │   ├── FormDialogShell/  # ui-phase-9 — full-screen-below-`sm` form dialog (app-bar header + close) with a dirty-gated discard-confirm on close/backdrop/escape; the shared primitive behind the patient/address add-edit dialogs (the hosted form reports `dirty` via an `onDirtyChange` prop) (tested)
+    │   │   ├── NavHubList/    # the grouped list of destinations a group-root («hub») page is built from — the surface that replaced the sidebar: icon chip + title + one line of orientation + optional badge/meta + chevron, navigating through the locale-aware `@/i18n/navigation` Link (tested)
     │   │   ├── RouteFadeIn/   # ui-phase-12 — the one route-content fade/slide primitive (motion pass): wraps `{children}`, keyed on the locale-stripped pathname so it remounts (replays the CSS `bal-fade-in` keyframe, globals.css) on navigation but never on an in-place re-render; mounted inside the `ErrorBoundary` in all five shells (tested)
     │   │   └── index.tsx      # barrel — keep next-intl-importing primitives (Money) below the presentational ones so the poisoning risk stays visible in review
     │   ├── admin/              # f15 backoffice + partner composites (import from `@/components/admin`): AdminDataTable (v2, ui-phase-11 — optional per-column server-param `sort`/`sortable` + `TableSortLabel`, `stickyHeader` scroll viewport, `minWidth`, a `footer` line), AdminPager (page/pageCount; the admin `page_indicator` i18n key regained its `{total}`), AdminPageHeader/AdminEmptyState/AdminErrorState, ConfirmDialog (thin alias), ConfigRow/AuditLogRow (ui-phase-11 — expand chevron rotates + `aria-expanded` + button semantics, new `actorLabel` prop resolved via a batch id→name lookup)/SupportAlertCard (ui-phase-11 — `assignSelfDisabled`/`assignSelfDisabledTitle` so "assign to me" never falls back to a guessed user)/PartnerSettlementRow, DocumentViewer, RefundPanel, AdminMessageBubble, and (ui-phase-11) `UserPicker`/`NursePicker` — async name/phone `Autocomplete` over the admin user directory (REQ-061, mock-backed), replacing every raw numeric-id `TextField` on an audited action; each option renders name+masked-phone+id, never a bare id
@@ -298,32 +315,31 @@ client/
     │   ├── geography/         # F3 geo composites: CascadingRegionSelect, AddressForm, AddressCard (ui-phase-9 added a pin-quality cue — hasPin/pinSetLabel/pinMissingLabel), and the map-pin picker boundary — `AddressMapPicker` now branches on `NESHAN_WEB_KEY` (`@/config`): real Neshan tiles via `NeshanMap` (Leaflet, dynamically imported `ssr:false`; search box + locate-me + draggable pin + reverse-geocoded preview via `services/geography/neshan.ts`'s direct third-party fetch client) when set, else the original bounded-canvas grid stand-in (kept, not deleted, for dev/CI/jsdom) — `{ latitude, longitude }` in/out is identical either way so `AddressForm` never changed (each tested; `NeshanMap` itself isn't unit-tested — jsdom+Leaflet integration — and is unreachable in tests since `NEXT_PUBLIC_NESHAN_KEY` is unset in CI)
     │   ├── messaging/         # f14 tickets composites (import from @/components/messaging), ui-phase-10 messaging-app rebuild. Screens shared by the customer+nurse pages (role decides chrome): TicketInboxScreen (status filter chips + load-more, EmergencyPlaybookRow instead of a permanent banner), TicketThreadScreen (+ TicketConversationPanel, key={ticketId} — owns the one usePostMessage/draft both TicketMessageList and MessageComposer share, so retry/discard and the composer are one pipeline), TicketMessageList (date separators/author-grouped bubbles/centered system events via useThreadScroll — opens at the newest message, "new message" pill), ContactSupportDialog (new-ticket → shows referenceCode), MessageComposer (controlled; pointer-aware Enter semantics, attachment affordance gated behind `TICKETS_ATTACHMENTS_ENABLED`), BookingSupportEntry (page-local glue on f8 booking detail — reuses the cached booking + care query, no refetch; still mounts the full alarm-red EmergencyBanner, untouched). Pure/tested: MessageBubble (mine/theirs, RTL-mirrored, hh:mm-only, failed-send retry-in-place + discard, `role="alert"` on failure), TicketListCard (prominent referenceCode + unread pill + last-message preview + relative time, mock-tolerant when the enrichment fields are absent), EmergencyBanner (nurse post-confirmation tel: playbook only), EmergencyPlaybookRow (the inbox's compact neutral emergency row). Helpers: statusKind.ts, authorLabel.ts, clientMessageId.ts, useThreadScroll (reusable scroll-orchestration hook, exported for phase 11's admin thread)
     │   ├── notifications/     # f14 notification composites (import from @/components/notifications), ui-phase-10 pass. NotificationBell (chrome container — subscribes to the polling count so only it re-renders; opens NotificationBellPopover on the nurse desktop shell instead of navigating, everywhere else still navigates) → NotificationBellView (pure, tested, ref-forwarding so the container can anchor the popover), NotificationBellPopover (5-recent preview, fetches on open, exported for phase 11's admin shell once it has a feed), NotificationRow (pure, tested: per-kind tinted icon container, navigable rows get a trailing chevron, non-navigable rows render as a plain non-rippling surface), NotificationCenter (shared page body: unread-first, day-grouped امروز/دیروز/این‌هفته with relative timestamps, mark-read-on-open + mark-all, deep-links via notificationDeepLink). Helper: notificationIcon.ts (+ notificationTint). Admin's bell entry is hidden (no real feed yet, `AdminLayout.tsx`) until phase 11 ships one.
-    │   └── auth/              # Auth-flow composites: LoginFlow, PhoneStep, OtpStep, RoleRouter, SelectRole, AuthCard, BrandMark, AuthSplash, RoleGuard (role-aware shell guard, tested), AuthAccountError (/me-failed recovery), useCountdown, useWebOtp (ui-phase-3 WebOTP autofill seam), AuthIllustration + TrustBullets (ui-phase-3 CSS/SVG login-hero treatment)
+    │   ├── settings/          # The app's one appearance-and-language surface (import from @/components/settings): SettingsPanel (language row + the appearance block, tested), ThemeModeSetting (a three-way روشن/تیره/سیستم segmented control, and the ONLY subscriber to useColorScheme() left in the app — an on/off Switch could not express `system`, which is the app's actual default), SignOutRow (always through useLogout()). Mounted in each actor's settings hub — /nurse/more, /admin/system, /partner/more and the customer profile hub — and nowhere else
+    │   └── auth/              # Auth-flow composites: LoginFlow, PhoneStep, OtpStep, RoleRouter, SelectRole, AuthCard (brand mark → step form → divider → TrustBullets on ONE surface; the facts used to float under the card, and the desktop side-illustration went away with the frame), BrandMark, AuthSplash, RoleGuard (role-aware shell guard, tested — also what makes the locale root role-aware), AuthAccountError (/me-failed recovery), useCountdown, useWebOtp (ui-phase-3 WebOTP autofill seam), TrustBullets
     ├── i18n/
     │   ├── routing.ts     # defineRouting — locales: ['en', 'fa'], defaultLocale: 'fa'
     │   ├── request.ts     # getRequestConfig — loads messages/${locale}.json
     │   └── navigation.ts  # ui-2 createNavigation(routing) — Link/usePathname/useRouter/redirect/getPathname. ALL chrome navigation goes through this: usePathname is locale-stripped (so unprefixed ROUTES.* compare directly) and Link/router add the locale automatically — no manual `/${locale}` prefixing, no middleware redirect hop
-    ├── layout/  # ui-2 rewrite — per-actor branded chrome + correct locale-aware navigation
+    ├── layout/  # the one mobile app shell — per-actor tabs over a shared phone-width frame
+    │   ├── AppFrame.tsx        # 'use client' — THE device frame every shell renders inside: a centered `APP_FRAME_MAX_WIDTH` column on a `--bal-frame-canvas` backdrop, `overflowX: hidden` + `minWidth: 0` so an over-wide child clips instead of dragging the app sideways. iteration-2: above `sm` the column FLOATS as a rounded, shadowed card with a gutter all round (edge-to-edge on a phone); header and footer are pinned OVER the single scrolling `<main>` with `position: absolute` — never `fixed`, which would break out of the centered column — and `<main>` reserves their exact height as padding. It also publishes `--bal-chrome-top`/`--bal-chrome-bottom` (0px in a chrome-free shell) so any `position: sticky` element in the tree can clear the bars without importing a constant. No shell computes a top offset any more (tested)
+    │   ├── MobileShell.tsx     # 'use client' — the ONE authenticated shell behind all four actor apps: AppFrame + a contextual TopBar (brand lockup on a tab's own path, back chevron + route title on anything deeper) + BottomBar + ErrorBoundary + RouteFadeIn + PageTitleProvider. Actors supply only `tabs` + `headerActions`. No identity affordance in the header — that lives in each actor's «بیشتر»/account hub, one tap away on the nav
     │   ├── PrivateLayout.tsx   # authenticated wrapper (passthrough today); actor chrome lives in the shells below
-    │   ├── CustomerLayout.tsx  # 'use client' — customer shell: contextual TopBar (brand lockup on the 5 root tabs, title+back on pushed routes) + mobile BottomBar, replaced by an inline desktop top-nav (CustomerDesktopNav) at ≥md; ui-phase-10 added a `useSupportUnreadTotal`-driven Badge on the root-tab support icon (renders only when a signal exists — mock-only until REQ-059)
-    │   ├── NurseLayout.tsx     # 'use client' — nurse workspace via TopBarAndSideBarLayout: grouped sidebar (امروز/حرفهٔ من/مالی/پشتیبانی) + ProfileSummary identity card + ActorSwitcher, 5-tab mobile BottomBar («بیشتر» opens the same sidebar drawer); ui-phase-10 added `badgeCount` (useSupportUnreadTotal) on the support sidebar item
-    │   ├── AdminLayout.tsx     # 'use client' — admin shell via TopBarAndSideBarLayout: sectioned sidebar (اعتماد/مالی/پشتیبانی/سیستم, useAdminCapabilities-gated, unchanged gating), TopBar identity chip (fine-grained role); no notification bell (ui-phase-10 — admin has no real feed yet, re-add via `NotificationBellPopover` once phase 11 ships one)
-    │   ├── PartnerLayout.tsx   # 'use client' — partner portal via TopBarAndSideBarLayout; TopBar identity chip shows the center's own name (useMyPartnerCenter, skeleton while resolving); ui-phase-11 adds a compact merchant-of-record `StatusChip` beside it, persistent across every portal page
-    │   ├── PublicLayout.tsx    # unauthenticated shell — minimal corner strip (logo + LocaleSwitcher + dark toggle), no sidebar/bottom bar; AuthCard renders its own larger BrandMark
-    │   ├── FocusedLayout.tsx   # ui-phase-3 — chrome-free shell for can't-tab-away flows (today: onboarding): a slim logo strip + content, no BottomBar/bell/sidebar; the route group above it still applies RoleGuard
-    │   ├── TopBarAndSideBarLayout.tsx  # 'use client' — the nurse/admin/partner engine: a fixed TopBar (useRouteTitle) + SideBar rendered as flex-row siblings (mobile temporary Drawer + desktop `variant="permanent"` Drawer switched by CSS `sx` breakpoints only — no `useIsMobile` structural branching, so desktop first paint already has the sidebar); optional `identity`/`sidebarIdentity`/`mobileBottomBar` slots
-    │   ├── routeTitle.tsx      # ui-2 static route→title map (longest-prefix over ROUTES.*, off the `nav` namespace) + `PageTitleProvider`/`usePageTitleOverride` per-page dynamic-title slot (area phases feed real names in later) + `useRouteTitle`; `isCustomerRootTab`/`CUSTOMER_ROOT_TABS` for the customer header's brand-lockup-vs-title branch
-    │   ├── matchActivePath.ts  # ui-2 shared longest-prefix, winner-takes-all active-path matcher (tested) — used by SideBarNavList and BottomBar so a nested route still lights up its parent tab, never a sibling
-    │   ├── config.ts
+    │   ├── CustomerLayout.tsx  # 'use client' — customer tabs: خانه (+/search) · رزروها · حلقهٔ مراقبت · کیف‌پول · پروفایل (+/addresses, /support, /notifications — the account hub that owns appearance/language)
+    │   ├── NurseLayout.tsx     # 'use client' — nurse tabs: امروز (/nurse) · درخواست‌ها (/nurse/requests, pending-count badge off the already-cached `useNurseRequestInbox`) · حرفهٔ من (/nurse/practice) · مالی (/nurse/finance) · بیشتر (/nurse/more, `useSupportUnreadTotal` badge). درخواست‌ها earned a tab in iteration-2: it is the one nurse screen with a deadline on it (a pending request expires unanswered) and was previously reachable only from a strip on the dashboard. Each group root is a real page; `matchPaths` keeps the historical destination URLs lighting up their group
+    │   ├── AdminLayout.tsx     # 'use client' — admin tabs: نمای کلی · اعتماد · مالی · پشتیبانی · سیستم, each a group root. A group tab hides when `useAdminCapabilities` permits nothing inside it (gating unchanged and still per-console; the server still enforces); سیستم is always present because it carries settings + sign-out
+    │   ├── PartnerLayout.tsx   # 'use client' — partner tabs: مرکز · پرستاران · رزروها · تسویه · بیشتر. The center identity + merchant-of-record indicator moved from the top bar into /partner/more
+    │   ├── PublicLayout.tsx    # unauthenticated shell — the frame and NOTHING else: no top bar, so the login card's own BrandMark is the only mark on screen and the locale/theme toggles that used to sit up here live in settings
+    │   ├── FocusedLayout.tsx   # ui-phase-3 — chrome-free framed shell for can't-tab-away flows (onboarding, and /select-role via its own layout.tsx): a slim logo strip + content, no bottom nav; the route group above it still applies RoleGuard
+    │   ├── routeTitle.tsx      # ui-2 static route→title map (longest-prefix over ROUTES.*, off the `nav` namespace) + `PageTitleProvider`/`usePageTitleOverride` per-page dynamic-title slot + `useRouteTitle`
+    │   ├── matchActivePath.ts  # ui-2 shared longest-prefix, winner-takes-all active-path matcher (tested) — BottomBar runs it over each tab's own path PLUS its `matchPaths` claims, so a nested route still lights up its parent tab, never a sibling
+    │   ├── config.ts           # APP_FRAME_MAX_WIDTH (480 — mirrored by components/config.ts's CONTENT_MAX_WIDTH) + TOP_BAR_HEIGHT + TOP_CHROME_HEIGHT/BOTTOM_NAV_HEIGHT (the space each floating bar occupies, which AppFrame reserves as `<main>` padding — keep in sync with the bars) + FLOATING_BAR_SX (the ONE definition of the two bars' shared shape, so header and footer cannot drift apart)
     │   ├── index.ts
     │   └── components/
-    │       ├── TopBar.tsx      # title | titleNode override, align ('start' breadcrumb-style | 'center'), optional secondaryRow (the customer desktop top-nav)
-    │       ├── SideBar.tsx     # renders both Drawers (mobile temporary + desktop permanent) off one content tree; close handler wired to the nav list only (dark-mode/locale toggles never close it); brand header + optional identity slot
-    │       ├── SideBarNavList.tsx  # renders `ListSubheader` sections when items share a `group`; selection computed once via matchActivePath and passed down
-    │       ├── SideBarNavItem.tsx  # navigates via `@/i18n/navigation`'s Link — one navigation, no redirect hop; renders `LinkToPage.badgeCount` as a small Badge on the icon when > 0 (ui-phase-10, the nurse support entry)
-    │       ├── BrandLockup.tsx     # ui-2 compact horizontal logo+wordmark — customer header (root tabs) + every sidebar shell's drawer header
-    │       ├── ActorSwitcher.tsx   # ui-2 dual customer+nurse session switcher (renders nothing for a single-role session); nurse sidebar + customer profile hub (tested)
-    │       ├── DarkModeButton.tsx  # 'use client' — only subscriber to useColorScheme()
+    │       ├── TopBar.tsx      # NOT an AppBar — no elevation or surface of its own: `AppFrame` wraps it in the floating-pill container (`FLOATING_BAR_SX`), so it is the bottom nav mirrored. Content: title | titleNode override, align ('start' breadcrumb-style | 'center')
+    │       ├── BottomBar.tsx   # the app's only navigation surface (tested) — a FLOATING pill bar (inset from the frame edges, `FLOATING_BAR_SX`) rather than an edge-to-edge slab sealing off the bottom; pinned over the scrolling main by AppFrame, which reserves `BOTTOM_NAV_HEIGHT` of padding so nothing is ever hidden under it. ICON-ONLY (iteration-2: the caption was the widest thing in the bar at five tabs and cost a whole line; the label survives as `aria-label`/`title`), each tab a fixed 44px CIRCLE that is simultaneously the target, the hover/press tint and the active fill (`--bal-motion-fast`, so the app-wide reduced-motion gate already covers it), laid out `space-around` so the target keeps one size at any tab count; `LinkToPage.badgeCount` badges and `matchPaths`-aware active matching
+    │       ├── BrandLockup.tsx     # ui-2 compact horizontal logo+wordmark — the TopBar title on a shell's root tabs
+    │       ├── ActorSwitcher.tsx   # ui-2 dual customer+nurse session switcher (renders nothing for a single-role session); nurse «بیشتر» hub + customer profile hub (tested)
     │       └── index.tsx
     ├── lib/
     │   ├── api/
@@ -571,6 +587,62 @@ Rules:
 
 ---
 
+## Forms
+
+**Rule: any form with more than one field uses react-hook-form.** A single-field control (a search
+box, a filter select, a message composer) does not — it is state, not a form.
+
+This is not a style preference. The pattern it replaced was one `useState` per input **plus** a
+parallel `useState` per error flag, which meant every keystroke re-rendered the whole screen —
+including query-backed cards, price previews and uploaders sitting beside the field — and left
+"is this form valid?" spread across ad-hoc `if` blocks at the top of each submit handler.
+
+### How to build one
+
+1. `useForm<Values>({ mode: 'onTouched', defaultValues })` — `onTouched` is the house default: an
+   error appears once a field has been visited, never while it is first being typed into.
+2. Wrap the subtree in `<FormProvider {...form}>` and bind fields with the
+   `@/components/common/form` wrappers. They read `control` off the provider, so it is threaded once.
+   Never call `register`/`useController` at a call site.
+3. Put the rule on the field it governs (`rules={{ validate: … }}`), returning the **translated
+   message**. Cross-field rules read the second `validate` argument (all values) — that is how the
+   C4 request form's past-date guard reads the chosen start time.
+4. Render `<Stack component="form" noValidate onSubmit={handleSubmit(submit)}>` and make the primary
+   button `type="submit"`. Enter-to-submit then works for free.
+5. **Async defaults come from a mounted-when-ready child, not an effect.** When the initial values
+   depend on a query (the verification credentials read-back, the C4 variant/address defaults), keep
+   the loading branch in the parent and mount the form component only once the data has resolved, so
+   `defaultValues` *is* the server state instead of being copied into it later.
+
+### Wrappers
+
+| Wrapper | For |
+| --- | --- |
+| `RhfTextField` | any `TextField`, incl. `select`. `transform` normalizes keystrokes **into form state** (digit-stripping, max length) so the stored value is canonical, not just the displayed one. A rule message replaces `helperText`. |
+| `RhfChipSelect` | a chip group over stable codes — `string[]` (multi) or `string \| null` (single). `allowCustomValues` keeps a stored code that isn't in the option list visible. |
+| `RhfJalaliDateField` | a Jalali date field; stores the wire ISO (Gregorian) string or `null`. |
+| `RhfControlGroup` | **any** non-input control (`GenderToggle`, `RatingInput`, `CascadingRegionSelect`, the map-pin picker, a `Switch`, a `Checkbox`). Gives it the same label/hint/error shell the text fields get. |
+
+### Two conventions worth knowing
+
+- **A control that renders its own error text gets a message-less rule** (`validate: (v) => cond`,
+  no string). `RhfControlGroup` then flags the field without printing a second identical line —
+  `AddressForm`'s region and pin fields are the reference.
+- **When the displayed value isn't the stored value, drop to a bare `Controller`.** Two cases exist
+  and both are commented at the call site: the variant builder's display-name (stored = the override
+  only, blank ⇒ the server names it; shown = the live auto-generated name) and the admin refund
+  channel (stored = "" until explicitly overridden; shown = the server's resolved channel).
+
+### Structure: `FormSection`
+
+A long form is grouped into `FormSection`s — a heading, a one-line statement of *why* the group is
+being asked for, and an optional/status marker. Applies to the nurse profile, the verification
+identity + credentials screens, and the variant builder. The point is that an optional group reads
+as skippable and a blocked submit has somewhere to attribute itself; a flat run of ten `TextField`s
+makes everything look equally mandatory.
+
+---
+
 ## Theme System
 
 ### How it works (end-to-end, no-flash — CSS only, no boot script)
@@ -664,13 +736,21 @@ reduced-motion branch; extend this one rule if a new motion primitive needs the
 
 ### Toggle components
 
-`DarkModeToggleButton` and `DarkModeFormSwitch` in `src/layout/components/DarkModeButton.tsx` are the **only** components that subscribe to `useColorScheme()`. When the user toggles:
+`ThemeModeSetting` in `src/components/settings/ThemeModeSetting.tsx` is the **only** component that subscribes to `useColorScheme()`, and the app's only appearance control. It lives in each actor's settings hub (`/nurse/more`, `/admin/system`, `/partner/more`, the customer profile hub) and nowhere else — the old top-bar toggle spent a permanent slot of chrome in three shells on a preference set once. When the user picks a mode:
 1. `setMode('dark')` is called
 2. `Storage.prototype.setItem` intercept fires → writes `'color-scheme'='dark'` cookie synchronously
 3. MUI sets `data-mui-color-scheme="dark"` on `<html>`
-4. CSS variables resolve → browser repaints. No React re-render above the button.
+4. CSS variables resolve → browser repaints. No React re-render above the control.
 
-Use `colorScheme` (not `mode`) for the `isDark` check — `mode` can be `'system'` even when dark is active.
+**It is a three-way segmented control (light / dark / system), never a boolean switch.** `system` is
+the app's real default (`ThemeProvider`'s `defaultMode` on a cookie-less first visit), so an on/off
+control cannot represent the current state and would silently misreport it.
+
+Use `colorScheme` (not `mode`) for an `isDark` check — `mode` can be `'system'` even when dark is
+active. The one exception is the control itself, which must read `mode`: that is the user's *choice*,
+while `colorScheme` is only the resolved result. `mode` is `undefined` until MUI mounts, so default it
+(`mode ?? 'system'`) rather than rendering an unselected control — server, first client render and
+pre-mount state then all agree, so there is no hydration mismatch and no flash of "nothing selected".
 
 ---
 

client/messages/en.json

@@ -62,14 +62,18 @@
     "currency_toman": "Toman",
     "brand": "Balinyaar",
     "brand_tagline": "Home care you can trust",
-    "open_sidebar": "Open menu",
     "switch_locale": "Switch to {locale}",
     "page_prev": "Previous",
     "page_next": "Next",
     "page_indicator": "Page {page} of {total}",
     "discard_title": "Discard changes?",
     "discard_body": "Your unsaved changes will be lost.",
-    "discard_confirm": "Discard"
+    "discard_confirm": "Discard",
+    "language": "Language",
+    "appearance": "Appearance",
+    "theme_light": "Light",
+    "theme_dark": "Dark",
+    "theme_system": "System"
   },
   "shell": {
     "customer_app": "Family app",
@@ -185,7 +189,11 @@
   "nurseProfile": {
     "title": "Nurse profile",
     "subtitle": "What families see when they find you.",
-    "photo": "Profile photo",
+    "section_intro_title": "Your introduction",
+    "section_intro_description": "The photo and the words families see first.",
+    "section_experience_title": "Experience & education",
+    "section_experience_description": "Your background is how families decide with confidence.",
+    "section_specializations_description": "The areas you have the most experience in.",
     "photo_hint": "A clear photo of your face.",
     "upload": "Upload photo",
     "uploading": "Uploading…",
@@ -216,6 +224,7 @@
     "education_other": "Other",
     "education_level_other_label": "Enter your education level",
     "education_field_other_label": "Enter your field of study",
+    "education_other_required": "Fill in the “other” value.",
     "specializations_label": "Specialties",
     "preview_cta": "Preview my public profile",
     "preview_title": "My public profile",
@@ -378,11 +387,9 @@
     "category_locked": "The category can't be changed after a service is created.",
     "options_title": "Set the service options",
     "options_subtitle": "Pick one option for each required item.",
-    "options_none": "This category has no options to configure.",
+    "options_missing_named": "Still to choose: {groups}",
     "required_badge": "Required",
     "optional_badge": "Optional",
-    "options_incomplete": "Answer every required item to continue.",
-    "price_title": "Set the price and unit",
     "price_label": "Price (Toman)",
     "price_hint": "Enter the price in Toman.",
     "price_required": "Enter a valid price greater than zero.",
@@ -398,6 +405,10 @@
     "preview_untitled": "New service",
     "summary_options": "Options",
     "summary_none": "No options",
+    "section_recap_title": "Selected service",
+    "section_recap_description": "Review your choices before you price it.",
+    "section_price_title": "Price & unit",
+    "section_listing_title": "How it appears in search",
     "next": "Next",
     "submit_create": "Add service",
     "submit_save": "Save changes",
@@ -727,8 +738,8 @@
     "accept_confirm_cta": "Yes, accept the request"
   },
   "dashboard": {
-    "greeting": "Hi, {name}",
     "retry": "Retry",
+    "title": "Today",
     "next_visit_title": "Next visit",
     "next_visit_empty": "No visits scheduled for today.",
     "next_visit_starts_in": "starts {relative}",
@@ -839,12 +850,12 @@
     "customer_switch": "Are you a family? Family sign in",
     "rate_limited": "Too many attempts — please try again shortly",
     "otp_title": "Enter the verification code",
-    "otp_sent_to": "Code sent to {phone}",
+    "otp_sent_to": "Code sent to <phone></phone>",
     "otp_verify_customer": "Verify and continue",
     "otp_verify_nurse": "Verify and sign in",
     "otp_invalid": "The code is incorrect or has expired",
     "otp_locked": "Too many attempts. Request a new code to continue.",
-    "resend_in": "Resend code in {time}",
+    "resend_in": "Resend code in <time></time>",
     "resend": "Resend code",
     "change_number": "Change number",
     "routing_title": "Signing you in…",
@@ -916,29 +927,34 @@
     "group_review": "Review",
     "payoff_title": "This is the badge families will see",
     "payoff_subtitle": "It fills in as you complete each group below.",
-    "identity_title": "Verify identity",
     "identity_subtitle": "Your national ID, a photo of your ID card, and a liveness selfie.",
+    "identity_step_number_title": "Your national ID",
     "national_id_label": "National ID",
     "national_id_hint": "Enter your 10-digit national ID.",
     "national_id_invalid": "Enter a valid national ID.",
     "card_label": "National-ID card image",
     "card_hint": "Photograph your ID card in good light, clearly readable.",
-    "card_recommended": "Uploading the ID card image is recommended.",
+    "card_recommended_short": "Recommended",
     "capture_hint_card": "Good lighting, no blur, all four corners of the card inside the frame.",
     "selfie_label": "Liveness selfie",
     "selfie_hint": "Take a selfie for face verification.",
     "capture_hint_selfie": "Good lighting, face centered and unobstructed.",
+    "capture_done": "Captured",
+    "required_badge": "Required",
     "auto_registry_note": "An automatic civil-registry check is performed.",
     "error_national_id_mismatch": "The national ID didn't match the civil registry. Please check and try again.",
     "error_shared_sim": "This SIM doesn't appear to be registered in your name. Please try again with a SIM registered to you.",
     "error_shahkar_mismatch": "The mobile-to-national-ID match failed. Please check and try again.",
     "identity_submit": "Submit & verify",
     "identity_submitting": "Verifying…",
+    "identity_needs_selfie": "Capture the liveness selfie to continue.",
     "identity_submitted": "Identity submitted — verification started",
     "back_to_checklist": "Back to checklist",
-    "credentials_title": "Professional credentials",
     "credentials_subtitle": "Your documents are reviewed by our team after upload.",
     "credentials_needs_start": "Start verification from the status checklist first.",
+    "credentials_documents_title": "Professional documents",
+    "credentials_documents_description": "Upload each document — a reviewer checks it.",
+    "credentials_documents_count": "{done} of {total}",
     "ino_number_label": "Nursing-council number",
     "ino_number_hint": "Enter your nursing-council membership number.",
     "ino_number_required": "Enter your nursing-council number.",
@@ -957,10 +973,12 @@
     "specialty_wound_care": "Wound care",
     "specialty_add_placeholder": "Another specialty",
     "specialty_add": "Add",
-    "registry_details_label": "Credential details (optional)",
     "issuing_authority_label": "Issuing authority",
     "issued_at_label": "Issue date",
     "expires_at_label": "Expiry date",
+    "registry_details_title": "Credential details",
+    "registry_details_description": "The issuer and dates speed the review up.",
+    "summary_none": "Nothing recorded",
     "manual_review_note": "These documents are reviewed manually by our team — not an instant approval.",
     "credentials_submit": "Submit credentials",
     "credentials_submitting": "Submitting…",
@@ -1423,6 +1441,7 @@
     "category_label": "Category",
     "subject_label": "Subject",
     "message_label": "Message",
+    "message_required": "Write your message.",
     "submit": "Send",
     "submitting": "Sending…",
     "cancel": "Cancel",
@@ -1951,24 +1970,69 @@
     "draft_banner": "This is placeholder legal copy — it has not yet been reviewed by counsel and must not be relied on before launch.",
     "terms_intro": "These draft terms describe how Balinyaar connects families with independent, verified home-nursing professionals. By creating an account you agree to the terms below.",
     "terms_sections": [
-      { "title": "The service", "body": "Balinyaar is a marketplace: it does not employ nurses. Independent nurses and nursing-company staff list their own services; families search, book, and pay through the platform." },
-      { "title": "Bookings and payment", "body": "You pay the full booking price through Balinyaar by card. The amount is held in an internal escrow ledger and is only released to the nurse, weekly, after your visit is confirmed and the dispute window closes." },
-      { "title": "Cancellations and refunds", "body": "Cancelling a confirmed booking may incur a fee depending on how close to the visit you cancel, shown to you before you confirm. Approved refunds are returned to your original payment method or provider." },
-      { "title": "Nurse verification", "body": "Every nurse on Balinyaar passes an identity check, a professional-competency license check, and other required verification steps before they can be booked. We show what has been verified on their profile." },
-      { "title": "Your responsibilities", "body": "Provide accurate information about the person receiving care, communicate through the app's ticket system for anything related to a booking, and treat nurses respectfully." },
-      { "title": "Liability", "body": "Balinyaar facilitates bookings between families and independent professionals; it is not itself a healthcare provider. Disputes are handled through our support ticket system." },
-      { "title": "Changes to these terms", "body": "We may update these terms as the service evolves. Material changes will be announced in the app before they take effect." },
-      { "title": "Contact", "body": "Questions about these terms can be sent through the support ticket system in the app." }
+      {
+        "title": "The service",
+        "body": "Balinyaar is a marketplace: it does not employ nurses. Independent nurses and nursing-company staff list their own services; families search, book, and pay through the platform."
+      },
+      {
+        "title": "Bookings and payment",
+        "body": "You pay the full booking price through Balinyaar by card. The amount is held in an internal escrow ledger and is only released to the nurse, weekly, after your visit is confirmed and the dispute window closes."
+      },
+      {
+        "title": "Cancellations and refunds",
+        "body": "Cancelling a confirmed booking may incur a fee depending on how close to the visit you cancel, shown to you before you confirm. Approved refunds are returned to your original payment method or provider."
+      },
+      {
+        "title": "Nurse verification",
+        "body": "Every nurse on Balinyaar passes an identity check, a professional-competency license check, and other required verification steps before they can be booked. We show what has been verified on their profile."
+      },
+      {
+        "title": "Your responsibilities",
+        "body": "Provide accurate information about the person receiving care, communicate through the app's ticket system for anything related to a booking, and treat nurses respectfully."
+      },
+      {
+        "title": "Liability",
+        "body": "Balinyaar facilitates bookings between families and independent professionals; it is not itself a healthcare provider. Disputes are handled through our support ticket system."
+      },
+      {
+        "title": "Changes to these terms",
+        "body": "We may update these terms as the service evolves. Material changes will be announced in the app before they take effect."
+      },
+      {
+        "title": "Contact",
+        "body": "Questions about these terms can be sent through the support ticket system in the app."
+      }
     ],
     "privacy_intro": "This draft policy explains what personal data Balinyaar collects to run the service, and how it is used.",
     "privacy_sections": [
-      { "title": "Information we collect", "body": "Your mobile number for login; for nurses, national ID and license details for verification; patient care information you or your nurse enter; approximate visit location for check-in/check-out; and payment metadata from our payment provider." },
-      { "title": "How we use it", "body": "To create and manage bookings, verify nurse identity and credentials, process payments and weekly nurse payouts, and provide support." },
-      { "title": "Who we share it with", "body": "Licensed payment providers, identity-verification vendors, and our licensed home-nursing partner center receive only the information each needs to do their part — never more." },
-      { "title": "Data security", "body": "Sensitive fields such as national ID numbers and clinical notes are encrypted. Access to patient care records is limited to the family and the assigned nurse." },
-      { "title": "Your rights", "body": "You can review and update most of your information from your profile, and can reach support to ask about, correct, or request deletion of your data." },
-      { "title": "Changes to this policy", "body": "We may update this policy as the service evolves. Material changes will be announced in the app before they take effect." },
-      { "title": "Contact", "body": "Questions about this policy can be sent through the support ticket system in the app." }
+      {
+        "title": "Information we collect",
+        "body": "Your mobile number for login; for nurses, national ID and license details for verification; patient care information you or your nurse enter; approximate visit location for check-in/check-out; and payment metadata from our payment provider."
+      },
+      {
+        "title": "How we use it",
+        "body": "To create and manage bookings, verify nurse identity and credentials, process payments and weekly nurse payouts, and provide support."
+      },
+      {
+        "title": "Who we share it with",
+        "body": "Licensed payment providers, identity-verification vendors, and our licensed home-nursing partner center receive only the information each needs to do their part — never more."
+      },
+      {
+        "title": "Data security",
+        "body": "Sensitive fields such as national ID numbers and clinical notes are encrypted. Access to patient care records is limited to the family and the assigned nurse."
+      },
+      {
+        "title": "Your rights",
+        "body": "You can review and update most of your information from your profile, and can reach support to ask about, correct, or request deletion of your data."
+      },
+      {
+        "title": "Changes to this policy",
+        "body": "We may update this policy as the service evolves. Material changes will be announced in the app before they take effect."
+      },
+      {
+        "title": "Contact",
+        "body": "Questions about this policy can be sent through the support ticket system in the app."
+      }
     ]
   },
   "welcome": {
@@ -2005,5 +2069,41 @@
     "footer_contact_title": "Support",
     "footer_contact_body": "For any questions, reach us through the in-app support ticket system after you sign in.",
     "footer_copyright": "© {year, number} Balinyaar"
+  },
+  "hub": {
+    "practice_subtitle": "Your profile, services and credentials in one place",
+    "practice_profile_sub": "Name, photo, specialisations and education",
+    "practice_services_sub": "The services and prices you offer",
+    "practice_coverage_sub": "The cities and districts you travel to",
+    "practice_verification_sub": "Identity, professional credentials and your trust badge",
+    "practice_status_title": "Your listing status",
+    "practice_accepting_on": "Accepting bookings",
+    "practice_accepting_off": "Bookings paused",
+    "practice_accepting_manage": "Manage",
+    "finance_subtitle": "Earnings, payouts and your bank account",
+    "finance_earnings_sub": "Completed visits and your share",
+    "finance_payouts_sub": "Weekly transfer history",
+    "finance_bank_sub": "The IBAN payouts are sent to",
+    "finance_balance_error": "Your balance could not be loaded.",
+    "more_title": "Support & settings",
+    "more_support_sub": "Message the Balinyaar team",
+    "more_notifications_sub": "Recent activity on your account",
+    "admin_group_empty_title": "No access",
+    "admin_group_empty_body": "Your current role can't act on any console in this section.",
+    "admin_trust_subtitle": "Nurse verification and review moderation",
+    "admin_finance_subtitle": "The weekly nurse payout run",
+    "admin_support_subtitle": "User tickets and internal alerts",
+    "admin_system_subtitle": "Platform configuration and your account",
+    "admin_verification_sub": "Cases waiting for review",
+    "admin_reviews_sub": "Publish, hide or reject reviews",
+    "admin_payouts_sub": "Preview and run a payout batch",
+    "admin_tickets_sub": "The global ticket queue",
+    "admin_alerts_sub": "The internal alert worklist",
+    "admin_config_sub": "Config keys and their change history",
+    "admin_holidays_sub": "The bank-holiday calendar",
+    "admin_audit_sub": "Read-only record of every change",
+    "admin_partners_sub": "Partner centers and sponsored nurses",
+    "admin_users_sub": "Search users by name or phone",
+    "admin_roles_sub": "Grant and revoke roles"
   }
 }

client/messages/fa.json

@@ -62,14 +62,18 @@
     "currency_toman": "تومان",
     "brand": "بالین‌یار",
     "brand_tagline": "مراقبت مطمئن در خانه",
-    "open_sidebar": "باز کردن منو",
     "switch_locale": "تغییر به {locale}",
     "page_prev": "قبلی",
     "page_next": "بعدی",
     "page_indicator": "صفحه {page} از {total}",
     "discard_title": "تغییرات نادیده گرفته شود؟",
     "discard_body": "تغییراتی که ذخیره نشده از دست می‌رود.",
-    "discard_confirm": "بله، نادیده بگیر"
+    "discard_confirm": "بله، نادیده بگیر",
+    "language": "زبان",
+    "appearance": "نمایش",
+    "theme_light": "روشن",
+    "theme_dark": "تیره",
+    "theme_system": "سیستم"
   },
   "shell": {
     "customer_app": "اپلیکیشن خانواده",
@@ -185,7 +189,11 @@
   "nurseProfile": {
     "title": "پروفایل پرستار",
     "subtitle": "چیزی که خانواده‌ها هنگام یافتن شما می‌بینند.",
-    "photo": "عکس پروفایل",
+    "section_intro_title": "معرفی شما",
+    "section_intro_description": "عکس و متنی که خانواده‌ها پیش از هر چیز می‌بینند.",
+    "section_experience_title": "تجربه و تحصیلات",
+    "section_experience_description": "سابقه و مدرک شما به خانواده‌ها کمک می‌کند با اطمینان انتخاب کنند.",
+    "section_specializations_description": "حوزه‌هایی که در آن‌ها بیشترین تجربه را دارید.",
     "photo_hint": "یک عکس واضح از چهره‌تان.",
     "upload": "بارگذاری عکس",
     "uploading": "در حال بارگذاری…",
@@ -216,6 +224,7 @@
     "education_other": "سایر",
     "education_level_other_label": "مقطع تحصیلی خود را وارد کنید",
     "education_field_other_label": "رشتهٔ تحصیلی خود را وارد کنید",
+    "education_other_required": "مورد «سایر» را وارد کنید.",
     "specializations_label": "تخصص‌ها",
     "preview_cta": "پیش‌نمایش نمایهٔ عمومی من",
     "preview_title": "نمایهٔ عمومی من",
@@ -378,11 +387,9 @@
     "category_locked": "دسته پس از ایجاد خدمت قابل تغییر نیست.",
     "options_title": "گزینه‌های خدمت را مشخص کنید",
     "options_subtitle": "برای هر مورد الزامی یک گزینه انتخاب کنید.",
-    "options_none": "این دسته گزینه‌ای برای تنظیم ندارد.",
+    "options_missing_named": "هنوز انتخاب نشده: {groups}",
     "required_badge": "الزامی",
     "optional_badge": "اختیاری",
-    "options_incomplete": "برای ادامه، همهٔ موارد الزامی را انتخاب کنید.",
-    "price_title": "قیمت و واحد را تعیین کنید",
     "price_label": "قیمت (تومان)",
     "price_hint": "قیمت را به تومان وارد کنید.",
     "price_required": "قیمتی معتبر و بزرگ‌تر از صفر وارد کنید.",
@@ -398,6 +405,10 @@
     "preview_untitled": "خدمت جدید",
     "summary_options": "گزینه‌ها",
     "summary_none": "بدون گزینه",
+    "section_recap_title": "خدمت انتخابی",
+    "section_recap_description": "پیش از تعیین قیمت، انتخاب‌های خود را مرور کنید.",
+    "section_price_title": "قیمت و واحد",
+    "section_listing_title": "نمایش در جستجو",
     "next": "بعدی",
     "submit_create": "ثبت خدمت",
     "submit_save": "ذخیره تغییرات",
@@ -727,8 +738,8 @@
     "accept_confirm_cta": "بله، پذیرش درخواست"
   },
   "dashboard": {
-    "greeting": "سلام، {name}",
     "retry": "تلاش مجدد",
+    "title": "امروز",
     "next_visit_title": "ویزیت بعدی",
     "next_visit_empty": "امروز ویزیتی ندارید.",
     "next_visit_starts_in": "شروع {relative}",
@@ -839,12 +850,12 @@
     "customer_switch": "خانواده هستید؟ ورود خانواده‌ها",
     "rate_limited": "به‌دلیل تلاش زیاد، کمی بعد دوباره تلاش کنید",
     "otp_title": "کد تأیید را وارد کنید",
-    "otp_sent_to": "کد به شماره {phone} ارسال شد",
+    "otp_sent_to": "کد به شماره <phone></phone> ارسال شد",
     "otp_verify_customer": "تأیید و ادامه",
     "otp_verify_nurse": "تأیید و ورود",
     "otp_invalid": "کد وارد شده نادرست یا منقضی شده است",
     "otp_locked": "به‌دلیل تلاش‌های زیاد، ورود موقتاً قفل شد. کد جدید دریافت کنید.",
-    "resend_in": "ارسال مجدد کد تا {time}",
+    "resend_in": "ارسال مجدد کد تا <time></time>",
     "resend": "ارسال مجدد کد",
     "change_number": "تغییر شماره",
     "routing_title": "در حال ورود…",
@@ -916,29 +927,34 @@
     "group_review": "بررسی",
     "payoff_title": "این نشان را خانواده‌ها می‌بینند",
     "payoff_subtitle": "با تکمیل هر گروه در پایین، این نشان کامل‌تر می‌شود.",
-    "identity_title": "تأیید هویت",
     "identity_subtitle": "کد ملی، تصویر کارت ملی و یک سلفی زنده.",
+    "identity_step_number_title": "شمارهٔ ملی شما",
     "national_id_label": "کد ملی",
     "national_id_hint": "کد ملی ۱۰ رقمی خود را وارد کنید.",
     "national_id_invalid": "کد ملی معتبر وارد کنید.",
     "card_label": "تصویر کارت ملی",
     "card_hint": "کارت ملی را در نور کافی و خوانا عکس بگیرید.",
-    "card_recommended": "بارگذاری تصویر کارت ملی توصیه می‌شود.",
+    "card_recommended_short": "توصیه‌شده",
     "capture_hint_card": "نور کافی، بدون تاری، چهار گوشهٔ کارت داخل کادر.",
     "selfie_label": "سلفی زنده",
     "selfie_hint": "برای تشخیص چهره، سلفی بگیرید.",
     "capture_hint_selfie": "نور کافی، چهره در مرکز و بدون پوشش.",
+    "capture_done": "ثبت شد",
+    "required_badge": "الزامی",
     "auto_registry_note": "استعلام خودکار از ثبت احوال انجام می‌شود.",
     "error_national_id_mismatch": "کد ملی با ثبت احوال مطابقت نداشت. لطفاً بررسی و دوباره تلاش کنید.",
     "error_shared_sim": "به نظر می‌رسد این سیم‌کارت به نام شما نیست. لطفاً با سیم‌کارتی که به نام خودتان است دوباره تلاش کنید.",
     "error_shahkar_mismatch": "تطبیق شماره موبایل و کد ملی ناموفق بود. لطفاً بررسی و دوباره تلاش کنید.",
     "identity_submit": "ثبت و استعلام",
     "identity_submitting": "در حال استعلام…",
+    "identity_needs_selfie": "برای ادامه، سلفی زنده را ثبت کنید.",
     "identity_submitted": "هویت ثبت شد — استعلام آغاز شد",
     "back_to_checklist": "بازگشت به فهرست",
-    "credentials_title": "مدارک حرفه‌ای",
     "credentials_subtitle": "مدارک شما پس از بارگذاری، توسط کارشناس بررسی می‌شود.",
     "credentials_needs_start": "ابتدا تأیید صلاحیت را از فهرست وضعیت آغاز کنید.",
+    "credentials_documents_title": "مدارک حرفه‌ای",
+    "credentials_documents_description": "هر مدرک را بارگذاری کنید؛ کارشناس آن را بررسی می‌کند.",
+    "credentials_documents_count": "{done} از {total}",
     "ino_number_label": "شماره نظام پرستاری",
     "ino_number_hint": "شماره عضویت نظام پرستاری خود را وارد کنید.",
     "ino_number_required": "شماره نظام پرستاری را وارد کنید.",
@@ -957,10 +973,12 @@
     "specialty_wound_care": "زخم و پانسمان",
     "specialty_add_placeholder": "تخصص دیگر",
     "specialty_add": "افزودن",
-    "registry_details_label": "جزئیات مدرک (اختیاری)",
     "issuing_authority_label": "مرجع صادرکننده",
     "issued_at_label": "تاریخ صدور",
     "expires_at_label": "تاریخ انقضا",
+    "registry_details_title": "جزئیات مدرک",
+    "registry_details_description": "مرجع صادرکننده و تاریخ‌ها بررسی را سریع‌تر می‌کنند.",
+    "summary_none": "موردی ثبت نشده",
     "manual_review_note": "این مدارک به‌صورت دستی توسط کارشناس بررسی می‌شوند؛ تأیید فوری نیست.",
     "credentials_submit": "ثبت مدارک",
     "credentials_submitting": "در حال ثبت…",
@@ -1423,6 +1441,7 @@
     "category_label": "دسته",
     "subject_label": "موضوع",
     "message_label": "پیام",
+    "message_required": "متن پیام را بنویسید.",
     "submit": "ارسال",
     "submitting": "در حال ارسال…",
     "cancel": "انصراف",
@@ -1951,24 +1970,69 @@
     "draft_banner": "این متن پیش‌نویس است و هنوز توسط تیم حقوقی بازبینی نشده؛ پیش از انتشار نهایی قابل استناد نیست.",
     "terms_intro": "این شرایط پیش‌نویس، نحوه ارتباط بالین‌یار بین خانواده‌ها و پرستاران مستقل و تأییدشده مراقبت در منزل را توضیح می‌دهد. با ساخت حساب کاربری، شرایط زیر را می‌پذیرید.",
     "terms_sections": [
-      { "title": "ماهیت خدمت", "body": "بالین‌یار یک بازارگاه است و پرستاران را استخدام نمی‌کند. پرستاران مستقل یا شاغل در مراکز پرستاری، خدمات خود را ثبت می‌کنند و خانواده‌ها از طریق پلتفرم جستجو، رزرو و پرداخت انجام می‌دهند." },
-      { "title": "رزرو و پرداخت", "body": "مبلغ کامل رزرو را از طریق بالین‌یار و با کارت پرداخت می‌کنید. این مبلغ به‌صورت امانی نزد بالین‌یار نگه‌داری می‌شود و تنها پس از تأیید انجام خدمت و پایان مهلت اعتراض، به‌صورت هفتگی به پرستار پرداخت می‌شود." },
-      { "title": "لغو و بازگشت وجه", "body": "لغو یک رزرو تأییدشده، بسته به فاصله زمانی تا زمان مراجعه، ممکن است مشمول کارمزد شود که پیش از تأیید نهایی به شما نمایش داده می‌شود. مبالغ بازگشتی تأییدشده به همان روش پرداخت اصلی یا ارائه‌دهنده مربوطه بازمی‌گردد." },
-      { "title": "احراز هویت پرستاران", "body": "هر پرستار پیش از قابل‌رزرو شدن، مراحل احراز هویت، بررسی پروانه صلاحیت حرفه‌ای و سایر مراحل الزامی را می‌گذراند. آنچه تأیید شده در پروفایل او نمایش داده می‌شود." },
-      { "title": "مسئولیت‌های شما", "body": "اطلاعات دقیق درباره فرد دریافت‌کننده مراقبت ارائه دهید، برای هر موضوع مرتبط با رزرو از طریق سامانه تیکت پشتیبانی اپلیکیشن ارتباط بگیرید و با پرستاران محترمانه رفتار کنید." },
-      { "title": "مسئولیت‌پذیری", "body": "بالین‌یار واسط رزرو بین خانواده‌ها و پرستاران مستقل است و خود ارائه‌دهنده خدمات درمانی نیست. اختلافات از طریق سامانه تیکت پشتیبانی رسیدگی می‌شود." },
-      { "title": "تغییر این شرایط", "body": "ممکن است این شرایط با تحول خدمت به‌روزرسانی شود. تغییرات مهم پیش از اعمال، در اپلیکیشن اطلاع‌رسانی می‌شود." },
-      { "title": "تماس با ما", "body": "سوالات درباره این شرایط را می‌توانید از طریق سامانه تیکت پشتیبانی در اپلیکیشن ارسال کنید." }
+      {
+        "title": "ماهیت خدمت",
+        "body": "بالین‌یار یک بازارگاه است و پرستاران را استخدام نمی‌کند. پرستاران مستقل یا شاغل در مراکز پرستاری، خدمات خود را ثبت می‌کنند و خانواده‌ها از طریق پلتفرم جستجو، رزرو و پرداخت انجام می‌دهند."
+      },
+      {
+        "title": "رزرو و پرداخت",
+        "body": "مبلغ کامل رزرو را از طریق بالین‌یار و با کارت پرداخت می‌کنید. این مبلغ به‌صورت امانی نزد بالین‌یار نگه‌داری می‌شود و تنها پس از تأیید انجام خدمت و پایان مهلت اعتراض، به‌صورت هفتگی به پرستار پرداخت می‌شود."
+      },
+      {
+        "title": "لغو و بازگشت وجه",
+        "body": "لغو یک رزرو تأییدشده، بسته به فاصله زمانی تا زمان مراجعه، ممکن است مشمول کارمزد شود که پیش از تأیید نهایی به شما نمایش داده می‌شود. مبالغ بازگشتی تأییدشده به همان روش پرداخت اصلی یا ارائه‌دهنده مربوطه بازمی‌گردد."
+      },
+      {
+        "title": "احراز هویت پرستاران",
+        "body": "هر پرستار پیش از قابل‌رزرو شدن، مراحل احراز هویت، بررسی پروانه صلاحیت حرفه‌ای و سایر مراحل الزامی را می‌گذراند. آنچه تأیید شده در پروفایل او نمایش داده می‌شود."
+      },
+      {
+        "title": "مسئولیت‌های شما",
+        "body": "اطلاعات دقیق درباره فرد دریافت‌کننده مراقبت ارائه دهید، برای هر موضوع مرتبط با رزرو از طریق سامانه تیکت پشتیبانی اپلیکیشن ارتباط بگیرید و با پرستاران محترمانه رفتار کنید."
+      },
+      {
+        "title": "مسئولیت‌پذیری",
+        "body": "بالین‌یار واسط رزرو بین خانواده‌ها و پرستاران مستقل است و خود ارائه‌دهنده خدمات درمانی نیست. اختلافات از طریق سامانه تیکت پشتیبانی رسیدگی می‌شود."
+      },
+      {
+        "title": "تغییر این شرایط",
+        "body": "ممکن است این شرایط با تحول خدمت به‌روزرسانی شود. تغییرات مهم پیش از اعمال، در اپلیکیشن اطلاع‌رسانی می‌شود."
+      },
+      {
+        "title": "تماس با ما",
+        "body": "سوالات درباره این شرایط را می‌توانید از طریق سامانه تیکت پشتیبانی در اپلیکیشن ارسال کنید."
+      }
     ],
     "privacy_intro": "این پیش‌نویس سیاست حریم خصوصی، اطلاعات شخصی که بالین‌یار برای ارائه خدمت جمع‌آوری می‌کند و نحوه استفاده از آن را توضیح می‌دهد.",
     "privacy_sections": [
-      { "title": "اطلاعاتی که جمع‌آوری می‌کنیم", "body": "شماره موبایل برای ورود؛ برای پرستاران، کد ملی و اطلاعات پروانه برای احراز هویت؛ اطلاعات مراقبتی بیمار که شما یا پرستار وارد می‌کنید؛ موقعیت تقریبی محل مراجعه برای ورود/خروج پرستار؛ و اطلاعات فراداده پرداخت از ارائه‌دهنده درگاه پرداخت." },
-      { "title": "نحوه استفاده", "body": "برای ایجاد و مدیریت رزروها، احراز هویت و اعتبارسنجی پرستاران، پردازش پرداخت‌ها و تسویه هفتگی پرستاران، و ارائه پشتیبانی." },
-      { "title": "اشتراک‌گذاری اطلاعات", "body": "ارائه‌دهندگان مجاز پرداخت، سرویس‌های احراز هویت، و مرکز مشاوره و ارائه مراقبت‌های پرستاری در منزل طرف قرارداد ما، تنها به میزان لازم برای انجام وظیفه خود به اطلاعات دسترسی دارند." },
-      { "title": "امنیت اطلاعات", "body": "فیلدهای حساس مانند کد ملی و یادداشت‌های بالینی رمزنگاری می‌شوند. دسترسی به پرونده مراقبتی بیمار تنها برای خانواده و پرستار مسئول امکان‌پذیر است." },
-      { "title": "حقوق شما", "body": "می‌توانید بیشتر اطلاعات خود را از پروفایل خود مشاهده و ویرایش کنید و برای پرسش، اصلاح یا درخواست حذف اطلاعات با پشتیبانی در تماس باشید." },
-      { "title": "تغییر این سیاست", "body": "ممکن است این سیاست با تحول خدمت به‌روزرسانی شود. تغییرات مهم پیش از اعمال، در اپلیکیشن اطلاع‌رسانی می‌شود." },
-      { "title": "تماس با ما", "body": "سوالات درباره این سیاست را می‌توانید از طریق سامانه تیکت پشتیبانی در اپلیکیشن ارسال کنید." }
+      {
+        "title": "اطلاعاتی که جمع‌آوری می‌کنیم",
+        "body": "شماره موبایل برای ورود؛ برای پرستاران، کد ملی و اطلاعات پروانه برای احراز هویت؛ اطلاعات مراقبتی بیمار که شما یا پرستار وارد می‌کنید؛ موقعیت تقریبی محل مراجعه برای ورود/خروج پرستار؛ و اطلاعات فراداده پرداخت از ارائه‌دهنده درگاه پرداخت."
+      },
+      {
+        "title": "نحوه استفاده",
+        "body": "برای ایجاد و مدیریت رزروها، احراز هویت و اعتبارسنجی پرستاران، پردازش پرداخت‌ها و تسویه هفتگی پرستاران، و ارائه پشتیبانی."
+      },
+      {
+        "title": "اشتراک‌گذاری اطلاعات",
+        "body": "ارائه‌دهندگان مجاز پرداخت، سرویس‌های احراز هویت، و مرکز مشاوره و ارائه مراقبت‌های پرستاری در منزل طرف قرارداد ما، تنها به میزان لازم برای انجام وظیفه خود به اطلاعات دسترسی دارند."
+      },
+      {
+        "title": "امنیت اطلاعات",
+        "body": "فیلدهای حساس مانند کد ملی و یادداشت‌های بالینی رمزنگاری می‌شوند. دسترسی به پرونده مراقبتی بیمار تنها برای خانواده و پرستار مسئول امکان‌پذیر است."
+      },
+      {
+        "title": "حقوق شما",
+        "body": "می‌توانید بیشتر اطلاعات خود را از پروفایل خود مشاهده و ویرایش کنید و برای پرسش، اصلاح یا درخواست حذف اطلاعات با پشتیبانی در تماس باشید."
+      },
+      {
+        "title": "تغییر این سیاست",
+        "body": "ممکن است این سیاست با تحول خدمت به‌روزرسانی شود. تغییرات مهم پیش از اعمال، در اپلیکیشن اطلاع‌رسانی می‌شود."
+      },
+      {
+        "title": "تماس با ما",
+        "body": "سوالات درباره این سیاست را می‌توانید از طریق سامانه تیکت پشتیبانی در اپلیکیشن ارسال کنید."
+      }
     ]
   },
   "welcome": {
@@ -2005,5 +2069,41 @@
     "footer_contact_title": "پشتیبانی",
     "footer_contact_body": "برای هر سوالی، پس از ورود از طریق سامانه تیکت پشتیبانی اپلیکیشن با ما در تماس باشید.",
     "footer_copyright": "© {year, number} بالین‌یار"
+  },
+  "hub": {
+    "practice_subtitle": "نمایه، خدمات و مدارک شما در یک‌جا",
+    "practice_profile_sub": "نام، عکس، تخصص‌ها و تحصیلات",
+    "practice_services_sub": "خدمات و قیمت‌هایی که ارائه می‌دهید",
+    "practice_coverage_sub": "شهرها و مناطقی که به آن‌ها سر می‌زنید",
+    "practice_verification_sub": "هویت، مدارک حرفه‌ای و نشان اعتماد",
+    "practice_status_title": "وضعیت نمایش شما",
+    "practice_accepting_on": "پذیرش رزرو فعال است",
+    "practice_accepting_off": "پذیرش رزرو متوقف است",
+    "practice_accepting_manage": "مدیریت",
+    "finance_subtitle": "درآمد، تسویه‌ها و حساب بانکی",
+    "finance_earnings_sub": "ویزیت‌های تکمیل‌شده و سهم شما",
+    "finance_payouts_sub": "تاریخچهٔ واریزهای هفتگی",
+    "finance_bank_sub": "شبای مقصد واریز",
+    "finance_balance_error": "موجودی شما بارگذاری نشد.",
+    "more_title": "پشتیبانی و تنظیمات",
+    "more_support_sub": "گفتگو با تیم بالین‌یار",
+    "more_notifications_sub": "رویدادهای تازهٔ حساب شما",
+    "admin_group_empty_title": "دسترسی ندارید",
+    "admin_group_empty_body": "نقش فعلی شما به کنسول‌های این بخش دسترسی ندارد.",
+    "admin_trust_subtitle": "تأیید صلاحیت پرستاران و بازبینی نظرها",
+    "admin_finance_subtitle": "تسویهٔ هفتگی پرستاران",
+    "admin_support_subtitle": "تیکت‌های کاربران و هشدارهای داخلی",
+    "admin_system_subtitle": "پیکربندی سامانه و حساب شما",
+    "admin_verification_sub": "صف پرونده‌های در انتظار بررسی",
+    "admin_reviews_sub": "انتشار، پنهان‌سازی یا رد نظرها",
+    "admin_payouts_sub": "ساخت و اجرای دستهٔ تسویه",
+    "admin_tickets_sub": "صف سراسری تیکت‌ها",
+    "admin_alerts_sub": "کارتابل داخلی هشدارها",
+    "admin_config_sub": "کلیدهای پیکربندی و تاریخچهٔ تغییرها",
+    "admin_holidays_sub": "تقویم تعطیلات بانکی",
+    "admin_audit_sub": "گزارش تغییرها، فقط‌خواندنی",
+    "admin_partners_sub": "مراکز همکار و پرستاران تحت پوشش",
+    "admin_users_sub": "جستجوی کاربران بر پایهٔ نام یا شماره",
+    "admin_roles_sub": "اعطا و لغو نقش‌ها"
   }
 }

client/package-lock.json

@@ -12,7 +12,6 @@
         "@emotion/react": "^11.14.0",
         "@emotion/server": "^11.11.0",
         "@emotion/styled": "^11.14.1",
-        "@mui/icons-material": "^9.1.1",
         "@mui/material": "^9.1.1",
         "@mui/material-nextjs": "^9.1.1",
         "@tanstack/react-query": "^5.101.0",
@@ -23,11 +22,13 @@
         "jalaali-js": "^2.0.0",
         "js-cookie": "^3.0.8",
         "leaflet": "^1.9.4",
+        "lucide-react": "^1.27.0",
         "next": "^16.2.9",
         "next-intl": "^4.13.0",
         "notistack": "^3.0.2",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
+        "react-hook-form": "^7.83.0",
         "stylis-plugin-rtl": "^2.1.1"
       },
       "devDependencies": {
@@ -559,9 +560,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
-      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+      "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1997,38 +1998,11 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/icons-material": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.1.1.tgz",
-      "integrity": "sha512-OXhm9DajemStb58AumM06DuPhHTa3XD36TFD4yf6WtJyNRO5DfEZbbnHlBg/US2Y2oOXwM/XurMTBOD6L/YYZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^9.1.1",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/material": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.1.1.tgz",
       "integrity": "sha512-Wv+gInjrpf99l1Q0oHe0eOWGTnlbkzs5nowClX65KCT/2fyPMwcbFEEkUsOHdpcHhB5UAbz/d7jlwt5ajWVvlA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.29.2",
         "@mui/core-downloads-tracker": "^9.1.1",
@@ -9228,6 +9202,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.27.0.tgz",
+      "integrity": "sha512-rJicGl/3Fly/E0rOH1YmPZ6e49JCnKknh1ox1vpHnkfjujAkKA6sqUZvH3MTAaXXjgexyUwgNwTJzTtYuAFYJw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -10290,6 +10273,22 @@
         "react": "^19.2.7"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.83.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.83.0.tgz",
+      "integrity": "sha512-AXt8cMCmx5a7u4uvpb2uRFVrWQhllI4pV+LSykxIac/hjt44TnQkmX9BKuQi2i+LDC62esmiLpilkav+kjVf/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",

client/package.json

@@ -21,7 +21,6 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.1.1",
     "@mui/material": "^9.1.1",
     "@mui/material-nextjs": "^9.1.1",
     "@tanstack/react-query": "^5.101.0",
@@ -32,11 +31,13 @@
     "jalaali-js": "^2.0.0",
     "js-cookie": "^3.0.8",
     "leaflet": "^1.9.4",
+    "lucide-react": "^1.27.0",
     "next": "^16.2.9",
     "next-intl": "^4.13.0",
     "notistack": "^3.0.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-hook-form": "^7.83.0",
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {

client/src/app/[locale]/(private-routes)/(customer)/HomeScreen.tsx

@@ -35,7 +35,7 @@ interface NudgeCardProps {
 const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLabel, to, onDismiss, dismissLabel }) => (
   <Paper
     elevation={0}
-    sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2, display: 'flex', gap: 2, position: 'relative' }}
+    sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', display: 'flex', gap: 2, position: 'relative' }}
   >
     <AppIcon icon={icon} size={28} color="var(--bal-primary)" />
     <Stack sx={{ gap: 1, flexGrow: 1, minWidth: 0 }}>
@@ -243,7 +243,7 @@ const CategoryGrid: FunctionComponent<{ onSelect: (categoryId: number) => void }
       {isLoading ? (
         <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)' }, gap: 1.5 }}>
           {[0, 1, 2, 3].map((key) => (
-            <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 2 }} />
+            <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
           ))}
         </Box>
       ) : isError ? (

client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/cancel/page.tsx

@@ -2,11 +2,13 @@
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
-import { Checkbox, FormControlLabel, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { Checkbox, FormControlLabel, MenuItem, Paper, Stack, Typography } from '@mui/material';
 import AppButton from '@/components/common/AppButton';
 import AppAlert from '@/components/common/AppAlert';
 import AppLoading from '@/components/common/AppLoading';
 import Money from '@/components/common/Money';
+import { RhfControlGroup, RhfTextField } from '@/components/common/form';
 import StepperHeader from '@/components/StepperHeader';
 import CancellationPolicyDisclosure from '@/components/CancellationPolicyDisclosure';
 import { ContactSupportDialog } from '@/components/messaging';
@@ -34,6 +36,12 @@ function cancelErrorKey(error: unknown): string {
   return 'err_generic';
 }
 
+interface CancelFormValues {
+  reasonCategory: CancelReasonCategory | '';
+  reasonNotes: string;
+  acknowledged: boolean;
+}
+
 /**
  * Cancellation flow (f10) — the trust-first exit. Step 1 **discloses** the resolved policy tier, the
  * refund % + fee %, and the concrete Toman amounts (refunded vs kept) **before** anything is submitted;
@@ -56,11 +64,16 @@ export default function CancelBookingPage() {
   const cancel = useCancelBooking();
 
   const [step, setStep] = useState<0 | 1>(0);
-  const [acknowledged, setAcknowledged] = useState(false);
-  // Never pre-defaulted (keeps the reason analytics honest) — confirm stays disabled until chosen.
-  const [reasonCategory, setReasonCategory] = useState<CancelReasonCategory | ''>('');
-  const [reasonNotes, setReasonNotes] = useState('');
   const [supportDialogCategory, setSupportDialogCategory] = useState<TicketCategory | null>(null);
+  // `reasonCategory` is never pre-defaulted (that would make the reason analytics lie) — the continue
+  // CTA stays disabled until it and the acknowledgement are both set.
+  const form = useForm<CancelFormValues>({
+    mode: 'onTouched',
+    defaultValues: { reasonCategory: '', reasonNotes: '', acknowledged: false },
+  });
+  const { control, getValues } = form;
+  const reasonCategory = useWatch({ control, name: 'reasonCategory' });
+  const acknowledged = useWatch({ control, name: 'acknowledged' });
 
   const bookingHref = `/${locale}${ROUTES.BOOKINGS}/${bookingId}`;
 
@@ -108,19 +121,22 @@ export default function CancelBookingPage() {
     );
   }
 
-  const submit = () =>
+  const submit = () => {
+    const values = getValues();
     cancel.mutate(
       {
         bookingId,
         sessionIds: preview.refundableSessionIds,
         // Guaranteed non-empty: step 1 is only reachable once a reason is chosen (the continue CTA gate).
-        reasonCategory: reasonCategory as CancelReasonCategory,
-        reasonNotes: reasonNotes.trim() || undefined,
+        reasonCategory: values.reasonCategory as CancelReasonCategory,
+        reasonNotes: values.reasonNotes.trim() || undefined,
       },
       { onSuccess: () => router.push(`/${locale}${bookingRefundStatusPath(bookingId)}`) },
     );
+  };
 
   return (
+    <FormProvider {...form}>
     <Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%', py: 2 }}>
       <Typography variant="h5" component="h1" sx={{ fontWeight: 800 }}>
         {t('cancel_title')}
@@ -132,7 +148,7 @@ export default function CancelBookingPage() {
           {/* Off-ramps before the kill switch — exits, not obstacles; the destructive path stays fully
               available below. Real rescheduling is DEFERRED (product decision + backend); this opens a
               coordination ticket instead. */}
-          <Stack sx={{ gap: 1, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Stack sx={{ gap: 1, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t('offramp_note')}
             </Typography>
@@ -158,13 +174,7 @@ export default function CancelBookingPage() {
 
           <CancellationPolicyDisclosure preview={preview} />
 
-          <TextField
-            select
-            label={t('reason_field_label')}
-            value={reasonCategory}
-            onChange={(event) => setReasonCategory(event.target.value as CancelReasonCategory)}
-            fullWidth
-          >
+          <RhfTextField<CancelFormValues> name="reasonCategory" select label={t('reason_field_label')} fullWidth>
             <MenuItem value="" disabled>
               {t('reason_placeholder')}
             </MenuItem>
@@ -173,19 +183,24 @@ export default function CancelBookingPage() {
                 {t(`reason_cat_${category}`)}
               </MenuItem>
             ))}
-          </TextField>
-          <TextField
+          </RhfTextField>
+          <RhfTextField<CancelFormValues>
+            name="reasonNotes"
             label={t('reason_notes_label')}
-            value={reasonNotes}
-            onChange={(event) => setReasonNotes(event.target.value)}
             multiline
             minRows={2}
             fullWidth
           />
-          <FormControlLabel
-            control={<Checkbox checked={acknowledged} onChange={(event) => setAcknowledged(event.target.checked)} />}
-            label={t('acknowledge_label')}
-          />
+          <RhfControlGroup<CancelFormValues> name="acknowledged">
+            {({ field }) => (
+              <FormControlLabel
+                control={
+                  <Checkbox checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />
+                }
+                label={t('acknowledge_label')}
+              />
+            )}
+          </RhfControlGroup>
 
           <Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between', flexWrap: 'wrap' }}>
             <AppButton variant="text" color="inherit" onClick={() => router.push(bookingHref)}>
@@ -211,7 +226,7 @@ export default function CancelBookingPage() {
         </>
       ) : (
         <>
-          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1 }}>
               {t('confirm_title')}
             </Typography>
@@ -252,5 +267,6 @@ export default function CancelBookingPage() {
         </>
       )}
     </Stack>
+    </FormProvider>
   );
 }

client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/invoice/page.tsx

@@ -59,7 +59,7 @@ export default function BookingInvoicePage() {
   // A malformed id can never load — navigation, not a retry (a manual refetch() bypasses `enabled`).
   if (!validId) {
     return (
-      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
           <AppIcon icon="error" size={44} color="var(--bal-error)" />
           <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
@@ -89,7 +89,7 @@ export default function BookingInvoicePage() {
   if (!invoice) {
     const notIssued = error instanceof ApiError && error.status === 404;
     return (
-      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
           <AppIcon icon={notIssued ? 'document' : 'error'} size={44} color={notIssued ? 'var(--bal-warning)' : 'var(--bal-error)'} />
           <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
@@ -166,7 +166,7 @@ export default function BookingInvoicePage() {
       <Paper
         elevation={0}
         className={PRINT_AREA_CLASS}
-        sx={{ p: 3, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+        sx={{ p: 3, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
       >
         <Stack sx={{ gap: 2 }}>
           <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>

client/src/app/[locale]/(private-routes)/(customer)/bookings/[id]/review/page.tsx

@@ -1,10 +1,20 @@
 'use client';
-import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Avatar, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, EmptyState, RatingInput, ReviewTagSelector, StatusChip, SurfaceCard } from '@/components';
+import { Avatar, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  AppButton,
+  AppIcon,
+  EmptyState,
+  RatingInput,
+  ReviewTagSelector,
+  RhfControlGroup,
+  RhfTextField,
+  StatusChip,
+  SurfaceCard,
+} from '@/components';
 import type { StatusKind } from '@/components';
 import { formatShamsiDate } from '@/utils';
 import { useBookingDetail } from '@/services/bookings';
@@ -24,6 +34,12 @@ function variantName(snapshotJson: string): string | null {
 
 const REVIEW_BODY_MAX = 2000;
 
+interface ReviewFormValues {
+  rating: number;
+  body: string;
+  tagCodes: string[];
+}
+
 /** moderationStatus → StatusChip kind (published=success, pending=warning, rejected=error, hidden=neutral). */
 const STATUS_KIND: Record<ModerationStatus, StatusKind> = {
   pending_moderation: 'pending',
@@ -57,19 +73,19 @@ export default function LeaveReviewPage() {
   const myReview = useMyReviewForBooking(bookingId, { enabled: reviewable });
   const createReview = useCreateReview();
 
-  const [rating, setRating] = useState(0);
-  const [body, setBody] = useState('');
-  const [tagCodes, setTagCodes] = useState<string[]>([]);
+  const form = useForm<ReviewFormValues>({ mode: 'onTouched', defaultValues: { rating: 0, body: '', tagCodes: [] } });
+  const { control, handleSubmit } = form;
+  const rating = useWatch({ control, name: 'rating' });
+  const body = useWatch({ control, name: 'body' });
+  const tagCodes = useWatch({ control, name: 'tagCodes' });
 
   const nurseName = booking?.nurseName?.trim();
 
-  const submit = () => {
-    if (rating < 1) return;
+  const submit = (values: ReviewFormValues) =>
     createReview.mutate(
-      { bookingId, body: { rating, body: body.trim() || null, tagCodes } },
+      { bookingId, body: { rating: values.rating, body: values.body.trim() || null, tagCodes: values.tagCodes } },
       { onError: () => enqueueSnackbar(t('error_submit'), { variant: 'error' }) },
     );
-  };
 
   // ── Already reviewed → the persistent under-review / published state (never a second form) ───────────────
   const existing = myReview.data;
@@ -84,7 +100,7 @@ export default function LeaveReviewPage() {
       <Stack sx={{ gap: 3, maxWidth: 560, mx: 'auto', width: '100%' }}>
         <PageHeading title={t('my_review_title')} subtitle={nurseName ? t('for_nurse', { name: nurseName }) : undefined} />
         {booking ? <ReviewContextRecap booking={booking} locale={locale} /> : null}
-        <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+        <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
           <Stack sx={{ gap: 1.5 }}>
             <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
               <StatusChip status={STATUS_KIND[status]} label={t(`status_${status}`)} />
@@ -144,56 +160,59 @@ export default function LeaveReviewPage() {
 
   // ── Eligible → the review form ───────────────────────────────────────────────────────────────────────────
   return (
-    <Stack sx={{ gap: 3, maxWidth: 560, mx: 'auto', width: '100%' }}>
+    <FormProvider {...form}>
+    <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 3, maxWidth: 560, mx: 'auto', width: '100%' }}>
       <PageHeading title={t('title')} subtitle={nurseName ? t('for_nurse', { name: nurseName }) : t('subtitle')} />
       {booking ? <ReviewContextRecap booking={booking} locale={locale} /> : null}
 
       {/* Moderation expectation, up front — not only after submit. */}
-      <Stack direction="row" sx={{ gap: 1, alignItems: 'center', p: 1.5, borderRadius: 2, bgcolor: 'var(--bal-info-soft)' }}>
+      <Stack direction="row" sx={{ gap: 1, alignItems: 'center', p: 1.5, borderRadius: 'var(--bal-radius-md)', bgcolor: 'var(--bal-info-soft)' }}>
         <AppIcon icon="info" size={18} color="var(--bal-info)" />
         <Typography variant="body2" sx={{ color: 'var(--bal-info)' }}>
           {t('moderation_note')}
         </Typography>
       </Stack>
 
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('rating_label')}
-        </Typography>
-        <RatingInput value={rating} onChange={setRating} ariaLabel={t('rating_label')} />
-      </Stack>
+      <RhfControlGroup<ReviewFormValues>
+        name="rating"
+        label={t('rating_label')}
+        rules={{ validate: (value) => Number(value ?? 0) >= 1 }}
+      >
+        {({ field }) => (
+          <RatingInput value={Number(field.value) || 0} onChange={field.onChange} ariaLabel={t('rating_label')} />
+        )}
+      </RhfControlGroup>
 
-      <TextField
+      <RhfTextField<ReviewFormValues>
+        name="body"
         label={t('body_label')}
         placeholder={t('body_placeholder')}
-        value={body}
-        onChange={(e) => setBody(e.target.value.slice(0, REVIEW_BODY_MAX))}
+        transform={(raw) => raw.slice(0, REVIEW_BODY_MAX)}
         multiline
         minRows={3}
         fullWidth
       />
 
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('tags_label')}
-        </Typography>
-        <ReviewTagSelector
-          codes={REVIEW_TAG_CODES}
-          selected={tagCodes}
-          onChange={setTagCodes}
-          labelFor={(code) => (t.has(`tag_${code}`) ? t(`tag_${code}`) : code)}
-          disabled={createReview.isPending}
-        />
-      </Stack>
+      <RhfControlGroup<ReviewFormValues> name="tagCodes" label={t('tags_label')}>
+        {({ field }) => (
+          <ReviewTagSelector
+            codes={REVIEW_TAG_CODES}
+            selected={(field.value as string[]) ?? []}
+            onChange={field.onChange}
+            labelFor={(code) => (t.has(`tag_${code}`) ? t(`tag_${code}`) : code)}
+            disabled={createReview.isPending}
+          />
+        )}
+      </RhfControlGroup>
 
       <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
         <AppButton variant="text" color="primary" onClick={() => router.back()} disabled={createReview.isPending}>
           {tc('cancel')}
         </AppButton>
         <AppButton
+          type="submit"
           variant="contained"
           color="primary"
-          onClick={submit}
           disabled={rating < 1 || createReview.isPending}
           startIcon="star"
         >
@@ -201,6 +220,7 @@ export default function LeaveReviewPage() {
         </AppButton>
       </Stack>
     </Stack>
+    </FormProvider>
   );
 }
 

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/EligibilityStep.tsx

@@ -1,13 +1,19 @@
 'use client';
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent } from 'react';
 import { useTranslations } from 'next-intl';
-import { Checkbox, CircularProgress, FormControlLabel, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, Money, PhoneNumberField } from '@/components';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { Checkbox, CircularProgress, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
+import { AppButton, AppIcon, Money, PhoneNumberField, RhfControlGroup, RhfTextField } from '@/components';
 import { digitsOnly } from '@/utils';
 import { useCheckEligibility } from '@/services/bnpl';
 import { NATIONAL_ID_LENGTH, NATIONAL_ID_PATTERN } from '@/services/bnpl/constants';
 import type { BnplEligibilityResult, ProviderCode } from '@/services/bnpl/types';
 
+interface EligibilityFormValues {
+  nationalId: string;
+  consent: boolean;
+}
+
 interface EligibilityStepProps {
   bookingRequestId: number;
   providerCode: ProviderCode;
@@ -36,22 +42,23 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
   const t = useTranslations('bnpl');
   const tc = useTranslations('common');
 
-  const [nationalId, setNationalId] = useState('');
-  const [consent, setConsent] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
+  const form = useForm<EligibilityFormValues>({ mode: 'onTouched', defaultValues: { nationalId: '', consent: false } });
+  const { control, handleSubmit } = form;
+  const consent = useWatch({ control, name: 'consent' });
   const check = useCheckEligibility();
   // A fresh check wins; otherwise re-show a prior approval carried back from D4.
   const result = check.data ?? initialResult ?? undefined;
 
-  const nationalIdValid = NATIONAL_ID_PATTERN.test(nationalId);
-  const nationalIdError = submitted && !nationalIdValid;
   const providerName = t(`provider_${providerCode}`);
 
-  const handleSubmit = () => {
-    setSubmitted(true);
-    if (!nationalIdValid || !consent) return;
-    check.mutate({ bookingRequestId, providerCode, nationalId, mobile: sessionMobile, consent });
-  };
+  const submit = (values: EligibilityFormValues) =>
+    check.mutate({
+      bookingRequestId,
+      providerCode,
+      nationalId: values.nationalId,
+      mobile: sessionMobile,
+      consent: values.consent,
+    });
 
   // Approved — show the ceiling + advance.
   if (result?.isEligible) {
@@ -61,7 +68,7 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
           elevation={0}
           sx={{
             p: 2.5,
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             border: '1px solid',
             borderColor: 'var(--bal-success)',
             backgroundColor: 'var(--bal-primary-soft)',
@@ -111,63 +118,74 @@ const EligibilityStep: FunctionComponent<EligibilityStepProps> = ({
         body={t('eligibility_error')}
         cardLabel={t('pay_with_card')}
         onPayWithCard={onPayWithCard}
-        onRetry={handleSubmit}
+        onRetry={handleSubmit(submit)}
         retryLabel={tc('retry')}
       />
     );
   }
 
   return (
-    <Stack sx={{ gap: 2 }}>
-      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-        {t('eligibility_title')}
-      </Typography>
+    <FormProvider {...form}>
+      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+          {t('eligibility_title')}
+        </Typography>
 
-      <TextField
-        label={t('national_id_label')}
-        placeholder={t('national_id_placeholder')}
-        value={nationalId}
-        onChange={(e) => setNationalId(digitsOnly(e.target.value).slice(0, NATIONAL_ID_LENGTH))}
-        error={nationalIdError}
-        helperText={nationalIdError ? t('national_id_invalid') : undefined}
-        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', maxLength: NATIONAL_ID_LENGTH, style: { textAlign: 'start' } } }}
-        fullWidth
-      />
+        <RhfTextField<EligibilityFormValues>
+          name="nationalId"
+          label={t('national_id_label')}
+          placeholder={t('national_id_placeholder')}
+          transform={(raw) => digitsOnly(raw).slice(0, NATIONAL_ID_LENGTH)}
+          rules={{ validate: (value) => NATIONAL_ID_PATTERN.test(String(value ?? '')) || t('national_id_invalid') }}
+          slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', maxLength: NATIONAL_ID_LENGTH, style: { textAlign: 'start' } } }}
+          fullWidth
+        />
 
-      <PhoneNumberField
-        label={t('mobile_label')}
-        value={sessionMobile}
-        onChange={() => undefined}
-        slotProps={{ input: { readOnly: true } }}
-        fullWidth
-      />
+        <PhoneNumberField
+          label={t('mobile_label')}
+          value={sessionMobile}
+          onChange={() => undefined}
+          slotProps={{ input: { readOnly: true } }}
+          fullWidth
+        />
 
-      <FormControlLabel
-        control={<Checkbox checked={consent} onChange={(e) => setConsent(e.target.checked)} color="secondary" />}
-        label={
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('consent_label', { provider: providerName })}
-          </Typography>
-        }
-        sx={{ alignItems: 'flex-start', m: 0 }}
-      />
+        <RhfControlGroup<EligibilityFormValues> name="consent">
+          {({ field }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={Boolean(field.value)}
+                  onChange={(event) => field.onChange(event.target.checked)}
+                  color="secondary"
+                />
+              }
+              label={
+                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                  {t('consent_label', { provider: providerName })}
+                </Typography>
+              }
+              sx={{ alignItems: 'flex-start', m: 0 }}
+            />
+          )}
+        </RhfControlGroup>
 
-      <Stack sx={{ gap: 1 }}>
-        <AppButton
-          color="secondary"
-          variant="contained"
-          size="large"
-          disabled={!consent || check.isPending}
-          onClick={handleSubmit}
-          startIcon={check.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
-        >
-          {check.isPending ? t('checking_eligibility') : t('check_eligibility')}
-        </AppButton>
-        <AppButton variant="text" color="primary" onClick={onPayWithCard}>
-          {t('pay_with_card')}
-        </AppButton>
+        <Stack sx={{ gap: 1 }}>
+          <AppButton
+            type="submit"
+            color="secondary"
+            variant="contained"
+            size="large"
+            disabled={!consent || check.isPending}
+            startIcon={check.isPending ? <CircularProgress size={18} color="inherit" /> : undefined}
+          >
+            {check.isPending ? t('checking_eligibility') : t('check_eligibility')}
+          </AppButton>
+          <AppButton variant="text" color="primary" onClick={onPayWithCard}>
+            {t('pay_with_card')}
+          </AppButton>
+        </Stack>
       </Stack>
-    </Stack>
+    </FormProvider>
   );
 };
 
@@ -190,7 +208,7 @@ function DeclinedPanel({
     <Stack sx={{ gap: 2 }}>
       <Paper
         elevation={0}
-        sx={{ p: 3, borderRadius: 2, border: '1px solid', borderColor: 'var(--bal-error)', textAlign: 'center' }}
+        sx={{ p: 3, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'var(--bal-error)', textAlign: 'center' }}
       >
         <Stack sx={{ gap: 0.5, alignItems: 'center' }}>
           <AppIcon icon="rejected" size={36} color="var(--bal-error)" />

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/MethodStep.tsx

@@ -36,7 +36,7 @@ const MethodStep: FunctionComponent<MethodStepProps> = ({
 
       <Paper
         elevation={0}
-        sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider', textAlign: 'center' }}
+        sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider', textAlign: 'center' }}
       >
         <Typography variant="caption" sx={{ color: 'text.secondary' }}>
           {t('payable_amount')}
@@ -51,7 +51,7 @@ const MethodStep: FunctionComponent<MethodStepProps> = ({
           display: 'block',
           width: '100%',
           textAlign: 'start',
-          borderRadius: 2,
+          borderRadius: 'var(--bal-radius-md)',
           p: 1.75,
           border: '1px solid',
           borderColor: 'divider',
@@ -128,7 +128,7 @@ function ProviderOption({
         display: 'block',
         width: '100%',
         textAlign: 'start',
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         p: 1.5,
         border: '1px solid',
         borderColor: selected ? 'var(--bal-secondary)' : 'divider',

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/PlanStep.tsx

@@ -69,7 +69,7 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
       {shownPlan ? (
         <Paper
           elevation={0}
-          sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
+          sx={{ p: 1.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}
         >
           <Stack sx={{ gap: 0.5 }}>
             <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/bnpl/ScheduleStep.tsx

@@ -63,7 +63,7 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
   // Handoff in progress — the provider redirect is being followed.
   if (busy) {
     return (
-      <Paper elevation={0} sx={{ p: 4, borderRadius: 2, border: '1px solid', borderColor: 'divider', textAlign: 'center' }}>
+      <Paper elevation={0} sx={{ p: 4, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider', textAlign: 'center' }}>
         <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
           <CircularProgress color="secondary" size="2.5rem" />
           <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
@@ -109,7 +109,7 @@ const ScheduleStep: FunctionComponent<ScheduleStepProps> = ({
         elevation={0}
         sx={{
           p: 1.75,
-          borderRadius: 2,
+          borderRadius: 'var(--bal-radius-md)',
           border: '1px solid',
           borderColor: 'var(--bal-secondary)',
           backgroundColor: 'var(--bal-secondary-soft)',

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/page.tsx

@@ -245,7 +245,7 @@ function CheckoutScreen() {
           </Stack>
 
           {summary.paymentDeadlineAt ? (
-            <Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+            <Paper elevation={0} sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
               <CountdownTimer
                 deadlineIso={summary.paymentDeadlineAt}
                 label={tb('payment_countdown_label')}
@@ -284,7 +284,7 @@ function CheckoutScreen() {
             width: 300,
           }}
         >
-          <Paper elevation={0} sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+          <Paper elevation={0} sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
             {payActions}
           </Paper>
         </Box>
@@ -310,7 +310,7 @@ function EngagementSummary({ summary, locale }: { summary: CheckoutSummaryDto; l
     minute: '2-digit',
   });
   return (
-    <Paper elevation={0} sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+    <Paper elevation={0} sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
       <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
         <Avatar
           src={summary.nurseAvatarUrl ?? undefined}

client/src/app/[locale]/(private-routes)/(customer)/bookings/checkout/return/page.tsx

@@ -148,7 +148,7 @@ function ReturnScreen() {
   // Pending-callback (and the brief succeeded → confirmation hand-off): a staged 2-node progress instead
   // of a bare spinner+chip+title stack — the flow's calmest, most designed wait state.
   return (
-    <Paper elevation={0} sx={{ p: 4, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <Paper elevation={0} sx={{ p: 4, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
       <Stack sx={{ gap: 2.5, alignItems: 'center' }}>
         <Typography variant="subtitle1" sx={{ fontWeight: 700, textAlign: 'center' }}>
           {t('state_pending_title')}

client/src/app/[locale]/(private-routes)/(customer)/bookings/request/[id]/page.tsx

@@ -213,7 +213,7 @@ export default function BookingRequestStatusPage() {
           elevation={0}
           sx={{
             p: 2.5,
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             border: '1px solid',
             borderColor: 'divider',
             borderInlineStartWidth: 4,
@@ -247,7 +247,7 @@ export default function BookingRequestStatusPage() {
           </Stack>
         </Paper>
       ) : (
-        <Paper elevation={0} sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+        <Paper elevation={0} sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
           <Stack sx={{ gap: 1, alignItems: 'center' }}>
             <CountdownTimer
               deadlineIso={request.nurseResponseDeadlineAt}
@@ -329,7 +329,7 @@ function TerminalCard({
   secondary?: TerminalAction;
 }) {
   return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
       <AppIcon icon={icon} size={44} color={tone} />
       <Typography variant="subtitle1" sx={{ fontWeight: 700, mt: 1, mb: body ? 0.5 : 2 }}>
         {title}

client/src/app/[locale]/(private-routes)/(customer)/bookings/request/page.tsx

@@ -2,6 +2,7 @@
 import { Suspense, useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import {
   Avatar,
   Box,
@@ -21,6 +22,8 @@ import {
   EmptyState,
   JalaliDateIntentPicker,
   PriceDisplay,
+  RhfControlGroup,
+  RhfTextField,
   StepperHeader,
   TrustBadge,
 } from '@/components';
@@ -39,6 +42,7 @@ import type {
   RequiredCaregiverGender,
 } from '@/services/bookingRequests/types';
 import type { CustomerAddress } from '@/services/addresses/types';
+import type { Patient } from '@/services/patients/types';
 
 const GENDER_OPTIONS: RequiredCaregiverGender[] = ['female', 'male', 'any'];
 
@@ -54,7 +58,17 @@ const TIME_WINDOWS: TimeWindowOption[] = [
   { key: 'evening', start: '16:00', end: '20:00' },
 ];
 
-type TouchedField = 'patient' | 'service' | 'address' | 'date' | 'time' | 'gender';
+interface RequestFormValues {
+  patientId: number | '';
+  variantId: number | '';
+  addressId: number | '';
+  gender: RequiredCaregiverGender | '';
+  date: string;
+  window: TimeWindowOption['key'] | 'custom' | null;
+  timeStart: string;
+  timeEnd: string;
+  notes: string;
+}
 
 /**
  * C4 — Booking-request form (فرم درخواست). The destination of the C3 "درخواست رزرو" CTA (it carries the
@@ -72,6 +86,16 @@ export default function BookingRequestFormPage() {
   );
 }
 
+/**
+ * Resolves the URL hand-off and waits for every list the form defaults off before mounting it.
+ *
+ * The wait is load-bearing rather than cosmetic: the variant and address fields default to "the one
+ * carried in the URL, else the nurse's first service / the primary address", and those defaults can
+ * only be computed once the lists exist. Previously the form mounted immediately and re-derived the
+ * effective value on every render (`variantSel !== '' ? variantSel : firstVariantId`), which meant the
+ * *stored* value and the *shown* value could disagree, and neither field could carry a plain required
+ * rule. Mounting once with real `defaultValues` makes the stored value the only value.
+ */
 function BookingRequestForm() {
   const t = useTranslations('booking');
   const locale = useLocale();
@@ -90,68 +114,115 @@ function BookingRequestForm() {
   const profileQuery = useNurseProfile(hasNurse ? nurseId : undefined);
   const patientsQuery = usePatients();
   const addressesQuery = useAddresses();
+
+  if (!hasNurse) {
+    return (
+      <EmptyState
+        icon="search"
+        title={t('missing_nurse_title')}
+        body={t('missing_nurse_body')}
+        action={
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={() => router.push(`/${locale}${ROUTES.SEARCH}`)}
+            sx={{ m: 0 }}
+          >
+            {t('missing_nurse_cta')}
+          </AppButton>
+        }
+      />
+    );
+  }
+
+  if (profileQuery.isLoading || patientsQuery.isLoading || addressesQuery.isLoading) return <FormSkeleton />;
+
+  return (
+    <RequestForm
+      nurseId={nurseId}
+      profile={profileQuery.data}
+      patients={patientsQuery.data?.items ?? []}
+      addresses={addressesQuery.data?.items ?? []}
+      carried={{
+        variantId: variantIdParam,
+        patientId: patientIdParam,
+        addressId: addressIdParam,
+        gender: genderParam === 'male' || genderParam === 'female' ? genderParam : null,
+      }}
+    />
+  );
+}
+
+function RequestForm({
+  nurseId,
+  profile,
+  patients,
+  addresses,
+  carried,
+}: {
+  nurseId: number;
+  profile: NurseProfile | undefined;
+  patients: Patient[];
+  addresses: CustomerAddress[];
+  carried: {
+    variantId: number | null;
+    patientId: number | null;
+    addressId: number | null;
+    gender: RequiredCaregiverGender | null;
+  };
+}) {
+  const t = useTranslations('booking');
+  const locale = useLocale();
+  const router = useRouter();
   const createRequest = useCreateBookingRequest();
 
-  const profile = profileQuery.data;
-  const patients = useMemo(() => patientsQuery.data?.items ?? [], [patientsQuery.data]);
-  const addresses = useMemo(() => addressesQuery.data?.items ?? [], [addressesQuery.data]);
   const services = useMemo(() => profile?.services ?? [], [profile]);
-
-  const [patientId, setPatientId] = useState<number | ''>(patientIdParam ?? '');
-  const [variantSel, setVariantSel] = useState<number | ''>(variantIdParam ?? '');
-  const [addressSel, setAddressSel] = useState<number | ''>(addressIdParam ?? '');
   const [addressEditing, setAddressEditing] = useState(false);
-  const [gender, setGender] = useState<RequiredCaregiverGender | ''>(
-    genderParam === 'male' || genderParam === 'female' ? genderParam : '',
-  );
-  const [date, setDate] = useState('');
-  const [windowSel, setWindowSel] = useState<TimeWindowOption['key'] | 'custom' | null>(null);
-  const [timeStart, setTimeStart] = useState('');
-  const [timeEnd, setTimeEnd] = useState('');
-  const [notes, setNotes] = useState('');
-  const [touched, setTouched] = useState<Record<TouchedField, boolean>>({
-    patient: false,
-    service: false,
-    address: false,
-    date: false,
-    time: false,
-    gender: false,
-  });
-  const [pastDateError, setPastDateError] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
-  const markTouched = (field: TouchedField) =>
-    setTouched((prev) => (prev[field] ? prev : { ...prev, [field]: true }));
-
-  // Effective selection = the user's explicit choice, else a sensible default derived from the loaded
-  // data. Computed during render (no setState-in-effect): the variant defaults to the carried one / the
-  // first offered, the address to the primary / first.
-  const firstVariantId: number | '' = services.length > 0 ? services[0].variantId : '';
-  const variantId = variantSel !== '' ? variantSel : firstVariantId;
   const primaryAddressId: number | '' =
     addresses.length > 0 ? (addresses.find((address) => address.isPrimary)?.id ?? addresses[0].id) : '';
-  const addressId = addressSel !== '' ? addressSel : primaryAddressId;
 
-  const selectedVariant = useMemo(
-    () => services.find((service) => service.variantId === variantId),
-    [services, variantId],
-  );
-  const selectedAddress = useMemo(
-    () => addresses.find((address) => address.id === addressId),
-    [addresses, addressId],
-  );
-  const selectedPatient = useMemo(
-    () => patients.find((patient) => patient.id === patientId),
-    [patients, patientId],
-  );
+  const form = useForm<RequestFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      patientId: carried.patientId ?? '',
+      variantId: carried.variantId ?? (services.length > 0 ? services[0].variantId : ''),
+      addressId: carried.addressId ?? primaryAddressId,
+      gender: carried.gender ?? '',
+      date: '',
+      window: null,
+      timeStart: '',
+      timeEnd: '',
+      notes: '',
+    },
+  });
+  const { control, handleSubmit, setValue, getValues } = form;
+  const values = useWatch({ control });
+
+  const patientId = values.patientId ?? '';
+  const variantId = values.variantId ?? '';
+  const addressId = values.addressId ?? '';
+  const gender = values.gender ?? '';
+  const notes = values.notes ?? '';
+  const windowSel = values.window ?? null;
+
+  const selectedVariant = services.find((service) => service.variantId === variantId);
+  const selectedAddress = addresses.find((address) => address.id === addressId);
+  const selectedPatient = patients.find((patient) => patient.id === patientId);
 
   // A concrete gender that contradicts the (single) nurse's gender is a same-gender mismatch (400) —
   // block it inline before the round-trip; the server re-validates and is authoritative.
-  const genderMismatch =
-    gender !== '' && gender !== 'any' && profile != null && gender !== profile.nurseGender;
+  const genderMismatch = gender !== '' && gender !== 'any' && profile != null && gender !== profile.nurseGender;
 
-  const requiredChosen =
-    patientId !== '' && variantId !== '' && addressId !== '' && gender !== '' && date !== '' && timeStart !== '' && timeEnd !== '';
+  const missingFieldLabels: string[] = [];
+  if (patientId === '') missingFieldLabels.push(t('cta_missing_patient'));
+  if (variantId === '') missingFieldLabels.push(t('cta_missing_service'));
+  if (addressId === '') missingFieldLabels.push(t('cta_missing_address'));
+  if (values.date === '') missingFieldLabels.push(t('cta_missing_date'));
+  if (values.timeStart === '' || values.timeEnd === '') missingFieldLabels.push(t('cta_missing_time'));
+  if (gender === '') missingFieldLabels.push(t('cta_missing_gender'));
+  const requiredChosen = missingFieldLabels.length === 0;
 
   const regionLabel = (address: CustomerAddress): string => {
     const city = locale === 'en' ? address.cityNameEn : address.cityNameFa;
@@ -165,31 +236,15 @@ function BookingRequestForm() {
   };
 
   const selectWindow = (option: TimeWindowOption) => {
-    setWindowSel(option.key);
-    setTimeStart(option.start);
-    setTimeEnd(option.end);
-    if (pastDateError) setPastDateError(false);
+    setValue('window', option.key, { shouldDirty: true });
+    setValue('timeStart', option.start, { shouldValidate: true });
+    setValue('timeEnd', option.end, { shouldValidate: true });
+    // The date's past-guard is a cross-field rule over the start time — re-run it now that one exists.
+    if (getValues('date')) void form.trigger('date');
   };
 
-  const missingFieldLabels: string[] = [];
-  if (patientId === '') missingFieldLabels.push(t('cta_missing_patient'));
-  if (variantId === '') missingFieldLabels.push(t('cta_missing_service'));
-  if (addressId === '') missingFieldLabels.push(t('cta_missing_address'));
-  if (date === '') missingFieldLabels.push(t('cta_missing_date'));
-  if (timeStart === '' || timeEnd === '') missingFieldLabels.push(t('cta_missing_time'));
-  if (gender === '') missingFieldLabels.push(t('cta_missing_gender'));
-
-  const handleSubmit = () => {
+  const submit = (formValues: RequestFormValues) => {
     setFormError(null);
-    if (!requiredChosen) return;
-    if (timeEnd <= timeStart) return;
-    // Future date+time guard (local wall-clock, matching the wire's date + time fields). Evaluated in the
-    // handler (not render) so the render path stays pure; the result drives the inline date error.
-    if (Date.parse(`${date}T${timeStart}`) < Date.now()) {
-      setPastDateError(true);
-      return;
-    }
-    setPastDateError(false);
     if (genderMismatch) return;
 
     const context: BookingRequestDisplayContext | undefined =
@@ -220,363 +275,321 @@ function BookingRequestForm() {
       {
         payload: {
           nurseId,
-          variantId: variantId as number,
-          patientId: patientId as number,
-          customerAddressId: addressId as number,
-          requestedDate: date,
-          requestedTimeStart: `${timeStart}:00`,
-          requestedTimeEnd: `${timeEnd}:00`,
-          requiredCaregiverGender: gender as RequiredCaregiverGender,
-          customerNotes: notes.trim() || null,
+          variantId: formValues.variantId as number,
+          patientId: formValues.patientId as number,
+          customerAddressId: formValues.addressId as number,
+          requestedDate: formValues.date,
+          requestedTimeStart: `${formValues.timeStart}:00`,
+          requestedTimeEnd: `${formValues.timeEnd}:00`,
+          requiredCaregiverGender: formValues.gender as RequiredCaregiverGender,
+          customerNotes: formValues.notes.trim() || null,
         },
         context,
       },
       {
-        onSuccess: (dto) => {
-          router.push(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${dto.id}`);
-        },
+        onSuccess: (dto) => router.push(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${dto.id}`),
         onError: (error) => setFormError(mapCreateError(error, t)),
       },
     );
   };
 
-  if (!hasNurse) {
-    return (
-      <EmptyState
-        icon="search"
-        title={t('missing_nurse_title')}
-        body={t('missing_nurse_body')}
-        action={
-          <AppButton
-            variant="contained"
-            color="primary"
-            onClick={() => router.push(`/${locale}${ROUTES.SEARCH}`)}
-            sx={{ m: 0 }}
-          >
-            {t('missing_nurse_cta')}
-          </AppButton>
-        }
-      />
-    );
-  }
-
-  if (profileQuery.isLoading) return <FormSkeleton />;
-
-  const timeError = touched.time && timeStart !== '' && timeEnd !== '' && timeEnd <= timeStart;
-  const pastError = pastDateError;
-
   return (
-    <Stack sx={{ gap: 3 }}>
-      {profile ? <NurseIdentityBar profile={profile} /> : null}
+    <FormProvider {...form}>
+      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 3 }}>
+        {profile ? <NurseIdentityBar profile={profile} /> : null}
 
-      <Box>
-        <Typography variant="h5" component="h1">
-          {t('request_title')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('form_subtitle')}
-        </Typography>
-      </Box>
-
-      <Box>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }}>
-          {t('whathappens_title')}
-        </Typography>
-        <StepperHeader steps={[t('step_submitted'), t('step_awaiting'), t('step_payment')]} activeStep={0} />
-      </Box>
-
-      {/* Patient */}
-      {patients.length === 0 ? (
-        <FieldEmpty
-          label={t('patient_label')}
-          message={t('patient_empty')}
-          ctaLabel={t('patient_add_cta')}
-          onCta={() => router.push(`/${locale}${ROUTES.PATIENTS}`)}
-        />
-      ) : (
-        <TextField
-          select
-          label={t('patient_label')}
-          value={patientId}
-          error={touched.patient && patientId === ''}
-          helperText={touched.patient && patientId === '' ? t('error_patient_required') : undefined}
-          onChange={(event) => setPatientId(Number(event.target.value))}
-          onBlur={() => markTouched('patient')}
-          fullWidth
-        >
-          <MenuItem value="" disabled>
-            {t('patient_placeholder')}
-          </MenuItem>
-          {patients.map((patient) => (
-            <MenuItem key={patient.id} value={patient.id}>
-              {patient.displayName}
-            </MenuItem>
-          ))}
-        </TextField>
-      )}
-
-      {/* Service variant */}
-      <Stack sx={{ gap: 1 }}>
-        {services.length === 0 ? (
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('service_empty')}
+        <Box>
+          <Typography variant="h5" component="h1">
+            {t('request_title')}
           </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('form_subtitle')}
+          </Typography>
+        </Box>
+
+        <Box>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }}>
+            {t('whathappens_title')}
+          </Typography>
+          <StepperHeader steps={[t('step_submitted'), t('step_awaiting'), t('step_payment')]} activeStep={0} />
+        </Box>
+
+        {/* Patient */}
+        {patients.length === 0 ? (
+          <FieldEmpty
+            label={t('patient_label')}
+            message={t('patient_empty')}
+            ctaLabel={t('patient_add_cta')}
+            onCta={() => router.push(`/${locale}${ROUTES.PATIENTS}`)}
+          />
         ) : (
-          <TextField
+          <RhfTextField<RequestFormValues>
+            name="patientId"
             select
-            label={t('service_label')}
-            value={variantId}
-            error={touched.service && variantId === ''}
-            helperText={touched.service && variantId === '' ? t('error_service_required') : undefined}
-            onChange={(event) => setVariantSel(Number(event.target.value))}
-            onBlur={() => markTouched('service')}
+            label={t('patient_label')}
+            rules={{ validate: (value) => value !== '' || t('error_patient_required') }}
             fullWidth
           >
             <MenuItem value="" disabled>
-              {t('service_placeholder')}
+              {t('patient_placeholder')}
             </MenuItem>
-            {services.map((service) => (
-              <MenuItem key={service.variantId} value={service.variantId}>
-                {service.displayName}
+            {patients.map((patient) => (
+              <MenuItem key={patient.id} value={patient.id}>
+                {patient.displayName}
               </MenuItem>
             ))}
-          </TextField>
+          </RhfTextField>
         )}
-        {selectedVariant ? (
-          <PriceDisplay
-            price={selectedVariant.priceIrr}
-            priceUnit={selectedVariant.priceUnit}
-            sessionCount={selectedVariant.sessionCount}
-          />
-        ) : null}
-      </Stack>
 
-      {/* Address — a compact confirmation row once resolved, with a way back to the select. */}
-      {addresses.length === 0 ? (
-        <FieldEmpty
-          label={t('address_label')}
-          message={t('address_empty')}
-          ctaLabel={t('address_add_cta')}
-          onCta={() => router.push(`/${locale}${ROUTES.ADDRESSES}`)}
-        />
-      ) : addressEditing || !selectedAddress ? (
-        <TextField
-          select
-          label={t('address_label')}
-          value={addressId}
-          error={touched.address && addressId === ''}
-          helperText={touched.address && addressId === '' ? t('error_address_required') : undefined}
-          onChange={(event) => {
-            setAddressSel(Number(event.target.value));
-            setAddressEditing(false);
-          }}
-          onBlur={() => markTouched('address')}
-          fullWidth
-        >
-          <MenuItem value="" disabled>
-            {t('address_placeholder')}
-          </MenuItem>
-          {addresses.map((address) => (
-            <MenuItem key={address.id} value={address.id}>
-              {address.title} · {locale === 'en' ? address.cityNameEn : address.cityNameFa}
-            </MenuItem>
-          ))}
-        </TextField>
-      ) : (
-        <Stack
-          direction="row"
-          sx={{
-            gap: 1.5,
-            alignItems: 'center',
-            p: 1.5,
-            border: '1px solid',
-            borderColor: 'divider',
-            borderRadius: 'var(--bal-radius-md)',
-          }}
-        >
-          <AppIcon icon="location" size={20} color="var(--bal-text-secondary)" />
-          <Stack sx={{ gap: 0.25, minWidth: 0, flexGrow: 1 }}>
-            <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
-              {regionLabel(selectedAddress)}
+        {/* Service variant */}
+        <Stack sx={{ gap: 1 }}>
+          {services.length === 0 ? (
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('service_empty')}
             </Typography>
-            {selectedAddress.addressLine ? (
-              <Typography variant="caption" sx={{ color: 'text.secondary' }} noWrap>
-                {selectedAddress.addressLine}
-              </Typography>
-            ) : null}
-          </Stack>
-          <AppButton variant="text" size="small" onClick={() => setAddressEditing(true)} sx={{ flexShrink: 0 }}>
-            {t('address_change_cta')}
-          </AppButton>
-        </Stack>
-      )}
-
-      {/* Date */}
-      <Stack sx={{ gap: 1 }} onBlur={() => markTouched('date')}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('date_label')}
-        </Typography>
-        <JalaliDateIntentPicker
-          value={date}
-          onChange={(iso) => {
-            setDate(iso);
-            if (pastDateError) setPastDateError(false);
-          }}
-          min={todayIso()}
-          todayLabel={t('date_today')}
-          tomorrowLabel={t('date_tomorrow')}
-          pickOtherLabel={t('date_pick_other')}
-        />
-        {pastError ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
-            {t('error_past_date')}
-          </Typography>
-        ) : touched.date && date === '' ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
-            {t('error_date_required')}
-          </Typography>
-        ) : null}
-      </Stack>
-
-      {/* Time window — presets kill the end<=start error class; «زمان دلخواه» reveals free time fields. */}
-      <Stack sx={{ gap: 1 }} onBlur={() => markTouched('time')}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('time_window_label')}
-        </Typography>
-        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          {TIME_WINDOWS.map((option) => (
-            <Chip
-              key={option.key}
-              clickable
-              label={t(`window_${option.key}`)}
-              onClick={() => selectWindow(option)}
-              color={windowSel === option.key ? 'primary' : undefined}
-              variant={windowSel === option.key ? 'filled' : 'outlined'}
-              data-window={option.key}
+          ) : (
+            <RhfTextField<RequestFormValues>
+              name="variantId"
+              select
+              label={t('service_label')}
+              rules={{ validate: (value) => value !== '' || t('error_service_required') }}
+              fullWidth
+            >
+              <MenuItem value="" disabled>
+                {t('service_placeholder')}
+              </MenuItem>
+              {services.map((service) => (
+                <MenuItem key={service.variantId} value={service.variantId}>
+                  {service.displayName}
+                </MenuItem>
+              ))}
+            </RhfTextField>
+          )}
+          {selectedVariant ? (
+            <PriceDisplay
+              price={selectedVariant.priceIrr}
+              priceUnit={selectedVariant.priceUnit}
+              sessionCount={selectedVariant.sessionCount}
             />
-          ))}
-          <Chip
-            clickable
-            label={t('window_custom')}
-            onClick={() => setWindowSel('custom')}
-            color={windowSel === 'custom' ? 'primary' : undefined}
-            variant={windowSel === 'custom' ? 'filled' : 'outlined'}
-            data-window="custom"
+          ) : null}
+        </Stack>
+
+        {/* Address — a compact confirmation row once resolved, with a way back to the select. */}
+        {addresses.length === 0 ? (
+          <FieldEmpty
+            label={t('address_label')}
+            message={t('address_empty')}
+            ctaLabel={t('address_add_cta')}
+            onCta={() => router.push(`/${locale}${ROUTES.ADDRESSES}`)}
           />
-        </Stack>
-        {windowSel === 'custom' ? (
-          <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-            <TextField
-              type="time"
-              label={t('time_start_label')}
-              value={timeStart}
-              onChange={(event) => setTimeStart(event.target.value)}
-              slotProps={{ inputLabel: { shrink: true } }}
-              fullWidth
-            />
-            <TextField
-              type="time"
-              label={t('time_end_label')}
-              value={timeEnd}
-              error={timeError}
-              helperText={timeError ? t('error_time_range') : undefined}
-              onChange={(event) => setTimeEnd(event.target.value)}
-              slotProps={{ inputLabel: { shrink: true } }}
-              fullWidth
-            />
+        ) : addressEditing || !selectedAddress ? (
+          <RhfTextField<RequestFormValues>
+            name="addressId"
+            select
+            label={t('address_label')}
+            rules={{ validate: (value) => value !== '' || t('error_address_required') }}
+            // Collapses back to the compact summary row once the menu closes — picking a different
+            // address is the normal exit, and dismissing without picking leaves the current one shown.
+            slotProps={{ select: { onClose: () => setAddressEditing(false) } }}
+            fullWidth
+          >
+            <MenuItem value="" disabled>
+              {t('address_placeholder')}
+            </MenuItem>
+            {addresses.map((address) => (
+              <MenuItem key={address.id} value={address.id}>
+                {address.title} · {locale === 'en' ? address.cityNameEn : address.cityNameFa}
+              </MenuItem>
+            ))}
+          </RhfTextField>
+        ) : (
+          <Stack
+            direction="row"
+            sx={{
+              gap: 1.5,
+              alignItems: 'center',
+              p: 1.5,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 'var(--bal-radius-md)',
+            }}
+          >
+            <AppIcon icon="location" size={20} color="var(--bal-text-secondary)" />
+            <Stack sx={{ gap: 0.25, minWidth: 0, flexGrow: 1 }}>
+              <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
+                {regionLabel(selectedAddress)}
+              </Typography>
+              {selectedAddress.addressLine ? (
+                <Typography variant="caption" sx={{ color: 'text.secondary' }} noWrap>
+                  {selectedAddress.addressLine}
+                </Typography>
+              ) : null}
+            </Stack>
+            <AppButton variant="text" size="small" onClick={() => setAddressEditing(true)} sx={{ flexShrink: 0 }}>
+              {t('address_change_cta')}
+            </AppButton>
           </Stack>
-        ) : null}
-        {touched.time && (timeStart === '' || timeEnd === '') ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
-            {t('error_time_required')}
-          </Typography>
-        ) : null}
-      </Stack>
+        )}
 
-      {/* Caregiver gender — first-class, three-way, never silently defaulted */}
-      <Stack sx={{ gap: 1 }} onBlur={() => markTouched('gender')}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('gender_label')}
-        </Typography>
-        <ToggleButtonGroup
-          exclusive
-          color="primary"
-          value={gender || null}
-          onChange={(_event, next: RequiredCaregiverGender | null) => {
-            if (next) setGender(next);
-          }}
-          sx={{
-            '& .MuiToggleButton-root': {
-              flex: 1,
-              py: 1.25,
-              fontWeight: 700,
-              borderColor: touched.gender && gender === '' ? 'var(--bal-error)' : undefined,
+        {/* Date — the past-date guard is a cross-field rule against the chosen start time. */}
+        <RhfControlGroup<RequestFormValues>
+          name="date"
+          label={t('date_label')}
+          rules={{
+            validate: {
+              chosen: (value) => value !== '' || t('error_date_required'),
+              future: (value, all) =>
+                !all.timeStart || Date.parse(`${value}T${all.timeStart}`) >= Date.now() || t('error_past_date'),
             },
           }}
         >
-          {GENDER_OPTIONS.map((option) => (
-            <ToggleButton key={option} value={option} data-gender={option}>
-              {t(`gender_${option}`)}
-            </ToggleButton>
-          ))}
-        </ToggleButtonGroup>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('gender_hint')}
-        </Typography>
-        {touched.gender && gender === '' ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
-            {t('error_gender_required')}
+          {({ field }) => (
+            <JalaliDateIntentPicker
+              value={(field.value as string) ?? ''}
+              onChange={field.onChange}
+              min={todayIso()}
+              todayLabel={t('date_today')}
+              tomorrowLabel={t('date_tomorrow')}
+              pickOtherLabel={t('date_pick_other')}
+            />
+          )}
+        </RhfControlGroup>
+
+        {/* Time window — presets kill the end<=start error class; «زمان دلخواه» reveals free time fields. */}
+        <Stack sx={{ gap: 1 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+            {t('time_window_label')}
           </Typography>
-        ) : null}
+          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+            {TIME_WINDOWS.map((option) => (
+              <Chip
+                key={option.key}
+                clickable
+                label={t(`window_${option.key}`)}
+                onClick={() => selectWindow(option)}
+                color={windowSel === option.key ? 'primary' : undefined}
+                variant={windowSel === option.key ? 'filled' : 'outlined'}
+                data-window={option.key}
+              />
+            ))}
+            <Chip
+              clickable
+              label={t('window_custom')}
+              onClick={() => setValue('window', 'custom', { shouldDirty: true })}
+              color={windowSel === 'custom' ? 'primary' : undefined}
+              variant={windowSel === 'custom' ? 'filled' : 'outlined'}
+              data-window="custom"
+            />
+          </Stack>
+          {windowSel === 'custom' ? (
+            <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
+              <RhfTextField<RequestFormValues>
+                name="timeStart"
+                type="time"
+                label={t('time_start_label')}
+                rules={{ validate: (value) => value !== '' || t('error_time_required') }}
+                slotProps={{ inputLabel: { shrink: true } }}
+                fullWidth
+              />
+              <RhfTextField<RequestFormValues>
+                name="timeEnd"
+                type="time"
+                label={t('time_end_label')}
+                rules={{
+                  validate: {
+                    chosen: (value) => value !== '' || t('error_time_required'),
+                    after: (value, all) => !all.timeStart || String(value) > all.timeStart || t('error_time_range'),
+                  },
+                }}
+                slotProps={{ inputLabel: { shrink: true } }}
+                fullWidth
+              />
+            </Stack>
+          ) : null}
+        </Stack>
+
+        {/* Caregiver gender — first-class, three-way, never silently defaulted */}
+        <RhfControlGroup<RequestFormValues>
+          name="gender"
+          label={t('gender_label')}
+          hint={t('gender_hint')}
+          rules={{ validate: (value) => value !== '' || t('error_gender_required') }}
+        >
+          {({ field, hasError }) => (
+            <ToggleButtonGroup
+              exclusive
+              color="primary"
+              value={field.value || null}
+              onChange={(_event, next: RequiredCaregiverGender | null) => {
+                if (next) field.onChange(next);
+              }}
+              sx={{
+                '& .MuiToggleButton-root': {
+                  flex: 1,
+                  py: 1.25,
+                  fontWeight: 700,
+                  borderColor: hasError ? 'var(--bal-error)' : undefined,
+                },
+              }}
+            >
+              {GENDER_OPTIONS.map((option) => (
+                <ToggleButton key={option} value={option} data-gender={option}>
+                  {t(`gender_${option}`)}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+          )}
+        </RhfControlGroup>
+
         {genderMismatch ? (
           <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
             {t('error_gender_mismatch')}
           </Typography>
         ) : null}
-      </Stack>
 
-      {/* Stage-1 notes */}
-      <Stack sx={{ gap: 0.5 }}>
-        <TextField
-          label={t('notes_label')}
-          placeholder={t('notes_placeholder')}
-          value={notes}
-          onChange={(event) => setNotes(event.target.value.slice(0, CUSTOMER_NOTES_MAX_LENGTH))}
-          multiline
-          minRows={3}
-          fullWidth
-          helperText={t('notes_hint')}
-        />
-        <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'end' }}>
-          {t('notes_counter', { count: notes.length, max: CUSTOMER_NOTES_MAX_LENGTH })}
-        </Typography>
-      </Stack>
+        {/* Stage-1 notes */}
+        <Stack sx={{ gap: 0.5 }}>
+          <RhfTextField<RequestFormValues>
+            name="notes"
+            label={t('notes_label')}
+            placeholder={t('notes_placeholder')}
+            helperText={t('notes_hint')}
+            transform={(raw) => raw.slice(0, CUSTOMER_NOTES_MAX_LENGTH)}
+            multiline
+            minRows={3}
+            fullWidth
+          />
+          <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'end' }}>
+            {t('notes_counter', { count: notes.length, max: CUSTOMER_NOTES_MAX_LENGTH })}
+          </Typography>
+        </Stack>
 
-      {formError ? (
-        <Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
-          {formError}
-        </Typography>
-      ) : null}
-
-      <Stack sx={{ gap: 1 }}>
-        <AppButton
-          color="primary"
-          variant="contained"
-          size="large"
-          startIcon="requests"
-          disabled={!requiredChosen || genderMismatch || createRequest.isPending}
-          onClick={handleSubmit}
-          sx={{ py: 1.5 }}
-        >
-          {createRequest.isPending ? t('submitting') : t('submit')}
-        </AppButton>
-        {!requiredChosen && missingFieldLabels.length > 0 ? (
-          <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center' }}>
-            {t('cta_missing_caption', { fields: missingFieldLabels.join(locale === 'fa' ? '، ' : ', ') })}
+        {formError ? (
+          <Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
+            {formError}
           </Typography>
         ) : null}
+
+        <Stack sx={{ gap: 1 }}>
+          <AppButton
+            type="submit"
+            color="primary"
+            variant="contained"
+            size="large"
+            startIcon="requests"
+            disabled={!requiredChosen || genderMismatch || createRequest.isPending}
+            sx={{ py: 1.5 }}
+          >
+            {createRequest.isPending ? t('submitting') : t('submit')}
+          </AppButton>
+          {!requiredChosen ? (
+            <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+              {t('cta_missing_caption', { fields: missingFieldLabels.join(locale === 'fa' ? '، ' : ', ') })}
+            </Typography>
+          ) : null}
+        </Stack>
       </Stack>
-    </Stack>
+    </FormProvider>
   );
 }
 
@@ -596,7 +609,9 @@ function NurseIdentityBar({ profile }: { profile: NurseProfile }) {
       data-nurse-identity-bar
       sx={{
         position: 'sticky',
-        top: 0,
+        // Sticks just below the shell's pinned header rather than behind it (AppFrame publishes the
+        // height); `0px` in a chrome-free shell.
+        top: 'var(--bal-chrome-top, 0px)',
         zIndex: 2,
         gap: 1.5,
         alignItems: 'center',

client/src/app/[locale]/(private-routes)/(customer)/patients/[id]/record/page.tsx

@@ -3,6 +3,7 @@ import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import {
   Box,
@@ -23,7 +24,16 @@ import {
   useMediaQuery,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { AppButton, AppIcon, ConfirmDialog, EmptyState, PatientHeader, VisitNoteCard } from '@/components';
+import {
+  AppButton,
+  AppIcon,
+  ConfirmDialog,
+  EmptyState,
+  PatientHeader,
+  RhfControlGroup,
+  RhfTextField,
+  VisitNoteCard,
+} from '@/components';
 import { ROUTES, bookingDetailPath } from '@/constants';
 import { formatShamsiDate, formatShamsiMonthYear } from '@/utils';
 import { bookingKeys } from '@/services/bookings/keys';
@@ -106,7 +116,7 @@ export default function PatientRecordPage() {
 
       <Paper
         elevation={0}
-        sx={{ p: 2, borderRadius: 2, backgroundColor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
+        sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', backgroundColor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
       >
         <AppIcon icon="family" size={22} color="var(--bal-primary)" />
         <Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
@@ -259,15 +269,23 @@ function RecordItemSheet({
   );
 }
 
+/**
+ * Client-side id for a row that has never been saved. Module scope on purpose: `Date.now()` is impure
+ * and the lint rule can't tell that a submit callback only ever runs from an event, so keeping the
+ * call out of the component body states the same thing structurally.
+ */
+function newTempId(): string {
+  return `new-${Date.now()}`;
+}
+
+/** Save submits the enclosing `<form>`, so each sheet body owns its submit handler rather than a callback. */
 function SheetActions({
   onCancel,
-  onSave,
   onDelete,
   saving,
   canSave,
 }: {
   onCancel: () => void;
-  onSave: () => void;
   onDelete?: () => void;
   saving: boolean;
   canSave: boolean;
@@ -285,7 +303,7 @@ function SheetActions({
         <AppButton variant="text" onClick={onCancel} disabled={saving}>
           {tc('cancel')}
         </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={saving || !canSave}>
+        <AppButton type="submit" variant="contained" color="primary" disabled={saving || !canSave}>
           {saving ? tc('saving') : tc('save')}
         </AppButton>
       </Stack>
@@ -296,7 +314,7 @@ function SheetActions({
 // A tappable row surface shared by the three editable tabs — mirrors PatientCard's press affordance.
 function RowCard({ onOpen, children }: { onOpen?: () => void; children: ReactNode }) {
   return (
-    <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, overflow: 'hidden' }}>
+    <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', overflow: 'hidden' }}>
       {onOpen ? (
         <AppButton
           variant="text"
@@ -432,6 +450,16 @@ function MedicationsTab({
   );
 }
 
+interface MedicationFormValues {
+  name: string;
+  doseAmount: string;
+  doseUnit: DoseUnit | '';
+  frequencyCode: FrequencyPreset | null;
+  frequencyText: string;
+  timeOfDay: TimeOfDayCode[];
+  timingNote: string;
+}
+
 function MedicationSheetBody({
   initial,
   saving,
@@ -448,107 +476,99 @@ function MedicationSheetBody({
   onDirtyChange: (dirty: boolean) => void;
 }) {
   const t = useTranslations('records');
-  const [name, setName] = useState(initial?.name ?? '');
-  const [doseAmount, setDoseAmount] = useState(initial?.doseAmount ?? '');
-  const [doseUnit, setDoseUnit] = useState<DoseUnit | ''>(initial?.doseUnit ?? '');
-  const [frequencyCode, setFrequencyCode] = useState<FrequencyPreset | null>(initial?.frequencyCode ?? null);
-  const [frequencyText, setFrequencyText] = useState(initial?.frequencyText ?? '');
-  const [timeOfDay, setTimeOfDay] = useState<TimeOfDayCode[]>(initial?.timeOfDay ?? []);
-  const [timingNote, setTimingNote] = useState(initial?.timingNote ?? '');
+  const form = useForm<MedicationFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      name: initial?.name ?? '',
+      doseAmount: initial?.doseAmount ?? '',
+      doseUnit: initial?.doseUnit ?? '',
+      frequencyCode: initial?.frequencyCode ?? null,
+      frequencyText: initial?.frequencyText ?? '',
+      timeOfDay: initial?.timeOfDay ?? [],
+      timingNote: initial?.timingNote ?? '',
+    },
+  });
+  const { control, formState, handleSubmit, setValue } = form;
+  const { isDirty } = formState;
+  const name = useWatch({ control, name: 'name' });
+  const frequencyCode = useWatch({ control, name: 'frequencyCode' });
 
   useEffect(() => {
-    const dirty =
-      name !== (initial?.name ?? '') ||
-      doseAmount !== (initial?.doseAmount ?? '') ||
-      doseUnit !== (initial?.doseUnit ?? '') ||
-      frequencyCode !== (initial?.frequencyCode ?? null) ||
-      frequencyText !== (initial?.frequencyText ?? '') ||
-      timingNote !== (initial?.timingNote ?? '') ||
-      timeOfDay.length !== (initial?.timeOfDay ?? []).length ||
-      timeOfDay.some((code) => !(initial?.timeOfDay ?? []).includes(code));
-    onDirtyChange(dirty);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `initial` is a fresh-mount snapshot (the sheet remounts per open), not reactive state.
-  }, [name, doseAmount, doseUnit, frequencyCode, frequencyText, timeOfDay, timingNote]);
+    onDirtyChange(isDirty);
+  }, [isDirty, onDirtyChange]);
 
-  const canSave = name.trim().length > 0;
-
-  const handleSave = () => {
+  const submit = (values: MedicationFormValues) => {
     onSave({
-      id: initial?.id ?? `new-${Date.now()}`,
-      name: name.trim(),
-      doseAmount: doseAmount.trim() || null,
-      doseUnit: doseUnit || null,
-      frequencyCode,
-      frequencyText: frequencyCode ? null : frequencyText.trim() || null,
-      timeOfDay,
-      timingNote: timingNote.trim() || null,
+      id: initial?.id ?? newTempId(),
+      name: values.name.trim(),
+      doseAmount: values.doseAmount.trim() || null,
+      doseUnit: values.doseUnit || null,
+      frequencyCode: values.frequencyCode,
+      frequencyText: values.frequencyCode ? null : values.frequencyText.trim() || null,
+      timeOfDay: values.timeOfDay,
+      timingNote: values.timingNote.trim() || null,
     });
   };
 
   return (
-    <Stack sx={{ gap: 2 }}>
-      <TextField label={t('med_name')} value={name} onChange={(e) => setName(e.target.value)} fullWidth required autoFocus />
+    <FormProvider {...form}>
+      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2 }}>
+        <RhfTextField<MedicationFormValues> name="name" label={t('med_name')} fullWidth required autoFocus />
 
-      <Stack direction="row" sx={{ gap: 1.5 }}>
-        <TextField
-          label={t('med_dose_amount')}
-          value={doseAmount}
-          onChange={(e) => setDoseAmount(e.target.value)}
-          sx={{ flex: 1 }}
-        />
-        <TextField select label={t('med_dose_unit')} value={doseUnit} onChange={(e) => setDoseUnit(e.target.value as DoseUnit)} sx={{ flex: 1 }}>
-          <MenuItem value="">{t('med_dose_unit_none')}</MenuItem>
-          {DOSE_UNITS.map((unit) => (
-            <MenuItem key={unit} value={unit}>
-              {t(`dose_unit_${unit}`)}
-            </MenuItem>
-          ))}
-        </TextField>
-      </Stack>
-
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('med_frequency')}
-        </Typography>
-        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          {FREQUENCY_PRESETS.map((preset) => (
-            <AppButton
-              key={preset}
-              variant={frequencyCode === preset ? 'contained' : 'outlined'}
-              color="primary"
-              size="small"
-              onClick={() => {
-                setFrequencyCode(frequencyCode === preset ? null : preset);
-                if (frequencyCode !== preset) setFrequencyText('');
-              }}
-              sx={{ borderRadius: '999px' }}
-            >
-              {t(`frequency_${preset}`)}
-            </AppButton>
-          ))}
+        <Stack direction="row" sx={{ gap: 1.5 }}>
+          <RhfTextField<MedicationFormValues> name="doseAmount" label={t('med_dose_amount')} sx={{ flex: 1 }} />
+          <RhfTextField<MedicationFormValues> name="doseUnit" select label={t('med_dose_unit')} sx={{ flex: 1 }}>
+            <MenuItem value="">{t('med_dose_unit_none')}</MenuItem>
+            {DOSE_UNITS.map((unit) => (
+              <MenuItem key={unit} value={unit}>
+                {t(`dose_unit_${unit}`)}
+              </MenuItem>
+            ))}
+          </RhfTextField>
         </Stack>
-        {!frequencyCode ? (
-          <TextField
-            label={t('med_frequency_text')}
-            value={frequencyText}
-            onChange={(e) => setFrequencyText(e.target.value)}
-            fullWidth
-            size="small"
-          />
-        ) : null}
+
+        <Stack sx={{ gap: 1 }}>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('med_frequency')}
+          </Typography>
+          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+            {FREQUENCY_PRESETS.map((preset) => (
+              <AppButton
+                key={preset}
+                variant={frequencyCode === preset ? 'contained' : 'outlined'}
+                color="primary"
+                size="small"
+                onClick={() => {
+                  const next = frequencyCode === preset ? null : preset;
+                  setValue('frequencyCode', next, { shouldDirty: true });
+                  // A preset and the free-text alternative are mutually exclusive by design.
+                  if (next) setValue('frequencyText', '', { shouldDirty: true });
+                }}
+                sx={{ borderRadius: '999px' }}
+              >
+                {t(`frequency_${preset}`)}
+              </AppButton>
+            ))}
+          </Stack>
+          {!frequencyCode ? (
+            <RhfTextField<MedicationFormValues>
+              name="frequencyText"
+              label={t('med_frequency_text')}
+              fullWidth
+              size="small"
+            />
+          ) : null}
+        </Stack>
+
+        <RhfControlGroup<MedicationFormValues> name="timeOfDay" hint={t('time_of_day')}>
+          {({ field }) => <TimeOfDayChipRow value={(field.value as TimeOfDayCode[]) ?? []} onChange={field.onChange} />}
+        </RhfControlGroup>
+
+        <RhfTextField<MedicationFormValues> name="timingNote" label={t('med_timing')} fullWidth size="small" />
+
+        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={name.trim().length > 0} />
       </Stack>
-
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('time_of_day')}
-        </Typography>
-        <TimeOfDayChipRow value={timeOfDay} onChange={setTimeOfDay} />
-      </Stack>
-
-      <TextField label={t('med_timing')} value={timingNote} onChange={(e) => setTimingNote(e.target.value)} fullWidth size="small" />
-
-      <SheetActions onCancel={onCancel} onSave={handleSave} onDelete={onDelete} saving={saving} canSave={canSave} />
-    </Stack>
+    </FormProvider>
   );
 }
 
@@ -652,42 +672,45 @@ function RoutineSheetBody({
   onDirtyChange: (dirty: boolean) => void;
 }) {
   const t = useTranslations('records');
-  const [label, setLabel] = useState(initial?.label ?? '');
-  const [timeOfDay, setTimeOfDay] = useState<TimeOfDayCode[]>(initial?.timeOfDay ?? []);
-  const [note, setNote] = useState(initial?.note ?? '');
+  const form = useForm<{ label: string; timeOfDay: TimeOfDayCode[]; note: string }>({
+    mode: 'onTouched',
+    defaultValues: {
+      label: initial?.label ?? '',
+      timeOfDay: initial?.timeOfDay ?? [],
+      note: initial?.note ?? '',
+    },
+  });
+  const { control, formState, handleSubmit } = form;
+  const { isDirty } = formState;
+  const label = useWatch({ control, name: 'label' });
 
   useEffect(() => {
-    const dirty =
-      label !== (initial?.label ?? '') ||
-      note !== (initial?.note ?? '') ||
-      timeOfDay.length !== (initial?.timeOfDay ?? []).length ||
-      timeOfDay.some((code) => !(initial?.timeOfDay ?? []).includes(code));
-    onDirtyChange(dirty);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `initial` is a fresh-mount snapshot (the sheet remounts per open), not reactive state.
-  }, [label, note, timeOfDay]);
-
-  const canSave = label.trim().length > 0;
-
-  const handleSave = () =>
-    onSave({
-      id: initial?.id ?? `new-${Date.now()}`,
-      label: label.trim(),
-      timeOfDay,
-      note: note.trim() || null,
-    });
+    onDirtyChange(isDirty);
+  }, [isDirty, onDirtyChange]);
 
   return (
-    <Stack sx={{ gap: 2 }}>
-      <TextField label={t('routine_label')} value={label} onChange={(e) => setLabel(e.target.value)} fullWidth required autoFocus />
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('time_of_day')}
-        </Typography>
-        <TimeOfDayChipRow value={timeOfDay} onChange={setTimeOfDay} />
+    <FormProvider {...form}>
+      <Stack
+        component="form"
+        noValidate
+        onSubmit={handleSubmit((values) =>
+          onSave({
+            id: initial?.id ?? newTempId(),
+            label: values.label.trim(),
+            timeOfDay: values.timeOfDay,
+            note: values.note.trim() || null,
+          }),
+        )}
+        sx={{ gap: 2 }}
+      >
+        <RhfTextField name="label" label={t('routine_label')} fullWidth required autoFocus />
+        <RhfControlGroup name="timeOfDay" hint={t('time_of_day')}>
+          {({ field }) => <TimeOfDayChipRow value={(field.value as TimeOfDayCode[]) ?? []} onChange={field.onChange} />}
+        </RhfControlGroup>
+        <RhfTextField name="note" label={t('routine_note')} fullWidth size="small" />
+        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={label.trim().length > 0} />
       </Stack>
-      <TextField label={t('routine_note')} value={note} onChange={(e) => setNote(e.target.value)} fullWidth size="small" />
-      <SheetActions onCancel={onCancel} onSave={handleSave} onDelete={onDelete} saving={saving} canSave={canSave} />
-    </Stack>
+    </FormProvider>
   );
 }
 
@@ -724,7 +747,7 @@ function TasksTab({
       ) : (
         <Stack sx={{ gap: 1 }}>
           {data.map((task) => (
-            <Paper key={task.id} elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 1 }}>
+            <Paper key={task.id} elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 1 }}>
               <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
                 <FormControlLabel
                   control={<Checkbox checked={task.done} onChange={() => (canEdit ? toggleDone(task) : undefined)} disabled={!canEdit || saving} />}
@@ -788,28 +811,42 @@ function TaskSheetBody({
   onDirtyChange: (dirty: boolean) => void;
 }) {
   const t = useTranslations('records');
-  const [label, setLabel] = useState(initial?.label ?? '');
-  const [done, setDone] = useState(initial?.done ?? false);
+  const form = useForm<{ label: string; done: boolean }>({
+    mode: 'onTouched',
+    defaultValues: { label: initial?.label ?? '', done: initial?.done ?? false },
+  });
+  const { control, formState, handleSubmit } = form;
+  const { isDirty } = formState;
+  const label = useWatch({ control, name: 'label' });
 
   useEffect(() => {
-    onDirtyChange(label !== (initial?.label ?? '') || done !== (initial?.done ?? false));
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `initial` is a fresh-mount snapshot (the sheet remounts per open), not reactive state.
-  }, [label, done]);
-
-  const canSave = label.trim().length > 0;
+    onDirtyChange(isDirty);
+  }, [isDirty, onDirtyChange]);
 
   return (
-    <Stack sx={{ gap: 2 }}>
-      <TextField label={t('task_label')} value={label} onChange={(e) => setLabel(e.target.value)} fullWidth required autoFocus />
-      <FormControlLabel control={<Checkbox checked={done} onChange={(e) => setDone(e.target.checked)} />} label={t('task_done')} />
-      <SheetActions
-        onCancel={onCancel}
-        onSave={() => onSave({ id: initial?.id ?? `new-${Date.now()}`, label: label.trim(), done })}
-        onDelete={onDelete}
-        saving={saving}
-        canSave={canSave}
-      />
-    </Stack>
+    <FormProvider {...form}>
+      <Stack
+        component="form"
+        noValidate
+        onSubmit={handleSubmit((values) =>
+          onSave({ id: initial?.id ?? newTempId(), label: values.label.trim(), done: values.done }),
+        )}
+        sx={{ gap: 2 }}
+      >
+        <RhfTextField name="label" label={t('task_label')} fullWidth required autoFocus />
+        <RhfControlGroup name="done">
+          {({ field }) => (
+            <FormControlLabel
+              control={
+                <Checkbox checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />
+              }
+              label={t('task_done')}
+            />
+          )}
+        </RhfControlGroup>
+        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={label.trim().length > 0} />
+      </Stack>
+    </FormProvider>
   );
 }
 

client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx

@@ -2,8 +2,9 @@
 import { FunctionComponent, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Box, Divider, MenuItem, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import { Box, Divider, MenuItem, Skeleton, Stack, Typography } from '@mui/material';
 import {
   AppButton,
   AppIcon,
@@ -12,8 +13,11 @@ import {
   FormDialogShell,
   PhoneNumberField,
   ProfileSummary,
+  RhfControlGroup,
+  RhfTextField,
 } from '@/components';
 import LocaleSwitcher from '@/components/common/LocaleSwitcher';
+import { ThemeModeSetting } from '@/components/settings';
 import { isIranianMobile } from '@/components/PhoneNumberField';
 import { ROUTES } from '@/constants';
 import { digitsOnly } from '@/utils';
@@ -43,6 +47,14 @@ export default function CustomerProfilePage() {
   );
 }
 
+interface AccountFormValues {
+  firstName: string;
+  lastName: string;
+  language: string;
+  emergencyName: string;
+  emergencyPhone: string;
+}
+
 const AccountHub: FunctionComponent<{
   initial: CustomerProfile | null;
   nameFallback: { firstName: string | null; lastName: string | null };
@@ -56,69 +68,63 @@ const AccountHub: FunctionComponent<{
   const upsert = useUpsertCustomerProfile();
   const logout = useLogout();
 
-  const initialFirstName = initial?.firstName ?? nameFallback.firstName ?? '';
-  const initialLastName = initial?.lastName ?? nameFallback.lastName ?? '';
-  const initialLanguage = initial?.preferredLanguage ?? 'fa';
-  const initialEmergencyName = initial?.defaultEmergencyContactName ?? '';
-  const initialEmergencyPhone = digitsOnly(initial?.defaultEmergencyContactPhone ?? '');
-
-  const [firstName, setFirstName] = useState(initialFirstName);
-  const [lastName, setLastName] = useState(initialLastName);
-  const [language, setLanguage] = useState(initialLanguage);
-  const [emergencyName, setEmergencyName] = useState(initialEmergencyName);
-  const [emergencyPhone, setEmergencyPhone] = useState(initialEmergencyPhone);
-
   const [personalSheetOpen, setPersonalSheetOpen] = useState(false);
   const [languageSheetOpen, setLanguageSheetOpen] = useState(false);
   const [emergencySheetOpen, setEmergencySheetOpen] = useState(false);
   const [signOutOpen, setSignOutOpen] = useState(false);
 
-  const [nameError, setNameError] = useState(false);
-  const [phoneError, setPhoneError] = useState(false);
+  // ONE form behind all three sheets. Each sheet edits its own slice, but every save writes the whole
+  // profile (the wire upsert has no PATCH semantics), so the untouched fields have to come from
+  // somewhere — a single form is that somewhere, and `dirtyFields` then answers per-sheet "is there
+  // unsaved work here?" without a hand-written comparison per section.
+  const form = useForm<AccountFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      firstName: initial?.firstName ?? nameFallback.firstName ?? '',
+      lastName: initial?.lastName ?? nameFallback.lastName ?? '',
+      language: initial?.preferredLanguage ?? 'fa',
+      emergencyName: initial?.defaultEmergencyContactName ?? '',
+      emergencyPhone: digitsOnly(initial?.defaultEmergencyContactPhone ?? ''),
+    },
+  });
+  const { control, formState, getValues, reset, trigger } = form;
+  const { dirtyFields } = formState;
+  const watched = useWatch({ control });
 
-  const displayName = [firstName, lastName].filter(Boolean).join(' ').trim() || phone || '';
-  const emergencyComplete = Boolean(emergencyName.trim() && emergencyPhone);
+  const displayName = [watched.firstName, watched.lastName].filter(Boolean).join(' ').trim() || phone || '';
+  const emergencyComplete = Boolean(watched.emergencyName?.trim() && watched.emergencyPhone);
 
-  // Every sheet saves the FULL profile object (the wire upsert has no PATCH semantics) — `patch`
-  // carries just the fields that sheet owns, the rest come from the shared draft state so editing
-  // one section never blanks another (the bug the old flat form was one refactor away from).
-  const save = (
-    patch: Partial<Record<'firstName' | 'lastName' | 'preferredLanguage', string | null>>,
-    onDone: () => void,
-  ) => {
+  const save = (onDone: () => void) => {
+    const values = getValues();
     upsert.mutate(
       {
-        defaultEmergencyContactName: emergencyName.trim(),
-        defaultEmergencyContactPhone: emergencyPhone,
-        firstName: firstName.trim() || null,
-        lastName: lastName.trim() || null,
-        preferredLanguage: language,
-        ...patch,
+        defaultEmergencyContactName: values.emergencyName.trim(),
+        defaultEmergencyContactPhone: values.emergencyPhone,
+        firstName: values.firstName.trim() || null,
+        lastName: values.lastName.trim() || null,
+        preferredLanguage: values.language,
       },
       {
         onSuccess: () => {
           enqueueSnackbar(t('saved'), { variant: 'success' });
+          // Re-baseline so the saved slice stops counting as unsaved work in its sheet's discard guard.
+          reset(getValues());
           onDone();
         },
       },
     );
   };
 
-  const savePersonal = () =>
-    save({ firstName: firstName.trim() || null, lastName: lastName.trim() || null }, () => setPersonalSheetOpen(false));
-  const saveLanguage = () => save({ preferredLanguage: language }, () => setLanguageSheetOpen(false));
-  const saveEmergency = () => {
-    const nameInvalid = emergencyName.trim().length === 0;
-    const phoneInvalid = !isIranianMobile(emergencyPhone);
-    setNameError(nameInvalid);
-    setPhoneError(phoneInvalid);
-    if (nameInvalid || phoneInvalid) return;
-    save({}, () => setEmergencySheetOpen(false));
+  const savePersonal = () => save(() => setPersonalSheetOpen(false));
+  const saveLanguage = () => save(() => setLanguageSheetOpen(false));
+  const saveEmergency = async () => {
+    if (!(await trigger(['emergencyName', 'emergencyPhone']))) return;
+    save(() => setEmergencySheetOpen(false));
   };
 
-  const personalDirty = firstName !== initialFirstName || lastName !== initialLastName;
-  const languageDirty = language !== initialLanguage;
-  const emergencyDirty = emergencyName !== initialEmergencyName || emergencyPhone !== initialEmergencyPhone;
+  const personalDirty = Boolean(dirtyFields.firstName || dirtyFields.lastName);
+  const languageDirty = Boolean(dirtyFields.language);
+  const emergencyDirty = Boolean(dirtyFields.emergencyName || dirtyFields.emergencyPhone);
 
   const goTo = (path: string) => router.push(`/${locale}${path}`);
 
@@ -130,6 +136,7 @@ const AccountHub: FunctionComponent<{
   const cancelLabel = tc('cancel');
 
   return (
+    <FormProvider {...form}>
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 520 }}>
       <ProfileSummary displayName={displayName} phone={phone} initialsFallback={displayName || undefined} />
 
@@ -137,12 +144,15 @@ const AccountHub: FunctionComponent<{
         <AccountRow icon="account" label={t('row_personal')} onClick={() => setPersonalSheetOpen(true)} />
         <EmergencyContactCard
           complete={emergencyComplete}
-          name={emergencyName}
-          phone={emergencyPhone}
+          name={watched.emergencyName ?? ''}
+          phone={watched.emergencyPhone ?? ''}
           onEdit={() => setEmergencySheetOpen(true)}
         />
         <AccountRow icon="location" label={t('row_addresses')} onClick={() => goTo(ROUTES.ADDRESSES)} />
         <AccountRow icon="language" label={t('row_language')} onClick={() => setLanguageSheetOpen(true)} />
+        {/* The app's appearance control lives here (and in each other actor's settings hub) — it
+            used to occupy a permanent slot in every top bar for a preference set once. */}
+        <ThemeModeSetting />
         <AccountRow icon="notifications" label={t('row_notifications')} onClick={() => goTo(ROUTES.NOTIFICATIONS)} />
         <AccountRow icon="support" label={t('row_support')} onClick={() => goTo(ROUTES.SUPPORT_TICKETS)} />
       </Stack>
@@ -168,8 +178,8 @@ const AccountHub: FunctionComponent<{
         discardCancelLabel={cancelLabel}
       >
         <Stack sx={{ gap: 2.5 }}>
-          <TextField label={t('first_name')} value={firstName} onChange={(e) => setFirstName(e.target.value)} fullWidth />
-          <TextField label={t('last_name')} value={lastName} onChange={(e) => setLastName(e.target.value)} fullWidth />
+          <RhfTextField<AccountFormValues> name="firstName" label={t('first_name')} fullWidth />
+          <RhfTextField<AccountFormValues> name="lastName" label={t('last_name')} fullWidth />
           <SheetActions onCancel={() => setPersonalSheetOpen(false)} onSave={savePersonal} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
       </FormDialogShell>
@@ -197,16 +207,10 @@ const AccountHub: FunctionComponent<{
             <LocaleSwitcher />
           </Stack>
           <Divider />
-          <TextField
-            select
-            label={t('language')}
-            value={language}
-            onChange={(e) => setLanguage(e.target.value)}
-            helperText={t('language_hint')}
-          >
+          <RhfTextField<AccountFormValues> name="language" select label={t('language')} helperText={t('language_hint')}>
             <MenuItem value="fa">{t('language_fa')}</MenuItem>
             <MenuItem value="en">{t('language_en')}</MenuItem>
-          </TextField>
+          </RhfTextField>
           <SheetActions onCancel={() => setLanguageSheetOpen(false)} onSave={saveLanguage} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
       </FormDialogShell>
@@ -227,27 +231,27 @@ const AccountHub: FunctionComponent<{
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('emergency_hint')}
           </Typography>
-          <TextField
+          <RhfTextField<AccountFormValues>
+            name="emergencyName"
             label={t('emergency_name')}
-            value={emergencyName}
-            onChange={(e) => {
-              setEmergencyName(e.target.value);
-              if (nameError) setNameError(false);
-            }}
-            error={nameError}
-            fullWidth
-          />
-          <PhoneNumberField
-            label={t('emergency_phone')}
-            value={emergencyPhone}
-            onChange={(v) => {
-              setEmergencyPhone(v);
-              if (phoneError) setPhoneError(false);
-            }}
-            error={phoneError}
-            helperText={phoneError ? t('emergency_phone_invalid') : undefined}
+            rules={{ validate: (value) => String(value ?? '').trim().length > 0 }}
             fullWidth
           />
+          <RhfControlGroup<AccountFormValues>
+            name="emergencyPhone"
+            rules={{ validate: (value) => isIranianMobile(String(value ?? '')) }}
+          >
+            {({ field, hasError }) => (
+              <PhoneNumberField
+                label={t('emergency_phone')}
+                value={(field.value as string) ?? ''}
+                onChange={field.onChange}
+                error={hasError}
+                helperText={hasError ? t('emergency_phone_invalid') : undefined}
+                fullWidth
+              />
+            )}
+          </RhfControlGroup>
           <SheetActions onCancel={() => setEmergencySheetOpen(false)} onSave={saveEmergency} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
       </FormDialogShell>
@@ -266,6 +270,7 @@ const AccountHub: FunctionComponent<{
         }}
       />
     </Box>
+    </FormProvider>
   );
 };
 
@@ -287,7 +292,7 @@ const AccountRow: FunctionComponent<{
         alignItems: 'center',
         gap: 1.5,
         p: 1.5,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         color: tone === 'error' ? 'var(--bal-error)' : 'text.primary',
         '&:hover': { bgcolor: 'action.hover' },
       }}
@@ -309,7 +314,7 @@ const EmergencyContactCard: FunctionComponent<{
 }> = ({ complete, name, phone, onEdit }) => {
   const t = useTranslations('profile');
   return (
-    <Box sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+    <Box sx={{ p: 1.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
       <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5 }}>
         <AppIcon icon={complete ? 'verified' : 'emergency'} size={22} color={complete ? 'var(--bal-success)' : 'var(--bal-warning)'} />
         <Stack sx={{ flexGrow: 1, gap: 0.25, minWidth: 0 }}>

client/src/app/[locale]/(private-routes)/(customer)/search/SearchScreen.tsx

@@ -213,7 +213,7 @@ const CategorySelect: FunctionComponent<{ selectedId: number | null; onSelect: (
       {isLoading ? (
         <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)' }, gap: 1.5 }}>
           {[0, 1, 2, 3].map((key) => (
-            <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 2 }} />
+            <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
           ))}
         </Box>
       ) : isError ? (

client/src/app/[locale]/(private-routes)/(customer)/search/nurse/[nurseId]/page.tsx

@@ -355,7 +355,7 @@ function ReviewCard({ review }: { review: ReviewListItem }) {
   const t = useTranslations('reviews');
   const locale = useLocale();
   return (
-    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
       <Stack direction="row" sx={{ gap: 1, alignItems: 'center', mb: 0.5, flexWrap: 'wrap' }}>
         <RatingInput value={review.rating} readOnly size={16} ariaLabel={t('rating_label')} />
         <Typography variant="caption" sx={{ color: 'text.secondary', marginInlineStart: 'auto' }}>

client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx

@@ -29,7 +29,7 @@ const WalletInstallments: FunctionComponent = () => {
           <Skeleton variant="rounded" height={56} />
         </Stack>
       ) : isError ? (
-        <Paper elevation={0} sx={{ p: 3, borderRadius: 2, border: '1px solid', borderColor: 'divider', textAlign: 'center' }}>
+        <Paper elevation={0} sx={{ p: 3, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider', textAlign: 'center' }}>
           <Stack sx={{ gap: 1, alignItems: 'center' }}>
             <AppIcon icon="warning" size={36} color="var(--bal-warning)" />
             <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
@@ -71,7 +71,7 @@ function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
       {/* Outstanding-balance card — terracotta financial accent; contrast text is scheme-stable. */}
       <Paper
         elevation={0}
-        sx={{ p: 2.25, borderRadius: 3, backgroundColor: 'var(--bal-secondary)', color: 'var(--bal-secondary-contrast)' }}
+        sx={{ p: 2.25, borderRadius: 'var(--bal-radius-lg)', backgroundColor: 'var(--bal-secondary)', color: 'var(--bal-secondary-contrast)' }}
       >
         <Typography variant="caption" sx={{ opacity: 0.85 }}>
           {t('outstanding_balance')}

client/src/app/[locale]/(private-routes)/_chrome/ShellContentSkeleton.tsx

@@ -3,12 +3,12 @@ import Stack from '@mui/material/Stack';
 import SurfaceCard from '@/components/common/SurfaceCard';
 
 /**
- * The shared loading skeleton for the sidebar-shell route groups (`nurse`, `admin`, `partner`) — the
- * `TopBarAndSideBarLayout` chrome (top bar + sidebar) is already rendered by the enclosing `layout.tsx`
- * by the time this shows, so this only needs to shape the content area: a heading line + a short stack of
- * generic worklist/detail cards. A private (`_`-prefixed) folder — not a route.
+ * The shared loading skeleton for the nurse/admin/partner route groups. The `MobileShell` chrome
+ * (top bar + bottom nav) is already rendered by the enclosing `layout.tsx` by the time this shows,
+ * so this only shapes the content area: a heading line + a short stack of generic worklist cards.
+ * A private (`_`-prefixed) folder — not a route.
  */
-export default function SidebarShellSkeleton() {
+export default function ShellContentSkeleton() {
   return (
     <Stack sx={{ gap: 2 }}>
       <Skeleton variant="text" width={220} height={32} />

client/src/app/[locale]/(private-routes)/admin/AdminOverviewScreen.tsx

@@ -1,81 +1,63 @@
 'use client';
-import { useLocale, useTranslations } from 'next-intl';
-import { Box, Paper, Typography } from '@mui/material';
-import { AppIcon, AppLink } from '@/components';
-import { AdminPageHeader } from '@/components/admin';
+import { useTranslations } from 'next-intl';
+import { Stack } from '@mui/material';
+import { NavHubList, PageHeader } from '@/components';
+import type { NavHubItem } from '@/components';
 import { useAdminCapabilities } from '@/hooks';
 import { ROUTES } from '@/constants';
 
+interface ConsoleEntry extends NavHubItem {
+  /** Section this console belongs to — the same four groups the bottom nav carries. */
+  section: 'trust' | 'finance' | 'support' | 'system';
+  enabled: boolean;
+}
+
 /**
- * Admin overview landing (f15) — the backoffice home. Renders one **console card** per worklist the current
- * principal may act on, derived from `useAdminCapabilities()` (a UI hint; the server still enforces every
- * command's role scope). A `support` admin sees verification/tickets/alerts; a `finance` admin sees
- * payouts/config; only a `super_admin` sees roles. Each card deep-links into its console.
+ * Admin overview landing (f15) — the backoffice index. Every worklist the current principal may
+ * act on, grouped by the same four sections as the bottom nav, so the overview and the tabs agree
+ * on where a console lives. Gating comes from `useAdminCapabilities()` (a UI hint; the server
+ * still enforces every command's role scope): a `support` admin sees verification/tickets/alerts,
+ * a `finance` admin sees payouts/config, only a `super_admin` sees roles.
+ *
+ * The old 3-column card grid is gone — inside a phone-width frame it collapsed to a single column
+ * of oversized tiles carrying nothing but an icon and one word each.
  */
 export default function AdminOverviewScreen() {
   const t = useTranslations('admin');
+  const th = useTranslations('hub');
   const tNav = useTranslations('nav');
-  const locale = useLocale();
   const caps = useAdminCapabilities();
 
-  // `key` doubles as the `nav` i18n key for the card label.
-  const consoles: { key: string; route: string; icon: string; enabled: boolean }[] = [
-    { key: 'verification', route: ROUTES.ADMIN_VERIFICATION, icon: 'verification', enabled: caps.canVerify },
-    { key: 'tickets', route: ROUTES.ADMIN_TICKETS, icon: 'support', enabled: caps.canManageTickets },
-    { key: 'payouts', route: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', enabled: caps.canPayout },
-    { key: 'reviews', route: ROUTES.ADMIN_REVIEWS, icon: 'moderation', enabled: caps.canModerate },
-    { key: 'config', route: ROUTES.ADMIN_CONFIG, icon: 'config', enabled: caps.canConfig },
-    { key: 'holidays', route: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', enabled: caps.canConfig },
-    { key: 'alerts', route: ROUTES.ADMIN_ALERTS, icon: 'alerts', enabled: caps.canManageAlerts },
-    { key: 'audit', route: ROUTES.ADMIN_AUDIT, icon: 'audit', enabled: caps.canViewAudit },
-    { key: 'partners', route: ROUTES.ADMIN_PARTNERS, icon: 'partners', enabled: caps.canManagePartners },
-    { key: 'roles', route: ROUTES.ADMIN_ROLES, icon: 'roles', enabled: caps.canManageRoles },
-  ].filter((c) => c.enabled);
+  const consoles: ConsoleEntry[] = [
+    { section: 'trust', title: tNav('verification'), subtitle: th('admin_verification_sub'), path: ROUTES.ADMIN_VERIFICATION, icon: 'verification', enabled: caps.canVerify },
+    { section: 'trust', title: tNav('reviews'), subtitle: th('admin_reviews_sub'), path: ROUTES.ADMIN_REVIEWS, icon: 'moderation', enabled: caps.canModerate },
+    { section: 'finance', title: tNav('payouts'), subtitle: th('admin_payouts_sub'), path: ROUTES.ADMIN_PAYOUTS, icon: 'earnings', enabled: caps.canPayout },
+    { section: 'support', title: tNav('tickets'), subtitle: th('admin_tickets_sub'), path: ROUTES.ADMIN_TICKETS, icon: 'support', enabled: caps.canManageTickets },
+    { section: 'support', title: tNav('alerts'), subtitle: th('admin_alerts_sub'), path: ROUTES.ADMIN_ALERTS, icon: 'alerts', enabled: caps.canManageAlerts },
+    { section: 'system', title: tNav('config'), subtitle: th('admin_config_sub'), path: ROUTES.ADMIN_CONFIG, icon: 'config', enabled: caps.canConfig },
+    { section: 'system', title: tNav('holidays'), subtitle: th('admin_holidays_sub'), path: ROUTES.ADMIN_HOLIDAYS, icon: 'calendar', enabled: caps.canConfig },
+    { section: 'system', title: tNav('audit'), subtitle: th('admin_audit_sub'), path: ROUTES.ADMIN_AUDIT, icon: 'audit', enabled: caps.canViewAudit },
+    { section: 'system', title: tNav('partners'), subtitle: th('admin_partners_sub'), path: ROUTES.ADMIN_PARTNERS, icon: 'partners', enabled: caps.canManagePartners },
+    { section: 'system', title: tNav('users'), subtitle: th('admin_users_sub'), path: ROUTES.ADMIN_USERS, icon: 'users', enabled: caps.canManageRoles },
+    { section: 'system', title: tNav('roles'), subtitle: th('admin_roles_sub'), path: ROUTES.ADMIN_ROLES, icon: 'roles', enabled: caps.canManageRoles },
+  ];
+
+  const sections: Array<{ key: ConsoleEntry['section']; label: string }> = [
+    { key: 'trust', label: tNav('group_trust') },
+    { key: 'finance', label: tNav('group_finance') },
+    { key: 'support', label: tNav('group_support') },
+    { key: 'system', label: tNav('group_system') },
+  ];
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <AdminPageHeader title={t('overview_title')} subtitle={t('overview_subtitle')} />
+    <Stack sx={{ gap: 2.5 }}>
+      <PageHeader title={t('overview_title')} subtitle={t('overview_subtitle')} />
 
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' },
-          gap: 2,
-        }}
-      >
-        {consoles.map((c) => (
-          <AppLink
-            key={c.key}
-            to={`/${locale}${c.route}`}
-            color="inherit"
-            underline="none"
-            sx={{ display: 'block', height: '100%' }}
-          >
-            <Paper
-              elevation={0}
-              sx={{
-                p: 3,
-                height: '100%',
-                border: '1px solid',
-                borderColor: 'divider',
-                borderRadius: 2,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                gap: 1.5,
-                cursor: 'pointer',
-                transition: 'border-color 150ms ease, box-shadow 150ms ease',
-                '&:hover': { borderColor: 'primary.main', boxShadow: 3 },
-              }}
-            >
-              <AppIcon icon={c.icon} size={32} color="var(--bal-primary)" />
-              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-                {tNav(c.key)}
-              </Typography>
-            </Paper>
-          </AppLink>
-        ))}
-      </Box>
-    </Box>
+      {sections.map((section) => {
+        const items = consoles.filter((entry) => entry.section === section.key && entry.enabled);
+        if (items.length === 0) return null;
+        return <NavHubList key={section.key} title={section.label} items={items} />;
+      })}
+    </Stack>
   );
 }

client/src/app/[locale]/(private-routes)/admin/_hub/AdminGroupHub.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { FunctionComponent, ReactNode } from 'react';
+import { Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { EmptyState, NavHubList, PageHeader } from '@/components';
+import type { NavHubItem } from '@/components';
+
+export interface AdminGroupConsole extends NavHubItem {
+  /** Capability gate for this console — a hidden row is one the current admin role can't act on. */
+  enabled: boolean;
+}
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  consoles: Array<AdminGroupConsole>;
+  /** Rendered below the console list (the system group's settings + sign-out). */
+  children?: ReactNode;
+}
+
+/**
+ * The body every admin group-root page shares: a header, the capability-filtered consoles in that
+ * group, and an optional tail. Gating stays per-console and is still only a UI hint — the server
+ * authorizes every command regardless of what the nav shows.
+ * A private (`_`-prefixed) folder, so this is not itself a route.
+ * @component AdminGroupHub
+ */
+const AdminGroupHub: FunctionComponent<Props> = ({ title, subtitle, consoles, children }) => {
+  const t = useTranslations('hub');
+  const permitted = consoles.filter((console_) => console_.enabled);
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={title} subtitle={subtitle} />
+      {permitted.length > 0 ? (
+        <NavHubList items={permitted} />
+      ) : (
+        <EmptyState icon="lock" title={t('admin_group_empty_title')} body={t('admin_group_empty_body')} />
+      )}
+      {children}
+    </Stack>
+  );
+};
+
+export default AdminGroupHub;

client/src/app/[locale]/(private-routes)/admin/audit/page.tsx

@@ -71,7 +71,7 @@ function AdminAuditPageInner() {
 
       <Stack
         direction="row"
-        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
       >
         <TextField
           size="small"

client/src/app/[locale]/(private-routes)/admin/config/page.tsx

@@ -229,7 +229,7 @@ function ConfigHistoryDrawer({ configKey, onClose }: { configKey: string | null;
       ) : (
         <Stack sx={{ gap: 1.5 }}>
           {history.data?.items.map((change) => (
-            <Box key={change.id} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 1.5 }}>
+            <Box key={change.id} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 1.5 }}>
               <Stack direction="row" sx={{ alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
                 <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 700 }}>
                   {t('cfg_history_change_old', { old: change.oldValue ?? '—' })}

client/src/app/[locale]/(private-routes)/admin/finance/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { ROUTES } from '@/constants';
+import { useAdminCapabilities } from '@/hooks';
+import AdminGroupHub from '../_hub/AdminGroupHub';
+
+/** «مالی» group root — the weekly payout dashboard. */
+export default function AdminFinancePage() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+  const caps = useAdminCapabilities();
+
+  return (
+    <AdminGroupHub
+      title={tn('group_finance')}
+      subtitle={t('admin_finance_subtitle')}
+      consoles={[
+        {
+          title: tn('payouts'),
+          subtitle: t('admin_payouts_sub'),
+          icon: 'earnings',
+          path: ROUTES.ADMIN_PAYOUTS,
+          enabled: caps.canPayout,
+        },
+      ]}
+    />
+  );
+}

client/src/app/[locale]/(private-routes)/admin/holidays/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { Suspense, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import {
   Box,
@@ -14,9 +15,8 @@ import {
   Skeleton,
   Stack,
   Switch,
-  TextField,
 } from '@mui/material';
-import { AppButton, AppLoading, JalaliDateField } from '@/components';
+import { AppButton, AppLoading, RhfControlGroup, RhfJalaliDateField, RhfTextField } from '@/components';
 import { AdminDataTable, AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, type AdminTableColumn } from '@/components/admin';
 import { formatShamsiDate } from '@/utils';
 import { useAdminCapabilities, useAdminListState } from '@/hooks';
@@ -138,19 +138,20 @@ function HolidayDialog({ holiday, onClose }: { holiday: Holiday | null; onClose:
   const t = useTranslations('admin');
   const { enqueueSnackbar } = useSnackbar();
   const upsert = useUpsertHoliday();
-  const [form, setForm] = useState<HolidayInput>(() => ({
-    holidayDate: holiday?.holidayDate?.slice(0, 10) ?? todayLocalIso(),
-    nameFa: holiday?.nameFa ?? '',
-    type: holiday?.type ?? 'official',
-    isBankClosed: holiday?.isBankClosed ?? true,
-  }));
+  const form = useForm<HolidayInput>({
+    mode: 'onTouched',
+    defaultValues: {
+      holidayDate: holiday?.holidayDate?.slice(0, 10) ?? todayLocalIso(),
+      nameFa: holiday?.nameFa ?? '',
+      type: holiday?.type ?? 'official',
+      isBankClosed: holiday?.isBankClosed ?? true,
+    },
+  });
+  const { handleSubmit, formState } = form;
 
-  const valid = form.holidayDate.length > 0 && form.nameFa.trim().length > 0;
-
-  const onSave = () => {
-    if (!valid) return;
+  const onSave = (values: HolidayInput) =>
     upsert.mutate(
-      { ...form, nameFa: form.nameFa.trim() },
+      { ...values, nameFa: values.nameFa.trim() },
       {
         onSuccess: () => {
           enqueueSnackbar(t('hol_saved'), { variant: 'success' });
@@ -158,50 +159,59 @@ function HolidayDialog({ holiday, onClose }: { holiday: Holiday | null; onClose:
         },
       },
     );
-  };
 
   return (
     <Dialog open onClose={upsert.isPending ? undefined : onClose} fullWidth maxWidth="xs">
       <DialogTitle sx={{ fontWeight: 800 }}>{holiday ? t('hol_edit') : t('hol_add')}</DialogTitle>
-      <DialogContent>
-        <Stack sx={{ gap: 2, mt: 1 }}>
-          <JalaliDateField
-            label={t('hol_col_date')}
-            value={form.holidayDate || null}
-            onChange={(iso) => setForm((f) => ({ ...f, holidayDate: iso }))}
-            disabled={!!holiday}
-          />
-          <TextField
-            label={t('hol_name_fa')}
-            value={form.nameFa}
-            onChange={(e) => setForm((f) => ({ ...f, nameFa: e.target.value }))}
-          />
-          <TextField
-            select
-            label={t('hol_col_type')}
-            value={form.type}
-            onChange={(e) => setForm((f) => ({ ...f, type: e.target.value as HolidayType }))}
+      <FormProvider {...form}>
+        <DialogContent>
+          {/* A real <form> so Enter submits from any field; the footer button (outside DialogContent)
+              calls the same handler directly rather than relying on cross-element form association. */}
+          <Stack component="form" noValidate onSubmit={handleSubmit(onSave)} sx={{ gap: 2, mt: 1 }}>
+            <RhfJalaliDateField<HolidayInput>
+              name="holidayDate"
+              label={t('hol_col_date')}
+              rules={{ validate: (value) => String(value ?? '').length > 0 }}
+              disabled={!!holiday}
+            />
+            <RhfTextField<HolidayInput>
+              name="nameFa"
+              label={t('hol_name_fa')}
+              rules={{ validate: (value) => String(value ?? '').trim().length > 0 }}
+            />
+            <RhfTextField<HolidayInput> name="type" select label={t('hol_col_type')}>
+              {HOLIDAY_TYPES.map((ty) => (
+                <MenuItem key={ty} value={ty}>
+                  {t(`htype_${ty}`)}
+                </MenuItem>
+              ))}
+            </RhfTextField>
+            <RhfControlGroup<HolidayInput> name="isBankClosed">
+              {({ field }) => (
+                <FormControlLabel
+                  control={
+                    <Switch checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />
+                  }
+                  label={t('hol_bank_hint')}
+                />
+              )}
+            </RhfControlGroup>
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSave)}
+            disabled={!formState.isValid || upsert.isPending}
           >
-            {HOLIDAY_TYPES.map((ty) => (
-              <MenuItem key={ty} value={ty}>
-                {t(`htype_${ty}`)}
-              </MenuItem>
-            ))}
-          </TextField>
-          <FormControlLabel
-            control={<Switch checked={form.isBankClosed} onChange={(e) => setForm((f) => ({ ...f, isBankClosed: e.target.checked }))} />}
-            label={t('hol_bank_hint')}
-          />
-        </Stack>
-      </DialogContent>
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={upsert.isPending}>
-          {t('cancel')}
-        </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || upsert.isPending}>
-          {upsert.isPending ? t('saving') : t('save')}
-        </AppButton>
-      </DialogActions>
+            {upsert.isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
     </Dialog>
   );
 }

client/src/app/[locale]/(private-routes)/admin/loading.tsx

@@ -1,5 +1,5 @@
-import SidebarShellSkeleton from '../_chrome/SidebarShellSkeleton';
+import ShellContentSkeleton from '../_chrome/ShellContentSkeleton';
 
 export default function Loading() {
-  return <SidebarShellSkeleton />;
+  return <ShellContentSkeleton />;
 }

client/src/app/[locale]/(private-routes)/admin/partners/[id]/page.tsx

@@ -123,7 +123,7 @@ export default function AdminPartnerCenterDetailPage() {
         meta={<StatusChip status={CENTER_STATE_KIND[data.onboardingState]} label={t(`center_state_${data.onboardingState}`)} />}
       />
 
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack divider={<Divider flexItem />} sx={{ gap: 1.25 }}>
           <DetailRow label={t('partner_legal_type')}>{data.legalEntityType || '—'}</DetailRow>
           <DetailRow label={t('partner_permit')}>{data.mohEstablishmentPermitNo || '—'}</DetailRow>
@@ -174,7 +174,7 @@ export default function AdminPartnerCenterDetailPage() {
         {roster.isLoading ? (
           <Skeleton variant="rounded" height={120} />
         ) : (
-          <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, overflow: 'hidden' }}>
+          <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', overflow: 'hidden' }}>
             <Stack divider={<Divider />}>
               {(roster.data ?? []).map((nurse) => (
                 <Stack

client/src/app/[locale]/(private-routes)/admin/partners/page.tsx

@@ -2,6 +2,7 @@
 import { Suspense, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import {
   Box,
@@ -13,10 +14,9 @@ import {
   Skeleton,
   Stack,
   Switch,
-  TextField,
   Typography,
 } from '@mui/material';
-import { AppButton, AppLoading, StatusChip } from '@/components';
+import { AppButton, AppLoading, RhfControlGroup, RhfTextField, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import {
   AdminDataTable,
@@ -183,37 +183,30 @@ export function PartnerCenterFormDialog({ center, onClose }: { center: PartnerCe
   const create = useCreatePartnerCenter();
   const update = useUpdatePartnerCenter(center?.id ?? 0);
   const mutation = isEdit ? update : create;
-  const [form, setForm] = useState<CenterFormState>(() => initialForm(center));
+
+  const form = useForm<CenterFormState>({ mode: 'onTouched', defaultValues: initialForm(center) });
+  const { control, handleSubmit, formState } = form;
+  const isMerchantOfRecord = useWatch({ control, name: 'isMerchantOfRecord' });
+  const adminUser = useWatch({ control, name: 'adminUser' });
 
   // Edit mode: the center already has an adminUserId (a plain number) — resolve it to a name so the picker
-  // opens pre-filled with a person, never a bare id (3.2). Derived in render (never synced into state via an
-  // effect): once the admin actually picks someone, `form.adminUser` wins over the resolved existing one.
+  // opens pre-filled with a person, never a bare id (3.2). Derived in render (never synced into form state):
+  // once the admin actually picks someone, the form value wins over the resolved existing one.
   const existingAdminId = center?.adminUserId ?? null;
   const existingAdminLookup = useUserLookup(existingAdminId != null ? [existingAdminId] : []);
   const resolvedExistingAdmin = existingAdminId != null ? (existingAdminLookup.data?.get(existingAdminId) ?? null) : null;
-  const displayedAdminUser = form.adminUser !== undefined ? form.adminUser : resolvedExistingAdmin;
+  const displayedAdminUser = adminUser !== undefined ? adminUser : resolvedExistingAdmin;
 
-  const set = <K extends keyof CenterFormState>(key: K, value: CenterFormState[K]) =>
-    setForm((f) => ({ ...f, [key]: value }));
-
-  const commission = Number(form.commissionRate);
-  const commissionValid = form.commissionRate.trim() !== '' && Number.isFinite(commission) && commission >= 0 && commission < 1;
-  // On edit a blank IBAN is allowed (it keeps the stored value); on create an MoR center must supply one.
-  const ibanValid = !form.isMerchantOfRecord || isEdit || form.settlementIban.trim() !== '';
-  const valid =
-    form.name.trim() !== '' && form.mohEstablishmentPermitNo.trim() !== '' && commissionValid && ibanValid;
-
-  const onSave = () => {
-    if (!valid) return;
+  const onSave = (values: CenterFormState) => {
     const input: PartnerCenterInput = {
-      name: form.name.trim(),
-      legalEntityType: form.legalEntityType.trim(),
-      mohEstablishmentPermitNo: form.mohEstablishmentPermitNo.trim(),
-      technicalDirectorLicenseNo: form.technicalDirectorLicenseNo.trim() || null,
-      enamadCode: form.enamadCode.trim() || null,
-      settlementIban: form.settlementIban.trim() || null,
-      isMerchantOfRecord: form.isMerchantOfRecord,
-      commissionRate: commission,
+      name: values.name.trim(),
+      legalEntityType: values.legalEntityType.trim(),
+      mohEstablishmentPermitNo: values.mohEstablishmentPermitNo.trim(),
+      technicalDirectorLicenseNo: values.technicalDirectorLicenseNo.trim() || null,
+      enamadCode: values.enamadCode.trim() || null,
+      settlementIban: values.settlementIban.trim() || null,
+      isMerchantOfRecord: values.isMerchantOfRecord,
+      commissionRate: Number(values.commissionRate),
       adminUserId: displayedAdminUser?.id ?? null,
     };
     mutation.mutate(input, {
@@ -227,67 +220,95 @@ export function PartnerCenterFormDialog({ center, onClose }: { center: PartnerCe
   return (
     <Dialog open onClose={mutation.isPending ? undefined : onClose} fullWidth maxWidth="sm">
       <DialogTitle sx={{ fontWeight: 800 }}>{isEdit ? t('partner_edit') : t('partner_create')}</DialogTitle>
-      <DialogContent>
-        <Stack sx={{ gap: 2, mt: 1 }}>
-          <TextField label={t('partner_name')} value={form.name} onChange={(e) => set('name', e.target.value)} />
-          <TextField
-            label={t('partner_legal_type')}
-            value={form.legalEntityType}
-            onChange={(e) => set('legalEntityType', e.target.value)}
-          />
-          <TextField
-            label={t('partner_permit')}
-            value={form.mohEstablishmentPermitNo}
-            onChange={(e) => set('mohEstablishmentPermitNo', e.target.value)}
-          />
-          <TextField
-            label={t('partner_tech_director_license')}
-            value={form.technicalDirectorLicenseNo}
-            onChange={(e) => set('technicalDirectorLicenseNo', e.target.value)}
-          />
-          <TextField label={t('partner_enamad')} value={form.enamadCode} onChange={(e) => set('enamadCode', e.target.value)} />
-          <TextField
-            label={t('partner_iban')}
-            value={form.settlementIban}
-            onChange={(e) => set('settlementIban', e.target.value)}
-            helperText={t('partner_iban_write_hint')}
-            placeholder={center?.settlementIbanMasked ?? undefined}
-            slotProps={{ htmlInput: { dir: 'ltr' } }}
-          />
-          <Box>
-            <FormControlLabel
-              control={<Switch checked={form.isMerchantOfRecord} onChange={(e) => set('isMerchantOfRecord', e.target.checked)} />}
-              label={t('partner_is_mor')}
+      <FormProvider {...form}>
+        <DialogContent>
+          {/* A real <form> so Enter submits from any field; the footer button (outside DialogContent)
+              calls the same handler directly rather than relying on cross-element form association. */}
+          <Stack component="form" noValidate onSubmit={handleSubmit(onSave)} sx={{ gap: 2, mt: 1 }}>
+            <RhfTextField<CenterFormState>
+              name="name"
+              label={t('partner_name')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
             />
-            <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
-              {t('partner_is_mor_hint')}
-            </Typography>
-          </Box>
-          <TextField
-            type="number"
-            label={t('partner_commission')}
-            value={form.commissionRate}
-            onChange={(e) => set('commissionRate', e.target.value)}
-            slotProps={{ htmlInput: { min: 0, max: 0.999, step: 0.01 } }}
-          />
-          <UserPicker
-            value={displayedAdminUser}
-            onChange={(u) => set('adminUser', u)}
-            label={t('partner_admin_user')}
-            placeholder={t('user_picker_search_ph')}
-            noOptionsText={t('user_picker_no_options')}
-            loadingText={t('user_picker_loading')}
-          />
-        </Stack>
-      </DialogContent>
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending}>
-          {t('cancel')}
-        </AppButton>
-        <AppButton variant="contained" color="primary" onClick={onSave} disabled={!valid || mutation.isPending}>
-          {mutation.isPending ? t('saving') : t('save')}
-        </AppButton>
-      </DialogActions>
+            <RhfTextField<CenterFormState> name="legalEntityType" label={t('partner_legal_type')} />
+            <RhfTextField<CenterFormState>
+              name="mohEstablishmentPermitNo"
+              label={t('partner_permit')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
+            />
+            <RhfTextField<CenterFormState>
+              name="technicalDirectorLicenseNo"
+              label={t('partner_tech_director_license')}
+            />
+            <RhfTextField<CenterFormState> name="enamadCode" label={t('partner_enamad')} />
+            <RhfTextField<CenterFormState>
+              name="settlementIban"
+              label={t('partner_iban')}
+              helperText={t('partner_iban_write_hint')}
+              placeholder={center?.settlementIbanMasked ?? undefined}
+              // On edit a blank IBAN keeps the stored value; on create an MoR center must supply one.
+              rules={{ validate: (value) => !isMerchantOfRecord || isEdit || String(value ?? '').trim() !== '' }}
+              slotProps={{ htmlInput: { dir: 'ltr' } }}
+            />
+            <Box>
+              <RhfControlGroup<CenterFormState> name="isMerchantOfRecord">
+                {({ field }) => (
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={Boolean(field.value)}
+                        onChange={(event) => field.onChange(event.target.checked)}
+                      />
+                    }
+                    label={t('partner_is_mor')}
+                  />
+                )}
+              </RhfControlGroup>
+              <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
+                {t('partner_is_mor_hint')}
+              </Typography>
+            </Box>
+            <RhfTextField<CenterFormState>
+              name="commissionRate"
+              type="number"
+              label={t('partner_commission')}
+              rules={{
+                validate: (value) => {
+                  const raw = String(value ?? '').trim();
+                  const rate = Number(raw);
+                  return raw !== '' && Number.isFinite(rate) && rate >= 0 && rate < 1;
+                },
+              }}
+              slotProps={{ htmlInput: { min: 0, max: 0.999, step: 0.01 } }}
+            />
+            <RhfControlGroup<CenterFormState> name="adminUser">
+              {({ field }) => (
+                <UserPicker
+                  value={displayedAdminUser}
+                  onChange={field.onChange}
+                  label={t('partner_admin_user')}
+                  placeholder={t('user_picker_search_ph')}
+                  noOptionsText={t('user_picker_no_options')}
+                  loadingText={t('user_picker_loading')}
+                />
+              )}
+            </RhfControlGroup>
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={mutation.isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSave)}
+            disabled={!formState.isValid || mutation.isPending}
+          >
+            {mutation.isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
     </Dialog>
   );
 }

client/src/app/[locale]/(private-routes)/admin/payouts/[batchId]/page.tsx

@@ -83,7 +83,7 @@ function AdminPayoutBatchDetailScreen() {
         <AdminEmptyState icon="wallet" title={t('payout_empty')} />
       ) : (
         <>
-          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <Stack sx={{ gap: 1.5 }}>
               <StatusChip
                 status={BATCH_STATUS_KIND[data.batch.status]}
@@ -180,7 +180,7 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
   };
 
   return (
-    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
       <Stack sx={{ gap: 1.25 }}>
         <Stack
           direction="row"
@@ -217,7 +217,7 @@ const PayoutRowCard: FunctionComponent<{ row: AdminPayoutRow; batchId: number; c
           <Box
             sx={{
               p: 1.25,
-              borderRadius: 2,
+              borderRadius: 'var(--bal-radius-md)',
               border: '1px solid',
               borderColor: 'divider',
               borderInlineStart: '3px solid',

client/src/app/[locale]/(private-routes)/admin/payouts/page.tsx

@@ -283,7 +283,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
                   —
                 </Typography>
               ) : (
-                <Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+                <Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
                   {result.eligible.map((n) => (
                     <Stack key={n.nurseId} sx={{ p: 1.5, gap: 0.5 }}>
                       <Stack
@@ -317,7 +317,7 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
                 <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
                   {t('payout_skipped')}
                 </Typography>
-                <Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+                <Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
                   {result.skipped.map((n) => (
                     <Stack
                       key={n.nurseId}

client/src/app/[locale]/(private-routes)/admin/reviews/page.tsx

@@ -166,7 +166,7 @@ function ModerationCard({
   return (
     <Paper
       elevation={0}
-      sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}
+      sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', display: 'flex', flexDirection: 'column', gap: 1.5 }}
     >
       <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
         <RatingInput value={item.rating} readOnly size={20} ariaLabel={t('mod_col_rating')} />

client/src/app/[locale]/(private-routes)/admin/support/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { ROUTES } from '@/constants';
+import { useAdminCapabilities } from '@/hooks';
+import AdminGroupHub from '../_hub/AdminGroupHub';
+
+/** «پشتیبانی» group root — the global ticket queue and the internal alert worklist. */
+export default function AdminSupportPage() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+  const caps = useAdminCapabilities();
+
+  return (
+    <AdminGroupHub
+      title={tn('group_support')}
+      subtitle={t('admin_support_subtitle')}
+      consoles={[
+        {
+          title: tn('tickets'),
+          subtitle: t('admin_tickets_sub'),
+          icon: 'support',
+          path: ROUTES.ADMIN_TICKETS,
+          enabled: caps.canManageTickets,
+        },
+        {
+          title: tn('alerts'),
+          subtitle: t('admin_alerts_sub'),
+          icon: 'alerts',
+          path: ROUTES.ADMIN_ALERTS,
+          enabled: caps.canManageAlerts,
+        },
+      ]}
+    />
+  );
+}

client/src/app/[locale]/(private-routes)/admin/system/page.tsx

@@ -0,0 +1,88 @@
+'use client';
+import { Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { ProfileSummary, SurfaceCard } from '@/components';
+import { SettingsPanel, SignOutRow } from '@/components/settings';
+import { ROUTES } from '@/constants';
+import { useAdminCapabilities } from '@/hooks';
+import { useMe } from '@/services/auth';
+import AdminGroupHub from '../_hub/AdminGroupHub';
+
+/**
+ * «سیستم» group root — platform configuration plus the identity/appearance/sign-out block that
+ * used to live in the top bar and drawer footer. Always reachable (even for an admin role with no
+ * system console permitted), because it is the only way out of the app.
+ */
+export default function AdminSystemPage() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+  const ta = useTranslations('admin');
+  const caps = useAdminCapabilities();
+  const { data: me } = useMe();
+
+  const primaryRoleCode = caps.roles[0];
+
+  return (
+    <AdminGroupHub
+      title={tn('group_system')}
+      subtitle={t('admin_system_subtitle')}
+      consoles={[
+        {
+          title: tn('config'),
+          subtitle: t('admin_config_sub'),
+          icon: 'config',
+          path: ROUTES.ADMIN_CONFIG,
+          enabled: caps.canConfig,
+        },
+        {
+          title: tn('holidays'),
+          subtitle: t('admin_holidays_sub'),
+          icon: 'calendar',
+          path: ROUTES.ADMIN_HOLIDAYS,
+          enabled: caps.canConfig,
+        },
+        {
+          title: tn('audit'),
+          subtitle: t('admin_audit_sub'),
+          icon: 'audit',
+          path: ROUTES.ADMIN_AUDIT,
+          enabled: caps.canViewAudit,
+        },
+        {
+          title: tn('partners'),
+          subtitle: t('admin_partners_sub'),
+          icon: 'partners',
+          path: ROUTES.ADMIN_PARTNERS,
+          enabled: caps.canManagePartners,
+        },
+        {
+          title: tn('users'),
+          subtitle: t('admin_users_sub'),
+          icon: 'users',
+          path: ROUTES.ADMIN_USERS,
+          enabled: caps.canManageRoles,
+        },
+        {
+          title: tn('roles'),
+          subtitle: t('admin_roles_sub'),
+          icon: 'roles',
+          path: ROUTES.ADMIN_ROLES,
+          enabled: caps.canManageRoles,
+        },
+      ]}
+    >
+      <Stack sx={{ gap: 2 }}>
+        <SurfaceCard>
+          <ProfileSummary
+            displayName={me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : ''}
+            phone={me?.phone}
+            roleLabel={primaryRoleCode ? ta(`role_${primaryRoleCode}`) : undefined}
+            loading={!me}
+          />
+        </SurfaceCard>
+        <SettingsPanel />
+        <SignOutRow />
+      </Stack>
+    </AdminGroupHub>
+  );
+}

client/src/app/[locale]/(private-routes)/admin/tickets/[id]/page.tsx

@@ -167,7 +167,7 @@ export default function AdminTicketThreadPage() {
         <AdminEmptyState icon="support" title={t('ticket_empty')} />
       ) : (
         <>
-          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <PageHeader
               title={t('ticket_thread_title', { ref: detail.referenceCode })}
               subtitle={detail.subject ?? undefined}
@@ -202,7 +202,7 @@ export default function AdminTicketThreadPage() {
                   <Paper
                     id={REFUND_PANEL_ID}
                     elevation={0}
-                    sx={{ mt: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+                    sx={{ mt: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
                   >
                     <RefundPanel bookingId={detail.bookingId as number} ticketId={detail.id} />
                   </Paper>
@@ -229,7 +229,7 @@ export default function AdminTicketThreadPage() {
                 p: 2,
                 border: '1px solid',
                 borderColor: isInternal ? 'var(--bal-warning)' : 'divider',
-                borderRadius: 2,
+                borderRadius: 'var(--bal-radius-md)',
                 bgcolor: isInternal ? 'var(--bal-warning-soft)' : 'background.paper',
               }}
             >

client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx

@@ -112,7 +112,7 @@ function AdminTicketsQueue() {
 
       <Stack
         direction="row"
-        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
       >
         <TextField
           select

client/src/app/[locale]/(private-routes)/admin/trust/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { ROUTES } from '@/constants';
+import { useAdminCapabilities } from '@/hooks';
+import AdminGroupHub from '../_hub/AdminGroupHub';
+
+/** «اعتماد» group root — the verification queue and review moderation. */
+export default function AdminTrustPage() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+  const caps = useAdminCapabilities();
+
+  return (
+    <AdminGroupHub
+      title={tn('group_trust')}
+      subtitle={t('admin_trust_subtitle')}
+      consoles={[
+        {
+          title: tn('verification'),
+          subtitle: t('admin_verification_sub'),
+          icon: 'verification',
+          path: ROUTES.ADMIN_VERIFICATION,
+          enabled: caps.canVerify,
+        },
+        {
+          title: tn('reviews'),
+          subtitle: t('admin_reviews_sub'),
+          icon: 'moderation',
+          path: ROUTES.ADMIN_REVIEWS,
+          enabled: caps.canModerate,
+        },
+      ]}
+    />
+  );
+}

client/src/app/[locale]/(private-routes)/admin/verification/[nurseId]/page.tsx

@@ -2,6 +2,7 @@
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import {
   Box,
@@ -12,10 +13,9 @@ import {
   DialogTitle,
   Skeleton,
   Stack,
-  TextField,
   Typography,
 } from '@mui/material';
-import { AppButton, AppLoading, JalaliDateField, PageHeader, StatusChip } from '@/components';
+import { AppButton, AppLoading, PageHeader, RhfJalaliDateField, RhfTextField, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import { AdminEmptyState, AdminErrorState, ConfirmDialog, DocumentViewer } from '@/components/admin';
 import { ROUTES, adminVerificationCasePath } from '@/constants';
@@ -182,7 +182,7 @@ function AdminVerificationCaseScreen() {
         <AdminEmptyState icon="verified" title={t('ver_empty')} />
       ) : (
         <>
-          <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 2 }}>
+          <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 2 }}>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t('ver_identity_name')}
             </Typography>
@@ -207,7 +207,7 @@ function AdminVerificationCaseScreen() {
             <Stack sx={{ gap: 1.5 }}>
               <Typography variant="h6">{t('ver_credentials_title')}</Typography>
               {data.credentials.map((cred) => (
-                <Box key={cred.id} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 1.75 }}>
+                <Box key={cred.id} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 1.75 }}>
                   <Stack
                     direction="row"
                     sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}
@@ -325,7 +325,7 @@ function StepCard({
   };
 
   return (
-    <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 2 }}>
+    <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 2 }}>
       <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
         <Typography variant="subtitle1" sx={{ fontWeight: 700, flexGrow: 1 }}>
           {t(`step_${step.code}`)}
@@ -398,6 +398,14 @@ function StepCard({
 
 /** The structured credential form recorded on approving a credential-bearing step. `criminal_record`
  * requires an expiry date; `credentialNumber` is accepted as input and never echoed back. */
+interface CredentialDecisionValues {
+  credentialNumber: string;
+  holderName: string;
+  issuingAuthority: string;
+  issuedAt: string;
+  expiresAt: string;
+}
+
 function CredentialDialog({
   step,
   nurseVerificationId,
@@ -410,28 +418,26 @@ function CredentialDialog({
   const t = useTranslations('admin');
   const { enqueueSnackbar } = useSnackbar();
   const decide = useDecideStep();
-  const [credentialNumber, setCredentialNumber] = useState('');
-  const [holderName, setHolderName] = useState('');
-  const [issuingAuthority, setIssuingAuthority] = useState('');
-  const [issuedAt, setIssuedAt] = useState('');
-  const [expiresAt, setExpiresAt] = useState('');
 
   const expiryRequired = step.code === 'criminal_record';
-  const expiryMissing = expiryRequired && expiresAt.trim().length === 0;
+  const form = useForm<CredentialDecisionValues>({
+    mode: 'onTouched',
+    defaultValues: { credentialNumber: '', holderName: '', issuingAuthority: '', issuedAt: '', expiresAt: '' },
+  });
+  const { handleSubmit, formState } = form;
 
-  const onSubmit = () => {
-    if (expiryMissing) return;
+  const onSubmit = (values: CredentialDecisionValues) =>
     decide.mutate(
       {
         stepId: step.id,
         nurseVerificationId,
         input: {
           approve: true,
-          credentialNumber: credentialNumber.trim() || undefined,
-          holderName: holderName.trim() || undefined,
-          issuingAuthority: issuingAuthority.trim() || undefined,
-          issuedAt: issuedAt || undefined,
-          expiresAt: expiresAt || undefined,
+          credentialNumber: values.credentialNumber.trim() || undefined,
+          holderName: values.holderName.trim() || undefined,
+          issuingAuthority: values.issuingAuthority.trim() || undefined,
+          issuedAt: values.issuedAt || undefined,
+          expiresAt: values.expiresAt || undefined,
         },
       },
       {
@@ -441,58 +447,58 @@ function CredentialDialog({
         },
       },
     );
-  };
 
   return (
     <Dialog open onClose={decide.isPending ? undefined : onClose} fullWidth maxWidth="sm">
       <DialogTitle sx={{ fontWeight: 800 }}>{t('ver_credential_title')}</DialogTitle>
-      <DialogContent>
-        <Stack sx={{ gap: 2, mt: 1 }}>
-          <TextField
-            fullWidth
-            autoFocus
-            label={t('ver_credential_number')}
-            value={credentialNumber}
-            onChange={(e) => setCredentialNumber(e.target.value)}
-          />
-          <TextField
-            fullWidth
-            label={t('ver_holder_name')}
-            helperText={t('ver_holder_hint')}
-            value={holderName}
-            onChange={(e) => setHolderName(e.target.value)}
-          />
-          <TextField
-            fullWidth
-            label={t('ver_issuing_authority')}
-            value={issuingAuthority}
-            onChange={(e) => setIssuingAuthority(e.target.value)}
-          />
-          <JalaliDateField fullWidth label={t('ver_issued_at')} value={issuedAt || null} onChange={setIssuedAt} />
-          <JalaliDateField
-            fullWidth
-            label={t('ver_expires_at')}
-            value={expiresAt || null}
-            onChange={setExpiresAt}
-            required={expiryRequired}
-            error={expiryMissing}
-            helperText={expiryMissing ? t('ver_expiry_required') : undefined}
-          />
-        </Stack>
-      </DialogContent>
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending}>
-          {t('cancel')}
-        </AppButton>
-        <AppButton
-          variant="contained"
-          color="primary"
-          onClick={onSubmit}
-          disabled={decide.isPending || expiryMissing}
-        >
-          {decide.isPending ? t('saving') : t('save')}
-        </AppButton>
-      </DialogActions>
+      <FormProvider {...form}>
+        <DialogContent>
+          {/* A real <form> so Enter submits from any field; the footer button (outside DialogContent)
+              calls the same handler directly rather than relying on cross-element form association. */}
+          <Stack component="form" noValidate onSubmit={handleSubmit(onSubmit)} sx={{ gap: 2, mt: 1 }}>
+            <RhfTextField<CredentialDecisionValues>
+              name="credentialNumber"
+              fullWidth
+              autoFocus
+              label={t('ver_credential_number')}
+            />
+            <RhfTextField<CredentialDecisionValues>
+              name="holderName"
+              fullWidth
+              label={t('ver_holder_name')}
+              helperText={t('ver_holder_hint')}
+            />
+            <RhfTextField<CredentialDecisionValues>
+              name="issuingAuthority"
+              fullWidth
+              label={t('ver_issuing_authority')}
+            />
+            <RhfJalaliDateField<CredentialDecisionValues> name="issuedAt" fullWidth label={t('ver_issued_at')} />
+            <RhfJalaliDateField<CredentialDecisionValues>
+              name="expiresAt"
+              fullWidth
+              label={t('ver_expires_at')}
+              required={expiryRequired}
+              rules={{
+                validate: (value) => !expiryRequired || String(value ?? '').trim().length > 0 || t('ver_expiry_required'),
+              }}
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={decide.isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSubmit)}
+            disabled={decide.isPending || !formState.isValid}
+          >
+            {decide.isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
     </Dialog>
   );
 }

client/src/app/[locale]/(private-routes)/admin/verification/page.tsx

@@ -174,7 +174,7 @@ function AdminVerificationQueueScreen() {
 
       <Stack
         direction="row"
-        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
       >
         <TextField
           size="small"

client/src/app/[locale]/(private-routes)/nurse/NurseDashboardScreen.tsx

@@ -1,96 +1,103 @@
 'use client';
+import { ReactNode } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { Avatar, Box, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
 import {
+  AccentCard,
   AppButton,
-  AppIcon,
   AppLink,
   CountdownTimer,
   EmptyState,
   ErrorState,
   Money,
+  PageHeader,
   SurfaceCard,
-  TrustBadge,
 } from '@/components';
 import { ROUTES } from '@/constants';
 import { formatRelativeTime, formatShamsiDate, localeTag, parseIrr } from '@/utils';
-import { useMe } from '@/services/auth';
 import { useNurseRequestInbox } from '@/services/bookingRequests';
 import { useTodaySessions } from '@/services/bookings';
 import { useNurseEarningsBalance } from '@/services/payouts';
-import { useUnreadCount } from '@/services/notifications';
-import { useVerificationStatus } from '@/services/verification';
-import { ownBadgeState } from '@/services/verification/types';
 import { coarseResponseLabel } from '@/services/bookingRequests/format';
 import DashboardActivationSlot from './DashboardActivationSlot';
 
-const DASHBOARD_MAX_WIDTH = 960;
 /** The pill's urgency tiers (ui-phase-7 §3.4): teal >2h · amber <2h · terracotta <30min. */
 const URGENT_THRESHOLD_SECONDS = 30 * 60;
 const WARN_THRESHOLD_SECONDS = 2 * 60 * 60;
 
 /**
- * The nurse "امروز" dashboard (ui-phase-7 §3.1) — the operational home replacing the `PlaceholderScreen`.
- * Pure assembly: every widget reads an already-cached query. Order matters — the pending-requests strip
- * is the most time-critical thing a nurse can miss, so it sits above the earnings snapshot.
+ * The nurse «امروز» home — the first bottom-nav destination.
+ *
+ * Rebuilt for the phone-width frame. The previous version stacked five same-weight cards, each
+ * repeating its own icon + bold heading + inline "see all" button; at 480px the buttons wrapped
+ * mid-word, the countdown collided with the request title, and nothing on the screen looked more
+ * important than anything else. This version gives the page one visual hierarchy: exactly one hero
+ * action (the next visit), then sections introduced by a plain label with a text link instead of a
+ * competing button.
+ *
+ * The greeting/identity strip that used to sit above all of it is gone: it spent the most valuable
+ * row on the screen restating the signed-in name to the person who typed the phone number, and the
+ * badge beside it duplicated the activation tracker further down. Identity now lives in the shell's
+ * top bar (`NurseAccountButton`), where it costs no content height and opens the account hub.
+ *
+ * Composition only — every widget reads a query that is already cached elsewhere in the shell, and
+ * order encodes urgency: a missed request expires, an unread earnings figure does not.
  */
 export default function NurseDashboardScreen() {
   const t = useTranslations('dashboard');
-  const { data: me, isLoading: meLoading } = useMe();
-  const verification = useVerificationStatus();
-
-  const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';
-
   return (
-    <Stack sx={{ gap: 3, maxWidth: DASHBOARD_MAX_WIDTH, mx: 'auto', width: '100%' }}>
-      <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
-        {meLoading ? (
-          <>
-            <Skeleton variant="circular" width={44} height={44} />
-            <Skeleton variant="text" width={160} height={32} />
-          </>
-        ) : (
-          <>
-            <Avatar sx={{ width: 44, height: 44, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}>
-              {(displayName || '؟').charAt(0)}
-            </Avatar>
-            <Stack sx={{ gap: 0.5 }}>
-              <Typography variant="h6" component="h1" sx={{ fontWeight: 700 }}>
-                {t('greeting', { name: displayName })}
-              </Typography>
-              {!verification.isLoading ? <TrustBadge state={ownBadgeState(verification.data)} /> : null}
-            </Stack>
-          </>
-        )}
-      </Stack>
-
+    <Stack sx={{ gap: 2.5 }}>
+      {/* Load-bearing now that the bottom nav is icon-only: this is the only place the current
+          section is named, and the page's only h1. */}
+      <PageHeader title={t('title')} />
       <NextVisitCard />
-      <RequestsStrip />
-      <EarningsSnapshotCard />
+      <RequestsSection />
+      <EarningsSection />
       <DashboardActivationSlot />
-      <NotificationsEntryRow />
     </Stack>
   );
 }
 
-/** First actionable session from `useTodaySessions` + a display-only "time until" line. */
+/**
+ * A section label + an optional text link. Deliberately not a button: on a 480px row a
+ * `<Button>` labelled «مشاهده همه» wrapped to two lines and outweighed the section it introduced.
+ */
+function SectionHeader({ title, actionLabel, actionTo }: { title: string; actionLabel?: string; actionTo?: string }) {
+  const locale = useLocale();
+  return (
+    <Stack direction="row" sx={{ alignItems: 'baseline', justifyContent: 'space-between', gap: 1 }}>
+      <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+        {title}
+      </Typography>
+      {actionLabel && actionTo ? (
+        <AppLink to={`/${locale}${actionTo}`} variant="caption" color="primary" sx={{ flexShrink: 0 }}>
+          {actionLabel}
+        </AppLink>
+      ) : null}
+    </Stack>
+  );
+}
+
+/** The page's one hero action: the next actionable session, with a full-width primary CTA. */
 function NextVisitCard() {
   const t = useTranslations('dashboard');
   const locale = useLocale();
-  const router = useRouter();
   const { data, isLoading, isError, refetch } = useTodaySessions();
 
-  if (isLoading) return <Skeleton variant="rounded" height={140} />;
+  if (isLoading) return <Skeleton variant="rounded" height={150} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
   if (isError) {
     return <ErrorState message={t('next_visit_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
   }
 
-  const items = data?.items ?? [];
-  const next = items.find((item) => item.status === 'scheduled' || item.status === 'in_progress');
+  const next = (data?.items ?? []).find((item) => item.status === 'scheduled' || item.status === 'in_progress');
 
   if (!next) {
-    return <EmptyState icon="visits" title={t('next_visit_empty')} />;
+    return (
+      <Stack sx={{ gap: 1 }}>
+        <SectionHeader title={t('next_visit_title')} />
+        <EmptyState icon="visits" title={t('next_visit_empty')} />
+      </Stack>
+    );
   }
 
   const timeFmt = new Intl.DateTimeFormat(localeTag(locale), { hour: '2-digit', minute: '2-digit' });
@@ -98,48 +105,41 @@ function NextVisitCard() {
   const timeUntil = formatRelativeTime(`${next.scheduledDate}T${next.scheduledTimeStart}`, locale, formatShamsiDate);
 
   return (
-    <SurfaceCard data-widget="next-visit">
-      <Stack sx={{ gap: 1.25 }}>
-        <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
-          <AppIcon icon="visits" size={20} color="var(--bal-primary)" />
-          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+    <AccentCard tone="secondary" data-widget="next-visit">
+      <Stack sx={{ gap: 1.5 }}>
+        <Stack sx={{ gap: 0.25, minWidth: 0 }}>
+          <Typography variant="overline" sx={{ color: 'text.secondary' }}>
             {t('next_visit_title')}
           </Typography>
-        </Stack>
-        <Stack sx={{ gap: 0.25 }}>
-          <Typography variant="body1" sx={{ fontWeight: 500 }}>
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>
             {next.patientName}
           </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            <Typography component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>
-              {timeRangeLabel}
-            </Typography>
-            {timeUntil ? ` · ${t('next_visit_starts_in', { relative: timeUntil })}` : ''}
-          </Typography>
+          <MetaLine
+            items={[
+              <Box key="range" component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+                {timeRangeLabel}
+              </Box>,
+              timeUntil ? t('next_visit_starts_in', { relative: timeUntil }) : null,
+            ]}
+          />
         </Stack>
-        <AppButton
-          variant="contained"
-          color="secondary"
-          startIcon="check_in"
-          onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}`)}
-          sx={{ alignSelf: 'flex-start' }}
-        >
+
+        <AppButton variant="contained" color="secondary" startIcon="check_in" fullWidth to={`/${locale}${ROUTES.NURSE_VISITS}`}>
           {t('next_visit_cta')}
         </AppButton>
       </Stack>
-    </SurfaceCard>
+    </AccentCard>
   );
 }
 
-/** The most time-critical widget: pending-request count + the most urgent countdown, inline into detail. */
-function RequestsStrip() {
+/** The most time-critical section: a pending request expires on its own if it isn't answered. */
+function RequestsSection() {
   const t = useTranslations('dashboard');
   const tb = useTranslations('booking');
   const locale = useLocale();
-  const router = useRouter();
   const { data, isLoading, isError, refetch } = useNurseRequestInbox();
 
-  if (isLoading) return <Skeleton variant="rounded" height={140} />;
+  if (isLoading) return <Skeleton variant="rounded" height={130} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
   if (isError) {
     return <ErrorState message={t('requests_strip_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
   }
@@ -148,76 +148,70 @@ function RequestsStrip() {
   const total = data?.total ?? 0;
 
   if (items.length === 0) {
-    return <EmptyState icon="requests" title={t('requests_strip_empty')} />;
+    return (
+      <Stack sx={{ gap: 1 }}>
+        <SectionHeader title={t('requests_strip_title', { count: 0 })} />
+        <EmptyState icon="requests" title={t('requests_strip_empty')} />
+      </Stack>
+    );
   }
 
   const mostUrgent = items[0];
 
   return (
-    <SurfaceCard data-widget="requests-strip">
-      <Stack sx={{ gap: 1.25 }}>
-        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
-          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
-            <AppIcon icon="requests" size={20} color="var(--bal-secondary)" />
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {t('requests_strip_title', { count: total })}
-            </Typography>
+    <Stack sx={{ gap: 1 }} data-widget="requests-strip">
+      <SectionHeader
+        title={t('requests_strip_title', { count: total })}
+        actionLabel={t('requests_strip_cta')}
+        actionTo={ROUTES.NURSE_REQUESTS}
+      />
+
+      <SurfaceCard>
+        <Stack sx={{ gap: 1.5 }}>
+          {/* Name and countdown are siblings on one row, with the pill `flexShrink: 0` — the old
+              layout let the countdown wrap under a long Persian name and collide with the date. */}
+          <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
+            <Stack sx={{ gap: 0.25, minWidth: 0 }}>
+              <Typography variant="body1" noWrap sx={{ fontWeight: 500 }}>
+                {mostUrgent.counterpartyName}
+              </Typography>
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {formatShamsiDate(mostUrgent.requestedDate, locale)}
+              </Typography>
+            </Stack>
+            <Box sx={{ flexShrink: 0 }}>
+              <CountdownTimer
+                deadlineIso={mostUrgent.nurseResponseDeadlineAt}
+                elapsedText={tb('response_elapsed')}
+                warnThresholdSeconds={WARN_THRESHOLD_SECONDS}
+                urgentThresholdSeconds={URGENT_THRESHOLD_SECONDS}
+                coarseLabel={(minutes) => coarseResponseLabel(minutes, tb)}
+                size="sm"
+              />
+            </Box>
           </Stack>
+
           <AppButton
-            variant="text"
+            variant="outlined"
             color="primary"
-            endIcon="requests"
-            onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)}
+            fullWidth
+            to={`/${locale}${ROUTES.NURSE_REQUESTS}/${mostUrgent.id}`}
           >
-            {t('requests_strip_cta')}
+            {t('requests_strip_open')}
           </AppButton>
         </Stack>
-
-        <Stack
-          direction="row"
-          sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}
-        >
-          <Stack sx={{ gap: 0.25, minWidth: 0 }}>
-            <Typography variant="body1" sx={{ fontWeight: 500 }}>
-              {mostUrgent.counterpartyName}
-            </Typography>
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {formatShamsiDate(mostUrgent.requestedDate, locale)}
-            </Typography>
-          </Stack>
-          <CountdownTimer
-            deadlineIso={mostUrgent.nurseResponseDeadlineAt}
-            elapsedText={tb('response_elapsed')}
-            warnThresholdSeconds={WARN_THRESHOLD_SECONDS}
-            urgentThresholdSeconds={URGENT_THRESHOLD_SECONDS}
-            coarseLabel={(minutes) => coarseResponseLabel(minutes, tb)}
-            size="sm"
-          />
-        </Stack>
-
-        <AppButton
-          variant="outlined"
-          color="primary"
-          endIcon="requests"
-          onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}/${mostUrgent.id}`)}
-          sx={{ alignSelf: 'flex-start' }}
-        >
-          {t('requests_strip_open')}
-        </AppButton>
-      </Stack>
-    </SurfaceCard>
+      </SurfaceCard>
+    </Stack>
   );
 }
 
-/** A compact two-stat row (net payable + eligible) — never clamps a negative net balance. */
-function EarningsSnapshotCard() {
+/** Two stat tiles — the signed net balance is never clamped, an "owed back" reads as an error tone. */
+function EarningsSection() {
   const t = useTranslations('dashboard');
   const tp = useTranslations('payouts');
-  const locale = useLocale();
-  const router = useRouter();
   const { data, isLoading, isError, refetch } = useNurseEarningsBalance();
 
-  if (isLoading) return <Skeleton variant="rounded" height={120} />;
+  if (isLoading) return <Skeleton variant="rounded" height={110} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
   if (isError) {
     return <ErrorState message={t('earnings_snapshot_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
   }
@@ -228,69 +222,48 @@ function EarningsSnapshotCard() {
   const magnitude = isOwed ? -net : net;
 
   return (
-    <SurfaceCard data-widget="earnings-snapshot">
-      <Stack sx={{ gap: 1.5 }}>
-        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
-          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
-            <AppIcon icon="earnings" size={20} color="var(--bal-primary)" />
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {t('earnings_snapshot_title')}
-            </Typography>
-          </Stack>
-          <AppButton
-            variant="text"
-            color="primary"
-            endIcon="earnings"
-            onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS}`)}
-          >
-            {t('earnings_snapshot_cta')}
-          </AppButton>
-        </Stack>
-        <Box sx={{ display: 'grid', gap: 1.5, gridTemplateColumns: '1fr 1fr' }}>
-          <Stack sx={{ gap: 0.25 }}>
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
-            </Typography>
-            <Money amountIrr={String(magnitude)} size="lg" tone={isOwed ? 'error' : 'emphasis'} sx={{ fontWeight: 800 }} />
-          </Stack>
-          <Stack sx={{ gap: 0.25 }}>
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {tp('bucket_eligible')}
-            </Typography>
-            <Money amountIrr={data.eligibleTotalIrr} size="lg" sx={{ fontWeight: 800 }} />
-          </Stack>
-        </Box>
+    <Stack sx={{ gap: 1 }} data-widget="earnings-snapshot">
+      <SectionHeader
+        title={t('earnings_snapshot_title')}
+        actionLabel={t('earnings_snapshot_cta')}
+        actionTo={ROUTES.NURSE_EARNINGS}
+      />
+
+      <Box sx={{ display: 'grid', gap: 1.5, gridTemplateColumns: '1fr 1fr' }}>
+        <StatTile
+          label={isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
+          value={<Money amountIrr={String(magnitude)} size="lg" tone={isOwed ? 'error' : 'emphasis'} />}
+        />
+        <StatTile label={tp('bucket_eligible')} value={<Money amountIrr={data.eligibleTotalIrr} size="lg" />} />
+      </Box>
+    </Stack>
+  );
+}
+
+function StatTile({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <SurfaceCard padding="sm">
+      <Stack sx={{ gap: 0.25, minWidth: 0 }}>
+        <Typography variant="caption" noWrap sx={{ color: 'text.secondary' }}>
+          {label}
+        </Typography>
+        {value}
       </Stack>
     </SurfaceCard>
   );
 }
 
-/** The unread-count entry row — the bell in the shell chrome is Phase 2's; this is a dashboard shortcut. */
-function NotificationsEntryRow() {
-  const t = useTranslations('dashboard');
-  const locale = useLocale();
-  const unread = useUnreadCount();
-
+/** Dot-separated secondary facts on one line, skipping the ones that aren't available. */
+function MetaLine({ items }: { items: Array<ReactNode> }) {
+  const present = items.filter(Boolean);
   return (
-    <AppLink to={`/${locale}${ROUTES.NURSE_NOTIFICATIONS}`} color="inherit" underline="none" sx={{ display: 'block' }}>
-      <SurfaceCard data-widget="notifications-entry">
-        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between' }}>
-          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
-            <AppIcon icon="notifications" size={20} color="var(--bal-primary)" />
-            <Typography variant="body1" sx={{ fontWeight: 500 }}>
-              {t('notifications_entry_title')}
-            </Typography>
-          </Stack>
-          <Typography
-            variant="body2"
-            // --bal-secondary-dark, not --bal-secondary: the plain terracotta fails AA contrast for
-            // small text on a light surface (frontend-designer skill §2) — this is body copy, not an icon.
-            sx={{ color: unread > 0 ? 'var(--bal-secondary-dark)' : 'text.secondary', fontWeight: unread > 0 ? 700 : 400 }}
-          >
-            {unread > 0 ? t('notifications_entry_unread', { count: unread }) : t('notifications_entry_empty')}
-          </Typography>
-        </Stack>
-      </SurfaceCard>
-    </AppLink>
+    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+      {present.map((item, index) => (
+        <Box key={index} component="span">
+          {index > 0 ? ' · ' : null}
+          {item}
+        </Box>
+      ))}
+    </Typography>
   );
 }

client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx

@@ -1,13 +1,19 @@
 'use client';
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Box, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppLoading, BankStatusPanel, EmptyState, ErrorState } from '@/components';
+import { Box, Stack, Typography } from '@mui/material';
+import { AppButton, AppLoading, BankStatusPanel, EmptyState, ErrorState, RhfTextField } from '@/components';
 import { useNurseBankAccounts, useAddNurseBankAccount, useSetPrimaryBankAccount } from '@/services/nurse';
 import { isValidSheba } from '@/services/nurse/iban';
 import { deriveBankStatus } from '@/services/nurse/types';
 
+interface BankFormValues {
+  iban: string;
+  holder: string;
+}
+
 /**
  * Nurse payout bank settings — an **accounts section**, not a one-shot form (ui-phase-8 §3.7): submit
  * an IBAN (شبا) + account-holder name, then watch the ownership inquiry resolve through its three
@@ -26,28 +32,19 @@ export default function NurseBankPage() {
   const addAccount = useAddNurseBankAccount();
   const setPrimary = useSetPrimaryBankAccount();
 
-  const [iban, setIban] = useState('');
-  const [holder, setHolder] = useState('');
-  const [ibanError, setIbanError] = useState(false);
-  const [holderError, setHolderError] = useState(false);
   const [showForm, setShowForm] = useState(false);
+  const form = useForm<BankFormValues>({ mode: 'onTouched', defaultValues: { iban: '', holder: '' } });
+  const { handleSubmit, reset } = form;
 
   const accounts = data ?? [];
   const showFormNow = !isLoading && !isError && (accounts.length === 0 || showForm);
 
-  const submit = () => {
-    const ibanInvalid = !isValidSheba(iban);
-    const holderInvalid = holder.trim().length === 0;
-    setIbanError(ibanInvalid);
-    setHolderError(holderInvalid);
-    if (ibanInvalid || holderInvalid) return;
-
+  const submit = (values: BankFormValues) => {
     addAccount.mutate(
-      { iban, accountHolderName: holder.trim() },
+      { iban: values.iban, accountHolderName: values.holder.trim() },
       {
         onSuccess: () => {
-          setIban('');
-          setHolder('');
+          reset();
           setShowForm(false);
           enqueueSnackbar(t('added'), { variant: 'success' });
         },
@@ -131,51 +128,43 @@ export default function NurseBankPage() {
       ) : null}
 
       {showFormNow ? (
-        <Stack sx={{ gap: 2 }}>
-          <TextField
-            label={t('iban_label')}
-            value={iban}
-            onChange={(e) => {
-              setIban(e.target.value.toUpperCase());
-              if (ibanError) setIbanError(false);
-            }}
-            error={ibanError}
-            helperText={ibanError ? t('iban_invalid') : t('iban_hint')}
-            slotProps={{ htmlInput: { dir: 'ltr', style: { textAlign: 'start', letterSpacing: 1 } } }}
-            fullWidth
-          />
-          <TextField
-            label={t('holder_label')}
-            value={holder}
-            onChange={(e) => {
-              setHolder(e.target.value);
-              if (holderError) setHolderError(false);
-            }}
-            error={holderError}
-            helperText={holderError ? t('holder_required') : t('holder_hint')}
-            fullWidth
-          />
-          <Stack direction="row" sx={{ gap: 1 }}>
-            <AppButton color="primary" variant="contained" startIcon="bank" onClick={submit} disabled={addAccount.isPending}>
-              {addAccount.isPending ? t('submitting') : t('submit')}
-            </AppButton>
-            {accounts.length > 0 ? (
-              <AppButton
-                variant="text"
-                onClick={() => {
-                  setShowForm(false);
-                  setIban('');
-                  setHolder('');
-                  setIbanError(false);
-                  setHolderError(false);
-                }}
-                disabled={addAccount.isPending}
-              >
-                {tc('cancel')}
+        <FormProvider {...form}>
+          <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2 }}>
+            <RhfTextField<BankFormValues>
+              name="iban"
+              label={t('iban_label')}
+              helperText={t('iban_hint')}
+              transform={(raw) => raw.toUpperCase()}
+              rules={{ validate: (value) => isValidSheba(String(value ?? '')) || t('iban_invalid') }}
+              slotProps={{ htmlInput: { dir: 'ltr', style: { textAlign: 'start', letterSpacing: 1 } } }}
+              fullWidth
+            />
+            <RhfTextField<BankFormValues>
+              name="holder"
+              label={t('holder_label')}
+              helperText={t('holder_hint')}
+              rules={{ validate: (value) => String(value ?? '').trim().length > 0 || t('holder_required') }}
+              fullWidth
+            />
+            <Stack direction="row" sx={{ gap: 1 }}>
+              <AppButton type="submit" color="primary" variant="contained" startIcon="bank" disabled={addAccount.isPending}>
+                {addAccount.isPending ? t('submitting') : t('submit')}
               </AppButton>
-            ) : null}
+              {accounts.length > 0 ? (
+                <AppButton
+                  variant="text"
+                  onClick={() => {
+                    setShowForm(false);
+                    reset();
+                  }}
+                  disabled={addAccount.isPending}
+                >
+                  {tc('cancel')}
+                </AppButton>
+              ) : null}
+            </Stack>
           </Stack>
-        </Stack>
+        </FormProvider>
       ) : null}
     </Box>
   );

client/src/app/[locale]/(private-routes)/nurse/coverage/page.tsx

@@ -132,7 +132,7 @@ export default function NurseCoveragePage() {
           elevation={0}
           sx={{
             p: 2,
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             border: '1px solid',
             borderColor: 'divider',
             borderInlineStartWidth: 4,
@@ -153,7 +153,7 @@ export default function NurseCoveragePage() {
         </Paper>
       )}
 
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 2 }}>
           <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
             {t('add_title')}

client/src/app/[locale]/(private-routes)/nurse/earnings/page.tsx

@@ -157,7 +157,7 @@ function ExplainerCard({ open, onToggle }: { open: boolean; onToggle: () => void
       elevation={0}
       sx={{
         p: 2,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         border: '1px solid',
         borderColor: 'divider',
         borderInlineStart: '3px solid',
@@ -168,7 +168,7 @@ function ExplainerCard({ open, onToggle }: { open: boolean; onToggle: () => void
         onClick={onToggle}
         aria-expanded={open}
         aria-controls={EXPLAINER_CONTENT_ID}
-        sx={{ width: '100%', justifyContent: 'space-between', gap: 1, borderRadius: 1 }}
+        sx={{ width: '100%', justifyContent: 'space-between', gap: 1, borderRadius: 'var(--bal-radius-sm)' }}
       >
         <Stack direction="row" sx={{ gap: 0.75, alignItems: 'center' }}>
           <AppIcon icon="info" size={18} color="var(--bal-info)" />

client/src/app/[locale]/(private-routes)/nurse/earnings/payouts/[id]/page.tsx

@@ -66,14 +66,14 @@ export default function NursePayoutDetailPage() {
           <Skeleton variant="rounded" height={200} />
         </Stack>
       ) : isError || !data ? (
-        <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+        <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('detail_not_found')}
           </Typography>
         </Paper>
       ) : (
         <>
-          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <Stack sx={{ gap: 1.5 }}>
               <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
                 <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
@@ -112,7 +112,7 @@ export default function NursePayoutDetailPage() {
             <Box
               sx={{
                 p: 1.75,
-                borderRadius: 2,
+                borderRadius: 'var(--bal-radius-md)',
                 border: '1px solid',
                 borderColor: 'divider',
                 borderInlineStart: '3px solid',
@@ -174,7 +174,7 @@ export default function NursePayoutDetailPage() {
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t('detail_bookings_hint')}
             </Typography>
-            <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, overflow: 'hidden' }}>
+            <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', overflow: 'hidden' }}>
               <Stack divider={<Divider />}>
                 {data.bookings.map((link) => (
                   <Stack

client/src/app/[locale]/(private-routes)/nurse/finance/NurseFinanceScreen.tsx

@@ -0,0 +1,83 @@
+'use client';
+import { Skeleton, Stack, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { AccentCard, ErrorState, Money, NavHubList, PageHeader } from '@/components';
+import type { NavHubItem } from '@/components';
+import { ROUTES } from '@/constants';
+import { parseIrr } from '@/utils';
+import { useNurseEarningsBalance } from '@/services/payouts';
+
+/**
+ * «مالی» group root. The one number a nurse opens this tab for — the signed net payable balance —
+ * is answered before any navigation, then the three money screens are one tap away. The balance is
+ * **signed**: an outstanding clawback can exceed accrued earnings, and clamping it to zero would
+ * quietly tell a nurse they are owed nothing when they in fact owe money back.
+ */
+export default function NurseFinanceScreen() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+  const tp = useTranslations('payouts');
+  const { data, isLoading, isError, refetch } = useNurseEarningsBalance();
+
+  const items: Array<NavHubItem> = [
+    {
+      title: tn('earnings'),
+      subtitle: t('finance_earnings_sub'),
+      icon: 'earnings',
+      path: ROUTES.NURSE_EARNINGS,
+    },
+    {
+      title: tn('payouts'),
+      subtitle: t('finance_payouts_sub'),
+      icon: 'history',
+      path: ROUTES.NURSE_EARNINGS_PAYOUTS,
+    },
+    {
+      title: tn('bank'),
+      subtitle: t('finance_bank_sub'),
+      icon: 'bank',
+      path: ROUTES.NURSE_BANK,
+    },
+  ];
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={tn('group_finance')} subtitle={t('finance_subtitle')} />
+      <BalanceSummary data={data} isLoading={isLoading} isError={isError} onRetry={() => refetch()} tp={tp} t={t} />
+      <NavHubList items={items} />
+    </Stack>
+  );
+}
+
+interface BalanceSummaryProps {
+  data: ReturnType<typeof useNurseEarningsBalance>['data'];
+  isLoading: boolean;
+  isError: boolean;
+  onRetry: () => void;
+  tp: ReturnType<typeof useTranslations<'payouts'>>;
+  t: ReturnType<typeof useTranslations<'hub'>>;
+}
+
+function BalanceSummary({ data, isLoading, isError, onRetry, tp, t }: BalanceSummaryProps) {
+  if (isLoading) return <Skeleton variant="rounded" height={104} />;
+  if (isError) return <ErrorState message={t('finance_balance_error')} retryLabel={t('retry')} onRetry={onRetry} />;
+  if (!data) return null;
+
+  const net = parseIrr(data.netPayableBalanceIrr);
+  const isOwed = net < BigInt(0);
+  const magnitude = isOwed ? -net : net;
+
+  return (
+    <AccentCard tone={isOwed ? 'error' : 'primary'}>
+      <Stack sx={{ gap: 0.5 }}>
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          {isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
+        </Typography>
+        <Money amountIrr={String(magnitude)} size="xl" tone={isOwed ? 'error' : 'emphasis'} />
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          {tp('bucket_eligible')}: <Money amountIrr={data.eligibleTotalIrr} size="sm" component="span" />
+        </Typography>
+      </Stack>
+    </AccentCard>
+  );
+}

client/src/app/[locale]/(private-routes)/nurse/finance/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import NurseFinanceScreen from './NurseFinanceScreen';
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'nav' });
+  return { title: t('group_finance') };
+}
+
+export default function NurseFinancePage() {
+  return <NurseFinanceScreen />;
+}

client/src/app/[locale]/(private-routes)/nurse/loading.tsx

@@ -1,5 +1,5 @@
-import SidebarShellSkeleton from '../_chrome/SidebarShellSkeleton';
+import ShellContentSkeleton from '../_chrome/ShellContentSkeleton';
 
 export default function Loading() {
-  return <SidebarShellSkeleton />;
+  return <ShellContentSkeleton />;
 }

client/src/app/[locale]/(private-routes)/nurse/more/NurseMoreScreen.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { NavHubList, PageHeader, ProfileSummary, SurfaceCard } from '@/components';
+import type { NavHubItem } from '@/components';
+import { SettingsPanel, SignOutRow } from '@/components/settings';
+import { ROUTES } from '@/constants';
+import { ActorSwitcher } from '@/layout';
+import { useMe } from '@/services/auth';
+import { useNurseProfile } from '@/services/profiles';
+import { useUnreadCount } from '@/services/notifications';
+import { useSupportUnreadTotal } from '@/services/tickets';
+import { useVerificationStatus } from '@/services/verification';
+import { ownBadgeState } from '@/services/verification/types';
+
+/**
+ * «بیشتر» group root — the fourth bottom-nav destination: who you are signed in as, the two
+ * conversation surfaces (support, notifications), appearance/language, and sign-out. Everything
+ * here used to live in the sidebar drawer's header and footer, where a preference toggle sat
+ * permanently next to primary navigation.
+ */
+export default function NurseMoreScreen() {
+  const t = useTranslations('hub');
+  const tn = useTranslations('nav');
+
+  const { data: me } = useMe();
+  const { data: nurseProfile } = useNurseProfile();
+  const { data: verification } = useVerificationStatus();
+  const supportUnreadTotal = useSupportUnreadTotal();
+  const notificationsUnread = useUnreadCount();
+
+  const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';
+
+  const items: Array<NavHubItem> = [
+    {
+      title: tn('support'),
+      subtitle: t('more_support_sub'),
+      icon: 'support',
+      path: ROUTES.NURSE_SUPPORT_TICKETS,
+      badgeCount: supportUnreadTotal ?? undefined,
+    },
+    {
+      title: tn('notifications'),
+      subtitle: t('more_notifications_sub'),
+      icon: 'notifications',
+      path: ROUTES.NURSE_NOTIFICATIONS,
+      badgeCount: notificationsUnread || undefined,
+    },
+  ];
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={t('more_title')} />
+
+      <SurfaceCard>
+        <Stack sx={{ gap: 1.5 }}>
+          <ProfileSummary
+            displayName={displayName}
+            phone={me?.phone}
+            avatarUrl={nurseProfile?.avatarUrl}
+            trustState={ownBadgeState(verification)}
+            loading={!me}
+          />
+          <ActorSwitcher target="customer" />
+        </Stack>
+      </SurfaceCard>
+
+      <NavHubList items={items} />
+      <SettingsPanel />
+      <SignOutRow />
+    </Stack>
+  );
+}

client/src/app/[locale]/(private-routes)/nurse/more/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import NurseMoreScreen from './NurseMoreScreen';
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'hub' });
+  return { title: t('more_title') };
+}
+
+export default function NurseMorePage() {
+  return <NurseMoreScreen />;
+}

client/src/app/[locale]/(private-routes)/nurse/practice/NursePracticeScreen.tsx

@@ -0,0 +1,98 @@
+'use client';
+import { Stack, Typography } from '@mui/material';
+import { useLocale, useTranslations } from 'next-intl';
+import { AccentCard, AppLink, NavHubList, PageHeader, StatusChip, TrustBadge } from '@/components';
+import type { NavHubItem } from '@/components';
+import { ROUTES } from '@/constants';
+import { useMyVariants } from '@/services/catalog';
+import { useServiceAreas } from '@/services/serviceAreas';
+import { useNurseProfile } from '@/services/profiles';
+import { useVerificationStatus } from '@/services/verification';
+import { ownBadgeState } from '@/services/verification/types';
+
+/**
+ * «حرفهٔ من» group root — the page the bottom-nav tab lands on. It answers the question the
+ * sidebar section never could ("is my listing actually live, and what's missing?") before handing
+ * off to the four screens that fix it. Every number here is read off a query that already answers
+ * it; nothing is derived optimistically, and a count is simply omitted until its query resolves.
+ */
+export default function NursePracticeScreen() {
+  const t = useTranslations('hub');
+  const locale = useLocale();
+  const tn = useTranslations('nav');
+  const { data: verification } = useVerificationStatus();
+  const { data: profile } = useNurseProfile();
+  const { data: variants } = useMyVariants();
+  const { data: areas } = useServiceAreas();
+
+  const activeVariants = variants?.items.filter((variant) => variant.isActive).length;
+  const isAccepting = profile?.isAcceptingBookings;
+
+  const items: Array<NavHubItem> = [
+    {
+      title: tn('profile'),
+      subtitle: t('practice_profile_sub'),
+      icon: 'account',
+      path: ROUTES.NURSE_PROFILE,
+    },
+    {
+      title: tn('services'),
+      subtitle: t('practice_services_sub'),
+      icon: 'services',
+      path: ROUTES.NURSE_SERVICES,
+      meta: activeVariants === undefined ? undefined : <MetaCount value={activeVariants} />,
+    },
+    {
+      title: tn('coverage'),
+      subtitle: t('practice_coverage_sub'),
+      icon: 'coverage',
+      path: ROUTES.NURSE_COVERAGE,
+      meta: areas === undefined ? undefined : <MetaCount value={areas.total} />,
+    },
+    {
+      title: tn('verification'),
+      subtitle: t('practice_verification_sub'),
+      icon: 'verification',
+      path: ROUTES.NURSE_VERIFICATION,
+    },
+  ];
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={tn('group_profession')} subtitle={t('practice_subtitle')} />
+
+      <AccentCard tone={isAccepting ? 'success' : 'warning'}>
+        <Stack sx={{ gap: 1.25 }}>
+          <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+              {t('practice_status_title')}
+            </Typography>
+            <TrustBadge state={ownBadgeState(verification)} />
+          </Stack>
+          {isAccepting === undefined ? null : (
+            <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+              <StatusChip
+                status={isAccepting ? 'active' : 'neutral'}
+                label={isAccepting ? t('practice_accepting_on') : t('practice_accepting_off')}
+              />
+              <AppLink to={`/${locale}${ROUTES.NURSE_SERVICES}`} variant="caption">
+                {t('practice_accepting_manage')}
+              </AppLink>
+            </Stack>
+          )}
+        </Stack>
+      </AccentCard>
+
+      <NavHubList items={items} />
+    </Stack>
+  );
+}
+
+/** A count read straight off a resolved query — never a placeholder while one is in flight. */
+function MetaCount({ value }: { value: number }) {
+  return (
+    <Typography variant="body2" sx={{ color: 'text.secondary', fontVariantNumeric: 'tabular-nums' }}>
+      {value}
+    </Typography>
+  );
+}

client/src/app/[locale]/(private-routes)/nurse/practice/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import NursePracticeScreen from './NursePracticeScreen';
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'nav' });
+  return { title: t('group_profession') };
+}
+
+export default function NursePracticePage() {
+  return <NursePracticeScreen />;
+}

client/src/app/[locale]/(private-routes)/nurse/profile/page.tsx

@@ -1,20 +1,45 @@
 'use client';
-import { ChangeEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, FunctionComponent, useEffect, useRef } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { useForm, FormProvider, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Avatar, Box, Chip, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, TrustBadge } from '@/components';
+import { Avatar, Box, MenuItem, Stack, Typography } from '@mui/material';
+import {
+  AccentCard,
+  AppButton,
+  AppIcon,
+  AppLoading,
+  FormSection,
+  PageHeader,
+  RhfChipSelect,
+  RhfTextField,
+  TrustBadge,
+} from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
+import { digitsOnly } from '@/utils';
 import { useNurseProfile, useUpsertNurseProfile, useUploadAvatar } from '@/services/profiles';
 import type { NurseProfile } from '@/services/profiles/types';
 import { useVerificationStatus } from '@/services/verification';
 import { ownBadgeState, SPECIALTY_PRESETS } from '@/services/verification/types';
 
 const MAX_YEARS = 80;
+const MAX_YEARS_DIGITS = 2;
 const OTHER_CODE = '__other';
 const EDUCATION_LEVELS = ['diploma', 'associate', 'bachelor', 'master', 'doctorate'] as const;
 const EDUCATION_FIELDS = ['nursing', 'midwifery', 'anesthesia', 'operating_room', 'public_health'] as const;
 
+interface ProfileFormValues {
+  avatarUrl: string | null;
+  bio: string;
+  years: string;
+  educationLevel: string;
+  educationLevelOther: string;
+  educationField: string;
+  educationFieldOther: string;
+  specializations: string[];
+}
+
 function parseSpecializations(json: string): string[] {
   try {
     const parsed = JSON.parse(json);
@@ -24,13 +49,36 @@ function parseSpecializations(json: string): string[] {
   }
 }
 
-/** Nurse profile bootstrap (B7 header): avatar + bio + years + qualifications. */
+/**
+ * Splits a stored free-text value into the (select code, "other" free-text) pair the form edits: a
+ * value the preset list knows becomes the code, anything else becomes «سایر» + the raw text.
+ */
+function splitPreset(stored: string, presets: readonly string[]): { code: string; other: string } {
+  if (presets.includes(stored)) return { code: stored, other: '' };
+  return stored ? { code: OTHER_CODE, other: stored } : { code: '', other: '' };
+}
+
+/** Nurse profile bootstrap (B7 header): avatar + bio + experience + qualifications. */
 export default function NurseProfilePage() {
   const { data: profile, isLoading } = useNurseProfile();
   if (isLoading) return <AppLoading />;
   return <NurseProfileForm initial={profile ?? null} />;
 }
 
+/**
+ * The nurse's public-facing profile, rebuilt around three named questions instead of one undivided
+ * column of inputs.
+ *
+ * What it replaced: a flat stack of avatar → bio → years → two selects → two conditional "other"
+ * fields → a chip row → a save button, with no headings and no statement of what any of it was for.
+ * The nurse could not tell which fields families actually see, which were required, or how much was
+ * left — and every keystroke re-rendered the trust badge, the verification banner and the uploader
+ * along with the field being typed into, because each input owned a `useState` at page level.
+ *
+ * Now: `FormSection` groups the fields into معرفی / تجربه و تحصیلات / تخصص‌ها, each saying who the
+ * answer is for; react-hook-form owns the values so a keystroke re-renders one field; and validation
+ * lives on the field it governs rather than in a hand-rolled block at the top of the submit handler.
+ */
 const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({ initial }) => {
   const t = useTranslations('nurseProfile');
   const tv = useTranslations('verification');
@@ -43,28 +91,29 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
   const badgeState = ownBadgeState(verificationStatus);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(initial?.avatarUrl ?? null);
-  const [bio, setBio] = useState(initial?.bio ?? '');
-  const [years, setYears] = useState(initial ? String(initial.yearsOfExperience) : '');
-  const [yearsError, setYearsError] = useState(false);
+  const level = splitPreset(initial?.educationLevel ?? '', EDUCATION_LEVELS);
+  const field = splitPreset(initial?.educationField ?? '', EDUCATION_FIELDS);
 
-  const initialLevel = initial?.educationLevel ?? '';
-  const initialField = initial?.educationField ?? '';
-  const [educationLevel, setEducationLevel] = useState(
-    (EDUCATION_LEVELS as readonly string[]).includes(initialLevel) ? initialLevel : initialLevel ? OTHER_CODE : '',
-  );
-  const [educationLevelOther, setEducationLevelOther] = useState(
-    (EDUCATION_LEVELS as readonly string[]).includes(initialLevel) ? '' : initialLevel,
-  );
-  const [educationField, setEducationField] = useState(
-    (EDUCATION_FIELDS as readonly string[]).includes(initialField) ? initialField : initialField ? OTHER_CODE : '',
-  );
-  const [educationFieldOther, setEducationFieldOther] = useState(
-    (EDUCATION_FIELDS as readonly string[]).includes(initialField) ? '' : initialField,
-  );
-  const [specializations, setSpecializations] = useState<string[]>(
-    parseSpecializations(initial?.specializationsJson ?? '[]'),
-  );
+  const form = useForm<ProfileFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      avatarUrl: initial?.avatarUrl ?? null,
+      bio: initial?.bio ?? '',
+      years: initial ? String(initial.yearsOfExperience) : '',
+      educationLevel: level.code,
+      educationLevelOther: level.other,
+      educationField: field.code,
+      educationFieldOther: field.other,
+      specializations: parseSpecializations(initial?.specializationsJson ?? '[]'),
+    },
+  });
+  const { control, handleSubmit, setValue, getValues } = form;
+
+  // Only these three drive conditional rendering, so they are the only fields worth subscribing the
+  // page to — the rest re-render nothing but themselves.
+  const avatarUrl = useWatch({ control, name: 'avatarUrl' });
+  const educationLevel = useWatch({ control, name: 'educationLevel' });
+  const educationField = useWatch({ control, name: 'educationField' });
 
   // A staged-but-unsaved avatar must never be silently discarded — warn on reload/tab-close.
   const avatarDirty = avatarUrl !== (initial?.avatarUrl ?? null);
@@ -79,224 +128,199 @@ const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({
     return () => window.removeEventListener('beforeunload', handler);
   }, [avatarDirty]);
 
-  const pickFile = () => fileInputRef.current?.click();
-
   const onFileSelected = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     event.target.value = '';
     if (!file) return;
     uploadAvatar.mutate(file, {
-      onSuccess: (result) => setAvatarUrl(result.url),
+      onSuccess: (result) => setValue('avatarUrl', result.url, { shouldDirty: true }),
       onError: () => enqueueSnackbar(t('avatar_upload_error'), { variant: 'error' }),
     });
   };
 
-  const toggleSpecialty = (value: string) =>
-    setSpecializations((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]));
-
-  const handleSave = () => {
-    const trimmed = years.trim();
-    const yearsNum = trimmed === '' ? 0 : Number(trimmed);
-    const yearsInvalid = !Number.isInteger(yearsNum) || yearsNum < 0 || yearsNum > MAX_YEARS;
-    setYearsError(yearsInvalid);
-    if (yearsInvalid) return;
-
-    const resolvedLevel = educationLevel === OTHER_CODE ? educationLevelOther.trim() : educationLevel;
-    const resolvedField = educationField === OTHER_CODE ? educationFieldOther.trim() : educationField;
+  const save = (values: ProfileFormValues) => {
+    const resolvedLevel =
+      values.educationLevel === OTHER_CODE ? values.educationLevelOther.trim() : values.educationLevel;
+    const resolvedField =
+      values.educationField === OTHER_CODE ? values.educationFieldOther.trim() : values.educationField;
 
     upsert.mutate(
       {
-        bio: bio.trim(),
-        yearsOfExperience: yearsNum,
+        bio: values.bio.trim(),
+        yearsOfExperience: values.years.trim() === '' ? 0 : Number(values.years),
         educationLevel: resolvedLevel,
         educationField: resolvedField,
-        specializationsJson: JSON.stringify(specializations),
-        avatarUrl,
+        specializationsJson: JSON.stringify(values.specializations),
+        avatarUrl: values.avatarUrl,
       },
       {
-        onSuccess: () => enqueueSnackbar(t('saved'), { variant: 'success' }),
+        onSuccess: () => {
+          enqueueSnackbar(t('saved'), { variant: 'success' });
+          // Re-baseline so the beforeunload guard and `isDirty` stop reporting saved work as unsaved.
+          form.reset(getValues());
+        },
         onError: () => enqueueSnackbar(t('save_error'), { variant: 'error' }),
       },
     );
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 560 }}>
-      <Box>
-        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
-          <Typography variant="h5" component="h1">
-            {t('title')}
-          </Typography>
-          {/* The public trust signal on the nurse's own profile — the same badge f6 reuses in search. */}
-          <TrustBadge state={badgeState} />
-        </Stack>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('subtitle')}
-        </Typography>
-      </Box>
+    <FormProvider {...form}>
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleSubmit(save)}
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}
+      >
+        <PageHeader title={t('title')} subtitle={t('subtitle')} meta={<TrustBadge state={badgeState} />} />
 
-      {/* Blocked-until-verified banner — shown until the aggregate is approved (incl. the expired state). */}
-      {badgeState !== 'verified' ? (
-        <Paper
-          elevation={0}
-          sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider', borderInlineStartWidth: 4, borderInlineStartColor: 'var(--bal-warning)' }}
-        >
-          <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
-            <AppIcon icon="warning" size={24} color="var(--bal-warning)" />
-            <Stack sx={{ gap: 1, flexGrow: 1 }}>
-              <Box>
-                <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+        {/* Blocked-until-verified nudge — shown until the aggregate is approved (incl. the expired state). */}
+        {badgeState !== 'verified' ? (
+          <AccentCard tone="warning" padding="sm">
+            <Stack sx={{ gap: 1 }}>
+              <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
+                <AppIcon icon="warning" size={20} color="var(--bal-warning)" />
+                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                   {t('unverified_title')}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                  {t('unverified_body')}
-                </Typography>
-              </Box>
+              </Stack>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t('unverified_body')}
+              </Typography>
               <AppButton
                 color="primary"
-                variant="outlined"
+                variant="text"
+                endIcon="forward"
                 to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
                 sx={{ alignSelf: 'flex-start' }}
               >
                 {t('unverified_cta')}
               </AppButton>
             </Stack>
+          </AccentCard>
+        ) : null}
+
+        <FormSection title={t('section_intro_title')} description={t('section_intro_description')} icon="account">
+          <Stack direction="row" sx={{ gap: 2, alignItems: 'center' }}>
+            <Avatar src={avatarUrl ?? undefined} sx={{ width: 64, height: 64, bgcolor: 'var(--bal-primary-soft)' }}>
+              {avatarUrl ? null : <AppIcon icon="account" size={32} color="var(--bal-primary)" />}
+            </Avatar>
+            <Stack sx={{ gap: 0.5, minWidth: 0 }}>
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {t('photo_hint')}
+              </Typography>
+              <AppButton
+                variant="outlined"
+                color="primary"
+                startIcon="camera"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploadAvatar.isPending}
+                sx={{ alignSelf: 'flex-start' }}
+              >
+                {uploadAvatar.isPending ? t('uploading') : t('upload')}
+              </AppButton>
+              <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={onFileSelected} />
+            </Stack>
           </Stack>
-        </Paper>
-      ) : null}
 
-      <Stack direction="row" sx={{ gap: 2, alignItems: 'center' }}>
-        <Avatar src={avatarUrl ?? undefined} sx={{ width: 72, height: 72, bgcolor: 'var(--bal-primary-soft)' }}>
-          {avatarUrl ? null : <AppIcon icon="account" size={36} color="var(--bal-primary)" />}
-        </Avatar>
-        <Stack sx={{ gap: 0.5 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-            {t('photo')}
-          </Typography>
-          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-            {t('photo_hint')}
-          </Typography>
-          <AppButton
-            variant="outlined"
-            color="primary"
-            startIcon="camera"
-            onClick={pickFile}
-            disabled={uploadAvatar.isPending}
-            sx={{ mt: 0.5, alignSelf: 'flex-start' }}
-          >
-            {uploadAvatar.isPending ? t('uploading') : t('upload')}
+          <RhfTextField<ProfileFormValues>
+            name="bio"
+            label={t('bio')}
+            helperText={t('bio_hint')}
+            multiline
+            minRows={3}
+            fullWidth
+          />
+        </FormSection>
+
+        <FormSection
+          title={t('section_experience_title')}
+          description={t('section_experience_description')}
+          icon="license"
+        >
+          <RhfTextField<ProfileFormValues>
+            name="years"
+            label={t('years')}
+            transform={(raw) => digitsOnly(raw).slice(0, MAX_YEARS_DIGITS)}
+            rules={{
+              validate: (value) => {
+                const trimmed = String(value ?? '').trim();
+                if (trimmed === '') return true;
+                const parsed = Number(trimmed);
+                return (Number.isInteger(parsed) && parsed >= 0 && parsed <= MAX_YEARS) || t('years_invalid');
+              },
+            }}
+            slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
+            sx={{ maxWidth: 200 }}
+          />
+
+          <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
+            <RhfTextField<ProfileFormValues> name="educationLevel" select label={t('education_level_label')} fullWidth>
+              {EDUCATION_LEVELS.map((code) => (
+                <MenuItem key={code} value={code}>
+                  {t(`education_level_${code}`)}
+                </MenuItem>
+              ))}
+              <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
+            </RhfTextField>
+            <RhfTextField<ProfileFormValues> name="educationField" select label={t('education_field_label')} fullWidth>
+              {EDUCATION_FIELDS.map((code) => (
+                <MenuItem key={code} value={code}>
+                  {t(`education_field_${code}`)}
+                </MenuItem>
+              ))}
+              <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
+            </RhfTextField>
+          </Stack>
+
+          {educationLevel === OTHER_CODE ? (
+            <RhfTextField<ProfileFormValues>
+              name="educationLevelOther"
+              label={t('education_level_other_label')}
+              rules={{ required: t('education_other_required') }}
+              fullWidth
+            />
+          ) : null}
+          {educationField === OTHER_CODE ? (
+            <RhfTextField<ProfileFormValues>
+              name="educationFieldOther"
+              label={t('education_field_other_label')}
+              rules={{ required: t('education_other_required') }}
+              fullWidth
+            />
+          ) : null}
+        </FormSection>
+
+        <FormSection
+          title={t('specializations_label')}
+          description={t('section_specializations_description')}
+          icon="clinical"
+          optional
+          optionalLabel={tc('optional')}
+        >
+          <RhfChipSelect<ProfileFormValues>
+            name="specializations"
+            options={SPECIALTY_PRESETS.map((code) => ({
+              code,
+              label: tv.has(`specialty_${code}`) ? tv(`specialty_${code}`) : code,
+            }))}
+            allowCustomValues
+          />
+        </FormSection>
+
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+          <AppButton type="submit" color="primary" variant="contained" disabled={upsert.isPending}>
+            {upsert.isPending ? tc('saving') : t('save')}
+          </AppButton>
+          <AppButton variant="text" color="primary" startIcon="account" to={`/${locale}${ROUTES.NURSE_PROFILE_PREVIEW}`}>
+            {t('preview_cta')}
           </AppButton>
-          <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={onFileSelected} />
         </Stack>
-      </Stack>
 
-      <TextField
-        label={t('bio')}
-        value={bio}
-        onChange={(e) => setBio(e.target.value)}
-        helperText={t('bio_hint')}
-        multiline
-        minRows={3}
-        fullWidth
-      />
-
-      <TextField
-        label={t('years')}
-        value={years}
-        onChange={(e) => {
-          setYears(e.target.value.replace(/\D/g, '').slice(0, 2));
-          if (yearsError) setYearsError(false);
-        }}
-        error={yearsError}
-        helperText={yearsError ? t('years_invalid') : undefined}
-        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
-        sx={{ maxWidth: 200 }}
-      />
-
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <TextField select label={t('education_level_label')} value={educationLevel} onChange={(e) => setEducationLevel(e.target.value)} fullWidth>
-          {EDUCATION_LEVELS.map((code) => (
-            <MenuItem key={code} value={code}>
-              {t(`education_level_${code}`)}
-            </MenuItem>
-          ))}
-          <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
-        </TextField>
-        <TextField select label={t('education_field_label')} value={educationField} onChange={(e) => setEducationField(e.target.value)} fullWidth>
-          {EDUCATION_FIELDS.map((code) => (
-            <MenuItem key={code} value={code}>
-              {t(`education_field_${code}`)}
-            </MenuItem>
-          ))}
-          <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
-        </TextField>
-      </Stack>
-
-      {educationLevel === OTHER_CODE ? (
-        <TextField
-          label={t('education_level_other_label')}
-          value={educationLevelOther}
-          onChange={(e) => setEducationLevelOther(e.target.value)}
-          fullWidth
-        />
-      ) : null}
-      {educationField === OTHER_CODE ? (
-        <TextField
-          label={t('education_field_other_label')}
-          value={educationFieldOther}
-          onChange={(e) => setEducationFieldOther(e.target.value)}
-          fullWidth
-        />
-      ) : null}
-
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('specializations_label')}
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          {t('deferred_services')}
         </Typography>
-        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-          {SPECIALTY_PRESETS.map((code) => {
-            const selected = specializations.includes(code);
-            return (
-              <Chip
-                key={code}
-                label={tv.has(`specialty_${code}`) ? tv(`specialty_${code}`) : code}
-                onClick={() => toggleSpecialty(code)}
-                variant={selected ? 'filled' : 'outlined'}
-                sx={{
-                  fontWeight: 500,
-                  backgroundColor: selected ? 'var(--bal-primary)' : 'transparent',
-                  color: selected ? 'var(--bal-primary-contrast)' : 'var(--bal-primary)',
-                  borderColor: 'var(--bal-primary)',
-                }}
-              />
-            );
-          })}
-        </Stack>
-      </Stack>
-
-      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-        {t('deferred_services')}
-      </Typography>
-
-      <AppButton
-        variant="text"
-        color="primary"
-        startIcon="account"
-        to={`/${locale}${ROUTES.NURSE_PROFILE_PREVIEW}`}
-        sx={{ alignSelf: 'flex-start' }}
-      >
-        {t('preview_cta')}
-      </AppButton>
-
-      <AppButton
-        color="primary"
-        variant="contained"
-        onClick={handleSave}
-        disabled={upsert.isPending}
-        sx={{ alignSelf: 'flex-start' }}
-      >
-        {upsert.isPending ? tc('saving') : t('save')}
-      </AppButton>
-    </Box>
+      </Box>
+    </FormProvider>
   );
 };

client/src/app/[locale]/(private-routes)/nurse/requests/[id]/page.tsx

@@ -61,7 +61,7 @@ export default function NurseRequestDetailPage() {
 
   if (isError || !request) {
     return (
-      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto' }}>
+      <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', maxWidth: CONTENT_MAX_WIDTH, mx: 'auto' }}>
         <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1 }}>
           {t('not_found_title')}
         </Typography>
@@ -131,7 +131,7 @@ export default function NurseRequestDetailPage() {
         <StatusChip status={statusKind(request.status)} label={t(`status_${request.status}`)} />
       </Stack>
 
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 1.5 }}>
           <DetailRow caption={t('summary_patient')}>
             <Typography variant="body2" sx={{ fontWeight: 500 }}>
@@ -171,7 +171,7 @@ export default function NurseRequestDetailPage() {
       </Paper>
 
       {/* Stage-1 clinical context — ONLY the family's notes, never a clinical/care field. */}
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 1 }}>
           <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
             {t('inbox_notes_label')}
@@ -225,7 +225,7 @@ export default function NurseRequestDetailPage() {
           elevation={0}
           sx={{
             p: 2,
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             border: '1px solid',
             borderColor: 'divider',
             borderInlineStartWidth: 4,

client/src/app/[locale]/(private-routes)/nurse/services/MyServicesList.tsx

@@ -105,7 +105,7 @@ const MyServicesList: FunctionComponent<MyServicesListProps> = ({ onAdd, onEdit
       {isLoading ? (
         <Stack sx={{ gap: 1.5 }}>
           {[0, 1].map((key) => (
-            <Skeleton key={key} variant="rounded" height={150} sx={{ borderRadius: 2 }} />
+            <Skeleton key={key} variant="rounded" height={150} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
           ))}
         </Stack>
       ) : isError ? (

client/src/app/[locale]/(private-routes)/nurse/services/PublishGate.tsx

@@ -22,7 +22,7 @@ const PublishGate: FunctionComponent = () => {
   const state = useActivationChecklist();
   const setAccepting = useSetAcceptingBookings();
 
-  if (state.isLoading) return <Skeleton variant="rounded" height={96} sx={{ borderRadius: 2 }} />;
+  if (state.isLoading) return <Skeleton variant="rounded" height={96} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
   if (state.isError) return null; // ActivationChecklist (mounted alongside) already surfaces the error + retry.
 
   const toggle = (accepting: boolean) => {

client/src/app/[locale]/(private-routes)/nurse/services/VariantBuilder.tsx

@@ -1,9 +1,24 @@
 'use client';
 import { FunctionComponent, useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Box, Chip, MenuItem, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AccentCard, AppButton, AppIcon, AppLoading, CategoryTile, ErrorState, StepperHeader, VariantCard } from '@/components';
+import { Box, Chip, MenuItem, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import {
+  AccentCard,
+  AppButton,
+  AppIcon,
+  AppLoading,
+  CategoryTile,
+  ErrorState,
+  FormSection,
+  PageHeader,
+  RhfTextField,
+  StepperHeader,
+  SurfaceCard,
+  VariantCard,
+} from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ApiError } from '@/lib/api/errors';
 import { digitsOnly, rialToToman, tomanToRial } from '@/utils';
 import {
@@ -23,7 +38,7 @@ import {
 } from '@/services/catalog/types';
 
 interface VariantBuilderProps {
-  /** `null` = create (3-step stepper); a variant = edit (category/options locked, price form only). */
+  /** `null` = create (stepped flow); a variant = edit (category/options locked, price form only). */
   initial: NurseServiceVariant | null;
   onDone: () => void;
   onCancel: () => void;
@@ -35,15 +50,40 @@ const DEFAULT_UNIT: PriceUnit = 'per_hour';
 const MAX_PRICE_DIGITS = 12;
 const MAX_DURATION_DIGITS = 4;
 
+type StepKey = 'category' | 'options' | 'price';
+
+interface VariantFormValues {
+  categoryId: number | null;
+  /** Option-group id → chosen value id. One field, so a category switch clears the whole answer set. */
+  options: Record<number, number>;
+  priceToman: string;
+  priceUnit: PriceUnit;
+  duration: string;
+  /** `null` until the nurse types over the auto-generated name — blank means "let the server name it". */
+  displayNameOverride: string | null;
+}
+
 /**
  * The nurse variant builder (`CreateVariant` / `UpdateVariant`).
  *
- * **Create** is a 3-step stepper: pick category → answer required/optional option groups → price +
- * unit + duration. Every `is_required` group must be answered before advancing; the price is entered
- * in **Toman** and converted to an IRR digit-string at the field boundary (`tomanToRial`, integer-safe,
- * never a float); the estimated total is shown only from `price` × `sessionCount`, never `price` alone;
- * `display_name` auto-generates from the chosen labels and is editable (left blank ⇒ the server
- * generates it). A duplicate identical listing (`409`) shows a friendly inline warning.
+ * **Create** walks category → options → price. Two things make the flow deterministic where it
+ * previously was not:
+ *
+ *  1. **A step that has nothing to ask is not shown.** Categories with no option groups used to get a
+ *     middle step whose entire content was "این دسته گزینه‌ای برای تنظیم ندارد" plus a Next button.
+ *     The step list is now derived from the loaded groups, so those categories go straight to pricing.
+ *  2. **Advancing is gated *before* the tap, not after it.** The old Next button was always enabled and
+ *     surfaced an error only once pressed, from a separate `optionsError` flag. Now the unanswered
+ *     required groups are named under the button while it is disabled, so the blocker is visible
+ *     without probing for it.
+ *
+ * The final step is a review as well as a form: the chosen category and options are recapped as chips
+ * beside the live `VariantCard`, so the listing can be checked without stepping backwards.
+ *
+ * Money still crosses the field boundary exactly once — the price is entered in **Toman** and
+ * converted to an IRR digit-string via `tomanToRial` (integer-safe, never a float); the estimated
+ * total is shown only from `price` × `sessionCount`, never `price` alone. A duplicate identical
+ * listing (`409`) shows a friendly inline warning that offers to edit the colliding listing instead.
  *
  * **Edit** locks the category + option-set (changing them would change identity) and edits only
  * price/unit/duration/display via `update`.
@@ -61,21 +101,29 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
   const updateVariant = useUpdateVariant();
   const submitting = createVariant.isPending || updateVariant.isPending;
 
-  // --- Create-only state (category → options) ---
-  const [activeStep, setActiveStep] = useState(0);
-  const [categoryId, setCategoryId] = useState<number | null>(initial?.serviceCategoryId ?? null);
-  const [selectedOptions, setSelectedOptions] = useState<Record<number, number>>({});
-  const [optionsError, setOptionsError] = useState(false);
-
-  // --- Shared price state (both create step 3 and edit) ---
-  // Pre-fill the price field in Toman (the wire carries IRR Rials); the money util does the ÷10.
-  const [priceToman, setPriceToman] = useState(initial ? String(rialToToman(initial.price)) : '');
-  const [priceUnit, setPriceUnit] = useState<PriceUnit>(initial?.priceUnit ?? DEFAULT_UNIT);
-  const [durationStr, setDurationStr] = useState(initial?.sessionCount ? String(initial.sessionCount) : '');
-  const [displayNameOverride, setDisplayNameOverride] = useState<string | null>(null);
-  const [priceError, setPriceError] = useState(false);
+  const [step, setStep] = useState<StepKey>(isEdit ? 'price' : 'category');
   const [duplicate, setDuplicate] = useState(false);
 
+  const form = useForm<VariantFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      categoryId: initial?.serviceCategoryId ?? null,
+      options: {},
+      // Pre-fill the price field in Toman (the wire carries IRR Rials); the money util does the ÷10.
+      priceToman: initial ? String(rialToToman(initial.price)) : '',
+      priceUnit: initial?.priceUnit ?? DEFAULT_UNIT,
+      duration: initial?.sessionCount ? String(initial.sessionCount) : '',
+      displayNameOverride: null,
+    },
+  });
+  const { control, handleSubmit, setValue } = form;
+  const categoryId = useWatch({ control, name: 'categoryId' });
+  const selectedOptions = useWatch({ control, name: 'options' });
+  const priceToman = useWatch({ control, name: 'priceToman' });
+  const priceUnit = useWatch({ control, name: 'priceUnit' });
+  const duration = useWatch({ control, name: 'duration' });
+  const displayNameOverride = useWatch({ control, name: 'displayNameOverride' });
+
   const categoriesQuery = useServiceCategories();
   const categories = categoriesQuery.data?.items ?? [];
   const optionGroupsQuery = useCategoryOptionGroups(isEdit ? null : categoryId);
@@ -85,6 +133,21 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
   const selectedCategory = categories.find((category) => category.id === categoryId) ?? null;
   const missingRequiredGroups = groups.filter((group) => group.isRequired && selectedOptions[group.id] == null);
 
+  // A category with no option groups has no question to ask, so its step doesn't exist. Until the
+  // groups for the chosen category have actually loaded the answer is unknown, and the assumption is
+  // "there is an options step" — that way the step count only ever collapses for a category proven to
+  // have none, instead of starting at two and growing the moment a category is tapped.
+  const optionsStepUnknown = categoryId == null || optionGroupsQuery.isLoading || optionGroupsQuery.isFetching;
+  const hasOptionsStep = !isEdit && (optionsStepUnknown || groups.length > 0);
+  const effectiveStep: StepKey = step === 'options' && !hasOptionsStep ? 'price' : step;
+
+  const visibleSteps: StepKey[] = hasOptionsStep ? ['category', 'options', 'price'] : ['category', 'price'];
+  const stepLabels: Record<StepKey, string> = {
+    category: t('step_category'),
+    options: t('step_options'),
+    price: t('step_price'),
+  };
+
   // Reuses the already-cached offerings list (MyServicesList holds the same query) to resolve which
   // existing listing a 409 duplicate collided with, so the recovery can offer "edit that one" directly.
   const myVariantsQuery = useMyVariants();
@@ -118,53 +181,51 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
 
   const priceValid = priceToman.length > 0 && BigInt(priceToman) > BigInt(0);
   const irr = priceValid ? tomanToRial(priceToman) : null;
-  const durationInt = durationStr ? Number(durationStr) : 0;
+  const durationInt = duration ? Number(duration) : 0;
   const sessionCount = durationInt > 0 ? durationInt : null;
 
   const selectCategory = (id: number) => {
     if (id === categoryId) return;
     // Switching category invalidates the previous category's option answers + auto-name.
-    setCategoryId(id);
-    setSelectedOptions({});
-    setDisplayNameOverride(null);
-    setOptionsError(false);
+    setValue('categoryId', id, { shouldDirty: true });
+    setValue('options', {});
+    setValue('displayNameOverride', null);
   };
 
   const changeOption = (groupId: number, valueId: number | null) => {
-    setOptionsError(false);
+    const next = { ...selectedOptions };
+    if (valueId == null) delete next[groupId];
+    else next[groupId] = valueId;
     // A manual displayName override is intentionally left untouched; the auto-name preview tracks
     // option changes only while the field hasn't been overridden (displayValue = override ?? autoName).
-    setSelectedOptions((prev) => {
-      const next = { ...prev };
-      if (valueId == null) delete next[groupId];
-      else next[groupId] = valueId;
-      return next;
-    });
+    setValue('options', next, { shouldDirty: true });
   };
 
-  const goNextFromOptions = () => {
-    if (missingRequiredGroups.length > 0) {
-      setOptionsError(true);
+  const goNext = () => {
+    if (effectiveStep === 'category') {
+      setStep(hasOptionsStep ? 'options' : 'price');
       return;
     }
-    setActiveStep(2);
+    setStep('price');
   };
 
-  const validatePrice = () => {
-    if (!priceValid) {
-      setPriceError(true);
-      return false;
+  const goBack = () => {
+    if (effectiveStep === 'price' && !isEdit) {
+      setStep(hasOptionsStep ? 'options' : 'category');
+      return;
     }
-    return true;
+    setStep('category');
   };
 
-  const submit = () => {
-    if (!validatePrice() || irr == null) return;
-    const displayName = displayNameOverride?.trim() ? displayNameOverride.trim() : undefined;
+  const submit = (values: VariantFormValues) => {
+    // `handleSubmit` has already enforced the price rule; this is the type narrowing that lets the
+    // IRR string be passed on, not a second gate.
+    if (irr == null) return;
+    const displayName = values.displayNameOverride?.trim() ? values.displayNameOverride.trim() : undefined;
 
     if (isEdit) {
       updateVariant.mutate(
-        { id: initial.id, input: { price: irr, priceUnit, sessionCount, displayName } },
+        { id: initial.id, input: { price: irr, priceUnit: values.priceUnit, sessionCount, displayName } },
         {
           onSuccess: () => {
             enqueueSnackbar(t('saved_toast'), { variant: 'success' });
@@ -176,12 +237,19 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
       return;
     }
 
-    const options: VariantOptionSelection[] = Object.entries(selectedOptions).map(([groupId, valueId]) => ({
+    const options: VariantOptionSelection[] = Object.entries(values.options).map(([groupId, valueId]) => ({
       optionGroupId: Number(groupId),
       optionValueId: valueId,
     }));
     createVariant.mutate(
-      { serviceCategoryId: categoryId as number, options, price: irr, priceUnit, sessionCount, displayName },
+      {
+        serviceCategoryId: values.categoryId as number,
+        options,
+        price: irr,
+        priceUnit: values.priceUnit,
+        sessionCount,
+        displayName,
+      },
       {
         onSuccess: () => {
           enqueueSnackbar(t('created_toast'), { variant: 'success' });
@@ -196,13 +264,13 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
     );
   };
 
-  // Step 3's live preview — the actual VariantCard, so the nurse sees the listing they're composing,
-  // not just an abstract price readout.
+  // The price step's live preview — the actual VariantCard, so the nurse sees the listing they're
+  // composing, not just an abstract price readout.
   const previewVariant: NurseServiceVariant = {
     id: 0,
     serviceCategoryId: categoryId ?? 0,
-    categoryNameFa: selectedCategory?.nameFa ?? '',
-    categoryNameEn: selectedCategory?.nameEn ?? '',
+    categoryNameFa: selectedCategory?.nameFa ?? initial?.categoryNameFa ?? '',
+    categoryNameEn: selectedCategory?.nameEn ?? initial?.categoryNameEn ?? '',
     price: irr ?? '0',
     priceUnit,
     sessionCount,
@@ -211,68 +279,119 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
     options: [],
   };
 
+  /** Category + chosen options, so the last step doubles as a review of the first two. */
+  const recapChips = isEdit
+    ? initial.options.map((option) => ({
+        key: String(option.optionGroupId),
+        label: `${pickCatalogName({ nameFa: option.groupNameFa, nameEn: option.groupNameEn }, locale)}: ${pickCatalogName({ nameFa: option.valueNameFa, nameEn: option.valueNameEn }, locale)}`,
+      }))
+    : groups.flatMap((group) => {
+        const value = group.values.find((candidate) => candidate.id === selectedOptions[group.id]);
+        return value
+          ? [{ key: String(group.id), label: `${pickCatalogName(group, locale)}: ${pickCatalogName(value, locale)}` }]
+          : [];
+      });
+
   const priceStep = (
     <Stack sx={{ gap: 2.5 }}>
-      <TextField
-        label={t('price_label')}
-        value={priceToman}
-        onChange={(event) => {
-          setPriceToman(digitsOnly(event.target.value).slice(0, MAX_PRICE_DIGITS));
-          if (priceError) setPriceError(false);
-          if (duplicate) setDuplicate(false);
-        }}
-        error={priceError}
-        helperText={priceError ? t('price_required') : t('price_hint')}
-        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
-        fullWidth
-      />
+      <FormSection title={t('section_recap_title')} description={t('section_recap_description')} icon="category">
+        <Stack sx={{ gap: 1 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+            {selectedCategory
+              ? pickCatalogName(selectedCategory, locale)
+              : initial
+                ? pickCatalogName({ nameFa: initial.categoryNameFa, nameEn: initial.categoryNameEn }, locale)
+                : ''}
+          </Typography>
+          {isEdit ? (
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('category_locked')}
+            </Typography>
+          ) : null}
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75 }}>
+            {recapChips.length > 0 ? (
+              recapChips.map((chip) => (
+                <Chip key={chip.key} size="small" label={chip.label} sx={{ bgcolor: 'var(--bal-primary-soft)' }} />
+              ))
+            ) : (
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {t('summary_none')}
+              </Typography>
+            )}
+          </Box>
+        </Stack>
+      </FormSection>
 
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <TextField
-          select
-          label={t('unit_label')}
-          value={priceUnit}
-          onChange={(event) => setPriceUnit(event.target.value as PriceUnit)}
-          fullWidth
-        >
-          {PRICE_UNITS.map((unit) => (
-            <MenuItem key={unit} value={unit}>
-              {tCatalog(`unit_${unit}`)}
-            </MenuItem>
-          ))}
-        </TextField>
-
-        <TextField
-          label={t('duration_label')}
-          value={durationStr}
-          onChange={(event) => setDurationStr(digitsOnly(event.target.value).slice(0, MAX_DURATION_DIGITS))}
-          helperText={t('duration_hint')}
+      <FormSection title={t('section_price_title')} description={t('price_hint')} icon="earnings">
+        <RhfTextField<VariantFormValues>
+          name="priceToman"
+          label={t('price_label')}
+          transform={(raw) => digitsOnly(raw).slice(0, MAX_PRICE_DIGITS)}
+          rules={{
+            validate: (value) => {
+              const raw = String(value ?? '');
+              return (raw.length > 0 && BigInt(raw) > BigInt(0)) || t('price_required');
+            },
+          }}
           slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
           fullWidth
         />
-      </Stack>
 
-      {irr ? (
+        <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
+          <RhfTextField<VariantFormValues> name="priceUnit" select label={t('unit_label')} fullWidth>
+            {PRICE_UNITS.map((unit) => (
+              <MenuItem key={unit} value={unit}>
+                {tCatalog(`unit_${unit}`)}
+              </MenuItem>
+            ))}
+          </RhfTextField>
+
+          <RhfTextField<VariantFormValues>
+            name="duration"
+            label={t('duration_label')}
+            helperText={t('duration_hint')}
+            transform={(raw) => digitsOnly(raw).slice(0, MAX_DURATION_DIGITS)}
+            slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
+            fullWidth
+          />
+        </Stack>
+
+        {!sessionCount && irr ? (
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('rate_note')}
+          </Typography>
+        ) : null}
+      </FormSection>
+
+      <FormSection title={t('section_listing_title')} description={t('display_name_hint')} icon="services">
+        {/* Not `RhfTextField`: what is *stored* is the override alone (blank ⇒ the server generates
+            the name), while what is *shown* falls back to the live auto-generated name. One field,
+            two values — the one case in this form where the display value isn't the form value. */}
+        <Controller
+          control={control}
+          name="displayNameOverride"
+          render={({ field }) => (
+            <TextField
+              label={t('display_name_label')}
+              name={field.name}
+              inputRef={field.ref}
+              value={field.value ?? autoName}
+              onChange={(event) => field.onChange(event.target.value)}
+              onBlur={field.onBlur}
+              fullWidth
+            />
+          )}
+        />
+
         <Stack sx={{ gap: 1 }}>
           <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 700 }}>
             {t('preview_heading')}
           </Typography>
+          {/* Shown even before a price is entered — the preview is what "comprehensive" means here:
+              the nurse should see the shape of the listing while composing it, not only once it's valid. */}
           <VariantCard variant={previewVariant} interactive={false} />
-          {!sessionCount ? (
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {t('rate_note')}
-            </Typography>
-          ) : null}
         </Stack>
-      ) : null}
-
-      <TextField
-        label={t('display_name_label')}
-        value={displayValue}
-        onChange={(event) => setDisplayNameOverride(event.target.value)}
-        helperText={t('display_name_hint')}
-        fullWidth
-      />
+      </FormSection>
 
       {duplicate ? (
         <AccentCard tone="warning" padding="sm">
@@ -301,157 +420,70 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
     </Stack>
   );
 
-  // --- Edit mode: locked category + options summary, then the price form ---
-  if (isEdit) {
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 560 }}>
-        <Typography variant="h5" component="h1">
-          {t('builder_edit_title')}
-        </Typography>
-
-        <Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
-          <Stack sx={{ gap: 1 }}>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {pickCatalogName({ nameFa: initial.categoryNameFa, nameEn: initial.categoryNameEn }, locale)}
-            </Typography>
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {t('category_locked')}
-            </Typography>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mt: 0.5 }}>
-              {initial.options.length > 0 ? (
-                initial.options.map((option) => (
-                  <Chip
-                    key={option.optionGroupId}
-                    size="small"
-                    label={`${pickCatalogName({ nameFa: option.groupNameFa, nameEn: option.groupNameEn }, locale)}: ${pickCatalogName({ nameFa: option.valueNameFa, nameEn: option.valueNameEn }, locale)}`}
-                    sx={{ bgcolor: 'var(--bal-primary-soft)' }}
-                  />
-                ))
-              ) : (
-                <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-                  {t('summary_none')}
-                </Typography>
-              )}
-            </Box>
-          </Stack>
-        </Paper>
-
-        {priceStep}
-
-        <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
-          <AppButton variant="text" onClick={onCancel} disabled={submitting}>
-            {tc('cancel')}
-          </AppButton>
-          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
-            {submitting ? tc('saving') : t('submit_save')}
-          </AppButton>
-        </Stack>
-      </Box>
-    );
-  }
-
-  // --- Create mode: the 3-step stepper ---
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 560 }}>
-      <Typography variant="h5" component="h1">
-        {t('builder_add_title')}
-      </Typography>
+    <FormProvider {...form}>
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleSubmit(submit)}
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}
+      >
+        <PageHeader title={isEdit ? t('builder_edit_title') : t('builder_add_title')} />
 
-      <StepperHeader
-        steps={[t('step_category'), t('step_options'), t('step_price')]}
-        activeStep={activeStep}
-      />
+        {isEdit ? null : (
+          <StepperHeader
+            steps={visibleSteps.map((key) => stepLabels[key])}
+            activeStep={visibleSteps.indexOf(effectiveStep)}
+          />
+        )}
 
-      {activeStep === 0 ? (
-        <Stack sx={{ gap: 1.5 }}>
-          <Box>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {t('category_title')}
-            </Typography>
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {t('category_subtitle')}
-            </Typography>
-          </Box>
-          {categoriesQuery.isLoading ? (
-            <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1.5 }}>
-              {[0, 1, 2, 3].map((key) => (
-                <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 2 }} />
-              ))}
-            </Box>
-          ) : categoriesQuery.isError ? (
-            <Stack sx={{ gap: 1, alignItems: 'flex-start' }}>
-              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                {t('categories_error')}
-              </Typography>
-              <AppButton variant="outlined" color="primary" onClick={() => categoriesQuery.refetch()}>
-                {tc('retry')}
-              </AppButton>
-            </Stack>
-          ) : (
-            <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1.5 }}>
-              {categories.map((category) => (
-                <CategoryTile
-                  key={category.id}
-                  label={pickCatalogName(category, locale)}
-                  iconKey={category.iconKey}
-                  selected={categoryId === category.id}
-                  onClick={() => selectCategory(category.id)}
-                />
-              ))}
-            </Box>
-          )}
-        </Stack>
-      ) : null}
+        {effectiveStep === 'category' ? (
+          <FormSection title={t('category_title')} description={t('category_subtitle')} icon="category">
+            {categoriesQuery.isLoading ? (
+              <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1.5 }}>
+                {[0, 1, 2, 3].map((key) => (
+                  <Skeleton key={key} variant="rounded" height={116} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
+                ))}
+              </Box>
+            ) : categoriesQuery.isError ? (
+              <ErrorState message={t('categories_error')} retryLabel={tc('retry')} onRetry={() => categoriesQuery.refetch()} />
+            ) : (
+              <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1.5 }}>
+                {categories.map((category) => (
+                  <CategoryTile
+                    key={category.id}
+                    label={pickCatalogName(category, locale)}
+                    iconKey={category.iconKey}
+                    selected={categoryId === category.id}
+                    onClick={() => selectCategory(category.id)}
+                  />
+                ))}
+              </Box>
+            )}
+          </FormSection>
+        ) : null}
 
-      {activeStep === 1 ? (
-        <Stack sx={{ gap: 2 }}>
-          <Box>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {t('options_title')}
-            </Typography>
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {t('options_subtitle')}
-            </Typography>
-          </Box>
-
-          {optionGroupsQuery.isLoading ? (
-            <AppLoading />
-          ) : optionGroupsQuery.isError ? (
-            // A failed fetch must never read as "this category has zero options" — that would let the
-            // nurse skip required options entirely. Block progression until the retry succeeds.
-            <ErrorState
-              message={t('options_error')}
-              retryLabel={tc('retry')}
-              onRetry={() => optionGroupsQuery.refetch()}
-            />
-          ) : groups.length === 0 ? (
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {t('options_none')}
-            </Typography>
-          ) : (
-            groups.map((group) => {
-              const isMissing = optionsError && group.isRequired && selectedOptions[group.id] == null;
-              return (
+        {effectiveStep === 'options' ? (
+          <FormSection title={t('options_title')} description={t('options_subtitle')} icon="tune">
+            {optionGroupsQuery.isLoading ? (
+              <AppLoading />
+            ) : optionGroupsQuery.isError ? (
+              // A failed fetch must never read as "this category has zero options" — that would let the
+              // nurse skip required options entirely. Block progression until the retry succeeds.
+              <ErrorState message={t('options_error')} retryLabel={tc('retry')} onRetry={() => optionGroupsQuery.refetch()} />
+            ) : (
+              groups.map((group) => (
                 <Stack key={group.id} sx={{ gap: 1 }}>
                   <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
                     <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                       {pickCatalogName(group, locale)}
                     </Typography>
-                    {/* The required badge turns red on a blocked advance to point at the unanswered group. */}
                     <Chip
                       size="small"
                       label={group.isRequired ? t('required_badge') : t('optional_badge')}
                       sx={{
-                        bgcolor: isMissing
-                          ? 'var(--bal-error)'
-                          : group.isRequired
-                            ? 'var(--bal-primary-soft)'
-                            : 'var(--bal-divider)',
-                        color: isMissing
-                          ? 'var(--bal-error-contrast)'
-                          : group.isRequired
-                            ? 'var(--bal-primary)'
-                            : 'text.secondary',
+                        bgcolor: group.isRequired ? 'var(--bal-primary-soft)' : 'var(--bal-divider)',
+                        color: group.isRequired ? 'var(--bal-primary)' : 'text.secondary',
                         fontWeight: 500,
                       }}
                     />
@@ -463,76 +495,64 @@ const VariantBuilder: FunctionComponent<VariantBuilderProps> = ({ initial, onDon
                         <Chip
                           key={value.id}
                           label={pickCatalogName(value, locale)}
-                          onClick={() => changeOption(group.id, selected ? null : value.id)}
+                          aria-pressed={selected}
+                          clickable
+                          color={selected ? 'primary' : 'default'}
                           variant={selected ? 'filled' : 'outlined'}
-                          sx={{
-                            fontWeight: 500,
-                            backgroundColor: selected ? 'var(--bal-primary)' : 'transparent',
-                            color: selected ? 'var(--bal-primary-contrast)' : 'var(--bal-primary)',
-                            borderColor: 'var(--bal-primary)',
-                          }}
+                          onClick={() => changeOption(group.id, selected ? null : value.id)}
                         />
                       );
                     })}
                   </Stack>
                 </Stack>
-              );
-            })
-          )}
+              ))
+            )}
+          </FormSection>
+        ) : null}
 
-          {optionsError && missingRequiredGroups.length > 0 ? (
-            <Typography variant="body2" sx={{ color: 'var(--bal-error)', fontWeight: 500 }}>
-              {t('options_incomplete')}
-            </Typography>
-          ) : null}
-        </Stack>
-      ) : null}
+        {effectiveStep === 'price' ? priceStep : null}
 
-      {activeStep === 2 ? (
-        <Stack sx={{ gap: 1.5 }}>
-          <Box>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {t('price_title')}
-            </Typography>
-          </Box>
-          {priceStep}
-        </Stack>
-      ) : null}
+        {/* Names what is still missing while the button is disabled, instead of revealing it on tap. */}
+        {effectiveStep === 'options' && missingRequiredGroups.length > 0 ? (
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('options_missing_named', {
+              groups: missingRequiredGroups.map((group) => pickCatalogName(group, locale)).join('، '),
+            })}
+          </Typography>
+        ) : null}
 
-      <Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between', mt: 1 }}>
-        <AppButton
-          variant="text"
-          onClick={activeStep === 0 ? onCancel : () => setActiveStep((step) => step - 1)}
-          disabled={submitting}
-        >
-          {activeStep === 0 ? tc('cancel') : tc('back')}
-        </AppButton>
+        <SurfaceCard padding="sm" sx={{ position: 'sticky', bottom: 'var(--bal-chrome-bottom, 0px)', zIndex: 1 }}>
+          <Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between' }}>
+            <AppButton
+              variant="text"
+              onClick={effectiveStep === 'category' || isEdit ? onCancel : goBack}
+              disabled={submitting}
+            >
+              {effectiveStep === 'category' || isEdit ? tc('cancel') : tc('back')}
+            </AppButton>
 
-        {activeStep === 0 ? (
-          <AppButton
-            color="primary"
-            variant="contained"
-            onClick={() => setActiveStep(1)}
-            disabled={categoryId == null}
-          >
-            {t('next')}
-          </AppButton>
-        ) : activeStep === 1 ? (
-          <AppButton
-            color="primary"
-            variant="contained"
-            onClick={goNextFromOptions}
-            disabled={optionGroupsQuery.isError}
-          >
-            {t('next')}
-          </AppButton>
-        ) : (
-          <AppButton color="primary" variant="contained" onClick={submit} disabled={submitting}>
-            {submitting ? tc('saving') : t('submit_create')}
-          </AppButton>
-        )}
-      </Stack>
-    </Box>
+            {effectiveStep === 'price' ? (
+              <AppButton type="submit" color="primary" variant="contained" disabled={submitting}>
+                {submitting ? tc('saving') : isEdit ? t('submit_save') : t('submit_create')}
+              </AppButton>
+            ) : (
+              <AppButton
+                color="primary"
+                variant="contained"
+                onClick={goNext}
+                disabled={
+                  effectiveStep === 'category'
+                    ? categoryId == null
+                    : optionGroupsQuery.isError || missingRequiredGroups.length > 0
+                }
+              >
+                {t('next')}
+              </AppButton>
+            )}
+          </Stack>
+        </SurfaceCard>
+      </Box>
+    </FormProvider>
   );
 };
 

client/src/app/[locale]/(private-routes)/nurse/verification/credentials/page.tsx

@@ -1,10 +1,20 @@
 'use client';
-import { useMemo, useState } from 'react';
+import { FunctionComponent, useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import { Box, Chip, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, DocumentUpload, JalaliDateField } from '@/components';
+import {
+  AppButton,
+  AppIcon,
+  AppLoading,
+  DocumentUpload,
+  FormSection,
+  RhfChipSelect,
+  RhfJalaliDateField,
+  RhfTextField,
+} from '@/components';
 import type { UploadedDocInfo } from '@/components';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
@@ -15,101 +25,42 @@ import {
   useVerificationStatus,
 } from '@/services/verification';
 import { SPECIALTY_PRESETS } from '@/services/verification/types';
-import type { VerificationStep } from '@/services/verification/types';
+import type { VerificationStatus, VerificationStep } from '@/services/verification/types';
 import { stepDescriptionKey, stepLabelKey } from '../verificationSteps';
 import VerificationJourneyHeader from '../VerificationJourneyHeader';
 
 const MANUAL_CREDENTIAL_CODES = ['moh_competency_license', 'ino_membership', 'criminal_record'];
 
+interface CredentialsFormValues {
+  inoNumber: string;
+  specialties: string[];
+  issuingAuthority: string;
+  issuedAt: string | null;
+  expiresAt: string | null;
+}
+
 /**
  * B5 — professional credentials. Renders a `DocumentUpload` for **each manual credential step in the
  * status** (data-driven — a new manual step renders without a code change); each upload moves its step
  * to `in_review` (manual admin review — copy never claims an automated authority check).
  *
- * Hydrates from `status.credentialSubmission` (REQ-056, mock-tolerant): once the INO number has been
- * recorded, the field locks into a "شمارهٔ نظام ثبت شد" summary — never re-prompted as if lost, and
- * never re-sent blank (the server's `CredentialDetailsInput.inoNumber` is required; the raw number is
- * never read back by design, so re-submitting it isn't possible without the nurse re-entering it via
- * "تغییر"). A returning, already-submitted nurse can still fix a **rejected** document directly (each
- * upload takes effect immediately, no re-submit needed) and simply returns to the journey — no dead
- * disabled button, because there is no button to be dead.
+ * The whole screen used to be one undivided column: a number field, three uploaders, a chip row with
+ * its own add-a-custom-value sub-form, two date pickers and a submit button, with two independent
+ * `editingIno ? … : …` branches interleaved through it. Grouping the same content into four named
+ * sections — شماره نظام / مدارک / تخصص‌ها / جزئیات مدرک — makes the two genuinely optional groups
+ * visibly optional and gives the "what still blocks submit?" answer somewhere to live.
  */
 export default function CredentialsSubmitPage() {
   const t = useTranslations('verification');
   const locale = useLocale();
-  const router = useRouter();
-  const { enqueueSnackbar } = useSnackbar();
 
   const { data: status, isLoading } = useVerificationStatus();
-  const uploadDocument = useUploadVerificationDocument();
-  const submitCredentials = useSubmitCredentials();
-
-  const submission = status?.credentialSubmission;
-
-  const [inoNumber, setInoNumber] = useState('');
-  const [inoError, setInoError] = useState(false);
-  const [editingIno, setEditingIno] = useState(true);
-  const [specialties, setSpecialties] = useState<string[]>([]);
-  const [customSpecialty, setCustomSpecialty] = useState('');
-  const [issuingAuthority, setIssuingAuthority] = useState('');
-  const [issuedAt, setIssuedAt] = useState<string | null>(null);
-  const [expiresAt, setExpiresAt] = useState<string | null>(null);
-  const [uploadedSteps, setUploadedSteps] = useState<Record<number, boolean>>({});
-  const [hydrated, setHydrated] = useState(false);
-
-  // Hydrate once from the server's read-back, adjusted directly during render (never in an effect —
-  // that would cascade an extra render) — and never overwrite what the nurse is actively editing.
-  if (!hydrated && submission) {
-    setHydrated(true);
-    setEditingIno(!submission.inoNumberSubmitted);
-    setSpecialties(submission.specialties);
-    setIssuingAuthority(submission.issuingAuthority ?? '');
-    setIssuedAt(submission.issuedAt ?? null);
-    setExpiresAt(submission.expiresAt ?? null);
-  }
 
   const manualSteps = useMemo(
     () => (status?.steps ?? []).filter((step) => MANUAL_CREDENTIAL_CODES.includes(step.code)),
     [status],
   );
 
-  const toggleSpecialty = (value: string) =>
-    setSpecialties((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]));
-
-  const addCustomSpecialty = () => {
-    const value = customSpecialty.trim();
-    if (value && !specialties.includes(value)) setSpecialties((prev) => [...prev, value]);
-    setCustomSpecialty('');
-  };
-
-  const uploadToStep = (step: VerificationStep) => async (file: File, onProgress: (percent: number) => void) => {
-    const doc = await uploadDocument.mutateAsync({ stepId: step.id, file, onProgress });
-    return { name: doc.originalFileName ?? file.name, sizeBytes: doc.fileSizeBytes } satisfies UploadedDocInfo;
-  };
-
-  const handleSubmit = () => {
-    const inoValid = inoNumber.trim().length > 0;
-    setInoError(!inoValid);
-    if (!inoValid) return;
-
-    submitCredentials.mutate(
-      {
-        inoNumber: inoNumber.trim(),
-        specialties,
-        issuingAuthority: issuingAuthority.trim() || undefined,
-        issuedAt: issuedAt ?? undefined,
-        expiresAt: expiresAt ?? undefined,
-      },
-      {
-        onSuccess: () => {
-          enqueueSnackbar(t('credentials_submitted'), { variant: 'success' });
-          router.push(`/${locale}${ROUTES.NURSE_VERIFICATION_REVIEW}`);
-        },
-        onError: () => enqueueSnackbar(t('credentials_error'), { variant: 'error' }),
-      },
-    );
-  };
-
   if (isLoading) return <AppLoading />;
 
   if (!status || manualSteps.length === 0) {
@@ -126,227 +77,293 @@ export default function CredentialsSubmitPage() {
     );
   }
 
+  return <CredentialsForm status={status} manualSteps={manualSteps} />;
+}
+
+/**
+ * Hydrates from `status.credentialSubmission` (REQ-056, mock-tolerant) as react-hook-form
+ * `defaultValues` — mounted only once the status query has resolved, which is what lets the server
+ * read-back *be* the initial form state instead of being copied into it by a render-time state
+ * adjustment. Once the INO number has been recorded the field locks into a "شمارهٔ نظام ثبت شد"
+ * summary — never re-prompted as if lost, and never re-sent blank (the server's
+ * `CredentialDetailsInput.inoNumber` is required; the raw number is never read back by design, so
+ * re-submitting it isn't possible without the nurse re-entering it via "تغییر"). A returning,
+ * already-submitted nurse can still fix a **rejected** document directly (each upload takes effect
+ * immediately, no re-submit needed) and simply returns to the journey.
+ */
+const CredentialsForm: FunctionComponent<{ status: VerificationStatus; manualSteps: VerificationStep[] }> = ({
+  status,
+  manualSteps,
+}) => {
+  const t = useTranslations('verification');
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  const router = useRouter();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const uploadDocument = useUploadVerificationDocument();
+  const submitCredentials = useSubmitCredentials();
+  const submission = status.credentialSubmission;
+
+  const [editingIno, setEditingIno] = useState(!submission?.inoNumberSubmitted);
+  const [customSpecialty, setCustomSpecialty] = useState('');
+  const [uploadedSteps, setUploadedSteps] = useState<Record<number, boolean>>({});
+
+  const form = useForm<CredentialsFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      inoNumber: '',
+      specialties: submission?.specialties ?? [],
+      issuingAuthority: submission?.issuingAuthority ?? '',
+      issuedAt: submission?.issuedAt ?? null,
+      expiresAt: submission?.expiresAt ?? null,
+    },
+  });
+  const { control, handleSubmit, setValue } = form;
+  const specialties = useWatch({ control, name: 'specialties' });
+  const issuedAt = useWatch({ control, name: 'issuedAt' });
+  const expiresAt = useWatch({ control, name: 'expiresAt' });
+  const issuingAuthority = useWatch({ control, name: 'issuingAuthority' });
+
+  const addCustomSpecialty = () => {
+    const value = customSpecialty.trim();
+    if (value && !specialties.includes(value)) {
+      setValue('specialties', [...specialties, value], { shouldDirty: true });
+    }
+    setCustomSpecialty('');
+  };
+
+  const uploadToStep = (step: VerificationStep) => async (file: File, onProgress: (percent: number) => void) => {
+    const doc = await uploadDocument.mutateAsync({ stepId: step.id, file, onProgress });
+    return { name: doc.originalFileName ?? file.name, sizeBytes: doc.fileSizeBytes } satisfies UploadedDocInfo;
+  };
+
   // A returning nurse with any manual step already on file (server truth) is never dead-ended: while
   // actively (re-)entering the INO number, the gate also counts server-side documents, not only this
   // session's uploads.
-  const hasAnyDocument =
-    Object.values(uploadedSteps).some(Boolean) ||
-    manualSteps.some((step) => step.status === 'in_review' || step.status === 'passed');
-  const canSubmit = hasAnyDocument && !submitCredentials.isPending;
+  const uploadedCount =
+    manualSteps.filter((step) => uploadedSteps[step.id] || step.status === 'in_review' || step.status === 'passed')
+      .length;
+  const hasAnyDocument = uploadedCount > 0;
+
+  const submit = (values: CredentialsFormValues) => {
+    submitCredentials.mutate(
+      {
+        inoNumber: values.inoNumber.trim(),
+        specialties: values.specialties,
+        issuingAuthority: values.issuingAuthority.trim() || undefined,
+        issuedAt: values.issuedAt ?? undefined,
+        expiresAt: values.expiresAt ?? undefined,
+      },
+      {
+        onSuccess: () => {
+          enqueueSnackbar(t('credentials_submitted'), { variant: 'success' });
+          router.push(`/${locale}${ROUTES.NURSE_VERIFICATION_REVIEW}`);
+        },
+        onError: () => enqueueSnackbar(t('credentials_error'), { variant: 'error' }),
+      },
+    );
+  };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
-      <VerificationJourneyHeader group="credentials" />
+    <FormProvider {...form}>
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleSubmit(submit)}
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}
+      >
+        <VerificationJourneyHeader group="credentials" />
 
-      <Box>
-        <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
-          {t('credentials_title')}
-        </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('credentials_subtitle')}
         </Typography>
-      </Box>
 
-      {editingIno ? (
-        <TextField
-          label={t('ino_number_label')}
-          value={inoNumber}
-          onChange={(event) => {
-            setInoNumber(event.target.value);
-            if (inoError) setInoError(false);
-          }}
-          error={inoError}
-          helperText={inoError ? t('ino_number_required') : t('ino_number_hint')}
-          slotProps={{ htmlInput: { dir: 'ltr', style: { textAlign: 'start' } } }}
-          fullWidth
-        />
-      ) : (
-        <Stack
-          direction="row"
-          sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
+        <FormSection title={t('ino_number_label')} description={t('ino_number_hint')} icon="license">
+          {editingIno ? (
+            <RhfTextField<CredentialsFormValues>
+              name="inoNumber"
+              label={t('ino_number_label')}
+              rules={{ required: t('ino_number_required') }}
+              slotProps={{ htmlInput: { dir: 'ltr', style: { textAlign: 'start' } } }}
+              fullWidth
+            />
+          ) : (
+            <Stack
+              direction="row"
+              sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', p: 1.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}
+            >
+              <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
+                <AppIcon icon="verified" size={18} color="var(--bal-success)" />
+                <Typography variant="body2">{t('ino_number_submitted')}</Typography>
+              </Stack>
+              <AppButton variant="text" color="primary" onClick={() => setEditingIno(true)}>
+                {t('ino_number_change')}
+              </AppButton>
+            </Stack>
+          )}
+        </FormSection>
+
+        {/* One uploader per manual credential step — data-driven from the status. Re-uploading a
+            rejected document always takes effect immediately, whether or not the INO number is locked. */}
+        <FormSection
+          title={t('credentials_documents_title')}
+          description={t('credentials_documents_description')}
+          icon="document"
+          status={
+            <Typography variant="caption" sx={{ color: 'text.secondary', flexShrink: 0 }}>
+              {t('credentials_documents_count', { done: uploadedCount, total: manualSteps.length })}
+            </Typography>
+          }
         >
-          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
-            <AppIcon icon="verified" size={18} color="var(--bal-success)" />
-            <Typography variant="body2">{t('ino_number_submitted')}</Typography>
-          </Stack>
-          <AppButton variant="text" color="primary" onClick={() => setEditingIno(true)}>
-            {t('ino_number_change')}
-          </AppButton>
-        </Stack>
-      )}
+          {manualSteps.map((step) => (
+            <DocumentUpload
+              key={step.code}
+              label={t.has(stepLabelKey(step.code)) ? t(stepLabelKey(step.code)) : step.displayName}
+              hint={t.has(stepDescriptionKey(step.code)) ? t(stepDescriptionKey(step.code)) : undefined}
+              onUpload={uploadToStep(step)}
+              onUploaded={() => setUploadedSteps((prev) => ({ ...prev, [step.id]: true }))}
+              rejected={step.status === 'failed'}
+              rejectionReason={step.failureReason ?? undefined}
+              existingDoc={step.status === 'in_review' || step.status === 'passed' ? { name: t('doc_uploaded') } : null}
+            />
+          ))}
 
-      {/* One uploader per manual credential step — data-driven from the status. Re-uploading a
-          rejected document always takes effect immediately, whether or not the INO number is locked. */}
-      <Stack sx={{ gap: 2 }}>
-        {manualSteps.map((step) => (
-          <DocumentUpload
-            key={step.code}
-            label={t.has(stepLabelKey(step.code)) ? t(stepLabelKey(step.code)) : step.displayName}
-            hint={t.has(stepDescriptionKey(step.code)) ? t(stepDescriptionKey(step.code)) : undefined}
-            onUpload={uploadToStep(step)}
-            onUploaded={() => setUploadedSteps((prev) => ({ ...prev, [step.id]: true }))}
-            rejected={step.status === 'failed'}
-            rejectionReason={step.failureReason ?? undefined}
-            existingDoc={step.status === 'in_review' || step.status === 'passed' ? { name: t('doc_uploaded') } : null}
-          />
-        ))}
-      </Stack>
+          {editingIno ? (
+            <DocumentUpload label={t('education_label')} hint={t('education_hint')} onUpload={async (file) => ({ name: file.name })} />
+          ) : null}
+        </FormSection>
 
-      {editingIno ? (
-        <DocumentUpload label={t('education_label')} hint={t('education_hint')} onUpload={async (file) => ({ name: file.name })} />
-      ) : null}
+        <FormSection
+          title={t('specialties_label')}
+          description={t('specialties_hint')}
+          icon="clinical"
+          optional
+          optionalLabel={tc('optional')}
+        >
+          {editingIno ? (
+            <>
+              <RhfChipSelect<CredentialsFormValues>
+                name="specialties"
+                options={SPECIALTY_PRESETS.map((preset) => ({
+                  code: preset,
+                  label: t.has(`specialty_${preset}`) ? t(`specialty_${preset}`) : preset,
+                }))}
+                allowCustomValues
+              />
+              <Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start' }}>
+                <TextField
+                  size="small"
+                  placeholder={t('specialty_add_placeholder')}
+                  value={customSpecialty}
+                  onChange={(event) => setCustomSpecialty(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      addCustomSpecialty();
+                    }
+                  }}
+                />
+                <AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty}>
+                  {t('specialty_add')}
+                </AppButton>
+              </Stack>
+            </>
+          ) : specialties.length > 0 ? (
+            <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+              {specialties.map((value) => (
+                <Chip
+                  key={value}
+                  label={t.has(`specialty_${value}`) ? t(`specialty_${value}`) : value}
+                  sx={{ fontWeight: 500, backgroundColor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)' }}
+                />
+              ))}
+            </Stack>
+          ) : (
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('summary_none')}
+            </Typography>
+          )}
+        </FormSection>
+
+        {/* Optional registry details the admin cross-checks — issue/expiry feed the credential-expiry
+            sweep, so wrong dates are a correctness risk; a Jalali picker replaces the Gregorian-only
+            native input. */}
+        {editingIno ? (
+          <FormSection
+            title={t('registry_details_title')}
+            description={t('registry_details_description')}
+            icon="audit"
+            optional
+            optionalLabel={tc('optional')}
+          >
+            <RhfTextField<CredentialsFormValues> name="issuingAuthority" label={t('issuing_authority_label')} fullWidth />
+            <Stack direction="row" sx={{ gap: 1.5, flexWrap: 'wrap' }}>
+              <RhfJalaliDateField<CredentialsFormValues>
+                name="issuedAt"
+                label={t('issued_at_label')}
+                max={expiresAt ?? undefined}
+                sx={{ flex: 1, minWidth: 160 }}
+              />
+              <RhfJalaliDateField<CredentialsFormValues>
+                name="expiresAt"
+                label={t('expires_at_label')}
+                min={issuedAt ?? undefined}
+                sx={{ flex: 1, minWidth: 160 }}
+              />
+            </Stack>
+          </FormSection>
+        ) : issuingAuthority || issuedAt || expiresAt ? (
+          <FormSection title={t('registry_details_title')} icon="audit">
+            {issuingAuthority ? <Typography variant="body2">{issuingAuthority}</Typography> : null}
+            {issuedAt || expiresAt ? (
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {issuedAt ? formatShamsiDate(issuedAt, locale) : ''}
+                {issuedAt && expiresAt ? ' – ' : ''}
+                {expiresAt ? formatShamsiDate(expiresAt, locale) : ''}
+              </Typography>
+            ) : null}
+          </FormSection>
+        ) : null}
+
+        <Paper
+          elevation={0}
+          sx={{ p: 1.5, borderRadius: 'var(--bal-radius-md)', bgcolor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
+        >
+          <AppIcon icon="info" size={18} color="var(--bal-primary)" />
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('manual_review_note')}
+          </Typography>
+        </Paper>
 
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('specialties_label')}
-        </Typography>
         {editingIno ? (
           <>
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {t('specialties_hint')}
-            </Typography>
-            <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-              {SPECIALTY_PRESETS.map((preset) => {
-                const selected = specialties.includes(preset);
-                return (
-                  <Chip
-                    key={preset}
-                    label={t.has(`specialty_${preset}`) ? t(`specialty_${preset}`) : preset}
-                    onClick={() => toggleSpecialty(preset)}
-                    icon={selected ? <AppIcon icon="verified" size={16} color="var(--bal-primary-contrast)" /> : undefined}
-                    variant={selected ? 'filled' : 'outlined'}
-                    sx={{
-                      fontWeight: 500,
-                      backgroundColor: selected ? 'var(--bal-primary)' : 'transparent',
-                      color: selected ? 'var(--bal-primary-contrast)' : 'var(--bal-primary)',
-                      borderColor: 'var(--bal-primary)',
-                    }}
-                  />
-                );
-              })}
-              {specialties
-                .filter((value) => !SPECIALTY_PRESETS.includes(value))
-                .map((value) => (
-                  <Chip
-                    key={value}
-                    label={value}
-                    onDelete={() => toggleSpecialty(value)}
-                    sx={{ fontWeight: 500, backgroundColor: 'var(--bal-primary)', color: 'var(--bal-primary-contrast)' }}
-                  />
-                ))}
-            </Stack>
-            <Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start' }}>
-              <TextField
-                size="small"
-                placeholder={t('specialty_add_placeholder')}
-                value={customSpecialty}
-                onChange={(event) => setCustomSpecialty(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    addCustomSpecialty();
-                  }
-                }}
-              />
-              <AppButton variant="outlined" color="primary" startIcon="add" onClick={addCustomSpecialty}>
-                {t('specialty_add')}
+            {!hasAnyDocument ? (
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {t('credentials_needs_document')}
+              </Typography>
+            ) : null}
+            <Stack direction="row" sx={{ gap: 1 }}>
+              <AppButton
+                type="submit"
+                color="primary"
+                variant="contained"
+                startIcon="license"
+                disabled={!hasAnyDocument || submitCredentials.isPending}
+              >
+                {submitCredentials.isPending ? t('credentials_submitting') : t('credentials_submit')}
+              </AppButton>
+              <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
+                {t('back_to_checklist')}
               </AppButton>
             </Stack>
           </>
-        ) : specialties.length > 0 ? (
-          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-            {specialties.map((value) => (
-              <Chip
-                key={value}
-                label={t.has(`specialty_${value}`) ? t(`specialty_${value}`) : value}
-                sx={{ fontWeight: 500, backgroundColor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)' }}
-              />
-            ))}
-          </Stack>
         ) : (
-          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-            {t('summary_none')}
-          </Typography>
+          <AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ alignSelf: 'flex-start' }}>
+            {t('back_to_checklist')}
+          </AppButton>
         )}
-      </Stack>
-
-      {/* Optional registry details the admin cross-checks — issue/expiry feed the credential-expiry sweep, so
-          wrong dates are a correctness risk; a Jalali picker replaces the Gregorian-only native input. */}
-      {editingIno ? (
-        <Stack sx={{ gap: 1.5 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-            {t('registry_details_label')}
-          </Typography>
-          <TextField
-            label={t('issuing_authority_label')}
-            value={issuingAuthority}
-            onChange={(event) => setIssuingAuthority(event.target.value)}
-            fullWidth
-          />
-          <Stack direction="row" sx={{ gap: 1.5, flexWrap: 'wrap' }}>
-            <JalaliDateField
-              label={t('issued_at_label')}
-              value={issuedAt}
-              onChange={setIssuedAt}
-              max={expiresAt ?? undefined}
-              sx={{ flex: 1, minWidth: 160 }}
-            />
-            <JalaliDateField
-              label={t('expires_at_label')}
-              value={expiresAt}
-              onChange={setExpiresAt}
-              min={issuedAt ?? undefined}
-              sx={{ flex: 1, minWidth: 160 }}
-            />
-          </Stack>
-        </Stack>
-      ) : issuingAuthority || issuedAt || expiresAt ? (
-        <Stack sx={{ gap: 0.5 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-            {t('registry_details_label')}
-          </Typography>
-          {issuingAuthority ? <Typography variant="body2">{issuingAuthority}</Typography> : null}
-          {issuedAt || expiresAt ? (
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {issuedAt ? formatShamsiDate(issuedAt, locale) : ''}
-              {issuedAt && expiresAt ? ' – ' : ''}
-              {expiresAt ? formatShamsiDate(expiresAt, locale) : ''}
-            </Typography>
-          ) : null}
-        </Stack>
-      ) : null}
-
-      <Paper
-        elevation={0}
-        sx={{ p: 1.5, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
-      >
-        <AppIcon icon="info" size={18} color="var(--bal-primary)" />
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('manual_review_note')}
-        </Typography>
-      </Paper>
-
-      {editingIno ? (
-        <>
-          {!hasAnyDocument ? (
-            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-              {t('credentials_needs_document')}
-            </Typography>
-          ) : null}
-          <Stack direction="row" sx={{ gap: 1 }}>
-            <AppButton color="primary" variant="contained" startIcon="license" onClick={handleSubmit} disabled={!canSubmit}>
-              {submitCredentials.isPending ? t('credentials_submitting') : t('credentials_submit')}
-            </AppButton>
-            <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
-              {t('back_to_checklist')}
-            </AppButton>
-          </Stack>
-        </>
-      ) : (
-        <AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`} sx={{ alignSelf: 'flex-start' }}>
-          {t('back_to_checklist')}
-        </AppButton>
-      )}
-    </Box>
+      </Box>
+    </FormProvider>
   );
-}
+};

client/src/app/[locale]/(private-routes)/nurse/verification/identity/page.tsx

@@ -2,9 +2,10 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
+import { useForm, FormProvider, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Box, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppAlert, AppButton, AppIcon, DocumentUpload } from '@/components';
+import { Box, Paper, Stack, Typography } from '@mui/material';
+import { AppAlert, AppButton, AppIcon, DocumentUpload, FormSection, RhfTextField } from '@/components';
 import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { ROUTES } from '@/constants';
 import { toEnglishDigits } from '@/utils';
@@ -16,6 +17,12 @@ import VerificationJourneyHeader from '../VerificationJourneyHeader';
 
 type SubmitError = { key: 'national_id_mismatch' | 'shared_sim' | 'shahkar_mismatch' } | null;
 
+interface IdentityFormValues {
+  nationalId: string;
+  cardCaptured: boolean;
+  selfieCaptured: boolean;
+}
+
 /**
  * B4 — identity submission. Collects the national id (10-digit + checksum), a national-ID card image,
  * and a liveness selfie, then runs the automated civil-registry KYC + the chained Shahkar match. The
@@ -23,6 +30,12 @@ type SubmitError = { key: 'national_id_mismatch' | 'shared_sim' | 'shahkar_misma
  * so `DocumentUpload` runs in local mode here. The auto-query note is honest — this check is performed.
  * The shared-SIM Shahkar failure surfaces as a clear, non-accusatory message; a national-ID mismatch on
  * its own step.
+ *
+ * Structured as three named steps rather than one column of controls: the screen asks for a number, a
+ * card photo and a selfie, and the old layout gave no clue that the selfie was the only *required* one
+ * of the three — the submit button simply stayed dead with the reason buried in a caption near the
+ * bottom. Each capture's completion is a real form field, so the requirement is declared where it
+ * applies instead of re-derived in the submit handler.
  */
 export default function IdentitySubmitPage() {
   const t = useTranslations('verification');
@@ -31,25 +44,23 @@ export default function IdentitySubmitPage() {
   const { enqueueSnackbar } = useSnackbar();
   const submitIdentity = useSubmitIdentity();
 
-  const [nationalId, setNationalId] = useState('');
-  const [idError, setIdError] = useState(false);
-  const [cardCaptured, setCardCaptured] = useState(false);
-  const [selfieCaptured, setSelfieCaptured] = useState(false);
   const [submitError, setSubmitError] = useState<SubmitError>(null);
 
+  const form = useForm<IdentityFormValues>({
+    mode: 'onTouched',
+    defaultValues: { nationalId: '', cardCaptured: false, selfieCaptured: false },
+  });
+  const { control, handleSubmit, setValue } = form;
+  const cardCaptured = useWatch({ control, name: 'cardCaptured' });
+  const selfieCaptured = useWatch({ control, name: 'selfieCaptured' });
+
   // Local capture: the card/selfie feed the automated KYC (no stored document) — resolve immediately.
   const captureLocally = async (file: File) => ({ name: file.name });
 
-  const canSubmit = isValidNationalId(nationalId) && selfieCaptured && !submitIdentity.isPending;
-
-  const handleSubmit = () => {
-    const idValid = isValidNationalId(nationalId);
-    setIdError(!idValid);
+  const submit = (values: IdentityFormValues) => {
     setSubmitError(null);
-    if (!idValid || !selfieCaptured) return;
-
     submitIdentity.mutate(
-      { nationalId, livenessCaptured: selfieCaptured },
+      { nationalId: values.nationalId, livenessCaptured: values.selfieCaptured },
       {
         onSuccess: (result: SubmitIdentityResult) => {
           if (result.identity.stepStatus === 'failed') {
@@ -68,92 +79,126 @@ export default function IdentitySubmitPage() {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
-      <VerificationJourneyHeader group="identity" />
+    <FormProvider {...form}>
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleSubmit(submit)}
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}
+      >
+        <VerificationJourneyHeader group="identity" />
 
-      <Box>
-        <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
-          {t('identity_title')}
-        </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('identity_subtitle')}
         </Typography>
-      </Box>
 
-      <TextField
-        label={t('national_id_label')}
-        value={nationalId}
-        onChange={(event) => {
-          setNationalId(toEnglishDigits(event.target.value).replace(/\D/g, '').slice(0, NATIONAL_ID_LENGTH));
-          if (idError) setIdError(false);
-        }}
-        error={idError}
-        helperText={idError ? t('national_id_invalid') : t('national_id_hint')}
-        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start', letterSpacing: 2 } } }}
-        fullWidth
-      />
+        <FormSection title={t('identity_step_number_title')} description={t('national_id_hint')} icon="identity">
+          <RhfTextField<IdentityFormValues>
+            name="nationalId"
+            label={t('national_id_label')}
+            transform={(raw) => toEnglishDigits(raw).replace(/\D/g, '').slice(0, NATIONAL_ID_LENGTH)}
+            rules={{ validate: (value) => isValidNationalId(String(value ?? '')) || t('national_id_invalid') }}
+            slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start', letterSpacing: 2 } } }}
+            fullWidth
+          />
+        </FormSection>
 
-      <Stack sx={{ gap: 1 }}>
-        <CaptureGuideFrame variant="card" />
-        <DocumentUpload
-          label={t('card_label')}
-          hint={t('card_hint')}
-          accept={ACCEPTED_IMAGE_TYPES}
-          capture="environment"
-          onUpload={captureLocally}
-          onUploaded={() => setCardCaptured(true)}
-        />
-      </Stack>
-
-      <Stack sx={{ gap: 1 }}>
-        <CaptureGuideFrame variant="selfie" />
-        <DocumentUpload
-          label={t('selfie_label')}
-          hint={t('selfie_hint')}
-          accept={ACCEPTED_IMAGE_TYPES}
-          capture="user"
-          onUpload={captureLocally}
-          onUploaded={() => setSelfieCaptured(true)}
-        />
-      </Stack>
-
-      <Paper
-        elevation={0}
-        sx={{ p: 1.5, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
-      >
-        <AppIcon icon="info" size={18} color="var(--bal-primary)" />
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('auto_registry_note')}
-        </Typography>
-      </Paper>
-
-      {submitError ? (
-        <AppAlert severity={submitError.key === 'shared_sim' ? 'warning' : 'error'} variant="outlined">
-          {t(`error_${submitError.key}`)}
-        </AppAlert>
-      ) : null}
-
-      {!cardCaptured ? (
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('card_recommended')}
-        </Typography>
-      ) : null}
-
-      <Stack direction="row" sx={{ gap: 1 }}>
-        <AppButton
-          color="primary"
-          variant="contained"
-          startIcon="identity"
-          onClick={handleSubmit}
-          disabled={!canSubmit}
+        <FormSection
+          title={t('card_label')}
+          description={t('card_hint')}
+          icon="camera"
+          optional
+          optionalLabel={t('card_recommended_short')}
+          status={cardCaptured ? <CapturedMark label={t('capture_done')} /> : undefined}
         >
-          {submitIdentity.isPending ? t('identity_submitting') : t('identity_submit')}
-        </AppButton>
-        <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
-          {t('back_to_checklist')}
-        </AppButton>
-      </Stack>
-    </Box>
+          <CaptureGuideFrame variant="card" />
+          <DocumentUpload
+            label={t('card_label')}
+            hint={t('capture_hint_card')}
+            accept={ACCEPTED_IMAGE_TYPES}
+            capture="environment"
+            onUpload={captureLocally}
+            onUploaded={() => setValue('cardCaptured', true, { shouldValidate: true })}
+          />
+        </FormSection>
+
+        <FormSection
+          title={t('selfie_label')}
+          description={t('selfie_hint')}
+          icon="account"
+          status={selfieCaptured ? <CapturedMark label={t('capture_done')} /> : <RequiredMark label={t('required_badge')} />}
+        >
+          <CaptureGuideFrame variant="selfie" />
+          <DocumentUpload
+            label={t('selfie_label')}
+            hint={t('capture_hint_selfie')}
+            accept={ACCEPTED_IMAGE_TYPES}
+            capture="user"
+            onUpload={captureLocally}
+            onUploaded={() => setValue('selfieCaptured', true, { shouldValidate: true })}
+          />
+        </FormSection>
+
+        <Paper
+          elevation={0}
+          sx={{ p: 1.5, borderRadius: 'var(--bal-radius-md)', bgcolor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
+        >
+          <AppIcon icon="info" size={18} color="var(--bal-primary)" />
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('auto_registry_note')}
+          </Typography>
+        </Paper>
+
+        {submitError ? (
+          <AppAlert severity={submitError.key === 'shared_sim' ? 'warning' : 'error'} variant="outlined">
+            {t(`error_${submitError.key}`)}
+          </AppAlert>
+        ) : null}
+
+        {/* The one thing that still gates submit is the selfie, so it says so here rather than leaving
+            a dead button to be explained by a caption three sections up. */}
+        {!selfieCaptured ? (
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('identity_needs_selfie')}
+          </Typography>
+        ) : null}
+
+        <Stack direction="row" sx={{ gap: 1 }}>
+          <AppButton
+            type="submit"
+            color="primary"
+            variant="contained"
+            startIcon="identity"
+            disabled={!selfieCaptured || submitIdentity.isPending}
+          >
+            {submitIdentity.isPending ? t('identity_submitting') : t('identity_submit')}
+          </AppButton>
+          <AppButton variant="text" color="primary" to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}>
+            {t('back_to_checklist')}
+          </AppButton>
+        </Stack>
+      </Box>
+    </FormProvider>
+  );
+}
+
+/** A section's "done" marker — the completion cue a wall of uploaders otherwise never gives. */
+function CapturedMark({ label }: { label: string }) {
+  return (
+    <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center', flexShrink: 0 }}>
+      <AppIcon icon="verified" size={16} color="var(--bal-success)" />
+      <Typography variant="caption" sx={{ color: 'var(--bal-success)' }}>
+        {label}
+      </Typography>
+    </Stack>
+  );
+}
+
+function RequiredMark({ label }: { label: string }) {
+  return (
+    <Typography variant="caption" sx={{ color: 'var(--bal-warning)', flexShrink: 0 }}>
+      {label}
+    </Typography>
   );
 }
 
@@ -168,36 +213,33 @@ const CORNER_POSITIONS = [
 
 /**
  * A cheap, dependency-free capture guide — a dashed frame (viewfinder corners for the card, an oval
- * for the selfie) plus a static hint line, shown above the corresponding `DocumentUpload`. There is no
- * live camera preview to overlay (the native camera app owns capture via the file input's `capture`
- * attribute), so this illustrates *how to frame the shot* rather than tracking the actual photo.
+ * for the selfie), shown above the corresponding `DocumentUpload`. There is no live camera preview to
+ * overlay (the native camera app owns capture via the file input's `capture` attribute), so this
+ * illustrates *how to frame the shot* rather than tracking the actual photo. The hint line that used
+ * to sit under it now rides on the uploader itself, where the tap target is.
  */
 function CaptureGuideFrame({ variant }: { variant: 'card' | 'selfie' }) {
-  const t = useTranslations('verification');
   const isCard = variant === 'card';
   return (
-    <Stack sx={{ alignItems: 'center', gap: 0.75 }}>
-      <Box
-        sx={{
-          position: 'relative',
-          width: isCard ? 180 : 112,
-          height: isCard ? 112 : 140,
-          borderRadius: isCard ? 2 : '50%',
-          border: '2px dashed var(--bal-divider)',
-        }}
-      >
-        {isCard
-          ? CORNER_POSITIONS.map((pos, index) => (
-              <Box
-                key={index}
-                sx={{ position: 'absolute', width: CORNER_SIZE, height: CORNER_SIZE, borderColor: 'var(--bal-primary)', ...pos }}
-              />
-            ))
-          : null}
-      </Box>
-      <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center', maxWidth: 220 }}>
-        {t(isCard ? 'capture_hint_card' : 'capture_hint_selfie')}
-      </Typography>
-    </Stack>
+    <Box
+      aria-hidden
+      sx={{
+        alignSelf: 'center',
+        position: 'relative',
+        width: isCard ? 180 : 112,
+        height: isCard ? 112 : 140,
+        borderRadius: isCard ? 2 : '50%',
+        border: '2px dashed var(--bal-divider)',
+      }}
+    >
+      {isCard
+        ? CORNER_POSITIONS.map((pos, index) => (
+            <Box
+              key={index}
+              sx={{ position: 'absolute', width: CORNER_SIZE, height: CORNER_SIZE, borderColor: 'var(--bal-primary)', ...pos }}
+            />
+          ))
+        : null}
+    </Box>
   );
 }

client/src/app/[locale]/(private-routes)/nurse/verification/page.tsx

@@ -51,9 +51,9 @@ export default function NurseVerificationPage() {
 
       {isLoading ? (
         <Stack sx={{ gap: 1.5 }}>
-          <Skeleton variant="rounded" height={72} sx={{ borderRadius: 2 }} />
+          <Skeleton variant="rounded" height={72} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
           {[0, 1, 2, 3].map((key) => (
-            <Skeleton key={key} variant="rounded" height={64} sx={{ borderRadius: 2 }} />
+            <Skeleton key={key} variant="rounded" height={64} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
           ))}
         </Stack>
       ) : isError ? (
@@ -127,7 +127,7 @@ function Approved({ onPublish }: { onPublish: () => void }) {
       elevation={0}
       sx={{
         p: 3,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         border: '1px solid',
         borderColor: 'divider',
         borderInlineStartWidth: 4,

client/src/app/[locale]/(private-routes)/nurse/visits/[id]/NurseVisitNotesPanel.tsx

@@ -1,9 +1,9 @@
 'use client';
-import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
-import { Checkbox, FormControlLabel, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, VisitNoteCard } from '@/components';
+import { Checkbox, FormControlLabel, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, AppIcon, RhfControlGroup, RhfTextField, VisitNoteCard } from '@/components';
 import { formatShamsiDate } from '@/utils';
 import { useBookingDetail } from '@/services/bookings';
 import { isBookingConfirmedOrBeyond } from '@/services/bookings/types';
@@ -11,6 +11,12 @@ import { useRecordAccess, usePatientCareRecord, usePatientHistory, useCreateVisi
 import { VISIT_NOTE_MAX_LENGTH } from '@/services/patientRecords/constants';
 import type { TaskResult } from '@/services/patientRecords/types';
 
+interface VisitNoteFormValues {
+  note: string;
+  /** Task id → ticked. One field so a whole submitted checklist resets in a single `reset`. */
+  checked: Record<string, boolean>;
+}
+
 /**
  * E3 (نمای پرستار) — the nurse visit-note authoring, mounted **below** the f8 EVV banner on the nurse booking
  * detail. **Append-only:** the nurse ticks today's task checklist and writes a free-text note, then submits
@@ -37,26 +43,22 @@ export default function NurseVisitNotesPanel({ bookingId }: { bookingId: number
   const history = usePatientHistory(patientId, 1, { enabled: engaged && patientId > 0 && canView });
   const createNote = useCreateVisitNote(patientId);
 
-  const [note, setNote] = useState('');
-  const [checked, setChecked] = useState<Record<string, boolean>>({});
+  const form = useForm<VisitNoteFormValues>({ mode: 'onTouched', defaultValues: { note: '', checked: {} } });
+  const { control, handleSubmit, reset } = form;
+  const note = useWatch({ control, name: 'note' });
 
   if (!booking.data || !engaged) return null;
 
   const tasks = record.data?.tasks ?? [];
 
-  const submit = () => {
-    if (!note.trim()) {
-      enqueueSnackbar(t('note_required'), { variant: 'error' });
-      return;
-    }
-    const taskResults: TaskResult[] = tasks.map((task) => ({ label: task.label, done: Boolean(checked[task.id]) }));
+  const submit = (values: VisitNoteFormValues) => {
+    const taskResults: TaskResult[] = tasks.map((task) => ({ label: task.label, done: Boolean(values.checked[task.id]) }));
     createNote.mutate(
-      { bookingId, body: note.trim(), taskResults },
+      { bookingId, body: values.note.trim(), taskResults },
       {
         onSuccess: () => {
           enqueueSnackbar(t('note_saved'), { variant: 'success' });
-          setNote('');
-          setChecked({});
+          reset({ note: '', checked: {} });
         },
         onError: () => enqueueSnackbar(t('note_error'), { variant: 'error' }),
       },
@@ -70,61 +72,75 @@ export default function NurseVisitNotesPanel({ bookingId }: { bookingId: number
       {canAppend ? (
         <Paper
           elevation={0}
-          sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider', borderTop: '3px solid var(--bal-secondary)' }}
+          sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider', borderTop: '3px solid var(--bal-secondary)' }}
         >
-          <Stack sx={{ gap: 2 }}>
-            <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
-              <AppIcon icon="notes" size={20} color="var(--bal-secondary)" />
-              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-                {t('notes_title')}
-              </Typography>
-            </Stack>
-
-            {record.isLoading || tasks.length > 0 ? (
-              <Stack sx={{ gap: 0.5 }}>
-                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-                  {t('tasks_checklist_title')}
+          <FormProvider {...form}>
+            <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2 }}>
+              <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
+                <AppIcon icon="notes" size={20} color="var(--bal-secondary)" />
+                <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+                  {t('notes_title')}
                 </Typography>
-                {record.isLoading ? (
-                  <Skeleton variant="rounded" height={80} />
-                ) : (
-                  tasks.map((task) => (
-                    <FormControlLabel
-                      key={task.id}
-                      control={
-                        <Checkbox
-                          checked={Boolean(checked[task.id])}
-                          onChange={(e) => setChecked((c) => ({ ...c, [task.id]: e.target.checked }))}
-                        />
-                      }
-                      label={task.label}
-                    />
-                  ))
-                )}
               </Stack>
-            ) : null}
 
-            <TextField
-              label={t('note_label')}
-              placeholder={t('note_placeholder')}
-              value={note}
-              onChange={(e) => setNote(e.target.value.slice(0, VISIT_NOTE_MAX_LENGTH))}
-              multiline
-              minRows={3}
-              fullWidth
-            />
+              {record.isLoading || tasks.length > 0 ? (
+                <Stack sx={{ gap: 0.5 }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+                    {t('tasks_checklist_title')}
+                  </Typography>
+                  {record.isLoading ? (
+                    <Skeleton variant="rounded" height={80} />
+                  ) : (
+                    <RhfControlGroup<VisitNoteFormValues> name="checked">
+                      {({ field }) => {
+                        const ticked = (field.value as Record<string, boolean>) ?? {};
+                        return (
+                          <Stack>
+                            {tasks.map((task) => (
+                              <FormControlLabel
+                                key={task.id}
+                                control={
+                                  <Checkbox
+                                    checked={Boolean(ticked[task.id])}
+                                    onChange={(event) =>
+                                      field.onChange({ ...ticked, [task.id]: event.target.checked })
+                                    }
+                                  />
+                                }
+                                label={task.label}
+                              />
+                            ))}
+                          </Stack>
+                        );
+                      }}
+                    </RhfControlGroup>
+                  )}
+                </Stack>
+              ) : null}
 
-            <AppButton
-              variant="contained"
-              color="secondary"
-              startIcon="notes"
-              onClick={submit}
-              disabled={createNote.isPending || !note.trim()}
-              sx={{ alignSelf: 'flex-end' }}
-            >
-              {createNote.isPending ? tc('saving') : t('note_submit')}
-            </AppButton>
-          </Stack>
+              <RhfTextField<VisitNoteFormValues>
+                name="note"
+                label={t('note_label')}
+                placeholder={t('note_placeholder')}
+                transform={(raw) => raw.slice(0, VISIT_NOTE_MAX_LENGTH)}
+                rules={{ validate: (value) => String(value ?? '').trim().length > 0 || t('note_required') }}
+                multiline
+                minRows={3}
+                fullWidth
+              />
+
+              <AppButton
+                type="submit"
+                variant="contained"
+                color="secondary"
+                startIcon="notes"
+                disabled={createNote.isPending || !note.trim()}
+                sx={{ alignSelf: 'flex-end' }}
+              >
+                {createNote.isPending ? tc('saving') : t('note_submit')}
+              </AppButton>
+            </Stack>
+          </FormProvider>
         </Paper>
       ) : null}
 

client/src/app/[locale]/(private-routes)/partner/PartnerHomeScreen.tsx

@@ -78,7 +78,7 @@ function OnboardingBanner({ state }: { state: CenterOnboardingState }) {
   const { severity, key } = banner[state];
 
   return (
-    <Alert severity={severity} sx={{ borderRadius: 2 }}>
+    <Alert severity={severity} sx={{ borderRadius: 'var(--bal-radius-md)' }}>
       {t(key)}
     </Alert>
   );
@@ -89,7 +89,7 @@ function LicenseBlock({ center }: { center: PartnerCenter }) {
   const t = useTranslations('partner');
 
   return (
-    <Paper elevation={0} sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+    <Paper elevation={0} sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
       <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 2 }}>
         {t('license_title')}
       </Typography>

client/src/app/[locale]/(private-routes)/partner/bookings/[id]/page.tsx

@@ -69,7 +69,7 @@ export default function PartnerBookingDetailPage() {
         <AdminEmptyState icon="bookings" title={t('booking_detail_not_found')} />
       ) : (
         <>
-          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
             <Stack sx={{ gap: 1.5 }}>
               <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
                 <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
@@ -91,7 +91,7 @@ export default function PartnerBookingDetailPage() {
             <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
               {t('booking_detail_timeline_title')}
             </Typography>
-            <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+            <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
               <StatusTimeline nodes={timelineNodes} />
             </Paper>
           </Stack>

client/src/app/[locale]/(private-routes)/partner/bookings/page.tsx

@@ -92,7 +92,7 @@ function PartnerBookingsScreen() {
 
       <Stack
         direction="row"
-        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
       >
         <TextField
           select

client/src/app/[locale]/(private-routes)/partner/loading.tsx

@@ -1,5 +1,5 @@
-import SidebarShellSkeleton from '../_chrome/SidebarShellSkeleton';
+import ShellContentSkeleton from '../_chrome/ShellContentSkeleton';
 
 export default function Loading() {
-  return <SidebarShellSkeleton />;
+  return <ShellContentSkeleton />;
 }

client/src/app/[locale]/(private-routes)/partner/more/page.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { PageHeader, ProfileSummary, StatusChip, SurfaceCard } from '@/components';
+import { SettingsPanel, SignOutRow } from '@/components/settings';
+import { useMyPartnerCenter } from '@/services/partnerCenter';
+
+/**
+ * «بیشتر» group root for the partner portal — the center's identity and merchant-of-record status
+ * (previously squeezed into the top bar, where the MoR indicator was hidden below `sm`), plus
+ * appearance/language and sign-out.
+ */
+export default function PartnerMorePage() {
+  const t = useTranslations('hub');
+  const tPartner = useTranslations('partner');
+  const { data: center, isLoading } = useMyPartnerCenter();
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={t('more_title')} />
+
+      <SurfaceCard>
+        <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
+          <ProfileSummary displayName={center?.name ?? ''} loading={isLoading} />
+          {!isLoading && center ? (
+            <StatusChip
+              status={center.isMerchantOfRecord ? 'active' : 'neutral'}
+              label={center.isMerchantOfRecord ? tPartner('is_mor_yes') : tPartner('is_mor_no')}
+            />
+          ) : null}
+        </Stack>
+      </SurfaceCard>
+
+      <SettingsPanel />
+      <SignOutRow />
+    </Stack>
+  );
+}

client/src/app/[locale]/(private-routes)/partner/settlement/page.tsx

@@ -112,7 +112,7 @@ function PartnerSettlementScreen() {
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
         <AdminPageHeader title={t('settlement_title')} />
-        <Alert severity="info" sx={{ borderRadius: 2 }}>
+        <Alert severity="info" sx={{ borderRadius: 'var(--bal-radius-md)' }}>
           {t('settlement_not_mor')}
         </Alert>
       </Box>
@@ -149,7 +149,7 @@ function PartnerSettlementScreen() {
         }
       />
 
-      <Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+      <Paper elevation={0} sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
         <Stack direction="row" sx={{ gap: 2, alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap' }}>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('settlement_iban')}

client/src/app/[locale]/(private-routes)/select-role/layout.tsx

@@ -0,0 +1,13 @@
+'use client';
+import type { ReactNode } from 'react';
+import { FocusedLayout } from '@/layout';
+
+/*
+ * First-use role picker. It sits outside every actor route group on purpose — the session has no
+ * public role yet, so there is no app to show tabs for — but it still needs the phone-width frame
+ * that the actor shells provide, hence the chrome-free `FocusedLayout` (logo strip + content, no
+ * bottom nav). No `RoleGuard` here: gating on a role is exactly what this page exists to resolve.
+ */
+export default function SelectRoleLayout({ children }: { children: ReactNode }) {
+  return <FocusedLayout>{children}</FocusedLayout>;
+}

client/src/components/ActivationChecklist/ActivationChecklist.tsx

@@ -27,7 +27,7 @@ const ActivationChecklist: FunctionComponent = () => {
   const t = useTranslations('activation');
   const state = useActivationChecklist();
 
-  if (state.isLoading) return <Skeleton variant="rounded" height={220} sx={{ borderRadius: 2 }} />;
+  if (state.isLoading) return <Skeleton variant="rounded" height={220} sx={{ borderRadius: 'var(--bal-radius-md)' }} />;
   if (state.isError) {
     return <ErrorState message={t('load_error')} retryLabel={t('retry')} onRetry={state.retry} />;
   }

client/src/components/BnplPlanCard/BnplPlanCard.tsx

@@ -44,7 +44,7 @@ const BnplPlanCard: FunctionComponent<BnplPlanCardProps> = ({ plan, orderAmountI
         display: 'block',
         width: '100%',
         textAlign: 'start',
-        borderRadius: 2.5,
+        borderRadius: 'var(--bal-radius-md)',
         p: 1.75,
         border: '1px solid',
         borderColor: selected ? 'var(--bal-secondary)' : 'divider',

client/src/components/CancellationPolicyDisclosure/CancellationPolicyDisclosure.tsx

@@ -39,7 +39,7 @@ const CancellationPolicyDisclosure: FunctionComponent<CancellationPolicyDisclosu
 
   return (
     <Stack sx={{ gap: 2.5 }} data-testid="cancellation-disclosure" data-policy-code={preview.cancellationPolicyCode}>
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
         <Stack sx={{ gap: 1 }}>
           <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
             <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>
@@ -69,7 +69,7 @@ const CancellationPolicyDisclosure: FunctionComponent<CancellationPolicyDisclosu
       />
 
       {isMultiSession && (
-        <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+        <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
           <Stack sx={{ gap: 1.25 }}>
             <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
               {t('sessions_title')}

client/src/components/CategoryTile/CategoryTile.tsx

@@ -55,7 +55,7 @@ const CategoryTile: FunctionComponent<CategoryTileProps> = ({ label, iconKey, on
         height: '100%',
         minHeight: 116,
         p: 2,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         border: '1px solid',
         borderColor: selected ? 'var(--bal-primary)' : 'divider',
         bgcolor: selected ? 'var(--bal-primary-soft)' : 'background.paper',

client/src/components/DocumentUpload/DocumentUpload.tsx

@@ -171,7 +171,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
               {progress}%
             </Typography>
           </Stack>
-          <LinearProgress variant="determinate" value={progress} sx={{ borderRadius: 1, height: 6 }} />
+          <LinearProgress variant="determinate" value={progress} sx={{ borderRadius: 'var(--bal-radius-sm)', height: 6 }} />
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {t('upload_uploading')}
           </Typography>
@@ -184,7 +184,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
                 component="img"
                 src={previewUrl}
                 alt=""
-                sx={{ width: 48, height: 48, objectFit: 'cover', borderRadius: 1.5, flexShrink: 0 }}
+                sx={{ width: 48, height: 48, objectFit: 'cover', borderRadius: 'var(--bal-radius-sm)', flexShrink: 0 }}
               />
             ) : (
               <AppIcon icon="document" size={28} color="var(--bal-primary)" />
@@ -262,7 +262,7 @@ const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
           }}
           sx={{
             p: 3,
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             border: '1px dashed',
             borderColor: 'divider',
             textAlign: 'center',

client/src/components/EscrowExplainer/EscrowExplainer.tsx

@@ -54,7 +54,7 @@ const EscrowExplainer: FunctionComponent = () => {
         {t('escrow_explainer_toggle')}
       </AppButton>
       <Collapse in={open} id={EXPLAINER_CONTENT_ID}>
-        <Stack sx={{ gap: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+        <Stack sx={{ gap: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
           <Stack
             direction="row"
             sx={{ gap: { xs: 1.5, sm: 2 }, alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: 'space-between' }}

client/src/components/NurseResultCard/NurseResultCard.tsx

@@ -65,7 +65,7 @@ const NurseResultCard = ({ nurse, serviceLabel, onSelect }: NurseResultCardProps
         alignItems: 'flex-start',
         border: '1px solid',
         borderColor: 'divider',
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         cursor: 'pointer',
         transition: 'border-color 120ms ease',
         '&:hover': { borderColor: 'var(--bal-primary)' },
@@ -145,7 +145,7 @@ const NurseResultCard = ({ nurse, serviceLabel, onSelect }: NurseResultCardProps
 /** Matches the real card's anatomy (avatar disc, name+badge row, service-label row, gender+visits meta
  * row, rating row, price row) so a loading list doesn't jump when data lands. */
 const NurseResultCardSkeleton: FunctionComponent = () => (
-  <Paper elevation={0} sx={{ p: 2, display: 'flex', gap: 2, alignItems: 'flex-start', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+  <Paper elevation={0} sx={{ p: 2, display: 'flex', gap: 2, alignItems: 'flex-start', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
     <Skeleton variant="circular" width={56} height={56} />
     <Stack sx={{ gap: 0.75, flexGrow: 1 }}>
       <Skeleton variant="text" width="55%" height={28} />

client/src/components/OtpInput/OtpInput.tsx

@@ -20,7 +20,13 @@ export interface OtpInputProps {
 }
 
 const DEFAULT_LENGTH = 5;
-const BOX_SIZE = 48;
+/**
+ * The box is sized in `ch`-free absolute terms but must survive 6 boxes + gaps inside the
+ * ~480px app frame minus the card padding, so it shrinks rather than overflowing.
+ */
+const BOX_MIN_SIZE = 40;
+const BOX_MAX_SIZE = 52;
+const BOX_GAP = 1;
 
 /**
  * One-time-code input: `length` single-digit boxes with auto-advance, backspace-to-previous,
@@ -110,10 +116,20 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
   };
 
   return (
-    <Stack direction="row" spacing={1} dir="ltr" role="group" aria-label={ariaLabel} sx={{ justifyContent: 'center' }}>
+    // `gap`, never Stack's `spacing`: spacing compiles to a directional margin that the RTL Emotion
+    // cache mirrors, while this group is force-`dir="ltr"` so the code reads left-to-right. The two
+    // disagreed on /fa and collapsed the gap between the first two boxes while doubling it at the end.
+    <Stack
+      direction="row"
+      dir="ltr"
+      role="group"
+      aria-label={ariaLabel}
+      sx={{ justifyContent: 'center', gap: BOX_GAP, width: '100%' }}
+    >
       {chars.map((char, index) => (
         <TextField
           key={index}
+          sx={{ flex: `1 1 ${BOX_MIN_SIZE}px`, minWidth: BOX_MIN_SIZE, maxWidth: BOX_MAX_SIZE }}
           value={char}
           disabled={disabled}
           error={error}
@@ -130,7 +146,7 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
               // Lets iOS/Android offer the SMS code as a keyboard suggestion even without WebOTP.
               autoComplete: 'one-time-code',
               'aria-label': `${ariaLabel ?? 'digit'} ${index + 1}`,
-              style: { textAlign: 'center', fontSize: '1.25rem', width: BOX_SIZE, padding: 8 },
+              style: { textAlign: 'center', fontSize: '1.25rem', padding: 12, width: '100%' },
             },
           }}
         />

client/src/components/PatientCard/PatientCard.tsx

@@ -88,7 +88,7 @@ const PatientCard: FunctionComponent<PatientCardProps> = ({
               minWidth: 0,
               justifyContent: 'flex-start',
               textAlign: 'start',
-              borderRadius: 2,
+              borderRadius: 'var(--bal-radius-md)',
               p: 1,
               m: -1,
               gap: 1,

client/src/components/PatientForm/PatientForm.tsx

@@ -1,13 +1,11 @@
 'use client';
-import { FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import FormLabel from '@mui/material/FormLabel';
+import { useForm, FormProvider } from 'react-hook-form';
 import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
 import { AppButton } from '@/components/common';
+import { RhfChipSelect, RhfControlGroup, RhfTextField } from '@/components/common/form';
 import GenderToggle from '@/components/GenderToggle';
-import ConditionChips from '@/components/ConditionChips';
 import RelationSelect from '@/components/RelationSelect';
 import { digitsOnly } from '@/utils';
 import { CONDITION_CODES, RELATION_CODES } from '@/services/patients/constants';
@@ -15,6 +13,7 @@ import { ageToBirthDate, birthDateToAge } from '@/services/patients/age';
 import type { ConditionCode, CreatePatientInput, Gender, Patient, Relation } from '@/services/patients/types';
 
 const MAX_AGE = 120;
+const MAX_AGE_DIGITS = 3;
 
 export interface PatientFormProps {
   /** Prefill for edit, or a relation carried from the onboarding relation step. */
@@ -30,12 +29,25 @@ export interface PatientFormProps {
   onDirtyChange?: (dirty: boolean) => void;
 }
 
+interface PatientFormValues {
+  firstName: string;
+  lastName: string;
+  age: string;
+  gender: Gender | null;
+  conditions: string[];
+  relation: Relation | null;
+}
+
 /**
  * The A4 patient form — first/last name, age, **required** gender, optional condition chips, and
  * (for E1) the relation. Reused for create and edit. Gender is required and never defaulted; age
  * maps to `birthDate` (never rendered back as a fabricated full date — display stays age-only).
  * `lastName` falls back to `firstName` only when left blank (the wire's `lastName` is required),
  * never guessed by splitting a single field. Strings come from the `onboarding` namespace.
+ *
+ * react-hook-form owns the values, which is what lets `onDirtyChange` report `formState.isDirty`
+ * instead of the hand-written six-way comparison against captured initial values it used to run in an
+ * effect on every keystroke.
  * @component PatientForm
  */
 const PatientForm: FunctionComponent<PatientFormProps> = ({
@@ -50,163 +62,120 @@ const PatientForm: FunctionComponent<PatientFormProps> = ({
 }) => {
   const t = useTranslations('onboarding');
 
-  const initialFirstName = initial?.firstName ?? '';
-  const initialLastName = initial?.lastName ?? '';
-  const initialAge = (() => {
-    const age = birthDateToAge(initial?.birthDate);
-    return age == null ? '' : String(age);
-  })();
-  const initialGender = initial?.gender ?? null;
-  const initialConditions = initial?.conditions ?? [];
-  const initialRelation = initial?.relation ?? null;
+  const initialAge = birthDateToAge(initial?.birthDate);
 
-  const [firstName, setFirstName] = useState(initialFirstName);
-  const [lastName, setLastName] = useState(initialLastName);
-  const [age, setAge] = useState(initialAge);
-  const [gender, setGender] = useState<Gender | null>(initialGender);
-  const [conditions, setConditions] = useState<string[]>(initialConditions);
-  const [relation, setRelation] = useState<Relation | null>(initialRelation);
-
-  const [nameError, setNameError] = useState(false);
-  const [ageError, setAgeError] = useState(false);
-  const [genderError, setGenderError] = useState(false);
-
-  const conditionOptions = CONDITION_CODES.map((code) => ({ code, label: t(`condition_${code}`) }));
-  const relationOptions = RELATION_CODES.map((code) => ({ code, label: t(`relation_${code}`) }));
+  const form = useForm<PatientFormValues>({
+    mode: 'onTouched',
+    defaultValues: {
+      firstName: initial?.firstName ?? '',
+      lastName: initial?.lastName ?? '',
+      age: initialAge == null ? '' : String(initialAge),
+      gender: initial?.gender ?? null,
+      conditions: initial?.conditions ?? [],
+      relation: initial?.relation ?? null,
+    },
+  });
+  const { handleSubmit, formState } = form;
+  const { isDirty } = formState;
 
   useEffect(() => {
-    if (!onDirtyChange) return;
-    const dirty =
-      firstName !== initialFirstName ||
-      lastName !== initialLastName ||
-      age !== initialAge ||
-      gender !== initialGender ||
-      relation !== initialRelation ||
-      conditions.length !== initialConditions.length ||
-      conditions.some((code) => !initialConditions.includes(code as ConditionCode));
-    onDirtyChange(dirty);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- initial* are derived from the `initial` prop once per mount (form is re-keyed by the caller on edit target change), not reactive state.
-  }, [firstName, lastName, age, gender, relation, conditions]);
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
 
-  const handleSubmit = () => {
-    const first = firstName.trim();
-    const enteredLast = lastName.trim();
+  const submit = (values: PatientFormValues) => {
+    const first = values.firstName.trim();
+    const enteredLast = values.lastName.trim();
     // The wire's `lastName` is a required string, so it falls back to the first name when left
     // blank — but `displayName` reflects only what was actually entered (never a duplicated name).
-    const last = enteredLast || first;
-    const ageNum = Number(digitsOnly(age));
-    const nameInvalid = first.length === 0;
-    const ageInvalid = age.trim().length === 0 || !Number.isInteger(ageNum) || ageNum < 0 || ageNum > MAX_AGE;
-    const genderInvalid = gender == null;
-
-    setNameError(nameInvalid);
-    setAgeError(ageInvalid);
-    setGenderError(genderInvalid);
-    if (nameInvalid || ageInvalid || genderInvalid) return;
-
     onSubmit({
       displayName: [first, enteredLast].filter(Boolean).join(' '),
       firstName: first,
-      lastName: last,
-      birthDate: ageToBirthDate(ageNum),
-      gender: gender as Gender,
+      lastName: enteredLast || first,
+      birthDate: ageToBirthDate(Number(digitsOnly(values.age))),
+      gender: values.gender as Gender,
       bloodType: null,
       initialMedicalNotes: null,
-      relation,
-      conditions: conditions as ConditionCode[],
+      relation: values.relation,
+      conditions: values.conditions as ConditionCode[],
     });
   };
 
   return (
-    <Stack sx={{ gap: 2.5 }}>
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <TextField
-          label={t('first_name_label')}
-          value={firstName}
-          onChange={(event) => {
-            setFirstName(event.target.value);
-            if (nameError) setNameError(false);
-          }}
-          error={nameError}
-          helperText={nameError ? t('name_required') : undefined}
-          fullWidth
-        />
-        <TextField
-          label={t('last_name_label')}
-          value={lastName}
-          onChange={(event) => setLastName(event.target.value)}
-          fullWidth
-        />
-      </Stack>
-
-      <TextField
-        label={t('age_label')}
-        value={age}
-        onChange={(event) => {
-          setAge(digitsOnly(event.target.value).slice(0, 3));
-          if (ageError) setAgeError(false);
-        }}
-        error={ageError}
-        helperText={ageError ? t('age_invalid') : undefined}
-        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
-        sx={{ maxWidth: 160 }}
-      />
-
-      <Stack sx={{ gap: 1 }}>
-        <FormLabel error={genderError}>{t('gender_label')}</FormLabel>
-        <GenderToggle
-          value={gender}
-          onChange={(next) => {
-            setGender(next);
-            if (genderError) setGenderError(false);
-          }}
-          maleLabel={t('gender_male')}
-          femaleLabel={t('gender_female')}
-          error={genderError}
-          ariaLabel={t('gender_label')}
-        />
-        {genderError ? (
-          <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
-            {t('gender_required')}
-          </Typography>
-        ) : null}
-      </Stack>
-
-      <Stack sx={{ gap: 1 }}>
-        <FormLabel>{t('conditions_label')}</FormLabel>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          {t('conditions_hint')}
-        </Typography>
-        <ConditionChips options={conditionOptions} value={conditions} onChange={setConditions} />
-      </Stack>
-
-      {showRelation ? (
-        <Stack sx={{ gap: 1 }}>
-          <FormLabel>{t('relation_title')}</FormLabel>
-          <RelationSelect
-            options={relationOptions}
-            value={relation}
-            onChange={(code) => setRelation(code as Relation)}
+    <FormProvider {...form}>
+      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2.5 }}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
+          <RhfTextField<PatientFormValues>
+            name="firstName"
+            label={t('first_name_label')}
+            rules={{ validate: (value) => String(value ?? '').trim().length > 0 || t('name_required') }}
+            fullWidth
           />
+          <RhfTextField<PatientFormValues> name="lastName" label={t('last_name_label')} fullWidth />
         </Stack>
-      ) : null}
 
-      <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
-        {onCancel ? (
-          <AppButton variant="text" onClick={onCancel} disabled={submitting}>
-            {cancelLabel}
-          </AppButton>
-        ) : null}
-        <AppButton
-          color="primary"
-          variant="contained"
-          onClick={handleSubmit}
-          disabled={submitting}
+        <RhfTextField<PatientFormValues>
+          name="age"
+          label={t('age_label')}
+          transform={(raw) => digitsOnly(raw).slice(0, MAX_AGE_DIGITS)}
+          rules={{
+            validate: (value) => {
+              const raw = String(value ?? '').trim();
+              const parsed = Number(digitsOnly(raw));
+              return (raw.length > 0 && Number.isInteger(parsed) && parsed >= 0 && parsed <= MAX_AGE) || t('age_invalid');
+            },
+          }}
+          slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
+          sx={{ maxWidth: 160 }}
+        />
+
+        <RhfControlGroup<PatientFormValues>
+          name="gender"
+          label={t('gender_label')}
+          rules={{ validate: (value) => value != null || t('gender_required') }}
         >
-          {submitLabel}
-        </AppButton>
+          {({ field, hasError }) => (
+            <GenderToggle
+              value={field.value as Gender | null}
+              onChange={field.onChange}
+              maleLabel={t('gender_male')}
+              femaleLabel={t('gender_female')}
+              error={hasError}
+              ariaLabel={t('gender_label')}
+            />
+          )}
+        </RhfControlGroup>
+
+        <RhfChipSelect<PatientFormValues>
+          name="conditions"
+          label={t('conditions_label')}
+          hint={t('conditions_hint')}
+          options={CONDITION_CODES.map((code) => ({ code, label: t(`condition_${code}`) }))}
+        />
+
+        {showRelation ? (
+          <RhfControlGroup<PatientFormValues> name="relation" label={t('relation_title')}>
+            {({ field }) => (
+              <RelationSelect
+                options={RELATION_CODES.map((code) => ({ code, label: t(`relation_${code}`) }))}
+                value={field.value as Relation | null}
+                onChange={(code) => field.onChange(code as Relation)}
+              />
+            )}
+          </RhfControlGroup>
+        ) : null}
+
+        <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
+          {onCancel ? (
+            <AppButton variant="text" onClick={onCancel} disabled={submitting}>
+              {cancelLabel}
+            </AppButton>
+          ) : null}
+          <AppButton type="submit" color="primary" variant="contained" disabled={submitting}>
+            {submitLabel}
+          </AppButton>
+        </Stack>
       </Stack>
-    </Stack>
+    </FormProvider>
   );
 };
 

client/src/components/PaymentStateCard/PaymentStateCard.tsx

@@ -29,7 +29,7 @@ const PaymentStateCard: FunctionComponent<PaymentStateCardProps> = ({ icon, tone
     elevation={0}
     data-payment-state-card
     aria-live="polite"
-    sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
+    sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
   >
     <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
       <AppIcon icon={icon} size={44} color={tone} />

client/src/components/RelationSelect/RelationSelect.tsx

@@ -52,7 +52,7 @@ const RelationSelect: FunctionComponent<RelationSelectProps> = ({ options, value
             gap: 2,
             border: '2px solid',
             borderColor: selected ? 'primary.main' : 'divider',
-            borderRadius: 2,
+            borderRadius: 'var(--bal-radius-md)',
             bgcolor: selected ? 'var(--bal-primary-soft)' : 'transparent',
             '&:hover': { borderColor: selected ? 'primary.main' : 'text.secondary' },
             '&:focus-visible': { outline: '2px solid var(--bal-focus-ring)', outlineOffset: 2 },

client/src/components/admin/AdminDataTable.tsx

@@ -86,7 +86,7 @@ function AdminDataTable<T>({
         sx={{
           border: '1px solid',
           borderColor: 'divider',
-          borderRadius: 2,
+          borderRadius: 'var(--bal-radius-md)',
           overflowX: 'auto',
           ...(stickyHeader ? { maxHeight: stickyMaxHeight, overflowY: 'auto' } : {}),
         }}

client/src/components/admin/AdminMessageBubble.tsx

@@ -38,7 +38,7 @@ const AdminMessageBubble: FunctionComponent<AdminMessageBubbleProps> = ({ messag
       <Box
         sx={{
           p: 1.5,
-          borderRadius: 2,
+          borderRadius: 'var(--bal-radius-md)',
           border: internal ? '1px dashed' : '1px solid',
           borderColor: internal ? 'var(--bal-warning)' : 'divider',
           bgcolor: internal ? 'var(--bal-secondary-soft)' : mine ? 'var(--bal-primary-soft)' : 'background.paper',

client/src/components/admin/AuditLogRow.tsx

@@ -58,7 +58,7 @@ const AuditLogRow: FunctionComponent<AuditLogRowProps> = ({ entry, actorLabel })
     <Paper
       elevation={0}
       data-audit-id={entry.id}
-      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, overflow: 'hidden' }}
+      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', overflow: 'hidden' }}
     >
       <Stack
         role={hasDetail ? 'button' : undefined}

client/src/components/admin/ConfigRow.tsx

@@ -29,7 +29,7 @@ const ConfigRow: FunctionComponent<ConfigRowProps> = ({ config, canEdit = false,
     <Paper
       elevation={0}
       data-config-key={config.key}
-      sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
+      sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}
     >
       <Stack direction="row" sx={{ gap: 2, alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Box sx={{ minWidth: 0 }}>
@@ -69,7 +69,7 @@ const ConfigRow: FunctionComponent<ConfigRowProps> = ({ config, canEdit = false,
           <Typography
             variant="body2"
             data-config-value
-            sx={{ fontFamily: 'monospace', fontWeight: 700, wordBreak: 'break-all', bgcolor: 'action.hover', px: 1, py: 0.5, borderRadius: 1 }}
+            sx={{ fontFamily: 'monospace', fontWeight: 700, wordBreak: 'break-all', bgcolor: 'action.hover', px: 1, py: 0.5, borderRadius: 'var(--bal-radius-sm)' }}
           >
             {config.value}
           </Typography>

client/src/components/admin/DocumentViewer.tsx

@@ -34,7 +34,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
   return (
     <Box
       data-document-id={document.id}
-      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, p: 1.5 }}
+      sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 1.5 }}
     >
       <Stack direction="row" sx={{ gap: 1, alignItems: 'center', mb: 1 }}>
         <AppIcon icon="document" size={18} color="var(--bal-text-secondary)" />
@@ -71,7 +71,7 @@ const DocumentViewer: FunctionComponent<DocumentViewerProps> = ({ document }) =>
             component="img"
             src={signed.data.url}
             alt={document.originalFileName ?? String(document.id)}
-            sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 1, display: 'block' }}
+            sx={{ maxWidth: '100%', maxHeight: 320, borderRadius: 'var(--bal-radius-sm)', display: 'block' }}
           />
         ) : (
           <AppButton variant="outlined" color="primary" endIcon="external" href={signed.data.url} openInNewTab>

client/src/components/admin/PartnerSettlementRow.tsx

@@ -39,7 +39,7 @@ const PartnerSettlementRow: FunctionComponent<PartnerSettlementRowProps> = ({ in
     <Paper
       elevation={0}
       data-invoice-id={invoice.id}
-      sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
+      sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}
     >
       <Stack direction="row" sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', mb: 1.5 }}>
         <Box>

client/src/components/admin/RefundPanel.tsx

@@ -1,12 +1,14 @@
 'use client';
 import { FunctionComponent, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import { Alert, Box, Chip, MenuItem, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import { formatNumber, formatShamsiDate } from '@/utils';
 import type { AdminRefundResult, RefundChannel } from '@/services/refunds/types';
 import { useApproveRefund, useInitiateRefund, useRefundPreview, useRejectRefund } from '@/services/refunds';
 import AppButton from '../common/AppButton';
+import { RhfTextField } from '../common/form';
 import PriceBreakdown, { type PriceBreakdownRow } from '../PriceBreakdown';
 import ConfirmDialog from './ConfirmDialog';
 
@@ -16,6 +18,11 @@ export interface RefundPanelProps {
   onDone?: (result: AdminRefundResult) => void;
 }
 
+interface RefundFormValues {
+  channel: RefundChannel | '';
+  notes: string;
+}
+
 const CHANNELS: readonly RefundChannel[] = ['psp_card', 'bnpl_revert', 'manual'];
 
 /**
@@ -36,20 +43,27 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
   const approve = useApproveRefund();
   const reject = useRejectRefund();
 
-  const [channel, setChannel] = useState<RefundChannel | ''>('');
-  const [notes, setNotes] = useState('');
   const [result, setResult] = useState<AdminRefundResult | null>(null);
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [rejectOpen, setRejectOpen] = useState(false);
 
   const p = preview.data;
+  const form = useForm<RefundFormValues>({ mode: 'onTouched', defaultValues: { channel: '', notes: '' } });
+  const { control, getValues } = form;
+  const channel = useWatch({ control, name: 'channel' });
   const effectiveChannel = (channel || p?.refundChannel) as RefundChannel | undefined;
   const busy = initiate.isPending || approve.isPending || reject.isPending;
 
   const doInitiate = () => {
     if (!p) return;
     initiate.mutate(
-      { bookingId, ticketId, refundChannel: effectiveChannel, reasonCategory: 'customer_request', reasonNotes: notes.trim() || undefined },
+      {
+        bookingId,
+        ticketId,
+        refundChannel: effectiveChannel,
+        reasonCategory: 'customer_request',
+        reasonNotes: getValues('notes').trim() || undefined,
+      },
       {
         onSuccess: (r) => {
           setResult(r);
@@ -121,22 +135,34 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
       <PriceBreakdown rows={rows} totalLabel={t('refund_row_total')} totalAmountIrr={p.amountIrr} />
 
       {!activeResult ? (
-        <>
-          <TextField
-            select
-            size="small"
-            label={t('refund_channel')}
-            helperText={t('refund_channel_hint')}
-            value={channel || p.refundChannel}
-            onChange={(e) => setChannel(e.target.value as RefundChannel)}
-            sx={{ maxWidth: 260 }}
-          >
-            {CHANNELS.map((c) => (
-              <MenuItem key={c} value={c}>
-                {t(`channel_${c}`)}
-              </MenuItem>
-            ))}
-          </TextField>
+        <FormProvider {...form}>
+          {/* Not `RhfTextField`: the stored value is "" until an admin overrides the channel, while the
+              select displays the server's resolved one — the initiate call must be able to tell
+              «unchanged» from «explicitly re-picked the same value». */}
+          <Controller
+            control={control}
+            name="channel"
+            render={({ field }) => (
+              <TextField
+                select
+                size="small"
+                label={t('refund_channel')}
+                helperText={t('refund_channel_hint')}
+                name={field.name}
+                inputRef={field.ref}
+                value={field.value || p.refundChannel}
+                onChange={(event) => field.onChange(event.target.value as RefundChannel)}
+                onBlur={field.onBlur}
+                sx={{ maxWidth: 260 }}
+              >
+                {CHANNELS.map((c) => (
+                  <MenuItem key={c} value={c}>
+                    {t(`channel_${c}`)}
+                  </MenuItem>
+                ))}
+              </TextField>
+            )}
+          />
 
           {p.expectedCustomerRefundEta ? (
             <Alert severity="info" variant="outlined" icon={false}>
@@ -151,19 +177,12 @@ const RefundPanel: FunctionComponent<RefundPanelProps> = ({ bookingId, ticketId,
             </Alert>
           ) : null}
 
-          <TextField
-            size="small"
-            label={t('refund_notes_ph')}
-            value={notes}
-            onChange={(e) => setNotes(e.target.value)}
-            multiline
-            minRows={2}
-          />
+          <RhfTextField<RefundFormValues> name="notes" size="small" label={t('refund_notes_ph')} multiline minRows={2} />
 
           <AppButton variant="contained" color="primary" startIcon="refunds" onClick={() => setConfirmOpen(true)} disabled={busy} sx={{ alignSelf: 'flex-start' }}>
             {t('refund_initiate')}
           </AppButton>
-        </>
+        </FormProvider>
       ) : failed ? (
         <>
           <Alert severity="error" variant="outlined">

client/src/components/admin/SupportAlertCard.tsx

@@ -65,7 +65,7 @@ const SupportAlertCard: FunctionComponent<SupportAlertCardProps> = ({
       data-alert-id={alert.id}
       sx={{
         p: 2,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         border: '1px solid',
         borderColor: 'divider',
         borderInlineStart: '4px solid',

client/src/components/auth/AuthCard.tsx

@@ -1,50 +1,34 @@
 'use client';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Paper, Stack } from '@mui/material';
-import { AUTH_CARD_MAX_WIDTH, AUTH_HERO_MAX_WIDTH } from './constants';
+import { Divider, Paper, Stack } from '@mui/material';
+import { AUTH_CARD_MAX_WIDTH } from './constants';
 import BrandMark from './BrandMark';
-import AuthIllustration from './AuthIllustration';
 import TrustBullets from './TrustBullets';
 
 /**
- * Centered branded hero that hosts each auth step (phone, OTP). The card stays readable at
- * 320px; a calm illustration joins beside it once the viewport has room to breathe (desktop),
- * with the platform's trust facts underneath — login is the product's only front door, so it
- * carries trust evidence rather than a bare form.
+ * Centered branded card that hosts each auth step (phone, OTP). One surface, top to bottom:
+ * brand mark → the step's form → a divider → the platform's trust facts. The facts used to float
+ * on the page *under* the card, which read as unrelated page furniture and left the card looking
+ * cut off; login is the product's only front door, so the evidence belongs on the same surface as
+ * the form it is vouching for. The desktop side-illustration is gone with it — the app now renders
+ * inside a phone-width frame at every viewport, so it never had room to appear.
  * @component AuthCard
  */
 const AuthCard: FunctionComponent<PropsWithChildren> = ({ children }) => (
-  <Stack sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', px: 2, py: 4 }}>
-    <Stack
-      direction={{ xs: 'column', md: 'row' }}
-      sx={{
-        width: '100%',
-        maxWidth: AUTH_HERO_MAX_WIDTH,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: { xs: 0, md: 6 },
-      }}
+  <Stack sx={{ alignItems: 'center', justifyContent: 'center', flexGrow: 1, px: 2, py: 3 }}>
+    <Paper
+      elevation={0}
+      // Radius comes from the house token (MuiPaper). The old `borderRadius: 3` multiplied the
+      // shape unit into a ~30px pill — exactly the "too round" this pass is undoing.
+      sx={{ width: '100%', maxWidth: AUTH_CARD_MAX_WIDTH, px: { xs: 2.5, sm: 3 }, py: 3 }}
     >
-      <AuthIllustration sx={{ display: { xs: 'none', md: 'flex' } }} />
-      <Stack sx={{ width: '100%', maxWidth: AUTH_CARD_MAX_WIDTH, gap: 3, flexShrink: 0 }}>
-        <Paper
-          elevation={0}
-          sx={{
-            width: '100%',
-            p: { xs: 3, sm: 4 },
-            border: '1px solid',
-            borderColor: 'divider',
-            borderRadius: 3,
-          }}
-        >
-          <Stack sx={{ gap: 3 }}>
-            <BrandMark withTagline />
-            {children}
-          </Stack>
-        </Paper>
+      <Stack sx={{ gap: 2.5 }}>
+        <BrandMark withTagline />
+        {children}
+        <Divider flexItem />
         <TrustBullets />
       </Stack>
-    </Stack>
+    </Paper>
   </Stack>
 );
 

client/src/components/auth/AuthIllustration.tsx

@@ -1,85 +0,0 @@
-'use client';
-import { FunctionComponent } from 'react';
-import { Box, SxProps, Theme } from '@mui/material';
-import AppIcon from '@/components/common/AppIcon';
-
-const ILLUSTRATION_SIZE = 220;
-
-interface AuthIllustrationProps {
-  sx?: SxProps<Theme>;
-}
-
-/**
- * A calm, abstract hero graphic for the login front door — layered soft-tint circles (brand
- * tokens only, no stock photos or raster art) with a centered family glyph and a floating
- * trust badge, echoing the trust bullets underneath. Purely decorative.
- * @component AuthIllustration
- */
-const AuthIllustration: FunctionComponent<AuthIllustrationProps> = ({ sx }) => (
-  <Box
-    aria-hidden="true"
-    sx={{
-      position: 'relative',
-      width: ILLUSTRATION_SIZE,
-      height: ILLUSTRATION_SIZE,
-      flexShrink: 0,
-      ...sx,
-    }}
-  >
-    <Box sx={{ position: 'absolute', inset: 0, borderRadius: '50%', bgcolor: 'var(--bal-primary-soft)' }} />
-    <Box
-      sx={{
-        position: 'absolute',
-        insetInlineStart: '16%',
-        insetBlockEnd: '4%',
-        width: '46%',
-        height: '46%',
-        borderRadius: '50%',
-        bgcolor: 'var(--bal-secondary-soft)',
-      }}
-    />
-    <Box
-      sx={{
-        position: 'absolute',
-        inset: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Box
-        sx={{
-          width: '58%',
-          height: '58%',
-          borderRadius: '50%',
-          bgcolor: 'var(--bal-bg-paper)',
-          boxShadow: 'var(--bal-shadow-3)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <AppIcon icon="family" size={64} color="var(--bal-primary)" />
-      </Box>
-    </Box>
-    <Box
-      sx={{
-        position: 'absolute',
-        insetInlineEnd: '8%',
-        insetBlockStart: '10%',
-        width: '30%',
-        height: '30%',
-        borderRadius: '50%',
-        bgcolor: 'var(--bal-bg-paper)',
-        boxShadow: 'var(--bal-shadow-2)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <AppIcon icon="verified" size={30} color="var(--bal-trust)" />
-    </Box>
-  </Box>
-);
-
-export default AuthIllustration;

client/src/components/auth/OtpStep.tsx

@@ -102,6 +102,9 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t.rich('otp_sent_to', {
+            // A rich-text TAG (`<phone></phone>` in both message files), not a `{phone}` value — a
+            // function passed for a value placeholder is handed straight to React as a child, which
+            // is the "Functions are not valid as a React child" crash this replaced.
             // <bdi dir="ltr"> isolates the masked number so the RTL sentence's bidi algorithm
             // never reorders the digit/bullet runs around it (the classic digits-around-neutrals bug).
             phone: () => (
@@ -149,8 +152,8 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
         {resendDisabled && countdown.isActive && !locked ? (
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t.rich('resend_in', {
-              // Same bidi-isolation reasoning as the phone echo above — keeps mm:ss reading
-              // left-to-right (in Persian digits on /fa) inside the RTL sentence.
+              // Same tag-not-value rule and bidi-isolation reasoning as the phone echo above —
+              // keeps mm:ss reading left-to-right (in Persian digits on /fa) inside the RTL sentence.
               time: () => (
                 <Box component="bdi" dir="ltr">
                   {formatClock(countdown.seconds, locale)}

client/src/components/auth/RoleGuard.test.tsx

@@ -41,6 +41,14 @@ describe('<RoleGuard/>', () => {
     expect(mockReplace).not.toHaveBeenCalled();
   });
 
+  it('bounces to login (never an endless splash) when there is no session at all', async () => {
+    // `useMe` is gated on the session, so without one it never resolves — the guard must not wait.
+    hydration = { status: 'unauthenticated' };
+    renderGuard('nurse');
+    expect(screen.queryByTestId('shell')).not.toBeInTheDocument();
+    await waitFor(() => expect(mockReplace).toHaveBeenCalledWith('/fa/login'));
+  });
+
   it('renders the account-error state (not the shell) when /me failed', () => {
     hydration = { status: 'error', retry: jest.fn(), isRetrying: false };
     renderGuard('nurse');

client/src/components/auth/RoleGuard.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 
-import { type AppRole } from '@/constants';
+import { ROUTES, type AppRole } from '@/constants';
 import { useRoleHydration } from '@/services/auth';
 import { resolveRoleDestination } from '@/services/auth/routing';
 import AuthSplash from './AuthSplash';
@@ -25,10 +25,15 @@ interface RoleGuardProps {
  * The client-side role-aware navigation guard for the private shells (refinement-phase-2). It gates a shell
  * on the resolved-vs-pending role state (`useRoleHydration`) so the wrong actor app never renders:
  *  - **loading** — a brand splash while `/me` is in flight (never the customer shell as a stand-in);
+ *  - **unauthenticated** — no session at all, so `/me` will never resolve: bounce to login carrying the
+ *    attempted path, rather than holding a splash that can never end;
  *  - **error** — an explicit account-error recovery when `/me` failed (never a silent customer fallback);
  *  - **role mismatch** — redirect to the caller's real app (`resolveRoleDestination`, the single source of
  *    "which app") with a toast, rather than rendering a shell they lack the role for.
  *
+ * This is also what makes the locale root role-aware: `/` is the customer app's home, so a nurse landing
+ * there is a role mismatch and is sent to `/nurse`, a role-less account to `/select-role`.
+ *
  * A dual customer+nurse session holds both roles, so it passes either shell's guard and can move freely
  * between the family and nurse apps.
  * @component RoleGuard
@@ -45,6 +50,7 @@ const RoleGuard: FunctionComponent<RoleGuardProps> = ({ expected, children }) =>
   const allowed = !expected || (appRoles?.includes(expected) ?? false);
   // Stable across renders for a given identity (a string), so the redirect effect fires once, not per render.
   const redirectTo = me && !allowed ? `/${locale}${resolveRoleDestination(me)}` : null;
+  const isUnauthenticated = hydration.status === 'unauthenticated';
 
   useEffect(() => {
     if (!redirectTo) return;
@@ -52,11 +58,15 @@ const RoleGuard: FunctionComponent<RoleGuardProps> = ({ expected, children }) =>
     router.replace(redirectTo);
   }, [redirectTo, enqueueSnackbar, t, router]);
 
-  if (hydration.status === 'loading') return <AuthSplash message={t('routing_title')} />;
+  useEffect(() => {
+    if (!isUnauthenticated) return;
+    router.replace(`/${locale}${ROUTES.LOGIN}`);
+  }, [isUnauthenticated, router, locale]);
+
   if (hydration.status === 'error')
     return <AuthAccountError onRetry={hydration.retry} isRetrying={hydration.isRetrying} />;
-  // Role mismatch — hold the neutral splash while the redirect above navigates away.
-  if (!allowed) return <AuthSplash message={t('routing_title')} />;
+  // Loading, signed-out, or a role mismatch — hold the neutral splash while the effect above navigates.
+  if (hydration.status !== 'ready' || !allowed) return <AuthSplash message={t('routing_title')} />;
   return <>{children}</>;
 };
 

client/src/components/auth/SelectRole.tsx

@@ -84,7 +84,7 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
                   gap: 2,
                   border: '2px solid',
                   borderColor: isSelected ? 'primary.main' : 'divider',
-                  borderRadius: 2,
+                  borderRadius: 'var(--bal-radius-md)',
                   // Selection is never color-only: the soft fill pairs with a check glyph below.
                   bgcolor: isSelected ? 'var(--bal-primary-soft)' : 'transparent',
                   transition:

client/src/components/auth/TrustBullets.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { FunctionComponent } from 'react';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import AppIcon from '@/components/common/AppIcon';
 
@@ -10,26 +10,37 @@ const BULLETS: ReadonlyArray<{ icon: string; key: string }> = [
   { icon: 'support', key: 'trust_support' },
 ];
 
+const GLYPH_BOX = 28;
+
 /**
- * The 2–3 trust facts under the login card — what Balinyaar actually verifies and escrows
+ * The 2–3 trust facts at the foot of the login card — what Balinyaar actually verifies and escrows
  * (licensed + identity-verified nurses, escrow held until a confirmed check-out, support).
  * Copy is scoped to features the platform implements today, never aspirational claims.
+ * Rendered inside `AuthCard`, so it is deliberately quiet: caption type and a soft glyph chip, not
+ * a second set of headings competing with the form above it.
  * @component TrustBullets
  */
 const TrustBullets: FunctionComponent = () => {
   const t = useTranslations('auth');
   return (
-    <Stack sx={{ gap: 1.5, width: '100%' }}>
+    <Stack sx={{ gap: 1.25, width: '100%' }}>
       {BULLETS.map((bullet) => (
-        <Stack key={bullet.key} direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
-          <AppIcon
-            icon={bullet.icon}
-            size={20}
-            color="var(--bal-primary)"
-            style={{ flexShrink: 0, marginTop: 2 }}
+        <Stack key={bullet.key} direction="row" sx={{ gap: 1.25, alignItems: 'center' }}>
+          <Box
             aria-hidden="true"
-          />
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            sx={{
+              width: GLYPH_BOX,
+              height: GLYPH_BOX,
+              flexShrink: 0,
+              display: 'grid',
+              placeItems: 'center',
+              borderRadius: 'var(--bal-radius-sm)',
+              bgcolor: 'var(--bal-primary-soft)',
+            }}
+          >
+            <AppIcon icon={bullet.icon} size={16} color="var(--bal-primary)" />
+          </Box>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {t(bullet.key)}
           </Typography>
         </Stack>

client/src/components/auth/constants.ts

@@ -1,5 +1,2 @@
 /** Reading width for the branded auth screens (login, OTP, role selection). */
 export const AUTH_CARD_MAX_WIDTH = 420;
-
-/** Width of the login hero row (illustration + card) once the illustration joins on desktop. */
-export const AUTH_HERO_MAX_WIDTH = 760;

client/src/components/auth/richText.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { NextIntlClientProvider, useTranslations } from 'next-intl';
+import { FunctionComponent } from 'react';
+import enMessages from '../../../messages/en.json';
+import faMessages from '../../../messages/fa.json';
+
+/*
+ * The auth screens' `t.rich` call sites, exercised against the REAL message catalogue and the
+ * REAL next-intl formatter.
+ *
+ * `OtpStep.test.tsx` stubs `t.rich` to an identity function, which is precisely how a broken
+ * message shipped: `otp_sent_to` carried a `{phone}` *value* placeholder while the component
+ * passed a *function* for it, so next-intl handed the function straight through and React was
+ * asked to render it — "Functions are not valid as a React child". A value placeholder and a
+ * rich-text tag are not interchangeable, and only the real formatter can tell them apart.
+ */
+
+const MASKED_PHONE = '0912*****34';
+const CLOCK = '01:59';
+
+const PhoneEcho: FunctionComponent = () => {
+  const t = useTranslations('auth');
+  return <p>{t.rich('otp_sent_to', { phone: () => <bdi dir="ltr">{MASKED_PHONE}</bdi> })}</p>;
+};
+
+const ResendCountdown: FunctionComponent = () => {
+  const t = useTranslations('auth');
+  return <p>{t.rich('resend_in', { time: () => <bdi dir="ltr">{CLOCK}</bdi> })}</p>;
+};
+
+describe.each([
+  ['fa', faMessages],
+  ['en', enMessages],
+])('auth rich-text messages (%s)', (locale, messages) => {
+  function renderWithLocale(node: React.ReactNode) {
+    render(
+      <NextIntlClientProvider locale={locale} messages={messages}>
+        {node}
+      </NextIntlClientProvider>
+    );
+  }
+
+  it('renders the masked phone as a real node inside otp_sent_to', () => {
+    renderWithLocale(<PhoneEcho />);
+    expect(screen.getByText(MASKED_PHONE)).toBeInTheDocument();
+  });
+
+  it('isolates the phone in an LTR <bdi> so RTL bidi never reorders the digit runs', () => {
+    renderWithLocale(<PhoneEcho />);
+    expect(screen.getByText(MASKED_PHONE).tagName.toLowerCase()).toBe('bdi');
+  });
+
+  it('renders the countdown as a real node inside resend_in', () => {
+    renderWithLocale(<ResendCountdown />);
+    expect(screen.getByText(CLOCK)).toBeInTheDocument();
+  });
+});