Suggest open times in portal booking

Connects the availability engine to a real surface: the portal booking form now
fetches open times for the chosen date (public portal.availableSlots query,
practice-wide busy intervals) and shows them as tappable chips that fill the
time field — instead of asking clients to guess a time blind.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: evangauer

apps/web/app/portal/[token]/book/page.tsx

@@ -19,6 +19,12 @@ export default function BookAppointmentPage() {
   const [preferredTime, setPreferredTime] = useState("");
   const [reason, setReason] = useState("");
 
+  // Suggested open times for the chosen date.
+  const slots = trpc.portal.availableSlots.useQuery(
+    { token, date: preferredDate, durationMinutes: 30 },
+    { enabled: !!preferredDate }
+  );
+
   const pets = client.data?.patients ?? [];
   const canSubmit =
     patientId && preferredDate && preferredTime && reason.trim() && !request.isPending;
@@ -132,6 +138,30 @@ export default function BookAppointmentPage() {
           </div>
         </div>
 
+        {preferredDate && (slots.data?.length ?? 0) > 0 && (
+          <div>
+            <p className="text-xs font-medium text-gray-500 mb-2">
+              Open times on {preferredDate} (tap to pick)
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {slots.data!.map((s) => (
+                <button
+                  key={s.iso}
+                  type="button"
+                  onClick={() => setPreferredTime(s.time)}
+                  className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
+                    preferredTime === s.time
+                      ? "border-teal-500 bg-teal-50 text-teal-700"
+                      : "border-gray-200 text-gray-600 hover:border-teal-300"
+                  }`}
+                >
+                  {s.time}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1.5">
             Anything we should know?

apps/web/server/routers/portal.ts

@@ -18,6 +18,8 @@ import { users } from "@openpims/db";
 import { rateLimit } from "@/lib/rate-limit";
 import { dispatchWebhookEvent } from "@/lib/webhook-dispatcher";
 import { buildRequestedSlot } from "@/lib/portal/booking";
+import { findOpenSlots } from "@/lib/scheduling/availability";
+import { not, inArray, lt, gt } from "drizzle-orm";
 
 async function getClientByToken(db: any, token: string) {
   const [client] = await db
@@ -237,6 +239,48 @@ export const portalRouter = createRouter({
         .orderBy(appointmentTypes.name);
     }),
 
+  /** Suggested open times on a date for the booking form (practice-wide). */
+  availableSlots: publicProcedure
+    .input(
+      z.object({
+        token: z.string().min(1),
+        date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
+        durationMinutes: z.number().int().min(10).max(120).default(30),
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const client = await getClientByToken(ctx.db, input.token);
+      const dayStart = new Date(`${input.date}T08:00:00`);
+      const dayEnd = new Date(`${input.date}T18:00:00`);
+
+      const busy = await ctx.db
+        .select({
+          startTime: appointments.startTime,
+          endTime: appointments.endTime,
+        })
+        .from(appointments)
+        .where(
+          and(
+            eq(appointments.practiceId, client.practiceId),
+            isNull(appointments.deletedAt),
+            not(inArray(appointments.status, ["cancelled", "no_show"])),
+            lt(appointments.startTime, dayEnd),
+            gt(appointments.endTime, dayStart)
+          )
+        );
+
+      return findOpenSlots({
+        dayStart,
+        dayEnd,
+        slotMinutes: input.durationMinutes,
+        busy,
+      }).map((s) => ({
+        // 24h HH:MM in the server's local time, matching the booking form input.
+        time: `${String(s.start.getHours()).padStart(2, "0")}:${String(s.start.getMinutes()).padStart(2, "0")}`,
+        iso: s.start.toISOString(),
+      }));
+    }),
+
   requestAppointment: publicProcedure
     .input(
       z.object({