# Staff Court Monitor (Mobile) — Dev-mode v1.0 design pack · ANCHOR

> **Slot 5 of the dev-mode v1.0 series — the ANCHOR pack.** Built 2026-06-18.
> **This pack sets the TEMPLATE** for the remaining 6 role packs (Step 3b). The two other filler roles (Senior Court Monitor, Cleaning Supervisor) are near-mechanical clones of this pack — same fill→submit→status flow, different auto-assigned templates + nav label.
> **Persona:** **Ramesh Kumar** · Staff Court Monitor (`MON`) · 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, 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. |
| `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. |
| `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` | ~11-point 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 7 screens.
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 (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` | `MON-DASH` |
| 2 | Checklists | `list-checks` | `MON-CHK-TODAY` → `MON-CHK-FILL` / `MON-CHK-SUBMIT` |
| 3 | Status | `git-branch` | `MON-CHK-STATUS` |
| 4 | Roster | `calendar-days` | `MON-ROSTER-OWN` |
| 5 | More | `more-horizontal` | Alerts / Profile / Logout |

> Monitors have **no Approve/Verify slot** (per `PROJECT_PLAN §3` access matrix — they only tick + photo + submit). The orange FAB (camera) appears on fill screens only.

## 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`).
- **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**, `MON-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. Monitor sees only **own roster / own assigned checklists / own Game Zone**.
- **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 — Monitors cannot approve (`§3`). The cascade (TL → SM → OH) lives in the TL/SM/OH packs.
- **Building or editing rosters** — Monitor's roster is **read-only** (`MON-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/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 Ramesh example, Stages D–F)
