Invoice Card

1import { cva, type VariantProps } from "class-variance-authority";
2import { Download, ExternalLink, FileText } from "lucide-react";
3import * as React from "react";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8const invoiceCardVariants = cva(
9  "relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors hover:bg-accent/50",
10  {
11    variants: {
12      variant: {
13        default: "border-border",
14        compact: "gap-3 p-3",
15      },
16    },
17    defaultVariants: {
18      variant: "default",
19    },
20  },
21);
22 
23interface InvoiceCardProps
24  extends React.HTMLAttributes<HTMLDivElement>,
25    VariantProps<typeof invoiceCardVariants> {}
26 
27const InvoiceCard = React.forwardRef<HTMLDivElement, InvoiceCardProps>(
28  ({ className, variant, ...props }, ref) => (
29    <div
30      ref={ref}
31      className={cn(invoiceCardVariants({ variant, className }))}
32      {...props}
33    />
34  ),
35);
36InvoiceCard.displayName = "InvoiceCard";
37 
38const InvoiceCardIcon = React.forwardRef<
39  HTMLDivElement,
40  React.HTMLAttributes<HTMLDivElement>
41>(({ className, ...props }, ref) => (
42  <div
43    ref={ref}
44    className={cn(
45      "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted",
46      className,
47    )}
48    {...props}
49  >
50    <FileText className="h-5 w-5 text-muted-foreground" />
51  </div>
52));
53InvoiceCardIcon.displayName = "InvoiceCardIcon";
54 
55const InvoiceCardContent = React.forwardRef<
56  HTMLDivElement,
57  React.HTMLAttributes<HTMLDivElement>
58>(({ className, ...props }, ref) => (
59  <div
60    ref={ref}
61    className={cn("flex min-w-0 flex-1 flex-col gap-1", className)}
62    {...props}
63  />
64));
65InvoiceCardContent.displayName = "InvoiceCardContent";
66 
67const InvoiceCardHeader = React.forwardRef<
68  HTMLDivElement,
69  React.HTMLAttributes<HTMLDivElement>
70>(({ className, ...props }, ref) => (
71  <div
72    ref={ref}
73    className={cn("flex items-center gap-2", className)}
74    {...props}
75  />
76));
77InvoiceCardHeader.displayName = "InvoiceCardHeader";
78 
79const InvoiceCardNumber = React.forwardRef<
80  HTMLSpanElement,
81  React.HTMLAttributes<HTMLSpanElement>
82>(({ className, ...props }, ref) => (
83  <span
84    ref={ref}
85    className={cn("font-medium text-foreground", className)}
86    {...props}
87  />
88));
89InvoiceCardNumber.displayName = "InvoiceCardNumber";
90 
91type InvoiceStatus = "paid" | "pending" | "failed" | "refunded" | "draft";
92 
93const statusConfig: Record<
94  InvoiceStatus,
95  {
96// … truncated