fix: add skipWaiting/clientsClaim to VitePWA workbox config

Root cause: SW remained in waiting phase after redeploy, serving stale
precached assets. Without skipWaiting/clientsClaim the old SW persisted
and controlled the page even after a new SW was installed.

Fixes blank-page regression where React never mounted on login.

UAT_PLAYBOOK.md

@@ -195,6 +195,17 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.12.10 | RescheduleFlow error state | Mock API failure on availability fetch | "Failed to load time slots" error shown |
 | TC-WEB-5.12.11 | RescheduleFlow no slots | Select date with no availability | "No available slots on this date" shown |
 
+#### 5.12c Waitlist/Booking Status Badges (GRO-1795)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.12 | Confirmed badge | View appointment card with confirmed status | Green "Confirmed" badge displayed |
+| TC-WEB-5.12.13 | Pending badge | View appointment card with pending status | Amber "Pending" badge displayed |
+| TC-WEB-5.12.14 | Waitlisted badge | View appointment card with waitlisted status | Blue "Waitlisted" badge displayed |
+| TC-WEB-5.12.15 | Badge uses CSS classes | Inspect badge element | Badge uses CSS variable-based classes (e.g., bg-green-100, text-amber-600), not hardcoded colors |
+| TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly |
+| TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class |
+
 ### 5.13 Reports UI
 
 | # | Scenario | Steps | Expected |
@@ -316,6 +327,26 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.23.2 | Save pet — error state | Trigger an API save failure (e.g. network error) | Error message displayed; edit form stays open; no data cleared |
 | TC-WEB-5.23.3 | Save pet — saving indicator | Click Save | Spinner/indicator shown while request is in flight; form controls disabled |
 
+
+### 5.24 Booking Funnel Analytics Events (GRO-1794)
+
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.24.1 | booking_step_service — public | Select a service in the public booking wizard | `booking_step_service` CustomEvent fires with detail.step="service" and detail.flow="public" |
+| TC-WEB-5.24.2 | booking_step_time — public | Select a time slot and click Continue | `booking_step_time` fires with detail.step="time" and detail.flow="public" |
+| TC-WEB-5.24.3 | booking_step_contact — public | Fill in contact/pet form, click "Review booking" | `booking_step_contact` fires with detail.step="contact" and detail.flow="public" |
+| TC-WEB-5.24.4 | booking_step_submit — public | Confirm and submit the booking | `booking_step_submit` fires with detail.step="submit" and detail.flow="public" |
+| TC-WEB-5.24.5 | booking_confirmed — public | Navigate to /booking-confirmed | `booking_confirmed` fires once on mount with detail.step="confirmed" and detail.flow="public" |
+| TC-WEB-5.24.6 | booking_error — public | Navigate to /booking-error | `booking_error` fires once on mount with detail.step="error" and detail.flow="public" |
+| TC-WEB-5.24.7 | booking_step_service — portal | Select a pet in the portal BookingFlow | `booking_step_service` fires with detail.step="service" and detail.flow="portal" |
+| TC-WEB-5.24.8 | booking_step_time — portal | Pick a date and time in portal BookingFlow | `booking_step_time` fires with detail.step="time" and detail.flow="portal" |
+| TC-WEB-5.24.9 | booking_step_contact — portal | Proceed from groomer selection to review screen | `booking_step_contact` fires with detail.step="groomer" and detail.flow="portal" |
+| TC-WEB-5.24.10 | booking_step_submit — portal | Submit booking in portal BookingFlow | `booking_step_submit` fires with detail.step="submit" and detail.flow="portal" |
+| TC-WEB-5.24.11 | booking_confirmed — portal | Portal booking request succeeds | Inline success state is shown and `booking_confirmed` fires with detail.step="confirmed" and detail.flow="portal" |
+| TC-WEB-5.24.12 | No PII in analytics payloads | Fire each event and inspect detail object | Payload contains only: step, flow, timestamp — no names, emails, phone numbers, or pet names |
+| TC-WEB-5.24.13 | No-op safe | Trigger analytics with window.dispatchEvent blocked (e.g. CSP) | No error thrown; booking flow completes normally |
+
 ## 6. Pass/Fail Criteria
 
 **Pass:**

src/__tests__/Appointments.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
-import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection } from "../portal/sections/Appointments.tsx";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { parseTimeTo24Hour, isUpcoming, CustomerNotesSection, ConfirmationSection, StatusBadge } from "../portal/sections/Appointments.tsx";
 
 const UPCOMING_APPT = {
   id: "appt-1",
@@ -381,6 +381,66 @@ describe("ConfirmationSection", () => {
   });
 });
 
+describe("StatusBadge", () => {
+  it("renders Confirmed for confirmed status", () => {
+    render(<StatusBadge status="confirmed" />);
+    expect(screen.getByText("Confirmed")).toBeInTheDocument();
+  });
+
+  it("renders Pending for pending status", () => {
+    render(<StatusBadge status="pending" />);
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("renders Waitlisted for waitlisted status", () => {
+    render(<StatusBadge status="waitlisted" />);
+    expect(screen.getByText("Waitlisted")).toBeInTheDocument();
+  });
+
+  it("renders Completed for completed status", () => {
+    render(<StatusBadge status="completed" />);
+    expect(screen.getByText("Completed")).toBeInTheDocument();
+  });
+
+  it("renders Cancelled for cancelled status", () => {
+    render(<StatusBadge status="cancelled" />);
+    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+  });
+
+  it("falls back to status string for unknown status", () => {
+    render(<StatusBadge status="custom-status" />);
+    expect(screen.getByText("custom-status")).toBeInTheDocument();
+  });
+
+  it("uses correct CSS class for confirmed status", () => {
+    render(<StatusBadge status="confirmed" />);
+    const badge = screen.getByText("Confirmed").closest('span');
+    expect(badge?.className).toContain("bg-green-100");
+    expect(badge?.className).toContain("text-green-700");
+  });
+
+  it("uses correct CSS class for waitlisted status", () => {
+    render(<StatusBadge status="waitlisted" />);
+    const badge = screen.getByText("Waitlisted").closest('span');
+    expect(badge?.className).toContain("bg-blue-100");
+    expect(badge?.className).toContain("text-blue-600");
+  });
+
+  it("uses correct CSS class for pending status", () => {
+    render(<StatusBadge status="pending" />);
+    const badge = screen.getByText("Pending").closest('span');
+    expect(badge?.className).toContain("bg-amber-100");
+    expect(badge?.className).toContain("text-amber-600");
+  });
+
+  it("uses fallback styling for unknown status", () => {
+    render(<StatusBadge status="unknown" />);
+    const badge = screen.getByText("unknown").closest('span');
+    expect(badge?.className).toContain("bg-stone-100");
+    expect(badge?.className).toContain("text-stone-600");
+  });
+});
+
 describe("RescheduleFlow dynamic time slots", () => {
   beforeEach(() => {
     vi.clearAllMocks();

src/__tests__/BookingCancelled.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BookingCancelledPage } from "../pages/BookingCancelled.tsx";
+
+describe("BookingCancelledPage", () => {
+  it("renders the cancelled heading", () => {
+    render(<BookingCancelledPage />);
+    expect(screen.getByRole("heading", { name: /Appointment Cancelled/i })).toBeInTheDocument();
+  });
+
+  it("renders the cancelled body text", () => {
+    render(<BookingCancelledPage />);
+    expect(screen.getByText(/Your appointment has been cancelled/i)).toBeInTheDocument();
+  });
+
+  it("has a Book again link pointing to /admin/book", () => {
+    render(<BookingCancelledPage />);
+    const link = screen.getByRole("link", { name: /Book again/i });
+    expect(link).toHaveAttribute("href", "/admin/book");
+  });
+
+  it("has a Back to Portal link pointing to /", () => {
+    render(<BookingCancelledPage />);
+    const link = screen.getByRole("link", { name: /Back to Portal/i });
+    expect(link).toHaveAttribute("href", "/");
+  });
+});

src/__tests__/BookingError.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BookingErrorPage } from "../pages/BookingError.tsx";
+import { BUSINESS_CONTACT_INFO } from "../lib/contact.ts";
+
+describe("BookingErrorPage", () => {
+  it("renders the error heading", () => {
+    render(<BookingErrorPage />);
+    expect(screen.getByRole("heading", { name: /Link Invalid or Expired/i })).toBeInTheDocument();
+  });
+
+  it("renders the error body text", () => {
+    render(<BookingErrorPage />);
+    expect(screen.getByText(/This confirmation link is invalid/i)).toBeInTheDocument();
+  });
+
+  it("has a Start a new booking link pointing to /admin/book", () => {
+    render(<BookingErrorPage />);
+    const link = screen.getByRole("link", { name: /Start a new booking/i });
+    expect(link).toHaveAttribute("href", "/admin/book");
+  });
+
+  it("has a Back to Portal link pointing to /", () => {
+    render(<BookingErrorPage />);
+    const link = screen.getByRole("link", { name: /Back to Portal/i });
+    expect(link).toHaveAttribute("href", "/");
+  });
+
+  it("displays business contact phone", () => {
+    render(<BookingErrorPage />);
+    expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.phone.replace(/[()]/g, "\\$&")))).toBeInTheDocument();
+  });
+
+  it("displays business contact email", () => {
+    render(<BookingErrorPage />);
+    expect(screen.getByText(new RegExp(BUSINESS_CONTACT_INFO.email))).toBeInTheDocument();
+  });
+});

src/__tests__/analytics.test.ts

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

src/index.css

@@ -8,6 +8,19 @@
   --color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, #000);
   --color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #fff);
   --color-accent-lighter: color-mix(in srgb, var(--color-accent) 9%, #fff);
+
+  /* Semantic / booking page tokens */
+  --color-error: #dc2626;
+  --color-error-dark: #b91c1c;
+  --color-error-bg: #fef2f2;
+  --color-cancelled: #ea580c;
+  --color-cancelled-dark: #c2410c;
+  --color-cancelled-bg: #fff7ed;
+  --color-success: #16a34a;
+  --color-success-dark: #15803d;
+  --color-success-bg: #f0fdf4;
+  --color-text-secondary: #4b5563;
+  --color-surface: #fff;
 }
 
 *, *::before, *::after {

src/lib/analytics.ts

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

src/lib/contact.ts

@@ -0,0 +1,7 @@
+// Business contact information — update values to reflect actual business details.
+// Used on error/cancellation pages to help customers reach the business.
+export const BUSINESS_CONTACT_INFO = {
+  phone: "(555) 000-1234",
+  email: "hello@groombook.example.com",
+  address: "123 Main St, Anytown, USA",
+} as const;

src/pages/Book.tsx

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

src/pages/BookingCancelled.tsx

@@ -1,3 +1,10 @@
+const STRINGS = {
+  heading: "Appointment Cancelled",
+  body: "Your appointment has been cancelled. If this was a mistake or you'd like to rebook, please contact us.",
+  bookAgain: "Book again",
+  backToPortal: "Back to Portal",
+} as const;
+
 export function BookingCancelledPage() {
   return (
     <div
@@ -7,12 +14,12 @@ export function BookingCancelledPage() {
         alignItems: "center",
         justifyContent: "center",
         fontFamily: "system-ui, sans-serif",
-        background: "#fff7ed",
+        background: "var(--color-cancelled-bg)",
       }}
     >
       <div
         style={{
-          background: "#fff",
+          background: "var(--color-surface)",
           borderRadius: 12,
           padding: "2.5rem 3rem",
           boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
@@ -21,28 +28,45 @@ export function BookingCancelledPage() {
         }}
       >
         <div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✗</div>
-        <h1 style={{ color: "#c2410c", fontSize: 24, margin: "0 0 0.5rem" }}>
-          Appointment Cancelled
+        <h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
+          {STRINGS.heading}
         </h1>
-        <p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
-          Your appointment has been cancelled. If this was a mistake or you'd
-          like to rebook, please contact us.
+        <p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
+          {STRINGS.body}
         </p>
-        <a
-          href="/"
-          style={{
-            display: "inline-block",
-            padding: "0.6rem 1.5rem",
-            background: "#ea580c",
-            color: "#fff",
-            borderRadius: 6,
-            textDecoration: "none",
-            fontWeight: 600,
-            fontSize: 14,
-          }}
-        >
-          Back to Portal
-        </a>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
+          <a
+            href="/admin/book"
+            style={{
+              display: "inline-block",
+              padding: "0.6rem 1.5rem",
+              background: "var(--color-primary)",
+              color: "#fff",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontWeight: 600,
+              fontSize: 14,
+            }}
+          >
+            {STRINGS.bookAgain}
+          </a>
+          <a
+            href="/"
+            style={{
+              display: "inline-block",
+              padding: "0.6rem 1.5rem",
+              background: "var(--color-cancelled)",
+              color: "#fff",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontWeight: 600,
+              fontSize: 14,
+            }}
+          >
+            {STRINGS.backToPortal}
+          </a>
+        </div>
       </div>
     </div>
   );

src/pages/BookingConfirmed.tsx

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

src/pages/BookingError.tsx

@@ -1,4 +1,20 @@
+import { useEffect } from "react";
+import { BUSINESS_CONTACT_INFO } from "../lib/contact";
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
+
+const STRINGS = {
+  heading: "Link Invalid or Expired",
+  body: "This confirmation link is invalid, has already been used, or your appointment has already passed. Please contact us if you need help.",
+  newBooking: "Start a new booking",
+  backToPortal: "Back to Portal",
+  contactLabel: "Need help?",
+} as const;
+
 export function BookingErrorPage() {
+  useEffect(() => {
+    fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_ERROR, { step: "error", flow: "public" });
+  }, []);
+
   return (
     <div
       style={{
@@ -7,12 +23,12 @@ export function BookingErrorPage() {
         alignItems: "center",
         justifyContent: "center",
         fontFamily: "system-ui, sans-serif",
-        background: "#fef2f2",
+        background: "var(--color-error-bg)",
       }}
     >
       <div
         style={{
-          background: "#fff",
+          background: "var(--color-surface)",
           borderRadius: 12,
           padding: "2.5rem 3rem",
           boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
@@ -21,28 +37,52 @@ export function BookingErrorPage() {
         }}
       >
         <div style={{ fontSize: 56, marginBottom: "0.5rem" }}>⚠️</div>
-        <h1 style={{ color: "#b91c1c", fontSize: 24, margin: "0 0 0.5rem" }}>
-          Link Invalid or Expired
+        <h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
+          {STRINGS.heading}
         </h1>
-        <p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
-          This confirmation link is invalid, has already been used, or your
-          appointment has already passed. Please contact us if you need help.
+        <p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
+          {STRINGS.body}
         </p>
-        <a
-          href="/"
-          style={{
-            display: "inline-block",
-            padding: "0.6rem 1.5rem",
-            background: "#dc2626",
-            color: "#fff",
-            borderRadius: 6,
-            textDecoration: "none",
-            fontWeight: 600,
-            fontSize: 14,
-          }}
-        >
-          Back to Portal
-        </a>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
+          <a
+            href="/admin/book"
+            style={{
+              display: "inline-block",
+              padding: "0.6rem 1.5rem",
+              background: "var(--color-primary)",
+              color: "#fff",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontWeight: 600,
+              fontSize: 14,
+            }}
+          >
+            {STRINGS.newBooking}
+          </a>
+          <a
+            href="/"
+            style={{
+              display: "inline-block",
+              padding: "0.6rem 1.5rem",
+              background: "var(--color-error)",
+              color: "#fff",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontWeight: 600,
+              fontSize: 14,
+            }}
+          >
+            {STRINGS.backToPortal}
+          </a>
+        </div>
+
+        <div style={{ marginTop: "1.5rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb", fontSize: 13, color: "var(--color-text-secondary)" }}>
+          <p style={{ margin: "0 0 0.25rem", fontWeight: 600 }}>{STRINGS.contactLabel}</p>
+          <p style={{ margin: 0 }}>
+            {BUSINESS_CONTACT_INFO.phone} · {BUSINESS_CONTACT_INFO.email}
+          </p>
+        </div>
       </div>
     </div>
   );

src/portal/sections/Appointments.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
+import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
 
 export interface Appointment {
   id: string;
@@ -82,14 +83,34 @@ export function isUpcoming(appt: Appointment): boolean {
 
 const STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
-  pending: 'bg-amber-100 text-amber-700',
-  waitlisted: 'bg-blue-100 text-blue-700',
+  pending: 'bg-amber-100 text-amber-600',
+  waitlisted: 'bg-blue-100 text-blue-600',
   completed: 'bg-stone-100 text-stone-600',
   cancelled: 'bg-red-100 text-red-600',
   'no-show': 'bg-yellow-100 text-yellow-700',
-  scheduled: 'bg-blue-100 text-blue-700',
+  scheduled: 'bg-blue-100 text-blue-600',
 };
 
+const STATUS_LABELS: Record<string, string> = {
+  confirmed: 'Confirmed',
+  pending: 'Pending',
+  waitlisted: 'Waitlisted',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+  'no-show': 'No-show',
+  scheduled: 'Scheduled',
+};
+
+export function StatusBadge({ status }: { status: string }) {
+  const label = STATUS_LABELS[status] ?? status;
+  const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
+  return (
+    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+      {label}
+    </span>
+  );
+}
+
 const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
   confirmed: 'bg-green-100 text-green-700',
   pending: 'bg-amber-100 text-amber-700',
@@ -297,13 +318,7 @@ function AppointmentCard({
             <span>with {appt.groomerName || 'First Available'}</span>
           </div>
         </div>
-        <span
-          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-            STATUS_COLORS[appt.status] || ''
-          }`}
-        >
-          {appt.status}
-        </span>
+        <StatusBadge status={appt.status} />
         {expanded ? (
           <ChevronDown size={16} className="text-stone-400" />
         ) : (
@@ -664,6 +679,7 @@ export function RescheduleFlow({
               <h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
               <input
                 type="date"
+                aria-label="Select date"
                 value={selectedDate}
                 onChange={(e) => setSelectedDate(e.target.value)}
                 min={new Date().toISOString().split('T')[0]}
@@ -735,6 +751,11 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [notes, setNotes] = useState('');
   const [recurring, setRecurring] = useState('');
   const [confirmed, setConfirmed] = useState(false);
+  useEffect(() => {
+    if (confirmed) {
+      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "portal" });
+    }
+  }, [confirmed]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
@@ -826,6 +847,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
 
       if (response.ok) {
         setConfirmed(true);
+        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });
         setTimeout(() => {
           window.location.reload();
         }, 1500);
@@ -901,6 +923,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                         onClick={() => {
                           setSelectedPet(pet);
                           setStep(2);
+                          fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "portal" });
                         }}
                         className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
                           selectedPet?.id === pet.id
@@ -1059,7 +1082,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                       Back
                     </button>
                     <button
-                      onClick={() => setStep(4)}
+                      onClick={() => {
+                        setStep(4);
+                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
+                      }}
                       className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
                     >
                       Next
@@ -1073,6 +1099,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                   <h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
                   <input
                     type="date"
+                    aria-label="Select date"
                     value={selectedDate}
                     onChange={(e) => setSelectedDate(e.target.value)}
                     min={new Date().toISOString().split('T')[0]}
@@ -1123,7 +1150,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                       Back
                     </button>
                     <button
-                      onClick={() => setStep(5)}
+                      onClick={() => {
+                        setStep(5);
+                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
+                      }}
                       disabled={!selectedDate || !selectedTime}
                       className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                     >

vite.config.ts

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