diff --git a/src/app/(app)/family/page.tsx b/src/app/(app)/family/page.tsx index eade0ce..009220c 100644 --- a/src/app/(app)/family/page.tsx +++ b/src/app/(app)/family/page.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { useFamily } from "@/app/FamilyProvider"; +import { ChildLimitBanner } from "@/components/StorageMeter"; interface Child { id: string; @@ -24,6 +25,7 @@ export default function FamilyPage() { const [newName, setNewName] = useState(""); const [newDob, setNewDob] = useState(""); const [newSex, setNewSex] = useState("male"); + const [childLimit, setChildLimit] = useState<{ currentCount: number; limit: number } | null>(null); // Load children from FamilyProvider or fetch useEffect(() => { @@ -35,6 +37,18 @@ export default function FamilyPage() { } }, [childrenFromProvider, familyId]); + // Sync limit state whenever children list changes + useEffect(() => { + if (!familyId) return; + fetch("/api/family") + .then(r => r.json()) + .then(d => { + const maxChildren = d.family?.max_children ?? 1; + setChildLimit({ currentCount: children.length, limit: maxChildren }); + }) + .catch(() => {}); + }, [familyId, children.length]); + const fetchOwnChildren = async () => { if (!familyId) return; try { @@ -85,12 +99,19 @@ export default function FamilyPage() { setShowAdd(false); setNewName(""); setNewDob(""); + } else if (data.reason === "child_limit_reached") { + setShowAdd(false); + setChildLimit({ currentCount: data.currentCount, limit: data.limit }); + } else { + alert(data.error); } } catch (err) { console.error("Failed to add:", err); } }; + const atChildLimit = childLimit !== null && childLimit.currentCount >= childLimit.limit; + return (
@@ -99,8 +120,13 @@ export default function FamilyPage() {
+ {/* Child limit banner */} + {atChildLimit && childLimit && ( + + )} + {/* Add Child Form */} - {showAdd && ( + {showAdd && !atChildLimit && (
0 && ( + {!showAdd && children.length > 0 && !atChildLimit && (