@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/admin/calendar/bookings.astro

@@ -0,0 +1,400 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import Modal from '../../../components/Modal.astro';
+import { getRepo } from '../../../lib/repo';
+import type { Booking, BookingStatus } from '../../../lib/schema';
+import { bookingsEnabled, eventUrl } from '../../../lib/calendar/config';
+import { createBlock, createResourceBooking, rescheduleBooking, setBookingStatus, BookingError } from '../../../lib/booking/service';
+import { addDaysYmd, localMidnight, ymd } from '../../../lib/booking/availability';
+import { fmt } from '../../../lib/booking/view';
+import { emailProvider } from '../../../lib/email';
+import { siteOrigin } from '../../../lib/seo';
+import { waitUntilFrom } from '../../../lib/webhooks';
+
+// Bookings (mockup I): Cal.com-style tabs, an agenda by day with pending
+// requests first, a Day view with one column per resource, a details panel
+// (?b=<id>) with private notes, plus Block time and Add booking.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const tz = settings.timezone || 'UTC';
+const f = fmt(settings, tz);
+const origin = siteOrigin(settings, Astro.url);
+const flow = { origin, locals: Astro.locals, waitUntil: waitUntilFrom(Astro.locals) };
+const now = Date.now();
+const [resources, links, events] = await Promise.all([repo.listResources(), repo.listBookingLinks(), repo.listEvents()]);
+const resById = new Map(resources.map((r) => [r.id, r]));
+const linkById = new Map(links.map((l) => [l.id, l]));
+const evById = new Map(events.map((e) => [e.id, e]));
+const toMs = (date: string, time: string) => {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || !/^\d{2}:\d{2}$/.test(time)) return NaN;
+  const [h, m] = time.split(':').map(Number);
+  return localMidnight(date, tz) + (h * 60 + m) * 60_000;
+};
+const keep = (patch: Record<string, string | null>) => {
+  const p = new URLSearchParams(Astro.url.search);
+  for (const [k, v] of Object.entries(patch)) v === null || v === '' ? p.delete(k) : p.set(k, v);
+  const s = p.toString();
+  return `/admin/calendar/bookings${s ? `?${s}` : ''}`;
+};
+let notice = Astro.url.searchParams.get('notice') ?? '';
+let error = '';
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  const id = String(form.get('id') || '');
+  try {
+    if (op === 'status') {
+      const b = await repo.getBooking(id);
+      if (!b) throw new BookingError(404, 'Booking not found.');
+      await setBookingStatus(repo, b, String(form.get('to')) as BookingStatus, flow, String(form.get('message') || '') || undefined);
+      return Astro.redirect(keep({ notice: form.get('to') === 'confirmed' ? 'Confirmed — it’s on the calendar and the guest was emailed.' : 'Updated.' }));
+    }
+    if (op === 'notes') {
+      await repo.updateBooking(id, { notes: String(form.get('notes') || '').slice(0, 4000) });
+      return Astro.redirect(keep({ notice: 'Notes saved.' }));
+    }
+    if (op === 'delete') {
+      await repo.deleteBooking(id);
+      return Astro.redirect(keep({ b: null, notice: 'Removed.' }));
+    }
+    if (op === 'reschedule') {
+      const b = await repo.getBooking(id);
+      if (!b) throw new BookingError(404, 'Booking not found.');
+      const start = toMs(String(form.get('date')), String(form.get('time')));
+      if (Number.isNaN(start)) throw new BookingError(400, 'Pick a date and time.');
+      await rescheduleBooking(repo, b, start, start + (b.end - b.start), { ...flow, skipRules: true });
+      return Astro.redirect(keep({ notice: 'Moved, and the guest was emailed.' }));
+    }
+    if (op === 'block') {
+      const r = resById.get(String(form.get('resourceId')));
+      const date = String(form.get('date'));
+      const allDay = Boolean(form.get('allDay'));
+      const start = allDay ? localMidnight(date, tz) : toMs(date, String(form.get('start')));
+      const end = allDay ? localMidnight(addDaysYmd(date, 1), tz) : toMs(date, String(form.get('end')));
+      if (!r || Number.isNaN(start) || Number.isNaN(end)) throw new BookingError(400, 'Choose a resource, date and times.');
+      const b = await createBlock(repo, r, start, end, String(form.get('note') || ''));
+      if (!b) throw new BookingError(409, 'That time already has a booking — cancel or move it first.');
+      return Astro.redirect(keep({ notice: `${r.name} is blocked.` }));
+    }
+    if (op === 'add') {
+      const link = linkById.get(String(form.get('linkId')));
+      const r = link ? resById.get(link.resourceId) : undefined;
+      if (!link || !r) throw new BookingError(400, 'Choose a booking link.');
+      const start = toMs(String(form.get('date')), String(form.get('time')));
+      if (Number.isNaN(start)) throw new BookingError(400, 'Pick a date and time.');
+      const len = link.mode === 'range' && link.lengths.length ? Number(form.get('len')) || link.lengths[0] : link.mode === 'day' ? 1440 : link.duration;
+      const b = await createResourceBooking(repo, {
+        resource: r, link, start, end: start + len * 60_000, source: 'admin', status: 'confirmed',
+        booker: { name: String(form.get('name') || ''), email: String(form.get('email') || ''), phone: String(form.get('phone') || '') },
+      }, flow);
+      return Astro.redirect(keep({ b: b.id, notice: 'Booking added and confirmed.' }));
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Something went wrong.';
+  }
+}
+
+// ---- data ----
+const tab = (['upcoming', 'unconfirmed', 'past', 'cancelled'] as const).find((t) => t === Astro.url.searchParams.get('tab')) ?? 'upcoming';
+const view = Astro.url.searchParams.get('view') === 'day' ? 'day' : 'agenda';
+const resFilter = Astro.url.searchParams.get('r') ?? '';
+const q = (Astro.url.searchParams.get('q') ?? '').trim().toLowerCase();
+const all = await repo.listBookings({ from: now - 400 * 86_400_000 });
+const titleOf = (b: Booking) =>
+  b.kind === 'block' ? `Blocked${b.notes ? ` · ${b.notes}` : ''}`
+  : b.kind === 'rsvp' ? b.name
+  : b.name || 'Booking';
+const contextOf = (b: Booking) =>
+  b.kind === 'rsvp' ? `RSVP · ${evById.get(b.eventId)?.title ?? 'event'}${b.seats > 1 ? ` · ${b.seats} seats` : ''}`
+  : [linkById.get(b.linkId)?.name, ...Object.values(b.answers).slice(0, 2)].filter(Boolean).join(' · ');
+const where = (b: Booking) => (b.kind === 'rsvp' ? evById.get(b.eventId)?.location.name || 'Event' : resById.get(b.resourceId)?.name ?? '—');
+const matches = (b: Booking) =>
+  (!resFilter || b.resourceId === resFilter) &&
+  (!q || `${b.name} ${b.email} ${b.phone} ${where(b)} ${contextOf(b)}`.toLowerCase().includes(q));
+const active = (b: Booking) => b.status === 'pending' || b.status === 'confirmed';
+const counts = {
+  upcoming: all.filter((b) => active(b) && b.end > now && matches(b)).length,
+  unconfirmed: all.filter((b) => b.status === 'pending' && b.end > now && matches(b)).length,
+  past: all.filter((b) => active(b) && b.end <= now && matches(b)).length,
+  cancelled: all.filter((b) => !active(b) && matches(b)).length,
+};
+const list = all
+  .filter(matches)
+  .filter((b) => tab === 'upcoming' ? active(b) && b.end > now : tab === 'unconfirmed' ? b.status === 'pending' && b.end > now : tab === 'past' ? active(b) && b.end <= now : !active(b))
+  .sort((a, b) => (tab === 'past' || tab === 'cancelled' ? b.start - a.start : a.start - b.start))
+  .slice(0, 300);
+if (Astro.url.searchParams.get('format') === 'csv') {
+  const cell = (v: string) => (/[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+  const iso = (ms: number) => new Date(ms).toISOString();
+  const keys = [...new Set(list.flatMap((b) => Object.keys(b.answers)))];
+  const rows = [
+    ['Start', 'End', 'Status', 'Kind', 'Resource / event', 'Link', 'Name', 'Email', 'Phone', 'Seats', ...keys, 'Notes', 'Booked'],
+    ...list.map((b) => [iso(b.start), iso(b.end), b.status, b.kind, where(b), linkById.get(b.linkId)?.name ?? '', b.name, b.email, b.phone, String(b.seats), ...keys.map((k) => b.answers[k] ?? ''), b.notes, iso(b.createdAt)]),
+  ];
+  return new Response(rows.map((r) => r.map(cell).join(',')).join('\n'), {
+    headers: { 'Content-Type': 'text/csv; charset=utf-8', 'Content-Disposition': `attachment; filename="bookings-${tab}.csv"` },
+  });
+}
+const pending = tab === 'upcoming' ? list.filter((b) => b.status === 'pending') : [];
+const agendaItems = tab === 'upcoming' ? list.filter((b) => b.status !== 'pending') : list;
+const days = new Map<string, Booking[]>();
+for (const b of agendaItems) {
+  const k = ymd(b.start, tz);
+  days.set(k, [...(days.get(k) ?? []), b]);
+}
+const week = all.filter((b) => active(b) && b.start >= now && b.start < now + 7 * 86_400_000).length;
+const cancelled30 = all.filter((b) => b.status === 'cancelled' && b.updatedAt > now - 30 * 86_400_000).length;
+
+// day view
+const day = /^\d{4}-\d{2}-\d{2}$/.test(Astro.url.searchParams.get('d') ?? '') ? Astro.url.searchParams.get('d')! : ymd(now, tz);
+const dayStart = localMidnight(day, tz);
+const dayEnd = localMidnight(addDaysYmd(day, 1), tz);
+const dayCols = resources.filter((r) => !resFilter || r.id === resFilter).map((r) => ({
+  r, items: all.filter((b) => b.resourceId === r.id && active(b) && b.start < dayEnd && b.end > dayStart),
+}));
+const H0 = 7, H1 = 22;
+const pos = (b: Booking) => {
+  const s = Math.max(b.start, dayStart), e = Math.min(b.end, dayEnd);
+  const top = ((s - dayStart) / 3_600_000 - H0) / (H1 - H0) * 100;
+  const h = ((e - s) / 3_600_000) / (H1 - H0) * 100;
+  return `top:${Math.max(0, top)}%;height:${Math.max(3, Math.min(100 - Math.max(0, top), h))}%`;
+};
+
+const selected = Astro.url.searchParams.get('b') ? await repo.getBooking(Astro.url.searchParams.get('b')!) : null;
+const provider = emailProvider(Astro.locals);
+const TABS = [['upcoming', 'Upcoming'], ['unconfirmed', 'Unconfirmed'], ['past', 'Past'], ['cancelled', 'Cancelled']] as const;
+const statusLabel = (b: Booking) => (b.kind === 'block' ? 'Blocked' : b.status[0].toUpperCase() + b.status.slice(1));
+const whenOf = (b: Booking) => (b.end - b.start >= 86_400_000 - 3_600_000 && ymd(b.start, tz) !== ymd(b.end - 1, tz)
+  ? `${f.day.format(b.start)} – ${f.day.format(b.end - 1)}`
+  : b.end - b.start >= 86_400_000 - 3_600_000 ? 'All day' : `${f.time.format(b.start)} – ${f.time.format(b.end)}`);
+const today = ymd(now, tz);
+const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
+---
+
+<Admin title="Bookings" section="calendar:bookings" wide={view === 'day'}>
+  <div class="page-head">
+    <div>
+      <h1>Bookings</h1>
+      <p class="sub">{counts.unconfirmed ? `${counts.unconfirmed} waiting for approval · ` : ''}{week} in the next 7 days</p>
+    </div>
+    <div class="page-actions">
+      <nav class="seg" aria-label="View">
+        <a class={view === 'agenda' ? 'on' : ''} href={keep({ view: null })}>Agenda</a>
+        <a class={view === 'day' ? 'on' : ''} href={keep({ view: 'day' })}>Day</a>
+      </nav>
+      <a class="btn" href={keep({ format: 'csv', b: null, notice: null })}>Export</a>
+      <button class="btn" type="button" data-modal="bk-block" disabled={!resources.length}>Block time</button>
+      <button class="btn primary" type="button" data-modal="bk-add" disabled={!activeLinks.length}>Add booking</button>
+    </div>
+  </div>
+  {notice && <p class="notice" role="status">{notice}</p>}
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {provider === 'none' && <p class="notice"><span>Emails are off — set <code>EMAIL_FROM</code> plus <code>RESEND_API_KEY</code> (or a Cloudflare <code>send_email</code> binding named EMAIL) so guests get confirmations and reminders.</span></p>}
+
+  {resources.length === 0 && !all.length ? (
+    <div class="empty-state">
+      <b>No bookings yet</b>
+      <p>Add a room or a person under Resources, share its booking link, and bookings land here.</p>
+      <a class="btn primary" href="/admin/calendar/resources?new=1">New resource</a>
+    </div>
+  ) : (
+  <>
+    <div class="bk-kpis kpis">
+      <div class="kpi"><small>Waiting for approval</small><b>{counts.unconfirmed}</b></div>
+      <div class="kpi"><small>Next 7 days</small><b>{week}</b></div>
+      <div class="kpi"><small>Today</small><b>{all.filter((b) => active(b) && ymd(b.start, tz) === today).length}</b></div>
+      <div class="kpi"><small>Cancelled · 30 days</small><b>{cancelled30}</b></div>
+    </div>
+
+    <div class="list-tools">
+      <div class="list-lead">
+        {view === 'agenda' ? (
+          <nav class="seg" aria-label="Show">
+            {TABS.map(([k, l]) => <a class={tab === k ? 'on' : ''} href={keep({ tab: k === 'upcoming' ? null : k, b: null })}>{l}{counts[k] > 0 && k === 'unconfirmed' ? ` · ${counts[k]}` : ''}</a>)}
+          </nav>
+        ) : (
+          <nav class="seg" aria-label="Day">
+            <a href={keep({ d: addDaysYmd(day, -1) })} aria-label="Previous day">‹</a>
+            <a class="on" href={keep({ d: today })}>{day === today ? 'Today' : f.day.format(dayStart + 12 * 3_600_000)}</a>
+            <a href={keep({ d: addDaysYmd(day, 1) })} aria-label="Next day">›</a>
+          </nav>
+        )}
+        <form method="get" class="list-search" role="search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
+          {[...Astro.url.searchParams.entries()].filter(([k]) => !['q', 'notice', 'b'].includes(k)).map(([k, v]) => <input type="hidden" name={k} value={v} />)}
+          <input type="search" name="q" value={q} placeholder="Name, email, room…" aria-label="Search bookings" />
+        </form>
+      </div>
+      {resources.length > 1 && (
+        <details class={`fmenu ${resFilter ? 'is-set' : ''}`}>
+          <summary>{resFilter ? resById.get(resFilter)?.name : 'All resources'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></summary>
+          <div class="fmenu-pop">
+            <a class={!resFilter ? 'on' : ''} href={keep({ r: null })}>All resources</a>
+            {resources.map((r) => <a class={resFilter === r.id ? 'on' : ''} href={keep({ r: r.id })}>{r.name}</a>)}
+          </div>
+        </details>
+      )}
+    </div>
+
+    <div class={`bk-layout${selected ? ' has-panel' : ''}`}>
+      <div class="bk-main">
+        {view === 'day' ? (
+          <div class="bk-day" style={`--cols:${Math.max(1, dayCols.length)}`}>
+            <div class="bk-day-head"><span />{dayCols.map((c) => <b>{c.r.name}</b>)}</div>
+            <div class="bk-day-body">
+              <div class="bk-day-hours">{Array.from({ length: H1 - H0 }, (_, i) => <span>{f.time.format(dayStart + (H0 + i) * 3_600_000).replace(':00', '')}</span>)}</div>
+              {dayCols.map((c) => (
+                <div class="bk-day-col">
+                  {c.items.map((b) => (
+                    <a class={`bk-blk is-${b.kind === 'block' ? 'block' : b.status}`} style={pos(b)} href={keep({ b: b.id })}>
+                      <b>{titleOf(b)}</b><small>{whenOf(b)}</small>
+                    </a>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <>
+            {pending.length > 0 && (
+              <section class="card bk-group">
+                <div class="bk-dayh"><b>Needs a decision</b><span>{pending.length}</span></div>
+                {pending.map((b) => (
+                  <div class={`bk-row${selected?.id === b.id ? ' is-sel' : ''}`}>
+                    <a class="bk-when" href={keep({ b: b.id })}>{f.day.format(b.start)}<small>{whenOf(b)}</small></a>
+                    <a class="bk-who" href={keep({ b: b.id })}><b>{titleOf(b)}</b><small>{contextOf(b)}</small></a>
+                    <span class="bk-res">{where(b)}</span>
+                    <form method="post" class="bk-acts">
+                      <input type="hidden" name="op" value="status" /><input type="hidden" name="id" value={b.id} />
+                      <button class="btn sm" name="to" value="declined">Decline</button>
+                      <button class="btn sm primary" name="to" value="confirmed">Confirm</button>
+                    </form>
+                  </div>
+                ))}
+              </section>
+            )}
+            {[...days.entries()].map(([k, items]) => (
+              <section class="card bk-group">
+                <div class="bk-dayh"><b>{k === today ? 'Today · ' : ''}{f.dayLong.format(items[0].start)}</b><span>{items.length}</span></div>
+                {items.map((b) => (
+                  <a class={`bk-row${selected?.id === b.id ? ' is-sel' : ''}`} href={keep({ b: b.id })}>
+                    <span class="bk-when">{whenOf(b)}</span>
+                    <span class="bk-who"><b>{titleOf(b)}</b><small>{contextOf(b)}</small></span>
+                    <span class="bk-res">{where(b)}</span>
+                    <span class={`status bk-st is-${b.kind === 'block' ? 'block' : b.status}`}>{statusLabel(b)}</span>
+                  </a>
+                ))}
+              </section>
+            ))}
+            {!list.length && <p class="hint" style="padding:24px 8px">{tab === 'unconfirmed' ? 'Nothing waiting — auto-confirm links never land here.' : 'No bookings here.'}</p>}
+          </>
+        )}
+      </div>
+
+      {selected && (() => {
+        const b = selected;
+        const r = resById.get(b.resourceId);
+        const l = linkById.get(b.linkId);
+        const ev = evById.get(b.eventId);
+        return (
+          <aside class="card bk-panel" aria-label="Booking details">
+            <div class="bk-panel-head"><span class={`status bk-st is-${b.kind === 'block' ? 'block' : b.status}`}>{statusLabel(b)}</span><a class="icon-btn" href={keep({ b: null })} aria-label="Close">✕</a></div>
+            <h2>{titleOf(b)}</h2>
+            <p class="bk-panel-when">{f.dayLong.format(b.start)} · {whenOf(b)}</p>
+            <dl class="bk-dl">
+              {b.kind !== 'block' && b.email && <div><dt>Email</dt><dd><a href={`mailto:${b.email}`}>{b.email}</a></dd></div>}
+              {b.phone && <div><dt>Phone</dt><dd><a href={`tel:${b.phone}`}>{b.phone}</a></dd></div>}
+              <div><dt>{ev ? 'Event' : 'Where'}</dt><dd>{ev ? <a href={eventUrl(ev.slug)} target="_blank" rel="noopener">{ev.title}</a> : r?.name ?? '—'}{l ? ` · ${l.name}` : ''}</dd></div>
+              {b.seats > 1 && <div><dt>Seats</dt><dd>{b.seats}</dd></div>}
+              {Object.entries(b.answers).map(([k, v]) => <div><dt>{k}</dt><dd>{v}</dd></div>)}
+              <div><dt>Booked</dt><dd>{f.day.format(b.createdAt)} · {b.source}</dd></div>
+            </dl>
+            <form method="post" class="bk-notes">
+              <input type="hidden" name="op" value="notes" /><input type="hidden" name="id" value={b.id} />
+              <label class="field"><span>Private notes</span><textarea name="notes" rows="3" placeholder="Only staff see these">{b.notes}</textarea></label>
+              <button class="btn sm" type="submit">Save notes</button>
+            </form>
+            {b.kind !== 'block' && (b.status === 'pending' || b.status === 'confirmed') && b.end > now && (
+              <>
+                {b.status === 'pending' && (
+                  <form method="post" class="bk-panel-acts">
+                    <input type="hidden" name="op" value="status" /><input type="hidden" name="id" value={b.id} />
+                    <label class="field"><span>Message to the guest <em class="hint">optional</em></span><input type="text" name="message" placeholder="See you then! / Sorry, the hall is taken that day." /></label>
+                    <div><button class="btn" name="to" value="declined">Decline</button> <button class="btn primary" name="to" value="confirmed">Confirm</button></div>
+                  </form>
+                )}
+                {b.kind === 'booking' && (
+                  <details class="bk-resched">
+                    <summary>Reschedule</summary>
+                    <form method="post">
+                      <input type="hidden" name="op" value="reschedule" /><input type="hidden" name="id" value={b.id} />
+                      <div class="field-row"><input type="date" name="date" value={ymd(b.start, tz)} required /><input type="time" name="time" value={new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: tz }).format(b.start)} required /></div>
+                      <button class="btn sm" type="submit">Move and email the guest</button>
+                    </form>
+                  </details>
+                )}
+                <form method="post">
+                  <input type="hidden" name="op" value="status" /><input type="hidden" name="id" value={b.id} /><input type="hidden" name="to" value="cancelled" />
+                  <button class="btn sm danger ghost" type="submit" data-confirm="Cancel this booking and email the guest?">Cancel booking</button>
+                </form>
+              </>
+            )}
+            {(b.kind === 'block' || !(b.status === 'pending' || b.status === 'confirmed')) && (
+              <form method="post">
+                <input type="hidden" name="op" value="delete" /><input type="hidden" name="id" value={b.id} />
+                <button class="btn sm danger ghost" type="submit" data-confirm="Remove this entry for good?">{b.kind === 'block' ? 'Remove block' : 'Delete record'}</button>
+              </form>
+            )}
+          </aside>
+        );
+      })()}
+    </div>
+  </>
+  )}
+
+  <Modal id="bk-block" title="Block time">
+    <form method="post">
+      <input type="hidden" name="op" value="block" />
+      <label class="field"><span>Resource</span><select name="resourceId">{resources.map((r) => <option value={r.id} selected={r.id === resFilter}>{r.name}</option>)}</select></label>
+      <div class="field-row three">
+        <label class="field"><span>Date</span><input type="date" name="date" value={day} required /></label>
+        <label class="field"><span>From</span><input type="time" name="start" value="09:00" /></label>
+        <label class="field"><span>To</span><input type="time" name="end" value="12:00" /></label>
+      </div>
+      <label class="check-row"><input type="checkbox" name="allDay" /> Whole day</label>
+      <label class="field"><span>Note</span><input type="text" name="note" placeholder="Painting, staff retreat…" /></label>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Block</button></div>
+    </form>
+  </Modal>
+
+  <Modal id="bk-add" title="Add booking">
+    <form method="post">
+      <input type="hidden" name="op" value="add" />
+      <label class="field"><span>Booking link</span><select name="linkId">{activeLinks.map((l) => <option value={l.id}>{resById.get(l.resourceId)?.name} · {l.name}</option>)}</select></label>
+      <div class="field-row three">
+        <label class="field"><span>Date</span><input type="date" name="date" value={day} required /></label>
+        <label class="field"><span>Time</span><input type="time" name="time" value="10:00" required /></label>
+        <label class="field"><span>Length (min) <em class="hint">range links</em></span><input type="number" name="len" min="15" step="15" placeholder="auto" /></label>
+      </div>
+      <div class="field-row">
+        <label class="field"><span>Name</span><input type="text" name="name" required /></label>
+        <label class="field"><span>Email</span><input type="email" name="email" required /></label>
+      </div>
+      <label class="field"><span>Phone <em class="hint">optional</em></span><input type="tel" name="phone" /></label>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add and confirm</button></div>
+      <p class="hint modal-note">Staff bookings skip notice windows but can never overlap another booking.</p>
+    </form>
+  </Modal>
+</Admin>
+
+<script>
+  document.addEventListener('click', (e) => {
+    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (c && !confirm(c.dataset.confirm)) e.preventDefault();
+    document.querySelectorAll<HTMLDetailsElement>('details.fmenu[open]').forEach((d) => {
+      if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
+    });
+  });
+</script>