billing-2

1"use client"
2 
3import * as React from "react"
4import { RiDownloadLine } from "@remixicon/react"
5import { toast } from "sonner"
6 
7import { Badge } from "@/components/ui/badge"
8import { Button } from "@/components/ui/button"
9import {
10  Card,
11  CardAction,
12  CardContent,
13  CardDescription,
14  CardHeader,
15  CardTitle,
16} from "@/components/ui/card"
17import { Checkbox } from "@/components/ui/checkbox"
18import {
19  Table,
20  TableBody,
21  TableCell,
22  TableHead,
23  TableHeader,
24  TableRow,
25} from "@/components/ui/table"
26import { Toaster } from "@/components/ui/sonner"
27 
28type InvoiceStatus = "Paid" | "Pending" | "Failed"
29 
30const INVOICES: {
31  id: string
32  date: string
33  amount: string
34  status: InvoiceStatus
35}[] = [
36  {
37    id: "INV-2026-0047",
38    date: "Jun 1, 2026",
39    amount: "$149.00",
40    status: "Paid",
41  },
42  {
43    id: "INV-2026-0031",
44    date: "May 1, 2026",
45    amount: "$149.00",
46    status: "Paid",
47  },
48  {
49    id: "INV-2026-0018",
50    date: "Apr 1, 2026",
51    amount: "$99.00",
52    status: "Paid",
53  },
54  {
55    id: "INV-2026-0009",
56    date: "Mar 1, 2026",
57    amount: "$99.00",
58    status: "Failed",
59  },
60  {
61    id: "INV-2026-0004",
62    date: "Feb 1, 2026",
63    amount: "$99.00",
64    status: "Paid",
65  },
66  {
67    id: "INV-2025-0089",
68    date: "Jan 1, 2026",
69    amount: "$49.00",
70    status: "Pending",
71  },
72  {
73    id: "INV-2025-0074",
74    date: "Dec 1, 2025",
75    amount: "$49.00",
76    status: "Paid",
77  },
78]
79 
80const STATUS_VARIANT: Record<
81  InvoiceStatus,
82  "default" | "secondary" | "destructive" | "outline"
83> = {
84  Paid: "secondary",
85  Pending: "outline",
86  Failed: "destructive",
87}
88 
89export default function BillingBlock() {
90  const [selected, setSelected] = React.useState<Record<string, boolean>>({})
91 
92  const selectedIds = INVOICES.filter((i) => selected[i.id]).map((i) => i.id)
93  const allSelected = selectedIds.length === INVOICES.length
94  const someSelected = selectedIds.length > 0 && !allSelected
95 
96  function toggleAll(checked: boolean) {
97    setSelected(
98      checked ? Object.fromEntries(INVOICES.map((i) => [i.id, true])) : {}
99    )
100  }
101 
102  function handleDownload(id: string) {
103    toast.success("Invoice downloaded", {
104      description: `${id} has been saved to your device.`,
105    })
106  }
107 
108  function handleBulkDownload() {
109    toast.success(
110      `Downloading ${selectedIds.length} ${
111        selectedIds.length === 1 ? "invoice" : "invoices"
112      }`,
113      { description: "Your files are being prepared." }
114    )
115  }
116 
117  return (
118// … truncated