@goplusvn/core 0.1.16 → 0.1.18

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.1.18 — SettingsProvider nhận `defaults` (đổi màu/theme mặc định theo app)
+
+Customizer khóa cứng `defaultSettings.theme = "blue"` trong core → app không đặt
+được màu mặc định riêng (vd wu-vpbank muốn "green"). Thêm prop tùy chọn `defaults?:
+Partial<SettingsType>` cho `SettingsProvider` — merge lên core defaults (áp cho state
+đầu, khi không có cookie, và resetSettings). Additive/backward-compatible. App dùng:
+`<SettingsProvider locale={locale} defaults={{ theme: "green" }}>`.
+
+
+## 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.18",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/providers/index.tsx

@@ -39,14 +39,20 @@ export const SettingsContext = createContext<
 export function SettingsProvider({
   locale,
   children,
+  defaults,
 }: {
   locale: LocaleType;
   children: ReactNode;
+  /** App-level overrides của defaultSettings (vd theme, radius). Truyền object
+   *  ỔN ĐỊNH (module-level const) để tránh re-render. Mặc định = defaultSettings core. */
+  defaults?: Partial<SettingsType>;
 }) {
+  // Mặc định của app = core defaults + override từ app (vd theme:"green").
+  const base = { ...defaultSettings, ...defaults };
   const [storedSettings, setStoredSettings, deleteStoredSettings] =
     useCookie("settings");
   const [settings, setSettings] = useState<SettingsType>(() => ({
-    ...defaultSettings,
+    ...base,
     locale,
   }));
 
@@ -54,14 +60,15 @@ export function SettingsProvider({
     if (storedSettings) {
       try {
         const parsedSettings = JSON.parse(storedSettings);
-        setSettings({ ...defaultSettings, ...parsedSettings });
+        setSettings({ ...base, ...parsedSettings });
       } catch {
-        setSettings({ ...defaultSettings, locale });
+        setSettings({ ...base, locale });
       }
     } else {
-      setSettings({ ...defaultSettings, locale });
+      setSettings({ ...base, locale });
     }
-  }, [storedSettings, locale]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storedSettings, locale, defaults]);
 
   const updateSettings = useCallback(
     (newSettings: SettingsType) => {
@@ -73,8 +80,8 @@ export function SettingsProvider({
 
   const resetSettings = useCallback(() => {
     deleteStoredSettings();
-    setSettings(defaultSettings);
-  }, [deleteStoredSettings]);
+    setSettings({ ...defaultSettings, ...defaults });
+  }, [deleteStoredSettings, defaults]);
 
   // Apply the appearance choices the Customizer exposes but that nothing else
   // wires up. Without this, the "Radius" and "Density" controls store a value

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