Usage Meter

1import { UsageMeter } from '@/components/ui/billing-summary-card';
2
3export function BillingCard({ usage }: { usage: UsageData }) {
4  return (
5    <div className="space-y-4">
6      <h3>Resource Usage</h3>
7
8      {/* API calls meter */}
9      <UsageMeter
10        label="API Calls"
11        used={usage.apiCalls}
12        limit={10000}
13        showPercentage={true}
14      />
15
16      {/* Storage meter with unit */}
17      <UsageMeter
18        label="Storage"
19        used={usage.storage}
20        limit={5}
21        unit="GB"
22        size="md"
23      />
24
25      {/* Team members (no percentage) */}
26      <UsageMeter
27        label="Team Members"
28        used={usage.teamMembers}
29        limit={10}
30        showPercentage={false}
31      />
32    </div>
33  );
34}

1// < 75%: Primary (blue/brand color)
2<UsageMeter label="Normal" used={500} limit={1000} />
3
4// 75-89%: Warning (yellow/amber)
5<UsageMeter label="High" used={800} limit={1000} />
6
7// ≥ 90%: Destructive (red)
8<UsageMeter label="Critical" used={950} limit={1000} />

1'use client';
2
3import { useEffect, useState } from 'react';
4import { UsageMeter } from '@/components/ui/billing-summary-card';
5
6export function UsageDashboard() {
7  const [usage, setUsage] = useState(null);
8
9  useEffect(() => {
10    fetch('/api/usage').then(r => r.json()).then(setUsage);
11  }, []);
12
13  if (!usage) return <div>Loading...</div>;
14
15  return (
16    <div className="space-y-4">
17      <UsageMeter
18        label="API Calls"
19        used={usage.apiCalls}
20        limit={usage.apiLimit}
21      />
22      <UsageMeter
23        label="Storage"
24        used={usage.storageGB}
25        limit={usage.storageLimit}
26        unit="GB"
27      />
28    </div>
29  );
30}