npm - @goplusvn/core - Versions diffs - 0.1.10 → 0.1.12 - Mend

@goplusvn/core 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md +9 -0
package/package.json +1 -1
package/src/crud/components/crud-card-view.tsx +44 -13
package/src/crud/components/crud-detail-dialog.tsx +355 -0
package/src/crud/components/crud-dialog.tsx +2 -2
package/src/crud/components/crud-form.tsx +2 -2
package/src/crud/components/crud-page.tsx +80 -0
package/src/crud/components/crud-provider.tsx +3 -0
package/src/crud/components/crud-sheet.tsx +2 -2
package/src/crud/components/crud-table.tsx +12 -0
package/src/crud/components/index.tsx +1 -0
package/src/crud/lib/crud-utils.ts +81 -0
package/src/print/print-styles.tsx +5 -0
package/src/types/index.ts +14 -0
package/src/ui/data-display/data-table/data-table.tsx +18 -1
package/src/ui/feedback/index.tsx +2 -0
package/src/ui/primitives/body-lock-guard.tsx +64 -0
package/src/ui/primitives/body-lock.ts +68 -0
package/src/ui/primitives/client.ts +2 -0
package/src/ui/primitives/use-release-stuck-body-lock.ts +9 -16

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,14 @@
 # Changelog
+## 0.1.11 — print: force light colours on the print surface
+- **Fix faded print output in dark mode.** Print pages render under the app's
+  shared `<html class="dark">`, so the print surface inherited dark mode's light
+  `--foreground` and rendered as faded grey text on the white page (preview and
+  PDF alike). `PrintStyles` now pins `color: #000; color-scheme: light;` on
+  `.print-container, #print-content`, keeping every shared print template
+  black-on-white regardless of the active theme.
 ## 0.1.8 — branding wiring + auth/rbac unification + clean typecheck
 - **Single source for permission checks (security fix).** `@goerp/core/rbac`

package/package.json CHANGED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/print/print-styles.tsx CHANGED Viewed

@@ -71,6 +71,11 @@ export function PrintStyles({ pageSize = "A4" }: PrintStylesProps) {
         padding: 20px;
         font-family: "Times New Roman", serif;
         background: white;
+        /* Force light document colours so the page never inherits the app's
+           dark-mode foreground (which would render as faded grey text on the
+           white print surface). Both preview and @media print stay black-on-white. */
+        color: #000;
+        color-scheme: light;
       }
       /* Base layout */

package/src/types/index.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
     };
   }, []);
 }