domma-cms 0.84.0 → 0.85.0

package/plugins/shopping-cart/admin/lib/kit.js

@@ -0,0 +1,190 @@
+/**
+ * Shop admin - what every screen shares: the admin's helpers (loaded at run
+ * time; a plugin never imports admin/ statically - the updater replaces it),
+ * the API, escaping, money in and out, slideover forms, and rows with a
+ * right-click / ⋮ / Shift+F10 menu.
+ *
+ * @module shopping-cart/admin/lib/kit
+ */
+
+import {formatMoney, fromMinor, toMinor} from '/plugins/shopping-cart/public/lib/money.js';
+
+export const SIDEBAR_URL = '#/plugins/shopping-cart';
+export const BASE = '/api/plugins/shopping-cart';
+
+let kit = null;
+
+/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+export function loadKit() {
+    if (!kit) {
+        kit = Promise.all([
+            import('/admin/js/lib/tool-kit.js').catch(() => ({})),
+            import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+            import('/admin/js/lib/help-popover.js').catch(() => ({}))
+        ]).then(([tk, chrome, help]) => ({
+            onceClosed: tk.onceClosed || ((so, fn) => { const c = so.close.bind(so); so.close = (...a) => { const r = c(...a); fn?.(); return r; }; }),
+            openMenuAt: tk.openMenuAt || ((el) => {
+                const r = el.getBoundingClientRect();
+                el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+            }),
+            viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
+            addBannerAction: chrome.addBannerAction || (() => null),
+            helpPopovers: help.helpPopovers || (() => () => {})
+        }));
+    }
+    return kit;
+}
+
+/** The Shop's API. H attaches the token and refreshes it on a 401; it throws with the server's `error`. */
+const seg = (id) => encodeURIComponent(String(id));
+export const api = {
+    summary: () => H.get(`${BASE}/summary`),
+    extensions: () => H.get(`${BASE}/extensions`),
+    products: {
+        list: () => H.get(`${BASE}/products`),
+        create: (d) => H.post(`${BASE}/products`, d),
+        update: (id, d) => H.put(`${BASE}/products/${seg(id)}`, d),
+        patch: (id, d) => H.patch(`${BASE}/products/${seg(id)}`, d),
+        duplicate: (id) => H.post(`${BASE}/products/${seg(id)}/duplicate`, {}),
+        remove: (id) => H.delete(`${BASE}/products/${seg(id)}`),
+        samples: () => H.post(`${BASE}/samples`, {live: true})
+    },
+    orders: {
+        list: () => H.get(`${BASE}/orders`),
+        get: (id) => H.get(`${BASE}/orders/${seg(id)}`),
+        move: (id, body) => H.put(`${BASE}/orders/${seg(id)}/status`, body),
+        note: (id, body) => H.put(`${BASE}/orders/${seg(id)}/note`, body),
+        refund: (id, body) => H.post(`${BASE}/orders/${seg(id)}/refund`, body),
+        remove: (id) => H.delete(`${BASE}/orders/${seg(id)}`)
+    },
+    settings: {
+        get: () => H.get(`${BASE}/settings`),
+        save: (d) => H.put(`${BASE}/settings`, d),
+        test: (provider, d) => H.post(`${BASE}/settings/test/${seg(provider)}`, d)
+    }
+};
+
+/** A list route's entries, whatever shape they came back in. */
+export const entriesOf = (res) => (Array.isArray(res) ? res : res?.entries ?? res?.data ?? []);
+
+/** E.confirm / titles render HTML: user text goes in escaped. */
+export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/** A small DOM tree from an HTML string that holds NO unescaped user data. */
+export function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+export const store = {
+    get(k) { try { return S.get(k); } catch { return null; } },
+    set(k, v) { try { S.set(k, v); } catch { /* a convenience */ } }
+};
+
+/** The sidebar re-asks the Shop's badge. */
+export function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+
+// ---- Money ------------------------------------------------------------------------
+
+let currency = 'GBP';
+export const setCurrency = (c) => { currency = c || 'GBP'; };
+export const getCurrency = () => currency;
+export const money = (n, opts) => formatMoney(n, currency, opts);
+/** For an input: "12.50". Blank for null. */
+export const moneyIn = (n) => (n === null || n === undefined || n === '' ? '' : fromMinor(n, currency));
+/** From an input: 1250, null when blank, NaN when not an amount. */
+export const moneyOut = (text) => {
+    if (String(text ?? '').trim() === '') return null;
+    const m = toMinor(text, currency);
+    return m === null ? NaN : m;
+};
+
+/** "3 min ago", "26 Sep". */
+export function when(iso) {
+    const t = new Date(iso).getTime();
+    if (!Number.isFinite(t)) return '';
+    const s = (Date.now() - t) / 1000;
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)} min ago`;
+    if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+    if (s < 86400 * 6) return `${Math.round(s / 86400)} d ago`;
+    return new Date(t).toLocaleDateString(undefined, {day: 'numeric', month: 'short', ...(s > 86400 * 300 ? {year: 'numeric'} : {})});
+}
+
+// ---- Slideovers ---------------------------------------------------------------------
+
+/**
+ * Open a slideover holding `html`, bound to `model`. Closing with something
+ * changed asks first (once). Everything is disposed and removed on close.
+ *
+ * @returns {Promise<{so, panel, close: (force?: boolean) => void}>}
+ */
+export async function openPanel({title, size = 'md', html, model = {}, methods = {}, dirty, cleanup = () => {}, before}) {
+    const {onceClosed, helpPopovers} = await loadKit();
+    const so = E.slideover({title: esc(title), size, position: 'right'});
+    const panel = fragment(html);
+    so.element.appendChild(panel);
+    before?.(panel);
+    const disposeHelp = helpPopovers(panel);
+    const handle = M.applyBindings(model, panel, {methods});
+    onceClosed(so, () => { cleanup(); handle.dispose(); disposeHelp(); });
+    const close = so.close.bind(so);
+    let closed = false;
+    let asking = false;
+    so.close = async (force) => {
+        if (!closed && force !== true && dirty?.()) {
+            if (asking) return undefined;
+            asking = true;
+            const ok = await E.confirm('Discard your changes?');
+            asking = false;
+            if (!ok) return undefined;
+        }
+        closed = true;
+        return close();
+    };
+    panel.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && (e.key === 'Enter' || e.key === 's') && methods.save) { e.preventDefault(); methods.save(); }
+    });
+    I.scan(panel);
+    so.open();
+    return {so, panel, close: (force) => so.close(force)};
+}
+
+/**
+ * Rows: click (or Enter) = the main action; right-click, ⋮ or Shift+F10 = the
+ * menu. `scope` receives the teardown.
+ */
+export function wireRows(list, {items, main, openMenuAt, scope, match = '.shp-row'}) {
+    const menu = E.contextMenu(list, {cursor: 'glyph', match, inherit: false, density: 'compact',
+        items: (row) => items(row.dataset.id)});
+    const onClick = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.target.closest('[data-stop]')) return;
+        const kebab = e.target.closest('.shp-kebab');
+        if (kebab) { openMenuAt(kebab); return; }
+        main(row.dataset.id);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+        else if (e.key === 'Enter' && e.target === row) main(row.dataset.id);
+        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target === row) {
+            e.preventDefault();
+            const rows = [...list.querySelectorAll(match)].filter(r => r.offsetParent);
+            rows[rows.indexOf(row) + (e.key === 'ArrowDown' ? 1 : -1)]?.focus();
+        }
+    };
+    list.addEventListener('click', onClick);
+    list.addEventListener('keydown', onKey);
+    scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); menu?.destroy?.(); });
+}
+
+/** Copy text, and say so. */
+export function copy(text, what = 'Copied') {
+    navigator.clipboard?.writeText(text).then(() => E.toast(`${what}.`, {type: 'success'}), () => E.toast(text));
+}

package/plugins/shopping-cart/admin/templates/shop.html

@@ -0,0 +1 @@
+<div class="shp" data-shop-admin></div>

package/plugins/shopping-cart/admin/views/orders.js

@@ -0,0 +1,365 @@
+/**
+ * Shop › Orders.
+ *
+ * Chips by status (with counts), search over number, name, email and items,
+ * rows with a right-click / ⋮ / Shift+F10 menu of the moves the order can make
+ * (the same NEXT table the server enforces). Click opens the order in a
+ * slideover: the items and totals, the shopper, delivery and tracking, a note
+ * for staff, its history, and the actions - fulfil, refund, cancel, a packing
+ * slip. A notification's link (#/plugins/shopping-cart/orders/<id>) opens one.
+ */
+
+import {api, copy, entriesOf, esc, money, openPanel, refreshBadge, store, when, wireRows} from '../lib/kit.js';
+import {NEXT, STATUS_LABEL, STATUS_TONE, addressLines, orderLabel} from '/plugins/shopping-cart/public/lib/orders.js';
+
+const FILTERS = [
+    {key: 'open', label: 'To do', match: (s) => s === 'paid' || s === 'awaiting'},
+    {key: 'paid', label: 'To fulfil', match: (s) => s === 'paid'},
+    {key: 'awaiting', label: 'Awaiting payment', match: (s) => s === 'awaiting'},
+    {key: 'fulfilled', label: 'Fulfilled', match: (s) => s === 'fulfilled'},
+    {key: 'pending', label: 'Started', match: (s) => s === 'pending'},
+    {key: 'closed', label: 'Cancelled & refunded', match: (s) => s === 'cancelled' || s === 'refunded'},
+    {key: 'all', label: 'All', match: (s) => s !== 'pending'}
+];
+
+const ROW = `
+<div class="shp-row" data-id="{{id}}" tabindex="0">
+  <span class="shp-num" data-bind-text="num"></span>
+  <span class="shp-main"><strong data-bind-text="who"></strong><small data-bind-text="meta"></small></span>
+  <span class="shp-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+  <span class="shp-amt" data-bind-text="amount"></span>
+  <button type="button" class="shp-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+const PROVIDER = {stripe: 'Stripe', paypal: 'PayPal', offline: 'Offline', free: 'No payment'};
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, settings} = ctx;
+    const orders = M.observable([]);
+    const loading = M.observable(true);
+    const error = M.observable('');
+    const filter = M.observable(store.get('shopping-cart.orders-filter') || 'open');
+    const query = M.observable('');
+    scope(M.effect(() => store.set('shopping-cart.orders-filter', filter.value)));
+
+    const counts = M.computed(() => {
+        const out = {};
+        for (const f of FILTERS) out[f.key] = orders.value.filter(o => f.match(o.data?.status)).length;
+        return out;
+    });
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        const f = FILTERS.find(x => x.key === filter.value) || FILTERS[0];
+        const q = query.value.trim().toLowerCase();
+        rows.value = orders.value
+            .filter(o => f.match(o.data?.status))
+            .filter(o => !q || [o.data.number, o.data.customer?.name, o.data.email, ...(o.data.lines || []).map(l => l.name)]
+                .join(' ').toLowerCase().includes(q.replace(/^#/, '')))
+            .map(o => {
+                const items = (o.data.lines || []).reduce((s, l) => s + l.qty, 0);
+                return {
+                    id: o.id,
+                    num: orderLabel(o.data),
+                    who: o.data.customer?.name || o.data.email || 'Shopper',
+                    meta: `${when(o.meta?.createdAt)} · ${items} item${items === 1 ? '' : 's'} · ${PROVIDER[o.data.provider] || o.data.provider}${o.data.delivery === 'collect' ? ' · collecting' : ''}`,
+                    statusLabel: STATUS_LABEL[o.data.status] || o.data.status,
+                    tone: `is-${STATUS_TONE[o.data.status] || 'muted'}`,
+                    amount: money(o.data.total)
+                };
+            });
+    }));
+    const emptyText = M.computed(() => (orders.value.length
+        ? (query.value ? 'No orders match.' : 'Nothing here.')
+        : 'No orders yet. They appear here the moment a shopper checks out.'));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'shp-card shp-orders';
+    view.innerHTML = `
+<div class="shp-bar">
+  <div class="shp-seg" role="group" aria-label="Show">
+    ${FILTERS.map(f => `<button type="button" data-filter="${f.key}" data-bind-class="filter.value === '${f.key}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value.${f.key}"></b></button>`).join('')}
+  </div>
+  <input type="search" class="form-input shp-search" placeholder="Search # , name, email, item…" aria-label="Search orders" data-model="query.value">
+  <span data-help-title="Orders" data-help="Click an order to open it. Right-click (or ⋮, or Shift+F10) for its moves: mark it paid, fulfilled, refunded or cancelled. 'Started' are checkouts that never finished paying - they hold no stock and can be deleted."></span>
+</div>
+<p class="shp-note" data-bind-hidden="!loading.value">Loading…</p>
+<p class="shp-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+<p class="shp-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
+<div class="shp-list" data-each="rows.value key=id"></div>`;
+    root.appendChild(view);
+    const list = view.querySelector('.shp-list');
+    list.innerHTML = ROW;
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    const bindings = M.applyBindings({orders, loading, error, filter, query, rows, counts, emptyText}, view);
+    scope(() => bindings.dispose());
+    view.querySelector('.shp-seg').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-filter]');
+        if (b) filter.value = b.dataset.filter;
+    });
+
+    async function load() {
+        try {
+            orders.value = entriesOf(await api.orders.list());
+            error.value = '';
+        } catch (err) {
+            error.value = `Could not load the orders: ${err.message || err}`;
+        } finally {
+            loading.value = false;
+        }
+    }
+    const byId = (id) => orders.peek().find(o => o.id === id);
+    const replace = (o) => { orders.value = orders.peek().map(x => (x.id === o.id ? o : x)); };
+
+    // ---- Moves ----------------------------------------------------------------
+
+    async function move(o, status, extra = {}) {
+        try {
+            const next = await api.orders.move(o.id, {status, ...extra});
+            replace(next);
+            refreshBadge();
+            E.toast(`${orderLabel(o.data)} is ${STATUS_LABEL[status].toLowerCase()}.`, {type: 'success'});
+            return next;
+        } catch (err) {
+            E.toast(`Not changed: ${err.message || err}`, {type: 'error'});
+            return null;
+        }
+    }
+
+    async function markPaid(o) {
+        if (!await E.confirm(`Mark ${orderLabel(o.data)} as paid (${esc(money(o.data.total))})? Stock is taken now.`)) return null;
+        return move(o, 'paid', {note: 'Payment received'});
+    }
+
+    async function cancel(o) {
+        if (!await E.confirm(`Cancel ${orderLabel(o.data)}? Nothing was paid, so nothing is refunded.`)) return null;
+        return move(o, 'cancelled');
+    }
+
+    /** Fulfil, with tracking if there is any - a small form of its own. */
+    function fulfil(o) {
+        return new Promise((resolve) => {
+            const t = o.data.tracking || {};
+            const f = {carrier: M.observable(t.carrier || ''), number: M.observable(t.number || ''), url: M.observable(t.url || '')};
+            let panel = null;
+            const collect = o.data.delivery === 'collect';
+            openPanel({
+                title: `Fulfil ${orderLabel(o.data)}`,
+                size: 'sm',
+                model: f,
+                html: `<div class="shp-form">
+  <p class="shp-note">${collect ? 'Mark it collected.' : o.data.requiresShipping ? 'Mark it sent. Add tracking if you have it - the shopper sees it on their receipt.' : 'Mark it delivered.'}</p>
+  ${collect || !o.data.requiresShipping ? '' : `<label class="form-label">Carrier</label><input class="form-input" data-model="carrier.value" placeholder="Royal Mail, DPD…" list="shp-carriers">
+  <datalist id="shp-carriers"><option>Royal Mail</option><option>Parcelforce</option><option>DPD</option><option>DHL</option><option>Evri</option><option>UPS</option><option>FedEx</option><option>Yodel</option></datalist>
+  <label class="form-label">Tracking number</label><input class="form-input" data-model="number.value">
+  <label class="form-label">Tracking link <span data-help="An https:// address where the parcel can be followed."></span></label><input class="form-input" type="url" data-model="url.value" placeholder="https://…">`}
+  <div class="shp-actions"><span class="shp-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="save"><span data-icon="check" data-icon-size="13"></span> ${collect ? 'Collected' : 'Fulfilled'}</button></div>
+</div>`,
+                cleanup: () => resolve(null),
+                methods: {
+                    cancel: () => panel?.close(true),
+                    async save() {
+                        const next = await move(o, 'fulfilled', {tracking: {carrier: f.carrier.peek(), number: f.number.peek(), url: f.url.peek()}});
+                        if (next) { resolve(next); panel?.close(true); }
+                    }
+                }
+            }).then(p => { panel = p; });
+        });
+    }
+
+    async function refund(o) {
+        const via = {stripe: 'through Stripe', paypal: 'through PayPal'}[o.data.provider];
+        const html = `<p>Refund ${esc(orderLabel(o.data))}, <strong>${esc(money(o.data.total))}</strong>, in full?</p>
+<p>${via && o.data.paymentRef ? `The money goes back ${via} straight away.` : 'This only marks it refunded - give the money back the way it came.'}</p>
+<label class="shp-check"><input type="checkbox" id="shp-restock" ${o.data.stockTaken ? 'checked' : 'disabled'}> Put the items back in stock</label>`;
+        let restock = Boolean(o.data.stockTaken);
+        const onChange = (e) => { if (e.target.id === 'shp-restock') restock = e.target.checked; };
+        document.addEventListener('change', onChange);
+        const ok = await E.confirm(html);
+        document.removeEventListener('change', onChange);
+        if (!ok) return null;
+        try {
+            const r = await api.orders.refund(o.id, {restock});
+            replace(r.order);
+            refreshBadge();
+            E.toast(`${orderLabel(o.data)} ${r.how}.`, {type: 'success'});
+            return r.order;
+        } catch (err) {
+            E.toast(err.message || String(err), {type: 'error'});
+            return null;
+        }
+    }
+
+    async function remove(o) {
+        if (!await E.confirm(`Delete ${orderLabel(o.data)}? It never took money; it cannot be brought back.`)) return false;
+        try {
+            await api.orders.remove(o.id);
+            orders.value = orders.peek().filter(x => x.id !== o.id);
+            E.toast(`${orderLabel(o.data)} deleted.`, {type: 'success'});
+            return true;
+        } catch (err) {
+            E.toast(err.message || String(err), {type: 'error'});
+            return false;
+        }
+    }
+
+    const receiptUrl = (o) => `${location.origin}${settings.shopPath}/order/${o.id}?t=${o.data.token}`;
+
+    /** A packing slip, printed from a window of its own. Everything escaped. */
+    function packingSlip(o) {
+        const d = o.data;
+        const w = window.open('', '_blank', 'width=720,height=900');
+        if (!w) { E.toast('Allow pop-ups to print the slip.', {type: 'warning'}); return; }
+        const addr = addressLines(d.address).map(esc).join('<br>');
+        w.document.write(`<!doctype html><html><head><meta charset="utf-8"><title>Packing slip ${esc(orderLabel(d))}</title>
+<style>body{font:14px/1.5 system-ui,sans-serif;margin:2.5rem;color:#111}h1{font-size:1.5rem;margin:0}table{width:100%;border-collapse:collapse;margin:1.5rem 0}
+th,td{text-align:left;padding:.5rem;border-bottom:1px solid #ddd}td.q{width:4rem;text-align:center;font-weight:700}.box{display:flex;justify-content:space-between;gap:2rem}
+.muted{color:#666}.note{border:1px dashed #999;padding:.75rem;margin-top:1rem}</style></head><body>
+<div class="box"><div><h1>${esc(settings.shopTitle || 'Shop')}</h1><p class="muted">Packing slip · ${esc(orderLabel(d))} · ${esc(new Date(o.meta?.createdAt).toLocaleDateString())}</p></div>
+<div><strong>${esc(d.customer?.name || '')}</strong><br>${d.delivery === 'collect' ? 'Collecting in person' : addr}</div></div>
+<table><thead><tr><th>Qty</th><th>Item</th><th>SKU</th></tr></thead><tbody>
+${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l.variantName ? ` - ${esc(l.variantName)}` : ''}</td><td class="muted">${esc(l.sku || '')}</td></tr>`).join('')}
+</tbody></table>${d.note ? `<div class="note"><strong>Note from the shopper:</strong><br>${esc(d.note)}</div>` : ''}
+<p class="muted">Thank you for your order.</p><script>onload=()=>print()<\/script></body></html>`);
+        w.document.close();
+    }
+
+    // ---- The menu (one definition: right-click, ⋮, Shift+F10) --------------------
+
+    function actions(o) {
+        const s = o.data.status;
+        const can = (to) => (NEXT[s] || []).includes(to);
+        return [
+            ...(can('paid') && s !== 'fulfilled' ? [{label: 'Mark paid…', icon: 'check-circle', run: () => markPaid(o)}] : []),
+            ...(can('fulfilled') ? [{label: o.data.delivery === 'collect' ? 'Mark collected…' : 'Mark fulfilled…', icon: 'truck', run: () => fulfil(o)}] : []),
+            ...(s === 'fulfilled' ? [{label: 'Back to "to fulfil"', icon: 'rotate-ccw', run: () => move(o, 'paid', {note: 'Reopened'})}] : []),
+            ...(can('refunded') ? [{label: 'Refund…', icon: 'credit-card', danger: true, run: () => refund(o)}] : []),
+            ...(can('cancelled') ? [{label: 'Cancel order…', icon: 'x-circle', danger: true, run: () => cancel(o)}] : [])
+        ];
+    }
+
+    function items(id) {
+        const o = byId(id);
+        if (!o) return [];
+        const acts = actions(o);
+        return [
+            {header: `${orderLabel(o.data)} · ${o.data.customer?.name || o.data.email}`},
+            {label: 'Open', icon: 'eye', action: () => openOrder(id)},
+            ...(acts.length ? [{type: 'divider'}] : []),
+            ...acts.map(a => ({label: a.label, icon: a.icon, danger: a.danger, action: a.run})),
+            {type: 'divider'},
+            {label: 'Packing slip', icon: 'printer', action: () => packingSlip(o)},
+            {label: 'Copy receipt link', icon: 'link', action: () => copy(receiptUrl(o), 'Receipt link copied')},
+            {label: 'Email the shopper', icon: 'mail', action: () => { location.href = `mailto:${encodeURIComponent(o.data.email)}?subject=${encodeURIComponent(`Your order ${orderLabel(o.data)}`)}`; }},
+            ...(['pending', 'cancelled', 'awaiting'].includes(o.data.status) ? [{type: 'divider'}, {label: 'Delete…', icon: 'trash', danger: true, action: () => remove(o)}] : [])
+        ];
+    }
+
+    // ---- One order ----------------------------------------------------------------
+
+    const panels = new Set();
+    async function openOrder(id) {
+        let o = byId(id);
+        if (!o) {
+            try { o = await api.orders.get(id); } catch { E.toast('That order is gone.', {type: 'warning'}); return; }
+        }
+        const d = o.data;
+        const staffNote = M.observable(d.staffNote || '');
+        const status = M.observable(d.status);
+        let panel = null;
+        const ext = Object.entries(d.ext || {}).flatMap(([owner, facts]) => Object.entries(facts || {}).map(([k, v]) => ({owner, k, v})))
+            .filter(x => ['string', 'number', 'boolean'].includes(typeof x.v));
+        const addr = addressLines(d.address);
+        const html = `<div class="shp-order">
+  <div class="shp-order-head">
+    <span class="shp-chip is-${STATUS_TONE[d.status]}" data-part="status">${esc(STATUS_LABEL[d.status])}</span>
+    <span class="shp-muted">${esc(new Date(o.meta?.createdAt).toLocaleString())} · ${esc(PROVIDER[d.provider] || d.provider)}</span>
+    <span class="shp-spacer"></span>
+    <div class="shp-order-acts" data-part="acts"></div>
+    <button type="button" class="shp-kebab" data-part="more" aria-label="More">⋮</button>
+  </div>
+  <table class="shp-lines">
+    ${(d.lines || []).map(l => `<tr><td class="shp-lines-img">${l.image ? `<img src="${esc(l.image)}" alt="">` : ''}</td>
+      <td><strong>${esc(l.name)}</strong>${l.variantName ? `<small>${esc(l.optionName || 'Option')}: ${esc(l.variantName)}</small>` : ''}${l.sku ? `<small>SKU ${esc(l.sku)}</small>` : ''}</td>
+      <td class="shp-num">${l.qty} × ${esc(money(l.unitPrice))}</td><td class="shp-amt">${esc(money(l.lineTotal))}</td></tr>`).join('')}
+  </table>
+  <dl class="shp-totals">
+    <div><dt>Subtotal</dt><dd>${esc(money(d.subtotal))}</dd></div>
+    ${(d.adjustments || []).map(a => `<div class="${a.included ? 'is-included' : ''}"><dt>${esc(a.label)}${a.code ? ` <code>${esc(a.code)}</code>` : ''}</dt><dd>${esc(money(a.amount))}</dd></div>`).join('')}
+    <div class="is-total"><dt>Total</dt><dd>${esc(money(d.total))}</dd></div>
+  </dl>
+  <div class="shp-order-cols">
+    <section><h4>Shopper</h4><p><strong>${esc(d.customer?.name || '')}</strong><br><a href="mailto:${esc(d.email)}">${esc(d.email)}</a>${d.customer?.phone ? `<br><a href="tel:${esc(d.customer.phone)}">${esc(d.customer.phone)}</a>` : ''}</p></section>
+    <section><h4>${d.delivery === 'collect' ? 'Collecting' : d.requiresShipping ? 'Deliver to' : 'Delivery'}</h4>
+      <p>${d.delivery === 'collect' ? esc(settings.collectionLabel || 'In person') : addr.length ? addr.map(esc).join('<br>') : 'Nothing to ship.'}</p>
+      ${d.tracking ? `<p class="shp-muted">${esc([d.tracking.carrier, d.tracking.number].filter(Boolean).join(' · '))}${d.tracking.url ? ` · <a href="${esc(d.tracking.url)}" target="_blank" rel="noopener">track</a>` : ''}</p>` : ''}</section>
+  </div>
+  ${d.note ? `<div class="shp-callout"><strong>Note from the shopper</strong><p></p></div>` : ''}
+  <label class="form-label">Staff note <span data-help="Only you see this. Saved when you click away."></span></label>
+  <textarea class="form-input" rows="2" data-model="staffNote.value" data-part="staff" placeholder="Wrapped as a gift, sent second class…"></textarea>
+  ${d.paymentRef || d.providerRef ? `<p class="shp-muted shp-ref">Payment reference: <code>${esc(d.paymentRef || d.providerRef)}</code></p>` : ''}
+  ${ext.length ? `<div class="shp-ext">${ext.map(x => `<span class="shp-chip is-muted">${esc(x.k)}: ${esc(String(x.v))}</span>`).join('')}</div>` : ''}
+  <h4>History</h4>
+  <ol class="shp-history">${(d.history || []).slice().reverse().map(h => `<li><span class="shp-chip is-${STATUS_TONE[h.status] || 'muted'}">${esc(STATUS_LABEL[h.status] || h.status)}</span>
+    <span>${esc(new Date(h.at).toLocaleString())} · ${esc(h.by || '')}${h.note ? ` - ${esc(h.note)}` : ''}</span></li>`).join('')}</ol>
+</div>`;
+        panel = await openPanel({
+            title: `Order ${orderLabel(d)}`,
+            size: 'lg',
+            model: {staffNote, status},
+            html,
+            before: (el) => { const n = el.querySelector('.shp-callout p'); if (n) n.textContent = d.note; },
+            cleanup: () => panels.delete(panel?.so)
+        });
+        panels.add(panel.so);
+        const el = panel.panel;
+
+        // Main actions as buttons, the rest in ⋮.
+        const renderActs = (cur) => {
+            const box = el.querySelector('[data-part="acts"]');
+            box.innerHTML = '';
+            for (const a of actions(cur).slice(0, 2)) {
+                const b = document.createElement('button');
+                b.type = 'button';
+                b.className = `btn btn-sm ${a.danger ? 'btn-outline' : 'btn-primary'}`;
+                b.innerHTML = `<span data-icon="${a.icon}" data-icon-size="13"></span> `;
+                b.appendChild(document.createTextNode(a.label.replace('…', '')));
+                b.addEventListener('click', async () => {
+                    const next = await a.run();
+                    if (next && typeof next === 'object') { panel.close(true); openOrder(next.id); }
+                });
+                box.appendChild(b);
+            }
+            I.scan(box);
+        };
+        renderActs(o);
+        const more = el.querySelector('[data-part="more"]');
+        const menu = E.contextMenu(more, {items: () => items(o.id).filter(x => x.label !== 'Open'), inherit: false, density: 'compact'});
+        more.addEventListener('click', () => kit.openMenuAt(more));
+        panel.so.element.addEventListener('remove', () => menu?.destroy?.());
+
+        const staff = el.querySelector('[data-part="staff"]');
+        staff.addEventListener('blur', async () => {
+            if (staffNote.peek() === (byId(o.id)?.data.staffNote || '')) return;
+            try {
+                replace(await api.orders.note(o.id, {staffNote: staffNote.peek()}));
+                E.toast('Note saved.', {type: 'success'});
+            } catch (err) {
+                E.toast(`Note not saved: ${err.message || err}`, {type: 'error'});
+            }
+        });
+    }
+
+    wireRows(list, {openMenuAt: kit.openMenuAt, scope, items, main: openOrder});
+    scope(() => [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } }));
+
+    await load();
+    if (!here()) return;
+    I.scan(view);
+    if (ctx.id) {
+        if (byId(ctx.id) && !FILTERS.find(f => f.key === filter.peek()).match(byId(ctx.id).data.status)) filter.value = 'all';
+        openOrder(ctx.id);
+    }
+}