feat(pets): add profile and medical records

src/app/pets/[id]/edit/page.tsx

@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { DetailBackLink } from "@/components/detail-back-link";
+import { PetForm } from "@/modules/pets/components/pet-form";
+import { getPet } from "@/modules/pets/server/queries";
+
+export default async function EditPetPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const pet = await getPet(id);
+  if (!pet) notFound();
+  return (
+    <div className="page-content max-w-xl">
+      <DetailBackLink href={`/pets/${pet.id}`} label={pet.name} className="mb-3" />
+      <h1 className="page-title">Edit pet</h1>
+      <PetForm pet={pet} />
+    </div>
+  );
+}

src/app/pets/[id]/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { DetailBackLink } from "@/components/detail-back-link";
+import { getPet } from "@/modules/pets/server/queries";
+import { MedicalRecords } from "@/modules/pets/components/medical-records";
+
+export default async function PetPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const pet = await getPet(id);
+  if (!pet) notFound();
+  return (
+    <div className="page-content max-w-xl">
+      <DetailBackLink href="/pets" label="Pets" className="mb-3" />
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="page-title mb-1">{pet.name}</h1>
+          <p className="capitalize text-[var(--ink-mute)]">
+            {[pet.species, pet.breed].filter(Boolean).join(" · ")}
+          </p>
+        </div>
+        <Link href={`/pets/${pet.id}/edit`} className="btn btn-ghost">
+          Edit
+        </Link>
+      </div>
+      <section className="card p-4">
+        <h2 className="mb-2 font-semibold">Profile</h2>
+        {pet.birthDate && <p>Born {pet.birthDate}</p>}
+        {pet.notes && <p className="whitespace-pre-wrap">{pet.notes}</p>}
+        <MedicalRecords pet={pet} />
+      </section>
+    </div>
+  );
+}

src/app/pets/new/page.tsx

@@ -0,0 +1,12 @@
+import { DetailBackLink } from "@/components/detail-back-link";
+import { PetForm } from "@/modules/pets/components/pet-form";
+
+export default function NewPetPage() {
+  return (
+    <div className="page-content max-w-xl">
+      <DetailBackLink href="/pets" label="Pets" className="mb-3" />
+      <h1 className="page-title">Add pet</h1>
+      <PetForm />
+    </div>
+  );
+}

src/modules/pets/components/medical-records.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useTransition } from "react";
+import type { PetDetailDto } from "../server/queries";
+import { createAppointment, createPrescription, createVaccination } from "../server/actions";
+
+export function MedicalRecords({ pet }: { pet: PetDetailDto }) {
+  const [pending, startTransition] = useTransition();
+  function add(form: HTMLFormElement, action: () => Promise<unknown>) {
+    startTransition(async () => {
+      await action();
+      form.reset();
+      location.reload();
+    });
+  }
+  return (
+    <div className="mt-6 grid gap-4">
+      <section className="card p-4">
+        <h2 className="mb-3 font-semibold">Appointments</h2>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const data = new FormData(form);
+            add(form, () =>
+              createAppointment({
+                petId: pet.id,
+                title: String(data.get("title")),
+                appointmentAt: String(data.get("appointmentAt")),
+                clinic: String(data.get("clinic")) || null,
+                reminderOffsets: [30],
+              }),
+            );
+          }}
+          className="flex flex-wrap gap-2"
+        >
+          <input name="title" className="input" placeholder="Appointment" required />
+          <input name="appointmentAt" className="input" type="datetime-local" required />
+          <input name="clinic" className="input" placeholder="Clinic" />
+          <button className="btn btn-primary" disabled={pending}>
+            Add appointment
+          </button>
+        </form>
+        <ul className="mt-3 space-y-1">
+          {pet.appointments.map((item) => (
+            <li key={item.id}>
+              {item.title} — {new Date(item.appointmentAt).toLocaleString()}
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section className="card p-4">
+        <h2 className="mb-3 font-semibold">Vaccinations</h2>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const data = new FormData(form);
+            add(form, () =>
+              createVaccination({
+                petId: pet.id,
+                name: String(data.get("name")),
+                administeredOn: String(data.get("administeredOn")),
+                dueOn: String(data.get("dueOn")) || null,
+              }),
+            );
+          }}
+          className="flex flex-wrap gap-2"
+        >
+          <input name="name" className="input" placeholder="Vaccination" required />
+          <input name="administeredOn" className="input" type="date" required />
+          <input name="dueOn" className="input" type="date" />
+          <button className="btn btn-primary" disabled={pending}>
+            Add vaccination
+          </button>
+        </form>
+        <ul className="mt-3 space-y-1">
+          {pet.vaccinations.map((item) => (
+            <li key={item.id}>
+              {item.name} — {item.administeredOn}
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section className="card p-4">
+        <h2 className="mb-3 font-semibold">Prescriptions</h2>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const data = new FormData(form);
+            add(form, () =>
+              createPrescription({
+                petId: pet.id,
+                medication: String(data.get("medication")),
+                dosage: String(data.get("dosage")),
+                expiresOn: String(data.get("expiresOn")) || null,
+                active: true,
+              }),
+            );
+          }}
+          className="flex flex-wrap gap-2"
+        >
+          <input name="medication" className="input" placeholder="Medication" required />
+          <input name="dosage" className="input" placeholder="Dosage" required />
+          <input name="expiresOn" className="input" type="date" />
+          <button className="btn btn-primary" disabled={pending}>
+            Add prescription
+          </button>
+        </form>
+        <ul className="mt-3 space-y-1">
+          {pet.prescriptions.map((item) => (
+            <li key={item.id}>
+              {item.medication} — {item.dosage}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}

src/modules/pets/components/pet-form.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import type { PetDetailDto } from "../server/queries";
+import { createPet, updatePet } from "../server/actions";
+import { Input } from "@/components/ui/input";
+
+export function PetForm({ pet }: { pet?: PetDetailDto }) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const input = {
+      name: String(data.get("name") ?? ""),
+      species: String(data.get("species") ?? ""),
+      breed: String(data.get("breed") ?? "") || null,
+      birthDate: String(data.get("birthDate") ?? "") || null,
+      notes: String(data.get("notes") ?? "") || null,
+      images: pet?.images ?? [],
+      primaryImageUrl: pet?.primaryImageUrl ?? null,
+    };
+    setError(null);
+    startTransition(async () => {
+      try {
+        if (pet) {
+          await updatePet({ id: pet.id, ...input });
+          router.push(`/pets/${pet.id}`);
+        } else {
+          const created = await createPet(input);
+          router.push(`/pets/${created.id}`);
+        }
+        router.refresh();
+      } catch {
+        setError("Could not save pet.");
+      }
+    });
+  }
+
+  return (
+    <form onSubmit={submit} className="flex max-w-xl flex-col gap-4">
+      <label className="flex flex-col gap-1 text-sm font-medium">
+        Name
+        <Input name="name" required maxLength={120} defaultValue={pet?.name} />
+      </label>
+      <label className="flex flex-col gap-1 text-sm font-medium">
+        Species
+        <Input name="species" required maxLength={80} defaultValue={pet?.species} />
+      </label>
+      <label className="flex flex-col gap-1 text-sm font-medium">
+        Breed
+        <Input name="breed" maxLength={120} defaultValue={pet?.breed ?? ""} />
+      </label>
+      <label className="flex flex-col gap-1 text-sm font-medium">
+        Birth date
+        <Input name="birthDate" type="date" defaultValue={pet?.birthDate ?? ""} />
+      </label>
+      <label className="flex flex-col gap-1 text-sm font-medium">
+        Notes
+        <textarea
+          name="notes"
+          defaultValue={pet?.notes ?? ""}
+          className="input min-h-24"
+          maxLength={4000}
+        />
+      </label>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <div className="flex justify-end gap-2">
+        <button type="button" className="btn btn-ghost" onClick={() => router.back()}>
+          Cancel
+        </button>
+        <button type="submit" className="btn btn-primary" disabled={isPending}>
+          {isPending ? "Saving…" : pet ? "Save" : "Create"}
+        </button>
+      </div>
+    </form>
+  );
+}

src/modules/pets/server/actions.ts

@@ -196,6 +196,33 @@ export async function deleteAppointmentForScope(scope: Scope, input: { id: strin
   await db.delete(petAppointments).where(eq(petAppointments.id, id));
 }
 
+export async function createAppointment(input: z.input<typeof appointmentInput>) {
+  const { household, user } = await getCurrentSession();
+  const row = await createAppointmentForScope(
+    { householdId: household.id, userId: user.id },
+    input,
+  );
+  revalidatePet(row.petId);
+  return row;
+}
+export async function updateAppointment(
+  input: { id: string } & z.input<typeof appointmentUpdateInput>,
+) {
+  const { household, user } = await getCurrentSession();
+  const row = await updateAppointmentForScope(
+    { householdId: household.id, userId: user.id },
+    input,
+  );
+  revalidatePet(row.petId);
+  return row;
+}
+export async function deleteAppointment(input: { id: string }) {
+  const { household, user } = await getCurrentSession();
+  const row = await requireAppointment({ householdId: household.id, userId: user.id }, input.id);
+  await deleteAppointmentForScope({ householdId: household.id, userId: user.id }, input);
+  revalidatePet(row.petId);
+}
+
 export async function createVaccinationForScope(
   scope: Scope,
   input: z.input<typeof vaccinationInput>,
@@ -258,6 +285,22 @@ export async function deleteVaccinationForScope(scope: Scope, input: { id: strin
   await db.delete(petVaccinations).where(eq(petVaccinations.id, id));
 }
 
+export async function createVaccination(input: z.input<typeof vaccinationInput>) {
+  const { household, user } = await getCurrentSession();
+  const row = await createVaccinationForScope(
+    { householdId: household.id, userId: user.id },
+    input,
+  );
+  revalidatePet(row.petId);
+  return row;
+}
+export async function deleteVaccination(input: { id: string }) {
+  const { household, user } = await getCurrentSession();
+  const row = await requireVaccination({ householdId: household.id, userId: user.id }, input.id);
+  await deleteVaccinationForScope({ householdId: household.id, userId: user.id }, input);
+  revalidatePet(row.petId);
+}
+
 export async function createPrescriptionForScope(
   scope: Scope,
   input: z.input<typeof prescriptionInput>,
@@ -320,3 +363,19 @@ export async function deletePrescriptionForScope(scope: Scope, input: { id: stri
   await cancelReminder("pets.prescription", id);
   await db.delete(petPrescriptions).where(eq(petPrescriptions.id, id));
 }
+
+export async function createPrescription(input: z.input<typeof prescriptionInput>) {
+  const { household, user } = await getCurrentSession();
+  const row = await createPrescriptionForScope(
+    { householdId: household.id, userId: user.id },
+    input,
+  );
+  revalidatePet(row.petId);
+  return row;
+}
+export async function deletePrescription(input: { id: string }) {
+  const { household, user } = await getCurrentSession();
+  const row = await requirePrescription({ householdId: household.id, userId: user.id }, input.id);
+  await deletePrescriptionForScope({ householdId: household.id, userId: user.id }, input);
+  revalidatePet(row.petId);
+}