277 lines
11 KiB
TypeScript
277 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
getAdminDraw,
|
|
postAdminCancelDraw,
|
|
postAdminManualCloseDraw,
|
|
postAdminReopenDraw,
|
|
postAdminRunDrawRng,
|
|
} from "@/api/admin-draws";
|
|
import { postAdminRunDrawSettlement } from "@/api/admin-settlement";
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
|
|
import { useConfirmAction } from "@/hooks/use-confirm-action";
|
|
import { LotteryApiBizError } from "@/types/api/errors";
|
|
import type { AdminDrawShowData } from "@/types/api/admin-draws";
|
|
import { adminHasAnyPermission } from "@/lib/admin-permissions";
|
|
import { useAdminProfile } from "@/stores/admin-session";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import {
|
|
drawResultSourceLabel,
|
|
drawStatusLabel,
|
|
hallPreviewDiffersFromDbStatus,
|
|
} from "./draw-display";
|
|
import { DrawStatusBadge } from "./draw-status-badge";
|
|
import {
|
|
PRD_DRAW_REOPEN_MANAGE,
|
|
PRD_DRAW_RESULT_MANAGE,
|
|
PRD_PAYOUT_MANAGE,
|
|
PRD_PAYOUT_REVIEW,
|
|
} from "./draw-prd";
|
|
|
|
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="grid gap-1 sm:grid-cols-[10rem_1fr] sm:items-start">
|
|
<Label className="text-muted-foreground">{label}</Label>
|
|
<div className="text-sm">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DrawDetailConsole({ drawId }: { drawId: string }) {
|
|
const { t } = useTranslation(["draws", "common"]);
|
|
const idNum = Number(drawId);
|
|
const profile = useAdminProfile();
|
|
const canManageDraw = adminHasAnyPermission(profile?.permissions, [PRD_DRAW_RESULT_MANAGE]);
|
|
const canReopenDraw = adminHasAnyPermission(profile?.permissions, [PRD_DRAW_REOPEN_MANAGE]);
|
|
const canRunSettlement = adminHasAnyPermission(profile?.permissions, [
|
|
PRD_PAYOUT_MANAGE,
|
|
PRD_PAYOUT_REVIEW,
|
|
]);
|
|
const formatDt = useAdminDateTimeFormatter();
|
|
const [data, setData] = useState<AdminDrawShowData | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [acting, setActing] = useState<string | null>(null);
|
|
const { request: requestConfirm, ConfirmDialog } = useConfirmAction();
|
|
|
|
const load = useCallback(async () => {
|
|
if (!Number.isFinite(idNum)) {
|
|
setError(t("invalidDrawId"));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
setData(await getAdminDraw(idNum));
|
|
} catch (e) {
|
|
setData(null);
|
|
setError(e instanceof LotteryApiBizError ? e.message : t("errors.loadFailed", { ns: "common" }));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [idNum, t]);
|
|
|
|
async function runAction(name: string, action: () => Promise<unknown>): Promise<void> {
|
|
if (!Number.isFinite(idNum)) return;
|
|
setActing(name);
|
|
try {
|
|
await action();
|
|
toast.success(t("actionSuccess", { name }));
|
|
await load();
|
|
} catch (e) {
|
|
toast.error(e instanceof LotteryApiBizError ? e.message : t("actionFailed", { name }));
|
|
} finally {
|
|
setActing(null);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const timer = window.setTimeout(() => {
|
|
void load();
|
|
}, 0);
|
|
return () => window.clearTimeout(timer);
|
|
}, [load]);
|
|
|
|
if (loading && !data) {
|
|
return <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>;
|
|
}
|
|
|
|
if (error || !data) {
|
|
return <p className="text-sm text-destructive">{error ?? t("states.noData", { ns: "common" })}</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card className="overflow-hidden">
|
|
<CardHeader className="border-b bg-muted/30 pb-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<CardTitle className="text-xl">{data.draw_no}</CardTitle>
|
|
<p className="mt-1 text-sm text-muted-foreground">{t("drawDetail")}</p>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1 text-right">
|
|
<DrawStatusBadge
|
|
status={data.status}
|
|
label={drawStatusLabel(data.status, t)}
|
|
/>
|
|
{hallPreviewDiffersFromDbStatus(data.status, data.hall_preview_status) ? (
|
|
<p className="flex flex-wrap items-center justify-end gap-2 text-sm text-muted-foreground">
|
|
<span>{t("hallPreviewStatusLabel")}</span>
|
|
<DrawStatusBadge
|
|
status={data.hall_preview_status}
|
|
label={drawStatusLabel(data.hall_preview_status, t)}
|
|
/>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<Field label={t("businessDate")}>{data.business_date}</Field>
|
|
<Field label={t("sequenceNo")}>{data.sequence_no}</Field>
|
|
<Field label={t("startTime")}>{formatDt(data.start_time)}</Field>
|
|
<Field label={t("closeTime")}>{formatDt(data.close_time)}</Field>
|
|
<Field label={t("plannedDraw")}>{formatDt(data.draw_time)}</Field>
|
|
<Field label={t("coolingEndTime")}>{formatDt(data.cooling_end_time)}</Field>
|
|
</div>
|
|
<Separator />
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<Field label={t("resultSource")}>{drawResultSourceLabel(data.result_source, t)}</Field>
|
|
<Field label={t("currentResultVersion")}>{data.current_result_version}</Field>
|
|
<Field label={t("settleVersion")}>{data.settle_version}</Field>
|
|
<Field label={t("isReopened")}>{data.is_reopened ? t("yes") : t("no")}</Field>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-xl border bg-muted/20 p-4">
|
|
<p className="text-sm font-medium text-muted-foreground">{t("batchStats")}</p>
|
|
<div className="mt-3 grid gap-3 text-sm">
|
|
<div className="flex items-center justify-between rounded-lg bg-background px-3 py-2">
|
|
<span>{t("batchTotal")}</span>
|
|
<span className="font-semibold">{data.result_batch_counts.total}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg bg-background px-3 py-2 text-amber-600 dark:text-amber-400">
|
|
<span>{t("pendingReview")}</span>
|
|
<span className="font-semibold">{data.result_batch_counts.pending_review}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg bg-background px-3 py-2 text-emerald-600 dark:text-emerald-400">
|
|
<span>{t("published")}</span>
|
|
<span className="font-semibold">{data.result_batch_counts.published}</span>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href={`/admin/draws/${drawId}/finance`}
|
|
className={cn(buttonVariants({ variant: "outline", size: "sm" }), "mt-4 w-full")}
|
|
>
|
|
{t("viewFinance")}
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{(canManageDraw || canReopenDraw || canRunSettlement) ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">{t("drawActions")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-wrap gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canManageDraw || acting !== null || !["pending", "open"].includes(data.status)}
|
|
onClick={() =>
|
|
requestConfirm({
|
|
title: t("confirm.manualCloseTitle"),
|
|
description: t("confirm.manualCloseDescription"),
|
|
onConfirm: () => runAction(t("manualClose"), () => postAdminManualCloseDraw(idNum)),
|
|
})
|
|
}
|
|
>
|
|
{acting === t("manualClose") ? t("processing") : t("manualClose")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canManageDraw || acting !== null || !["pending", "open", "closing", "closed"].includes(data.status)}
|
|
onClick={() =>
|
|
requestConfirm({
|
|
title: t("confirm.cancelDrawTitle"),
|
|
description: t("confirm.cancelDrawDescription"),
|
|
onConfirm: () => runAction(t("cancelDraw"), () => postAdminCancelDraw(idNum)),
|
|
})
|
|
}
|
|
>
|
|
{acting === t("cancelDraw") ? t("processing") : t("cancelBeforeDraw")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canManageDraw || acting !== null || data.status !== "closed"}
|
|
onClick={() =>
|
|
requestConfirm({
|
|
title: t("confirm.rngDrawTitle"),
|
|
description: t("confirm.rngDrawDescription"),
|
|
onConfirm: () => runAction(t("rngDraw"), () => postAdminRunDrawRng(idNum)),
|
|
})
|
|
}
|
|
>
|
|
{acting === t("rngDraw") ? t("generating") : t("rngAutoGenerate")}
|
|
</Button>
|
|
{canReopenDraw ? (
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
size="sm"
|
|
disabled={acting !== null || data.status !== "cooldown"}
|
|
onClick={() =>
|
|
requestConfirm({
|
|
title: t("confirm.reopenTitle"),
|
|
description: t("confirm.reopenDescription"),
|
|
confirmVariant: "destructive",
|
|
onConfirm: () => runAction(t("reopen"), () => postAdminReopenDraw(idNum)),
|
|
})
|
|
}
|
|
>
|
|
{acting === t("reopen") ? t("processing") : t("cooldownReopen")}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canRunSettlement || acting !== null || data.status !== "settling"}
|
|
onClick={() =>
|
|
requestConfirm({
|
|
title: t("confirm.runSettlementTitle"),
|
|
description: t("confirm.runSettlementDescription"),
|
|
onConfirm: () => runAction(t("runSettlement"), () => postAdminRunDrawSettlement(idNum)),
|
|
})
|
|
}
|
|
>
|
|
{acting === t("runSettlement") ? t("processing") : t("runSettlement")}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
<ConfirmDialog />
|
|
</div>
|
|
);
|
|
}
|