@goplusvn/core 0.1.84 → 0.1.86

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 0.1.85 — Hộp thoại: gỡ bẫy class `sm:` khiến trang không ghi đè được
+
+Sửa lỗi giao diện do 0.1.84 gây ra. `DialogContent` đổi mặc định thành
+`p-4 sm:p-6` và `sm:max-w-lg`; `cn()` là `twMerge` mà twMerge **chỉ khử xung đột
+trong cùng một variant**, nên `sm:p-6` / `sm:max-w-lg` sống sót khi trang truyền
+`p-0` / `max-w-2xl`, rồi thắng ở ≥640px vì nằm trong media query.
+
+Hậu quả trên app đã nâng (thingtodo): mọi hộp thoại CRUD bị bóp từ 672px xuống
+512px, cộng thêm 24px padding thừa nên đường kẻ header/footer thụt vào không
+chạm mép, và nút X mặc định của Radix lộ ra (trước đó bị header sticky che).
+
+**Đổi**
+
+- `ui/primitives/dialog.tsx` — `p-4 sm:p-6` → `p-6`; `sm:max-w-lg` → `max-w-lg`;
+  bỏ `max-w-[calc(100%-2rem)]` thừa. Giữ nguyên phần chống tràn của 0.1.84
+  (`max-h-[calc(100dvh-2rem)]`, `overscroll-contain`, `w-[calc(100%-2rem)] sm:w-full`)
+  vì chúng không xung đột với class trang truyền vào.
+- `ui/feedback/index.tsx` — `AlertDialogContent` dính đúng bẫy đó, sửa y hệt.
+  LƯU Ý cho app đang dùng: hộp thoại khai `max-w-sm` / `max-w-md` **không**
+  prefix từ nay hẹp đúng như đã khai, thay vì bị `sm:max-w-lg` kéo lên 512px.
+- `crud/components/crud-dialog.tsx` — `formWidth` từng nội suy
+  `` max-w-${...} ``: Tailwind quét class TĨNH nên class đó không bao giờ được
+  sinh ra. Thay bằng bảng ánh xạ tĩnh. Thêm `w-full` (tràn viền trên điện thoại,
+  đi cùng `h-[100vh] rounded-none`) và ẩn tường minh nút X bằng
+  `[&>button.absolute]:hidden` — trước đây nó chỉ *vô tình* bị header che.
+  Đóng bằng "Huỷ" hoặc Esc; footer sticky nên "Huỷ" luôn thấy.
+- `crud/components/crud-detail-dialog.tsx` — thêm `w-full` cho nhất quán.
+
+**Quy tắc rút ra**: class mặc định trong primitive mà trang có thể muốn ghi đè
+thì PHẢI để dạng không prefix. Muốn khác nhau theo bề rộng màn hình thì đặt ở
+phía trang, đừng đặt ở mặc định.
+
+Đã dựng thật với `core:link`: vinhhoa (từ 0.1.78) và tanloc-spartronics
+(từ 0.1.83) `type-check` + `next build` đều xanh; không mất API công khai, không
+đòi cột/bảng DB mới.
+
 # Changelog
 
 ## 0.1.81 — Cây workspace kiểu explorer, xoá/khôi phục lộ ra, thêm thành viên bằng dialog

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.84",
+  "version": "0.1.86",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -269,7 +269,7 @@ export function CrudDetailDialog({
 
   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">
+      <DialogContent className="w-full 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">

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { CheckCircle2, Loader2 } from "lucide-react";
+import { cn } from "../../utils";
 
 import type { EntityConfig } from "../../types";
 
@@ -16,6 +17,22 @@ import { DynamicIcon } from "../../ui";
 import { CrudForm } from "./crud-form";
 import { useCrudConfig } from "./crud-context";
 
+// Tailwind quét class TĨNH — `max-w-${...}` sẽ KHÔNG được sinh ra, hộp thoại
+// mất luôn giới hạn bề rộng. Phải liệt kê nguyên chuỗi.
+const FORM_WIDTH_CLASS: Record<
+  NonNullable<EntityConfig["formWidth"]>,
+  string
+> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+};
+
 interface CrudDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -192,7 +209,16 @@ export function CrudDialog({
   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"
+        className={cn(
+          // `w-full` là CỐ Ý: ghi đè mặc định `w-[calc(100%-2rem)]` của
+          // DialogContent để hộp thoại tràn viền trên điện thoại (đi cùng
+          // h-[100vh] + rounded-none), desktop vẫn bị max-w-* chặn lại.
+          "w-full max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0",
+          // Header dính (sticky z-10, nền đục) che mất nút X mặc định của
+          // Radix — ẩn hẳn cho tường minh. Đóng bằng "Huỷ" hoặc Esc.
+          "[&>button.absolute]:hidden",
+          FORM_WIDTH_CLASS[config.formWidth ?? "2xl"],
+        )}
         onInteractOutside={(e) => {
           // Prevent closing dialog when submitting or clicking on Popover
           if (isSubmitting || showSuccess) {

package/src/crud/components/crud-field-renderer.tsx

@@ -484,9 +484,9 @@ export function CrudFieldRenderer({
           name={field.name}
           render={({ field: formField }) => (
             <FormItem>
-              {field.label && <FormLabel>{field.label}</FormLabel>}
+              {field.label && <FormLabel className="font-semibold">{field.label}</FormLabel>}
               <FormControl>
-                <div className="flex items-center gap-2 pt-2">
+                <div className="flex items-center h-10">
                   <Switch
                     checked={
                       field.type === "switch"

package/src/navigation/__tests__/navigation.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { buildNavigationForSession, filterNavigationTree } from "../index";
+
+import type { NavigationType, PermissionMap, Session } from "../../types";
+
+/**
+ * Menu mẫu: một mục xem thường và một mục CHỈ dành cho người có quyền nhập.
+ * Đúng hình dạng đã làm lộ lỗ hổng ở tanloc-spartronics (2026-08-20).
+ */
+const NAVIGATION: NavigationType[] = [
+  {
+    title: "Căn-tin",
+    items: [
+      {
+        title: "Đặt suất ăn",
+        iconName: "UtensilsCrossed",
+        href: "/ordering",
+        resource: "ordering",
+      },
+      {
+        title: "Nhập đăng ký",
+        iconName: "FileSpreadsheet",
+        href: "/ordering/import",
+        resource: "ordering",
+        action: "import",
+      },
+    ],
+  },
+];
+
+function sessionWith(permissionMap: PermissionMap): Session {
+  return { user: { id: "u1", roles: ["staff"], permissionMap } } as Session;
+}
+
+const titles = (nav: NavigationType[]) =>
+  nav.flatMap((group) => group.items.map((item) => item.title));
+
+describe("buildNavigationForSession", () => {
+  it("giấu mục khai action mà người dùng không có quyền đó", () => {
+    const nav = buildNavigationForSession(
+      NAVIGATION,
+      sessionWith({ ordering: ["view", "create"] }),
+    );
+
+    expect(titles(nav)).toEqual(["Đặt suất ăn"]);
+  });
+
+  it("hiện mục khai action khi người dùng có ĐÚNG action đó", () => {
+    const nav = buildNavigationForSession(
+      NAVIGATION,
+      sessionWith({ ordering: ["view", "import"] }),
+    );
+
+    expect(titles(nav)).toEqual(["Đặt suất ăn", "Nhập đăng ký"]);
+  });
+
+  it("có action nhưng không xem được resource thì rụng cả nhóm", () => {
+    const nav = buildNavigationForSession(
+      NAVIGATION,
+      sessionWith({ employees: ["view"] }),
+    );
+
+    expect(nav).toEqual([]);
+  });
+
+  it("admin thấy nguyên cây, không đụng tới action", () => {
+    const session = { user: { id: "u1", roles: ["admin"] } } as Session;
+
+    expect(buildNavigationForSession(NAVIGATION, session)).toEqual(NAVIGATION);
+  });
+
+  it("chưa đăng nhập ⇒ menu rỗng", () => {
+    expect(buildNavigationForSession(NAVIGATION, null)).toEqual([]);
+  });
+});
+
+describe("filterNavigationTree", () => {
+  it("không có `can` thì mục khai action bị ẩn kèm cảnh báo (fail-closed)", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const nav = filterNavigationTree(NAVIGATION, new Set(["ordering"]));
+
+    expect(titles(nav)).toEqual(["Đặt suất ăn"]);
+    expect(warn).toHaveBeenCalledOnce();
+    warn.mockRestore();
+  });
+
+  it("nhận `can` thì hỏi đúng cặp (resource, action)", () => {
+    const can = vi.fn(
+      (resource: string, action: string) =>
+        resource === "ordering" && action === "import",
+    );
+
+    const nav = filterNavigationTree(NAVIGATION, new Set(["ordering"]), {
+      can,
+    });
+
+    expect(titles(nav)).toEqual(["Đặt suất ăn", "Nhập đăng ký"]);
+    expect(can).toHaveBeenCalledExactlyOnceWith("ordering", "import");
+  });
+
+  it("mục lồng nhau cũng được kiểm theo action đã khai", () => {
+    const nested: NavigationType[] = [
+      {
+        title: "Căn-tin",
+        items: [
+          {
+            title: "Quản trị",
+            iconName: "Settings",
+            items: [
+              { title: "Thực đơn", href: "/menus", resource: "ordering" },
+              {
+                title: "Nhập đăng ký",
+                href: "/ordering/import",
+                resource: "ordering",
+                action: "import",
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const nav = filterNavigationTree(nested, new Set(["ordering"]), {
+      can: () => false,
+    });
+
+    expect(nav[0].items[0].items?.map((item) => item.title)).toEqual([
+      "Thực đơn",
+    ]);
+  });
+});

package/src/navigation/index.ts

@@ -2,7 +2,7 @@
 // Core navigation utilities for GoERP platform
 // Consolidated from packages/shared/navigation
 
-import { getAccessibleResources } from "../auth";
+import { checkPermission, getAccessibleResources } from "../auth";
 
 import type {
   NavigationType,
@@ -11,20 +11,72 @@ import type {
   Session,
 } from "../types";
 
+/**
+ * Cách kiểm MỘT cặp (resource, action) cho mục menu tự khai `action`.
+ *
+ * `accessibleCodes` chỉ là tập resource của ĐÚNG MỘT action (thường là "view"),
+ * nên tự nó không trả lời được câu "người này có `ordering:import` không".
+ * `buildNavigationForSession` tự dựng hàm này từ session; app gọi thẳng
+ * `filterNavigationTree` thì truyền vào.
+ */
+export interface NavigationFilterOptions {
+  can?: (resourceCode: string, actionCode: string) => boolean;
+}
+
+/**
+ * Một mục menu có được hiện không.
+ *
+ * Mục KHÔNG khai `resource` ⇒ công khai. Mục khai `resource` mà không khai
+ * `action` ⇒ so với `accessibleCodes` như trước nay.
+ *
+ * Mục khai `action` (vd `resource: "ordering", action: "import"`) phải kiểm
+ * ĐÚNG action đó: `accessibleCodes` dựng theo "view" nên mọi người xem được
+ * `ordering` sẽ thấy mục "Nhập đăng ký" rồi bấm vào bị cổng gác trang đá về
+ * trang chủ — đúng cái bẫy "menu hứa một đằng, trang trả lời một nẻo" mà
+ * `buildNavigationForSession` sinh ra để dẹp (tanloc-spartronics, 2026-08-20).
+ *
+ * Không có `can` thì FAIL-CLOSED kèm cảnh báo: ẩn một mục còn đỡ hơn mời người
+ * dùng bấm vào chỗ họ không có quyền, và cảnh báo giữ cho nó không im lặng —
+ * sidebar trắng trơn không lời giải thích là chế độ hỏng tệ nhất của app RBAC.
+ */
+function isItemVisible(
+  item: NavigationRootItem | NavigationNestedItem,
+  accessibleCodes: Set<string>,
+  options?: NavigationFilterOptions,
+): boolean {
+  if (!item.resource) return true;
+  if (!item.action) return accessibleCodes.has(item.resource);
+
+  if (!options?.can) {
+    console.warn(
+      `[goerp/navigation] Mục "${item.title}" khai action "${item.action}" ` +
+        `nhưng filterNavigationTree không nhận được \`options.can\` nên không ` +
+        `kiểm được — đã ẩn. Dùng buildNavigationForSession(navigation, session) ` +
+        `hoặc truyền { can } vào.`,
+    );
+    return false;
+  }
+
+  return options.can(item.resource, item.action);
+}
+
 /**
  * Filter navigation items based on permissions recursively
  */
 export function filterNavigationItems(
   items: NavigationRootItem[],
   accessibleCodes: Set<string>,
+  options?: NavigationFilterOptions,
 ): NavigationRootItem[];
 export function filterNavigationItems(
   items: NavigationNestedItem[],
   accessibleCodes: Set<string>,
+  options?: NavigationFilterOptions,
 ): NavigationNestedItem[];
 export function filterNavigationItems(
   items: NavigationRootItem[] | NavigationNestedItem[],
   accessibleCodes: Set<string>,
+  options?: NavigationFilterOptions,
 ): (NavigationRootItem | NavigationNestedItem)[] {
   return items.reduce<(NavigationRootItem | NavigationNestedItem)[]>(
     (acc, item) => {
@@ -34,9 +86,9 @@ export function filterNavigationItems(
         return acc;
       }
 
-      // Default Deny: If resource is defined AND resource is not accessible
-      // If resource is missing, we consider it public (as per comment below)
-      if (item.resource && !accessibleCodes.has(item.resource)) {
+      // Default Deny: mục khai resource mà không đạt quyền thì rụng. Mục khai
+      // thêm `action` được kiểm theo đúng action đó (xem isItemVisible).
+      if (!isItemVisible(item, accessibleCodes, options)) {
         return acc;
       }
 
@@ -45,6 +97,7 @@ export function filterNavigationItems(
         const filteredChildren = filterNavigationItems(
           item.items as (NavigationRootItem | NavigationNestedItem)[],
           accessibleCodes,
+          options,
         );
 
         // Only add parent if it has visible children
@@ -72,6 +125,7 @@ export function filterNavigationItems(
 export function filterNavigationTree(
   navigation: NavigationType[],
   accessibleCodes: Set<string>,
+  options?: NavigationFilterOptions,
 ): NavigationType[] {
   if (accessibleCodes.has("*")) {
     return navigation;
@@ -80,7 +134,11 @@ export function filterNavigationTree(
   const filteredNavigation: NavigationType[] = [];
 
   for (const group of navigation) {
-    const filteredItems = filterNavigationItems(group.items, accessibleCodes);
+    const filteredItems = filterNavigationItems(
+      group.items,
+      accessibleCodes,
+      options,
+    );
 
     if (filteredItems.length > 0) {
       filteredNavigation.push({
@@ -116,6 +174,10 @@ export function filterNavigationTree(
  *     thành sidebar trắng trơn không lời giải thích — chế độ hỏng tệ nhất của
  *     app RBAC: người dùng tưởng bị thu hồi quyền và đi báo lỗi sai chỗ. Cứ để
  *     lỗi nổi lên error boundary.
+ *  4. **Mục tự khai `action` được kiểm theo ĐÚNG action đó**, không theo mốc
+ *     chung ở (2). Ví dụ "Nhập đăng ký" (`resource: "ordering"`,
+ *     `action: "import"`) chỉ hiện với ai có `ordering:import`, dù cả phòng đều
+ *     có `ordering:view`.
  *
  * Core KHÔNG tự đọc session: app dùng better-auth, app dùng next-auth, và cách
  * lấy session là thứ duy nhất khác nhau thật giữa chúng. App truyền session vào
@@ -136,5 +198,8 @@ export function buildNavigationForSession(
   return filterNavigationTree(
     navigation,
     getAccessibleResources(session, options.action ?? "view"),
+    // Mục tự khai `action` được kiểm theo ĐÚNG action đó, không theo mốc chung
+    // ở trên: `accessibleCodes` chỉ là tập resource của một action duy nhất.
+    { can: (resource, action) => checkPermission(session, resource, action) },
   );
 }

package/src/types/index.ts

@@ -336,6 +336,7 @@ export interface EntityConfig {
   codeGeneration?: CodeGenerationConfig;
   formSections?: FormSection[];
   formMode?: FormModeConfig;
+  formWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
   rowActions?: RowAction[];
   include?: string[];
 }

package/src/ui/feedback/index.tsx

@@ -89,7 +89,10 @@ export function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%_-_2rem)] grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 w-[calc(100%_-_2rem)] sm:w-full grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-w-lg",
+          // KHÔNG để `sm:p-6` / `sm:max-w-lg` làm mặc định: twMerge chỉ khử xung
+          // đột trong cùng variant, nên trang truyền `p-0` / `max-w-sm` sẽ bị
+          // class `sm:` đè ngược ở ≥640px (đúng lỗi 0.1.84 của DialogContent).
           // Cùng lý do với DialogContent: bị neo giữa màn hình nên phải chặn
           // chiều cao, không thì mô tả dài sẽ tràn ra ngoài và không cuộn được.
           "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",

package/src/ui/primitives/dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         // Hộp thoại bị neo `top-1/2 -translate-y-1/2`, nên nếu KHÔNG chặn chiều
         // cao thì nội dung cao hơn màn hình sẽ tràn ra CẢ trên lẫn dưới và
         // không cuộn được — hỏng trên điện thoại và trên tablet xoay ngang.
@@ -48,7 +48,12 @@ const DialogContent = React.forwardRef<
         // class của trang đứng sau trong cn() nên vẫn thắng.
         "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",
         // Bề rộng: chừa 1rem mỗi bên trên màn hẹp thay vì dán sát mép.
-        "w-[calc(100%_-_2rem)] max-w-[calc(100%_-_2rem)] sm:w-full sm:max-w-lg",
+        // CẢNH BÁO (đã dính 0.1.84): mọi class mặc định ở đây mà trang có thể
+        // muốn ghi đè PHẢI để dạng KHÔNG prefix. `cn()` = twMerge chỉ khử xung
+        // đột trong CÙNG một variant — `sm:max-w-lg`/`sm:p-6` sẽ SỐNG SÓT khi
+        // trang truyền `max-w-2xl`/`p-0`, rồi thắng ở ≥640px vì nằm trong media
+        // query. Đó chính là lỗi bóp CrudDialog còn 512px + padding kép.
+        "w-[calc(100%_-_2rem)] sm:w-full max-w-lg",
         className,
       )}
       {...props}