domma-cms 0.84.0 → 0.85.0

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