Promote dev → uat: GRO-2213 portal booking preferredTime HH:MM:SS fix (#52)

src/portal/sections/Appointments.tsx

@@ -110,6 +110,41 @@ export function parseTimeTo24Hour(time: string | null | undefined): string {
   return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
 }
 
+// A booking slot is the canonical UTC ISO instant returned by
+// `/api/book/availability` (e.g. "2026-06-09T10:00:00.000Z" is the 10:00 UTC
+// business slot — see api `src/lib/slots.ts`, which builds them with
+// `setUTCHours`). Display label and submit payload both derive from the slot via
+// these helpers so they never desync. Always format/extract in UTC: slots are
+// generated as UTC business hours, so a browser-local conversion would mislabel
+// the slot and diverge from the stored Postgres `time` column.
+export function formatSlotLabel(slot: string): string {
+  const d = new Date(slot);
+  // Non-ISO input (e.g. an already-formatted "10:00 AM" label) — show as-is.
+  if (Number.isNaN(d.getTime())) return slot;
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+    timeZone: 'UTC',
+  }).format(d);
+}
+
+// Extracts the UTC `HH:MM:SS` time component the api stores in the Postgres
+// `time` column. The api inserts this verbatim, so a full ISO datetime here is
+// an `invalid input syntax for type time` 500 (GRO-2211).
+export function slotToTime(slot: string): string {
+  if (/^\d{2}:\d{2}:\d{2}$/.test(slot)) return slot; // already HH:MM:SS
+  const d = new Date(slot);
+  if (!Number.isNaN(d.getTime())) {
+    const hh = String(d.getUTCHours()).padStart(2, '0');
+    const mm = String(d.getUTCMinutes()).padStart(2, '0');
+    const ss = String(d.getUTCSeconds()).padStart(2, '0');
+    return `${hh}:${mm}:${ss}`;
+  }
+  // "10:00 AM"-style label fallback.
+  return parseTimeTo24Hour(slot);
+}
+
 export function isUpcoming(appt: Appointment): boolean {
   const now = new Date();
   // Prefer the absolute ISO `startTime` from the API; fall back to the
@@ -860,7 +895,7 @@ interface BookingFlowProps {
   sessionId: string | null;
 }
 
-function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
+export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
   const [step, setStep] = useState(1);
   const [pets, setPets] = useState<Pet[]>([]);
   const [services, setServices] = useState<Service[]>([]);
@@ -972,7 +1007,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
           addOnIds: selectedAddOns.map((s) => s.id),
           groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
           preferredDate: selectedDate,
-          preferredTime: selectedTime,
+          preferredTime: slotToTime(selectedTime),
           notes: notes || undefined,
           recurring: recurring || undefined,
         }),
@@ -1035,7 +1070,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                 Appointment Requested!
               </h3>
               <p className="text-sm text-stone-500 mb-4">
-                {selectedPet?.name} on {formatDate(selectedDate)} at {selectedTime}
+                {selectedPet?.name} on {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
               </p>
               <button
                 onClick={onClose}
@@ -1255,7 +1290,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                               : 'border-stone-200 hover:border-stone-300'
                           }`}
                         >
-                          {time}
+                          {formatSlotLabel(time)}
                         </button>
                       ))}
                     </div>
@@ -1325,7 +1360,7 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                     <div className="flex justify-between">
                       <span className="text-stone-500">Date & Time</span>
                       <span className="font-medium">
-                        {formatDate(selectedDate)} at {selectedTime}
+                        {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
                       </span>
                     </div>
                     {recurring && (

src/portal/sections/PetForm.tsx

@@ -22,7 +22,7 @@ function newAlert(): Omit<MedicalAlert, "id"> {
 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);
+  const [weight, setWeight] = useState(Number(pet?.weight ?? 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 ?? "");

src/portal/sections/PetProfiles.tsx

@@ -176,9 +176,9 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
             </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 ?? "Unknown breed"} · {(() => { const w = selectedPet.weight ?? selectedPet.weightKg; return w != null && w !== "" ? `${w} kg` : "Unknown weight"; })()}</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 {(() => { const d = selectedPet.birthDate ?? selectedPet.dateOfBirth; return d ? new Date(d).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"; })()}
               </p>
             </div>
             {!readOnly && (
@@ -222,6 +222,14 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
   );
 }
 
+export function formatSizeCategory(size?: string | null): string {
+  if (!size) return "Unknown";
+  return size
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
     <div className="flex flex-col sm:flex-row sm:items-center py-2.5 border-b border-stone-100 last:border-0">
@@ -244,7 +252,7 @@ function SeverityBadge({ severity }: { severity: "low" | "medium" | "high" }) {
   );
 }
 
-function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
+export function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
   const score = pet.temperamentScore;
   const flags = pet.temperamentFlags ?? [];
 
@@ -252,8 +260,9 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
     <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"} />
+      <InfoRow label="Weight" value={(() => { const w = pet.weight ?? pet.weightKg; return w != null && w !== "" ? `${w} kg` : "Unknown"; })()} />
+      <InfoRow label="Date of Birth" value={(() => { const d = pet.birthDate ?? pet.dateOfBirth; return d ? new Date(d).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"; })()} />
+      <InfoRow label="Size Category" value={formatSizeCategory(pet.petSizeCategory)} />
 
       {/* Temperament (staff-set, read-only) */}
       {(score != null || flags.length > 0) && (