"use client"; import { Download, FileText, Search } from "lucide-react"; import { useMemo, useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface Invoice { id: string; invoiceNumber: string; date: Date; amount: number; currency?: string; status: "paid" | "pending" | "failed" | "refunded" | "void"; description?: string; downloadUrl?: string; items?: InvoiceItem[]; } export interface InvoiceItem { description: string; quantity?: number; amount: number; } export interface BillingInvoiceListProps { invoices: Invoice[]; onDownload?: (invoiceId: string) => void; onViewDetails?: (invoiceId: string) => void; className?: string; showFilters?: boolean; showSearch?: boolean; itemsPerPage?: number; 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: Invoice["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 BillingInvoiceList({ invoices, onDownload, onViewDetails, className, showFilters = true, showSearch = true, itemsPerPage = 10, currency = "USD", }: BillingInvoiceListProps) { const [searchQuery, setSearchQuery] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [currentPage, setCurrentPage] = useState(1); const filteredInvoices = useMemo(() => { let filtered = invoices; if (searchQuery) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (invoice) => invoice.invoiceNumber.toLowerCase().includes(query) || invoice.description?.toLowerCase().includes(query) ); } if (statusFilter !== "all") { filtered = filtered.filter((invoice) => invoice.status === statusFilter); } return filtered; }, [invoices, searchQuery, statusFilter]); const paginatedInvoices = useMemo(() => { const start = (currentPage - 1) * itemsPerPage; const end = start + itemsPerPage; return filteredInvoices.slice(start, end); }, [filteredInvoices, currentPage, itemsPerPage]); const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage); if (invoices.length === 0) { return ( Invoices Your invoice history

No invoices found

); } return (

Invoices View and download your invoice history

{filteredInvoices.length} invoice {filteredInvoices.length !== 1 ? "s" : ""}

{(showSearch || showFilters) && (

{showSearch && (

{ setSearchQuery(e.target.value); setCurrentPage(1); }} placeholder="Search by invoice number…" type="search" value={searchQuery} />

)} {showFilters && ( )}

)} {paginatedInvoices.length === 0 ? (

No invoices match your filters

) : ( <>

{paginatedInvoices.map((invoice) => { const statusConfig = getStatusConfig(invoice.status); return (

{invoice.invoiceNumber} {statusConfig.label}

{formatDate(invoice.date)} {invoice.description && ( <> {invoice.description} )}

{formatPrice( invoice.amount, invoice.currency || currency )}

{onViewDetails && ( )} {onDownload && ( )}

); })}

{totalPages > 1 && ( <>

Page {currentPage} of {totalPages}

)} )}

); }

Example Usage