Detailed Usage Table

1"use client";
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import {
11  Table,
12  TableBody,
13  TableCaption,
14  TableCell,
15  TableHead,
16  TableHeader,
17  TableRow,
18} from "@/components/ui/table";
19import { cn } from "@/lib/utils";
20 
21export interface UsageResource {
22  name: string;
23  used: number;
24  limit: number;
25  percentage?: number;
26  unit?: string;
27}
28 
29export interface DetailedUsageTableProps {
30  className?: string;
31  title?: string;
32  description?: string;
33  resources: UsageResource[];
34}
35 
36export function DetailedUsageTable({
37  className,
38  title = "Detailed Usage",
39  description,
40  resources,
41}: DetailedUsageTableProps) {
42  const formatNumber = (num: number) => {
43    return new Intl.NumberFormat().format(num);
44  };
45 
46  const getPercentageBar = (percentage: number) => {
47    let bgColor = "bg-emerald-500";
48    if (percentage >= 90) bgColor = "bg-destructive";
49    else if (percentage >= 75) bgColor = "bg-orange-500";
50 
51    return (
52      <div className="flex min-w-[120px] items-center gap-2">
53        <div className="bg-secondary h-2 flex-1 rounded-full">
54          <div
55            className={cn("h-2 rounded-full transition-all", bgColor)}
56            style={{ width: `${Math.max(0, Math.min(percentage, 100))}%` }}
57          />
58        </div>
59        <span className="w-10 text-right text-xs font-medium tabular-nums">
60          {Math.round(percentage)}%
61        </span>
62      </div>
63    );
64  };
65 
66  return (
67    <Card className={cn("w-full", className)}>
68      <CardHeader>
69        <CardTitle>{title}</CardTitle>
70        {description && <CardDescription>{description}</CardDescription>}
71      </CardHeader>
72      <CardContent>
73        <div className="overflow-x-auto rounded-md border">
74          <Table>
75            <TableCaption className="sr-only">
76              Detailed usage of resources
77            </TableCaption>
78            <TableHeader>
79              <TableRow>
80                <TableHead className="w-[180px]">Resource</TableHead>
81                <TableHead className="text-right">Used</TableHead>
82                <TableHead className="text-right">Limit</TableHead>
83                <TableHead className="min-w-[160px] text-right">
84                  Usage
85                </TableHead>
86              </TableRow>
87            </TableHeader>
88            <TableBody>
89              {resources.length === 0 ? (
90                <TableRow>
91                  <TableCell
92                    colSpan={4}
93// … truncated