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

src/modules/config/doc/play-config-doc-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -32,6 +32,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -157,6 +164,9 @@ export function PlayConfigDocScreen() {
   const [rollbackOpen, setRollbackOpen] = useState(false);
   const [rollbackTarget, setRollbackTarget] = useState<ConfigVersionSummary | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"all" | "enabled" | "disabled">("all");
+  const [categoryFilter, setCategoryFilter] = useState("all");
   const detailRequestSeq = useRef(0);
 
   const refreshList = useCallback(async () => {
@@ -268,6 +278,61 @@ export function PlayConfigDocScreen() {
     [draftRows],
   );
 
+  const categoryOptions = useMemo(() => {
+    const seen = new Set<string>();
+    return orderedRows
+      .map((row) => row.category?.trim() || "")
+      .filter((value) => {
+        if (!value || seen.has(value)) {
+          return false;
+        }
+        seen.add(value);
+        return true;
+      });
+  }, [orderedRows]);
+
+  const filteredRows = useMemo(() => {
+    const normalizedKeyword = keyword.trim().toLowerCase();
+
+    return orderedRows.filter((row) => {
+      const normalizedCategory = row.category?.trim() || "uncategorized";
+      const matchesKeyword =
+        normalizedKeyword === "" ||
+        row.play_code.toLowerCase().includes(normalizedKeyword) ||
+        (row.display_name ?? "").toLowerCase().includes(normalizedKeyword) ||
+        (row.category ?? "").toLowerCase().includes(normalizedKeyword);
+      const matchesStatus =
+        statusFilter === "all" ||
+        (statusFilter === "enabled" && row.is_enabled) ||
+        (statusFilter === "disabled" && !row.is_enabled);
+      const matchesCategory = categoryFilter === "all" || normalizedCategory === categoryFilter;
+
+      return matchesKeyword && matchesStatus && matchesCategory;
+    });
+  }, [categoryFilter, keyword, orderedRows, statusFilter]);
+
+  const groupedRows = useMemo(() => {
+    const groups = new Map<string, PlayConfigItemRow[]>();
+    for (const row of filteredRows) {
+      const groupKey = row.category?.trim() || "uncategorized";
+      const current = groups.get(groupKey);
+      if (current) {
+        current.push(row);
+      } else {
+        groups.set(groupKey, [row]);
+      }
+    }
+    return Array.from(groups.entries());
+  }, [filteredRows]);
+
+  function categoryLabel(categoryKey: string): string {
+    if (categoryKey === "uncategorized") {
+      return t("play.filters.uncategorized", { ns: "config" });
+    }
+    const mapped = t(`play.categories.${categoryKey}`, { ns: "config" });
+    return mapped === `play.categories.${categoryKey}` ? categoryKey : mapped;
+  }
+
   function updateConfigRow(playCode: string, patch: Partial<PlayConfigItemRow>) {
     setDraftRows((prev) => prev.map((r) => (r.play_code === playCode ? { ...r, ...patch } : r)));
   }
@@ -474,69 +539,153 @@ export function PlayConfigDocScreen() {
     >
       {detail ? (
         <ConfigSection
-          title={t("play.batchSwitchesTitle", { ns: "config" })}
-          description={!isDraft ? t("play.readOnlyDraftHint", { ns: "config" }) : undefined}
+          title={t("play.filters.sectionTitle", { ns: "config" })}
+          description={isDraft ? t("play.filters.sectionDescription", { ns: "config" }) : undefined}
         >
-          <ConfigChipGroup>
-            {batchSwitchStates.map((group) => {
-              const groupOn = group.allEnabled;
-              const isPartial =
-                group.total > 0 && group.enabledCount > 0 && group.enabledCount < group.total;
-              return (
-                <div
-                  key={group.key}
-                  className="flex items-center justify-between gap-4 rounded-xl border border-border/60 bg-card px-4 py-3"
+          {!isDraft ? (
+            <div className="rounded-md border border-amber-200 bg-amber-50/70 px-3 py-2 text-xs text-amber-950">
+              {t("play.readOnlyDraftHint", { ns: "config" })}
+            </div>
+          ) : null}
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-end">
+            <div className="flex flex-1 flex-col gap-3 md:flex-row md:flex-wrap md:items-end">
+              <div className="flex min-w-0 flex-col gap-1.5 md:w-[320px]">
+                <span className="text-sm font-medium">{t("play.filters.keyword", { ns: "config" })}</span>
+                <Input
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                  placeholder={t("play.filters.keywordPlaceholder", { ns: "config" })}
+                  className="h-8"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5 md:w-[140px]">
+                <span className="text-sm font-medium">{t("play.filters.category", { ns: "config" })}</span>
+                <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+                  <SelectTrigger className="h-8">
+                    <SelectValue>
+                      {categoryFilter === "all"
+                        ? t("play.filters.allCategories", { ns: "config" })
+                        : categoryLabel(categoryFilter)}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{t("play.filters.allCategories", { ns: "config" })}</SelectItem>
+                    {categoryOptions.map((category) => (
+                      <SelectItem key={category} value={category}>
+                        {categoryLabel(category)}
+                      </SelectItem>
+                    ))}
+                    <SelectItem value="uncategorized">
+                      {t("play.filters.uncategorized", { ns: "config" })}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5 md:w-[140px]">
+                <span className="text-sm font-medium">{t("play.filters.status", { ns: "config" })}</span>
+                <Select
+                  value={statusFilter}
+                  onValueChange={(value) => setStatusFilter(value as "all" | "enabled" | "disabled")}
                 >
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium text-foreground">{group.label}</p>
-                    <p className="text-sm text-muted-foreground">
-                      {group.total > 0
-                        ? isPartial
-                          ? t("play.batchPartialEnabled", {
-                              ns: "config",
-                              enabledCount: group.enabledCount,
-                              total: group.total,
-                            })
-                          : t("play.batchEnabledCount", {
-                              ns: "config",
-                              enabledCount: group.enabledCount,
-                              total: group.total,
-                            })
-                        : t("play.noPlayTypes", { ns: "config" })}
-                    </p>
-                  </div>
-                  <div className="flex shrink-0 items-center justify-center">
-                    <Checkbox
-                      checked={groupOn}
-                      indeterminate={isPartial}
-                      disabled={!isDraft || saving || group.total === 0 || confirmBusy}
-                      aria-label={t("play.aria.batchGroupSwitch", {
-                        ns: "config",
-                        group: group.label,
-                      })}
-                      onCheckedChange={(checked) => {
-                        const enable = checked === true;
-                        const action = enable
-                          ? t("play.batchSwitchEnable", { ns: "config" })
-                          : t("play.batchSwitchDisable", { ns: "config" });
-                        requestConfirm({
-                          title: t("play.batchSwitchConfirmTitle", { ns: "config", action }),
-                          description: t("play.batchSwitchConfirmDescription", {
+                  <SelectTrigger className="h-8">
+                    <SelectValue>
+                      {statusFilter === "all"
+                        ? t("play.filters.allStatuses", { ns: "config" })
+                        : statusFilter === "enabled"
+                          ? t("play.states.enabled", { ns: "config" })
+                          : t("play.states.disabled", { ns: "config" })}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{t("play.filters.allStatuses", { ns: "config" })}</SelectItem>
+                    <SelectItem value="enabled">{t("play.states.enabled", { ns: "config" })}</SelectItem>
+                    <SelectItem value="disabled">{t("play.states.disabled", { ns: "config" })}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="flex items-end justify-start lg:flex-none">
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setKeyword("");
+                  setCategoryFilter("all");
+                  setStatusFilter("all");
+                }}
+              >
+                {t("play.filters.reset", { ns: "config" })}
+              </Button>
+            </div>
+          </div>
+          {isDraft ? (
+            <div className="space-y-2 border-t border-border/60 pt-3">
+              <div className="text-xs font-medium text-muted-foreground">
+                {t("play.batchSwitchesTitle", { ns: "config" })}
+              </div>
+              <ConfigChipGroup>
+                {batchSwitchStates.map((group) => {
+                  const groupOn = group.allEnabled;
+                  const isPartial =
+                    group.total > 0 && group.enabledCount > 0 && group.enabledCount < group.total;
+                  return (
+                    <div
+                      key={group.key}
+                      className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-card px-3 py-2"
+                    >
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-foreground">{group.label}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {group.total > 0
+                            ? isPartial
+                              ? t("play.batchPartialEnabled", {
+                                  ns: "config",
+                                  enabledCount: group.enabledCount,
+                                  total: group.total,
+                                })
+                              : t("play.batchEnabledCount", {
+                                  ns: "config",
+                                  enabledCount: group.enabledCount,
+                                  total: group.total,
+                                })
+                            : t("play.noPlayTypes", { ns: "config" })}
+                        </p>
+                      </div>
+                      <div className="flex shrink-0 items-center justify-center">
+                        <Checkbox
+                          checked={groupOn}
+                          indeterminate={isPartial}
+                          disabled={saving || group.total === 0 || confirmBusy}
+                          aria-label={t("play.aria.batchGroupSwitch", {
                             ns: "config",
-                            action,
                             group: group.label,
-                            count: group.total,
-                          }),
-                          confirmVariant: enable ? "default" : "destructive",
-                          onConfirm: () => applyBatchSwitch(group, enable),
-                        });
-                      }}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </ConfigChipGroup>
+                          })}
+                          onCheckedChange={(checked) => {
+                            const enable = checked === true;
+                            const action = enable
+                              ? t("play.batchSwitchEnable", { ns: "config" })
+                              : t("play.batchSwitchDisable", { ns: "config" });
+                            requestConfirm({
+                              title: t("play.batchSwitchConfirmTitle", { ns: "config", action }),
+                              description: t("play.batchSwitchConfirmDescription", {
+                                ns: "config",
+                                action,
+                                group: group.label,
+                                count: group.total,
+                              }),
+                              confirmVariant: enable ? "default" : "destructive",
+                              onConfirm: () => applyBatchSwitch(group, enable),
+                            });
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </ConfigChipGroup>
+            </div>
+          ) : null}
         </ConfigSection>
       ) : null}
 
@@ -546,22 +695,41 @@ export function PlayConfigDocScreen() {
         <AdminLoadingState minHeight="6rem" className="py-6" />
       ) : (
         <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="text-center">{t("play.table.playCode", { ns: "config" })}</TableHead>
-                  <TableHead className="w-[100px] text-center">{t("play.table.category", { ns: "config" })}</TableHead>
-                  <TableHead className="w-[88px] text-center">{t("play.table.status", { ns: "config" })}</TableHead>
-                  <TableHead className="w-36 text-center">{t("play.table.displayName", { ns: "config" })}</TableHead>
-                  <TableHead className="w-24 text-center">{t("play.table.order", { ns: "config" })}</TableHead>
-                  <TableHead className="w-[110px] text-center">{t("play.table.minBet", { ns: "config" })}</TableHead>
-                  <TableHead className="w-[110px] text-center">{t("play.table.maxBet", { ns: "config" })}</TableHead>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-center">{t("play.table.playCode", { ns: "config" })}</TableHead>
+              <TableHead className="w-[100px] text-center">{t("play.table.category", { ns: "config" })}</TableHead>
+              <TableHead className="w-[88px] text-center">{t("play.table.status", { ns: "config" })}</TableHead>
+              <TableHead className="w-36 text-center">{t("play.table.displayName", { ns: "config" })}</TableHead>
+              <TableHead className="w-24 text-center">{t("play.table.order", { ns: "config" })}</TableHead>
+              <TableHead className="w-[110px] text-center">{t("play.table.minBet", { ns: "config" })}</TableHead>
+              <TableHead className="w-[110px] text-center">{t("play.table.maxBet", { ns: "config" })}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {groupedRows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="py-8 text-center text-sm text-muted-foreground">
+                  {t("play.filters.empty", { ns: "config" })}
+                </TableCell>
+              </TableRow>
+            ) : null}
+            {groupedRows.map(([groupKey, rows]) => (
+              <Fragment key={groupKey}>
+                <TableRow className="bg-muted/30">
+                  <TableCell colSpan={7} className="py-2 text-sm font-medium text-foreground">
+                    {categoryLabel(groupKey)}
+                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                      {t("play.filters.groupCount", { ns: "config", count: rows.length })}
+                    </span>
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orderedRows.map((row) => (
+                {rows.map((row) => (
                   <TableRow key={row.play_code}>
                     <TableCell className="text-center font-mono text-sm">{row.play_code}</TableCell>
-                    <TableCell className="text-center text-muted-foreground text-sm">{row.category ?? "—"}</TableCell>
+                    <TableCell className="text-center text-muted-foreground text-sm">
+                      {row.category ? categoryLabel(row.category) : "—"}
+                    </TableCell>
                     <TableCell className="text-center">
                       {isDraft ? (
                         <div className="flex justify-center">
@@ -691,7 +859,9 @@ export function PlayConfigDocScreen() {
                     </TableCell>
                   </TableRow>
                 ))}
-              </TableBody>
+              </Fragment>
+            ))}
+          </TableBody>
         </Table>
       )}