Billing Subscription Card

1"use client";
2 
3import { AlertTriangle, Calendar, TrendingUp } from "lucide-react";
4import { cn } from "@/lib/utils";
5import { Badge } from "@/registry/new-york/ui/badge";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import { Progress } from "@/registry/new-york/ui/progress";
15import { Separator } from "@/registry/new-york/ui/separator";
16import { Switch } from "@/registry/new-york/ui/switch";
17 
18export interface SubscriptionUsage {
19  label: string;
20  used: number;
21  limit: number | null;
22  unit?: string;
23  warningThreshold?: number;
24}
25 
26export interface BillingSubscriptionCardProps {
27  plan: {
28    id: string;
29    name: string;
30    price: number;
31    currency?: string;
32    billingPeriod: "monthly" | "annual";
33  };
34  usage?: SubscriptionUsage[];
35  nextBillingDate?: Date;
36  autoRenew?: boolean;
37  status?: "active" | "canceled" | "expired" | "past_due";
38  onUpgrade?: () => void;
39  onDowngrade?: () => void;
40  onCancel?: () => void;
41  onManage?: () => void;
42  className?: string;
43  showUsageDetails?: boolean;
44}
45 
46function formatDate(date: Date): string {
47  const year = date.getFullYear();
48  const month = date.toLocaleString("en-US", { month: "short" });
49  const day = date.getDate();
50  return `${month} ${day}, ${year}`;
51}
52 
53function formatPrice(amount: number, currency = "USD"): string {
54  return new Intl.NumberFormat("en-US", {
55    style: "currency",
56    currency,
57    minimumFractionDigits: 0,
58    maximumFractionDigits: 0,
59  }).format(amount);
60}
61 
62function getStatusConfig(status: string) {
63  switch (status) {
64    case "active":
65      return {
66        label: "Active",
67        variant: "default" as const,
68        className: "bg-green-500/10 text-green-600 border-green-500/20",
69      };
70    case "canceled":
71      return {
72        label: "Canceled",
73        variant: "secondary" as const,
74        className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
75      };
76    case "expired":
77      return {
78        label: "Expired",
79        variant: "destructive" as const,
80        className: "bg-destructive/10 text-destructive border-destructive/20",
81      };
82    case "past_due":
83      return {
84        label: "Past Due",
85        variant: "destructive" as const,
86        className: "bg-destructive/10 text-destructive border-destructive/20",
87      };
88    default:
89      return {
90        label: "Unknown",
91        variant: "secondary" as const,
92// … truncated