Merge pull request 'Promote dev → uat (GRO-1793: dynamic time slots)' (#25) from dev into uat

Promote dev → uat: GRO-1793 dynamic portal time slots (#25)

.gitea/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main, dev]
+    branches: [main, dev, uat]
   pull_request:
-    branches: [main, dev]
+    branches: [main, dev, uat]
   workflow_dispatch:
     inputs:
       ref:
@@ -78,6 +78,8 @@ jobs:
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: network=host
 
       - name: Log in to Gitea Container Registry
         uses: docker/login-action@v3
@@ -92,6 +94,7 @@ jobs:
           context: .
           file: Dockerfile
           push: true
+          provenance: false
           tags: |
             git.farh.net/groombook/web:${{ steps.version.outputs.tag }}
             ${{ github.ref == 'refs/heads/main' && 'git.farh.net/groombook/web:latest' || '' }}

Dockerfile

@@ -18,4 +18,4 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist /usr/share/nginx/html
 EXPOSE 80
 HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
-  CMD curl -f http://localhost:80/ || exit 1
+  CMD wget --spider -q http://localhost:80/ || exit 1

UAT_PLAYBOOK.md

@@ -69,6 +69,7 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-AUTH-5.3.1 | Auth client falls back to window.location.origin | Do not set `VITE_API_URL`, load app | Auth client uses `window.location.origin` as base URL |
 | TC-AUTH-5.3.2 | Sign-in on localhost | Load app without `VITE_API_URL` on localhost:3000 | Auth client uses `http://localhost:3000` as base URL |
 | TC-AUTH-5.3.3 | Sign-in on dev environment | Load app without `VITE_API_URL` on `https://dev.groombook.dev` | Auth client uses `https://dev.groombook.dev` as base URL |
+| TC-AUTH-5.3.4 | SSO cookie set after Authentik callback (GRO-1592) | Complete Authentik SSO login on UAT without `VITE_API_URL` set | `__Secure-better-auth.session_token` cookie is present in browser; subsequent `/api/*` calls include the cookie and return 200 |
 
 ### 5.4 Session Persistence
 
@@ -77,6 +78,26 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-AUTH-5.4.1 | Session persists across page reload | Sign in, reload page | Session remains active |
 | TC-AUTH-5.4.2 | Session clears on sign-out | Sign in, sign out | User is logged out, redirected to login |
 
+### 5.4.1 SSO Login Journey (Authentik OIDC end-to-end)
+
+| # | Scenario | Steps | Pass Criteria | Fail Criteria |
+|---|----------|-------|---------------|---------------|
+| TC-WEB-SSO-1 | Sign-in page shows SSO button | Navigate to app root URL | Sign-in page displayed with "Sign in with SSO" button visible | No SSO button, 403 before page loads |
+| TC-WEB-SSO-2 | Click SSO redirects to Authentik | Click "Sign in with SSO" button | Browser redirected to Authentik login at auth.farh.net | No redirect, error shown, button does nothing |
+| TC-WEB-SSO-3 | Valid OIDC credentials authenticate | At Authentik, enter valid credentials and authenticate | Redirected back to app with active session | Redirect loop, 403, session not established |
+| TC-WEB-SSO-4 | Post-login dashboard accessible | After SSO flow completes, dashboard loads | Dashboard displays correctly with user identity shown | Blank page, 403, session not active |
+| TC-WEB-SSO-5 | User identity displayed correctly | After SSO login, check header/nav | User name/email/initials shown in nav, role reflected in UI | No user indicator, wrong user shown |
+
+### 5.4.2 OOBE Flow Post-Login
+
+| # | Scenario | Steps | Pass Criteria | Fail Criteria |
+|---|----------|-------|---------------|---------------|
+| TC-WEB-OOBE-1 | Fresh DB shows setup wizard | On fresh DB (no super user), navigate to app | Setup wizard / OOBE screen displayed | Regular login page shown instead of setup |
+| TC-WEB-OOBE-2 | Configure OIDC via setup | During OOBE, configure OIDC auth provider via /api/setup/auth-provider | OIDC configured successfully, no 403 | 403 during setup, config rejected |
+| TC-WEB-OOBE-3 | Setup completes and redirects | Complete OOBE setup with business name | Redirected to app dashboard as super user, setup bypassed on reload | Setup errors, wrong redirect, setup reappears |
+| TC-WEB-OOBE-4 | Admin panel accessible after setup | After completing OOBE, navigate to admin panel | Admin features accessible | 403 on admin panel, insufficient permissions |
+| TC-WEB-OOBE-5 | SSO login during OOBE does not interfere | During fresh OOBE, attempt SSO login before completing setup | SSO login redirected appropriately, setup can still complete | Auto-provision creates staff prematurely, setup flow broken |
+
 ### 5.5 Dashboard
 
 | # | Scenario | Steps | Expected |
@@ -162,6 +183,18 @@ 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.13 Reports UI
 
 | # | Scenario | Steps | Expected |

packages/types/src/index.ts

@@ -226,24 +226,3 @@ export interface MedicalAlert {
 }
 
 export type CoatType = "smooth" | "double" | "curly" | "wire" | "long" | "hairless";
-
-export interface NextAppointment {
-  id: string;
-  startTime: string;
-  serviceName: string;
-}
-
-export interface PetProfileSummary {
-  id: string;
-  name: string;
-  breed: string | null;
-  dateOfBirth: string | null;
-  weightKg: number | null;
-  coatType: CoatType | null;
-  temperamentScore: number | null;
-  temperamentFlags: string[];
-  medicalAlerts: MedicalAlert[];
-  preferredCuts: string[];
-  recentVisits: GroomingVisitLog[];
-  nextAppointment: NextAppointment | null;
-}

public/demo-pets/dog-basset-brown-white.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96C853FAECD363909C4A0</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-bichon-white-groomed.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96CFC84D7A9333708F278</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-boxer-fawn-athletic.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96D48D7892E37386B9ACB</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-cavalier-cream-gentle.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96C25663D703833F23607</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-cocker-buff-friendly.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96D89851C843332073968</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-dachshund-black-tan.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96C9C5A03D33730C61AD8</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-pomeranian-white-studio.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96BEB91911B30317E3BE8</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-schnauzer-black-groomed.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96BFB7B92D33535D6D90D</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-setter-red-sunlit.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96B8BDF4B473630A2E120</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

public/demo-pets/dog-sheepdog-merle-running.png

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Error>
-  <Code>AccessDenied</Code>
-  <Message>You have no right to access this object because of bucket acl.</Message>
-  <RequestId>69D96D78BFFCAD343037C27C</RequestId>
-  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
-  <EC>0003-00000001</EC>
-  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
-</Error>

renovate.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended", ":pinAllExceptPeerDependencies", "helpers:pinGitHubActionDigests"],
+  "labels": ["dependencies"],
+  "prConcurrentLimit": 5,
+  "packageRules": [
+    {"matchUpdateTypes": ["minor", "patch"], "groupName": "minor and patch dependencies", "automerge": false},
+    {"matchDepTypes": ["devDependencies"], "matchUpdateTypes": ["minor", "patch"], "automerge": true, "automergeType": "pr"}
+  ]
+}

src/__tests__/Appointments.test.tsx

@@ -379,4 +379,142 @@ describe("ConfirmationSection", () => {
       expect(screen.getByText(/Confirmed!/i)).toBeInTheDocument();
     });
   });
+});
+
+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__/PetProfileCard.test.tsx

@@ -1,157 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, within } from "@testing-library/react";
-import { PetProfileCard } from "../components/PetProfileCard.js";
-
-const FULL_SUMMARY = {
-  id: "pet-1",
-  name: "Buddy",
-  breed: "Golden Retriever",
-  dateOfBirth: "2022-03-15",
-  weightKg: 30.5,
-  coatType: "double",
-  temperamentScore: 4,
-  temperamentFlags: ["anxious", "friendly"],
-  medicalAlerts: [
-    { id: "a1", type: "allergy", description: "Chicken allergy", severity: "high" },
-    { id: "a2", type: "condition", description: "Hip dysplasia", severity: "medium" },
-  ],
-  preferredCuts: ["teddy bear", "puppy cut"],
-  recentVisits: [
-    { id: "v1", petId: "pet-1", appointmentId: "appt-1", staffId: "staff-1", cutStyle: "teddy bear", productsUsed: "oat shampoo", notes: "Good boy", groomedAt: "2025-05-01T10:00:00Z", createdAt: "2025-05-01T10:00:00Z" },
-    { id: "v2", petId: "pet-1", appointmentId: "appt-2", staffId: "staff-2", cutStyle: "puppy cut", productsUsed: null, notes: null, groomedAt: "2025-04-01T10:00:00Z", createdAt: "2025-04-01T10:00:00Z" },
-  ],
-  nextAppointment: { id: "appt-3", startTime: "2025-06-01T09:00:00Z", serviceName: "Full groom" },
-};
-
-const EMPTY_SUMMARY = {
-  id: "pet-2",
-  name: "Whiskers",
-  breed: null,
-  dateOfBirth: null,
-  weightKg: null,
-  coatType: null,
-  temperamentScore: null,
-  temperamentFlags: [],
-  medicalAlerts: [],
-  preferredCuts: [],
-  recentVisits: [],
-  nextAppointment: null,
-};
-
-beforeEach(() => {
-  vi.restoreAllMocks();
-});
-
-describe("PetProfileCard", () => {
-  it("shows loading skeleton while fetching", () => {
-    global.fetch = vi.fn(() => new Promise(() => {})) as unknown as typeof fetch;
-    render(<PetProfileCard petId="pet-1" />);
-    expect(screen.getByText(/loading/i)).toBeInTheDocument();
-  });
-
-  it("renders full profile data correctly", async () => {
-    global.fetch = vi.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        json: async () => FULL_SUMMARY,
-      } as Response)
-    ) as unknown as typeof fetch;
-
-    render(<PetProfileCard petId="pet-1" />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Buddy")).toBeInTheDocument();
-    });
-    expect(screen.getByText("Golden Retriever")).toBeInTheDocument();
-    // age computed from DOB
-    expect(screen.getByText(/yr/)).toBeInTheDocument();
-    // weight
-    expect(screen.getByText(/30.5 kg/)).toBeInTheDocument();
-    // coat type badge
-    expect(screen.getByText("double")).toBeInTheDocument();
-    // medical alerts
-    expect(screen.getByText("Chicken allergy")).toBeInTheDocument();
-    expect(screen.getByText("Hip dysplasia")).toBeInTheDocument();
-    // preferred cuts
-    expect(screen.getByText("teddy bear")).toBeInTheDocument();
-  });
-
-  it("displays severity-colored badges for medical alerts", async () => {
-    global.fetch = vi.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        json: async () => FULL_SUMMARY,
-      } as Response)
-    ) as unknown as typeof fetch;
-
-    render(<PetProfileCard petId="pet-1" />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Chicken allergy")).toBeInTheDocument();
-    });
-
-    const highAlert = screen.getByText("Chicken allergy").closest("span");
-    expect(highAlert).toHaveStyle({ color: "#dc2626" }); // high = red
-
-    const mediumAlert = screen.getByText("Hip dysplasia").closest("span");
-    expect(mediumAlert).toHaveStyle({ color: "#d97706" }); // medium = amber
-  });
-
-  it("handles empty pet data gracefully", async () => {
-    global.fetch = vi.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        json: async () => EMPTY_SUMMARY,
-      } as Response)
-    ) as unknown as typeof fetch;
-
-    render(<PetProfileCard petId="pet-2" />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Whiskers")).toBeInTheDocument();
-    });
-    // no section labels with no data
-    expect(screen.queryByText(/medical alerts/i)).not.toBeInTheDocument();
-    expect(screen.queryByText(/preferred cuts/i)).not.toBeInTheDocument();
-    expect(screen.queryByText(/recent visits/i)).not.toBeInTheDocument();
-  });
-
-  it("shows error message on fetch failure", async () => {
-    global.fetch = vi.fn(() => Promise.reject(new Error("network error"))) as unknown as typeof fetch;
-
-    render(<PetProfileCard petId="pet-1" />);
-
-    await waitFor(() => {
-      expect(screen.getByText(/failed to load/i)).toBeInTheDocument();
-    });
-  });
-
-  it("refetches when petId changes", async () => {
-    const fetchMock = vi.fn((url: string) => {
-      if ((url as string).includes("pet-1")) {
-        return Promise.resolve({
-          ok: true,
-          status: 200,
-          json: async () => ({ ...FULL_SUMMARY, name: "Buddy" }),
-        } as Response);
-      }
-      return Promise.resolve({
-        ok: true,
-        status: 200,
-        json: async () => ({ ...EMPTY_SUMMARY, name: "Whiskers" }),
-      } as Response);
-    }) as unknown as typeof fetch;
-    global.fetch = fetchMock;
-
-    const { rerender } = render(<PetProfileCard petId="pet-1" />);
-    await waitFor(() => expect(screen.getByText("Buddy")).toBeInTheDocument());
-    expect(fetchMock).toHaveBeenCalledWith("/api/pets/pet-1/profile-summary");
-
-    rerender(<PetProfileCard petId="pet-2" />);
-    await waitFor(() => expect(screen.getByText("Whiskers")).toBeInTheDocument());
-    expect(fetchMock).toHaveBeenCalledWith("/api/pets/pet-2/profile-summary");
-  });
-});

src/components/PetProfileCard.tsx

@@ -1,238 +0,0 @@
-import { useEffect, useState } from "react";
-import type { MedicalAlert, PetProfileSummary } from "@groombook/types";
-import { PetPhotoDisplay } from "./PetPhotoDisplay.js";
-
-interface Props {
-  petId: string;
-}
-
-type LoadState =
-  | { status: "idle" }
-  | { status: "loading" }
-  | { status: "loaded"; data: PetProfileSummary }
-  | { status: "error"; message: string };
-
-function computeAge(dateOfBirth: string | null): string | null {
-  if (!dateOfBirth) return null;
-  const birth = new Date(dateOfBirth);
-  const now = new Date();
-  const totalMonths = (now.getFullYear() - birth.getFullYear()) * 12 + (now.getMonth() - birth.getMonth());
-  if (totalMonths < 1) return "<1 mo";
-  if (totalMonths < 12) return `${totalMonths} mo`;
-  const years = Math.floor(totalMonths / 12);
-  const months = totalMonths % 12;
-  if (months === 0) return `${years} yr`;
-  return `${years} yr ${months} mo`;
-}
-
-function TemperamentDots({ score }: { score: number }) {
-  return (
-    <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
-      {[1, 2, 3, 4, 5].map((n) => (
-        <div
-          key={n}
-          style={{
-            width: 10,
-            height: 10,
-            borderRadius: "50%",
-            background: n <= score ? "var(--color-primary)" : "#e2e8f0",
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-const SEVERITY_STYLES: Record<MedicalAlert["severity"], { bg: string; color: string; border: string }> = {
-  high: { bg: "#fef2f2", color: "#dc2626", border: "#fca5a5" },
-  medium: { bg: "#fffbeb", color: "#d97706", border: "#fde68a" },
-  low: { bg: "#eff6ff", color: "#2563eb", border: "#bfdbfe" },
-};
-
-function MedicalAlertBadge({ alert }: { alert: MedicalAlert }) {
-  const s = SEVERITY_STYLES[alert.severity];
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "0.25rem",
-        fontSize: 11,
-        fontWeight: 600,
-        padding: "0.15rem 0.45rem",
-        borderRadius: 99,
-        background: s.bg,
-        color: s.color,
-        border: `1px solid ${s.border}`,
-      }}
-    >
-      {alert.description}
-    </span>
-  );
-}
-
-function SectionLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <div style={{ fontSize: 10, fontWeight: 700, color: "#9ca3af", letterSpacing: "0.05em", marginBottom: "0.25rem" }}>
-      {children}
-    </div>
-  );
-}
-
-export function PetProfileCard({ petId }: Props) {
-  const [state, setState] = useState<LoadState>({ status: "idle" });
-
-  useEffect(() => {
-    setState({ status: "loading" });
-    fetch(`/api/pets/${petId}/profile-summary`)
-      .then(async (res) => {
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return res.json() as Promise<PetProfileSummary>;
-      })
-      .then((data) => setState({ status: "loaded", data }))
-      .catch((e: unknown) => setState({ status: "error", message: e instanceof Error ? e.message : "Unknown error" }));
-  }, [petId]);
-
-  if (state.status === "idle" || state.status === "loading") {
-    return (
-      <div style={{
-        border: "1px solid #e5e7eb",
-        borderRadius: 10,
-        padding: "1rem",
-        background: "#fff",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
-      }}>
-        <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.75rem" }}>
-          <div style={{ width: 64, height: 64, borderRadius: 12, background: "linear-gradient(90deg,#f0ebe4 25%,#e8e0d8 50%,#f0ebe4 75%)", backgroundSize: "200% 100%", animation: "shimmer 1.5s infinite", flexShrink: 0 }} />
-          <div style={{ flex: 1 }}>
-            <div style={{ height: 14, borderRadius: 4, background: "#f0ebe4", width: "60%", marginBottom: 6, animation: "shimmer 1.5s infinite", backgroundSize: "200% 100%" }} />
-            <div style={{ height: 12, borderRadius: 4, background: "#f0ebe4", width: "40%", marginBottom: 6, animation: "shimmer 1.5s infinite", backgroundSize: "200% 100%" }} />
-            <div style={{ height: 12, borderRadius: 4, background: "#f0ebe4", width: "50%", animation: "shimmer 1.5s infinite", backgroundSize: "200% 100%" }} />
-          </div>
-        </div>
-        <div style={{ height: 10, borderRadius: 4, background: "#f0ebe4", width: "30%", marginBottom: 8, animation: "shimmer 1.5s infinite", backgroundSize: "200% 100%" }} />
-        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-          {[1, 2, 3].map((n) => <div key={n} style={{ height: 22, width: 72, borderRadius: 99, background: "#f0ebe4", animation: "shimmer 1.5s infinite", backgroundSize: "200% 100%" }} />)}
-        </div>
-      </div>
-    );
-  }
-
-  if (state.status === "error") {
-    return (
-      <div style={{
-        border: "1px solid #fca5a5",
-        borderRadius: 10,
-        padding: "1rem",
-        background: "#fef2f2",
-        color: "#dc2626",
-        fontSize: 13,
-      }}>
-        Failed to load profile: {state.message}
-      </div>
-    );
-  }
-
-  const { data } = state;
-  const age = computeAge(data.dateOfBirth);
-
-  return (
-    <div style={{
-      border: "1px solid #e5e7eb",
-      borderRadius: 10,
-      padding: "1rem",
-      background: "#fff",
-      boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
-    }}>
-      {/* Header */}
-      <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.75rem" }}>
-        <PetPhotoDisplay petId={petId} size={64} />
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <strong style={{ fontSize: 16 }}>{data.name}</strong>
-          <div style={{ fontSize: 13, color: "#6b7280", marginTop: "0.15rem" }}>
-            {data.breed ?? "Unknown breed"}
-            {age && <span> · {age}</span>}
-          </div>
-          {data.weightKg != null && (
-            <div style={{ fontSize: 12, color: "#6b7280" }}>{data.weightKg} kg</div>
-          )}
-        </div>
-      </div>
-
-      {/* Coat type */}
-      {data.coatType && (
-        <div style={{ marginBottom: "0.6rem" }}>
-          <SectionLabel>COAT TYPE</SectionLabel>
-          <span style={{ fontSize: 12, padding: "0.15rem 0.5rem", background: "#f0fdf4", color: "#166534", border: "1px solid #bbf7d0", borderRadius: 99, fontWeight: 500 }}>
-            {data.coatType}
-          </span>
-        </div>
-      )}
-
-      {/* Temperament */}
-      {(data.temperamentScore != null || data.temperamentFlags.length > 0) && (
-        <div style={{ marginBottom: "0.6rem" }}>
-          <SectionLabel>TEMPERAMENT</SectionLabel>
-          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", flexWrap: "wrap" }}>
-            {data.temperamentScore != null && <TemperamentDots score={data.temperamentScore} />}
-            {data.temperamentFlags.map((flag) => (
-              <span key={flag} style={{ fontSize: 11, padding: "0.1rem 0.4rem", background: "#f5f3ff", color: "#6d28d9", border: "1px solid #ddd6fe", borderRadius: 4, fontWeight: 500 }}>
-                {flag}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Medical alerts — most prominent */}
-      {data.medicalAlerts.length > 0 && (
-        <div style={{ marginBottom: "0.6rem" }}>
-          <SectionLabel>MEDICAL ALERTS</SectionLabel>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}>
-            {data.medicalAlerts.map((alert) => (
-              <MedicalAlertBadge key={alert.id} alert={alert} />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Preferred cuts */}
-      {data.preferredCuts.length > 0 && (
-        <div style={{ marginBottom: "0.6rem" }}>
-          <SectionLabel>PREFERRED CUTS</SectionLabel>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}>
-            {data.preferredCuts.map((cut) => (
-              <span key={cut} style={{ fontSize: 11, padding: "0.15rem 0.45rem", background: "#f8fafc", color: "#374151", border: "1px solid #e2e8f0", borderRadius: 4 }}>
-                {cut}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Recent visits */}
-      {data.recentVisits.length > 0 && (
-        <div style={{ marginBottom: "0.6rem" }}>
-          <SectionLabel>RECENT VISITS</SectionLabel>
-          {data.recentVisits.slice(0, 3).map((log) => (
-            <div key={log.id} style={{ fontSize: 12, color: "#374151", marginBottom: "0.2rem", borderLeft: "2px solid #e2e8f0", paddingLeft: "0.4rem" }}>
-              <span style={{ color: "#6b7280" }}>{new Date(log.groomedAt).toLocaleDateString()}</span>
-              {log.cutStyle && <span> · {log.cutStyle}</span>}
-              {log.staffId && <span> ·</span>}
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Next appointment */}
-      {data.nextAppointment && (
-        <div>
-          <SectionLabel>NEXT APPOINTMENT</SectionLabel>
-          <div style={{ fontSize: 12, color: "#374151" }}>
-            {new Date(data.nextAppointment.startTime).toLocaleDateString()} — {data.nextAppointment.serviceName}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

src/lib/auth-client.ts

@@ -1,7 +1,7 @@
 import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
-  baseURL: import.meta.env.VITE_API_URL ?? "",
+  baseURL: import.meta.env.VITE_API_URL || (typeof window !== "undefined" ? window.location.origin : ""),
 });
 
 export const { signIn, signOut, useSession, changePassword } = authClient;

src/pages/Appointments.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import type { Appointment, Client, Pet, Service, Staff } from "@groombook/types";
-import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
-import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
-import { PetProfileCard } from "../components/PetProfileCard.js";
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
@@ -116,7 +113,6 @@ export function AppointmentsPage() {
   // null key = unassigned; staffId string = that groomer; undefined set = all visible
   const [hiddenGroomers, setHiddenGroomers] = useState<Set<string | null>>(new Set());
   const [paymentStats, setPaymentStats] = useState<{ revenueThisMonth: number; outstanding: number; refundsThisMonth: number; methodBreakdown: { method: string | null; total: number }[] } | null>(null);
-  const [selectedPetId, setSelectedPetId] = useState<string | null>(null);
 
   const weekEnd = addDays(weekStart, 6);
 
@@ -514,10 +510,7 @@ export function AppointmentsPage() {
             <Field label="Pet">
               <select
                 value={form.petId}
-                onChange={(e) => {
+                onChange={(e) => setForm((f) => ({ ...f, petId: e.target.value }))}
-                  setForm((f) => ({ ...f, petId: e.target.value }));
-                  setSelectedPetId(e.target.value || null);
-                }}
                 required
                 disabled={!form.clientId}
                 style={inputStyle}
@@ -528,7 +521,6 @@ export function AppointmentsPage() {
                 ))}
               </select>
             </Field>
-            {form.petId && <PetProfileCard petId={form.petId} />}
             <Field label="Service">
               <select
                 value={form.serviceId}

src/pages/Book.tsx

@@ -519,7 +519,7 @@ export function BookPage() {
                     <option value="small">Small (under 15 lbs)</option>
                     <option value="medium">Medium (15–40 lbs)</option>
                     <option value="large">Large (40–80 lbs)</option>
-                    <option value="x-large">X-Large (over 80 lbs)</option>
+                    <option value="xlarge">X-Large (over 80 lbs)</option>
                   </select>
                 </div>
                 <div>

src/pages/ClientDetailPage.tsx

@@ -3,7 +3,6 @@ import { useParams, Link } from "react-router-dom";
 import type { Client, GroomingVisitLog, Pet } from "@groombook/types";
 import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js";
 import { PetPhotoUpload } from "../components/PetPhotoUpload.js";
-import { PetProfileCard } from "../components/PetProfileCard.js";
 
 export function ClientDetailPage() {
   const { clientId } = useParams<{ clientId: string }>();
@@ -14,7 +13,6 @@ export function ClientDetailPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [photoRevisions, setPhotoRevisions] = useState<Record<string, number>>({});
-  const [expandedPetId, setExpandedPetId] = useState<string | null>(null);
 
   const handlePhotoUploaded = useCallback((petId: string) => {
     setPhotoRevisions((prev) => ({ ...prev, [petId]: (prev[petId] ?? 0) + 1 }));
@@ -138,107 +136,97 @@ export function ClientDetailPage() {
       ) : (
         <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "0.75rem" }}>
           {pets.map((p) => (
-            <div key={p.id}>
+            <div key={p.id} style={{ border: "1px solid #e5e7eb", borderRadius: 10, padding: "0.85rem", background: "#fff", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)" }}>
-              {/* Compact pet card — always visible, clickable to expand */}
+              {/* Photo + header */}
-              <div style={{ border: "1px solid #e5e7eb", borderRadius: 10, padding: "0.85rem", background: "#fff", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)", cursor: "pointer" }}
+              <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.4rem" }}>
-                onClick={() => setExpandedPetId(expandedPetId === p.id ? null : p.id)}>
+                <PetPhotoDisplay
-                {/* Photo + header */}
+                  petId={p.id}
-                <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.4rem" }}>
+                  size={56}
-                  <PetPhotoDisplay
+                  key={`${p.id}-photo-${photoRevisions[p.id] ?? 0}`}
-                    petId={p.id}
+                />
-                    size={56}
+                <div style={{ flex: 1, minWidth: 0 }}>
-                    key={`${p.id}-photo-${photoRevisions[p.id] ?? 0}`}
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
-                  />
+                    <strong style={{ fontSize: 15 }}>{p.name}</strong>
-                  <div style={{ flex: 1, minWidth: 0 }}>
+                  </div>
-                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                  <div style={{ fontSize: 13, color: "#6b7280", marginTop: "0.15rem" }}>
-                      <strong style={{ fontSize: 15 }}>{p.name}</strong>
+                    {p.species}{p.breed ? ` · ${p.breed}` : ""}
-                      <span style={{ fontSize: 11, color: "#9ca3af" }}>{expandedPetId === p.id ? "▲" : "▼"}</span>
+                  </div>
-                    </div>
+                  {p.weightKg != null && <div style={{ fontSize: 12, color: "#6b7280" }}>{p.weightKg} kg</div>}
-                    <div style={{ fontSize: 13, color: "#6b7280", marginTop: "0.15rem" }}>
+                  {p.dateOfBirth && <div style={{ fontSize: 12, color: "#6b7280" }}>Born {new Date(p.dateOfBirth).toLocaleDateString()}</div>}
-                      {p.species}{p.breed ? ` · ${p.breed}` : ""}
+                  <div style={{ marginTop: "0.3rem" }}>
-                    </div>
+                    <PetPhotoUpload petId={p.id} onUploaded={() => handlePhotoUploaded(p.id)} />
-                    {p.weightKg != null && <div style={{ fontSize: 12, color: "#6b7280" }}>{p.weightKg} kg</div>}
-                    {p.dateOfBirth && <div style={{ fontSize: 12, color: "#6b7280" }}>Born {new Date(p.dateOfBirth).toLocaleDateString()}</div>}
-                    <div style={{ marginTop: "0.3rem" }}>
-                      <PetPhotoUpload petId={p.id} onUploaded={() => handlePhotoUploaded(p.id)} />
-                    </div>
                   </div>
                 </div>
-
-                {p.healthAlerts && (
-                  <div style={{ fontSize: 12, marginTop: "0.35rem", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#dc2626" }}>
-                    <span style={{ fontWeight: 600 }}>⚠ Health alerts:</span> {p.healthAlerts}
-                  </div>
-                )}
-
-                {/* Grooming preferences */}
-                {(p.cutStyle || p.shampooPreference || p.specialCareNotes || p.groomingNotes) && (
-                  <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
-                    {p.cutStyle && (
-                      <div style={{ fontSize: 12, color: "#374151" }}>
-                        <span style={{ fontWeight: 600 }}>Cut:</span> {p.cutStyle}
-                      </div>
-                    )}
-                    {p.shampooPreference && (
-                      <div style={{ fontSize: 12, color: "#374151" }}>
-                        <span style={{ fontWeight: 600 }}>Shampoo:</span> {p.shampooPreference}
-                      </div>
-                    )}
-                    {p.specialCareNotes && (
-                      <div style={{ fontSize: 12, marginTop: "0.2rem", background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#92400e" }}>
-                        <span style={{ fontWeight: 600 }}>Special care:</span> {p.specialCareNotes}
-                      </div>
-                    )}
-                    {p.groomingNotes && (
-                      <div style={{ fontSize: 12, marginTop: "0.2rem", color: "#374151" }}>
-                        <span style={{ fontWeight: 600 }}>Notes:</span> {p.groomingNotes}
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {/* Visit history */}
-                {(() => {
-                  const logs = visitLogs[p.id];
-                  const loadingLogs = logsLoading[p.id];
-                  return (
-                    <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
-                      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.25rem" }}>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: "#6b7280" }}>VISIT HISTORY</div>
-                        {!logs && !loadingLogs && (
-                          <button
-                            onClick={(e) => { e.stopPropagation(); void loadVisitLogs(p.id); }}
-                            style={{ fontSize: 11, color: "#4f8a6f", background: "none", border: "none", cursor: "pointer", padding: 0 }}
-                          >
-                            Load history
-                          </button>
-                        )}
-                      </div>
-                      {loadingLogs && <div style={{ fontSize: 11, color: "#9ca3af" }}>Loading…</div>}
-                      {logs && logs.length === 0 && <div style={{ fontSize: 11, color: "#9ca3af" }}>No visits yet</div>}
-                      {logs && logs.length > 0 && (
-                        <>
-                          {logs.slice(0, 3).map((log) => (
-                            <div key={log.id} style={{ fontSize: 11, color: "#374151", marginBottom: "0.2rem", borderLeft: "2px solid #e2e8f0", paddingLeft: "0.4rem" }}>
-                              <span style={{ color: "#6b7280" }}>{new Date(log.groomedAt).toLocaleDateString()}</span>
-                              {log.cutStyle && <span> · {log.cutStyle}</span>}
-                              {log.notes && <span> · {log.notes}</span>}
-                            </div>
-                          ))}
-                          {logs.length > 3 && (
-                            <div style={{ fontSize: 11, color: "#6b7280" }}>+{logs.length - 3} more visits</div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  );
-                })()}
               </div>
 
-              {/* Expanded pet profile card */}
+              {p.healthAlerts && (
-              {expandedPetId === p.id && (
+                <div style={{ fontSize: 12, marginTop: "0.35rem", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#dc2626" }}>
-                <PetProfileCard petId={p.id} />
+                  <span style={{ fontWeight: 600 }}>⚠ Health alerts:</span> {p.healthAlerts}
+                </div>
               )}
+
+              {/* Grooming preferences */}
+              {(p.cutStyle || p.shampooPreference || p.specialCareNotes || p.groomingNotes) && (
+                <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
+                  {p.cutStyle && (
+                    <div style={{ fontSize: 12, color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Cut:</span> {p.cutStyle}
+                    </div>
+                  )}
+                  {p.shampooPreference && (
+                    <div style={{ fontSize: 12, color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Shampoo:</span> {p.shampooPreference}
+                    </div>
+                  )}
+                  {p.specialCareNotes && (
+                    <div style={{ fontSize: 12, marginTop: "0.2rem", background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 4, padding: "0.3rem 0.5rem", color: "#92400e" }}>
+                      <span style={{ fontWeight: 600 }}>Special care:</span> {p.specialCareNotes}
+                    </div>
+                  )}
+                  {p.groomingNotes && (
+                    <div style={{ fontSize: 12, marginTop: "0.2rem", color: "#374151" }}>
+                      <span style={{ fontWeight: 600 }}>Notes:</span> {p.groomingNotes}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Visit history */}
+              {(() => {
+                const logs = visitLogs[p.id];
+                const loadingLogs = logsLoading[p.id];
+                return (
+                  <div style={{ marginTop: "0.5rem", borderTop: "1px solid #f3f4f6", paddingTop: "0.4rem" }}>
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.25rem" }}>
+                      <div style={{ fontSize: 11, fontWeight: 600, color: "#6b7280" }}>VISIT HISTORY</div>
+                      {!logs && !loadingLogs && (
+                        <button
+                          onClick={() => { void loadVisitLogs(p.id); }}
+                          style={{ fontSize: 11, color: "#4f8a6f", background: "none", border: "none", cursor: "pointer", padding: 0 }}
+                        >
+                          Load history
+                        </button>
+                      )}
+                    </div>
+                    {loadingLogs && <div style={{ fontSize: 11, color: "#9ca3af" }}>Loading…</div>}
+                    {logs && logs.length === 0 && <div style={{ fontSize: 11, color: "#9ca3af" }}>No visits yet</div>}
+                    {logs && logs.length > 0 && (
+                      <>
+                        {logs.slice(0, 3).map((log) => (
+                          <div key={log.id} style={{ fontSize: 11, color: "#374151", marginBottom: "0.2rem", borderLeft: "2px solid #e2e8f0", paddingLeft: "0.4rem" }}>
+                            <span style={{ color: "#6b7280" }}>{new Date(log.groomedAt).toLocaleDateString()}</span>
+                            {log.cutStyle && <span> · {log.cutStyle}</span>}
+                            {log.notes && <span> · {log.notes}</span>}
+                          </div>
+                        ))}
+                        {logs.length > 3 && (
+                          <div style={{ fontSize: 11, color: "#6b7280" }}>+{logs.length - 3} more visits</div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                );
+              })()}
             </div>
           ))}
         </div>

src/portal/sections/Appointments.tsx

@@ -573,16 +573,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 = [
+  useEffect(() => {
-    '9:00 AM',
+    if (!selectedDate || !sessionId) {
-    '10:00 AM',
+      setAvailableTimes([]);
-    '11:00 AM',
+      return;
-    '1:00 PM',
+    }
-    '2:00 PM',
+    const params = new URLSearchParams({ date: selectedDate });
-    '3:00 PM',
+    setSlotsLoading(true);
-    '4:00 PM',
+    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 +664,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 +672,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)}
@@ -723,16 +739,26 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   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 = [
+  useEffect(() => {
-    '9:00 AM',
+    if (!selectedDate || !sessionId) {
-    '10:00 AM',
+      setAvailableTimes([]);
-    '11:00 AM',
+      return;
-    '1:00 PM',
+    }
-    '2:00 PM',
+    const params = new URLSearchParams({ date: selectedDate });
-    '3:00 PM',
+    setSlotsLoading(true);
-    '4:00 PM',
+    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 () => {
@@ -1048,6 +1074,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 +1082,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)}