feat: resolved frontend url changes and resolved ts error

frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
+import { getProjectBaseURL } from "@app/helpers/project";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
 import {
@@ -24,7 +25,7 @@ const Page = () => {
 
   const updateSelectedTab = (tab: string) => {
     navigate({
-      to: "/projects/$projectId/access-management",
+      to: `${getProjectBaseURL(currentWorkspace.type)}/access-management` as const,
       search: (prev) => ({ ...prev, selectedTab: tab }),
       params: {
         projectId: currentWorkspace.id

frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -44,6 +44,7 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { GroupRoles } from "./GroupRoles";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 type Props = {
   handlePopUpOpen: (
@@ -158,7 +159,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                       onKeyDown={(evt) => {
                         if (evt.key === "Enter") {
                           navigate({
-                            to: "/projects/$projectId/groups/$groupId",
+                            to: `${getProjectBaseURL(currentWorkspace.type)}/groups/$groupId` as const,
                             params: {
                               projectId: currentWorkspace.id,
                               groupId: id
@@ -168,7 +169,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                       }}
                       onClick={() =>
                         navigate({
-                          to: "/projects/$projectId/groups/$groupId",
+                          to: `${getProjectBaseURL(currentWorkspace.type)}/groups/$groupId` as const,
                           params: {
                             projectId: currentWorkspace.id,
                             groupId: id

frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx

@@ -60,6 +60,7 @@ import { ProjectIdentityOrderBy } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { IdentityModal } from "./components/IdentityModal";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
@@ -260,7 +261,7 @@ export const IdentityTab = withProjectPermission(
                         onKeyDown={(evt) => {
                           if (evt.key === "Enter") {
                             navigate({
-                              to: "/projects/$projectId/identities/$identityId",
+                              to: `${getProjectBaseURL(currentWorkspace.type)}/identities/$identityId` as const,
                               params: {
                                 projectId: currentWorkspace.id,
                                 identityId: id
@@ -270,7 +271,7 @@ export const IdentityTab = withProjectPermission(
                         }}
                         onClick={() =>
                           navigate({
-                            to: "/projects/$projectId/identities/$identityId",
+                            to: `${getProjectBaseURL(currentWorkspace.type)}/identities/$identityId` as const,
                             params: {
                               projectId: currentWorkspace.id,
                               identityId: id

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx

@@ -5,6 +5,7 @@ import { useWorkspace } from "@app/context";
 import { TWorkspaceUser } from "@app/hooks/api/types";
 
 import { MemberRbacSection } from "./MemberRbacSection";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 type Props = {
   projectMember: TWorkspaceUser;
@@ -21,7 +22,7 @@ export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) =>
       >
         <AlertDescription>
           <Link
-            to="/projects/$projectId/members/$membershipId"
+            to={`${getProjectBaseURL(currentWorkspace.type)}/members/$membershipId` as const}
             params={{
               projectId: currentWorkspace.id,
               membershipId: projectMember.id

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx

@@ -60,6 +60,7 @@ import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetProjectRoles, useGetWorkspaceUsers } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
@@ -311,7 +312,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                     onKeyDown={(evt) => {
                       if (evt.key === "Enter") {
                         navigate({
-                          to: "/projects/$projectId/members/$membershipId",
+                          to: `${getProjectBaseURL(currentWorkspace.type)}/members/$membershipId`,
                           params: {
                             projectId: workspaceId,
                             membershipId
@@ -321,7 +322,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                     }}
                     onClick={() =>
                       navigate({
-                        to: "/projects/$projectId/members/$membershipId",
+                        to: `${getProjectBaseURL(currentWorkspace.type)}/members/$membershipId`,
                         params: {
                           projectId: workspaceId,
                           membershipId

frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -52,6 +52,7 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectMembershipRole, TProjectRole } from "@app/hooks/api/roles/types";
 import { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
 import { RoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/RoleModal";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 enum RolesOrderBy {
   Name = "name",
@@ -249,7 +250,7 @@ export const ProjectRoleList = () => {
                   className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                   onClick={() =>
                     navigate({
-                      to: "/projects/$projectId/roles/$roleSlug",
+                      to: `${getProjectBaseURL(currentWorkspace.type)}/roles/$roleSlug`,
                       params: {
                         projectId: currentWorkspace.id,
                         roleSlug: slug
@@ -291,7 +292,7 @@ export const ProjectRoleList = () => {
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   navigate({
-                                    to: "/projects/$projectId/roles/$roleSlug",
+                                    to: `${getProjectBaseURL(currentWorkspace.type)}/roles/$roleSlug`,
                                     params: {
                                       projectId: currentWorkspace.id,
                                       roleSlug: slug

frontend/src/pages/project/AccessControlPage/route-cert-manager.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { AccessControlPage } from './AccessControlPage'
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/access-management',
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/AccessControlPage/route-kms.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { AccessControlPage } from './AccessControlPage'
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/access-management',
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/AccessControlPage/route-secret-manager.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { AccessControlPage } from './AccessControlPage'
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/access-management',
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/AccessControlPage/route-secret-scanning.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { AccessControlPage } from './AccessControlPage'
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/access-management',
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/AccessControlPage/route-ssh.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { AccessControlPage } from './AccessControlPage'
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/access-management',
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx

@@ -19,6 +19,7 @@ import { usePopUp } from "@app/hooks";
 import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
 import { TGroupMembership } from "@app/hooks/api/groups/types";
 import { GroupRoles } from "@app/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 type Props = {
   groupMembership: TGroupMembership;
@@ -46,7 +47,7 @@ export const GroupDetailsSection = ({ groupMembership }: Props) => {
       });
 
       navigate({
-        to: "/projects/$projectId/access-management",
+        to: `${getProjectBaseURL(currentWorkspace.type)}/access-management`,
         params: {
           projectId: currentWorkspace.id
         },

frontend/src/pages/project/GroupDetailsByIDPage/route-cert-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/groups/$groupId',
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Groups,
+            },
+          }),
+        },
+        {
+          label: 'Group',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/GroupDetailsByIDPage/route-kms.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/groups/$groupId',
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Groups,
+            },
+          }),
+        },
+        {
+          label: 'Group',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/GroupDetailsByIDPage/route-secret-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/groups/$groupId',
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Groups,
+            },
+          }),
+        },
+        {
+          label: 'Group',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/GroupDetailsByIDPage/route-secret-scanning.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId',
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Groups,
+            },
+          }),
+        },
+        {
+          label: 'Group',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/GroupDetailsByIDPage/route-ssh.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/groups/$groupId',
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Groups,
+            },
+          }),
+        },
+        {
+          label: 'Group',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -20,7 +20,7 @@ import {
   ProjectPermissionSub,
   useWorkspace
 } from "@app/context";
-import { getCurrentProductFromUrl, getProjectHomePage } from "@app/helpers/project";
+import { getProjectBaseURL, getProjectHomePage } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import {
   useAssumeProjectPrivileges,
@@ -28,7 +28,6 @@ import {
   useGetWorkspaceIdentityMembershipDetails
 } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { IdentityProjectAdditionalPrivilegeSection } from "./components/IdentityProjectAdditionalPrivilegeSection";
 import { IdentityRoleDetailsSection } from "./components/IdentityRoleDetailsSection";
@@ -68,9 +67,7 @@ const Page = () => {
             type: "success",
             text: "Identity privilege assumption has started"
           });
-          const url = getProjectHomePage(
-            getCurrentProductFromUrl(window.location.href) || ProjectType.SecretManager
-          );
+          const url = getProjectHomePage(currentWorkspace.type);
           window.location.href = url.replace("$projectId", currentWorkspace.id);
         }
       }
@@ -89,7 +86,7 @@ const Page = () => {
       });
       handlePopUpClose("deleteIdentity");
       navigate({
-        to: "/projects/$projectId/access-management",
+        to: `${getProjectBaseURL(currentWorkspace.type)}/access-management` as const,
         params: {
           projectId: workspaceId
         },

frontend/src/pages/project/IdentityDetailsByIDPage/route-cert-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Identities,
+            },
+          }),
+        },
+        {
+          label: 'Machine Identity',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/IdentityDetailsByIDPage/route-kms.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Identities,
+            },
+          }),
+        },
+        {
+          label: 'Machine Identity',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/IdentityDetailsByIDPage/route-secret-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Identities,
+            },
+          }),
+        },
+        {
+          label: 'Machine Identity',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/IdentityDetailsByIDPage/route-secret-scanning.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Identities,
+            },
+          }),
+        },
+        {
+          label: 'Machine Identity',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/IdentityDetailsByIDPage/route-ssh.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Identities,
+            },
+          }),
+        },
+        {
+          label: 'Machine Identity',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx

@@ -21,7 +21,7 @@ import {
   useOrganization,
   useWorkspace
 } from "@app/context";
-import { getCurrentProductFromUrl, getProjectHomePage } from "@app/helpers/project";
+import { getProjectBaseURL, getProjectHomePage } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import {
   useAssumeProjectPrivileges,
@@ -29,7 +29,6 @@ import {
   useGetWorkspaceUserDetails
 } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { MemberProjectAdditionalPrivilegeSection } from "./components/MemberProjectAdditionalPrivilegeSection";
 import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection";
@@ -73,9 +72,7 @@ export const Page = () => {
             text: "User privilege assumption has started"
           });
 
-          const url = getProjectHomePage(
-            getCurrentProductFromUrl(window.location.href) || ProjectType.SecretManager
-          );
+          const url = getProjectHomePage(currentWorkspace.type);
           window.location.href = url.replace("$projectId", currentWorkspace.id);
         }
       }
@@ -96,7 +93,7 @@ export const Page = () => {
         type: "success"
       });
       navigate({
-        to: "/projects/$projectId/access-management",
+        to: `${getProjectBaseURL(currentWorkspace.type)}/access-management` as const,
         params: {
           projectId: currentWorkspace.id
         }

frontend/src/pages/project/MemberDetailsByIDPage/route-cert-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Member,
+            },
+          }),
+        },
+        {
+          label: 'User',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/MemberDetailsByIDPage/route-kms.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Member,
+            },
+          }),
+        },
+        {
+          label: 'User',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/MemberDetailsByIDPage/route-secret-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Member,
+            },
+          }),
+        },
+        {
+          label: 'User',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/MemberDetailsByIDPage/route-secret-scanning.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Member,
+            },
+          }),
+        },
+        {
+          label: 'User',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/MemberDetailsByIDPage/route-ssh.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Member,
+            },
+          }),
+        },
+        {
+          label: 'User',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -25,6 +25,7 @@ import { RolePermissionsSection } from "@app/pages/project/RoleDetailsBySlugPage
 import { ProjectAccessControlTabs } from "@app/types/project";
 
 import { RoleModal } from "./components/RoleModal";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 const Page = () => {
   const navigate = useNavigate();
@@ -60,7 +61,7 @@ const Page = () => {
       });
       handlePopUpClose("deleteRole");
       navigate({
-        to: "/projects/$projectId/access-management",
+        to: `${getProjectBaseURL(currentWorkspace.type)}/access-management` as const,
         params: {
           projectId
         },

frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx

@@ -10,6 +10,7 @@ import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionCo
 import { useCreateProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
 import { TProjectRole } from "@app/hooks/api/roles/types";
 import { slugSchema } from "@app/lib/schemas";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 type Props = {
   isOpen: boolean;
@@ -80,7 +81,7 @@ const Content = ({ role, onClose }: ContentProps) => {
     });
 
     navigate({
-      to: "/projects/$projectId/roles/$roleSlug",
+      to: `${getProjectBaseURL(currentWorkspace.type)}/roles/$roleSlug` as const,
       params: {
         roleSlug: newRole.slug,
         projectId: currentWorkspace.id

frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleModal.tsx

@@ -14,6 +14,7 @@ import {
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { slugSchema } from "@app/lib/schemas";
+import { getProjectBaseURL } from "@app/helpers/project";
 
 const schema = z
   .object({
@@ -100,7 +101,7 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
         });
 
         navigate({
-          to: "/projects/$projectId/roles/$roleSlug",
+          to: `${getProjectBaseURL(currentWorkspace.type)}/roles/$roleSlug` as const,
           params: {
             roleSlug: newRole.slug,
             projectId

frontend/src/pages/project/RoleDetailsBySlugPage/route-cert-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Roles,
+            },
+          }),
+        },
+        {
+          label: 'Roles',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/RoleDetailsBySlugPage/route-kms.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Roles,
+            },
+          }),
+        },
+        {
+          label: 'Roles',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/RoleDetailsBySlugPage/route-secret-manager.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Roles,
+            },
+          }),
+        },
+        {
+          label: 'Roles',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/RoleDetailsBySlugPage/route-secret-scanning.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Roles,
+            },
+          }),
+        },
+        {
+          label: 'Roles',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/RoleDetailsBySlugPage/route-ssh.tsx

@@ -0,0 +1,33 @@
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
+
+import { ProjectAccessControlTabs } from '@app/types/project'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Access Control',
+          link: linkOptions({
+            to: '/projects/$projectId/access-management',
+            params: {
+              projectId: params.projectId,
+            },
+            search: {
+              selectedTab: ProjectAccessControlTabs.Roles,
+            },
+          }),
+        },
+        {
+          label: 'Roles',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/SettingsPage/route-cert-manager.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings"
+)({
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/SettingsPage/route-kms.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings"
+)({
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/SettingsPage/route-secret-manager.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings"
+)({
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/SettingsPage/route-secret-scanning.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings"
+)({
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/SettingsPage/route-ssh.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsPage } from './SettingsPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/_project-layout/projects/ssh/$projectId/_ssh-layout/settings',
+)({
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: 'Settings',
+        },
+      ],
+    }
+  },
+})

frontend/src/pages/project/layout.tsx

@@ -1,31 +1,15 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { BreadcrumbTypes } from "@app/components/v2";
-import { workspaceKeys } from "@app/hooks/api";
-import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
-import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";
 import { ProjectSelect } from "@app/layouts/ProjectLayout/components/ProjectSelect";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout"
+  "/_authenticate/_inject-org-details/_org-layout/_project-layout"
 )({
   component: ProjectLayout,
-  beforeLoad: async ({ params, context }) => {
-    const project = await context.queryClient.ensureQueryData({
-      queryKey: workspaceKeys.getWorkspaceById(params.projectId),
-      queryFn: () => fetchWorkspaceById(params.projectId)
-    });
-
-    await context.queryClient.ensureQueryData({
-      queryKey: roleQueryKeys.getUserProjectPermissions({
-        workspaceId: params.projectId
-      }),
-      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
-    });
-
+  beforeLoad: async () => {
     return {
-      project,
       breadcrumbs: [
         {
           type: BreadcrumbTypes.Component,