Invoice History

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/card";
11import {
12  Table,
13  TableBody,
14  TableCell,
15  TableCaption,
16  TableHead,
17  TableHeader,
18  TableRow,
19} from "@/components/ui/table";
20import { Badge } from "@/components/ui/badge";
21import { CalendarDays, Download, ReceiptText } from "lucide-react";
22import { Button } from "@/components/ui/button";
23 
24export interface InvoiceItem {
25  id: string;
26  date: string;
27  amount: string;
28  status: "paid" | "refunded" | "open" | "void";
29  invoiceUrl?: string;
30  description?: string;
31}
32 
33interface InvoiceHistoryProps {
34  className?: string;
35  title?: string;
36  description?: string;
37  invoices: InvoiceItem[];
38  onDownload?: (invoiceId: string) => void;
39}
40 
41export function InvoiceHistory({
42  className,
43  title = "Invoice History",
44  description = "Your past invoices and payment receipts.",
45  invoices,
46  onDownload,
47}: InvoiceHistoryProps) {
48  if (!invoices) return null;
49 
50  const statusBadge = (status: InvoiceItem["status"]) => {
51    switch (status) {
52      case "paid":
53        return (
54          <Badge className="border-emerald-700/40 bg-emerald-600 text-emerald-50">
55            Paid
56          </Badge>
57        );
58      case "refunded":
59        return <Badge variant="secondary">Refunded</Badge>;
60      case "open":
61        return <Badge variant="outline">Open</Badge>;
62      case "void":
63        return <Badge variant="outline">Void</Badge>;
64    }
65  };
66 
67  return (
68    <Card className={cn("w-full", className)}>
69      {(title || description) && (
70        <CardHeader className="space-y-1">
71          {title && (
72            <CardTitle className="flex items-center gap-2 truncate text-base text-lg leading-tight font-medium sm:gap-3 sm:text-xl">
73              <ReceiptText className="text-primary h-4 w-4" />
74              {title}
75            </CardTitle>
76          )}
77          {description && (
78            <CardDescription className="text-muted-foreground text-sm">
79              {description}
80            </CardDescription>
81          )}
82        </CardHeader>
83      )}
84      <CardContent>
85        <Table>
86          <TableCaption className="sr-only">
87            List of past invoices with dates, amounts, status and download
88            actions
89          </TableCaption>
90          <TableHeader>
91            <TableRow>
92              <TableHead className="w-[120px]">Date</TableHead>
93              <TableHead>Description</TableHead>
94// … truncated