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.

web/app/dashboard/knowledge/_components/document-list.tsx

@@ -8,9 +8,13 @@ import {
   Trash2Icon,
   WrenchIcon,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, type KeyboardEvent } from "react";
 import { toast } from "sonner";
 
+import {
+  useDashboardPagedList,
+  type DashboardPagedListFilter,
+} from "@/components/dashboard/list";
 import { ListPagination } from "@/components/list-pagination";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -43,7 +47,6 @@ import {
   updateKnowledgeDocument,
   type CreateKnowledgeDocumentPayload,
   type KnowledgeDocumentListItem,
-  type PageResult,
 } from "@/lib/api/admin";
 import { useI18n } from "@/i18n/provider";
 import {
@@ -136,15 +139,6 @@ const VIEW_MODE_STORAGE_KEY = "knowledge-document-view-mode";
 
 export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentListProps) {
   const t = useI18n();
-  const [keywordInput, setKeywordInput] = useState("");
-  const [statusFilterInput, setStatusFilterInput] = useState("all");
-  const [indexStatusFilterInput, setIndexStatusFilterInput] = useState("all");
-  const [keyword, setKeyword] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
-  const [indexStatusFilter, setIndexStatusFilter] = useState("all");
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(20);
-  const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [actionLoadingMap, setActionLoadingMap] = useState<Record<number, { rebuildIndex: boolean; delete: boolean }>>({});
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -156,87 +150,72 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
     const saved = localStorage.getItem(VIEW_MODE_STORAGE_KEY);
     return saved === "list" || saved === "grid" ? saved : "grid";
   });
-  const [documents, setDocuments] = useState<PageResult<KnowledgeDocumentListItem>>({
-    results: [],
-    page: { page: 1, limit: 20, total: 0 },
-  });
   const statusOptions = useMemo(() => getStatusOptions(t), [t]);
   const indexStatusOptions = useMemo(() => getIndexStatusOptions(t), [t]);
 
-  const loadData = useCallback(async (options?: {
-    keyword?: string;
-    statusFilter?: string;
-    indexStatusFilter?: string;
-    page?: number;
-    limit?: number;
-  }) => {
-    const nextKeyword = options?.keyword ?? keyword;
-    const nextStatusFilter = options?.statusFilter ?? statusFilter;
-    const nextIndexStatusFilter = options?.indexStatusFilter ?? indexStatusFilter;
-    const nextPage = options?.page ?? page;
-    const nextLimit = options?.limit ?? limit;
+  const filters = useMemo<DashboardPagedListFilter[]>(() => [
+    {
+      name: "title",
+      defaultValue: "",
+      trim: true,
+    },
+    {
+      name: "status",
+      defaultValue: "all",
+      allValue: "all",
+    },
+    {
+      name: "indexStatus",
+      defaultValue: "all",
+      allValue: "all",
+    },
+  ], []);
 
-    if (!knowledgeBaseId) {
-      setDocuments({ results: [], page: { page: 1, limit, total: 0 } });
-      setLoading(false);
-      return;
-    }
+  const fetchList = useCallback(async (query: Record<string, string | number | undefined>) => {
+    return fetchKnowledgeDocuments({
+      title: typeof query.title === "string" ? query.title : undefined,
+      status: typeof query.status === "string" ? query.status : undefined,
+      indexStatus: typeof query.indexStatus === "string" ? query.indexStatus : undefined,
+      knowledgeBaseId: knowledgeBaseId ?? 0,
+      page: typeof query.page === "number" ? query.page : Number(query.page ?? 1),
+      limit: typeof query.limit === "number" ? query.limit : Number(query.limit ?? 20),
+    });
+  }, [knowledgeBaseId]);
 
-    setLoading(true);
-    try {
-      const data = await fetchKnowledgeDocuments({
-        title: nextKeyword.trim() || undefined,
-        status: nextStatusFilter === "all" ? undefined : nextStatusFilter,
-        indexStatus: nextIndexStatusFilter === "all" ? undefined : nextIndexStatusFilter,
-        knowledgeBaseId,
-        page: nextPage,
-        limit: nextLimit,
-      });
-      setDocuments(data);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("knowledge.loadDocumentsFailed"));
-    } finally {
-      setLoading(false);
-    }
-  }, [indexStatusFilter, keyword, statusFilter, knowledgeBaseId, limit, page, t]);
-
-  useEffect(() => {
-    void loadData();
-  }, [loadData]);
+  const {
+    draftFilters,
+    setDraftFilter,
+    applyFilter,
+    applyFilters: applyDraftFilters,
+    loading,
+    result: documents,
+    loadData,
+    handlePageChange,
+    handleLimitChange,
+  } = useDashboardPagedList<KnowledgeDocumentListItem>({
+    filters,
+    fetchList,
+    enabled: Boolean(knowledgeBaseId),
+    loadFailed: t("knowledge.loadDocumentsFailed"),
+  });
 
   useEffect(() => {
     localStorage.setItem(VIEW_MODE_STORAGE_KEY, viewMode);
   }, [viewMode]);
 
   function handleStatusFilterChange(value: string | null) {
-    const newValue = value ?? "all";
-    setStatusFilterInput(newValue);
-    setStatusFilter(newValue);
+    applyFilter("status", value ?? "all");
   }
 
   function handleIndexStatusFilterChange(value: string | null) {
-    const newValue = value ?? "all";
-    setIndexStatusFilterInput(newValue);
-    setIndexStatusFilter(newValue);
+    applyFilter("indexStatus", value ?? "all");
   }
 
   function applyFilters() {
-    const nextKeyword = keywordInput;
-    const nextStatusFilter = statusFilterInput;
-    const nextIndexStatusFilter = indexStatusFilterInput;
-    setKeyword(nextKeyword);
-    setStatusFilter(nextStatusFilter);
-    setIndexStatusFilter(nextIndexStatusFilter);
-    setPage(1);
-    void loadData({
-      keyword: nextKeyword,
-      statusFilter: nextStatusFilter,
-      indexStatusFilter: nextIndexStatusFilter,
-      page: 1,
-    });
+    applyDraftFilters();
   }
 
-  function handleFilterKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+  function handleFilterKeyDown(event: KeyboardEvent<HTMLInputElement>) {
     if (event.key !== "Enter") {
       return;
     }
@@ -348,15 +327,15 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
             <div className="relative flex-1">
               <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" />
               <Input
-                value={keywordInput}
-                onChange={(event) => setKeywordInput(event.target.value)}
+                value={String(draftFilters.title ?? "")}
+                onChange={(event) => setDraftFilter("title", event.target.value)}
                 onKeyDown={handleFilterKeyDown}
                 placeholder={t("knowledge.searchDocumentTitle")}
                 className="h-8 pl-8 text-xs"
               />
             </div>
             <OptionCombobox
-              value={statusFilterInput}
+              value={String(draftFilters.status ?? "all")}
               onChange={handleStatusFilterChange}
               options={statusOptions}
               placeholder={t("knowledge.allStatus")}
@@ -364,7 +343,7 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
               emptyText={t("knowledge.emptyStatus")}
             />
             <OptionCombobox
-              value={indexStatusFilterInput}
+              value={String(draftFilters.indexStatus ?? "all")}
               onChange={handleIndexStatusFilterChange}
               options={indexStatusOptions}
               placeholder={t("knowledge.allIndexStatus")}
@@ -544,15 +523,8 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
             limit={documents.page.limit}
             total={documents.page.total}
             loading={loading}
-            onPageChange={(nextPage) => {
-              setPage(nextPage);
-              void loadData({ page: nextPage });
-            }}
-            onLimitChange={(nextLimit) => {
-              setLimit(nextLimit);
-              setPage(1);
-              void loadData({ limit: nextLimit, page: 1 });
-            }}
+            onPageChange={handlePageChange}
+            onLimitChange={handleLimitChange}
           />
         </div>
       </div>

web/app/dashboard/knowledge/_components/faq-list.tsx

@@ -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();
+        }}
       />
     </>
   );