AI Usage Quota

1"use client";
2 
3import { AlertTriangle, Clock, TrendingUp, Zap } from "lucide-react";
4import { useCallback, useEffect, useMemo, useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  Alert,
8  AlertDescription,
9  AlertTitle,
10} from "@/registry/new-york/ui/alert";
11import { Badge } from "@/registry/new-york/ui/badge";
12import { Button } from "@/registry/new-york/ui/button";
13import {
14  Card,
15  CardContent,
16  CardHeader,
17  CardTitle,
18} from "@/registry/new-york/ui/card";
19import { Progress } from "@/registry/new-york/ui/progress";
20import {
21  Tooltip,
22  TooltipContent,
23  TooltipProvider,
24  TooltipTrigger,
25} from "@/registry/new-york/ui/tooltip";
26 
27export interface TokenUsage {
28  input: number;
29  output: number;
30  total: number;
31}
32 
33export interface RateLimit {
34  remaining: number;
35  limit: number;
36  resetAt?: Date;
37  window: "minute" | "hour" | "day" | "month";
38}
39 
40export interface Quota {
41  used: number;
42  limit: number;
43  resetAt?: Date;
44  period: "day" | "month" | "year";
45}
46 
47export interface AIUsageQuotaProps {
48  tokenUsage?: TokenUsage;
49  rateLimit?: RateLimit;
50  quota?: Quota;
51  onUpgrade?: () => void;
52  className?: string;
53  showUpgradePrompt?: boolean;
54  upgradeThreshold?: number;
55}
56 
57const MONTHS = [
58  "Jan",
59  "Feb",
60  "Mar",
61  "Apr",
62  "May",
63  "Jun",
64  "Jul",
65  "Aug",
66  "Sep",
67  "Oct",
68  "Nov",
69  "Dec",
70] as const;
71 
72const WINDOW_LABELS = {
73  minute: "min",
74  hour: "hr",
75  day: "day",
76  month: "mo",
77} as const;
78 
79const PERIOD_LABELS = {
80  day: "Daily",
81  month: "Monthly",
82  year: "Yearly",
83} as const;
84 
85function formatNumber(num: number): string {
86  if (num >= 1_000_000) {
87    return `${(num / 1_000_000).toFixed(1)}M`;
88  }
89  if (num >= 1000) {
90    return `${(num / 1000).toFixed(1)}K`;
91  }
92  return num.toLocaleString();
93}
94 
95function formatTimeUntil(date: Date): string {
96  const now = new Date();
97  const diff = date.getTime() - now.getTime();
98 
99  if (diff <= 0) return "Now";
100 
101  const minutes = Math.floor(diff / 60_000);
102  const hours = Math.floor(diff / 3_600_000);
103  const days = Math.floor(diff / 86_400_000);
104 
105  if (days > 0) return `${days}d`;
106  if (hours > 0) return `${hours}h`;
107  if (minutes > 0) return `${minutes}m`;
108  return "Soon";
109}
110 
111function formatTime(date: Date): string {
112  const hours = date.getHours();
113  const minutes = date.getMinutes();
114  const hour12 = hours % 12 || 12;
115  const ampm = hours >= 12 ? "PM" : "AM";
116  const minutesStr = minutes.toString().padStart(2, "0");
117  return `${hour12}:${minutesStr} ${ampm}`;
118}
119 
120// … truncated