@eintrek/erp-shell 0.1.59 → 0.1.61

package/dist/index.esm.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useSyncExternalStore, useTransition, Suspense } from 'react';
 import { useSession, signOut } from 'next-auth/react';
-import { useQueryClient, useQuery, QueryClientContext, QueryClient, MutationCache, QueryCache, QueryClientProvider } from '@tanstack/react-query';
+import { useQueryClient, useQuery, QueryClientContext, QueryClient, hashKey, 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, Store, Headset, ChevronDown, Plus, ChevronsUpDown, ImagePlus, X, CircleCheck, ArrowLeft, ArrowRight, Compass, ArrowUpRight, Ban, Home, ContactRound, UserPlus } from 'lucide-react';
+import { cn, Button, Tooltip, TooltipTrigger, TooltipContent, 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, Store, Headset, ChevronDown, Plus, ChevronsUpDown, ImagePlus, X, CircleCheck, ArrowLeft, Ban, Home, ArrowRight, Compass, ArrowUpRight, ContactRound, UserPlus } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
@@ -240,6 +240,221 @@ 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 organisations the signed-in user belongs to, once their list has
+ * loaded (AppLayoutShell reports it); null until then.
+ */
+let knownOrganizationIds = null;
+/**
+ * Record the user's organisations (browser only). From then on a stored or
+ * tab organisation that is not among them loses to one that is: a browser
+ * that still remembers a deleted organisation — or one the user has left —
+ * must not keep sending it while the cookie names a good one.
+ */
+function setKnownOrganizationIds(ids) {
+    if (!isBrowser$1())
+        return;
+    if (ids === null) {
+        knownOrganizationIds = null;
+        return;
+    }
+    const set = new Set();
+    for (const id of ids) {
+        const value = normalise(id);
+        if (value)
+            set.add(value);
+    }
+    knownOrganizationIds = set;
+}
+/** Whether the loaded list says the user is NOT a member of `id`. */
+function isKnownStaleOrganizationId(id) {
+    const value = normalise(id);
+    return (value !== null &&
+        knownOrganizationIds !== null &&
+        !knownOrganizationIds.has(value));
+}
+/**
+ * Marks a request that must not carry X-Organization-ID: the user's own list
+ * of organisations is how a stale organisation id is found out, so it cannot
+ * depend on one. An app's interceptor honours it by passing the request's
+ * config to getRequestOrganizationId(config).
+ *
+ *   axiosInstance.get("/organizations", withoutOrganization({ params }))
+ */
+const WITHOUT_ORGANIZATION_FLAG = "erpWithoutOrganization";
+function withoutOrganization(config) {
+    return { ...(config ?? {}), [WITHOUT_ORGANIZATION_FLAG]: true };
+}
+/**
+ * Marks a request for one particular organisation, whatever this tab has
+ * active. Used to retry the organisation list under each stored id when an
+ * API refuses it without one (see http/organization-fallback.ts).
+ */
+const FOR_ORGANIZATION_FIELD = "erpOrganizationId";
+function isWithoutOrganization(config) {
+    return (!!config &&
+        typeof config === "object" &&
+        config[WITHOUT_ORGANIZATION_FLAG] === true);
+}
+function explicitOrganization(config) {
+    if (!config || typeof config !== "object")
+        return null;
+    const value = config[FOR_ORGANIZATION_FIELD];
+    return typeof value === "string" || typeof value === "number"
+        ? normalise(value)
+        : null;
+}
+/**
+ * Every organisation id this browser has stored for the tab — the tab's
+ * own, localStorage, the cookie — distinct, in that order.
+ */
+function getStoredOrganizationIds() {
+    const ids = [
+        getTabOrganizationId(),
+        readOrganizationStorage(),
+        readOrganizationCookie(),
+    ].filter((id) => id !== null);
+    return [...new Set(ids)];
+}
+/**
+ * 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.
+ *
+ * Pass the request's config: a request marked withoutOrganization() gets
+ * null, so no header.
+ *
+ * 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.
+ *
+ * Once the user's organisations are known (setKnownOrganizationIds), the
+ * first of those that is one of them wins: 0.1.60 let a deleted
+ * organisation's id left in localStorage beat a valid cookie, and every
+ * request — the organisation list included — was refused. If none is a
+ * member the first is still sent, as before: the list may simply be behind
+ * (an organisation created a moment ago).
+ */
+function getRequestOrganizationId(config) {
+    const explicit = explicitOrganization(config);
+    if (explicit)
+        return explicit;
+    if (isWithoutOrganization(config))
+        return null;
+    const candidates = [
+        getTabOrganizationId(),
+        readOrganizationStorage(),
+        readOrganizationCookie(),
+    ];
+    if (knownOrganizationIds !== null) {
+        const member = candidates.find(id => id !== null && knownOrganizationIds.has(id));
+        if (member)
+            return member;
+    }
+    return candidates.find(id => id !== null) ?? null;
+}
+function expireOrganizationCookie() {
+    // The cookie is set by the host's server action, host-only or on a parent
+    // domain (AUTH_COOKIE_DOMAIN, e.g. .antniti.com). The browser does not say
+    // which, so expire it on the host and on every parent domain.
+    const base = `${ORGANIZATION_ID_KEY}=; Max-Age=0; path=/; SameSite=Lax`;
+    try {
+        document.cookie = base;
+        const labels = window.location.hostname.split(".");
+        for (let i = 0; i < labels.length - 1; i++) {
+            document.cookie = `${base}; domain=.${labels.slice(i).join(".")}`;
+        }
+    }
+    catch {
+        // Cookies unavailable: nothing to clear.
+    }
+}
+/**
+ * Forget the active organisation everywhere this browser keeps it: the tab,
+ * localStorage and the `erp.organizationId` cookie. Call on sign-out, so the
+ * next person to sign in on this browser does not start in the previous
+ * person's organisation.
+ */
+function clearStoredOrganization() {
+    if (!isBrowser$1())
+        return;
+    tabOrganizationId = null;
+    knownOrganizationIds = null;
+    try {
+        localStorage.removeItem(ORGANIZATION_ID_KEY);
+    }
+    catch {
+        // Storage unavailable: nothing to clear.
+    }
+    expireOrganizationCookie();
+}
+
 const SELECTED_ORG_STORAGE_KEY = "erp.organizationId";
 const SYSTEM_ROUTE_FIRST_SEGMENTS = [
     "auth",
@@ -257,10 +472,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 = useRef(initialOrganizationId || null);
-    const [organizationIdState, setOrganizationIdState] = useState(() => {
+    function readInitialOrganizationId() {
         if (initialOrganizationId) {
             if (typeof window !== "undefined") {
                 setOrganizationId(initialOrganizationId);
@@ -292,8 +512,16 @@ function useOrganizationIdState(initialOrganizationId, actions) {
             console.error("[useOrganizationIdState] Error reading localStorage:", error);
         }
         return null;
+    }
+    const [organizationIdState, setOrganizationIdState] = useState(() => {
+        const initial = readInitialOrganizationId();
+        setTabOrganizationId(initial);
+        return initial;
     });
     const setOrganizationId$1 = 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);
@@ -316,6 +544,7 @@ function useOrganizationIdState(initialOrganizationId, actions) {
     useEffect(() => {
         if (initialOrganizationId &&
             initialOrganizationId !== String(organizationIdState)) {
+            setTabOrganizationId(initialOrganizationId);
             setOrganizationIdState(initialOrganizationId);
             previousOrgIdRef.current = initialOrganizationId;
         }
@@ -587,6 +816,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
@@ -610,21 +879,25 @@ const SidebarMenuButton = React.forwardRef(({ className, asChild = false, isActi
         default: "h-8 text-sm",
         lg: "h-12 text-sm",
     };
-    const baseClassName = 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 = 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.isValidElement(children)) {
             console.error("SidebarMenuButton: Invalid children for asChild prop", children);
             return null;
         }
-        return React.cloneElement(children, {
+        row = React.cloneElement(children, {
             className: cn(baseClassName, children.props
                 ?.className),
-            title: tooltip,
             ...props,
         });
     }
-    return (jsx("button", { ref: ref, className: baseClassName, title: tooltip, ...props, children: children }));
+    else {
+        row = (jsx("button", { ref: ref, className: baseClassName, ...props, children: children }));
+    }
+    if (!tooltip)
+        return row;
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: row }), jsx(TooltipContent, { side: "right", sideOffset: 10, children: tooltip })] }));
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
 const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (jsx("ul", { ref: ref, className: 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 })));
@@ -632,7 +905,7 @@ SidebarMenuSub.displayName = "SidebarMenuSub";
 const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => jsx("li", { ref: ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", isActive, className, children, ...props }, ref) => {
-    const baseClassName = 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 = 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.cloneElement(children, {
             className: cn(baseClassName, children.props
@@ -947,7 +1220,7 @@ function NavTools({ tools, closeOnNavigation = false }) {
                 // /reports/approval doesn't light up the /reports tool.
                 const isToolActive = pathname === toolUrl;
                 const Icon = tool.icon;
-                return (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isToolActive, className: "font-thai data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", children: jsxs(Link, { href: toolUrl, className: "flex items-center gap-2 w-full", onClick: handleNavLinkClick, children: [jsx(Icon, { className: "sidebar-module-icon" }), jsx("span", { children: tool.titleTh })] }) }) }, tool.id));
+                return (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isToolActive, className: "font-thai data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", children: jsxs(Link, { href: toolUrl, className: "flex items-center gap-2 w-full", onClick: handleNavLinkClick, "aria-current": isToolActive ? "page" : undefined, children: [jsx(Icon, { className: "sidebar-module-icon" }), jsx("span", { children: tool.titleTh })] }) }) }, tool.id));
             }) }) }));
 }
 
@@ -1273,25 +1546,53 @@ const runGlobalRequestPrecheck = (config) => {
     return validateGoodsReceiptChecks(config.data);
 };
 
+/**
+ * The organisation list is asked for without an organisation (see
+ * withoutOrganization), but some APIs still refuse it without one: Peoplx's
+ * GET /organizations sits behind its module.hr plan gate, which answers 400
+ * "organization context required" to no header and 403 to an organisation
+ * that does not exist. Until those routes stop needing one, a refused list is
+ * asked again under each organisation this browser has stored — the tab's,
+ * localStorage's, the cookie's — so one good id among stale ones still gets
+ * the user their list, and with it the way back to a working organisation.
+ *
+ * `send` re-sends the request (an axios instance call). Returns the first
+ * answer that succeeds, or undefined when none did or the request is not a
+ * refused organisation-less one. Each retry is marked, so it never retries
+ * itself.
+ */
+const RETRIED = "_erpOrganizationFallback";
+async function retryWithStoredOrganizations(config, status, send) {
+    if (!config ||
+        config[WITHOUT_ORGANIZATION_FLAG] !== true ||
+        config[RETRIED] === true ||
+        (status !== 400 && status !== 403)) {
+        return undefined;
+    }
+    for (const id of getStoredOrganizationIds()) {
+        try {
+            return await send({
+                ...config,
+                [RETRIED]: true,
+                [FOR_ORGANIZATION_FIELD]: id,
+            });
+        }
+        catch {
+            // That one was refused too; try the next.
+        }
+    }
+    return undefined;
+}
+
 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;
     localStorage.clear();
     sessionStorage.clear();
-    setOrganizationId(null);
+    clearStoredOrganization();
     clearAccessTokenCache();
     await signOut({ callbackUrl: "/auth/signin" });
 };
@@ -1320,23 +1621,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(config);
     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;
     }
@@ -1390,6 +1684,9 @@ instance.interceptors.response.use(response => {
             window.dispatchEvent(new CustomEvent("erp:employee-record-required"));
         }
     }
+    const listed = await retryWithStoredOrganizations(originalRequest, error.response?.status, config => instance(config));
+    if (listed !== undefined)
+        return listed;
     return Promise.reject(toApiError(error));
 });
 
@@ -1416,7 +1713,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.59";
+const SHELL_VERSION = "0.1.61";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1739,6 +2036,9 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
     };
     const handleSignOut = async () => {
         setIsSigningOut(true);
+        // The next person to sign in on this browser must not start in this
+        // person's organisation: forget it in the tab, localStorage and cookie.
+        clearStoredOrganization();
         try {
             await signOut({ callbackUrl: signInRedirectHref, redirect: true });
         }
@@ -2021,30 +2321,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.useState(() => new Set(openId ? [openId] : []));
     React.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 (jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
                 const groupHeading = workspace &&
                     item.group &&
@@ -2060,9 +2348,15 @@ 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: 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
+                if (!isNavGroup(item)) {
+                    // A one-line row: a link, lit on its own page only. No open
+                    // state, no title tooltip.
+                    return (jsxs(React.Fragment, { children: [groupHeading, jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isItemActive, className: workspaceButton, children: 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", 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 (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: jsxs(SidebarMenuButton, { isActive: isItemActive, className: workspaceButton, children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate text-left", children: item.titleTh }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), item.subModules && (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, subIndex) => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
@@ -2074,20 +2368,24 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
-                                                    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) => {
+                                                    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 &&
+                                                                            activeSubPage === null, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", 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;
                                                                             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"
-                                                                                        : "text-sidebar-foreground"}`, isActive: false, children: jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
+                                                                            return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "font-thai w-full text-sm" +
+                                                                                        (isSubPageActive
+                                                                                            ? " font-medium"
+                                                                                            : ""), isActive: isSubPageActive, children: jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubPageActive
+                                                                                            ? "page"
+                                                                                            : undefined, children: [SubPageIcon && (jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subPage.titleTh })] }) }) }, subPage.id));
                                                                         }) }) })] }) }, subItem.id));
                                                 }
                                                 return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
                                                             (workspace && isSubItemActive
                                                                 ? " font-semibold"
-                                                                : ""), isActive: isSubItemActive, children: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsx(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: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubItemActive ? "page" : undefined, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), approvalCount > 0 && (jsx(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));
@@ -3055,6 +3353,111 @@ function ThreadBubble({ mine, label, at, body, images, }) {
                 (mine ? "border border-primary/30 bg-primary/5" : "bg-muted"), children: [jsxs("p", { className: "text-xs text-muted-foreground", children: [label, " \u00B7 ", when(at)] }), jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm", children: body }), 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 = 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 (jsx("div", { className: wrapperClass, children: 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: jsxs("div", { className: "flex flex-col items-center gap-8 text-center sm:flex-row sm:text-left", children: [jsxs("div", { className: "relative shrink-0", children: [jsx("div", { className: "absolute inset-0 rounded-full bg-destructive/20 blur-2xl" }), 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: jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full border border-destructive/40 bg-destructive/10", children: jsx(Ban, { className: "h-8 w-8 text-destructive", strokeWidth: 2.5 }) }) })] }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("h1", { className: "text-xl font-bold text-foreground sm:text-2xl", children: title }), message ? (jsx("p", { className: "mt-3 whitespace-pre-line text-sm leading-relaxed text-muted-foreground sm:text-base", children: message })) : null, jsxs("div", { className: "mt-6 flex flex-col gap-3 sm:flex-row", children: [jsxs(Button, { type: "button", onClick: () => go(homeTarget), className: "w-full sm:w-auto", children: [jsx(Home, { className: "mr-2 h-4 w-4" }), homeLabel] }), supportHref ? (jsxs(Button, { type: "button", variant: "outline", onClick: () => go(supportHref), className: "w-full sm:w-auto", children: [jsx(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" };
+    }
+}
+function resolveStaleOrganization({ code, organizations, organizationsStatus, organizationId, }) {
+    const status = organizationsStatus ?? (organizations.length > 0 ? "success" : undefined);
+    if (status !== "success")
+        return { action: "none" };
+    const activeId = organizationId === null || organizationId === undefined
+        ? ""
+        : String(organizationId).trim();
+    if (activeId === "")
+        return { action: "none" };
+    if (organizations.some(org => String(org.id) === activeId)) {
+        return { action: "none" };
+    }
+    const urlOrg = findOrganizationForCode(code, organizations);
+    if (urlOrg) {
+        return { action: "use", targetId: String(urlOrg.id), fromUrl: true };
+    }
+    if (organizations.length === 1) {
+        return {
+            action: "use",
+            targetId: String(organizations[0].id),
+            fromUrl: false,
+        };
+    }
+    return { action: "forget" };
+}
+
 /**
  * Top-level app chrome: sticky header, sidebar slot, content gutter and the
  * session/org-context plumbing that both Accounting and HR need. Apps wrap
@@ -3067,7 +3470,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 } = useSession();
     const { open, setOpen } = useSidebar();
     const router = useRouter();
@@ -3084,33 +3487,75 @@ 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.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 = useRef(null);
     useEffect(() => {
-        if (!code)
-            return;
-        if (!organizations.length)
+        if (!switchTargetId) {
+            requestedSwitchRef.current = null;
             return;
-        if (!orgFromCode)
+        }
+        if (requestedSwitchRef.current === switchTargetId)
             return;
-        if (String(organizationId) !== String(orgFromCode.id)) {
-            void setOrganizationId(orgFromCode.id);
+        requestedSwitchRef.current = switchTargetId;
+        void setOrganizationId(switchTargetId);
+    }, [switchTargetId, setOrganizationId]);
+    // Once the user's organisations are known, requests prefer a stored
+    // organisation that is one of them (getRequestOrganizationId).
+    const organizationsLoaded = (organizationsStatus ??
+        (organizations.length > 0 ? "success" : undefined)) === "success";
+    useEffect(() => {
+        if (organizationsLoaded) {
+            setKnownOrganizationIds(organizations.map(org => org.id));
         }
-    }, [
-        orgFromCode,
-        organizationId,
-        setOrganizationId,
+    }, [organizationsLoaded, organizations]);
+    // An active organisation that is not one of the user's — deleted, or left —
+    // is replaced, so it stops being sent with every request. The URL's
+    // organisation, when the user is a member, is the gate's switch above;
+    // otherwise the user's only organisation, or none (they pick one: the
+    // refusal below offers it, and a path without a code goes to the picker).
+    // Once per stale id and target, so a setter that does not take cannot loop.
+    const staleRecovery = resolveStaleOrganization({
         code,
-        organizations.length,
-    ]);
+        organizations,
+        organizationsStatus,
+        organizationId,
+    });
+    const staleRecoveryTarget = staleRecovery.action === "forget"
+        ? null
+        : staleRecovery.action === "use" && !staleRecovery.fromUrl
+            ? staleRecovery.targetId
+            : undefined;
+    const staleRecoveryKey = staleRecoveryTarget === undefined
+        ? null
+        : `${String(organizationId)}>${staleRecoveryTarget ?? ""}`;
+    const handledStaleRecoveryRef = useRef(null);
+    useEffect(() => {
+        if (staleRecoveryKey === null || staleRecoveryTarget === undefined)
+            return;
+        if (handledStaleRecoveryRef.current === staleRecoveryKey)
+            return;
+        handledStaleRecoveryRef.current = staleRecoveryKey;
+        void setOrganizationId(staleRecoveryTarget);
+    }, [staleRecoveryKey, staleRecoveryTarget, 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
@@ -3132,21 +3577,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.useState(false);
@@ -3195,6 +3639,9 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         router.push(selectOrganizationUrl);
         return jsx(Fragment$1, { children: loadingComponent });
     }
+    if (holdLayout) {
+        return jsx(Fragment$1, { 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";
@@ -3205,6 +3652,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 (jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (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) })), jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (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
@@ -3214,9 +3664,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.
-                                        jsxs(Fragment$1, { children: [mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, 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: jsx(LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: breadcrumb }), jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: breadcrumb }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsx("div", { className: workspace
+                                        jsxs(Fragment$1, { children: [mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, 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: jsx(LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: trail }), jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: trail }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: 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 ? jsx(HelpDialogHost, { app: helpApp, orgCode: code }) : null] }));
+                                    : cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: refusePage
+                                    ? (notMemberComponent ?? (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 ? 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. */
@@ -3255,33 +3707,6 @@ function SidebarHelpLink({ label, href, icon, className }) {
     return external ? (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: cls, children: body })) : (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 = 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 (jsx("div", { className: wrapperClass, children: 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: jsxs("div", { className: "flex flex-col items-center gap-8 text-center sm:flex-row sm:text-left", children: [jsxs("div", { className: "relative shrink-0", children: [jsx("div", { className: "absolute inset-0 rounded-full bg-destructive/20 blur-2xl" }), 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: jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full border border-destructive/40 bg-destructive/10", children: jsx(Ban, { className: "h-8 w-8 text-destructive", strokeWidth: 2.5 }) }) })] }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("h1", { className: "text-xl font-bold text-foreground sm:text-2xl", children: title }), message ? (jsx("p", { className: "mt-3 whitespace-pre-line text-sm leading-relaxed text-muted-foreground sm:text-base", children: message })) : null, jsxs("div", { className: "mt-6 flex flex-col gap-3 sm:flex-row", children: [jsxs(Button, { type: "button", onClick: () => go(homeTarget), className: "w-full sm:w-auto", children: [jsx(Home, { className: "mr-2 h-4 w-4" }), homeLabel] }), supportHref ? (jsxs(Button, { type: "button", variant: "outline", onClick: () => go(supportHref), className: "w-full sm:w-auto", children: [jsx(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";
@@ -3674,6 +4099,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 `${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;
@@ -3697,7 +4167,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
@@ -3708,7 +4180,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,
@@ -3793,5 +4266,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, resolveSidebarNav, 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, FOR_ORGANIZATION_FIELD, 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, WITHOUT_ORGANIZATION_FLAG, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, clearStoredOrganization, closeHelp, decodeJWT, describeAttached, describeBrowser, detectHelpApp, filterNavigationModulesByPermission, filterNavigationToolsByPermission, findOrganizationForCode, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequestOrganizationId, getRequiredChildGroups, getStoredOrganizationIds, getTabOrganizationId, hasPlanFeature, isKnownStaleOrganizationId, isLikelyTransientNetworkError, isPathActive, myRolesQueryKey, normalizePathnameForPermissionRules, openHelp, organizationScopedQueryHash, parseMyRoles, resolveActiveNav, resolveSidebarNav, resolveStaleOrganization, resolveUiRoutePermission, resolveUrlOrgGate, retryWithStoredOrganizations, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setKnownOrganizationIds, setOrganizationId, setTabOrganizationId, shouldRetryQuery, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle, withoutOrganization };
 //# sourceMappingURL=index.esm.js.map