fix: add non-null assertion on listener.mock.calls[0] (TS strict mode)

Lines 28 and 40 access mock.calls[0] which is possibly undefined under
strict TypeScript. Adding ! to satisfy TS2532.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

.gitea/workflows/ci.yml

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

Dockerfile

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

UAT_PLAYBOOK.md

@@ -69,6 +69,7 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-AUTH-5.3.1 | Auth client falls back to window.location.origin | Do not set `VITE_API_URL`, load app | Auth client uses `window.location.origin` as base URL |
 | TC-AUTH-5.3.2 | Sign-in on localhost | Load app without `VITE_API_URL` on localhost:3000 | Auth client uses `http://localhost:3000` as base URL |
 | TC-AUTH-5.3.3 | Sign-in on dev environment | Load app without `VITE_API_URL` on `https://dev.groombook.dev` | Auth client uses `https://dev.groombook.dev` as base URL |
+| TC-AUTH-5.3.4 | SSO cookie set after Authentik callback (GRO-1592) | Complete Authentik SSO login on UAT without `VITE_API_URL` set | `__Secure-better-auth.session_token` cookie is present in browser; subsequent `/api/*` calls include the cookie and return 200 |
 
 ### 5.4 Session Persistence
 
@@ -77,6 +78,26 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-AUTH-5.4.1 | Session persists across page reload | Sign in, reload page | Session remains active |
 | TC-AUTH-5.4.2 | Session clears on sign-out | Sign in, sign out | User is logged out, redirected to login |
 
+### 5.4.1 SSO Login Journey (Authentik OIDC end-to-end)
+
+| # | Scenario | Steps | Pass Criteria | Fail Criteria |
+|---|----------|-------|---------------|---------------|
+| TC-WEB-SSO-1 | Sign-in page shows SSO button | Navigate to app root URL | Sign-in page displayed with "Sign in with SSO" button visible | No SSO button, 403 before page loads |
+| TC-WEB-SSO-2 | Click SSO redirects to Authentik | Click "Sign in with SSO" button | Browser redirected to Authentik login at auth.farh.net | No redirect, error shown, button does nothing |
+| TC-WEB-SSO-3 | Valid OIDC credentials authenticate | At Authentik, enter valid credentials and authenticate | Redirected back to app with active session | Redirect loop, 403, session not established |
+| TC-WEB-SSO-4 | Post-login dashboard accessible | After SSO flow completes, dashboard loads | Dashboard displays correctly with user identity shown | Blank page, 403, session not active |
+| TC-WEB-SSO-5 | User identity displayed correctly | After SSO login, check header/nav | User name/email/initials shown in nav, role reflected in UI | No user indicator, wrong user shown |
+
+### 5.4.2 OOBE Flow Post-Login
+
+| # | Scenario | Steps | Pass Criteria | Fail Criteria |
+|---|----------|-------|---------------|---------------|
+| TC-WEB-OOBE-1 | Fresh DB shows setup wizard | On fresh DB (no super user), navigate to app | Setup wizard / OOBE screen displayed | Regular login page shown instead of setup |
+| TC-WEB-OOBE-2 | Configure OIDC via setup | During OOBE, configure OIDC auth provider via /api/setup/auth-provider | OIDC configured successfully, no 403 | 403 during setup, config rejected |
+| TC-WEB-OOBE-3 | Setup completes and redirects | Complete OOBE setup with business name | Redirected to app dashboard as super user, setup bypassed on reload | Setup errors, wrong redirect, setup reappears |
+| TC-WEB-OOBE-4 | Admin panel accessible after setup | After completing OOBE, navigate to admin panel | Admin features accessible | 403 on admin panel, insufficient permissions |
+| TC-WEB-OOBE-5 | SSO login during OOBE does not interfere | During fresh OOBE, attempt SSO login before completing setup | SSO login redirected appropriately, setup can still complete | Auto-provision creates staff prematurely, setup flow broken |
+
 ### 5.5 Dashboard
 
 | # | Scenario | Steps | Expected |
@@ -103,6 +124,20 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.7.2 | Add pet | Click "Add Pet", fill form, submit | Pet created and linked to client |
 | TC-WEB-5.7.3 | Edit pet details | Click on pet, modify details, save | Pet updated successfully |
 | TC-WEB-5.7.4 | Grooming history view | View pet profile | Past appointments/grooming sessions displayed |
+| TC-WEB-5.7.5 | Add pet with size/coat | Create pet with Size Category and Coat Type filled | Size and coat type persisted, visible on pet profile |
+| TC-WEB-5.7.6 | Edit pet size/coat | Edit existing pet, change size/coat dropdowns | Updated values saved to pet record |
+| TC-WEB-5.7.7 | Size/coat optional | Create pet without selecting size or coat | Pet created successfully, fields remain unset |
+
+### 5.8.1 Buffer Rules Management UI (GRO-1173)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.8.2 | Buffer rules section visible | Navigate to Settings | "Buffer Rules" section shown with description |
+| TC-WEB-5.8.3 | Create buffer rule | Click "+ Add Rule", select service and buffer minutes, submit | Rule appears in list, matches service/size/coat |
+| TC-WEB-5.8.4 | Edit buffer minutes inline | Click Edit on a rule, change minutes, click Save | New buffer value reflected in list |
+| TC-WEB-5.8.5 | Delete buffer rule | Click Delete, confirm | Rule removed from list |
+| TC-WEB-5.8.6 | Create rule with size/coat | Create rule with Size Category or Coat Type specified | Rule shows size/coat tags in list |
+| TC-WEB-5.8.7 | Empty state | Navigate to Settings with no rules | "No buffer rules configured yet" message shown |
 
 ### 5.8 Appointment Scheduling UI
 
@@ -121,6 +156,8 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.9.1 | Service catalog loads | Navigate to Services | List of available services displayed |
 | TC-WEB-5.9.2 | Create service | Click "New Service", fill form, submit | Service created successfully |
 | TC-WEB-5.9.3 | Edit service | Click on service, modify details, save | Service updated successfully |
+| TC-WEB-5.9.4 | Create service with default buffer | Create service with "Default buffer time" filled | Buffer shown in service list and form after save |
+| TC-WEB-5.9.5 | Edit service buffer | Open existing service, change default buffer minutes | Updated value persisted after save |
 
 ### 5.10 Staff Management UI
 
@@ -259,6 +296,34 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.22.6 | Size and coat persisted | Save pet with size + coat, edit again | Both fields retain their selected values |
 | TC-WEB-5.22.7 | Clear size | Select size, then clear back to default | Size cleared on save |
 
+### 5.23 Pet Profile — API Persistence & Save UX (GRO-1470)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.23.1 | Save pet — API persistence | Edit a pet, change a field (e.g. coat type), click Save, reload the page | Changed field retained after reload (proves PATCH round-trip to server) |
+| 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:**

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

renovate.json

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

src/__tests__/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/auth-client.ts

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

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

src/pages/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" }}>
+        <h1 style={{ color: "var(--color-cancelled-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
-          Appointment Cancelled
+          {STRINGS.heading}
         </h1>
-        <p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
+        <p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
-          Your appointment has been cancelled. If this was a mistake or you'd
+          {STRINGS.body}
-          like to rebook, please contact us.
         </p>
-        <a
+
-          href="/"
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
-          style={{
+          <a
-            display: "inline-block",
+            href="/admin/book"
-            padding: "0.6rem 1.5rem",
+            style={{
-            background: "#ea580c",
+              display: "inline-block",
-            color: "#fff",
+              padding: "0.6rem 1.5rem",
-            borderRadius: 6,
+              background: "var(--color-primary)",
-            textDecoration: "none",
+              color: "#fff",
-            fontWeight: 600,
+              borderRadius: 6,
-            fontSize: 14,
+              textDecoration: "none",
-          }}
+              fontWeight: 600,
-        >
+              fontSize: 14,
-          Back to Portal
+            }}
-        </a>
+          >
+            {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" }}>
+        <h1 style={{ color: "var(--color-error-dark)", fontSize: 24, margin: "0 0 0.5rem" }}>
-          Link Invalid or Expired
+          {STRINGS.heading}
         </h1>
-        <p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
+        <p style={{ color: "var(--color-text-secondary)", margin: "0 0 1.5rem" }}>
-          This confirmation link is invalid, has already been used, or your
+          {STRINGS.body}
-          appointment has already passed. Please contact us if you need help.
         </p>
-        <a
+
-          href="/"
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "center" }}>
-          style={{
+          <a
-            display: "inline-block",
+            href="/admin/book"
-            padding: "0.6rem 1.5rem",
+            style={{
-            background: "#dc2626",
+              display: "inline-block",
-            color: "#fff",
+              padding: "0.6rem 1.5rem",
-            borderRadius: 6,
+              background: "var(--color-primary)",
-            textDecoration: "none",
+              color: "#fff",
-            fontWeight: 600,
+              borderRadius: 6,
-            fontSize: 14,
+              textDecoration: "none",
-          }}
+              fontWeight: 600,
-        >
+              fontSize: 14,
-          Back to Portal
+            }}
-        </a>
+          >
+            {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/pages/Clients.tsx

@@ -25,6 +25,8 @@ interface PetForm {
   cutStyle: string;
   shampooPreference: string;
   specialCareNotes: string;
+  coatType: string;
+  sizeCategory: string;
 }
 
 interface VisitLogForm {
@@ -38,6 +40,7 @@ const EMPTY_CLIENT: ClientForm = { name: "", email: "", phone: "", address: "",
 const EMPTY_PET: PetForm = {
   name: "", species: "Dog", breed: "", weightStr: "", dob: "",
   healthAlerts: "", groomingNotes: "", cutStyle: "", shampooPreference: "", specialCareNotes: "",
+  coatType: "", sizeCategory: "",
 };
 const EMPTY_VISIT_LOG: VisitLogForm = { cutStyle: "", productsUsed: "", notes: "", groomedAt: "" };
 
@@ -209,6 +212,8 @@ export function ClientsPage() {
       cutStyle: p.cutStyle ?? "",
       shampooPreference: p.shampooPreference ?? "",
       specialCareNotes: p.specialCareNotes ?? "",
+      coatType: p.coatType ?? "",
+      sizeCategory: p.petSizeCategory ?? "",
     });
     setPetFormError(null);
     setShowPetForm(true);
@@ -315,6 +320,8 @@ export function ClientsPage() {
         cutStyle: petForm.cutStyle || undefined,
         shampooPreference: petForm.shampooPreference || undefined,
         specialCareNotes: petForm.specialCareNotes || undefined,
+        coatType: petForm.coatType || undefined,
+        petSizeCategory: petForm.sizeCategory || undefined,
       };
       const res = editingPet
         ? await fetch(`/api/pets/${editingPet.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })
@@ -690,6 +697,34 @@ export function ClientsPage() {
             <Field label="Breed (optional)">
               <input value={petForm.breed} onChange={(e) => setPetForm((f) => ({ ...f, breed: e.target.value }))} style={inputStyle} />
             </Field>
+            <Field label="Size Category (optional)">
+              <select
+                value={petForm.sizeCategory}
+                onChange={(e) => setPetForm((f) => ({ ...f, sizeCategory: e.target.value }))}
+                style={inputStyle}
+              >
+                <option value="">Not set</option>
+                <option value="small">Small</option>
+                <option value="medium">Medium</option>
+                <option value="large">Large</option>
+                <option value="xlarge">X-Large</option>
+              </select>
+            </Field>
+            <Field label="Coat Type (optional)">
+              <select
+                value={petForm.coatType}
+                onChange={(e) => setPetForm((f) => ({ ...f, coatType: e.target.value }))}
+                style={inputStyle}
+              >
+                <option value="">Not set</option>
+                <option value="smooth">Smooth</option>
+                <option value="double">Double</option>
+                <option value="curly">Curly</option>
+                <option value="wire">Wire</option>
+                <option value="long">Long</option>
+                <option value="hairless">Hairless</option>
+              </select>
+            </Field>
             <Field label="Weight kg (optional)">
               <input type="number" step="0.1" min="0" value={petForm.weightStr} onChange={(e) => setPetForm((f) => ({ ...f, weightStr: e.target.value }))} style={inputStyle} />
             </Field>

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;
@@ -720,6 +721,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);
@@ -801,6 +807,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);
@@ -876,6 +883,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
@@ -1034,7 +1042,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
@@ -1093,7 +1104,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"
                     >

src/portal/sections/PetForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { X, Save, Plus, Star } from "lucide-react";
+import { X, Save, Plus, Star, Loader2 } from "lucide-react";
 import type { Pet, MedicalAlert, CoatType, AlertSeverity } from "@groombook/types";
 
 const COAT_TYPES: CoatType[] = ["double", "wire", "curly", "smooth", "long", "hairless"];
@@ -9,15 +9,17 @@ type SizeOption = typeof SIZE_OPTIONS[number];
 
 interface Props {
   pet?: Pet;
-  onSave: (pet: Pet) => void;
+  onSave: (pet: Pet) => void | Promise<void>;
   onCancel: () => void;
+  saving?: boolean;
+  saveError?: string | null;
 }
 
 function newAlert(): Omit<MedicalAlert, "id"> {
   return { type: "", description: "", severity: "low" };
 }
 
-export function PetForm({ pet, onSave, onCancel }: Props) {
+export function PetForm({ pet, onSave, onCancel, saving, saveError }: Props) {
   const [name, setName] = useState(pet?.name ?? "");
   const [breed, setBreed] = useState(pet?.breed ?? "");
   const [weight, setWeight] = useState(pet?.weightKg ?? 0);
@@ -305,18 +307,23 @@ export function PetForm({ pet, onSave, onCancel }: Props) {
           <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"
+            disabled={saving}
+            className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50 disabled:opacity-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)"
+            disabled={saving}
+            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) disabled:opacity-50"
           >
-            <Save size={14} />
+            {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
-            Save
+            {saving ? "Saving…" : "Save"}
           </button>
         </div>
+        {saveError && (
+          <p className="text-sm text-red-500 text-center">{saveError}</p>
+        )}
       </form>
     </div>
   );

src/portal/sections/PetProfiles.tsx

@@ -83,9 +83,27 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
   const petHistory = appointments.appointments.filter(a => a.pet?.id === selectedPetId && new Date(a.startTime) <= new Date());
   const editingPet = editingPetId ? pets.find(p => p.id === editingPetId) ?? null : null;
 
-  function handlePetSave(updatedPet: Pet) {
+  const [saving, setSaving] = useState(false);
-    setPets(prev => prev.map(p => p.id === updatedPet.id ? updatedPet : p));
+  const [saveError, setSaveError] = useState<string | null>(null);
-    setEditingPetId(null);
+
+  async function handlePetSave(updatedPet: Pet) {
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const res = await fetch(`/api/portal/pets/${updatedPet.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json", ...buildHeaders(sessionId) },
+        body: JSON.stringify(updatedPet),
+      });
+      if (!res.ok) throw new Error("Failed to save pet");
+      const saved: Pet = await res.json();
+      setPets(prev => prev.map(p => p.id === saved.id ? saved : p));
+      setEditingPetId(null);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : "Failed to save pet");
+    } finally {
+      setSaving(false);
+    }
   }
 
   if (editingPet) {
@@ -94,6 +112,8 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
         pet={editingPet}
         onSave={handlePetSave}
         onCancel={() => setEditingPetId(null)}
+        saving={saving}
+        saveError={saveError}
       />
     );
   }