diff --git a/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx b/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx index 97e2e3ba63..e5d9069b07 100644 --- a/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx +++ b/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx @@ -142,7 +142,7 @@ export default function QuotaSharePageClient() { // ── Group state ─────────────────────────────────────────────────────────── const [groups, setGroups] = useState([]); - const [selectedGroupId, setSelectedGroupId] = useState("group-demo"); + const [selectedGroupId, setSelectedGroupId] = useState("all"); const [newGroupInput, setNewGroupInput] = useState(""); const [showNewGroupInput, setShowNewGroupInput] = useState(false); const [renaming, setRenaming] = useState(false); @@ -286,12 +286,24 @@ export default function QuotaSharePageClient() { [pools, aggregate] ); - // Pools filtered by selected group + // Pools filtered by selected group (kept for stats/empty-state checks) const filteredPools = useMemo( - () => pools.filter((p) => (p as unknown as { groupId?: string }).groupId === selectedGroupId || (!( p as unknown as { groupId?: string }).groupId && selectedGroupId === "group-demo")), + () => + selectedGroupId === "all" + ? pools + : pools.filter( + (p) => + ((p as unknown as { groupId?: string }).groupId ?? "group-demo") === selectedGroupId + ), [pools, selectedGroupId] ); + // Groups to render as stacked sections + const groupsToRender = useMemo( + () => (selectedGroupId === "all" ? groups : groups.filter((g) => g.id === selectedGroupId)), + [groups, selectedGroupId] + ); + // ── Mutations ───────────────────────────────────────────────────────────── const handleSaveAllocations = useCallback( @@ -348,6 +360,7 @@ export default function QuotaSharePageClient() { title={t("groupSelectHint")} className="px-2 py-1 rounded border border-border bg-bg-base text-sm text-text-main min-w-[120px]" > + {groups.map((g) => (