@eintrek/erp-shell 0.1.55 → 0.1.57

package/dist/index.js

@@ -722,46 +722,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)) {
@@ -771,8 +795,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 }) {
@@ -1259,7 +1384,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: "แพลตฟอร์ม",
@@ -1807,31 +1932,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 = navigation.useParams();
@@ -1842,32 +1942,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
@@ -1905,7 +1997,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     item.group &&
                     item.group !== items[index - 1]?.group ? (jsxRuntime.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 " +
@@ -1919,9 +2011,9 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { id: item.id, children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxRuntime.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, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.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)
@@ -1929,10 +2021,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 (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || hasActiveSubPage, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive || hasActiveSubPage, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map(subPage => {
+                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.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 (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: `font-thai w-full text-sm ${isSubPageActive
                                                                                         ? "text-sidebar-accent-foreground font-medium"
@@ -3385,6 +3477,24 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { 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";
 /**
@@ -3699,6 +3809,7 @@ exports.myRolesQueryKey = myRolesQueryKey;
 exports.normalizePathnameForPermissionRules = normalizePathnameForPermissionRules;
 exports.openHelp = openHelp;
 exports.parseMyRoles = parseMyRoles;
+exports.resolveActiveNav = resolveActiveNav;
 exports.resolveUiRoutePermission = resolveUiRoutePermission;
 exports.roleSummary = roleSummary;
 exports.runGlobalRequestPrecheck = runGlobalRequestPrecheck;