From defbf589ac1581c1c8bca4baf053a1bd00ec9596 Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Sun, 19 Jul 2026 12:00:56 -0400
Subject: [PATCH 1/7] feat(user-actions): add Manage Children button and modal
 to user actions cell

---
 .../children/child-detail-dialog.tsx          | 370 ++++++++++++++++++
 .../children/create-child-dialog.tsx          | 349 +++++++++++++++++
 .../users/_components/children/dob-field.tsx  |  90 +++++
 .../children/emergency-contact-dialog.tsx     | 158 ++++++++
 .../children/manage-children-modal.tsx        | 194 +++++++++
 .../users/_components/user-actions-cell.tsx   |  23 +-
 app/(authenticated)/users/children-actions.ts | 227 +++++++++++
 app/(authenticated)/users/children-queries.ts |  65 +++
 app/(authenticated)/users/children-schema.ts  |  32 ++
 9 files changed, 1507 insertions(+), 1 deletion(-)
 create mode 100644 app/(authenticated)/users/_components/children/child-detail-dialog.tsx
 create mode 100644 app/(authenticated)/users/_components/children/create-child-dialog.tsx
 create mode 100644 app/(authenticated)/users/_components/children/dob-field.tsx
 create mode 100644 app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
 create mode 100644 app/(authenticated)/users/_components/children/manage-children-modal.tsx
 create mode 100644 app/(authenticated)/users/children-actions.ts
 create mode 100644 app/(authenticated)/users/children-queries.ts
 create mode 100644 app/(authenticated)/users/children-schema.ts

diff --git a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
new file mode 100644
index 0000000..9560fda
--- /dev/null
+++ b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
@@ -0,0 +1,370 @@
+"use client";
+
+import { useActionState, useCallback, useState } from "react";
+import { ChevronDown, Loader2, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import {
+   updateChildAdmin,
+   type ChildActionState,
+} from "@/app/(authenticated)/users/children-actions";
+import type { ChildView } from "@/app/(authenticated)/users/children-queries";
+
+import { DobField } from "./dob-field";
+import {
+   EmergencyContactDialog,
+   type DraftEmergencyContact,
+} from "./emergency-contact-dialog";
+
+function FieldError({ errors }: { errors?: string[] }) {
+   if (!errors?.length) return null;
+   return <p className="text-sm text-destructive">{errors[0]}</p>;
+}
+
+function toDraftContacts(child: ChildView): DraftEmergencyContact[] {
+   return child.emergencyContacts.map((c) => ({
+      id: c.id,
+      full_name: c.fullName,
+      email_address: c.emailAddress,
+      phone_number: c.phoneNumber,
+      relationship: c.relationship,
+   }));
+}
+
+function ChildEditForm({
+   child,
+   parentId,
+   onClose,
+   onSuccess,
+}: {
+   child: ChildView;
+   parentId: string;
+   onClose: () => void;
+   onSuccess?: () => void;
+}) {
+   const [gender, setGender] = useState<string>(child.gender);
+   const [dob, setDob] = useState(child.dob);
+   const [emergencyContacts, setEmergencyContacts] = useState(() =>
+      toDraftContacts(child),
+   );
+   const [ecSectionOpen, setEcSectionOpen] = useState(true);
+   const [addContactOpen, setAddContactOpen] = useState(false);
+
+   const boundFormAction = useCallback(
+      async (prev: ChildActionState, formData: FormData) => {
+         if (emergencyContacts.length === 0) {
+            return {
+               errors: {
+                  emergency_contacts: ["Add at least one emergency contact"],
+               },
+            };
+         }
+         formData.set("child_id", child.id);
+         formData.set("parent_id", parentId);
+         formData.set(
+            "emergency_contacts",
+            JSON.stringify(
+               emergencyContacts.map(
+                  ({
+                     full_name,
+                     email_address,
+                     phone_number,
+                     relationship,
+                  }) => ({
+                     full_name,
+                     email_address,
+                     phone_number,
+                     relationship,
+                  }),
+               ),
+            ),
+         );
+         const result = await updateChildAdmin(prev, formData);
+         if (result?.message && !result.errors) {
+            toast.success(result.message);
+            onClose();
+            onSuccess?.();
+         } else if (result?.errors?._form?.[0]) {
+            toast.error(result.errors._form[0]);
+         }
+         return result;
+      },
+      [child.id, parentId, emergencyContacts, onClose, onSuccess],
+   );
+
+   const [state, formAction, pending] = useActionState<
+      ChildActionState,
+      FormData
+   >(boundFormAction, null);
+
+   function handleAddContact(contact: Omit<DraftEmergencyContact, "id">) {
+      setEmergencyContacts((prev) => [
+         ...prev,
+         { ...contact, id: crypto.randomUUID() },
+      ]);
+      setEcSectionOpen(true);
+   }
+
+   function handleRemoveContact(id: string) {
+      setEmergencyContacts((prev) => prev.filter((c) => c.id !== id));
+   }
+
+   return (
+      <>
+         <DialogContent className="flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
+            <DialogHeader className="shrink-0 border-b border-border px-6 py-4">
+               <DialogTitle>
+                  {child.firstName} {child.lastName}
+               </DialogTitle>
+               <DialogDescription>
+                  Update this child&apos;s profile and emergency contacts.
+               </DialogDescription>
+            </DialogHeader>
+
+            <form action={formAction} className="flex min-h-0 flex-1 flex-col">
+               <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
+                  {state?.errors?._form?.map((msg) => (
+                     <p key={msg} className="text-sm text-destructive">
+                        {msg}
+                     </p>
+                  ))}
+
+                  <div className="grid grid-cols-2 gap-4">
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_first_name">First name</Label>
+                        <Input
+                           id="edit_first_name"
+                           name="first_name"
+                           defaultValue={child.firstName}
+                           required
+                        />
+                        <FieldError errors={state?.errors?.first_name} />
+                     </div>
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_last_name">Last name</Label>
+                        <Input
+                           id="edit_last_name"
+                           name="last_name"
+                           defaultValue={child.lastName}
+                           required
+                        />
+                        <FieldError errors={state?.errors?.last_name} />
+                     </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_dob">Date of birth</Label>
+                        <DobField id="edit_dob" value={dob} onChange={setDob} />
+                        <FieldError errors={state?.errors?.dob} />
+                     </div>
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_gender">Gender</Label>
+                        <Select value={gender} onValueChange={setGender}>
+                           <SelectTrigger id="edit_gender" className="w-full">
+                              <SelectValue placeholder="Select gender" />
+                           </SelectTrigger>
+                           <SelectContent>
+                              <SelectItem value="male">Male</SelectItem>
+                              <SelectItem value="female">Female</SelectItem>
+                              <SelectItem value="prefer_not_to_say">
+                                 Prefer not to say
+                              </SelectItem>
+                           </SelectContent>
+                        </Select>
+                        <input type="hidden" name="gender" value={gender} />
+                        <FieldError errors={state?.errors?.gender} />
+                     </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_allergies">Allergies</Label>
+                        <Textarea
+                           id="edit_allergies"
+                           name="allergies"
+                           rows={3}
+                           className="field-sizing-fixed resize-none overflow-y-auto"
+                           defaultValue={child.allergies ?? ""}
+                        />
+                     </div>
+                     <div className="space-y-2">
+                        <Label htmlFor="edit_medical_conditions">
+                           Medical conditions
+                        </Label>
+                        <Textarea
+                           id="edit_medical_conditions"
+                           name="medical_conditions"
+                           rows={3}
+                           className="field-sizing-fixed resize-none overflow-y-auto"
+                           defaultValue={child.medicalConditions ?? ""}
+                        />
+                     </div>
+                  </div>
+
+                  <div className="space-y-2">
+                     <Label htmlFor="edit_medications">Medications</Label>
+                     <Textarea
+                        id="edit_medications"
+                        name="medications"
+                        rows={3}
+                        className="field-sizing-fixed resize-none overflow-y-auto"
+                        defaultValue={child.medications ?? ""}
+                     />
+                  </div>
+
+                  <Card className="py-0">
+                     <button
+                        type="button"
+                        className="flex w-full items-center justify-between px-4 py-3 text-left"
+                        onClick={() => setEcSectionOpen((o) => !o)}
+                     >
+                        <span className="text-sm font-medium">
+                           Emergency contacts ({emergencyContacts.length})
+                        </span>
+                        <ChevronDown
+                           className={cn(
+                              "size-4 shrink-0 text-muted-foreground transition-transform",
+                              ecSectionOpen && "rotate-180",
+                           )}
+                        />
+                     </button>
+
+                     {ecSectionOpen && (
+                        <CardContent className="space-y-3 border-t pt-3 pb-4">
+                           {emergencyContacts.length === 0 ? (
+                              <p className="text-sm text-muted-foreground">
+                                 No emergency contacts yet.
+                              </p>
+                           ) : (
+                              <ul className="space-y-2">
+                                 {emergencyContacts.map((contact) => (
+                                    <li
+                                       key={contact.id}
+                                       className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2"
+                                    >
+                                       <div className="min-w-0">
+                                          <p className="truncate text-sm font-medium">
+                                             {contact.full_name}
+                                          </p>
+                                          <p className="truncate text-xs text-muted-foreground">
+                                             {contact.relationship} ·{" "}
+                                             {contact.phone_number}
+                                          </p>
+                                       </div>
+                                       <Button
+                                          type="button"
+                                          variant="ghost"
+                                          size="icon-sm"
+                                          aria-label={`Remove ${contact.full_name}`}
+                                          onClick={() =>
+                                             handleRemoveContact(contact.id)
+                                          }
+                                       >
+                                          <Trash2 className="size-4" />
+                                       </Button>
+                                    </li>
+                                 ))}
+                              </ul>
+                           )}
+
+                           <FieldError
+                              errors={state?.errors?.emergency_contacts}
+                           />
+
+                           <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={() => setAddContactOpen(true)}
+                           >
+                              <Plus />
+                              Add contact
+                           </Button>
+                        </CardContent>
+                     )}
+                  </Card>
+               </div>
+
+               <DialogFooter className="mx-0 mb-0 mt-0 shrink-0 gap-2 border-t border-border bg-muted/50 px-6 py-4 sm:flex-row">
+                  <Button
+                     type="button"
+                     variant="outline"
+                     onClick={onClose}
+                     disabled={pending}
+                  >
+                     Cancel
+                  </Button>
+                  <Button type="submit" disabled={pending}>
+                     {pending ? (
+                        <>
+                           <Loader2 className="size-3.5 animate-spin" />
+                           Saving…
+                        </>
+                     ) : (
+                        "Save changes"
+                     )}
+                  </Button>
+               </DialogFooter>
+            </form>
+         </DialogContent>
+
+         <EmergencyContactDialog
+            open={addContactOpen}
+            onOpenChange={setAddContactOpen}
+            onAdd={handleAddContact}
+         />
+      </>
+   );
+}
+
+export function ChildDetailDialog({
+   child,
+   parentId,
+   open,
+   onOpenChange,
+   onSuccess,
+}: {
+   child: ChildView | null;
+   parentId: string;
+   open: boolean;
+   onOpenChange: (open: boolean) => void;
+   onSuccess?: () => void;
+}) {
+   if (!child) return null;
+
+   return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+         {open && (
+            <ChildEditForm
+               key={child.id}
+               child={child}
+               parentId={parentId}
+               onClose={() => onOpenChange(false)}
+               onSuccess={onSuccess}
+            />
+         )}
+      </Dialog>
+   );
+}
diff --git a/app/(authenticated)/users/_components/children/create-child-dialog.tsx b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
new file mode 100644
index 0000000..4c0fb25
--- /dev/null
+++ b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
@@ -0,0 +1,349 @@
+"use client";
+
+import { useActionState, useCallback, useState } from "react";
+import { ChevronDown, Loader2, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import {
+   createChildAdmin,
+   type ChildActionState,
+} from "@/app/(authenticated)/users/children-actions";
+
+import { DobField } from "./dob-field";
+import {
+   EmergencyContactDialog,
+   type DraftEmergencyContact,
+} from "./emergency-contact-dialog";
+
+function FieldError({ errors }: { errors?: string[] }) {
+   if (!errors?.length) return null;
+   return <p className="text-sm text-destructive">{errors[0]}</p>;
+}
+
+export function CreateChildDialog({
+   parentId,
+   open,
+   onOpenChange,
+   onSuccess,
+}: {
+   parentId: string;
+   open: boolean;
+   onOpenChange: (open: boolean) => void;
+   onSuccess?: () => void;
+}) {
+   const [formKey, setFormKey] = useState(0);
+   const [gender, setGender] = useState("");
+   const [dob, setDob] = useState("");
+   const [emergencyContacts, setEmergencyContacts] = useState<
+      DraftEmergencyContact[]
+   >([]);
+   const [ecSectionOpen, setEcSectionOpen] = useState(true);
+   const [addContactOpen, setAddContactOpen] = useState(false);
+
+   function resetForm() {
+      setGender("");
+      setDob("");
+      setEmergencyContacts([]);
+      setEcSectionOpen(true);
+      setFormKey((k) => k + 1);
+   }
+
+   function handleOpenChange(nextOpen: boolean) {
+      onOpenChange(nextOpen);
+      if (!nextOpen) resetForm();
+   }
+
+   const boundFormAction = useCallback(
+      async (prev: ChildActionState, formData: FormData) => {
+         if (emergencyContacts.length === 0) {
+            return {
+               errors: {
+                  emergency_contacts: ["Add at least one emergency contact"],
+               },
+            };
+         }
+         formData.set("parent_id", parentId);
+         formData.set(
+            "emergency_contacts",
+            JSON.stringify(
+               emergencyContacts.map(
+                  ({
+                     full_name,
+                     email_address,
+                     phone_number,
+                     relationship,
+                  }) => ({
+                     full_name,
+                     email_address,
+                     phone_number,
+                     relationship,
+                  }),
+               ),
+            ),
+         );
+         const result = await createChildAdmin(prev, formData);
+         if (result?.message && !result.errors) {
+            toast.success(result.message);
+            resetForm();
+            onOpenChange(false);
+            onSuccess?.();
+         } else if (result?.errors?._form?.[0]) {
+            toast.error(result.errors._form[0]);
+         }
+         return result;
+      },
+      [emergencyContacts, parentId, onOpenChange, onSuccess],
+   );
+
+   const [state, formAction, pending] = useActionState(boundFormAction, null);
+
+   function handleAddContact(contact: Omit<DraftEmergencyContact, "id">) {
+      setEmergencyContacts((prev) => [
+         ...prev,
+         { ...contact, id: crypto.randomUUID() },
+      ]);
+      setEcSectionOpen(true);
+   }
+
+   function handleRemoveContact(id: string) {
+      setEmergencyContacts((prev) => prev.filter((c) => c.id !== id));
+   }
+
+   return (
+      <>
+         <Dialog open={open} onOpenChange={handleOpenChange}>
+            {open && (
+               <DialogContent className="flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
+                  <DialogHeader className="shrink-0 border-b border-border px-6 py-4">
+                     <DialogTitle>Add child</DialogTitle>
+                     <DialogDescription>
+                        Create a child profile for this user.
+                     </DialogDescription>
+                  </DialogHeader>
+
+                  <form
+                     key={formKey}
+                     action={formAction}
+                     className="flex min-h-0 flex-1 flex-col"
+                  >
+                     <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
+                        {state?.errors?._form?.map((msg) => (
+                           <p key={msg} className="text-sm text-destructive">
+                              {msg}
+                           </p>
+                        ))}
+
+                        <div className="grid grid-cols-2 gap-4">
+                           <div className="space-y-2">
+                              <Label htmlFor="first_name">First name</Label>
+                              <Input
+                                 id="first_name"
+                                 name="first_name"
+                                 required
+                              />
+                              <FieldError errors={state?.errors?.first_name} />
+                           </div>
+                           <div className="space-y-2">
+                              <Label htmlFor="last_name">Last name</Label>
+                              <Input
+                                 id="last_name"
+                                 name="last_name"
+                                 required
+                              />
+                              <FieldError errors={state?.errors?.last_name} />
+                           </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                           <div className="space-y-2">
+                              <Label htmlFor="dob">Date of birth</Label>
+                              <DobField value={dob} onChange={setDob} />
+                              <FieldError errors={state?.errors?.dob} />
+                           </div>
+                           <div className="space-y-2">
+                              <Label htmlFor="gender">Gender</Label>
+                              <Select value={gender} onValueChange={setGender}>
+                                 <SelectTrigger id="gender" className="w-full">
+                                    <SelectValue placeholder="Select gender" />
+                                 </SelectTrigger>
+                                 <SelectContent>
+                                    <SelectItem value="male">Male</SelectItem>
+                                    <SelectItem value="female">
+                                       Female
+                                    </SelectItem>
+                                    <SelectItem value="prefer_not_to_say">
+                                       Prefer not to say
+                                    </SelectItem>
+                                 </SelectContent>
+                              </Select>
+                              <input
+                                 type="hidden"
+                                 name="gender"
+                                 value={gender}
+                              />
+                              <FieldError errors={state?.errors?.gender} />
+                           </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                           <div className="space-y-2">
+                              <Label htmlFor="allergies">Allergies</Label>
+                              <Textarea
+                                 id="allergies"
+                                 name="allergies"
+                                 rows={3}
+                                 className="field-sizing-fixed resize-none overflow-y-auto"
+                              />
+                           </div>
+                           <div className="space-y-2">
+                              <Label htmlFor="medical_conditions">
+                                 Medical conditions
+                              </Label>
+                              <Textarea
+                                 id="medical_conditions"
+                                 name="medical_conditions"
+                                 rows={3}
+                                 className="field-sizing-fixed resize-none overflow-y-auto"
+                              />
+                           </div>
+                        </div>
+
+                        <div className="space-y-2">
+                           <Label htmlFor="medications">Medications</Label>
+                           <Textarea
+                              id="medications"
+                              name="medications"
+                              rows={3}
+                              className="field-sizing-fixed resize-none overflow-y-auto"
+                           />
+                        </div>
+
+                        <Card className="py-0">
+                           <button
+                              type="button"
+                              className="flex w-full items-center justify-between px-4 py-3 text-left"
+                              onClick={() => setEcSectionOpen((o) => !o)}
+                           >
+                              <span className="text-sm font-medium">
+                                 Emergency contacts ({emergencyContacts.length})
+                              </span>
+                              <ChevronDown
+                                 className={cn(
+                                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                                    ecSectionOpen && "rotate-180",
+                                 )}
+                              />
+                           </button>
+
+                           {ecSectionOpen && (
+                              <CardContent className="space-y-3 border-t pt-3 pb-4">
+                                 {emergencyContacts.length === 0 ? (
+                                    <p className="text-sm text-muted-foreground">
+                                       No emergency contacts yet.
+                                    </p>
+                                 ) : (
+                                    <ul className="space-y-2">
+                                       {emergencyContacts.map((contact) => (
+                                          <li
+                                             key={contact.id}
+                                             className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2"
+                                          >
+                                             <div className="min-w-0">
+                                                <p className="truncate text-sm font-medium">
+                                                   {contact.full_name}
+                                                </p>
+                                                <p className="truncate text-xs text-muted-foreground">
+                                                   {contact.relationship} ·{" "}
+                                                   {contact.phone_number}
+                                                </p>
+                                             </div>
+                                             <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="icon-sm"
+                                                aria-label={`Remove ${contact.full_name}`}
+                                                onClick={() =>
+                                                   handleRemoveContact(
+                                                      contact.id,
+                                                   )
+                                                }
+                                             >
+                                                <Trash2 className="size-4" />
+                                             </Button>
+                                          </li>
+                                       ))}
+                                    </ul>
+                                 )}
+
+                                 <FieldError
+                                    errors={state?.errors?.emergency_contacts}
+                                 />
+
+                                 <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setAddContactOpen(true)}
+                                 >
+                                    <Plus />
+                                    Add contact
+                                 </Button>
+                              </CardContent>
+                           )}
+                        </Card>
+                     </div>
+
+                     <DialogFooter className="mx-0 mb-0 mt-0 shrink-0 gap-2 border-t border-border bg-muted/50 px-6 py-4 sm:flex-row">
+                        <Button
+                           type="button"
+                           variant="outline"
+                           onClick={() => handleOpenChange(false)}
+                           disabled={pending}
+                        >
+                           Cancel
+                        </Button>
+                        <Button type="submit" disabled={pending}>
+                           {pending ? (
+                              <>
+                                 <Loader2 className="size-3.5 animate-spin" />
+                                 Saving…
+                              </>
+                           ) : (
+                              "Create child"
+                           )}
+                        </Button>
+                     </DialogFooter>
+                  </form>
+               </DialogContent>
+            )}
+         </Dialog>
+
+         <EmergencyContactDialog
+            open={addContactOpen}
+            onOpenChange={setAddContactOpen}
+            onAdd={handleAddContact}
+         />
+      </>
+   );
+}
diff --git a/app/(authenticated)/users/_components/children/dob-field.tsx b/app/(authenticated)/users/_components/children/dob-field.tsx
new file mode 100644
index 0000000..ecc9ae3
--- /dev/null
+++ b/app/(authenticated)/users/_components/children/dob-field.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+   Popover,
+   PopoverContent,
+   PopoverTrigger,
+} from "@/components/ui/popover";
+
+export function toISODate(date: Date): string {
+   const y = date.getFullYear();
+   const m = String(date.getMonth() + 1).padStart(2, "0");
+   const d = String(date.getDate()).padStart(2, "0");
+   return `${y}-${m}-${d}`;
+}
+
+export function fromISODate(value: string | undefined): Date | undefined {
+   if (!value) return undefined;
+   if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return undefined;
+   const [y, m, d] = value.split("-").map(Number);
+   if (!y || !m || !d) return undefined;
+   const date = new Date(y, m - 1, d);
+   if (
+      date.getFullYear() !== y ||
+      date.getMonth() !== m - 1 ||
+      date.getDate() !== d
+   ) {
+      return undefined;
+   }
+   return date;
+}
+
+type DobFieldProps = {
+   id?: string;
+   value: string;
+   onChange: (value: string) => void;
+};
+
+export function DobField({ id = "dob", value, onChange }: DobFieldProps) {
+   const [open, setOpen] = useState(false);
+   const selected = fromISODate(value);
+
+   return (
+      <>
+         <ButtonGroup className="w-full">
+            <Input
+               id={id}
+               value={value}
+               placeholder="yyyy-mm-dd"
+               onChange={(e) => onChange(e.target.value)}
+               onBlur={() => {
+                  const parsed = fromISODate(value.trim());
+                  if (parsed) onChange(toISODate(parsed));
+               }}
+            />
+            <Popover open={open} onOpenChange={setOpen}>
+               <PopoverTrigger asChild>
+                  <Button
+                     type="button"
+                     variant="outline"
+                     size="icon"
+                     aria-label="Pick date"
+                  >
+                     <CalendarIcon className="size-4" />
+                  </Button>
+               </PopoverTrigger>
+               <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                     mode="single"
+                     selected={selected}
+                     onSelect={(date) => {
+                        if (!date) return;
+                        onChange(toISODate(date));
+                        setOpen(false);
+                     }}
+                     disabled={(date) => date > new Date()}
+                  />
+               </PopoverContent>
+            </Popover>
+         </ButtonGroup>
+         <input type="hidden" name="dob" value={value} />
+      </>
+   );
+}
diff --git a/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
new file mode 100644
index 0000000..4859c5e
--- /dev/null
+++ b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogFooter,
+   DialogHeader,
+   DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export type DraftEmergencyContact = {
+   id: string;
+   full_name: string;
+   email_address: string;
+   phone_number: string;
+   relationship: string;
+};
+
+type EmergencyContactDialogProps = {
+   open: boolean;
+   onOpenChange: (open: boolean) => void;
+   onAdd: (contact: Omit<DraftEmergencyContact, "id">) => void;
+};
+
+function FieldError({ errors }: { errors?: string[] }) {
+   if (!errors?.length) return null;
+   return <p className="text-sm text-destructive">{errors[0]}</p>;
+}
+
+export function EmergencyContactDialog({
+   open,
+   onOpenChange,
+   onAdd,
+}: EmergencyContactDialogProps) {
+   const [formKey, setFormKey] = useState(0);
+   const [errors, setErrors] = useState<Record<string, string[]>>({});
+
+   function handleOpenChange(nextOpen: boolean) {
+      if (nextOpen) {
+         setFormKey((k) => k + 1);
+         setErrors({});
+      }
+      onOpenChange(nextOpen);
+   }
+
+   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const data = new FormData(e.currentTarget);
+      const full_name = String(data.get("full_name") ?? "").trim();
+      const email_address = String(data.get("email_address") ?? "").trim();
+      const phone_number = String(data.get("phone_number") ?? "").replace(
+         /\D/g,
+         "",
+      );
+      const relationship = String(data.get("relationship") ?? "").trim();
+
+      const nextErrors: Record<string, string[]> = {};
+      if (!full_name) nextErrors.full_name = ["Full name is required"];
+      if (!email_address) nextErrors.email_address = ["Email is required"];
+      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email_address)) {
+         nextErrors.email_address = ["Invalid email address"];
+      }
+      if (!phone_number) nextErrors.phone_number = ["Phone number is required"];
+      if (!relationship) nextErrors.relationship = ["Relationship is required"];
+
+      if (Object.keys(nextErrors).length > 0) {
+         setErrors(nextErrors);
+         return;
+      }
+
+      onAdd({ full_name, email_address, phone_number, relationship });
+      handleOpenChange(false);
+   }
+
+   return (
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+         <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+               <DialogTitle>Add emergency contact</DialogTitle>
+               <DialogDescription>
+                  Required for every child profile.
+               </DialogDescription>
+            </DialogHeader>
+
+            <form
+               key={formKey}
+               onSubmit={handleSubmit}
+               className="flex flex-col gap-4"
+            >
+               <div className="space-y-2">
+                  <Label htmlFor="ec_dialog_name">Full name</Label>
+                  <Input id="ec_dialog_name" name="full_name" required />
+                  <FieldError errors={errors.full_name} />
+               </div>
+
+               <div className="space-y-2">
+                  <Label htmlFor="ec_dialog_email">Email</Label>
+                  <Input
+                     id="ec_dialog_email"
+                     name="email_address"
+                     type="email"
+                     required
+                  />
+                  <FieldError errors={errors.email_address} />
+               </div>
+
+               <div className="space-y-2">
+                  <Label htmlFor="ec_dialog_phone">Phone</Label>
+                  <Input
+                     id="ec_dialog_phone"
+                     name="phone_number"
+                     type="tel"
+                     inputMode="numeric"
+                     onChange={(e) => {
+                        e.target.value = e.target.value.replace(/\D/g, "");
+                     }}
+                     required
+                  />
+                  <FieldError errors={errors.phone_number} />
+               </div>
+
+               <div className="space-y-2">
+                  <Label htmlFor="ec_dialog_relationship">Relationship</Label>
+                  <Input
+                     id="ec_dialog_relationship"
+                     name="relationship"
+                     required
+                  />
+                  <FieldError errors={errors.relationship} />
+               </div>
+
+               <DialogFooter>
+                  <Button
+                     type="button"
+                     variant="outline"
+                     onClick={() => handleOpenChange(false)}
+                  >
+                     Cancel
+                  </Button>
+                  <Button type="submit">
+                     <Plus />
+                     Add contact
+                  </Button>
+               </DialogFooter>
+            </form>
+         </DialogContent>
+      </Dialog>
+   );
+}
diff --git a/app/(authenticated)/users/_components/children/manage-children-modal.tsx b/app/(authenticated)/users/_components/children/manage-children-modal.tsx
new file mode 100644
index 0000000..4f44f0a
--- /dev/null
+++ b/app/(authenticated)/users/_components/children/manage-children-modal.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Baby, Pencil, Plus } from "lucide-react";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+   Dialog,
+   DialogContent,
+   DialogDescription,
+   DialogHeader,
+   DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDate } from "@/lib/format";
+import { listChildrenForUserAdmin } from "@/app/(authenticated)/users/children-actions";
+import type { ChildView } from "@/app/(authenticated)/users/children-queries";
+
+import { ChildDetailDialog } from "./child-detail-dialog";
+import { CreateChildDialog } from "./create-child-dialog";
+
+const GENDER_LABELS: Record<string, string> = {
+   male: "Male",
+   female: "Female",
+   prefer_not_to_say: "Prefer not to say",
+};
+
+export function ManageChildrenModal({
+   parentId,
+   userName,
+   open,
+   onOpenChange,
+}: {
+   parentId: string;
+   userName: string;
+   open: boolean;
+   onOpenChange: (open: boolean) => void;
+}) {
+   const [children, setChildren] = useState<ChildView[]>([]);
+   const [loading, setLoading] = useState(false);
+   const [error, setError] = useState<string | null>(null);
+   const [createOpen, setCreateOpen] = useState(false);
+   const [editChild, setEditChild] = useState<ChildView | null>(null);
+   const [editOpen, setEditOpen] = useState(false);
+
+   const refresh = useCallback(async () => {
+      setLoading(true);
+      setError(null);
+      try {
+         const result = await listChildrenForUserAdmin(parentId);
+         if ("error" in result) {
+            setError(result.error);
+            setChildren([]);
+         } else {
+            setChildren(result);
+         }
+      } finally {
+         setLoading(false);
+      }
+   }, [parentId]);
+
+   useEffect(() => {
+      if (open) {
+         void refresh();
+      } else {
+         setCreateOpen(false);
+         setEditOpen(false);
+         setEditChild(null);
+         setError(null);
+      }
+   }, [open, refresh]);
+
+   function handleEdit(child: ChildView) {
+      setEditChild(child);
+      setEditOpen(true);
+   }
+
+   return (
+      <>
+         <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-lg">
+               <DialogHeader className="shrink-0 border-b border-border px-6 py-4">
+                  <DialogTitle className="flex items-center gap-2">
+                     <Baby className="size-4" />
+                     Children
+                  </DialogTitle>
+                  <DialogDescription>
+                     Manage children for {userName}.
+                  </DialogDescription>
+               </DialogHeader>
+
+               <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 py-4">
+                  <div className="flex items-center justify-between gap-2">
+                     <p className="text-sm text-muted-foreground">
+                        {loading
+                           ? "Loading…"
+                           : `${children.length} child${children.length === 1 ? "" : "ren"}`}
+                     </p>
+                     <Button
+                        type="button"
+                        size="sm"
+                        disabled={loading}
+                        onClick={() => setCreateOpen(true)}
+                     >
+                        <Plus />
+                        Add child
+                     </Button>
+                  </div>
+
+                  {loading ? (
+                     <div className="flex flex-col items-center justify-center gap-2 py-10 text-muted-foreground">
+                        <Spinner className="size-6" />
+                        <p className="text-xs">Loading children…</p>
+                     </div>
+                  ) : error ? (
+                     <div className="flex items-center justify-center py-10 text-xs font-semibold text-destructive">
+                        {error}
+                     </div>
+                  ) : children.length === 0 ? (
+                     <div className="flex items-center justify-center py-10 text-xs text-muted-foreground">
+                        No children yet. Add one to get started.
+                     </div>
+                  ) : (
+                     <ul className="space-y-2">
+                        {children.map((child) => {
+                           const initials =
+                              `${child.firstName[0] ?? ""}${child.lastName[0] ?? ""}`.toUpperCase();
+                           return (
+                              <li
+                                 key={child.id}
+                                 className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2.5"
+                              >
+                                 <div className="flex min-w-0 items-center gap-3">
+                                    <Avatar>
+                                       <AvatarFallback className="bg-muted text-xs font-semibold text-muted-foreground">
+                                          {initials}
+                                       </AvatarFallback>
+                                    </Avatar>
+                                    <div className="min-w-0">
+                                       <p className="truncate text-sm font-medium">
+                                          {child.firstName} {child.lastName}
+                                       </p>
+                                       <p className="truncate text-xs text-muted-foreground">
+                                          {formatDate(child.dob)} ·{" "}
+                                          {GENDER_LABELS[child.gender] ??
+                                             child.gender}
+                                          {" · "}
+                                          {child.emergencyContacts.length}{" "}
+                                          emergency contact
+                                          {child.emergencyContacts.length === 1
+                                             ? ""
+                                             : "s"}
+                                       </p>
+                                    </div>
+                                 </div>
+                                 <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon-sm"
+                                    aria-label={`Edit ${child.firstName}`}
+                                    onClick={() => handleEdit(child)}
+                                 >
+                                    <Pencil className="size-4" />
+                                 </Button>
+                              </li>
+                           );
+                        })}
+                     </ul>
+                  )}
+               </div>
+            </DialogContent>
+         </Dialog>
+
+         <CreateChildDialog
+            parentId={parentId}
+            open={createOpen}
+            onOpenChange={setCreateOpen}
+            onSuccess={refresh}
+         />
+
+         <ChildDetailDialog
+            child={editChild}
+            parentId={parentId}
+            open={editOpen}
+            onOpenChange={(next) => {
+               setEditOpen(next);
+               if (!next) setEditChild(null);
+            }}
+            onSuccess={refresh}
+         />
+      </>
+   );
+}
diff --git a/app/(authenticated)/users/_components/user-actions-cell.tsx b/app/(authenticated)/users/_components/user-actions-cell.tsx
index a6af05b..3300e38 100644
--- a/app/(authenticated)/users/_components/user-actions-cell.tsx
+++ b/app/(authenticated)/users/_components/user-actions-cell.tsx
@@ -2,7 +2,7 @@
 
 import { useRef, useState } from "react";
 
-import { Pencil, Tag, Trash2, ReceiptText } from "lucide-react";
+import { Baby, Pencil, Tag, Trash2, ReceiptText } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import {
@@ -26,6 +26,7 @@ import { deleteUserAdmin } from "@/app/(authenticated)/users/actions";
 import { toast } from "sonner";
 import { profileRoleLabel, type UserRow } from "../profile-role-label";
 import { UserTransactionsModal } from "./components/user-transactions-modals";
+import { ManageChildrenModal } from "./children/manage-children-modal";
 
 
 interface UserActionsCellProps {
@@ -35,6 +36,7 @@ interface UserActionsCellProps {
 
 export function UserActionsCell({ user, onEdit }: UserActionsCellProps) {
    const [txOpen, setTxOpen] = useState(false);
+   const [childrenOpen, setChildrenOpen] = useState(false);
    const [open, setOpen] = useState(false);
    const [services, setServices] = useState<DiscountService[]>([]);
    const [discounts, setDiscounts] = useState<ActiveDiscount[]>([]);
@@ -136,6 +138,19 @@ export function UserActionsCell({ user, onEdit }: UserActionsCellProps) {
             </TooltipTrigger>
             <TooltipContent>Edit user</TooltipContent>
          </Tooltip>
+         <Tooltip>
+            <TooltipTrigger asChild>
+               <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Manage children"
+                  onClick={() => setChildrenOpen(true)}
+               >
+                  <Baby />
+               </Button>
+            </TooltipTrigger>
+            <TooltipContent>Manage children</TooltipContent>
+         </Tooltip>
          <Tooltip>
             <TooltipTrigger asChild>
                <Button
@@ -227,6 +242,12 @@ export function UserActionsCell({ user, onEdit }: UserActionsCellProps) {
             open={txOpen}
             onOpenChange={setTxOpen}
          />
+         <ManageChildrenModal
+            parentId={user.id}
+            userName={`${user.firstName} ${user.lastName}`}
+            open={childrenOpen}
+            onOpenChange={setChildrenOpen}
+         />
       </div>
    );
 }
diff --git a/app/(authenticated)/users/children-actions.ts b/app/(authenticated)/users/children-actions.ts
new file mode 100644
index 0000000..524353a
--- /dev/null
+++ b/app/(authenticated)/users/children-actions.ts
@@ -0,0 +1,227 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { and, eq } from "drizzle-orm";
+
+import { requireAdmin } from "@/lib/auth/require-admin";
+import { db } from "@/lib/db";
+import { children, emergencyContacts, profiles } from "@/lib/db/schema";
+import {
+   createChildAdminSchema,
+   updateChildAdminSchema,
+} from "./children-schema";
+import {
+   listChildrenForParent,
+   type ChildView,
+} from "./children-queries";
+
+export type ChildActionState = {
+   errors?: Record<string, string[]>;
+   message?: string;
+   data?: { childId: string };
+} | null;
+
+const USERS_PATH = "/users";
+
+function field(formData: FormData, name: string): string | undefined {
+   const v = formData.get(name);
+   return v === null ? undefined : v.toString();
+}
+
+function parseEmergencyContacts(formData: FormData) {
+   const contactsRaw = field(formData, "emergency_contacts");
+   try {
+      return contactsRaw ? JSON.parse(contactsRaw) : [];
+   } catch {
+      return null;
+   }
+}
+
+async function insertEmergencyContacts(
+   tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
+   childId: string,
+   contacts: {
+      full_name: string;
+      email_address: string;
+      phone_number: string;
+      relationship: string;
+   }[],
+) {
+   if (contacts.length === 0) return;
+   await tx.insert(emergencyContacts).values(
+      contacts.map((c) => ({
+         childId,
+         fullName: c.full_name,
+         emailAddress: c.email_address,
+         phoneNumber: c.phone_number,
+         relationship: c.relationship,
+      })),
+   );
+}
+
+export async function listChildrenForUserAdmin(
+   parentId: string,
+): Promise<ChildView[] | { error: string }> {
+   try {
+      await requireAdmin();
+   } catch {
+      return { error: "Unauthorized" };
+   }
+
+   return listChildrenForParent(parentId);
+}
+
+export async function createChildAdmin(
+   _prev: ChildActionState,
+   formData: FormData,
+): Promise<ChildActionState> {
+   try {
+      await requireAdmin();
+   } catch {
+      return { errors: { _form: ["Unauthorized"] } };
+   }
+
+   const emergency_contacts = parseEmergencyContacts(formData);
+   if (emergency_contacts === null) {
+      return { errors: { emergency_contacts: ["Invalid emergency contacts"] } };
+   }
+
+   const parsed = createChildAdminSchema.safeParse({
+      parent_id: field(formData, "parent_id"),
+      first_name: field(formData, "first_name"),
+      last_name: field(formData, "last_name"),
+      dob: field(formData, "dob"),
+      gender: field(formData, "gender"),
+      allergies: field(formData, "allergies"),
+      medical_conditions: field(formData, "medical_conditions"),
+      medications: field(formData, "medications"),
+      emergency_contacts,
+   });
+
+   if (!parsed.success) {
+      return { errors: parsed.error.flatten().fieldErrors };
+   }
+
+   const data = parsed.data;
+
+   const parent = await db
+      .select({ id: profiles.id })
+      .from(profiles)
+      .where(eq(profiles.id, data.parent_id))
+      .limit(1);
+
+   if (parent.length === 0) {
+      return { errors: { _form: ["User not found"] } };
+   }
+
+   try {
+      const childId = await db.transaction(async (tx) => {
+         const [child] = await tx
+            .insert(children)
+            .values({
+               parentId: data.parent_id,
+               firstName: data.first_name,
+               lastName: data.last_name,
+               dob: data.dob,
+               gender: data.gender,
+               allergies: data.allergies || null,
+               medicalConditions: data.medical_conditions || null,
+               medications: data.medications || null,
+            })
+            .returning({ id: children.id });
+
+         await insertEmergencyContacts(tx, child.id, data.emergency_contacts);
+         return child.id;
+      });
+
+      revalidatePath(USERS_PATH);
+      return { message: "Child created.", data: { childId } };
+   } catch {
+      return {
+         errors: { _form: ["Failed to create child. Please try again."] },
+      };
+   }
+}
+
+export async function updateChildAdmin(
+   _prev: ChildActionState,
+   formData: FormData,
+): Promise<ChildActionState> {
+   try {
+      await requireAdmin();
+   } catch {
+      return { errors: { _form: ["Unauthorized"] } };
+   }
+
+   const emergency_contacts = parseEmergencyContacts(formData);
+   if (emergency_contacts === null) {
+      return { errors: { emergency_contacts: ["Invalid emergency contacts"] } };
+   }
+
+   const parsed = updateChildAdminSchema.safeParse({
+      parent_id: field(formData, "parent_id"),
+      child_id: field(formData, "child_id"),
+      first_name: field(formData, "first_name"),
+      last_name: field(formData, "last_name"),
+      dob: field(formData, "dob"),
+      gender: field(formData, "gender"),
+      allergies: field(formData, "allergies"),
+      medical_conditions: field(formData, "medical_conditions"),
+      medications: field(formData, "medications"),
+      emergency_contacts,
+   });
+
+   if (!parsed.success) {
+      return { errors: parsed.error.flatten().fieldErrors };
+   }
+
+   const data = parsed.data;
+
+   const [existing] = await db
+      .select({ id: children.id })
+      .from(children)
+      .where(
+         and(
+            eq(children.id, data.child_id),
+            eq(children.parentId, data.parent_id),
+         ),
+      )
+      .limit(1);
+
+   if (!existing) return { errors: { _form: ["Child not found"] } };
+
+   try {
+      await db.transaction(async (tx) => {
+         await tx
+            .update(children)
+            .set({
+               firstName: data.first_name,
+               lastName: data.last_name,
+               dob: data.dob,
+               gender: data.gender,
+               allergies: data.allergies || null,
+               medicalConditions: data.medical_conditions || null,
+               medications: data.medications || null,
+               updatedAt: new Date(),
+            })
+            .where(eq(children.id, data.child_id));
+
+         await tx
+            .delete(emergencyContacts)
+            .where(eq(emergencyContacts.childId, data.child_id));
+
+         await insertEmergencyContacts(
+            tx,
+            data.child_id,
+            data.emergency_contacts,
+         );
+      });
+
+      revalidatePath(USERS_PATH);
+      return { message: "Child updated.", data: { childId: data.child_id } };
+   } catch {
+      return {
+         errors: { _form: ["Failed to update child. Please try again."] },
+      };
+   }
+}
diff --git a/app/(authenticated)/users/children-queries.ts b/app/(authenticated)/users/children-queries.ts
new file mode 100644
index 0000000..1ef7eab
--- /dev/null
+++ b/app/(authenticated)/users/children-queries.ts
@@ -0,0 +1,65 @@
+import { asc, eq, inArray } from "drizzle-orm";
+
+import { db } from "@/lib/db";
+import { children, emergencyContacts } from "@/lib/db/schema";
+
+export type ChildView = {
+   id: string;
+   firstName: string;
+   lastName: string;
+   dob: string;
+   gender: "male" | "female" | "prefer_not_to_say";
+   allergies: string | null;
+   medicalConditions: string | null;
+   medications: string | null;
+   emergencyContacts: {
+      id: string;
+      fullName: string;
+      emailAddress: string;
+      phoneNumber: string;
+      relationship: string;
+   }[];
+};
+
+export async function listChildrenForParent(
+   parentId: string,
+): Promise<ChildView[]> {
+   const rows = await db
+      .select()
+      .from(children)
+      .where(eq(children.parentId, parentId))
+      .orderBy(asc(children.firstName), asc(children.lastName));
+
+   if (rows.length === 0) return [];
+
+   const childIds = rows.map((r) => r.id);
+   const contacts = await db
+      .select()
+      .from(emergencyContacts)
+      .where(inArray(emergencyContacts.childId, childIds));
+
+   const contactsByChildId = new Map<string, typeof contacts>();
+   for (const c of contacts) {
+      const list = contactsByChildId.get(c.childId) ?? [];
+      list.push(c);
+      contactsByChildId.set(c.childId, list);
+   }
+
+   return rows.map((row) => ({
+      id: row.id,
+      firstName: row.firstName,
+      lastName: row.lastName,
+      dob: row.dob,
+      gender: row.gender,
+      allergies: row.allergies,
+      medicalConditions: row.medicalConditions,
+      medications: row.medications,
+      emergencyContacts: (contactsByChildId.get(row.id) ?? []).map((c) => ({
+         id: c.id,
+         fullName: c.fullName,
+         emailAddress: c.emailAddress,
+         phoneNumber: c.phoneNumber,
+         relationship: c.relationship,
+      })),
+   }));
+}
diff --git a/app/(authenticated)/users/children-schema.ts b/app/(authenticated)/users/children-schema.ts
new file mode 100644
index 0000000..eca3fcb
--- /dev/null
+++ b/app/(authenticated)/users/children-schema.ts
@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+const genderSchema = z.enum(["male", "female", "prefer_not_to_say"]);
+
+const emergencyContactSchema = z.object({
+   full_name: z.string().min(1, "Full name is required"),
+   email_address: z.string().email("Invalid email address"),
+   phone_number: z.string().min(1, "Phone number is required"),
+   relationship: z.string().min(1, "Relationship is required"),
+});
+
+const childFieldsSchema = z.object({
+   first_name: z.string().min(1, "First name is required"),
+   last_name: z.string().min(1, "Last name is required"),
+   dob: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date of birth"),
+   gender: genderSchema,
+   allergies: z.string().optional(),
+   medical_conditions: z.string().optional(),
+   medications: z.string().optional(),
+   emergency_contacts: z
+      .array(emergencyContactSchema)
+      .min(1, "At least one emergency contact is required"),
+});
+
+export const createChildAdminSchema = childFieldsSchema.extend({
+   parent_id: z.string().uuid(),
+});
+
+export const updateChildAdminSchema = childFieldsSchema.extend({
+   child_id: z.string().uuid(),
+   parent_id: z.string().uuid(),
+});

From ce6ef491b27953c893ccca3ce67350fe15daba7b Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Wed, 29 Jul 2026 17:49:51 -0400
Subject: [PATCH 2/7] feat(children): add parent /children page for
 self-service child management

Non-admins get a sidebar Children tab to create, edit, and delete their own
kids; admins keep managing children from the Users row action.
---
 .../children/_components/children-client.tsx  | 251 ++++++++++++++++++
 app/(authenticated)/children/actions.ts       | 222 ++++++++++++++++
 app/(authenticated)/children/page.tsx         |  50 ++++
 app/(authenticated)/layout.tsx                |  10 +-
 .../children/child-detail-dialog.tsx          |  22 +-
 .../children/create-child-dialog.tsx          |  17 +-
 app/(authenticated)/users/children-schema.ts  |  11 +-
 components/app-sidebar.tsx                    |  37 ++-
 8 files changed, 602 insertions(+), 18 deletions(-)
 create mode 100644 app/(authenticated)/children/_components/children-client.tsx
 create mode 100644 app/(authenticated)/children/actions.ts
 create mode 100644 app/(authenticated)/children/page.tsx

diff --git a/app/(authenticated)/children/_components/children-client.tsx b/app/(authenticated)/children/_components/children-client.tsx
new file mode 100644
index 0000000..a9cc093
--- /dev/null
+++ b/app/(authenticated)/children/_components/children-client.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import { useMemo, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import type { ColumnDef } from "@tanstack/react-table";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+   AlertDialog,
+   AlertDialogAction,
+   AlertDialogCancel,
+   AlertDialogContent,
+   AlertDialogDescription,
+   AlertDialogFooter,
+   AlertDialogHeader,
+   AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { UsersDataTable } from "@/app/(authenticated)/users/_components/users-data-table";
+import { CreateChildDialog } from "@/app/(authenticated)/users/_components/children/create-child-dialog";
+import { ChildDetailDialog } from "@/app/(authenticated)/users/_components/children/child-detail-dialog";
+import type { ChildView } from "@/app/(authenticated)/users/children-queries";
+import { formatDate } from "@/lib/format";
+import {
+   createChild,
+   updateChild,
+   deleteChild,
+} from "@/app/(authenticated)/children/actions";
+
+const GENDER_LABELS: Record<string, string> = {
+   male: "Male",
+   female: "Female",
+   prefer_not_to_say: "Prefer not to say",
+};
+
+export function ChildrenClient({ childList }: { childList: ChildView[] }) {
+   const router = useRouter();
+   const [createOpen, setCreateOpen] = useState(false);
+   const [editChild, setEditChild] = useState<ChildView | null>(null);
+   const [editOpen, setEditOpen] = useState(false);
+   const [deleteTarget, setDeleteTarget] = useState<ChildView | null>(null);
+   const [deleting, startDelete] = useTransition();
+
+   function refresh() {
+      router.refresh();
+   }
+   const columns = useMemo<ColumnDef<ChildView>[]>(
+      () => [
+         {
+            id: "profile",
+            header: "Child",
+            meta: {
+               colWidth: "36%",
+               tdClassName: "whitespace-normal align-middle",
+            },
+            cell: ({ row }) => {
+               const c = row.original;
+               const initials =
+                  `${c.firstName[0] ?? ""}${c.lastName[0] ?? ""}`.toUpperCase();
+               return (
+                  <div className="flex min-w-0 items-center gap-3">
+                     <Avatar>
+                        <AvatarFallback className="bg-muted text-xs font-semibold text-muted-foreground">
+                           {initials}
+                        </AvatarFallback>
+                     </Avatar>
+                     <div className="flex min-w-0 flex-col">
+                        <span className="truncate text-sm font-semibold">
+                           {c.firstName} {c.lastName}
+                        </span>
+                        <span className="truncate text-xs capitalize text-muted-foreground">
+                           {GENDER_LABELS[c.gender] ??
+                              c.gender.replaceAll("_", " ")}
+                        </span>
+                     </div>
+                  </div>
+               );
+            },
+         },
+         {
+            id: "dob",
+            header: "Date of birth",
+            meta: { colWidth: "22%" },
+            cell: ({ row }) => (
+               <span className="text-sm text-muted-foreground">
+                  {formatDate(row.original.dob)}
+               </span>
+            ),
+         },
+         {
+            id: "emergencyContacts",
+            header: "Emergency contacts",
+            meta: { colWidth: "18%" },
+            cell: ({ row }) => (
+               <span className="text-sm text-muted-foreground">
+                  {row.original.emergencyContacts.length}
+               </span>
+            ),
+         },
+         {
+            id: "actions",
+            header: () => <div className="text-right">Actions</div>,
+            meta: {
+               colWidth: "24%",
+               thClassName: "text-right",
+               tdClassName: "text-right",
+            },
+            cell: ({ row }) => {
+               const child = row.original;
+               return (
+                  <div className="flex items-center justify-end gap-0.5">
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              aria-label={`Edit ${child.firstName}`}
+                              onClick={() => {
+                                 setEditChild(child);
+                                 setEditOpen(true);
+                              }}
+                           >
+                              <Pencil />
+                           </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Edit child</TooltipContent>
+                     </Tooltip>
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              aria-label={`Delete ${child.firstName}`}
+                              onClick={() => setDeleteTarget(child)}
+                           >
+                              <Trash2 />
+                           </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Delete child</TooltipContent>
+                     </Tooltip>
+                  </div>
+               );
+            },
+         },
+      ],
+      [],
+   );
+
+   function handleDelete() {
+      if (!deleteTarget) return;
+      startDelete(async () => {
+         const fd = new FormData();
+         fd.set("child_id", deleteTarget.id);
+         const result = await deleteChild(null, fd);
+         if (result?.errors) {
+            toast.error("Failed to delete child", {
+               description: Object.values(result.errors).flat().join(" "),
+            });
+         } else {
+            toast.success(result?.message ?? "Child deleted.");
+            setDeleteTarget(null);
+            refresh();
+         }
+      });
+   }
+
+   return (
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+         <CreateChildDialog
+            open={createOpen}
+            onOpenChange={setCreateOpen}
+            action={createChild}
+            onSuccess={refresh}
+         />
+
+         <ChildDetailDialog
+            child={editChild}
+            open={editOpen}
+            onOpenChange={(open) => {
+               setEditOpen(open);
+               if (!open) setEditChild(null);
+            }}
+            action={updateChild}
+            onSuccess={refresh}
+         />
+
+         <AlertDialog
+            open={!!deleteTarget}
+            onOpenChange={(open) => {
+               if (!open) setDeleteTarget(null);
+            }}
+         >
+            <AlertDialogContent>
+               <AlertDialogHeader>
+                  <AlertDialogTitle>Delete child?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                     This permanently deletes{" "}
+                     {deleteTarget
+                        ? `${deleteTarget.firstName} ${deleteTarget.lastName}`
+                        : "this child"}
+                     &rsquo;s profile and emergency contacts. This action cannot
+                     be undone.
+                  </AlertDialogDescription>
+               </AlertDialogHeader>
+               <AlertDialogFooter>
+                  <AlertDialogCancel disabled={deleting}>
+                     Cancel
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                     onClick={(e) => {
+                        e.preventDefault();
+                        handleDelete();
+                     }}
+                     disabled={deleting}
+                  >
+                     {deleting ? "Deleting…" : "Delete"}
+                  </AlertDialogAction>
+               </AlertDialogFooter>
+            </AlertDialogContent>
+         </AlertDialog>
+
+         <div className="flex w-full min-w-0 shrink-0 items-center justify-between gap-3 pb-2">
+            <p className="text-sm text-muted-foreground">
+               {childList.length} child{childList.length === 1 ? "" : "ren"}
+            </p>
+            <Button
+               type="button"
+               className="border-primary bg-clip-border hover:border-primary/80 hover:bg-primary/80 active:translate-y-0"
+               onClick={() => setCreateOpen(true)}
+            >
+               <Plus />
+               Add child
+            </Button>
+         </div>
+
+         <UsersDataTable
+            columns={columns}
+            data={childList}
+            emptyMessage="No children yet. Add one to get started."
+            rowLabel={(n) => `${n} child${n === 1 ? "" : "ren"}`}
+         />
+      </div>
+   );
+}
diff --git a/app/(authenticated)/children/actions.ts b/app/(authenticated)/children/actions.ts
new file mode 100644
index 0000000..04d1410
--- /dev/null
+++ b/app/(authenticated)/children/actions.ts
@@ -0,0 +1,222 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { and, eq } from "drizzle-orm";
+
+import { createClient } from "@/utils/supabase/server";
+import { db } from "@/lib/db";
+import { children, emergencyContacts } from "@/lib/db/schema";
+import {
+   createChildSchema,
+   updateChildSchema,
+} from "@/app/(authenticated)/users/children-schema";
+import type { ChildActionState } from "@/app/(authenticated)/users/children-actions";
+
+const CHILDREN_PATH = "/children";
+
+function field(formData: FormData, name: string): string | undefined {
+   const v = formData.get(name);
+   return v === null ? undefined : v.toString();
+}
+
+function parseEmergencyContacts(formData: FormData) {
+   const contactsRaw = field(formData, "emergency_contacts");
+   try {
+      return contactsRaw ? JSON.parse(contactsRaw) : [];
+   } catch {
+      return null;
+   }
+}
+
+async function insertEmergencyContacts(
+   tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
+   childId: string,
+   contacts: {
+      full_name: string;
+      email_address: string;
+      phone_number: string;
+      relationship: string;
+   }[],
+) {
+   if (contacts.length === 0) return;
+   await tx.insert(emergencyContacts).values(
+      contacts.map((c) => ({
+         childId,
+         fullName: c.full_name,
+         emailAddress: c.email_address,
+         phoneNumber: c.phone_number,
+         relationship: c.relationship,
+      })),
+   );
+}
+
+async function requireUserId(): Promise<string | null> {
+   const supabase = await createClient();
+   const {
+      data: { user },
+   } = await supabase.auth.getUser();
+   return user?.id ?? null;
+}
+
+export async function createChild(
+   _prev: ChildActionState,
+   formData: FormData,
+): Promise<ChildActionState> {
+   const userId = await requireUserId();
+   if (!userId) return { errors: { _form: ["Unauthorized"] } };
+
+   const emergency_contacts = parseEmergencyContacts(formData);
+   if (emergency_contacts === null) {
+      return { errors: { emergency_contacts: ["Invalid emergency contacts"] } };
+   }
+
+   const parsed = createChildSchema.safeParse({
+      first_name: field(formData, "first_name"),
+      last_name: field(formData, "last_name"),
+      dob: field(formData, "dob"),
+      gender: field(formData, "gender"),
+      allergies: field(formData, "allergies"),
+      medical_conditions: field(formData, "medical_conditions"),
+      medications: field(formData, "medications"),
+      emergency_contacts,
+   });
+
+   if (!parsed.success) {
+      return { errors: parsed.error.flatten().fieldErrors };
+   }
+
+   const data = parsed.data;
+
+   try {
+      const childId = await db.transaction(async (tx) => {
+         const [child] = await tx
+            .insert(children)
+            .values({
+               parentId: userId,
+               firstName: data.first_name,
+               lastName: data.last_name,
+               dob: data.dob,
+               gender: data.gender,
+               allergies: data.allergies || null,
+               medicalConditions: data.medical_conditions || null,
+               medications: data.medications || null,
+            })
+            .returning({ id: children.id });
+
+         await insertEmergencyContacts(tx, child.id, data.emergency_contacts);
+         return child.id;
+      });
+
+      revalidatePath(CHILDREN_PATH);
+      return { message: "Child created.", data: { childId } };
+   } catch {
+      return {
+         errors: { _form: ["Failed to create child. Please try again."] },
+      };
+   }
+}
+
+export async function updateChild(
+   _prev: ChildActionState,
+   formData: FormData,
+): Promise<ChildActionState> {
+   const userId = await requireUserId();
+   if (!userId) return { errors: { _form: ["Unauthorized"] } };
+
+   const emergency_contacts = parseEmergencyContacts(formData);
+   if (emergency_contacts === null) {
+      return { errors: { emergency_contacts: ["Invalid emergency contacts"] } };
+   }
+
+   const parsed = updateChildSchema.safeParse({
+      child_id: field(formData, "child_id"),
+      first_name: field(formData, "first_name"),
+      last_name: field(formData, "last_name"),
+      dob: field(formData, "dob"),
+      gender: field(formData, "gender"),
+      allergies: field(formData, "allergies"),
+      medical_conditions: field(formData, "medical_conditions"),
+      medications: field(formData, "medications"),
+      emergency_contacts,
+   });
+
+   if (!parsed.success) {
+      return { errors: parsed.error.flatten().fieldErrors };
+   }
+
+   const data = parsed.data;
+
+   const [existing] = await db
+      .select({ id: children.id })
+      .from(children)
+      .where(
+         and(eq(children.id, data.child_id), eq(children.parentId, userId)),
+      )
+      .limit(1);
+
+   if (!existing) return { errors: { _form: ["Child not found"] } };
+
+   try {
+      await db.transaction(async (tx) => {
+         await tx
+            .update(children)
+            .set({
+               firstName: data.first_name,
+               lastName: data.last_name,
+               dob: data.dob,
+               gender: data.gender,
+               allergies: data.allergies || null,
+               medicalConditions: data.medical_conditions || null,
+               medications: data.medications || null,
+               updatedAt: new Date(),
+            })
+            .where(eq(children.id, data.child_id));
+
+         await tx
+            .delete(emergencyContacts)
+            .where(eq(emergencyContacts.childId, data.child_id));
+
+         await insertEmergencyContacts(
+            tx,
+            data.child_id,
+            data.emergency_contacts,
+         );
+      });
+
+      revalidatePath(CHILDREN_PATH);
+      return { message: "Child updated.", data: { childId: data.child_id } };
+   } catch {
+      return {
+         errors: { _form: ["Failed to update child. Please try again."] },
+      };
+   }
+}
+
+export async function deleteChild(
+   _prev: ChildActionState,
+   formData: FormData,
+): Promise<ChildActionState> {
+   const userId = await requireUserId();
+   if (!userId) return { errors: { _form: ["Unauthorized"] } };
+
+   const childId = field(formData, "child_id");
+   if (!childId) return { errors: { _form: ["Child not found"] } };
+
+   const [existing] = await db
+      .select({ id: children.id })
+      .from(children)
+      .where(and(eq(children.id, childId), eq(children.parentId, userId)))
+      .limit(1);
+
+   if (!existing) return { errors: { _form: ["Child not found"] } };
+
+   try {
+      await db.delete(children).where(eq(children.id, childId));
+      revalidatePath(CHILDREN_PATH);
+      return { message: "Child deleted." };
+   } catch {
+      return {
+         errors: { _form: ["Failed to delete child. Please try again."] },
+      };
+   }
+}
diff --git a/app/(authenticated)/children/page.tsx b/app/(authenticated)/children/page.tsx
new file mode 100644
index 0000000..227987d
--- /dev/null
+++ b/app/(authenticated)/children/page.tsx
@@ -0,0 +1,50 @@
+import { Suspense } from "react";
+import { redirect } from "next/navigation";
+
+import { Spinner } from "@/components/ui/spinner";
+import { createClient } from "@/utils/supabase/server";
+import { ROLES } from "@/lib/roles";
+import { listChildrenForParent } from "@/app/(authenticated)/users/children-queries";
+import { ChildrenClient } from "./_components/children-client";
+
+export default function ChildrenPage() {
+   return (
+      <Suspense
+         fallback={<Spinner className="size-8 text-muted-foreground" />}
+      >
+         <ChildrenContent />
+      </Suspense>
+   );
+}
+
+async function ChildrenContent() {
+   const supabase = await createClient();
+   const {
+      data: { user },
+   } = await supabase.auth.getUser();
+
+   if (!user) {
+      redirect("/login");
+   }
+
+   const { data: claimsData } = await supabase.auth.getClaims();
+   if (claimsData?.claims?.user_role === ROLES.ADMIN) {
+      redirect("/users");
+   }
+
+   const childList = await listChildrenForParent(user.id);
+
+   return (
+      <main className="flex h-full max-h-full min-h-0 w-full min-w-0 flex-1 flex-col gap-4 overflow-hidden p-8">
+         <div className="shrink-0">
+            <h1 className="text-2xl font-semibold tracking-tight">
+               My children
+            </h1>
+            <p className="text-sm text-muted-foreground">
+               Add and manage children linked to your account.
+            </p>
+         </div>
+         <ChildrenClient childList={childList} />
+      </main>
+   );
+}
diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
index d356f6c..7336336 100644
--- a/app/(authenticated)/layout.tsx
+++ b/app/(authenticated)/layout.tsx
@@ -5,6 +5,7 @@ import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import { AppSidebar } from "@/components/app-sidebar";
+import type { Role } from "@/lib/roles";
 
 async function AuthGate({ children }: { children: React.ReactNode }) {
    const supabase = await createClient();
@@ -19,6 +20,13 @@ async function AuthGate({ children }: { children: React.ReactNode }) {
    return <>{children}</>;
 }
 
+async function RoleAwareSidebar() {
+   const supabase = await createClient();
+   const { data: claimsData } = await supabase.auth.getClaims();
+   const role = (claimsData?.claims?.user_role as Role | undefined) ?? null;
+   return <AppSidebar role={role} />;
+}
+
 export default function AuthenticatedLayout({
    children,
 }: {
@@ -28,7 +36,7 @@ export default function AuthenticatedLayout({
       <TooltipProvider>
          <SidebarProvider>
             <Suspense fallback={null}>
-               <AppSidebar />
+               <RoleAwareSidebar />
             </Suspense>
             <SidebarInset>
                <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
diff --git a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
index 9560fda..ab5dff9 100644
--- a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
@@ -42,6 +42,11 @@ function FieldError({ errors }: { errors?: string[] }) {
    return <p className="text-sm text-destructive">{errors[0]}</p>;
 }
 
+type ChildFormAction = (
+   prev: ChildActionState,
+   formData: FormData,
+) => Promise<ChildActionState>;
+
 function toDraftContacts(child: ChildView): DraftEmergencyContact[] {
    return child.emergencyContacts.map((c) => ({
       id: c.id,
@@ -57,11 +62,13 @@ function ChildEditForm({
    parentId,
    onClose,
    onSuccess,
+   action,
 }: {
    child: ChildView;
-   parentId: string;
+   parentId?: string;
    onClose: () => void;
    onSuccess?: () => void;
+   action: ChildFormAction;
 }) {
    const [gender, setGender] = useState<string>(child.gender);
    const [dob, setDob] = useState(child.dob);
@@ -81,7 +88,9 @@ function ChildEditForm({
             };
          }
          formData.set("child_id", child.id);
-         formData.set("parent_id", parentId);
+         if (parentId) {
+            formData.set("parent_id", parentId);
+         }
          formData.set(
             "emergency_contacts",
             JSON.stringify(
@@ -100,7 +109,7 @@ function ChildEditForm({
                ),
             ),
          );
-         const result = await updateChildAdmin(prev, formData);
+         const result = await action(prev, formData);
          if (result?.message && !result.errors) {
             toast.success(result.message);
             onClose();
@@ -110,7 +119,7 @@ function ChildEditForm({
          }
          return result;
       },
-      [child.id, parentId, emergencyContacts, onClose, onSuccess],
+      [child.id, parentId, emergencyContacts, onClose, onSuccess, action],
    );
 
    const [state, formAction, pending] = useActionState<
@@ -345,12 +354,14 @@ export function ChildDetailDialog({
    open,
    onOpenChange,
    onSuccess,
+   action = updateChildAdmin,
 }: {
    child: ChildView | null;
-   parentId: string;
+   parentId?: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
+   action?: ChildFormAction;
 }) {
    if (!child) return null;
 
@@ -363,6 +374,7 @@ export function ChildDetailDialog({
                parentId={parentId}
                onClose={() => onOpenChange(false)}
                onSuccess={onSuccess}
+               action={action}
             />
          )}
       </Dialog>
diff --git a/app/(authenticated)/users/_components/children/create-child-dialog.tsx b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
index 4c0fb25..ce83c64 100644
--- a/app/(authenticated)/users/_components/children/create-child-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
@@ -41,16 +41,23 @@ function FieldError({ errors }: { errors?: string[] }) {
    return <p className="text-sm text-destructive">{errors[0]}</p>;
 }
 
+type ChildFormAction = (
+   prev: ChildActionState,
+   formData: FormData,
+) => Promise<ChildActionState>;
+
 export function CreateChildDialog({
    parentId,
    open,
    onOpenChange,
    onSuccess,
+   action = createChildAdmin,
 }: {
-   parentId: string;
+   parentId?: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
+   action?: ChildFormAction;
 }) {
    const [formKey, setFormKey] = useState(0);
    const [gender, setGender] = useState("");
@@ -83,7 +90,9 @@ export function CreateChildDialog({
                },
             };
          }
-         formData.set("parent_id", parentId);
+         if (parentId) {
+            formData.set("parent_id", parentId);
+         }
          formData.set(
             "emergency_contacts",
             JSON.stringify(
@@ -102,7 +111,7 @@ export function CreateChildDialog({
                ),
             ),
          );
-         const result = await createChildAdmin(prev, formData);
+         const result = await action(prev, formData);
          if (result?.message && !result.errors) {
             toast.success(result.message);
             resetForm();
@@ -113,7 +122,7 @@ export function CreateChildDialog({
          }
          return result;
       },
-      [emergencyContacts, parentId, onOpenChange, onSuccess],
+      [emergencyContacts, parentId, onOpenChange, onSuccess, action],
    );
 
    const [state, formAction, pending] = useActionState(boundFormAction, null);
diff --git a/app/(authenticated)/users/children-schema.ts b/app/(authenticated)/users/children-schema.ts
index eca3fcb..31c2ae9 100644
--- a/app/(authenticated)/users/children-schema.ts
+++ b/app/(authenticated)/users/children-schema.ts
@@ -9,7 +9,7 @@ const emergencyContactSchema = z.object({
    relationship: z.string().min(1, "Relationship is required"),
 });
 
-const childFieldsSchema = z.object({
+export const createChildSchema = z.object({
    first_name: z.string().min(1, "First name is required"),
    last_name: z.string().min(1, "Last name is required"),
    dob: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date of birth"),
@@ -22,11 +22,14 @@ const childFieldsSchema = z.object({
       .min(1, "At least one emergency contact is required"),
 });
 
-export const createChildAdminSchema = childFieldsSchema.extend({
+export const updateChildSchema = createChildSchema.extend({
+   child_id: z.string().uuid(),
+});
+
+export const createChildAdminSchema = createChildSchema.extend({
    parent_id: z.string().uuid(),
 });
 
-export const updateChildAdminSchema = childFieldsSchema.extend({
-   child_id: z.string().uuid(),
+export const updateChildAdminSchema = updateChildSchema.extend({
    parent_id: z.string().uuid(),
 });
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index ac6f6f7..e6849b7 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import {
@@ -10,6 +11,8 @@ import {
    MonitorSmartphone,
    Settings,
    Form,
+   Baby,
+   type LucideIcon,
 } from "lucide-react";
 import {
    Sidebar,
@@ -25,22 +28,44 @@ import {
 } from "@/components/ui/sidebar";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import { ROLES, type Role } from "@/lib/roles";
 
-const navItems = [
+type NavItem = {
+   title: string;
+   href: string;
+   icon: LucideIcon;
+};
+
+const baseNavItems: NavItem[] = [
    { title: "OVERVIEW", href: "/", icon: LayoutGrid },
    { title: "SERVICES", href: "/services", icon: BookOpen },
    { title: "USERS", href: "/users", icon: Users },
    { title: "FINANCE", href: "/finance", icon: CreditCard },
    { title: "MEMBERSHIPS", href: "/memberships", icon: MonitorSmartphone },
-   { title: "FORMS" , href: "/forms", icon: Form}
+   { title: "FORMS", href: "/forms", icon: Form },
 ];
 
 export function AppSidebar({
    className,
+   role,
    ...props
-}: React.ComponentProps<typeof Sidebar>) {
+}: React.ComponentProps<typeof Sidebar> & { role?: Role | string | null }) {
    const pathname = usePathname();
 
+   const navItems = useMemo(() => {
+      const items = [...baseNavItems];
+      if (role && role !== ROLES.ADMIN) {
+         const usersIdx = items.findIndex((i) => i.href === "/users");
+         const insertAt = usersIdx >= 0 ? usersIdx + 1 : items.length;
+         items.splice(insertAt, 0, {
+            title: "CHILDREN",
+            href: "/children",
+            icon: Baby,
+         });
+      }
+      return items;
+   }, [role]);
+
    return (
       <Sidebar
          variant="floating"
@@ -77,7 +102,11 @@ export function AppSidebar({
                <SidebarGroupContent>
                   <SidebarMenu className="gap-1">
                      {navItems.map((item) => {
-                        const isActive = pathname === item.href;
+                        const isActive =
+                           item.href === "/"
+                              ? pathname === "/"
+                              : pathname === item.href ||
+                                pathname.startsWith(`${item.href}/`);
                         return (
                            <SidebarMenuItem key={item.title}>
                               <SidebarMenuButton

From 6f52f79cc853505882a9895afb10bfeb259c5205 Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Wed, 29 Jul 2026 17:50:00 -0400
Subject: [PATCH 3/7] fix(sidebar): hide Users nav item for non-admin users

Parents only need Children; Users is an admin surface and should not appear
in the sidebar for normal accounts.
---
 components/app-sidebar.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index e6849b7..22d565d 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -53,10 +53,13 @@ export function AppSidebar({
    const pathname = usePathname();
 
    const navItems = useMemo(() => {
-      const items = [...baseNavItems];
-      if (role && role !== ROLES.ADMIN) {
-         const usersIdx = items.findIndex((i) => i.href === "/users");
-         const insertAt = usersIdx >= 0 ? usersIdx + 1 : items.length;
+      const isAdmin = role === ROLES.ADMIN;
+      const items = baseNavItems.filter(
+         (item) => isAdmin || item.href !== "/users",
+      );
+      if (role && !isAdmin) {
+         const servicesIdx = items.findIndex((i) => i.href === "/services");
+         const insertAt = servicesIdx >= 0 ? servicesIdx + 1 : items.length;
          items.splice(insertAt, 0, {
             title: "CHILDREN",
             href: "/children",

From 67bdf39a662a6d3d552153cdefb69d6a44af77ea Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Wed, 29 Jul 2026 17:59:16 -0400
Subject: [PATCH 4/7] feat(children): allow editing emergency contacts in place

Reuse the contact dialog for add and edit so parents and admins can update
contact details without deleting and re-adding them.
---
 .../children/child-detail-dialog.tsx          | 84 +++++++++++++-----
 .../children/create-child-dialog.tsx          | 88 +++++++++++++------
 .../children/emergency-contact-dialog.tsx     | 35 ++++++--
 3 files changed, 152 insertions(+), 55 deletions(-)

diff --git a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
index ab5dff9..b66d2cd 100644
--- a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useActionState, useCallback, useState } from "react";
-import { ChevronDown, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -76,7 +76,9 @@ function ChildEditForm({
       toDraftContacts(child),
    );
    const [ecSectionOpen, setEcSectionOpen] = useState(true);
-   const [addContactOpen, setAddContactOpen] = useState(false);
+   const [contactDialogOpen, setContactDialogOpen] = useState(false);
+   const [editingContact, setEditingContact] =
+      useState<DraftEmergencyContact | null>(null);
 
    const boundFormAction = useCallback(
       async (prev: ChildActionState, formData: FormData) => {
@@ -127,12 +129,31 @@ function ChildEditForm({
       FormData
    >(boundFormAction, null);
 
-   function handleAddContact(contact: Omit<DraftEmergencyContact, "id">) {
-      setEmergencyContacts((prev) => [
-         ...prev,
-         { ...contact, id: crypto.randomUUID() },
-      ]);
-      setEcSectionOpen(true);
+   function openAddContact() {
+      setEditingContact(null);
+      setContactDialogOpen(true);
+   }
+
+   function openEditContact(contact: DraftEmergencyContact) {
+      setEditingContact(contact);
+      setContactDialogOpen(true);
+   }
+
+   function handleSaveContact(contact: Omit<DraftEmergencyContact, "id">) {
+      if (editingContact) {
+         setEmergencyContacts((prev) =>
+            prev.map((c) =>
+               c.id === editingContact.id ? { ...c, ...contact } : c,
+            ),
+         );
+      } else {
+         setEmergencyContacts((prev) => [
+            ...prev,
+            { ...contact, id: crypto.randomUUID() },
+         ]);
+         setEcSectionOpen(true);
+      }
+      setEditingContact(null);
    }
 
    function handleRemoveContact(id: string) {
@@ -282,17 +303,30 @@ function ChildEditForm({
                                              {contact.phone_number}
                                           </p>
                                        </div>
-                                       <Button
-                                          type="button"
-                                          variant="ghost"
-                                          size="icon-sm"
-                                          aria-label={`Remove ${contact.full_name}`}
-                                          onClick={() =>
-                                             handleRemoveContact(contact.id)
-                                          }
-                                       >
-                                          <Trash2 className="size-4" />
-                                       </Button>
+                                       <div className="flex shrink-0 items-center gap-0.5">
+                                          <Button
+                                             type="button"
+                                             variant="ghost"
+                                             size="icon-sm"
+                                             aria-label={`Edit ${contact.full_name}`}
+                                             onClick={() =>
+                                                openEditContact(contact)
+                                             }
+                                          >
+                                             <Pencil className="size-4" />
+                                          </Button>
+                                          <Button
+                                             type="button"
+                                             variant="ghost"
+                                             size="icon-sm"
+                                             aria-label={`Remove ${contact.full_name}`}
+                                             onClick={() =>
+                                                handleRemoveContact(contact.id)
+                                             }
+                                          >
+                                             <Trash2 className="size-4" />
+                                          </Button>
+                                       </div>
                                     </li>
                                  ))}
                               </ul>
@@ -306,7 +340,7 @@ function ChildEditForm({
                               type="button"
                               variant="outline"
                               size="sm"
-                              onClick={() => setAddContactOpen(true)}
+                              onClick={openAddContact}
                            >
                               <Plus />
                               Add contact
@@ -340,9 +374,13 @@ function ChildEditForm({
          </DialogContent>
 
          <EmergencyContactDialog
-            open={addContactOpen}
-            onOpenChange={setAddContactOpen}
-            onAdd={handleAddContact}
+            open={contactDialogOpen}
+            onOpenChange={(open) => {
+               setContactDialogOpen(open);
+               if (!open) setEditingContact(null);
+            }}
+            contact={editingContact}
+            onSave={handleSaveContact}
          />
       </>
    );
diff --git a/app/(authenticated)/users/_components/children/create-child-dialog.tsx b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
index ce83c64..9ce96d5 100644
--- a/app/(authenticated)/users/_components/children/create-child-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useActionState, useCallback, useState } from "react";
-import { ChevronDown, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -66,7 +66,9 @@ export function CreateChildDialog({
       DraftEmergencyContact[]
    >([]);
    const [ecSectionOpen, setEcSectionOpen] = useState(true);
-   const [addContactOpen, setAddContactOpen] = useState(false);
+   const [contactDialogOpen, setContactDialogOpen] = useState(false);
+   const [editingContact, setEditingContact] =
+      useState<DraftEmergencyContact | null>(null);
 
    function resetForm() {
       setGender("");
@@ -127,12 +129,31 @@ export function CreateChildDialog({
 
    const [state, formAction, pending] = useActionState(boundFormAction, null);
 
-   function handleAddContact(contact: Omit<DraftEmergencyContact, "id">) {
-      setEmergencyContacts((prev) => [
-         ...prev,
-         { ...contact, id: crypto.randomUUID() },
-      ]);
-      setEcSectionOpen(true);
+   function openAddContact() {
+      setEditingContact(null);
+      setContactDialogOpen(true);
+   }
+
+   function openEditContact(contact: DraftEmergencyContact) {
+      setEditingContact(contact);
+      setContactDialogOpen(true);
+   }
+
+   function handleSaveContact(contact: Omit<DraftEmergencyContact, "id">) {
+      if (editingContact) {
+         setEmergencyContacts((prev) =>
+            prev.map((c) =>
+               c.id === editingContact.id ? { ...c, ...contact } : c,
+            ),
+         );
+      } else {
+         setEmergencyContacts((prev) => [
+            ...prev,
+            { ...contact, id: crypto.randomUUID() },
+         ]);
+         setEcSectionOpen(true);
+      }
+      setEditingContact(null);
    }
 
    function handleRemoveContact(id: string) {
@@ -287,19 +308,32 @@ export function CreateChildDialog({
                                                    {contact.phone_number}
                                                 </p>
                                              </div>
-                                             <Button
-                                                type="button"
-                                                variant="ghost"
-                                                size="icon-sm"
-                                                aria-label={`Remove ${contact.full_name}`}
-                                                onClick={() =>
-                                                   handleRemoveContact(
-                                                      contact.id,
-                                                   )
-                                                }
-                                             >
-                                                <Trash2 className="size-4" />
-                                             </Button>
+                                             <div className="flex shrink-0 items-center gap-0.5">
+                                                <Button
+                                                   type="button"
+                                                   variant="ghost"
+                                                   size="icon-sm"
+                                                   aria-label={`Edit ${contact.full_name}`}
+                                                   onClick={() =>
+                                                      openEditContact(contact)
+                                                   }
+                                                >
+                                                   <Pencil className="size-4" />
+                                                </Button>
+                                                <Button
+                                                   type="button"
+                                                   variant="ghost"
+                                                   size="icon-sm"
+                                                   aria-label={`Remove ${contact.full_name}`}
+                                                   onClick={() =>
+                                                      handleRemoveContact(
+                                                         contact.id,
+                                                      )
+                                                   }
+                                                >
+                                                   <Trash2 className="size-4" />
+                                                </Button>
+                                             </div>
                                           </li>
                                        ))}
                                     </ul>
@@ -313,7 +347,7 @@ export function CreateChildDialog({
                                     type="button"
                                     variant="outline"
                                     size="sm"
-                                    onClick={() => setAddContactOpen(true)}
+                                    onClick={openAddContact}
                                  >
                                     <Plus />
                                     Add contact
@@ -349,9 +383,13 @@ export function CreateChildDialog({
          </Dialog>
 
          <EmergencyContactDialog
-            open={addContactOpen}
-            onOpenChange={setAddContactOpen}
-            onAdd={handleAddContact}
+            open={contactDialogOpen}
+            onOpenChange={(open) => {
+               setContactDialogOpen(open);
+               if (!open) setEditingContact(null);
+            }}
+            contact={editingContact}
+            onSave={handleSaveContact}
          />
       </>
    );
diff --git a/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
index 4859c5e..3cdcc41 100644
--- a/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
@@ -26,7 +26,8 @@ export type DraftEmergencyContact = {
 type EmergencyContactDialogProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
-   onAdd: (contact: Omit<DraftEmergencyContact, "id">) => void;
+   contact?: DraftEmergencyContact | null;
+   onSave: (contact: Omit<DraftEmergencyContact, "id">) => void;
 };
 
 function FieldError({ errors }: { errors?: string[] }) {
@@ -37,10 +38,12 @@ function FieldError({ errors }: { errors?: string[] }) {
 export function EmergencyContactDialog({
    open,
    onOpenChange,
-   onAdd,
+   contact = null,
+   onSave,
 }: EmergencyContactDialogProps) {
    const [formKey, setFormKey] = useState(0);
    const [errors, setErrors] = useState<Record<string, string[]>>({});
+   const isEditing = !!contact;
 
    function handleOpenChange(nextOpen: boolean) {
       if (nextOpen) {
@@ -77,7 +80,7 @@ export function EmergencyContactDialog({
          return;
       }
 
-      onAdd({ full_name, email_address, phone_number, relationship });
+      onSave({ full_name, email_address, phone_number, relationship });
       handleOpenChange(false);
    }
 
@@ -85,7 +88,11 @@ export function EmergencyContactDialog({
       <Dialog open={open} onOpenChange={handleOpenChange}>
          <DialogContent className="sm:max-w-md">
             <DialogHeader>
-               <DialogTitle>Add emergency contact</DialogTitle>
+               <DialogTitle>
+                  {isEditing
+                     ? "Edit emergency contact"
+                     : "Add emergency contact"}
+               </DialogTitle>
                <DialogDescription>
                   Required for every child profile.
                </DialogDescription>
@@ -98,7 +105,12 @@ export function EmergencyContactDialog({
             >
                <div className="space-y-2">
                   <Label htmlFor="ec_dialog_name">Full name</Label>
-                  <Input id="ec_dialog_name" name="full_name" required />
+                  <Input
+                     id="ec_dialog_name"
+                     name="full_name"
+                     defaultValue={contact?.full_name ?? ""}
+                     required
+                  />
                   <FieldError errors={errors.full_name} />
                </div>
 
@@ -108,6 +120,7 @@ export function EmergencyContactDialog({
                      id="ec_dialog_email"
                      name="email_address"
                      type="email"
+                     defaultValue={contact?.email_address ?? ""}
                      required
                   />
                   <FieldError errors={errors.email_address} />
@@ -120,6 +133,7 @@ export function EmergencyContactDialog({
                      name="phone_number"
                      type="tel"
                      inputMode="numeric"
+                     defaultValue={contact?.phone_number ?? ""}
                      onChange={(e) => {
                         e.target.value = e.target.value.replace(/\D/g, "");
                      }}
@@ -133,6 +147,7 @@ export function EmergencyContactDialog({
                   <Input
                      id="ec_dialog_relationship"
                      name="relationship"
+                     defaultValue={contact?.relationship ?? ""}
                      required
                   />
                   <FieldError errors={errors.relationship} />
@@ -147,8 +162,14 @@ export function EmergencyContactDialog({
                      Cancel
                   </Button>
                   <Button type="submit">
-                     <Plus />
-                     Add contact
+                     {isEditing ? (
+                        "Save contact"
+                     ) : (
+                        <>
+                           <Plus />
+                           Add contact
+                        </>
+                     )}
                   </Button>
                </DialogFooter>
             </form>

From b88e0cdd7c5be31554c85bc281839642325e0a55 Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Sun, 2 Aug 2026 14:21:13 -0400
Subject: [PATCH 5/7] refactor(children): streamline child management actions
 and enhance validation

- Consolidated shared functions for handling emergency contacts and user ID retrieval.
- Updated validation schemas for creating and deleting children, ensuring robust error handling.
- Adjusted role checks to improve access control for parent users.
- Refactored revalidation logic to use a unified function for path updates.
---
 __tests__/children-actions.test.ts            | 213 ++++++++++++++++++
 __tests__/children-admin-actions.test.ts      | 158 +++++++++++++
 app/(authenticated)/children/actions.ts       |  80 +++----
 app/(authenticated)/children/page.tsx         |   6 +-
 .../children/child-detail-dialog.tsx          |   3 +-
 .../children/create-child-dialog.tsx          |  11 +-
 .../children/emergency-contact-dialog.tsx     |   3 +
 app/(authenticated)/users/children-actions.ts |  56 +----
 app/(authenticated)/users/children-schema.ts  |  42 +++-
 app/(authenticated)/users/children-shared.ts  |  51 +++++
 components/app-sidebar.tsx                    |   2 +-
 11 files changed, 519 insertions(+), 106 deletions(-)
 create mode 100644 __tests__/children-actions.test.ts
 create mode 100644 __tests__/children-admin-actions.test.ts
 create mode 100644 app/(authenticated)/users/children-shared.ts

diff --git a/__tests__/children-actions.test.ts b/__tests__/children-actions.test.ts
new file mode 100644
index 0000000..31bda2d
--- /dev/null
+++ b/__tests__/children-actions.test.ts
@@ -0,0 +1,213 @@
+/**
+ * @jest-environment node
+ */
+import {
+   createChild,
+   updateChild,
+   deleteChild,
+} from "@/app/(authenticated)/children/actions";
+import { revalidatePath } from "next/cache";
+
+const PARENT_ID = "11111111-1111-1111-1111-111111111111";
+const CHILD_ID = "22222222-2222-2222-2222-222222222222";
+const OTHER_CHILD = "33333333-3333-3333-3333-333333333333";
+
+const insertReturning = jest.fn();
+const insertValues = jest.fn(() => ({ returning: insertReturning }));
+const insert = jest.fn(() => ({ values: insertValues })) as jest.Mock;
+
+const deleteWhere = jest.fn().mockResolvedValue(undefined);
+const deleteFn = jest.fn(() => ({ where: deleteWhere })) as jest.Mock;
+
+const updateWhere = jest.fn().mockResolvedValue(undefined);
+const updateSet = jest.fn(() => ({ where: updateWhere }));
+const update = jest.fn(() => ({ set: updateSet })) as jest.Mock;
+
+const selectLimit = jest.fn();
+const selectWhere = jest.fn(() => ({ limit: selectLimit }));
+const selectFrom = jest.fn(() => ({ where: selectWhere }));
+const select = jest.fn(() => ({ from: selectFrom })) as jest.Mock;
+
+const transaction = jest.fn(async (cb: (tx: unknown) => unknown) =>
+   cb({ insert, update, delete: deleteFn }),
+);
+
+jest.mock("@/lib/db", () => ({
+   db: {
+      transaction: (...args: unknown[]) => transaction(...args),
+      select: (...args: unknown[]) => select(...args),
+      delete: (...args: unknown[]) => deleteFn(...args),
+   },
+}));
+
+const getUser = jest.fn();
+const getClaims = jest.fn();
+jest.mock("@/utils/supabase/server", () => ({
+   createClient: async () => ({ auth: { getUser, getClaims } }),
+}));
+
+jest.mock("next/cache", () => ({
+   revalidatePath: jest.fn(),
+}));
+
+const validContact = {
+   full_name: "Jane Doe",
+   email_address: "jane@example.com",
+   phone_number: "4165551234",
+   relationship: "Mother",
+};
+
+function fd(obj: Record<string, string>): FormData {
+   const f = new FormData();
+   for (const [k, v] of Object.entries(obj)) f.append(k, v);
+   return f;
+}
+
+function childFields(extra: Record<string, string> = {}) {
+   return fd({
+      first_name: "Kid",
+      last_name: "Name",
+      dob: "2018-05-01",
+      gender: "male",
+      emergency_contacts: JSON.stringify([validContact]),
+      ...extra,
+   });
+}
+
+beforeEach(() => {
+   jest.clearAllMocks();
+   getUser.mockResolvedValue({ data: { user: { id: PARENT_ID } } });
+   getClaims.mockResolvedValue({ data: { claims: { user_role: "user" } } });
+   insertReturning.mockResolvedValue([{ id: CHILD_ID }]);
+   selectLimit.mockResolvedValue([{ id: CHILD_ID }]);
+});
+
+describe("createChild", () => {
+   it("returns Unauthorized when not signed in", async () => {
+      getUser.mockResolvedValue({ data: { user: null } });
+
+      const result = await createChild(null, childFields());
+
+      expect(result).toEqual({ errors: { _form: ["Unauthorized"] } });
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("returns Unauthorized for coordinators", async () => {
+      getClaims.mockResolvedValue({
+         data: { claims: { user_role: "coordinator" } },
+      });
+
+      const result = await createChild(null, childFields());
+
+      expect(result).toEqual({ errors: { _form: ["Unauthorized"] } });
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("rejects a future date of birth", async () => {
+      const result = await createChild(
+         null,
+         childFields({ dob: "2099-01-01" }),
+      );
+
+      expect(result?.errors?.dob).toBeDefined();
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("rejects a short phone number", async () => {
+      const result = await createChild(
+         null,
+         childFields({
+            emergency_contacts: JSON.stringify([
+               { ...validContact, phone_number: "123" },
+            ]),
+         }),
+      );
+
+      expect(result?.errors?.emergency_contacts).toBeDefined();
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("requires at least one emergency contact", async () => {
+      const result = await createChild(
+         null,
+         childFields({ emergency_contacts: "[]" }),
+      );
+
+      expect(result?.errors?.emergency_contacts).toBeDefined();
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("creates a child for the signed-in parent", async () => {
+      const result = await createChild(null, childFields());
+
+      expect(result).toEqual({
+         message: "Child created.",
+         data: { childId: CHILD_ID },
+      });
+      expect(insertValues).toHaveBeenCalledWith(
+         expect.objectContaining({
+            parentId: PARENT_ID,
+            firstName: "Kid",
+            lastName: "Name",
+         }),
+      );
+      expect(revalidatePath).toHaveBeenCalledWith("/children");
+      expect(revalidatePath).toHaveBeenCalledWith("/users");
+   });
+});
+
+describe("updateChild", () => {
+   it("blocks updates for children the parent does not own", async () => {
+      selectLimit.mockResolvedValue([]);
+
+      const result = await updateChild(
+         null,
+         childFields({ child_id: OTHER_CHILD }),
+      );
+
+      expect(result).toEqual({ errors: { _form: ["Child not found"] } });
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("updates an owned child", async () => {
+      const result = await updateChild(
+         null,
+         childFields({ child_id: CHILD_ID, first_name: "Updated" }),
+      );
+
+      expect(result).toEqual({
+         message: "Child updated.",
+         data: { childId: CHILD_ID },
+      });
+      expect(updateSet).toHaveBeenCalledWith(
+         expect.objectContaining({ firstName: "Updated" }),
+      );
+   });
+});
+
+describe("deleteChild", () => {
+   it("rejects a non-uuid child_id", async () => {
+      const result = await deleteChild(null, fd({ child_id: "not-a-uuid" }));
+
+      expect(result?.errors?.child_id).toBeDefined();
+      expect(deleteFn).not.toHaveBeenCalled();
+   });
+
+   it("blocks deleting a child the parent does not own", async () => {
+      selectLimit.mockResolvedValue([]);
+
+      const result = await deleteChild(null, fd({ child_id: OTHER_CHILD }));
+
+      expect(result).toEqual({ errors: { _form: ["Child not found"] } });
+      expect(deleteFn).not.toHaveBeenCalled();
+   });
+
+   it("deletes an owned child", async () => {
+      const result = await deleteChild(null, fd({ child_id: CHILD_ID }));
+
+      expect(result).toEqual({ message: "Child deleted." });
+      expect(deleteFn).toHaveBeenCalled();
+      expect(revalidatePath).toHaveBeenCalledWith("/children");
+      expect(revalidatePath).toHaveBeenCalledWith("/users");
+   });
+});
diff --git a/__tests__/children-admin-actions.test.ts b/__tests__/children-admin-actions.test.ts
new file mode 100644
index 0000000..9fc5dcc
--- /dev/null
+++ b/__tests__/children-admin-actions.test.ts
@@ -0,0 +1,158 @@
+/**
+ * @jest-environment node
+ */
+import {
+   createChildAdmin,
+   updateChildAdmin,
+   listChildrenForUserAdmin,
+} from "@/app/(authenticated)/users/children-actions";
+import { revalidatePath } from "next/cache";
+
+const PARENT_ID = "11111111-1111-1111-1111-111111111111";
+const CHILD_ID = "22222222-2222-2222-2222-222222222222";
+
+const insertReturning = jest.fn();
+const insertValues = jest.fn(() => ({ returning: insertReturning }));
+const insert = jest.fn(() => ({ values: insertValues })) as jest.Mock;
+
+const deleteWhere = jest.fn().mockResolvedValue(undefined);
+const deleteFn = jest.fn(() => ({ where: deleteWhere })) as jest.Mock;
+
+const updateWhere = jest.fn().mockResolvedValue(undefined);
+const updateSet = jest.fn(() => ({ where: updateWhere }));
+const update = jest.fn(() => ({ set: updateSet })) as jest.Mock;
+
+const selectLimit = jest.fn();
+const selectWhere = jest.fn(() => ({ limit: selectLimit }));
+const selectFrom = jest.fn(() => ({ where: selectWhere }));
+const select = jest.fn(() => ({ from: selectFrom })) as jest.Mock;
+
+const transaction = jest.fn(async (cb: (tx: unknown) => unknown) =>
+   cb({ insert, update, delete: deleteFn }),
+);
+
+jest.mock("@/lib/db", () => ({
+   db: {
+      transaction: (...args: unknown[]) => transaction(...args),
+      select: (...args: unknown[]) => select(...args),
+   },
+}));
+
+jest.mock("@/app/(authenticated)/users/children-queries", () => ({
+   listChildrenForParent: jest.fn().mockResolvedValue([]),
+}));
+
+const requireAdmin = jest.fn();
+jest.mock("@/lib/auth/require-admin", () => ({
+   requireAdmin: (...args: unknown[]) => requireAdmin(...args),
+}));
+
+jest.mock("next/cache", () => ({
+   revalidatePath: jest.fn(),
+}));
+
+const validContact = {
+   full_name: "Jane Doe",
+   email_address: "jane@example.com",
+   phone_number: "4165551234",
+   relationship: "Mother",
+};
+
+function fd(obj: Record<string, string>): FormData {
+   const f = new FormData();
+   for (const [k, v] of Object.entries(obj)) f.append(k, v);
+   return f;
+}
+
+function childFields(extra: Record<string, string> = {}) {
+   return fd({
+      parent_id: PARENT_ID,
+      first_name: "Kid",
+      last_name: "Name",
+      dob: "2018-05-01",
+      gender: "female",
+      emergency_contacts: JSON.stringify([validContact]),
+      ...extra,
+   });
+}
+
+beforeEach(() => {
+   jest.clearAllMocks();
+   requireAdmin.mockResolvedValue(undefined);
+   insertReturning.mockResolvedValue([{ id: CHILD_ID }]);
+   // first select = parent exists; second (update) = child exists
+   selectLimit.mockResolvedValue([{ id: PARENT_ID }]);
+});
+
+describe("listChildrenForUserAdmin", () => {
+   it("returns Unauthorized when the caller is not an admin", async () => {
+      requireAdmin.mockRejectedValue(new Error("Forbidden"));
+
+      const result = await listChildrenForUserAdmin(PARENT_ID);
+
+      expect(result).toEqual({ error: "Unauthorized" });
+   });
+});
+
+describe("createChildAdmin", () => {
+   it("returns Unauthorized when the caller is not an admin", async () => {
+      requireAdmin.mockRejectedValue(new Error("Forbidden"));
+
+      const result = await createChildAdmin(null, childFields());
+
+      expect(result).toEqual({ errors: { _form: ["Unauthorized"] } });
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("rejects when the parent profile does not exist", async () => {
+      selectLimit.mockResolvedValue([]);
+
+      const result = await createChildAdmin(null, childFields());
+
+      expect(result).toEqual({ errors: { _form: ["User not found"] } });
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("creates a child for the given parent", async () => {
+      const result = await createChildAdmin(null, childFields());
+
+      expect(result).toEqual({
+         message: "Child created.",
+         data: { childId: CHILD_ID },
+      });
+      expect(insertValues).toHaveBeenCalledWith(
+         expect.objectContaining({ parentId: PARENT_ID, firstName: "Kid" }),
+      );
+      expect(revalidatePath).toHaveBeenCalledWith("/users");
+      expect(revalidatePath).toHaveBeenCalledWith("/children");
+   });
+});
+
+describe("updateChildAdmin", () => {
+   it("rejects clearing required fields via schema", async () => {
+      const result = await updateChildAdmin(
+         null,
+         childFields({ child_id: CHILD_ID, first_name: "" }),
+      );
+
+      expect(result?.errors?.first_name).toBeDefined();
+      expect(transaction).not.toHaveBeenCalled();
+   });
+
+   it("updates when the child belongs to the parent", async () => {
+      selectLimit.mockResolvedValue([{ id: CHILD_ID }]);
+
+      const result = await updateChildAdmin(
+         null,
+         childFields({ child_id: CHILD_ID, first_name: "Pat" }),
+      );
+
+      expect(result).toEqual({
+         message: "Child updated.",
+         data: { childId: CHILD_ID },
+      });
+      expect(updateSet).toHaveBeenCalledWith(
+         expect.objectContaining({ firstName: "Pat" }),
+      );
+   });
+});
diff --git a/app/(authenticated)/children/actions.ts b/app/(authenticated)/children/actions.ts
index 04d1410..46f2dd5 100644
--- a/app/(authenticated)/children/actions.ts
+++ b/app/(authenticated)/children/actions.ts
@@ -1,68 +1,42 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
 import { and, eq } from "drizzle-orm";
 
 import { createClient } from "@/utils/supabase/server";
 import { db } from "@/lib/db";
 import { children, emergencyContacts } from "@/lib/db/schema";
+import { ROLES } from "@/lib/roles";
 import {
    createChildSchema,
+   deleteChildSchema,
    updateChildSchema,
+   type ChildActionState,
 } from "@/app/(authenticated)/users/children-schema";
-import type { ChildActionState } from "@/app/(authenticated)/users/children-actions";
-
-const CHILDREN_PATH = "/children";
-
-function field(formData: FormData, name: string): string | undefined {
-   const v = formData.get(name);
-   return v === null ? undefined : v.toString();
-}
-
-function parseEmergencyContacts(formData: FormData) {
-   const contactsRaw = field(formData, "emergency_contacts");
-   try {
-      return contactsRaw ? JSON.parse(contactsRaw) : [];
-   } catch {
-      return null;
-   }
-}
-
-async function insertEmergencyContacts(
-   tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
-   childId: string,
-   contacts: {
-      full_name: string;
-      email_address: string;
-      phone_number: string;
-      relationship: string;
-   }[],
-) {
-   if (contacts.length === 0) return;
-   await tx.insert(emergencyContacts).values(
-      contacts.map((c) => ({
-         childId,
-         fullName: c.full_name,
-         emailAddress: c.email_address,
-         phoneNumber: c.phone_number,
-         relationship: c.relationship,
-      })),
-   );
-}
+import {
+   field,
+   insertEmergencyContacts,
+   parseEmergencyContacts,
+   revalidateChildrenPaths,
+} from "@/app/(authenticated)/users/children-shared";
 
-async function requireUserId(): Promise<string | null> {
+async function requireParentUserId(): Promise<string | null> {
    const supabase = await createClient();
    const {
       data: { user },
    } = await supabase.auth.getUser();
-   return user?.id ?? null;
+   if (!user) return null;
+
+   const { data: claimsData } = await supabase.auth.getClaims();
+   if (claimsData?.claims?.user_role !== ROLES.USER) return null;
+
+   return user.id;
 }
 
 export async function createChild(
    _prev: ChildActionState,
    formData: FormData,
 ): Promise<ChildActionState> {
-   const userId = await requireUserId();
+   const userId = await requireParentUserId();
    if (!userId) return { errors: { _form: ["Unauthorized"] } };
 
    const emergency_contacts = parseEmergencyContacts(formData);
@@ -107,7 +81,7 @@ export async function createChild(
          return child.id;
       });
 
-      revalidatePath(CHILDREN_PATH);
+      revalidateChildrenPaths();
       return { message: "Child created.", data: { childId } };
    } catch {
       return {
@@ -120,7 +94,7 @@ export async function updateChild(
    _prev: ChildActionState,
    formData: FormData,
 ): Promise<ChildActionState> {
-   const userId = await requireUserId();
+   const userId = await requireParentUserId();
    if (!userId) return { errors: { _form: ["Unauthorized"] } };
 
    const emergency_contacts = parseEmergencyContacts(formData);
@@ -183,7 +157,7 @@ export async function updateChild(
          );
       });
 
-      revalidatePath(CHILDREN_PATH);
+      revalidateChildrenPaths();
       return { message: "Child updated.", data: { childId: data.child_id } };
    } catch {
       return {
@@ -196,11 +170,17 @@ export async function deleteChild(
    _prev: ChildActionState,
    formData: FormData,
 ): Promise<ChildActionState> {
-   const userId = await requireUserId();
+   const userId = await requireParentUserId();
    if (!userId) return { errors: { _form: ["Unauthorized"] } };
 
-   const childId = field(formData, "child_id");
-   if (!childId) return { errors: { _form: ["Child not found"] } };
+   const parsed = deleteChildSchema.safeParse({
+      child_id: field(formData, "child_id"),
+   });
+   if (!parsed.success) {
+      return { errors: parsed.error.flatten().fieldErrors };
+   }
+
+   const { child_id: childId } = parsed.data;
 
    const [existing] = await db
       .select({ id: children.id })
@@ -212,7 +192,7 @@ export async function deleteChild(
 
    try {
       await db.delete(children).where(eq(children.id, childId));
-      revalidatePath(CHILDREN_PATH);
+      revalidateChildrenPaths();
       return { message: "Child deleted." };
    } catch {
       return {
diff --git a/app/(authenticated)/children/page.tsx b/app/(authenticated)/children/page.tsx
index 227987d..de82c32 100644
--- a/app/(authenticated)/children/page.tsx
+++ b/app/(authenticated)/children/page.tsx
@@ -28,9 +28,13 @@ async function ChildrenContent() {
    }
 
    const { data: claimsData } = await supabase.auth.getClaims();
-   if (claimsData?.claims?.user_role === ROLES.ADMIN) {
+   const role = claimsData?.claims?.user_role;
+   if (role === ROLES.ADMIN) {
       redirect("/users");
    }
+   if (role !== ROLES.USER) {
+      redirect("/");
+   }
 
    const childList = await listChildrenForParent(user.id);
 
diff --git a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
index b66d2cd..821e160 100644
--- a/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/child-detail-dialog.tsx
@@ -27,8 +27,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import {
    updateChildAdmin,
-   type ChildActionState,
 } from "@/app/(authenticated)/users/children-actions";
+import type { ChildActionState } from "@/app/(authenticated)/users/children-schema";
 import type { ChildView } from "@/app/(authenticated)/users/children-queries";
 
 import { DobField } from "./dob-field";
@@ -268,6 +268,7 @@ function ChildEditForm({
                      <button
                         type="button"
                         className="flex w-full items-center justify-between px-4 py-3 text-left"
+                        aria-expanded={ecSectionOpen}
                         onClick={() => setEcSectionOpen((o) => !o)}
                      >
                         <span className="text-sm font-medium">
diff --git a/app/(authenticated)/users/_components/children/create-child-dialog.tsx b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
index 9ce96d5..b8a4c01 100644
--- a/app/(authenticated)/users/_components/children/create-child-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/create-child-dialog.tsx
@@ -27,8 +27,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import {
    createChildAdmin,
-   type ChildActionState,
 } from "@/app/(authenticated)/users/children-actions";
+import type { ChildActionState } from "@/app/(authenticated)/users/children-schema";
 
 import { DobField } from "./dob-field";
 import {
@@ -52,12 +52,16 @@ export function CreateChildDialog({
    onOpenChange,
    onSuccess,
    action = createChildAdmin,
+   description = parentId
+      ? "Create a child profile for this user."
+      : "Create a child profile linked to your account.",
 }: {
    parentId?: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
    action?: ChildFormAction;
+   description?: string;
 }) {
    const [formKey, setFormKey] = useState(0);
    const [gender, setGender] = useState("");
@@ -167,9 +171,7 @@ export function CreateChildDialog({
                <DialogContent className="flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
                   <DialogHeader className="shrink-0 border-b border-border px-6 py-4">
                      <DialogTitle>Add child</DialogTitle>
-                     <DialogDescription>
-                        Create a child profile for this user.
-                     </DialogDescription>
+                     <DialogDescription>{description}</DialogDescription>
                   </DialogHeader>
 
                   <form
@@ -273,6 +275,7 @@ export function CreateChildDialog({
                            <button
                               type="button"
                               className="flex w-full items-center justify-between px-4 py-3 text-left"
+                              aria-expanded={ecSectionOpen}
                               onClick={() => setEcSectionOpen((o) => !o)}
                            >
                               <span className="text-sm font-medium">
diff --git a/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
index 3cdcc41..007c012 100644
--- a/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
+++ b/app/(authenticated)/users/_components/children/emergency-contact-dialog.tsx
@@ -73,6 +73,9 @@ export function EmergencyContactDialog({
          nextErrors.email_address = ["Invalid email address"];
       }
       if (!phone_number) nextErrors.phone_number = ["Phone number is required"];
+      else if (!/^\d{10,15}$/.test(phone_number)) {
+         nextErrors.phone_number = ["Phone number must be 10–15 digits"];
+      }
       if (!relationship) nextErrors.relationship = ["Relationship is required"];
 
       if (Object.keys(nextErrors).length > 0) {
diff --git a/app/(authenticated)/users/children-actions.ts b/app/(authenticated)/users/children-actions.ts
index 524353a..080966c 100644
--- a/app/(authenticated)/users/children-actions.ts
+++ b/app/(authenticated)/users/children-actions.ts
@@ -1,6 +1,5 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
 import { and, eq } from "drizzle-orm";
 
 import { requireAdmin } from "@/lib/auth/require-admin";
@@ -9,55 +8,20 @@ import { children, emergencyContacts, profiles } from "@/lib/db/schema";
 import {
    createChildAdminSchema,
    updateChildAdminSchema,
+   type ChildActionState,
 } from "./children-schema";
 import {
    listChildrenForParent,
    type ChildView,
 } from "./children-queries";
+import {
+   field,
+   insertEmergencyContacts,
+   parseEmergencyContacts,
+   revalidateChildrenPaths,
+} from "./children-shared";
 
-export type ChildActionState = {
-   errors?: Record<string, string[]>;
-   message?: string;
-   data?: { childId: string };
-} | null;
-
-const USERS_PATH = "/users";
-
-function field(formData: FormData, name: string): string | undefined {
-   const v = formData.get(name);
-   return v === null ? undefined : v.toString();
-}
-
-function parseEmergencyContacts(formData: FormData) {
-   const contactsRaw = field(formData, "emergency_contacts");
-   try {
-      return contactsRaw ? JSON.parse(contactsRaw) : [];
-   } catch {
-      return null;
-   }
-}
-
-async function insertEmergencyContacts(
-   tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
-   childId: string,
-   contacts: {
-      full_name: string;
-      email_address: string;
-      phone_number: string;
-      relationship: string;
-   }[],
-) {
-   if (contacts.length === 0) return;
-   await tx.insert(emergencyContacts).values(
-      contacts.map((c) => ({
-         childId,
-         fullName: c.full_name,
-         emailAddress: c.email_address,
-         phoneNumber: c.phone_number,
-         relationship: c.relationship,
-      })),
-   );
-}
+export type { ChildActionState };
 
 export async function listChildrenForUserAdmin(
    parentId: string,
@@ -134,7 +98,7 @@ export async function createChildAdmin(
          return child.id;
       });
 
-      revalidatePath(USERS_PATH);
+      revalidateChildrenPaths();
       return { message: "Child created.", data: { childId } };
    } catch {
       return {
@@ -217,7 +181,7 @@ export async function updateChildAdmin(
          );
       });
 
-      revalidatePath(USERS_PATH);
+      revalidateChildrenPaths();
       return { message: "Child updated.", data: { childId: data.child_id } };
    } catch {
       return {
diff --git a/app/(authenticated)/users/children-schema.ts b/app/(authenticated)/users/children-schema.ts
index 31c2ae9..43ea9cd 100644
--- a/app/(authenticated)/users/children-schema.ts
+++ b/app/(authenticated)/users/children-schema.ts
@@ -2,17 +2,43 @@ import { z } from "zod";
 
 const genderSchema = z.enum(["male", "female", "prefer_not_to_say"]);
 
-const emergencyContactSchema = z.object({
+function isValidPastOrTodayDate(iso: string): boolean {
+   if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false;
+   const [y, m, d] = iso.split("-").map(Number);
+   if (!y || !m || !d) return false;
+   const date = new Date(y, m - 1, d);
+   if (
+      date.getFullYear() !== y ||
+      date.getMonth() !== m - 1 ||
+      date.getDate() !== d
+   ) {
+      return false;
+   }
+   const today = new Date();
+   today.setHours(23, 59, 59, 999);
+   return date <= today;
+}
+
+export const emergencyContactSchema = z.object({
    full_name: z.string().min(1, "Full name is required"),
    email_address: z.string().email("Invalid email address"),
-   phone_number: z.string().min(1, "Phone number is required"),
+   phone_number: z
+      .string()
+      .regex(/^\d{10,15}$/, "Phone number must be 10–15 digits"),
    relationship: z.string().min(1, "Relationship is required"),
 });
 
+const dobSchema = z
+   .string()
+   .regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date of birth")
+   .refine(isValidPastOrTodayDate, {
+      message: "Date of birth must be a real date that is not in the future",
+   });
+
 export const createChildSchema = z.object({
    first_name: z.string().min(1, "First name is required"),
    last_name: z.string().min(1, "Last name is required"),
-   dob: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date of birth"),
+   dob: dobSchema,
    gender: genderSchema,
    allergies: z.string().optional(),
    medical_conditions: z.string().optional(),
@@ -26,6 +52,10 @@ export const updateChildSchema = createChildSchema.extend({
    child_id: z.string().uuid(),
 });
 
+export const deleteChildSchema = z.object({
+   child_id: z.string().uuid(),
+});
+
 export const createChildAdminSchema = createChildSchema.extend({
    parent_id: z.string().uuid(),
 });
@@ -33,3 +63,9 @@ export const createChildAdminSchema = createChildSchema.extend({
 export const updateChildAdminSchema = updateChildSchema.extend({
    parent_id: z.string().uuid(),
 });
+
+export type ChildActionState = {
+   errors?: Record<string, string[]>;
+   message?: string;
+   data?: { childId: string };
+} | null;
diff --git a/app/(authenticated)/users/children-shared.ts b/app/(authenticated)/users/children-shared.ts
new file mode 100644
index 0000000..9f2ae4b
--- /dev/null
+++ b/app/(authenticated)/users/children-shared.ts
@@ -0,0 +1,51 @@
+import { revalidatePath } from "next/cache";
+
+import { db } from "@/lib/db";
+import { emergencyContacts } from "@/lib/db/schema";
+
+const USERS_PATH = "/users";
+const CHILDREN_PATH = "/children";
+
+export function field(
+   formData: FormData,
+   name: string,
+): string | undefined {
+   const v = formData.get(name);
+   return v === null ? undefined : v.toString();
+}
+
+export function parseEmergencyContacts(formData: FormData) {
+   const contactsRaw = field(formData, "emergency_contacts");
+   try {
+      return contactsRaw ? JSON.parse(contactsRaw) : [];
+   } catch {
+      return null;
+   }
+}
+
+export async function insertEmergencyContacts(
+   tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
+   childId: string,
+   contacts: {
+      full_name: string;
+      email_address: string;
+      phone_number: string;
+      relationship: string;
+   }[],
+) {
+   if (contacts.length === 0) return;
+   await tx.insert(emergencyContacts).values(
+      contacts.map((c) => ({
+         childId,
+         fullName: c.full_name,
+         emailAddress: c.email_address,
+         phoneNumber: c.phone_number,
+         relationship: c.relationship,
+      })),
+   );
+}
+
+export function revalidateChildrenPaths() {
+   revalidatePath(USERS_PATH);
+   revalidatePath(CHILDREN_PATH);
+}
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index 22d565d..eb516af 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -57,7 +57,7 @@ export function AppSidebar({
       const items = baseNavItems.filter(
          (item) => isAdmin || item.href !== "/users",
       );
-      if (role && !isAdmin) {
+      if (role === ROLES.USER) {
          const servicesIdx = items.findIndex((i) => i.href === "/services");
          const insertAt = servicesIdx >= 0 ? servicesIdx + 1 : items.length;
          items.splice(insertAt, 0, {

From d3a78cd29fb86ef5b57762be2d1796920ed88b1f Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Sun, 2 Aug 2026 14:57:00 -0400
Subject: [PATCH 6/7] feat(sidebar): add Children tab for user navigation

- Introduced a new "CHILDREN" item in the sidebar for user roles, allowing easier access to child management features.
- Adjusted the sidebar items to ensure non-admin users have a streamlined navigation experience.
---
 components/app-sidebar.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index eb516af..e2dfd6d 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -58,9 +58,7 @@ export function AppSidebar({
          (item) => isAdmin || item.href !== "/users",
       );
       if (role === ROLES.USER) {
-         const servicesIdx = items.findIndex((i) => i.href === "/services");
-         const insertAt = servicesIdx >= 0 ? servicesIdx + 1 : items.length;
-         items.splice(insertAt, 0, {
+         items.push({
             title: "CHILDREN",
             href: "/children",
             icon: Baby,

From 5c9c5300cacedc66a89a378fc6c006ebe9ec607d Mon Sep 17 00:00:00 2001
From: Berny-ft <berenis.fopa@gmail.com>
Date: Sun, 2 Aug 2026 15:07:14 -0400
Subject: [PATCH 7/7] refactor(children-actions): remove unused export for
 ChildActionState

- Eliminated the export of ChildActionState from children-actions.ts to clean up the code and improve maintainability.
---
 app/(authenticated)/users/children-actions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/(authenticated)/users/children-actions.ts b/app/(authenticated)/users/children-actions.ts
index 080966c..1755666 100644
--- a/app/(authenticated)/users/children-actions.ts
+++ b/app/(authenticated)/users/children-actions.ts
@@ -21,7 +21,6 @@ import {
    revalidateChildrenPaths,
 } from "./children-shared";
 
-export type { ChildActionState };
 
 export async function listChildrenForUserAdmin(
    parentId: string,