"use client"; import { cn } from "@/lib/utils"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableCaption, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Badge } from "@/components/ui/badge"; import { CalendarDays, Download, ReceiptText } from "lucide-react"; import { Button } from "@/components/ui/button"; export interface InvoiceItem { id: string; date: string; amount: string; status: "paid" | "refunded" | "open" | "void"; invoiceUrl?: string; description?: string; } interface InvoiceHistoryProps { className?: string; title?: string; description?: string; invoices: InvoiceItem[]; onDownload?: (invoiceId: string) => void; } export function InvoiceHistory({ className, title = "Invoice History", description = "Your past invoices and payment receipts.", invoices, onDownload, }: InvoiceHistoryProps) { if (!invoices) return null; const statusBadge = (status: InvoiceItem["status"]) => { switch (status) { case "paid": return ( Paid ); case "refunded": return Refunded; case "open": return Open; case "void": return Void; } }; return ( {(title || description) && ( {title && ( {title} )} {description && ( {description} )} )} List of past invoices with dates, amounts, status and download actions Date Description Amount Status Action {invoices.length === 0 && ( No invoices yet )} {invoices.map((inv) => (

{inv.date}

{inv.description || "Invoice"}

{inv.amount} {statusBadge(inv.status)} ))}

); }

Ecommerce - Order History Blocks

Select an Item to view its code