@goplusvn/core 0.1.23 → 0.1.25

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.1.25 — RoleFormPage bố cục "một khối liền" (gọn)
+
+Trang chi tiết vai trò trước đây phình: header chiếm 1/3 màn, mỗi nhóm là card
+header riêng + lưới card tài nguyên lồng 3 lớp viền. Viết lại thành MỘT
+container bg-card duy nhất:
+- Header mỏng 2 dòng (← tên inline-edit · mã · switch hoạt động · 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" (đếm quyền
+  đã chọn realtime).
+- Nhóm = dòng tiêu đề mảnh: collapse + "k tài nguyên · x/y" + Bỏ chọn/Chọn tất cả.
+- Tài nguyên = dòng (icon · tên · mã | switch Tất cả) + CHIP quyền bấm trực
+  tiếp wrap ngang (bỏ ô emoji, check + label, tint primary khi chọn).
+Props không đổi (actionLabels giữ tương thích — chip mới chỉ dùng label).
+
+## 0.1.24 — Canvas app tông TRẮNG + fix multi-select tràn nút đóng
+
+- **Canvas toàn app hết ngả xám**: `SidebarInset` (layout dọc) và
+  `HorizontalLayout` bỏ lớp phủ `bg-muted/40` → dùng token `bg-background`
+  (app tự quyết tông nền; vinhhoa/wu chuộng trắng). Đây là lớp xám bao mọi
+  trang từng gây gotcha "khung xám bọc POS".
+- **MultiSelect**: hàng "Chọn tất cả / Bỏ chọn / n/N / ✕" bị tràn — nút đóng
+  ✕ đẩy ra ngoài mép panel khi trigger hẹp. Redesign: panel `min-w-[15rem]`,
+  hàng nút gọn (h-7, px-1.5, nhóm phải `shrink-0`, nhóm trái `min-w-0`,
+  `overflow-hidden`), nút đóng đổi từ đỏ (dễ nhầm "xóa") → trung tính.
+
 ## 0.1.23 — Trang RBAC hoàn chỉnh trong core (roles/resources/actions), restyle trắng
 
 3 trang quản trị RBAC trước đây mỗi app tự chép (vinhhoa/wu-vpbank…) nay là trang

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

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

@@ -1,7 +1,11 @@
 "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Ò — 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.
 //
 // API contract: POST /api/roles, PUT /api/roles/:id.
 
@@ -40,8 +44,9 @@ export interface ActionLabelConfig {
   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 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.)
 const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
   view: { label: "Xem", icon: "👁️", color: "text-blue-600" },
   create: { label: "Tạo", icon: "➕", color: "text-green-600" },
@@ -85,7 +90,7 @@ export interface RoleFormPageProps {
     status: string;
     permissions: string[];
   };
-  /** Nhãn/icon bổ sung cho action nghiệp vụ riêng của app (merge đè mặc định). */
+  /** Nhãn bổ sung cho action nghiệp vụ riêng của app (merge đè mặc định). */
   actionLabels?: Record<string, ActionLabelConfig>;
 }
 
@@ -136,7 +141,6 @@ export function RoleFormPage({
       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;
       for (const part of parts) {
@@ -154,12 +158,10 @@ export function RoleFormPage({
   // Build dynamic permission matrix
   const permissionMatrix = React.useMemo(() => {
     return resources.map((resource) => {
-      // Default actions using database configuration
       let allowedActions: string[] = [];
       const defaultActions = actions
         .filter((a) => a.isDefault)
         .map((a) => a.code);
-      // Fallback to hardcoded if no default actions found (safety check)
       const effectiveDefaultActions =
         defaultActions.length > 0
           ? defaultActions
@@ -173,25 +175,21 @@ export function RoleFormPage({
               : 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[];
             allowedActions = actions
               .map((a) => a.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));
           }
         } catch (_e) {
-          // Ignore config parsing errors, fallback to defaults
           allowedActions = actions
             .map((a) => a.code)
             .filter((code) => effectiveDefaultActions.includes(code));
         }
       } else {
-        // Case 1: No config -> use defaults
         allowedActions = actions
           .map((a) => a.code)
           .filter((code) => effectiveDefaultActions.includes(code));
@@ -208,6 +206,12 @@ export function RoleFormPage({
     });
   }, [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],
+  );
+
   // Filter matrix based on search
   const filteredMatrix = React.useMemo(() => {
     if (!searchTerm.trim()) return permissionMatrix;
@@ -238,7 +242,6 @@ export function RoleFormPage({
   React.useEffect(() => {
     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))
@@ -267,22 +270,26 @@ export function RoleFormPage({
     setFormData({ ...formData, permissions: newPermissions });
   };
 
-  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}`),
-    );
+  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 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];
     } else {
-      // Remove all permissions for this group
       newPermissions = newPermissions.filter(
         (p) => !groupPermissions.includes(p),
       );
@@ -291,18 +298,13 @@ export function RoleFormPage({
     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))
-    );
+  // 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);
+    return {
+      selected: codes.filter((p) => formData.permissions.includes(p)).length,
+      total: codes.length,
+    };
   };
 
   const toggleAllForResource = (
@@ -369,21 +371,27 @@ export function RoleFormPage({
     }
   };
 
+  const visibleGroups = Object.entries(groupedMatrix).filter(
+    ([group, groupResources]) =>
+      groupResources.length > 0 &&
+      !(activeGroup && activeGroup !== "all" && activeGroup !== group),
+  );
+
   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>
+    <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">
+            <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}
@@ -391,12 +399,12 @@ export function RoleFormPage({
                   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"
+                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="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">
+              <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
@@ -407,12 +415,12 @@ export function RoleFormPage({
                     }
                     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"
+                    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>
-                <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:
+                <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"}
@@ -422,61 +430,53 @@ export function RoleFormPage({
                         status: checked ? "active" : "inactive",
                       })
                     }
-                    className="scale-75 origin-left"
+                    className="origin-left scale-75"
                   />
-                </div>
+                </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 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>
 
-        <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">
+          <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-9 rounded-[8px] flex-1 lg:flex-none"
+              className="h-8"
             >
-              <X className="mr-2 h-4 w-4" />
+              <X className="mr-1.5 h-4 w-4" />
               Hủy
             </Button>
             <Button
               onClick={handleSubmit}
               disabled={isSubmitting}
-              className="h-9 rounded-[8px] flex-1 lg:flex-none"
+              className="h-8"
             >
-              <Save className="mr-2 h-4 w-4" />
+              <Save className="mr-1.5 h-4 w-4" />
               {isSubmitting ? "Đang lưu..." : "Lưu"}
             </Button>
           </div>
         </div>
-      </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" />
+        {/* ===== 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">
+            <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 +485,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-full 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,207 +497,178 @@ export function RoleFormPage({
               ))}
             </SelectContent>
           </Select>
+          <p className="whitespace-nowrap text-xs text-muted-foreground sm:ml-auto">
+            {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>
+                    <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"
+                    >
+                      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>
-              </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"
-                    >
-                      {/* 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ả
+                {/* 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",
                               )}
-                              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 — bấm để bật/tắt, wrap ngang */}
+                        <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;
+
+                            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 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/30 bg-primary/5 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>
-                                <span
+                                <Check
                                   className={cn(
-                                    "text-xs font-semibold truncate",
-                                    isChecked
-                                      ? "text-primary"
-                                      : "text-muted-foreground",
+                                    "h-3 w-3",
+                                    !isChecked && "opacity-0",
                                   )}
-                                >
-                                  {config.label}
-                                </span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
+                                />
+                                {label}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </section>
+            );
+          })
+        )}
       </div>
     </div>
   );

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

@@ -681,7 +681,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         {open && (
           <div
             ref={dropdownRef}
-            className="absolute z-[100] mt-1 w-full rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
+            className="absolute z-[100] mt-1 w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
             style={{
               top: "100%",
               left: 0,
@@ -746,14 +746,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 )}
               </div>
 
-              {/* Action Buttons */}
-              <div className="flex items-center justify-between border-b p-1">
-                <div className="flex items-center">
+              {/* Action Buttons — hàng gọn, không cho tràn: nhóm trái min-w-0,
+                  nhóm phải shrink-0; nút đóng màu trung tính (không phải xóa) */}
+              <div className="flex items-center justify-between gap-1 overflow-hidden border-b p-1">
+                <div className="flex min-w-0 items-center">
                   <Button
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleSelectAll();
@@ -765,7 +766,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleClearAll();
@@ -774,7 +775,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     Bỏ chọn
                   </Button>
                 </div>
-                <div className="flex items-center">
+                <div className="flex shrink-0 items-center">
                   <span
                     className="whitespace-nowrap px-1 text-[11px] tabular-nums text-muted-foreground"
                     title={`Đã chọn ${value.length} / ${
@@ -790,13 +791,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     size="sm"
                     aria-label="Đóng"
                     title="Đóng"
-                    className="h-8 w-8 shrink-0 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    className="h-7 w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground"
                     onClick={(e) => {
                       e.stopPropagation();
                       setOpen(false);
                     }}
                   >
-                    <X className="h-4 w-4" />
+                    <X className="h-3.5 w-3.5" />
                   </Button>
                 </div>
               </div>

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

@@ -35,7 +35,7 @@ export function HorizontalLayout({
         searchResults={searchResults}
         searchLoading={searchLoading}
       />
-      <div className="w-full min-h-screen flex flex-col bg-muted/40">
+      <div className="w-full min-h-screen flex flex-col bg-background">
         <HorizontalLayoutHeader
           dictionary={dictionary}
           navigation={navigation}

package/src/ui/primitives/sidebar.tsx

@@ -396,7 +396,9 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-muted/40 transition-[margin] duration-200 ease-linear",
+        // Canvas app dùng token bg-background (app tự quyết tông — vinhhoa/wu
+        // muốn nền TRẮNG); trước đây bg-muted/40 phủ xám toàn bộ trang.
+        "relative flex min-h-svh flex-1 flex-col bg-background transition-[margin] duration-200 ease-linear",
         // Inset: content is a card floating with a uniform m-2 gap on ALL sides
         // (no ml-0 override) so there's a small gap between the sidebar and the
         // content/header instead of them touching.