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/packet/PacketPage.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
-import { Link, useNavigate, useParams } from "react-router";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router";
 import { assetsApi } from "../api/assets";
-import { ApiError } from "../api/client";
+import { ApiError, errorCode } from "../api/client";
 import { packetsApi } from "../api/packets";
 import type { PacketHeader, PacketRead, TransitionBody } from "../api/types";
 import { homePath } from "../auth/roles";
 import { useAuth } from "../auth/useAuth";
+import { usePacketPresence } from "../auth/useEvents";
 import { useGuard } from "../components/useGuard";
 import { useChanged } from "../lib/changes";
 import { errorText } from "../lib/format";
@@ -14,12 +15,23 @@ import { DrawingViewer } from "./DrawingViewer";
 import { MoveSheet, SendToDeptSheet } from "./sheets";
 import { DocumentsTab, HistoryTab, MaterialsTab, WorkOrdersTab, type Mutate } from "./tabs";
 import { coSummary, coToReview } from "../lib/changeOrders";
-import { ChangesTab, VisualBox } from "./visual";
+import { VisualBox } from "./visual";
+import { ChangesTab } from "./ChangesTab";
+import { ChecklistTab } from "./ChecklistTab";
+import { HeatMapTab } from "./HeatMapTab";
+import { ShopBar } from "./ShopActions";
+import { WeldMapTab } from "./WeldMapTab";
 import type { Write } from "../warehouse/PullTable";
 import { packetMessage, pillClassFor, WH_STAGES, pillText, progress, whLine, whStage } from "../warehouse/stages";
 import { useWhMove } from "../warehouse/useWhMove";
 
-type Tab = "drawing" | "materials" | "workorders" | "changes" | "docs" | "history";
+type Tab = "drawing" | "heat" | "materials" | "checklist" | "welds" | "workorders" | "changes" | "docs" | "history";
+const TABS: readonly Tab[] = ["drawing", "heat", "materials", "checklist", "welds", "workorders", "changes", "docs", "history"];
+function isTab(v: string | null): v is Tab {
+  return v !== null && (TABS as readonly string[]).includes(v);
+}
+
+const TOAST_MS = 5000;
 
 /** The rule's signature meaning for attaching a drawing by hand. */
 const SIGN_ATTACH = "Attach a drawing by hand";
@@ -119,9 +131,13 @@ export function PacketPage() {
   const [loadError, setLoadError] = useState<string | null>(null);
   const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
   const [busy, setBusy] = useState(false);
-  const [tab, setTab] = useState<Tab | null>(null);
+  const [search] = useSearchParams();
+  const wantTab = search.get("tab");
+  const [tab, setTab] = useState<Tab | null>(isTab(wantTab) ? wantTab : null);
   const [sheet, setSheet] = useState<"dept" | "move" | null>(null);
   const [editing, setEditing] = useState(false);
+  const [toast, setToast] = useState<string | null>(null);
+  const others = usePacketPresence(Number.isFinite(id) ? id : null);
   const versionRef = useRef<number | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -140,14 +156,20 @@ export function PacketPage() {
 
   useEffect(() => {
     setPacket(null);
-    setTab(null);
+    setTab(isTab(wantTab) ? wantTab : null);
     void reload();
-  }, [reload]);
+  }, [reload, wantTab]);
 
   useEffect(() => {
     versionRef.current = packet?.version ?? null;
   }, [packet]);
 
+  useEffect(() => {
+    if (!toast) return;
+    const t = window.setTimeout(() => setToast(null), TOAST_MS);
+    return () => window.clearTimeout(t);
+  }, [toast]);
+
   // Live refresh: another screen changed this packet.
   useChanged(() => void reload(), {
     delayMs: 500,
@@ -195,7 +217,9 @@ export function PacketPage() {
       } catch (err) {
         // stale_step, field_conflict, row_conflict: someone else moved first. Show their state.
         if (err instanceof ApiError && (err.status === 409 || err.status === 412)) await reload();
-        setMsg({ ok: false, text: errorText(err) });
+        // A step someone else already took: the page shows their state and says so once, as a toast.
+        if (errorCode(err) === "stale_step") setToast(errorText(err));
+        else setMsg({ ok: false, text: errorText(err) });
         return false;
       } finally {
         setBusy(false);
@@ -293,7 +317,7 @@ export function PacketPage() {
 
   const drawingPages = p.pages.filter((x) => x.type === "drawing");
   const review = coToReview(p);
-  const shownTab: Tab = tab ?? (drawingPages.length ? "drawing" : "materials");
+  const shownTab: Tab = tab === "changes" && !(p.change_orders ?? []).length ? "materials" : (tab ?? (drawingPages.length ? "drawing" : "materials"));
   // The warehouse short-parts exception and the data book date are not edits of the packet itself.
   const passive = new Set(["wh_receive_short", "set_databook_at"]);
   const viewOnly =
@@ -322,14 +346,20 @@ export function PacketPage() {
   const hasDraftControls =
     draft && ["edit_header", "send_to_warehouse", "release_to_shop", "send_draft_to_qc", "edit_document_set", "move_unit", "remove"].some((a) => can(a) || p.blocked[a]);
 
+  const cos = (p.change_orders ?? []).length;
+  const ckOpen = p.checklist_items.filter((i) => !p.stage?.checklist?.[i.key]?.done).length;
   const tabs: Array<{ id: Tab; label: string; count?: number }> = [
     { id: "drawing", label: "Drawing", count: drawingPages.length },
+    { id: "heat", label: "Heat map" },
     { id: "materials", label: "Materials", count: p.bom.length },
+    { id: "checklist", label: "Checklist", ...(p.stage ? { count: ckOpen } : {}) },
+    { id: "welds", label: "Weld map", count: p.welds.length },
     { id: "workorders", label: "Work orders", count: p.work_orders.length },
-    { id: "changes", label: "Changes", count: (p.change_orders ?? []).length },
+    ...(cos ? [{ id: "changes" as const, label: "Changes", count: cos }] : []),
     { id: "docs", label: "Documents", count: p.docs.length },
     { id: "history", label: "History" },
   ];
+  const onTabError = (text: string) => setMsg({ ok: false, text });
 
   return (
     <>
@@ -446,6 +476,12 @@ export function PacketPage() {
           </div>
         </div>
       ) : null}
+      {others.length ? (
+        <div className="presence small" data-testid="presence" role="status">
+          <span className="pdot" aria-hidden="true" />
+          Also here: {others.map((u) => u.display_name).join(", ")}
+        </div>
+      ) : null}
       {msg ? (
         <div className={msg.ok ? "callout" : "callout warn"} role={msg.ok ? "status" : "alert"}>
           {msg.text}
@@ -454,7 +490,7 @@ export function PacketPage() {
 
       {review && (me?.roles ?? []).some((r) => r === "clerical" || r === "clerical_supervisor" || r === "admin") ? (
         <div className="callout warn" role="status">
-          <b>Change order {review.co_no}: a change from VISUAL is waiting for your approval</b> - {coSummary(review)}. Nothing has gone to the shop packet yet.
+          <b>Change order CO-{review.co_no}: a change from VISUAL is waiting for your approval</b> - {coSummary(review)}. Nothing has gone to the shop packet yet.
           {review.hold ? <b> Shop packet on hold.</b> : null}{" "}
           <button className="btn sm pri" type="button" onClick={() => setTab("changes")}>
             Review change
@@ -615,6 +651,8 @@ export function PacketPage() {
         </section>
       ) : null}
 
+      <ShopBar p={p} busy={busy} mutate={mutate} askReason={askReason} sub={job} goTab={(t) => setTab(t)} />
+
       <div className="tabs" role="tablist" aria-label="Packet">
         {tabs.map((t) => (
           <button
@@ -648,7 +686,12 @@ export function PacketPage() {
             <DrawingViewer pages={drawingPages} />
           </div>
         ) : null}
+        {shownTab === "heat" ? <HeatMapTab key={p.id} p={p} write={write} reload={reload} sub={job} onError={onTabError} /> : null}
         {shownTab === "materials" ? <MaterialsTab p={p} mutate={mutate} busy={busy} write={write} reload={reload} /> : null}
+        {shownTab === "checklist" ? <ChecklistTab p={p} write={write} mutate={mutate} reload={reload} onError={onTabError} /> : null}
+        {shownTab === "welds" ? (
+          <WeldMapTab key={p.id} p={p} write={write} mutate={mutate} reload={reload} askReason={askReason} sub={job} myId={me?.user.id ?? null} onError={onTabError} />
+        ) : null}
         {shownTab === "workorders" ? <WorkOrdersTab p={p} /> : null}
         {shownTab === "changes" ? <ChangesTab p={p} roles={me?.roles ?? []} sub={job} mutate={mutate} busy={busy} askReason={askReason} /> : null}
         {shownTab === "docs" ? <DocumentsTab p={p} mutate={mutate} busy={busy} /> : null}
@@ -679,6 +722,11 @@ export function PacketPage() {
       ) : null}
       {wh.sheet}
       {guardSheet}
+      {toast ? (
+        <div className="toast" role="status" data-testid="toast">
+          {toast}
+        </div>
+      ) : null}
     </>
   );
 }