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

> **Change List v1.1 pack — CL-2 (new role).** Built 2026-06-19, mirroring the ANCHOR mobile pack (`staff-court-monitor-mobile/`) file-for-file in structure, fidelity, and visual style.
> **Persona:** **Suresh Kale** · Technician (`TECH`) · Maintenance team in Game Zone **Ahmedabad-1**. Reports to **Mahesh Patil (Maintenance Team Leader)**. Mobile-primary; works **Work-Orders**, not checklists.
> **Platform:** **Mobile (Flutter) — portrait, ~390px baseline.** A thin web read-only fallback exists (`M + W read-only` per `SCREEN_LIST`) 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 (camera) on the Done screen.

---

## 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) — start, photo-gated Done, reason-required Return, no-approve, own-WO scope. |
| `api-contract.md` | Every endpoint this role consumes (`Method \| Path \| Roles \| Body \| Returns`) — start / done(+photo) / return + reads. |
| `HANDOFFS.md` | Cross-role touchpoints — receives assignment from the Maintenance TL; Done closes the action; Return routes back to the Maintenance TL. |
| `flows/` | `assigned-to-fixed.md`, `cant-fix-return.md` — multi-step walkthroughs. |
| `screens/` | Self-contained HTML mockups (mobile portrait ~390px) — the pixel target. |
| `states/` | loading / empty (nothing-assigned) / error / offline (online-only retry) / 403 / 401 / locked variants. |
| `bottom-sheets/` | photo-capture (Camera / Gallery) · return-reason · confirm-done sheets. |
| `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 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 assign → done/return touchpoints (don't reinvent the contract — it's shared with `maintenance-tl-web`).
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` | `TECH-DASH` |
| 2 | Work-Orders | `wrench` | `TECH-WO-TODAY` → `TECH-WO-DETAIL` |
| 3 | Done | `check-circle-2` | `TECH-WO-DONE` (mark fixed + photo) |
| 4 | Returned | `undo-2` | `TECH-WO-RETURN` (return with reason) |
| 5 | More | `more-horizontal` | Alerts / Profile / Logout |

> The Technician has **no Approve/Verify/Assign/Outsource slot** (per `PROJECT_PLAN §3` + CL-2 access matrix — he only starts, marks-done-with-photo, or returns-with-reason). The orange FAB (camera) appears on the **Done** screen 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. Per `DESIGN_SYSTEM.md`.
- **Work-Order state colors (`DESIGN_SYSTEM §2.4`, CL-2):** open `#94A3B8` · routed `#7FB2E5` · assigned `#2E6DB4` · in-progress `#C2410C` (deep-orange) · returned `#E0860B` · done `#1E9E5A` · outsourced `#16284A` · overdue **solid** `#ED1C24`. Status by label+icon+color, never color alone.
- **Done is photo-gated (mandatory fix photo):** ≥1 `WorkOrderPhoto` (`kind: COMPLETION`) before Done can succeed (mirrors `§4a`). On Done the action **CLOSES at the maintenance level** — never reaches the Store Manager.
- **Return requires a reason:** a non-empty `returnReason` before Return can succeed; routes back to the **Maintenance TL** (never the Store Manager directly).
- **Online-only.** Network failure → "No connection — retry" state; the in-memory draft (fix note / staged photo / reason) is preserved + re-POSTed on retry. No offline DB.
- **Dynamic RBAC.** The app renders nav + permissions from the `/me` response — no hardcoded role logic. Technician sees only **own assigned work-orders / own Game Zone / own maintenance team**.
- **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 Technician cannot approve (`§3`). The inspection cascade (TL → SM → OH) lives in the operations packs.
- **Filling inspection / cleaning checklists** — that's the Monitor / Cleaning Supervisor role. The Technician **fixes Work-Orders** branched off A-items; he does not tick G/A checklists.
- **Routing A-items to maintenance** — that's the operations TL (`TL-CHK-VERIFY` "Route to Maintenance").
- **Assigning / reassigning WOs, reviewing returns, escalating / outsourcing to the Store Manager** — all live in the Maintenance TL pack (`maintenance-tl-web`). Only `OUTSOURCED` WOs reach the SM, and only the Maintenance TL can outsource.
- **Building rosters, templates, reports, onboarding** — operations / OH / SM packs.
- **The web read-only fallback** is a P2 secondary surface; this pack is the mobile pixel target.

---

## File references

- Pack root: `docs/design/dev-mode-v1.0/technician-mobile/`
- Anchor pack mirrored: `docs/design/dev-mode-v1.0/staff-court-monitor-mobile/`
- Upstream pack (assigner): `docs/design/dev-mode-v1.0/maintenance-tl-web/` (`MTL-WO-ASSIGN`, `MTL-WO-REVIEW`)
- Foundation: `docs/dev-mode-v1.0/FOUNDATION_SPEC.md` (§4a Work-Order flow + endpoints, §5 TECH scoping, WorkOrder model)
- Change list: `docs/CHANGE_LIST_v1.1.md` (CL-2)
- Project plan: `docs/PROJECT_PLAN.md` · Screen list: `docs/design/SCREEN_LIST.md` · Design system: `docs/design/DESIGN_SYSTEM.md`
