Use	Service	Code	Package	Default
upd(i, { enabled: e.target.checked })} />	upd(i, { name: e.target.value })} placeholder="Service name" />	upd(i, { code: e.target.value })} placeholder="code" />		setData(d => ({ ...d, defaultServiceId: s.id }))} />

Company & invoice details

Shown on the PDF invoice — the “From” block and the payment/bank details footer. Changes apply to the next invoice generated.

{field("Trading name", "name", "DTF.UK")} From address (one line each)

set("addr", e.target.value)} /></label>
        {field("Email", "email")}
        {field("Website", "website")}
        {field("Legal company name", "legalName")}
        {field("Bank", "bank")}
        {field("Sort code", "sortCode")}
        {field("Account number", "accountNo")}
        {field("Registered company No.", "companyNo")}
        {field("VAT registration number", "vat")}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
          <button className="btn btn--primary btn--sm" disabled={saving} onClick={save}>{saving ? "Saving…" : "Save company details"}</button>
          {msg && <span className="kick">{msg}</span>}
        </div>
      </div>
    </div>
  );
}

// Global font library — upload TTF/OTF once; usable in every text/artwork builder.
function FontsCard() {
  const [fonts, setFonts] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const inputRef = React.useRef(null);
  const refresh = () => DTF.listFonts().then(setFonts);
  useEffect(() => { refresh(); }, []);
  useEffect(() => {
    (fonts || []).forEach(f => {
      const fam = "dtf-font-" + f.id;
      if ([...document.fonts].some(ff => ff.family === fam)) return;
      new FontFace(fam, "url(" + DTF.fontFileUrl(f.id) + ")").load().then(ff => { document.fonts.add(ff); setFonts(s => s ? s.slice() : s); }).catch(() => {});
    });
  }, [fonts]);
  async function upload(file) {
    if (!file) return;
    if (!/\.(ttf|otf)$/i.test(file.name || "")) { setErr("Only .ttf or .otf fonts are supported"); return; }
    setBusy(true); setErr("");
    try { await DTF.uploadFont(file, (file.name || "").replace(/\.(ttf|otf)$/i, "")); await refresh(); }
    catch (e) { setErr(e.message || "Upload failed"); }
    setBusy(false);
  }
  async function del(id) { if (!confirm("Delete this font? Existing artwork keeps its rendered PNG; only new renders are affected.")) return; setFonts(await DTF.deleteFont(id)); }
  return (
    <div className="card">
      <div className="card__head"><Icon name="spark" /><h3>Fonts</h3>{fonts && fonts.length > 0 && <span className="right kick">{fonts.length}</span>}</div>
      <div className="card__body">
        <div className="dim" style={{ fontSize: 12.5, marginBottom: 10 }}>Upload TTF/OTF fonts once here — they’re available in every text/artwork builder.</div>
        {fonts === null ? <div className="dim" style={{ fontSize: 12.5 }}>Loading…</div>
          : fonts.length === 0 ? <div className="dim" style={{ fontSize: 12.5 }}>No fonts yet.</div>
          : <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {fonts.map(f => (
                <div key={f.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 10px", border: "1px solid var(--line,#dfe4ea)", borderRadius: 8 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: '"dtf-font-' + f.id + '", serif', fontSize: 26, lineHeight: 1.15, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.name} — Aa Bb 123</div>
                    <div className="mono dim" style={{ fontSize: 10.5 }}>{f.name} · {(f.format || "").toUpperCase()} · {window.fmtBytes ? window.fmtBytes(f.size) : f.size + "B"}</div>
                  </div>
                  <button className="btn btn--ghost btn--sm" onClick={() => del(f.id)}>Delete</button>
                </div>
              ))}
            </div>}
        {err && <div className="form-err" style={{ marginTop: 8 }}>{err}</div>}
        <div style={{ marginTop: 12 }}>
          <button className="btn btn--dark btn--sm" disabled={busy} onClick={() => inputRef.current && inputRef.current.click()}>{busy ? "Uploading…" : "Upload font (.ttf / .otf)"}</button>
          <input ref={inputRef} type="file" accept=".ttf,.otf,font/ttf,font/otf" style={{ display: "none" }} onChange={e => { const f = e.target.files[0]; e.target.value = ""; upload(f); }} />
        </div>
      </div>
    </div>
  );
}

function Settings() {
  return (
    <div className="board" style={{ maxWidth:760, display:"flex", flexDirection:"column", gap:16 }}>
      <PrintersManager />
      <LabelPrinterCard />
      <SummaryListCard />
      <FontsCard />
      <CompanyCard />
      <RoyalMailCard />
      <MailCard kind="imap" />
      <MailCard kind="smtp" />
    </div>
  );
}

// Which order statuses the "Today's Summary List" button (Orders board) includes.
function SummaryListCard() {
  const [picks, setPicks] = useState(null);     // null = loading
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState("");
  useEffect(() => {
    fetch("/api/settings/summary-statuses").then(r => r.json())
      .then(j => setPicks(new Set(Array.isArray(j.statuses) ? j.statuses : [])))
      .catch(() => setPicks(new Set()));
  }, []);
  const opts = (typeof STATUS_OPTIONS !== "undefined" ? STATUS_OPTIONS : []);
  const toggle = (k) => setPicks(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; });
  async function save() {
    setSaving(true); setMsg("");
    try {
      const r = await fetch("/api/settings/summary-statuses", {
        method: "PUT", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ statuses: [...picks] }),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error || "Save failed");
      setPicks(new Set(j.statuses || [])); setMsg("Saved.");
    } catch (e) { setMsg("Error: " + e.message); }
    finally { setSaving(false); }
  }
  return (
    <div className="card">
      <div className="card__head"><Icon name="doc" /><h3>Today's Summary List</h3>
        {picks && <span className="right badge badge--ghost">{picks.size} status{picks.size === 1 ? "" : "es"}</span>}
      </div>
      <div className="card__body">
        <div className="kick" style={{ marginBottom: 12 }}>
          The <b>Today's Summary List</b> button on the Orders board selects every loaded order in these statuses (you can then print the one-row-per-order summary from the selection toolbar). Choose which statuses to include.
        </div>
        {!picks ? <div className="dim">Loading…</div> : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(190px,1fr))", gap: 8 }}>
            {opts.map(k => {
              const meta = (DTF.statusMeta && DTF.statusMeta[k]) || {};
              return (
                <label key={k} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, cursor: "pointer" }}>
                  <input type="checkbox" checked={picks.has(k)} onChange={() => toggle(k)} />
                  <span className="status-multi__dot" style={{ background: meta.dot || "#ccc", width: 8, height: 8, borderRadius: "50%", display: "inline-block", flex: "none" }} />
                  <span>{meta.label || k}</span>
                </label>
              );
            })}
          </div>
        )}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 14 }}>
          <button className="btn btn--primary btn--sm" disabled={saving || !picks} onClick={save}>{saving ? "Saving…" : "Save"}</button>
          {msg && <span className="kick" style={{ color: "var(--mint-ink)" }}>{msg}</span>}
        </div>
      </div>
    </div>
  );
}

function DataScreen({ children }) {
  return (
    <div className="app">
      <div className="main" style={{ gridColumn:"1 / -1" }}>
        <div className="content"><div className="empty">{children}</div></div>
      </div>
    </div>
  );
}

function App() {
  const [authed, setAuthed] = useState(null); // null = checking session, false = show login, true = in
  const [phase, setPhase] = useState(DTF.loaded ? "ready" : "loading"); // loading | ready | error
  const [errMsg, setErrMsg] = useState("");
  const [route, setRoute] = useState(() => parseHash());
  const [threads, setThreads] = useState(() => DTF.threads.map(t => ({ ...t, messages: t.messages.slice() })));

const [userEmail, setUserEmail] = useState("");
  const [role, setRole] = useState(null);        // "admin" | "partner" (null until /api/me resolves)
  const [myShops, setMyShops] = useState([]);    // shops this user may see (partner) or all shops (admin)
  const [, setAssignTick] = useState(0);         // bump when order→shop assignments load, to re-tag the list
  const [navOpen, setNavOpen] = useState(false);                                  // mobile off-canvas drawer
  const [collapsed, setCollapsed] = useState(() => localStorage.getItem("dtf_nav_collapsed") === "1"); // desktop collapse
  useEffect(() => { localStorage.setItem("dtf_nav_collapsed", collapsed ? "1" : "0"); }, [collapsed]);
  // Burger: on mobile toggles the drawer; on desktop collapses/expands the sidebar.
  const toggleNav = () => {
    if (window.matchMedia("(max-width: 860px)").matches) setNavOpen(o => !o);
    else setCollapsed(c => !c);
  };
  // Check the server session on boot (auth is off in local dev → authed immediately).
  useEffect(() => {
    fetch("/api/me").then(r => r.json())
      .then(j => {
        setAuthed(j.authed || !j.required); setUserEmail(j.email || "");
        setRole(j.role || "admin");
        DTF.role = j.role || "admin";
        // Partners get their shops here; admins load the full list separately
        // (below) — don't clobber that list with the empty set /api/me returns
        // for admins (this effect re-runs on login).
        if (j.role === "partner") { setMyShops(j.shops || []); DTF.myShops = j.shops || []; }
        // Expose the signed-in user's display name for email signatures etc.
        const local = ((j.email || "").split("@")[0] || "");
        DTF.userName = local.replace(/[._-]+/g, " ").replace(/\b\w/g, c => c.toUpperCase()).trim();
        DTF.userEmail = j.email || "";
      })
      .catch(() => { setAuthed(true); setRole("admin"); }); // server unreachable → don't lock out
  }, [authed]);

// Admins get the full shop list (for the sidebar's Partner-shops section and
  // the preview). Partners already have their shops from /api/me.
  useEffect(() => {
    if (role !== "admin") return;
    fetch("/api/shop/mine").then(r => r.json()).then(j => { if (j && j.shops) { setMyShops(j.shops); DTF.myShops = j.shops; } }).catch(() => {});
    // Order→shop assignments, so the orders list can tag which location an order is handed to.
    fetch("/api/shops").then(r => r.json()).then(j => { if (j && j.orders) { DTF.shopAssignments = j.orders; DTF.shopsById = Object.fromEntries((j.shops || []).map(s => [s.slug, s])); setAssignTick(x => x + 1); } }).catch(() => {});
  }, [role]);

function runLoad() {
    setPhase("loading"); setErrMsg("");
    DTF.load()
      .then(() => setPhase("ready"))
      .catch(e => { setErrMsg(e.message || String(e)); setPhase("error"); });
  }

const [reloading, setReloading] = useState(false);
  function reloadAll() {
    setReloading(true);
    DTF.reload()
      .then(() => setThreads(prev => DTF.liveThreads.length ? [...DTF.liveThreads] : prev))
      .catch(() => {})
      .finally(() => setReloading(false));
  }

useEffect(() => {
    // Partners never load the admin dataset (/api/orders, /api/customers 403 for
    // them) — the shop shell fetches its own scoped data.
    if (authed && role && role !== "partner" && !DTF.loaded) runLoad();
  }, [authed, role]);

// Live-sync: once data is ready, poll for server-side changes and auto-refresh
  // the current view (throttled). Pauses while the tab is hidden.
  useEffect(() => {
    if (phase !== "ready" || !DTF.live) return;
    DTF.live.start();
    if (DTF.printLive) DTF.printLive.start();
    if (DTF.versionWatch) DTF.versionWatch.start();
    return () => { DTF.live.stop(); if (DTF.printLive) DTF.printLive.stop(); if (DTF.versionWatch) DTF.versionWatch.stop(); };
  }, [phase]);

// A newer frontend build has been deployed — surface a reload prompt (see
  // DTF.versionWatch). Once shown it stays until the user reloads.
  const [updateReady, setUpdateReady] = useState(false);
  useEffect(() => {
    if (DTF._updateReady) { setUpdateReady(true); return; }
    const onUpd = () => setUpdateReady(true);
    window.addEventListener("dtf:update-available", onUpd);
    return () => window.removeEventListener("dtf:update-available", onUpd);
  }, []);

// Pull live Gmail/IMAP emails once data is ready, so the Inbox AND the orders
  // grid (per-customer email counts) reflect real threads.
  const [inboxTried, setInboxTried] = useState(false);
  useEffect(() => {
    if (phase !== "ready" || inboxTried) return;
    setInboxTried(true);
    DTF.loadInbox()
      .then(r => { if (r.configured) { DTF.setLiveThreads(r.threads); if (r.threads.length) setThreads(r.threads); } })
      .catch(() => {}); // not configured / unreachable -> keep demo threads
  }, [phase, inboxTried]);

// When opening the Inbox, merge any threads discovered elsewhere (e.g. a mailbox
  // search from an order page) so they can be opened and replied to here.
  useEffect(() => {
    if (route.view !== "inbox" || !DTF.liveThreads || !DTF.liveThreads.length) return;
    mergeLive();
  }, [route.view]);

// Deep link to a specific thread (#/inbox/mail:<uid>) that isn't loaded yet —
  // resolve it from the mailbox so a cold reload opens that exact conversation.
  useEffect(() => {
    if (phase !== "ready" || route.view !== "inbox" || !route.id) return;
    if ((DTF.liveThreads || []).some(t => t.id === route.id)) return;
    let alive = true;
    DTF.resolveThread(route.id).then(ok => { if (alive && ok) mergeLive(); }).catch(() => {});
    return () => { alive = false; };
  }, [phase, route.view, route.id]);

// Keep the URL hash and route in sync (back/forward + reload land on the same view).
  // Also canonicalise the URL — rewrite any encoded-gid / "#" form to the clean
  // hash so the address bar always reads e.g. #/customers/123, #/orders/3653.
  useEffect(() => {
    const sync = () => {
      const r = parseHash();
      const clean = toHash(r);
      if (location.hash && location.hash !== clean) history.replaceState(null, "", clean);
      setRoute(r);
    };
    window.addEventListener("hashchange", sync);
    if (!location.hash) location.replace("#/dispatch"); else sync();
    return () => window.removeEventListener("hashchange", sync);
  }, []);

// Put the most identifying token FIRST in the tab title so it stays visible when
  // the browser truncates narrow tabs — e.g. an order shows "#3924 · …" not the
  // brand name. Falls back to a per-view label.
  useEffect(() => {
    const BRAND = "DTF Ops";
    let t = BRAND;
    switch (route.view) {
      case "order": t = "#" + String(route.id || "").replace(/^#/, "") + " · Order · " + BRAND; break;
      case "customer": { const c = DTF.getCustomer && DTF.getCustomer(route.id); t = (c && c.name ? c.name : "Customer") + " · " + BRAND; break; }
      case "orders": t = (route.board === "new" ? "New orders" : route.board === "board" ? "Dispatch" : "Orders") + " · " + BRAND; break;
      case "drafts": t = "Draft orders · " + BRAND; break;
      case "draft": t = "Draft order · " + BRAND; break;
      case "inbox": t = "Inbox · " + BRAND; break;
      case "outreach": t = "Outreach · " + BRAND; break;
      case "conversions": t = "Conversions · " + BRAND; break;
      case "analytics": t = "Analytics · " + BRAND; break;
      case "email": t = "Email · " + BRAND; break;
      case "marketing": t = "Marketing · " + BRAND; break;
      case "reviews": t = "Google Reviews · " + BRAND; break;
      case "production": t = "Production · " + BRAND; break;
      case "shipments": t = "Shipments · " + BRAND; break;
      case "browsing": t = "Browsing · " + BRAND; break;
      case "customers": t = "Customers · " + BRAND; break;
      case "settings": t = "Settings · " + BRAND; break;
      case "shop": {
        const shops = (DTF && DTF.myShops) || [];
        const sh = shops.find(s => s.slug === route.slug);
        const nm = (sh && sh.name) || "Shop";
        t = (route.id ? "#" + String(route.id).replace(/^#/, "") + " · " : "") + nm + " - Orders - DTF.uk Ops";
        break;
      }
    }
    document.title = t;
  }, [route.view, route.id, route.board, route.slug, phase]);

const go = (r) => {
    const next = { id:null, ...r };
    const h = toHash(next);
    if (location.hash !== h) location.hash = h; // hashchange listener updates route
    else setRoute(next);
  };

// Gang-sheet queue polling for the nav badge. MUST sit above the early returns
  // below so the hook order never changes. Badge lights up when a sheet finishes
  // (done/failed) since last viewed; clears when the queue view opens.
  const [gangJobs, setGangJobs] = useState([]);
  const [gangSeen, setGangSeen] = useState(() => Number(localStorage.getItem("dtf_gang_seen") || 0));
  useEffect(() => {
    let alive = true;
    const load = () => { if (DTF.gangSheetQueue) DTF.gangSheetQueue().then(j => { if (alive) setGangJobs(j || []); }).catch(() => {}); };
    load(); const t = setInterval(load, 15000);
    return () => { alive = false; clearInterval(t); };
  }, []);
  useEffect(() => {
    if (route.view === "gangqueue") { const now = Date.now(); localStorage.setItem("dtf_gang_seen", String(now)); setGangSeen(now); }
  }, [route.view, gangJobs.length]);

if (authed === null || (authed && role === null)) return <div className="app"><div className="main" style={{gridColumn:"1 / -1"}}><div className="content"><div className="empty"><span className="spin spin--dark" /></div></div></div></div>;
  if (!authed) return <Login onLogin={()=>setAuthed(true)} />;

// Partner users get a locked-down standalone shell — only their shop's orders,
  // no admin nav, no commercial data. Everything is fetched scoped + redacted.
  if (role === "partner") return <ShopApp shops={myShops} route={route} go={go} userEmail={userEmail} />;

if (phase === "error") return (
    <DataScreen>
      <Icon name="box" />
      <div className="t">Couldn't load Shopify data</div>
      <div className="m">{errMsg}</div>
      <button className="btn btn--primary btn--sm" style={{marginTop:8}} onClick={runLoad}>Retry</button>
    </DataScreen>
  );
  if (phase !== "ready") return <SkeletonScreen />;

const gangFinishedUnseen = gangJobs.filter(j => (j.status === "done" || j.status === "error") && (j.finishedAt || 0) > gangSeen);

const counts = {
    gang: gangFinishedUnseen.length || null,
    gangFailed: gangFinishedUnseen.filter(j => j.status === "error").length,
    gangActive: gangJobs.filter(j => j.status === "queued" || j.status === "running").length,
    // Only orders still needing dispatch/collection (matches the dispatch board — excludes untriaged "new").
    orders: DTF.orders.filter(o=>![ "new","closed","delivered","dispatched","collected","refunded","cancelled", ...DTF.PRODUCTION_STAGES, ...(DTF.HOLD_STAGES||[]) ].includes(o.status)).length,
    // Brand-new orders awaiting triage (the "New orders" board).
    newOrders: DTF.orders.filter(o => o.status === "new").length,
    // All jobs currently on the production floor (any queue stage).
    production: DTF.orders.filter(o => DTF.PRODUCTION_STAGES.includes(o.status)).length,
    customers: DTF.customers.length,
    inbox: threads.filter(t=>t.unread && t.status!=="closed").length,
    attachments: DTF.collectAttachments(DTF.liveThreads).length || null,
  };

const isInbox = route.view === "inbox";

let body;
  switch (route.view) {
    case "orders":    body = <OrdersList go={go} board={route.board} />; break;
    case "order":     body = <OrderDetail id={route.id} go={go} />; break;
    case "drafts":    body = <DraftOrders go={go} />; break;
    case "draft":     body = <DraftOrderDetail id={route.id} go={go} />; break;
    case "customers": body = <CustomersList go={go} />; break;
    case "customer":  body = <CustomerProfile id={route.id} go={go} />; break;
    case "inbox":     body = <Inbox threads={threads} setThreads={setThreads} initialId={route.id} go={go} />; break;
    case "shipments": body = <Shipments go={go} />; break;
    case "browsing":  body = <BrowsingReport go={go} route={route} />; break;
    case "production": body = <Production go={go} sub={route.sub} tab={route.tab} />; break;
    case "outreach": body = <OutreachView go={go} id={route.id} />; break;
    case "conversions": body = <ConversionsReport go={go} />; break;
    case "analytics": body = <AnalyticsDashboard go={go} />; break;
    case "email": body = <EmailReport go={go} />; break;
    case "marketing": body = <MarketingView go={go} />; break;
    case "reviews": body = <ReviewsView go={go} />; break;
    case "attachments": body = <Attachments go={go} />; break;
    case "gangqueue": body = <GangQueue go={go} />; break;
    case "designs":    body = <DesignsView go={go} />; break;
    case "transfers":  body = <TransfersView go={go} />; break;
    case "pricing": body = <PricingView go={go} />; break;
    case "stock":     body = route.sub === "forecast" ? <ForecastView go={go} /> : <StockView go={go} />; break;
    case "settings":  body = <Settings />; break;
    case "shop":      body = <div className="shop-preview-wrap"><ShopView slug={route.slug} name={route.id} go={go} preview shops={myShops} routeTab={route.tab} routeFilter={route.filter} /></div>; break;
    default:          body = <OrdersList go={go} />;
  }

return (
    <div className={"app" + (collapsed ? " is-collapsed" : "")}>
      <Sidebar route={route} go={go} counts={counts} userEmail={userEmail} shops={myShops} open={navOpen} onClose={()=>setNavOpen(false)} />
      <div className="main">
        {updateReady && (
          <div className="update-bar" role="alert">
            <Icon name="spark" />
            <span>A new version of the app is available.</span>
            <button className="btn btn--sm update-bar__btn" onClick={() => location.reload()}>Reload to update</button>
          </div>
        )}
        <Topbar title={title} sub={sub} route={route} go={go} onReload={reloadAll} reloading={reloading} onMenu={toggleNav} />
        <div className="content" style={isInbox ? { overflow:"hidden" } : null}>
          {DTF.loadError && (
            <div className="warn-banner">
              <Icon name="spark" /> Shopify data unavailable — {DTF.loadError}. Orders & customers won’t show until the Admin token is refreshed. Settings & Inbox still work.
              <button className="linklike" style={{marginLeft:8}} onClick={reloadAll}>Retry</button>
            </div>
          )}
          {body}
        </div>
      </div>
    </div>
  );
}

// App-wide error boundary. A single unguarded throw in any view used to blank
// the whole page (React unmounts the tree on an uncaught render error). This
// catches it, shows a recoverable panel with the error, and offers Reload /
// Go home instead of a white screen. React only recovers render/lifecycle
// errors via boundaries — async handlers still need their own try/catch.
class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(error) { return { error }; }
  componentDidCatch(error, info) { console.error("[ErrorBoundary]", error, info && info.componentStack); }
  render() {
    if (!this.state.error) return this.props.children;
    const msg = (this.state.error && (this.state.error.message || String(this.state.error))) || "Unknown error";
    return (
      <div style={{ maxWidth: 560, margin: "12vh auto", padding: "0 20px", fontFamily: "inherit" }}>
        <div className="card">
          <div className="card__body">
            <h3 style={{ margin: "0 0 8px" }}>Something broke on this screen</h3>
            <p className="dim" style={{ fontSize: 13, lineHeight: 1.5, marginTop: 0 }}>
              The page hit an error and stopped rendering. Nothing was lost — reload to carry on. If it keeps happening, tell Slava what you were doing.
            </p>
            <pre style={{ background: "#faf0f0", color: "#8a1c1c", border: "1px solid #f0d0d0", borderRadius: 6, padding: "8px 10px", fontSize: 12, whiteSpace: "pre-wrap", wordBreak: "break-word", margin: "10px 0 14px" }}>{msg}</pre>
            <div style={{ display: "flex", gap: 10 }}>
              <button className="btn btn--primary" onClick={() => location.reload()}>Reload page</button>
              <button className="btn btn--ghost" onClick={() => { location.hash = "#/orders"; location.reload(); }}>Go to orders</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(<ErrorBoundary><App /></ErrorBoundary>);

Print it.
Press it.
Ship it.

Sign in

{K.title}

Royal Mail — Click & Drop

Label printer

Company & invoice details

Print it.Press it.Ship it.

Sign in

{K.title}

Royal Mail — Click & Drop

Label printer

Company & invoice details

Print it.
Press it.
Ship it.