GRO-1178: client-facing enhanced pet profile editor
- PetForm: coat type dropdown, temperament display (read-only), medical alerts editor (add/remove/severity), preferred cuts tag input - PetProfiles: Medical tab shows severity badges, Grooming tab shows coat type + preferred cuts, Basic Info tab shows temperament score/flags - PetForm.test: component tests for all new interactions - Shared types updated: MedicalAlert, CoatType, AlertSeverity added Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
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 "../../../../packages/types/src/index.js";
|
||||
|
||||
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.getByPlaceholder(/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.getByPlaceholder(/type a cut name/i);
|
||||
fireEvent.change(input, { target: { value: "Teddy Bear" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: /add/i }));
|
||||
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");
|
||||
const removeBtn = puppyCutTag?.querySelector("button") ?? screen.getAllByTitle("")[0];
|
||||
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.getByPlaceholder(/type a cut name/i), { target: { value: "Puppy Cut" } });
|
||||
fireEvent.keyDown(screen.getByPlaceholder(/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.getByPlaceholder(/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 removeBtn = screen.getAllByRole("button", { name: "" })[0];
|
||||
fireEvent.click(removeBtn);
|
||||
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();
|
||||
});
|
||||
});
|
||||
+251
-37
@@ -1,6 +1,9 @@
|
||||
import { useState } from "react";
|
||||
import { X, Save } from "lucide-react";
|
||||
import type { Pet } from "../mockData.js";
|
||||
import { X, Save, Plus, Star } from "lucide-react";
|
||||
import type { Pet, MedicalAlert, CoatType, AlertSeverity } from "../../../../packages/types/src/index.js";
|
||||
|
||||
const COAT_TYPES: CoatType[] = ["double", "single", "wire", "curly", "smooth", "long", "short", "hairless"];
|
||||
const SEVERITY_OPTIONS: AlertSeverity[] = ["low", "medium", "high"];
|
||||
|
||||
interface Props {
|
||||
pet?: Pet;
|
||||
@@ -8,63 +11,274 @@ 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?.weight ?? 0);
|
||||
const [notes, setNotes] = useState(pet?.allergies ?? "");
|
||||
const [weight, setWeight] = useState(pet?.weightKg ?? 0);
|
||||
const [notes, setNotes] = useState(pet?.healthAlerts ?? "");
|
||||
const [coatType, setCoatType] = useState<CoatType | "">((pet?.coatType as CoatType) ?? "");
|
||||
const [preferredCuts, setPreferredCuts] = useState<string[]>(pet?.preferredCuts ?? []);
|
||||
const [cutInput, setCutInput] = useState("");
|
||||
const [alerts, setAlerts] = useState<Omit<MedicalAlert, "id">[]>(
|
||||
pet?.medicalAlerts?.map(({ type, description, severity }) => ({ type, description, 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;
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!pet) return;
|
||||
onSave({ ...pet, name, breed, weight, allergies: notes });
|
||||
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,
|
||||
preferredCuts,
|
||||
medicalAlerts: alerts.map((a, i) => ({ ...a, id: pet.medicalAlerts?.[i]?.id ?? crypto.randomUUID() })),
|
||||
};
|
||||
onSave(savedPet);
|
||||
}
|
||||
|
||||
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 ? "Edit Pet" : "Add Pet"}</h2>
|
||||
<h2 className="text-lg font-semibold text-stone-800">{pet?.id ? "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-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)}
|
||||
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)"
|
||||
/>
|
||||
<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 */}
|
||||
<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)"
|
||||
/>
|
||||
<label className="block text-sm font-medium text-stone-600 mb-1">Coat Type</label>
|
||||
<select
|
||||
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>
|
||||
</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>
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
{/* Preferred Cuts */}
|
||||
<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)"
|
||||
/>
|
||||
<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}
|
||||
className="px-3 py-2 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>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
@@ -84,4 +298,4 @@ export function PetForm({ pet, onSave, onCancel }: Props) {
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2 } from "lucide-react";
|
||||
import { PawPrint, Heart, Scissors, Clock, Edit3, Loader2, Star, X } from "lucide-react";
|
||||
import { PetForm } from "./PetForm.js";
|
||||
|
||||
interface Pet {
|
||||
id: string;
|
||||
name: string;
|
||||
breed: string;
|
||||
weight: number;
|
||||
birthDate: string;
|
||||
photoUrl: string | null;
|
||||
notes: string | null;
|
||||
}
|
||||
import type { Pet } from "../../../../packages/types/src/index.js";
|
||||
|
||||
interface Appointment {
|
||||
id: string;
|
||||
@@ -69,7 +60,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
throw new Error("Failed to load appointments");
|
||||
}
|
||||
|
||||
const petsData = await petsRes.json();
|
||||
const petsData: Pet[] = await petsRes.json();
|
||||
const apptsData: AppointmentsResponse = await apptsRes.json();
|
||||
|
||||
setPets(petsData);
|
||||
@@ -100,10 +91,8 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
if (editingPet) {
|
||||
return (
|
||||
<PetForm
|
||||
// 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}
|
||||
pet={editingPet}
|
||||
onSave={handlePetSave}
|
||||
onCancel={() => setEditingPetId(null)}
|
||||
/>
|
||||
);
|
||||
@@ -145,10 +134,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.photoUrl ? "🐾" : "🐾"}</span>
|
||||
<span className="text-2xl">{p.photoKey ? "🐾" : "🐾"}</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}</p>
|
||||
<p className="text-xs text-stone-500">{p.breed ?? "Unknown breed"}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@@ -159,17 +148,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.photoUrl ? (
|
||||
<img src={selectedPet.photoUrl} alt={selectedPet.name} className="w-full h-full object-cover" />
|
||||
{selectedPet.photoKey ? (
|
||||
<span>🐾</span>
|
||||
) : (
|
||||
<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} · {selectedPet.weight} lbs</p>
|
||||
<p className="text-stone-500 text-sm">{selectedPet.breed ?? "Unknown breed"} · {selectedPet.weightKg ? `${selectedPet.weightKg} kg` : "Unknown weight"}</p>
|
||||
<p className="text-stone-400 text-xs mt-0.5">
|
||||
Born {selectedPet.birthDate ? new Date(selectedPet.birthDate).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
|
||||
Born {selectedPet.dateOfBirth ? new Date(selectedPet.dateOfBirth).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
|
||||
</p>
|
||||
</div>
|
||||
{!readOnly && (
|
||||
@@ -213,7 +202,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
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">
|
||||
<span className="text-sm text-stone-500 sm:w-40 shrink-0">{label}</span>
|
||||
@@ -222,14 +211,59 @@ function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
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.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"} />
|
||||
<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"} />
|
||||
{!readOnly && (
|
||||
<button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
|
||||
Upload Photo
|
||||
@@ -240,12 +274,30 @@ function BasicInfoTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
}
|
||||
|
||||
function MedicalTab({ pet, readOnly }: { pet: Pet; readOnly: boolean }) {
|
||||
const alerts = pet.medicalAlerts ?? [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<InfoRow label="Notes" value={pet.notes || "No medical notes on file"} />
|
||||
<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>
|
||||
))
|
||||
)}
|
||||
{!readOnly && (
|
||||
<p className="mt-3 text-xs text-stone-400">
|
||||
Changes to medical notes will be flagged for staff review.
|
||||
Changes to medical alerts will be flagged for staff review.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -253,9 +305,29 @@ 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>
|
||||
<InfoRow label="Notes" value={pet.notes || "No grooming notes on file"} />
|
||||
<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"} />
|
||||
{!readOnly && (
|
||||
<button className="mt-4 text-sm text-(--color-accent-dark) font-medium hover:underline">
|
||||
Upload Reference Photo
|
||||
@@ -295,4 +367,4 @@ function HistoryTab({ petHistory }: { petHistory: Appointment[] }) {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user