Usage Table

1"use client";
2import React, { useCallback } from "react";
3import { cn } from "@/lib/utils";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/card";
11import {
12  Table,
13  TableBody,
14  TableCell,
15  TableCaption,
16  TableHead,
17  TableHeader,
18  TableRow,
19} from "@/components/ui/table";
20import { Button } from "@/components/ui/button";
21import { Download } from "lucide-react";
22 
23export interface UsageItem {
24  model: string;
25  inputWithCache: number;
26  inputWithoutCache: number;
27  cacheRead: number;
28  output: number;
29  totalTokens: number;
30  apiCost?: number;
31  costToYou?: number;
32}
33 
34interface UsageTableProps {
35  className?: string;
36  title?: string;
37  description?: string;
38  usageHistory: UsageItem[];
39  showTotal?: boolean;
40}
41 
42export function UsageTable({
43  className,
44  title,
45  description,
46  usageHistory,
47  showTotal = true, // Default to true
48}: UsageTableProps) {
49  const totalRow = showTotal
50    ? usageHistory.reduce(
51        (acc, item) => ({
52          inputWithCache: acc.inputWithCache + item.inputWithCache,
53          inputWithoutCache: acc.inputWithoutCache + item.inputWithoutCache,
54          cacheRead: acc.cacheRead + item.cacheRead,
55          output: acc.output + item.output,
56          totalTokens: acc.totalTokens + item.totalTokens,
57          apiCost: acc.apiCost + (item.apiCost || 0),
58          costToYou: acc.costToYou + (item.costToYou || 0),
59        }),
60        {
61          inputWithCache: 0,
62          inputWithoutCache: 0,
63          cacheRead: 0,
64          output: 0,
65          totalTokens: 0,
66          apiCost: 0,
67          costToYou: 0,
68        },
69      )
70    : null;
71 
72  const formatNumber = (num: number) => {
73    return new Intl.NumberFormat().format(num);
74  };
75 
76  const formatCurrency = (amount: number) => {
77    return `$${amount.toFixed(2)}`;
78  };
79  const hasApiCost = usageHistory.some(
80    (item) => item.apiCost !== undefined && item.apiCost !== null,
81  );
82  const hasCostToYou = usageHistory.some(
83    (item) => item.costToYou !== undefined && item.costToYou !== null,
84  );
85 
86  const exportColumns = [
87    { key: "model", label: "Model" },
88    { key: "inputWithCache", label: "Input (w/ Cache)" },
89    { key: "inputWithoutCache", label: "Input (w/o Cache)" },
90    { key: "cacheRead", label: "Cache Read" },
91    { key: "output", label: "Output" },
92    { key: "totalTokens", label: "Total Tokens" },
93    { key: "apiCost", label: "API Cost" },
94    { key: "costToYou", label: "Cost to You" },
95  ] as const;
96// … truncated