@goplusvn/core 0.1.26 → 0.1.27

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.1.27 — Live permissions + MultiSelect hết tràn badge
+
+Cơ chế "phiên bản bộ quyền" (đúc từ vinhhoa): admin sửa vai trò/phân quyền →
+mọi user đang đăng nhập nhận quyền mới trong ≤60s (tức thì khi focus lại tab).
+- `@goerp/core/rbac/permissions-version`: `getPermissionsVersion(db)` /
+  `bumpPermissionsVersion(db)` — lưu SystemConfig key `rbac-permissions-version`,
+  schema-tolerant (thử cột audit createdBy/updatedAt/updatedBy → fallback tối
+  giản), best-effort không bao giờ throw.
+- Route-handlers factory TỰ bump sau POST/PUT/DELETE role; thêm
+  `createPermissionsVersionHandler({ prisma, getSession })` cho endpoint
+  GET /api/rbac/permissions-version.
+- `<PermissionsVersionWatcher />` (@goerp/core/ui): poll version + focus;
+  đổi → clear tab-content-cache + session.update() (jwt trigger="update" →
+  app forceRefresh quyền từ DB — vá cả đa instance vì cache in-memory
+  per-process) + router.refresh() + toast (tắt bằng silent).
+App cần: mount watcher trong providers, route dùng handler factory, và jwt
+callback xử lý trigger="update" bằng forceRefresh (vinhhoa đã có sẵn).
+
+MultiSelect (tham khảo sersavan/shadcn-multi-select-component):
+- Chip trên trigger WRAP xuống dòng mặc định khi chọn nhiều — trigger cao lên,
+  KHÔNG tràn ngang đè component bên cạnh; prop mới `singleLine` giữ 1 dòng
+  (chip co + cắt overflow) cho toolbar chật.
+- Dropdown TỰ MỞ LÊN TRÊN khi sát đáy viewport (trước luôn mở xuống → bị cắt).
+- Backspace khi ô tìm kiếm rỗng = bỏ chip cuối (chuẩn combobox).
+- Props mới: `closeOnSelect` (đóng sau mỗi lần chọn), `deduplicateOptions`
+  (lọc option trùng value), `chipColor: "colorful" | "neutral"` (chip trầm
+  secondary cho form nghiêm túc; mặc định giữ bảng màu xoay vòng).
+- Hardening: container `min-w-0 max-w-full`, trigger `overflow-hidden`,
+  chip max-w 8.5rem. Lưu ý chỗ dùng trong flex-row: ô bọc cần `min-w-0`.
+
 ## 0.1.26 — Bộ 3 trang RBAC redesign hoàn chỉnh (bar navy + thẻ + full width)
 
 Thiết kế duyệt qua preview vinhhoa, đồng bộ ngôn ngữ trang chi tiết đơn bán hàng:

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.26",
+  "version": "0.1.27",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -38,6 +38,7 @@
     "./styles/*": "./src/styles/*",
     "./auth/proxy-gate": "./src/auth/proxy-gate.ts",
     "./rbac/route-handlers": "./src/rbac/route-handlers.ts",
+    "./rbac/permissions-version": "./src/rbac/permissions-version.ts",
     "./ui/shared/table-styles": "./src/ui/shared/table-styles.ts",
     "./errors/app-error": "./src/errors/app-error.ts",
     "./errors/error-handler": "./src/errors/error-handler.ts",

package/src/rbac/index.ts

@@ -131,6 +131,7 @@ export {
   isAdmin,
 } from "../auth";
 
+export * from "./permissions-version";
 export * from "./permission-service";
 export * from "./role-service";
 export * from "./resource-service";

package/src/rbac/permissions-version.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// "Phiên bản bộ quyền" toàn hệ thống — lưu trong bảng SystemConfig của app
+// (DI prisma, schema-tolerant). Giải quyết bài toán: admin sửa vai trò/phân
+// quyền nhưng user đang đăng nhập không nhận quyền mới (session client không
+// refetch, tab-content-cache giữ UI cũ, cache quyền in-memory không lan qua
+// replica). Client mount <PermissionsVersionWatcher /> (từ @goerp/core/ui)
+// poll version; đổi → clear tab cache + session.update() (forceRefresh quyền
+// từ DB) + router.refresh() → quyền áp trong ≤ poll interval, không cần
+// re-login.
+//
+// Bump được gọi TỰ ĐỘNG trong route-handlers factory (POST/PUT/DELETE role);
+// app có route tự viết (vd vinhhoa) thì gọi bumpPermissionsVersion(db) ở mọi
+// điểm ghi RBAC (cập nhật/xóa vai trò, gán vai trò cho user).
+
+const DEFAULT_KEY = "rbac-permissions-version";
+
+export interface PermissionsVersionOptions {
+  /** SystemConfig key — mặc định "rbac-permissions-version". */
+  key?: string;
+  /** Giá trị ghi vào createdBy/updatedBy nếu schema SystemConfig yêu cầu. */
+  auditUser?: string;
+}
+
+export async function getPermissionsVersion(
+  db: any,
+  opts?: PermissionsVersionOptions,
+): Promise<string> {
+  const key = opts?.key ?? DEFAULT_KEY;
+  try {
+    const row = await db.systemConfig.findUnique({
+      where: { key },
+      select: { value: true },
+    });
+    return row?.value ?? "0";
+  } catch {
+    // App không có bảng systemConfig → coi như version tĩnh (watcher no-op)
+    return "0";
+  }
+}
+
+/**
+ * Bump version (best-effort, KHÔNG BAO GIỜ throw — không được làm fail
+ * request ghi RBAC chính). Schema-tolerant: thử create/update đầy đủ cột
+ * audit (createdBy/updatedAt/updatedBy — vd vinhhoa yêu cầu NOT NULL),
+ * thất bại thì thử bản tối giản (schema không có các cột đó).
+ */
+export async function bumpPermissionsVersion(
+  db: any,
+  opts?: PermissionsVersionOptions,
+): Promise<void> {
+  const key = opts?.key ?? DEFAULT_KEY;
+  const v = Date.now().toString();
+  const now = new Date();
+  const auditUser = opts?.auditUser ?? "system";
+  const description =
+    "Phiên bản bộ quyền RBAC — tự bump khi vai trò/phân quyền thay đổi để client đang đăng nhập tự làm mới session";
+
+  try {
+    await db.systemConfig.upsert({
+      where: { key },
+      update: { value: v, updatedAt: now, updatedBy: auditUser },
+      create: {
+        key,
+        value: v,
+        type: "string",
+        category: "rbac",
+        description,
+        createdBy: auditUser,
+        updatedAt: now,
+        updatedBy: auditUser,
+      },
+    });
+  } catch {
+    try {
+      await db.systemConfig.upsert({
+        where: { key },
+        update: { value: v },
+        create: { key, value: v },
+      });
+    } catch (e) {
+      console.warn("[rbac] bumpPermissionsVersion failed (bỏ qua):", e);
+    }
+  }
+}

package/src/rbac/route-handlers.ts

@@ -14,6 +14,10 @@
 //   });
 
 import { getRolesData, type RoleServiceSchema } from "./role-service";
+import {
+  bumpPermissionsVersion,
+  getPermissionsVersion,
+} from "./permissions-version";
 
 type MaybePromise<T> = T | Promise<T>;
 
@@ -88,6 +92,7 @@ export function createRolesCollectionHandlers(deps: RbacHandlerDeps) {
         await writePermissions(tx, created.code, permissions);
         return created;
       });
+      await bumpPermissionsVersion(prisma);
       return json({ id: role.id, code: role.code, name: role.name }, 201);
     } catch (e) {
       return fail(e, req);
@@ -151,6 +156,8 @@ export function createRoleItemHandlers(deps: RbacHandlerDeps) {
         await writePermissions(tx, updated.code, permissions);
         return updated;
       });
+      // Báo hiệu client đang đăng nhập tự refresh quyền (watcher poll version)
+      await bumpPermissionsVersion(prisma);
       return json({ id: role.id, code: role.code, name: role.name });
     } catch (e) {
       return fail(e, req);
@@ -172,6 +179,7 @@ export function createRoleItemHandlers(deps: RbacHandlerDeps) {
         await tx.rolePermission.deleteMany({ where: { roleCode: role.code } });
         await tx.role.delete({ where: { id } });
       });
+      await bumpPermissionsVersion(prisma);
       return new Response(null, { status: 204 });
     } catch (e) {
       return fail(e, req);
@@ -180,3 +188,26 @@ export function createRoleItemHandlers(deps: RbacHandlerDeps) {
 
   return { GET, PUT, DELETE };
 }
+
+// GET /api/rbac/permissions-version — client watcher poll; chỉ cần đăng nhập.
+export function createPermissionsVersionHandler(deps: {
+  prisma: any;
+  getSession: () => MaybePromise<any | null>;
+}) {
+  const { prisma, getSession } = deps;
+
+  async function GET() {
+    const session = await getSession();
+    if (!session?.user?.id) return json({ error: "Unauthorized" }, 401);
+    const v = await getPermissionsVersion(prisma);
+    return new Response(JSON.stringify({ v }), {
+      status: 200,
+      headers: {
+        "content-type": "application/json",
+        "cache-control": "no-store",
+      },
+    });
+  }
+
+  return { GET };
+}

package/src/ui/forms/multi-select.tsx

@@ -46,6 +46,21 @@ interface MultiSelectProps {
    * (thứ tự đóng băng trong lúc mở — toggle không làm nhảy vị trí).
    */
   selectedFirst?: boolean;
+  /**
+   * Mặc định chip WRAP xuống dòng khi chọn nhiều (trigger cao lên, không tràn
+   * ngang — theo pattern sersavan/shadcn-multi-select-component). Đặt true để
+   * giữ 1 dòng cố định: chip co + cắt bằng overflow (hợp cho toolbar chật).
+   */
+  singleLine?: boolean;
+  /** Đóng dropdown ngay sau mỗi lần chọn (mặc định giữ mở để chọn tiếp). */
+  closeOnSelect?: boolean;
+  /** Loại bỏ option trùng value (giữ option đầu tiên). */
+  deduplicateOptions?: boolean;
+  /**
+   * Màu chip trên trigger: "colorful" (xoay vòng bảng màu — mặc định) hoặc
+   * "neutral" (secondary trầm, hợp form/report nghiêm túc).
+   */
+  chipColor?: "colorful" | "neutral";
   /**
    * Async mode: nạp options từ server theo từ khoá tìm kiếm (debounce 300ms).
    * Khi truyền prop này, `options` chỉ dùng làm nguồn label ban đầu (có thể []),
@@ -164,6 +179,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       disabled = false,
       responsive = false,
       selectedFirst = false,
+      singleLine = false,
+      closeOnSelect = false,
+      deduplicateOptions = false,
+      chipColor = "colorful",
       loadOptions,
       loadingText = "Đang tải...",
       className,
@@ -175,6 +194,8 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const [internalValue, setInternalValue] =
       useState<OptionValue[]>(defaultValue);
     const [open, setOpen] = useState(false);
+    // Mở lên trên khi sát đáy viewport (dropdown ~360px bị cắt nếu luôn mở xuống)
+    const [dropUp, setDropUp] = useState(false);
     const [searchValue, setSearchValue] = useState("");
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     // Snapshot selection tại thời điểm MỞ dropdown (cho selectedFirst)
@@ -317,14 +338,27 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     // Nguồn danh sách hiển thị (selectedFirst: đóng băng thứ tự theo snapshot lúc mở)
     const sourceOptions = useMemo(() => {
-      if (hasAsync) return remoteOptions ?? [];
-      if (!selectedFirst) return options;
+      let base = hasAsync ? (remoteOptions ?? []) : options;
+      if (deduplicateOptions) {
+        const seen = new Set<OptionValue>();
+        base = base.filter((o) =>
+          seen.has(o.value) ? false : (seen.add(o.value), true),
+        );
+      }
+      if (hasAsync || !selectedFirst) return base;
       const snap = new Set(openSnapshot);
       const sel: MultiSelectOption[] = [];
       const unsel: MultiSelectOption[] = [];
-      for (const o of options) (snap.has(o.value) ? sel : unsel).push(o);
+      for (const o of base) (snap.has(o.value) ? sel : unsel).push(o);
       return [...sel, ...unsel];
-    }, [options, hasAsync, remoteOptions, selectedFirst, openSnapshot]);
+    }, [
+      options,
+      hasAsync,
+      remoteOptions,
+      selectedFirst,
+      openSnapshot,
+      deduplicateOptions,
+    ]);
 
     // Filter options based on search value (async: server đã lọc)
     const filteredOptions = useMemo(() => {
@@ -483,8 +517,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           ? value.filter((v) => v !== optionValue)
           : [...value, optionValue];
         updateValue(newValue);
+        if (closeOnSelect) setOpen(false);
       },
-      [value, filteredOptions, updateValue],
+      [value, filteredOptions, updateValue, closeOnSelect],
     );
 
     const moveHighlight = useCallback(
@@ -578,7 +613,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     );
 
     return (
-      <div ref={containerRef} className="relative w-full">
+      <div ref={containerRef} className="relative w-full min-w-0 max-w-full">
         {/* Screen Reader Live Regions */}
         <div className="sr-only">
           <div aria-live="polite" aria-atomic="true" role="status">
@@ -597,18 +632,30 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           aria-expanded={open}
           disabled={disabled}
           className={cn(
-            "w-full justify-between h-auto min-h-9 px-3 py-1.5",
+            "w-full max-w-full justify-between overflow-hidden h-auto min-h-9 px-3 py-1.5",
             responsiveSettings.compactMode && "min-h-8 text-sm",
             className,
           )}
           id={id}
           onClick={(e) => {
             e.stopPropagation();
-            if (!open && selectedFirst) setOpenSnapshot([...value]);
+            if (!open) {
+              if (selectedFirst) setOpenSnapshot([...value]);
+              const rect = containerRef.current?.getBoundingClientRect();
+              if (rect) {
+                const spaceBelow = window.innerHeight - rect.bottom;
+                setDropUp(spaceBelow < 360 && rect.top > spaceBelow);
+              }
+            }
             setOpen(!open);
           }}
         >
-          <div className="flex min-w-0 flex-nowrap items-center gap-1 overflow-hidden">
+          <div
+            className={cn(
+              "flex min-w-0 max-w-full items-center gap-1",
+              singleLine ? "flex-nowrap overflow-hidden" : "flex-wrap",
+            )}
+          >
             {value.length === 0 ? (
               <span className="text-muted-foreground">{placeholder}</span>
             ) : isAllSelected ? (
@@ -625,8 +672,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     key={String(opt.value)}
                     variant="secondary"
                     className={cn(
-                      "min-w-0 max-w-[150px] shrink gap-1 pr-1 font-normal",
-                      CHIP_COLORS[chipIndex % CHIP_COLORS.length],
+                      "min-w-0 max-w-[8.5rem] shrink gap-1 pr-1 font-normal",
+                      chipColor === "neutral"
+                        ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
+                        : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
                     )}
                   >
                     <span className="truncate">{opt.label}</span>
@@ -681,11 +730,12 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         {open && (
           <div
             ref={dropdownRef}
-            className="absolute z-[100] mt-1 w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
-            style={{
-              top: "100%",
-              left: 0,
-            }}
+            className={cn(
+              "absolute left-0 z-[100] w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95",
+              dropUp
+                ? "bottom-full mb-1 slide-in-from-bottom-1"
+                : "top-full mt-1 slide-in-from-top-1",
+            )}
           >
             <div className="flex flex-col">
               {/* Search Input */}
@@ -719,6 +769,14 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       e.preventDefault();
                       const opt = filteredOptions[highlightedIndex];
                       if (opt && !opt.disabled) handleSelect(opt.value);
+                    } else if (
+                      e.key === "Backspace" &&
+                      searchValue === "" &&
+                      value.length > 0
+                    ) {
+                      // Chuẩn combobox: Backspace khi search rỗng = bỏ chip cuối
+                      e.preventDefault();
+                      updateValue(value.slice(0, -1));
                     }
                   }}
                   onClick={(e) => {

package/src/ui/shared/index.ts

@@ -7,3 +7,4 @@ export * from "./table-styles";
 export * from "./confirm-dialog";
 export * from "./stat-bar";
 export * from "./list-toolbar";
+export * from "./permissions-version-watcher";

package/src/ui/shared/permissions-version-watcher.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+// Theo dõi "phiên bản bộ quyền" (xem @goerp/core/rbac/permissions-version).
+// Mount 1 lần trong providers của app (BÊN TRONG SessionProvider +
+// TabContentCacheProvider):
+//
+//   <PermissionsVersionWatcher />
+//
+// Poll endpoint version mỗi pollMs + khi tab được focus. Khi version đổi:
+//   1. Xóa tab-content-cache (UI đã render với quyền cũ) — giữ tab đang mở.
+//   2. session.update() → NextAuth jwt trigger="update" → app forceRefresh
+//      quyền từ DB (vá luôn đa instance: cache in-memory instance khác chưa
+//      bị invalidate thì forceRefresh vẫn đọc thẳng DB).
+//   3. router.refresh() → RSC render lại (menu, nút, trang) với session mới.
+// → User đang đăng nhập nhận quyền mới trong ≤ pollMs, không cần re-login.
+
+import { useCallback, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { toast } from "sonner";
+
+import { useTabContentCache } from "../layout/tab-content-cache";
+
+export interface PermissionsVersionWatcherProps {
+  /** Endpoint trả về { v } — mặc định /api/rbac/permissions-version. */
+  endpoint?: string;
+  /** Chu kỳ poll (ms) — mặc định 60s. */
+  pollMs?: number;
+  /** Tắt toast thông báo khi quyền đổi. */
+  silent?: boolean;
+}
+
+export function PermissionsVersionWatcher({
+  endpoint = "/api/rbac/permissions-version",
+  pollMs = 60_000,
+  silent = false,
+}: PermissionsVersionWatcherProps = {}) {
+  const { status, update } = useSession();
+  const router = useRouter();
+  const { clearAllCache } = useTabContentCache();
+  const lastSeenRef = useRef<string | null>(null);
+  const busyRef = useRef(false);
+
+  const check = useCallback(async () => {
+    if (busyRef.current || document.visibilityState === "hidden") return;
+    busyRef.current = true;
+    try {
+      const res = await fetch(endpoint, { cache: "no-store" });
+      if (!res.ok) return;
+      const data = (await res.json()) as { v?: string };
+      const v = data?.v;
+      if (!v) return;
+
+      if (lastSeenRef.current === null) {
+        // Lần đầu sau khi mount: chỉ ghi nhận mốc, không refresh
+        lastSeenRef.current = v;
+        return;
+      }
+      if (v === lastSeenRef.current) return;
+
+      lastSeenRef.current = v;
+
+      try {
+        clearAllCache();
+        sessionStorage.removeItem("tab-content-cache");
+      } catch {
+        // best-effort
+      }
+      await update(); // jwt trigger="update" → forceRefresh quyền từ DB
+      router.refresh();
+      if (!silent) {
+        toast.info("Quyền truy cập của bạn vừa được cập nhật", {
+          description: "Giao diện đã được làm mới theo bộ quyền mới.",
+        });
+      }
+    } catch {
+      // Mạng lỗi thì bỏ qua — lần poll sau thử lại
+    } finally {
+      busyRef.current = false;
+    }
+  }, [endpoint, silent, clearAllCache, router, update]);
+
+  useEffect(() => {
+    if (status !== "authenticated") return;
+
+    check();
+    const interval = setInterval(check, pollMs);
+    const onFocus = () => check();
+    window.addEventListener("focus", onFocus);
+    document.addEventListener("visibilitychange", onFocus);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", onFocus);
+    };
+  }, [status, pollMs, check]);
+
+  return null;
+}