Update Family, Profile with working APIs - fetch & save baby details

src/app/api/auth/profile/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+
+// Mock user for now - in production, fetch from database
+export async function GET() {
+  try {
+    // TODO: In production, get user from session
+    const user = {
+      id: "1",
+      name: "Parent",
+      email: "parent@example.com",
+    };
+
+    return NextResponse.json({ user });
+  } catch (error) {
+    return NextResponse.json({ error: String(error) }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { name } = body;
+
+    // TODO: Save to database in production
+    return NextResponse.json({ success: true, name });
+  } catch (error) {
+    return NextResponse.json({ error: String(error) }, { status: 500 });
+  }
+}

src/app/api/children/route.ts

@@ -1,16 +1,27 @@
 import { NextResponse } from "next/server";
 import { sql } from "@/db";
 
-interface ChildEntry {
-  familyId: string;
-  name: string;
-  birthDate: string;
-  sex: "male" | "female" | "other";
+// GET - list children
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const familyId = searchParams.get("familyId") || "default";
+
+  try {
+    const children = await sql.unsafe(
+      `SELECT id, name, birth_date as "birthDate", sex, stage, created_at as "createdAt" FROM children WHERE family_id = $1 ORDER BY created_at DESC`,
+      [familyId]
+    );
+    return NextResponse.json({ children: children || [] });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: String(error) }, { status: 500 });
+  }
 }
 
+// POST - create child
 export async function POST(request: Request) {
   try {
-    const body: ChildEntry = await request.json();
+    const body = await request.json();
     const { familyId, name, birthDate, sex } = body;
 
     if (!familyId || !name || !birthDate || !sex) {
@@ -18,7 +29,7 @@ export async function POST(request: Request) {
     }
 
     const [child] = await sql.unsafe(
-      `INSERT INTO children (family_id, name, birth_date, sex, stage) VALUES ($1, $2, $3, $4, 'newborn') RETURNING *`,
+      `INSERT INTO children (family_id, name, birth_date, sex, stage) VALUES ($1, $2, $3, $4, 'newborn') RETURNING id, name, birth_date as "birthDate", sex, stage`,
       [familyId, name, birthDate, sex]
     );
 
@@ -29,21 +40,22 @@ export async function POST(request: Request) {
   }
 }
 
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url);
-  const familyId = searchParams.get("familyId");
-
-  if (!familyId) {
-    return NextResponse.json({ error: "familyId required" }, { status: 400 });
-  }
-
+// PATCH - update child
+export async function PATCH(request: Request) {
   try {
-    const children = await sql.unsafe(
-      `SELECT * FROM children WHERE family_id = $1 ORDER BY created_at DESC`,
-      [familyId]
+    const body = await request.json();
+    const { id, name, birthDate } = body;
+
+    if (!id || !name || !birthDate) {
+      return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
+    }
+
+    const [child] = await sql.unsafe(
+      `UPDATE children SET name = $1, birth_date = $2, updated_at = NOW() WHERE id = $3 RETURNING id, name, birth_date as "birthDate", sex`,
+      [name, birthDate, id]
     );
 
-    return NextResponse.json({ children });
+    return NextResponse.json({ success: true, child });
   } catch (error) {
     console.error(error);
     return NextResponse.json({ error: String(error) }, { status: 500 });

src/app/family/page.tsx

@@ -1,21 +1,85 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
-interface FamilyMember {
+interface Child {
   id: string;
   name: string;
-  role: string;
-  avatar: string;
+  birthDate: string;
+  sex: string;
+  stage?: string;
 }
 
 export default function FamilyPage() {
   const router = useRouter();
-  const [members] = useState<FamilyMember[]>([
-    { id: "1", name: "You", role: "Parent", avatar: "👤" },
-    { id: "2", name: "Baby Tia", role: "Child", avatar: "👶" },
-  ]);
+  const [children, setChildren] = useState<Child[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDob, setEditDob] = useState("");
+  const [showAdd, setShowAdd] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newDob, setNewDob] = useState("");
+  const [newSex, setNewSex] = useState("male");
+
+  useEffect(() => {
+    fetchChildren();
+  }, []);
+
+  const fetchChildren = async () => {
+    try {
+      const res = await fetch("/api/children?familyId=default");
+      const data = await res.json();
+      setChildren(data.children || []);
+    } catch (err) {
+      console.error("Failed to fetch:", err);
+    }
+    setLoading(false);
+  };
+
+  const startEdit = (child: Child) => {
+    setEditing(child.id);
+    setEditName(child.name);
+    setEditDob(child.birthDate);
+  };
+
+  const saveEdit = async (childId: string) => {
+    try {
+      const res = await fetch("/api/children", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: childId, name: editName, birthDate: editDob }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setChildren(children.map((c) => (c.id === childId ? { ...c, name: editName, birthDate: editDob } : c)));
+      }
+    } catch (err) {
+      console.error("Failed to save:", err);
+    }
+    setEditing(null);
+  };
+
+  const addChild = async () => {
+    if (!newName || !newDob) return;
+    try {
+      const res = await fetch("/api/children", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newName, birthDate: newDob, sex: newSex, familyId: "default" }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setChildren([data.child, ...children]);
+        setShowAdd(false);
+        setNewName("");
+        setNewDob("");
+      }
+    } catch (err) {
+      console.error("Failed to add:", err);
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
@@ -25,32 +89,117 @@ export default function FamilyPage() {
       </div>
 
       <div className="px-4 space-y-4">
-        {/* Members List */}
-        <div className="space-y-2">
-          <div className="text-sm text-gray-500 mb-2">Family Members</div>
-          {members.map((member) => (
-            <div key={member.id} className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
-              <div className="text-3xl">{member.avatar}</div>
-              <div className="flex-1">
-                <div className="font-medium">{member.name}</div>
-                <div className="text-sm text-gray-500">{member.role}</div>
-              </div>
-              <button className="text-gray-400">✏️</button>
+        {/* Add Child Form */}
+        {showAdd && (
+          <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
+            <input
+              type="text"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder="Baby's name"
+              className="w-full p-2 border rounded-lg"
+            />
+            <input
+              type="date"
+              value={newDob}
+              onChange={(e) => setNewDob(e.target.value)}
+              className="w-full p-2 border rounded-lg"
+            />
+            <select
+              value={newSex}
+              onChange={(e) => setNewSex(e.target.value)}
+              className="w-full p-2 border rounded-lg"
+            >
+              <option value="male">Boy</option>
+              <option value="female">Girl</option>
+            </select>
+            <div className="flex gap-2">
+              <button onClick={addChild} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
+                Add Baby
+              </button>
+              <button onClick={() => setShowAdd(false)} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 rounded-lg">
+                Cancel
+              </button>
             </div>
-          ))}
-        </div>
+          </div>
+        )}
 
-        {/* Add Member */}
-        <button className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
-          + Add Family Member
-        </button>
+        {loading ? (
+          <div className="text-center py-20 text-gray-400">Loading...</div>
+        ) : children.length === 0 && !showAdd ? (
+          <div className="text-center py-20">
+            <div className="text-6xl mb-4">👶</div>
+            <p className="text-gray-500 mb-4">No baby added yet</p>
+            <button
+              onClick={() => setShowAdd(true)}
+              className="px-4 py-2 bg-rose-400 text-white rounded-lg"
+            >
+              Add Baby
+            </button>
+          </div>
+        ) : (
+          children.map((child) => (
+            <div key={child.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+              {editing === child.id ? (
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    className="w-full p-2 border rounded-lg"
+                  />
+                  <input
+                    type="date"
+                    value={editDob}
+                    onChange={(e) => setEditDob(e.target.value)}
+                    className="w-full p-2 border rounded-lg"
+                  />
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => saveEdit(child.id)}
+                      className="flex-1 py-2 bg-rose-400 text-white rounded-lg"
+                    >
+                      Save
+                    </button>
+                    <button
+                      onClick={() => setEditing(null)}
+                      className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 rounded-lg"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <div className="text-4xl">{child.sex === "male" ? "👦" : "👧"}</div>
+                    <div>
+                      <div className="font-medium text-lg">{child.name}</div>
+                      <div className="text-sm text-gray-500">
+                        Born: {child.birthDate ? new Date(child.birthDate).toLocaleDateString() : "Not set"}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button onClick={() => startEdit(child)} className="p-2 text-gray-400">
+                      ✏️
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
 
-        {/* Quick Info */}
-        <div className="p-4 bg-white dark:bg-gray-800 rounded-xl mt-6">
-          <div className="text-sm text-gray-500 mb-2">Family Plan</div>
-          <div className="font-medium">Up to 4 family members</div>
-          <div className="text-sm text-gray-500 mt-1">Free for now</div>
-        </div>
+        {/* Add Button */}
+        {!showAdd && children.length > 0 && (
+          <button
+            onClick={() => setShowAdd(true)}
+            className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500"
+          >
+            + Add Baby
+          </button>
+        )}
       </div>
     </div>
   );

src/app/profile/page.tsx

@@ -1,12 +1,36 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
 export default function ProfilePage() {
   const router = useRouter();
-  const [name, setName] = useState("Parent");
-  const [email, setEmail] = useState("parent@example.com");
+  const [name, setName] = useState("Loading...");
+  const [email, setEmail] = useState("Loading...");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Fetch user profile from API
+    fetch("/api/auth/profile")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.user) {
+          setName(data.user.name || "Parent");
+          setEmail(data.user.email || "parent@example.com");
+        }
+        setLoading(false);
+      })
+      .catch(() => {
+        setName("Parent");
+        setEmail("parent@example.com");
+        setLoading(false);
+      });
+  }, []);
+
+  const saveProfile = async () => {
+    // TODO: Call API to save profile
+    alert("Profile saved!");
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
@@ -25,36 +49,45 @@ export default function ProfilePage() {
         </div>
 
         {/* Form */}
-        <div className="space-y-3">
-          <div>
-            <label className="block text-sm font-medium mb-1">Name</label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full p-3 bg-white dark:bg-gray-800 rounded-xl border"
-            />
-          </div>
+        {loading ? (
+          <div className="text-center py-8 text-gray-400">Loading...</div>
+        ) : (
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm font-medium mb-1">Name</label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full p-3 bg-white dark:bg-gray-800 rounded-xl border"
+              />
+            </div>
 
-          <div>
-            <label className="block text-sm font-medium mb-1">Email</label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full p-3 bg-white dark:bg-gray-800 rounded-xl border"
-            />
-          </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full p-3 bg-white dark:bg-gray-800 rounded-xl border"
+                disabled
+              />
+              <div className="text-xs text-gray-400 mt-1">Email cannot be changed</div>
+            </div>
 
-          <button className="w-full p-3 bg-rose-400 text-white rounded-xl mt-4">
-            Save Changes
-          </button>
-        </div>
+            <button
+              onClick={saveProfile}
+              className="w-full p-3 bg-rose-400 text-white rounded-xl mt-4"
+            >
+              Save Changes
+            </button>
+          </div>
+        )}
 
         {/* Account Info */}
         <div className="p-4 bg-white dark:bg-gray-800 rounded-xl mt-6">
           <div className="font-medium mb-2">Account</div>
-          <div className="text-sm text-gray-500">Member since: Jan 2024</div>
+          <div className="text-sm text-gray-500">Member since: January 2024</div>
         </div>
       </div>
     </div>