feat: added project layout and project select in breadcrumb

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

@@ -1,38 +1,44 @@
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
-import { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import {
+  createFileRoute,
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
-  requesterEmail: z.string().catch("")
-});
+  selectedTab: z
+    .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 { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import {
+  createFileRoute,
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
-  requesterEmail: z.string().catch("")
-});
+  selectedTab: z
+    .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 { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import {
+  createFileRoute,
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
-  requesterEmail: z.string().catch("")
-});
+  selectedTab: z
+    .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 { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import {
+  createFileRoute,
+  linkOptions,
+  stripSearchParams,
+} from '@tanstack/react-router'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { z } from 'zod'
 
-import { ProjectAccessControlTabs } from "@app/types/project";
+import { ProjectAccessControlTabs } from '@app/types/project'
 
-import { AccessControlPage } from "./AccessControlPage";
+import { AccessControlPage } from './AccessControlPage'
 
 const AccessControlPageQuerySchema = z.object({
-  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
-  requesterEmail: z.string().catch("")
-});
+  selectedTab: z
+    .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 { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
+import { createFileRoute, linkOptions } 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
+    .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
+        }
+      ]
+    };
+  }
+});