From 889e1e26ae1e769bf117ede4f2ed1a7ebf33d256 Mon Sep 17 00:00:00 2001
From: Flea Flicker <flea@groombook.dev>
Date: Thu, 21 May 2026 14:44:55 +0000
Subject: [PATCH] feat(GRO-1173): add sizeCategory and coatType dropdowns to
 admin pet form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PetForm interface: add sizeCategory and coatType fields
- EMPTY_PET: initialise new fields as empty strings
- openEditPet: pre-populate from pet.petSizeCategory and pet.coatType
- submitPet body: include petSizeCategory and coatType in POST/PATCH
- Pet form UI: add Size Category and Coat Type dropdowns after Breed field
  - Size: Small / Medium / Large / X-Large (maps to enum values)
  - Coat: Smooth / Double / Curly / Wire / Long / Hairless (maps to CoatType union)
  - Both optional — blank "Not set" option matches API optional semantics

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 src/pages/Clients.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/pages/Clients.tsx b/src/pages/Clients.tsx
index af4b47b..463d3e5 100644
--- a/src/pages/Clients.tsx
+++ b/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>