@goplusvn/core 0.1.15 → 0.1.17

package/CHANGELOG.md

@@ -1,59 +1,83 @@
 # Changelog
 
+## 0.1.17 — Fix: khôi phục nền màu tab (page-tabs) theo golden vinhhoa
+
+Bản "neutral single-style" trước đó bỏ gradient nền tab NHƯNG vẫn để icon/chữ
+`text-white` (thiết kế cho nền tối) → tab inactive: chữ/icon trắng trên nền xám
+nhạt = mất màu/mờ (không lấy theo --primary). Khôi phục `getTabBackgroundColor`
+bản golden vinhhoa: tab inactive = 1 gradient tối theo hash path (bộ 21 màu), chữ
+`text-white`; tab active = nền trang (trắng) + viền `border-primary`. Mọi app hiện
+màu nền tab như vinhhoa.
+
+
+## 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.
+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
+## 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
-đưa vào core (xem `docs/CORE-INIT-COMPLETION-PLAN.md`). Toàn bộ **additive, backward-
-compatible** — 4 app (vinhhoa/thingtodo/wu ^0.1.13, tanloc ^0.1.3) an toàn.
+Đú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
+đưa vào core (xem `docs/CORE-INIT-COMPLETION-PLAN.md`). Toàn bộ **additive, backward-
+compatible** — 4 app (vinhhoa/thingtodo/wu ^0.1.13, tanloc ^0.1.3) an toàn.
 
 - **Server-CRUD engine** (`@goerp/core/crud/server`): `createServerCrudService`
   (Prisma-agnostic qua DI), `getModelName`, `createAuditUserNameResolver` (schema-
-  tolerant tên user), `createCrudCollectionHandlers`/`createCrudItemHandlers` (route
-  Next.js tự gác quyền). App bỏ ~350 LOC engine tự chế.
+  tolerant tên user), `createCrudCollectionHandlers`/`createCrudItemHandlers` (route
+  Next.js tự gác quyền). App bỏ ~350 LOC engine tự chế.
 - **Auth request-gate** (`@goerp/core/auth/proxy-gate`): `createAuthProxy` (default-
-  deny) + `unauthorizedResponse`. proxy.ts app còn ~10 LOC.
-- **RBAC schema-tolerant**: `getRolesData(db, params, schema?)` nhận field-map
-  (`userNameField`/`userActiveField`/`userImageField`/`roleTimestamps`) → app schema
-  khác (User.fullName/active, Role không timestamps) không còn crash/tự chế.
+  deny) + `unauthorizedResponse`. proxy.ts app còn ~10 LOC.
+- **RBAC schema-tolerant**: `getRolesData(db, params, schema?)` nhận field-map
+  (`userNameField`/`userActiveField`/`userImageField`/`roleTimestamps`) → app schema
+  khác (User.fullName/active, Role không timestamps) không còn crash/tự chế.
 - **Shared UI** (`@goerp/core/ui`): PageHeader, StatusIndicator + getStatusMeta,
-  SumFooterCell + sumBy, table-styles (mẫu bảng đơn bán hàng, subpath server-safe
+  SumFooterCell + sumBy, table-styles (mẫu bảng đơn bán hàng, subpath server-safe
   `@goerp/core/ui/shared/table-styles`); export DynamicIcon.
 
-Verify: core tsc 0 lỗi; wu consume toàn bộ (tsc 0/0 + render/CRUD/auth chạy đúng);
+Verify: core tsc 0 lỗi; wu consume toàn bộ (tsc 0/0 + render/CRUD/auth chạy đúng);
 golden vinhhoa tsc 20=20 (0 regression).
 
-## 0.1.13 — Customizer: make radius, density & inset/floating actually apply
+## 0.1.13 — Customizer: make radius, density & inset/floating actually apply
 
 The Customizer exposed controls that stored a value but changed nothing on
 screen. Wired them up at the source so every app using core gets them working:
 
-- **Radius ("Bo góc") now applies.** `SettingsProvider` drives the real
+- **Radius ("Bo góc") now applies.** `SettingsProvider` drives the real
   `--radius` token from `settings.radius`; Tailwind's `@theme inline` derives
-  `rounded-sm/md/lg/xl` from it, so the whole UI re-rounds live (0 → square,
-  1rem → fully rounded). Previously nothing read `settings.radius`.
-- **Density ("Mật độ") now applies.** `SettingsProvider` sets
+  `rounded-sm/md/lg/xl` from it, so the whole UI re-rounds live (0 → square,
+  1rem → fully rounded). Previously nothing read `settings.radius`.
+- **Density ("Mật độ") now applies.** `SettingsProvider` sets
   `data-density="compact"` on `<html>`; `base.css` tightens the global
-  `--spacing` scale (0.25rem → 0.215rem) so every spacing utility packs in
+  `--spacing` scale (0.25rem → 0.215rem) so every spacing utility packs in
   compact mode. Previously `useDensity()` was read nowhere.
 - **Inset / floating sidebar no longer renders a harsh frame.** Core's default
   sidebar is deep navy, and shadcn's inset/floating paints the page frame with
-  that sidebar colour — reading as a broken-looking block. The frame is now the
+  that sidebar colour — reading as a broken-looking block. The frame is now the
   soft `--muted` neutral, so the content floats as a card on a calm page
   (adapts to dark mode; the rounded-xl + shadow core already applies stay).
 - **Inset / floating collapsed rail no longer looks squeezed.** In icon mode the
   floating/inset content box is `--sidebar-width-icon + 8px` (56px) but had
-  `px-2.5` padding, leaving the pill only 36px — narrower than the default 48px
+  `px-2.5` padding, leaving the pill only 36px — narrower than the default 48px
   rail. Reduced to `px-1` so the pill is a comfortable 48px with a 4px floating
   gutter.
 - **Inset / floating sidebar corners are softened.** The floating panel was
   `rounded-lg` and the inset panel had NO radius (a sharp navy block whose
-  top-right corner met the header as a hard 90°). Both now use `rounded-xl`
+  top-right corner met the header as a hard 90°). Both now use `rounded-xl`
   (matching the inset content card) so the sidebar reads as a soft floating
-  panel — the header/sidebar junction is a gentle curve, not a rough corner.
+  panel — the header/sidebar junction is a gentle curve, not a rough corner.
   The floating content area also rounds both left corners
   (`rounded-l-xl`, clipping the sticky header + footer via overflow-hidden) so
   its whole left edge hugs the floating sidebar with soft curves; the right
@@ -64,20 +88,20 @@ screen. Wired them up at the source so every app using core gets them working:
   And the content no longer touches the sidebar: inset drops its `ml-0` (so the
   uniform `m-2` leaves a left gap) and floating gains `ml-2`, giving a small
   gap between the sidebar and the content/header.
-- **"Ẩn ngoài" (`collapsible="offcanvas"`) can finally hide the sidebar.**
-  `AppSidebar` force-remapped `offcanvas → icon`, so the option collapsed to an
-  icon rail instead of hiding — identical to "Biểu tượng" and impossible to fully
+- **"Ẩn ngoài" (`collapsible="offcanvas"`) can finally hide the sidebar.**
+  `AppSidebar` force-remapped `offcanvas → icon`, so the option collapsed to an
+  icon rail instead of hiding — identical to "Biểu tượng" and impossible to fully
   hide the sidebar. The choice is now honoured as-is: offcanvas slides the
-  sidebar off-screen (reopen via the header toggle), icon → rail.
-- **Dropped the "none" (Tắt) collapsible option from the Customizer.** Locking
-  the sidebar expanded made the header collapse-toggle a no-op — a
+  sidebar off-screen (reopen via the header toggle), icon → rail.
+- **Dropped the "none" (Tắt) collapsible option from the Customizer.** Locking
+  the sidebar expanded made the header collapse-toggle a no-op — a
   conflicting/dead control. The picker now offers only offcanvas + icon, both of
   which the toggle actually drives. (`none` remains a valid type for any code
   that sets it directly; it's just no longer offered in the UI.)
-- **Dropped the "Bố cục" (layout: horizontal/vertical) control from the
+- **Dropped the "Bố cục" (layout: horizontal/vertical) control from the
   Customizer.** The horizontal layout swaps the whole nav for a top menubar,
-  which turns every sidebar option ("Kiểu thanh bên", "Thu gọn thanh bên") into
-  a no-op — the same dead-control problem. The customizer now locks to the
+  which turns every sidebar option ("Kiểu thanh bên", "Thu gọn thanh bên") into
+  a no-op — the same dead-control problem. The customizer now locks to the
   vertical sidebar the apps are designed around (`defaultSettings.layout` stays
   `vertical`; `HorizontalLayout` is untouched for code that sets it directly).
 - **Non-collapsing sidebar (`collapsible="none"`) is now readable.** It rendered
@@ -85,9 +109,9 @@ screen. Wired them up at the source so every app using core gets them working:
   active item are `text-primary`, giving ~1.9:1 contrast (unreadable) on that
   navy. A non-collapsing sidebar is permanently *expanded*, so it now uses the
   expanded surface (`bg-background` / `text-foreground`), matching the rest of
-  the design (labels-on-light) — contrast jumps to ~9:1.
+  the design (labels-on-light) — contrast jumps to ~9:1.
 
-## 0.1.11 — print: force light colours on the print surface
+## 0.1.11 — print: force light colours on the print surface
 
 - **Fix faded print output in dark mode.** Print pages render under the app's
   shared `<html class="dark">`, so the print surface inherited dark mode's light
@@ -96,34 +120,34 @@ screen. Wired them up at the source so every app using core gets them working:
   `.print-container, #print-content`, keeping every shared print template
   black-on-white regardless of the active theme.
 
-## 0.1.8 — branding wiring + auth/rbac unification + clean typecheck
+## 0.1.8 — branding wiring + auth/rbac unification + clean typecheck
 
 - **Single source for permission checks (security fix).** `@goerp/core/rbac`
   used to ship its own copy of `checkPermission` / `getUserPermissions` /
-  `getCrudPermissionsFromSession` / … which had drifted from `@goerp/core/auth`
-  — it still allowed `BYPASS_AUTH` in production and denied admins with no
+  `getCrudPermissionsFromSession` / … which had drifted from `@goerp/core/auth`
+  — it still allowed `BYPASS_AUTH` in production and denied admins with no
   explicit permission rows. `rbac` now re-exports these from the hardened `auth`
   module (bypass dev-only, admin-before-empty-guard), so the two can't diverge.
 
 
 - **Branding via `TenantProvider`.** `Logo`/`LogoCompact` now resolve their image,
-  company name and tagline from `props → TenantProvider branding → defaults`, so a
+  company name and tagline from `props → TenantProvider branding → defaults`, so a
   new app re-skins by wrapping with `<TenantProvider tenant={{ branding }}>` (or
   passing `logoSrc`/`companyName`/`tagline` props) instead of hardcoding. Added a
   non-throwing `useOptionalTenant()` hook and a `tagline` field to `TenantBranding`.
   `TenantProvider` also applies `branding.primaryColor` (an HSL triple) to
   `--primary`/`--accent-primary` at runtime, so the brand color is config-driven
-  too. Fully backward compatible (no provider/props → previous GoERP defaults).
+  too. Fully backward compatible (no provider/props → previous GoERP defaults).
 - **Core now type-checks clean (0 errors).** Fixed the `system/categories`
   components that imported the consumer alias `@goerp/core/ui` from inside the
-  package (unresolvable in core's own tsconfig → cascaded into implicit-any in
+  package (unresolvable in core's own tsconfig → cascaded into implicit-any in
   their event handlers); switched to relative imports.
 - **Standard entity configs.** `@goerp/core/configs/entities` now ships canonical
   `EntityConfig`s (starting with `departmentsConfig`, plus the previously
   unexported `materialCategoriesConfig`) so apps import + spread-to-override
   instead of copy-pasting near-identical configs.
 
-## 0.1.7 — auth hardening
+## 0.1.7 — auth hardening
 
 Hardened `@goerp/core/auth` so the Vinh Hoa app (and others) can consolidate
 their hand-copied RBAC clones onto core without regressing two safety behaviors:
@@ -135,46 +159,46 @@ their hand-copied RBAC clones onto core without regressing two safety behaviors:
   admin-role bypass BEFORE the empty-permissions guard, so an admin who relies on
   their role (no explicit permission rows) is no longer denied everything.
 
-## 0.1.6 — platform foundation extraction
+## 0.1.6 — platform foundation extraction
 
 Promoted the cross-cutting platform layer out of the Vinh Hoa reference app into
 core so every app inherits the same design system + infrastructure and only
-builds its own business logic. All additive — existing subpaths are unchanged.
+builds its own business logic. All additive — existing subpaths are unchanged.
 
 ### Added
 
-- **`@goerp/core/styles/base.css`** — the canonical design-system tokens (Radix
-  scale → shadcn semantic → Plane semantic; status, charts, sidebar, scrollbar,
+- **`@goerp/core/styles/base.css`** — the canonical design-system tokens (Radix
+  scale → shadcn semantic → Plane semantic; status, charts, sidebar, scrollbar,
   animations). Apps `@import` this from their Tailwind v4 entry stylesheet and
   override only brand tokens (`--primary`, `--sidebar-*`). Brand default: indigo.
   Also ships `@goerp/core/styles/radix-themes.css` (the HSL Radix scale).
 
-- **`@goerp/core/errors`** — `AppError` + `toAppError` (maps Prisma
-  P2002/P2025/P2003/P2014 → friendly message + stable `errorId`),
+- **`@goerp/core/errors`** — `AppError` + `toAppError` (maps Prisma
+  P2002/P2025/P2003/P2014 → friendly message + stable `errorId`),
   `withErrorHandler` / `createErrorResponse` / `errorResponse`, and the
   db-injected factories `createErrorLogger(db)` (fingerprint-deduped persistence
   to an `error_logs` table) + `buildServerError({ logServerError })` /
   `createServerError({ db })`. Granular client-safe paths:
   `@goerp/core/errors/{app-error,error-handler,server-error}`.
 
-- **`@goerp/core/export`** — `useExport()` (the unified "Xuất Excel" hook),
+- **`@goerp/core/export`** — `useExport()` (the unified "Xuất Excel" hook),
   `triggerBlobDownload` / `filenameFromContentDisposition`, and `toCsv` /
   `escapeCsvField` (RFC 4180). The crud `exportToCSV` now delegates to `toCsv`,
   fixing unescaped commas/quotes/newlines and falsy `0`/`false`. Granular paths:
   `@goerp/core/export/{to-csv,download-file,use-export}`.
 
-- **`@goerp/core/print`** — `DirectPrintProvider` (document-agnostic print device
+- **`@goerp/core/print`** — `DirectPrintProvider` (document-agnostic print device
   layer: hidden-iframe URL printing with a mobile same-tab fallback, one-page
   sizing, loading overlay) driven by a `renderContent` render-prop, the
   `useDirectPrint` hook, and `PrintStyles` (A4/A5 `@media print`). Granular paths:
   `@goerp/core/print/{direct-print-provider,print-styles}`.
 
-- **`@goerp/core/repository`** — `casUpdate` / `casUpdateById`: the compare-and-
+- **`@goerp/core/repository`** — `casUpdate` / `casUpdateById`: the compare-and-
   swap invariant for money/stock mutations (`updateMany` on expected state,
   throw on zero rows so an enclosing transaction rolls back).
 
-- **`@goerp/core/utils/{serialize,fetcher,date-utils,cccd-parser}`** —
-  `serializeDecimalFields` (Prisma Decimal → string for Client Components),
+- **`@goerp/core/utils/{serialize,fetcher,date-utils,cccd-parser}`** —
+  `serializeDecimalFields` (Prisma Decimal → string for Client Components),
   `swrFetcher` / `swrListFetcher` / `unwrapList`, Vietnam-timezone date helpers,
   and the CCCD (VN ID-card) QR parser.
 

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.15",
+  "version": "0.1.17",
   "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/layout/page-tabs.tsx

@@ -85,10 +85,42 @@ export function PageTabs({
     currentTabIndex >= 0 && currentTabIndex < sortedTabs.length - 1;
   const hasOtherTabs = sortedTabs.length > 1;
 
-  // Neutral, single-style tab background (was a per-path rainbow gradient).
-  // Active tabs sit on the page surface; inactive tabs are a muted chip.
-  const getTabBackgroundColor = (_path: string, isActive: boolean) => {
-    return isActive ? "bg-background" : "bg-muted/60";
+  // Nền tab: active = mặt phẳng trang (trắng); inactive = 1 gradient tối theo hash
+  // của path (bộ 21 màu cố định) — bám thiết kế golden vinhhoa (icon/chữ trắng đọc
+  // rõ trên nền tối). KHÔNG dùng --primary để mỗi tab có màu riêng, dễ phân biệt.
+  const getTabBackgroundColor = (path: string, isActive: boolean) => {
+    if (isActive) return "bg-background";
+
+    const normalizedPath = path.replace(/^\/[a-z]{2}(\/|$)/, "/");
+    const hash = normalizedPath.split("").reduce((acc, char) => {
+      return (acc << 5) - acc + char.charCodeAt(0);
+    }, 0);
+
+    const gradients = [
+      "bg-gradient-to-r from-slate-700 to-slate-600",
+      "bg-gradient-to-r from-zinc-700 to-zinc-600",
+      "bg-gradient-to-r from-stone-700 to-stone-600",
+      "bg-gradient-to-r from-neutral-700 to-neutral-600",
+      "bg-gradient-to-r from-blue-700 to-blue-600",
+      "bg-gradient-to-r from-indigo-700 to-indigo-600",
+      "bg-gradient-to-r from-purple-700 to-purple-600",
+      "bg-gradient-to-r from-violet-700 to-violet-600",
+      "bg-gradient-to-r from-fuchsia-700 to-fuchsia-600",
+      "bg-gradient-to-r from-pink-700 to-pink-600",
+      "bg-gradient-to-r from-rose-700 to-rose-600",
+      "bg-gradient-to-r from-red-700 to-red-600",
+      "bg-gradient-to-r from-orange-700 to-orange-600",
+      "bg-gradient-to-r from-amber-700 to-amber-600",
+      "bg-gradient-to-r from-yellow-700 to-yellow-600",
+      "bg-gradient-to-r from-lime-700 to-lime-600",
+      "bg-gradient-to-r from-green-700 to-green-600",
+      "bg-gradient-to-r from-emerald-700 to-emerald-600",
+      "bg-gradient-to-r from-teal-700 to-teal-600",
+      "bg-gradient-to-r from-cyan-700 to-cyan-600",
+      "bg-gradient-to-r from-sky-700 to-sky-600",
+    ];
+
+    return gradients[Math.abs(hash) % gradients.length];
   };
 
   return (
@@ -135,11 +167,11 @@ export function PageTabs({
                       variant === "default" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x border-b-0 rounded-t-md -mb-px z-10"
-                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
+                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
                       variant === "header" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x rounded-t-md z-10"
-                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
+                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
                       !isLast &&
                         !isActive &&
                         variant === "default" &&