// ───────────────────────────────────────────────────────────────────────────── // Operator Tablet — shared UI primitives. Declares React hooks ONCE (global, // reused by pages + shell). Exports reusable components on window.Op. // Loaded after icons + data, before pages + shell. // ───────────────────────────────────────────────────────────────────────────── const { useState, useEffect, useRef, useMemo, useCallback } = React; const OpIc = window.Icons; // ── Button ── const Btn = ({ variant = "primary", size, icon: Icon, iconRight, loading, block, children, ...rest }) => ( ); // ── Status pill (reuses AMOMS badge tokens) ── const Pill = ({ tone = "closed", children, dot }) => ( {dot && }{children} ); // ── Severity tag (C-015) ── const SEV = { low: ["sev-low", "Low"], medium: ["sev-medium", "Medium"], high: ["sev-high", "High"], critical: ["sev-critical", "Critical"] }; const Severity = ({ level }) => { const [c, l] = SEV[level] || SEV.low; return {l}; }; // ── Banner (C-106) ── const Banner = ({ tone = "neutral", icon: Icon, title, desc, children, style }) => (
{Icon && }
{title &&
{title}
} {desc &&
{desc}
} {children}
); // ── Status strip (full-width header on result screens) ── const Strip = ({ tone = "success", icon: Icon, title, sub }) => (
{Icon && }
{title}
{sub &&
{sub}
}
); // ── KPI tile (C-110) ── const Kpi = ({ label, icon: Icon, value, unit, warn, onClick }) => (
{Icon && }{label} {value}{unit && {unit}}
); // ── Toggle switch row (anti-fraud confirm) ── const ToggleRow = ({ on, onChange, title, sub, icon: Icon }) => ( ); // ── Large number / weight input (C-004 / C-118) ── const NumInput = ({ value, onChange, step = 10, suffix = "kg", placeholder = "0" }) => { const set = (v) => onChange(Math.max(0, v)); return (
{ const n = parseInt(e.target.value.replace(/\D/g, ""), 10); set(isNaN(n) ? 0 : n); }}/> {suffix}
); }; // ── Photo capture tile (C-011) ── const PhotoTile = ({ filled, label, hint, tag, onTap, aspect = "1 / 1", required }) => ( ); // ── Deterministic QR-ish block (C-116) — faithful placeholder, not scannable ── const QR = ({ value = "GPN", size = 220 }) => { const n = 27; const cells = useMemo(() => { let h = 2166136261; for (let i = 0; i < value.length; i++) { h ^= value.charCodeAt(i); h = Math.imul(h, 16777619); } const rng = () => { h ^= h << 13; h ^= h >>> 17; h ^= h << 5; return (h >>> 0) / 4294967296; }; const g = Array.from({ length: n }, () => Array.from({ length: n }, () => rng() > 0.52)); const finder = (r, c) => { for (let i = -1; i <= 7; i++) for (let j = -1; j <= 7; j++) { const rr = r + i, cc = c + j; if (rr < 0 || cc < 0 || rr >= n || cc >= n) continue; if (i >= 0 && i <= 6 && j >= 0 && j <= 6) { const border = (i === 0 || i === 6) || (j === 0 || j === 6); const core = i >= 2 && i <= 4 && j >= 2 && j <= 4; g[rr][cc] = border || core; } else g[rr][cc] = false; } }; finder(0, 0); finder(0, n - 7); finder(n - 7, 0); return g; }, [value]); const m = size / n; return (
{cells.map((row, r) => row.map((on, c) => on ? : null))}
); }; // ── Centered confirm modal ── const Modal = ({ open, onClose, title, desc, children, actions, wide }) => { if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose && onClose(); }}>
{title &&

{title}

} {desc &&

{desc}

} {children} {actions &&
{actions}
}
); }; // ── Supervisor override modal (§2.2 — PIN + reason) ── const OverrideModal = ({ open, onClose, onConfirm, condition }) => { const [pin, setPin] = useState(""); const [reason, setReason] = useState(""); const ref = useRef(null); useEffect(() => { if (open) { setPin(""); setReason(""); setTimeout(() => ref.current?.focus(), 50); } }, [open]); if (!open) return null; return (
ref.current?.focus()}> setPin(e.target.value.replace(/\D/g, "").slice(0, 4))} style={{ position: "absolute", opacity: 0, pointerEvents: "none", width: 1, height: 1 }}/>
Supervisor PIN *
{Array.from({ length: 4 }).map((_, i) => (
{pin[i] ? "•" : ""}
))}
Reason *