domma-cms 0.102.1 → 0.104.0

package/plugins/booking/admin/lib/kit.js

@@ -0,0 +1,249 @@
+/**
+ * Booking 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, slideover forms, rows with a right-click / ⋮ /
+ * Shift+F10 menu, and the words and colours for statuses.
+ *
+ * @module booking/admin/lib/kit
+ */
+
+import {fmtDate, fmtDateTime} from '/plugins/_lib/admin/ui/dates.js';
+
+export {fmtDate, fmtDateTime};
+
+export const SIDEBAR_URL = '#/plugins/booking';
+export const BASE = '/api/plugins/booking';
+export const V = '1.4.0';
+
+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;
+}
+
+/**
+ * Booking's API, through the admin's apiRequest (imported at run time): it
+ * attaches the token, refreshes it on a 401, and - unlike H - keeps the
+ * status and the whole answer on an error (`err.status`, `err.body.errors`),
+ * which a clash (409) and per-field messages need. H is the stand-in.
+ */
+let requester = null;
+export function request(method, path, body) {
+    requester ??= import('/admin/js/api.js').then(m => m.apiRequest).catch(() => null);
+    return requester.then(fn => {
+        if (fn) return fn(path, {method, ...(body !== undefined ? {body: JSON.stringify(body)} : {})});
+        const url = `/api${path}`;
+        return method === 'GET' ? H.get(url) : method === 'DELETE' ? H.delete(url) : H[method.toLowerCase()](url, body);
+    });
+}
+const P = '/plugins/booking';
+const seg = (id) => encodeURIComponent(String(id));
+const qs = (o) => Object.entries(o).filter(([, v]) => v !== undefined && v !== null && v !== '').map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&');
+export const api = {
+    bootstrap: () => request('GET', `${P}/bootstrap`),
+    bookings: {
+        list: (q = {}) => request('GET', `${P}/bookings?${qs(q)}`),
+        get: (id) => request('GET', `${P}/bookings/${seg(id)}`),
+        create: (d) => request('POST', `${P}/bookings`, d),
+        update: (id, d) => request('PUT', `${P}/bookings/${seg(id)}`, d),
+        move: (id, d) => request('PUT', `${P}/bookings/${seg(id)}/move`, d),
+        remove: (id) => request('DELETE', `${P}/bookings/${seg(id)}`)
+    },
+    slots: (q) => request('GET', `${P}/slots?${qs(q)}`),
+    services: {
+        list: () => request('GET', `${P}/services`),
+        create: (d) => request('POST', `${P}/services`, d),
+        update: (id, d) => request('PUT', `${P}/services/${seg(id)}`, d),
+        remove: (id) => request('DELETE', `${P}/services/${seg(id)}`)
+    },
+    bookables: {
+        list: () => request('GET', `${P}/bookables`),
+        create: (d) => request('POST', `${P}/bookables`, d),
+        update: (id, d) => request('PUT', `${P}/bookables/${seg(id)}`, d),
+        remove: (id) => request('DELETE', `${P}/bookables/${seg(id)}`)
+    },
+    settings: {
+        get: () => request('GET', `${P}/settings`),
+        save: (d) => request('PUT', `${P}/settings`, d)
+    },
+    contact: (id) => request('GET', `${P}/contact/${seg(id)}`),
+    contactByEmail: (email) => request('GET', `${P}/contact?email=${encodeURIComponent(email)}`)
+};
+
+/**
+ * A failed request, for a person to read. H throws with the server's message
+ * but not always its status, so a clash is recognised by status OR wording.
+ */
+export const errText = (err) => err?.message || String(err);
+export const isClash = (err) => err?.status === 409 && (err?.body?.code === 'slot-taken' || /clash|taken|no longer free/i.test(errText(err)));
+
+/** 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 Booking's badge. */
+export function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+
+// ---- Words and colours ----------------------------------------------------------
+
+export const STATUS_LABEL = {pending: 'Pending', confirmed: 'Booked', completed: 'Done', 'no-show': 'No-show', cancelled: 'Cancelled'};
+export const STATUS_TONE = {pending: 'warning', confirmed: 'primary', completed: 'success', 'no-show': 'danger', cancelled: 'muted'};
+export const COLOUR_LABEL = {blue: 'Blue', green: 'Green', teal: 'Teal', purple: 'Purple', pink: 'Pink', orange: 'Orange', red: 'Red', grey: 'Grey'};
+export const KIND_LABEL = {person: 'Person', resource: 'Room or thing'};
+
+/** "1 h 30 min", "45 min". */
+export function minutesLabel(n) {
+    const m = Math.round(Number(n) || 0);
+    if (m < 60) return `${m} min`;
+    const h = Math.floor(m / 60);
+    return m % 60 ? `${h} h ${m % 60} min` : `${h} h`;
+}
+
+/** "Tue 15/07/2031" from a 'YYYY-MM-DD'. */
+export function dateLabel(date) {
+    const [y, m, d] = String(date).split('-');
+    const wd = new Date(Date.UTC(Number(y), Number(m) - 1, Number(d))).getUTCDay();
+    return `${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][wd]} ${d}/${m}/${y}`;
+}
+
+/** "3 min ago", "26/09/2026". */
+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 fmtDate(t);
+}
+
+// ---- 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, after}) {
+    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});
+    after?.(panel);
+    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(); e.stopPropagation(); 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 = '.bk-row'}) {
+    const menu = E.contextMenu(list, {cursor: 'glyph', match, inherit: false, density: 'compact',
+        items: (row) => items(row.dataset.id, row)});
+    const onClick = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.target.closest('[data-stop]')) return;
+        const kebab = e.target.closest('.bk-kebab');
+        if (kebab) { e.stopPropagation(); openMenuAt(row); return; }
+        main(row.dataset.id, row);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if ((e.key === 'F10' && e.shiftKey) || e.key === 'ContextMenu') { e.preventDefault(); openMenuAt(row); }
+        else if ((e.key === 'Enter' || e.key === ' ') && e.target === row) { e.preventDefault(); main(row.dataset.id, row); }
+        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));
+}
+
+/** Checkboxes are set after render and listened to (data-model on a checkbox is unreliable). */
+export function wireChecks(el, obs) {
+    for (const box of el.querySelectorAll('[data-bool]')) {
+        const o = obs[box.dataset.bool];
+        if (!o) continue;
+        box.checked = Boolean(o.peek());
+        box.addEventListener('change', () => { o.value = box.checked; });
+    }
+}
+
+/** Show the server's per-field errors beside their inputs ([data-err="field"]). */
+export function showErrors(el, errors = {}) {
+    for (const box of el.querySelectorAll('[data-err]')) {
+        const msg = errors[box.dataset.err] || '';
+        box.textContent = msg;
+        box.hidden = !msg;
+    }
+}
+
+/** H's error, with the server's `errors` map when it carried one. */
+export function errorsOf(err) {
+    return err?.body?.errors || {};
+}

package/plugins/booking/admin/templates/booking.html

@@ -0,0 +1 @@
+<div class="bk" data-booking-admin></div>

package/plugins/booking/admin/views/booking.js

@@ -0,0 +1,207 @@
+/**
+ * Booking - one Tool, one sidebar entry, its screens as tabs under the
+ * banner: Diary, Bookings, Services, People & rooms, and any an extension
+ * (Booking Pro) adds.
+ *
+ *   #/plugins/booking                   Diary
+ *   #/plugins/booking/diary
+ *   #/plugins/booking/bookings[/<id>]   Bookings (an id opens that booking)
+ *   #/plugins/booking/services[/<id>|new]
+ *   #/plugins/booking/people[/<id>|new] People & rooms
+ *   #/plugins/booking/new?contact=<id>  the Diary with New booking open, filled from a contact
+ *   #/plugins/booking/new?email=&name=  ... or from an email's sender (Email's "Book Sam…")
+ *   #/plugins/booking/<ext-key>         an extension's screen
+ *   #/plugins/booking/<action-id>?contact=<id> | ?email=&name=
+ *                                       the Diary, then an extension's banner action run with that prefill
+ *                                       (Booking Pro's "Call now" from a contact's or an email's menu)
+ *
+ * Settings are behind the banner's cog, in a slideover.
+ */
+
+import {V, api, errText, loadKit, store} from '../lib/kit.js';
+import {sectionApi} from '../lib/extension-sections.js';
+
+const ROUTE = /^#\/plugins\/booking(\/|\?|$)/;
+const TABS = [
+    {key: 'diary', label: 'Diary', icon: 'calendar', module: `/plugins/booking/admin/views/diary.js?v=${V}`},
+    {key: 'bookings', label: 'Bookings', icon: 'list', module: `/plugins/booking/admin/views/bookings.js?v=${V}`},
+    {key: 'services', label: 'Services', icon: 'briefcase', module: `/plugins/booking/admin/views/services.js?v=${V}`},
+    {key: 'people', label: 'People & rooms', icon: 'users', module: `/plugins/booking/admin/views/people.js?v=${V}`}
+];
+
+let lifetime = null;
+
+/** tab, id and query from the address. `new` is the Diary with New booking open. */
+function where() {
+    const [path, query = ''] = location.hash.split('?');
+    const m = path.match(/^#\/plugins\/booking(?:\/([a-z0-9-]+))?(?:\/([^/?#]+))?/);
+    const q = Object.fromEntries(new URLSearchParams(query));
+    const tab = m?.[1] || 'diary';
+    return {tab, id: m?.[2] ? decodeURIComponent(m[2]) : '', query: q};
+}
+
+export const bookingView = {
+    templateUrl: '/plugins/booking/admin/templates/booking.html',
+
+    async onMount($container) {
+        const kit = await loadKit();
+        lifetime ??= kit.viewLifetime(ROUTE);
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        const scope = (fn) => { lifetime.add(fn); return fn; };
+        const container = $container.get(0);
+        const root = container.querySelector('[data-booking-admin]') || container;
+        let mountedFor = location.hash;
+        const here = () => location.hash === mountedFor && root.isConnected;
+        const {tab, id, query} = where();
+
+        let boot;
+        try {
+            boot = await api.bootstrap();
+        } catch (err) {
+            root.innerHTML = '';
+            const p = document.createElement('p');
+            p.className = 'bk-error';
+            p.textContent = `Booking could not load: ${errText(err)}`;
+            root.appendChild(p);
+            return;
+        }
+        if (!here()) return;
+
+        const tabs = [...TABS, ...(boot.tabs || [])];
+        const actions = (boot.actions || []).filter(a => a && typeof a.module === 'string' && a.module.startsWith(`/plugins/${a.owner}/`));
+        const wantNew = tab === 'new';
+        const wantAction = actions.find(a => a.id === tab) || null;
+        const current = tabs.find(t => t.key === (wantNew || wantAction ? 'diary' : tab)) || TABS[0];
+
+        // "Booking › Diary" in the banner.
+        const name = container.querySelector('.dm-plugin-banner-name');
+        if (name) {
+            name.textContent = '';
+            const a = document.createElement('span');
+            a.className = 'dm-plugin-banner-parent';
+            a.textContent = 'Booking';
+            const sep = document.createElement('span');
+            sep.className = 'dm-plugin-banner-sep';
+            sep.textContent = '›';
+            sep.setAttribute('aria-hidden', 'true');
+            name.append(a, sep, document.createTextNode(current.label));
+        }
+
+        root.innerHTML = '';
+        const nav = document.createElement('nav');
+        nav.className = 'bk-nav';
+        nav.setAttribute('aria-label', 'Booking');
+        for (const t of tabs) {
+            const a = document.createElement('a');
+            a.href = t.key === 'diary' ? '#/plugins/booking' : `#/plugins/booking/${t.key}`;
+            const icon = document.createElement('span');
+            icon.setAttribute('data-icon', t.icon || 'plug');
+            icon.setAttribute('data-icon-size', '15');
+            a.append(icon, document.createTextNode(t.label));
+            if (t.owner) a.classList.add('is-ext');
+            if (t === current) { a.classList.add('is-on'); a.setAttribute('aria-current', 'page'); }
+            nav.appendChild(a);
+        }
+        const body = document.createElement('div');
+        body.className = 'bk-body';
+        root.append(nav, body);
+        I.scan(nav);
+
+        const ctx = {
+            kit, scope, here, root: body, container, boot, settings: boot.settings, id, query,
+            /** Tidy the address (a deep link done with) without leaving the screen. */
+            replaceHash(h) { history.replaceState(null, '', h); mountedFor = location.hash; },
+            tz: boot.settings.timeZone,
+            go(t, i = '') { location.hash = `#/plugins/booking${t && t !== 'diary' ? `/${t}` : ''}${i ? `/${encodeURIComponent(i)}` : ''}`; },
+            /** Fresh services / people / settings, after an edit elsewhere. */
+            async refresh() {
+                const next = await api.bootstrap();
+                Object.assign(boot, next);
+                ctx.settings = boot.settings;
+                ctx.tz = boot.settings.timeZone;
+                return boot;
+            },
+            async openSettings(section) {
+                const m = await import(`/plugins/booking/admin/views/settings.js?v=${V}`);
+                return m.openSettings(ctx, section);
+            },
+            async openBooking(bookingId, opts) {
+                const m = await import(`/plugins/booking/admin/views/panels.js?v=${V}`);
+                return m.openBooking(ctx, bookingId, opts);
+            },
+            async newBooking(prefill, opts) {
+                const m = await import(`/plugins/booking/admin/views/panels.js?v=${V}`);
+                return m.newBooking(ctx, prefill, opts);
+            },
+            /** Screens set this to be told a booking changed (made, moved, cancelled). */
+            onBookingsChanged: () => {}
+        };
+
+        kit.addBannerAction($container, {id: 'booking-settings', icon: 'settings', title: 'Booking settings', onClick: () => ctx.openSettings()});
+        kit.addBannerAction($container, {id: 'booking-visit', icon: 'external-link', title: 'Open the booking page in a new tab',
+            onClick: () => window.open(ctx.settings.bookingPath, '_blank', 'noopener')});
+        kit.addBannerAction($container, {id: 'booking-new', icon: 'plus', title: 'New booking',
+            onClick: () => ctx.newBooking({})});
+
+        /**
+         * An extension's banner action (Booking 1.4): its module's `run(ctx, prefill)`, imported on the click.
+         * ctx is the screen's (boot, openBooking, refresh, go...) plus what sections get (api, owner, helpPopovers).
+         * Anything that must open a new tab does so on a click of its own, never after this import.
+         */
+        const runAction = async (a, prefill = {}) => {
+            try {
+                const mod = await import(a.module);
+                const run = mod.run || mod.default?.run;
+                if (typeof run !== 'function') throw new Error('no run()');
+                return await run({...ctx, owner: a.owner, api: sectionApi, bookables: boot.bookables, services: boot.services,
+                    helpPopovers: (el) => kit.helpPopovers(el)}, prefill);
+            } catch (err) {
+                console.warn(`[booking] ${a.owner} action ${a.id}:`, err);
+                E.toast(`${a.title} could not start: ${errText(err)}`, {type: 'error'});
+                return null;
+            }
+        };
+        for (const a of actions) {
+            kit.addBannerAction($container, {id: `booking-x-${a.id}`, icon: a.icon, title: a.title, onClick: () => runAction(a)});
+        }
+
+        try {
+            const mod = await import(current.module);
+            if (!here()) return;
+            const mount = mod.mount || mod.default?.mount;
+            const cleanup = await mount(body, ctx);
+            if (typeof cleanup === 'function') scope(cleanup);
+        } catch (err) {
+            body.innerHTML = '';
+            const p = document.createElement('p');
+            p.className = 'bk-error';
+            p.textContent = `This screen could not load: ${errText(err)}`;
+            body.appendChild(p);
+            return;
+        }
+        store.set('booking.last-tab', current.key);
+
+        // From Contacts or Email: the New booking slideover (or an extension's action), filled in. The
+        // address goes back to the Diary so a reload does not open it again.
+        if ((wantNew || wantAction) && here()) {
+            ctx.replaceHash('#/plugins/booking/diary');
+            const prefill = {email: query.email || '', name: query.name || ''};
+            if (query.contact) {
+                try {
+                    const c = await api.contact(query.contact);
+                    Object.assign(prefill, {contactId: c.id, name: c.name, email: c.email, phone: c.phone});
+                } catch (err) {
+                    E.toast(`That contact could not be read: ${errText(err)}`, {type: 'warning'});
+                }
+            } else if (query.email && ctx.boot.contacts) {
+                // From an email: a sender already in the caller's Contacts books as that contact.
+                const c = await api.contactByEmail(query.email).catch(() => null);
+                if (c?.id) Object.assign(prefill, {contactId: c.id, name: c.name || prefill.name, phone: c.phone});
+            }
+            if (!ROUTE.test(location.hash)) return;
+            if (wantAction) runAction(wantAction, prefill);
+            else ctx.newBooking(prefill);
+        }
+    }
+};

package/plugins/booking/admin/views/bookings.js

@@ -0,0 +1,127 @@
+/**
+ * Booking › Bookings.
+ *
+ * Every booking as a list: chips for Upcoming, Past and Cancelled (with
+ * counts), search over name, email, phone, service and who, rows with a
+ * right-click / ⋮ / Shift+F10 menu (the same one the Diary has). Click opens
+ * the booking. A notification's link (#/plugins/booking/bookings/<id>) opens one.
+ */
+
+import {STATUS_LABEL, STATUS_TONE, V, api, dateLabel, errText, esc, store, wireRows} from '../lib/kit.js';
+import {wallClock} from '/plugins/booking/public/lib/time.js';
+import {sourceShort, withNames} from '../lib/details.js';
+
+const FILTERS = [
+    {key: 'upcoming', label: 'Upcoming', match: (b, now) => b.status !== 'cancelled' && b.endAt > now},
+    {key: 'today', label: 'Today', match: (b, now, today, tz) => b.status !== 'cancelled' && wallClock(b.startAt, tz).date === today},
+    {key: 'past', label: 'Past', match: (b, now) => b.status !== 'cancelled' && b.endAt <= now},
+    {key: 'cancelled', label: 'Cancelled', match: (b) => b.status === 'cancelled'},
+    {key: 'all', label: 'All', match: () => true}
+];
+
+const ROW = `
+<div class="bk-row" data-id="{{id}}" tabindex="0">
+  <span class="bk-dot" data-bind-data-colour="colour"></span>
+  <span class="bk-when-col"><strong data-bind-text="day"></strong><small data-bind-text="time"></small></span>
+  <span class="bk-main"><strong data-bind-text="who"></strong><small data-bind-text="meta"></small></span>
+  <span class="bk-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+  <button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, boot, tz} = ctx;
+    const panels = await import(`/plugins/booking/admin/views/panels.js?v=${V}`);
+    if (!here()) return;
+
+    const all = M.observable([]);
+    const loading = M.observable(true);
+    const error = M.observable('');
+    const filter = M.observable(FILTERS.some(f => f.key === store.get('booking.list-filter')) ? store.get('booking.list-filter') : 'upcoming');
+    const query = M.observable('');
+    scope(M.effect(() => store.set('booking.list-filter', filter.value)));
+    const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
+
+    const counts = M.observable({});
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        const now = new Date().toISOString();
+        const c = {};
+        for (const f of FILTERS) c[f.key] = all.value.filter(b => f.match(b, now, boot.today, tz)).length;
+        counts.value = c;
+        const f = FILTERS.find(x => x.key === filter.value) || FILTERS[0];
+        const q = query.value.trim().toLowerCase();
+        const list = all.value
+            .filter(b => f.match(b, now, boot.today, tz))
+            .filter(b => !q || [b.name, b.email, b.phone, b.serviceName, withNames(b), b.notes].join(' ').toLowerCase().includes(q));
+        // Coming up: soonest first. Looking back: latest first.
+        list.sort((a, b) => (f.key === 'upcoming' || f.key === 'today' ? a.startAt.localeCompare(b.startAt) : b.startAt.localeCompare(a.startAt)));
+        rows.value = list.map(b => {
+            const s = wallClock(b.startAt, tz);
+            const e = wallClock(b.endAt, tz);
+            return {
+                id: b.id,
+                colour: colours.get(b.bookableId) || 'grey',
+                day: dateLabel(s.date),
+                time: `${s.time}-${e.time}`,
+                who: b.name || b.email,
+                meta: [b.serviceName, withNames(b) && `with ${withNames(b)}`, b.email, sourceShort(b.source)].filter(Boolean).join(' · '),
+                statusLabel: STATUS_LABEL[b.status] || b.status,
+                tone: `is-${STATUS_TONE[b.status] || 'muted'}`
+            };
+        });
+    }));
+    const emptyText = M.computed(() => (all.value.length
+        ? (query.value ? 'No bookings match.' : 'Nothing here.')
+        : 'No bookings yet. They appear here as soon as someone books - on your booking page, or from New booking.'));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'bk-card bk-bookings';
+    view.innerHTML = `
+<div class="bk-bar">
+  <div class="bk-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 bk-search" placeholder="Search name, email, service…" aria-label="Search bookings" data-model="query.value">
+  <span data-help-title="Bookings" data-help="Every booking, newest changes included. Click one to open it; right-click (or ⋮, or Shift+F10) to move it, mark it done or a no-show, or cancel it. Cancelled bookings free their time and can then be deleted."></span>
+</div>
+<p class="bk-note" data-bind-hidden="!loading.value">Loading…</p>
+<p class="bk-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+<p class="bk-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
+<div class="bk-list" data-each="rows.value key=id"></div>`;
+    root.appendChild(view);
+    view.querySelector('.bk-list').innerHTML = ROW;
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    const bindings = M.applyBindings({loading, error, filter, query, rows, counts, emptyText}, view);
+    scope(() => bindings.dispose());
+    view.querySelector('.bk-seg').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-filter]');
+        if (b) filter.value = b.dataset.filter;
+    });
+
+    async function load() {
+        try {
+            const list = await api.bookings.list();
+            if (!here()) return;
+            all.value = Array.isArray(list) ? list : [];
+            error.value = '';
+        } catch (err) {
+            error.value = `The bookings could not load: ${errText(err)}`;
+        } finally {
+            loading.value = false;
+        }
+    }
+    ctx.onBookingsChanged = () => { if (here()) load(); };
+    scope(() => { ctx.onBookingsChanged = () => {}; });
+
+    const byId = (id) => all.peek().find(b => b.id === id);
+    wireRows(view.querySelector('.bk-list'), {
+        openMenuAt: kit.openMenuAt,
+        scope,
+        main: (id) => ctx.openBooking(id),
+        items: (id) => panels.bookingMenu(ctx, byId(id))
+    });
+
+    await load();
+    if (ctx.id && here()) ctx.openBooking(ctx.id);
+}