feat: added project layout and project select in breadcrumb

backend/src/db/migrations/20250626101747_default-project-type.ts

@@ -0,0 +1,28 @@
+import { Knex } from "knex";
+import { TableName, ProjectType } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasTypeColumn = await knex.schema.hasColumn(TableName.Project, "type");
+  const hasDefaultTypeColumn = await knex.schema.hasColumn(TableName.Project, "defaultType");
+  if (hasTypeColumn && !hasDefaultTypeColumn) {
+    await knex.schema.alterTable(TableName.Project, (t) => {
+      t.string("type").nullable().alter();
+      t.string("defaultType").notNullable().defaultTo(ProjectType.SecretManager);
+    });
+
+    await knex(TableName.Project).update({
+      // eslint-disable-next-line
+      // @ts-ignore this is because this field is created later
+      defaultType: knex.raw("type")
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasDefaultTypeColumn = await knex.schema.hasColumn(TableName.Project, "defaultType");
+  if (hasDefaultTypeColumn) {
+    await knex.schema.alterTable(TableName.Project, (t) => {
+      t.dropColumn("defaultType");
+    });
+  }
+}

backend/src/db/schemas/projects.ts

@@ -25,11 +25,12 @@ export const ProjectsSchema = z.object({
   kmsSecretManagerKeyId: z.string().uuid().nullable().optional(),
   kmsSecretManagerEncryptedDataKey: zodBuffer.nullable().optional(),
   description: z.string().nullable().optional(),
-  type: z.string(),
+  type: z.string().nullable().optional(),
   enforceCapitalization: z.boolean().default(false),
   hasDeleteProtection: z.boolean().default(false).nullable().optional(),
   secretSharing: z.boolean().default(true),
-  showSnapshotsLegacy: z.boolean().default(false)
+  showSnapshotsLegacy: z.boolean().default(false),
+  defaultType: z.string().default("secret-manager")
 });
 
 export type TProjects = z.infer<typeof ProjectsSchema>;

backend/src/server/routes/sanitizedSchemas.ts

@@ -251,6 +251,7 @@ export const SanitizedProjectSchema = ProjectsSchema.pick({
   name: true,
   description: true,
   type: true,
+  defaultType: true,
   slug: true,
   autoCapitalization: true,
   orgId: true,

backend/src/server/routes/v1/project-router.ts

@@ -158,17 +158,7 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         includeRoles: z
           .enum(["true", "false"])
           .default("false")
-          .transform((value) => value === "true"),
+          .transform((value) => value === "true")
-        type: z
-          .enum([
-            ProjectType.SecretManager,
-            ProjectType.KMS,
-            ProjectType.CertificateManager,
-            ProjectType.SSH,
-            ProjectType.SecretScanning,
-            "all"
-          ])
-          .optional()
       }),
       response: {
         200: z.object({
@@ -187,8 +177,7 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         actorId: req.permission.id,
         actorAuthMethod: req.permission.authMethod,
         actor: req.permission.type,
-        actorOrgId: req.permission.orgId,
+        actorOrgId: req.permission.orgId
-        type: req.query.type
       });
       return { workspaces };
     }

backend/src/services/project/project-service.ts

@@ -571,8 +571,8 @@ export const projectServiceFactory = ({
   const getProjects = async ({ actorId, actor, includeRoles, actorAuthMethod, actorOrgId }: TListProjectsDTO) => {
     const workspaces =
       actor === ActorType.IDENTITY
-        ? await projectDAL.findIdentityProjects(actorId, actorOrgId, type)
+        ? await projectDAL.findIdentityProjects(actorId, actorOrgId)
-        : await projectDAL.findUserProjects(actorId, actorOrgId, type);
+        : await projectDAL.findUserProjects(actorId, actorOrgId);
 
     if (includeRoles) {
       const { permission } = await permissionService.getUserOrgPermission(

frontend/src/const/routes.ts

@@ -74,276 +74,276 @@ export const ROUTE_PATHS = Object.freeze({
   },
   SecretManager: {
     ApprovalPage: setRoute(
-      "/secret-manager/$projectId/approval",
+      "/projects/$projectId/secret-manager/approval",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/approval"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/approval"
     ),
     SecretDashboardPage: setRoute(
-      "/secret-manager/$projectId/secrets/$envSlug",
+      "/projects/$projectId/secret-manager/secrets/$envSlug",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/secrets/$envSlug"
     ),
     RollbackPreviewPage: setRoute(
-      "/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore",
+      "/projects/$projectId/secret-manager/commits/$environment/$folderId/$commitId/restore",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
     ),
     CommitDetailsPage: setRoute(
-      "/secret-manager/$projectId/commits/$environment/$folderId/$commitId",
+      "/projects/$projectId/secret-manager/commits/$environment/$folderId/$commitId",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId/$commitId"
     ),
     CommitsPage: setRoute(
-      "/secret-manager/$projectId/commits/$environment/$folderId",
+      "/projects/$projectId/secret-manager/commits/$environment/$folderId",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId"
     ),
     OverviewPage: setRoute(
-      "/secret-manager/$projectId/overview",
+      "/projects/$projectId/secret-manager/overview",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/overview"
     ),
     IntegrationsListPage: setRoute(
-      "/secret-manager/$projectId/integrations",
+      "/projects/$projectId/secret-manager/integrations",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/"
     ),
     IntegrationDetailsByIDPage: setRoute(
-      "/secret-manager/$projectId/integrations/$integrationId",
+      "/projects/$projectId/secret-manager/integrations/$integrationId",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/$integrationId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/$integrationId"
     ),
     SecretSyncDetailsByIDPage: setRoute(
-      "/secret-manager/$projectId/integrations/secret-syncs/$destination/$syncId",
+      "/projects/$projectId/secret-manager/integrations/secret-syncs/$destination/$syncId",
-      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId"
     ),
     Integratons: {
       SelectIntegrationAuth: setRoute(
-        "/secret-manager/$projectId/integrations/select-integration-auth",
+        "/projects/$projectId/secret-manager/integrations/select-integration-auth",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/select-integration-auth"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/select-integration-auth"
       ),
       HerokuOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/heroku/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/heroku/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/heroku/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/heroku/oauth2/callback"
       ),
       HerokuConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/heroku/create",
+        "/projects/$projectId/secret-manager/integrations/heroku/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/heroku/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/heroku/create"
       ),
       AwsParameterStoreConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/aws-parameter-store/create",
+        "/projects/$projectId/secret-manager/integrations/aws-parameter-store/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-parameter-store/create"
       ),
       AwsSecretManagerConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/aws-secret-manager/create",
+        "/projects/$projectId/secret-manager/integrations/aws-secret-manager/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-secret-manager/create"
       ),
       AzureAppConfigurationsOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-app-configuration/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/azure-app-configuration/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
       ),
       AzureAppConfigurationsConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-app-configuration/create",
+        "/projects/$projectId/secret-manager/integrations/azure-app-configuration/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-app-configuration/create"
       ),
       AzureDevopsConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-devops/create",
+        "/projects/$projectId/secret-manager/integrations/azure-devops/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-devops/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-devops/create"
       ),
       AzureKeyVaultAuthorizePage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-key-vault/authorize",
+        "/projects/$projectId/secret-manager/integrations/azure-key-vault/authorize",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/authorize"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/authorize"
       ),
       AzureKeyVaultOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-key-vault/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/azure-key-vault/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback"
       ),
       AzureKeyVaultConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/azure-key-vault/create",
+        "/projects/$projectId/secret-manager/integrations/azure-key-vault/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/create"
       ),
       BitbucketOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/bitbucket/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/bitbucket/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/bitbucket/oauth2/callback"
       ),
       BitbucketConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/bitbucket/create",
+        "/projects/$projectId/secret-manager/integrations/bitbucket/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/bitbucket/create"
       ),
       ChecklyConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/checkly/create",
+        "/projects/$projectId/secret-manager/integrations/checkly/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/checkly/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/checkly/create"
       ),
       CircleConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/circleci/create",
+        "/projects/$projectId/secret-manager/integrations/circleci/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/circleci/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/circleci/create"
       ),
       CloudflarePagesConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/cloudflare-pages/create",
+        "/projects/$projectId/secret-manager/integrations/cloudflare-pages/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-pages/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-pages/create"
       ),
       DigitalOceanAppPlatformConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/digital-ocean-app-platform/create",
+        "/projects/$projectId/secret-manager/integrations/digital-ocean-app-platform/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/digital-ocean-app-platform/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/digital-ocean-app-platform/create"
       ),
       CloudflareWorkersConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/cloudflare-workers/create",
+        "/projects/$projectId/secret-manager/integrations/cloudflare-workers/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-workers/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-workers/create"
       ),
       CodefreshConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/codefresh/create",
+        "/projects/$projectId/secret-manager/integrations/codefresh/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/codefresh/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/codefresh/create"
       ),
       GcpSecretManagerConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/gcp-secret-manager/create",
+        "/projects/$projectId/secret-manager/integrations/gcp-secret-manager/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gcp-secret-manager/create"
       ),
       GcpSecretManagerOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/gcp-secret-manager/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/gcp-secret-manager/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gcp-secret-manager/oauth2/callback"
       ),
       GithubConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/github/create",
+        "/projects/$projectId/secret-manager/integrations/github/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/github/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/github/create"
       ),
       GithubOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/github/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/github/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/github/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/github/oauth2/callback"
       ),
       GitlabConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/gitlab/create",
+        "/projects/$projectId/secret-manager/integrations/gitlab/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gitlab/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gitlab/create"
       ),
       GitlabOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/gitlab/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/gitlab/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gitlab/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gitlab/oauth2/callback"
       ),
       VercelOauthCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/vercel/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/vercel/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/vercel/oauth2/callback"
       ),
       VercelConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/vercel/create",
+        "/projects/$projectId/secret-manager/integrations/vercel/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/vercel/create"
       ),
       FlyioConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/flyio/create",
+        "/projects/$projectId/secret-manager/integrations/flyio/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/flyio/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/flyio/create"
       ),
       HashicorpVaultConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/hashicorp-vault/create",
+        "/projects/$projectId/secret-manager/integrations/hashicorp-vault/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/hashicorp-vault/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/hashicorp-vault/create"
       ),
       HasuraCloudConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/hasura-cloud/create",
+        "/projects/$projectId/secret-manager/integrations/hasura-cloud/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/hasura-cloud/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/hasura-cloud/create"
       ),
       LaravelForgeConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/laravel-forge/create",
+        "/projects/$projectId/secret-manager/integrations/laravel-forge/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/laravel-forge/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/laravel-forge/create"
       ),
       NorthflankConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/northflank/create",
+        "/projects/$projectId/secret-manager/integrations/northflank/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/northflank/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/northflank/create"
       ),
       RailwayConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/railway/create",
+        "/projects/$projectId/secret-manager/integrations/railway/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/railway/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/railway/create"
       ),
       RenderConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/render/create",
+        "/projects/$projectId/secret-manager/integrations/render/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/render/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/render/create"
       ),
       RundeckConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/rundeck/create",
+        "/projects/$projectId/secret-manager/integrations/rundeck/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/rundeck/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/rundeck/create"
       ),
       WindmillConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/windmill/create",
+        "/projects/$projectId/secret-manager/integrations/windmill/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/windmill/create"
       ),
       TravisCIConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/travisci/create",
+        "/projects/$projectId/secret-manager/integrations/travisci/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/travisci/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/travisci/create"
       ),
       TerraformCloudConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/terraform-cloud/create",
+        "/projects/$projectId/secret-manager/integrations/terraform-cloud/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/terraform-cloud/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/terraform-cloud/create"
       ),
       TeamcityConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/teamcity/create",
+        "/projects/$projectId/secret-manager/integrations/teamcity/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/teamcity/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/teamcity/create"
       ),
       SupabaseConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/supabase/create",
+        "/projects/$projectId/secret-manager/integrations/supabase/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/supabase/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/supabase/create"
       ),
       OctopusDeployCloudConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/octopus-deploy/create",
+        "/projects/$projectId/secret-manager/integrations/octopus-deploy/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/octopus-deploy/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/octopus-deploy/create"
       ),
       DatabricksConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/databricks/create",
+        "/projects/$projectId/secret-manager/integrations/databricks/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/databricks/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/databricks/create"
       ),
       QoveryConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/qovery/create",
+        "/projects/$projectId/secret-manager/integrations/qovery/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/qovery/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/qovery/create"
       ),
       Cloud66ConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/cloud-66/create",
+        "/projects/$projectId/secret-manager/integrations/cloud-66/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloud-66/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloud-66/create"
       ),
       NetlifyConfigurePage: setRoute(
-        "/secret-manager/$projectId/integrations/netlify/create",
+        "/projects/$projectId/secret-manager/integrations/netlify/create",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/create"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/netlify/create"
       ),
       NetlifyOuathCallbackPage: setRoute(
-        "/secret-manager/$projectId/integrations/netlify/oauth2/callback",
+        "/projects/$projectId/secret-manager/integrations/netlify/oauth2/callback",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/oauth2/callback"
+        "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/netlify/oauth2/callback"
       )
     }
   },
   CertManager: {
     CertAuthDetailsByIDPage: setRoute(
-      "/cert-manager/$projectId/ca/$caName",
+      "/projects/$projectId/cert-manager/ca/$caName",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caName"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/ca/$caName"
     ),
     SubscribersPage: setRoute(
-      "/cert-manager/$projectId/subscribers",
+      "/projects/$projectId/cert-manager/subscribers",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers"
     ),
     CertificatesPage: setRoute(
-      "/cert-manager/$projectId/certificates",
+      "/projects/$projectId/cert-manager/certificates",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificates"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificates"
     ),
     CertificateAuthoritiesPage: setRoute(
-      "/cert-manager/$projectId/certificate-authorities",
+      "/projects/$projectId/cert-manager/certificate-authorities",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificate-authorities"
     ),
     AlertingPage: setRoute(
-      "/cert-manager/$projectId/alerting",
+      "/projects/$projectId/cert-manager/alerting",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/alerting"
     ),
     PkiCollectionDetailsByIDPage: setRoute(
-      "/cert-manager/$projectId/pki-collections/$collectionId",
+      "/projects/$projectId/cert-manager/pki-collections/$collectionId",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/pki-collections/$collectionId"
     ),
     PkiSubscriberDetailsByIDPage: setRoute(
-      "/cert-manager/$projectId/subscribers/$subscriberName",
+      "/projects/$projectId/cert-manager/subscribers/$subscriberName",
-      "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers/$subscriberName"
     )
   },
   Ssh: {
     SshCaByIDPage: setRoute(
-      "/ssh/$projectId/ca/$caId",
+      "/projects/$projectId/ssh/ca/$caId",
-      "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ca/$caId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/ssh/_ssh-layout/ca/$caId"
     ),
     SshHostGroupDetailsByIDPage: setRoute(
-      "/ssh/$projectId/ssh-host-groups/$sshHostGroupId",
+      "/projects/$projectId/ssh/ssh-host-groups/$sshHostGroupId",
-      "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/ssh/_ssh-layout/ssh-host-groups/$sshHostGroupId"
     )
   },
   SecretScanning: {
     DataSourceByIdPage: setRoute(
-      "/secret-scanning/$projectId/data-sources/$type/$dataSourceId",
+      "/projects/$projectId/secret-scanning/data-sources/$type/$dataSourceId",
-      "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/data-sources/$type/$dataSourceId"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-scanning/_secret-scanning-layout/data-sources/$type/$dataSourceId"
     ),
     FindingsPage: setRoute(
-      "/secret-scanning/$projectId/findings",
+      "/projects/$projectId/secret-scanning/findings",
-      "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/findings"
+      "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-scanning/_secret-scanning-layout/findings"
     )
   },
   Public: {

frontend/src/helpers/project.ts

@@ -59,14 +59,14 @@ export const initProjectHelper = async ({ projectName }: { projectName: string }
 
   return project;
 };
-export const getProjectHomePage = (workspace: Workspace) => {
+export const getProjectHomePage = (type: ProjectType) => {
-  switch (workspace.type) {
+  switch (type) {
     case ProjectType.CertificateManager:
-      return `/${workspace.type}/$projectId/subscribers` as const;
+      return `/projects/$projectId/${type}/subscribers` as const;
     case ProjectType.SecretScanning:
-      return `/${workspace.type}/$projectId/data-sources` as const;
+      return `/projects/$projectId/${type}/data-sources` as const;
     default:
-      return `/${workspace.type}/$projectId/overview` as const;
+      return `/projects/$projectId/${type}/overview` as const;
   }
 };
 
@@ -80,3 +80,8 @@ export const getProjectTitle = (type: ProjectType) => {
   };
   return titleConvert[type];
 };
+
+export const getCurrentProductFromUrl = (location: string) => {
+  const type = Object.values(ProjectType).find((el) => location.includes(`/${el}`));
+  return type;
+};

frontend/src/hooks/api/workspace/types.ts

@@ -24,7 +24,7 @@ export type Workspace = {
   __v: number;
   id: string;
   name: string;
-  type: ProjectType;
+  defaultType: ProjectType;
   description?: string;
   orgId: string;
   version: ProjectVersion;

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Outlet } from "@tanstack/react-router";
+import { Outlet, useLocation, useParams, useSearch } from "@tanstack/react-router";
 
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
 import { Banner } from "@app/components/page-frames/Banner";
@@ -12,10 +12,17 @@ import { usePopUp } from "@app/hooks";
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
 import { OrgSidebar } from "./components/OrgSidebar";
 import { Navbar } from "./components/NavBar";
+import { twMerge } from "tailwind-merge";
 
 export const OrganizationLayout = () => {
   const { config } = useServerConfig();
   const { permission } = useOrgPermission();
+  const projectId = useParams({
+    strict: false,
+    select: (el) => el?.projectId
+  });
+  const isInsideProject = Boolean(projectId);
+  console.log(isInsideProject);
 
   const shouldShowProductsSidebar = permission.can(
     OrgPermissionSecretShareAction.ManageSettings,
@@ -37,8 +44,13 @@ export const OrganizationLayout = () => {
         <Navbar />
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <OrgSidebar />
+          <OrgSidebar isHidden={isInsideProject} />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 py-4 dark:[color-scheme:dark]">
+          <main
+            className={twMerge(
+              "flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 py-4 dark:[color-scheme:dark]",
+              isInsideProject && "p-0"
+            )}
+          >
             <Outlet />
           </main>
         </div>

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -4,6 +4,7 @@ import {
   faArrowUpRightFromSquare,
   faBook,
   faCheck,
+  faCubes,
   faEnvelope,
   faInfo,
   faSignOut,
@@ -26,6 +27,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  IconButton,
   Lottie,
   TBreadcrumbFormat
 } from "@app/components/v2";
@@ -151,13 +153,28 @@ export const Navbar = () => {
           style={{ fontSize: "10px" }}
         />
         <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
+          <Link to="/organization/projects">
             <div className="flex cursor-pointer items-center gap-2 text-sm text-white">
+              <div>
+                <FontAwesomeIcon icon={faCubes} className="text-xs" />
+              </div>
+
               <div className="max-w-32 overflow-hidden text-ellipsis">{currentOrg?.name}</div>
               <div className="rounded border border-mineshaft-500 p-1 text-xs text-bunker-300">
                 {getPlan(subscription)}
               </div>
-              <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
+            </div>
+          </Link>
+          <DropdownMenuTrigger asChild>
+            <div>
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                ariaLabel="switch-org"
+                className="px-2 py-1"
+              >
+                <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
+              </IconButton>
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx

@@ -20,8 +20,13 @@ import { usePopUp } from "@app/hooks";
 import { useGetOrgTrialUrl } from "@app/hooks/api";
 
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
+import { AnimatePresence, motion } from "framer-motion";
 
-export const OrgSidebar = () => {
+type Props = {
+  isHidden?: boolean;
+};
+
+export const OrgSidebar = ({ isHidden }: Props) => {
   const { subscription } = useSubscription();
   const [showAdminsModal, setShowAdminsModal] = useState(false);
 
@@ -34,158 +39,175 @@ export const OrgSidebar = () => {
 
   return (
     <>
-      <aside className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 transition-all duration-150">
+      <AnimatePresence mode="popLayout">
-        <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
+        {!isHidden && (
-          <Menu>
+          <motion.aside
-            <MenuGroup title="Overview">
+            key="org-sidebar"
-              <Link to="/organization/projects">
+            transition={{ duration: 0.3 }}
-                {({ isActive }) => (
+            initial={{ opacity: 0, translateX: -240 }}
-                  <MenuItem isSelected={isActive} icon="notification-bell">
+            animate={{ opacity: 1, translateX: 0 }}
-                    Projects
+            exit={{ opacity: 0, translateX: -240 }}
-                  </MenuItem>
+            layout
-                )}
+            className="dark z-10 w-60 border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900"
-              </Link>
-              <Link to="/organization/access-management">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faUsers} className="mr-4" />
-                      Access Control
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/billing">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faMoneyBill} className="mr-4" />
-                      Usage & Billing
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/audit-logs">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faBook} className="mr-4" />
-                      Audit Logs
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/sso">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faCheckCircle} className="mr-4" />
-                      SSO Settings
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/settings">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faCog} className="mr-4" />
-                      Organization Settings
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-            </MenuGroup>
-            <MenuGroup title="Resources">
-              <Link to="/organization/app-connections">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faPlug} className="mr-4" />
-                      App Connections
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-              <Link to="/organization/gateways">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faDoorClosed} className="mr-4" />
-                      Gateways
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-            </MenuGroup>
-            <MenuGroup title="Admin Panels">
-              {user?.superAdmin && (
-                <Link to="/admin">
-                  {({ isActive }) => (
-                    <MenuItem isSelected={isActive}>
-                      <div className="mx-1">
-                        <FontAwesomeIcon icon={faUserCog} className="mr-4" />
-                        Server Admin Console
-                      </div>
-                    </MenuItem>
-                  )}
-                </Link>
-              )}
-              <Link to="/organization/admin">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive}>
-                    <div className="mx-1">
-                      <FontAwesomeIcon icon={faCog} className="mr-4" />
-                      Org Admin Console
-                    </div>
-                  </MenuItem>
-                )}
-              </Link>
-            </MenuGroup>
-            <MenuGroup title="Others">
-              <Link to="/organization/secret-sharing">
-                {({ isActive }) => (
-                  <MenuItem isSelected={isActive} icon="lock-closed">
-                    Share Secret
-                  </MenuItem>
-                )}
-              </Link>
-            </MenuGroup>
-          </Menu>
-          <div
-            className={`relative mt-10 ${
-              subscription && subscription.slug === "starter" && !subscription.has_used_trial
-                ? "mb-2"
-                : "mb-4"
-            } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
           >
-            {subscription && subscription.slug === "starter" && !subscription.has_used_trial && (
+            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
-              <Tooltip content="Start Free Pro Trial" side="right">
+              <Menu>
-                <button
+                <MenuGroup title="Overview">
-                  type="button"
+                  <Link to="/organization/projects">
-                  onClick={async () => {
+                    {({ isActive }) => (
-                    if (!subscription || !currentOrg) return;
+                      <MenuItem isSelected={isActive} icon="notification-bell">
+                        Projects
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/access-management">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faUsers} className="mr-4" />
+                          Access Control
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/billing">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faMoneyBill} className="mr-4" />
+                          Usage & Billing
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/audit-logs">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faBook} className="mr-4" />
+                          Audit Logs
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/sso">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faCheckCircle} className="mr-4" />
+                          SSO Settings
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/settings">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faCog} className="mr-4" />
+                          Organization Settings
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                </MenuGroup>
+                <MenuGroup title="Resources">
+                  <Link to="/organization/app-connections">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faPlug} className="mr-4" />
+                          App Connections
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                  <Link to="/organization/gateways">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faDoorClosed} className="mr-4" />
+                          Gateways
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                </MenuGroup>
+                <MenuGroup title="Admin Panels">
+                  {user?.superAdmin && (
+                    <Link to="/admin">
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive}>
+                          <div className="mx-1">
+                            <FontAwesomeIcon icon={faUserCog} className="mr-4" />
+                            Server Admin Console
+                          </div>
+                        </MenuItem>
+                      )}
+                    </Link>
+                  )}
+                  <Link to="/organization/admin">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive}>
+                        <div className="mx-1">
+                          <FontAwesomeIcon icon={faCog} className="mr-4" />
+                          Org Admin Console
+                        </div>
+                      </MenuItem>
+                    )}
+                  </Link>
+                </MenuGroup>
+                <MenuGroup title="Others">
+                  <Link to="/organization/secret-sharing">
+                    {({ isActive }) => (
+                      <MenuItem isSelected={isActive} icon="lock-closed">
+                        Share Secret
+                      </MenuItem>
+                    )}
+                  </Link>
+                </MenuGroup>
+              </Menu>
+              <div
+                className={`relative mt-10 ${
+                  subscription && subscription.slug === "starter" && !subscription.has_used_trial
+                    ? "mb-2"
+                    : "mb-4"
+                } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
+              >
+                {subscription &&
+                  subscription.slug === "starter" &&
+                  !subscription.has_used_trial && (
+                    <Tooltip content="Start Free Pro Trial" side="right">
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          if (!subscription || !currentOrg) return;
 
-                    // direct user to start pro trial
+                          // direct user to start pro trial
-                    const url = await mutateAsync({
+                          const url = await mutateAsync({
-                      orgId: currentOrg.id,
+                            orgId: currentOrg.id,
-                      success_url: window.location.href
+                            success_url: window.location.href
-                    });
+                          });
 
-                    window.location.href = url;
+                          window.location.href = url;
-                  }}
+                        }}
-                  className="mt-1.5 w-full"
+                        className="mt-1.5 w-full"
-                >
+                      >
-                  <div className="justify-left mb-1.5 mt-1.5 flex w-full flex-col items-center rounded-md p-1 text-xs text-mineshaft-300 transition-all duration-150 hover:bg-mineshaft-500 hover:text-primary-400">
+                        <div className="justify-left mb-1.5 mt-1.5 flex w-full flex-col items-center rounded-md p-1 text-xs text-mineshaft-300 transition-all duration-150 hover:bg-mineshaft-500 hover:text-primary-400">
-                    <FontAwesomeIcon icon={faInfinity} className="py-2 text-lg text-primary" />
+                          <FontAwesomeIcon
-                    Pro Trial
+                            icon={faInfinity}
-                  </div>
+                            className="py-2 text-lg text-primary"
-                </button>
+                          />
-              </Tooltip>
+                          Pro Trial
-            )}
+                        </div>
-          </div>
+                      </button>
-        </nav>
+                    </Tooltip>
-      </aside>
+                  )}
+              </div>
+            </nav>
+          </motion.aside>
+        )}
+      </AnimatePresence>
       <Modal isOpen={showAdminsModal} onOpenChange={setShowAdminsModal}>
         <ModalContent title="Server Administrators" subTitle="View all server administrators">
           <div className="mb-2">

frontend/src/layouts/ProjectLayout/Copy.tsx

@@ -0,0 +1,411 @@
+import { useTranslation } from "react-i18next";
+import { faMobile } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { motion } from "framer-motion";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  BreadcrumbContainer,
+  Menu,
+  MenuGroup,
+  MenuItem,
+  TBreadcrumbFormat
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { ProjectPermissionSecretScanningFindingActions } from "@app/context/ProjectPermissionContext/types";
+import {
+  useGetAccessRequestsCount,
+  useGetSecretApprovalRequestCount,
+  useGetSecretRotations
+} from "@app/hooks/api";
+import { useGetSecretScanningUnresolvedFindingCount } from "@app/hooks/api/secretScanningV2";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { AssumePrivilegeModeBanner } from "./components/AssumePrivilegeModeBanner";
+import { ProjectSelect } from "./components/ProjectSelect";
+
+// 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 ProjectLayout = () => {
+  const { currentWorkspace } = useWorkspace();
+  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
+  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
+
+  const { permission } = useProjectPermission();
+
+  const { t } = useTranslation();
+  const { assumedPrivilegeDetails } = useProjectPermission();
+  const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
+  const { subscription } = useSubscription();
+
+  const isSecretManager = currentWorkspace?.type === ProjectType.SecretManager;
+  const isCertManager = currentWorkspace?.type === ProjectType.CertificateManager;
+  const isCmek = currentWorkspace?.type === ProjectType.KMS;
+  const isSSH = currentWorkspace?.type === ProjectType.SSH;
+  const isSecretScanning = currentWorkspace?.type === ProjectType.SecretScanning;
+
+  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
+    workspaceId,
+    options: { enabled: isSecretManager }
+  });
+  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({
+    projectSlug,
+    options: { enabled: isSecretManager }
+  });
+
+  // we only show the secret rotations v1 tab if they have existing rotations
+  const { data: secretRotations } = useGetSecretRotations({
+    workspaceId,
+    options: {
+      enabled: isSecretManager && Boolean(subscription.secretRotation),
+      refetchOnMount: false
+    }
+  });
+
+  const pendingRequestsCount =
+    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
+
+  const { data: unresolvedFindings } = useGetSecretScanningUnresolvedFindingCount(workspaceId, {
+    enabled:
+      isSecretScanning &&
+      subscription.secretScanning &&
+      permission.can(
+        ProjectPermissionSecretScanningFindingActions.Read,
+        ProjectPermissionSub.SecretScanningFindings
+      ),
+    refetchInterval: 30000
+  });
+
+  return (
+    <>
+      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+          <motion.div
+            key="menu-project-items"
+            initial={{ x: -150 }}
+            animate={{ x: 0 }}
+            exit={{ x: -150 }}
+            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"
+          >
+            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
+              <div>
+                <ProjectSelect />
+                <div className="px-1">
+                  <Menu>
+                    <MenuGroup title="Main Menu">
+                      {isSecretManager && (
+                        <Link
+                          to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="lock-closed">
+                              {t("nav.menu.secrets")}
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isCertManager && (
+                        <>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/subscribers` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="pki-subscriber">
+                                Subscribers
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/certificate-templates` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem
+                                iconMode="reverse"
+                                isSelected={isActive}
+                                icon="pki-template"
+                              >
+                                Certificate Templates
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/certificates` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate">
+                                Certificates
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={
+                              `/${ProjectType.CertificateManager}/$projectId/certificate-authorities` as const
+                            }
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate-authority">
+                                Certificate Authorities
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={`/${ProjectType.CertificateManager}/$projectId/alerting` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="notification-bell">
+                                Alerting
+                              </MenuItem>
+                            )}
+                          </Link>
+                        </>
+                      )}
+                      {isCmek && (
+                        <Link
+                          to={`/${ProjectType.KMS}/$projectId/overview` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="lock-closed">
+                              Overview
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isCmek && (
+                        <Link
+                          to={`/${ProjectType.KMS}/$projectId/kmip` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="key-user" iconMode="reverse">
+                              KMIP
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isSSH && (
+                        <>
+                          <Link
+                            to={`/${ProjectType.SSH}/$projectId/overview` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="server">
+                                Hosts
+                              </MenuItem>
+                            )}
+                          </Link>
+                          {/* <Link
+                            to={`/${ProjectType.SSH}/$projectId/certificates` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="certificate" iconMode="reverse">
+                                Certificates
+                              </MenuItem>
+                            )}
+                          </Link> */}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Read}
+                            a={ProjectPermissionSub.SshCertificateAuthorities}
+                          >
+                            {(isAllowed) =>
+                              isAllowed && (
+                                <Link
+                                  to={`/${ProjectType.SSH}/$projectId/cas` as const}
+                                  params={{
+                                    projectId: currentWorkspace.id
+                                  }}
+                                >
+                                  {({ isActive }) => (
+                                    <MenuItem
+                                      isSelected={isActive}
+                                      icon="certificate-authority"
+                                      iconMode="reverse"
+                                    >
+                                      Certificate Authorities
+                                    </MenuItem>
+                                  )}
+                                </Link>
+                              )
+                            }
+                          </ProjectPermissionCan>
+                        </>
+                      )}
+                      {isSecretScanning && (
+                        <Link
+                          to={`/${ProjectType.SecretScanning}/$projectId/data-sources` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="blocks">
+                              Data Sources
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isSecretScanning && (
+                        <Link
+                          to={`/${ProjectType.SecretScanning}/$projectId/findings` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="search">
+                              <div className="flex w-full items-center justify-between">
+                                <span>Findings</span>
+                                {Boolean(unresolvedFindings) && (
+                                  <Badge variant="primary" className="mr-2">
+                                    {unresolvedFindings}
+                                  </Badge>
+                                )}
+                              </div>
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isSecretManager && (
+                        <Link
+                          to={`/${ProjectType.SecretManager}/$projectId/integrations` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="jigsaw-puzzle">
+                              {t("nav.menu.integrations")}
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isSecretManager && Boolean(secretRotations?.length) && (
+                        <Link
+                          to={`/${ProjectType.SecretManager}/$projectId/secret-rotation` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="rotation">
+                              Secret Rotation
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                      {isSecretManager && (
+                        <Link
+                          to={`/${ProjectType.SecretManager}/$projectId/approval` as const}
+                          params={{
+                            projectId: currentWorkspace.id
+                          }}
+                        >
+                          {({ isActive }) => (
+                            <MenuItem isSelected={isActive} icon="circular-check">
+                              Approvals
+                              {Boolean(
+                                secretApprovalReqCount?.open ||
+                                  accessApprovalRequestCount?.pendingCount
+                              ) && (
+                                <Badge variant="primary" className="ml-1.5">
+                                  {pendingRequestsCount}
+                                </Badge>
+                              )}
+                            </MenuItem>
+                          )}
+                        </Link>
+                      )}
+                    </MenuGroup>
+                    <MenuGroup title="Other">
+                      <Link
+                        to={`/${currentWorkspace.type}/$projectId/access-management` as const}
+                        params={{
+                          projectId: currentWorkspace.id
+                        }}
+                      >
+                        {({ isActive }) => (
+                          <MenuItem isSelected={isActive} icon="groups">
+                            Access Control
+                          </MenuItem>
+                        )}
+                      </Link>
+                      <Link
+                        to={`/${currentWorkspace.type}/$projectId/settings` as const}
+                        params={{
+                          projectId: currentWorkspace.id
+                        }}
+                      >
+                        {({ isActive }) => (
+                          <MenuItem isSelected={isActive} icon="toggle-settings">
+                            {t("nav.menu.project-settings")}
+                          </MenuItem>
+                        )}
+                      </Link>
+                    </MenuGroup>
+                  </Menu>
+                </div>
+              </div>
+            </nav>
+          </motion.div>
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]">
+            {breadcrumbs ? (
+              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
+            ) : null}
+            <Outlet />
+          </div>
+        </div>
+      </div>
+      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+        <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/ProjectLayout/ProjectLayout.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { Link, Outlet } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -36,8 +36,6 @@ import { ProjectSelect } from "./components/ProjectSelect";
 // If the product layout differs significantly, create a new layout as needed.
 export const ProjectLayout = () => {
   const { currentWorkspace } = useWorkspace();
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
   const { permission } = useProjectPermission();
 
@@ -392,10 +390,7 @@ export const ProjectLayout = () => {
               </div>
             </nav>
           </motion.div>
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]">
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 py-4 dark:[color-scheme:dark]">
-            {breadcrumbs ? (
-              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-            ) : null}
             <Outlet />
           </div>
         </div>

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -1,15 +1,26 @@
 import { useMemo } from "react";
-import { components, MenuProps, OptionProps } from "react-select";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
-import { faChevronRight, faPlus, faStar as faSolidStar } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheck,
+  faCube,
+  faPlus,
+  faStar as faSolidStar,
+  faSort
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
-import { Button, FilterableSelect } from "@app/components/v2";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton
+} from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -17,49 +28,39 @@ import {
   useSubscription,
   useWorkspace
 } from "@app/context";
-import { getProjectTitle } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
-import { Workspace } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { Link, linkOptions } from "@tanstack/react-router";
+import { getCurrentProductFromUrl, getProjectHomePage } from "@app/helpers/project";
 
-type TWorkspaceWithFaveProp = Workspace & { isFavorite: boolean };
+// TODO(pta): add search to project select
-
+export const ProjectSelect = () => {
-const ProjectsMenu = ({ children, ...props }: MenuProps<TWorkspaceWithFaveProp>) => {
+  const { currentWorkspace } = useWorkspace();
-  return (
-    <components.Menu {...props}>
-      {children}
-      <hr className="mb-2 h-px border-0 bg-mineshaft-500" />
-      <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Workspace}>
-        {(isAllowed) => (
-          <Button
-            className="w-full bg-mineshaft-700 pt-2 text-bunker-200"
-            colorSchema="primary"
-            variant="outline_bg"
-            size="xs"
-            isDisabled={!isAllowed}
-            onClick={() => props.clearValue()}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          >
-            Add Project
-          </Button>
-        )}
-      </OrgPermissionCan>
-    </components.Menu>
-  );
-};
-
-const ProjectOption = ({
-  isSelected,
-  children,
-  data,
-  ...props
-}: OptionProps<TWorkspaceWithFaveProp>) => {
   const { currentOrg } = useOrganization();
-  const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
+  const { data: workspaces = [] } = useGetUserWorkspaces();
   const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg.id);
 
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
+
+  const addProjectToFavorites = async (projectId: string) => {
+    try {
+      await updateUserProjectFavorites({
+        orgId: currentOrg!.id,
+        projectFavorites: [...(projectFavorites || []), projectId]
+      });
+    } catch {
+      createNotification({
+        text: "Failed to add project to favorites.",
+        type: "error"
+      });
+    }
+  };
+
   const removeProjectFromFavorites = async (projectId: string) => {
     try {
       await updateUserProjectFavorites({
@@ -74,63 +75,6 @@ const ProjectOption = ({
     }
   };
 
-  const addProjectToFavorites = async (projectId: string) => {
-    try {
-      await updateUserProjectFavorites({
-        orgId: currentOrg!.id,
-        projectFavorites: [...(projectFavorites || []), projectId]
-      });
-    } catch {
-      createNotification({
-        text: "Failed to add project to favorites.",
-        type: "error"
-      });
-    }
-  };
-  return (
-    <components.Option
-      isSelected={isSelected}
-      data={data}
-      {...props}
-      className={twMerge(props.className, isSelected && "bg-mineshaft-500")}
-    >
-      <div className="flex w-full items-center">
-        {isSelected && (
-          <FontAwesomeIcon className="mr-2 text-primary" icon={faChevronRight} size="xs" />
-        )}
-        <p className="truncate">{children}</p>
-        {data.isFavorite ? (
-          <FontAwesomeIcon
-            icon={faSolidStar}
-            className="ml-auto text-sm text-yellow-600 hover:text-mineshaft-400"
-            onClick={async (e) => {
-              e.stopPropagation();
-              await removeProjectFromFavorites(data.id);
-            }}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={faStar}
-            className="ml-auto text-sm text-mineshaft-400 hover:text-mineshaft-300"
-            onClick={async (e) => {
-              e.stopPropagation();
-              await addProjectToFavorites(data.id);
-            }}
-          />
-        )}
-      </div>
-    </components.Option>
-  );
-};
-
-export const ProjectSelect = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrganization();
-  const { data: workspaces = [] } = useGetUserWorkspaces();
-  const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg.id!);
-
-  const { subscription } = useSubscription();
-
   const isAddingProjectsAllowed = subscription?.workspaceLimit
     ? subscription.workspacesUsed < subscription.workspaceLimit
     : true;
@@ -140,7 +84,7 @@ export const ProjectSelect = () => {
     "upgradePlan"
   ] as const);
 
-  const { options, value } = useMemo(() => {
+  const projects = useMemo(() => {
     const projectOptions = workspaces
       .map((w): Workspace & { isFavorite: boolean } => ({
         ...w,
@@ -148,66 +92,107 @@ export const ProjectSelect = () => {
       }))
       .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite));
 
-    const currentOption = projectOptions.find((option) => option.id === currentWorkspace?.id);
+    return projectOptions;
-
-    if (!currentOption) {
-      return {
-        options: projectOptions,
-        value: null
-      };
-    }
-
-    return {
-      options: [
-        currentOption,
-        ...projectOptions.filter((option) => option.id !== currentOption.id)
-      ],
-      value: currentOption
-    };
   }, [workspaces, projectFavorites, currentWorkspace]);
 
   return (
-    <div className="mt-2 w-full p-3">
+    <div className="flex w-full items-center gap-2">
-      <p className="mb-1 ml-1.5 text-xs font-semibold uppercase text-gray-400">
+      <DropdownMenu modal={false}>
-        {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"}
+        <Link
-      </p>
+          to={getProjectHomePage(
-      <FilterableSelect
+            getCurrentProductFromUrl(window.location.href) || ProjectType.SecretManager
-        className="text-sm"
+          )}
-        value={value}
+          params={{
-        filterOption={(option, inputValue) =>
+            projectId: currentWorkspace.id
-          option.data.name.toLowerCase().includes(inputValue.toLowerCase())
+          }}
-        }
+        >
-        getOptionLabel={(option) => option.name}
+          <div className="flex cursor-pointer items-center gap-2 text-sm text-white">
-        getOptionValue={(option) => option.id}
+            <div>
-        onChange={(newValue) => {
+              <FontAwesomeIcon icon={faCube} className="text-xs" />
-          // hacky use of null as indication to create project
+            </div>
-          if (!newValue) {
+            <div className="max-w-32 overflow-hidden text-ellipsis">{currentWorkspace?.name}</div>
-            if (isAddingProjectsAllowed) {
+          </div>
-              handlePopUpOpen("addNewWs");
+        </Link>
-            } else {
+        <DropdownMenuTrigger asChild>
-              handlePopUpOpen("upgradePlan");
+          <div>
-            }
+            <IconButton
-            return;
+              variant="plain"
-          }
+              colorSchema="secondary"
-
+              ariaLabel="switch-org"
-          const project = newValue as TWorkspaceWithFaveProp;
+              className="px-2 py-1"
-          // todo(akhi): this is not using react query because react query in overview is throwing error when envs are not exact same count
+            >
-          // to reproduce change this back to router.push and switch between two projects with different env count
+              <FontAwesomeIcon icon={faSort} className="text-xs text-bunker-300" />
-          // look into this on dashboard revamp
+            </IconButton>
-          window.location.assign(`/${project.type}/${project.id}/overview`);
+          </div>
-        }}
+        </DropdownMenuTrigger>
-        options={options}
+        <DropdownMenuContent
-        components={{
+          align="start"
-          Option: ProjectOption,
+          side="bottom"
-          Menu: ProjectsMenu
+          className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
-        }}
+          style={{ minWidth: "220px" }}
-      />
+        >
+          <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">Projects</div>
+          {projects?.map((workspace) => {
+            return (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={async () => {
+                  // todo(akhi): this is not using react query because react query in overview is throwing error when envs are not exact same count
+                  // to reproduce change this back to router.push and switch between two projects with different env count
+                  // look into this on dashboard revamp
+                  const url = linkOptions({
+                    to: getProjectHomePage(workspace.defaultType),
+                    params: {
+                      projectId: workspace.id
+                    }
+                  });
+                  window.location.assign(url.to.replaceAll("$projectId", workspace.id));
+                }}
+                icon={
+                  currentWorkspace?.id === workspace.id && (
+                    <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                  )
+                }
+              >
+                <div className="flex items-center">
+                  <div className="flex max-w-[150px] flex-grow items-center justify-between truncate">
+                    {workspace.name}
+                  </div>
+                  <FontAwesomeIcon
+                    icon={workspace.isFavorite ? faSolidStar : faStar}
+                    className="text-sm text-yellow-600 hover:text-mineshaft-400"
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      await (
+                        workspace.isFavorite ? removeProjectFromFavorites : addProjectToFavorites
+                      )(workspace.id);
+                    }}
+                  />
+                </div>
+              </DropdownMenuItem>
+            );
+          })}
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Workspace}>
+            {(isAllowed) => (
+              <DropdownMenuItem
+                isDisabled={!isAllowed}
+                icon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() =>
+                  handlePopUpOpen(isAddingProjectsAllowed ? "addNewWs" : "upgradePlan")
+                }
+              >
+                New Project
+              </DropdownMenuItem>
+            )}
+          </OrgPermissionCan>
+        </DropdownMenuContent>
+      </DropdownMenu>
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You have exceeded the number of projects allowed on the free plan."
       />
-
       <NewProjectModal
         isOpen={popUp.addNewWs.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addNewWs", isOpen)}

frontend/src/pages/cert-manager/AlertingPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { AlertingPage } from "./AlertingPage";
+import { AlertingPage } from './AlertingPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/alerting',
 )({
   component: AlertingPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Alerting"
+          label: 'Alerting',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { CertAuthDetailsByIDPage } from "./CertAuthDetailsByIDPage";
+import { CertAuthDetailsByIDPage } from './CertAuthDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caName"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/ca/$caName',
 )({
   component: CertAuthDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -11,15 +11,15 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Certificate Authorities",
+          label: 'Certificate Authorities',
           link: linkOptions({
-            to: "/cert-manager/$projectId/certificate-authorities",
+            to: '/cert-manager/$projectId/certificate-authorities',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { CertificateAuthoritiesPage } from "./CertificateAuthoritiesPage";
+import { CertificateAuthoritiesPage } from './CertificateAuthoritiesPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificate-authorities',
 )({
   component: CertificateAuthoritiesPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Certificate Authorities"
+          label: 'Certificate Authorities',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/CertificatesPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { CertificatesPage } from "./CertificatesPage";
+import { CertificatesPage } from './CertificatesPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificates"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificates',
 )({
-  component: CertificatesPage
+  component: CertificatesPage,
-});
+})

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { PkiCollectionDetailsByIDPage } from "./PkiCollectionDetailsByIDPage";
+import { PkiCollectionDetailsByIDPage } from './PkiCollectionDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/pki-collections/$collectionId',
 )({
   component: PkiCollectionDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -11,15 +11,15 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Certificate Collections",
+          label: 'Certificate Collections',
           link: linkOptions({
-            to: "/cert-manager/$projectId/certificates",
+            to: '/cert-manager/$projectId/certificates',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { PkiSubscriberDetailsByIDPage } from "./PkiSubscriberDetailsByIDPage";
+import { PkiSubscriberDetailsByIDPage } from './PkiSubscriberDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers/$subscriberName',
 )({
   component: PkiSubscriberDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -11,15 +11,15 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Subscribers",
+          label: 'Subscribers',
           link: linkOptions({
-            to: "/cert-manager/$projectId/subscribers",
+            to: '/cert-manager/$projectId/subscribers',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/PkiSubscribersPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { PkiSubscribersPage } from "./PkiSubscribersPage";
+import { PkiSubscribersPage } from './PkiSubscribersPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers/',
 )({
-  component: PkiSubscribersPage
+  component: PkiSubscribersPage,
-});
+})

frontend/src/pages/cert-manager/PkiTemplateListPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { PkiTemplateListPage } from "./PkiTemplateListPage";
+import { PkiTemplateListPage } from './PkiTemplateListPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-templates/"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificate-templates/',
 )({
-  component: PkiTemplateListPage
+  component: PkiTemplateListPage,
-});
+})

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

@@ -1,9 +1,9 @@
-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/cert-manager/$projectId/_cert-manager-layout/settings"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/settings',
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Settings"
+          label: 'Settings',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/cert-manager/layout.tsx

@@ -1,41 +1,45 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { workspaceKeys } from "@app/hooks/api";
+import { workspaceKeys } from '@app/hooks/api'
-import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
+import {
-import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
+  fetchUserProjectPermissions,
-import { ProjectLayout } from "@app/layouts/ProjectLayout";
+  roleQueryKeys,
+} from '@app/hooks/api/roles/queries'
+import { fetchWorkspaceById } from '@app/hooks/api/workspace/queries'
+import { ProjectLayout } from '@app/layouts/ProjectLayout'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout',
 )({
   component: ProjectLayout,
   beforeLoad: async ({ params, context }) => {
     const project = await context.queryClient.ensureQueryData({
       queryKey: workspaceKeys.getWorkspaceById(params.projectId),
-      queryFn: () => fetchWorkspaceById(params.projectId)
+      queryFn: () => fetchWorkspaceById(params.projectId),
-    });
+    })
 
     await context.queryClient.ensureQueryData({
       queryKey: roleQueryKeys.getUserProjectPermissions({
-        workspaceId: params.projectId
+        workspaceId: params.projectId,
       }),
-      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
+      queryFn: () =>
-    });
+        fetchUserProjectPermissions({ workspaceId: params.projectId }),
+    })
 
     return {
       breadcrumbs: [
         {
-          label: "Cert Managers",
+          label: 'Cert Managers',
-          link: linkOptions({ to: "/organization/cert-manager/overview" })
+          link: linkOptions({ to: '/organization/cert-manager/overview' }),
         },
         {
           label: project.name,
           link: linkOptions({
-            to: "/cert-manager/$projectId/subscribers",
+            to: '/cert-manager/$projectId/subscribers',
-            params: { projectId: project.id }
+            params: { projectId: project.id },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/kms/KmipPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { KmipPage } from "./KmipPage";
+import { KmipPage } from './KmipPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/kmip',
 )({
-  component: KmipPage
+  component: KmipPage,
-});
+})

frontend/src/pages/kms/OverviewPage/route.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { OverviewPage } from "./OverviewPage";
+import { OverviewPage } from './OverviewPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/overview',
 )({
-  component: OverviewPage
+  component: OverviewPage,
-});
+})

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

@@ -1,9 +1,9 @@
-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/kms/$projectId/_kms-layout/settings"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/settings',
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Settings"
+          label: 'Settings',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/kms/layout.tsx

@@ -1,41 +1,45 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { workspaceKeys } from "@app/hooks/api";
+import { workspaceKeys } from '@app/hooks/api'
-import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
+import {
-import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
+  fetchUserProjectPermissions,
-import { ProjectLayout } from "@app/layouts/ProjectLayout";
+  roleQueryKeys,
+} from '@app/hooks/api/roles/queries'
+import { fetchWorkspaceById } from '@app/hooks/api/workspace/queries'
+import { ProjectLayout } from '@app/layouts/ProjectLayout'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout',
 )({
   component: ProjectLayout,
   beforeLoad: async ({ params, context }) => {
     const project = await context.queryClient.ensureQueryData({
       queryKey: workspaceKeys.getWorkspaceById(params.projectId),
-      queryFn: () => fetchWorkspaceById(params.projectId)
+      queryFn: () => fetchWorkspaceById(params.projectId),
-    });
+    })
 
     await context.queryClient.ensureQueryData({
       queryKey: roleQueryKeys.getUserProjectPermissions({
-        workspaceId: params.projectId
+        workspaceId: params.projectId,
       }),
-      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
+      queryFn: () =>
-    });
+        fetchUserProjectPermissions({ workspaceId: params.projectId }),
+    })
 
     return {
       breadcrumbs: [
         {
-          label: "KMS",
+          label: 'KMS',
-          link: linkOptions({ to: "/organization/kms/overview" })
+          link: linkOptions({ to: '/organization/kms/overview' }),
         },
         {
           label: project.name,
           link: linkOptions({
-            to: "/kms/$projectId/overview",
+            to: '/kms/$projectId/overview',
-            params: { projectId: project.id }
+            params: { projectId: project.id },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,38 +1,44 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  selectedTab: z
-  requesterEmail: z.string().catch("")
+    .nativeEnum(ProjectAccessControlTabs)
-});
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/access-management"
+  '/_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: "" })]
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
   },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Access Control",
+          label: 'Access Control',
           link: linkOptions({
-            to: "/cert-manager/$projectId/access-management",
+            to: '/cert-manager/$projectId/access-management',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

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

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

@@ -1,38 +1,44 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  selectedTab: z
-  requesterEmail: z.string().catch("")
+    .nativeEnum(ProjectAccessControlTabs)
-});
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/access-management"
+  '/_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: "" })]
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
   },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Access Control",
+          label: 'Access Control',
           link: linkOptions({
-            to: "/secret-manager/$projectId/access-management",
+            to: '/secret-manager/$projectId/access-management',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,38 +1,44 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  selectedTab: z
-  requesterEmail: z.string().catch("")
+    .nativeEnum(ProjectAccessControlTabs)
-});
+    .catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch(''),
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/access-management"
+  '/_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: "" })]
+    middlewares: [stripSearchParams({ requesterEmail: '' })],
   },
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Access Control",
+          label: 'Access Control',
           link: linkOptions({
-            to: "/secret-scanning/$projectId/access-management",
+            to: '/secret-scanning/$projectId/access-management',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,17 +1,19 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member)
+  selectedTab: z
-});
+    .nativeEnum(ProjectAccessControlTabs)
+    .catch(ProjectAccessControlTabs.Member),
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/access-management"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/ssh/_ssh-layout/access-management',
 )({
   component: AccessControlPage,
   validateSearch: zodValidator(AccessControlPageQuerySchema),
@@ -20,15 +22,15 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Access Control",
+          label: 'Access Control',
           link: linkOptions({
-            to: "/ssh/$projectId/access-management",
+            to: '/ssh/$projectId/access-management',
             params: {
-              projectId: params.projectId
+              projectId: params.projectId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/project/layout.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute } from "@tanstack/react-router";
+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 { BreadcrumbTypes } from "@app/components/v2";
+import { ProjectSelect } from "@app/layouts/ProjectLayout/components/ProjectSelect";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_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 })
+    });
+
+    return {
+      project,
+      breadcrumbs: [
+        {
+          type: BreadcrumbTypes.Component,
+          component: ProjectSelect
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/route.tsx

@@ -1,26 +1,30 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { SecretDashboardPathBreadcrumb } from '@app/components/navigation/SecretDashboardPathBreadcrumb'
-import { BreadcrumbTypes } from "@app/components/v2";
+import { BreadcrumbTypes } from '@app/components/v2'
 
-import { RollbackPreviewTab } from "./RollbackPreviewTab";
+import { RollbackPreviewTab } from './RollbackPreviewTab'
 
 const RollbackPreviewTabQueryParamsSchema = z.object({
-  secretPath: z.string().catch("/")
+  secretPath: z.string().catch('/'),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore',
 )({
   component: RollbackPreviewTab,
   validateSearch: zodValidator(RollbackPreviewTabQueryParamsSchema),
   search: {
-    middlewares: [stripSearchParams({ secretPath: "/" })]
+    middlewares: [stripSearchParams({ secretPath: '/' })],
   },
   beforeLoad: ({ context, params, search }) => {
-    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    const secretPathSegments = search.secretPath.split('/').filter(Boolean)
 
     return {
       breadcrumbs: [
@@ -28,18 +32,20 @@ export const Route = createFileRoute(
         {
           type: BreadcrumbTypes.Dropdown,
           label:
-            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+            context.project.environments.find(
-          dropdownTitle: "Environments",
+              (el) => el.slug === params.environment,
+            )?.name || '',
+          dropdownTitle: 'Environments',
           links: context.project.environments.map((el) => ({
             label: el.name,
             link: linkOptions({
-              to: "/secret-manager/$projectId/secrets/$envSlug",
+              to: '/secret-manager/$projectId/secrets/$envSlug',
               params: {
                 projectId: params.projectId,
-                envSlug: el.slug
+                envSlug: el.slug,
-              }
+              },
-            })
+            }),
-          }))
+          })),
         },
         ...secretPathSegments.map((_, index) => ({
           type: BreadcrumbTypes.Component,
@@ -51,41 +57,41 @@ export const Route = createFileRoute(
               projectId={params.projectId}
               disableCopy
             />
-          )
+          ),
         })),
         {
-          label: "Commits",
+          label: 'Commits',
           link: linkOptions({
-            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            to: '/secret-manager/$projectId/commits/$environment/$folderId',
-            params: {
-              projectId: params.projectId,
-              environment: params.environment,
-              folderId: params.folderId
-            },
-            search: {
-              secretPath: search.secretPath
-            }
-          })
-        },
-        {
-          label: params.commitId,
-          link: linkOptions({
-            to: "/secret-manager/$projectId/commits/$environment/$folderId/$commitId",
             params: {
               projectId: params.projectId,
               environment: params.environment,
               folderId: params.folderId,
-              commitId: params.commitId
             },
             search: {
-              secretPath: search.secretPath
+              secretPath: search.secretPath,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Restore"
+          label: params.commitId,
-        }
+          link: linkOptions({
-      ]
+            to: '/secret-manager/$projectId/commits/$environment/$folderId/$commitId',
-    };
+            params: {
-  }
+              projectId: params.projectId,
-});
+              environment: params.environment,
+              folderId: params.folderId,
+              commitId: params.commitId,
+            },
+            search: {
+              secretPath: search.secretPath,
+            },
+          }),
+        },
+        {
+          label: 'Restore',
+        },
+      ],
+    }
+  },
+})

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

@@ -1,26 +1,30 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { SecretDashboardPathBreadcrumb } from '@app/components/navigation/SecretDashboardPathBreadcrumb'
-import { BreadcrumbTypes } from "@app/components/v2";
+import { BreadcrumbTypes } from '@app/components/v2'
 
-import { CommitDetailsPage } from "./CommitDetailsPage";
+import { CommitDetailsPage } from './CommitDetailsPage'
 
 const CommitDetailsPageQueryParamsSchema = z.object({
-  secretPath: z.string().catch("/")
+  secretPath: z.string().catch('/'),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId/$commitId/',
 )({
   component: CommitDetailsPage,
   validateSearch: zodValidator(CommitDetailsPageQueryParamsSchema),
   search: {
-    middlewares: [stripSearchParams({ secretPath: "/" })]
+    middlewares: [stripSearchParams({ secretPath: '/' })],
   },
   beforeLoad: ({ context, params, search }) => {
-    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    const secretPathSegments = search.secretPath.split('/').filter(Boolean)
 
     return {
       breadcrumbs: [
@@ -28,18 +32,20 @@ export const Route = createFileRoute(
         {
           type: BreadcrumbTypes.Dropdown,
           label:
-            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+            context.project.environments.find(
-          dropdownTitle: "Environments",
+              (el) => el.slug === params.environment,
+            )?.name || '',
+          dropdownTitle: 'Environments',
           links: context.project.environments.map((el) => ({
             label: el.name,
             link: linkOptions({
-              to: "/secret-manager/$projectId/secrets/$envSlug",
+              to: '/secret-manager/$projectId/secrets/$envSlug',
               params: {
                 projectId: params.projectId,
-                envSlug: el.slug
+                envSlug: el.slug,
-              }
+              },
-            })
+            }),
-          }))
+          })),
         },
         ...secretPathSegments.map((_, index) => ({
           type: BreadcrumbTypes.Component,
@@ -51,26 +57,26 @@ export const Route = createFileRoute(
               projectId={params.projectId}
               disableCopy
             />
-          )
+          ),
         })),
         {
-          label: "Commits",
+          label: 'Commits',
           link: linkOptions({
-            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            to: '/secret-manager/$projectId/commits/$environment/$folderId',
             params: {
               projectId: params.projectId,
               environment: params.environment,
-              folderId: params.folderId
+              folderId: params.folderId,
             },
             search: {
-              secretPath: search.secretPath
+              secretPath: search.secretPath,
-            }
+            },
-          })
+          }),
         },
         {
-          label: params.commitId
+          label: params.commitId,
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,27 +1,31 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { SecretDashboardPathBreadcrumb } from '@app/components/navigation/SecretDashboardPathBreadcrumb'
-import { BreadcrumbTypes } from "@app/components/v2";
+import { BreadcrumbTypes } from '@app/components/v2'
 
-import { CommitsPage } from "./CommitsPage";
+import { CommitsPage } from './CommitsPage'
 
 const CommitsPageQueryParamsSchema = z.object({
-  secretPath: z.string().catch("/")
+  secretPath: z.string().catch('/'),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/commits/$environment/$folderId/',
 )({
   component: CommitsPage,
   validateSearch: zodValidator(CommitsPageQueryParamsSchema),
   search: {
-    middlewares: [stripSearchParams({ secretPath: "/" })]
+    middlewares: [stripSearchParams({ secretPath: '/' })],
   },
   beforeLoad: ({ context, params, search }) => {
-    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    const secretPathSegments = search.secretPath.split('/').filter(Boolean)
 
     return {
       breadcrumbs: [
@@ -29,18 +33,20 @@ export const Route = createFileRoute(
         {
           type: BreadcrumbTypes.Dropdown,
           label:
-            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+            context.project.environments.find(
-          dropdownTitle: "Environments",
+              (el) => el.slug === params.environment,
+            )?.name || '',
+          dropdownTitle: 'Environments',
           links: context.project.environments.map((el) => ({
             label: el.name,
             link: linkOptions({
-              to: "/secret-manager/$projectId/secrets/$envSlug",
+              to: '/secret-manager/$projectId/secrets/$envSlug',
               params: {
                 projectId: params.projectId,
-                envSlug: el.slug
+                envSlug: el.slug,
-              }
+              },
-            })
+            }),
-          }))
+          })),
         },
         ...secretPathSegments.map((_, index) => ({
           type: BreadcrumbTypes.Component,
@@ -52,20 +58,20 @@ export const Route = createFileRoute(
               projectId={params.projectId}
               disableCopy
             />
-          )
+          ),
         })),
         {
-          label: "Commits",
+          label: 'Commits',
           link: linkOptions({
-            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            to: '/secret-manager/$projectId/commits/$environment/$folderId',
             params: {
               projectId: params.projectId,
               environment: params.environment,
-              folderId: params.folderId
+              folderId: params.folderId,
-            }
+            },
-          })
+          }),
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { IPAllowListPage } from "./IPAllowlistPage";
+import { IPAllowListPage } from './IPAllowlistPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/allowlist"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/allowlist',
 )({
-  component: () => IPAllowListPage
+  component: () => IPAllowListPage,
-});
+})

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

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { IntegrationDetailsByIDPage } from "./IntegrationsDetailsByIDPage";
+import { IntegrationDetailsByIDPage } from './IntegrationsDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/$integrationId"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/$integrationId',
 )({
   component: IntegrationDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Details"
+          label: 'Details',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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/secret-manager/$projectId/_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/pages/secret-manager/OverviewPage/route.tsx

@@ -1,20 +1,20 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams } 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 { OverviewPage } from "./OverviewPage";
+import { OverviewPage } from './OverviewPage'
 
 const SecretOverviewPageQuerySchema = z.object({
-  search: z.string().catch(""),
+  search: z.string().catch(''),
-  secretPath: z.string().catch("/")
+  secretPath: z.string().catch('/'),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/overview',
 )({
   component: OverviewPage,
   validateSearch: zodValidator(SecretOverviewPageQuerySchema),
   search: {
-    middlewares: [stripSearchParams({ secretPath: "/", search: "" })]
+    middlewares: [stripSearchParams({ secretPath: '/', search: '' })],
-  }
+  },
-});
+})

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

@@ -1,15 +1,15 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } 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 { SecretApprovalsPage } from "./SecretApprovalsPage";
+import { SecretApprovalsPage } from './SecretApprovalsPage'
 
 const SecretApprovalPageQueryParams = z.object({
-  requestId: z.string().catch("")
+  requestId: z.string().catch(''),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/approval"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/approval',
 )({
   component: SecretApprovalsPage,
   validateSearch: zodValidator(SecretApprovalPageQueryParams),
@@ -18,9 +18,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Approvals"
+          label: 'Approvals',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,44 +1,51 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import {
-import { zodValidator } from "@tanstack/zod-adapter";
+  createFileRoute,
-import { z } from "zod";
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { SecretDashboardPathBreadcrumb } from '@app/components/navigation/SecretDashboardPathBreadcrumb'
-import { BreadcrumbTypes } from "@app/components/v2";
+import { BreadcrumbTypes } from '@app/components/v2'
 
-import { SecretDashboardPage } from "./SecretDashboardPage";
+import { SecretDashboardPage } from './SecretDashboardPage'
 
 const SecretDashboardPageQueryParamsSchema = z.object({
-  secretPath: z.string().catch("/"),
+  secretPath: z.string().catch('/'),
-  search: z.string().catch(""),
+  search: z.string().catch(''),
-  tags: z.string().catch("")
+  tags: z.string().catch(''),
-});
+})
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/secrets/$envSlug',
 )({
   component: SecretDashboardPage,
   validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema),
   search: {
-    middlewares: [stripSearchParams({ secretPath: "/", search: "", tags: "" })]
+    middlewares: [stripSearchParams({ secretPath: '/', search: '', tags: '' })],
   },
   beforeLoad: ({ context, params, search }) => {
-    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    const secretPathSegments = search.secretPath.split('/').filter(Boolean)
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
           type: BreadcrumbTypes.Dropdown,
-          label: context.project.environments.find((el) => el.slug === params.envSlug)?.name || "",
+          label:
-          dropdownTitle: "Environments",
+            context.project.environments.find(
+              (el) => el.slug === params.envSlug,
+            )?.name || '',
+          dropdownTitle: 'Environments',
           links: context.project.environments.map((el) => ({
             label: el.name,
             link: linkOptions({
-              to: "/secret-manager/$projectId/secrets/$envSlug",
+              to: '/secret-manager/$projectId/secrets/$envSlug',
               params: {
                 projectId: params.projectId,
-                envSlug: el.slug
+                envSlug: el.slug,
-              }
+              },
-            })
+            }),
-          }))
+          })),
         },
         ...secretPathSegments.map((_, index) => ({
           type: BreadcrumbTypes.Component,
@@ -49,9 +56,9 @@ export const Route = createFileRoute(
               environmentSlug={params.envSlug}
               projectId={params.projectId}
             />
-          )
+          ),
-        }))
+        })),
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,9 +1,9 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { SecretRotationPage } from "./SecretRotationPage";
+import { SecretRotationPage } from './SecretRotationPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secret-rotation"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/secret-rotation',
 )({
   component: SecretRotationPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Secret Rotation"
+          label: 'Secret Rotation',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { SecretSyncDetailsByIDPage } from "./SecretSyncDetailsByIDPage";
+import { SecretSyncDetailsByIDPage } from './SecretSyncDetailsByIDPage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId',
 )({
   component: SecretSyncDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.SecretSyncs
+              selectedTab: IntegrationsListPageTabs.SecretSyncs,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Secret Sync"
+          label: 'Secret Sync',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

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

@@ -1,9 +1,9 @@
-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/secret-manager/$projectId/_secret-manager-layout/settings"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/settings',
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {
@@ -11,9 +11,9 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Settings"
+          label: 'Settings',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AWSParameterStoreAuthorizeIntegrationPage } from "./AwsParameterStoreAuthorizePage";
+import { AWSParameterStoreAuthorizeIntegrationPage } from './AwsParameterStoreAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-parameter-store/authorize',
 )({
   component: AWSParameterStoreAuthorizeIntegrationPage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "AWS Parameter Store"
+          label: 'AWS Parameter Store',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AWSParameterStoreConfigurePage } from "./AwsParamterStoreConfigurePage";
+import { AWSParameterStoreConfigurePage } from './AwsParamterStoreConfigurePage'
 
 const AwsParameterStoreConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-parameter-store/create',
 )({
   component: AWSParameterStoreConfigurePage,
   validateSearch: zodValidator(AwsParameterStoreConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "AWS Parameter Store"
+          label: 'AWS Parameter Store',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AWSSecretManagerAuthorizePage } from "./AwsSecretManagerAuthorizePage";
+import { AWSSecretManagerAuthorizePage } from './AwsSecretManagerAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-secret-manager/authorize',
 )({
   component: AWSSecretManagerAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "AWS Secret Manager"
+          label: 'AWS Secret Manager',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AwsSecretManagerConfigurePage } from "./AwsSecretManagerConfigurePage";
+import { AwsSecretManagerConfigurePage } from './AwsSecretManagerConfigurePage'
 
 const AwsSecretManagerConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/aws-secret-manager/create',
 )({
   component: AwsSecretManagerConfigurePage,
   validateSearch: zodValidator(AwsSecretManagerConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "AWS Secret Manager"
+          label: 'AWS Secret Manager',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureAppConfigurationConfigurePage } from "./AzureAppConfigurationConfigurePage";
+import { AzureAppConfigurationConfigurePage } from './AzureAppConfigurationConfigurePage'
 
 const AzureAppConfigurationPageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-app-configuration/create',
 )({
   component: AzureAppConfigurationConfigurePage,
   validateSearch: zodValidator(AzureAppConfigurationPageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure App Configuration"
+          label: 'Azure App Configuration',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationOauthCallbackPage/route.tsx

@@ -1,39 +1,43 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureAppConfigurationOauthCallbackPage } from "./AzureAppConfigurationOauthCallbackPage";
+import { AzureAppConfigurationOauthCallbackPage } from './AzureAppConfigurationOauthCallbackPage'
 
-export const AzureAppConfigurationOauthCallbackPageQueryParamsSchema = z.object({
+export const AzureAppConfigurationOauthCallbackPageQueryParamsSchema = z.object(
-  state: z.string().catch(""),
+  {
-  code: z.coerce.string().catch("")
+    state: z.string().catch(''),
-});
+    code: z.coerce.string().catch(''),
+  },
+)
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback',
 )({
   component: AzureAppConfigurationOauthCallbackPage,
-  validateSearch: zodValidator(AzureAppConfigurationOauthCallbackPageQueryParamsSchema),
+  validateSearch: zodValidator(
+    AzureAppConfigurationOauthCallbackPageQueryParamsSchema,
+  ),
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure App Configuration"
+          label: 'Azure App Configuration',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureDevopsAuthorizePage } from "./AzureDevopsAuthorizePage";
+import { AzureDevopsAuthorizePage } from './AzureDevopsAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-devops/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-devops/authorize',
 )({
   component: AzureDevopsAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure Devops"
+          label: 'Azure Devops',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureDevopsConfigurePage } from "./AzureDevopsConfigurePage";
+import { AzureDevopsConfigurePage } from './AzureDevopsConfigurePage'
 
 const AzureDevopsConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-devops/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-devops/create',
 )({
   component: AzureDevopsConfigurePage,
   validateSearch: zodValidator(AzureDevopsConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure Devops"
+          label: 'Azure Devops',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
-import z from "zod";
+import z from 'zod'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureKeyVaultAuthorizePage } from "./AzureKeyVaultAuthorizePage";
+import { AzureKeyVaultAuthorizePage } from './AzureKeyVaultAuthorizePage'
 
 const PageQueryParamsSchema = z.object({
   state: z.string(),
-  clientId: z.string().optional()
+  clientId: z.string().optional(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/authorize',
 )({
   component: AzureKeyVaultAuthorizePage,
   validateSearch: PageQueryParamsSchema,
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure Key Vault"
+          label: 'Azure Key Vault',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureKeyVaultConfigurePage } from "./AzureKeyVaultConfigurePage";
+import { AzureKeyVaultConfigurePage } from './AzureKeyVaultConfigurePage'
 
 const AzureKeyVaultConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/create',
 )({
   component: AzureKeyVaultConfigurePage,
   validateSearch: zodValidator(AzureKeyVaultConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure Key Vault"
+          label: 'Azure Key Vault',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/AzureKeyVaultOauthCallbackPage/route.tsx

@@ -1,18 +1,18 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { AzureKeyVaultOauthCallbackPage } from "./AzureKeyVaultOauthCallback";
+import { AzureKeyVaultOauthCallbackPage } from './AzureKeyVaultOauthCallback'
 
 export const AzureKeyVaultOauthCallbackQueryParamsSchema = z.object({
-  state: z.string().catch(""),
+  state: z.string().catch(''),
-  code: z.coerce.string().catch("")
+  code: z.coerce.string().catch(''),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback',
 )({
   component: AzureKeyVaultOauthCallbackPage,
   validateSearch: zodValidator(AzureKeyVaultOauthCallbackQueryParamsSchema),
@@ -21,19 +21,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Azure Key Vault"
+          label: 'Azure Key Vault',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { BitbucketConfigurePage } from "./BitbucketConfigurePage";
+import { BitbucketConfigurePage } from './BitbucketConfigurePage'
 
 const BitbucketConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/bitbucket/create',
 )({
   component: BitbucketConfigurePage,
   validateSearch: zodValidator(BitbucketConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Bitbucket"
+          label: 'Bitbucket',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/BitbucketOauthCallbackPage/route.tsx

@@ -1,18 +1,18 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { BitbucketOauthCallbackPage } from "./BitbucketOauthCallbackPage";
+import { BitbucketOauthCallbackPage } from './BitbucketOauthCallbackPage'
 
 export const BitbucketOauthCallbackQueryParamsSchema = z.object({
-  state: z.string().catch(""),
+  state: z.string().catch(''),
-  code: z.coerce.string().catch("")
+  code: z.coerce.string().catch(''),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/oauth2/callback"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/bitbucket/oauth2/callback',
 )({
   component: BitbucketOauthCallbackPage,
   validateSearch: zodValidator(BitbucketOauthCallbackQueryParamsSchema),
@@ -21,19 +21,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Bitbucket"
+          label: 'Bitbucket',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { ChecklyAuthorizePage } from "./ChecklyAuthorizePage";
+import { ChecklyAuthorizePage } from './ChecklyAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/checkly/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/checkly/authorize',
 )({
   component: ChecklyAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Checkly"
+          label: 'Checkly',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { ChecklyConfigurePage } from "./ChecklyConfigurePage";
+import { ChecklyConfigurePage } from './ChecklyConfigurePage'
 
 const ChecklyConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/checkly/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/checkly/create',
 )({
   component: ChecklyConfigurePage,
   validateSearch: zodValidator(ChecklyConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Checkly"
+          label: 'Checkly',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CircleCIAuthorizePage } from "./CircleCIAuthorizePage";
+import { CircleCIAuthorizePage } from './CircleCIAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/circleci/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/circleci/authorize',
 )({
   component: CircleCIAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Circle CI"
+          label: 'Circle CI',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CircleCIConfigurePage } from "./CircleCIConfigurePage";
+import { CircleCIConfigurePage } from './CircleCIConfigurePage'
 
 const CircleCIConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/circleci/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/circleci/create',
 )({
   component: CircleCIConfigurePage,
   validateSearch: zodValidator(CircleCIConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Circle CI"
+          label: 'Circle CI',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/Cloud66AuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { Cloud66AuthorizePage } from "./Cloud66AuthorizePage";
+import { Cloud66AuthorizePage } from './Cloud66AuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloud-66/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloud-66/authorize',
 )({
   component: Cloud66AuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloud 66"
+          label: 'Cloud 66',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { Cloud66ConfigurePage } from "./Cloud66ConfigurePage";
+import { Cloud66ConfigurePage } from './Cloud66ConfigurePage'
 
 const Cloud66ConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloud-66/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloud-66/create',
 )({
   component: Cloud66ConfigurePage,
   validateSearch: zodValidator(Cloud66ConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloud 66"
+          label: 'Cloud 66',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CloudflarePagesAuthorizePage } from "./CloudflarePagesAuthorizePage";
+import { CloudflarePagesAuthorizePage } from './CloudflarePagesAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-pages/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-pages/authorize',
 )({
   component: CloudflarePagesAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloudflare Pages"
+          label: 'Cloudflare Pages',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CloudflarePagesConfigurePage } from "./CloudflarePagesConfigurePage";
+import { CloudflarePagesConfigurePage } from './CloudflarePagesConfigurePage'
 
 const CloudflarePagesConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-pages/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-pages/create',
 )({
   component: CloudflarePagesConfigurePage,
   validateSearch: zodValidator(CloudflarePagesConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloudflare Pages"
+          label: 'Cloudflare Pages',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CloudflareWorkersAuthorizePage } from "./CloudflareWorkersAuthorizePage";
+import { CloudflareWorkersAuthorizePage } from './CloudflareWorkersAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-workers/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-workers/authorize',
 )({
   component: CloudflareWorkersAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloudflare Workers"
+          label: 'Cloudflare Workers',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CloudflareWorkersConfigurePage } from "./CloudflareWorkersConfigurePage";
+import { CloudflareWorkersConfigurePage } from './CloudflareWorkersConfigurePage'
 
 const CloudflareWorkersConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-workers/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/cloudflare-workers/create',
 )({
   component: CloudflareWorkersConfigurePage,
   validateSearch: zodValidator(CloudflareWorkersConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Cloudflare Workers"
+          label: 'Cloudflare Workers',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CodefreshAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CodefreshAuthorizePage } from "./CodefreshAuthorizePage";
+import { CodefreshAuthorizePage } from './CodefreshAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/codefresh/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/codefresh/authorize',
 )({
   component: CodefreshAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Codefresh"
+          label: 'Codefresh',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { CodefreshConfigurePage } from "./CodefreshConfigurePage";
+import { CodefreshConfigurePage } from './CodefreshConfigurePage'
 
 const CodefreshConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/codefresh/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/codefresh/create',
 )({
   component: CodefreshConfigurePage,
   validateSearch: zodValidator(CodefreshConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Codefresh"
+          label: 'Codefresh',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { DatabricksAuthorizePage } from "./DatabricksAuthorizePage";
+import { DatabricksAuthorizePage } from './DatabricksAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/databricks/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/databricks/authorize',
 )({
   component: DatabricksAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Databricks"
+          label: 'Databricks',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { DatabricksConfigurePage } from "./DatabricksConfigurePage";
+import { DatabricksConfigurePage } from './DatabricksConfigurePage'
 
 const DatabricksConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/databricks/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/databricks/create',
 )({
   component: DatabricksConfigurePage,
   validateSearch: zodValidator(DatabricksConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Databricks"
+          label: 'Databricks',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { DigitalOceanAppPlatformAuthorizePage } from "./DigitalOceanAppPlatformAuthorizePage";
+import { DigitalOceanAppPlatformAuthorizePage } from './DigitalOceanAppPlatformAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/digital-ocean-app-platform/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/digital-ocean-app-platform/authorize',
 )({
   component: DigitalOceanAppPlatformAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "DigitalOcean App Platform"
+          label: 'DigitalOcean App Platform',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/route.tsx

@@ -1,38 +1,40 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { DigitalOceanAppPlatformConfigurePage } from "./DigitalOceanAppPlatformConfigurePage";
+import { DigitalOceanAppPlatformConfigurePage } from './DigitalOceanAppPlatformConfigurePage'
 
 const DigitalOceanAppPlatformConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/digital-ocean-app-platform/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/digital-ocean-app-platform/create',
 )({
   component: DigitalOceanAppPlatformConfigurePage,
-  validateSearch: zodValidator(DigitalOceanAppPlatformConfigurePageQueryParamsSchema),
+  validateSearch: zodValidator(
+    DigitalOceanAppPlatformConfigurePageQueryParamsSchema,
+  ),
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "DigitalOcean App Platform"
+          label: 'DigitalOcean App Platform',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { FlyioAuthorizePage } from "./FlyioAuthorizePage";
+import { FlyioAuthorizePage } from './FlyioAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/flyio/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/flyio/authorize',
 )({
   component: FlyioAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Fly IO"
+          label: 'Fly IO',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { FlyioConfigurePage } from "./FlyioConfigurePage";
+import { FlyioConfigurePage } from './FlyioConfigurePage'
 
 const FlyioConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/flyio/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/flyio/create',
 )({
   component: FlyioConfigurePage,
   validateSearch: zodValidator(FlyioConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "Fly IO"
+          label: 'Fly IO',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/route.tsx

@@ -1,11 +1,11 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from '@tanstack/react-router'
 
-import { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { GcpSecretManagerAuthorizePage } from "./GcpSecretManagerAuthorizePage";
+import { GcpSecretManagerAuthorizePage } from './GcpSecretManagerAuthorizePage'
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/authorize"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gcp-secret-manager/authorize',
 )({
   component: GcpSecretManagerAuthorizePage,
   beforeLoad: ({ context, params }) => {
@@ -13,19 +13,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "GCP Secret Manager"
+          label: 'GCP Secret Manager',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/route.tsx

@@ -1,17 +1,17 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { GcpSecretManagerConfigurePage } from "./GcpSecretManagerConfigurePage";
+import { GcpSecretManagerConfigurePage } from './GcpSecretManagerConfigurePage'
 
 const GcpConfigurePageQueryParamsSchema = z.object({
-  integrationAuthId: z.string()
+  integrationAuthId: z.string(),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/create"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gcp-secret-manager/create',
 )({
   component: GcpSecretManagerConfigurePage,
   validateSearch: zodValidator(GcpConfigurePageQueryParamsSchema),
@@ -20,19 +20,19 @@ export const Route = createFileRoute(
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "GCP Secret Manager"
+          label: 'GCP Secret Manager',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})

frontend/src/pages/secret-manager/integrations/GcpSecretManagerOauthCallbackPage/route.tsx

@@ -1,39 +1,41 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } 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 { IntegrationsListPageTabs } from "@app/types/integrations";
+import { IntegrationsListPageTabs } from '@app/types/integrations'
 
-import { GcpSecretManagerOauthCallbackPage } from "./GcpSecretManagerOauthCallbackPage";
+import { GcpSecretManagerOauthCallbackPage } from './GcpSecretManagerOauthCallbackPage'
 
 export const GcpSecretManagerOAuthCallbackPageQueryParamsSchema = z.object({
-  state: z.string().catch(""),
+  state: z.string().catch(''),
-  code: z.coerce.string().catch("")
+  code: z.coerce.string().catch(''),
-});
+})
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/oauth2/callback"
+  '/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/secret-manager/_secret-manager-layout/integrations/gcp-secret-manager/oauth2/callback',
 )({
   component: GcpSecretManagerOauthCallbackPage,
-  validateSearch: zodValidator(GcpSecretManagerOAuthCallbackPageQueryParamsSchema),
+  validateSearch: zodValidator(
+    GcpSecretManagerOAuthCallbackPageQueryParamsSchema,
+  ),
   beforeLoad: ({ context, params }) => {
     return {
       breadcrumbs: [
         ...context.breadcrumbs,
         {
-          label: "Integrations",
+          label: 'Integrations',
           link: linkOptions({
-            to: "/secret-manager/$projectId/integrations",
+            to: '/secret-manager/$projectId/integrations',
             params,
             search: {
-              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations,
-            }
+            },
-          })
+          }),
         },
         {
-          label: "GCP Secret Manager"
+          label: 'GCP Secret Manager',
-        }
+        },
-      ]
+      ],
-    };
+    }
-  }
+  },
-});
+})