"use client"; import { Download, Loader2, Printer } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; import { cn } from "@/lib/utils"; export interface InvoiceLineItem { description: string; quantity: number; unitPrice: number; subtotal: number; } export interface InvoiceDetails { id: string; invoiceNumber: string; date: Date; dueDate?: Date; amount: number; currency?: string; status: "paid" | "pending" | "failed" | "refunded" | "void"; description?: string; lineItems: InvoiceLineItem[]; subtotal: number; tax?: { amount: number; rate?: number; label?: string; }; discount?: { amount: number; code?: string; label?: string; }; total: number; paymentMethod?: { type: string; last4?: string; brand?: string; }; billingAddress?: { name: string; line1: string; line2?: string; city: string; state: string; zip: string; country: string; }; downloadUrl?: string; } export interface BillingInvoiceDetailsProps { invoice: InvoiceDetails | null; open: boolean; onOpenChange: (open: boolean) => void; onDownload?: (invoiceId: string) => void; onPrint?: (invoiceId: string) => void; className?: string; currency?: string; } 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 formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount); } function getStatusConfig(status: InvoiceDetails["status"]) { switch (status) { case "paid": return { label: "Paid", variant: "default" as const, className: "bg-green-500/10 text-green-600 border-green-500/20", }; case "pending": return { label: "Pending", variant: "secondary" as const, className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20", }; case "failed": return { label: "Failed", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", }; case "refunded": return { label: "Refunded", variant: "secondary" as const, className: "bg-blue-500/10 text-blue-600 border-blue-500/20", }; case "void": return { label: "Void", variant: "secondary" as const, className: "", }; default: return { label: "Unknown", variant: "secondary" as const, className: "", }; } } export default function BillingInvoiceDetails({ invoice, open, onOpenChange, onDownload, onPrint, className, currency = "USD", }: BillingInvoiceDetailsProps) { const [isDownloading, setIsDownloading] = useState(false); const [isPrinting, setIsPrinting] = useState(false); if (!invoice) return null; const statusConfig = getStatusConfig(invoice.status); const invoiceCurrency = invoice.currency || currency; const handleDownload = async () => { setIsDownloading(true); try { await onDownload?.(invoice.id); } finally { setIsDownloading(false); } }; const handlePrint = async () => { setIsPrinting(true); try { await onPrint?.(invoice.id); window.print(); } finally { setIsPrinting(false); } }; return (

Invoice {invoice.invoiceNumber} {invoice.description || `Invoice dated ${formatDate(invoice.date)}`}

{statusConfig.label}

Invoice Details

Date: {formatDate(invoice.date)}

{invoice.dueDate && (

Due Date: {formatDate(invoice.dueDate)}

)}

Status: {statusConfig.label}

{invoice.billingAddress && (

Billing Address

{invoice.billingAddress.name}

{invoice.billingAddress.line1}

{invoice.billingAddress.line2 && (

{invoice.billingAddress.line2}

)}

{invoice.billingAddress.city},{" "} {invoice.billingAddress.state}{" "} {invoice.billingAddress.zip}

{invoice.billingAddress.country}

)}

Line Items

Description

Quantity

Unit Price

Subtotal

{invoice.lineItems.map((item, idx) => (

{item.description}

Quantity: {item.quantity}

Unit Price: {formatPrice(item.unitPrice, invoiceCurrency)}

Subtotal: {formatPrice(item.subtotal, invoiceCurrency)}

))}

Subtotal {formatPrice(invoice.subtotal, invoiceCurrency)}

{invoice.discount && (

Discount {invoice.discount.label && ` (${invoice.discount.label})`} {invoice.discount.code && ` - ${invoice.discount.code}`} -{formatPrice(invoice.discount.amount, invoiceCurrency)}

)} {invoice.tax && (

Tax{invoice.tax.label && ` (${invoice.tax.label})`} {invoice.tax.rate !== undefined && ` ${(invoice.tax.rate * 100).toFixed(1)}%`} {formatPrice(invoice.tax.amount, invoiceCurrency)}

)}

Total {formatPrice(invoice.total, invoiceCurrency)}

{invoice.paymentMethod && ( <>

Payment Method

{invoice.paymentMethod.type} {invoice.paymentMethod.brand && ( <> {invoice.paymentMethod.brand} )} {invoice.paymentMethod.last4 && ( <> •••• {invoice.paymentMethod.last4} )}

)}

{onPrint && ( )} {onDownload && ( )}

); }

Example Usage