make builds sequential for better performing

.claude/skills/backend-feature/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: backend-feature
+description: >-
+  Add a feature to the Balinyaar .NET server — a command, a query, or both — end to end: the Application
+  slice, the controller, EF configuration/migration if it touches a table, tests, and the doc updates it
+  triggers. Use when implementing a new endpoint or extending an existing one anywhere under server/.
+---
+
+# Balinyaar Backend Feature
+
+The sequence for shipping one CQRS slice, from the Application layer to a green gate.
+
+**Precedence.** This skill is the **procedure** — what order to do things in. The **rules** within each
+step live in `docs/rules/server/` and this skill defers to them; it doesn't restate them.
+
+| For | Read |
+|-----|------|
+| The dispatcher, folder shape, `OperationResult`, the controller skeleton, authorization | [docs/rules/server/cqrs.md](../../../archive/docs/rules/server/cqrs.md) |
+| Projects, layers, the seam catalogue, startup wiring | [docs/rules/server/structure.md](../../../archive/docs/rules/server/structure.md) |
+| EF Core, migrations, soft-delete, audit, config-as-rows, state machines, snapshots, uniqueness | [docs/rules/server/persistence.md](../../../archive/docs/rules/server/persistence.md) |
+| Anything on the money path — ledger, refunds, BNPL, payouts, invoices | [docs/rules/server/money.md](../../../archive/docs/rules/server/money.md) |
+| Auth, JWE, sessions, field encryption, tenancy | [docs/rules/server/identity.md](../../../archive/docs/rules/server/identity.md) |
+| C# style, naming, async, testing | [docs/rules/server/conventions.md](../../../archive/docs/rules/server/conventions.md) |
+| The gate, and what "done" means | [docs/rules/shared/git-and-gates.md](../../../archive/docs/rules/shared/git-and-gates.md) |
+
+**Stack:** ASP.NET Core (.NET 10), Clean Architecture, CQRS on `martinothamar/Mediator` (a source generator —
+**not MediatR**; there is no `IMediator` anywhere in this codebase), EF Core, FluentValidation, Mapster.
+
+---
+
+## 1. Scope it before writing anything
+
+- **Which area?** The Application feature areas mirror the Domain entity folders — `Identity`, `Geography`,
+  `Catalog`, `Verification`, `Search`, `Booking` (singular, pre-payment) / `Bookings` (plural, post-payment),
+  `Payments`, `Refunds`, `Invoices`, `Bnpl`, `Payouts`, `Reviews`, `PatientCareRecords`, `Messaging`,
+  `PartnerCenters`, `Configuration`, `Audit`, `Analytics`, `Holidays`, `Notifications`, `SupportAlerts`. Full
+  list and the schema-per-area mapping: [structure.md](../../../archive/docs/rules/server/structure.md) §2.
+- **Command or query, or both?** A command mutates; a query reads. Most features are a matched pair (create
+  + get, or update + list).
+- **Find a sibling to mirror.** Grep the area's existing folder —
+  `Features/<Area>/{Commands,Queries}/` — for a feature shaped like the one you're adding. Copying a live
+  pattern beats inventing a new one.
+- **Does it touch money?** (ledger, refunds, invoices, BNPL, payouts) → read
+  [money.md](../../../archive/docs/rules/server/money.md) **first**. The invariants there (integer IRR, balanced
+  ledger postings, webhook idempotency, snapshot-at-compute-time) are not suggestions.
+- **Does it add or change a table?** → read [persistence.md](../../../archive/docs/rules/server/persistence.md) §5–7
+  before modeling it (soft-delete filters, forward-only status machines, snapshot fields, uniqueness
+  patterns all have a house pattern — don't reinvent one).
+- **Does it need a new external dependency** (a vendor, a rail)? It becomes an interface in
+  `Application/Contracts/`, mock in `CrossCutting/Seams/`, real in `CrossCutting/Seams/Real/`, selected by a
+  `Seams:<rail>:Provider` config key that **falls closed to the mock**. See
+  [structure.md](../../../archive/docs/rules/server/structure.md) §3.
+
+---
+
+## 2. The Application slice
+
+```
+Baya.Application/Features/<Area>/
+├── Commands/<VerbNoun>Command/
+│   ├── <VerbNoun>Command.cs           record : IRequest<OperationResult<T>>
+│   ├── <VerbNoun>Command.Handler.cs   internal sealed class : IRequestHandler<…>
+│   └── <VerbNoun>Command.Validator.cs AbstractValidator<Command>  (omit when there is nothing to validate)
+└── Queries/<VerbNoun>Query/
+    ├── <VerbNoun>Query.cs
+    ├── <VerbNoun>Query.Handler.cs
+    └── <VerbNoun>Query.Result.cs      record Result(…)  ← the DTO returned
+```
+
+1. Create the folder, one type per file, file name matching the type name.
+2. The request is a `record`; the handler is `internal sealed`; return `OperationResult<T>` — never throw
+   for an expected failure (`SuccessResult`/`FailureResult`/`NotFoundResult`/`ConflictResult` map to
+   200/400/404/409). Let a genuinely unexpected exception propagate to the global `ExceptionHandler`.
+3. Add a FluentValidation validator if the request takes input. **Never validate a route-supplied id in the
+   body command** — route values aren't bound into it.
+4. Query: `AsNoTracking()` + `.Select()` straight to the DTO — never hydrate an entity graph to map it in
+   memory. Command: use `Include` only when you need navigation properties loaded to mutate the aggregate,
+   access the DB through `IUnitOfWork`, and `CommitAsync` once at the end.
+
+Full rules and the validator/OperationResult examples: [cqrs.md](../../../archive/docs/rules/server/cqrs.md) §1–3.
+
+---
+
+## 3. Persistence — only if you added or changed a table
+
+1. One `IEntityTypeConfiguration<T>` in `Persistence/Configuration/<Area>Config/`.
+2. A soft-deletable entity **must** declare `HasQueryFilter(o => !o.IsDeleted)` — without it, deleted rows
+   leak into every query that doesn't explicitly exclude them.
+3. A lifecycle `status` column is a forward-only machine: `const string` codes, a private setter, cohesive
+   transition methods, a static allowed-edges table. The handler pre-checks and returns a clean `409` — it
+   never throws for "already moved."
+4. A row that represents a past agreement (a price, an address, a policy, a deadline) is a **snapshot** —
+   frozen at compute time, never re-derived from a later edit to its source.
+5. Money-critical constants (rates, deadlines, tolerances) are read via `IPlatformConfig.GetConfig<T>` —
+   **never hardcoded**, and never re-read for an already-priced row.
+
+```bash
+dotnet ef migrations add <Name> --project src/Infrastructure/Baya.Infrastructure.Persistence --startup-project src/API/Baya.Web.Api
+dotnet ef database update --project src/Infrastructure/Baya.Infrastructure.Persistence --startup-project src/API/Baya.Web.Api
+```
+
+Full patterns, with the exact uniqueness/snapshot/state-machine tables:
+[persistence.md](../../../archive/docs/rules/server/persistence.md).
+
+---
+
+## 4. The controller
+
+```csharp
+[ApiVersion("1")]
+[ApiController]
+[Route("api/v{version:apiVersion}/[controller]")]
+[Display(Description = "One-line description shown in Swagger")]
+[Authorize(ConstantPolicies.DynamicPermission)]   // or [Authorize], or omit for public
+public sealed class MyFeatureController(ISender sender) : BaseController
+{
+    [HttpPost("[action]")]
+    [ProducesOkApiResponseType<MyCommandResult>]
+    public async Task<IActionResult> CreateSomething(MyCommand command, CancellationToken ct)
+        => OperationResult(await sender.Send(command, ct));
+}
+```
+
+- `sealed`, inject `ISender` via the primary constructor, always `base.OperationResult(result)` — never
+  `Ok()`/`BadRequest()`/`NotFound()` directly.
+- Never hardcode a route string. If the method name doesn't read cleanly as the URL segment
+  `SnakeCaseParameterTransformer` will produce, rename the method instead.
+- Pick the narrowest authorization that fits: none (truly public) → `[Authorize]` (any authenticated user) →
+  `[Authorize(ConstantPolicies.DynamicPermission)]` (role/claim-gated admin action). Table and rate-limiting
+  notes: [cqrs.md](../../../archive/docs/rules/server/cqrs.md) §4.
+
+---
+
+## 5. Tests
+
+1. **Handler unit test** (xUnit + NSubstitute + FluentAssertions), Arrange-Act-Assert, named
+   `{MethodUnderTest}_{Scenario}_{ExpectedOutcome}`. Test the handler directly, not the controller.
+2. **At least one `WebApplicationFactory<Program>` integration test** in `Baya.Test.Api` for the area,
+   covering: happy path → 200, unauthenticated → 401, validation failure → 400 with field detail.
+3. The recurring-job scheduler is dormant under `Testing`, so a background tick can't make an integration
+   test flaky — you don't need to account for it.
+
+Examples and the full testing convention: [conventions.md](../../../archive/docs/rules/server/conventions.md) §8.
+
+---
+
+## 6. Docs this feature triggers — in the same change
+
+- **[`docs/integration/domains/<domain>.md`](../../../archive/docs/integration/domains/index.md)** — add the new
+  endpoint with its verdict (`wired`/`unwired`/`phantom`), matching the client `services/` domain it belongs
+  to.
+- **The OpenAPI snapshot** — regenerate `docs/integration/openapi/swagger.v1.json` per
+  [openapi/README.md](../../../archive/docs/integration/openapi/README.md) and update its provenance table (date,
+  commit, path/operation counts) in the same change. A snapshot with stale provenance is what that
+  convention exists to prevent.
+- **[`docs/status/backlog.md`](../../../archive/docs/status/backlog.md)** — tick the row if this closes a filed
+  item. Never delete a row; a ticked row is the record that it shipped.
+- **A reference file in `docs/rules/server/`** — only if the feature introduces a genuinely new reusable
+  pattern, seam, or base class. Don't add prose for a feature that just follows the existing pattern.
+
+---
+
+## 7. Before you call it done
+
+Run the server gate — `dotnet build Baya.sln` (**zero new warnings**) and `dotnet test Baya.sln` — and read
+your diff as if reviewing the PR. Full "what done means" checklist:
+[git-and-gates.md](../../../archive/docs/rules/shared/git-and-gates.md) §2.

.claude/skills/flow-testing/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: flow-testing
+description: >-
+  Boot both sides of Balinyaar locally and walk a real user journey end to end — the right seeded account,
+  the right flow doc, and knowing whether you just proved the real path or a mock answering. Use before
+  claiming a fix or feature works, or when asked to test, verify, or demo a flow.
+---
+
+# Balinyaar Flow Testing
+
+Exercising a flow proves something only if you know which half of the stack actually answered. This is the
+procedure; the facts it points at (ports, accounts, known failure modes) live in
+[docs/flows/testing-setup.md](../../../archive/docs/flows/testing-setup.md) and are kept current there — don't copy
+them here, they will drift.
+
+---
+
+## 1. Boot it
+
+The five-minute path, verbatim from [testing-setup.md](../../../archive/docs/flows/testing-setup.md#the-five-minute-path):
+
+```bash
+# API — mock SMS or request_otp 500s
+cd server
+Seams__Sms__Provider=mock dotnet run --project src/API/Baya.Web.Api/Baya.Web.Api.csproj
+
+# client
+cd client && npm install && npm run dev        # http://localhost:3000/fa
+
+# read the OTP — the console does NOT print it
+curl http://localhost:5002/api/v1/dev/last_otp/09120000010
+```
+
+No database setup: the committed dev config points at an already-seeded remote SQL Server. If anything here
+doesn't match reality when you run it, **testing-setup.md is wrong and needs a fix in the same change** — it
+carries a `Last verified` stamp for exactly this reason.
+
+---
+
+## 2. Check the mock-vs-real map *before* you conclude anything
+
+A flow "working" through a mocked domain proves the UI, not the server. Before testing:
+
+1. Open [docs/integration/domains/index.md](../../../archive/docs/integration/domains/index.md) — the census table
+   names which of the 22 client `services/` domains are real vs **mock** (currently 15 real, 7 mock:
+   `admin`, `bnpl`, `partnerCenter`, `patientRecords`, `payouts`, `refunds`, `verification`).
+2. A mocked domain is a `USE_<DOMAIN>_MOCK` flag in `client/src/services/<domain>/constants.ts` — check it
+   directly if you need certainty for the exact domain you're touching.
+3. State your finding in terms of which one you exercised: "the booking flow works end-to-end against the
+   real server" is a different claim from "the admin console renders correctly against its mock" — never
+   report the second as if it were the first.
+
+---
+
+## 3. Pick the right seeded account
+
+Demo accounts, their roles, and what each one demonstrates are tabulated in
+[testing-setup.md](../../../archive/docs/flows/testing-setup.md#demo-accounts) — read it there rather than assuming
+a phone number. One standing gap to route around: **the seeded admin accounts (`…020` `super_admin`,
+`…021` `finance`) get 403 on every real admin endpoint** (a `DynamicPermission` / role-literal mismatch).
+The admin backoffice is only testable against the client's mock; don't spend time trying to walk it against
+the real API without first checking whether that gap has been closed.
+
+---
+
+## 4. Walk the flow
+
+[docs/flows/index.md](../../../archive/docs/flows/index.md) is the atlas — one file per user-meaningful journey,
+each answering exactly three questions: what it does, what's mocked *for that journey specifically*, and how
+to test it. Open the one file that matches what you're testing rather than guessing the steps; it's the
+one place gap numbers and REQ references for that journey are tracked.
+
+---
+
+## 5. Two things that will silently invalidate your test
+
+- **The scheduler is live while you test.** `booking_request_expiry` runs every 60 seconds (hardcoded) and
+  flips an un-actioned request to `expired_no_response` / `payment_deadline_expired` out from under you. Act
+  on a request promptly, or create a fresh one rather than trying to reuse an old test artifact.
+- **The OTP endpoints are rate-limited together.** `request_otp` and `verify_otp` share one bucket, 5 calls
+  per 60 s per IP — a login is 2 calls, so that's **two logins per minute, total**. Space scripted logins
+  ≥ 40 s apart (see [testing-setup.md](../../../archive/docs/flows/testing-setup.md#scripting-logins) for a working
+  script) or you'll 429 and misread it as a bug.
+
+---
+
+## 6. When the seeded world has aged out
+
+There is no in-app reseed — both seeders guard on natural keys, so re-running never refreshes stale dates.
+If the scenario you need (an "upcoming" booking, an open dispute window, a pending request) no longer exists
+because the world was seeded days ago:
+
+- **Fastest fix:** create the scenario fresh yourself (customer → search → booking request → accept → pay) —
+  this is the intended way to exercise booking-request and checkout-and-payment anyway.
+- **Full reseed:** only against a **local** database — `docker compose down -v && docker compose up -d` under
+  `server/`, then boot. **Never drop the shared remote database** casually; it backs the live demo deployment
+  and other people's sessions.
+
+---
+
+## 7. Report what you actually saw
+
+Name the account you used, the domain's mock/real status, and the exact response (status code, error
+message) rather than "it worked" — the troubleshooting table in
+[testing-setup.md](../../../archive/docs/flows/testing-setup.md#troubleshooting) exists because several failure
+modes here look identical to an unrelated bug (a rate limit looks like a crash; `/healthz/ready` failing on
+Windows looks like the app is down). Check it before filing something as a new defect.

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

@@ -12,9 +12,22 @@ description: >-
 # Balinyaar Frontend Designer
 
 Build UI that looks like Balinyaar and behaves correctly in both locales and both
-color schemes on the first try. This skill is the design contract; the engineering
-contract (providers, fetch, cookies, routing) lives in [client/CLAUDE.md](../../../client/CLAUDE.md) — read it
-before touching layout/provider/data code, **don't restate it**, and never violate it.
+color schemes on the first try.
+
+**Precedence.** This skill is the **design** contract — brand, tone, and the visual
+decisions. The **engineering** contract is [client/CLAUDE.md](../../../client/CLAUDE.md)
+(hard rules) plus [docs/rules/client/](../../../archive/docs/rules/client/) (one reference file
+per area). Where the two overlap — tokens, typography, the component library, shells,
+icons — **`docs/rules/client/` is authoritative and this skill defers to it.** Read the
+relevant one before touching layout, provider, or data code; don't restate it here, and
+never violate it.
+
+| For | Read |
+|-----|------|
+| Tokens, palette, dark mode, RTL, fonts, motion | [docs/rules/client/theme.md](../../../archive/docs/rules/client/theme.md) |
+| The `App*` library, shells, navigation, icons | [docs/rules/client/components.md](../../../archive/docs/rules/client/components.md) |
+| Copy and Persian orthography | [docs/rules/client/i18n.md](../../../archive/docs/rules/client/i18n.md) |
+| Forms | [docs/rules/client/forms.md](../../../archive/docs/rules/client/forms.md) |
 
 **Stack:** Next.js 16 (App Router, Turbopack) · React 19 · MUI v9 (`@mui/material`) ·
 Emotion (RTL via `stylis-plugin-rtl`) · next-intl v4 · notistack. Everything below
@@ -83,9 +96,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.
@@ -100,14 +119,24 @@ these; they're define-only in CSS):
 - **Money emphasis** — `--bal-money-emphasis`, an AA-contrast-safe color for emphasized
   money text. `--bal-secondary` (terracotta) fails AA contrast at small sizes on light
   backgrounds — never use it for money text, use this token instead.
+- **Soft fills** — every brand and semantic color has a `-soft` variant
+  (`--bal-primary-soft`, `--bal-warning-soft`, …) for a tinted background. Reach for it
+  before hand-mixing an alpha over a surface.
+- **Avatar** — `--bal-avatar-1..6` (+ each `-contrast`), the six warm pairs
+  `InitialsAvatar` picks from by a deterministic name hash. Add a seventh to **both**
+  scheme blocks or don't add one.
+- **Map** — `--bal-pin-shadow`, the address-picker pin.
+
+Full catalogue, with what each group backs:
+[docs/rules/client/theme.md](../../../archive/docs/rules/client/theme.md) §2.
 
 ---
 
 ## 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
@@ -143,15 +172,23 @@ wrapper over the bare MUI component — the wrappers carry the house defaults.
 | `AppIconButton` | icon-only actions | takes an icon `name`, `title`, `to`/`onClick` |
 | `AppIcon` | any icon | `icon="home"` by registered name (§6); `size`, `color` props |
 | `AppLink` | internal/external links | locale-aware Next navigation; default underline `hover` |
-| `AppAlert` | inline alerts | default `severity="error"`, `variant="filled"` |
-| `AppImage` | images | wrapper around next/image conventions |
+| `AppAlert` | inline alerts | defaults to a calm `severity="info"`, `variant="standard"` — pass `severity="error"` explicitly when it really is an error |
 | `AppLoading` | loading state | default circular, `primary`, `3rem` |
 | `ErrorBoundary` | wrapping fault-prone subtrees | already wraps page content in the shell |
-| `UserInfo` | user avatar/identity block | feature component |
+| `ProfileSummary` | the identity card in chrome | avatar+name+masked phone+role label+optional `TrustBadge`; vertical or `compact` horizontal chip |
 
 Defaults for these live in `src/components/config.ts` (`APP_BUTTON_VARIANT`,
-`APP_ICON_SIZE = 24`, `CONTENT_MAX_WIDTH = 800`, `CONTENT_MIN_WIDTH = 320`, alert/link/
-loading defaults). Change a default there, not per-call-site.
+`APP_ICON_SIZE = 24`, `APP_ICON_STROKE_WIDTH = 1.75`, `APP_BUTTON_ICON_SIZE = 20`,
+`CONTENT_MAX_WIDTH = 480`, `CONTENT_MIN_WIDTH = 320`, alert/link/loading defaults).
+Change a default there, not per-call-site.
+
+Beyond the `App*` wrappers there is a **state kit** — `EmptyState`, `ErrorState`,
+`QueryStateGate`, `PageHeader`, `ConfirmDialog`, `SurfaceCard`, `AccentCard`, `Money`,
+`StatusTimeline`, the `Jalali*` date inputs, `StickyActionBar`, `Pager`, `NavHubList`,
+`InitialsAvatar`, `FormDialogShell` — with **one pattern per state**. Never hand-roll a
+dashed-border "nothing here" block or a per-screen pager; and **an error state is never an
+empty state.** Catalogue in
+[docs/rules/client/components.md](../../../archive/docs/rules/client/components.md).
 
 For layout/spacing use MUI primitives directly: `Box`, `Stack`, `Container`, `Grid`,
 `Paper`, `Card`. Use the `spacing`/`sx` system (theme spacing unit = 8px) — never inline
@@ -160,58 +197,131 @@ pixel margins for rhythm.
 **New shared component?** Put it in `src/components/<Name>/<Name>.tsx` with an
 `index.tsx` barrel, follow the `App*` prop-spreading + JSDoc style of `AppButton.tsx`,
 and add a co-located `.test.tsx` (mandatory for anything imported in >1 place — see
-CLAUDE.md "Unit Testing"; wrap with `<ThemeProvider>`, never mock MUI).
+[docs/rules/client/testing.md](../../../archive/docs/rules/client/testing.md); wrap with
+`<ThemeProvider>`, never mock MUI). If it goes at the top of the `@/components/common`
+barrel, prefer **caller-owned copy** (required `title`/`body`/`retryLabel` string props)
+over calling `useTranslations` inside it — `next-intl` is ESM-only and poisons every test
+that transitively imports the barrel. `ErrorBoundary`/`ErrorState` are the model;
+[components.md](../../../archive/docs/rules/client/components.md) has the why.
+
+**Any form with more than one field is a react-hook-form form**, bound through the
+`@/components/common/form` wrappers (`RhfTextField`, `RhfChipSelect`,
+`RhfJalaliDateField`, `RhfControlGroup`) and grouped into `FormSection`s. A single-field
+control is state, not a form. Full pattern:
+[docs/rules/client/forms.md](../../../archive/docs/rules/client/forms.md).
 
 ---
 
 ## 5. Layout & page shells
 
-- **Private (authenticated) screens** render inside `PrivateLayout` →
-  `TopBarAndSideBarLayout` (`src/layout/`): a `TopBar` + a `SideBar` (variant
-  `sidebarPersistentOnDesktop`: persistent ≥desktop, temporary drawer on mobile) +
-  a dark-mode toggle. Sidebar nav items are `{ title, path, icon }` arrays built with
-  `useTranslations('nav')`. Page content is auto-wrapped in `ErrorBoundary`.
-- **Public screens** use `PublicLayout`.
-- Shell dimensions are constants in `src/layout/config.ts` (`SIDE_BAR_WIDTH = 240px`,
-  top-bar `56px` mobile / `64px` desktop, anchors). Respect them; don't hard-code.
+**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 four structural guarantees, and is the only place any of them is
+  solved: the width cap; the **frame, not the document, owns the scroll** (a single
+  scrolling `<main>` fills the frame, with the bars pinned **`position: absolute`** over
+  it — never `fixed`, which would break out of the centered column — and `<main>`
+  reserving each bar's exact height as padding, so no page needs a top offset);
+  `overflowX: hidden` + `minWidth: 0`, so an over-wide child clips rather than dragging
+  the app sideways; and, above `sm`, the column **floats** as a rounded shadowed card
+  with a gutter all round (edge-to-edge on a phone). Genuinely wide content (a data
+  table) scrolls **inside its own container** — see `AdminDataTable`'s `TableContainer`.
+- `AppFrame` also publishes **`--bal-chrome-top` / `--bal-chrome-bottom`** on the scroll
+  container (already including `env(safe-area-inset-*)`, and `0px` in a chrome-free
+  shell), so any `position: sticky` element can clear the bars without importing a
+  constant. `StickyActionBar` is the reference consumer — don't recompute an offset.
+- **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 of its own; `AppFrame` wraps both bars in the shared
+  `FLOATING_BAR_SX`, so the header is the bottom bar mirrored: 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. The bottom bar is **icon-only** (at five tabs the caption was
+  the widest thing in it and cost a whole line — the label survives as `aria-label`/
+  `title`), each tab a fixed 44px circle laid out `space-around`.
+- **A stateful card carries its state in its content, not a stripe.** `AccentCard`'s
+  colored edge stripe was removed — a column of them read as a row of loose vertical rules
+  down the RTL edge of the screen. `tone` survives as the semantic label (reaching the DOM
+  as `data-accent-tone`); the `StatusChip`, icon and copy inside carry the state.
+  **Do not reintroduce the stripe.**
+- **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` (`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.
-- Use `useIsMobile()` (`@/hooks`) for responsive branching, or MUI breakpoints in `sx`.
+- `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`, `forward`, `send`) 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.
 
 ---
 
@@ -231,11 +341,16 @@ Every screen/component you produce must satisfy **all** of these:
    switches automatically. Verify on both schemes — never assume a light background.
 4. **Tokens, not hexes.** No raw color literals in `sx`/`styled`/components (§2).
 5. **Constants, not magic values.** Cookie names, routes, repeated dimensions, event
-   names → named constants (CLAUDE.md "Constants").
+   names → named constants ([components.md](../../../archive/docs/rules/client/components.md) §5).
 6. **Use the wrappers** (§4) and the **icon registry** (§6) before bare MUI.
 7. **Shared component ⇒ co-located test** (§4).
 8. **MUI v9 API only.** No v5/v6-era props (e.g. `Stack` `useFlexGap`, `storageWindow`).
    Avoid deprecated APIs that throw.
+9. **Persian copy follows the style guide** — «بالین‌یار» with a ZWNJ, تأیید with a hamza,
+   جستجو in one form, formal شما. `npm run lint:copy` fails the gate on a banned variant.
+   Glossary and the full rules: [i18n.md](../../../archive/docs/rules/client/i18n.md) §4.
+10. **A screen never fabricates a figure.** A summary reads only off a query that already
+    answers it; a count still in flight is omitted, never faked or defaulted.
 
 ---
 
@@ -251,13 +366,15 @@ Every screen/component you produce must satisfy **all** of these:
 5. **Verify the four axes:** `/fa` (RTL) and `/en` (LTR) × light and dark. The default
    route is `/fa` — start there.
 6. **Tests** for any new shared component; **never** add a layout above `[locale]`
-   (breaks locale/dir — see CLAUDE.md).
-7. Data/fetch/auth/cookies/toasts → follow CLAUDE.md (`serverFetch`/`clientFetch`,
+   (breaks locale/dir — see [structure.md](../../../archive/docs/rules/client/structure.md)).
+7. Data/fetch/auth/cookies/toasts → follow
+   [services.md](../../../archive/docs/rules/client/services.md) and
+   [auth.md](../../../archive/docs/rules/client/auth.md) (`serverFetch`/`clientFetch`,
    `@/lib/cookies/*`, `dispatchToast`/`useSnackbar`). Don't reinvent these.
 
 ---
 
-## 9. Anti-patterns (design-specific — CLAUDE.md has the full engineering list)
+## 9. Anti-patterns (design-specific — `docs/rules/client/` has the full engineering list)
 
 - Hard-coded hex/rgb in components → use palette keys or `--bal-*` tokens.
 - MUI default success/error colors for feedback → use `--bal-*` semantic tokens.
@@ -268,6 +385,14 @@ Every screen/component you produce must satisfy **all** of these:
 - Raw MUI icon where a registry name is expected → register it in `AppIcon/config.ts`.
 - New shared component without a `.test.tsx`, or mocking MUI in tests.
 - Re-introducing `src/app/layout.tsx` / any layout above `[locale]`.
+- A `≥md` branch that widens a shell, restores a sidebar, or goes multi-column → there is
+  one layout, and it is a phone (§5).
+- A numeric `sx={{ borderRadius: n }}` → it multiplies the shape unit; use the radius token.
+- `fontWeight: 600` → neither face loads it, so it silently renders full Bold. 700/500/400.
+- Reintroducing `AccentCard`'s edge stripe, a drawer, a top-bar theme/locale toggle, or a
+  caption under a bottom-nav icon → each was deliberately removed.
+- A hand-rolled empty/error/loading block, or a per-screen pager → use the state kit (§4).
+- A second `prefers-reduced-motion` branch → there is exactly one, in `globals.css`.
 
 ---
 
@@ -298,4 +423,6 @@ pushing code back into Figma.
 | Layout shells | `client/src/layout/` |
 | Layout dimensions | `client/src/layout/config.ts` |
 | Messages (i18n) | `client/messages/{en,fa}.json` |
-| Engineering contract | `client/CLAUDE.md` |
+| Persian copy lint | `client/scripts/check-copy.mjs` |
+| Engineering hard rules | `client/CLAUDE.md` |
+| Engineering reference (per area) | `docs/rules/client/` |

.githooks/README.md

@@ -1,26 +0,0 @@
-# Git hooks
-
-Repo-managed git hooks (they live in version control, unlike `.git/hooks`).
-
-## Enable (once per clone)
-
-```bash
-git config core.hooksPath .githooks
-```
-
-## `pre-commit` — secret scan
-
-A fast, dependency-free backstop for the root `CLAUDE.md` rule **"Never commit secrets"**
-(refinement-phase-5). It rejects a commit that stages:
-
-- the historically-leaked SQL Server host `87.107.152.16`,
-- the retired hardcoded admin password `qw123321`,
-- a **real** connection-string password in any `appsettings*.json` (only the `SET_VIA_USER_SECRETS_OR_ENV`
-  placeholder is allowed — real values belong in user-secrets / environment variables),
-- private-key material or an AWS access-key id, anywhere.
-
-It scans only staged additions, so it is quick. It is **not** a replacement for a full scanner
-(gitleaks / trufflehog) in CI — it is the local first line of defence.
-
-Bypass a false positive with `git commit --no-verify` (use sparingly, and only when you are certain the
-flagged line is not a secret).

.githooks/pre-commit

@@ -1,62 +0,0 @@
-#!/usr/bin/env bash
-#
-# Balinyaar secret-scanning pre-commit hook (refinement-phase-5).
-# Blocks a commit that stages an obvious credential. This is a fast, dependency-free backstop for the
-# root CLAUDE.md rule "Never commit secrets" — not a replacement for gitleaks/trufflehog in CI.
-#
-# Enable once per clone:   git config core.hooksPath .githooks
-# Bypass a false positive:  git commit --no-verify   (use sparingly, and only when you are certain)
-#
-set -euo pipefail
-
-# Committed placeholders are allowed — real values are not. Keep in sync with StartupSecretsGuard.
-PLACEHOLDER='SET_VIA_USER_SECRETS_OR_ENV'
-
-# Only scan added/changed lines in text files that are staged.
-staged=$(git diff --cached --name-only --diff-filter=ACM)
-[ -z "$staged" ] && exit 0
-
-violations=0
-report() { printf '  ✖ %s\n' "$1"; violations=$((violations + 1)); }
-
-while IFS= read -r file; do
-  # Skip this hook, lockfiles, and binaries.
-  case "$file" in
-    .githooks/*) continue ;;
-    *.png|*.jpg|*.jpeg|*.gif|*.ico|*.pdf|*.dll|*.exe|*.snk) continue ;;
-  esac
-  [ -f "$file" ] || continue
-
-  added=$(git diff --cached -U0 -- "$file" | grep '^+' | grep -v '^+++' || true)
-  [ -z "$added" ] && continue
-
-  # The historically-leaked SQL Server host — must never reappear.
-  echo "$added" | grep -Eq '87\.107\.152\.16' && report "$file: leaked SQL Server host 87.107.152.16"
-
-  # The retired hardcoded admin password.
-  echo "$added" | grep -Eq 'qw123321' && report "$file: hardcoded admin password 'qw123321'"
-
-  # A real (non-placeholder) connection-string password in a committed appsettings file.
-  case "$file" in
-    *appsettings*.json)
-      echo "$added" \
-        | grep -Ei 'Password=[^;"'"'"' ]+' \
-        | grep -viq "Password=${PLACEHOLDER}" \
-        && report "$file: connection-string password must be '${PLACEHOLDER}' (real value belongs in user-secrets/env)"
-      ;;
-  esac
-
-  # Private keys and common cloud tokens, anywhere.
-  echo "$added" | grep -Eq -- '-----BEGIN (RSA|EC|OPENSSH|PRIVATE) .*PRIVATE KEY-----' && report "$file: private key material"
-  echo "$added" | grep -Eq 'AKIA[0-9A-Z]{16}' && report "$file: AWS access key id"
-done <<< "$staged"
-
-if [ "$violations" -gt 0 ]; then
-  echo ""
-  echo "Commit blocked: $violations potential secret(s) staged. Move the real value to user-secrets"
-  echo "(Development) or an environment variable (deploy) and commit only the '${PLACEHOLDER}' placeholder."
-  echo "See dev/post-phase/refinement/RUNBOOK.md. To override a false positive: git commit --no-verify"
-  exit 1
-fi
-
-exit 0

AGENTS.md

@@ -6,5 +6,11 @@ The canonical guidance for AI coding agents in this repository lives in **[CLAUD
 - Frontend → [client/CLAUDE.md](client/CLAUDE.md)
 - Backend → [server/CLAUDE.md](server/CLAUDE.md)
 
+Those hold the **hard rules**. For current-state product truth — what to test, what's blocking launch,
+what's missing — start at **[mvp/README.md](mvp/README.md)**. The engineering reasoning behind the hard
+rules, and the full business-requirement docs, were archived on 2026-08-02 into
+**[archive/docs/rules/](archive/docs/rules/index.md)** and **[archive/product/](archive/product/index.md)**
+respectively — reference material, not actively maintained.
+
 `CLAUDE.md` is the single source of truth at every level of this repo; these `AGENTS.md` files are
 just pointers so the convention is discoverable under either name.

CLAUDE.md

@@ -1,114 +1,145 @@
 # Balinyaar — Repository Guide (root)
 
-This is the **shared, repo-wide** guide for AI coding agents. It is intentionally short.
-Everything specific to one side of the stack lives in that project's own `CLAUDE.md`.
+The **shared, repo-wide** guide for AI coding agents. It is intentionally short. Everything specific to one
+side of the stack lives in that project's own `CLAUDE.md`.
 
 > **Read the guide for the side you are editing — and only that one.**
 > Working in `client/`? Read [client/CLAUDE.md](client/CLAUDE.md).
-> Working in `server/`? Read [server/CLAUDE.md](server/CLAUDE.md) (+ [server/CONVENTIONS.md](server/CONVENTIONS.md)).
+> Working in `server/`? Read [server/CLAUDE.md](server/CLAUDE.md).
 > You almost never need both. A frontend change does not touch server files, and vice-versa.
 
-> `AGENTS.md` files in this repo are thin pointers to the `CLAUDE.md` in the same folder.
-> `CLAUDE.md` is the single source of truth at every level.
+> Last verified: 2026-08-02 against commit `51e86a1`.
 
 ---
 
 ## What Balinyaar is
 
-Balinyaar is a **trust-first home-nursing marketplace in Iran**. Independent nurses (and
-nursing-company employees) list configurable services; families search, book, pay, and review.
-The platform holds funds in an escrow-style ledger and pays nurses out weekly after a confirmed
-check-out.
+Balinyaar is a **trust-first home-nursing marketplace in Iran**. Independent nurses (and nursing-company
+employees) list configurable services; families search, book, pay, and review. The platform holds funds in an
+escrow-style ledger and pays nurses out weekly after a confirmed check-out.
 
-Product/domain knowledge — business rules, the database model, payments/BNPL, escrow, the
-verification pipeline — is **not** in the code. It lives in [`product/`](product/), organized as a
-**structured docs tree** (one topic per file; start at [product/index.md](product/index.md) or its
-[README](product/README.md)):
+**Start at [`mvp/README.md`](mvp/README.md) for the current state of the product**, in three short,
+non-technical files: how to manually test any user journey, what's broken and blocking a real launch, and
+what's missing that isn't clearly scheduled. That folder is the live, load-bearing answer to "what's next."
 
-| Folder | What it covers |
-| --- | --- |
-| [product/overview/](product/overview/platform-summary.md) | What Balinyaar is, the four cross-cutting ground truths, Persian glossary. **Read first.** |
-| [product/business/](product/business/index.md) | The 14 functional/business requirement areas, one file each |
-| [product/data-model/](product/data-model/index.md) | The ~54-table SQL Server schema across 13 domains + [diagrams](product/data-model/diagrams.md) |
-| [product/payments/](product/payments/index.md) | BNPL, escrow ledger, settlement, VAT, integrations (with sources) |
-| [product/research/](product/research/index.md) | Market/legal/verification research & go-to-market (EN) |
-| [product/notes/](product/notes/open-questions.md) | Living notes: open questions, future ideas |
-| [product/fa/](product/fa/index.html) | Farsi versions (research report + verification flow) |
+Deeper product/business knowledge — the full business-requirement write-ups, the ~54-table database model,
+payments/BNPL research, market/legal research — was consolidated into [`archive/product/`](archive/product/index.md)
+during the 2026-08-02 documentation cleanup. It is **reference material, not required reading**: correct as
+of that date, but not actively maintained going forward. Read it when `mvp/` doesn't answer your question in
+enough depth — e.g. designing a new table, or needing the full reasoning behind a business rule.
 
-**Read the relevant `product/` doc before designing any schema, API, or feature.** Don't infer
-business rules from code — the code is young and the docs are the source of truth.
-
-> **Docs format:** the `.md` files are canonical; matching `.html` files are a generated, cross-linked
-> browsing view (`cd product && node build-docs.mjs`). Edit the Markdown and regenerate — never
-> hand-edit the `.html`. If you add/rename a `.md`, update the `NAV` manifest in `product/build-docs.mjs`.
+**Never infer business rules from code alone** — the code is young. If `mvp/` and `archive/product/` both go
+silent on a money, auth, tenancy, or clinical-data rule, say so rather than guessing.
 
 ---
 
 ## Repository layout
 
-This is **two independent projects in one repo**. There is no root-level build, package, or
-solution — each project is built, linted, and run on its own.
+This is **two independent projects in one repo**, plus their documentation. There is no root-level build,
+package, or solution — each project is built, linted, and run on its own.
 
-| Path | Project | Stack | Guide |
+| Path | What it is | Stack | Guide |
 | --- | --- | --- | --- |
 | [`client/`](client/) | Web frontend | Next.js 16 (App Router) · React 19 · TypeScript · MUI v9 · next-intl | [client/CLAUDE.md](client/CLAUDE.md) |
 | [`server/`](server/) | Backend API | ASP.NET Core (.NET 10) · Clean Architecture · CQRS · EF Core | [server/CLAUDE.md](server/CLAUDE.md) |
-| [`product/`](product/) | Product docs | Markdown | — (see table above) |
-| [`dev/`](dev/) | Build plan (not app code) | Markdown | [dev/README.md](dev/README.md) |
+| [`mvp/`](mvp/README.md) | **Current truth** — plain-language test flows, launch blockers, missing MVP features | Markdown | [mvp/README.md](mvp/README.md) |
+| [`archive/`](archive/README.md) | Everything else: business docs, engineering rules/contracts/flow-atlas, and the executed build history. **Reference/history, not instruction** — nothing to build from it, and nothing here is kept current | Markdown | [archive/README.md](archive/README.md) |
+| [`telegram-otp-bot/`](telegram-otp-bot/) | OTP relay (standalone, the pre-launch demo rail) | Node 18+, zero deps | [telegram-otp-bot/README.md](telegram-otp-bot/README.md) |
+| [`deploy/`](deploy/) | Reverse-proxy config | Caddyfile | [DEPLOY.md](DEPLOY.md) |
 
-The two communicate over **HTTP/JSON** (optionally gRPC). The client reads the API base URL from
-`NEXT_PUBLIC_API_URL`; the server listens on `https://localhost:5002` by default.
+`AGENTS.md` files in this repo are thin pointers to the `CLAUDE.md` in the same folder. **`CLAUDE.md` is the
+single source of truth at every level.**
 
-[`dev/`](dev/README.md) holds the **phased build plan** that takes the repo from its current baseline to
-the MVP: a chain of agent-runnable prompt files split into a `backend/` and a `frontend/` track
-([dev/phases/](dev/phases/README.md)), the cross-project API [`contracts/`](dev/contracts/README.md), and
-a [`shared-working-context/`](dev/shared-working-context/README.md) that lets a backend agent and a
-frontend agent run in parallel without touching the same files. It is planning/tooling, **not** a third
-project — there is nothing to build in it.
+The two projects communicate over **HTTP/JSON** (optionally gRPC). The client reads the API base URL from
+`NEXT_PUBLIC_API_URL`; the server listens on `http://localhost:5002` by default.
+
+**Deployment** is three Docker containers — one `Dockerfile` per project directory, orchestrated by the root
+[`docker-compose.yml`](docker-compose.yml) — behind an existing Caddy reverse proxy on the external `caddy_net`
+network, serving `balinyaar.ir` (client) and `api.balinyaar.ir` (server). The database is **not**
+containerised; it is a remote SQL Server. Full runbook: [DEPLOY.md](DEPLOY.md).
+
+`archive/` holds the executed build history, the former `docs/` (engineering rules, API contracts, the
+per-flow test atlas, status/backlog) and the former `product/` (business requirements, data model, research)
+— consolidated there on 2026-08-02 so the live tree stays focused on MVP work. **Anything in it is a record,
+not an instruction.**
+
+---
+
+## Where the rules live
+
+Three tiers. Open the `CLAUDE.md` for the side you are editing, then **one** reference file for the area you
+are touching.
+
+| Tier | Where | What |
+| --- | --- | --- |
+| **Hard rules** | this file · [client/CLAUDE.md](client/CLAUDE.md) · [server/CLAUDE.md](server/CLAUDE.md) | Constraints whose violation breaks the build, the gate, or a business invariant |
+| **Reference** (archived) | [`archive/docs/rules/`](archive/docs/rules/index.md) | The *how* and the *why*, as of 2026-08-02 — 3 shared files, 8 client, 6 server, plus the documentation convention. Not actively maintained; read it on demand, don't expect it to track later changes |
+| **Procedure** | `.claude/skills/` | Playbooks: **frontend-designer** (the design contract for `client/` UI), **backend-feature** (adding a server feature), **flow-testing** (walking a flow end to end) |
+
+Start at [archive/docs/rules/index.md](archive/docs/rules/index.md) — it maps "working on X" to the one file
+to open.
+
+**Precedence when two sources disagree:** `archive/product/` (business truth) → the relevant `CLAUDE.md`
+(engineering truth) → `archive/docs/rules/` (the reasoning behind it) → the task in front of you. **Never
+silently guess on money, auth, tenancy, or clinical-data rules** — do the safe thing, and say so.
 
 ---
 
 ## Working agreements (apply to both projects)
 
 1. **Stay within one project per change** unless the task explicitly spans both.
-2. **Match the surrounding style.** Mirror existing patterns; don't introduce new ones. Each
-   project documents its conventions in its own `CLAUDE.md`.
+2. **Match the surrounding style.** Mirror existing patterns; don't introduce new ones. Each project documents
+   its conventions in its own `CLAUDE.md`.
 3. **Run that project's own checks before declaring work done:**
-   - client: `npm run check` (type + lint), plus `npm run test:ci` if you touched a tested component.
-   - server: `dotnet build Baya.sln` and `dotnet test Baya.sln`.
-4. **Read the product docs before changing behavior.** Business rules are decisions, not guesses.
-5. **Don't reintroduce template/starter scaffolding.** Both projects were derived from open-source
-   starters; their branding, demo/showcase pages, and `_TITLE_`/`_DESCRIPTION_` placeholders were
-   intentionally removed. Don't add them back.
-6. **Never commit secrets.** Use `.env` (client) and `appsettings.*.json` / user-secrets (server).
-   Real connection strings, keys, and tokens never enter git.
-7. **Keep docs honest, and keep the architecture map current.** If you change how something works,
-   update the `CLAUDE.md` that describes it in the same change. Each level documents its architecture
-   in one canonical place — **this file's "Repository layout"** (repo), **client/CLAUDE.md "Project
-   Structure"** (frontend), **server/CLAUDE.md "Project map"** (backend). When a change alters that
-   structure — adds, removes, or renames a project, layer, route group, provider, or major folder, or
-   changes a cross-project / cross-layer boundary — update the matching architecture section in the
-   same change. Stale instructions are worse than none.
+   - client: `cd client && npm run check` (type + lint + copy), plus `npm run test:ci` if you touched a tested
+     component.
+   - server: `cd server && dotnet build Baya.sln` (**zero new warnings**) and `dotnet test Baya.sln`.
+   - What "done" means in full: [archive/docs/rules/shared/git-and-gates.md](archive/docs/rules/shared/git-and-gates.md).
+4. **Read [`mvp/`](mvp/README.md) (and `archive/product/` for depth) before changing behavior.** Business rules are decisions, not guesses.
+5. **Don't reintroduce template/starter scaffolding.** Both projects were derived from open-source starters;
+   their branding, demo/showcase pages, and `_TITLE_`/`_DESCRIPTION_` placeholders were intentionally removed.
+   Don't add them back.
+6. **Configuration lives in files, not a secret store.** `dotnet user-secrets` is **not used** — the
+   `<UserSecretsId>` was removed from `Baya.Web.Api.csproj`, so that store **is not even read**. Any
+   instruction anywhere to set a value with it is stale. Server config (including keys) lives in
+   `appsettings.*.json`; client config in `.env.development` / `.env.production`; the deployment's
+   container-specific overrides in `docker-compose.yml`.
+   This is a deliberate pre-launch trade for a demo deployment — **the repo therefore contains live
+   credentials.** Before onboarding real users, rotate them and move the secret half out of git (see
+   [DEPLOY.md](DEPLOY.md) "Going to Production"). **One value is load-bearing and must never change:**
+   `Seams:FieldEncryption:Key` / `:HashKey` decrypt all existing PII and derive the phone-lookup hash.
+7. **Keep docs honest, and keep the architecture map current.** If you change how something works, update the
+   doc that describes it in the **same** change. Each level documents its architecture in one canonical place —
+   **this file's "Repository layout"** (repo), **client/CLAUDE.md "Project structure"** (frontend),
+   **server/CLAUDE.md "Project map"** (backend). When a change alters that structure — adds, removes, or
+   renames a project, layer, route group, provider, or major folder, or changes a cross-project / cross-layer
+   boundary — update the matching section in the same change. The full anti-drift convention (what to update
+   when X changes, the `> Last verified:` stamp, length budgets) is
+   [archive/docs/rules/documentation.md](archive/docs/rules/documentation.md). **Stale instructions are worse than none.**
 8. **Write clean, self-documenting code.**
-   - **No dead code.** Remove unused variables, imports/usings, parameters, and private members —
-     don't leave them behind and don't suppress the warning. The client enforces this with ESLint
-     (`@typescript-eslint/no-unused-vars` as an *error*); on the server they are build warnings and
-     the gate is zero new warnings. Per-project specifics live in each project's `CLAUDE.md` /
-     `CONVENTIONS.md`.
-   - **Comment the *why*, not the *what*.** Don't write verbose comments that restate what the code
-     already says. Add a comment only where a non-obvious decision, constraint, business rule, or
-     trade-off isn't evident from the code itself. Prefer a clearer name over a comment.
+   - **No dead code.** Remove unused variables, imports/usings, parameters, and private members — don't leave
+     them behind and don't suppress the warning. The client enforces this with ESLint
+     (`@typescript-eslint/no-unused-vars` as an *error*); on the server they are build warnings and the gate is
+     zero new warnings.
+   - **Comment the *why*, not the *what*.** Don't write verbose comments that restate what the code already
+     says. Add a comment only where a non-obvious decision, constraint, business rule, or trade-off isn't
+     evident from the code itself. Prefer a clearer name over a comment.
+   - Details and worked examples: [archive/docs/rules/shared/code-quality.md](archive/docs/rules/shared/code-quality.md).
+9. **A mock is only sanctioned behind a DI-registered seam**, selected by configuration, defaulting to the
+   mock, and recorded in [`mvp/blockers.md`](mvp/blockers.md) (or `archive/docs/status/` for the full historical
+   ledger). Never an `if (mock)` branch scattered through the code.
 
 ---
 
 ## Naming
 
-- The **server**'s C# namespaces, projects, and solution all use the `Baya*` prefix
-  (`Baya.Web.Api`, `Baya.sln`). Keep new server code under the `Baya.*` convention.
+- The **server**'s C# namespaces, projects, and solution all use the `Baya*` prefix (`Baya.Web.Api`,
+  `Baya.sln`). Keep new server code under the `Baya.*` convention.
 - The **client** package is `balinyaar-client`; the `@/*` import alias maps to `client/src/*`.
 
-The product/brand name is **Balinyaar**; the server's `Baya*` prefix is a legacy code namespace —
-do not rename it without explicit instruction.
+The product/brand name is **Balinyaar** — «بالین‌یار» in Persian copy, with a ZWNJ, always. The server's
+`Baya*` prefix is a legacy code namespace: **do not rename it without explicit instruction.** Full
+conventions: [archive/docs/rules/shared/naming.md](archive/docs/rules/shared/naming.md).
 
 ---
 
@@ -119,5 +150,5 @@ do not rename it without explicit instruction.
 cd client && npm install && npm run dev      # http://localhost:3000
 
 # Backend
-cd server && dotnet run --project src/API/Baya.Web.Api/Baya.Web.Api.csproj   # https://localhost:5002/swagger
+cd server && dotnet run --project src/API/Baya.Web.Api/Baya.Web.Api.csproj   # http://localhost:5002/swagger
 ```

DEPLOY.md

@@ -0,0 +1,208 @@
+# Deploying Balinyaar
+
+A first, shareable deployment of the whole stack under **balinyaar.ir**, in Docker, behind an existing
+Caddy reverse proxy that terminates TLS.
+
+> **This file is the deploy *procedure*.** The runtime dependency graph — every edge, what breaks when it is
+> down, and where it is configured — is [archive/docs/integration/topology.md](archive/docs/integration/topology.md)
+> (archived reference, not actively maintained), and
+> every configuration key on both sides is
+> [archive/docs/integration/config-matrix.md](archive/docs/integration/config-matrix.md). Read those to answer
+> "what talks to what" or "where is this value set"; read this one to actually ship.
+
+| Host | Serves | Container |
+| --- | --- | --- |
+| `balinyaar.ir`, `www.balinyaar.ir` | Next.js web client | `balinyaar-web:3000` |
+| `api.balinyaar.ir` | ASP.NET Core API | `balinyaar-api:8080` |
+| *(internal only)* | Telegram OTP relay | `balinyaar-otp-relay:5010` |
+
+The **database is not containerised** — it is the remote SQL Server already configured in
+[server/src/API/Baya.Web.Api/appsettings.Development.json](server/src/API/Baya.Web.Api/appsettings.Development.json).
+Nothing needs to be provisioned for it; the API just needs network reach to `87.107.152.16:1433`.
+
+---
+
+## Configuration model
+
+**There is no `dotnet user-secrets` any more.** The `<UserSecretsId>` was removed from
+`Baya.Web.Api.csproj`, so the API no longer reads that store at all — a stale `secrets.json` on a dev
+machine is now inert and can be deleted. Every value lives in a file in the repo:
+
+| What | Where |
+| --- | --- |
+| API config + secrets (DB, JWE keys, field-encryption keys, Telegram key, CORS, trusted proxies) | `server/src/API/Baya.Web.Api/appsettings.Development.json` |
+| The two values that differ between a laptop and the container network | `docker-compose.yml` → `api.environment` |
+| Client build-time config (API URL, site origin) | `client/.env.production` |
+| Telegram relay config (bot token, chat ids, API key, proxy) | `docker-compose.yml` → `otp-relay.environment` |
+
+The placeholder string `SET_VIA_USER_SECRETS_OR_ENV` in the base `appsettings.json` names that removed
+store; the *name* is a historical artifact, kept only because it is the sentinel `StartupSecretsGuard`
+rejects. **The mechanism is appsettings files and environment variables** — see
+[archive/docs/integration/config-matrix.md](archive/docs/integration/config-matrix.md), which lists every key,
+its default, and who reads it.
+
+The API runs as **`ASPNETCORE_ENVIRONMENT=Development`**, so `appsettings.Development.json` is the file
+that actually loads. There is **no `appsettings.Production.json` in the repo at all**, and adding one would
+be ignored until the environment name changes too — put changes in the Development file, or change the
+environment name first.
+
+The relay's shared secret appears twice and the two must match: `Seams:Sms:Telegram:ApiKey` in the
+appsettings file and `API_KEY` in the compose file. It was rotated away from the value in
+`telegram-otp-bot/.env.example`, which is published in git and in that project's README —
+`TelegramSmsSender` now refuses to authenticate with it. **If you run the relay locally**, copy the
+appsettings value into your own `telegram-otp-bot/.env`.
+
+> ⚠️ **`Seams:FieldEncryption:Key` and `:HashKey` must never change.** Every encrypted column in that
+> database — phone numbers, addresses, IBANs, clinical notes — was written with those exact values, and
+> `users.PhoneHash`, which every login looks up, is derived from `HashKey`. Rotating either makes the
+> existing data unreadable and locks every account out. The JWE keys (`IdentitySettings:SecretKey` /
+> `Encryptkey`) are safe to rotate; doing so only signs everyone out.
+
+---
+
+## What running as Development means
+
+This was a deliberate choice so the demo and lifecycle seeders populate the shared database and the
+screens aren't empty. It has real consequences, all of which are fine for a pre-launch demo among
+people you trust, and none of which are acceptable once strangers can reach the site:
+
+- **The developer exception page is public.** Any unhandled 500 on `api.balinyaar.ir` returns a stack
+  trace and configuration detail to the caller.
+- **`GET /api/v1/dev/last_otp/{phone}` is live.** Anyone who knows a registered phone number can read
+  its login code and sign in as that user. This is the single biggest exposure.
+- **Swagger is served** at `api.balinyaar.ir/swagger`.
+- **The seeders re-run on every container boot** (idempotent, so this is safe — they no-op on data that
+  already exists) and **migrations auto-apply on boot** rather than as a separate step.
+- **gRPC reflection is enabled**, and the demo `bookings/convert` payment-capture simulator is wired.
+
+### Going to Production later
+
+1. Set `ASPNETCORE_ENVIRONMENT: Production` in `docker-compose.yml`.
+2. **Create** `appsettings.Production.json` (it does not exist) with the same content as the Development file, but with **real**
+   `IdentitySettings:SecretKey` / `Encryptkey` — `StartupSecretsGuard` rejects anything containing
+   `not-for-production` outside Development, so the current dev keys will refuse to boot (by design).
+   Keep `Seams:FieldEncryption` byte-identical.
+3. Run migrations as a one-shot instead of on boot:
+   `docker compose run --rm api dotnet Baya.Web.Api.dll migrate`
+4. Swap the OTP rail: `Seams:Sms:Provider` → `kavenegar`, with `Seams:Sms:ApiKey`/`Sender` filled in.
+   The Telegram relay broadcasts every code to a fixed recipient list, which stops being acceptable the
+   moment someone outside that list can request one.
+
+---
+
+## First deploy
+
+### 1. Confirm the Caddy network exists
+
+The compose file joins `caddy_net` as an **external** network — it does not create it.
+
+```bash
+docker network ls | grep caddy_net
+```
+
+### 2. Add the Balinyaar block to your Caddyfile
+
+Copy from [deploy/Caddyfile](deploy/Caddyfile) into the Caddyfile your Caddy container already loads:
+
+```caddyfile
+balinyaar.ir, www.balinyaar.ir {
+	encode zstd gzip
+	reverse_proxy balinyaar-web:3000
+}
+
+api.balinyaar.ir {
+	encode zstd gzip
+	reverse_proxy balinyaar-api:8080
+}
+```
+
+Caddy obtains and renews the certificates for both hostnames itself. Reload it:
+
+```bash
+docker exec <caddy-container> caddy reload --config /etc/caddy/Caddyfile
+```
+
+### 3. Point DNS at the host
+
+`balinyaar.ir`, `www.balinyaar.ir` and `api.balinyaar.ir` all need an A record on the server's public IP
+**before** Caddy can complete the ACME challenge.
+
+### 4. Confirm the proxy container is up
+
+The relay's hop to `api.telegram.org` is filtered in Iran and goes out through the proxy already on
+`caddy_net`, configured as `TELEGRAM_PROXY_URL: http://hysteria-client:8081`. If that container has a
+different name or port, change it in `docker-compose.yml` — a wrong value fails the relay at boot with a
+clear message rather than silently per-OTP.
+
+### 5. Build and start
+
+```bash
+docker compose up -d --build
+docker compose ps
+docker compose logs -f api
+```
+
+The API's first boot applies any pending migrations and runs the seeders against the remote database, so
+it takes noticeably longer than later ones.
+
+---
+
+## Verifying
+
+```bash
+curl https://api.balinyaar.ir/healthz/live      # process is up
+curl https://api.balinyaar.ir/healthz/ready     # + database and object storage reachable
+curl -I https://balinyaar.ir                    # the public landing page
+docker compose logs otp-relay | head            # should print the bot's @username and the proxy label
+```
+
+A full login round-trip is the real check: request an OTP from the site and confirm the code arrives in
+the Telegram chat. If it doesn't, `docker compose logs otp-relay` names the failing hop — a proxy error
+and a Telegram API rejection look different.
+
+---
+
+## Redeploying
+
+```bash
+git pull
+docker compose up -d --build
+```
+
+Rebuild the client whenever a `NEXT_PUBLIC_*` value in `client/.env.production` changes — those are
+compiled into the browser bundle, so restarting the container alone changes nothing.
+
+## Known wrinkle: the client lockfile is Windows-generated
+
+`client/package-lock.json` is produced on Windows, where npm filters out wasm32-only optional packages
+and therefore never records their transitive dependencies (`@emnapi/core`, `@emnapi/runtime`). On Linux
+npm *does* want them, so a bare `npm ci` fails with:
+
+```
+npm error `npm ci` can only install packages when your package.json and package-lock.json ... are in sync.
+npm error Missing: @emnapi/runtime@1.11.3 from lock file
+```
+
+The client Dockerfile works around this by completing the lock inside the image before installing. To fix
+it permanently, regenerate the lock **on Linux** once and commit the result:
+
+```bash
+cd client
+docker run --rm -v "$PWD:/app" -w /app node:24-alpine npm install --package-lock-only --no-audit --no-fund
+```
+
+Then drop the `npm install --package-lock-only` line from `client/Dockerfile`, leaving just `npm ci`.
+
+Note `--omit=optional` is **not** a valid shortcut here: Turbopack resolves `@parcel/watcher`'s native
+binary through `optionalDependencies`, so omitting them breaks `next build` with
+`No prebuild or local build of @parcel/watcher found`.
+
+## Persisted state
+
+Two named volumes survive rebuilds. Uploaded verification documents live in the first one; losing it
+means the admin verification queue shows broken documents.
+
+| Volume | Holds |
+| --- | --- |
+| `api-object-storage` | Uploaded verification documents (local-disk `IObjectStorage` seam) |
+| `api-logs` | Serilog JSON file sink |

client/.dockerignore

@@ -0,0 +1,18 @@
+node_modules
+.next
+out
+coverage
+.swc
+graphify-out
+*.tsbuildinfo
+
+# Local-only env files — .env.production IS copied, it is the deployed build's input.
+.env
+.env.local
+.env.*.local
+
+Dockerfile
+.dockerignore
+CLAUDE.md
+AGENTS.md
+README.md

client/.env.production

@@ -0,0 +1,24 @@
+# Deployed (balinyaar.ir) values, read by `next build` when NODE_ENV=production.
+#
+# Every NEXT_PUBLIC_* value here is INLINED INTO THE CLIENT BUNDLE AT BUILD TIME — it is public by
+# definition, and changing one requires rebuilding the image, not restarting the container.
+# `.env.development` still owns the local `npm run dev` loop and is untouched by this file.
+
+# Enables analytics and public resources.
+NEXT_PUBLIC_ENV = production
+
+# Off in a deployed build — `true` prints the resolved @/config (incl. the API URL) to the browser console.
+NEXT_PUBLIC_DEBUG = false
+
+# Public origin of the web app.
+NEXT_PUBLIC_PUBLIC_URL = https://balinyaar.ir
+
+# Absolute origin used only for metadata (OG tags, metadataBase, robots.ts, sitemap.ts) — never for API calls.
+NEXT_PUBLIC_SITE_URL = https://balinyaar.ir
+
+# The API, reached from the BROWSER — so it is the public hostname Caddy serves, never the container name.
+NEXT_PUBLIC_API_URL = https://api.balinyaar.ir
+
+# Neshan **web** key (client-embeddable maps/search) from https://platform.neshan.org. Unset: the address
+# map-pin picker falls back to its bounded-canvas grid stand-in. Rebuild the client image after setting it.
+# NEXT_PUBLIC_NESHAN_KEY = your-neshan-web-key

client/.env.sample

@@ -19,4 +19,10 @@ NEXT_PUBLIC_PUBLIC_URL = http://localhost:3000
 # API/Backend basic URL (the Baya server)
 NEXT_PUBLIC_API_URL = https://localhost:5002
 # NEXT_PUBLIC_API_URL = https://dev-api.domain.com
-# NEXT_PUBLIC_API_URL = https://api.domain.com
+# NEXT_PUBLIC_API_URL = https://api.domain.com
+
+# Neshan **web** key (client-embeddable maps/search/reverse-geocode) — get one from
+# https://platform.neshan.org (a separate key from the server's NeshanGeocoder key, which lives in
+# server appsettings, never here). Leave unset to keep the address map-pin picker's
+# bounded-canvas grid fallback (dev/CI/jsdom all work without a key).
+# NEXT_PUBLIC_NESHAN_KEY = your-neshan-web-key

client/AGENTS.md

@@ -1,10 +1,13 @@
 # AGENTS.md — Balinyaar Web Client
 
-The canonical agent guide for the frontend is **[CLAUDE.md](CLAUDE.md)** (same folder). It is the
-engineering contract: stack, commands, lint/type gates, routing, providers, data fetching, theming,
-i18n, cookies, and the rules every change must follow.
+The canonical agent guide for the frontend is **[CLAUDE.md](CLAUDE.md)** (same folder): stack,
+commands, the quality gates, the project structure, and the hard rules every change must follow.
 
+- Current product truth (what to test, what's blocking, what's missing) → [../mvp/](../mvp/README.md)
+- Reference rules, archived, read on demand per area → [../archive/docs/rules/client/](../archive/docs/rules/client/)
+  (structure · theme · components · forms · i18n · services · auth · testing)
 - Repo-wide context → [../CLAUDE.md](../CLAUDE.md)
+- Business rules in depth (archived) → [../archive/product/](../archive/product/index.md)
 - Human setup/run instructions → [README.md](README.md)
 - UI/design work → the **frontend-designer** skill
 

client/Dockerfile

@@ -0,0 +1,47 @@
+# Balinyaar web client — build context is `client/` (see the root docker-compose.yml).
+#
+# NEXT_PUBLIC_* values are inlined into the browser bundle by `next build`, so the API URL and site origin
+# are BUILD-time inputs, not runtime env vars — setting them in compose would do nothing. They come from the
+# committed .env.production, which `next build` reads because it runs with NODE_ENV=production; change a value
+# there and rebuild the image.
+
+FROM node:24-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+
+# package-lock.json is generated on Windows, where npm filters out the wasm32-only optional packages and so
+# never records their transitive deps (@emnapi/core, @emnapi/runtime). On Linux npm does want them, and a
+# bare `npm ci` dies on the lockfile-sync check. --omit=optional is NOT the fix: Turbopack's @parcel/watcher
+# resolves its native binary through optionalDependencies, so omitting them breaks `next build` outright.
+#
+# So: complete the lock here, on the platform that can actually see those packages, then install from it.
+# --package-lock-only reuses every version already pinned in the committed lock and only ADDS the missing
+# Linux-side entries, so this stays effectively reproducible rather than a free-for-all `npm install`.
+# Drop the first command once the committed lock is generated on Linux (see DEPLOY.md).
+RUN npm install --package-lock-only --no-audit --no-fund \
+ && npm ci --no-audit --no-fund
+
+FROM node:24-alpine AS build
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM node:24-alpine AS final
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+# `output: 'standalone'` traces the runtime dependencies into .next/standalone; static assets and public/
+# are deliberately NOT included in that trace and must be copied alongside it, or every asset 404s.
+COPY --from=build --chown=node:node /app/.next/standalone ./
+COPY --from=build --chown=node:node /app/.next/static ./.next/static
+COPY --from=build --chown=node:node /app/public ./public
+
+USER node
+EXPOSE 3000
+CMD ["node", "server.js"]

client/middleware.ts

@@ -3,7 +3,7 @@ import { type NextRequest, NextResponse } from 'next/server';
 import { routing } from './src/i18n/routing';
 import { COOKIE_NAMES } from './src/lib/cookies';
 import { isTokenAlive } from './src/lib/auth/token';
-import { HEADER_NAMES, PUBLIC_PATHS, ROUTES } from './src/constants';
+import { HEADER_NAMES, PUBLIC_PATHS, RETURN_URL_PARAM, ROUTES } from './src/constants';
 
 const intlMiddleware = createMiddleware(routing);
 
@@ -17,24 +17,43 @@ export default function middleware(request: NextRequest) {
 
   const { pathname } = request.nextUrl;
 
-  // Strip the locale segment to get the actual path (e.g. /fa/login → /login)
-  const pathWithoutLocale = '/' + pathname.split('/').slice(2).join('/');
-
-  const isPublic = PUBLIC_PATHS.some((p) => pathWithoutLocale.startsWith(p));
-
-  if (!isPublic) {
-    const token = request.cookies.get(COOKIE_NAMES.ACCESS_TOKEN)?.value;
-    if (!isTokenAlive(token)) {
-      const locale = request.cookies.get('NEXT_LOCALE')?.value ?? routing.defaultLocale;
-      return NextResponse.redirect(new URL(`/${locale}${ROUTES.LOGIN}`, request.url));
-    }
-  }
-
   // Detect locale from the normalized URL (next-intl always puts it at position 1)
   const locale = routing.locales.find(
     (l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`),
   ) ?? routing.defaultLocale;
 
+  // Strip the locale segment to get the actual path (e.g. /fa/login → /login)
+  const pathWithoutLocale = '/' + pathname.split('/').slice(2).join('/');
+
+  const isPublic = PUBLIC_PATHS.some((p) => pathWithoutLocale.startsWith(p));
+  const isAuthenticated = isTokenAlive(request.cookies.get(COOKIE_NAMES.ACCESS_TOKEN)?.value);
+
+  // Guest front door (ui-phase-13): an unauthenticated hit on the exact root is REWRITTEN — never
+  // redirected — to the public landing, so the URL/SEO canonical stays '/'. Exact match only:
+  // never add ROUTES.HOME ('/') to PUBLIC_PATHS itself, whose `startsWith` check below would
+  // otherwise silently un-gate every route (§ the routes.ts comment on PUBLIC_PATHS).
+  if (!isAuthenticated && pathWithoutLocale === ROUTES.HOME) {
+    return NextResponse.rewrite(new URL(`/${locale}${ROUTES.WELCOME}`, request.url));
+  }
+
+  // A signed-in visitor landing on the marketing page directly gets their real home instead.
+  if (isAuthenticated && pathWithoutLocale === ROUTES.WELCOME) {
+    return NextResponse.redirect(new URL(`/${locale}${ROUTES.HOME}`, request.url));
+  }
+
+  if (!isPublic && !isAuthenticated) {
+    const loginUrl = new URL(`/${locale}${ROUTES.LOGIN}`, request.url);
+    // Carry the attempted (locale-stripped) destination so a deep link — an SMS booking link, a
+    // shared nurse profile — survives the round trip through login instead of dumping the user
+    // on their role home. Validated same-origin + role-permitting on the way back out
+    // (resolvePostLoginDestination in services/auth/routing.ts); '/' is the default anyway.
+    const next = pathWithoutLocale + request.nextUrl.search;
+    if (next && next !== '/') {
+      loginUrl.searchParams.set(RETURN_URL_PARAM, next);
+    }
+    return NextResponse.redirect(loginUrl);
+  }
+
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set(HEADER_NAMES.LOCALE, locale);
 
@@ -49,6 +68,11 @@ export default function middleware(request: NextRequest) {
 }
 
 export const config = {
-  // Match all pathnames except internal Next.js paths, API routes, and static files
-  matcher: ['/((?!_next|_vercel|api|.*\\..*).*)'],
+  // Match all pathnames except internal Next.js paths, API routes, and static files. The bare
+  // root '/' is listed explicitly alongside the catch-all regex — Next's matcher does not
+  // reliably invoke middleware for the literal root path through the negative-lookahead pattern
+  // alone (verified empirically in this Next 16/Turbopack build: '/' skipped middleware entirely
+  // and 404'd, while every other path matched fine). This is load-bearing for ui-phase-13's
+  // guest-front-door rewrite, which only fires on an exact '/' match.
+  matcher: ['/', '/((?!_next|_vercel|api|.*\\..*).*)'],
 };

client/next.config.mjs

@@ -7,7 +7,10 @@ const nextConfig = {
   reactStrictMode: true,
   turbopack: {
     root: '.'
-  }
+  },
+  // Emits .next/standalone — a self-contained server bundling only the traced runtime dependencies, so
+  // the Docker image carries no node_modules tree. Harmless for `npm run dev`/`npm run build` locally.
+  output: 'standalone'
 };
 
 export default withNextIntl(nextConfig);

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",
@@ -22,11 +21,14 @@
         "copy-to-clipboard": "latest",
         "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": {
@@ -36,6 +38,7 @@
         "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^30.0.0",
         "@types/js-cookie": "^3.0.6",
+        "@types/leaflet": "^1.9.21",
         "@types/node": "^25.9.3",
         "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
@@ -557,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,
@@ -1995,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",
@@ -3361,6 +3337,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -3657,6 +3640,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.9.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
@@ -9128,6 +9121,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -9203,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",
@@ -10265,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

@@ -9,18 +9,18 @@
     "format": "prettier ./ --write",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "lint:copy": "node scripts/check-copy.mjs",
     "start": "next start",
     "test": "jest --watch",
     "test:ci": "jest --ci",
     "type": "tsc --noEmit",
-    "check": "npm run type && npm run lint"
+    "check": "npm run type && npm run lint && npm run lint:copy"
   },
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@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",
@@ -30,11 +30,14 @@
     "copy-to-clipboard": "latest",
     "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": {
@@ -44,6 +47,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",

client/public/robots.txt

@@ -1,5 +0,0 @@
-User-agent: *
-Disallow: /private/
-
-User-agent: *
-Allow: /

client/scripts/check-copy.mjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+/**
+ * Lints client/messages/fa.json against the banned-orthography-variant rules in
+ * docs/rules/client/i18n.md §4 — enforces the phase-12 copy sweep so it cannot silently regress.
+ * Exits non-zero (and prints every offending key) on any match.
+ *
+ * The rules below are the machine-checkable subset. The full Persian style guide (glossary, register,
+ * shell naming, the ZWNJ cases a grep can't express) lives in that doc; keep the two in step.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const FA_MESSAGES_PATH = join(__dirname, '..', 'messages', 'fa.json');
+
+// Each rule scans the *raw value* of every leaf string in fa.json (flattened key path → value).
+// `pattern` is a plain substring (not regex) so ZWNJ/hamza characters stay literal and unambiguous.
+const RULES = [
+  {
+    name: 'brand name must use ZWNJ (بالین‌یار), never a plain space',
+    pattern: 'بالین یار',
+  },
+  {
+    name: 'تأیید must use hamza — تایید (hamza-less) is banned',
+    pattern: 'تایید',
+  },
+  {
+    name: 'جستجو is the one standard form — جست‌وجو is banned',
+    pattern: 'جست‌وجو',
+  },
+  {
+    name: 'جستجو is the one standard form — جست و جو (spaced) is banned',
+    pattern: 'جست و جو',
+  },
+  {
+    name: 'the indefinite «ی» misattachment bug — «بازی» (game) instead of «ی» on the right word',
+    // Word-boundary trap: catches "... بازی " (space after) so it doesn't also flag words that
+    // legitimately contain "بازی" as a substring of something else — in this catalog there are none,
+    // but the trailing-space anchor keeps the check honest if one is ever added on purpose elsewhere.
+    pattern: 'بازی ',
+  },
+  {
+    // Leading space distinguishes the archaic passive auxiliary ("X می‌گردد" = "is X-ed") from the
+    // unrelated, entirely legitimate verb «برمی‌گردد» (returns/comes back), which fuses «بر» directly
+    // onto «می‌گردد» with no space and must never be flagged.
+    name: 'archaic passive می‌گردد is banned — use می‌شود',
+    pattern: ' می‌گردد',
+  },
+];
+
+function flattenStrings(value, path, out) {
+  if (typeof value === 'string') {
+    out.push([path, value]);
+    return;
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => flattenStrings(item, `${path}[${index}]`, out));
+    return;
+  }
+  if (value && typeof value === 'object') {
+    for (const [key, child] of Object.entries(value)) {
+      flattenStrings(child, path ? `${path}.${key}` : key, out);
+    }
+  }
+}
+
+function main() {
+  const raw = readFileSync(FA_MESSAGES_PATH, 'utf8');
+  const messages = JSON.parse(raw);
+  const leaves = [];
+  flattenStrings(messages, '', leaves);
+
+  const failures = [];
+  for (const rule of RULES) {
+    for (const [path, value] of leaves) {
+      if (value.includes(rule.pattern)) {
+        failures.push({ rule: rule.name, path, value });
+      }
+    }
+  }
+
+  if (failures.length === 0) {
+    console.log(`check-copy: ${leaves.length} strings checked, 0 banned variants found.`);
+    return;
+  }
+
+  console.error(`check-copy: found ${failures.length} banned copy variant(s):\n`);
+  for (const failure of failures) {
+    console.error(`  [${failure.rule}]`);
+    console.error(`    fa.json → ${failure.path}: "${failure.value}"\n`);
+  }
+  process.exitCode = 1;
+}
+
+main();

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

@@ -1,14 +1,25 @@
 'use client';
-import { FormEvent, FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
-import { Avatar, Box, InputAdornment, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, CategoryTile, EmptyState, ErrorState } from '@/components';
+import { Avatar, Box, ButtonBase, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  AppButton,
+  AppIcon,
+  AppIconButton,
+  AppLoading,
+  CategoryTile,
+  EmptyState,
+  ErrorState,
+  SurfaceCard,
+} from '@/components';
 import { ROUTES } from '@/constants';
 import { useMe } from '@/services/auth';
 import { usePatients } from '@/services/patients';
 import { useServiceCategories } from '@/services/catalog';
 import { pickCatalogName } from '@/services/catalog/names';
+import { useBookingDetail, useBookingList } from '@/services/bookings';
+import type { BookingListItemDto } from '@/services/bookings/types';
 
 interface NudgeCardProps {
   icon: string;
@@ -16,17 +27,20 @@ interface NudgeCardProps {
   body: string;
   ctaLabel: string;
   to: string;
+  /** Optional dismiss affordance (session-scoped) — omit for the always-relevant profile nudge. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
 }
 
-const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLabel, to }) => (
+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 }}
+    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 }}>
+    <Stack sx={{ gap: 1, flexGrow: 1, minWidth: 0 }}>
       <Stack sx={{ gap: 0.25 }}>
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 700, pr: onDismiss ? 4 : 0 }}>
           {title}
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
@@ -37,14 +51,28 @@ const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLa
         {ctaLabel}
       </AppButton>
     </Stack>
+    {onDismiss ? (
+      <AppIconButton
+        icon="close"
+        title={dismissLabel}
+        onClick={onDismiss}
+        size="small"
+        sx={{ position: 'absolute', insetInlineEnd: 8, insetBlockStart: 8 }}
+      />
+    ) : null}
   </Paper>
 );
 
+// Session-scoped dismiss: a plain module variable (not a cookie/localStorage — this is ephemeral UI
+// state, not app/auth state) survives client-side navigation within the same page load and resets on a
+// hard reload, matching "dismissible for this session, not permanently".
+let patientNudgeDismissedInSession = false;
+
 /**
- * A5 — the family Home: the front door of the app. Greeting + avatar, the search bar (which hands a
- * query / chosen `service_category_id` toward the f6 search flow — results are not built here), the
- * **data-driven** service-category grid (from the cached `services/catalog` reference data), and the
- * complete-patient-record nudge (derived from the f2 patient cache — no extra fetch).
+ * A5 — the family Home: the front door of the app. Greeting + avatar, a compact ambient trust strip, a
+ * tappable search entry point (routes to C1 — see `HomeSearchBar`), the **data-driven** service-category
+ * grid (from the cached `services/catalog` reference data), a completeness-gated patient-record nudge,
+ * and a "رزرو دوباره" (rebook) shortcut row sourced from recent bookings.
  *
  * First-login gate: a customer with no patients is sent into onboarding (A3). The redirect waits for
  * a settled list so a post-create refetch never bounces the user back to onboarding.
@@ -57,6 +85,7 @@ export default function HomeScreen() {
 
   const { data: me } = useMe();
   const { data, isError, refetch } = usePatients();
+  const [nudgeDismissed, setNudgeDismissed] = useState(patientNudgeDismissedInSession);
 
   const isEmpty = data?.total === 0;
 
@@ -78,6 +107,16 @@ export default function HomeScreen() {
   const greeting = firstName ? t('greeting_named', { name: firstName }) : t('greeting_plain');
   const avatarInitial = firstName ? firstName.charAt(0).toUpperCase() : null;
 
+  // Completeness signal derived from the cached patients data (no extra fetch): a patient with no
+  // conditions recorded yet is an incomplete record — never a forever-nudge once every record is filled.
+  const hasIncompletePatient = data.items.some((patient) => patient.conditions.length === 0);
+  const showPatientNudge = hasIncompletePatient && !nudgeDismissed;
+
+  const dismissPatientNudge = () => {
+    patientNudgeDismissedInSession = true;
+    setNudgeDismissed(true);
+  };
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
       <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
@@ -94,17 +133,25 @@ export default function HomeScreen() {
         </Box>
       </Stack>
 
+      <TrustStrip />
+
       <HomeSearchBar />
 
       <CategoryGrid onSelect={(categoryId) => router.push(`${href(ROUTES.SEARCH)}?category_id=${categoryId}`)} />
 
-      <NudgeCard
-        icon="patients"
-        title={t('nudge_patient_title')}
-        body={t('nudge_patient_body')}
-        ctaLabel={t('nudge_patient_cta')}
-        to={href(ROUTES.PATIENTS)}
-      />
+      <RebookRow />
+
+      {showPatientNudge ? (
+        <NudgeCard
+          icon="patients"
+          title={t('nudge_patient_title')}
+          body={t('nudge_patient_body')}
+          ctaLabel={t('nudge_patient_cta')}
+          to={href(ROUTES.PATIENTS)}
+          onDismiss={dismissPatientNudge}
+          dismissLabel={tc('close')}
+        />
+      ) : null}
       {!profileComplete ? (
         <NudgeCard
           icon="profile"
@@ -119,41 +166,63 @@ export default function HomeScreen() {
 }
 
 /**
- * The Home search field. Rendering + query capture live here; **execution is f6** — submitting
- * navigates toward the (future) search route carrying the typed query. Results/filters are DEFERRED
- * → frontend-phase-6-b7.
+ * Quiet, one-line ambient reassurance under the greeting — not a hero. Three icon+label items: escrow
+ * payment, verified nurses, support. Purely presentational; tokens only.
+ */
+const TrustStrip: FunctionComponent = () => {
+  const t = useTranslations('home');
+  const items: Array<{ icon: string; label: string }> = [
+    { icon: 'lock', label: t('trust_escrow') },
+    { icon: 'verification', label: t('trust_verified_nurses') },
+    { icon: 'support', label: t('trust_support') },
+  ];
+  return (
+    <Stack direction="row" sx={{ gap: 1, justifyContent: 'space-between' }}>
+      {items.map((item) => (
+        <Stack key={item.icon} direction="row" sx={{ gap: 0.5, alignItems: 'center', minWidth: 0 }}>
+          <AppIcon icon={item.icon} size={16} color="var(--bal-primary)" />
+          <Typography variant="caption" noWrap sx={{ color: 'text.secondary' }}>
+            {item.label}
+          </Typography>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+/**
+ * The Home search entry point — a tappable faux-input (never a half-working free-text field: the search
+ * index has no text column, variant names aren't client-queryable, and the only matchable dataset — 5–6
+ * cached category names — is already better served by the category grid directly below). Routes straight
+ * to C1 (`/search`). **Upgrade path**: once the backend serves a `q` param on `search/nurses` (REQ-041,
+ * matching nurse/variant/category names), this can become a real typeahead — the placeholder copy is
+ * already written for that future, so only the tap target need change, not the copy/i18n keys.
  */
 const HomeSearchBar: FunctionComponent = () => {
   const t = useTranslations('home');
   const router = useRouter();
   const locale = useLocale();
-  const [query, setQuery] = useState('');
-
-  const submit = (event: FormEvent) => {
-    event.preventDefault();
-    const q = query.trim();
-    router.push(`/${locale}${ROUTES.SEARCH}${q ? `?q=${encodeURIComponent(q)}` : ''}`);
-  };
 
   return (
-    <Box component="form" onSubmit={submit} role="search">
-      <TextField
-        fullWidth
-        value={query}
-        onChange={(event) => setQuery(event.target.value)}
-        placeholder={t('search_placeholder')}
-        aria-label={t('search_action')}
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <AppIcon icon="search" size={22} color="var(--bal-text-secondary)" />
-              </InputAdornment>
-            ),
-          },
-        }}
-      />
-    </Box>
+    <ButtonBase
+      onClick={() => router.push(`/${locale}${ROUTES.SEARCH}`)}
+      aria-label={t('search_action')}
+      sx={{
+        justifyContent: 'flex-start',
+        gap: 1,
+        width: '100%',
+        px: 2,
+        py: 1.5,
+        borderRadius: 'var(--bal-radius-md)',
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+        color: 'text.secondary',
+      }}
+    >
+      <AppIcon icon="search" size={22} color="var(--bal-text-secondary)" />
+      <Typography variant="body1">{t('search_placeholder')}</Typography>
+    </ButtonBase>
   );
 };
 
@@ -174,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 ? (
@@ -196,3 +265,72 @@ const CategoryGrid: FunctionComponent<{ onSelect: (categoryId: number) => void }
     </Stack>
   );
 };
+
+/**
+ * The "رزرو دوباره" shortcut row — repeat care is the dominant pattern in home nursing. Sourced from the
+ * existing `useBookingList('customer')` cache (no extra list fetch); renders up to 2 cards, deduplicated
+ * by nurse, deep-linking to the nurse's C3 profile. Renders nothing (no empty state) when there is no
+ * past-bookings history.
+ */
+const RebookRow: FunctionComponent = () => {
+  const { data, isLoading, isError } = useBookingList('customer', { pageSize: 5 });
+  const items = data?.items ?? [];
+
+  if (isLoading || isError || items.length === 0) return null;
+
+  const seen = new Set<string>();
+  const candidates: BookingListItemDto[] = [];
+  for (const item of items) {
+    if (seen.has(item.counterpartyName)) continue;
+    seen.add(item.counterpartyName);
+    candidates.push(item);
+    if (candidates.length === 2) break;
+  }
+
+  if (candidates.length === 0) return null;
+
+  return (
+    <Stack sx={{ gap: 1 }}>
+      {candidates.map((booking) => (
+        <RebookCard key={booking.id} booking={booking} />
+      ))}
+    </Stack>
+  );
+};
+
+/** One rebook card — resolves the booking's `nurseId` (not on the list row) via the cached booking
+ * detail, then deep-links to the nurse's C3 profile. Renders nothing while resolving. */
+const RebookCard: FunctionComponent<{ booking: BookingListItemDto }> = ({ booking }) => {
+  const t = useTranslations('home');
+  const router = useRouter();
+  const locale = useLocale();
+  const { data: detail } = useBookingDetail(booking.id, 'customer');
+
+  if (!detail) return null;
+
+  const open = () => router.push(`/${locale}${ROUTES.SEARCH_NURSE}/${detail.nurseId}`);
+
+  return (
+    <SurfaceCard
+      padding="sm"
+      onClick={open}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          open();
+        }
+      }}
+      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, cursor: 'pointer' }}
+    >
+      <Stack direction="row" sx={{ gap: 1, alignItems: 'center', minWidth: 0 }}>
+        <AppIcon icon="history" size={20} color="var(--bal-primary)" />
+        <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
+          {t('rebook_with', { name: booking.counterpartyName })}
+        </Typography>
+      </Stack>
+      <AppIcon icon="forward" size={18} color="var(--bal-text-secondary)" />
+    </SurfaceCard>
+  );
+};

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

@@ -2,8 +2,8 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, EmptyState } from '@/components';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, ConfirmDialog, EmptyState, ErrorState, FormDialogShell } from '@/components';
 import { AddressCard, AddressForm } from '@/components/geography';
 import {
   useAddresses,
@@ -16,9 +16,9 @@ import type { CreateAddressInput, CustomerAddress } from '@/services/addresses/t
 
 /**
  * The customer address book — a cached, invalidate-on-mutation list of the customer's saved
- * addresses with add/edit (the cascading dropdowns + map pin in a dialog), soft-delete (confirm),
- * and set-primary (exactly one badge). Loading skeleton + empty state both handled. The chosen
- * address later feeds the f7 booking request.
+ * addresses with add/edit (the cascading dropdowns + map pin in a full-screen-on-mobile dialog),
+ * soft-delete (confirm), and set-primary (exactly one badge). Loading skeleton, error (with
+ * retry), and empty states are all handled. The chosen address later feeds the f7 booking request.
  */
 export default function AddressesPage() {
   const t = useTranslations('address');
@@ -26,13 +26,14 @@ export default function AddressesPage() {
   const locale = useLocale();
   const { enqueueSnackbar } = useSnackbar();
 
-  const { data, isLoading } = useAddresses();
+  const { data, isLoading, isError, refetch } = useAddresses();
   const createAddress = useCreateAddress();
   const updateAddress = useUpdateAddress();
   const deleteAddress = useDeleteAddress();
   const setPrimary = useSetPrimaryAddress();
 
   const [formOpen, setFormOpen] = useState(false);
+  const [formDirty, setFormDirty] = useState(false);
   const [editing, setEditing] = useState<CustomerAddress | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<CustomerAddress | null>(null);
 
@@ -78,7 +79,7 @@ export default function AddressesPage() {
   };
 
   const addresses = data?.items ?? [];
-  const isEmpty = !isLoading && addresses.length === 0;
+  const isEmpty = !isLoading && !isError && addresses.length === 0;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
@@ -91,7 +92,7 @@ export default function AddressesPage() {
             {t('subtitle')}
           </Typography>
         </Box>
-        {!isEmpty ? (
+        {!isEmpty && !isError ? (
           <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
             {t('add')}
           </AppButton>
@@ -104,6 +105,8 @@ export default function AddressesPage() {
             <Skeleton key={key} variant="rounded" height={104} />
           ))}
         </Stack>
+      ) : isError ? (
+        <ErrorState message={t('load_error')} retryLabel={tc('retry')} onRetry={() => refetch()} />
       ) : isEmpty ? (
         <EmptyState
           icon="location"
@@ -125,6 +128,9 @@ export default function AddressesPage() {
               addressLine={address.addressLine}
               isPrimary={address.isPrimary}
               primaryLabel={t('primary')}
+              hasPin={address.latitude != null && address.longitude != null}
+              pinSetLabel={t('pin_set')}
+              pinMissingLabel={t('pin_missing')}
               onEdit={() => openEdit(address)}
               onDelete={() => setDeleteTarget(address)}
               onSetPrimary={() =>
@@ -142,50 +148,52 @@ export default function AddressesPage() {
         </Stack>
       )}
 
-      <Dialog open={formOpen} onClose={closeForm} fullWidth maxWidth="sm">
-        <DialogTitle>{editing ? t('edit_title') : t('add_title')}</DialogTitle>
-        <DialogContent>
-          <Box sx={{ pt: 1 }}>
-            <AddressForm
-              key={editing?.id ?? 'new'}
-              initial={
-                editing
-                  ? {
-                      title: editing.title,
-                      provinceId: editing.provinceId,
-                      cityId: editing.cityId,
-                      districtId: editing.districtId,
-                      addressLine: editing.addressLine,
-                      latitude: editing.latitude,
-                      longitude: editing.longitude,
-                      isPrimary: editing.isPrimary,
-                    }
-                  : undefined
-              }
-              submitting={createAddress.isPending || updateAddress.isPending}
-              onSubmit={handleSubmit}
-              onCancel={closeForm}
-            />
-          </Box>
-        </DialogContent>
-      </Dialog>
+      <FormDialogShell
+        open={formOpen}
+        title={editing ? t('edit_title') : t('add_title')}
+        dirty={formDirty}
+        onClose={closeForm}
+        closeLabel={tc('close')}
+        discardTitle={tc('discard_title')}
+        discardBody={tc('discard_body')}
+        discardConfirmLabel={tc('discard_confirm')}
+        discardCancelLabel={tc('cancel')}
+      >
+        <AddressForm
+          key={editing?.id ?? 'new'}
+          initial={
+            editing
+              ? {
+                  title: editing.title,
+                  provinceId: editing.provinceId,
+                  cityId: editing.cityId,
+                  districtId: editing.districtId,
+                  addressLine: editing.addressLine,
+                  latitude: editing.latitude,
+                  longitude: editing.longitude,
+                  isPrimary: editing.isPrimary,
+                  recipientName: editing.recipientName,
+                  recipientPhone: editing.recipientPhone,
+                }
+              : undefined
+          }
+          submitting={createAddress.isPending || updateAddress.isPending}
+          onSubmit={handleSubmit}
+          onCancel={closeForm}
+          onDirtyChange={setFormDirty}
+        />
+      </FormDialogShell>
 
-      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
-        <DialogTitle>{t('delete_title')}</DialogTitle>
-        <DialogContent>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('delete_body')}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <AppButton variant="text" onClick={() => setDeleteTarget(null)}>
-            {tc('cancel')}
-          </AppButton>
-          <AppButton color="error" variant="contained" onClick={confirmDelete}>
-            {t('delete_confirm')}
-          </AppButton>
-        </DialogActions>
-      </Dialog>
+      <ConfirmDialog
+        open={Boolean(deleteTarget)}
+        title={t('delete_title')}
+        body={t('delete_body')}
+        confirmLabel={t('delete_confirm')}
+        cancelLabel={tc('cancel')}
+        confirmColor="error"
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={confirmDelete}
+      />
     </Box>
   );
 }

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

@@ -1,63 +1,212 @@
 'use client';
+import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, EmptyState, ErrorState, Money, StatusChip } from '@/components';
+import { Badge, Skeleton, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { AccentCard, AppButton, CountdownTimer, EmptyState, ErrorState, Money, RatingInput, StatusChip } from '@/components';
+import type { AccentTone, StatusKind } from '@/components';
 import { BOOKING_STATUS_KIND } from '@/components/booking/statusKind';
-import { ROUTES } from '@/constants';
-import { formatShamsiDate } from '@/utils';
+import { bookingReviewPath, ROUTES } from '@/constants';
+import { formatShamsiDate, localeTag } from '@/utils';
 import { useBookingList } from '@/services/bookings';
-import type { BookingListItemDto } from '@/services/bookings/types';
+import { BOOKINGS_PAGE_SIZE } from '@/services/bookings/constants';
+import type { BookingListItemDto, BookingStatus } from '@/services/bookings/types';
+import { useCustomerRequests } from '@/services/bookingRequests';
+import type { BookingRequestListItem, BookingRequestStatus } from '@/services/bookingRequests/types';
+import { useReviewEligibility } from '@/services/reviews';
+
+type BookingsTab = 'pending' | 'active' | 'past';
+
+/** `pending_payment`/`confirmed`/`in_progress` are still unfolding; the rest are resolved. */
+const ACTIVE_BOOKING_STATUSES: readonly BookingStatus[] = ['pending_payment', 'confirmed', 'in_progress'];
+const PAST_BOOKING_STATUSES: readonly BookingStatus[] = ['completed', 'disputed', 'closed', 'cancelled'];
+const PENDING_REQUEST_STATUSES: readonly BookingRequestStatus[] = [
+  'pending_nurse_response',
+  'accepted_awaiting_payment',
+];
+
+const KIND_TO_ACCENT: Record<StatusKind, AccentTone> = {
+  neutral: 'neutral',
+  info: 'info',
+  pending: 'primary',
+  verified: 'success',
+  active: 'success',
+  rejected: 'error',
+};
 
 /**
- * Customer رزروها — the "My bookings" list. Reads `useBookingList('customer')`; each row opens the
- * booking detail (`/bookings/{id}`). This is the customer entry to the f8 booking-detail surface (the C5
- * `converted` state also lands here). Amounts render in Toman via the money util.
+ * Customer رزروها — the lifecycle home. Three tabs so a money-adjacent pending request is never orphaned
+ * once the user leaves C5: **در انتظار پاسخ** wires the exported-but-previously-unused
+ * `useCustomerRequests` (live mini-countdown per row, deep-linking back to C5); **فعال** / **گذشته** split
+ * `useBookingList('customer')` by status. Rows carry a soft status chip + a matching `borderInlineStart`
+ * accent and are fully tappable (keyboard-focusable). Pagination is a "load more" over a single growing
+ * `pageSize` (the C2 results pattern) — booking #21+ stays reachable.
  */
 export default function BookingsScreen() {
   const t = useTranslations('booking');
-  const { data, isLoading, isError, refetch } = useBookingList('customer');
-  const items = data?.items ?? [];
+  const router = useRouter();
+  const locale = useLocale();
+
+  const [tab, setTab] = useState<BookingsTab>('active');
+  const [pageSize, setPageSize] = useState(BOOKINGS_PAGE_SIZE);
+
+  const pendingQuery = useCustomerRequests();
+  const pendingItems = (pendingQuery.data?.items ?? []).filter((item) =>
+    PENDING_REQUEST_STATUSES.includes(item.status),
+  );
+
+  const bookingsQuery = useBookingList('customer', { page: 1, pageSize });
+  const allBookings = bookingsQuery.data?.items ?? [];
+  const total = bookingsQuery.data?.total ?? 0;
+  const hasMore = allBookings.length < total;
+  const activeItems = allBookings.filter((item) => ACTIVE_BOOKING_STATUSES.includes(item.status));
+  const pastItems = allBookings.filter((item) => PAST_BOOKING_STATUSES.includes(item.status));
+
+  const openBooking = (id: number) => router.push(`/${locale}${ROUTES.BOOKINGS}/${id}`);
+  const openRequest = (id: number) => router.push(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${id}`);
+  const goToSearch = () => router.push(`/${locale}${ROUTES.SEARCH}`);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Box>
+    <Stack sx={{ gap: 3 }}>
+      <Stack>
         <Typography variant="h5" component="h1">
           {t('list_title')}
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('list_subtitle')}
         </Typography>
-      </Box>
+      </Stack>
 
-      {isLoading ? (
-        <Stack sx={{ gap: 2 }}>
-          {[0, 1].map((key) => (
-            <Skeleton key={key} variant="rounded" height={120} />
-          ))}
-        </Stack>
-      ) : isError ? (
-        <ErrorState message={t('list_error')} retryLabel={t('retry')} onRetry={() => refetch()} />
-      ) : items.length === 0 ? (
-        <EmptyState icon="bookings" title={t('list_empty_title')} body={t('list_empty_body')} />
-      ) : (
-        <Stack sx={{ gap: 2 }}>
-          {items.map((item) => (
-            <BookingRow key={item.id} item={item} />
-          ))}
-        </Stack>
-      )}
-    </Box>
+      <Tabs value={tab} onChange={(_event, value: BookingsTab) => setTab(value)} variant="fullWidth">
+        <Tab
+          value="pending"
+          data-tab="pending"
+          label={
+            pendingItems.length > 0 ? (
+              <Badge badgeContent={pendingItems.length} color="secondary" sx={{ '& .MuiBadge-badge': { insetInlineEnd: -12 } }}>
+                {t('tab_pending')}
+              </Badge>
+            ) : (
+              t('tab_pending')
+            )
+          }
+        />
+        <Tab value="active" data-tab="active" label={t('tab_active')} />
+        <Tab value="past" data-tab="past" label={t('tab_past')} />
+      </Tabs>
+
+      {tab === 'pending' ? (
+        pendingQuery.isLoading ? (
+          <ListSkeleton />
+        ) : pendingQuery.isError ? (
+          <ErrorState message={t('inbox_error')} retryLabel={t('retry')} onRetry={() => pendingQuery.refetch()} />
+        ) : pendingItems.length === 0 ? (
+          <EmptyState
+            icon="pending"
+            title={t('pending_empty_title')}
+            body={t('pending_empty_body')}
+            action={
+              <AppButton variant="outlined" color="primary" startIcon="search" onClick={goToSearch}>
+                {t('missing_nurse_cta')}
+              </AppButton>
+            }
+          />
+        ) : (
+          <Stack sx={{ gap: 2 }}>
+            {pendingItems.map((item) => (
+              <PendingRequestRow key={item.id} item={item} locale={locale} onOpen={() => openRequest(item.id)} />
+            ))}
+          </Stack>
+        )
+      ) : null}
+
+      {tab === 'active' ? (
+        bookingsQuery.isLoading ? (
+          <ListSkeleton />
+        ) : bookingsQuery.isError ? (
+          <ErrorState message={t('list_error')} retryLabel={t('retry')} onRetry={() => bookingsQuery.refetch()} />
+        ) : activeItems.length === 0 ? (
+          <EmptyState
+            icon="bookings"
+            title={t('active_empty_title')}
+            body={t('active_empty_body')}
+            action={
+              <AppButton variant="outlined" color="primary" startIcon="search" onClick={goToSearch}>
+                {t('missing_nurse_cta')}
+              </AppButton>
+            }
+          />
+        ) : (
+          <BookingRows items={activeItems} locale={locale} onOpen={openBooking} hasMore={hasMore} onLoadMore={() => setPageSize((size) => size + BOOKINGS_PAGE_SIZE)} loadingMore={bookingsQuery.isFetching} loadMoreLabel={t('load_more')} />
+        )
+      ) : null}
+
+      {tab === 'past' ? (
+        bookingsQuery.isLoading ? (
+          <ListSkeleton />
+        ) : bookingsQuery.isError ? (
+          <ErrorState message={t('list_error')} retryLabel={t('retry')} onRetry={() => bookingsQuery.refetch()} />
+        ) : pastItems.length === 0 ? (
+          <EmptyState icon="bookings" title={t('past_empty_title')} body={t('past_empty_body')} />
+        ) : (
+          <BookingRows items={pastItems} locale={locale} onOpen={openBooking} hasMore={hasMore} onLoadMore={() => setPageSize((size) => size + BOOKINGS_PAGE_SIZE)} loadingMore={bookingsQuery.isFetching} loadMoreLabel={t('load_more')} />
+        )
+      ) : null}
+    </Stack>
   );
 }
 
-function BookingRow({ item }: { item: BookingListItemDto }) {
+function BookingRows({
+  items,
+  locale,
+  onOpen,
+  hasMore,
+  onLoadMore,
+  loadingMore,
+  loadMoreLabel,
+}: {
+  items: BookingListItemDto[];
+  locale: string;
+  onOpen: (id: number) => void;
+  hasMore: boolean;
+  onLoadMore: () => void;
+  loadingMore: boolean;
+  loadMoreLabel: string;
+}) {
+  return (
+    <Stack sx={{ gap: 2 }}>
+      {items.map((item) => (
+        <BookingRow key={item.id} item={item} locale={locale} onOpen={() => onOpen(item.id)} />
+      ))}
+      {hasMore ? (
+        <AppButton variant="outlined" color="primary" onClick={onLoadMore} disabled={loadingMore} sx={{ alignSelf: 'center' }}>
+          {loadMoreLabel}
+        </AppButton>
+      ) : null}
+    </Stack>
+  );
+}
+
+function BookingRow({ item, locale, onOpen }: { item: BookingListItemDto; locale: string; onOpen: () => void }) {
   const t = useTranslations('booking');
-  const locale = useLocale();
-  const router = useRouter();
+  const kind = BOOKING_STATUS_KIND[item.status];
+  const isCompleted = item.status === 'completed' || item.status === 'closed';
 
   return (
-    <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <AccentCard
+      tone={KIND_TO_ACCENT[kind]}
+      role="button"
+      tabIndex={0}
+      onClick={onOpen}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onOpen();
+        }
+      }}
+      data-booking-row={item.id}
+      sx={{ cursor: 'pointer', '&:focus-visible': { outline: '2px solid var(--bal-primary)', outlineOffset: 2 } }}
+    >
       <Stack sx={{ gap: 1.5 }}>
         <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5, flexWrap: 'wrap' }}>
           <Stack sx={{ gap: 0.25, minWidth: 0 }}>
@@ -68,23 +217,112 @@ function BookingRow({ item }: { item: BookingListItemDto }) {
               {formatShamsiDate(item.scheduledDate, locale)} · {t('session_count', { count: item.sessionCount })}
             </Typography>
           </Stack>
-          <StatusChip status={BOOKING_STATUS_KIND[item.status]} label={t(`bstatus_${item.status}`)} />
+          <StatusChip status={kind} label={t(`bstatus_${item.status}`)} />
         </Stack>
 
-        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
-          <Typography variant="body2" sx={{ fontWeight: 700 }}>
-            {t('list_total')}: <Money amountIrr={item.amountIrr} size="sm" sx={{ fontWeight: 700 }} />
-          </Typography>
-          <AppButton
-            variant="outlined"
-            color="primary"
-            endIcon="bookings"
-            onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${item.id}`)}
-          >
-            {t('view_booking')}
-          </AppButton>
-        </Stack>
+        <Typography variant="body2" sx={{ fontWeight: 700 }}>
+          {t('list_total')}: <Money amountIrr={item.amountIrr} size="sm" sx={{ fontWeight: 700 }} />
+        </Typography>
+
+        {isCompleted ? <CompletedReviewStrip bookingId={item.id} enabled={isCompleted} /> : null}
       </Stack>
-    </Paper>
+    </AccentCard>
+  );
+}
+
+/** A completed booking without a review gets a compact star-strip CTA deep-linking into the review page.
+ * The eligibility read is gated to completed/closed rows only (`enabled`) — an active booking never fires
+ * it, and `canReview: false` (already reviewed or otherwise ineligible) renders nothing extra. */
+function CompletedReviewStrip({ bookingId, enabled }: { bookingId: number; enabled: boolean }) {
+  const t = useTranslations('reviews');
+  const router = useRouter();
+  const locale = useLocale();
+  const eligibility = useReviewEligibility(bookingId, { enabled });
+
+  if (!eligibility.data?.canReview) return null;
+
+  return (
+    <AppButton
+      variant="text"
+      color="primary"
+      size="small"
+      startIcon={<RatingInput value={0} readOnly size={16} ariaLabel={t('cta_leave')} />}
+      onClick={(event) => {
+        event.stopPropagation();
+        router.push(`/${locale}${bookingReviewPath(bookingId)}`);
+      }}
+      sx={{ alignSelf: 'flex-start', px: 0 }}
+    >
+      {t('cta_leave')}
+    </AppButton>
+  );
+}
+
+/** «در انتظار پاسخ» row — a pending or accepted-awaiting-payment request, with a live mini-countdown. */
+function PendingRequestRow({
+  item,
+  locale,
+  onOpen,
+}: {
+  item: BookingRequestListItem;
+  locale: string;
+  onOpen: () => void;
+}) {
+  const t = useTranslations('booking');
+  const accepted = item.status === 'accepted_awaiting_payment';
+  const deadline = accepted ? item.paymentDeadlineAt : item.nurseResponseDeadlineAt;
+  const timeFmt = new Intl.DateTimeFormat(localeTag(locale), { hour: '2-digit', minute: '2-digit' });
+  const startDate = new Date(`${item.requestedDate}T${item.requestedTimeStart}`);
+  const dateLabel = formatShamsiDate(startDate, locale);
+  const timeLabel = timeFmt.format(startDate);
+
+  return (
+    <AccentCard
+      tone={accepted ? 'secondary' : 'primary'}
+      role="button"
+      tabIndex={0}
+      onClick={onOpen}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onOpen();
+        }
+      }}
+      data-request-row={item.id}
+      sx={{ cursor: 'pointer', '&:focus-visible': { outline: '2px solid var(--bal-primary)', outlineOffset: 2 } }}
+    >
+      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
+        <Stack sx={{ gap: 0.25, minWidth: 0 }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+            {item.counterpartyName}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {dateLabel} ·{' '}
+            <Typography component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+              {timeLabel}
+            </Typography>
+          </Typography>
+          <StatusChip status={accepted ? 'active' : 'pending'} label={t(`status_${item.status}`)} />
+        </Stack>
+        {deadline ? (
+          <CountdownTimer
+            deadlineIso={deadline}
+            elapsedText={t(accepted ? 'payment_elapsed' : 'response_elapsed')}
+            urgent={accepted}
+            size="sm"
+          />
+        ) : null}
+      </Stack>
+    </AccentCard>
+  );
+}
+
+function ListSkeleton() {
+  return (
+    <Stack sx={{ gap: 2 }}>
+      {[0, 1].map((key) => (
+        <Skeleton key={key} variant="rounded" height={96} />
+      ))}
+    </Stack>
   );
 }

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

@@ -2,13 +2,17 @@
 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';
+import type { TicketCategory } from '@/services/tickets/types';
 import { ApiError } from '@/lib/api/errors';
 import { bookingRefundStatusPath, ROUTES } from '@/constants';
 import { useCancelBooking, useCancellationPolicyPreview } from '@/services/refunds';
@@ -32,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;
@@ -54,9 +64,16 @@ export default function CancelBookingPage() {
   const cancel = useCancelBooking();
 
   const [step, setStep] = useState<0 | 1>(0);
-  const [acknowledged, setAcknowledged] = useState(false);
-  const [reasonCategory, setReasonCategory] = useState<CancelReasonCategory>('changed_mind');
-  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}`;
 
@@ -104,18 +121,22 @@ export default function CancelBookingPage() {
     );
   }
 
-  const submit = () =>
+  const submit = () => {
+    const values = getValues();
     cancel.mutate(
       {
         bookingId,
         sessionIds: preview.refundableSessionIds,
-        reasonCategory,
-        reasonNotes: reasonNotes.trim() || undefined,
+        // Guaranteed non-empty: step 1 is only reachable once a reason is chosen (the continue CTA gate).
+        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')}
@@ -124,33 +145,62 @@ export default function CancelBookingPage() {
 
       {step === 0 ? (
         <>
+          {/* 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: 'var(--bal-radius-md)' }}>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('offramp_note')}
+            </Typography>
+            <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+              <AppButton
+                variant="outlined"
+                color="primary"
+                startIcon="schedule"
+                onClick={() => setSupportDialogCategory('coordination')}
+              >
+                {t('reschedule_cta')}
+              </AppButton>
+              <AppButton
+                variant="outlined"
+                color="primary"
+                startIcon="support"
+                onClick={() => setSupportDialogCategory('support')}
+              >
+                {t('contact_support_cta')}
+              </AppButton>
+            </Stack>
+          </Stack>
+
           <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>
             {REASON_CATEGORIES.map((category) => (
               <MenuItem key={category} value={category}>
                 {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)}>
@@ -159,16 +209,24 @@ export default function CancelBookingPage() {
             <AppButton
               variant="contained"
               color="primary"
-              disabled={!acknowledged}
+              disabled={!acknowledged || reasonCategory === ''}
               onClick={() => setStep(1)}
             >
               {t('continue_cta')}
             </AppButton>
           </Stack>
+
+          <ContactSupportDialog
+            open={supportDialogCategory !== null}
+            onClose={() => setSupportDialogCategory(null)}
+            role="customer"
+            bookingId={bookingId}
+            defaultCategory={supportDialogCategory ?? 'support'}
+          />
         </>
       ) : (
         <>
-          <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>
@@ -209,5 +267,6 @@ export default function CancelBookingPage() {
         </>
       )}
     </Stack>
+    </FormProvider>
   );
 }

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

@@ -1,12 +1,14 @@
 'use client';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
-import { Divider, GlobalStyles, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Divider, GlobalStyles, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import { AppButton, AppIcon, PriceBreakdown, StatusChip, type StatusKind } from '@/components';
 import { ROUTES } from '@/constants';
 import { ApiError } from '@/lib/api/errors';
 import { formatShamsiDate, localeTag, parseIrr } from '@/utils';
 import { useInvoice } from '@/services/payment';
+import { useBookingDetail } from '@/services/bookings';
+import { useCustomerProfile } from '@/services/profiles';
 import type { MoadianStatus } from '@/services/payment/types';
 
 /** The printable region — everything else is hidden by the print rules below. */
@@ -20,13 +22,26 @@ const MOADIAN_KIND: Record<MoadianStatus, StatusKind> = {
   failed: 'rejected',
 };
 
+/** Best-effort read of the frozen variant display name from the booking's variant snapshot (mirrors the
+ * same tolerant parse `BookingDetailView`/the review page use — REQ-045 proposes a typed shape). */
+function variantName(snapshotJson: string): string | null {
+  try {
+    const parsed = JSON.parse(snapshotJson) as { displayName?: string };
+    return parsed?.displayName ?? null;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * The booking's commission invoice (b11 `GET invoices/{bookingId}`): header (`invoiceNumber`, Shamsi
- * issue date), the reconciling lines with the **VAT-on-commission** line explicitly labelled (product
- * rule: VAT is on Balinyaar's commission — the taxable supply — never the nurse's earnings), and the
- * مودیان state read-only. Downloads the served `pdfUrl` when present; otherwise prints a clean receipt
- * (`window.print()` + a print-scoped visibility rule). Every figure via the money util — no float math;
- * the service line is the exact integer remainder of served amounts (gross − commission − VAT).
+ * issue date), a buyer/service/visit-date recap (composed client-side from the customer's own profile +
+ * the booking detail read — a UI join, not money math), the reconciling lines with the **VAT-on-commission**
+ * line explicitly labelled (product rule: VAT is on Balinyaar's commission — the taxable supply — never the
+ * nurse's earnings), the payment method + transaction reference, a seller fiscal-identity block, and the
+ * مودیان state read-only. Downloads the served `pdfUrl` when present; otherwise prints a clean A4 receipt
+ * (`window.print()` + a print-scoped visibility rule + `@page` sizing). Every figure via the money util —
+ * no float math; the service line is the exact integer remainder of served amounts (gross − commission − VAT).
  */
 export default function BookingInvoicePage() {
   const t = useTranslations('payment');
@@ -38,11 +53,13 @@ export default function BookingInvoicePage() {
   const validId = Number.isInteger(bookingId) && bookingId > 0;
 
   const { data: invoice, isLoading, error, refetch } = useInvoice(validId ? bookingId : undefined);
+  const { data: booking } = useBookingDetail(validId ? bookingId : undefined, 'customer');
+  const { data: customerProfile } = useCustomerProfile();
 
   // 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 }}>
@@ -72,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 }}>
@@ -123,10 +140,21 @@ export default function BookingInvoicePage() {
     maximumFractionDigits: 2,
   }).format(invoice.vatRate);
 
+  const buyerName = [customerProfile?.firstName, customerProfile?.lastName].filter(Boolean).join(' ').trim();
+  const serviceLabel = booking ? variantName(booking.variantSnapshotJson) : null;
+  const visitDatesLabel = booking
+    ? booking.sessionCount > 1
+      ? t('invoice_visit_dates_multi', { date: formatShamsiDate(booking.scheduledDate, locale), count: booking.sessionCount })
+      : formatShamsiDate(booking.scheduledDate, locale)
+    : null;
+  const methodLabel =
+    invoice.paymentMethod === 'card' ? t('method_card') : invoice.paymentMethod === 'bnpl' ? t('invoice_method_bnpl') : null;
+
   return (
     <Stack sx={{ gap: 2 }}>
       <GlobalStyles
         styles={{
+          '@page': { size: 'A4', margin: '16mm' },
           '@media print': {
             'body *': { visibility: 'hidden' },
             [`.${PRINT_AREA_CLASS}, .${PRINT_AREA_CLASS} *`]: { visibility: 'visible' },
@@ -138,15 +166,13 @@ 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 }}>
             <Typography variant="h6" component="h1">
               {t('invoice_title')}
             </Typography>
-            {/* The issuer line uses the product spelling «بالین‌یار» — fa `common.brand` currently reads
-                «بلینیار» (the auth wordmark); a fiscal document must match the product/docs spelling. */}
             <Typography variant="subtitle2" sx={{ color: 'var(--bal-primary)', fontWeight: 700 }}>
               {t('issuer_platform')}
             </Typography>
@@ -156,6 +182,10 @@ export default function BookingInvoicePage() {
           <Stack sx={{ gap: 0.75 }}>
             <MetaRow label={t('invoice_number_label')} value={invoice.invoiceNumber} ltr />
             <MetaRow label={t('invoice_issued_at')} value={formatShamsiDate(invoice.issuedAt, locale)} />
+            {buyerName ? <MetaRow label={t('invoice_buyer_label')} value={buyerName} /> : null}
+            {serviceLabel ? <MetaRow label={t('invoice_service_label')} value={serviceLabel} /> : null}
+            {visitDatesLabel ? <MetaRow label={t('invoice_visit_dates_label')} value={visitDatesLabel} /> : null}
+            <MetaRow label={t('receipt_booking_ref_label')} value={String(invoice.bookingId)} ltr />
           </Stack>
 
           <PriceBreakdown
@@ -172,6 +202,15 @@ export default function BookingInvoicePage() {
             totalAmountIrr={invoice.grossIrr}
           />
 
+          {methodLabel || invoice.transactionReference ? (
+            <Stack sx={{ gap: 0.75 }}>
+              {methodLabel ? <MetaRow label={t('receipt_method_label')} value={methodLabel} /> : null}
+              {invoice.transactionReference ? (
+                <MetaRow label={t('invoice_transaction_ref_label')} value={invoice.transactionReference} ltr />
+              ) : null}
+            </Stack>
+          ) : null}
+
           {invoice.moadianStatus ? (
             <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
@@ -180,6 +219,39 @@ export default function BookingInvoicePage() {
               <StatusChip status={MOADIAN_KIND[invoice.moadianStatus]} label={t(`moadian_${invoice.moadianStatus}`)} />
             </Stack>
           ) : null}
+
+          {invoice.sellerFiscalIdentity ? (
+            <>
+              <Divider />
+              <Stack sx={{ gap: 0.5 }}>
+                <Typography variant="caption" sx={{ fontWeight: 700 }}>
+                  {invoice.sellerFiscalIdentity.legalName}
+                </Typography>
+                {invoice.sellerFiscalIdentity.economicCode ? (
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }} dir="ltr">
+                    {t('invoice_seller_economic_code_label')}: {invoice.sellerFiscalIdentity.economicCode}
+                  </Typography>
+                ) : null}
+                {invoice.sellerFiscalIdentity.address ? (
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {invoice.sellerFiscalIdentity.address}
+                  </Typography>
+                ) : null}
+              </Stack>
+            </>
+          ) : null}
+
+          {/* Print-only document footer — invoice number + issue date (+ مودیان reference when present). */}
+          <Box sx={{ display: 'none', '@media print': { display: 'block', mt: 2, pt: 1, borderTop: '1px solid', borderColor: 'divider' } }}>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('invoice_footer_reference', { number: invoice.invoiceNumber, date: formatShamsiDate(invoice.issuedAt, locale) })}
+            </Typography>
+            {invoice.moadianReferenceNumber ? (
+              <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }} dir="ltr">
+                {t('invoice_footer_moadian', { ref: invoice.moadianReferenceNumber })}
+              </Typography>
+            ) : null}
+          </Box>
         </Stack>
       </Paper>
 

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

@@ -1,18 +1,45 @@
 '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 { Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, EmptyState, RatingInput, ReviewTagSelector, StatusChip } 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';
+import type { BookingDetailDto } from '@/services/bookings/types';
 import { useReviewEligibility, useMyReviewForBooking, useCreateReview } from '@/services/reviews';
 import { REVIEW_TAG_CODES, type ModerationStatus } from '@/services/reviews/types';
 
+/** Best-effort read of the frozen variant display name from the booking's variant snapshot. */
+function variantName(snapshotJson: string): string | null {
+  try {
+    const parsed = JSON.parse(snapshotJson) as { displayName?: string };
+    return parsed?.displayName ?? null;
+  } catch {
+    return 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',
@@ -39,23 +66,26 @@ export default function LeaveReviewPage() {
   const bookingId = Number.isInteger(rawId) && rawId > 0 ? rawId : -1;
 
   const { data: booking } = useBookingDetail(bookingId, 'customer');
+  const reviewable = booking?.status === 'completed' || booking?.status === 'closed';
   const eligibility = useReviewEligibility(bookingId);
-  const myReview = useMyReviewForBooking(bookingId);
+  // Gated exactly like the booking-detail page's identical call — a review can only ever exist for a
+  // completed/closed booking, so an in-flight/active booking never fires this query.
+  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;
@@ -69,7 +99,8 @@ export default function LeaveReviewPage() {
     return (
       <Stack sx={{ gap: 3, maxWidth: 560, mx: 'auto', width: '100%' }}>
         <PageHeading title={t('my_review_title')} subtitle={nurseName ? t('for_nurse', { name: nurseName }) : undefined} />
-        <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+        {booking ? <ReviewContextRecap booking={booking} locale={locale} /> : null}
+        <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}`)} />
@@ -129,47 +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}
 
-      <Stack sx={{ gap: 1 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {t('rating_label')}
+      {/* Moderation expectation, up front — not only after submit. */}
+      <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>
-        <RatingInput value={rating} onChange={setRating} ariaLabel={t('rating_label')} />
       </Stack>
 
-      <TextField
+      <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>
+
+      <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"
         >
@@ -177,6 +220,32 @@ export default function LeaveReviewPage() {
         </AppButton>
       </Stack>
     </Stack>
+    </FormProvider>
+  );
+}
+
+/** "What you're reviewing" recap — service, Shamsi visit date, nurse — off the already-cached booking. */
+function ReviewContextRecap({ booking, locale }: { booking: BookingDetailDto; locale: string }) {
+  const t = useTranslations('reviews');
+  const service = variantName(booking.variantSnapshotJson);
+  const name = booking.nurseName.trim();
+
+  return (
+    <SurfaceCard padding="sm">
+      <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
+        <Avatar sx={{ width: 40, height: 40, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}>
+          {(name || t('recap_fallback_nurse')).charAt(0)}
+        </Avatar>
+        <Stack sx={{ gap: 0.25, minWidth: 0 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+            {service ?? t('recap_fallback_service')}
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {name || t('recap_fallback_nurse')} · {formatShamsiDate(booking.scheduledDate, locale)}
+          </Typography>
+        </Stack>
+      </Stack>
+    </SurfaceCard>
   );
 }
 

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, 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,62 +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}
-        disabled
-        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}
-        >
-          {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>
   );
 };
 
@@ -189,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

@@ -2,7 +2,7 @@
 import { FunctionComponent } from 'react';
 import { useTranslations } from 'next-intl';
 import { Box, ButtonBase, Paper, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, EmptyState, Money } from '@/components';
+import { AppButton, AppIcon, BnplProviderLogo, EmptyState, Money } from '@/components';
 import type { BnplOptions, BnplProvider, ProviderCode } from '@/services/bnpl/types';
 
 interface MethodStepProps {
@@ -13,15 +13,6 @@ interface MethodStepProps {
   onPayWithCard: () => void;
 }
 
-/** Two-letter provider glyph for the logo stand-in (real logos land with the provider assets). */
-const PROVIDER_GLYPH: Record<ProviderCode, string> = {
-  digipay: 'DG',
-  snapppay: 'SP',
-  balinyaar: 'ب',
-  tara: 'TA',
-  torobpay: 'TP',
-};
-
 /**
  * D1 · روش پرداخت — the branch off C6. Shows the payable amount, the full-card option (returns to the f9
  * card flow — never rebuilt here), and the installment providers loaded **from the contract/mock** (never
@@ -45,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')}
@@ -60,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',
@@ -137,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',
@@ -146,22 +137,7 @@ function ProviderOption({
       }}
     >
       <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5 }}>
-        <Box
-          sx={{
-            width: 40,
-            height: 28,
-            borderRadius: 1,
-            flex: 'none',
-            display: 'grid',
-            placeItems: 'center',
-            fontWeight: 800,
-            fontSize: 11,
-            color: 'var(--bal-secondary-dark)',
-            backgroundColor: 'var(--bal-secondary-soft)',
-          }}
-        >
-          {PROVIDER_GLYPH[provider.providerCode]}
-        </Box>
+        <BnplProviderLogo providerCode={provider.providerCode} size={40} />
         <Stack sx={{ flex: 1, gap: 0.25 }}>
           <Typography variant="body2" sx={{ fontWeight: 700 }}>
             {t(`provider_${provider.providerCode}`)}

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

@@ -3,10 +3,13 @@ import { FunctionComponent } from 'react';
 import { useTranslations } from 'next-intl';
 import { Paper, Stack, Typography } from '@mui/material';
 import { AppButton, BnplPlanCard, EmptyState, Money } from '@/components';
+import { parseIrr } from '@/utils';
 import type { BnplPlanOption, ProviderCode } from '@/services/bnpl/types';
 
 interface PlanStepProps {
   providerCode: ProviderCode;
+  /** D1's payable gross — the interest-free baseline `BnplPlanCard`'s fee delta compares against. */
+  orderAmountIrr: string;
   plans: BnplPlanOption[];
   selectedPlanId: string | null;
   onSelectPlan: (planId: string) => void;
@@ -14,6 +17,13 @@ interface PlanStepProps {
   onBack: () => void;
 }
 
+/** The same term/installment-count label `BnplPlanCard` shows — reused here to name the header's total. */
+function termLabelFor(plan: BnplPlanOption, t: ReturnType<typeof useTranslations>): string {
+  return plan.termMonths != null
+    ? t('plan_term_months', { months: plan.termMonths })
+    : t('plan_installments', { count: plan.installmentCount });
+}
+
 /**
  * D2 · انتخاب طرح اقساط — the plan selector for the chosen provider. Shows the total amount and the plan
  * options the contract returned (monthly amount + down-payment %) as a single-select terracotta card group.
@@ -22,6 +32,7 @@ interface PlanStepProps {
  */
 const PlanStep: FunctionComponent<PlanStepProps> = ({
   providerCode,
+  orderAmountIrr,
   plans,
   selectedPlanId,
   onSelectPlan,
@@ -43,8 +54,11 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
   }
 
   // The plan total is a per-plan served figure (interest-free plans = order gross; fee plans add the fee).
-  // Use the selected plan's total, falling back to the first plan's for the header before any selection.
-  const shownPlan = plans.find((p) => p.planId === selectedPlanId) ?? plans[0];
+  // No default fallback to plans[0] — the header only shows a total once a plan is actually selected, so
+  // it never silently morphs before the user has chosen anything.
+  const shownPlan = plans.find((p) => p.planId === selectedPlanId) ?? null;
+  const feeIrr = shownPlan ? (parseIrr(shownPlan.totalIrr) - parseIrr(orderAmountIrr)).toString() : null;
+  const hasFee = shownPlan != null && shownPlan.feePercent > 0 && feeIrr != null && parseIrr(feeIrr) > BigInt(0);
 
   return (
     <Stack sx={{ gap: 2 }}>
@@ -52,23 +66,39 @@ const PlanStep: FunctionComponent<PlanStepProps> = ({
         {t('plan_title', { provider: t(`provider_${providerCode}`) })}
       </Typography>
 
-      <Paper
-        elevation={0}
-        sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
-      >
-        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('total_amount')}
-          </Typography>
-          <Money amountIrr={shownPlan.totalIrr} tone="emphasis" size="sm" />
-        </Stack>
-      </Paper>
+      {shownPlan ? (
+        <Paper
+          elevation={0}
+          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' }}>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t('total_amount_named', { plan: termLabelFor(shownPlan, t) })}
+              </Typography>
+              <Money amountIrr={shownPlan.totalIrr} tone="emphasis" size="sm" />
+            </Stack>
+            {hasFee && feeIrr != null ? (
+              <Stack direction="row" sx={{ gap: 0.25, alignItems: 'baseline', justifyContent: 'flex-end' }}>
+                <Typography variant="caption" sx={{ color: 'var(--bal-money-emphasis)' }}>
+                  +
+                </Typography>
+                <Money amountIrr={feeIrr} size="sm" sx={{ color: 'var(--bal-money-emphasis)' }} />
+                <Typography variant="caption" sx={{ color: 'var(--bal-money-emphasis)' }}>
+                  {t('plan_fee_amount_suffix')}
+                </Typography>
+              </Stack>
+            ) : null}
+          </Stack>
+        </Paper>
+      ) : null}
 
       <Stack sx={{ gap: 1 }}>
         {plans.map((plan) => (
           <BnplPlanCard
             key={plan.planId}
             plan={plan}
+            orderAmountIrr={orderAmountIrr}
             selected={selectedPlanId === plan.planId}
             onSelect={onSelectPlan}
           />

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/bnpl/gateway/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { Suspense } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { notFound, useRouter, useSearchParams } from 'next/navigation';
 import { Stack } from '@mui/material';
 import { AppButton, AppLoading, EmptyState } from '@/components';
 import { ROUTES } from '@/constants';
@@ -22,6 +22,12 @@ import type { BnplHandoffOutcome, ProviderCode } from '@/services/bnpl/types';
  * real path the `redirectUrl` is the provider's absolute URL and this page is never reached.
  */
 export default function BnplGatewayPage() {
+  // A test harness must never be reachable in a production build — mirrors how the card-gateway harness
+  // was retired (refinement-phase-4). Unlike the card path, BNPL stays mock-primary, so this one is
+  // env-gated rather than deleted: still reachable in `next dev`, a clean 404 everywhere else.
+  if (process.env.NODE_ENV !== 'development') {
+    notFound();
+  }
   return (
     <Suspense fallback={<AppLoading />}>
       <BnplGatewayScreen />

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

@@ -2,8 +2,8 @@
 import { Suspense, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Paper, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, StepperHeader } from '@/components';
+import { Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, AppLoading, PaymentStateCard, StepperHeader } from '@/components';
 import { ROUTES } from '@/constants';
 import { useAuth } from '@/context/auth';
 import { useBnplOptions } from '@/services/bnpl';
@@ -57,38 +57,47 @@ function BnplCheckoutScreen() {
 
   if (!validId) {
     return (
-      <MessageCard icon="error" tone="var(--bal-error)" title={t('error_title')} ctaLabel={tb('bd_my_bookings')} onCta={toBookings} />
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
+        <AppButton variant="contained" color="primary" onClick={toBookings}>
+          {tb('bd_my_bookings')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
   if (isError) {
-    return <MessageCard icon="error" tone="var(--bal-error)" title={t('error_title')} body={t('error_body')} ctaLabel={tc('retry')} onCta={() => refetch()} />;
+    return (
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')} body={t('error_body')}>
+        <AppButton variant="contained" color="primary" onClick={() => refetch()}>
+          {tc('retry')}
+        </AppButton>
+      </PaymentStateCard>
+    );
   }
   if (isLoading || !options) return <WizardSkeleton />;
 
   // Only an accepted, awaiting-payment request is payable — converge/explain otherwise (mirrors C6).
   if (options.requestStatus === 'converted') {
     return (
-      <MessageCard
-        icon="verified"
-        tone="var(--bal-success)"
-        title={tp('already_paid_title')}
-        body={tp('already_paid_body')}
-        ctaLabel={tb('converted_cta')}
-        onCta={toRequest}
-      />
+      <PaymentStateCard icon="verified" tone="var(--bal-success)" title={tp('already_paid_title')} body={tp('already_paid_body')}>
+        <AppButton variant="contained" color="primary" onClick={toRequest}>
+          {tb('converted_cta')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
   if (options.requestStatus !== 'accepted_awaiting_payment') {
     const expired = options.requestStatus === 'payment_deadline_expired';
     return (
-      <MessageCard
+      <PaymentStateCard
         icon="pending"
         tone="var(--bal-warning)"
         title={expired ? tp('window_expired_title') : tp('not_payable_title')}
         body={expired ? tp('window_expired_body') : undefined}
-        ctaLabel={t('pay_with_card')}
-        onCta={toCard}
-      />
+      >
+        <AppButton variant="contained" color="primary" onClick={toCard}>
+          {t('pay_with_card')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
 
@@ -139,6 +148,7 @@ function BnplCheckoutScreen() {
       {step === 'plan' && providerCode && activeProvider ? (
         <PlanStep
           providerCode={providerCode}
+          orderAmountIrr={options.orderAmountIrr}
           plans={activeProvider.plans}
           selectedPlanId={planId}
           onSelectPlan={setPlanId}
@@ -175,39 +185,6 @@ function BnplCheckoutScreen() {
   );
 }
 
-function MessageCard({
-  icon,
-  tone,
-  title,
-  body,
-  ctaLabel,
-  onCta,
-}: {
-  icon: string;
-  tone: string;
-  title: string;
-  body?: string;
-  ctaLabel: string;
-  onCta: () => void;
-}) {
-  return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-      <AppIcon icon={icon} size={44} color={tone} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 700, mt: 1, mb: body ? 0.5 : 2 }}>
-        {title}
-      </Typography>
-      {body ? (
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
-          {body}
-        </Typography>
-      ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta}>
-        {ctaLabel}
-      </AppButton>
-    </Paper>
-  );
-}
-
 function WizardSkeleton() {
   return (
     <Stack sx={{ gap: 2 }}>

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

@@ -1,10 +1,10 @@
 'use client';
-import { Suspense, useEffect, useRef, type ReactNode } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
-import { CircularProgress, Paper, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading } from '@/components';
+import { CircularProgress } from '@mui/material';
+import { AppButton, AppLoading, PaymentStateCard } from '@/components';
 import { ROUTES } from '@/constants';
 import { useAcceptBnplSchedule, useBnplOrder } from '@/services/bnpl';
 import { invalidateAfterBnplSettlement } from '@/services/bnpl/invalidations';
@@ -41,6 +41,7 @@ export default function BnplReturnPage() {
 function BnplReturnScreen() {
   const t = useTranslations('bnpl');
   const tp = useTranslations('payment');
+  const tb = useTranslations('booking');
   const locale = useLocale();
   const router = useRouter();
   const params = useSearchParams();
@@ -97,11 +98,13 @@ function BnplReturnScreen() {
 
   if (!validId) {
     return (
-      <StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
+        {/* No recoverable request id — the label must match the destination (the bookings list), never
+            promise a card-payment action the click can't perform. */}
         <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
-          {t('pay_with_card')}
+          {tb('bd_my_bookings')}
         </AppButton>
-      </StateCard>
+      </PaymentStateCard>
     );
   }
 
@@ -109,20 +112,20 @@ function BnplReturnScreen() {
     // The payment window lapsed during the handoff — card payment is impossible now, so route to the
     // request (not the card checkout). Reuse the f9 window-expired copy + the matching back-to-request CTA.
     return (
-      <StateCard icon="pending" tone="var(--bal-warning)" title={tp('window_expired_title')} body={tp('window_expired_body')}>
+      <PaymentStateCard icon="pending" tone="var(--bal-warning)" title={tp('window_expired_title')} body={tp('window_expired_body')}>
         <AppButton
           variant="contained"
           onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
         >
           {tp('back_to_request')}
         </AppButton>
-      </StateCard>
+      </PaymentStateCard>
     );
   }
 
   if (failed) {
     return (
-      <StateCard icon="error" tone="var(--bal-error)" title={t('settle_failed_title')} body={t('settle_failed_body')}>
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('settle_failed_title')} body={t('settle_failed_body')}>
         <AppButton
           color="secondary"
           variant="contained"
@@ -137,48 +140,17 @@ function BnplReturnScreen() {
         >
           {t('pay_with_card')}
         </AppButton>
-      </StateCard>
+      </PaymentStateCard>
     );
   }
 
   // Settle-pending (and the brief succeeded → confirmation hand-off): a calm waiting state.
   return (
-    <StateCard icon="installments" tone="var(--bal-secondary)" title={t('settling_title')} body={t('settling_body')}>
+    <PaymentStateCard icon="installments" tone="var(--bal-secondary)" title={t('settling_title')} body={t('settling_body')}>
       <CircularProgress color="secondary" size="2.5rem" />
       <AppButton variant="text" disabled={orderQuery.isFetching} onClick={() => orderQuery.refetch()}>
         {t('check_again')}
       </AppButton>
-    </StateCard>
-  );
-}
-
-function StateCard({
-  icon,
-  tone,
-  title,
-  body,
-  children,
-}: {
-  icon: string;
-  tone: string;
-  title: string;
-  body?: string;
-  children?: ReactNode;
-}) {
-  return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-      <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
-        <AppIcon icon={icon} size={44} color={tone} />
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-          {title}
-        </Typography>
-        {body ? (
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {body}
-          </Typography>
-        ) : null}
-        {children}
-      </Stack>
-    </Paper>
+    </PaymentStateCard>
   );
 }

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

@@ -1,12 +1,26 @@
 'use client';
-import { Suspense } from 'react';
+import { Suspense, type ReactNode } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Paper, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, Money } from '@/components';
+import { useSnackbar } from 'notistack';
+import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  AppButton,
+  AppIcon,
+  AppIconButton,
+  AppLoading,
+  ErrorState,
+  EscrowExplainer,
+  Money,
+  StatusTimeline,
+  SurfaceCard,
+  type TimelineNode,
+} from '@/components';
 import { bookingInvoicePath, ROUTES } from '@/constants';
-import { useCheckoutSummary } from '@/services/payment';
+import { formatShamsiDateTime } from '@/utils';
+import { useCheckoutSummary, usePaymentOutcome } from '@/services/payment';
 import { CHECKOUT_QUERY_BOOKING_ID, CHECKOUT_QUERY_REQUEST_ID } from '@/services/payment/constants';
+import { useBnplOrder } from '@/services/bnpl';
 import {
   BNPL_QUERY_PROVIDER,
   CHECKOUT_METHOD_BNPL,
@@ -14,12 +28,13 @@ import {
 } from '@/services/bnpl/constants';
 
 /**
- * Post-payment confirmation — the booking is now **confirmed** (flipped by cache invalidation on the
- * return surface, never a blanket refetch). Links back to the f8 booking detail («مشاهده رزرو») and to
- * the invoice («دانلود فاکتور»). Reused by both the f9 card flow and the f11 BNPL branch: when reached
- * with `?method=bnpl` it also renders a «پرداخت‌شده با اقساط» line (a settled BNPL order is, to
- * Balinyaar, a card payment net-of-fee — there is no separate BNPL confirmation). Without a `booking_id`
- * (REQ-017/024 unmet on the real path) the deep-links fall back to the bookings list.
+ * Post-payment confirmation — a screenshot-worthy receipt (Iranian users screenshot payment receipts): the
+ * paid total, a copyable LTR کد پیگیری, the Shamsi payment date-time, the payment method, the booking
+ * reference, the escrow reassurance, and a "what happens next" 2-step strip. The booking is now
+ * **confirmed** (flipped by cache invalidation on the return surface, never a blanket refetch). Reused by
+ * both the f9 card flow and the f11 BNPL branch: reached with `?method=bnpl` it reads the settled BNPL
+ * order instead of the payment outcome for the tracking reference + paid-at timestamp. Real loading/error
+ * states — a failed fetch must never silently erase the paid amount.
  */
 export default function CheckoutConfirmationPage() {
   return (
@@ -31,20 +46,51 @@ export default function CheckoutConfirmationPage() {
 
 function ConfirmationScreen() {
   const t = useTranslations('payment');
+  const tc = useTranslations('common');
   const tBnpl = useTranslations('bnpl');
   const locale = useLocale();
   const router = useRouter();
   const params = useSearchParams();
+  const { enqueueSnackbar } = useSnackbar();
 
   const requestId = Number(params.get(CHECKOUT_QUERY_REQUEST_ID));
+  const validRequestId = Number.isInteger(requestId) && requestId > 0;
   const bookingIdParam = params.get(CHECKOUT_QUERY_BOOKING_ID);
   const bookingId = bookingIdParam ? Number(bookingIdParam) : null;
   const isBnpl = params.get(CHECKOUT_QUERY_METHOD) === CHECKOUT_METHOD_BNPL;
   const bnplProvider = params.get(BNPL_QUERY_PROVIDER) ?? '';
 
-  const { data: summary } = useCheckoutSummary(
-    Number.isInteger(requestId) && requestId > 0 ? requestId : undefined,
-  );
+  const {
+    data: summary,
+    isLoading,
+    isError,
+    refetch,
+  } = useCheckoutSummary(validRequestId ? requestId : undefined);
+
+  // The receipt reference/timestamp come from whichever leg actually settled this request — the card
+  // outcome or the BNPL order — never fabricated when the real path hasn't served them yet (REQ-046).
+  const outcomeQuery = usePaymentOutcome(validRequestId && !isBnpl ? requestId : undefined);
+  const orderQuery = useBnplOrder(validRequestId && isBnpl ? requestId : undefined);
+
+  const trackingCode = isBnpl
+    ? (orderQuery.data?.id != null ? String(orderQuery.data.id) : null)
+    : (outcomeQuery.data?.trackingCode ?? null);
+  const paidAt = isBnpl ? (orderQuery.data?.settledAt ?? null) : (outcomeQuery.data?.paidAt ?? null);
+  const methodLabel = isBnpl
+    ? t('method_bnpl_provider', { provider: bnplProvider ? tBnpl(`provider_${bnplProvider}`) : tBnpl('installments_heading') })
+    : t('method_card');
+
+  const nextStepsNodes: TimelineNode[] = [
+    { key: 'nurse_notified', label: t('next_step_nurse_notified'), state: 'completed' },
+    { key: 'visit_checkin', label: t('next_step_visit_checkin'), state: 'pending' },
+  ];
+
+  const handleCopy = () => {
+    if (!trackingCode) return;
+    navigator.clipboard.writeText(trackingCode).then(() => {
+      enqueueSnackbar(t('tracking_code_copied'), { variant: 'success' });
+    });
+  };
 
   return (
     <Stack sx={{ gap: 3, alignItems: 'center', textAlign: 'center' }}>
@@ -58,29 +104,62 @@ function ConfirmationScreen() {
         </Typography>
       </Stack>
 
-      {summary ? (
-        <Paper
-          elevation={0}
-          sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider', width: '100%' }}
-        >
-          <Stack sx={{ gap: 0.5, alignItems: 'center' }}>
+      {isLoading ? (
+        <ReceiptSkeleton />
+      ) : isError || !summary ? (
+        <ErrorState message={t('error_body')} retryLabel={tc('retry')} onRetry={() => refetch()} />
+      ) : (
+        <SurfaceCard sx={{ width: '100%' }}>
+          <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t('total_paid_label')}
             </Typography>
-            <Money amountIrr={summary.totalIrr} tone="emphasis" size="lg" />
+            <Money amountIrr={summary.totalIrr} tone="emphasis" size="xl" sx={{ fontWeight: 800 }} />
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {summary.variantLabel} · {summary.nurseName}
             </Typography>
-            {isBnpl ? (
-              <Typography variant="caption" sx={{ color: 'var(--bal-secondary)', fontWeight: 500, mt: 0.5 }}>
-                {tBnpl('paid_via_installments', {
-                  provider: bnplProvider ? tBnpl(`provider_${bnplProvider}`) : tBnpl('installments_heading'),
-                })}
-              </Typography>
-            ) : null}
+
+            <Divider sx={{ width: '100%', my: 0.5 }} />
+
+            <Stack sx={{ width: '100%', gap: 1 }}>
+              {trackingCode ? (
+                <ReceiptRow label={t('receipt_tracking_code_label')}>
+                  <Stack direction="row" sx={{ alignItems: 'center', gap: 0.5 }}>
+                    <Box component="span" dir="ltr" sx={{ fontWeight: 700 }}>
+                      {trackingCode}
+                    </Box>
+                    <AppIconButton icon="copy" size="small" title={t('copy_tracking_code')} onClick={handleCopy} />
+                  </Stack>
+                </ReceiptRow>
+              ) : null}
+              {paidAt ? (
+                <ReceiptRow label={t('receipt_paid_at_label')} value={formatShamsiDateTime(paidAt, locale)} />
+              ) : null}
+              <ReceiptRow label={t('receipt_method_label')} value={methodLabel} />
+              {bookingId != null ? (
+                <ReceiptRow label={t('receipt_booking_ref_label')}>
+                  <Box component="span" dir="ltr" sx={{ fontWeight: 700 }}>
+                    {bookingId}
+                  </Box>
+                </ReceiptRow>
+              ) : null}
+            </Stack>
           </Stack>
-        </Paper>
-      ) : null}
+        </SurfaceCard>
+      )}
+
+      <Stack sx={{ width: '100%' }}>
+        <EscrowExplainer />
+      </Stack>
+
+      <SurfaceCard sx={{ width: '100%' }}>
+        <Stack sx={{ gap: 1.5 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+            {t('next_steps_title')}
+          </Typography>
+          <StatusTimeline nodes={nextStepsNodes} />
+        </Stack>
+      </SurfaceCard>
 
       <Stack sx={{ gap: 1, width: '100%' }}>
         <AppButton
@@ -107,3 +186,28 @@ function ConfirmationScreen() {
     </Stack>
   );
 }
+
+function ReceiptRow({ label, value, children }: { label: string; value?: string; children?: ReactNode }) {
+  return (
+    <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        {label}
+      </Typography>
+      {children ?? (
+        <Typography variant="body2" sx={{ fontWeight: 700 }}>
+          {value}
+        </Typography>
+      )}
+    </Stack>
+  );
+}
+
+function ReceiptSkeleton() {
+  return (
+    <Stack sx={{ gap: 1.5, width: '100%' }}>
+      <Skeleton variant="text" width="40%" height={24} sx={{ mx: 'auto' }} />
+      <Skeleton variant="text" width="60%" height={48} sx={{ mx: 'auto' }} />
+      <Skeleton variant="rounded" height={140} />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,71 @@
+'use client';
+import { Suspense } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Box, Stack, Typography } from '@mui/material';
+import { AppButton, AppLoading, PaymentStateCard } from '@/components';
+import { ROUTES } from '@/constants';
+import {
+  CHECKOUT_QUERY_OUTCOME,
+  CHECKOUT_QUERY_REQUEST_ID,
+  CHECKOUT_QUERY_TRANSACTION_ID,
+} from '@/services/payment/constants';
+import type { GatewayReturnOutcome } from '@/services/payment/types';
+
+/**
+ * Mock-gateway harness — a **test harness, not a product feature**, mirroring the BNPL provider-handoff
+ * harness (`checkout/bnpl/gateway/page.tsx`). It stands in for the PSP so the initiate → redirect → return
+ * round-trip is exercisable without a real gateway: `MockPaymentProvider.InitPaymentAsync` points its
+ * `redirectUrl` here, and the pay/cancel buttons drive both outcome branches of the return surface (a real
+ * PSP redirects back after the cardholder pays or cancels). Deliberately reachable in every build, including
+ * production — unlike the BNPL harness, this one is NOT env-gated: this deployment is a demo with no real
+ * gateway wired up (`mvp/blockers.md` §B.5), so the mock stays reachable until a real acquirer is switched
+ * on, at which point `redirectUrl` becomes the PSP's absolute URL and this page is never reached.
+ */
+export default function MockGatewayPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <MockGatewayScreen />
+    </Suspense>
+  );
+}
+
+function MockGatewayScreen() {
+  const t = useTranslations('payment');
+  const locale = useLocale();
+  const router = useRouter();
+  const params = useSearchParams();
+
+  const requestId = params.get(CHECKOUT_QUERY_REQUEST_ID) ?? '';
+  const transactionId = params.get(CHECKOUT_QUERY_TRANSACTION_ID) ?? '';
+
+  const returnWith = (outcome: GatewayReturnOutcome) => {
+    const query = new URLSearchParams({
+      [CHECKOUT_QUERY_REQUEST_ID]: requestId,
+      [CHECKOUT_QUERY_TRANSACTION_ID]: transactionId,
+      [CHECKOUT_QUERY_OUTCOME]: outcome,
+    });
+    router.replace(`/${locale}${ROUTES.CHECKOUT_RETURN}?${query.toString()}`);
+  };
+
+  return (
+    <PaymentStateCard icon="payment" tone="var(--bal-secondary)" title={t('gateway_title')} body={t('gateway_hint')}>
+      {transactionId ? (
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          {t('gateway_reference_label')}:{' '}
+          <Box component="span" dir="ltr">
+            #{transactionId}
+          </Box>
+        </Typography>
+      ) : null}
+      <Stack sx={{ gap: 1.5, alignItems: 'center', width: '100%' }}>
+        <AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')}>
+          {t('gateway_pay_success')}
+        </AppButton>
+        <AppButton variant="text" color="error" onClick={() => returnWith('failure')}>
+          {t('gateway_pay_fail')}
+        </AppButton>
+      </Stack>
+    </PaymentStateCard>
+  );
+}

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

@@ -2,17 +2,21 @@
 import { Suspense, useRef } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import {
   AppButton,
   AppIcon,
   AppLoading,
   CountdownTimer,
-  EscrowNotice,
+  EscrowExplainer,
+  Money,
+  PaymentStateCard,
   PriceBreakdown,
   StatusChip,
+  TrustBadge,
 } from '@/components';
 import AppAlert from '@/components/common/AppAlert';
+import StickyActionBar from '@/components/common/StickyActionBar';
 import { ROUTES } from '@/constants';
 import { ApiError } from '@/lib/api/errors';
 import { formatShamsiDate, localeTag } from '@/utils';
@@ -25,10 +29,11 @@ import {
 import type { CheckoutSummaryDto } from '@/services/payment/types';
 
 /**
- * C6 — خلاصه و پرداخت (summary & pay). The acceptance badge, the served & reconciling
- * service-cost / commission / VAT / total breakdown, the load-bearing escrow trust notice, and the
- * «ادامه پرداخت ←» CTA that initiates the card payment and follows the gateway redirect. Reached from
- * C5's accept CTA with `?request_id=`. `useSearchParams` needs a Suspense boundary.
+ * C6 — خلاصه و پرداخت (summary & pay). The acceptance badge, the identity moment (nurse avatar + verified
+ * badge), a prominent total, the served & reconciling service-cost / commission / VAT / total breakdown,
+ * the load-bearing escrow trust notice, and a safe-area-aware sticky pay bar that initiates the card
+ * payment and follows the gateway redirect. Reached from C5's accept CTA with `?request_id=`.
+ * `useSearchParams` needs a Suspense boundary.
  */
 export default function CheckoutPage() {
   return (
@@ -60,26 +65,20 @@ function CheckoutScreen() {
   // `checkout_summary/undefined` (a manual refetch() bypasses the query's `enabled` gate).
   if (!validId) {
     return (
-      <MessageCard
-        icon="error"
-        tone="var(--bal-error)"
-        title={t('error_title')}
-        body={t('invalid_link_body')}
-        ctaLabel={tb('bd_my_bookings')}
-        onCta={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}
-      />
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')} body={t('invalid_link_body')}>
+        <AppButton variant="contained" color="primary" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
+          {tb('bd_my_bookings')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
   if (isError) {
     return (
-      <MessageCard
-        icon="error"
-        tone="var(--bal-error)"
-        title={t('error_title')}
-        body={t('error_body')}
-        ctaLabel={tc('retry')}
-        onCta={() => refetch()}
-      />
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')} body={t('error_body')}>
+        <AppButton variant="contained" color="primary" onClick={() => refetch()}>
+          {tc('retry')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
   if (isLoading || !summary) return <CheckoutSkeleton />;
@@ -92,27 +91,35 @@ function CheckoutScreen() {
   // Anything other than "awaiting payment" cannot show a pay CTA — converge or explain instead.
   if (summary.requestStatus === 'converted') {
     return (
-      <MessageCard
+      <PaymentStateCard
         icon="verified"
         tone="var(--bal-success)"
         title={t('already_paid_title')}
         body={t('already_paid_body')}
-        ctaLabel={tb('converted_cta')}
-        onCta={() => router.replace(returnUrl())}
-      />
+      >
+        <AppButton variant="contained" color="primary" onClick={() => router.replace(returnUrl())}>
+          {tb('converted_cta')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
   if (summary.requestStatus !== 'accepted_awaiting_payment') {
     const expired = summary.requestStatus === 'payment_deadline_expired';
     return (
-      <MessageCard
+      <PaymentStateCard
         icon="pending"
         tone="var(--bal-warning)"
         title={expired ? t('window_expired_title') : t('not_payable_title')}
         body={expired ? t('window_expired_body') : undefined}
-        ctaLabel={t('back_to_request')}
-        onCta={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
-      />
+      >
+        <AppButton
+          variant="contained"
+          color="primary"
+          onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
+        >
+          {t('back_to_request')}
+        </AppButton>
+      </PaymentStateCard>
     );
   }
 
@@ -152,6 +159,56 @@ function CheckoutScreen() {
       ? t('initiate_failed')
       : null;
 
+  const payActions = (
+    <Stack sx={{ gap: 1 }}>
+      {inlineError ? (
+        <AppAlert severity="error" variant="outlined" sx={{ marginY: 0 }}>
+          {inlineError}
+        </AppAlert>
+      ) : null}
+
+      <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+        <Stack sx={{ gap: 0 }}>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('row_total')}
+          </Typography>
+          <Money amountIrr={summary.totalIrr} tone="emphasis" size="md" sx={{ fontWeight: 800 }} />
+        </Stack>
+        <AppButton
+          color="secondary"
+          variant="contained"
+          size="large"
+          disabled={busy}
+          onClick={handlePay}
+          endIcon="forward"
+          sx={{ py: 1.25, flex: 'none', minWidth: 168 }}
+        >
+          {initiate.isPending ? t('state_initiating') : initiate.isSuccess ? t('state_redirecting') : t('cta_pay')}
+        </AppButton>
+      </Stack>
+
+      <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center', justifyContent: 'center' }}>
+        <AppIcon icon="lock" size={14} color="var(--bal-text-secondary)" />
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          {t('secure_gateway_notice')}
+        </Typography>
+      </Stack>
+
+      {/* The f11 BNPL branch (D1): «پرداخت اقساطی» → the installment wizard, reached with `?request_id=`. */}
+      {BNPL_ENABLED ? (
+        <AppButton
+          variant="outlined"
+          color="secondary"
+          startIcon="installments"
+          disabled={busy}
+          onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT_BNPL}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
+        >
+          {t('bnpl_option')}
+        </AppButton>
+      ) : null}
+    </Stack>
+  );
+
   return (
     <Stack sx={{ gap: 3 }}>
       <Stack sx={{ gap: 1, alignItems: 'center', textAlign: 'center' }}>
@@ -159,74 +216,92 @@ function CheckoutScreen() {
         <Typography variant="h6" component="h1">
           {t('title_checkout')}
         </Typography>
-      </Stack>
-
-      <EngagementSummary summary={summary} locale={locale} />
-
-      {summary.paymentDeadlineAt ? (
-        <Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
-          <CountdownTimer
-            deadlineIso={summary.paymentDeadlineAt}
-            label={tb('payment_countdown_label')}
-            elapsedText={tb('payment_elapsed')}
-            urgent
-            onElapsed={() => refetch()}
-          />
-        </Paper>
-      ) : null}
-
-      <PriceBreakdown
-        rows={[
-          {
-            key: 'service_cost',
-            // Quantity context per the wireframe («هزینه خدمت (۸ ساعت)») — the visit count is the only
-            // quantity that always matches the charged gross (variant price × session count).
-            label: t('row_service_cost_with_count', { count: summary.sessionCount }),
-            amountIrr: summary.serviceCostIrr,
-          },
-          { key: 'commission', label: t('row_commission'), amountIrr: summary.commissionIrr },
-          { key: 'vat', label: t('row_vat'), amountIrr: summary.vatIrr },
-        ]}
-        totalLabel={t('row_total')}
-        totalAmountIrr={summary.totalIrr}
-      />
-
-      <EscrowNotice />
-
-      {inlineError ? (
-        <AppAlert severity="error" variant="outlined" sx={{ marginY: 0 }}>
-          {inlineError}
-        </AppAlert>
-      ) : null}
-
-      <Stack sx={{ gap: 1 }}>
         <AppButton
-          color="secondary"
-          variant="contained"
-          size="large"
-          disabled={busy}
-          onClick={handlePay}
-          sx={{ py: 1.25 }}
+          variant="text"
+          color="primary"
+          size="small"
+          startIcon="chevron_start"
+          onClick={() => router.push(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
+          sx={{ px: 0.5 }}
         >
-          {initiate.isPending ? t('state_initiating') : initiate.isSuccess ? t('state_redirecting') : t('cta_pay')}
+          {t('back_to_request')}
         </AppButton>
-        {/* The f11 BNPL branch (D1): «پرداخت اقساطی» → the installment wizard, reached with `?request_id=`. */}
-        {BNPL_ENABLED ? (
-          <AppButton
-            variant="outlined"
-            color="secondary"
-            startIcon="installments"
-            onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT_BNPL}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)}
-          >
-            {t('bnpl_option')}
-          </AppButton>
-        ) : null}
       </Stack>
+
+      {/* Above ~900px (`md`), a two-column layout: the summary/breakdown/escrow content on the reading
+          side, a sticky order-summary card (the desktop analogue of the mobile sticky pay bar) on the
+          other — the same `payActions` content either way, never duplicated logic. */}
+      <Stack direction={{ xs: 'column', md: 'row' }} sx={{ gap: 3, alignItems: 'flex-start' }}>
+        <Stack sx={{ gap: 3, width: '100%', minWidth: 0, flex: { md: '1 1 62%' } }}>
+          <EngagementSummary summary={summary} locale={locale} />
+
+          {/* The prominent total — the single most important figure on a payment screen, never buried in
+              the breakdown. Same served `totalIrr` PriceBreakdown reconciles below; never recomputed. */}
+          <Stack sx={{ alignItems: 'center', gap: 0.25 }}>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('total_payable_label')}
+            </Typography>
+            <Money amountIrr={summary.totalIrr} tone="emphasis" size="xl" sx={{ fontWeight: 800 }} />
+          </Stack>
+
+          {summary.paymentDeadlineAt ? (
+            <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')}
+                elapsedText={tb('payment_elapsed')}
+                urgent
+                onElapsed={() => refetch()}
+              />
+            </Paper>
+          ) : null}
+
+          <PriceBreakdown
+            rows={[
+              {
+                key: 'service_cost',
+                // Quantity context per the wireframe («هزینه خدمت (۸ ساعت)») — the visit count is the only
+                // quantity that always matches the charged gross (variant price × session count).
+                label: t('row_service_cost_with_count', { count: summary.sessionCount }),
+                amountIrr: summary.serviceCostIrr,
+              },
+              { key: 'commission', label: t('row_commission'), amountIrr: summary.commissionIrr },
+              { key: 'vat', label: t('row_vat'), amountIrr: summary.vatIrr },
+            ]}
+            totalLabel={t('row_total')}
+            totalAmountIrr={summary.totalIrr}
+          />
+
+          <EscrowExplainer />
+        </Stack>
+
+        <Box
+          sx={{
+            display: { xs: 'none', md: 'block' },
+            position: 'sticky',
+            top: 96,
+            flex: '0 0 300px',
+            width: 300,
+          }}
+        >
+          <Paper elevation={0} sx={{ p: 2.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
+            {payActions}
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Mobile-only: the same actions in the bottom sticky bar; desktop already shows them in the side
+          panel above. Spacer keeps the sticky bar from overlapping the last content on a short viewport. */}
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Stack sx={{ pb: 1 }} />
+        <StickyActionBar>{payActions}</StickyActionBar>
+      </Box>
     </Stack>
   );
 }
 
-/** Nurse/service/schedule mini-summary — page-only composition (C6 needs no address or price-per-unit). */
+/** Nurse/service/schedule mini-summary — the C6 identity moment: avatar + verified badge answer "who am
+ * I paying for" at the moment of payment. */
 function EngagementSummary({ summary, locale }: { summary: CheckoutSummaryDto; locale: string }) {
   const start = new Date(`${summary.requestedDate}T${summary.requestedTimeStart}`);
   const end = new Date(`${summary.requestedDate}T${summary.requestedTimeEnd}`);
@@ -235,55 +310,33 @@ 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' }}>
-      <Stack sx={{ gap: 0.5 }}>
-        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-          {summary.variantLabel}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {summary.nurseName} · {summary.patientName}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {formatShamsiDate(start, locale)} · {timeFmt.format(start)} – {timeFmt.format(end)}
-        </Typography>
+    <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}
+          sx={{ width: 48, height: 48, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}
+        >
+          {summary.nurseName.trim().charAt(0)}
+        </Avatar>
+        <Stack sx={{ gap: 0.5, flex: 1, minWidth: 0 }}>
+          <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+              {summary.nurseName}
+            </Typography>
+            <TrustBadge state={summary.nurseVerified ? 'verified' : 'unverified'} />
+          </Stack>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {summary.variantLabel} · {summary.patientName}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {formatShamsiDate(start, locale)} · {timeFmt.format(start)} – {timeFmt.format(end)}
+          </Typography>
+        </Stack>
       </Stack>
     </Paper>
   );
 }
 
-function MessageCard({
-  icon,
-  tone,
-  title,
-  body,
-  ctaLabel,
-  onCta,
-}: {
-  icon: string;
-  tone: string;
-  title: string;
-  body?: string;
-  ctaLabel: string;
-  onCta: () => void;
-}) {
-  return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-      <AppIcon icon={icon} size={44} color={tone} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 700, mt: 1, mb: body ? 0.5 : 2 }}>
-        {title}
-      </Typography>
-      {body ? (
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
-          {body}
-        </Typography>
-      ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta}>
-        {ctaLabel}
-      </AppButton>
-    </Paper>
-  );
-}
-
 function CheckoutSkeleton() {
   return (
     <Stack sx={{ gap: 3 }}>
@@ -292,6 +345,7 @@ function CheckoutSkeleton() {
         <Skeleton variant="text" width="50%" height={32} />
       </Stack>
       <Skeleton variant="rounded" height={96} />
+      <Skeleton variant="text" width="40%" height={48} sx={{ mx: 'auto' }} />
       <Skeleton variant="rounded" height={64} />
       <Skeleton variant="rounded" height={160} />
       <Skeleton variant="rounded" height={56} />

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

@@ -1,10 +1,10 @@
 'use client';
-import { Suspense, useEffect, useRef, type ReactNode } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
-import { CircularProgress, Paper, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, PaymentStatusBadge } from '@/components';
+import { Paper, Stack, Typography } from '@mui/material';
+import { AppButton, AppLoading, PaymentStateCard, StatusTimeline, type TimelineNode } from '@/components';
 import { ROUTES } from '@/constants';
 import { useConfirmGatewayReturn, usePaymentOutcome } from '@/services/payment';
 import { invalidateAfterPaymentSuccess } from '@/services/payment/invalidations';
@@ -18,10 +18,12 @@ import {
 /**
  * Return-from-gateway surface — drives the tail of the checkout state machine: report the return
  * (`useConfirmGatewayReturn`; the capture trigger in the mock, an outcome read on the real path), then a
- * **pending-callback** state backed by the backoff poll ("PSP received ≠ cash in bank" — pending is
- * normal, reflected calmly) until a terminal outcome: succeeded → invalidate the booking/request caches
- * and hand off to the confirmation screen; failed → a retry affordance (a fresh C6 mount = a new attempt
- * with a NEW idempotency key); window lapsed → back to the request's terminal card.
+ * **pending-callback** state — a staged 2-node progress («بازگشت از درگاه ✓» → «در انتظار تایید بانک»,
+ * the calm animated `StatusTimeline` `current` pulse) with an expected-duration hint, backed by the
+ * backoff poll ("PSP received ≠ cash in bank" — pending is normal, reflected calmly) — until a terminal
+ * outcome: succeeded → invalidate the booking/request caches and hand off to the confirmation screen;
+ * failed → a retry affordance (a fresh C6 mount = a new attempt with a NEW idempotency key); window
+ * lapsed → back to the request's terminal card.
  */
 export default function CheckoutReturnPage() {
   return (
@@ -31,6 +33,11 @@ export default function CheckoutReturnPage() {
   );
 }
 
+const PENDING_NODES = (returnedLabel: string, confirmingLabel: string): TimelineNode[] => [
+  { key: 'returned', label: returnedLabel, state: 'completed' },
+  { key: 'confirming', label: confirmingLabel, state: 'current' },
+];
+
 function ReturnScreen() {
   const t = useTranslations('payment');
   const locale = useLocale();
@@ -87,90 +94,75 @@ function ReturnScreen() {
 
   if (!validId) {
     return (
-      <StateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('error_title')}>
         <AppButton variant="contained" onClick={() => router.replace(`/${locale}${ROUTES.BOOKINGS}`)}>
           {t('view_booking')}
         </AppButton>
-      </StateCard>
+      </PaymentStateCard>
     );
   }
 
   if (windowExpired) {
     return (
-      <StateCard icon="pending" tone="var(--bal-warning)" title={t('window_expired_title')} body={t('window_expired_body')}>
+      <PaymentStateCard
+        icon="pending"
+        tone="var(--bal-warning)"
+        title={t('window_expired_title')}
+        body={t('window_expired_body')}
+      >
         <AppButton
           variant="contained"
           onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
         >
           {t('back_to_request')}
         </AppButton>
-      </StateCard>
+      </PaymentStateCard>
     );
   }
 
   if (failed) {
     return (
-      <StateCard icon="error" tone="var(--bal-error)" title={t('state_failed_title')} body={t('state_failed_hint')}>
-        <PaymentStatusBadge status="failed" />
-        <AppButton
-          color="secondary"
-          variant="contained"
-          size="large"
-          onClick={() =>
-            router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)
-          }
-        >
-          {t('retry_payment')}
-        </AppButton>
-        <AppButton
-          variant="text"
-          onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
-        >
-          {t('back_to_request')}
-        </AppButton>
-      </StateCard>
+      <PaymentStateCard icon="error" tone="var(--bal-error)" title={t('state_failed_title')} body={t('state_failed_hint')}>
+        <Stack sx={{ gap: 1, width: '100%' }}>
+          <AppButton
+            color="secondary"
+            variant="contained"
+            size="large"
+            onClick={() =>
+              router.replace(`/${locale}${ROUTES.CHECKOUT}?${CHECKOUT_QUERY_REQUEST_ID}=${requestId}`)
+            }
+          >
+            {t('retry_payment')}
+          </AppButton>
+          <AppButton
+            variant="text"
+            onClick={() => router.replace(`/${locale}${ROUTES.BOOKING_REQUEST_STATUS}/${requestId}`)}
+          >
+            {t('back_to_request')}
+          </AppButton>
+        </Stack>
+      </PaymentStateCard>
     );
   }
 
-  // Pending-callback (and the brief succeeded → confirmation hand-off): a calm waiting state.
+  // 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 (
-    <StateCard icon="payment" tone="var(--bal-secondary)" title={t('state_pending_title')} body={t('state_pending_hint')}>
-      <CircularProgress color="primary" size="2.5rem" />
-      <PaymentStatusBadge status="pending" />
-      {/* Manual re-check — covers the bounded poll giving up on a very slow callback. */}
-      <AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()}>
-        {t('check_again')}
-      </AppButton>
-    </StateCard>
-  );
-}
-
-function StateCard({
-  icon,
-  tone,
-  title,
-  body,
-  children,
-}: {
-  icon: string;
-  tone: string;
-  title: string;
-  body?: string;
-  children?: ReactNode;
-}) {
-  return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-      <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
-        <AppIcon icon={icon} size={44} color={tone} />
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-          {title}
+    <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')}
         </Typography>
-        {body ? (
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {body}
-          </Typography>
-        ) : null}
-        {children}
+        <Stack sx={{ alignSelf: 'stretch', maxWidth: 320, mx: 'auto' }}>
+          <StatusTimeline nodes={PENDING_NODES(t('stage_returned'), t('stage_confirming'))} />
+        </Stack>
+        <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+          {t('state_pending_duration_hint')}
+        </Typography>
+        {/* Manual re-check — covers the bounded poll giving up on a very slow callback. */}
+        <AppButton variant="text" disabled={outcomeQuery.isFetching} onClick={() => outcomeQuery.refetch()}>
+          {t('check_again')}
+        </AppButton>
       </Stack>
     </Paper>
   );

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

@@ -2,21 +2,31 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
+import { Paper, Skeleton, Stack, Typography } from '@mui/material';
 import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Paper,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { AppButton, AppIcon, BookingRequestSummaryCard, CountdownTimer, StatusChip, StepperHeader } from '@/components';
+  AppButton,
+  AppIcon,
+  BookingRequestSummaryCard,
+  ConfirmDialog,
+  CountdownTimer,
+  StatusChip,
+  StepperHeader,
+} from '@/components';
 import { ROUTES } from '@/constants';
 import { useBookingRequest, useCancelBookingRequest } from '@/services/bookingRequests';
 import type { BookingRequestDto } from '@/services/bookingRequests/types';
 
+const MINUTES_PER_HOUR = 60;
+
+/** Freeform-text heuristic (the DTO carries no structured rejection-reason code — REQ-044): suppress the
+ * "same nurse, different time" recovery when the nurse's reason reads like a hard gender/coverage block. */
+const RETRY_BLOCK_KEYWORDS = ['gender', 'coverage', 'area', 'جنسیت', 'پوشش', 'منطقه', 'محدوده'];
+function rejectionAllowsSameNurseRetry(reason: string | null): boolean {
+  if (!reason) return true;
+  const lower = reason.toLowerCase();
+  return !RETRY_BLOCK_KEYWORDS.some((keyword) => lower.includes(keyword));
+}
+
 /**
  * C5 — Awaiting nurse acceptance (در انتظار تایید پرستار). Keyed by the request id, it **polls** the
  * request (`useBookingRequest`, stopping at a terminal status) so the accept / reject / expire transition
@@ -46,14 +56,37 @@ export default function BookingRequestStatusPage() {
         icon="error"
         tone="var(--bal-error)"
         title={t('error_title')}
-        body={t('error_body')}
-        ctaLabel={t('retry')}
-        onCta={() => refetch()}
+        primary={{ label: t('retry'), onClick: () => refetch() }}
       />
     );
   }
 
   const goToSearch = () => router.push(`/${locale}${ROUTES.SEARCH}`);
+
+  /** Region + gender-carried search — "پرستاران مشابه": same city/district + the same caregiver-gender
+   * intent, recovering the search context rather than restarting discovery from zero. */
+  const goToSimilarNurses = () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('city_id', String(request.cityId));
+    if (request.districtId != null) searchParams.set('district_id', String(request.districtId));
+    if (request.requiredCaregiverGender === 'male' || request.requiredCaregiverGender === 'female') {
+      searchParams.set('nurse_gender', request.requiredCaregiverGender);
+    }
+    router.push(`/${locale}${ROUTES.SEARCH}?${searchParams.toString()}`);
+  };
+
+  /** Reopens C4 for the SAME nurse/variant/patient/address, only the date/time left to re-pick — recovers
+   * the booking intent instead of restarting from search. */
+  const goToReRequestSameNurse = () => {
+    const requestParams = new URLSearchParams();
+    requestParams.set('nurse_id', String(request.nurseId));
+    requestParams.set('variant_id', String(request.variantId));
+    if (request.requiredCaregiverGender) requestParams.set('required_gender', request.requiredCaregiverGender);
+    requestParams.set('patient_id', String(request.patientId));
+    requestParams.set('address_id', String(request.customerAddressId));
+    router.push(`/${locale}${ROUTES.BOOKING_REQUEST}?${requestParams.toString()}`);
+  };
+
   const addressLabel = customerAddressLabel(request, locale, t('address_whole_city'));
 
   const summary = (
@@ -73,6 +106,7 @@ export default function BookingRequestStatusPage() {
 
   // Terminal states — each is its own card with a re-request path back into discovery (or booking).
   if (request.status === 'rejected_by_nurse') {
+    const canRetrySameNurse = rejectionAllowsSameNurseRetry(request.nurseRejectionReason);
     return (
       <Stack sx={{ gap: 3 }}>
         {summary}
@@ -81,8 +115,12 @@ export default function BookingRequestStatusPage() {
           tone="var(--bal-error)"
           title={t('rejected_title')}
           body={request.nurseRejectionReason ? `${t('rejected_reason_label')}: ${request.nurseRejectionReason}` : undefined}
-          ctaLabel={t('terminal_rerequest')}
-          onCta={goToSearch}
+          primary={
+            canRetrySameNurse
+              ? { label: t('terminal_rerequest_same_nurse'), onClick: goToReRequestSameNurse }
+              : { label: t('terminal_similar_nurses'), onClick: goToSimilarNurses }
+          }
+          secondary={canRetrySameNurse ? { label: t('terminal_similar_nurses'), onClick: goToSimilarNurses } : undefined}
         />
       </Stack>
     );
@@ -91,7 +129,13 @@ export default function BookingRequestStatusPage() {
     return (
       <Stack sx={{ gap: 3 }}>
         {summary}
-        <TerminalCard icon="pending" tone="var(--bal-warning)" title={t('expired_title')} ctaLabel={t('terminal_rerequest')} onCta={goToSearch} />
+        <TerminalCard
+          icon="pending"
+          tone="var(--bal-warning)"
+          title={t('expired_title')}
+          primary={{ label: t('terminal_rerequest_same_nurse'), onClick: goToReRequestSameNurse }}
+          secondary={{ label: t('terminal_similar_nurses'), onClick: goToSimilarNurses }}
+        />
       </Stack>
     );
   }
@@ -99,7 +143,12 @@ export default function BookingRequestStatusPage() {
     return (
       <Stack sx={{ gap: 3 }}>
         {summary}
-        <TerminalCard icon="pending" tone="var(--bal-warning)" title={t('payment_expired_title')} ctaLabel={t('terminal_rerequest')} onCta={goToSearch} />
+        <TerminalCard
+          icon="pending"
+          tone="var(--bal-warning)"
+          title={t('payment_expired_title')}
+          primary={{ label: t('terminal_rerequest'), onClick: goToSearch }}
+        />
       </Stack>
     );
   }
@@ -107,7 +156,12 @@ export default function BookingRequestStatusPage() {
     return (
       <Stack sx={{ gap: 3 }}>
         {summary}
-        <TerminalCard icon="rejected" tone="var(--bal-text-secondary)" title={t('cancelled_title')} ctaLabel={t('terminal_rerequest')} onCta={goToSearch} />
+        <TerminalCard
+          icon="rejected"
+          tone="var(--bal-text-secondary)"
+          title={t('cancelled_title')}
+          primary={{ label: t('terminal_rerequest'), onClick: goToSearch }}
+        />
       </Stack>
     );
   }
@@ -119,13 +173,14 @@ export default function BookingRequestStatusPage() {
           icon="verified"
           tone="var(--bal-success)"
           title={t('converted_title')}
-          ctaLabel={t('converted_cta')}
-          // Deep-link the booking when the id is known (client-augmented, REQ-017); list fallback otherwise.
-          onCta={() =>
-            router.push(
-              `/${locale}${request.bookingId != null ? `${ROUTES.BOOKINGS}/${request.bookingId}` : ROUTES.BOOKINGS}`,
-            )
-          }
+          primary={{
+            label: t('converted_cta'),
+            // Deep-link the booking when the id is known (client-augmented, REQ-017); list fallback otherwise.
+            onClick: () =>
+              router.push(
+                `/${locale}${request.bookingId != null ? `${ROUTES.BOOKINGS}/${request.bookingId}` : ROUTES.BOOKINGS}`,
+              ),
+          }}
         />
       </Stack>
     );
@@ -158,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,
@@ -183,7 +238,7 @@ export default function BookingRequestStatusPage() {
               color="secondary"
               variant="contained"
               size="large"
-              endIcon="payment"
+              endIcon="forward"
               onClick={() => router.push(`/${locale}${ROUTES.CHECKOUT}?request_id=${request.id}`)}
               sx={{ py: 1.25 }}
             >
@@ -192,13 +247,20 @@ export default function BookingRequestStatusPage() {
           </Stack>
         </Paper>
       ) : (
-        <Paper elevation={0} sx={{ p: 2.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
-          <CountdownTimer
-            deadlineIso={request.nurseResponseDeadlineAt}
-            label={t('response_countdown_label')}
-            elapsedText={t('response_elapsed')}
-            onElapsed={() => refetch()}
-          />
+        <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}
+              windowStart={request.createdAt}
+              label={t('response_countdown_label')}
+              elapsedText={t('response_elapsed')}
+              coarseLabel={(minutes) => coarseResponseLabel(minutes, t)}
+              onElapsed={() => refetch()}
+            />
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('response_notify_note')}
+            </Typography>
+          </Stack>
         </Paper>
       )}
 
@@ -212,33 +274,32 @@ export default function BookingRequestStatusPage() {
         {cancelRequest.isPending ? t('cancelling') : t('cancel_request')}
       </AppButton>
 
-      <Dialog open={confirmCancel} onClose={() => setConfirmCancel(false)}>
-        <DialogTitle>{t('cancel_confirm_title')}</DialogTitle>
-        <DialogContent>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('cancel_confirm_body')}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <AppButton variant="text" onClick={() => setConfirmCancel(false)}>
-            {t('cancel_request')}
-          </AppButton>
-          <AppButton
-            color="error"
-            variant="contained"
-            onClick={() => {
-              setConfirmCancel(false);
-              cancelRequest.mutate(request.id);
-            }}
-          >
-            {t('cancel_confirm_yes')}
-          </AppButton>
-        </DialogActions>
-      </Dialog>
+      <ConfirmDialog
+        open={confirmCancel}
+        title={t('cancel_confirm_title')}
+        body={t('cancel_confirm_body')}
+        cancelLabel={t('cancel_confirm_keep')}
+        confirmLabel={t('cancel_confirm_destructive')}
+        confirmColor="error"
+        loading={cancelRequest.isPending}
+        onClose={() => setConfirmCancel(false)}
+        onConfirm={() => {
+          setConfirmCancel(false);
+          cancelRequest.mutate(request.id);
+        }}
+      />
     </Stack>
   );
 }
 
+/** Humanized minutes-remaining copy above the coarse threshold («حدود ۳ ساعت» / «حدود ۲۵ دقیقه»). */
+function coarseResponseLabel(minutes: number, t: (key: string, values?: Record<string, number>) => string): string {
+  if (minutes >= MINUTES_PER_HOUR) {
+    return t('countdown_about_hours', { hours: Math.round(minutes / MINUTES_PER_HOUR) });
+  }
+  return t('countdown_about_minutes', { minutes });
+}
+
 /** "title · city · district" (or "· whole city"), locale-aware — the customer view carries the full address. */
 function customerAddressLabel(request: BookingRequestDto, locale: string, wholeCityLabel: string): string {
   const city = locale === 'en' ? request.cityNameEn : request.cityNameFa;
@@ -247,23 +308,28 @@ function customerAddressLabel(request: BookingRequestDto, locale: string, wholeC
   return `${request.addressTitle} · ${city} · ${district}`;
 }
 
+interface TerminalAction {
+  label: string;
+  onClick: () => void;
+}
+
 function TerminalCard({
   icon,
   tone,
   title,
   body,
-  ctaLabel,
-  onCta,
+  primary,
+  secondary,
 }: {
   icon: string;
   tone: string;
   title: string;
   body?: string;
-  ctaLabel: string;
-  onCta: () => void;
+  primary: TerminalAction;
+  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}
@@ -273,9 +339,16 @@ function TerminalCard({
           {body}
         </Typography>
       ) : null}
-      <AppButton variant="contained" color="primary" onClick={onCta}>
-        {ctaLabel}
-      </AppButton>
+      <Stack direction="row" sx={{ gap: 1, justifyContent: 'center', flexWrap: 'wrap' }}>
+        <AppButton variant="contained" color="primary" onClick={primary.onClick}>
+          {primary.label}
+        </AppButton>
+        {secondary ? (
+          <AppButton variant="outlined" color="primary" onClick={secondary.onClick}>
+            {secondary.label}
+          </AppButton>
+        ) : null}
+      </Stack>
     </Paper>
   );
 }

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

@@ -2,10 +2,12 @@
 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,
+  Chip,
   MenuItem,
-  Paper,
   Skeleton,
   Stack,
   TextField,
@@ -13,23 +15,61 @@ import {
   ToggleButtonGroup,
   Typography,
 } from '@mui/material';
-import { AppButton, AppLoading, EmptyState, PriceDisplay } from '@/components';
-import { AddressMapPicker } from '@/components/geography';
+import {
+  AppButton,
+  AppIcon,
+  AppLoading,
+  EmptyState,
+  JalaliDateIntentPicker,
+  PriceDisplay,
+  RhfControlGroup,
+  RhfTextField,
+  StepperHeader,
+  TrustBadge,
+} from '@/components';
+import { todayIso } from '@/components/common/JalaliDatePicker';
 import { ROUTES } from '@/constants';
 import { ApiError } from '@/lib/api/errors';
-import { cityCentroid } from '@/services/geography/constants';
 import { usePatients } from '@/services/patients';
 import { useAddresses } from '@/services/addresses';
 import { useNurseProfile } from '@/services/search';
+import type { NurseProfile } from '@/services/search/types';
 import { useCreateBookingRequest } from '@/services/bookingRequests';
 import { CUSTOMER_NOTES_MAX_LENGTH } from '@/services/bookingRequests/constants';
+import { formatNumber } from '@/utils';
 import type {
   BookingRequestDisplayContext,
   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'];
 
+interface TimeWindowOption {
+  key: 'morning' | 'afternoon' | 'evening';
+  start: string;
+  end: string;
+}
+
+const TIME_WINDOWS: TimeWindowOption[] = [
+  { key: 'morning', start: '08:00', end: '12:00' },
+  { key: 'afternoon', start: '12:00', end: '16:00' },
+  { key: 'evening', start: '16:00', end: '20:00' },
+];
+
+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
  * `nurse_id`, an optional `variant_id`, and the same-gender `required_gender` intent from search). The
@@ -46,9 +86,18 @@ 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 tAddress = useTranslations('address');
   const locale = useLocale();
   const router = useRouter();
   const query = useSearchParams();
@@ -57,85 +106,145 @@ function BookingRequestForm() {
   const hasNurse = Number.isInteger(nurseId) && nurseId > 0;
   const variantIdParam = Number(query.get('variant_id')) || null;
   const genderParam = query.get('required_gender');
+  // Recovery hand-off from C5's "request again with another time" — reopens this same nurse/variant
+  // prefilled with the patient + address of the terminal request, extending the C3 handoff params.
+  const patientIdParam = Number(query.get('patient_id')) || null;
+  const addressIdParam = Number(query.get('address_id')) || null;
 
   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 | ''>('');
-  const [variantSel, setVariantSel] = useState<number | ''>(variantIdParam ?? '');
-  const [addressSel, setAddressSel] = useState<number | ''>('');
-  const [gender, setGender] = useState<RequiredCaregiverGender | ''>(
-    genderParam === 'male' || genderParam === 'female' ? genderParam : '',
-  );
-  const [date, setDate] = useState('');
-  const [timeStart, setTimeStart] = useState('09:00');
-  const [timeEnd, setTimeEnd] = useState('13:00');
-  const [notes, setNotes] = useState('');
-  const [attempted, setAttempted] = useState(false);
-  const [pastDateError, setPastDateError] = useState(false);
+  const [addressEditing, setAddressEditing] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
-  // 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 = (): string => {
-    if (!selectedAddress) return '';
-    const city = locale === 'en' ? selectedAddress.cityNameEn : selectedAddress.cityNameFa;
+  const regionLabel = (address: CustomerAddress): string => {
+    const city = locale === 'en' ? address.cityNameEn : address.cityNameFa;
     const district =
-      selectedAddress.districtId == null
+      address.districtId == null
         ? t('address_whole_city')
         : locale === 'en'
-          ? selectedAddress.districtNameEn
-          : selectedAddress.districtNameFa;
-    return `${selectedAddress.title} · ${city} · ${district}`;
+          ? address.districtNameEn
+          : address.districtNameFa;
+    return `${address.title} · ${city} · ${district}`;
   };
 
-  const handleSubmit = () => {
-    setAttempted(true);
+  const selectWindow = (option: TimeWindowOption) => {
+    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 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 =
@@ -166,143 +275,122 @@ 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 = attempted && timeStart !== '' && timeEnd !== '' && timeEnd <= timeStart;
-  const pastError = pastDateError;
-
   return (
-    <Stack sx={{ gap: 3 }}>
-      <Box>
-        <Typography variant="h5" component="h1">
-          {t('request_title')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('form_subtitle')}
-        </Typography>
-      </Box>
+    <FormProvider {...form}>
+      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 3 }}>
+        {profile ? <NurseIdentityBar profile={profile} /> : null}
 
-      {/* 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={attempted && patientId === ''}
-          helperText={attempted && patientId === '' ? t('error_patient_required') : undefined}
-          onChange={(event) => setPatientId(Number(event.target.value))}
-          fullWidth
-        >
-          <MenuItem value="" disabled>
-            {t('patient_placeholder')}
-          </MenuItem>
-          {patients.map((patient) => (
-            <MenuItem key={patient.id} value={patient.id}>
-              {patient.displayName}
-            </MenuItem>
-          ))}
-        </TextField>
-      )}
-
-      {/* Service variant */}
-      {services.length === 0 ? (
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('service_empty')}
-        </Typography>
-      ) : (
-        <TextField
-          select
-          label={t('service_label')}
-          value={variantId}
-          error={attempted && variantId === ''}
-          helperText={attempted && variantId === '' ? t('error_service_required') : undefined}
-          onChange={(event) => setVariantSel(Number(event.target.value))}
-          fullWidth
-        >
-          <MenuItem value="" disabled>
-            {t('service_placeholder')}
-          </MenuItem>
-          {services.map((service) => (
-            <MenuItem key={service.variantId} value={service.variantId}>
-              {service.displayName}
-            </MenuItem>
-          ))}
-        </TextField>
-      )}
-      {selectedVariant ? (
-        <Box sx={{ mt: -1.5 }}>
-          <PriceDisplay
-            price={selectedVariant.priceIrr}
-            priceUnit={selectedVariant.priceUnit}
-            sessionCount={selectedVariant.sessionCount}
-          />
+        <Box>
+          <Typography variant="h5" component="h1">
+            {t('request_title')}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('form_subtitle')}
+          </Typography>
         </Box>
-      ) : null}
 
-      {/* Address */}
-      {addresses.length === 0 ? (
-        <FieldEmpty
-          label={t('address_label')}
-          message={t('address_empty')}
-          ctaLabel={t('address_add_cta')}
-          onCta={() => router.push(`/${locale}${ROUTES.ADDRESSES}`)}
-        />
-      ) : (
+        <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}`)}
+          />
+        ) : (
+          <RhfTextField<RequestFormValues>
+            name="patientId"
+            select
+            label={t('patient_label')}
+            rules={{ validate: (value) => value !== '' || t('error_patient_required') }}
+            fullWidth
+          >
+            <MenuItem value="" disabled>
+              {t('patient_placeholder')}
+            </MenuItem>
+            {patients.map((patient) => (
+              <MenuItem key={patient.id} value={patient.id}>
+                {patient.displayName}
+              </MenuItem>
+            ))}
+          </RhfTextField>
+        )}
+
+        {/* Service variant */}
         <Stack sx={{ gap: 1 }}>
-          <TextField
+          {services.length === 0 ? (
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('service_empty')}
+            </Typography>
+          ) : (
+            <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}
+            />
+          ) : 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 ? (
+          <RhfTextField<RequestFormValues>
+            name="addressId"
             select
             label={t('address_label')}
-            value={addressId}
-            error={attempted && addressId === ''}
-            helperText={attempted && addressId === '' ? t('error_address_required') : undefined}
-            onChange={(event) => setAddressSel(Number(event.target.value))}
+            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>
@@ -313,143 +401,258 @@ function BookingRequestForm() {
                 {address.title} · {locale === 'en' ? address.cityNameEn : address.cityNameFa}
               </MenuItem>
             ))}
-          </TextField>
-          {selectedAddress ? (
-            <Paper elevation={0} sx={{ p: 1.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-              <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-                {regionLabel()}
-                {selectedAddress.addressLine ? ` — ${selectedAddress.addressLine}` : ''}
+          </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.latitude != null && selectedAddress.longitude != null ? (
-                // Read-only preview of the address's stored pin (the pin itself is set in the f3 book).
-                <Box sx={{ pointerEvents: 'none' }}>
-                  <AddressMapPicker
-                    value={{ latitude: selectedAddress.latitude, longitude: selectedAddress.longitude }}
-                    onChange={() => undefined}
-                    center={cityCentroid(selectedAddress.cityId)}
-                    helperText={regionLabel()}
-                    latLabel={tAddress('map_lat')}
-                    lngLabel={tAddress('map_lng')}
-                  />
-                </Box>
+              {selectedAddress.addressLine ? (
+                <Typography variant="caption" sx={{ color: 'text.secondary' }} noWrap>
+                  {selectedAddress.addressLine}
+                </Typography>
               ) : null}
-            </Paper>
-          ) : null}
-        </Stack>
-      )}
+            </Stack>
+            <AppButton variant="text" size="small" onClick={() => setAddressEditing(true)} sx={{ flexShrink: 0 }}>
+              {t('address_change_cta')}
+            </AppButton>
+          </Stack>
+        )}
 
-      {/* Date + time */}
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <TextField
-          type="date"
+        {/* Date — the past-date guard is a cross-field rule against the chosen start time. */}
+        <RhfControlGroup<RequestFormValues>
+          name="date"
           label={t('date_label')}
-          value={date}
-          error={(attempted && date === '') || pastError}
-          helperText={pastError ? t('error_past_date') : attempted && date === '' ? t('error_date_required') : undefined}
-          onChange={(event) => {
-            setDate(event.target.value);
-            if (pastDateError) setPastDateError(false);
-          }}
-          slotProps={{ inputLabel: { shrink: true } }}
-          fullWidth
-        />
-        <TextField
-          type="time"
-          label={t('time_start_label')}
-          value={timeStart}
-          onChange={(event) => {
-            setTimeStart(event.target.value);
-            if (pastDateError) setPastDateError(false);
-          }}
-          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
-        />
-      </Stack>
-
-      {/* Caregiver gender — first-class, three-way, never silently defaulted */}
-      <Stack sx={{ gap: 1 }}>
-        <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: attempted && gender === '' ? 'var(--bal-error)' : undefined,
+          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>
-        {attempted && 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}
+
+        {/* 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
+            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>
+    </FormProvider>
+  );
+}
 
-      {/* Stage-1 notes */}
-      <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', mt: -2 }}>
-        {t('notes_counter', { count: notes.length, max: CUSTOMER_NOTES_MAX_LENGTH })}
-      </Typography>
+/** The sticky "who you're inviting home" identity summary — avatar, name, rating, trust badge, gender. */
+function NurseIdentityBar({ profile }: { profile: NurseProfile }) {
+  const t = useTranslations('booking');
+  const locale = useLocale();
+  const name = profile.nurseName.trim() || t('unnamed_nurse');
+  const ratingLabel = formatNumber(profile.averageRating, locale, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
 
-      {formError ? (
-        <Typography variant="body2" sx={{ color: 'var(--bal-error)' }}>
-          {formError}
-        </Typography>
-      ) : null}
-
-      <AppButton
-        color="primary"
-        variant="contained"
-        size="large"
-        startIcon="requests"
-        disabled={!requiredChosen || genderMismatch || createRequest.isPending}
-        onClick={handleSubmit}
-        sx={{ py: 1.5 }}
+  return (
+    <Stack
+      direction="row"
+      data-nurse-identity-bar
+      sx={{
+        position: 'sticky',
+        // 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',
+        p: 1.5,
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 'var(--bal-radius-md)',
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Avatar
+        src={profile.avatarUrl ?? undefined}
+        sx={{ width: 44, height: 44, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}
       >
-        {createRequest.isPending ? t('submitting') : t('submit')}
-      </AppButton>
+        {name.charAt(0)}
+      </Avatar>
+      <Stack sx={{ gap: 0.25, minWidth: 0, flexGrow: 1 }}>
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }} noWrap>
+            {name}
+          </Typography>
+          <TrustBadge state={profile.isVerified ? 'verified' : 'unverified'} />
+        </Stack>
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+          <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
+            <AppIcon icon="star" size={15} color="var(--bal-rating)" />
+            <Typography variant="caption" sx={{ fontWeight: 700 }}>
+              {ratingLabel}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              ({formatNumber(profile.totalReviews, locale)})
+            </Typography>
+          </Stack>
+          <Chip
+            size="small"
+            variant="outlined"
+            label={t(`gender_${profile.nurseGender}`)}
+            sx={{ height: 20, fontSize: '0.7rem' }}
+          />
+        </Stack>
+      </Stack>
     </Stack>
   );
 }
@@ -512,7 +715,9 @@ function FieldEmpty({
 function FormSkeleton() {
   return (
     <Stack sx={{ gap: 2.5 }}>
+      <Skeleton variant="rounded" height={76} />
       <Skeleton variant="text" width="50%" height={36} />
+      <Skeleton variant="rounded" height={48} />
       {[0, 1, 2, 3].map((key) => (
         <Skeleton key={key} variant="rounded" height={56} />
       ))}

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

@@ -3,26 +3,17 @@ import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useSnackbar } from 'notistack';
-import {
-  Box,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { AppButton, EmptyState, ErrorState, PatientCard, PatientForm } from '@/components';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, ConfirmDialog, EmptyState, ErrorState, FormDialogShell, PatientCard, PatientForm } from '@/components';
 import { patientRecordPath } from '@/constants';
 import { usePatients, useCreatePatient, useUpdatePatient, useArchivePatient } from '@/services/patients';
 import { birthDateToAge } from '@/services/patients/age';
 import type { CreatePatientInput, Patient } from '@/services/patients/types';
 
 /**
- * E1 — the Patients tab: a cached, invalidate-on-mutation list of the customer's patients
- * with add/edit (the A4 form reused in a dialog) and soft archive (confirm). Loading skeleton
- * and an empty state with the add CTA are both handled.
+ * E1 — the care-circle tab («حلقه مراقبت»): a cached, invalidate-on-mutation list of the people the
+ * customer arranges care for, with add/edit (the A4 form in a full-screen-on-mobile dialog) and soft
+ * archive (confirm). Loading skeleton and an empty state with the add CTA are both handled.
  */
 export default function PatientsPage() {
   const t = useTranslations('patients');
@@ -38,6 +29,7 @@ export default function PatientsPage() {
   const archivePatient = useArchivePatient();
 
   const [formOpen, setFormOpen] = useState(false);
+  const [formDirty, setFormDirty] = useState(false);
   const [editing, setEditing] = useState<Patient | null>(null);
   const [archiveTarget, setArchiveTarget] = useState<Patient | null>(null);
 
@@ -143,50 +135,52 @@ export default function PatientsPage() {
         </Stack>
       )}
 
-      <Dialog open={formOpen} onClose={closeForm} fullWidth maxWidth="sm">
-        <DialogTitle>{editing ? t('edit_title') : t('add_title')}</DialogTitle>
-        <DialogContent>
-          <Box sx={{ pt: 1 }}>
-            <PatientForm
-              key={editing?.id ?? 'new'}
-              initial={
-                editing
-                  ? {
-                      displayName: editing.displayName,
-                      birthDate: editing.birthDate,
-                      gender: editing.gender,
-                      conditions: editing.conditions,
-                      relation: editing.relation,
-                    }
-                  : undefined
-              }
-              showRelation
-              submitLabel={tc('save')}
-              submitting={createPatient.isPending || updatePatient.isPending}
-              onSubmit={handleSubmit}
-              onCancel={closeForm}
-              cancelLabel={tc('cancel')}
-            />
-          </Box>
-        </DialogContent>
-      </Dialog>
+      <FormDialogShell
+        open={formOpen}
+        title={editing ? t('edit_title') : t('add_title')}
+        dirty={formDirty}
+        onClose={closeForm}
+        closeLabel={tc('close')}
+        discardTitle={tc('discard_title')}
+        discardBody={tc('discard_body')}
+        discardConfirmLabel={tc('discard_confirm')}
+        discardCancelLabel={tc('cancel')}
+      >
+        <PatientForm
+          key={editing?.id ?? 'new'}
+          initial={
+            editing
+              ? {
+                  displayName: editing.displayName,
+                  firstName: editing.firstName,
+                  lastName: editing.lastName,
+                  birthDate: editing.birthDate,
+                  gender: editing.gender,
+                  conditions: editing.conditions,
+                  relation: editing.relation,
+                }
+              : undefined
+          }
+          showRelation
+          submitLabel={tc('save')}
+          submitting={createPatient.isPending || updatePatient.isPending}
+          onSubmit={handleSubmit}
+          onCancel={closeForm}
+          cancelLabel={tc('cancel')}
+          onDirtyChange={setFormDirty}
+        />
+      </FormDialogShell>
 
-      <Dialog open={Boolean(archiveTarget)} onClose={() => setArchiveTarget(null)}>
-        <DialogTitle>{t('archive_title')}</DialogTitle>
-        <DialogContent>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('archive_body')}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <AppButton variant="text" onClick={() => setArchiveTarget(null)}>
-            {tc('cancel')}
-          </AppButton>
-          <AppButton color="error" variant="contained" onClick={confirmArchive}>
-            {t('archive_confirm')}
-          </AppButton>
-        </DialogActions>
-      </Dialog>
+      <ConfirmDialog
+        open={Boolean(archiveTarget)}
+        title={t('archive_title')}
+        body={t('archive_body')}
+        confirmLabel={t('archive_confirm')}
+        cancelLabel={tc('cancel')}
+        confirmColor="error"
+        onClose={() => setArchiveTarget(null)}
+        onConfirm={confirmArchive}
+      />
     </Box>
   );
 }

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

@@ -1,172 +1,388 @@
 'use client';
 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, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, ErrorState, PhoneNumberField } from '@/components';
+import { Box, Divider, MenuItem, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  AppButton,
+  AppIcon,
+  ConfirmDialog,
+  ErrorState,
+  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';
+import { ActorSwitcher } from '@/layout';
 import { useCustomerProfile, useUpsertCustomerProfile } from '@/services/profiles';
-import { useMe } from '@/services/auth';
+import { useMe, useLogout } from '@/services/auth';
 import type { CustomerProfile } from '@/services/profiles/types';
 
-/** Customer profile — name, preferred language, and the emergency contact. No national-ID KYC. */
+/** Customer profile — the account hub: identity header, grouped rows, emergency-contact status card. */
 export default function CustomerProfilePage() {
   const t = useTranslations('profile');
   const tc = useTranslations('common');
   const { data: profile, isLoading, isError, refetch } = useCustomerProfile();
-  const { data: me } = useMe();
-  if (isLoading) return <AppLoading />;
+  const { data: me, isLoading: meLoading } = useMe();
+
+  if (isLoading || meLoading) return <ProfileSkeleton />;
   // The form must never render on a failed fetch — it would otherwise show blank/undefined fields
   // whose save could overwrite server truth.
   if (isError) return <ErrorState message={t('load_error')} retryLabel={tc('retry')} onRetry={() => refetch()} />;
-  // The customer name is owned by `/me` (REQ-007), not `CustomerProfileDto` — prefill it from there so
-  // editing the emergency contact never blanks (and re-saves as null) the existing name.
+
   return (
-    <CustomerProfileForm initial={profile ?? null} nameFallback={{ firstName: me?.firstName ?? null, lastName: me?.lastName ?? null }} />
+    <AccountHub
+      initial={profile ?? null}
+      nameFallback={{ firstName: me?.firstName ?? null, lastName: me?.lastName ?? null }}
+      phone={me?.phone}
+    />
   );
 }
 
-const CustomerProfileForm: FunctionComponent<{
+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 };
-}> = ({ initial, nameFallback }) => {
+  phone?: string;
+}> = ({ initial, nameFallback, phone }) => {
   const t = useTranslations('profile');
-  const ta = useTranslations('address');
   const tc = useTranslations('common');
   const locale = useLocale();
+  const router = useRouter();
   const { enqueueSnackbar } = useSnackbar();
   const upsert = useUpsertCustomerProfile();
+  const logout = useLogout();
 
-  const [firstName, setFirstName] = useState(initial?.firstName ?? nameFallback.firstName ?? '');
-  const [lastName, setLastName] = useState(initial?.lastName ?? nameFallback.lastName ?? '');
-  const [language, setLanguage] = useState(initial?.preferredLanguage ?? 'fa');
-  const [emergencyName, setEmergencyName] = useState(initial?.defaultEmergencyContactName ?? '');
-  const [emergencyPhone, setEmergencyPhone] = useState(digitsOnly(initial?.defaultEmergencyContactPhone ?? ''));
-  const [nameError, setNameError] = useState(false);
-  const [phoneError, setPhoneError] = useState(false);
+  const [personalSheetOpen, setPersonalSheetOpen] = useState(false);
+  const [languageSheetOpen, setLanguageSheetOpen] = useState(false);
+  const [emergencySheetOpen, setEmergencySheetOpen] = useState(false);
+  const [signOutOpen, setSignOutOpen] = useState(false);
 
-  const isComplete = Boolean(initial?.defaultEmergencyContactName && initial?.defaultEmergencyContactPhone);
+  // 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 handleSave = () => {
-    const nameInvalid = emergencyName.trim().length === 0;
-    const phoneInvalid = !isIranianMobile(emergencyPhone);
-    setNameError(nameInvalid);
-    setPhoneError(phoneInvalid);
-    if (nameInvalid || phoneInvalid) return;
+  const displayName = [watched.firstName, watched.lastName].filter(Boolean).join(' ').trim() || phone || '';
+  const emergencyComplete = Boolean(watched.emergencyName?.trim() && watched.emergencyPhone);
 
+  const save = (onDone: () => void) => {
+    const values = getValues();
     upsert.mutate(
       {
-        defaultEmergencyContactName: emergencyName.trim(),
-        defaultEmergencyContactPhone: emergencyPhone,
-        firstName: firstName.trim() || null,
-        lastName: lastName.trim() || null,
-        preferredLanguage: language,
+        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();
+        },
       },
-      { onSuccess: () => enqueueSnackbar(t('saved'), { variant: 'success' }) },
     );
   };
 
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 520 }}>
-      <Box>
-        <Typography variant="h5" component="h1">
-          {t('title')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('subtitle')}
-        </Typography>
-        <Typography variant="body2" sx={{ mt: 0.5, color: isComplete ? 'var(--bal-success)' : 'text.secondary' }}>
-          {isComplete ? t('completion_done') : t('completion_todo')}
-        </Typography>
-      </Box>
+  const savePersonal = () => save(() => setPersonalSheetOpen(false));
+  const saveLanguage = () => save(() => setLanguageSheetOpen(false));
+  const saveEmergency = async () => {
+    if (!(await trigger(['emergencyName', 'emergencyPhone']))) return;
+    save(() => setEmergencySheetOpen(false));
+  };
 
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <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 />
+  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}`);
+
+  // Shared discard-confirm strings for every FormDialogShell instance below.
+  const closeLabel = tc('close');
+  const discardTitle = tc('discard_title');
+  const discardBody = tc('discard_body');
+  const discardConfirmLabel = tc('discard_confirm');
+  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} />
+
+      <Stack sx={{ gap: 1 }}>
+        <AccountRow icon="account" label={t('row_personal')} onClick={() => setPersonalSheetOpen(true)} />
+        <EmergencyContactCard
+          complete={emergencyComplete}
+          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>
 
-      <TextField
-        select
-        label={t('language')}
-        value={language}
-        onChange={(e) => setLanguage(e.target.value)}
-        sx={{ maxWidth: 220 }}
+      {/* Renders nothing for a single-role session — see ActorSwitcher's own doc. */}
+      <ActorSwitcher target="nurse" />
+
+      <Stack sx={{ gap: 1 }}>
+        <Divider sx={{ my: 0.5 }} />
+        <AccountRow icon="logout" label={t('sign_out')} onClick={() => setSignOutOpen(true)} tone="error" />
+      </Stack>
+
+      {/* اطلاعات شخصی */}
+      <FormDialogShell
+        open={personalSheetOpen}
+        title={t('row_personal')}
+        dirty={personalDirty}
+        onClose={() => setPersonalSheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
       >
-        <MenuItem value="fa">{t('language_fa')}</MenuItem>
-        <MenuItem value="en">{t('language_en')}</MenuItem>
-      </TextField>
+        <Stack sx={{ gap: 2.5 }}>
+          <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>
 
-      <Divider />
-
-      <Box>
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-          {t('emergency_section')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('emergency_hint')}
-        </Typography>
-      </Box>
-
-      <TextField
-        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={(value) => {
-          setEmergencyPhone(value);
-          if (phoneError) setPhoneError(false);
-        }}
-        error={phoneError}
-        helperText={phoneError ? t('emergency_phone_invalid') : undefined}
-        fullWidth
-      />
-
-      <AppButton
-        color="primary"
-        variant="contained"
-        onClick={handleSave}
-        disabled={upsert.isPending}
-        sx={{ alignSelf: 'flex-start' }}
+      {/* زبان — the row owns the server-stored preference; the actual UI locale switch is phase 2's LocaleSwitcher, reused verbatim. */}
+      <FormDialogShell
+        open={languageSheetOpen}
+        title={t('row_language')}
+        dirty={languageDirty}
+        onClose={() => setLanguageSheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
       >
-        {upsert.isPending ? tc('saving') : t('save')}
-      </AppButton>
-
-      <Divider />
-
-      {/* Address book lives alongside the profile in the customer area; a booking (f7) needs a
-          chosen address, so the entry point is surfaced here on the settings hub. */}
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2, display: 'flex', gap: 2 }}>
-        <AppIcon icon="location" size={28} color="var(--bal-primary)" />
-        <Stack sx={{ gap: 1, flexGrow: 1 }}>
-          <Box>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {ta('manage_title')}
+        <Stack sx={{ gap: 2.5 }}>
+          <Stack sx={{ gap: 1 }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+              {t('app_language')}
             </Typography>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {ta('manage_body')}
+              {t('app_language_hint')}
             </Typography>
-          </Box>
-          <AppButton
-            color="primary"
-            variant="outlined"
-            startIcon="location"
-            to={`/${locale}${ROUTES.ADDRESSES}`}
-            sx={{ alignSelf: 'flex-start' }}
-          >
-            {ta('manage_cta')}
-          </AppButton>
+            <LocaleSwitcher />
+          </Stack>
+          <Divider />
+          <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>
+          </RhfTextField>
+          <SheetActions onCancel={() => setLanguageSheetOpen(false)} onSave={saveLanguage} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
-      </Paper>
+      </FormDialogShell>
+
+      {/* مخاطب اضطراری */}
+      <FormDialogShell
+        open={emergencySheetOpen}
+        title={t('emergency_section')}
+        dirty={emergencyDirty}
+        onClose={() => setEmergencySheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
+      >
+        <Stack sx={{ gap: 2.5 }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('emergency_hint')}
+          </Typography>
+          <RhfTextField<AccountFormValues>
+            name="emergencyName"
+            label={t('emergency_name')}
+            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>
+
+      <ConfirmDialog
+        open={signOutOpen}
+        title={t('sign_out_confirm_title')}
+        body={t('sign_out_confirm_body')}
+        confirmLabel={t('sign_out')}
+        cancelLabel={cancelLabel}
+        confirmColor="error"
+        onClose={() => setSignOutOpen(false)}
+        onConfirm={() => {
+          setSignOutOpen(false);
+          logout.mutate();
+        }}
+      />
+    </Box>
+    </FormProvider>
+  );
+};
+
+const AccountRow: FunctionComponent<{
+  icon: string;
+  label: string;
+  onClick: () => void;
+  tone?: 'default' | 'error';
+}> = ({ icon, label, onClick, tone = 'default' }) => (
+  <Box
+    component="button"
+    type="button"
+    onClick={onClick}
+    sx={{ background: 'none', border: 'none', p: 0, width: '100%', textAlign: 'start', font: 'inherit', cursor: 'pointer' }}
+  >
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        gap: 1.5,
+        p: 1.5,
+        borderRadius: 'var(--bal-radius-md)',
+        color: tone === 'error' ? 'var(--bal-error)' : 'text.primary',
+        '&:hover': { bgcolor: 'action.hover' },
+      }}
+    >
+      <AppIcon icon={icon} size={22} color={tone === 'error' ? 'var(--bal-error)' : 'var(--bal-primary)'} />
+      <Typography variant="body1" sx={{ flexGrow: 1, fontWeight: 500 }}>
+        {label}
+      </Typography>
+      {tone !== 'error' ? <AppIcon icon="forward" size={18} color="var(--bal-text-secondary)" /> : null}
+    </Stack>
+  </Box>
+);
+
+const EmergencyContactCard: FunctionComponent<{
+  complete: boolean;
+  name: string;
+  phone: string;
+  onEdit: () => void;
+}> = ({ complete, name, phone, onEdit }) => {
+  const t = useTranslations('profile');
+  return (
+    <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 }}>
+          <Typography variant="body1" sx={{ fontWeight: 500 }}>
+            {t('emergency_section')}
+          </Typography>
+          {complete ? (
+            <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {name}
+              </Typography>
+              <Typography
+                component="a"
+                href={`tel:${phone}`}
+                dir="ltr"
+                variant="body2"
+                sx={{ color: 'var(--bal-primary)', textDecoration: 'none' }}
+              >
+                {phone}
+              </Typography>
+            </Stack>
+          ) : (
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('emergency_hint')}
+            </Typography>
+          )}
+        </Stack>
+        <AppButton variant="text" color="primary" onClick={onEdit}>
+          {t('edit')}
+        </AppButton>
+      </Stack>
     </Box>
   );
 };
+
+const SheetActions: FunctionComponent<{
+  onCancel: () => void;
+  onSave: () => void;
+  saving: boolean;
+  saveLabel: string;
+  cancelLabel: string;
+}> = ({ onCancel, onSave, saving, saveLabel, cancelLabel }) => {
+  const tc = useTranslations('common');
+  return (
+    <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
+      <AppButton variant="text" onClick={onCancel} disabled={saving}>
+        {cancelLabel}
+      </AppButton>
+      <AppButton color="primary" variant="contained" onClick={onSave} disabled={saving}>
+        {saving ? tc('saving') : saveLabel}
+      </AppButton>
+    </Stack>
+  );
+};
+
+function ProfileSkeleton() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 520 }}>
+      <Stack sx={{ alignItems: 'center', gap: 1 }}>
+        <Skeleton variant="circular" width={56} height={56} />
+        <Skeleton variant="text" width={140} />
+        <Skeleton variant="text" width={100} />
+      </Stack>
+      <Stack sx={{ gap: 1 }}>
+        {[0, 1, 2, 3, 4, 5].map((key) => (
+          <Skeleton key={key} variant="rounded" height={56} />
+        ))}
+      </Stack>
+    </Box>
+  );
+}

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

@@ -2,32 +2,32 @@
 import { Suspense, type FunctionComponent, type ReactNode } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
+import { Box, InputAdornment, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import {
-  Box,
-  InputAdornment,
-  Skeleton,
-  Stack,
-  TextField,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-} from '@mui/material';
-import { AppButton, AppLoading, CategoryTile, ErrorState } from '@/components';
+  AppButton,
+  AppLoading,
+  CategoryTile,
+  ErrorState,
+  GenderToggle,
+  JalaliDateIntentPicker,
+  StickyActionBar,
+} from '@/components';
 import CascadingRegionSelect from '@/components/geography/CascadingRegionSelect';
+import { todayIso } from '@/components/common/JalaliDatePicker';
 import { ROUTES } from '@/constants';
 import { useServiceCategories } from '@/services/catalog';
 import { pickCatalogName } from '@/services/catalog/names';
 import { useNurseSearch } from '@/services/search';
 import { filtersToSearchParams } from '@/services/search/filterParams';
-import type { NurseGender } from '@/services/search/types';
 import { useSearchFilters } from './useSearchFilters';
 
 /**
  * C1 — Search & filter (جستجو و فیلتر): the discovery entry screen. Pick a care category (reusing the
  * f4 catalog grid), a city (reusing the f3 cascading region picker; district optional = whole city),
- * the **prominent same-gender facet**, and an optional Toman price range; a live result count drives the
- * "مشاهده N پرستار" CTA into C2. Availability (date) is intent-only at MVP — it is carried to booking,
- * never used to hard-filter results. `useSearchParams` needs a Suspense boundary under static rendering.
+ * the **prominent same-gender facet** (the shared `GenderToggle`, `allowAny`), a Jalali date-intent chip
+ * strip, and an optional Toman price range; a live result count drives the sticky "مشاهده N پرستار" CTA
+ * into C2. Availability (date) is intent-only at MVP — it is carried to booking, never used to hard-filter
+ * results. `useSearchParams` needs a Suspense boundary under static rendering.
  */
 export default function SearchScreen() {
   return (
@@ -37,32 +37,24 @@ export default function SearchScreen() {
   );
 }
 
-const GENDER_OPTIONS: readonly (NurseGender | 'any')[] = ['female', 'male', 'any'];
-
 function SearchFilterScreen() {
   const t = useTranslations('search');
   const router = useRouter();
   const locale = useLocale();
   const params = useSearchParams();
 
-  const initialCategoryRaw = Number(params.get('category_id'));
-  const initialCategoryId = Number.isInteger(initialCategoryRaw) && initialCategoryRaw > 0 ? initialCategoryRaw : undefined;
-
-  const controller = useSearchFilters(initialCategoryId);
+  const controller = useSearchFilters(params);
   const { data, isFetching } = useNurseSearch(controller.filters);
   const count = data?.total;
 
   const goToResults = () => {
     const query = filtersToSearchParams(controller.filters);
+    if (controller.region.provinceId) query.set('province_id', String(controller.region.provinceId));
     if (controller.dateIntent) query.set('date', controller.dateIntent);
     router.push(`/${locale}${ROUTES.SEARCH_RESULTS}?${query.toString()}`);
   };
 
-  const ctaLabel = !controller.isReady
-    ? t('cta_choose_category_city')
-    : isFetching || count == null
-      ? t('cta_loading')
-      : t('cta_view_results', { count });
+  const zeroResults = controller.isReady && !isFetching && count === 0;
 
   return (
     <Stack sx={{ gap: 3 }}>
@@ -82,31 +74,19 @@ function SearchFilterScreen() {
       </FilterSection>
 
       <FilterSection title={t('section_gender')} hint={t('gender_hint')}>
-        <ToggleButtonGroup
-          exclusive
-          fullWidth
-          color="primary"
+        <GenderToggle
+          allowAny
           value={controller.gender ?? 'any'}
-          onChange={(_event, value: NurseGender | 'any' | null) => {
-            if (value != null) controller.setGender(value === 'any' ? undefined : value);
-          }}
-        >
-          {GENDER_OPTIONS.map((option) => (
-            <ToggleButton key={option} value={option} sx={{ fontWeight: 700 }}>
-              {t(`gender_${option}`)}
-            </ToggleButton>
-          ))}
-        </ToggleButtonGroup>
+          onChange={(value) => controller.setGender(value === 'any' ? undefined : value)}
+          maleLabel={t('gender_male')}
+          femaleLabel={t('gender_female')}
+          anyLabel={t('gender_any')}
+          ariaLabel={t('section_gender')}
+        />
       </FilterSection>
 
       <FilterSection title={t('section_date')} hint={t('date_hint')}>
-        <TextField
-          type="date"
-          fullWidth
-          value={controller.dateIntent}
-          onChange={(event) => controller.setDateIntent(event.target.value)}
-          slotProps={{ inputLabel: { shrink: true } }}
-        />
+        <DateIntentFilter value={controller.dateIntent} onChange={controller.setDateIntent} />
       </FilterSection>
 
       <FilterSection title={t('section_price')} hint={t('price_hint')}>
@@ -126,17 +106,35 @@ function SearchFilterScreen() {
         </Stack>
       </FilterSection>
 
-      <AppButton
-        color="primary"
-        variant="contained"
-        size="large"
-        disabled={!controller.isReady}
-        onClick={goToResults}
-        startIcon="search"
-        sx={{ py: 1.5 }}
-      >
-        {ctaLabel}
-      </AppButton>
+      <StickyActionBar>
+        {zeroResults ? (
+          <Stack sx={{ gap: 0.25 }} data-search-cta="zero">
+            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+              {t('cta_zero_title')}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('cta_zero_hint')}
+            </Typography>
+          </Stack>
+        ) : (
+          <AppButton
+            color="primary"
+            variant="contained"
+            size="large"
+            disabled={!controller.isReady}
+            onClick={goToResults}
+            startIcon="search"
+            sx={{ py: 1.5, width: '100%' }}
+            data-search-cta="view-results"
+          >
+            {!controller.isReady
+              ? t('cta_choose_category_city')
+              : isFetching || count == null
+                ? t('cta_loading')
+                : t('cta_view_results', { count })}
+          </AppButton>
+        )}
+      </StickyActionBar>
     </Stack>
   );
 }
@@ -177,6 +175,29 @@ const PriceField: FunctionComponent<{
   />
 );
 
+/**
+ * The Jalali date-intent picker: a horizontal «امروز»/«فردا» + day-chip strip (the next 7 days) plus a
+ * calendar-icon entry into the full Jalali grid for later dates. Intent-only — the value stays the same
+ * ISO string the flow already carries and never hard-filters results.
+ */
+const DateIntentFilter: FunctionComponent<{ value: string; onChange: (iso: string) => void }> = ({
+  value,
+  onChange,
+}) => {
+  const t = useTranslations('search');
+
+  return (
+    <JalaliDateIntentPicker
+      value={value}
+      onChange={onChange}
+      min={todayIso()}
+      todayLabel={t('date_today')}
+      tomorrowLabel={t('date_tomorrow')}
+      pickOtherLabel={t('date_pick_other')}
+    />
+  );
+};
+
 /** The reused f4 category grid (data-driven from the cached catalog reference data), with selection. */
 const CategorySelect: FunctionComponent<{ selectedId: number | null; onSelect: (id: number) => void }> = ({
   selectedId,
@@ -192,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

@@ -3,22 +3,40 @@ import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { Avatar, Box, Chip, Paper, Skeleton, Stack, Tab, Tabs, Typography } from '@mui/material';
-import { AppButton, AppIcon, EmptyState, ErrorState, RatingInput, ServicePriceRow, TrustBadge } from '@/components';
+import {
+  AppButton,
+  AppIcon,
+  EmptyState,
+  ErrorState,
+  PriceDisplay,
+  RatingInput,
+  ServicePriceRow,
+  StickyActionBar,
+  SurfaceCard,
+  TrustBadge,
+  VerificationPanel,
+} from '@/components';
 import { ROUTES } from '@/constants';
 import { ApiError } from '@/lib/api/errors';
 import { formatNumber, formatShamsiDate } from '@/utils';
 import { useNurseProfile } from '@/services/search';
-import type { NurseProfile } from '@/services/search/types';
+import type { NurseProfile, NurseProfileServiceRow } from '@/services/search/types';
 import { useNurseReviews } from '@/services/reviews';
 import type { ReviewListItem } from '@/services/reviews/types';
+import { useNurseTrustBadge } from '@/services/verification';
 
 type ProfileTab = 'services' | 'reviews';
 
 /**
- * C3 — Nurse profile (پروفایل پرستار): identity + trust badges (✓ تاییدشده, نظام پرستاری), attribute
- * chips, and a **tabbed** body — «خدمات» (the priced services list) and «نظرات» (the f13 published-reviews
- * tab: aggregate rating + count + an infinite list). Only `published` reviews are ever requested/rendered.
- * The primary CTA "درخواست رزرو" hands the selected nurse + variant + `required_caregiver_gender` to f7.
+ * C3 — Nurse profile (پروفایل پرستار): the trust dossier — identity header (completed visits + rating),
+ * a tappable ✓ تاییدشده badge + «نظام پرستاری» chip, the shared `VerificationPanel` (what Balinyaar
+ * verified, fed by the public trust-badge read), attribute chips, and a **tabbed** body — «خدمات» (the
+ * priced services list + an optional latest-review snippet) and «نظرات» (the f13 published-reviews tab:
+ * fractional aggregate rating + count + an infinite list). Only `published` reviews are ever
+ * requested/rendered. The primary "درخواست رزرو" CTA is a **sticky bottom bar** (price-from beside the
+ * button) so it survives the infinite reviews list, and hands the selected nurse + variant +
+ * `required_caregiver_gender` to f7. The profile DTO does not yet serve `nurseGender` (REQ-042) — the
+ * header intentionally omits a gender chip rather than render the client's placeholder stub.
  */
 export default function NurseProfilePage() {
   const t = useTranslations('search');
@@ -54,8 +72,11 @@ export default function NurseProfilePage() {
 
   if (!profile) return null;
 
+  const carriedVariant = query.get('variant_id');
+  const primaryService: NurseProfileServiceRow | undefined =
+    profile.services.find((service) => String(service.variantId) === carriedVariant) ?? profile.services[0];
+
   const requestBooking = () => {
-    const carriedVariant = query.get('variant_id');
     const variantId = carriedVariant ?? String(profile.services[0]?.variantId ?? '');
     const params = new URLSearchParams();
     params.set('nurse_id', String(profile.nurseId));
@@ -76,6 +97,7 @@ export default function NurseProfilePage() {
     <Stack sx={{ gap: 3 }}>
       <ProfileHeader profile={profile} />
       <AttributeChips profile={profile} />
+      <VerificationSection nurseId={profile.nurseId} />
 
       <Tabs value={tab} onChange={(_, next: ProfileTab) => setTab(next)} sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tab value="services" label={t('tab_services')} sx={{ textTransform: 'none', fontWeight: 700 }} />
@@ -84,16 +106,28 @@ export default function NurseProfilePage() {
 
       {tab === 'services' ? <ServicesSection profile={profile} /> : <ReviewsPanel nurseId={profile.nurseId} />}
 
-      <AppButton
-        color="primary"
-        variant="contained"
-        size="large"
-        onClick={requestBooking}
-        startIcon="bookings"
-        sx={{ py: 1.5 }}
-      >
-        {t('request_booking')}
-      </AppButton>
+      <StickyActionBar>
+        <Stack direction="row" sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between' }}>
+          {primaryService ? (
+            <Box>
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {t('price_from')}
+              </Typography>
+              <PriceDisplay price={primaryService.priceIrr} priceUnit={primaryService.priceUnit} align="start" />
+            </Box>
+          ) : null}
+          <AppButton
+            color="primary"
+            variant="contained"
+            size="large"
+            onClick={requestBooking}
+            startIcon="bookings"
+            sx={{ py: 1.5, flexGrow: 1 }}
+          >
+            {t('request_booking')}
+          </AppButton>
+        </Stack>
+      </StickyActionBar>
     </Stack>
   );
 }
@@ -106,6 +140,9 @@ function ProfileHeader({ profile }: { profile: NurseProfile }) {
     minimumFractionDigits: 1,
     maximumFractionDigits: 1,
   });
+  // Reached by direct URL, not gated by the search-index verified-only invariant — unlike the result card
+  // (NurseResultCard), an unverified nurse's profile CAN be opened this way, so the badge must reflect
+  // `profile.isVerified` (already correctly fetched by `getNurseProfile`), never an assumed-verified literal.
 
   return (
     <Stack sx={{ gap: 1.5 }}>
@@ -121,7 +158,7 @@ function ProfileHeader({ profile }: { profile: NurseProfile }) {
             {name}
           </Typography>
           <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
-            <AppIcon icon="star" size={18} color="var(--bal-warning)" />
+            <AppIcon icon="star" size={18} color="var(--bal-rating)" />
             <Typography variant="body2" sx={{ fontWeight: 700 }}>
               {rating}
             </Typography>
@@ -129,11 +166,14 @@ function ProfileHeader({ profile }: { profile: NurseProfile }) {
               {t('reviews_count', { count: profile.totalReviews })}
             </Typography>
           </Stack>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('completed_visits', { count: formatNumber(profile.totalCompletedBookings, locale) })}
+          </Typography>
         </Stack>
       </Stack>
 
       <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
-        <TrustBadge state="verified" />
+        <TrustBadge state={profile.isVerified ? 'verified' : 'unverified'} nurseId={profile.nurseId} />
         {profile.inoMembership ? (
           <Chip
             icon={<AppIcon icon="license" size={16} color="var(--bal-primary)" />}
@@ -152,6 +192,23 @@ function ProfileHeader({ profile }: { profile: NurseProfile }) {
   );
 }
 
+/** "What Balinyaar verified" — the shared `VerificationPanel`, fed by the public trust-badge read. */
+function VerificationSection({ nurseId }: { nurseId: number }) {
+  const t = useTranslations('verification');
+  const { data: badge, isLoading, isError } = useNurseTrustBadge(nurseId);
+
+  return (
+    <Stack sx={{ gap: 1 }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+        {t('explainer_title')}
+      </Typography>
+      <SurfaceCard padding="md">
+        <VerificationPanel badge={badge} isLoading={isLoading} isError={isError} />
+      </SurfaceCard>
+    </Stack>
+  );
+}
+
 function AttributeChips({ profile }: { profile: NurseProfile }) {
   const t = useTranslations('search');
   const locale = useLocale();
@@ -177,7 +234,7 @@ function AttributeChips({ profile }: { profile: NurseProfile }) {
 function ServicesSection({ profile }: { profile: NurseProfile }) {
   const t = useTranslations('search');
   return (
-    <Stack sx={{ gap: 1 }}>
+    <Stack sx={{ gap: 2 }}>
       {profile.services.length === 0 ? (
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t('services_empty')}
@@ -195,10 +252,34 @@ function ServicesSection({ profile }: { profile: NurseProfile }) {
           ))}
         </Box>
       )}
+      {profile.latestReview ? <LatestReviewSnippet review={profile.latestReview} /> : null}
     </Stack>
   );
 }
 
+/** The already-fetched latest-review snippet — a small taste of the dossier's reviews tab. */
+function LatestReviewSnippet({ review }: { review: NonNullable<NurseProfile['latestReview']> }) {
+  const t = useTranslations('search');
+  const tr = useTranslations('reviews');
+  const locale = useLocale();
+  return (
+    <SurfaceCard padding="sm">
+      <Stack sx={{ gap: 0.75 }}>
+        <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 700 }}>
+          {t('latest_review_title')}
+        </Typography>
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+          <RatingInput value={review.rating} readOnly size={16} ariaLabel={tr('rating_label')} />
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {review.authorMasked} · {formatShamsiDate(review.createdAt, locale)}
+          </Typography>
+        </Stack>
+        {review.body ? <Typography variant="body2">{review.body}</Typography> : null}
+      </Stack>
+    </SurfaceCard>
+  );
+}
+
 /**
  * The f13 reviews tab — the aggregate rating + count and an infinite list of **published** reviews. Never
  * requests or renders `pending_moderation`/`hidden`/`rejected` content; the aggregate is the server's
@@ -277,7 +358,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)/search/results/page.tsx

@@ -2,20 +2,38 @@
 import { Suspense, useCallback, useMemo, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
-import { MenuItem, Stack, TextField, Typography } from '@mui/material';
+import { Box, Chip, Stack, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
 import { AppButton, AppLoading, EmptyState, ErrorState, NurseResultCard } from '@/components';
 import { ROUTES } from '@/constants';
+import { useServiceCategories } from '@/services/catalog';
+import { pickCatalogName } from '@/services/catalog/names';
+import { useCities, useDistricts } from '@/services/geography';
+import { pickRegionName } from '@/services/geography/names';
 import { useNurseSearch } from '@/services/search';
 import { searchParamsToFilters } from '@/services/search/filterParams';
 import { SEARCH_PAGE_SIZE } from '@/services/search/constants';
+import { formatIrrToToman } from '@/utils';
 import type { NurseSearchResult } from '@/services/search/types';
 
+/** Single column on mobile; two columns above `md` (~900px) so the extra desktop width goes toward
+ * wider cards instead of one long phone-column list (§3.10 — a full list+detail split is DEFERRED). */
+const RESULTS_GRID_SX: SxProps<Theme> = {
+  display: 'grid',
+  gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
+  gap: 1.5,
+  alignItems: 'start',
+};
+
 /**
  * C2 — Results (نتایج جستجو): the rating-sorted list of **only verified, accepting** nurses for the
  * carried filter set. The filter set lives in the URL (the deep-linkable, back/forward-safe cache key),
  * so returning to a prior filter URL is a cache hit with zero network calls (`useNurseSearch` +
- * `keepPreviousData`). Renders all four states (loading skeletons / empty "relax filters" / error-retry
- * / populated). Tapping a card opens C3, carrying the nurse + variant + gender intent.
+ * `keepPreviousData`). A tappable **filter-recap chip row** (category · region · gender · price) deep-
+ * links back to C1 carrying the *entire* current query string — every filter C1 set, including the
+ * client-only `province_id`/`date` params — so C1 hydrates fully instead of resetting to just the
+ * category. Renders all four states (loading skeletons / empty "relax filters" / error-retry /
+ * populated). Tapping a card opens C3, carrying the nurse + variant + gender intent.
  */
 export default function SearchResultsPage() {
   return (
@@ -37,12 +55,48 @@ function ResultsScreen() {
   // The URL is the source of truth for the filter set; grow only the page size for "load more".
   const filters = useMemo(() => ({ ...searchParamsToFilters(params), pageSize }), [params, pageSize]);
   const dateIntent = params.get('date') ?? undefined;
+  const provinceIdParam = params.get('province_id');
 
   const { data, isLoading, isError, isFetching, refetch } = useNurseSearch(filters);
   const items = data?.items ?? [];
   const total = data?.total ?? 0;
   const hasMore = items.length < total;
 
+  const { data: categoriesData } = useServiceCategories();
+  const categories = useMemo(() => categoriesData?.items ?? [], [categoriesData]);
+  const categoryLabelById = useMemo(() => {
+    const map = new Map<number, string>();
+    categories.forEach((category) => map.set(category.id, pickCatalogName(category, locale)));
+    return map;
+  }, [categories, locale]);
+  const categoryLabel = categoryLabelById.get(filters.serviceCategoryId);
+
+  const { data: cities } = useCities(provinceIdParam ? Number(provinceIdParam) : undefined);
+  const { data: districts } = useDistricts(filters.cityId || undefined);
+  const city = cities?.find((candidate) => candidate.id === filters.cityId);
+  const district = filters.districtId ? districts?.find((candidate) => candidate.id === filters.districtId) : undefined;
+  const regionLabel = city
+    ? `${pickRegionName(city, locale)} · ${district ? pickRegionName(district, locale) : t('whole_city')}`
+    : undefined;
+
+  const genderLabel = t(`gender_${filters.nurseGender ?? 'any'}`);
+
+  const priceLabel = filters.priceMin
+    ? filters.priceMax
+      ? t('price_chip_range', {
+          min: formatIrrToToman(filters.priceMin, locale),
+          max: formatIrrToToman(filters.priceMax, locale),
+        })
+      : t('price_chip_min', { min: formatIrrToToman(filters.priceMin, locale) })
+    : filters.priceMax
+      ? t('price_chip_max', { max: formatIrrToToman(filters.priceMax, locale) })
+      : undefined;
+
+  const backToFilters = useCallback(
+    () => router.push(`/${locale}${ROUTES.SEARCH}?${params.toString()}`),
+    [router, locale, params],
+  );
+
   const openProfile = useCallback(
     (nurse: NurseSearchResult) => {
       const query = new URLSearchParams();
@@ -56,34 +110,49 @@ function ResultsScreen() {
     [router, locale, filters.serviceCategoryId, filters.cityId, filters.nurseGender, dateIntent],
   );
 
-  const backToFilters = () => router.push(`/${locale}${ROUTES.SEARCH}`);
-
   return (
     <Stack sx={{ gap: 2 }}>
-      <Stack direction="row" sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <Stack sx={{ gap: 0.25 }}>
         <Typography variant="h6" component="h1">
           {isLoading ? t('results_loading_title') : t('results_count', { count: total })}
         </Typography>
-        {/* Rating is the only MVP sort; rendered as a control with a single option. Other sorts DEFERRED. */}
-        <TextField select size="small" label={t('sort_label')} value="rating" sx={{ minWidth: 160 }}>
-          <MenuItem value="rating">{t('sort_rating')}</MenuItem>
-        </TextField>
+        {/* Rating is the only MVP sort — a static caption, not a dead-interactive dropdown. Other
+            sorts are DEFERRED until the API grows them. */}
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('sort_static')}
+        </Typography>
+      </Stack>
+
+      <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+        {categoryLabel ? (
+          <Chip label={categoryLabel} onClick={backToFilters} data-recap-chip="category" />
+        ) : null}
+        {regionLabel ? <Chip label={regionLabel} onClick={backToFilters} data-recap-chip="region" /> : null}
+        <Chip label={genderLabel} onClick={backToFilters} data-recap-chip="gender" />
+        {priceLabel ? <Chip label={priceLabel} onClick={backToFilters} data-recap-chip="price" /> : null}
       </Stack>
 
       {isLoading ? (
-        <Stack sx={{ gap: 1.5 }}>
+        <Box sx={RESULTS_GRID_SX}>
           {[0, 1, 2, 3].map((key) => (
             <NurseResultCard.Skeleton key={key} />
           ))}
-        </Stack>
+        </Box>
       ) : isError ? (
         <ErrorState message={t('results_error')} retryLabel={tc('retry')} onRetry={() => refetch()} />
       ) : items.length === 0 ? (
         <RelaxFiltersEmptyState onRelax={backToFilters} />
       ) : (
-        <Stack sx={{ gap: 1.5 }}>
+        // Above ~900px (`md`), a two-column grid uses the extra width instead of one long phone-column
+        // (the doc's "wider cards" option — a full list+detail split is DEFERRED, see the phase doc).
+        <Box sx={RESULTS_GRID_SX}>
           {items.map((nurse) => (
-            <NurseResultCard key={`${nurse.nurseId}-${nurse.variantId}`} nurse={nurse} onSelect={openProfile} />
+            <NurseResultCard
+              key={`${nurse.nurseId}-${nurse.variantId}`}
+              nurse={nurse}
+              serviceLabel={categoryLabelById.get(nurse.serviceCategoryId) ?? t('unnamed_service')}
+              onSelect={openProfile}
+            />
           ))}
           {hasMore ? (
             <AppButton
@@ -91,12 +160,12 @@ function ResultsScreen() {
               color="primary"
               onClick={() => setPageSize((size) => size + SEARCH_PAGE_SIZE)}
               disabled={isFetching}
-              sx={{ alignSelf: 'center' }}
+              sx={{ alignSelf: 'center', gridColumn: '1 / -1' }}
             >
               {t('load_more')}
             </AppButton>
           ) : null}
-        </Stack>
+        </Box>
       )}
     </Stack>
   );
@@ -118,7 +187,7 @@ function RelaxFiltersEmptyState({ onRelax }: { onRelax: () => void }) {
             {t('empty_suggest_district')}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('empty_suggest_city')}
+            {t('empty_suggest_date')}
           </Typography>
         </Stack>
       }

client/src/app/[locale]/(private-routes)/(customer)/search/useSearchFilters.ts

@@ -1,11 +1,16 @@
 import { useMemo, useState } from 'react';
 import { toEnglishDigits, tomanToRial } from '@/utils';
+import { rialToToman } from '@/utils/money';
 import { useDebouncedValue } from '@/services/search';
 import { SEARCH_FILTER_DEBOUNCE_MS, SEARCH_PAGE_SIZE } from '@/services/search/constants';
+import { parsePositiveInt, searchParamsToFilters } from '@/services/search/filterParams';
 import type { NurseGender, NurseSearchFilters } from '@/services/search/types';
 import type { CascadingRegionValue } from '@/components/geography/CascadingRegionSelect';
 
-const EMPTY_REGION: CascadingRegionValue = { provinceId: null, cityId: null, districtId: null };
+/** Minimal read surface shared by `URLSearchParams` and Next's `ReadonlyURLSearchParams`. */
+interface ParamReader {
+  get(name: string): string | null;
+}
 
 /** Toman input → IRR-Rial digit-string at the field boundary; undefined for blank/invalid input. */
 function tomanInputToIrr(toman: string): string | undefined {
@@ -14,20 +19,41 @@ function tomanInputToIrr(toman: string): string | undefined {
   return tomanToRial(digits);
 }
 
+/** IRR digit-string (or undefined) → the whole-Toman string the price fields display. */
+function irrToTomanInput(irr: string | undefined): string {
+  return irr ? String(rialToToman(irr)) : '';
+}
+
 /**
  * The C1 filter controller — fast-changing UI state kept **colocated** (not in a high context provider,
  * phase §5). Holds the category, cascading region, same-gender facet, and Toman price inputs, and
  * derives the canonical `NurseSearchFilters` that becomes the live-count query key and the C2 URL. The
  * price inputs are **debounced** so typing doesn't fan out one search per keystroke before the value
  * joins the query key. `districtId = null` (whole city) is carried as an omitted filter, never a bogus id.
+ *
+ * `params` seeds the **initial** state only (a lazy `useState` read) — either a bare `?category_id=`
+ * (the Home tile handoff) or a full filter set carried back from a C2 recap chip (`searchParamsToFilters`
+ * reads every field C2's URL carries). `province_id` is a client-only convenience param (not part of
+ * `NurseSearchFilters`/the search query key) so `CascadingRegionSelect` can prefill the city dropdown
+ * without a server round trip; `goToResults` re-carries it so the round trip back to C1 keeps working.
  */
-export function useSearchFilters(initialCategoryId?: number) {
-  const [categoryId, setCategoryId] = useState<number | null>(initialCategoryId ?? null);
-  const [region, setRegion] = useState<CascadingRegionValue>(EMPTY_REGION);
-  const [gender, setGender] = useState<NurseGender | undefined>(undefined);
-  const [priceMinToman, setPriceMinToman] = useState('');
-  const [priceMaxToman, setPriceMaxToman] = useState('');
-  const [dateIntent, setDateIntent] = useState('');
+export function useSearchFilters(params: ParamReader) {
+  const [categoryId, setCategoryId] = useState<number | null>(() => {
+    const raw = searchParamsToFilters(params).serviceCategoryId;
+    return raw > 0 ? raw : null;
+  });
+  const [region, setRegion] = useState<CascadingRegionValue>(() => {
+    const initial = searchParamsToFilters(params);
+    return {
+      provinceId: parsePositiveInt(params.get('province_id')) ?? null,
+      cityId: initial.cityId > 0 ? initial.cityId : null,
+      districtId: initial.districtId ?? null,
+    };
+  });
+  const [gender, setGender] = useState<NurseGender | undefined>(() => searchParamsToFilters(params).nurseGender);
+  const [priceMinToman, setPriceMinToman] = useState(() => irrToTomanInput(searchParamsToFilters(params).priceMin));
+  const [priceMaxToman, setPriceMaxToman] = useState(() => irrToTomanInput(searchParamsToFilters(params).priceMax));
+  const [dateIntent, setDateIntent] = useState(() => params.get('date') ?? '');
 
   const debouncedMin = useDebouncedValue(priceMinToman, SEARCH_FILTER_DEBOUNCE_MS);
   const debouncedMax = useDebouncedValue(priceMaxToman, SEARCH_FILTER_DEBOUNCE_MS);

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

@@ -8,12 +8,12 @@ import { useWalletInstallments } from '@/services/bnpl';
 import type { WalletInstallmentPlan } from '@/services/bnpl/types';
 
 /**
- * D5 · پیگیری اقساط — the Wallet view of active installment plans. It reads `useWalletInstallments` and
- * renders **provider-reported** status: an outstanding-balance card (terracotta), the next-installment
- * date + a provider hand-off «پرداخت زودهنگام» (early-pay is a *provider* action, never a Balinyaar
- * transaction), the per-installment due list with status chips, and the ownership note (Balinyaar displays,
- * it does not manage, this schedule). Self-contained under the Wallet route so f12 nurse-earnings content
- * can land beside it later.
+ * D5 · پیگیری اقساط — the Wallet «اقساط» section (active installment plans). It reads
+ * `useWalletInstallments` and renders **provider-reported** status: an outstanding-balance card
+ * (terracotta), the next-installment date + a provider hand-off «پرداخت زودهنگام» (early-pay is a
+ * *provider* action, never a Balinyaar transaction), the per-installment due list with status chips, and
+ * the ownership note (Balinyaar displays, it does not manage, this schedule). Section body only — the
+ * page-level heading + tab strip live in `WalletScreen`.
  */
 const WalletInstallments: FunctionComponent = () => {
   const t = useTranslations('bnpl');
@@ -21,11 +21,7 @@ const WalletInstallments: FunctionComponent = () => {
   const { data: plans, isLoading, isError, refetch } = useWalletInstallments();
 
   return (
-    <Stack sx={{ gap: 2, maxWidth: 560, mx: 'auto', width: '100%' }}>
-      <Typography variant="h6" component="h1">
-        {t('wallet_title')}
-      </Typography>
-
+    <Stack sx={{ gap: 2, width: '100%' }}>
       {isLoading ? (
         <Stack sx={{ gap: 1.5 }}>
           <Skeleton variant="rounded" height={128} />
@@ -33,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 }}>
@@ -75,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)/(customer)/wallet/WalletPaymentHistory.tsx

@@ -0,0 +1,62 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Skeleton, Stack, Typography } from '@mui/material';
+import { AppLink, EmptyState, ErrorState, Money, PaymentStatusBadge, SurfaceCard } from '@/components';
+import { ROUTES } from '@/constants';
+import { formatShamsiDateTime } from '@/utils';
+import { useWalletHistoryRows } from './useWalletHistoryRows';
+
+/**
+ * The wallet «پرداخت‌ها» section — every card + BNPL payment (down-payment) the customer made, newest
+ * first, with a deep-link to the booking. For a card-paying customer (the default path) this is what
+ * finally fills the previously permanently-empty Wallet tab.
+ */
+const WalletPaymentHistory: FunctionComponent = () => {
+  const t = useTranslations('bnpl');
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  const { rows, isLoading, bothErrored, refetch } = useWalletHistoryRows();
+
+  if (isLoading) {
+    return (
+      <Stack sx={{ gap: 1.5 }}>
+        <Skeleton variant="rounded" height={72} />
+        <Skeleton variant="rounded" height={72} />
+      </Stack>
+    );
+  }
+  if (bothErrored) {
+    return <ErrorState message={t('wallet_error_body')} retryLabel={tc('retry')} onRetry={refetch} />;
+  }
+  if (rows.length === 0) {
+    return <EmptyState icon="payment" title={t('history_empty_title')} body={t('history_empty_body')} />;
+  }
+
+  return (
+    <Stack sx={{ gap: 1.5 }}>
+      {rows.map((row) => (
+        <SurfaceCard key={row.key} padding="sm">
+          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
+            <Stack sx={{ gap: 0.25 }}>
+              <Money amountIrr={row.amountIrr} tone="emphasis" size="sm" sx={{ fontWeight: 700 }} />
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {formatShamsiDateTime(row.createdAt, locale)}
+              </Typography>
+            </Stack>
+            <Stack sx={{ alignItems: 'flex-end', gap: 0.5 }}>
+              <PaymentStatusBadge status={row.status} />
+              {row.bookingId != null ? (
+                <AppLink to={`/${locale}${ROUTES.BOOKINGS}/${row.bookingId}`} sx={{ fontSize: '0.75rem' }}>
+                  {t('history_view_booking')}
+                </AppLink>
+              ) : null}
+            </Stack>
+          </Stack>
+        </SurfaceCard>
+      ))}
+    </Stack>
+  );
+};
+
+export default WalletPaymentHistory;

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

@@ -0,0 +1,66 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, EmptyState, ErrorState, Money, SurfaceCard } from '@/components';
+import { bookingInvoicePath } from '@/constants';
+import { formatShamsiDateTime } from '@/utils';
+import { useWalletHistoryRows } from './useWalletHistoryRows';
+
+/**
+ * The wallet «رسیدها» section — no receipts endpoint exists; every succeeded, booking-linked payment
+ * (card or BNPL down-payment) derives its invoice deep-link client-side (a UI join over the same rows the
+ * «پرداخت‌ها» tab renders, filtered to `succeeded` + a known `bookingId` — no money math).
+ */
+const WalletReceipts: FunctionComponent = () => {
+  const t = useTranslations('bnpl');
+  const tp = useTranslations('payment');
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  const { rows, isLoading, bothErrored, refetch } = useWalletHistoryRows();
+
+  if (isLoading) {
+    return (
+      <Stack sx={{ gap: 1.5 }}>
+        <Skeleton variant="rounded" height={72} />
+      </Stack>
+    );
+  }
+  if (bothErrored) {
+    return <ErrorState message={t('wallet_error_body')} retryLabel={tc('retry')} onRetry={refetch} />;
+  }
+
+  const receipts = rows.filter((row) => row.status === 'succeeded' && row.bookingId != null);
+
+  if (receipts.length === 0) {
+    return <EmptyState icon="document" title={t('receipts_empty_title')} body={t('receipts_empty_body')} />;
+  }
+
+  return (
+    <Stack sx={{ gap: 1.5 }}>
+      {receipts.map((row) => (
+        <SurfaceCard key={row.key} padding="sm">
+          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
+            <Stack sx={{ gap: 0.25 }}>
+              <Money amountIrr={row.amountIrr} tone="emphasis" size="sm" sx={{ fontWeight: 700 }} />
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {formatShamsiDateTime(row.createdAt, locale)}
+              </Typography>
+            </Stack>
+            <AppButton
+              variant="outlined"
+              color="primary"
+              size="small"
+              startIcon="document"
+              to={`/${locale}${bookingInvoicePath(row.bookingId as number)}`}
+            >
+              {tp('view_invoice_cta')}
+            </AppButton>
+          </Stack>
+        </SurfaceCard>
+      ))}
+    </Stack>
+  );
+};
+
+export default WalletReceipts;

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

@@ -0,0 +1,54 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Skeleton, Stack, Typography } from '@mui/material';
+import { AppLink, EmptyState, ErrorState } from '@/components';
+import RefundStatusCard from '@/components/RefundStatusCard';
+import { bookingRefundStatusPath } from '@/constants';
+import { useMyRefunds } from '@/services/refunds';
+
+/**
+ * The wallet «استردادها» section — every refund the customer owns (REQ-048), each rendered via the shared
+ * `RefundStatusCard` (step timeline + amount + per-channel ETA) with a link back to its booking.
+ */
+const WalletRefunds: FunctionComponent = () => {
+  const t = useTranslations('refunds');
+  const tw = useTranslations('bnpl');
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  const { data: refunds, isLoading, isError, refetch } = useMyRefunds();
+
+  if (isLoading) {
+    return (
+      <Stack sx={{ gap: 1.5 }}>
+        <Skeleton variant="rounded" height={160} />
+      </Stack>
+    );
+  }
+  if (isError) {
+    return <ErrorState message={tw('wallet_error_body')} retryLabel={tc('retry')} onRetry={() => refetch()} />;
+  }
+  if (!refunds || refunds.length === 0) {
+    return <EmptyState icon="refunds" title={t('wallet_empty_title')} body={t('wallet_empty_body')} />;
+  }
+
+  return (
+    <Stack sx={{ gap: 3 }}>
+      {refunds.map((refund) => (
+        <Stack key={refund.id} sx={{ gap: 1 }}>
+          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('wallet_booking_label', { id: refund.bookingId })}
+            </Typography>
+            <AppLink to={`/${locale}${bookingRefundStatusPath(refund.bookingId)}`} sx={{ fontSize: '0.75rem' }}>
+              {t('view_refund_status')}
+            </AppLink>
+          </Stack>
+          <RefundStatusCard refund={refund} />
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+export default WalletRefunds;

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

@@ -0,0 +1,57 @@
+'use client';
+import { FunctionComponent, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Box, Stack, Tab, Tabs } from '@mui/material';
+import { AppIcon, PageHeader } from '@/components';
+import WalletPaymentHistory from './WalletPaymentHistory';
+import WalletInstallments from './WalletInstallments';
+import WalletRefunds from './WalletRefunds';
+import WalletReceipts from './WalletReceipts';
+
+type WalletTab = 'payments' | 'installments' | 'refunds' | 'receipts';
+
+/**
+ * /wallet — the customer money hub (ui-phase-6). Four sections replace the old installments-only shell so
+ * a card-paying customer (the default path) finally sees something other than a permanently empty tab:
+ * «پرداخت‌ها» (payment history), «اقساط» (the unchanged f11 D5 installment tracker), «استردادها» (refunds,
+ * REQ-048), «رسیدها» (client-derived invoice links). All four read at the shell's shared `CONTENT_MAX_WIDTH`
+ * — no local width override.
+ */
+const WalletScreen: FunctionComponent = () => {
+  const t = useTranslations('bnpl');
+  const [tab, setTab] = useState<WalletTab>('payments');
+
+  return (
+    <Stack sx={{ gap: 2 }}>
+      <PageHeader title={t('wallet_hub_title')} />
+
+      <Tabs
+        value={tab}
+        onChange={(_event, value: WalletTab) => setTab(value)}
+        variant="scrollable"
+        scrollButtons="auto"
+        allowScrollButtonsMobile
+        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      >
+        <Tab value="payments" label={t('tab_payments')} icon={<AppIcon icon="payment" size={18} />} iconPosition="start" />
+        <Tab
+          value="installments"
+          label={t('tab_installments')}
+          icon={<AppIcon icon="installments" size={18} />}
+          iconPosition="start"
+        />
+        <Tab value="refunds" label={t('tab_refunds')} icon={<AppIcon icon="refunds" size={18} />} iconPosition="start" />
+        <Tab value="receipts" label={t('tab_receipts')} icon={<AppIcon icon="document" size={18} />} iconPosition="start" />
+      </Tabs>
+
+      <Box role="tabpanel">
+        {tab === 'payments' ? <WalletPaymentHistory /> : null}
+        {tab === 'installments' ? <WalletInstallments /> : null}
+        {tab === 'refunds' ? <WalletRefunds /> : null}
+        {tab === 'receipts' ? <WalletReceipts /> : null}
+      </Box>
+    </Stack>
+  );
+};
+
+export default WalletScreen;

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

@@ -1,10 +1,9 @@
-import WalletInstallments from './WalletInstallments';
+import WalletScreen from './WalletScreen';
 
 /**
- * /wallet — the customer Wallet tab. Today it hosts the f11 D5 installment-status section (provider-reported,
- * self-contained so the f12 nurse-earnings Wallet content can land beside it later). The section is a client
- * component (TanStack Query); this page is the thin route shell.
+ * /wallet — the customer money hub (ui-phase-6): پرداخت‌ها / اقساط / استردادها / رسیدها. Thin route shell;
+ * the tabbed body is a client component (TanStack Query).
  */
 export default function WalletPage() {
-  return <WalletInstallments />;
+  return <WalletScreen />;
 }

client/src/app/[locale]/(private-routes)/(customer)/wallet/useWalletHistoryRows.ts

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { usePaymentHistory } from '@/services/payment';
+import { useWalletInstallments } from '@/services/bnpl';
+import type { PaymentTransactionStatus } from '@/services/payment/types';
+
+export interface WalletHistoryRow {
+  key: string;
+  amountIrr: string;
+  createdAt: string;
+  status: PaymentTransactionStatus;
+  bookingId: number | null;
+}
+
+/**
+ * Merges the two independent seams a wallet history/receipt row can come from — card transactions
+ * (`services/payment`, REQ-047) and each settled BNPL plan's own down-payment leg (`services/bnpl`) — into
+ * one newest-first list. Shared by the wallet «پرداخت‌ها» and «رسیدها» tabs so the merge logic lives once.
+ * Degrades gracefully: either source failing alone still renders the other's rows.
+ */
+export function useWalletHistoryRows() {
+  const paymentHistory = usePaymentHistory();
+  const walletInstallments = useWalletInstallments();
+
+  const rows = useMemo<WalletHistoryRow[]>(() => {
+    const cardRows: WalletHistoryRow[] = (paymentHistory.data ?? []).map((row) => ({
+      key: `card-${row.transactionId}`,
+      amountIrr: row.amountIrr,
+      createdAt: row.createdAt,
+      status: row.status,
+      bookingId: row.bookingId,
+    }));
+    const bnplRows: WalletHistoryRow[] = (walletInstallments.data ?? []).map((plan) => {
+      const downPayment = plan.installments.find((i) => i.kind === 'down_payment');
+      return {
+        key: `bnpl-${plan.bnplTransactionId}`,
+        amountIrr: downPayment?.amountIrr ?? '0',
+        createdAt: plan.createdAt,
+        status: 'succeeded' as const,
+        bookingId: plan.bookingId,
+      };
+    });
+    return [...cardRows, ...bnplRows].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  }, [paymentHistory.data, walletInstallments.data]);
+
+  return {
+    rows,
+    isLoading: paymentHistory.isLoading || walletInstallments.isLoading,
+    bothErrored: paymentHistory.isError && walletInstallments.isError,
+    refetch: () => {
+      paymentHistory.refetch();
+      walletInstallments.refetch();
+    },
+  };
+}

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

@@ -0,0 +1,19 @@
+'use client';
+import type { ReactNode } from 'react';
+import { FocusedLayout } from '@/layout';
+import { RoleGuard } from '@/components/auth';
+import { APP_ROLES } from '@/constants';
+
+/*
+ * Customer-focused route group — a chrome-free counterpart to `(customer)` for flows the user
+ * should not tab away from mid-task (today only first-run onboarding, ui-phase-3 §3.5). A route
+ * group adds chrome without adding a URL segment, so `/onboarding` is unchanged. RoleGuard still
+ * gates it on a resolved customer role, identically to the full `(customer)` shell.
+ */
+export default function CustomerFocusedRouteLayout({ children }: { children: ReactNode }) {
+  return (
+    <RoleGuard expected={APP_ROLES.CUSTOMER}>
+      <FocusedLayout>{children}</FocusedLayout>
+    </RoleGuard>
+  );
+}

client/src/app/[locale]/(private-routes)/(customer-focused)/onboarding/OnboardingScreen.tsx

@@ -4,7 +4,8 @@ import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import { Box, Stack, Typography } from '@mui/material';
-import { AppButton, PatientForm, RelationSelect, StepperHeader } from '@/components';
+import { AppButton, AppIcon, PatientForm, RelationSelect, StepperHeader } from '@/components';
+import BrandMark from '@/components/auth/BrandMark';
 import { ROUTES } from '@/constants';
 import { useCreatePatient } from '@/services/patients';
 import { RELATION_CODES } from '@/services/patients/constants';
@@ -12,12 +13,26 @@ import type { CreatePatientInput, Relation } from '@/services/patients/types';
 
 const ONBOARDING_MAX_WIDTH = 520;
 
+// Distinct per-option glyph (the prior defect: all four relations shared the generic 'account'
+// icon) — 'elderly' fits a parent, 'favorite' a spouse, 'infant' a child, 'account' one's self.
+const RELATION_ICONS: Record<string, string> = {
+  parent: 'elderly',
+  spouse: 'favorite',
+  child: 'infant',
+  self: 'account',
+};
+
+type Phase = 'welcome' | 'relation' | 'patient';
+
 /**
- * A3 → A4 onboarding wizard: pick who care is for, then register the first patient. The
- * chosen relation pre-shapes the patient (it is hidden on the A4 form since it's already
- * chosen here). On save it creates the patient and lands on Home (A5).
+ * The chrome-free A3 → A4 first-run journey: a one-screen welcome moment, then pick who care is
+ * for, then register the first patient. `FocusedLayout` (the route group above this) strips the
+ * bottom nav/bell so there's nothing to tab away to mid-setup. The welcome screen doesn't count
+ * as a stepper step; relation → patient does. The chosen relation pre-shapes the patient (hidden
+ * on the A4 form since it's already chosen here). On save it creates the patient and lands on
+ * Home (A5).
  */
-export default function OnboardingPage() {
+export default function OnboardingScreen() {
   const t = useTranslations('onboarding');
   const tc = useTranslations('common');
   const router = useRouter();
@@ -25,10 +40,14 @@ export default function OnboardingPage() {
   const { enqueueSnackbar } = useSnackbar();
   const createPatient = useCreatePatient();
 
-  const [step, setStep] = useState(0);
+  const [phase, setPhase] = useState<Phase>('welcome');
   const [relation, setRelation] = useState<Relation | null>(null);
 
-  const relationOptions = RELATION_CODES.map((code) => ({ code, label: t(`relation_${code}`), icon: 'account' }));
+  const relationOptions = RELATION_CODES.map((code) => ({
+    code,
+    label: t(`relation_${code}`),
+    icon: RELATION_ICONS[code] ?? 'account',
+  }));
 
   const handleCreate = (input: CreatePatientInput) => {
     createPatient.mutate(
@@ -42,11 +61,32 @@ export default function OnboardingPage() {
     );
   };
 
+  if (phase === 'welcome') {
+    return (
+      <Stack sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', gap: 3, textAlign: 'center' }}>
+        <BrandMark />
+        <Stack sx={{ gap: 1, maxWidth: ONBOARDING_MAX_WIDTH }}>
+          <Typography variant="h5" component="h1">
+            {t('welcome_title')}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('welcome_subtitle')}
+          </Typography>
+        </Stack>
+        <AppButton color="primary" variant="contained" onClick={() => setPhase('relation')}>
+          {t('welcome_cta')}
+        </AppButton>
+      </Stack>
+    );
+  }
+
+  const activeStep = phase === 'relation' ? 0 : 1;
+
   return (
     <Box sx={{ maxWidth: ONBOARDING_MAX_WIDTH, mx: 'auto', display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <StepperHeader steps={[t('step_relation'), t('step_patient')]} activeStep={step} />
+      <StepperHeader steps={[t('step_relation'), t('step_patient')]} activeStep={activeStep} />
 
-      {step === 0 ? (
+      {phase === 'relation' ? (
         <Stack sx={{ gap: 2 }}>
           <Stack sx={{ gap: 0.5 }}>
             <Typography variant="h6" component="h1">
@@ -66,7 +106,8 @@ export default function OnboardingPage() {
             variant="contained"
             fullWidth
             disabled={!relation}
-            onClick={() => setStep(1)}
+            onClick={() => setPhase('patient')}
+            endIcon={<AppIcon icon="forward" size={18} aria-hidden="true" />}
           >
             {t('continue')}
           </AppButton>
@@ -86,7 +127,7 @@ export default function OnboardingPage() {
             submitLabel={t('save_continue')}
             submitting={createPatient.isPending}
             onSubmit={handleCreate}
-            onCancel={() => setStep(0)}
+            onCancel={() => setPhase('relation')}
             cancelLabel={tc('back')}
           />
         </Stack>

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

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

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,64 @@
 '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('catalog'), subtitle: th('admin_catalog_sub'), path: ROUTES.ADMIN_CATALOG, icon: 'category', enabled: caps.canManageCatalog },
+    { 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/alerts/page.tsx

@@ -1,15 +1,21 @@
 'use client';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import { Box, MenuItem, Skeleton, Stack, TextField } from '@mui/material';
+import { AppLoading } from '@/components';
 import { AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, ConfirmDialog, SupportAlertCard } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
 import { useAuth } from '@/context/auth';
 import { ADMIN_PAGE_SIZE } from '@/services/admin/constants';
 import type { SupportAlert, SupportAlertStatus, SupportAlertType } from '@/services/admin/types';
 import { useSupportAlerts, useAssignSupportAlert, useResolveSupportAlert } from '@/services/admin';
 
+interface AlertFilters {
+  status?: SupportAlertStatus;
+  type?: SupportAlertType;
+}
+
 const STATUSES: readonly SupportAlertStatus[] = ['open', 'assigned', 'resolved'];
 const TYPES: readonly SupportAlertType[] = [
   'low_rating',
@@ -23,32 +29,60 @@ const TYPES: readonly SupportAlertType[] = [
   'emergency',
 ];
 
+const EMPTY: AlertFilters = { status: 'open' };
+
+function parseFilters(params: URLSearchParams): AlertFilters {
+  const status = params.get('status') as SupportAlertStatus | null;
+  const type = params.get('type') as SupportAlertType | null;
+  return {
+    status: status && STATUSES.includes(status) ? status : undefined,
+    type: type && TYPES.includes(type) ? type : undefined,
+  };
+}
+
+function serializeFilters(filters: AlertFilters): Record<string, string> {
+  const r: Record<string, string> = {};
+  if (filters.status) r.status = filters.status;
+  if (filters.type) r.type = filters.type;
+  return r;
+}
+
 /**
  * Support-alert triage board (f15) — the **internal-only** worklist over `support_alerts`. Filter by
  * type/status; assign to self or resolve with a note. This data appears in **no** customer/nurse/partner
  * surface (phase §5). Server enforces the role scope; `canManageAlerts` only hides the controls.
  */
 export default function AdminAlertsPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminAlertsPageInner />
+    </Suspense>
+  );
+}
+
+function AdminAlertsPageInner() {
   const t = useTranslations('admin');
   const caps = useAdminCapabilities();
   const { enqueueSnackbar } = useSnackbar();
   const [authState] = useAuth();
-  const meId = authState.currentUser?.id ?? 1;
+  const meId = authState.currentUser?.id;
 
-  const [status, setStatus] = useState<SupportAlertStatus | ''>('open');
-  const [type, setType] = useState<SupportAlertType | ''>('');
-  const [page, setPage] = useState(1);
+  const listState = useAdminListState<AlertFilters>({ parse: parseFilters, serialize: serializeFilters, empty: EMPTY });
+  const { applied: filters, page } = listState;
   const [resolving, setResolving] = useState<SupportAlert | null>(null);
 
-  const filters = { status: status || undefined, type: type || undefined };
   const alerts = useSupportAlerts(filters, page);
   const assign = useAssignSupportAlert();
   const resolve = useResolveSupportAlert();
 
   const items = alerts.data?.items ?? [];
-  const pageCount = Math.max(1, Math.ceil((alerts.data?.total ?? 0) / ADMIN_PAGE_SIZE));
+  const total = alerts.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / ADMIN_PAGE_SIZE));
 
+  // Assign-to-self MUST NEVER default to a guessed user (the fixed defect: `?? 1`) — the button is simply
+  // disabled with a "loading your account" tooltip until the real id has hydrated.
   const onAssignSelf = (alert: SupportAlert) => {
+    if (meId == null) return;
     assign.mutate(
       { alertId: alert.id, ownerUserId: meId },
       { onSuccess: () => enqueueSnackbar(t('alert_assigned'), { variant: 'success' }) },
@@ -68,6 +102,11 @@ export default function AdminAlertsPage() {
     );
   };
 
+  const setStatusFilter = (value: SupportAlertStatus | '') =>
+    listState.applyFilters({ ...filters, status: value || undefined });
+  const setTypeFilter = (value: SupportAlertType | '') =>
+    listState.applyFilters({ ...filters, type: value || undefined });
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
       <AdminPageHeader
@@ -79,11 +118,8 @@ export default function AdminAlertsPage() {
               select
               size="small"
               label={t('alert_col_status')}
-              value={status}
-              onChange={(e) => {
-                setStatus(e.target.value as SupportAlertStatus | '');
-                setPage(1);
-              }}
+              value={filters.status ?? ''}
+              onChange={(e) => setStatusFilter(e.target.value as SupportAlertStatus | '')}
               sx={{ minWidth: 140 }}
             >
               <MenuItem value="">{t('filter_all')}</MenuItem>
@@ -97,11 +133,8 @@ export default function AdminAlertsPage() {
               select
               size="small"
               label={t('alert_col_type')}
-              value={type}
-              onChange={(e) => {
-                setType(e.target.value as SupportAlertType | '');
-                setPage(1);
-              }}
+              value={filters.type ?? ''}
+              onChange={(e) => setTypeFilter(e.target.value as SupportAlertType | '')}
               sx={{ minWidth: 180 }}
             >
               <MenuItem value="">{t('filter_all')}</MenuItem>
@@ -130,6 +163,8 @@ export default function AdminAlertsPage() {
               canAct={caps.canManageAlerts}
               onAssignSelf={onAssignSelf}
               onResolve={setResolving}
+              assignSelfDisabled={meId == null}
+              assignSelfDisabledTitle={t('assign_me_loading')}
             />
           ))}
         </Stack>
@@ -138,11 +173,11 @@ export default function AdminAlertsPage() {
       <AdminPager
         page={page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => listState.goToPage(Math.max(1, page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
 
       <ConfirmDialog

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

@@ -1,15 +1,35 @@
 'use client';
-import { useState } from 'react';
+import { Suspense, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import { Box, Skeleton, Stack, TextField } from '@mui/material';
-import { AppButton } from '@/components';
+import { AppButton, AppLoading, JalaliDateField } from '@/components';
 import { AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, AuditLogRow } from '@/components/admin';
+import { actorLabelFrom } from '@/components/admin/AuditLogRow';
+import { useAdminListState } from '@/hooks';
 import { AUDIT_PAGE_SIZE } from '@/services/admin/constants';
 import type { AuditFilters } from '@/services/admin/types';
-import { useAuditLogs } from '@/services/admin';
+import { useAuditLogs, useUserLookup } from '@/services/admin';
 
 const EMPTY: AuditFilters = {};
 
+function parseFilters(params: URLSearchParams): AuditFilters {
+  return {
+    entityType: params.get('entityType') ?? undefined,
+    entityId: params.get('entityId') ?? undefined,
+    from: params.get('from') ?? undefined,
+    to: params.get('to') ?? undefined,
+  };
+}
+
+function serializeFilters(filters: AuditFilters): Record<string, string> {
+  const r: Record<string, string> = {};
+  if (filters.entityType) r.entityType = filters.entityType;
+  if (filters.entityId) r.entityId = filters.entityId;
+  if (filters.from) r.from = filters.from;
+  if (filters.to) r.to = filters.to;
+  return r;
+}
+
 /**
  * Append-only audit-log viewer (f15) — a read-only, filtered, paginated table of every admin state change,
  * each row expandable to its `changed_fields` diff. There is **no** edit/delete affordance (phase §5). The
@@ -17,24 +37,33 @@ const EMPTY: AuditFilters = {};
  * page are the cache key, so switching filters/pages never refetches data already held.
  */
 export default function AdminAuditPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminAuditPageInner />
+    </Suspense>
+  );
+}
+
+function AdminAuditPageInner() {
   const t = useTranslations('admin');
-  const [draft, setDraft] = useState<AuditFilters>(EMPTY);
-  const [applied, setApplied] = useState<AuditFilters>(EMPTY);
-  const [page, setPage] = useState(1);
+  const listState = useAdminListState<AuditFilters>({ parse: parseFilters, serialize: serializeFilters, empty: EMPTY });
+  const { draft, setDraft, applied, page } = listState;
 
   const audit = useAuditLogs(applied, page);
   const items = audit.data?.items ?? [];
-  const pageCount = Math.max(1, Math.ceil((audit.data?.total ?? 0) / AUDIT_PAGE_SIZE));
+  const total = audit.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / AUDIT_PAGE_SIZE));
+  const from = items.length === 0 ? 0 : (page - 1) * AUDIT_PAGE_SIZE + 1;
+  const to = (page - 1) * AUDIT_PAGE_SIZE + items.length;
 
-  const apply = () => {
-    setApplied(draft);
-    setPage(1);
-  };
-  const clear = () => {
-    setDraft(EMPTY);
-    setApplied(EMPTY);
-    setPage(1);
-  };
+  // Batch id→name resolve (3.2/3.6) — one request for every actor rendered on this page, never one per row.
+  const actorIds = useMemo(
+    () => [...new Set((audit.data?.items ?? []).map((e) => e.actorUserId).filter((id): id is number => id != null))].sort(
+      (a, b) => a - b,
+    ),
+    [audit.data?.items],
+  );
+  const userLookup = useUserLookup(actorIds);
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
@@ -42,7 +71,7 @@ export default function AdminAuditPage() {
 
       <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"
@@ -60,26 +89,24 @@ export default function AdminAuditPage() {
           onChange={(e) => setDraft((d) => ({ ...d, entityId: e.target.value || undefined }))}
           sx={{ minWidth: 120 }}
         />
-        <TextField
-          size="small"
-          type="date"
+        <JalaliDateField
           label={t('audit_from')}
-          value={draft.from ?? ''}
-          onChange={(e) => setDraft((d) => ({ ...d, from: e.target.value || undefined }))}
-          slotProps={{ inputLabel: { shrink: true } }}
+          value={draft.from ?? null}
+          onChange={(iso) => setDraft((d) => ({ ...d, from: iso }))}
+          max={draft.to}
+          sx={{ minWidth: 160 }}
         />
-        <TextField
-          size="small"
-          type="date"
+        <JalaliDateField
           label={t('audit_to')}
-          value={draft.to ?? ''}
-          onChange={(e) => setDraft((d) => ({ ...d, to: e.target.value || undefined }))}
-          slotProps={{ inputLabel: { shrink: true } }}
+          value={draft.to ?? null}
+          onChange={(iso) => setDraft((d) => ({ ...d, to: iso }))}
+          min={draft.from}
+          sx={{ minWidth: 160 }}
         />
-        <AppButton variant="contained" color="primary" onClick={apply}>
+        <AppButton variant="contained" color="primary" onClick={listState.apply}>
           {t('apply')}
         </AppButton>
-        <AppButton variant="text" color="inherit" onClick={clear}>
+        <AppButton variant="text" color="inherit" onClick={listState.clear}>
           {t('clear')}
         </AppButton>
       </Stack>
@@ -93,19 +120,22 @@ export default function AdminAuditPage() {
       ) : (
         <Stack sx={{ gap: 1 }}>
           {items.map((entry) => (
-            <AuditLogRow key={entry.id} entry={entry} />
+            <AuditLogRow key={entry.id} entry={entry} actorLabel={actorLabelFrom(userLookup.data, entry.actorUserId)} />
           ))}
         </Stack>
       )}
+      {items.length > 0 ? (
+        <Box sx={{ typography: 'caption', color: 'text.secondary' }}>{t('showing_range', { from, to, total })}</Box>
+      ) : null}
 
       <AdminPager
         page={page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => listState.goToPage(Math.max(1, page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
     </Box>
   );

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

@@ -0,0 +1,502 @@
+'use client';
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useSnackbar } from 'notistack';
+import {
+  Box,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  FormControlLabel,
+  Paper,
+  Skeleton,
+  Stack,
+  Switch,
+  Typography,
+} from '@mui/material';
+import { AppButton, PageHeader, RhfControlGroup, RhfTextField, StatusChip } from '@/components';
+import { AdminEmptyState, AdminErrorState } from '@/components/admin';
+import { useAdminCapabilities, useAdminBackToList } from '@/hooks';
+import { ROUTES } from '@/constants';
+import { ADMIN_CATEGORIES_PAGE_SIZE } from '@/services/catalog/constants';
+import type {
+  CreateOptionValueInput,
+  OptionGroupInput,
+  ServiceOptionGroup,
+  ServiceOptionValue,
+  UpdateOptionValueInput,
+} from '@/services/catalog/types';
+import {
+  useAdminCategories,
+  useAdminOptionGroups,
+  useCreateOptionGroup,
+  useCreateOptionValue,
+  useSetCategoryActive,
+  useUpdateOptionGroup,
+  useUpdateOptionValue,
+} from '@/services/catalog';
+import { CategoryFormDialog } from '../page';
+
+/**
+ * A category's pricing-options console (f6 blocker) — the option groups (dimensions) and their values
+ * the nurse builder offers for this category, plus every cross-category group. Option groups have no
+ * active/inactive toggle in the contract (create/edit only); values do, exposed as a switch in the
+ * value edit dialog rather than a hard delete, matching the "reference data, never hard-deleted" rule
+ * that already governs categories and variants.
+ */
+export default function AdminCatalogCategoryPage() {
+  const t = useTranslations('admin');
+  const locale = useLocale();
+  const caps = useAdminCapabilities();
+  const { enqueueSnackbar } = useSnackbar();
+  const goBack = useAdminBackToList(`/${locale}${ROUTES.ADMIN_CATALOG}`);
+
+  const params = useParams<{ categoryId: string }>();
+  const parsed = Number(params?.categoryId);
+  const categoryId = Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+
+  // No single-category admin read exists — categories are few, so the admin list (uncached) doubles
+  // as the detail source, exactly like the public reference-data reads do for the browse side.
+  const categories = useAdminCategories({ page: 1, pageSize: ADMIN_CATEGORIES_PAGE_SIZE });
+  const category = categories.data?.items.find((c) => c.id === categoryId) ?? null;
+
+  const groups = useAdminOptionGroups(categoryId || null);
+  const setActive = useSetCategoryActive();
+
+  const [editingCategory, setEditingCategory] = useState(false);
+  const [groupDialog, setGroupDialog] = useState<ServiceOptionGroup | 'new' | null>(null);
+  const [valueDialog, setValueDialog] = useState<{ groupId: number; value: ServiceOptionValue | 'new' } | null>(null);
+
+  const back = <PageHeader title={t('og_section_title')} onBack={goBack} backLabel={t('back')} />;
+
+  if (categories.isLoading) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        {back}
+        <Skeleton variant="rounded" height={120} />
+        <Skeleton variant="rounded" height={220} />
+      </Box>
+    );
+  }
+
+  if (categories.isError) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        {back}
+        <AdminErrorState message={t('error_generic')} retryLabel={t('retry')} onRetry={() => categories.refetch()} />
+      </Box>
+    );
+  }
+
+  if (!category) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        {back}
+        <AdminEmptyState icon="category" title={t('cat_not_found')} />
+      </Box>
+    );
+  }
+
+  const onToggleActive = () => {
+    setActive.mutate(
+      { id: category.id, isActive: !category.isActive },
+      { onSuccess: () => enqueueSnackbar(t(category.isActive ? 'cat_deactivated' : 'cat_activated'), { variant: 'success' }) },
+    );
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <PageHeader
+        title={category.nameFa}
+        subtitle={category.nameEn}
+        onBack={goBack}
+        backLabel={t('back')}
+        meta={<StatusChip status={category.isActive ? 'active' : 'neutral'} label={t(category.isActive ? 'status_active' : 'status_inactive')} />}
+      />
+
+      {category.descriptionFa || category.descriptionEn ? (
+        <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {category.descriptionFa || category.descriptionEn}
+          </Typography>
+        </Paper>
+      ) : null}
+
+      {caps.canManageCatalog ? (
+        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+          <AppButton variant="outlined" color="inherit" startIcon="edit" onClick={() => setEditingCategory(true)}>
+            {t('cat_edit')}
+          </AppButton>
+          <AppButton
+            variant="outlined"
+            color={category.isActive ? 'error' : 'primary'}
+            onClick={onToggleActive}
+            disabled={setActive.isPending}
+          >
+            {t(category.isActive ? 'cat_deactivate' : 'cat_activate')}
+          </AppButton>
+        </Stack>
+      ) : null}
+
+      <Stack sx={{ gap: 1.5 }}>
+        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 1 }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+            {t('og_section_title')}
+          </Typography>
+          {caps.canManageCatalog ? (
+            <AppButton variant="text" color="primary" startIcon="add" onClick={() => setGroupDialog('new')}>
+              {t('og_add')}
+            </AppButton>
+          ) : null}
+        </Stack>
+
+        {groups.isLoading ? (
+          <Skeleton variant="rounded" height={160} />
+        ) : groups.isError ? (
+          <AdminErrorState message={t('error_generic')} retryLabel={t('retry')} onRetry={() => groups.refetch()} />
+        ) : (groups.data ?? []).length === 0 ? (
+          <AdminEmptyState icon="tune" title={t('og_empty')} />
+        ) : (
+          (groups.data ?? []).map((group) => (
+            <Paper
+              key={group.id}
+              elevation={0}
+              sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
+            >
+              <Stack sx={{ gap: 1.25 }}>
+                <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, flexWrap: 'wrap' }}>
+                  <Box>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+                      {group.nameFa} · {group.nameEn}
+                    </Typography>
+                    <Stack direction="row" sx={{ gap: 0.5, mt: 0.5, flexWrap: 'wrap' }}>
+                      {group.serviceCategoryId == null ? <Chip size="small" label={t('og_cross_category_badge')} /> : null}
+                      <Chip size="small" variant="outlined" label={t(group.isRequired ? 'og_required_badge' : 'og_optional_badge')} />
+                    </Stack>
+                  </Box>
+                  {caps.canManageCatalog ? (
+                    <AppButton variant="text" color="primary" startIcon="edit" onClick={() => setGroupDialog(group)}>
+                      {t('cat_edit')}
+                    </AppButton>
+                  ) : null}
+                </Stack>
+
+                <Divider />
+
+                <Stack sx={{ gap: 1 }}>
+                  {group.values.length === 0 ? (
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                      {t('og_value_empty')}
+                    </Typography>
+                  ) : (
+                    group.values.map((value) => (
+                      <Stack
+                        key={value.id}
+                        direction="row"
+                        sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}
+                      >
+                        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+                          <Typography variant="body2">
+                            {value.nameFa} · {value.nameEn}
+                          </Typography>
+                          <StatusChip status={value.isActive ? 'active' : 'neutral'} label={t(value.isActive ? 'status_active' : 'status_inactive')} />
+                        </Stack>
+                        {caps.canManageCatalog ? (
+                          <AppButton variant="text" color="primary" onClick={() => setValueDialog({ groupId: group.id, value })}>
+                            {t('cat_edit')}
+                          </AppButton>
+                        ) : null}
+                      </Stack>
+                    ))
+                  )}
+                </Stack>
+
+                {caps.canManageCatalog ? (
+                  <AppButton
+                    variant="outlined"
+                    color="primary"
+                    startIcon="add"
+                    onClick={() => setValueDialog({ groupId: group.id, value: 'new' })}
+                    sx={{ alignSelf: 'flex-start' }}
+                  >
+                    {t('og_value_add')}
+                  </AppButton>
+                ) : null}
+              </Stack>
+            </Paper>
+          ))
+        )}
+      </Stack>
+
+      {editingCategory ? <CategoryFormDialog category={category} onClose={() => setEditingCategory(false)} /> : null}
+      {groupDialog ? (
+        <OptionGroupFormDialog
+          categoryId={category.id}
+          group={groupDialog === 'new' ? null : groupDialog}
+          onClose={() => setGroupDialog(null)}
+        />
+      ) : null}
+      {valueDialog ? (
+        <OptionValueFormDialog
+          groupId={valueDialog.groupId}
+          value={valueDialog.value === 'new' ? null : valueDialog.value}
+          onClose={() => setValueDialog(null)}
+        />
+      ) : null}
+    </Box>
+  );
+}
+
+/** `'this'` maps to `serviceCategoryId: categoryId`; `'all'` maps to the cross-category `null`. */
+interface GroupFormState {
+  scope: 'this' | 'all';
+  nameFa: string;
+  nameEn: string;
+  isRequired: boolean;
+  sortOrder: string;
+}
+
+function initialGroupForm(group: ServiceOptionGroup | null): GroupFormState {
+  return {
+    scope: group != null && group.serviceCategoryId == null ? 'all' : 'this',
+    nameFa: group?.nameFa ?? '',
+    nameEn: group?.nameEn ?? '',
+    isRequired: group?.isRequired ?? false,
+    sortOrder: group != null ? String(group.sortOrder) : '0',
+  };
+}
+
+/**
+ * The create/edit dialog for a pricing dimension (option group). Re-scoping an existing cross-category
+ * group to "this category only" removes it from every other category that currently sees it — the hint
+ * text under the switch says so, matching what `UpdateServiceOptionGroupCommand` actually does server-side.
+ */
+function OptionGroupFormDialog({
+  categoryId,
+  group,
+  onClose,
+}: {
+  categoryId: number;
+  group: ServiceOptionGroup | null;
+  onClose: () => void;
+}) {
+  const t = useTranslations('admin');
+  const { enqueueSnackbar } = useSnackbar();
+  const isEdit = group != null;
+  const create = useCreateOptionGroup();
+  const update = useUpdateOptionGroup();
+  const isPending = create.isPending || update.isPending;
+
+  const form = useForm<GroupFormState>({ mode: 'onTouched', defaultValues: initialGroupForm(group) });
+  const { control, handleSubmit, formState } = form;
+  const scope = useWatch({ control, name: 'scope' });
+
+  const onSave = (values: GroupFormState) => {
+    const input: OptionGroupInput = {
+      serviceCategoryId: values.scope === 'all' ? null : categoryId,
+      nameFa: values.nameFa.trim(),
+      nameEn: values.nameEn.trim(),
+      isRequired: values.isRequired,
+      sortOrder: Number(values.sortOrder),
+    };
+    const onSuccess = () => {
+      enqueueSnackbar(t('og_saved'), { variant: 'success' });
+      onClose();
+    };
+    if (isEdit) update.mutate({ id: group.id, input }, { onSuccess });
+    else create.mutate(input, { onSuccess });
+  };
+
+  return (
+    <Dialog open onClose={isPending ? undefined : onClose} fullWidth maxWidth="xs">
+      <DialogTitle sx={{ fontWeight: 800 }}>{isEdit ? t('og_edit') : t('og_add')}</DialogTitle>
+      <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<GroupFormState>
+              name="nameFa"
+              label={t('cat_name_fa')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
+            />
+            <RhfTextField<GroupFormState>
+              name="nameEn"
+              label={t('cat_name_en')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
+            />
+            <Box>
+              <RhfControlGroup<GroupFormState> name="scope">
+                {({ field }) => (
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={field.value === 'all'}
+                        onChange={(event) => field.onChange(event.target.checked ? 'all' : 'this')}
+                      />
+                    }
+                    label={t('og_scope_all')}
+                  />
+                )}
+              </RhfControlGroup>
+              <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
+                {scope === 'all' ? t('og_scope_all_hint') : t('og_scope_this_hint')}
+              </Typography>
+            </Box>
+            <RhfControlGroup<GroupFormState> name="isRequired">
+              {({ field }) => (
+                <FormControlLabel
+                  control={<Switch checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />}
+                  label={t('og_is_required')}
+                />
+              )}
+            </RhfControlGroup>
+            <RhfTextField<GroupFormState>
+              name="sortOrder"
+              type="number"
+              label={t('cat_sort_order')}
+              rules={{ validate: (value) => Number.isFinite(Number(value)) }}
+              slotProps={{ htmlInput: { step: 1 } }}
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSave)}
+            disabled={!formState.isValid || isPending}
+          >
+            {isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
+    </Dialog>
+  );
+}
+
+interface ValueFormState {
+  nameFa: string;
+  nameEn: string;
+  sortOrder: string;
+  isActive: boolean;
+}
+
+function initialValueForm(value: ServiceOptionValue | null): ValueFormState {
+  return {
+    nameFa: value?.nameFa ?? '',
+    nameEn: value?.nameEn ?? '',
+    sortOrder: value != null ? String(value.sortOrder) : '0',
+    isActive: value?.isActive ?? true,
+  };
+}
+
+/**
+ * The create/edit dialog for a concrete option value. Create has no active flag (the server always
+ * creates active); edit exposes it as a switch — the only way to deactivate a value, since re-parenting
+ * to a different group is deliberately not supported (it would silently change variants that already
+ * answered with this value).
+ */
+function OptionValueFormDialog({
+  groupId,
+  value,
+  onClose,
+}: {
+  groupId: number;
+  value: ServiceOptionValue | null;
+  onClose: () => void;
+}) {
+  const t = useTranslations('admin');
+  const { enqueueSnackbar } = useSnackbar();
+  const isEdit = value != null;
+  const create = useCreateOptionValue();
+  const update = useUpdateOptionValue();
+  const isPending = create.isPending || update.isPending;
+
+  const form = useForm<ValueFormState>({ mode: 'onTouched', defaultValues: initialValueForm(value) });
+  const { handleSubmit, formState } = form;
+
+  const onSave = (values: ValueFormState) => {
+    const onSuccess = () => {
+      enqueueSnackbar(t('og_value_saved'), { variant: 'success' });
+      onClose();
+    };
+    if (isEdit) {
+      const input: UpdateOptionValueInput = {
+        nameFa: values.nameFa.trim(),
+        nameEn: values.nameEn.trim(),
+        sortOrder: Number(values.sortOrder),
+        isActive: values.isActive,
+      };
+      update.mutate({ id: value.id, input }, { onSuccess });
+    } else {
+      const input: CreateOptionValueInput = {
+        optionGroupId: groupId,
+        nameFa: values.nameFa.trim(),
+        nameEn: values.nameEn.trim(),
+        sortOrder: Number(values.sortOrder),
+      };
+      create.mutate(input, { onSuccess });
+    }
+  };
+
+  return (
+    <Dialog open onClose={isPending ? undefined : onClose} fullWidth maxWidth="xs">
+      <DialogTitle sx={{ fontWeight: 800 }}>{isEdit ? t('og_value_edit') : t('og_value_add')}</DialogTitle>
+      <FormProvider {...form}>
+        <DialogContent>
+          <Stack component="form" noValidate onSubmit={handleSubmit(onSave)} sx={{ gap: 2, mt: 1 }}>
+            <RhfTextField<ValueFormState>
+              name="nameFa"
+              label={t('cat_name_fa')}
+              rules={{ validate: (val) => String(val ?? '').trim() !== '' }}
+            />
+            <RhfTextField<ValueFormState>
+              name="nameEn"
+              label={t('cat_name_en')}
+              rules={{ validate: (val) => String(val ?? '').trim() !== '' }}
+            />
+            <RhfTextField<ValueFormState>
+              name="sortOrder"
+              type="number"
+              label={t('cat_sort_order')}
+              rules={{ validate: (val) => Number.isFinite(Number(val)) }}
+              slotProps={{ htmlInput: { step: 1 } }}
+            />
+            {isEdit ? (
+              <RhfControlGroup<ValueFormState> name="isActive">
+                {({ field }) => (
+                  <FormControlLabel
+                    control={<Switch checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />}
+                    label={t(field.value ? 'status_active' : 'status_inactive')}
+                  />
+                )}
+              </RhfControlGroup>
+            ) : null}
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSave)}
+            disabled={!formState.isValid || isPending}
+          >
+            {isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,244 @@
+'use client';
+import { Suspense, useState } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useSnackbar } from 'notistack';
+import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Skeleton, Stack } from '@mui/material';
+import { AppButton, AppLoading, RhfTextField, StatusChip } from '@/components';
+import { AdminDataTable, AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, type AdminTableColumn } from '@/components/admin';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
+import { adminCatalogCategoryPath } from '@/constants';
+import { ADMIN_CATEGORIES_PAGE_SIZE } from '@/services/catalog/constants';
+import type { CategoryInput, ServiceCategory } from '@/services/catalog/types';
+import { useAdminCategories, useCreateCategory, useSetCategoryActive, useUpdateCategory } from '@/services/catalog';
+
+/** No list-level filters today (the list is unfiltered) — `useAdminListState` still URL-syncs the page. */
+type CategoryListFilters = Record<string, never>;
+const EMPTY_FILTERS: CategoryListFilters = {};
+
+/**
+ * Catalog admin — the top-level category list (f6 blocker). Categories are seeded by migration, but
+ * pricing options are deliberately admin-authored data (never a migration), so outside a developer's
+ * own dev-seeded box there is nothing here until an admin creates it — this console is the fix.
+ * A row opens the category's option-groups/values console; the create dialog here handles categories
+ * only. Categories are reference data — deactivating (never a hard delete) hides a category from
+ * public browse and new bookings while leaving existing variants/bookings intact.
+ */
+export default function AdminCatalogPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminCatalogPageInner />
+    </Suspense>
+  );
+}
+
+function AdminCatalogPageInner() {
+  const t = useTranslations('admin');
+  const locale = useLocale();
+  const router = useRouter();
+  const caps = useAdminCapabilities();
+  const { enqueueSnackbar } = useSnackbar();
+  const [creating, setCreating] = useState(false);
+  const setActive = useSetCategoryActive();
+
+  const listState = useAdminListState<CategoryListFilters>({
+    parse: () => EMPTY_FILTERS,
+    serialize: () => ({}),
+    empty: EMPTY_FILTERS,
+  });
+  const page = listState.page;
+
+  const categories = useAdminCategories({ page, pageSize: ADMIN_CATEGORIES_PAGE_SIZE });
+  const items = categories.data?.items ?? [];
+  const total = categories.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / ADMIN_CATEGORIES_PAGE_SIZE));
+  const from = items.length === 0 ? 0 : (page - 1) * ADMIN_CATEGORIES_PAGE_SIZE + 1;
+  const to = (page - 1) * ADMIN_CATEGORIES_PAGE_SIZE + items.length;
+
+  const onToggleActive = (category: ServiceCategory) => {
+    setActive.mutate(
+      { id: category.id, isActive: !category.isActive },
+      { onSuccess: () => enqueueSnackbar(t(category.isActive ? 'cat_deactivated' : 'cat_activated'), { variant: 'success' }) },
+    );
+  };
+
+  const columns: AdminTableColumn<ServiceCategory>[] = [
+    { key: 'name', header: t('cat_col_name'), render: (c) => `${c.nameFa} · ${c.nameEn}` },
+    { key: 'order', header: t('cat_col_order'), render: (c) => c.sortOrder },
+    {
+      key: 'status',
+      header: t('cat_col_status'),
+      render: (c) => <StatusChip status={c.isActive ? 'active' : 'neutral'} label={t(c.isActive ? 'status_active' : 'status_inactive')} />,
+    },
+    ...(caps.canManageCatalog
+      ? [
+          {
+            key: 'actions',
+            header: '',
+            render: (c: ServiceCategory) => (
+              <Stack direction="row" sx={{ gap: 0.5, flexWrap: 'wrap' }}>
+                <AppButton
+                  variant="text"
+                  color={c.isActive ? 'error' : 'primary'}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onToggleActive(c);
+                  }}
+                  disabled={setActive.isPending}
+                >
+                  {t(c.isActive ? 'cat_deactivate' : 'cat_activate')}
+                </AppButton>
+              </Stack>
+            ),
+          } as AdminTableColumn<ServiceCategory>,
+        ]
+      : []),
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <AdminPageHeader
+        title={t('cat_title')}
+        subtitle={t('cat_subtitle')}
+        actions={
+          caps.canManageCatalog ? (
+            <AppButton variant="contained" color="primary" startIcon="add" onClick={() => setCreating(true)}>
+              {t('cat_add')}
+            </AppButton>
+          ) : undefined
+        }
+      />
+
+      {categories.isLoading ? (
+        <Skeleton variant="rounded" height={220} />
+      ) : categories.isError ? (
+        <AdminErrorState message={t('error_generic')} retryLabel={t('retry')} onRetry={() => categories.refetch()} />
+      ) : items.length === 0 ? (
+        <AdminEmptyState icon="category" title={t('cat_empty')} />
+      ) : (
+        <AdminDataTable
+          columns={columns}
+          rows={items}
+          getRowKey={(c) => c.id}
+          ariaLabel={t('cat_title')}
+          onRowClick={(c) => router.push(`/${locale}${adminCatalogCategoryPath(c.id)}`)}
+          footer={total > 0 ? t('showing_range', { from, to, total }) : undefined}
+        />
+      )}
+
+      <AdminPager
+        page={page}
+        pageCount={pageCount}
+        onPrev={() => listState.goToPage(Math.max(1, page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, page + 1))}
+        prevLabel={t('prev_page')}
+        nextLabel={t('next_page')}
+        indicator={t('page_indicator', { page, total: pageCount })}
+      />
+
+      {creating ? <CategoryFormDialog category={null} onClose={() => setCreating(false)} /> : null}
+    </Box>
+  );
+}
+
+/** The editable slice of `CategoryInput`, kept as strings for controlled text/number inputs. */
+interface CategoryFormState {
+  nameFa: string;
+  nameEn: string;
+  descriptionFa: string;
+  descriptionEn: string;
+  iconKey: string;
+  sortOrder: string;
+}
+
+function initialForm(category: ServiceCategory | null): CategoryFormState {
+  return {
+    nameFa: category?.nameFa ?? '',
+    nameEn: category?.nameEn ?? '',
+    descriptionFa: category?.descriptionFa ?? '',
+    descriptionEn: category?.descriptionEn ?? '',
+    iconKey: category?.iconKey ?? '',
+    sortOrder: category != null ? String(category.sortOrder) : '0',
+  };
+}
+
+/**
+ * The create/edit dialog for a category — shared by the list (create, `category=null`) and the detail
+ * page (edit, `category` prefilled). Both labels are required; description/icon are optional.
+ */
+export function CategoryFormDialog({ category, onClose }: { category: ServiceCategory | null; onClose: () => void }) {
+  const t = useTranslations('admin');
+  const { enqueueSnackbar } = useSnackbar();
+  const isEdit = category != null;
+  const create = useCreateCategory();
+  const update = useUpdateCategory();
+
+  const form = useForm<CategoryFormState>({ mode: 'onTouched', defaultValues: initialForm(category) });
+  const { handleSubmit, formState } = form;
+  const isPending = create.isPending || update.isPending;
+
+  const onSave = (values: CategoryFormState) => {
+    const input: CategoryInput = {
+      nameFa: values.nameFa.trim(),
+      nameEn: values.nameEn.trim(),
+      descriptionFa: values.descriptionFa.trim() || null,
+      descriptionEn: values.descriptionEn.trim() || null,
+      iconKey: values.iconKey.trim() || null,
+      sortOrder: Number(values.sortOrder),
+    };
+    const onSuccess = () => {
+      enqueueSnackbar(t('cat_saved'), { variant: 'success' });
+      onClose();
+    };
+    if (isEdit) update.mutate({ id: category.id, input }, { onSuccess });
+    else create.mutate(input, { onSuccess });
+  };
+
+  return (
+    <Dialog open onClose={isPending ? undefined : onClose} fullWidth maxWidth="xs">
+      <DialogTitle sx={{ fontWeight: 800 }}>{isEdit ? t('cat_edit') : t('cat_add')}</DialogTitle>
+      <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<CategoryFormState>
+              name="nameFa"
+              label={t('cat_name_fa')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
+            />
+            <RhfTextField<CategoryFormState>
+              name="nameEn"
+              label={t('cat_name_en')}
+              rules={{ validate: (value) => String(value ?? '').trim() !== '' }}
+            />
+            <RhfTextField<CategoryFormState> name="descriptionFa" label={t('cat_description_fa')} multiline minRows={2} />
+            <RhfTextField<CategoryFormState> name="descriptionEn" label={t('cat_description_en')} multiline minRows={2} />
+            <RhfTextField<CategoryFormState> name="iconKey" label={t('cat_icon_key')} helperText={t('cat_icon_hint')} slotProps={{ htmlInput: { dir: 'ltr' } }} />
+            <RhfTextField<CategoryFormState>
+              name="sortOrder"
+              type="number"
+              label={t('cat_sort_order')}
+              rules={{ validate: (value) => Number.isFinite(Number(value)) }}
+              slotProps={{ htmlInput: { step: 1 } }}
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <AppButton variant="text" color="inherit" onClick={onClose} disabled={isPending}>
+            {t('cancel')}
+          </AppButton>
+          <AppButton
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSave)}
+            disabled={!formState.isValid || isPending}
+          >
+            {isPending ? t('saving') : t('save')}
+          </AppButton>
+        </DialogActions>
+      </FormProvider>
+    </Dialog>
+  );
+}

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

@@ -1,5 +1,5 @@
 'use client';
-import { useMemo, useState } from 'react';
+import { Suspense, useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import {
@@ -17,10 +17,10 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { AppButton, AppIcon } from '@/components';
-import { AdminEmptyState, AdminErrorState, AdminPageHeader, ConfigRow } from '@/components/admin';
+import { AppButton, AppIcon, AppLoading } from '@/components';
+import { AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, ConfigRow } from '@/components/admin';
 import { formatShamsiDateTime } from '@/utils';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
 import { CONFIG_GROUPS, RATE_CONFIG_KEYS } from '@/services/admin/constants';
 import type { PlatformConfig } from '@/services/admin/types';
 import { usePlatformConfigs, useUpdatePlatformConfig, useConfigChangeHistory } from '@/services/admin';
@@ -58,9 +58,18 @@ function validate(config: PlatformConfig, value: string): string | null {
  * `data_type` (phase §5).
  */
 export default function AdminConfigPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminConfigPageInner />
+    </Suspense>
+  );
+}
+
+function AdminConfigPageInner() {
   const t = useTranslations('admin');
   const caps = useAdminCapabilities();
-  const configs = usePlatformConfigs(1);
+  const listState = useAdminListState<Record<string, never>>({ parse: () => ({}), serialize: () => ({}), empty: {} });
+  const configs = usePlatformConfigs(listState.page);
   const [editing, setEditing] = useState<PlatformConfig | null>(null);
   const [historyKey, setHistoryKey] = useState<string | null>(null);
 
@@ -101,6 +110,19 @@ export default function AdminConfigPage() {
         ))
       )}
 
+      <AdminPager
+        page={listState.page}
+        pageCount={Math.max(1, Math.ceil((configs.data?.total ?? 0) / (configs.data?.pageSize ?? 1)))}
+        onPrev={() => listState.goToPage(Math.max(1, listState.page - 1))}
+        onNext={() => listState.goToPage(listState.page + 1)}
+        prevLabel={t('prev_page')}
+        nextLabel={t('next_page')}
+        indicator={t('page_indicator', {
+          page: listState.page,
+          total: Math.max(1, Math.ceil((configs.data?.total ?? 0) / (configs.data?.pageSize ?? 1))),
+        })}
+      />
+
       {editing ? <ConfigEditDialog config={editing} onClose={() => setEditing(null)} /> : null}
       <ConfigHistoryDrawer configKey={historyKey} onClose={() => setHistoryKey(null)} />
     </Box>
@@ -149,7 +171,6 @@ function ConfigEditDialog({ config, onClose }: { config: PlatformConfig; onClose
             autoFocus
             multiline={config.dataType === 'json'}
             minRows={config.dataType === 'json' ? 4 : 1}
-            type={config.dataType === 'int' || config.dataType === 'decimal' ? 'text' : 'text'}
             value={value}
             onChange={(e) => setValue(e.target.value)}
             label={t('cfg_col_value')}
@@ -179,15 +200,22 @@ function ConfigEditDialog({ config, onClose }: { config: PlatformConfig; onClose
 function ConfigHistoryDrawer({ configKey, onClose }: { configKey: string | null; onClose: () => void }) {
   const t = useTranslations('admin');
   const locale = useLocale();
-  const history = useConfigChangeHistory(configKey, 1, configKey != null);
+  const [page, setPage] = useState(1);
+  const history = useConfigChangeHistory(configKey, page, configKey != null);
   // RTL-aware: the drawer slides from the reading-end (left on fa/RTL, right on en/LTR).
   const anchor = locale === 'fa' ? 'left' : 'right';
+  const pageCount = Math.max(1, Math.ceil((history.data?.total ?? 0) / (history.data?.pageSize ?? 1)));
+
+  const close = () => {
+    setPage(1);
+    onClose();
+  };
 
   return (
-    <Drawer anchor={anchor} open={configKey != null} onClose={onClose} slotProps={{ paper: { sx: { width: { xs: '100%', sm: 420 }, p: 3 } } }}>
+    <Drawer anchor={anchor} open={configKey != null} onClose={close} slotProps={{ paper: { sx: { width: { xs: '100%', sm: 420 }, p: 3 } } }}>
       <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
         <Typography variant="h6">{configKey ? t('cfg_history_title', { key: configKey }) : ''}</Typography>
-        <AppButton variant="text" color="inherit" onClick={onClose} sx={{ minWidth: 0 }}>
+        <AppButton variant="text" color="inherit" onClick={close} sx={{ minWidth: 0 }}>
           <AppIcon icon="close" />
         </AppButton>
       </Stack>
@@ -201,10 +229,16 @@ 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 }}>
-              <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 700 }}>
-                {t('cfg_history_change', { old: change.oldValue ?? '—', new: change.newValue ?? '—' })}
-              </Typography>
+            <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 ?? '—' })}
+                </Typography>
+                <AppIcon icon="forward" size={14} color="var(--bal-text-secondary)" />
+                <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 700 }}>
+                  {t('cfg_history_change_new', { new: change.newValue ?? '—' })}
+                </Typography>
+              </Stack>
               <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                 {formatShamsiDateTime(change.occurredAt, locale)}
                 {change.actorUserId != null ? ` · #${change.actorUserId}` : ''}
@@ -213,6 +247,16 @@ function ConfigHistoryDrawer({ configKey, onClose }: { configKey: string | null;
           ))}
         </Stack>
       )}
+
+      <AdminPager
+        page={page}
+        pageCount={pageCount}
+        onPrev={() => setPage((p) => Math.max(1, p - 1))}
+        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        prevLabel={t('prev_page')}
+        nextLabel={t('next_page')}
+        indicator={t('page_indicator', { page, total: pageCount })}
+      />
     </Drawer>
   );
 }

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 { useState } from 'react';
+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,15 +15,25 @@ import {
   Skeleton,
   Stack,
   Switch,
-  TextField,
 } from '@mui/material';
-import { AppButton } from '@/components';
-import { AdminDataTable, AdminEmptyState, AdminErrorState, AdminPageHeader, type AdminTableColumn } from '@/components/admin';
+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 } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
+import { ADMIN_PAGE_SIZE } from '@/services/admin/constants';
 import type { Holiday, HolidayInput, HolidayType } from '@/services/admin/types';
 import { useHolidays, useUpsertHoliday } from '@/services/admin';
 
+/** Today's LOCAL date as ISO `YYYY-MM-DD` — never `toISOString()`, which converts to UTC first and can
+ * land on the wrong day near local midnight (the same class of bug fixed in the payout window default). */
+function todayLocalIso(): string {
+  const d = new Date();
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
 const HOLIDAY_TYPES: readonly HolidayType[] = ['official', 'religious', 'national'];
 
 /**
@@ -32,11 +43,21 @@ const HOLIDAY_TYPES: readonly HolidayType[] = ['official', 'religious', 'nationa
  * computes the shift itself (phase §5).
  */
 export default function AdminHolidaysPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminHolidaysPageInner />
+    </Suspense>
+  );
+}
+
+function AdminHolidaysPageInner() {
   const t = useTranslations('admin');
   const locale = useLocale();
   const caps = useAdminCapabilities();
-  const holidays = useHolidays({}, 1);
+  const listState = useAdminListState<Record<string, never>>({ parse: () => ({}), serialize: () => ({}), empty: {} });
+  const holidays = useHolidays({}, listState.page);
   const [editing, setEditing] = useState<Holiday | 'new' | null>(null);
+  const pageCount = Math.max(1, Math.ceil((holidays.data?.total ?? 0) / ADMIN_PAGE_SIZE));
 
   const columns: AdminTableColumn<Holiday>[] = [
     { key: 'date', header: t('hol_col_date'), render: (h) => formatShamsiDate(h.holidayDate, locale) },
@@ -96,6 +117,16 @@ export default function AdminHolidaysPage() {
         <AdminDataTable columns={columns} rows={holidays.data?.items ?? []} getRowKey={(h) => h.id} ariaLabel={t('hol_title')} />
       )}
 
+      <AdminPager
+        page={listState.page}
+        pageCount={pageCount}
+        onPrev={() => listState.goToPage(Math.max(1, listState.page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, listState.page + 1))}
+        prevLabel={t('prev_page')}
+        nextLabel={t('next_page')}
+        indicator={t('page_indicator', { page: listState.page, total: pageCount })}
+      />
+
       {editing ? (
         <HolidayDialog holiday={editing === 'new' ? null : editing} onClose={() => setEditing(null)} />
       ) : null}
@@ -103,25 +134,24 @@ export default function AdminHolidaysPage() {
   );
 }
 
-const TODAY_ISO = ''; // seeded below via state default so no Date at module load
-
 function HolidayDialog({ holiday, onClose }: { holiday: Holiday | null; onClose: () => void }) {
   const t = useTranslations('admin');
   const { enqueueSnackbar } = useSnackbar();
   const upsert = useUpsertHoliday();
-  const [form, setForm] = useState<HolidayInput>({
-    holidayDate: holiday?.holidayDate?.slice(0, 10) ?? TODAY_ISO,
-    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' });
@@ -129,52 +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 }}>
-          <TextField
-            type="date"
-            label={t('hol_col_date')}
-            value={form.holidayDate}
-            onChange={(e) => setForm((f) => ({ ...f, holidayDate: e.target.value }))}
-            disabled={!!holiday}
-            slotProps={{ inputLabel: { shrink: true } }}
-          />
-          <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

@@ -1,13 +1,14 @@
 'use client';
 import { ReactNode, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import { Box, Divider, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, StatusChip, TrustBadge } from '@/components';
-import { AdminEmptyState, AdminErrorState, ConfirmDialog } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { Box, Divider, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, PageHeader, StatusChip, TrustBadge } from '@/components';
+import { AdminEmptyState, AdminErrorState, ConfirmDialog, NursePicker } from '@/components/admin';
+import { useAdminCapabilities, useAdminBackToList } from '@/hooks';
 import { ROUTES } from '@/constants';
+import type { AdminUserSummary } from '@/services/admin/types';
 import {
   usePartnerCenter,
   useCenterSponsoredNurses,
@@ -27,9 +28,9 @@ import { CENTER_STATE_KIND, PartnerCenterFormDialog } from '../page';
 export default function AdminPartnerCenterDetailPage() {
   const t = useTranslations('admin');
   const locale = useLocale();
-  const router = useRouter();
   const caps = useAdminCapabilities();
   const { enqueueSnackbar } = useSnackbar();
+  const goBack = useAdminBackToList(`/${locale}${ROUTES.ADMIN_PARTNERS}`);
 
   const params = useParams<{ id: string }>();
   const parsed = Number(params?.id);
@@ -43,7 +44,7 @@ export default function AdminPartnerCenterDetailPage() {
 
   const [confirmVerify, setConfirmVerify] = useState(false);
   const [editing, setEditing] = useState(false);
-  const [assignId, setAssignId] = useState('');
+  const [assignNurseUser, setAssignNurseUser] = useState<AdminUserSummary | null>(null);
 
   const data = center.data;
 
@@ -57,14 +58,14 @@ export default function AdminPartnerCenterDetailPage() {
   };
 
   const onAssign = () => {
-    const nurseProfileId = Number(assignId);
-    if (!Number.isFinite(nurseProfileId) || nurseProfileId <= 0) return;
+    const nurseProfileId = assignNurseUser?.nurseProfileId;
+    if (nurseProfileId == null) return;
     assignNurse.mutate(
       { nurseProfileId, unlink: false },
       {
         onSuccess: () => {
           enqueueSnackbar(t('partner_nurse_assigned'), { variant: 'success' });
-          setAssignId('');
+          setAssignNurseUser(null);
         },
       },
     );
@@ -77,17 +78,7 @@ export default function AdminPartnerCenterDetailPage() {
     );
   };
 
-  const back = (
-    <AppButton
-      variant="text"
-      color="primary"
-      startIcon="partners"
-      onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PARTNERS}`)}
-      sx={{ alignSelf: 'flex-start' }}
-    >
-      {t('back')}
-    </AppButton>
-  );
+  const back = <PageHeader title={t('partner_detail_title')} onBack={goBack} backLabel={t('back')} />;
 
   if (center.isLoading) {
     return (
@@ -124,20 +115,15 @@ export default function AdminPartnerCenterDetailPage() {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Stack sx={{ gap: 0.75 }}>
-        {back}
-        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
-          <Typography variant="h5" component="h1" sx={{ fontWeight: 800 }}>
-            {t('partner_detail_title')}
-          </Typography>
-          <StatusChip status={CENTER_STATE_KIND[data.onboardingState]} label={t(`center_state_${data.onboardingState}`)} />
-        </Stack>
-        <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
-          {data.name}
-        </Typography>
-      </Stack>
+      <PageHeader
+        title={t('partner_detail_title')}
+        subtitle={data.name}
+        onBack={goBack}
+        backLabel={t('back')}
+        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>
@@ -188,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
@@ -221,21 +207,22 @@ export default function AdminPartnerCenterDetailPage() {
 
         {caps.canManagePartners ? (
           <Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-            <TextField
-              size="small"
-              type="number"
-              label={t('partner_assign_nurse_ph')}
-              value={assignId}
-              onChange={(e) => setAssignId(e.target.value)}
-              slotProps={{ htmlInput: { min: 1, step: 1 } }}
-              sx={{ minWidth: 200 }}
-            />
+            <Box sx={{ minWidth: 260 }}>
+              <NursePicker
+                value={assignNurseUser}
+                onChange={setAssignNurseUser}
+                label={t('partner_assign_nurse_ph')}
+                placeholder={t('user_picker_search_ph')}
+                noOptionsText={t('user_picker_no_options')}
+                loadingText={t('user_picker_loading')}
+              />
+            </Box>
             <AppButton
               variant="contained"
               color="primary"
               startIcon="assign"
               onClick={onAssign}
-              disabled={assignNurse.isPending || Number(assignId) <= 0}
+              disabled={assignNurse.isPending || assignNurseUser?.nurseProfileId == null}
               sx={{ mt: 0.25 }}
             >
               {t('partner_assign_nurse')}

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

@@ -1,7 +1,8 @@
 'use client';
-import { useState } from 'react';
+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, StatusChip } from '@/components';
+import { AppButton, AppLoading, RhfControlGroup, RhfTextField, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import {
   AdminDataTable,
@@ -24,14 +24,21 @@ import {
   AdminErrorState,
   AdminPageHeader,
   AdminPager,
+  UserPicker,
   type AdminTableColumn,
 } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
 import { adminPartnerCenterPath } from '@/constants';
 import { PARTNER_PAGE_SIZE } from '@/services/partnerCenter/constants';
 import type { CenterOnboardingState, PartnerCenter, PartnerCenterInput } from '@/services/partnerCenter/types';
+import type { AdminUserSummary } from '@/services/admin/types';
+import { useUserLookup } from '@/services/admin';
 import { usePartnerCenters, useCreatePartnerCenter, useUpdatePartnerCenter } from '@/services/partnerCenter';
 
+/** No list-level filters today (the list is unfiltered) — `useAdminListState` still URL-syncs the page. */
+type PartnersListFilters = Record<string, never>;
+const EMPTY_FILTERS: PartnersListFilters = {};
+
 /** State → semantic chip color. verified = green, pending = amber, suspended = red, draft = neutral. */
 export const CENTER_STATE_KIND: Record<CenterOnboardingState, StatusKind> = {
   verified: 'verified',
@@ -48,16 +55,33 @@ export const CENTER_STATE_KIND: Record<CenterOnboardingState, StatusKind> = {
  * it is only ever entered here, never displayed (the list carries no IBAN at all).
  */
 export default function AdminPartnersPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminPartnersPageInner />
+    </Suspense>
+  );
+}
+
+function AdminPartnersPageInner() {
   const t = useTranslations('admin');
   const locale = useLocale();
   const router = useRouter();
   const caps = useAdminCapabilities();
-  const [page, setPage] = useState(1);
   const [creating, setCreating] = useState(false);
 
+  const listState = useAdminListState<PartnersListFilters>({
+    parse: () => EMPTY_FILTERS,
+    serialize: () => ({}),
+    empty: EMPTY_FILTERS,
+  });
+  const page = listState.page;
+
   const centers = usePartnerCenters({}, page);
   const items = centers.data?.items ?? [];
-  const pageCount = Math.max(1, Math.ceil((centers.data?.total ?? 0) / PARTNER_PAGE_SIZE));
+  const total = centers.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / PARTNER_PAGE_SIZE));
+  const from = items.length === 0 ? 0 : (page - 1) * PARTNER_PAGE_SIZE + 1;
+  const to = (page - 1) * PARTNER_PAGE_SIZE + items.length;
 
   const columns: AdminTableColumn<PartnerCenter>[] = [
     { key: 'name', header: t('partner_col_name'), render: (c) => c.name },
@@ -97,17 +121,18 @@ export default function AdminPartnersPage() {
           getRowKey={(c) => c.id}
           ariaLabel={t('partner_title')}
           onRowClick={(c) => router.push(`/${locale}${adminPartnerCenterPath(c.id)}`)}
+          footer={total > 0 ? t('showing_range', { from, to, total }) : undefined}
         />
       )}
 
       <AdminPager
         page={page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => listState.goToPage(Math.max(1, page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
 
       {creating ? <PartnerCenterFormDialog center={null} onClose={() => setCreating(false)} /> : null}
@@ -115,7 +140,9 @@ export default function AdminPartnersPage() {
   );
 }
 
-/** The editable slice of `PartnerCenterInput`, kept as strings for controlled text/number inputs. */
+/** The editable slice of `PartnerCenterInput`, kept as strings for controlled text/number inputs — except
+ * `adminUser`, the resolved picker selection (3.2), never a hand-typed id. `undefined` = untouched (the
+ * edit-mode existing admin, once resolved, still shows); `null` = the admin explicitly cleared the field. */
 interface CenterFormState {
   name: string;
   legalEntityType: string;
@@ -125,7 +152,7 @@ interface CenterFormState {
   settlementIban: string;
   isMerchantOfRecord: boolean;
   commissionRate: string;
-  adminUserId: string;
+  adminUser: AdminUserSummary | null | undefined;
 }
 
 function initialForm(center: PartnerCenter | null): CenterFormState {
@@ -139,7 +166,7 @@ function initialForm(center: PartnerCenter | null): CenterFormState {
     settlementIban: '',
     isMerchantOfRecord: center?.isMerchantOfRecord ?? false,
     commissionRate: center != null ? String(center.commissionRate) : '',
-    adminUserId: center?.adminUserId != null ? String(center.adminUserId) : '',
+    adminUser: undefined,
   };
 }
 
@@ -156,30 +183,31 @@ 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 set = <K extends keyof CenterFormState>(key: K, value: CenterFormState[K]) =>
-    setForm((f) => ({ ...f, [key]: value }));
+  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' });
 
-  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;
+  // 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 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 = adminUser !== undefined ? adminUser : resolvedExistingAdmin;
 
-  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,
-      adminUserId: form.adminUserId.trim() === '' ? null : Number(form.adminUserId),
+      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, {
       onSuccess: () => {
@@ -192,66 +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 } }}
-          />
-          <TextField
-            type="number"
-            label={t('partner_admin_user')}
-            value={form.adminUserId}
-            onChange={(e) => set('adminUserId', e.target.value)}
-            slotProps={{ htmlInput: { min: 1, step: 1 } }}
-          />
-        </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

@@ -1,18 +1,22 @@
 'use client';
-import { FunctionComponent, ReactNode, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { FunctionComponent, ReactNode, Suspense, useState } from 'react';
+import { useParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import { Box, Chip, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, StatusChip } from '@/components';
+import { AppButton, AppLoading, PageHeader, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import { AdminEmptyState, AdminErrorState, AdminPager, ConfirmDialog } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
 import { ROUTES } from '@/constants';
 import { formatIrrToToman, formatShamsiDate } from '@/utils';
 import { usePayoutBatchDetail, useRecordTransferReference, useRetryPayout } from '@/services/payouts';
 import type { AdminPayoutRow, PayoutBatchStatus, PayoutStatus } from '@/services/payouts/types';
 
+/** This detail page has no filters — only a page number worth mirroring into the URL. */
+type BatchRowsFilters = Record<string, never>;
+const EMPTY_FILTERS: BatchRowsFilters = {};
+
 const BATCH_STATUS_KIND: Record<PayoutBatchStatus, StatusKind> = {
   draft: 'neutral',
   processing: 'info',
@@ -35,33 +39,37 @@ const PAYOUT_STATUS_KIND: Record<PayoutStatus, StatusKind> = {
  * `canPayout`. Money is display-only Toman; the client never recomputes amounts, eligibility, or dates.
  */
 export default function AdminPayoutBatchDetailPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminPayoutBatchDetailScreen />
+    </Suspense>
+  );
+}
+
+/** Wrapped in `<Suspense>` above — `useAdminListState` calls `useSearchParams()`, which requires it. */
+function AdminPayoutBatchDetailScreen() {
   const t = useTranslations('admin');
   const locale = useLocale();
-  const router = useRouter();
   const caps = useAdminCapabilities();
   const params = useParams<{ batchId: string }>();
   const batchId = Number(params?.batchId);
 
-  const [page, setPage] = useState(1);
+  const { page, goToPage } = useAdminListState<BatchRowsFilters>({
+    parse: () => EMPTY_FILTERS,
+    serialize: () => ({}),
+    empty: EMPTY_FILTERS,
+  });
   const detail = usePayoutBatchDetail(Number.isFinite(batchId) ? batchId : null, page);
   const data = detail.data;
   const pageCount = data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Stack sx={{ gap: 0.5 }}>
-        <AppButton
-          variant="text"
-          color="primary"
-          onClick={() => router.push(`/${locale}${ROUTES.ADMIN_PAYOUTS}`)}
-          sx={{ alignSelf: 'flex-start' }}
-        >
-          {t('back')}
-        </AppButton>
-        <Typography variant="h5" component="h1" sx={{ fontWeight: 800 }}>
-          {t('payout_batch_title', { id: batchId })}
-        </Typography>
-      </Stack>
+      <PageHeader
+        title={t('payout_batch_title', { id: batchId })}
+        backTo={`/${locale}${ROUTES.ADMIN_PAYOUTS}`}
+        backLabel={t('back')}
+      />
 
       {detail.isLoading ? (
         <Stack sx={{ gap: 2 }}>
@@ -75,7 +83,7 @@ export default function AdminPayoutBatchDetailPage() {
         <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]}
@@ -116,11 +124,11 @@ export default function AdminPayoutBatchDetailPage() {
           <AdminPager
             page={page}
             pageCount={pageCount}
-            onPrev={() => setPage((p) => Math.max(1, p - 1))}
-            onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+            onPrev={() => goToPage(Math.max(1, page - 1))}
+            onNext={() => goToPage(Math.min(pageCount, page + 1))}
             prevLabel={t('prev_page')}
             nextLabel={t('next_page')}
-            indicator={t('page_indicator', { page })}
+            indicator={t('page_indicator', { page, total: pageCount })}
           />
         </>
       )}
@@ -172,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"
@@ -209,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

@@ -17,7 +17,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { AppButton, Money, StatusChip } from '@/components';
+import { AppButton, JalaliDateField, Money, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import {
   AdminDataTable,
@@ -30,7 +30,7 @@ import {
 import type { AdminTableColumn } from '@/components/admin';
 import { useAdminCapabilities } from '@/hooks';
 import { adminPayoutBatchPath } from '@/constants';
-import { formatShamsiDate } from '@/utils';
+import { formatNumber, formatShamsiDate } from '@/utils';
 import { PAYOUTS_PAGE_SIZE } from '@/services/payouts/constants';
 import { usePayoutBatches, usePreviewPayoutBatch, useRunPayoutBatch } from '@/services/payouts';
 import type { PayoutBatchStatus, PayoutBatchSummary } from '@/services/payouts/types';
@@ -52,8 +52,17 @@ const BATCH_STATUSES: readonly PayoutBatchStatus[] = [
   'failed',
 ];
 
-/** UTC ISO date (`YYYY-MM-DD`) — the wire shape for the batch window. */
-const isoDate = (d: Date): string => d.toISOString().slice(0, 10);
+/**
+ * ISO date (`YYYY-MM-DD`) — the wire shape for the batch window. Formats using the browser's **local**
+ * date fields, never `toISOString()` (which converts to UTC first): near Tehran local midnight that would
+ * silently roll the date back/forward a day from the admin's actual wall-clock date.
+ */
+const isoDate = (d: Date): string => {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+};
 
 /**
  * Admin payout-batch dashboard (f15) — the reconciliation list of weekly `nurse_payout_batches` and the
@@ -173,7 +182,7 @@ export default function AdminPayoutsPage() {
         onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
 
       {previewOpen ? <PreviewBatchDialog canPayout={caps.canPayout} onClose={() => setPreviewOpen(false)} /> : null}
@@ -230,22 +239,13 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
       <DialogTitle sx={{ fontWeight: 800 }}>{t('payout_preview_title')}</DialogTitle>
       <DialogContent>
         <Stack direction="row" sx={{ gap: 1.5, mt: 1, flexWrap: 'wrap', alignItems: 'center' }}>
-          <TextField
-            type="date"
+          <JalaliDateField
             size="small"
             label={t('payout_period_start')}
             value={periodStart}
-            onChange={(e) => setPeriodStart(e.target.value)}
-            slotProps={{ inputLabel: { shrink: true } }}
-          />
-          <TextField
-            type="date"
-            size="small"
-            label={t('payout_period_end')}
-            value={periodEnd}
-            onChange={(e) => setPeriodEnd(e.target.value)}
-            slotProps={{ inputLabel: { shrink: true } }}
+            onChange={setPeriodStart}
           />
+          <JalaliDateField size="small" label={t('payout_period_end')} value={periodEnd} onChange={setPeriodEnd} />
           <AppButton
             variant="outlined"
             color="primary"
@@ -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}
@@ -361,12 +361,41 @@ function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClos
       <ConfirmDialog
         open={runConfirmOpen}
         title={t('payout_run_confirm_title')}
-        body={t('payout_run_confirm_body')}
+        body={
+          result ? (
+            <Stack sx={{ gap: 1.5, mt: 0.5 }}>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t('payout_run_summary_intro')}
+              </Typography>
+              <Money amountIrr={result.totalNetIrr} size="lg" tone="emphasis" />
+              <Stack sx={{ gap: 0.5 }}>
+                <Stack direction="row" sx={{ justifyContent: 'space-between', gap: 1 }}>
+                  <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                    {t('payout_run_count_label')}
+                  </Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                    {formatNumber(result.eligible.length, locale)}
+                  </Typography>
+                </Stack>
+                <Stack direction="row" sx={{ justifyContent: 'space-between', gap: 1 }}>
+                  <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                    {t('payout_col_processing')}
+                  </Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                    {formatShamsiDate(result.processingDate, locale)}
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Stack>
+          ) : null
+        }
         confirmLabel={t('payout_run')}
         cancelLabel={t('cancel')}
         onConfirm={onRunConfirm}
         onClose={() => setRunConfirmOpen(false)}
         loading={run.isPending}
+        requireTypedConfirmation={result ? ['تایید', result.totalNetIrr] : []}
+        typedConfirmationLabel={t('payout_run_type_to_confirm')}
       />
     </Dialog>
   );

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

@@ -1,11 +1,11 @@
 'use client';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import { Box, Chip, MenuItem, Paper, Skeleton, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, RatingInput } from '@/components';
+import { AppButton, AppLoading, RatingInput } from '@/components';
 import { AdminEmptyState, AdminErrorState, AdminPageHeader, AdminPager, ConfirmDialog } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminCapabilities, useAdminListState } from '@/hooks';
 import { REVIEWS_PAGE_SIZE } from '@/services/reviews/constants';
 import type { ModerationAction, ModerationQueueItem, ModerationStatus } from '@/services/reviews/types';
 import { useModerationQueue, useModerateReview } from '@/services/reviews';
@@ -29,13 +29,33 @@ const STATUS_CHIP_COLOR: Record<ModerationStatus, 'default' | 'success' | 'warni
  * Publishing recomputes the nurse aggregate **server-side**; the mutation invalidates the queue so the row
  * leaves on success. `canModerate` only hides the controls — the server enforces the role scope.
  */
+const DEFAULT_STATUS: ModerationStatus = 'pending_moderation';
+
+function parseFilters(params: URLSearchParams): { status: ModerationStatus } {
+  const status = params.get('status') as ModerationStatus | null;
+  return { status: status && MODERATION_STATUSES.includes(status) ? status : DEFAULT_STATUS };
+}
+
 export default function AdminReviewsPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminReviewsPageInner />
+    </Suspense>
+  );
+}
+
+function AdminReviewsPageInner() {
   const t = useTranslations('admin');
   const caps = useAdminCapabilities();
   const { enqueueSnackbar } = useSnackbar();
 
-  const [status, setStatus] = useState<ModerationStatus>('pending_moderation');
-  const [page, setPage] = useState(1);
+  const listState = useAdminListState<{ status: ModerationStatus }>({
+    parse: parseFilters,
+    serialize: (f): Record<string, string> => (f.status !== DEFAULT_STATUS ? { status: f.status } : {}),
+    empty: { status: DEFAULT_STATUS },
+  });
+  const status = listState.applied.status;
+  const page = listState.page;
   const [pending, setPending] = useState<{ item: ModerationQueueItem; action: ModerationAction } | null>(null);
 
   const queue = useModerationQueue({ status }, page);
@@ -44,6 +64,8 @@ export default function AdminReviewsPage() {
   const items = queue.data?.items ?? [];
   const pageCount = Math.max(1, Math.ceil((queue.data?.total ?? 0) / REVIEWS_PAGE_SIZE));
 
+  const setStatus = (next: ModerationStatus) => listState.applyFilters({ status: next });
+
   const requireReason = pending?.action === 'hide' || pending?.action === 'reject';
 
   const onConfirm = (reason?: string) => {
@@ -70,10 +92,7 @@ export default function AdminReviewsPage() {
             size="small"
             label={t('filter_label')}
             value={status}
-            onChange={(e) => {
-              setStatus(e.target.value as ModerationStatus);
-              setPage(1);
-            }}
+            onChange={(e) => setStatus(e.target.value as ModerationStatus)}
             sx={{ minWidth: 180 }}
           >
             {MODERATION_STATUSES.map((s) => (
@@ -107,11 +126,11 @@ export default function AdminReviewsPage() {
       <AdminPager
         page={page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => listState.goToPage(Math.max(1, page - 1))}
+        onNext={() => listState.goToPage(Math.min(pageCount, page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
 
       <ConfirmDialog
@@ -147,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/roles/page.tsx

@@ -8,7 +8,7 @@
  * grid lists **active** grants (revoked rows are filtered out); an audited confirm dialog fronts every
  * revoke and grant.
  */
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import {
@@ -31,12 +31,13 @@ import {
   AdminErrorState,
   AdminPageHeader,
   ConfirmDialog,
+  UserPicker,
   type AdminTableColumn,
 } from '@/components/admin';
 import { formatShamsiDate } from '@/utils';
 import { useAdminCapabilities } from '@/hooks';
-import type { AdminRole, RoleGrant } from '@/services/admin/types';
-import { useAdminRoles, useGrantRole, useRevokeRole } from '@/services/admin';
+import type { AdminRole, AdminUserSummary, RoleGrant } from '@/services/admin/types';
+import { useAdminRoles, useGrantRole, useRevokeRole, useUserLookup } from '@/services/admin';
 
 /** The fine-grained admin roles the grid grants (aligned with the b2 `AdminRole` enum). */
 const ROLES: readonly AdminRole[] = ['super_admin', 'admin', 'support', 'finance', 'moderation'];
@@ -56,8 +57,13 @@ export default function AdminRolesPage() {
   // Only active grants — a revoked grant leaves the grid.
   const active = (roles.data ?? []).filter((g) => g.revokedAt == null);
 
+  // Batch id→name resolve (3.2) — one request for every grant row, never one per row.
+  const userIds = useMemo(() => [...new Set(active.map((g) => g.userId))].sort((a, b) => a - b), [active]);
+  const userLookup = useUserLookup(userIds);
+  const nameFor = (userId: number): string => userLookup.data?.get(userId)?.displayName ?? `#${userId}`;
+
   const columns: AdminTableColumn<RoleGrant>[] = [
-    { key: 'user', header: t('role_col_user'), render: (g) => `#${g.userId}` },
+    { key: 'user', header: t('role_col_user'), render: (g) => nameFor(g.userId) },
     {
       key: 'role',
       header: t('role_col_role'),
@@ -131,7 +137,7 @@ export default function AdminRolesPage() {
       <ConfirmDialog
         open={revoking != null}
         title={t('role_revoke')}
-        body={revoking ? t('role_revoke_confirm', { role: t(`role_${revoking.role}`), id: revoking.userId }) : undefined}
+        body={revoking ? t('role_revoke_confirm', { role: t(`role_${revoking.role}`), name: nameFor(revoking.userId) }) : undefined}
         confirmLabel={t('role_revoke')}
         cancelLabel={t('cancel')}
         confirmColor="error"
@@ -149,16 +155,15 @@ function GrantRoleDialog({ onClose }: { onClose: () => void }) {
   const { enqueueSnackbar } = useSnackbar();
   const grant = useGrantRole();
 
-  const [userId, setUserId] = useState('');
+  const [user, setUser] = useState<AdminUserSummary | null>(null);
   const [role, setRole] = useState<AdminRole>('support');
 
-  const parsedId = Number(userId);
-  const valid = /^\d+$/.test(userId.trim()) && parsedId > 0;
+  const valid = user != null;
 
   const onGrant = () => {
-    if (!valid) return;
+    if (!user) return;
     grant.mutate(
-      { userId: parsedId, role },
+      { userId: user.id, role },
       {
         onSuccess: () => {
           enqueueSnackbar(t('role_updated'), { variant: 'success' });
@@ -173,12 +178,13 @@ function GrantRoleDialog({ onClose }: { onClose: () => void }) {
       <DialogTitle sx={{ fontWeight: 800 }}>{t('role_grant')}</DialogTitle>
       <DialogContent>
         <Stack sx={{ gap: 2, mt: 1 }}>
-          <TextField
+          <UserPicker
+            value={user}
+            onChange={setUser}
             label={t('role_col_user')}
-            type="number"
-            value={userId}
-            onChange={(e) => setUserId(e.target.value)}
-            slotProps={{ htmlInput: { min: 1 } }}
+            placeholder={t('user_picker_search_ph')}
+            noOptionsText={t('user_picker_no_options')}
+            loadingText={t('user_picker_loading')}
           />
           <TextField select label={t('role_col_role')} value={role} onChange={(e) => setRole(e.target.value as AdminRole)}>
             {ROLES.map((r) => (
@@ -188,7 +194,7 @@ function GrantRoleDialog({ onClose }: { onClose: () => void }) {
             ))}
           </TextField>
           {valid ? (
-            <DialogContentText>{t('role_grant_confirm', { role: t(`role_${role}`), id: parsedId })}</DialogContentText>
+            <DialogContentText>{t('role_grant_confirm', { role: t(`role_${role}`), name: user.displayName })}</DialogContentText>
           ) : null}
         </Stack>
       </DialogContent>

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,95 @@
+'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('catalog'),
+          subtitle: t('admin_catalog_sub'),
+          icon: 'category',
+          path: ROUTES.ADMIN_CATALOG,
+          enabled: caps.canManageCatalog,
+        },
+        {
+          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

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import {
@@ -13,18 +13,22 @@ import {
   TextField,
   ToggleButton,
   ToggleButtonGroup,
-  Typography,
+  Tooltip,
 } from '@mui/material';
-import { AppButton, StatusChip } from '@/components';
+import { AppButton, PageHeader, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
-import { AdminEmptyState, AdminErrorState, AdminMessageBubble, RefundPanel } from '@/components/admin';
-import { useAdminCapabilities } from '@/hooks';
+import { useThreadScroll } from '@/components/messaging';
+import { AdminEmptyState, AdminErrorState, AdminMessageBubble, ConfirmDialog, RefundPanel } from '@/components/admin';
+import { useAdminBackToList, useAdminCapabilities } from '@/hooks';
+import { useAuth } from '@/context/auth';
 import { ROUTES } from '@/constants';
-import { useAdminTicket, usePostAdminMessage } from '@/services/tickets';
+import { useAdminTicket, useAssignTicket, useCloseTicket, usePostAdminMessage, useReopenTicket } from '@/services/tickets';
+import { TICKET_LIFECYCLE_ENABLED } from '@/services/tickets/constants';
 import type { TicketAuthorRole, TicketStatus } from '@/services/tickets/types';
 
 /** Status → chip color: an open ticket is pending work, a closed one is neutral (mirrors the queue). */
 const STATUS_KIND: Record<TicketStatus, StatusKind> = { open: 'pending', closed: 'neutral' };
+const REFUND_PANEL_ID = 'admin-ticket-refund-panel';
 
 /** The `tickets` author-label key. `admin` has no `author_admin` key — staff read as "support" (`author_support`). */
 function authorLabelKey(role: TicketAuthorRole): string {
@@ -40,18 +44,22 @@ function makeClientMessageId(): string {
  * The admin ticket thread (f15) — the full conversation **including internal notes** (the admin lens carries
  * `isInternal`; the user app never does). Staff read the whole thread and reply as **either** a participant-
  * visible reply **or** a staff-only internal note (the composer toggles `isInternal`; `AdminMessageBubble`
- * renders internal notes distinctly). Sends are optimistic (`usePostAdminMessage`) — the draft clears only on
- * confirm. When the ticket is a **refund** case linked to a booking, the admin opens the `RefundPanel` inline
- * (it always initiates from a ticket, never a standalone form). Composer + refund are gated on the principal's
- * capabilities; the server is the real authority.
+ * renders internal notes distinctly, and ui-phase-11 makes the composer itself amber-tinted in internal mode
+ * so a staff member can never post an internal note publicly by mistake). Sends are optimistic
+ * (`usePostAdminMessage`) — the draft clears only on confirm; the thread opens scrolled to the newest message
+ * (`useThreadScroll`). When the ticket is a **refund** case linked to a booking, the admin opens the
+ * `RefundPanel` inline. Close/reopen/assign-to-me (REQ-063) are gated behind `TICKET_LIFECYCLE_ENABLED` — no
+ * live route yet — AND the principal's `canManageTickets` capability; the server is the real authority.
  */
 export default function AdminTicketThreadPage() {
   const t = useTranslations('admin');
   const tickets = useTranslations('tickets');
   const locale = useLocale();
-  const router = useRouter();
   const caps = useAdminCapabilities();
   const { enqueueSnackbar } = useSnackbar();
+  const [authState] = useAuth();
+  const meId = authState.currentUser?.id;
+  const goBack = useAdminBackToList(`/${locale}${ROUTES.ADMIN_TICKETS}`);
 
   const params = useParams<{ id: string }>();
   const parsed = Number(params?.id);
@@ -59,12 +67,20 @@ export default function AdminTicketThreadPage() {
 
   const { data: detail, isLoading, isError, refetch } = useAdminTicket(ticketId || null);
   const post = usePostAdminMessage(ticketId);
+  const closeTicket = useCloseTicket(ticketId);
+  const reopenTicket = useReopenTicket(ticketId);
+  const assignTicket = useAssignTicket(ticketId);
 
   const [mode, setMode] = useState<'reply' | 'internal'>('reply');
   const [body, setBody] = useState('');
   const [refundShown, setRefundShown] = useState(false);
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false);
+  const [reopenDialogOpen, setReopenDialogOpen] = useState(false);
 
   const isInternal = mode === 'internal';
+  const messageCount = detail?.messages.length ?? 0;
+  const lastMessage = detail?.messages[messageCount - 1];
+  const { bottomRef } = useThreadScroll(messageCount, lastMessage?.isMine ?? false);
 
   const send = () => {
     const trimmed = body.trim();
@@ -80,16 +96,62 @@ export default function AdminTicketThreadPage() {
     );
   };
 
+  const onCloseConfirm = () => {
+    closeTicket.mutate(undefined, {
+      onSuccess: () => {
+        setCloseDialogOpen(false);
+        enqueueSnackbar(t('ticket_closed_ok'), { variant: 'success' });
+      },
+    });
+  };
+
+  const onReopenConfirm = () => {
+    reopenTicket.mutate(undefined, {
+      onSuccess: () => {
+        setReopenDialogOpen(false);
+        enqueueSnackbar(t('ticket_reopened_ok'), { variant: 'success' });
+      },
+    });
+  };
+
+  const onAssignMe = () => {
+    if (meId == null || assignTicket.isPending) return;
+    assignTicket.mutate({ ownerUserId: meId }, { onSuccess: () => enqueueSnackbar(t('ticket_assigned_me'), { variant: 'success' }) });
+  };
+
   const showRefund = !!detail && detail.category === 'refund' && detail.bookingId != null && caps.canRefund;
+  const showLifecycle = TICKET_LIFECYCLE_ENABLED && caps.canManageTickets;
+
+  const lifecycleActions = showLifecycle && detail ? (
+    <>
+      {detail.status === 'open' ? (
+        <AppButton variant="outlined" color="primary" startIcon="close" onClick={() => setCloseDialogOpen(true)}>
+          {t('ticket_close')}
+        </AppButton>
+      ) : (
+        <AppButton variant="outlined" color="primary" startIcon="refresh" onClick={() => setReopenDialogOpen(true)}>
+          {t('ticket_reopen')}
+        </AppButton>
+      )}
+      <Tooltip title={meId == null ? t('assign_me_loading') : ''}>
+        <span>
+          <AppButton
+            variant="outlined"
+            color="primary"
+            startIcon="assign"
+            onClick={onAssignMe}
+            disabled={meId == null || assignTicket.isPending}
+          >
+            {t('ticket_assign_me')}
+          </AppButton>
+        </span>
+      </Tooltip>
+    </>
+  ) : null;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 820, mx: 'auto', width: '100%' }}>
-      <AppButton
-        variant="text"
-        color="primary"
-        onClick={() => router.push(`/${locale}${ROUTES.ADMIN_TICKETS}`)}
-        sx={{ alignSelf: 'flex-start' }}
-      >
+      <AppButton variant="text" color="primary" onClick={goBack} sx={{ alignSelf: 'flex-start' }}>
         {t('back')}
       </AppButton>
 
@@ -105,45 +167,48 @@ 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 }}>
-            <Stack sx={{ gap: 1.5 }}>
-              <Typography variant="h6" component="h1" sx={{ fontWeight: 800 }} dir="ltr">
-                {t('ticket_thread_title', { ref: detail.referenceCode })}
-              </Typography>
-              {detail.subject ? (
-                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                  {detail.subject}
-                </Typography>
-              ) : null}
-              <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
-                <Chip size="small" label={t(`tcat_${detail.category}`)} />
-                <StatusChip status={STATUS_KIND[detail.status]} label={t(`tstatus_${detail.status}`)} />
-                {detail.bookingId != null ? (
-                  <Chip size="small" variant="outlined" label={t('refund_linked_booking', { id: detail.bookingId })} />
-                ) : null}
-                {detail.refundId != null ? (
-                  <Chip size="small" variant="outlined" label={t('ticket_linked_refund', { id: detail.refundId })} />
-                ) : null}
-              </Stack>
+          <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}
+              actions={lifecycleActions}
+              meta={
+                <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
+                  <Chip size="small" label={t(`tcat_${detail.category}`)} />
+                  <StatusChip status={STATUS_KIND[detail.status]} label={t(`tstatus_${detail.status}`)} />
+                  {detail.bookingId != null ? (
+                    <Chip size="small" variant="outlined" label={t('refund_linked_booking', { id: detail.bookingId })} />
+                  ) : null}
+                  {detail.refundId != null ? (
+                    <Chip size="small" variant="outlined" label={t('ticket_linked_refund', { id: detail.refundId })} />
+                  ) : null}
+                </Stack>
+              }
+            />
 
-              {showRefund ? (
-                <Box>
-                  <AppButton
-                    variant="outlined"
-                    color="primary"
-                    startIcon="refunds"
-                    onClick={() => setRefundShown((v) => !v)}
+            {showRefund ? (
+              <Box sx={{ mt: 1.5 }}>
+                <AppButton
+                  variant="outlined"
+                  color="primary"
+                  startIcon="refunds"
+                  aria-expanded={refundShown}
+                  aria-controls={REFUND_PANEL_ID}
+                  onClick={() => setRefundShown((v) => !v)}
+                >
+                  {t('refund_open')}
+                </AppButton>
+                <Collapse in={refundShown} unmountOnExit>
+                  <Paper
+                    id={REFUND_PANEL_ID}
+                    elevation={0}
+                    sx={{ mt: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
                   >
-                    {t('refund_open')}
-                  </AppButton>
-                  <Collapse in={refundShown} unmountOnExit>
-                    <Paper elevation={0} sx={{ mt: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
-                      <RefundPanel bookingId={detail.bookingId as number} ticketId={detail.id} />
-                    </Paper>
-                  </Collapse>
-                </Box>
-              ) : null}
-            </Stack>
+                    <RefundPanel bookingId={detail.bookingId as number} ticketId={detail.id} />
+                  </Paper>
+                </Collapse>
+              </Box>
+            ) : null}
           </Paper>
 
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, maxHeight: 520, overflowY: 'auto', p: 0.5 }}>
@@ -154,10 +219,20 @@ export default function AdminTicketThreadPage() {
                 authorLabel={tickets(authorLabelKey(m.authorRole))}
               />
             ))}
+            <div ref={bottomRef} />
           </Box>
 
           {caps.canManageTickets ? (
-            <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+            <Paper
+              elevation={0}
+              sx={{
+                p: 2,
+                border: '1px solid',
+                borderColor: isInternal ? 'var(--bal-warning)' : 'divider',
+                borderRadius: 'var(--bal-radius-md)',
+                bgcolor: isInternal ? 'var(--bal-warning-soft)' : 'background.paper',
+              }}
+            >
               <Stack sx={{ gap: 1.5 }}>
                 <ToggleButtonGroup
                   size="small"
@@ -185,11 +260,34 @@ export default function AdminTicketThreadPage() {
                   disabled={post.isPending || body.trim().length === 0}
                   sx={{ alignSelf: 'flex-start' }}
                 >
-                  {t('ticket_send')}
+                  {isInternal ? t('ticket_send_internal') : t('ticket_send')}
                 </AppButton>
               </Stack>
             </Paper>
           ) : null}
+
+          <ConfirmDialog
+            open={closeDialogOpen}
+            title={t('ticket_close')}
+            body={t('ticket_close_confirm')}
+            confirmLabel={t('ticket_close')}
+            cancelLabel={t('cancel')}
+            onConfirm={onCloseConfirm}
+            onClose={() => setCloseDialogOpen(false)}
+            loading={closeTicket.isPending}
+            confirmColor="primary"
+          />
+          <ConfirmDialog
+            open={reopenDialogOpen}
+            title={t('ticket_reopen')}
+            body={t('ticket_reopen_confirm')}
+            confirmLabel={t('ticket_reopen')}
+            cancelLabel={t('cancel')}
+            onConfirm={onReopenConfirm}
+            onClose={() => setReopenDialogOpen(false)}
+            loading={reopenTicket.isPending}
+            confirmColor="primary"
+          />
         </>
       )}
     </Box>

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

@@ -1,9 +1,9 @@
 'use client';
-import { useState } from 'react';
+import { Suspense } from 'react';
 import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { Box, Chip, MenuItem, Skeleton, Stack, TextField } from '@mui/material';
-import { AppButton, StatusChip } from '@/components';
+import { AppButton, AppLoading, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import {
   AdminDataTable,
@@ -14,9 +14,11 @@ import {
   type AdminTableColumn,
 } from '@/components/admin';
 import { adminTicketThreadPath } from '@/constants';
+import { useAdminListState } from '@/hooks';
 import { useAdminTickets } from '@/services/tickets';
 import { TICKETS_PAGE_SIZE } from '@/services/tickets/constants';
 import type { AdminTicketFilters, AdminTicketSummary, TicketCategory, TicketStatus } from '@/services/tickets/types';
+import { formatShamsiDate } from '@/utils';
 
 const STATUSES: readonly TicketStatus[] = ['open', 'closed'];
 const CATEGORIES: readonly TicketCategory[] = ['coordination', 'support', 'refund', 'emergency'];
@@ -24,35 +26,55 @@ const CATEGORIES: readonly TicketCategory[] = ['coordination', 'support', 'refun
 const STATUS_KIND: Record<TicketStatus, StatusKind> = { open: 'pending', closed: 'neutral' };
 const EMPTY: AdminTicketFilters = {};
 
+function parseFilters(params: URLSearchParams): AdminTicketFilters {
+  return {
+    status: (params.get('status') as TicketStatus | null) ?? undefined,
+    category: (params.get('category') as TicketCategory | null) ?? undefined,
+    referenceCode: params.get('referenceCode') ?? undefined,
+  };
+}
+
+function serializeFilters(filters: AdminTicketFilters): Record<string, string> {
+  const record: Record<string, string> = {};
+  if (filters.status) record.status = filters.status;
+  if (filters.category) record.category = filters.category;
+  if (filters.referenceCode) record.referenceCode = filters.referenceCode;
+  return record;
+}
+
 /**
  * The admin global ticket queue (f15) — EVERY ticket across the platform (not one viewer's), the entry point
  * into a case. Filter by status/category/reference; a row opens the admin thread where internal notes and the
  * refund panel live. The filter **draft** commits to the query only on Apply, so typing a reference never
- * refetches; the applied filters + page are the cache key (`useAdminTickets`), so revisiting a filter/page
- * serves from cache. This surface is staff-only — the server enforces the scope; the UI just routes here.
+ * refetches; the applied filters + page are mirrored into the URL (`useAdminListState`, ui-phase-11) so
+ * browser back/refresh/a pasted link all reproduce the exact same queue view. This surface is staff-only —
+ * the server enforces the scope; the UI just routes here.
  */
 export default function AdminTicketsPage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminTicketsQueue />
+    </Suspense>
+  );
+}
+
+function AdminTicketsQueue() {
   const t = useTranslations('admin');
   const locale = useLocale();
   const router = useRouter();
 
-  const [draft, setDraft] = useState<AdminTicketFilters>(EMPTY);
-  const [applied, setApplied] = useState<AdminTicketFilters>(EMPTY);
-  const [page, setPage] = useState(1);
+  const { draft, setDraft, applied, page, apply, clear, goToPage } = useAdminListState<AdminTicketFilters>({
+    parse: parseFilters,
+    serialize: serializeFilters,
+    empty: EMPTY,
+  });
 
   const tickets = useAdminTickets(applied, page);
   const items = tickets.data?.items ?? [];
-  const pageCount = Math.max(1, Math.ceil((tickets.data?.total ?? 0) / TICKETS_PAGE_SIZE));
-
-  const apply = () => {
-    setApplied(draft);
-    setPage(1);
-  };
-  const clear = () => {
-    setDraft(EMPTY);
-    setApplied(EMPTY);
-    setPage(1);
-  };
+  const total = tickets.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / TICKETS_PAGE_SIZE));
+  const from = items.length === 0 ? 0 : (page - 1) * TICKETS_PAGE_SIZE + 1;
+  const to = items.length === 0 ? 0 : from + items.length - 1;
 
   const columns: AdminTableColumn<AdminTicketSummary>[] = [
     {
@@ -76,6 +98,12 @@ export default function AdminTicketsPage() {
       render: (row) => <StatusChip status={STATUS_KIND[row.status]} label={t(`tstatus_${row.status}`)} />,
     },
     { key: 'booking', header: t('ticket_col_booking'), render: (row) => row.bookingId ?? '—' },
+    {
+      key: 'activity',
+      header: t('ticket_activity_col'),
+      minWidth: 140,
+      render: (row) => formatShamsiDate(row.createdAt, locale),
+    },
   ];
 
   return (
@@ -84,7 +112,7 @@ export default function AdminTicketsPage() {
 
       <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
@@ -149,17 +177,18 @@ export default function AdminTicketsPage() {
           getRowKey={(row) => row.id}
           ariaLabel={t('ticket_title')}
           onRowClick={(row) => router.push(`/${locale}${adminTicketThreadPath(row.id)}`)}
+          footer={t('showing_range', { from, to, total })}
         />
       )}
 
       <AdminPager
         page={page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => goToPage(Math.max(1, page - 1))}
+        onNext={() => goToPage(Math.min(pageCount, page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page, total: pageCount })}
       />
     </Box>
   );

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/users/page.tsx

@@ -1,8 +1,101 @@
-import { getTranslations } from 'next-intl/server';
-import { PlaceholderScreen } from '@/components';
+'use client';
+import { useState } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Box, Chip, Stack, TextField, Typography } from '@mui/material';
+import { AdminDataTable, AdminEmptyState, AdminPageHeader, type AdminTableColumn } from '@/components/admin';
+import { AppLink } from '@/components';
+import { ROUTES } from '@/constants';
+import { useUserSearch } from '@/services/admin';
+import { useDebouncedValue } from '@/services/search';
+import type { AdminUserSummary, DirectoryUserRole } from '@/services/admin/types';
 
-export default async function AdminUsersPage() {
-  const t = await getTranslations('nav');
-  const tShell = await getTranslations('shell');
-  return <PlaceholderScreen icon="users" title={t('users')} description={tShell('placeholder_body')} />;
+const SEARCH_DEBOUNCE_MS = 300;
+const MIN_QUERY_LENGTH = 2;
+
+/** Directory role → chip label key. */
+const ROLE_LABEL_KEY: Record<DirectoryUserRole, string> = {
+  customer: 'user_role_customer',
+  nurse: 'user_role_nurse',
+  admin: 'user_role_admin',
+  partner: 'user_role_partner',
+};
+
+/**
+ * Read-first admin user directory (phase §3.8) — search by name/phone over the same admin user-directory
+ * seam `UserPicker`/`NursePicker` use (REQ-061, gap — mock-backed until delivered). Built because the REQ
+ * this console depends on is filed and mocked-behind-the-seam this same phase; it becomes real the moment
+ * `services/admin`'s seam flips. Each row links into the audit log filtered to that user (the one console
+ * that already supports an entity filter) — a ticket-queue deep link isn't offered because the admin
+ * ticket queue has no actor/user filter to land on (would be a dishonest link).
+ */
+export default function AdminUsersPage() {
+  const t = useTranslations('admin');
+  const locale = useLocale();
+  const [query, setQuery] = useState('');
+  const debounced = useDebouncedValue(query, SEARCH_DEBOUNCE_MS);
+  const search = useUserSearch(debounced);
+  const items = search.data ?? [];
+  const hasQuery = debounced.trim().length >= MIN_QUERY_LENGTH;
+
+  const columns: AdminTableColumn<AdminUserSummary>[] = [
+    { key: 'name', header: t('user_col_name'), render: (u) => u.displayName, minWidth: 180 },
+    {
+      key: 'phone',
+      header: t('user_col_phone'),
+      render: (u) => (
+        <Box component="span" dir="ltr">
+          {u.maskedPhone}
+        </Box>
+      ),
+    },
+    { key: 'id', header: t('user_col_id'), render: (u) => `#${u.id}` },
+    {
+      key: 'roles',
+      header: t('user_col_roles'),
+      render: (u) => (
+        <Stack direction="row" sx={{ gap: 0.5, flexWrap: 'wrap' }}>
+          {u.roles.map((r) => (
+            <Chip key={r} size="small" variant="outlined" label={t(ROLE_LABEL_KEY[r])} />
+          ))}
+        </Stack>
+      ),
+    },
+    {
+      key: 'actions',
+      header: '',
+      align: 'right' as const,
+      render: (u) => (
+        <AppLink to={`/${locale}${ROUTES.ADMIN_AUDIT}?entityType=User&entityId=${u.id}`}>{t('user_view_audit')}</AppLink>
+      ),
+    },
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <AdminPageHeader title={t('user_title')} subtitle={t('user_subtitle')} />
+
+      <TextField
+        size="small"
+        label={t('user_search_label')}
+        placeholder={t('user_picker_search_ph')}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        sx={{ maxWidth: 360 }}
+      />
+
+      {!hasQuery ? (
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('user_search_hint')}
+        </Typography>
+      ) : search.isFetching ? (
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('user_picker_loading')}
+        </Typography>
+      ) : items.length === 0 ? (
+        <AdminEmptyState icon="users" title={t('user_empty')} />
+      ) : (
+        <AdminDataTable columns={columns} rows={items} getRowKey={(u) => u.id} ariaLabel={t('user_title')} />
+      )}
+    </Box>
+  );
 }

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

@@ -1,7 +1,8 @@
 'use client';
-import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+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,28 +13,23 @@ import {
   DialogTitle,
   Skeleton,
   Stack,
-  TextField,
   Typography,
 } from '@mui/material';
-import { AppButton, StatusChip } from '@/components';
+import { AppButton, AppLoading, PageHeader, RhfJalaliDateField, RhfTextField, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
-import {
-  AdminEmptyState,
-  AdminErrorState,
-  AdminPageHeader,
-  ConfirmDialog,
-  DocumentViewer,
-} from '@/components/admin';
-import { ROUTES } from '@/constants';
+import { AdminEmptyState, AdminErrorState, ConfirmDialog, DocumentViewer } from '@/components/admin';
+import { ROUTES, adminVerificationCasePath } from '@/constants';
 import { formatShamsiDate } from '@/utils';
-import { useAdminCapabilities } from '@/hooks';
+import { useAdminBackToList, useAdminCapabilities } from '@/hooks';
 import {
   useApproveVerification,
   useDecideStep,
   useRejectVerification,
   useVerificationCase,
+  useVerificationQueue,
 } from '@/services/verification';
 import type { AdminVerificationStepDetail, VerificationStepStatus } from '@/services/verification/types';
+import { parseQueueFilters, queueCaseHref } from '../queueFilters';
 
 /** The three credential-bearing step types — a Pass here opens the structured credential form. */
 const CREDENTIAL_STEP_CODES: readonly string[] = ['moh_competency_license', 'ino_membership', 'criminal_record'];
@@ -48,6 +44,14 @@ const STEP_STATUS_KIND: Record<VerificationStepStatus, StatusKind> = {
   expired: 'rejected',
 };
 
+export default function AdminVerificationCasePage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminVerificationCaseScreen />
+    </Suspense>
+  );
+}
+
 /**
  * Verification case (b6 `AdminVerificationsController`) — the trust desk works one nurse: the identity on
  * file for cross-check, every step with its status + documents (each `DocumentViewer` re-signs its own
@@ -55,17 +59,23 @@ const STEP_STATUS_KIND: Record<VerificationStepStatus, StatusKind> = {
  * (encrypted) credential via a structured form; recorded credentials are listed by **type** only — the
  * number never crosses the wire. The whole verification is approvable only when every required step has
  * passed; a decision re-aggregates server-side (flipping `is_verified`) and removes the case from the queue.
+ *
+ * «پرونده بعدی»/«پرونده قبلی» + arrow keys move through the **current queue page's order** without
+ * returning to the list: the case URL carries the queue's `status`/`search`/`page` (`queueCaseHref`), so
+ * re-deriving the same filters here hits `useVerificationQueue`'s cache the list already primed (no extra
+ * fetch in the common flow). Fetching adjacent pages is out of scope — prev/next disable at the page's ends.
  */
-export default function AdminVerificationCasePage() {
+function AdminVerificationCaseScreen() {
   const t = useTranslations('admin');
   const locale = useLocale();
   const router = useRouter();
   const params = useParams<{ nurseId: string }>();
+  const searchParams = useSearchParams();
   const nurseVerificationId = Number(params?.nurseId);
   const caps = useAdminCapabilities();
   const { enqueueSnackbar } = useSnackbar();
 
-  const { data, isLoading, isError, refetch } = useVerificationCase(
+  const { data, isLoading, isError, isFetching, refetch } = useVerificationCase(
     Number.isFinite(nurseVerificationId) ? nurseVerificationId : null,
   );
   const approve = useApproveVerification();
@@ -74,7 +84,36 @@ export default function AdminVerificationCasePage() {
   const [approveOpen, setApproveOpen] = useState(false);
   const [rejectOpen, setRejectOpen] = useState(false);
 
-  const backToQueue = () => router.push(`/${locale}${ROUTES.ADMIN_VERIFICATION}`);
+  const backToQueue = useAdminBackToList(`/${locale}${ROUTES.ADMIN_VERIFICATION}`);
+
+  // Re-derive the SAME filters/page the queue list would have parsed from its own URL, so this query
+  // reuses the list's cached page (React Query keys structurally) instead of an unfiltered refetch.
+  const queueFilters = useMemo(() => parseQueueFilters(searchParams), [searchParams]);
+  const queuePage = useMemo(() => {
+    const raw = Number(searchParams.get('page'));
+    return Number.isInteger(raw) && raw > 0 ? raw : 1;
+  }, [searchParams]);
+  const queueQuery = useVerificationQueue(queueFilters, queuePage);
+  const queueItems = queueQuery.data?.items ?? [];
+  const caseIndex = queueItems.findIndex((item) => item.nurseVerificationId === nurseVerificationId);
+  const prevCase = caseIndex > 0 ? queueItems[caseIndex - 1] : null;
+  const nextCase = caseIndex >= 0 && caseIndex < queueItems.length - 1 ? queueItems[caseIndex + 1] : null;
+
+  const goToCase = useCallback(
+    (id: number) => router.push(queueCaseHref(locale, adminVerificationCasePath(id), queueFilters, queuePage)),
+    [router, locale, queueFilters, queuePage],
+  );
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      const tag = (document.activeElement as HTMLElement | null)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (event.key === 'ArrowRight' && prevCase) goToCase(prevCase.nurseVerificationId);
+      else if (event.key === 'ArrowLeft' && nextCase) goToCase(nextCase.nurseVerificationId);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [prevCase, nextCase, goToCase]);
 
   const allPassed = !!data && data.steps.length > 0 && data.steps.every((step) => step.status === 'passed');
 
@@ -103,12 +142,33 @@ export default function AdminVerificationCasePage() {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Stack sx={{ gap: 1 }}>
-        <AppButton variant="text" color="primary" onClick={backToQueue} sx={{ alignSelf: 'flex-start' }}>
-          {t('back')}
-        </AppButton>
-        <AdminPageHeader title={t('ver_case_title')} />
-      </Stack>
+      <PageHeader
+        title={t('ver_case_title')}
+        onBack={backToQueue}
+        backLabel={t('back')}
+        actions={
+          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
+            <AppButton
+              variant="outlined"
+              color="inherit"
+              startIcon="back"
+              onClick={() => prevCase && goToCase(prevCase.nurseVerificationId)}
+              disabled={!prevCase}
+            >
+              {t('ver_prev_case')}
+            </AppButton>
+            <AppButton
+              variant="outlined"
+              color="inherit"
+              endIcon="forward"
+              onClick={() => nextCase && goToCase(nextCase.nurseVerificationId)}
+              disabled={!nextCase}
+            >
+              {t('ver_next_case')}
+            </AppButton>
+          </Stack>
+        }
+      />
 
       {isLoading ? (
         <Stack sx={{ gap: 2 }}>
@@ -122,7 +182,7 @@ export default function AdminVerificationCasePage() {
         <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>
@@ -139,6 +199,8 @@ export default function AdminVerificationCasePage() {
                 step={step}
                 nurseVerificationId={nurseVerificationId}
                 canVerify={caps.canVerify}
+                onReloadDocuments={refetch}
+                reloadingDocuments={isFetching}
               />
             ))}
           </Stack>
@@ -147,7 +209,7 @@ export default function AdminVerificationCasePage() {
             <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' }}
@@ -230,10 +292,14 @@ function StepCard({
   step,
   nurseVerificationId,
   canVerify,
+  onReloadDocuments,
+  reloadingDocuments,
 }: {
   step: AdminVerificationStepDetail;
   nurseVerificationId: number;
   canVerify: boolean;
+  onReloadDocuments: () => void;
+  reloadingDocuments: boolean;
 }) {
   const t = useTranslations('admin');
   const { enqueueSnackbar } = useSnackbar();
@@ -265,7 +331,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}`)}
@@ -279,7 +345,12 @@ function StepCard({
       {step.documents.length > 0 ? (
         <Stack sx={{ gap: 1.5, mt: 1.5 }}>
           {step.documents.map((doc) => (
-            <DocumentViewer key={doc.id} document={doc} />
+            <DocumentViewer
+              key={doc.id}
+              document={doc}
+              onReload={onReloadDocuments}
+              reloading={reloadingDocuments}
+            />
           ))}
         </Stack>
       ) : isManual ? (
@@ -338,6 +409,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,
@@ -350,28 +429,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,
         },
       },
       {
@@ -381,67 +458,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)}
-          />
-          <TextField
-            fullWidth
-            type="date"
-            label={t('ver_issued_at')}
-            value={issuedAt}
-            onChange={(e) => setIssuedAt(e.target.value)}
-            slotProps={{ inputLabel: { shrink: true } }}
-          />
-          <TextField
-            fullWidth
-            type="date"
-            label={t('ver_expires_at')}
-            value={expiresAt}
-            onChange={(e) => setExpiresAt(e.target.value)}
-            required={expiryRequired}
-            error={expiryMissing}
-            helperText={expiryMissing ? t('ver_expiry_required') : undefined}
-            slotProps={{ inputLabel: { shrink: true } }}
-          />
-        </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

@@ -1,9 +1,9 @@
 'use client';
-import { useState } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { Box, Chip, MenuItem, Skeleton, Stack, TextField } from '@mui/material';
-import { AppIcon, StatusChip } from '@/components';
+import { Box, Chip, Skeleton, Stack, Tab, Tabs, TextField } from '@mui/material';
+import { AppButton, AppIcon, AppLoading, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
 import {
   AdminDataTable,
@@ -14,13 +14,21 @@ import {
 } from '@/components/admin';
 import type { AdminTableColumn } from '@/components/admin';
 import { adminVerificationCasePath } from '@/constants';
-import { formatShamsiDate } from '@/utils';
+import { formatNumber, formatRelativeTime, formatShamsiDate } from '@/utils';
+import { useAdminListState } from '@/hooks';
 import { useVerificationQueue } from '@/services/verification';
 import { ADMIN_QUEUE_PAGE_SIZE } from '@/services/verification/constants';
-import type { AdminVerificationQueueItem, VerificationAggregateStatus } from '@/services/verification/types';
+import type {
+  AdminVerificationQueueFilters,
+  AdminVerificationQueueItem,
+  VerificationAggregateStatus,
+} from '@/services/verification/types';
+import { EMPTY_QUEUE_FILTERS, parseQueueFilters, queueCaseHref, serializeQueueFilters } from './queueFilters';
 
-/** The queue status filter — a subset of the aggregate statuses the desk works (default all). */
-type QueueStatusFilter = '' | 'pending' | 'in_review';
+/** SLA thresholds for the waiting-time column's color (display-only client signal — never a server rule). */
+const WAITING_TIME_WARNING_HOURS = 48;
+const WAITING_TIME_ALARM_HOURS = 96;
+const MS_PER_HOUR = 60 * 60 * 1000;
 
 /** Aggregate status → chip kind. `in_review` reads as informational; a rejected/suspended case shows red. */
 const AGG_STATUS_KIND: Record<VerificationAggregateStatus, StatusKind> = {
@@ -32,24 +40,66 @@ const AGG_STATUS_KIND: Record<VerificationAggregateStatus, StatusKind> = {
   suspended: 'rejected',
 };
 
+export default function AdminVerificationQueuePage() {
+  return (
+    <Suspense fallback={<AppLoading />}>
+      <AdminVerificationQueueScreen />
+    </Suspense>
+  );
+}
+
 /**
  * Verification review queue (b6 `AdminVerificationsController`) — the trust desk's worklist, one row per
- * nurse folded from the per-step endpoint. Filter by status (all / pending / in_review); each row surfaces
- * the step progress, the next pending step, when it was submitted, and a warning when a credential is
- * expiring. A row opens its case. The filter + page are the query key, so switching them reuses cached
- * pages; a decision on a case invalidates the queue so the desk re-renders without a manual refresh.
+ * nurse folded from the per-step endpoint. Status tabs (all / pending / in_review, badge-counted when the
+ * server serves `counts` — REQ-062) replace the old lone select; a name/phone search follows the same
+ * draft-vs-applied Apply/Clear pattern as `admin/tickets`/`admin/audit`. Filters + page are URL-synced via
+ * `useAdminListState`, so a queue row carries them forward into the case URL (`queueCaseHref`) — the case
+ * page re-derives the same query key to reuse this cache for next/prev case navigation.
  */
-export default function AdminVerificationQueuePage() {
+function AdminVerificationQueueScreen() {
   const t = useTranslations('admin');
   const locale = useLocale();
   const router = useRouter();
 
-  const [status, setStatus] = useState<QueueStatusFilter>('');
-  const [page, setPage] = useState(1);
+  const state = useAdminListState<AdminVerificationQueueFilters>({
+    parse: parseQueueFilters,
+    serialize: serializeQueueFilters,
+    empty: EMPTY_QUEUE_FILTERS,
+  });
 
-  const queue = useVerificationQueue({ status: status || undefined }, page);
+  // Tabs commit immediately (they're discrete, not free text) — `state.apply()` closes over the CURRENT
+  // render's `draft`, so calling it synchronously right after `setDraft` would still see the stale value.
+  // Deferring the commit to the render that follows the draft update reads the fresh `draft` correctly.
+  const applyPendingRef = useRef(false);
+  useEffect(() => {
+    if (applyPendingRef.current) {
+      applyPendingRef.current = false;
+      state.apply();
+    }
+  });
+
+  const selectStatus = (next: '' | 'pending' | 'in_review') => {
+    state.setDraft((d) => ({ ...d, status: next || undefined }));
+    applyPendingRef.current = true;
+  };
+
+  const queue = useVerificationQueue(state.applied, state.page);
   const items = queue.data?.items ?? [];
-  const pageCount = Math.max(1, Math.ceil((queue.data?.total ?? 0) / ADMIN_QUEUE_PAGE_SIZE));
+  const total = queue.data?.total ?? 0;
+  const counts = queue.data?.counts;
+  const pageCount = Math.max(1, Math.ceil(total / ADMIN_QUEUE_PAGE_SIZE));
+
+  const tabLabel = (base: string, count: number | undefined): string =>
+    count === undefined ? base : `${base} (${formatNumber(count, locale)})`;
+
+  const footerText =
+    total > 0
+      ? t('showing_range', {
+          from: (state.page - 1) * ADMIN_QUEUE_PAGE_SIZE + 1,
+          to: Math.min(state.page * ADMIN_QUEUE_PAGE_SIZE, total),
+          total,
+        })
+      : undefined;
 
   const columns: AdminTableColumn<AdminVerificationQueueItem>[] = [
     {
@@ -91,31 +141,56 @@ export default function AdminVerificationQueuePage() {
       header: t('ver_col_submitted'),
       render: (item) => (item.submittedAt ? formatShamsiDate(item.submittedAt, locale) : '—'),
     },
+    {
+      key: 'waiting',
+      header: t('ver_col_waiting'),
+      render: (item) => {
+        if (!item.submittedAt) return '—';
+        const hours = (Date.now() - new Date(item.submittedAt).getTime()) / MS_PER_HOUR;
+        const color =
+          hours >= WAITING_TIME_ALARM_HOURS
+            ? 'var(--bal-error)'
+            : hours >= WAITING_TIME_WARNING_HOURS
+              ? 'var(--bal-warning)'
+              : undefined;
+        return (
+          <Box component="span" sx={color ? { color } : undefined}>
+            {formatRelativeTime(item.submittedAt, locale, formatShamsiDate)}
+          </Box>
+        );
+      },
+    },
   ];
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <AdminPageHeader
-        title={t('ver_title')}
-        subtitle={t('ver_subtitle')}
-        actions={
-          <TextField
-            select
-            size="small"
-            label={t('ver_col_status')}
-            value={status}
-            onChange={(e) => {
-              setStatus(e.target.value as QueueStatusFilter);
-              setPage(1);
-            }}
-            sx={{ minWidth: 160 }}
-          >
-            <MenuItem value="">{t('filter_all')}</MenuItem>
-            <MenuItem value="pending">{t('agg_pending')}</MenuItem>
-            <MenuItem value="in_review">{t('agg_in_review')}</MenuItem>
-          </TextField>
-        }
-      />
+      <AdminPageHeader title={t('ver_title')} subtitle={t('ver_subtitle')} />
+
+      <Tabs value={state.draft.status ?? ''} onChange={(_event, value: '' | 'pending' | 'in_review') => selectStatus(value)}>
+        <Tab value="" data-tab="all" label={t('filter_all')} />
+        <Tab value="pending" data-tab="pending" label={tabLabel(t('agg_pending'), counts?.pending)} />
+        <Tab value="in_review" data-tab="in_review" label={tabLabel(t('agg_in_review'), counts?.in_review)} />
+      </Tabs>
+
+      <Stack
+        direction="row"
+        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}
+      >
+        <TextField
+          size="small"
+          label={t('ver_search_label')}
+          placeholder={t('ver_search_ph')}
+          value={state.draft.search ?? ''}
+          onChange={(e) => state.setDraft((d) => ({ ...d, search: e.target.value || undefined }))}
+          sx={{ minWidth: 240 }}
+        />
+        <AppButton variant="contained" color="primary" onClick={state.apply}>
+          {t('apply')}
+        </AppButton>
+        <AppButton variant="text" color="inherit" onClick={state.clear}>
+          {t('clear')}
+        </AppButton>
+      </Stack>
 
       {queue.isLoading ? (
         <Stack sx={{ gap: 1 }}>{[0, 1, 2, 3].map((k) => <Skeleton key={k} variant="rounded" height={56} />)}</Stack>
@@ -129,18 +204,23 @@ export default function AdminVerificationQueuePage() {
           rows={items}
           getRowKey={(item) => item.nurseVerificationId}
           ariaLabel={t('ver_title')}
-          onRowClick={(item) => router.push(`/${locale}${adminVerificationCasePath(item.nurseVerificationId)}`)}
+          footer={footerText}
+          onRowClick={(item) =>
+            router.push(
+              queueCaseHref(locale, adminVerificationCasePath(item.nurseVerificationId), state.applied, state.page),
+            )
+          }
         />
       )}
 
       <AdminPager
-        page={page}
+        page={state.page}
         pageCount={pageCount}
-        onPrev={() => setPage((p) => Math.max(1, p - 1))}
-        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+        onPrev={() => state.goToPage(Math.max(1, state.page - 1))}
+        onNext={() => state.goToPage(Math.min(pageCount, state.page + 1))}
         prevLabel={t('prev_page')}
         nextLabel={t('next_page')}
-        indicator={t('page_indicator', { page })}
+        indicator={t('page_indicator', { page: state.page, total: pageCount })}
       />
     </Box>
   );

client/src/app/[locale]/(private-routes)/admin/verification/queueFilters.ts

@@ -0,0 +1,41 @@
+import type { AdminVerificationQueueFilters } from '@/services/verification/types';
+
+/**
+ * The queue's URL-synced filter shape — shared between the list (`page.tsx`, via `useAdminListState`)
+ * and the case detail (`[nurseId]/page.tsx`) so a case page can **re-derive the same query key** the
+ * list primed (`status`/`search`/`page` → `useVerificationQueue`) and reuse its cached page for
+ * next/prev case navigation, with no extra URL param and no duplicate fetch in the common flow.
+ */
+export const EMPTY_QUEUE_FILTERS: AdminVerificationQueueFilters = {};
+
+/** The URL query-param name for the name/phone search (REQ-062's proposed `q`). */
+const SEARCH_PARAM = 'q';
+
+export function parseQueueFilters(params: URLSearchParams): AdminVerificationQueueFilters {
+  const status = params.get('status');
+  return {
+    status: status === 'pending' || status === 'in_review' ? status : undefined,
+    search: params.get(SEARCH_PARAM) ?? undefined,
+  };
+}
+
+export function serializeQueueFilters(filters: AdminVerificationQueueFilters): Record<string, string> {
+  const record: Record<string, string> = {};
+  if (filters.status) record.status = filters.status;
+  if (filters.search) record[SEARCH_PARAM] = filters.search;
+  return record;
+}
+
+/** A case URL carrying the queue's current filters + page, so next/prev navigation (and a browser
+ * back/refresh) keeps resolving against the same cached queue page instead of an unfiltered default. */
+export function queueCaseHref(
+  locale: string,
+  casePath: string,
+  filters: AdminVerificationQueueFilters,
+  page: number,
+): string {
+  const params = new URLSearchParams(serializeQueueFilters(filters));
+  if (page > 1) params.set('page', String(page));
+  const qs = params.toString();
+  return `/${locale}${casePath}${qs ? `?${qs}` : ''}`;
+}

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

@@ -0,0 +1,13 @@
+'use client';
+import { ActivationChecklist } from '@/components';
+
+/**
+ * The dashboard's activation/go-live composition point — **named and exported so a later phase can
+ * find it** (ui-phase-7's hand-off note). ui-phase-8 fills it with the real `ActivationChecklist`
+ * (the same shared component mounted on `/nurse/services`) — replacing the placeholder single-row
+ * verification banner phase 7 left here. Extend this component in place, don't add a second slot.
+ * @component DashboardActivationSlot
+ */
+export default function DashboardActivationSlot() {
+  return <ActivationChecklist />;
+}

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

@@ -0,0 +1,269 @@
+'use client';
+import { ReactNode } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  AccentCard,
+  AppButton,
+  AppLink,
+  CountdownTimer,
+  EmptyState,
+  ErrorState,
+  Money,
+  PageHeader,
+  SurfaceCard,
+} from '@/components';
+import { ROUTES } from '@/constants';
+import { formatRelativeTime, formatShamsiDate, localeTag, parseIrr } from '@/utils';
+import { useNurseRequestInbox } from '@/services/bookingRequests';
+import { useTodaySessions } from '@/services/bookings';
+import { useNurseEarningsBalance } from '@/services/payouts';
+import { coarseResponseLabel } from '@/services/bookingRequests/format';
+import DashboardActivationSlot from './DashboardActivationSlot';
+
+/** 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 «امروز» 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');
+  return (
+    <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 />
+      <RequestsSection />
+      <EarningsSection />
+      <DashboardActivationSlot />
+    </Stack>
+  );
+}
+
+/**
+ * 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 { data, isLoading, isError, refetch } = useTodaySessions();
+
+  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 next = (data?.items ?? []).find((item) => item.status === 'scheduled' || item.status === 'in_progress');
+
+  if (!next) {
+    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' });
+  const timeRangeLabel = `${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeStart}`))} – ${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeEnd}`))}`;
+  const timeUntil = formatRelativeTime(`${next.scheduledDate}T${next.scheduledTimeStart}`, locale, formatShamsiDate);
+
+  return (
+    <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>
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>
+            {next.patientName}
+          </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" fullWidth to={`/${locale}${ROUTES.NURSE_VISITS}`}>
+          {t('next_visit_cta')}
+        </AppButton>
+      </Stack>
+    </AccentCard>
+  );
+}
+
+/** 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 { data, isLoading, isError, refetch } = useNurseRequestInbox();
+
+  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()} />;
+  }
+
+  const items = data?.items ?? [];
+  const total = data?.total ?? 0;
+
+  if (items.length === 0) {
+    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 (
+    <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="outlined"
+            color="primary"
+            fullWidth
+            to={`/${locale}${ROUTES.NURSE_REQUESTS}/${mostUrgent.id}`}
+          >
+            {t('requests_strip_open')}
+          </AppButton>
+        </Stack>
+      </SurfaceCard>
+    </Stack>
+  );
+}
+
+/** 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 { data, isLoading, isError, refetch } = useNurseEarningsBalance();
+
+  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()} />;
+  }
+  if (!data) return null;
+
+  const net = parseIrr(data.netPayableBalanceIrr);
+  const isOwed = net < BigInt(0);
+  const magnitude = isOwed ? -net : net;
+
+  return (
+    <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>
+  );
+}
+
+/** 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 (
+    <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,48 +1,50 @@
 '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 } 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 — submit an IBAN (شبا) + account-holder name, then watch the
- * ownership inquiry resolve through its three states (pending → verified / mismatch). The list
- * polls only while pending; a verified account shows the masked IBAN; mismatch offers re-enter.
+ * 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
+ * states (pending → verified / mismatch, `BankStatusPanel` unchanged). Once at least one account
+ * exists, a persistent «افزودن حساب دیگر» CTA replaces the old form-only-when-empty gate, so a nurse
+ * switching banks is never dead-ended — the old account stays listed until the nurse makes the new
+ * one primary. A failed accounts query renders the error state with retry, **never** the empty-state
+ * form (which would invite a duplicate-IBAN submission blind).
  */
 export default function NurseBankPage() {
   const t = useTranslations('bank');
+  const tc = useTranslations('common');
   const { enqueueSnackbar } = useSnackbar();
 
-  const { data, isLoading } = useNurseBankAccounts();
+  const { data, isLoading, isError, refetch } = useNurseBankAccounts();
   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 && (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 showFormNow = !isLoading && !isError && (accounts.length === 0 || showForm);
 
+  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' });
         },
@@ -64,83 +66,105 @@ export default function NurseBankPage() {
 
       {isLoading ? <AppLoading /> : null}
 
-      {accounts.map((account) => {
-        const status = deriveBankStatus(account);
-        return (
-          <Stack key={account.id} sx={{ gap: 1 }}>
-            <BankStatusPanel
-              status={status}
-              chipLabel={t(`status_${status}_chip`)}
-              title={t(`status_${status}_title`)}
-              body={t(`status_${status}_body`)}
-              ibanMasked={status === 'verified' ? account.ibanMasked : undefined}
-              ibanLabel={t('iban_masked_label')}
-              bankName={account.bankName || undefined}
-              isPrimary={account.isPrimary}
-              primaryLabel={t('primary')}
-              onReenter={status === 'mismatch' ? () => setShowForm(true) : undefined}
-              reenterLabel={t('reenter')}
-            />
-            {/* Promote a verified non-primary account so payouts (gated on matchedNationalId) target it. */}
-            {status === 'verified' && !account.isPrimary ? (
-              <AppButton
-                variant="text"
-                color="primary"
-                disabled={setPrimary.isPending}
-                onClick={() =>
-                  setPrimary.mutate(account.id, {
-                    onSuccess: () => enqueueSnackbar(t('primary_set'), { variant: 'success' }),
-                  })
-                }
-                sx={{ alignSelf: 'flex-start' }}
-              >
-                {t('make_primary')}
-              </AppButton>
-            ) : null}
-          </Stack>
-        );
-      })}
+      {isError ? <ErrorState message={t('load_error')} retryLabel={tc('retry')} onRetry={() => refetch()} /> : null}
 
-      {!isLoading && accounts.length === 0 ? (
+      {!isError
+        ? accounts.map((account) => {
+            const status = deriveBankStatus(account);
+            return (
+              <Stack key={account.id} sx={{ gap: 1 }}>
+                <BankStatusPanel
+                  status={status}
+                  chipLabel={t(`status_${status}_chip`)}
+                  title={t(`status_${status}_title`)}
+                  body={t(`status_${status}_body`)}
+                  ibanMasked={status === 'verified' ? account.ibanMasked : undefined}
+                  ibanLabel={t('iban_masked_label')}
+                  bankName={account.bankName || undefined}
+                  isPrimary={account.isPrimary}
+                  primaryLabel={t('primary')}
+                  onReenter={status === 'mismatch' ? () => setShowForm(true) : undefined}
+                  reenterLabel={t('reenter')}
+                />
+                {/* Promote a verified non-primary account so payouts (gated on matchedNationalId) target it. */}
+                {status === 'verified' && !account.isPrimary ? (
+                  <AppButton
+                    variant="text"
+                    color="primary"
+                    disabled={setPrimary.isPending}
+                    onClick={() =>
+                      setPrimary.mutate(account.id, {
+                        onSuccess: () => enqueueSnackbar(t('primary_set'), { variant: 'success' }),
+                        onError: () => enqueueSnackbar(t('primary_set_error'), { variant: 'error' }),
+                      })
+                    }
+                    sx={{ alignSelf: 'flex-start' }}
+                  >
+                    {t('make_primary')}
+                  </AppButton>
+                ) : null}
+              </Stack>
+            );
+          })
+        : null}
+
+      {!isLoading && !isError && accounts.length === 0 ? (
         <EmptyState icon="bank" title={t('empty_title')} body={t('empty_body')} />
       ) : null}
 
+      {/* An accounts section, not a one-shot form: once at least one account exists, a persistent CTA
+          (rather than "no account yet") lets a nurse switching banks add another — the old account
+          stays listed until they make the new one primary. */}
+      {!isLoading && !isError && accounts.length > 0 && !showForm ? (
+        <AppButton
+          variant="outlined"
+          color="primary"
+          startIcon="add"
+          onClick={() => setShowForm(true)}
+          sx={{ alignSelf: 'flex-start' }}
+        >
+          {t('add_another')}
+        </AppButton>
+      ) : 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
-          />
-          <AppButton
-            color="primary"
-            variant="contained"
-            startIcon="bank"
-            onClick={submit}
-            disabled={addAccount.isPending}
-            sx={{ alignSelf: 'flex-start' }}
-          >
-            {addAccount.isPending ? t('submitting') : t('submit')}
-          </AppButton>
-        </Stack>
+        <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>
+              {accounts.length > 0 ? (
+                <AppButton
+                  variant="text"
+                  onClick={() => {
+                    setShowForm(false);
+                    reset();
+                  }}
+                  disabled={addAccount.isPending}
+                >
+                  {tc('cancel')}
+                </AppButton>
+              ) : null}
+            </Stack>
+          </Stack>
+        </FormProvider>
       ) : null}
     </Box>
   );

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

@@ -2,36 +2,25 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import {
-  Box,
-  Chip,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Paper,
-  Skeleton,
-  Stack,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-} from '@mui/material';
+import { Box, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import { AppButton, AppIcon } from '@/components';
 import { CascadingRegionSelect, type CascadingRegionValue } from '@/components/geography';
 import { ApiError } from '@/lib/api/errors';
-import { useDistricts } from '@/services/geography';
 import { useServiceAreas, useAddServiceArea, useRemoveServiceArea } from '@/services/serviceAreas';
 import { areaExists, type NurseServiceArea } from '@/services/serviceAreas/types';
 
-type Scope = 'whole_city' | 'districts';
 const EMPTY_REGION: CascadingRegionValue = { provinceId: null, cityId: null, districtId: null };
 
 /**
  * The nurse coverage-area editor — the cities/districts a nurse will travel to, so search (f6)
- * can fan them out geographically. Areas render as chips (whole-city shown explicitly); the add
- * control is the cascading dropdowns + a whole-city vs specific-districts scope toggle. A
- * duplicate `(city, district)` is blocked inline before the request (and the server's 409 maps to
- * the same message). Empty → a warning that the nurse won't appear in search.
+ * can fan them out geographically. Areas render as chips (whole-city shown explicitly).
+ *
+ * ui-phase-8: **one control owns the whole-city choice** — `CascadingRegionSelect`'s own district
+ * level, whose "کل شهر" empty option *is* the choice (`districtId = null`, matching the serviceAreas
+ * contract both ways). The separate scope toggle this page used to render is gone — it let a nurse
+ * pick "specific districts" and then still land on the district select's own whole-city option,
+ * tripping a "district required" error the UI itself had offered. City is the only required field;
+ * leaving the district unset is a complete, valid whole-city submission, never an error state.
  */
 export default function NurseCoveragePage() {
   const t = useTranslations('coverage');
@@ -44,22 +33,12 @@ export default function NurseCoveragePage() {
   const removeArea = useRemoveServiceArea();
 
   const [region, setRegion] = useState<CascadingRegionValue>(EMPTY_REGION);
-  const [scope, setScope] = useState<Scope>('whole_city');
   const [cityError, setCityError] = useState(false);
-  const [districtError, setDistrictError] = useState(false);
   const [duplicate, setDuplicate] = useState(false);
   const [removeTarget, setRemoveTarget] = useState<NurseServiceArea | null>(null);
 
   const areas = data?.items ?? [];
 
-  // A whole-city-only city (no districts, e.g. Mashhad) can't satisfy "specific districts" — reads the
-  // same cached districts query the cascade uses to force whole-city, so the toggle never dead-ends on a
-  // district that cannot exist.
-  const districtsQuery = useDistricts(region.cityId);
-  const cityHasNoDistricts =
-    region.cityId != null && districtsQuery.isSuccess && (districtsQuery.data?.length ?? 0) === 0;
-  const effectiveScope: Scope = cityHasNoDistricts ? 'whole_city' : scope;
-
   const chipLabel = (area: NurseServiceArea) => {
     const city = locale === 'en' ? area.cityNameEn : area.cityNameFa;
     if (area.isWholeCity) return `${city} · ${t('whole_city_chip')}`;
@@ -67,33 +46,21 @@ export default function NurseCoveragePage() {
     return `${city} · ${district}`;
   };
 
-  const changeScope = (next: Scope | null) => {
-    if (!next) return;
-    setScope(next);
-    setDistrictError(false);
-    setDuplicate(false);
-    // Whole-city ignores any picked district — clear it so the submitted pair is unambiguous.
-    if (next === 'whole_city') setRegion((prev) => ({ ...prev, districtId: null }));
-  };
-
   const resetForm = () => {
     setRegion(EMPTY_REGION);
-    setScope('whole_city');
     setCityError(false);
-    setDistrictError(false);
     setDuplicate(false);
   };
 
   const handleAdd = () => {
     const cityInvalid = region.cityId == null;
-    const districtInvalid = effectiveScope === 'districts' && region.districtId == null;
     setCityError(cityInvalid);
-    setDistrictError(districtInvalid);
     setDuplicate(false);
-    if (cityInvalid || districtInvalid) return;
+    if (cityInvalid) return;
 
     const cityId = region.cityId as number;
-    const districtId = effectiveScope === 'whole_city' ? null : region.districtId;
+    // Whatever the district select currently holds is the complete choice — `null` = whole city.
+    const districtId = region.districtId;
 
     // Fast path: block a duplicate before firing (null district treated as a real value).
     if (areaExists(areas, cityId, districtId)) {
@@ -123,6 +90,7 @@ export default function NurseCoveragePage() {
     setRemoveTarget(null);
     removeArea.mutate(id, {
       onSuccess: () => enqueueSnackbar(t('removed'), { variant: 'success' }),
+      onError: () => enqueueSnackbar(t('remove_error'), { variant: 'error' }),
     });
   };
 
@@ -164,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,
@@ -185,44 +153,21 @@ 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')}
           </Typography>
 
-          <Stack sx={{ gap: 1 }}>
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {t('scope_label')}
-            </Typography>
-            <ToggleButtonGroup
-              exclusive
-              size="small"
-              color="primary"
-              value={effectiveScope}
-              onChange={(_event, next: Scope | null) => changeScope(next)}
-            >
-              <ToggleButton value="whole_city">{t('scope_whole_city')}</ToggleButton>
-              {/* A district-less city forces whole-city — disable the option rather than dead-end on it. */}
-              <ToggleButton value="districts" disabled={cityHasNoDistricts}>
-                {t('scope_districts')}
-              </ToggleButton>
-            </ToggleButtonGroup>
-          </Stack>
-
           <CascadingRegionSelect
             value={region}
             onChange={(next) => {
               setRegion(next);
               if (cityError && next.cityId != null) setCityError(false);
-              if (districtError && next.districtId != null) setDistrictError(false);
               setDuplicate(false);
             }}
-            includeDistrict={effectiveScope === 'districts'}
             cityError={cityError}
             cityErrorText={t('city_required')}
-            districtError={districtError}
-            districtErrorText={t('district_required')}
           />
 
           {duplicate ? (

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

@@ -2,10 +2,11 @@
 import { useMemo, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { Box, Collapse, Paper, Skeleton, Stack, Tab, Tabs, Typography } from '@mui/material';
-import { AppButton, AppIcon, EarningsBalanceHeader, EarningsRow, EmptyState, ErrorState } from '@/components';
-import { nurseBookingDetailPath, nursePayoutDetailPath } from '@/constants';
-import { formatNumber } from '@/utils';
+import { Box, ButtonBase, Collapse, Paper, Skeleton, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { AppIcon, EarningsBalanceHeader, EarningsRow, EmptyState, ErrorState, Money, Pager, SurfaceCard } from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
+import { DISPUTE_WINDOW_HOURS, nurseBookingDetailPath, nursePayoutDetailPath } from '@/constants';
+import { formatShamsiDate } from '@/utils';
 import { PAYOUTS_PAGE_SIZE } from '@/services/payouts/constants';
 import { EARNINGS_STATES, type EarningsState } from '@/services/payouts/types';
 import { useNurseEarnings, useNurseEarningsBalance } from '@/services/payouts';
@@ -46,7 +47,7 @@ export default function NurseEarningsPage() {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
       <Box>
         <Typography variant="h5" component="h1">
           {t('title')}
@@ -61,7 +62,10 @@ export default function NurseEarningsPage() {
       ) : balance.isError ? (
         <ErrorState message={t('balance_error')} retryLabel={t('retry')} onRetry={() => balance.refetch()} />
       ) : balance.data ? (
-        <EarningsBalanceHeader summary={balance.data} />
+        <>
+          <EarningsBalanceHeader summary={balance.data} />
+          <ForecastLine nextPayoutDate={balance.data.nextPayoutDate} nextPayoutEligibleAmountIrr={balance.data.nextPayoutEligibleAmountIrr} />
+        </>
       ) : null}
 
       <ExplainerCard open={explainerOpen} onToggle={() => setExplainerOpen((v) => !v)} />
@@ -108,7 +112,42 @@ export default function NurseEarningsPage() {
   );
 }
 
-/** Collapsible "how payouts work" — the cadence + dispute-window + method-invariant copy (both locales). */
+/** The «برداشت بعدی» forecast — server-served only (REQ-053); renders nothing until the earnings read
+ * serves both fields (never computed client-side — holiday shifting + eligibility are backend truth). */
+function ForecastLine({
+  nextPayoutDate,
+  nextPayoutEligibleAmountIrr,
+}: {
+  nextPayoutDate: string | null | undefined;
+  nextPayoutEligibleAmountIrr: string | null | undefined;
+}) {
+  const t = useTranslations('payouts');
+  const locale = useLocale();
+  if (!nextPayoutDate || !nextPayoutEligibleAmountIrr) return null;
+
+  return (
+    <SurfaceCard padding="sm" data-widget="payout-forecast">
+      <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
+          <AppIcon icon="calendar" size={18} color="var(--bal-primary)" />
+          <Typography variant="body2" sx={{ fontWeight: 700 }}>
+            {t('forecast_label')}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('forecast_on_date', { date: formatShamsiDate(nextPayoutDate, locale) })}
+          </Typography>
+        </Stack>
+        <Money amountIrr={nextPayoutEligibleAmountIrr} size="md" tone="emphasis" sx={{ fontWeight: 700 }} />
+      </Stack>
+    </SurfaceCard>
+  );
+}
+
+const EXPLAINER_CONTENT_ID = 'nurse-earnings-explainer-content';
+
+/** Collapsible "how payouts work" — the cadence + dispute-window + method-invariant copy (both locales).
+ * A real `ButtonBase` toggle (`aria-expanded` + `aria-controls`) replaces the bare `onClick` Stack, and the
+ * registered `expand` chevron (rotated when open) replaces the eye icons. */
 function ExplainerCard({ open, onToggle }: { open: boolean; onToggle: () => void }) {
   const t = useTranslations('payouts');
   const points = useMemo(() => ['explainer_point_1', 'explainer_point_2', 'explainer_point_3'] as const, []);
@@ -118,17 +157,18 @@ 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',
         borderInlineStartColor: 'var(--bal-info)',
       }}
     >
-      <Stack
-        direction="row"
-        sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}
+      <ButtonBase
         onClick={onToggle}
+        aria-expanded={open}
+        aria-controls={EXPLAINER_CONTENT_ID}
+        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)" />
@@ -136,13 +176,18 @@ function ExplainerCard({ open, onToggle }: { open: boolean; onToggle: () => void
             {t('explainer_title')}
           </Typography>
         </Stack>
-        <AppIcon icon={open ? 'visibilityoff' : 'visibilityon'} size={18} color="var(--bal-text-secondary)" />
-      </Stack>
-      <Collapse in={open}>
+        <AppIcon
+          icon="expand"
+          size={18}
+          color="var(--bal-text-secondary)"
+          style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--bal-motion-fast) var(--bal-easing-standard)' }}
+        />
+      </ButtonBase>
+      <Collapse in={open} id={EXPLAINER_CONTENT_ID}>
         <Stack component="ul" sx={{ gap: 0.75, mt: 1.5, mb: 0, pl: 2.5 }}>
           {points.map((key) => (
             <Typography key={key} component="li" variant="body2" sx={{ color: 'text.secondary' }}>
-              {t(key)}
+              {key === 'explainer_point_2' ? t(key, { hours: DISPUTE_WINDOW_HOURS }) : t(key)}
             </Typography>
           ))}
         </Stack>
@@ -150,35 +195,3 @@ function ExplainerCard({ open, onToggle }: { open: boolean; onToggle: () => void
     </Paper>
   );
 }
-
-/** Prev/next pager — rendered only when there is more than one page. */
-function Pager({
-  page,
-  pageCount,
-  onPrev,
-  onNext,
-}: {
-  page: number;
-  pageCount: number;
-  onPrev: () => void;
-  onNext: () => void;
-}) {
-  const t = useTranslations('payouts');
-  const locale = useLocale();
-  if (pageCount <= 1) return null;
-  const fmt = (n: number) => formatNumber(n, locale);
-
-  return (
-    <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
-        {t('page_prev')}
-      </AppButton>
-      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-        {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
-      </Typography>
-      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
-        {t('page_next')}
-      </AppButton>
-    </Stack>
-  );
-}

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

@@ -5,8 +5,10 @@ import { useLocale, useTranslations } from 'next-intl';
 import { Box, Divider, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import { AppButton, AppIcon, Money, PriceBreakdown, StatusChip } from '@/components';
 import type { StatusKind } from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { nurseBookingDetailPath, ROUTES } from '@/constants';
 import { formatShamsiDate, parseIrr } from '@/utils';
+import { failureReasonLabelKey } from '@/services/payouts/failureReasons';
 import { useNursePayoutDetail } from '@/services/payouts';
 import type { PayoutBatchStatus, PayoutStatus } from '@/services/payouts/types';
 
@@ -42,7 +44,7 @@ export default function NursePayoutDetailPage() {
   const { data, isLoading, isError } = useNursePayoutDetail(Number.isFinite(payoutId) ? payoutId : undefined);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
       <Stack sx={{ gap: 0.5 }}>
         <AppButton
           variant="text"
@@ -64,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 }}>
@@ -110,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',
@@ -123,9 +125,12 @@ export default function NursePayoutDetailPage() {
                   {t('failure_title')}
                 </Typography>
               </Stack>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t(failureReasonLabelKey(data.failureReason))}
+              </Typography>
               {data.failureReason ? (
                 <Typography variant="caption" sx={{ color: 'text.secondary' }} dir="ltr">
-                  {t('failure_reason_label')}: {data.failureReason}
+                  {data.failureReason}
                 </Typography>
               ) : null}
               <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
@@ -169,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/earnings/payouts/page.tsx

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { Box, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, EmptyState, ErrorState, PayoutHistoryRow } from '@/components';
+import { AppButton, EmptyState, ErrorState, Pager, PayoutHistoryRow } from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
 import { nursePayoutDetailPath, ROUTES } from '@/constants';
-import { formatNumber } from '@/utils';
 import { PAYOUTS_PAGE_SIZE } from '@/services/payouts/constants';
 import { useNursePayoutHistory } from '@/services/payouts';
 
@@ -26,10 +26,9 @@ export default function NursePayoutHistoryPage() {
   const items = history.data?.items ?? [];
   const total = history.data?.total ?? 0;
   const pageCount = Math.max(1, Math.ceil(total / PAYOUTS_PAGE_SIZE));
-  const fmt = (n: number) => formatNumber(n, locale);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
       <Stack sx={{ gap: 0.5 }}>
         <AppButton
           variant="text"
@@ -70,19 +69,12 @@ export default function NursePayoutHistoryPage() {
         </Stack>
       )}
 
-      {pageCount > 1 ? (
-        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
-          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
-            {t('page_prev')}
-          </AppButton>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
-          </Typography>
-          <AppButton variant="text" color="primary" onClick={() => setPage((p) => Math.min(pageCount, p + 1))} disabled={page >= pageCount}>
-            {t('page_next')}
-          </AppButton>
-        </Stack>
-      ) : null}
+      <Pager
+        page={page}
+        pageCount={pageCount}
+        onPrev={() => setPage((p) => Math.max(1, p - 1))}
+        onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
+      />
     </Box>
   );
 }

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/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { PlaceholderScreen } from '@/components';
+import NurseDashboardScreen from './NurseDashboardScreen';
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
   const { locale } = await params;
@@ -8,8 +8,6 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   return { title: t('dashboard') };
 }
 
-export default async function NurseDashboardPage() {
-  const t = await getTranslations('nav');
-  const tShell = await getTranslations('shell');
-  return <PlaceholderScreen icon="dashboard" title={t('dashboard')} description={tShell('placeholder_body')} />;
+export default function NurseDashboardPage() {
+  return <NurseDashboardScreen />;
 }

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 />;
+}