fix(GRO-2011): always fetch /api/setup/status, even for unauth users

The second useEffect in App skipped the setup/status fetch when
`!authDisabled && !session` was true. In the deployed bundle the
`needsSetup` state therefore stayed `null` for unauth users, and a
later render short-circuit rendered nothing — producing the blank
white viewport at https://uat.groombook.dev/login.

Drop the unauth skip clause so `/api/setup/status` is always fetched
as soon as the auth state is known. The unauth branch in the render
is handled before `needsSetup` is consulted, so this is safe and
removes the stuck-`null` state.

Adds:
- New unit test in src/__tests__/App.test.tsx asserting the
  unauthenticated path calls /api/setup/status.
- UAT playbook entry TC-WEB-5.1.5 covering the blank-viewport
  regression scenario.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

UAT_PLAYBOOK.md

@@ -53,6 +53,7 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.1.2 | OIDC redirect | Click OIDC login button | Redirected to OIDC provider, then back to app with session established |
 | TC-WEB-5.1.3 | Logout | Click logout button | Session cleared, redirected to login page |
 | TC-WEB-5.1.4 | Session indicator | After successful login | User info/initials visible in UI indicating active session |
+| TC-WEB-5.1.5 | Unauthenticated `/login` renders the form (GRO-2011) | In a private/incognito window with no session cookie, navigate to UAT `/login` | React root mounts; the GroomBook sign-in card with the OIDC button is visible. Network tab shows `/api/auth/get-session` 200, `/api/setup/status` 200, and the login form is rendered (NOT a blank white viewport). |
 
 ### 5.2 Authentication — VITE_API_URL Set
 
@@ -183,6 +184,29 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.12.3 | Confirm appointment | Click confirm on pending appointment | Appointment status updated to confirmed |
 | TC-WEB-5.12.4 | Cancel appointment | Click cancel on appointment | Appointment marked as cancelled |
 
+#### 5.12b Dynamic Portal Time Slots (GRO-1793)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.5 | BookingFlow dynamic slots | Open Book New, select pet and service, pick a date | Time slots fetched from API; "Checking availability…" shown while loading |
+| TC-WEB-5.12.6 | BookingFlow slots match wizard | Compare BookingFlow slot times with public booking wizard for same date | Same slots displayed |
+| TC-WEB-5.12.7 | BookingFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
+| TC-WEB-5.12.8 | BookingFlow no slots | Select date with no availability | "No available slots on this date" shown |
+| TC-WEB-5.12.9 | RescheduleFlow dynamic slots | Open reschedule, pick a new date | Time slots fetched from API; loading state shown |
+| TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
+| TC-WEB-5.12.11 | RescheduleFlow no slots | Select date with no availability | "No available slots on this date" shown |
+
+#### 5.12c Waitlist/Booking Status Badges (GRO-1795)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.12 | Confirmed badge | View appointment card with confirmed status | Green "Confirmed" badge displayed |
+| TC-WEB-5.12.13 | Pending badge | View appointment card with pending status | Amber "Pending" badge displayed |
+| TC-WEB-5.12.14 | Waitlisted badge | View appointment card with waitlisted status | Blue "Waitlisted" badge displayed |
+| TC-WEB-5.12.15 | Badge uses CSS classes | Inspect badge element | Badge uses CSS variable-based classes (e.g., bg-green-100, text-amber-600), not hardcoded colors |
+| TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly |
+| TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class |
+
 ### 5.13 Reports UI
 
 | # | Scenario | Steps | Expected |
@@ -304,6 +328,50 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.23.2 | Save pet — error state | Trigger an API save failure (e.g. network error) | Error message displayed; edit form stays open; no data cleared |
 | TC-WEB-5.23.3 | Save pet — saving indicator | Click Save | Spinner/indicator shown while request is in flight; form controls disabled |
 
+
+### 5.24 Booking Funnel Analytics Events (GRO-1794)
+
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.24.1 | booking_step_service — public | Select a service in the public booking wizard | `booking_step_service` CustomEvent fires with detail.step="service" and detail.flow="public" |
+| TC-WEB-5.24.2 | booking_step_time — public | Select a time slot and click Continue | `booking_step_time` fires with detail.step="time" and detail.flow="public" |
+| TC-WEB-5.24.3 | booking_step_contact — public | Fill in contact/pet form, click "Review booking" | `booking_step_contact` fires with detail.step="contact" and detail.flow="public" |
+| TC-WEB-5.24.4 | booking_step_submit — public | Confirm and submit the booking | `booking_step_submit` fires with detail.step="submit" and detail.flow="public" |
+| TC-WEB-5.24.5 | booking_confirmed — public | Navigate to /booking-confirmed | `booking_confirmed` fires once on mount with detail.step="confirmed" and detail.flow="public" |
+| TC-WEB-5.24.6 | booking_error — public | Navigate to /booking-error | `booking_error` fires once on mount with detail.step="error" and detail.flow="public" |
+| TC-WEB-5.24.7 | booking_step_service — portal | Select a pet in the portal BookingFlow | `booking_step_service` fires with detail.step="service" and detail.flow="portal" |
+| TC-WEB-5.24.8 | booking_step_time — portal | Pick a date and time in portal BookingFlow | `booking_step_time` fires with detail.step="time" and detail.flow="portal" |
+| TC-WEB-5.24.9 | booking_step_contact — portal | Proceed from groomer selection to review screen | `booking_step_contact` fires with detail.step="groomer" and detail.flow="portal" |
+| TC-WEB-5.24.10 | booking_step_submit — portal | Submit booking in portal BookingFlow | `booking_step_submit` fires with detail.step="submit" and detail.flow="portal" |
+| TC-WEB-5.24.11 | booking_confirmed — portal | Portal booking request succeeds | Inline success state is shown and `booking_confirmed` fires with detail.step="confirmed" and detail.flow="portal" |
+| TC-WEB-5.24.12 | No PII in analytics payloads | Fire each event and inspect detail object | Payload contains only: step, flow, timestamp — no names, emails, phone numbers, or pet names |
+| TC-WEB-5.24.13 | No-op safe | Trigger analytics with window.dispatchEvent blocked (e.g. CSP) | No error thrown; booking flow completes normally |
+
+### 5.25 Customer Portal — Better Auth SSO Bridge (GRO-1867)
+
+These cases cover the `CustomerPortal` initialisation path that bridges an Authentik / Better Auth session into a portal session via `POST /api/portal/session-from-auth`. The bridge runs after the URL-impersonation (`?sessionId=`) and dev-user paths have been ruled out.
+
+**Pre-conditions:**
+
+- UAT is configured with Authentik SSO and the `seed-uat-passwords` Secret in `groombook-uat` provides the seeded customer credentials (`uat-seed-password-source` memory).
+- `POST /api/portal/session-from-auth` from [GRO-1866](https://paperclip.farhoodlabs.com/GRO/issues/GRO-1866) is deployed on UAT.
+- Clear cookies and localStorage between cases unless otherwise noted.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.25.1 | Authenticated customer reaches portal dashboard | 1. From clean state, navigate to UAT `/login`. 2. Click "Sign in with SSO" and complete Authentik flow with a seeded **customer** identity. 3. After callback, land on `/`. | Portal dashboard renders. No redirect to `/login`. No impersonation banner. Top-right greeting reads "Hi, <FirstName>". |
+| TC-WEB-5.25.2 | Bridge call sequence | Repeat TC-WEB-5.25.1 with DevTools → Network open and the **All** tab filtered to `/api/`. | In order: `GET /api/auth/get-session` → 200. `POST /api/portal/session-from-auth` → 201 with body `{ sessionId, clientId, clientName }`. |
+| TC-WEB-5.25.3 | Subsequent portal calls use the bridged session ID | After TC-WEB-5.25.1 succeeds, navigate to **Appointments**, **My Pets**, **Billing**, **Settings**. Inspect any `/api/portal/*` request in DevTools → Network. | Each portal API call carries an `X-Impersonation-Session-Id` header whose value equals the `sessionId` returned by `session-from-auth` (not a URL-param value). Each call returns 200 (or 404 for genuinely empty collections), never 401. |
+| TC-WEB-5.25.4 | No impersonation chrome for the customer's own session | After TC-WEB-5.25.1, scan the portal UI. | No amber border around the page. No "STAFF VIEW" watermark. No "End Impersonation" button in the sidebar. The customer is themselves; only impersonation sessions started via `?sessionId=` show the banner. |
+| TC-WEB-5.25.5 | 404 fallback for authenticated user with no client record | 1. Sign in via SSO with an Authentik account whose email is **not** present in `clients`. 2. Land on `/`. | `POST /api/portal/session-from-auth` returns 404. The portal renders a centred card titled **"Portal access not configured"** with the message about contacting the groomer and a **Sign out** button. No redirect loop, no portal chrome. |
+| TC-WEB-5.25.6 | 404 fallback Sign-out escape hatch | From TC-WEB-5.25.5 click **Sign out**. | `POST /api/auth/sign-out` fires; browser navigates to `/login`; the Authentik session cookie is cleared. Reloading `/` no longer hits 404 (will show the login page). |
+| TC-WEB-5.25.7 | Bridge precedence — impersonation URL wins | 1. Sign in via SSO as a customer. 2. Open a new tab to `https://uat.groombook.dev/?sessionId=<a-valid-staff-impersonation-session-id>`. | The impersonation path runs; the amber banner appears for the impersonated client. The Better Auth bridge is **not** called on this load (`session-from-auth` absent in Network). |
+| TC-WEB-5.25.8 | Bridge precedence — dev user wins | In dev mode (e.g. local) with `localStorage["dev-user"]` set to a client persona, navigate to `/`. | The dev-session path runs (`POST /api/portal/dev-session`). The Better Auth bridge is **not** called (`session-from-auth` absent in Network). Staff dev users still redirect to `/admin`. |
+| TC-WEB-5.25.9 | Staff Better Auth session does not run the customer bridge | Sign in via SSO with a staff identity. Navigate to `/`. | `App.tsx` routing redirects to `/admin`. `POST /api/portal/session-from-auth` is **not** called. |
+| TC-WEB-5.25.10 | Unauthenticated user is sent to login (no infinite loop) | Without signing in, navigate directly to `/`. | `App.tsx` renders the LoginPage. `CustomerPortal` does not render. No `session-from-auth` request is made. |
+| TC-WEB-5.25.11 | Session persists across reload via Better Auth cookie | After TC-WEB-5.25.1 succeeds, reload the page. | Portal dashboard re-renders. A fresh `GET /api/auth/get-session` + `POST /api/portal/session-from-auth` pair runs and yields 200/201. Greeting still reads "Hi, &lt;FirstName&gt;". |
+
 ## 6. Pass/Fail Criteria
 
 **Pass:**

src/App.tsx

@@ -327,11 +327,16 @@ export function App() {
       .catch(() => setAuthDisabled(false));
   }, []);
 
-  // After session is confirmed, check if setup is needed
+  // After session is confirmed, check if setup is needed.
+  // Always run the setup/status fetch as soon as the auth state is known — even for
+  // unauthenticated users, so the `needsSetup` value is in place if they sign in
+  // mid-session. The unauth branch in the render below is handled before
+  // `needsSetup` is consulted, so this is safe and avoids a stuck-`null` state.
+  // See GRO-2011.
   useEffect(() => {
     if (authDisabled === null || sessionLoading) return;
-    // Skip if no authenticated session (will redirect to login or dev selector)
-    if (!authDisabled && !session) return;
+    // In dev mode, only fetch when a dev user has been selected — otherwise the
+    // user is mid-redirect to the dev login selector and we don't need setup state.
     if (authDisabled && !getDevUser()) return;
 
     fetch("/api/setup/status")
@@ -386,9 +391,10 @@ export function App() {
     return <Navigate to="/setup" replace />;
   }
 
-  // Redirect authenticated users to /admin (but preserve impersonation flow via ?sessionId=)
+  // Redirect staff to /admin; allow customers to access portal (preserve impersonation via ?sessionId=)
   const searchParams = new URLSearchParams(location.search);
-  if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId")) {
+  const isStaff = session?.user && (session.user as any).role === "staff";
+  if (!authDisabled && session && !location.pathname.startsWith("/admin") && !searchParams.has("sessionId") && isStaff) {
     return <Navigate to="/admin" replace />;
   }
 

src/__tests__/App.test.tsx

@@ -121,6 +121,65 @@ describe("App navigation", () => {
   });
 });
 
+describe("GRO-2011 — setup/status fetch for unauthenticated users", () => {
+  it("calls /api/setup/status for unauthenticated users so needsSetup is never stuck null", async () => {
+    const setupStatusCalls: string[] = [];
+
+    global.fetch = vi.fn((url: string) => {
+      if (url === "/api/dev/config") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ authDisabled: false }),
+        } as Response);
+      }
+      if (url === "/api/auth/get-session") {
+        // Better Auth returns 200 with null session for unauthenticated users.
+        return Promise.resolve({
+          ok: true,
+          json: async () => null,
+        } as unknown as Response);
+      }
+      if (url === "/api/setup/status") {
+        setupStatusCalls.push(url);
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ needsSetup: false }),
+        } as Response);
+      }
+      if (url === "/api/branding") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({
+            businessName: "GroomBook",
+            primaryColor: "#4f8a6f",
+            accentColor: "#8b7355",
+            logoBase64: null,
+            logoMimeType: null,
+          }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => [] } as Response);
+    }) as unknown as typeof fetch;
+
+    render(
+      <MemoryRouter initialEntries={["/login"]}>
+        <App />
+      </MemoryRouter>
+    );
+
+    // The login page should be rendered for the unauthenticated user.
+    await screen.findByText("Sign in to continue");
+
+    // Crucially, /api/setup/status must be called even when the user is unauthenticated —
+    // otherwise `needsSetup` stays null and a later code path can short-circuit to a
+    // blank page (GRO-2011).
+    await waitFor(() => {
+      expect(setupStatusCalls.length).toBeGreaterThanOrEqual(1);
+    });
+    expect(setupStatusCalls[0]).toBe("/api/setup/status");
+  });
+});
+
 describe("Dev login selector", () => {
   it("redirects to /login when auth is disabled and no user selected", async () => {
     global.fetch = vi.fn((url: string) => {

src/__tests__/Appointments.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -379,4 +379,202 @@ describe("ConfirmationSection", () => {
       expect(screen.getByText(/Confirmed!/i)).toBeInTheDocument();
     });
   });
+});
+
+describe("StatusBadge", () => {
+  it("renders Confirmed for confirmed status", () => {
+    render(<StatusBadge status="confirmed" />);
+    expect(screen.getByText("Confirmed")).toBeInTheDocument();
+  });
+
+  it("renders Pending for pending status", () => {
+    render(<StatusBadge status="pending" />);
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("renders Waitlisted for waitlisted status", () => {
+    render(<StatusBadge status="waitlisted" />);
+    expect(screen.getByText("Waitlisted")).toBeInTheDocument();
+  });
+
+  it("renders Completed for completed status", () => {
+    render(<StatusBadge status="completed" />);
+    expect(screen.getByText("Completed")).toBeInTheDocument();
+  });
+
+  it("renders Cancelled for cancelled status", () => {
+    render(<StatusBadge status="cancelled" />);
+    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+  });
+
+  it("falls back to status string for unknown status", () => {
+    render(<StatusBadge status="custom-status" />);
+    expect(screen.getByText("custom-status")).toBeInTheDocument();
+  });
+
+  it("uses correct CSS class for confirmed status", () => {
+    render(<StatusBadge status="confirmed" />);
+    const badge = screen.getByText("Confirmed").closest('span');
+    expect(badge?.className).toContain("bg-green-100");
+    expect(badge?.className).toContain("text-green-700");
+  });
+
+  it("uses correct CSS class for waitlisted status", () => {
+    render(<StatusBadge status="waitlisted" />);
+    const badge = screen.getByText("Waitlisted").closest('span');
+    expect(badge?.className).toContain("bg-blue-100");
+    expect(badge?.className).toContain("text-blue-600");
+  });
+
+  it("uses correct CSS class for pending status", () => {
+    render(<StatusBadge status="pending" />);
+    const badge = screen.getByText("Pending").closest('span');
+    expect(badge?.className).toContain("bg-amber-100");
+    expect(badge?.className).toContain("text-amber-600");
+  });
+
+  it("uses fallback styling for unknown status", () => {
+    render(<StatusBadge status="unknown" />);
+    const badge = screen.getByText("unknown").closest('span');
+    expect(badge?.className).toContain("bg-stone-100");
+    expect(badge?.className).toContain("text-stone-600");
+  });
+});
+
+describe("RescheduleFlow dynamic time slots", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  const RESCHEDULE_APPT = {
+    id: "appt-r1",
+    petId: "pet-1",
+    petName: "Buddy",
+    groomerId: "groomer-1",
+    groomerName: "Sarah",
+    services: ["Bath & Brush"],
+    serviceId: "service-1",
+    addOns: [],
+    date: "2027-01-01",
+    time: "10:00 AM",
+    duration: 60,
+    price: 50,
+    status: "confirmed" as const,
+    notes: "",
+    customerNotes: "",
+    confirmationStatus: "confirmed" as const,
+  };
+
+  it("shows loading state while fetching availability", async () => {
+    vi.mocked(global.fetch).mockReturnValue(new Promise(() => {})); // Never resolves
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Checking availability/i)).toBeInTheDocument();
+    });
+  });
+
+  it("displays fetched time slots from API", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ["9:00 AM", "10:00 AM", "2:00 PM"],
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
+
+    await waitFor(() => {
+      expect(screen.getByText("9:00 AM")).toBeInTheDocument();
+      expect(screen.getByText("10:00 AM")).toBeInTheDocument();
+      expect(screen.getByText("2:00 PM")).toBeInTheDocument();
+    });
+  });
+
+  it("shows error state when availability fetch fails", async () => {
+    vi.mocked(global.fetch).mockRejectedValue(new Error("Network error"));
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load time slots/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows no slots message when API returns empty array", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => [] as string[],
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/No available slots on this date/i)).toBeInTheDocument();
+    });
+  });
+
+  it("calls /api/book/availability with the selected date", async () => {
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ["9:00 AM"] as string[],
+    } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+    fireEvent.change(dateInput, { target: { value: "2027-02-20" } });
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/book/availability?date=2027-02-20",
+        expect.objectContaining({
+          headers: expect.objectContaining({ "X-Impersonation-Session-Id": "test-session-id" }),
+        })
+      );
+    });
+  });
+
+  it("re-fetches slots when date changes", async () => {
+    vi.mocked(global.fetch)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ["9:00 AM"] as string[],
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ["11:00 AM", "1:00 PM"] as string[],
+      } as Response);
+
+    const { RescheduleFlow } = await import("../portal/sections/Appointments.tsx");
+    render(<RescheduleFlow appointment={RESCHEDULE_APPT} onClose={() => {}} sessionId="test-session-id" />);
+
+    const dateInput = screen.getByLabelText(/date/i) || screen.getByRole("textbox", { name: /date/i });
+
+    fireEvent.change(dateInput, { target: { value: "2027-01-10" } });
+    await waitFor(() => expect(screen.getByText("9:00 AM")).toBeInTheDocument());
+
+    fireEvent.change(dateInput, { target: { value: "2027-01-15" } });
+    await waitFor(() => {
+      expect(screen.getByText("11:00 AM")).toBeInTheDocument();
+      expect(screen.getByText("1:00 PM")).toBeInTheDocument();
+    });
+  });
 });

src/__tests__/BookingError.test.tsx

@@ -28,11 +28,11 @@ describe("BookingErrorPage", () => {
 
   it("displays business contact phone", () => {
     render(<BookingErrorPage />);
-    expect(screen.getByText(BUSINESS_CONTACT_INFO.phone)).toBeInTheDocument();
+    expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.phone.replace(/[()]/g, "\\$&")))).toBeInTheDocument();
   });
 
   it("displays business contact email", () => {
     render(<BookingErrorPage />);
-    expect(screen.getByText(BUSINESS_CONTACT_INFO.email)).toBeInTheDocument();
+    expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.email))).toBeInTheDocument();
   });
 });

src/__tests__/analytics.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi } from "vitest";
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
+
+describe("analytics", () => {
+  describe("ANALYTICS_EVENTS constants", () => {
+    it("exports all required event names", () => {
+      expect(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE).toBe("booking_step_service");
+      expect(ANALYTICS_EVENTS.BOOKING_STEP_TIME).toBe("booking_step_time");
+      expect(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT).toBe("booking_step_contact");
+      expect(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT).toBe("booking_step_submit");
+      expect(ANALYTICS_EVENTS.BOOKING_CONFIRMED).toBe("booking_confirmed");
+      expect(ANALYTICS_EVENTS.BOOKING_ERROR).toBe("booking_error");
+    });
+
+    it("has no duplicate event names", () => {
+      const values = Object.values(ANALYTICS_EVENTS);
+      const unique = new Set(values);
+      expect(unique.size).toBe(values.length);
+    });
+  });
+
+  describe("fireAnalyticsEvent", () => {
+    it("dispatches a CustomEvent with the correct event name", () => {
+      const listener = vi.fn();
+      window.addEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener);
+      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" });
+      expect(listener).toHaveBeenCalledTimes(1);
+      const event = listener.mock.calls[0]![0] as CustomEvent;
+      expect(event.type).toBe("booking_step_service");
+      expect(event.detail.step).toBe("service");
+      expect(event.detail.flow).toBe("public");
+      expect(event.detail.timestamp).toBeDefined();
+      window.removeEventListener(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, listener);
+    });
+
+    it("includes a timestamp in the event detail", () => {
+      const listener = vi.fn();
+      window.addEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener);
+      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" });
+      const event = listener.mock.calls[0]![0] as CustomEvent;
+      expect(event.detail.timestamp).toBeTruthy();
+      expect(new Date(event.detail.timestamp as string)).toBeInstanceOf(Date);
+      window.removeEventListener(ANALYTICS_EVENTS.BOOKING_CONFIRMED, listener);
+    });
+
+    it("does not throw when called with no payload", () => {
+      expect(() => {
+        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, {});
+      }).not.toThrow();
+    });
+
+    it("does not throw when window.dispatchEvent throws", () => {
+      const original = window.dispatchEvent;
+      window.dispatchEvent = () => {
+        throw new Error("analytics blocked");
+      };
+      expect(() => {
+        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" });
+      }).not.toThrow();
+      window.dispatchEvent = original;
+    });
+
+    it("fires events for all event types", () => {
+      const events = Object.values(ANALYTICS_EVENTS);
+      for (const eventName of events) {
+        const listener = vi.fn();
+        window.addEventListener(eventName, listener);
+        fireAnalyticsEvent(eventName as typeof events[number], { step: "test", flow: "public" });
+        expect(listener).toHaveBeenCalledTimes(1);
+        window.removeEventListener(eventName, listener);
+      }
+    });
+
+    it("does not include PII in payload", () => {
+      // Payload only contains step, flow, and timestamp — no names, emails, or phones
+      const payload = { step: "contact", flow: "public" };
+      const keys = Object.keys(payload);
+      const piish = ["name", "email", "phone", "clientName", "clientEmail", "clientPhone", "petName"];
+      const hasPII = piish.some((k) => keys.includes(k));
+      expect(hasPII).toBe(false);
+    });
+  });
+});

src/__tests__/portal.test.tsx

@@ -313,3 +313,164 @@ describe("CustomerPortal session loading", () => {
     Object.defineProperty(window, "location", { value: originalLocation, writable: true });
   });
 });
+
+// ─── CustomerPortal — Better Auth SSO bridge (GRO-1867) ────────────────────
+
+describe("CustomerPortal SSO bridge", () => {
+  beforeEach(() => {
+    // Make sure no dev-user leaks across tests
+    window.localStorage.clear();
+  });
+
+  const brandingResponse = {
+    ok: true,
+    json: async () => ({
+      businessName: "GroomBook",
+      primaryColor: "#4f8a6f",
+      accentColor: "#8b7355",
+      logoBase64: null,
+      logoMimeType: null,
+    }),
+  } as Response;
+
+  it("bridges Better Auth session via /api/portal/session-from-auth and uses returned sessionId", async () => {
+    global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
+        } as Response);
+      }
+      // Subsequent portal API calls — surface them so we can assert the header
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/portal/session-from-auth",
+        expect.objectContaining({ method: "POST", credentials: "include" })
+      );
+    });
+    // Client greeting reflects the bridged customer name (proof the response was consumed)
+    await waitFor(() => {
+      expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
+    });
+    // The impersonation banner must NOT appear — this is the customer themselves
+    expect(screen.queryByRole("button", { name: /End Session/i })).not.toBeInTheDocument();
+  });
+
+  it("shows a friendly fallback when session-from-auth returns 404 (no client record)", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth") {
+        return Promise.resolve({
+          ok: false,
+          status: 404,
+          json: async () => ({ error: "No client record found for this user" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/not linked to a customer record/i)).toBeInTheDocument();
+    // Sign-out escape hatch is present so the user is not stuck in a loop
+    expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
+  });
+
+  it("does not call session-from-auth when there is no Better Auth session", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => null,
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    // Wait one tick to ensure no subsequent bridge call is queued
+    await new Promise((r) => setTimeout(r, 30));
+    const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
+      ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
+    );
+    expect(bridgeCalls).toHaveLength(0);
+  });
+
+  it("skips the bridge for staff Better Auth sessions", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "staff@example.com", role: "staff" } }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    await new Promise((r) => setTimeout(r, 30));
+    const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
+      ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
+    );
+    expect(bridgeCalls).toHaveLength(0);
+  });
+});

src/lib/analytics.ts

@@ -0,0 +1,40 @@
+// Analytics event names — single source of truth
+export const ANALYTICS_EVENTS = {
+  BOOKING_STEP_SERVICE: "booking_step_service",
+  BOOKING_STEP_TIME: "booking_step_time",
+  BOOKING_STEP_CONTACT: "booking_step_contact",
+  BOOKING_STEP_SUBMIT: "booking_step_submit",
+  BOOKING_CONFIRMED: "booking_confirmed",
+  BOOKING_ERROR: "booking_error",
+} as const;
+
+export type AnalyticsEventName = (typeof ANALYTICS_EVENTS)[keyof typeof ANALYTICS_EVENTS];
+
+export type AnalyticsPayload = {
+  step?: string;
+  flow?: "public" | "portal";
+  [key: string]: string | undefined;
+};
+
+/**
+ * Fires a lightweight analytics event via window.dispatchEvent.
+ * No-op safe: failures are swallowed so analytics never breaks the booking flow.
+ * Designed for later Plausible/GTM integration.
+ */
+export function fireAnalyticsEvent(
+  eventName: AnalyticsEventName,
+  payload: AnalyticsPayload = {}
+): void {
+  try {
+    window.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: {
+          ...payload,
+          timestamp: new Date().toISOString(),
+        },
+      })
+    );
+  } catch {
+    // no-op: analytics must never break the booking flow
+  }
+}

src/pages/Book.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import type { Service } from "@groombook/types";
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -193,12 +194,14 @@ export function BookPage() {
     setSelectedService(svc);
     setForm((f) => ({ ...f, serviceId: svc.id }));
     setStep(2);
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "public" });
   }
 
   function goToStep3() {
     if (!selectedSlot) return;
     setForm((f) => ({ ...f, startTime: selectedSlot }));
     setStep(3);
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "public" });
   }
 
   function goToStep4() {
@@ -208,6 +211,7 @@ export function BookPage() {
     }
     setFormError(null);
     setStep(4);
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "contact", flow: "public" });
   }
 
   async function submitBooking() {
@@ -236,6 +240,7 @@ export function BookPage() {
         throw new Error(body.error ?? `HTTP ${res.status}`);
       }
       const data = (await res.json()) as BookingResult;
+      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "public" });
       setResult(data);
       setStep(5);
     } catch (e: unknown) {

src/pages/BookingConfirmed.tsx

@@ -1,4 +1,11 @@
+import { useEffect } from "react";
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
+
 export function BookingConfirmedPage() {
+  useEffect(() => {
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" });
+  }, []);
+
   return (
     <div
       style={{

src/pages/BookingError.tsx

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { BUSINESS_CONTACT_INFO } from "../lib/contact";
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
 
 const STRINGS = {
   heading: "Link Invalid or Expired",
@@ -9,6 +11,10 @@ const STRINGS = {
 } as const;
 
 export function BookingErrorPage() {
+  useEffect(() => {
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, { step: "error", flow: "public" });
+  }, []);
+
   return (
     <div
       style={{

src/portal/CustomerPortal.tsx

@@ -43,6 +43,15 @@ export function CustomerPortal() {
   // Track whether an impersonation session fetch from URL param is in-flight
   // Dashboard will not redirect while this is true, allowing the session to load
   const [isImpersonating, setIsImpersonating] = useState(false);
+  // Portal session ID for real SSO customers (GRO-1867). Populated by the
+  // Better Auth → /api/portal/session-from-auth bridge below. Carries the
+  // X-Impersonation-Session-Id header on subsequent portal API calls without
+  // triggering the impersonation banner (the customer is themselves).
+  const [portalSessionId, setPortalSessionId] = useState<string | null>(null);
+  // User-facing message when the SSO bridge cannot resolve a client record
+  // (e.g. authenticated user with no matching client row). Rendered in place
+  // of the portal chrome instead of bouncing back to /login.
+  const [authError, setAuthError] = useState<string | null>(null);
   const { branding } = useBranding();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -98,10 +107,64 @@ export function CustomerPortal() {
           }
         })
         .finally(() => setInitComplete(true));
-    } else {
-      // No valid session: staff dev users and unauthenticated users fall through here
-      setInitComplete(true);
+      return;
     }
+
+    if (devUser && devUser.type === "staff") {
+      // Staff dev user — fall through; App.tsx redirects to /admin.
+      setInitComplete(true);
+      return;
+    }
+
+    // Real SSO customer (GRO-1867): bridge a Better Auth session into a portal
+    // session via POST /api/portal/session-from-auth. The returned session ID
+    // is used in the X-Impersonation-Session-Id header for portal API calls.
+    (async () => {
+      try {
+        const sessionResp = await fetch("/api/auth/get-session", { credentials: "include" });
+        if (!sessionResp.ok) {
+          setInitComplete(true);
+          return;
+        }
+        let sessionData: { user?: { email?: string; role?: string | null } } | null = null;
+        try {
+          sessionData = (await sessionResp.json()) as { user?: { email?: string; role?: string | null } } | null;
+        } catch {
+          // Better Auth returns an empty body when there is no session
+        }
+        if (!sessionData || !sessionData.user) {
+          setInitComplete(true);
+          return;
+        }
+        // Staff are routed to /admin by App.tsx; don't run the customer bridge.
+        if (sessionData.user.role === "staff") {
+          setInitComplete(true);
+          return;
+        }
+
+        const bridgeResp = await fetch("/api/portal/session-from-auth", {
+          method: "POST",
+          credentials: "include",
+        });
+
+        if (bridgeResp.ok) {
+          const data = await bridgeResp.json() as { sessionId: string; clientId: string; clientName: string };
+          setPortalSessionId(data.sessionId);
+          setClientName(data.clientName);
+        } else if (bridgeResp.status === 404) {
+          // Authenticated but no matching client row — show a friendly message
+          // instead of bouncing back to /login (which would loop indefinitely).
+          setAuthError(
+            "Your account is not linked to a customer record. Please contact your groomer to set up portal access."
+          );
+        }
+        // 401/other: fall through; App.tsx render guard will redirect to /login.
+      } catch {
+        // Network error — fall through; the render guard will redirect to /login.
+      } finally {
+        setInitComplete(true);
+      }
+    })();
   }, []);
 
   const handleEnd = useCallback(async () => {
@@ -157,7 +220,7 @@ export function CustomerPortal() {
   const isReadOnly = session?.status === "active";
 
   const renderSection = () => {
-    const sessionId = session?.id ?? null;
+    const sessionId = session?.id ?? portalSessionId;
     switch (activeSection) {
       case "dashboard":
         return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} sessionId={sessionId} clientName={clientName} onReschedule={handleReschedule} isImpersonating={isImpersonating} />;
@@ -183,7 +246,40 @@ export function CustomerPortal() {
   // For client dev users, we stay on the portal even if session is null — the dev-session
   // response may not have id set immediately, or there may be timing issues with the
   // session state. Dev users are verified via localStorage and the dev-session flow.
-  if (initComplete && !session) {
+  // SSO customers are recognised by portalSessionId (set by the Better Auth bridge).
+  if (initComplete && !session && !portalSessionId) {
+    if (authError) {
+      // GRO-1867: graceful 404 fallback — authenticated user has no client row.
+      return (
+        <div
+          className="min-h-screen flex items-center justify-center bg-[#faf8f5] font-sans px-6"
+          role="alert"
+          aria-live="polite"
+        >
+          <div className="max-w-md w-full bg-white rounded-xl shadow-sm border border-stone-200 p-8 text-center">
+            <div className="w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center mx-auto mb-4">
+              <Shield size={22} />
+            </div>
+            <h1 className="text-lg font-semibold text-stone-800 mb-2">Portal access not configured</h1>
+            <p className="text-sm text-stone-600 mb-6">{authError}</p>
+            <button
+              onClick={async () => {
+                try {
+                  await fetch("/api/auth/sign-out", { method: "POST", credentials: "include" });
+                } catch {
+                  // Best-effort sign-out; redirect to /login regardless.
+                }
+                window.location.href = "/login";
+              }}
+              className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 transition-colors"
+            >
+              <LogOut size={14} />
+              Sign out
+            </button>
+          </div>
+        </div>
+      );
+    }
     const devUser = getDevUser();
     if (devUser && devUser.type === "staff") {
       return <Navigate to="/admin" replace />;

src/portal/sections/Appointments.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
 
 export interface Appointment {
   id: string;
@@ -82,14 +83,34 @@ export function isUpcoming(appt: Appointment): boolean {
 
 const STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
-  pending: 'bg-amber-100 text-amber-700',
-  waitlisted: 'bg-blue-100 text-blue-700',
+  pending: 'bg-amber-100 text-amber-600',
+  waitlisted: 'bg-blue-100 text-blue-600',
   completed: 'bg-stone-100 text-stone-600',
   cancelled: 'bg-red-100 text-red-600',
   'no-show': 'bg-yellow-100 text-yellow-700',
-  scheduled: 'bg-blue-100 text-blue-700',
+  scheduled: 'bg-blue-100 text-blue-600',
 };
 
+const STATUS_LABELS: Record<string, string> = {
+  confirmed: 'Confirmed',
+  pending: 'Pending',
+  waitlisted: 'Waitlisted',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+  'no-show': 'No-show',
+  scheduled: 'Scheduled',
+};
+
+export function StatusBadge({ status }: { status: string }) {
+  const label = STATUS_LABELS[status] ?? status;
+  const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
+  return (
+    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+      {label}
+    </span>
+  );
+}
+
 const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
   pending: 'bg-amber-100 text-amber-700',
@@ -297,13 +318,7 @@ function AppointmentCard({
             <span>with {appt.groomerName || 'First Available'}</span>
           </div>
         </div>
-        <span
-          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-            STATUS_COLORS[appt.status] || ''
-          }`}
-        >
-          {appt.status}
-        </span>
+        <StatusBadge status={appt.status} />
         {expanded ? (
           <ChevronDown size={16} className="text-stone-400" />
         ) : (
@@ -573,16 +588,26 @@ export function RescheduleFlow({
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
+  const [slotsLoading, setSlotsLoading] = useState(false);
+  const [slotsError, setSlotsError] = useState<string | null>(null);
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
 
-  const availableTimes = [
-    '9:00 AM',
-    '10:00 AM',
-    '11:00 AM',
-    '1:00 PM',
-    '2:00 PM',
-    '3:00 PM',
-    '4:00 PM',
-  ];
+  useEffect(() => {
+    if (!selectedDate || !sessionId) {
+      setAvailableTimes([]);
+      return;
+    }
+    const params = new URLSearchParams({ date: selectedDate });
+    setSlotsLoading(true);
+    setSlotsError(null);
+    fetch(`/api/book/availability?${params.toString()}`, {
+      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
+    })
+      .then((r) => r.json() as Promise<string[]>)
+      .then(setAvailableTimes)
+      .catch(() => setSlotsError('Failed to load time slots'))
+      .finally(() => setSlotsLoading(false));
+  }, [selectedDate, sessionId]);
 
   async function handleSubmit() {
     if (!selectedDate || !selectedTime) return;
@@ -654,6 +679,7 @@ export function RescheduleFlow({
               <h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
               <input
                 type="date"
+                aria-label="Select date"
                 value={selectedDate}
                 onChange={(e) => setSelectedDate(e.target.value)}
                 min={new Date().toISOString().split('T')[0]}
@@ -661,7 +687,12 @@ export function RescheduleFlow({
               />
               {selectedDate && (
                 <div className="grid grid-cols-3 gap-2 mb-4">
-                  {availableTimes.map((time) => (
+                  {slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
+                  {!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
+                  {!slotsLoading && availableTimes.length === 0 && !slotsError && (
+                    <p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
+                  )}
+                  {!slotsLoading && availableTimes.map((time) => (
                     <button
                       key={time}
                       onClick={() => setSelectedTime(time)}
@@ -720,19 +751,34 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [notes, setNotes] = useState('');
   const [recurring, setRecurring] = useState('');
   const [confirmed, setConfirmed] = useState(false);
+  useEffect(() => {
+    if (confirmed) {
+      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "portal" });
+    }
+  }, [confirmed]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const [slotsLoading, setSlotsLoading] = useState(false);
+  const [slotsError, setSlotsError] = useState<string | null>(null);
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
 
-  const availableTimes = [
-    '9:00 AM',
-    '10:00 AM',
-    '11:00 AM',
-    '1:00 PM',
-    '2:00 PM',
-    '3:00 PM',
-    '4:00 PM',
-  ];
+  useEffect(() => {
+    if (!selectedDate || !sessionId) {
+      setAvailableTimes([]);
+      return;
+    }
+    const params = new URLSearchParams({ date: selectedDate });
+    setSlotsLoading(true);
+    setSlotsError(null);
+    fetch(`/api/book/availability?${params.toString()}`, {
+      headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
+    })
+      .then((r) => r.json() as Promise<string[]>)
+      .then(setAvailableTimes)
+      .catch(() => setSlotsError('Failed to load time slots'))
+      .finally(() => setSlotsLoading(false));
+  }, [selectedDate, sessionId]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -801,6 +847,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
 
       if (response.ok) {
         setConfirmed(true);
+        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });
         setTimeout(() => {
           window.location.reload();
         }, 1500);
@@ -876,6 +923,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                         onClick={() => {
                           setSelectedPet(pet);
                           setStep(2);
+                          fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "portal" });
                         }}
                         className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
                           selectedPet?.id === pet.id
@@ -1034,7 +1082,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                       Back
                     </button>
                     <button
-                      onClick={() => setStep(4)}
+                      onClick={() => {
+                        setStep(4);
+                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
+                      }}
                       className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
                     >
                       Next
@@ -1048,6 +1099,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                   <h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
                   <input
                     type="date"
+                    aria-label="Select date"
                     value={selectedDate}
                     onChange={(e) => setSelectedDate(e.target.value)}
                     min={new Date().toISOString().split('T')[0]}
@@ -1055,7 +1107,12 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                   />
                   {selectedDate && (
                     <div className="grid grid-cols-3 gap-2 mb-4">
-                      {availableTimes.map((time) => (
+                      {slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
+                      {!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
+                      {!slotsLoading && availableTimes.length === 0 && !slotsError && (
+                        <p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
+                      )}
+                      {!slotsLoading && availableTimes.map((time) => (
                         <button
                           key={time}
                           onClick={() => setSelectedTime(time)}
@@ -1093,7 +1150,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                       Back
                     </button>
                     <button
-                      onClick={() => setStep(5)}
+                      onClick={() => {
+                        setStep(5);
+                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
+                      }}
                       disabled={!selectedDate || !selectedTime}
                       className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                     >

vite.config.ts

@@ -39,6 +39,8 @@ export default defineConfig({
         ],
       },
       workbox: {
+        skipWaiting: true,
+        clientsClaim: true,
         globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
         navigateFallbackDenylist: [
           /^\/api\/auth\//,