@goplusvn/core 0.1.11 → 0.1.13

package/src/crud/components/crud-page.tsx

@@ -101,6 +101,19 @@ const CrudImportDialog = dynamic(
   },
 );
 
+const CrudDetailDialog = dynamic(
+  () =>
+    import("./crud-detail-dialog").then((m) => ({
+      default: m.CrudDetailDialog,
+    })),
+  {
+    ssr: false, // Detail dialog doesn't need SSR
+    // No loading fallback: the dialog renders nothing while closed, so a spinner
+    // placeholder would flash at the bottom of the page on first mount.
+    loading: () => null,
+  },
+);
+
 const CrudExportButton = dynamic(
   () =>
     import("./crud-export-button").then((m) => ({
@@ -256,6 +269,8 @@ function CrudPageContent({
   const [tableLoading, setTableLoading] = useState(false); // Separate loading state for table only
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingRowId, setEditingRowId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailRowId, setDetailRowId] = useState<string | null>(null);
   const [tableInstance, setTableInstance] = useState<any>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deletingRowId, setDeletingRowId] = useState<string | null>(null);
@@ -503,6 +518,33 @@ function CrudPageContent({
     setDeleteDialogOpen(true);
   };
 
+  // Row click behaviour. Default: editors jump straight to the edit form, viewers
+  // get the read-only detail dialog. Set features.rowClickAction="detail" to always
+  // open the read-only detail (with an Edit button), or showDetailOnRowClick=false
+  // to disable row click entirely.
+  const showDetailOnRowClick = config.features?.showDetailOnRowClick !== false;
+  const rowClickAction = config.features?.rowClickAction ?? "edit";
+  const handleRowClick = (rowId: string) => {
+    if (rowClickAction === "edit" && permissions.update) {
+      handleEdit(rowId);
+    } else {
+      setDetailRowId(rowId);
+      setDetailOpen(true);
+    }
+  };
+
+  // Edit/Delete launched from inside the detail dialog: close detail first, then
+  // open the target dialog on the next tick so the two Radix modals don't fight
+  // over focus / scroll-lock during the same render.
+  const handleDetailEdit = (rowId: string) => {
+    setDetailOpen(false);
+    setTimeout(() => handleEdit(rowId), 0);
+  };
+  const handleDetailDelete = (rowId: string) => {
+    setDetailOpen(false);
+    setTimeout(() => handleDelete(rowId), 0);
+  };
+
   const handleCustomAction = async (
     action: string,
     rowId: string,
@@ -732,6 +774,16 @@ function CrudPageContent({
     );
   }, [deletingRowId, data.data, config.idField]);
 
+  // ✅ Memoize detailData (row shown in the read-only detail dialog)
+  const detailData = useMemo(() => {
+    if (!detailRowId) return undefined;
+    return data.data.find(
+      (row) =>
+        String((row as Record<string, unknown>)[config.idField]) ===
+        detailRowId,
+    );
+  }, [detailRowId, data.data, config.idField]);
+
   return (
     <>
       <div className="flex flex-col h-full gap-2">
@@ -861,6 +913,9 @@ function CrudPageContent({
                 onEdit={handleEdit}
                 onDelete={handleDelete}
                 onCustomAction={handleCustomAction}
+                onRowClick={
+                  showDetailOnRowClick ? handleRowClick : undefined
+                }
                 onTableReady={setTableInstance}
                 onEmptyStateAction={{
                   onCreate: handleCreate,
@@ -879,6 +934,9 @@ function CrudPageContent({
                   onEdit={handleEdit}
                   onDelete={handleDelete}
                   onCustomAction={handleCustomAction}
+                  onRowClick={
+                    showDetailOnRowClick ? handleRowClick : undefined
+                  }
                   onEmptyStateAction={{
                     onCreate: handleCreate,
                     onClearSearch: () => setSearch(""),
@@ -951,6 +1009,28 @@ function CrudPageContent({
           }}
         />
       )}
+
+      {/* Read-only detail dialog (opens on row click) */}
+      {showDetailOnRowClick && (
+        <CrudDetailDialog
+          open={detailOpen}
+          onOpenChange={(open) => {
+            setDetailOpen(open);
+            if (!open) setDetailRowId(null);
+          }}
+          config={config}
+          data={detailData as Record<string, unknown> | undefined}
+          permissions={permissions}
+          translations={{
+            detail: t("crud.common.detail", "Chi tiết"),
+            edit: translations.edit,
+            delete: translations.delete,
+            close: t("crud.common.close", "Đóng"),
+          }}
+          onEdit={permissions.update ? handleDetailEdit : undefined}
+          onDelete={permissions.delete ? handleDetailDelete : undefined}
+        />
+      )}
     </>
   );
 }

package/src/crud/components/crud-provider.tsx

@@ -10,6 +10,7 @@ import type {
   SortingState,
 } from "../../types";
 import type { ReactNode } from "react";
+import { BodyLockGuard } from "../../ui/primitives/body-lock-guard";
 import {
   CrudConfigContext,
   CrudSelectionContext,
@@ -256,6 +257,8 @@ export function CrudProvider({
     <CrudConfigContext.Provider value={configValue}>
       <CrudStateContext.Provider value={stateValue}>
         <CrudSelectionContext.Provider value={selectionValue}>
+          {/* Lưới an toàn: tự gỡ khoá <body> nếu Radix để sót sau khi đóng dialog */}
+          <BodyLockGuard />
           {children}
         </CrudSelectionContext.Provider>
       </CrudStateContext.Provider>

package/src/crud/components/crud-sheet.tsx

@@ -265,8 +265,8 @@ export function CrudSheet({
           </div>
         </SheetHeader>
 
-        {/* Form Content */}
-        <div className="flex-1 overflow-y-auto px-6 py-4">
+        {/* Form Content — no bottom padding so the form's footer sits flush */}
+        <div className="flex-1 overflow-y-auto px-6 pt-4">
           <CrudForm
             key={`${config.name}-${mode}-${initialData?.id || "new"}`}
             ref={formRef}

package/src/crud/components/crud-table.tsx

@@ -67,6 +67,7 @@ interface CrudTableProps<TData = Record<string, unknown>> {
     rowId: string,
     rowData: Record<string, unknown>,
   ) => void | Promise<void>;
+  onRowClick?: (rowId: string, rowData: Record<string, unknown>) => void;
   onTableReady?: (table: Table<TData>) => void;
   onEmptyStateAction?: {
     onCreate?: () => void;
@@ -82,6 +83,7 @@ export function CrudTable<TData extends Record<string, unknown>>({
   onEdit,
   onDelete,
   onCustomAction,
+  onRowClick,
   onTableReady,
   onEmptyStateAction,
   getTranslation,
@@ -368,6 +370,16 @@ export function CrudTable<TData extends Record<string, unknown>>({
       selectedRows={selectedRows}
       onSelectionChange={handleSelectionChange}
       getRowId={getRowId}
+      // Row click → detail dialog
+      onRowClick={
+        onRowClick
+          ? (row) =>
+              onRowClick(
+                String((row as TData)[config.idField as keyof TData]),
+                row as Record<string, unknown>,
+              )
+          : undefined
+      }
       // Row Number
       enableRowNumber={config.features?.showRowNumber !== false}
       // Empty State

package/src/crud/components/index.tsx

@@ -7,6 +7,7 @@ export { CrudTableToolbar } from "./crud-table-toolbar";
 export { CrudRowActions } from "./crud-row-actions";
 export { CrudForm } from "./crud-form";
 export { CrudDialog } from "./crud-dialog";
+export { CrudDetailDialog } from "./crud-detail-dialog";
 export { CrudSheet } from "./crud-sheet";
 export { CrudSearch } from "./crud-search";
 export { CrudBulkActions } from "./crud-bulk-actions";

package/src/crud/lib/crud-utils.ts

@@ -184,6 +184,87 @@ export function isFieldVisibleInForm(field: FieldConfig): boolean {
   return !field.hideInForm && !field.isDisplayOnly;
 }
 
+/**
+ * Check if a field is visible in the read-only detail dialog.
+ * Detail shows everything except fields explicitly hidden from it and the id field
+ * (a raw UUID is noise — the title already identifies the record).
+ */
+export function isFieldVisibleInDetail(
+  field: FieldConfig,
+  config?: EntityConfig,
+): boolean {
+  if (field.hideInDetail) return false;
+  if (config && (field.name === config.idField || field.name === "id")) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Resolve a human-friendly "title" value for a row (card header / detail dialog
+ * header). Normally this is `config.displayField`, but several transactional
+ * entities set `displayField: "id"` (no natural name) — rendering a raw UUID is
+ * ugly, so we fall back to a name-like field, an included relation's label, or the
+ * first meaningful text field, and only show a shortened id as a last resort.
+ *
+ * Returns the matching field (so the caller can format dates/numbers) plus the
+ * value; in the relation/text fallbacks the value is already a display string.
+ */
+export function getRowDisplay(
+  config: EntityConfig,
+  row: Record<string, unknown>,
+): { field?: FieldConfig; value: unknown } {
+  const fields = config.fields;
+  const find = (n: string) => fields.find((f) => f.name === n);
+  const present = (v: unknown) => v !== null && v !== undefined && v !== "";
+
+  // 1. Configured displayField — unless it is the id field itself, or empty.
+  const dfValue = row[config.displayField];
+  if (
+    config.displayField &&
+    config.displayField !== config.idField &&
+    config.displayField !== "id" &&
+    present(dfValue)
+  ) {
+    return { field: find(config.displayField), value: dfValue };
+  }
+
+  // 2. A conventional name-like field.
+  const nameLike = ["name", "fullName", "displayName", "title", "label", "code"];
+  for (const key of nameLike) {
+    const v = row[key];
+    if (present(v)) return { field: find(key), value: v };
+  }
+
+  // 3. An included relation's label (e.g. supplierId → row.supplier.name).
+  for (const f of fields) {
+    if (!f.name.endsWith("Id") || f.name === config.idField) continue;
+    const rel = row[f.name.slice(0, -2)];
+    if (rel && typeof rel === "object" && !Array.isArray(rel)) {
+      const r = rel as Record<string, unknown>;
+      const labelField = f.dataSource?.labelField || "name";
+      const label = r[labelField] ?? r.name ?? r.label ?? r.code ?? r.title;
+      if (present(label)) return { field: f, value: label };
+    }
+  }
+
+  // 4. First visible, non-id, text-ish field with a value.
+  for (const f of fields) {
+    if (f.name === config.idField || f.hideInTable) continue;
+    if (["text", "textarea", "email", "select"].includes(f.type)) {
+      const v = row[f.name];
+      if (present(v)) return { field: f, value: v };
+    }
+  }
+
+  // 5. Last resort: a shortened id, or the entity label.
+  const id = row[config.idField];
+  return {
+    field: undefined,
+    value: id ? `#${String(id).slice(0, 8)}` : config.label,
+  };
+}
+
 /**
  * Filter out display-only (DTO) fields from form data before submitting to API
  * Display-only fields are computed/transformed fields, not actual entity fields

package/src/providers/index.tsx

@@ -76,6 +76,25 @@ export function SettingsProvider({
     setSettings(defaultSettings);
   }, [deleteStoredSettings]);
 
+  // Apply the appearance choices the Customizer exposes but that nothing else
+  // wires up. Without this, the "Radius" and "Density" controls store a value
+  // yet change nothing on screen (dead controls in every app using core).
+  //  - radius  → drive the real `--radius` token. Tailwind's @theme inline
+  //    derives rounded-sm/md/lg/xl from it (see styles/base.css), so the whole
+  //    UI re-rounds live. The Customizer stores rem (0, 0.3, 0.5, 0.75, 1).
+  //  - density → expose as a `data-density` attribute; base.css tightens the
+  //    global `--spacing` scale in compact mode ([data-density="compact"]).
+  // Client-only (useEffect) so there's no SSR/hydration mismatch.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty("--radius", `${settings.radius ?? 0.5}rem`);
+    if (settings.density === "compact") {
+      root.setAttribute("data-density", "compact");
+    } else {
+      root.removeAttribute("data-density");
+    }
+  }, [settings.radius, settings.density]);
+
   return (
     <SettingsContext.Provider
       value={{ settings, updateSettings, resetSettings }}

package/src/styles/base.css

@@ -582,4 +582,45 @@ aside.EmojiPickerReact {
 .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #64748b;
   /* slate-500 */
+}
+
+/* ============================================================================
+ * Customizer: Density ("Comfortable" vs "Compact")
+ * SettingsProvider sets data-density="compact" on <html> from settings.density.
+ * Tailwind v4 derives EVERY spacing utility (p-/px-/gap-/space-/h-/w-/size-…)
+ * from the single `--spacing` token (default 0.25rem). Tightening it here packs
+ * the whole UI from one lever — tables, forms, cards, the sidebar — instead of
+ * per-component edits. 0.215rem ≈ 14% tighter: denser, still comfortably hit.
+ * ========================================================================== */
+[data-density="compact"] {
+  --spacing: 0.215rem;
+}
+
+/* ============================================================================
+ * Customizer: Sidebar variant "inset" / "floating" — frame colour.
+ * Core's default sidebar is a deep navy (--sidebar-background), and the shadcn
+ * inset/floating treatment paints the page frame with that same sidebar colour
+ * (has-[[data-variant=inset]]:bg-sidebar). On the navy default that reads as a
+ * harsh, broken-looking block. Repaint the frame with the soft neutral so the
+ * content reads as a CARD FLOATING ON A CALM PAGE (the rounded-xl + shadow core
+ * already applies do the floating). Token-based → adapts to dark mode.
+ * Un-layered → wins over the Tailwind `bg-sidebar` utility (in @layer utilities)
+ * regardless of specificity.
+ * ========================================================================== */
+.group\/sidebar-wrapper:has([data-variant="inset"]),
+.group\/sidebar-wrapper:has([data-variant="floating"]) {
+  background-color: hsl(var(--muted));
+}
+
+/* ============================================================================
+ * Customizer: floating / inset — round the header's BOTTOM-left corner.
+ * The content panel already rounds its left corners (rounded-l-xl clips the
+ * sticky header's top-left) and the sidebar rounds its corners, but the
+ * header's divider still met the left edge as a hard inner corner. The layout
+ * header is the first child of the SidebarInset <main>, a sibling after the
+ * sidebar peer (which carries data-variant). 0.75rem = rounded-xl, matching.
+ * ========================================================================== */
+[data-variant="floating"] ~ main > header,
+[data-variant="inset"] ~ main > header {
+  border-bottom-left-radius: 0.75rem;
 }

package/src/types/index.ts

@@ -389,6 +389,8 @@ export interface FieldConfig {
   validation?: z.ZodTypeAny;
   hideInTable?: boolean;
   hideInForm?: boolean;
+  /** Hide this field from the read-only detail dialog (row-click view). */
+  hideInDetail?: boolean;
   showInImport?: boolean;
   width?: number | string;
   minWidth?: number | string;
@@ -637,6 +639,18 @@ export interface CrudFeatures {
   import?: boolean;
   showRowNumber?: boolean;
   showRowSelection?: boolean;
+  /**
+   * Open something when a table/card row is clicked.
+   * Enabled by default — set to `false` to disable row click for an entity.
+   */
+  showDetailOnRowClick?: boolean;
+  /**
+   * What a row click opens (when `showDetailOnRowClick` is not false):
+   * - `"edit"` (default): open the edit form if the user has update permission,
+   *   otherwise the read-only detail dialog.
+   * - `"detail"`: always open the read-only detail dialog (with an Edit button).
+   */
+  rowClickAction?: "edit" | "detail";
 }
 
 // ============================================================================

package/src/ui/data-display/data-table/data-table.tsx

@@ -516,7 +516,24 @@ const MemoizedTableRow = memo(
         className={`transition-colors duration-100 even:bg-muted/30 hover:bg-accent/50 dark:hover:bg-slate-800/40 data-[state=selected]:bg-primary/5 border-b border-border/40 dark:border-slate-800 relative hover:border-l-[3px] hover:border-l-primary ${
           onRowClick ? "cursor-pointer" : ""
         }`}
-        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+        onClick={
+          onRowClick
+            ? (e) => {
+                // Don't trigger row click for interactive controls inside the row
+                // (selection checkbox, action menu trigger, links). The actions
+                // dropdown content is portaled, so only its trigger lives here.
+                const target = e.target as HTMLElement;
+                if (
+                  target.closest(
+                    'button, a, input, label, [role="checkbox"], [role="menuitem"], [data-no-row-click]',
+                  )
+                ) {
+                  return;
+                }
+                onRowClick(row.original);
+              }
+            : undefined
+        }
       >
         {row.getVisibleCells().map((cell) => (
           <TableCell

package/src/ui/feedback/index.tsx

@@ -24,6 +24,7 @@ import type { ComponentProps } from "react";
 
 import { cn } from "../../utils";
 import { buttonVariants } from "../primitives";
+import { useReleaseStuckBodyLock } from "../primitives/use-release-stuck-body-lock";
 
 export * from "./progress";
 export * from "./sheet";
@@ -81,6 +82,7 @@ export function AlertDialogContent({
   className,
   ...props
 }: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  useReleaseStuckBodyLock();
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />

package/src/ui/layout/customizer.tsx

@@ -5,8 +5,6 @@ import { useParams, usePathname, useRouter } from "next/navigation";
 import {
   AlignLeft,
   AlignRight,
-  AlignStartHorizontal,
-  AlignStartVertical,
   MoonStar,
   RotateCcw,
   Sun,
@@ -48,11 +46,10 @@ interface CustomizerProps {
 }
 
 const sidebarVariants: SidebarVariantType[] = ["sidebar", "floating", "inset"];
-const sidebarCollapsibleOptions: SidebarCollapsibleType[] = [
-  "offcanvas",
-  "icon",
-  "none",
-];
+// "none" (lock the sidebar expanded) is intentionally NOT offered: it makes the
+// header collapse-toggle a no-op, which reads as a broken/conflicting control.
+// Both remaining options work with that toggle — offcanvas hides, icon → rail.
+const sidebarCollapsibleOptions: SidebarCollapsibleType[] = ["offcanvas", "icon"];
 const densityOptions: DensityType[] = ["comfortable", "compact"];
 
 // Localized labels — the customizer follows the active URL locale (params.lang)
@@ -246,41 +243,14 @@ export function Customizer({ trigger, triggerClassName }: CustomizerProps) {
                     <SunMoon className="shrink-0 h-4 w-4" />
                   </Button>
                 </div>
-                <div className="space-y-1.5">
-                  <span className="text-sm">{t("layout")}</span>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Button
-                      variant={
-                        settings.layout === "horizontal"
-                          ? "secondary"
-                          : "outline"
-                      }
-                      onClick={() =>
-                        updateSettings({
-                          ...settings,
-                          layout: "horizontal",
-                        })
-                      }
-                    >
-                      <AlignStartHorizontal className="shrink-0 h-4 w-4 me-2" />
-                      {t("horizontal")}
-                    </Button>
-                    <Button
-                      variant={
-                        settings.layout === "vertical" ? "secondary" : "outline"
-                      }
-                      onClick={() =>
-                        updateSettings({
-                          ...settings,
-                          layout: "vertical",
-                        })
-                      }
-                    >
-                      <AlignStartVertical className="shrink-0 h-4 w-4 me-2" />
-                      {t("vertical")}
-                    </Button>
-                  </div>
-                </div>
+                {/* "Bố cục" (layout: horizontal/vertical) removed from the
+                    picker. The horizontal layout swaps the whole nav for a top
+                    menubar, which makes every sidebar option below ("Kiểu thanh
+                    bên", "Thu gọn thanh bên") a no-op — dead/conflicting
+                    controls. The apps here are designed around the vertical
+                    sidebar, so the customizer locks to it (defaultSettings.layout
+                    stays "vertical"; the HorizontalLayout code is untouched for
+                    anything that sets layout directly). */}
 
                 <div className="space-y-1.5">
                   <span className="text-sm">{t("sidebarVariant")}</span>

package/src/ui/layout/sidebar.tsx

@@ -185,11 +185,13 @@ export function AppSidebar({
     }
   };
 
-  // Enforce icon mode for Carbon style consistency if not set explicitly to offcanvas by some override (though we prefer icon)
-  const collapsibleMode =
-    settings.sidebarCollapsible === "offcanvas"
-      ? "icon"
-      : settings.sidebarCollapsible || "icon";
+  // Honour the Customizer's "Thu gọn thanh bên" choice as-is:
+  //   offcanvas → collapses fully off-screen (hidden), reopened via header toggle
+  //   icon      → collapses to an icon rail
+  //   none      → never collapses (always expanded)
+  // Previously offcanvas was force-remapped to icon, so "Ẩn ngoài" could never
+  // actually hide the sidebar (it behaved identically to "Biểu tượng").
+  const collapsibleMode = settings.sidebarCollapsible || "icon";
 
   return (
     <SidebarWrapper

package/src/ui/primitives/body-lock-guard.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+
+import { isBodyLocked, releaseStuckBodyLock } from "./body-lock";
+
+/**
+ * Lưới an toàn TOÀN CỤC cho "lỗi conflict event kinh điển" của Radix: sau khi mở rồi
+ * đóng dialog (đặc biệt khi mở từ DropdownMenu của hàng), `<body>` đôi khi còn sót
+ * `pointer-events: none` khiến cả trang không click được.
+ *
+ * Hai lớp phòng vệ, không phụ thuộc vào việc primitive nào quên gỡ khoá:
+ *
+ *  1. MutationObserver theo dõi `style` + `data-scroll-locked` trên `<body>`. Khi modal
+ *     unmount, RemoveScroll gỡ `data-scroll-locked` → tạo ra một mutation → ta kiểm tra
+ *     lại và gỡ nốt `pointer-events` còn sót. Nhờ vậy trang tự hồi phục ngay sau animation
+ *     đóng, KHÔNG cần người dùng click.
+ *
+ *  2. Bắt sự kiện ở pha capture trên `window` (pointerdown / keydown / focusin). Kể cả khi
+ *     `<body>` đang `pointer-events: none`, sự kiện vẫn tới được `<html>`/window ở pha
+ *     capture, nên lần tương tác kế tiếp luôn gỡ được khoá kẹt — không bao giờ kẹt vĩnh viễn.
+ *
+ * Mount MỘT lần ở tầng cao (vd trong CrudProvider) là đủ cho mọi trang CRUD.
+ */
+export function BodyLockGuard() {
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    let raf = 0;
+    const scheduleCheck = () => {
+      if (raf) cancelAnimationFrame(raf);
+      // rAF + macrotask: để Radix hoàn tất các thao tác đồng bộ của nó trước khi ta kiểm tra.
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        setTimeout(releaseStuckBodyLock, 0);
+      });
+    };
+
+    // (1) Quan sát thay đổi thuộc tính khoá trên <body>.
+    const observer = new MutationObserver(scheduleCheck);
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["style", "data-scroll-locked"],
+    });
+
+    // (2) Tự hồi phục ở lần tương tác kế tiếp (chỉ chạy khi đang thực sự bị khoá).
+    const onInteract = () => {
+      if (isBodyLocked()) releaseStuckBodyLock();
+    };
+    window.addEventListener("pointerdown", onInteract, true);
+    window.addEventListener("keydown", onInteract, true);
+    window.addEventListener("focusin", onInteract, true);
+
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      observer.disconnect();
+      window.removeEventListener("pointerdown", onInteract, true);
+      window.removeEventListener("keydown", onInteract, true);
+      window.removeEventListener("focusin", onInteract, true);
+    };
+  }, []);
+
+  return null;
+}

package/src/ui/primitives/body-lock.ts

@@ -0,0 +1,68 @@
+"use client";
+
+/**
+ * "Lỗi conflict event kinh điển": Radix (Dialog / AlertDialog / Sheet / DropdownMenu
+ * / Select / Popover) khoá `<body>` bằng `pointer-events: none` + `data-scroll-locked`
+ * khi mở, và gỡ khi đóng. Khi hai lớp chồng nhau (vd: bấm "Sửa" trong DropdownMenu để
+ * mở Dialog), bước gỡ đôi khi bị "đè", để sót khoá lại trên `<body>` → CẢ TRANG không
+ * click được sau khi đóng dialog.
+ *
+ * Helper này gỡ khoá MỘT CÁCH AN TOÀN: chỉ gỡ khi thực sự không còn modal nào đang mở.
+ * Tooltip (role="tooltip") cố tình bị loại trừ — tooltip không hề khoá body, nên một
+ * tooltip đang hiện KHÔNG được phép giữ khoá cũ tồn tại (đây là điểm yếu của bản cũ chỉ
+ * kiểm tra `[data-radix-popper-content-wrapper]`).
+ */
+
+// Modal đang THỰC SỰ mở (đang chặn tương tác). Loại trừ tooltip/hovercard.
+const OPEN_MODAL_SELECTOR =
+  '[role="dialog"][data-state="open"],' +
+  '[role="alertdialog"][data-state="open"],' +
+  '[role="menu"][data-state="open"],' +
+  '[role="listbox"][data-state="open"]';
+
+// Bất kỳ nội dung modal nào còn gắn trong DOM (kể cả đang chạy animation đóng,
+// data-state="closed"). RemoveScroll giữ `data-scroll-locked` cho tới khi unmount,
+// nên chỉ gỡ scroll-lock khi KHÔNG còn nội dung modal nào — tránh giật cuộn lúc đóng.
+const MOUNTED_MODAL_SELECTOR =
+  '[role="dialog"],[role="alertdialog"],[role="menu"],[role="listbox"]';
+
+/** `<body>` có đang bị khoá (pointer-events hoặc scroll-lock) không. */
+export function isBodyLocked(): boolean {
+  if (typeof document === "undefined") return false;
+  const body = document.body;
+  return (
+    body.style.pointerEvents === "none" ||
+    body.hasAttribute("data-scroll-locked")
+  );
+}
+
+/** Có modal nào đang thực sự mở không (để biết khoá hiện tại có hợp lệ). */
+export function hasOpenModal(): boolean {
+  if (typeof document === "undefined") return false;
+  return document.querySelector(OPEN_MODAL_SELECTOR) !== null;
+}
+
+/**
+ * Gỡ khoá `<body>` nếu nó đang bị kẹt (không còn modal mở). An toàn để gọi nhiều lần
+ * và ở bất kỳ thời điểm nào: nếu còn modal mở thì không làm gì.
+ */
+export function releaseStuckBodyLock(): void {
+  if (typeof document === "undefined") return;
+  const body = document.body;
+
+  if (!isBodyLocked()) return;
+  // Còn modal đang mở → khoá là hợp lệ, đừng đụng vào.
+  if (hasOpenModal()) return;
+
+  // pointer-events luôn an toàn để khôi phục một khi không còn gì đang mở.
+  if (body.style.pointerEvents === "none") {
+    body.style.pointerEvents = "";
+  }
+
+  // Scroll-lock: chỉ gỡ khi không còn nội dung modal nào trong DOM, để không phá
+  // dialog đang chạy animation đóng.
+  if (!document.querySelector(MOUNTED_MODAL_SELECTOR)) {
+    if (body.style.overflow === "hidden") body.style.overflow = "";
+    body.removeAttribute("data-scroll-locked");
+  }
+}