Add Allergies, Visits, Illness sections to Medical page

- Allergies section with add button
- Doctor Visits tracking section
- Illness Log section
- More tab buttons for navigation

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/app/medical/page.tsx

@@ -42,7 +42,7 @@ export default function MedicalPage() {
   const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
   const [vaccinations, setVaccinations] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  const [tab, setTab] = useState<"vaccinations" | "medicine">("vaccinations");
+  const [tab, setTab] = useState<"vaccinations" | "medicine" | "allergies" | "visits" | "illness">("vaccinations");
   const [showAddDate, setShowAddDate] = useState<string | null>(null);
   const [givenDate, setGivenDate] = useState("");
 
@@ -102,19 +102,37 @@ const SUPPLEMENTS = [
           <a href="/" className="text-rose-500">← Home</a>
         </div>
 
-        <div className="flex gap-2 mb-6">
+        <div className="flex gap-2 mb-6 overflow-x-auto">
           <button
             onClick={() => setTab("vaccinations")}
-            className={`flex-1 p-3 rounded-xl ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white"}`}
           >
-            Vaccinations
+            Vaccines
           </button>
           <button
             onClick={() => setTab("medicine")}
-            className={`flex-1 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`}
           >
             Medicine
           </button>
+          <button
+            onClick={() => setTab("allergies")}
+            className={`px-4 p-3 rounded-xl ${tab === "allergies" ? "bg-rose-400 text-white" : "bg-white"}`}
+          >
+            Allergies
+          </button>
+          <button
+            onClick={() => setTab("visits")}
+            className={`px-4 p-3 rounded-xl ${tab === "visits" ? "bg-rose-400 text-white" : "bg-white"}`}
+          >
+            Visits
+          </button>
+          <button
+            onClick={() => setTab("illness")}
+            className={`px-4 p-3 rounded-xl ${tab === "illness" ? "bg-rose-400 text-white" : "bg-white"}`}
+          >
+            Illness
+          </button>
         </div>
 
         {tab === "vaccinations" && (
@@ -201,6 +219,42 @@ const SUPPLEMENTS = [
             ))}
           </div>
         )}
+
+        {tab === "allergies" && (
+          <div className="space-y-2">
+            <h2 className="font-semibold mb-3">Known Allergies</h2>
+            <div className="p-4 bg-white rounded-xl">
+              <p className="text-gray-500">No allergies recorded</p>
+            </div>
+            <button className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              + Add Allergy
+            </button>
+          </div>
+        )}
+
+        {tab === "visits" && (
+          <div className="space-y-2">
+            <h2 className="font-semibold mb-3">Doctor Visits</h2>
+            <div className="p-4 bg-white rounded-xl">
+              <p className="text-gray-500">No visits recorded</p>
+            </div>
+            <button className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              + Add Visit
+            </button>
+          </div>
+        )}
+
+        {tab === "illness" && (
+          <div className="space-y-2">
+            <h2 className="font-semibold mb-3">Illness Log</h2>
+            <div className="p-4 bg-white rounded-xl">
+              <p className="text-gray-500">No illnesses recorded</p>
+            </div>
+            <button className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              + Log Illness
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );