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]>
This commit is contained in:
Claude Fable 5.1
@@ -0,0 +1,305 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import type { PacketRead, Weld, WeldBody } from "../api/types";
|
||||
import { Sheet } from "../components/Sheet";
|
||||
import { bpos } from "../lib/geometry";
|
||||
import { fmtTime } from "../lib/format";
|
||||
import {
|
||||
DEFAULT_SIZE,
|
||||
DEFAULT_TYPE,
|
||||
PROCESSES,
|
||||
WELD_TYPES,
|
||||
lastProcess,
|
||||
weldId,
|
||||
woChoices,
|
||||
} from "../lib/weldDefaults";
|
||||
|
||||
/** The new weld's spot, from the tap on the drawing. */
|
||||
export interface NewWeldAt {
|
||||
page: number;
|
||||
fx: number;
|
||||
fy: number;
|
||||
}
|
||||
|
||||
interface Draft {
|
||||
wo_base: string;
|
||||
piece: number;
|
||||
type: string;
|
||||
size: string;
|
||||
process: string;
|
||||
stamp: string;
|
||||
items: number[];
|
||||
}
|
||||
|
||||
/**
|
||||
* The weld sheet: work order, piece, type, size, process, stamp and the BOM items the weld joins (at least one).
|
||||
* A new weld sends its point and the default label position; an existing one sends only what changed.
|
||||
*/
|
||||
export function WeldSheet({
|
||||
p,
|
||||
weld,
|
||||
at,
|
||||
editable,
|
||||
myStamp,
|
||||
sub,
|
||||
onSave,
|
||||
onRemove,
|
||||
onClose,
|
||||
}: {
|
||||
p: PacketRead;
|
||||
/** The weld to edit, or null for a new one. */
|
||||
weld: Weld | null;
|
||||
at: NewWeldAt | null;
|
||||
editable: boolean;
|
||||
/** The signed-in user's welder stamp, when known. */
|
||||
myStamp: string | null;
|
||||
sub: string;
|
||||
onSave: (body: WeldBody) => void;
|
||||
onRemove: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const wos = woChoices(p);
|
||||
const [d, setD] = useState<Draft>(() =>
|
||||
weld
|
||||
? {
|
||||
wo_base: weld.wo_base ?? wos[0]?.base ?? "",
|
||||
piece: weld.piece ?? 1,
|
||||
type: weld.type ?? DEFAULT_TYPE,
|
||||
size: weld.size ?? DEFAULT_SIZE,
|
||||
process: weld.process ?? lastProcess(p),
|
||||
stamp: weld.stamp ?? "",
|
||||
items: [...weld.items],
|
||||
}
|
||||
: {
|
||||
wo_base: wos[0]?.base ?? "",
|
||||
piece: 1,
|
||||
type: DEFAULT_TYPE,
|
||||
size: DEFAULT_SIZE,
|
||||
process: lastProcess(p),
|
||||
stamp: myStamp || p.welder?.stamp || "",
|
||||
items: [],
|
||||
},
|
||||
);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const qty = wos.find((w) => w.base === d.wo_base)?.qty ?? 1;
|
||||
const title = weld ? `Weld ${weldId(weld)}` : "New weld";
|
||||
const dis = !editable;
|
||||
|
||||
const toggle = (item: number) =>
|
||||
setD((o) => ({
|
||||
...o,
|
||||
items: o.items.includes(item)
|
||||
? o.items.filter((x) => x !== item)
|
||||
: [...o.items, item].sort((a, b) => a - b),
|
||||
}));
|
||||
|
||||
const heats = d.items
|
||||
.map((i) => {
|
||||
const b = p.bom.find((x) => x.item === i);
|
||||
return b ? `${i}: ${b.heat || (b.na ? "N/A" : "-")}` : "";
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(" · ");
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!editable) return;
|
||||
if (!d.items.length) {
|
||||
setError("Pick at least one BOM item this weld joins.");
|
||||
return;
|
||||
}
|
||||
const size = d.size.trim() || DEFAULT_SIZE;
|
||||
const stamp = d.stamp.trim() || null;
|
||||
if (!weld) {
|
||||
if (!at) return;
|
||||
const b = bpos({ fx: at.fx, fy: at.fy });
|
||||
onSave({
|
||||
page: at.page,
|
||||
fx: at.fx,
|
||||
fy: at.fy,
|
||||
bfx: b.bfx,
|
||||
bfy: b.bfy,
|
||||
...(d.wo_base ? { wo_base: d.wo_base } : {}),
|
||||
piece: d.piece,
|
||||
items: d.items,
|
||||
type: d.type,
|
||||
size,
|
||||
process: d.process,
|
||||
...(stamp ? { stamp } : {}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
const body: WeldBody = {};
|
||||
if ((weld.wo_base ?? "") !== d.wo_base && d.wo_base)
|
||||
body.wo_base = d.wo_base;
|
||||
if ((weld.piece ?? 1) !== d.piece) body.piece = d.piece;
|
||||
if ((weld.type ?? "") !== d.type) body.type = d.type;
|
||||
if ((weld.size ?? "") !== size) body.size = size;
|
||||
if ((weld.process ?? "") !== d.process) body.process = d.process;
|
||||
if ((weld.stamp ?? null) !== stamp) body.stamp = stamp;
|
||||
if ([...weld.items].sort((a, b) => a - b).join(",") !== d.items.join(","))
|
||||
body.items = d.items;
|
||||
if (!Object.keys(body).length) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
onSave(body);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet
|
||||
title={title}
|
||||
sub={weld ? `${sub} · recorded ${fmtTime(weld.at)}` : sub}
|
||||
onClose={onClose}
|
||||
wide
|
||||
>
|
||||
{weld?.carried ? (
|
||||
<div className="callout flush">
|
||||
Logged in an earlier department. Shown for the record.
|
||||
</div>
|
||||
) : null}
|
||||
<form className="stack" onSubmit={submit} noValidate aria-label={title}>
|
||||
<div className="frow">
|
||||
<label className="f">
|
||||
Work order
|
||||
<select
|
||||
aria-label="Work order"
|
||||
className="in"
|
||||
value={d.wo_base}
|
||||
disabled={dis}
|
||||
onChange={(e) =>
|
||||
setD((o) => ({ ...o, wo_base: e.target.value, piece: 1 }))
|
||||
}
|
||||
>
|
||||
{wos.map((w) => (
|
||||
<option key={w.base} value={w.base}>
|
||||
{w.base}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="f">
|
||||
Piece
|
||||
<select
|
||||
aria-label="Piece"
|
||||
className="in"
|
||||
value={d.piece}
|
||||
disabled={dis}
|
||||
onChange={(e) =>
|
||||
setD((o) => ({ ...o, piece: Number(e.target.value) }))
|
||||
}
|
||||
>
|
||||
{Array.from({ length: Math.max(qty, d.piece) }, (_, i) => (
|
||||
<option key={i + 1} value={i + 1}>
|
||||
{i + 1} of {qty}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="f">
|
||||
Type
|
||||
<select
|
||||
aria-label="Type"
|
||||
className="in"
|
||||
value={d.type}
|
||||
disabled={dis}
|
||||
onChange={(e) => setD((o) => ({ ...o, type: e.target.value }))}
|
||||
>
|
||||
{WELD_TYPES.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="f">
|
||||
Size
|
||||
<input
|
||||
aria-label="Size"
|
||||
className="in"
|
||||
value={d.size}
|
||||
maxLength={40}
|
||||
disabled={dis}
|
||||
onChange={(e) => setD((o) => ({ ...o, size: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label className="f">
|
||||
Process
|
||||
<select
|
||||
aria-label="Process"
|
||||
className="in"
|
||||
value={d.process}
|
||||
disabled={dis}
|
||||
onChange={(e) => setD((o) => ({ ...o, process: e.target.value }))}
|
||||
>
|
||||
{PROCESSES.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="f">
|
||||
Welder stamp
|
||||
<input
|
||||
aria-label="Welder stamp"
|
||||
className="in"
|
||||
value={d.stamp}
|
||||
maxLength={40}
|
||||
disabled={dis}
|
||||
onChange={(e) => setD((o) => ({ ...o, stamp: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div role="group" aria-label="Mating BOM items">
|
||||
<div className="flabel">Mating BOM items</div>
|
||||
<div className="chips">
|
||||
{p.bom.map((b) => (
|
||||
<button
|
||||
key={b.item}
|
||||
type="button"
|
||||
className="ichip"
|
||||
aria-pressed={d.items.includes(b.item)}
|
||||
aria-label={`Item ${b.item}`}
|
||||
disabled={dis}
|
||||
onClick={() => {
|
||||
toggle(b.item);
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
{b.item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="small muted">
|
||||
{d.items.length
|
||||
? `Selected: item ${d.items.join(" + ")}${heats ? ` · heats ${heats}` : ""}`
|
||||
: "Tap each BOM item number this weld joins."}
|
||||
</div>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="callout warn flush" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="sheet-acts start">
|
||||
{editable ? (
|
||||
<button className="btn pri" type="submit">
|
||||
{weld ? "Save changes" : "Log weld"}
|
||||
</button>
|
||||
) : null}
|
||||
<button className="btn ghost" type="button" onClick={onClose}>
|
||||
{editable ? "Cancel" : "Close"}
|
||||
</button>
|
||||
{editable && weld ? (
|
||||
<>
|
||||
<span className="grow" />
|
||||
<button
|
||||
className="btn ghost pinktxt"
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
>
|
||||
Remove weld
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user