Add growth tracking and memories gallery pages

src/app/growth/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export default function GrowthPage() {
+  const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
+  const [growthData, setGrowthData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAdd, setShowAdd] = useState(false);
+  const [weight, setWeight] = useState("");
+  const [height, setHeight] = useState("");
+
+  useEffect(() => {
+    fetch(`/api/growth?childId=${childId}`)
+      .then(r => r.json())
+      .then(data => {
+        setGrowthData(data.growth || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [childId]);
+
+  const handleAdd = async () => {
+    await fetch("/api/growth", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        childId,
+        measuredAt: new Date().toISOString(),
+        weightKg: weight ? parseFloat(weight) : null,
+        heightCm: height ? parseFloat(height) : null,
+      }),
+    });
+    setShowAdd(false);
+    window.location.reload();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="p-4 flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          <a href="/menu" className="p-2">←</a>
+          <h1 className="text-xl font-bold">Growth 📈</h1>
+        </div>
+        <button onClick={() => setShowAdd(!showAdd)} className="p-2 bg-rose-400 text-white rounded-lg">
+          + Add
+        </button>
+      </div>
+
+      {showAdd && (
+        <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <input
+            type="number"
+            placeholder="Weight (kg)"
+            value={weight}
+            onChange={e => setWeight(e.target.value)}
+            className="w-full p-3 border rounded-xl mb-2"
+          />
+          <input
+            type="number"
+            placeholder="Height (cm)"
+            value={height}
+            onChange={e => setHeight(e.target.value)}
+            className="w-full p-3 border rounded-xl mb-2"
+          />
+          <button onClick={handleAdd} className="w-full p-3 bg-rose-400 text-white rounded-xl">
+            Save
+          </button>
+        </div>
+      )}
+
+      <div className="px-4 space-y-2">
+        {loading ? (
+          <p className="text-gray-500">Loading...</p>
+        ) : growthData.length === 0 ? (
+          <p className="text-gray-500">No growth records yet</p>
+        ) : (
+          growthData.map((record: any, i: number) => (
+            <div key={i} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+              <div className="text-sm text-gray-500">
+                {new Date(record.measured_at).toLocaleDateString()}
+              </div>
+              <div className="flex gap-4 mt-2">
+                {record.weight_kg && (
+                  <div>⚖️ {record.weight_kg} kg</div>
+                )}
+                {record.height_cm && (
+                  <div>📏 {record.height_cm} cm</div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/app/memories/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+// Note: Needs Cloudflare R2 configured for actual uploads
+// For now, shows placeholders
+const memories = [
+  { id: 1, date: "2024-01-15", thumbnail: "👶", title: "First day home" },
+  { id: 2, date: "2024-02-20", thumbnail: "🍼", title: "First smile" },
+  { id: 3, date: "2024-03-10", thumbnail: "🎉", title: "Happy month" },
+];
+
+export default function MemoriesPage() {
+  const [selected, setSelected] = useState<any>(null);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="p-4 flex items-center gap-4">
+        <a href="/menu" className="p-2">←</a>
+        <h1 className="text-xl font-bold">Memories 📸</h1>
+      </div>
+
+      <div className="px-4">
+        <div className="grid grid-cols-3 gap-2">
+          {memories.map((mem) => (
+            <button
+              key={mem.id}
+              onClick={() => setSelected(mem)}
+              className="aspect-square bg-white dark:bg-gray-800 rounded-xl flex items-center justify-center text-4xl"
+            >
+              {mem.thumbnail}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Add Button */}
+      <div className="fixed bottom-4 right-4">
+        <button className="w-14 h-14 bg-rose-400 text-white rounded-full text-2xl shadow-lg">
+          +
+        </button>
+      </div>
+
+      {/* Modal */}
+      {selected && (
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50" onClick={() => setSelected(null)}>
+          <div className="text-center text-white">
+            <div className="text-6xl mb-4">{selected.thumbnail}</div>
+            <div className="text-xl font-bold">{selected.title}</div>
+            <div className="text-gray-400">{selected.date}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}