feat: finished breadcrumbs for all project types except secret manager

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

@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
@@ -38,11 +38,11 @@ const Page = withProjectPermission(
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
-          <p className="mb-4 mr-4 text-3xl font-semibold text-white">
-            {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
-            Control
-          </p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Access Control"
+            description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
+          />
           <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>

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

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,21 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/access-management"
 )({
   component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });

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

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,21 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/access-management"
 )({
   component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });

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

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,21 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/access-management"
 )({
   component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });

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

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,21 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/access-management"
 )({
   component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });