Usage Dashboard

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Sparkline,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  UsageMeterCircular,
  UsageMeterLinear,
} from "@cooud-ui/ui";

interface UsageStat {
  id: string;
  label: string;
  value: string;
  delta: string;
  trend: number[];
  tone: "success" | "primary" | "info";
}

interface MeterRow {
  id: string;
  label: string;
  value: number;
  max: number;
  unit?: string;
}

const usageStats: UsageStat[] = [
  {
    id: "stat-requests",
    label: "API requests",
    value: "842K",
    delta: "+12%",
    trend: [42, 48, 45, 53, 60, 58, 67, 74, 82],
    tone: "success",
  },
  {
    id: "stat-bandwidth",
    label: "Bandwidth",
    value: "1.2 TB",
    delta: "+6%",
    trend: [60, 58, 62, 59, 64, 70, 68, 73, 78],
    tone: "primary",
  },
  {
    id: "stat-users",
    label: "Active users",
    value: "9,184",
    delta: "+3%",
    trend: [70, 72, 69, 74, 73, 76, 75, 79, 81],
    tone: "info",
  },
];

const usageQuotas: MeterRow[] = [
  { id: "quota-compute", label: "Compute hours", value: 312, max: 500 },
  { id: "quota-storage", label: "Object storage", value: 164, max: 250, unit: "GB" },
];

const topResources = [
  { id: "res-edge", name: "Edge functions", share: "38%" },
  { id: "res-db", name: "Database reads", share: "27%" },
  { id: "res-media", name: "Media delivery", share: "21%" },
];

export function UsageDashboardBlock() {
  return (
    <section aria-label="Usage dashboard" className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      <div className="grid gap-4 sm:grid-cols-3">
        {usageStats.map(({ id, label, value, delta, trend, tone }) => (
          <Card key={id} className="gap-4 shadow-sm">
            <CardContent className="flex flex-col gap-3">
              <div className="flex items-center justify-between">
                <span className="text-sm text-fg-secondary">{label}</span>
                <Badge variant="success">{delta}</Badge>
              </div>
              <span className="font-display text-2xl font-semibold text-fg">{value}</span>
              <Sparkline
                data={trend}
                tone={tone}
                area
                width={120}
                height={36}
                className="w-full"
                aria-label={`${label} trend`}
              />
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-6 sm:grid-cols-[1fr_auto] sm:items-center">
        <Card className="shadow-md">
          <CardHeader>
            <CardTitle className="font-display text-lg">Plan usage</CardTitle>
            <p className="col-span-full text-sm text-fg-secondary">
              Resets Jul 1, 2026 · Pro plan quotas.
            </p>
          </CardHeader>
          <CardContent className="flex flex-col gap-5">
            {usageQuotas.map(({ id, label, value, max, unit }) => (
              <UsageMeterLinear key={id} label={label} value={value} max={max} unit={unit} />
            ))}
          </CardContent>
        </Card>
        <Card className="shadow-md">
          <CardContent className="flex items-center justify-center py-6">
            <UsageMeterCircular value={842} max={1000} label="API quota" unit="K" size={120} />
          </CardContent>
        </Card>
      </div>

      <Card className="gap-0 pb-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Top resources</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">By share of total usage.</p>
        </CardHeader>
        <CardContent className="px-0 pt-2">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="pl-4 sm:pl-6">Resource</TableHead>
                <TableHead className="pr-4 text-right sm:pr-6">Share</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topResources.map((resource) => (
                <TableRow key={resource.id}>
                  <TableCell className="pl-4 font-medium text-fg sm:pl-6">
                    {resource.name}
                  </TableCell>
                  <TableCell className="pr-4 text-right text-fg-secondary tabular-nums sm:pr-6">
                    {resource.share}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </section>
  );
}