@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

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();