domma-cms 0.102.1 → 0.103.0

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

@@ -0,0 +1,281 @@
+/**
+ * Booking › People & rooms - who and what can be booked.
+ *
+ * A person is booked for appointments (link them to a user so their own
+ * Calendar events block their times and bookings join their Contacts); a room
+ * or thing (a meeting room, a van, a court) is booked for time. Each has
+ * weekly opening hours (several windows a day) and days off.
+ */
+
+import {COLOUR_LABEL, KIND_LABEL, api, errText, esc, openPanel, wireRows} from '../lib/kit.js';
+import {cleanBookable} from '/plugins/booking/public/lib/clean.js';
+import {DAY_KEYS, isDate, toMinutes} from '/plugins/booking/public/lib/time.js';
+
+const DAY_NAMES = {mon: 'Monday', tue: 'Tuesday', wed: 'Wednesday', thu: 'Thursday', fri: 'Friday', sat: 'Saturday', sun: 'Sunday'};
+const WEEK = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+
+const ROW = `
+<div class="bk-row" data-id="{{id}}" tabindex="0">
+  <span class="bk-dot" data-bind-data-colour="colour"></span>
+  <span class="bk-main"><strong data-bind-text="name"></strong><small data-bind-text="meta"></small></span>
+  <span class="bk-chip" data-bind-class="tone" data-bind-text="state"></span>
+  <button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+/** "Mon-Fri 09:00-17:00" style summary of weekly hours. */
+export function hoursSummary(hours) {
+    const txt = (d) => (hours?.[d] || []).map(w => `${w.from}-${w.to}`).join(', ');
+    const groups = [];
+    for (const d of WEEK) {
+        const t = txt(d);
+        if (!t) continue;
+        const last = groups[groups.length - 1];
+        if (last && last.t === t && WEEK.indexOf(d) === WEEK.indexOf(last.to) + 1) last.to = d;
+        else groups.push({from: d, to: d, t});
+    }
+    if (!groups.length) return 'no opening hours';
+    const cap = (d) => DAY_NAMES[d].slice(0, 3);
+    return groups.map(g => `${cap(g.from)}${g.to !== g.from ? `-${cap(g.to)}` : ''} ${g.t}`).join('; ');
+}
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, boot} = ctx;
+    const people = M.observable(boot.bookables);
+    const rows = M.observable([]);
+    const userName = (id) => boot.users.find(u => u.id === id)?.name || '';
+    scope(M.effect(() => {
+        rows.value = people.value.map(b => ({
+            id: b.id, name: b.name, colour: b.colour || 'blue',
+            meta: [KIND_LABEL[b.kind] || b.kind, b.userId && userName(b.userId) ? `user ${userName(b.userId)}` : '', hoursSummary(b.hours),
+                b.daysOff?.length ? `${b.daysOff.length} day${b.daysOff.length === 1 ? '' : 's'} off` : ''].filter(Boolean).join(' · '),
+            state: b.active === false ? 'Off' : 'Bookable',
+            tone: b.active === false ? 'is-muted' : 'is-success'
+        }));
+    }));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'bk-card bk-people';
+    view.innerHTML = `
+<div class="bk-bar">
+  <button type="button" class="btn btn-sm btn-primary" data-part="add"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button>
+  <span class="bk-spacer"></span>
+  <span data-help-title="People &amp; rooms" data-help="Everyone and everything that can be booked. A person is for appointments; a room or thing is booked for time. Each has its own opening hours and days off - the booking page only offers times inside them."></span>
+</div>
+<div class="bk-empty" data-bind-hidden="rows.value.length">
+  <span data-icon="users" data-icon-size="28"></span>
+  <p><strong>Add who or what can be booked.</strong><br>You, someone on your team, a meeting room, a piece of equipment - each with the hours it can be booked.</p>
+</div>
+<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({rows}, view);
+    scope(() => bindings.dispose());
+    I.scan(view);
+
+    const byId = (id) => people.peek().find(b => b.id === id);
+    const replace = (b) => {
+        const list = people.peek();
+        people.value = list.some(x => x.id === b.id) ? list.map(x => (x.id === b.id ? b : x)) : [...list, b];
+        boot.bookables = people.peek();
+    };
+    view.querySelector('[data-part="add"]').onclick = () => edit(null);
+
+    wireRows(view.querySelector('.bk-list'), {
+        openMenuAt: kit.openMenuAt,
+        scope,
+        main: (id) => edit(byId(id)),
+        items: (id) => {
+            const b = byId(id);
+            if (!b) return [];
+            return [
+                {label: 'Edit', icon: 'edit', action: () => edit(b)},
+                {label: 'New booking…', icon: 'plus-circle', disabled: () => !boot.services.some(s => s.bookables.includes(b.id)),
+                    action: () => ctx.newBooking({bookableId: b.id})},
+                {type: 'divider'},
+                {label: b.active === false ? 'Switch on' : 'Switch off', icon: b.active === false ? 'eye' : 'eye-off', action: () => toggle(b)},
+                {label: 'Delete…', icon: 'trash', action: () => remove(b)}
+            ];
+        }
+    });
+
+    async function toggle(b) {
+        try {
+            replace(await api.bookables.update(b.id, {active: b.active === false}));
+            E.toast(`${b.name} is ${b.active === false ? 'bookable again' : 'switched off'}.`, {type: 'success'});
+        } catch (err) { E.toast(`Not changed: ${errText(err)}`, {type: 'error'}); }
+    }
+
+    async function remove(b) {
+        if (!await E.confirm(`Delete <strong>${esc(b.name)}</strong>? They come off every service. Past bookings keep the name. To stop bookings but keep them, switch them off instead.`)) return;
+        try {
+            await api.bookables.remove(b.id);
+            people.value = people.peek().filter(x => x.id !== b.id);
+            boot.bookables = people.peek();
+            for (const s of boot.services) s.bookables = s.bookables.filter(x => x !== b.id);
+            E.toast(`${b.name} deleted.`, {type: 'success'});
+        } catch (err) { E.toast(errText(err), {type: 'error', duration: 8000}); }
+    }
+
+    async function edit(b) {
+        const start = b || cleanBookable({name: ''}).data;
+        const f = {};
+        for (const k of ['name', 'kind', 'description', 'userId', 'email', 'colour']) f[k] = M.observable(start[k] ?? '');
+        const bools = {calendarBusy: M.observable(start.calendarBusy !== false), active: M.observable(start.active !== false)};
+        const hours = Object.fromEntries(DAY_KEYS.map(d => [d, (start.hours?.[d] || []).map(w => ({...w}))]));
+        let daysOff = (start.daysOff || []).map(o => ({...o}));
+        const isPerson = M.computed(() => f.kind.value === 'person');
+        const saving = M.observable(false);
+        const snapshot = () => JSON.stringify([Object.values(f).map(o => o.peek()), Object.values(bools).map(o => o.peek()), hours, daysOff]);
+        const opened = snapshot();
+        let panel = null;
+
+        const drawHours = (el) => {
+            const box = el.querySelector('[data-part="hours"]');
+            box.innerHTML = WEEK.map(d => `<div class="bk-day" data-day="${d}">
+  <span class="bk-day-name">${DAY_NAMES[d]}</span>
+  <div class="bk-windows">${hours[d].length ? hours[d].map((w, i) => `<span class="bk-window">
+    <input type="time" class="form-input" step="300" value="${esc(w.from)}" data-i="${i}" data-k="from" aria-label="${DAY_NAMES[d]} from">
+    <span>-</span>
+    <input type="time" class="form-input" step="300" value="${esc(w.to)}" data-i="${i}" data-k="to" aria-label="${DAY_NAMES[d]} to">
+    <button type="button" class="btn btn-xs btn-ghost bk-x" data-drop="${i}" title="Remove these hours" aria-label="Remove these hours"><span data-icon="x" data-icon-size="12"></span></button></span>`).join('') : '<span class="bk-muted">Closed</span>'}</div>
+  <button type="button" class="btn btn-xs btn-ghost" data-add title="Add hours on ${DAY_NAMES[d]}"><span data-icon="plus" data-icon-size="12"></span> Hours</button>
+</div>`).join('');
+            I.scan(box);
+        };
+        const drawDaysOff = (el) => {
+            const box = el.querySelector('[data-part="daysoff"]');
+            box.innerHTML = daysOff.length ? daysOff.map((o, i) => `<div class="bk-off" data-i="${i}">
+  <input type="date" class="form-input" value="${esc(o.from)}" data-k="from" aria-label="From">
+  <span>to</span>
+  <input type="date" class="form-input" value="${esc(o.to)}" data-k="to" aria-label="To">
+  <input class="form-input" value="${esc(o.label)}" data-k="label" placeholder="Holiday, training…" maxlength="80" aria-label="Why">
+  <button type="button" class="btn btn-xs btn-ghost bk-x" data-drop title="Remove" aria-label="Remove"><span data-icon="x" data-icon-size="12"></span></button></div>`).join('')
+                : '<p class="bk-note">None. Add holidays and other days they cannot be booked.</p>';
+            I.scan(box);
+        };
+
+        panel = await openPanel({
+            title: b ? `Edit ${b.name}` : 'Add a person or room',
+            size: 'lg',
+            model: {...f, saving, isPerson},
+            dirty: () => snapshot() !== opened,
+            html: `<div class="bk-form">
+  <div class="bk-grid">
+    <div><label class="form-label">Name <span data-help-title="Name" data-help="As customers see it: 'Dr Patel', 'Room 1', 'The van'."></span></label>
+      <input class="form-input" data-model="name.value" maxlength="80"><small class="bk-err" data-err="name" hidden></small></div>
+    <div><label class="form-label">Kind <span data-help-title="Kind" data-help="A person is booked for appointments. A room or thing is booked for time. Both work the same way; the words and icons differ."></span></label>
+      <select class="form-select" data-model="kind.value"><option value="person">Person</option><option value="resource">Room or thing</option></select></div>
+    <div class="bk-wide"><label class="form-label">Description <span class="bk-muted">(optional, shown on the booking page)</span></label>
+      <textarea class="form-input" rows="2" data-model="description.value" maxlength="500"></textarea></div>
+    <div data-bind-hidden="!isPerson.value"><label class="form-label">Their user account <span data-help-title="User account" data-help="Link a person to their sign-in here. Their customers join THEIR Contacts, and (with Calendar busy time on) their own Calendar events block their booking times."></span></label>
+      <select class="form-select" data-model="userId.value"><option value="">Not linked</option>${boot.users.map(u => `<option value="${esc(u.id)}">${esc(u.name)}</option>`).join('')}</select></div>
+    <div><label class="form-label">Email for their copy <span data-help-title="Email for their copy" data-help="New, moved and cancelled bookings with them are emailed here. Empty: the address in Booking settings, else the site's."></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">Colour <span data-help-title="Colour" data-help="Their bookings in the Diary."></span></label>
+      <select class="form-select" data-model="colour.value">${Object.entries(COLOUR_LABEL).map(([k, v]) => `<option value="${k}">${v}</option>`).join('')}</select></div>
+    <div class="bk-wide bk-checks">
+      <label class="bk-check"><input type="checkbox" data-bool="active"> Can be booked <span data-help-title="Can be booked" data-help="Off: no new bookings with them. Their existing bookings stay in the Diary."></span></label>
+      <label class="bk-check" data-bind-hidden="!isPerson.value"><input type="checkbox" data-bool="calendarBusy"> Their Calendar events block their times
+        <span data-help-title="Calendar busy time" data-help="Only for a person linked to a user account, on a site with the Calendar Tool: events they organise make those times unavailable. Also needs Calendar busy time on in Booking settings."></span></label>
+    </div>
+  </div>
+  <h4 class="bk-sub">Opening hours <span data-help-title="Opening hours" data-help="When they can be booked, in ${esc(ctx.tz)}. Add several windows for a day with a break (09:00-12:30, 13:30-17:00). A day with no hours is closed."></span></h4>
+  <div class="bk-hours" data-part="hours"></div>
+  <div class="bk-actions bk-actions-start"><button type="button" class="btn btn-xs btn-outline" data-on-click="copyMonday"><span data-icon="copy" data-icon-size="12"></span> Copy Monday to Tuesday-Friday</button></div>
+  <h4 class="bk-sub">Days off <span data-help-title="Days off" data-help="Holidays and other days they cannot be booked. For days the whole business is closed, use Closed days in Booking settings."></span></h4>
+  <div data-part="daysoff"></div>
+  <div class="bk-actions bk-actions-start"><button type="button" class="btn btn-xs btn-outline" data-on-click="addOff"><span data-icon="plus" data-icon-size="12"></span> Add days off</button></div>
+  <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> Save</button></div>
+</div>`,
+            before: (el) => {
+                for (const box of el.querySelectorAll('[data-bool]')) {
+                    box.checked = bools[box.dataset.bool].peek();
+                    box.addEventListener('change', () => { bools[box.dataset.bool].value = box.checked; });
+                }
+                drawHours(el);
+                drawDaysOff(el);
+                const hoursBox = el.querySelector('[data-part="hours"]');
+                hoursBox.addEventListener('input', (e) => {
+                    const day = e.target.closest('[data-day]')?.dataset.day;
+                    if (!day || e.target.dataset.k === undefined) return;
+                    hours[day][Number(e.target.dataset.i)][e.target.dataset.k] = e.target.value;
+                });
+                hoursBox.addEventListener('click', (e) => {
+                    const day = e.target.closest('[data-day]')?.dataset.day;
+                    if (!day) return;
+                    const drop = e.target.closest('[data-drop]');
+                    if (drop) { hours[day].splice(Number(drop.dataset.drop), 1); drawHours(el); return; }
+                    if (e.target.closest('[data-add]')) {
+                        const last = hours[day][hours[day].length - 1];
+                        hours[day].push(last ? {from: last.to, to: last.to < '17:00' ? '17:00' : last.to} : {from: '09:00', to: '17:00'});
+                        drawHours(el);
+                    }
+                });
+                const offBox = el.querySelector('[data-part="daysoff"]');
+                offBox.addEventListener('input', (e) => {
+                    const row = e.target.closest('[data-i]');
+                    if (!row) return;
+                    const o = daysOff[Number(row.dataset.i)];
+                    o[e.target.dataset.k] = e.target.value;
+                    if (e.target.dataset.k === 'from' && (!o.to || o.to < o.from)) { o.to = o.from; row.querySelector('[data-k="to"]').value = o.from; }
+                });
+                offBox.addEventListener('click', (e) => {
+                    const row = e.target.closest('[data-i]');
+                    if (row && e.target.closest('[data-drop]')) { daysOff.splice(Number(row.dataset.i), 1); drawDaysOff(el); }
+                });
+            },
+            after: (el) => setTimeout(() => el.querySelector('input')?.focus(), 60),
+            methods: {
+                cancel: () => panel?.close(),
+                copyMonday() {
+                    for (const d of ['tue', 'wed', 'thu', 'fri']) hours[d] = hours.mon.map(w => ({...w}));
+                    drawHours(panel.panel);
+                },
+                addOff() {
+                    daysOff = [...daysOff, {from: boot.today, to: boot.today, label: ''}];
+                    drawDaysOff(panel.panel);
+                },
+                async save() {
+                    if (saving.peek()) return;
+                    // Say which hours are wrong rather than let the server drop them quietly.
+                    for (const d of DAY_KEYS) {
+                        for (const w of hours[d]) {
+                            if (!(toMinutes(w.to) > toMinutes(w.from))) { E.toast(`${DAY_NAMES[d]}: ${w.from || '?'}-${w.to || '?'} - the end must be after the start.`, {type: 'warning'}); return; }
+                        }
+                    }
+                    for (const o of daysOff) {
+                        if (!isDate(o.from) || !isDate(o.to) || o.to < o.from) { E.toast('Days off: each needs a start date, and an end on or after it.', {type: 'warning'}); return; }
+                    }
+                    const body = {
+                        name: f.name.peek(), kind: f.kind.peek(), description: f.description.peek(), userId: f.kind.peek() === 'person' ? f.userId.peek() : '',
+                        email: f.email.peek(), colour: f.colour.peek(), calendarBusy: bools.calendarBusy.peek(), active: bools.active.peek(), hours, daysOff
+                    };
+                    saving.value = true;
+                    try {
+                        const saved = b ? await api.bookables.update(b.id, body) : await api.bookables.create(body);
+                        replace(saved);
+                        E.toast(`${saved.name} saved.`, {type: 'success'});
+                        panel.close(true);
+                        if (!b && !boot.services.length) E.toast('Next: add a service they provide (Services).', {type: 'info', duration: 6000});
+                    } catch (err) {
+                        const errors = err?.body?.errors || {};
+                        for (const box of panel.panel.querySelectorAll('[data-err]')) { box.textContent = errors[box.dataset.err] || ''; box.hidden = !errors[box.dataset.err]; }
+                        E.toast(`Not saved: ${errText(err)}`, {type: 'error'});
+                    } finally {
+                        saving.value = false;
+                    }
+                }
+            }
+        });
+    }
+
+    if (ctx.id && here()) {
+        if (ctx.id === 'new') edit(null);
+        else if (byId(ctx.id)) edit(byId(ctx.id));
+        ctx.replaceHash('#/plugins/booking/people');
+    }
+}

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

@@ -0,0 +1,222 @@
+/**
+ * Booking › Services - what can be booked, for how long, and with whom.
+ *
+ * Rows with a right-click / ⋮ / Shift+F10 menu (Edit, Copy shortcode, Open on
+ * the booking page, Switch off / on, Delete). Click edits in a slideover.
+ * `#/plugins/booking/services/new` opens a new one; `/services/<id>` one.
+ */
+
+import {COLOUR_LABEL, api, copy, errText, esc, minutesLabel, openPanel, wireRows} from '../lib/kit.js';
+import {cleanService} from '/plugins/booking/public/lib/clean.js';
+import {mountSections} from '../lib/extension-sections.js';
+
+const ROW = `
+<div class="bk-row" data-id="{{id}}" tabindex="0">
+  <span class="bk-dot" data-bind-data-colour="colour"></span>
+  <span class="bk-main"><strong data-bind-text="name"></strong><small data-bind-text="meta"></small></span>
+  <span class="bk-chip" data-bind-class="tone" data-bind-text="state"></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} = ctx;
+    const services = M.observable(boot.services);
+    const rows = M.observable([]);
+    const bookableName = (id) => boot.bookables.find(b => b.id === id)?.name || '(removed)';
+    scope(M.effect(() => {
+        rows.value = services.value.map(s => ({
+            id: s.id, name: s.name, colour: s.colour || 'blue',
+            meta: [minutesLabel(s.duration), s.bookables.length ? `with ${s.bookables.map(bookableName).join(', ')}` : 'nobody provides it yet',
+                s.bufferBefore || s.bufferAfter ? `buffers ${s.bufferBefore || 0}/${s.bufferAfter || 0} min` : '',
+                Number(s.ext?.['booking-pro']?.capacity) > 1 ? `${s.ext['booking-pro'].capacity} places` : ''].filter(Boolean).join(' · '),
+            state: s.active === false ? 'Off' : s.public === false ? 'Staff only' : 'On the booking page',
+            tone: s.active === false ? 'is-muted' : s.public === false ? 'is-warning' : 'is-success'
+        }));
+    }));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'bk-card bk-services';
+    view.innerHTML = `
+<div class="bk-bar">
+  <button type="button" class="btn btn-sm btn-primary" data-part="add"><span data-icon="plus" data-icon-size="13"></span> New service</button>
+  <span class="bk-spacer"></span>
+  <span data-help-title="Services" data-help="What people can book: a haircut, a consultation, a meeting room for an hour. Each has a length, optional buffers either side (setting up, cleaning), and the people or rooms who provide it. Staff only services are hidden from the booking page but can be booked from the admin."></span>
+</div>
+<div class="bk-empty" data-bind-hidden="rows.value.length">
+  <span data-icon="briefcase" data-icon-size="28"></span>
+  <p><strong>No services yet.</strong><br>${boot.bookables.length ? 'Add what can be booked, for how long, and with whom.' : 'First add who or what can be booked (People &amp; rooms), then the services they provide.'}</p>
+</div>
+<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({rows}, view);
+    scope(() => bindings.dispose());
+    I.scan(view);
+
+    const byId = (id) => services.peek().find(s => s.id === id);
+    const replace = (s) => {
+        const list = services.peek();
+        services.value = list.some(x => x.id === s.id) ? list.map(x => (x.id === s.id ? s : x)) : [...list, s];
+        boot.services = services.peek();
+    };
+
+    view.querySelector('[data-part="add"]').onclick = () => edit(null);
+
+    const pageUrl = (s) => `${ctx.settings.bookingPath}/${s.slug}`;
+    wireRows(view.querySelector('.bk-list'), {
+        openMenuAt: kit.openMenuAt,
+        scope,
+        main: (id) => edit(byId(id)),
+        items: (id) => {
+            const s = byId(id);
+            if (!s) return [];
+            return [
+                {label: 'Edit', icon: 'edit', action: () => edit(s)},
+                {label: 'Copy shortcode', icon: 'copy', action: () => copy(`[booking service="${s.slug}" /]`, 'Shortcode copied')},
+                {label: 'Open on the booking page', icon: 'external-link', disabled: () => s.active === false || s.public === false,
+                    action: () => window.open(pageUrl(s), '_blank', 'noopener')},
+                {label: 'New booking…', icon: 'plus-circle', action: () => ctx.newBooking({serviceId: s.id})},
+                {type: 'divider'},
+                {label: s.active === false ? 'Switch on' : 'Switch off', icon: s.active === false ? 'eye' : 'eye-off', action: () => toggle(s)},
+                {label: 'Delete…', icon: 'trash', action: () => remove(s)}
+            ];
+        }
+    });
+
+    async function toggle(s) {
+        try {
+            replace(await api.services.update(s.id, {active: s.active === false}));
+            E.toast(`${s.name} is ${s.active === false ? 'on' : 'off'}.`, {type: 'success'});
+        } catch (err) { E.toast(`Not changed: ${errText(err)}`, {type: 'error'}); }
+    }
+
+    async function remove(s) {
+        if (!await E.confirm(`Delete the service <strong>${esc(s.name)}</strong>? Past bookings keep its name. To stop taking bookings but keep it, switch it off instead.`)) return;
+        try {
+            await api.services.remove(s.id);
+            services.value = services.peek().filter(x => x.id !== s.id);
+            boot.services = services.peek();
+            E.toast(`${s.name} deleted.`, {type: 'success'});
+        } catch (err) { E.toast(errText(err), {type: 'error', duration: 8000}); }
+    }
+
+    async function edit(s) {
+        if (!s && !boot.bookables.length) {
+            if (await E.confirm('A service needs someone or something to provide it. Add a person or room first?')) ctx.go('people', 'new');
+            return;
+        }
+        const start = s || cleanService({name: '', bookables: boot.bookables.filter(b => b.active !== false).length === 1 ? [boot.bookables.find(b => b.active !== false).id] : []}).data;
+        const f = {};
+        for (const k of ['name', 'slug', 'description', 'duration', 'bufferBefore', 'bufferAfter', 'step', 'maxAdvanceDays', 'colour']) f[k] = M.observable(start[k] ?? '');
+        const notice = Number(start.minNoticeMinutes ?? 120);
+        f.noticeAmount = M.observable(notice % 60 === 0 ? notice / 60 : notice);
+        f.noticeUnit = M.observable(notice % 60 === 0 ? 'hours' : 'minutes');
+        const bools = {chooseBookable: M.observable(start.chooseBookable !== false), public: M.observable(start.public !== false), active: M.observable(start.active !== false)};
+        const picked = new Set(start.bookables || []);
+        const saving = M.observable(false);
+        const snapshot = () => JSON.stringify([Object.values(f).map(o => o.peek()), Object.values(bools).map(o => o.peek()), [...picked].sort()]);
+        const opened = snapshot();
+        let panel = null;
+        let sections = null;
+
+        const shortcode = M.computed(() => `[booking service="${f.slug.value || '…'}" /]`);
+        panel = await openPanel({
+            title: s ? `Edit ${s.name}` : 'New service',
+            size: 'md',
+            model: {...f, saving, shortcode},
+            dirty: () => snapshot() !== opened || Boolean(sections?.dirty()),
+            cleanup: () => sections?.destroy(),
+            html: `<div class="bk-form">
+  <div class="bk-grid">
+    <div class="bk-wide"><label class="form-label">Name <span data-help-title="Name" data-help="What the customer sees on the booking page and in their emails."></span></label>
+      <input class="form-input" data-model="name.value" maxlength="80" placeholder="Consultation"><small class="bk-err" data-err="name" hidden></small></div>
+    <div class="bk-wide"><label class="form-label">Description <span class="bk-muted">(optional)</span></label>
+      <textarea class="form-input" rows="2" data-model="description.value" maxlength="1000"></textarea></div>
+    <div><label class="form-label">Length (minutes) <span data-help-title="Length" data-help="How long the booking itself lasts."></span></label>
+      <input class="form-input" type="number" min="5" max="1440" step="5" data-model="duration.value"></div>
+    <div><label class="form-label">Start every (minutes) <span data-help-title="Start every" data-help="How far apart the times offered are. 30 with a 60-minute service offers 09:00, 09:30, 10:00… Use the length itself for back-to-back slots."></span></label>
+      <input class="form-input" type="number" min="5" max="1440" step="5" data-model="step.value"></div>
+    <div><label class="form-label">Buffer before (minutes) <span data-help-title="Buffer before" data-help="Time kept free before each booking - to set up, or travel. Customers do not see it."></span></label>
+      <input class="form-input" type="number" min="0" max="480" step="5" data-model="bufferBefore.value"></div>
+    <div><label class="form-label">Buffer after (minutes) <span data-help-title="Buffer after" data-help="Time kept free after each booking - to clean a room, or write notes."></span></label>
+      <input class="form-input" type="number" min="0" max="480" step="5" data-model="bufferAfter.value"></div>
+    <div><label class="form-label">Notice needed <span data-help-title="Notice" data-help="The soonest a customer can book on the page. Staff can always book at short notice from the admin."></span></label>
+      <div class="bk-inline"><input class="form-input" type="number" min="0" data-model="noticeAmount.value">
+        <select class="form-select" data-model="noticeUnit.value"><option value="minutes">minutes</option><option value="hours">hours</option></select></div></div>
+    <div><label class="form-label">Bookable up to (days ahead) <span data-help-title="How far ahead" data-help="How far into the future the booking page offers times."></span></label>
+      <input class="form-input" type="number" min="1" max="365" data-model="maxAdvanceDays.value"></div>
+    <div class="bk-wide"><label class="form-label">Provided by <span data-help-title="Provided by" data-help="The people or rooms that can take this booking. A time is offered while any of them is free."></span></label>
+      <div class="bk-picks" data-part="picks">${boot.bookables.map(b => `<label class="bk-check"><input type="checkbox" value="${esc(b.id)}" ${picked.has(b.id) ? 'checked' : ''}> ${esc(b.name)}${b.active === false ? ' <span class="bk-muted">(off)</span>' : ''}</label>`).join('')}</div>
+      <small class="bk-err" data-err="bookables" hidden></small></div>
+    <div><label class="form-label">Colour</label>
+      <select class="form-select" data-model="colour.value">${Object.entries(COLOUR_LABEL).map(([k, v]) => `<option value="${k}">${v}</option>`).join('')}</select></div>
+    <div><label class="form-label">Web address <span data-help-title="Web address" data-help="The last part of this service's own booking page (${esc(ctx.settings.bookingPath)}/…) and of its shortcode. Made from the name if left empty."></span></label>
+      <input class="form-input" data-model="slug.value" maxlength="60"></div>
+    <div class="bk-wide bk-checks">
+      <label class="bk-check"><input type="checkbox" data-bool="active"> Taking bookings <span data-help-title="Taking bookings" data-help="Off: hidden everywhere and nothing new can be booked. Existing bookings stay."></span></label>
+      <label class="bk-check"><input type="checkbox" data-bool="public"> On the booking page <span data-help-title="On the booking page" data-help="Off: staff only - it can be booked from the admin but customers do not see it."></span></label>
+      <label class="bk-check"><input type="checkbox" data-bool="chooseBookable"> Customers choose who <span data-help-title="Customers choose who" data-help="With more than one provider, the page lets the customer pick one, or take anyone free. Off: whoever is free takes it."></span></label>
+    </div>
+    <div class="bk-wide"><label class="form-label">Put it on any page <span data-help-title="Shortcode" data-help="Paste this into a page to show this service's booking straight away. [booking /] on its own shows every service."></span></label>
+      <div class="bk-copy"><code data-bind-text="shortcode.value"></code><button type="button" class="btn btn-sm btn-ghost" data-on-click="copyCode" title="Copy"><span data-icon="copy" data-icon-size="13"></span></button></div></div>
+  </div>
+  <div class="bk-ext-host" data-part="ext"></div>
+  <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> Save</button></div>
+</div>`,
+            before: (el) => {
+                for (const box of el.querySelectorAll('[data-bool]')) {
+                    box.checked = bools[box.dataset.bool].peek();
+                    box.addEventListener('change', () => { bools[box.dataset.bool].value = box.checked; });
+                }
+                el.querySelector('[data-part="picks"]').addEventListener('change', (e) => {
+                    if (e.target.checked) picked.add(e.target.value); else picked.delete(e.target.value);
+                });
+                sections = mountSections(el.querySelector('[data-part="ext"]'), 'serviceEditor', {boot, service: s || null});
+            },
+            after: (el) => setTimeout(() => el.querySelector('input')?.focus(), 60),
+            methods: {
+                cancel: () => panel?.close(),
+                copyCode: () => copy(shortcode.peek(), 'Shortcode copied'),
+                async save() {
+                    if (saving.peek()) return;
+                    await sections?.ready;
+                    const why = sections?.validate();
+                    if (why) { E.toast(why, {type: 'warning'}); return; }
+                    const n = Number(f.noticeAmount.peek()) || 0;
+                    const body = {
+                        name: f.name.peek(), slug: f.slug.peek(), description: f.description.peek(), colour: f.colour.peek(),
+                        duration: Number(f.duration.peek()), step: Number(f.step.peek()), bufferBefore: Number(f.bufferBefore.peek()) || 0,
+                        bufferAfter: Number(f.bufferAfter.peek()) || 0, maxAdvanceDays: Number(f.maxAdvanceDays.peek()),
+                        minNoticeMinutes: f.noticeUnit.peek() === 'hours' ? n * 60 : n,
+                        bookables: [...picked], chooseBookable: bools.chooseBookable.peek(), public: bools.public.peek(), active: bools.active.peek()
+                    };
+                    const ext = sections?.values() || {};
+                    if (Object.keys(ext).length) body.ext = ext;
+                    saving.value = true;
+                    try {
+                        const saved = s ? await api.services.update(s.id, body) : await api.services.create(body);
+                        replace(saved);
+                        E.toast(`${saved.name} saved.`, {type: 'success'});
+                        panel.close(true);
+                    } catch (err) {
+                        const errors = err?.body?.errors || {};
+                        for (const box of panel.panel.querySelectorAll('[data-err]')) { box.textContent = errors[box.dataset.err] || ''; box.hidden = !errors[box.dataset.err]; }
+                        E.toast(`Not saved: ${errText(err)}`, {type: 'error'});
+                    } finally {
+                        saving.value = false;
+                    }
+                }
+            }
+        });
+    }
+
+    if (ctx.id && here()) {
+        if (ctx.id === 'new') edit(null);
+        else if (byId(ctx.id)) edit(byId(ctx.id));
+        ctx.replaceHash('#/plugins/booking/services');
+    }
+}