@eintrek/erp-shell 0.1.58 → 0.1.60

package/dist/index.js

@@ -259,6 +259,87 @@ async function runWithTransientRetry(fn, attempts = 3) {
     throw last;
 }
 
+/**
+ * The organisation this browser tab is working in.
+ *
+ * Every request carries an X-Organization-ID header, and every cached query
+ * belongs to one organisation. Both used to come from the `erp.organizationId`
+ * cookie (then localStorage), which is the organisation the BROWSER last had
+ * active — shared by every tab and, on antniti.com, by every app. A tab
+ * showing /O26000021/… therefore sent whatever another tab, or another app,
+ * had picked last, and the URL lost.
+ *
+ * The tab's own value is set by `useOrganizationIdState` — the state that
+ * AppLayoutShell drives to the organisation the URL names — and read first by
+ * `getRequestOrganizationId()`. Until a tab has one (a cold load before the
+ * provider mounts), localStorage and then the cookie answer as before.
+ *
+ * Module state, so browser-only: on the server one module instance serves
+ * every request, and a value written there would leak between users.
+ */
+const ORGANIZATION_ID_KEY = "erp.organizationId";
+let tabOrganizationId = null;
+const isBrowser$1 = () => typeof window !== "undefined";
+function normalise(id) {
+    if (id === null || id === undefined)
+        return null;
+    const value = String(id).trim();
+    return value === "" ? null : value;
+}
+/** The organisation this tab is working in, or null before it has one. */
+function getTabOrganizationId() {
+    return isBrowser$1() ? tabOrganizationId : null;
+}
+/** Record the organisation this tab is working in (browser only). */
+function setTabOrganizationId(id) {
+    if (!isBrowser$1())
+        return;
+    tabOrganizationId = normalise(id);
+}
+function readOrganizationCookie() {
+    if (!isBrowser$1())
+        return null;
+    const prefix = `${ORGANIZATION_ID_KEY}=`;
+    const entry = document.cookie
+        .split(";")
+        .map(part => part.trim())
+        .find(part => part.startsWith(prefix));
+    if (!entry)
+        return null;
+    const raw = entry.slice(prefix.length);
+    try {
+        return normalise(decodeURIComponent(raw));
+    }
+    catch {
+        return normalise(raw);
+    }
+}
+function readOrganizationStorage() {
+    if (!isBrowser$1())
+        return null;
+    try {
+        return normalise(localStorage.getItem(ORGANIZATION_ID_KEY));
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The organisation a request from this tab belongs to: the tab's own, then
+ * localStorage, then the cookie. Use it for the X-Organization-ID header —
+ * and read it before any `await` in the interceptor, so the header names the
+ * organisation that was active when the request was made.
+ *
+ * localStorage before the cookie: setOrganizationId writes localStorage
+ * synchronously and then awaits a server action for the cookie, so during
+ * that round trip the cookie still names the previous organisation.
+ */
+function getRequestOrganizationId() {
+    return (getTabOrganizationId() ??
+        readOrganizationStorage() ??
+        readOrganizationCookie());
+}
+
 const SELECTED_ORG_STORAGE_KEY = "erp.organizationId";
 const SYSTEM_ROUTE_FIRST_SEGMENTS = [
     "auth",
@@ -276,10 +357,15 @@ const SYSTEM_ROUTE_FIRST_SEGMENTS = [
  *
  * On set, writes through to localStorage + cookie before flipping React state
  * so all readers see a consistent value across navigations.
+ *
+ * The tab's own organisation (organization/active-organization.ts) follows
+ * this state, and it is written synchronously — in the initialiser and at the
+ * start of every set — because requests read it: an effect would run after
+ * the children's effects, which is where their queries start.
  */
 function useOrganizationIdState(initialOrganizationId, actions) {
     const previousOrgIdRef = React.useRef(initialOrganizationId || null);
-    const [organizationIdState, setOrganizationIdState] = React.useState(() => {
+    function readInitialOrganizationId() {
         if (initialOrganizationId) {
             if (typeof window !== "undefined") {
                 setOrganizationId(initialOrganizationId);
@@ -311,8 +397,16 @@ function useOrganizationIdState(initialOrganizationId, actions) {
             console.error("[useOrganizationIdState] Error reading localStorage:", error);
         }
         return null;
+    }
+    const [organizationIdState, setOrganizationIdState] = React.useState(() => {
+        const initial = readInitialOrganizationId();
+        setTabOrganizationId(initial);
+        return initial;
     });
     const setOrganizationId$1 = React.useCallback(async (id) => {
+        // Before the cookie round trip: from here on this tab's requests are
+        // the new organisation's, whatever the shared cookie still says.
+        setTabOrganizationId(id);
         try {
             if (id === null) {
                 setOrganizationId(null);
@@ -335,6 +429,7 @@ function useOrganizationIdState(initialOrganizationId, actions) {
     React.useEffect(() => {
         if (initialOrganizationId &&
             initialOrganizationId !== String(organizationIdState)) {
+            setTabOrganizationId(initialOrganizationId);
             setOrganizationIdState(initialOrganizationId);
             previousOrgIdRef.current = initialOrganizationId;
         }
@@ -606,6 +701,46 @@ const TapMenu = ({ tabDatas, starterTab, currentTabIndex, variant = "main", }) =
                     }) }), tabDatas[currentTab]?.page] }));
 };
 
+/**
+ * How a sidebar row looks, apart from its layout.
+ *
+ * Exactly one row is lit — the page's own (resolveSidebarNav). Until 0.1.60 a
+ * row under the pointer took the lit row's fill and colour, and an open group
+ * (or a one-line row once clicked, which was a collapsible too) took its
+ * colour, so the menu showed several "current pages" at once.
+ */
+/** A row under the pointer: a faint neutral tint, never the lit row's look. */
+const NAV_ROW_HOVER = "hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground";
+/** The lit row: the accent fill and text. The pointer changes nothing. */
+const NAV_ROW_LIT = "bg-sidebar-accent text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+/** Fill and colour for a row, lit or not. */
+function navRowTone(lit) {
+    return lit ? NAV_ROW_LIT : NAV_ROW_HOVER;
+}
+/**
+ * A group opens and shuts; any other row is a plain link with no open state.
+ */
+function isNavGroup(item) {
+    return (item.subModules?.length ?? 0) > 0;
+}
+/**
+ * The open groups after `id` is opened or shut. An id that is not a group's
+ * is ignored — a one-line row has nothing to open.
+ */
+function setNavGroupOpen(openIds, items, id, isOpen) {
+    if (!id || !items.some(item => item.id === id && isNavGroup(item))) {
+        return openIds;
+    }
+    if (openIds.has(id) === isOpen)
+        return openIds;
+    const next = new Set(openIds);
+    if (isOpen)
+        next.add(id);
+    else
+        next.delete(id);
+    return next;
+}
+
 /**
  * Lightweight sidebar primitives — plain styled wrappers, no `useSidebar()`
  * context dependency. The full `@eintrek/erp-theme` sidebar suite ships its
@@ -629,21 +764,25 @@ const SidebarMenuButton = React__namespace.forwardRef(({ className, asChild = fa
         default: "h-8 text-sm",
         lg: "h-12 text-sm",
     };
-    const baseClassName = erpTheme.cn("flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50", sizeClasses[size], isActive &&
-        "bg-sidebar-accent font-medium text-sidebar-accent-foreground", className);
+    const baseClassName = erpTheme.cn("flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50", sizeClasses[size], navRowTone(isActive), isActive && "font-medium", className);
+    let row;
     if (asChild) {
         if (!children || !React__namespace.isValidElement(children)) {
             console.error("SidebarMenuButton: Invalid children for asChild prop", children);
             return null;
         }
-        return React__namespace.cloneElement(children, {
+        row = React__namespace.cloneElement(children, {
             className: erpTheme.cn(baseClassName, children.props
                 ?.className),
-            title: tooltip,
             ...props,
         });
     }
-    return (jsxRuntime.jsx("button", { ref: ref, className: baseClassName, title: tooltip, ...props, children: children }));
+    else {
+        row = (jsxRuntime.jsx("button", { ref: ref, className: baseClassName, ...props, children: children }));
+    }
+    if (!tooltip)
+        return row;
+    return (jsxRuntime.jsxs(erpTheme.Tooltip, { children: [jsxRuntime.jsx(erpTheme.TooltipTrigger, { asChild: true, children: row }), jsxRuntime.jsx(erpTheme.TooltipContent, { side: "right", sideOffset: 10, children: tooltip })] }));
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
 const SidebarMenuSub = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx("ul", { ref: ref, className: erpTheme.cn("mx-3.5 flex min-w-0 bg-sidebar translate-x-px flex-col gap-1 px-2.5 py-0.5", className), ...props })));
@@ -651,7 +790,7 @@ SidebarMenuSub.displayName = "SidebarMenuSub";
 const SidebarMenuSubItem = React__namespace.forwardRef(({ ...props }, ref) => jsxRuntime.jsx("li", { ref: ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 const SidebarMenuSubButton = React__namespace.forwardRef(({ asChild = false, size = "md", isActive, className, children, ...props }, ref) => {
-    const baseClassName = erpTheme.cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50", isActive && "bg-sidebar-accent text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", className);
+    const baseClassName = erpTheme.cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50", navRowTone(!!isActive), size === "sm" && "text-xs", size === "md" && "text-sm", className);
     if (asChild) {
         return React__namespace.cloneElement(children, {
             className: erpTheme.cn(baseClassName, children.props
@@ -966,7 +1105,7 @@ function NavTools({ tools, closeOnNavigation = false }) {
                 // /reports/approval doesn't light up the /reports tool.
                 const isToolActive = pathname === toolUrl;
                 const Icon = tool.icon;
-                return (jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsx(SidebarMenuButton, { asChild: true, isActive: isToolActive, className: "font-thai data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", children: jsxRuntime.jsxs(Link, { href: toolUrl, className: "flex items-center gap-2 w-full", onClick: handleNavLinkClick, children: [jsxRuntime.jsx(Icon, { className: "sidebar-module-icon" }), jsxRuntime.jsx("span", { children: tool.titleTh })] }) }) }, tool.id));
+                return (jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsx(SidebarMenuButton, { asChild: true, isActive: isToolActive, className: "font-thai data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", children: jsxRuntime.jsxs(Link, { href: toolUrl, className: "flex items-center gap-2 w-full", onClick: handleNavLinkClick, "aria-current": isToolActive ? "page" : undefined, children: [jsxRuntime.jsx(Icon, { className: "sidebar-module-icon" }), jsxRuntime.jsx("span", { children: tool.titleTh })] }) }) }, tool.id));
             }) }) }));
 }
 
@@ -1295,16 +1434,6 @@ const runGlobalRequestPrecheck = (config) => {
 const isBrowser = () => typeof window !== "undefined";
 const isAuthEndpoint = (url) => !!url && url.includes("/api/auth/");
 const isAuthPage = () => isBrowser() && window.location.pathname.startsWith("/auth/");
-const getOrgFromCookie = () => {
-    if (!isBrowser())
-        return null;
-    const cookies = document.cookie.split(";").map(cookie => cookie.trim());
-    const orgCookie = cookies.find(cookie => cookie.startsWith("erp.organizationId="));
-    if (!orgCookie)
-        return null;
-    const raw = orgCookie.substring("erp.organizationId=".length);
-    return raw ? decodeURIComponent(raw) : null;
-};
 const redirectToLogout = async () => {
     if (!isBrowser() || isAuthPage())
         return;
@@ -1339,23 +1468,16 @@ instance.interceptors.request.use(async (config) => {
     }
     if (!isBrowser())
         return config;
+    // Read before the token await: the header must name the organisation that
+    // was active when the request was made (and under which its query is
+    // cached), not whatever is active once the token resolves.
+    const organizationId = getRequestOrganizationId();
     const token = await getAccessToken(false);
     if (token) {
         config.headers.Authorization = `Bearer ${token}`;
     }
-    // localStorage first, cookie second.
-    //
-    // Both are written by the same state machine, but not at the same moment:
-    // setOrganizationId writes localStorage synchronously and then awaits a
-    // server action for the cookie. Preferring the cookie meant every request
-    // fired during that round trip carried the previous organisation — while
-    // the query params, built from React state, already carried the new one.
-    //
-    // The backend scopes by this header and ignores organization_id in the
-    // query, so those requests asked for organisation A and were handed B, and
-    // the answer landed in the cache under A's key. No amount of cache clearing
-    // reaches that: the entry is wrong, not stale.
-    const organizationId = getOrganizationId() || getOrgFromCookie();
+    // The tab's own organisation, then localStorage, then the cookie — see
+    // getRequestOrganizationId.
     if (organizationId) {
         config.headers["X-Organization-ID"] = organizationId;
     }
@@ -1435,7 +1557,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.58";
+const SHELL_VERSION = "0.1.60";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1443,6 +1565,8 @@ const HELP_APP_LABEL = {
     peoplx: "Peoplx",
     plannex: "Plannex",
     invenx: "Invenx",
+    sellx: "Sellx",
+    carex: "Carex",
     other: "อื่น ๆ",
 };
 function originOf(value) {
@@ -1477,6 +1601,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";
     }
@@ -1487,6 +1615,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)
@@ -1874,6 +2004,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",
 };
@@ -1958,6 +2092,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: jsxRuntime.jsx(lucideReact.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: jsxRuntime.jsx(lucideReact.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>.
@@ -2014,30 +2162,18 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
     // 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 openId = open ? (items[open.item]?.id ?? "") : "";
+    // holding the current page stayed shut. Only groups have an open state: a
+    // one-line row is a plain link (0.1.60 — it was a collapsible too, and a
+    // click left it "open", drawn in the accent colour for the session).
+    const openItem = open ? items[open.item] : undefined;
+    const openId = openItem && isNavGroup(openItem) ? openItem.id : "";
     const [openIds, setOpenIds] = React__namespace.useState(() => new Set(openId ? [openId] : []));
     React__namespace.useEffect(() => {
         if (!openId)
             return;
-        setOpenIds(prev => {
-            if (prev.has(openId))
-                return prev;
-            const next = new Set(prev);
-            next.add(openId);
-            return next;
-        });
-    }, [openId]);
-    const setItemOpen = (id, isOpen) => setOpenIds(prev => {
-        if (prev.has(id) === isOpen)
-            return prev;
-        const next = new Set(prev);
-        if (isOpen)
-            next.add(id);
-        else
-            next.delete(id);
-        return next;
-    });
+        setOpenIds(prev => setNavGroupOpen(prev, items, openId, true));
+    }, [openId, items]);
+    const setItemOpen = (id, isOpen) => setOpenIds(prev => setNavGroupOpen(prev, items, id, isOpen));
     return (jsxRuntime.jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsxRuntime.jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
                 const groupHeading = workspace &&
                     item.group &&
@@ -2053,9 +2189,15 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     : "";
                 const icon = workspace && IconComp ? (jsxRuntime.jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
                 const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsxRuntime.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 (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.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 ? (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
+                if (!isNavGroup(item)) {
+                    // A one-line row: a link, lit on its own page only. No open
+                    // state, no title tooltip.
+                    return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsx(SidebarMenuButton, { asChild: true, isActive: isItemActive, className: workspaceButton, children: 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", children: item.titleTh }), badge] }) }) })] }, item.id));
+                }
+                // A group: its header opens and shuts it (the chevron says which).
+                // An open group is not the current page — only a row in it is.
+                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuButton, { isActive: isItemActive, className: workspaceButton, children: [icon, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate text-left", children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), item.subModules && (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, subIndex) => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
@@ -2067,20 +2209,24 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
-                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || openSub === subIndex, 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) => {
+                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || openSub === subIndex, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive &&
+                                                                            activeSubPage === null, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", 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 = 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"
-                                                                                        : "text-sidebar-foreground"}`, isActive: false, children: jsxRuntime.jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsxRuntime.jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
+                                                                            return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "font-thai w-full text-sm" +
+                                                                                        (isSubPageActive
+                                                                                            ? " font-medium"
+                                                                                            : ""), isActive: isSubPageActive, children: jsxRuntime.jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubPageActive
+                                                                                            ? "page"
+                                                                                            : undefined, children: [SubPageIcon && (jsxRuntime.jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: subPage.titleTh })] }) }) }, subPage.id));
                                                                         }) }) })] }) }, subItem.id));
                                                 }
                                                 return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
                                                             (workspace && isSubItemActive
                                                                 ? " font-semibold"
-                                                                : ""), isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, 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 }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
+                                                                : ""), isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubItemActive ? "page" : undefined, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
                                                                         ? "99+"
                                                                         : approvalCount }))] }) }) }, subItem.id));
                                             }) }) }))] }) })] }, item.id));
@@ -3048,6 +3194,86 @@ function ThreadBubble({ mine, label, at, body, images, }) {
                 (mine ? "border border-primary/30 bg-primary/5" : "bg-muted"), children: [jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [label, " \u00B7 ", when(at)] }), jsxRuntime.jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm", children: body }), jsxRuntime.jsx(HelpImageStrip, { images: images })] }) }));
 }
 
+/**
+ * Central "no access" screen shared by every policy check (route-level
+ * PermissionProvider and page-level PermissionGateShell). One look everywhere:
+ * an illustration, a 403 headline, the page-specific reason, and recovery
+ * actions.
+ */
+function AccessDenied({ title = "ขออภัย, คุณไม่มีสิทธิ์เข้าถึงหน้านี้ (403)", message = "คุณไม่มีสิทธิ์เข้าถึงหน้านี้ ขออภัยในความไม่สะดวก", homeHref, homeLabel = "กลับไปหน้าหลัก", supportHref, supportLabel = "ติดต่อฝ่ายสนับสนุน", fullScreen = true, className, }) {
+    // "/" is not the home page inside an app — it bounces to organization
+    // selection, so the button read "กลับไปหน้าหลัก" and dropped the user into a
+    // picker for the org they were already in. Send them to that org's home.
+    const params = navigation.useParams();
+    const code = typeof params?.code === "string" ? params.code : "";
+    const homeTarget = homeHref ?? (code ? `/${code}` : "/");
+    const go = (href) => {
+        if (typeof window !== "undefined")
+            window.location.href = href;
+    };
+    const wrapperClass = [
+        "flex min-w-0 flex-1 items-center justify-center p-4",
+        fullScreen ? "min-h-[70vh]" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: wrapperClass, children: jsxRuntime.jsx("div", { className: "relative w-full max-w-3xl overflow-hidden rounded-2xl border border-border/60 bg-card/60 p-8 shadow-sm backdrop-blur sm:p-10", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 text-center sm:flex-row sm:text-left", children: [jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-destructive/20 blur-2xl" }), jsxRuntime.jsx("div", { className: "relative flex h-28 w-28 items-center justify-center rounded-3xl border border-border/60 bg-gradient-to-br from-muted/40 to-background shadow-inner", children: jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full border border-destructive/40 bg-destructive/10", children: jsxRuntime.jsx(lucideReact.Ban, { className: "h-8 w-8 text-destructive", strokeWidth: 2.5 }) }) })] }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground sm:text-2xl", children: title }), message ? (jsxRuntime.jsx("p", { className: "mt-3 whitespace-pre-line text-sm leading-relaxed text-muted-foreground sm:text-base", children: message })) : null, jsxRuntime.jsxs("div", { className: "mt-6 flex flex-col gap-3 sm:flex-row", children: [jsxRuntime.jsxs(erpTheme.Button, { type: "button", onClick: () => go(homeTarget), className: "w-full sm:w-auto", children: [jsxRuntime.jsx(lucideReact.Home, { className: "mr-2 h-4 w-4" }), homeLabel] }), supportHref ? (jsxRuntime.jsxs(erpTheme.Button, { type: "button", variant: "outline", onClick: () => go(supportHref), className: "w-full sm:w-auto", children: [jsxRuntime.jsx(lucideReact.Headset, { className: "mr-2 h-4 w-4" }), supportLabel] })) : null] })] })] }) }) }));
+}
+
+/**
+ * What AppLayoutShell does with the page while the organisation in the URL and
+ * the tab's active organisation are being reconciled. Pure, so it is tested
+ * without React (url-org-gate.test.ts).
+ *
+ * The URL's `[code]` is authoritative. The page — and with it every request
+ * the page makes — mounts only once the active organisation IS the one the
+ * URL names:
+ *
+ *   ready       the active organisation is the URL's: render the page.
+ *   resolving   the caller's organisations are still loading, so the code
+ *               cannot be resolved yet: hold the page.
+ *   switching   the code is one of the caller's organisations but not the
+ *               active one: switch to it (`targetId`), hold the page meanwhile.
+ *   not-member  the list loaded and the code is not in it: refuse.
+ *   unverified  the list could not be loaded: render as before the gate
+ *               existed (the API still scopes every request), rather than
+ *               leave the page on a loader for good.
+ */
+/** The organisation a `[code]` segment names, among the caller's. */
+function findOrganizationForCode(code, organizations) {
+    if (!code)
+        return null;
+    return (organizations.find(org => org.code === code || String(org.id) === code) ??
+        null);
+}
+function resolveUrlOrgGate({ code, organizations, organizationsStatus, organizationId, }) {
+    // No code in the path: the shell sends the user to pick an organisation.
+    if (!code)
+        return { state: "ready", targetId: null };
+    const target = findOrganizationForCode(code, organizations);
+    if (target) {
+        const targetId = String(target.id);
+        const activeId = organizationId === null || organizationId === undefined
+            ? ""
+            : String(organizationId).trim();
+        return activeId === targetId
+            ? { state: "ready", targetId }
+            : { state: "switching", targetId };
+    }
+    const status = organizationsStatus ?? (organizations.length > 0 ? "success" : undefined);
+    switch (status) {
+        case "success":
+            return { state: "not-member" };
+        case "pending":
+            return { state: "resolving" };
+        default:
+            // "error", or a host that does not report the list's status and has
+            // an empty one.
+            return { state: "unverified" };
+    }
+}
+
 /**
  * Top-level app chrome: sticky header, sidebar slot, content gutter and the
  * session/org-context plumbing that both Accounting and HR need. Apps wrap
@@ -3060,7 +3286,7 @@ function ThreadBubble({ mine, label, at, body, images, }) {
  * an erp-shell bump — domain components must NOT add their own root padding
  * or content gets indented twice.
  */
-function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, showHelp = true, helpApp, }) {
+function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, organizationsStatus, notMemberComponent, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, showHelp = true, helpApp, }) {
     const { data: session, status } = react.useSession();
     const { open, setOpen } = useSidebar();
     const router = navigation.useRouter();
@@ -3077,33 +3303,37 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         if (extendedSession?.accessToken)
             hasSeenAccessTokenRef.current = true;
     }, [extendedSession?.accessToken]);
-    // Find the org from the URL `[code]` so we can detect a context mismatch
-    // (the user bookmarked a different org than the cookie remembers).
-    const orgFromCode = React__namespace.useMemo(() => {
-        if (!code || !organizations.length)
-            return null;
-        return (organizations.find(org => org.code === code || String(org.id) === code) ?? null);
-    }, [code, organizations]);
-    // Sync state: when the URL code points at a different org than the cookie,
-    // trust the URL and update the cookie. Otherwise do nothing — the user
-    // wins ties via the in-app org switcher.
+    // The URL's `[code]` is authoritative: the page mounts only once the active
+    // organisation is the one it names (see url-org-gate.ts).
+    //
+    // The gate used to start only when the code had resolved AND an active id
+    // existed, which left two holes. While the organisation list loaded, the
+    // page mounted at once and its first requests carried the previous
+    // organisation — /O26000021/procurement/purchase-requisition/<id> fetched
+    // the document from O26000019 before the switch. And a code naming none of
+    // the user's organisations never resolved, so the page rendered the
+    // previous organisation's data under it.
+    const urlOrgGate = resolveUrlOrgGate({
+        code,
+        organizations,
+        organizationsStatus,
+        organizationId,
+    });
+    const switchTargetId = urlOrgGate.state === "switching" ? urlOrgGate.targetId : null;
+    // Switch the active organisation to the URL's. Once per target: the setter
+    // writes the cookie through a server action, and re-firing it on every
+    // render while that round trip is in flight only queues duplicates.
+    const requestedSwitchRef = React.useRef(null);
     React.useEffect(() => {
-        if (!code)
+        if (!switchTargetId) {
+            requestedSwitchRef.current = null;
             return;
-        if (!organizations.length)
-            return;
-        if (!orgFromCode)
-            return;
-        if (String(organizationId) !== String(orgFromCode.id)) {
-            void setOrganizationId(orgFromCode.id);
         }
-    }, [
-        orgFromCode,
-        organizationId,
-        setOrganizationId,
-        code,
-        organizations.length,
-    ]);
+        if (requestedSwitchRef.current === switchTargetId)
+            return;
+        requestedSwitchRef.current = switchTargetId;
+        void setOrganizationId(switchTargetId);
+    }, [switchTargetId, setOrganizationId]);
     // Key for the content subtree. It exists so switching organizations throws
     // away the previous org's component state — but it must react ONLY to a real
     // switch. organizationId legitimately passes through null while the context
@@ -3125,21 +3355,20 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
     const contentOrgKey = lastOrgKeyRef.current;
     // Hold the page back until the active organisation is the one the URL names.
     //
-    // The sync effect above writes the cookie through a server action, which is
-    // a round trip. Until it lands, getOrgFromCookie() still answers with the
-    // previous organisation and every request the page fires on mount carries
-    // it — so /O26000021/work-record asked about O26000033 and was correctly
-    // told there was nothing there. An empty table is the mild version: the
-    // create form posts to the same header, so a record could be filed against
-    // a company the user was not looking at.
+    // The switch writes the cookie through a server action, which is a round
+    // trip. Until it lands, every request the page fires on mount would carry
+    // the previous organisation — so /O26000021/work-record asked about
+    // O26000033 and was correctly told there was nothing there. An empty table
+    // is the mild version: the create form posts to the same header, so a
+    // record could be filed against a company the user was not looking at.
     //
-    // Only while the two genuinely disagree. A code naming no organisation of
-    // the caller's is left to the app to refuse, and a page with no code in its
-    // path is unaffected.
-    const orgContextIsStale = !!orgFromCode &&
-        organizationId !== null &&
-        organizationId !== undefined &&
-        String(organizationId) !== String(orgFromCode.id);
+    // The whole layout waits, not just the content: the chrome reads the URL
+    // too. The breadcrumb looks up the document in the path to print its
+    // number, so with only the content held it fetched
+    // /purchase-requests/<id> under the previous organisation and printed that
+    // organisation's document number under the new one's URL.
+    const holdLayout = urlOrgGate.state === "resolving" || urlOrgGate.state === "switching";
+    const refusePage = urlOrgGate.state === "not-member";
     // ≤1024px: sidebar renders as a modal overlay (backdrop dims content). >1024px:
     // sidebar is docked and the content gets a left margin to clear it.
     const [isSidebarModalLayout, setIsSidebarModalLayout] = React__namespace.useState(false);
@@ -3188,6 +3417,9 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         router.push(selectOrganizationUrl);
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
     }
+    if (holdLayout) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
+    }
     // When the sidebar is docked-open it consumes 21.5rem on the left; otherwise
     // the content takes the full width and we add a left gutter inside.
     const workspace = chrome === "workspace";
@@ -3198,6 +3430,9 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         : "";
     const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
     const wrap = permissionProvider ?? ((c) => c);
+    // No trail over a refusal: it would look up the path's document under the
+    // active organisation, which is not the URL's.
+    const trail = refusePage ? null : breadcrumb;
     return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxRuntime.jsxs("div", { className: cx("sticky top-0 z-30 shrink-0 w-full", workspaceHeader === "light" &&
                                 "border-b border-border bg-card/85 backdrop-blur-sm"), style: workspaceHeader === "light"
                                 ? WORKSPACE_LIGHT_HEADER_VARS
@@ -3207,9 +3442,11 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
                                         // As in the design: the mark, then a menu button, and the
                                         // organisation on the right — no trail, no title, so the
                                         // organisation's name has the room it needs on a phone.
-                                        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mobileBrand ? (jsxRuntime.jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted)] transition-colors hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted)]", children: jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsxRuntime.jsx("div", { className: "hidden min-w-0 sm:block", children: breadcrumb }), jsxRuntime.jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsxRuntime.jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsxRuntime.jsx(HeaderBackground, {}), jsxRuntime.jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: breadcrumb }), headerEnd || showHelp ? (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsxRuntime.jsx(HelpButton, {}) : null] })) : null] }), jsxRuntime.jsx("div", { id: "header-title" })] })] })), jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "space-y-4 text-center", children: [jsxRuntime.jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsxRuntime.jsx("div", { className: workspace
+                                        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mobileBrand ? (jsxRuntime.jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted)] transition-colors hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted)]", children: jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsxRuntime.jsx("div", { className: "hidden min-w-0 sm:block", children: trail }), jsxRuntime.jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsxRuntime.jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsxRuntime.jsx(HeaderBackground, {}), jsxRuntime.jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: trail }), headerEnd || showHelp ? (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsxRuntime.jsx(HelpButton, {}) : null] })) : null] }), jsxRuntime.jsx("div", { id: "header-title" })] })] })), jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "space-y-4 text-center", children: [jsxRuntime.jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsxRuntime.jsx("div", { className: workspace
                                     ? "relative z-10 px-[18px] pt-[26px] pb-4 sm:px-6 lg:px-10 lg:pt-[38px]"
-                                    : cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: orgContextIsStale ? loadingComponent : wrap(children) }, `org-${contentOrgKey}`) })] }) }), showHelp ? jsxRuntime.jsx(HelpDialogHost, { app: helpApp, orgCode: code }) : null] }));
+                                    : cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: refusePage
+                                    ? (notMemberComponent ?? (jsxRuntime.jsx(AccessDenied, { title: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49", message: `บัญชีนี้ไม่ได้เป็นสมาชิกขององค์กร ${code}`, homeHref: selectOrganizationUrl, homeLabel: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })))
+                                    : wrap(children) }, `org-${contentOrgKey}`) })] }) }), showHelp ? jsxRuntime.jsx(HelpDialogHost, { app: helpApp, orgCode: code }) : null] }));
 }
 /** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
  *  the shell just for the layout file. Falsy values are skipped. */
@@ -3248,33 +3485,6 @@ function SidebarHelpLink({ label, href, icon, className }) {
     return external ? (jsxRuntime.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: cls, children: body })) : (jsxRuntime.jsx(Link, { href: href, className: cls, children: body }));
 }
 
-/**
- * Central "no access" screen shared by every policy check (route-level
- * PermissionProvider and page-level PermissionGateShell). One look everywhere:
- * an illustration, a 403 headline, the page-specific reason, and recovery
- * actions.
- */
-function AccessDenied({ title = "ขออภัย, คุณไม่มีสิทธิ์เข้าถึงหน้านี้ (403)", message = "คุณไม่มีสิทธิ์เข้าถึงหน้านี้ ขออภัยในความไม่สะดวก", homeHref, homeLabel = "กลับไปหน้าหลัก", supportHref, supportLabel = "ติดต่อฝ่ายสนับสนุน", fullScreen = true, className, }) {
-    // "/" is not the home page inside an app — it bounces to organization
-    // selection, so the button read "กลับไปหน้าหลัก" and dropped the user into a
-    // picker for the org they were already in. Send them to that org's home.
-    const params = navigation.useParams();
-    const code = typeof params?.code === "string" ? params.code : "";
-    const homeTarget = homeHref ?? (code ? `/${code}` : "/");
-    const go = (href) => {
-        if (typeof window !== "undefined")
-            window.location.href = href;
-    };
-    const wrapperClass = [
-        "flex min-w-0 flex-1 items-center justify-center p-4",
-        fullScreen ? "min-h-[70vh]" : "",
-        className ?? "",
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (jsxRuntime.jsx("div", { className: wrapperClass, children: jsxRuntime.jsx("div", { className: "relative w-full max-w-3xl overflow-hidden rounded-2xl border border-border/60 bg-card/60 p-8 shadow-sm backdrop-blur sm:p-10", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 text-center sm:flex-row sm:text-left", children: [jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-destructive/20 blur-2xl" }), jsxRuntime.jsx("div", { className: "relative flex h-28 w-28 items-center justify-center rounded-3xl border border-border/60 bg-gradient-to-br from-muted/40 to-background shadow-inner", children: jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full border border-destructive/40 bg-destructive/10", children: jsxRuntime.jsx(lucideReact.Ban, { className: "h-8 w-8 text-destructive", strokeWidth: 2.5 }) }) })] }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground sm:text-2xl", children: title }), message ? (jsxRuntime.jsx("p", { className: "mt-3 whitespace-pre-line text-sm leading-relaxed text-muted-foreground sm:text-base", children: message })) : null, jsxRuntime.jsxs("div", { className: "mt-6 flex flex-col gap-3 sm:flex-row", children: [jsxRuntime.jsxs(erpTheme.Button, { type: "button", onClick: () => go(homeTarget), className: "w-full sm:w-auto", children: [jsxRuntime.jsx(lucideReact.Home, { className: "mr-2 h-4 w-4" }), homeLabel] }), supportHref ? (jsxRuntime.jsxs(erpTheme.Button, { type: "button", variant: "outline", onClick: () => go(supportHref), className: "w-full sm:w-auto", children: [jsxRuntime.jsx(lucideReact.Headset, { className: "mr-2 h-4 w-4" }), supportLabel] })) : null] })] })] }) }) }));
-}
-
 const EMPLOYEE_RECORD_REQUIRED = "EMPLOYEE_RECORD_REQUIRED";
 const EMPLOYEE_RECORD_REQUIRED_EVENT = "erp:employee-record-required";
 const EMPLOYEE_RECORD_OK_EVENT = "erp:employee-record-ok";
@@ -3667,6 +3877,51 @@ function useFeatureFlag(flag) {
     return flags[flag];
 }
 
+// No relative imports: node --test loads this file as is (query-scope.test.ts).
+/**
+ * Every query is cached per organisation.
+ *
+ * Requests are scoped by the X-Organization-ID header, so almost no query key
+ * names the organisation — ["purchase-requests", "detail", id] is the same key
+ * in every company. A key that is the same in two organisations is one cache
+ * entry: what was fetched in one was a fresh cache hit in the other, and a
+ * page opened under another organisation's URL rendered the first one's
+ * document until something refetched it.
+ *
+ * The hash — the identity of a cache entry — therefore carries the
+ * organisation requests are sent with right now (getQueryClientConfig passes
+ * getRequestOrganizationId()). The key itself is untouched,
+ * so partial-key invalidation and every existing key keep working; a switch
+ * simply lands on a different set of entries.
+ */
+function organizationScopedQueryHash(queryKey, organizationId) {
+    return `${reactQuery.hashKey(queryKey)}@org:${organizationId ?? ""}`;
+}
+function errorStatus(error) {
+    if (!error || typeof error !== "object")
+        return undefined;
+    const e = error;
+    const status = typeof e.status === "number" ? e.status : e.response?.status;
+    return typeof status === "number" ? status : undefined;
+}
+/**
+ * Retry a failed query at most twice — unless the API answered with a 4xx.
+ * A 404 for a document that is not in this organisation will not appear on a
+ * second ask; retrying held the page on its skeleton for three seconds before
+ * it could say "not found". 408 and 429 are transient and still retried.
+ */
+function shouldRetryQuery(failureCount, error) {
+    const status = errorStatus(error);
+    if (status !== undefined &&
+        status >= 400 &&
+        status < 500 &&
+        status !== 408 &&
+        status !== 429) {
+        return false;
+    }
+    return failureCount < 2;
+}
+
 const getAxiosErrorMessage$1 = (error) => {
     if (error.response?.data?.message) {
         return error.response.data.message;
@@ -3690,7 +3945,9 @@ const formatError = (handlerName, error) => {
 };
 /**
  * Default React Query config used across ERP apps:
- *   - 2 retries on queries / 1 on mutations, exponential backoff
+ *   - cache entries scoped by organisation (organizationScopedQueryHash)
+ *   - 2 retries on queries except 4xx answers / none on mutations,
+ *     exponential backoff
  *   - 5 min staleTime, refetchOnWindowFocus
  *   - swallows "no org context" errors to silence noise on the
  *     select-organization page
@@ -3701,7 +3958,8 @@ const formatError = (handlerName, error) => {
 const getQueryClientConfig = () => ({
     defaultOptions: {
         queries: {
-            retry: 2,
+            queryKeyHashFn: queryKey => organizationScopedQueryHash(queryKey, getRequestOrganizationId()),
+            retry: shouldRetryQuery,
             retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
             staleTime: 5 * 60 * 1000,
             refetchOnWindowFocus: true,
@@ -3841,27 +4099,34 @@ exports.describeBrowser = describeBrowser;
 exports.detectHelpApp = detectHelpApp;
 exports.filterNavigationModulesByPermission = filterNavigationModulesByPermission;
 exports.filterNavigationToolsByPermission = filterNavigationToolsByPermission;
+exports.findOrganizationForCode = findOrganizationForCode;
 exports.getAccessToken = getAccessToken;
 exports.getActiveModule = getActiveModule;
 exports.getActiveSubModule = getActiveSubModule;
 exports.getAxiosErrorMessage = getAxiosErrorMessage;
 exports.getOrganizationId = getOrganizationId;
 exports.getQueryClientConfig = getQueryClientConfig;
+exports.getRequestOrganizationId = getRequestOrganizationId;
 exports.getRequiredChildGroups = getRequiredChildGroups;
+exports.getTabOrganizationId = getTabOrganizationId;
 exports.hasPlanFeature = hasPlanFeature;
 exports.isLikelyTransientNetworkError = isLikelyTransientNetworkError;
 exports.isPathActive = isPathActive;
 exports.myRolesQueryKey = myRolesQueryKey;
 exports.normalizePathnameForPermissionRules = normalizePathnameForPermissionRules;
 exports.openHelp = openHelp;
+exports.organizationScopedQueryHash = organizationScopedQueryHash;
 exports.parseMyRoles = parseMyRoles;
 exports.resolveActiveNav = resolveActiveNav;
 exports.resolveSidebarNav = resolveSidebarNav;
 exports.resolveUiRoutePermission = resolveUiRoutePermission;
+exports.resolveUrlOrgGate = resolveUrlOrgGate;
 exports.roleSummary = roleSummary;
 exports.runGlobalRequestPrecheck = runGlobalRequestPrecheck;
 exports.runWithTransientRetry = runWithTransientRetry;
 exports.setOrganizationId = setOrganizationId;
+exports.setTabOrganizationId = setTabOrganizationId;
+exports.shouldRetryQuery = shouldRetryQuery;
 exports.toApiError = toApiError;
 exports.unwrapApiResponse = unwrapApiResponse;
 exports.updateOrganizationId = updateOrganizationId;