@eintrek/erp-shell 0.1.57 → 0.1.59

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/help/help-store.d.ts

@@ -4,7 +4,7 @@
  * live in different subtrees. A tiny external store rather than a context so
  * NavUser works the same whether or not it sits under the layout.
  */
-export type HelpAppId = "platform" | "accounx" | "invenx" | "plannex" | "peoplx";
+export type HelpAppId = "platform" | "accounx" | "invenx" | "plannex" | "peoplx" | "sellx" | "carex";
 /** Opens the dialog — a no-op when no layout has mounted one. */
 export declare function openHelp(): void;
 export declare function closeHelp(): void;

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, resolveActiveNav, type ActiveNavEntry, type ResolveActiveNavOptions, } 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

@@ -5,7 +5,7 @@ import { useSession, signOut } from 'next-auth/react';
 import { useQueryClient, useQuery, QueryClientContext, QueryClient, MutationCache, QueryCache, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { cn, Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Avatar, AvatarImage, AvatarFallback, Collapsible, CollapsibleTrigger, CollapsibleContent, Badge, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Skeleton, Dialog, DialogContent, DialogHeader, DialogTitle, Label, Textarea, DialogFooter, Card, CardHeader, CardContent } from '@eintrek/erp-theme';
-import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, LayoutGrid, ExternalLink, CircleHelp, Loader2, LogOut, Calculator, Warehouse, FolderKanban, Users, ChevronDown, Plus, ChevronsUpDown, ImagePlus, X, CircleCheck, ArrowLeft, ArrowRight, Compass, ArrowUpRight, Ban, Home, Headset, ContactRound, UserPlus } from 'lucide-react';
+import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, LayoutGrid, ExternalLink, CircleHelp, Loader2, LogOut, Calculator, Warehouse, FolderKanban, Users, Store, Headset, ChevronDown, Plus, ChevronsUpDown, ImagePlus, X, CircleCheck, ArrowLeft, ArrowRight, Compass, ArrowUpRight, Ban, Home, ContactRound, UserPlus } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
@@ -759,10 +759,23 @@ function longestMatch(path, modules) {
 function getActiveModule(pathname, modules) {
     return longestMatch(pathBelowCode(pathname), modules)?.module.id ?? null;
 }
-/** Find the active sub-module id from `pathname`, by the same rule. */
+/**
+ * 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) {
-    // Null when the module's own URL is the best match: no page of it is.
-    return longestMatch(pathBelowCode(pathname), modules)?.sub?.id ?? 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.
@@ -785,100 +798,138 @@ function buildUrlWithCode(code, url) {
     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) === strip(url);
+    return strip(pathname.split("?")[0]) === 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.
+ * 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 coverLength(pathname, url, code) {
+function pageLength(pathname, url, code) {
+    if (!isMenuPath(url))
+        return -1;
     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))
+    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;
-    if (pathIsAtOrBelow(pathname, url))
-        return url.length;
+    const raw = strip(url);
+    if (pathIsAtOrBelow(path, raw))
+        return raw.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 แผนงาน).
+ * 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 resolveActiveNav(items, pathname, { code, workspace = false, highlightActiveModule = false } = {}) {
-    const path = pathname ?? "";
+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 { 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;
+        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) {
-            if (cActive)
-                best = c;
+        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;
         }
-        if (c.sub !== null && best.sub === null)
-            best = c;
     };
     items.forEach((item, i) => {
-        const itemUrl = buildUrlWithCode(code, item.url);
         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)) {
-            const own = workspace ? samePage(path, itemUrl) : path === itemUrl;
-            if (own)
-                consider({ item: i, sub: null, subPage: null, length: strip(itemUrl).length });
+            consider({ ...row, length: pageLength(path, item.url, code) }, true);
         }
+        consider({ ...row, length: coverLength(path, item.url, code) }, false);
         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;
+            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) => {
-                const l = coverLength(path, page.url, code);
-                if (l > pageLength) {
-                    pageLength = l;
-                    subPage = k;
-                }
+                consider({ ...entry, subPage: k, length: pageLength(path, page.url, code) }, true);
+                consider({ ...entry, subPage: k, length: coverLength(path, page.url, code) }, false);
             });
-            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;
+    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 }) {
@@ -1365,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.57";
+const SHELL_VERSION = "0.1.59";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1373,6 +1424,8 @@ const HELP_APP_LABEL = {
     peoplx: "Peoplx",
     plannex: "Plannex",
     invenx: "Invenx",
+    sellx: "Sellx",
+    carex: "Carex",
     other: "อื่น ๆ",
 };
 function originOf(value) {
@@ -1407,6 +1460,10 @@ function detectHelpApp(explicit) {
         return "plannex";
     if (host.startsWith("invenx."))
         return "invenx";
+    if (host.startsWith("sellx."))
+        return "sellx";
+    if (host.startsWith("carex."))
+        return "carex";
     if (host.startsWith("platform.") || host === "antniti.com" || host === "www.antniti.com") {
         return "platform";
     }
@@ -1417,6 +1474,8 @@ function detectHelpApp(explicit) {
         ["invenx", process.env.NEXT_PUBLIC_INVENX_URL],
         ["plannex", process.env.NEXT_PUBLIC_PLANNEX_URL],
         ["peoplx", process.env.NEXT_PUBLIC_HR_URL],
+        ["sellx", process.env.NEXT_PUBLIC_SELLX_URL],
+        ["carex", process.env.NEXT_PUBLIC_CAREX_URL],
     ];
     for (const [id, url] of configured) {
         if (originOf(url) === here)
@@ -1804,6 +1863,10 @@ const PLAN_FEATURES = {
     MODULE_INVENTORY: "module.inventory",
     MODULE_PROJECT: "module.project",
     MODULE_SECRETARIAT: "module.secretariat",
+    /** Sellx add-on: POS, members and chat commerce. */
+    MODULE_SELLX: "module.sellx",
+    /** Carex add-on: help desk, SLA and knowledge base. */
+    MODULE_CAREX: "module.carex",
     /** AI pack (paid or trial): AI calls on AntNiti's key while credits remain. */
     AI: "ai",
 };
@@ -1888,6 +1951,20 @@ const APPS = [
         features: [PLAN_FEATURES.MODULE_HR],
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_HR_URL, "https://peoplx.antniti.com"),
     },
+    {
+        id: "sellx",
+        label: "Sellx",
+        icon: jsx(Store, { className: "h-4 w-4 shrink-0" }),
+        features: [PLAN_FEATURES.MODULE_SELLX],
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_SELLX_URL, "https://sellx.antniti.com"),
+    },
+    {
+        id: "carex",
+        label: "Carex",
+        icon: jsx(Headset, { className: "h-4 w-4 shrink-0" }),
+        features: [PLAN_FEATURES.MODULE_CAREX],
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_CAREX_URL, "https://carex.antniti.com"),
+    },
 ];
 /**
  * Builds the cross-app link list for <NavUser systemLinks>.
@@ -1923,12 +2000,11 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             setOpen(false);
     };
     const code = orgCode ?? params?.code;
-    // 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, {
+    // 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,
-        workspace,
         highlightActiveModule,
     });
     const states = items.map((item, i) => {
@@ -1938,36 +2014,32 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             itemUrl,
             activeSub: mine?.sub ?? null,
             activeSubPage: mine?.subPage ?? null,
-            hasActiveSubItem: mine?.sub != 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);
@@ -1978,7 +2050,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, activeSub, activeSubPage, 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 " +
@@ -1988,7 +2060,7 @@ 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]"
@@ -2002,7 +2074,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
-                                                    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) => {
+                                                    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 = isSubItemActive &&
                                                                                 activeSubPage === subPageIndex;
@@ -3721,5 +3793,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, resolveActiveNav, 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