433 lines
15 KiB
TypeScript
433 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactElement, ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
|
|
import { cn } from "@/lib/utils";
|
|
import type { AdminDrawFinanceSummaryData } from "@/types/api/admin-draw-finance";
|
|
import type { AdminRiskPoolRow } from "@/types/api/admin-risk";
|
|
import type {
|
|
AdminDashboardDrawPanel,
|
|
AdminDashboardSoldOutBuckets,
|
|
} from "@/types/api/admin-dashboard";
|
|
|
|
export type SoldOutBuckets = AdminDashboardSoldOutBuckets;
|
|
|
|
type MoneyFormatter = (minor: number, currency: string | null) => string;
|
|
|
|
export function StatCard({
|
|
label,
|
|
value,
|
|
hint,
|
|
icon,
|
|
accent = "primary",
|
|
}: {
|
|
label: string;
|
|
value: ReactNode;
|
|
hint?: ReactNode;
|
|
icon: ReactNode;
|
|
accent?: "primary" | "destructive" | "muted";
|
|
}): ReactElement {
|
|
const accentClass =
|
|
accent === "destructive"
|
|
? "bg-destructive text-destructive-foreground"
|
|
: accent === "muted"
|
|
? "bg-muted text-foreground"
|
|
: "bg-primary text-primary-foreground";
|
|
|
|
return (
|
|
<div className="rounded-xl border border-border/80 bg-card p-5 shadow-sm">
|
|
<div className="flex gap-4">
|
|
<div
|
|
className={cn(
|
|
"flex size-11 shrink-0 items-center justify-center rounded-lg shadow-sm",
|
|
accentClass,
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-muted-foreground">{label}</p>
|
|
<p className="mt-1 text-2xl font-bold tabular-nums tracking-tight text-foreground">{value}</p>
|
|
{hint ? <div className="mt-2 text-xs text-muted-foreground">{hint}</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CapUsageBar({
|
|
locked,
|
|
cap,
|
|
usagePct,
|
|
formatMoney,
|
|
currency,
|
|
}: {
|
|
locked: number;
|
|
cap: number;
|
|
usagePct: number;
|
|
formatMoney: MoneyFormatter;
|
|
currency: string | null;
|
|
}): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const pct = Math.min(100, Math.max(0, usagePct));
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-end justify-between gap-2">
|
|
<span className="text-sm font-medium text-foreground">{t("riskCapUsage")}</span>
|
|
<span className="text-2xl font-bold tabular-nums text-foreground">{pct.toFixed(1)}%</span>
|
|
</div>
|
|
<div className="h-3 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className={cn(
|
|
"h-full rounded-full transition-all duration-500",
|
|
pct >= 90 ? "bg-destructive" : pct >= 70 ? "bg-amber-500" : "bg-primary",
|
|
)}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<p className="text-xs tabular-nums text-muted-foreground">
|
|
{t("lockedAndCap", {
|
|
locked: formatMoney(locked, currency),
|
|
cap: formatMoney(cap, currency),
|
|
})}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FinanceStructureChart({
|
|
finance,
|
|
formatMoney,
|
|
}: {
|
|
finance: AdminDrawFinanceSummaryData;
|
|
formatMoney: MoneyFormatter;
|
|
}): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const currency = finance.currency_code;
|
|
const bet = finance.total_bet_minor;
|
|
const win = finance.total_win_payout_minor;
|
|
const jackpot = finance.total_jackpot_win_minor;
|
|
const payout = finance.total_payout_minor;
|
|
const gross = finance.approx_house_gross_minor;
|
|
|
|
if (bet <= 0) {
|
|
return <p className="py-8 text-center text-sm text-muted-foreground">{t("noFinanceActivity")}</p>;
|
|
}
|
|
|
|
const winW = (win / bet) * 100;
|
|
const jpW = (jackpot / bet) * 100;
|
|
const grossW = Math.max(0, (gross / bet) * 100);
|
|
const payoutRate = ((payout / bet) * 100).toFixed(1);
|
|
|
|
const segments = [
|
|
{ key: "win", width: winW, className: "bg-emerald-500", label: t("winPayout"), value: win },
|
|
{ key: "jackpot", width: jpW, className: "bg-violet-500", label: t("jackpotPayout"), value: jackpot },
|
|
{ key: "gross", width: grossW, className: "bg-primary", label: t("houseGross"), value: gross },
|
|
].filter((s) => s.width > 0.05);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex h-10 overflow-hidden rounded-lg ring-1 ring-border/60">
|
|
{segments.map((s) => (
|
|
<div
|
|
key={s.key}
|
|
className={cn("min-w-[2px] transition-all", s.className)}
|
|
style={{ width: `${s.width}%` }}
|
|
title={`${s.label}: ${formatMoney(s.value, currency)}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<p className="text-center text-xs text-muted-foreground">
|
|
{t("payoutRateOfBet", { rate: payoutRate })}
|
|
</p>
|
|
<ul className="grid gap-2 sm:grid-cols-3">
|
|
{segments.map((s) => (
|
|
<li key={s.key} className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-3 py-2">
|
|
<span className={cn("size-2.5 shrink-0 rounded-sm", s.className)} />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-muted-foreground">{s.label}</p>
|
|
<p className="truncate text-sm font-semibold tabular-nums">{formatMoney(s.value, currency)}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PayoutCompositionChart({
|
|
finance,
|
|
formatMoney,
|
|
}: {
|
|
finance: AdminDrawFinanceSummaryData;
|
|
formatMoney: MoneyFormatter;
|
|
}): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const currency = finance.currency_code;
|
|
const win = finance.total_win_payout_minor;
|
|
const jackpot = finance.total_jackpot_win_minor;
|
|
const total = win + jackpot;
|
|
|
|
if (total <= 0) {
|
|
return <p className="py-8 text-center text-sm text-muted-foreground">{t("noPayoutYet")}</p>;
|
|
}
|
|
|
|
const winPct = (win / total) * 100;
|
|
const winColor = "oklch(0.62 0.17 162)";
|
|
const jackpotColor = "oklch(0.56 0.22 303)";
|
|
const items = [
|
|
{ label: t("winPayout"), value: win, pct: winPct, className: "bg-emerald-500", color: winColor },
|
|
{
|
|
label: t("jackpotPayout"),
|
|
value: jackpot,
|
|
pct: 100 - winPct,
|
|
className: "bg-violet-500",
|
|
color: jackpotColor,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
|
<div
|
|
className="relative mx-auto size-36 shrink-0 rounded-full"
|
|
style={{
|
|
background: `conic-gradient(from -90deg, ${winColor} 0deg ${winPct * 3.6}deg, ${jackpotColor} ${winPct * 3.6}deg 360deg)`,
|
|
mask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
|
|
WebkitMask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
|
|
}}
|
|
/>
|
|
<ul className="min-w-0 flex-1 space-y-3">
|
|
{items.map((item) => (
|
|
<li key={item.label}>
|
|
<div className="mb-1 flex justify-between gap-2 text-sm">
|
|
<span className="flex items-center gap-2 text-muted-foreground">
|
|
<span className={cn("size-2.5 rounded-sm", item.className)} />
|
|
{item.label}
|
|
</span>
|
|
<span className="font-medium tabular-nums">{item.pct.toFixed(1)}%</span>
|
|
</div>
|
|
<p className="text-sm font-semibold tabular-nums">{formatMoney(item.value, currency)}</p>
|
|
<div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className="h-full rounded-full"
|
|
style={{ width: `${item.pct}%`, background: item.color }}
|
|
/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function HotUsageBars({ rows }: { rows: AdminRiskPoolRow[] }): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
|
|
if (rows.length === 0) {
|
|
return <p className="py-10 text-center text-sm text-muted-foreground">{t("noPoolData")}</p>;
|
|
}
|
|
|
|
return (
|
|
<ul className="space-y-2.5">
|
|
{rows.map((row) => {
|
|
const pct = Math.min(100, Math.max(0, (row.usage_ratio ?? 0) * 100));
|
|
return (
|
|
<li key={row.normalized_number}>
|
|
<div className="mb-1 flex items-center justify-between gap-2 text-xs">
|
|
<span className="truncate font-mono font-medium text-foreground">
|
|
{row.normalized_number.trim()}
|
|
</span>
|
|
<span className="shrink-0 tabular-nums text-muted-foreground">{pct.toFixed(1)}%</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className={cn(
|
|
"h-full rounded-full transition-all",
|
|
pct >= 95 ? "bg-destructive" : pct >= 80 ? "bg-amber-500" : "bg-primary",
|
|
)}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export function SoldOutRing({ buckets }: { buckets: SoldOutBuckets }): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const entries: { key: keyof SoldOutBuckets; label: string; color: string; swatch: string }[] = [
|
|
{ key: "d4", label: t("soldOutBuckets.d4"), color: "oklch(0.52 0.19 264)", swatch: "bg-blue-600" },
|
|
{ key: "d3", label: t("soldOutBuckets.d3"), color: "oklch(0.62 0.17 162)", swatch: "bg-emerald-500" },
|
|
{ key: "d2", label: t("soldOutBuckets.d2"), color: "oklch(0.72 0.16 75)", swatch: "bg-amber-500" },
|
|
{ key: "special", label: t("soldOutBuckets.special"), color: "oklch(0.56 0.22 303)", swatch: "bg-violet-500" },
|
|
{ key: "other", label: t("soldOutBuckets.other"), color: "oklch(0.58 0.2 25)", swatch: "bg-rose-500" },
|
|
];
|
|
const total = entries.reduce((s, e) => s + buckets[e.key], 0);
|
|
|
|
if (total === 0) {
|
|
return <p className="py-10 text-center text-sm text-muted-foreground">{t("noSoldOutNumbers")}</p>;
|
|
}
|
|
|
|
let acc = 0;
|
|
const parts = entries
|
|
.filter((e) => buckets[e.key] > 0)
|
|
.map((e) => {
|
|
const frac = buckets[e.key] / total;
|
|
const start = acc;
|
|
acc += frac;
|
|
return { ...e, frac, start };
|
|
});
|
|
|
|
const gradientStops =
|
|
parts.length === 1
|
|
? `${parts[0].color} 0deg 360deg`
|
|
: parts
|
|
.map((p) => {
|
|
const a0 = p.start * 360;
|
|
const a1 = (p.start + p.frac) * 360;
|
|
return `${p.color} ${a0}deg ${a1}deg`;
|
|
})
|
|
.join(", ");
|
|
|
|
return (
|
|
<div className="flex flex-col items-stretch gap-4 sm:flex-row sm:items-center">
|
|
<div className="relative mx-auto size-40 shrink-0">
|
|
<div
|
|
className="size-full rounded-full"
|
|
style={{
|
|
background: `conic-gradient(from -90deg, ${gradientStops})`,
|
|
mask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
|
|
WebkitMask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
|
|
}}
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
|
|
<p className="text-3xl font-bold tabular-nums">{total}</p>
|
|
<p className="text-xs text-muted-foreground">{t("soldOutTotal")}</p>
|
|
</div>
|
|
</div>
|
|
<ul className="min-w-0 flex-1 space-y-2">
|
|
{entries.map((e) => {
|
|
const count = buckets[e.key];
|
|
const pct = total > 0 ? (count / total) * 100 : 0;
|
|
return (
|
|
<li key={e.key}>
|
|
<div className="mb-1 flex justify-between text-sm">
|
|
<span className="flex items-center gap-2 text-muted-foreground">
|
|
<span className={cn("size-2.5 rounded-sm", e.swatch)} />
|
|
{e.label}
|
|
</span>
|
|
<span className="font-medium tabular-nums">
|
|
{count}
|
|
<span className="ml-1 text-xs font-normal text-muted-foreground">({pct.toFixed(0)}%)</span>
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 overflow-hidden rounded-full bg-muted">
|
|
<div className="h-full rounded-full" style={{ width: `${pct}%`, background: e.color }} />
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ResultBatchProgress({ draw }: { draw: AdminDashboardDrawPanel }): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const { total, pending_review, published } = draw.result_batch_counts;
|
|
const pendingW = total > 0 ? (pending_review / total) * 100 : 0;
|
|
const publishedW = total > 0 ? (published / total) * 100 : 0;
|
|
const otherW = Math.max(0, 100 - pendingW - publishedW);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex h-3 overflow-hidden rounded-full bg-muted">
|
|
{pendingW > 0 ? (
|
|
<div className="bg-amber-500" style={{ width: `${pendingW}%` }} title={t("batchPending")} />
|
|
) : null}
|
|
{publishedW > 0 ? (
|
|
<div className="bg-emerald-600" style={{ width: `${publishedW}%` }} title={t("batchPublished")} />
|
|
) : null}
|
|
{otherW > 0 ? <div className="bg-muted-foreground/30" style={{ width: `${otherW}%` }} /> : null}
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2 text-center">
|
|
<div className="rounded-lg border border-border/60 bg-muted/20 px-2 py-3">
|
|
<p className="text-2xl font-bold tabular-nums text-amber-600">{pending_review}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{t("batchPending")}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/60 bg-muted/20 px-2 py-3">
|
|
<p className="text-2xl font-bold tabular-nums text-emerald-600">{published}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{t("batchPublished")}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/60 bg-muted/20 px-2 py-3">
|
|
<p className="text-2xl font-bold tabular-nums">{total}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{t("batchTotal")}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SettlementStatusChart({
|
|
finance,
|
|
}: {
|
|
finance: AdminDrawFinanceSummaryData;
|
|
}): ReactElement {
|
|
const { t } = useTranslation("dashboard");
|
|
const batches = finance.settlement_batches ?? [];
|
|
|
|
if (batches.length === 0) {
|
|
return <p className="py-6 text-center text-sm text-muted-foreground">{t("noSettlementBatches")}</p>;
|
|
}
|
|
|
|
const counts = new Map<string, number>();
|
|
for (const b of batches) {
|
|
counts.set(b.status, (counts.get(b.status) ?? 0) + 1);
|
|
}
|
|
const entries = [...counts.entries()].sort((a, b) => b[1] - a[1]);
|
|
const max = Math.max(...entries.map((e) => e[1]));
|
|
|
|
const barTone = (status: string): string => {
|
|
switch (status) {
|
|
case "pending_review":
|
|
return "bg-amber-500";
|
|
case "approved":
|
|
return "bg-sky-500";
|
|
case "paid":
|
|
case "completed":
|
|
return "bg-emerald-600";
|
|
case "running":
|
|
return "bg-blue-500";
|
|
case "rejected":
|
|
case "failed":
|
|
return "bg-rose-500";
|
|
default:
|
|
return "bg-violet-500";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ul className="space-y-3">
|
|
{entries.map(([status, count]) => (
|
|
<li key={status}>
|
|
<div className="mb-1 flex items-center justify-between gap-2">
|
|
<AdminStatusBadge status={status}>{status}</AdminStatusBadge>
|
|
<span className="text-sm font-medium tabular-nums">{count}</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className={cn("h-full rounded-full transition-all", barTone(status))}
|
|
style={{ width: `${max > 0 ? (count / max) * 100 : 0}%` }}
|
|
/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|