domma-cms 0.102.1 → 0.103.0

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

@@ -0,0 +1,516 @@
+/**
+ * Booking › the slideovers every screen shares: one booking (details, status,
+ * staff note, history), a new booking, moving one, cancelling one - and the
+ * right-click / ⋮ menu a booking has wherever it is shown (Diary, Bookings).
+ *
+ * A clash is a 409 from the server; staff are asked "Book it anyway?" and the
+ * request goes again with `force`. "Email the customer" is the `notify` flag:
+ * without it, a change made by staff sends nothing.
+ */
+
+import {
+    STATUS_LABEL, STATUS_TONE, api, dateLabel, errText, esc, fmtDateTime, isClash, minutesLabel, openPanel, refreshBadge
+} from '../lib/kit.js';
+import {atWallClock, isDate, toMinutes, wallClock} from '/plugins/booking/public/lib/time.js';
+import {answerRows, placesLabel, sourceLabel, withNames} from '../lib/details.js';
+import {mountSections} from '../lib/extension-sections.js';
+
+/** Places per session a service takes (Booking Pro's classes); 1 for an appointment. */
+const capacityOf = (svc) => Math.max(1, Number(svc?.ext?.['booking-pro']?.capacity) || 1);
+
+const changed = (ctx) => { refreshBadge(); try { ctx.onBookingsChanged?.(); } catch { /* the screen went */ } };
+
+/** "Tue 15/07/2031, 09:00-10:00" in the business zone. */
+export function timeRange(b, tz) {
+    const s = wallClock(b.startAt, tz);
+    const e = wallClock(b.endAt, tz);
+    return `${dateLabel(s.date)}, ${s.time}-${e.time}${e.date !== s.date ? ` (${dateLabel(e.date)})` : ''}`;
+}
+
+// ---- The menu --------------------------------------------------------------------
+
+/**
+ * The menu a booking has everywhere. `reload` is told after any change.
+ *
+ * @returns {object[]} E.contextMenu items
+ */
+export function bookingMenu(ctx, b) {
+    if (!b) return [];
+    const live = b.status !== 'cancelled';
+    return [
+        {label: 'Open', icon: 'external-link', action: () => openBooking(ctx, b.id)},
+        {label: 'Move…', icon: 'move', disabled: () => !live, action: () => moveBooking(ctx, b)},
+        {type: 'divider'},
+        {label: 'Mark as done', icon: 'check', disabled: () => !live || b.status === 'completed', action: () => setStatus(ctx, b, 'completed')},
+        {label: 'Mark as no-show', icon: 'user-remove', disabled: () => !live || b.status === 'no-show', action: () => setStatus(ctx, b, 'no-show')},
+        {label: 'Back to booked', icon: 'rotate-ccw', disabled: () => !live || b.status === 'confirmed', action: () => setStatus(ctx, b, 'confirmed')},
+        {type: 'divider'},
+        {label: 'Email the customer', icon: 'mail', disabled: () => !b.email, action: () => { location.href = `mailto:${encodeURIComponent(b.email)}?subject=${encodeURIComponent(`Your booking: ${b.serviceName}`)}`; }},
+        ...(b.contactId && ctx.boot.contacts ? [{label: 'Open Contacts', icon: 'users', action: () => { location.hash = '#/contacts'; }}] : []),
+        {type: 'divider'},
+        live
+            ? {label: 'Cancel booking…', icon: 'x-circle', action: () => cancelBooking(ctx, b)}
+            : {label: 'Delete', icon: 'trash', action: () => deleteBooking(ctx, b)}
+    ];
+}
+
+// ---- Status, cancel, delete ------------------------------------------------------
+
+export async function setStatus(ctx, b, status) {
+    try {
+        const next = await api.bookings.update(b.id, {status});
+        E.toast(`${b.name}: ${STATUS_LABEL[status].toLowerCase()}.`, {type: 'success'});
+        changed(ctx);
+        return next;
+    } catch (err) {
+        E.toast(`Not changed: ${errText(err)}`, {type: 'error'});
+        return null;
+    }
+}
+
+/** Cancel, with a reason and whether to email the customer. Resolves the booking, or null. */
+export function cancelBooking(ctx, b) {
+    return new Promise((resolve) => {
+        const reason = M.observable('');
+        const notify = M.observable(Boolean(b.email) && ctx.boot.mailReady);
+        let panel = null;
+        let done = null;
+        openPanel({
+            title: 'Cancel booking',
+            size: 'sm',
+            model: {reason, notify},
+            html: `<div class="bk-form">
+  <p><strong>${esc(b.serviceName)}</strong> for <strong>${esc(b.name)}</strong><br><span class="bk-muted">${esc(timeRange(b, ctx.tz))}</span></p>
+  <p class="bk-note">The time becomes free for someone else straight away.</p>
+  <label class="form-label">Reason <span class="bk-muted">(optional)</span> <span data-help-title="Reason" data-help="Kept in the booking's history. It is not sent to the customer."></span></label>
+  <textarea class="form-input" rows="2" maxlength="300" data-model="reason.value"></textarea>
+  <label class="bk-check"><input type="checkbox" data-bool="notify" ${b.email ? '' : 'disabled'}> Email the customer that it is cancelled
+    <span data-help-title="Email the customer" data-help="They get a short cancellation email with a calendar file that takes it off their calendar. Off: nothing is sent - tell them yourself."></span></label>
+  ${ctx.boot.mailReady ? '' : '<p class="bk-note is-warn">This site has no outgoing mail server set up, so no email can be sent.</p>'}
+  <div class="bk-actions"><span class="bk-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="keep">Keep it</button>
+    <button type="button" class="btn btn-sm btn-danger" data-on-click="save"><span data-icon="x-circle" data-icon-size="13"></span> Cancel booking</button></div>
+</div>`,
+            before: (el) => {
+                const box = el.querySelector('[data-bool="notify"]');
+                box.checked = notify.peek();
+                box.addEventListener('change', () => { notify.value = box.checked; });
+            },
+            cleanup: () => resolve(done),
+            methods: {
+                keep: () => panel?.close(true),
+                async save() {
+                    try {
+                        done = await api.bookings.update(b.id, {status: 'cancelled', reason: reason.peek(), notify: notify.peek()});
+                        E.toast(`Cancelled${notify.peek() ? ' - the customer has been emailed' : ''}.`, {type: 'success'});
+                        changed(ctx);
+                        panel?.close(true);
+                    } catch (err) {
+                        E.toast(`Not cancelled: ${errText(err)}`, {type: 'error'});
+                    }
+                }
+            }
+        }).then(p => { panel = p; });
+    });
+}
+
+export async function deleteBooking(ctx, b) {
+    if (!await E.confirm(`Delete the cancelled booking for <strong>${esc(b.name)}</strong> (${esc(timeRange(b, ctx.tz))})? It cannot be brought back.`)) return false;
+    try {
+        await api.bookings.remove(b.id);
+        E.toast('Deleted.', {type: 'success'});
+        changed(ctx);
+        return true;
+    } catch (err) {
+        E.toast(`Not deleted: ${errText(err)}`, {type: 'error'});
+        return false;
+    }
+}
+
+// ---- Choosing a time (new and move share it) -------------------------------------
+
+/**
+ * The date + free times + "or type a time" block, filled for a service and
+ * (optionally) one person or room. Plain DOM - it is redrawn whole on each
+ * change and holds no bindings.
+ *
+ * @returns {{el: HTMLElement, load: Function, value: () => {date: string, time: string}, set: Function}}
+ */
+function timePicker(ctx, {date, time = '', ignore = ''}) {
+    const el = document.createElement('div');
+    el.className = 'bk-picker';
+    el.innerHTML = `
+<div class="bk-grid">
+  <div><label class="form-label">Date <span data-help-title="Date" data-help="The free times that day are listed below, in this business's time zone. Staff are not held to the service's notice or how-far-ahead rules."></span></label>
+    <input type="date" class="form-input" data-part="date"></div>
+  <div><label class="form-label">Time <span data-help-title="Time" data-help="Pick a free time below, or type any time (24-hour, e.g. 14:30). A typed time that clashes asks before booking over it."></span></label>
+    <input type="time" class="form-input" step="300" data-part="time"></div>
+</div>
+<div class="bk-slots" data-part="slots"><p class="bk-note">Pick a service to see free times.</p></div>`;
+    const dateIn = el.querySelector('[data-part="date"]');
+    const timeIn = el.querySelector('[data-part="time"]');
+    const box = el.querySelector('[data-part="slots"]');
+    dateIn.value = date || ctx.boot.today;
+    timeIn.value = time;
+    let current = {service: '', with: ''};
+    let seq = 0;
+
+    const mark = () => {
+        for (const b of box.querySelectorAll('[data-time]')) b.classList.toggle('is-on', b.dataset.time === timeIn.value);
+    };
+    async function load(q = current) {
+        current = q;
+        const my = ++seq;
+        if (!q.service) { box.innerHTML = '<p class="bk-note">Pick a service to see free times.</p>'; return; }
+        if (!isDate(dateIn.value)) { box.innerHTML = '<p class="bk-note">Pick a date.</p>'; return; }
+        box.innerHTML = '<p class="bk-note">Finding free times…</p>';
+        try {
+            const r = await api.slots({service: q.service, with: q.with, from: dateIn.value, to: dateIn.value, ignore});
+            if (my !== seq) return;
+            const slots = r.days?.[0]?.slots || [];
+            if (!slots.length) {
+                box.innerHTML = '<p class="bk-note">No free times that day (closed, or all booked). Type a time above to book anyway.</p>';
+                return;
+            }
+            box.innerHTML = '';
+            // A class shows its places; an appointment (one place) does not need to.
+            const svc = ctx.boot.services.find(x => x.id === q.service);
+            const classy = capacityOf(svc) > 1 || slots.some(x => Number(x.left) > 1);
+            for (const s of slots) {
+                const b = document.createElement('button');
+                b.type = 'button';
+                b.className = 'bk-slot';
+                b.dataset.time = s.time;
+                b.textContent = s.time;
+                if (classy && Number.isFinite(Number(s.left))) {
+                    const small = document.createElement('small');
+                    small.textContent = placesLabel(s.left);
+                    b.appendChild(small);
+                    b.title = `${s.time} - ${placesLabel(s.left)}`;
+                }
+                box.appendChild(b);
+            }
+            mark();
+        } catch (err) {
+            if (my === seq) box.innerHTML = `<p class="bk-note is-bad">${esc(errText(err))}</p>`;
+        }
+    }
+    box.addEventListener('click', (e) => {
+        const b = e.target.closest('[data-time]');
+        if (!b) return;
+        timeIn.value = b.dataset.time;
+        mark();
+        timeIn.dispatchEvent(new Event('input', {bubbles: true}));
+    });
+    dateIn.addEventListener('change', () => load());
+    timeIn.addEventListener('input', mark);
+    return {
+        el, load,
+        value: () => ({date: dateIn.value, time: timeIn.value}),
+        startAt() {
+            if (!isDate(dateIn.value) || !Number.isFinite(toMinutes(timeIn.value))) return '';
+            return atWallClock(dateIn.value, timeIn.value, ctx.tz).toISOString();
+        }
+    };
+}
+
+/** Send `fn(force)`; on a clash ask, and send again with force. Resolves the answer, or null. */
+async function withClashCheck(fn, what) {
+    try {
+        return await fn(false);
+    } catch (err) {
+        if (!isClash(err)) throw err;
+        if (!await E.confirm(`${esc(errText(err))}<br><br>${esc(what)} anyway, over the clash?`)) return null;
+        return fn(true);
+    }
+}
+
+// ---- New booking -------------------------------------------------------------------
+
+/**
+ * @param {object} ctx
+ * @param {{serviceId?, bookableId?, date?, time?, name?, email?, phone?, notes?, contactId?}} prefill
+ */
+export async function newBooking(ctx, prefill = {}) {
+    const {boot} = ctx;
+    const services = boot.services.filter(s => s.active !== false || s.id === prefill.serviceId);
+    if (!boot.bookables.length || !boot.services.length) {
+        const ok = await E.confirm(!boot.bookables.length
+            ? 'Add who or what can be booked first - a person or a room - then a service they provide.<br><br>Go to People &amp; rooms now?'
+            : 'Add a service first - what can be booked, for how long, and with whom.<br><br>Go to Services now?');
+        if (ok) ctx.go(!boot.bookables.length ? 'people' : 'services', 'new');
+        return null;
+    }
+    const fromBookable = prefill.bookableId ? services.filter(s => s.bookables.includes(prefill.bookableId)) : [];
+    const f = {
+        serviceId: M.observable(prefill.serviceId || fromBookable[0]?.id || (services.length === 1 ? services[0].id : '')),
+        bookableId: M.observable(prefill.bookableId || ''),
+        name: M.observable(prefill.name || ''),
+        email: M.observable(prefill.email || ''),
+        phone: M.observable(prefill.phone || ''),
+        notes: M.observable(prefill.notes || ''),
+        staffNote: M.observable(''),
+        notify: M.observable(boot.mailReady && boot.settings.sendConfirmation !== false),
+        saving: M.observable(false)
+    };
+    const contactId = prefill.contactId || '';
+    const providers = M.observable([]);
+    const updateProviders = () => {
+        const svc = boot.services.find(s => s.id === f.serviceId.peek());
+        const list = svc ? boot.bookables.filter(b => svc.bookables.includes(b.id)) : [];
+        providers.value = list.map(b => ({id: b.id, name: b.name + (b.active === false ? ' (off)' : '')}));
+        if (f.bookableId.peek() && !list.some(b => b.id === f.bookableId.peek())) f.bookableId.value = '';
+    };
+    updateProviders();
+    const picker = timePicker(ctx, {date: prefill.date, time: prefill.time});
+    const typed = () => [f.name.peek(), f.email.peek(), f.phone.peek(), f.notes.peek(), f.staffNote.peek(), picker.value().time].join('|');
+    const opened = typed();
+    let panel = null;
+    let made = null;
+    let sections = null;
+
+    return new Promise((resolve) => {
+        openPanel({
+            title: 'New booking',
+            size: 'md',
+            model: {...f, providers},
+            dirty: () => !made && (typed() !== opened || Boolean(sections?.dirty())),
+            html: `<div class="bk-form">
+  ${contactId ? `<p class="bk-note"><span data-icon="user" data-icon-size="13"></span> From your contact <strong>${esc(prefill.name || prefill.email)}</strong>.</p>` : ''}
+  <div class="bk-grid">
+    <div><label class="form-label">Service <span data-help-title="Service" data-help="What is being booked. Its length and buffers decide which times are free."></span></label>
+      <select class="form-select" data-part="service"><option value="">Choose…</option>${services.map(s => `<option value="${esc(s.id)}">${esc(s.name)} (${esc(minutesLabel(s.duration))})${s.active === false ? ' - off' : ''}</option>`).join('')}</select></div>
+    <div><label class="form-label">With <span data-help-title="With" data-help="The person or room. Anyone: whoever is free takes it - the least busy that day."></span></label>
+      <select class="form-select" data-part="with"></select></div>
+  </div>
+  <div data-part="picker"></div>
+  <h4 class="bk-sub">Customer</h4>
+  <div class="bk-grid">
+    <div><label class="form-label">Name</label><input class="form-input" data-model="name.value" maxlength="120"><small class="bk-err" data-err="name" hidden></small></div>
+    <div><label class="form-label">Email <span data-help-title="Email" data-help="Where the confirmation goes. With Add customers to Contacts on (settings), they are added to Contacts unless they are there already."></span></label>
+      <input class="form-input" type="email" data-model="email.value" maxlength="200"><small class="bk-err" data-err="email" hidden></small></div>
+    <div><label class="form-label">Phone</label><input class="form-input" type="tel" data-model="phone.value" maxlength="40"><small class="bk-err" data-err="phone" hidden></small></div>
+    <div class="bk-wide"><label class="form-label">Their notes <span data-help-title="Their notes" data-help="What the customer asked or told you. It is in their confirmation email."></span></label>
+      <textarea class="form-input" rows="2" data-model="notes.value" maxlength="2000"></textarea></div>
+    <div class="bk-wide"><label class="form-label">Staff note <span data-help-title="Staff note" data-help="Only for you and your team - never sent to the customer."></span></label>
+      <textarea class="form-input" rows="2" data-model="staffNote.value" maxlength="4000"></textarea></div>
+  </div>
+  <div class="bk-ext-host" data-part="ext"></div>
+  <label class="bk-check"><input type="checkbox" data-bool="notify"> Send the customer a confirmation email
+    <span data-help-title="Confirmation email" data-help="The booking's details, a calendar file, and a link to change or cancel it (within your notice rules)."></span></label>
+  ${boot.mailReady ? '' : '<p class="bk-note is-warn">This site has no outgoing mail server set up, so no email can be sent.</p>'}
+  <div class="bk-actions"><span class="bk-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" data-bind-disabled="saving.value"><span data-icon="check" data-icon-size="13"></span> Book</button></div>
+</div>`,
+            before: (el) => {
+                el.querySelector('[data-part="picker"]').appendChild(picker.el);
+                const svcSel = el.querySelector('[data-part="service"]');
+                const withSel = el.querySelector('[data-part="with"]');
+                svcSel.value = f.serviceId.peek();
+                const drawWith = () => {
+                    withSel.innerHTML = `<option value="">Anyone free</option>${providers.peek().map(p => `<option value="${esc(p.id)}">${esc(p.name)}</option>`).join('')}`;
+                    withSel.value = f.bookableId.peek();
+                };
+                drawWith();
+                const serviceNow = () => boot.services.find(x => x.id === f.serviceId.peek()) || null;
+                sections = mountSections(el.querySelector('[data-part="ext"]'), 'newBooking', {boot, service: serviceNow()});
+                svcSel.addEventListener('change', () => {
+                    f.serviceId.value = svcSel.value; updateProviders(); drawWith(); picker.load({service: svcSel.value, with: withSel.value});
+                    sections.serviceChanged(serviceNow());
+                });
+                withSel.addEventListener('change', () => { f.bookableId.value = withSel.value; picker.load({service: svcSel.value, with: withSel.value}); });
+                const box = el.querySelector('[data-bool="notify"]');
+                box.checked = f.notify.peek();
+                box.addEventListener('change', () => { f.notify.value = box.checked; });
+                picker.load({service: f.serviceId.peek(), with: f.bookableId.peek()});
+            },
+            after: (el) => setTimeout(() => el.querySelector(f.serviceId.peek() ? '[data-part="date"]' : '[data-part="service"]')?.focus(), 60),
+            cleanup: () => { sections?.destroy(); resolve(made); },
+            methods: {
+                cancel: () => panel?.close(),
+                async save() {
+                    if (f.saving.peek()) return;
+                    if (!f.serviceId.peek()) { E.toast('Pick a service.', {type: 'warning'}); return; }
+                    await sections?.ready;
+                    const why = sections?.validate();
+                    if (why) { E.toast(why, {type: 'warning'}); return; }
+                    const startAt = picker.startAt();
+                    if (!startAt) { E.toast('Pick a date and a time.', {type: 'warning'}); return; }
+                    const body = {
+                        serviceId: f.serviceId.peek(), bookableId: f.bookableId.peek(), startAt, contactId,
+                        customer: {name: f.name.peek(), email: f.email.peek(), phone: f.phone.peek(), notes: f.notes.peek()},
+                        staffNote: f.staffNote.peek(), notify: f.notify.peek()
+                    };
+                    const answers = sections?.answers() || {};
+                    const ext = sections?.extFor() || {};
+                    if (Object.keys(answers).length) body.answers = answers;
+                    if (Object.keys(ext).length) body.ext = ext;
+                    f.saving.value = true;
+                    try {
+                        made = await withClashCheck((force) => api.bookings.create({...body, force}), 'Book it');
+                        if (!made) return;
+                        E.toast(`Booked: ${made.serviceName} for ${made.name}, ${timeRange(made, ctx.tz)}.`, {type: 'success'});
+                        await sections?.after(made);
+                        changed(ctx);
+                        panel?.close(true);
+                    } catch (err) {
+                        const errors = err?.body?.errors || {};
+                        const el = panel?.panel;
+                        if (el) for (const box of el.querySelectorAll('[data-err]')) { box.textContent = errors[box.dataset.err] || ''; box.hidden = !errors[box.dataset.err]; }
+                        E.toast(`Not booked: ${errText(err)}`, {type: 'error'});
+                    } finally {
+                        f.saving.value = false;
+                    }
+                }
+            }
+        }).then(p => { panel = p; });
+    });
+}
+
+// ---- Move ------------------------------------------------------------------------
+
+export function moveBooking(ctx, b) {
+    const svc = ctx.boot.services.find(s => s.id === b.serviceId);
+    const list = svc ? ctx.boot.bookables.filter(x => svc.bookables.includes(x.id)) : ctx.boot.bookables.filter(x => x.id === b.bookableId);
+    const at = wallClock(b.startAt, ctx.tz);
+    const picker = timePicker(ctx, {date: at.date, time: at.time, ignore: b.id});
+    const withId = M.observable(b.bookableId);
+    const notify = M.observable(Boolean(b.email) && ctx.boot.mailReady);
+    let panel = null;
+    let moved = null;
+    return new Promise((resolve) => {
+        openPanel({
+            title: 'Move booking',
+            size: 'md',
+            model: {withId, notify},
+            dirty: () => !moved && (picker.value().date !== at.date || picker.value().time !== at.time || withId.peek() !== b.bookableId),
+            html: `<div class="bk-form">
+  <p><strong>${esc(b.serviceName)}</strong> for <strong>${esc(b.name)}</strong><br><span class="bk-muted">Now: ${esc(timeRange(b, ctx.tz))}${withNames(b) ? ` with ${esc(withNames(b))}` : ''}</span></p>
+  <div><label class="form-label">With <span data-help-title="With" data-help="Keep the same person or room, or move it to another who provides this service."></span></label>
+    <select class="form-select" data-part="with">${list.map(x => `<option value="${esc(x.id)}">${esc(x.name)}</option>`).join('')}</select></div>
+  <div data-part="picker"></div>
+  <label class="bk-check"><input type="checkbox" data-bool="notify" ${b.email ? '' : 'disabled'}> Email the customer the new time
+    <span data-help-title="Email the customer" data-help="They get the new details and a calendar file that replaces the old one in their calendar."></span></label>
+  <div class="bk-actions"><span class="bk-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="move" data-icon-size="13"></span> Move</button></div>
+</div>`,
+            before: (el) => {
+                el.querySelector('[data-part="picker"]').appendChild(picker.el);
+                const sel = el.querySelector('[data-part="with"]');
+                sel.value = b.bookableId;
+                sel.addEventListener('change', () => { withId.value = sel.value; picker.load({service: b.serviceId, with: sel.value}); });
+                const box = el.querySelector('[data-bool="notify"]');
+                box.checked = notify.peek();
+                box.addEventListener('change', () => { notify.value = box.checked; });
+                picker.load({service: b.serviceId, with: b.bookableId});
+            },
+            cleanup: () => resolve(moved),
+            methods: {
+                cancel: () => panel?.close(),
+                async save() {
+                    const startAt = picker.startAt();
+                    if (!startAt) { E.toast('Pick a date and a time.', {type: 'warning'}); return; }
+                    try {
+                        moved = await withClashCheck((force) => api.bookings.move(b.id, {startAt, bookableId: withId.peek(), notify: notify.peek(), force}), 'Move it');
+                        if (!moved) return;
+                        E.toast(`Moved to ${timeRange(moved, ctx.tz)}.`, {type: 'success'});
+                        changed(ctx);
+                        panel?.close(true);
+                    } catch (err) {
+                        E.toast(`Not moved: ${errText(err)}`, {type: 'error'});
+                    }
+                }
+            }
+        }).then(p => { panel = p; });
+    });
+}
+
+// ---- One booking ------------------------------------------------------------------
+
+export async function openBooking(ctx, id) {
+    let b;
+    try { b = await api.bookings.get(id); } catch (err) { E.toast(`That booking could not be opened: ${errText(err)}`, {type: 'error'}); return; }
+    const staffNote = M.observable(b.staffNote || '');
+    const saved = M.observable(b.staffNote || '');
+    const tone = `is-${STATUS_TONE[b.status] || 'muted'}`;
+    const history = (b.history || []).slice().reverse().map(h => {
+        const what = {made: 'Booked', moved: 'Moved', cancelled: 'Cancelled', completed: 'Marked done', 'no-show': 'Marked no-show', confirmed: 'Back to booked', pending: 'Pending'}[h.what] || h.what;
+        const was = h.from ? wallClock(h.from, ctx.tz) : null;
+        const extra = h.what === 'moved' && was ? ` (was ${dateLabel(was.date)}, ${was.time})` : h.reason ? `: ${h.reason}` : '';
+        return `<li><strong>${esc(what)}</strong>${esc(extra)}<small>${esc(fmtDateTime(h.at))}${h.by ? ` · ${esc(h.by)}` : ''}</small></li>`;
+    }).join('');
+    const detail = (label, value, href = '') => (value ? `<dt>${esc(label)}</dt><dd>${href ? `<a href="${esc(href)}">${esc(value)}</a>` : esc(value)}</dd>` : '');
+    const live = b.status !== 'cancelled';
+    const answers = answerRows(b.ext?.answers, ctx.boot.services.find(x => x.id === b.serviceId));
+    let panel = null;
+    let sections = null;
+    const act = (fn) => async () => { const r = await fn(); if (r) panel?.close(); };
+    panel = await openPanel({
+        title: `${b.serviceName}: ${b.name}`,
+        size: 'md',
+        model: {staffNote, saved},
+        dirty: () => staffNote.peek() !== saved.peek(),
+        cleanup: () => sections?.destroy(),
+        before: (el) => {
+            sections = mountSections(el.querySelector('[data-part="ext"]'), 'bookingPanel', {boot: ctx.boot, booking: b,
+                refresh: () => { panel?.close(true); ctx.openBooking ? ctx.openBooking(b.id) : openBooking(ctx, b.id); }});
+        },
+        html: `<div class="bk-form bk-booking">
+  <div class="bk-booking-head">
+    <span class="bk-chip ${tone}">${esc(STATUS_LABEL[b.status] || b.status)}</span>
+    <strong>${esc(timeRange(b, ctx.tz))}</strong>
+  </div>
+  <dl class="bk-dl">
+    ${detail('Service', `${b.serviceName} (${minutesLabel(b.duration || (Date.parse(b.endAt) - Date.parse(b.startAt)) / 60000)})`)}
+    ${detail('With', withNames(b))}
+    ${b.online ? detail('Where', 'Online - a video call') : ''}
+    ${detail('Customer', b.name)}
+    ${detail('Email', b.email, b.email ? `mailto:${b.email}` : '')}
+    ${detail('Phone', b.phone, b.phone ? `tel:${b.phone.replace(/[^+\d]/g, '')}` : '')}
+    ${detail('Their notes', b.notes)}
+    ${detail('Booked', `${sourceLabel(b.source)} · ${fmtDateTime(b.createdAt || b.history?.[0]?.at)}`)}
+    ${b.contactId && ctx.boot.contacts ? detail('Contact', 'In your Contacts', '#/contacts') : ''}
+  </dl>
+  ${answers.length ? `<h4 class="bk-sub">Their answers</h4><dl class="bk-dl bk-answers">${answers.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${esc(v)}</dd>`).join('')}</dl>` : ''}
+  <div class="bk-ext-host" data-part="ext"></div>
+  ${b.hostUrl && live ? `<div class="bk-actions bk-actions-start bk-call-row">
+    <a class="btn btn-sm btn-primary" href="${esc(b.hostUrl)}" target="_blank" rel="noopener"><span data-icon="video" data-icon-size="13"></span> Start the call</a>
+    <span class="bk-muted">You are the host: let ${esc(b.name || 'them')} in when they arrive. It opens 10 minutes before the start.</span></div>` : ''}
+  <div class="bk-actions bk-actions-start">
+    <button type="button" class="btn btn-sm btn-outline" data-on-click="move" ${live ? '' : 'disabled'}><span data-icon="move" data-icon-size="13"></span> Move</button>
+    <button type="button" class="btn btn-sm btn-outline" data-on-click="done" ${live && b.status !== 'completed' ? '' : 'disabled'}><span data-icon="check" data-icon-size="13"></span> Done</button>
+    <button type="button" class="btn btn-sm btn-outline" data-on-click="noshow" ${live && b.status !== 'no-show' ? '' : 'disabled'}><span data-icon="user-remove" data-icon-size="13"></span> No-show</button>
+    <span class="bk-spacer"></span>
+    ${live
+        ? '<button type="button" class="btn btn-sm btn-ghost bk-danger-text" data-on-click="cancelIt"><span data-icon="x-circle" data-icon-size="13"></span> Cancel booking</button>'
+        : '<button type="button" class="btn btn-sm btn-ghost bk-danger-text" data-on-click="remove"><span data-icon="trash" data-icon-size="13"></span> Delete</button>'}
+  </div>
+  <label class="form-label">Staff note <span data-help-title="Staff note" data-help="Only for you and your team - never sent to the customer. Ctrl+S saves it."></span></label>
+  <textarea class="form-input" rows="3" maxlength="4000" data-model="staffNote.value"></textarea>
+  <div class="bk-actions"><span class="bk-muted" data-bind-hidden="staffNote.value === saved.value">Not saved yet</span><span class="bk-spacer"></span>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="staffNote.value === saved.value">Save note</button></div>
+  <h4 class="bk-sub">History</h4>
+  <ul class="bk-history">${history || '<li class="bk-muted">Nothing yet.</li>'}</ul>
+</div>`,
+        methods: {
+            async save() {
+                try {
+                    await api.bookings.update(b.id, {staffNote: staffNote.peek()});
+                    saved.value = staffNote.peek();
+                    E.toast('Note saved.', {type: 'success'});
+                    changed(ctx);
+                } catch (err) {
+                    E.toast(`Not saved: ${errText(err)}`, {type: 'error'});
+                }
+            },
+            move: act(() => moveBooking(ctx, b)),
+            done: act(() => setStatus(ctx, b, 'completed')),
+            noshow: act(() => setStatus(ctx, b, 'no-show')),
+            cancelIt: act(() => cancelBooking(ctx, b)),
+            remove: act(() => deleteBooking(ctx, b))
+        }
+    });
+    return panel;
+}