@goplusvn/core 0.1.22 → 0.1.24

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 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
+core dùng chung, đồng thời restyle bỏ các mảng `bg-muted`/raw-slate xám → bề mặt
+trắng `bg-card`, phân tách bằng border; nút sửa/xóa trên hàng LUÔN hiển thị
+(trước ẩn sau hover → mobile không dùng được).
+
+- `ResourceListPage` (viết lại): nhóm tài nguyên theo section, bung hàng sửa
+  action inline, Action Manager dialog, sync. API: `/api/resources`, `/api/actions`.
+- `ActionListPage` (viết lại): danh sách hành động + ngữ cảnh sử dụng
+  (tài nguyên · vai trò · người dùng, cần `/api/actions/usage` — optional).
+- `RoleFormPage` (MỚI): form tạo/sửa vai trò + ma trận phân quyền theo nhóm;
+  prop `actionLabels` cho app bổ sung nhãn action nghiệp vụ riêng.
+- `RoleListPage`: thêm prop `importSlot` (nhét ImportDialog app-specific vào
+  toolbar); `RoleToolbar` viết lại theo `ListToolbar` + `CrudExportButton`
+  (bỏ raw hex, nút import/export chết); `RoleCard` restyle token semantic.
+- Barrel client-safe mới: `@goerp/core/rbac/pages` (không kéo server code).
+
+⚠️ Breaking (không consumer nào dùng bản cũ): `ResourceListPage`/`ActionListPage`
+đổi từ wrapper `EntityCrudPage` (props `{lang, session, dictionary, config}`)
+sang trang đầy đủ (props không bắt buộc / `{permissions}`).
+
 ## 0.1.19 — applyBrandThemeTokens (gom logic áp theme, subtle dark-aware)
 
 Mỗi app copy y hệt logic áp bảng màu thương hiệu vào CSS token trong theme-provider

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

package/src/rbac/components/roles/role-card.tsx

@@ -1,18 +1,21 @@
 "use client";
 
+// Thẻ vai trò trong grid danh sách — bề mặt trắng (bg-card), số liệu đóng
+// khung border thay vì tô nền xám; token semantic thay raw slate.
+
 import { memo, useCallback } from "react";
-import { format } from "date-fns";
 import { useRouter } from "next/navigation";
+import { Copy, Edit, Trash2 } from "lucide-react";
+
 import {
+  Badge,
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-  Button,
-  Badge,
 } from "../../../ui";
-import { Edit, Copy, Trash2 } from "lucide-react";
 import type { Role } from "../../types";
 
 interface RoleCardProps {
@@ -60,18 +63,16 @@ export const RoleCard = memo(function RoleCard({
   }, [onDelete, role]);
 
   return (
-    <Card className="group relative transition-all duration-300 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 rounded-[12px] shadow-sm hover:shadow-md hover:border-primary/40 overflow-hidden">
+    <Card className="bg-card border border-border rounded-[12px] shadow-sm transition-all hover:shadow-md hover:border-primary/40 overflow-hidden">
       <CardHeader className="p-4 pb-2">
         <div className="flex items-start justify-between">
-          <div className="flex items-center space-x-3">
-            <div className="relative flex items-center justify-center">
-              <div className={`w-3 h-3 rounded-full ${roleColor} ring-4 ring-slate-50 dark:ring-slate-800/50`} />
-            </div>
+          <div className="flex items-center space-x-2.5">
+            <div className={`w-2.5 h-2.5 rounded-full ${roleColor}`} />
             <div>
-              <CardTitle className="text-[15px] font-bold text-slate-900 dark:text-slate-100 leading-tight">
+              <CardTitle className="text-[15px] font-bold text-foreground leading-tight">
                 {role.name}
               </CardTitle>
-              <CardDescription className="text-[11px] font-mono text-slate-500 mt-0.5">
+              <CardDescription className="text-[11px] font-mono text-muted-foreground mt-0.5">
                 {role.code}
               </CardDescription>
             </div>
@@ -86,7 +87,7 @@ export const RoleCard = memo(function RoleCard({
           ) : (
             <Badge
               variant="outline"
-              className="bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700 text-[10px] px-2 py-0 h-5 font-semibold"
+              className="bg-muted text-muted-foreground border-border text-[10px] px-2 py-0 h-5 font-semibold"
             >
               Khóa
             </Badge>
@@ -94,24 +95,24 @@ export const RoleCard = memo(function RoleCard({
         </div>
       </CardHeader>
       <CardContent className="p-4 pt-0 space-y-3">
-        <p className="text-[13px] text-slate-500 dark:text-slate-400 line-clamp-2 min-h-[2.5rem] leading-relaxed">
+        <p className="text-[13px] text-muted-foreground line-clamp-2 min-h-[2.5rem] leading-relaxed">
           {role.description || "Chưa có mô tả chi tiết cho vai trò này."}
         </p>
 
-        <div className="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 rounded-lg p-2.5 border border-slate-100 dark:border-slate-800">
-          <div className="flex flex-col items-center flex-1 border-r border-slate-200 dark:border-slate-700">
-            <span className="text-[16px] font-black text-primary leading-none mb-1">
+        <div className="flex items-center justify-between rounded-lg p-2.5 border border-border bg-card">
+          <div className="flex flex-col items-center flex-1 border-r border-border">
+            <span className="text-[16px] font-black text-primary leading-none mb-1 tabular-nums">
               {permissionsCount}
             </span>
-            <span className="text-[9px] text-slate-500 font-bold uppercase tracking-wider">
+            <span className="text-[9px] text-muted-foreground font-bold uppercase tracking-wider">
               Quyền hạn
             </span>
           </div>
           <div className="flex flex-col items-center flex-1">
-            <span className="text-[16px] font-black text-emerald-600 dark:text-emerald-500 leading-none mb-1">
+            <span className="text-[16px] font-black text-emerald-600 dark:text-emerald-500 leading-none mb-1 tabular-nums">
               {role.usersCount}
             </span>
-            <span className="text-[9px] text-slate-500 font-bold uppercase tracking-wider">
+            <span className="text-[9px] text-muted-foreground font-bold uppercase tracking-wider">
               Người dùng
             </span>
           </div>
@@ -122,10 +123,10 @@ export const RoleCard = memo(function RoleCard({
             <Button
               variant="outline"
               size="sm"
-              className="flex-1 h-8 text-[12px] font-medium bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 transition-colors rounded-[8px] shadow-sm"
+              className="flex-1 h-8 text-[12px] font-medium bg-card hover:bg-muted/50 transition-colors rounded-[8px] shadow-sm"
               onClick={handleEdit}
             >
-              <Edit className="mr-1.5 h-3.5 w-3.5 text-slate-400" />
+              <Edit className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
               Sửa
             </Button>
           )}
@@ -133,10 +134,10 @@ export const RoleCard = memo(function RoleCard({
             <Button
               variant="outline"
               size="sm"
-              className="flex-1 h-8 text-[12px] font-medium bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 transition-colors rounded-[8px] shadow-sm"
+              className="flex-1 h-8 text-[12px] font-medium bg-card hover:bg-muted/50 transition-colors rounded-[8px] shadow-sm"
               onClick={handleDuplicate}
             >
-              <Copy className="mr-1.5 h-3.5 w-3.5 text-slate-400" />
+              <Copy className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
               Chép
             </Button>
           )}
@@ -144,7 +145,7 @@ export const RoleCard = memo(function RoleCard({
             <Button
               variant="outline"
               size="sm"
-              className="flex-1 h-8 text-[12px] font-medium border-slate-200 dark:border-slate-800 text-red-600 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 hover:text-red-700 dark:hover:text-red-400 transition-colors bg-white dark:bg-slate-900 rounded-[8px] shadow-sm"
+              className="flex-1 h-8 text-[12px] font-medium bg-card text-destructive hover:bg-destructive/10 hover:text-destructive transition-colors rounded-[8px] shadow-sm"
               onClick={handleDelete}
             >
               <Trash2 className="mr-1.5 h-3.5 w-3.5" />

package/src/rbac/components/roles/role-toolbar.tsx

@@ -1,123 +1,109 @@
 "use client";
 
-import { memo, useState, useEffect } from "react";
+// Toolbar trang vai trò — dùng ListToolbar chung (trắng, không raw hex).
+// Import là phần app-specific (mỗi app một ImportDialog riêng) nên nhận qua
+// slot `importSlot`; Export dùng CrudExportButton của core.
+
+import { memo, useMemo } from "react";
 import { useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+
 import {
-  Button,
-  Input,
+  AdvancedField,
+  ListToolbar,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "../../../ui";
-import { Plus, Search, Download, Upload, X } from "lucide-react";
+import { CrudExportButton } from "../../../crud/components/crud-export-button";
+import type { ActiveFilter } from "../../../types";
 
 interface RoleToolbarProps {
-  dictionary: any;
-  totalRows: number;
   searchTerm: string;
   statusFilter: string;
   onSearchChange: (value: string) => void;
   onStatusFilterChange: (value: string) => void;
   lang: string;
+  dictionary?: any;
   canCreate?: boolean;
   canImport?: boolean;
   canExport?: boolean;
+  /** Nút Import app-specific (vd ImportDialog của vinhhoa). Chỉ render khi canImport. */
+  importSlot?: ReactNode;
+  /** Giữ tương thích chữ ký cũ — không còn hiển thị. */
+  totalRows?: number;
 }
 
 export const RoleToolbar = memo(function RoleToolbar({
-  dictionary,
-  totalRows,
   searchTerm,
   statusFilter,
   onSearchChange,
   onStatusFilterChange,
   lang,
+  dictionary,
   canCreate,
   canImport,
   canExport,
+  importSlot,
 }: RoleToolbarProps) {
   const router = useRouter();
-  const [localSearchTerm, setLocalSearchTerm] = useState(searchTerm);
-
-  // Sync local state when prop changes (e.g. clear filter from parent)
-  useEffect(() => {
-    setLocalSearchTerm(searchTerm);
-  }, [searchTerm]);
 
-  // Debounce search change
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      if (localSearchTerm !== searchTerm) {
-        onSearchChange(localSearchTerm);
-      }
-    }, 500);
+  const exportFilters = useMemo(() => {
+    const filters: ActiveFilter[] = [];
+    if (statusFilter && statusFilter !== "all") {
+      filters.push({ name: "status", operator: "eq", value: statusFilter });
+    }
+    return filters;
+  }, [statusFilter]);
 
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [localSearchTerm, onSearchChange, searchTerm]);
+  const advancedCount = statusFilter && statusFilter !== "all" ? 1 : 0;
+  const isFiltered = !!searchTerm || (!!statusFilter && statusFilter !== "all");
 
   return (
-    <div className="flex items-center gap-2 flex-wrap">
-      <div className="relative">
-        <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
-        <Input
-          placeholder="Tìm kiếm vai trò..."
-          value={localSearchTerm}
-          onChange={(e) => setLocalSearchTerm(e.target.value)}
-          className="h-9 w-[220px] lg:w-[280px] pl-9 text-[13px] bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50 transition-colors shadow-sm rounded-[6px] focus-visible:ring-1 focus-visible:ring-primary"
-        />
-        {localSearchTerm && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 rounded-md hover:bg-muted"
-            onClick={() => setLocalSearchTerm("")}
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
-        )}
-      </div>
-
-      <Select value={statusFilter} onValueChange={onStatusFilterChange}>
-        <SelectTrigger className="h-9 w-[160px] text-[13px] bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50 transition-colors shadow-sm rounded-[6px] focus-visible:ring-primary">
-          <SelectValue placeholder="Trạng thái" />
-        </SelectTrigger>
-        <SelectContent className="rounded-lg">
-          <SelectItem value="all">Tất cả</SelectItem>
-          <SelectItem value="active">Hoạt động</SelectItem>
-          <SelectItem value="inactive">Không hoạt động</SelectItem>
-        </SelectContent>
-      </Select>
-
-      <div className="ml-auto flex items-center gap-2">
-        {canImport && (
-          <Button variant="outline" size="sm" className="h-9 px-3 rounded-[6px] shadow-sm bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50">
-            <Upload className="h-4 w-4 lg:mr-2" />
-            <span className="hidden lg:inline text-[13px]">Nhập</span>
-          </Button>
-        )}
-        
-        {canExport && (
-          <Button variant="outline" size="sm" className="h-9 px-3 rounded-[6px] shadow-sm bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50">
-            <Download className="h-4 w-4 lg:mr-2" />
-            <span className="hidden lg:inline text-[13px]">Xuất</span>
-          </Button>
-        )}
-
-        {canCreate && (
-          <Button
-            onClick={() => router.push(`/${lang}/roles/new`)}
-            size="sm"
-            className="h-9 px-4 text-[13px] bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm rounded-[6px] font-medium border-0"
-          >
-            <Plus className="mr-1.5 h-4 w-4" />
-            <span>Thêm mới</span>
-          </Button>
-        )}
-      </div>
-    </div>
+    <ListToolbar
+      search={searchTerm}
+      onSearchChange={onSearchChange}
+      searchPlaceholder={dictionary?.common?.search || "Tìm kiếm vai trò..."}
+      isFiltered={isFiltered}
+      onReset={() => {
+        onSearchChange("");
+        onStatusFilterChange("all");
+      }}
+      onCreate={() => router.push(`/${lang}/roles/new`)}
+      canCreate={!!canCreate}
+      createLabel="Tạo mới"
+      advancedCount={advancedCount}
+      advanced={
+        <AdvancedField label="Trạng thái">
+          <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+            <SelectTrigger className="h-9 w-full shadow-sm">
+              <SelectValue placeholder="Tất cả" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Tất cả</SelectItem>
+              <SelectItem value="active">Hoạt động</SelectItem>
+              <SelectItem value="inactive">Không hoạt động</SelectItem>
+            </SelectContent>
+          </Select>
+        </AdvancedField>
+      }
+      tableControls={
+        canImport || canExport ? (
+          <>
+            {canImport && importSlot}
+            {canExport && (
+              <CrudExportButton
+                endpoint="/api/roles/export"
+                filters={exportFilters}
+                search={searchTerm}
+                canExport={true}
+              />
+            )}
+          </>
+        ) : undefined
+      }
+    />
   );
 });

package/src/rbac/index.ts

@@ -136,4 +136,12 @@ export * from "./role-service";
 export * from "./resource-service";
 export * from "./resource-validator";
 export { RoleListPage } from "./pages/role-list-page";
+export { RoleFormPage } from "./pages/role-form-page";
+export type {
+  RoleFormPageProps,
+  ActionLabelConfig,
+} from "./pages/role-form-page";
+export { ResourceListPage } from "./pages/resource-list-page";
+export { ActionListPage } from "./pages/action-list-page";
+export type { ActionListPageProps } from "./pages/action-list-page";
 

package/src/rbac/lib/fetch-error.ts

@@ -0,0 +1,26 @@
+// Small fetch-error helpers for the RBAC management pages. Apps with richer
+// error glue (persisted error logs, i18n) can wrap these pages and keep their
+// own handling; the defaults below only surface the server message via toast.
+
+export function errorMessage(error: unknown, fallback: string): string {
+  if (typeof error === "string" && error) return error;
+  if (error && typeof error === "object") {
+    const e = error as { error?: unknown; message?: unknown };
+    if (typeof e.error === "string" && e.error) return e.error;
+    if (typeof e.message === "string" && e.message) return e.message;
+  }
+  return fallback;
+}
+
+export async function throwFetchError(
+  res: Response,
+  fallback: string,
+): Promise<never> {
+  let data: unknown = null;
+  try {
+    data = await res.json();
+  } catch {
+    // non-JSON body — fall back to the provided message
+  }
+  throw new Error(errorMessage(data, fallback));
+}