diff --git a/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx b/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx index 1042bcfc43..38cbaf2876 100644 --- a/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx +++ b/src/app/(dashboard)/dashboard/costs/quota-share/QuotaSharePageClient.tsx @@ -8,6 +8,7 @@ import type { QuotaPool, PoolAllocation } from "@/lib/quota/dimensions"; import { usePools } from "./hooks/usePools"; import { usePoolUsage } from "./hooks/usePoolUsage"; import { useLocalStoragePoolMigration } from "./hooks/useLocalStoragePoolMigration"; +import { usePoolsUsageAggregate } from "./hooks/usePoolsUsageAggregate"; import QuotaConceptCard from "./components/QuotaConceptCard"; import PoolCard from "./components/PoolCard"; import CreatePoolModal from "./components/CreatePoolModal"; @@ -119,7 +120,7 @@ export default function QuotaSharePageClient() { const [connections, setConnections] = useState([]); const [apiKeys, setApiKeys] = useState([]); const [plans, setPlans] = useState>({}); - const [sideLoading, setSideLoading] = useState(true); + const [, setSideLoading] = useState(true); const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); @@ -189,12 +190,16 @@ export default function QuotaSharePageClient() { [connections] ); + const aggregate = usePoolsUsageAggregate(pools); + const stats = useMemo( () => ({ activePools: pools.length, - allocations: pools.reduce((s, p) => s + p.allocations.length, 0), + keysAllocated: pools.reduce((s, p) => s + p.allocations.length, 0), + avgUtilization: aggregate.avgUtilizationPercent, + borrowingNow: aggregate.borrowingKeyCount, }), - [pools] + [pools, aggregate] ); // ── Mutations ───────────────────────────────────────────────────────────── @@ -257,12 +262,17 @@ export default function QuotaSharePageClient() { {/* Stats */}
- + 80 ? "red" : stats.avgUtilization > 50 ? "amber" : "green"} + /> + 0 ? "amber" : undefined} /> -
{/* Pool list */}