# Senior Court Monitor (Mobile) — Dev-mode v1.0 design pack

> **Step 3b — slot built from the ANCHOR** (Staff Court Monitor). Built 2026-06-18.
> **This role is a near-twin of the anchor** (`docs/design/dev-mode-v1.0/staff-court-monitor-mobile/`): same fill→submit→status flow, same mobile shell, same bottom-sheets and states. It does **everything the Staff Court Monitor does** — fill checklist (G/A) + mandatory completion photo + per-A-item issue photo + submit + track own status + read own roster — and **CANNOT approve** (approval starts at TL, `PROJECT_PLAN §3`).
> **What is ADDED vs the anchor:** one **read-only Team / Zone status view** (`SCM-TEAM-STATUS`) — oversight of the zone's Staff Court Monitors' checklist submissions for today. Senior = more experienced, so they get visibility, **not** approval. No approve/verify buttons anywhere.
> **Persona:** **Karan Patel** · Senior Court Monitor (`SCM`) · rostered **Trampoline · Morning shift (10:00–16:00)** in Game Zone **Ahmedabad-1**. Reports to Priya Nair (Team Leader). Trampoline-certified.
> **Platform:** **Mobile (Flutter) — portrait, ~390px baseline.** Mobile is this role's *primary* surface (`SCREEN_LIST` surface key); a thin web read-only fallback exists but is NOT this pack's pixel target.
> **Chrome:** Maniax mobile shell per `DESIGN_SYSTEM §8.2` — navy 56px top app bar + Game-Zone scope strip + 56px bottom nav (5 slots) + orange FAB on fill screens.

---

## What's in this pack

| File / folder | What |
|---|---|
| `README.md` | You are here — slot scope, persona, bottom-nav, the added Team view, out-of-slot. |
| `SCREENS.md` | Full mobile screen inventory (the FE burn-down checklist) with states/sheets per screen. |
| `spec.md` | Per-screen acceptance detail (Given/When/Then) — G/A toggle behaviour, photo gates, offline-retry, RBAC scope, the read-only Team view. |
| `api-contract.md` | Every endpoint this role consumes (`Method \| Path \| Roles \| Body \| Returns`). |
| `HANDOFFS.md` | Cross-role touchpoints — submit fires into TL's approval queue; send-back returns here; Team view consumes the zone monitors' read model. |
| `flows/` | `fill-checklist-with-photo.md`, `submit-and-track-approval.md` — multi-step walkthroughs. |
| `screens/` | Self-contained HTML mockups (mobile portrait ~390px) — the pixel target. |
| `states/` | loading / empty / error / offline-retry / locked / 403 state variants. |
| `bottom-sheets/` | photo-capture sheet · A-(Action required) note+photo sheet · confirm-submit sheet. |
| `handoff/README.md` | Definition of Done + blocking questions for this slot. |
| `handoff/tasks.md` | Task rows: Screen ID, file, states/sheets, dependencies, Mobile-FE + Backend tasks, priority. |

## How to read this pack

1. Start with **`SCREENS.md`** — the full bird's-eye of the 8 screens (7 anchor-mirror + 1 added Team view).
2. Use **`handoff/README.md`** DoD as your tick-list.
3. For each screen, read its **`spec.md`** section + the relevant **`flows/`** walkthrough + the **`api-contract.md`** rows.
4. Use **`HANDOFFS.md`** when wiring the submit→cascade touchpoint and the Team-view read model (don't reinvent the contract).
5. Open any `screens/*.html` in a browser at 390px width (DevTools device mode) to see the visual contract.

## Bottom-nav (5 slots — `DESIGN_SYSTEM §7`)

| Slot | Label | Lucide | Target screen |
|---|---|---|---|
| 1 | Home | `layout-dashboard` | `SCM-DASH` |
| 2 | Checklists | `list-checks` | `SCM-CHK-TODAY` → `SCM-CHK-FILL` / `SCM-CHK-SUBMIT` |
| 3 | Status | `git-branch` | `SCM-CHK-STATUS` |
| 4 | Roster | `calendar-days` | `SCM-ROSTER-OWN` |
| 5 | More | `more-horizontal` | Team status · Alerts / Profile / Logout |

> Exactly **5 bottom-nav slots** (per `DESIGN_SYSTEM §7` — the shell is identical to the anchor's). The added **Team / Zone status** view (`SCM-TEAM-STATUS`) is reached from the **More tab** and from a card on **Home** — it is **not** a 6th nav slot. Senior Monitors have **no Approve/Verify slot** (per `PROJECT_PLAN §3` access matrix — they only tick + photo + submit, plus read-only oversight). The orange FAB (camera) appears on fill screens only.

## What's NEW in this slot (vs the anchor)

- **`SCM-TEAM-STATUS` — Team / Zone status (read-only).** A senior monitor can *see* how the Staff Court Monitors in their zone are doing today: each monitor's auto-assigned checklists with live `StatusBadge` (Not started / In progress / Submitted / Sent back / Overdue) and a per-monitor completion count. **View-only — no Approve, no Send-back, no Edit.** Tapping a row opens a read-only detail (photos + cascade timeline), never an approval screen. Scope = SCM's Game Zone + own team (the monitors reporting to the same TL). Surfaces a senior's experience for informal coaching, not formal approval (which is TL+).

Everything else mirrors the anchor exactly: login, Home, Today's checklists, Fill (G/A + photo gates), Submit, My Status, My Roster, Profile/More.

## Hard constraints (re-affirmed)

- **Mobile portrait only.** 390px baseline. Bottom sheets (not desktop modals). Navy bottom-nav, orange FAB.
- **Design tokens:** Maniax palette (`#F58220` orange / `#ED1C24` red / `#2E6DB4` blue / `#16284A` navy / `#7FB2E5` light-blue), **DM Sans**, **navy-on-orange** primary buttons, light-blue as fill-only. Per `DESIGN_SYSTEM.md`.
- **G is always green, A is always red-orange** everywhere (toggle, badge, item row). Status by label+icon+color, never color alone.
- **Photo gates are mandatory:** ≥1 completion photo + one issue photo per A item before submit can succeed (`PROJECT_PLAN §4a`, §9 #7).
- **Server time + auto initials (§9 #9):** per-item time-stamp is server time; initials auto-derived from the logged-in user — no manual time/initials entry.
- **Online-only.** Network failure → "No connection — retry" state; in-memory draft preserved + re-POSTed on retry. No offline DB.
- **Live ride-retarget (CL-4).** When the **Team Leader reassigns the monitor to a new ride mid-shift**, `SCM-CHK-TODAY` updates **live via FCM** (online-only): it shows a dismissible **"Ride changed — your checklists were updated"** banner and refreshes to the new ride's auto-assigned checklists (the old ride's list moves to whoever now holds it). State: `states/ride-changed.html`. Informational only — the monitor still cannot approve.
- **Dynamic RBAC.** The app renders nav + permissions from the `/me` response — no hardcoded role logic. SCM sees only **own roster / own assigned checklists / own Game Zone**, plus **read-only** visibility of own team's submissions.
- **Local-disk photo storage** on the VPS (multipart upload), no cloud bucket pickers.
- **English-only, single-tenant.** No language/tenant/theme switcher.

## What's NOT in this slot

- **Approving / verifying** any checklist — Senior Monitors cannot approve (`§3`). The cascade (TL → SM → OH) lives in the TL/SM/OH packs. The Team view is **read-only**.
- **Building or editing rosters** — SCM's roster is **read-only** (`SCM-ROSTER-OWN`). Roster build lives in SM/TL packs.
- **Creating / assigning checklist templates** — auto-assign is server-side; manual assign/override lives in SM/TL packs.
- **Reports** (positive/negative/overdue) — those roll up to TL/SM/OH.
- **Onboarding users, Game Zones, rides** — OH/SM packs.
- **The web read-only fallback** is a P2 secondary surface; this pack is the mobile pixel target.
- **Rotation, Capacity, Training, Events, School Visits** — out of Phase 1 (P3–P5).

---

## File references

- Pack root: `docs/design/dev-mode-v1.0/senior-court-monitor-mobile/`
- Anchor (mirror): `docs/design/dev-mode-v1.0/staff-court-monitor-mobile/`
- Foundation: `docs/dev-mode-v1.0/FOUNDATION_SPEC.md` (schema, API conventions, auto-assign, cascade)
- Dev plan: `docs/dev-mode-v1.0/DEV_EXECUTION_PLAN.md`
- Project plan: `docs/PROJECT_PLAN.md` · Screen list: `docs/design/SCREEN_LIST.md` · Design system: `docs/design/DESIGN_SYSTEM.md`
- Workflow: `docs/WORKFLOW_GUIDE.md` (the Karan/Senior-Monitor cast, Stages D–F)
