# Store Manager (Web) — Dev-mode v1.0 design pack

> **Step 3b role pack — mirrors the ANCHOR** (`staff-court-monitor-mobile/`) file-for-file (web → `modals/` instead of `bottom-sheets/`). Built 2026-06-18.
> **Persona:** **Rohit Shah** · Store Manager (`SM`) · scoped to **one Game Zone — Ahmedabad-1**. Reports to Anjali Mehta (Operation Head). He owns his branch end-to-end: staff, rosters, checklist assignment, **second-level approval**, and own-zone reports.
> **Platform:** **Web (Next.js + Tailwind) — desktop 1440×900.** Web is this role's *primary* surface (`SCREEN_LIST` surface key); a thin mobile companion for on-floor approvals is a P2 secondary surface, NOT this pack's pixel target.
> **Chrome:** Maniax web shell per `DESIGN_SYSTEM §8.1` — **240px navy sidebar** (wordmark lockup + data-driven nav, orange active accent) + **64px sticky topbar** (search · **non-interactive branch badge** · bell · profile) + breadcrumb + content well (`bg #F5F7FA`, 40px top / 32px side padding).

---

## What's in this pack

| File / folder | What |
|---|---|
| `README.md` | You are here — slot scope, persona, sidebar, out-of-slot. |
| `SCREENS.md` | Full web screen inventory (the FE burn-down checklist) with states/modals per screen. |
| `spec.md` | Per-screen acceptance detail (Given/When/Then) — roster build/upload/publish, checklist assign/override, SM approval (Approve → OH / Send-back → filler), reports, RBAC scope. |
| `api-contract.md` | Every endpoint this role consumes (`Method \| Path \| Roles \| Body \| Returns`). |
| `HANDOFFS.md` | Cross-role touchpoints — publish fires auto-assign; SM approve passes up to OH; SM send-back returns to the original filler. |
| `flows/` | `roster-build-publish-autoassign.md`, `approve-cascade-and-sendback.md` — multi-step walkthroughs. |
| `screens/` | Self-contained HTML mockups (web 1440×900) — the pixel target. |
| `states/` | loading / empty / error / 403 / 401-session-expired / locked state variants. |
| `modals/` | publish-roster confirm · send-back-reason · assign/override · bulk-upload validation-errors · reassign-manager confirm · **outsource-decision confirm** (CL-2). |
| `handoff/README.md` | ~12-point Definition of Done + blocking questions for this slot. |
| `handoff/tasks.md` | Task rows: Screen ID, file, states/modals, dependencies, Web-FE + Backend tasks, priority. |

## How to read this pack

1. Start with **`SCREENS.md`** — the full bird's-eye of the 22 screens (21 SM role screens + the auth entry).
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 publish→auto-assign and approve→OH / send-back→filler touchpoints (don't reinvent the contract).
5. Open any `screens/*.html` in a browser at 1440px width (DevTools desktop) to see the visual contract.

## Sidebar (8 nav items, 3 groups — `DESIGN_SYSTEM §7`)

| Group | Item | Lucide | Target screen |
|---|---|---|---|
| OVERVIEW | Dashboard | `layout-dashboard` | `SM-DASH` |
| OVERVIEW | Hierarchy | `network` | `SM-HIER-TREE` |
| PEOPLE | Team / Users | `users` | `SM-USERS` |
| OPERATIONS | Roster | `calendar-days` | `SM-ROSTER` (→ Upload / Templates / Leave / Publish) |
| OPERATIONS | Checklists | `list-checks` | `SM-CHK-OVERVIEW` (→ Assign / Approve) |
| OPERATIONS | Upload Check List *(CL-1, replaces Templates)* | `clipboard-list` | `SM-CHK-UPLOAD` (→ Assign / Edit) |
| OPERATIONS | Outsource Inbox *(CL-2)* | `wrench` | `SM-WO-OUTSOURCE` |
| OPERATIONS | Reports | `bar-chart-3` | `SM-REP-POSITIVE` (tabs → Negative / Overdue) |

> The old view-only **Templates** item is replaced by the full **Upload Check List** builder (CL-1) — SM now **authors** templates scoped to its own Game Zone (create / assign / edit). The new **Outsource Inbox** (CL-2) receives **only** escalated/outsource work-orders from the Maintenance TL (`wo-outsourced` is the single WO state that reaches SM). Utility cluster (**Notifications · Profile · Settings · Logout**) + user chip are appended to the sidebar (not repeated above). SM topbar shows a **non-interactive branch badge** (`Game Zone · Air Maniax Ahmedabad-1`) — SM is locked to one Game Zone (`§4c`); there is **no Game-Zone switcher** (that is OH-only).

## Hard constraints (re-affirmed)

- **Web desktop only.** 1440×900 baseline. Desktop modals + a right-side drawer for detail (not mobile bottom sheets). Navy 240px sidebar, sticky topbar, orange primary buttons.
- **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 (badge, report header, item rows, photo gallery). Status by label+icon+color, never color alone.
- **Approve = green, Send-back = red-orange** — action color equals outcome color (`DESIGN_SYSTEM §6.4`).
- **Derived Pending (`§9 #5`):** SM sees **Pending** for any instance not yet `SM_APPROVED`; once SM approves it passes up and SM sees the real sub-state climbing to OH. Pending is never a stored status.
- **Send-back → original filler (`§9 #3`); re-fill restarts the cascade from TL (`§9 #8`).** SM's send-back returns to Ramesh, not to the TL.
- **Min-1 completion photo + per-A-item photo (`§4a`, `§9 #7`)** — the SM approval screen is a **viewer** of these photos (gallery + lightbox), never a re-uploader.
- **Server time + auto initials (`§9 #9`)** — surfaced read-only on the approval/report views; SM does not edit item timestamps/initials.
- **Multi-branch scope (`§4c`, FOUNDATION §5):** every list/read is server-filtered to **SM's one Game Zone** (`gameZoneId = me.gameZoneId`). An out-of-zone id → 403. No cross-Game-Zone data leak.
- **Dynamic RBAC.** Sidebar + permissions render from the `/me` response — no hardcoded role logic. SM's onboard is **Limited** (can create roles ≤ SM: TL/SCM/MON/CS — not OH/SM).
- **Local-disk photo storage** on the VPS — the approval viewer reads `url`/`thumbUrl`, no cloud bucket pickers.
- **English-only, single-tenant.** No language/tenant/theme switcher.

## What's NOT in this slot

- **Filling checklists** — SM does not fill; the floor fillers (Monitor/SCM/CS) own `*-CHK-FILL`. SM only **assigns/overrides + approves**.
- **TL first-level verify / OH final approve** — SM is the **second** cascade level. TL verify lives in the TL pack; OH final-approve in the OH pack.
- **Game Zones / rides master / cross-branch users** — OH-only (`OH-GZ-*`, `OH-RIDE-MASTER`, `OH-USERS`). SM works inside **one** branch with rides already created.
- **Filling A-item work-orders / managing the maintenance queue** — when a checklist has an A item, the **operations TL routes** it to the **Maintenance TL**, who assigns a **Technician** (internal fix closes there) — that queue lives in `maintenance-tl-web` / `technician-mobile`, **not** here. SM receives **only** the escalated **outsource** work-orders (`SM-WO-OUTSOURCE`) and decides the outsource (CL-2); SM does not see internal fixes.
- **Org-wide dashboards / all-zones roster** — those are OH (`OH-DASH`, `OH-ROSTER-ALL`). SM sees own GZ only.
- **The mobile companion** is a P2 secondary surface; this pack is the web pixel target.
- **Rotation, Capacity, Training, Events, School Visits** — out of Phase 1 (P3–P5). `OccupancyMeter` is stubbed only.

---

## File references

- Pack root: `docs/design/dev-mode-v1.0/store-manager-web/`
- Anchor (mirrored): `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, multi-branch scoping)
- 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 Rohit/Ahmedabad-1 example, Stages C–G)
