feat: add waitlist option for icbd activities, and various icbd fixes

docker-compose.yaml

@@ -21,6 +21,3 @@ services:
       - ./Caddyfile.dev:/etc/caddy/Caddyfile
     ports:
       - 80:80
-
-volumes:
-  database:

src/actions/common-client.tsx

@@ -3,7 +3,7 @@
 import CalendarIcon from '@/components/icons/CalendarIcon';
 import MapPinIcon from '@/components/icons/MapPinIcon';
 import PriceIcon from '@/components/icons/PriceIcon';
-import { Event } from '@/types/aliases';
+import { Event, Registration } from '@/types/aliases';
 import { ElementType, ReactNode } from 'react';
 import { emailAlreadyUsed } from './common-server';
 
@@ -200,3 +200,7 @@ export function makeInfoItems(
     [PriceIcon, isDeposit ? formatDeposit(event) : formatPrice(event)],
   ];
 }
+
+export function registrationSearchKey(participant: Registration) {
+  return `${participant.first_name} ${participant.family_name} ${participant.email}`.toLowerCase();
+}

src/actions/icbd-types.tsx

@@ -17,4 +17,5 @@ export interface ICBDInterviewStatus {
   activity: ICBDActivityInfo;
   timeslot?: ICBDTimeslot | null; // currently assigned timeslot
   availableTimeslots?: ICBDTimeslot[];
+  waitlist: boolean;
 }

src/actions/icbd.tsx

@@ -40,7 +40,7 @@ export async function sendICBDActivitiesRegistrations({
         icbd_activity: a,
         registration,
         start: a.timeslots[0].start_time,
-        attended: false,
+        attended: true,
       };
     });
 
@@ -178,6 +178,7 @@ export async function getICBDInterviewsForParticipant(
         },
         timeslot,
         availableTimeslots,
+        waitlist: reg.waitlist,
       };
     })
     .filter((r) => r !== null);
@@ -194,7 +195,8 @@ export async function getICBDInterviewsForParticipant(
 export async function updateICBDInterviewTimeslot(
   registrationId: string,
   activityId: number,
-  timeslot: ICBDTimeslot | null
+  timeslot: ICBDTimeslot | null,
+  waitlist: boolean
 ) {
   const registrations = await directus().request(
     readItems('icbd_activities_registrations', {
@@ -217,6 +219,7 @@ export async function updateICBDInterviewTimeslot(
   await directus().request(
     updateItem('icbd_activities_registrations', reg.id, {
       start: timeslot ? timeslot.start_time : null,
+      waitlist,
     })
   );
 }

src/app/[eventSlug]/[admin]/attendance/Attendance.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatTime } from '@/actions/common-client';
+import { formatTime, registrationSearchKey } from '@/actions/common-client';
 import { markAttendance } from '@/actions/icbd';
 import Card from '@/components/Card';
 import DropdownCard from '@/components/DropdownCard';
@@ -97,7 +97,9 @@ export default function Attendance({
                 )
                 .map((r) => ({
                   value: (r.registration as Registration).id,
-                  searchValue: (r.registration as Registration).email,
+                  searchValue: registrationSearchKey(
+                    r.registration as Registration
+                  ),
                   component: (
                     <AttendanceDisplay
                       email={(r.registration as Registration).email}

src/app/[eventSlug]/[admin]/checkin/CheckIn.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { registrationSearchKey } from '@/actions/common-client';
 import { renderCheckinDialog } from '@/components/dialogs/CheckinDialog';
 import ParticipantDisplay from '@/components/ParticipantDisplay';
 import QRScannerSelector from '@/components/QRScannerSelector';
@@ -30,7 +31,7 @@ export function CheckIn({
       <QRScannerSelector
         items={participants.map((p) => ({
           component: <ParticipantDisplay event={event} participant={p} />,
-          searchValue: `${p.first_name} ${p.family_name} ${p.email}`,
+          searchValue: registrationSearchKey(p),
           value: p.id,
         }))}
         onSelect={() => {}}

src/components/CheckinBlock.tsx

@@ -77,8 +77,12 @@ export function CheckinBlock({
         <CheckCircleIcon className="icon" />
         {requiresPayment && participant.payment !== null
           ? participant.checked_in
-            ? 'Already paid & checked in'
-            : `Already paid by ${formatPaymentMethod(participant.payment)}`
+            ? participant.payment == 'not-needed'
+              ? 'Checked in & No Payment Needed'
+              : `Checked in & Paid by ${formatPaymentMethod(participant.payment)}`
+            : participant.payment == 'not-needed'
+              ? 'Payment not needed'
+              : `Already paid by ${formatPaymentMethod(participant.payment)}`
           : participant.checked_in
             ? 'Already checked in'
             : 'Ready to check in'}

src/components/QRScannerSelector.tsx

@@ -31,7 +31,9 @@ export default function QRScannerSelector({
     }
 
     setFilteredEntries(
-      items.filter((i) => i.searchValue.includes(filter)).slice(0, 5)
+      items
+        .filter((i) => i.searchValue.includes(filter.toLocaleLowerCase()))
+        .slice(0, 5)
     );
   }, [filter, items]);
 

src/components/SearchSelector.tsx

@@ -30,7 +30,9 @@ export default function SearchSelector({
     }
 
     setFilteredEntries(
-      items.filter((i) => i.searchValue.includes(filter)).slice(0, 5)
+      items
+        .filter((i) => i.searchValue.includes(filter.toLocaleLowerCase()))
+        .slice(0, 5)
     );
   }, [filter, items]);
 

src/components/dialogs/ICBDCheckinDialog.tsx

@@ -11,8 +11,10 @@ import {
 } from '@/actions/icbd-types';
 import { useEffect, useState } from 'react';
 import Card from '../Card';
+import CheckboxCard from '../CheckboxCard';
 import { CheckinBlock } from '../CheckinBlock';
 import DropdownCard from '../DropdownCard';
+import ErrorMessage from '../ErrorMessage';
 import Split from '../Split';
 import CheckCircleIcon from '../icons/CheckCircleIcon';
 import ClockIcon from '../icons/ClockIcon';
@@ -39,6 +41,10 @@ export function ICBDCheckinDialog({
   const [selectedSlots, setSelectedSlots] = useState<
     Record<number, ICBDTimeslot | null>
   >({});
+  const [waitlistStatuses, setWaitlistStatuses] = useState<
+    Record<number, boolean>
+  >({});
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const buildSelectedSlots = (acts: ICBDInterviewStatus[]) =>
     Object.fromEntries(
@@ -63,6 +69,11 @@ export function ICBDCheckinDialog({
         if (cancelled) return;
         setInterviews(acts);
         setSelectedSlots(buildSelectedSlots(acts));
+        setWaitlistStatuses(
+          Object.fromEntries(
+            acts.map((act) => [act.activity.id, act.waitlist ?? false])
+          )
+        );
       } catch (err) {
         console.error('Failed to load ICBD interviews', err);
       }
@@ -75,19 +86,39 @@ export function ICBDCheckinDialog({
   const handleSlotChange = (activityId: number, slot: ICBDTimeslot | null) =>
     setSelectedSlots((s) => ({ ...s, [activityId]: slot }));
 
-  const handleSaveTimeslots = async () => {
+  const handleWaitlistChange = (activityId: number, waitlist: boolean) =>
+    setWaitlistStatuses((s) => ({ ...s, [activityId]: waitlist }));
+
+  const handleSave = async () => {
     try {
+      const invalidActivity = interviews.find(
+        (act) =>
+          selectedSlots[act.activity.id] !== null &&
+          waitlistStatuses[act.activity.id] === true
+      );
+
+      if (invalidActivity) {
+        setErrorMessage(
+          `Cannot have both a timeslot selected and waitlist checked`
+        );
+        return;
+      }
+      setErrorMessage(null);
+
       const updates = interviews
         .filter(
           (act) =>
             (selectedSlots[act.activity.id]?.start_time ?? null) !==
-            (act.timeslot?.start_time ?? null)
+              (act.timeslot?.start_time ?? null) ||
+            (waitlistStatuses[act.activity.id] ?? false) !==
+              (act.waitlist ?? false)
         )
         .map((act) =>
           updateICBDInterviewTimeslot(
             participant.id,
             act.activity.id,
-            selectedSlots[act.activity.id] ?? null
+            selectedSlots[act.activity.id] ?? null,
+            waitlistStatuses[act.activity.id]
           )
         );
 
@@ -98,6 +129,11 @@ export function ICBDCheckinDialog({
 
       setInterviews(updatedActs);
       setSelectedSlots(buildSelectedSlots(updatedActs));
+      setWaitlistStatuses(
+        Object.fromEntries(
+          updatedActs.map((act) => [act.activity.id, act.waitlist ?? false])
+        )
+      );
     } catch (err) {
       console.error('Failed to save timeslots', err);
     }
@@ -107,13 +143,15 @@ export function ICBDCheckinDialog({
     (acc, act) => {
       acc[act.activity.id] =
         (selectedSlots[act.activity.id]?.start_time ?? null) !==
-        (act.timeslot?.start_time ?? null);
+          (act.timeslot?.start_time ?? null) ||
+        (waitlistStatuses[act.activity.id] ?? false) !==
+          (act.waitlist ?? false);
       return acc;
     },
     {} as Record<number, boolean>
   );
 
-  const hasActiveTimeslotChanges = Object.values(changesMap).some(Boolean);
+  const hasActiveChanges = Object.values(changesMap).some(Boolean);
 
   return (
     <>
@@ -168,18 +206,32 @@ export function ICBDCheckinDialog({
                       }}
                     />
                   )}
+                  <div className="shrink">
+                    <CheckboxCard
+                      checkboxState={{
+                        value: waitlistStatuses[activity.id],
+                        setValue: (val) =>
+                          handleWaitlistChange(activity.id, val),
+                      }}
+                    >
+                      Waitlist
+                    </CheckboxCard>
+                  </div>
                 </Split>
               );
             })}
             {participant.payment ? (
-              <button onClick={handleSaveTimeslots}>
-                {hasActiveTimeslotChanges ? (
-                  <ErrorIcon className="icon" />
-                ) : (
-                  <CheckCircleIcon className="icon" />
-                )}
-                Save timeslots
-              </button>
+              <>
+                <ErrorMessage message={errorMessage}></ErrorMessage>
+                <button onClick={handleSave}>
+                  {hasActiveChanges ? (
+                    <ErrorIcon className="icon" />
+                  ) : (
+                    <CheckCircleIcon className="icon" />
+                  )}
+                  Save timeslots
+                </button>
+              </>
             ) : (
               <Card Icon={ErrorIcon}>Pay deposit to select timeslots</Card>
             )}
@@ -188,10 +240,17 @@ export function ICBDCheckinDialog({
       ) : null}
 
       {paymentOnlyDialog ? null : participant.retreived_deposit ? (
-        <Card>
-          <CheckCircleIcon className="icon" />
-          Deposit already returned
-        </Card>
+        participant.payment == 'not-needed' ? (
+          <Card>
+            <CheckCircleIcon className="icon" />
+            No deposit to return
+          </Card>
+        ) : (
+          <Card>
+            <CheckCircleIcon className="icon" />
+            Deposit already returned
+          </Card>
+        )
       ) : participant.can_retreive_deposit ? (
         <button onClick={handleReturnDeposit}>Return deposit</button>
       ) : (

src/styles/base/_base.scss

@@ -106,3 +106,7 @@ button {
 .pass-through {
   display: contents;
 }
+
+.shrink {
+  width: fit-content;
+}