fix: refactored admin panel layout

frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { AuthenticationPageForm } from "./components";
+
+export const AuthenticationPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Authentication"
+            description="Manage authentication settings for your Infisical instance."
+          />
+          <AuthenticationPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx

@@ -20,7 +20,7 @@ const formSchema = z.object({
 
 type TAuthForm = z.infer<typeof formSchema>;
 
-export const AuthPanel = () => {
+export const AuthenticationPageForm = () => {
   const { config } = useServerConfig();
   const { enabledLoginMethods } = config;
   const { mutateAsync: updateServerConfig } = useUpdateServerConfig();

frontend/src/pages/admin/AuthenticationPage/components/index.ts

@@ -0,0 +1 @@
+export { AuthenticationPageForm } from "./AuthenticationPageForm";

frontend/src/pages/admin/AuthenticationPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { AuthenticationPage } from "./AuthenticationPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/authentication"
+)({
+  component: AuthenticationPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Authentication",
+          link: linkOptions({
+            to: "/admin/authentication"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/CachingPage/CachingPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { CachingPageForm } from "./components";
+
+export const CachingPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Caching"
+            description="Manage caching settings for your Infisical instance."
+          />
+          <CachingPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx

@@ -10,7 +10,7 @@ import { useInvalidateCache } from "@app/hooks/api";
 import { useGetInvalidatingCacheStatus } from "@app/hooks/api/admin/queries";
 import { CacheType } from "@app/hooks/api/admin/types";
 
-export const CachingPanel = () => {
+export const CachingPageForm = () => {
   const { mutateAsync: invalidateCache } = useInvalidateCache();
   const { user } = useUser();
 

frontend/src/pages/admin/CachingPage/components/index.ts

@@ -0,0 +1 @@
+export { CachingPageForm } from "./CachingPageForm";

frontend/src/pages/admin/CachingPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { CachingPage } from "./CachingPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/caching"
+)({
+  component: CachingPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Caching",
+          link: linkOptions({
+            to: "/admin/caching"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { EncryptionPageForm } from "./components";
+
+export const EncryptionPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Encryption"
+            description="Manage encryption settings for your Infisical instance."
+          />
+          <EncryptionPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx

@@ -8,11 +8,11 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Select, SelectItem } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useUpdateServerEncryptionStrategy } from "@app/hooks/api";
 import {
-  RootKeyEncryptionStrategy,
-  TGetServerRootKmsEncryptionDetails
-} from "@app/hooks/api/admin/types";
+  useGetServerRootKmsEncryptionDetails,
+  useUpdateServerEncryptionStrategy
+} from "@app/hooks/api";
+import { RootKeyEncryptionStrategy } from "@app/hooks/api/admin/types";
 
 const formSchema = z.object({
   encryptionStrategy: z.nativeEnum(RootKeyEncryptionStrategy)
@@ -25,11 +25,9 @@ const strategies: Record<RootKeyEncryptionStrategy, string> = {
 
 type TForm = z.infer<typeof formSchema>;
 
-type Props = {
-  rootKmsDetails?: TGetServerRootKmsEncryptionDetails;
-};
+export const EncryptionPageForm = () => {
+  const { data: rootKmsDetails } = useGetServerRootKmsEncryptionDetails();
 
-export const EncryptionPanel = ({ rootKmsDetails }: Props) => {
   const { mutateAsync: updateEncryptionStrategy } = useUpdateServerEncryptionStrategy();
   const { subscription } = useSubscription();
 

frontend/src/pages/admin/EncryptionPage/components/index.ts

@@ -0,0 +1 @@
+export { EncryptionPageForm } from "./EncryptionPageForm";

frontend/src/pages/admin/EncryptionPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { EncryptionPage } from "./EncryptionPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/encryption"
+)({
+  component: EncryptionPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Encryption",
+          link: linkOptions({
+            to: "/admin/encryption"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/GeneralPage/GeneralPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { GeneralPageForm } from "./components";
+
+export const GeneralPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="General"
+            description="Manage general settings for your Infisical instance."
+          />
+          <GeneralPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx

@@ -0,0 +1,309 @@
+import { Controller, useForm } from "react-hook-form";
+import { faAt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Select,
+  SelectClear,
+  SelectItem,
+  Switch,
+  TextArea
+} from "@app/components/v2";
+import { useServerConfig } from "@app/context";
+import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";
+
+enum SignUpModes {
+  Disabled = "disabled",
+  Anyone = "anyone"
+}
+
+const formSchema = z.object({
+  signUpMode: z.nativeEnum(SignUpModes),
+  allowedSignUpDomain: z.string().optional().nullable(),
+  trustSamlEmails: z.boolean(),
+  trustLdapEmails: z.boolean(),
+  trustOidcEmails: z.boolean(),
+  defaultAuthOrgId: z.string(),
+  authConsentContent: z.string().optional().default(""),
+  pageFrameContent: z.string().optional().default("")
+});
+
+type TDashboardForm = z.infer<typeof formSchema>;
+
+export const GeneralPageForm = () => {
+  const data = useServerConfig();
+  const { config } = data;
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TDashboardForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      // eslint-disable-next-line
+      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
+      allowedSignUpDomain: config.allowedSignUpDomain,
+      trustSamlEmails: config.trustSamlEmails,
+      trustLdapEmails: config.trustLdapEmails,
+      trustOidcEmails: config.trustOidcEmails,
+      defaultAuthOrgId: config.defaultAuthOrgId ?? "",
+      authConsentContent: config.authConsentContent ?? "",
+      pageFrameContent: config.pageFrameContent ?? ""
+    }
+  });
+
+  const signUpMode = watch("signUpMode");
+  const defaultAuthOrgId = watch("defaultAuthOrgId");
+
+  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
+
+  const organizations = useGetOrganizations();
+
+  const onFormSubmit = async (formData: TDashboardForm) => {
+    try {
+      const {
+        allowedSignUpDomain,
+        trustSamlEmails,
+        trustLdapEmails,
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
+      } = formData;
+
+      await updateServerConfig({
+        defaultAuthOrgId: defaultAuthOrgId || null,
+        allowSignUp: signUpMode !== SignUpModes.Disabled,
+        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
+        trustSamlEmails,
+        trustLdapEmails,
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
+      });
+      createNotification({
+        text: "Successfully changed sign up setting.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to update sign up setting."
+      });
+    }
+  };
+
+  return (
+    <form
+      className="space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Allow user signups</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select if you want users to be able to signup freely into your Infisical instance.
+        </div>
+        <Controller
+          control={control}
+          name="signUpMode"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                className="w-full bg-mineshaft-700"
+                dropdownContainerClassName="bg-mineshaft-800"
+                defaultValue={field.value}
+                onValueChange={(e) => onChange(e)}
+                {...field}
+              >
+                <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
+                <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
+              </Select>
+            </FormControl>
+          )}
+        />
+      </div>
+      {signUpMode === "anyone" && (
+        <div className="flex flex-col justify-start">
+          <div className="mb-4 text-xl font-semibold text-mineshaft-100">
+            Restrict signup by email domain(s)
+          </div>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedSignUpDomain"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Leave blank to allow any email domains"
+                className="w-72"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input
+                  {...field}
+                  value={field.value || ""}
+                  placeholder="gmail.com, aws.com, redhat.com"
+                  leftIcon={<FontAwesomeIcon icon={faAt} />}
+                />
+              </FormControl>
+            )}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Default organization</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select the default organization you want to set for SAML/LDAP/OIDC/Github logins. When
+          selected, user logins will be automatically scoped to the selected organization.
+        </div>
+        <Controller
+          control={control}
+          name="defaultAuthOrgId"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                placeholder="Allow all organizations"
+                className="w-full bg-mineshaft-700"
+                dropdownContainerClassName="bg-mineshaft-800"
+                defaultValue={field.value ?? " "}
+                onValueChange={(e) => onChange(e)}
+                {...field}
+              >
+                <SelectClear
+                  selectValue={defaultAuthOrgId}
+                  onClear={() => {
+                    onChange("");
+                  }}
+                >
+                  Allow all organizations
+                </SelectClear>
+                {organizations.data?.map((org) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    {org.name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Trust emails</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select if you want Infisical to trust external emails from SAML/LDAP/OIDC identity
+          providers. If set to false, then Infisical will prompt SAML/LDAP/OIDC provisioned users to
+          verify their email upon their first login.
+        </div>
+        <Controller
+          control={control}
+          name="trustSamlEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-saml-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust SAML emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+        <Controller
+          control={control}
+          name="trustLdapEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-ldap-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust LDAP emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+        <Controller
+          control={control}
+          name="trustOidcEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-oidc-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust OIDC emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Notices</div>
+        <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
+          Configure system-wide notification banners and security messages. These settings control
+          the text displayed to users during authentication and throughout their session
+        </div>
+        <Controller
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Auth Consent Content"
+              tooltipText="Formatting supported: HTML, Markdown, Plain text"
+            >
+              <TextArea
+                placeholder="**Auth Consent Message**"
+                {...field}
+                rows={3}
+                className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="authConsentContent"
+        />
+        <Controller
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Page Frame Content"
+              tooltipText="Formatting supported: HTML, Markdown, Plain text"
+            >
+              <TextArea
+                placeholder='<div style="background-color: red">TOP SECRET</div>'
+                {...field}
+                rows={3}
+                className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="pageFrameContent"
+        />
+      </div>
+      <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting || !isDirty}>
+        Save
+      </Button>
+    </form>
+  );
+};

frontend/src/pages/admin/GeneralPage/components/index.ts

@@ -0,0 +1 @@
+export { GeneralPageForm } from "./GeneralPageForm";

frontend/src/pages/admin/GeneralPage/route.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GeneralPage } from "./GeneralPage";
+
+export const Route = createFileRoute("/_authenticate/_inject-org-details/admin/_admin-layout/")({
+  component: GeneralPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "General",
+          link: linkOptions({
+            to: "/admin"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { IntegrationsPageForm } from "./components";
+
+export const IntegrationsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Integrations"
+            description="Manage integrations for your Infisical instance."
+          />
+          <IntegrationsPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx

@@ -3,7 +3,7 @@ import { useGetAdminIntegrationsConfig } from "@app/hooks/api";
 import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
 import { SlackIntegrationForm } from "./SlackIntegrationForm";
 
-export const IntegrationPanel = () => {
+export const IntegrationsPageForm = () => {
   const { data: adminIntegrationsConfig } = useGetAdminIntegrationsConfig();
 
   return (

frontend/src/pages/admin/IntegrationsPage/components/index.ts

@@ -0,0 +1 @@
+export { IntegrationsPageForm } from "./IntegrationsPageForm";

frontend/src/pages/admin/IntegrationsPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { IntegrationsPage } from "./IntegrationsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/integrations"
+)({
+  component: IntegrationsPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/admin/integrations"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/MachineIdentitiesResourcesPage/MachineIdentitiesResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { MachineIdentitiesTable } from "./components";
+
+export const MachineIdentitiesResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Machine Identities"
+            description="Manage all machine identities within your Infisical instance."
+          />
+          <MachineIdentitiesTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/MachineIdentitiesResourcesPage/components/MachineIdentitiesTable.tsx

@@ -133,7 +133,7 @@ const IdentityPanelTable = ({
   );
 };
 
-export const IdentityPanel = () => {
+export const MachineIdentitiesTable = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeServerAdmin"
   ] as const);
@@ -161,9 +161,6 @@ export const IdentityPanel = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4">
-        <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-      </div>
       <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.removeServerAdmin.isOpen}

frontend/src/pages/admin/MachineIdentitiesResourcesPage/components/index.tsx

@@ -0,0 +1 @@
+export { MachineIdentitiesTable } from "./MachineIdentitiesTable";

frontend/src/pages/admin/MachineIdentitiesResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { MachineIdentitiesResourcesPage } from "./MachineIdentitiesResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/machine-identities"
+)({
+  component: MachineIdentitiesResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Machine Identities",
+          link: linkOptions({
+            to: "/admin/resources/machine-identities"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/OrganizationResourcesPage/OrganizationResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { OrganizationsTable } from "./components";
+
+export const OrganizationResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="Organizations"
+            description="Manage all organizations within your Infisical instance."
+          />
+          <OrganizationsTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/OrganizationResourcesPage/components/OrganizationsTable.tsx

@@ -294,7 +294,7 @@ const OrganizationsPanelTable = ({
   );
 };
 
-export const OrganizationsPanel = () => {
+export const OrganizationsTable = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "deleteOrganization",
     "deleteOrganizationMembership",
@@ -357,9 +357,6 @@ export const OrganizationsPanel = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4">
-        <p className="text-xl font-semibold text-mineshaft-100">Organizations</p>
-      </div>
       <OrganizationsPanelTable
         popUp={popUp}
         handlePopUpOpen={handlePopUpOpen}

frontend/src/pages/admin/OrganizationResourcesPage/components/index.tsx

@@ -0,0 +1 @@
+export { OrganizationsTable } from "./OrganizationsTable";

frontend/src/pages/admin/OrganizationResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { OrganizationResourcesPage } from "./OrganizationResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/organizations"
+)({
+  component: OrganizationResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Organizations",
+          link: linkOptions({
+            to: "/admin/resources/organizations"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -1,433 +0,0 @@
-import { Helmet } from "react-helmet";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { faAt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  ContentLoader,
-  FormControl,
-  Input,
-  Select,
-  SelectClear,
-  SelectItem,
-  Switch,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  TextArea
-} from "@app/components/v2";
-import { useServerConfig, useUser } from "@app/context";
-import {
-  useGetOrganizations,
-  useGetServerRootKmsEncryptionDetails,
-  useUpdateServerConfig
-} from "@app/hooks/api";
-import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
-
-import { AuthPanel } from "./components/AuthPanel";
-import { CachingPanel } from "./components/CachingPanel";
-import { EncryptionPanel } from "./components/EncryptionPanel";
-import { IntegrationPanel } from "./components/IntegrationPanel";
-import { OrganizationsPanel } from "./components/OrganizationsPanel";
-import { UserPanel } from "./components/UserPanel";
-
-enum TabSections {
-  Settings = "settings",
-  Encryption = "encryption",
-  Auth = "auth",
-  Integrations = "integrations",
-  Users = "users",
-  Organizations = "organizations",
-  Identities = "identities",
-  Kmip = "kmip",
-  Caching = "caching"
-}
-
-enum SignUpModes {
-  Disabled = "disabled",
-  Anyone = "anyone"
-}
-
-const formSchema = z.object({
-  signUpMode: z.nativeEnum(SignUpModes),
-  allowedSignUpDomain: z.string().optional().nullable(),
-  trustSamlEmails: z.boolean(),
-  trustLdapEmails: z.boolean(),
-  trustOidcEmails: z.boolean(),
-  defaultAuthOrgId: z.string(),
-  authConsentContent: z.string().optional().default(""),
-  pageFrameContent: z.string().optional().default("")
-});
-
-type TDashboardForm = z.infer<typeof formSchema>;
-
-export const OverviewPage = () => {
-  const { t } = useTranslation();
-  const data = useServerConfig();
-  const { data: serverRootKmsDetails } = useGetServerRootKmsEncryptionDetails();
-  const { config } = data;
-
-  const {
-    control,
-    handleSubmit,
-    watch,
-    formState: { isSubmitting, isDirty }
-  } = useForm<TDashboardForm>({
-    resolver: zodResolver(formSchema),
-    values: {
-      // eslint-disable-next-line
-      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
-      allowedSignUpDomain: config.allowedSignUpDomain,
-      trustSamlEmails: config.trustSamlEmails,
-      trustLdapEmails: config.trustLdapEmails,
-      trustOidcEmails: config.trustOidcEmails,
-      defaultAuthOrgId: config.defaultAuthOrgId ?? "",
-      authConsentContent: config.authConsentContent ?? "",
-      pageFrameContent: config.pageFrameContent ?? ""
-    }
-  });
-
-  const signUpMode = watch("signUpMode");
-  const defaultAuthOrgId = watch("defaultAuthOrgId");
-
-  const { user } = useUser();
-  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
-
-  const organizations = useGetOrganizations();
-
-  const isNotAllowed = !user?.superAdmin;
-  const onFormSubmit = async (formData: TDashboardForm) => {
-    try {
-      const {
-        allowedSignUpDomain,
-        trustSamlEmails,
-        trustLdapEmails,
-        trustOidcEmails,
-        authConsentContent,
-        pageFrameContent
-      } = formData;
-
-      await updateServerConfig({
-        defaultAuthOrgId: defaultAuthOrgId || null,
-        allowSignUp: signUpMode !== SignUpModes.Disabled,
-        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
-        trustSamlEmails,
-        trustLdapEmails,
-        trustOidcEmails,
-        authConsentContent,
-        pageFrameContent
-      });
-      createNotification({
-        text: "Successfully changed sign up setting.",
-        type: "success"
-      });
-    } catch (e) {
-      console.error(e);
-      createNotification({
-        type: "error",
-        text: "Failed to update sign up setting."
-      });
-    }
-  };
-
-  return (
-    <>
-      <Helmet>
-        <title>{t("common.head-title", { title: t("admin.dashboard") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("admin.dashboard.og-title") ?? ""} />
-        <meta name="og:description" content={t("admin.dashboard.og-description") ?? ""} />
-      </Helmet>
-      <div className="h-full">
-        <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
-          <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
-            <div className="mb-8 flex flex-col items-start justify-between text-xl">
-              <h1 className="text-3xl font-semibold">Server Admin Console</h1>
-              <p className="text-base text-bunker-300">
-                Manage your instance level configurations.
-              </p>
-            </div>
-          </div>
-          {isNotAllowed ? (
-            <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
-          ) : (
-            <div>
-              <Tabs defaultValue={TabSections.Settings} className="w-full">
-                <TabList className="flex w-full flex-row justify-between">
-                  <div className="flex w-full">
-                    <Tab value={TabSections.Settings}>General</Tab>
-                    <Tab value={TabSections.Encryption}>Encryption</Tab>
-                    <Tab value={TabSections.Auth}>Authentication</Tab>
-                    <Tab value={TabSections.Integrations}>Integrations</Tab>
-                    <Tab value={TabSections.Caching}>Caching</Tab>
-                  </div>
-
-                  <div className="flex w-full justify-end">
-                    <Tab value={TabSections.Organizations}>Organizations</Tab>
-                    <Tab value={TabSections.Users}>User Identities</Tab>
-                    <Tab value={TabSections.Identities}>Machine Identities</Tab>
-                  </div>
-                </TabList>
-                <TabPanel value={TabSections.Settings}>
-                  <form
-                    className="mb-6 space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-                    onSubmit={handleSubmit(onFormSubmit)}
-                  >
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Allow user signups
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select if you want users to be able to signup freely into your Infisical
-                        instance.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="signUpMode"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                          <FormControl
-                            className="max-w-sm"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                          >
-                            <Select
-                              className="w-full bg-mineshaft-700"
-                              dropdownContainerClassName="bg-mineshaft-800"
-                              defaultValue={field.value}
-                              onValueChange={(e) => onChange(e)}
-                              {...field}
-                            >
-                              <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
-                              <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
-                            </Select>
-                          </FormControl>
-                        )}
-                      />
-                    </div>
-                    {signUpMode === "anyone" && (
-                      <div className="flex flex-col justify-start">
-                        <div className="mb-4 text-xl font-semibold text-mineshaft-100">
-                          Restrict signup by email domain(s)
-                        </div>
-                        <Controller
-                          control={control}
-                          defaultValue=""
-                          name="allowedSignUpDomain"
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              label="Leave blank to allow any email domains"
-                              className="w-72"
-                              isError={Boolean(error)}
-                              errorText={error?.message}
-                            >
-                              <Input
-                                {...field}
-                                value={field.value || ""}
-                                placeholder="gmail.com, aws.com, redhat.com"
-                                leftIcon={<FontAwesomeIcon icon={faAt} />}
-                              />
-                            </FormControl>
-                          )}
-                        />
-                      </div>
-                    )}
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Default organization
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select the default organization you want to set for SAML/LDAP/OIDC/Github
-                        logins. When selected, user logins will be automatically scoped to the
-                        selected organization.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="defaultAuthOrgId"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                          <FormControl
-                            className="max-w-sm"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                          >
-                            <Select
-                              placeholder="Allow all organizations"
-                              className="w-full bg-mineshaft-700"
-                              dropdownContainerClassName="bg-mineshaft-800"
-                              defaultValue={field.value ?? " "}
-                              onValueChange={(e) => onChange(e)}
-                              {...field}
-                            >
-                              <SelectClear
-                                selectValue={defaultAuthOrgId}
-                                onClear={() => {
-                                  onChange("");
-                                }}
-                              >
-                                Allow all organizations
-                              </SelectClear>
-                              {organizations.data?.map((org) => (
-                                <SelectItem key={org.id} value={org.id}>
-                                  {org.name}
-                                </SelectItem>
-                              ))}
-                            </Select>
-                          </FormControl>
-                        )}
-                      />
-                    </div>
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Trust emails
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select if you want Infisical to trust external emails from SAML/LDAP/OIDC
-                        identity providers. If set to false, then Infisical will prompt
-                        SAML/LDAP/OIDC provisioned users to verify their email upon their first
-                        login.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="trustSamlEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-saml-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust SAML emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                      <Controller
-                        control={control}
-                        name="trustLdapEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-ldap-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust LDAP emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                      <Controller
-                        control={control}
-                        name="trustOidcEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-oidc-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust OIDC emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                    </div>
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">Notices</div>
-                      <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
-                        Configure system-wide notification banners and security messages. These
-                        settings control the text displayed to users during authentication and
-                        throughout their session
-                      </div>
-                      <Controller
-                        render={({ field, fieldState: { error } }) => (
-                          <FormControl
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            label="Auth Consent Content"
-                            tooltipText="Formatting supported: HTML, Markdown, Plain text"
-                          >
-                            <TextArea
-                              placeholder="**Auth Consent Message**"
-                              {...field}
-                              rows={3}
-                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
-                            />
-                          </FormControl>
-                        )}
-                        control={control}
-                        name="authConsentContent"
-                      />
-                      <Controller
-                        render={({ field, fieldState: { error } }) => (
-                          <FormControl
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            label="Page Frame Content"
-                            tooltipText="Formatting supported: HTML, Markdown, Plain text"
-                          >
-                            <TextArea
-                              placeholder='<div style="background-color: red">TOP SECRET</div>'
-                              {...field}
-                              rows={3}
-                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
-                            />
-                          </FormControl>
-                        )}
-                        control={control}
-                        name="pageFrameContent"
-                      />
-                    </div>
-                    <Button
-                      type="submit"
-                      isLoading={isSubmitting}
-                      isDisabled={isSubmitting || !isDirty}
-                    >
-                      Save
-                    </Button>
-                  </form>
-                </TabPanel>
-                <TabPanel value={TabSections.Encryption}>
-                  <EncryptionPanel rootKmsDetails={serverRootKmsDetails} />
-                </TabPanel>
-                <TabPanel value={TabSections.Auth}>
-                  <AuthPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Integrations}>
-                  <IntegrationPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Organizations}>
-                  <OrganizationsPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Users}>
-                  <UserPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Identities}>
-                  <IdentityPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Caching}>
-                  <CachingPanel />
-                </TabPanel>
-              </Tabs>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,7 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import { OverviewPage } from "./OverviewPage";
-
-export const Route = createFileRoute("/_authenticate/_inject-org-details/admin/_admin-layout/")({
-  component: OverviewPage
-});

frontend/src/pages/admin/UserIdentitiesResourcesPage/UserIdentitiesResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { UserIdentitiesTable } from "./components";
+
+export const UserIdentitiesResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <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">
+          <PageHeader
+            title="User Identities"
+            description="Manage all user identities within your Infisical instance."
+          />
+          <UserIdentitiesTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/UserIdentitiesResourcesPage/components/UserIdentitiesTable.tsx

@@ -226,7 +226,7 @@ const UserPanelTable = ({
   );
 };
 
-export const UserPanel = () => {
+export const UserIdentitiesTable = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeUser",
     "upgradePlan",
@@ -297,9 +297,6 @@ export const UserPanel = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4">
-        <p className="text-xl font-semibold text-mineshaft-100">Users</p>
-      </div>
       <UserPanelTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.removeUser.isOpen}

frontend/src/pages/admin/UserIdentitiesResourcesPage/components/index.tsx

@@ -0,0 +1 @@
+export { UserIdentitiesTable } from "./UserIdentitiesTable";

frontend/src/pages/admin/UserIdentitiesResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { UserIdentitiesResourcesPage } from "./UserIdentitiesResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/user-identities"
+)({
+  component: UserIdentitiesResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "User Identities",
+          link: linkOptions({
+            to: "/admin/resources/user-identities"
+          })
+        }
+      ]
+    };
+  }
+});

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

@@ -18,7 +18,7 @@ export const OverviewPage = () => {
       <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">
           <PageHeader
-            title="OverviewPage"
+            title="Overview Page"
             description="Manage keys and perform cryptographic operations."
           />
           <ProjectPermissionCan