);
}
// Is a URL an image we can thumbnail?
const _isImgUrl = u => /\.(png|jpe?g|webp|gif|avif|svg)(\?|#|$)/i.test(u) || /\/preview\//i.test(u);
// Only surface the print-relevant asset fields — skip Edit / Admin Edit / plain
// Preview etc. so we don't thumbnail (and re-render) files nobody needs.
const _WANTED_ASSET = /design.?preview|print.?ready|gang.?sheet/i;
// Build a cached, downscaled thumbnail URL (w = longest side px).
function _thumbUrl(a, w) {
return a.ext
? "/api/thumb?w=" + w + "&src=" + encodeURIComponent(a.download)
: "/api/thumb?w=" + w + "&order=" + encodeURIComponent(a.order) + "&id=" + encodeURIComponent(a.fid);
}
// Gather an order's files (uploaded artwork + URL-valued line-item properties).
function collectOrderAssets(o, files) {
const out = []; const seen = new Set();
(files || []).forEach(f => {
out.push({ label: f.filename, download: DTF.artworkUrl(o.id, f.id, true), isImage: /^image\//.test(f.contentType || ""), ext: false, order: String(o.id).replace(/^#/, ""), fid: f.id });
});
(o.items || []).forEach(it => (it.properties || []).forEach(p => {
const v = String(p.value || "").trim();
const label = String(p.name || "").replace(/^_+/, "").replace(/_/g, " ").trim() || "file";
if (/^https?:\/\//i.test(v) && !seen.has(v) && _WANTED_ASSET.test(label)) {
seen.add(v);
out.push({ label, download: v, isImage: _isImgUrl(v), ext: true });
}
}));
return out;
}
function AssetThumb({ a }) {
if (a.isImage) {
// No image loaded up front — just a placeholder. The preview (and its
// thumbnail generation) is fetched on hover, with a loader.
const big = _thumbUrl(a, 560);
return (
e.stopPropagation()}
onMouseEnter={e => showPreview(big, e.currentTarget.getBoundingClientRect())}
onMouseLeave={hidePreview}>
);
}
return e.stopPropagation()}>{a.label};
}
function OrderThumbs({ o }) {
// Seed from cache synchronously so a remount/re-render doesn't refetch or flash.
const [files, setFiles] = useStateP(() => (DTF.artworkCached ? DTF.artworkCached(o.id) : null));
useEffectP(() => {
if (files != null) return; // already have it from cache
let a = true; DTF.artworkFor(o.id).then(f => a && setFiles(f)); return () => { a = false; };
}, [o.id]);
const assets = collectOrderAssets(o, files);
if (!assets.length) return —;
return
{assets.map((a, i) => )}
;
}
// Imperative hover preview — a single DOM node, NOT React state, so hovering a
// thumbnail never re-renders the (large) production table. Anchored beside the
// thumbnail and stable; hides when the cursor moves off any thumbnail or on scroll.
let _pvEl = null, _pvImg = null, _pvReqId = 0;
function _ensurePreviewEl() {
if (_pvEl) return _pvEl;
_pvEl = document.createElement("div");
_pvEl.className = "art-preview";
_pvEl.style.display = "none";
const sp = document.createElement("div"); sp.className = "spin spin--dark art-preview__spin";
_pvImg = document.createElement("img");
_pvEl.appendChild(sp);
_pvEl.appendChild(_pvImg);
document.body.appendChild(_pvEl);
document.addEventListener("mouseover", (e) => {
if (_pvEl.style.display !== "none" && !(e.target.closest && e.target.closest(".thumb"))) hidePreview();
});
document.addEventListener("scroll", () => { if (_pvEl.style.display !== "none") hidePreview(); }, true);
return _pvEl;
}
function showPreview(url, rect) {
const el = _ensurePreviewEl();
// Position the box at a fixed size (loader state) anchored beside the thumb.
const W = 336, H = 336, pad = 12;
let left = rect.left - W - pad;
if (left < pad) left = Math.min(rect.right + pad, window.innerWidth - W - pad);
let top = rect.top - 40;
if (top + H + pad > window.innerHeight) top = window.innerHeight - H - pad;
if (top < pad) top = pad;
el.style.left = left + "px"; el.style.top = top + "px"; el.style.display = "block";
// Load the image now (on hover), showing a spinner until it's ready.
const reqId = ++_pvReqId;
el.classList.add("is-loading");
_pvImg.onload = () => { if (reqId === _pvReqId) el.classList.remove("is-loading"); };
_pvImg.onerror = () => { if (reqId === _pvReqId) hidePreview(); };
if (_pvImg.getAttribute("src") !== url) _pvImg.src = url;
else if (_pvImg.complete) el.classList.remove("is-loading"); // already cached
}
function hidePreview() { _pvReqId++; if (_pvEl) _pvEl.style.display = "none"; }
function Production({ go, sub, tab }) {
const [, force] = useStateP(0); const bump = () => force(x => x + 1);
// Track the current sub-view so the live listeners (which mount once) can tell
// where we are without re-subscribing. Print telemetry only matters on Printing.
const subRef = React.useRef(sub); subRef.current = sub;
const printLive = () => { if (!subRef.current || subRef.current === "printing") bump(); };
const [editingId, setEditingId] = useStateP(null);
const [confirmId, setConfirmId] = useStateP(null);
const [dragId, setDragId] = useStateP(null);
const [dropKey, setDropKey] = useStateP(null);
// Printing sub-tab + pressing selection live HERE (not inside FocusView) so an
// auto-sync re-render doesn't reset them. Default to the Printing tab.
// Printing / pressing sub-tabs are driven by the URL (route.tab) so each tab is
// bookmarkable and survives auto-sync re-renders. Bare route → sensible default.
const ptab = sub === "printing" ? (tab || "printing") : "printing"; // "toprint" | "printing" | "printed"
const presstab = sub === "pressing" ? (tab || "ready_press") : "ready_press"; // "awaiting_prints" | "awaiting_garment" | "ready_press"
const setPtab = (k) => go({ view: "production", sub: "printing", tab: k });
const setPresstab = (k) => go({ view: "production", sub: "pressing", tab: k });
// Board search — type an order # or customer to find a job across ALL tabs and
// see its status (e.g. "did #4652 print yet?"). Lifted so it survives auto-sync.
const [q, setQ] = useStateP("");
const [sel, setSel] = useStateP(() => new Set());
const selBump = () => setSel(new Set(sel));
// View mode (kanban | table) — persisted, defaults to table.
const [mode, setMode] = useStateP(() => { try { return localStorage.getItem("dtf_prod_view") || "table"; } catch (e) { return "table"; } });
useEffectP(() => { try { localStorage.setItem("dtf_prod_view", mode); } catch (e) {} }, [mode]);
// Pull in any production orders that aren't in the loaded orders page (workflow
// references them but reloadData only fetches the first page) so the board is
// complete. Called on open and after every live refresh.
const fetchMissing = async () => {
const names = Object.keys((DTF._workflow && DTF._workflow.orders) || {});
const missing = names.filter(n => !DTF.getOrder(n));
if (missing.length) await Promise.all(missing.map(n => DTF.fetchOrderByName(n).catch(() => null)));
};
// On open, reload the content: refresh orders + workflow (so the board reflects
// the current state, not whatever was loaded at boot), then pull in any
// production orders not in the loaded page yet.
const [loading, setLoading] = useStateP(DTF.orders.length === 0);
useEffectP(() => {
let alive = true;
(async () => {
try { if (DTF.reloadData) await DTF.reloadData(); } catch (e) {}
if (!alive) return;
await fetchMissing();
if (alive) { setLoading(false); bump(); }
})();
return () => { alive = false; };
}, []);
// Live-sync pushed fresh data → re-fetch out-of-page production orders (the
// poller's reload only covers the first page) and re-render the board so it
// stays current without a manual reload.
const [syncedAt, setSyncedAt] = useStateP(null);
useEffectP(() => {
let alive = true;
const h = async () => { await fetchMissing(); if (alive) { setSyncedAt(Date.now()); bump(); } };
window.addEventListener("dtf:refreshed", h);
// A stage/printer change (from the order page or anywhere) moves an order between
// lanes — re-render so it drops out of its old list immediately (e.g. assigning a
// printer sends it from RIP → print queue and it vanishes from the RIP list live).
window.addEventListener("dtf:workflow", bump);
// Live printing highlight/% — only re-renders on the Printing view (or the
// full board), so Design/RIP/Pressing lists don't flicker on every poll.
window.addEventListener("dtf:print-live", printLive);
return () => { alive = false; window.removeEventListener("dtf:refreshed", h); window.removeEventListener("dtf:workflow", bump); window.removeEventListener("dtf:print-live", printLive); };
}, []);
const [reloading, setReloading] = useStateP(false);
const doReload = async () => {
if (reloading) return;
setReloading(true);
try {
if (DTF.reloadData) await DTF.reloadData();
const names = Object.keys((DTF._workflow && DTF._workflow.orders) || {});
const missing = names.filter(n => !DTF.getOrder(n));
if (missing.length) await Promise.all(missing.map(n => DTF.fetchOrderByName(n).catch(() => null)));
} catch (e) {}
setReloading(false); bump();
};
const printers = DTF._workflow.printers || [];
const isOnline = p => p.active !== false;
// Live production jobs derived from real orders (terminal/collected excluded by status).
const jobs = (DTF.orders || []).map(o => {
const ui = uiStageOf(o);
if (!ui) return null;
const c = DTF.getCustomer(o.customerId);
return {
id: o.id, order: o, ui, printerId: o.printerId || null,
customer: c ? c.name : (o.address || "").split(",")[0] || "—",
units: (o.items || []).reduce((s, it) => s + (it.qty || 0), 0),
metres: DTF.orderMetres(o),
needsPress: needsPressOf(o),
method: o.method, fulfillBy: o.fulfillBy,
vip: (o.flags || []).includes("vip"),
};
}).filter(Boolean);
// Move a job to a lane (and optionally a printer); maps UI lane -> backend stage.
async function move(id, ui, printerId = null) {
const stage = UI_TO_STAGE[ui];
await DTF.setOrderStage(id, stage, ui === "printing" ? printerId : null);
bump();
}
// ---- printer CRUD (live workflow store) ----
async function addPrinter() {
const before = new Set((DTF._workflow.printers || []).map(p => p.id));
const n = (DTF._workflow.printers || []).length + 1;
try { await DTF.addPrinter("DTF Printer " + String(n).padStart(2, "0")); } catch (e) { alert(e.message); }
const added = (DTF._workflow.printers || []).find(p => !before.has(p.id));
if (added) setEditingId(added.id);
bump();
}
async function renamePrinter(id, name) { await DTF.updatePrinter(id, { name }); bump(); }
async function togglePrinter(p) { await DTF.updatePrinter(p.id, { active: !isOnline(p) }); bump(); }
async function deletePrinter(id) {
// Send any jobs on this printer back to the unassigned print pile, then delete.
const onIt = jobs.filter(j => j.printerId === id && j.ui === "printing");
for (const j of onIt) await DTF.setOrderStage(j.id, "print_queue", null);
try { await DTF.removePrinter(id); } catch (e) { alert(e.message); }
setConfirmId(null); bump();
}
// ---- drag & drop ----
function onDrop(e, ui, printerId, disabled) {
e.preventDefault();
if (disabled) { setDropKey(null); setDragId(null); return; }
const id = e.dataTransfer.getData("text/plain") || dragId;
if (id) move(id, ui, printerId);
setDropKey(null); setDragId(null);
}
const zone = (key, ui, printerId, disabled) => ({
onDragOver: e => { if (disabled) return; e.preventDefault(); if (dropKey !== key) setDropKey(key); },
onDrop: e => onDrop(e, ui, printerId, disabled),
});
// When an order entered its current stage (for FIFO ordering of the RIP queue).
const stageTs = id => ((DTF._workflow.orders || {})[id] || {}).updatedAt || 0;
// ---- groupings ----
const by = useMemoP(() => {
const g = { design: [], rip: [], toprint: [], printed: [], pressing: [], ready: [], printers: {} };
printers.forEach(p => g.printers[p.id] = []);
jobs.forEach(j => {
if (j.ui === "printing" && g.printers[j.printerId]) g.printers[j.printerId].push(j);
else if (j.ui === "printing") g.toprint.push(j); // printer was deleted under it
else g[j.ui].push(j);
});
// Sort every group by order number, newest first — except the RIP queue,
// which goes oldest order id first (ascending) so it RIPs in arrival order.
const orderNum = j => parseInt(String(j.id).replace(/[^\d]/g, ""), 10) || 0;
const byOrderDesc = (a, b) => orderNum(b) - orderNum(a);
const byOrderAsc = (a, b) => orderNum(a) - orderNum(b);
g.design.sort(byOrderDesc); g.rip.sort(byOrderAsc); g.toprint.sort(byOrderDesc);
g.printed.sort(byOrderDesc); g.pressing.sort(byOrderDesc); g.ready.sort(byOrderDesc);
printers.forEach(p => g.printers[p.id].sort(byOrderDesc));
return g;
}, [jobs, printers, force]);
const onPress = printers.reduce((s, p) => s + by.printers[p.id].length, 0);
const held = by.design.length + by.rip.length + by.toprint.length + onPress + by.pressing.length;
// Flat list of jobs in board order, so opening one gives prev/next across the
// whole production floor on the order page.
const prodFlat = [
...by.design, ...by.rip, ...by.toprint,
...printers.flatMap(p => by.printers[p.id]),
...by.printed, ...by.pressing, ...by.ready,
].map(j => j.id);
function openJob(o) { DTF.setOrderNav(prodFlat, { source: "Production", route: { view: "production" } }); go({ view: "order", id: o.id }); }
// ---- job card ----
function JobCard({ j }) {
const o = j.order;
const m = DTF.methodMeta[j.method] || { urg: "rm48" };
const due = dueMeta(j.fulfillBy);
const cleared = j.ui === "ready";
return (
{
// Set the payload synchronously so the native drag starts on the FIRST
// grab; defer the React state update so re-rendering the dragged node
// doesn't cancel the in-flight drag.
e.dataTransfer.setData("text/plain", j.id); e.dataTransfer.effectAllowed = "move";
const id = j.id; setTimeout(() => setDragId(id), 0);
}}
onDragEnd={() => { setDragId(null); setDropKey(null); }}
>