@goplusvn/core 0.1.32 → 0.1.34

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.1.34 — Tab navigation: gom nhóm module, tiêu đề tab chi tiết, nút làm tươi
+
+**PageTabs:**
+
+- **Gom nhóm theo module**: tab sắp theo nhóm (segment đầu pathname) — tab chi
+  tiết đứng ngay sau tab danh sách cùng module, màu gradient hash theo NHÓM
+  (trước đây theo path → mỗi tab chi tiết một màu, không nhận ra nhóm). Tab
+  chi tiết có mũi tên rẽ nhánh (↳) + khe hở nhỏ giữa các nhóm.
+- **Nút làm tươi** trên tab active: `router.refresh()` + phát
+  `CustomEvent(TAB_REFRESH_EVENT)` để trang SWR revalidate (refresh RSC không
+  đụng được cache SWR). Context menu "Reload Tab" dùng chung đường này.
+
+**TabNavigationProvider — API mới cho app:**
+
+- `useTabTitle(title)`: trang chi tiết đặt tiêu đề tab theo dữ liệu nghiệp vụ
+  (vd `useTabTitle(order?.orderNumber)`) — 5 tab chi tiết không còn trùng tên.
+- Fallback tự động cho trang chi tiết CHƯA gắn hook: segment cuối trông như ID
+  (cuid/uuid/số) → tiêu đề `"<Tên module> · <5 ký tự cuối id>"` — mọi tab chi
+  tiết phân biệt được ngay khỏi cần sửa từng trang.
+- `useTabRefreshListener(handler)`: trang client-fetch đăng ký revalidate khi
+  user bấm nút làm tươi trên tab. Kèm export `TAB_REFRESH_EVENT`.
+- Context thêm `setTabTitle(pathname, title)` (action `UPDATE_TAB_TITLE`).
+
+## 0.1.33 — Tab navigation: giữ bộ lọc + dữ liệu tươi; MainLayout `notificationSlot`
+
+**Tab navigation (PageTabs / TabNavigationProvider):**
+
+- Tab lưu **path đầy đủ gồm query string** — quay lại tab khôi phục đúng bộ lọc/
+  trang đang đứng. Tab id vẫn key theo pathname (đổi bộ lọc không đẻ tab mới);
+  query mới nhất được cập nhật vào `tab.path` (action `UPDATE_TAB_PATH`).
+  `useSearchParams` nằm trong leaf `SearchParamsChangeSignal` bọc `Suspense`
+  (tránh lỗi build trên route static).
+- **Bỏ prefetch-all-tabs** (mỗi lần đổi tab bắn full RSC render mọi tab còn lại
+  — nặng server) và **bỏ hover-prefetch** (payload FULL-prefetch bị client cache
+  ~5 phút → quay lại tab thấy dữ liệu cũ). Chuyển tab giờ luôn fetch tươi.
+
+**MainLayout: prop `notificationSlot` (chuông thông báo do app cấp)**
+
+Thêm prop optional `notificationSlot?: ReactNode` cho `MainLayout` (chảy xuống
+`Vertical/HorizontalLayout` → header). Khi truyền, nó thay `<NotificationDropdown>`
+tĩnh mặc định trong header — để app tự cấp chuông self-fetch dữ liệu của mình.
+Bỏ trống → giữ nguyên dropdown tĩnh cũ (**backward-compat**, consumer khác không
+phải sửa gì).
+
 ## 0.1.32 — Gỡ NextAuth khỏi core (BREAKING cho app chưa migrate)
 
 Core không còn phụ thuộc next-auth (bỏ peer dependency):

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

package/src/ui/layout/horizontal-layout-header.tsx

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 import { Settings } from "lucide-react";
 
 import type { DictionaryType } from "../../hooks";
+import type { ReactNode } from "react";
 import type { LocaleType, NavigationType } from "../../types";
 
 import { ensureLocalizedPathname } from "../../utils";
@@ -23,9 +24,11 @@ import { TopBarHeaderMenubar } from "./top-bar-header-menubar";
 export function HorizontalLayoutHeader({
   dictionary,
   navigation,
+  notificationSlot,
 }: {
   dictionary: DictionaryType;
   navigation?: NavigationType[];
+  notificationSlot?: ReactNode;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -56,7 +59,9 @@ export function HorizontalLayoutHeader({
               navigation={navigation ?? []}
             />
             <div className="hidden sm:flex items-center gap-2">
-              <NotificationDropdown dictionary={dictionary} />
+              {notificationSlot ?? (
+                <NotificationDropdown dictionary={dictionary} />
+              )}
               <FullScreenToggle />
             </div>
             <Customizer

package/src/ui/layout/horizontal-layout.tsx

@@ -16,6 +16,7 @@ interface HorizontalLayoutProps {
   onGlobalSearch?: (query: string) => void;
   searchResults?: any[];
   searchLoading?: boolean;
+  notificationSlot?: ReactNode;
 }
 
 export function HorizontalLayout({
@@ -25,6 +26,7 @@ export function HorizontalLayout({
   onGlobalSearch,
   searchResults,
   searchLoading,
+  notificationSlot,
 }: HorizontalLayoutProps) {
   return (
     <SidebarProvider>
@@ -39,6 +41,7 @@ export function HorizontalLayout({
         <HorizontalLayoutHeader
           dictionary={dictionary}
           navigation={navigation}
+          notificationSlot={notificationSlot}
         />
         <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4">
           {children}

package/src/ui/layout/main-layout.tsx

@@ -15,6 +15,12 @@ interface LayoutProps {
   onGlobalSearch?: (query: string) => void;
   searchResults?: any[];
   searchLoading?: boolean;
+  /**
+   * Chuông thông báo do app tự cấp (self-fetch dữ liệu app). Khi truyền, thay
+   * cho <NotificationDropdown> tĩnh mặc định trong header. Bỏ trống → giữ
+   * dropdown tĩnh cũ (backward-compat cho consumer chưa nối dữ liệu).
+   */
+  notificationSlot?: ReactNode;
 }
 
 export function MainLayout({
@@ -24,6 +30,7 @@ export function MainLayout({
   onGlobalSearch,
   searchResults,
   searchLoading,
+  notificationSlot,
 }: LayoutProps) {
   const mounted = useMounted();
   const isVertical = useIsVertical();
@@ -40,6 +47,7 @@ export function MainLayout({
       onGlobalSearch={onGlobalSearch}
       searchResults={searchResults}
       searchLoading={searchLoading}
+      notificationSlot={notificationSlot}
     >
       {children}
     </VerticalLayout>
@@ -50,6 +58,7 @@ export function MainLayout({
       onGlobalSearch={onGlobalSearch}
       searchResults={searchResults}
       searchLoading={searchLoading}
+      notificationSlot={notificationSlot}
     >
       {children}
     </HorizontalLayout>

package/src/ui/layout/page-tabs.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { X, MoreHorizontal, Loader2, Pin } from "lucide-react";
+import {
+  X,
+  MoreHorizontal,
+  Loader2,
+  Pin,
+  RefreshCw,
+  CornerDownRight,
+} from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import type { DictionaryType } from "../../hooks";
 import type { LocaleType } from "../../types";
@@ -19,9 +26,23 @@ import {
   ContextMenuTrigger,
 } from "../primitives/client";
 
-import { useTabNavigation } from "./tab-navigation-provider";
+import {
+  useTabNavigation,
+  TAB_REFRESH_EVENT,
+  type Tab,
+} from "./tab-navigation-provider";
 import { useRouteCache } from "./route-cache";
 
+/** Nhóm tab theo module — segment đầu của pathname đã bỏ locale. */
+function groupKeyOf(tab: Tab): string {
+  return tab.id.split("/").filter(Boolean)[0] ?? "home";
+}
+
+/** Độ sâu path: 1 = trang danh sách, >1 = trang chi tiết (tab con). */
+function depthOf(tab: Tab): number {
+  return tab.id.split("/").filter(Boolean).length;
+}
+
 interface PageTabsProps {
   dictionary?: DictionaryType;
   className?: string;
@@ -47,6 +68,7 @@ export function PageTabs({
   const router = useRouter();
   const locale = params?.lang as LocaleType | undefined;
   const [contextMenuTabId, setContextMenuTabId] = useState<string | null>(null);
+  const [refreshingTabId, setRefreshingTabId] = useState<string | null>(null);
 
   // Don't render if no tabs
   if (tabs.length === 0) {
@@ -57,9 +79,16 @@ export function PageTabs({
     setActiveTab(tabId);
   };
 
-  const handleReloadTab = (path: string) => {
-    reloadTab(path);
+  // Làm tươi tab: refresh RSC payload + báo cho trang SWR revalidate
+  // (router.refresh không đụng được cache SWR nên cần event kèm theo).
+  const handleReloadTab = (tab: Tab) => {
+    reloadTab(tab.path);
     router.refresh();
+    window.dispatchEvent(
+      new CustomEvent(TAB_REFRESH_EVENT, { detail: { path: tab.path } }),
+    );
+    setRefreshingTabId(tab.id);
+    setTimeout(() => setRefreshingTabId(null), 800);
   };
 
   const handleCloseTab = (e: React.MouseEvent, tabId: string) => {
@@ -71,10 +100,23 @@ export function PageTabs({
     setContextMenuTabId(tabId);
   };
 
-  // Sort tabs: pinned first, then by creation time
+  // Gom nhóm theo module: tab chi tiết đứng ngay sau tab danh sách cùng module.
+  // Thứ tự nhóm theo tab xuất hiện sớm nhất; trong nhóm: trang danh sách
+  // (path nông hơn) trước, rồi theo thời gian mở.
+  const groupOrder = new Map<string, number>();
+  for (const tab of [...tabs].sort((a, b) => a.createdAt - b.createdAt)) {
+    const key = groupKeyOf(tab);
+    if (!groupOrder.has(key)) groupOrder.set(key, groupOrder.size);
+  }
+
   const sortedTabs = [...tabs].sort((a, b) => {
-    if (a.isPinned && !b.isPinned) return -1;
-    if (!a.isPinned && b.isPinned) return 1;
+    if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
+    const groupDiff =
+      (groupOrder.get(groupKeyOf(a)) ?? 0) -
+      (groupOrder.get(groupKeyOf(b)) ?? 0);
+    if (groupDiff !== 0) return groupDiff;
+    const depthDiff = depthOf(a) - depthOf(b);
+    if (depthDiff !== 0) return depthDiff;
     return a.createdAt - b.createdAt;
   });
 
@@ -86,13 +128,13 @@ export function PageTabs({
   const hasOtherTabs = sortedTabs.length > 1;
 
   // 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) => {
+  // của NHÓM module (bộ 21 màu cố định) — mọi tab cùng module (danh sách + các
+  // trang chi tiết) chung một màu để nhận ra nhóm ngay. KHÔNG dùng --primary
+  // để mỗi nhóm có màu riêng, dễ phân biệt.
+  const getTabBackgroundColor = (groupKey: string, isActive: boolean) => {
     if (isActive) return "bg-background";
 
-    const normalizedPath = path.replace(/^\/[a-z]{2}(\/|$)/, "/");
-    const hash = normalizedPath.split("").reduce((acc, char) => {
+    const hash = groupKey.split("").reduce((acc, char) => {
       return (acc << 5) - acc + char.charCodeAt(0);
     }, 0);
 
@@ -135,6 +177,10 @@ export function PageTabs({
           {sortedTabs.map((tab, index) => {
             const isActive = tab.id === activeTabId;
             const isLast = index === sortedTabs.length - 1;
+            const isChild = depthOf(tab) > 1;
+            const isNewGroup =
+              index > 0 &&
+              groupKeyOf(sortedTabs[index - 1]) !== groupKeyOf(tab);
             return (
               <ContextMenu
                 key={tab.id}
@@ -146,12 +192,9 @@ export function PageTabs({
                     tabIndex={0}
                     onClick={() => handleTabClick(tab.id)}
                     onContextMenu={() => handleContextMenu(tab.id)}
-                    onMouseEnter={() => {
-                      // Prefetch route when hovering over tab
-                      if (!isActive && tab.path) {
-                        router.prefetch(tab.path);
-                      }
-                    }}
+                    // No hover prefetch: imperative prefetch is FULL-kind and its
+                    // payload is client-cached ~5 minutes, so switching back to a
+                    // tab would render stale data on these force-dynamic pages.
                     onKeyDown={(e) => {
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
@@ -163,7 +206,9 @@ export function PageTabs({
                       "border border-transparent",
                       "cursor-pointer",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                      getTabBackgroundColor(tab.path, isActive),
+                      getTabBackgroundColor(groupKeyOf(tab), isActive),
+                      // Khe hở nhỏ giữa các nhóm module cho dễ quét mắt
+                      isNewGroup && "ml-1.5",
                       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"
@@ -210,6 +255,16 @@ export function PageTabs({
                         />
                       ) : null}
                     </div>
+                    {/* Tab con (trang chi tiết): mũi tên rẽ nhánh để phân biệt
+                        với tab danh sách của cùng module */}
+                    {isChild && (
+                      <CornerDownRight
+                        className={cn(
+                          "h-3 w-3 shrink-0",
+                          isActive ? "text-muted-foreground" : "text-white/60",
+                        )}
+                      />
+                    )}
                     <span
                       className={cn(
                         "truncate max-w-[150px]",
@@ -232,6 +287,30 @@ export function PageTabs({
                           : tab.badge}
                       </Badge>
                     )}
+                    {/* Nút làm tươi: chỉ hiện trên tab đang active — refresh
+                        RSC + phát event cho trang SWR revalidate */}
+                    {isActive && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "h-4 w-4 ml-0.5 shrink-0",
+                          "hover:bg-primary/10 hover:text-primary",
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleReloadTab(tab);
+                        }}
+                        aria-label={`Reload ${tab.title}`}
+                      >
+                        <RefreshCw
+                          className={cn(
+                            "h-2.5 w-2.5",
+                            refreshingTabId === tab.id && "animate-spin",
+                          )}
+                        />
+                      </Button>
+                    )}
                     <Button
                       variant="ghost"
                       size="icon"
@@ -248,7 +327,7 @@ export function PageTabs({
                   </div>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                  <ContextMenuItem onClick={() => handleReloadTab(tab.path)}>
+                  <ContextMenuItem onClick={() => handleReloadTab(tab)}>
                     Reload Tab
                   </ContextMenuItem>
                   <ContextMenuItem onClick={() => handleTabClick(tab.id)}>

package/src/ui/layout/tab-navigation-provider.tsx

@@ -7,8 +7,10 @@ import {
   useReducer,
   useCallback,
   useRef,
+  useState,
+  Suspense,
 } from "react";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 
 import type { DynamicIconNameType, NavigationType } from "../../types";
@@ -43,6 +45,8 @@ type TabNavigationAction =
     }
   | { type: "REMOVE_TAB"; payload: { id: string } }
   | { type: "SET_ACTIVE_TAB"; payload: { id: string } }
+  | { type: "UPDATE_TAB_PATH"; payload: { id: string; path: string } }
+  | { type: "UPDATE_TAB_TITLE"; payload: { id: string; title: string } }
   | { type: "LOAD_STATE"; payload: TabNavigationState }
   | { type: "CLEAR_TABS" }
   | { type: "REMOVE_OTHER_TABS"; payload: { id: string } }
@@ -58,7 +62,9 @@ function tabNavigationReducer(
   switch (action.type) {
     case "ADD_TAB": {
       const { path, title, iconName } = action.payload;
-      const normalizedPath = normalizePathname(path);
+      // path may carry a query string; the tab id is keyed by pathname only
+      // so the same page with different filters stays a single tab.
+      const normalizedPath = normalizePathname(path.split("?")[0]);
       const tabId = normalizedPath;
 
       // Check if tab already exists
@@ -119,6 +125,30 @@ function tabNavigationReducer(
       };
     }
 
+    case "UPDATE_TAB_PATH": {
+      // Tab id stays keyed by pathname; path stores the full URL (incl. query
+      // string) so re-activating a tab restores its filters/pagination.
+      const { id, path } = action.payload;
+      const tab = state.tabs.find((t) => t.id === id);
+      if (!tab || tab.path === path) return state;
+
+      return {
+        ...state,
+        tabs: state.tabs.map((t) => (t.id === id ? { ...t, path } : t)),
+      };
+    }
+
+    case "UPDATE_TAB_TITLE": {
+      const { id, title } = action.payload;
+      const tab = state.tabs.find((t) => t.id === id);
+      if (!tab || !title || tab.title === title) return state;
+
+      return {
+        ...state,
+        tabs: state.tabs.map((t) => (t.id === id ? { ...t, title } : t)),
+      };
+    }
+
     case "LOAD_STATE": {
       return action.payload;
     }
@@ -181,6 +211,7 @@ interface TabNavigationContextValue {
   addTab: (path: string, title?: string) => void;
   removeTab: (id: string) => void;
   setActiveTab: (id: string) => void;
+  setTabTitle: (pathname: string, title: string) => void;
   clearTabs: () => void;
   removeOtherTabs: (id: string) => void;
   removeTabsToRight: (id: string) => void;
@@ -194,6 +225,25 @@ const TabNavigationContext = createContext<
   TabNavigationContextValue | undefined
 >(undefined);
 
+// useSearchParams requires a Suspense boundary on statically rendered routes,
+// so it lives in this leaf instead of the provider itself. It only signals
+// "the query string changed" — the provider reads the actual value from
+// window.location so both pathname- and search-triggered runs agree.
+function SearchParamsChangeSignal({
+  onChange,
+}: {
+  onChange: (search: string) => void;
+}) {
+  const searchParams = useSearchParams();
+  const search = searchParams?.toString() ?? "";
+
+  useEffect(() => {
+    onChange(search);
+  }, [search, onChange]);
+
+  return null;
+}
+
 export function TabNavigationProvider({
   children,
   navigations,
@@ -205,6 +255,7 @@ export function TabNavigationProvider({
   const pathname = usePathname();
   const router = useRouter();
   const isInitialized = useRef(false);
+  const [searchSignal, setSearchSignal] = useState("");
 
   // Load state from sessionStorage on mount
   useEffect(() => {
@@ -233,7 +284,7 @@ export function TabNavigationProvider({
     }
   }, [state]);
 
-  // Auto-add tab when pathname changes
+  // Auto-add tab when pathname or query string changes
   useEffect(() => {
     if (!pathname || !isInitialized.current) return;
 
@@ -243,13 +294,38 @@ export function TabNavigationProvider({
     }
 
     // Get title and icon from navigation data or use pathname
-    const title = findRouteTitle(pathname, navigations) || "Page";
+    const baseTitle = findRouteTitle(pathname, navigations) || "Page";
     const iconName = findRouteIcon(pathname, navigations) || undefined;
     const normalizedPath = normalizePathname(pathname);
 
+    // Trang chi tiết (segment cuối là ID) lấy tên module từ navigation nên
+    // mở 5 chi tiết là 5 tab trùng tên — đính đuôi ID ngắn để phân biệt ngay.
+    // Trang nào gắn useTabTitle sẽ thay bằng mã nghiệp vụ thật sau khi mount.
+    const lastSegment = normalizedPath.split("/").filter(Boolean).pop() ?? "";
+    const looksLikeId =
+      /^(c[a-z0-9]{20,}|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|\d{4,})$/i.test(
+        lastSegment,
+      );
+    const title = looksLikeId
+      ? `${baseTitle} · ${lastSegment.slice(-5)}`
+      : baseTitle;
+
+    // Full URL incl. query string — window.location is already updated by
+    // effect time, and reading it here keeps pathname-triggered and
+    // searchSignal-triggered runs consistent with each other.
+    const search = typeof window !== "undefined" ? window.location.search : "";
+    const fullPath = `${pathname}${search}`;
+
     // Check if tab already exists
     const existingTab = state.tabs.find((tab) => tab.id === normalizedPath);
     if (existingTab) {
+      // Remember the latest filters/pagination for this tab
+      if (existingTab.path !== fullPath) {
+        dispatch({
+          type: "UPDATE_TAB_PATH",
+          payload: { id: normalizedPath, path: fullPath },
+        });
+      }
       // Just set as active if not already active
       if (state.activeTabId !== normalizedPath) {
         dispatch({ type: "SET_ACTIVE_TAB", payload: { id: normalizedPath } });
@@ -258,23 +334,11 @@ export function TabNavigationProvider({
       // Add new tab
       dispatch({
         type: "ADD_TAB",
-        payload: { path: pathname, title, iconName },
+        payload: { path: fullPath, title, iconName },
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, navigations]);
-
-  // Prefetch all tab routes when tabs change
-  useEffect(() => {
-    if (!isInitialized.current) return;
-
-    // Prefetch all tab routes in background
-    state.tabs.forEach((tab) => {
-      if (tab.path && tab.id !== state.activeTabId) {
-        router.prefetch(tab.path);
-      }
-    });
-  }, [state.tabs, state.activeTabId, router]);
+  }, [pathname, searchSignal, navigations]);
 
   const addTab = useCallback(
     (path: string, title?: string) => {
@@ -325,6 +389,13 @@ export function TabNavigationProvider({
     [state.tabs, router],
   );
 
+  const setTabTitle = useCallback((tabPathname: string, title: string) => {
+    dispatch({
+      type: "UPDATE_TAB_TITLE",
+      payload: { id: normalizePathname(tabPathname), title },
+    });
+  }, []);
+
   const clearTabs = useCallback(() => {
     dispatch({ type: "CLEAR_TABS" });
   }, []);
@@ -501,6 +572,7 @@ export function TabNavigationProvider({
         addTab,
         removeTab,
         setActiveTab,
+        setTabTitle,
         clearTabs,
         removeOtherTabs,
         removeTabsToRight,
@@ -510,6 +582,9 @@ export function TabNavigationProvider({
         closeAndGoToParent,
       }}
     >
+      <Suspense fallback={null}>
+        <SearchParamsChangeSignal onChange={setSearchSignal} />
+      </Suspense>
       {children}
     </TabNavigationContext.Provider>
   );
@@ -521,6 +596,7 @@ const noopTabNavigation = {
   addTab: () => {},
   removeTab: () => {},
   setActiveTab: () => {},
+  setTabTitle: () => {},
   clearTabs: () => {},
   removeOtherTabs: () => {},
   removeTabsToRight: () => {},
@@ -534,3 +610,48 @@ export function useTabNavigation() {
   const context = useContext(TabNavigationContext);
   return context ?? noopTabNavigation;
 }
+
+/**
+ * Đặt tiêu đề tab của trang hiện tại theo dữ liệu nghiệp vụ — dùng ở trang
+ * chi tiết để 5 tab chi tiết không hiện cùng một tên chung chung.
+ * Truyền null/undefined khi dữ liệu chưa sẵn sàng (giữ tiêu đề mặc định).
+ *
+ * @example useTabTitle(order?.orderNumber)
+ */
+export function useTabTitle(title: string | null | undefined) {
+  const { setTabTitle, tabs } = useTabNavigation();
+  const pathname = usePathname();
+
+  // Effect con chạy TRƯỚC effect ADD_TAB của provider (React chạy effect từ
+  // dưới lên) — nên phải dep theo "tab đã tồn tại chưa" để set lại tiêu đề
+  // ngay sau khi provider thêm tab, thay vì dispatch vào khoảng không.
+  const tabExists =
+    !!pathname && tabs.some((t) => t.id === normalizePathname(pathname));
+
+  useEffect(() => {
+    if (title && pathname && tabExists) {
+      setTabTitle(pathname, title);
+    }
+  }, [title, pathname, tabExists, setTabTitle]);
+}
+
+/** Tên event nút "làm tươi" trên tab phát ra (detail = { path }). */
+export const TAB_REFRESH_EVENT = "goerp:tab-refresh";
+
+/**
+ * Lắng nghe nút làm tươi trên tab đang active. Trang client-fetch (SWR) dùng
+ * hook này để revalidate dữ liệu của mình — router.refresh() chỉ làm mới RSC
+ * payload, không đụng được cache SWR.
+ *
+ * @example useTabRefreshListener(() => mutateList())
+ */
+export function useTabRefreshListener(handler: () => void) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    const listener = () => handlerRef.current();
+    window.addEventListener(TAB_REFRESH_EVENT, listener);
+    return () => window.removeEventListener(TAB_REFRESH_EVENT, listener);
+  }, []);
+}

package/src/ui/layout/vertical-layout-header.tsx

@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 import { Settings } from "lucide-react";
 
 import type { DictionaryType } from "../../hooks";
+import type { ReactNode } from "react";
 import type { LocaleType } from "../../types";
 
 import { Button } from "../index";
@@ -17,8 +18,10 @@ import { ToggleMobileSidebar } from "./toggle-mobile-sidebar";
 
 export function VerticalLayoutHeader({
   dictionary,
+  notificationSlot,
 }: {
   dictionary: DictionaryType;
+  notificationSlot?: ReactNode;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -44,7 +47,7 @@ export function VerticalLayoutHeader({
         {/* Right: user actions */}
         <div className="flex items-center gap-2 flex-shrink-0">
           <div className="hidden sm:flex items-center gap-2">
-            <NotificationDropdown dictionary={dictionary} />
+            {notificationSlot ?? <NotificationDropdown dictionary={dictionary} />}
             <FullScreenToggle />
           </div>
           <Customizer

package/src/ui/layout/vertical-layout.tsx

@@ -16,6 +16,7 @@ interface VerticalLayoutProps {
   onGlobalSearch?: (query: string) => void;
   searchResults?: any[];
   searchLoading?: boolean;
+  notificationSlot?: ReactNode;
 }
 
 export function VerticalLayout({
@@ -25,6 +26,7 @@ export function VerticalLayout({
   onGlobalSearch,
   searchResults,
   searchLoading,
+  notificationSlot,
 }: VerticalLayoutProps) {
   return (
     <SidebarProvider>
@@ -36,7 +38,10 @@ export function VerticalLayout({
         searchLoading={searchLoading}
       />
       <SidebarInset className="w-full min-w-0 overflow-hidden h-screen flex flex-col">
-        <VerticalLayoutHeader dictionary={dictionary} />
+        <VerticalLayoutHeader
+          dictionary={dictionary}
+          notificationSlot={notificationSlot}
+        />
         <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4 overflow-auto">
           {children}
         </main>