feat(ui): enhance table and admin components with improved layout and status display

- Updated global CSS to center-align table headers and cells, ensuring a consistent layout.
- Modified admin table components to replace switches with status badges for better clarity.
- Enhanced internationalization support by adding new strings for version actions and validation messages in multiple locales.
- Refactored configuration document screens to include version selection and improved user feedback on status changes.
This commit is contained in:
2026-05-26 11:13:16 +08:00
parent 05fa0cbeec
commit 4080f0b601
38 changed files with 788 additions and 608 deletions

View File

@@ -191,10 +191,10 @@ export function DrawFinanceConsole({ drawId }: { drawId: string }): React.ReactE
<TableRow>
<TableHead className="w-20">{t("table.id", { ns: "common" })}</TableHead>
<TableHead>{t("status")}</TableHead>
<TableHead className="text-right">{t("ticketCount")}</TableHead>
<TableHead className="text-right">{t("winCount")}</TableHead>
<TableHead className="text-right">{t("payoutTotal")}</TableHead>
<TableHead className="text-right">{t("jackpotPayout")}</TableHead>
<TableHead className="text-center">{t("ticketCount")}</TableHead>
<TableHead className="text-center">{t("winCount")}</TableHead>
<TableHead className="text-center">{t("payoutTotal")}</TableHead>
<TableHead className="text-center">{t("jackpotPayout")}</TableHead>
<TableHead>{t("finishedAt")}</TableHead>
</TableRow>
</TableHeader>
@@ -207,16 +207,16 @@ export function DrawFinanceConsole({ drawId }: { drawId: string }): React.ReactE
{settlementBatchStatusLabel(b.status, t)}
</AdminStatusBadge>
</TableCell>
<TableCell className="text-right tabular-nums text-xs">
<TableCell className="text-center tabular-nums text-xs">
{b.total_ticket_count}
</TableCell>
<TableCell className="text-right tabular-nums text-xs">
<TableCell className="text-center tabular-nums text-xs">
{b.total_win_count}
</TableCell>
<TableCell className="text-right tabular-nums text-xs">
<TableCell className="text-center tabular-nums text-xs">
{formatMoney(b.total_payout_amount)}
</TableCell>
<TableCell className="text-right tabular-nums text-xs">
<TableCell className="text-center tabular-nums text-xs">
{formatMoney(b.total_jackpot_payout_amount)}
</TableCell>
<TableCell className="font-mono text-[11px] text-muted-foreground">

View File

@@ -204,7 +204,7 @@ export function DrawReviewConsole({ drawId }: { drawId: string }) {
<TableHead>{t("batchId")}</TableHead>
<TableHead>{t("version", { version: "" }).replace(" v", "").trim()}</TableHead>
<TableHead>{t("numberCount")}</TableHead>
<TableHead className="text-right">{t("actions")}</TableHead>
<TableHead className="text-center">{t("actions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -213,7 +213,7 @@ export function DrawReviewConsole({ drawId }: { drawId: string }) {
<TableCell className="font-mono text-xs">{b.id}</TableCell>
<TableCell>v{b.result_version}</TableCell>
<TableCell>{b.items.length}</TableCell>
<TableCell className="text-right">
<TableCell className="text-center">
{canManageDraw ? (
<Link
href={`/admin/draws/${drawId}/publish/${b.id}`}

View File

@@ -395,10 +395,10 @@ export function DrawsIndexConsole() {
<TableHead>{t("closeTime")}</TableHead>
<TableHead>{t("drawTime")}</TableHead>
<TableHead>{t("status")}</TableHead>
<TableHead className="text-right">{t("betTotal")}</TableHead>
<TableHead className="text-right">{t("payoutTotal")}</TableHead>
<TableHead className="text-right">{t("profitLoss")}</TableHead>
<TableHead className="text-right">{t("actions")}</TableHead>
<TableHead className="text-center">{t("betTotal")}</TableHead>
<TableHead className="text-center">{t("payoutTotal")}</TableHead>
<TableHead className="text-center">{t("profitLoss")}</TableHead>
<TableHead className="text-center">{t("actions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -435,19 +435,19 @@ export function DrawsIndexConsole() {
label={drawStatusLabel(row.status, t)}
/>
</TableCell>
<TableCell className="text-right text-xs tabular-nums">
<TableCell className="text-center text-xs tabular-nums">
{row.total_bet_minor != null
? formatAdminMinorUnits(row.total_bet_minor, defaultCurrency)
: "—"}
</TableCell>
<TableCell className="text-right text-xs tabular-nums">
<TableCell className="text-center text-xs tabular-nums">
{row.total_payout_minor != null
? formatAdminMinorUnits(row.total_payout_minor, defaultCurrency)
: "—"}
</TableCell>
<TableCell
className={cn(
"text-right text-xs tabular-nums",
"text-center text-xs tabular-nums",
(row.profit_loss_minor ?? 0) < 0 ? "text-destructive" : "text-emerald-600",
)}
>
@@ -455,8 +455,8 @@ export function DrawsIndexConsole() {
? formatAdminMinorUnits(row.profit_loss_minor, defaultCurrency)
: "—"}
</TableCell>
<TableCell className="text-right">
<div className="flex flex-wrap items-center justify-end gap-1.5">
<TableCell className="text-center">
<div className="flex flex-wrap items-center justify-center gap-1.5">
<Link
href={`/admin/draws/${row.id}`}
className={cn(buttonVariants({ variant: "outline", size: "sm" }))}