Billing Billing History

1"use client";
2 
3import { ArrowDown, ArrowUp, 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 BillingTransaction {
30  id: string;
31  date: Date;
32  type: "charge" | "refund" | "credit" | "adjustment" | "subscription";
33  amount: number;
34  currency?: string;
35  description: string;
36  status: "completed" | "pending" | "failed";
37  invoiceId?: string;
38  paymentMethod?: string;
39  metadata?: Record<string, unknown>;
40}
41 
42export interface BillingBillingHistoryProps {
43  transactions: BillingTransaction[];
44  onViewDetails?: (transactionId: string) => void;
45  onExport?: () => void;
46  className?: string;
47  showFilters?: boolean;
48  showSearch?: boolean;
49  showSummary?: boolean;
50  currency?: string;
51  itemsPerPage?: number;
52  groupBy?: "none" | "month" | "year";
53}
54 
55function formatDate(date: Date): string {
56  const year = date.getFullYear();
57  const month = date.toLocaleString("en-US", { month: "short" });
58  const day = date.getDate();
59  return `${month} ${day}, ${year}`;
60}
61 
62function formatPrice(amount: number, currency = "USD"): string {
63  const sign = amount >= 0 ? "" : "-";
64  return `${sign}${new Intl.NumberFormat("en-US", {
65    style: "currency",
66    currency,
67    minimumFractionDigits: 2,
68    maximumFractionDigits: 2,
69  }).format(Math.abs(amount))}`;
70}
71 
72function getTypeConfig(type: BillingTransaction["type"]) {
73  switch (type) {
74    case "charge":
75      return { label: "Charge", icon: ArrowDown, className: "text-green-600" };
76    case "refund":
77      return { label: "Refund", icon: ArrowUp, className: "text-blue-600" };
78    case "credit":
79      return { label: "Credit", icon: ArrowUp, className: "text-blue-600" };
80    case "adjustment":
81      return {
82        label: "Adjustment",
83        icon: ArrowUp,
84        className: "text-yellow-600",
85      };
86    case "subscription":
87      return {
88        label: "Subscription",
89        icon: ArrowDown,
90// … truncated