@goplusvn/core 0.1.47 → 0.1.49

package/src/rbac/pages/index.ts

@@ -20,3 +20,8 @@ export type {
   ActionCatalogPageProps,
   CatalogMenuSection,
 } from "./permission-catalog-pages";
+
+export {
+  registerResourceGroupMeta,
+  type ResourceGroupMeta,
+} from "./lib/group-taxonomy";

package/src/rbac/pages/lib/action-api.ts

@@ -0,0 +1,38 @@
+// API contract CRUD /api/actions — DÙNG CHUNG cho action-list-page và
+// Action Manager nhúng trong resource-list-page. Trước 2026-07 khối
+// fetch + error semantics này bị copy nguyên văn ở cả 2 trang ("2 chỗ sửa
+// 1 nghiệp vụ" — audit); giờ endpoint/method/payload/parse-lỗi sống 1 nơi,
+// mỗi trang chỉ còn state + toast riêng của nó.
+import { throwFetchError } from "../../lib/fetch-error";
+
+export interface ActionPayload {
+  code: string;
+  name: string;
+  description?: string;
+}
+
+/** Tạo (POST) hoặc cập nhật (PUT khi có editingId) một Action. Throw khi lỗi
+ *  (đã parse message qua throwFetchError) — caller bắt và toast. */
+export async function saveAction<T = unknown>(
+  payload: ActionPayload,
+  editingId?: string,
+): Promise<T> {
+  const body = { ...payload, status: "active" };
+  const res = await fetch("/api/actions", {
+    method: editingId ? "PUT" : "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(editingId ? { id: editingId, ...body } : body),
+  });
+  if (!res.ok) {
+    await throwFetchError(res, "Operation failed");
+  }
+  return res.json();
+}
+
+/** Xóa một Action theo id. Throw khi lỗi — caller bắt và toast. */
+export async function deleteActionById(id: string): Promise<void> {
+  const res = await fetch(`/api/actions?id=${id}`, { method: "DELETE" });
+  if (!res.ok) {
+    await throwFetchError(res, "Delete failed");
+  }
+}

package/src/rbac/pages/lib/group-taxonomy.ts

@@ -0,0 +1,110 @@
+// Taxonomy NHÓM resource hiển thị ở các trang RBAC. Default là bộ nhóm GoERP
+// chuẩn; app có nhóm/nhãn riêng thì ĐĂNG KÝ MỘT LẦN ở setup (cùng pattern
+// configureSettingsService) thay vì sửa core + chờ republish — đúng lớp lỗi
+// OCP mà audit 2026-07 chỉ ra.
+import type { ComponentType } from "react";
+
+import {
+  Box,
+  Boxes,
+  ClipboardList,
+  Settings,
+  ShoppingBag,
+  Truck,
+  Users,
+  Wallet,
+} from "lucide-react";
+
+export interface ResourceGroupMeta {
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  iconCls: string;
+}
+
+const FALLBACK_ICON_CLS =
+  "text-slate-600 bg-slate-200 dark:text-slate-300 dark:bg-slate-500/20";
+
+const groupMeta: Record<string, ResourceGroupMeta> = {
+  sales: {
+    icon: ShoppingBag,
+    label: "Bán hàng",
+    iconCls: "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/15",
+  },
+  purchase: {
+    icon: ClipboardList,
+    label: "Mua hàng",
+    iconCls:
+      "text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/15",
+  },
+  inventory: {
+    icon: Truck,
+    label: "Kho",
+    iconCls:
+      "text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/15",
+  },
+  finance: {
+    icon: Wallet,
+    label: "Tài chính",
+    iconCls:
+      "text-violet-600 bg-violet-100 dark:text-violet-400 dark:bg-violet-500/15",
+  },
+  hr: {
+    icon: Users,
+    label: "Nhân sự",
+    iconCls: "text-rose-600 bg-rose-100 dark:text-rose-400 dark:bg-rose-500/15",
+  },
+  master: {
+    icon: Boxes,
+    label: "Danh mục",
+    iconCls: "text-cyan-600 bg-cyan-100 dark:text-cyan-400 dark:bg-cyan-500/15",
+  },
+  users: {
+    icon: Users,
+    label: "Người dùng",
+    iconCls:
+      "text-fuchsia-600 bg-fuchsia-100 dark:text-fuchsia-400 dark:bg-fuchsia-500/15",
+  },
+  system: {
+    icon: Settings,
+    label: "Hệ thống",
+    iconCls: FALLBACK_ICON_CLS,
+  },
+  other: {
+    icon: Box,
+    label: "Khác",
+    iconCls: FALLBACK_ICON_CLS,
+  },
+};
+
+let groupOrder: string[] = [
+  "sales",
+  "purchase",
+  "inventory",
+  "finance",
+  "hr",
+  "master",
+  "users",
+  "system",
+  "other",
+];
+
+/**
+ * App đăng ký thêm/ghi đè metadata nhóm (icon/label/màu) và tuỳ chọn thứ tự.
+ * Gọi một lần ở composition root của app (trước khi render trang RBAC).
+ */
+export function registerResourceGroupMeta(
+  meta: Record<string, ResourceGroupMeta>,
+  order?: string[],
+): void {
+  Object.assign(groupMeta, meta);
+  if (order) groupOrder = order;
+}
+
+export const getGroupMeta = (group: string): ResourceGroupMeta =>
+  groupMeta[group?.toLowerCase()] || {
+    icon: Box,
+    label: group || "Khác",
+    iconCls: FALLBACK_ICON_CLS,
+  };
+
+export const getGroupOrder = (): string[] => groupOrder;

package/src/rbac/pages/lib/rbac-page-shell.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+// Khung dùng chung cho các trang RBAC (resource-list, action-list, …):
+// bar navy 1 dòng + toolbar sticky (search + đếm + toggle List/Grid).
+// Trước 2026-07 hai khối này bị copy nguyên văn từng class-string giữa các
+// trang (~31% dòng trùng — audit); giờ skeleton sống 1 nơi, mỗi trang chỉ
+// truyền nội dung (icon/title/subtitle/nút riêng).
+import type { ReactNode } from "react";
+
+import { LayoutGrid, List, Search, X } from "lucide-react";
+
+import { cn } from "../../../utils";
+import { Input } from "../../../ui/primitives/input";
+
+/** Bar navy 1 dòng trên cùng — icon + tiêu đề + subtitle (ẩn mobile) + nút phải. */
+export function RbacPageBar({
+  icon,
+  title,
+  subtitle,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  /** Dòng số liệu bên phải tiêu đề — ẩn dưới md. */
+  subtitle?: ReactNode;
+  /** Các nút bên phải (Thêm, Làm mới, Đồng bộ…). */
+  children?: ReactNode;
+}) {
+  return (
+    <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">
+      <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+        {icon}
+      </span>
+      <h1 className="min-w-0 flex-1 truncate px-1 text-base font-bold text-primary-foreground sm:text-lg">
+        {title}
+      </h1>
+      {subtitle ? (
+        <span className="hidden shrink-0 text-xs tabular-nums text-primary-foreground/70 md:inline">
+          {subtitle}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+export type RbacViewMode = "list" | "grid";
+
+/** Toolbar sticky: ô search có nút xóa + slot nút phụ + bộ đếm + toggle dòng/thẻ. */
+export function RbacStickyToolbar({
+  searchTerm,
+  onSearchChange,
+  searchPlaceholder,
+  searchMaxWidthClass = "sm:max-w-72",
+  count,
+  countLabel,
+  matchedCount,
+  view,
+  onViewChange,
+  children,
+}: {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder: string;
+  /** Giới hạn bề ngang ô search (mặc định sm:max-w-72). */
+  searchMaxWidthClass?: string;
+  /** Tổng số mục khi KHÔNG search, hiển thị "<count> <countLabel>". */
+  count: number;
+  countLabel: string;
+  /** Số khớp khi ĐANG search — truyền undefined nếu muốn luôn hiện count. */
+  matchedCount?: number;
+  view: RbacViewMode;
+  onViewChange: (view: RbacViewMode) => void;
+  /** Nút phụ chen giữa search và bộ đếm (Làm mới…). */
+  children?: ReactNode;
+}) {
+  const searching = searchTerm.trim().length > 0;
+  return (
+    <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={cn("relative min-w-[140px] flex-1", searchMaxWidthClass)}>
+        <Search className="pointer-events-none absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+        <Input
+          placeholder={searchPlaceholder}
+          className="h-8 w-full rounded-md border border-border bg-card pl-8 pr-8 text-sm"
+          value={searchTerm}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+        {searchTerm && (
+          <button
+            type="button"
+            onClick={() => onSearchChange("")}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            title="Xóa tìm kiếm"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+      {children}
+      <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+        {searching && matchedCount !== undefined ? (
+          <>
+            <span className="font-semibold tabular-nums text-foreground">
+              {matchedCount}
+            </span>{" "}
+            khớp
+          </>
+        ) : (
+          <>
+            <span className="font-semibold tabular-nums text-foreground">
+              {count}
+            </span>{" "}
+            {countLabel}
+          </>
+        )}
+      </p>
+      {/* Chuyển dạng hiển thị: dòng / thẻ */}
+      <div className="flex shrink-0 overflow-hidden rounded-md border border-border">
+        <button
+          type="button"
+          onClick={() => onViewChange("list")}
+          title="Dạng dòng"
+          className={cn(
+            "px-2 py-1.5 transition-colors",
+            view === "list"
+              ? "bg-muted text-foreground"
+              : "bg-card text-muted-foreground hover:text-foreground",
+          )}
+        >
+          <List className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onViewChange("grid")}
+          title="Dạng thẻ"
+          className={cn(
+            "border-l border-border px-2 py-1.5 transition-colors",
+            view === "grid"
+              ? "bg-muted text-foreground"
+              : "bg-card text-muted-foreground hover:text-foreground",
+          )}
+        >
+          <LayoutGrid className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}