# Team Leader (Web) — Screen Inventory

> Source: `docs/design/SCREEN_LIST.md` "Team Leader / Trainee TL (TL)" block (12 role screens, post-CL-1.1) + the shared Auth screens (Module 0) the role passes through on login. Surface = Web (Next.js admin panel) 1440×900. GZ scope = `own · team`.
> **Covers Team Leader AND Trainee TL** — identical nav/screens; **Trainee TL = assist-only** (Approve/Send-back/Route disabled, CL-3 — amends `§9 #4`). **Pixel target:** the `screens/*.html` mockups at 1440px. **States:** `states/`. **Modals:** `modals/`.
> **Change List v1.1 applied:** + `TL-ROSTER-REASSIGN` (CL-4) · + `TL-CHK-UPLOAD` (CL-1) · `TL-CHK-VERIFY` gains Route-to-Maintenance + Held (CL-2) · `TL-DASH`/`TL-CHK-OVERVIEW` show the Held state · Trainee-TL assist-only variant.

---

## Auth (shared — built in Wave 0, included here as the entry path)

| Screen ID | Screen | Purpose | States / modals | Mockup |
|---|---|---|---|---|
| `AUTH-LOGIN` | Login | Email/phone + password sign-in | error (bad creds), locked (rate-limited), loading | `screens/01-login.html` |
| `TL-DASH` (router) | Role-resolved Dashboard | Post-login → TL Dashboard via `/me` role resolve | loading | `screens/02-dashboard.html` |

> `AUTH-FORGOT / AUTH-OTP / AUTH-RESET / AUTH-LOGOUT / SH-NOTIF` are Wave-0 shared screens; this pack mocks `01-login.html` + a `11-profile.html` (More/Profile landing). The full shared-auth set ships once in Wave 0 and is reused by every role.

## Team Leader (TL) — role screens

| # | Screen ID | Screen | Purpose | States / modals | Mockup |
|---|---|---|---|---|---|
| 1 | `TL-DASH` | Team Leader Dashboard | Team live status: awaiting TL approval, **Actions-held** (A-items at maintenance, CL-2), team progress, roster gaps, overdue | loading, empty, overdue badge, held row, trainee assist-only note | `screens/02-dashboard.html` |
| 2 | `TL-TEAM` | My Team | Monitors + Cleaning Supervisor reporting to this TL; today's checklist progress per member | empty, search/filter | `screens/03-team.html` |
| 3 | `TL-USER-DETAIL` | Team Member Detail | Profile + certs + checklist history (right-drawer / page) | loading | `screens/04-team-member-detail.html` |
| 4 | `TL-CHK-OVERVIEW` | Team Checklist Status | All team checklists with live cascade status incl. **Action-in-progress / Held** (CL-2); Active / Overdue tabs; entry to Verify | loading, empty, error, overdue, held badge | `screens/05-checklist-overview.html` |
| 5 | `TL-CHK-VERIFY` | TL Verify / Approve | **First-level approval:** review items + photos, **Approve** (→ SM) or **Send-back** (→ original filler); **Route A-item → Maintenance TL** (CL-2) with a **HeldBanner** — Approve locked while held | photo-viewer, send-back-reason, approve confirm, **route-to-maintenance modal**, HeldBanner, forbidden, **trainee assist-only variant** | `screens/06-checklist-verify.html` |
| 6 | `TL-CHK-FILL` | Fill Checklist (TL can fill) | TL may tick G/A + note + completion photo + per-A photo + submit (per access matrix) | G/A toggle, A-note+photo, offline | `screens/07-checklist-fill.html` |
| 7 | `TL-ROSTER` | Team Roster Builder | Create/edit roster for own team only (Team scope); publish → fires auto-assign for the team | conflict warn, leave overlay, publish modal | `screens/08-roster-builder.html` |
| 8 | `TL-ROSTER-REASSIGN` | Mid-Shift Reassign *(CL-4)* | Re-target a monitor to a different ride mid-shift (AllocationBoard); new ride auto-assigns, old ride re-targets to current holder, mobile updates live; certified-on-new-ride gated; in-progress never withdrawn | reassign modal, re-target preview, conflict warn | `screens/13-roster-reassign.html` |
| 9 | `TL-ROSTER-VIEW` | Team Roster View | Day/week/month team roster + gap alerts + current-ride (live) column (read view) | day/week/month toggle, empty | `screens/09-roster-view.html` |
| 10 | `TL-CHK-ASSIGN` | Team Checklist Assign (override) | View auto-assigned checklists; assign/reassign within own team (Team scope) | assign modal | `screens/10-checklist-assign.html` |
| 11 | `TL-CHK-UPLOAD` | Upload Check List (team templates) *(CL-1)* | Team-scoped ChecklistBuilder — create/assign/edit templates that fill within own team; Stepper (Details → Sections & Items → Assign → Review) | builder wizard, assign sub-step | `screens/14-checklist-upload.html` |
| 12 | `TL-REP-NEGATIVE` | Team Negative Report | A-items + their issue photos for own team (per ride/shift/day); export | photo-viewer modal, empty (all-clear), export | `screens/12-report-negative.html` |
| — | `SH-PROFILE` (More) | Profile / More | Own profile, role, reports-to, certified rides; logout | — | `screens/11-profile.html` |

## States (this pack)

| State | File | Where it appears |
|---|---|---|
| Loading (skeleton) | `states/loading.html` | `TL-DASH`, `TL-CHK-OVERVIEW`, `TL-TEAM` |
| Empty (nothing to verify / all-clear) | `states/empty.html` | `TL-CHK-OVERVIEW`, `TL-CHK-VERIFY` queue, `TL-REP-NEGATIVE` |
| Error (generic + retry) | `states/error.html` | any data screen |
| Offline / no-connection retry | `states/offline.html` | verify action + fill (in-memory draft preserved) |
| Locked (rate-limited login) | `states/locked.html` | `AUTH-LOGIN` |
| 403 (out-of-team / out-of-Game-Zone) | `states/forbidden.html` | any |
| Trainee TL assist-only *(CL-3)* | `states/trainee-tl-assist-only.html` | `TL-CHK-VERIFY` (+ team screens) — Approve/Send-back/Route disabled |

## Modals (this pack — desktop, NOT bottom-sheets)

| Modal | File | Trigger |
|---|---|---|
| Send-back reason (required textarea) | `modals/send-back-reason.html` | tap **Send back** on `TL-CHK-VERIFY` |
| Photo viewer / lightbox | `modals/photo-viewer.html` | tap a completion/A-item photo thumbnail in `TL-CHK-VERIFY` or `TL-REP-NEGATIVE` |
| Assign / reassign checklist | `modals/assign-checklist.html` | **Assign** on `TL-CHK-ASSIGN` |
| Publish team roster confirm | `modals/publish-roster.html` | **Publish** on `TL-ROSTER` (fires auto-assign for the team) |
| Route to Maintenance *(CL-2)* | `modals/route-to-maintenance.html` | **Route to Maintenance** on an A-item in `TL-CHK-VERIFY` (creates a WO, holds the checklist) |
| Mid-shift reassign *(CL-4)* | `modals/reassign-monitor.html` | **Reassign** on a monitor row in `TL-ROSTER-REASSIGN` (AllocationBoard + re-target preview) |

---

## Counts

- **14 screen mockups** (login + dashboard + team + member-detail + overview + verify + fill + roster-builder + **roster-reassign** + roster-view + assign + **checklist-upload** + profile + negative-report) — covering the **12 `TL-*` role screens** (post-CL-1.1) + the auth entry + the profile/More landing.
- **7 state variants** (loading · empty · error · forbidden · locked · offline · **trainee-tl-assist-only**) · **6 modals** (send-back-reason · photo-viewer · assign-checklist · publish-roster · **route-to-maintenance** · **reassign-monitor**).
- **Total HTML artifacts in this pack: 14 screens + 7 states + 6 modals = 27 HTML files** (PNG render is a later step).

> **Relation to the anchor:** the TL pack is the **mirror** of the anchor's structure (same file set, web → `modals/`) but is NOT a clone — TL is the **first approver**, so it adds the Verify/Approve + Send-back + Assign + team-roster + negative-report screens the filler anchor explicitly excluded. The shared fill→submit→status flow is reused only on `TL-CHK-FILL` (TL may also fill). The two other filler clones (SCM, CS) remain mechanical clones of the anchor; OH and SM packs reuse this pack's approval + report screen shapes at their cascade levels.