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>
This commit is contained in:
Manohar Gupta 2026-05-10 17:54:47 +05:30
parent 6c94aaf5de
commit 0c29a8ba19

View file

@ -42,12 +42,23 @@ export default function MedicalPage() {
const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a"); const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
const [vaccinations, setVaccinations] = useState<any[]>([]); const [vaccinations, setVaccinations] = useState<any[]>([]);
const [loading, setLoading] = useState(true); 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 [showAddDate, setShowAddDate] = useState<string | null>(null);
const [givenDate, setGivenDate] = useState(""); const [givenDate, setGivenDate] = useState("");
const birthDate = "2024-01-15"; 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(() => { useEffect(() => {
fetch(`/api/vaccinations?childId=${childId}`) fetch(`/api/vaccinations?childId=${childId}`)
.then((res) => res.json()) .then((res) => res.json())
@ -99,10 +110,10 @@ export default function MedicalPage() {
Vaccinations Vaccinations
</button> </button>
<button <button
onClick={() => setTab("growth")} onClick={() => setTab("medicine")}
className={`flex-1 p-3 rounded-xl ${tab === "growth" ? "bg-rose-400 text-white" : "bg-white"}`} className={`flex-1 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`}
> >
Growth Medicine
</button> </button>
</div> </div>
@ -172,12 +183,22 @@ export default function MedicalPage() {
</div> </div>
)} )}
{tab === "growth" && ( {tab === "medicine" && (
<div className="text-center py-8"> <div className="space-y-2">
<p className="text-gray-500 mb-4">Growth tracking available</p> <h2 className="font-semibold mb-3">Supplements & Medicine</h2>
<a href="/growth" className="px-4 py-2 bg-rose-400 text-white rounded-lg"> {SUPPLEMENTS.map((supp) => (
Go to Growth Page <div key={supp.name} className="flex items-center justify-between p-4 bg-white rounded-xl">
</a> <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>
)} )}
</div> </div>