"use client"; import { AlertTriangle, Download, TrendingDown, TrendingUp, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface UsageDataPoint { date: Date; value: number; category?: string; } export interface UsageCategory { name: string; value: number; limit?: number; color?: string; } export interface BillingUsageBillingProps { currentPeriod: { start: Date; end: Date; usage: number; limit?: number; }; previousPeriod?: { usage: number; limit?: number; }; dataPoints?: UsageDataPoint[]; categories?: UsageCategory[]; unit?: string; onDateRangeChange?: (start: Date, end: Date) => void; onExport?: () => void; className?: string; showChart?: boolean; showBreakdown?: boolean; warningThreshold?: number; } function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } function formatNumber(value: number, unit?: string): string { const formatted = value.toLocaleString("en-US"); return unit ? `${formatted} ${unit}` : formatted; } function calculateTrend( current: number, previous: number ): { percentage: number; isIncrease: boolean; } { if (previous === 0) { return { percentage: current > 0 ? 100 : 0, isIncrease: current > 0 }; } const percentage = ((current - previous) / previous) * 100; return { percentage: Math.abs(percentage), isIncrease: percentage > 0, }; } export default function BillingUsageBilling({ currentPeriod, previousPeriod, dataPoints = [], categories = [], unit = "", onDateRangeChange, onExport, className, showChart = true, showBreakdown = true, warningThreshold = 80, }: BillingUsageBillingProps) { const usagePercentage = currentPeriod.limit !== undefined ? (currentPeriod.usage / currentPeriod.limit) * 100 : 0; const isWarning = usagePercentage >= warningThreshold; const isOverLimit = currentPeriod.limit !== undefined && currentPeriod.usage > currentPeriod.limit; const trend = previousPeriod ? calculateTrend(currentPeriod.usage, previousPeriod.usage) : null; return (

Usage {formatDate(currentPeriod.start)} -{" "} {formatDate(currentPeriod.end)}

{onExport && ( )}

Current period {formatNumber(currentPeriod.usage, unit)} {currentPeriod.limit !== undefined && ( <> / {formatNumber(currentPeriod.limit, unit)} )} {currentPeriod.limit === undefined && " (Unlimited)"}

{currentPeriod.limit !== undefined && ( )} {isWarning && !isOverLimit && (

You've used {usagePercentage.toFixed(0)}% of your limit

)} {isOverLimit && (

You've exceeded your limit

)}

{previousPeriod && ( <>

Previous period {formatNumber(previousPeriod.usage, unit)} {previousPeriod.limit !== undefined && ( <> / {formatNumber(previousPeriod.limit, unit)} )}

{trend && (

{trend.isIncrease ? ( ) : ( )} {trend.isIncrease ? "Increased" : "Decreased"} by{" "} {trend.percentage.toFixed(1)}% compared to previous period

)}

)} {showBreakdown && categories.length > 0 && ( <>

Breakdown by category

{categories.map((category, idx) => { const categoryPercentage = category.limit !== undefined ? (category.value / category.limit) * 100 : 0; return (

{category.name} {formatNumber(category.value, unit)} {category.limit !== undefined && ( <> / {formatNumber(category.limit, unit)} )}

{category.limit !== undefined && ( )}

); })}

)} {showChart && dataPoints.length > 0 && ( <>

Usage over time

{(() => { const maxDataValue = Math.max( ...dataPoints.map((p) => p.value), 1 ); const containerHeight = 128; const padding = 16; const availableHeight = containerHeight - padding * 2; const minHeightPx = 4; return dataPoints.map((point, idx) => { const heightPercentage = maxDataValue > 0 ? (point.value / maxDataValue) * 100 : 0; const calculatedHeightPx = Math.min( Math.max( (heightPercentage / 100) * availableHeight, minHeightPx ), availableHeight ); return (

); }); })()}

{formatDate(dataPoints[0]?.date || new Date())} {formatDate( dataPoints[dataPoints.length - 1]?.date || new Date() )}

)}

); }

Breakdown by category

Usage over time

Example Usage