refactor: migrate tickets and users pages to use new dashboard list components

- Refactored TicketsPage to utilize DashboardListPage for improved filtering and data fetching. - Removed unnecessary state management and loading logic in favor of the new list hooks. - Updated user management page to leverage useDashboardPagedList for cleaner pagination and filtering. - Enhanced CRUD page to support new action state management and toolbar customization. - Added reset filters functionality to dashboard list components. - Updated translations for new UI elements and loading states.
2026-05-28 12:38:33 +08:00
parent 0611fb0bb6
commit 3fe5a89aeb
14 changed files with 1060 additions and 1355 deletions
@@ -1,33 +1,16 @@
 "use client";

-import {
-  MoreHorizontalIcon,
-  SearchIcon,
-  Trash2Icon,
-  WrenchIcon,
-} from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { WrenchIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";

-import { ListPagination } from "@/components/list-pagination";
+import {
+  DashboardCrudPage,
+  type DashboardCrudActionState,
+  type DashboardCrudColumn,
+  type DashboardCrudFilter,
+} from "@/components/dashboard/crud";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ButtonGroup } from "@/components/ui/button-group";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { OptionCombobox } from "@/components/option-combobox";
-import {
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import {
  Tooltip,
  TooltipContent,
@@ -42,11 +25,8 @@ import {
  updateKnowledgeFAQ,
  type CreateKnowledgeFAQPayload,
  type KnowledgeFAQ,
-  type PageResult,
 } from "@/lib/api/admin";
-import {
-  KnowledgeDocumentIndexStatus,
-} from "@/lib/generated/enums";
+import { KnowledgeDocumentIndexStatus } from "@/lib/generated/enums";
 import { useI18n } from "@/i18n/provider";
 import { formatDateTime } from "@/lib/utils";
 import { FAQEditDialog } from "./faq-edit";
@@ -57,11 +37,8 @@ type FAQListProps = {
  onActionStateChange?: (state: FAQListActionState) => void;
 };

-export type FAQListActionState = {
-  onRefresh: () => void;
-  onCreate: () => void;
+export type FAQListActionState = DashboardCrudActionState & {
  onImport: () => void;
-  loading: boolean;
  importing: boolean;
 };

@@ -70,16 +47,31 @@ type TFunction = (key: string, values?: Record<string, string | number>) => stri
 function getIndexStatusOptions(t: TFunction) {
  return [
    { value: "all", label: t("knowledge.allIndexStatus") },
-    { value: KnowledgeDocumentIndexStatus.Pending, label: t("knowledge.indexPending") },
-    { value: KnowledgeDocumentIndexStatus.Indexed, label: t("knowledge.indexIndexed") },
-    { value: KnowledgeDocumentIndexStatus.Failed, label: t("knowledge.indexFailed") },
+    {
+      value: KnowledgeDocumentIndexStatus.Pending,
+      label: t("knowledge.indexPending"),
+    },
+    {
+      value: KnowledgeDocumentIndexStatus.Indexed,
+      label: t("knowledge.indexIndexed"),
+    },
+    {
+      value: KnowledgeDocumentIndexStatus.Failed,
+      label: t("knowledge.indexFailed"),
+    },
  ];
 }

 function getIndexStatusLabel(status: string, t: TFunction) {
-  if (status === KnowledgeDocumentIndexStatus.Pending) return t("knowledge.indexPending");
-  if (status === KnowledgeDocumentIndexStatus.Indexed) return t("knowledge.indexIndexed");
-  if (status === KnowledgeDocumentIndexStatus.Failed) return t("knowledge.indexFailed");
+  if (status === KnowledgeDocumentIndexStatus.Pending) {
+    return t("knowledge.indexPending");
+  }
+  if (status === KnowledgeDocumentIndexStatus.Indexed) {
+    return t("knowledge.indexIndexed");
+  }
+  if (status === KnowledgeDocumentIndexStatus.Failed) {
+    return t("knowledge.indexFailed");
+  }
  return status || "-";
 }

@@ -127,153 +119,82 @@ export function FAQList({
  onActionStateChange,
 }: FAQListProps) {
  const t = useI18n();
-  const [keywordInput, setKeywordInput] = useState("");
-  const [indexStatusFilterInput, setIndexStatusFilterInput] = useState("all");
-  const [keyword, setKeyword] = useState("");
-  const [indexStatusFilter, setIndexStatusFilter] = useState("all");
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(20);
-  const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
  const [importing, setImporting] = useState(false);
-  const [actionLoadingMap, setActionLoadingMap] = useState<
-    Record<number, { rebuildIndex: boolean; delete: boolean }>
-  >({});
-  const [dialogOpen, setDialogOpen] = useState(false);
  const [importDialogOpen, setImportDialogOpen] = useState(false);
-  const [editingItem, setEditingItem] = useState<KnowledgeFAQ | null>(null);
-  const [result, setResult] = useState<PageResult<KnowledgeFAQ>>({
-    results: [],
-    page: { page: 1, limit: 20, total: 0 },
-  });
+  const [crudActionState, setCrudActionState] =
+    useState<DashboardCrudActionState | null>(null);
  const indexStatusOptions = useMemo(() => getIndexStatusOptions(t), [t]);

-  const loadData = useCallback(
-    async (options?: {
-      keyword?: string;
-      indexStatusFilter?: string;
-      page?: number;
-      limit?: number;
-    }) => {
-      const nextKeyword = options?.keyword ?? keyword;
-      const nextIndexStatusFilter =
-        options?.indexStatusFilter ?? indexStatusFilter;
-      const nextPage = options?.page ?? page;
-      const nextLimit = options?.limit ?? limit;
-
-    if (!knowledgeBaseId) {
-      setResult({
-        results: [],
-        page: { page: 1, limit: 20, total: 0 },
-      });
+  useEffect(() => {
+    if (!crudActionState) {
      return;
    }
-    setLoading(true);
-    try {
-      const data = await fetchKnowledgeFAQs({
-        knowledgeBaseId,
-        question: nextKeyword.trim() || undefined,
-        indexStatus:
-          nextIndexStatusFilter === "all" ? undefined : nextIndexStatusFilter,
-        page: nextPage,
-        limit: nextLimit,
-      });
-      setResult(data);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("knowledge.loadFAQFailed"));
-    } finally {
-      setLoading(false);
-    }
-    },
-    [indexStatusFilter, keyword, knowledgeBaseId, limit, page, t],
-  );
-
-  useEffect(() => {
-    void loadData();
-  }, [knowledgeBaseId, loadData]);
-
-  useEffect(() => {
    onActionStateChange?.({
-      onRefresh: () => void loadData(),
-      onCreate: () => {
-        setEditingItem(null);
-        setDialogOpen(true);
-      },
+      ...crudActionState,
      onImport: () => setImportDialogOpen(true),
-      loading,
      importing,
    });
-  }, [importing, loadData, loading, onActionStateChange]);
+  }, [crudActionState, importing, onActionStateChange]);

-  function applyFilters() {
-    const nextKeyword = keywordInput;
-    const nextIndexStatusFilter = indexStatusFilterInput;
-    setKeyword(nextKeyword);
-    setIndexStatusFilter(nextIndexStatusFilter);
-    setPage(1);
-    void loadData({
-      keyword: nextKeyword,
-      indexStatusFilter: nextIndexStatusFilter,
-      page: 1,
-    });
-  }
+  const filters = useMemo<DashboardCrudFilter[]>(
+    () => [
+      {
+        name: "question",
+        label: t("knowledge.searchFAQ"),
+        placeholder: t("knowledge.searchFAQ"),
+        defaultValue: "",
+        trim: true,
+        className: "max-w-md flex-1",
+      },
+      {
+        name: "indexStatus",
+        label: t("knowledge.allIndexStatus"),
+        type: "select",
+        defaultValue: "all",
+        allValue: "all",
+        options: indexStatusOptions,
+        className: "w-full sm:w-48",
+      },
+    ],
+    [indexStatusOptions, t],
+  );

-  async function handleSubmit(payload: CreateKnowledgeFAQPayload) {
-    setSaving(true);
-    try {
-      if (editingItem) {
-        await updateKnowledgeFAQ({ id: editingItem.id, ...payload });
-      } else {
-        await createKnowledgeFAQ(payload);
-      }
-      setDialogOpen(false);
-      setEditingItem(null);
-      await loadData();
-      toast.success(t("knowledge.faqSaved"));
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("knowledge.faqSaveFailed"));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleDelete(item: KnowledgeFAQ) {
-    setActionLoadingMap((prev) => ({
-      ...prev,
-      [item.id]: { ...prev[item.id], delete: true },
-    }));
-    try {
-      await deleteKnowledgeFAQ(item.id);
-      toast.success(t("knowledge.faqDeleted"));
-      await loadData();
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("knowledge.faqDeleteFailed"));
-    } finally {
-      setActionLoadingMap((prev) => ({
-        ...prev,
-        [item.id]: { ...prev[item.id], delete: false },
-      }));
-    }
-  }
-
-  async function handleBuildIndex(item: KnowledgeFAQ) {
-    setActionLoadingMap((prev) => ({
-      ...prev,
-      [item.id]: { ...prev[item.id], rebuildIndex: true },
-    }));
-    try {
-      await buildKnowledgeFAQIndex(item.id);
-      toast.success(t("knowledge.faqIndexRebuilt"));
-      await loadData();
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("knowledge.faqIndexRebuildFailed"));
-    } finally {
-      setActionLoadingMap((prev) => ({
-        ...prev,
-        [item.id]: { ...prev[item.id], rebuildIndex: false },
-      }));
-    }
-  }
+  const columns = useMemo<DashboardCrudColumn<KnowledgeFAQ>[]>(
+    () => [
+      {
+        key: "question",
+        label: t("knowledge.question"),
+        className: "max-w-sm",
+        render: (item) => (
+          <>
+            <div className="font-medium">{item.question}</div>
+            <div className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+              {item.answer}
+            </div>
+          </>
+        ),
+      },
+      {
+        key: "indexStatus",
+        label: t("knowledge.indexStatus"),
+        render: (item) => renderIndexStatusBadge(item, t),
+      },
+      {
+        key: "similarQuestions",
+        label: t("knowledge.similarQuestions"),
+        render: (item) =>
+          Array.isArray(item.similarQuestions)
+            ? item.similarQuestions.length
+            : 0,
+      },
+      {
+        key: "updatedAt",
+        label: t("knowledge.updatedAt"),
+        render: (item) => formatDateTime(item.updatedAt),
+      },
+    ],
+    [t],
+  );

  if (!knowledgeBaseId) {
    return (
@@ -286,161 +207,99 @@ export function FAQList({
  return (
    <>
      <div className="flex h-full flex-col gap-4 p-4">
-        <div className="flex items-center gap-2">
-          <div className="relative max-w-md flex-1">
-            <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={keywordInput}
-              onChange={(event) => setKeywordInput(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  applyFilters();
+        <DashboardCrudPage<KnowledgeFAQ, CreateKnowledgeFAQPayload>
+          key={knowledgeBaseId}
+          layout="fragment"
+          showToolbarActions={false}
+          filters={filters}
+          columns={columns}
+          fetchList={(query) =>
+            fetchKnowledgeFAQs({
+              knowledgeBaseId,
+              question:
+                typeof query.question === "string" ? query.question : undefined,
+              indexStatus:
+                typeof query.indexStatus === "string"
+                  ? query.indexStatus
+                  : undefined,
+              page: Number(query.page),
+              limit: Number(query.limit),
+            })
+          }
+          getItemId={(item) => item.id}
+          createItem={createKnowledgeFAQ}
+          updateItem={(item, payload) =>
+            updateKnowledgeFAQ({ id: item.id, ...payload })
+          }
+          deleteItem={(item) => deleteKnowledgeFAQ(item.id)}
+          rowActions={[
+            {
+              key: "rebuild-index",
+              icon: <WrenchIcon />,
+              label: t("knowledge.rebuildIndex"),
+              run: async ({ item, reload }) => {
+                try {
+                  await buildKnowledgeFAQIndex(item.id);
+                  toast.success(t("knowledge.faqIndexRebuilt"));
+                  await reload();
+                } catch (error) {
+                  toast.error(
+                    error instanceof Error
+                      ? error.message
+                      : t("knowledge.faqIndexRebuildFailed"),
+                  );
                }
-              }}
-              placeholder={t("knowledge.searchFAQ")}
-              className="pl-9"
+              },
+            },
+          ]}
+          renderEditDialog={({
+            open,
+            saving,
+            itemId,
+            onOpenChange,
+            onSubmit,
+          }) => (
+            <FAQEditDialog
+              open={open}
+              saving={saving}
+              itemId={itemId}
+              knowledgeBaseId={knowledgeBaseId}
+              onOpenChange={onOpenChange}
+              onSubmit={onSubmit}
            />
-          </div>
-          <OptionCombobox
-            value={indexStatusFilterInput}
-            onChange={(value) => setIndexStatusFilterInput(value ?? "all")}
-            options={indexStatusOptions}
-            placeholder={t("knowledge.allIndexStatus")}
-            searchPlaceholder={t("knowledge.searchStatus")}
-            emptyText={t("knowledge.emptyStatus")}
-          />
-          <Button
-            variant="outline"
-            onClick={applyFilters}
-            disabled={loading}
-          >
-            {t("knowledge.query")}
-          </Button>
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-hidden rounded-md border">
-          <div className="h-full overflow-auto">
-            <table className="w-full min-w-max caption-bottom text-sm">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t("knowledge.question")}</TableHead>
-                  <TableHead>{t("knowledge.indexStatus")}</TableHead>
-                  <TableHead>{t("knowledge.similarQuestions")}</TableHead>
-                  <TableHead>{t("knowledge.updatedAt")}</TableHead>
-                  <TableHead className="w-20 text-right">{t("knowledge.actions")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {result.results.map((item) => (
-                  <TableRow key={item.id}>
-                    <TableCell className="max-w-sm">
-                      <div className="font-medium">{item.question}</div>
-                      <div className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                        {item.answer}
-                      </div>
-                    </TableCell>
-                    <TableCell>{renderIndexStatusBadge(item, t)}</TableCell>
-                    <TableCell>
-                      {Array.isArray(item.similarQuestions)
-                        ? item.similarQuestions.length
-                        : 0}
-                    </TableCell>
-                    <TableCell>{formatDateTime(item.updatedAt)}</TableCell>
-                    <TableCell className="w-20 text-right">
-                      <ButtonGroup className="ml-auto">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            setEditingItem(item);
-                            setDialogOpen(true);
-                          }}
-                        >
-                          {t("knowledge.edit")}
-                        </Button>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger
-                            render={<Button variant="outline" size="icon-sm" />}
-                            aria-label={t("knowledge.moreActions", { name: item.question })}
-                          >
-                            <MoreHorizontalIcon className="size-4" />
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => void handleBuildIndex(item)}
-                            >
-                              <WrenchIcon className="mr-2 size-4" />
-                              {actionLoadingMap[item.id]?.rebuildIndex
-                                ? t("knowledge.rebuilding")
-                                : t("knowledge.rebuildIndex")}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              className="text-destructive focus:text-destructive"
-                              onClick={() => void handleDelete(item)}
-                            >
-                              <Trash2Icon className="mr-2 size-4" />
-                              {actionLoadingMap[item.id]?.delete
-                                ? t("knowledge.deleting")
-                                : t("knowledge.delete")}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </ButtonGroup>
-                    </TableCell>
-                  </TableRow>
-                ))}
-                {!loading && result.results.length === 0 ? (
-                  <TableRow>
-                    <TableCell
-                      colSpan={5}
-                      className="py-12 text-center text-sm text-muted-foreground"
-                    >
-                      {t("knowledge.emptyFAQ")}
-                    </TableCell>
-                  </TableRow>
-                ) : null}
-              </TableBody>
-            </table>
-          </div>
-        </div>
-
-        <ListPagination
-          page={result.page.page}
-          limit={result.page.limit}
-          total={result.page.total}
-          onPageChange={(nextPage: number) => {
-            setPage(nextPage);
-            void loadData({ page: nextPage });
-          }}
-          onLimitChange={(next: number) => {
-            setLimit(next);
-            setPage(1);
-            void loadData({ limit: next, page: 1 });
+          )}
+          onActionStateChange={setCrudActionState}
+          labels={{
+            refresh: t("knowledge.refreshFAQ"),
+            create: t("knowledge.newFAQ"),
+            query: t("knowledge.query"),
+            loading: t("knowledge.loadingFAQ"),
+            empty: t("knowledge.emptyFAQ"),
+            actions: t("knowledge.actions"),
+            edit: t("knowledge.edit"),
+            delete: t("knowledge.delete"),
+            processing: t("knowledge.deleting"),
+            moreActions: (item) =>
+              t("knowledge.moreActions", { name: item.question }),
+            loadFailed: t("knowledge.loadFAQFailed"),
+            saveFailed: t("knowledge.faqSaveFailed"),
+            deleteFailed: t("knowledge.faqDeleteFailed"),
+            created: () => t("knowledge.faqSaved"),
+            updated: () => t("knowledge.faqSaved"),
+            deleted: () => t("knowledge.faqDeleted"),
          }}
        />
      </div>

-      <FAQEditDialog
-        open={dialogOpen}
-        saving={saving}
-        itemId={editingItem?.id ?? null}
-        knowledgeBaseId={knowledgeBaseId}
-        onOpenChange={(open) => {
-          if (!open) {
-            setEditingItem(null);
-          }
-          setDialogOpen(open);
-        }}
-        onSubmit={handleSubmit}
-      />
-
      <FAQImportDialog
        open={importDialogOpen}
        knowledgeBaseId={knowledgeBaseId}
        importing={importing}
        onOpenChange={setImportDialogOpen}
        onImportingChange={setImporting}
-        onImported={loadData}
+        onImported={async () => {
+          crudActionState?.onRefresh();
+        }}
      />
    </>
  );