feat(admin, i18n): enhance reports, draws, config, and player workflows

src/modules/config/doc/risk-cap-doc-screen.tsx

@@ -14,6 +14,7 @@ import {
   publishRiskCapVersion,
   putRiskCapItems,
 } from "@/api/admin-config";
+import { getAdminDraws } from "@/api/admin-draws";
 import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
 import { Button } from "@/components/ui/button";
 import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
@@ -32,7 +33,7 @@ import {
 } 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 { AdminLoadingState } from "@/components/admin/admin-loading-state";
 import { ConfigVersionSwitcher } from "@/modules/config/config-version-switcher";
 import { RiskCapRuntimePanel } from "@/modules/config/risk-cap-runtime-panel";
 import {
@@ -43,6 +44,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { ConfigReadonlyValue } from "@/modules/config/config-readonly-value";
 import { ConfigVersionActions } from "@/modules/config/config-version-actions";
 import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
@@ -51,10 +59,13 @@ import { useConfirmAction } from "@/hooks/use-confirm-action";
 import { useTranslationRef } from "@/hooks/use-translation-ref";
 import { adminHasAnyPermission } from "@/lib/admin-permissions";
 import { formatAdminMinorDecimal, parseAdminMajorToMinor } from "@/lib/money";
-import { PRD_RISK_CAP_MANAGE, PRD_RISK_CAP_VIEW } from "@/lib/admin-prd";
+import { PRD_RISK_CAP_MANAGE } from "@/lib/admin-prd";
 import { useAdminProfile } from "@/stores/admin-session";
 import { LotteryApiBizError } from "@/types/api/errors";
 import { pickDefaultConfigVersionId } from "@/lib/config-version-auto-pick";
+import type {
+  AdminDrawListItem,
+} from "@/types/api/admin-draws";
 import type {
   ConfigVersionSummary,
   RiskCapItemRow,
@@ -102,6 +113,7 @@ export function RiskCapDocScreen() {
   const [loadingDetail, setLoadingDetail] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [drawOptions, setDrawOptions] = useState<AdminDrawListItem[]>([]);
 
   const [defaultCapStr, setDefaultCapStr] = useState("");
   const [syncOpen, setSyncOpen] = useState(false);
@@ -124,10 +136,23 @@ export function RiskCapDocScreen() {
     } finally {
       setLoadingList(false);
     }
-  }, []);
+  }, [tRef]);
 
   useAsyncEffect(() => {
     void refreshList();
+  }, [tRef]);
+
+  const loadDrawOptions = useCallback(async () => {
+    try {
+      const data = await getAdminDraws({ page: 1, per_page: 100 });
+      setDrawOptions(data.items);
+    } catch {
+      setDrawOptions([]);
+    }
+  }, []);
+
+  useAsyncEffect(() => {
+    void loadDrawOptions();
   }, []);
 
   function syncDefaultCapFromRows(rows: DraftRiskRow[]) {
@@ -232,12 +257,20 @@ export function RiskCapDocScreen() {
           toast.error(t("riskCap.validation.defaultGreaterThanZero", { ns: "config" }));
           return;
         }
+        if (r.draw_id !== null) {
+          toast.error(t("riskCap.validation.defaultCannotBindDraw", { ns: "config" }));
+          return;
+        }
         continue;
       }
       if (!/^[0-9]{4}$/.test(r.normalized_number)) {
         toast.error(t("riskCap.validation.numberMustBe4Digits", { ns: "config", number: r.normalized_number }));
         return;
       }
+      if (r.cap_amount <= 0) {
+        toast.error(t("riskCap.validation.specialGreaterThanZero", { ns: "config", number: r.normalized_number }));
+        return;
+      }
     }
     setSaving(true);
     try {
@@ -340,6 +373,15 @@ export function RiskCapDocScreen() {
     () => draftRows.map((row, index) => ({ row, index })).filter(({ row }) => !isDefaultRiskRow(row)),
     [draftRows],
   );
+  const globalRows = useMemo(
+    () => specialRows.filter(({ row }) => row.draw_id == null),
+    [specialRows],
+  );
+  const drawRows = useMemo(
+    () => specialRows.filter(({ row }) => row.draw_id != null),
+    [specialRows],
+  );
+  const defaultCapDisplay = defaultCapStr || formatAdminMinorDecimal(0, amountCurrencyCode);
 
   async function handleDeleteVersion(row: ConfigVersionSummary) {
     try {
@@ -459,6 +501,35 @@ export function RiskCapDocScreen() {
     >
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
+      <div className="grid gap-3 md:grid-cols-3">
+        {[
+          {
+            key: "default",
+            label: t("riskCap.summary.defaultCap", { ns: "config" }),
+            value: defaultCapDisplay,
+            hint: t("riskCap.summary.defaultHint", { ns: "config" }),
+          },
+          {
+            key: "global",
+            label: t("riskCap.summary.globalCaps", { ns: "config" }),
+            value: t("riskCap.groups.count", { ns: "config", count: globalRows.length }),
+            hint: t("riskCap.summary.globalHint", { ns: "config" }),
+          },
+          {
+            key: "draw",
+            label: t("riskCap.summary.drawCaps", { ns: "config" }),
+            value: t("riskCap.groups.count", { ns: "config", count: drawRows.length }),
+            hint: t("riskCap.summary.drawHint", { ns: "config" }),
+          },
+        ].map((card) => (
+          <div key={card.key} className="rounded-xl border border-border/60 bg-background p-4 shadow-sm">
+            <p className="text-xs text-muted-foreground">{card.label}</p>
+            <p className="mt-1 font-mono text-lg font-semibold tabular-nums">{card.value}</p>
+            <p className="mt-2 text-xs leading-5 text-muted-foreground">{card.hint}</p>
+          </div>
+        ))}
+      </div>
+
       <ConfigSection title={t("riskCap.defaultCap.title", { ns: "config" })}>
           <div className="flex flex-wrap items-end gap-2">
             <div className="grid gap-1">
@@ -466,8 +537,8 @@ export function RiskCapDocScreen() {
               {canEditDraft ? (
                 <Input
                   id="default-cap"
-                  type="number"
-                  min={0}
+                  type="text"
+                  inputMode="decimal"
                   className="w-[220px] font-mono tabular-nums"
                   disabled={saving}
                   value={defaultCapStr}
@@ -490,6 +561,7 @@ export function RiskCapDocScreen() {
 
       <ConfigSection
         title={t("riskCap.specialCaps.title", { ns: "config" })}
+        description={t("riskCap.specialCaps.description", { ns: "config" })}
         actions={
           canEditDraft ? (
             <Button
@@ -508,79 +580,150 @@ export function RiskCapDocScreen() {
           ) : specialRows.length === 0 ? (
             <p className="text-sm text-muted-foreground">{t("riskCap.noDetailRows", { ns: "config" })}</p>
           ) : (
-            <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[110px]">{t("riskCap.table.number", { ns: "config" })}</TableHead>
-                    <TableHead className="w-[140px]">{t("riskCap.table.capAmount", { ns: "config" })}</TableHead>
-                    <TableHead className="sticky right-0 z-20 bg-muted w-14 text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">{t("riskCap.table.actions", { ns: "config" })}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {specialRows.map(({ row: r, index: idx }) => (
-                    <TableRow key={r.clientKey}>
-                      <TableCell>
-                        {canEditDraft ? (
-                          <Input
-                            className="h-8 font-mono tabular-nums"
-                            maxLength={4}
-                            disabled={saving}
-                            value={r.normalized_number}
-                            placeholder={t("riskCap.placeholders.number", { ns: "config" })}
-                            onChange={(e) =>
-                              updateRow(idx, {
-                                normalized_number: e.target.value.replace(/\D/g, "").slice(0, 4),
-                              })
-                            }
-                          />
-                        ) : (
-                          <ConfigReadonlyValue mono>{r.normalized_number}</ConfigReadonlyValue>
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {canEditDraft ? (
-                          <Input
-                            type="text"
-                            inputMode="decimal"
-                            className="h-8 font-mono tabular-nums"
-                            disabled={saving}
-                            value={formatAdminMinorDecimal(r.cap_amount, amountCurrencyCode)}
-                            placeholder={t("riskCap.placeholders.capAmount", { ns: "config" })}
-                            onChange={(e) =>
-                              updateRow(idx, {
-                                cap_amount:
-                                  parseAdminMajorToMinor(e.target.value, amountCurrencyCode) ?? 0,
-                              })
-                            }
-                          />
-                        ) : (
-                          <ConfigReadonlyValue mono>
-                            {formatAdminMinorDecimal(r.cap_amount, amountCurrencyCode)}
-                          </ConfigReadonlyValue>
-                        )}
-                      </TableCell>
-                      <TableCell className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
-                        {canEditDraft ? (
-                          <AdminRowActionsMenu
-                            busy={saving}
-                            actions={[
-                              {
-                                key: "delete",
-                                label: t("actions.delete", { ns: "adminUsers" }),
-                                icon: Trash2,
-                                destructive: true,
-                                onClick: () => removeRow(idx),
-                              },
-                            ]}
-                          />
-                        ) : (
-                          <span className="text-sm text-muted-foreground">{t("riskCap.readOnly", { ns: "config" })}</span>
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-              </TableBody>
-            </Table>
+            <div className="space-y-4">
+              {[
+                {
+                  key: "global",
+                  title: t("riskCap.groups.globalTitle", { ns: "config" }),
+                  description: t("riskCap.groups.globalDescription", { ns: "config" }),
+                  rows: globalRows,
+                  emptyText: t("riskCap.groups.globalEmpty", { ns: "config" }),
+                },
+                {
+                  key: "draw",
+                  title: t("riskCap.groups.drawTitle", { ns: "config" }),
+                  description: t("riskCap.groups.drawDescription", { ns: "config" }),
+                  rows: drawRows,
+                  emptyText: t("riskCap.groups.drawEmpty", { ns: "config" }),
+                },
+              ].map((group) => (
+                <div key={group.key} className="rounded-xl border border-border/60 bg-muted/10 p-3">
+                  <div className="mb-3 flex flex-wrap items-start justify-between gap-2">
+                    <div className="space-y-1">
+                      <h3 className="text-sm font-semibold text-foreground">{group.title}</h3>
+                      <p className="text-xs leading-5 text-muted-foreground">{group.description}</p>
+                    </div>
+                    <span className="rounded-full bg-background px-2 py-1 text-xs text-muted-foreground">
+                      {t("riskCap.groups.count", { ns: "config", count: group.rows.length })}
+                    </span>
+                  </div>
+
+                  {group.rows.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">{group.emptyText}</p>
+                  ) : (
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-[180px]">{t("riskCap.table.scope", { ns: "config" })}</TableHead>
+                          <TableHead className="w-[110px]">{t("riskCap.table.number", { ns: "config" })}</TableHead>
+                          <TableHead className="w-[140px]">{t("riskCap.table.capAmount", { ns: "config" })}</TableHead>
+                          <TableHead className="sticky right-0 z-20 w-14 bg-muted text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
+                            {t("riskCap.table.actions", { ns: "config" })}
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {group.rows.map(({ row: r, index: idx }) => (
+                          <TableRow key={r.clientKey}>
+                            <TableCell>
+                              {canEditDraft ? (
+                                <Select
+                                  value={r.draw_id == null ? "__global__" : String(r.draw_id)}
+                                  onValueChange={(value) =>
+                                    updateRow(idx, { draw_id: value === "__global__" ? null : Number(value) })
+                                  }
+                                >
+                                  <SelectTrigger className="h-8 min-w-0">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="__global__">
+                                      {t("riskCap.scope.global", { ns: "config" })}
+                                    </SelectItem>
+                                    {drawOptions.map((draw) => (
+                                      <SelectItem key={draw.id} value={String(draw.id)}>
+                                        {draw.draw_no}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <ConfigReadonlyValue>
+                                  {r.draw_id == null
+                                    ? t("riskCap.scope.global", { ns: "config" })
+                                    : drawOptions.find((draw) => draw.id === r.draw_id)?.draw_no ??
+                                      t("riskCap.scope.drawId", { ns: "config", id: r.draw_id })}
+                                </ConfigReadonlyValue>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {canEditDraft ? (
+                                <Input
+                                  className="h-8 font-mono tabular-nums"
+                                  maxLength={4}
+                                  disabled={saving}
+                                  value={r.normalized_number}
+                                  placeholder={t("riskCap.placeholders.number", { ns: "config" })}
+                                  onChange={(e) =>
+                                    updateRow(idx, {
+                                      normalized_number: e.target.value.replace(/\D/g, "").slice(0, 4),
+                                    })
+                                  }
+                                />
+                              ) : (
+                                <ConfigReadonlyValue mono>{r.normalized_number}</ConfigReadonlyValue>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {canEditDraft ? (
+                                <Input
+                                  type="text"
+                                  inputMode="decimal"
+                                  className="h-8 font-mono tabular-nums"
+                                  disabled={saving}
+                                  value={formatAdminMinorDecimal(r.cap_amount, amountCurrencyCode)}
+                                  placeholder={t("riskCap.placeholders.capAmount", { ns: "config" })}
+                                  onChange={(e) =>
+                                    updateRow(idx, {
+                                      cap_amount:
+                                        parseAdminMajorToMinor(e.target.value, amountCurrencyCode) ?? 0,
+                                    })
+                                  }
+                                />
+                              ) : (
+                                <ConfigReadonlyValue mono>
+                                  {formatAdminMinorDecimal(r.cap_amount, amountCurrencyCode)}
+                                </ConfigReadonlyValue>
+                              )}
+                            </TableCell>
+                            <TableCell className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
+                              {canEditDraft ? (
+                                <AdminRowActionsMenu
+                                  busy={saving}
+                                  actions={[
+                                    {
+                                      key: "delete",
+                                      label: t("actions.delete", { ns: "adminUsers" }),
+                                      icon: Trash2,
+                                      destructive: true,
+                                      onClick: () => removeRow(idx),
+                                    },
+                                  ]}
+                                />
+                              ) : (
+                                <span className="text-sm text-muted-foreground">
+                                  {t("riskCap.readOnly", { ns: "config" })}
+                                </span>
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              ))}
+            </div>
           )}
       </ConfigSection>