@acms-subir/core 0.3.3 → 0.3.4

package/src/pages/admin/calendar/events/index.astro

@@ -1,6 +1,9 @@
 ---
 import Admin from '../../../../layouts/Admin.astro';
 import Modal from '../../../../components/Modal.astro';
+import NewEventDialog from '../../../../components/calendar/NewEventDialog';
+import { bookingsEnabled } from '../../../../lib/calendar/config';
+import { todayIn } from '../../../../lib/calendar/board';
 import ContentList, { type ContentItem } from '../../../../components/ContentList.astro';
 import { getRepo } from '../../../../lib/repo';
 import { slugify, type Status } from '../../../../lib/schema';
@@ -16,9 +19,10 @@ import { siteLocale } from '../../../../lib/dates';
 import { waitUntilFrom } from '../../../../lib/webhooks';
 import { invalidateRedirectCache } from '../../../../middleware';
 
-// Events list: upcoming first, grouped by the month each event next happens.
-// Feed calendars (live ICS mirrors) appear as read-only rows with a "Copy"
-// action that turns one into an editable draft.
+// Schedule → List: upcoming first, grouped by the month each event next
+// happens. Subscribed calendars appear as read-only rows with a "Make an
+// editable copy" action. New events open the quick-add dialog (with its mini
+// month); subscribing lives in Calendar settings.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const repo = await getRepo(Astro.locals);
@@ -107,23 +111,6 @@ if (Astro.request.method === 'POST') {
     }
   }
 
-  // live mirror of an external calendar
-  if (op === 'subscribe') {
-    const url = normalizeCalendarSrc(String(form.get('url') || ''));
-    const name = String(form.get('name') || '').trim() || 'Imported calendar';
-    if (!url) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
-    try {
-      await loadFeed(url, now);
-    } catch (err) {
-      return back(err instanceof Error ? err.message : 'Couldn’t load that feed.');
-    }
-    const base = slugify(name);
-    let slug = base;
-    for (let n = 2; await repo.getCalendarBySlug(slug); n++) slug = `${base}-${n}`;
-    await repo.createCalendar({ name, slug, kind: 'feed', feedUrl: url, color: safeColor(String(form.get('color') || '#2f9e6e')) });
-    return back(`Subscribed to “${name}” — its events now show on your calendar.`);
-  }
-
   // one-time import: .ics / .csv file, or an ICS URL, into drafts
   if (op === 'import') {
     const calendarId = String(form.get('calendarId') || '');
@@ -221,16 +208,16 @@ if ((scope === 'upcoming' || scope === 'all') && feedCals.length) {
         const uid = uids.get(`${occ.title}|${occ.location}`) ?? '';
         items.push({
           id: `feed-${c.id}-${occ.start}`,
-          href: `/admin/calendar/calendars#cal-${c.id}`,
+          href: `/admin/calendar/settings#cal-${c.id}`,
           title: occ.title,
           sub: '',
           meta: [occ.location, `from ${c.name}`].filter(Boolean).join(' · '),
           when: occ.allDay ? f.range : f.range,
           at: occ.start,
           status: 'feed',
-          statusLabel: 'Read-only · feed',
+          statusLabel: 'Subscribed · read-only',
           readonly: true,
-          action: uid ? { label: 'Copy', fields: { op: 'copy', calendarId: c.id, uid } } : undefined,
+          action: uid ? { label: 'Make editable copy', fields: { op: 'copy', calendarId: c.id, uid } } : undefined,
         });
       }
     } catch (err) {
@@ -261,72 +248,45 @@ const tomorrowIso = `${tomorrow.y}-${String(tomorrow.m).padStart(2, '0')}-${Stri
 const subBits = [
   `${counts.upcoming} upcoming`,
   counts.drafts ? `${counts.drafts} draft${counts.drafts === 1 ? '' : 's'}` : '',
-  feedCals.length ? `${feedCals.length} feed calendar${feedCals.length === 1 ? '' : 's'}` : '',
+  feedCals.length ? `${feedCals.length} subscribed calendar${feedCals.length === 1 ? '' : 's'}` : '',
 ].filter(Boolean);
 ---
 
-<Admin title="Events" section="calendar:events">
+<Admin title="Schedule" section="calendar:schedule">
   <div class="page-head">
     <div>
-      <h1>Events</h1>
+      <h1>All events</h1>
       <p class="sub">{subBits.join(' · ')} · public at <a href={CALENDAR.base} target="_blank" rel="noopener">{CALENDAR.base}</a></p>
     </div>
     <div class="page-actions">
-      <button class="btn" type="button" data-modal="import-events">Import</button>
-      <button class="btn primary" type="button" data-modal="new-event">New event</button>
+      <nav class="seg" aria-label="View">
+        <a href="/admin/calendar">Month</a>
+        <a href="/admin/calendar?view=week">Week</a>
+        <a class="on" href="/admin/calendar/events" aria-current="page">List</a>
+      </nav>
+      <a class="btn ico" href="/admin/calendar/settings" title="Calendar settings" aria-label="Calendar settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg></a>
+      <details class="newmenu">
+        <summary class="btn primary">New <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+        <div class="newmenu-pop" role="menu">
+          <button type="button" role="menuitem" data-new-event>Event <kbd>N</kbd></button>
+          {bookingsEnabled() && <a role="menuitem" href="/admin/calendar/bookings?block=1">Block time <small>room closed, time off</small></a>}
+          <button type="button" role="menuitem" data-modal="import-events">Import events… <small>.ics or .csv</small></button>
+        </div>
+      </details>
     </div>
   </div>
 
   {notice && <p class="notice" role="status">{notice}</p>}
   {feedErrors.map((e) => <p class="notice warn">Couldn’t refresh {e}</p>)}
 
-  <Modal id="new-event" title="New event" open={Astro.url.searchParams.has('new')}>
-    <form method="post">
-      <input type="hidden" name="op" value="create" />
-      <label class="field">
-        <span>Title</span>
-        <input type="text" name="title" placeholder="Fall Festival" required autofocus />
-      </label>
-      <div class="field-row">
-        <label class="field"><span>Date</span><input type="date" name="date" value={tomorrowIso} required /></label>
-        <label class="field"><span>Time <em class="hint">blank = all day</em></span><input type="time" name="time" value="10:00" step="300" /></label>
-      </div>
-      {nativeCals.length > 0 && (
-        <label class="field">
-          <span>Calendar</span>
-          <select name="calendarId">
-            <option value="">None — main calendar only</option>
-            {nativeCals.map((c) => <option value={c.id} selected={c.id === calFilter}>{c.name}</option>)}
-          </select>
-        </label>
-      )}
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Create event</button>
-      </div>
-      <p class="hint modal-note">Creates a draft and opens the editor, where you add the image, location, button and repeat rule.</p>
-    </form>
-  </Modal>
+  <NewEventDialog client:load calendars={nativeCals.map((c) => ({ id: c.id, name: c.name, color: safeColor(c.color) }))}
+    defaultCalendarId={settings.calendar.defaultCalendarId || calFilter} weekStart={settings.calendar.weekStart} locale={locale}
+    today={todayIn(tz)} day={tomorrowIso} open={Astro.url.searchParams.has('new')} />
 
-  <Modal id="import-events" title="Bring in events">
-    <div class="seg block ev-import-tabs" role="tablist">
-      <button type="button" role="tab" aria-selected="true" data-tab="subscribe">Subscribe to a calendar</button>
-      <button type="button" role="tab" aria-selected="false" data-tab="once">Import once</button>
-    </div>
-    <form method="post" data-panel="subscribe">
-      <input type="hidden" name="op" value="subscribe" />
-      <p class="hint">Mirror a Google, Apple or Outlook calendar live. Its events show on your calendar and stay in sync, read-only.</p>
-      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Staff calendar" required /></label>
-      <label class="field"><span>Calendar link</span><input class="mono" type="text" name="url" placeholder="Google Calendar link, calendar ID, or an .ics URL" required /></label>
-      <label class="field"><span>Color</span><input type="color" name="color" value="#2f9e6e" /></label>
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Subscribe</button>
-      </div>
-    </form>
-    <form method="post" enctype="multipart/form-data" data-panel="once" hidden>
+  <Modal id="import-events" title="Import events" open={Astro.url.searchParams.has('import')}>
+    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="op" value="import" />
-      <p class="hint">Copy events in as editable drafts. Works with .ics exports from Google, Apple and Outlook, or a spreadsheet saved as .csv with Title and Start date columns.</p>
+      <p class="hint">Copy events in once, as editable drafts. Works with .ics exports from Google, Apple and Outlook, or a spreadsheet saved as .csv with Title and Start date columns. To keep a calendar in sync instead, <a href="/admin/calendar/settings?subscribe=1#subscribed">subscribe to it</a>.</p>
       <label class="field"><span>File</span><input type="file" name="file" accept=".ics,.csv,text/calendar,text/csv" /></label>
       <label class="field"><span>Or a calendar link</span><input class="mono" type="text" name="url" placeholder="https://calendar.google.com/…" /></label>
       {nativeCals.length > 0 && (
@@ -348,10 +308,9 @@ const subBits = [
   {events.length === 0 && feedCals.length === 0 ? (
     <div class="empty-state">
       <b>No events yet</b>
-      <p>Add your first event, or bring in an existing Google, Apple or Outlook calendar.</p>
+      <p>Events are things that happen on a date. Add one, or import a calendar file from Google, Apple or Outlook.</p>
       <div class="empty-actions">
-        <button class="btn" type="button" data-modal="import-events">Import</button>
-        <button class="btn primary" type="button" data-modal="new-event">New event</button>
+        <button class="btn primary" type="button" data-new-event>New event</button>
       </div>
     </div>
   ) : (
@@ -386,7 +345,7 @@ const subBits = [
       <ContentList items={items} noun="event" timeZone={settings.timezone || undefined} groupByMonth={true} empty="No events match the current filters." />
       {items.length === 0 && (
         <p class="hint" style="padding:24px 8px">
-          {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <a href="/admin/calendar/events?new=1">Add an event</a>
+          {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <button class="linklike" type="button" data-new-event>Add an event</button>
         </p>
       )}
     </>
@@ -399,10 +358,9 @@ const subBits = [
       if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
     });
   });
-  // import modal tabs
-  const tabs = document.querySelectorAll<HTMLButtonElement>('.ev-import-tabs [data-tab]');
-  tabs.forEach((t) => t.addEventListener('click', () => {
-    tabs.forEach((x) => x.setAttribute('aria-selected', String(x === t)));
-    document.querySelectorAll<HTMLElement>('#import-events [data-panel]').forEach((p) => { p.hidden = p.dataset.panel !== t.dataset.tab; });
-  }));
+  // the New ▾ menu closes like the filter menus
+  document.addEventListener('click', (e) => {
+    const m = document.querySelector<HTMLDetailsElement>('details.newmenu[open]');
+    if (m && (!(e.target instanceof Node) || !m.contains(e.target) || (e.target as Element).closest('[role=menuitem]'))) m.open = false;
+  });
 </script>

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

@@ -0,0 +1,43 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import CalendarBoard from '../../../components/calendar/CalendarBoard';
+import { getRepo } from '../../../lib/repo';
+import { CALENDAR, bookingsEnabled } from '../../../lib/calendar/config';
+import { loadBoard, todayIn } from '../../../lib/calendar/board';
+import { isIsoDay, isIsoMonth, monthWeeks, weekDays } from '../../../lib/calendar/grid';
+import { siteLocale } from '../../../lib/dates';
+
+// Schedule: the Calendar section's home — a month (or week) grid of every
+// event, draft, subscribed calendar and booking. ?m=YYYY-MM picks the month,
+// ?view=week&d=YYYY-MM-DD a week; the list lives at /admin/calendar/events.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+if (Astro.url.searchParams.get('view') === 'list') return Astro.redirect('/admin/calendar/events');
+
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const tz = settings.timezone || 'UTC';
+const today = todayIn(tz);
+const weekStart = settings.calendar.weekStart;
+const view = Astro.url.searchParams.get('view') === 'week' ? 'week' : 'month';
+const d = Astro.url.searchParams.get('d') ?? '';
+const m = Astro.url.searchParams.get('m') ?? '';
+const anchor = isIsoDay(d) ? d : isIsoMonth(m) ? `${m}-01` : today;
+const weeks = monthWeeks(anchor.slice(0, 7), weekStart);
+const [from, to] = view === 'week' ? [weekDays(anchor, weekStart)[0], weekDays(anchor, weekStart)[6]] : [weeks[0][0], weeks[weeks.length - 1][6]];
+const initial = await loadBoard(repo, settings, from, to);
+---
+
+<Admin title="Schedule" section="calendar:schedule" wide>
+  <CalendarBoard
+    client:load
+    initial={initial}
+    view={view}
+    anchor={anchor}
+    today={today}
+    weekStart={weekStart}
+    locale={siteLocale(settings)}
+    defaultCalendarId={settings.calendar.defaultCalendarId}
+    bookings={bookingsEnabled()}
+    listHref="/admin/calendar/events"
+  />
+</Admin>

package/src/pages/admin/calendar/resources/[id].astro

@@ -9,6 +9,9 @@ import { describeLink } from '../../../../lib/booking/availability';
 import { isValidTimeZone } from '../../../../lib/calendar/events';
 import { normalizeCalendarSrc } from '../../../../lib/calendar/src';
 import { siteOrigin } from '../../../../lib/seo';
+import { approvalShort, linkApproval } from '../../../../lib/booking/approval';
+import { eventHolds } from '../../../../lib/booking/holds';
+import { fmt } from '../../../../lib/booking/view';
 
 // One resource: details, weekly hours, date overrides, calendars that block
 // time, who gets notified, the staff feed, and its booking links.
@@ -53,7 +56,7 @@ if (Astro.request.method === 'POST') {
     const base = slugify(name);
     let slug = base;
     for (let n = 2; await repo.getBookingLinkBySlug(id, slug); n++) slug = `${base}-${n}`;
-    const l = await repo.createBookingLink({ resourceId: id, name, slug, autoConfirm: true });
+    const l = await repo.createBookingLink({ resourceId: id, name, slug });
     return Astro.redirect(`/admin/calendar/resources/${id}/links/${l.id}`);
   } else if (op === 'rotate') {
     await repo.updateResource(id, { feedToken: token() });
@@ -65,14 +68,17 @@ if (Astro.request.method === 'POST') {
   resource = (await repo.getResource(id))!;
 }
 const links = await repo.listBookingLinks(id);
+// events holding this room in the next 90 days (lib/booking/holds.ts)
+const holds = (await eventHolds(repo, settings, Date.now(), Date.now() + 90 * 86_400_000, id)).slice(0, 12);
+const holdFmt = fmt(settings, resource.timezone || settings.timezone || 'UTC');
 const staffFeed = origin + resourceFeedUrl(resource.slug, resource.feedToken);
 const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], label: '' }, { date: '', endDate: '', ranges: [], label: '' }];
 ---
 
-<Admin title={resource.name} section="calendar:resources">
+<Admin title={resource.name} section="calendar:bookings">
   <div class="page-head">
     <div>
-      <p class="sub"><a href="/admin/calendar/resources">Resources</a> ›</p>
+      <p class="sub"><a href="/admin/calendar/bookings">Bookings</a> › <a href="/admin/calendar/resources">Rooms &amp; people</a> ›</p>
       <h1>{resource.name}</h1>
       <p class="sub"><a href={resourceUrl(resource.slug)} target="_blank" rel="noopener">{origin.replace(/^https?:\/\//, '')}{resourceUrl(resource.slug)} ↗</a></p>
     </div>
@@ -89,7 +95,7 @@ const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], labe
           {links.map((l) => (
             <a class="res-linkrow" href={`/admin/calendar/resources/${id}/links/${l.id}`}>
               <span><b>{l.name}</b>{!l.active && <span class="pill lang">Off</span>}{l.visibility === 'unlisted' && <span class="pill lang">Unlisted</span>}</span>
-              <small>{describeLink(l)} · {l.mode === 'range' ? 'choose a length' : l.mode === 'day' ? 'whole days' : 'fixed length'} · <em class={l.autoConfirm ? 'auto' : 'manual'}>{l.autoConfirm ? 'Confirms automatically' : 'Needs approval'}</em></small>
+              <small>{describeLink(l)} · {l.mode === 'range' ? 'choose a length' : l.mode === 'day' ? 'whole days' : 'fixed length'} · {(() => { const a = linkApproval(l, settings); return <em class={a.mode === 'auto' ? 'auto' : 'manual'}>{approvalShort(a)}{a.inherited ? ' (site setting)' : ''}</em>; })()}</small>
               <code>{bookingLinkUrl(resource.slug, l.slug)}</code>
             </a>
           ))}
@@ -97,10 +103,26 @@ const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], labe
         <form method="post" class="res-newlink">
           <input type="hidden" name="op" value="link" />
           <input type="text" name="linkName" placeholder="New link, e.g. “Event or reception”" required />
-          <button class="btn" type="submit">Add link</button>
+          <button class="btn" type="submit">Add booking link</button>
         </form>
       </section>
 
+      <section class="card card-pad">
+        <div class="card-head"><b>Held by events</b><span class="hint">Events that use this {resource.kind.toLowerCase()} can’t be booked over</span></div>
+        {holds.length === 0 ? (
+          <p class="hint" style="margin:0">No events are holding it in the next 90 days. Tick it under <b>Rooms</b> in an event’s settings to hold it.</p>
+        ) : (
+          <div class="res-linklist">
+            {holds.map((h) => (
+              <a class="res-linkrow" href={`/admin/calendar/events/${h.eventId}`}>
+                <span><b>{h.title}</b></span>
+                <small>{holdFmt.day.format(h.start)} · {h.end - h.start >= 86_400_000 - 3_600_000 ? 'all day' : `${holdFmt.time.format(h.start)} – ${holdFmt.time.format(h.end)}`}</small>
+              </a>
+            ))}
+          </div>
+        )}
+      </section>
+
       <section class="card card-pad">
         <div class="card-head"><b>Open hours</b><span class="hint">The outer limit for every link</span></div>
         <HoursEditor hours={resource.hours} prefix="hours" form="res-form" note={`Times in ${resource.timezone || settings.timezone || 'UTC'}. Links can narrow these hours but never extend them.`} />

package/src/pages/admin/calendar/resources/index.astro

@@ -1,6 +1,8 @@
 ---
 import Admin from '../../../../layouts/Admin.astro';
 import Modal from '../../../../components/Modal.astro';
+import BookingsHead from '../../../../components/calendar/BookingsHead.astro';
+import { approvalShort, linkApproval } from '../../../../lib/booking/approval';
 import { getRepo } from '../../../../lib/repo';
 import { slugify } from '../../../../lib/schema';
 import { bookingsEnabled, CALENDAR, resourceUrl } from '../../../../lib/calendar/config';
@@ -9,8 +11,9 @@ import { availabilityContext } from '../../../../lib/booking/service';
 import { describeLink, nextOpenings } from '../../../../lib/booking/availability';
 import { fmt } from '../../../../lib/booking/view';
 
-// Everything people can book: rooms, people, vehicles, equipment. Each row
-// shows its booking links and when it's next free.
+// Bookings → Rooms & people: everything people can book (rooms, people,
+// vehicles, equipment). Each row shows its booking links, whether they
+// confirm instantly, and when it's next free.
 if (!bookingsEnabled()) return new Response(null, { status: 404 });
 const repo = await getRepo(Astro.locals);
 const settings = await repo.getSettings();
@@ -26,8 +29,9 @@ if (Astro.request.method === 'POST') {
     const kind = String(form.get('kind') || CALENDAR.resourceKinds[0]).slice(0, 40);
     const capacity = form.get('capacity') ? int(form.get('capacity'), 1, 100000, 1) : null;
     const r = await repo.createResource({ name, slug, kind, capacity, hours: DEFAULT_HOURS, timezone: '' });
-    // every resource starts with one ready-to-share link that confirms itself
-    await repo.createBookingLink({ resourceId: r.id, name: kind === 'Person' ? 'Meeting' : 'Book', slug: 'book', duration: 60, step: 30, autoConfirm: true });
+    // every room or person starts with one ready-to-share link that follows
+    // the site's approval setting (Calendar settings → Booking approval)
+    await repo.createBookingLink({ resourceId: r.id, name: kind === 'Person' ? 'Meeting' : 'Book', slug: 'book', duration: 60, step: 30 });
     return Astro.redirect(`/admin/calendar/resources/${r.id}?created=1`);
   }
   if (op === 'move') {
@@ -40,7 +44,7 @@ if (Astro.request.method === 'POST') {
   }
 }
 
-const [resources, links] = await Promise.all([repo.listResources(), repo.listBookingLinks()]);
+const [resources, links, pending] = await Promise.all([repo.listResources(), repo.listBookingLinks(), repo.listBookings({ from: Date.now(), statuses: ['pending'], kinds: ['booking', 'rsvp'] })]);
 const now = Date.now();
 const rows = await Promise.all(resources.map(async (r) => {
   const own = links.filter((l) => l.resourceId === r.id);
@@ -51,16 +55,11 @@ const rows = await Promise.all(resources.map(async (r) => {
 }));
 ---
 
-<Admin title="Resources" section="calendar:resources">
-  <div class="page-head">
-    <div>
-      <h1>Resources</h1>
-      <p class="sub">Rooms, people and things people can book · public list at <a href={CALENDAR.bookBase} target="_blank" rel="noopener">{CALENDAR.bookBase}</a></p>
-    </div>
-    <div class="page-actions"><button class="btn primary" type="button" data-modal="res-new">New resource</button></div>
-  </div>
+<Admin title="Rooms & people" section="calendar:bookings">
+  <BookingsHead active="rooms" pending={pending.length} rooms={resources.length}
+    sub={`What people can book, and when it’s free · public list at ${CALENDAR.bookBase}`} />
 
-  <Modal id="res-new" title="New resource" open={Astro.url.searchParams.has('new')}>
+  <Modal id="new-resource" title="New room or person" open={Astro.url.searchParams.has('new')}>
     <form method="post">
       <input type="hidden" name="op" value="create" />
       <label class="field"><span>Name</span><input type="text" name="name" placeholder="Fellowship Hall" required autofocus /></label>
@@ -69,7 +68,7 @@ const rows = await Promise.all(resources.map(async (r) => {
         <label class="field"><span>Capacity <em class="hint">optional</em></span><input type="number" name="capacity" min="1" placeholder="120" /></label>
       </div>
       <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Create</button></div>
-      <p class="hint modal-note">Starts open weekdays 9–5 with one booking link that confirms automatically. Change both on the next screen.</p>
+      <p class="hint modal-note">Starts open weekdays 9–5 with one booking link that follows your approval setting. Change both on the next screen.</p>
     </form>
   </Modal>
 
@@ -77,7 +76,7 @@ const rows = await Promise.all(resources.map(async (r) => {
     <div class="empty-state">
       <b>Nothing to book yet</b>
       <p>Add a room, a person’s time, or a piece of equipment. Each gets its own booking page and links.</p>
-      <button class="btn primary" type="button" data-modal="res-new">New resource</button>
+      <button class="btn primary" type="button" data-modal="new-resource">Add a room or person</button>
     </div>
   ) : (
     <div class="res-list">
@@ -89,7 +88,7 @@ const rows = await Promise.all(resources.map(async (r) => {
           <a class="res-main" href={`/admin/calendar/resources/${r.id}`}>
             <b>{r.name} <span class="pill lang">{r.kind}</span>{r.visibility === 'unlisted' && <span class="pill lang">Unlisted</span>}</b>
             <small>{[r.capacity ? `Up to ${r.capacity}` : '', `${own.length} link${own.length === 1 ? '' : 's'}`, next ? `next free ${next}` : 'no openings soon'].filter(Boolean).join(' · ')}</small>
-            <span class="res-links">{own.map((l) => <span class={`res-link${l.active ? '' : ' is-off'}`}>{l.name} · {describeLink(l)} · <em class={l.autoConfirm ? 'auto' : 'manual'}>{l.autoConfirm ? 'auto-confirm' : 'approval'}</em></span>)}</span>
+            <span class="res-links">{own.map((l) => { const a = linkApproval(l, settings); return <span class={`res-link${l.active ? '' : ' is-off'}`}>{l.name} · {describeLink(l)} · <em class={a.mode === 'auto' ? 'auto' : 'manual'}>{approvalShort(a)}</em></span>; })}</span>
           </a>
           <div class="cal-actions">
             <a class="icon-btn" href={resourceUrl(r.slug)} target="_blank" rel="noopener" title="View booking page" aria-label="View booking page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg></a>

package/src/pages/admin/calendar/resources/link.astro

@@ -7,9 +7,12 @@ import { bookingLinkUrl, bookingsEnabled } from '../../../../lib/calendar/config
 import { hoursFromForm, int, list, questionsFromForm } from '../../../../lib/booking/forms';
 import { describeLink } from '../../../../lib/booking/availability';
 import { siteOrigin } from '../../../../lib/seo';
+import { APPROVAL_LABEL, linkApproval, siteApproval } from '../../../../lib/booking/approval';
+import { ApprovalRules } from '../../../../lib/schema';
 
-// One booking link (mockup H): how people book, whether it confirms on its
-// own, when it's open (within the resource's hours), and what we ask.
+// One booking link: how people book, how bookings get approved (follow the
+// site setting, or its own mode + rules), when it's open (within the room or
+// person's hours), and what we ask.
 if (!bookingsEnabled()) return new Response(null, { status: 404 });
 const repo = await getRepo(Astro.locals);
 const resource = await repo.getResource(Astro.params.id!);
@@ -33,6 +36,14 @@ if (Astro.request.method === 'POST') {
   for (let n = 2; ; n++) { const hit = await repo.getBookingLinkBySlug(resource.id, slug); if (!hit || hit.id === link.id) break; slug = `${base}-${n}`; }
   const mode = (['slots', 'range', 'day'] as const).find((m) => m === form.get('mode')) ?? 'slots';
   const lengths = list(String(form.get('lengths') || '')).map((x) => Math.round(Number(x) * 60)).filter((n) => n >= 15 && n <= 1440);
+  const approval = (['default', 'auto', 'rules', 'manual'] as const).find((m) => m === form.get('approval')) ?? 'default';
+  const approvalRules = ApprovalRules.parse({
+    longerThan: form.has('ruleLonger') ? int(form.get('longerThanHours'), 1, 24 * 60, 4) * 60 : 0,
+    firstTime: form.has('ruleFirst'),
+    moreSeats: form.has('ruleSeats') ? int(form.get('moreSeats'), 1, 100000, 20) : 0,
+    deadlineHours: form.has('deadline') ? int(form.get('deadlineHours'), 1, 24 * 60, 48) : 0,
+    deadlineAction: form.get('deadlineAction') === 'decline' ? 'decline' : 'approve',
+  });
   await repo.updateBookingLink(link.id, {
     name, slug, mode: mode as BookingMode,
     description: String(form.get('description') || '').slice(0, 1000),
@@ -47,7 +58,9 @@ if (Astro.request.method === 'POST') {
     maxAdvance: int(form.get('maxAdvance'), 1, 730, 90),
     perDayCap: int(form.get('perDayCap'), 0, 100, 0),
     hours: form.get('customHours') ? hoursFromForm(form, 'lh') : null,
-    autoConfirm: Boolean(form.get('autoConfirm')),
+    approval, approvalRules,
+    // legacy flag for older API readers; approval is what decides
+    autoConfirm: linkApproval({ approval, approvalRules }, settings).mode === 'auto',
     visibility: form.get('visibility') === 'unlisted' ? 'unlisted' : 'public',
     askPhone: Boolean(form.get('askPhone')),
     questions: questionsFromForm(form),
@@ -62,12 +75,15 @@ const publicUrl = origin + bookingLinkUrl(resource.slug, link.slug);
 const embed = `<iframe src="${origin}/embed/book/${resource.slug}/${link.slug}" style="width:100%;height:620px;border:0" title="${link.name}"></iframe>`;
 const qRows = [...link.questions, ...Array.from({ length: 2 }, () => ({ id: '', label: '', type: 'text' as const, required: false, options: [] as string[], help: '' }))];
 const hours = (link.hours ?? resource.hours);
+const site = siteApproval(settings);
+const own = link.approval === 'default' ? site.rules : link.approvalRules;
+const effective = linkApproval(link, settings).mode;
 ---
 
-<Admin title={link.name} section="calendar:resources">
+<Admin title={link.name} section="calendar:bookings">
   <div class="page-head">
     <div>
-      <p class="sub"><a href="/admin/calendar/resources">Resources</a> › <a href={`/admin/calendar/resources/${resource.id}`}>{resource.name}</a> ›</p>
+      <p class="sub"><a href="/admin/calendar/bookings">Bookings</a> › <a href="/admin/calendar/resources">Rooms &amp; people</a> › <a href={`/admin/calendar/resources/${resource.id}`}>{resource.name}</a> ›</p>
       <h1>{link.name}</h1>
       <p class="sub"><a href={publicUrl} target="_blank" rel="noopener">{publicUrl.replace(/^https?:\/\//, '')} ↗</a> · {describeLink(link)}</p>
     </div>
@@ -81,11 +97,32 @@ const hours = (link.hours ?? resource.hours);
   <form method="post" id="link-form" class="res-grid">
     <input type="hidden" name="op" value="save" />
     <div>
-      <section class={`card card-pad confirm-card${link.autoConfirm ? ' is-auto' : ''}`}>
-        <label class="confirm-switch">
-          <input type="checkbox" role="switch" class="sw" name="autoConfirm" checked={link.autoConfirm} />
-          <span><b>Confirm automatically</b><small>On: bookings are confirmed right away and show on the calendar. Off: they wait in Bookings → Unconfirmed until you approve them.</small></span>
-        </label>
+      <section class="card card-pad appr" data-approval>
+        <div class="card-head"><b>Approval</b><span class="hint">What happens when someone books this link</span></div>
+        <div class="appr-choices" role="radiogroup" aria-label="Approval">
+          <label class="appr-choice"><input type="radio" name="approval" value="default" checked={link.approval === 'default'} />
+            <span><b>Use the site setting</b><small>Currently: {APPROVAL_LABEL[site.mode]}. <a href="/admin/calendar/settings#bookings">Change it</a></small></span></label>
+          <label class="appr-choice"><input type="radio" name="approval" value="auto" checked={link.approval === 'auto'} />
+            <span><b>{APPROVAL_LABEL.auto}</b><small>Booked means confirmed. It shows on your Schedule right away.</small></span></label>
+          <label class="appr-choice"><input type="radio" name="approval" value="rules" checked={link.approval === 'rules'} />
+            <span><b>{APPROVAL_LABEL.rules}</b><small>Confirm most bookings at once; hold unusual ones for you.</small></span></label>
+          <label class="appr-choice"><input type="radio" name="approval" value="manual" checked={link.approval === 'manual'} />
+            <span><b>{APPROVAL_LABEL.manual}</b><small>Every booking waits under Needs approval.</small></span></label>
+        </div>
+        <fieldset class="appr-rules" data-rules hidden={link.approval !== 'rules'}>
+          <legend>Ask me first when a booking is…</legend>
+          <label class="appr-check"><input type="checkbox" name="ruleLonger" checked={own.longerThan > 0} /> longer than <input type="number" name="longerThanHours" min="1" max="1440" value={own.longerThan ? Math.round(own.longerThan / 60) : 4} /> hours</label>
+          <label class="appr-check"><input type="checkbox" name="ruleFirst" checked={own.firstTime} /> the first booking from that email address</label>
+          <label class="appr-check"><input type="checkbox" name="ruleSeats" checked={own.moreSeats > 0} /> for more than <input type="number" name="moreSeats" min="1" max="100000" value={own.moreSeats || 20} /> people</label>
+        </fieldset>
+        <div class="appr-deadline" data-deadline hidden={link.approval === 'default' || link.approval === 'auto'}>
+          <label class="appr-check"><input type="checkbox" name="deadline" checked={own.deadlineHours > 0} /> If I haven’t answered in <input type="number" name="deadlineHours" min="1" max="1440" value={own.deadlineHours || 48} /> hours,</label>
+          <select name="deadlineAction" aria-label="What happens then">
+            <option value="approve" selected={own.deadlineAction === 'approve'}>approve it</option>
+            <option value="decline" selected={own.deadlineAction === 'decline'}>decline it</option>
+          </select>
+        </div>
+        <p class="hint appr-now">Right now this link {effective === 'auto' ? 'confirms every booking instantly' : effective === 'rules' ? 'confirms most bookings instantly' : 'holds every booking for approval'}.</p>
       </section>
 
       <section class="card card-pad">
@@ -175,8 +212,11 @@ const hours = (link.hours ?? resource.hours);
     const mode = (form.querySelector<HTMLInputElement>('input[name=mode]:checked')?.value) ?? 'slots';
     form.querySelectorAll<HTMLElement>('.mode-seg label').forEach((l) => l.classList.toggle('on', l.querySelector('input')?.checked ?? false));
     form.querySelectorAll<HTMLElement>('.mode-fields [data-mode]').forEach((el) => { el.hidden = !(el.dataset.mode ?? '').split(' ').includes(mode); });
-    const auto = form.querySelector<HTMLInputElement>('input[name=autoConfirm]');
-    form.querySelector('.confirm-card')?.classList.toggle('is-auto', Boolean(auto?.checked));
+    const appr = (form.querySelector<HTMLInputElement>('input[name=approval]:checked')?.value) ?? 'default';
+    const rules = form.querySelector<HTMLElement>('[data-rules]');
+    const deadline = form.querySelector<HTMLElement>('[data-deadline]');
+    if (rules) rules.hidden = appr !== 'rules';
+    if (deadline) deadline.hidden = appr === 'default' || appr === 'auto';
   };
   form.addEventListener('change', (e) => {
     sync();