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

feat(api, i18n): add agent_node_id to various admin queries and enhance multi-language support

Browse Source 
Introduced the agent_node_id field in AdminDrawListQuery, AdminPlayerListQuery, AdminSettlementBatchListQuery, TicketItemsListQuery, and TransferOrderListQuery to improve filtering capabilities. Updated the admin-breadcrumb and admin-sidebar components to include new translations for agent-related terms in English, Nepali, and Chinese, enhancing the overall user experience and multi-language support across the admin interface.
This commit is contained in:
kang
2026-06-02 14:37:08 +08:00
parent a4e7a2d228
commit b15e377187
105 changed files with 5305 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
src/modules/reconcile/reconcile-console.tsx
View File

@@ -1,8 +1,10 @@
"use client";
import { Eye } from "lucide-react";
import { CalendarRange, Eye, ShieldAlert, UserRound } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAsyncEffect } from "@/hooks/use-async-effect";
import { useTranslationRef } from "@/hooks/use-translation-ref";
import { toast } from "sonner";
import {
@@ -20,6 +22,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { AdminLoadingState, AdminLoadingInline, AdminTableLoadingRow } from "@/components/admin/admin-loading-state";
import {
Table,
TableBody,
@@ -36,6 +39,7 @@ import { useAdminProfile } from "@/stores/admin-session";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminPlayerRow } from "@/types/api/admin-player";
import type {
AdminReconcileJobRow,
AdminReconcileItemsData,
AdminReconcileJobListData,
} from "@/types/api/admin-reconcile";
@@ -80,8 +84,23 @@ function reconcileTypeLabel(type: string, t: (key: string) => string): string {
}
}
function getJobSummaryValue(summary: Record<string, unknown> | null | undefined, key: string): number {
const raw = summary?.[key];
return typeof raw === "number" && Number.isFinite(raw) ? raw : 0;
}
function renderPeriodRange(
row: Pick<AdminReconcileJobRow, "period_start" | "period_end">,
formatTs: (value: string | null | undefined) => string,
): string {
const from = row.period_start ? formatTs(row.period_start) : "—";
const to = row.period_end ? formatTs(row.period_end) : "—";
return `${from} ~ ${to}`;
}
export function ReconcileConsole(): React.ReactElement {
const { t } = useTranslation(["reconcile", "common"]);
const tRef = useTranslationRef(["reconcile", "common"]);
const { request: requestConfirm, ConfirmDialog } = useConfirmAction();
const profile = useAdminProfile();
const canCreate = adminHasAnyPermission(profile?.permissions, [...MANAGE]);
@@ -115,18 +134,16 @@ export function ReconcileConsole(): React.ReactElement {
const d = await getAdminReconcileJobs({ page, per_page: perPage });
setJobs(d);
} catch (e) {
setJobsErr(e instanceof LotteryApiBizError ? e.message : t("loadFailed"));
setJobsErr(e instanceof LotteryApiBizError ? e.message : tRef.current("loadFailed"));
setJobs(null);
} finally {
setJobsLoading(false);
}
}, [page, perPage, t]);
}, [page, perPage]);
useEffect(() => {
queueMicrotask(() => {
void loadJobs();
});
}, [loadJobs]);
useAsyncEffect(() => {
void loadJobs();
}, [page, perPage]);
const loadItems = useCallback(async () => {
if (selectedId == null) {
@@ -141,18 +158,16 @@ export function ReconcileConsole(): React.ReactElement {
});
setItems(d);
} catch (e) {
toast.error(e instanceof LotteryApiBizError ? e.message : t("loadItemsFailed"));
toast.error(e instanceof LotteryApiBizError ? e.message : tRef.current("loadItemsFailed"));
setItems(null);
} finally {
setItemsLoading(false);
}
}, [selectedId, itemsPage, itemsPerPage, t]);
}, [selectedId, itemsPage, itemsPerPage]);
useEffect(() => {
queueMicrotask(() => {
void loadItems();
});
}, [loadItems]);
useAsyncEffect(() => {
void loadItems();
}, [selectedId, itemsPage, itemsPerPage]);
const loadPlayers = useCallback(async (keyword: string) => {
const q = keyword.trim();
@@ -218,6 +233,9 @@ export function ReconcileConsole(): React.ReactElement {
const jm = jobs?.meta;
const im = items?.meta;
const selectedJob = jobs?.items.find((job) => job.id === selectedId) ?? null;
const selectedJobItemCount = getJobSummaryValue(selectedJob?.summary_json, "item_count");
const selectedJobMismatchCount = getJobSummaryValue(selectedJob?.summary_json, "mismatch_count");
const selectedJobMatchedCount = Math.max(0, selectedJobItemCount - selectedJobMismatchCount);
return (
<div className="flex w-full max-w-none flex-col gap-6">
@@ -225,28 +243,157 @@ export function ReconcileConsole(): React.ReactElement {
<Card className="admin-list-card">
<CardHeader className="admin-list-header">
<CardTitle className="admin-list-title">{t("createTitle")}</CardTitle>
<CardDescription>{t("createDesc")}</CardDescription>
</CardHeader>
<CardContent className="admin-list-content pt-4">
<div className="grid gap-4 lg:grid-cols-[minmax(220px,0.9fr)_minmax(220px,0.95fr)_auto] lg:items-end">
<div className="grid gap-1.5">
<Label htmlFor="rc-type">{t("reconcileType")}</Label>
<Input id="rc-type" value={t("reconcileTypeFixed")} readOnly className="bg-muted/30" />
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
<div className="rounded-xl border bg-muted/15 p-4">
<div className="mb-4 flex items-start gap-3">
<div className="rounded-lg bg-background p-2 text-muted-foreground">
<CalendarRange className="size-4" />
</div>
<div className="min-w-0">
<div className="text-sm font-medium">{t("scopeTitle")}</div>
<p className="text-sm text-muted-foreground">{t("scopeDescription")}</p>
</div>
</div>
<div className="grid gap-4">
<div className="grid gap-1.5">
<Label htmlFor="rc-type">{t("reconcileType")}</Label>
<Input id="rc-type" value={t("reconcileTypeFixed")} readOnly className="bg-muted/30" />
<p className="text-xs text-muted-foreground">{t("reconcileTypeHint")}</p>
</div>
<div className="grid gap-1.5">
<AdminDateRangeField
id="rc-date-range"
label={t("dateRange")}
from={dateFrom}
to={dateTo}
onRangeChange={({ from, to }) => {
setDateFrom(from);
setDateTo(to);
}}
/>
<p className="text-xs text-muted-foreground">{t("dateRangeHint")}</p>
</div>
</div>
</div>
<div className="grid gap-1.5">
<AdminDateRangeField
id="rc-date-range"
label={t("dateRange")}
from={dateFrom}
to={dateTo}
onRangeChange={({ from, to }) => {
setDateFrom(from);
setDateTo(to);
}}
/>
<div className="rounded-xl border bg-background p-4">
<div className="mb-4 flex items-start gap-3">
<div className="rounded-lg bg-muted/20 p-2 text-muted-foreground">
<UserRound className="size-4" />
</div>
<div className="min-w-0">
<div className="text-sm font-medium">{t("playerScopeTitle")}</div>
<p className="text-sm text-muted-foreground">{t("playerSearchHint")}</p>
</div>
</div>
<div className="grid gap-1.5">
<Label htmlFor="rc-player-search">{t("playerSearch")}</Label>
<Input
id="rc-player-search"
value={playerSearch}
onChange={(e) => setPlayerSearch(e.target.value)}
placeholder={t("playerSearchPlaceholder")}
/>
</div>
{selectedPlayer ? (
<div className="mt-4 flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-3 py-2 text-sm">
<div className="min-w-0">
<div className="truncate font-medium text-foreground">
{selectedPlayer.site_player_id}
{selectedPlayer.nickname ? ` · ${selectedPlayer.nickname}` : ""}
{selectedPlayer.username ? ` · ${selectedPlayer.username}` : ""}
</div>
<div className="truncate text-xs text-muted-foreground">
{t("playerSelected")} · {selectedPlayer.site_code}
</div>
</div>
<Button
type="button"
size="sm"
variant="outline"
onClick={() => {
setSelectedPlayer(null);
setPlayerSearch("");
setPlayerResults([]);
}}
>
{t("playerClear")}
</Button>
</div>
) : null}
{playerSearch.trim() !== "" || playerResults.length > 0 || playerLoading ? (
<div className="mt-4 rounded-lg border bg-background">
<div className="max-h-56 overflow-y-auto">
{playerLoading ? (
<AdminLoadingInline className="py-2" label={t("loadingPlayers")} />
) : playerResults.length === 0 ? (
<div className="px-3 py-2 text-sm text-muted-foreground">{t("playerNoResults")}</div>
) : (
<div className="divide-y">
{playerResults.map((player) => {
const active = selectedPlayer?.id === player.id;
return (
<button
key={player.id}
type="button"
className={cn(
"flex w-full items-start justify-between gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/25",
active && "bg-muted/30",
)}
onClick={() => {
setSelectedPlayer(player);
setPlayerSearch(player.site_player_id);
}}
>
<div className="min-w-0">
<div className="truncate font-medium text-foreground">
{player.site_player_id}
{player.nickname ? ` · ${player.nickname}` : ""}
</div>
<div className="truncate text-xs text-muted-foreground">
{player.username ?? "—"} · {player.site_code}
</div>
</div>
<span className="shrink-0 text-xs text-muted-foreground">
{active ? t("playerSelectedShort") : t("playerChoose")}
</span>
</button>
);
})}
</div>
)}
</div>
</div>
) : (
<div className="mt-4 rounded-lg border border-dashed bg-muted/10 px-3 py-3 text-sm text-muted-foreground">
{t("playerAllPlayersHint")}
</div>
)}
</div>
</div>
<div className="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border bg-muted/10 px-4 py-3">
<div className="min-w-0 text-sm text-muted-foreground">
{selectedPlayer
? t("createSummaryPlayer", {
player: selectedPlayer.site_player_id,
from: dateFrom || "—",
to: dateTo || "—",
})
: t("createSummaryAll", {
from: dateFrom || "—",
to: dateTo || "—",
})}
</div>
<Button
type="button"
className="w-full lg:w-auto"
className="w-full sm:w-auto"
disabled={submitting}
onClick={() =>
requestConfirm({
@@ -263,82 +410,6 @@ export function ReconcileConsole(): React.ReactElement {
{submitting ? t("submitting") : t("createTask")}
</Button>
</div>
<div className="grid gap-1.5 pt-4">
<Label htmlFor="rc-player-search">{t("playerSearch")}</Label>
<Input
id="rc-player-search"
value={playerSearch}
onChange={(e) => setPlayerSearch(e.target.value)}
placeholder={t("playerSearchPlaceholder")}
/>
{selectedPlayer ? (
<div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-3 py-2 text-sm">
<div className="min-w-0">
<div className="truncate font-medium text-foreground">
{selectedPlayer.site_player_id}
{selectedPlayer.nickname ? ` · ${selectedPlayer.nickname}` : ""}
{selectedPlayer.username ? ` · ${selectedPlayer.username}` : ""}
</div>
</div>
<Button
type="button"
size="sm"
variant="outline"
onClick={() => {
setSelectedPlayer(null);
setPlayerSearch("");
setPlayerResults([]);
}}
>
{t("playerClear")}
</Button>
</div>
) : null}
{playerSearch.trim() !== "" || playerResults.length > 0 || playerLoading ? (
<div className="rounded-lg border bg-background">
<div className="max-h-56 overflow-y-auto">
{playerLoading ? (
<div className="px-3 py-2 text-sm text-muted-foreground">{t("loadingPlayers")}</div>
) : playerResults.length === 0 ? (
<div className="px-3 py-2 text-sm text-muted-foreground">{t("playerNoResults")}</div>
) : (
<div className="divide-y">
{playerResults.map((player) => {
const active = selectedPlayer?.id === player.id;
return (
<button
key={player.id}
type="button"
className={cn(
"flex w-full items-start justify-between gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/25",
active && "bg-muted/30",
)}
onClick={() => {
setSelectedPlayer(player);
setPlayerSearch(player.site_player_id);
}}
>
<div className="min-w-0">
<div className="truncate font-medium text-foreground">
{player.site_player_id}
{player.nickname ? ` · ${player.nickname}` : ""}
</div>
<div className="truncate text-xs text-muted-foreground">
{player.username ?? "—"} · {player.site_code}
</div>
</div>
<span className="shrink-0 text-xs text-muted-foreground">
{active ? t("playerSelectedShort") : t("playerChoose")}
</span>
</button>
);
})}
</div>
)}
</div>
</div>
) : null}
</div>
</CardContent>
</Card>
) : (
@@ -349,6 +420,7 @@ export function ReconcileConsole(): React.ReactElement {
<CardHeader className="admin-list-header flex flex-row flex-wrap items-end justify-between gap-4">
<div>
<CardTitle className="admin-list-title">{t("jobsTitle")}</CardTitle>
<CardDescription>{t("jobsDesc")}</CardDescription>
</div>
<Button type="button" variant="secondary" size="sm" onClick={() => void loadJobs()}>
{t("refresh")}
@@ -356,9 +428,6 @@ export function ReconcileConsole(): React.ReactElement {
</CardHeader>
<CardContent className="admin-list-content pt-4">
{jobsErr ? <p className="text-sm text-red-600 dark:text-red-400">{jobsErr}</p> : null}
{jobsLoading && !jobs ? (
<p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p>
) : null}
{jobs ? (
<>
<div className="admin-table-shell">
@@ -373,7 +442,10 @@ export function ReconcileConsole(): React.ReactElement {
</TableHead>
<TableHead>{t("type")}</TableHead>
<TableHead>{t("status")}</TableHead>
<TableHead className="text-center">{t("itemCount")}</TableHead>
<TableHead className="text-center">{t("mismatchCount")}</TableHead>
<TableHead>{t("period")}</TableHead>
<TableHead>{t("finishedAt")}</TableHead>
<TableHead>{t("createdAt")}</TableHead>
<TableHead className="sticky right-0 z-20 w-14 bg-muted/20 text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
{t("operate")}
@@ -381,9 +453,11 @@ export function ReconcileConsole(): React.ReactElement {
</TableRow>
</TableHeader>
<TableBody>
{jobs.items.length === 0 ? (
{jobsLoading && !jobs ? (
<AdminTableLoadingRow colSpan={10} />
) : jobs.items.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-muted-foreground">
<TableCell colSpan={10} className="text-muted-foreground">
{t("states.noData", { ns: "common" })}
</TableCell>
</TableRow>
@@ -402,12 +476,28 @@ export function ReconcileConsole(): React.ReactElement {
{jobStatusLabel(row.status, t)}
</AdminStatusBadge>
</TableCell>
<TableCell className="text-center tabular-nums">
{getJobSummaryValue(row.summary_json, "item_count")}
</TableCell>
<TableCell className="text-center tabular-nums">
<span
className={cn(
getJobSummaryValue(row.summary_json, "mismatch_count") > 0
? "font-medium text-amber-700"
: "text-muted-foreground",
)}
>
{getJobSummaryValue(row.summary_json, "mismatch_count")}
</span>
</TableCell>
<TableCell className="max-w-[16rem] text-xs text-muted-foreground">
<span className="line-clamp-2">
{row.period_start ? formatTs(row.period_start) : "—"} ~{" "}
{row.period_end ? formatTs(row.period_end) : "—"}
{renderPeriodRange(row, formatTs)}
</span>
</TableCell>
<TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
{formatTs(row.finished_at)}
</TableCell>
<TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
{formatTs(row.created_at)}
</TableCell>
@@ -475,10 +565,27 @@ export function ReconcileConsole(): React.ReactElement {
</DialogHeader>
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-muted/15 px-5 py-4">
{itemsLoading && !items ? (
<p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
<AdminLoadingState minHeight="6rem" className="py-6" />
) : null}
{items ? (
<>
<div className="mb-4 grid gap-3 md:grid-cols-3">
<div className="rounded-lg border bg-background px-4 py-3">
<div className="text-xs text-muted-foreground">{t("itemCount")}</div>
<div className="mt-1 text-xl font-semibold tabular-nums">{selectedJobItemCount}</div>
</div>
<div className="rounded-lg border bg-background px-4 py-3">
<div className="text-xs text-muted-foreground">{t("mismatchCount")}</div>
<div className="mt-1 flex items-center gap-2 text-xl font-semibold tabular-nums text-amber-700">
<ShieldAlert className="size-4" />
{selectedJobMismatchCount}
</div>
</div>
<div className="rounded-lg border bg-background px-4 py-3">
<div className="text-xs text-muted-foreground">{t("matchedCount")}</div>
<div className="mt-1 text-xl font-semibold tabular-nums">{selectedJobMatchedCount}</div>
</div>
</div>
<div className="mb-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<span>{t("jobNo")} {items.job_no}</span>
<span>·</span>
@@ -493,7 +600,7 @@ export function ReconcileConsole(): React.ReactElement {
)}
</span>
<span>·</span>
<span>{t("period")} {selectedJob ? `${selectedJob.period_start ? formatTs(selectedJob.period_start) : "—"} ~ ${selectedJob.period_end ? formatTs(selectedJob.period_end) : "—"}` : "—"}</span>
<span>{t("period")} {selectedJob ? renderPeriodRange(selectedJob, formatTs) : "—"}</span>
</div>
<div className="rounded-lg border bg-background">
<Table id={`reconcile-items-table-${selectedId ?? "none"}`}>
@@ -502,29 +609,47 @@ export function ReconcileConsole(): React.ReactElement {
<TableHead className="w-20">{t("table.id", { ns: "common" })}</TableHead>
<TableHead>{t("sideARef")}</TableHead>
<TableHead>{t("sideBRef")}</TableHead>
<TableHead>{t("differenceAmount")}</TableHead>
<TableHead className="text-right">{t("differenceAmount")}</TableHead>
<TableHead>{t("status")}</TableHead>
<TableHead>{t("detectedAt")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{items.items.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="text-muted-foreground">
<TableCell colSpan={6} className="text-muted-foreground">
{t("noDetails")}
</TableCell>
</TableRow>
) : (
items.items.map((r) => (
<TableRow key={r.id}>
<TableRow
key={r.id}
className={cn(
r.status === "mismatch" && "bg-amber-500/5",
r.status === "matched" && "bg-emerald-500/5",
)}
>
<TableCell>{r.id}</TableCell>
<TableCell className="font-mono text-xs">{r.side_a_ref ?? "—"}</TableCell>
<TableCell className="font-mono text-xs">{r.side_b_ref ?? "—"}</TableCell>
<TableCell className="tabular-nums">{r.difference_amount}</TableCell>
<TableCell className="text-right tabular-nums">
<span
className={cn(
r.difference_amount !== 0 ? "font-medium text-amber-700" : "text-muted-foreground",
)}
>
{r.difference_amount}
</span>
</TableCell>
<TableCell>
<AdminStatusBadge status={r.status}>
{itemStatusLabel(r.status, t)}
</AdminStatusBadge>
</TableCell>
<TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
{formatTs(r.created_at)}
</TableCell>
</TableRow>
))
)}