@eintrek/erp-shell 0.1.55 → 0.1.57

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export { PermissionProvider, type PermissionProviderProps, type PermissionProbe,
 export { getRequiredChildGroups, normalizePathnameForPermissionRules, resolveUiRoutePermission, type UiRoutePermissionLookup, } from "./auth/permission-utils";
 export * from "./navigation/navigation-helpers";
 export type { Module, SubPage, SubModule, Tool, Company, NavigationData, } from "./navigation/navigation-types";
-export { canAccessNavPermissionRoute, filterNavigationToolsByPermission, filterNavigationModulesByPermission, getActiveModule, getActiveSubModule, buildUrlWithCode, } from "./navigation/navigation-data-helpers";
+export { canAccessNavPermissionRoute, filterNavigationToolsByPermission, filterNavigationModulesByPermission, getActiveModule, getActiveSubModule, buildUrlWithCode, resolveActiveNav, type ActiveNavEntry, type ResolveActiveNavOptions, } from "./navigation/navigation-data-helpers";
 export { ThemeProvider } from "./providers/theme-provider";
 export { FeatureFlagsProvider, useFeatureFlags, useFeatureFlag, type FeatureFlags, } from "./providers/feature-flags-provider";
 export { ReactQueryProvider } from "./providers/react-query-provider";

package/dist/index.esm.js

@@ -703,46 +703,70 @@ function filterNavigationModulesByPermission(modules, rulesMap, userChildSegment
     })
         .filter((m) => m !== null);
 }
+/** The path below the org code: "/O1/project/budgets" → "/project/budgets". */
+function pathBelowCode(pathname) {
+    const segments = pathname.split("?")[0].split("/").filter(Boolean);
+    return segments.length > 1 ? "/" + segments.slice(1).join("/") : "/";
+}
 /**
- * Find the active top-level module id from `pathname`. Strips the org-code
- * prefix from the path (first path segment) before matching.
+ * Whether `url` (relative, no org code) covers `path`: the same page, or a
+ * page below it on a segment boundary. "/" covers only the home itself and a
+ * query-only URL covers nothing.
  */
-function getActiveModule(pathname, modules) {
-    const segments = pathname.split("/").filter(Boolean);
-    const pathWithoutCode = segments.length > 1 ? "/" + segments.slice(1).join("/") : "/";
+function coversPath(url, path) {
+    if (!url || url.includes("?") || /^https?:\/\//i.test(url))
+        return false;
+    if (url === "/")
+        return path === "/";
+    const clean = url.replace(/\/+$/, "");
+    return path === clean || path.startsWith(clean + "/");
+}
+/**
+ * The module and page whose URL is the longest one covering the path, over
+ * every module — a module's own URL, its pages and their sub-pages. Equal
+ * lengths go to the first in menu order.
+ */
+function longestMatch(path, modules) {
+    let best = null;
+    const consider = (module, sub, url) => {
+        if (!coversPath(url, path))
+            return;
+        if (!best || url.length > best.length) {
+            best = { module, sub, length: url.length };
+        }
+    };
     for (const navModule of modules) {
-        if (pathWithoutCode === navModule.url || pathname.endsWith(navModule.url)) {
-            return navModule.id;
-        }
-        if (navModule.subModules) {
-            for (const subModule of navModule.subModules) {
-                if (pathWithoutCode.startsWith(subModule.url) ||
-                    pathname.includes(subModule.url)) {
-                    return navModule.id;
-                }
-            }
+        for (const sub of navModule.subModules ?? []) {
+            consider(navModule, sub, sub.url);
+            for (const page of sub.subPages ?? [])
+                consider(navModule, sub, page.url);
         }
+        // After its pages: on a tie the page is the more specific answer.
+        consider(navModule, null, navModule.url);
     }
-    return null;
+    const found = best;
+    return found ? { module: found.module, sub: found.sub } : null;
+}
+/**
+ * Find the active top-level module id from `pathname`: the module whose URL
+ * (or one of whose pages' URLs) is the longest prefix of the path below the
+ * org code.
+ *
+ * Before 0.1.57 this took the first module with a page URL anywhere in the
+ * path (`includes`), so "/project" claimed /project/schedule and the sidebar,
+ * the trail and the tabs could disagree about where the user was.
+ */
+function getActiveModule(pathname, modules) {
+    return longestMatch(pathBelowCode(pathname), modules)?.module.id ?? null;
 }
-/** Find the active sub-module id from `pathname`. */
+/** Find the active sub-module id from `pathname`, by the same rule. */
 function getActiveSubModule(pathname, modules) {
-    const segments = pathname.split("/").filter(Boolean);
-    const pathWithoutCode = segments.length > 1 ? "/" + segments.slice(1).join("/") : "/";
-    for (const navModule of modules) {
-        if (navModule.subModules) {
-            for (const subModule of navModule.subModules) {
-                if (pathWithoutCode.startsWith(subModule.url) ||
-                    pathname.includes(subModule.url)) {
-                    return subModule.id;
-                }
-            }
-        }
-    }
-    return null;
+    // Null when the module's own URL is the best match: no page of it is.
+    return longestMatch(pathBelowCode(pathname), modules)?.sub?.id ?? null;
 }
 /** Prepend `code` (org code) to a relative URL so `/sales` → `/O25.../sales`.
  * Absolute `http(s)://` URLs are left intact; optional `{code}` placeholder is replaced.
+ * Query/hash are preserved: `/?start=1` → `/O25...?start=1` (not `/O25.../?start=1`).
  */
 function buildUrlWithCode(code, url) {
     if (/^https?:\/\//i.test(url)) {
@@ -752,8 +776,109 @@ function buildUrlWithCode(code, url) {
     }
     if (!code)
         return url;
-    const cleanUrl = url.startsWith("/") ? url.slice(1) : url;
-    return `/${code}/${cleanUrl}`;
+    const match = url.match(/^([^?#]*)(\?[^#]*)?(#.*)?$/);
+    const path = match?.[1] ?? url;
+    const query = match?.[2] ?? "";
+    const hash = match?.[3] ?? "";
+    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+    const base = cleanPath ? `/${code}/${cleanPath}` : `/${code}`;
+    return `${base}${query}${hash}`;
+}
+const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+/** Same check as `isPathActive`: the page itself or one below it. */
+const pathIsAtOrBelow = (pathname, url) => pathname === url || pathname.startsWith(url + "/");
+/** "/O1/" and "/O1" are the same page; a query string never is. */
+function samePage(pathname, url) {
+    if (url.includes("?"))
+        return false;
+    return strip(pathname) === strip(url);
+}
+/**
+ * How long the URL that makes `url` cover `pathname` is — or -1 when it does
+ * not. The organisation's home ("/" → "/O1") covers only itself: every page
+ * sits below it, and a dashboard is not the parent of every page.
+ */
+function coverLength(pathname, url, code) {
+    const built = buildUrlWithCode(code, url);
+    const isRoot = url === "/" || (!!code && strip(built) === `/${code}`);
+    if (isRoot) {
+        return samePage(pathname, built) || samePage(pathname, url)
+            ? strip(built).length
+            : -1;
+    }
+    if (pathIsAtOrBelow(pathname, built))
+        return built.length;
+    if (pathIsAtOrBelow(pathname, url))
+        return url.length;
+    return -1;
+}
+/**
+ * Pick the single sidebar entry for `pathname`: the longest URL that covers
+ * the path, across every group. Before 0.1.57 the longest match was taken in
+ * each group separately, so /project/schedule lit both "โครงการ" (/project,
+ * under โครงการ) and "ภาพรวมแผน" (/project/schedule, under แผนงาน).
+ *
+ * Equal lengths go to the group the app marks active (`item.isActive`, from
+ * its `activeModule`), then to a page over a group row, then to the first in
+ * menu order.
+ */
+function resolveActiveNav(items, pathname, { code, workspace = false, highlightActiveModule = false } = {}) {
+    const path = pathname ?? "";
+    // The app named a one-line module as the current one: that is the answer.
+    if (highlightActiveModule) {
+        const leaf = items.findIndex(item => !item.subModules?.length && !!item.isActive);
+        if (leaf >= 0)
+            return { item: leaf, sub: null, subPage: null };
+    }
+    let best = null;
+    const consider = (c) => {
+        if (!best) {
+            best = c;
+            return;
+        }
+        if (c.length !== best.length) {
+            if (c.length > best.length)
+                best = c;
+            return;
+        }
+        const cActive = !!items[c.item].isActive;
+        const bActive = !!items[best.item].isActive;
+        if (cActive !== bActive) {
+            if (cActive)
+                best = c;
+            return;
+        }
+        if (c.sub !== null && best.sub === null)
+            best = c;
+    };
+    items.forEach((item, i) => {
+        const itemUrl = buildUrlWithCode(code, item.url);
+        const subs = item.subModules ?? [];
+        // The row itself: only on its own URL. A one-line item under
+        // highlightActiveModule is lit by isActive alone (handled above).
+        if (!(highlightActiveModule && subs.length === 0)) {
+            const own = workspace ? samePage(path, itemUrl) : path === itemUrl;
+            if (own)
+                consider({ item: i, sub: null, subPage: null, length: strip(itemUrl).length });
+        }
+        subs.forEach((sub, j) => {
+            // The sub-item counts by its own URL or by the longest of its pages.
+            let subPage = null;
+            let pageLength = -1;
+            (sub.subPages ?? []).forEach((page, k) => {
+                const l = coverLength(path, page.url, code);
+                if (l > pageLength) {
+                    pageLength = l;
+                    subPage = k;
+                }
+            });
+            const length = Math.max(coverLength(path, sub.url, code), pageLength);
+            if (length >= 0)
+                consider({ item: i, sub: j, subPage, length });
+        });
+    });
+    const found = best;
+    return found ? { item: found.item, sub: found.sub, subPage: found.subPage } : null;
 }
 
 function NavTools({ tools, closeOnNavigation = false }) {
@@ -1240,7 +1365,7 @@ function platformApiBase(app) {
  * This package's version, attached to help messages so the back office can
  * tell which shell a report came from. Keep in step with package.json.
  */
-const SHELL_VERSION = "0.1.53";
+const SHELL_VERSION = "0.1.57";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1788,31 +1913,6 @@ function buildSystemLinks({ orgCode, activeApp, features, }) {
     }));
 }
 
-// Helper function to check if pathname matches a URL pattern
-// This prevents false matches like /reports/sales matching /sales
-// Handles paths with or without [code] prefix
-function isPathActive(pathname, url) {
-    // Exact match
-    if (pathname === url) {
-        return true;
-    }
-    // Check if pathname starts with url + "/" to ensure exact segment matching
-    // This prevents /reports/sales from matching /sales
-    // Example: /org123/reports/sales should NOT match /org123/sales
-    // But /org123/sales/overview SHOULD match /org123/sales
-    if (pathname.startsWith(url + "/")) {
-        return true;
-    }
-    return false;
-}
-
-/** "/O1/" and "/O1" are the same page; a query string never is. */
-function samePage(pathname, url) {
-    if (url.includes("?"))
-        return false;
-    const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
-    return strip(pathname) === strip(url);
-}
 function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, chrome = "brand", highlightActiveModule = false, }) {
     const workspace = chrome === "workspace";
     const params = useParams();
@@ -1823,32 +1923,24 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             setOpen(false);
     };
     const code = orgCode ?? params?.code;
-    // Which module (and sub-item) the current page belongs to.
-    const states = items.map(item => {
+    // The one entry that stands for this page — the longest matching URL
+    // across every group, not per group (which lit /project and
+    // /project/schedule together).
+    const active = resolveActiveNav(items, pathname, {
+        code,
+        workspace,
+        highlightActiveModule,
+    });
+    const states = items.map((item, i) => {
         const itemUrl = buildUrlWithCode(code, item.url);
-        // Most specific (longest) matching sub-item URL so only one link is active.
-        const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
-            const subItemUrl = buildUrlWithCode(code, subItem.url);
-            const matches = isPathActive(pathname, subItemUrl) ||
-                isPathActive(pathname, subItem.url);
-            const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                isPathActive(pathname, subPage.url));
-            if (!matches && !subPageMatches)
-                return best;
-            const candidateUrl = subItemUrl;
-            if (!best)
-                return candidateUrl;
-            return candidateUrl.length > best.length ? candidateUrl : best;
-        }, null) ?? null;
-        const hasActiveSubItem = !!activeSubItemUrl ||
-            !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                isPathActive(pathname, subPage.url)));
-        // Parent only active when path matches its URL exactly AND no child
-        // is active (so parent+child don't both light up).
-        const isItemActive = (highlightActiveModule && !item.subModules?.length && !!item.isActive) ||
-            ((workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
-                !hasActiveSubItem);
-        return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
+        const mine = active?.item === i ? active : null;
+        return {
+            itemUrl,
+            activeSub: mine?.sub ?? null,
+            activeSubPage: mine?.subPage ?? null,
+            hasActiveSubItem: mine?.sub != null,
+            isItemActive: !!mine && mine.sub === null,
+        };
     });
     // A group opens when its page becomes current and otherwise stays as the
     // user left it. defaultOpen alone decided once, on the first render — and
@@ -1886,7 +1978,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     item.group &&
                     item.group !== items[index - 1]?.group ? (jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
                         (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
-                const { itemUrl, activeSubItemUrl, isItemActive } = states[index];
+                const { itemUrl, activeSub, activeSubPage, isItemActive } = states[index];
                 const IconComp = item.icon;
                 const workspaceButton = workspace
                     ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-xs " +
@@ -1900,9 +1992,9 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxs(Fragment$1, { children: [icon, jsx("span", { id: item.id, children: item.titleTh }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
                                                     (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: workspace
                                                 ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-xs [&_svg]:!size-[17px]"
-                                                : undefined, children: item.subModules.map(subItem => {
+                                                : undefined, children: item.subModules.map((subItem, subIndex) => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
-                                                const isSubItemActive = subItemUrl === activeSubItemUrl;
+                                                const isSubItemActive = activeSub === subIndex;
                                                 const SubIcon = subItem.icon;
                                                 const approvalCount = approvalCounts && subItem.approvalCountKey
                                                     ? (approvalCounts[subItem.approvalCountKey] ?? 0)
@@ -1910,10 +2002,10 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
-                                                    const hasActiveSubPage = subItem.subPages.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)));
-                                                    return (jsx(Collapsible, { asChild: true, defaultOpen: isSubItemActive || hasActiveSubPage, className: "group/sub-collapsible", children: jsxs(SidebarMenuSubItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive || hasActiveSubPage, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsx(ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map(subPage => {
+                                                    return (jsx(Collapsible, { asChild: true, defaultOpen: isSubItemActive, className: "group/sub-collapsible", children: jsxs(SidebarMenuSubItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsx(ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map((subPage, subPageIndex) => {
                                                                             const subPageUrl = buildUrlWithCode(code, subPage.url);
-                                                                            const isSubPageActive = isPathActive(pathname, subPageUrl);
+                                                                            const isSubPageActive = isSubItemActive &&
+                                                                                activeSubPage === subPageIndex;
                                                                             const SubPageIcon = subPage.icon;
                                                                             return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: `font-thai w-full text-sm ${isSubPageActive
                                                                                         ? "text-sidebar-accent-foreground font-medium"
@@ -3366,6 +3458,24 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
     return jsx(Fragment$1, { children: children });
 }
 
+// Helper function to check if pathname matches a URL pattern
+// This prevents false matches like /reports/sales matching /sales
+// Handles paths with or without [code] prefix
+function isPathActive(pathname, url) {
+    // Exact match
+    if (pathname === url) {
+        return true;
+    }
+    // Check if pathname starts with url + "/" to ensure exact segment matching
+    // This prevents /reports/sales from matching /sales
+    // Example: /org123/reports/sales should NOT match /org123/sales
+    // But /org123/sales/overview SHOULD match /org123/sales
+    if (pathname.startsWith(url + "/")) {
+        return true;
+    }
+    return false;
+}
+
 /** Cookie name for the cross-subdomain theme choice. */
 const THEME_COOKIE = "erp-theme";
 /**
@@ -3611,5 +3721,5 @@ const getAxiosErrorMessage = (error) => {
     return String(error);
 };
 
-export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, HelpButton, HelpDialogHost, NavMain, NavTools, NavUser, OWNER_CHIP, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SHELL_VERSION, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, closeHelp, decodeJWT, describeAttached, describeBrowser, detectHelpApp, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, hasPlanFeature, isLikelyTransientNetworkError, isPathActive, myRolesQueryKey, normalizePathnameForPermissionRules, openHelp, parseMyRoles, resolveUiRoutePermission, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
+export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, HelpButton, HelpDialogHost, NavMain, NavTools, NavUser, OWNER_CHIP, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SHELL_VERSION, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, closeHelp, decodeJWT, describeAttached, describeBrowser, detectHelpApp, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, hasPlanFeature, isLikelyTransientNetworkError, isPathActive, myRolesQueryKey, normalizePathnameForPermissionRules, openHelp, parseMyRoles, resolveActiveNav, resolveUiRoutePermission, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map