}

Operations

{items.map(it => { // "Orders" opens the New-orders board (the triage queue you work from); // its badge is the count of new orders still to triage. const isOrders = it.key === "orders"; const href = isOrders ? "#/neworders" : (it.hash || "#/" + it.key); const onClk = isOrders ? navR({ view: "orders", board: "new" }) : nav(it.view || it.key); const isActive = isOrders ? (route.view === "orders" && route.board === "new") : (active === (it.view || it.key)); const cnt = isOrders ? counts.newOrders : it.cnt; const showCnt = isOrders ? (cnt != null && cnt > 0) : (cnt != null); return ( {it.label} {it.gang ? (<> {counts.gangActive > 0 && } {counts.gang != null && counts.gang > 0 && 0 ? {background:"#b91c1c",color:"#fff"} : null} title={counts.gangFailed > 0 ? counts.gangFailed + " failed" : counts.gang + " finished"}>{counts.gang}} ) : (showCnt && {cnt})} ); })}

Today

Dispatch board {counts.orders != null && counts.orders > 0 && {counts.orders}} Shipments Production {counts.production != null && counts.production > 0 && {counts.production}} {(() => { const st = s => (DTF.orders || []).filter(o => s.includes(o.status)).length; const subs = [ { key: "design", label: "Design", icon: "spark", n: st(["awaiting_artwork","design_queue"]) }, { key: "rip", label: "RIP", icon: "download", n: st(["rip_queue"]) }, { key: "printing", label: "Printing", icon: "print", n: st(["print_queue","printing","printed"]) }, { key: "pressing", label: "Pressing", icon: "shirt", n: st(["press_queue"]) }, ]; return subs.map(su => ( {su.label} {su.n > 0 && {su.n}} )); })()} Stock {counts.stockLow != null && counts.stockLow > 0 && {counts.stockLow}} Re-Stock forecast Outreach {(shops && shops.length > 0) && <>

Partner shops

{shops.map(s => ( {s.name} ))} }

Insights

Conversions Analytics Email Marketing Google Reviews

{initials}

{name}

{email || "Studio · Admin"}

); } /* -------- Global search (⌘K) — orders + customers, with live status -------- */ function GlobalSearch({ go }) { const [q, setQ] = useState(""); const [open, setOpen] = useState(false); const [hi, setHi] = useState(0); const inputRef = useRef(null); const boxRef = useRef(null); // ⌘K / Ctrl-K focuses the search from anywhere. useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) { e.preventDefault(); inputRef.current && inputRef.current.focus(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); // Close when clicking outside. useEffect(() => { const onDoc = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); const qq = q.trim().toLowerCase().replace(/^#/, ""); const results = useMemo(() => { if (!qq) return []; const out = []; const orders = (DTF.orders || []).filter(o => { const cust = DTF.getCustomer ? DTF.getCustomer(o.customerId) : null; return String(o.id).replace(/^#/, "").toLowerCase().includes(qq) || (cust && (cust.name || "").toLowerCase().includes(qq)); }); orders.slice(0, 8).forEach(o => out.push({ kind: "order", o })); if (out.length < 8) { const custs = (DTF.customers || []).filter(c => (c.name || "").toLowerCase().includes(qq) || (c.email || "").toLowerCase().includes(qq)); custs.slice(0, 8 - out.length).forEach(c => out.push({ kind: "customer", c })); } // Fallback: a bare order number not in the loaded set — offer to open it directly // (the order page fetches it on demand). if (/^\d+$/.test(qq) && !out.some(r => r.kind === "order" && String(r.o.id).replace(/^#/, "") === qq)) { out.push({ kind: "openOrder", id: "#" + qq }); } return out; }, [qq]); const pick = (r) => { setOpen(false); setQ(""); if (r.kind === "order") go({ view: "order", id: r.o.id }); else if (r.kind === "openOrder") go({ view: "order", id: r.id }); else if (r.kind === "customer") go({ view: "customer", id: r.c.id }); }; const onKeyDown = (e) => { if (!open || !results.length) { if (e.key === "Enter" && results.length) pick(results[0]); return; } if (e.key === "ArrowDown") { e.preventDefault(); setHi(h => Math.min(h + 1, results.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setHi(h => Math.max(h - 1, 0)); } else if (e.key === "Enter") { e.preventDefault(); pick(results[hi] || results[0]); } else if (e.key === "Escape") { setOpen(false); } }; return (

{ setQ(e.target.value); setOpen(true); setHi(0); }} onFocus={() => q && setOpen(true)} onKeyDown={onKeyDown} /> ⌘K {open && results.length > 0 && (

{results.map((r, i) => { if (r.kind === "openOrder") return ( ); if (r.kind === "customer") return ( ); const o = r.o; const cust = DTF.getCustomer ? DTF.getCustomer(o.customerId) : null; const st = (DTF.statusMeta && DTF.statusMeta[o.status]) || null; return ( ); })}

)}

); } /* ---------------- Topbar ---------------- */ const notifAgo = (ts) => { if (!ts) return ""; const s = Math.max(0, Math.round((Date.now() - ts) / 1000)); if (s < 60) return "just now"; const m = Math.round(s / 60); if (m < 60) return m + "m ago"; const h = Math.round(m / 60); if (h < 48) return h + "h ago"; return Math.round(h / 24) + "d ago"; }; // Top-bar bell: polls the notification centre; unread badge; a dropdown of past // notifications (gang sheet done/failed, and anything else we push). Marks all read // when opened; each links to the relevant page. function NotificationBell({ go }) { const [open, setOpen] = useState(false); const [data, setData] = useState({ notifications: [], unread: 0 }); const ref = useRef(null); useEffect(() => { let alive = true; const load = () => { if (DTF.notifications) DTF.notifications().then(d => { if (alive) setData(d || { notifications: [], unread: 0 }); }).catch(() => {}); }; load(); const t = setInterval(load, 15000); return () => { alive = false; clearInterval(t); }; }, []); useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); const toggle = async () => { const willOpen = !open; setOpen(willOpen); if (willOpen && data.unread) { try { await DTF.notificationsRead("all"); setData(d => ({ ...d, unread: 0, notifications: d.notifications.map(n => n.readAt ? n : { ...n, readAt: Date.now() }) })); } catch {} } }; const openNotif = (n) => { setOpen(false); if (!n.link) return; if (n.link.charAt(0) === "#") location.hash = n.link.slice(1); else window.open(n.link, "_blank", "noopener"); }; const clearAll = async (e) => { e.stopPropagation(); try { await DTF.notificationsClear(); setData({ notifications: [], unread: 0 }); } catch {} }; const runAction = async (e, a) => { e.stopPropagation(); if (!a || !a.href) return; if (a.method === "POST") { try { const r = await fetch(a.href, { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" }); if (!r.ok) { const j = await r.json().catch(() => ({})); alert(j.error || "Couldn't re-print — the job may have expired."); return; } if (DTF.notifications) DTF.notifications().then(d => setData(d || { notifications: [], unread: 0 })).catch(() => {}); } catch { alert("Re-print failed — is the print agent connected?"); } } else { window.open(a.href, "_blank", "noopener"); } }; const dot = { success: "#16a34a", error: "#b91c1c", warn: "#b45309", info: "#6b7280" }; return (

{open && (

Notifications{data.notifications.length > 0 && }

{data.notifications.length === 0 ?

You're all caught up.

: data.notifications.map(n => (

openNotif(n)}>

{n.title}

{n.body &&

{n.body}

}

{notifAgo(n.updatedAt || n.createdAt)}

{Array.isArray(n.actions) && n.actions.length > 0 && (

{n.actions.map((a, i) => ( ))}

)}

{n.link && ↗}

))}

)}

); } function Topbar({ title, sub, actions, route, go, onReload, reloading, onMenu }) { // Prev/next through the list an order was opened from (board/all/search/…), // live-filtered so orders that have left the source list stop being counted. const [, bump] = useState(0); useEffect(() => { const h = () => bump(x => x + 1); window.addEventListener("dtf:workflow", h); // an order changed stage window.addEventListener("dtf:refreshed", h); // data reloaded return () => { window.removeEventListener("dtf:workflow", h); window.removeEventListener("dtf:refreshed", h); }; }, []); const ordNav = (route && route.view === "order" && DTF.navStepper) ? DTF.navStepper(route.id) : null; // [ / ] step to the previous / next order (ignored while typing in a field). const prevId = ordNav && ordNav.prevId, nextId = ordNav && ordNav.nextId; useEffect(() => { if (!prevId && !nextId) return; const onKey = (e) => { if (e.metaKey || e.ctrlKey || e.altKey) return; const t = e.target; if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return; if (e.key === "[" && prevId) { e.preventDefault(); go({ view: "order", id: prevId }); } else if (e.key === "]" && nextId) { e.preventDefault(); go({ view: "order", id: nextId }); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [prevId, nextId]); return (

{ordNav ? (

{title}

{ordNav.pos} / {ordNav.len}

) : (<>

{title}

{sub && {sub}} )}

{actions} {onReload && }

); } /* loading skeletons */ function SkeletonRows({ rows = 8 }) { return (

{Array.from({ length: rows }).map((_, i) => (

))}

); } // Full-screen skeleton for the initial app load (faux topbar + content rows). function SkeletonScreen() { return (

); } /* expose */ Object.assign(window, { Icon, StatusBadge, MetaBadge, ChannelBadge, Flags, Tags, MethodCell, Avatar, CopyBtn, Sidebar, Topbar, SkeletonRows, SkeletonScreen, });