@eintrek/erp-shell 0.1.50 → 0.1.52

package/dist/index.esm.js

@@ -1,20 +1,20 @@
 'use client';
 import * as React from 'react';
-import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useTransition, Suspense } 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, MutationCache, QueryCache, QueryClient, 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, Card, CardHeader, CardContent } from '@eintrek/erp-theme';
-import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, LayoutGrid, ExternalLink, Loader2, LogOut, ChevronsUpDown, Calculator, Warehouse, FolderKanban, Users, ChevronDown, Plus, ArrowRight, Compass, ArrowUpRight, Ban, Home, Headset, ContactRound, UserPlus } from 'lucide-react';
+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, ChevronsUpDown, Calculator, Warehouse, FolderKanban, Users, ChevronDown, Plus, CircleCheck, ArrowLeft, ArrowRight, Compass, ArrowUpRight, Ban, Home, Headset, ContactRound, UserPlus } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
 import Link from 'next/link';
 import { createPortal } from 'react-dom';
 import { useTheme, ThemeProvider as ThemeProvider$1 } from 'next-themes';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import axios, { isAxiosError, AxiosHeaders } from 'axios';
 export { isAxiosError } from 'axios';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 /**
  * Interval (ms) between session updates to trigger JWT callback and refresh
@@ -803,6 +803,64 @@ function isRecordID(segment) {
         /^[0-9a-f]{24,}$/i.test(segment));
 }
 
+let open = false;
+let hosts = 0;
+let declaredApp = null;
+const listeners = new Set();
+function emit() {
+    listeners.forEach(l => l());
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => {
+        listeners.delete(l);
+    };
+}
+/** Opens the dialog — a no-op when no layout has mounted one. */
+function openHelp() {
+    if (!open) {
+        open = true;
+        emit();
+    }
+}
+function closeHelp() {
+    if (open) {
+        open = false;
+        emit();
+    }
+}
+/** Called by the dialog host on mount; returns its unmount. */
+function registerHelpHost() {
+    hosts += 1;
+    emit();
+    return () => {
+        hosts -= 1;
+        if (hosts <= 0) {
+            hosts = 0;
+            open = false;
+        }
+        emit();
+    };
+}
+function useHelpOpen() {
+    return useSyncExternalStore(subscribe, () => open, () => false);
+}
+/** True while a dialog host is mounted, i.e. the ช่วยเหลือ entry works. */
+function useHelpAvailable() {
+    return useSyncExternalStore(subscribe, () => hosts > 0, () => false);
+}
+/**
+ * Every app names itself when it builds its app-switcher links
+ * (buildSystemLinks({ activeApp })); the dialog reads that to say which app
+ * a message came from without each app passing it again.
+ */
+function declareHelpApp(app) {
+    declaredApp = app;
+}
+function declaredHelpApp() {
+    return declaredApp;
+}
+
 function isExternalHref(href) {
     return /^https?:\/\//i.test(href) || href.startsWith("//");
 }
@@ -817,6 +875,8 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
     const [showAppsMenu, setShowAppsMenu] = useState(false);
     const buttonRef = useRef(null);
     const [position, setPosition] = useState({ top: 0, left: 0 });
+    // Shown where a layout has mounted the help dialog (AppLayoutShell).
+    const helpAvailable = useHelpAvailable();
     const user = session?.user
         ? {
             name: session.user.name || "ผู้ใช้",
@@ -928,7 +988,10 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
                                     setShowAppsMenu(!showAppsMenu);
                                     setShowThemeMenu(false);
                                     setShowLanguageMenu(false);
-                                }, className: "flex w-full items-center gap-3 px-3 py-2.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors", children: [jsx(LayoutGrid, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: "\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19" }), jsx(ChevronUp, { className: `h-4 w-4 transition-transform ${showAppsMenu ? "rotate-180" : ""}` })] }), showAppsMenu && (jsx("div", { className: "mt-1 ml-4 space-y-1", children: visibleSystemLinks.map(link => (jsxs("button", { type: "button", onClick: () => handleSystemLink(link.href), className: "flex w-full items-center gap-3 px-3 py-2 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors", children: [link.icon ?? jsx(ExternalLink, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: link.label }), link.active && (jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, `${link.label}:${link.href}`))) }))] })), jsx("button", { onClick: handleSignOut, disabled: isSigningOut, className: "flex w-full items-center gap-3 px-3 py-2.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed mt-1", children: isSigningOut ? (jsxs(Fragment$1, { children: [jsx(Loader2, { className: "h-4 w-4 animate-spin" }), jsx("span", { className: "flex-1 text-left", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A..." })] })) : (jsxs(Fragment$1, { children: [jsx(LogOut, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })] })) })] })] })) : null;
+                                }, className: "flex w-full items-center gap-3 px-3 py-2.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors", children: [jsx(LayoutGrid, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: "\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19" }), jsx(ChevronUp, { className: `h-4 w-4 transition-transform ${showAppsMenu ? "rotate-180" : ""}` })] }), showAppsMenu && (jsx("div", { className: "mt-1 ml-4 space-y-1", children: visibleSystemLinks.map(link => (jsxs("button", { type: "button", onClick: () => handleSystemLink(link.href), className: "flex w-full items-center gap-3 px-3 py-2 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors", children: [link.icon ?? jsx(ExternalLink, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: link.label }), link.active && (jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, `${link.label}:${link.href}`))) }))] })), helpAvailable && (jsxs("button", { type: "button", onClick: () => {
+                            setIsOpen(false);
+                            openHelp();
+                        }, className: "flex w-full items-center gap-3 px-3 py-2.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors", children: [jsx(CircleHelp, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" })] })), jsx("button", { onClick: handleSignOut, disabled: isSigningOut, className: "flex w-full items-center gap-3 px-3 py-2.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed mt-1", children: isSigningOut ? (jsxs(Fragment$1, { children: [jsx(Loader2, { className: "h-4 w-4 animate-spin" }), jsx("span", { className: "flex-1 text-left", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A..." })] })) : (jsxs(Fragment$1, { children: [jsx(LogOut, { className: "h-4 w-4" }), jsx("span", { className: "flex-1 text-left", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })] })) })] })] })) : null;
     if (variant === "workspace") {
         return (jsx("div", { className: "mt-3.5 border-t border-sidebar-border pt-3", children: jsxs("div", { className: "relative", children: [jsxs("button", { ref: buttonRef, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, className: "flex w-full items-center gap-[11px] rounded-lg px-3 py-1.5 text-left transition-colors hover:bg-sidebar-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", children: [jsxs(Avatar, { className: "size-[34px] shrink-0 rounded-full border-[3px] border-sidebar-accent", children: [user.avatar ? (jsx(AvatarImage, { src: user.avatar, alt: user.name })) : null, jsx(AvatarFallback, { className: "rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground", children: getInitials(user.name) })] }), jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [jsx("strong", { className: "truncate text-[13px] font-semibold", title: user.name, children: user.name }), jsx("small", { className: "truncate text-[11px] text-muted-foreground", title: user.email, children: user.email })] }), jsx(ChevronsUpDown, { className: "size-3.5 shrink-0 text-muted-foreground" })] }), typeof window !== "undefined" &&
                         createPortal(dropdownContent, document.body)] }) }));
@@ -958,18 +1021,35 @@ const PLAN_FEATURES = {
     MODULE_INVENTORY: "module.inventory",
     MODULE_PROJECT: "module.project",
     MODULE_SECRETARIAT: "module.secretariat",
+    /** AI pack (paid or trial): AI calls on AntNiti's key while credits remain. */
+    AI: "ai",
 };
-/** True when plan features include key (with legacy basic_accounting_hr alias). */
+/** Keys the Accounx add-on carries with it (same alias as org_effective_features). */
+const ACCOUNTING_SUB_KEYS = [
+    PLAN_FEATURES.MODULE_SALES,
+    PLAN_FEATURES.MODULE_PURCHASING,
+    PLAN_FEATURES.MODULE_SECRETARIAT,
+];
+/**
+ * True when plan features include key. Aliases, mirroring the backend:
+ * legacy basic_accounting_hr → module.hr + module.accounting (+ its sub-keys);
+ * module.accounting → module.sales, module.purchasing, module.secretariat.
+ */
 function hasPlanFeature(features, feature) {
     if (!features?.length)
         return false;
     if (features.includes(feature))
         return true;
     if ((feature === PLAN_FEATURES.MODULE_HR ||
-        feature === PLAN_FEATURES.MODULE_ACCOUNTING) &&
+        feature === PLAN_FEATURES.MODULE_ACCOUNTING ||
+        ACCOUNTING_SUB_KEYS.includes(feature)) &&
         features.includes(PLAN_FEATURES.BASIC_ACCOUNTING_HR)) {
         return true;
     }
+    if (ACCOUNTING_SUB_KEYS.includes(feature) &&
+        features.includes(PLAN_FEATURES.MODULE_ACCOUNTING)) {
+        return true;
+    }
     if (feature === PLAN_FEATURES.BASIC_ACCOUNTING_HR &&
         features.includes(PLAN_FEATURES.MODULE_HR) &&
         features.includes(PLAN_FEATURES.MODULE_ACCOUNTING)) {
@@ -993,35 +1073,36 @@ const APPS = [
         id: "platform",
         label: "แพลตฟอร์ม",
         icon: jsx(Building2, { className: "h-4 w-4 shrink-0" }),
-        feature: null,
+        features: null,
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_PLATFORM_URL, "https://platform.antniti.com"),
     },
     {
         id: "accounx",
         label: "Accounx",
         icon: jsx(Calculator, { className: "h-4 w-4 shrink-0" }),
-        feature: PLAN_FEATURES.MODULE_ACCOUNTING,
+        features: [PLAN_FEATURES.MODULE_ACCOUNTING],
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_ACCOUNTING_URL, "https://accounx.antniti.com"),
     },
     {
         id: "invenx",
         label: "Invenx",
         icon: jsx(Warehouse, { className: "h-4 w-4 shrink-0" }),
-        feature: PLAN_FEATURES.MODULE_INVENTORY,
+        features: [PLAN_FEATURES.MODULE_INVENTORY],
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_INVENX_URL, "https://invenx.antniti.com"),
     },
     {
         id: "plannex",
         label: "Plannex",
         icon: jsx(FolderKanban, { className: "h-4 w-4 shrink-0" }),
-        feature: PLAN_FEATURES.MODULE_PROJECT,
+        // Tasks, day-logs and work records are free with HR; projects need the add-on.
+        features: [PLAN_FEATURES.MODULE_HR, PLAN_FEATURES.MODULE_PROJECT],
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_PLANNEX_URL, "https://plannex.antniti.com"),
     },
     {
         id: "peoplx",
         label: "Peoplx",
         icon: jsx(Users, { className: "h-4 w-4 shrink-0" }),
-        feature: PLAN_FEATURES.MODULE_HR,
+        features: [PLAN_FEATURES.MODULE_HR],
         baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_HR_URL, "https://peoplx.antniti.com"),
     },
 ];
@@ -1033,11 +1114,14 @@ const APPS = [
  * disagree with the screen.
  */
 function buildSystemLinks({ orgCode, activeApp, features, }) {
+    // The app names itself here; the help dialog says which app a message
+    // came from by it.
+    declareHelpApp(activeApp);
     if (!orgCode)
         return [];
     return APPS.filter(app => app.id === activeApp ||
-        app.feature === null ||
-        hasPlanFeature(features, app.feature)).map(app => ({
+        app.features === null ||
+        app.features.some(key => hasPlanFeature(features, key))).map(app => ({
         label: app.label,
         icon: app.icon,
         // Same-app link stays relative so it never leaves the current origin.
@@ -1304,993 +1388,1359 @@ const WORKSPACE_LIGHT_HEADER_VARS = {
 };
 
 /**
- * Top-level app chrome: sticky header, sidebar slot, content gutter and the
- * session/org-context plumbing that both Accounting and HR need. Apps wrap
- * it inside their `SidebarProvider` (server-rendered with the cookie-backed
- * `defaultOpen`) and their `ERPProvider`, then pass app-specific bits as
- * props.
- *
- * The padding contract is deliberately owned here so future style tweaks
- * (e.g. the recent left/right/bottom gutter pass) propagate to both apps via
- * an erp-shell bump — domain components must NOT add their own root padding
- * or content gets indented twice.
+ * The ช่วยเหลือ button in the top bar. Drawn in the header's ink (the
+ * --header-* variables of the workspace chrome, white on the brand chrome).
  */
-function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, }) {
-    const { data: session, status } = useSession();
-    const { open, setOpen } = useSidebar();
-    const router = useRouter();
-    const params = useParams();
-    const code = params?.code;
-    const extendedSession = session;
-    // Track once-authenticated so a transient accessToken drop during the
-    // periodic session refresh (SessionRefreshTrigger every 4 min) doesn't
-    // blank the whole page. The initial-load gate below still handles cold
-    // start; once we've seen a real token we render children optimistically
-    // and let the API layer surface a real 401 if the token actually died.
-    const hasSeenAccessTokenRef = useRef(false);
-    useEffect(() => {
-        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.
-    useEffect(() => {
-        if (!code)
-            return;
-        if (!organizations.length)
-            return;
-        if (!orgFromCode)
-            return;
-        if (String(organizationId) !== String(orgFromCode.id)) {
-            void setOrganizationId(orgFromCode.id);
-        }
-    }, [
-        orgFromCode,
-        organizationId,
-        setOrganizationId,
-        code,
-        organizations.length,
-    ]);
-    // 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
-    // re-settles (session resolving, cookie write in flight), and keying on that
-    // unmounted and remounted the entire page: forms lost their loaded values,
-    // in-flight edits vanished, and settings pickers snapped back to defaults.
-    //
-    // Holding the last known id makes a transient null a no-op while a genuine
-    // org-to-org switch still changes the key.
-    const lastOrgKeyRef = React.useRef("no-org");
-    const currentOrgKey = organizationId === null ||
-        organizationId === undefined ||
-        String(organizationId).trim() === ""
-        ? null
-        : String(organizationId);
-    if (currentOrgKey !== null) {
-        lastOrgKeyRef.current = currentOrgKey;
-    }
-    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.
-    //
-    // 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);
-    // ≤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);
-    useEffect(() => {
-        const mq = window.matchMedia("(max-width: 1024px)");
-        const sync = () => setIsSidebarModalLayout(mq.matches);
-        sync();
-        mq.addEventListener("change", sync);
-        return () => mq.removeEventListener("change", sync);
-    }, []);
-    // Wait for session to load (initial load only). When refetching/updating we
-    // already have a session — don't flash the full-screen loader.
-    if (status === "loading" && !session) {
-        return jsx(Fragment$1, { children: loadingComponent });
-    }
-    // Session loaded but no accessToken AND we've never seen one → real auth
-    // failure (token refresh gave nothing back on cold start), bounce through
-    // signin. If we HAVE seen one before, the drop is almost certainly the
-    // in-flight periodic refresh (SessionRefreshTrigger). Don't redirect on
-    // that transient — the JWT callback will settle in a moment and API
-    // calls will keep working with the still-valid cookie.
-    if (status === "authenticated" &&
-        !extendedSession?.accessToken &&
-        !hasSeenAccessTokenRef.current) {
-        if (typeof window !== "undefined") {
-            const url = new URL(signInUrl, window.location.origin);
-            url.searchParams.set("error", "NoAccessToken");
-            url.searchParams.set("callbackUrl", window.location.pathname);
-            window.location.href = url.toString();
-        }
-        return jsx(Fragment$1, { children: loadingComponent });
-    }
-    // Only blank the page when we've never seen a token — otherwise the
-    // periodic session refresh would visibly flash the loader every 4 min.
-    if (!extendedSession?.accessToken && !hasSeenAccessTokenRef.current) {
-        return jsx(Fragment$1, { children: loadingComponent });
-    }
-    if (!code) {
-        router.push(selectOrganizationUrl);
-        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";
-    const contentMargin = open && !isSidebarModalLayout
-        ? workspace
-            ? "ml-[244px]"
-            : "ml-[21.5rem]"
-        : "";
-    const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
-    const wrap = permissionProvider ?? ((c) => c);
-    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
-                                : WORKSPACE_HEADER_VARS, children: [workspaceHeader === "light" ? null : (jsx(HeaderBackground, { className: "rounded-none" })), jsxs("header", { className: cx("relative z-10 flex w-full items-center gap-3 text-[var(--header-fg)]", workspaceHeader === "light"
-                                        ? "min-h-[66px] px-3 py-2 sm:min-h-[72px] sm:px-[22px] lg:min-h-[82px] lg:px-8"
-                                        : "min-h-[72px] px-[18px] py-3 sm:px-6 lg:min-h-[88px] lg:px-10"), children: [isSidebarModalLayout ? (
-                                        // 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 ? (jsx("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: headerEnd })) : 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 ? (jsx("div", { className: "flex shrink-0 items-center gap-3", children: headerEnd })) : 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}`) })] }) })] }));
-}
-/** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
- *  the shell just for the layout file. Falsy values are skipped. */
-function cx(...parts) {
-    return parts.filter(Boolean).join(" ");
+function HelpButton({ className }) {
+    return (jsx("button", { type: "button", onClick: openHelp, "aria-label": "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", title: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted,#ffffffc7)] transition-colors hover:bg-[var(--header-hover,#ffffff1f)] hover:text-[var(--header-fg,#ffffff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted,#ffffffc7)]" +
+            (className ? ` ${className}` : ""), children: jsx(CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }));
 }
 
 /**
- * The product mark at the top of the workspace sidebar: the app icon, the
- * name, and a spaced caption beneath it.
+ * 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.
  */
-function WorkspaceBrand({ name, caption, mark, href, compact = false, className, }) {
-    const body = (jsxs(Fragment$1, { children: [jsx("span", { className: cn("grid shrink-0 place-items-center overflow-hidden rounded-[14px] [&>img]:size-full [&>img]:object-cover", compact ? "size-9 rounded-[11px]" : "size-11"), children: mark }), compact ? (jsx("span", { className: "sr-only", children: name })) : (jsxs("span", { className: "min-w-0", children: [jsx("span", { className: "block truncate text-[25px] leading-tight font-extrabold tracking-[-0.05em]", children: name }), caption ? (jsx("small", { className: "-mt-0.5 block truncate text-[9px] font-semibold tracking-[0.29em] text-muted-foreground", children: caption })) : null] }))] }));
-    const cls = cn("flex items-center gap-[11px] rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", !compact && "px-4", className);
-    return href ? (jsx(Link, { href: href, className: cls, "aria-label": compact ? name : undefined, children: body })) : (jsx("div", { className: cls, children: body }));
-}
+const SHELL_VERSION = "0.1.52";
 
-function isExternal(href) {
-    return /^https?:\/\//i.test(href);
+const HELP_APP_LABEL = {
+    platform: "แพลตฟอร์ม",
+    accounx: "Accounx",
+    peoplx: "Peoplx",
+    plannex: "Plannex",
+    invenx: "Invenx",
+    other: "อื่น ๆ",
+};
+function originOf(value) {
+    if (!value)
+        return null;
+    try {
+        return new URL(value).origin;
+    }
+    catch {
+        return null;
+    }
 }
 /**
- * The card at the foot of the workspace sidebar that points someone who
- * does not know where to start at the place that will tell them.
+ * Which app this page is: what the host said, what the app declared to the
+ * app switcher, then the production sub-domain, then the app URLs the build
+ * was given (local development). "other" when none of them tells.
  */
-function SidebarHelpCard({ title, description, actionLabel, href, icon, className, }) {
-    const external = isExternal(href);
-    const action = (jsxs(Fragment$1, { children: [actionLabel, jsx(ArrowRight, { className: "size-[15px]" })] }));
-    const actionClass = "mt-3 flex w-full items-center justify-between text-xs font-semibold text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded";
-    return (jsxs("div", { className: cn("mx-1.5 mb-5 rounded-[13px] border border-primary/10 bg-gradient-to-br from-primary/[0.06] to-primary/[0.02] px-3.5 py-4", className), children: [jsx("span", { className: "mb-[7px] block text-primary/70", children: icon ?? jsx(Compass, { className: "size-6", strokeWidth: 1.6 }) }), jsx("strong", { className: "block text-xs font-semibold", children: title }), description ? (jsx("p", { className: "mt-[7px] text-xs leading-[1.7] text-muted-foreground", children: description })) : null, external ? (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: actionClass, children: action })) : (jsx(Link, { href: href, className: actionClass, children: action }))] }));
-}
-/** A quiet row under the help card — the manual, the support chat. */
-function SidebarHelpLink({ label, href, icon, className }) {
-    const external = isExternal(href);
-    const cls = cn("flex w-full items-center gap-3 rounded-[10px] px-3.5 py-[11px] text-xs font-medium text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className);
-    const body = (jsxs(Fragment$1, { children: [icon ? jsx("span", { className: "shrink-0 [&>svg]:size-[18px]", children: icon }) : null, jsx("span", { className: "flex-1 truncate", children: label }), external ? jsx(ArrowUpRight, { className: "size-4 shrink-0" }) : null] }));
-    return external ? (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: cls, children: body })) : (jsx(Link, { href: href, className: cls, children: body }));
+function detectHelpApp(explicit) {
+    if (explicit)
+        return explicit;
+    const declared = declaredHelpApp();
+    if (declared)
+        return declared;
+    if (typeof window === "undefined")
+        return "other";
+    const host = window.location.hostname.toLowerCase();
+    if (/^(accounx|erp|www\.erp)\./.test(host))
+        return "accounx";
+    if (/^(peoplx|hr)\./.test(host))
+        return "peoplx";
+    if (host.startsWith("plannex."))
+        return "plannex";
+    if (host.startsWith("invenx."))
+        return "invenx";
+    if (host.startsWith("platform.") || host === "antniti.com" || host === "www.antniti.com") {
+        return "platform";
+    }
+    const here = window.location.origin;
+    const configured = [
+        ["platform", process.env.NEXT_PUBLIC_PLATFORM_URL],
+        ["accounx", process.env.NEXT_PUBLIC_ACCOUNTING_URL],
+        ["invenx", process.env.NEXT_PUBLIC_INVENX_URL],
+        ["plannex", process.env.NEXT_PUBLIC_PLANNEX_URL],
+        ["peoplx", process.env.NEXT_PUBLIC_HR_URL],
+    ];
+    for (const [id, url] of configured) {
+        if (originOf(url) === here)
+            return id;
+    }
+    return "other";
+}
+/** "Chrome 141" and "macOS" from a user agent — enough to reproduce. */
+function describeBrowser(ua) {
+    const pick = (re) => ua.match(re)?.[1] ?? "";
+    let browser = "";
+    if (/\bLine\//i.test(ua))
+        browser = `LINE ${pick(/\bLine\/([\d.]+)/i)}`;
+    else if (/\bEdg(A|iOS)?\//.test(ua))
+        browser = `Edge ${pick(/\bEdg(?:A|iOS)?\/(\d+)/)}`;
+    else if (/\bOPR\//.test(ua))
+        browser = `Opera ${pick(/\bOPR\/(\d+)/)}`;
+    else if (/SamsungBrowser\//.test(ua))
+        browser = `Samsung Internet ${pick(/SamsungBrowser\/(\d+)/)}`;
+    else if (/\b(Firefox|FxiOS)\//.test(ua))
+        browser = `Firefox ${pick(/\b(?:Firefox|FxiOS)\/(\d+)/)}`;
+    else if (/\bCriOS\//.test(ua))
+        browser = `Chrome ${pick(/\bCriOS\/(\d+)/)}`;
+    else if (/(\b|Headless)Chrome\//.test(ua))
+        browser = `Chrome ${pick(/(?:\b|Headless)Chrome\/(\d+)/)}`;
+    else if (/\bSafari\//.test(ua))
+        browser = `Safari ${pick(/\bVersion\/([\d.]+)/)}`;
+    let platform = "";
+    if (/\b(iPhone|iPad|iPod)\b/.test(ua)) {
+        platform = `iOS ${pick(/\bOS (\d+[_\d]*)/).replace(/_/g, ".")}`;
+    }
+    else if (/\bAndroid\b/.test(ua)) {
+        platform = `Android ${pick(/\bAndroid ([\d.]+)/)}`;
+    }
+    else if (/\bWindows\b/.test(ua)) {
+        platform = "Windows";
+    }
+    else if (/\bMac OS X\b/.test(ua)) {
+        platform = "macOS";
+    }
+    else if (/\bCrOS\b/.test(ua)) {
+        platform = "ChromeOS";
+    }
+    else if (/\bLinux\b/.test(ua)) {
+        platform = "Linux";
+    }
+    return { browser: browser.trim(), platform: platform.trim() };
 }
-
 /**
- * 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.
+ * The deployed build: NEXT_PUBLIC_APP_VERSION when the app sets one, else
+ * the Next build id in the page's own script paths (the build time, as every
+ * app's generateBuildId writes it).
  */
-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;
+function readAppVersion() {
+    const declared = process.env.NEXT_PUBLIC_APP_VERSION?.trim();
+    if (declared)
+        return declared;
+    if (typeof document === "undefined")
+        return "";
+    const ignore = new Set(["chunks", "css", "media", "development", "webpack"]);
+    for (const s of Array.from(document.querySelectorAll("script[src]"))) {
+        const m = s.src.match(/\/_next\/static\/([^/]+)\//);
+        if (m && !ignore.has(m[1]))
+            return m[1];
+    }
+    return "";
+}
+function pageUrl() {
+    if (typeof window === "undefined")
+        return "";
+    const { origin, pathname, search } = window.location;
+    return `${origin}${pathname}${search}`;
+}
+/** Everything attached to a message, read at the moment it is sent. */
+function collectHelpContext(orgCode) {
+    if (typeof window === "undefined")
+        return { shell_version: SHELL_VERSION };
+    const { browser, platform } = describeBrowser(window.navigator.userAgent || "");
+    let timeZone = "";
+    try {
+        timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "";
+    }
+    catch {
+        timeZone = "";
+    }
+    const ctx = {
+        page_url: pageUrl(),
+        page_title: document.title || undefined,
+        org_code: orgCode || undefined,
+        app_version: readAppVersion() || undefined,
+        shell_version: SHELL_VERSION,
+        browser: browser || undefined,
+        platform: platform || undefined,
+        screen: `${window.screen.width}x${window.screen.height}`,
+        viewport: `${window.innerWidth}x${window.innerHeight}`,
+        language: window.navigator.language || undefined,
+        time_zone: timeZone || undefined,
     };
-    const wrapperClass = [
-        "flex min-w-0 flex-1 items-center justify-center p-4",
-        fullScreen ? "min-h-[70vh]" : "",
-        className ?? "",
+    return ctx;
+}
+/** The short line under the form, "ข้อมูลที่แนบ: …". */
+function describeAttached(app, ctx, email) {
+    let path = "";
+    if (ctx.page_url) {
+        try {
+            path = new URL(ctx.page_url).pathname;
+        }
+        catch {
+            path = ctx.page_url;
+        }
+    }
+    // The organisation code is shown on its own; the path after it says where.
+    if (ctx.org_code && path.startsWith(`/${ctx.org_code}`)) {
+        path = path.slice(ctx.org_code.length + 1);
+    }
+    if (path === "/")
+        path = "";
+    const browser = [ctx.browser, ctx.platform && `(${ctx.platform})`].filter(Boolean).join(" ");
+    return [
+        HELP_APP_LABEL[app],
+        ctx.org_code,
+        path,
+        email || undefined,
+        browser || undefined,
+        ctx.app_version,
     ]
         .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] })] })] }) }) }));
+        .join(" · ");
 }
 
-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";
-/**
- * Shown when the API refuses every request because the signed-in account has
- * no employee record in this organisation.
- *
- * A gate rather than a banner. Leave, attendance, approvals and payslips all
- * identify a person by that record, so once the server started enforcing it
- * every call fails — and without something that says so, the app becomes a
- * screen of error toasts with no explanation and no way forward.
- */
-function EmployeeRequiredGate({ platformBaseUrl, }) {
-    const [blocked, setBlocked] = useState(false);
-    const params = useParams();
-    const code = params?.code ?? "";
-    useEffect(() => {
-        const onBlocked = () => setBlocked(true);
-        const onOk = () => setBlocked(false);
-        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
-        window.addEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
-        return () => {
-            window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
-            window.removeEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
-        };
-    }, []);
-    if (!blocked)
+const TOKEN_TTL_MS = 30000;
+let cachedToken = null;
+let cachedAt = 0;
+let inFlightTokenPromise = null;
+const readSessionToken = async () => {
+    const response = await fetch("/api/auth/session", {
+        credentials: "include",
+        cache: "no-store",
+    });
+    if (!response.ok)
         return null;
-    const base = platformBaseUrl?.replace(/\/$/, "") ?? "";
-    const createHref = code ? `${base}/${code}/employee/create` : `${base}/`;
-    return (jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-background/95 p-6 backdrop-blur-sm", children: jsxs("div", { className: "w-full max-w-md space-y-5 text-center", children: [jsx(ContactRound, { className: "mx-auto h-12 w-12 text-muted-foreground" }), jsxs("div", { className: "space-y-2", children: [jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E19\u0E35\u0E49\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E1C\u0E39\u0E01\u0E01\u0E31\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E25\u0E32 \u0E25\u0E07\u0E40\u0E27\u0E25\u0E32 \u0E40\u0E1A\u0E34\u0E01\u0E40\u0E07\u0E34\u0E19 \u0E41\u0E25\u0E30\u0E01\u0E32\u0E23\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34 \u0E23\u0E30\u0E1A\u0E38\u0E15\u0E31\u0E27\u0E04\u0E19\u0E08\u0E32\u0E01\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19 \u0E08\u0E36\u0E07\u0E22\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E43\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49" })] }), jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [jsx(Button, { onClick: () => window.location.reload(), children: "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" }), jsx(Button, { variant: "outline", asChild: true, children: jsxs("a", { href: createHref, children: [jsx(UserPlus, { className: "mr-1 h-4 w-4" }), "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19"] }) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E16\u0E49\u0E32\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E41\u0E01\u0E49\u0E44\u0E02 \u0E43\u0E2B\u0E49\u0E41\u0E08\u0E49\u0E07\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] }) }));
-}
-
-const shellClassName = "flex min-w-0 flex-1 flex-col gap-6 overflow-x-hidden";
-/**
- * Shared layout for “กำลังตรวจสอบสิทธิ์” (skeleton) and “ไม่มีสิทธิ์” (message).
- * Renders `children` only when policy is loaded and access is granted.
- */
-function PermissionGateShell({ policyLoading, hasPolicyAccess, deniedMessage, children, skeletonCount = 6, skeletonGridClassName = "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", skeletonVariant = "kpi", }) {
-    if (policyLoading) {
-        return (jsx("div", { className: shellClassName, children: jsx("div", { className: skeletonGridClassName, children: Array.from({ length: skeletonCount }).map((_, i) => (jsx(Card, { children: skeletonVariant === "kpi" ? (jsxs(Fragment$1, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-4 rounded" })] }), jsxs(CardContent, { children: [jsx(Skeleton, { className: "h-8 w-32 mb-2" }), jsx(Skeleton, { className: "h-3 w-20" })] })] })) : (jsxs(Fragment$1, { children: [jsx(CardHeader, { className: "pb-2", children: jsx(Skeleton, { className: "h-4 w-24" }) }), jsx(CardContent, { children: jsx(Skeleton, { className: "h-8 w-16" }) })] })) }, i))) }) }));
+    const session = (await response.json());
+    return session.accessToken ?? null;
+};
+const getAccessToken = async (forceRefresh = false) => {
+    const now = Date.now();
+    if (!forceRefresh && cachedToken && now - cachedAt < TOKEN_TTL_MS) {
+        return cachedToken;
     }
-    if (!hasPolicyAccess) {
-        return (jsx("div", { className: shellClassName, children: jsx(AccessDenied, { message: deniedMessage }) }));
+    if (!inFlightTokenPromise) {
+        inFlightTokenPromise = readSessionToken()
+            .then(token => {
+            cachedToken = token;
+            cachedAt = Date.now();
+            return token;
+        })
+            .finally(() => {
+            inFlightTokenPromise = null;
+        });
+    }
+    return inFlightTokenPromise;
+};
+const clearAccessTokenCache = () => {
+    cachedToken = null;
+    cachedAt = 0;
+};
+
+class ApiError extends Error {
+    constructor(message, options) {
+        super(message);
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "code", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "field", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "details", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.name = "ApiError";
+        this.status = options?.status;
+        this.code = options?.code;
+        this.field = options?.field;
+        this.details = options?.details;
     }
-    return jsx(Fragment$1, { children: children });
 }
+const toApiError = (error) => {
+    if (error instanceof ApiError)
+        return error;
+    if (isAxiosError(error)) {
+        const axiosErr = error;
+        const message = axiosErr.response?.data?.message ||
+            axiosErr.response?.data?.error ||
+            axiosErr.message ||
+            "Request failed";
+        return new ApiError(message, {
+            status: axiosErr.response?.status,
+            code: axiosErr.response?.data?.code,
+            field: axiosErr.response?.data?.field,
+            details: axiosErr.response?.data?.details,
+        });
+    }
+    if (error instanceof Error) {
+        return new ApiError(error.message);
+    }
+    return new ApiError(String(error));
+};
 
-const PermissionRulesContext = createContext(undefined);
-/**
- * Generic provider — the consumer app passes in `data` (live fetch) and
- * `fallbackPolicies` (static JSON). All apps share the same mapping logic
- * (build a flat map of route_key/policy_key → required child groups).
- */
-function PermissionRulesProvider({ children, data, isLoading = false, isError = false, fallbackPolicies = [], }) {
-    const rulesMap = useMemo(() => {
-        const m = {};
-        if (!data?.routes)
-            return m;
-        for (const row of data.routes) {
-            m[row.route_key] = row.required_child_groups ?? [];
+const isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
+const visit = (value, cb) => {
+    if (Array.isArray(value)) {
+        value.forEach(item => visit(item, cb));
+        return;
+    }
+    if (!isPlainObject(value)) {
+        return;
+    }
+    cb(value);
+    Object.values(value).forEach(item => visit(item, cb));
+};
+const validateGoodsReceiptChecks = (data) => {
+    let invalidPath = null;
+    const isCheckStatus = (v) => v === undefined || v === null || v === "pass" || v === "fail";
+    const isCompareStatus = (v) => v === undefined || v === null || v === "match" || v === "mismatch";
+    visit(data, node => {
+        if (invalidPath)
+            return;
+        if ("quantity_check" in node && !isCheckStatus(node.quantity_check)) {
+            invalidPath = "quantity_check";
+            return;
         }
-        return m;
-    }, [data]);
-    const policiesMap = useMemo(() => {
-        const m = {};
-        for (const row of fallbackPolicies) {
-            m[row.policy_key] = row.required_child_groups ?? [];
+        if ("quality_check" in node && !isCheckStatus(node.quality_check)) {
+            invalidPath = "quality_check";
+            return;
         }
-        if (data?.policies?.length) {
-            for (const row of data.policies) {
-                m[row.policy_key] = row.required_child_groups ?? [];
-            }
+        if ("compare_with_reference" in node &&
+            !isCompareStatus(node.compare_with_reference)) {
+            invalidPath = "compare_with_reference";
         }
-        return m;
-    }, [data, fallbackPolicies]);
-    const value = useMemo(() => ({
-        rulesMap,
-        policiesMap,
-        isLoading,
-        isError,
-        updatedAt: data?.updated_at ?? null,
-    }), [rulesMap, policiesMap, isLoading, isError, data?.updated_at]);
-    return (jsx(PermissionRulesContext.Provider, { value: value, children: children }));
-}
-/**
- * Read the permission rules. Outside the provider, report loading so
- * fail-closed consumers (nav / gates) do not treat empty maps as "allow all".
- */
-function usePermissionRules() {
-    const ctx = useContext(PermissionRulesContext);
-    if (!ctx) {
+    });
+    if (invalidPath) {
         return {
-            rulesMap: {},
-            policiesMap: {},
-            isLoading: true,
-            isError: false,
-            updatedAt: null,
+            valid: false,
+            message: "รูปแบบข้อมูลไม่ถูกต้อง: ฟิลด์ตรวจรับต้องเป็น enum string (quantity/quality: pass|fail, compare: match|mismatch)",
         };
     }
-    return ctx;
-}
-
-/**
- * Strip the org `[code]` prefix from a pathname so we can look it up in the
- * permission rules map. `/O12345/setting/foo` → `/setting/foo`. Single-segment
- * paths (e.g. `/select-organization`) keep their leading slash.
- *
- * Also normalizes the user-role subtab aliases — both `purchase-doc` and
- * `sales-doc` are gated by the same `members` rule because the UI shows
- * the same management screen with different filters.
- */
-function normalizePathnameForPermissionRules(pathname) {
-    const parts = pathname.split("/").filter(Boolean);
-    const path = parts.length <= 1 ? "/" : "/" + parts.slice(1).join("/");
-    return path.replace(/\/user-role\/(purchase-doc|sales-doc)$/, "/user-role/members");
-}
-function hasRule(rulesMap, routeKey) {
-    return Object.prototype.hasOwnProperty.call(rulesMap, routeKey);
-}
-/**
- * Resolve UI route permissions for a pathname.
- *
- * - Exact / `[param]` pattern match → matched
- * - Parent-prefix inherit only when the parent rule has a **non-empty**
- *   role list (restrictive inherit). Explicitly public parents (`[]`) do
- *   not open all children.
- * - No match → `{ matched: false }` (fail closed — never treat as public)
- */
-function resolveUiRoutePermission(pathname, rulesMap) {
-    const normalized = normalizePathnameForPermissionRules(pathname);
-    if (hasRule(rulesMap, normalized)) {
-        return { matched: true, roles: rulesMap[normalized] ?? [] };
+    return { valid: true };
+};
+const runGlobalRequestPrecheck = (config) => {
+    const method = (config.method || "get").toLowerCase();
+    const isWriteMethod = ["post", "put", "patch"].includes(method);
+    if (!isWriteMethod || config.data === undefined || config.data === null) {
+        return { valid: true };
     }
-    const pathSegments = normalized.split("/").filter(Boolean);
-    for (const [pattern, roles] of Object.entries(rulesMap)) {
-        const patternSegments = pattern.split("/").filter(Boolean);
-        if (patternSegments.length !== pathSegments.length)
-            continue;
-        let matches = true;
-        for (let i = 0; i < patternSegments.length; i++) {
-            const patternSegment = patternSegments[i];
-            const pathSegment = pathSegments[i];
-            if (patternSegment.startsWith("[") && patternSegment.endsWith("]")) {
-                if (!pathSegment) {
-                    matches = false;
-                    break;
-                }
-            }
-            else if (patternSegment !== pathSegment) {
-                matches = false;
-                break;
-            }
-        }
-        if (matches) {
-            return { matched: true, roles: roles ?? [] };
+    if (typeof FormData !== "undefined" && config.data instanceof FormData) {
+        return { valid: true };
+    }
+    return validateGoodsReceiptChecks(config.data);
+};
+
+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);
+    clearAccessTokenCache();
+    await signOut({ callbackUrl: "/auth/signin" });
+};
+const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL,
+    headers: { "Content-Type": "application/json" },
+    paramsSerializer: params => {
+        const searchParams = new URLSearchParams();
+        Object.entries(params || {}).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach(v => searchParams.append(key, String(v)));
+            }
+            else if (value !== undefined && value !== null) {
+                searchParams.append(key, String(value));
+            }
+        });
+        return searchParams.toString();
+    },
+});
+instance.interceptors.request.use(async (config) => {
+    if (!config.headers) {
+        config.headers = new AxiosHeaders();
+    }
+    if (config.data instanceof FormData && config.headers) {
+        delete config.headers["Content-Type"];
+    }
+    if (!isBrowser())
+        return 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();
+    if (organizationId) {
+        config.headers["X-Organization-ID"] = organizationId;
+    }
+    const precheck = runGlobalRequestPrecheck(config);
+    if (!precheck.valid) {
+        throw new ApiError(precheck.message || "Invalid request payload");
+    }
+    return config;
+});
+let refreshPromise = null;
+const refreshTokenSingleFlight = async () => {
+    if (!refreshPromise) {
+        refreshPromise = getAccessToken(true).finally(() => {
+            refreshPromise = null;
+        });
+    }
+    return refreshPromise;
+};
+instance.interceptors.response.use(response => {
+    // Any successful call means the session can act in this organisation
+    // after all. Without this the gate, once raised, stayed up through a
+    // whole working session — including the seconds between an administrator
+    // adding somebody and the employee record existing.
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("erp:employee-record-ok"));
+    }
+    return response;
+}, async (error) => {
+    const originalRequest = error.config;
+    const requestUrl = originalRequest?.url || error.config?.url;
+    if (error.response?.status === 401 &&
+        originalRequest &&
+        !originalRequest._retry &&
+        !isAuthEndpoint(requestUrl) &&
+        !isAuthPage()) {
+        originalRequest._retry = true;
+        const newToken = await refreshTokenSingleFlight();
+        if (newToken && originalRequest.headers) {
+            originalRequest.headers.Authorization = `Bearer ${newToken}`;
+            return instance(originalRequest);
         }
+        await redirectToLogout();
+        return Promise.reject(toApiError(error));
     }
-    // Parent-prefix: /leave/types/abc → /leave/types (non-empty roles only)
-    for (let len = pathSegments.length - 1; len >= 1; len--) {
-        const parent = "/" + pathSegments.slice(0, len).join("/");
-        if (hasRule(rulesMap, parent) && (rulesMap[parent]?.length ?? 0) > 0) {
-            return { matched: true, roles: rulesMap[parent] ?? [] };
+    // The server refuses every organisation-scoped call when the account has
+    // no employee record. Announce it once so a gate can explain it, instead
+    // of letting each failed query raise its own toast.
+    if (error.response?.status === 403) {
+        const body = error.response.data;
+        if (body?.code === "EMPLOYEE_RECORD_REQUIRED" && typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("erp:employee-record-required"));
         }
     }
-    return { matched: false, roles: [] };
-}
-/**
- * Returns the required child-group segments for a page pathname.
- *
- * Prefer {@link resolveUiRoutePermission} when you need to distinguish
- * "explicitly public (`[]`)" from "no rule (deny)". This helper returns
- * `[]` for both cases and is kept for backward compatibility.
- */
-function getRequiredChildGroups(pathname, rulesMap) {
-    return resolveUiRoutePermission(pathname, rulesMap).roles;
-}
+    return Promise.reject(toApiError(error));
+});
+
+const hasPaginationShape = (payload) => {
+    return ("total" in payload ||
+        "page" in payload ||
+        "per_page" in payload ||
+        "total_pages" in payload ||
+        "has_next" in payload ||
+        "has_prev" in payload ||
+        "pagination" in payload);
+};
+const isEnvelope = (payload) => {
+    return ("success" in payload || "message" in payload) && !hasPaginationShape(payload);
+};
+const unwrapApiResponse = (payload) => {
+    if (!payload || typeof payload !== "object") {
+        return payload;
+    }
+    const record = payload;
+    if ("data" in record &&
+        record.data !== undefined &&
+        isEnvelope(record)) {
+        return record.data;
+    }
+    return payload;
+};
 
-function DeniedCard() {
-    return (jsx(AccessDenied, { message: "\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49 \u0E2B\u0E32\u0E01\u0E04\u0E34\u0E14\u0E27\u0E48\u0E32\u0E04\u0E27\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E44\u0E14\u0E49 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E15\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A\u0E02\u0E2D\u0E07\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }));
-}
 /**
- * Permission gate for a page subtree. Looks up the current pathname in the
- * permission rules map (live rules from `PermissionRulesProvider`, layered
- * over the optional `fallbackRulesMap`), passes the resolved required roles
- * into the host's `usePermission` probe, and renders one of:
- *
- * 1. rules / probe still loading → `null` on FIRST load only (let Suspense /
- *    loading.tsx show); once this subtree has been granted access, a later
- *    loading state keeps the children mounted — see the note below
- * 2. no rule covers this path → deny (fail closed)
- * 3. rule is explicit public (`[]`) → children
- * 4. probe says no access → deny card
- * 5. otherwise → children
+ * The help channel lives on platform-api (POST /support/messages): every app
+ * already calls it with the user's token and the organisation header, and
+ * its CORS admits every app. The shared axios instance carries both and
+ * refreshes a stale token.
  */
-function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
-    const pathname = usePathname();
-    const { rulesMap, isLoading: rulesLoading } = usePermissionRules();
-    const mergedMap = useMemo(() => {
-        if (!fallbackRulesMap)
-            return rulesMap;
-        // live rules win over fallback when both define the same key
-        return { ...fallbackRulesMap, ...rulesMap };
-    }, [rulesMap, fallbackRulesMap]);
-    const lookup = useMemo(() => resolveUiRoutePermission(pathname, mergedMap), [pathname, mergedMap]);
-    // Hook must run unconditionally (rules of hooks).
-    const { hasPermission, isLoading } = usePermission({
-        requiredRoles: lookup.roles,
-    });
-    // Returning null unmounts the page. That is fine before anything has been
-    // shown, and destructive afterwards: next-auth flips its status back to
-    // "loading" on every session update() — one runs every 4 minutes — and a
-    // rules hook that reports loading on that transient took the page down with
-    // it. Users filling a long form watched everything they had typed vanish,
-    // which reads as a spontaneous page refresh.
-    //
-    // So a loading state only blanks the subtree until access has been granted
-    // once. After that the children stay mounted while the check re-settles; the
-    // API still enforces access on every request, and a genuine loss of
-    // permission surfaces as a denied response rather than a wiped form.
-    //
-    // The grant is remembered per pathname, not per mount. This provider lives in
-    // the layout, so it survives every in-app navigation — a bare boolean would
-    // carry one page's grant onto the next route and flash a page the user may
-    // not be allowed to see while its own check is still running.
-    const grantedForPathRef = useRef(null);
-    const grantedHere = grantedForPathRef.current === pathname;
-    if (rulesLoading && !grantedHere) {
-        return null;
+const DEFAULT_PLATFORM_API_URL = "https://platform-api.antniti.com/api/v1";
+function helpApiBase(app) {
+    const explicit = process.env.NEXT_PUBLIC_PLATFORM_API_URL?.trim();
+    if (explicit)
+        return explicit.replace(/\/$/, "");
+    // Platform's own API is platform-api.
+    if (app === "platform") {
+        const own = process.env.NEXT_PUBLIC_API_URL?.trim();
+        if (own)
+            return own.replace(/\/$/, "");
+    }
+    return DEFAULT_PLATFORM_API_URL;
+}
+/** A failure the dialog shows as is. */
+class HelpSendError extends Error {
+    constructor(message, status) {
+        super(message);
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: status
+        });
+        this.name = "HelpSendError";
     }
-    // Unknown route → deny. Only explicit `required_child_groups: []` is public.
-    if (!lookup.matched) {
-        return jsx(DeniedCard, {});
+}
+function friendly(err, fallback) {
+    const e = toApiError(err);
+    if (e.status === 429) {
+        return new HelpSendError("ส่งบ่อยเกินไป กรุณาลองใหม่ภายหลัง", 429);
     }
-    if (lookup.roles.length === 0) {
-        grantedForPathRef.current = pathname;
-        return jsx(Fragment$1, { children: children });
+    if (e.status && e.status >= 400 && e.status < 500 && e.message && e.status !== 401 && e.status !== 404) {
+        return new HelpSendError(e.message, e.status);
     }
-    if (isLoading && !grantedHere) {
-        return null;
+    return new HelpSendError(fallback, e.status);
+}
+async function sendHelpMessage(input) {
+    try {
+        const res = await instance.post(`${helpApiBase(input.app)}/support/messages`, {
+            kind: input.kind,
+            message: input.message,
+            app: input.app === "other" ? "" : input.app,
+            context: input.context,
+        });
+        return unwrapApiResponse(res.data);
     }
-    if (!hasPermission && !isLoading) {
-        return jsx(DeniedCard, {});
+    catch (err) {
+        throw friendly(err, "ส่งไม่สำเร็จ");
+    }
+}
+async function listMyHelpMessages(app) {
+    try {
+        const res = await instance.get(`${helpApiBase(app)}/support/messages`, {
+            params: { limit: 20 },
+        });
+        const data = unwrapApiResponse(res.data);
+        return data?.messages ?? [];
+    }
+    catch (err) {
+        throw friendly(err, "โหลดข้อมูลไม่สำเร็จ");
     }
-    grantedForPathRef.current = pathname;
-    return jsx(Fragment$1, { children: children });
 }
 
-/** Cookie name for the cross-subdomain theme choice. */
-const THEME_COOKIE = "erp-theme";
+const KINDS = [
+    { value: "help", label: "ขอความช่วยเหลือ", placeholder: "ต้องการให้ช่วยเรื่องอะไร" },
+    { value: "problem", label: "แจ้งปัญหา", placeholder: "เกิดอะไรขึ้น และกำลังทำอะไรอยู่" },
+    { value: "feedback", label: "ข้อเสนอแนะ", placeholder: "อยากให้ปรับหรือเพิ่มอะไร" },
+];
+const KIND_LABEL = Object.fromEntries(KINDS.map(k => [k.value, k.label]));
+const STATUS_LABEL = {
+    new: "รอตอบ",
+    answered: "ตอบแล้ว",
+    closed: "ปิดแล้ว",
+};
+const STATUS_TONE = {
+    new: "bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+    answered: "bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
+    closed: "bg-muted text-muted-foreground",
+};
+const MAX_MESSAGE = 4000;
+function when(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return "";
+    return d.toLocaleString("th-TH", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+}
 /**
- * Parent domain to scope the cookie to, so every `*.antniti.com` app reads the
- * same value. Returns `null` on localhost / bare IPs (host-only cookie).
+ * The ช่วยเหลือ dialog. AppLayoutShell mounts one; the top-bar button and
+ * the user menu open it with openHelp(). It sends to platform-api, which
+ * puts the message in the back office's queue on admin.antniti.com.
  */
-function sharedCookieDomain() {
-    if (typeof window === "undefined")
-        return null;
-    const host = window.location.hostname;
-    if (host === "localhost" || /^[0-9.]+$/.test(host))
-        return null;
-    const parts = host.split(".");
-    if (parts.length < 2)
-        return null;
-    return "." + parts.slice(-2).join(".");
-}
-function readThemeCookie() {
-    if (typeof document === "undefined")
-        return null;
-    const match = document.cookie.match(new RegExp("(?:^|; )" + THEME_COOKIE + "=([^;]*)"));
-    return match ? decodeURIComponent(match[1]) : null;
-}
-function writeThemeCookie(value) {
-    if (typeof document === "undefined")
-        return;
-    const domain = sharedCookieDomain();
-    const parts = [
-        `${THEME_COOKIE}=${encodeURIComponent(value)}`,
-        "path=/",
-        "max-age=31536000", // 1 year
-        "SameSite=Lax",
-    ];
-    if (domain)
-        parts.push(`domain=${domain}`);
-    document.cookie = parts.join("; ");
-}
-/**
- * Bridges next-themes (per-origin localStorage) with a cookie scoped to the
- * parent domain, so the light/dark/system choice is shared across the
- * accounting / HR / platform subdomains.
- *
- * Local storage wins when it already has a value (H57): adopting the shared
- * cookie first used to overwrite an explicit choice — including one set via
- * DevTools — and write `theme=light` back on every load whenever the cookie
- * still said light. Push the local value into the cookie instead so sibling
- * apps catch up.
- */
-function ThemeCookieSync() {
-    const { theme, setTheme } = useTheme();
-    const skipFirstWrite = React.useRef(true);
+function HelpDialogHost({ app, orgCode }) {
+    const open = useHelpOpen();
+    const { data: session } = useSession();
+    const [view, setView] = React.useState("form");
+    const [kind, setKind] = React.useState("help");
+    const [message, setMessage] = React.useState("");
+    const [sending, setSending] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [sent, setSent] = React.useState(null);
+    const [mine, setMine] = React.useState(null);
+    const [mineError, setMineError] = React.useState(null);
+    React.useEffect(() => registerHelpHost(), []);
+    // Read when the dialog opens: the page and the window as they are now.
+    // open is a dependency on purpose: the app is read again each time.
+    const appId = React.useMemo(() => detectHelpApp(app), [app, open]);
+    const context = React.useMemo(() => (open ? collectHelpContext(orgCode) : null), [open, orgCode]);
     React.useEffect(() => {
-        const local = typeof window !== "undefined"
-            ? window.localStorage.getItem("theme")
-            : null;
-        const cookie = readThemeCookie();
-        if (local) {
-            if (local !== theme)
-                setTheme(local);
-            writeThemeCookie(local);
+        if (open) {
+            setView("form");
+            setError(null);
         }
-        else if (cookie) {
-            if (cookie !== theme)
-                setTheme(cookie);
+    }, [open]);
+    const loadMine = React.useCallback(() => {
+        setView("mine");
+        setMine(null);
+        setMineError(null);
+        listMyHelpMessages(appId)
+            .then(setMine)
+            .catch((e) => setMineError(e instanceof Error ? e.message : "โหลดข้อมูลไม่สำเร็จ"));
+    }, [appId]);
+    const trimmed = message.trim();
+    const canSend = trimmed.length > 0 && !sending;
+    const send = async (e) => {
+        e?.preventDefault();
+        if (!canSend || !context)
+            return;
+        setSending(true);
+        setError(null);
+        try {
+            const res = await sendHelpMessage({ app: appId, kind, message: trimmed, context });
+            setSent(res);
+            setMessage("");
+            setKind("help");
+            setView("sent");
         }
-        else if (theme) {
-            writeThemeCookie(theme);
+        catch (err) {
+            setError(err instanceof Error ? err.message : "ส่งไม่สำเร็จ");
         }
-        // Run once on mount — `theme` is intentionally not a dependency here.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    React.useEffect(() => {
-        // Skip the initial render; only persist genuine changes (incl. the
-        // setTheme() triggered by adopting storage above — harmless re-write).
-        if (skipFirstWrite.current) {
-            skipFirstWrite.current = false;
-            return;
+        finally {
+            setSending(false);
         }
-        if (theme)
-            writeThemeCookie(theme);
-    }, [theme]);
-    return null;
-}
-function ThemeProvider({ children, ...props }) {
-    return (jsxs(ThemeProvider$1, { ...props, children: [jsx(ThemeCookieSync, {}), children] }));
-}
-
-const defaultFlags = {
-    enableAdvancedReporting: true,
-    enableMultiCurrency: false,
-    enableThaiTaxCalculation: true,
-    enableProcurementWorkflow: true,
-    enableInventoryTracking: true,
-    enableAuditTrail: true,
-    enableAdvancedFilter: true,
-    filterFlag: false,
-    setFilterFlag: () => { },
-};
-const FeatureFlagsContext = createContext(defaultFlags);
-function FeatureFlagsProvider({ children, flags = {}, }) {
-    const [filterFlag, setFilterFlag] = useState(false);
-    const mergedFlags = {
-        ...defaultFlags,
-        ...flags,
-        filterFlag: flags.filterFlag ?? filterFlag,
-        setFilterFlag: (flag) => {
-            setFilterFlag(flag);
-            if (typeof flags.setFilterFlag === "function") {
-                flags.setFilterFlag(flag);
-            }
-        },
     };
-    return (jsx(FeatureFlagsContext.Provider, { value: mergedFlags, children: children }));
-}
-function useFeatureFlags() {
-    const context = useContext(FeatureFlagsContext);
-    if (!context) {
-        throw new Error("useFeatureFlags must be used within a FeatureFlagsProvider");
-    }
-    return context;
-}
-function useFeatureFlag(flag) {
-    const flags = useFeatureFlags();
-    return flags[flag];
-}
-
-const getAxiosErrorMessage$1 = (error) => {
-    if (error.response?.data?.message) {
-        return error.response.data.message;
-    }
-    if (error.message) {
-        return error.message;
-    }
-    return "An unknown error occurred";
-};
-const formatError = (handlerName, error) => {
-    const axiosError = error;
-    const message = getAxiosErrorMessage$1(axiosError);
-    const isOrgRequired = message.includes("Organization context is required") ||
-        message.includes("organization_id") ||
-        message.includes("X-Organization-ID");
-    if (isOrgRequired) {
-        // Expected when no org selected yet (e.g. select-organization page).
-        console.warn(`[React Query] ${handlerName} skipped (no organization context): ${message}`);
-        return;
-    }
-};
-/**
- * Default React Query config used across ERP apps:
- *   - 2 retries on queries / 1 on mutations, exponential backoff
- *   - 5 min staleTime, refetchOnWindowFocus
- *   - swallows "no org context" errors to silence noise on the
- *     select-organization page
- *
- * Apps can compose on top of this — pass the returned config to `new QueryClient(...)`
- * directly or spread + override default options.
- */
-const getQueryClientConfig = () => ({
-    defaultOptions: {
-        queries: {
-            retry: 2,
-            retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
-            staleTime: 5 * 60 * 1000,
-            refetchOnWindowFocus: true,
-        },
-        mutations: {
-            // NEVER auto-retry a mutation. Unlike a query, a mutation is a side
-            // effect on a non-idempotent endpoint (submit, create, approve), and
-            // React Query cannot tell "the network dropped" from "the server
-            // rejected this on business grounds".
-            //
-            // With retry: 1 every failed mutation fired twice. Two visible
-            // consequences: a rejected submit showed up as two failed POSTs in the
-            // network tab, and — far worse — a create whose response was lost in
-            // flight would be re-sent and duplicate the record server-side.
-            //
-            // Retrying is the caller's decision, not a global default: the user
-            // sees the error and presses the button again.
-            retry: 0,
-        },
-    },
-    queryCache: new QueryCache({
-        onError: error => formatError("Query", error),
-    }),
-    mutationCache: new MutationCache({
-        onError: error => formatError("Mutation", error),
-    }),
-});
-
-function ReactQueryProvider({ children }) {
-    // Create a new QueryClient instance for each render to avoid SSR issues.
-    const [queryClient] = useState(() => new QueryClient(getQueryClientConfig()));
-    return (jsxs(QueryClientProvider, { client: queryClient, children: [children, jsx(ReactQueryDevtools, { client: queryClient, initialIsOpen: false })] }));
+    const email = session?.user?.email ?? null;
+    const placeholder = KINDS.find(k => k.value === kind)?.placeholder;
+    return (jsx(Dialog, { open: open, onOpenChange: o => (o ? openHelp() : closeHelp()), children: jsxs(DialogContent, { className: "max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-lg", children: [view === "form" ? (jsxs("form", { onSubmit: send, className: "grid gap-4", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" }) }), jsxs("div", { className: "grid gap-2", children: [jsx(Label, { id: "erp-help-kind", children: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }), jsx("div", { role: "radiogroup", "aria-labelledby": "erp-help-kind", className: "flex gap-1 rounded-lg bg-muted p-1", children: KINDS.map(k => (jsx("button", { type: "button", role: "radio", "aria-checked": kind === k.value, onClick: () => setKind(k.value), className: "flex-auto whitespace-nowrap rounded-md px-2 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:text-sm " +
+                                            (kind === k.value
+                                                ? "bg-background text-foreground shadow-sm"
+                                                : "text-muted-foreground hover:text-foreground"), children: k.label }, k.value))) })] }), jsxs("div", { className: "grid gap-2", children: [jsx(Label, { htmlFor: "erp-help-message", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" }), jsx(Textarea, { id: "erp-help-message", rows: 6, maxLength: MAX_MESSAGE, required: true, value: message, placeholder: placeholder, onChange: e => setMessage(e.target.value), className: "min-h-[140px] resize-y" })] }), context ? (jsxs("p", { className: "break-words text-xs leading-relaxed text-muted-foreground", children: ["\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E41\u0E19\u0E1A: ", describeAttached(appId, context, email)] })) : null, error ? (jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })) : null, jsxs(DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsx("button", { type: "button", onClick: loadMine, className: "mr-auto text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxs("div", { className: "flex gap-2", children: [jsx(Button, { type: "button", variant: "outline", onClick: closeHelp, children: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" }), jsxs(Button, { type: "submit", disabled: !canSend, children: [sending ? jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : null, "\u0E2A\u0E48\u0E07"] })] })] })] })) : null, view === "sent" && sent ? (jsxs("div", { className: "grid gap-4", children: [jsxs("div", { className: "flex flex-col items-center gap-2 py-4 text-center", children: [jsx(CircleCheck, { className: "h-12 w-12 text-primary", strokeWidth: 1.6 }), jsx(DialogTitle, { className: "text-lg font-semibold", children: "\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u0E40\u0E25\u0E02\u0E17\u0E35\u0E48\u0E2D\u0E49\u0E32\u0E07\u0E2D\u0E34\u0E07", " ", jsx("span", { className: "font-mono text-base font-semibold text-foreground", children: sent.ref })] })] }), jsxs(DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsx("button", { type: "button", onClick: loadMine, className: "mr-auto text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsx(Button, { type: "button", onClick: closeHelp, children: "\u0E1B\u0E34\u0E14" })] })] })) : null, view === "mine" ? (jsxs("div", { className: "grid gap-4", children: [jsx(DialogHeader, { children: jsxs(DialogTitle, { className: "flex items-center gap-2", children: [jsx("button", { type: "button", "aria-label": "\u0E01\u0E25\u0E31\u0E1A", onClick: () => setView("form"), className: "-ml-1 grid size-8 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: jsx(ArrowLeft, { className: "h-4 w-4" }) }), "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27"] }) }), mine === null && !mineError ? (jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14"] })) : null, mineError ? (jsx("p", { role: "alert", className: "text-sm text-destructive", children: mineError })) : null, mine && mine.length === 0 ? (jsx("p", { className: "py-6 text-sm text-muted-foreground", children: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" })) : null, mine && mine.length > 0 ? (jsx("ul", { className: "grid gap-3", children: mine.map(m => (jsxs("li", { className: "rounded-lg border border-border p-3", children: [jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [jsx("span", { className: "font-mono font-semibold text-foreground", children: m.ref }), jsx("span", { children: KIND_LABEL[m.kind] ?? m.kind }), jsx("span", { children: when(m.created_at) }), jsx("span", { className: `ml-auto rounded-full px-2 py-0.5 font-medium ${STATUS_TONE[m.status] ?? ""}`, children: STATUS_LABEL[m.status] ?? m.status })] }), jsx("p", { className: "mt-2 line-clamp-4 whitespace-pre-wrap break-words text-sm", children: m.message }), m.replies.map((r, i) => (jsxs("div", { className: "mt-2 rounded-md bg-muted px-3 py-2", children: [jsxs("p", { className: "text-xs text-muted-foreground", children: ["\u0E17\u0E35\u0E21 AntNiti \u00B7 ", when(r.created_at)] }), jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm", children: r.body })] }, i)))] }, m.id))) })) : null] })) : null] }) }));
 }
 
 /**
- * Renders nothing. Runs during render (after SessionProvider, inside
- * QueryClientProvider) to seed the cached profile slot from the JWT-backed
- * session — so `useMyProfile` doesn't fire a redundant GET on initial load.
+ * Top-level app chrome: sticky header, sidebar slot, content gutter and the
+ * session/org-context plumbing that both Accounting and HR need. Apps wrap
+ * it inside their `SidebarProvider` (server-rendered with the cookie-backed
+ * `defaultOpen`) and their `ERPProvider`, then pass app-specific bits as
+ * props.
  *
- * Generic over the profile shape; each app passes its own queryKey + mapper.
+ * The padding contract is deliberately owned here so future style tweaks
+ * (e.g. the recent left/right/bottom gutter pass) propagate to both apps via
+ * an erp-shell bump — domain components must NOT add their own root padding
+ * or content gets indented twice.
  */
-function SessionBackedProfileCacheSeeder({ queryKey, mapper, }) {
+function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, showHelp = true, helpApp, }) {
     const { data: session, status } = useSession();
-    const queryClient = useQueryClient();
-    if (status === "authenticated" && session) {
-        const mapped = mapper(session);
-        if (mapped) {
-            const existing = queryClient.getQueryData(queryKey);
-            if (!existing) {
-                // updatedAt: 0 → immediately stale so observers still GET /myprofile
-                // for fields the JWT seed omits (avatar/signature paths).
-                queryClient.setQueryData(queryKey, mapped, { updatedAt: 0 });
-            }
-            else {
-                // Only overwrite when the mapped id changed — we don't know T's shape
-                // so we rely on a shallow id check via JSON tag if present.
-                const existingId = existing?.id;
-                const mappedId = mapped?.id;
-                if (existingId !== mappedId) {
-                    queryClient.setQueryData(queryKey, mapped, { updatedAt: 0 });
-                }
-            }
+    const { open, setOpen } = useSidebar();
+    const router = useRouter();
+    const params = useParams();
+    const code = params?.code;
+    const extendedSession = session;
+    // Track once-authenticated so a transient accessToken drop during the
+    // periodic session refresh (SessionRefreshTrigger every 4 min) doesn't
+    // blank the whole page. The initial-load gate below still handles cold
+    // start; once we've seen a real token we render children optimistically
+    // and let the API layer surface a real 401 if the token actually died.
+    const hasSeenAccessTokenRef = useRef(false);
+    useEffect(() => {
+        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.
+    useEffect(() => {
+        if (!code)
+            return;
+        if (!organizations.length)
+            return;
+        if (!orgFromCode)
+            return;
+        if (String(organizationId) !== String(orgFromCode.id)) {
+            void setOrganizationId(orgFromCode.id);
         }
+    }, [
+        orgFromCode,
+        organizationId,
+        setOrganizationId,
+        code,
+        organizations.length,
+    ]);
+    // 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
+    // re-settles (session resolving, cookie write in flight), and keying on that
+    // unmounted and remounted the entire page: forms lost their loaded values,
+    // in-flight edits vanished, and settings pickers snapped back to defaults.
+    //
+    // Holding the last known id makes a transient null a no-op while a genuine
+    // org-to-org switch still changes the key.
+    const lastOrgKeyRef = React.useRef("no-org");
+    const currentOrgKey = organizationId === null ||
+        organizationId === undefined ||
+        String(organizationId).trim() === ""
+        ? null
+        : String(organizationId);
+    if (currentOrgKey !== null) {
+        lastOrgKeyRef.current = currentOrgKey;
     }
-    if (status === "unauthenticated") {
-        queryClient.removeQueries({ queryKey });
-    }
-    return null;
-}
-
-const TOKEN_TTL_MS = 30000;
-let cachedToken = null;
-let cachedAt = 0;
-let inFlightTokenPromise = null;
-const readSessionToken = async () => {
-    const response = await fetch("/api/auth/session", {
-        credentials: "include",
-        cache: "no-store",
-    });
-    if (!response.ok)
-        return null;
-    const session = (await response.json());
-    return session.accessToken ?? null;
-};
-const getAccessToken = async (forceRefresh = false) => {
-    const now = Date.now();
-    if (!forceRefresh && cachedToken && now - cachedAt < TOKEN_TTL_MS) {
-        return cachedToken;
-    }
-    if (!inFlightTokenPromise) {
-        inFlightTokenPromise = readSessionToken()
-            .then(token => {
-            cachedToken = token;
-            cachedAt = Date.now();
-            return token;
-        })
-            .finally(() => {
-            inFlightTokenPromise = null;
-        });
+    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.
+    //
+    // 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);
+    // ≤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);
+    useEffect(() => {
+        const mq = window.matchMedia("(max-width: 1024px)");
+        const sync = () => setIsSidebarModalLayout(mq.matches);
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, []);
+    // Help opened from the drawer's user menu: the drawer steps aside so the
+    // dialog is the only thing on a phone's screen.
+    const helpOpen = useHelpOpen();
+    useEffect(() => {
+        if (helpOpen && isSidebarModalLayout && open)
+            setOpen(false);
+    }, [helpOpen, isSidebarModalLayout, open, setOpen]);
+    // Wait for session to load (initial load only). When refetching/updating we
+    // already have a session — don't flash the full-screen loader.
+    if (status === "loading" && !session) {
+        return jsx(Fragment$1, { children: loadingComponent });
     }
-    return inFlightTokenPromise;
-};
-const clearAccessTokenCache = () => {
-    cachedToken = null;
-    cachedAt = 0;
-};
-
-class ApiError extends Error {
-    constructor(message, options) {
-        super(message);
-        Object.defineProperty(this, "status", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "code", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "field", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "details", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.name = "ApiError";
-        this.status = options?.status;
-        this.code = options?.code;
-        this.field = options?.field;
-        this.details = options?.details;
+    // Session loaded but no accessToken AND we've never seen one → real auth
+    // failure (token refresh gave nothing back on cold start), bounce through
+    // signin. If we HAVE seen one before, the drop is almost certainly the
+    // in-flight periodic refresh (SessionRefreshTrigger). Don't redirect on
+    // that transient — the JWT callback will settle in a moment and API
+    // calls will keep working with the still-valid cookie.
+    if (status === "authenticated" &&
+        !extendedSession?.accessToken &&
+        !hasSeenAccessTokenRef.current) {
+        if (typeof window !== "undefined") {
+            const url = new URL(signInUrl, window.location.origin);
+            url.searchParams.set("error", "NoAccessToken");
+            url.searchParams.set("callbackUrl", window.location.pathname);
+            window.location.href = url.toString();
+        }
+        return jsx(Fragment$1, { children: loadingComponent });
+    }
+    // Only blank the page when we've never seen a token — otherwise the
+    // periodic session refresh would visibly flash the loader every 4 min.
+    if (!extendedSession?.accessToken && !hasSeenAccessTokenRef.current) {
+        return jsx(Fragment$1, { children: loadingComponent });
+    }
+    if (!code) {
+        router.push(selectOrganizationUrl);
+        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";
+    const contentMargin = open && !isSidebarModalLayout
+        ? workspace
+            ? "ml-[244px]"
+            : "ml-[21.5rem]"
+        : "";
+    const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
+    const wrap = permissionProvider ?? ((c) => c);
+    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
+                                : WORKSPACE_HEADER_VARS, children: [workspaceHeader === "light" ? null : (jsx(HeaderBackground, { className: "rounded-none" })), jsxs("header", { className: cx("relative z-10 flex w-full items-center gap-3 text-[var(--header-fg)]", workspaceHeader === "light"
+                                        ? "min-h-[66px] px-3 py-2 sm:min-h-[72px] sm:px-[22px] lg:min-h-[82px] lg:px-8"
+                                        : "min-h-[72px] px-[18px] py-3 sm:px-6 lg:min-h-[88px] lg:px-10"), children: [isSidebarModalLayout ? (
+                                        // 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
+                                    ? "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] }));
 }
-const toApiError = (error) => {
-    if (error instanceof ApiError)
-        return error;
-    if (isAxiosError(error)) {
-        const axiosErr = error;
-        const message = axiosErr.response?.data?.message ||
-            axiosErr.response?.data?.error ||
-            axiosErr.message ||
-            "Request failed";
-        return new ApiError(message, {
-            status: axiosErr.response?.status,
-            code: axiosErr.response?.data?.code,
-            field: axiosErr.response?.data?.field,
-            details: axiosErr.response?.data?.details,
-        });
+/** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
+ *  the shell just for the layout file. Falsy values are skipped. */
+function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+
+/**
+ * The product mark at the top of the workspace sidebar: the app icon, the
+ * name, and a spaced caption beneath it.
+ */
+function WorkspaceBrand({ name, caption, mark, href, compact = false, className, }) {
+    const body = (jsxs(Fragment$1, { children: [jsx("span", { className: cn("grid shrink-0 place-items-center overflow-hidden rounded-[14px] [&>img]:size-full [&>img]:object-cover", compact ? "size-9 rounded-[11px]" : "size-11"), children: mark }), compact ? (jsx("span", { className: "sr-only", children: name })) : (jsxs("span", { className: "min-w-0", children: [jsx("span", { className: "block truncate text-[25px] leading-tight font-extrabold tracking-[-0.05em]", children: name }), caption ? (jsx("small", { className: "-mt-0.5 block truncate text-[9px] font-semibold tracking-[0.29em] text-muted-foreground", children: caption })) : null] }))] }));
+    const cls = cn("flex items-center gap-[11px] rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", !compact && "px-4", className);
+    return href ? (jsx(Link, { href: href, className: cls, "aria-label": compact ? name : undefined, children: body })) : (jsx("div", { className: cls, children: body }));
+}
+
+function isExternal(href) {
+    return /^https?:\/\//i.test(href);
+}
+/**
+ * The card at the foot of the workspace sidebar that points someone who
+ * does not know where to start at the place that will tell them.
+ */
+function SidebarHelpCard({ title, description, actionLabel, href, icon, className, }) {
+    const external = isExternal(href);
+    const action = (jsxs(Fragment$1, { children: [actionLabel, jsx(ArrowRight, { className: "size-[15px]" })] }));
+    const actionClass = "mt-3 flex w-full items-center justify-between text-xs font-semibold text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded";
+    return (jsxs("div", { className: cn("mx-1.5 mb-5 rounded-[13px] border border-primary/10 bg-gradient-to-br from-primary/[0.06] to-primary/[0.02] px-3.5 py-4", className), children: [jsx("span", { className: "mb-[7px] block text-primary/70", children: icon ?? jsx(Compass, { className: "size-6", strokeWidth: 1.6 }) }), jsx("strong", { className: "block text-xs font-semibold", children: title }), description ? (jsx("p", { className: "mt-[7px] text-xs leading-[1.7] text-muted-foreground", children: description })) : null, external ? (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: actionClass, children: action })) : (jsx(Link, { href: href, className: actionClass, children: action }))] }));
+}
+/** A quiet row under the help card — the manual, the support chat. */
+function SidebarHelpLink({ label, href, icon, className }) {
+    const external = isExternal(href);
+    const cls = cn("flex w-full items-center gap-3 rounded-[10px] px-3.5 py-[11px] text-xs font-medium text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className);
+    const body = (jsxs(Fragment$1, { children: [icon ? jsx("span", { className: "shrink-0 [&>svg]:size-[18px]", children: icon }) : null, jsx("span", { className: "flex-1 truncate", children: label }), external ? jsx(ArrowUpRight, { className: "size-4 shrink-0" }) : null] }));
+    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";
+/**
+ * Shown when the API refuses every request because the signed-in account has
+ * no employee record in this organisation.
+ *
+ * A gate rather than a banner. Leave, attendance, approvals and payslips all
+ * identify a person by that record, so once the server started enforcing it
+ * every call fails — and without something that says so, the app becomes a
+ * screen of error toasts with no explanation and no way forward.
+ */
+function EmployeeRequiredGate({ platformBaseUrl, }) {
+    const [blocked, setBlocked] = useState(false);
+    const params = useParams();
+    const code = params?.code ?? "";
+    useEffect(() => {
+        const onBlocked = () => setBlocked(true);
+        const onOk = () => setBlocked(false);
+        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+        window.addEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
+        return () => {
+            window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+            window.removeEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
+        };
+    }, []);
+    if (!blocked)
+        return null;
+    const base = platformBaseUrl?.replace(/\/$/, "") ?? "";
+    const createHref = code ? `${base}/${code}/employee/create` : `${base}/`;
+    return (jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-background/95 p-6 backdrop-blur-sm", children: jsxs("div", { className: "w-full max-w-md space-y-5 text-center", children: [jsx(ContactRound, { className: "mx-auto h-12 w-12 text-muted-foreground" }), jsxs("div", { className: "space-y-2", children: [jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E19\u0E35\u0E49\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E1C\u0E39\u0E01\u0E01\u0E31\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E25\u0E32 \u0E25\u0E07\u0E40\u0E27\u0E25\u0E32 \u0E40\u0E1A\u0E34\u0E01\u0E40\u0E07\u0E34\u0E19 \u0E41\u0E25\u0E30\u0E01\u0E32\u0E23\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34 \u0E23\u0E30\u0E1A\u0E38\u0E15\u0E31\u0E27\u0E04\u0E19\u0E08\u0E32\u0E01\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19 \u0E08\u0E36\u0E07\u0E22\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E43\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49" })] }), jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [jsx(Button, { onClick: () => window.location.reload(), children: "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" }), jsx(Button, { variant: "outline", asChild: true, children: jsxs("a", { href: createHref, children: [jsx(UserPlus, { className: "mr-1 h-4 w-4" }), "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19"] }) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E16\u0E49\u0E32\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E41\u0E01\u0E49\u0E44\u0E02 \u0E43\u0E2B\u0E49\u0E41\u0E08\u0E49\u0E07\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] }) }));
+}
+
+const shellClassName = "flex min-w-0 flex-1 flex-col gap-6 overflow-x-hidden";
+/**
+ * Shared layout for “กำลังตรวจสอบสิทธิ์” (skeleton) and “ไม่มีสิทธิ์” (message).
+ * Renders `children` only when policy is loaded and access is granted.
+ */
+function PermissionGateShell({ policyLoading, hasPolicyAccess, deniedMessage, children, skeletonCount = 6, skeletonGridClassName = "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", skeletonVariant = "kpi", }) {
+    if (policyLoading) {
+        return (jsx("div", { className: shellClassName, children: jsx("div", { className: skeletonGridClassName, children: Array.from({ length: skeletonCount }).map((_, i) => (jsx(Card, { children: skeletonVariant === "kpi" ? (jsxs(Fragment$1, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-4 rounded" })] }), jsxs(CardContent, { children: [jsx(Skeleton, { className: "h-8 w-32 mb-2" }), jsx(Skeleton, { className: "h-3 w-20" })] })] })) : (jsxs(Fragment$1, { children: [jsx(CardHeader, { className: "pb-2", children: jsx(Skeleton, { className: "h-4 w-24" }) }), jsx(CardContent, { children: jsx(Skeleton, { className: "h-8 w-16" }) })] })) }, i))) }) }));
     }
-    if (error instanceof Error) {
-        return new ApiError(error.message);
+    if (!hasPolicyAccess) {
+        return (jsx("div", { className: shellClassName, children: jsx(AccessDenied, { message: deniedMessage }) }));
     }
-    return new ApiError(String(error));
-};
+    return jsx(Fragment$1, { children: children });
+}
 
-const isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
-const visit = (value, cb) => {
-    if (Array.isArray(value)) {
-        value.forEach(item => visit(item, cb));
-        return;
+const PermissionRulesContext = createContext(undefined);
+/**
+ * Generic provider — the consumer app passes in `data` (live fetch) and
+ * `fallbackPolicies` (static JSON). All apps share the same mapping logic
+ * (build a flat map of route_key/policy_key → required child groups).
+ */
+function PermissionRulesProvider({ children, data, isLoading = false, isError = false, fallbackPolicies = [], }) {
+    const rulesMap = useMemo(() => {
+        const m = {};
+        if (!data?.routes)
+            return m;
+        for (const row of data.routes) {
+            m[row.route_key] = row.required_child_groups ?? [];
+        }
+        return m;
+    }, [data]);
+    const policiesMap = useMemo(() => {
+        const m = {};
+        for (const row of fallbackPolicies) {
+            m[row.policy_key] = row.required_child_groups ?? [];
+        }
+        if (data?.policies?.length) {
+            for (const row of data.policies) {
+                m[row.policy_key] = row.required_child_groups ?? [];
+            }
+        }
+        return m;
+    }, [data, fallbackPolicies]);
+    const value = useMemo(() => ({
+        rulesMap,
+        policiesMap,
+        isLoading,
+        isError,
+        updatedAt: data?.updated_at ?? null,
+    }), [rulesMap, policiesMap, isLoading, isError, data?.updated_at]);
+    return (jsx(PermissionRulesContext.Provider, { value: value, children: children }));
+}
+/**
+ * Read the permission rules. Outside the provider, report loading so
+ * fail-closed consumers (nav / gates) do not treat empty maps as "allow all".
+ */
+function usePermissionRules() {
+    const ctx = useContext(PermissionRulesContext);
+    if (!ctx) {
+        return {
+            rulesMap: {},
+            policiesMap: {},
+            isLoading: true,
+            isError: false,
+            updatedAt: null,
+        };
     }
-    if (!isPlainObject(value)) {
-        return;
+    return ctx;
+}
+
+/**
+ * Strip the org `[code]` prefix from a pathname so we can look it up in the
+ * permission rules map. `/O12345/setting/foo` → `/setting/foo`. Single-segment
+ * paths (e.g. `/select-organization`) keep their leading slash.
+ *
+ * Also normalizes the user-role subtab aliases — both `purchase-doc` and
+ * `sales-doc` are gated by the same `members` rule because the UI shows
+ * the same management screen with different filters.
+ */
+function normalizePathnameForPermissionRules(pathname) {
+    const parts = pathname.split("/").filter(Boolean);
+    const path = parts.length <= 1 ? "/" : "/" + parts.slice(1).join("/");
+    return path.replace(/\/user-role\/(purchase-doc|sales-doc)$/, "/user-role/members");
+}
+function hasRule(rulesMap, routeKey) {
+    return Object.prototype.hasOwnProperty.call(rulesMap, routeKey);
+}
+/**
+ * Resolve UI route permissions for a pathname.
+ *
+ * - Exact / `[param]` pattern match → matched
+ * - Parent-prefix inherit only when the parent rule has a **non-empty**
+ *   role list (restrictive inherit). Explicitly public parents (`[]`) do
+ *   not open all children.
+ * - No match → `{ matched: false }` (fail closed — never treat as public)
+ */
+function resolveUiRoutePermission(pathname, rulesMap) {
+    const normalized = normalizePathnameForPermissionRules(pathname);
+    if (hasRule(rulesMap, normalized)) {
+        return { matched: true, roles: rulesMap[normalized] ?? [] };
     }
-    cb(value);
-    Object.values(value).forEach(item => visit(item, cb));
-};
-const validateGoodsReceiptChecks = (data) => {
-    let invalidPath = null;
-    const isCheckStatus = (v) => v === undefined || v === null || v === "pass" || v === "fail";
-    const isCompareStatus = (v) => v === undefined || v === null || v === "match" || v === "mismatch";
-    visit(data, node => {
-        if (invalidPath)
-            return;
-        if ("quantity_check" in node && !isCheckStatus(node.quantity_check)) {
-            invalidPath = "quantity_check";
-            return;
+    const pathSegments = normalized.split("/").filter(Boolean);
+    for (const [pattern, roles] of Object.entries(rulesMap)) {
+        const patternSegments = pattern.split("/").filter(Boolean);
+        if (patternSegments.length !== pathSegments.length)
+            continue;
+        let matches = true;
+        for (let i = 0; i < patternSegments.length; i++) {
+            const patternSegment = patternSegments[i];
+            const pathSegment = pathSegments[i];
+            if (patternSegment.startsWith("[") && patternSegment.endsWith("]")) {
+                if (!pathSegment) {
+                    matches = false;
+                    break;
+                }
+            }
+            else if (patternSegment !== pathSegment) {
+                matches = false;
+                break;
+            }
         }
-        if ("quality_check" in node && !isCheckStatus(node.quality_check)) {
-            invalidPath = "quality_check";
-            return;
+        if (matches) {
+            return { matched: true, roles: roles ?? [] };
         }
-        if ("compare_with_reference" in node &&
-            !isCompareStatus(node.compare_with_reference)) {
-            invalidPath = "compare_with_reference";
+    }
+    // Parent-prefix: /leave/types/abc → /leave/types (non-empty roles only)
+    for (let len = pathSegments.length - 1; len >= 1; len--) {
+        const parent = "/" + pathSegments.slice(0, len).join("/");
+        if (hasRule(rulesMap, parent) && (rulesMap[parent]?.length ?? 0) > 0) {
+            return { matched: true, roles: rulesMap[parent] ?? [] };
         }
+    }
+    return { matched: false, roles: [] };
+}
+/**
+ * Returns the required child-group segments for a page pathname.
+ *
+ * Prefer {@link resolveUiRoutePermission} when you need to distinguish
+ * "explicitly public (`[]`)" from "no rule (deny)". This helper returns
+ * `[]` for both cases and is kept for backward compatibility.
+ */
+function getRequiredChildGroups(pathname, rulesMap) {
+    return resolveUiRoutePermission(pathname, rulesMap).roles;
+}
+
+function DeniedCard() {
+    return (jsx(AccessDenied, { message: "\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49 \u0E2B\u0E32\u0E01\u0E04\u0E34\u0E14\u0E27\u0E48\u0E32\u0E04\u0E27\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E44\u0E14\u0E49 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E15\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A\u0E02\u0E2D\u0E07\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }));
+}
+/**
+ * Permission gate for a page subtree. Looks up the current pathname in the
+ * permission rules map (live rules from `PermissionRulesProvider`, layered
+ * over the optional `fallbackRulesMap`), passes the resolved required roles
+ * into the host's `usePermission` probe, and renders one of:
+ *
+ * 1. rules / probe still loading → `null` on FIRST load only (let Suspense /
+ *    loading.tsx show); once this subtree has been granted access, a later
+ *    loading state keeps the children mounted — see the note below
+ * 2. no rule covers this path → deny (fail closed)
+ * 3. rule is explicit public (`[]`) → children
+ * 4. probe says no access → deny card
+ * 5. otherwise → children
+ */
+function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
+    const pathname = usePathname();
+    const { rulesMap, isLoading: rulesLoading } = usePermissionRules();
+    const mergedMap = useMemo(() => {
+        if (!fallbackRulesMap)
+            return rulesMap;
+        // live rules win over fallback when both define the same key
+        return { ...fallbackRulesMap, ...rulesMap };
+    }, [rulesMap, fallbackRulesMap]);
+    const lookup = useMemo(() => resolveUiRoutePermission(pathname, mergedMap), [pathname, mergedMap]);
+    // Hook must run unconditionally (rules of hooks).
+    const { hasPermission, isLoading } = usePermission({
+        requiredRoles: lookup.roles,
     });
-    if (invalidPath) {
-        return {
-            valid: false,
-            message: "รูปแบบข้อมูลไม่ถูกต้อง: ฟิลด์ตรวจรับต้องเป็น enum string (quantity/quality: pass|fail, compare: match|mismatch)",
-        };
+    // Returning null unmounts the page. That is fine before anything has been
+    // shown, and destructive afterwards: next-auth flips its status back to
+    // "loading" on every session update() — one runs every 4 minutes — and a
+    // rules hook that reports loading on that transient took the page down with
+    // it. Users filling a long form watched everything they had typed vanish,
+    // which reads as a spontaneous page refresh.
+    //
+    // So a loading state only blanks the subtree until access has been granted
+    // once. After that the children stay mounted while the check re-settles; the
+    // API still enforces access on every request, and a genuine loss of
+    // permission surfaces as a denied response rather than a wiped form.
+    //
+    // The grant is remembered per pathname, not per mount. This provider lives in
+    // the layout, so it survives every in-app navigation — a bare boolean would
+    // carry one page's grant onto the next route and flash a page the user may
+    // not be allowed to see while its own check is still running.
+    const grantedForPathRef = useRef(null);
+    const grantedHere = grantedForPathRef.current === pathname;
+    if (rulesLoading && !grantedHere) {
+        return null;
     }
-    return { valid: true };
-};
-const runGlobalRequestPrecheck = (config) => {
-    const method = (config.method || "get").toLowerCase();
-    const isWriteMethod = ["post", "put", "patch"].includes(method);
-    if (!isWriteMethod || config.data === undefined || config.data === null) {
-        return { valid: true };
+    // Unknown route → deny. Only explicit `required_child_groups: []` is public.
+    if (!lookup.matched) {
+        return jsx(DeniedCard, {});
     }
-    if (typeof FormData !== "undefined" && config.data instanceof FormData) {
-        return { valid: true };
+    if (lookup.roles.length === 0) {
+        grantedForPathRef.current = pathname;
+        return jsx(Fragment$1, { children: children });
     }
-    return validateGoodsReceiptChecks(config.data);
-};
+    if (isLoading && !grantedHere) {
+        return null;
+    }
+    if (!hasPermission && !isLoading) {
+        return jsx(DeniedCard, {});
+    }
+    grantedForPathRef.current = pathname;
+    return jsx(Fragment$1, { children: children });
+}
 
-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())
+/** Cookie name for the cross-subdomain theme choice. */
+const THEME_COOKIE = "erp-theme";
+/**
+ * Parent domain to scope the cookie to, so every `*.antniti.com` app reads the
+ * same value. Returns `null` on localhost / bare IPs (host-only cookie).
+ */
+function sharedCookieDomain() {
+    if (typeof window === "undefined")
         return null;
-    const cookies = document.cookie.split(";").map(cookie => cookie.trim());
-    const orgCookie = cookies.find(cookie => cookie.startsWith("erp.organizationId="));
-    if (!orgCookie)
+    const host = window.location.hostname;
+    if (host === "localhost" || /^[0-9.]+$/.test(host))
         return null;
-    const raw = orgCookie.substring("erp.organizationId=".length);
-    return raw ? decodeURIComponent(raw) : null;
-};
-const redirectToLogout = async () => {
-    if (!isBrowser() || isAuthPage())
+    const parts = host.split(".");
+    if (parts.length < 2)
+        return null;
+    return "." + parts.slice(-2).join(".");
+}
+function readThemeCookie() {
+    if (typeof document === "undefined")
+        return null;
+    const match = document.cookie.match(new RegExp("(?:^|; )" + THEME_COOKIE + "=([^;]*)"));
+    return match ? decodeURIComponent(match[1]) : null;
+}
+function writeThemeCookie(value) {
+    if (typeof document === "undefined")
         return;
-    localStorage.clear();
-    sessionStorage.clear();
-    setOrganizationId(null);
-    clearAccessTokenCache();
-    await signOut({ callbackUrl: "/auth/signin" });
+    const domain = sharedCookieDomain();
+    const parts = [
+        `${THEME_COOKIE}=${encodeURIComponent(value)}`,
+        "path=/",
+        "max-age=31536000", // 1 year
+        "SameSite=Lax",
+    ];
+    if (domain)
+        parts.push(`domain=${domain}`);
+    document.cookie = parts.join("; ");
+}
+/**
+ * Bridges next-themes (per-origin localStorage) with a cookie scoped to the
+ * parent domain, so the light/dark/system choice is shared across the
+ * accounting / HR / platform subdomains.
+ *
+ * Local storage wins when it already has a value (H57): adopting the shared
+ * cookie first used to overwrite an explicit choice — including one set via
+ * DevTools — and write `theme=light` back on every load whenever the cookie
+ * still said light. Push the local value into the cookie instead so sibling
+ * apps catch up.
+ */
+function ThemeCookieSync() {
+    const { theme, setTheme } = useTheme();
+    const skipFirstWrite = React.useRef(true);
+    React.useEffect(() => {
+        const local = typeof window !== "undefined"
+            ? window.localStorage.getItem("theme")
+            : null;
+        const cookie = readThemeCookie();
+        if (local) {
+            if (local !== theme)
+                setTheme(local);
+            writeThemeCookie(local);
+        }
+        else if (cookie) {
+            if (cookie !== theme)
+                setTheme(cookie);
+        }
+        else if (theme) {
+            writeThemeCookie(theme);
+        }
+        // Run once on mount — `theme` is intentionally not a dependency here.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(() => {
+        // Skip the initial render; only persist genuine changes (incl. the
+        // setTheme() triggered by adopting storage above — harmless re-write).
+        if (skipFirstWrite.current) {
+            skipFirstWrite.current = false;
+            return;
+        }
+        if (theme)
+            writeThemeCookie(theme);
+    }, [theme]);
+    return null;
+}
+function ThemeProvider({ children, ...props }) {
+    return (jsxs(ThemeProvider$1, { ...props, children: [jsx(ThemeCookieSync, {}), children] }));
+}
+
+const defaultFlags = {
+    enableAdvancedReporting: true,
+    enableMultiCurrency: false,
+    enableThaiTaxCalculation: true,
+    enableProcurementWorkflow: true,
+    enableInventoryTracking: true,
+    enableAuditTrail: true,
+    enableAdvancedFilter: true,
+    filterFlag: false,
+    setFilterFlag: () => { },
 };
-const instance = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_API_URL,
-    headers: { "Content-Type": "application/json" },
-    paramsSerializer: params => {
-        const searchParams = new URLSearchParams();
-        Object.entries(params || {}).forEach(([key, value]) => {
-            if (Array.isArray(value)) {
-                value.forEach(v => searchParams.append(key, String(v)));
-            }
-            else if (value !== undefined && value !== null) {
-                searchParams.append(key, String(value));
+const FeatureFlagsContext = createContext(defaultFlags);
+function FeatureFlagsProvider({ children, flags = {}, }) {
+    const [filterFlag, setFilterFlag] = useState(false);
+    const mergedFlags = {
+        ...defaultFlags,
+        ...flags,
+        filterFlag: flags.filterFlag ?? filterFlag,
+        setFilterFlag: (flag) => {
+            setFilterFlag(flag);
+            if (typeof flags.setFilterFlag === "function") {
+                flags.setFilterFlag(flag);
             }
-        });
-        return searchParams.toString();
-    },
-});
-instance.interceptors.request.use(async (config) => {
-    if (!config.headers) {
-        config.headers = new AxiosHeaders();
-    }
-    if (config.data instanceof FormData && config.headers) {
-        delete config.headers["Content-Type"];
-    }
-    if (!isBrowser())
-        return 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();
-    if (organizationId) {
-        config.headers["X-Organization-ID"] = organizationId;
+        },
+    };
+    return (jsx(FeatureFlagsContext.Provider, { value: mergedFlags, children: children }));
+}
+function useFeatureFlags() {
+    const context = useContext(FeatureFlagsContext);
+    if (!context) {
+        throw new Error("useFeatureFlags must be used within a FeatureFlagsProvider");
     }
-    const precheck = runGlobalRequestPrecheck(config);
-    if (!precheck.valid) {
-        throw new ApiError(precheck.message || "Invalid request payload");
+    return context;
+}
+function useFeatureFlag(flag) {
+    const flags = useFeatureFlags();
+    return flags[flag];
+}
+
+const getAxiosErrorMessage$1 = (error) => {
+    if (error.response?.data?.message) {
+        return error.response.data.message;
     }
-    return config;
-});
-let refreshPromise = null;
-const refreshTokenSingleFlight = async () => {
-    if (!refreshPromise) {
-        refreshPromise = getAccessToken(true).finally(() => {
-            refreshPromise = null;
-        });
+    if (error.message) {
+        return error.message;
     }
-    return refreshPromise;
+    return "An unknown error occurred";
 };
-instance.interceptors.response.use(response => {
-    // Any successful call means the session can act in this organisation
-    // after all. Without this the gate, once raised, stayed up through a
-    // whole working session — including the seconds between an administrator
-    // adding somebody and the employee record existing.
-    if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("erp:employee-record-ok"));
-    }
-    return response;
-}, async (error) => {
-    const originalRequest = error.config;
-    const requestUrl = originalRequest?.url || error.config?.url;
-    if (error.response?.status === 401 &&
-        originalRequest &&
-        !originalRequest._retry &&
-        !isAuthEndpoint(requestUrl) &&
-        !isAuthPage()) {
-        originalRequest._retry = true;
-        const newToken = await refreshTokenSingleFlight();
-        if (newToken && originalRequest.headers) {
-            originalRequest.headers.Authorization = `Bearer ${newToken}`;
-            return instance(originalRequest);
-        }
-        await redirectToLogout();
-        return Promise.reject(toApiError(error));
-    }
-    // The server refuses every organisation-scoped call when the account has
-    // no employee record. Announce it once so a gate can explain it, instead
-    // of letting each failed query raise its own toast.
-    if (error.response?.status === 403) {
-        const body = error.response.data;
-        if (body?.code === "EMPLOYEE_RECORD_REQUIRED" && typeof window !== "undefined") {
-            window.dispatchEvent(new CustomEvent("erp:employee-record-required"));
-        }
+const formatError = (handlerName, error) => {
+    const axiosError = error;
+    const message = getAxiosErrorMessage$1(axiosError);
+    const isOrgRequired = message.includes("Organization context is required") ||
+        message.includes("organization_id") ||
+        message.includes("X-Organization-ID");
+    if (isOrgRequired) {
+        // Expected when no org selected yet (e.g. select-organization page).
+        console.warn(`[React Query] ${handlerName} skipped (no organization context): ${message}`);
+        return;
     }
-    return Promise.reject(toApiError(error));
+};
+/**
+ * Default React Query config used across ERP apps:
+ *   - 2 retries on queries / 1 on mutations, exponential backoff
+ *   - 5 min staleTime, refetchOnWindowFocus
+ *   - swallows "no org context" errors to silence noise on the
+ *     select-organization page
+ *
+ * Apps can compose on top of this — pass the returned config to `new QueryClient(...)`
+ * directly or spread + override default options.
+ */
+const getQueryClientConfig = () => ({
+    defaultOptions: {
+        queries: {
+            retry: 2,
+            retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+            staleTime: 5 * 60 * 1000,
+            refetchOnWindowFocus: true,
+        },
+        mutations: {
+            // NEVER auto-retry a mutation. Unlike a query, a mutation is a side
+            // effect on a non-idempotent endpoint (submit, create, approve), and
+            // React Query cannot tell "the network dropped" from "the server
+            // rejected this on business grounds".
+            //
+            // With retry: 1 every failed mutation fired twice. Two visible
+            // consequences: a rejected submit showed up as two failed POSTs in the
+            // network tab, and — far worse — a create whose response was lost in
+            // flight would be re-sent and duplicate the record server-side.
+            //
+            // Retrying is the caller's decision, not a global default: the user
+            // sees the error and presses the button again.
+            retry: 0,
+        },
+    },
+    queryCache: new QueryCache({
+        onError: error => formatError("Query", error),
+    }),
+    mutationCache: new MutationCache({
+        onError: error => formatError("Mutation", error),
+    }),
 });
 
-const hasPaginationShape = (payload) => {
-    return ("total" in payload ||
-        "page" in payload ||
-        "per_page" in payload ||
-        "total_pages" in payload ||
-        "has_next" in payload ||
-        "has_prev" in payload ||
-        "pagination" in payload);
-};
-const isEnvelope = (payload) => {
-    return ("success" in payload || "message" in payload) && !hasPaginationShape(payload);
-};
-const unwrapApiResponse = (payload) => {
-    if (!payload || typeof payload !== "object") {
-        return payload;
+function ReactQueryProvider({ children }) {
+    // Create a new QueryClient instance for each render to avoid SSR issues.
+    const [queryClient] = useState(() => new QueryClient(getQueryClientConfig()));
+    return (jsxs(QueryClientProvider, { client: queryClient, children: [children, jsx(ReactQueryDevtools, { client: queryClient, initialIsOpen: false })] }));
+}
+
+/**
+ * Renders nothing. Runs during render (after SessionProvider, inside
+ * QueryClientProvider) to seed the cached profile slot from the JWT-backed
+ * session — so `useMyProfile` doesn't fire a redundant GET on initial load.
+ *
+ * Generic over the profile shape; each app passes its own queryKey + mapper.
+ */
+function SessionBackedProfileCacheSeeder({ queryKey, mapper, }) {
+    const { data: session, status } = useSession();
+    const queryClient = useQueryClient();
+    if (status === "authenticated" && session) {
+        const mapped = mapper(session);
+        if (mapped) {
+            const existing = queryClient.getQueryData(queryKey);
+            if (!existing) {
+                // updatedAt: 0 → immediately stale so observers still GET /myprofile
+                // for fields the JWT seed omits (avatar/signature paths).
+                queryClient.setQueryData(queryKey, mapped, { updatedAt: 0 });
+            }
+            else {
+                // Only overwrite when the mapped id changed — we don't know T's shape
+                // so we rely on a shallow id check via JSON tag if present.
+                const existingId = existing?.id;
+                const mappedId = mapped?.id;
+                if (existingId !== mappedId) {
+                    queryClient.setQueryData(queryKey, mapped, { updatedAt: 0 });
+                }
+            }
+        }
     }
-    const record = payload;
-    if ("data" in record &&
-        record.data !== undefined &&
-        isEnvelope(record)) {
-        return record.data;
+    if (status === "unauthenticated") {
+        queryClient.removeQueries({ queryKey });
     }
-    return payload;
-};
+    return null;
+}
 
 // Hooks
 const updateOrganizationId = (organizationId) => {
@@ -2306,5 +2756,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, NavMain, NavTools, NavUser, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, 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, decodeJWT, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, hasPlanFeature, isLikelyTransientNetworkError, isPathActive, normalizePathnameForPermissionRules, resolveUiRoutePermission, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
+export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, HelpButton, HelpDialogHost, NavMain, NavTools, NavUser, 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, normalizePathnameForPermissionRules, openHelp, resolveUiRoutePermission, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map