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/app/pets/page.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { listPets } from "@/modules/pets/server/queries";
+
+export default async function PetsPage() {
+  const pets = await listPets();
+  return (
+    <div className="page-content">
+      <div className="mb-6 flex items-center justify-between gap-4">
+        <h1 className="page-title mb-0">Pets</h1>
+        <Link href="/pets/new" className="btn btn-primary">
+          Add pet
+        </Link>
+      </div>
+      {pets.length === 0 ? (
+        <p className="text-sm text-[var(--ink-mute)]">No pets yet.</p>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {pets.map((pet) => (
+            <Link
+              key={pet.id}
+              href={`/pets/${pet.id}`}
+              className="card p-4 hover:bg-[var(--surface-2)]"
+            >
+              <h2 className="font-semibold">{pet.name}</h2>
+              <p className="text-sm capitalize text-[var(--ink-mute)]">
+                {[pet.species, pet.breed].filter(Boolean).join(" · ")}
+              </p>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/nav-icon.tsx

@@ -3,6 +3,7 @@ import {
   BookHeart,
   Calendar,
   Sprout,
+  PawPrint,
   CalendarDays,
   CheckSquare,
   ChevronDown,
@@ -73,6 +74,7 @@ const ICONS: Record<string, React.ComponentType<LucideProps>> = {
   filter: Filter,
   sun: Sun,
   sprout: Sprout,
+  "paw-print": PawPrint,
   mail: Mail,
   menu: Menu,
   "message-circle": MessageCircle,

src/modules/index.ts

@@ -4,6 +4,7 @@ import calendarManifest from "./calendar/manifest";
 import listsManifest from "./lists/manifest";
 import notesManifest from "./notes/manifest";
 import gardenManifest from "./garden/manifest";
+import petsManifest from "./pets/manifest";
 import bangsManifest from "./bangs/manifest";
 import journalManifest from "./journal/manifest";
 import agentManifest from "./agent/manifest";
@@ -13,6 +14,7 @@ registerModule(calendarManifest);
 registerModule(listsManifest);
 registerModule(notesManifest);
 registerModule(gardenManifest);
+registerModule(petsManifest);
 registerModule(bangsManifest);
 registerModule(journalManifest);
 registerModule(agentManifest);

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/manifest.tsx

@@ -0,0 +1,49 @@
+import { z } from "zod";
+import type { ModuleManifest } from "../_core/module";
+import { searchPets } from "./server/queries";
+
+const petsManifest: ModuleManifest = {
+  id: "pets",
+  name: "Pets",
+  nav: { href: "/pets", label: "Pets", icon: "paw-print" },
+  entities: [
+    {
+      type: "pets.pet",
+      label: { singular: "Pet", plural: "Pets" },
+      search: { search: searchPets },
+      reminder: { canRemind: true },
+      resolveUrl: (id) => `/pets/${id}`,
+      renderActivity: (entry) => {
+        const name = entry.payload?.name as string | undefined;
+        if (entry.action === "create") return `Added pet${name ? ` "${name}"` : ""}`;
+        if (entry.action === "delete") return `Removed pet${name ? ` "${name}"` : ""}`;
+        return `Updated pet${name ? ` "${name}"` : ""}`;
+      },
+    },
+  ],
+  dashboardWidgets: [
+    {
+      id: "pets.overview",
+      title: "Pets overview",
+      description: "Pet count and medical items due within 30 days.",
+      category: "Pets",
+      defaultSize: { w: 3, h: 2 },
+      minSize: { w: 2, h: 2 },
+      defaultPriority: 60,
+      configSchema: z.object({}),
+      defaultConfig: {},
+      render: () => null,
+    },
+  ],
+  quickAdds: [
+    {
+      id: "pets.add",
+      label: "Add pet",
+      icon: "paw-print",
+      url: "/pets/new",
+      createKey: "pets.pet",
+    },
+  ],
+};
+
+export default petsManifest;

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);
+}

tests/unit/pets-manifest.test.ts

@@ -0,0 +1,8 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import petsManifest from "../../src/modules/pets/manifest";
+
+test("pets manifest contributes visible navigation and a quick add action", () => {
+  assert.deepEqual(petsManifest.nav, { href: "/pets", label: "Pets", icon: "paw-print" });
+  assert.equal(petsManifest.quickAdds?.[0]?.createKey, "pets.pet");
+});