@goplusvn/core 0.1.14 → 0.1.16

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.1.16 — RBAC roles route-handler factory
+
+Slice ⑧b. Mỗi app hand-write /api/roles + /api/roles/[id] (list users[], create/update
+thay RolePermission set, delete guard theo user count). Nay ở core:
+`@goerp/core/rbac/route-handlers` — `createRolesCollectionHandlers` (GET list
+schema-tolerant qua getRolesData + POST create+writePermissions) +
+`createRoleItemHandlers` (GET/PUT/DELETE). App inject prisma+getSession+
+getCrudPermissions + schema field-map. Additive. wu thay ~90 LOC route tay → factory;
+/api/roles 200 (6 roles), unauth 401, /vi/roles 200.
+
+
+## 0.1.15 — Shared UI: ConfirmDialog, StatBar, ListToolbar
+
+Tiếp 0.1.14: promote 3 component dùng chung nữa vào `@goerp/core/ui` (ConfirmDialog,
+StatBar, ListToolbar + AdvancedField) — import từ sub-barrel tránh circular.
+Additive; wu shim + verify render 200.
+
+
 ## 0.1.14 — Init-completion: server-CRUD engine, auth gate, schema-tolerant RBAC, shared UI
 
 Đúc kết từ việc dựng app mới (wu-vpbank): những thứ MỖI app phải tự viết lại nay

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.14",
+  "version": "0.1.16",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -37,6 +37,7 @@
     "./assets/*": "./src/assets/*",
     "./styles/*": "./src/styles/*",
     "./auth/proxy-gate": "./src/auth/proxy-gate.ts",
+    "./rbac/route-handlers": "./src/rbac/route-handlers.ts",
     "./ui/shared/table-styles": "./src/ui/shared/table-styles.ts",
     "./errors/app-error": "./src/errors/app-error.ts",
     "./errors/error-handler": "./src/errors/error-handler.ts",

package/src/rbac/route-handlers.ts

@@ -0,0 +1,182 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Next.js route-handler factories for the RBAC "roles" API. Every app hand-wrote
+// /api/roles + /api/roles/[id] (list with users[], create/update replacing the
+// RolePermission set, delete guarded by user count). Promoted to core.
+//
+// Permissions are the canonical "action:resource" string[] (matches RoleListPage
+// + getRolesData). Schema-tolerant via RoleServiceSchema (see role-service).
+//
+// Usage (app side):
+//   // src/app/api/roles/route.ts
+//   import { createRolesCollectionHandlers } from "@goerp/core/rbac/route-handlers";
+//   export const { GET, POST } = createRolesCollectionHandlers({
+//     prisma, getSession, getCrudPermissions, schema: { userNameField: "fullName", ... },
+//   });
+
+import { getRolesData, type RoleServiceSchema } from "./role-service";
+
+type MaybePromise<T> = T | Promise<T>;
+
+export interface RbacHandlerDeps {
+  prisma: any;
+  getSession: () => MaybePromise<any | null>;
+  /** Permission gate for resource "role". Usually getCrudPermissions from @goerp/core/crud/server. */
+  getCrudPermissions: (session: any, resource: string) => Promise<{ read?: boolean; create?: boolean; update?: boolean; delete?: boolean }>;
+  /** Schema field-map when User/Role diverge from defaults. */
+  schema?: RoleServiceSchema;
+  onError?: (error: unknown, req: Request) => Response | Promise<Response>;
+}
+
+const json = (data: unknown, status = 200) =>
+  new Response(JSON.stringify(data), { status, headers: { "content-type": "application/json" } });
+
+// permissions "action:resource" → RolePermission rows {roleCode,resourceCode,actionCode}.
+async function writePermissions(tx: any, roleCode: string, permissions: string[]) {
+  await tx.rolePermission.deleteMany({ where: { roleCode } });
+  const rows = (permissions || [])
+    .map((p) => {
+      const [actionCode, resourceCode] = p.split(":");
+      return actionCode && resourceCode ? { roleCode, resourceCode, actionCode } : null;
+    })
+    .filter(Boolean);
+  if (rows.length) await tx.rolePermission.createMany({ data: rows, skipDuplicates: true });
+}
+
+// GET (list, schema-tolerant) + POST (create + permissions) for /api/roles.
+export function createRolesCollectionHandlers(deps: RbacHandlerDeps) {
+  const { prisma, getSession, getCrudPermissions, schema, onError } = deps;
+  const fail = (e: unknown, req: Request) => (onError ? onError(e, req) : json({ error: "Internal error" }, 500));
+
+  async function GET(req: Request) {
+    try {
+      const session = await getSession();
+      if (!session) return json({ error: "Unauthorized" }, 401);
+      const perms = await getCrudPermissions(session, "role");
+      if (!perms.read) return json({ error: "Forbidden" }, 403);
+      const sp = new URL(req.url).searchParams;
+      const result = await getRolesData(
+        prisma,
+        {
+          page: Number(sp.get("page") || 1),
+          pageSize: Math.min(Number(sp.get("pageSize") || 20), 200),
+          search: sp.get("search")?.trim() || undefined,
+          status: sp.get("status")?.trim() || undefined,
+        },
+        schema,
+      );
+      return json(result);
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  async function POST(req: Request) {
+    try {
+      const session = await getSession();
+      if (!session) return json({ error: "Unauthorized" }, 401);
+      const perms = await getCrudPermissions(session, "role");
+      if (!perms.create) return json({ error: "Forbidden" }, 403);
+      const body = await req.json();
+      const code = (body.code ?? "").trim();
+      const name = (body.name ?? "").trim();
+      if (!code || !name) return json({ error: "Thiếu mã hoặc tên vai trò" }, 400);
+      const permissions: string[] = Array.isArray(body.permissions) ? body.permissions : [];
+      const role = await prisma.$transaction(async (tx: any) => {
+        const created = await tx.role.create({
+          data: { code, name, description: body.description ?? null, status: body.status ?? "active" },
+        });
+        await writePermissions(tx, created.code, permissions);
+        return created;
+      });
+      return json({ id: role.id, code: role.code, name: role.name }, 201);
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  return { GET, POST };
+}
+
+// GET + PUT (update + replace permissions) + DELETE (guarded by user count) for /api/roles/[id].
+export function createRoleItemHandlers(deps: RbacHandlerDeps) {
+  const { prisma, getSession, getCrudPermissions, onError } = deps;
+  const fail = (e: unknown, req: Request) => (onError ? onError(e, req) : json({ error: "Internal error" }, 500));
+  type Ctx = { params: Promise<{ id: string }> };
+
+  async function GET(_req: Request, ctx: Ctx) {
+    try {
+      const { id } = await ctx.params;
+      const session = await getSession();
+      if (!session) return json({ error: "Unauthorized" }, 401);
+      const perms = await getCrudPermissions(session, "role");
+      if (!perms.read) return json({ error: "Forbidden" }, 403);
+      const role = await prisma.role.findUnique({
+        where: { id },
+        include: { rolePermissions: { select: { resourceCode: true, actionCode: true } } },
+      });
+      if (!role) return json({ error: "Not found" }, 404);
+      return json({
+        id: role.id,
+        code: role.code,
+        name: role.name,
+        description: role.description ?? "",
+        status: role.status,
+        permissions: role.rolePermissions.map((p: any) => `${p.actionCode}:${p.resourceCode}`),
+      });
+    } catch (e) {
+      return fail(e, _req);
+    }
+  }
+
+  async function PUT(req: Request, ctx: Ctx) {
+    try {
+      const { id } = await ctx.params;
+      const session = await getSession();
+      if (!session) return json({ error: "Unauthorized" }, 401);
+      const perms = await getCrudPermissions(session, "role");
+      if (!perms.update) return json({ error: "Forbidden" }, 403);
+      const body = await req.json();
+      const existing = await prisma.role.findUnique({ where: { id } });
+      if (!existing) return json({ error: "Not found" }, 404);
+      const permissions: string[] = Array.isArray(body.permissions) ? body.permissions : [];
+      const role = await prisma.$transaction(async (tx: any) => {
+        const updated = await tx.role.update({
+          where: { id },
+          data: {
+            name: (body.name ?? existing.name).trim(),
+            description: body.description ?? existing.description,
+            status: body.status ?? existing.status,
+          },
+        });
+        await writePermissions(tx, updated.code, permissions);
+        return updated;
+      });
+      return json({ id: role.id, code: role.code, name: role.name });
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  async function DELETE(req: Request, ctx: Ctx) {
+    try {
+      const { id } = await ctx.params;
+      const session = await getSession();
+      if (!session) return json({ error: "Unauthorized" }, 401);
+      const perms = await getCrudPermissions(session, "role");
+      if (!perms.delete) return json({ error: "Forbidden" }, 403);
+      const role = await prisma.role.findUnique({ where: { id }, include: { _count: { select: { userRoles: true } } } });
+      if (!role) return json({ error: "Not found" }, 404);
+      if (role._count.userRoles > 0)
+        return json({ error: `Vai trò còn ${role._count.userRoles} người dùng, không thể xóa` }, 400);
+      await prisma.$transaction(async (tx: any) => {
+        await tx.rolePermission.deleteMany({ where: { roleCode: role.code } });
+        await tx.role.delete({ where: { id } });
+      });
+      return new Response(null, { status: 204 });
+    } catch (e) {
+      return fail(e, req);
+    }
+  }
+
+  return { GET, PUT, DELETE };
+}

package/src/ui/shared/confirm-dialog.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+// ConfirmDialog — promoted from vinhhoa/wu (every app copied it). Imports from
+// sub-barrels (not ../index) to avoid a circular ui/shared ↔ ui/index import.
+import * as React from "react";
+import { Button } from "../primitives";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../feedback";
+import { AlertTriangle, Loader2 } from "lucide-react";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  onConfirm: () => void;
+  loading?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "destructive";
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  loading = false,
+  confirmText = "Xác nhận",
+  cancelText = "Hủy",
+  variant = "destructive",
+}: ConfirmDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {variant === "destructive" && <AlertTriangle className="h-5 w-5 text-destructive" />}
+            {title}
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            {cancelText}
+          </Button>
+          <Button
+            variant={variant === "destructive" ? "destructive" : "default"}
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/ui/shared/index.ts

@@ -4,3 +4,6 @@ export * from "./page-header";
 export * from "./status-indicator";
 export * from "./table-sum-footer";
 export * from "./table-styles";
+export * from "./confirm-dialog";
+export * from "./stat-bar";
+export * from "./list-toolbar";

package/src/ui/shared/list-toolbar.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Download, Filter, MoreHorizontal, Plus, Search, X } from "lucide-react"
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+} from "../primitives"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../feedback"
+
+/**
+ * Mô tả 1 hành động phụ trong menu "…" (data-driven để toolbar tự render đúng
+ * DropdownMenuItem — tránh lỗi Radix context khi truyền JSX từ nguồn khác).
+ */
+export interface ListToolbarAction {
+  key: string
+  label: string
+  icon?: ReactNode
+  onClick: () => void
+  disabled?: boolean
+  destructive?: boolean
+  /** Ẩn mục (vd thiếu quyền) — toolbar tự lọc, caller cứ truyền cả danh sách. */
+  hidden?: boolean
+}
+
+interface ListToolbarProps {
+  search: string
+  onSearchChange: (value: string) => void
+  searchPlaceholder?: string
+  /** Bộ lọc chính — render inline cạnh ô tìm kiếm (vừa đủ 1 dòng). */
+  children?: ReactNode
+  /** Bộ lọc nâng cao — render trong Sheet; badge = advancedCount. */
+  advanced?: ReactNode
+  advancedCount?: number
+  /** Xóa lọc (chỉ hiện khi đang lọc). */
+  isFiltered?: boolean
+  onReset?: () => void
+  /** Xuất Excel — nằm trong menu "Khác" (…). */
+  onExport?: () => void
+  canExport?: boolean
+  /** Tạo mới — luôn ở cuối toolbar. */
+  onCreate?: () => void
+  canCreate?: boolean
+  createLabel?: string
+  /** Nút điều khiển bảng (dropdown "Hiển thị cột") — xem useTableControls. */
+  tableControls?: ReactNode
+  /** Hành động phụ trong menu "…" (vd Cấu hình, In hàng loạt). Ít dùng. */
+  moreActions?: ListToolbarAction[]
+}
+
+/**
+ * Toolbar danh sách dùng chung — khớp phong cách trang đơn bán hàng:
+ * [tìm kiếm] [lọc chính 1 dòng] · [Bộ lọc nâng cao + badge] [Xóa lọc] [… Xuất] [+ Tạo mới].
+ * Toolbar trần (không khung card), bộ lọc tràn dòng → đưa vào slot `advanced` (Sheet).
+ */
+export function ListToolbar({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Tìm kiếm...",
+  children,
+  advanced,
+  advancedCount = 0,
+  isFiltered,
+  onReset,
+  onExport,
+  canExport = true,
+  onCreate,
+  canCreate = true,
+  createLabel = "Tạo mới",
+  tableControls,
+  moreActions,
+}: ListToolbarProps) {
+  const showExport = canExport && !!onExport
+  const actions = (moreActions ?? []).filter((a) => !a.hidden)
+  const showMoreMenu = showExport || actions.length > 0
+
+  return (
+    <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between w-full gap-3 xl:gap-4">
+      {/* Tìm kiếm + bộ lọc chính */}
+      <div className="flex w-full xl:w-auto flex-1 flex-wrap items-center gap-2 xl:gap-3">
+        <div className="relative w-full sm:flex-1 sm:min-w-[220px] xl:flex-[2] xl:min-w-[300px]">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 h-9 w-full bg-secondary/30 focus:bg-background shadow-sm focus-visible:ring-inset focus-visible:ring-offset-0"
+          />
+        </div>
+        {children}
+      </div>
+
+      {/* Hành động */}
+      <div className="flex flex-wrap sm:flex-nowrap items-center justify-between xl:justify-end gap-2 w-full xl:w-auto shrink-0">
+        {/* Bộ lọc nâng cao + Xóa lọc */}
+        <div className="flex items-center">
+          {advanced && (
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="h-9 min-w-9 shrink-0 shadow-sm relative"
+                  title="Bộ lọc nâng cao"
+                >
+                  <Filter className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline font-medium">Bộ lọc</span>
+                  {advancedCount > 0 && (
+                    <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground border-2 border-background">
+                      {advancedCount}
+                    </span>
+                  )}
+                </Button>
+              </SheetTrigger>
+              <SheetContent
+                side="right"
+                className="flex flex-col h-full w-full sm:max-w-md p-0 gap-0"
+              >
+                <SheetHeader className="text-left px-6 py-4 border-b flex flex-row items-center justify-between space-y-0">
+                  <div className="space-y-1">
+                    <SheetTitle className="text-lg font-bold">
+                      Bộ lọc nâng cao
+                    </SheetTitle>
+                    <SheetDescription>
+                      Tinh chỉnh danh sách theo các tiêu chí bên dưới.
+                    </SheetDescription>
+                  </div>
+                  <SheetClose asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 rounded-full shrink-0"
+                    >
+                      <X className="h-5 w-5" />
+                      <span className="sr-only">Đóng</span>
+                    </Button>
+                  </SheetClose>
+                </SheetHeader>
+                <div className="flex-1 overflow-y-auto px-6 py-5">
+                  <div className="flex flex-col gap-5">{advanced}</div>
+                </div>
+                <div className="border-t px-6 py-4 flex items-center gap-2">
+                  {onReset && (
+                    <Button
+                      variant="outline"
+                      onClick={onReset}
+                      className="flex-1 text-muted-foreground hover:text-destructive"
+                    >
+                      <X className="mr-1 h-4 w-4" /> Xóa lọc
+                    </Button>
+                  )}
+                  <SheetClose asChild>
+                    <Button className="flex-1">Xem kết quả</Button>
+                  </SheetClose>
+                </div>
+              </SheetContent>
+            </Sheet>
+          )}
+          {isFiltered && onReset && (
+            <Button
+              onClick={onReset}
+              variant="ghost"
+              size="sm"
+              className="h-9 ml-1 text-muted-foreground hover:text-destructive hidden sm:flex"
+              title="Xóa tất cả bộ lọc"
+            >
+              Xóa lọc
+            </Button>
+          )}
+        </div>
+
+        {/* Điều khiển cột + Khác (…) + Tạo mới */}
+        <div className="flex items-center gap-2">
+          {tableControls}
+          {showMoreMenu && (
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-9 w-9 p-0 shadow-sm"
+                  title="Khác"
+                >
+                  <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-[200px]">
+                <DropdownMenuLabel className="text-xs text-muted-foreground uppercase">
+                  Hành động
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {showExport && (
+                  <DropdownMenuItem
+                    onClick={onExport}
+                    className="gap-2 cursor-pointer"
+                  >
+                    <Download className="h-4 w-4" />
+                    Xuất danh sách (Excel)
+                  </DropdownMenuItem>
+                )}
+                {actions.map((action) => (
+                  <DropdownMenuItem
+                    key={action.key}
+                    onClick={action.onClick}
+                    disabled={action.disabled}
+                    className={`gap-2 cursor-pointer${action.destructive ? " text-destructive focus:text-destructive" : ""}`}
+                  >
+                    {action.icon}
+                    {action.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {canCreate && onCreate && (
+            <Button
+              size="sm"
+              onClick={onCreate}
+              className="h-9 font-medium shadow-sm"
+            >
+              <Plus className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">{createLabel}</span>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Ô lọc trong Sheet nâng cao: nhãn + control, xếp dọc.
+ */
+export function AdvancedField({
+  label,
+  children,
+}: {
+  label: string
+  children: ReactNode
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-xs font-medium text-muted-foreground">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}

package/src/ui/shared/stat-bar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+// StatBar — horizontal KPI strip (vinhhoa style). A thin wrapper over
+// CompactStatBar that lets SERVER pages pass plain data (iconName as a string)
+// without importing lucide components in the server component.
+import { CompactStatBar, type CompactStatItem } from "../data-display";
+import {
+  AlertTriangle, Ban, Boxes, Building2, CheckCircle2, Clock, FileCheck2, GitCompareArrows,
+  KeyRound, Landmark, ListChecks, MousePointerClick, PauseCircle, Percent, ShieldAlert, ShieldCheck,
+  Users, Wallet, XCircle, Zap, type LucideIcon,
+} from "lucide-react";
+
+const ICONS: Record<string, LucideIcon> = {
+  ListChecks, CheckCircle2, PauseCircle, Ban, Clock, XCircle, GitCompareArrows,
+  AlertTriangle, Percent, Landmark, Building2, Wallet, FileCheck2, ShieldAlert, Users,
+  ShieldCheck, KeyRound, Boxes, MousePointerClick, Zap,
+};
+
+export type StatItem = {
+  id: string;
+  label: string;
+  value: string | number;
+  iconName: keyof typeof ICONS | string;
+  colorTheme?: CompactStatItem["colorTheme"];
+  isHighlighted?: boolean;
+};
+
+export function StatBar({ items }: { items: StatItem[] }) {
+  const mapped: CompactStatItem[] = items.map((i) => ({
+    id: i.id,
+    label: i.label,
+    value: i.value,
+    icon: ICONS[i.iconName as string] ?? ListChecks,
+    colorTheme: i.colorTheme,
+    isHighlighted: i.isHighlighted,
+  }));
+  return <CompactStatBar items={mapped} />;
+}