@eintrek/erp-shell 0.1.21 → 0.1.24

package/README.md

@@ -1,6 +1,6 @@
 # @eintrek/erp-shell
 
-Shared frontend platform for ERP apps (erp-accounting, erp-hr, …).
+Shared frontend platform for ERP apps (erp-accounting, erp-hr, erp-platform, …).
 
 Holds the cross-app glue that was previously duplicated in every consumer:
 HTTP client, auth/token plumbing, organization-id context, app chrome
@@ -81,7 +81,8 @@ Shell now owns the **shapes + helpers** for navigation; apps own the data.
   slot for app narrowing), `Tool`, `Company`, `NavigationData`.
 - Helpers: `canAccessNavPermissionRoute`, `filterNavigationToolsByPermission`,
   `filterNavigationModulesByPermission`, `getActiveModule(pathname, modules)`,
-  `getActiveSubModule(pathname, modules)`, `buildUrlWithCode(code, url)`.
+  `getActiveSubModule(pathname, modules)`, `buildUrlWithCode(code, url)`
+  (absolute `http(s)://` URLs pass through; `{code}` placeholder is replaced).
 - Components: `NavTools` (reads Tool[] + buildUrlWithCode internally),
   `AppBreadcrumb` (accepts `labels` prop so per-app Thai overrides stay local).
 

package/dist/auth/permission-provider.d.ts

@@ -34,11 +34,10 @@ export interface PermissionProviderProps {
  * into the host's `usePermission` probe, and renders one of three states:
  *
  * 1. while rules or probe are still loading → centered spinner card
- * 2. probe says no access → centered "ไม่มีสิทธิ์" card with required vs.
- *    user roles for debugging
+ * 2. probe says no access → centered "ไม่มีสิทธิ์" card
  * 3. otherwise → children
  *
- * The host wraps `<PermissionProvider>` around its page chrome (typically
- * via `AppLayoutShell`'s `permissionProvider` slot).
+ * Role codes are intentionally not shown on the deny screen (they are
+ * internal identifiers like `fin_controller` and confuse end users).
  */
 export declare function PermissionProvider({ children, usePermission, fallbackRulesMap, }: PermissionProviderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { useSidebarToggle } from "./navigation/use-sidebar-toggle";
 export { TapMenu } from "./navigation/tap-menu";
 export { NavTools } from "./navigation/nav-tools";
 export { AppBreadcrumb } from "./navigation/app-breadcrumb";
-export { NavUser, type NavUserProps } from "./navigation/nav-user";
+export { NavUser, type NavUserProps, type NavUserSystemLink } from "./navigation/nav-user";
 export { NavMain, type NavMainProps } from "./navigation/nav-main";
 export { OrganizationSwitcher, type OrganizationSwitcherProps, type OrganizationLike, } from "./navigation/organization-switcher";
 export { SidebarHeader } from "./navigation/sidebar-header";

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { useSession, signOut } from 'next-auth/react';
 import { useQueryClient, MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { cn, Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Avatar, AvatarImage, AvatarFallback, Collapsible, CollapsibleTrigger, CollapsibleContent, Badge, Skeleton, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Card, CardHeader, CardContent } from '@eintrek/erp-theme';
-import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, Loader2, LogOut, ChevronDown, ChevronsUpDown, Plus, AlertCircle } from 'lucide-react';
+import { PanelLeftClose, Menu, ChevronRight, Building2, ExternalLink, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, Loader2, LogOut, ChevronDown, ChevronsUpDown, Plus, AlertCircle } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
@@ -692,8 +692,15 @@ function getActiveSubModule(pathname, modules) {
     }
     return null;
 }
-/** Prepend `code` (org code) to a relative URL so `/sales` → `/O25.../sales`. */
+/** Prepend `code` (org code) to a relative URL so `/sales` → `/O25.../sales`.
+ * Absolute `http(s)://` URLs are left intact; optional `{code}` placeholder is replaced.
+ */
 function buildUrlWithCode(code, url) {
+    if (/^https?:\/\//i.test(url)) {
+        if (!code)
+            return url.split("{code}").join("");
+        return url.split("{code}").join(code);
+    }
     if (!code)
         return url;
     const cleanUrl = url.startsWith("/") ? url.slice(1) : url;
@@ -733,7 +740,10 @@ function AppBreadcrumb({ labels = {}, homeLabel = "แดชบอร์ด", ro
                 })] }) }));
 }
 
-function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref = "/select-organization", signInRedirectHref = "/auth/signin", } = {}) {
+function isExternalHref(href) {
+    return /^https?:\/\//i.test(href) || href.startsWith("//");
+}
+function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref = "/select-organization", signInRedirectHref = "/auth/signin", systemLinks, } = {}) {
     const { data: session, status } = useSession();
     const router = useRouter();
     const { theme, setTheme } = useTheme();
@@ -785,6 +795,14 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
         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);
@@ -817,6 +835,7 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
     }
     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", 
@@ -824,7 +843,7 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
                             // 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: () => {
+                            } })) : (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: [visibleSystemLinks.length > 0 ? (jsxs(Fragment$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.5 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.label}:${link.href}`))), jsx("div", { className: "my-1 border-t border-sidebar-border" })] })) : null, jsxs("div", { className: "relative", children: [jsxs("button", { onClick: () => {
                                     setShowThemeMenu(!showThemeMenu);
                                     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(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: [
@@ -840,7 +859,7 @@ function NavUser({ organization, avatarSrc, profileHref, selectOrganizationHref
                                     { 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" })] })), 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" })] }), 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;
-    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: [jsx(AvatarImage, { src: user.avatar, alt: user.name }), jsx(AvatarFallback, { className: "rounded-lg bg-[#E4525F] text-sidebar-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" &&
+    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-[#E4525F] text-sidebar-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)] }) }));
 }
 
@@ -919,6 +938,17 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, })
             }) }) }));
 }
 
+function OrgMark({ logoUrl, size = "md", }) {
+    const [failed, setFailed] = useState(false);
+    const box = size === "sm"
+        ? "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background"
+        : "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden";
+    const icon = size === "sm" ? "size-3.5 shrink-0" : "size-4";
+    if (logoUrl && !failed) {
+        return (jsx("div", { className: cn(box, size === "md" && "bg-white"), children: jsx("img", { src: logoUrl, alt: "", className: "size-full object-contain p-0.5", onError: () => setFailed(true) }) }));
+    }
+    return (jsx("div", { className: box, children: jsx(Building2, { className: icon }) }));
+}
 function OrganizationSwitcher({ activeOrganization, isContextLoading = false, organizations, isLoadingOrgs = false, setOrganizationCookie, registerOrganizationHref = "/register-organization", className, }) {
     const { isMobile } = useSidebarToggle();
     const router = useRouter();
@@ -964,10 +994,10 @@ function OrganizationSwitcher({ activeOrganization, isContextLoading = false, or
         return (jsx(SidebarMenu, { className: className, children: jsx(SidebarMenuItem, { children: jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsx(Skeleton, { className: "size-8 rounded-lg" }), jsx(Skeleton, { className: "h-4 w-24" })] }) }) }));
     }
     if (organizations.length <= 1) {
-        return (jsx(SidebarMenu, { className: className, children: jsx(SidebarMenuItem, { children: jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: jsx(Building2, { className: "size-4" }) }), jsx("span", { className: "truncate font-semibold text-sm min-w-0 flex-1", children: activeOrganization?.name || "ไม่มีองค์กร" })] }) }) }));
+        return (jsx(SidebarMenu, { className: className, children: jsx(SidebarMenuItem, { children: jsxs("div", { className: "flex items-center gap-2 p-2", children: [jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsx("span", { className: "truncate font-semibold text-sm min-w-0 flex-1", children: activeOrganization?.name || "ไม่มีองค์กร" })] }) }) }));
     }
-    return (jsx(SidebarMenu, { className: className, children: jsx(SidebarMenuItem, { children: jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [jsx("div", { className: "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: jsx(Building2, { className: "size-4" }) }), jsx("span", { className: "truncate font-semibold text-sm flex-1 min-w-0 text-left", children: activeOrganization?.name || "เลือกองค์กร" }), isPending ? (jsx(Loader2, { className: "ml-auto size-4 animate-spin" })) : (jsx(ChevronsUpDown, { className: "ml-auto size-4" }))] }) }), jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxs(DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) &&
-                                    "bg-accent"), children: [jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: jsx(Building2, { className: "size-3.5 shrink-0" }) }), jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsx(Plus, { className: "size-4" }) }), jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }) }) }));
+    return (jsx(SidebarMenu, { className: className, children: jsx(SidebarMenuItem, { children: jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [jsx(OrgMark, { logoUrl: activeOrganization?.logoUrl }), jsx("span", { className: "truncate font-semibold text-sm flex-1 min-w-0 text-left", children: activeOrganization?.name || "เลือกองค์กร" }), isPending ? (jsx(Loader2, { className: "ml-auto size-4 animate-spin" })) : (jsx(ChevronsUpDown, { className: "ml-auto size-4" }))] }) }), jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" }), organizations.map(org => (jsxs(DropdownMenuItem, { onClick: () => handleOrganizationChange(org), disabled: isPending, className: cn("gap-2 p-2 cursor-pointer", String(activeOrganization?.id) === String(org.id) &&
+                                    "bg-accent"), children: [jsx(OrgMark, { logoUrl: org.logoUrl, size: "sm" }), jsx("span", { className: "truncate", children: org.name })] }, org.id))), jsx(DropdownMenuSeparator, {}), jsxs(DropdownMenuItem, { className: "gap-2 p-2 cursor-pointer", onClick: () => router.push(registerOrganizationHref), children: [jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: jsx(Plus, { className: "size-4" }) }), jsx("span", { className: "text-muted-foreground font-medium", children: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] })] })] }) }) }));
 }
 
 function SidebarHeader({ children, className }) {
@@ -1247,12 +1277,11 @@ function getRequiredChildGroups(pathname, rulesMap) {
  * into the host's `usePermission` probe, and renders one of three states:
  *
  * 1. while rules or probe are still loading → centered spinner card
- * 2. probe says no access → centered "ไม่มีสิทธิ์" card with required vs.
- *    user roles for debugging
+ * 2. probe says no access → centered "ไม่มีสิทธิ์" card
  * 3. otherwise → children
  *
- * The host wraps `<PermissionProvider>` around its page chrome (typically
- * via `AppLayoutShell`'s `permissionProvider` slot).
+ * Role codes are intentionally not shown on the deny screen (they are
+ * internal identifiers like `fin_controller` and confuse end users).
  */
 function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
     const pathname = usePathname();
@@ -1266,7 +1295,7 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
     const requiredRoles = useMemo(() => getRequiredChildGroups(pathname, mergedMap), [pathname, mergedMap]);
     // Hook must run unconditionally (rules of hooks); we just ignore the
     // result on the fast path below.
-    const { hasPermission, isLoading, userRoles } = usePermission({
+    const { hasPermission, isLoading } = usePermission({
         requiredRoles,
     });
     // Fast path — no rule covers this pathname, anyone can see it. Skip the
@@ -1287,13 +1316,83 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
         return null;
     }
     if (!hasPermission) {
-        return (jsx(Card, { className: "p-6", children: jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-center", children: [jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }), jsxs("div", { className: "space-y-1", children: [jsx("h3", { className: "text-lg font-semibold text-destructive", children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49" }), requiredRoles.length > 0 && (jsxs("div", { className: "mt-3 space-y-1", children: [jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E17\u0E35\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23:" }), jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: requiredRoles.map((role, idx) => (jsx("span", { className: "rounded bg-muted px-2 py-0.5 text-xs font-mono", children: role }, idx))) })] })), userRoles.length > 0 && (jsxs("div", { className: "mt-3 space-y-1", children: [jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13:" }), jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: userRoles.map((role, idx) => (jsx("span", { className: "rounded bg-primary/10 px-2 py-0.5 text-xs font-mono text-primary", children: role }, idx))) })] }))] })] }) }));
+        return (jsx(Card, { className: "p-6", children: jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-center", children: [jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }), jsxs("div", { className: "space-y-1", children: [jsx("h3", { className: "text-lg font-semibold text-destructive", children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E43\u0E19\u0E01\u0E32\u0E23\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" })] })] }) }));
     }
     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;
+}
+function writeThemeCookie(value) {
+    if (typeof document === "undefined")
+        return;
+    const domain = sharedCookieDomain();
+    const parts = [
+        `${THEME_COOKIE}=${encodeURIComponent(value)}`,
+        "path=/",
+        "max-age=31536000", // 1 year
+        "SameSite=Lax",
+    ];
+    if (domain)
+        parts.push(`domain=${domain}`);
+    document.cookie = parts.join("; ");
+}
+/**
+ * Bridges next-themes (per-origin localStorage) with a cookie scoped to the
+ * parent domain, so the light/dark/system choice is shared across the
+ * accounting / HR / platform subdomains. On load it adopts the shared cookie;
+ * on every later change it writes the cookie back.
+ */
+function ThemeCookieSync() {
+    const { theme, setTheme } = useTheme();
+    const skipFirstWrite = React.useRef(true);
+    React.useEffect(() => {
+        const cookie = readThemeCookie();
+        if (cookie) {
+            if (cookie !== theme)
+                setTheme(cookie);
+        }
+        else if (theme) {
+            writeThemeCookie(theme); // seed the shared cookie the first time
+        }
+        // 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 the cookie above — harmless re-write).
+        if (skipFirstWrite.current) {
+            skipFirstWrite.current = false;
+            return;
+        }
+        if (theme)
+            writeThemeCookie(theme);
+    }, [theme]);
+    return null;
+}
 function ThemeProvider({ children, ...props }) {
-    return jsx(ThemeProvider$1, { ...props, children: children });
+    return (jsxs(ThemeProvider$1, { ...props, children: [jsx(ThemeCookieSync, {}), children] }));
 }
 
 const defaultFlags = {
@@ -1419,7 +1518,9 @@ function SessionBackedProfileCacheSeeder({ queryKey, mapper, }) {
         if (mapped) {
             const existing = queryClient.getQueryData(queryKey);
             if (!existing) {
-                queryClient.setQueryData(queryKey, mapped);
+                // 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
@@ -1427,7 +1528,7 @@ function SessionBackedProfileCacheSeeder({ queryKey, mapper, }) {
                 const existingId = existing?.id;
                 const mappedId = mapped?.id;
                 if (existingId !== mappedId) {
-                    queryClient.setQueryData(queryKey, mapped);
+                    queryClient.setQueryData(queryKey, mapped, { updatedAt: 0 });
                 }
             }
         }