feat: added project settings and access management

frontend/src/layouts/ProjectGeneralLayout/ProjectGeneralLayout.tsx

@@ -1,137 +1,54 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
-import { Badge, Menu, MenuItem } from "@app/components/v2";
+import { Menu, MenuItem } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import {
-  useGetAccessRequestsCount,
-  useGetSecretApprovalRequestCount,
-  useGetSecretRotations
-} from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
-// This is a generic layout shared by all types of projects.
-// If the product layout differs significantly, create a new layout as needed.
 export const ProjectGeneralLayout = () => {
   const { currentWorkspace } = useWorkspace();
 
-  const { t } = useTranslation();
-  const workspaceId = currentWorkspace?.id || "";
-  const projectSlug = currentWorkspace?.slug || "";
-
-  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
-    workspaceId
-  });
-  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({
-    projectSlug
-  });
-
-  // we only show the secret rotations v1 tab if they have existing rotations
-  const { data: secretRotations } = useGetSecretRotations({
-    workspaceId,
-    options: {
-      refetchOnMount: false
-    }
-  });
-
-  const pendingRequestsCount =
-    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
-
   return (
-    <>
+    <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+      <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+        <motion.div
-          <motion.div
+          key="menu-project-items"
-            key="menu-project-items"
+          initial={{ x: -150 }}
-            initial={{ x: -150 }}
+          animate={{ x: 0 }}
-            animate={{ x: 0 }}
+          exit={{ x: -150 }}
-            exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
-            transition={{ duration: 0.2 }}
+          className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
-            className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+        >
-          >
+          <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
+            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-              <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+              Project General
-                Project General
+            </div>
-              </div>
+            <div className="mt-2 flex-grow">
-              <div className="mt-2 flex-grow">
+              <Menu>
-                <Menu>
+                <Link
-                  <Link
+                  to="/projects/$projectId/access-management"
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/overview` as const}
+                  params={{
-                    params={{
+                    projectId: currentWorkspace.id
-                      projectId: currentWorkspace.id
+                  }}
-                    }}
+                >
-                  >
+                  {({ isActive }) => <MenuItem isSelected={isActive}>Access Control</MenuItem>}
-                    {({ isActive }) => (
+                </Link>
-                      <MenuItem isSelected={isActive}>{t("nav.menu.secrets")}</MenuItem>
+                <Link
-                    )}
+                  to="/projects/$projectId/settings"
-                  </Link>
+                  params={{
-                  <Link
+                    projectId: currentWorkspace.id
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/integrations` as const}
+                  }}
-                    params={{
+                >
-                      projectId: currentWorkspace.id
+                  {({ isActive }) => <MenuItem isSelected={isActive}>Project Settings</MenuItem>}
-                    }}
+                </Link>
-                  >
+              </Menu>
-                    {({ isActive }) => (
+            </div>
-                      <MenuItem isSelected={isActive}>{t("nav.menu.integrations")}</MenuItem>
+          </nav>
-                    )}
+        </motion.div>
-                  </Link>
+        <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]">
-                  {Boolean(secretRotations?.length) && (
+          <Outlet />
-                    <Link
-                      to={`/${ProjectType.SecretManager}/$projectId/secret-rotation` as const}
-                      params={{
-                        projectId: currentWorkspace.id
-                      }}
-                    >
-                      {({ isActive }) => <MenuItem isSelected={isActive}>Secret Rotation</MenuItem>}
-                    </Link>
-                  )}
-                  <Link
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/approval` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
-                        Approvals
-                        {Boolean(
-                          secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
-                        ) && (
-                          <Badge variant="primary" className="ml-1.5">
-                            {pendingRequestsCount}
-                          </Badge>
-                        )}
-                      </MenuItem>
-                    )}
-                  </Link>
-                  <Link
-                    to={`/${currentWorkspace.type}/$projectId/settings` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>{t("nav.menu.project-settings")}</MenuItem>
-                    )}
-                  </Link>
-                </Menu>
-              </div>
-            </nav>
-          </motion.div>
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]">
-            <Outlet />
-          </div>
         </div>
       </div>
-      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+    </div>
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
-    </>
   );
-};
+};
+

frontend/src/layouts/ProjectGeneralLayout/index.tsx

@@ -1 +1,2 @@
-export { ProjectGeneralLayout } from "./ProjectGeneralLayout";
+export { ProjectGeneralLayout } from "./ProjectGeneralLayout";
+

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -189,6 +189,32 @@ export const ProjectLayout = () => {
               </Menu>
               <Divider />
               <Menu>
+                <ShouldWrap
+                  wrapper={Tooltip}
+                  isWrapped={sidebarStyle === SidebarStyle.Collapsed}
+                  content="Access Control"
+                  position="right"
+                >
+                  <Link
+                    to="/projects/$projectId/access-management"
+                    params={{ projectId: currentWorkspace.id }}
+                  >
+                    {({ isActive }) => (
+                      <MenuItem
+                        className="relative flex items-center gap-2 overflow-hidden"
+                        isSelected={isActive}
+                        leftIcon={
+                          <Lottie className="inline-block h-6 w-6 shrink-0" icon="groups" />
+                        }
+                      >
+                        {isActive && (
+                          <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />
+                        )}
+                        Access Control
+                      </MenuItem>
+                    )}
+                  </Link>
+                </ShouldWrap>
                 <ShouldWrap
                   wrapper={Tooltip}
                   isWrapped={sidebarStyle === SidebarStyle.Collapsed}
@@ -196,7 +222,7 @@ export const ProjectLayout = () => {
                   position="right"
                 >
                   <Link
-                    to="/projects/$projectId/secret-manager/overview"
+                    to="/projects/$projectId/settings"
                     params={{ projectId: currentWorkspace.id }}
                   >
                     {({ isActive }) => (

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -51,7 +51,7 @@ export const SecretManagerLayout = () => {
           >
             <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
               <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-                Secret Manager
+                Project Overview
               </div>
               <div className="mt-2 flex-grow">
                 <Menu>

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

@@ -1,44 +0,0 @@
-import {
-  createFileRoute,
-  linkOptions,
-  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/$projectId/_project-layout/cert-manager/_cert-manager-layout/access-management',
-)({
-  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema),
-  search: {
-    middlewares: [stripSearchParams({ requesterEmail: '' })],
-  },
-  beforeLoad: ({ context, params }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: 'Access Control',
-          link: linkOptions({
-            to: '/cert-manager/$projectId/access-management',
-            params: {
-              projectId: params.projectId,
-            },
-          }),
-        },
-      ],
-    }
-  },
-})

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

@@ -1,44 +0,0 @@
-import {
-  createFileRoute,
-  linkOptions,
-  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/$projectId/_project-layout/kms/_kms-layout/access-management',
-)({
-  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema),
-  search: {
-    middlewares: [stripSearchParams({ requesterEmail: '' })],
-  },
-  beforeLoad: ({ context, params }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: 'Access Control',
-          link: linkOptions({
-            to: '/kms/$projectId/access-management',
-            params: {
-              projectId: params.projectId,
-            },
-          }),
-        },
-      ],
-    }
-  },
-})

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

@@ -1,44 +0,0 @@
-import {
-  createFileRoute,
-  linkOptions,
-  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/$projectId/_project-layout/secret-manager/_secret-manager-layout/access-management',
-)({
-  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema),
-  search: {
-    middlewares: [stripSearchParams({ requesterEmail: '' })],
-  },
-  beforeLoad: ({ context, params }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: 'Access Control',
-          link: linkOptions({
-            to: '/secret-manager/$projectId/access-management',
-            params: {
-              projectId: params.projectId,
-            },
-          }),
-        },
-      ],
-    }
-  },
-})

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

@@ -1,44 +0,0 @@
-import {
-  createFileRoute,
-  linkOptions,
-  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/$projectId/_project-layout/secret-scanning/_secret-scanning-layout/access-management',
-)({
-  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema),
-  search: {
-    middlewares: [stripSearchParams({ requesterEmail: '' })],
-  },
-  beforeLoad: ({ context, params }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: 'Access Control',
-          link: linkOptions({
-            to: '/secret-scanning/$projectId/access-management',
-            params: {
-              projectId: params.projectId,
-            },
-          }),
-        },
-      ],
-    }
-  },
-})

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

@@ -1,36 +0,0 @@
-import { createFileRoute, linkOptions } 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),
-})
-
-export const Route = createFileRoute(
-  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/ssh/_ssh-layout/access-management',
-)({
-  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema),
-  beforeLoad: ({ context, params }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: 'Access Control',
-          link: linkOptions({
-            to: '/ssh/$projectId/access-management',
-            params: {
-              projectId: params.projectId,
-            },
-          }),
-        },
-      ],
-    }
-  },
-})

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

@@ -0,0 +1,27 @@
+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/$projectId/_project-layout/_project-general-layout/access-management"
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: "" })]
+  },
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: []
+    };
+  }
+});

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +1,14 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+import { GroupDetailsByIDPage } from './GroupDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/groups/$groupId',
 )({
   component: GroupDetailsByIDPage,
-  context: () => ({
+  beforeLoad: ({ context }) => {
-    breadcrumbs: [
+    return {
-      {
+      breadcrumbs: [],
-        label: "Access Control",
+    }
-        link: linkOptions({ to: "/organization/access-management" })
+  },
-      },
+})
-      {
-        label: "groups"
-      }
-    ]
-  })
-});

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { IdentityDetailsByIDPage } from './IdentityDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/identities/$identityId',
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [],
+    }
+  },
+})

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { MemberDetailsByIDPage } from './MemberDetailsByIDPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/members/$membershipId',
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [],
+    }
+  },
+})

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { RoleDetailsBySlugPage } from './RoleDetailsBySlugPage'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/roles/$roleSlug',
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [],
+    }
+  },
+})

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

@@ -1,14 +1,14 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
-import { SettingsPage } from "./SettingsPage";
+import { SettingsPage } from './SettingsPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/ssh/_ssh-layout/access-management"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout/settings',
 )({
   component: SettingsPage,
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
-        ...context.breadcrumbs
+        ...context.breadcrumbs,
         // {
         //   label: "Access Control",
         //   link: linkOptions({
@@ -18,7 +18,7 @@ export const Route = createFileRoute(
         //     }
         //   })
         // }
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/project/layout-general.tsx

@@ -0,0 +1,8 @@
+import { ProjectGeneralLayout } from '@app/layouts/ProjectGeneralLayout'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/_project-general-layout',
+)({
+  component: ProjectGeneralLayout,
+})

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -1,101 +1,101 @@
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute, redirect } from "@tanstack/react-router";
-import { zodValidator } from '@tanstack/zod-adapter'
+import { zodValidator } from "@tanstack/zod-adapter";
-import { z } from 'zod'
+import { z } from "zod";
 
-import { workspaceKeys } from '@app/hooks/api'
+import { workspaceKeys } from "@app/hooks/api";
-import { TIntegration } from '@app/hooks/api/integrations/types'
+import { TIntegration } from "@app/hooks/api/integrations/types";
 import {
   fetchSecretSyncsByProjectId,
   SecretSync,
   secretSyncKeys,
-  TSecretSync,
+  TSecretSync
-} from '@app/hooks/api/secretSyncs'
+} from "@app/hooks/api/secretSyncs";
-import { fetchWorkspaceIntegrations } from '@app/hooks/api/workspace/queries'
+import { fetchWorkspaceIntegrations } from "@app/hooks/api/workspace/queries";
-import { IntegrationsListPageTabs } from '@app/types/integrations'
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
-import { IntegrationsListPage } from './IntegrationsListPage'
+import { IntegrationsListPage } from "./IntegrationsListPage";
 
 const IntegrationsListPageQuerySchema = z.object({
   selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional(),
-  addSync: z.nativeEnum(SecretSync).optional(),
+  addSync: z.nativeEnum(SecretSync).optional()
-})
+});
 
 export const Route = createFileRoute(
-  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/',
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/"
 )({
   component: IntegrationsListPage,
   validateSearch: zodValidator(IntegrationsListPageQuerySchema),
   beforeLoad: async ({ context, search, params: { projectId } }) => {
     if (!search.selectedTab) {
-      let secretSyncs: TSecretSync[]
+      let secretSyncs: TSecretSync[];
 
       try {
         secretSyncs = await context.queryClient.ensureQueryData({
           queryKey: secretSyncKeys.list(projectId),
-          queryFn: () => fetchSecretSyncsByProjectId(projectId),
+          queryFn: () => fetchSecretSyncsByProjectId(projectId)
-        })
+        });
       } catch {
         throw redirect({
-          to: '/secret-manager/$projectId/integrations',
+          to: "/secret-manager/$projectId/integrations",
           params: {
-            projectId,
+            projectId
           },
-          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations },
+          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations }
-        })
+        });
       }
 
       if (secretSyncs.length) {
         throw redirect({
-          to: '/secret-manager/$projectId/integrations',
+          to: "/secret-manager/$projectId/integrations",
           params: {
-            projectId,
+            projectId
           },
-          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs },
+          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
-        })
+        });
       }
 
-      let integrations: TIntegration[]
+      let integrations: TIntegration[];
       try {
         integrations = await context.queryClient.ensureQueryData({
           queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
-          queryFn: () => fetchWorkspaceIntegrations(projectId),
+          queryFn: () => fetchWorkspaceIntegrations(projectId)
-        })
+        });
       } catch {
         throw redirect({
-          to: '/secret-manager/$projectId/integrations',
+          to: "/secret-manager/$projectId/integrations",
           params: {
-            projectId,
+            projectId
           },
-          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs },
+          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
-        })
+        });
       }
 
       if (integrations.length) {
         throw redirect({
-          to: '/secret-manager/$projectId/integrations',
+          to: "/secret-manager/$projectId/integrations",
           params: {
-            projectId,
+            projectId
           },
-          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations },
+          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations }
-        })
+        });
       }
 
       throw redirect({
-        to: '/secret-manager/$projectId/integrations',
+        to: "/secret-manager/$projectId/integrations",
         params: {
-          projectId,
+          projectId
         },
-        search: { selectedTab: IntegrationsListPageTabs.SecretSyncs },
+        search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
-      })
+      });
     }
 
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: 'Integrations',
+          label: "Integrations"
-        },
+        }
-      ],
+      ]
-    }
+    };
-  },
+  }
-})
+});

frontend/src/routes.ts

@@ -267,12 +267,7 @@ const secretManagerRoutes = route("/secret-manager", [
         "secret-manager/integrations/HerokuOauthCallbackPage/route.tsx"
       ),
       route("/heroku/create", "secret-manager/integrations/HerokuConfigurePage/route.tsx")
-    ]),
+    ])
-    route("/access-management", "project/AccessControlPage/route-secret-manager.tsx"),
-    route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-secret-manager.tsx"),
-    route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-secret-manager.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-manager.tsx"),
-    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-secret-manager.tsx")
   ])
 ]);
 
@@ -312,12 +307,7 @@ const certManagerRoutes = route("/cert-manager", [
     route("/alerting", "cert-manager/AlertingPage/route.tsx"),
     route("/ca/$caName", "cert-manager/CertAuthDetailsByIDPage/route.tsx"),
     route("/pki-collections/$collectionId", "cert-manager/PkiCollectionDetailsByIDPage/routes.tsx"),
-    route("/settings", "cert-manager/SettingsPage/route.tsx"),
+    route("/settings", "cert-manager/SettingsPage/route.tsx")
-    route("/access-management", "project/AccessControlPage/route-cert-manager.tsx"),
-    route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-cert-manager.tsx"),
-    route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-cert-manager.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-cert-manager.tsx"),
-    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-cert-manager.tsx")
   ])
 ]);
 
@@ -325,12 +315,7 @@ const kmsRoutes = route("/kms", [
   layout("kms-layout", "kms/layout.tsx", [
     route("/overview", "kms/OverviewPage/route.tsx"),
     route("/kmip", "kms/KmipPage/route.tsx"),
-    route("/settings", "kms/SettingsPage/route.tsx"),
+    route("/settings", "kms/SettingsPage/route.tsx")
-    route("/access-management", "project/AccessControlPage/route-kms.tsx"),
-    route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-kms.tsx"),
-    route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-kms.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-kms.tsx"),
-    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-kms.tsx")
   ])
 ]);
 
@@ -341,12 +326,7 @@ const sshRoutes = route("/ssh", [
     route("/cas", "ssh/SshCasPage/route.tsx"),
     route("/ca/$caId", "ssh/SshCaByIDPage/route.tsx"),
     route("/ssh-host-groups/$sshHostGroupId", "ssh/SshHostGroupDetailsByIDPage/route.tsx"),
-    route("/settings", "ssh/SettingsPage/route.tsx"),
+    route("/settings", "ssh/SettingsPage/route.tsx")
-    route("/access-management", "project/AccessControlPage/route-ssh.tsx"),
-    route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-ssh.tsx"),
-    route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-ssh.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-ssh.tsx"),
-    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-ssh.tsx")
   ])
 ]);
 
@@ -357,15 +337,19 @@ const secretScanningRoutes = route("/secret-scanning", [
       route("/$type/$dataSourceId", "secret-scanning/SecretScanningDataSourceByIdPage/route.tsx")
     ]),
     route("/findings", "secret-scanning/SecretScanningFindingsPage/route.tsx"),
-    route("/settings", "secret-scanning/SettingsPage/route.tsx"),
+    route("/settings", "secret-scanning/SettingsPage/route.tsx")
-    route("/access-management", "project/AccessControlPage/route-secret-scanning.tsx"),
-    route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-secret-scanning.tsx"),
-    route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-secret-scanning.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-scanning.tsx"),
-    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-secret-scanning.tsx")
   ])
 ]);
 
+const projectGeneralRoutes = layout("project-general-layout", "project/layout-general.tsx", [
+  route("/access-management", "project/AccessControlPage/route.tsx"),
+  route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route.tsx"),
+  route("/identities/$identityId", "project/IdentityDetailsByIDPage/route.tsx"),
+  route("/members/$membershipId", "project/MemberDetailsByIDPage/route.tsx"),
+  route("/groups/$groupId", "project/GroupDetailsByIDPage/route.tsx"),
+  route("/settings", "project/SettingsPage/route.tsx")
+]);
+
 export const routes = rootRoute("root.tsx", [
   index("index.tsx"),
   route("/shared/secret/$secretId", "public/ViewSharedSecretByIDPage/route.tsx"),
@@ -405,6 +389,7 @@ export const routes = rootRoute("root.tsx", [
         organizationRoutes,
         route("/projects/$projectId", [
           layout("project-layout", "project/layout.tsx", [
+            projectGeneralRoutes,
             secretManagerRoutes,
             secretManagerIntegrationsRedirect,
             certManagerRoutes,