@goplusvn/core 0.1.32 → 0.1.33

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 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.33",
   "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

@@ -146,12 +146,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();

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,7 @@ 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: "LOAD_STATE"; payload: TabNavigationState }
   | { type: "CLEAR_TABS" }
   | { type: "REMOVE_OTHER_TABS"; payload: { id: string } }
@@ -58,7 +61,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 +124,19 @@ 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 "LOAD_STATE": {
       return action.payload;
     }
@@ -194,6 +212,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 +242,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 +271,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;
 
@@ -247,9 +285,22 @@ export function TabNavigationProvider({
     const iconName = findRouteIcon(pathname, navigations) || undefined;
     const normalizedPath = normalizePathname(pathname);
 
+    // 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 +309,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) => {
@@ -510,6 +549,9 @@ export function TabNavigationProvider({
         closeAndGoToParent,
       }}
     >
+      <Suspense fallback={null}>
+        <SearchParamsChangeSignal onChange={setSearchSignal} />
+      </Suspense>
       {children}
     </TabNavigationContext.Provider>
   );

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>