"use client"; import { ArrowDown, ArrowUp, 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 BillingTransaction { id: string; date: Date; type: "charge" | "refund" | "credit" | "adjustment" | "subscription"; amount: number; currency?: string; description: string; status: "completed" | "pending" | "failed"; invoiceId?: string; paymentMethod?: string; metadata?: Record; } export interface BillingBillingHistoryProps { transactions: BillingTransaction[]; onViewDetails?: (transactionId: string) => void; onExport?: () => void; className?: string; showFilters?: boolean; showSearch?: boolean; showSummary?: boolean; currency?: string; itemsPerPage?: number; groupBy?: "none" | "month" | "year"; } 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 { const sign = amount >= 0 ? "" : "-"; return `${sign}${new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(Math.abs(amount))}`; } function getTypeConfig(type: BillingTransaction["type"]) { switch (type) { case "charge": return { label: "Charge", icon: ArrowDown, className: "text-green-600" }; case "refund": return { label: "Refund", icon: ArrowUp, className: "text-blue-600" }; case "credit": return { label: "Credit", icon: ArrowUp, className: "text-blue-600" }; case "adjustment": return { label: "Adjustment", icon: ArrowUp, className: "text-yellow-600", }; case "subscription": return { label: "Subscription", icon: ArrowDown, className: "text-primary", }; default: return { label: "Transaction", icon: FileText, className: "" }; } } function getStatusConfig(status: BillingTransaction["status"]) { switch (status) { case "completed": return { label: "Completed", 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", }; default: return { label: "Unknown", variant: "secondary" as const, className: "", }; } } export default function BillingBillingHistory({ transactions, onViewDetails, onExport, className, showFilters = true, showSearch = true, showSummary = true, currency = "USD", itemsPerPage = 10, groupBy = "none", }: BillingBillingHistoryProps) { const [searchQuery, setSearchQuery] = useState(""); const [typeFilter, setTypeFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const [sortBy, setSortBy] = useState<"date" | "amount">("date"); const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc"); const [currentPage, setCurrentPage] = useState(1); const filteredTransactions = useMemo(() => { let filtered = transactions; if (searchQuery) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (tx) => tx.description.toLowerCase().includes(query) || tx.id.toLowerCase().includes(query) || tx.invoiceId?.toLowerCase().includes(query) || formatPrice(tx.amount, tx.currency || currency) .toLowerCase() .includes(query) ); } if (typeFilter !== "all") { filtered = filtered.filter((tx) => tx.type === typeFilter); } if (statusFilter !== "all") { filtered = filtered.filter((tx) => tx.status === statusFilter); } filtered.sort((a, b) => { let comparison = 0; if (sortBy === "date") { comparison = a.date.getTime() - b.date.getTime(); } else { comparison = a.amount - b.amount; } return sortOrder === "asc" ? comparison : -comparison; }); return filtered; }, [ transactions, searchQuery, typeFilter, statusFilter, sortBy, sortOrder, currency, ]); const summary = useMemo(() => { const charges = filteredTransactions .filter((tx) => tx.type === "charge" && tx.status === "completed") .reduce((sum, tx) => sum + tx.amount, 0); const refunds = filteredTransactions .filter((tx) => tx.type === "refund" && tx.status === "completed") .reduce((sum, tx) => sum + Math.abs(tx.amount), 0); const credits = filteredTransactions .filter((tx) => tx.type === "credit" && tx.status === "completed") .reduce((sum, tx) => sum + Math.abs(tx.amount), 0); return { charges, refunds, credits, net: charges - refunds - credits }; }, [filteredTransactions]); const paginatedTransactions = useMemo(() => { const start = (currentPage - 1) * itemsPerPage; const end = start + itemsPerPage; return filteredTransactions.slice(start, end); }, [filteredTransactions, currentPage, itemsPerPage]); const totalPages = Math.ceil(filteredTransactions.length / itemsPerPage); if (transactions.length === 0) { return ( Billing history Your transaction history

No transactions found

); } return (

Billing history View all your transactions

{onExport && ( )}

{showSummary && (

Total charges {formatPrice(summary.charges, currency)}

Refunds {formatPrice(summary.refunds, currency)}

Credits {formatPrice(summary.credits, currency)}

Net total {formatPrice(summary.net, currency)}

)} {(showSearch || showFilters) && (

{showSearch && (

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

)} {showFilters && (

)}

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

No transactions match your filters

) : ( <>

{paginatedTransactions.map((transaction) => { const typeConfig = getTypeConfig(transaction.type); const statusConfig = getStatusConfig(transaction.status); const TypeIcon = typeConfig.icon; return (

{transaction.description} {statusConfig.label}

{formatDate(transaction.date)} {transaction.invoiceId && ( <> {transaction.invoiceId} )} {transaction.paymentMethod && ( <> {transaction.paymentMethod} )}

0 && "text-foreground" )} > {formatPrice( transaction.amount, transaction.currency || currency )} {onViewDetails && ( )}

); })}

{totalPages > 1 && ( <>

Page {currentPage} of {totalPages}

)} )}

); }

Example Usage