Billing Invoice Details

1"use client";
2 
3import { Download, Loader2, Printer } from "lucide-react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6import { Badge } from "@/registry/new-york/ui/badge";
7import { Button } from "@/registry/new-york/ui/button";
8import { Separator } from "@/registry/new-york/ui/separator";
9import {
10  Sheet,
11  SheetContent,
12  SheetDescription,
13  SheetHeader,
14  SheetTitle,
15} from "@/registry/new-york/ui/sheet";
16 
17export interface InvoiceLineItem {
18  description: string;
19  quantity: number;
20  unitPrice: number;
21  subtotal: number;
22}
23 
24export interface InvoiceDetails {
25  id: string;
26  invoiceNumber: string;
27  date: Date;
28  dueDate?: Date;
29  amount: number;
30  currency?: string;
31  status: "paid" | "pending" | "failed" | "refunded" | "void";
32  description?: string;
33  lineItems: InvoiceLineItem[];
34  subtotal: number;
35  tax?: {
36    amount: number;
37    rate?: number;
38    label?: string;
39  };
40  discount?: {
41    amount: number;
42    code?: string;
43    label?: string;
44  };
45  total: number;
46  paymentMethod?: {
47    type: string;
48    last4?: string;
49    brand?: string;
50  };
51  billingAddress?: {
52    name: string;
53    line1: string;
54    line2?: string;
55    city: string;
56    state: string;
57    zip: string;
58    country: string;
59  };
60  downloadUrl?: string;
61}
62 
63export interface BillingInvoiceDetailsProps {
64  invoice: InvoiceDetails | null;
65  open: boolean;
66  onOpenChange: (open: boolean) => void;
67  onDownload?: (invoiceId: string) => void;
68  onPrint?: (invoiceId: string) => void;
69  className?: string;
70  currency?: string;
71}
72 
73function formatDate(date: Date): string {
74  const year = date.getFullYear();
75  const month = date.toLocaleString("en-US", { month: "short" });
76  const day = date.getDate();
77  return `${month} ${day}, ${year}`;
78}
79 
80function formatPrice(amount: number, currency = "USD"): string {
81  return new Intl.NumberFormat("en-US", {
82    style: "currency",
83    currency,
84    minimumFractionDigits: 2,
85    maximumFractionDigits: 2,
86  }).format(amount);
87}
88 
89function getStatusConfig(status: InvoiceDetails["status"]) {
90  switch (status) {
91    case "paid":
92      return {
93        label: "Paid",
94        variant: "default" as const,
95        className: "bg-green-500/10 text-green-600 border-green-500/20",
96      };
97    case "pending":
98      return {
99        label: "Pending",
100        variant: "secondary" as const,
101        className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
102      };
103    case "failed":
104      return {
105        label: "Failed",
106// … truncated