billing-3

1"use client"
2 
3import * as React from "react"
4import {
5  type ColumnDef,
6  type SortingState,
7  flexRender,
8  getCoreRowModel,
9  getPaginationRowModel,
10  getSortedRowModel,
11  useReactTable,
12} from "@tanstack/react-table"
13import {
14  RiArrowDownLine,
15  RiArrowLeftSLine,
16  RiArrowRightLine,
17  RiArrowRightSLine,
18  RiArrowUpLine,
19  RiBankCardLine,
20  RiCalendarLine,
21  RiDownloadLine,
22  RiExpandUpDownLine,
23  RiHardDriveLine,
24  RiPencilLine,
25} from "@remixicon/react"
26import { toast } from "sonner"
27 
28import { cn } from "@/lib/utils"
29import { Badge } from "@/components/ui/badge"
30import { Button } from "@/components/ui/button"
31import {
32  Card,
33  CardAction,
34  CardContent,
35  CardDescription,
36  CardFooter,
37  CardHeader,
38  CardTitle,
39} from "@/components/ui/card"
40import {
41  Dialog,
42  DialogClose,
43  DialogContent,
44  DialogDescription,
45  DialogFooter,
46  DialogHeader,
47  DialogTitle,
48  DialogTrigger,
49} from "@/components/ui/dialog"
50import { Field, FieldLabel } from "@/components/ui/field"
51import { Input } from "@/components/ui/input"
52import { Progress } from "@/components/ui/progress"
53import { Separator } from "@/components/ui/separator"
54import { Toaster } from "@/components/ui/sonner"
55import {
56  Table,
57  TableBody,
58  TableCell,
59  TableHead,
60  TableHeader,
61  TableRow,
62} from "@/components/ui/table"
63 
64const PLAN = {
65  name: "Pro",
66  price: "$49",
67  interval: "/ Month",
68  renewalDate: "July 14, 2026",
69  storage: {
70    used: 162,
71    total: 250,
72  },
73}
74 
75const PAYMENT = {
76  brand: "Visa",
77  last4: "4242",
78  expiry: "08 / 28",
79  holder: "Jordan Rivera",
80}
81 
82type InvoiceStatus = "Paid" | "Pending" | "Failed"
83 
84type Invoice = {
85  id: string
86  date: string
87  amount: string
88  status: InvoiceStatus
89}
90 
91const INVOICES: Invoice[] = [
92  {
93    id: "INV-2026-0047",
94    date: "Jun 1, 2026",
95    amount: "$49.00",
96    status: "Paid",
97  },
98  {
99    id: "INV-2026-0031",
100    date: "May 1, 2026",
101    amount: "$49.00",
102    status: "Paid",
103  },
104  {
105    id: "INV-2026-0018",
106    date: "Apr 1, 2026",
107    amount: "$49.00",
108    status: "Pending",
109  },
110  {
111    id: "INV-2026-0009",
112    date: "Mar 1, 2026",
113    amount: "$49.00",
114    status: "Paid",
115  },
116  {
117    id: "INV-2026-0004",
118    date: "Feb 1, 2026",
119    amount: "$49.00",
120    status: "Failed",
121  },
122  {
123    id: "INV-2026-0001",
124    date: "Jan 1, 2026",
125    amount: "$49.00",
126    status: "Paid",
127  },
128  {
129    id: "INV-2025-0142",
130    date: "Dec 1, 2025",
131    amount: "$49.00",
132    status: "Paid",
133  },
134  {
135    id: "INV-2025-0128",
136    date: "Nov 1, 2025",
137// … truncated