@goplusvn/core 0.1.11 → 0.1.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/crud/components/crud-card-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import type { ReactNode } from "react";
 import {
   getCoreRowModel,
   getPaginationRowModel,
@@ -9,7 +10,11 @@ import {
 
 import type { CrudPermissions, CrudResponse, EntityConfig } from "../../types";
 
-import { isFieldVisibleInTable, sortFieldsByOrder } from "../lib/crud-utils";
+import {
+  getRowDisplay,
+  isFieldVisibleInTable,
+  sortFieldsByOrder,
+} from "../lib/crud-utils";
 import { formatFieldValue } from "../lib/field-formatter";
 
 import { Badge } from "../../ui";
@@ -34,6 +39,7 @@ interface CrudCardViewProps<TData = Record<string, unknown>> {
     rowId: string,
     rowData: Record<string, unknown>,
   ) => void | Promise<void>;
+  onRowClick?: (rowId: string, rowData: Record<string, unknown>) => void;
   onEmptyStateAction?: {
     onCreate?: () => void;
     onClearSearch?: () => void;
@@ -49,6 +55,7 @@ export function CrudCardView<TData extends Record<string, unknown>>({
   onEdit,
   onDelete,
   onCustomAction,
+  onRowClick,
   onEmptyStateAction,
 }: CrudCardViewProps<TData>) {
   // ✅ All hooks must be called before any early returns
@@ -91,9 +98,12 @@ export function CrudCardView<TData extends Record<string, unknown>>({
   const primaryField = config.fields.find(
     (f) => f.name === config.displayField,
   );
-  const secondaryFields = visibleFields
-    .filter((f) => f.name !== config.displayField)
-    .slice(0, 3); // Show max 3 secondary fields
+  // Show EVERY table-visible field in the card (mirrors the table columns), not
+  // just a 3-field preview. The resolved title field is skipped per-row at render
+  // time to avoid duplicating it.
+  const secondaryFields = visibleFields.filter(
+    (f) => f.name !== config.displayField,
+  );
 
   if (loading) {
     return (
@@ -145,15 +155,37 @@ export function CrudCardView<TData extends Record<string, unknown>>({
         {data.data.map((row) => {
           const rowId = String(row[config.idField]);
           const isSelected = selectedRows.has(rowId);
-          const primaryValue = row[config.displayField];
-          const primaryLabel = primaryField?.label || config.displayField;
+          // Friendly title — falls back when displayField is the id field.
+          const display = getRowDisplay(config, row as Record<string, unknown>);
+          const primaryContent = display.field?.renderCell
+            ? (display.field.renderCell(display.value, row) as ReactNode)
+            : display.field
+              ? formatFieldValue(display.value, display.field) ||
+                String(display.value ?? "")
+              : String(display.value ?? "");
 
           return (
             <Card
               key={rowId}
               className={`transition-all duration-150 hover:shadow-md ${
                 isSelected ? "ring-2 ring-primary" : ""
-              }`}
+              } ${onRowClick ? "cursor-pointer" : ""}`}
+              onClick={
+                onRowClick
+                  ? (e) => {
+                      // Skip clicks on interactive controls (checkbox, actions menu)
+                      const target = e.target as HTMLElement;
+                      if (
+                        target.closest(
+                          'button, a, input, label, [role="checkbox"], [role="menuitem"], [data-no-row-click]',
+                        )
+                      ) {
+                        return;
+                      }
+                      onRowClick(rowId, row as Record<string, unknown>);
+                    }
+                  : undefined
+              }
             >
               <CardHeader className="pb-3">
                 <div className="flex items-start justify-between gap-2">
@@ -163,16 +195,12 @@ export function CrudCardView<TData extends Record<string, unknown>>({
                         checked={isSelected}
                         onCheckedChange={() => toggleRowSelection(rowId)}
                         className="mt-0.5 shrink-0"
-                        aria-label={`Select ${primaryValue}`}
+                        aria-label={`Select ${String(display.value ?? "")}`}
                       />
                     )}
                     <div className="flex-1 min-w-0">
                       <h3 className="font-semibold text-sm truncate">
-                        {primaryField?.renderCell
-                          ? (primaryField.renderCell(primaryValue, row) as any)
-                          : primaryField
-                            ? formatFieldValue(primaryValue, primaryField)
-                            : String(primaryValue ?? "")}
+                        {primaryContent}
                       </h3>
                       {primaryField?.description && (
                         <p className="text-xs text-muted-foreground mt-0.5">
@@ -199,6 +227,9 @@ export function CrudCardView<TData extends Record<string, unknown>>({
               <CardContent className="pt-0">
                 <div className="space-y-2">
                   {secondaryFields.map((field) => {
+                    // Skip the field already used as the card title (avoid dupes,
+                    // e.g. when displayField falls back to a name/code field).
+                    if (field.name === display.field?.name) return null;
                     const value = row[field.name];
                     if (value === null || value === undefined || value === "") {
                       return null;

package/src/crud/components/crud-detail-dialog.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+
+import type {
+  CrudPermissions,
+  DynamicIconNameType,
+  EntityConfig,
+  FieldConfig,
+} from "../../types";
+
+import {
+  Badge,
+  Button,
+  DialogClose,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+  ScrollArea,
+  StatusBadge,
+} from "../../ui";
+
+import {
+  getRowDisplay,
+  isFieldVisibleInDetail,
+  sortFieldsByOrder,
+} from "../lib/crud-utils";
+import { formatFieldValue } from "../lib/field-formatter";
+import { dataLoader } from "../lib/data-loader";
+
+interface CrudDetailDialogTranslations {
+  detail?: string;
+  edit?: string;
+  delete?: string;
+  close?: string;
+}
+
+interface CrudDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: EntityConfig;
+  data?: Record<string, unknown>;
+  permissions: CrudPermissions;
+  translations?: CrudDetailDialogTranslations;
+  onEdit?: (rowId: string, rowData: Record<string, unknown>) => void;
+  onDelete?: (rowId: string, rowData: Record<string, unknown>) => void;
+}
+
+/**
+ * Resolve a relation FK column's label from the relation object the server already
+ * included on the row (e.g. `branchId` → `row.branch.name`). Mirrors the same helper
+ * in `crud-table.tsx` so detail values match table cells exactly.
+ */
+function resolveIncludedRelationLabel(
+  field: { name?: string; dataSource?: { labelField?: string } },
+  row: Record<string, unknown> | undefined,
+): string | undefined {
+  const name = field?.name;
+  if (!field?.dataSource || !row || !name || !name.endsWith("Id")) {
+    return undefined;
+  }
+  const relationKey = name.slice(0, -2);
+  if (!relationKey) return undefined;
+  const rel = row[relationKey];
+  if (!rel || typeof rel !== "object" || Array.isArray(rel)) return undefined;
+  const labelField = field.dataSource.labelField || "name";
+  const label = (rel as Record<string, unknown>)[labelField];
+  return label != null && label !== "" ? String(label) : undefined;
+}
+
+type OptionsMap = Map<
+  string,
+  Array<{ label: string; value: string | number | boolean }>
+>;
+
+/**
+ * Render a single field's value read-only, mirroring the table cell logic so the
+ * detail view stays consistent with the list. Note `renderCell` is only available
+ * on the non-serialized (client-config) path; through `EntityCrudPage` it is
+ * stripped, so the dataSource / relation / formatter fallbacks carry the load.
+ */
+function renderFieldValue(
+  field: FieldConfig,
+  row: Record<string, unknown>,
+  options: OptionsMap,
+): ReactNode {
+  const value = row[field.name];
+
+  if (field.renderCell) {
+    return field.renderCell(value, row) as ReactNode;
+  }
+
+  const isEmpty =
+    value === null ||
+    value === undefined ||
+    value === "" ||
+    (Array.isArray(value) && value.length === 0);
+
+  if (field.type === "switch" || field.type === "boolean") {
+    if (typeof value === "boolean" && !field.options) {
+      return (
+        <StatusBadge
+          status={value ? "active" : "inactive"}
+          label={value ? "Có" : "Không"}
+        />
+      );
+    }
+    const option = field.options?.find((opt) => {
+      const optValue = typeof opt === "object" ? opt.value : opt;
+      return optValue === value;
+    });
+    const label =
+      (typeof option === "object" ? option.label : option) ?? String(value);
+    if (isEmpty) return <span className="text-muted-foreground">—</span>;
+    return <StatusBadge status={value} label={String(label)} />;
+  }
+
+  if (isEmpty) {
+    return <span className="text-muted-foreground">—</span>;
+  }
+
+  if (
+    field.dataSource &&
+    (field.type === "select" || field.type === "multiselect")
+  ) {
+    const loaded = options.get(field.name) || [];
+    if (field.type === "multiselect" && Array.isArray(value)) {
+      const labels = value.map((val) => {
+        const opt = loaded.find((o) => String(o.value) === String(val));
+        return opt ? opt.label : String(val);
+      });
+      return (
+        <div className="flex flex-wrap gap-1">
+          {labels.map((l, i) => (
+            <Badge key={`${l}-${i}`} variant="secondary" className="font-normal">
+              {l}
+            </Badge>
+          ))}
+        </div>
+      );
+    }
+    const opt = loaded.find((o) => String(o.value) === String(value));
+    return (
+      opt?.label ??
+      resolveIncludedRelationLabel(field, row) ??
+      formatFieldValue(value, field)
+    );
+  }
+
+  if (field.type === "image" && typeof value === "string") {
+    // eslint-disable-next-line @next/next/no-img-element
+    return (
+      <img
+        src={value}
+        alt={field.label}
+        className="h-16 w-16 rounded-md border border-border object-cover"
+      />
+    );
+  }
+
+  if (field.type === "url" && typeof value === "string") {
+    return (
+      <a
+        href={value}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-primary underline-offset-2 hover:underline break-all"
+      >
+        {value}
+      </a>
+    );
+  }
+
+  if (field.type === "email" && typeof value === "string") {
+    return (
+      <a
+        href={`mailto:${value}`}
+        className="text-primary underline-offset-2 hover:underline break-all"
+      >
+        {value}
+      </a>
+    );
+  }
+
+  if (field.type === "textarea" || field.type === "json") {
+    const text =
+      field.type === "json" && typeof value === "object"
+        ? JSON.stringify(value, null, 2)
+        : formatFieldValue(value, field) || String(value);
+    return (
+      <span className="whitespace-pre-wrap break-words">{text}</span>
+    );
+  }
+
+  return formatFieldValue(value, field) || String(value);
+}
+
+export function CrudDetailDialog({
+  open,
+  onOpenChange,
+  config,
+  data,
+  permissions,
+  translations,
+  onEdit,
+  onDelete,
+}: CrudDetailDialogProps) {
+  // Load options for select/multiselect fields (same source as the table) so
+  // relation/enum values resolve to labels instead of raw ids.
+  const [dataSourceOptions, setDataSourceOptions] = useState<OptionsMap>(
+    new Map(),
+  );
+
+  useEffect(() => {
+    if (!config || !open) return;
+
+    const fieldsWithDataSource = config.fields.filter(
+      (field) =>
+        field.dataSource &&
+        (field.type === "select" || field.type === "multiselect"),
+    );
+    if (fieldsWithDataSource.length === 0) return;
+
+    let cancelled = false;
+    (async () => {
+      const optionsMap: OptionsMap = new Map();
+      await Promise.all(
+        fieldsWithDataSource.map(async (field) => {
+          if (!field.dataSource) return;
+          try {
+            const opts = await dataLoader.loadOptions(field.dataSource);
+            optionsMap.set(field.name, opts);
+          } catch (error) {
+            console.error(`Failed to load options for ${field.name}:`, error);
+            optionsMap.set(field.name, []);
+          }
+        }),
+      );
+      if (!cancelled) setDataSourceOptions(optionsMap);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [config, open]);
+
+  const fields = useMemo(
+    () =>
+      sortFieldsByOrder(config.fields).filter((f) =>
+        isFieldVisibleInDetail(f, config),
+      ),
+    [config],
+  );
+
+  const rowId = data ? String(data[config.idField]) : "";
+  // Resolve a friendly title (falls back when displayField is the id field).
+  const display = data ? getRowDisplay(config, data) : undefined;
+  const title = display
+    ? display.field
+      ? formatFieldValue(display.value, display.field) || String(display.value)
+      : String(display.value)
+    : config.label;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
+      <DialogContent className="max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0 gap-0">
+        {/* Header */}
+        <DialogHeader className="bg-background border-b px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 text-left space-y-0 shrink-0">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+            {config.iconName && (
+              <div className="p-1.5 rounded-lg bg-primary/10 shrink-0">
+                <DynamicIcon
+                  name={config.iconName as DynamicIconNameType}
+                  className="h-4 w-4 sm:h-5 sm:w-5 text-primary"
+                />
+              </div>
+            )}
+            <div className="min-w-0 flex-1">
+              <DialogTitle className="text-lg sm:text-xl font-bold truncate">
+                {title}
+              </DialogTitle>
+              <DialogDescription className="mt-0.5 text-xs text-muted-foreground">
+                {translations?.detail || "Chi tiết"} · {config.label}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Body */}
+        <ScrollArea className="flex-1 min-h-0">
+          {data ? (
+            <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4 px-4 sm:px-6 py-4">
+              {fields.map((field) => {
+                const spanFull =
+                  field.fullWidth ||
+                  field.type === "textarea" ||
+                  field.type === "json" ||
+                  field.type === "image";
+                return (
+                  <div
+                    key={field.name}
+                    className={`min-w-0 ${spanFull ? "sm:col-span-2" : ""}`}
+                  >
+                    <dt className="text-xs font-medium text-muted-foreground mb-1">
+                      {field.label}
+                    </dt>
+                    <dd className="text-sm text-foreground break-words">
+                      {renderFieldValue(field, data, dataSourceOptions)}
+                    </dd>
+                  </div>
+                );
+              })}
+            </dl>
+          ) : (
+            <div className="px-6 py-10 text-center text-sm text-muted-foreground">
+              —
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer actions */}
+        <DialogFooter className="border-t bg-background px-4 sm:px-6 py-3 shrink-0 flex-row justify-end gap-2 sm:gap-2">
+          {permissions.delete && data && onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive mr-auto"
+              onClick={() => onDelete(rowId, data)}
+            >
+              <Trash2 className="mr-1.5 h-4 w-4" />
+              {translations?.delete || "Xóa"}
+            </Button>
+          )}
+          <DialogClose asChild>
+            <Button variant="outline" size="sm">
+              {translations?.close || "Đóng"}
+            </Button>
+          </DialogClose>
+          {permissions.update && data && onEdit && (
+            <Button size="sm" onClick={() => onEdit(rowId, data)}>
+              <Pencil className="mr-1.5 h-4 w-4" />
+              {translations?.edit || "Sửa"}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

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

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

@@ -591,8 +591,8 @@ const CrudFormComponent = forwardRef<HTMLFormElement, CrudFormProps>(
             </div>
           )}
 
-          {/* Form Actions */}
-          <div className="flex items-center justify-between gap-2 pt-4 border-t sticky bottom-0 bg-background -mx-4 sm:-mx-6 px-4 sm:px-6 pb-0">
+          {/* Form Actions — flush footer bar pinned to the bottom */}
+          <div className="flex items-center justify-between gap-2 border-t sticky bottom-0 bg-background -mx-4 sm:-mx-6 px-4 sm:px-6 py-3">
             {/* Draft indicator on left */}
             {hasDraft && mode === "create" && enableAutoSave && (
               <Badge variant="secondary" className="text-xs">

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

package/src/ui/primitives/client.ts

@@ -21,6 +21,8 @@ export * from "./sticky-layout";
 export * from "./prefetch-link";
 export * from "./dynamic-icon";
 export * from "./input-number";
+export * from "./body-lock-guard";
+export * from "./body-lock";
 
 // Feedback Client Components
 export * from "../feedback/sheet";

package/src/ui/primitives/use-release-stuck-body-lock.ts

@@ -2,28 +2,21 @@
 
 import * as React from "react";
 
+import { releaseStuckBodyLock } from "./body-lock";
+
 /**
- * Lưới an toàn cho "lỗi conflict event kinh điển": Radix (Dialog/AlertDialog/Sheet
- * + Select/Combobox/Popover lồng bên trong) đôi khi để sót `pointer-events: none`
- * / scroll-lock trên <body> sau khi đóng, khiến TOÀN trang không click được.
+ * Gọi trong *Content của mỗi primitive overlay (Dialog/Sheet/AlertDialog…). Content chỉ
+ * mount khi overlay mở; khi nó unmount (đã đóng) ta gỡ khoá body NẾU còn sót — nhưng chỉ
+ * khi không còn modal nào đang mở (xem {@link releaseStuckBodyLock}).
  *
- * Gọi hook này trong *Content của mỗi primitive overlay. Content chỉ mount khi
- * overlay mở; khi nó unmount (đã đóng) ta gỡ khoá — nhưng CHỈ khi không còn lớp
- * dialog/popover nào đang mở, để không phá modal khác đang chồng lên.
+ * Đây là lớp gỡ khoá TỨC THÌ tại thời điểm đóng; {@link BodyLockGuard} là lưới an toàn
+ * toàn cục bao quát các trường hợp còn lại.
  */
 export function useReleaseStuckBodyLock() {
   React.useEffect(() => {
     return () => {
-      setTimeout(() => {
-        const hasOpenLayer = document.querySelector(
-          '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"], [data-radix-popper-content-wrapper]',
-        );
-        if (!hasOpenLayer && document.body.style.pointerEvents === "none") {
-          document.body.style.pointerEvents = "";
-          document.body.style.overflow = "";
-          document.body.removeAttribute("data-scroll-locked");
-        }
-      }, 0);
+      // Đợi một nhịp để Radix chạy xong phần dọn dẹp đồng bộ của nó trước.
+      setTimeout(releaseStuckBodyLock, 0);
     };
   }, []);
 }