@goplusvn/core 0.1.41 → 0.1.42

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

package/src/rbac/pages/role-form-page.tsx

@@ -37,6 +37,7 @@ import { toast } from "sonner"
 import {
   ArrowLeft,
   Building2,
+  History,
   Search,
   ChevronDown,
   ChevronRight,
@@ -142,6 +143,8 @@ export interface RoleFormPageProps {
   resourcePages?: Record<string, string>
   /** Cây menu thật — không truyền thì tự dựng từ group của resources. */
   menuTree?: MenuTreeSection[]
+  /** Endpoint nhật ký đổi quyền (edit mode) — vd /api/roles/{id}/history. */
+  historyEndpoint?: string
 }
 
 export function RoleFormPage({
@@ -157,6 +160,7 @@ export function RoleFormPage({
   actionMeta,
   resourcePages,
   menuTree,
+  historyEndpoint,
 }: RoleFormPageProps) {
   const router = useRouter()
 
@@ -168,6 +172,16 @@ export function RoleFormPage({
   const [isSubmitting, setIsSubmitting] = React.useState(false)
   const [collapsed, setCollapsed] = React.useState<Set<string>>(() => new Set())
   const [searchTerm, setSearchTerm] = React.useState("")
+  const [historyOpen, setHistoryOpen] = React.useState(false)
+  const [history, setHistory] = React.useState<any[] | null>(null)
+
+  React.useEffect(() => {
+    if (!historyOpen || history || !historyEndpoint) return
+    fetch(historyEndpoint)
+      .then((r) => r.json())
+      .then((d) => setHistory(d.items ?? []))
+      .catch(() => setHistory([]))
+  }, [historyOpen, history, historyEndpoint])
 
   const [formData, setFormData] = React.useState({
     name: initialData?.name || "",
@@ -525,6 +539,15 @@ export function RoleFormPage({
     })
   }, [offMenuResources, searching, searchTerm, resourceInfo, pageActions, actionName])
 
+  const permLabel = React.useCallback(
+    (perm: string) => {
+      const [action, resource] = perm.split(":")
+      const rName = resourceInfo.get(resource)?.name || resource
+      return `${actionName(action)} · ${rName}`
+    },
+    [resourceInfo, actionName]
+  )
+
   // Render 1 dòng trang menu + hàng thao tác của nó
   const renderPageRow = (item: {
     title: string
@@ -754,7 +777,8 @@ export function RoleFormPage({
         </Button>
       </div>
 
-      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+      <div className="mt-3 flex items-start gap-3 lg:mx-3">
+      <div className="min-w-0 flex-1 overflow-hidden rounded-xl border border-border bg-card shadow-sm">
         {/* ===== 2. Toolbar: mẫu + phạm vi chi nhánh + đếm ===== */}
         <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 sm:px-4">
           <div className="relative min-w-[150px] flex-1 sm:max-w-64">
@@ -929,6 +953,172 @@ export function RoleFormPage({
           </section>
         )}
       </div>
+
+      {/* ===== 🪞 PREVIEW SIDEBAR SỐNG — nhân viên mang vai trò này sẽ thấy ===== */}
+      <aside className="sticky top-4 hidden w-60 shrink-0 overflow-hidden rounded-xl border border-border shadow-sm xl:block">
+        <div className="border-b border-white/10 bg-sidebar px-3 py-2">
+          <p className="text-xs font-semibold text-primary-foreground">
+            Nhân viên sẽ thấy
+          </p>
+          <p className="text-[10px] text-primary-foreground/60">
+            Sidebar cập nhật theo từng ô tick
+          </p>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto bg-sidebar px-2 py-2 [scrollbar-width:thin]">
+          {(() => {
+            const visibleSections = tree
+              .map((section) => ({
+                ...section,
+                items: section.items.filter(
+                  (i) => !i.note && has(i.resource, "view")
+                ),
+              }))
+              .filter((sec) => sec.items.length > 0)
+            if (visibleSections.length === 0) {
+              return (
+                <p className="px-2 py-6 text-center text-[11px] text-primary-foreground/50">
+                  Chưa có menu nào —
+                  <br />
+                  vai trò này không thấy gì trên sidebar.
+                </p>
+              )
+            }
+            return visibleSections.map((sec) => (
+              <div key={sec.title} className="mb-1.5">
+                <p className="px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-primary-foreground/40">
+                  {sec.title}
+                </p>
+                {sec.items.map((i) => (
+                  <div
+                    key={`${i.resource}:${i.title}`}
+                    className="flex items-center gap-2 rounded-md px-2 py-1 text-primary-foreground/85"
+                  >
+                    <DynamicIcon
+                      name={i.icon as any}
+                      className="h-3.5 w-3.5 shrink-0 opacity-70"
+                    />
+                    <span className="truncate text-[11px]">{i.title}</span>
+                  </div>
+                ))}
+              </div>
+            ))
+          })()}
+        </div>
+        {branchScopeResources.length > 0 && (
+          <div className="border-t border-white/10 bg-sidebar px-3 py-1.5 text-[10px] text-primary-foreground/60">
+            Dữ liệu:{" "}
+            {branchScope === "all"
+              ? "tất cả chi nhánh"
+              : "chi nhánh được gán"}
+          </div>
+        )}
+      </aside>
+      </div>
+
+      {/* ===== 🕓 Nhật ký thay đổi quyền ===== */}
+      {mode === "edit" && historyEndpoint && (
+        <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+          <button
+            type="button"
+            onClick={() => setHistoryOpen((o) => !o)}
+            className="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-muted/30"
+          >
+            <History className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold text-foreground">
+              Nhật ký thay đổi quyền
+            </span>
+            <span className="text-[11px] text-muted-foreground">
+              ai đổi gì, lúc nào
+            </span>
+            <span className="ml-auto text-xs text-muted-foreground">
+              {historyOpen ? "Thu gọn" : "Xem"}
+            </span>
+          </button>
+          {historyOpen && (
+            <div className="border-t border-border">
+              {history === null ? (
+                <p className="px-4 py-4 text-center text-xs text-muted-foreground">
+                  Đang tải...
+                </p>
+              ) : history.length === 0 ? (
+                <p className="px-4 py-4 text-center text-xs text-muted-foreground">
+                  Chưa có thay đổi nào được ghi nhận.
+                </p>
+              ) : (
+                <ul className="divide-y divide-border/60">
+                  {history.map((e) => (
+                    <li key={e.id} className="px-4 py-2 text-xs">
+                      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                        <span className="tabular-nums text-muted-foreground">
+                          {new Date(e.at).toLocaleString("vi-VN", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            day: "2-digit",
+                            month: "2-digit",
+                            year: "numeric",
+                          })}
+                        </span>
+                        {e.by && (
+                          <span className="font-medium text-foreground">
+                            {e.by}
+                          </span>
+                        )}
+                        {e.action === "create" && (
+                          <span className="text-muted-foreground">
+                            tạo vai trò
+                          </span>
+                        )}
+                        {e.nameChange && (
+                          <span className="text-muted-foreground">
+                            đổi tên "{e.nameChange.from}" → "{e.nameChange.to}"
+                          </span>
+                        )}
+                        {e.statusChange && (
+                          <span className="text-muted-foreground">
+                            {e.statusChange.to === "active"
+                              ? "mở khóa vai trò"
+                              : "khóa vai trò"}
+                          </span>
+                        )}
+                      </div>
+                      {(e.added?.length > 0 || e.removed?.length > 0) && (
+                        <div className="mt-1 flex flex-wrap gap-1">
+                          {e.added.slice(0, 8).map((p: string) => (
+                            <span
+                              key={p}
+                              className="rounded bg-emerald-50 px-1.5 py-0.5 text-[11px] text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400"
+                            >
+                              +{permLabel(p)}
+                            </span>
+                          ))}
+                          {e.added.length > 8 && (
+                            <span className="text-[11px] text-muted-foreground">
+                              +{e.added.length - 8} quyền khác
+                            </span>
+                          )}
+                          {e.removed.slice(0, 8).map((p: string) => (
+                            <span
+                              key={p}
+                              className="rounded bg-rose-50 px-1.5 py-0.5 text-[11px] text-rose-700 line-through dark:bg-rose-950 dark:text-rose-400"
+                            >
+                              {permLabel(p)}
+                            </span>
+                          ))}
+                          {e.removed.length > 8 && (
+                            <span className="text-[11px] text-muted-foreground">
+                              −{e.removed.length - 8} quyền khác
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }

package/src/rbac/pages/role-list-page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import * as React from "react";
 import { useMemo, useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 import { Loader2, UserX, KeyRound } from "lucide-react";
 import {
@@ -27,6 +29,7 @@ import {
 } from "../../ui";
 
 import type { CrudPermissions } from "../../types";
+import { cn } from "../../utils";
 
 import { RoleStatsCards } from "../components/roles/role-stats-cards";
 import { RoleToolbar } from "../components/roles/role-toolbar";
@@ -65,6 +68,140 @@ export interface RoleListPageProps {
   importSlot?: ReactNode;
 }
 
+
+// ── 🗺️ Heatmap role × phân hệ ────────────────────────────────────────────
+// Mỗi ô = tỉ lệ quyền đã cấp của role trong phân hệ (đậm dần theo %).
+function parseAllowed(resourceConfig: any, actionCodes: string[]): string[] {
+  try {
+    const config =
+      typeof resourceConfig === "string"
+        ? JSON.parse(resourceConfig)
+        : resourceConfig
+    if (config?.actions && Array.isArray(config.actions)) {
+      return actionCodes.filter((c) => (config.actions as string[]).includes(c))
+    }
+  } catch {
+    /* fallthrough */
+  }
+  return actionCodes.filter((c) =>
+    ["view", "create", "update", "delete"].includes(c)
+  )
+}
+
+function RolePermissionHeatmap({
+  roles,
+  resources,
+  actions,
+  lang,
+  canUpdate,
+}: {
+  roles: Role[]
+  resources: RoleListPageProps["resources"]
+  actions: RoleListPageProps["actions"]
+  lang: string
+  canUpdate?: boolean
+}) {
+  const router = useRouter()
+  const actionCodes = React.useMemo(() => actions.map((a) => a.code), [actions])
+
+  // group → danh sách "action:resource" khả dụng
+  const groupCodes = React.useMemo(() => {
+    const map = new Map<string, string[]>()
+    resources.forEach((r) => {
+      const group = r.group || "Khác"
+      const allowed = parseAllowed(r.config, actionCodes)
+      const list = map.get(group) ?? []
+      allowed.forEach((a) => list.push(`${a}:${r.code}`))
+      map.set(group, list)
+    })
+    return map
+  }, [resources, actionCodes])
+
+  const groups = React.useMemo(() => [...groupCodes.keys()], [groupCodes])
+  if (roles.length === 0 || groups.length === 0) return null
+
+  const cellFor = (role: Role, group: string) => {
+    const codes = groupCodes.get(group) ?? []
+    const granted = codes.filter((c) => role.permissions?.includes(c)).length
+    return { granted, total: codes.length }
+  }
+
+  const shade = (ratio: number) =>
+    ratio === 0
+      ? "bg-muted/60"
+      : ratio < 0.34
+        ? "bg-primary/20"
+        : ratio < 0.67
+          ? "bg-primary/45"
+          : ratio < 1
+            ? "bg-primary/70"
+            : "bg-primary"
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+      <div className="flex items-center gap-2 border-b border-border px-4 py-2">
+        <h3 className="text-sm font-semibold text-foreground">
+          Bản đồ quyền theo phân hệ
+        </h3>
+        <span className="text-[11px] text-muted-foreground">
+          ô càng đậm = càng nhiều quyền · bấm ô để mở vai trò
+        </span>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse text-xs">
+          <thead>
+            <tr>
+              <th className="sticky left-0 z-10 bg-card px-4 py-1.5 text-left font-medium text-muted-foreground">
+                Vai trò
+              </th>
+              {groups.map((g) => (
+                <th
+                  key={g}
+                  className="min-w-16 px-1 py-1.5 text-center font-medium text-muted-foreground"
+                  title={g}
+                >
+                  <span className="block max-w-20 truncate">{g}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {roles.map((role) => (
+              <tr key={role.id} className="hover:bg-muted/30">
+                <td className="sticky left-0 z-10 max-w-44 truncate bg-card px-4 py-1 font-medium text-foreground">
+                  {role.name}
+                </td>
+                {groups.map((g) => {
+                  const { granted, total } = cellFor(role, g)
+                  const ratio = total > 0 ? granted / total : 0
+                  return (
+                    <td key={g} className="px-1 py-1 text-center">
+                      <button
+                        type="button"
+                        disabled={!canUpdate}
+                        onClick={() =>
+                          router.push(`/${lang}/roles/${role.id}/edit`)
+                        }
+                        title={`${role.name} · ${g}: ${granted}/${total} quyền`}
+                        className={cn(
+                          "mx-auto block h-5 w-10 rounded",
+                          shade(ratio),
+                          canUpdate && "cursor-pointer hover:ring-2 hover:ring-primary/40"
+                        )}
+                        aria-label={`${role.name} — ${g}: ${granted}/${total} quyền`}
+                      />
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
 export function RoleListPage({
   dictionary,
   permissions,
@@ -233,6 +370,14 @@ export function RoleListPage({
         importSlot={importSlot}
       />
 
+      <RolePermissionHeatmap
+        roles={roles}
+        resources={resources}
+        actions={actions}
+        lang={lang}
+        canUpdate={canUpdate}
+      />
+
       {/* Roles Grid */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {roles.length === 0 && !isLoading ? (

package/src/user/components/effective-permissions-dialog.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+// 👤 QUYỀN HIỆU LỰC — user mang nhiều vai trò thì rốt cuộc thấy gì?
+// Hợp nhất (union) quyền từ mọi vai trò của user rồi trả lời trực quan:
+//   - Sidebar preview: menu nào hiện với người này (từ menuTree).
+//   - Phạm vi dữ liệu: chi nhánh được gán hay tất cả (view-all-branches).
+//   - Quyền nhạy cảm đang có (actionMeta.flow "Nhạy cảm"/"Phê duyệt").
+// Nguồn: GET /api/roles?pageSize=100 (permissions từng role) — match theo
+// tên vai trò gắn trên user.
+import * as React from "react"
+import {
+  Badge,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+} from "../../ui"
+import { Building2, KeyRound, ShieldAlert } from "lucide-react"
+
+export interface EffectiveMenuTreeSection {
+  title: string
+  icon?: string
+  items: Array<{
+    title: string
+    href?: string
+    icon?: string
+    resource: string
+    note?: string
+  }>
+}
+
+export interface EffectivePermissionsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user: {
+    id?: string
+    name?: string | null
+    email?: string | null
+    /** Tên các vai trò gắn trên user (như chip hiển thị ở card). */
+    roles?: string[]
+    roleNames?: string[]
+  } | null
+  menuTree?: EffectiveMenuTreeSection[]
+  actionMeta?: Record<
+    string,
+    { label?: string; flow?: string; description?: string }
+  >
+}
+
+interface RoleLite {
+  id: string
+  name: string
+  code: string
+  permissions: string[]
+}
+
+export function EffectivePermissionsDialog({
+  open,
+  onOpenChange,
+  user,
+  menuTree,
+  actionMeta,
+}: EffectivePermissionsDialogProps) {
+  const [roles, setRoles] = React.useState<RoleLite[] | null>(null)
+  const [loading, setLoading] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open || roles) return
+    setLoading(true)
+    fetch("/api/roles?pageSize=200")
+      .then((r) => r.json())
+      .then((data) => setRoles(data.items ?? []))
+      .catch(() => setRoles([]))
+      .finally(() => setLoading(false))
+  }, [open, roles])
+
+  const roleNameList = user?.roles ?? user?.roleNames ?? []
+  const userRoleNames = React.useMemo(
+    () => new Set(roleNameList.map((r) => r.toLowerCase())),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [user]
+  )
+
+  const matchedRoles = React.useMemo(
+    () =>
+      (roles ?? []).filter(
+        (r) =>
+          userRoleNames.has(r.name.toLowerCase()) ||
+          userRoleNames.has(r.code.toLowerCase())
+      ),
+    [roles, userRoleNames]
+  )
+
+  /** Union mọi quyền từ các vai trò. */
+  const effective = React.useMemo(() => {
+    const set = new Set<string>()
+    matchedRoles.forEach((r) => r.permissions?.forEach((p) => set.add(p)))
+    return set
+  }, [matchedRoles])
+
+  const has = React.useCallback(
+    (resource: string, action: string) => effective.has(`${action}:${resource}`),
+    [effective]
+  )
+
+  const isSuperAdmin = userRoleNames.has("super_admin")
+
+  const visibleSections = React.useMemo(() => {
+    if (!menuTree) return []
+    return menuTree
+      .map((section) => ({
+        ...section,
+        items: section.items.filter(
+          (i) => !i.note && (isSuperAdmin || has(i.resource, "view"))
+        ),
+      }))
+      .filter((s) => s.items.length > 0)
+  }, [menuTree, has, isSuperAdmin])
+
+  /** Quyền thuộc luồng nhạy cảm / phê duyệt đang bật. */
+  const sensitiveGrants = React.useMemo(() => {
+    if (!actionMeta) return []
+    const list: Array<{ action: string; resource: string; label: string }> = []
+    effective.forEach((perm) => {
+      const [action, resource] = perm.split(":")
+      const meta = actionMeta[action]
+      if (meta?.flow === "Nhạy cảm" || meta?.flow === "Phê duyệt") {
+        list.push({ action, resource, label: meta.label || action })
+      }
+    })
+    return list
+  }, [effective, actionMeta])
+
+  const branchAll =
+    isSuperAdmin ||
+    [...effective].some((p) => p.startsWith("view-all-branches:"))
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <KeyRound className="h-4 w-4 text-primary" />
+            Quyền hiệu lực — {user?.name || user?.email || ""}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Vai trò nguồn */}
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="text-xs text-muted-foreground">Từ vai trò:</span>
+          {roleNameList.map((r) => (
+            <Badge key={r} variant="outline" className="text-[11px]">
+              {r}
+            </Badge>
+          ))}
+          {isSuperAdmin && (
+            <span className="text-[11px] font-medium text-amber-600 dark:text-amber-400">
+              — Super Admin: toàn quyền hệ thống
+            </span>
+          )}
+        </div>
+
+        {/* Phạm vi dữ liệu */}
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2 text-xs">
+          <Building2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <span>
+            Phạm vi dữ liệu:{" "}
+            <b>{branchAll ? "tất cả chi nhánh" : "chi nhánh được gán"}</b>
+          </span>
+        </div>
+
+        {/* Quyền nhạy cảm */}
+        {sensitiveGrants.length > 0 && (
+          <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 dark:border-amber-900 dark:bg-amber-950/40">
+            <p className="mb-1 flex items-center gap-1.5 text-xs font-medium text-amber-700 dark:text-amber-400">
+              <ShieldAlert className="h-3.5 w-3.5" />
+              Quyền nhạy cảm đang có
+            </p>
+            <div className="flex flex-wrap gap-1">
+              {sensitiveGrants.map((g) => (
+                <span
+                  key={`${g.action}:${g.resource}`}
+                  className="rounded bg-amber-100 px-1.5 py-0.5 text-[11px] text-amber-800 dark:bg-amber-900/60 dark:text-amber-300"
+                >
+                  {g.label}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Sidebar preview */}
+        <div className="overflow-hidden rounded-lg border border-border">
+          <div className="border-b border-white/10 bg-sidebar px-3 py-1.5">
+            <p className="text-[11px] font-semibold text-primary-foreground">
+              Menu người này nhìn thấy
+            </p>
+          </div>
+          <div className="max-h-72 overflow-y-auto bg-sidebar px-2 py-2 [scrollbar-width:thin]">
+            {loading ? (
+              <p className="px-2 py-4 text-center text-[11px] text-primary-foreground/50">
+                Đang tải...
+              </p>
+            ) : visibleSections.length === 0 ? (
+              <p className="px-2 py-4 text-center text-[11px] text-primary-foreground/50">
+                Không thấy menu nào.
+              </p>
+            ) : (
+              visibleSections.map((sec) => (
+                <div key={sec.title} className="mb-1.5">
+                  <p className="px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-primary-foreground/40">
+                    {sec.title}
+                  </p>
+                  {sec.items.map((i) => (
+                    <div
+                      key={`${i.resource}:${i.title}`}
+                      className="flex items-center gap-2 rounded-md px-2 py-1 text-primary-foreground/85"
+                    >
+                      <DynamicIcon
+                        name={i.icon as any}
+                        className="h-3.5 w-3.5 shrink-0 opacity-70"
+                      />
+                      <span className="truncate text-[11px]">{i.title}</span>
+                    </div>
+                  ))}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/user/components/users-card-view.tsx

@@ -15,11 +15,13 @@ import {
   AvatarImage,
 } from "../../ui";
 import { cn } from "../../utils";
-import { Mail, Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Store, ShieldCheck, Hash, Building2 } from "lucide-react";
+import { Mail, Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Store, ShieldCheck, Hash, Building2 , KeyRound} from "lucide-react";
 
 interface UsersCardViewProps {
   data: any[];
   onSelect?: (user: any) => void;
+  /** Mở dialog "Quyền hiệu lực" cho user (additive). */
+  onViewPermissions?: (user: any) => void;
 }
 
 // Professional Corporate Palette
@@ -53,7 +55,11 @@ const getAvatarColor = (name: string | null) => {
   return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
 };
 
-export function UsersCardView({ data, onSelect }: UsersCardViewProps) {
+export function UsersCardView({
+  data,
+  onSelect,
+  onViewPermissions,
+}: UsersCardViewProps) {
   if (!data.length) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[400px] border border-[#e2e8f0] rounded-xl bg-white p-8 text-center">
@@ -192,6 +198,18 @@ export function UsersCardView({ data, onSelect }: UsersCardViewProps) {
                       <Edit className="mr-2 size-3.5" />
                       Chỉnh sửa
                     </DropdownMenuItem>
+                    {onViewPermissions && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          setTimeout(() => onViewPermissions(user), 0);
+                        }}
+                        className="rounded-lg text-[13px] cursor-pointer"
+                      >
+                        <KeyRound className="size-3.5 mr-2 text-muted-foreground" />
+                        Quyền hiệu lực
+                      </DropdownMenuItem>
+                    )}
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>

package/src/user/pages/users-client-page.tsx

@@ -21,6 +21,10 @@ import { UserToolbar } from "../components/user-toolbar";
 import { UserStats } from "../components/user-stats";
 import { UsersCardView } from "../components/users-card-view";
 import { UnifiedProfileDialog } from "../components/unified-profile-dialog";
+import {
+  EffectivePermissionsDialog,
+  type EffectiveMenuTreeSection,
+} from "../components/effective-permissions-dialog";
 
 interface UserStats {
   totalUsers: number;
@@ -39,6 +43,9 @@ interface UsersClientPageProps {
   stats: UserStats;
   onAssignRoles?: (userId: string, roleCodes: string[]) => Promise<any>;
   onResetPassword?: (userId: string, password: string) => Promise<any>;
+  /** Cây menu + meta action cho dialog "Quyền hiệu lực" (additive). */
+  menuTree?: EffectiveMenuTreeSection[];
+  actionMeta?: Record<string, { label?: string; flow?: string; description?: string }>;
 }
 
 export function UsersClientPage({
@@ -50,7 +57,10 @@ export function UsersClientPage({
   stats,
   onAssignRoles,
   onResetPassword,
+  menuTree,
+  actionMeta,
 }: UsersClientPageProps) {
+  const [permUser, setPermUser] = useState<any | null>(null);
   const router = useRouter();
   const pathname = usePathname();
 
@@ -207,10 +217,24 @@ export function UsersClientPage({
             />
           </div>
         ) : (
-          <UsersCardView data={initialData} onSelect={handleSelectUser} />
+          <UsersCardView
+            data={initialData}
+            onSelect={handleSelectUser}
+            onViewPermissions={menuTree ? setPermUser : undefined}
+          />
         )}
       </div>
 
+      {menuTree && (
+        <EffectivePermissionsDialog
+          open={!!permUser}
+          onOpenChange={(o) => !o && setPermUser(null)}
+          user={permUser}
+          menuTree={menuTree}
+          actionMeta={actionMeta}
+        />
+      )}
+
       {/* Create User Dialog */}
       <UnifiedProfileDialog
         open={userFormOpen}