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 && (