Billing Invoice List

1"use client";
2 
3import { Download, FileText, Search } from "lucide-react";
4import { useMemo, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Badge } from "@/registry/new-york/ui/badge";
7import { Button } from "@/registry/new-york/ui/button";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/registry/new-york/ui/card";
15import {
16  InputGroup,
17  InputGroupAddon,
18  InputGroupInput,
19} from "@/registry/new-york/ui/input-group";
20import {
21  Select,
22  SelectContent,
23  SelectItem,
24  SelectTrigger,
25  SelectValue,
26} from "@/registry/new-york/ui/select";
27import { Separator } from "@/registry/new-york/ui/separator";
28 
29export interface Invoice {
30  id: string;
31  invoiceNumber: string;
32  date: Date;
33  amount: number;
34  currency?: string;
35  status: "paid" | "pending" | "failed" | "refunded" | "void";
36  description?: string;
37  downloadUrl?: string;
38  items?: InvoiceItem[];
39}
40 
41export interface InvoiceItem {
42  description: string;
43  quantity?: number;
44  amount: number;
45}
46 
47export interface BillingInvoiceListProps {
48  invoices: Invoice[];
49  onDownload?: (invoiceId: string) => void;
50  onViewDetails?: (invoiceId: string) => void;
51  className?: string;
52  showFilters?: boolean;
53  showSearch?: boolean;
54  itemsPerPage?: number;
55  currency?: string;
56}
57 
58function formatDate(date: Date): string {
59  const year = date.getFullYear();
60  const month = date.toLocaleString("en-US", { month: "short" });
61  const day = date.getDate();
62  return `${month} ${day}, ${year}`;
63}
64 
65function formatPrice(amount: number, currency = "USD"): string {
66  return new Intl.NumberFormat("en-US", {
67    style: "currency",
68    currency,
69    minimumFractionDigits: 2,
70    maximumFractionDigits: 2,
71  }).format(amount);
72}
73 
74function getStatusConfig(status: Invoice["status"]) {
75  switch (status) {
76    case "paid":
77      return {
78        label: "Paid",
79        variant: "default" as const,
80        className: "bg-green-500/10 text-green-600 border-green-500/20",
81      };
82    case "pending":
83      return {
84        label: "Pending",
85        variant: "secondary" as const,
86        className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
87      };
88    case "failed":
89      return {
90        label: "Failed",
91        variant: "destructive" as const,
92        className: "bg-destructive/10 text-destructive border-destructive/20",
93      };
94    case "refunded":
95      return {
96        label: "Refunded",
97        variant: "secondary" as const,
98// … truncated