@goplusvn/core 0.1.24 → 0.1.26

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

@@ -1,23 +1,13 @@
 "use client";
 
-// Trang tạo/sửa VAI TRÒ — thông tin chung (kiểu Notion) + ma trận phân quyền
-// theo nhóm tài nguyên. Bề mặt trắng (bg-card) thay cho các mảng bg-muted xám.
-//
+// Trang tạo/sửa VAI TRÒ — bar navy 1 DÒNG kiểu chi tiết đơn bán hàng
+// (← tên inline · chip mã + copy · CHIP TRẠNG THÁI màu bấm-đổi · mô tả ·
+// Hủy/Lưu), full width; khối trắng: toolbar sticky (đếm x/y quyền realtime),
+// nhóm = dòng mảnh, tài nguyên = dòng + CHIP quyền (checkbox + icon lucide
+// theo loại action, prop actionLabels bổ sung nhãn nghiệp vụ app).
 // API contract: POST /api/roles, PUT /api/roles/:id.
-
-import * as React from "react";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
-import {
-  ArrowLeft,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Save,
-  Search,
-  X,
-} from "lucide-react";
-
+import * as React from "react"
+import { useRouter } from "next/navigation"
 import {
   Badge,
   Button,
@@ -29,19 +19,47 @@ import {
   SelectTrigger,
   SelectValue,
   Switch,
-} from "../../ui";
-import { cn } from "../../utils";
-import { errorMessage, throwFetchError } from "../lib/fetch-error";
-import type { CrudPermissions } from "../../types";
+  getStatusMeta,
+} from "../../ui"
+import { toast } from "sonner"
+import {
+  ArrowLeft,
+  BadgeCheck,
+  Ban,
+  Bot,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Download,
+  Eye,
+  PenLine,
+  Pencil,
+  Plus,
+  Printer,
+  RefreshCw,
+  Save,
+  Search,
+  Settings2,
+  Trash2,
+  Upload,
+  X,
+  Zap,
+} from "lucide-react"
+
+import type { CrudPermissions } from "../../types"
+import type { LucideIcon } from "lucide-react"
+
+import { errorMessage, throwFetchError } from "../lib/fetch-error"
+import { cn } from "../../utils"
 
 export interface ActionLabelConfig {
-  label: string;
-  icon: string;
-  color: string;
+  label: string
+  icon: string
+  color: string
 }
 
-// Nhãn/icon mặc định cho các action CRUD chuẩn — app truyền `actionLabels`
-// để bổ sung/ghi đè cho các action nghiệp vụ riêng.
+// Nhãn mặc định cho action CRUD chuẩn (giữ tương thích prop actionLabels).
 const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   view: { label: "Xem", icon: "👁️", color: "text-blue-600" },
   create: { label: "Tạo", icon: "➕", color: "text-green-600" },
@@ -53,40 +71,71 @@ const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   manage: { label: "Quản lý", icon: "🔧", color: "text-orange-600" },
   edit_items: { label: "Sửa chi tiết", icon: "📝", color: "text-amber-600" },
   delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
-};
+}
+
+// --- Icon + màu theo LOẠI action (suy từ mã, giống ACTION_TONES trang tài
+// nguyên) — mọi action đều có icon mà không cần cấu hình từng cái. ---
+const ACTION_VISUAL_RULES: Array<{
+  re: RegExp
+  icon: LucideIcon
+  cls: string
+}> = [
+  { re: /^(view|read|get|list)/, icon: Eye, cls: "text-blue-500" },
+  { re: /^(create|add|new)/, icon: Plus, cls: "text-emerald-500" },
+  { re: /^(update|edit|change|set)/, icon: Pencil, cls: "text-amber-500" },
+  { re: /^(delete|remove)/, icon: Trash2, cls: "text-rose-500" },
+  { re: /^(cancel|void|reject)/, icon: Ban, cls: "text-rose-500" },
+  {
+    re: /^(approve|confirm|verify|accept)/,
+    icon: BadgeCheck,
+    cls: "text-violet-500",
+  },
+  { re: /^sign/, icon: PenLine, cls: "text-indigo-500" },
+  { re: /^import/, icon: Download, cls: "text-purple-500" },
+  { re: /^export/, icon: Upload, cls: "text-indigo-500" },
+  { re: /^print/, icon: Printer, cls: "text-cyan-600" },
+  { re: /^sync/, icon: RefreshCw, cls: "text-cyan-600" },
+  { re: /^(manage|config)/, icon: Settings2, cls: "text-orange-500" },
+  { re: /^auto/, icon: Bot, cls: "text-purple-500" },
+]
+
+const getActionVisual = (code: string) =>
+  ACTION_VISUAL_RULES.find((r) => r.re.test(code)) ?? {
+    icon: Zap,
+    cls: "text-slate-400",
+  }
 
 export interface RoleFormPageProps {
-  dictionary: any;
-  permissions?: CrudPermissions;
-  lang: string;
+  dictionary: any
+  permissions?: CrudPermissions
+  lang: string
   resources: Array<{
-    id: string;
-    code: string;
-    name: string;
-    group: string | null;
-    description: string | null;
-    icon: string | null;
-    order: number | null;
-    config: any;
-  }>;
+    id: string
+    code: string
+    name: string
+    group: string | null
+    description: string | null
+    icon: string | null
+    order: number | null
+    config: any
+  }>
   actions: Array<{
-    id: string;
-    code: string;
-    name: string;
-    description: string | null;
-    isDefault?: boolean;
-  }>;
-  mode: "create" | "edit";
+    id: string
+    code: string
+    name: string
+    description: string | null
+    isDefault?: boolean
+  }>
+  mode: "create" | "edit"
   initialData?: {
-    id: string;
-    name: string;
-    code: string;
-    description: string | undefined;
-    status: string;
-    permissions: string[];
-  };
-  /** Nhãn/icon bổ sung cho action nghiệp vụ riêng của app (merge đè mặc định). */
-  actionLabels?: Record<string, ActionLabelConfig>;
+    id: string
+    name: string
+    code: string
+    description: string | undefined
+    status: string
+    permissions: string[]
+  }
+  actionLabels?: Record<string, ActionLabelConfig>
 }
 
 export function RoleFormPage({
@@ -99,15 +148,15 @@ export function RoleFormPage({
   initialData,
   actionLabels,
 }: RoleFormPageProps) {
-  const router = useRouter();
+  const router = useRouter()
 
   const mergedActionLabels = React.useMemo(
     () => ({ ...DEFAULT_ACTION_LABELS, ...actionLabels }),
-    [actionLabels],
-  );
+    [actionLabels]
+  )
 
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [searchTerm, setSearchTerm] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const [searchTerm, setSearchTerm] = React.useState("")
 
   const [formData, setFormData] = React.useState({
     name: initialData?.name || "",
@@ -115,86 +164,76 @@ export function RoleFormPage({
     description: initialData?.description || "",
     status: (initialData?.status || "active") as "active" | "inactive",
     permissions: initialData?.permissions || ([] as string[]),
-  });
+  })
 
-  const [activeGroup, setActiveGroup] = React.useState<string | null>("all");
-  // Mặc định mở rộng tất cả (Collapsed = false)
+  const [activeGroup, setActiveGroup] = React.useState<string | null>("all")
   const [collapsedGroups, setCollapsedGroups] = React.useState<
     Record<string, boolean>
-  >({});
+  >({})
 
   const toggleGroupCollapse = (groupName: string) => {
     setCollapsedGroups((prev) => ({
       ...prev,
       [groupName]: !prev[groupName],
-    }));
-  };
+    }))
+  }
 
-  // Helper to get localized text from dictionary
   const getLocalizedName = React.useCallback(
     (key: string | null) => {
-      if (!key) return "";
-      if (!dictionary) return key;
+      if (!key) return ""
+      if (!dictionary) return key
 
-      // Try to find key in dictionary (e.g. "menu.dashboard" or "nav.system")
-      const parts = key.split(".");
-      let current = dictionary;
+      const parts = key.split(".")
+      let current = dictionary
       for (const part of parts) {
         if (current && typeof current === "object" && part in current) {
-          current = current[part];
+          current = current[part]
         } else {
-          return key; // fallback to key if not found
+          return key
         }
       }
-      return typeof current === "string" ? current : key;
+      return typeof current === "string" ? current : key
     },
-    [dictionary],
-  );
+    [dictionary]
+  )
 
-  // Build dynamic permission matrix
   const permissionMatrix = React.useMemo(() => {
     return resources.map((resource) => {
-      // Default actions using database configuration
-      let allowedActions: string[] = [];
+      let allowedActions: string[] = []
       const defaultActions = actions
         .filter((a) => a.isDefault)
-        .map((a) => a.code);
-      // Fallback to hardcoded if no default actions found (safety check)
+        .map((a) => a.code)
       const effectiveDefaultActions =
         defaultActions.length > 0
           ? defaultActions
-          : ["view", "create", "update", "delete"];
+          : ["view", "create", "update", "delete"]
 
       if (resource.config) {
         try {
           const config =
             typeof resource.config === "string"
               ? JSON.parse(resource.config)
-              : resource.config;
+              : resource.config
 
           if (config.actions && Array.isArray(config.actions)) {
-            // Case 2: Config exists -> use configured actions (even if empty)
-            const allowedCodes = config.actions as string[];
+            const allowedCodes = config.actions as string[]
             allowedActions = actions
               .map((a) => a.code)
-              .filter((code) => allowedCodes.includes(code));
+              .filter((code) => allowedCodes.includes(code))
           } else {
-            // Config exists but no actions array -> use defaults
             allowedActions = actions
               .map((a) => a.code)
-              .filter((code) => effectiveDefaultActions.includes(code));
+              .filter((code) => effectiveDefaultActions.includes(code))
           }
         } catch (_e) {
-          // Ignore config parsing errors, fallback to defaults
           allowedActions = actions
             .map((a) => a.code)
-            .filter((code) => effectiveDefaultActions.includes(code));
+            .filter((code) => effectiveDefaultActions.includes(code))
         }
       } else {
-        // Case 1: No config -> use defaults
         allowedActions = actions
           .map((a) => a.code)
-          .filter((code) => effectiveDefaultActions.includes(code));
+          .filter((code) => effectiveDefaultActions.includes(code))
       }
 
       return {
@@ -204,153 +243,151 @@ export function RoleFormPage({
         group: getLocalizedName(resource.group) || "Khác",
         description: resource.description,
         actions: allowedActions,
-      };
-    });
-  }, [resources, actions, getLocalizedName]);
+      }
+    })
+  }, [resources, actions, getLocalizedName])
+
+  const totalAvailablePermissions = React.useMemo(
+    () => permissionMatrix.reduce((sum, r) => sum + r.actions.length, 0),
+    [permissionMatrix]
+  )
 
-  // Filter matrix based on search
   const filteredMatrix = React.useMemo(() => {
-    if (!searchTerm.trim()) return permissionMatrix;
+    if (!searchTerm.trim()) return permissionMatrix
 
-    const search = searchTerm.toLowerCase();
+    const search = searchTerm.toLowerCase()
     return permissionMatrix.filter(
       (resource) =>
         resource.name.toLowerCase().includes(search) ||
         resource.resource.toLowerCase().includes(search) ||
-        resource.group.toLowerCase().includes(search),
-    );
-  }, [searchTerm, permissionMatrix]);
+        resource.group.toLowerCase().includes(search)
+    )
+  }, [searchTerm, permissionMatrix])
 
-  // Group resources by group
   const groupedMatrix = React.useMemo(() => {
-    const groups: Record<string, typeof permissionMatrix> = {};
+    const groups: Record<string, typeof permissionMatrix> = {}
     filteredMatrix.forEach((resource) => {
-      const group = resource.group;
+      const group = resource.group
       if (!groups[group]) {
-        groups[group] = [];
+        groups[group] = []
       }
-      groups[group].push(resource);
-    });
-    return groups;
-  }, [filteredMatrix]);
+      groups[group].push(resource)
+    })
+    return groups
+  }, [filteredMatrix])
 
-  // Set initial active group or update if filtered
   React.useEffect(() => {
-    const groups = Object.keys(groupedMatrix);
+    const groups = Object.keys(groupedMatrix)
     if (groups.length > 0) {
-      // Keep 'all' if selected, otherwise fallback to first group if current selection invalid
       if (
         activeGroup !== "all" &&
         (!activeGroup || !groups.includes(activeGroup))
       ) {
-        setActiveGroup("all");
+        setActiveGroup("all")
       }
     } else {
-      setActiveGroup(null);
+      setActiveGroup(null)
     }
-  }, [groupedMatrix, activeGroup]);
+  }, [groupedMatrix, activeGroup])
 
-  // Permission helpers
   const hasPermission = (resource: string, action: string): boolean => {
-    return formData.permissions.includes(`${action}:${resource}`);
-  };
+    return formData.permissions.includes(`${action}:${resource}`)
+  }
 
   const togglePermission = (resource: string, action: string) => {
-    const permission = `${action}:${resource}`;
-    let newPermissions = [...formData.permissions];
+    const permission = `${action}:${resource}`
+    let newPermissions = [...formData.permissions]
 
     if (newPermissions.includes(permission)) {
-      newPermissions = newPermissions.filter((p) => p !== permission);
+      newPermissions = newPermissions.filter((p) => p !== permission)
     } else {
-      newPermissions.push(permission);
+      newPermissions.push(permission)
     }
-    setFormData({ ...formData, permissions: newPermissions });
-  };
+    setFormData({ ...formData, permissions: newPermissions })
+  }
+
+  const groupPermissionCodes = React.useCallback(
+    (groupName: string) => {
+      const groupResources = groupedMatrix[groupName] || []
+      return groupResources.flatMap((r) =>
+        actions
+          .filter((a) => r.actions.includes(a.code))
+          .map((a) => `${a.code}:${r.resource}`)
+      )
+    },
+    [groupedMatrix, actions]
+  )
 
   const toggleAllForGroup = (groupName: string, enable: boolean) => {
-    const groupResources = groupedMatrix[groupName] || [];
-    const groupPermissions = groupResources.flatMap((r) =>
-      actions
-        .filter((a) => r.actions.includes(a.code))
-        .map((a) => `${a.code}:${r.resource}`),
-    );
-
-    let newPermissions = [...formData.permissions];
+    const groupPermissions = groupPermissionCodes(groupName)
+    let newPermissions = [...formData.permissions]
 
     if (enable) {
-      // Add all missing permissions for this group
-      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p));
-      newPermissions = [...newPermissions, ...toAdd];
+      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p))
+      newPermissions = [...newPermissions, ...toAdd]
     } else {
-      // Remove all permissions for this group
       newPermissions = newPermissions.filter(
-        (p) => !groupPermissions.includes(p),
-      );
+        (p) => !groupPermissions.includes(p)
+      )
     }
 
-    setFormData({ ...formData, permissions: newPermissions });
-  };
-
-  // Check if group has full permissions
-  const isGroupFullPermission = (groupName: string) => {
-    const groupResources = groupedMatrix[groupName] || [];
-    const groupPermissions = groupResources.flatMap((r) =>
-      actions
-        .filter((a) => r.actions.includes(a.code))
-        .map((a) => `${a.code}:${r.resource}`),
-    );
-    return (
-      groupPermissions.length > 0 &&
-      groupPermissions.every((p) => formData.permissions.includes(p))
-    );
-  };
+    setFormData({ ...formData, permissions: newPermissions })
+  }
+
+  const groupSelectedCount = (groupName: string) => {
+    const codes = groupPermissionCodes(groupName)
+    return {
+      selected: codes.filter((p) => formData.permissions.includes(p)).length,
+      total: codes.length,
+    }
+  }
 
   const toggleAllForResource = (
     resourceCode: string,
     resourceActions: string[],
-    check: boolean,
+    check: boolean
   ) => {
-    let newPermissions = [...formData.permissions];
+    let newPermissions = [...formData.permissions]
 
     resourceActions.forEach((actionCode) => {
-      const permission = `${actionCode}:${resourceCode}`;
+      const permission = `${actionCode}:${resourceCode}`
       if (check && !newPermissions.includes(permission)) {
-        newPermissions.push(permission);
+        newPermissions.push(permission)
       } else if (!check && newPermissions.includes(permission)) {
-        newPermissions = newPermissions.filter((p) => p !== permission);
+        newPermissions = newPermissions.filter((p) => p !== permission)
       }
-    });
+    })
 
-    setFormData((prev) => ({ ...prev, permissions: newPermissions }));
-  };
+    setFormData((prev) => ({ ...prev, permissions: newPermissions }))
+  }
 
   const isResourceFullPermission = (
     resourceCode: string,
-    resourceActions: string[],
+    resourceActions: string[]
   ) => {
-    if (resourceActions.length === 0) return false;
+    if (resourceActions.length === 0) return false
     return resourceActions.every((actionCode) =>
-      formData.permissions.includes(`${actionCode}:${resourceCode}`),
-    );
-  };
+      formData.permissions.includes(`${actionCode}:${resourceCode}`)
+    )
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsSubmitting(true);
+    e.preventDefault()
+    setIsSubmitting(true)
 
     try {
       const url =
-        mode === "create" ? "/api/roles" : `/api/roles/${initialData?.id}`;
-      const method = mode === "create" ? "POST" : "PUT";
+        mode === "create" ? "/api/roles" : `/api/roles/${initialData?.id}`
+      const method = mode === "create" ? "POST" : "PUT"
 
       const res = await fetch(url, {
         method,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(formData),
-      });
+      })
 
       if (!res.ok) {
-        await throwFetchError(res, `Failed to ${mode} role`);
+        await throwFetchError(res, `Failed to ${mode} role`)
       }
 
       toast.success("Thành công", {
@@ -358,125 +395,144 @@ export function RoleFormPage({
           mode === "create"
             ? "Đã tạo vai trò mới thành công"
             : "Đã cập nhật vai trò thành công",
-      });
+      })
 
-      router.push(`/${lang}/roles`);
-      router.refresh();
+      router.push(`/${lang}/roles`)
+      router.refresh()
     } catch (error: any) {
-      toast.error(errorMessage(error, "Lỗi"));
+      toast.error(errorMessage(error, "Lỗi"))
     } finally {
-      setIsSubmitting(false);
+      setIsSubmitting(false)
     }
-  };
+  }
 
-  return (
-    <div className="container max-w-7xl mx-auto py-6 space-y-6">
-      {/* Header & General Info (Notion Style) — thẻ trắng */}
-      <div className="flex flex-col lg:flex-row items-start lg:justify-between border border-border pb-4 sm:pb-6 bg-card p-4 sm:p-6 rounded-2xl shadow-sm gap-4 sm:gap-6">
-        <div className="flex items-start gap-2 sm:gap-4 flex-1 w-full min-w-0">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => router.push(`/${lang}/roles`)}
-            className="mt-1 shrink-0"
-          >
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
-          <div className="flex-1 space-y-3 w-full min-w-0">
-            <div>
-              <Input
-                id="name"
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Tên vai trò (VD: Quản lý kho)..."
-                className="text-xl sm:text-2xl md:text-3xl font-black h-auto py-2 border-transparent hover:border-border focus-visible:ring-0 focus-visible:border-primary focus-visible:bg-card bg-transparent px-2 -ml-2 shadow-none rounded-[8px] placeholder:text-muted-foreground/40 transition-colors w-full"
-                required
-              />
-              <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 px-1">
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] sm:text-xs font-medium text-muted-foreground uppercase">
-                    Mã:
-                  </span>
-                  <Input
-                    id="code"
-                    value={formData.code}
-                    onChange={(e) =>
-                      setFormData({ ...formData, code: e.target.value })
-                    }
-                    placeholder="VD: warehouse_manager"
-                    disabled={mode === "edit"}
-                    className="h-7 text-xs border border-border bg-card w-32 sm:w-48 shadow-none focus-visible:ring-1 focus-visible:ring-primary rounded-md"
-                  />
-                </div>
-                <div className="flex items-center gap-2 bg-card px-2 sm:px-3 h-7 rounded-md border border-border shrink-0">
-                  <span className="text-[10px] sm:text-xs font-medium text-muted-foreground uppercase">
-                    Hoạt động:
-                  </span>
-                  <Switch
-                    checked={formData.status === "active"}
-                    onCheckedChange={(checked) =>
-                      setFormData({
-                        ...formData,
-                        status: checked ? "active" : "inactive",
-                      })
-                    }
-                    className="scale-75 origin-left"
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="px-1">
-              <Input
-                id="description"
-                value={formData.description}
-                onChange={(e) =>
-                  setFormData({ ...formData, description: e.target.value })
-                }
-                placeholder="Thêm mô tả về nhiệm vụ của vai trò này..."
-                className="h-8 text-xs sm:text-sm border-transparent hover:border-border focus-visible:ring-0 focus-visible:bg-muted/40 shadow-none bg-transparent px-2 -ml-2 rounded-md w-full"
-              />
-            </div>
-          </div>
-        </div>
+  const visibleGroups = Object.entries(groupedMatrix).filter(
+    ([group, groupResources]) =>
+      groupResources.length > 0 &&
+      !(activeGroup && activeGroup !== "all" && activeGroup !== group)
+  )
 
-        <div className="flex flex-col gap-2 shrink-0 w-full lg:w-auto lg:items-end mt-2 lg:mt-0 pl-10 sm:pl-14 lg:pl-0">
-          {permissions?.update === false && mode === "edit" && (
-            <Badge variant="destructive" className="mb-2 w-fit">
-              Xem chế độ chỉ đọc
-            </Badge>
-          )}
-          <div className="flex items-center gap-2 w-full lg:w-auto">
+  return (
+    <div className="flex flex-col">
+      {/* ===== 1. Header bar navy 1 DÒNG — theo pattern chi tiết đơn bán
+            hàng (bg-sidebar). Mobile: chỉ ← Tên ⏻ ✕ Lưu; mã (chip) + mô tả
+            hiện từ md. Create mode: ô mã rớt xuống dòng riêng trên mobile. ===== */}
+      <div className="-mx-4 -mt-4 flex flex-wrap items-center gap-1.5 bg-sidebar px-3 py-2 text-sidebar-foreground shadow-md md:-mx-8 lg:mx-3 lg:mt-1 lg:rounded-xl lg:px-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => router.push(`/${lang}/roles`)}
+          className="h-8 w-8 shrink-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <Input
+          id="name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          placeholder="Tên vai trò..."
+          className="h-8 min-w-[110px] flex-1 rounded-md border-transparent bg-transparent px-2 text-base font-bold text-primary-foreground shadow-none transition-colors placeholder:text-primary-foreground/40 hover:border-white/20 focus-visible:bg-white/10 focus-visible:ring-0 sm:text-lg"
+          required
+        />
+        {mode === "edit" ? (
+          <span className="hidden shrink-0 items-center gap-0.5 md:flex">
+            <code className="rounded bg-white/10 px-1.5 py-1 font-mono text-[11px] text-primary-foreground/80">
+              {formData.code}
+            </code>
             <Button
-              variant="outline"
-              onClick={() => router.push(`/${lang}/roles`)}
-              disabled={isSubmitting}
-              className="h-9 rounded-[8px] flex-1 lg:flex-none"
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 shrink-0 text-primary-foreground/70 hover:bg-white/10 hover:text-primary-foreground"
+              onClick={() => {
+                navigator.clipboard.writeText(formData.code)
+                toast.success(`Đã copy mã: ${formData.code}`)
+              }}
+              title="Copy mã vai trò"
             >
-              <X className="mr-2 h-4 w-4" />
-              Hủy
+              <Copy className="h-3 w-3" />
             </Button>
-            <Button
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-              className="h-9 rounded-[8px] flex-1 lg:flex-none"
+          </span>
+        ) : (
+          <Input
+            id="code"
+            value={formData.code}
+            onChange={(e) => setFormData({ ...formData, code: e.target.value })}
+            placeholder="mã: warehouse_manager"
+            className="order-last h-7 basis-full rounded-md border-white/20 bg-white/10 px-2 font-mono text-xs text-primary-foreground shadow-none placeholder:text-primary-foreground/40 focus-visible:ring-1 focus-visible:ring-white/40 sm:order-none sm:w-44 sm:basis-auto"
+          />
+        )}
+        {/* Chip trạng thái màu (getStatusMeta.solidClass — cùng taxonomy với
+            header đơn bán hàng); bấm để đổi Hoạt động ↔ Khóa */}
+        {(() => {
+          const statusMeta = getStatusMeta(
+            formData.status,
+            formData.status === "inactive" ? "Khóa" : undefined
+          )
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                setFormData({
+                  ...formData,
+                  status: formData.status === "active" ? "inactive" : "active",
+                })
+              }
+              title="Bấm để đổi trạng thái"
+              className={cn(
+                "flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-2.5 text-[11px] font-semibold shadow-sm transition-opacity hover:opacity-85",
+                statusMeta.solidClass
+              )}
             >
-              <Save className="mr-2 h-4 w-4" />
-              {isSubmitting ? "Đang lưu..." : "Lưu"}
-            </Button>
-          </div>
-        </div>
+              <span className="h-1.5 w-1.5 rounded-full bg-white/80" />
+              {statusMeta.label}
+            </button>
+          )
+        })()}
+        <Input
+          id="description"
+          value={formData.description}
+          onChange={(e) =>
+            setFormData({ ...formData, description: e.target.value })
+          }
+          placeholder="Mô tả vai trò..."
+          className="hidden h-7 min-w-[140px] flex-1 rounded-md border-transparent bg-transparent px-2 text-xs text-primary-foreground shadow-none placeholder:text-primary-foreground/40 hover:border-white/20 focus-visible:bg-white/10 focus-visible:ring-0 md:block"
+        />
+        {permissions?.update === false && mode === "edit" && (
+          <Badge
+            variant="destructive"
+            className="hidden shrink-0 sm:inline-flex"
+          >
+            Chỉ đọc
+          </Badge>
+        )}
+        <Button
+          variant="ghost"
+          onClick={() => router.push(`/${lang}/roles`)}
+          disabled={isSubmitting}
+          title="Hủy"
+          className="h-8 w-8 shrink-0 p-0 text-primary-foreground/80 hover:bg-white/10 hover:text-primary-foreground sm:w-auto sm:px-2.5"
+        >
+          <X className="h-4 w-4" />
+          <span className="hidden sm:ml-1.5 sm:inline">Hủy</span>
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          disabled={isSubmitting}
+          className="h-8 shrink-0 bg-primary-foreground px-2.5 text-primary hover:bg-primary-foreground/90 sm:px-3"
+        >
+          <Save className="h-4 w-4" />
+          <span className="ml-1.5">{isSubmitting ? "Lưu..." : "Lưu"}</span>
+        </Button>
       </div>
 
-      {/* Section 2: Permissions Toolbar — thẻ trắng, input trắng */}
-      <div className="sticky top-4 z-20 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80 p-3 rounded-xl border border-border shadow-sm flex flex-col md:flex-row gap-3 items-center justify-between">
-        <div className="flex items-center gap-3 w-full md:w-auto flex-1">
-          <div className="relative w-full md:w-80">
-            <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card shadow-sm lg:mx-3">
+        {/* ===== 2. Toolbar sticky ===== */}
+        <div className="sticky top-0 z-20 flex flex-wrap items-center gap-2 border-b border-border bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:px-4">
+          <div className="relative min-w-[140px] flex-1 sm:max-w-64">
+            <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
             <Input
               placeholder="Tìm kiếm tài nguyên..."
-              className="pl-9 h-9 text-sm bg-card border border-border rounded-md"
+              className="h-8 rounded-md border border-border bg-card pl-8 text-sm"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
@@ -485,7 +541,7 @@ export function RoleFormPage({
             value={activeGroup || "all"}
             onValueChange={(val) => setActiveGroup(val === "all" ? null : val)}
           >
-            <SelectTrigger className="w-[180px] h-9 text-sm bg-card border border-border rounded-md">
+            <SelectTrigger className="h-8 w-36 rounded-md border border-border bg-card text-sm sm:w-44">
               <SelectValue placeholder="Tất cả nhóm" />
             </SelectTrigger>
             <SelectContent className="rounded-lg">
@@ -497,208 +553,196 @@ export function RoleFormPage({
               ))}
             </SelectContent>
           </Select>
+          <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+            {filteredMatrix.length} tài nguyên ·{" "}
+            <span className="font-semibold tabular-nums text-foreground">
+              {formData.permissions.length}
+            </span>
+            <span className="tabular-nums">/{totalAvailablePermissions}</span>{" "}
+            quyền
+          </p>
         </div>
-        <div className="flex items-center gap-2">
-          <Badge
-            variant="outline"
-            className="font-medium bg-card text-muted-foreground border-border h-7 px-2"
-          >
-            {filteredMatrix.length} tài nguyên
-          </Badge>
-        </div>
-      </div>
 
-      {/* Section 3: Permission Groups */}
-      <div className="space-y-8">
-        {Object.entries(groupedMatrix).map(([group, groupResources]) => {
-          // Skip if filtering by specific group
-          if (activeGroup && activeGroup !== "all" && activeGroup !== group)
-            return null;
-          if (groupResources.length === 0) return null;
-
-          const isFull = isGroupFullPermission(group);
-
-          return (
-            <div
-              key={group}
-              className="space-y-4 animate-in fade-in duration-500"
-            >
-              {/* Header nhóm — thẻ trắng, điểm nhấn là chip chevron indigo */}
-              <div
-                className="flex flex-col sm:flex-row sm:items-center justify-between bg-card p-2.5 rounded-xl border border-border mb-4 gap-3 shadow-sm cursor-pointer hover:border-primary/30 transition-colors"
-                onClick={() => toggleGroupCollapse(group)}
-              >
-                <div className="flex items-center gap-2.5 pl-1">
-                  <div className="bg-primary text-primary-foreground p-1.5 rounded-md shadow-sm transition-transform duration-200">
-                    {collapsedGroups[group] ? (
-                      <ChevronRight className="h-4 w-4" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" />
+        {/* ===== 3. Nhóm + tài nguyên dạng dòng ===== */}
+        {visibleGroups.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <Search className="mb-3 h-6 w-6 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              Không có tài nguyên nào khớp bộ lọc.
+            </p>
+          </div>
+        ) : (
+          visibleGroups.map(([group, groupResources]) => {
+            const collapsed = !!collapsedGroups[group]
+            const { selected, total } = groupSelectedCount(group)
+            const isFull = total > 0 && selected === total
+
+            return (
+              <section key={group}>
+                {/* Dòng tiêu đề nhóm — mảnh, không đóng khung */}
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => toggleGroupCollapse(group)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      toggleGroupCollapse(group)
+                    }
+                  }}
+                  className="flex cursor-pointer select-none items-center gap-2 border-b border-border bg-card px-4 py-2 transition-colors hover:bg-muted/40"
+                >
+                  {collapsed ? (
+                    <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  )}
+                  <h3 className="truncate text-xs font-semibold uppercase tracking-wide text-foreground">
+                    {group}
+                  </h3>
+                  <span
+                    className={cn(
+                      "whitespace-nowrap text-[11px] tabular-nums",
+                      isFull
+                        ? "font-medium text-emerald-600 dark:text-emerald-400"
+                        : "text-muted-foreground"
                     )}
-                  </div>
-                  <div>
-                    <h3 className="text-sm font-bold text-foreground flex items-center gap-2">
-                      {group}
-                      {isFull && (
-                        <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400 py-0 h-4.5 px-1.5 text-[9px] font-semibold">
-                          <Check className="w-2.5 h-2.5 mr-0.5" />
-                          Đã chọn hết
-                        </Badge>
-                      )}
-                    </h3>
-                    <p className="text-xs text-muted-foreground font-medium mt-0.5">
-                      {groupResources.length} tài nguyên
-                    </p>
-                  </div>
-                </div>
-                <div className="flex gap-1.5 self-start sm:self-auto pr-1">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggleAllForGroup(group, false);
-                    }}
-                    className="h-7 text-xs font-semibold text-muted-foreground hover:text-destructive bg-card rounded-md border"
                   >
-                    Bỏ chọn tất cả
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="default"
-                    size="sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggleAllForGroup(group, true);
-                    }}
-                    className="h-7 text-xs font-semibold rounded-md bg-primary text-primary-foreground"
+                    {groupResources.length} tài nguyên · {selected}/{total}
+                    {isFull && <Check className="ml-0.5 inline h-3 w-3" />}
+                  </span>
+                  <div
+                    className="ml-auto flex shrink-0 items-center gap-1"
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    Chọn tất cả
-                  </Button>
-                </div>
-              </div>
-
-              {!collapsedGroups[group] && (
-                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
-                  {groupResources.map((resource) => (
-                    <div
-                      key={resource.resource}
-                      className="border border-border bg-card rounded-xl shadow-sm hover:border-primary/40 transition-colors overflow-hidden group"
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => toggleAllForGroup(group, false)}
+                      disabled={selected === 0}
+                      className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
                     >
-                      {/* Header thẻ tài nguyên — trắng, chỉ phân tách bằng border */}
-                      <div className="p-2.5 border-b border-border/60 flex items-center justify-between">
-                        <div className="flex items-center gap-2.5">
-                          <div className="h-7 w-7 rounded-[6px] bg-card border border-border shadow-sm flex items-center justify-center shrink-0 text-muted-foreground group-hover:text-primary transition-colors">
-                            <DynamicIcon
-                              name={resource.icon as any}
-                              className="h-3.5 w-3.5"
-                            />
-                          </div>
-                          <div className="flex flex-col">
-                            <h4 className="text-sm font-bold text-foreground leading-tight">
-                              {resource.name}
-                            </h4>
-                            <span className="text-[10px] text-muted-foreground mt-0.5">
-                              {resource.resource}
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          className="flex items-center gap-2"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <span className="text-[10px] text-muted-foreground font-semibold hidden sm:inline">
-                            Tất cả
+                      Bỏ chọn
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => toggleAllForGroup(group, true)}
+                      disabled={isFull}
+                      className="h-6 px-2 text-xs font-semibold text-primary hover:text-primary"
+                    >
+                      Chọn tất cả
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Các dòng tài nguyên */}
+                {!collapsed && (
+                  <ul className="divide-y divide-border/70 border-b border-border">
+                    {groupResources.map((resource) => (
+                      <li key={resource.resource} className="px-4 py-2.5">
+                        <div className="flex items-center gap-2">
+                          <DynamicIcon
+                            name={resource.icon as any}
+                            className="h-4 w-4 shrink-0 text-muted-foreground"
+                          />
+                          <span className="truncate text-sm font-medium text-foreground">
+                            {resource.name}
                           </span>
-                          <Switch
-                            checked={isResourceFullPermission(
-                              resource.resource,
-                              resource.actions,
-                            )}
-                            onCheckedChange={(checked) =>
-                              toggleAllForResource(
+                          <code className="hidden shrink-0 font-mono text-[11px] text-muted-foreground sm:inline">
+                            {resource.resource}
+                          </code>
+                          <label className="ml-auto flex shrink-0 cursor-pointer items-center gap-1.5">
+                            <span className="hidden text-[10px] font-medium uppercase text-muted-foreground sm:inline">
+                              Tất cả
+                            </span>
+                            <Switch
+                              checked={isResourceFullPermission(
                                 resource.resource,
-                                resource.actions,
-                                checked,
-                              )
-                            }
-                            className="scale-75 origin-right"
-                          />
-                        </div>
-                      </div>
-
-                      <div className="p-2 grid grid-cols-2 gap-1.5">
-                        {actions.map((action) => {
-                          const isAvailable = resource.actions.includes(
-                            action.code,
-                          );
-                          const isChecked = hasPermission(
-                            resource.resource,
-                            action.code,
-                          );
-                          const staticConfig = mergedActionLabels[action.code];
-
-                          const config = {
-                            label:
-                              action.name || staticConfig?.label || action.code,
-                            icon: staticConfig?.icon || "•",
-                            color:
-                              staticConfig?.color || "text-muted-foreground",
-                          };
-
-                          if (!isAvailable) return null;
-
-                          return (
-                            <div
-                              key={action.code}
-                              className={cn(
-                                "flex items-center gap-2 px-2 py-1.5 rounded-[6px] border transition-all cursor-pointer relative overflow-hidden",
-                                isChecked
-                                  ? "bg-primary/5 border-primary/20 shadow-[0_1px_2px_rgba(0,0,0,0.02)]"
-                                  : "bg-card hover:bg-muted/50 border-border",
+                                resource.actions
                               )}
-                              onClick={() =>
-                                togglePermission(resource.resource, action.code)
+                              onCheckedChange={(checked) =>
+                                toggleAllForResource(
+                                  resource.resource,
+                                  resource.actions,
+                                  checked
+                                )
                               }
-                            >
-                              <div
+                              className="origin-right scale-75"
+                            />
+                          </label>
+                        </div>
+
+                        {/* Chip quyền — icon theo loại action, bấm để bật/tắt */}
+                        <div className="mt-1.5 flex flex-wrap gap-1.5 sm:pl-6">
+                          {actions.map((action) => {
+                            if (!resource.actions.includes(action.code))
+                              return null
+                            const isChecked = hasPermission(
+                              resource.resource,
+                              action.code
+                            )
+                            const label =
+                              action.name ||
+                              mergedActionLabels[action.code]?.label ||
+                              action.code
+                            const visual = getActionVisual(action.code)
+                            const ActionIcon = visual.icon
+
+                            return (
+                              <button
+                                key={action.code}
+                                type="button"
+                                onClick={() =>
+                                  togglePermission(
+                                    resource.resource,
+                                    action.code
+                                  )
+                                }
                                 className={cn(
-                                  "flex items-center justify-center w-3.5 h-3.5 rounded-[4px] border transition-colors shrink-0",
+                                  "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
                                   isChecked
-                                    ? "bg-primary border-primary text-primary-foreground"
-                                    : "bg-card border-border text-transparent",
+                                    ? "border-primary/40 bg-primary/10 text-primary"
+                                    : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
                                 )}
                               >
-                                <Check className="h-2.5 w-2.5" />
-                              </div>
-                              <div className="flex items-center gap-1.5 overflow-hidden">
-                                <span className="text-xs shrink-0 opacity-80 filter grayscale">
-                                  {config.icon}
-                                </span>
+                                {/* Ô tick tường minh — nhìn là biết đã cấp hay chưa */}
                                 <span
                                   className={cn(
-                                    "text-xs font-semibold truncate",
+                                    "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
                                     isChecked
-                                      ? "text-primary"
-                                      : "text-muted-foreground",
+                                      ? "border-primary bg-primary text-primary-foreground"
+                                      : "border-border bg-card text-transparent"
                                   )}
                                 >
-                                  {config.label}
+                                  <Check
+                                    className="h-2.5 w-2.5"
+                                    strokeWidth={3}
+                                  />
                                 </span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
+                                <ActionIcon
+                                  className={cn(
+                                    "h-3.5 w-3.5 shrink-0",
+                                    visual.cls,
+                                    !isChecked && "opacity-55"
+                                  )}
+                                />
+                                {label}
+                              </button>
+                            )
+                          })}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </section>
+            )
+          })
+        )}
       </div>
     </div>
-  );
+  )
 }