apps/api/src/routes/staff.ts

@@ -15,7 +15,18 @@ const createStaffSchema = z.object({
   active: z.boolean().default(true),
 });
 
-const updateStaffSchema = createStaffSchema.partial().omit({ email: true });
+const updateStaffSchema = z.object({
+  name: z.string().min(1).max(200).optional(),
+  role: z.enum(["groomer", "receptionist", "manager"]).optional(),
+  active: z.boolean().optional(),
+  isSuperUser: z.boolean().optional(),
+  oidcSub: z.string().optional(),
+});
+
+staffRouter.get("/me", async (c) => {
+  const staffRow = c.get("staff");
+  return c.json(staffRow);
+});
 
 staffRouter.get("/", async (c) => {
   const db = getDb();
@@ -45,11 +56,76 @@ staffRouter.post("/", zValidator("json", createStaffSchema), async (c) => {
 
 staffRouter.patch("/:id", zValidator("json", updateStaffSchema), async (c) => {
   const db = getDb();
+  const currentStaff = c.get("staff");
   const body = c.req.valid("json");
+  const targetId = c.req.param("id");
+
+  // Only super users can change isSuperUser
+  if (body.isSuperUser !== undefined && !currentStaff.isSuperUser) {
+    return c.json({ error: "Forbidden: super user privileges required to modify super user status" }, 403);
+  }
+
+  // Before revoking or deactivating the last super user, serialize access with a
+  // transaction + FOR UPDATE to prevent a race where two concurrent requests both
+  // pass the count check and leave zero super users.
+  const needsSuperUserGuard = body.isSuperUser === false || body.active === false;
+  if (needsSuperUserGuard) {
+    const [guardError, row] = await db.transaction(async (tx) => {
+      // Lock the target row so no other request can modify it concurrently
+      const [target] = await tx
+        .select({ isSuperUser: staff.isSuperUser })
+        .from(staff)
+        .where(eq(staff.id, targetId))
+        .limit(1)
+        .for("update");
+
+      if (!target) return ["Not found", null as (typeof staff.$inferSelect | null)];
+
+      // Only enforce guard if the target is actually a super user
+      const isRevokingSuperUser = body.isSuperUser === false && target.isSuperUser;
+      const isDeactivatingSuperUser = body.active === false && target.isSuperUser;
+      if (!isRevokingSuperUser && !isDeactivatingSuperUser) {
+        const [updated] = await tx
+          .update(staff)
+          .set({ ...body, updatedAt: new Date() })
+          .where(eq(staff.id, targetId))
+          .returning();
+        return [null, updated];
+      }
+
+      // Count active super users (excluding target — it will be changed)
+      const superUserCount = await tx
+        .select({ id: staff.id })
+        .from(staff)
+        .where(and(eq(staff.isSuperUser, true), eq(staff.active, true), ne(staff.id, targetId)))
+        .limit(2);
+
+      if (superUserCount.length <= 1) {
+        return [
+          body.isSuperUser === false
+            ? "Cannot revoke the last super user. Assign another super user first."
+            : "Cannot deactivate the last super user. Assign another super user first.",
+          null,
+        ];
+      }
+
+      const [updated] = await tx
+        .update(staff)
+        .set({ ...body, updatedAt: new Date() })
+        .where(eq(staff.id, targetId))
+        .returning();
+      return [null, updated];
+    });
+
+    if (guardError) return c.json({ error: guardError }, guardError === "Not found" ? 404 : 400);
+    if (!row) return c.json({ error: "Not found" }, 404);
+    return c.json(row);
+  }
+
   const [row] = await db
     .update(staff)
     .set({ ...body, updatedAt: new Date() })
-    .where(eq(staff.id, c.req.param("id")))
+    .where(eq(staff.id, targetId))
     .returning();
   if (!row) return c.json({ error: "Not found" }, 404);
   return c.json(row);
@@ -81,11 +157,34 @@ staffRouter.delete("/:id", async (c) => {
     );
   }
 
-  const [row] = await db
-    .delete(staff)
-    .where(eq(staff.id, id))
-    .returning();
-  if (!row) return c.json({ error: "Not found" }, 404);
+  // Prevent deleting the last super user — use transaction to avoid race
+  const [guardError] = await db.transaction(async (tx) => {
+    const [targetStaff] = await tx
+      .select({ isSuperUser: staff.isSuperUser })
+      .from(staff)
+      .where(eq(staff.id, id))
+      .limit(1)
+      .for("update");
+
+    if (!targetStaff) return ["Not found", null];
+
+    if (targetStaff.isSuperUser) {
+      const superUserCount = await tx
+        .select({ id: staff.id })
+        .from(staff)
+        .where(and(eq(staff.isSuperUser, true), eq(staff.active, true), ne(staff.id, id)))
+        .limit(2);
+      if (superUserCount.length <= 1) {
+        return ["Cannot delete the last super user. Assign another super user first.", null];
+      }
+    }
+
+    const [row] = await tx.delete(staff).where(eq(staff.id, id)).returning();
+    return [null, row];
+  });
+
+  if (guardError === "Not found") return c.json({ error: "Not found" }, 404);
+  if (guardError) return c.json({ error: guardError }, 400);
   return c.json({ ok: true });
 });
 

apps/web/src/pages/Book.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import type { Service } from "@groombook/types";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -107,6 +108,7 @@ export function BookPage() {
 
   // Step 2 — date & time
   const [date, setDate] = useState(todayIso());
+  const [dateError, setDateError] = useState<string | null>(null);
   const [slots, setSlots] = useState<string[]>([]);
   const [slotsLoading, setSlotsLoading] = useState(false);
   const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
@@ -125,6 +127,28 @@ export function BookPage() {
   });
   const [formError, setFormError] = useState<string | null>(null);
 
+  // Pre-fill form from URL params (e.g., ?clientName=Jane&clientEmail=jane@example.com)
+  const [searchParams] = useSearchParams();
+  useEffect(() => {
+    const clientName = searchParams.get("clientName");
+    const clientEmail = searchParams.get("clientEmail");
+    const clientPhone = searchParams.get("clientPhone");
+    const petName = searchParams.get("petName");
+    const petSpecies = searchParams.get("petSpecies");
+    const petBreed = searchParams.get("petBreed");
+    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed) {
+      setForm((f) => ({
+        ...f,
+        ...(clientName && { clientName }),
+        ...(clientEmail && { clientEmail }),
+        ...(clientPhone && { clientPhone }),
+        ...(petName && { petName }),
+        ...(petSpecies && { petSpecies }),
+        ...(petBreed && { petBreed }),
+      }));
+    }
+  }, [searchParams]);
+
   // Step 4 — result
   const [submitting, setSubmitting] = useState(false);
   const [result, setResult] = useState<BookingResult | null>(null);
@@ -328,8 +352,21 @@ export function BookPage() {
               value={date}
               min={todayIso()}
               style={{ ...input, width: "auto" }}
-              onChange={(e) => setDate(e.target.value)}
+              onChange={(e) => {
+                const val = e.target.value;
+                // HTML5 date input enforces yyyy-MM-dd; empty value means invalid format
+                if (!val) {
+                  setDateError("Please enter a valid date (YYYY-MM-DD).");
+                  setDate("");
+                } else {
+                  setDateError(null);
+                  setDate(val);
+                }
+              }}
             />
+            {dateError && (
+              <p style={{ color: "#dc2626", fontSize: 12, marginTop: 4 }}>{dateError}</p>
+            )}
           </div>
 
           <div style={{ marginBottom: "1.25rem" }}>

apps/web/src/pages/SetupWizard.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useBranding } from "../BrandingContext.js";
 
@@ -17,6 +17,21 @@ export function SetupWizard() {
   const [businessName, setBusinessName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [guardLoading, setGuardLoading] = useState(true);
+
+  // Guard: redirect if setup is not needed
+  useEffect(() => {
+    fetch("/api/setup/status")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.needsSetup === false) {
+          navigate("/admin", { replace: true });
+        } else {
+          setGuardLoading(false);
+        }
+      })
+      .catch(() => setGuardLoading(false));
+  }, [navigate]);
 
   const current = STEPS[step];
   const isLast = step === STEPS.length - 1;
@@ -61,6 +76,21 @@ export function SetupWizard() {
     if (step > 0) setStep((s) => s - 1);
   };
 
+  if (guardLoading) {
+    return (
+      <div style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#f0f2f5",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        <p style={{ color: "#6b7280" }}>Checking setup status…</p>
+      </div>
+    );
+  }
+
   return (
     <div style={{
       minHeight: "100vh",

apps/web/src/pages/Staff.tsx

@@ -11,6 +11,7 @@ const EMPTY_FORM: StaffForm = { name: "", email: "", role: "groomer" };
 
 export function StaffPage() {
   const [staff, setStaff] = useState<Staff[]>([]);
+  const [me, setMe] = useState<Staff | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<Staff | null>(null);
@@ -18,6 +19,11 @@ export function StaffPage() {
   const [form, setForm] = useState<StaffForm>(EMPTY_FORM);
   const [formError, setFormError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+  const [togglingSuperUser, setTogglingSuperUser] = useState<string | null>(null);
+  const [toggleError, setToggleError] = useState<string | null>(null);
+
+  const isCurrentUserSuperUser = me?.isSuperUser ?? false;
+  const activeSuperUserCount = staff.filter((s) => s.active && s.isSuperUser).length;
 
   async function load() {
     const r = await fetch("/api/staff?includeInactive=true");
@@ -25,8 +31,15 @@ export function StaffPage() {
     setStaff((await r.json()) as Staff[]);
   }
 
+  async function loadMe() {
+    const r = await fetch("/api/staff/me");
+    if (r.ok) {
+      setMe((await r.json()) as Staff);
+    }
+  }
+
   useEffect(() => {
-    load()
+    Promise.all([load(), loadMe()])
       .catch((e: unknown) => setError(e instanceof Error ? e.message : "Unknown error"))
       .finally(() => setLoading(false));
   }, []);
@@ -71,6 +84,27 @@ export function StaffPage() {
     await load();
   }
 
+  async function toggleSuperUser(s: Staff) {
+    setTogglingSuperUser(s.id);
+    setToggleError(null);
+    try {
+      const newValue = !s.isSuperUser;
+      const res = await fetch(`/api/staff/${s.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ isSuperUser: newValue }),
+      });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        setToggleError(err.error ?? `HTTP ${res.status}`);
+        return;
+      }
+      await load();
+    } finally {
+      setTogglingSuperUser(null);
+    }
+  }
+
   if (loading) return <p style={{ padding: "1rem" }}>Loading…</p>;
   if (error) return <p style={{ padding: "1rem", color: "red" }}>Error: {error}</p>;
 
@@ -83,6 +117,12 @@ export function StaffPage() {
         </button>
       </div>
 
+      {toggleError && (
+        <p style={{ color: "#dc2626", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.5rem 0.75rem", marginBottom: "0.75rem", fontSize: 13 }}>
+          {toggleError}
+        </p>
+      )}
+
       {staff.length === 0 ? (
         <p>No staff members yet.</p>
       ) : (
@@ -90,7 +130,7 @@ export function StaffPage() {
         <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
           <thead>
             <tr style={{ background: "#f8fafc" }}>
-              {["Name", "Email", "Role", "Status", ""].map((h) => (
+              {["Name", "Email", "Role", "Super User", "Status", ""].map((h) => (
                 <th key={h} style={{ textAlign: "left", padding: "0.55rem 0.75rem", borderBottom: "1px solid #e5e7eb", fontSize: 11, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.04em" }}>{h}</th>
               ))}
             </tr>
@@ -101,6 +141,33 @@ export function StaffPage() {
                 <td style={tdStyle}>{s.name}</td>
                 <td style={tdStyle}>{s.email}</td>
                 <td style={tdStyle}><span style={{ textTransform: "capitalize" }}>{s.role}</span></td>
+                <td style={tdStyle}>
+                  {s.isSuperUser ? (
+                    <>
+                      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: "#ede9fe", color: "#5b21b6" }}>
+                        ★ Super User
+                      </span>
+                      {isCurrentUserSuperUser && s.id !== me?.id && (
+                        <button
+                          onClick={() => toggleSuperUser(s)}
+                          disabled={togglingSuperUser === s.id || activeSuperUserCount <= 1}
+                          title={activeSuperUserCount <= 1 ? "Cannot revoke: last super user" : undefined}
+                          style={{ ...btnStyle, padding: "0.2rem 0.6rem", fontSize: 11, background: "#f3f4f6", color: "#374151", borderColor: "#d1d5db", marginLeft: 4 }}
+                        >
+                          {togglingSuperUser === s.id ? "…" : "Revoke"}
+                        </button>
+                      )}
+                    </>
+                  ) : isCurrentUserSuperUser ? (
+                    <button
+                      onClick={() => toggleSuperUser(s)}
+                      disabled={togglingSuperUser === s.id}
+                      style={{ ...btnStyle, padding: "0.2rem 0.6rem", fontSize: 11, background: "#f3f4f6", color: "#374151", borderColor: "#d1d5db" }}
+                    >
+                      {togglingSuperUser === s.id ? "…" : "+ Grant"}
+                    </button>
+                  ) : null}
+                </td>
                 <td style={tdStyle}>
                   <span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: s.active ? "#d1fae5" : "#f3f4f6", color: s.active ? "#065f46" : "#6b7280" }}>
                     {s.active ? "Active" : "Inactive"}
@@ -108,7 +175,14 @@ export function StaffPage() {
                 </td>
                 <td style={{ ...tdStyle, whiteSpace: "nowrap" }}>
                   <button onClick={() => openEdit(s)} style={{ ...btnStyle, marginRight: "0.4rem" }}>Edit</button>
-                  <button onClick={() => toggleActive(s)} style={btnStyle}>{s.active ? "Deactivate" : "Activate"}</button>
+                  <button
+                    onClick={() => toggleActive(s)}
+                    disabled={s.isSuperUser && activeSuperUserCount <= 1 && s.active}
+                    title={s.isSuperUser && activeSuperUserCount <= 1 && s.active ? "Cannot deactivate the last super user" : undefined}
+                    style={{ ...btnStyle, opacity: s.isSuperUser && activeSuperUserCount <= 1 && s.active ? 0.5 : 1 }}
+                  >
+                    {s.active ? "Deactivate" : "Activate"}
+                  </button>
                 </td>
               </tr>
             ))}

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, RescheduleFlow } from "./sections/Appointments.js";
+import { AppointmentsSection, RescheduleFlow, type Appointment } from "./sections/Appointments.js";
 import { PetProfiles } from "./sections/PetProfiles.js";
 import { ReportCards } from "./sections/ReportCards.js";
 import { BillingPayments } from "./sections/BillingPayments.js";
@@ -33,7 +33,7 @@ export function CustomerPortal() {
   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 [rescheduleAppointment, setRescheduleAppointment] = useState<{ id: string } | null>(null);
   const [session, setSession] = useState<ImpersonationSession | null>(null);
   const [sessionExtended, setSessionExtended] = useState(false);
   const [clientName, setClientName] = useState<string>("");
@@ -115,9 +115,7 @@ export function CustomerPortal() {
   };
 
   const handleReschedule = useCallback((appointmentId: string) => {
-    // Look up the full appointment from Dashboard's displayed data
-    // The appointment was already fetched by Dashboard, so we use the ID to find it
-    setRescheduleAppointment({ id: appointmentId } as Record<string, unknown>);
+    setRescheduleAppointment({ id: appointmentId });
     setShowReschedule(true);
   }, []);
 
@@ -176,9 +174,8 @@ export function CustomerPortal() {
       )}
 
       {showReschedule && rescheduleAppointment && (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         <RescheduleFlow
-          appointment={rescheduleAppointment as any}
+          appointment={rescheduleAppointment as unknown as Appointment}
           onClose={() => { setShowReschedule(false); setRescheduleAppointment(null); }}
           sessionId={session?.id ?? null}
         />

apps/web/src/portal/sections/AccountSettings.tsx

@@ -225,7 +225,6 @@ function ManagePets({ sessionId, readOnly }: { sessionId: string | null; readOnl
       <PetForm
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         pet={(editingPet ?? undefined) as any}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onSave={() => { setEditingPetId(null); setShowAddForm(false); }}
         onCancel={() => { setEditingPetId(null); setShowAddForm(false); }}
       />

apps/web/src/portal/sections/Appointments.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
 
-interface Appointment {
+export interface Appointment {
   id: string;
   petId: string;
   serviceId: string;

apps/web/src/portal/sections/ReportCards.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { FileText, Share2, Calendar, Smile, Meh, ChevronRight, Loader2 } from "lucide-react";
+const MOOD_CONFIG = {
+    calm: { icon: Smile, label: "Calm & Relaxed", color: "text-green-700", bg: "bg-green-100" },
+    cooperative: { icon: Smile, label: "Cooperative", color: "text-blue-700", bg: "bg-blue-100" },
+    anxious: { icon: Meh, label: "Anxious", color: "text-amber-700", bg: "bg-amber-100" },
+    wiggly: { icon: Meh, label: "Wiggly", color: "text-purple-700", bg: "bg-purple-100" },
+};
+export function ReportCards() {
+    const [appointments, setAppointments] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedCard, setSelectedCard] = useState(null);
+    useEffect(() => {
+        const fetchReportCards = async () => {
+            try {
+                const response = await fetch("/api/portal/appointments");
+                if (response.ok) {
+                    const data = await response.json();
+                    const allAppointments = data.appointments || data || [];
+                    const reportCardAppointments = allAppointments.filter((appt) => appt.reportCardId);
+                    setAppointments(reportCardAppointments);
+                }
+                else {
+                    setError("Failed to load report cards.");
+                }
+            }
+            catch {
+                setError("Failed to load report cards. Please try again.");
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchReportCards();
+    }, []);
+    if (isLoading) {
+        return (_jsxs("div", { className: "flex items-center justify-center py-12", children: [_jsx(Loader2, { className: "animate-spin text-stone-400", size: 24 }), _jsx("span", { className: "ml-3 text-stone-500", children: "Loading report cards..." })] }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "text-center py-12", children: [_jsx("p", { className: "text-red-600 mb-4", children: error }), _jsx("button", { onClick: () => window.location.reload(), className: "px-4 py-2 bg-stone-100 text-stone-700 rounded-md hover:bg-stone-200", children: "Retry" })] }));
+    }
+    if (appointments.length === 0) {
+        return (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-stone-100 flex items-center justify-center", children: _jsx(FileText, { size: 24, className: "text-stone-400" }) }), _jsx("h3", { className: "text-lg font-medium text-stone-800 mb-1", children: "No Report Cards Yet" }), _jsx("p", { className: "text-sm text-stone-500", children: "Report cards from your grooming visits will appear here after your appointments." })] }));
+    }
+    if (selectedCard) {
+        return _jsx(ReportCardDetail, { card: selectedCard, onBack: () => setSelectedCard(null) });
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("p", { className: "text-sm text-stone-500", children: "Grooming report cards from your recent visits" }), _jsx("div", { className: "space-y-4", children: appointments.map((card) => {
+                    const moodKey = "cooperative";
+                    const mood = MOOD_CONFIG[moodKey];
+                    const MoodIcon = mood.icon;
+                    return (_jsx("button", { onClick: () => setSelectedCard(card), className: "w-full bg-white rounded-2xl border border-stone-200 p-5 shadow-sm text-left hover:border-stone-300 transition-colors", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-14 h-14 rounded-xl bg-(--color-accent-light) flex items-center justify-center text-(--color-accent)", children: _jsx(FileText, { size: 24 }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "font-semibold text-stone-800", children: [card.petName || "Pet", "'s Report Card"] }), _jsx(ChevronRight, { size: 16, className: "text-stone-400" })] }), _jsxs("p", { className: "text-sm text-stone-500 mt-0.5", children: [card.serviceName || "Grooming", " with ", card.groomerName || "your groomer"] }), _jsxs("div", { className: "flex items-center gap-3 mt-2", children: [_jsxs("span", { className: "flex items-center gap-1 text-xs text-stone-400", children: [_jsx(Calendar, { size: 12 }), new Date(card.date).toLocaleDateString("en-US", {
+                                                            month: "short",
+                                                            day: "numeric",
+                                                            year: "numeric",
+                                                        })] }), _jsxs("span", { className: `flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${mood.bg} ${mood.color}`, children: [_jsx(MoodIcon, { size: 12 }), mood.label] })] })] })] }) }, card.id));
+                }) })] }));
+}
+function ReportCardDetail({ card, onBack }) {
+    const moodKey = "cooperative";
+    const mood = MOOD_CONFIG[moodKey];
+    const MoodIcon = mood.icon;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("button", { onClick: onBack, className: "text-sm text-(--color-accent-dark) font-medium hover:underline", children: "Back to Report Cards" }), _jsxs("div", { className: "bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden", children: [_jsxs("div", { className: "bg-gradient-to-r from-(--color-accent-lighter) to-(--color-accent-light) p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsxs("h2", { className: "text-xl font-semibold text-stone-800", children: [card.petName || "Pet", "'s Grooming Report"] }), _jsxs("button", { className: "flex items-center gap-1.5 px-3 py-1.5 bg-white/80 text-stone-700 rounded-lg text-sm font-medium hover:bg-white", children: [_jsx(Share2, { size: 14 }), "Share"] })] }), _jsxs("p", { className: "text-sm text-stone-600", children: [new Date(card.date).toLocaleDateString("en-US", {
+                                        weekday: "long",
+                                        month: "long",
+                                        day: "numeric",
+                                        year: "numeric",
+                                    }), card.groomerName ? ` · Groomer: ${card.groomerName}` : ""] })] }), _jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-stone-800 mb-3", children: "Before & After" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "rounded-xl bg-stone-50 p-4", children: [_jsx("p", { className: "text-xs font-medium text-stone-400 uppercase mb-2", children: "Before" }), _jsx("div", { className: "w-full h-32 bg-stone-200 rounded-lg flex items-center justify-center text-stone-400 text-sm mb-2", children: "Photo placeholder" }), _jsx("p", { className: "text-sm text-stone-600", children: "Before photo description not available." })] }), _jsxs("div", { className: "rounded-xl bg-(--color-accent-lighter) p-4", children: [_jsx("p", { className: "text-xs font-medium text-(--color-accent) uppercase mb-2", children: "After" }), _jsx("div", { className: "w-full h-32 bg-(--color-accent-light) rounded-lg flex items-center justify-center text-(--color-accent) text-sm mb-2", children: "Photo placeholder" }), _jsx("p", { className: "text-sm text-stone-700", children: "After photo description not available." })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-stone-800 mb-2", children: "Services Performed" }), _jsx("div", { className: "flex flex-wrap gap-2", children: _jsx("span", { className: "px-3 py-1 bg-stone-100 rounded-full text-sm text-stone-700", children: card.serviceName || "Grooming" }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-stone-800 mb-2", children: "Behavior & Mood" }), _jsxs("div", { className: `inline-flex items-center gap-2 px-4 py-2 rounded-xl ${mood.bg}`, children: [_jsx(MoodIcon, { size: 20, className: mood.color }), _jsx("span", { className: `font-medium ${mood.color}`, children: mood.label })] })] }), _jsxs("div", { className: "bg-(--color-accent-lighter) rounded-xl p-4", children: [_jsxs("h3", { className: "font-medium text-stone-800 mb-2", children: ["A Note from ", card.groomerName || "Your Groomer"] }), _jsx("p", { className: "text-sm text-stone-700 italic leading-relaxed", children: "\"Report card details are not yet available. Please check back after your visit.\"" })] }), _jsxs("div", { className: "bg-white border border-stone-200 rounded-xl p-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-stone-800", children: "Book your next visit" }), _jsx("p", { className: "text-xs text-stone-500", children: "Schedule your next grooming appointment" })] }), _jsx("button", { onClick: () => {
+                                // TODO: Pre-select the service from report card (serviceId/serviceName) once BookPage supports service pre-selection via URL param
+                                const params = new URLSearchParams();
+                                if (card.petName) params.set("petName", card.petName);
+                                if (card.serviceName) params.set("serviceName", card.serviceName);
+                                window.location.href = `/admin/book${params.size > 0 ? `?${params.toString()}` : ""}`;
+                            }, className: "px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)", children: "Rebook Now" })] })] })] })] }));
+}

apps/web/src/portal/sections/ReportCards.tsx

@@ -241,8 +241,17 @@ function ReportCardDetail({ card, onBack }: { card: Appointment; onBack: () => v
               <p className="text-sm font-medium text-stone-800">Book your next visit</p>
               <p className="text-xs text-stone-500">Schedule your next grooming appointment</p>
             </div>
-            <button className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)">
-              Book Now
+            <button
+              onClick={() => {
+                // TODO: Pre-select the service from report card (serviceId/serviceName) once BookPage supports service pre-selection via URL param
+                const params = new URLSearchParams();
+                if (card.petName) params.set("petName", card.petName);
+                if (card.serviceName) params.set("serviceName", card.serviceName);
+                window.location.href = `/admin/book${params.size > 0 ? `?${params.toString()}` : ""}`;
+              }}
+              className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
+            >
+              Rebook Now
             </button>
           </div>
         </div>