@eintrek/erp-shell 0.1.52 → 0.1.53

package/dist/index.js

@@ -825,6 +825,9 @@ function isRecordID(segment) {
 let open = false;
 let hosts = 0;
 let declaredApp = null;
+// The message the dialog should open on (the ตอบกลับ link's ?help=H1004),
+// until it is closed or left.
+let pendingRef = null;
 const listeners = new Set();
 function emit() {
     listeners.forEach(l => l());
@@ -843,14 +846,35 @@ function openHelp() {
     }
 }
 function closeHelp() {
+    pendingRef = null;
     if (open) {
         open = false;
         emit();
     }
 }
-/** Called by the dialog host on mount; returns its unmount. */
+/** Opens the dialog on one of the person's messages, by id or "H1004". */
+function openHelpOn(ref) {
+    pendingRef = ref;
+    open = true;
+    emit();
+}
+/** The message the dialog was asked to open on, if it has not been left. */
+function pendingHelpRef() {
+    return pendingRef;
+}
+/** The dialog moved on from the message it was opened on. */
+function clearPendingHelpRef() {
+    pendingRef = null;
+}
+/**
+ * Called by the dialog host on mount; returns its unmount. A host that
+ * mounts while a message is waiting to be shown (a page that mounted its
+ * layout twice) opens the dialog again.
+ */
 function registerHelpHost() {
     hosts += 1;
+    if (pendingRef)
+        open = true;
     emit();
     return () => {
         hosts -= 1;
@@ -880,562 +904,371 @@ function declaredHelpApp() {
     return declaredApp;
 }
 
-function isExternalHref(href) {
-    return /^https?:\/\//i.test(href) || href.startsWith("//");
-}
-function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref = "/select-organization", signInRedirectHref = "/auth/signin", systemLinks, showSelectOrganization = true, showLanguageSwitch = true, variant = "brand", } = {}) {
-    const { data: session, status } = react.useSession();
-    const router = navigation.useRouter();
-    const { theme, setTheme } = nextThemes.useTheme();
-    const [isSigningOut, setIsSigningOut] = React.useState(false);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [showThemeMenu, setShowThemeMenu] = React.useState(false);
-    const [showLanguageMenu, setShowLanguageMenu] = React.useState(false);
-    const [showAppsMenu, setShowAppsMenu] = React.useState(false);
-    const buttonRef = React.useRef(null);
-    const [position, setPosition] = React.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 || "ผู้ใช้",
-            email: session.user.email || "",
-            // avatarSrc first: the NextAuth session carries no picture unless the
-            // host app deliberately puts one in the JWT, so relying on
-            // session.user.image alone left every user on their initials forever.
-            avatar: avatarSrc || session.user.image || undefined,
-        }
-        : null;
-    const getInitials = (name) => {
-        if (!name)
-            return "U";
-        return name
-            .split(" ")
-            .map(n => n[0])
-            .join("")
-            .toUpperCase()
-            .slice(0, 2);
-    };
-    const handleSignOut = async () => {
-        setIsSigningOut(true);
-        try {
-            await react.signOut({ callbackUrl: signInRedirectHref, redirect: true });
-        }
-        catch (error) {
-            console.error("Sign out error:", error);
-            window.location.href = signInRedirectHref;
-        }
-        finally {
-            setIsSigningOut(false);
-        }
-    };
-    const handleSelectOrganization = () => {
-        setIsOpen(false);
-        router.push(selectOrganizationHref);
-    };
-    const handleProfile = () => {
-        setIsOpen(false);
-        if (profileHref)
-            router.push(profileHref);
-    };
-    const handleSystemLink = (href) => {
-        setIsOpen(false);
-        if (isExternalHref(href)) {
-            window.location.assign(href);
-            return;
-        }
-        router.push(href);
-    };
-    const handleThemeChange = (newTheme) => {
-        setTheme(newTheme);
-        setShowThemeMenu(false);
-    };
-    const handleLanguageChange = (language) => {
-        console.log("Change language to:", language);
-        setShowLanguageMenu(false);
-    };
-    React.useEffect(() => {
-        if (isOpen && buttonRef.current) {
-            const rect = buttonRef.current.getBoundingClientRect();
-            setPosition({ top: rect.bottom, left: rect.right + 8 });
-        }
-    }, [isOpen]);
-    React.useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleClickOutside = (event) => {
-            if (buttonRef.current &&
-                !buttonRef.current.contains(event.target) &&
-                !event.target.closest('[data-dropdown="nav-user"]')) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [isOpen]);
-    if (status === "loading") {
-        return (jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md", children: [jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-lg bg-sidebar-accent animate-pulse" }), jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [jsxRuntime.jsx("div", { className: "h-4 w-24 bg-sidebar-accent rounded animate-pulse" }), jsxRuntime.jsx("div", { className: "h-3 w-32 bg-sidebar-accent rounded animate-pulse" })] })] }) }));
-    }
-    if (!user)
-        return null;
-    const visibleSystemLinks = (systemLinks ?? []).filter(link => link.href && link.label);
-    const dropdownContent = isOpen ? (jsxRuntime.jsxs("div", { "data-dropdown": "nav-user", className: "fixed w-52 sm:w-60 md:w-80 rounded-lg bg-sidebar border border-sidebar-border shadow-xl z-50 overflow-hidden\n                 -translate-x-[65%] -translate-y-[110%] sm:translate-x-0 sm:-translate-y-full", style: { top: `${position.top}px`, left: `${position.left}px` }, children: [organization && (jsxRuntime.jsx("div", { className: "p-4 border-b border-sidebar-border bg-sidebar-accent/30", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [organization.logoUrl ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        jsxRuntime.jsx("img", { src: organization.logoUrl, alt: organization.name ?? "โลโก้บริษัท", className: "h-8 w-8 flex-shrink-0 rounded object-contain bg-white", 
-                            // A dead logo URL must not leave a broken-image glyph in the
-                            // sidebar; drop back to the generic icon's empty slot.
-                            onError: e => {
-                                e.currentTarget.style.display = "none";
-                            } })) : (jsxRuntime.jsx(lucideReact.Building2, { className: "h-5 w-5 text-sidebar-foreground/70 flex-shrink-0" })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "font-medium text-sm sm:truncate", children: organization.name }), organization.description && (jsxRuntime.jsx("div", { className: "text-xs text-sidebar-foreground/70 truncate mt-0.5", children: organization.description }))] })] }) })), jsxRuntime.jsxs("div", { className: "p-2", children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
-                                    setShowThemeMenu(!showThemeMenu);
-                                    setShowLanguageMenu(false);
-                                    setShowAppsMenu(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: [jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E18\u0E35\u0E21" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showThemeMenu ? "rotate-180" : ""}` })] }), showThemeMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: [
-                                    { key: "light", label: "สว่าง", Icon: lucideReact.Sun },
-                                    { key: "dark", label: "มืด", Icon: lucideReact.Moon },
-                                    { key: "system", label: "ตามระบบ", Icon: lucideReact.Monitor },
-                                ].map(({ key, label, Icon }) => (jsxRuntime.jsxs("button", { onClick: () => handleThemeChange(key), 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: [jsxRuntime.jsx(Icon, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }), theme === key && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, key))) }))] }), showLanguageSwitch && (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
-                                    setShowLanguageMenu(!showLanguageMenu);
-                                    setShowThemeMenu(false);
-                                    setShowAppsMenu(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: [jsxRuntime.jsx(lucideReact.Globe, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E20\u0E32\u0E29\u0E32" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showLanguageMenu ? "rotate-180" : ""}` })] }), showLanguageMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: [
-                                    { code: "th", label: "ไทย" },
-                                    { code: "en", label: "English" },
-                                    { code: "zh", label: "中文" },
-                                    { code: "ja", label: "日本語" },
-                                ].map(({ code, label }) => (jsxRuntime.jsxs("button", { onClick: () => handleLanguageChange(code), 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: [jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }), organization?.language === code && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, code))) }))] })), profileHref && (jsxRuntime.jsxs("button", { onClick: handleProfile, 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: [jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27" })] })), showSelectOrganization && (jsxRuntime.jsxs("button", { onClick: handleSelectOrganization, 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: [jsxRuntime.jsx(lucideReact.Building2, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E18\u0E38\u0E23\u0E01\u0E34\u0E08" })] })), visibleSystemLinks.length > 0 && (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
-                                    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: [jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showAppsMenu ? "rotate-180" : ""}` })] }), showAppsMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: visibleSystemLinks.map(link => (jsxRuntime.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 ?? jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: link.label }), link.active && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, `${link.label}:${link.href}`))) }))] })), helpAvailable && (jsxRuntime.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: [jsxRuntime.jsx(lucideReact.CircleHelp, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" })] })), jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A..." })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(lucideReact.LogOut, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })] })) })] })] })) : null;
-    if (variant === "workspace") {
-        return (jsxRuntime.jsx("div", { className: "mt-3.5 border-t border-sidebar-border pt-3", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.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: [jsxRuntime.jsxs(erpTheme.Avatar, { className: "size-[34px] shrink-0 rounded-full border-[3px] border-sidebar-accent", children: [user.avatar ? (jsxRuntime.jsx(erpTheme.AvatarImage, { src: user.avatar, alt: user.name })) : null, jsxRuntime.jsx(erpTheme.AvatarFallback, { className: "rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground", children: getInitials(user.name) })] }), jsxRuntime.jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [jsxRuntime.jsx("strong", { className: "truncate text-[13px] font-semibold", title: user.name, children: user.name }), jsxRuntime.jsx("small", { className: "truncate text-[11px] text-muted-foreground", title: user.email, children: user.email })] }), jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "size-3.5 shrink-0 text-muted-foreground" })] }), typeof window !== "undefined" &&
-                        reactDom.createPortal(dropdownContent, document.body)] }) }));
-    }
-    return (jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { ref: buttonRef, onClick: () => setIsOpen(!isOpen), className: "flex w-full items-center gap-2 p-2 rounded-md transition-colors", children: [jsxRuntime.jsxs(erpTheme.Avatar, { className: "h-8 w-8 rounded-lg", children: [user.avatar ? (jsxRuntime.jsx(erpTheme.AvatarImage, { src: user.avatar, alt: user.name })) : null, jsxRuntime.jsx(erpTheme.AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground w-8 h-8", children: getInitials(user.name) })] }), jsxRuntime.jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [jsxRuntime.jsx("span", { className: "truncate font-medium", title: user.name, children: user.name }), jsxRuntime.jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", title: user.email, children: user.email })] }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `ml-auto size-4 transition-transform ${isOpen ? "rotate-180" : ""}` })] }), typeof window !== "undefined" &&
-                    reactDom.createPortal(dropdownContent, document.body)] }) }));
-}
-
 /**
- * Plan feature keys (billable entitlements). Mirror of platform-apis plan.go.
+ * The caller's roles in the current organisation, as platform-api answers
+ * GET /organizations/:id/my-roles, and how the user card words them.
  *
- * This lives in the shell because every app gates on the same keys, and five
- * private copies of the same list drift: the app-switcher list did exactly
- * that before it moved here.
+ * No runtime imports: the tests run this file in Node as it is.
  */
-const PLAN_FEATURES = {
-    ORG_CHART: "org_chart",
-    APPROVAL_WORKFLOW: "approval_workflow",
-    API_ACCESS: "api_access",
-    SSO: "sso",
-    BASIC_ACCOUNTING_HR: "basic_accounting_hr",
-    MODULE_PLATFORM: "module.platform",
-    MODULE_HR: "module.hr",
-    MODULE_ACCOUNTING: "module.accounting",
-    MODULE_SALES: "module.sales",
-    MODULE_PURCHASING: "module.purchasing",
-    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",
-};
-/** 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,
-];
+/** The owner's chip. Ownership is a flag, not a role. */
+const OWNER_CHIP = "เจ้าของ";
+/** How many role names the card spells out before counting the rest. */
+const CARD_ROLE_LIMIT = 2;
+const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 /**
- * 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.
+ * The answer, checked. Anything that is not the shape the card needs — an
+ * older API, a proxy's error page, another organisation's answer — is null,
+ * and the card shows no role line.
  */
-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 ||
-        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;
+function parseMyRoles(payload, organizationId) {
+    if (!isRecord(payload))
+        return null;
+    // Envelope { success, data } or the bare data.
+    const data = isRecord(payload.data) ? payload.data : payload;
+    if (!Array.isArray(data.roles))
+        return null;
+    if (typeof data.organization_id === "string" && data.organization_id !== organizationId) {
+        return null;
     }
-    if (feature === PLAN_FEATURES.BASIC_ACCOUNTING_HR &&
-        features.includes(PLAN_FEATURES.MODULE_HR) &&
-        features.includes(PLAN_FEATURES.MODULE_ACCOUNTING)) {
-        return true;
+    const roles = [];
+    const seen = new Set();
+    for (const r of data.roles) {
+        if (!isRecord(r))
+            continue;
+        const name = typeof r.name_th === "string" ? r.name_th.trim() : "";
+        const key = typeof r.key === "string" ? r.key : "";
+        // A role with no name is left out, never shown by its key.
+        if (!name || seen.has(name))
+            continue;
+        seen.add(name);
+        roles.push({
+            key,
+            name_th: name,
+            app: typeof r.app === "string" ? r.app : "",
+            kind: typeof r.kind === "string" ? r.kind : "",
+        });
     }
-    return false;
+    return { organizationId, isOwner: data.is_owner === true, roles };
 }
-
-function normaliseBase(value, fallback) {
-    return (value ?? fallback).replace(/\/$/, "");
+/** The card names the first two roles and counts the rest. */
+function cardRoleLine(roles, limit = CARD_ROLE_LIMIT) {
+    const names = roles.map(r => r.name_th);
+    return { shown: names.slice(0, limit), more: Math.max(0, names.length - limit) };
 }
-/**
- * One list, in display order, for the whole suite.
- *
- * It used to be copied into every app's own nav-user.tsx, which is how Invenx
- * shipped without a link to Plannex: five copies, one of them edited by hand.
- * Adding the sixth app is now a change here plus a version bump.
- */
-const APPS = [
-    {
-        id: "platform",
-        label: "แพลตฟอร์ม",
-        icon: jsxRuntime.jsx(lucideReact.Building2, { className: "h-4 w-4 shrink-0" }),
-        features: null,
-        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_PLATFORM_URL, "https://platform.antniti.com"),
-    },
-    {
-        id: "accounx",
-        label: "Accounx",
-        icon: jsxRuntime.jsx(lucideReact.Calculator, { className: "h-4 w-4 shrink-0" }),
-        features: [PLAN_FEATURES.MODULE_ACCOUNTING],
-        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_ACCOUNTING_URL, "https://accounx.antniti.com"),
-    },
-    {
-        id: "invenx",
-        label: "Invenx",
-        icon: jsxRuntime.jsx(lucideReact.Warehouse, { className: "h-4 w-4 shrink-0" }),
-        features: [PLAN_FEATURES.MODULE_INVENTORY],
-        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_INVENX_URL, "https://invenx.antniti.com"),
-    },
-    {
-        id: "plannex",
-        label: "Plannex",
-        icon: jsxRuntime.jsx(lucideReact.FolderKanban, { className: "h-4 w-4 shrink-0" }),
-        // 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: jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4 shrink-0" }),
-        features: [PLAN_FEATURES.MODULE_HR],
-        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_HR_URL, "https://peoplx.antniti.com"),
-    },
-];
-/**
- * Builds the cross-app link list for <NavUser systemLinks>.
- *
- * The current app is always present even when the org's plan no longer covers
- * it — the user is looking at it, so hiding the link would only make the menu
- * 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.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.
-        href: app.id === activeApp ? `/${orgCode}` : `${app.baseUrl()}/${orgCode}`,
-        ...(app.id === activeApp ? { active: true } : {}),
-    }));
+/** Everything, for the tooltip: "เจ้าของ · ผู้ดูแลสูงสุด · พนักงานทั่วไป". */
+function roleSummary(my) {
+    return [...(my.isOwner ? [OWNER_CHIP] : []), ...my.roles.map(r => r.name_th)].join(" · ");
+}
+/** Whether there is anything to show at all. */
+function hasRoleLine(my) {
+    return !!my && (my.isOwner || my.roles.length > 0);
 }
 
-// Helper function to check if pathname matches a URL pattern
-// This prevents false matches like /reports/sales matching /sales
-// Handles paths with or without [code] prefix
-function isPathActive(pathname, url) {
-    // Exact match
-    if (pathname === url) {
-        return true;
+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;
     }
-    // Check if pathname starts with url + "/" to ensure exact segment matching
-    // This prevents /reports/sales from matching /sales
-    // Example: /org123/reports/sales should NOT match /org123/sales
-    // But /org123/sales/overview SHOULD match /org123/sales
-    if (pathname.startsWith(url + "/")) {
-        return true;
+    if (!inFlightTokenPromise) {
+        inFlightTokenPromise = readSessionToken()
+            .then(token => {
+            cachedToken = token;
+            cachedAt = Date.now();
+            return token;
+        })
+            .finally(() => {
+            inFlightTokenPromise = null;
+        });
     }
-    return false;
-}
+    return inFlightTokenPromise;
+};
+const clearAccessTokenCache = () => {
+    cachedToken = null;
+    cachedAt = 0;
+};
 
-/** "/O1/" and "/O1" are the same page; a query string never is. */
-function samePage(pathname, url) {
-    if (url.includes("?"))
-        return false;
-    const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
-    return strip(pathname) === strip(url);
-}
-function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, chrome = "brand", highlightActiveModule = false, }) {
-    const workspace = chrome === "workspace";
-    const params = navigation.useParams();
-    const pathname = navigation.usePathname();
-    const { setOpen } = useSidebar();
-    const handleNavLinkClick = () => {
-        if (closeOnNavigation)
-            setOpen(false);
-    };
-    const code = orgCode ?? params?.code;
-    // Which module (and sub-item) the current page belongs to.
-    const states = items.map(item => {
-        const itemUrl = buildUrlWithCode(code, item.url);
-        // Most specific (longest) matching sub-item URL so only one link is active.
-        const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
-            const subItemUrl = buildUrlWithCode(code, subItem.url);
-            const matches = isPathActive(pathname, subItemUrl) ||
-                isPathActive(pathname, subItem.url);
-            const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                isPathActive(pathname, subPage.url));
-            if (!matches && !subPageMatches)
-                return best;
-            const candidateUrl = subItemUrl;
-            if (!best)
-                return candidateUrl;
-            return candidateUrl.length > best.length ? candidateUrl : best;
-        }, null) ?? null;
-        const hasActiveSubItem = !!activeSubItemUrl ||
-            !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                isPathActive(pathname, subPage.url)));
-        // Parent only active when path matches its URL exactly AND no child
-        // is active (so parent+child don't both light up).
-        const isItemActive = (highlightActiveModule && !item.subModules?.length && !!item.isActive) ||
-            ((workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
-                !hasActiveSubItem);
-        return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
-    });
-    // A group opens when its page becomes current and otherwise stays as the
-    // user left it. defaultOpen alone decided once, on the first render — and
-    // on a direct load the sub-items arrive after permissions do, so the group
-    // holding the current page stayed shut.
-    const activeKey = items
-        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
-        .map(item => item.id)
-        .join(",");
-    const [openIds, setOpenIds] = React__namespace.useState(() => new Set(activeKey ? activeKey.split(",") : []));
-    React__namespace.useEffect(() => {
-        if (!activeKey)
-            return;
-        setOpenIds(prev => {
-            const ids = activeKey.split(",");
-            if (ids.every(id => prev.has(id)))
-                return prev;
-            const next = new Set(prev);
-            ids.forEach(id => next.add(id));
-            return next;
+class ApiError extends Error {
+    constructor(message, options) {
+        super(message);
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
         });
-    }, [activeKey]);
-    const setItemOpen = (id, open) => setOpenIds(prev => {
-        if (prev.has(id) === open)
-            return prev;
-        const next = new Set(prev);
-        if (open)
-            next.add(id);
-        else
-            next.delete(id);
-        return next;
-    });
-    return (jsxRuntime.jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsxRuntime.jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
-                const groupHeading = workspace &&
-                    item.group &&
-                    item.group !== items[index - 1]?.group ? (jsxRuntime.jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
-                        (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
-                const { itemUrl, activeSubItemUrl, isItemActive } = states[index];
-                const IconComp = item.icon;
-                const workspaceButton = workspace
-                    ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-[13px] " +
-                        (isItemActive
-                            ? "bg-sidebar-accent font-bold text-sidebar-accent-foreground"
-                            : "font-medium text-sidebar-foreground/70")
-                    : "";
-                const icon = workspace && IconComp ? (jsxRuntime.jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
-                const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsxRuntime.jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-[10px] leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
-                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
-                                                workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { id: item.id, children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxRuntime.jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
-                                                    (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: workspace
-                                                ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-[13px] [&_svg]:!size-[17px]"
-                                                : undefined, children: item.subModules.map(subItem => {
-                                                const subItemUrl = buildUrlWithCode(code, subItem.url);
-                                                const isSubItemActive = subItemUrl === activeSubItemUrl;
-                                                const SubIcon = subItem.icon;
-                                                const approvalCount = approvalCounts && subItem.approvalCountKey
-                                                    ? (approvalCounts[subItem.approvalCountKey] ?? 0)
-                                                    : 0;
-                                                if (subItem.isCollapsible &&
-                                                    subItem.subPages &&
-                                                    subItem.subPages.length > 0) {
-                                                    const hasActiveSubPage = subItem.subPages.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)));
-                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || hasActiveSubPage, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive || hasActiveSubPage, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map(subPage => {
-                                                                            const subPageUrl = buildUrlWithCode(code, subPage.url);
-                                                                            const isSubPageActive = isPathActive(pathname, subPageUrl);
-                                                                            const SubPageIcon = subPage.icon;
-                                                                            return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: `font-thai w-full text-sm ${isSubPageActive
-                                                                                        ? "text-sidebar-accent-foreground font-medium"
-                                                                                        : "text-sidebar-foreground"}`, isActive: false, children: jsxRuntime.jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsxRuntime.jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
-                                                                        }) }) })] }) }, subItem.id));
-                                                }
-                                                return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
-                                                            (workspace && isSubItemActive
-                                                                ? " font-semibold"
-                                                                : ""), isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
-                                                                        ? "99+"
-                                                                        : approvalCount }))] }) }) }, subItem.id));
-                                            }) }) }))] }) })] }, item.id));
-            }) }) }));
+        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;
+    }
 }
+const toApiError = (error) => {
+    if (error instanceof ApiError)
+        return error;
+    if (axios.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));
+};
 
-function OrgMark({ logoUrl, size = "md", }) {
-    const [failed, setFailed] = React.useState(false);
-    const box = size === "sm"
-        ? "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background"
-        : size === "header"
-            ? "flex aspect-square size-8 shrink-0 items-center justify-center rounded-[9px] border border-[color:var(--header-mark-border,color-mix(in_oklab,var(--header-fg,currentColor)_28%,transparent))] bg-[var(--header-mark-bg,color-mix(in_oklab,var(--header-fg,currentColor)_10%,transparent))] text-[var(--header-mark-fg,var(--header-fg,currentColor))] overflow-hidden max-sm:size-7"
-            : "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden";
-    const icon = size === "sm" ? "size-3.5 shrink-0" : "size-4";
-    if (logoUrl && !failed) {
-        return (jsxRuntime.jsx("div", { className: erpTheme.cn(box, size === "md" && "bg-white"), children: jsxRuntime.jsx("img", { src: logoUrl, alt: "", className: "size-full object-contain p-0.5", onError: () => setFailed(true) }) }));
+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;
     }
-    return (jsxRuntime.jsx("div", { className: box, children: jsxRuntime.jsx(lucideReact.Building2, { className: icon }) }));
-}
-function OrganizationSwitcher({ activeOrganization, isContextLoading = false, organizations, isLoadingOrgs = false, setOrganizationCookie, registerOrganizationHref = "/register-organization", placement = "sidebar", className, }) {
-    const { isMobile } = useSidebarToggle();
-    const router = navigation.useRouter();
-    const params = navigation.useParams();
-    const [isPending, startTransition] = React.useTransition();
-    const currentCode = params?.code
-        ? Array.isArray(params.code)
-            ? params.code[0]
-            : params.code
-        : undefined;
-    const handleOrganizationChange = (org) => {
-        startTransition(async () => {
-            const orgCode = org.code || String(org.id);
-            // Write storage + cookie before navigation — Layout will re-hydrate
-            // Context on the new URL.
-            try {
-                setOrganizationId(String(org.id));
-                await setOrganizationCookie(org.id);
-            }
-            catch {
-                // ignore: navigation will re-attempt context resolution
-            }
-            if (currentCode) {
-                const currentPath = window.location.pathname;
-                const parts = currentPath.split("/");
-                const decodedParts = parts.map(p => decodeURIComponent(p));
-                const codeIndex = decodedParts.indexOf(currentCode);
-                if (codeIndex !== -1) {
-                    parts[codeIndex] = orgCode;
-                    router.push(parts.join("/"));
-                }
-                else {
-                    router.push(`/${orgCode}`);
-                }
+    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;
+        }
+        if ("quality_check" in node && !isCheckStatus(node.quality_check)) {
+            invalidPath = "quality_check";
+            return;
+        }
+        if ("compare_with_reference" in node &&
+            !isCompareStatus(node.compare_with_reference)) {
+            invalidPath = "compare_with_reference";
+        }
+    });
+    if (invalidPath) {
+        return {
+            valid: false,
+            message: "รูปแบบข้อมูลไม่ถูกต้อง: ฟิลด์ตรวจรับต้องเป็น enum string (quantity/quality: pass|fail, compare: match|mismatch)",
+        };
+    }
+    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 };
+    }
+    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 react.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 {
-                router.push(`/${orgCode}`);
+            else if (value !== undefined && value !== null) {
+                searchParams.append(key, String(value));
             }
         });
-    };
-    const isLoading = isLoadingOrgs || isContextLoading;
-    if (placement === "header") {
-        const face = (interactive) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl, size: "header" }), jsxRuntime.jsxs("span", { className: "min-w-0 text-left", children: [jsxRuntime.jsx("small", { className: "block text-[10px] leading-tight text-[var(--header-fg-muted,currentColor)] max-sm:text-[9px]", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E17\u0E35\u0E48\u0E01\u0E33\u0E25\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19" }), isLoading ? (jsxRuntime.jsx(erpTheme.Skeleton, { className: "mt-1 h-3.5 w-28" })) : (jsxRuntime.jsx("strong", { className: "block max-w-[220px] truncate text-xs font-semibold text-[var(--header-fg,currentColor)] max-sm:max-w-[140px] max-sm:text-[11px]", children: activeOrganization?.name || "เลือกองค์กร" }))] }), interactive ? (isPending ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "ml-1 size-3.5 shrink-0 animate-spin text-[var(--header-fg-muted,currentColor)]" })) : (jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-1 size-3.5 shrink-0 text-[var(--header-fg-muted,currentColor)]" }))) : null] }));
-        const faceClass = erpTheme.cn("flex items-center gap-2.5 rounded-lg py-1.5 max-sm:gap-2", className);
-        if (isLoading || organizations.length <= 1) {
-            return jsxRuntime.jsx("div", { className: faceClass, children: face(false) });
+        return searchParams.toString();
+    },
+});
+instance.interceptors.request.use(async (config) => {
+    if (!config.headers) {
+        config.headers = new axios.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);
         }
-        return (jsxRuntime.jsxs(erpTheme.DropdownMenu, { children: [jsxRuntime.jsx(erpTheme.DropdownMenuTrigger, { className: erpTheme.cn(faceClass, "px-1.5 outline-none transition-colors hover:bg-[var(--header-hover,var(--accent))] focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted,var(--ring))] data-[state=open]:bg-[var(--header-hover,var(--accent))]"), "aria-label": "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23", children: face(true) }), jsxRuntime.jsxs(erpTheme.DropdownMenuContent, { className: "min-w-64 rounded-lg", align: "end", side: "bottom", sideOffset: 6, children: [jsxRuntime.jsx(erpTheme.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: erpTheme.cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) && "bg-accent"), children: [jsxRuntime.jsx(OrgMark, { logoUrl: org.logoUrl, size: "sm" }), jsxRuntime.jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsxRuntime.jsx(erpTheme.DropdownMenuSeparator, {}), jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsxRuntime.jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) }), jsxRuntime.jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }));
+        await redirectToLogout();
+        return Promise.reject(toApiError(error));
     }
-    if (isLoading) {
-        return (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsxRuntime.jsx(erpTheme.Skeleton, { className: "size-8 rounded-lg" }), jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-4 w-24" })] }) }) }));
+    // 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"));
+        }
     }
-    if (organizations.length <= 1) {
-        return (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsxRuntime.jsx("span", { className: "truncate font-semibold text-sm min-w-0 flex-1", children: activeOrganization?.name || "ไม่มีองค์กร" })] }) }) }));
+    return Promise.reject(toApiError(error));
+});
+
+/**
+ * Where platform-api is, for the calls the shell itself makes to it (the
+ * help channel, the user card's roles). Every app already calls it with the
+ * user's token and the organisation header, and its CORS admits every app.
+ */
+const DEFAULT_PLATFORM_API_URL = "https://platform-api.antniti.com/api/v1";
+function platformApiBase(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 (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs(erpTheme.DropdownMenu, { children: [jsxRuntime.jsx(erpTheme.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsxRuntime.jsx("span", { className: "truncate font-semibold text-sm flex-1 min-w-0 text-left", children: activeOrganization?.name || "เลือกองค์กร" }), isPending ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "ml-auto size-4 animate-spin" })) : (jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-auto size-4" }))] }) }), jsxRuntime.jsxs(erpTheme.DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [jsxRuntime.jsx(erpTheme.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: erpTheme.cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) &&
-                                    "bg-accent"), children: [jsxRuntime.jsx(OrgMark, { logoUrl: org.logoUrl, size: "sm" }), jsxRuntime.jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsxRuntime.jsx(erpTheme.DropdownMenuSeparator, {}), jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsxRuntime.jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) }), jsxRuntime.jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }) }) }));
+    return DEFAULT_PLATFORM_API_URL;
 }
 
-function SidebarHeader({ children, className }) {
-    return jsxRuntime.jsx("div", { className: erpTheme.cn("px-2 py-3", className), children: children });
-}
+/**
+ * This package's version, attached to help messages so the back office can
+ * tell which shell a report came from. Keep in step with package.json.
+ */
+const SHELL_VERSION = "0.1.53";
 
-function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, closeOnNavigation = false, highlightActiveModule = false, header, footer, bottom, chrome = "brand", className, }) {
-    const { open } = useSidebar();
-    const modulesWithActiveState = React__namespace.useMemo(() => modules.map(m => ({
-        ...m,
-        isActive: m.id === activeModule,
-    })), [modules, activeModule]);
-    if (!open)
-        return null;
-    if (chrome === "workspace") {
-        return (jsxRuntime.jsxs("div", { className: erpTheme.cn("flex h-screen w-[244px] shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground", 
-            // As a drawer (≤1024px) it floats over the page and needs the lift.
-            "max-[1024px]:shadow-2xl", className), children: [header ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxRuntime.jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace", highlightActiveModule: highlightActiveModule }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
-    }
-    return (jsxRuntime.jsxs("div", { className: erpTheme.cn("bg-sidebar shrink-0 flex flex-col overflow-hidden shadow-2xl h-screen w-[var(--sidebar-width-mobile)]", "!w-76 xl:rounded-b-4xl xl:rounded-tl-4xl xl:m-5 xl:h-[calc(100vh-2.5rem)]", className), children: [jsxRuntime.jsx(SidebarHeader, { children: header }), jsxRuntime.jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), jsxRuntime.jsx(SidebarFooter, { className: "pl-2 pr-2", children: footer })] }));
-}
-
-/**
- * Header ink as CSS variables. Header-borne pieces — breadcrumb, sidebar
- * trigger, the org switcher, the app's own page title — read these, with
- * white as the fallback, so the brand chrome looks exactly as before.
- */
-const WORKSPACE_HEADER_VARS = {
-    "--header-fg": "#fff",
-    "--header-fg-muted": "rgb(255 255 255 / 0.78)",
-    "--header-hover": "rgb(255 255 255 / 0.12)",
-    "--header-title-px": "0px",
-    "--header-title-py": "0px",
-};
-const WORKSPACE_LIGHT_HEADER_VARS = {
-    "--header-fg": "var(--foreground)",
-    "--header-fg-muted": "var(--muted-foreground)",
-    "--header-hover": "var(--accent)",
-    "--header-mark-bg": "var(--accent)",
-    "--header-mark-fg": "var(--primary)",
-    "--header-mark-border": "transparent",
-    "--header-title-px": "0px",
-    "--header-title-py": "0px",
-};
-
-/**
- * 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 HelpButton({ className }) {
-    return (jsxRuntime.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: jsxRuntime.jsx(lucideReact.CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }));
-}
-
-/**
- * This package's version, attached to help messages so the back office can
- * tell which shell a report came from. Keep in step with package.json.
- */
-const SHELL_VERSION = "0.1.52";
-
-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 {
+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;
     }
 }
@@ -1601,270 +1434,632 @@ function describeAttached(app, ctx, email) {
         .join(" · ");
 }
 
-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;
-        });
-    }
-    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;
-    }
+const myRolesQueryKey = (organizationId) => ["erp-shell", "my-roles", organizationId];
+// Only for a host that renders NavUser outside a QueryClientProvider: the
+// card still works there instead of throwing.
+let fallbackClient = null;
+function useShellQueryClient() {
+    const provided = React.useContext(reactQuery.QueryClientContext);
+    if (provided)
+        return provided;
+    fallbackClient ?? (fallbackClient = new reactQuery.QueryClient());
+    return fallbackClient;
+}
+function subscribeStorage(onChange) {
+    window.addEventListener("storage", onChange);
+    return () => window.removeEventListener("storage", onChange);
+}
+/**
+ * The organisation the API client sends (X-Organization-ID). Null while
+ * server-rendering and hydrating, so the first client render matches the
+ * server's.
+ */
+function useStoredOrganizationId() {
+    return React.useSyncExternalStore(subscribeStorage, getOrganizationId, () => null);
+}
+/**
+ * The signed-in person's roles in an organisation, from platform-api
+ * (GET /organizations/:id/my-roles). Cached per organisation; a different
+ * organisation is a different query. A failure, or an API too old to have
+ * the route, leaves `data` empty — the caller shows nothing.
+ */
+function useMyRoles(organizationId, enabled = true) {
+    const orgId = organizationId !== null &&
+        organizationId !== undefined &&
+        String(organizationId).trim() !== ""
+        ? String(organizationId).trim()
+        : null;
+    const client = useShellQueryClient();
+    return reactQuery.useQuery({
+        queryKey: myRolesQueryKey(orgId),
+        queryFn: async ({ signal }) => {
+            const base = platformApiBase(detectHelpApp());
+            const res = await instance.get(`${base}/organizations/${encodeURIComponent(orgId)}/my-roles`, { signal });
+            return parseMyRoles(res.data, orgId);
+        },
+        enabled: enabled && orgId !== null,
+        staleTime: 60000,
+        gcTime: 30 * 60000,
+        // A refusal or a missing route will not be different a second later;
+        // the next focus or organisation change asks again.
+        retry: false,
+        refetchOnWindowFocus: true,
+    }, client);
 }
-const toApiError = (error) => {
-    if (error instanceof ApiError)
-        return error;
-    if (axios.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 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;
+/** The owner's chip: the app's accent, tinted. */
+function OwnerChip({ size = "card" }) {
+    return (jsxRuntime.jsx("span", { className: size === "menu"
+            ? "inline-flex shrink-0 items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary"
+            : "inline-flex shrink-0 items-center rounded-full bg-primary/10 px-1.5 text-[11px] font-semibold leading-[17px] text-primary", children: OWNER_CHIP }));
+}
+/**
+ * The card's role line: the owner's chip, then two role names and a count of
+ * the rest. Wraps between names rather than inside one, and truncates a name
+ * that is wider than the card on its own; the tooltip has everything.
+ */
+function CardRoles({ my, className }) {
+    const { shown, more } = cardRoleLine(my.roles);
+    return (jsxRuntime.jsxs("span", { className: `flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5 ${className}`, title: roleSummary(my), children: [my.isOwner ? jsxRuntime.jsx(OwnerChip, {}) : null, shown.map((name, i) => {
+                const last = i === shown.length - 1;
+                return (jsxRuntime.jsxs("span", { className: "flex min-w-0 max-w-full items-baseline", children: [jsxRuntime.jsx("span", { className: "truncate", children: name }), !last ? (jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0 pl-1 opacity-60", children: "\u00B7" })) : null, last && more > 0 ? (jsxRuntime.jsxs("span", { className: "shrink-0 pl-1 opacity-70", children: ["+", more] })) : null] }, name));
+            })] }));
+}
+/** Every role in full, for the menu. */
+function MenuRoles({ my }) {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [my.isOwner ? jsxRuntime.jsx(OwnerChip, { size: "menu" }) : null, my.roles.map(r => (jsxRuntime.jsx("span", { className: "rounded-md border border-sidebar-border px-2 py-0.5 text-xs text-sidebar-foreground", children: r.name_th }, r.key || r.name_th)))] }));
+}
+function isExternalHref(href) {
+    return /^https?:\/\//i.test(href) || href.startsWith("//");
+}
+function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref = "/select-organization", signInRedirectHref = "/auth/signin", systemLinks, showSelectOrganization = true, showLanguageSwitch = true, variant = "brand", showRoles, organizationId, } = {}) {
+    const { data: session, status } = react.useSession();
+    const storedOrganizationId = useStoredOrganizationId();
+    const rolesOrganizationId = organizationId !== null &&
+        organizationId !== undefined &&
+        String(organizationId).trim() !== ""
+        ? organizationId
+        : storedOrganizationId;
+    const rolesOn = (showRoles ?? showSelectOrganization) && status === "authenticated";
+    const { data: rolesData, fetchStatus: rolesFetchStatus } = useMyRoles(rolesOrganizationId, rolesOn);
+    const myRoles = rolesOn && hasRoleLine(rolesData) ? rolesData : null;
+    // First load only: hold the line's place so the card does not jump when
+    // the roles arrive. A failure drops it.
+    const rolesLoading = rolesOn && !!rolesOrganizationId && rolesData === undefined && rolesFetchStatus === "fetching";
+    // With a role line the card is three lines or more: the chevron moves up
+    // to the name so the lines under it get the card's full width.
+    const cardTall = !!myRoles || rolesLoading;
+    const router = navigation.useRouter();
+    const { theme, setTheme } = nextThemes.useTheme();
+    const [isSigningOut, setIsSigningOut] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [showThemeMenu, setShowThemeMenu] = React.useState(false);
+    const [showLanguageMenu, setShowLanguageMenu] = React.useState(false);
+    const [showAppsMenu, setShowAppsMenu] = React.useState(false);
+    const buttonRef = React.useRef(null);
+    const [position, setPosition] = React.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 || "ผู้ใช้",
+            email: session.user.email || "",
+            // avatarSrc first: the NextAuth session carries no picture unless the
+            // host app deliberately puts one in the JWT, so relying on
+            // session.user.image alone left every user on their initials forever.
+            avatar: avatarSrc || session.user.image || undefined,
         }
-        if ("quality_check" in node && !isCheckStatus(node.quality_check)) {
-            invalidPath = "quality_check";
-            return;
+        : null;
+    const getInitials = (name) => {
+        if (!name)
+            return "U";
+        return name
+            .split(" ")
+            .map(n => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    const handleSignOut = async () => {
+        setIsSigningOut(true);
+        try {
+            await react.signOut({ callbackUrl: signInRedirectHref, redirect: true });
         }
-        if ("compare_with_reference" in node &&
-            !isCompareStatus(node.compare_with_reference)) {
-            invalidPath = "compare_with_reference";
+        catch (error) {
+            console.error("Sign out error:", error);
+            window.location.href = signInRedirectHref;
         }
-    });
-    if (invalidPath) {
-        return {
-            valid: false,
-            message: "รูปแบบข้อมูลไม่ถูกต้อง: ฟิลด์ตรวจรับต้องเป็น enum string (quantity/quality: pass|fail, compare: match|mismatch)",
-        };
-    }
-    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 };
-    }
-    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)
+        finally {
+            setIsSigningOut(false);
+        }
+    };
+    const handleSelectOrganization = () => {
+        setIsOpen(false);
+        router.push(selectOrganizationHref);
+    };
+    const handleProfile = () => {
+        setIsOpen(false);
+        if (profileHref)
+            router.push(profileHref);
+    };
+    const handleSystemLink = (href) => {
+        setIsOpen(false);
+        if (isExternalHref(href)) {
+            window.location.assign(href);
+            return;
+        }
+        router.push(href);
+    };
+    const handleThemeChange = (newTheme) => {
+        setTheme(newTheme);
+        setShowThemeMenu(false);
+    };
+    const handleLanguageChange = (language) => {
+        console.log("Change language to:", language);
+        setShowLanguageMenu(false);
+    };
+    React.useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setPosition({ top: rect.bottom, left: rect.right + 8 });
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (buttonRef.current &&
+                !buttonRef.current.contains(event.target) &&
+                !event.target.closest('[data-dropdown="nav-user"]')) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    if (status === "loading") {
+        return (jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md", children: [jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-lg bg-sidebar-accent animate-pulse" }), jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [jsxRuntime.jsx("div", { className: "h-4 w-24 bg-sidebar-accent rounded animate-pulse" }), jsxRuntime.jsx("div", { className: "h-3 w-32 bg-sidebar-accent rounded animate-pulse" })] })] }) }));
+    }
+    if (!user)
         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 react.signOut({ callbackUrl: "/auth/signin" });
+    const visibleSystemLinks = (systemLinks ?? []).filter(link => link.href && link.label);
+    const dropdownContent = isOpen ? (jsxRuntime.jsxs("div", { "data-dropdown": "nav-user", className: "fixed w-52 sm:w-60 md:w-80 rounded-lg bg-sidebar border border-sidebar-border shadow-xl z-50 overflow-hidden\n                 -translate-x-[65%] -translate-y-[110%] sm:translate-x-0 sm:-translate-y-full", style: { top: `${position.top}px`, left: `${position.left}px` }, children: [organization && (jsxRuntime.jsx("div", { className: "p-4 border-b border-sidebar-border bg-sidebar-accent/30", children: jsxRuntime.jsxs("div", { className: `flex gap-3 ${myRoles ? "items-start" : "items-center"}`, children: [organization.logoUrl ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        jsxRuntime.jsx("img", { src: organization.logoUrl, alt: organization.name ?? "โลโก้บริษัท", className: "h-8 w-8 flex-shrink-0 rounded object-contain bg-white", 
+                            // A dead logo URL must not leave a broken-image glyph in the
+                            // sidebar; drop back to the generic icon's empty slot.
+                            onError: e => {
+                                e.currentTarget.style.display = "none";
+                            } })) : (jsxRuntime.jsx(lucideReact.Building2, { className: "h-5 w-5 text-sidebar-foreground/70 flex-shrink-0" })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "font-medium text-sm sm:truncate", children: organization.name }), organization.description && (jsxRuntime.jsx("div", { className: "text-xs text-sidebar-foreground/70 truncate mt-0.5", children: organization.description })), myRoles ? (jsxRuntime.jsx("div", { className: "mt-2.5", children: jsxRuntime.jsx(MenuRoles, { my: myRoles }) })) : null] })] }) })), !organization && myRoles ? (jsxRuntime.jsx("div", { className: "p-4 border-b border-sidebar-border bg-sidebar-accent/30", children: jsxRuntime.jsx(MenuRoles, { my: myRoles }) })) : null, jsxRuntime.jsxs("div", { className: "p-2", children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
+                                    setShowThemeMenu(!showThemeMenu);
+                                    setShowLanguageMenu(false);
+                                    setShowAppsMenu(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: [jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E18\u0E35\u0E21" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showThemeMenu ? "rotate-180" : ""}` })] }), showThemeMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: [
+                                    { key: "light", label: "สว่าง", Icon: lucideReact.Sun },
+                                    { key: "dark", label: "มืด", Icon: lucideReact.Moon },
+                                    { key: "system", label: "ตามระบบ", Icon: lucideReact.Monitor },
+                                ].map(({ key, label, Icon }) => (jsxRuntime.jsxs("button", { onClick: () => handleThemeChange(key), 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: [jsxRuntime.jsx(Icon, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }), theme === key && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, key))) }))] }), showLanguageSwitch && (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
+                                    setShowLanguageMenu(!showLanguageMenu);
+                                    setShowThemeMenu(false);
+                                    setShowAppsMenu(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: [jsxRuntime.jsx(lucideReact.Globe, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E20\u0E32\u0E29\u0E32" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showLanguageMenu ? "rotate-180" : ""}` })] }), showLanguageMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: [
+                                    { code: "th", label: "ไทย" },
+                                    { code: "en", label: "English" },
+                                    { code: "zh", label: "中文" },
+                                    { code: "ja", label: "日本語" },
+                                ].map(({ code, label }) => (jsxRuntime.jsxs("button", { onClick: () => handleLanguageChange(code), 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: [jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }), organization?.language === code && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, code))) }))] })), profileHref && (jsxRuntime.jsxs("button", { onClick: handleProfile, 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: [jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27" })] })), showSelectOrganization && (jsxRuntime.jsxs("button", { onClick: handleSelectOrganization, 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: [jsxRuntime.jsx(lucideReact.Building2, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E18\u0E38\u0E23\u0E01\u0E34\u0E08" })] })), visibleSystemLinks.length > 0 && (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { onClick: () => {
+                                    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: [jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E41\u0E2D\u0E1B\u0E1E\u0E25\u0E34\u0E40\u0E04\u0E0A\u0E31\u0E19" }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `h-4 w-4 transition-transform ${showAppsMenu ? "rotate-180" : ""}` })] }), showAppsMenu && (jsxRuntime.jsx("div", { className: "mt-1 ml-4 space-y-1", children: visibleSystemLinks.map(link => (jsxRuntime.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 ?? jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: link.label }), link.active && (jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }))] }, `${link.label}:${link.href}`))) }))] })), helpAvailable && (jsxRuntime.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: [jsxRuntime.jsx(lucideReact.CircleHelp, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" })] })), jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A..." })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(lucideReact.LogOut, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 text-left", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })] })) })] })] })) : null;
+    if (variant === "workspace") {
+        return (jsxRuntime.jsx("div", { className: "mt-3.5 border-t border-sidebar-border pt-3", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { ref: buttonRef, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, className: `relative flex w-full 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 ${cardTall ? "items-start" : "items-center"}`, children: [jsxRuntime.jsxs(erpTheme.Avatar, { className: "size-[34px] shrink-0 rounded-full border-[3px] border-sidebar-accent", children: [user.avatar ? (jsxRuntime.jsx(erpTheme.AvatarImage, { src: user.avatar, alt: user.name })) : null, jsxRuntime.jsx(erpTheme.AvatarFallback, { className: "rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground", children: getInitials(user.name) })] }), jsxRuntime.jsxs("span", { className: `grid min-w-0 flex-1 leading-tight ${cardTall ? "gap-0.5" : ""}`, children: [jsxRuntime.jsx("strong", { className: `truncate text-[13px] font-semibold ${cardTall ? "pr-5" : ""}`, title: user.name, children: user.name }), myRoles ? (jsxRuntime.jsx(CardRoles, { my: myRoles, className: "text-[12px] font-medium leading-[17px] text-sidebar-foreground/80" })) : rolesLoading ? (jsxRuntime.jsx("span", { className: "my-[3px] block h-[11px] w-20 animate-pulse rounded bg-sidebar-accent" })) : null, jsxRuntime.jsx("small", { className: "truncate text-[11px] text-muted-foreground", title: user.email, children: user.email })] }), jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: cardTall
+                                    ? "absolute right-3 top-[9px] size-3.5 text-muted-foreground"
+                                    : "size-3.5 shrink-0 text-muted-foreground" })] }), typeof window !== "undefined" &&
+                        reactDom.createPortal(dropdownContent, document.body)] }) }));
+    }
+    return (jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { ref: buttonRef, onClick: () => setIsOpen(!isOpen), className: `relative flex w-full gap-2 p-2 rounded-md transition-colors ${cardTall ? "items-start" : "items-center"}`, children: [jsxRuntime.jsxs(erpTheme.Avatar, { className: "h-8 w-8 shrink-0 rounded-lg", children: [user.avatar ? (jsxRuntime.jsx(erpTheme.AvatarImage, { src: user.avatar, alt: user.name })) : null, jsxRuntime.jsx(erpTheme.AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground w-8 h-8", children: getInitials(user.name) })] }), jsxRuntime.jsxs("div", { className: `grid min-w-0 flex-1 text-left text-sm leading-tight ${cardTall ? "gap-0.5" : ""}`, children: [jsxRuntime.jsx("span", { className: `truncate font-medium ${cardTall ? "pr-6" : ""}`, title: user.name, children: user.name }), myRoles ? (jsxRuntime.jsx(CardRoles, { my: myRoles, className: "text-xs font-medium text-sidebar-foreground/85" })) : rolesLoading ? (jsxRuntime.jsx("span", { className: "my-0.5 block h-3 w-24 animate-pulse rounded bg-sidebar-accent" })) : null, jsxRuntime.jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", title: user.email, children: user.email })] }), jsxRuntime.jsx(lucideReact.ChevronUp, { className: `size-4 transition-transform ${isOpen ? "rotate-180" : ""} ${cardTall ? "absolute right-2 top-2.5" : "ml-auto shrink-0"}` })] }), typeof window !== "undefined" &&
+                    reactDom.createPortal(dropdownContent, document.body)] }) }));
+}
+
+/**
+ * Plan feature keys (billable entitlements). Mirror of platform-apis plan.go.
+ *
+ * This lives in the shell because every app gates on the same keys, and five
+ * private copies of the same list drift: the app-switcher list did exactly
+ * that before it moved here.
+ */
+const PLAN_FEATURES = {
+    ORG_CHART: "org_chart",
+    APPROVAL_WORKFLOW: "approval_workflow",
+    API_ACCESS: "api_access",
+    SSO: "sso",
+    BASIC_ACCOUNTING_HR: "basic_accounting_hr",
+    MODULE_PLATFORM: "module.platform",
+    MODULE_HR: "module.hr",
+    MODULE_ACCOUNTING: "module.accounting",
+    MODULE_SALES: "module.sales",
+    MODULE_PURCHASING: "module.purchasing",
+    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",
 };
-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 axios.AxiosHeaders();
+/** 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 ||
+        ACCOUNTING_SUB_KEYS.includes(feature)) &&
+        features.includes(PLAN_FEATURES.BASIC_ACCOUNTING_HR)) {
+        return true;
     }
-    if (config.data instanceof FormData && config.headers) {
-        delete config.headers["Content-Type"];
+    if (ACCOUNTING_SUB_KEYS.includes(feature) &&
+        features.includes(PLAN_FEATURES.MODULE_ACCOUNTING)) {
+        return true;
     }
-    if (!isBrowser())
-        return config;
-    const token = await getAccessToken(false);
-    if (token) {
-        config.headers.Authorization = `Bearer ${token}`;
+    if (feature === PLAN_FEATURES.BASIC_ACCOUNTING_HR &&
+        features.includes(PLAN_FEATURES.MODULE_HR) &&
+        features.includes(PLAN_FEATURES.MODULE_ACCOUNTING)) {
+        return true;
     }
-    // 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 false;
+}
+
+function normaliseBase(value, fallback) {
+    return (value ?? fallback).replace(/\/$/, "");
+}
+/**
+ * One list, in display order, for the whole suite.
+ *
+ * It used to be copied into every app's own nav-user.tsx, which is how Invenx
+ * shipped without a link to Plannex: five copies, one of them edited by hand.
+ * Adding the sixth app is now a change here plus a version bump.
+ */
+const APPS = [
+    {
+        id: "platform",
+        label: "แพลตฟอร์ม",
+        icon: jsxRuntime.jsx(lucideReact.Building2, { className: "h-4 w-4 shrink-0" }),
+        features: null,
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_PLATFORM_URL, "https://platform.antniti.com"),
+    },
+    {
+        id: "accounx",
+        label: "Accounx",
+        icon: jsxRuntime.jsx(lucideReact.Calculator, { className: "h-4 w-4 shrink-0" }),
+        features: [PLAN_FEATURES.MODULE_ACCOUNTING],
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_ACCOUNTING_URL, "https://accounx.antniti.com"),
+    },
+    {
+        id: "invenx",
+        label: "Invenx",
+        icon: jsxRuntime.jsx(lucideReact.Warehouse, { className: "h-4 w-4 shrink-0" }),
+        features: [PLAN_FEATURES.MODULE_INVENTORY],
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_INVENX_URL, "https://invenx.antniti.com"),
+    },
+    {
+        id: "plannex",
+        label: "Plannex",
+        icon: jsxRuntime.jsx(lucideReact.FolderKanban, { className: "h-4 w-4 shrink-0" }),
+        // 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: jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4 shrink-0" }),
+        features: [PLAN_FEATURES.MODULE_HR],
+        baseUrl: () => normaliseBase(process.env.NEXT_PUBLIC_HR_URL, "https://peoplx.antniti.com"),
+    },
+];
+/**
+ * Builds the cross-app link list for <NavUser systemLinks>.
+ *
+ * The current app is always present even when the org's plan no longer covers
+ * it — the user is looking at it, so hiding the link would only make the menu
+ * 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.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.
+        href: app.id === activeApp ? `/${orgCode}` : `${app.baseUrl()}/${orgCode}`,
+        ...(app.id === activeApp ? { active: true } : {}),
+    }));
+}
+
+// Helper function to check if pathname matches a URL pattern
+// This prevents false matches like /reports/sales matching /sales
+// Handles paths with or without [code] prefix
+function isPathActive(pathname, url) {
+    // Exact match
+    if (pathname === url) {
+        return true;
     }
-    const precheck = runGlobalRequestPrecheck(config);
-    if (!precheck.valid) {
-        throw new ApiError(precheck.message || "Invalid request payload");
+    // Check if pathname starts with url + "/" to ensure exact segment matching
+    // This prevents /reports/sales from matching /sales
+    // Example: /org123/reports/sales should NOT match /org123/sales
+    // But /org123/sales/overview SHOULD match /org123/sales
+    if (pathname.startsWith(url + "/")) {
+        return true;
     }
-    return config;
-});
-let refreshPromise = null;
-const refreshTokenSingleFlight = async () => {
-    if (!refreshPromise) {
-        refreshPromise = getAccessToken(true).finally(() => {
-            refreshPromise = null;
+    return false;
+}
+
+/** "/O1/" and "/O1" are the same page; a query string never is. */
+function samePage(pathname, url) {
+    if (url.includes("?"))
+        return false;
+    const strip = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+    return strip(pathname) === strip(url);
+}
+function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, chrome = "brand", highlightActiveModule = false, }) {
+    const workspace = chrome === "workspace";
+    const params = navigation.useParams();
+    const pathname = navigation.usePathname();
+    const { setOpen } = useSidebar();
+    const handleNavLinkClick = () => {
+        if (closeOnNavigation)
+            setOpen(false);
+    };
+    const code = orgCode ?? params?.code;
+    // Which module (and sub-item) the current page belongs to.
+    const states = items.map(item => {
+        const itemUrl = buildUrlWithCode(code, item.url);
+        // Most specific (longest) matching sub-item URL so only one link is active.
+        const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
+            const subItemUrl = buildUrlWithCode(code, subItem.url);
+            const matches = isPathActive(pathname, subItemUrl) ||
+                isPathActive(pathname, subItem.url);
+            const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                isPathActive(pathname, subPage.url));
+            if (!matches && !subPageMatches)
+                return best;
+            const candidateUrl = subItemUrl;
+            if (!best)
+                return candidateUrl;
+            return candidateUrl.length > best.length ? candidateUrl : best;
+        }, null) ?? null;
+        const hasActiveSubItem = !!activeSubItemUrl ||
+            !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                isPathActive(pathname, subPage.url)));
+        // Parent only active when path matches its URL exactly AND no child
+        // is active (so parent+child don't both light up).
+        const isItemActive = (highlightActiveModule && !item.subModules?.length && !!item.isActive) ||
+            ((workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
+                !hasActiveSubItem);
+        return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
+    });
+    // A group opens when its page becomes current and otherwise stays as the
+    // user left it. defaultOpen alone decided once, on the first render — and
+    // on a direct load the sub-items arrive after permissions do, so the group
+    // holding the current page stayed shut.
+    const activeKey = items
+        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
+        .map(item => item.id)
+        .join(",");
+    const [openIds, setOpenIds] = React__namespace.useState(() => new Set(activeKey ? activeKey.split(",") : []));
+    React__namespace.useEffect(() => {
+        if (!activeKey)
+            return;
+        setOpenIds(prev => {
+            const ids = activeKey.split(",");
+            if (ids.every(id => prev.has(id)))
+                return prev;
+            const next = new Set(prev);
+            ids.forEach(id => next.add(id));
+            return next;
         });
+    }, [activeKey]);
+    const setItemOpen = (id, open) => setOpenIds(prev => {
+        if (prev.has(id) === open)
+            return prev;
+        const next = new Set(prev);
+        if (open)
+            next.add(id);
+        else
+            next.delete(id);
+        return next;
+    });
+    return (jsxRuntime.jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsxRuntime.jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
+                const groupHeading = workspace &&
+                    item.group &&
+                    item.group !== items[index - 1]?.group ? (jsxRuntime.jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
+                        (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
+                const { itemUrl, activeSubItemUrl, isItemActive } = states[index];
+                const IconComp = item.icon;
+                const workspaceButton = workspace
+                    ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-[13px] " +
+                        (isItemActive
+                            ? "bg-sidebar-accent font-bold text-sidebar-accent-foreground"
+                            : "font-medium text-sidebar-foreground/70")
+                    : "";
+                const icon = workspace && IconComp ? (jsxRuntime.jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
+                const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsxRuntime.jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-[10px] leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
+                return (jsxRuntime.jsxs(React__namespace.Fragment, { children: [groupHeading, jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxRuntime.jsxs(SidebarMenuItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
+                                                workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { id: item.id, children: item.titleTh }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxRuntime.jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
+                                                    (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsxRuntime.jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: workspace
+                                                ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-[13px] [&_svg]:!size-[17px]"
+                                                : undefined, children: item.subModules.map(subItem => {
+                                                const subItemUrl = buildUrlWithCode(code, subItem.url);
+                                                const isSubItemActive = subItemUrl === activeSubItemUrl;
+                                                const SubIcon = subItem.icon;
+                                                const approvalCount = approvalCounts && subItem.approvalCountKey
+                                                    ? (approvalCounts[subItem.approvalCountKey] ?? 0)
+                                                    : 0;
+                                                if (subItem.isCollapsible &&
+                                                    subItem.subPages &&
+                                                    subItem.subPages.length > 0) {
+                                                    const hasActiveSubPage = subItem.subPages.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)));
+                                                    return (jsxRuntime.jsx(erpTheme.Collapsible, { asChild: true, defaultOpen: isSubItemActive || hasActiveSubPage, className: "group/sub-collapsible", children: jsxRuntime.jsxs(SidebarMenuSubItem, { children: [jsxRuntime.jsx(erpTheme.CollapsibleTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive || hasActiveSubPage, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsxRuntime.jsx(erpTheme.CollapsibleContent, { children: jsxRuntime.jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map(subPage => {
+                                                                            const subPageUrl = buildUrlWithCode(code, subPage.url);
+                                                                            const isSubPageActive = isPathActive(pathname, subPageUrl);
+                                                                            const SubPageIcon = subPage.icon;
+                                                                            return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: `font-thai w-full text-sm ${isSubPageActive
+                                                                                        ? "text-sidebar-accent-foreground font-medium"
+                                                                                        : "text-sidebar-foreground"}`, isActive: false, children: jsxRuntime.jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsxRuntime.jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
+                                                                        }) }) })] }) }, subItem.id));
+                                                }
+                                                return (jsxRuntime.jsx(SidebarMenuSubItem, { children: jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
+                                                            (workspace && isSubItemActive
+                                                                ? " font-semibold"
+                                                                : ""), isActive: isSubItemActive, children: jsxRuntime.jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsxRuntime.jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsxRuntime.jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsxRuntime.jsx(erpTheme.Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
+                                                                        ? "99+"
+                                                                        : approvalCount }))] }) }) }, subItem.id));
+                                            }) }) }))] }) })] }, item.id));
+            }) }) }));
+}
+
+function OrgMark({ logoUrl, size = "md", }) {
+    const [failed, setFailed] = React.useState(false);
+    const box = size === "sm"
+        ? "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background"
+        : size === "header"
+            ? "flex aspect-square size-8 shrink-0 items-center justify-center rounded-[9px] border border-[color:var(--header-mark-border,color-mix(in_oklab,var(--header-fg,currentColor)_28%,transparent))] bg-[var(--header-mark-bg,color-mix(in_oklab,var(--header-fg,currentColor)_10%,transparent))] text-[var(--header-mark-fg,var(--header-fg,currentColor))] overflow-hidden max-sm:size-7"
+            : "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden";
+    const icon = size === "sm" ? "size-3.5 shrink-0" : "size-4";
+    if (logoUrl && !failed) {
+        return (jsxRuntime.jsx("div", { className: erpTheme.cn(box, size === "md" && "bg-white"), children: jsxRuntime.jsx("img", { src: logoUrl, alt: "", className: "size-full object-contain p-0.5", onError: () => setFailed(true) }) }));
     }
-    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);
+    return (jsxRuntime.jsx("div", { className: box, children: jsxRuntime.jsx(lucideReact.Building2, { className: icon }) }));
+}
+function OrganizationSwitcher({ activeOrganization, isContextLoading = false, organizations, isLoadingOrgs = false, setOrganizationCookie, registerOrganizationHref = "/register-organization", placement = "sidebar", className, }) {
+    const { isMobile } = useSidebarToggle();
+    const router = navigation.useRouter();
+    const params = navigation.useParams();
+    const [isPending, startTransition] = React.useTransition();
+    const currentCode = params?.code
+        ? Array.isArray(params.code)
+            ? params.code[0]
+            : params.code
+        : undefined;
+    const handleOrganizationChange = (org) => {
+        startTransition(async () => {
+            const orgCode = org.code || String(org.id);
+            // Write storage + cookie before navigation — Layout will re-hydrate
+            // Context on the new URL.
+            try {
+                setOrganizationId(String(org.id));
+                await setOrganizationCookie(org.id);
+            }
+            catch {
+                // ignore: navigation will re-attempt context resolution
+            }
+            if (currentCode) {
+                const currentPath = window.location.pathname;
+                const parts = currentPath.split("/");
+                const decodedParts = parts.map(p => decodeURIComponent(p));
+                const codeIndex = decodedParts.indexOf(currentCode);
+                if (codeIndex !== -1) {
+                    parts[codeIndex] = orgCode;
+                    router.push(parts.join("/"));
+                }
+                else {
+                    router.push(`/${orgCode}`);
+                }
+            }
+            else {
+                router.push(`/${orgCode}`);
+            }
+        });
+    };
+    const isLoading = isLoadingOrgs || isContextLoading;
+    if (placement === "header") {
+        const face = (interactive) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl, size: "header" }), jsxRuntime.jsxs("span", { className: "min-w-0 text-left", children: [jsxRuntime.jsx("small", { className: "block text-[10px] leading-tight text-[var(--header-fg-muted,currentColor)] max-sm:text-[9px]", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E17\u0E35\u0E48\u0E01\u0E33\u0E25\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19" }), isLoading ? (jsxRuntime.jsx(erpTheme.Skeleton, { className: "mt-1 h-3.5 w-28" })) : (jsxRuntime.jsx("strong", { className: "block max-w-[220px] truncate text-xs font-semibold text-[var(--header-fg,currentColor)] max-sm:max-w-[140px] max-sm:text-[11px]", children: activeOrganization?.name || "เลือกองค์กร" }))] }), interactive ? (isPending ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "ml-1 size-3.5 shrink-0 animate-spin text-[var(--header-fg-muted,currentColor)]" })) : (jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-1 size-3.5 shrink-0 text-[var(--header-fg-muted,currentColor)]" }))) : null] }));
+        const faceClass = erpTheme.cn("flex items-center gap-2.5 rounded-lg py-1.5 max-sm:gap-2", className);
+        if (isLoading || organizations.length <= 1) {
+            return jsxRuntime.jsx("div", { className: faceClass, children: face(false) });
         }
-        await redirectToLogout();
-        return Promise.reject(toApiError(error));
+        return (jsxRuntime.jsxs(erpTheme.DropdownMenu, { children: [jsxRuntime.jsx(erpTheme.DropdownMenuTrigger, { className: erpTheme.cn(faceClass, "px-1.5 outline-none transition-colors hover:bg-[var(--header-hover,var(--accent))] focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted,var(--ring))] data-[state=open]:bg-[var(--header-hover,var(--accent))]"), "aria-label": "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23", children: face(true) }), jsxRuntime.jsxs(erpTheme.DropdownMenuContent, { className: "min-w-64 rounded-lg", align: "end", side: "bottom", sideOffset: 6, children: [jsxRuntime.jsx(erpTheme.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: erpTheme.cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) && "bg-accent"), children: [jsxRuntime.jsx(OrgMark, { logoUrl: org.logoUrl, size: "sm" }), jsxRuntime.jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsxRuntime.jsx(erpTheme.DropdownMenuSeparator, {}), jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsxRuntime.jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) }), jsxRuntime.jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }));
     }
-    // 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"));
-        }
+    if (isLoading) {
+        return (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsxRuntime.jsx(erpTheme.Skeleton, { className: "size-8 rounded-lg" }), jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-4 w-24" })] }) }) }));
+    }
+    if (organizations.length <= 1) {
+        return (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsxRuntime.jsx("span", { className: "truncate font-semibold text-sm min-w-0 flex-1", children: activeOrganization?.name || "ไม่มีองค์กร" })] }) }) }));
     }
-    return Promise.reject(toApiError(error));
-});
+    return (jsxRuntime.jsx(SidebarMenu, { className: className, children: jsxRuntime.jsx(SidebarMenuItem, { children: jsxRuntime.jsxs(erpTheme.DropdownMenu, { children: [jsxRuntime.jsx(erpTheme.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [jsxRuntime.jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsxRuntime.jsx("span", { className: "truncate font-semibold text-sm flex-1 min-w-0 text-left", children: activeOrganization?.name || "เลือกองค์กร" }), isPending ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "ml-auto size-4 animate-spin" })) : (jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-auto size-4" }))] }) }), jsxRuntime.jsxs(erpTheme.DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [jsxRuntime.jsx(erpTheme.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: erpTheme.cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) &&
+                                    "bg-accent"), children: [jsxRuntime.jsx(OrgMark, { logoUrl: org.logoUrl, size: "sm" }), jsxRuntime.jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsxRuntime.jsx(erpTheme.DropdownMenuSeparator, {}), jsxRuntime.jsxs(erpTheme.DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsxRuntime.jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) }), jsxRuntime.jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }) }) }));
+}
+
+function SidebarHeader({ children, className }) {
+    return jsxRuntime.jsx("div", { className: erpTheme.cn("px-2 py-3", className), children: children });
+}
+
+function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, closeOnNavigation = false, highlightActiveModule = false, header, footer, bottom, chrome = "brand", className, }) {
+    const { open } = useSidebar();
+    const modulesWithActiveState = React__namespace.useMemo(() => modules.map(m => ({
+        ...m,
+        isActive: m.id === activeModule,
+    })), [modules, activeModule]);
+    if (!open)
+        return null;
+    if (chrome === "workspace") {
+        return (jsxRuntime.jsxs("div", { className: erpTheme.cn("flex h-screen w-[244px] shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground", 
+            // As a drawer (≤1024px) it floats over the page and needs the lift.
+            "max-[1024px]:shadow-2xl", className), children: [header ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-8 pb-6", children: header }) : null, jsxRuntime.jsxs(SidebarContent, { className: "flex-1 overflow-y-auto px-[18px]", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation, chrome: "workspace", highlightActiveModule: highlightActiveModule }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), bottom ? jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pt-6", children: bottom }) : null, jsxRuntime.jsx("div", { className: "shrink-0 px-[18px] pb-3", children: footer })] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: erpTheme.cn("bg-sidebar shrink-0 flex flex-col overflow-hidden shadow-2xl h-screen w-[var(--sidebar-width-mobile)]", "!w-76 xl:rounded-b-4xl xl:rounded-tl-4xl xl:m-5 xl:h-[calc(100vh-2.5rem)]", className), children: [jsxRuntime.jsx(SidebarHeader, { children: header }), jsxRuntime.jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), jsxRuntime.jsx(SidebarFooter, { className: "pl-2 pr-2", children: footer })] }));
+}
+
+/**
+ * Header ink as CSS variables. Header-borne pieces — breadcrumb, sidebar
+ * trigger, the org switcher, the app's own page title — read these, with
+ * white as the fallback, so the brand chrome looks exactly as before.
+ */
+const WORKSPACE_HEADER_VARS = {
+    "--header-fg": "#fff",
+    "--header-fg-muted": "rgb(255 255 255 / 0.78)",
+    "--header-hover": "rgb(255 255 255 / 0.12)",
+    "--header-title-px": "0px",
+    "--header-title-py": "0px",
+};
+const WORKSPACE_LIGHT_HEADER_VARS = {
+    "--header-fg": "var(--foreground)",
+    "--header-fg-muted": "var(--muted-foreground)",
+    "--header-hover": "var(--accent)",
+    "--header-mark-bg": "var(--accent)",
+    "--header-mark-fg": "var(--primary)",
+    "--header-mark-border": "transparent",
+    "--header-title-px": "0px",
+    "--header-title-py": "0px",
+};
+
+/**
+ * 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 HelpButton({ className }) {
+    return (jsxRuntime.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: jsxRuntime.jsx(lucideReact.CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }));
+}
 
 const hasPaginationShape = (payload) => {
     return ("total" in payload ||
@@ -1892,46 +2087,358 @@ const unwrapApiResponse = (payload) => {
 };
 
 /**
- * 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
+ * The images on a help message (and on a follow-up): what was added, what is
+ * uploading, what is ready to send, and what was refused and why.
+ *
+ * Plain state with no React and no network of its own — the uploader is
+ * handed in — so the rules are tested on their own (help-attach.test.ts):
+ * PNG, JPEG, WebP or GIF; at most 5 MB each; at most three; a paste or a drop
+ * adds the same way the file picker does; ส่ง waits for what is uploading.
+ *
+ * Kept free of imports: the tests load it straight from source.
+ */
+const HELP_IMAGE_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+const HELP_IMAGE_ACCEPT = HELP_IMAGE_TYPES.join(",");
+const HELP_IMAGE_MAX_BYTES = 5 * 1024 * 1024;
+const HELP_IMAGE_MAX_COUNT = 3;
+/** The words for each refusal, per file. */
+const HELP_IMAGE_ERRORS = {
+    tooLarge: "ใหญ่เกิน 5 MB",
+    notImage: "ไม่ใช่ไฟล์รูปภาพ (PNG, JPEG, WebP หรือ GIF)",
+    tooMany: "แนบได้ไม่เกิน 3 รูป",
+    failed: "อัปโหลดไม่สำเร็จ",
+};
+/** The declared type, as one of the four, or "". */
+function helpImageType(type) {
+    const t = (type || "").toLowerCase().split(";")[0].trim();
+    if (t === "image/jpg" || t === "image/pjpeg")
+        return "image/jpeg";
+    return HELP_IMAGE_TYPES.includes(t) ? t : "";
+}
+/** Why a file cannot be attached, or null when it can. */
+function checkHelpImage(file) {
+    if (!helpImageType(file.type) || file.size <= 0)
+        return HELP_IMAGE_ERRORS.notImage;
+    if (file.size > HELP_IMAGE_MAX_BYTES)
+        return HELP_IMAGE_ERRORS.tooLarge;
+    return null;
+}
+/**
+ * The files a paste carries, when it is a paste of a picture: a screenshot
+ * or a copied image. A paste that carries text is text — copying a cell from
+ * a spreadsheet also puts a picture of it on the clipboard, and that is not
+ * an attachment.
+ */
+function filesFromPaste(data) {
+    if (!data)
+        return [];
+    const text = data.getData?.("text/plain") ?? "";
+    if (text.trim() !== "")
+        return [];
+    const out = [];
+    if (data.files && data.files.length > 0) {
+        for (let i = 0; i < data.files.length; i++)
+            out.push(data.files[i]);
+        return out;
+    }
+    if (data.items) {
+        for (let i = 0; i < data.items.length; i++) {
+            const it = data.items[i];
+            if (it.kind !== "file")
+                continue;
+            const f = it.getAsFile();
+            if (f)
+                out.push(f);
+        }
+    }
+    return out;
+}
+/** True while what is dragged over the dialog includes files. */
+function dragHasFiles(dt) {
+    if (!dt?.types)
+        return false;
+    for (let i = 0; i < dt.types.length; i++)
+        if (dt.types[i] === "Files")
+            return true;
+    return false;
+}
+/** The files a drop carries. */
+function filesFromDrop(dt) {
+    const out = [];
+    if (!dt?.files)
+        return out;
+    for (let i = 0; i < dt.files.length; i++)
+        out.push(dt.files[i]);
+    return out;
+}
+let seq = 0;
+/**
+ * The images being attached to one message. Subscribe to redraw; every
+ * change replaces items and rejections with new arrays.
+ */
+class HelpAttachments {
+    constructor(uploader, opts = {}) {
+        Object.defineProperty(this, "list", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "refused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        Object.defineProperty(this, "running", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "uploader", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "opts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.uploader = uploader;
+        this.opts = opts;
+    }
+    get items() {
+        return this.list;
+    }
+    /** The files the last add, paste or drop refused, each with its reason. */
+    get rejections() {
+        return this.refused;
+    }
+    get max() {
+        return this.opts.max ?? HELP_IMAGE_MAX_COUNT;
+    }
+    /** True while any image is still uploading. */
+    get uploading() {
+        return this.list.some(i => i.status === "uploading");
+    }
+    /** How many more can be added. */
+    get room() {
+        return Math.max(0, this.max - this.list.length);
+    }
+    subscribe(fn) {
+        this.listeners.add(fn);
+        return () => {
+            this.listeners.delete(fn);
+        };
+    }
+    emit() {
+        this.listeners.forEach(l => l());
+    }
+    patch(key, change) {
+        let changed = false;
+        this.list = this.list.map(i => {
+            if (i.key !== key)
+                return i;
+            changed = true;
+            return { ...i, ...change };
+        });
+        if (changed)
+            this.emit();
+    }
+    /**
+     * Adds files: each is checked, the first ones that fit are uploaded at
+     * once, and every one refused is named with its reason.
+     */
+    add(files) {
+        const refused = [];
+        const added = [];
+        let room = this.room;
+        for (const file of files) {
+            const why = checkHelpImage(file);
+            if (why) {
+                refused.push({ name: file.name || "image", message: why });
+                continue;
+            }
+            if (room <= 0) {
+                refused.push({ name: file.name || "image", message: HELP_IMAGE_ERRORS.tooMany });
+                continue;
+            }
+            room--;
+            seq += 1;
+            const item = {
+                key: `img-${Date.now().toString(36)}-${seq}`,
+                name: file.name || "image",
+                size: file.size,
+                preview: this.opts.preview ? this.opts.preview(file) : "",
+                status: "uploading",
+                progress: 0,
+                id: null,
+                error: null,
+            };
+            added.push({ item, file });
+        }
+        this.refused = refused;
+        this.list = [...this.list, ...added.map(a => a.item)];
+        this.emit();
+        for (const { item, file } of added)
+            this.start(item.key, file);
+    }
+    start(key, file) {
+        const abort = new AbortController();
+        const done = this.uploader
+            .upload(file, {
+            signal: abort.signal,
+            onProgress: p => {
+                if (!abort.signal.aborted)
+                    this.patch(key, { progress: Math.max(0, Math.min(1, p)) });
+            },
+            onId: id => {
+                if (abort.signal.aborted) {
+                    this.uploader.discard?.(id);
+                    return;
+                }
+                this.patch(key, { id });
+            },
+        })
+            .then(res => {
+            if (abort.signal.aborted) {
+                this.uploader.discard?.(res.id);
+                return;
+            }
+            this.patch(key, { status: "ready", progress: 1, id: res.id, error: null });
+        }, (err) => {
+            if (abort.signal.aborted)
+                return;
+            const message = err instanceof Error && err.message ? err.message : HELP_IMAGE_ERRORS.failed;
+            this.patch(key, { status: "failed", error: message });
+        })
+            .finally(() => {
+            this.running.delete(key);
+        });
+        this.running.set(key, { abort, done });
+    }
+    /** Takes an image off: stops its upload and forgets it on the server. */
+    remove(key) {
+        const item = this.list.find(i => i.key === key);
+        if (!item)
+            return;
+        const run = this.running.get(key);
+        if (run)
+            run.abort.abort();
+        if (item.id)
+            this.uploader.discard?.(item.id);
+        if (item.preview)
+            this.opts.revoke?.(item.preview);
+        this.list = this.list.filter(i => i.key !== key);
+        this.emit();
+    }
+    /** Marks the image platform-api refused on sending (it names it by id). */
+    refuse(id, message) {
+        const item = this.list.find(i => i.id === id);
+        if (item)
+            this.patch(item.key, { status: "failed", error: message });
+    }
+    dismissRejections() {
+        if (this.refused.length === 0)
+            return;
+        this.refused = [];
+        this.emit();
+    }
+    /**
+     * Waits until nothing is uploading, then says what can be sent: the ids
+     * of the ready images in the order they are shown, and the ones that
+     * failed. ส่ง calls this, so a send never leaves without its images.
+     */
+    async settled() {
+        while (this.running.size > 0) {
+            await Promise.all(Array.from(this.running.values(), r => r.done));
+        }
+        return {
+            ids: this.list.filter(i => i.status === "ready" && i.id).map(i => i.id),
+            failed: this.list.filter(i => i.status === "failed"),
+        };
+    }
+    /**
+     * Empties the list. sent: the images went with a message — nothing to
+     * forget on the server. Otherwise every upload made is discarded.
+     */
+    clear(sent = false) {
+        for (const [, run] of this.running)
+            run.abort.abort();
+        for (const item of this.list) {
+            if (!sent && item.id)
+                this.uploader.discard?.(item.id);
+            if (item.preview)
+                this.opts.revoke?.(item.preview);
+        }
+        this.list = [];
+        this.refused = [];
+        this.emit();
+    }
+}
+
+/**
+ * The help channel lives on platform-api (POST /support/messages). The shared
+ * axios instance carries the user's token and the organisation header, and
  * refreshes a stale token.
  */
-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;
+    return platformApiBase(app);
 }
-/** A failure the dialog shows as is. */
+/** The thread of m, oldest first, from whichever shape platform-api sent. */
+function helpThread(m) {
+    if (m.thread)
+        return m.thread;
+    return m.replies.map((r, i) => ({ id: `${m.id}-${i}`, author: "staff", body: r.body, created_at: r.created_at, images: [] }));
+}
+/** A failure the dialog shows as is; attachmentId names the image it is about. */
 class HelpSendError extends Error {
-    constructor(message, status) {
+    constructor(message, status, attachmentId) {
         super(message);
         Object.defineProperty(this, "status", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: status
+            value: void 0
+        });
+        Object.defineProperty(this, "attachmentId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
         });
         this.name = "HelpSendError";
+        this.status = status;
+        this.attachmentId = attachmentId;
     }
 }
+function attachmentIdOf(err) {
+    const data = err?.response?.data?.data;
+    return typeof data?.attachment_id === "string" ? data.attachment_id : undefined;
+}
 function friendly(err, fallback) {
     const e = toApiError(err);
+    const attachmentId = attachmentIdOf(err);
     if (e.status === 429) {
-        return new HelpSendError("ส่งบ่อยเกินไป กรุณาลองใหม่ภายหลัง", 429);
+        return new HelpSendError(e.message && e.message !== "Request failed with status code 429" ? e.message : "ส่งบ่อยเกินไป กรุณาลองใหม่ภายหลัง", 429);
     }
-    if (e.status && e.status >= 400 && e.status < 500 && e.message && e.status !== 401 && e.status !== 404) {
+    if (e.status && e.status >= 400 && e.status < 500 && e.message && e.status !== 401 && (e.status !== 404 || attachmentId)) {
+        return new HelpSendError(e.message, e.status, attachmentId);
+    }
+    if (e.status === 503 && e.message) {
         return new HelpSendError(e.message, e.status);
     }
-    return new HelpSendError(fallback, e.status);
+    return new HelpSendError(fallback, e.status, attachmentId);
 }
 async function sendHelpMessage(input) {
     try {
@@ -1940,6 +2447,7 @@ async function sendHelpMessage(input) {
             message: input.message,
             app: input.app === "other" ? "" : input.app,
             context: input.context,
+            attachment_ids: input.attachmentIds ?? [],
         });
         return unwrapApiResponse(res.data);
     }
@@ -1947,6 +2455,83 @@ async function sendHelpMessage(input) {
         throw friendly(err, "ส่งไม่สำเร็จ");
     }
 }
+/** One of the caller's messages by id or reference number ("H1004"). */
+async function getMyHelpMessage(app, key) {
+    try {
+        const res = await instance.get(`${helpApiBase(app)}/support/messages/${encodeURIComponent(key)}`);
+        return unwrapApiResponse(res.data);
+    }
+    catch (err) {
+        if (toApiError(err).status === 404)
+            throw new HelpSendError("ไม่พบข้อความ", 404);
+        throw friendly(err, "โหลดข้อมูลไม่สำเร็จ");
+    }
+}
+/** The author writes again on their own message. */
+async function sendHelpFollowUp(input) {
+    try {
+        const res = await instance.post(`${helpApiBase(input.app)}/support/messages/${encodeURIComponent(input.key)}/replies`, { message: input.message, attachment_ids: input.attachmentIds ?? [] });
+        return unwrapApiResponse(res.data);
+    }
+    catch (err) {
+        throw friendly(err, "ส่งไม่สำเร็จ");
+    }
+}
+/** PUTs the file to the presigned URL, reporting progress. No credentials go with it. */
+function putFile(ticket, file, onProgress, signal) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open(ticket.method || "PUT", ticket.upload_url);
+        for (const [k, v] of Object.entries(ticket.headers ?? {}))
+            xhr.setRequestHeader(k, v);
+        xhr.upload.onprogress = e => {
+            if (e.lengthComputable && e.total > 0)
+                onProgress(e.loaded / e.total);
+        };
+        xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new HelpSendError("อัปโหลดไม่สำเร็จ", xhr.status)));
+        xhr.onerror = () => reject(new HelpSendError("อัปโหลดไม่สำเร็จ"));
+        xhr.onabort = () => reject(new HelpSendError("ยกเลิกแล้ว"));
+        if (signal.aborted) {
+            reject(new HelpSendError("ยกเลิกแล้ว"));
+            return;
+        }
+        signal.addEventListener("abort", () => xhr.abort(), { once: true });
+        xhr.send(file);
+    });
+}
+/**
+ * The uploader the dialog uses: an upload URL from platform-api, the bytes
+ * straight to the bucket, then platform-api reads them to say whether they
+ * are an image it will take.
+ */
+function helpUploader(app) {
+    const base = () => helpApiBase(app);
+    return {
+        async upload(file, hooks) {
+            let ticket;
+            try {
+                const res = await instance.post(`${base()}/support/attachments`, { file_name: file.name, content_type: helpImageType(file.type), size: file.size }, { signal: hooks.signal });
+                ticket = unwrapApiResponse(res.data);
+            }
+            catch (err) {
+                throw friendly(err, "อัปโหลดไม่สำเร็จ");
+            }
+            hooks.onId(ticket.id);
+            hooks.onProgress(0.02);
+            await putFile(ticket, file, p => hooks.onProgress(0.02 + p * 0.93), hooks.signal);
+            try {
+                await instance.post(`${base()}/support/attachments/${ticket.id}/check`, null, { signal: hooks.signal });
+            }
+            catch (err) {
+                throw friendly(err, "อัปโหลดไม่สำเร็จ");
+            }
+            return { id: ticket.id };
+        },
+        discard(id) {
+            void instance.delete(`${base()}/support/attachments/${encodeURIComponent(id)}`).catch(() => undefined);
+        },
+    };
+}
 async function listMyHelpMessages(app) {
     try {
         const res = await instance.get(`${helpApiBase(app)}/support/messages`, {
@@ -1960,6 +2545,167 @@ async function listMyHelpMessages(app) {
     }
 }
 
+/** One message's images, uploading as they are added. */
+function useHelpAttachments(app) {
+    const attach = React__namespace.useMemo(() => new HelpAttachments(helpUploader(app), {
+        preview: f => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" && f instanceof Blob
+            ? URL.createObjectURL(f)
+            : "",
+        revoke: u => {
+            if (u.startsWith("blob:"))
+                URL.revokeObjectURL(u);
+        },
+    }), [app]);
+    const snap = React__namespace.useRef({
+        items: attach.items,
+        rejections: attach.rejections,
+    });
+    const read = React__namespace.useCallback(() => {
+        if (snap.current.items !== attach.items || snap.current.rejections !== attach.rejections) {
+            snap.current = { items: attach.items, rejections: attach.rejections };
+        }
+        return snap.current;
+    }, [attach]);
+    const state = React__namespace.useSyncExternalStore(React__namespace.useCallback(l => attach.subscribe(l), [attach]), read, read);
+    // Leaving the page: what was uploaded and not sent is forgotten.
+    React__namespace.useEffect(() => () => attach.clear(), [attach]);
+    return { attach, items: state.items, rejections: state.rejections };
+}
+/**
+ * Paste and drop for a form that takes images: spread onto the form. A
+ * pasted screenshot or a dropped file is added like a picked one.
+ */
+function useHelpImageDrop(attach, enabled) {
+    const [over, setOver] = React__namespace.useState(false);
+    const depth = React__namespace.useRef(0);
+    const props = {
+        onPaste: (e) => {
+            if (!enabled)
+                return;
+            const files = filesFromPaste(e.clipboardData);
+            if (files.length === 0)
+                return;
+            e.preventDefault();
+            attach.add(files);
+        },
+        onDragEnter: (e) => {
+            if (!enabled || !dragHasFiles(e.dataTransfer))
+                return;
+            e.preventDefault();
+            depth.current += 1;
+            setOver(true);
+        },
+        onDragOver: (e) => {
+            if (!enabled || !dragHasFiles(e.dataTransfer))
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+        },
+        onDragLeave: (e) => {
+            if (!enabled || !dragHasFiles(e.dataTransfer))
+                return;
+            depth.current = Math.max(0, depth.current - 1);
+            if (depth.current === 0)
+                setOver(false);
+        },
+        onDrop: (e) => {
+            if (!enabled)
+                return;
+            depth.current = 0;
+            setOver(false);
+            const files = filesFromDrop(e.dataTransfer);
+            if (files.length === 0)
+                return;
+            e.preventDefault();
+            attach.add(files);
+        },
+    };
+    return { over, props };
+}
+function kb(size) {
+    if (size >= 1024 * 1024)
+        return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+    return `${Math.max(1, Math.round(size / 1024))} KB`;
+}
+/**
+ * แนบรูป: the button that opens the file picker (on a phone, the photo
+ * library or the camera), the thumbnails with their progress and a remove
+ * button each, and a line per file that was refused.
+ */
+function HelpAttachField({ state, disabled, id }) {
+    const { attach, items, rejections } = state;
+    const input = React__namespace.useRef(null);
+    const full = items.length >= attach.max;
+    const problems = [
+        ...items.filter(i => i.status === "failed").map(i => ({ key: i.key, name: i.name, message: i.error ?? "" })),
+        ...rejections.map((r, n) => ({ key: `refused-${n}`, name: r.name, message: r.message })),
+    ];
+    return (jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [items.map(it => (jsxRuntime.jsx(AttachThumb, { item: it, onRemove: () => attach.remove(it.key), disabled: disabled }, it.key))), jsxRuntime.jsxs(erpTheme.Button, { type: "button", variant: "outline", size: "sm", disabled: disabled || full, onClick: () => {
+                            attach.dismissRejections();
+                            input.current?.click();
+                        }, "aria-controls": id, className: items.length > 0 ? "h-16 w-16 flex-col gap-1 p-1 text-[11px]" : "gap-1.5", children: [jsxRuntime.jsx(lucideReact.ImagePlus, { className: "h-4 w-4" }), "\u0E41\u0E19\u0E1A\u0E23\u0E39\u0E1B"] }), jsxRuntime.jsx("input", { ref: input, id: id, type: "file", accept: HELP_IMAGE_ACCEPT, multiple: true, tabIndex: -1, "aria-hidden": "true", className: "sr-only", onChange: e => {
+                            const files = e.currentTarget.files;
+                            if (files && files.length > 0)
+                                attach.add(Array.from(files));
+                            e.currentTarget.value = "";
+                        } })] }), problems.length > 0 ? (jsxRuntime.jsx("ul", { role: "alert", className: "grid gap-0.5 text-xs text-destructive", children: problems.map(p => (jsxRuntime.jsxs("li", { className: "break-words", children: [p.name, ": ", p.message] }, p.key))) })) : null] }));
+}
+function AttachThumb({ item, onRemove, disabled }) {
+    const failed = item.status === "failed";
+    return (jsxRuntime.jsxs("figure", { className: "relative m-0 w-16", children: [jsxRuntime.jsxs("div", { className: "relative h-16 w-16 overflow-hidden rounded-md border bg-muted " +
+                    (failed ? "border-destructive" : "border-border"), children: [item.preview ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    jsxRuntime.jsx("img", { src: item.preview, alt: item.name, className: "h-full w-full object-cover" })) : null, item.status === "uploading" ? (jsxRuntime.jsx("div", { role: "progressbar", "aria-label": `กำลังอัปโหลด ${item.name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(item.progress * 100), className: "absolute inset-x-1 bottom-1 h-1.5 overflow-hidden rounded-full bg-background/80", children: jsxRuntime.jsx("div", { className: "h-full bg-primary transition-[width]", style: { width: `${Math.round(item.progress * 100)}%` } }) })) : null] }), jsxRuntime.jsx("button", { type: "button", onClick: onRemove, disabled: disabled, "aria-label": `ลบรูป ${item.name}`, title: "\u0E25\u0E1A\u0E23\u0E39\u0E1B", className: "absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full border border-border bg-background text-muted-foreground shadow-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) }), jsxRuntime.jsx("figcaption", { className: "mt-0.5 truncate text-[10px] leading-tight text-muted-foreground", title: item.name, children: failed ? jsxRuntime.jsx("span", { className: "text-destructive", children: "\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" }) : kb(item.size) })] }));
+}
+/** Images already sent: thumbnails that open the full image. */
+function HelpImageStrip({ images, size = "md" }) {
+    if (!images || images.length === 0)
+        return null;
+    const box = size === "sm" ? "h-12 w-12" : "h-20 w-20";
+    return (jsxRuntime.jsx("ul", { className: "mt-2 flex flex-wrap gap-2", children: images.map(img => (jsxRuntime.jsx("li", { children: img.url ? (jsxRuntime.jsx("a", { href: img.url, target: "_blank", rel: "noopener noreferrer", "aria-label": `เปิดรูป ${img.file_name || ""}`.trim(), className: `block ${box} overflow-hidden rounded-md border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`, children: jsxRuntime.jsx("img", { src: img.url, alt: img.file_name || "รูปที่แนบ", loading: "lazy", className: "h-full w-full object-cover" }) })) : (jsxRuntime.jsx("span", { className: `block ${box} rounded-md border border-border bg-muted`, "aria-label": img.file_name })) }, img.id))) }));
+}
+
+/**
+ * The ตอบกลับ link in a staff answer e-mail opens the app with ?help=H1004:
+ * the shell's ช่วยเหลือ dialog then opens on that message. Any app page
+ * with the shell's layout works; the e-mail uses Platform.
+ *
+ * Kept free of imports: the tests load it straight from source.
+ */
+const HELP_LINK_PARAM = "help";
+const REF = /^H\d{1,12}$/;
+/** The message a page address asks the dialog to open, or null. */
+function helpRefFromSearch(search) {
+    if (!search)
+        return null;
+    let params;
+    try {
+        params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+    }
+    catch {
+        return null;
+    }
+    const raw = (params.get(HELP_LINK_PARAM) ?? "").trim().toUpperCase();
+    return REF.test(raw) ? raw : null;
+}
+/**
+ * The same address without ?help=, so a reload or a shared link does not
+ * open the dialog again. Everything else in it is kept.
+ */
+function withoutHelpParam(href) {
+    let u;
+    try {
+        u = new URL(href);
+    }
+    catch {
+        return href;
+    }
+    if (!u.searchParams.has(HELP_LINK_PARAM))
+        return href;
+    u.searchParams.delete(HELP_LINK_PARAM);
+    return u.toString();
+}
+
 const KINDS = [
     { value: "help", label: "ขอความช่วยเหลือ", placeholder: "ต้องการให้ช่วยเรื่องอะไร" },
     { value: "problem", label: "แจ้งปัญหา", placeholder: "เกิดอะไรขึ้น และกำลังทำอะไรอยู่" },
@@ -1977,6 +2723,7 @@ const STATUS_TONE = {
     closed: "bg-muted text-muted-foreground",
 };
 const MAX_MESSAGE = 4000;
+const LINK_BUTTON = "rounded text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 function when(iso) {
     const d = new Date(iso);
     if (Number.isNaN(d.getTime()))
@@ -1990,10 +2737,34 @@ function when(iso) {
         hour12: false,
     });
 }
+function errorText(e, fallback) {
+    return e instanceof Error && e.message ? e.message : fallback;
+}
+/**
+ * Sends a message with its images: waits for what is still uploading, then
+ * sends; an image platform-api refuses is marked on its thumbnail.
+ */
+async function sendWithImages(state, send) {
+    const { ids, failed } = await state.attach.settled();
+    if (failed.length > 0)
+        throw new HelpSendError("มีรูปที่อัปโหลดไม่สำเร็จ");
+    try {
+        const res = await send(ids);
+        state.attach.clear(true);
+        return res;
+    }
+    catch (err) {
+        if (err instanceof HelpSendError && err.attachmentId)
+            state.attach.refuse(err.attachmentId, err.message);
+        throw err;
+    }
+}
 /**
  * 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.
+ * the user menu open it with openHelp(), and a page address with
+ * ?help=H1004 (the ตอบกลับ button in a staff answer) opens it on that
+ * message. It sends to platform-api, which puts the message in the back
+ * office's queue on admin.antniti.com.
  */
 function HelpDialogHost({ app, orgCode }) {
     const open = useHelpOpen();
@@ -2006,24 +2777,60 @@ function HelpDialogHost({ app, orgCode }) {
     const [sent, setSent] = React__namespace.useState(null);
     const [mine, setMine] = React__namespace.useState(null);
     const [mineError, setMineError] = React__namespace.useState(null);
+    const [threadKey, setThreadKey] = React__namespace.useState(null);
+    const [thread, setThread] = React__namespace.useState(null);
+    const [threadError, setThreadError] = React__namespace.useState(null);
+    const [followDraft, setFollowDraft] = React__namespace.useState("");
+    const [following, setFollowing] = React__namespace.useState(false);
+    const [followError, setFollowError] = React__namespace.useState(null);
     React__namespace.useEffect(() => registerHelpHost(), []);
+    // The ตอบกลับ link: ?help=H1004 opens the dialog on that message. The
+    // parameter comes off the address so a reload does not open it again.
+    React__namespace.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const ref = helpRefFromSearch(window.location.search);
+        if (!ref)
+            return;
+        window.history.replaceState(null, "", withoutHelpParam(window.location.href));
+        openHelpOn(ref);
+    }, []);
     // 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__namespace.useMemo(() => detectHelpApp(app), [app, open]);
     const context = React__namespace.useMemo(() => (open ? collectHelpContext(orgCode) : null), [open, orgCode]);
+    const images = useHelpAttachments(appId);
+    const followImages = useHelpAttachments(appId);
+    const formDrop = useHelpImageDrop(images.attach, view === "form" && !sending);
+    const followDrop = useHelpImageDrop(followImages.attach, view === "thread" && !following && !!thread);
+    const openThread = React__namespace.useCallback((key) => {
+        setView("thread");
+        setThreadKey(key);
+        setThread(null);
+        setThreadError(null);
+        setFollowError(null);
+        getMyHelpMessage(appId, key)
+            .then(setThread)
+            .catch((e) => setThreadError(errorText(e, "โหลดข้อมูลไม่สำเร็จ")));
+    }, [appId]);
     React__namespace.useEffect(() => {
-        if (open) {
+        if (!open)
+            return;
+        setError(null);
+        const key = pendingHelpRef();
+        if (key)
+            openThread(key);
+        else
             setView("form");
-            setError(null);
-        }
-    }, [open]);
+    }, [open, openThread]);
     const loadMine = React__namespace.useCallback(() => {
+        clearPendingHelpRef();
         setView("mine");
         setMine(null);
         setMineError(null);
         listMyHelpMessages(appId)
             .then(setMine)
-            .catch((e) => setMineError(e instanceof Error ? e.message : "โหลดข้อมูลไม่สำเร็จ"));
+            .catch((e) => setMineError(errorText(e, "โหลดข้อมูลไม่สำเร็จ")));
     }, [appId]);
     const trimmed = message.trim();
     const canSend = trimmed.length > 0 && !sending;
@@ -2034,25 +2841,61 @@ function HelpDialogHost({ app, orgCode }) {
         setSending(true);
         setError(null);
         try {
-            const res = await sendHelpMessage({ app: appId, kind, message: trimmed, context });
+            const res = await sendWithImages(images, ids => sendHelpMessage({ app: appId, kind, message: trimmed, context, attachmentIds: ids }));
             setSent(res);
             setMessage("");
             setKind("help");
             setView("sent");
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "ส่งไม่สำเร็จ");
+            setError(errorText(err, "ส่งไม่สำเร็จ"));
         }
         finally {
             setSending(false);
         }
     };
+    const followTrimmed = followDraft.trim();
+    const sendFollowUp = async (e) => {
+        e?.preventDefault();
+        if (!thread || !followTrimmed || following)
+            return;
+        setFollowing(true);
+        setFollowError(null);
+        try {
+            await sendWithImages(followImages, ids => sendHelpFollowUp({ app: appId, key: thread.id, message: followTrimmed, attachmentIds: ids }));
+            setFollowDraft("");
+            setMine(null);
+            setThread(await getMyHelpMessage(appId, thread.id));
+        }
+        catch (err) {
+            setFollowError(errorText(err, "ส่งไม่สำเร็จ"));
+        }
+        finally {
+            setFollowing(false);
+        }
+    };
     const email = session?.user?.email ?? null;
     const placeholder = KINDS.find(k => k.value === kind)?.placeholder;
-    return (jsxRuntime.jsx(erpTheme.Dialog, { open: open, onOpenChange: o => (o ? openHelp() : closeHelp()), children: jsxRuntime.jsxs(erpTheme.DialogContent, { className: "max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-lg", children: [view === "form" ? (jsxRuntime.jsxs("form", { onSubmit: send, className: "grid gap-4", children: [jsxRuntime.jsx(erpTheme.DialogHeader, { children: jsxRuntime.jsx(erpTheme.DialogTitle, { children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" }) }), jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsx(erpTheme.Label, { id: "erp-help-kind", children: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }), jsxRuntime.jsx("div", { role: "radiogroup", "aria-labelledby": "erp-help-kind", className: "flex gap-1 rounded-lg bg-muted p-1", children: KINDS.map(k => (jsxRuntime.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 " +
+    const dropRing = (over) => (over ? " rounded-lg ring-2 ring-primary ring-offset-4 ring-offset-background" : "");
+    return (jsxRuntime.jsx(erpTheme.Dialog, { open: open, onOpenChange: o => (o ? openHelp() : closeHelp()), children: jsxRuntime.jsxs(erpTheme.DialogContent, { className: "max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-lg", children: [view === "form" ? (jsxRuntime.jsxs("form", { onSubmit: send, className: "grid gap-4" + dropRing(formDrop.over), ...formDrop.props, children: [jsxRuntime.jsx(erpTheme.DialogHeader, { children: jsxRuntime.jsx(erpTheme.DialogTitle, { children: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" }) }), jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsx(erpTheme.Label, { id: "erp-help-kind", children: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }), jsxRuntime.jsx("div", { role: "radiogroup", "aria-labelledby": "erp-help-kind", className: "flex gap-1 rounded-lg bg-muted p-1", children: KINDS.map(k => (jsxRuntime.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))) })] }), jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsx(erpTheme.Label, { htmlFor: "erp-help-message", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" }), jsxRuntime.jsx(erpTheme.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 ? (jsxRuntime.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 ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })) : null, jsxRuntime.jsxs(erpTheme.DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsxRuntime.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" }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(erpTheme.Button, { type: "button", variant: "outline", onClick: closeHelp, children: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" }), jsxRuntime.jsxs(erpTheme.Button, { type: "submit", disabled: !canSend, children: [sending ? jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : null, "\u0E2A\u0E48\u0E07"] })] })] })] })) : null, view === "sent" && sent ? (jsxRuntime.jsxs("div", { className: "grid gap-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-4 text-center", children: [jsxRuntime.jsx(lucideReact.CircleCheck, { className: "h-12 w-12 text-primary", strokeWidth: 1.6 }), jsxRuntime.jsx(erpTheme.DialogTitle, { className: "text-lg font-semibold", children: "\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u0E40\u0E25\u0E02\u0E17\u0E35\u0E48\u0E2D\u0E49\u0E32\u0E07\u0E2D\u0E34\u0E07", " ", jsxRuntime.jsx("span", { className: "font-mono text-base font-semibold text-foreground", children: sent.ref })] })] }), jsxRuntime.jsxs(erpTheme.DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsxRuntime.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" }), jsxRuntime.jsx(erpTheme.Button, { type: "button", onClick: closeHelp, children: "\u0E1B\u0E34\u0E14" })] })] })) : null, view === "mine" ? (jsxRuntime.jsxs("div", { className: "grid gap-4", children: [jsxRuntime.jsx(erpTheme.DialogHeader, { children: jsxRuntime.jsxs(erpTheme.DialogTitle, { className: "flex items-center gap-2", children: [jsxRuntime.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: jsxRuntime.jsx(lucideReact.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 ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14"] })) : null, mineError ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: mineError })) : null, mine && mine.length === 0 ? (jsxRuntime.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 ? (jsxRuntime.jsx("ul", { className: "grid gap-3", children: mine.map(m => (jsxRuntime.jsxs("li", { className: "rounded-lg border border-border p-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "font-mono font-semibold text-foreground", children: m.ref }), jsxRuntime.jsx("span", { children: KIND_LABEL[m.kind] ?? m.kind }), jsxRuntime.jsx("span", { children: when(m.created_at) }), jsxRuntime.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 })] }), jsxRuntime.jsx("p", { className: "mt-2 line-clamp-4 whitespace-pre-wrap break-words text-sm", children: m.message }), m.replies.map((r, i) => (jsxRuntime.jsxs("div", { className: "mt-2 rounded-md bg-muted px-3 py-2", children: [jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: ["\u0E17\u0E35\u0E21 AntNiti \u00B7 ", when(r.created_at)] }), jsxRuntime.jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm", children: r.body })] }, i)))] }, m.id))) })) : null] })) : null] }) }));
+                                                : "text-muted-foreground hover:text-foreground"), children: k.label }, k.value))) })] }), jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsx(erpTheme.Label, { htmlFor: "erp-help-message", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" }), jsxRuntime.jsx(erpTheme.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" })] }), jsxRuntime.jsx(HelpAttachField, { state: images, disabled: sending, id: "erp-help-images" }), context ? (jsxRuntime.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 ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })) : null, jsxRuntime.jsxs(erpTheme.DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsxRuntime.jsx("button", { type: "button", onClick: loadMine, className: "mr-auto " + LINK_BUTTON, children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(erpTheme.Button, { type: "button", variant: "outline", onClick: closeHelp, children: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" }), jsxRuntime.jsxs(erpTheme.Button, { type: "submit", disabled: !canSend, children: [sending ? jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : null, "\u0E2A\u0E48\u0E07"] })] })] })] })) : null, view === "sent" && sent ? (jsxRuntime.jsxs("div", { className: "grid gap-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-4 text-center", children: [jsxRuntime.jsx(lucideReact.CircleCheck, { className: "h-12 w-12 text-primary", strokeWidth: 1.6 }), jsxRuntime.jsx(erpTheme.DialogTitle, { className: "text-lg font-semibold", children: "\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u0E40\u0E25\u0E02\u0E17\u0E35\u0E48\u0E2D\u0E49\u0E32\u0E07\u0E2D\u0E34\u0E07", " ", jsxRuntime.jsx("span", { className: "font-mono text-base font-semibold text-foreground", children: sent.ref })] })] }), jsxRuntime.jsxs(erpTheme.DialogFooter, { className: "flex-row items-center gap-2 sm:justify-between", children: [jsxRuntime.jsx("button", { type: "button", onClick: loadMine, className: "mr-auto " + LINK_BUTTON, children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27" }), jsxRuntime.jsx(erpTheme.Button, { type: "button", onClick: closeHelp, children: "\u0E1B\u0E34\u0E14" })] })] })) : null, view === "mine" ? (jsxRuntime.jsxs("div", { className: "grid gap-4", children: [jsxRuntime.jsx(erpTheme.DialogHeader, { children: jsxRuntime.jsxs(erpTheme.DialogTitle, { className: "flex items-center gap-2", children: [jsxRuntime.jsx(BackButton, { onClick: () => setView("form") }), "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E41\u0E25\u0E49\u0E27"] }) }), mine === null && !mineError ? jsxRuntime.jsx(Loading, {}) : null, mineError ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: mineError })) : null, mine && mine.length === 0 ? (jsxRuntime.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 ? (jsxRuntime.jsx("ul", { className: "grid gap-3", children: mine.map(m => {
+                                const entries = helpThread(m);
+                                const last = entries[entries.length - 1];
+                                return (jsxRuntime.jsxs("li", { className: "rounded-lg border border-border", children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => openThread(m.id), "aria-label": `เปิด ${m.ref}`, className: "block w-full rounded-lg p-3 text-left hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [jsxRuntime.jsxs("span", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "font-mono font-semibold text-foreground", children: m.ref }), jsxRuntime.jsx("span", { children: KIND_LABEL[m.kind] ?? m.kind }), jsxRuntime.jsx("span", { children: when(m.created_at) }), jsxRuntime.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 }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })] }), jsxRuntime.jsx("span", { className: "mt-2 line-clamp-3 block whitespace-pre-wrap break-words text-sm", children: m.message }), last ? (jsxRuntime.jsxs("span", { className: "mt-2 line-clamp-2 block rounded-md bg-muted px-3 py-2 text-xs", children: [jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [last.author === "staff" ? "ทีม AntNiti" : "คุณ", " \u00B7 ", when(last.created_at)] }), jsxRuntime.jsx("span", { className: "mt-0.5 block whitespace-pre-wrap break-words text-sm", children: last.body })] })) : null] }), m.images && m.images.length > 0 ? (jsxRuntime.jsx("div", { className: "px-3 pb-3", children: jsxRuntime.jsx(HelpImageStrip, { images: m.images, size: "sm" }) })) : null] }, m.id));
+                            }) })) : null] })) : null, view === "thread" ? (jsxRuntime.jsxs("div", { className: "grid gap-4", children: [jsxRuntime.jsx(erpTheme.DialogHeader, { children: jsxRuntime.jsxs(erpTheme.DialogTitle, { className: "flex items-center gap-2", children: [jsxRuntime.jsx(BackButton, { onClick: loadMine }), jsxRuntime.jsx("span", { className: "font-mono", children: thread?.ref ?? threadKey }), thread ? (jsxRuntime.jsx("span", { className: `ml-auto mr-7 rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_TONE[thread.status] ?? ""}`, children: STATUS_LABEL[thread.status] ?? thread.status })) : null] }) }), thread === null && !threadError ? jsxRuntime.jsx(Loading, {}) : null, threadError ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: threadError })) : null, thread ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("ol", { className: "grid gap-3", "aria-label": "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21", children: [jsxRuntime.jsx(ThreadBubble, { mine: true, label: `คุณ · ${KIND_LABEL[thread.kind] ?? thread.kind}`, at: thread.created_at, body: thread.message, images: thread.images }), helpThread(thread).map(e => (jsxRuntime.jsx(ThreadBubble, { mine: e.author === "customer", label: e.author === "staff" ? "ทีม AntNiti" : "คุณ", at: e.created_at, body: e.body, images: e.images }, e.id)))] }), jsxRuntime.jsxs("form", { onSubmit: sendFollowUp, className: "grid gap-3 border-t border-border pt-4" + dropRing(followDrop.over), ...followDrop.props, children: [jsxRuntime.jsxs("div", { className: "grid gap-2", children: [jsxRuntime.jsx(erpTheme.Label, { htmlFor: "erp-help-followup", children: "\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A" }), jsxRuntime.jsx(erpTheme.Textarea, { id: "erp-help-followup", rows: 3, maxLength: MAX_MESSAGE, required: true, value: followDraft, onChange: e => setFollowDraft(e.target.value), className: "min-h-[88px] resize-y" })] }), jsxRuntime.jsx(HelpAttachField, { state: followImages, disabled: following, id: "erp-help-followup-images" }), followError ? (jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: followError })) : null, jsxRuntime.jsx(erpTheme.DialogFooter, { className: "flex-row items-center justify-end gap-2", children: jsxRuntime.jsxs(erpTheme.Button, { type: "submit", disabled: !followTrimmed || following, children: [following ? jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : null, "\u0E2A\u0E48\u0E07"] }) })] })] })) : null] })) : null] }) }));
+}
+function BackButton({ onClick }) {
+    return (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E01\u0E25\u0E31\u0E1A", onClick: onClick, className: "-ml-1 grid size-8 shrink-0 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: jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" }) }));
+}
+function Loading() {
+    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14"] }));
+}
+/** One message in the thread: the author's own on the right, AntNiti's on the left. */
+function ThreadBubble({ mine, label, at, body, images, }) {
+    return (jsxRuntime.jsx("li", { className: "flex " + (mine ? "justify-end pl-6" : "justify-start pr-6"), children: jsxRuntime.jsxs("div", { className: "min-w-0 max-w-full rounded-lg px-3 py-2 " +
+                (mine ? "border border-primary/30 bg-primary/5" : "bg-muted"), children: [jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [label, " \u00B7 ", when(at)] }), jsxRuntime.jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm", children: body }), jsxRuntime.jsx(HelpImageStrip, { images: images })] }) }));
 }
 
 /**
@@ -2795,6 +3638,7 @@ exports.HelpDialogHost = HelpDialogHost;
 exports.NavMain = NavMain;
 exports.NavTools = NavTools;
 exports.NavUser = NavUser;
+exports.OWNER_CHIP = OWNER_CHIP;
 exports.OrganizationSwitcher = OrganizationSwitcher;
 exports.PLAN_FEATURES = PLAN_FEATURES;
 exports.PermissionGateShell = PermissionGateShell;
@@ -2839,9 +3683,12 @@ exports.getRequiredChildGroups = getRequiredChildGroups;
 exports.hasPlanFeature = hasPlanFeature;
 exports.isLikelyTransientNetworkError = isLikelyTransientNetworkError;
 exports.isPathActive = isPathActive;
+exports.myRolesQueryKey = myRolesQueryKey;
 exports.normalizePathnameForPermissionRules = normalizePathnameForPermissionRules;
 exports.openHelp = openHelp;
+exports.parseMyRoles = parseMyRoles;
 exports.resolveUiRoutePermission = resolveUiRoutePermission;
+exports.roleSummary = roleSummary;
 exports.runGlobalRequestPrecheck = runGlobalRequestPrecheck;
 exports.runWithTransientRetry = runWithTransientRetry;
 exports.setOrganizationId = setOrganizationId;
@@ -2853,6 +3700,7 @@ exports.useFeatureFlag = useFeatureFlag;
 exports.useFeatureFlags = useFeatureFlags;
 exports.useInvalidateQueriesOnOrgChange = useInvalidateQueriesOnOrgChange;
 exports.useKeycloakRoles = useKeycloakRoles;
+exports.useMyRoles = useMyRoles;
 exports.useOrganizationIdState = useOrganizationIdState;
 exports.usePermissionRules = usePermissionRules;
 exports.useSessionRefresh = useSessionRefresh;