UN-2781 [FIX] Fix admin route issue

frontend/src/pages/UnstractAdministrationPage.jsx

@@ -1,4 +1,5 @@
 import "./UnstractAdministrationPage.css";
+import { useSessionStore } from "../store/session-store";
 
 let UnstractAdministration;
 
@@ -11,6 +12,28 @@ try {
 }
 
 function UnstractAdministrationPage() {
+  const { sessionDetails } = useSessionStore();
+
+  // Wait for session to load before making authorization decisions
+  if (!sessionDetails) {
+    return null;
+  }
+
+  const isStaff = sessionDetails?.isStaff || sessionDetails?.is_staff;
+  const orgName = sessionDetails?.orgName;
+  const isOpenSource = orgName === "mock_org";
+
+  // Staff permission check - protects route at component level
+  if (!isStaff || isOpenSource) {
+    return (
+      <div className="administration-fallback">
+        <h2>Access Denied</h2>
+        <p>This feature requires staff permissions.</p>
+      </div>
+    );
+  }
+
+  // Cloud-only feature check
   if (!UnstractAdministration) {
     return (
       <div className="administration-fallback">
@@ -19,6 +42,7 @@ function UnstractAdministrationPage() {
       </div>
     );
   }
+
   return <UnstractAdministration />;
 }
 

frontend/src/routes/useMainAppRoutes.js

@@ -6,7 +6,6 @@ import { ToolsSettingsPage } from "../pages/ToolsSettingsPage.jsx";
 import { SettingsPage } from "../pages/SettingsPage.jsx";
 import { PlatformSettings } from "../components/settings/platform/PlatformSettings.jsx";
 import { RequireAdmin } from "../components/helpers/auth/RequireAdmin.js";
-import { useSessionStore } from "../store/session-store";
 import { UsersPage } from "../pages/UsersPage.jsx";
 import { InviteEditUserPage } from "../pages/InviteEditUserPage.jsx";
 import { DefaultTriad } from "../components/settings/default-triad/DefaultTriad.jsx";
@@ -100,11 +99,6 @@ try {
 }
 
 function useMainAppRoutes() {
-  const { sessionDetails } = useSessionStore();
-  const isStaff = sessionDetails?.isStaff || sessionDetails?.is_staff;
-  const orgName = sessionDetails?.orgName;
-  const isOpenSource = orgName === "mock_org";
-
   const routes = (
     <>
       <Route path=":orgName" element={<FullPageLayout />}>
@@ -124,12 +118,10 @@ function useMainAppRoutes() {
             <Route path="pricing" element={<UnstractSubscriptionPage />} />
           </Route>
         )}
-        {isStaff && !isOpenSource && (
-          <Route
-            path="admin/custom-plans"
-            element={<UnstractAdministrationPage />}
-          />
-        )}
+        <Route
+          path="admin/custom-plans"
+          element={<UnstractAdministrationPage />}
+        />
         <Route path="profile" element={<ProfilePage />} />
         <Route
           path="api"