@goplusvn/core 0.1.25 → 0.1.26

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

@@ -1,27 +1,13 @@
 "use client";
 
-// Trang tạo/sửa VAI TRÒ — bố cục "MỘT KHỐI LIỀN" cho gọn:
-//   [header mỏng: ← tên · mã · switch · mô tả | Hủy/Lưu]
-//   [toolbar sticky: tìm kiếm · lọc nhóm · n tài nguyên · x/y quyền]
-//   [nhóm = dòng tiêu đề mảnh (collapse + Bỏ chọn/Chọn tất cả)]
-//   [tài nguyên = dòng + chip quyền bấm trực tiếp, wrap ngang]
-// Tất cả trong 1 container bg-card duy nhất — không lồng card trong card.
-//
+// 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,
@@ -33,20 +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 mặc định cho các action CRUD chuẩn — app truyền `actionLabels` để bổ
-// sung/ghi đè cho action nghiệp vụ riêng. (icon/color giữ trong type để tương
-// thích ngược; bố cục chip mới chỉ dùng label cho gọn.)
+// 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" },
@@ -58,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 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({
@@ -104,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 || "",
@@ -120,79 +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
 
-      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) => {
-      let allowedActions: string[] = [];
+      let allowedActions: string[] = []
       const defaultActions = actions
         .filter((a) => a.isDefault)
-        .map((a) => a.code);
+        .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)) {
-            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 {
             allowedActions = actions
               .map((a) => a.code)
-              .filter((code) => effectiveDefaultActions.includes(code));
+              .filter((code) => effectiveDefaultActions.includes(code))
           }
         } catch (_e) {
           allowedActions = actions
             .map((a) => a.code)
-            .filter((code) => effectiveDefaultActions.includes(code));
+            .filter((code) => effectiveDefaultActions.includes(code))
         }
       } else {
         allowedActions = actions
           .map((a) => a.code)
-          .filter((code) => effectiveDefaultActions.includes(code));
+          .filter((code) => effectiveDefaultActions.includes(code))
       }
 
       return {
@@ -202,157 +243,151 @@ export function RoleFormPage({
         group: getLocalizedName(resource.group) || "Khác",
         description: resource.description,
         actions: allowedActions,
-      };
-    });
-  }, [resources, actions, getLocalizedName]);
+      }
+    })
+  }, [resources, actions, getLocalizedName])
 
-  // Tổng số quyền khả dụng (mẫu số của "x/y quyền" trên toolbar)
   const totalAvailablePermissions = React.useMemo(
     () => permissionMatrix.reduce((sum, r) => sum + r.actions.length, 0),
-    [permissionMatrix],
-  );
+    [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) {
       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] || [];
+      const groupResources = groupedMatrix[groupName] || []
       return groupResources.flatMap((r) =>
         actions
           .filter((a) => r.actions.includes(a.code))
-          .map((a) => `${a.code}:${r.resource}`),
-      );
+          .map((a) => `${a.code}:${r.resource}`)
+      )
     },
-    [groupedMatrix, actions],
-  );
+    [groupedMatrix, actions]
+  )
 
   const toggleAllForGroup = (groupName: string, enable: boolean) => {
-    const groupPermissions = groupPermissionCodes(groupName);
-    let newPermissions = [...formData.permissions];
+    const groupPermissions = groupPermissionCodes(groupName)
+    let newPermissions = [...formData.permissions]
 
     if (enable) {
-      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p));
-      newPermissions = [...newPermissions, ...toAdd];
+      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p))
+      newPermissions = [...newPermissions, ...toAdd]
     } else {
       newPermissions = newPermissions.filter(
-        (p) => !groupPermissions.includes(p),
-      );
+        (p) => !groupPermissions.includes(p)
+      )
     }
 
-    setFormData({ ...formData, permissions: newPermissions });
-  };
+    setFormData({ ...formData, permissions: newPermissions })
+  }
 
-  // Số quyền đã chọn trong 1 nhóm (tử số hiển thị trên dòng nhóm)
   const groupSelectedCount = (groupName: string) => {
-    const codes = groupPermissionCodes(groupName);
+    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", {
@@ -360,119 +395,140 @@ 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)
     }
-  };
+  }
 
   const visibleGroups = Object.entries(groupedMatrix).filter(
     ([group, groupResources]) =>
       groupResources.length > 0 &&
-      !(activeGroup && activeGroup !== "all" && activeGroup !== group),
-  );
+      !(activeGroup && activeGroup !== "all" && activeGroup !== group)
+  )
 
   return (
-    <div className="container mx-auto max-w-6xl py-4">
-      <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
-        {/* ===== 1. Header mỏng ===== */}
-        <div className="flex flex-col gap-3 border-b border-border px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex min-w-0 flex-1 items-start gap-1">
+    <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="ghost"
               size="icon"
-              onClick={() => router.push(`/${lang}/roles`)}
-              className="mt-0.5 h-8 w-8 shrink-0"
-            >
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-            <div className="min-w-0 flex-1">
-              <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="h-auto w-full rounded-md border-transparent bg-transparent px-2 py-1 text-lg font-bold shadow-none transition-colors placeholder:text-muted-foreground/40 hover:border-border focus-visible:border-primary focus-visible:bg-card focus-visible:ring-0 sm:text-xl"
-                required
-              />
-              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1.5 px-2">
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[10px] font-medium uppercase text-muted-foreground">
-                    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 w-36 rounded-md border border-border bg-card text-xs shadow-none focus-visible:ring-1 focus-visible:ring-primary sm:w-44"
-                  />
-                </div>
-                <label className="flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-card px-2">
-                  <span className="text-[10px] font-medium uppercase text-muted-foreground">
-                    Hoạt động
-                  </span>
-                  <Switch
-                    checked={formData.status === "active"}
-                    onCheckedChange={(checked) =>
-                      setFormData({
-                        ...formData,
-                        status: checked ? "active" : "inactive",
-                      })
-                    }
-                    className="origin-left scale-75"
-                  />
-                </label>
-                <Input
-                  id="description"
-                  value={formData.description}
-                  onChange={(e) =>
-                    setFormData({ ...formData, description: e.target.value })
-                  }
-                  placeholder="Thêm mô tả về vai trò này..."
-                  className="h-7 min-w-[180px] flex-1 rounded-md border-transparent bg-transparent px-2 text-xs shadow-none hover:border-border focus-visible:bg-muted/30 focus-visible:ring-0"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="flex shrink-0 items-center gap-2 self-end sm:self-start">
-            {permissions?.update === false && mode === "edit" && (
-              <Badge variant="destructive">Chỉ đọc</Badge>
-            )}
-            <Button
-              variant="outline"
-              onClick={() => router.push(`/${lang}/roles`)}
-              disabled={isSubmitting}
-              className="h-8"
+              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-1.5 h-4 w-4" />
-              Hủy
+              <Copy className="h-3 w-3" />
             </Button>
-            <Button
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-              className="h-8"
+          </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-1.5 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>
 
+      <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-col gap-2 border-b border-border bg-card/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/85 sm:flex-row sm:items-center">
-          <div className="relative w-full sm:w-64">
+        <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..."
@@ -485,7 +541,7 @@ export function RoleFormPage({
             value={activeGroup || "all"}
             onValueChange={(val) => setActiveGroup(val === "all" ? null : val)}
           >
-            <SelectTrigger className="h-8 w-full rounded-md border border-border bg-card text-sm sm:w-44">
+            <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,7 +553,7 @@ export function RoleFormPage({
               ))}
             </SelectContent>
           </Select>
-          <p className="whitespace-nowrap text-xs text-muted-foreground sm:ml-auto">
+          <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}
@@ -517,9 +573,9 @@ export function RoleFormPage({
           </div>
         ) : (
           visibleGroups.map(([group, groupResources]) => {
-            const collapsed = !!collapsedGroups[group];
-            const { selected, total } = groupSelectedCount(group);
-            const isFull = total > 0 && selected === total;
+            const collapsed = !!collapsedGroups[group]
+            const { selected, total } = groupSelectedCount(group)
+            const isFull = total > 0 && selected === total
 
             return (
               <section key={group}>
@@ -530,8 +586,8 @@ export function RoleFormPage({
                   onClick={() => toggleGroupCollapse(group)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      toggleGroupCollapse(group);
+                      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"
@@ -549,7 +605,7 @@ export function RoleFormPage({
                       "whitespace-nowrap text-[11px] tabular-nums",
                       isFull
                         ? "font-medium text-emerald-600 dark:text-emerald-400"
-                        : "text-muted-foreground",
+                        : "text-muted-foreground"
                     )}
                   >
                     {groupResources.length} tài nguyên · {selected}/{total}
@@ -605,13 +661,13 @@ export function RoleFormPage({
                             <Switch
                               checked={isResourceFullPermission(
                                 resource.resource,
-                                resource.actions,
+                                resource.actions
                               )}
                               onCheckedChange={(checked) =>
                                 toggleAllForResource(
                                   resource.resource,
                                   resource.actions,
-                                  checked,
+                                  checked
                                 )
                               }
                               className="origin-right scale-75"
@@ -619,19 +675,21 @@ export function RoleFormPage({
                           </label>
                         </div>
 
-                        {/* Chip quyền — bấm để bật/tắt, wrap ngang */}
+                        {/* 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;
+                              return null
                             const isChecked = hasPermission(
                               resource.resource,
-                              action.code,
-                            );
+                              action.code
+                            )
                             const label =
                               action.name ||
                               mergedActionLabels[action.code]?.label ||
-                              action.code;
+                              action.code
+                            const visual = getActionVisual(action.code)
+                            const ActionIcon = visual.icon
 
                             return (
                               <button
@@ -640,25 +698,40 @@ export function RoleFormPage({
                                 onClick={() =>
                                   togglePermission(
                                     resource.resource,
-                                    action.code,
+                                    action.code
                                   )
                                 }
                                 className={cn(
-                                  "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
+                                  "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
                                   isChecked
-                                    ? "border-primary/30 bg-primary/5 text-primary"
-                                    : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground",
+                                    ? "border-primary/40 bg-primary/10 text-primary"
+                                    : "border-border bg-card text-muted-foreground hover:border-primary/30 hover:text-foreground"
                                 )}
                               >
-                                <Check
+                                {/* Ô tick tường minh — nhìn là biết đã cấp hay chưa */}
+                                <span
+                                  className={cn(
+                                    "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
+                                    isChecked
+                                      ? "border-primary bg-primary text-primary-foreground"
+                                      : "border-border bg-card text-transparent"
+                                  )}
+                                >
+                                  <Check
+                                    className="h-2.5 w-2.5"
+                                    strokeWidth={3}
+                                  />
+                                </span>
+                                <ActionIcon
                                   className={cn(
-                                    "h-3 w-3",
-                                    !isChecked && "opacity-0",
+                                    "h-3.5 w-3.5 shrink-0",
+                                    visual.cls,
+                                    !isChecked && "opacity-55"
                                   )}
                                 />
                                 {label}
                               </button>
-                            );
+                            )
                           })}
                         </div>
                       </li>
@@ -666,10 +739,10 @@ export function RoleFormPage({
                   </ul>
                 )}
               </section>
-            );
+            )
           })
         )}
       </div>
     </div>
-  );
+  )
 }