# Cleaning Supervisor (Mobile) — Dev-mode v1.0 design pack

> **Step 3b — a near-mechanical CLONE of the ANCHOR pack** (`staff-court-monitor-mobile`). Built 2026-06-18.
> Same mobile shell, same fill → submit → status flow, same RBAC posture (filler-only, **cannot approve**). The only deltas are **cleaning/hygiene checklist content**, the **slot-2 nav label/icon** ("Cleaning" · `spray-can`), and the persona. If a behaviour is not called out as different here, it is **identical to the anchor** — do not diverge.
> **Persona:** **Suresh Yadav** · Cleaning Supervisor (`CS`) · rostered **Cleaning / Hygiene · Morning shift (10:00–16:00)** in Game Zone **Ahmedabad-1**. Reports to Priya Nair (Team Leader).
> **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, deltas vs the anchor, 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` | 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 (incl. `CS-ASSIGN`, CL-5).
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 — it is the same producer touchpoint as the anchor).
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` | `CS-DASH` |
| 2 | **Cleaning** | **`spray-can`** | `CS-CHK-TODAY` → `CS-CHK-FILL` / `CS-CHK-SUBMIT` |
| 3 | **Assign** *(CL-5)* | **`user-plus`** | `CS-ASSIGN` (allocate cleaning staff to areas) |
| 4 | Status | `git-branch` | `CS-CHK-STATUS` |
| 5 | More | `more-horizontal` | **Roster** / Alerts / Profile / Logout |

> The Cleaning Supervisor has **no Approve/Verify slot** (per `PROJECT_PLAN §3` access matrix — only tick + photo + submit). Slot 2 is labelled **"Cleaning"** with the `spray-can` glyph (vs the anchor's "Checklists" + `list-checks`). **Slot 3 = "Assign" (`user-plus`, CL-5)** — the CS's light task-allocation: he **decides which cleaning staff works where** AND **fills the cleaning checklist himself**. With Assign taking slot 3, **Roster moves into "More"** (`CS-ROSTER-OWN` still read-only). The orange FAB (camera) appears on fill screens only.

## What is DIFFERENT from the anchor (the only deltas)

| Aspect | Anchor (Staff Court Monitor) | This pack (Cleaning Supervisor) |
|---|---|---|
| Persona | Ramesh Kumar (MON), Trampoline·Morning | **Suresh Yadav (CS), Cleaning/Hygiene·Morning** |
| Slot-2 nav | "Checklists" · `list-checks` | **"Cleaning" · `spray-can`** |
| Slot-3 nav | Status (`git-branch`) | **Assign · `user-plus` (CL-5)** — CS allocates cleaning staff to areas (`CS-ASSIGN`); Status moves to slot 4, Roster into More |
| Task allocation | none (filler only) | **`CS-ASSIGN` (CL-5)** — AllocationBoard: allocate staff→area; the CS still **fills** the cleaning checklist himself |
| Auto-assigned templates | ride-safety (Trampoline Daily + Opening) | **cleaning/hygiene** ("Cleaning / Hygiene — Daily", washroom/café/court hygiene from the Park Opening/Closing checklist) |
| Certified-ride gate | role + certified ride + shift | **role + cleaning area + shift** — CS is not ride-certified; cleaning is park-wide (auto-assign matches the cleaning/hygiene category, not a ride cert). See `api-contract.md` note + `spec.md`. |
| Screen IDs | `MON-*` | `CS-*` |
| Item content example | "Check trampoline beds for tears" | **"Clean & sanitize all playing surfaces (no ammonia)", "Washroom — no odours, toilets flushing, soap/paper stocked", "Bins emptied", "Baby-changing disinfected"** |

Everything else — the G/A toggle, the photo gates (≥1 completion + per-A-item issue photo), the submit cascade producer touchpoint (notify TL), the send-back-to-filler banner, offline-retry, read-only roster, dynamic RBAC, local-disk photo storage — is **identical** to the anchor. The **one structural addition** beyond the anchor is **`CS-ASSIGN` (CL-5)** — a light AllocationBoard where the Cleaning Supervisor allocates cleaning staff to areas/zones; he still fills the cleaning checklist himself and still cannot approve.

## 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** (`PROJECT_PLAN §9 #7`) + one issue photo per A item before submit can succeed (`§4a`).
- **Server time + auto initials** (`§9 #9`): each response's time-stamp is **server time** (tamper-proof) and the initials are **auto-derived from the logged-in user** — not manual entry / device time.
- **Online-only.** Network failure → "No connection — retry" state; in-memory draft preserved + re-POSTed on retry. No offline DB.
- **Dynamic RBAC.** The app renders nav + permissions from the `/me` response — no hardcoded role logic. CS sees only **own roster / own assigned cleaning 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 — the Cleaning Supervisor cannot approve (`§3`). The cascade (TL → SM → OH) lives in the TL/SM/OH packs.
- **Building or editing rosters** — CS's roster is **read-only** (`CS-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/cleaning-supervisor-mobile/`
- **Anchor (the template this clones):** `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 Suresh / Cleaning Supervisor row, Stage D3)
