Billing Payment Schedule

1"use client";
2 
3import {
4  Calendar,
5  Check,
6  Clock,
7  CreditCard,
8  Loader2,
9  TrendingUp,
10  X,
11} from "lucide-react";
12import { useState } from "react";
13import { cn } from "@/lib/utils";
14import { Badge } from "@/registry/new-york/ui/badge";
15import { Button } from "@/registry/new-york/ui/button";
16import {
17  Card,
18  CardContent,
19  CardDescription,
20  CardHeader,
21  CardTitle,
22} from "@/registry/new-york/ui/card";
23import { Progress } from "@/registry/new-york/ui/progress";
24import { Separator } from "@/registry/new-york/ui/separator";
25 
26export interface ScheduledPayment {
27  id: string;
28  date: Date;
29  amount: number;
30  currency?: string;
31  status: "upcoming" | "processing" | "completed" | "failed" | "canceled";
32  description: string;
33  paymentMethod?: {
34    type: string;
35    last4?: string;
36    brand?: string;
37  };
38  invoiceId?: string;
39  invoiceNumber?: string;
40  retryAttempts?: number;
41  maxRetryAttempts?: number;
42}
43 
44export interface BillingPaymentScheduleProps {
45  payments: ScheduledPayment[];
46  onViewInvoice?: (invoiceId: string) => void;
47  onRetry?: (paymentId: string) => Promise<void>;
48  onCancel?: (paymentId: string) => Promise<void>;
49  className?: string;
50  currency?: string;
51  showUpcomingOnly?: boolean;
52}
53 
54function formatDate(date: Date): string {
55  const year = date.getFullYear();
56  const month = date.toLocaleString("en-US", { month: "short" });
57  const day = date.getDate();
58  return `${month} ${day}, ${year}`;
59}
60 
61function formatPrice(amount: number, currency = "USD"): string {
62  return new Intl.NumberFormat("en-US", {
63    style: "currency",
64    currency,
65    minimumFractionDigits: 2,
66    maximumFractionDigits: 2,
67  }).format(amount);
68}
69 
70function getStatusConfig(status: ScheduledPayment["status"]) {
71  switch (status) {
72    case "upcoming":
73      return {
74        label: "Upcoming",
75        variant: "secondary" as const,
76        className: "bg-blue-500/10 text-blue-600 border-blue-500/20",
77        icon: Clock,
78      };
79    case "processing":
80      return {
81        label: "Processing",
82        variant: "secondary" as const,
83        className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
84        icon: Loader2,
85      };
86    case "completed":
87      return {
88        label: "Completed",
89        variant: "default" as const,
90        className: "bg-green-500/10 text-green-600 border-green-500/20",
91        icon: Check,
92      };
93    case "failed":
94      return {
95        label: "Failed",
96        variant: "destructive" as const,
97// … truncated