);
}
diff --git a/src/modules/dashboard/dashboard-visuals.tsx b/src/modules/dashboard/dashboard-visuals.tsx
new file mode 100644
index 0000000..9c44295
--- /dev/null
+++ b/src/modules/dashboard/dashboard-visuals.tsx
@@ -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 (
+
+ );
+}
+
+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 (
+
+
+ {t("riskCapUsage")}
+ {pct.toFixed(1)}%
+
+
+
= 90 ? "bg-destructive" : pct >= 70 ? "bg-amber-500" : "bg-primary",
+ )}
+ style={{ width: `${pct}%` }}
+ />
+
+
+ {t("lockedAndCap", {
+ locked: formatMoney(locked, currency),
+ cap: formatMoney(cap, currency),
+ })}
+
+
+ );
+}
+
+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
{t("noFinanceActivity")}
;
+ }
+
+ 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 (
+
+
+ {segments.map((s) => (
+
+ ))}
+
+
+ {t("payoutRateOfBet", { rate: payoutRate })}
+
+
+ {segments.map((s) => (
+ -
+
+
+
{s.label}
+
{formatMoney(s.value, currency)}
+
+ ))}
+
+
+ );
+}
+
+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
{t("noPayoutYet")}
;
+ }
+
+ 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 (
+
+ );
+}
+
+export function HotUsageBars({ rows }: { rows: AdminRiskPoolRow[] }): ReactElement {
+ const { t } = useTranslation("dashboard");
+
+ if (rows.length === 0) {
+ return
{t("noPoolData")}
;
+ }
+
+ return (
+