domma-cms 0.84.1 → 0.86.0

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);
+    }
+}

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

@@ -0,0 +1,214 @@
+/**
+ * Shop › Overview - how the shop is doing, and what needs you.
+ *
+ * Stat tiles (today, 30 days against the 30 before, average order, to fulfil),
+ * thirty days of takings as bars with a tooltip each, the best sellers, stock
+ * running low, and the latest orders. A shop with nothing yet gets the three
+ * steps to its first sale instead.
+ */
+
+import {api, esc, money, when} from '../lib/kit.js';
+import {STATUS_LABEL, STATUS_TONE} from '/plugins/shopping-cart/public/lib/orders.js';
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, go} = ctx;
+    const s = M.observable(null);
+    const error = M.observable('');
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'shp-overview';
+    view.innerHTML = `
+<p class="shp-error" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+<div class="shp-loading" data-bind-hidden="s.value || error.value">Loading…</div>
+<div data-part="start" hidden></div>
+<div data-part="main" hidden>
+  <div class="shp-tiles" data-part="tiles"></div>
+  <div class="shp-grid2">
+    <section class="shp-card shp-chart-card">
+      <header><h3>Takings, last 30 days <span data-help="Orders paid or fulfilled, by the day they were paid. Refunded and cancelled orders are left out."></span></h3>
+        <span class="shp-muted" data-part="chart-total"></span></header>
+      <div class="shp-chart" data-part="chart"></div>
+    </section>
+    <section class="shp-card">
+      <header><h3>Needs you</h3></header>
+      <ul class="shp-todo" data-part="todo"></ul>
+    </section>
+  </div>
+  <div class="shp-grid2">
+    <section class="shp-card">
+      <header><h3>Latest orders</h3><a href="#/plugins/shopping-cart/orders" class="shp-more">All orders</a></header>
+      <div class="shp-mini-list" data-part="recent"></div>
+    </section>
+    <section class="shp-card">
+      <header><h3>Best sellers <span data-help="By takings over the last 30 days."></span></h3><a href="#/plugins/shopping-cart/products" class="shp-more">Products</a></header>
+      <div class="shp-mini-list" data-part="top"></div>
+    </section>
+  </div>
+</div>`;
+    root.appendChild(view);
+    const part = (k) => view.querySelector(`[data-part="${k}"]`);
+    scope(kit.helpPopovers(view));
+    const bindings = M.applyBindings({s, error}, view);
+    scope(() => bindings.dispose());
+
+    try {
+        s.value = await api.summary();
+    } catch (err) {
+        error.value = `Could not load the figures: ${err.message || err}`;
+        return;
+    }
+    if (!here()) return;
+    const d = s.peek();
+
+    // Nothing sold and nothing to sell: show the way in.
+    if (!d.products.total && !d.allTime.orders) {
+        const start = part('start');
+        start.hidden = false;
+        const pay = d.methods.filter(m => m !== 'offline').length;
+        start.innerHTML = `<div class="shp-welcome">
+  <span class="shp-welcome-icon" data-icon="shopping-bag" data-icon-size="30"></span>
+  <h2>Open your shop</h2>
+  <p>Three steps to your first sale. Your shop lives at <a href="${esc(d.shopPath)}" target="_blank" rel="noopener">${esc(d.shopPath)}</a>.</p>
+  <ol class="shp-steps">
+    <li class="${d.products.total ? 'is-done' : ''}"><strong>Add a product</strong><span>Name, price, a picture or two.</span><span class="shp-step-btns"><button type="button" class="btn btn-sm btn-primary" data-go="product">Add a product</button><button type="button" class="btn btn-sm btn-ghost" data-go="samples" title="Six products with pictures, options and stock - edit or delete them later">or try samples</button></span></li>
+    <li class="${pay ? 'is-done' : ''}"><strong>Choose how you get paid</strong><span>Stripe for cards, Apple Pay and Google Pay; PayPal; or payment offline.</span><button type="button" class="btn btn-sm btn-outline" data-go="pay">Payment settings</button></li>
+    <li><strong>Put it on a page</strong><span>Link to ${esc(d.shopPath)} from your menu, or drop <code>[shop-products /]</code> into any page.</span><button type="button" class="btn btn-sm btn-outline" data-go="visit">See the shop</button></li>
+  </ol>
+</div>`;
+        start.addEventListener('click', (e) => {
+            const b = e.target.closest('[data-go]');
+            if (!b) return;
+            if (b.dataset.go === 'product') go('products', 'new');
+            if (b.dataset.go === 'pay') ctx.openSettings('payment');
+            if (b.dataset.go === 'visit') window.open(d.shopPath, '_blank', 'noopener');
+            if (b.dataset.go === 'samples') {
+                b.disabled = true;
+                api.products.samples().then(() => { E.toast('Six sample products are on sale - try the shop.', {type: 'success'}); go('products'); },
+                    (err) => { b.disabled = false; E.toast(err.message || String(err), {type: 'error'}); });
+            }
+        });
+        I.scan(start);
+        return;
+    }
+
+    part('main').hidden = false;
+
+    // ---- Tiles ----
+    const change = d.days30.change;
+    const tiles = [
+        {label: 'Today', value: money(d.today.revenue), sub: `${d.today.orders} order${d.today.orders === 1 ? '' : 's'}`, icon: 'sun'},
+        {label: 'Last 30 days', value: money(d.days30.revenue),
+            sub: change === null ? `${d.days30.orders} orders` : `${change >= 0 ? '▲' : '▼'} ${Math.abs(change)}% on the 30 before`,
+            tone: change === null ? '' : change >= 0 ? 'up' : 'down', icon: 'trending-up'},
+        {label: 'Average order', value: money(d.days30.average), sub: 'last 30 days', icon: 'receipt'},
+        {label: 'To fulfil', value: String(d.toFulfil), sub: d.awaiting ? `${d.awaiting} awaiting payment` : 'paid, not yet sent',
+            icon: 'truck', link: 'orders', tone: d.toFulfil ? 'attention' : ''}
+    ];
+    part('tiles').innerHTML = tiles.map(t => `
+<${t.link ? 'a href="#/plugins/shopping-cart/orders"' : 'div'} class="shp-tile${t.tone ? ` is-${t.tone}` : ''}">
+  <span class="shp-tile-icon" data-icon="${t.icon}" data-icon-size="18"></span>
+  <span class="shp-tile-label">${esc(t.label)}</span>
+  <strong class="shp-tile-value">${esc(t.value)}</strong>
+  <span class="shp-tile-sub">${esc(t.sub)}</span>
+</${t.link ? 'a' : 'div'}>`).join('');
+
+    // ---- Chart: one series, bars, a tooltip on each ----
+    drawChart(part('chart'), d.series, scope);
+    part('chart-total').textContent = `${money(d.days30.revenue)} · ${d.days30.orders} orders`;
+
+    // ---- Needs you ----
+    const todo = [];
+    if (d.toFulfil) todo.push({icon: 'truck', text: `${d.toFulfil} paid order${d.toFulfil === 1 ? '' : 's'} to send`, go: 'orders'});
+    if (d.awaiting) todo.push({icon: 'clock', text: `${d.awaiting} awaiting payment`, go: 'orders'});
+    for (const p of d.lowStock.slice(0, 5)) {
+        todo.push({icon: 'alert-triangle', text: p.stock === 0 ? `${p.name} is sold out` : p.variants.length ? `${p.name} - ${p.variants.join(', ')}` : `${p.name}: ${p.stock} left`, go: 'products', id: p.id, tone: p.stock === 0 ? 'danger' : 'warning'});
+    }
+    if (d.abandoned) todo.push({icon: 'inbox', text: `${d.abandoned} checkout${d.abandoned === 1 ? '' : 's'} started this week and not paid`, go: 'orders',
+        help: 'Shoppers who went to pay and did not finish. Shopping Cart Pro can email them a reminder.'});
+    if (!d.methods.some(m => m !== 'offline')) todo.push({icon: 'credit-card', text: 'Take card payments - set up Stripe or PayPal', settings: 'payment'});
+    part('todo').innerHTML = todo.length
+        ? todo.map((t, i) => `<li><button type="button" class="shp-todo-item${t.tone ? ` is-${t.tone}` : ''}" data-i="${i}"><span data-icon="${t.icon}" data-icon-size="15"></span><span>${esc(t.text)}</span><span class="shp-todo-go" data-icon="chevron-right" data-icon-size="14"></span></button></li>`).join('')
+        : '<li class="shp-all-clear"><span data-icon="check-circle" data-icon-size="18"></span> All clear - nothing waiting.</li>';
+    part('todo').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-i]');
+        if (!b) return;
+        const t = todo[Number(b.dataset.i)];
+        if (t.settings) ctx.openSettings(t.settings);
+        else go(t.go, t.id || '');
+    });
+
+    // ---- Latest orders, best sellers ----
+    part('recent').innerHTML = d.recent.length ? d.recent.map(o => `
+<a class="shp-mini" href="#/plugins/shopping-cart/orders/${esc(o.id)}">
+  <span class="shp-mini-main"><span><strong>#${esc(o.number)}</strong> ${esc(o.name || '')}</span><small>${esc(when(o.at))} · ${o.items} item${o.items === 1 ? '' : 's'}</small></span>
+  <span class="shp-chip is-${STATUS_TONE[o.status]}">${esc(STATUS_LABEL[o.status])}</span>
+  <span class="shp-mini-amt">${esc(money(o.total))}</span>
+</a>`).join('') : '<p class="shp-muted">No orders yet.</p>';
+
+    const maxRev = Math.max(1, ...d.topProducts.map(p => p.revenue));
+    part('top').innerHTML = d.topProducts.length ? d.topProducts.map(p => `
+<div class="shp-top">
+  <span class="shp-top-name">${esc(p.name)}<small>${p.qty} sold</small></span>
+  <span class="shp-top-bar"><span style="width:${Math.round(p.revenue / maxRev * 100)}%"></span></span>
+  <span class="shp-mini-amt">${esc(money(p.revenue))}</span>
+</div>`).join('') : '<p class="shp-muted">Nothing sold in the last 30 days.</p>';
+
+    I.scan(view);
+}
+
+/** Thirty bars, 2px apart, rounded tops on the baseline; hover (or focus) says the day and the takings. */
+function drawChart(el, series, scope) {
+    const W = Math.max(360, Math.round(el.clientWidth) || 600), H = 170, padL = 44, padB = 22, padT = 8;
+    const max = Math.max(...series.map(d => d.revenue));
+    const top = niceMax(max);
+    const n = series.length;
+    const slot = (W - padL) / n;
+    const bw = Math.max(2, slot - 2);
+    const y = (v) => padT + (H - padT - padB) * (1 - v / top);
+    const ticks = [0, top / 2, top];
+    const day = (k) => new Date(`${k}T12:00:00`).toLocaleDateString(undefined, {day: 'numeric', month: 'short'});
+    const bars = series.map((d, i) => {
+        const x = padL + i * slot + 1;
+        const h = Math.max(0, H - padB - y(d.revenue));
+        const r = Math.min(4, bw / 2, h);
+        const path = h > 0
+            ? `M${x},${H - padB} v${-(h - r)} q0,${-r} ${r},${-r} h${bw - 2 * r} q${r},0 ${r},${r} v${h - r} z`
+            : '';
+        return `<g class="shp-bar" data-i="${i}" tabindex="0" aria-label="${esc(day(d.day))}: ${esc(money(d.revenue))}, ${d.orders} orders">
+  <rect x="${padL + i * slot}" y="${padT}" width="${slot}" height="${H - padT - padB}" fill="transparent"/>
+  ${path ? `<path d="${path}"/>` : `<rect class="shp-bar-zero" x="${x}" y="${H - padB - 1}" width="${bw}" height="1"/>`}
+</g>`;
+    }).join('');
+    const labels = [0, Math.floor(n / 2), n - 1].map(i => `<text x="${padL + i * slot + slot / 2}" y="${H - 6}" text-anchor="middle">${esc(day(series[i].day))}</text>`).join('');
+    el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="Takings for each of the last 30 days">
+  ${ticks.map(t => `<line class="shp-gridline" x1="${padL}" x2="${W}" y1="${y(t)}" y2="${y(t)}"/><text class="shp-axis" x="${padL - 6}" y="${y(t) + 4}" text-anchor="end">${esc(money(t, {compact: true}))}</text>`).join('')}
+  ${bars}
+  <g class="shp-axis">${labels}</g>
+</svg><div class="shp-tip" hidden></div>`;
+    const tip = el.querySelector('.shp-tip');
+    const show = (g) => {
+        const d = series[Number(g.dataset.i)];
+        tip.innerHTML = `<strong>${esc(money(d.revenue))}</strong><span>${esc(day(d.day))} · ${d.orders} order${d.orders === 1 ? '' : 's'}</span>`;
+        tip.hidden = false;
+        const r = g.getBoundingClientRect(), box = el.getBoundingClientRect();
+        tip.style.left = `${Math.min(box.width - 120, Math.max(0, r.left - box.left + r.width / 2 - 60))}px`;
+        el.querySelectorAll('.shp-bar.is-on').forEach(b => b.classList.remove('is-on'));
+        g.classList.add('is-on');
+    };
+    const hide = () => { tip.hidden = true; el.querySelectorAll('.shp-bar.is-on').forEach(b => b.classList.remove('is-on')); };
+    const over = (e) => { const g = e.target.closest('.shp-bar'); if (g) show(g); };
+    el.addEventListener('mouseover', over);
+    el.addEventListener('focusin', over);
+    el.addEventListener('mouseleave', hide);
+    el.addEventListener('focusout', hide);
+    scope(() => { el.removeEventListener('mouseover', over); el.removeEventListener('focusin', over); });
+}
+
+/** A round top for the axis: 1, 2 or 5 × a power of ten, in minor units. */
+function niceMax(v) {
+    if (v <= 0) return 1000;
+    const p = 10 ** Math.floor(Math.log10(v));
+    for (const m of [1, 2, 5, 10]) if (m * p >= v) return m * p;
+    return 10 * p;
+}