@eintrek/erp-shell 0.1.56 → 0.1.58

package/README.md

@@ -86,6 +86,16 @@ Shell now owns the **shapes + helpers** for navigation; apps own the data.
 - Components: `NavTools` (reads Tool[] + buildUrlWithCode internally),
   `AppBreadcrumb` (accepts `labels` prop so per-app Thai overrides stay local).
 
+Sidebar highlight (0.1.58, `resolveSidebarNav`): an entry is lit only on
+its own page — its URL or one of its `subPages`, exactly, after the org code,
+ignoring a trailing slash — and at most one entry is lit. A record, a create
+or an edit page below a menu page lights nothing; the group holding it (the
+deepest URL the path sits below) opens. A page that should keep its entry lit
+(a list's tab that is its own route) goes in that entry's `subPages`, with a
+`permissionRouteKey` the user holds (usually the entry's own), since the
+permission filter drops a sub-page without one. `getActiveModule` stays the
+longest prefix; `getActiveSubModule` is exact like the sidebar.
+
 Each app's `navigation-data.ts` now (1) imports types/helpers from shell,
 (2) declares its own `navigationData` const + `breadcrumbLabels`, (3) wraps
 `getActiveModule`/`getActiveSubModule` to keep the 1-arg signature, and

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, resolveSidebarNav, type ActiveNavEntry, type SidebarNavState, 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,43 +703,79 @@ 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`: the page whose own URL — or
+ * one of whose listed `subPages` — is the path itself (below the org code,
+ * ignoring a trailing slash). A record, a create or an edit page below a page
+ * is no page of the menu, so it has no active sub-module (0.1.58); the module
+ * (`getActiveModule`) still says where it belongs.
+ *
+ * Equal URLs in two modules go to the active module's page.
+ */
 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;
+    const path = strip(pathBelowCode(pathname));
+    const isPage = (url) => isMenuPath(url) && strip(url) === path;
+    const pagesOf = (m) => (m.subModules ?? []).filter(sub => isPage(sub.url) || (sub.subPages ?? []).some(p => isPage(p.url)));
+    const moduleId = getActiveModule(pathname, modules);
+    const own = modules.find(m => m.id === moduleId);
+    const hit = (own ? pagesOf(own)[0] : undefined) ?? modules.flatMap(pagesOf)[0];
+    return hit?.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.
@@ -761,6 +797,140 @@ function buildUrlWithCode(code, url) {
     const base = cleanPath ? `/${code}/${cleanPath}` : `/${code}`;
     return `${base}${query}${hash}`;
 }
+const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+/** A URL the path can be compared with: not query-only, not another site. */
+const isMenuPath = (url) => !!url && !url.includes("?") && !/^https?:\/\//i.test(url);
+/** 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.split("?")[0]) === strip(url);
+}
+/**
+ * How long `url` is when it is the page `pathname` shows (ignoring a trailing
+ * slash), or -1. Compared with and without the org code, as the menu URLs
+ * are written either way.
+ */
+function pageLength(pathname, url, code) {
+    if (!isMenuPath(url))
+        return -1;
+    const built = buildUrlWithCode(code, url);
+    if (samePage(pathname, built))
+        return strip(built).length;
+    if (samePage(pathname, url))
+        return strip(url).length;
+    return -1;
+}
+/**
+ * How long the URL that makes `url` cover `pathname` is — the page itself or
+ * one below it — or -1. 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) {
+    if (!isMenuPath(url))
+        return -1;
+    const path = strip(pathname.split("?")[0]);
+    const built = strip(buildUrlWithCode(code, url));
+    const isRoot = url === "/" || (!!code && built === `/${code}`);
+    if (isRoot)
+        return pageLength(path, url, code);
+    if (pathIsAtOrBelow(path, built))
+        return built.length;
+    const raw = strip(url);
+    if (pathIsAtOrBelow(path, raw))
+        return raw.length;
+    return -1;
+}
+/**
+ * Where `pathname` sits in the sidebar: the entry to light and the group to
+ * open.
+ *
+ * Lit (0.1.58): only the entry whose own page this is — its URL or one of its
+ * `subPages`, exactly. A record, a create or an edit page below a menu page
+ * (Plannex /project/detail/<id>/schedule under "โครงการ" /project) lights
+ * nothing; an app lists such a page in `subPages` when it should keep its
+ * entry lit. At most one entry across every group (0.1.57).
+ *
+ * Open: the lit entry's group, or else the group with the deepest URL the
+ * path sits below.
+ *
+ * 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 resolveSidebarNav(items, pathname, { code, highlightActiveModule = false } = {}) {
+    const path = (pathname ?? "").split("?")[0];
+    // 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 {
+                active: { item: leaf, sub: null, subPage: null },
+                open: { item: leaf, sub: null },
+            };
+        }
+    }
+    const better = (c, best) => {
+        if (!best)
+            return true;
+        if (c.length !== best.length)
+            return c.length > best.length;
+        const cActive = !!items[c.item].isActive;
+        const bActive = !!items[best.item].isActive;
+        if (cActive !== bActive)
+            return cActive;
+        // The same sub-item by its own URL and by a listed page: the page.
+        if (c.item === best.item && c.sub === best.sub) {
+            return c.subPage !== null && best.subPage === null;
+        }
+        return c.sub !== null && best.sub === null;
+    };
+    let exact = null;
+    let within = null;
+    const consider = (c, isExact) => {
+        if (c.length < 0)
+            return;
+        if (isExact) {
+            if (better(c, exact))
+                exact = c;
+        }
+        else if (better(c, within)) {
+            within = c;
+        }
+    };
+    items.forEach((item, i) => {
+        const subs = item.subModules ?? [];
+        const row = { item: i, sub: null, subPage: null };
+        // 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)) {
+            consider({ ...row, length: pageLength(path, item.url, code) }, true);
+        }
+        consider({ ...row, length: coverLength(path, item.url, code) }, false);
+        subs.forEach((sub, j) => {
+            const entry = { item: i, sub: j };
+            consider({ ...entry, subPage: null, length: pageLength(path, sub.url, code) }, true);
+            consider({ ...entry, subPage: null, length: coverLength(path, sub.url, code) }, false);
+            (sub.subPages ?? []).forEach((page, k) => {
+                consider({ ...entry, subPage: k, length: pageLength(path, page.url, code) }, true);
+                consider({ ...entry, subPage: k, length: coverLength(path, page.url, code) }, false);
+            });
+        });
+    });
+    const lit = exact;
+    const holder = lit ?? within;
+    return {
+        active: lit ? { item: lit.item, sub: lit.sub, subPage: lit.subPage } : null,
+        open: holder ? { item: holder.item, sub: holder.sub } : null,
+    };
+}
+/** The entry lit for `pathname` — `resolveSidebarNav(...).active`. */
+function resolveActiveNav(items, pathname, options = {}) {
+    return resolveSidebarNav(items, pathname, options).active;
+}
 
 function NavTools({ tools, closeOnNavigation = false }) {
     const pathname = usePathname();
@@ -1246,7 +1416,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.58";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1794,31 +1964,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();
@@ -1829,63 +1974,46 @@ 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 lit for this page — only on that entry's own page, never
+    // on a record or a form below it — and the group holding the page, which
+    // opens either way.
+    const { active, open } = resolveSidebarNav(items, pathname, {
+        code,
+        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). When the app opts
-        // into highlightActiveModule, leaf items trust `item.isActive` alone —
-        // needed for query-only hub actions (`/?start=1`) that share a path
-        // with another leaf (e.g. "แอปของฉัน" at `/`).
-        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,
+            openSub: open?.item === i ? open.sub : null,
+            isItemActive: !!mine && mine.sub === null,
+        };
     });
-    // A group opens when its page becomes current and otherwise stays as the
+    // A group opens when the page moves into it and otherwise stays as the
     // user left it. defaultOpen alone decided once, on the first render — and
     // on a direct load the sub-items arrive after permissions do, so the group
     // holding the current page stayed shut.
-    const activeKey = items
-        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
-        .map(item => item.id)
-        .join(",");
-    const [openIds, setOpenIds] = React.useState(() => new Set(activeKey ? activeKey.split(",") : []));
+    const openId = open ? (items[open.item]?.id ?? "") : "";
+    const [openIds, setOpenIds] = React.useState(() => new Set(openId ? [openId] : []));
     React.useEffect(() => {
-        if (!activeKey)
+        if (!openId)
             return;
         setOpenIds(prev => {
-            const ids = activeKey.split(",");
-            if (ids.every(id => prev.has(id)))
+            if (prev.has(openId))
                 return prev;
             const next = new Set(prev);
-            ids.forEach(id => next.add(id));
+            next.add(openId);
             return next;
         });
-    }, [activeKey]);
-    const setItemOpen = (id, open) => setOpenIds(prev => {
-        if (prev.has(id) === open)
+    }, [openId]);
+    const setItemOpen = (id, isOpen) => setOpenIds(prev => {
+        if (prev.has(id) === isOpen)
             return prev;
         const next = new Set(prev);
-        if (open)
+        if (isOpen)
             next.add(id);
         else
             next.delete(id);
@@ -1896,7 +2024,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, openSub, isItemActive } = states[index];
                 const IconComp = item.icon;
                 const workspaceButton = workspace
                     ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-xs " +
@@ -1906,13 +2034,13 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     : "";
                 const icon = workspace && IconComp ? (jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
                 const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-xs leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
-                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
+                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
                                                 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)
@@ -1920,10 +2048,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 || openSub === subIndex, 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"
@@ -3376,6 +3504,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";
 /**
@@ -3621,5 +3767,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, resolveSidebarNav, resolveUiRoutePermission, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map