@eintrek/erp-shell 0.1.51 → 0.1.53

package/dist/index.esm.js

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