@goplusvn/core 0.1.83 → 0.1.84

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.83",
+  "version": "0.1.84",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -110,6 +110,7 @@
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "sonner": "^2.0.0",
     "vitest": ">=2"
   },
   "devDependencies": {
@@ -134,6 +135,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "16.5.0",
     "jsdom": "^27.2.0",
+    "sonner": "2.0.2",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.50.1",
@@ -206,7 +208,6 @@
     "react-use": "17.5.1",
     "recharts": "^2.15.1",
     "shiki": "3.2.1",
-    "sonner": "2.0.2",
     "swr": "^2.3.6",
     "tailwind-merge": "2.5.2",
     "vaul": "1.1.2",

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

@@ -46,10 +46,18 @@ function resolveIncludedRelationLabel(
   row: Record<string, unknown> | undefined,
 ): string | undefined {
   const name = field?.name;
-  if (!field?.dataSource || !row || !name || !name.endsWith("Id")) {
+  if (!field?.dataSource || !row || !name) {
     return undefined;
   }
-  const relationKey = name.slice(0, -2);
+  let relationKey = "";
+  if (name.endsWith("Id")) {
+    relationKey = name.slice(0, -2);
+  } else if (name.endsWith("_id")) {
+    relationKey = name.slice(0, -3);
+  } else {
+    return undefined;
+  }
+
   if (!relationKey) return undefined;
   const rel = row[relationKey];
   if (!rel || typeof rel !== "object" || Array.isArray(rel)) return undefined;

package/src/hooks/index.tsx

@@ -147,6 +147,25 @@ export function useMobile(): boolean {
   return useMediaQuery("(max-width: 768px)");
 }
 
+/**
+ * Mốc "màn hình hẹp" RIÊNG cho sidebar — cố ý KHÁC `useMobile()`.
+ *
+ * Sidebar desktop hiện từ `lg:` (≥1024px). Nếu hook quyết định off-canvas lại
+ * dùng mốc 768px thì sinh ra hai lỗi:
+ *   1. Vùng chết 769–1023px (iPad dọc 820, iPad Pro 11" 834, Surface 912):
+ *      sidebar desktop đã render nhưng KHÔNG nút nào thu gọn được nó — nút
+ *      `SidebarTrigger` là `lg:` còn `ToggleMobileSidebar` chỉ hiện khi hẹp.
+ *      Sidebar 16rem ăn cứng 256px của một màn ~800px.
+ *   2. Đúng 768px (iPad Mini dọc) thì `max-width:768px` VÀ `min-width:768px`
+ *      cùng đúng ⇒ Sheet mobile và sidebar desktop mount CÙNG LÚC, đè lên nhau.
+ *
+ * Dùng 1023.98px để khớp đúng biên `lg:` của Tailwind và tránh off-by-one.
+ * `useMobile()` giữ nguyên 768px — đã là API công khai, app khác đang dựa vào.
+ */
+export function useSidebarMobile(): boolean {
+  return useMediaQuery("(max-width: 1023.98px)");
+}
+
 // ============================================================================
 // Clipboard Hook
 // ============================================================================

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-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-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",
+          // 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",
           className,
         )}
         {...props}

package/src/ui/feedback/sonner.tsx

@@ -1,5 +1,18 @@
 "use client";
 
+/**
+ * `sonner` là PEER dependency của core, cố ý — không phải `dependencies`.
+ *
+ * `toast()` đẩy vào một store cấp module, còn `<Toaster>` đọc chính store đó.
+ * Nếu core tự mang theo bản sonner riêng thì app và core có thể nạp HAI bản
+ * khác nhau ⇒ hai store ⇒ `toast()` gọi bên app không bao giờ tới `<Toaster>`
+ * dựng bởi core: không nổ lỗi, chỉ im lặng không hiện gì. Đúng cảnh đã gặp khi
+ * consumer chạy `pnpm core:link` (checkout core mang node_modules riêng).
+ *
+ * Để peer thì bản sonner LUÔN là bản của app — một store duy nhất, kể cả khi
+ * link. Cả ba app đang dùng (vinhhoa, thingtodo, tanloc-spartronics) đều đã tự
+ * khai `sonner` trong dependencies nên đây là thay đổi không phá vỡ ai.
+ */
 import { Toaster as Sonner } from "sonner";
 
 import type { ComponentProps } from "react";

package/src/ui/layout/page-tabs.tsx

@@ -167,7 +167,17 @@ export function PageTabs({
 
   return (
     <div className={cn("w-full", variant === "header" && "py-0", className)}>
-      <ScrollArea className={cn("w-full", variant === "header" && "h-8")}>
+      {/* orientation="horizontal": ScrollBar mặc định là "vertical" nên dải tab
+          cuộn được bằng cảm ứng nhưng trên desktop KHÔNG có thanh cuộn nào —
+          người dùng tưởng các tab bị cắt mất. Bar bóp còn 6px để không đè
+          lên chữ trong biến thể header cao 32px. */}
+      <ScrollArea
+        orientation="horizontal"
+        className={cn(
+          "w-full [&_[data-slot=scroll-area-scrollbar]]:h-1.5",
+          variant === "header" && "h-8",
+        )}
+      >
         <div
           className={cn(
             "flex items-end gap-0 px-2 py-0.5",

package/src/ui/layout/user-dropdown.tsx

@@ -26,12 +26,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../primitives/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../primitives/client";
 
 interface ExtendedUser {
   id: string;
@@ -86,34 +80,26 @@ export function UserDropdown({
 
   return (
     <DropdownMenu>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
-                aria-label="User"
-              >
-                <Avatar className="size-6">
-                  <AvatarImage
-                    src={user?.avatar || undefined}
-                    alt={user?.name || ""}
-                    className="object-cover"
-                  />
-                  <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
-                    {user?.name && getInitials(user.name)}
-                  </AvatarFallback>
-                </Avatar>
-              </Button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Profile</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
+          aria-label="User"
+          title="Profile"
+        >
+          <Avatar className="size-6">
+            <AvatarImage
+              src={user?.avatar || undefined}
+              alt={user?.name || ""}
+              className="object-cover"
+            />
+            <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
+              {user?.name && getInitials(user.name)}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
 
       <DropdownMenuContent
         className="w-56 p-1 bg-background/80 backdrop-blur-xl border border-border/40 shadow-xl rounded-xl animate-in fade-in zoom-in-95 duration-200"

package/src/ui/layout/vertical-layout-header.tsx

@@ -28,7 +28,11 @@ export function VerticalLayoutHeader({
 
   return (
     <header className="sticky top-0 z-50 w-full bg-background/95 border-b border-border/50 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-      <div className="container flex h-11 justify-between items-center gap-0">
+      {/* KHÔNG dùng `container`: max-width của nó bám theo VIEWPORT, không theo
+          phần tử cha. Cha ở đây là SidebarInset = viewport − bề rộng sidebar, và
+          SidebarInset có `overflow-hidden`, nên ở 768–1024px hàng này rộng hơn
+          cha và cụm nút bên phải (chuông, customizer, user) bị cắt mất. */}
+      <div className="flex w-full h-11 justify-between items-center gap-1 px-2 sm:px-3">
         {/* Left: sidebar toggles */}
         <div className="flex items-center gap-2 flex-shrink-0">
           <ToggleMobileSidebar />
@@ -46,9 +50,12 @@ export function VerticalLayoutHeader({
 
         {/* Right: user actions */}
         <div className="flex items-center gap-2 flex-shrink-0">
-          <div className="hidden sm:flex items-center gap-2">
+          <div className="flex items-center gap-1 sm:gap-2">
             {notificationSlot ?? <NotificationDropdown dictionary={dictionary} />}
-            <FullScreenToggle />
+            {/* Toàn màn hình vô nghĩa trên thiết bị cảm ứng — ẩn dưới lg. */}
+            <span className="hidden lg:inline-flex">
+              <FullScreenToggle />
+            </span>
           </div>
           <Customizer
             trigger={

package/src/ui/layout/vertical-layout.tsx

@@ -37,12 +37,15 @@ export function VerticalLayout({
         searchResults={searchResults}
         searchLoading={searchLoading}
       />
-      <SidebarInset className="w-full min-w-0 overflow-hidden h-screen flex flex-col">
+      <SidebarInset className="w-full min-w-0 overflow-hidden h-dvh flex flex-col">
         <VerticalLayoutHeader
           dictionary={dictionary}
           notificationSlot={notificationSlot}
         />
-        <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4 overflow-auto">
+        {/* `h-dvh` ở SidebarInset (không phải `h-screen`): trên Safari/Chrome
+            mobile 100vh tính CẢ thanh URL co giãn, nên đáy trang — phân trang,
+            footer, nút Lưu — nằm khuất dưới thanh trình duyệt. */}
+        <main className="w-full mx-auto flex-1 min-h-0 px-3 sm:px-4 md:px-6 xl:px-8 py-3 md:py-4 overflow-auto">
           {children}
         </main>
         <Footer />

package/src/ui/primitives/dialog.tsx

@@ -40,7 +40,15 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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%] sm:rounded-lg",
+        "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",
+        // 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.
+        // Đây là mặc định: trang nào tự khai `max-h-*` / `overflow-*` thì
+        // 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",
         className,
       )}
       {...props}

package/src/ui/primitives/sidebar.tsx

@@ -6,7 +6,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 
-import { useMobile } from "../../hooks"; // Exported from core/hooks
+import { useSidebarMobile } from "../../hooks"; // Exported from core/hooks
 import { cn } from "../../utils";
 import { Button } from "./button";
 import { Sheet, SheetContent, SheetTitle } from "../feedback";
@@ -69,7 +69,10 @@ const SidebarProvider = React.forwardRef<
     },
     ref,
   ) => {
-    const isMobile = useMobile();
+    // Mốc sidebar là 1023.98px (khớp `lg:`), KHÔNG phải `useMobile()` 768px —
+    // xem chú thích ở useSidebarMobile: 768px để hở vùng chết tablet 769–1023px
+    // và làm hai sidebar cùng mount tại đúng 768px.
+    const isMobile = useSidebarMobile();
     const [openMobile, setOpenMobile] = React.useState(false);
     // Hover expand state
     const [hoverOpen, setHoverOpen] = React.useState(false);
@@ -266,7 +269,7 @@ const Sidebar = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "group peer hidden md:block transition-colors duration-200",
+          "group peer hidden lg:block transition-colors duration-200",
           // Blue bg + white text when collapsed, white bg + dark text when expanded/hover
           state === "collapsed" && !isHoverExpanded
             ? "text-sidebar-foreground"
@@ -294,7 +297,7 @@ const Sidebar = React.forwardRef<
         {/* Sidebar Content - expands on hover */}
         <div
           className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear lg:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -402,14 +405,14 @@ const SidebarInset = React.forwardRef<
         // Inset: content is a card floating with a uniform m-2 gap on ALL sides
         // (no ml-0 override) so there's a small gap between the sidebar and the
         // content/header instead of them touching.
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:shadow",
         // Floating: the content is full-bleed (no card), and its LEFT edge is
         // the side that meets the floating sidebar. Give it a small left gap
         // (ml-2) so it doesn't touch the sidebar, and round both left corners
         // (top-left clips the sticky header, bottom-left clips the footer via
         // overflow-hidden) so the content hugs the floating sidebar with soft
         // curves instead of hard 90° corners. Right edge stays flush.
-        "md:peer-data-[variant=floating]:ml-2 md:peer-data-[variant=floating]:rounded-l-xl",
+        "lg:peer-data-[variant=floating]:ml-2 lg:peer-data-[variant=floating]:rounded-l-xl",
         className,
       )}
       {...props}