feat: added virtual route to mount the layout without wrapping again

frontend-v2/package-lock.json

@@ -44,6 +44,7 @@
         "@sindresorhus/slugify": "^2.2.1",
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-router": "^1.87.9",
+        "@tanstack/virtual-file-routes": "^1.87.6",
         "@types/nprogress": "^0.2.3",
         "@ucast/mongo2js": "^1.3.4",
         "argon2-browser": "^1.18.0",
@@ -3845,7 +3846,6 @@
       "version": "1.87.6",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.87.6.tgz",
       "integrity": "sha512-PTpeM8SHL7AJM0pJOacFvHribbUODS51qe9NsMqku4mogh6BWObY1EeVmeGnp9o3VngAEsf+rJMs2zqIVz3WFA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"

frontend-v2/package.json

@@ -48,6 +48,7 @@
     "@sindresorhus/slugify": "^2.2.1",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-router": "^1.87.9",
+    "@tanstack/virtual-file-routes": "^1.87.6",
     "@types/nprogress": "^0.2.3",
     "@ucast/mongo2js": "^1.3.4",
     "argon2-browser": "^1.18.0",

frontend-v2/src/context/OrgPermissionContext/OrgPermissionContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from "react";
+import { createContext, ReactNode } from "react";
+import { useRouteContext } from "@tanstack/react-router";
 
 import { useGetUserOrgPermissions } from "@app/hooks/api";
 import { OrgUser } from "@app/hooks/api/types";
@@ -49,10 +50,10 @@ export const OrgPermissionProvider = ({ children }: Props): JSX.Element => {
 };
 
 export const useOrgPermission = () => {
-  const ctx = useContext(OrgPermissionContext);
+  const { permission } = useRouteContext({
-  if (!ctx) {
+    from: "/_authenticate/_org_details",
-    throw new Error("useOrgPermission to be used within <OrgPermissionProvider>");
+    select: (el) => el.orgPermission
-  }
+  });
 
-  return ctx;
+  return permission;
 };

frontend-v2/src/hooks/api/roles/queries.tsx

@@ -35,7 +35,7 @@ const glob: JsInterpreter<FieldCondition<string>> = (node, object, context) => {
   return picomatch.isMatch(secretPath, permissionSecretGlobPath, { strictSlashes: false });
 };
 
-const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
+export const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
 
 export const roleQueryKeys = {
   getProjectRoles: (projectId: string) => ["roles", { projectId }] as const,
@@ -107,7 +107,7 @@ export const useGetOrgRole = (orgId: string, roleId: string) =>
     enabled: Boolean(orgId && roleId)
   });
 
-const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
+export const fetchUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
   if (orgId === "") return { permissions: [], membership: null };
 
   const { data } = await apiRequest.get<{
@@ -121,7 +121,7 @@ const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
 export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =>
   useQuery({
     queryKey: roleQueryKeys.getUserOrgPermissions({ orgId }),
-    queryFn: () => getUserOrgPermissions({ orgId }),
+    queryFn: () => fetchUserOrgPermissions({ orgId }),
     // enabled: Boolean(orgId),
     select: (data) => {
       const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data.permissions);

frontend-v2/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx

@@ -16,7 +16,9 @@ import { InsecureConnectionBanner } from "../OrganizationLayout/components/Insec
 import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/SidebarFooter/SidebarFooter";
 
 export const PersonalSettingsLayout = () => {
-  const { organizationId } = useRouteContext({ from: "/_authenticate/_personal_settings_layout" });
+  const { organizationId } = useRouteContext({
+    from: "/_authenticate/personal-settings/_personal-settings-layout"
+  });
   const { t } = useTranslation();
 
   const infisicalPlatformVersion = import.meta.env.VITE_INFISICAL_PLATFORM_VERSION;

frontend-v2/src/routeTree.gen.ts

@@ -8,6 +8,8 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
+import { createFileRoute } from '@tanstack/react-router'
+
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
@@ -20,21 +22,27 @@ import { Route as RestrictloginsignupRequestnewinviteImport } from './routes/_re
 import { Route as RestrictloginsignupPasswordResetImport } from './routes/_restrict_login_signup/password-reset'
 import { Route as RestrictloginsignupEmailNotVerifiedImport } from './routes/_restrict_login_signup/email-not-verified'
 import { Route as AuthenticateCliRedirectImport } from './routes/_authenticate/cli-redirect'
-import { Route as AuthenticatePersonalsettingslayoutImport } from './routes/_authenticate/_personal_settings_layout'
 import { Route as AuthenticateOrgdetailsImport } from './routes/_authenticate/_org_details'
 import { Route as RestrictloginsignupSignupIndexImport } from './routes/_restrict_login_signup/signup/index'
 import { Route as RestrictloginsignupLoginIndexImport } from './routes/_restrict_login_signup/login/index'
-import { Route as AuthenticateOrgdetailsOrganizationlayoutImport } from './routes/_authenticate/_org_details/_organization_layout'
+import { Route as authenticatePersonalSettingsLayoutImport } from './routes/_authenticate/personal-settings/layout'
+import { Route as authenticateOrgdetailsLayoutImport } from './routes/_authenticate/_org_details/layout'
 import { Route as RestrictloginsignupSignupSsoIndexImport } from './routes/_restrict_login_signup/signup/sso/index'
 import { Route as RestrictloginsignupLoginSsoIndexImport } from './routes/_restrict_login_signup/login/sso/index'
 import { Route as RestrictloginsignupLoginSelectOrganizationIndexImport } from './routes/_restrict_login_signup/login/select-organization/index'
 import { Route as RestrictloginsignupLoginLdapIndexImport } from './routes/_restrict_login_signup/login/ldap/index'
-import { Route as AuthenticatePersonalsettingslayoutPersonalSettingsIndexImport } from './routes/_authenticate/_personal_settings_layout/personal-settings/index'
+import { Route as authenticatePersonalSettingsIndexImport } from './routes/_authenticate/personal-settings/index'
 import { Route as RestrictloginsignupLoginProviderSuccessImport } from './routes/_restrict_login_signup/login/provider/success'
 import { Route as RestrictloginsignupLoginProviderErrorImport } from './routes/_restrict_login_signup/login/provider/error'
-import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport } from './routes/_authenticate/_org_details/_organization_layout/organization/index'
+import { Route as authenticateOrgdetailsOrganizationIndexImport } from './routes/_authenticate/_org_details/organization/index'
-import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport } from './routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/index'
+import { Route as authenticateOrgdetailsOrganizationOrganizationIdIndexImport } from './routes/_authenticate/_org_details/organization/$organizationId/index'
-import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport } from './routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
+import { Route as authenticateOrgdetailsOrganizationOrganizationIdSecretManagerImport } from './routes/_authenticate/_org_details/organization/$organizationId/secret-manager'
+
+// Create Virtual Routes
+
+const AuthenticatePersonalSettingsImport = createFileRoute(
+  '/_authenticate/personal-settings',
+)()
 
 // Create/Update Routes
 
@@ -54,6 +62,13 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const AuthenticatePersonalSettingsRoute =
+  AuthenticatePersonalSettingsImport.update({
+    id: '/personal-settings',
+    path: '/personal-settings',
+    getParentRoute: () => AuthenticateRoute,
+  } as any)
+
 const RestrictloginsignupVerifyEmailRoute =
   RestrictloginsignupVerifyEmailImport.update({
     id: '/verify-email',
@@ -95,12 +110,6 @@ const AuthenticateCliRedirectRoute = AuthenticateCliRedirectImport.update({
   getParentRoute: () => AuthenticateRoute,
 } as any)
 
-const AuthenticatePersonalsettingslayoutRoute =
-  AuthenticatePersonalsettingslayoutImport.update({
-    id: '/_personal_settings_layout',
-    getParentRoute: () => AuthenticateRoute,
-  } as any)
-
 const AuthenticateOrgdetailsRoute = AuthenticateOrgdetailsImport.update({
   id: '/_org_details',
   getParentRoute: () => AuthenticateRoute,
@@ -120,9 +129,15 @@ const RestrictloginsignupLoginIndexRoute =
     getParentRoute: () => RestrictloginsignupRoute,
   } as any)
 
-const AuthenticateOrgdetailsOrganizationlayoutRoute =
+const authenticatePersonalSettingsLayoutRoute =
-  AuthenticateOrgdetailsOrganizationlayoutImport.update({
+  authenticatePersonalSettingsLayoutImport.update({
-    id: '/_organization_layout',
+    id: '/_personal-settings-layout',
+    getParentRoute: () => AuthenticatePersonalSettingsRoute,
+  } as any)
+
+const authenticateOrgdetailsLayoutRoute =
+  authenticateOrgdetailsLayoutImport.update({
+    id: '/_org-layout',
     getParentRoute: () => AuthenticateOrgdetailsRoute,
   } as any)
 
@@ -154,11 +169,11 @@ const RestrictloginsignupLoginLdapIndexRoute =
     getParentRoute: () => RestrictloginsignupRoute,
   } as any)
 
-const AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute =
+const authenticatePersonalSettingsIndexRoute =
-  AuthenticatePersonalsettingslayoutPersonalSettingsIndexImport.update({
+  authenticatePersonalSettingsIndexImport.update({
-    id: '/personal-settings/',
+    id: '/',
-    path: '/personal-settings/',
+    path: '/',
-    getParentRoute: () => AuthenticatePersonalsettingslayoutRoute,
+    getParentRoute: () => authenticatePersonalSettingsLayoutRoute,
   } as any)
 
 const RestrictloginsignupLoginProviderSuccessRoute =
@@ -175,30 +190,26 @@ const RestrictloginsignupLoginProviderErrorRoute =
     getParentRoute: () => RestrictloginsignupRoute,
   } as any)
 
-const AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute =
+const authenticateOrgdetailsOrganizationIndexRoute =
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport.update({
+  authenticateOrgdetailsOrganizationIndexImport.update({
     id: '/organization/',
     path: '/organization/',
-    getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+    getParentRoute: () => authenticateOrgdetailsLayoutRoute,
   } as any)
 
-const AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute =
+const authenticateOrgdetailsOrganizationOrganizationIdIndexRoute =
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport.update(
+  authenticateOrgdetailsOrganizationOrganizationIdIndexImport.update({
-    {
+    id: '/organization/$organizationId/',
-      id: '/organization/$organizationId/',
+    path: '/organization/$organizationId/',
-      path: '/organization/$organizationId/',
+    getParentRoute: () => authenticateOrgdetailsLayoutRoute,
-      getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+  } as any)
-    } as any,
-  )
 
-const AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute =
+const authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute =
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport.update(
+  authenticateOrgdetailsOrganizationOrganizationIdSecretManagerImport.update({
-    {
+    id: '/organization/$organizationId/secret-manager',
-      id: '/organization/$organizationId/secret-manager',
+    path: '/organization/$organizationId/secret-manager',
-      path: '/organization/$organizationId/secret-manager',
+    getParentRoute: () => authenticateOrgdetailsLayoutRoute,
-      getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+  } as any)
-    } as any,
-  )
 
 // Populate the FileRoutesByPath interface
 
@@ -232,13 +243,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticateOrgdetailsImport
       parentRoute: typeof AuthenticateImport
     }
-    '/_authenticate/_personal_settings_layout': {
-      id: '/_authenticate/_personal_settings_layout'
-      path: ''
-      fullPath: ''
-      preLoaderRoute: typeof AuthenticatePersonalsettingslayoutImport
-      parentRoute: typeof AuthenticateImport
-    }
     '/_authenticate/cli-redirect': {
       id: '/_authenticate/cli-redirect'
       path: '/cli-redirect'
@@ -281,13 +285,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RestrictloginsignupVerifyEmailImport
       parentRoute: typeof RestrictloginsignupImport
     }
-    '/_authenticate/_org_details/_organization_layout': {
+    '/_authenticate/_org_details/_org-layout': {
-      id: '/_authenticate/_org_details/_organization_layout'
+      id: '/_authenticate/_org_details/_org-layout'
       path: ''
       fullPath: ''
-      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+      preLoaderRoute: typeof authenticateOrgdetailsLayoutImport
       parentRoute: typeof AuthenticateOrgdetailsImport
     }
+    '/_authenticate/personal-settings': {
+      id: '/_authenticate/personal-settings'
+      path: '/personal-settings'
+      fullPath: '/personal-settings'
+      preLoaderRoute: typeof AuthenticatePersonalSettingsImport
+      parentRoute: typeof AuthenticateImport
+    }
+    '/_authenticate/personal-settings/_personal-settings-layout': {
+      id: '/_authenticate/personal-settings/_personal-settings-layout'
+      path: '/personal-settings'
+      fullPath: '/personal-settings'
+      preLoaderRoute: typeof authenticatePersonalSettingsLayoutImport
+      parentRoute: typeof AuthenticatePersonalSettingsRoute
+    }
     '/_restrict_login_signup/login/': {
       id: '/_restrict_login_signup/login/'
       path: '/login'
@@ -316,12 +334,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RestrictloginsignupLoginProviderSuccessImport
       parentRoute: typeof RestrictloginsignupImport
     }
-    '/_authenticate/_personal_settings_layout/personal-settings/': {
+    '/_authenticate/personal-settings/_personal-settings-layout/': {
-      id: '/_authenticate/_personal_settings_layout/personal-settings/'
+      id: '/_authenticate/personal-settings/_personal-settings-layout/'
-      path: '/personal-settings'
+      path: '/'
-      fullPath: '/personal-settings'
+      fullPath: '/personal-settings/'
-      preLoaderRoute: typeof AuthenticatePersonalsettingslayoutPersonalSettingsIndexImport
+      preLoaderRoute: typeof authenticatePersonalSettingsIndexImport
-      parentRoute: typeof AuthenticatePersonalsettingslayoutImport
+      parentRoute: typeof authenticatePersonalSettingsLayoutImport
     }
     '/_restrict_login_signup/login/ldap/': {
       id: '/_restrict_login_signup/login/ldap/'
@@ -351,61 +369,61 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RestrictloginsignupSignupSsoIndexImport
       parentRoute: typeof RestrictloginsignupImport
     }
-    '/_authenticate/_org_details/_organization_layout/organization/': {
+    '/_authenticate/_org_details/_org-layout/organization/': {
-      id: '/_authenticate/_org_details/_organization_layout/organization/'
+      id: '/_authenticate/_org_details/_org-layout/organization/'
       path: '/organization'
       fullPath: '/organization'
-      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport
+      preLoaderRoute: typeof authenticateOrgdetailsOrganizationIndexImport
-      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+      parentRoute: typeof authenticateOrgdetailsLayoutImport
     }
-    '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager': {
+    '/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager': {
-      id: '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
+      id: '/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager'
       path: '/organization/$organizationId/secret-manager'
       fullPath: '/organization/$organizationId/secret-manager'
-      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport
+      preLoaderRoute: typeof authenticateOrgdetailsOrganizationOrganizationIdSecretManagerImport
-      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+      parentRoute: typeof authenticateOrgdetailsLayoutImport
     }
-    '/_authenticate/_org_details/_organization_layout/organization/$organizationId/': {
+    '/_authenticate/_org_details/_org-layout/organization/$organizationId/': {
-      id: '/_authenticate/_org_details/_organization_layout/organization/$organizationId/'
+      id: '/_authenticate/_org_details/_org-layout/organization/$organizationId/'
       path: '/organization/$organizationId'
       fullPath: '/organization/$organizationId'
-      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport
+      preLoaderRoute: typeof authenticateOrgdetailsOrganizationOrganizationIdIndexImport
-      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+      parentRoute: typeof authenticateOrgdetailsLayoutImport
     }
   }
 }
 
 // Create and export the route tree
 
-interface AuthenticateOrgdetailsOrganizationlayoutRouteChildren {
+interface authenticateOrgdetailsLayoutRouteChildren {
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  authenticateOrgdetailsOrganizationIndexRoute: typeof authenticateOrgdetailsOrganizationIndexRoute
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute: typeof authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute
-  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
+  authenticateOrgdetailsOrganizationOrganizationIdIndexRoute: typeof authenticateOrgdetailsOrganizationOrganizationIdIndexRoute
 }
 
-const AuthenticateOrgdetailsOrganizationlayoutRouteChildren: AuthenticateOrgdetailsOrganizationlayoutRouteChildren =
+const authenticateOrgdetailsLayoutRouteChildren: authenticateOrgdetailsLayoutRouteChildren =
   {
-    AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute:
+    authenticateOrgdetailsOrganizationIndexRoute:
-      AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute,
+      authenticateOrgdetailsOrganizationIndexRoute,
-    AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute:
+    authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute:
-      AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute,
+      authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute,
-    AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute:
+    authenticateOrgdetailsOrganizationOrganizationIdIndexRoute:
-      AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute,
+      authenticateOrgdetailsOrganizationOrganizationIdIndexRoute,
   }
 
-const AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren =
+const authenticateOrgdetailsLayoutRouteWithChildren =
-  AuthenticateOrgdetailsOrganizationlayoutRoute._addFileChildren(
+  authenticateOrgdetailsLayoutRoute._addFileChildren(
-    AuthenticateOrgdetailsOrganizationlayoutRouteChildren,
+    authenticateOrgdetailsLayoutRouteChildren,
   )
 
 interface AuthenticateOrgdetailsRouteChildren {
-  AuthenticateOrgdetailsOrganizationlayoutRoute: typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
+  authenticateOrgdetailsLayoutRoute: typeof authenticateOrgdetailsLayoutRouteWithChildren
 }
 
 const AuthenticateOrgdetailsRouteChildren: AuthenticateOrgdetailsRouteChildren =
   {
-    AuthenticateOrgdetailsOrganizationlayoutRoute:
+    authenticateOrgdetailsLayoutRoute:
-      AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren,
+      authenticateOrgdetailsLayoutRouteWithChildren,
   }
 
 const AuthenticateOrgdetailsRouteWithChildren =
@@ -413,32 +431,47 @@ const AuthenticateOrgdetailsRouteWithChildren =
     AuthenticateOrgdetailsRouteChildren,
   )
 
-interface AuthenticatePersonalsettingslayoutRouteChildren {
+interface authenticatePersonalSettingsLayoutRouteChildren {
-  AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute: typeof AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute
+  authenticatePersonalSettingsIndexRoute: typeof authenticatePersonalSettingsIndexRoute
 }
 
-const AuthenticatePersonalsettingslayoutRouteChildren: AuthenticatePersonalsettingslayoutRouteChildren =
+const authenticatePersonalSettingsLayoutRouteChildren: authenticatePersonalSettingsLayoutRouteChildren =
   {
-    AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute:
+    authenticatePersonalSettingsIndexRoute:
-      AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute,
+      authenticatePersonalSettingsIndexRoute,
   }
 
-const AuthenticatePersonalsettingslayoutRouteWithChildren =
+const authenticatePersonalSettingsLayoutRouteWithChildren =
-  AuthenticatePersonalsettingslayoutRoute._addFileChildren(
+  authenticatePersonalSettingsLayoutRoute._addFileChildren(
-    AuthenticatePersonalsettingslayoutRouteChildren,
+    authenticatePersonalSettingsLayoutRouteChildren,
+  )
+
+interface AuthenticatePersonalSettingsRouteChildren {
+  authenticatePersonalSettingsLayoutRoute: typeof authenticatePersonalSettingsLayoutRouteWithChildren
+}
+
+const AuthenticatePersonalSettingsRouteChildren: AuthenticatePersonalSettingsRouteChildren =
+  {
+    authenticatePersonalSettingsLayoutRoute:
+      authenticatePersonalSettingsLayoutRouteWithChildren,
+  }
+
+const AuthenticatePersonalSettingsRouteWithChildren =
+  AuthenticatePersonalSettingsRoute._addFileChildren(
+    AuthenticatePersonalSettingsRouteChildren,
   )
 
 interface AuthenticateRouteChildren {
   AuthenticateOrgdetailsRoute: typeof AuthenticateOrgdetailsRouteWithChildren
-  AuthenticatePersonalsettingslayoutRoute: typeof AuthenticatePersonalsettingslayoutRouteWithChildren
   AuthenticateCliRedirectRoute: typeof AuthenticateCliRedirectRoute
+  AuthenticatePersonalSettingsRoute: typeof AuthenticatePersonalSettingsRouteWithChildren
 }
 
 const AuthenticateRouteChildren: AuthenticateRouteChildren = {
   AuthenticateOrgdetailsRoute: AuthenticateOrgdetailsRouteWithChildren,
-  AuthenticatePersonalsettingslayoutRoute:
-    AuthenticatePersonalsettingslayoutRouteWithChildren,
   AuthenticateCliRedirectRoute: AuthenticateCliRedirectRoute,
+  AuthenticatePersonalSettingsRoute:
+    AuthenticatePersonalSettingsRouteWithChildren,
 }
 
 const AuthenticateRouteWithChildren = AuthenticateRoute._addFileChildren(
@@ -489,48 +522,49 @@ const RestrictloginsignupRouteWithChildren =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
+  '': typeof authenticateOrgdetailsLayoutRouteWithChildren
   '/cli-redirect': typeof AuthenticateCliRedirectRoute
   '/email-not-verified': typeof RestrictloginsignupEmailNotVerifiedRoute
   '/password-reset': typeof RestrictloginsignupPasswordResetRoute
   '/requestnewinvite': typeof RestrictloginsignupRequestnewinviteRoute
   '/signupinvite': typeof RestrictloginsignupSignupinviteRoute
   '/verify-email': typeof RestrictloginsignupVerifyEmailRoute
+  '/personal-settings': typeof authenticatePersonalSettingsLayoutRouteWithChildren
   '/login': typeof RestrictloginsignupLoginIndexRoute
   '/signup': typeof RestrictloginsignupSignupIndexRoute
   '/login/provider/error': typeof RestrictloginsignupLoginProviderErrorRoute
   '/login/provider/success': typeof RestrictloginsignupLoginProviderSuccessRoute
-  '/personal-settings': typeof AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute
+  '/personal-settings/': typeof authenticatePersonalSettingsIndexRoute
   '/login/ldap': typeof RestrictloginsignupLoginLdapIndexRoute
   '/login/select-organization': typeof RestrictloginsignupLoginSelectOrganizationIndexRoute
   '/login/sso': typeof RestrictloginsignupLoginSsoIndexRoute
   '/signup/sso': typeof RestrictloginsignupSignupSsoIndexRoute
-  '/organization': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  '/organization': typeof authenticateOrgdetailsOrganizationIndexRoute
-  '/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/organization/$organizationId/secret-manager': typeof authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute
-  '/organization/$organizationId': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
+  '/organization/$organizationId': typeof authenticateOrgdetailsOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
+  '': typeof authenticateOrgdetailsLayoutRouteWithChildren
   '/cli-redirect': typeof AuthenticateCliRedirectRoute
   '/email-not-verified': typeof RestrictloginsignupEmailNotVerifiedRoute
   '/password-reset': typeof RestrictloginsignupPasswordResetRoute
   '/requestnewinvite': typeof RestrictloginsignupRequestnewinviteRoute
   '/signupinvite': typeof RestrictloginsignupSignupinviteRoute
   '/verify-email': typeof RestrictloginsignupVerifyEmailRoute
+  '/personal-settings': typeof authenticatePersonalSettingsIndexRoute
   '/login': typeof RestrictloginsignupLoginIndexRoute
   '/signup': typeof RestrictloginsignupSignupIndexRoute
   '/login/provider/error': typeof RestrictloginsignupLoginProviderErrorRoute
   '/login/provider/success': typeof RestrictloginsignupLoginProviderSuccessRoute
-  '/personal-settings': typeof AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute
   '/login/ldap': typeof RestrictloginsignupLoginLdapIndexRoute
   '/login/select-organization': typeof RestrictloginsignupLoginSelectOrganizationIndexRoute
   '/login/sso': typeof RestrictloginsignupLoginSsoIndexRoute
   '/signup/sso': typeof RestrictloginsignupSignupSsoIndexRoute
-  '/organization': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  '/organization': typeof authenticateOrgdetailsOrganizationIndexRoute
-  '/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/organization/$organizationId/secret-manager': typeof authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute
-  '/organization/$organizationId': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
+  '/organization/$organizationId': typeof authenticateOrgdetailsOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRoutesById {
@@ -539,26 +573,27 @@ export interface FileRoutesById {
   '/_authenticate': typeof AuthenticateRouteWithChildren
   '/_restrict_login_signup': typeof RestrictloginsignupRouteWithChildren
   '/_authenticate/_org_details': typeof AuthenticateOrgdetailsRouteWithChildren
-  '/_authenticate/_personal_settings_layout': typeof AuthenticatePersonalsettingslayoutRouteWithChildren
   '/_authenticate/cli-redirect': typeof AuthenticateCliRedirectRoute
   '/_restrict_login_signup/email-not-verified': typeof RestrictloginsignupEmailNotVerifiedRoute
   '/_restrict_login_signup/password-reset': typeof RestrictloginsignupPasswordResetRoute
   '/_restrict_login_signup/requestnewinvite': typeof RestrictloginsignupRequestnewinviteRoute
   '/_restrict_login_signup/signupinvite': typeof RestrictloginsignupSignupinviteRoute
   '/_restrict_login_signup/verify-email': typeof RestrictloginsignupVerifyEmailRoute
-  '/_authenticate/_org_details/_organization_layout': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
+  '/_authenticate/_org_details/_org-layout': typeof authenticateOrgdetailsLayoutRouteWithChildren
+  '/_authenticate/personal-settings': typeof AuthenticatePersonalSettingsRouteWithChildren
+  '/_authenticate/personal-settings/_personal-settings-layout': typeof authenticatePersonalSettingsLayoutRouteWithChildren
   '/_restrict_login_signup/login/': typeof RestrictloginsignupLoginIndexRoute
   '/_restrict_login_signup/signup/': typeof RestrictloginsignupSignupIndexRoute
   '/_restrict_login_signup/login/provider/error': typeof RestrictloginsignupLoginProviderErrorRoute
   '/_restrict_login_signup/login/provider/success': typeof RestrictloginsignupLoginProviderSuccessRoute
-  '/_authenticate/_personal_settings_layout/personal-settings/': typeof AuthenticatePersonalsettingslayoutPersonalSettingsIndexRoute
+  '/_authenticate/personal-settings/_personal-settings-layout/': typeof authenticatePersonalSettingsIndexRoute
   '/_restrict_login_signup/login/ldap/': typeof RestrictloginsignupLoginLdapIndexRoute
   '/_restrict_login_signup/login/select-organization/': typeof RestrictloginsignupLoginSelectOrganizationIndexRoute
   '/_restrict_login_signup/login/sso/': typeof RestrictloginsignupLoginSsoIndexRoute
   '/_restrict_login_signup/signup/sso/': typeof RestrictloginsignupSignupSsoIndexRoute
-  '/_authenticate/_org_details/_organization_layout/organization/': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  '/_authenticate/_org_details/_org-layout/organization/': typeof authenticateOrgdetailsOrganizationIndexRoute
-  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager': typeof authenticateOrgdetailsOrganizationOrganizationIdSecretManagerRoute
-  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
+  '/_authenticate/_org_details/_org-layout/organization/$organizationId/': typeof authenticateOrgdetailsOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRouteTypes {
@@ -572,11 +607,12 @@ export interface FileRouteTypes {
     | '/requestnewinvite'
     | '/signupinvite'
     | '/verify-email'
+    | '/personal-settings'
     | '/login'
     | '/signup'
     | '/login/provider/error'
     | '/login/provider/success'
-    | '/personal-settings'
+    | '/personal-settings/'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
@@ -594,11 +630,11 @@ export interface FileRouteTypes {
     | '/requestnewinvite'
     | '/signupinvite'
     | '/verify-email'
+    | '/personal-settings'
     | '/login'
     | '/signup'
     | '/login/provider/error'
     | '/login/provider/success'
-    | '/personal-settings'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
@@ -612,26 +648,27 @@ export interface FileRouteTypes {
     | '/_authenticate'
     | '/_restrict_login_signup'
     | '/_authenticate/_org_details'
-    | '/_authenticate/_personal_settings_layout'
     | '/_authenticate/cli-redirect'
     | '/_restrict_login_signup/email-not-verified'
     | '/_restrict_login_signup/password-reset'
     | '/_restrict_login_signup/requestnewinvite'
     | '/_restrict_login_signup/signupinvite'
     | '/_restrict_login_signup/verify-email'
-    | '/_authenticate/_org_details/_organization_layout'
+    | '/_authenticate/_org_details/_org-layout'
+    | '/_authenticate/personal-settings'
+    | '/_authenticate/personal-settings/_personal-settings-layout'
     | '/_restrict_login_signup/login/'
     | '/_restrict_login_signup/signup/'
     | '/_restrict_login_signup/login/provider/error'
     | '/_restrict_login_signup/login/provider/success'
-    | '/_authenticate/_personal_settings_layout/personal-settings/'
+    | '/_authenticate/personal-settings/_personal-settings-layout/'
     | '/_restrict_login_signup/login/ldap/'
     | '/_restrict_login_signup/login/select-organization/'
     | '/_restrict_login_signup/login/sso/'
     | '/_restrict_login_signup/signup/sso/'
-    | '/_authenticate/_org_details/_organization_layout/organization/'
+    | '/_authenticate/_org_details/_org-layout/organization/'
-    | '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
+    | '/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager'
-    | '/_authenticate/_org_details/_organization_layout/organization/$organizationId/'
+    | '/_authenticate/_org_details/_org-layout/organization/$organizationId/'
   fileRoutesById: FileRoutesById
 }
 
@@ -669,8 +706,8 @@ export const routeTree = rootRoute
       "filePath": "_authenticate.tsx",
       "children": [
         "/_authenticate/_org_details",
-        "/_authenticate/_personal_settings_layout",
+        "/_authenticate/cli-redirect",
-        "/_authenticate/cli-redirect"
+        "/_authenticate/personal-settings"
       ]
     },
     "/_restrict_login_signup": {
@@ -695,14 +732,7 @@ export const routeTree = rootRoute
       "filePath": "_authenticate/_org_details.tsx",
       "parent": "/_authenticate",
       "children": [
-        "/_authenticate/_org_details/_organization_layout"
+        "/_authenticate/_org_details/_org-layout"
-      ]
-    },
-    "/_authenticate/_personal_settings_layout": {
-      "filePath": "_authenticate/_personal_settings_layout.tsx",
-      "parent": "/_authenticate",
-      "children": [
-        "/_authenticate/_personal_settings_layout/personal-settings/"
       ]
     },
     "/_authenticate/cli-redirect": {
@@ -729,13 +759,27 @@ export const routeTree = rootRoute
       "filePath": "_restrict_login_signup/verify-email.tsx",
       "parent": "/_restrict_login_signup"
     },
-    "/_authenticate/_org_details/_organization_layout": {
+    "/_authenticate/_org_details/_org-layout": {
-      "filePath": "_authenticate/_org_details/_organization_layout.tsx",
+      "filePath": "_authenticate/_org_details/layout.tsx",
       "parent": "/_authenticate/_org_details",
       "children": [
-        "/_authenticate/_org_details/_organization_layout/organization/",
+        "/_authenticate/_org_details/_org-layout/organization/",
-        "/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager",
+        "/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager",
-        "/_authenticate/_org_details/_organization_layout/organization/$organizationId/"
+        "/_authenticate/_org_details/_org-layout/organization/$organizationId/"
+      ]
+    },
+    "/_authenticate/personal-settings": {
+      "filePath": "_authenticate/personal-settings",
+      "parent": "/_authenticate",
+      "children": [
+        "/_authenticate/personal-settings/_personal-settings-layout"
+      ]
+    },
+    "/_authenticate/personal-settings/_personal-settings-layout": {
+      "filePath": "_authenticate/personal-settings/layout.tsx",
+      "parent": "/_authenticate/personal-settings",
+      "children": [
+        "/_authenticate/personal-settings/_personal-settings-layout/"
       ]
     },
     "/_restrict_login_signup/login/": {
@@ -754,9 +798,9 @@ export const routeTree = rootRoute
       "filePath": "_restrict_login_signup/login/provider/success.tsx",
       "parent": "/_restrict_login_signup"
     },
-    "/_authenticate/_personal_settings_layout/personal-settings/": {
+    "/_authenticate/personal-settings/_personal-settings-layout/": {
-      "filePath": "_authenticate/_personal_settings_layout/personal-settings/index.tsx",
+      "filePath": "_authenticate/personal-settings/index.tsx",
-      "parent": "/_authenticate/_personal_settings_layout"
+      "parent": "/_authenticate/personal-settings/_personal-settings-layout"
     },
     "/_restrict_login_signup/login/ldap/": {
       "filePath": "_restrict_login_signup/login/ldap/index.tsx",
@@ -774,17 +818,17 @@ export const routeTree = rootRoute
       "filePath": "_restrict_login_signup/signup/sso/index.tsx",
       "parent": "/_restrict_login_signup"
     },
-    "/_authenticate/_org_details/_organization_layout/organization/": {
+    "/_authenticate/_org_details/_org-layout/organization/": {
-      "filePath": "_authenticate/_org_details/_organization_layout/organization/index.tsx",
+      "filePath": "_authenticate/_org_details/organization/index.tsx",
-      "parent": "/_authenticate/_org_details/_organization_layout"
+      "parent": "/_authenticate/_org_details/_org-layout"
     },
-    "/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager": {
+    "/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager": {
-      "filePath": "_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager.tsx",
+      "filePath": "_authenticate/_org_details/organization/$organizationId/secret-manager.tsx",
-      "parent": "/_authenticate/_org_details/_organization_layout"
+      "parent": "/_authenticate/_org_details/_org-layout"
     },
-    "/_authenticate/_org_details/_organization_layout/organization/$organizationId/": {
+    "/_authenticate/_org_details/_org-layout/organization/$organizationId/": {
-      "filePath": "_authenticate/_org_details/_organization_layout/organization/$organizationId/index.tsx",
+      "filePath": "_authenticate/_org_details/organization/$organizationId/index.tsx",
-      "parent": "/_authenticate/_org_details/_organization_layout"
+      "parent": "/_authenticate/_org_details/_org-layout"
     }
   }
 }

frontend-v2/src/routes/_authenticate.tsx

@@ -8,31 +8,32 @@ import { fetchUserDetails } from "@app/hooks/api/users/queries";
 
 export const Route = createFileRoute("/_authenticate")({
   beforeLoad: async ({ context }) => {
-    try {
+    const data = await context.queryClient
-      const data = await context.queryClient.fetchQuery({
+      .fetchQuery({
         queryKey: authKeys.getAuthToken,
         queryFn: fetchAuthToken
-      });
+      })
-      setAuthToken(data.token);
+      .catch(() => {
-      if (!data.organizationId) {
+        createNotification({
-        throw redirect({ to: "/login/select-organization" });
+          type: "error",
-      }
+          title: "Access Restricted",
-
+          text: " You need to log in to access this page. Please log in to continue."
-      const user = await context.queryClient.fetchQuery({
+        });
-        queryKey: userKeys.getUser,
+        throw redirect({
-        queryFn: fetchUserDetails
+          to: "/login"
+        });
       });
 
-      return { organizationId: data.organizationId as string, isAuthenticated: true, user };
+    setAuthToken(data.token);
-    } catch {
+    if (!data.organizationId) {
-      createNotification({
+      throw redirect({ to: "/login/select-organization" });
-        type: "error",
-        title: "Access Restricted",
-        text: " You need to log in to access this page. Please log in to continue."
-      });
-      throw redirect({
-        to: "/login"
-      });
     }
+
+    const user = await context.queryClient.fetchQuery({
+      queryKey: userKeys.getUser,
+      queryFn: fetchUserDetails
+    });
+
+    return { organizationId: data.organizationId as string, isAuthenticated: true, user };
   }
 });

frontend-v2/src/routes/_authenticate/_org_details.tsx

@@ -1,6 +1,14 @@
+import { createMongoAbility, MongoAbility, RawRuleOf } from "@casl/ability";
+import { unpackRules } from "@casl/ability/extra";
 import { createFileRoute } from "@tanstack/react-router";
 
+import { OrgPermissionSet } from "@app/context/OrgPermissionContext/types";
 import { fetchOrganizationById, organizationKeys } from "@app/hooks/api/organization/queries";
+import {
+  conditionsMatcher,
+  fetchUserOrgPermissions,
+  roleQueryKeys
+} from "@app/hooks/api/roles/queries";
 import { fetchOrgSubscription, subscriptionQueryKeys } from "@app/hooks/api/subscriptions/queries";
 
 export const Route = createFileRoute("/_authenticate/_org_details")({
@@ -16,6 +24,18 @@ export const Route = createFileRoute("/_authenticate/_org_details")({
       queryFn: () => fetchOrgSubscription(organizationId)
     });
 
-    return { organization: orgDetails, subscription };
+    const orgPermission = await context.queryClient.fetchQuery({
+      queryKey: roleQueryKeys.getUserOrgPermissions({ orgId: organizationId }),
+      queryFn: () => fetchUserOrgPermissions({ orgId: organizationId })
+    });
+
+    const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(orgPermission.permissions);
+    const ability = createMongoAbility<OrgPermissionSet>(rule, { conditionsMatcher });
+
+    return {
+      organization: orgDetails,
+      subscription,
+      orgPermission: { permission: ability, membership: orgPermission.membership }
+    };
   }
 });

frontend-v2/src/routes/_authenticate/_org_details/__virtual.ts

@@ -0,0 +1,5 @@
+import { defineVirtualSubtreeConfig, layout, physical } from "@tanstack/virtual-file-routes";
+
+export default defineVirtualSubtreeConfig([
+  layout("org-layout", "layout.tsx", [physical("/organization", "organization")])
+]);

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/index.tsx

@@ -1,34 +0,0 @@
-import { createFileRoute, useRouteContext, useRouter } from "@tanstack/react-router";
-
-function RouteComponent() {
-  const user = useRouteContext({
-    from: "/_authenticate",
-    select: (el) => el.user
-  });
-  const router = useRouter();
-
-  return (
-    <div>
-      Hello {user?.email}!
-      <button
-        type="button"
-        onClick={() => {
-          router.invalidate({
-            filter: (d) => {
-              console.log(d);
-              return true;
-            }
-          });
-        }}
-      >
-        Click
-      </button>
-    </div>
-  );
-}
-
-export const Route = createFileRoute(
-  "/_authenticate/_org_details/_organization_layout/organization/$organizationId/"
-)({
-  component: RouteComponent
-});

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager.tsx

@@ -1,11 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-function SecretManagerOverviewPage() {
-  return <div>Hello "/organization/secret-manager"!</div>;
-}
-
-export const Route = createFileRoute(
-  "/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager"
-)({
-  component: SecretManagerOverviewPage
-});

frontend-v2/src/routes/_authenticate/_org_details/layout.tsx

@@ -2,6 +2,6 @@ import { createFileRoute } from "@tanstack/react-router";
 
 import { OrganizationLayout } from "@app/layouts/OrganizationLayout";
 
-export const Route = createFileRoute("/_authenticate/_org_details/_organization_layout")({
+export const Route = createFileRoute("/_authenticate/_org_details/_org-layout")({
   component: OrganizationLayout
 });

frontend-v2/src/routes/_authenticate/_org_details/organization/$organizationId/index.tsx

@@ -0,0 +1,38 @@
+import {
+  createFileRoute,
+  useRouteContext,
+  useRouter,
+} from '@tanstack/react-router'
+
+function RouteComponent() {
+  const user = useRouteContext({
+    from: '/_authenticate',
+    select: (el) => el.user,
+  })
+  const router = useRouter()
+
+  return (
+    <div>
+      Hello {user?.email}!
+      <button
+        type="button"
+        onClick={() => {
+          router.invalidate({
+            filter: (d) => {
+              console.log(d)
+              return true
+            },
+          })
+        }}
+      >
+        Click
+      </button>
+    </div>
+  )
+}
+
+export const Route = createFileRoute(
+  '/_authenticate/_org_details/_org-layout/organization/$organizationId/',
+)({
+  component: RouteComponent,
+})

frontend-v2/src/routes/_authenticate/_org_details/organization/$organizationId/secret-manager.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+function SecretManagerOverviewPage() {
+  return <div>Hello "/organization/secret-manager"!</div>
+}
+
+export const Route = createFileRoute(
+  '/_authenticate/_org_details/_org-layout/organization/$organizationId/secret-manager',
+)({
+  component: SecretManagerOverviewPage,
+})

frontend-v2/src/routes/_authenticate/_org_details/organization/index.tsx

@@ -1,8 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 
-export const Route = createFileRoute(
+export const Route = createFileRoute("/_authenticate/_org_details/_org-layout/organization/")({
-  "/_authenticate/_org_details/_organization_layout/organization/"
-)({
   beforeLoad: ({ context }) => {
     redirect({
       throw: true,

frontend-v2/src/routes/_authenticate/personal-settings/__virtual.ts

@@ -0,0 +1,5 @@
+import { defineVirtualSubtreeConfig, index, layout } from "@tanstack/virtual-file-routes";
+
+export default defineVirtualSubtreeConfig([
+  layout("personal-settings-layout", "layout.tsx", [index("index.tsx")])
+]);

frontend-v2/src/routes/_authenticate/personal-settings/index.tsx

@@ -25,7 +25,7 @@ const PersonalSettingsPage = () => {
   );
 };
 
-export const Route = createFileRoute("/_authenticate/_personal_settings_layout/personal-settings/")(
+export const Route = createFileRoute("/_authenticate/personal-settings/_personal-settings-layout/")(
   {
     component: PersonalSettingsPage
   }

frontend-v2/src/routes/_authenticate/personal-settings/layout.tsx

@@ -2,6 +2,6 @@ import { createFileRoute } from "@tanstack/react-router";
 
 import { PersonalSettingsLayout } from "@app/layouts/PersonalSettingsLayout";
 
-export const Route = createFileRoute("/_authenticate/_personal_settings_layout")({
+export const Route = createFileRoute("/_authenticate/personal-settings/_personal-settings-layout")({
   component: PersonalSettingsLayout
 });

frontend-v2/src/routes/_restrict_login_signup.tsx

@@ -5,23 +5,25 @@ import { setAuthToken } from "@app/hooks/api/reactQuery";
 
 export const Route = createFileRoute("/_restrict_login_signup")({
   beforeLoad: async ({ context }) => {
-    try {
+    const data = await context.queryClient
-      const data = await context.queryClient.fetchQuery({
+      .fetchQuery({
         queryKey: authKeys.getAuthToken,
         queryFn: fetchAuthToken
+      })
+      .catch(() => {
+        return null;
       });
-      setAuthToken(data.token);
+    if (!data) return;
-      if (!data.organizationId) {
+
-        throw redirect({ to: "/login/select-organization" });
+    setAuthToken(data.token);
-      }
+    if (!data.organizationId) {
-      throw redirect({
+      throw redirect({ to: "/login/select-organization" });
-        to: "/organization/$organizationId/secret-manager",
-        params: {
-          organizationId: data.organizationId
-        }
-      });
-    } catch (err) {
-      console.error(err);
     }
+    throw redirect({
+      to: "/organization/$organizationId/secret-manager",
+      params: {
+        organizationId: data.organizationId
+      }
+    });
   }
 });

frontend-v2/src/routes/_restrict_login_signup/signup/sso/-components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -15,8 +15,8 @@ import { useToggle } from "@app/hooks";
 import { completeAccountSignup, useSelectOrganization } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
-import { Mfa } from "@app/routes/login/-components/Mfa";
 import ProjectService from "@app/services/ProjectService";
+import { Mfa } from "@app/components/auth/Mfa";
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();