@eintrek/erp-shell 0.1.11 → 0.1.13

package/dist/index.js

@@ -351,9 +351,15 @@ function useOrganizationIdState(initialOrganizationId, actions) {
 }
 
 /**
- * Invalidate ALL React Query queries when `organizationId` changes
- * (skips the initial mount). Use inside the ERP provider so org-scoped
- * data is refetched cleanly when the user switches org.
+ * Invalidate ALL React Query queries when `organizationId` changes between
+ * two real orgs (e.g. the user switches org in the picker). Skips the
+ * initial mount and the first-resolve transition (undefined/null/"" → x)
+ * — that's the URL `[code]` segment finally syncing into the ERP context,
+ * not a real switch, and invalidating there triggers a cascade of refetches
+ * on top of the queries that already just fired.
+ *
+ * Use inside the ERP provider so org-scoped data is wiped cleanly when the
+ * user really does switch between two orgs.
  */
 function useInvalidateQueriesOnOrgChange(organizationId) {
     const queryClient = reactQuery.useQueryClient();
@@ -367,7 +373,15 @@ function useInvalidateQueriesOnOrgChange(organizationId) {
         }
         if (previousRef.current === organizationId)
             return;
+        const wasEmpty = previousRef.current === undefined ||
+            previousRef.current === null ||
+            previousRef.current === "";
         previousRef.current = organizationId;
+        // First-resolve: nothing to invalidate yet (queries either haven't run
+        // or are running with the right key already). Real org switches (a → b)
+        // still hit the invalidate path below.
+        if (wasEmpty)
+            return;
         queryClient.invalidateQueries();
     }, [organizationId, queryClient]);
 }
@@ -1208,12 +1222,27 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
         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 (jsxRuntime.jsx(erpTheme.Card, { className: "p-6", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E01\u0E32\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07..." })] }) }));
+        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))) })] }))] })] }) }));