dashboard-2

1import { Button } from "@/components/ui/button";
2import {
3	CardContent,
4	CardDescription,
5	CardHeader,
6	CardTitle,
7} from "@/components/ui/card";
8import {
9	Empty,
10	EmptyContent,
11	EmptyDescription,
12	EmptyHeader,
13	EmptyMedia,
14	EmptyTitle,
15} from "@/components/ui/empty";
16import { DashboardCard } from "@/components/dashboard-card";
17 
18export function BillingHealth() {
19	return (
20		<DashboardCard className="gap-0">
21			<CardHeader className="border-b">
22				<CardTitle className="text-balance text-base">Billing health</CardTitle>
23				<CardDescription className="text-pretty">
24					Nothing urgent needs your attention.
25				</CardDescription>
26			</CardHeader>
27			<CardContent className="flex h-full items-center px-0">
28				<Empty>
29					<EmptyHeader>
30						<EmptyMedia variant="icon">
31							<IconPlaceholder
32								aria-hidden="true"
33								hugeicons="CheckmarkCircle02Icon"
34								lucide="CircleCheckIcon"
35								phosphor="CheckCircleIcon"
36								remixicon="RiCheckboxCircleLine"
37								tabler="IconCircleCheck"
38							/>
39						</EmptyMedia>
40						<EmptyTitle>You're caught up.</EmptyTitle>
41						<EmptyDescription className="text-xs">
42							Balances and payouts look fine. nothing overdue in this snapshot.
43						</EmptyDescription>
44					</EmptyHeader>
45					<EmptyContent>
46						<Button asChild variant="ghost">
47							<a href="/#">
48								Review open invoices
49								<IconPlaceholder
50									aria-hidden="true"
51									hugeicons="ArrowRightIcon"
52									lucide="ArrowRightIcon"
53									phosphor="ArrowRightIcon"
54									remixicon="RiArrowRightLine"
55									tabler="IconArrowRight"
56								/>
57							</a>
58						</Button>
59					</EmptyContent>
60				</Empty>
61			</CardContent>
62		</DashboardCard>
63	);
64}