Merge branch 'heads/main' into daniel/fips-initative

frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { EnvironmentPageForm } from "./components";
+
+export const EnvironmentPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="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="Environment Variables"
+            description="Manage the environment variables for your Infisical instance."
+          />
+          <EnvironmentPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Control, Controller, useForm, useWatch } from "react-hook-form";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faChevronRight,
+  faExclamationTriangle,
+  faMagnifyingGlass
+} 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, SecretInput, Tooltip } from "@app/components/v2";
+import { HighlightText } from "@app/components/v2/HighlightText";
+import { useGetEnvOverrides, useUpdateServerConfig } from "@app/hooks/api";
+
+type TForm = Record<string, string>;
+
+export const GroupContainer = ({
+  group,
+  control,
+  search
+}: {
+  group: {
+    fields: {
+      key: string;
+      value: string;
+      hasEnvEntry: boolean;
+      description?: string;
+    }[];
+    name: string;
+  };
+  control: Control<TForm, any, TForm>;
+  search: string;
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      key={group.name}
+      className="overflow-clip border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b"
+    >
+      <div
+        className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            setOpen((o) => !o);
+          }
+        }}
+      >
+        <FontAwesomeIcon
+          className={`mr-8 transition-transform duration-100 ${open || search ? "rotate-90" : ""}`}
+          icon={faChevronRight}
+        />
+
+        <div className="flex-grow select-none text-base">{group.name}</div>
+      </div>
+
+      {(open || search) && (
+        <div className="flex flex-col">
+          {group.fields.map((field) => (
+            <div
+              key={field.key}
+              className="flex items-center justify-between gap-4 border-t border-mineshaft-500 bg-mineshaft-700/50 p-4"
+            >
+              <div className="flex max-w-lg flex-col">
+                <span className="text-sm">
+                  <HighlightText text={field.key} highlight={search} />
+                </span>
+                <span className="text-sm text-mineshaft-400">
+                  <HighlightText text={field.description} highlight={search} />
+                </span>
+              </div>
+
+              <div className="flex grow items-center justify-end gap-2">
+                {field.hasEnvEntry && (
+                  <Tooltip
+                    content="Setting this value will override an existing environment variable"
+                    className="text-center"
+                  >
+                    <FontAwesomeIcon icon={faExclamationTriangle} className="text-yellow" />
+                  </Tooltip>
+                )}
+
+                <Controller
+                  control={control}
+                  name={field.key}
+                  render={({ field: formGenField, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      className="mb-0 w-full max-w-sm"
+                    >
+                      <SecretInput
+                        {...formGenField}
+                        autoComplete="off"
+                        containerClassName="text-bunker-300 hover:border-mineshaft-400 border border-mineshaft-600 bg-bunker-600 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const EnvironmentPageForm = () => {
+  const { data: envOverrides } = useGetEnvOverrides();
+  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
+  const [search, setSearch] = useState("");
+
+  const allFields = useMemo(() => {
+    if (!envOverrides) return [];
+    return Object.values(envOverrides).flatMap((group) => group.fields);
+  }, [envOverrides]);
+
+  const formSchema = useMemo(() => {
+    return z.object(Object.fromEntries(allFields.map((field) => [field.key, z.string()])));
+  }, [allFields]);
+
+  const defaultValues = useMemo(() => {
+    const values: Record<string, string> = {};
+    allFields.forEach((field) => {
+      values[field.key] = field.value ?? "";
+    });
+    return values;
+  }, [allFields]);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues
+  });
+
+  const formValues = useWatch({ control });
+
+  const filteredData = useMemo(() => {
+    if (!envOverrides) return [];
+
+    const searchTerm = search.toLowerCase().trim();
+    if (!searchTerm) {
+      return Object.values(envOverrides);
+    }
+
+    return Object.values(envOverrides)
+      .map((group) => {
+        const filteredFields = group.fields.filter(
+          (field) =>
+            field.key.toLowerCase().includes(searchTerm) ||
+            (field.description ?? "").toLowerCase().includes(searchTerm)
+        );
+
+        if (filteredFields.length > 0) {
+          return { ...group, fields: filteredFields };
+        }
+        return null;
+      })
+      .filter(Boolean);
+  }, [search, formValues, envOverrides]);
+
+  useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues, reset]);
+
+  const onSubmit = useCallback(
+    async (formData: TForm) => {
+      try {
+        const filteredFormData = Object.fromEntries(
+          Object.entries(formData).filter(([, value]) => value !== "")
+        );
+        await updateServerConfig({
+          envOverrides: filteredFormData
+        });
+
+        createNotification({
+          type: "success",
+          text: "Environment overrides updated successfully. It can take up to 5 minutes to take effect."
+        });
+
+        reset(formData);
+      } catch (error) {
+        const errorMessage =
+          (error as any)?.response?.data?.message ||
+          (error as any)?.message ||
+          "An unknown error occurred";
+        createNotification({
+          type: "error",
+          title: "Failed to update environment overrides",
+          text: errorMessage
+        });
+      }
+    },
+    [reset, updateServerConfig]
+  );
+
+  return (
+    <form
+      className="flex flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="flex w-full flex-row items-center justify-between">
+        <div>
+          <div className="flex items-start gap-1">
+            <p className="text-xl font-semibold text-mineshaft-100">Overrides</p>
+            <a
+              href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="ml-1 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-[10px]"
+                />
+              </div>
+            </a>
+          </div>
+          <p className="text-sm text-bunker-300">
+            Override specific environment variables. After saving, it may take up to 5 minutes for
+            variables to propagate throughout every container.
+          </p>
+        </div>
+
+        <div className="flex flex-row gap-2">
+          <Button
+            type="submit"
+            variant="outline_bg"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search for keys, descriptions, and values..."
+        className="flex-1"
+      />
+      <div className="flex flex-col">
+        {filteredData.map((group) => (
+          <GroupContainer group={group!} control={control} search={search} />
+        ))}
+      </div>
+    </form>
+  );
+};

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

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

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

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

frontend/src/pages/admin/layout.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute("/_authenticate/_inject-org-details/admin/_
   beforeLoad: ({ context }) => {
     if (!context.user.superAdmin) {
       throw redirect({
-        to: "/organization/secret-manager/overview"
+        to: "/organization/projects"
       });
     }
   }

frontend/src/pages/auth/EmailNotVerifiedPage/EmailNotVerifiedPage.tsx

@@ -1,19 +1,33 @@
 import { Helmet } from "react-helmet";
+import { Link } from "@tanstack/react-router";
 
 export const EmailNotVerifiedPage = () => {
   return (
-    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
       <Helmet>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
-        <p className="text-6xl">Oops.</p>
-        <p className="mb-1 mt-2 text-xl">Your email was not verified. </p>
-        <p className="text-xl">Please try again.</p>
-        <p className="text-md mt-8 max-w-sm text-center text-gray-600">
-          Note: If it still doesn&apos;t work, please reach out to us at support@infisical.com
+      <Link to="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
+        </div>
+      </Link>
+      <div className="mx-auto flex w-full flex-col items-center justify-center">
+        <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+          Your email was not verified
+        </h1>
+        <p className="w-max justify-center text-center text-sm text-gray-400">
+          Please try again. <br /> Note: If it still doesn&apos;t work, please reach out to us at
+          support@infisical.com
         </p>
+        <div className="mt-6 flex flex-row text-sm text-bunker-400">
+          <Link to="/login">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              Back to Login
+            </span>
+          </Link>
+        </div>
       </div>
     </div>
   );

frontend/src/pages/auth/LoginPage/Login.utils.tsx

@@ -4,7 +4,6 @@ import { useServerConfig } from "@app/context";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { queryClient } from "@app/hooks/api/reactQuery";
 import { userKeys } from "@app/hooks/api/users";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 export const navigateUserToOrg = async (navigate: NavigateFn, organizationId?: string) => {
   const userOrgs = await fetchOrganizations();
@@ -13,7 +12,7 @@ export const navigateUserToOrg = async (navigate: NavigateFn, organizationId?: s
 
   if (organizationId) {
     localStorage.setItem("orgData.id", organizationId);
-    navigate({ to: "/organization/secret-manager/overview" });
+    navigate({ to: "/organization/projects" });
     return;
   }
 
@@ -21,7 +20,7 @@ export const navigateUserToOrg = async (navigate: NavigateFn, organizationId?: s
     // user is part of at least 1 non-auth enforced org
     const userOrg = nonAuthEnforcedOrgs[0] && nonAuthEnforcedOrgs[0].id;
     localStorage.setItem("orgData.id", userOrg);
-    navigate({ to: `/organization/${ProjectType.SecretManager}/overview` as const });
+    navigate({ to: "/organization/projects" });
   } else {
     // user is not part of any non-auth enforced orgs
     localStorage.removeItem("orgData.id");

frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
@@ -36,7 +36,12 @@ export const PasswordResetPage = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center bg-bunker-800">
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
+      <Link to="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <img src="/images/gradientLogo.svg" className="h-[90px] w-[120px]" alt="Infisical Logo" />
+        </div>
+      </Link>
       {step === Steps.ConfirmEmail && (
         <ConfirmEmailStep
           onComplete={(verifyToken, userEncryptionVersion) => {

frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx

@@ -19,17 +19,21 @@ export const ConfirmEmailStep = ({ onComplete }: Props) => {
     isPending: isVerifyPasswordResetLoading
   } = useVerifyPasswordResetCode();
   return (
-    <div className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 py-6 drop-shadow-xl md:max-w-lg md:px-6">
-      <p className="mb-8 flex justify-center bg-gradient-to-br from-sky-400 to-primary bg-clip-text text-center text-4xl font-semibold text-transparent">
+    <div className="mx-auto flex w-full flex-col items-center justify-center">
+      <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         Confirm your email
+      </h1>
+      <p className="mb-8 w-max justify-center text-center text-sm text-gray-400">
+        Reset password for <span className="italic">{email}</span>.
       </p>
-      <img
-        src="/images/envelope.svg"
-        style={{ height: "262px", width: "410px" }}
-        alt="verify email"
-      />
-      <div className="mx-auto mb-2 mt-4 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
+      <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
+          type="submit"
+          size="sm"
+          isFullWidth
+          className="h-10"
+          colorSchema="primary"
+          variant="solid"
           onClick={async () => {
             try {
               const response = await verifyPasswordResetCodeMutateAsync({
@@ -44,7 +48,6 @@ export const ConfirmEmailStep = ({ onComplete }: Props) => {
             }
           }}
           isLoading={isVerifyPasswordResetLoading}
-          size="lg"
         >
           Confirm Email
         </Button>

frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx

@@ -1,7 +1,7 @@
 import crypto from "crypto";
 
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSearch } from "@tanstack/react-router";
@@ -169,17 +169,15 @@ export const EnterPasswordStep = ({
   return (
     <form
       onSubmit={handleSubmit(resetPasswordHandler)}
-      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
+      className="mx-auto flex w-full flex-col items-center justify-center"
     >
-      <p className="mx-auto flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
+      <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         Enter new password
+      </h1>
+      <p className="w-max justify-center text-center text-sm text-gray-400">
+        Make sure you save it somewhere safe.
       </p>
-      <div className="mt-1 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-        <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
-          Make sure you save it somewhere safe.
-        </p>
-      </div>
-      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
+      <div className="mt-8 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Controller
           control={control}
           name="password"
@@ -202,6 +200,20 @@ export const EnterPasswordStep = ({
           )}
         />
       </div>
+      <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          type="submit"
+          size="sm"
+          isFullWidth
+          className="h-10"
+          colorSchema="primary"
+          variant="solid"
+          isLoading={isSubmitting || isLoading || isLoadingV2}
+          isDisabled={isSubmitting || isLoading || isLoadingV2}
+        >
+          Change Password
+        </Button>
+      </div>
       {passwordErrorTooShort ||
       passwordErrorTooLong ||
       passwordErrorNoLetterChar ||
@@ -210,33 +222,33 @@ export const EnterPasswordStep = ({
       passwordErrorEscapeChar ||
       passwordErrorLowEntropy ||
       passwordErrorBreached ? (
-        <div className="mx-2 mb-2 mt-3 flex w-full max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
-          <div className="mb-1 text-sm text-gray-400">Password should contain:</div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+        <div className="mt-4 rounded border border-mineshaft-600 bg-mineshaft-800 p-4 drop-shadow">
+          <div className="mb-1 ml-2 text-sm text-gray-300">Password should contain:</div>
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorTooShort ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
               at least 14 characters
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorTooLong ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
               at most 100 characters
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorNoLetterChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div
               className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -244,11 +256,11 @@ export const EnterPasswordStep = ({
               at least 1 letter character
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorNoNumOrSpecialChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div
               className={`${
@@ -258,11 +270,11 @@ export const EnterPasswordStep = ({
               at least 1 number or special character
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorRepeatedChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div
               className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -270,11 +282,11 @@ export const EnterPasswordStep = ({
               at most 3 repeated, consecutive characters
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorEscapeChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div
               className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -282,11 +294,11 @@ export const EnterPasswordStep = ({
               No escape characters allowed.
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorLowEntropy ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div
               className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
@@ -294,32 +306,18 @@ export const EnterPasswordStep = ({
               Password contains personal info.
             </div>
           </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
+          <div className="ml-2 flex flex-row items-center justify-start">
             {passwordErrorBreached ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2.5 text-lg text-red" />
             ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-green" />
             )}
             <div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
               Password was found in a data breach.
             </div>
           </div>
         </div>
-      ) : (
-        <div className="py-2" />
-      )}
-      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
-        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-          <Button
-            type="submit"
-            colorSchema="secondary"
-            isLoading={isSubmitting || isLoading || isLoadingV2}
-            isDisabled={isSubmitting || isLoading || isLoadingV2}
-          >
-            Change Password
-          </Button>
-        </div>
-      </div>
+      ) : null}
     </form>
   );
 };

frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx

@@ -43,18 +43,15 @@ export const InputBackupKeyStep = ({ verificationToken, onComplete }: Props) =>
   return (
     <form
       onSubmit={handleSubmit(getEncryptedKeyHandler)}
-      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
+      className="mx-auto flex w-full flex-col items-center justify-center"
     >
-      <p className="mx-auto mb-4 flex w-max justify-center text-2xl font-semibold text-bunker-100">
+      <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         Enter your backup key
+      </h1>
+      <p className="w-max justify-center text-center text-sm text-gray-400">
+        You can find it in your emergency kit you downloaded during signup.
       </p>
-      <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-        <p className="flex w-full px-4 text-center text-sm text-gray-400 sm:max-w-md">
-          You can find it in your emergency kit. You had to download the emergency kit during
-          signup.
-        </p>
-      </div>
-      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
+      <div className="mt-8 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Controller
           control={control}
           name="backupKey"
@@ -75,12 +72,17 @@ export const InputBackupKeyStep = ({ verificationToken, onComplete }: Props) =>
           )}
         />
       </div>
-      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
-        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-          <Button type="submit" colorSchema="secondary">
-            Submit Backup Key
-          </Button>
-        </div>
+      <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          type="submit"
+          size="sm"
+          isFullWidth
+          className="h-10"
+          colorSchema="primary"
+          variant="solid"
+        >
+          Submit Backup Key
+        </Button>
       </div>
     </form>
   );

frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx

@@ -27,7 +27,6 @@ import {
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { isLoggedIn } from "@app/hooks/api/reactQuery";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
@@ -200,7 +199,7 @@ export const SignupInvitePage = () => {
                 localStorage.setItem("orgData.id", orgId);
 
                 navigate({
-                  to: `/organization/${ProjectType.SecretManager}/overview` as const
+                  to: "/organization/projects"
                 });
               };
 

frontend/src/pages/auth/SignUpPage/SignUpPage.tsx

@@ -13,7 +13,6 @@ import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
 import { useVerifySignupEmailVerificationCode } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 export const SignUpPage = () => {
   const [email, setEmail] = useState("");
@@ -73,7 +72,7 @@ export const SignUpPage = () => {
 
       if (!serverDetails?.emailConfigured && step === 4) {
         navigate({
-          to: `/organization/${ProjectType.SecretManager}/overview` as const
+          to: "/organization/projects"
         });
       }
     })();

frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -17,7 +17,6 @@ import { useToggle } from "@app/hooks";
 import { completeAccountSignup, useSelectOrganization } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
@@ -202,7 +201,7 @@ export const UserInfoSSOStep = ({
 
                   localStorage.setItem("orgData.id", orgId);
                   navigate({
-                    to: `/organization/${ProjectType.SecretManager}/overview` as const
+                    to: "/organization/projects"
                   });
                 } catch (error) {
                   setIsLoading(false);

frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx

@@ -2,8 +2,7 @@ import { FormEvent, useState } from "react";
 import { Helmet } from "react-helmet";
 import { Link } from "@tanstack/react-router";
 
-import InputField from "@app/components/basic/InputField";
-import { Button, EmailServiceSetupModal } from "@app/components/v2";
+import { Button, EmailServiceSetupModal, Input } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
 import { useSendPasswordResetEmail } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
@@ -44,9 +43,9 @@ export const VerifyEmailPage = () => {
   };
 
   return (
-    <div className="flex h-screen flex-col justify-start bg-bunker-800 px-6">
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28">
       <Helmet>
-        <title>Login</title>
+        <title>Reset Password</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
         <meta property="og:title" content="Verify your email in Infisical" />
@@ -56,66 +55,80 @@ export const VerifyEmailPage = () => {
         />
       </Helmet>
       <Link to="/">
-        <div className="mb-8 mt-20 flex cursor-pointer justify-center">
+        <div className="mb-4 mt-20 flex justify-center">
           <img
-            src="/images/biglogo.png"
+            src="/images/gradientLogo.svg"
             style={{
               height: "90px",
               width: "120px"
             }}
-            alt="long logo"
+            alt="Infisical Logo"
           />
         </div>
       </Link>
       {step === 1 && (
         <form
           onSubmit={onSubmit}
-          className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker px-6 py-4 pt-8 drop-shadow-xl"
+          className="mx-auto flex w-full flex-col items-center justify-center"
         >
-          <p className="mx-auto mb-6 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
+          <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
             Forgot your password?
+          </h1>
+          <p className="w-max justify-center text-center text-sm text-gray-400">
+            Enter your email to start the password reset process. <br /> You will receive an email
+            with instructions.
           </p>
-          <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-            <p className="flex w-max justify-center text-center text-sm text-gray-400">
-              Enter your email to start the password reset process. You will receive an email with
-              instructions.
-            </p>
-          </div>
-          <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
-            <InputField
-              label="Email"
-              onChangeHandler={setEmail}
-              type="email"
+          <div className="mt-8 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+            <Input
               value={email}
-              placeholder=""
+              onChange={(e) => setEmail(e.target.value)}
+              type="email"
+              placeholder="Enter your email..."
               isRequired
               autoComplete="username"
+              className="h-10"
             />
           </div>
-          <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
-            <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-              <Button type="submit" size="lg" onClick={() => {}} isLoading={loading}>
-                Continue
-              </Button>
-            </div>
+          <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+            <Button
+              type="submit"
+              size="sm"
+              isFullWidth
+              className="h-10"
+              colorSchema="primary"
+              variant="solid"
+              isLoading={loading}
+            >
+              Continue
+            </Button>
+          </div>
+          <div className="mt-6 flex flex-row text-sm text-bunker-400">
+            <Link to="/login">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+                Back to Login
+              </span>
+            </Link>
           </div>
         </form>
       )}
       {step === 2 && (
-        <div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker px-6 py-4 pt-8 drop-shadow-xl">
-          <p className="mx-auto mb-6 flex w-max justify-center text-xl font-semibold text-bunker-100 md:text-2xl">
-            Look for an email in your inbox.
+        <div className="mx-auto flex w-full flex-col items-center justify-center">
+          <h1 className="mb-2 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+            Look for an email in your inbox
+          </h1>
+          <p className="w-max max-w-lg justify-center text-center text-sm text-gray-400">
+            If the email is in our system, you will receive an email at{" "}
+            <span className="italic">{email}</span> with instructions on how to reset your password.
           </p>
-          <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-            <p className="w-max text-center text-sm text-gray-400">
-              If the email is in our system, you will receive an email at{" "}
-              <span className="italic">{email}</span> with instructions on how to reset your
-              password.
-            </p>
+          <div className="mt-6 flex flex-row text-sm text-bunker-400">
+            <Link to="/login">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+                Back to Login
+              </span>
+            </Link>
           </div>
         </div>
       )}
-
       <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}

frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionModal.tsx

@@ -12,7 +12,6 @@ import {
   useGetPkiCollectionById,
   useUpdatePkiCollection
 } from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
@@ -83,7 +82,7 @@ export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
         });
 
         navigate({
-          to: `/${ProjectType.CertificateManager}/$projectId/pki-collections/$collectionId` as const,
+          to: "/projects/$projectId/cert-manager/pki-collections/$collectionId",
           params: {
             projectId,
             collectionId

frontend/src/pages/cert-manager/AlertingPage/components/PkiCollectionTable.tsx

@@ -61,7 +61,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
                     key={`pki-collection-${pkiCollection.id}`}
                     onClick={() =>
                       navigate({
-                        to: `/${ProjectType.CertificateManager}/$projectId/pki-collections/$collectionId` as const,
+                        to: `/projects/$projectId/${ProjectType.CertificateManager}/pki-collections/$collectionId` as const,
                         params: {
                           projectId,
                           collectionId: pkiCollection.id

frontend/src/pages/cert-manager/AlertingPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { AlertingPage } from "./AlertingPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/alerting"
 )({
   component: AlertingPage,
   beforeLoad: ({ context }) => {

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -71,7 +71,7 @@ const Page = () => {
 
       handlePopUpClose("deleteCa");
       navigate({
-        to: `/${ProjectType.CertificateManager}/$projectId/certificate-authorities` as const,
+        to: `/projects/$projectId/${ProjectType.CertificateManager}/certificate-authorities` as const,
         params: {
           projectId
         }

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { CertAuthDetailsByIDPage } from "./CertAuthDetailsByIDPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caName"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/ca/$caName"
 )({
   component: CertAuthDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -13,11 +13,14 @@ export const Route = createFileRoute(
         {
           label: "Certificate Authorities",
           link: linkOptions({
-            to: "/cert-manager/$projectId/certificate-authorities",
+            to: "/projects/$projectId/cert-manager/certificate-authorities",
             params: {
               projectId: params.projectId
             }
           })
+        },
+        {
+          label: params.caName
         }
       ]
     };

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx

@@ -79,7 +79,7 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
                     key={`ca-${ca.id}`}
                     onClick={() =>
                       navigate({
-                        to: `/${ProjectType.CertificateManager}/$projectId/ca/$caName` as const,
+                        to: `/projects/$projectId/${ProjectType.CertificateManager}/ca/$caName` as const,
                         params: {
                           projectId: currentWorkspace.id,
                           caName: ca.name

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CertificateAuthoritiesPage } from "./CertificateAuthoritiesPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificate-authorities"
 )({
   component: CertificateAuthoritiesPage,
   beforeLoad: ({ context }) => {

frontend/src/pages/cert-manager/CertificatesPage/route.tsx

@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CertificatesPage } from "./CertificatesPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificates"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificates"
 )({
-  component: CertificatesPage
+  component: CertificatesPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificates"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx

@@ -57,7 +57,7 @@ export const PkiCollectionPage = () => {
       });
       handlePopUpClose("deletePkiCollection");
       navigate({
-        to: `/${ProjectType.CertificateManager}/$projectId/certificates` as const,
+        to: `/projects/$projectId/${ProjectType.CertificateManager}/certificates` as const,
         params: {
           projectId
         }

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx

@@ -3,7 +3,7 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { PkiCollectionDetailsByIDPage } from "./PkiCollectionDetailsByIDPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/pki-collections/$collectionId"
 )({
   component: PkiCollectionDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -13,11 +13,14 @@ export const Route = createFileRoute(
         {
           label: "Certificate Collections",
           link: linkOptions({
-            to: "/cert-manager/$projectId/certificates",
+            to: "/projects/$projectId/cert-manager/certificates",
             params: {
               projectId: params.projectId
             }
           })
+        },
+        {
+          label: "Details"
         }
       ]
     };

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx

@@ -61,7 +61,7 @@ const Page = () => {
 
       handlePopUpClose("deletePkiSubscriber");
       navigate({
-        to: `/${ProjectType.CertificateManager}/$projectId/subscribers` as const,
+        to: `/projects/$projectId/${ProjectType.CertificateManager}/subscribers` as const,
         params: {
           projectId
         }

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { PkiSubscriberDetailsByIDPage } from "./PkiSubscriberDetailsByIDPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/$subscriberName"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers/$subscriberName"
 )({
   component: PkiSubscriberDetailsByIDPage,
   beforeLoad: ({ context, params }) => {
@@ -13,11 +13,14 @@ export const Route = createFileRoute(
         {
           label: "Subscribers",
           link: linkOptions({
-            to: "/cert-manager/$projectId/subscribers",
+            to: "/projects/$projectId/cert-manager/subscribers",
             params: {
               projectId: params.projectId
             }
           })
+        },
+        {
+          label: params.subscriberName
         }
       ]
     };

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx

@@ -76,7 +76,7 @@ export const PkiSubscribersTable = ({ handlePopUpOpen }: Props) => {
                     key={`pki-subscriber-${subscriber.id}`}
                     onClick={() =>
                       navigate({
-                        to: `/${ProjectType.CertificateManager}/$projectId/subscribers/$subscriberName` as const,
+                        to: `/projects/$projectId/${ProjectType.CertificateManager}/subscribers/$subscriberName` as const,
                         params: {
                           projectId: currentWorkspace.id,
                           subscriberName: subscriber.name

frontend/src/pages/cert-manager/PkiSubscribersPage/route.tsx

@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { PkiSubscribersPage } from "./PkiSubscribersPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers/"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/subscribers/"
 )({
-  component: PkiSubscribersPage
+  component: PkiSubscribersPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Subscribers"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/cert-manager/PkiTemplateListPage/route.tsx

@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { PkiTemplateListPage } from "./PkiTemplateListPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-templates/"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/certificate-templates/"
 )({
-  component: PkiTemplateListPage
+  component: PkiTemplateListPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificate Templates"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx

@@ -3,9 +3,13 @@ import { useTranslation } from "react-i18next";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 
-import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
-
-const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+const tabs = [
+  {
+    name: "General",
+    key: "tab-project-general",
+    Component: () => <div className="text-white">Coming soon</div>
+  }
+];
 
 export const SettingsPage = () => {
   const { t } = useTranslation();

frontend/src/pages/cert-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,14 +0,0 @@
-import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
-
-import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
-import { DeleteProjectSection } from "../DeleteProjectSection";
-
-export const ProjectGeneralTab = () => {
-  return (
-    <div>
-      <ProjectOverviewChangeSection showSlugField />
-      <AuditLogsRetentionSection />
-      <DeleteProjectSection />
-    </div>
-  );
-};

frontend/src/pages/cert-manager/SettingsPage/route.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SettingsPage } from "./SettingsPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-layout/settings"
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {

frontend/src/pages/cert-manager/layout.tsx

@@ -1,41 +1,9 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+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 { PkiManagerLayout } from "@app/layouts/PkiManagerLayout";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/cert-manager/_cert-manager-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 {
-      breadcrumbs: [
-        {
-          label: "Cert Managers",
-          link: linkOptions({ to: "/organization/cert-manager/overview" })
-        },
-        {
-          label: project.name,
-          link: linkOptions({
-            to: "/cert-manager/$projectId/subscribers",
-            params: { projectId: project.id }
-          })
-        }
-      ]
-    };
-  }
+  component: PkiManagerLayout
 });

frontend/src/pages/kms/KmipPage/route.tsx

@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { KmipPage } from "./KmipPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/kmip"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/kmip"
 )({
-  component: KmipPage
+  component: KmipPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "KMIP"
+        }
+      ]
+    };
+  }
 });

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

@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { OverviewPage } from "./OverviewPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/overview"
 )({
-  component: OverviewPage
+  component: OverviewPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Overview"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/kms/SettingsPage/SettingsPage.tsx

@@ -3,9 +3,13 @@ import { useTranslation } from "react-i18next";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 
-import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
-
-const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+const tabs = [
+  {
+    name: "General",
+    key: "tab-project-general",
+    Component: () => <div className="text-white">Coming soon...</div>
+  }
+];
 
 export const SettingsPage = () => {
   const { t } = useTranslation();
@@ -16,7 +20,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title={t("settings.project.title")} />
+        <PageHeader title="Settings" />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs.map((tab) => (

frontend/src/pages/kms/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx

@@ -1,129 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { useProjectPermission, useSubscription, useWorkspace } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
-import { useUpdateWorkspaceAuditLogsRetention } from "@app/hooks/api/workspace/queries";
-
-const formSchema = z.object({
-  auditLogsRetentionDays: z.coerce.number().min(0)
-});
-
-type TForm = z.infer<typeof formSchema>;
-
-export const AuditLogsRetentionSection = () => {
-  const { mutateAsync: updateAuditLogsRetention } = useUpdateWorkspaceAuditLogsRetention();
-
-  const { currentWorkspace } = useWorkspace();
-  const { membership } = useProjectPermission();
-  const { subscription } = useSubscription();
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-
-  const {
-    control,
-    formState: { isSubmitting, isDirty },
-    handleSubmit
-  } = useForm<TForm>({
-    resolver: zodResolver(formSchema),
-    values: {
-      auditLogsRetentionDays:
-        currentWorkspace?.auditLogsRetentionDays ?? subscription?.auditLogsRetentionDays ?? 0
-    }
-  });
-
-  if (!currentWorkspace) return null;
-
-  const handleAuditLogsRetentionSubmit = async ({ auditLogsRetentionDays }: TForm) => {
-    try {
-      if (!subscription?.auditLogs) {
-        handlePopUpOpen("upgradePlan", {
-          description: "You can only configure audit logs retention if you upgrade your plan."
-        });
-
-        return;
-      }
-
-      if (subscription && auditLogsRetentionDays > subscription?.auditLogsRetentionDays) {
-        handlePopUpOpen("upgradePlan", {
-          description:
-            "To update your audit logs retention period to a higher value, upgrade your plan."
-        });
-
-        return;
-      }
-
-      await updateAuditLogsRetention({
-        auditLogsRetentionDays,
-        projectSlug: currentWorkspace.slug
-      });
-
-      createNotification({
-        text: "Successfully updated audit logs retention period",
-        type: "success"
-      });
-    } catch {
-      createNotification({
-        text: "Failed updating audit logs retention period",
-        type: "error"
-      });
-    }
-  };
-
-  // render only for dedicated/self-hosted instances of Infisical
-  if (
-    window.location.origin.includes("https://app.infisical.com") ||
-    window.location.origin.includes("https://gamma.infisical.com")
-  ) {
-    return null;
-  }
-
-  const isAdmin = membership.roles.includes(ProjectMembershipRole.Admin);
-  return (
-    <>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="flex w-full items-center justify-between">
-          <p className="text-xl font-semibold">Audit Logs Retention</p>
-        </div>
-        <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
-          Set the number of days to keep your project audit logs.
-        </p>
-        <form onSubmit={handleSubmit(handleAuditLogsRetentionSubmit)} autoComplete="off">
-          <div className="max-w-xs">
-            <Controller
-              control={control}
-              defaultValue={0}
-              name="auditLogsRetentionDays"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                  label="Number of days"
-                >
-                  <Input {...field} type="number" min={1} step={1} isDisabled={!isAdmin} />
-                </FormControl>
-              )}
-            />
-          </div>
-          <Button
-            colorSchema="secondary"
-            type="submit"
-            isLoading={isSubmitting}
-            disabled={!isAdmin || !isDirty}
-          >
-            Save
-          </Button>
-        </form>
-      </div>
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text={(popUp.upgradePlan?.data as { description: string })?.description}
-      />
-    </>
-  );
-};

frontend/src/pages/kms/SettingsPage/components/AuditLogsRetentionSection/index.tsx

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

frontend/src/pages/kms/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -1,184 +0,0 @@
-import { useMemo } from "react";
-import { useNavigate } from "@tanstack/react-router";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
-import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useOrganization,
-  useProjectPermission,
-  useWorkspace
-} from "@app/context";
-import { useToggle } from "@app/hooks";
-import { useDeleteWorkspace, useGetWorkspaceUsers, useLeaveProject } from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-export const DeleteProjectSection = () => {
-  const navigate = useNavigate();
-
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "deleteWorkspace",
-    "leaveWorkspace"
-  ] as const);
-
-  const { currentOrg } = useOrganization();
-  const { hasProjectRole, membership } = useProjectPermission();
-  const { currentWorkspace } = useWorkspace();
-  const [isDeleting, setIsDeleting] = useToggle();
-  const [isLeaving, setIsLeaving] = useToggle();
-  const deleteWorkspace = useDeleteWorkspace();
-  const leaveProject = useLeaveProject();
-  const { data: members, isPending: isMembersLoading } = useGetWorkspaceUsers(
-    currentWorkspace?.id || ""
-  );
-
-  // If isNoAccessMember is true, then the user can't read the workspace members. So we need to handle this case separately.
-  const isNoAccessMember = hasProjectRole("no-access");
-
-  const isOnlyAdminMember = useMemo(() => {
-    if (!members || !membership || !hasProjectRole("admin")) return false;
-
-    const adminMembers = members.filter(
-      (member) => member.roles.map((r) => r.role).includes("admin") && member.id !== membership.id // exclude the current user
-    );
-
-    return !adminMembers.length;
-  }, [members, membership]);
-
-  const handleDeleteWorkspaceSubmit = async () => {
-    setIsDeleting.on();
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await deleteWorkspace.mutateAsync({
-        workspaceID: currentWorkspace?.id
-      });
-
-      createNotification({
-        text: "Successfully deleted project",
-        type: "success"
-      });
-
-      navigate({
-        to: `/organization/${ProjectType.SecretManager}/overview` as const
-      });
-      handlePopUpClose("deleteWorkspace");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete project",
-        type: "error"
-      });
-    } finally {
-      setIsDeleting.off();
-    }
-  };
-
-  const handleLeaveWorkspaceSubmit = async () => {
-    try {
-      setIsLeaving.on();
-
-      if (!currentWorkspace?.id || !currentOrg?.id) return;
-
-      // If there's no members, and the user has access to read members, something went wrong.
-      if (!members && !isNoAccessMember) return;
-
-      // If the user has elevated permissions and can read members:
-      if (!isNoAccessMember) {
-        if (!members) return;
-
-        if (members.length < 2) {
-          createNotification({
-            text: "You can't leave the project as you are the only member",
-            type: "error"
-          });
-          return;
-        }
-        // If the user has access to read members, and there's less than 1 admin member excluding the current user, they can't leave the project.
-        if (isOnlyAdminMember) {
-          createNotification({
-            text: "You can't leave a project with no admin members left. Promote another member to admin first.",
-            type: "error"
-          });
-          return;
-        }
-      }
-
-      // If it's actually a no-access member, then we don't really care about the members.
-
-      await leaveProject.mutateAsync({
-        workspaceId: currentWorkspace.id
-      });
-
-      navigate({
-        to: `/organization/${ProjectType.SecretManager}/overview` as const
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to leave project",
-        type: "error"
-      });
-    } finally {
-      setIsLeaving.off();
-    }
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
-      <div className="space-x-4">
-        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
-          {(isAllowed) => (
-            <Button
-              isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting}
-              colorSchema="danger"
-              variant="outline_bg"
-              type="submit"
-              onClick={() => handlePopUpOpen("deleteWorkspace")}
-            >
-              {`Delete ${currentWorkspace?.name}`}
-            </Button>
-          )}
-        </ProjectPermissionCan>
-        {!isOnlyAdminMember && (
-          <Button
-            disabled={isMembersLoading || (members && members?.length < 2)}
-            isLoading={isLeaving}
-            colorSchema="danger"
-            variant="outline_bg"
-            type="submit"
-            onClick={() => handlePopUpOpen("leaveWorkspace")}
-          >
-            {`Leave ${currentWorkspace?.name}`}
-          </Button>
-        )}
-      </div>
-
-      <DeleteActionModal
-        isOpen={popUp.deleteWorkspace.isOpen}
-        title="Are you sure you want to delete this project?"
-        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
-        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
-        deleteKey="confirm"
-        buttonText="Delete Project"
-        onDeleteApproved={handleDeleteWorkspaceSubmit}
-      />
-
-      <LeaveProjectModal
-        isOpen={popUp.leaveWorkspace.isOpen}
-        title="Are you sure you want to leave this project?"
-        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and its contents.`}
-        onChange={(isOpen) => handlePopUpToggle("leaveWorkspace", isOpen)}
-        deleteKey="confirm"
-        buttonText="Leave Project"
-        onLeaveApproved={handleLeaveWorkspaceSubmit}
-      />
-    </div>
-  );
-};

frontend/src/pages/kms/SettingsPage/components/DeleteProjectSection/index.tsx

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

frontend/src/pages/kms/SettingsPage/components/ProjectGeneralTab/index.tsx

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

frontend/src/pages/kms/SettingsPage/components/index.tsx

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

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

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SettingsPage } from "./SettingsPage";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-layout/settings"
 )({
   component: SettingsPage,
   beforeLoad: ({ context }) => {

frontend/src/pages/kms/layout.tsx

@@ -1,41 +1,9 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+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 { KmsLayout } from "@app/layouts/KmsLayout";
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
+  "/_authenticate/_inject-org-details/_org-layout/projects/$projectId/_project-layout/kms/_kms-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 {
-      breadcrumbs: [
-        {
-          label: "KMS",
-          link: linkOptions({ to: "/organization/kms/overview" })
-        },
-        {
-          label: project.name,
-          link: linkOptions({
-            to: "/kms/$projectId/overview",
-            params: { projectId: project.id }
-          })
-        }
-      ]
-    };
-  }
+  component: KmsLayout
 });

frontend/src/pages/middlewares/restrict-login-signup.tsx

@@ -12,7 +12,6 @@ import { SessionStorageKeys } from "@app/const";
 import { useServerConfig } from "@app/context";
 import { authKeys, fetchAuthToken } from "@app/hooks/api/auth/queries";
 import { setAuthToken } from "@app/hooks/api/reactQuery";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 const QueryParamsSchema = z.object({
   callback_port: z.coerce.number().optional().catch(undefined),
@@ -112,7 +111,7 @@ export const Route = createFileRoute("/_restrict-login-signup")({
       throw redirect({ to: "/login/select-organization" });
     }
     throw redirect({
-      to: `/organization/${ProjectType.SecretManager}/overview` as const
+      to: "/organization/projects"
     });
   },
   component: AuthConsentWrapper

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

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -24,11 +22,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Access Control"
       }

frontend/src/pages/organization/AdminPage/components/OrgAdminProjects/OrgAdminProjects.tsx

@@ -29,6 +29,7 @@ import {
   OrgPermissionAdminConsoleAction,
   OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
+import { getProjectHomePage } from "@app/helpers/project";
 import { withPermission } from "@app/hoc";
 import { useDebounce } from "@app/hooks";
 import { useOrgAdminAccessProject, useOrgAdminGetProjects } from "@app/hooks/api";
@@ -58,26 +59,8 @@ export const OrgAdminProjects = withPermission(
         await orgAdminAccessProject.mutateAsync({
           projectId
         });
-        if (type === ProjectType.CertificateManager) {
-          await navigate({
-            to: "/cert-manager/$projectId/subscribers" as const,
-            params: {
-              projectId
-            }
-          });
-          return;
-        }
-        if (type === ProjectType.SecretScanning) {
-          await navigate({
-            to: "/secret-scanning/$projectId/data-sources" as const,
-            params: {
-              projectId
-            }
-          });
-          return;
-        }
         await navigate({
-          to: `/${type}/$projectId/overview` as const,
+          to: getProjectHomePage(type),
           params: {
             projectId
           }
@@ -122,7 +105,7 @@ export const OrgAdminProjects = withPermission(
                 <TBody>
                   {isProjectsLoading && <TableSkeleton columns={4} innerKey="projects" />}
                   {!isProjectsLoading &&
-                    projects?.map(({ name, slug, createdAt, type, id }) => (
+                    projects?.map(({ name, slug, createdAt, id, defaultProduct }) => (
                       <Tr key={`project-${id}`} className="group w-full">
                         <Td>{name}</Td>
                         <Td>{slug}</Td>
@@ -143,7 +126,7 @@ export const OrgAdminProjects = withPermission(
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     e.preventDefault();
-                                    handleAccessProject(type, id);
+                                    handleAccessProject(defaultProduct, id);
                                   }}
                                   icon={<FontAwesomeIcon icon={faSignIn} />}
                                   disabled={

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

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { AdminPage } from "./AdminPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AdminPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Admin Console"
       }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -38,6 +38,7 @@ import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
 import { WindmillConnectionForm } from "./WindmillConnectionForm";
+import { ZabbixConnectionForm } from "./ZabbixConnectionForm";
 
 type FormProps = {
   onComplete: (appConnection: TAppConnection) => void;
@@ -134,6 +135,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <GitLabConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Cloudflare:
       return <CloudflareConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Zabbix:
+      return <ZabbixConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -228,6 +231,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <GitLabConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Cloudflare:
       return <CloudflareConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Zabbix:
+      return <ZabbixConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
   }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/ZabbixConnectionForm.tsx

@@ -0,0 +1,137 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { TZabbixConnection, ZabbixConnectionMethod } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TZabbixConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Zabbix)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(ZabbixConnectionMethod.ApiToken),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "API Token required"),
+      instanceUrl: z.string().trim().url("Invalid instance URL")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const ZabbixConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Zabbix,
+      method: ZabbixConnectionMethod.ApiToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Zabbix].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(ZabbixConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API Token"
+            >
+              <Input {...field} type="password" placeholder="Enter your API Token" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              tooltipClassName="max-w-sm"
+            >
+              <Input {...field} placeholder="https://your-zabbix-instance.com" />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Zabbix"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/AppConnections/AppConnectionsPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { AppConnectionsPage } from "./AppConnectionsPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AppConnectionsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "App Connections"
       }

frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx

@@ -0,0 +1,212 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faArrowRight, faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import ms from "ms";
+import { twMerge } from "tailwind-merge";
+
+import {
+  Button,
+  DatePicker,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+
+import {
+  auditLogDateFilterFormSchema,
+  AuditLogDateFilterType,
+  TAuditLogDateFilterFormData
+} from "./types";
+
+type Props = {
+  setFilter: (data: TAuditLogDateFilterFormData) => void;
+  filter: TAuditLogDateFilterFormData;
+};
+const RELATIVE_VALUES = ["5m", "30m", "1h", "3h", "12h"];
+export const LogsDateFilter = ({ setFilter, filter }: Props) => {
+  const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
+  const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
+  const [isPopupOpen, setIsPopOpen] = useState(false);
+
+  const { control, watch, handleSubmit, formState } = useForm<TAuditLogDateFilterFormData>({
+    resolver: zodResolver(auditLogDateFilterFormSchema),
+    values: filter
+  });
+  const selectType = watch("type");
+  const isCustomRelative =
+    filter.type === AuditLogDateFilterType.Relative &&
+    !RELATIVE_VALUES.includes(filter.relativeModeValue || "");
+
+  const onSubmit = (data: TAuditLogDateFilterFormData) => {
+    const endDate = data.type === AuditLogDateFilterType.Relative ? new Date() : data.endDate;
+    const startDate =
+      data.type === AuditLogDateFilterType.Relative && data.relativeModeValue
+        ? new Date(Number(new Date()) - ms(data.relativeModeValue))
+        : data.startDate;
+    setFilter({
+      ...data,
+      startDate,
+      endDate
+    });
+    setIsPopOpen(false);
+  };
+
+  return (
+    <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
+      <div className="mr-2 flex items-center">
+        {filter.type === AuditLogDateFilterType.Relative ? (
+          <>
+            {RELATIVE_VALUES.map((el) => (
+              <Button
+                variant="outline_bg"
+                className={twMerge(
+                  "rounded-none px-3 py-2 first:rounded-l-md",
+                  filter.type === AuditLogDateFilterType.Relative &&
+                    filter.relativeModeValue === el &&
+                    "border-primary/40 bg-primary/[0.1]"
+                )}
+                key={`${el}-relative`}
+                onClick={() =>
+                  setFilter({
+                    relativeModeValue: el,
+                    type: AuditLogDateFilterType.Relative,
+                    endDate: new Date(),
+                    startDate: new Date(Number(new Date()) - ms(el))
+                  })
+                }
+              >
+                {el}
+              </Button>
+            ))}
+          </>
+        ) : (
+          <>
+            <div className="rounded-l-md border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
+              {format(filter.startDate, "yyyy-MM-dd HH:mm")}
+            </div>
+            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
+              <FontAwesomeIcon icon={faChevronRight} />
+            </div>
+            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
+              {format(filter.endDate, "yyyy-MM-dd HH:mm")}
+            </div>
+          </>
+        )}
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline_bg"
+            className={twMerge(
+              "rounded-none rounded-r-md px-3 py-2",
+              (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
+                "border-primary/40 bg-primary/[0.1]"
+            )}
+          >
+            <FontAwesomeIcon icon={faCalendar} />
+            {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
+              <span className="ml-1">({filter.relativeModeValue})</span>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+      </div>
+      <DropdownMenuContent className="min-w-80 p-4" align="center" alignOffset={16}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            control={control}
+            name="type"
+            render={({ field }) => (
+              <FormControl className="mb-2 w-full">
+                <Select
+                  value={field.value}
+                  onValueChange={(el) => field.onChange(el)}
+                  className="w-full"
+                >
+                  <SelectItem value={AuditLogDateFilterType.Relative}>Relative</SelectItem>
+                  <SelectItem value={AuditLogDateFilterType.Absolute}>Absolute</SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {selectType === AuditLogDateFilterType.Relative && (
+            <Controller
+              control={control}
+              name="relativeModeValue"
+              render={({ field }) => (
+                <FormControl className="mb-0 w-full" helperText="Example: 1h, 1d, 2d">
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+            />
+          )}
+          {selectType === AuditLogDateFilterType.Absolute && (
+            <div className="mb-2 flex h-10 w-full items-center justify-between gap-2">
+              <Controller
+                name="startDate"
+                control={control}
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="relative top-2"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <DatePicker
+                        value={field.value || undefined}
+                        onChange={onChange}
+                        dateFormat="P"
+                        popUpProps={{
+                          open: isStartDatePickerOpen,
+                          onOpenChange: setIsStartDatePickerOpen
+                        }}
+                        popUpContentProps={{}}
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <div className="flex items-center -space-x-3">
+                <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
+                <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
+              </div>
+              <Controller
+                name="endDate"
+                control={control}
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="relative top-2"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <DatePicker
+                        value={field.value || undefined}
+                        onChange={onChange}
+                        dateFormat="P"
+                        popUpProps={{
+                          open: isEndDatePickerOpen,
+                          onOpenChange: setIsEndDatePickerOpen
+                        }}
+                        popUpContentProps={{}}
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+            </div>
+          )}
+          <div className="mt-4">
+            <Button size="xs" type="submit" isDisabled={!formState.isDirty}>
+              Apply
+            </Button>
+          </div>
+        </form>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -1,28 +1,15 @@
 /* eslint-disable no-nested-ternary */
-import { useMemo, useState } from "react";
-import {
-  Control,
-  Controller,
-  UseFormGetFieldState,
-  UseFormReset,
-  UseFormResetField,
-  UseFormSetValue,
-  UseFormWatch
-} from "react-hook-form";
-import {
-  faArrowRight,
-  faCaretDown,
-  faCheckCircle,
-  faFilterCircleXmark
-} from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCaretDown, faCheckCircle, faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
   Badge,
   Button,
-  DatePicker,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -44,7 +31,7 @@ import { EventType } from "@app/hooks/api/auditLogs/enums";
 import { UserAgentType } from "@app/hooks/api/auth/types";
 
 import { LogFilterItem } from "./LogFilterItem";
-import { AuditLogFilterFormData, Presets } from "./types";
+import { auditLogFilterFormSchema, Presets, TAuditLogFilterFormData } from "./types";
 
 const eventTypes = Object.entries(eventToNameMap).map(([value, label]) => ({ label, value }));
 const userAgentTypes = Object.entries(userAgentTypeToNameMap).map(([value, label]) => ({
@@ -54,78 +41,54 @@ const userAgentTypes = Object.entries(userAgentTypeToNameMap).map(([value, label
 
 type Props = {
   presets?: Presets;
-  control: Control<AuditLogFilterFormData>;
-  reset: UseFormReset<AuditLogFilterFormData>;
-  resetField: UseFormResetField<AuditLogFilterFormData>;
-  watch: UseFormWatch<AuditLogFilterFormData>;
-  getFieldState: UseFormGetFieldState<AuditLogFilterFormData>;
-  setValue: UseFormSetValue<AuditLogFilterFormData>;
+  setFilter: (data: TAuditLogFilterFormData) => void;
+  filter: TAuditLogFilterFormData;
 };
 
-const getActiveFilterCount = (
-  getFieldState: UseFormGetFieldState<AuditLogFilterFormData>,
-  watch: UseFormWatch<AuditLogFilterFormData>
-) => {
+const getActiveFilterCount = (filter: TAuditLogFilterFormData) => {
   const fields = [
     "actor",
     "project",
     "eventType",
-    "startDate",
-    "endDate",
     "environment",
     "secretPath",
     "userAgentType",
     "secretKey"
-  ] as Partial<keyof AuditLogFilterFormData>[];
+  ] as Partial<keyof TAuditLogFilterFormData>[];
 
   let filterCount = 0;
 
   // either start or end date should only be counted as one filter
-  let dateProcessed = false;
-
   fields.forEach((field) => {
-    const fieldState = getFieldState(field);
-
-    if (
-      field === "userAgentType" ||
-      field === "environment" ||
-      field === "secretKey" ||
-      field === "secretPath"
-    ) {
-      const value = watch(field);
-
-      if (value !== undefined && value !== "") {
-        filterCount += 1;
-      }
-    } else if (fieldState.isDirty && !dateProcessed) {
+    const value = filter?.[field];
+    if (Array.isArray(value) ? value.length : value) {
       filterCount += 1;
-
-      if (field === "startDate" || field === "endDate") {
-        dateProcessed = true;
-      }
     }
   });
 
   return filterCount;
 };
 
-export const LogsFilter = ({
-  presets,
-  control,
-  reset,
-  resetField,
-  watch,
-  getFieldState,
-  setValue
-}: Props) => {
-  const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
-  const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
-
+export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
   const { data: workspaces = [] } = useGetUserWorkspaces();
   const { currentOrg } = useOrganization();
 
   const workspacesInOrg = workspaces.filter((ws) => ws.orgId === currentOrg?.id);
 
+  const { control, watch, resetField, setValue, handleSubmit, formState } =
+    useForm<TAuditLogFilterFormData>({
+      resolver: zodResolver(auditLogFilterFormSchema),
+      defaultValues: {
+        project: null,
+        environment: undefined,
+        secretKey: "",
+        secretPath: "",
+        actor: presets?.actorId,
+        eventType: filter?.eventType || [],
+        userAgentType: undefined
+      },
+      values: filter
+    });
   const selectedEventTypes = watch("eventType") as EventType[] | undefined;
   const selectedProject = watch("project");
 
@@ -140,408 +103,345 @@ export const LogsFilter = ({
     return workspacesInOrg.find((ws) => ws.id === selectedProject.id)?.environments ?? [];
   }, [selectedProject, workspacesInOrg]);
 
-  const activeFilterCount = getActiveFilterCount(getFieldState, watch);
+  const activeFilterCount = getActiveFilterCount(filter);
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline_bg" colorSchema="primary">
-          <FontAwesomeIcon icon={faFilterCircleXmark} className="mr-3 px-[0.1rem]" />
-          Filters
+        <Button variant="outline_bg" colorSchema="primary" className="relative">
+          <FontAwesomeIcon icon={faFilterCircleXmark} />
           {activeFilterCount > 0 && (
-            <Badge className="ml-2 px-1.5 py-0.5" variant="primary">
+            <Badge className="absolute bottom-0 right-0" variant="primary">
               {activeFilterCount}
             </Badge>
           )}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="mt-4 py-4">
-        <div className="flex min-w-64 flex-col font-inter">
-          <div className="mb-3 flex items-center border-b border-b-mineshaft-500 px-3 pb-2">
-            <div className="flex w-full items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span>Filters</span>
-                <Badge className="px-1.5 py-0.5" variant="primary">
-                  {activeFilterCount}
-                </Badge>
+        <form onSubmit={handleSubmit(setFilter)}>
+          <div className="flex min-w-64 flex-col font-inter">
+            <div className="mb-3 flex items-center border-b border-b-mineshaft-500 px-3 pb-2">
+              <div className="flex w-full items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span>Filters</span>
+                  <Badge className="px-1.5 py-0.5" variant="primary">
+                    {activeFilterCount}
+                  </Badge>
+                </div>
+                <Button
+                  onClick={() => {
+                    setFilter({
+                      eventType: presets?.eventType || [],
+                      actor: presets?.actorId,
+                      userAgentType: undefined,
+                      project: null,
+                      secretPath: undefined,
+                      secretKey: undefined
+                    });
+                  }}
+                  variant="link"
+                  className="text-mineshaft-400"
+                  size="xs"
+                >
+                  Clear filters
+                </Button>
               </div>
-              <Button
-                onClick={() => {
-                  reset({
-                    eventType: presets?.eventType || [],
-                    actor: presets?.actorId,
-                    userAgentType: undefined,
-                    startDate: undefined,
-                    endDate: undefined,
-                    project: null,
-                    secretPath: undefined,
-                    secretKey: undefined
-                  });
+            </div>
+
+            <div className="px-3">
+              <LogFilterItem
+                label="Events"
+                onClear={() => {
+                  resetField("eventType");
                 }}
-                variant="link"
-                className="text-mineshaft-400"
-                size="xs"
               >
-                Clear filters
+                <Controller
+                  control={control}
+                  name="eventType"
+                  render={({ field }) => (
+                    <FormControl>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <div className="thin-scrollbar inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                            {selectedEventTypes?.length === 1
+                              ? eventTypes.find(
+                                  (eventType) => eventType.value === selectedEventTypes[0]
+                                )?.label
+                              : selectedEventTypes?.length === 0
+                                ? "All events"
+                                : `${selectedEventTypes?.length} events selected`}
+                            <FontAwesomeIcon icon={faCaretDown} className="ml-2 text-xs" />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="start"
+                          className="thin-scrollbar z-[100] max-h-80 overflow-hidden"
+                        >
+                          <div className="max-h-80 overflow-y-auto">
+                            {eventTypes && eventTypes.length > 0 ? (
+                              eventTypes.map((eventType) => {
+                                const isSelected = selectedEventTypes?.includes(
+                                  eventType.value as EventType
+                                );
+
+                                return (
+                                  <DropdownMenuItem
+                                    onSelect={(event) =>
+                                      eventTypes.length > 1 && event.preventDefault()
+                                    }
+                                    onClick={() => {
+                                      if (
+                                        selectedEventTypes?.includes(eventType.value as EventType)
+                                      ) {
+                                        field.onChange(
+                                          selectedEventTypes?.filter(
+                                            (e: string) => e !== eventType.value
+                                          )
+                                        );
+                                      } else {
+                                        field.onChange([
+                                          ...(selectedEventTypes || []),
+                                          eventType.value
+                                        ]);
+                                      }
+                                    }}
+                                    key={`event-type-${eventType.value}`}
+                                    icon={
+                                      isSelected ? (
+                                        <FontAwesomeIcon
+                                          icon={faCheckCircle}
+                                          className="pr-0.5 text-primary"
+                                        />
+                                      ) : (
+                                        <div className="pl-[1.01rem]" />
+                                      )
+                                    }
+                                    iconPos="left"
+                                    className="w-[28.4rem] text-sm"
+                                  >
+                                    {eventType.label}
+                                  </DropdownMenuItem>
+                                );
+                              })
+                            ) : (
+                              <div />
+                            )}
+                          </div>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </FormControl>
+                  )}
+                />
+              </LogFilterItem>
+              <LogFilterItem
+                label="Source"
+                onClear={() => {
+                  resetField("userAgentType");
+                }}
+              >
+                <Controller
+                  control={control}
+                  name="userAgentType"
+                  render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="w-full"
+                    >
+                      <Select
+                        {...field}
+                        value={value === undefined ? "all" : value}
+                        onValueChange={(e) => {
+                          if (e === "all") onChange(undefined);
+                          else setValue("userAgentType", e as UserAgentType, { shouldDirty: true });
+                        }}
+                        className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
+                      >
+                        <SelectItem value="all" key="all">
+                          All sources
+                        </SelectItem>
+                        {userAgentTypes.map(({ label, value: userAgent }) => (
+                          <SelectItem value={userAgent} key={label}>
+                            {label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </LogFilterItem>
+              <LogFilterItem
+                label="Project"
+                onClear={() => {
+                  resetField("project");
+                  resetField("environment");
+                  setValue("secretPath", "");
+                  setValue("secretKey", "");
+                }}
+              >
+                <Controller
+                  control={control}
+                  name="project"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mb-0 w-full"
+                    >
+                      <FilterableSelect
+                        value={value}
+                        isClearable
+                        onChange={(e) => {
+                          if (e === null) {
+                            setValue("secretPath", "");
+                            setValue("secretKey", "");
+                          }
+                          resetField("environment");
+                          onChange(e);
+                        }}
+                        placeholder="All projects"
+                        options={workspacesInOrg.map(({ name, id, defaultProduct }) => ({
+                          name,
+                          id,
+                          type: defaultProduct
+                        }))}
+                        getOptionValue={(option) => option.id}
+                        getOptionLabel={(option) => option.name}
+                      />
+                    </FormControl>
+                  )}
+                />
+              </LogFilterItem>
+              <AnimatePresence initial={false}>
+                {showSecretsSection && (
+                  <motion.div
+                    className="overflow-hidden"
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: "auto" }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <div className="mb-3 mt-2">
+                      <p className="text-xs opacity-60">Secrets</p>
+                      <div className="h-[1px] w-full rounded-full bg-mineshaft-500" />
+                    </div>
+                    <LogFilterItem
+                      label="Environment"
+                      hoverTooltip={
+                        !selectedProject
+                          ? "Select a project before filtering by environment."
+                          : undefined
+                      }
+                      className={twMerge(!selectedProject && "opacity-50")}
+                      onClear={() => {
+                        resetField("environment");
+                      }}
+                    >
+                      <Controller
+                        control={control}
+                        name="environment"
+                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                          <FormControl
+                            errorText={error?.message}
+                            isError={Boolean(error)}
+                            className="w-full"
+                          >
+                            <FilterableSelect
+                              value={value}
+                              key={value?.name || "filter-environment"}
+                              isClearable
+                              isDisabled={!selectedProject}
+                              onChange={(e) => onChange(e)}
+                              placeholder="All environments"
+                              options={availableEnvironments.map(({ name, slug }) => ({
+                                name,
+                                slug
+                              }))}
+                              getOptionValue={(option) => option.slug}
+                              getOptionLabel={(option) => option.name}
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </LogFilterItem>
+                    <LogFilterItem
+                      label="Secret Path"
+                      hoverTooltip={
+                        !selectedProject
+                          ? "Select a project before filtering by secret path."
+                          : undefined
+                      }
+                      className={twMerge(!selectedProject && "opacity-50")}
+                      onClear={() => {
+                        setValue("secretPath", "");
+                      }}
+                    >
+                      <Controller
+                        control={control}
+                        name="secretPath"
+                        render={({ field: { onChange, value, ...field } }) => (
+                          <FormControl
+                            tooltipText="Filter audit logs related to events that occurred on a specific secret path."
+                            className="w-full"
+                          >
+                            <Input
+                              placeholder="Enter secret path"
+                              className="disabled:cursor-not-allowed"
+                              isDisabled={!selectedProject}
+                              {...field}
+                              value={value}
+                              onChange={(e) => onChange(e.target.value)}
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </LogFilterItem>
+
+                    <LogFilterItem
+                      hoverTooltip={
+                        !selectedProject
+                          ? "Select a project before filtering by secret key."
+                          : undefined
+                      }
+                      className={twMerge(!selectedProject && "opacity-50")}
+                      label="Secret Key"
+                      onClear={() => {
+                        setValue("secretKey", "");
+                      }}
+                    >
+                      <Controller
+                        control={control}
+                        name="secretKey"
+                        render={({ field: { onChange, value, ...field } }) => (
+                          <FormControl
+                            tooltipText="Filter audit logs related to a specific secret."
+                            className="w-full"
+                          >
+                            <Input
+                              isDisabled={!selectedProject}
+                              {...field}
+                              placeholder="Enter secret key"
+                              className="disabled:cursor-not-allowed"
+                              value={value}
+                              onChange={(e) =>
+                                setValue("secretKey", e.target.value, { shouldDirty: true })
+                              }
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </LogFilterItem>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+            <div className="mt-2 px-3">
+              <Button size="xs" type="submit" isDisabled={!formState.isDirty}>
+                Apply
               </Button>
             </div>
           </div>
-
-          <div className="px-3">
-            <LogFilterItem
-              label="Events"
-              onClear={() => {
-                resetField("eventType");
-              }}
-            >
-              <Controller
-                control={control}
-                name="eventType"
-                render={({ field }) => (
-                  <FormControl>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <div className="thin-scrollbar inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                          {selectedEventTypes?.length === 1
-                            ? eventTypes.find(
-                                (eventType) => eventType.value === selectedEventTypes[0]
-                              )?.label
-                            : selectedEventTypes?.length === 0
-                              ? "All events"
-                              : `${selectedEventTypes?.length} events selected`}
-                          <FontAwesomeIcon icon={faCaretDown} className="ml-2 text-xs" />
-                        </div>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="start"
-                        className="thin-scrollbar z-[100] max-h-80 overflow-hidden"
-                      >
-                        <div className="max-h-80 overflow-y-auto">
-                          {eventTypes && eventTypes.length > 0 ? (
-                            eventTypes.map((eventType) => {
-                              const isSelected = selectedEventTypes?.includes(
-                                eventType.value as EventType
-                              );
-
-                              return (
-                                <DropdownMenuItem
-                                  onSelect={(event) =>
-                                    eventTypes.length > 1 && event.preventDefault()
-                                  }
-                                  onClick={() => {
-                                    if (
-                                      selectedEventTypes?.includes(eventType.value as EventType)
-                                    ) {
-                                      field.onChange(
-                                        selectedEventTypes?.filter(
-                                          (e: string) => e !== eventType.value
-                                        )
-                                      );
-                                    } else {
-                                      field.onChange([
-                                        ...(selectedEventTypes || []),
-                                        eventType.value
-                                      ]);
-                                    }
-                                  }}
-                                  key={`event-type-${eventType.value}`}
-                                  icon={
-                                    isSelected ? (
-                                      <FontAwesomeIcon
-                                        icon={faCheckCircle}
-                                        className="pr-0.5 text-primary"
-                                      />
-                                    ) : (
-                                      <div className="pl-[1.01rem]" />
-                                    )
-                                  }
-                                  iconPos="left"
-                                  className="w-[28.4rem] text-sm"
-                                >
-                                  {eventType.label}
-                                </DropdownMenuItem>
-                              );
-                            })
-                          ) : (
-                            <div />
-                          )}
-                        </div>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </FormControl>
-                )}
-              />
-            </LogFilterItem>
-            <LogFilterItem
-              label="Source"
-              onClear={() => {
-                resetField("userAgentType");
-              }}
-            >
-              <Controller
-                control={control}
-                name="userAgentType"
-                render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
-                  <FormControl
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                    className="w-full"
-                  >
-                    <Select
-                      value={value === undefined ? "all" : value}
-                      {...field}
-                      onValueChange={(e) => {
-                        if (e === "all") onChange(undefined);
-                        else setValue("userAgentType", e as UserAgentType, { shouldDirty: true });
-                      }}
-                      className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
-                    >
-                      <SelectItem value="all" key="all">
-                        All sources
-                      </SelectItem>
-                      {userAgentTypes.map(({ label, value: userAgent }) => (
-                        <SelectItem value={userAgent} key={label}>
-                          {label}
-                        </SelectItem>
-                      ))}
-                    </Select>
-                  </FormControl>
-                )}
-              />
-            </LogFilterItem>
-
-            <LogFilterItem
-              label="Date"
-              onClear={() => {
-                resetField("startDate");
-                resetField("endDate");
-              }}
-            >
-              <div className="flex h-10 w-full items-center justify-between gap-2">
-                <Controller
-                  name="startDate"
-                  control={control}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                    return (
-                      <FormControl
-                        className="relative top-2"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <DatePicker
-                          value={field.value || undefined}
-                          onChange={onChange}
-                          dateFormat="P"
-                          popUpProps={{
-                            open: isStartDatePickerOpen,
-                            onOpenChange: setIsStartDatePickerOpen
-                          }}
-                          popUpContentProps={{}}
-                        />
-                      </FormControl>
-                    );
-                  }}
-                />
-
-                <div className="flex items-center -space-x-3">
-                  <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
-                  <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
-                </div>
-
-                <Controller
-                  name="endDate"
-                  control={control}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                    return (
-                      <FormControl
-                        className="relative top-2"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <DatePicker
-                          value={field.value || undefined}
-                          onChange={onChange}
-                          dateFormat="P"
-                          popUpProps={{
-                            open: isEndDatePickerOpen,
-                            onOpenChange: setIsEndDatePickerOpen
-                          }}
-                          popUpContentProps={{}}
-                        />
-                      </FormControl>
-                    );
-                  }}
-                />
-              </div>
-            </LogFilterItem>
-            <AnimatePresence initial={false}>
-              {showSecretsSection && (
-                <motion.div
-                  className="mt-2 overflow-hidden"
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: "auto" }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <div className="mb-3 mt-2">
-                    <p className="text-xs opacity-60">Secrets</p>
-                    <div className="h-[1px] w-full rounded-full bg-mineshaft-500" />
-                  </div>
-
-                  <LogFilterItem
-                    label="Project"
-                    onClear={() => {
-                      resetField("project");
-                      resetField("environment");
-                      setValue("secretPath", "");
-                      setValue("secretKey", "");
-                    }}
-                  >
-                    <Controller
-                      control={control}
-                      name="project"
-                      render={({ field: { onChange, value }, fieldState: { error } }) => (
-                        <FormControl
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                          className="w-full"
-                        >
-                          <FilterableSelect
-                            value={value}
-                            isClearable
-                            onChange={(e) => {
-                              if (e === null) {
-                                setValue("secretPath", "");
-                                setValue("secretKey", "");
-                              }
-                              resetField("environment");
-                              onChange(e);
-                            }}
-                            placeholder="All projects"
-                            options={workspacesInOrg.map(({ name, id, type }) => ({
-                              name,
-                              id,
-                              type
-                            }))}
-                            getOptionValue={(option) => option.id}
-                            getOptionLabel={(option) => option.name}
-                          />
-                        </FormControl>
-                      )}
-                    />
-                  </LogFilterItem>
-
-                  <LogFilterItem
-                    label="Environment"
-                    hoverTooltip={
-                      !selectedProject
-                        ? "Select a project before filtering by environment."
-                        : undefined
-                    }
-                    className={twMerge(!selectedProject && "opacity-50")}
-                    onClear={() => {
-                      resetField("environment");
-                    }}
-                  >
-                    <Controller
-                      control={control}
-                      name="environment"
-                      render={({ field: { onChange, value }, fieldState: { error } }) => (
-                        <FormControl
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                          className="w-full"
-                        >
-                          <FilterableSelect
-                            value={value}
-                            key={value?.name || "filter-environment"}
-                            isClearable
-                            isDisabled={!selectedProject}
-                            onChange={(e) => onChange(e)}
-                            placeholder="All environments"
-                            options={availableEnvironments.map(({ name, slug }) => ({
-                              name,
-                              slug
-                            }))}
-                            getOptionValue={(option) => option.slug}
-                            getOptionLabel={(option) => option.name}
-                          />
-                        </FormControl>
-                      )}
-                    />
-                  </LogFilterItem>
-                  <LogFilterItem
-                    label="Secret Path"
-                    hoverTooltip={
-                      !selectedProject
-                        ? "Select a project before filtering by secret path."
-                        : undefined
-                    }
-                    className={twMerge(!selectedProject && "opacity-50")}
-                    onClear={() => {
-                      setValue("secretPath", "");
-                    }}
-                  >
-                    <Controller
-                      control={control}
-                      name="secretPath"
-                      render={({ field: { onChange, value, ...field } }) => (
-                        <FormControl
-                          tooltipText="Filter audit logs related to events that occurred on a specific secret path."
-                          className="w-full"
-                        >
-                          <Input
-                            placeholder="Enter secret path"
-                            className="disabled:cursor-not-allowed"
-                            isDisabled={!selectedProject}
-                            {...field}
-                            value={value}
-                            onChange={(e) => onChange(e.target.value)}
-                          />
-                        </FormControl>
-                      )}
-                    />
-                  </LogFilterItem>
-
-                  <LogFilterItem
-                    hoverTooltip={
-                      !selectedProject
-                        ? "Select a project before filtering by secret key."
-                        : undefined
-                    }
-                    className={twMerge(!selectedProject && "opacity-50")}
-                    label="Secret Key"
-                    onClear={() => {
-                      setValue("secretKey", "");
-                    }}
-                  >
-                    <Controller
-                      control={control}
-                      name="secretKey"
-                      render={({ field: { onChange, value, ...field } }) => (
-                        <FormControl
-                          tooltipText="Filter audit logs related to a specific secret."
-                          className="w-full"
-                        >
-                          <Input
-                            isDisabled={!selectedProject}
-                            {...field}
-                            placeholder="Enter secret key"
-                            className="disabled:cursor-not-allowed"
-                            value={value}
-                            onChange={(e) =>
-                              setValue("secretKey", e.target.value, { shouldDirty: true })
-                            }
-                          />
-                        </FormControl>
-                      )}
-                    />
-                  </LogFilterItem>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
+        </form>
       </DropdownMenuContent>
     </DropdownMenu>
   );

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -1,17 +1,20 @@
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { withPermission } from "@app/hoc";
-import { useDebounce } from "@app/hooks";
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { usePopUp } from "@app/hooks/usePopUp";
 
+import { LogsDateFilter } from "./LogsDateFilter";
 import { LogsFilter } from "./LogsFilter";
 import { LogsTable } from "./LogsTable";
-import { AuditLogFilterFormData, auditLogFilterFormSchema, Presets } from "./types";
+import {
+  AuditLogDateFilterType,
+  Presets,
+  TAuditLogDateFilterFormData,
+  TAuditLogFilterFormData
+} from "./types";
 
 type Props = {
   presets?: Presets;
@@ -24,74 +27,45 @@ export const LogsSection = withPermission(
     const { subscription } = useSubscription();
 
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-
-    const { control, reset, watch, getFieldState, resetField, setValue } =
-      useForm<AuditLogFilterFormData>({
-        resolver: zodResolver(auditLogFilterFormSchema),
-        defaultValues: {
-          project: null,
-          environment: undefined,
-          secretKey: "",
-          secretPath: "",
-          actor: presets?.actorId,
-          eventType: presets?.eventType || [],
-          userAgentType: undefined,
-          startDate: presets?.startDate ?? new Date(new Date().setDate(new Date().getDate() - 1)),
-          endDate: presets?.endDate ?? new Date(new Date(Date.now()).setHours(23, 59, 59, 999))
-        }
-      });
+    const [logFilter, setLogFilter] = useState<TAuditLogFilterFormData>({
+      eventType: presets?.eventType || [],
+      actor: presets?.actorId
+    });
+    const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>({
+      startDate: new Date(Number(new Date()) - ms("1h")),
+      endDate: new Date(),
+      type: AuditLogDateFilterType.Relative,
+      relativeModeValue: "1h"
+    });
 
     useEffect(() => {
       if (subscription && !subscription.auditLogs) {
         handlePopUpOpen("upgradePlan");
       }
     }, [subscription]);
-
-    const eventType = watch("eventType") as EventType[] | undefined;
-    const userAgentType = watch("userAgentType") as UserAgentType | undefined;
-    const actor = watch("actor");
-    const projectId = watch("project")?.id;
-    const environment = watch("environment")?.slug;
-    const secretPath = watch("secretPath");
-    const secretKey = watch("secretKey");
-
-    const startDate = watch("startDate");
-    const endDate = watch("endDate");
-
-    const [debouncedSecretPath] = useDebounce<string>(secretPath!, 500);
-    const [debouncedSecretKey] = useDebounce<string>(secretKey!, 500);
-
     return (
       <div className="space-y-2">
         <div className="flex w-full justify-end">
+          {showFilters && <LogsDateFilter filter={dateFilter} setFilter={setDateFilter} />}
           {showFilters && (
-            <LogsFilter
-              presets={presets}
-              control={control}
-              watch={watch}
-              reset={reset}
-              resetField={resetField}
-              getFieldState={getFieldState}
-              setValue={setValue}
-            />
+            <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
           )}
         </div>
-
         <LogsTable
           refetchInterval={refetchInterval}
           filter={{
-            secretPath: debouncedSecretPath || undefined,
-            secretKey: debouncedSecretKey || undefined,
-            eventMetadata: presets?.eventMetadata,
-            projectId,
+            secretPath: logFilter.secretPath || undefined,
+            secretKey: logFilter.secretKey || undefined,
+            eventMetadata: logFilter?.eventMetadata,
+            projectId: logFilter?.project?.id,
             actorType: presets?.actorType,
             limit: 15,
-            eventType,
-            userAgentType,
-            startDate,
-            endDate,
-            environment,
-            actor
+            eventType: logFilter?.eventType,
+            userAgentType: logFilter?.userAgentType,
+            startDate: dateFilter?.startDate,
+            endDate: dateFilter?.endDate,
+            environment: logFilter?.environment?.slug,
+            actor: logFilter?.actor
           }}
         />
         <UpgradePlanModal

frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx

@@ -23,11 +23,11 @@ import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";
 import { LogsTableRow } from "./LogsTableRow";
 
 type Props = {
-  filter?: TGetAuditLogsFilter;
+  filter: TGetAuditLogsFilter;
   refetchInterval?: number;
 };
 
-const AUDIT_LOG_LIMIT = 15;
+const AUDIT_LOG_LIMIT = 30;
 
 export const LogsTable = ({ filter, refetchInterval }: Props) => {
   // Determine the project ID for filtering

frontend/src/pages/organization/AuditLogsPage/components/types.tsx

@@ -3,23 +3,33 @@ import { z } from "zod";
 import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
-export const auditLogFilterFormSchema = z
+export enum AuditLogDateFilterType {
+  Relative = "relative",
+  Absolute = "absolute"
+}
+
+export const auditLogFilterFormSchema = z.object({
+  eventMetadata: z.object({}).optional(),
+  project: z
+    .object({ id: z.string(), name: z.string(), type: z.nativeEnum(ProjectType) })
+    .optional()
+    .nullable(),
+  environment: z.object({ name: z.string(), slug: z.string() }).optional().nullable(),
+  eventType: z.nativeEnum(EventType).array(),
+  actor: z.string().optional(),
+  userAgentType: z.nativeEnum(UserAgentType).optional(),
+  secretPath: z.string().optional(),
+  secretKey: z.string().optional(),
+  page: z.coerce.number().optional(),
+  perPage: z.coerce.number().optional()
+});
+
+export const auditLogDateFilterFormSchema = z
   .object({
-    eventMetadata: z.object({}).optional(),
-    project: z
-      .object({ id: z.string(), name: z.string(), type: z.nativeEnum(ProjectType) })
-      .optional()
-      .nullable(),
-    environment: z.object({ name: z.string(), slug: z.string() }).optional().nullable(),
-    eventType: z.nativeEnum(EventType).array(),
-    actor: z.string().optional(),
-    userAgentType: z.nativeEnum(UserAgentType),
-    secretPath: z.string().optional(),
-    secretKey: z.string().optional(),
-    startDate: z.date().optional(),
-    endDate: z.date().optional(),
-    page: z.coerce.number().optional(),
-    perPage: z.coerce.number().optional()
+    type: z.nativeEnum(AuditLogDateFilterType),
+    relativeModeValue: z.string().optional(),
+    startDate: z.date(),
+    endDate: z.date()
   })
   .superRefine((el, ctx) => {
     if (el.endDate && el.startDate && el.endDate < el.startDate) {
@@ -31,10 +41,11 @@ export const auditLogFilterFormSchema = z
     }
   });
 
-export type AuditLogFilterFormData = z.infer<typeof auditLogFilterFormSchema>;
+export type TAuditLogFilterFormData = z.infer<typeof auditLogFilterFormSchema>;
+export type TAuditLogDateFilterFormData = z.infer<typeof auditLogDateFilterFormSchema>;
 
 export type SetValueType = (
-  name: keyof AuditLogFilterFormData,
+  name: keyof TAuditLogFilterFormData,
   value: any,
   options?: {
     shouldValidate?: boolean;

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

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { AuditLogsPage } from "./AuditLogsPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: AuditLogsPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Audit Logs"
       }

frontend/src/pages/organization/BillingPage/BillingPage.tsx

@@ -2,6 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
 import { OrgPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
 import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 
 import { BillingTabGroup } from "./components";
@@ -18,10 +19,11 @@ export const BillingPage = () => {
       </Helmet>
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl px-6">
-          <div className="my-6">
-            <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
-            <div />
-          </div>
+          <PageHeader
+            title={t("billing.title")}
+            description="View your billing plan, next billing cycle."
+          />
+
           <OrgPermissionCan
             passThrough={false}
             I={OrgPermissionBillingActions.Read}

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

@@ -5,5 +5,14 @@ import { BillingPage } from "./BillingPage";
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/organization/billing"
 )({
-  component: BillingPage
+  component: BillingPage,
+  beforeLoad: () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Billing"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/organization/CertManagerOverviewPage/CertManagerOverviewPage.tsx

@@ -1,7 +0,0 @@
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { ProductOverviewPage } from "../SecretManagerOverviewPage/SecretManagerOverviewPage";
-
-export const CertManagerOverviewPage = () => (
-  <ProductOverviewPage type={ProjectType.CertificateManager} />
-);

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

@@ -1,23 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { CertManagerOverviewPage } from "./CertManagerOverviewPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview"
-)({
-  component: CertManagerOverviewPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Cert Management",
-        link: linkOptions({ to: "/organization/cert-manager/overview" })
-      }
-    ]
-  })
-});

frontend/src/pages/organization/CertManagerSettingsPage/CertManagerSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const CertManagerSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Cert Management Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Cert Management Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { CertManagerSettingsPage } from "./CertManagerSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/settings"
-)({
-  component: CertManagerSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Cert Management",
-        link: linkOptions({ to: "/organization/cert-manager/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { GatewayListPage } from "./GatewayListPage";
 
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: GatewayListPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Gateways"
       }

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

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: GroupDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityAddToProjectModal.tsx

@@ -44,7 +44,7 @@ type Props = {
 
 const Content = ({ identityId, handlePopUpToggle }: Omit<Props, "popUp">) => {
   const { currentOrg } = useOrganization();
-  const { data: workspaces = [] } = useGetUserWorkspaces({ type: "all" });
+  const { data: workspaces = [] } = useGetUserWorkspaces();
   const { mutateAsync: addIdentityToWorkspace } = useAddIdentityToWorkspace();
 
   const {

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
-import { IconButton, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
 import { formatProjectRoleName } from "@app/helpers/roles";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
@@ -50,7 +50,7 @@ export const IdentityProjectRow = ({
       onClick={() => {
         if (isAccessible) {
           navigate({
-            to: `/${project?.type}/$projectId/access-management` as const,
+            to: "/projects/$projectId/access-management",
             params: {
               projectId: project.id
             },
@@ -68,9 +68,6 @@ export const IdentityProjectRow = ({
       }}
     >
       <Td className="max-w-0 truncate">{project.name}</Td>
-      <Td>
-        <Tag size="xs">{project.type}</Tag>
-      </Td>
       <Td>{`${formatProjectRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx

@@ -118,7 +118,6 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
                 </div>
               </Th>
 
-              <Th>Type</Th>
               <Th>Role</Th>
               <Th>Added On</Th>
               <Th className="w-5" />

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

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: IdentityDetailsByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

frontend/src/pages/organization/KmsOverviewPage/KmsOverviewPage.tsx

@@ -1,5 +0,0 @@
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { ProductOverviewPage } from "../SecretManagerOverviewPage/SecretManagerOverviewPage";
-
-export const KmsOverviewPage = () => <ProductOverviewPage type={ProjectType.KMS} />;

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

@@ -1,23 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { KmsOverviewPage } from "./KmsOverviewPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/kms/overview"
-)({
-  component: KmsOverviewPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "KMS",
-        link: linkOptions({ to: "/organization/kms/overview" })
-      }
-    ]
-  })
-});

frontend/src/pages/organization/KmsSettingsPage/KmsSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const KmsSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>KMS Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="KMS Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { KmsSettingsPage } from "./KmsSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/kms/settings"
-)({
-  component: KmsSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "KMS",
-        link: linkOptions({ to: "/organization/kms/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx

@@ -10,31 +10,25 @@ import { NewProjectModal } from "@app/components/projects";
 import { PageHeader } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AllProjectView } from "./components/AllProjectView";
 import { MyProjectView } from "./components/MyProjectView";
 import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
 
-const formatDescription = (type: ProjectType) => {
-  if (type === ProjectType.SecretManager)
-    return "Securely store, manage, and rotate various application secrets, such as database credentials, API keys, etc.";
-  if (type === ProjectType.CertificateManager)
-    return "Manage your PKI infrastructure and issue digital certificates for services, applications, and devices.";
-  if (type === ProjectType.KMS)
-    return "Centralize the management of keys for cryptographic operations, such as encryption and decryption.";
-  if (type === ProjectType.SecretScanning)
-    return "Connect and monitor data sources to prevent secret leaks.";
-  return "Infisical SSH lets you issue SSH credentials to users for short-lived, secure SSH access to infrastructure.";
-};
+// const formatDescription = (type: ProjectType) => {
+//   if (type === ProjectType.SecretManager)
+//     return "Securely store, manage, and rotate various application secrets, such as database credentials, API keys, etc.";
+//   if (type === ProjectType.CertificateManager)
+//     return "Manage your PKI infrastructure and issue digital certificates for services, applications, and devices.";
+//   if (type === ProjectType.KMS)
+//     return "Centralize the management of keys for cryptographic operations, such as encryption and decryption.";
+//   if (type === ProjectType.SecretScanning)
+//     return "Connect and monitor data sources to prevent secret leaks.";
+//   return "Infisical SSH lets you issue SSH credentials to users for short-lived, secure SSH access to infrastructure.";
+// };
 
-type Props = {
-  type: ProjectType;
-};
-
-// #TODO: Update all the workspaceIds
-export const ProductOverviewPage = ({ type }: Props) => {
+export const ProjectsPage = () => {
   const { t } = useTranslation();
 
   const [projectListView, setProjectListView] = useState(ProjectListView.MyProjects);
@@ -87,19 +81,17 @@ export const ProductOverviewPage = ({ type }: Props) => {
               <ProjectListToggle value={projectListView} onChange={setProjectListView} />
             </div>
           }
-          description={formatDescription(type)}
+          description="Your team's complete security toolkit - organized and ready when you need them."
         />
       </div>
       {projectListView === ProjectListView.MyProjects ? (
         <MyProjectView
-          type={type}
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
         />
       ) : (
         <AllProjectView
-          type={type}
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
@@ -108,7 +100,6 @@ export const ProductOverviewPage = ({ type }: Props) => {
       <NewProjectModal
         isOpen={popUp.addNewWs.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addNewWs", isOpen)}
-        projectType={type}
       />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
@@ -118,7 +109,3 @@ export const ProductOverviewPage = ({ type }: Props) => {
     </div>
   );
 };
-
-export const SecretManagerOverviewPage = () => (
-  <ProductOverviewPage type={ProjectType.SecretManager} />
-);

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -35,10 +35,9 @@ import {
 } from "@app/helpers/userTablePreferences";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
-import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { Workspace } from "@app/hooks/api/workspace/types";
 
 type Props = {
-  type: ProjectType;
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
@@ -92,7 +91,6 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
 };
 
 export const AllProjectView = ({
-  type,
   onAddNewProject,
   onUpgradePlan,
   isAddingProjectsAllowed
@@ -125,7 +123,6 @@ export const AllProjectView = ({
   const { data: searchedProjects, isPending: isProjectLoading } = useSearchProjects({
     limit,
     offset,
-    type,
     name: debouncedSearch || undefined,
     orderDirection
   });
@@ -225,7 +222,7 @@ export const AllProjectView = ({
               onKeyDown={(evt) => {
                 if (evt.key === "Enter" && workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace),
+                    to: getProjectHomePage(workspace.defaultProduct),
                     params: {
                       projectId: workspace.id
                     }
@@ -235,7 +232,7 @@ export const AllProjectView = ({
               onClick={() => {
                 if (workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace),
+                    to: getProjectHomePage(workspace.defaultProduct),
                     params: {
                       projectId: workspace.id
                     }

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -29,10 +29,9 @@ import { useGetUserWorkspaces } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
-import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { Workspace } from "@app/hooks/api/workspace/types";
 
 type Props = {
-  type: ProjectType;
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
@@ -48,7 +47,6 @@ enum ProjectsViewMode {
 }
 
 export const MyProjectView = ({
-  type,
   onAddNewProject,
   onUpgradePlan,
   isAddingProjectsAllowed
@@ -56,9 +54,7 @@ export const MyProjectView = ({
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
 
-  const { data: workspaces = [], isPending: isWorkspaceLoading } = useGetUserWorkspaces({
-    type
-  });
+  const { data: workspaces = [], isPending: isWorkspaceLoading } = useGetUserWorkspaces();
   const {
     setPage,
     perPage,
@@ -157,7 +153,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace),
+          to: getProjectHomePage(workspace.defaultProduct),
           params: {
             projectId: workspace.id
           }
@@ -202,11 +198,6 @@ export const MyProjectView = ({
       </div>
 
       <div className="flex w-full flex-row items-end justify-between place-self-end">
-        {type === ProjectType.SecretManager && (
-          <div className="mt-0 text-xs text-mineshaft-400">
-            {workspace.environments?.length || 0} environments
-          </div>
-        )}
         <button type="button">
           <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 px-4 py-2 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
             Explore{" "}
@@ -224,7 +215,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace),
+          to: getProjectHomePage(workspace.defaultProduct),
           params: {
             projectId: workspace.id
           }
@@ -239,11 +230,6 @@ export const MyProjectView = ({
         <div className="truncate text-sm text-mineshaft-100">{workspace.name}</div>
       </div>
       <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
-        {type === ProjectType.SecretManager && (
-          <div className="text-center text-sm text-mineshaft-300">
-            {workspace.environments?.length || 0} environments
-          </div>
-        )}
         {isFavorite ? (
           <FontAwesomeIcon
             icon={faSolidStar}

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

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ProjectsPage } from "./ProjectsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/projects"
+)({
+  component: ProjectsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Projects"
+      }
+    ]
+  })
+});

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

@@ -1,5 +1,3 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { RoleByIDPage } from "./RoleByIDPage";
@@ -10,11 +8,6 @@ export const Route = createFileRoute(
   component: RoleByIDPage,
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
       {
         label: "Access Control",
         link: linkOptions({ to: "/organization/access-management" })

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

@@ -1,22 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute } from "@tanstack/react-router";
-
-import { SecretManagerOverviewPage } from "./SecretManagerOverviewPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/overview"
-)({
-  component: SecretManagerOverviewPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Secret Management"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SecretManagerSettingsPage/SecretManagerSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const SecretManagerSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Secret Management Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Secret Management Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SecretManagerSettingsPage } from "./SecretManagerSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/settings"
-)({
-  component: SecretManagerSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Secret Management",
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SecretScanningOverviewPage/SecretScanningOverviewPage.tsx

@@ -1,7 +0,0 @@
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-import { ProductOverviewPage } from "../SecretManagerOverviewPage/SecretManagerOverviewPage";
-
-export const SecretScanningOverviewPage = () => (
-  <ProductOverviewPage type={ProjectType.SecretScanning} />
-);

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

@@ -1,23 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SecretScanningOverviewPage } from "./SecretScanningOverviewPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning/overview"
-)({
-  component: SecretScanningOverviewPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Secret Scanning",
-        link: linkOptions({ to: "/organization/secret-scanning/overview" })
-      }
-    ]
-  })
-});

frontend/src/pages/organization/SecretScanningSettingsPage/SecretScanningSettingsPage.tsx

@@ -1,20 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { ProjectSettings } from "@app/components/projects/ProjectSettings";
-import { PageHeader } from "@app/components/v2";
-
-export const SecretScanningSettingsPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Secret Scanning Settings</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Secret Scanning Settings" />
-          <ProjectSettings />
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
-
-import { SecretScanningSettingsPage } from "./SecretScanningSettingsPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning/settings"
-)({
-  component: SecretScanningSettingsPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Products",
-        icon: () => <FontAwesomeIcon icon={faHome} />
-      },
-      {
-        label: "Secret Scanning",
-        link: linkOptions({ to: "/organization/secret-scanning/overview" })
-      },
-      {
-        label: "Settings"
-      }
-    ]
-  })
-});

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

@@ -1,6 +1,4 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -21,11 +19,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Secret Sharing"
       }

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

@@ -1,5 +1,3 @@
-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";
@@ -20,11 +18,6 @@ export const Route = createFileRoute(
   },
   context: () => ({
     breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
       {
         label: "Secret Sharing",
         link: linkOptions({ to: "/organization/secret-sharing" })

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

@@ -3,18 +3,14 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
-import { OrgProductSelectSection } from "../OrgProductSelectSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
   return (
-    <>
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-        <OrgNameChangeSection />
-        <OrgIncidentContactsSection />
-        {membership && membership.role === "admin" && <OrgDeleteSection />}
-      </div>
-      {membership && membership.role === "admin" && <OrgProductSelectSection />}
-    </>
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <OrgNameChangeSection />
+      <OrgIncidentContactsSection />
+      {membership && membership.role === "admin" && <OrgDeleteSection />}
+    </div>
   );
 };

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

@@ -1,11 +1,8 @@
 import { useState } from "react";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { Link, useSearch } from "@tanstack/react-router";
+import { useSearch } from "@tanstack/react-router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
@@ -14,6 +11,7 @@ import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 import { OrgSecurityTab } from "../OrgSecurityTab";
 import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
+import { ProjectTemplatesTab } from "../ProjectTemplatesTab";
 
 export const OrgTabGroup = () => {
   const search = useSearch({
@@ -33,60 +31,7 @@ export const OrgTabGroup = () => {
     {
       name: "Project Templates",
       key: "project-templates",
-      // scott: temporary, remove once users have adjusted
-      // eslint-disable-next-line react/no-unstable-nested-components
-      component: () => (
-        <div>
-          <NoticeBannerV2
-            className="mx-auto"
-            titleClassName="text-base"
-            title="Project Templates Relocated"
-          >
-            <p className="mt-1 text-mineshaft-300">
-              Project templates have been relocated and are now product specific:
-            </p>
-            <ul className="mb-1 flex gap-x-4 text-mineshaft-200">
-              {[
-                {
-                  type: ProjectType.SecretManager,
-                  label: "Secret Management",
-                  icon: "sliding-carousel"
-                },
-                {
-                  type: ProjectType.CertificateManager,
-                  label: "Certificate Management",
-                  icon: "note"
-                },
-                {
-                  type: ProjectType.KMS,
-                  label: "KMS",
-                  icon: "unlock"
-                },
-                {
-                  type: ProjectType.SSH,
-                  label: "SSH",
-                  icon: "verified"
-                }
-              ].map(({ label, type, icon }, index) => (
-                <li key={`project-template-${type}`}>
-                  <Link
-                    to={`/organization/${type}/settings`}
-                    className="mt-1 flex items-center gap-x-2 hover:text-mineshaft-100"
-                  >
-                    {index !== 0 && <span className="text-mineshaft-300">•</span>}
-                    <DotLottieReact
-                      src={`/lotties/${icon}.json`}
-                      loop
-                      className="mt-0.5 h-5 w-5"
-                    />{" "}
-                    <span className="underline underline-offset-2">{label}</span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </NoticeBannerV2>
-        </div>
-      )
+      component: ProjectTemplatesTab
     },
     { name: "KMIP", key: "kmip", component: KmipTab }
   ];

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

@@ -0,0 +1,9 @@
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
+import { ProjectTemplatesSection } from "./components";
+
+export const ProjectTemplatesTab = withPermission(() => <ProjectTemplatesSection />, {
+  action: OrgPermissionActions.Read,
+  subject: OrgPermissionSubjects.ProjectTemplates
+});

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/DeleteProjectTemplateModal.tsx

@@ -0,0 +1,49 @@
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal } from "@app/components/v2";
+import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
+
+type Props = {
+  template?: TProjectTemplate;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export const DeleteProjectTemplateModal = ({ isOpen, onOpenChange, template }: Props) => {
+  const deleteTemplate = useDeleteProjectTemplate();
+
+  if (!template) return null;
+
+  const { id: templateId, name } = template;
+
+  const handleDeleteProjectTemplate = async () => {
+    try {
+      await deleteTemplate.mutateAsync({
+        templateId
+      });
+
+      createNotification({
+        text: "Successfully removed project template",
+        type: "success"
+      });
+
+      onOpenChange(false);
+    } catch (err) {
+      console.error(err);
+
+      createNotification({
+        text: "Failed remove project template",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <DeleteActionModal
+      isOpen={isOpen}
+      onChange={onOpenChange}
+      title={`Are you sure you want to delete ${name}?`}
+      deleteKey="confirm"
+      onDeleteApproved={handleDeleteProjectTemplate}
+    />
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/EditProjectTemplateSection.tsx

@@ -0,0 +1,55 @@
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, EmptyState, Spinner } from "@app/components/v2";
+import {
+  InfisicalProjectTemplate,
+  TProjectTemplate,
+  useGetProjectTemplateById
+} from "@app/hooks/api/projectTemplates";
+
+import { EditProjectTemplate } from "./components";
+
+type Props = {
+  template: TProjectTemplate;
+  onBack: () => void;
+};
+
+export const EditProjectTemplateSection = ({ template, onBack }: Props) => {
+  const isInfisicalTemplate = Object.values(InfisicalProjectTemplate).includes(
+    template.name as InfisicalProjectTemplate
+  );
+
+  const { data: projectTemplate, isPending } = useGetProjectTemplateById(template.id, {
+    initialData: template,
+    enabled: !isInfisicalTemplate
+  });
+
+  return (
+    <div>
+      <Button
+        variant="link"
+        type="submit"
+        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+        onClick={onBack}
+        className="mb-4"
+      >
+        Back to Templates
+      </Button>
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {isPending ? (
+        <div className="flex h-[60vh] w-full items-center justify-center p-24">
+          <Spinner />
+        </div>
+      ) : projectTemplate ? (
+        <EditProjectTemplate
+          isInfisicalTemplate={isInfisicalTemplate}
+          projectTemplate={projectTemplate}
+          onBack={onBack}
+        />
+      ) : (
+        <EmptyState title="Error: Unable to find project template." className="py-12" />
+      )}
+    </div>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -0,0 +1,119 @@
+import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
+
+import { ProjectTemplateDetailsModal } from "../../ProjectTemplateDetailsModal";
+import { ProjectTemplateEnvironmentsForm } from "./ProjectTemplateEnvironmentsForm";
+import { ProjectTemplateRolesSection } from "./ProjectTemplateRolesSection";
+
+type Props = {
+  projectTemplate: TProjectTemplate;
+  onBack: () => void;
+  isInfisicalTemplate: boolean;
+};
+
+export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBack }: Props) => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeTemplate",
+    "editDetails"
+  ] as const);
+
+  const { id: templateId, name, description } = projectTemplate;
+
+  const deleteProjectTemplate = useDeleteProjectTemplate();
+
+  const handleRemoveTemplate = async () => {
+    try {
+      await deleteProjectTemplate.mutateAsync({
+        templateId
+      });
+      createNotification({
+        text: "Successfully removed project template",
+        type: "success"
+      });
+      onBack();
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to remove project template",
+        type: "error"
+      });
+    }
+    handlePopUpClose("removeTemplate");
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
+        <div className="flex-col">
+          <h3 className="text-xl font-semibold">{name}</h3>
+          <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
+        </div>
+        {!isInfisicalTemplate && (
+          <div className="flex gap-2">
+            <OrgPermissionCan
+              I={OrgPermissionActions.Edit}
+              a={OrgPermissionSubjects.ProjectTemplates}
+            >
+              {(isAllowed) => (
+                <Button
+                  isDisabled={!isAllowed}
+                  leftIcon={<FontAwesomeIcon icon={faPencil} />}
+                  size="xs"
+                  colorSchema="secondary"
+                  onClick={() => handlePopUpOpen("editDetails")}
+                >
+                  Edit Details
+                </Button>
+              )}
+            </OrgPermissionCan>
+            <OrgPermissionCan
+              I={OrgPermissionActions.Delete}
+              a={OrgPermissionSubjects.ProjectTemplates}
+            >
+              {(isAllowed) => (
+                <Button
+                  isDisabled={!isAllowed}
+                  onClick={() => {
+                    handlePopUpOpen("removeTemplate");
+                  }}
+                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                  size="xs"
+                  colorSchema="danger"
+                >
+                  Delete Template
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
+        )}
+      </div>
+      <ProjectTemplateEnvironmentsForm
+        isInfisicalTemplate={isInfisicalTemplate}
+        projectTemplate={projectTemplate}
+      />
+      <ProjectTemplateRolesSection
+        isInfisicalTemplate={isInfisicalTemplate}
+        projectTemplate={projectTemplate}
+      />
+      <ProjectTemplateDetailsModal
+        isOpen={popUp.editDetails.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
+        projectTemplate={projectTemplate}
+      />
+      <DeleteActionModal
+        isOpen={popUp.removeTemplate.isOpen}
+        title={`Are you sure you want to delete ${projectTemplate.name}?`}
+        deleteKey="confirm"
+        onChange={(isOpen) => handlePopUpToggle("removeTemplate", isOpen)}
+        onDeleteApproved={handleRemoveTemplate}
+      />
+    </>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -0,0 +1,193 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { faChevronLeft, faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { isCustomProjectRole } from "@app/helpers/roles";
+import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
+import { slugSchema } from "@app/lib/schemas";
+import { AddPoliciesButton } from "@app/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton";
+import { GeneralPermissionPolicies } from "@app/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies";
+import { PermissionEmptyState } from "@app/pages/project/RoleDetailsBySlugPage/components/PermissionEmptyState";
+import {
+  formRolePermission2API,
+  PROJECT_PERMISSION_OBJECT,
+  projectRoleFormSchema,
+  rolePermission2Form
+} from "@app/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils";
+import { renderConditionalComponents } from "@app/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection";
+
+type Props = {
+  projectTemplate: TProjectTemplate;
+  role?: TProjectTemplate["roles"][number];
+  onGoBack: () => void;
+  isDisabled?: boolean;
+};
+
+const formSchema = z.object({
+  slug: slugSchema(),
+  name: z.string().trim().min(1),
+  permissions: projectRoleFormSchema.shape.permissions
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+export const ProjectTemplateEditRoleForm = ({
+  onGoBack,
+  projectTemplate,
+  role,
+  isDisabled
+}: Props) => {
+  const formMethods = useForm<TFormSchema>({
+    values: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : undefined,
+    resolver: zodResolver(formSchema)
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isDirty, isSubmitting }
+  } = formMethods;
+
+  const updateProjectTemplate = useUpdateProjectTemplate();
+
+  const onSubmit = async (form: TFormSchema) => {
+    try {
+      await updateProjectTemplate.mutateAsync({
+        templateId: projectTemplate.id,
+        roles: [
+          ...projectTemplate.roles.filter(
+            (r) => r.slug !== role?.slug && isCustomProjectRole(r.slug) // filter out default roles as well
+          ),
+          {
+            ...form,
+            permissions: formRolePermission2API(form.permissions)
+          }
+        ]
+      });
+      onGoBack();
+      createNotification({
+        text: "Template roles successfully updated",
+        type: "success"
+      });
+    } catch (e: any) {
+      console.error(e);
+      createNotification({
+        text: "Failed to update template roles",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <FormProvider {...formMethods}>
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+            className="text-base font-semibold text-mineshaft-200"
+            variant="link"
+            onClick={onGoBack}
+          >
+            {isDisabled ? "Back" : "Cancel"}
+          </Button>
+          {!isDisabled && (
+            <div className="flex items-center space-x-4">
+              {isDirty && (
+                <Button
+                  className="mr-4 text-mineshaft-300"
+                  variant="link"
+                  isDisabled={isSubmitting}
+                  isLoading={isSubmitting}
+                  onClick={onGoBack}
+                >
+                  Discard
+                </Button>
+              )}
+              <div className="flex items-center">
+                <Button
+                  variant="outline_bg"
+                  type="submit"
+                  className={twMerge(
+                    "mr-4 h-10 border border-primary",
+                    isDirty && "bg-primary text-black"
+                  )}
+                  isDisabled={isSubmitting || !isDirty || isDisabled}
+                  isLoading={isSubmitting}
+                  leftIcon={<FontAwesomeIcon icon={faSave} />}
+                >
+                  Save
+                </Button>
+                <AddPoliciesButton isDisabled={isDisabled} />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
+          {isDisabled ? (
+            <div className="flex flex-col">
+              <span className="text-lg font-semibold">{role?.name}</span>
+              <span className="text-mineshaft-400">{role?.slug}</span>
+            </div>
+          ) : (
+            <div className="flex w-full gap-2">
+              <Controller
+                control={control}
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Name"
+                    className="mb-0 flex-1"
+                  >
+                    <Input {...field} autoFocus placeholder="Role name..." />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="slug"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Slug"
+                    className="mb-0 flex-1"
+                  >
+                    <Input {...field} placeholder="Role slug..." />
+                  </FormControl>
+                )}
+              />
+            </div>
+          )}
+        </div>
+        <div className="p-4">
+          <div className="mb-2 text-lg">Policies</div>
+          <PermissionEmptyState />
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
+              <GeneralPermissionPolicies
+                subject={subject}
+                actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                title={PROJECT_PERMISSION_OBJECT[subject].title}
+                key={`project-permission-${subject}`}
+                isDisabled={isDisabled}
+              >
+                {renderConditionalComponents(subject, isDisabled)}
+              </GeneralPermissionPolicies>
+            ))}
+          </div>
+        </div>
+      </FormProvider>
+    </form>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -0,0 +1,289 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faArrowDown, faArrowUp, faPlus, faSave, faTrash } 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 { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
+import { slugSchema } from "@app/lib/schemas";
+
+type Props = {
+  projectTemplate: TProjectTemplate;
+  isInfisicalTemplate: boolean;
+};
+
+const formSchema = z.object({
+  environments: z
+    .object({
+      name: z.string().trim().min(1),
+      slug: slugSchema({ min: 1, max: 64 })
+    })
+    .array()
+    .nullish()
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+export const ProjectTemplateEnvironmentsForm = ({
+  projectTemplate,
+  isInfisicalTemplate
+}: Props) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, errors },
+    reset
+  } = useForm<TFormSchema>({
+    defaultValues: {
+      environments: projectTemplate.environments
+    },
+    resolver: zodResolver(formSchema)
+  });
+
+  const { subscription } = useSubscription();
+
+  const {
+    fields: environments,
+    move,
+    remove,
+    append
+  } = useFieldArray({ control, name: "environments" });
+
+  const updateProjectTemplate = useUpdateProjectTemplate();
+
+  const onFormSubmit = async (form: TFormSchema) => {
+    try {
+      const { environments: updatedEnvs } = await updateProjectTemplate.mutateAsync({
+        environments: form.environments?.map((env, index) => ({
+          ...env,
+          position: index + 1
+        })),
+        templateId: projectTemplate.id
+      });
+
+      reset({ environments: updatedEnvs });
+
+      createNotification({
+        text: "Project template updated successfully",
+        type: "success"
+      });
+    } catch (e: any) {
+      console.error(e);
+      createNotification({
+        text: e.message ?? "Failed to update project template",
+        type: "error"
+      });
+    }
+  };
+
+  const isEnvironmentLimitExceeded =
+    Boolean(subscription.environmentLimit) && environments.length >= subscription.environmentLimit;
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <div>
+          <h2 className="text-lg font-semibold">Project Environments</h2>
+          {!isInfisicalTemplate && (
+            <p className="text-sm text-mineshaft-400">
+              Add, rename, remove and reorder environments for this project template
+            </p>
+          )}
+        </div>
+        {!isInfisicalTemplate && (
+          <OrgPermissionCan
+            I={OrgPermissionActions.Edit}
+            a={OrgPermissionSubjects.ProjectTemplates}
+          >
+            {(isAllowed) => (
+              <Button
+                type="submit"
+                colorSchema="primary"
+                className="ml-auto w-40"
+                variant={isDirty ? "solid" : "outline_bg"}
+                leftIcon={<FontAwesomeIcon icon={faSave} />}
+                isDisabled={!isAllowed || !isDirty}
+              >
+                {isDirty ? "Save" : "No"} Changes
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
+      </div>
+      {errors.environments && (
+        <span className="my-4 text-sm text-red">{errors.environments.message}</span>
+      )}
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Slug</Th>
+              {!isInfisicalTemplate && (
+                <Th>
+                  <div className="flex w-full justify-end normal-case">
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                      renderTooltip={isEnvironmentLimitExceeded ? true : undefined}
+                      allowedLabel={`Plan environment limit of ${subscription.environmentLimit} exceeded. Contact Infisical to increase limit.`}
+                    >
+                      {(isAllowed) => (
+                        <Button
+                          onClick={() => append({ name: "", slug: "" })}
+                          colorSchema="secondary"
+                          className="ml-auto"
+                          variant="solid"
+                          size="xs"
+                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                          isDisabled={!isAllowed || isEnvironmentLimitExceeded}
+                        >
+                          Add Environment
+                        </Button>
+                      )}
+                    </OrgPermissionCan>
+                  </div>
+                </Th>
+              )}
+            </Tr>
+          </THead>
+          <TBody>
+            {environments.map(({ id, name, slug }, pos) => (
+              <Tr key={id}>
+                <Td>
+                  {isInfisicalTemplate ? (
+                    name
+                  ) : (
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                    >
+                      {(isAllowed) => (
+                        <Controller
+                          control={control}
+                          name={`environments.${pos}.name`}
+                          render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                              isError={Boolean(error?.message)}
+                              errorText={error?.message}
+                              className="mb-0 flex-grow"
+                            >
+                              <Input isDisabled={!isAllowed} {...field} placeholder="Name..." />
+                            </FormControl>
+                          )}
+                        />
+                      )}
+                    </OrgPermissionCan>
+                  )}
+                </Td>
+                <Td>
+                  {isInfisicalTemplate ? (
+                    slug
+                  ) : (
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                    >
+                      {(isAllowed) => (
+                        <Controller
+                          control={control}
+                          name={`environments.${pos}.slug`}
+                          render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                              isError={Boolean(error?.message)}
+                              errorText={error?.message}
+                              className="mb-0 flex-grow"
+                            >
+                              <Input isDisabled={!isAllowed} {...field} placeholder="Slug..." />
+                            </FormControl>
+                          )}
+                        />
+                      )}
+                    </OrgPermissionCan>
+                  )}
+                </Td>
+                {!isInfisicalTemplate && (
+                  <Td className="flex items-center justify-end">
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          className={`mr-3 py-2 ${
+                            pos === environments.length - 1 ? "pointer-events-none opacity-50" : ""
+                          }`}
+                          onClick={() => move(pos, pos + 1)}
+                          colorSchema="primary"
+                          variant="plain"
+                          ariaLabel="Increase position"
+                          isDisabled={pos === environments.length - 1 || !isAllowed}
+                        >
+                          <FontAwesomeIcon icon={faArrowDown} />
+                        </IconButton>
+                      )}
+                    </OrgPermissionCan>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          className={`mr-3 py-2 ${
+                            pos === 0 ? "pointer-events-none opacity-50" : ""
+                          }`}
+                          onClick={() => move(pos, pos - 1)}
+                          colorSchema="primary"
+                          variant="plain"
+                          ariaLabel="Decrease position"
+                          isDisabled={pos === 0 || !isAllowed}
+                        >
+                          <FontAwesomeIcon icon={faArrowUp} />
+                        </IconButton>
+                      )}
+                    </OrgPermissionCan>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Edit}
+                      a={OrgPermissionSubjects.ProjectTemplates}
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          onClick={() => remove(pos)}
+                          colorSchema="danger"
+                          variant="plain"
+                          ariaLabel="Remove environment"
+                          isDisabled={!isAllowed}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      )}
+                    </OrgPermissionCan>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </form>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -0,0 +1,223 @@
+import { faPlus, faTrash, faUnlock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import { isCustomProjectRole } from "@app/helpers/roles";
+import { usePopUp } from "@app/hooks";
+import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
+import { TProjectRole } from "@app/hooks/api/roles/types";
+
+import { ProjectTemplateEditRoleForm } from "./ProjectTemplateEditRoleForm";
+
+type Props = {
+  projectTemplate: TProjectTemplate;
+  isInfisicalTemplate: boolean;
+};
+
+export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTemplate }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "removeRole",
+    "editRole"
+  ] as const);
+
+  const { permission } = useOrgPermission();
+
+  const { roles } = projectTemplate;
+
+  const updateProjectTemplate = useUpdateProjectTemplate();
+
+  const handleRemoveRole = async (slug: string) => {
+    try {
+      await updateProjectTemplate.mutateAsync({
+        templateId: projectTemplate.id,
+        roles: projectTemplate.roles.filter(
+          (role) => role.slug !== slug && isCustomProjectRole(role.slug) // filter out default roles as well
+        )
+      });
+
+      createNotification({
+        text: "Successfully removed role from template",
+        type: "success"
+      });
+      handlePopUpClose("removeRole");
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        text: "Error removing role from template",
+        type: "error"
+      });
+    }
+  };
+
+  const editRole = popUp?.editRole?.data as TProjectRole;
+  const roleToDelete = popUp?.removeRole?.data as TProjectRole;
+
+  return (
+    <div className="relative">
+      <AnimatePresence>
+        {popUp?.editRole.isOpen ? (
+          <motion.div
+            key="edit-role"
+            transition={{ duration: 0.3 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+            className="absolute min-h-[10rem] w-full"
+          >
+            <ProjectTemplateEditRoleForm
+              onGoBack={() => handlePopUpClose("editRole")}
+              projectTemplate={projectTemplate}
+              role={editRole}
+              isDisabled={
+                permission.cannot(
+                  OrgPermissionActions.Edit,
+                  OrgPermissionSubjects.ProjectTemplates
+                ) ||
+                (editRole && !isCustomProjectRole(editRole.slug))
+              }
+            />
+            <div className="h-4 w-full" />
+          </motion.div>
+        ) : (
+          <motion.div
+            key="role-list"
+            transition={{ duration: 0.3 }}
+            initial={{ opacity: 0, translateX: 0 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: -30 }}
+            className="absolute w-full"
+          >
+            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+                <div>
+                  <h2 className="text-lg font-semibold">Project Roles</h2>
+                  <p className="text-sm text-mineshaft-400">
+                    {isInfisicalTemplate
+                      ? "Click a role to view the associated permissions"
+                      : "Add, edit and remove roles for this project template"}
+                  </p>
+                </div>
+                {!isInfisicalTemplate && (
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Edit}
+                    a={OrgPermissionSubjects.ProjectTemplates}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        onClick={() => {
+                          handlePopUpOpen("editRole");
+                        }}
+                        colorSchema="primary"
+                        className="ml-auto"
+                        variant="outline_bg"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        isDisabled={!isAllowed}
+                      >
+                        Add Role
+                      </Button>
+                    )}
+                  </OrgPermissionCan>
+                )}
+              </div>
+              <div className="py-4">
+                <TableContainer>
+                  <Table>
+                    <THead>
+                      <Tr>
+                        <Th>Name</Th>
+                        <Th>Slug</Th>
+                        <Th className="w-5" />
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {roles.length ? (
+                        roles.map((role) => {
+                          return (
+                            <Tr
+                              key={role.slug}
+                              className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                              role="button"
+                              tabIndex={0}
+                              onKeyDown={(evt) => {
+                                if (evt.key === "Enter") {
+                                  handlePopUpOpen("editRole", role);
+                                }
+                              }}
+                              onClick={() => handlePopUpOpen("editRole", role)}
+                            >
+                              <Td>{role.name}</Td>
+                              <Td>{role.slug}</Td>
+                              <Td>
+                                {isCustomProjectRole(role.slug) && (
+                                  <div className="flex space-x-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                                    <OrgPermissionCan
+                                      I={OrgPermissionActions.Edit}
+                                      a={OrgPermissionSubjects.ProjectTemplates}
+                                      renderTooltip
+                                      allowedLabel="Remove Role"
+                                    >
+                                      {(isAllowed) => (
+                                        <IconButton
+                                          colorSchema="danger"
+                                          ariaLabel="delete-icon"
+                                          variant="plain"
+                                          className="group relative"
+                                          isDisabled={!isAllowed}
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            handlePopUpOpen("removeRole", role);
+                                          }}
+                                        >
+                                          <FontAwesomeIcon icon={faTrash} />
+                                        </IconButton>
+                                      )}
+                                    </OrgPermissionCan>
+                                  </div>
+                                )}
+                              </Td>
+                            </Tr>
+                          );
+                        })
+                      ) : (
+                        <Tr>
+                          <Td colSpan={2}>
+                            <EmptyState title="No roles assigned to template" icon={faUnlock} />
+                          </Td>
+                        </Tr>
+                      )}
+                    </TBody>
+                  </Table>
+                </TableContainer>
+              </div>
+              <DeleteActionModal
+                isOpen={popUp.removeRole.isOpen}
+                deleteKey="remove"
+                title={`Are you sure you want to remove the role ${roleToDelete?.slug}?`}
+                onChange={(isOpen) => handlePopUpToggle("removeRole", isOpen)}
+                onDeleteApproved={() => handleRemoveRole(roleToDelete?.slug)}
+              />
+            </div>
+            <div className="h-4 w-full" />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/index.tsx

@@ -0,0 +1 @@
+export * from "./EditProjectTemplate";

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/index.tsx

@@ -0,0 +1 @@
+export * from "./EditProjectTemplateSection";