Replace Growth tab with Medicine/Supplements tracking

- Remove duplicate Growth tab from Medical page
- Add Medicine tab with common baby supplements
- Includes Vitamin D3, Iron, Calcium, Zinc, Omega-3, Probiotics

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

src/app/medical/page.tsx

@@ -42,12 +42,23 @@ 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" | "growth">("vaccinations");
+  const [tab, setTab] = useState<"vaccinations" | "medicine">("vaccinations");
   const [showAddDate, setShowAddDate] = useState<string | null>(null);
   const [givenDate, setGivenDate] = useState("");
 
   const birthDate = "2024-01-15";
 
+// Common supplements for babies
+const SUPPLEMENTS = [
+  { name: "Vitamin D3", dose: "400 IU daily", notes: "For bone health" },
+  { name: "Iron", dose: "1 mg/kg daily", notes: "As prescribed" },
+  { name: "Calcium", dose: "500 mg daily", notes: "With food" },
+  { name: "Zinc", dose: "5 mg daily", notes: "Immune support" },
+  { name: "Omega-3", dose: "DHA 100mg", notes: "Brain development" },
+  { name: "Probiotics", dose: "1 shot daily", notes: "Gut health" },
+  { name: "Multivitamin", dose: "As directed", notes: "Daily vitamin" },
+];
+
   useEffect(() => {
     fetch(`/api/vaccinations?childId=${childId}`)
       .then((res) => res.json())
@@ -99,10 +110,10 @@ export default function MedicalPage() {
             Vaccinations
           </button>
           <button
-            onClick={() => setTab("growth")}
-            className={`flex-1 p-3 rounded-xl ${tab === "growth" ? "bg-rose-400 text-white" : "bg-white"}`}
+            onClick={() => setTab("medicine")}
+            className={`flex-1 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`}
           >
-            Growth
+            Medicine
           </button>
         </div>
 
@@ -172,12 +183,22 @@ export default function MedicalPage() {
           </div>
         )}
 
-        {tab === "growth" && (
-          <div className="text-center py-8">
-            <p className="text-gray-500 mb-4">Growth tracking available</p>
-            <a href="/growth" className="px-4 py-2 bg-rose-400 text-white rounded-lg">
-              Go to Growth Page
-            </a>
+        {tab === "medicine" && (
+          <div className="space-y-2">
+            <h2 className="font-semibold mb-3">Supplements & Medicine</h2>
+            {SUPPLEMENTS.map((supp) => (
+              <div key={supp.name} className="flex items-center justify-between p-4 bg-white rounded-xl">
+                <div>
+                  <div className="font-medium">{supp.name}</div>
+                  <div className="text-sm text-gray-500">
+                    {supp.dose} · {supp.notes}
+                  </div>
+                </div>
+                <button className="px-4 py-2 bg-rose-400 text-white rounded-lg text-sm">
+                  Add
+                </button>
+              </div>
+            ))}
           </div>
         )}
       </div>