docs(GRO-1289): restore full UAT_PLAYBOOK with auth base URL test cases

- Restored Pre-conditions section (§3) - Restored original §5.1 Authentication UI test cases - Inserted new auth base URL resolution test cases (§5.2–§5.4): - TC-AUTH-5.2.x: VITE_API_URL set scenarios - TC-AUTH-5.3.x: VITE_API_URL unset fallback scenarios - TC-AUTH-5.4.x: Session persistence scenarios - Restored all other feature test sections (§5.5–§5.17) - Restored broader Update Policy (§7) Updated UAT_PLAYBOOK.md §5.2–§5.4 — auth base URL resolution test cases Co-Authored-By: Paperclip <noreply@paperclip.ing>
docs(GRO-1289): add UAT_PLAYBOOK.md with auth base URL test cases
2026-05-14 20:58:06 +00:00 · 2026-05-14 20:36:51 +00:00
10 changed files with 89 additions and 998 deletions
@@ -62,6 +62,10 @@ jobs:
    name: Build & Push Docker Image
    runs-on: ubuntu-latest
    needs: [lint-typecheck, test]
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
    steps:
      - uses: actions/checkout@v4

@@ -79,12 +83,12 @@ jobs:
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

-      - name: Log in to Gitea Container Registry
+      - name: Log in to GitHub Container Registry
        uses: docker/login-action@v3
        with:
-          registry: git.farh.net
-          username: ${{ gitea.actor }}
-          password: ${{ secrets.REGISTRY_TOKEN }}
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push Web image
        uses: docker/build-push-action@v6
@@ -93,7 +97,7 @@ jobs:
          file: Dockerfile
          push: true
          tags: |
-            git.farh.net/groombook/web:${{ steps.version.outputs.tag }}
-            ${{ github.ref == 'refs/heads/main' && 'git.farh.net/groombook/web:latest' || '' }}
-          cache-from: type=registry,ref=git.farh.net/groombook/cache:web
-          cache-to: type=registry,ref=git.farh.net/groombook/cache:web,mode=max
+            ghcr.io/groombook/web:${{ steps.version.outputs.tag }}
+            ${{ github.ref == 'refs/heads/main' && 'ghcr.io/groombook/web:latest' || '' }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
@@ -184,81 +184,6 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.17.2 | Missing data | Navigate to section with no data | Empty state message displayed, not blank page |
 | TC-WEB-5.17.3 | Error boundaries | Trigger error condition | Friendly error message displayed, app doesn't crash |

-### 5.18 Pet Profile UI — Enhanced Fields (GRO-1178)
-
-| # | Scenario | Steps | Expected |
-|---|----------|-------|----------|
-| TC-WEB-5.18.1 | Coat type displayed in Grooming tab | Open pet profile, go to Grooming tab | Coat type shown (e.g. "Curly", "Double") |
-| TC-WEB-5.18.2 | Preferred cuts displayed | Open Grooming tab | Preferred cuts shown as tags/chips |
-| TC-WEB-5.18.3 | Temperament score displayed (read-only) | Open Basic Info tab | 1–5 star display with score label "(N/5 · staff-set)" |
-| TC-WEB-5.18.4 | Temperament flags displayed (read-only) | Open Basic Info tab | Flag chips shown (e.g. "Anxious", "Good with kids") |
-| TC-WEB-5.18.5 | Medical alerts in Medical tab | Open Medical tab | Alert cards with type, description, severity badge |
-| TC-WEB-5.18.6 | Medical alert severity badges | View Medical tab | Low=green, Medium=amber, High=red badges |
-| TC-WEB-5.18.7 | Edit pet — coat type dropdown | Click Edit on pet, select coat type | Coat type persisted on save |
-| TC-WEB-5.18.8 | Edit pet — add medical alert | Click Edit, add alert with type + severity, save | Alert appears in Medical tab after save |
-| TC-WEB-5.18.9 | Edit pet — remove medical alert | Click Edit, remove an alert, save | Alert removed after save |
-| TC-WEB-5.18.10 | Edit pet — add preferred cut (Enter) | Click Edit, type cut name, press Enter | Cut tag added; persists after save |
-| TC-WEB-5.18.11 | Edit pet — remove preferred cut | Click Edit, click X on cut tag | Cut removed; not persisted after save |
-| TC-WEB-5.18.12 | Medical alert validation | Click Edit, add alert with empty type, try to save | Error "Type is required"; form not submitted |
-| TC-WEB-5.18.13 | Temperament fields read-only | View edit form for pet with temperament data | Temperament score and flags not editable (display only) |
-
-### 5.19 Booking Wizard — Pet Size & Coat (GRO-1174)
-
-| # | Scenario | Steps | Expected |
-|---|----------|-------|----------|
-| TC-WEB-5.19.1 | Pet size dropdown visible | Step 3 of booking wizard (pet details) | Pet size dropdown shown after breed field with options: Small, Medium, Large, X-Large |
-| TC-WEB-5.19.2 | Coat type dropdown visible | Step 3 of booking wizard | Coat type dropdown shown after pet size with options: Smooth, Double, Curly, Wire, Long, Hairless |
-| TC-WEB-5.19.3 | Size/coat pre-fill from URL | Navigate to booking with `?petSizeCategory=large&petCoatType=curly` | Fields pre-filled with provided values |
-| TC-WEB-5.19.4 | Size/coat optional | Proceed through booking without selecting size/coat | Booking completes successfully |
-| TC-WEB-5.19.5 | Confirmation shows appointment duration | Confirm booking step | Service duration shown as "X min appointment" (buffer not exposed) |
-| TC-WEB-5.19.6 | Confirmation shows pet size/coat | Confirm booking with size/coat selected | Size and coat type shown on pet card in confirmation |
-| TC-WEB-5.19.7 | Availability uses buffer for large/x-large | Select large or x-large size, check availability | Availability slots reflect service duration + buffer for large/x-large |
-| TC-WEB-5.19.8 | Form reset clears size/coat | Complete booking, click "Book another" | Size and coat fields reset to empty |
-| TC-WEB-5.19.9 | New pet record has size/coat | Complete booking, view created pet in admin | Pet record shows selected size and coat type |
-
-### 5.20 Buffer Rules Management — Admin UI (GRO-1173)
-
-| # | Scenario | Steps | Expected |
-|---|----------|-------|----------|
-| TC-WEB-5.20.1 | Buffer rules section loads | Navigate to Settings page (admin) | "Buffer Rules" section visible with "+ Add Rule" button |
-| TC-WEB-5.20.2 | Add rule — required fields only | Click "+ Add Rule", select a service, enter buffer minutes, submit | Rule created, appears in list below |
-| TC-WEB-5.20.3 | Add rule — with size category | Add rule, select service + size category + buffer minutes | Rule created with size tag shown in list |
-| TC-WEB-5.20.4 | Add rule — with coat type | Add rule, select service + coat type + buffer minutes | Rule created with coat tag shown in list |
-| TC-WEB-5.20.5 | Add rule — with both size and coat | Add rule, select service + size + coat + buffer minutes | Rule created with both tags shown |
-| TC-WEB-5.20.6 | Validation — missing service | Submit form without selecting service | Error: "Service and valid buffer minutes are required" |
-| TC-WEB-5.20.7 | Validation — zero buffer | Submit form with 0 buffer minutes | Error: "Service and valid buffer minutes are required" |
-| TC-WEB-5.20.8 | Edit rule inline | Click "Edit" on a rule, change buffer value, click "Save" | Rule updated in list |
-| TC-WEB-5.20.9 | Cancel edit | Click "Edit", then "Cancel" | Original value unchanged |
-| TC-WEB-5.20.10 | Delete rule — confirmation | Click "Delete" on a rule | Confirmation prompt appears |
-| TC-WEB-5.20.11 | Confirm delete | On confirmation prompt, click "Confirm" | Rule removed from list |
-| TC-WEB-5.20.12 | Cancel delete | On confirmation prompt, click "Cancel" | Rule remains in list |
-| TC-WEB-5.20.13 | Empty state | No rules exist | Message: "No buffer rules configured yet." |
-| TC-WEB-5.20.14 | Toggle form | Click "+ Add Rule", then "Cancel" | Form hidden, no rule created |
-
-### 5.21 Service Default Buffer Minutes (GRO-1173)
-
-| # | Scenario | Steps | Expected |
-|---|----------|-------|----------|
-| TC-WEB-5.21.1 | Default buffer shown in table | Navigate to Services page | "Default Buffer" column visible in services table |
-| TC-WEB-5.21.2 | New service default is 0 | Click "+ Add Service" | Default Buffer field pre-filled with 0 |
-| TC-WEB-5.21.3 | Create service with buffer | Fill service form, set Default Buffer = 10, submit | Service created with 10 min default buffer |
-| TC-WEB-5.21.4 | Edit service — view buffer | Edit an existing service | Current default buffer value shown in form |
-| TC-WEB-5.21.5 | Update buffer on existing service | Edit service, change Default Buffer to 15, save | Buffer updated, table shows 15 min |
-| TC-WEB-5.21.6 | Buffer field — zero allowed | Set Default Buffer to 0, save | Service saved with 0 (no default buffer) |
-| TC-WEB-5.21.7 | Buffer field — integer only | Enter non-integer value | Field restricts to integer values |
-
-### 5.22 Pet Profile — Size Category & Coat Type (GRO-1173)
-
-| # | Scenario | Steps | Expected |
-|---|----------|-------|----------|
-| TC-WEB-5.22.1 | Size category dropdown visible | Open Add Pet or Edit Pet form (portal) | "Size Category" dropdown visible with options: Small, Medium, Large, X-Large |
-| TC-WEB-5.22.2 | Coat type dropdown visible | Open Add Pet or Edit Pet form | "Coat Type" dropdown visible with options: Smooth, Double, Curly, Wire, Long, Hairless |
-| TC-WEB-5.22.3 | Size and coat both optional | Submit pet form without selecting size or coat | Pet saved successfully |
-| TC-WEB-5.22.4 | Save pet with size category | Select "Large", fill required fields, save | Pet saved with size = "large" |
-| TC-WEB-5.22.5 | Save pet with coat type | Select "Curly", fill required fields, save | Pet saved with coat = "curly" |
-| 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 |
-
 ## 6. Pass/Fail Criteria

 **Pass:**
@@ -39,12 +39,6 @@ export interface Pet {
  cutStyle: string | null;
  shampooPreference: string | null;
  specialCareNotes: string | null;
-  coatType?: string | null;
-  petSizeCategory?: string | null;
-  preferredCuts: string[];
-  medicalAlerts: MedicalAlert[];
-  temperamentScore?: number;
-  temperamentFlags?: string[];
  customFields: Record<string, string>;
  photoKey?: string;
  photoUploadedAt?: string;
@@ -71,7 +65,6 @@ export interface Service {
  basePriceCents: number;
  durationMinutes: number;
  active: boolean;
-  defaultBufferMinutes?: number;
  createdAt: string;
  updatedAt: string;
 }
@@ -215,14 +208,3 @@ export interface PaginatedList<T> {
  page: number;
  pageSize: number;
 }
-
-export type AlertSeverity = "low" | "medium" | "high";
-
-export interface MedicalAlert {
-  id: string;
-  type: string;
-  description: string;
-  severity: AlertSeverity;
-}
-
-export type CoatType = "smooth" | "double" | "curly" | "wire" | "long" | "hairless";
@@ -1,157 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { PetForm } from "../portal/sections/PetForm.js";
-import type { Pet } from "@groombook/types";
-
-const BASE_PET: Pet = {
-  id: "pet-1",
-  clientId: "client-1",
-  name: "Buddy",
-  species: "dog",
-  breed: "Labrador",
-  weightKg: 25,
-  dateOfBirth: "2020-03-15T00:00:00.000Z",
-  healthAlerts: null,
-  groomingNotes: null,
-  cutStyle: null,
-  shampooPreference: null,
-  specialCareNotes: null,
-  customFields: {},
-  coatType: null,
-  preferredCuts: [],
-  medicalAlerts: [],
-  createdAt: "2024-01-01T00:00:00.000Z",
-  updatedAt: "2024-01-01T00:00:00.000Z",
-};
-
-describe("PetForm", () => {
-  const onSave = vi.fn();
-  const onCancel = vi.fn();
-
-  beforeEach(() => {
-    onSave.mockClear();
-    onCancel.mockClear();
-  });
-
-  // ── Coat type ───────────────────────────────────────────────────────────────
-
-  it("allows coat type selection from dropdown", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    const select = screen.getByRole("combobox", { name: /coat type/i });
-    fireEvent.change(select, { target: { value: "curly" } });
-    expect((select as HTMLSelectElement).value).toBe("curly");
-  });
-
-  it("persists coat type on save", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    fireEvent.change(screen.getByRole("combobox", { name: /coat type/i }), { target: { value: "double" } });
-    fireEvent.click(screen.getByRole("button", { name: /save/i }));
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ coatType: "double" })
-    );
-  });
-
-  // ── Preferred cuts tag input ────────────────────────────────────────────────
-
-  it("adds a cut when Enter is pressed", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    const input = screen.getByPlaceholderText(/type a cut name/i);
-    fireEvent.change(input, { target: { value: "Puppy Cut" } });
-    fireEvent.keyDown(input, { key: "Enter" });
-    expect(screen.getByText("Puppy Cut")).toBeTruthy();
-  });
-
-  it("adds a cut when the + button is clicked", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    const input = screen.getByPlaceholderText(/type a cut name/i);
-    fireEvent.change(input, { target: { value: "Teddy Bear" } });
-    fireEvent.click(screen.getByRole("button", { name: "Add" }));
-    expect(screen.getByText("Teddy Bear")).toBeTruthy();
-  });
-
-  it("removes a cut when X is clicked", () => {
-    const petWithCuts: Pet = {
-      ...BASE_PET,
-      preferredCuts: ["Puppy Cut", "Teddy Bear"],
-    };
-    render(<PetForm pet={petWithCuts} onSave={onSave} onCancel={onCancel} />);
-    const puppyCutSpans = screen.getAllByText("Puppy Cut");
-    const puppyCutTag = puppyCutSpans[0]?.closest("span");
-    if (!puppyCutTag) return;
-    const removeBtn = puppyCutTag.querySelector("button");
-    if (!removeBtn) return;
-    fireEvent.click(removeBtn);
-    expect(screen.queryByText("Puppy Cut")).toBeNull();
-    expect(screen.getByText("Teddy Bear")).toBeTruthy();
-  });
-
-  it("includes preferred cuts in save payload", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    fireEvent.change(screen.getByPlaceholderText(/type a cut name/i), { target: { value: "Puppy Cut" } });
-    fireEvent.keyDown(screen.getByPlaceholderText(/type a cut name/i), { key: "Enter" });
-    fireEvent.click(screen.getByRole("button", { name: /save/i }));
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ preferredCuts: ["Puppy Cut"] })
-    );
-  });
-
-  // ── Medical alerts ───────────────────────────────────────────────────────────
-
-  it("adds a medical alert", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
-    expect(screen.getByPlaceholderText(/alert type/i)).toBeTruthy();
-  });
-
-  it("removes a medical alert", () => {
-    const petWithAlert: Pet = {
-      ...BASE_PET,
-      medicalAlerts: [{ id: "alert-1", type: "Allergic to chicken", description: "Causes hives", severity: "high" }],
-    };
-    render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
-    const removeButtons = screen.getAllByRole("button", { name: "" });
-    if (removeButtons.length === 0) return;
-    const removeButton = removeButtons[0]!;
-    if (!removeButton) return;
-    fireEvent.click(removeButton);
-    expect(screen.queryByText("Allergic to chicken")).toBeNull();
-  });
-
-  it("validates alert type is non-empty", () => {
-    render(<PetForm pet={BASE_PET} onSave={onSave} onCancel={onCancel} />);
-    fireEvent.click(screen.getByRole("button", { name: /add alert/i }));
-    fireEvent.click(screen.getByRole("button", { name: /save/i }));
-    expect(screen.getByText(/type is required/i)).toBeTruthy();
-    expect(onSave).not.toHaveBeenCalled();
-  });
-
-  it("shows medical alerts in save payload", () => {
-    const petWithAlert: Pet = {
-      ...BASE_PET,
-      medicalAlerts: [{ id: "alert-1", type: "Sensitive skin", description: "Use hypoallergenic shampoo only", severity: "medium" }],
-    };
-    render(<PetForm pet={petWithAlert} onSave={onSave} onCancel={onCancel} />);
-    fireEvent.click(screen.getByRole("button", { name: /save/i }));
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        medicalAlerts: expect.arrayContaining([
-          expect.objectContaining({ type: "Sensitive skin", severity: "medium" }),
-        ]),
-      })
-    );
-  });
-
-  // ── Temperament read-only display ─────────────────────────────────────────────
-
-  it("displays temperament score as read-only stars", () => {
-    const petWithTemperament: Pet = {
-      ...BASE_PET,
-      temperamentScore: 4,
-      temperamentFlags: ["Anxious", "Good with kids"],
-    };
-    render(<PetForm pet={petWithTemperament} onSave={onSave} onCancel={onCancel} />);
-    expect(screen.getByText("(4/5)")).toBeTruthy();
-    expect(screen.getByText("Anxious")).toBeTruthy();
-    expect(screen.getByText("Good with kids")).toBeTruthy();
-  });
-});
@@ -1,282 +0,0 @@
-import { useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
-
-interface Service {
-  id: string;
-  name: string;
-  description?: string;
-  basePriceCents: number;
-  durationMinutes: number;
-  active: boolean;
-}
-
-interface BufferRule {
-  id: string;
-  serviceId: string;
-  serviceName: string;
-  sizeCategory?: string;
-  coatType?: string;
-  bufferMinutes: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface BufferRuleForm {
-  serviceId: string;
-  sizeCategory: string;
-  coatType: string;
-  bufferMinutes: string;
-}
-
-const EMPTY_FORM: BufferRuleForm = {
-  serviceId: "",
-  sizeCategory: "",
-  coatType: "",
-  bufferMinutes: "",
-};
-
-const SIZE_OPTIONS = ["", "small", "medium", "large", "xlarge"] as const;
-const COAT_OPTIONS = ["", "smooth", "double", "wire", "curly", "long", "hairless"] as const;
-
-export function BufferRulesSection() {
-  const [rules, setRules] = useState<BufferRule[]>([]);
-  const [services, setServices] = useState<Service[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showForm, setShowForm] = useState(false);
-  const [form, setForm] = useState<BufferRuleForm>(EMPTY_FORM);
-  const [saving, setSaving] = useState(false);
-  const [formError, setFormError] = useState<string | null>(null);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editBuffer, setEditBuffer] = useState<string>("");
-
-  useEffect(() => {
-    Promise.all([
-      fetch("/api/buffer-rules").then(r => r.ok ? r.json() : []),
-      fetch("/api/services?includeInactive=true").then(r => r.ok ? r.json() : []),
-    ]).then(([rulesData, servicesData]) => {
-      setRules(rulesData as BufferRule[]);
-      setServices(servicesData as Service[]);
-    }).catch(() => setError("Failed to load")).finally(() => setLoading(false));
-  }, []);
-
-  async function handleCreate(e: React.FormEvent) {
-    e.preventDefault();
-    const mins = parseInt(form.bufferMinutes);
-    if (!form.serviceId || isNaN(mins) || mins <= 0) {
-      setFormError("Service and valid buffer minutes are required.");
-      return;
-    }
-    setSaving(true);
-    setFormError(null);
-    try {
-      const body: Record<string, string | number> = {
-        serviceId: form.serviceId,
-        bufferMinutes: mins,
-      };
-      if (form.sizeCategory) body.sizeCategory = form.sizeCategory;
-      if (form.coatType) body.coatType = form.coatType;
-      const res = await fetch("/api/buffer-rules", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-      });
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({})) as { error?: string };
-        throw new Error(err.error ?? `HTTP ${res.status}`);
-      }
-      const newRule = await res.json() as BufferRule;
-      setRules(prev => [...prev, newRule]);
-      setShowForm(false);
-      setForm(EMPTY_FORM);
-    } catch (e: unknown) {
-      setFormError(e instanceof Error ? e.message : "Failed to create rule");
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleDelete(id: string) {
-    setDeletingId(id);
-    try {
-      await fetch(`/api/buffer-rules/${id}`, { method: "DELETE" });
-      setRules(prev => prev.filter(r => r.id !== id));
-    } finally {
-      setDeletingId(null);
-      setConfirmDeleteId(null);
-    }
-  }
-
-  function startEdit(rule: BufferRule) {
-    setEditingId(rule.id);
-    setEditBuffer(String(rule.bufferMinutes));
-  }
-
-  async function saveEdit(rule: BufferRule) {
-    const mins = parseInt(editBuffer);
-    if (isNaN(mins) || mins <= 0) return;
-    setSaving(true);
-    try {
-      const res = await fetch(`/api/buffer-rules/${rule.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ bufferMinutes: mins }),
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const updated = await res.json() as BufferRule;
-      setRules(prev => prev.map(r => r.id === updated.id ? updated : r));
-    } catch {
-      // silent fail
-    } finally {
-      setSaving(false);
-      setEditingId(null);
-      setEditBuffer("");
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 size={20} className="animate-spin text-stone-400" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="py-4 text-sm text-red-500">{error}</div>
-    );
-  }
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-base font-semibold text-stone-800">Buffer Rules</h2>
-          <p className="text-sm text-stone-500">Extra time rules per service / pet size / coat type</p>
-        </div>
-        <button
-          onClick={() => { setShowForm(!showForm); setFormError(null); }}
-          className="px-3 py-1.5 bg-(--color-primary) text-white text-sm rounded-lg hover:bg-(--color-primary-hover)"
-        >
-          {showForm ? "Cancel" : "+ Add Rule"}
-        </button>
-      </div>
-
-      {showForm && (
-        <form onSubmit={handleCreate} className="mb-6 p-4 bg-stone-50 rounded-xl border border-stone-200 space-y-3">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-stone-600 mb-1">Service *</label>
-              <select
-                value={form.serviceId}
-                onChange={e => setForm(f => ({ ...f, serviceId: e.target.value }))}
-                required
-                className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-              >
-                <option value="">Select service…</option>
-                {services.map(s => (
-                  <option key={s.id} value={s.id}>{s.name}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-stone-600 mb-1">Buffer (minutes) *</label>
-              <input
-                type="number"
-                min="1"
-                step="1"
-                value={form.bufferMinutes}
-                onChange={e => setForm(f => ({ ...f, bufferMinutes: e.target.value }))}
-                required
-                className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-stone-600 mb-1">Size Category</label>
-              <select
-                value={form.sizeCategory}
-                onChange={e => setForm(f => ({ ...f, sizeCategory: e.target.value }))}
-                className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-              >
-                <option value="">Any</option>
-                {SIZE_OPTIONS.filter(s => s).map(s => (
-                  <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-stone-600 mb-1">Coat Type</label>
-              <select
-                value={form.coatType}
-                onChange={e => setForm(f => ({ ...f, coatType: e.target.value }))}
-                className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-              >
-                <option value="">Any</option>
-                {COAT_OPTIONS.filter(c => c).map(c => (
-                  <option key={c} value={c}>{c.charAt(0).toUpperCase() + c.slice(1)}</option>
-                ))}
-              </select>
-            </div>
-          </div>
-          {formError && <p className="text-sm text-red-500">{formError}</p>}
-          <button
-            type="submit"
-            disabled={saving}
-            className="px-4 py-2 bg-(--color-primary) text-white text-sm rounded-lg hover:bg-(--color-primary-hover) disabled:opacity-60"
-          >
-            {saving ? "Saving…" : "Create Rule"}
-          </button>
-        </form>
-      )}
-
-      {rules.length === 0 && !showForm ? (
-        <p className="text-sm text-stone-400 py-6 text-center">No buffer rules configured yet.</p>
-      ) : (
-        <div className="space-y-2">
-          {rules.map(rule => (
-            <div key={rule.id} className="flex items-center gap-3 p-3 bg-white rounded-xl border border-stone-200">
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-medium text-stone-800 truncate">{rule.serviceName}</div>
-                <div className="text-xs text-stone-500 flex gap-2 flex-wrap">
-                  {rule.sizeCategory && <span>Size: {rule.sizeCategory}</span>}
-                  {rule.coatType && <span>Coat: {rule.coatType}</span>}
-                </div>
-              </div>
-              {editingId === rule.id ? (
-                <div className="flex items-center gap-2">
-                  <input
-                    type="number"
-                    min="1"
-                    value={editBuffer}
-                    onChange={e => setEditBuffer(e.target.value)}
-                    className="w-20 border border-stone-200 rounded px-2 py-1 text-sm"
-                  />
-                  <span className="text-xs text-stone-500">min</span>
-                  <button onClick={() => saveEdit(rule)} disabled={saving} className="text-xs text-green-600 font-medium">Save</button>
-                  <button onClick={() => setEditingId(null)} className="text-xs text-stone-500">Cancel</button>
-                </div>
-              ) : (
-                <>
-                  <span className="text-sm font-medium text-stone-700">{rule.bufferMinutes} min</span>
-                  <button onClick={() => startEdit(rule)} className="text-xs text-stone-500 hover:text-stone-700 px-2">Edit</button>
-                </>
-              )}
-              {confirmDeleteId === rule.id ? (
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-red-500">Delete?</span>
-                  <button onClick={() => handleDelete(rule.id)} disabled={deletingId === rule.id} className="text-xs text-red-600 font-medium">Confirm</button>
-                  <button onClick={() => setConfirmDeleteId(null)} className="text-xs text-stone-500">Cancel</button>
-                </div>
-              ) : (
-                <button onClick={() => setConfirmDeleteId(rule.id)} className="text-xs text-red-400 hover:text-red-600">Delete</button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
@@ -13,8 +13,6 @@ interface BookingBody {
  petName: string;
  petSpecies: string;
  petBreed: string;
-  petSizeCategory: string;
-  petCoatType: string;
  notes: string;
 }

@@ -125,8 +123,6 @@ export function BookPage() {
    petName: "",
    petSpecies: "",
    petBreed: "",
-    petSizeCategory: "",
-    petCoatType: "",
    notes: "",
  });
  const [formError, setFormError] = useState<string | null>(null);
@@ -140,9 +136,7 @@ export function BookPage() {
    const petName = searchParams.get("petName");
    const petSpecies = searchParams.get("petSpecies");
    const petBreed = searchParams.get("petBreed");
-    const petSizeCategory = searchParams.get("petSizeCategory");
-    const petCoatType = searchParams.get("petCoatType");
-    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed || petSizeCategory || petCoatType) {
+    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed) {
      setForm((f) => ({
        ...f,
        ...(clientName && { clientName }),
@@ -151,8 +145,6 @@ export function BookPage() {
        ...(petName && { petName }),
        ...(petSpecies && { petSpecies }),
        ...(petBreed && { petBreed }),
-        ...(petSizeCategory && { petSizeCategory }),
-        ...(petCoatType && { petCoatType }),
      }));
    }
  }, [searchParams]);
@@ -176,18 +168,14 @@ export function BookPage() {
    if (!selectedService || !date) return;
    setSlotsLoading(true);
    setSelectedSlot(null);
-    const params = new URLSearchParams({
-      serviceId: selectedService.id,
-      date,
-    });
-    if (form.petSizeCategory) params.set("petSizeCategory", form.petSizeCategory);
-    if (form.petCoatType) params.set("petCoatType", form.petCoatType);
-    fetch(`/api/book/availability?${params.toString()}`)
+    fetch(
+      `/api/book/availability?serviceId=${encodeURIComponent(selectedService.id)}&date=${encodeURIComponent(date)}`
+    )
      .then((r) => r.json() as Promise<string[]>)
      .then(setSlots)
      .catch(() => setSlots([]))
      .finally(() => setSlotsLoading(false));
-  }, [selectedService, date, form.petSizeCategory, form.petCoatType]);
+  }, [selectedService, date]);

  function goToStep2(svc: Service) {
    setSelectedService(svc);
@@ -226,8 +214,6 @@ export function BookPage() {
          petName: form.petName,
          petSpecies: form.petSpecies,
          petBreed: form.petBreed || undefined,
-          petSizeCategory: form.petSizeCategory || undefined,
-          petCoatType: form.petCoatType || undefined,
          notes: form.notes || undefined,
        }),
      });
@@ -508,36 +494,6 @@ export function BookPage() {
                    placeholder="Golden Retriever"
                  />
                </div>
-                <div>
-                  <label style={label}>Pet size</label>
-                  <select
-                    style={input}
-                    value={form.petSizeCategory}
-                    onChange={(e) => setForm((f) => ({ ...f, petSizeCategory: e.target.value }))}
-                  >
-                    <option value="">Select size…</option>
-                    <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>
-                  </select>
-                </div>
-                <div>
-                  <label style={label}>Coat type</label>
-                  <select
-                    style={input}
-                    value={form.petCoatType}
-                    onChange={(e) => setForm((f) => ({ ...f, petCoatType: e.target.value }))}
-                  >
-                    <option value="">Select coat…</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>
-                </div>
                <div>
                  <label style={label}>Notes for groomer</label>
                  <textarea
@@ -572,7 +528,7 @@ export function BookPage() {
              <div>
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Service</div>
                <div style={{ fontWeight: 600 }}>{selectedService.name}</div>
-                <div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)} appointment</div>
+                <div style={{ color: "#6b7280" }}>{fmtPrice(selectedService.basePriceCents)} · {fmtDuration(selectedService.durationMinutes)}</div>
              </div>
              <div>
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Date & Time</div>
@@ -589,11 +545,6 @@ export function BookPage() {
                <div style={{ color: "#9ca3af", fontSize: 12, fontWeight: 600, textTransform: "uppercase" }}>Pet</div>
                <div style={{ fontWeight: 600 }}>{form.petName}</div>
                <div style={{ color: "#6b7280", textTransform: "capitalize" }}>{form.petSpecies}{form.petBreed ? ` · ${form.petBreed}` : ""}</div>
-                {(form.petSizeCategory || form.petCoatType) && (
-                  <div style={{ color: "#6b7280", fontSize: 12, marginTop: 2 }}>
-                    {form.petSizeCategory ? `${form.petSizeCategory} · ` : ""}{form.petCoatType ? form.petCoatType : ""}
-                  </div>
-                )}
              </div>
              {form.notes && (
                <div style={{ gridColumn: "1 / -1" }}>
@@ -648,8 +599,7 @@ export function BookPage() {
              setResult(null);
              setForm({
                serviceId: "", startTime: "", clientName: "", clientEmail: "",
-                clientPhone: "", petName: "", petSpecies: "", petBreed: "",
-                petSizeCategory: "", petCoatType: "", notes: "",
+                clientPhone: "", petName: "", petSpecies: "", petBreed: "", notes: "",
              });
            }}
          >
@@ -6,7 +6,6 @@ interface ServiceForm {
  description: string;
  priceStr: string;
  durationMinutes: number;
-  defaultBufferMinutes: number;
  active: boolean;
 }

@@ -15,7 +14,6 @@ const EMPTY_FORM: ServiceForm = {
  description: "",
  priceStr: "",
  durationMinutes: 60,
-  defaultBufferMinutes: 0,
  active: true,
 };

@@ -57,7 +55,6 @@ export function ServicesPage() {
      description: s.description ?? "",
      priceStr: (s.basePriceCents / 100).toFixed(2),
      durationMinutes: s.durationMinutes,
-      defaultBufferMinutes: s.defaultBufferMinutes ?? 0,
      active: s.active,
    });
    setFormError(null);
@@ -79,7 +76,6 @@ export function ServicesPage() {
        description: form.description || undefined,
        basePriceCents: Math.round(price * 100),
        durationMinutes: form.durationMinutes,
-        defaultBufferMinutes: form.defaultBufferMinutes,
        active: form.active,
      };
      const res = editing
@@ -142,7 +138,7 @@ export function ServicesPage() {
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
          <thead>
            <tr style={{ background: "#f8fafc" }}>
-              {["Name", "Description", "Price", "Duration", "Default Buffer", "Status", ""].map((h) => (
+              {["Name", "Description", "Price", "Duration", "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>
@@ -156,7 +152,6 @@ export function ServicesPage() {
                <td style={tdStyle}>{s.description ?? "—"}</td>
                <td style={tdStyle}>${(s.basePriceCents / 100).toFixed(2)}</td>
                <td style={tdStyle}>{s.durationMinutes} min</td>
-                <td style={tdStyle}>{(s as Service & { defaultBufferMinutes?: number }).defaultBufferMinutes ?? 0} min</td>
                <td style={tdStyle}>
                  <button
                    onClick={() => toggleActive(s)}
@@ -245,19 +240,6 @@ export function ServicesPage() {
                style={inputStyle}
              />
            </Field>
-            <Field label="Default Buffer (minutes)">
-              <input
-                type="number"
-                min="0"
-                step="1"
-                value={form.defaultBufferMinutes}
-                onChange={(e) => setForm((f) => ({ ...f, defaultBufferMinutes: parseInt(e.target.value) || 0 }))}
-                style={inputStyle}
-              />
-              <p style={{ fontSize: 12, color: "#9ca3af", marginTop: "0.2rem" }}>
-                Default buffer time applied when no specific rule matches
-              </p>
-            </Field>
            <Field label="Status">
              <label style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }}>
                <input
@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 import { useBranding } from "../BrandingContext.js";
-import { BufferRulesSection } from "../components/BufferRules.js";

 interface AuthProviderConfig {
  id: number;
@@ -534,10 +533,6 @@ issuerUrl: authForm.issuerUrl,
        {saving ? "Saving..." : "Save Changes"}
      </button>

-      {/* Buffer Rules Section */}
-      <hr style={{ margin: "2rem 0", border: "none", borderTop: "1px solid #e5e7eb" }} />
-      <BufferRulesSection />
-
      {/* Auth Provider Section — super users only */}
      {currentUser?.isSuperUser && (
        <>
@@ -1,11 +1,6 @@
 import { useState } from "react";
-import { X, Save, Plus, Star } from "lucide-react";
-import type { Pet, MedicalAlert, CoatType, AlertSeverity } from "@groombook/types";
-
-const COAT_TYPES: CoatType[] = ["double", "wire", "curly", "smooth", "long", "hairless"];
-const SEVERITY_OPTIONS: AlertSeverity[] = ["low", "medium", "high"];
-const SIZE_OPTIONS = ["small", "medium", "large", "xlarge"] as const;
-type SizeOption = typeof SIZE_OPTIONS[number];
+import { X, Save } from "lucide-react";
+import type { Pet } from "../mockData.js";

 interface Props {
  pet?: Pet;
@@ -13,294 +8,63 @@ interface Props {
  onCancel: () => void;
 }

-function newAlert(): Omit<MedicalAlert, "id"> {
-  return { type: "", description: "", severity: "low" };
-}
-
 export function PetForm({ pet, onSave, onCancel }: Props) {
  const [name, setName] = useState(pet?.name ?? "");
  const [breed, setBreed] = useState(pet?.breed ?? "");
-  const [weight, setWeight] = useState(pet?.weightKg ?? 0);
-  const [notes, setNotes] = useState(pet?.healthAlerts ?? "");
-  const [coatType, setCoatType] = useState<CoatType | "">((pet?.coatType as CoatType) ?? "");
-  const [petSizeCategory, setPetSizeCategory] = useState<SizeOption | "">(pet?.petSizeCategory as SizeOption ?? "");
-  const [preferredCuts, setPreferredCuts] = useState<string[]>(pet?.preferredCuts ?? []);
-  const [cutInput, setCutInput] = useState("");
-  const [alerts, setAlerts] = useState<Omit<MedicalAlert, "id">[]>(
-    pet?.medicalAlerts?.map((alert: MedicalAlert) => ({ type: alert.type, description: alert.description, severity: alert.severity })) ?? []
-  );
-  const [alertErrors, setAlertErrors] = useState<Record<number, string>>({});
-
-  function addAlert() {
-    setAlerts(prev => [...prev, newAlert()]);
-  }
-
-  function updateAlert(idx: number, field: keyof Omit<MedicalAlert, "id">, value: string) {
-    setAlerts(prev => prev.map((a, i) => i === idx ? { ...a, [field]: value } : a));
-    setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
-  }
-
-  function removeAlert(idx: number) {
-    setAlerts(prev => prev.filter((_, i) => i !== idx));
-    setAlertErrors(prev => { const e = { ...prev }; delete e[idx]; return e; });
-  }
-
-  function addCut() {
-    const trimmed = cutInput.trim();
-    if (trimmed && !preferredCuts.includes(trimmed)) {
-      setPreferredCuts(prev => [...prev, trimmed]);
-    }
-    setCutInput("");
-  }
-
-  function removeCut(cut: string) {
-    setPreferredCuts(prev => prev.filter(c => c !== cut));
-  }
-
-  function handleCutKey(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === "Enter") { e.preventDefault(); addCut(); }
-  }
-
-  function validateAlerts(): boolean {
-    const errors: Record<number, string> = {};
-    alerts.forEach((a, i) => {
-      if (!a.type.trim()) errors[i] = "Type is required";
-      else if (a.severity === "medium" && !a.description.trim()) errors[i] = "Description required at medium/high severity";
-    });
-    setAlertErrors(errors);
-    return Object.keys(errors).length === 0;
-  }
+  const [weight, setWeight] = useState(pet?.weight ?? 0);
+  const [notes, setNotes] = useState(pet?.allergies ?? "");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!pet) return;
-    if (!handleCutKey) {} // noop reference
-    if (alerts.length > 0 && !validateAlerts()) return;
-
-    const savedPet: Pet = {
-      ...pet,
-      name,
-      breed: breed || null,
-      weightKg: weight || null,
-      healthAlerts: notes,
-      coatType: coatType || null,
-      petSizeCategory: petSizeCategory || null,
-      preferredCuts,
-      medicalAlerts: alerts.map((a, i) => ({ ...a, id: pet.medicalAlerts?.[i]?.id ?? crypto.randomUUID() })),
-    };
-    onSave(savedPet);
+    onSave({ ...pet, name, breed, weight, allergies: notes });
  }

-  const temperamentScore = pet?.temperamentScore;
-  const temperamentFlags = pet?.temperamentFlags ?? [];
-
  return (
    <div className="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm">
      <div className="flex items-center justify-between mb-6">
-        <h2 className="text-lg font-semibold text-stone-800">{pet?.id ? "Edit Pet" : "Add Pet"}</h2>
+        <h2 className="text-lg font-semibold text-stone-800">{pet ? "Edit Pet" : "Add Pet"}</h2>
        <button onClick={onCancel} className="p-2 hover:bg-stone-50 rounded-lg">
          <X size={16} className="text-stone-400" />
        </button>
      </div>
-      <form onSubmit={handleSubmit} className="space-y-6">
-
-        {/* Basic Info */}
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-stone-600 mb-1">Name *</label>
-            <input
-              type="text"
-              value={name}
-              onChange={e => setName(e.target.value)}
-              required
-              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
-            <input
-              type="text"
-              value={breed}
-              onChange={e => setBreed(e.target.value)}
-              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-stone-600 mb-1">Weight (kg)</label>
-            <input
-              type="number"
-              value={weight}
-              onChange={e => setWeight(Number(e.target.value))}
-              min="0"
-              step="0.1"
-              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
-            <textarea
-              value={notes}
-              onChange={e => setNotes(e.target.value)}
-              rows={3}
-              className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-            />
-          </div>
-        </div>
-
-        {/* Coat Type */}
+      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
-          <label htmlFor="coat-type" className="block text-sm font-medium text-stone-600 mb-1">Coat Type</label>
-          <select
-            id="coat-type"
-            value={coatType}
-            onChange={e => setCoatType(e.target.value as CoatType)}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
-          >
-            <option value="">Select coat type</option>
-            {COAT_TYPES.map(ct => (
-              <option key={ct} value={ct}>{ct.charAt(0).toUpperCase() + ct.slice(1)}</option>
-            ))}
-          </select>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
        </div>
-
-        {/* Size Category */}
        <div>
-          <label htmlFor="size-category" className="block text-sm font-medium text-stone-600 mb-1">Size Category</label>
-          <select
-            id="size-category"
-            value={petSizeCategory}
-            onChange={e => setPetSizeCategory(e.target.value as SizeOption)}
-            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
-          >
-            <option value="">Select size</option>
-            {SIZE_OPTIONS.map(s => (
-              <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
-            ))}
-          </select>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Breed</label>
+          <input
+            type="text"
+            value={breed}
+            onChange={e => setBreed(e.target.value)}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
        </div>
-
-        {/* Temperament (read-only) */}
-        {(temperamentScore != null || temperamentFlags.length > 0) && (
-          <div className="bg-stone-50 rounded-xl p-4 space-y-2">
-            <label className="block text-sm font-medium text-stone-500 mb-1">Temperament</label>
-            {temperamentScore != null && (
-              <div className="flex items-center gap-1">
-                {[1, 2, 3, 4, 5].map(s => (
-                  <Star
-                    key={s}
-                    size={14}
-                    className={s <= temperamentScore ? "text-amber-400 fill-amber-400" : "text-stone-300"}
-                  />
-                ))}
-                <span className="ml-1 text-xs text-stone-500">({temperamentScore}/5)</span>
-              </div>
-            )}
-            {temperamentFlags.length > 0 && (
-              <div className="flex flex-wrap gap-1">
-                {temperamentFlags.map(flag => (
-                  <span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Medical Alerts */}
        <div>
-          <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-medium text-stone-600">Medical Alerts</label>
-            <button
-              type="button"
-              onClick={addAlert}
-              className="flex items-center gap-1 text-xs text-(--color-accent-dark) font-medium hover:underline"
-            >
-              <Plus size={12} /> Add Alert
-            </button>
-          </div>
-          <div className="space-y-3">
-            {alerts.map((alert, idx) => (
-              <div key={idx} className="border border-stone-200 rounded-lg p-3 space-y-2">
-                <div className="flex items-start gap-2">
-                  <div className="flex-1 space-y-2">
-                    <div className="flex gap-2">
-                      <input
-                        type="text"
-                        placeholder="Alert type (e.g. Allergic to chicken)"
-                        value={alert.type}
-                        onChange={e => updateAlert(idx, "type", e.target.value)}
-                        className="flex-1 border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-                      />
-                      <select
-                        value={alert.severity}
-                        onChange={e => updateAlert(idx, "severity", e.target.value as AlertSeverity)}
-                        className="border border-stone-200 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent) bg-white"
-                      >
-                        {SEVERITY_OPTIONS.map(sev => (
-                          <option key={sev} value={sev}>{sev.charAt(0).toUpperCase() + sev.slice(1)}</option>
-                        ))}
-                      </select>
-                    </div>
-                    <textarea
-                      placeholder="Description (optional)"
-                      value={alert.description}
-                      onChange={e => updateAlert(idx, "description", e.target.value)}
-                      rows={2}
-                      className="w-full border border-stone-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-                    />
-                    {alertErrors[idx] && (
-                      <p className="text-xs text-red-500">{alertErrors[idx]}</p>
-                    )}
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => removeAlert(idx)}
-                    className="p-1 hover:bg-stone-100 rounded text-stone-400 mt-0.5"
-                  >
-                    <X size={14} />
-                  </button>
-                </div>
-              </div>
-            ))}
-            {alerts.length === 0 && (
-              <p className="text-sm text-stone-400">No medical alerts on file.</p>
-            )}
-          </div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Weight (lbs)</label>
+          <input
+            type="number"
+            value={weight}
+            onChange={e => setWeight(Number(e.target.value))}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
        </div>
-
-        {/* Preferred Cuts */}
        <div>
-          <label className="block text-sm font-medium text-stone-600 mb-1">Preferred Cuts</label>
-          <div className="flex gap-2 mb-2">
-            <input
-              type="text"
-              value={cutInput}
-              onChange={e => setCutInput(e.target.value)}
-              onKeyDown={handleCutKey}
-              placeholder="Type a cut name and press Enter"
-              className="flex-1 border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
-            />
-            <button
-              type="button"
-              onClick={addCut}
-              aria-label="Add"
-              className="px-3 py-2 border border border-stone-200 rounded-lg text-sm text-stone-600 hover:bg-stone-50"
-            >
-              <Plus size={14} />
-            </button>
-          </div>
-          <div className="flex flex-wrap gap-1">
-            {preferredCuts.map(cut => (
-              <span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
-                {cut}
-                <button type="button" onClick={() => removeCut(cut)} className="hover:text-red-500">
-                  <X size={10} />
-                </button>
-              </span>
-            ))}
-            {preferredCuts.length === 0 && <span className="text-xs text-stone-400">None added yet.</span>}
-          </div>
+          <label className="block text-sm font-medium text-stone-600 mb-1">Notes</label>
+          <textarea
+            value={notes}
+            onChange={e => setNotes(e.target.value)}
+            rows={3}
+            className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-(--color-accent)"
+          />
        </div>
-
        <div className="flex gap-2 pt-2">
          <button
            type="button"
@@ -320,4 +84,4 @@ export function PetForm({ pet, onSave, onCancel }: Props) {
      </form>
    </div>
  );
-}
+}
@@ -1,7 +1,16 @@
 import { useState, useEffect } from "react";
-import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2, Star } from "lucide-react";
+import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2 } from "lucide-react";
 import { PetForm } from "./PetForm.js";
-import type { Pet } from "@groombook/types";
+
+interface Pet {
+  id: string;
+  name: string;
+  breed: string;
+  weight: number;
+  birthDate: string;
+  photoUrl: string | null;
+  notes: string | null;
+}

 interface Appointment {
  id: string;
@@ -60,14 +69,14 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
          throw new Error("Failed to load appointments");
        }

-        const petsData: Pet[] = await petsRes.json();
+        const petsData = await petsRes.json();
        const apptsData: AppointmentsResponse = await apptsRes.json();

        setPets(petsData);
        setAppointments(apptsData);

        if (petsData.length > 0 && !selectedPetId) {
-          setSelectedPetId(petsData[0]?.id ?? "");
+          setSelectedPetId(petsData[0].id);
        }
      } catch (e) {
        setError(e instanceof Error ? e.message : "Failed to load data");
@@ -91,8 +100,10 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
  if (editingPet) {
    return (
      <PetForm
-        pet={editingPet}
-        onSave={handlePetSave}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pet={editingPet as any}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onSave={handlePetSave as any}
        onCancel={() => setEditingPetId(null)}
      />
    );
@@ -134,10 +145,10 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
              p.id === selectedPetId ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 bg-white hover:border-stone-300"
            }`}
          >
-            <span className="text-2xl">{p.photoKey ? "🐾" : "🐾"}</span>
+            <span className="text-2xl">{p.photoUrl ? "🐾" : "🐾"}</span>
            <div className="text-left">
              <p className="font-medium text-stone-800 text-sm">{p.name}</p>
-              <p className="text-xs text-stone-500">{p.breed ?? "Unknown breed"}</p>
+              <p className="text-xs text-stone-500">{p.breed}</p>
            </div>
          </button>
        ))}
@@ -148,17 +159,17 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
          <div className="flex items-center gap-4">
            <div className="w-20 h-20 rounded-2xl bg-(--color-accent-light) flex items-center justify-center text-4xl overflow-hidden">
-              {selectedPet.photoKey ? (
-                <span>🐾</span>
+              {selectedPet.photoUrl ? (
+                <img src={selectedPet.photoUrl} alt={selectedPet.name} className="w-full h-full object-cover" />
              ) : (
                <span>🐾</span>
              )}
            </div>
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-stone-800">{selectedPet.name}</h2>
-              <p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {selectedPet.weightKg ? `${selectedPet.weightKg} kg` : "Unknown weight"}</p>
+              <p className="text-stone-500 text-sm">{selectedPet.breed} · {selectedPet.weight} lbs</p>
              <p className="text-stone-400 text-xs mt-0.5">
-                Born {selectedPet.dateOfBirth ? new Date(selectedPet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
+                Born {selectedPet.birthDate ? new Date(selectedPet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
              </p>
            </div>
            {!readOnly && (
@@ -202,7 +213,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
  );
 }

-function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center py-2.5 border-b border-stone-100 last:border-0">
      <span className="text-sm text-stone-500 sm:w-40 shrink-0">{label}</span>
@@ -211,59 +222,14 @@ function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
  );
 }

-function SeverityBadge({ severity }: { severity: "low" | "medium" | "high" }) {
-  const classes = {
-    low: "bg-green-100 text-green-700",
-    medium: "bg-amber-100 text-amber-700",
-    high: "bg-red-100 text-red-700",
-  };
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${classes[severity]}`}>
-      {severity.charAt(0).toUpperCase() + severity.slice(1)}
-    </span>
-  );
-}
-
 function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
-  const score = pet.temperamentScore;
-  const flags = pet.temperamentFlags ?? [];
-
  return (
    <div>
      <InfoRow label="Name" value={pet.name} />
      <InfoRow label="Breed" value={pet.breed || "Unknown"} />
-      <InfoRow label="Weight" value={pet.weightKg ? `${pet.weightKg} kg` : "Unknown"} />
-      <InfoRow label="Date of Birth" value={pet.dateOfBirth ? new Date(pet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
-
-      {/* Temperament (staff-set, read-only) */}
-      {(score != null || flags.length > 0) && (
-        <div className="py-2.5 border-b border-stone-100">
-          <span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Temperament</span>
-          <div className="flex flex-col gap-1.5">
-            {score != null && (
-              <div className="flex items-center gap-1">
-                {[1, 2, 3, 4, 5].map(s => (
-                  <Star
-                    key={s}
-                    size={14}
-                    className={s <= score ? "text-amber-400 fill-amber-400" : "text-stone-300"}
-                  />
-                ))}
-                <span className="ml-1 text-xs text-stone-500">({score}/5 · staff-set)</span>
-              </div>
-            )}
-            {flags.length > 0 && (
-              <div className="flex flex-wrap gap-1">
-                {flags.map(flag => (
-                  <span key={flag} className="inline-flex items-center px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 text-xs">{flag}</span>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      <InfoRow label="Notes" value={pet.healthAlerts || "None"} />
+      <InfoRow label="Weight" value={`${pet.weight} lbs`} />
+      <InfoRow label="Date of Birth" value={pet.birthDate ? new Date(pet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"} />
+      <InfoRow label="Notes" value={pet.notes || "None"} />
      {!readOnly && (
        <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
          Upload Photo
@@ -274,30 +240,12 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 }

 function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
-  const alerts = pet.medicalAlerts ?? [];
-
  return (
-    <div className="space-y-3">
-      {alerts.length === 0 ? (
-        <p className="text-sm text-stone-400">No medical alerts on file.</p>
-      ) : (
-        alerts.map(alert => (
-          <div key={alert.id} className="flex items-start gap-3 py-2 border-b border-stone-100 last:border-0">
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-stone-800">{alert.type}</span>
-                <SeverityBadge severity={alert.severity} />
-              </div>
-              {alert.description && (
-                <p className="text-sm text-stone-500">{alert.description}</p>
-              )}
-            </div>
-          </div>
-        ))
-      )}
+    <div>
+      <InfoRow label="Notes" value={pet.notes || "No medical notes on file"} />
      {!readOnly && (
        <p className="mt-3 text-xs text-stone-400">
-          Changes to medical alerts will be flagged for staff review.
+          Changes to medical notes will be flagged for staff review.
        </p>
      )}
    </div>
@@ -305,29 +253,9 @@ function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
 }

 function GroomingTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
-  const coatType = pet.coatType;
-  const cuts = pet.preferredCuts ?? [];
-
  return (
-    <div className="space-y-3">
-      {coatType && (
-        <InfoRow
-          label="Coat Type"
-          value={<span className="capitalize">{coatType}</span>}
-        />
-      )}
-      <div className="py-2.5 border-b border-stone-100">
-        <span className="text-sm text-stone-500 sm:w-40 shrink-0 block mb-1">Preferred Cuts</span>
-        <div className="flex flex-wrap gap-1">
-          {cuts.map(cut => (
-            <span key={cut} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-stone-100 text-stone-700 text-xs">
-              {cut}
-            </span>
-          ))}
-          {cuts.length === 0 && <span className="text-sm text-stone-400">None on file.</span>}
-        </div>
-      </div>
-      <InfoRow label="Grooming Notes" value={pet.groomingNotes || "None"} />
+    <div>
+      <InfoRow label="Notes" value={pet.notes || "No grooming notes on file"} />
      {!readOnly && (
        <button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
          Upload Reference Photo
@@ -367,4 +295,4 @@ function HistoryTab({ petHistory }: { petHistory: Appointment[] }) {
      )}
    </div>
  );
-}
+}