92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslations } from "next-intl";
|
|
import { getWallet } from "@/lib/api/billing";
|
|
|
|
export function BillingContent() {
|
|
const t = useTranslations("account.billing");
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["wallet"],
|
|
queryFn: getWallet,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return <p className="text-sm text-red-600 dark:text-red-400">{t("loadError")}</p>;
|
|
}
|
|
|
|
const transactions = data.transactions ?? [];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("balanceTitle")}</CardTitle>
|
|
<CardDescription>
|
|
{t("periodStart", {
|
|
date: new Date(data.periodStart).toLocaleDateString(),
|
|
})}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="font-mono text-3xl font-semibold text-zinc-900 dark:text-zinc-50">
|
|
{data.balance}
|
|
</p>
|
|
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("creditsLabel")}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<section>
|
|
<h2 className="mb-4 text-lg font-medium text-zinc-900 dark:text-zinc-50">
|
|
{t("transactionsTitle")}
|
|
</h2>
|
|
{transactions.length === 0 ? (
|
|
<p className="text-sm text-zinc-600 dark:text-zinc-400">{t("transactionsEmpty")}</p>
|
|
) : (
|
|
<div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
|
|
<tr>
|
|
<th className="px-4 py-3 font-medium">{t("columns.date")}</th>
|
|
<th className="px-4 py-3 font-medium">{t("columns.type")}</th>
|
|
<th className="px-4 py-3 font-medium">{t("columns.amount")}</th>
|
|
<th className="px-4 py-3 font-medium">{t("columns.reference")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.map((tx) => (
|
|
<tr
|
|
key={tx.id}
|
|
className="border-b border-zinc-100 last:border-0 dark:border-zinc-800"
|
|
>
|
|
<td className="px-4 py-3 font-mono text-xs">
|
|
{new Date(tx.createdAt).toLocaleString()}
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-xs">{tx.type}</td>
|
|
<td className="px-4 py-3 font-mono">{tx.amount}</td>
|
|
<td className="px-4 py-3 font-mono text-xs">
|
|
{tx.referenceType ?? "—"}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|