feat: completed org breadcrumbs

frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx

@@ -1,7 +1,5 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
@@ -15,6 +13,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  PageHeader,
   Spinner,
   Tooltip
 } from "@app/components/v2";
@@ -83,34 +82,17 @@ const Page = () => {
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
-        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
-          <Button
-            variant="link"
-            type="submit"
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            onClick={() => {
-              navigate({
-                to: "/organization/access-management" as const,
-                search: {
-                  selectedTab: TabSections.Groups
-                }
-              });
-            }}
-            className="mb-4"
-          >
-            Groups
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.group.name}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.group.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                   <Tooltip content="More options">
-                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    <Button variant="outline_bg">More</Button>
                   </Tooltip>
                 </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuContent align="end" className="p-1">
                 <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
                   {(isAllowed) => (
                     <DropdownMenuItem
@@ -153,7 +135,7 @@ const Page = () => {
                 </OrgPermissionCan>
               </DropdownMenuContent>
             </DropdownMenu>
-          </div>
+          </PageHeader>
           <div className="flex">
             <div className="mr-4 w-96">
               <GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />

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

@@ -1,9 +1,24 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/organization/_layout/groups/$groupId"
 )({
-  component: GroupDetailsByIDPage
+  component: GroupDetailsByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "home",
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "groups"
+      }
+    ]
+  })
 });