Add fast-log UI with modal for feed/diaper/sleep

src/app/page.tsx

@@ -1,35 +1,167 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface LogModalProps {
+  type: "feed" | "diaper" | "sleep" | null;
+  childId: string;
+  onClose: () => void;
+}
+
+function LogModal({ type, childId, onClose }: LogModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [subType, setSubType] = useState("breast_milk");
+  const [amountMl, setAmountMl] = useState("");
+  const [notes, setNotes] = useState("");
+
+  if (!type) return null;
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      await fetch("/api/logs", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type,
+          childId,
+          subType,
+          amountMl: amountMl ? Number(amountMl) : undefined,
+          notes: notes || undefined,
+        }),
+      });
+      onClose();
+    } catch (err) {
+      console.error(err);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-2xl p-6 w-full max-w-sm mx-4">
+        <h2 className="text-xl font-bold mb-4">
+          {type === "feed" && "Log Feed"}
+          {type === "diaper" && "Log Diaper"}
+          {type === "sleep" && "Log Sleep"}
+        </h2>
+
+        {type === "feed" && (
+          <>
+            <select
+              value={subType}
+              onChange={(e) => setSubType(e.target.value)}
+              className="w-full p-3 border rounded-xl mb-3"
+            >
+              <option value="breast_milk">Breast Milk</option>
+              <option value="formula">Formula</option>
+              <option value="solid">Solid Food</option>
+              <option value="water">Water</option>
+            </select>
+            <input
+              type="number"
+              placeholder="Amount (ml)"
+              value={amountMl}
+              onChange={(e) => setAmountMl(e.target.value)}
+              className="w-full p-3 border rounded-xl mb-3"
+            />
+          </>
+        )}
+
+        {type === "diaper" && (
+          <select
+            value={subType}
+            onChange={(e) => setSubType(e.target.value)}
+            className="w-full p-3 border rounded-xl mb-3"
+          >
+            <option value="wet">Wet</option>
+            <option value="dirty">Dirty</option>
+            <option value="both">Both</option>
+          </select>
+        )}
+
+        {type === "sleep" && (
+          <select
+            value={subType}
+            onChange={(e) => setSubType(e.target.value)}
+            className="w-full p-3 border rounded-xl mb-3"
+          >
+            <option value="nap">Nap</option>
+            <option value="night">Night Sleep</option>
+          </select>
+        )}
+
+        <input
+          type="text"
+          placeholder="Notes (optional)"
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          className="w-full p-3 border rounded-xl mb-4"
+        />
+
+        <div className="flex gap-3">
+          <button onClick={onClose} className="flex-1 p-3 border rounded-xl">
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={loading}
+            className="flex-1 p-3 bg-rose-400 text-white rounded-xl"
+          >
+            {loading ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function HomePage() {
+  const [modalType, setModalType] = useState<"feed" | "diaper" | "sleep" | null>(null);
+  const [childId, setChildId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50">
       <div className="container mx-auto px-4 py-8">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold">Welcome to Tia 👶</h1>
+          <h1 className="text-3xl font-bold">Tia 👶</h1>
           <p className="text-gray-600 mt-2">Your baby tracking companion</p>
         </div>
 
         <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
-          <button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
+          <button
+            onClick={() => setModalType("feed")}
+            className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
+          >
             <div className="text-3xl">🍼</div>
-            <div className="font-medium mt-2">Feeds</div>
+            <div className="font-medium mt-2">Feed</div>
           </button>
-          <button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
+          <button
+            onClick={() => setModalType("sleep")}
+            className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
+          >
             <div className="text-3xl">😴</div>
             <div className="font-medium mt-2">Sleep</div>
           </button>
-          <button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
+          <button
+            onClick={() => setModalType("diaper")}
+            className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
+          >
             <div className="text-3xl">👶</div>
             <div className="font-medium mt-2">Diaper</div>
           </button>
-          <button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
+          <button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center">
             <div className="text-3xl">💊</div>
             <div className="font-medium mt-2">Medical</div>
           </button>
         </div>
 
         <div className="mt-8 text-center">
-          <p className="text-gray-500">Baby: Tia (2 years old)</p>
+          <p className="text-gray-500">Baby: Baby Tia</p>
         </div>
       </div>
+
+      <LogModal type={modalType} childId={childId} onClose={() => setModalType(null)} />
     </div>
   );
 }