add badges to invoice cards

Author: brendan-kellam

packages/web/src/app/(app)/settings/license/recentInvoicesCard.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { ExternalLink } from "lucide-react";
 import { Invoice } from "@/ee/features/lighthouse/types";
 import { SettingsCard, SettingsCardGroup } from "../components/settingsCard";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
 interface RecentInvoicesCardProps {
@@ -26,13 +27,21 @@ export function RecentInvoicesCard({ invoices }: RecentInvoicesCardProps) {
 }
 
 function InvoiceRow({ invoice }: { invoice: Invoice }) {
+    const statusBadge = getStatusBadge(invoice.status);
     return (
         <SettingsCard>
             <div className="flex items-center gap-6">
                 <p className="text-sm w-32 shrink-0 font-medium">{formatDate(invoice.createdAt)}</p>
-                <p className="text-sm text-muted-foreground flex-1">
-                    {formatCurrency(invoice.amount, invoice.currency)}
-                </p>
+                <div className="flex items-center gap-2 flex-1">
+                    <p className="text-sm text-muted-foreground">
+                        {formatCurrency(invoice.amount, invoice.currency)}
+                    </p>
+                    {statusBadge && (
+                        <Badge variant="outline" className={statusBadge.className}>
+                            {statusBadge.label}
+                        </Badge>
+                    )}
+                </div>
                 {invoice.hostedInvoiceUrl && (
                     <Button variant="ghost" asChild>
                         <Link
@@ -50,6 +59,20 @@ function InvoiceRow({ invoice }: { invoice: Invoice }) {
     );
 }
 
+// Maps Stripe invoice statuses to display badges. See:
+// https://docs.stripe.com/invoicing/overview#invoice-statuses
+const STATUS_BADGES: Record<string, { label: string; className: string }> = {
+    draft: { label: 'Draft', className: 'border-muted-foreground/30 text-muted-foreground' },
+    open: { label: 'Open', className: 'border-primary/30 text-primary' },
+    paid: { label: 'Paid', className: 'border-primary/30 text-primary' },
+    uncollectible: { label: 'Uncollectible', className: 'border-destructive/30 text-destructive' },
+    void: { label: 'Void', className: 'border-muted-foreground/30 text-muted-foreground' },
+};
+
+function getStatusBadge(status: string): { label: string; className: string } | null {
+    return STATUS_BADGES[status] ?? null;
+}
+
 function formatDate(isoDate: string): string {
     return new Date(isoDate).toLocaleDateString('en-US', {
         month: 'short',