Phase 4: Warehouse screen, pull table, shorts, MTRs and the upload pipeline

The Warehouse home with the numbers, the Open shorts table, the find bar and the five-column task board
(waiting, being pulled, on hold, pulled, released in the last 3 days) with buttons, hold reasons and drag.
Every role sees the warehouse stage on a packet as the WH pill and the line under it. The pull table on the
Materials tab: Pulled with auto-start, issued, location, heat with Enter to the next line, shorts with
receipts, N/A, MTR per line with a viewer. Send back to Clerical with a reason. Release to supervisor stays
blocked until every line is pulled or short and every pulled line has a heat.

Server: the heats_recorded precondition on WH_RELEASE, receive by custody, server-validated hold and short
reasons, the old packet history texts, GET /api/warehouse/board, cards with the warehouse stage and pull
counts. Uploads typed by content per kind (drawing, mtr, document, bom with XLSX and CSV), limits per kind,
optional ClamAV behind the clamav compose profile, a storage quota alert on the new notification_events
table (migration 0005) shown on the Admin Storage tab.

Tests: every warehouse action as every role, the release gate, the short-receive exception, the heat
pattern, upload sniffing and limits, the ClamAV path with a fake scanner, the quota alert; frontend board
and pull table tests; Playwright scenarios for the board and the pull flow. Verified on docker-1 in the CI
stack: 3557 server tests, 106 frontend tests, 17 Playwright scenarios. Docs updated; D5 closed.

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

frontend/src/components/Card.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+import { makeCard } from "../test/packets";
+import { Card } from "./Card";
+
+const who = { id: "u1", display_name: "Wade Warehouse" };
+
+describe("Card", () => {
+  it("shows the WH pill and line on a warehouse packet, for every role", () => {
+    render(
+      <MemoryRouter>
+        <Card
+          p={makeCard({
+            status: "warehouse",
+            wh_stage: "hold",
+            wh: { stage: "hold", by: who, at: new Date().toISOString(), reason: "Drawing / BOM problem", note: "Rev B on the floor", auto: false },
+          })}
+        />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText("WH · on hold")).toHaveClass("pill", "st-warehouse", "wh-hold");
+    expect(screen.getByText("On hold: Drawing / BOM problem · Rev B on the floor · <1 min")).toHaveClass("whline");
+    expect(screen.queryByText("With warehouse")).not.toBeInTheDocument();
+  });
+
+  it("keeps the status pill and no line outside the warehouse", () => {
+    render(
+      <MemoryRouter>
+        <Card p={makeCard({ status: "ready", wh_stage: null })} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText("Ready to assign")).toBeInTheDocument();
+    expect(screen.queryByText(/^WH ·/)).not.toBeInTheDocument();
+  });
+});

frontend/src/components/Card.tsx

@@ -2,16 +2,20 @@ import type { ReactNode } from "react";
 import { Link } from "react-router";
 import type { PacketCard } from "../api/types";
 import { flagClass, jobName, openCoCount, pillClass, statusLabel } from "../lib/packets";
+import { pillClassFor, pillText, WH_STAGES, whLine, whStage } from "../warehouse/stages";
 
 /** One packet on a board. The old card(): job name and pill, title, department, meta, flag line. */
 export function Card({ p, extra }: { p: PacketCard; extra?: ReactNode }) {
   const shorts = p.open_shorts || 0;
   const cos = openCoCount(p);
+  // Every role sees where a warehouse packet really is: the stage pill and the line under it.
+  const atWh = p.status === "warehouse" && p.wh_stage !== undefined;
+  const stage = atWh ? whStage(p) : null;
   return (
     <Link className="card" to={`/packets/${p.id}`} aria-label={`${jobName(p)}, ${statusLabel(p.status)}`}>
       <div className="r1">
         <span className="job">{jobName(p)}</span>
-        <span className={pillClass(p.status)}>{statusLabel(p.status)}</span>
+        {stage ? <span className={pillClassFor(stage)}>{pillText(stage)}</span> : <span className={pillClass(p.status)}>{statusLabel(p.status)}</span>}
       </div>
       <div className="tt">{p.title || "Untitled"}</div>
       <div className="small dept">{p.dept.name}</div>
@@ -39,6 +43,7 @@ export function Card({ p, extra }: { p: PacketCard; extra?: ReactNode }) {
         {shorts ? <span className="pill st-review">{shorts} short</span> : null}
         {cos ? <span className="pill st-review">CO {cos}</span> : null}
       </div>
+      {stage ? <div className={`whline ${WH_STAGES[stage].cls}`}>{whLine(p)}</div> : null}
       {p.flag ? <div className={`small ${flagClass(p.flag)}`}>⚑ {p.flag}</div> : null}
       {p.co_pending ? <div className="small due soon">Change from VISUAL to approve</div> : null}
       {p.visual_closed && p.status !== "filed" ? <div className="small muted">Closed in VISUAL</div> : null}

frontend/src/components/FindBar.tsx

@@ -8,8 +8,9 @@ interface FindBarProps {
   onQ: (q: string) => void;
   pick: UnitPick;
   onPick: (v: UnitPick) => void;
-  view: BoardView;
-  onView: (v: BoardView) => void;
+  /** The Board | List toggle. Hidden when onView is not given. */
+  view?: BoardView;
+  onView?: (v: BoardView) => void;
   /** "Showing n packets". */
   count: number | null;
   /** The flag kind filter. Shown when onFlag is given. */
@@ -18,7 +19,7 @@ interface FindBarProps {
 }
 
 /** Find a job: the search box, the project then unit picker, and the Board | List toggle. */
-export function FindBar({ q, onQ, pick, onPick, view, onView, count, flag = "", onFlag }: FindBarProps) {
+export function FindBar({ q, onQ, pick, onPick, view = "board", onView, count, flag = "", onFlag }: FindBarProps) {
   return (
     <section className="fltbar" aria-label="Find jobs">
       <div className="fltrow">
@@ -55,16 +56,18 @@ export function FindBar({ q, onQ, pick, onPick, view, onView, count, flag = "",
             </select>
           </label>
         ) : null}
-        <div className="fltbtns">
-          <div className="seg" role="group" aria-label="View">
-            <button type="button" aria-pressed={view === "board"} onClick={() => onView("board")}>
-              Board
-            </button>
-            <button type="button" aria-pressed={view === "list"} onClick={() => onView("list")}>
-              List
-            </button>
+        {onView ? (
+          <div className="fltbtns">
+            <div className="seg" role="group" aria-label="View">
+              <button type="button" aria-pressed={view === "board"} onClick={() => onView("board")}>
+                Board
+              </button>
+              <button type="button" aria-pressed={view === "list"} onClick={() => onView("list")}>
+                List
+              </button>
+            </div>
           </div>
-        </div>
+        ) : null}
       </div>
       {count !== null ? (
         <div className="fltrow2">