@eintrek/erp-shell 0.1.31 → 0.1.33

package/dist/auth/employee-required-gate.d.ts

@@ -0,0 +1,15 @@
+export declare const EMPLOYEE_RECORD_REQUIRED = "EMPLOYEE_RECORD_REQUIRED";
+export declare const EMPLOYEE_RECORD_REQUIRED_EVENT = "erp:employee-record-required";
+/**
+ * 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.
+ */
+export declare function EmployeeRequiredGate({ platformBaseUrl, }: {
+    /** Where employee records are managed, e.g. https://platform.antniti.com */
+    platformBaseUrl?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -33,7 +33,9 @@ export interface PermissionProviderProps {
  * 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` (let Suspense / loading.tsx show)
+ * 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

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { SidebarHeader } from "./navigation/sidebar-header";
 export { AppSidebar, type AppSidebarProps } from "./navigation/app-sidebar";
 export { AppLayoutShell, type AppLayoutShellProps, type AppLayoutShellOrganization, } from "./navigation/app-layout-shell";
 export { AccessDenied, type AccessDeniedProps } from "./auth/access-denied";
+export { EmployeeRequiredGate, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, } from "./auth/employee-required-gate";
 export { PermissionGateShell, type PermissionGateShellProps, type PermissionGateSkeletonVariant, } from "./auth/permission-gate-shell";
 export { PermissionProvider, type PermissionProviderProps, type PermissionProbe, type UsePermissionHook, } from "./auth/permission-provider";
 export { getRequiredChildGroups, normalizePathnameForPermissionRules, resolveUiRoutePermission, type UiRoutePermissionLookup, } from "./auth/permission-utils";

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, LayoutGrid, ExternalLink, Loader2, LogOut, ChevronDown, ChevronsUpDown, Plus, Ban, Home, Headset } from 'lucide-react';
+import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, LayoutGrid, ExternalLink, Loader2, LogOut, ChevronDown, ChevronsUpDown, Plus, Ban, Home, Headset, IdCard, UserPlus } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
@@ -1195,6 +1195,33 @@ function AccessDenied({ title = "ขออภัย, คุณไม่มีส
     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";
+/**
+ * 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);
+        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+        return () => window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+    }, []);
+    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(IdCard, { 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, { 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(Button, { variant: "outline", onClick: () => window.location.reload(), children: "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E16\u0E49\u0E32\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E41\u0E01\u0E49\u0E44\u0E02 \u0E43\u0E2B\u0E49\u0E41\u0E08\u0E49\u0E07\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] }) }));
+}
+
 const shellClassName = "flex min-w-0 flex-1 flex-col gap-6 overflow-x-hidden";
 /**
  * Shared layout for “กำลังตรวจสอบสิทธิ์” (skeleton) and “ไม่มีสิทธิ์” (message).
@@ -1349,7 +1376,9 @@ function DeniedCard() {
  * 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` (let Suspense / loading.tsx show)
+ * 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
@@ -1369,7 +1398,25 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
     const { hasPermission, isLoading } = usePermission({
         requiredRoles: lookup.roles,
     });
-    if (rulesLoading) {
+    // 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;
     }
     // Unknown route → deny. Only explicit `required_child_groups: []` is public.
@@ -1377,15 +1424,16 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
         return jsx(DeniedCard, {});
     }
     if (lookup.roles.length === 0) {
+        grantedForPathRef.current = pathname;
         return jsx(Fragment$1, { children: children });
     }
-    const isLoadingCombined = isLoading;
-    if (isLoadingCombined) {
+    if (isLoading && !grantedHere) {
         return null;
     }
-    if (!hasPermission) {
+    if (!hasPermission && !isLoading) {
         return jsx(DeniedCard, {});
     }
+    grantedForPathRef.current = pathname;
     return jsx(Fragment$1, { children: children });
 }
 
@@ -1839,6 +1887,15 @@ instance.interceptors.response.use(response => response, async (error) => {
         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));
 });
 
@@ -1881,5 +1938,5 @@ const getAxiosErrorMessage = (error) => {
     return String(error);
 };
 
-export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, FeatureFlagsProvider, HeaderBackground, NavMain, NavTools, NavUser, OrganizationSwitcher, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, instance as axiosInstance, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, decodeJWT, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, 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_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FeatureFlagsProvider, HeaderBackground, NavMain, NavTools, NavUser, OrganizationSwitcher, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, instance as axiosInstance, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, decodeJWT, filterNavigationModulesByPermission, filterNavigationToolsByPermission, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequiredChildGroups, isLikelyTransientNetworkError, isPathActive, normalizePathnameForPermissionRules, resolveUiRoutePermission, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map