@eintrek/erp-shell 0.1.20 → 0.1.22

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/hooks/use-org-side-effects.d.ts

@@ -11,8 +11,19 @@
  */
 export declare function useInvalidateQueriesOnOrgChange(organizationId: number | string | null | undefined): void;
 /**
- * When `userId` changes (after the initial value), call `clearOrg`. Use
- * inside the ERP provider so logging out / switching user resets the
- * selected org cleanly.
+ * Clear the selected organization when the signed-in user actually changes.
+ *
+ * Only a transition between two KNOWN users counts. An empty or absent id
+ * means "not resolved yet" — it is not a different person, and treating it as
+ * one is what made this fire on every cold load: hosts derive the id as
+ * `session?.user?.id ?? ""`, so the first effect run saw `""`, and the moment
+ * NextAuth resolved, `"" !== "abc"` looked like a user switch and wiped the
+ * org. Downstream that nulls organizationId, which re-keys every org-scoped
+ * query and remounts the page — visible as settings snapping back to their
+ * defaults.
+ *
+ * Remembering the last known id (rather than the last value seen) keeps the
+ * real case working: user A signs out — id goes empty, ignored — user B signs
+ * in, A !== B, and the org is cleared.
  */
 export declare function useClearOrgOnUserChange(userId: string | null | undefined, clearOrg: (id: null) => Promise<void> | void): void;

package/dist/index.esm.js

@@ -367,18 +367,32 @@ function useInvalidateQueriesOnOrgChange(organizationId) {
     }, [organizationId, queryClient]);
 }
 /**
- * When `userId` changes (after the initial value), call `clearOrg`. Use
- * inside the ERP provider so logging out / switching user resets the
- * selected org cleanly.
+ * Clear the selected organization when the signed-in user actually changes.
+ *
+ * Only a transition between two KNOWN users counts. An empty or absent id
+ * means "not resolved yet" — it is not a different person, and treating it as
+ * one is what made this fire on every cold load: hosts derive the id as
+ * `session?.user?.id ?? ""`, so the first effect run saw `""`, and the moment
+ * NextAuth resolved, `"" !== "abc"` looked like a user switch and wiped the
+ * org. Downstream that nulls organizationId, which re-keys every org-scoped
+ * query and remounts the page — visible as settings snapping back to their
+ * defaults.
+ *
+ * Remembering the last known id (rather than the last value seen) keeps the
+ * real case working: user A signs out — id goes empty, ignored — user B signs
+ * in, A !== B, and the org is cleared.
  */
 function useClearOrgOnUserChange(userId, clearOrg) {
-    const previousUserIdRef = useRef(null);
+    const lastKnownUserIdRef = useRef(null);
     useEffect(() => {
-        if (previousUserIdRef.current !== null &&
-            previousUserIdRef.current !== userId) {
+        const next = userId ?? "";
+        if (next === "")
+            return;
+        const previous = lastKnownUserIdRef.current;
+        lastKnownUserIdRef.current = next;
+        if (previous !== null && previous !== next) {
             Promise.resolve(clearOrg(null)).catch(console.error);
         }
-        previousUserIdRef.current = userId ?? null;
     }, [userId, clearOrg]);
 }
 
@@ -678,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;
@@ -826,7 +847,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)] }) }));
 }
 
@@ -905,6 +926,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();
@@ -950,10 +982,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 }) {
@@ -1027,6 +1059,25 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         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;
     // ≤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);
@@ -1073,7 +1124,7 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
     const contentMargin = open && !isSidebarModalLayout ? "ml-[21.5rem]" : "";
     const needsLeftGutter = !(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: "flex flex-1 flex-col min-h-screen gap-4", children: [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 })] }), 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: cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: wrap(children) }, `org-${organizationId ?? "no-org"}`) })] }) })] }));
+    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: "flex flex-1 flex-col min-h-screen gap-4", children: [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 })] }), 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: cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: 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. */
@@ -1386,7 +1437,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
@@ -1394,7 +1447,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 });
                 }
             }
         }