@goplusvn/core 0.1.16 → 0.1.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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

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" &&