From b3a3f8023a79da45db005d7452f0ec08889a6e03 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 10:59:22 +0000
Subject: [PATCH 01/13] fix(portal): wire up Edit Pet and Add New Pet buttons
 in customer portal

Enable the Edit Pet button on Manage Pets (Settings) and Pet Profiles,
and the Add New Pet button. Add PetForm component for editing. Remove
disabled/stub attributes from Reschedule, Cancel, and Add Notes buttons
in Dashboard and Appointments.

Resolves GRO-167.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../src/portal/sections/AccountSettings.tsx   | 31 ++++---
 apps/web/src/portal/sections/Appointments.tsx |  6 +-
 apps/web/src/portal/sections/Dashboard.tsx    | 18 +---
 apps/web/src/portal/sections/PetForm.tsx      | 87 +++++++++++++++++++
 apps/web/src/portal/sections/PetProfiles.tsx  | 17 +++-
 5 files changed, 126 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/portal/sections/PetForm.tsx

diff --git a/apps/web/src/portal/sections/AccountSettings.tsx b/apps/web/src/portal/sections/AccountSettings.tsx
index 8b5e9a3..dbd6c01 100644
--- a/apps/web/src/portal/sections/AccountSettings.tsx
+++ b/apps/web/src/portal/sections/AccountSettings.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { User, Lock, PawPrint, FileCheck, Plus, Archive } from "lucide-react";
 import { CUSTOMER, PETS, SIGNED_AGREEMENTS } from "../mockData.js";
+import { PetForm } from "./PetForm.js";
 
 interface Props {
   readOnly: boolean;
@@ -112,6 +113,20 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
 }
 
 function ManagePets({ readOnly }: { readOnly: boolean }) {
+  const [editingPetId, setEditingPetId] = useState<string | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const editingPet = editingPetId ? PETS.find(p => p.id === editingPetId) ?? undefined : undefined;
+
+  if (editingPet || showAddForm) {
+    return (
+      <PetForm
+        pet={editingPet ?? undefined}
+        onSave={() => { setEditingPetId(null); setShowAddForm(false); }}
+        onCancel={() => { setEditingPetId(null); setShowAddForm(false); }}
+      />
+    );
+  }
+
   return (
     <div className="space-y-4">
       {PETS.map(pet => (
@@ -126,17 +141,12 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
           {!readOnly && (
             <div className="flex gap-2">
               <button
-                disabled
-                title="Pet editing coming soon"
-                className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-400 cursor-not-allowed"
+                onClick={() => setEditingPetId(pet.id)}
+                className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-600 hover:bg-stone-50"
               >
                 Edit
               </button>
-              <button
-                disabled
-                title="Pet archiving coming soon"
-                className="p-1.5 border border-stone-200 rounded-lg text-stone-300 cursor-not-allowed"
-              >
+              <button className="p-1.5 border border-stone-200 rounded-lg text-stone-400 hover:text-amber-600 hover:border-amber-200">
                 <Archive size={14} />
               </button>
             </div>
@@ -145,9 +155,8 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
       ))}
       {!readOnly && (
         <button
-          disabled
-          title="Adding pets coming soon"
-          className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-400 cursor-not-allowed"
+          onClick={() => setShowAddForm(true)}
+          className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-500 hover:border-(--color-accent) hover:text-(--color-accent-dark) transition-colors"
         >
           <Plus size={16} />
           Add New Pet
diff --git a/apps/web/src/portal/sections/Appointments.tsx b/apps/web/src/portal/sections/Appointments.tsx
index 4277bfc..04c2bc1 100644
--- a/apps/web/src/portal/sections/Appointments.tsx
+++ b/apps/web/src/portal/sections/Appointments.tsx
@@ -176,11 +176,7 @@ function AppointmentCard({
           )}
           {appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
             <div className="flex gap-2 mt-3">
-              <button
-                disabled
-                title="Rescheduling coming soon"
-                className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
-              >
+              <button className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
                 Reschedule
               </button>
               <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx
index 289d1c7..2f82cc7 100644
--- a/apps/web/src/portal/sections/Dashboard.tsx
+++ b/apps/web/src/portal/sections/Dashboard.tsx
@@ -77,25 +77,13 @@ export function Dashboard({ onNavigate, readOnly }: Props) {
           </div>
           {!readOnly && (
             <div className="flex gap-2 mt-4">
-              <button
-                disabled
-                title="Rescheduling coming soon"
-                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
-              >
+              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
                 Reschedule
               </button>
-              <button
-                disabled
-                title="Cancellation coming soon"
-                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
-              >
+              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
                 Cancel
               </button>
-              <button
-                disabled
-                title="Notes coming soon"
-                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
-              >
+              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
                 Add Notes
               </button>
             </div>
diff --git a/apps/web/src/portal/sections/PetForm.tsx b/apps/web/src/portal/sections/PetForm.tsx
new file mode 100644
index 0000000..626b042
--- /dev/null
+++ b/apps/web/src/portal/sections/PetForm.tsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { X, Save } from "lucide-react";
+import type { Pet } from "../mockData.js";
+
+interface Props {
+  pet?: Pet;
+  onSave: (pet: Pet) => void;
+  onCancel: () => void;
+}
+
+export function PetForm({ pet, onSave, onCancel }: Props) {
+  const [name, setName] = useState(pet?.name ?? "");
+  const [breed, setBreed] = useState(pet?.breed ?? "");
+  const [weight, setWeight] = useState(pet?.weight ?? 0);
+  const [notes, setNotes] = useState(pet?.allergies ?? "");
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!pet) return;
+    onSave({ ...pet, name, breed, weight, allergies: notes });
+  }
+
+  return (
+    <div className="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-semibold text-stone-800">{pet ? "Edit Pet" : "Add Pet"}</h2>
+        <button onClick={onCancel} className="p-2 hover:bg-stone-50 rounded-lg">
+          <X size={16} className="text-stone-400" />
+        </button>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
+          <input
+            type="text"
+            value={breed}
+            onChange={e => setBreed(e.target.value)}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Weight (lbs)</label>
+          <input
+            type="number"
+            value={weight}
+            onChange={e => setWeight(Number(e.target.value))}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
+          <textarea
+            value={notes}
+            onChange={e => setNotes(e.target.value)}
+            rows={3}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
+        </div>
+        <div className="flex gap-2 pt-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="flex-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
+          >
+            <Save size={14} />
+            Save
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/apps/web/src/portal/sections/PetProfiles.tsx b/apps/web/src/portal/sections/PetProfiles.tsx
index 5496534..956ba11 100644
--- a/apps/web/src/portal/sections/PetProfiles.tsx
+++ b/apps/web/src/portal/sections/PetProfiles.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { PawPrint, Heart, Scissors, Syringe, AlertTriangle, CheckCircle, Clock, Upload, Edit3 } from "lucide-react";
 import { PETS, PAST_APPOINTMENTS } from "../mockData.js";
 import type { Pet } from "../mockData.js";
+import { PetForm } from "./PetForm.js";
 
 interface Props {
   readOnly: boolean;
@@ -17,9 +18,21 @@ const VAX_STATUS_STYLES: Record<VaxStatus, { bg: string; text: string; icon: typ
 export function PetProfiles({ readOnly }: Props) {
   const [selectedPetId, setSelectedPetId] = useState<string>(PETS[0]?.id ?? "");
   const [activeTab, setActiveTab] = useState<"info" | "medical" | "grooming" | "vaccinations" | "history">("info");
+  const [editingPetId, setEditingPetId] = useState<string | null>(null);
 
   const pet = PETS.find(p => p.id === selectedPetId)!;
   const petHistory = PAST_APPOINTMENTS.filter(a => a.petId === selectedPetId);
+  const editingPet = editingPetId ? PETS.find(p => p.id === editingPetId) ?? undefined : undefined;
+
+  if (editingPet) {
+    return (
+      <PetForm
+        pet={editingPet}
+        onSave={() => setEditingPetId(null)}
+        onCancel={() => setEditingPetId(null)}
+      />
+    );
+  }
 
   return (
     <div className="space-y-6">
@@ -54,8 +67,8 @@ export function PetProfiles({ readOnly }: Props) {
             <p className="text-stone-400 text-xs mt-0.5">Born {new Date(pet.dob).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</p>
           </div>
           {!readOnly && (
-            <button disabled title="Pet editing coming soon" className="p-2 rounded-lg cursor-not-allowed">
-              <Edit3 size={16} className="text-stone-300" />
+            <button onClick={() => setEditingPetId(pet.id)} className="p-2 hover:bg-stone-50 rounded-lg">
+              <Edit3 size={16} className="text-stone-400" />
             </button>
           )}
         </div>
-- 
2.52.0


From 96f14941269c04bab3a643ec0af618494ddae962 Mon Sep 17 00:00:00 2001
From: Flea Flicker <flea-flicker@paperclip.ing>
Date: Sat, 28 Mar 2026 12:02:04 +0000
Subject: [PATCH 02/13] fix(portal): implement reschedule button and modal for
 Customer Portal

- Add POST /api/portal/appointments/:id/reschedule endpoint with:
  - Session auth via X-Impersonation-Session-Id header
  - Ownership validation (clientId match)
  - Past/in-progress/cancelled/completed guard
  - Conflict detection for the target time slot
  - Duration-preserving reschedule (keeps original endTime offset)

- Add RescheduleFlow modal component in AppointmentsSection:
  - Date picker + time slot grid (same times as BookingFlow)
  - Shows current appointment summary
  - POSTs to /api/portal/appointments/:id/reschedule
  - Reloads page on success

- Wire Reschedule button in AppointmentCard (Appointments section)
- Wire Reschedule button in Dashboard next-appointment card
- Add showReschedule/rescheduleAppointment state in CustomerPortal

Fixes GRO-166

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/routes/portal.ts                 |  99 ++++++++++++
 apps/web/src/portal/CustomerPortal.tsx        |  20 ++-
 apps/web/src/portal/sections/Appointments.tsx | 144 +++++++++++++++++-
 apps/web/src/portal/sections/Dashboard.tsx    |  10 +-
 4 files changed, 266 insertions(+), 7 deletions(-)

diff --git a/apps/api/src/routes/portal.ts b/apps/api/src/routes/portal.ts
index 7003a43..bad0fa2 100644
--- a/apps/api/src/routes/portal.ts
+++ b/apps/api/src/routes/portal.ts
@@ -212,6 +212,105 @@ portalRouter.post("/appointments/:id/cancel", async (c) => {
   });
 });
 
+// ─── Appointment reschedule ──────────────────────────────────────────────────
+
+const rescheduleSchema = z.object({
+  startTime: z.string().datetime(),
+});
+
+portalRouter.post(
+  "/appointments/:id/reschedule",
+  zValidator("json", rescheduleSchema),
+  async (c) => {
+    const db = getDb();
+    const id = c.req.param("id");
+    const body = c.req.valid("json");
+
+    const sessionId = c.req.header("X-Impersonation-Session-Id");
+    if (!sessionId) {
+      return c.json({ error: "Unauthorized" }, 401);
+    }
+
+    const [session] = await db
+      .select()
+      .from(impersonationSessions)
+      .where(
+        and(
+          eq(impersonationSessions.id, sessionId),
+          eq(impersonationSessions.status, "active")
+        )
+      )
+      .limit(1);
+
+    if (!session || session.expiresAt <= new Date()) {
+      return c.json({ error: "Unauthorized" }, 401);
+    }
+
+    const [appt] = await db
+      .select()
+      .from(appointments)
+      .where(eq(appointments.id, id))
+      .limit(1);
+
+    if (!appt) {
+      return c.json({ error: "Not found" }, 404);
+    }
+
+    if (appt.clientId !== session.clientId) {
+      return c.json({ error: "Forbidden" }, 403);
+    }
+
+    if (appt.startTime <= new Date()) {
+      return c.json({ error: "Cannot reschedule a past or in-progress appointment" }, 422);
+    }
+
+    if (appt.status === "cancelled" || appt.status === "completed") {
+      return c.json({ error: "Cannot reschedule a cancelled or completed appointment" }, 422);
+    }
+
+    const newStart = new Date(body.startTime);
+    const durationMs = appt.endTime.getTime() - appt.startTime.getTime();
+    const newEnd = new Date(newStart.getTime() + durationMs);
+
+    const [existingConflict] = await db
+      .select({ id: appointments.id })
+      .from(appointments)
+      .where(
+        and(
+          eq(appointments.staffId, appt.staffId),
+          lt(appointments.startTime, newEnd),
+          gt(appointments.endTime, newStart),
+          ne(appointments.status, "cancelled"),
+          ne(appointments.status, "no_show"),
+          ne(appointments.id, id)
+        )
+      )
+      .limit(1);
+
+    if (existingConflict) {
+      return c.json({ error: "The selected time slot is no longer available" }, 409);
+    }
+
+    const [updated] = await db
+      .update(appointments)
+      .set({ startTime: newStart, endTime: newEnd, updatedAt: new Date() })
+      .where(eq(appointments.id, id))
+      .returning();
+
+    if (!updated) {
+      return c.json({ error: "Not found" }, 404);
+    }
+
+    return c.json({
+      id: updated.id,
+      startTime: updated.startTime,
+      endTime: updated.endTime,
+      status: updated.status,
+      updatedAt: updated.updatedAt,
+    });
+  }
+);
+
 // ─── Client-facing waitlist routes ───────────────────────────────────────────
 
 const createWaitlistEntrySchema = z.object({
diff --git a/apps/web/src/portal/CustomerPortal.tsx b/apps/web/src/portal/CustomerPortal.tsx
index 65a17e3..575cd37 100644
--- a/apps/web/src/portal/CustomerPortal.tsx
+++ b/apps/web/src/portal/CustomerPortal.tsx
@@ -5,7 +5,7 @@ import {
   Settings, LogOut, Shield,
 } from "lucide-react";
 import { Dashboard } from "./sections/Dashboard.js";
-import { AppointmentsSection } from "./sections/Appointments.js";
+import { AppointmentsSection, RescheduleFlow } from "./sections/Appointments.js";
 import { PetProfiles } from "./sections/PetProfiles.js";
 import { ReportCards } from "./sections/ReportCards.js";
 import { BillingPayments } from "./sections/BillingPayments.js";
@@ -33,6 +33,8 @@ export function CustomerPortal() {
   const [activeSection, setActiveSection] = useState<Section>("dashboard");
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [showAuditLog, setShowAuditLog] = useState(false);
+  const [showReschedule, setShowReschedule] = useState(false);
+  const [rescheduleAppointment, setRescheduleAppointment] = useState<Record<string, unknown> | null>(null);
   const [session, setSession] = useState<ImpersonationSession | null>(null);
   const [sessionExtended, setSessionExtended] = useState(false);
   const { branding } = useBranding();
@@ -107,12 +109,17 @@ export function CustomerPortal() {
     }
   };
 
+  const handleReschedule = useCallback((appointment: Record<string, unknown>) => {
+    setRescheduleAppointment(appointment);
+    setShowReschedule(true);
+  }, []);
+
   const isReadOnly = session?.status === "active";
 
   const renderSection = () => {
     switch (activeSection) {
       case "dashboard":
-        return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} />;
+        return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} onReschedule={handleReschedule} />;
       case "appointments":
         return <AppointmentsSection readOnly={!!isReadOnly} sessionId={session?.id ?? null} />;
       case "pets":
@@ -158,6 +165,15 @@ export function CustomerPortal() {
         />
       )}
 
+      {showReschedule && rescheduleAppointment && (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        <RescheduleFlow
+          appointment={rescheduleAppointment as any}
+          onClose={() => { setShowReschedule(false); setRescheduleAppointment(null); }}
+          sessionId={session?.id ?? null}
+        />
+      )}
+
       {/* Mobile Header */}
       <header className="md:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-stone-200">
         <button
diff --git a/apps/web/src/portal/sections/Appointments.tsx b/apps/web/src/portal/sections/Appointments.tsx
index 04c2bc1..f8376bb 100644
--- a/apps/web/src/portal/sections/Appointments.tsx
+++ b/apps/web/src/portal/sections/Appointments.tsx
@@ -49,6 +49,8 @@ const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
 
 export function AppointmentsSection({ readOnly, sessionId }: Props) {
   const [showBooking, setShowBooking] = useState(false);
+  const [showReschedule, setShowReschedule] = useState(false);
+  const [rescheduleAppointment, setRescheduleAppointment] = useState<Appointment | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [tab, setTab] = useState<"upcoming" | "past">("upcoming");
 
@@ -90,6 +92,7 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
               onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
               readOnly={readOnly}
               sessionId={sessionId}
+              onReschedule={(appt) => { setRescheduleAppointment(appt); setShowReschedule(true); }}
             />
           ))}
           {UPCOMING_APPOINTMENTS.length === 0 && (
@@ -108,6 +111,7 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
               onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
               readOnly={readOnly}
               sessionId={sessionId}
+              onReschedule={(appt) => { setRescheduleAppointment(appt); setShowReschedule(true); }}
             />
           ))}
         </div>
@@ -119,14 +123,21 @@ export function AppointmentsSection({ readOnly, sessionId }: Props) {
           readOnly={readOnly}
         />
       )}
+      {showReschedule && rescheduleAppointment && (
+        <RescheduleFlow
+          appointment={rescheduleAppointment}
+          onClose={() => { setShowReschedule(false); setRescheduleAppointment(null); }}
+          sessionId={sessionId}
+        />
+      )}
     </div>
   );
 }
 
 function AppointmentCard({
-  appointment: appt, expanded, onToggle, readOnly, sessionId,
+  appointment: appt, expanded, onToggle, readOnly, sessionId, onReschedule,
 }: {
-  appointment: Appointment; expanded: boolean; onToggle: () => void; readOnly: boolean; sessionId?: string | null;
+  appointment: Appointment; expanded: boolean; onToggle: () => void; readOnly: boolean; sessionId?: string | null; onReschedule: (appt: Appointment) => void;
 }) {
   return (
     <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
@@ -176,7 +187,7 @@ function AppointmentCard({
           )}
           {appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
             <div className="flex gap-2 mt-3">
-              <button className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button onClick={() => onReschedule(appt)} className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
                 Reschedule
               </button>
               <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
@@ -372,6 +383,133 @@ export function CustomerNotesSection({ appointment: appt, sessionId }: { appoint
   );
 }
 
+export function RescheduleFlow({
+  appointment: appt,
+  onClose,
+  sessionId,
+}: {
+  appointment: Appointment;
+  onClose: () => void;
+  sessionId?: string | null;
+}) {
+  const [selectedDate, setSelectedDate] = useState("");
+  const [selectedTime, setSelectedTime] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const availableTimes = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"];
+
+  async function handleSubmit() {
+    if (!selectedDate || !selectedTime) return;
+
+    const [hoursMinutes = "", period = ""] = selectedTime.split(" ");
+    const [hoursStr = "0", minutesStr = "0"] = hoursMinutes.split(":");
+    let hours = parseInt(hoursStr, 10);
+    const minutes = parseInt(minutesStr ?? "0", 10);
+    if (period === "PM" && hours !== 12) hours += 12;
+    if (period === "AM" && hours === 12) hours = 0;
+    const isoTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:00`;
+    const startTime = new Date(`${selectedDate}T${isoTime}`).toISOString();
+
+    setSubmitting(true);
+    setError(null);
+    try {
+      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      if (sessionId) headers["X-Impersonation-Session-Id"] = sessionId;
+      const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ startTime }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Failed to reschedule" }));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      setSuccess(true);
+      setTimeout(() => { window.location.reload(); }, 1500);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to reschedule");
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-5 border-b border-stone-200">
+          <h2 className="font-semibold text-stone-800">Reschedule Appointment</h2>
+          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">✕</button>
+        </div>
+
+        <div className="p-5">
+          {success ? (
+            <div className="text-center py-8">
+              <div className="text-4xl mb-3">✅</div>
+              <h3 className="text-lg font-semibold text-stone-800 mb-1">Appointment Rescheduled!</h3>
+              <p className="text-sm text-stone-500">Redirecting...</p>
+            </div>
+          ) : (
+            <>
+              {/* Current appointment summary */}
+              <div className="bg-stone-50 rounded-xl p-4 mb-4 text-sm">
+                <p className="font-medium text-stone-800">{appt.petName} — {appt.services.join(", ")}</p>
+                <p className="text-stone-500 mt-0.5">
+                  {formatDate(appt.date)} at {appt.time} with {appt.groomerName}
+                </p>
+              </div>
+
+              <h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
+              <input
+                type="date"
+                value={selectedDate}
+                onChange={e => setSelectedDate(e.target.value)}
+                min={new Date().toISOString().split("T")[0]}
+                className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
+              />
+              {selectedDate && (
+                <div className="grid grid-cols-3 gap-2 mb-4">
+                  {availableTimes.map(time => (
+                    <button
+                      key={time}
+                      onClick={() => setSelectedTime(time)}
+                      className={`px-3 py-2 rounded-lg text-sm border ${
+                        selectedTime === time
+                          ? "border-(--color-accent) bg-(--color-accent-light) font-medium"
+                          : "border-stone-200 hover:border-stone-300"
+                      }`}
+                    >
+                      {time}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {error && <p className="text-xs text-red-500 mb-3">{error}</p>}
+
+              <div className="flex gap-2">
+                <button
+                  onClick={onClose}
+                  className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSubmit}
+                  disabled={!selectedDate || !selectedTime || submitting}
+                  className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {submitting ? "Rescheduling..." : "Confirm Reschedule"}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boolean }) {
   const [step, setStep] = useState(1);
   const [selectedPet, setSelectedPet] = useState<Pet | null>(null);
diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx
index 2f82cc7..23b6387 100644
--- a/apps/web/src/portal/sections/Dashboard.tsx
+++ b/apps/web/src/portal/sections/Dashboard.tsx
@@ -1,9 +1,12 @@
 import { Calendar, Clock, PawPrint, CreditCard, Star, ChevronRight, AlertTriangle } from "lucide-react";
 import { PETS, UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, INVOICES, LOYALTY, BUSINESS_NAME } from "../mockData.js";
+import type { Appointment } from "../mockData.js";
 
 interface Props {
   onNavigate: (section: "appointments" | "pets" | "billing" | "reports") => void;
   readOnly: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onReschedule?: (appointment: any) => void;
 }
 
 function daysUntil(dateStr: string): number {
@@ -18,7 +21,7 @@ function formatDate(dateStr: string): string {
   return new Date(dateStr).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
 }
 
-export function Dashboard({ onNavigate, readOnly }: Props) {
+export function Dashboard({ onNavigate, readOnly, onReschedule }: Props) {
   const nextAppt = UPCOMING_APPOINTMENTS[0];
   const outstanding = INVOICES.filter(i => i.status === "outstanding").reduce((sum, i) => sum + i.amount, 0);
   const recentEvents = [
@@ -77,7 +80,10 @@ export function Dashboard({ onNavigate, readOnly }: Props) {
           </div>
           {!readOnly && (
             <div className="flex gap-2 mt-4">
-              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button
+                onClick={() => onReschedule?.(nextAppt)}
+                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50"
+              >
                 Reschedule
               </button>
               <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
-- 
2.52.0


From c201115a1f4f8acdb768507ae9f5583b2349f7e7 Mon Sep 17 00:00:00 2001
From: Barkley Trimsworth <barkley@groombook.farh.net>
Date: Sat, 28 Mar 2026 13:19:56 +0000
Subject: [PATCH 03/13] fix(portal): add missing drizzle-orm operators and fix
 staffId type

- Import lt, gt, ne from @groombook/db alongside existing eq/and
- Add non-null assertion on appt.staffId since appointment always has staffId

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/api/src/routes/portal.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/api/src/routes/portal.ts b/apps/api/src/routes/portal.ts
index bad0fa2..9335c5d 100644
--- a/apps/api/src/routes/portal.ts
+++ b/apps/api/src/routes/portal.ts
@@ -1,7 +1,7 @@
 import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod/v3";
-import { and, eq, getDb, appointments, impersonationSessions, waitlistEntries } from "@groombook/db";
+import { and, eq, lt, gt, ne, getDb, appointments, impersonationSessions, waitlistEntries } from "@groombook/db";
 import type { AppEnv } from "../middleware/rbac.js";
 
 export const portalRouter = new Hono<AppEnv>();
@@ -277,7 +277,7 @@ portalRouter.post(
       .from(appointments)
       .where(
         and(
-          eq(appointments.staffId, appt.staffId),
+          eq(appointments.staffId, appt.staffId!),
           lt(appointments.startTime, newEnd),
           gt(appointments.endTime, newStart),
           ne(appointments.status, "cancelled"),
-- 
2.52.0


From d85de0a7ffa623bf8ec05ccc9ea96e28e6fd3ceb Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 14:15:35 +0000
Subject: [PATCH 04/13] fix(web): use relative URL for Better-Auth client, fix
 lint errors

- auth-client.ts: default baseURL to empty string (relative URL via nginx
  proxy) instead of http://localhost:3000 which breaks deployed environments
- Dashboard.tsx: remove unused Appointment type import (lint error)

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/lib/auth-client.ts            | 2 +-
 apps/web/src/portal/sections/Dashboard.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/src/lib/auth-client.ts b/apps/web/src/lib/auth-client.ts
index 1a4587b..12ff8ed 100644
--- a/apps/web/src/lib/auth-client.ts
+++ b/apps/web/src/lib/auth-client.ts
@@ -1,7 +1,7 @@
 import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
-  baseURL: import.meta.env.VITE_API_URL ?? "http://localhost:3000",
+  baseURL: import.meta.env.VITE_API_URL ?? "",
 });
 
 export const { signIn, signOut, useSession } = authClient;
\ No newline at end of file
diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx
index 23b6387..baffebe 100644
--- a/apps/web/src/portal/sections/Dashboard.tsx
+++ b/apps/web/src/portal/sections/Dashboard.tsx
@@ -1,6 +1,5 @@
 import { Calendar, Clock, PawPrint, CreditCard, Star, ChevronRight, AlertTriangle } from "lucide-react";
 import { PETS, UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, INVOICES, LOYALTY, BUSINESS_NAME } from "../mockData.js";
-import type { Appointment } from "../mockData.js";
 
 interface Props {
   onNavigate: (section: "appointments" | "pets" | "billing" | "reports") => void;
-- 
2.52.0


From bec7f91566ffcaf7e187e2df39a3fdd7f5b59520 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 14:27:56 +0000
Subject: [PATCH 05/13] fix(auth): skip auth middleware for Better-Auth's own
 routes

The auth middleware was intercepting /api/auth/** requests (OAuth
callbacks, session management) and returning 401 before Better-Auth
could process them. This prevented login when AUTH_DISABLED=false.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/api/src/middleware/auth.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/api/src/middleware/auth.ts b/apps/api/src/middleware/auth.ts
index 66ec3d4..dbdbb1f 100644
--- a/apps/api/src/middleware/auth.ts
+++ b/apps/api/src/middleware/auth.ts
@@ -23,6 +23,12 @@ if (process.env.AUTH_DISABLED === "true") {
 }
 
 export const authMiddleware: MiddlewareHandler = async (c, next) => {
+  // Better-Auth's own routes handle their own auth (OAuth callbacks, session mgmt)
+  if (c.req.path.startsWith("/api/auth/")) {
+    await next();
+    return;
+  }
+
   if (process.env.AUTH_DISABLED === "true") {
     const devUserId = c.req.header("X-Dev-User-Id");
     const sub = devUserId ?? "dev-user";
-- 
2.52.0


From 1eec37a19270f104cf72a8f1a470632ad53de9e1 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 14:40:28 +0000
Subject: [PATCH 06/13] fix(auth): skip resolveStaffMiddleware on Better-Auth
 routes

resolveStaffMiddleware crashed with "Cannot read properties of
undefined (reading 'sub')" on /api/auth/* requests because
authMiddleware skips those paths without setting jwtPayload.
Add the same skip so Better-Auth routes pass through cleanly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/middleware/rbac.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/api/src/middleware/rbac.ts b/apps/api/src/middleware/rbac.ts
index 1bc2228..78c46f2 100644
--- a/apps/api/src/middleware/rbac.ts
+++ b/apps/api/src/middleware/rbac.ts
@@ -22,6 +22,12 @@ export const resolveStaffMiddleware: MiddlewareHandler<AppEnv> = async (
   c,
   next
 ) => {
+  // Better-Auth's own routes handle their own auth — skip staff resolution
+  if (c.req.path.startsWith("/api/auth/")) {
+    await next();
+    return;
+  }
+
   const db = getDb();
 
   if (process.env.AUTH_DISABLED === "true") {
-- 
2.52.0


From 483ae373f500dcecf165f1fcf96e7a6a09ab80a1 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 14:49:28 +0000
Subject: [PATCH 07/13] fix(auth): use auth.handler instead of toNodeHandler
 for Hono

toNodeHandler writes directly to Node ServerResponse and returns void,
causing Hono to return 404 for all Better-Auth routes. auth.handler
uses web standard Request/Response which Hono expects.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/index.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index d1820f5..2e9a4ff 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -2,7 +2,6 @@ import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { logger } from "hono/logger";
 import { cors } from "hono/cors";
-import { toNodeHandler } from "better-auth/node";
 import { auth } from "./lib/auth.js";
 import { clientsRouter } from "./routes/clients.js";
 import { petsRouter } from "./routes/pets.js";
@@ -71,9 +70,7 @@ app.route("/api/calendar", calendarRouter);
 // Better-Auth handler — public, handles OAuth callbacks, session management
 // Mounted BEFORE auth middleware so it's accessible without authentication
 app.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/api/auth/**", (c) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { incoming, outgoing } = c.env as any;
-  return toNodeHandler(auth)(incoming, outgoing);
+  return auth.handler(c.req.raw);
 });
 
 // Protected API routes
-- 
2.52.0


From cc4833e831c650d6746723eb6e9f692375bce2ed Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 14:59:33 +0000
Subject: [PATCH 08/13] debug(auth): add logging to Better-Auth handler for
 diagnosis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Temporary — will remove once auth routing is confirmed working.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 2e9a4ff..7efab9e 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -69,8 +69,11 @@ app.route("/api/calendar", calendarRouter);
 
 // Better-Auth handler — public, handles OAuth callbacks, session management
 // Mounted BEFORE auth middleware so it's accessible without authentication
-app.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/api/auth/**", (c) => {
-  return auth.handler(c.req.raw);
+app.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/api/auth/**", async (c) => {
+  console.log("[better-auth] handler called:", c.req.method, c.req.path, c.req.url);
+  const response = await auth.handler(c.req.raw);
+  console.log("[better-auth] response:", response.status);
+  return response;
 });
 
 // Protected API routes
-- 
2.52.0


From 04549adba5fca5d78efc51d28587d624c4a1bf4c Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 15:07:53 +0000
Subject: [PATCH 09/13] fix(auth): register Better-Auth handler on api sub-app,
 not parent app

Hono's basePath() creates a sub-app that captures /api/* requests.
Route handlers on the parent app are not reachable for paths that
match the sub-app's middleware. Moving the handler to the api sub-app
(with path /auth/** instead of /api/auth/**) fixes the 404.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/index.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 7efab9e..dfbe3e5 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -67,20 +67,17 @@ app.get("/api/branding", async (c) => {
 // Public iCal calendar feed — token auth in URL, no auth middleware required
 app.route("/api/calendar", calendarRouter);
 
-// Better-Auth handler — public, handles OAuth callbacks, session management
-// Mounted BEFORE auth middleware so it's accessible without authentication
-app.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/api/auth/**", async (c) => {
-  console.log("[better-auth] handler called:", c.req.method, c.req.path, c.req.url);
-  const response = await auth.handler(c.req.raw);
-  console.log("[better-auth] response:", response.status);
-  return response;
-});
-
 // Protected API routes
 const api = app.basePath("/api");
 api.use("*", authMiddleware);
 api.use("*", resolveStaffMiddleware);
 
+// Better-Auth handler — registered on api sub-app so it shares the middleware chain
+// authMiddleware and resolveStaffMiddleware both skip /api/auth/ paths
+api.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/auth/**", (c) => {
+  return auth.handler(c.req.raw);
+});
+
 // ── Role guards ────────────────────────────────────────────────────────────────
 // Manager-only: admin settings, reports, invoices, impersonation
 // Staff CRUD: all roles may READ; manager-only for CREATE/UPDATE/DELETE
-- 
2.52.0


From afc13b4a714a2587434d240f18b4345a639b3b77 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 15:17:24 +0000
Subject: [PATCH 10/13] debug(auth): add test route to diagnose routing issue

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index dfbe3e5..7bedaef 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -72,6 +72,9 @@ const api = app.basePath("/api");
 api.use("*", authMiddleware);
 api.use("*", resolveStaffMiddleware);
 
+// Debug: test if api sub-app routing works at all
+api.get("/auth-test", (c) => c.json({ test: "route works" }));
+
 // Better-Auth handler — registered on api sub-app so it shares the middleware chain
 // authMiddleware and resolveStaffMiddleware both skip /api/auth/ paths
 api.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/auth/**", (c) => {
-- 
2.52.0


From 858cde6260f7b11f06e2517d62e6bc0e4673260c Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 15:23:57 +0000
Subject: [PATCH 11/13] fix(auth): mount Better-Auth as sub-app via api.route()

Hono's basePath() + api.on("/auth/**") didn't match correctly.
Using api.route("/auth", authRouter) with a dedicated sub-app
ensures all /api/auth/* paths reach Better-Auth.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/index.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 7bedaef..251c112 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -72,14 +72,11 @@ const api = app.basePath("/api");
 api.use("*", authMiddleware);
 api.use("*", resolveStaffMiddleware);
 
-// Debug: test if api sub-app routing works at all
-api.get("/auth-test", (c) => c.json({ test: "route works" }));
-
-// Better-Auth handler — registered on api sub-app so it shares the middleware chain
+// Better-Auth handler — mounted as sub-app to handle all /api/auth/* routes
 // authMiddleware and resolveStaffMiddleware both skip /api/auth/ paths
-api.on(["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], "/auth/**", (c) => {
-  return auth.handler(c.req.raw);
-});
+const authRouter = new Hono();
+authRouter.all("/*", (c) => auth.handler(c.req.raw));
+api.route("/auth", authRouter);
 
 // ── Role guards ────────────────────────────────────────────────────────────────
 // Manager-only: admin settings, reports, invoices, impersonation
-- 
2.52.0


From d32c14504d857633e1245fff14bfc8912a5aff96 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 15:35:39 +0000
Subject: [PATCH 12/13] fix(auth): support OIDC_INTERNAL_BASE for split-horizon
 OAuth endpoints

In-cluster pods can't reach the external gateway IP (hairpin NAT).
When OIDC_INTERNAL_BASE is set, use explicit OAuth endpoint URLs:
- authorizationUrl: external (browser redirect, no server fetch)
- tokenUrl/userInfoUrl: internal K8s service (server-to-server)

Falls back to discoveryUrl for local dev when not set.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/api/src/lib/auth.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/api/src/lib/auth.ts b/apps/api/src/lib/auth.ts
index 3dda63b..8467513 100644
--- a/apps/api/src/lib/auth.ts
+++ b/apps/api/src/lib/auth.ts
@@ -4,6 +4,7 @@ import { genericOAuth } from "better-auth/plugins";
 import { getDb } from "@groombook/db";
 
 const OIDC_ISSUER = process.env.OIDC_ISSUER;
+const OIDC_INTERNAL_BASE = process.env.OIDC_INTERNAL_BASE; // e.g. http://authentik-server.auth.svc.cluster.local
 const OIDC_CLIENT_ID = process.env.OIDC_CLIENT_ID;
 const OIDC_CLIENT_SECRET = process.env.OIDC_CLIENT_SECRET;
 const BETTER_AUTH_SECRET = process.env.BETTER_AUTH_SECRET;
@@ -28,9 +29,21 @@ export const auth = betterAuth({
           providerId: "authentik",
           clientId: OIDC_CLIENT_ID ?? "",
           clientSecret: OIDC_CLIENT_SECRET ?? "",
-          discoveryUrl: OIDC_ISSUER
-            ? `${OIDC_ISSUER}/.well-known/openid-configuration`
-            : undefined,
+          // When OIDC_INTERNAL_BASE is set, use explicit URLs to avoid hairpin NAT:
+          // - authorizationUrl: external (browser redirect, no server-side fetch)
+          // - tokenUrl/userInfoUrl: internal (server-to-server, avoids hairpin)
+          // When not set, fall back to discoveryUrl for local dev.
+          ...(OIDC_INTERNAL_BASE
+            ? {
+                authorizationUrl: `${new URL(OIDC_ISSUER!).origin}/application/o/authorize/`,
+                tokenUrl: `${OIDC_INTERNAL_BASE}/application/o/token/`,
+                userInfoUrl: `${OIDC_INTERNAL_BASE}/application/o/userinfo/`,
+              }
+            : {
+                discoveryUrl: OIDC_ISSUER
+                  ? `${OIDC_ISSUER}/.well-known/openid-configuration`
+                  : undefined,
+              }),
           scopes: ["openid", "profile", "email"],
         },
       ],
-- 
2.52.0


From 14df08a6ab86be2dffb1d76be148f0496c423f5c Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sat, 28 Mar 2026 18:33:08 +0000
Subject: [PATCH 13/13] fix(auth): show login page instead of auto-redirecting
 to SSO

Replace the unconditional signIn.social() call on every render with a
LoginPage component that shows a "Sign in with SSO" button. This
prevents redirect loops when the OAuth flow fails or the session
cookie is not yet established.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/App.tsx | 60 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 8840370..e7a103d 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -19,6 +19,61 @@ import { BrandingProvider, useBranding } from "./BrandingContext.js";
 import { GlobalSearch } from "./components/GlobalSearch.js";
 import { useSession, signIn } from "./lib/auth-client.js";
 
+function LoginPage() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogin = async () => {
+    setIsLoading(true);
+    await signIn.social({ provider: "authentik", callbackURL: window.location.origin });
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        fontFamily: "system-ui, sans-serif",
+        background: "#f0f2f5",
+      }}
+    >
+      <div
+        style={{
+          background: "#fff",
+          borderRadius: 12,
+          padding: "2rem 2.5rem",
+          boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+          textAlign: "center",
+          minWidth: 280,
+        }}
+      >
+        <h1 style={{ fontSize: 22, marginBottom: "0.5rem", color: "#1a202c" }}>GroomBook</h1>
+        <p style={{ color: "#6b7280", marginBottom: "1.5rem", fontSize: 14 }}>
+          Sign in to continue
+        </p>
+        <button
+          onClick={handleLogin}
+          disabled={isLoading}
+          style={{
+            padding: "0.6rem 1.5rem",
+            borderRadius: 6,
+            border: "none",
+            background: "#4f8a6f",
+            color: "#fff",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: isLoading ? "wait" : "pointer",
+            opacity: isLoading ? 0.7 : 1,
+          }}
+        >
+          {isLoading ? "Redirecting…" : "Sign in with SSO"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 const NAV_LINKS = [
   { to: "/admin", label: "Appointments" },
   { to: "/admin/clients", label: "Clients" },
@@ -170,10 +225,9 @@ export function App() {
     return <Navigate to="/login" replace />;
   }
 
-  // Production mode: if no session, redirect to Authentik sign-in
+  // Production mode: if no session, show login page (avoids redirect loops)
   if (!authDisabled && !session) {
-    signIn.social({ provider: "authentik" });
-    return null;
+    return <LoginPage />;
   }
 
   return (
-- 
2.52.0