feat: resolved frontend url changes and resolved ts error

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',
+        },
+      ],
+    }
+  },
+})