Booking matching chain: interest → selection/confirmation → notifications

apps/web/app/bookings/[id]/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { requireUser } from "@/lib/auth/profile";
@@ -28,6 +29,23 @@ export default async function BookingDetailPage({ params }: { params: Promise<{
 
   if (!booking) notFound();
 
+  // Signer-visible interest + confirmation state (RLS: select_signer / select_party).
+  const [{ data: interests }, { data: confirmations }] = await Promise.all([
+    supabase.from("booking_interests").select("interpreter_id").eq("booking_id", id),
+    supabase
+      .from("booking_confirmations")
+      .select("interpreter_id, interpreter_contact_shared, confirmed_at")
+      .eq("booking_id", id),
+  ]);
+  const interestCount = interests?.length ?? 0;
+
+  const confirmedIds = (confirmations ?? []).map((c) => c.interpreter_id);
+  const { data: confirmedProfiles } = await supabase
+    .from("public_profiles")
+    .select("id, display_name")
+    .in("id", confirmedIds);
+  const nameById = new Map((confirmedProfiles ?? []).map((p) => [p.id, p.display_name]));
+
   const location =
     booking.mode === "in_person"
       ? [booking.location_suburb, booking.location_state].filter(Boolean).join(", ") || "In person"
@@ -52,9 +70,38 @@ export default async function BookingDetailPage({ params }: { params: Promise<{
         <p className="text-foreground text-sm leading-relaxed">{booking.description}</p>
       ) : null}
 
-      <p className="text-muted text-xs leading-relaxed">
-        This booking is live in the pool. Interpreter interest and selection are coming next.
-      </p>
+      {confirmations && confirmations.length > 0 ? (
+        <section className="flex flex-col gap-2">
+          <h2 className="text-foreground text-sm font-semibold">Confirmed</h2>
+          {confirmations.map((c) => (
+            <div
+              key={c.interpreter_id}
+              className="rounded-2xl border border-[var(--border)] p-4"
+            >
+              <div className="text-foreground font-medium">
+                {nameById.get(c.interpreter_id) ?? "Interpreter"}
+              </div>
+              <div className="text-muted mt-1 text-sm">Contact: {c.interpreter_contact_shared}</div>
+            </div>
+          ))}
+        </section>
+      ) : booking.status === "open" ? (
+        <section className="flex flex-col gap-3">
+          <p className="text-muted text-sm">
+            {interestCount === 0
+              ? "No interpreters have expressed interest yet."
+              : `${interestCount} interpreter${interestCount === 1 ? "" : "s"} interested.`}
+          </p>
+          {interestCount > 0 ? (
+            <Link
+              href={`/bookings/${booking.id}/select`}
+              className="bg-accent text-accent-foreground inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium"
+            >
+              Review &amp; confirm
+            </Link>
+          ) : null}
+        </section>
+      ) : null}
     </main>
   );
 }

apps/web/app/bookings/[id]/select/page.tsx

@@ -0,0 +1,77 @@
+import { notFound, redirect } from "next/navigation";
+
+import { requireUser } from "@/lib/auth/profile";
+import { createClient } from "@/lib/supabase/server";
+
+import { SelectInterpreters } from "./select-interpreters";
+
+export default async function SelectInterpretersPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const user = await requireUser();
+  const supabase = await createClient();
+
+  const { data: booking } = await supabase
+    .from("bookings")
+    .select("id, signer_id, title, status, slots")
+    .eq("id", id)
+    .maybeSingle();
+  if (!booking || booking.signer_id !== user.id) notFound();
+  // Selection only applies while the booking is still open.
+  if (booking.status !== "open") redirect(`/bookings/${id}`);
+
+  const { data: interests } = await supabase
+    .from("booking_interests")
+    .select("interpreter_id")
+    .eq("booking_id", id);
+  const ids = (interests ?? []).map((i) => i.interpreter_id);
+
+  // Directory info via the safe-column public views (no contact/exact location).
+  const [{ data: profiles }, { data: meta }] = await Promise.all([
+    supabase
+      .from("public_profiles")
+      .select("id, display_name, location_suburb, location_state")
+      .in("id", ids),
+    supabase
+      .from("public_interpreter_profiles")
+      .select("id, bio, is_deaf_interpreter, accepts_remote")
+      .in("id", ids),
+  ]);
+
+  const interpreters = ids.map((iid) => {
+    const p = (profiles ?? []).find((x) => x.id === iid);
+    const m = (meta ?? []).find((x) => x.id === iid);
+    return {
+      id: iid,
+      name: p?.display_name ?? "Interpreter",
+      area: [p?.location_suburb, p?.location_state].filter(Boolean).join(", "),
+      bio: m?.bio ?? null,
+      isDeafInterpreter: Boolean(m?.is_deaf_interpreter),
+      acceptsRemote: Boolean(m?.accepts_remote),
+    };
+  });
+
+  const slotCount = Array.isArray(booking.slots) ? booking.slots.length : 1;
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col gap-6 px-6 py-12">
+      <div className="flex flex-col gap-1">
+        <span className="text-muted text-xs uppercase tracking-wide">Select interpreters</span>
+        <h1 className="text-foreground text-2xl font-semibold">{booking.title}</h1>
+        <p className="text-muted text-sm">
+          Choose {slotCount} interpreter{slotCount === 1 ? "" : "s"}. Contact details are shared
+          with each other only once you confirm.
+        </p>
+      </div>
+
+      {interpreters.length === 0 ? (
+        <p className="text-muted text-sm">No interpreters have expressed interest yet.</p>
+      ) : (
+        <SelectInterpreters bookingId={id} slotCount={slotCount} interpreters={interpreters} />
+      )}
+    </main>
+  );
+}

apps/web/app/bookings/[id]/select/select-interpreters.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import { Check, CircleAlert } from "lucide-react";
+import { useState, useTransition } from "react";
+
+import { confirmInterpreters } from "@/app/bookings/actions";
+
+type Interpreter = {
+  id: string;
+  name: string;
+  area: string;
+  bio: string | null;
+  isDeafInterpreter: boolean;
+  acceptsRemote: boolean;
+};
+
+export function SelectInterpreters({
+  bookingId,
+  slotCount,
+  interpreters,
+}: {
+  bookingId: string;
+  slotCount: number;
+  interpreters: Interpreter[];
+}) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  function toggle(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function confirm() {
+    setError(null);
+    startTransition(async () => {
+      const res = await confirmInterpreters(bookingId, [...selected]);
+      // Success redirects server-side; only an error returns here.
+      if (res?.error) setError(res.error);
+    });
+  }
+
+  const atTarget = selected.size === slotCount;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ul className="flex flex-col gap-3">
+        {interpreters.map((it) => {
+          const isSel = selected.has(it.id);
+          return (
+            <li key={it.id}>
+              <button
+                type="button"
+                onClick={() => toggle(it.id)}
+                aria-pressed={isSel}
+                className={`flex w-full items-start gap-3 rounded-2xl border p-4 text-left transition-colors ${
+                  isSel
+                    ? "border-[var(--accent)] bg-[var(--surface-secondary)]"
+                    : "border-[var(--border)] hover:bg-[var(--surface-secondary)]"
+                }`}
+              >
+                <span
+                  className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border ${
+                    isSel ? "border-[var(--accent)] bg-[var(--accent)]" : "border-[var(--border)]"
+                  }`}
+                >
+                  {isSel ? (
+                    <Check size={14} strokeWidth={2.5} className="text-[var(--accent-foreground)]" />
+                  ) : null}
+                </span>
+                <span className="flex flex-col gap-0.5">
+                  <span className="text-foreground font-medium">
+                    {it.name}
+                    {it.isDeafInterpreter ? (
+                      <span className="text-muted ml-2 text-xs">Deaf interpreter</span>
+                    ) : null}
+                  </span>
+                  {it.area ? <span className="text-muted text-sm">{it.area}</span> : null}
+                  {it.bio ? <span className="text-muted text-sm">{it.bio}</span> : null}
+                  {it.acceptsRemote ? (
+                    <span className="text-muted text-xs">Available remotely</span>
+                  ) : null}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      {error ? (
+        <p
+          className="text-danger flex items-center gap-2 rounded-xl bg-[var(--danger-soft)] px-3 py-2 text-sm"
+          role="alert"
+        >
+          <CircleAlert size={16} strokeWidth={1.5} className="shrink-0" />
+          {error}
+        </p>
+      ) : null}
+
+      <Button fullWidth isPending={pending} isDisabled={!atTarget} onPress={confirm}>
+        {atTarget
+          ? `Confirm ${selected.size} interpreter${selected.size === 1 ? "" : "s"}`
+          : `Select ${slotCount} (${selected.size} chosen)`}
+      </Button>
+    </div>
+  );
+}