xiaokang/lotteryAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 更新管理端页面元数据，统一国际化支持，移除冗余代码

Browse Source
This commit is contained in:
kang
2026-05-21 17:27:52 +08:00
parent 26feed3c4f
commit e8a5507411
77 changed files with 1669 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

402
src/modules/dashboard/dashboard-visuals.tsx Normal file
View File

@@ -0,0 +1,402 @@
"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-chart-2", label: t("winPayout"), value: win },
{ key: "jackpot", width: jpW, className: "bg-chart-4", 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 items = [
{ label: t("winPayout"), value: win, pct: winPct, className: "bg-chart-2" },
{ label: t("jackpotPayout"), value: jackpot, pct: 100 - winPct, className: "bg-chart-4" },
];
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, var(--chart-2) 0deg ${winPct * 3.6}deg, var(--chart-4) ${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={cn("h-full rounded-full", item.className)} style={{ width: `${item.pct}%` }} />
</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 }[] = [
{ key: "d4", label: t("soldOutBuckets.d4"), color: "var(--chart-1)" },
{ key: "d3", label: t("soldOutBuckets.d3"), color: "var(--chart-2)" },
{ key: "d2", label: t("soldOutBuckets.d2"), color: "var(--chart-3)" },
{ key: "special", label: t("soldOutBuckets.special"), color: "var(--chart-4)" },
{ key: "other", label: t("soldOutBuckets.other"), color: "var(--chart-5)" },
];
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="size-2.5 rounded-sm" style={{ background: e.color }} />
{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]));
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="h-full rounded-full bg-primary/80"
style={{ width: `${max > 0 ? (count / max) * 100 : 0}%` }}
/>
</div>
</li>
))}
</ul>
);
}