@eintrek/erp-shell 0.1.10 → 0.1.12

package/dist/auth/permission-gate-shell.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type PermissionGateSkeletonVariant = "kpi" | "simple";
+export interface PermissionGateShellProps {
+    /** True while policy / route rules are still resolving */
+    policyLoading: boolean;
+    /** False when the user does not satisfy required_child_groups */
+    hasPolicyAccess: boolean;
+    /** Shown in a card when `hasPolicyAccess` is false */
+    deniedMessage: string;
+    children: ReactNode;
+    /** Number of placeholder stat cards */
+    skeletonCount?: number;
+    /** Grid wrapper classes for the skeleton row */
+    skeletonGridClassName?: string;
+    /** `kpi` matches dashboard KPI cards; `simple` is a lighter header + value */
+    skeletonVariant?: PermissionGateSkeletonVariant;
+}
+/**
+ * Shared layout for “กำลังตรวจสอบสิทธิ์” (skeleton) and “ไม่มีสิทธิ์” (message).
+ * Renders `children` only when policy is loaded and access is granted.
+ */
+export declare function PermissionGateShell({ policyLoading, hasPolicyAccess, deniedMessage, children, skeletonCount, skeletonGridClassName, skeletonVariant, }: PermissionGateShellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { type PermissionRulesMap } from "../providers/permission-rules-context";
+/**
+ * Probe contract — the host app supplies a hook that resolves "does the
+ * current user satisfy these required child-group names?". The shell can't
+ * own this directly because the probe pulls from the host's ERP context and
+ * organization-roles data client.
+ */
+export interface PermissionProbe {
+    hasPermission: boolean;
+    isLoading: boolean;
+    /** All groups the user has (used to render the "your roles" hint). */
+    userRoles: string[];
+}
+export type UsePermissionHook = (input: {
+    requiredRoles: string[];
+}) => PermissionProbe;
+export interface PermissionProviderProps {
+    children: ReactNode;
+    /** Host app's probe hook — called on every render to test the current
+     *  pathname's required roles. */
+    usePermission: UsePermissionHook;
+    /**
+     * Optional static fallback layered under the live rules map. Lets each
+     * app ship its checked-in `fallback-ui-route-permissions.json` so first
+     * paint isn't blocked on the live fetch.
+     */
+    fallbackRulesMap?: PermissionRulesMap;
+}
+/**
+ * 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).
+ */
+export declare function PermissionProvider({ children, usePermission, fallbackRulesMap, }: PermissionProviderProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+import type { PermissionRulesMap } from "../providers/permission-rules-context";
+/**
+ * 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.
+ */
+export declare function normalizePathnameForPermissionRules(pathname: string): string;
+/**
+ * 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.
+ */
+export declare function getRequiredChildGroups(pathname: string, rulesMap: PermissionRulesMap): string[];

package/dist/index.d.ts

@@ -18,6 +18,10 @@ export { NavMain, type NavMainProps } from "./navigation/nav-main";
 export { OrganizationSwitcher, type OrganizationSwitcherProps, type OrganizationLike, } from "./navigation/organization-switcher";
 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 { 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, } from "./auth/permission-utils";
 export * from "./navigation/navigation-helpers";
 export type { Module, SubPage, SubModule, Tool, Company, NavigationData, } from "./navigation/navigation-types";
 export { canAccessNavPermissionRoute, filterNavigationToolsByPermission, filterNavigationModulesByPermission, getActiveModule, getActiveSubModule, buildUrlWithCode, } from "./navigation/navigation-data-helpers";

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
-import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useTransition } from 'react';
+import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useTransition, Suspense } from 'react';
 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 } from '@eintrek/erp-theme';
-import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, User, Loader2, LogOut, ChevronDown, ChevronsUpDown, Plus } from 'lucide-react';
+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 { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { useRouter, usePathname, useParams } from 'next/navigation';
@@ -947,6 +947,276 @@ function AppSidebar({ modules, tools, activeModule, orgCode, approvalCounts, clo
     return (jsxs("div", { className: 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: [jsx(SidebarHeader, { children: header }), jsxs(SidebarContent, { className: "pl-2 pr-2 flex-1 overflow-y-auto", children: [jsx(NavMain, { items: modulesWithActiveState, orgCode: orgCode, approvalCounts: approvalCounts, closeOnNavigation: closeOnNavigation }), jsx(NavTools, { tools: tools, closeOnNavigation: closeOnNavigation })] }), 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 } = useSession();
+    const { open, setOpen } = useSidebar();
+    const router = useRouter();
+    const params = 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.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,
+    ]);
+    // ≤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 (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 jsx(Fragment$1, { children: loadingComponent });
+    }
+    if (!extendedSession?.accessToken) {
+        return jsx(Fragment$1, { children: loadingComponent });
+    }
+    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 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-6", 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-[100px] sm:h-[144px] 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 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 (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 (!hasPolicyAccess) {
+        return (jsx("div", { className: shellClassName, children: jsx(Card, { children: jsx(CardContent, { className: "text-sm text-muted-foreground", children: deniedMessage }) }) }));
+    }
+    return jsx(Fragment$1, { children: children });
+}
+
+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 }));
+}
+/**
+ * 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 = 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 = 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 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({
+        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 jsx(Fragment$1, { 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 (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(Fragment$1, { children: children });
+}
+
 function ThemeProvider({ children, ...props }) {
     return jsx(ThemeProvider$1, { ...props, children: children });
 }
@@ -1048,61 +1318,6 @@ function ReactQueryProvider({ children }) {
     return (jsxs(QueryClientProvider, { client: queryClient, children: [children, jsx(ReactQueryDevtools, { client: queryClient, initialIsOpen: false })] }));
 }
 
-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 }));
-}
-/**
- * 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 = 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
@@ -1411,5 +1626,5 @@ const getAxiosErrorMessage = (error) => {
     return String(error);
 };
 
-export { ApiError, AppBreadcrumb, AppSidebar, FeatureFlagsProvider, HeaderBackground, NavMain, NavTools, NavUser, OrganizationSwitcher, 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, isLikelyTransientNetworkError, isPathActive, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
+export { 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, runGlobalRequestPrecheck, runWithTransientRetry, setOrganizationId, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle };
 //# sourceMappingURL=index.esm.js.map