chore: resolve merge conflicts

frontend/src/pages/organization/SettingsPage/SettingsPage.tsx

@@ -1,6 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
+import { PageHeader } from "@app/components/v2";
+
 import { OrgTabGroup } from "./components";
 
 export const SettingsPage = () => {
@@ -11,11 +13,9 @@ export const SettingsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
-        <div className="w-full max-w-7xl px-6">
-          <div className="mb-4">
-            <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-          </div>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title={t("settings.org.title")} />
           <OrgTabGroup />
         </div>
       </div>

frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm.tsx

@@ -103,7 +103,7 @@ export const AuditLogStreamForm = ({ id = "", onClose }: Props) => {
       console.log(err);
       createNotification({
         type: "error",
-        text: "Failed to create stream"
+        text: (err as Error)?.message ?? "Failed to create stream"
       });
     }
   };

frontend/src/pages/organization/SettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -103,7 +103,13 @@ export const OrgNameChangeSection = (): JSX.Element => {
           name="name"
         />
       </div>
-      <div className="py-4">
+      <div>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization ID</h2>
+        <FormControl className="max-w-md">
+          <Input isDisabled value={currentOrg.id} />
+        </FormControl>
+      </div>
+      <div>
         <h2 className="text-md mb-2 text-mineshaft-100">Organization Slug</h2>
         <Controller
           defaultValue=""

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

@@ -1,4 +1,6 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -9,11 +11,23 @@ const SettingsPageQueryParams = z.object({
 });
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/organization/settings"
 )({
   component: SettingsPage,
   validateSearch: zodValidator(SettingsPageQueryParams),
   search: {
     middlewares: [stripSearchParams({ selectedTab: "" })]
-  }
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
 });