@goplusvn/core 0.1.47 → 0.1.49

package/src/rbac/pages/action-list-page.tsx

@@ -6,7 +6,7 @@
 // Chi tiết sử dụng = chip màu theo loại + "+n khác".
 // API contract: GET/POST/PUT/DELETE /api/actions, GET /api/actions/usage
 // (usage optional — trang vẫn chạy khi endpoint không tồn tại).
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react";
 import {
   Badge,
   Button,
@@ -20,8 +20,8 @@ import {
   Label,
   Skeleton,
   Textarea,
-} from "../../ui"
-import { toast } from "sonner"
+} from "../../ui";
+import { toast } from "sonner";
 import {
   BadgeCheck,
   Ban,
@@ -29,8 +29,6 @@ import {
   ChevronRight,
   Download,
   Eye,
-  LayoutGrid,
-  List,
   PenLine,
   Pencil,
   Plus,
@@ -40,47 +38,47 @@ import {
   Settings2,
   Trash2,
   Upload,
-  X,
   Zap,
-} from "lucide-react"
+} from "lucide-react";
 
-import type { LucideIcon } from "lucide-react"
-
-import { errorMessage, throwFetchError } from "../lib/fetch-error"
-import { cn } from "../../utils"
+import type { LucideIcon } from "lucide-react";
 
+import { errorMessage } from "../lib/fetch-error";
+import { deleteActionById, saveAction } from "./lib/action-api";
+import { RbacPageBar, RbacStickyToolbar } from "./lib/rbac-page-shell";
+import { cn } from "../../utils";
 
 // --- Types ---
 interface Action {
-  id: string
-  code: string
-  name: string
-  description?: string
-  isDefault?: boolean
+  id: string;
+  code: string;
+  name: string;
+  description?: string;
+  isDefault?: boolean;
 }
 
 interface UsageEntry {
-  resources: { code: string; name: string }[]
-  roles: { code: string; name: string }[]
-  users: { id: string; name: string | null; email: string }[]
+  resources: { code: string; name: string }[];
+  roles: { code: string; name: string }[];
+  users: { id: string; name: string | null; email: string }[];
 }
 
-type UsageMap = Record<string, UsageEntry>
+type UsageMap = Record<string, UsageEntry>;
 
-const EMPTY_USAGE: UsageEntry = { resources: [], roles: [], users: [] }
+const EMPTY_USAGE: UsageEntry = { resources: [], roles: [], users: [] };
 
 const normalize = (s: string) =>
   (s || "")
     .toLowerCase()
     .normalize("NFD")
     .replace(/[\u0300-\u036f]/g, "")
-    .replace(/đ/g, "d")
+    .replace(/đ/g, "d");
 
 // --- Icon + màu theo LOẠI action (đồng bộ chip quyền trang sửa vai trò) ---
 const ACTION_VISUAL_RULES: Array<{
-  re: RegExp
-  icon: LucideIcon
-  cls: string
+  re: RegExp;
+  icon: LucideIcon;
+  cls: string;
 }> = [
   { re: /^(view|read|get|list)/, icon: Eye, cls: "text-blue-500" },
   { re: /^(create|add|new)/, icon: Plus, cls: "text-emerald-500" },
@@ -99,201 +97,184 @@ const ACTION_VISUAL_RULES: Array<{
   { re: /^sync/, icon: RefreshCw, cls: "text-cyan-600" },
   { re: /^(manage|config)/, icon: Settings2, cls: "text-orange-500" },
   { re: /^auto/, icon: Bot, cls: "text-purple-500" },
-]
+];
 
 const getActionVisual = (code: string) =>
   ACTION_VISUAL_RULES.find((r) => r.re.test(code)) ?? {
     icon: Zap,
     cls: "text-slate-400",
-  }
+  };
 
 interface Permissions {
-  create?: boolean
-  update?: boolean
-  delete?: boolean
+  create?: boolean;
+  update?: boolean;
+  delete?: boolean;
 }
 
 export interface ActionListPageProps {
-  permissions?: Permissions
+  permissions?: Permissions;
   /** Catalog hành động do Permission Registry trong code quản lý — ẩn mọi nút ghi. */
-  readOnly?: boolean
+  readOnly?: boolean;
 }
 
 export function ActionListPage({
   permissions = {},
   readOnly = false,
 }: ActionListPageProps) {
-  const [loading, setLoading] = useState(true)
-  const [actions, setActions] = useState<Action[]>([])
-  const [usage, setUsage] = useState<UsageMap>({})
-  const [searchTerm, setSearchTerm] = useState("")
-  const [view, setView] = useState<"list" | "grid">("grid")
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
+  const [loading, setLoading] = useState(true);
+  const [actions, setActions] = useState<Action[]>([]);
+  const [usage, setUsage] = useState<UsageMap>({});
+  const [searchTerm, setSearchTerm] = useState("");
+  const [view, setView] = useState<"list" | "grid">("grid");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
   // Create/Edit dialog
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [editing, setEditing] = useState<Action | null>(null)
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<Action | null>(null);
   const [formData, setFormData] = useState({
     code: "",
     name: "",
     description: "",
-  })
+  });
 
   // Delete confirm
-  const [confirmOpen, setConfirmOpen] = useState(false)
-  const [toDelete, setToDelete] = useState<Action | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [toDelete, setToDelete] = useState<Action | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
-  const canCreate = !readOnly && !!permissions.create
-  const canUpdate = !readOnly && !!permissions.update
-  const canDelete = !readOnly && !!permissions.delete
+  const canCreate = !readOnly && !!permissions.create;
+  const canUpdate = !readOnly && !!permissions.update;
+  const canDelete = !readOnly && !!permissions.delete;
 
   const fetchData = async () => {
     try {
-      setLoading(true)
+      setLoading(true);
       const [resActions, resUsage] = await Promise.all([
         fetch("/api/actions?pageSize=1000"),
         fetch("/api/actions/usage"),
-      ])
-      if (!resActions.ok) throw new Error("Không tải được danh sách hành động")
+      ]);
+      if (!resActions.ok) throw new Error("Không tải được danh sách hành động");
 
-      const actionsData = await resActions.json()
-      setActions(actionsData.items || [])
+      const actionsData = await resActions.json();
+      setActions(actionsData.items || []);
 
       if (resUsage.ok) {
-        const usageData = await resUsage.json()
-        setUsage(usageData.usage || {})
+        const usageData = await resUsage.json();
+        setUsage(usageData.usage || {});
       }
     } catch (error) {
-      toast.error(errorMessage(error, "Lỗi tải dữ liệu"))
+      toast.error(errorMessage(error, "Lỗi tải dữ liệu"));
     } finally {
-      setLoading(false)
-      setIsRefreshing(false)
+      setLoading(false);
+      setIsRefreshing(false);
     }
-  }
+  };
 
   useEffect(() => {
-    fetchData()
-  }, [])
+    fetchData();
+  }, []);
 
   const handleRefresh = () => {
-    setIsRefreshing(true)
-    fetchData()
-  }
+    setIsRefreshing(true);
+    fetchData();
+  };
 
   const toggleRow = (id: string) => {
     setExpandedRows((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
 
   const filtered = useMemo(() => {
-    const q = normalize(searchTerm.trim())
+    const q = normalize(searchTerm.trim());
     const list = q
       ? actions.filter(
           (a) =>
             normalize(a.name).includes(q) ||
             normalize(a.code).includes(q) ||
-            normalize(a.description || "").includes(q)
+            normalize(a.description || "").includes(q),
         )
-      : actions
-    return [...list].sort((a, b) => a.name.localeCompare(b.name, "vi"))
-  }, [actions, searchTerm])
+      : actions;
+    return [...list].sort((a, b) => a.name.localeCompare(b.name, "vi"));
+  }, [actions, searchTerm]);
 
   // --- CRUD ---
   const openNew = () => {
-    setEditing(null)
-    setFormData({ code: "", name: "", description: "" })
-    setIsDialogOpen(true)
-  }
+    setEditing(null);
+    setFormData({ code: "", name: "", description: "" });
+    setIsDialogOpen(true);
+  };
 
   const openEdit = (action: Action) => {
-    setEditing(action)
+    setEditing(action);
     setFormData({
       code: action.code,
       name: action.name,
       description: action.description || "",
-    })
-    setIsDialogOpen(true)
-  }
+    });
+    setIsDialogOpen(true);
+  };
 
   const handleSubmit = async () => {
     if (!formData.code || !formData.name) {
-      toast.error("Vui lòng nhập Mã và Tên hành động")
-      return
+      toast.error("Vui lòng nhập Mã và Tên hành động");
+      return;
     }
     try {
-      const payload = { ...formData, status: "active" }
-      const res = await fetch("/api/actions", {
-        method: editing ? "PUT" : "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(
-          editing ? { id: editing.id, ...payload } : payload
-        ),
-      })
-      if (!res.ok) {
-        await throwFetchError(res, "Operation failed")
-      }
-      const saved = await res.json()
+      const saved = await saveAction<Action>(formData, editing?.id);
       if (editing) {
-        setActions((prev) => prev.map((a) => (a.id === saved.id ? saved : a)))
-        toast.success("Cập nhật hành động thành công")
+        setActions((prev) => prev.map((a) => (a.id === saved.id ? saved : a)));
+        toast.success("Cập nhật hành động thành công");
       } else {
-        setActions((prev) => [saved, ...prev])
-        toast.success("Tạo hành động thành công")
+        setActions((prev) => [saved, ...prev]);
+        toast.success("Tạo hành động thành công");
       }
-      setIsDialogOpen(false)
+      setIsDialogOpen(false);
     } catch (error) {
-      toast.error(errorMessage(error, "Có lỗi xảy ra"))
+      toast.error(errorMessage(error, "Có lỗi xảy ra"));
     }
-  }
+  };
 
   const requestDelete = (action: Action) => {
-    setToDelete(action)
-    setConfirmOpen(true)
-  }
+    setToDelete(action);
+    setConfirmOpen(true);
+  };
 
   const handleConfirmDelete = async () => {
-    if (!toDelete) return
-    setIsDeleting(true)
+    if (!toDelete) return;
+    setIsDeleting(true);
     try {
-      const res = await fetch(`/api/actions?id=${toDelete.id}`, {
-        method: "DELETE",
-      })
-      if (!res.ok) {
-        await throwFetchError(res, "Delete failed")
-      }
-      setActions((prev) => prev.filter((a) => a.id !== toDelete.id))
-      toast.success("Xóa hành động thành công")
-      setConfirmOpen(false)
-      setToDelete(null)
+      await deleteActionById(toDelete.id);
+      setActions((prev) => prev.filter((a) => a.id !== toDelete.id));
+      toast.success("Xóa hành động thành công");
+      setConfirmOpen(false);
+      setToDelete(null);
     } catch (error) {
-      toast.error(errorMessage(error, "Không thể xóa hành động"))
+      toast.error(errorMessage(error, "Không thể xóa hành động"));
     } finally {
-      setIsDeleting(false)
+      setIsDeleting(false);
     }
-  }
+  };
 
-  const isSearching = searchTerm.trim().length > 0
+  const isSearching = searchTerm.trim().length > 0;
 
   return (
     <div className="flex flex-col">
-      {/* ===== Bar navy 1 dòng — đồng bộ trang vai trò/đơn bán hàng ===== */}
-      <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center">
-          <Zap className="h-4 w-4 text-primary-foreground/80" />
-        </span>
-        <h1 className="min-w-0 flex-1 truncate px-1 text-base font-bold text-primary-foreground sm:text-lg">
-          Quản lý hành động
-        </h1>
-        <span className="hidden shrink-0 text-xs text-primary-foreground/70 md:inline">
-          {actions.length} hành động · dùng cho tài nguyên · vai trò · người
-          dùng
-        </span>
+      {/* ===== Bar navy 1 dòng — skeleton dùng chung RbacPageBar ===== */}
+      <RbacPageBar
+        icon={<Zap className="h-4 w-4 text-primary-foreground/80" />}
+        title="Quản lý hành động"
+        subtitle={
+          <>
+            {actions.length} hành động · dùng cho tài nguyên · vai trò · người
+            dùng
+          </>
+        }
+      >
         {canCreate && (
           <Button
             onClick={openNew}
@@ -304,31 +285,21 @@ export function ActionListPage({
             <span className="ml-1.5 sm:hidden">Thêm</span>
           </Button>
         )}
-      </div>
+      </RbacPageBar>
 
       {/* ===== Khối trắng: toolbar sticky + danh sách ===== */}
       <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
         {/* Toolbar sticky */}
-        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
-          <div className="relative min-w-[140px] flex-1 sm:max-w-72">
-            <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              placeholder="Tìm hành động (tên, mã, mô tả)…"
-              className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            {searchTerm && (
-              <button
-                type="button"
-                onClick={() => setSearchTerm("")}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                title="Xóa tìm kiếm"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
+        <RbacStickyToolbar
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+          searchPlaceholder="Tìm hành động (tên, mã, mô tả)…"
+          count={actions.length}
+          countLabel="hành động"
+          matchedCount={filtered.length}
+          view={view}
+          onViewChange={setView}
+        >
           <Button
             variant="outline"
             size="icon"
@@ -341,53 +312,7 @@ export function ActionListPage({
               className={cn("h-3.5 w-3.5", isRefreshing && "animate-spin")}
             />
           </Button>
-          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
-            {isSearching ? (
-              <>
-                <span className="font-semibold tabular-nums text-foreground">
-                  {filtered.length}
-                </span>{" "}
-                khớp
-              </>
-            ) : (
-              <>
-                <span className="font-semibold tabular-nums text-foreground">
-                  {actions.length}
-                </span>{" "}
-                hành động
-              </>
-            )}
-          </p>
-          {/* Chuyển dạng hiển thị: dòng / thẻ */}
-          <div className="flex shrink-0 overflow-hidden rounded-md border border-border">
-            <button
-              type="button"
-              onClick={() => setView("list")}
-              title="Dạng dòng"
-              className={cn(
-                "px-2 py-1.5 transition-colors",
-                view === "list"
-                  ? "bg-muted text-foreground"
-                  : "bg-card text-muted-foreground hover:text-foreground"
-              )}
-            >
-              <List className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              onClick={() => setView("grid")}
-              title="Dạng thẻ"
-              className={cn(
-                "border-l border-border px-2 py-1.5 transition-colors",
-                view === "grid"
-                  ? "bg-muted text-foreground"
-                  : "bg-card text-muted-foreground hover:text-foreground"
-              )}
-            >
-              <LayoutGrid className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        </div>
+        </RbacStickyToolbar>
 
         {/* Body */}
         {loading && !isRefreshing ? (
@@ -516,7 +441,7 @@ export function ActionListPage({
         loading={isDeleting}
       />
     </div>
-  )
+  );
 }
 
 // --- Một dòng hành động: tên + mã·mô tả; số liệu dạng chữ; bung ra hiển thị
@@ -532,15 +457,15 @@ function ActionRow({
   onEdit,
   onDelete,
 }: {
-  index: number
-  action: Action
-  usage: UsageEntry
-  expanded: boolean
-  canUpdate: boolean
-  canDelete: boolean
-  onToggleExpand: () => void
-  onEdit: (a: Action) => void
-  onDelete: (a: Action) => void
+  index: number;
+  action: Action;
+  usage: UsageEntry;
+  expanded: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
+  onToggleExpand: () => void;
+  onEdit: (a: Action) => void;
+  onDelete: (a: Action) => void;
 }) {
   return (
     <li>
@@ -551,8 +476,8 @@ function ActionRow({
         onClick={onToggleExpand}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault()
-            onToggleExpand()
+            e.preventDefault();
+            onToggleExpand();
           }
         }}
         className="flex cursor-pointer items-center gap-3 bg-card px-4 py-3 transition-colors hover:bg-muted/40"
@@ -580,8 +505,8 @@ function ActionRow({
           <button
             type="button"
             onClick={(e) => {
-              e.stopPropagation()
-              onEdit(action)
+              e.stopPropagation();
+              onEdit(action);
             }}
             className="shrink-0 rounded-md border border-border bg-card p-1.5 text-amber-500 shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 hover:text-amber-600 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
             title="Sửa hành động"
@@ -593,8 +518,8 @@ function ActionRow({
           <button
             type="button"
             onClick={(e) => {
-              e.stopPropagation()
-              onDelete(action)
+              e.stopPropagation();
+              onDelete(action);
             }}
             className="shrink-0 rounded-md border border-border bg-card p-1.5 text-destructive shadow-sm transition-colors hover:border-destructive/40 hover:bg-destructive/10"
             title="Xóa hành động"
@@ -605,7 +530,7 @@ function ActionRow({
         <ChevronRight
           className={cn(
             "h-4 w-4 shrink-0 text-muted-foreground/50 transition-transform",
-            expanded && "rotate-90"
+            expanded && "rotate-90",
           )}
         />
       </div>
@@ -639,7 +564,7 @@ function ActionRow({
         </div>
       )}
     </li>
-  )
+  );
 }
 
 // --- Thẻ hành động (grid, MẶC ĐỊNH) — phong cách thẻ VAI TRÒ: icon loại
@@ -656,18 +581,18 @@ function ActionCard({
   onEdit,
   onDelete,
 }: {
-  index: number
-  action: Action
-  usage: UsageEntry
-  expanded: boolean
-  canUpdate: boolean
-  canDelete: boolean
-  onToggleExpand: () => void
-  onEdit: (a: Action) => void
-  onDelete: (a: Action) => void
+  index: number;
+  action: Action;
+  usage: UsageEntry;
+  expanded: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
+  onToggleExpand: () => void;
+  onEdit: (a: Action) => void;
+  onDelete: (a: Action) => void;
 }) {
-  const visual = getActionVisual(action.code)
-  const ActionIcon = visual.icon
+  const visual = getActionVisual(action.code);
+  const ActionIcon = visual.icon;
 
   return (
     <div
@@ -677,13 +602,13 @@ function ActionCard({
       onClick={onToggleExpand}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          onToggleExpand()
+          e.preventDefault();
+          onToggleExpand();
         }
       }}
       className={cn(
         "cursor-pointer overflow-hidden rounded-[12px] border border-border bg-card p-4 shadow-sm transition-all hover:border-primary/40 hover:shadow-md",
-        expanded && "col-span-full border-primary/40"
+        expanded && "col-span-full border-primary/40",
       )}
     >
       {/* Header: icon loại + tên/mã | badge */}
@@ -758,8 +683,8 @@ function ActionCard({
               size="sm"
               className="h-8 flex-1 rounded-[8px] bg-card text-[12px] font-medium shadow-sm transition-colors hover:border-amber-300 hover:bg-amber-50 dark:hover:border-amber-500/40 dark:hover:bg-amber-500/10"
               onClick={(e) => {
-                e.stopPropagation()
-                onEdit(action)
+                e.stopPropagation();
+                onEdit(action);
               }}
             >
               <Pencil className="mr-1.5 h-3.5 w-3.5 text-amber-500" />
@@ -772,8 +697,8 @@ function ActionCard({
               size="sm"
               className="h-8 flex-1 rounded-[8px] bg-card text-[12px] font-medium text-destructive shadow-sm transition-colors hover:bg-destructive/10 hover:text-destructive"
               onClick={(e) => {
-                e.stopPropagation()
-                onDelete(action)
+                e.stopPropagation();
+                onDelete(action);
               }}
             >
               <Trash2 className="mr-1.5 h-3.5 w-3.5" />
@@ -811,7 +736,7 @@ function ActionCard({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 // Số liệu kiểu chữ: "30 tài nguyên · 8 vai trò · 30 người dùng"
@@ -819,19 +744,19 @@ function Metrics({
   usage,
   className,
 }: {
-  usage: UsageEntry
-  className?: string
+  usage: UsageEntry;
+  className?: string;
 }) {
   const parts = [
     { n: usage.resources.length, label: "tài nguyên" },
     { n: usage.roles.length, label: "vai trò" },
     { n: usage.users.length, label: "người dùng" },
-  ]
+  ];
   return (
     <div
       className={cn(
         "shrink-0 whitespace-nowrap text-xs text-muted-foreground",
-        className
+        className,
       )}
     >
       {parts.map((p, i) => (
@@ -840,7 +765,7 @@ function Metrics({
           <span
             className={cn(
               "tabular-nums",
-              p.n > 0 && "font-medium text-foreground"
+              p.n > 0 && "font-medium text-foreground",
             )}
           >
             {p.n}
@@ -849,12 +774,12 @@ function Metrics({
         </span>
       ))}
     </div>
-  )
+  );
 }
 
 // 1 dòng quan hệ: nhãn (small caps) + số đếm | CHIP wrap ngang (thay cho
 // danh sách phẩy khó quét). Quá MAX_DEF_CHIPS → nút "+n khác" / "Thu gọn".
-const MAX_DEF_CHIPS = 15
+const MAX_DEF_CHIPS = 15;
 
 function DefRow({
   label,
@@ -862,14 +787,14 @@ function DefRow({
   items,
   chipClass,
 }: {
-  label: string
-  empty: string
-  items: { key: string; text: string; title?: string }[]
-  chipClass?: string
+  label: string;
+  empty: string;
+  items: { key: string; text: string; title?: string }[];
+  chipClass?: string;
 }) {
-  const [showAll, setShowAll] = useState(false)
-  const shown = showAll ? items : items.slice(0, MAX_DEF_CHIPS)
-  const overflow = items.length - shown.length
+  const [showAll, setShowAll] = useState(false);
+  const shown = showAll ? items : items.slice(0, MAX_DEF_CHIPS);
+  const overflow = items.length - shown.length;
 
   return (
     <div className="flex flex-col gap-1 sm:flex-row sm:gap-4">
@@ -890,7 +815,7 @@ function DefRow({
                 title={it.title}
                 className={cn(
                   "inline-flex max-w-56 items-center truncate rounded-md border px-1.5 py-0.5 text-[11px] leading-4",
-                  chipClass || "border-border bg-card text-foreground/80"
+                  chipClass || "border-border bg-card text-foreground/80",
                 )}
               >
                 {it.text}
@@ -918,5 +843,5 @@ function DefRow({
         )}
       </div>
     </div>
-  )
+  );
 }