From 0d52ddd9f047d4ca1f1871ccdf61893621939cab Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Mon, 8 Jun 2026 16:41:14 +0000
Subject: [PATCH 01/12] fix(portal): send preferredTime as HH:MM:SS and format
 booking slot labels (GRO-2211) (#51)

---
 src/__tests__/Appointments.test.tsx  | 115 ++++++++++++++++++++++++++-
 src/portal/sections/Appointments.tsx |  45 +++++++++--
 2 files changed, 153 insertions(+), 7 deletions(-)

diff --git a/src/__tests__/Appointments.test.tsx b/src/__tests__/Appointments.test.tsx
index 4cd645f..c00bb01 100644
--- a/src/__tests__/Appointments.test.tsx
+++ b/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, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -690,4 +690,115 @@ describe("RescheduleFlow dynamic time slots", () => {
       expect(screen.getByText("1:00 PM")).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
+describe("slot helpers (GRO-2213)", () => {
+  it("formatSlotLabel formats a canonical UTC ISO slot to a UTC clock label", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).toBe("10:00 AM");
+    expect(formatSlotLabel("2026-06-09T14:30:00.000Z")).toBe("2:30 PM");
+    expect(formatSlotLabel("2026-06-09T09:00:00.000Z")).toBe("9:00 AM");
+  });
+
+  it("formatSlotLabel never echoes a raw ISO string", () => {
+    expect(formatSlotLabel("2026-06-09T10:00:00.000Z")).not.toMatch(/\d{4}-\d{2}-\d{2}T/);
+  });
+
+  it("formatSlotLabel passes through an already-formatted label unchanged", () => {
+    expect(formatSlotLabel("10:00 AM")).toBe("10:00 AM");
+  });
+
+  it("slotToTime extracts the UTC HH:MM:SS time component from an ISO slot", () => {
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toBe("10:00:00");
+    expect(slotToTime("2026-06-09T14:30:00.000Z")).toBe("14:30:00");
+    expect(slotToTime("2026-06-09T10:00:00.000Z")).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+  });
+
+  it("slotToTime guards a value that is already HH:MM:SS", () => {
+    expect(slotToTime("10:00:00")).toBe("10:00:00");
+  });
+
+  it("slotToTime converts a 12-hour label fallback to HH:MM:SS", () => {
+    expect(slotToTime("9:00 AM")).toBe("09:00:00");
+    expect(slotToTime("2:30 PM")).toBe("14:30:00");
+  });
+});
+
+describe("BookingFlow Book New funnel (GRO-2213)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  function routedFetch(captured: { waitlistBody?: Record<string, unknown> }) {
+    return (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url.includes("/api/portal/pets")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ pets: [{ id: "pet-1", name: "Buddy", breed: "Lab" }] }),
+        } as Response);
+      }
+      if (url.includes("/api/portal/services")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({
+            services: [{ id: "service-1", name: "Bath & Brush", isAddOn: false, duration: 60, price: 50 }],
+          }),
+        } as Response);
+      }
+      if (url.includes("/api/book/availability")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ["2026-06-09T10:00:00.000Z", "2026-06-09T14:30:00.000Z"],
+        } as Response);
+      }
+      if (url.includes("/api/portal/waitlist")) {
+        captured.waitlistBody = JSON.parse((init?.body as string) ?? "{}");
+        return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    };
+  }
+
+  it("renders formatted slot labels (not raw ISO) and submits preferredTime as HH:MM:SS", async () => {
+    const captured: { waitlistBody?: Record<string, unknown> } = {};
+    vi.mocked(global.fetch).mockImplementation(routedFetch(captured) as typeof fetch);
+
+    render(<BookingFlow onClose={() => {}} sessionId="test-session-id" />);
+
+    // Step 1 — pick pet (auto-advances to step 2)
+    await waitFor(() => expect(screen.getByText("Buddy")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Buddy"));
+
+    // Step 2 — pick service, then Next
+    await waitFor(() => expect(screen.getByText("Bath & Brush")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Bath & Brush"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 3 — groomer, Next
+    await waitFor(() => expect(screen.getByText("First Available")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 4 — date + slot
+    await waitFor(() => expect(screen.getByLabelText(/date/i)).toBeInTheDocument());
+    fireEvent.change(screen.getByLabelText(/date/i), { target: { value: "2026-06-09" } });
+
+    // Slot button shows the formatted UTC label, never the raw ISO
+    await waitFor(() => expect(screen.getByText("10:00 AM")).toBeInTheDocument());
+    expect(screen.queryByText(/2026-06-09T10:00:00/)).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("10:00 AM"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+
+    // Step 5 — review shows the formatted label
+    await waitFor(() => expect(screen.getByText(/Review & Confirm/i)).toBeInTheDocument());
+    expect(screen.getByText(/10:00 AM/)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Booking/i }));
+
+    await waitFor(() => expect(captured.waitlistBody).toBeDefined());
+    const body = captured.waitlistBody ?? {};
+    expect(body.preferredTime).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+    expect(body.preferredTime).toBe("10:00:00");
+    expect(body.preferredDate).toBe("2026-06-09");
+  });
+});
diff --git a/src/portal/sections/Appointments.tsx b/src/portal/sections/Appointments.tsx
index 3f588d6..7ed22e3 100644
--- a/src/portal/sections/Appointments.tsx
+++ b/src/portal/sections/Appointments.tsx
@@ -110,6 +110,41 @@ export function parseTimeTo24Hour(time: string | null | undefined): string {
   return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
 }
 
+// A booking slot is the canonical UTC ISO instant returned by
+// `/api/book/availability` (e.g. "2026-06-09T10:00:00.000Z" is the 10:00 UTC
+// business slot — see api `src/lib/slots.ts`, which builds them with
+// `setUTCHours`). Display label and submit payload both derive from the slot via
+// these helpers so they never desync. Always format/extract in UTC: slots are
+// generated as UTC business hours, so a browser-local conversion would mislabel
+// the slot and diverge from the stored Postgres `time` column.
+export function formatSlotLabel(slot: string): string {
+  const d = new Date(slot);
+  // Non-ISO input (e.g. an already-formatted "10:00 AM" label) — show as-is.
+  if (Number.isNaN(d.getTime())) return slot;
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+    timeZone: 'UTC',
+  }).format(d);
+}
+
+// Extracts the UTC `HH:MM:SS` time component the api stores in the Postgres
+// `time` column. The api inserts this verbatim, so a full ISO datetime here is
+// an `invalid input syntax for type time` 500 (GRO-2211).
+export function slotToTime(slot: string): string {
+  if (/^\d{2}:\d{2}:\d{2}$/.test(slot)) return slot; // already HH:MM:SS
+  const d = new Date(slot);
+  if (!Number.isNaN(d.getTime())) {
+    const hh = String(d.getUTCHours()).padStart(2, '0');
+    const mm = String(d.getUTCMinutes()).padStart(2, '0');
+    const ss = String(d.getUTCSeconds()).padStart(2, '0');
+    return `${hh}:${mm}:${ss}`;
+  }
+  // "10:00 AM"-style label fallback.
+  return parseTimeTo24Hour(slot);
+}
+
 export function isUpcoming(appt: Appointment): boolean {
   const now = new Date();
   // Prefer the absolute ISO `startTime` from the API; fall back to the
@@ -860,7 +895,7 @@ interface BookingFlowProps {
   sessionId: string | null;
 }
 
-function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
+export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [step, setStep] = useState(1);
   const [pets, setPets] = useState<Pet[]>([]);
   const [services, setServices] = useState<Service[]>([]);
@@ -972,7 +1007,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
           addOnIds: selectedAddOns.map((s) => s.id),
           groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
           preferredDate: selectedDate,
-          preferredTime: selectedTime,
+          preferredTime: slotToTime(selectedTime),
           notes: notes || undefined,
           recurring: recurring || undefined,
         }),
@@ -1035,7 +1070,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                 Appointment Requested!
               </h3>
               <p className="text-sm text-stone-500 mb-4">
-                {selectedPet?.name} on {formatDate(selectedDate)} at {selectedTime}
+                {selectedPet?.name} on {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
               </p>
               <button
                 onClick={onClose}
@@ -1255,7 +1290,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                               : 'border-stone-200 hover:border-stone-300'
                           }`}
                         >
-                          {time}
+                          {formatSlotLabel(time)}
                         </button>
                       ))}
                     </div>
@@ -1325,7 +1360,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                     <div className="flex justify-between">
                       <span className="text-stone-500">Date & Time</span>
                       <span className="font-medium">
-                        {formatDate(selectedDate)} at {selectedTime}
+                        {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
                       </span>
                     </div>
                     {recurring && (

From c7417dc9e32b0f34eaa89795218381730971f44d Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Mon, 8 Jun 2026 16:54:07 +0000
Subject: [PATCH 02/12] =?UTF-8?q?docs(uat):=20add=20=C2=A75.12e=20Book=20N?=
 =?UTF-8?q?ew=20preferredTime=20test=20cases=20(GRO-2218)=20(#53)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 UAT_PLAYBOOK.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 1e3a021..c1452e9 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -237,6 +237,24 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 > absolute `startTime` in `isUpcoming`, and hardens `parseTimeTo24Hour` against
 > blank/undefined input.
 
+#### 5.12e Book New `preferredTime` Formatting (GRO-2211, GRO-2213)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.22 | Slot buttons show formatted label | Sign in as `uat-customer@groombook.dev`, open `Appointments`, click "Book New", select a pet and service, pick a date with availability | Each time-slot button shows a human-readable label like `10:00 AM` (UTC), never a raw ISO timestamp (e.g. not `2026-06-09T10:00:00.000Z`) |
+| TC-WEB-5.12.23 | Confirmation review shows formatted label | Continue the Book New wizard to the Review step | The "Date & Time" summary and the final confirmation both display the formatted slot label (e.g. `10:00 AM`), not a raw ISO string |
+| TC-WEB-5.12.24 | Booking submit succeeds (regression) | Complete the Book New wizard and submit the request | Request succeeds with no `500` / `invalid input syntax for type time` error; the booking POST sends `preferredTime` as `HH:MM:SS` (e.g. `10:00:00`); the new appointment appears in the Upcoming list |
+
+> **GRO-2211/GRO-2213 note:** The Book New wizard previously rendered the raw
+> UTC ISO slot string as the button/confirmation label and submitted that same
+> ISO value as `preferredTime`, which the API rejected with
+> `invalid input syntax for type time` (HTTP 500). The fix adds shared UTC
+> helpers `formatSlotLabel(slot)` (display → `10:00 AM`) and `slotToTime(slot)`
+> (payload → `HH:MM:SS`) in `src/portal/sections/Appointments.tsx`, so the
+> displayed label and the submitted `preferredTime` both derive from the same
+> canonical UTC ISO slot. (The sibling `RescheduleFlow` `startTime` raw-ISO issue
+> on a different endpoint is tracked separately and is out of scope here.)
+
 ### 5.13 Reports UI
 
 | # | Scenario | Steps | Expected |

From 3d0c3c551b4f09ea030cf81e3c4c9c63a4719839 Mon Sep 17 00:00:00 2001
From: Lint Roller <23+gb_lint@noreply.git.farh.net>
Date: Mon, 8 Jun 2026 17:31:44 +0000
Subject: [PATCH 03/12] fix(portal): show Weight/DoB + Size Category in pet
 read view (GRO-2207) (#54)

---
 packages/types/src/index.ts         |  4 ++
 src/__tests__/PetForm.test.tsx      |  8 +++
 src/__tests__/PetProfiles.test.tsx  | 80 +++++++++++++++++++++++++++++
 src/portal/sections/PetForm.tsx     |  2 +-
 src/portal/sections/PetProfiles.tsx | 19 +++++--
 5 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 src/__tests__/PetProfiles.test.tsx

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index a83b36d..2b58d63 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -34,6 +34,10 @@ export interface Pet {
   breed: string | null;
   weightKg: number | null;
   dateOfBirth: string | null;
+  /** Portal-shaped serialization of weightKg (GET/PATCH /api/portal/pets). */
+  weight?: string | number | null;
+  /** Portal-shaped serialization of dateOfBirth (GET/PATCH /api/portal/pets). */
+  birthDate?: string | null;
   healthAlerts: string | null;
   groomingNotes: string | null;
   cutStyle: string | null;
diff --git a/src/__tests__/PetForm.test.tsx b/src/__tests__/PetForm.test.tsx
index f49e135..b2ea982 100644
--- a/src/__tests__/PetForm.test.tsx
+++ b/src/__tests__/PetForm.test.tsx
@@ -154,4 +154,12 @@ describe("PetForm", () => {
     expect(screen.getByText("Anxious")).toBeTruthy();
     expect(screen.getByText("Good with kids")).toBeTruthy();
   });
+
+  // ── Weight pre-fill from portal `weight` key (GRO-2207) ───────────────────────
+
+  it("pre-fills weight from the portal `weight` key when weightKg is absent", () => {
+    const portalPet: Pet = { ...BASE_PET, weightKg: null, weight: "12.50" };
+    render(<PetForm pet={portalPet} onSave={onSave} onCancel={onCancel} />);
+    expect(screen.getByDisplayValue(12.5)).toBeTruthy();
+  });
 });
\ No newline at end of file
diff --git a/src/__tests__/PetProfiles.test.tsx b/src/__tests__/PetProfiles.test.tsx
new file mode 100644
index 0000000..3c2329e
--- /dev/null
+++ b/src/__tests__/PetProfiles.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BasicInfoTab, formatSizeCategory } from "../portal/sections/PetProfiles.js";
+import type { Pet } from "@groombook/types";
+
+// The portal endpoint (GET /api/portal/pets) serializes DB columns under
+// portal-shaped keys: weightKg→weight, dateOfBirth→birthDate. The read view
+// must surface those keys (GRO-2207), not the raw staff-side weightKg/dateOfBirth.
+const PORTAL_PET: Pet = {
+  id: "pet-1",
+  clientId: "client-1",
+  name: "Pup Alpha",
+  species: "dog",
+  breed: "Poodle",
+  // Staff-shaped keys intentionally null — only the portal keys are populated,
+  // proving the read view reads `weight`/`birthDate`.
+  weightKg: null,
+  dateOfBirth: null,
+  weight: "12.50",
+  birthDate: "2022-03-10T00:00:00.000Z",
+  petSizeCategory: "extra_large",
+  healthAlerts: null,
+  groomingNotes: null,
+  cutStyle: null,
+  shampooPreference: null,
+  specialCareNotes: null,
+  customFields: {},
+  coatType: null,
+  preferredCuts: [],
+  medicalAlerts: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+describe("BasicInfoTab read view (GRO-2207)", () => {
+  it("renders Weight from the portal `weight` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("12.50 kg")).toBeInTheDocument();
+  });
+
+  it("renders Date of Birth from the portal `birthDate` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("March 10, 2022")).toBeInTheDocument();
+  });
+
+  it("renders Size Category formatted from petSizeCategory", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("Size Category")).toBeInTheDocument();
+    expect(screen.getByText("Extra Large")).toBeInTheDocument();
+  });
+
+  it("falls back to staff-shaped keys when portal keys are absent", () => {
+    const staffShaped: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: 25, dateOfBirth: "2020-01-05T00:00:00.000Z" };
+    render(<BasicInfoTab pet={staffShaped} readOnly />);
+    expect(screen.getByText("25 kg")).toBeInTheDocument();
+    expect(screen.getByText("January 5, 2020")).toBeInTheDocument();
+  });
+
+  it("shows Unknown for missing weight/DoB and size", () => {
+    const empty: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: null, dateOfBirth: null, petSizeCategory: null };
+    render(<BasicInfoTab pet={empty} readOnly />);
+    // Weight, Date of Birth and Size Category rows all read "Unknown".
+    expect(screen.getAllByText("Unknown").length).toBeGreaterThanOrEqual(3);
+  });
+});
+
+describe("formatSizeCategory", () => {
+  it("title-cases each underscore-separated segment", () => {
+    expect(formatSizeCategory("extra_large")).toBe("Extra Large");
+    expect(formatSizeCategory("small")).toBe("Small");
+    expect(formatSizeCategory("medium")).toBe("Medium");
+    expect(formatSizeCategory("large")).toBe("Large");
+  });
+
+  it("returns Unknown for null/undefined/empty", () => {
+    expect(formatSizeCategory(null)).toBe("Unknown");
+    expect(formatSizeCategory(undefined)).toBe("Unknown");
+    expect(formatSizeCategory("")).toBe("Unknown");
+  });
+});
diff --git a/src/portal/sections/PetForm.tsx b/src/portal/sections/PetForm.tsx
index 5e195a4..e0773ea 100644
--- a/src/portal/sections/PetForm.tsx
+++ b/src/portal/sections/PetForm.tsx
@@ -22,7 +22,7 @@ function newAlert(): Omit<MedicalAlert, "id"> {
 export function PetForm({ pet, onSave, onCancel, saving, saveError }: Props) {
   const [name, setName] = useState(pet?.name ?? "");
   const [breed, setBreed] = useState(pet?.breed ?? "");
-  const [weight, setWeight] = useState(pet?.weightKg ?? 0);
+  const [weight, setWeight] = useState(Number(pet?.weight ?? pet?.weightKg ?? 0));
   const [notes, setNotes] = useState(pet?.healthAlerts ?? "");
   const [coatType, setCoatType] = useState<CoatType | "">((pet?.coatType as CoatType) ?? "");
   const [petSizeCategory, setPetSizeCategory] = useState<SizeOption | "">(pet?.petSizeCategory as SizeOption ?? "");
diff --git a/src/portal/sections/PetProfiles.tsx b/src/portal/sections/PetProfiles.tsx
index 412b475..7fe0cf2 100644
--- a/src/portal/sections/PetProfiles.tsx
+++ b/src/portal/sections/PetProfiles.tsx
@@ -176,9 +176,9 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
             </div>
             <div className="flex-1">
               <h2 className="text-xl font-semibold text-stone-800">{selectedPet.name}</h2>
-              <p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {selectedPet.weightKg ? `${selectedPet.weightKg} kg` : "Unknown weight"}</p>
+              <p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {(() => { const w = selectedPet.weight ?? selectedPet.weightKg; return w != null && w !== "" ? `${w} kg` : "Unknown weight"; })()}</p>
               <p className="text-stone-400 text-xs mt-0.5">
-                Born {selectedPet.dateOfBirth ? new Date(selectedPet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
+                Born {(() => { const d = selectedPet.birthDate ?? selectedPet.dateOfBirth; return d ? new Date(d).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"; })()}
               </p>
             </div>
             {!readOnly && (
@@ -222,6 +222,14 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
   );
 }
 
+export function formatSizeCategory(size?: string | null): string {
+  if (!size) return "Unknown";
+  return size
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
     <div className="flex flex-col sm:flex-row sm:items-center py-2.5 border-b border-stone-100 last:border-0">
@@ -244,7 +252,7 @@ function SeverityBadge({ severity }: { severity: "low" | "medium" | "high" }) {
   );
 }
 
-function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
+export function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   const score = pet.temperamentScore;
   const flags = pet.temperamentFlags ?? [];
 
@@ -252,8 +260,9 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
     <div>
       <InfoRow label="Name" value={pet.name} />
       <InfoRow label="Breed" value={pet.breed || "Unknown"} />
-      <InfoRow label="Weight" value={pet.weightKg ? `${pet.weightKg} kg` : "Unknown"} />
-      <InfoRow label="Date of Birth" value={pet.dateOfBirth ? new Date(pet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
+      <InfoRow label="Weight" value={(() => { const w = pet.weight ?? pet.weightKg; return w != null && w !== "" ? `${w} kg` : "Unknown"; })()} />
+      <InfoRow label="Date of Birth" value={(() => { const d = pet.birthDate ?? pet.dateOfBirth; return d ? new Date(d).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"; })()} />
+      <InfoRow label="Size Category" value={formatSizeCategory(pet.petSizeCategory)} />
 
       {/* Temperament (staff-set, read-only) */}
       {(score != null || flags.length > 0) && (

From 1ceac354376b22427f92ed494929e8e26e19d77b Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Mon, 8 Jun 2026 19:13:03 +0000
Subject: [PATCH 04/12] fix(GRO-2234): transparent re-mint on 401 for portal
 Book New submit (#55)

---
 UAT_PLAYBOOK.md                      | 10 ++++
 src/__tests__/Appointments.test.tsx  | 71 ++++++++++++++++++++++++++++
 src/portal/sections/Appointments.tsx | 64 +++++++++++++++++++------
 3 files changed, 131 insertions(+), 14 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index c1452e9..582f81e 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -244,6 +244,16 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.12.22 | Slot buttons show formatted label | Sign in as `uat-customer@groombook.dev`, open `Appointments`, click "Book New", select a pet and service, pick a date with availability | Each time-slot button shows a human-readable label like `10:00 AM` (UTC), never a raw ISO timestamp (e.g. not `2026-06-09T10:00:00.000Z`) |
 | TC-WEB-5.12.23 | Confirmation review shows formatted label | Continue the Book New wizard to the Review step | The "Date & Time" summary and the final confirmation both display the formatted slot label (e.g. `10:00 AM`), not a raw ISO string |
 | TC-WEB-5.12.24 | Booking submit succeeds (regression) | Complete the Book New wizard and submit the request | Request succeeds with no `500` / `invalid input syntax for type time` error; the booking POST sends `preferredTime` as `HH:MM:SS` (e.g. `10:00:00`); the new appointment appears in the Upcoming list |
+| TC-WEB-5.12.25 | Slow-wizard submit succeeds (GRO-2234) | Sign in as `uat-customer@groombook.dev`, open `Appointments`, click "Book New", then deliberately pace the wizard (pet → service → groomer → date/slot → review) so that **>2 minutes** elapse before clicking "Confirm Booking". | Submit returns success — **no** "Failed to book appointment. Please try again." error. In DevTools → Network, if the first `POST /api/portal/waitlist` returns `401`, a `POST /api/portal/session-from-auth` fires immediately after and the booking is retried once with the fresh `X-Impersonation-Session-Id`, then returns 201. The appointment appears in the Upcoming list. |
+
+> **GRO-2234 note:** A deliberately-paced Book New wizard could outlive the
+> portal impersonation session, so the final `POST /api/portal/waitlist` returned
+> `401 {"error":"Unauthorized"}` ("Failed to book appointment"). The web fix adds
+> a transparent one-shot re-mint: on a `401` from the waitlist submit,
+> `BookingFlow` calls `POST /api/portal/session-from-auth` (the Better Auth
+> cookie is still valid) and retries the submit once with the fresh session id.
+> The companion API fix (groombook/api GRO-2234) adds bounded sliding expiration
+> so active sessions rarely lapse in the first place.
 
 > **GRO-2211/GRO-2213 note:** The Book New wizard previously rendered the raw
 > UTC ISO slot string as the button/confirmation label and submitted that same
diff --git a/src/__tests__/Appointments.test.tsx b/src/__tests__/Appointments.test.tsx
index c00bb01..72c4678 100644
--- a/src/__tests__/Appointments.test.tsx
+++ b/src/__tests__/Appointments.test.tsx
@@ -801,4 +801,75 @@ describe("BookingFlow Book New funnel (GRO-2213)", () => {
     expect(body.preferredTime).toBe("10:00:00");
     expect(body.preferredDate).toBe("2026-06-09");
   });
+
+  it("re-mints the portal session and retries once when waitlist returns 401 (GRO-2234)", async () => {
+    const calls = { waitlist: 0, remint: 0 };
+    const waitlistHeaders: string[] = [];
+    const routed = (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url.includes("/api/portal/pets")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ pets: [{ id: "pet-1", name: "Buddy", breed: "Lab" }] }),
+        } as Response);
+      }
+      if (url.includes("/api/portal/services")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({
+            services: [{ id: "service-1", name: "Bath & Brush", isAddOn: false, duration: 60, price: 50 }],
+          }),
+        } as Response);
+      }
+      if (url.includes("/api/book/availability")) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ["2026-06-09T10:00:00.000Z"],
+        } as Response);
+      }
+      if (url.includes("/api/portal/session-from-auth")) {
+        calls.remint += 1;
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ sessionId: "fresh-session-id", clientId: "c1", clientName: "Jane" }),
+        } as Response);
+      }
+      if (url.includes("/api/portal/waitlist")) {
+        calls.waitlist += 1;
+        const headers = (init?.headers ?? {}) as Record<string, string>;
+        waitlistHeaders.push(headers["X-Impersonation-Session-Id"] ?? "");
+        // First attempt: session lapsed → 401. Retry after re-mint: success.
+        if (calls.waitlist === 1) {
+          return Promise.resolve({ ok: false, status: 401, json: async () => ({ error: "Unauthorized" }) } as Response);
+        }
+        return Promise.resolve({ ok: true, status: 201, json: async () => ({}) } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    };
+    global.fetch = vi.fn().mockImplementation(routed as typeof fetch);
+
+    render(<BookingFlow onClose={() => {}} sessionId="stale-session-id" />);
+
+    await waitFor(() => expect(screen.getByText("Buddy")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Buddy"));
+    await waitFor(() => expect(screen.getByText("Bath & Brush")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Bath & Brush"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+    await waitFor(() => expect(screen.getByText("First Available")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+    await waitFor(() => expect(screen.getByLabelText(/date/i)).toBeInTheDocument());
+    fireEvent.change(screen.getByLabelText(/date/i), { target: { value: "2026-06-09" } });
+    await waitFor(() => expect(screen.getByText("10:00 AM")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("10:00 AM"));
+    fireEvent.click(screen.getByRole("button", { name: /^Next$/ }));
+    await waitFor(() => expect(screen.getByText(/Review & Confirm/i)).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: /Confirm Booking/i }));
+
+    // Re-mint happened exactly once, waitlist retried with the fresh id, and the
+    // booking succeeded (no error surfaced).
+    await waitFor(() => expect(calls.waitlist).toBe(2));
+    expect(calls.remint).toBe(1);
+    expect(waitlistHeaders).toEqual(["stale-session-id", "fresh-session-id"]);
+    expect(screen.queryByText(/Failed to book appointment/i)).not.toBeInTheDocument();
+  });
 });
diff --git a/src/portal/sections/Appointments.tsx b/src/portal/sections/Appointments.tsx
index 7ed22e3..fd1b4fc 100644
--- a/src/portal/sections/Appointments.tsx
+++ b/src/portal/sections/Appointments.tsx
@@ -8,6 +8,28 @@ import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
 // responds with `{error: "..."}` on 4xx, and we must not treat that as slots.
 const AVAILABILITY_ERROR_MESSAGE = 'Failed to load time slots';
 
+/**
+ * Re-mint an SSO-bridge portal session from the active Better Auth session.
+ * Defense-in-depth for GRO-2234: if a portal call returns 401 mid-flow (the
+ * impersonation session lapsed during a slow wizard), the customer's Better
+ * Auth cookie is still valid, so we can transparently obtain a fresh portal
+ * session id and retry once. Returns the new session id, or null if no Better
+ * Auth session is available (e.g. staff/dev impersonation paths).
+ */
+async function remintPortalSession(): Promise<string | null> {
+  try {
+    const res = await fetch('/api/portal/session-from-auth', {
+      method: 'POST',
+      credentials: 'include',
+    });
+    if (!res.ok) return null;
+    const data = (await res.json().catch(() => ({}))) as { sessionId?: string };
+    return data.sessionId ?? null;
+  } catch {
+    return null;
+  }
+}
+
 async function fetchAvailability(
   params: { serviceId: string; date: string },
   sessionId: string | null,
@@ -993,26 +1015,40 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
     setSubmitting(true);
     setError(null);
 
-    try {
-      const response = await fetch('/api/portal/waitlist', {
+    const payload = JSON.stringify({
+      petId: selectedPet.id,
+      serviceId: selectedServices[0]?.id,
+      serviceIds: selectedServices.map((s) => s.id),
+      addOnIds: selectedAddOns.map((s) => s.id),
+      groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
+      preferredDate: selectedDate,
+      preferredTime: slotToTime(selectedTime),
+      notes: notes || undefined,
+      recurring: recurring || undefined,
+    });
+    const submitWaitlist = (id: string) =>
+      fetch('/api/portal/waitlist', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'X-Impersonation-Session-Id': sessionId ?? '',
+          'X-Impersonation-Session-Id': id,
         },
-        body: JSON.stringify({
-          petId: selectedPet.id,
-          serviceId: selectedServices[0]?.id,
-          serviceIds: selectedServices.map((s) => s.id),
-          addOnIds: selectedAddOns.map((s) => s.id),
-          groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
-          preferredDate: selectedDate,
-          preferredTime: slotToTime(selectedTime),
-          notes: notes || undefined,
-          recurring: recurring || undefined,
-        }),
+        body: payload,
       });
 
+    try {
+      let response = await submitWaitlist(sessionId);
+
+      // GRO-2234: a deliberately-paced wizard can outlive the portal session.
+      // The customer's Better Auth session is still valid, so transparently
+      // re-mint a fresh portal session and retry once before surfacing an error.
+      if (response.status === 401) {
+        const freshSessionId = await remintPortalSession();
+        if (freshSessionId) {
+          response = await submitWaitlist(freshSessionId);
+        }
+      }
+
       if (response.ok) {
         setConfirmed(true);
         fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });

From 98c8a7bb83f582092ed660c30526ceb7b9433022 Mon Sep 17 00:00:00 2001
From: The Dogfather <20+gb_dogfather@noreply.git.farh.net>
Date: Mon, 8 Jun 2026 23:30:30 +0000
Subject: [PATCH 05/12] fix(GRO-2236): portal Book New service cards show price
 + duration (#57)

Co-authored-by: The Dogfather <20+gb_dogfather@noreply.git.farh.net>
Co-committed-by: The Dogfather <20+gb_dogfather@noreply.git.farh.net>
---
 src/__tests__/Appointments.test.tsx  | 64 +++++++++++++++++++++++-
 src/portal/sections/Appointments.tsx | 73 ++++++++++++++++++++++++----
 2 files changed, 126 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/Appointments.test.tsx b/src/__tests__/Appointments.test.tsx
index 72c4678..c878b46 100644
--- a/src/__tests__/Appointments.test.tsx
+++ b/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, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, normalizeService, formatServicePrice, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -873,3 +873,65 @@ describe("BookingFlow Book New funnel (GRO-2213)", () => {
     expect(screen.queryByText(/Failed to book appointment/i)).not.toBeInTheDocument();
   });
 });
+
+describe("normalizeService", () => {
+  it("maps API basePriceCents/durationMinutes to price (dollars)/duration", () => {
+    const svc = normalizeService({
+      id: "svc-1",
+      name: "Full Groom",
+      basePriceCents: 4500,
+      durationMinutes: 60,
+    });
+    expect(svc.price).toBe(45);
+    expect(svc.duration).toBe(60);
+  });
+
+  it("preserves an already-normalized payload (price/duration)", () => {
+    const svc = normalizeService({
+      id: "svc-2",
+      name: "Bath",
+      price: 30,
+      duration: 30,
+    });
+    expect(svc.price).toBe(30);
+    expect(svc.duration).toBe(30);
+  });
+
+  it("leaves price/duration undefined when both source shapes are absent", () => {
+    const svc = normalizeService({ id: "svc-3", name: "Mystery" });
+    expect(svc.price).toBeUndefined();
+    expect(svc.duration).toBeUndefined();
+  });
+
+  it("coerces null fields to undefined", () => {
+    const svc = normalizeService({
+      id: "svc-4",
+      name: "Nail Trim",
+      basePriceCents: null,
+      durationMinutes: null,
+      description: null,
+    });
+    expect(svc.price).toBeUndefined();
+    expect(svc.duration).toBeUndefined();
+    expect(svc.description).toBeUndefined();
+  });
+});
+
+describe("formatServicePrice", () => {
+  it("prefers an explicit priceRange string", () => {
+    expect(formatServicePrice({ priceRange: "$40–$60", price: 45 })).toBe("$40–$60");
+  });
+
+  it("formats integer dollars without trailing zeros", () => {
+    expect(formatServicePrice({ price: 45 })).toBe("$45");
+  });
+
+  it("formats fractional dollars to cents", () => {
+    expect(formatServicePrice({ price: 45.5 })).toBe("$45.50");
+  });
+
+  it("returns null when no price is available (never '$undefined')", () => {
+    expect(formatServicePrice({})).toBeNull();
+    expect(formatServicePrice({ price: undefined })).toBeNull();
+  });
+});
diff --git a/src/portal/sections/Appointments.tsx b/src/portal/sections/Appointments.tsx
index fd1b4fc..bf55d90 100644
--- a/src/portal/sections/Appointments.tsx
+++ b/src/portal/sections/Appointments.tsx
@@ -89,8 +89,8 @@ interface Service {
   id: string;
   name: string;
   description?: string;
-  duration: number;
-  price: number;
+  duration?: number;
+  price?: number;
   priceRange?: string;
   isAddOn?: boolean;
 }
@@ -249,6 +249,52 @@ export function normalizeAppointment(raw: RawApiAppointment): Appointment {
   };
 }
 
+// Raw service shape from `GET /api/portal/services`, which projects the
+// canonical DB columns (`basePriceCents`, `durationMinutes`). Also tolerates an
+// already-normalized payload so either shape renders correctly.
+interface RawApiService {
+  id: string;
+  name: string;
+  description?: string | null;
+  basePriceCents?: number | null;
+  durationMinutes?: number | null;
+  price?: number | null;
+  duration?: number | null;
+  priceRange?: string | null;
+  isAddOn?: boolean | null;
+}
+
+// Normalizes a raw API service into the flat `Service` shape the cards render:
+// price as dollars (from `basePriceCents`) and duration in minutes (from
+// `durationMinutes`). Leaves fields undefined when genuinely absent so the card
+// can hide them rather than print `$undefined` / empty `min`.
+export function normalizeService(raw: RawApiService): Service {
+  const price =
+    raw.price ?? (typeof raw.basePriceCents === 'number' ? raw.basePriceCents / 100 : undefined);
+  const duration = raw.duration ?? raw.durationMinutes ?? undefined;
+  return {
+    id: raw.id,
+    name: raw.name,
+    description: raw.description ?? undefined,
+    duration: duration ?? undefined,
+    price: price ?? undefined,
+    priceRange: raw.priceRange ?? undefined,
+    isAddOn: raw.isAddOn ?? undefined,
+  };
+}
+
+// Renders a service price for display, preferring an explicit `priceRange`
+// string, then a numeric dollar `price` (integers without trailing zeros, e.g.
+// `$45`; fractional values to cents, e.g. `$45.50`). Returns null when neither
+// is available so the caller can omit the price line entirely.
+export function formatServicePrice(svc: Pick<Service, 'price' | 'priceRange'>): string | null {
+  if (svc.priceRange) return svc.priceRange;
+  if (typeof svc.price === 'number' && Number.isFinite(svc.price)) {
+    return `$${Number.isInteger(svc.price) ? svc.price : svc.price.toFixed(2)}`;
+  }
+  return null;
+}
+
 const STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
   pending: 'bg-amber-100 text-amber-600',
@@ -994,7 +1040,8 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
 
         if (servicesRes.ok) {
           const servicesData = await servicesRes.json();
-          setServices(servicesData.services || servicesData || []);
+          const rawServices: RawApiService[] = servicesData.services || servicesData || [];
+          setServices(rawServices.map(normalizeService));
         }
       } catch {
         setError('Failed to load data. Please try again.');
@@ -1190,10 +1237,14 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                           )}
                         </div>
                         <div className="text-right shrink-0 ml-3">
-                          <p className="text-sm font-medium text-stone-700">
-                            {svc.priceRange || `$${svc.price}`}
-                          </p>
-                          <p className="text-xs text-stone-400">{svc.duration} min</p>
+                          {formatServicePrice(svc) && (
+                            <p className="text-sm font-medium text-stone-700">
+                              {formatServicePrice(svc)}
+                            </p>
+                          )}
+                          {typeof svc.duration === 'number' && (
+                            <p className="text-xs text-stone-400">{svc.duration} min</p>
+                          )}
                         </div>
                       </button>
                     ))}
@@ -1226,9 +1277,11 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                                 <p className="text-xs text-stone-500">{svc.description}</p>
                               )}
                             </div>
-                            <span className="text-stone-600 shrink-0 ml-3">
-                              {svc.priceRange || `$${svc.price}`}
-                            </span>
+                            {formatServicePrice(svc) && (
+                              <span className="text-stone-600 shrink-0 ml-3">
+                                {formatServicePrice(svc)}
+                              </span>
+                            )}
                           </button>
                         ))}
                       </div>

From c58e4e4b234af52911e681a676972751c9b11b9b Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Tue, 9 Jun 2026 01:50:49 +0000
Subject: [PATCH 06/12] feat(GRO-2158): route planner page at /admin/routes
 (#60)

---
 UAT_PLAYBOOK.md               |  20 ++
 package.json                  |   3 +
 pnpm-lock.yaml                |  80 +++++++-
 src/App.tsx                   |   3 +
 src/__tests__/Routes.test.tsx | 142 +++++++++++++
 src/components/RouteMap.tsx   |  97 +++++++++
 src/pages/Routes.tsx          | 376 ++++++++++++++++++++++++++++++++++
 7 files changed, 718 insertions(+), 3 deletions(-)
 create mode 100644 src/__tests__/Routes.test.tsx
 create mode 100644 src/components/RouteMap.tsx
 create mode 100644 src/pages/Routes.tsx

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 582f81e..8992ad7 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -471,6 +471,26 @@ These cases guard against the regression where an SSO-bridge customer (no `?sess
 | TC-WEB-5.26.3 | Impersonation flow reschedule is unchanged (no regression) | 1. With an active impersonation session (`?sessionId=<active>`), load `/`. 2. Click **Reschedule** on an appointment. 3. Pick a date. | `GET /api/book/availability` includes `X-Impersonation-Session-Id` equal to the impersonation `sessionId` (not `portalSessionId`). Returns 200. Behaves identically to the pre-fix build. |
 | TC-WEB-5.26.4 | No `X-Impersonation-Session-Id` is empty / null | From TC-WEB-5.26.1, inspect every `/api/portal/*` and `/api/book/*` request. | No request has an empty or `null` `X-Impersonation-Session-Id` header. |
 
+### 5.28 Route Planner Page (GRO-2158)
+
+The admin Route Planner lives at `/admin/routes`. It shows a groomer's geocoded appointment stops for a chosen date on a `react-leaflet` / OpenStreetMap map (numbered pins + a connecting polyline), a stop-list panel, a travel-time/distance summary, a route status badge, and an **Optimize** button wired to `POST /api/routes/optimize`. Leaflet is loaded via a dynamic import so it ships as a separate code-split chunk. Groomers are auto-filtered to their own route (no groomer selector); managers/receptionists pick a groomer.
+
+**Pre-conditions:**
+
+- Sign in to `/admin` as a manager (e.g. uat-manager) and, separately, as a groomer (uat-groomer).
+- At least one groomer has appointments on the test date whose clients have geocoded addresses.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.28.1 | Page loads and is reachable from nav | 1. Sign in as a manager. 2. Click **Routes** in the admin nav. | URL is `/admin/routes`. The "Route Planner" heading, a Date picker, a Groomer selector, and an **Optimize** button render. No console errors. |
+| TC-WEB-5.28.2 | Leaflet map is code-split | 1. Open DevTools → Network (JS filter). 2. Load `/admin/reports` first, confirm no `RouteMap` chunk loads. 3. Navigate to `/admin/routes`. | A separate `RouteMap-*.js` chunk (and `RouteMap-*.css`) is fetched only when the Routes page renders, not on other admin pages. |
+| TC-WEB-5.28.3 | Map shows numbered pins + polyline | Select a groomer + date that has a built route with ≥2 geocoded stops. | The OSM map renders with one numbered pin per stop (1, 2, 3…) and a polyline connecting them in order. Tile attribution to OpenStreetMap is visible. |
+| TC-WEB-5.28.4 | Stop-list panel cards | Inspect the panel beside the map. | Each stop card shows the stop number, client name, appointment time, address, and travel time from the previous stop (stop 1 shows "Start of route"). |
+| TC-WEB-5.28.5 | Summary + status badge | Inspect the summary bar and badge. | Stops count, total travel time, and total distance (km) are shown. A status badge reads one of Draft / Optimized / In progress / Completed matching the route's status. |
+| TC-WEB-5.28.6 | Optimize button | Click **Optimize**. | A `POST /api/routes/optimize` with `{ staffId, date }` fires. On success the map, stop order, summary, and status badge refresh. Any skipped (non-geocoded) clients surface as a warning. |
+| TC-WEB-5.28.7 | Groomer role auto-filter | Sign in as a groomer and open `/admin/routes`. | No groomer selector is shown. The page loads the signed-in groomer's own route for the selected date. The groomer cannot view another groomer's route. |
+| TC-WEB-5.28.8 | Empty / no-route state | Select a date with no appointments. | The map area and stop panel show a friendly empty state ("No stops…"). No crash; **Optimize** is still clickable. |
+
 ## 6. Pass/Fail Criteria
 
 **Pass:**
diff --git a/package.json b/package.json
index 0bffbb3..ec73670 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
     "@stripe/stripe-js": "^9.1.0",
     "@tailwindcss/vite": "^4.2.2",
     "better-auth": "^1.5.6",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.577.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.1.2",
     "recharts": "^3.8.0",
     "tailwindcss": "^4.2.2"
@@ -30,6 +32,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^25.6.0",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be1a567..03075fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       better-auth:
         specifier: ^1.5.6
         version: 1.6.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(vitest@3.2.4(@types/node@25.6.2)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.47.1))
+      leaflet:
+        specifier: ^1.9.4
+        version: 1.9.4
       lucide-react:
         specifier: ^0.577.0
         version: 0.577.0(react@19.2.6)
@@ -32,12 +35,15 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.6(react@19.2.6)
+      react-leaflet:
+        specifier: ^5.0.0
+        version: 5.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-router-dom:
         specifier: ^7.1.2
         version: 7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       recharts:
         specifier: ^3.8.0
-        version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@16.13.1)(react@19.2.6)(redux@5.0.1)
+        version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
       tailwindcss:
         specifier: ^4.2.2
         version: 4.3.0
@@ -54,6 +60,9 @@ importers:
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/leaflet':
+        specifier: ^1.9.12
+        version: 1.9.21
       '@types/node':
         specifier: ^25.6.0
         version: 25.6.2
@@ -1005,6 +1014,13 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@react-leaflet/core@3.0.0':
+    resolution: {integrity: sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==}
+    peerDependencies:
+      leaflet: ^1.9.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
+
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -1102,66 +1118,79 @@ packages:
     resolution: {integrity: sha512-DV6fJoxEYWJOvaZIsok7KrYl0tPvga5OZ2yvKHNNYyk/2roMLqQAbGhr78EQ5YhHpnhLKJD3S1WFusAkmUuV5g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.60.3':
     resolution: {integrity: sha512-mQKoJAzvuOs6F+TZybQO4GOTSMUu7v0WdxEk24krQ/uUxXoPTtHjuaUuPmFhtBcM4K0ons8nrE3JyhTuCFtT/w==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.60.3':
     resolution: {integrity: sha512-Whjj2qoiJ6+OOJMGptTYazaJvjOJm+iKHpXQM1P3LzGjt7Ff++Tp7nH4N8J/BUA7R9IHfDyx4DJIflifwnbmIA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.60.3':
     resolution: {integrity: sha512-4YTNHKqGng5+yiZt3mg77nmyuCfmNfX4fPmyUapBcIk+BdwSwmCWGXOUxhXbBEkFHtoN5boLj/5NON+u5QC9tg==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.60.3':
     resolution: {integrity: sha512-SU3kNlhkpI4UqlUc2VXPGK9o886ZsSeGfMAX2ba2b8DKmMXq4AL7KUrkSWVbb7koVqx41Yczx6dx5PNargIrEA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.60.3':
     resolution: {integrity: sha512-6lDLl5h4TXpB1mTf2rQWnAk/LcXrx9vBfu/DT5TIPhvMhRWaZ5MxkIc8u4lJAmBo6klTe1ywXIUHFjylW505sg==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.60.3':
     resolution: {integrity: sha512-BMo8bOw8evlup/8G+cj5xWtPyp93xPdyoSN16Zy90Q2QZ0ZYRhCt6ZJSwbrRzG9HApFabjwj2p25TUPDWrhzqQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.60.3':
     resolution: {integrity: sha512-E0L8X1dZN1/Rph+5VPF6Xj2G7JJvMACVXtamTJIDrVI44Y3K+G8gQaMEAavbqCGTa16InptiVrX6eM6pmJ+7qA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.60.3':
     resolution: {integrity: sha512-oZJ/WHaVfHUiRAtmTAeo3DcevNsVvH8mbvodjZy7D5QKvCefO371SiKRpxoDcCxB3PTRTLayWBkvmDQKTcX/sw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.60.3':
     resolution: {integrity: sha512-Dhbyh7j9FybM3YaTgaHmVALwA8AkUwTPccyCQ79TG9AJUsMQqgN1DDEZNr4+QUfwiWvLDumW5vdwzoeUF+TNxQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.60.3':
     resolution: {integrity: sha512-cJd1X5XhHHlltkaypz1UcWLA8AcoIi1aWhsvaWDskD1oz2eKCypnqvTQ8ykMNI0RSmm7NkTdSqSSD7zM0xa6Ig==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.60.3':
     resolution: {integrity: sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.60.3':
     resolution: {integrity: sha512-cRxsE8c13mZOh3vP+wLDxpQBRrOHDIGOWyDL93Sy0Ga8y515fBcC2pjUfFwUe5T7tqvTvWbCpg1URM/AXdWIXA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.60.3':
     resolution: {integrity: sha512-QaWcIgRxqEdQdhJqW4DJctsH6HCmo5vHxY0krHSX4jMtOqfzC+dqDGuHM87bu4H8JBeibWx7jFz+h6/4C8wA5Q==}
@@ -1248,24 +1277,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
@@ -1387,9 +1420,15 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/leaflet@1.9.21':
+    resolution: {integrity: sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==}
+
   '@types/node@25.6.2':
     resolution: {integrity: sha512-sokuT28dxf9JT5Kady1fsXOvI4HVpjZa95NKT5y9PNTIrs2AsobR4GFAA90ZG8M+nxVRLysCXsVj6eGC7Vbrlw==}
 
@@ -2462,6 +2501,9 @@ packages:
     resolution: {integrity: sha512-nbD8lB9EB3wNdMhOCdx5Li8DxnLbvKByylRLcJ1h+4SkrowVeECAyZlyiKMThF7xFdRz0jSQ2MoJr+wXux2y0Q==}
     engines: {node: '>=20.0.0'}
 
+  leaflet@1.9.4:
+    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
+
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -2505,24 +2547,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -2764,6 +2810,13 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-leaflet@5.0.0:
+    resolution: {integrity: sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==}
+    peerDependencies:
+      leaflet: ^1.9.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
+
   react-redux@9.2.0:
     resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
     peerDependencies:
@@ -4398,6 +4451,12 @@ snapshots:
     dependencies:
       playwright: 1.59.1
 
+  '@react-leaflet/core@3.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      leaflet: 1.9.4
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1))(react@19.2.6)':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -4711,8 +4770,14 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/leaflet@1.9.21':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
   '@types/node@25.6.2':
     dependencies:
       undici-types: 7.19.2
@@ -5884,6 +5949,8 @@ snapshots:
 
   kysely@0.28.17: {}
 
+  leaflet@1.9.4: {}
+
   leven@3.1.0: {}
 
   levn@0.4.1:
@@ -6135,6 +6202,13 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-leaflet@5.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      '@react-leaflet/core': 3.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      leaflet: 1.9.4
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
@@ -6162,7 +6236,7 @@ snapshots:
 
   react@19.2.6: {}
 
-  recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@16.13.1)(react@19.2.6)(redux@5.0.1):
+  recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1):
     dependencies:
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
       clsx: 2.1.1
@@ -6172,7 +6246,7 @@ snapshots:
       immer: 10.2.0
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
-      react-is: 16.13.1
+      react-is: 17.0.2
       react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1)
       reselect: 5.1.1
       tiny-invariant: 1.3.3
diff --git a/src/App.tsx b/src/App.tsx
index b97da60..d15f9eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { StaffPage } from "./pages/Staff.js";
 import { InvoicesPage } from "./pages/Invoices.js";
 import { BookPage } from "./pages/Book.js";
 import { ReportsPage } from "./pages/Reports.js";
+import { RoutesPage } from "./pages/Routes.js";
 import { GroupBookingPage } from "./pages/GroupBooking.js";
 import { SettingsPage } from "./pages/Settings.js";
 import { BookingConfirmedPage } from "./pages/BookingConfirmed.js";
@@ -175,6 +176,7 @@ const NAV_LINKS = [
   { to: "/admin/staff", label: "Staff" },
   { to: "/admin/invoices", label: "Invoices" },
   { to: "/admin/group-bookings", label: "Group Bookings" },
+  { to: "/admin/routes", label: "Routes" },
   { to: "/admin/reports", label: "Reports" },
   { to: "/admin/settings", label: "Settings" },
   { to: "/", label: "Customer Portal" },
@@ -303,6 +305,7 @@ function AdminLayout() {
           <Route path="/invoices" element={<InvoicesPage />} />
           <Route path="/book" element={<BookPage />} />
           <Route path="/group-bookings" element={<GroupBookingPage />} />
+          <Route path="/routes" element={<RoutesPage />} />
           <Route path="/reports" element={<ReportsPage />} />
           <Route path="/settings" element={<SettingsPage />} />
         </Routes>
diff --git a/src/__tests__/Routes.test.tsx b/src/__tests__/Routes.test.tsx
new file mode 100644
index 0000000..935a697
--- /dev/null
+++ b/src/__tests__/Routes.test.tsx
@@ -0,0 +1,142 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { RoutesPage } from "../pages/Routes.tsx";
+
+// Leaflet does not render in jsdom — replace the lazily-loaded map with a stub
+// that just reports the stop count so we can assert it received the route data.
+vi.mock("../components/RouteMap.js", () => ({
+  default: ({ stops }: { stops: unknown[] }) => (
+    <div data-testid="route-map">map:{stops.length}</div>
+  ),
+}));
+
+const MANAGER = { id: "m1", name: "Manager", role: "manager", active: true };
+const GROOMER = { id: "g1", name: "Sam Groomer", role: "groomer", active: true };
+
+const ROUTE_RESPONSE = {
+  route: {
+    id: "r1",
+    staffId: "g1",
+    routeDate: "2026-06-09",
+    status: "optimized",
+    totalTravelMins: 95,
+    totalDistanceKm: "42.50",
+  },
+  stops: [
+    {
+      id: "s1",
+      appointmentId: "a1",
+      stopOrder: 1,
+      latitude: 51.5,
+      longitude: -0.1,
+      travelMinsFromPrev: null,
+      travelDistanceKmFromPrev: null,
+      bufferMins: 15,
+      appointmentStartTime: "2026-06-09T09:00:00.000Z",
+      appointmentEndTime: "2026-06-09T10:00:00.000Z",
+      appointmentStatus: "confirmed",
+      clientId: "c1",
+      clientName: "Alice",
+      clientAddress: "1 High St",
+      conflict: { hasConflict: false },
+    },
+    {
+      id: "s2",
+      appointmentId: "a2",
+      stopOrder: 2,
+      latitude: 51.52,
+      longitude: -0.12,
+      travelMinsFromPrev: 20,
+      travelDistanceKmFromPrev: "8.00",
+      bufferMins: 15,
+      appointmentStartTime: "2026-06-09T11:00:00.000Z",
+      appointmentEndTime: "2026-06-09T12:00:00.000Z",
+      appointmentStatus: "confirmed",
+      clientId: "c2",
+      clientName: "Bob",
+      clientAddress: "2 Low St",
+      conflict: { hasConflict: true },
+    },
+  ],
+  hasConflicts: true,
+  conflictCount: 1,
+};
+
+function mockFetch(meRole: "manager" | "groomer") {
+  return vi.fn((url: string, opts?: RequestInit) => {
+    if (url === "/api/staff/me") {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(meRole === "manager" ? MANAGER : GROOMER),
+      } as Response);
+    }
+    if (url === "/api/staff") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve([MANAGER, GROOMER]) } as Response);
+    }
+    if (url.startsWith("/api/routes/daily")) {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
+    if (url === "/api/routes/optimize" && opts?.method === "POST") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({}) } as Response);
+  });
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("RoutesPage", () => {
+  it("renders stop cards, summary, status badge and map for a manager", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+    expect(screen.getByText("1 High St")).toBeInTheDocument();
+
+    // Summary: travel time formatted, distance shown
+    expect(screen.getByText("1 h 35 min")).toBeInTheDocument();
+    expect(screen.getByText("42.50 km")).toBeInTheDocument();
+
+    // Status badge
+    expect(screen.getByText("Optimized")).toBeInTheDocument();
+
+    // First stop is start-of-route; second shows travel from previous
+    expect(screen.getByText("Start of route")).toBeInTheDocument();
+    expect(screen.getByText("20 min travel from previous")).toBeInTheDocument();
+
+    // Map received both stops (lazy chunk resolves asynchronously)
+    expect(await screen.findByTestId("route-map")).toHaveTextContent("map:2");
+  });
+
+  it("shows the groomer selector for managers", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Groomer")).toBeInTheDocument());
+  });
+
+  it("hides the groomer selector for groomer role (auto-filtered)", async () => {
+    global.fetch = mockFetch("groomer") as unknown as typeof fetch;
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.queryByText("Groomer")).not.toBeInTheDocument();
+  });
+
+  it("calls the optimize endpoint when Optimize is clicked", async () => {
+    const fetchMock = mockFetch("manager");
+    global.fetch = fetchMock as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Optimize"));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/routes/optimize",
+        expect.objectContaining({ method: "POST" })
+      )
+    );
+  });
+});
diff --git a/src/components/RouteMap.tsx b/src/components/RouteMap.tsx
new file mode 100644
index 0000000..05e6cf4
--- /dev/null
+++ b/src/components/RouteMap.tsx
@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Polyline,
+  Tooltip,
+  useMap,
+} from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// This component is loaded via React.lazy from the route planner page so that
+// Leaflet + react-leaflet land in a separate code-split chunk and never weigh
+// down the main admin bundle.
+
+export interface RouteMapStop {
+  id: string;
+  stopOrder: number;
+  latitude: number;
+  longitude: number;
+  clientName: string;
+}
+
+interface RouteMapProps {
+  stops: RouteMapStop[];
+  primaryColor: string;
+}
+
+/** A numbered teardrop pin rendered as an inline-SVG divIcon (no image assets). */
+function numberedIcon(order: number, color: string): L.DivIcon {
+  return L.divIcon({
+    className: "route-stop-pin",
+    html: `<div style="position:relative;width:28px;height:40px">
+      <svg width="28" height="40" viewBox="0 0 28 40" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 0C6.27 0 0 6.27 0 14c0 9.5 14 26 14 26s14-16.5 14-26C28 6.27 21.73 0 14 0z" fill="${color}" stroke="#ffffff" stroke-width="1.5"/>
+      </svg>
+      <span style="position:absolute;top:5px;left:0;width:28px;text-align:center;color:#fff;font-size:13px;font-weight:700;font-family:system-ui,sans-serif">${order}</span>
+    </div>`,
+    iconSize: [28, 40],
+    iconAnchor: [14, 40],
+    tooltipAnchor: [0, -34],
+  });
+}
+
+/** Keeps the viewport framed around all stops whenever the route changes. */
+function FitBounds({ stops }: { stops: RouteMapStop[] }) {
+  const map = useMap();
+  useEffect(() => {
+    if (stops.length === 0) return;
+    const latlngs = stops.map((s) => [s.latitude, s.longitude] as [number, number]);
+    if (latlngs.length === 1) {
+      map.setView(latlngs[0]!, 14);
+    } else {
+      map.fitBounds(L.latLngBounds(latlngs), { padding: [40, 40] });
+    }
+  }, [map, stops]);
+  return null;
+}
+
+export default function RouteMap({ stops, primaryColor }: RouteMapProps) {
+  // Fallback centre (London) only used briefly before FitBounds runs or when the
+  // route has no geocoded stops.
+  const center: [number, number] = stops[0]
+    ? [stops[0].latitude, stops[0].longitude]
+    : [51.505, -0.09];
+  const line = stops.map((s) => [s.latitude, s.longitude] as [number, number]);
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={12}
+      scrollWheelZoom
+      style={{ height: "100%", width: "100%", borderRadius: 8 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {line.length >= 2 && (
+        <Polyline positions={line} color={primaryColor} weight={4} opacity={0.7} />
+      )}
+      {stops.map((s) => (
+        <Marker
+          key={s.id}
+          position={[s.latitude, s.longitude]}
+          icon={numberedIcon(s.stopOrder, primaryColor)}
+        >
+          <Tooltip>
+            {s.stopOrder}. {s.clientName}
+          </Tooltip>
+        </Marker>
+      ))}
+      <FitBounds stops={stops} />
+    </MapContainer>
+  );
+}
diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
new file mode 100644
index 0000000..5d62a30
--- /dev/null
+++ b/src/pages/Routes.tsx
@@ -0,0 +1,376 @@
+import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from "react";
+import { useBranding } from "../BrandingContext.js";
+import type { RouteMapStop } from "../components/RouteMap.js";
+
+// Leaflet is heavy and only needed on this page — load it as a separate chunk.
+const RouteMap = lazy(() => import("../components/RouteMap.js"));
+
+// ─── Types (mirror groombook/api /api/routes responses) ─────────────────────────
+
+type RouteStatus = "draft" | "optimized" | "in_progress" | "completed";
+
+interface RouteRow {
+  id: string;
+  staffId: string;
+  routeDate: string;
+  status: RouteStatus;
+  totalTravelMins: number | null;
+  totalDistanceKm: string | null;
+}
+
+interface ConflictFlags {
+  hasConflict: boolean;
+}
+
+interface RouteStop {
+  id: string;
+  appointmentId: string;
+  stopOrder: number;
+  latitude: number;
+  longitude: number;
+  travelMinsFromPrev: number | null;
+  travelDistanceKmFromPrev: string | null;
+  bufferMins: number;
+  appointmentStartTime: string;
+  appointmentEndTime: string;
+  appointmentStatus: string;
+  clientId: string;
+  clientName: string;
+  clientAddress: string | null;
+  conflict: ConflictFlags;
+}
+
+interface RouteResponse {
+  route: RouteRow;
+  stops: RouteStop[];
+  hasConflicts: boolean;
+  conflictCount: number;
+  warnings?: string[];
+  skipped?: Array<{ appointmentId: string; clientName: string; reason: string }>;
+}
+
+interface StaffMember {
+  id: string;
+  name: string;
+  role: "groomer" | "receptionist" | "manager";
+  active: boolean;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────────
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function fmtDuration(mins: number | null | undefined): string {
+  if (mins == null) return "—";
+  if (mins < 60) return `${mins} min`;
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  return m === 0 ? `${h} h` : `${h} h ${m} min`;
+}
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+const STATUS_STYLES: Record<RouteStatus, { bg: string; fg: string; label: string }> = {
+  draft: { bg: "#f1f5f9", fg: "#475569", label: "Draft" },
+  optimized: { bg: "#ecfdf5", fg: "#047857", label: "Optimized" },
+  in_progress: { bg: "#eff6ff", fg: "#1d4ed8", label: "In progress" },
+  completed: { bg: "#f5f3ff", fg: "#6d28d9", label: "Completed" },
+};
+
+function StatusBadge({ status }: { status: RouteStatus }) {
+  const s = STATUS_STYLES[status] ?? STATUS_STYLES.draft;
+  return (
+    <span
+      style={{
+        background: s.bg,
+        color: s.fg,
+        borderRadius: 999,
+        padding: "0.2rem 0.7rem",
+        fontSize: 12,
+        fontWeight: 600,
+        textTransform: "none",
+      }}
+    >
+      {s.label}
+    </span>
+  );
+}
+
+const inputStyle: React.CSSProperties = {
+  padding: "0.4rem 0.6rem",
+  borderRadius: 6,
+  border: "1px solid #cbd5e1",
+  fontSize: 14,
+};
+
+// ─── Page ───────────────────────────────────────────────────────────────────────
+
+export function RoutesPage() {
+  const { branding } = useBranding();
+  const primaryColor = branding.primaryColor || "#4f8a6f";
+
+  const [me, setMe] = useState<StaffMember | null>(null);
+  const [meLoaded, setMeLoaded] = useState(false);
+  const [groomers, setGroomers] = useState<StaffMember[]>([]);
+  const [staffId, setStaffId] = useState<string>("");
+  const [date, setDate] = useState<string>(todayIso());
+
+  const [data, setData] = useState<RouteResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [optimizing, setOptimizing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isGroomer = me?.role === "groomer";
+
+  // Resolve the current staff member; groomers are pinned to their own route.
+  useEffect(() => {
+    fetch("/api/staff/me")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((row: StaffMember | null) => {
+        setMe(row);
+        if (row?.role === "groomer") setStaffId(row.id);
+      })
+      .catch(() => setMe(null))
+      .finally(() => setMeLoaded(true));
+  }, []);
+
+  // Managers / receptionists pick a groomer; groomers never see the selector.
+  useEffect(() => {
+    if (!meLoaded || isGroomer) return;
+    fetch("/api/staff")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((rows: StaffMember[]) => {
+        const gs = rows.filter((s) => s.active && s.role === "groomer");
+        setGroomers(gs);
+        setStaffId((cur) => cur || gs[0]?.id || "");
+      })
+      .catch(() => setGroomers([]));
+  }, [meLoaded, isGroomer]);
+
+  const loadRoute = useCallback(async () => {
+    if (!staffId || !date) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const r = await fetch(
+        `/api/routes/daily?staffId=${encodeURIComponent(staffId)}&date=${encodeURIComponent(date)}`
+      );
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        throw new Error(body.error || `Failed to load route (${r.status})`);
+      }
+      setData(await r.json());
+    } catch (e) {
+      setData(null);
+      setError(e instanceof Error ? e.message : "Failed to load route");
+    } finally {
+      setLoading(false);
+    }
+  }, [staffId, date]);
+
+  useEffect(() => {
+    void loadRoute();
+  }, [loadRoute]);
+
+  const optimize = useCallback(async () => {
+    if (!staffId || !date) return;
+    setOptimizing(true);
+    setError(null);
+    try {
+      const r = await fetch("/api/routes/optimize", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ staffId, date }),
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        throw new Error(body.error || `Optimization failed (${r.status})`);
+      }
+      setData(await r.json());
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Optimization failed");
+    } finally {
+      setOptimizing(false);
+    }
+  }, [staffId, date]);
+
+  const mapStops: RouteMapStop[] = useMemo(
+    () =>
+      (data?.stops ?? []).map((s) => ({
+        id: s.id,
+        stopOrder: s.stopOrder,
+        latitude: s.latitude,
+        longitude: s.longitude,
+        clientName: s.clientName,
+      })),
+    [data]
+  );
+
+  const stops = data?.stops ?? [];
+  const route = data?.route ?? null;
+
+  return (
+    <div style={{ padding: "1.25rem", maxWidth: 1280, margin: "0 auto" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: "1rem" }}>
+        <h1 style={{ fontSize: 22, fontWeight: 700, color: "#1a202c", margin: 0 }}>Route Planner</h1>
+        {route && <StatusBadge status={route.status} />}
+      </div>
+
+      {/* Controls */}
+      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end", marginBottom: "1rem" }}>
+        <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
+          Date
+          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} style={inputStyle} />
+        </label>
+
+        {!isGroomer && (
+          <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
+            Groomer
+            <select
+              value={staffId}
+              onChange={(e) => setStaffId(e.target.value)}
+              style={{ ...inputStyle, minWidth: 180 }}
+            >
+              {groomers.length === 0 && <option value="">No groomers</option>}
+              {groomers.map((g) => (
+                <option key={g.id} value={g.id}>
+                  {g.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+
+        <button
+          onClick={optimize}
+          disabled={optimizing || !staffId}
+          style={{
+            padding: "0.5rem 1.1rem",
+            borderRadius: 6,
+            border: "none",
+            background: primaryColor,
+            color: "#fff",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: optimizing || !staffId ? "wait" : "pointer",
+            opacity: optimizing || !staffId ? 0.7 : 1,
+          }}
+        >
+          {optimizing ? "Optimizing…" : "Optimize"}
+        </button>
+      </div>
+
+      {error && (
+        <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#991b1b", fontSize: 13, marginBottom: "1rem" }}>
+          {error}
+        </div>
+      )}
+
+      {data?.warnings && data.warnings.length > 0 && (
+        <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#92400e", fontSize: 13, marginBottom: "1rem" }}>
+          {data.warnings.map((w, i) => (
+            <div key={i}>{w}</div>
+          ))}
+        </div>
+      )}
+
+      {/* Summary */}
+      <div style={{ display: "flex", gap: 24, flexWrap: "wrap", marginBottom: "1rem", padding: "0.8rem 1rem", background: "#fff", borderRadius: 8, border: "1px solid #e2e8f0" }}>
+        <Summary label="Stops" value={String(stops.length)} />
+        <Summary label="Total travel time" value={fmtDuration(route?.totalTravelMins)} />
+        <Summary label="Total distance" value={route?.totalDistanceKm != null ? `${route.totalDistanceKm} km` : "—"} />
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) minmax(280px, 1fr)", gap: 16, alignItems: "stretch" }}>
+        {/* Map */}
+        <div style={{ height: 540, background: "#e5e7eb", borderRadius: 8, overflow: "hidden", border: "1px solid #e2e8f0" }}>
+          {mapStops.length > 0 ? (
+            <Suspense fallback={<Centered>Loading map…</Centered>}>
+              <RouteMap stops={mapStops} primaryColor={primaryColor} />
+            </Suspense>
+          ) : (
+            <Centered>{loading ? "Loading route…" : "No stops to display. Click Optimize to build the route."}</Centered>
+          )}
+        </div>
+
+        {/* Stop list panel */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: 540, overflowY: "auto" }}>
+          {stops.length === 0 && !loading && (
+            <div style={{ color: "#6b7280", fontSize: 14, padding: "1rem" }}>No stops for this day.</div>
+          )}
+          {stops.map((s) => (
+            <div
+              key={s.id}
+              style={{
+                background: "#fff",
+                border: `1px solid ${s.conflict?.hasConflict ? "#fca5a5" : "#e2e8f0"}`,
+                borderRadius: 8,
+                padding: "0.7rem 0.85rem",
+                display: "flex",
+                gap: 10,
+              }}
+            >
+              <div
+                style={{
+                  flexShrink: 0,
+                  width: 26,
+                  height: 26,
+                  borderRadius: "50%",
+                  background: primaryColor,
+                  color: "#fff",
+                  fontSize: 13,
+                  fontWeight: 700,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {s.stopOrder}
+              </div>
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
+                  <strong style={{ fontSize: 14, color: "#1a202c" }}>{s.clientName}</strong>
+                  <span style={{ fontSize: 13, color: "#4b5563", whiteSpace: "nowrap" }}>{fmtTime(s.appointmentStartTime)}</span>
+                </div>
+                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{s.clientAddress || "No address on file"}</div>
+                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
+                  {s.stopOrder === 1 || s.travelMinsFromPrev == null
+                    ? "Start of route"
+                    : `${fmtDuration(s.travelMinsFromPrev)} travel from previous`}
+                </div>
+                {s.conflict?.hasConflict && (
+                  <div style={{ fontSize: 12, color: "#b91c1c", marginTop: 4, fontWeight: 600 }}>
+                    ⚠ Tight schedule — travel + buffer may exceed the gap
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Summary({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 600 }}>{label}</div>
+      <div style={{ fontSize: 18, color: "#1a202c", fontWeight: 700 }}>{value}</div>
+    </div>
+  );
+}
+
+function Centered({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#6b7280", fontSize: 14, textAlign: "center", padding: "1rem" }}>
+      {children}
+    </div>
+  );
+}

From 59a29a2d03336440d87aa8aa8f7ea672c0372ce7 Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Tue, 9 Jun 2026 02:57:49 +0000
Subject: [PATCH 07/12] feat(GRO-2159): drag-to-reorder + re-optimize on route
 planner (#63)

---
 UAT_PLAYBOOK.md               |  14 ++
 package.json                  |   3 +
 pnpm-lock.yaml                |  61 ++++++++
 src/__tests__/Routes.test.tsx |  30 ++++
 src/pages/Routes.tsx          | 270 ++++++++++++++++++++++++++++------
 5 files changed, 330 insertions(+), 48 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 8992ad7..f2f0e3b 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -491,6 +491,20 @@ The admin Route Planner lives at `/admin/routes`. It shows a groomer's geocoded
 | TC-WEB-5.28.7 | Groomer role auto-filter | Sign in as a groomer and open `/admin/routes`. | No groomer selector is shown. The page loads the signed-in groomer's own route for the selected date. The groomer cannot view another groomer's route. |
 | TC-WEB-5.28.8 | Empty / no-route state | Select a date with no appointments. | The map area and stop panel show a friendly empty state ("No stops…"). No crash; **Optimize** is still clickable. |
 
+### 5.29 Route Planner — Drag-to-Reorder & Re-optimize (GRO-2159)
+
+The stop-list panel is drag-sortable (`@dnd-kit`). Each stop card has a grab handle (⠿). Dropping a stop in a new position calls `PATCH /api/routes/:routeId/reorder` with `{ stopOrder: [routeStopId…] }` (full first-to-last order); the UI updates optimistically and rolls back on error. The server recomputes per-leg travel, buffers, totals and tight-schedule conflict flags, and the panel/map/summary adopt the response. A "tight schedule" warning is shown on any stop whose gap is shorter than its travel + buffer. After a manual reorder a hint with a **Re-optimize** button appears (re-runs `POST /api/routes/optimize`). Drag works via mouse (desktop), press-and-hold touch (mobile groomers), and keyboard (focus handle → Space → arrows → Space).
+
+| Test Case | Description | Steps | Expected Result |
+|-----------|-------------|-------|-----------------|
+| TC-WEB-5.29.1 | Drag handle present | Open `/admin/routes` for a route with ≥2 stops. | Each stop card shows a grab handle (⠿) with an accessible label "Drag to reorder <client>". |
+| TC-WEB-5.29.2 | Reorder persists | Drag a stop to a new position and drop it. | A `PATCH /api/routes/:routeId/reorder` fires with the new `stopOrder` (every stop id once, new order). Stop numbers, the map polyline order, and travel-from-previous labels refresh to match. |
+| TC-WEB-5.29.3 | Optimistic update + rollback | Simulate a failing reorder (e.g. server returns an error / offline). | The list shows the new order immediately, then reverts to the prior order when the PATCH fails, and an error message is shown. No stuck/partial order. |
+| TC-WEB-5.29.4 | Tight-schedule warning re-evaluated | Reorder so two stops are too close together. | The affected stop card shows "⚠ Tight schedule — travel + buffer may exceed the gap" (red border) after the server recomputes; warnings clear on a roomier order. |
+| TC-WEB-5.29.5 | Re-optimize button | After a manual drag reorder, locate the hint banner. | A "Stops reordered manually…" hint with a **Re-optimize** button appears. Clicking it fires `POST /api/routes/optimize` and the hint clears once the optimized route loads. The hint is absent before any manual reorder. |
+| TC-WEB-5.29.6 | Touch / mobile drag | On a touch device (or mobile emulation), press-and-hold a stop's handle (~200ms) then drag. | The stop lifts and can be dropped in a new position; page scroll is not hijacked by a quick swipe. Reorder persists as in 5.29.2. |
+| TC-WEB-5.29.7 | Groomer reorders own route | Sign in as a groomer, reorder stops on the own route. | Reorder succeeds (groomer is authorized for their own route). |
+
 ## 6. Pass/Fail Criteria
 
 **Pass:**
diff --git a/package.json b/package.json
index ec73670..4be9039 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
     "test:e2e": "playwright test -c e2e/playwright.config.ts"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@groombook/types": "workspace:*",
     "@stripe/react-stripe-js": "^6.1.0",
     "@stripe/stripe-js": "^9.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03075fc..1736644 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.6)
       '@groombook/types':
         specifier: workspace:*
         version: link:packages/types
@@ -748,6 +757,28 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -3176,6 +3207,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -4261,6 +4295,31 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
+  '@dnd-kit/accessibility@3.1.1(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.6)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.6)
+      react: 19.2.6
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
@@ -6627,6 +6686,8 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  tslib@2.8.1: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
diff --git a/src/__tests__/Routes.test.tsx b/src/__tests__/Routes.test.tsx
index 935a697..a20c49d 100644
--- a/src/__tests__/Routes.test.tsx
+++ b/src/__tests__/Routes.test.tsx
@@ -79,6 +79,9 @@ function mockFetch(meRole: "manager" | "groomer") {
     if (url === "/api/routes/optimize" && opts?.method === "POST") {
       return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
     }
+    if (/^\/api\/routes\/[^/]+\/reorder$/.test(url) && opts?.method === "PATCH") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
     return Promise.resolve({ ok: true, json: () => Promise.resolve({}) } as Response);
   });
 }
@@ -124,6 +127,33 @@ describe("RoutesPage", () => {
     expect(screen.queryByText("Groomer")).not.toBeInTheDocument();
   });
 
+  it("renders a drag handle for each stop (drag-to-reorder enabled)", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByLabelText("Drag to reorder Alice")).toBeInTheDocument();
+    expect(screen.getByLabelText("Drag to reorder Bob")).toBeInTheDocument();
+  });
+
+  it("flags the tight-schedule conflict on the affected stop", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Bob")).toBeInTheDocument());
+    expect(
+      screen.getByText(/Tight schedule — travel \+ buffer may exceed the gap/)
+    ).toBeInTheDocument();
+  });
+
+  it("does not show the re-optimize hint before any manual reorder", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.queryByText("Re-optimize")).not.toBeInTheDocument();
+  });
+
   it("calls the optimize endpoint when Optimize is clicked", async () => {
     const fetchMock = mockFetch("manager");
     global.fetch = fetchMock as unknown as typeof fetch;
diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
index 5d62a30..d0185e0 100644
--- a/src/pages/Routes.tsx
+++ b/src/pages/Routes.tsx
@@ -1,4 +1,22 @@
 import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { useBranding } from "../BrandingContext.js";
 import type { RouteMapStop } from "../components/RouteMap.js";
 
@@ -109,6 +127,100 @@ const inputStyle: React.CSSProperties = {
   fontSize: 14,
 };
 
+/**
+ * A single draggable stop card. The drag handle (⠿) carries the dnd-kit
+ * listeners so the rest of the card stays scrollable/selectable; the handle is
+ * sized for touch and works with pointer, touch and keyboard sensors.
+ */
+function SortableStop({
+  stop,
+  primaryColor,
+  disabled,
+}: {
+  stop: RouteStop;
+  primaryColor: string;
+  disabled: boolean;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: stop.id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        background: "#fff",
+        border: `1px solid ${stop.conflict?.hasConflict ? "#fca5a5" : "#e2e8f0"}`,
+        borderRadius: 8,
+        padding: "0.7rem 0.85rem",
+        display: "flex",
+        gap: 10,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.6 : 1,
+        boxShadow: isDragging ? "0 6px 16px rgba(0,0,0,0.18)" : "none",
+        touchAction: "none",
+      }}
+    >
+      <button
+        type="button"
+        aria-label={`Drag to reorder ${stop.clientName}`}
+        disabled={disabled}
+        {...attributes}
+        {...listeners}
+        style={{
+          flexShrink: 0,
+          alignSelf: "stretch",
+          width: 28,
+          border: "none",
+          background: "transparent",
+          color: "#94a3b8",
+          fontSize: 18,
+          lineHeight: 1,
+          cursor: disabled ? "not-allowed" : "grab",
+          touchAction: "none",
+          padding: 0,
+        }}
+      >
+        ⠿
+      </button>
+      <div
+        style={{
+          flexShrink: 0,
+          width: 26,
+          height: 26,
+          borderRadius: "50%",
+          background: primaryColor,
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 700,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {stop.stopOrder}
+      </div>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
+          <strong style={{ fontSize: 14, color: "#1a202c" }}>{stop.clientName}</strong>
+          <span style={{ fontSize: 13, color: "#4b5563", whiteSpace: "nowrap" }}>{fmtTime(stop.appointmentStartTime)}</span>
+        </div>
+        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{stop.clientAddress || "No address on file"}</div>
+        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
+          {stop.stopOrder === 1 || stop.travelMinsFromPrev == null
+            ? "Start of route"
+            : `${fmtDuration(stop.travelMinsFromPrev)} travel from previous`}
+        </div>
+        {stop.conflict?.hasConflict && (
+          <div style={{ fontSize: 12, color: "#b91c1c", marginTop: 4, fontWeight: 600 }}>
+            ⚠ Tight schedule — travel + buffer may exceed the gap
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // ─── Page ───────────────────────────────────────────────────────────────────────
 
 export function RoutesPage() {
@@ -124,6 +236,8 @@ export function RoutesPage() {
   const [data, setData] = useState<RouteResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const [optimizing, setOptimizing] = useState(false);
+  const [reordering, setReordering] = useState(false);
+  const [manuallyReordered, setManuallyReordered] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const isGroomer = me?.role === "groomer";
@@ -166,6 +280,7 @@ export function RoutesPage() {
         throw new Error(body.error || `Failed to load route (${r.status})`);
       }
       setData(await r.json());
+      setManuallyReordered(false);
     } catch (e) {
       setData(null);
       setError(e instanceof Error ? e.message : "Failed to load route");
@@ -193,6 +308,7 @@ export function RoutesPage() {
         throw new Error(body.error || `Optimization failed (${r.status})`);
       }
       setData(await r.json());
+      setManuallyReordered(false);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Optimization failed");
     } finally {
@@ -200,6 +316,71 @@ export function RoutesPage() {
     }
   }, [staffId, date]);
 
+  // Drag-to-reorder: pointer for desktop, touch (press-and-hold) for mobile
+  // groomers, keyboard for accessibility. Touch uses a short delay so vertical
+  // scrolling of the stop list still works without triggering a drag.
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  // Persist a manually reordered stop list. Optimistic: the UI is updated
+  // immediately from the dropped order and rolled back if the PATCH fails.
+  const reorder = useCallback(
+    async (orderedIds: string[]) => {
+      const routeId = data?.route?.id;
+      if (!routeId) return;
+      const previous = data;
+      // Optimistic local update: renumber stopOrder to match the new order so
+      // the list and the map reflect the drop before the server responds.
+      const byId = new Map((data?.stops ?? []).map((s) => [s.id, s]));
+      const optimisticStops = orderedIds
+        .map((id, i) => {
+          const s = byId.get(id);
+          return s ? { ...s, stopOrder: i + 1 } : null;
+        })
+        .filter((s): s is RouteStop => s !== null);
+      setData((cur) => (cur ? { ...cur, stops: optimisticStops } : cur));
+      setManuallyReordered(true);
+      setReordering(true);
+      setError(null);
+      try {
+        const r = await fetch(`/api/routes/${encodeURIComponent(routeId)}/reorder`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ stopOrder: orderedIds }),
+        });
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `Reorder failed (${r.status})`);
+        }
+        // Server recomputes travel legs, buffers and conflict flags — adopt its
+        // authoritative response over the optimistic guess.
+        setData(await r.json());
+      } catch (e) {
+        setData(previous); // rollback
+        setError(e instanceof Error ? e.message : "Reorder failed");
+      } finally {
+        setReordering(false);
+      }
+    },
+    [data]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const ids = (data?.stops ?? []).map((s) => s.id);
+      const from = ids.indexOf(String(active.id));
+      const to = ids.indexOf(String(over.id));
+      if (from === -1 || to === -1) return;
+      void reorder(arrayMove(ids, from, to));
+    },
+    [data, reorder]
+  );
+
   const mapStops: RouteMapStop[] = useMemo(
     () =>
       (data?.stops ?? []).map((s) => ({
@@ -299,59 +480,52 @@ export function RoutesPage() {
           )}
         </div>
 
-        {/* Stop list panel */}
+        {/* Stop list panel — drag-to-reorder */}
         <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: 540, overflowY: "auto" }}>
           {stops.length === 0 && !loading && (
             <div style={{ color: "#6b7280", fontSize: 14, padding: "1rem" }}>No stops for this day.</div>
           )}
-          {stops.map((s) => (
-            <div
-              key={s.id}
-              style={{
-                background: "#fff",
-                border: `1px solid ${s.conflict?.hasConflict ? "#fca5a5" : "#e2e8f0"}`,
-                borderRadius: 8,
-                padding: "0.7rem 0.85rem",
-                display: "flex",
-                gap: 10,
-              }}
-            >
-              <div
-                style={{
-                  flexShrink: 0,
-                  width: 26,
-                  height: 26,
-                  borderRadius: "50%",
-                  background: primaryColor,
-                  color: "#fff",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
+          {stops.length > 0 && (
+            <>
+              {manuallyReordered && (
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 8, padding: "0.55rem 0.7rem" }}>
+                  <span style={{ fontSize: 12, color: "#92400e" }}>
+                    Stops reordered manually. Re-optimize to recompute the best route.
+                  </span>
+                  <button
+                    type="button"
+                    onClick={optimize}
+                    disabled={optimizing || reordering || !staffId}
+                    style={{
+                      flexShrink: 0,
+                      padding: "0.35rem 0.7rem",
+                      borderRadius: 6,
+                      border: "none",
+                      background: primaryColor,
+                      color: "#fff",
+                      fontSize: 13,
+                      fontWeight: 600,
+                      cursor: optimizing || reordering || !staffId ? "not-allowed" : "pointer",
+                      opacity: optimizing || reordering || !staffId ? 0.6 : 1,
+                    }}
+                  >
+                    {optimizing ? "Optimizing…" : "Re-optimize"}
+                  </button>
+                </div>
+              )}
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
               >
-                {s.stopOrder}
-              </div>
-              <div style={{ minWidth: 0, flex: 1 }}>
-                <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
-                  <strong style={{ fontSize: 14, color: "#1a202c" }}>{s.clientName}</strong>
-                  <span style={{ fontSize: 13, color: "#4b5563", whiteSpace: "nowrap" }}>{fmtTime(s.appointmentStartTime)}</span>
-                </div>
-                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{s.clientAddress || "No address on file"}</div>
-                <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
-                  {s.stopOrder === 1 || s.travelMinsFromPrev == null
-                    ? "Start of route"
-                    : `${fmtDuration(s.travelMinsFromPrev)} travel from previous`}
-                </div>
-                {s.conflict?.hasConflict && (
-                  <div style={{ fontSize: 12, color: "#b91c1c", marginTop: 4, fontWeight: 600 }}>
-                    ⚠ Tight schedule — travel + buffer may exceed the gap
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
+                <SortableContext items={stops.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+                  {stops.map((s) => (
+                    <SortableStop key={s.id} stop={s} primaryColor={primaryColor} disabled={reordering} />
+                  ))}
+                </SortableContext>
+              </DndContext>
+            </>
+          )}
         </div>
       </div>
     </div>

From 044eeaae61a749a9d58a390cf6e49ca478967c53 Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Tue, 9 Jun 2026 04:31:24 +0000
Subject: [PATCH 08/12] feat(GRO-2160): route nav export buttons + offline map
 polish (#66)

---
 UAT_PLAYBOOK.md               |  15 +++
 src/__tests__/Routes.test.tsx |  39 ++++++
 src/pages/Routes.tsx          | 237 +++++++++++++++++++++++++++++++++-
 vite.config.ts                |  17 +++
 4 files changed, 305 insertions(+), 3 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index f2f0e3b..4011e10 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -505,6 +505,21 @@ The stop-list panel is drag-sortable (`@dnd-kit`). Each stop card has a grab han
 | TC-WEB-5.29.6 | Touch / mobile drag | On a touch device (or mobile emulation), press-and-hold a stop's handle (~200ms) then drag. | The stop lifts and can be dropped in a new position; page scroll is not hijacked by a quick swipe. Reorder persists as in 5.29.2. |
 | TC-WEB-5.29.7 | Groomer reorders own route | Sign in as a groomer, reorder stops on the own route. | Reorder succeeds (groomer is authorized for their own route). |
 
+### 5.30 Route Planner — Navigation Export & Offline (GRO-2160)
+
+When a route has stops, an export panel offers **Open in Google Maps** and **Open in Apple Maps** buttons. Each fetches `GET /api/routes/:routeId/export/google-maps` (or `/apple-maps`) and opens the returned deep-link URL in the device's maps app (Google Maps `https://www.google.com/maps/dir/?...`, Apple Maps `maps://...`). The page detects the device OS (iOS / Android / desktop) and renders the most relevant button prominently (filled) with the other as a secondary outline button; on iOS Apple Maps leads, otherwise Google Maps leads. Offline support: the existing Workbox `NetworkFirst` rule caches `/api/routes/*` responses (24h TTL) so a previously-loaded route still renders without network; a `CacheFirst` rule (`osm-tiles`, 7-day TTL, 400 entries) caches OpenStreetMap tiles. On every route load and after each optimize/reorder, the page pre-warms the OSM tiles covering the route's bounding box (zooms 12–14, capped at 80 tiles) so the map is viewable offline. The layout is responsive: below 768px the map/stop-list stack to one column, the map shrinks, and the export buttons go full-width.
+
+| Test Case | Description | Steps | Expected Result |
+|-----------|-------------|-------|-----------------|
+| TC-WEB-5.30.1 | Export buttons render | Open `/admin/routes` for a route with ≥1 stop. | An export panel shows both **Open in Google Maps** and **Open in Apple Maps** buttons. Buttons are absent when there are no stops. |
+| TC-WEB-5.30.2 | Google Maps deep link | Click **Open in Google Maps**. | A `GET /api/routes/:routeId/export/google-maps` fires and the returned `https://www.google.com/maps/dir/?...` URL opens (new tab / Google Maps app) with origin, destination, and waypoints in route order. |
+| TC-WEB-5.30.3 | Apple Maps deep link | On iOS (or emulation), click **Open in Apple Maps**. | A `GET /api/routes/:routeId/export/apple-maps` fires and the returned `maps://...` URL opens Apple Maps with the route chained `+to:`. |
+| TC-WEB-5.30.4 | Platform-aware prominence | Open the page on an iPhone (or iOS UA emulation) vs Android/desktop. | On iOS the **Apple Maps** button is the prominent (filled) one and Google Maps is the secondary (outline); on Android/desktop **Google Maps** is prominent and Apple Maps secondary. Both buttons are always available. |
+| TC-WEB-5.30.5 | Export error handling | Trigger an export that errors (e.g. route exceeds the platform waypoint cap). | The pre-opened tab is closed and an inline error message is shown; no silent failure. |
+| TC-WEB-5.30.6 | Offline route data | Load a route online, then in DevTools → Network set **Offline** and reload `/admin/routes` for the same groomer/date. | The route data still loads from the `api-cache` (NetworkFirst fallback); stops, summary, and badge render without network. |
+| TC-WEB-5.30.7 | Offline map tiles | After viewing/optimizing a route online, go **Offline** and view the same route. | The OSM map tiles for the route area render from the `osm-tiles` CacheFirst cache (pre-warmed); the map is not blank in the route's vicinity. |
+| TC-WEB-5.30.8 | Responsive mobile layout | Open the page at a phone width (≤768px, e.g. 390px). | Map and stop-list stack into a single column, the map height shrinks, and the export buttons span full width. No horizontal scroll; controls remain usable with a thumb. |
+
 ## 6. Pass/Fail Criteria
 
 **Pass:**
diff --git a/src/__tests__/Routes.test.tsx b/src/__tests__/Routes.test.tsx
index a20c49d..ce0f6ac 100644
--- a/src/__tests__/Routes.test.tsx
+++ b/src/__tests__/Routes.test.tsx
@@ -82,6 +82,18 @@ function mockFetch(meRole: "manager" | "groomer") {
     if (/^\/api\/routes\/[^/]+\/reorder$/.test(url) && opts?.method === "PATCH") {
       return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
     }
+    if (/^\/api\/routes\/[^/]+\/export\/google-maps$/.test(url)) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ platform: "google-maps", url: "https://www.google.com/maps/dir/?api=1", stopCount: 2, waypointCount: 0 }),
+      } as Response);
+    }
+    if (/^\/api\/routes\/[^/]+\/export\/apple-maps$/.test(url)) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ platform: "apple-maps", url: "maps://?saddr=51.5,-0.1&daddr=51.52,-0.12", stopCount: 2, waypointCount: 0 }),
+      } as Response);
+    }
     return Promise.resolve({ ok: true, json: () => Promise.resolve({}) } as Response);
   });
 }
@@ -169,4 +181,31 @@ describe("RoutesPage", () => {
       )
     );
   });
+
+  it("renders both navigation export buttons when the route has stops", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByRole("button", { name: "Open in Google Maps" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open in Apple Maps" })).toBeInTheDocument();
+  });
+
+  it("fetches the export deep link and opens it when Open in Google Maps is clicked", async () => {
+    const fetchMock = mockFetch("manager");
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const openSpy = vi
+      .spyOn(window, "open")
+      .mockReturnValue({ location: { href: "" }, close: vi.fn() } as unknown as Window);
+
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+
+    fireEvent.click(screen.getByRole("button", { name: "Open in Google Maps" }));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith("/api/routes/r1/export/google-maps")
+    );
+    expect(openSpy).toHaveBeenCalled();
+  });
 });
diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
index d0185e0..2db13f8 100644
--- a/src/pages/Routes.tsx
+++ b/src/pages/Routes.tsx
@@ -94,6 +94,111 @@ function fmtTime(iso: string): string {
   return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
+// ─── Navigation export ────────────────────────────────────────────────────────
+
+/** Navigation target platforms supported by the API export endpoints. */
+type NavigationPlatform = "google-maps" | "apple-maps";
+
+type DevicePlatform = "ios" | "android" | "other";
+
+/**
+ * Best-effort mobile-OS detection so we can surface the most useful navigation
+ * app first. Apple Maps deep links (`maps://`) only resolve on iOS; everywhere
+ * else Google Maps is the safe default. iPadOS 13+ reports a desktop UA, so we
+ * also treat a touch-capable "MacIntel" device as iOS.
+ */
+function detectPlatform(): DevicePlatform {
+  if (typeof navigator === "undefined") return "other";
+  const ua = navigator.userAgent || "";
+  if (/iphone|ipad|ipod/i.test(ua)) return "ios";
+  if (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) return "ios";
+  if (/android/i.test(ua)) return "android";
+  return "other";
+}
+
+// ─── Offline map-tile pre-warming ────────────────────────────────────────────
+
+/** OSM tile zoom levels pre-fetched around a route so the map renders offline. */
+const PREWARM_ZOOM_LEVELS = [12, 13, 14] as const;
+/** Hard cap on tiles fetched per pre-warm pass — keeps us friendly to OSM. */
+const MAX_PREWARM_TILES = 80;
+/** Subdomains Leaflet's default OSM TileLayer rotates through (`{s}`). */
+const TILE_SUBDOMAINS = ["a", "b", "c"] as const;
+
+/** Web-Mercator longitude → tile X index at the given zoom. */
+function lonToTileX(lon: number, z: number): number {
+  return Math.floor(((lon + 180) / 360) * 2 ** z);
+}
+
+/** Web-Mercator latitude → tile Y index at the given zoom. */
+function latToTileY(lat: number, z: number): number {
+  const rad = (lat * Math.PI) / 180;
+  return Math.floor(
+    ((1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2) * 2 ** z
+  );
+}
+
+/**
+ * Warm the browser/service-worker cache with the OSM tiles covering the route's
+ * bounding box (plus a one-tile margin) across a few zoom levels. Tiles are
+ * fetched via `new Image()` so they hit the same URLs Leaflet later requests and
+ * land in the CacheFirst tile cache, making the map viewable offline. Bounded by
+ * MAX_PREWARM_TILES so a sprawling route never floods the network.
+ */
+function prewarmRouteTiles(
+  stops: Array<{ latitude: number; longitude: number }>
+): void {
+  if (typeof window === "undefined" || stops.length === 0) return;
+  const lats = stops.map((s) => s.latitude);
+  const lons = stops.map((s) => s.longitude);
+  const minLat = Math.min(...lats);
+  const maxLat = Math.max(...lats);
+  const minLon = Math.min(...lons);
+  const maxLon = Math.max(...lons);
+
+  const urls: string[] = [];
+  for (const z of PREWARM_ZOOM_LEVELS) {
+    const x0 = lonToTileX(minLon, z) - 1;
+    const x1 = lonToTileX(maxLon, z) + 1;
+    // Tile Y grows as latitude decreases, so maxLat → smaller Y.
+    const y0 = latToTileY(maxLat, z) - 1;
+    const y1 = latToTileY(minLat, z) + 1;
+    for (let x = x0; x <= x1; x++) {
+      for (let y = y0; y <= y1; y++) {
+        if (x < 0 || y < 0 || x >= 2 ** z || y >= 2 ** z) continue;
+        const s = TILE_SUBDOMAINS[(x + y) % TILE_SUBDOMAINS.length];
+        urls.push(`https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`);
+      }
+    }
+  }
+
+  for (const url of urls.slice(0, MAX_PREWARM_TILES)) {
+    const img = new Image();
+    img.src = url;
+  }
+}
+
+// ─── Responsive layout ────────────────────────────────────────────────────────
+
+/** Tracks a `max-width` media query so the page can adapt to phone widths. */
+function useIsMobile(maxWidthPx = 768): boolean {
+  const query = `(max-width: ${maxWidthPx}px)`;
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia(query).matches
+      : false
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(query);
+    const onChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    setIsMobile(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [query]);
+  return isMobile;
+}
+
 const STATUS_STYLES: Record<RouteStatus, { bg: string; fg: string; label: string }> = {
   draft: { bg: "#f1f5f9", fg: "#475569", label: "Draft" },
   optimized: { bg: "#ecfdf5", fg: "#047857", label: "Optimized" },
@@ -221,6 +326,117 @@ function SortableStop({
   );
 }
 
+/**
+ * Navigation export controls. Fetches a platform deep-link from the API and opens
+ * it. The button matching the detected device OS is shown prominently (filled);
+ * the other is offered as a secondary outline button. On desktop both are
+ * secondary and Google Maps leads.
+ */
+function NavExportButtons({
+  routeId,
+  primaryColor,
+  fullWidth,
+}: {
+  routeId: string;
+  primaryColor: string;
+  fullWidth: boolean;
+}) {
+  const [busy, setBusy] = useState<NavigationPlatform | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const platform = useMemo(detectPlatform, []);
+
+  const openIn = useCallback(
+    async (target: NavigationPlatform) => {
+      setBusy(target);
+      setError(null);
+      // Pre-open a tab synchronously: mobile Safari/Chrome block window.open()
+      // calls that happen after an await (no longer in the user-gesture turn).
+      const win = window.open("", "_blank");
+      try {
+        const r = await fetch(`/api/routes/${encodeURIComponent(routeId)}/export/${target}`);
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `Export failed (${r.status})`);
+        }
+        const { url } = (await r.json()) as { url: string };
+        if (win) win.location.href = url;
+        else window.location.href = url;
+      } catch (e) {
+        win?.close();
+        setError(e instanceof Error ? e.message : "Export failed");
+      } finally {
+        setBusy(null);
+      }
+    },
+    [routeId]
+  );
+
+  const baseBtn: React.CSSProperties = {
+    padding: "0.55rem 1rem",
+    borderRadius: 6,
+    fontWeight: 600,
+    fontSize: 14,
+    cursor: busy ? "wait" : "pointer",
+    flex: fullWidth ? "1 1 0" : "0 0 auto",
+  };
+  const primaryBtn: React.CSSProperties = {
+    ...baseBtn,
+    border: "none",
+    background: primaryColor,
+    color: "#fff",
+  };
+  const secondaryBtn: React.CSSProperties = {
+    ...baseBtn,
+    border: `1px solid ${primaryColor}`,
+    background: "#fff",
+    color: primaryColor,
+  };
+
+  const label = (p: NavigationPlatform) =>
+    busy === p
+      ? "Opening…"
+      : p === "google-maps"
+        ? "Open in Google Maps"
+        : "Open in Apple Maps";
+
+  const google = (
+    <button
+      key="google"
+      type="button"
+      onClick={() => openIn("google-maps")}
+      disabled={busy !== null}
+      style={platform === "ios" ? secondaryBtn : primaryBtn}
+    >
+      {label("google-maps")}
+    </button>
+  );
+  const apple = (
+    <button
+      key="apple"
+      type="button"
+      onClick={() => openIn("apple-maps")}
+      disabled={busy !== null}
+      style={platform === "ios" ? primaryBtn : secondaryBtn}
+    >
+      {label("apple-maps")}
+    </button>
+  );
+  // Prominent (filled) button first; secondary second.
+  const ordered = platform === "ios" ? [apple, google] : [google, apple];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+        <span style={{ fontSize: 12, color: "#4b5563", fontWeight: 600, marginRight: 4 }}>
+          Navigate
+        </span>
+        {ordered}
+      </div>
+      {error && <div style={{ fontSize: 12, color: "#991b1b" }}>{error}</div>}
+    </div>
+  );
+}
+
 // ─── Page ───────────────────────────────────────────────────────────────────────
 
 export function RoutesPage() {
@@ -241,6 +457,7 @@ export function RoutesPage() {
   const [error, setError] = useState<string | null>(null);
 
   const isGroomer = me?.role === "groomer";
+  const isMobile = useIsMobile();
 
   // Resolve the current staff member; groomers are pinned to their own route.
   useEffect(() => {
@@ -393,6 +610,13 @@ export function RoutesPage() {
     [data]
   );
 
+  // Pre-warm OSM map tiles for the route area whenever a route (re)loads or is
+  // re-optimized, so the map stays viewable offline. Runs after today's route is
+  // fetched on page load and after every optimize/reorder that yields new stops.
+  useEffect(() => {
+    if (mapStops.length > 0) prewarmRouteTiles(mapStops);
+  }, [mapStops]);
+
   const stops = data?.stops ?? [];
   const route = data?.route ?? null;
 
@@ -468,9 +692,16 @@ export function RoutesPage() {
         <Summary label="Total distance" value={route?.totalDistanceKm != null ? `${route.totalDistanceKm} km` : "—"} />
       </div>
 
-      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) minmax(280px, 1fr)", gap: 16, alignItems: "stretch" }}>
+      {/* Navigation export — open the route in the device's maps app */}
+      {route && stops.length > 0 && (
+        <div style={{ marginBottom: "1rem", padding: "0.8rem 1rem", background: "#fff", borderRadius: 8, border: "1px solid #e2e8f0" }}>
+          <NavExportButtons routeId={route.id} primaryColor={primaryColor} fullWidth={isMobile} />
+        </div>
+      )}
+
+      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 1.5fr) minmax(280px, 1fr)", gap: 16, alignItems: "stretch" }}>
         {/* Map */}
-        <div style={{ height: 540, background: "#e5e7eb", borderRadius: 8, overflow: "hidden", border: "1px solid #e2e8f0" }}>
+        <div style={{ height: isMobile ? 340 : 540, background: "#e5e7eb", borderRadius: 8, overflow: "hidden", border: "1px solid #e2e8f0" }}>
           {mapStops.length > 0 ? (
             <Suspense fallback={<Centered>Loading map…</Centered>}>
               <RouteMap stops={mapStops} primaryColor={primaryColor} />
@@ -481,7 +712,7 @@ export function RoutesPage() {
         </div>
 
         {/* Stop list panel — drag-to-reorder */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: 540, overflowY: "auto" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: isMobile ? "none" : 540, overflowY: isMobile ? "visible" : "auto" }}>
           {stops.length === 0 && !loading && (
             <div style={{ color: "#6b7280", fontSize: 14, padding: "1rem" }}>No stops for this day.</div>
           )}
diff --git a/vite.config.ts b/vite.config.ts
index d2c7811..eaabdb4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -57,6 +57,23 @@ export default defineConfig({
               },
             },
           },
+          {
+            // OpenStreetMap raster tiles for the Route Planner map. CacheFirst so
+            // tiles pre-warmed for a route render offline during the day. Capped
+            // entries + 7-day TTL keep the cache bounded.
+            urlPattern: /^https:\/\/[abc]\.tile\.openstreetmap\.org\/.*\.png$/i,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "osm-tiles",
+              expiration: {
+                maxEntries: 400,
+                maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
         ],
       },
     }),

From 66bac2c6f87c05c0fbe5e0e7476b6dccd674f370 Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Tue, 9 Jun 2026 10:41:07 +0000
Subject: [PATCH 09/12] feat(GRO-2319): live-render full StatusBadge palette in
 portal (#69)

---
 UAT_PLAYBOOK.md                      | 19 +++++++++
 src/__tests__/Appointments.test.tsx  | 48 +++++++++++++++++++++-
 src/portal/sections/Appointments.tsx | 60 ++++++++++++++++++++++++----
 3 files changed, 118 insertions(+), 9 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 4011e10..6cf326d 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -217,6 +217,25 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | 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.12f Live StatusBadge palette — no-show / pending / waitlisted (GRO-2319)
+
+These cases exercise the full StatusBadge palette as it is now produced live by
+the seeded UAT customer (`uat-customer@groombook.dev`), not just unit-rendered.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.26 | No-show badge (item 1) | Sign in as `uat-customer@groombook.dev`, open `Appointments` → **Past** tab, find the seeded `no_show` appointment | A styled yellow **"No-show"** badge renders (`bg-yellow-100 text-yellow-700`) — **not** a raw gray `no_show` label. The DB `no_show` (underscore) status is normalized to the `no-show` palette key. |
+| TC-WEB-5.12.27 | Pending derivation (item 2) | On the **Upcoming** tab, find the seeded upcoming appointment whose `confirmationStatus` is `pending` (groomer-unconfirmed) | The card's top-row badge reads amber **"Pending"** (derived from `confirmationStatus`), even though the raw appointment status is `scheduled`. |
+| TC-WEB-5.12.28 | Confirmed not overridden | On the **Upcoming** tab, find the seeded confirmed appointment (`confirmationStatus = confirmed`) | Badge still reads green **"Confirmed"** — the pending derivation does not override a confirmed appointment. |
+| TC-WEB-5.12.29 | Waitlisted card (item 2) | On the **Upcoming** tab, find the seeded waitlist entry for the customer | A card renders with a blue **"Waitlisted"** badge, a **dashed muted border**, and the subtext _"You're on the waitlist — we'll let you know if a spot opens."_ The Confirm / Reschedule / Cancel / Notes actions are **not** shown for this entry (it is not a booked appointment). |
+
+> **GRO-2319 note:** the DB `appointment_status` enum cannot represent `pending`
+> or `waitlisted`, so those badges are derived in the portal: `pending` from an
+> upcoming appointment's `confirmationStatus`, and `waitlisted` from active
+> `waitlist_entries` surfaced by `GET /api/portal/appointments` as synthetic
+> cards. The `no_show` → `no-show` key normalization fixes the cosmetic badge
+> mismatch (item 1).
+
 #### 5.12d Appointment API Shape Normalization (GRO-2180)
 
 | # | Scenario | Steps | Expected |
diff --git a/src/__tests__/Appointments.test.tsx b/src/__tests__/Appointments.test.tsx
index c878b46..6c09dcf 100644
--- a/src/__tests__/Appointments.test.tsx
+++ b/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, normalizeAppointment, normalizeService, formatServicePrice, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, normalizeService, formatServicePrice, CustomerNotesSection, ConfirmationSection, StatusBadge, normalizeStatusKey, deriveDisplayStatus, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -517,6 +517,52 @@ describe("StatusBadge", () => {
     expect(badge?.className).toContain("bg-stone-100");
     expect(badge?.className).toContain("text-stone-600");
   });
+
+  // GRO-2319 item 1: DB stores `no_show` (underscore) but the palette key is
+  // `no-show` (hyphen) — without normalization it rendered raw gray text.
+  it("renders the styled No-show badge for DB `no_show` status", () => {
+    render(<StatusBadge status="no_show" />);
+    const badge = screen.getByText("No-show").closest('span');
+    expect(badge?.className).toContain("bg-yellow-100");
+    expect(badge?.className).toContain("text-yellow-700");
+  });
+});
+
+describe("normalizeStatusKey (GRO-2319 item 1)", () => {
+  it("maps underscore status keys to the hyphen palette key", () => {
+    expect(normalizeStatusKey("no_show")).toBe("no-show");
+  });
+
+  it("leaves already-hyphenated / single-word keys unchanged", () => {
+    expect(normalizeStatusKey("no-show")).toBe("no-show");
+    expect(normalizeStatusKey("confirmed")).toBe("confirmed");
+  });
+});
+
+describe("deriveDisplayStatus (GRO-2319 item 2)", () => {
+  it("derives Pending for an upcoming, unconfirmed appointment", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "scheduled", confirmationStatus: "pending" }),
+    ).toBe("pending");
+  });
+
+  it("keeps the raw status when the appointment is confirmed", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "confirmed", confirmationStatus: "confirmed" }),
+    ).toBe("confirmed");
+  });
+
+  it("does not derive Pending for a past appointment", () => {
+    expect(
+      deriveDisplayStatus({ ...PAST_APPT, status: "completed", confirmationStatus: "pending" }),
+    ).toBe("completed");
+  });
+
+  it("always shows Waitlisted for a waitlist-backed entry", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "waitlisted", confirmationStatus: undefined }),
+    ).toBe("waitlisted");
+  });
 });
 
 describe("RescheduleFlow dynamic time slots", () => {
diff --git a/src/portal/sections/Appointments.tsx b/src/portal/sections/Appointments.tsx
index bf55d90..a4bb5a6 100644
--- a/src/portal/sections/Appointments.tsx
+++ b/src/portal/sections/Appointments.tsx
@@ -315,9 +315,19 @@ const STATUS_LABELS: Record<string, string> = {
   scheduled: 'Scheduled',
 };
 
+// The DB `appointment_status` enum stores `no_show` (underscore), but the badge
+// palette is keyed on `no-show` (hyphen). Without normalization a no-show
+// appointment renders as a raw gray `no_show` label instead of the styled
+// "No-show" badge (GRO-2319 item 1). Map underscore status keys to the hyphen
+// palette key so DB-sourced statuses resolve to their intended badge style.
+export function normalizeStatusKey(status: string): string {
+  return status.replace(/_/g, '-');
+}
+
 export function StatusBadge({ status }: { status: string }) {
-  const label = STATUS_LABELS[status] ?? status;
-  const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
+  const key = normalizeStatusKey(status);
+  const label = STATUS_LABELS[key] ?? status;
+  const colorClass = STATUS_COLORS[key] ?? 'bg-stone-100 text-stone-600';
   return (
     <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
       {label}
@@ -325,6 +335,19 @@ export function StatusBadge({ status }: { status: string }) {
   );
 }
 
+// Derives the badge state shown on an Upcoming/Past card from the appointment's
+// raw status plus its confirmationStatus (GRO-2319 item 2, CMPO-approved):
+//   - a synthetic waitlist entry (status `waitlisted`) always shows Waitlisted
+//   - an upcoming appointment the groomer has not yet confirmed
+//     (`confirmationStatus === 'pending'`) shows Pending — semantically honest
+//     and reduces anxiety-driven follow-up messages
+//   - otherwise the raw status drives the badge
+export function deriveDisplayStatus(appt: Appointment): string {
+  if (appt.status === 'waitlisted') return 'waitlisted';
+  if (isUpcoming(appt) && appt.confirmationStatus === 'pending') return 'pending';
+  return appt.status;
+}
+
 const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
   pending: 'bg-amber-100 text-amber-700',
@@ -508,11 +531,24 @@ function AppointmentCard({
   sessionId: string | null;
   onReschedule: (appt: Appointment) => void;
 }) {
+  // A waitlist-backed entry (GRO-2319 item 2, CMPO UX spec GRO-2328) is not a
+  // confirmed appointment: it gets a muted, dashed-border card and a subtext
+  // line so the customer can tell it apart from booked appointments, and the
+  // appointment-only actions (confirm / notes / reschedule / cancel) are hidden.
+  const isWaitlist = appt.status === 'waitlisted';
   return (
-    <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
+    <div
+      className={
+        isWaitlist
+          ? 'bg-stone-50/60 rounded-xl border border-dashed border-stone-300 shadow-sm overflow-hidden'
+          : 'bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden'
+      }
+    >
       <button
         onClick={onToggle}
-        className="w-full flex items-center gap-4 p-4 text-left hover:bg-stone-50"
+        className={`w-full flex items-center gap-4 p-4 text-left ${
+          isWaitlist ? 'hover:bg-stone-100/60' : 'hover:bg-stone-50'
+        }`}
       >
         <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg shrink-0">
           {appt.petName?.charAt(0) || 'P'}
@@ -532,8 +568,13 @@ function AppointmentCard({
             </span>
             <span>with {appt.groomerName || 'First Available'}</span>
           </div>
+          {isWaitlist && (
+            <p className="text-xs text-stone-400 mt-1">
+              You're on the waitlist — we'll let you know if a spot opens.
+            </p>
+          )}
         </div>
-        <StatusBadge status={appt.status} />
+        <StatusBadge status={deriveDisplayStatus(appt)} />
         {expanded ? (
           <ChevronDown size={16} className="text-stone-400" />
         ) : (
@@ -567,11 +608,14 @@ function AppointmentCard({
               {appt.notes}
             </p>
           )}
-          {isUpcoming(appt) && !readOnly && (
+          {!isWaitlist && isUpcoming(appt) && !readOnly && (
             <CustomerNotesSection appointment={appt} sessionId={sessionId} />
           )}
-          {isUpcoming(appt) && <ConfirmationSection appointment={appt} sessionId={sessionId} />}
-          {appt.status !== 'completed' &&
+          {!isWaitlist && isUpcoming(appt) && (
+            <ConfirmationSection appointment={appt} sessionId={sessionId} />
+          )}
+          {!isWaitlist &&
+            appt.status !== 'completed' &&
             appt.status !== 'cancelled' &&
             !readOnly && (
               <div className="flex gap-2 mt-3">

From dee746519085da3eab2ed1cb74224a9dd217847a Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Thu, 11 Jun 2026 14:24:46 +0000
Subject: [PATCH 10/12] fix(GRO-2358): wire signOut() at higher layer for
 no-access screen (#72)

---
 UAT_PLAYBOOK.md               |   3 +-
 src/__tests__/portal.test.tsx | 140 ++++++++++++++++++++++++++++++++++
 src/portal/CustomerPortal.tsx |  23 ++++--
 3 files changed, 157 insertions(+), 9 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 6cf326d..65eb6d5 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -447,7 +447,8 @@ These cases cover the `CustomerPortal` initialisation path that bridges an Authe
 | 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.6 | 404 fallback Sign-out escape hatch (GRO-2358) | From TC-WEB-5.25.5 click **Sign out**. | The shared `signOut()` from `lib/auth-client` fires (same handler as `AdminLayout`); browser navigates to `/login`; the Authentik session cookie is cleared. Reloading `/` no longer hits 404 (will show the login page). The handler always navigates to `/login` — even if the network call to `/api/auth/sign-out` fails — so a transient auth-server hiccup never leaves the user trapped on an authenticated screen. |
+| TC-WEB-5.25.6b | 404 fallback Sign-out on deep-link (GRO-2358) | From TC-WEB-5.25.5, instead of staying on `/`, navigate directly to a portal sub-route (e.g. `/appointments`, `/pets`, `/billing`). The no-access card renders. Click **Sign out**. | The same shared `signOut()` handler fires and the browser navigates to `/login`. The no-access screen must surface an escape hatch on every authenticated route — not just `/` — so a stale or deep link into a portal the user has no access to can never trap them. |
 | 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. |
diff --git a/src/__tests__/portal.test.tsx b/src/__tests__/portal.test.tsx
index 73e0a92..fdff7dd 100644
--- a/src/__tests__/portal.test.tsx
+++ b/src/__tests__/portal.test.tsx
@@ -21,6 +21,18 @@ vi.mock("../portal/sections/Appointments.js", async () => {
   };
 });
 
+// Spy on the canonical `signOut()` from the shared auth-client so we can
+// assert the no-access screen's logout button uses the SAME handler as
+// `AdminLayout`. We mock at the module boundary — the no-access screen is
+// the one authenticated surface that renders without the portal chrome, so
+// a regression here would trap the user. We do NOT use `importActual`
+// because the real `createAuthClient()` requires a runtime `baseURL`
+// (Better Auth) that the JSDOM test environment can't supply.
+const signOutSpy = vi.hoisted(() => vi.fn(async () => undefined));
+vi.mock("../lib/auth-client.js", () => ({
+  signOut: signOutSpy,
+}));
+
 const SESSION: ImpersonationSession = {
   id: "sess-1",
   staffId: "staff-1",
@@ -336,6 +348,8 @@ describe("CustomerPortal SSO bridge", () => {
   beforeEach(() => {
     // Make sure no dev-user leaks across tests
     window.localStorage.clear();
+    // Reset shared signOut() spy so per-test counts are deterministic
+    signOutSpy.mockClear();
   });
 
   const brandingResponse = {
@@ -429,6 +443,132 @@ describe("CustomerPortal SSO bridge", () => {
     expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
   });
 
+  it("calls the shared signOut() handler and navigates to /login from the no-access screen (GRO-2358)", async () => {
+    // Reset the spy so previous tests don't leak into this assertion.
+    signOutSpy.mockClear();
+
+    // JSDOM throws on window.location.href assignment by default; swap in a
+    // writable stub so the navigation is observable, then restore after.
+    const originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+      configurable: true,
+    });
+
+    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();
+    });
+
+    // Pre-condition: the shared signOut() must NOT have been called yet — the
+    // no-access screen is mounted because the bridge failed, not because the
+    // user clicked anything.
+    expect(signOutSpy).not.toHaveBeenCalled();
+
+    // Drive the click. The handler is the SAME `signOut()` exported from
+    // auth-client that AdminLayout uses, so verifying this call is enough to
+    // prove the no-access screen reaches the canonical sign-out surface.
+    const signOutButton = screen.getByRole("button", { name: /Sign out/i });
+    fireEvent.click(signOutButton);
+
+    await waitFor(() => {
+      expect(signOutSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // The handler always navigates to /login — even if the network call to
+    // /api/auth/sign-out fails — so a transient auth-server hiccup never
+    // leaves the user trapped on an authenticated screen.
+    await waitFor(() => {
+      expect(window.location.href).toBe("/login");
+    });
+
+    Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
+  });
+
+  it("reaches the same shared signOut() on a deep-link no-access screen (GRO-2358)", async () => {
+    // AC requires verifying the SAME logout handler is reachable from at
+    // least one other authenticated surface — here a deep link to a portal
+    // sub-route (e.g. /appointments) for a user with a Better Auth session
+    // but no client record. The no-access screen is the only authenticated
+    // surface without a route guard, so the handler must fire identically.
+    signOutSpy.mockClear();
+
+    const originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+      configurable: true,
+    });
+
+    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={["/appointments"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument();
+    });
+
+    const signOutButton = screen.getByRole("button", { name: /Sign out/i });
+    fireEvent.click(signOutButton);
+
+    await waitFor(() => {
+      expect(signOutSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(window.location.href).toBe("/login");
+    });
+
+    Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
+  });
+
   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();
diff --git a/src/portal/CustomerPortal.tsx b/src/portal/CustomerPortal.tsx
index acb2f44..e91b4a4 100644
--- a/src/portal/CustomerPortal.tsx
+++ b/src/portal/CustomerPortal.tsx
@@ -15,6 +15,7 @@ import { ImpersonationBanner } from "./ImpersonationBanner.js";
 import { AuditLogViewer } from "./AuditLogViewer.js";
 import { useBranding } from "../BrandingContext.js";
 import { getDevUser } from "../pages/DevLoginSelector.js";
+import { signOut } from "../lib/auth-client.js";
 import type { ImpersonationSession } from "@groombook/types";
 import type { Appointment as PortalAppointment } from "./sections/Appointments.js";
 
@@ -193,6 +194,19 @@ export function CustomerPortal() {
     }
   }, [session]);
 
+  // Shared sign-out handler — wires the canonical Better Auth `signOut()` so
+  // every authenticated surface (no-access screen, portal chrome, etc.) uses
+  // the same implementation as `AdminLayout`. Failure to reach the server
+  // still leaves the SPA free to navigate to /login.
+  const handleSignOut = useCallback(async () => {
+    try {
+      await signOut();
+    } catch {
+      // Best-effort; navigate to /login regardless so the user is never trapped.
+    }
+    window.location.href = "/login";
+  }, []);
+
   const logPageView = useCallback((page: string) => {
     if (!session) return;
     void fetch(`/api/impersonation/sessions/${session.id}/log`, {
@@ -281,14 +295,7 @@ export function CustomerPortal() {
             <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";
-              }}
+              onClick={() => { void handleSignOut(); }}
               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} />

From 250c7a5ac9b035be564165b9317ff8975478594f Mon Sep 17 00:00:00 2001
From: Flea Flicker <flea@groombook.local>
Date: Thu, 11 Jun 2026 16:30:03 +0000
Subject: [PATCH 11/12] feat(GRO-2359): route Authentik new-SSO users into OOBE
 (web)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The post-auth handler in CustomerPortal previously rendered the
"Portal access not configured" card when the SSO bridge returned 404
(no client row for the user's email). That trapped first-time SSO
users on a dead-end screen with no path to portal creation.

This change routes the 404 to a new OOBE component (src/portal/OOBE.tsx)
that drives portal creation:
  * Mounts inline inside CustomerPortal so the post-auth flow stays
    inside the portal render tree (no App-level router needed).
  * Also reachable as a direct deep-link via the new /onboarding route
    in App.tsx (for grooming admins or recovery flows).
  * Submits to a new POST /api/portal/clients-from-auth endpoint in
    groombook-api (companion commit) that creates a fresh client row
    bound to the Better Auth email. 409 means the email already has a
    portal record — the OOBE shows a portal-selection message.
  * Uses the canonical shared signOut() from lib/auth-client (GRO-2358
    invariant) for the Sign out button.
  * Full window.location.href reload on submit success to reset the
    bridge's cached state and land the user in their portal.

The no-access card itself is preserved for the deep-link deleted-portal
case (a customer whose portal was disabled/deleted), signalled via
?noAccess=deleted-portal on a portal sub-route. The OOBE handles the
first-time-creation case; the no-access card handles the "had a portal
but lost it" case.

Test coverage:
  * "routes to /onboarding when session-from-auth returns 404 (GRO-2359)"
    — proves the post-auth 404 mounts the OOBE inline, not the legacy
    no-access card.
  * 6 new OOBE tests: render from direct link, name prefill, form
    submission, 409 portal-selection, required-name validation, shared
    signOut(), redirect on no-session.
  * P1 no-access tests reworked to use ?noAccess=deleted-portal so the
    GRO-2358 signOut invariant is still verified on the only surviving
    path to the no-access card.

UAT_PLAYBOOK §5.25.5–6e rewritten to cover the OOBE flow (form submit,
409, deep-link mount, deleted-portal no-access card).

Paired with the api PR on feature/2357-p2-portal-clients-from-auth.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 UAT_PLAYBOOK.md               |   9 +-
 src/App.tsx                   |  14 +-
 src/__tests__/portal.test.tsx | 359 +++++++++++++++++++++++++++++++---
 src/portal/CustomerPortal.tsx |  41 +++-
 src/portal/OOBE.tsx           | 312 +++++++++++++++++++++++++++++
 5 files changed, 699 insertions(+), 36 deletions(-)
 create mode 100644 src/portal/OOBE.tsx

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 65eb6d5..db861b7 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -446,9 +446,12 @@ These cases cover the `CustomerPortal` initialisation path that bridges an Authe
 | 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 (GRO-2358) | From TC-WEB-5.25.5 click **Sign out**. | The shared `signOut()` from `lib/auth-client` fires (same handler as `AdminLayout`); browser navigates to `/login`; the Authentik session cookie is cleared. Reloading `/` no longer hits 404 (will show the login page). The handler always navigates to `/login` — even if the network call to `/api/auth/sign-out` fails — so a transient auth-server hiccup never leaves the user trapped on an authenticated screen. |
-| TC-WEB-5.25.6b | 404 fallback Sign-out on deep-link (GRO-2358) | From TC-WEB-5.25.5, instead of staying on `/`, navigate directly to a portal sub-route (e.g. `/appointments`, `/pets`, `/billing`). The no-access card renders. Click **Sign out**. | The same shared `signOut()` handler fires and the browser navigates to `/login`. The no-access screen must surface an escape hatch on every authenticated route — not just `/` — so a stale or deep link into a portal the user has no access to can never trap them. |
+| TC-WEB-5.25.5 | 404 from SSO bridge routes to OOBE (GRO-2359) | 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 post-auth handler mounts the **OOBE** (`src/portal/OOBE.tsx`) — a centred card titled **"Welcome — let's set up your portal"** with form fields for name (prefilled from the Better Auth session), phone, address, and notes. The legacy "Portal access not configured" card is **not** rendered on the new-user path. No redirect loop, no portal chrome. |
+| TC-WEB-5.25.6 | OOBE form submission creates the portal (GRO-2359) | From TC-WEB-5.25.5, fill in the OOBE form and click **Create my portal**. | `POST /api/portal/clients-from-auth` is called with `{ name, phone, address, notes }`; the email is taken from the Better Auth session (the API binds the new client row to the SSO identity). The page reloads to `/`, the bridge re-runs, and the user lands in their portal dashboard. DevTools → Network shows `POST /api/portal/clients-from-auth` → 201 followed by `POST /api/portal/session-from-auth` → 201. |
+| TC-WEB-5.25.6b | OOBE handles portal selection (409 from clients-from-auth) (GRO-2359) | 1. Sign in via SSO with an email that already exists in `clients` (e.g. a previously deleted-then-recreated account). 2. Land on OOBE. 3. Click **Create my portal**. | The API returns 409 "A customer record with this email already exists". The OOBE re-enables the submit button and shows the portal-selection message: "A customer record with this email already exists. Please contact your groomer to link your account." The shared signOut() button remains reachable so the user can exit if needed. |
+| TC-WEB-5.25.6c | OOBE uses the shared signOut() handler (GRO-2358, GRO-2359) | From TC-WEB-5.25.5, click **Sign out** in the OOBE footer. | The same shared `signOut()` from `lib/auth-client` fires (same handler as `AdminLayout` and the no-access card); browser navigates to `/login`; the Authentik session cookie is cleared. The handler always navigates to `/login` — even if the network call to `/api/auth/sign-out` fails — so a transient auth-server hiccup never leaves the user trapped on an authenticated screen. |
+| TC-WEB-5.25.6d | OOBE is mountable from a direct deep-link (GRO-2359) | 1. Sign in via SSO as any customer. 2. In a new tab, navigate to `https://uat.groombook.dev/onboarding`. | The OOBE form mounts (the App.tsx `/onboarding` route resolves before the CustomerPortal `!sessionId` guards). The submit, signOut, and field-validation behaviour are identical to the post-auth mount. |
+| TC-WEB-5.25.6e | Deleted-portal deep-link still reaches the no-access card (GRO-2358, GRO-2359) | 1. Sign in via SSO as a customer whose `clients` row was disabled/deleted by the groomer. 2. Land on a portal sub-route with `?noAccess=deleted-portal` (e.g. visit `https://uat.groombook.dev/appointments?noAccess=deleted-portal` directly). | The no-access card renders (the deep-link deleted-portal case — the OOBE is reserved for first-time creation). The shared signOut() from GRO-2358 is wired identically. This proves the no-access card is still reachable for non-new-user failure modes and the CMPO "no-trap" invariant holds across the auth boundary. |
 | 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. |
diff --git a/src/App.tsx b/src/App.tsx
index d15f9eb..c6fee9d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ import { BookingCancelledPage } from "./pages/BookingCancelled.js";
 import { BookingErrorPage } from "./pages/BookingError.js";
 import { SetupWizard } from "./pages/SetupWizard.tsx";
 import { CustomerPortal } from "./portal/CustomerPortal.js";
+import { OOBE } from "./portal/OOBE.js";
 import { DevLoginSelector, getDevUser } from "./pages/DevLoginSelector.js";
 import { DevSessionIndicator } from "./components/DevSessionIndicator.js";
 import { BrandingProvider, useBranding } from "./BrandingContext.js";
@@ -406,7 +407,13 @@ export function App() {
   }
 
   // Don't render portal chrome at /login — DevLoginSelector is shown instead
-  const showCustomerPortal = !location.pathname.startsWith("/admin") && location.pathname !== "/login";
+  const showCustomerPortal = !location.pathname.startsWith("/admin") && location.pathname !== "/login" && location.pathname !== "/onboarding";
+  // GRO-2359: OOBE is mountable from a direct link (deep-link to /onboarding)
+  // and from the post-auth callback (CustomerPortal navigates here when the
+  // SSO bridge returns 404). Render the OOBE component standalone so it's
+  // outside the portal chrome (no `!sessionId` guards, no `!initComplete`
+  // loading states to fight — the OOBE handles its own auth resolution).
+  const showOOBE = location.pathname === "/onboarding";
 
   // At /login with a valid session, redirect to the portal root. Without this,
   // the final render returns null at /login (showCustomerPortal is false) and
@@ -425,6 +432,11 @@ export function App() {
           </Routes>
           {authDisabled && <DevSessionIndicator />}
         </>
+      ) : showOOBE ? (
+        <>
+          <OOBE />
+          {authDisabled && <DevSessionIndicator />}
+        </>
       ) : showCustomerPortal ? (
         <>
           <CustomerPortal />
diff --git a/src/__tests__/portal.test.tsx b/src/__tests__/portal.test.tsx
index fdff7dd..d73629e 100644
--- a/src/__tests__/portal.test.tsx
+++ b/src/__tests__/portal.test.tsx
@@ -64,6 +64,22 @@ const AUDIT_LOGS: ImpersonationAuditLog[] = [
   },
 ];
 
+// ─── Shared test fixtures ───────────────────────────────────────────────────
+
+// `brandingResponse` is the mock /api/branding payload used by every test
+// in this file. Hoisted to module scope so the SSO bridge and the OOBE
+// describe blocks can both reach it without redefining the same body.
+const brandingResponse = {
+  ok: true,
+  json: async () => ({
+    businessName: "GroomBook",
+    primaryColor: "#4f8a6f",
+    accentColor: "#8b7355",
+    logoBase64: null,
+    logoMimeType: null,
+  }),
+} as Response;
+
 // ─── ImpersonationBanner ────────────────────────────────────────────────────
 
 describe("ImpersonationBanner", () => {
@@ -352,17 +368,6 @@ describe("CustomerPortal SSO bridge", () => {
     signOutSpy.mockClear();
   });
 
-  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();
@@ -408,14 +413,21 @@ describe("CustomerPortal SSO bridge", () => {
     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 () => {
+  it("routes to /onboarding when session-from-auth returns 404 (GRO-2359)", async () => {
+    // GRO-2359 replaces the P1 no-access fallback for the new-user path.
+    // The post-auth handler must now navigate to /onboarding so the OOBE
+    // component can drive portal creation. The no-access card itself is
+    // reserved for the deep-link deleted-portal case (see the next two
+    // tests, which exercise ?noAccess=deleted-portal).
     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" } }),
+          json: async () => ({
+            user: { email: "stranger@example.com", name: "Stranger", role: "customer" },
+          }),
         } as Response);
       }
       if (url === "/api/portal/session-from-auth") {
@@ -428,6 +440,9 @@ describe("CustomerPortal SSO bridge", () => {
       return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
     }) as unknown as typeof fetch;
 
+    // MemoryRouter is required for the React Router context used by
+    // useNavigate inside CustomerPortal. We pass `initialEntries=["/"]`
+    // and let the post-auth handler navigate the router to /onboarding.
     const { CustomerPortal } = await import("../portal/CustomerPortal.js");
     render(
       <MemoryRouter initialEntries={["/"]}>
@@ -435,12 +450,13 @@ describe("CustomerPortal SSO bridge", () => {
       </MemoryRouter>
     );
 
+    // The bridge 404 must NOT render the legacy no-access card. The OOBE
+    // form is the new-user surface.
     await waitFor(() => {
-      expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument();
+      expect(screen.getByText(/set up your portal/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();
+    expect(screen.queryByText(/Portal access not configured/i)).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Create my portal/i })).toBeInTheDocument();
   });
 
   it("calls the shared signOut() handler and navigates to /login from the no-access screen (GRO-2358)", async () => {
@@ -456,6 +472,11 @@ describe("CustomerPortal SSO bridge", () => {
       configurable: true,
     });
 
+    // GRO-2359: the post-auth bridge 404 now routes to /onboarding (OOBE)
+    // on the new-user path. The no-access card itself is reserved for the
+    // deep-link deleted-portal case, which is signalled via
+    // ?noAccess=deleted-portal. A server-side "client disabled" check
+    // (future GRO) is the natural trigger.
     global.fetch = vi.fn((input: RequestInfo) => {
       const url = typeof input === "string" ? input : input.toString();
       if (url === "/api/branding") return Promise.resolve(brandingResponse);
@@ -465,11 +486,15 @@ describe("CustomerPortal SSO bridge", () => {
           json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }),
         } as Response);
       }
+      // The bridge must NOT succeed (so portalSessionId stays null) and must
+      // NOT be 404 (which would route to /onboarding). A 500 models a
+      // server-side portal-disabled check; the no-access card is mounted
+      // because of the URL param, not because of the bridge.
       if (url === "/api/portal/session-from-auth") {
         return Promise.resolve({
           ok: false,
-          status: 404,
-          json: async () => ({ error: "No client record found for this user" }),
+          status: 500,
+          json: async () => ({ error: "Portal disabled" }),
         } as Response);
       }
       return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
@@ -477,7 +502,7 @@ describe("CustomerPortal SSO bridge", () => {
 
     const { CustomerPortal } = await import("../portal/CustomerPortal.js");
     render(
-      <MemoryRouter initialEntries={["/"]}>
+      <MemoryRouter initialEntries={["/?noAccess=deleted-portal"]}>
         <CustomerPortal />
       </MemoryRouter>
     );
@@ -487,8 +512,8 @@ describe("CustomerPortal SSO bridge", () => {
     });
 
     // Pre-condition: the shared signOut() must NOT have been called yet — the
-    // no-access screen is mounted because the bridge failed, not because the
-    // user clicked anything.
+    // no-access screen is mounted because of the deleted-portal signal, not
+    // because the user clicked anything.
     expect(signOutSpy).not.toHaveBeenCalled();
 
     // Drive the click. The handler is the SAME `signOut()` exported from
@@ -515,8 +540,12 @@ describe("CustomerPortal SSO bridge", () => {
     // AC requires verifying the SAME logout handler is reachable from at
     // least one other authenticated surface — here a deep link to a portal
     // sub-route (e.g. /appointments) for a user with a Better Auth session
-    // but no client record. The no-access screen is the only authenticated
-    // surface without a route guard, so the handler must fire identically.
+    // whose portal was deleted. The no-access screen is the only
+    // authenticated surface without a route guard, so the handler must
+    // fire identically.
+    //
+    // GRO-2359: the bridge 404 now routes to /onboarding (OOBE) on the
+    // new-user path; ?noAccess=deleted-portal is the surviving trigger.
     signOutSpy.mockClear();
 
     const originalLocation = window.location;
@@ -535,11 +564,15 @@ describe("CustomerPortal SSO bridge", () => {
           json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }),
         } as Response);
       }
+      // The bridge must NOT succeed (so portalSessionId stays null) and must
+      // NOT be 404 (which would route to /onboarding). A 500 models a
+      // server-side portal-disabled check; the no-access card is mounted
+      // because of the URL param, not because of the bridge.
       if (url === "/api/portal/session-from-auth") {
         return Promise.resolve({
           ok: false,
-          status: 404,
-          json: async () => ({ error: "No client record found for this user" }),
+          status: 500,
+          json: async () => ({ error: "Portal disabled" }),
         } as Response);
       }
       return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
@@ -547,7 +580,7 @@ describe("CustomerPortal SSO bridge", () => {
 
     const { CustomerPortal } = await import("../portal/CustomerPortal.js");
     render(
-      <MemoryRouter initialEntries={["/appointments"]}>
+      <MemoryRouter initialEntries={["/appointments?noAccess=deleted-portal"]}>
         <CustomerPortal />
       </MemoryRouter>
     );
@@ -753,3 +786,275 @@ describe("CustomerPortal SSO bridge", () => {
     });
   });
 });
+
+describe("OOBE portal-creation flow (GRO-2359)", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  // The OOBE is mounted both from the post-auth callback (CustomerPortal
+  // navigates to /onboarding on bridge 404) and from a direct deep-link.
+  // This set of tests exercises the direct-link mount, the form submit, and
+  // the shared signOut() handler. The post-auth routing is covered by the
+  // "routes to /onboarding when session-from-auth returns 404" test above.
+
+  function setupOOBEAuthMock(opts: { role?: string } = {}) {
+    const role = opts.role ?? "customer";
+    return 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: "new-sso@example.com", name: "New SSO", role },
+          }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+  }
+
+  it("renders the OOBE form when navigated to /onboarding directly (GRO-2359)", async () => {
+    global.fetch = setupOOBEAuthMock();
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /set up your portal/i })).toBeInTheDocument();
+    });
+    // All three primary form fields are present.
+    expect(screen.getByLabelText(/your name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/phone/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/address/i)).toBeInTheDocument();
+    // Submit and shared signOut are both present.
+    expect(screen.getByRole("button", { name: /Create my portal/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
+  });
+
+  it("prefills the name field from the Better Auth session (GRO-2359)", async () => {
+    global.fetch = setupOOBEAuthMock();
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/your name/i)).toHaveValue("New SSO");
+    });
+  });
+
+  it("calls POST /api/portal/clients-from-auth and navigates to / on success (GRO-2359)", async () => {
+    const fetchMock = 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: "new-sso@example.com", name: "New SSO", role: "customer" },
+          }),
+        } as Response);
+      }
+      if (url === "/api/portal/clients-from-auth" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: async () => ({
+            id: "new-client-id",
+            name: "New SSO",
+            email: "new-sso@example.com",
+          }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+    global.fetch = fetchMock;
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/your name/i)).toHaveValue("New SSO");
+    });
+
+    // Fill phone + address and submit.
+    fireEvent.change(screen.getByLabelText(/phone/i), {
+      target: { value: "555-1234" },
+    });
+    fireEvent.change(screen.getByLabelText(/address/i), {
+      target: { value: "1 Main St" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /Create my portal/i }));
+
+    // The endpoint must have been called with the form values, normalised
+    // (phone/address trimmed). We don't assert navigation here because the
+    // MemoryRouter would need a history prop to assert a URL change — the
+    // internal `navigate("/")` call is the contract.
+    await waitFor(() => {
+      const calls = vi.mocked(fetchMock).mock.calls;
+      const onboardCall = calls.find(([u]) =>
+        typeof u === "string" && (u as string).endsWith("/api/portal/clients-from-auth"),
+      );
+      expect(onboardCall).toBeDefined();
+      const body = JSON.parse(((onboardCall?.[1] as RequestInit | undefined)?.body as string) ?? "{}");
+      expect(body).toEqual({
+        name: "New SSO",
+        phone: "555-1234",
+        address: "1 Main St",
+        notes: null,
+      });
+    });
+  });
+
+  it("shows the portal-selection message when the API returns 409 (GRO-2359)", 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: "new-sso@example.com", name: "New SSO", role: "customer" },
+          }),
+        } as Response);
+      }
+      if (url === "/api/portal/clients-from-auth" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: false,
+          status: 409,
+          json: async () => ({ error: "A customer record with this email already exists" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/your name/i)).toHaveValue("New SSO");
+    });
+    fireEvent.click(screen.getByRole("button", { name: /Create my portal/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/already exists/i)).toBeInTheDocument();
+    });
+    // The submit button is re-enabled after the error so the user can retry.
+    expect(screen.getByRole("button", { name: /Create my portal/i })).not.toBeDisabled();
+  });
+
+  it("requires the name field before submitting (GRO-2359)", async () => {
+    // Use a session WITHOUT a name so the OOBE starts with an empty form.
+    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: "noname@example.com", role: "customer" } }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/your name/i)).toHaveValue("");
+    });
+    fireEvent.click(screen.getByRole("button", { name: /Create my portal/i }));
+
+    // The name-required error is shown; no API call was made.
+    await waitFor(() => {
+      expect(screen.getByText(/tell us your name/i)).toBeInTheDocument();
+    });
+  });
+
+  it("uses the shared signOut() handler on the OOBE Sign out button (GRO-2359)", async () => {
+    signOutSpy.mockClear();
+    const originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+      configurable: true,
+    });
+
+    global.fetch = setupOOBEAuthMock();
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByRole("button", { name: /Sign out/i }));
+
+    // Same canonical handler as AdminLayout and the no-access card, per
+    // GRO-2358 — never a raw fetch("/api/auth/sign-out").
+    await waitFor(() => {
+      expect(signOutSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(window.location.href).toBe("/login");
+    });
+
+    Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
+  });
+
+  it("redirects to /login when no Better Auth session is present (GRO-2359)", async () => {
+    const originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+      configurable: true,
+    });
+
+    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: false, status: 401, json: async () => ({}) } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { OOBE } = await import("../portal/OOBE.js");
+    render(
+      <MemoryRouter initialEntries={["/onboarding"]}>
+        <OOBE />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(window.location.href).toBe("/login");
+    });
+
+    Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
+  });
+});
diff --git a/src/portal/CustomerPortal.tsx b/src/portal/CustomerPortal.tsx
index e91b4a4..45154aa 100644
--- a/src/portal/CustomerPortal.tsx
+++ b/src/portal/CustomerPortal.tsx
@@ -13,6 +13,7 @@ import { Communication } from "./sections/Communication.js";
 import { AccountSettings } from "./sections/AccountSettings.js";
 import { ImpersonationBanner } from "./ImpersonationBanner.js";
 import { AuditLogViewer } from "./AuditLogViewer.js";
+import { OOBE } from "./OOBE.js";
 import { useBranding } from "../BrandingContext.js";
 import { getDevUser } from "../pages/DevLoginSelector.js";
 import { signOut } from "../lib/auth-client.js";
@@ -53,6 +54,13 @@ export function CustomerPortal() {
   // (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);
+  // GRO-2359 — the SSO bridge 404 (no client row for the user's email)
+  // routes the user into the OOBE. We mount the OOBE inline rather than
+  // navigating to /onboarding so the post-auth flow stays inside the
+  // CustomerPortal render tree (test-isolated, no App-level router needed
+  // for the integration to work). The /onboarding route in App.tsx is
+  // still the mount point for direct deep-links to the same component.
+  const [showOOBE, setShowOOBE] = useState(false);
   const { branding } = useBranding();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -63,6 +71,18 @@ export function CustomerPortal() {
     initDone.current = true;
 
     const sessionId = searchParams.get("sessionId");
+    // GRO-2359: a deep-link to a portal sub-route with ?noAccess=deleted-portal
+    // is the only path that still shows the no-access card. The post-auth
+    // 404-from-bridge path now navigates to /onboarding (OOBE) so the new
+    // user can create a portal. The deleted-portal case is set explicitly
+    // (e.g. a groomer who disabled a client) and uses the same no-access
+    // UI with the shared signOut() — that was the GRO-2358 invariant.
+    const noAccess = searchParams.get("noAccess");
+    if (noAccess === "deleted-portal") {
+      setAuthError(
+        "Your portal access has been removed. Please contact your groomer if you think this is a mistake.",
+      );
+    }
 
     if (sessionId) {
       setIsImpersonating(true);
@@ -153,11 +173,13 @@ export function CustomerPortal() {
           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."
-          );
+          // Authenticated but no matching client row — mount the OOBE
+          // (GRO-2359) so the user can create their portal record instead
+          // of landing on the no-access card. The no-access card itself is
+          // still reachable for the deleted-portal case (see GRO-2358) via
+          // the ?noAccess=deleted-portal deep-link, but is no longer in
+          // the new-user path.
+          setShowOOBE(true);
         }
         // 401/other: fall through; App.tsx render guard will redirect to /login.
       } catch {
@@ -280,6 +302,15 @@ export function CustomerPortal() {
   // session state. Dev users are verified via localStorage and the dev-session flow.
   // SSO customers are recognised by portalSessionId (set by the Better Auth bridge).
   if (!session && !portalSessionId) {
+    // GRO-2359 — new-user path: mount the OOBE inline so the SSO bridge's
+    // 404 hands the user a portal-creation form instead of the no-access
+    // card. onCompleted triggers a full page reload to /, which re-runs
+    // the bridge (now with a matching client row) and lands the user in
+    // the portal. A full reload (not React Router navigate) is the
+    // safest reset of the bridge's cached state.
+    if (showOOBE) {
+      return <OOBE onCompleted={() => { window.location.href = "/"; }} />;
+    }
     if (authError) {
       // GRO-1867: graceful 404 fallback — authenticated user has no client row.
       return (
diff --git a/src/portal/OOBE.tsx b/src/portal/OOBE.tsx
new file mode 100644
index 0000000..325941c
--- /dev/null
+++ b/src/portal/OOBE.tsx
@@ -0,0 +1,312 @@
+import { useCallback, useEffect, useState } from "react";
+import { LogOut, Shield, Sparkles } from "lucide-react";
+import { signOut } from "../lib/auth-client.js";
+
+/**
+ * OOBE (Out-of-Box Experience) for a first-time Authentik SSO user whose
+ * email does not match any existing `clients` row.
+ *
+ * The post-auth handler in `CustomerPortal.tsx` redirects to this component
+ * when `POST /api/portal/session-from-auth` returns 404. From here the new
+ * user can either:
+ *   (a) Create a fresh customer record bound to their SSO email, or
+ *   (b) Sign out (the no-access screen is no longer in the new-user path).
+ *
+ * After successful creation, the OOBE navigates to `/` so the portal's
+ * existing SSO bridge re-runs and lands the user in their portal with a
+ * real `X-Impersonation-Session-Id` header. No new client state is
+ * required — the bridge re-resolves the session and the rest of the
+ * portal is unchanged.
+ *
+ * GRO-2359 — root-cause fix for "new SSO user lands on Portal access not
+ * configured" (companion to GRO-2358, which restored logout on that screen).
+ */
+
+type OOBEFormState = {
+  name: string;
+  phone: string;
+  address: string;
+  notes: string;
+};
+
+type OOBEStatus = "loading" | "ready" | "submitting" | "error";
+
+const EMPTY_FORM: OOBEFormState = {
+  name: "",
+  phone: "",
+  address: "",
+  notes: "",
+};
+
+type OOBEProps = {
+  /**
+   * Override the post-success destination. Defaults to `/` so the SSO bridge
+   * re-runs. Test suites pass a custom destination to keep assertions
+   * deterministic without a real portal session.
+   */
+  onCompleted?: () => void;
+};
+
+export function OOBE({ onCompleted }: OOBEProps = {}) {
+  const [status, setStatus] = useState<OOBEStatus>("loading");
+  const [form, setForm] = useState<OOBEFormState>(EMPTY_FORM);
+  const [error, setError] = useState<string | null>(null);
+  const [sessionEmail, setSessionEmail] = useState<string | null>(null);
+
+  // Resolve the Better Auth session on mount. The OOBE is gated to
+  // authenticated users — if no session exists the API will reject the
+  // creation request, so we redirect to /login early. We prefill `name`
+  // from the Better Auth `user.name` if the SSO provider returned one.
+  //
+  // We use a full `window.location.href` redirect (not `navigate`) so the
+  // OOBE works the same way whether it's mounted from the post-auth
+  // callback (inside CustomerPortal's render tree) or from a direct
+  // deep-link (mounted by App.tsx). A full reload also resets any
+  // cached state in the parent component.
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await fetch("/api/auth/get-session", { credentials: "include" });
+        if (!r.ok) {
+          if (!cancelled) window.location.href = "/login";
+          return;
+        }
+        const data = (await r.json().catch(() => null)) as
+          | { user?: { email?: string; name?: string; role?: string | null } }
+          | null;
+        if (cancelled) return;
+        if (!data?.user) {
+          window.location.href = "/login";
+          return;
+        }
+        if (data.user.role === "staff") {
+          window.location.href = "/admin";
+          return;
+        }
+        setSessionEmail(data.user.email ?? null);
+        setForm((prev) => ({ ...prev, name: data.user?.name ?? prev.name }));
+        setStatus("ready");
+      } catch {
+        if (!cancelled) window.location.href = "/login";
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleChange = useCallback(
+    (field: keyof OOBEFormState) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const value = e.target.value;
+      setForm((prev) => ({ ...prev, [field]: value }));
+    },
+    [],
+  );
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (status === "submitting") return;
+      if (!form.name.trim()) {
+        setError("Please tell us your name so we can set up your portal.");
+        return;
+      }
+      setStatus("submitting");
+      setError(null);
+      try {
+        const r = await fetch("/api/portal/clients-from-auth", {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: form.name.trim(),
+            phone: form.phone.trim() || null,
+            address: form.address.trim() || null,
+            notes: form.notes.trim() || null,
+          }),
+        });
+        if (r.ok) {
+          // Let the parent (or default) decide where to land. The default
+          // is the portal root, which re-runs the SSO bridge. A full
+          // `window.location.href` reload resets any cached state in the
+          // parent (the bridge reads from Better Auth cookies, so a fresh
+          // request picks up the new client row).
+          if (onCompleted) {
+            onCompleted();
+          } else {
+            window.location.href = "/";
+          }
+          return;
+        }
+        if (r.status === 409) {
+          setStatus("ready");
+          setError(
+            "A customer record with this email already exists. Please contact your groomer to link your account.",
+          );
+          return;
+        }
+        const body = (await r.json().catch(() => null)) as { error?: string } | null;
+        setStatus("ready");
+        setError(body?.error ?? "We couldn't set up your portal. Please try again.");
+      } catch {
+        setStatus("ready");
+        setError("Network error. Please check your connection and try again.");
+      }
+    },
+    [form, onCompleted, status],
+  );
+
+  const handleSignOut = useCallback(async () => {
+    try {
+      await signOut();
+    } catch {
+      // Best-effort; navigate to /login regardless so the user is never trapped.
+    }
+    window.location.href = "/login";
+  }, []);
+
+  if (status === "loading") {
+    return (
+      <div
+        className="min-h-screen flex items-center justify-center bg-[#faf8f5]"
+        role="status"
+        aria-live="polite"
+      >
+        <div className="text-stone-500 text-sm">Loading…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center bg-[#faf8f5] font-sans px-6 py-10"
+      role="main"
+    >
+      <div className="max-w-md w-full bg-white rounded-xl shadow-sm border border-stone-200 p-8">
+        <div className="w-12 h-12 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center mx-auto mb-4">
+          <Sparkles size={22} />
+        </div>
+        <h1 className="text-lg font-semibold text-stone-800 text-center mb-1">
+          Welcome — let's set up your portal
+        </h1>
+        <p className="text-sm text-stone-600 text-center mb-6">
+          You're signed in{sessionEmail ? ` as ${sessionEmail}` : ""}. We just need a few
+          details to create your customer record.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          <div>
+            <label
+              htmlFor="oobe-name"
+              className="block text-xs font-medium text-stone-700 mb-1"
+            >
+              Your name <span className="text-red-600">*</span>
+            </label>
+            <input
+              id="oobe-name"
+              name="name"
+              type="text"
+              required
+              autoComplete="name"
+              value={form.name}
+              onChange={handleChange("name")}
+              className="w-full px-3 py-2 rounded-lg border border-stone-300 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+              disabled={status === "submitting"}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="oobe-phone"
+              className="block text-xs font-medium text-stone-700 mb-1"
+            >
+              Phone <span className="text-stone-400">(optional)</span>
+            </label>
+            <input
+              id="oobe-phone"
+              name="phone"
+              type="tel"
+              autoComplete="tel"
+              value={form.phone}
+              onChange={handleChange("phone")}
+              className="w-full px-3 py-2 rounded-lg border border-stone-300 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+              disabled={status === "submitting"}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="oobe-address"
+              className="block text-xs font-medium text-stone-700 mb-1"
+            >
+              Address <span className="text-stone-400">(optional)</span>
+            </label>
+            <input
+              id="oobe-address"
+              name="address"
+              type="text"
+              autoComplete="street-address"
+              value={form.address}
+              onChange={handleChange("address")}
+              className="w-full px-3 py-2 rounded-lg border border-stone-300 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+              disabled={status === "submitting"}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="oobe-notes"
+              className="block text-xs font-medium text-stone-700 mb-1"
+            >
+              Notes <span className="text-stone-400">(optional)</span>
+            </label>
+            <textarea
+              id="oobe-notes"
+              name="notes"
+              rows={2}
+              value={form.notes}
+              onChange={handleChange("notes")}
+              className="w-full px-3 py-2 rounded-lg border border-stone-300 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+              disabled={status === "submitting"}
+            />
+          </div>
+
+          {error && (
+            <div
+              role="alert"
+              aria-live="polite"
+              className="flex items-start gap-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg px-3 py-2"
+            >
+              <Shield size={14} className="mt-0.5 shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={status === "submitting"}
+            className="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+          >
+            {status === "submitting" ? "Setting up…" : "Create my portal"}
+          </button>
+        </form>
+
+        <div className="mt-6 pt-4 border-t border-stone-100 flex items-center justify-between">
+          <p className="text-xs text-stone-500">
+            Wrong account? Sign out and try a different one.
+          </p>
+          <button
+            type="button"
+            onClick={() => {
+              void handleSignOut();
+            }}
+            className="inline-flex items-center gap-1.5 text-xs font-medium text-stone-600 hover:text-stone-900"
+          >
+            <LogOut size={12} />
+            Sign out
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default OOBE;

From ddc4e3e052debc37176f02bce7f4f794f4dc17ac Mon Sep 17 00:00:00 2001
From: Flea Flicker <22+gb_flea@noreply.git.farh.net>
Date: Thu, 11 Jun 2026 18:24:29 +0000
Subject: [PATCH 12/12] fix(GRO-2373): add Sign out button to in-portal chrome
 sidebar (#77)

---
 UAT_PLAYBOOK.md               |  1 +
 src/__tests__/portal.test.tsx | 71 +++++++++++++++++++++++++++++++++++
 src/portal/CustomerPortal.tsx | 18 ++++++++-
 3 files changed, 89 insertions(+), 1 deletion(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index db861b7..eb3de6c 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -452,6 +452,7 @@ These cases cover the `CustomerPortal` initialisation path that bridges an Authe
 | TC-WEB-5.25.6c | OOBE uses the shared signOut() handler (GRO-2358, GRO-2359) | From TC-WEB-5.25.5, click **Sign out** in the OOBE footer. | The same shared `signOut()` from `lib/auth-client` fires (same handler as `AdminLayout` and the no-access card); browser navigates to `/login`; the Authentik session cookie is cleared. The handler always navigates to `/login` — even if the network call to `/api/auth/sign-out` fails — so a transient auth-server hiccup never leaves the user trapped on an authenticated screen. |
 | TC-WEB-5.25.6d | OOBE is mountable from a direct deep-link (GRO-2359) | 1. Sign in via SSO as any customer. 2. In a new tab, navigate to `https://uat.groombook.dev/onboarding`. | The OOBE form mounts (the App.tsx `/onboarding` route resolves before the CustomerPortal `!sessionId` guards). The submit, signOut, and field-validation behaviour are identical to the post-auth mount. |
 | TC-WEB-5.25.6e | Deleted-portal deep-link still reaches the no-access card (GRO-2358, GRO-2359) | 1. Sign in via SSO as a customer whose `clients` row was disabled/deleted by the groomer. 2. Land on a portal sub-route with `?noAccess=deleted-portal` (e.g. visit `https://uat.groombook.dev/appointments?noAccess=deleted-portal` directly). | The no-access card renders (the deep-link deleted-portal case — the OOBE is reserved for first-time creation). The shared signOut() from GRO-2358 is wired identically. This proves the no-access card is still reachable for non-new-user failure modes and the CMPO "no-trap" invariant holds across the auth boundary. |
+| TC-WEB-5.25.6f | In-portal chrome sidebar exposes a Sign out button (GRO-2373) | 1. Complete TC-WEB-5.25.1 (SSO sign-in as a customer). 2. From the portal chrome, look at the sidebar footer (the section below the navigation links, where "Customer Portal v1.0" sits). 3. Locate the **Sign out** button (a stone-grey button above the version label, with a LogOut icon). 4. Click it. | A **Sign out** button is present in the sidebar footer (not buried in the Settings page, not hidden in a dropdown — it's visible on every portal sub-route, including Home, Appointments, My Pets, Report Cards, Billing, Messages, Settings). Clicking it fires the same shared `signOut()` from `lib/auth-client` (same handler as the OOBE footer, the no-access card, and `AdminLayout`'s top-bar "Logout"); `POST /api/auth/sign-out` → 200 `{"success":true}`; the browser navigates to `/login`; the Better Auth / Authentik session cookie is cleared. Proves the CMPO "no-trap" invariant (originally established in GRO-2355) holds on the third authenticated surface — the in-portal chrome — which the GRO-2358 P1 fix did not cover. |
 | 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. |
diff --git a/src/__tests__/portal.test.tsx b/src/__tests__/portal.test.tsx
index d73629e..f62fccd 100644
--- a/src/__tests__/portal.test.tsx
+++ b/src/__tests__/portal.test.tsx
@@ -1057,4 +1057,75 @@ describe("OOBE portal-creation flow (GRO-2359)", () => {
 
     Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
   });
+
+  it("reaches the shared signOut() handler from the in-portal chrome sidebar (GRO-2373)", async () => {
+    // Pre-GRO-2373, the customer portal chrome (Home, Appointments, My Pets,
+    // Report Cards, Billing, Messages, Settings) had no visible sign-out
+    // control — only the OOBE and the no-access card exposed one. This
+    // leaves users signed-in with no escape hatch. The fix lands a
+    // "Sign out" button in the sidebar footer that wires to the same
+    // canonical `signOut()` already used by OOBE / no-access / AdminLayout.
+    signOutSpy.mockClear();
+
+    const originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+      configurable: true,
+    });
+
+    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: "uat-customer@groombook.dev", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: async () => ({ sessionId: "chrome-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
+        } 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>
+    );
+
+    // Land on the chrome (proof: customer greeting is rendered, no
+    // no-access card, no OOBE).
+    await waitFor(() => {
+      expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/Portal access not configured/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/set up your portal/i)).not.toBeInTheDocument();
+
+    // The new chrome sign-out is scoped by data-testid so it doesn't
+    // collide with other surfaces that may also render "Sign out" labels
+    // (e.g. the impersonation banner uses "End Session").
+    const signOutButton = screen.getByTestId("portal-chrome-signout");
+    expect(signOutButton).toHaveTextContent(/Sign out/i);
+    fireEvent.click(signOutButton);
+
+    // Same canonical handler as OOBE / no-access / AdminLayout — never
+    // a raw fetch("/api/auth/sign-out") and never a navigate() without
+    // signOut() (the OOBE/no-access surface uses window.location.href
+    // for a hard reload so cached state is reset).
+    await waitFor(() => {
+      expect(signOutSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(window.location.href).toBe("/login");
+    });
+
+    Object.defineProperty(window, "location", { value: originalLocation, configurable: true });
+  });
 });
diff --git a/src/portal/CustomerPortal.tsx b/src/portal/CustomerPortal.tsx
index 45154aa..7a0e752 100644
--- a/src/portal/CustomerPortal.tsx
+++ b/src/portal/CustomerPortal.tsx
@@ -451,7 +451,14 @@ export function CustomerPortal() {
             })}
           </div>
 
-          {/* Session controls (only shown during active impersonation) */}
+          {/* Session controls — Sign out is always reachable from the portal
+              chrome (GRO-2373). End Impersonation is staff-only and only
+              appears during an active impersonation session. Both share the
+              same LogOut icon for visual consistency, but route to distinct
+              handlers: handleSignOut calls the canonical Better Auth
+              `signOut()` (mirroring OOBE and the no-access card); handleEnd
+              tears down the staff impersonation session and returns to the
+              admin clients list. */}
           <div className="border-t border-stone-100 p-4 space-y-2">
             {session?.status === "active" && (
               <button
@@ -462,6 +469,15 @@ export function CustomerPortal() {
                 End Impersonation
               </button>
             )}
+            <button
+              type="button"
+              onClick={() => { void handleSignOut(); }}
+              className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-stone-700 bg-stone-50 hover:bg-stone-100 transition-colors"
+              data-testid="portal-chrome-signout"
+            >
+              <LogOut size={14} />
+              Sign out
+            </button>
             <div className="flex items-center gap-2 px-3 py-2 text-xs text-stone-400">
               <Shield size={12} />
               Customer Portal v1.0