@eintrek/erp-shell 0.1.10 → 0.1.12

package/dist/index.js

@@ -966,6 +966,276 @@ function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, clo
     return (jsxRuntime.jsxs("div", { className: erpTheme.cn("bg-sidebar shrink-0 flex flex-col overflow-hidden shadow-2xl h-screen w-[var(--sidebar-width-mobile)]", "!w-76 xl:rounded-b-4xl xl:rounded-tl-4xl xl:m-5 xl:h-[calc(100vh-2.5rem)]", className), children: [jsxRuntime.jsx(SidebarHeader, { children: header }), jsxRuntime.jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsxRuntime.jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsxRuntime.jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), jsxRuntime.jsx(SidebarFooter, { className: "pl-2 pr-2", children: footer })] }));
 }
 
+/**
+ * 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 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 AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, signInUrl, selectOrganizationUrl, }) {
+    const { data: session, status } = react.useSession();
+    const { open, setOpen } = useSidebar();
+    const router = navigation.useRouter();
+    const params = navigation.useParams();
+    const code = params?.code;
+    const extendedSession = session;
+    // 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__namespace.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.
+    React.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,
+    ]);
+    // ≤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__namespace.useState(false);
+    React.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 jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
+    }
+    // Session loaded but no accessToken (e.g. token refresh failed) -> bounce
+    // through signin so we don't end up at a "No Keycloak Context" error.
+    if (status === "authenticated" && !extendedSession?.accessToken) {
+        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 jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
+    }
+    if (!extendedSession?.accessToken) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
+    }
+    if (!code) {
+        router.push(selectOrganizationUrl);
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { 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 contentMargin = open && !isSidebarModalLayout ? "ml-[21.5rem]" : "";
+    const needsLeftGutter = !(open && !isSidebarModalLayout);
+    const wrap = permissionProvider ?? ((c) => c);
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.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) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col min-h-screen gap-6", children: [jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsxRuntime.jsx(HeaderBackground, {}), jsxRuntime.jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[100px] sm:h-[144px] w-full z-10", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: breadcrumb })] }), jsxRuntime.jsx("div", { id: "header-title" })] })] }), jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "space-y-4 text-center", children: [jsxRuntime.jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsxRuntime.jsx("div", { className: cx("relative z-10 pr-6 pb-12", needsLeftGutter && "pl-6"), children: wrap(children) }, `org-${organizationId ?? "no-org"}`) })] }) })] }));
+}
+/** 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(" ");
+}
+
+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 (jsxRuntime.jsx("div", { className: shellClassName, children: jsxRuntime.jsx("div", { className: skeletonGridClassName, children: Array.from({ length: skeletonCount }).map((_, i) => (jsxRuntime.jsx(erpTheme.Card, { children: skeletonVariant === "kpi" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(erpTheme.CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-4 w-24" }), jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-4 w-4 rounded" })] }), jsxRuntime.jsxs(erpTheme.CardContent, { children: [jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-8 w-32 mb-2" }), jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-3 w-20" })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(erpTheme.CardHeader, { className: "pb-2", children: jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-4 w-24" }) }), jsxRuntime.jsx(erpTheme.CardContent, { children: jsxRuntime.jsx(erpTheme.Skeleton, { className: "h-8 w-16" }) })] })) }, i))) }) }));
+    }
+    if (!hasPolicyAccess) {
+        return (jsxRuntime.jsx("div", { className: shellClassName, children: jsxRuntime.jsx(erpTheme.Card, { children: jsxRuntime.jsx(erpTheme.CardContent, { className: "text-sm text-muted-foreground", children: deniedMessage }) }) }));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+
+const PermissionRulesContext = React.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 = React.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 = React.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 = React.useMemo(() => ({
+        rulesMap,
+        policiesMap,
+        isLoading,
+        isError,
+        updatedAt: data?.updated_at ?? null,
+    }), [rulesMap, policiesMap, isLoading, isError, data?.updated_at]);
+    return (jsxRuntime.jsx(PermissionRulesContext.Provider, { value: value, children: children }));
+}
+/**
+ * Read the permission rules. Returns empty maps when used outside the
+ * provider (lets pages render without a hard-fail in tests).
+ */
+function usePermissionRules() {
+    const ctx = React.useContext(PermissionRulesContext);
+    if (!ctx) {
+        return {
+            rulesMap: {},
+            policiesMap: {},
+            isLoading: false,
+            isError: false,
+            updatedAt: null,
+        };
+    }
+    return ctx;
+}
+
+/**
+ * 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");
+}
+/**
+ * Returns the required child-group segments for a page pathname (the user's
+ * JWT must contain at least one matching group). An exact match on the
+ * normalized path wins; otherwise the function falls back to a segment-by-
+ * segment pattern match where `[param]` placeholders accept any non-empty
+ * value. Returns an empty array when no rule covers the path.
+ *
+ * `rulesMap` is the merged map — apps that want a fallback should layer it
+ * here (`{ ...fallbackMap, ...liveMap }`) before calling.
+ */
+function getRequiredChildGroups(pathname, rulesMap) {
+    const normalized = normalizePathnameForPermissionRules(pathname);
+    if (rulesMap[normalized]) {
+        return 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 roles;
+        }
+    }
+    return [];
+}
+
+/**
+ * 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 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
+ * 3. otherwise → children
+ *
+ * The host wraps `<PermissionProvider>` around its page chrome (typically
+ * via `AppLayoutShell`'s `permissionProvider` slot).
+ */
+function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
+    const pathname = navigation.usePathname();
+    const { rulesMap, isLoading: rulesLoading } = usePermissionRules();
+    const mergedMap = React.useMemo(() => {
+        if (!fallbackRulesMap)
+            return rulesMap;
+        // live rules win over fallback when both define the same key
+        return { ...fallbackRulesMap, ...rulesMap };
+    }, [rulesMap, fallbackRulesMap]);
+    const requiredRoles = React.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({
+        requiredRoles,
+    });
+    // Fast path — no rule covers this pathname, anyone can see it. Skip the
+    // probe UI entirely; flashing "checking permission" or "no access" on an
+    // unrestricted page is pure noise.
+    if (requiredRoles.length === 0) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    }
+    // While the answer hasn't settled, render nothing and let the surrounding
+    // Next.js loading.tsx / Suspense fallback show. The old behaviour wrapped
+    // a big "กำลังตรวจสอบสิทธิ์..." card over the top, which both duplicated
+    // the app's own loader and — worse — caused a "ไม่มีสิทธิ์" flash on
+    // fast loads because the probe transiently returned `hasPermission:false,
+    // isLoading:false` before its dependencies (org context, role-segments)
+    // arrived.
+    const isLoadingCombined = rulesLoading || isLoading;
+    if (isLoadingCombined) {
+        return null;
+    }
+    if (!hasPermission) {
+        return (jsxRuntime.jsx(erpTheme.Card, { className: "p-6", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-center", children: [jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-8 w-8 text-destructive" }), jsxRuntime.jsxs("div", { className: "space-y-1", children: [jsxRuntime.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" }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "mt-3 space-y-1", children: [jsxRuntime.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:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: requiredRoles.map((role, idx) => (jsxRuntime.jsx("span", { className: "rounded bg-muted px-2 py-0.5 text-xs font-mono", children: role }, idx))) })] })), userRoles.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-3 space-y-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: userRoles.map((role, idx) => (jsxRuntime.jsx("span", { className: "rounded bg-primary/10 px-2 py-0.5 text-xs font-mono text-primary", children: role }, idx))) })] }))] })] }) }));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+
 function ThemeProvider({ children, ...props }) {
     return jsxRuntime.jsx(nextThemes.ThemeProvider, { ...props, children: children });
 }
@@ -1067,61 +1337,6 @@ function ReactQueryProvider({ children }) {
     return (jsxRuntime.jsxs(reactQuery.QueryClientProvider, { client: queryClient, children: [children, jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, { client: queryClient, initialIsOpen: false })] }));
 }
 
-const PermissionRulesContext = React.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 = React.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 = React.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 = React.useMemo(() => ({
-        rulesMap,
-        policiesMap,
-        isLoading,
-        isError,
-        updatedAt: data?.updated_at ?? null,
-    }), [rulesMap, policiesMap, isLoading, isError, data?.updated_at]);
-    return (jsxRuntime.jsx(PermissionRulesContext.Provider, { value: value, children: children }));
-}
-/**
- * Read the permission rules. Returns empty maps when used outside the
- * provider (lets pages render without a hard-fail in tests).
- */
-function usePermissionRules() {
-    const ctx = React.useContext(PermissionRulesContext);
-    if (!ctx) {
-        return {
-            rulesMap: {},
-            policiesMap: {},
-            isLoading: false,
-            isError: false,
-            updatedAt: null,
-        };
-    }
-    return ctx;
-}
-
 /**
  * Renders nothing. Runs during render (after SessionProvider, inside
  * QueryClientProvider) to seed the cached profile slot from the JWT-backed
@@ -1436,6 +1651,7 @@ Object.defineProperty(exports, "isAxiosError", {
 });
 exports.ApiError = ApiError;
 exports.AppBreadcrumb = AppBreadcrumb;
+exports.AppLayoutShell = AppLayoutShell;
 exports.AppSidebar = AppSidebar;
 exports.FeatureFlagsProvider = FeatureFlagsProvider;
 exports.HeaderBackground = HeaderBackground;
@@ -1443,6 +1659,8 @@ exports.NavMain = NavMain;
 exports.NavTools = NavTools;
 exports.NavUser = NavUser;
 exports.OrganizationSwitcher = OrganizationSwitcher;
+exports.PermissionGateShell = PermissionGateShell;
+exports.PermissionProvider = PermissionProvider;
 exports.PermissionRulesProvider = PermissionRulesProvider;
 exports.ReactQueryProvider = ReactQueryProvider;
 exports.SessionBackedProfileCacheSeeder = SessionBackedProfileCacheSeeder;
@@ -1468,8 +1686,10 @@ exports.getActiveSubModule = getActiveSubModule;
 exports.getAxiosErrorMessage = getAxiosErrorMessage;
 exports.getOrganizationId = getOrganizationId;
 exports.getQueryClientConfig = getQueryClientConfig;
+exports.getRequiredChildGroups = getRequiredChildGroups;
 exports.isLikelyTransientNetworkError = isLikelyTransientNetworkError;
 exports.isPathActive = isPathActive;
+exports.normalizePathnameForPermissionRules = normalizePathnameForPermissionRules;
 exports.runGlobalRequestPrecheck = runGlobalRequestPrecheck;
 exports.runWithTransientRetry = runWithTransientRetry;
 exports.setOrganizationId = setOrganizationId;