packages/types/src/index.ts

@@ -34,6 +34,10 @@ export interface Pet {
   breed: string | null;
   weightKg: number | null;
   dateOfBirth: string | null;
+  /** Portal-shaped serialization of weightKg (GET/PATCH /api/portal/pets). */
+  weight?: string | number | null;
+  /** Portal-shaped serialization of dateOfBirth (GET/PATCH /api/portal/pets). */
+  birthDate?: string | null;
   healthAlerts: string | null;
   groomingNotes: string | null;
   cutStyle: string | null;

src/__tests__/PetForm.test.tsx

@@ -154,4 +154,12 @@ describe("PetForm", () => {
     expect(screen.getByText("Anxious")).toBeTruthy();
     expect(screen.getByText("Good with kids")).toBeTruthy();
   });
+
+  // ── Weight pre-fill from portal `weight` key (GRO-2207) ───────────────────────
+
+  it("pre-fills weight from the portal `weight` key when weightKg is absent", () => {
+    const portalPet: Pet = { ...BASE_PET, weightKg: null, weight: "12.50" };
+    render(<PetForm pet={portalPet} onSave={onSave} onCancel={onCancel} />);
+    expect(screen.getByDisplayValue(12.5)).toBeTruthy();
+  });
 });

src/__tests__/PetProfiles.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BasicInfoTab, formatSizeCategory } from "../portal/sections/PetProfiles.js";
+import type { Pet } from "@groombook/types";
+
+// The portal endpoint (GET /api/portal/pets) serializes DB columns under
+// portal-shaped keys: weightKg→weight, dateOfBirth→birthDate. The read view
+// must surface those keys (GRO-2207), not the raw staff-side weightKg/dateOfBirth.
+const PORTAL_PET: Pet = {
+  id: "pet-1",
+  clientId: "client-1",
+  name: "Pup Alpha",
+  species: "dog",
+  breed: "Poodle",
+  // Staff-shaped keys intentionally null — only the portal keys are populated,
+  // proving the read view reads `weight`/`birthDate`.
+  weightKg: null,
+  dateOfBirth: null,
+  weight: "12.50",
+  birthDate: "2022-03-10T00:00:00.000Z",
+  petSizeCategory: "extra_large",
+  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("BasicInfoTab read view (GRO-2207)", () => {
+  it("renders Weight from the portal `weight` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("12.50 kg")).toBeInTheDocument();
+  });
+
+  it("renders Date of Birth from the portal `birthDate` key", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("March 10, 2022")).toBeInTheDocument();
+  });
+
+  it("renders Size Category formatted from petSizeCategory", () => {
+    render(<BasicInfoTab pet={PORTAL_PET} readOnly />);
+    expect(screen.getByText("Size Category")).toBeInTheDocument();
+    expect(screen.getByText("Extra Large")).toBeInTheDocument();
+  });
+
+  it("falls back to staff-shaped keys when portal keys are absent", () => {
+    const staffShaped: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: 25, dateOfBirth: "2020-01-05T00:00:00.000Z" };
+    render(<BasicInfoTab pet={staffShaped} readOnly />);
+    expect(screen.getByText("25 kg")).toBeInTheDocument();
+    expect(screen.getByText("January 5, 2020")).toBeInTheDocument();
+  });
+
+  it("shows Unknown for missing weight/DoB and size", () => {
+    const empty: Pet = { ...PORTAL_PET, weight: null, birthDate: null, weightKg: null, dateOfBirth: null, petSizeCategory: null };
+    render(<BasicInfoTab pet={empty} readOnly />);
+    // Weight, Date of Birth and Size Category rows all read "Unknown".
+    expect(screen.getAllByText("Unknown").length).toBeGreaterThanOrEqual(3);
+  });
+});
+
+describe("formatSizeCategory", () => {
+  it("title-cases each underscore-separated segment", () => {
+    expect(formatSizeCategory("extra_large")).toBe("Extra Large");
+    expect(formatSizeCategory("small")).toBe("Small");
+    expect(formatSizeCategory("medium")).toBe("Medium");
+    expect(formatSizeCategory("large")).toBe("Large");
+  });
+
+  it("returns Unknown for null/undefined/empty", () => {
+    expect(formatSizeCategory(null)).toBe("Unknown");
+    expect(formatSizeCategory(undefined)).toBe("Unknown");
+    expect(formatSizeCategory("")).toBe("Unknown");
+  });
+});

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) && (