Phase 5: Supervisor and Stall screens, weld map, heat table, clock and CO verification

The shop at parity with the old build. Supervisor screen (department chips, CO headline, numbers, Change orders
on hold, station grid with clocks and CO tags, boards) and Stall screen (station picker, hero, My packets,
Submitted). Shop steps on the packet page: assign with station, welder picker and stamp; pull back; Start, Pause,
Resume; Submit with a PIN signature and the missing steps as links; review with Send to Q.C., Return to station
and Skip Q.C. route; a lead's read-only review. Weld map (pdf.js viewer with pan, pinch, zoom, full screen; marks
with leader lines; weld sheet; weld record with field CAS; carried marks). Heat map (heat table placed, dragged,
sized, removed; legacy amber tags; borrowed heat map read-only). Checklist tab with templates from settings.
VOID stamps on voided pages. Change orders: CO-n labels, supervisor verify with signature, approval copies the
heat table to the new sheet and the BOM merge keeps the shop's values. Server clock of record with VISUAL ticket
hours beside it. Presence per packet over SSE. Migration 0006 (bfx, bfy, carried_from, checklist_templates).
New endpoints /api/shop/board, /api/shop/stations, /api/shop/stall, /api/departments/{code}/people.

Tests: policy oracle for every shop action, role and status; clock arithmetic; concurrent inserts; CO apply;
frontend geometry, heat table, clock, checklist, weld sheet, screens; seven Playwright scenarios. Docs updated.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

frontend/src/components/CoBanner.tsx

@@ -0,0 +1,52 @@
+import { useNavigate } from "react-router";
+
+export interface CoBannerItem {
+  key: string;
+  /** "CO-2". */
+  label: string;
+  /** "L662001 · WELD-PART". */
+  job: string;
+  /** The small line under it: when, for which departments, why. */
+  sub?: string;
+  /** Where the button goes: the packet's Change orders tab. */
+  href: string;
+}
+
+/**
+ * The change order headline (the old coBannerHtml). It has no close button: it stays until the
+ * department verifies, and the next board answer drops the row.
+ */
+export function CoBanner({ items, it = false }: { items: readonly CoBannerItem[]; it?: boolean }) {
+  const navigate = useNavigate();
+  if (!items.length) return null;
+  return (
+    <section className="cobanner" role="alert" aria-label="Change orders to verify">
+      <div className="cob-h">
+        <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 3 2 21h20L12 3z" />
+          <path d="M12 10v5M12 18h.01" />
+        </svg>
+        <div>
+          <div className="cob-t">{it ? "Change order: verification pending (IT view)" : "Change order: your verification is required"}</div>
+          <div className="small">
+            A document in {items.length === 1 ? "this packet" : "these packets"} was replaced. Review the new revision against work already done, then
+            verify. This stays here until you do.
+          </div>
+        </div>
+      </div>
+      {items.map((x) => (
+        <div key={x.key} className="cob-row">
+          <div className="cob-txt">
+            <div>
+              Change order <b>{x.label}</b> on <b>{x.job}</b> needs your verification
+            </div>
+            {x.sub ? <div className="small">{x.sub}</div> : null}
+          </div>
+          <button className="btn pri" type="button" aria-label={`Review & verify ${x.label} on ${x.job}`} onClick={() => navigate(x.href)}>
+            Review &amp; verify
+          </button>
+        </div>
+      ))}
+    </section>
+  );
+}

frontend/src/components/RoleSwitcher.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { LAST_SCREEN_KEY } from "../auth/roles";
+import { memoryStorage } from "../screens/supervisor/memoryStorage";
+import { DEPARTMENTS, makeMe, renderApp } from "../test/auth";
+import { mockFetch } from "../test/fetchMock";
+
+const LOU = makeMe({ roles: ["shop:03:lead"], screens: ["supervisor", "stall"], user: { sam_account: "lead.lou", display_name: "Lou Lead" } });
+
+function routes() {
+  return {
+    "/api/auth/me": { body: LOU },
+    "/api/departments": { body: DEPARTMENTS },
+    "/api/shop/board": { body: {} },
+    "/api/shop/stations": { body: [] },
+    "/api/projects": { body: [] },
+  };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("localStorage", memoryStorage());
+});
+
+describe("RoleSwitcher", () => {
+  it("lands on the first screen, and remembers the screen picked", async () => {
+    mockFetch(routes());
+    renderApp("/");
+    const nav = await screen.findByRole("navigation", { name: "Screens" });
+    await waitFor(() => expect(within(nav).getByRole("button", { name: "Supervisor" })).toHaveAttribute("aria-pressed", "true"));
+    fireEvent.click(within(nav).getByRole("button", { name: "Weld Stall" }));
+    expect(window.localStorage.getItem(LAST_SCREEN_KEY)).toBe("stall");
+    expect(await screen.findByText("You aren't assigned to a station. Ask an admin to add you to a department.")).toBeInTheDocument();
+  });
+
+  it("lands on the remembered screen when it is still allowed", async () => {
+    window.localStorage.setItem(LAST_SCREEN_KEY, "stall");
+    mockFetch(routes());
+    renderApp("/");
+    const nav = await screen.findByRole("navigation", { name: "Screens" });
+    await waitFor(() => expect(within(nav).getByRole("button", { name: "Weld Stall" })).toHaveAttribute("aria-pressed", "true"));
+  });
+
+  it("ignores a remembered screen the user no longer has", async () => {
+    window.localStorage.setItem(LAST_SCREEN_KEY, "warehouse");
+    mockFetch(routes());
+    renderApp("/");
+    const nav = await screen.findByRole("navigation", { name: "Screens" });
+    await waitFor(() => expect(within(nav).getByRole("button", { name: "Supervisor" })).toHaveAttribute("aria-pressed", "true"));
+  });
+});

frontend/src/components/RoleSwitcher.tsx

@@ -1,19 +1,27 @@
 import { useNavigate } from "react-router";
-import { SCREEN_LABELS, type Screen } from "../auth/roles";
+import { rememberScreen, SCREEN_LABELS, type Screen } from "../auth/roles";
 
 interface RoleSwitcherProps {
   screens: readonly Screen[];
   active: Screen | null;
 }
 
-/** One button per screen the user has. Drawn only when there is more than one. */
+/** One button per screen the user has. Drawn only when there is more than one. The pick is remembered for the next landing. */
 export function RoleSwitcher({ screens, active }: RoleSwitcherProps) {
   const navigate = useNavigate();
   if (screens.length < 2) return null;
   return (
     <nav className="roles" aria-label="Screens">
       {screens.map((s) => (
-        <button key={s} type="button" aria-pressed={active === s} onClick={() => navigate(`/${s}`)}>
+        <button
+          key={s}
+          type="button"
+          aria-pressed={active === s}
+          onClick={() => {
+            rememberScreen(s);
+            navigate(`/${s}`);
+          }}
+        >
           {SCREEN_LABELS[s]}
         </button>
       ))}