Merge branch 'main' into feat/zabbixSyncIntegration

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/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/SignUpInvitePage/SignUpInvitePage.tsx

@@ -28,7 +28,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();
@@ -204,7 +203,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

@@ -18,7 +18,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();
@@ -207,7 +206,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/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/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -56,12 +56,12 @@ export const OrgGroupsSection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handleAddGroupModal()}

frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -2,14 +2,17 @@ import { useMemo } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faEllipsis,
+  faCopy,
+  faEdit,
+  faEllipsisV,
   faMagnifyingGlass,
   faSearch,
+  faTrash,
+  faUserGroup,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -261,7 +264,8 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               <Select
                                 value={role === "custom" ? (customRole?.slug as string) : role}
                                 isDisabled={!isAllowed}
-                                className="w-48 bg-mineshaft-600"
+                                className="h-8 w-48 bg-mineshaft-700"
+                                position="popper"
                                 dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                                 onValueChange={(selectedRole) =>
                                   handleChangeRole({
@@ -282,13 +286,19 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                       </Td>
                       <Td>
                         <DropdownMenu>
-                          <DropdownMenuTrigger asChild className="rounded-lg">
-                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                            </div>
+                          <DropdownMenuTrigger asChild>
+                            <IconButton
+                              ariaLabel="Options"
+                              className="w-6"
+                              colorSchema="secondary"
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEllipsisV} />
+                            </IconButton>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuContent sideOffset={2} align="end">
                             <DropdownMenuItem
+                              icon={<FontAwesomeIcon icon={faCopy} />}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 createNotification({
@@ -306,10 +316,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faEdit} />}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handlePopUpOpen("group", {
@@ -320,7 +327,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       customRole
                                     });
                                   }}
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Edit Group
                                 </DropdownMenuItem>
@@ -332,10 +339,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faUserGroup} />}
                                   onClick={() =>
                                     navigate({
                                       to: "/organization/groups/$groupId",
@@ -344,7 +348,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       }
                                     })
                                   }
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Manage Members
                                 </DropdownMenuItem>
@@ -356,11 +360,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    isAllowed
-                                      ? "hover:!bg-red-500 hover:!text-white"
-                                      : "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handlePopUpOpen("deleteGroup", {
@@ -368,7 +368,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       name
                                     });
                                   }}
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Delete Group
                                 </DropdownMenuItem>

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -17,6 +17,7 @@ import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
 import { IdentityLdapAuthForm } from "./IdentityLdapAuthForm";
 import { IdentityOciAuthForm } from "./IdentityOciAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
+import { IdentityTlsCertAuthForm } from "./IdentityTlsCertAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
@@ -52,6 +53,7 @@ const identityAuthMethods = [
   { label: "OCI Auth", value: IdentityAuthMethod.OCI_AUTH },
   { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH },
   { label: "LDAP Auth", value: IdentityAuthMethod.LDAP_AUTH },
+  { label: "TLS Certificate Auth", value: IdentityAuthMethod.TLS_CERT_AUTH },
   {
     label: "JWT Auth",
     value: IdentityAuthMethod.JWT_AUTH
@@ -123,6 +125,15 @@ export const IdentityAuthMethodModalContent = ({
         />
       )
     },
+    [IdentityAuthMethod.TLS_CERT_AUTH]: {
+      render: () => (
+        <IdentityTlsCertAuthForm
+          identityId={identityAuthMethodData.identityId}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
 
     [IdentityAuthMethod.OIDC_AUTH]: {
       render: () => (

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -1,4 +1,4 @@
-import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -71,20 +71,22 @@ export const IdentitySection = withPermission(
 
     return (
       <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex justify-between">
-          <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-          <div className="flex w-full justify-end pr-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-1">
+            <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
             <a
+              href="https://infisical.com/docs/documentation/platform/identities/overview"
               target="_blank"
               rel="noopener noreferrer"
-              href="https://infisical.com/docs/documentation/platform/identities/overview"
-              className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white"
             >
-              Documentation{" "}
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.06rem] ml-1 text-xs"
-              />
+              <div className="ml-1 mt-[0.16rem] 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>
           <OrgPermissionCan
@@ -93,7 +95,7 @@ export const IdentitySection = withPermission(
           >
             {(isAllowed) => (
               <Button
-                colorSchema="primary"
+                colorSchema="secondary"
                 type="submit"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => {

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,12 +1,15 @@
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useCallback, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faEllipsis,
+  faCheckCircle,
+  faChevronRight,
+  faEdit,
+  faEllipsisV,
   faFilter,
   faMagnifyingGlass,
-  faServer
+  faServer,
+  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
@@ -15,19 +18,18 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger,
   EmptyState,
-  FormControl,
   IconButton,
   Input,
   Pagination,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
   Select,
   SelectItem,
   Spinner,
@@ -38,7 +40,6 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -63,6 +64,10 @@ type Props = {
   ) => void;
 };
 
+type Filter = {
+  roles: string[];
+};
+
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -90,7 +95,9 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     setUserTablePreference("identityTable", PreferenceKey.PerPage, newPerPage);
   };
 
-  const [filteredRoles, setFilteredRoles] = useState<string[]>([]);
+  const [filter, setFilter] = useState<Filter>({
+    roles: []
+  });
 
   const organizationId = currentOrg?.id || "";
 
@@ -103,7 +110,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     orderBy,
     search: {
       name: debouncedSearch ? { $contains: debouncedSearch } : undefined,
-      role: filteredRoles?.length ? { $in: filteredRoles } : undefined
+      role: filter.roles?.length ? { $in: filter.roles } : undefined
     }
   });
 
@@ -113,7 +120,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     offset,
     setPage
   });
-  const filterForm = useForm<{ roles: string }>();
 
   const { data: roles } = useGetOrgRoles(organizationId);
 
@@ -153,79 +159,80 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     }
   };
 
+  const handleRoleToggle = useCallback(
+    (roleSlug: string) =>
+      setFilter((state) => {
+        const currentRoles = state.roles || [];
+
+        if (currentRoles.includes(roleSlug)) {
+          return { ...state, roles: currentRoles.filter((role) => role !== roleSlug) };
+        }
+        return { ...state, roles: [...currentRoles, roleSlug] };
+      }),
+    []
+  );
+
+  const isTableFiltered = Boolean(filter.roles.length);
+
   return (
     <div>
       <div className="mb-4 flex items-center space-x-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Identities"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownSubMenu>
+              <DropdownSubMenuTrigger
+                iconPos="right"
+                icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+              >
+                Roles
+              </DropdownSubMenuTrigger>
+              <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  Apply Roles to Filter Identities
+                </DropdownMenuLabel>
+                {roles?.map(({ id, slug, name }) => (
+                  <DropdownMenuItem
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      handleRoleToggle(slug);
+                    }}
+                    key={id}
+                    icon={filter.roles.includes(slug) && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className="mr-2 h-2 w-2 rounded-full"
+                        style={{ background: "#bec2c8" }}
+                      />
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownSubMenuContent>
+            </DropdownSubMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
         <Input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
           placeholder="Search identities by name..."
         />
-        <div>
-          <Popover>
-            <PopoverTrigger>
-              <IconButton
-                ariaLabel="filter"
-                variant="outline_bg"
-                className={filteredRoles?.length ? "border-primary" : ""}
-              >
-                <Tooltip content="Advance Filter">
-                  <FontAwesomeIcon icon={faFilter} />
-                </Tooltip>
-              </IconButton>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl">
-              <div className="mb-4 border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
-                Advance Filter
-              </div>
-              <form
-                onSubmit={filterForm.handleSubmit((el) => {
-                  setFilteredRoles(el.roles?.split(",")?.filter(Boolean) || []);
-                })}
-              >
-                <Controller
-                  control={filterForm.control}
-                  name="roles"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Roles"
-                      helperText="Eg: admin,viewer"
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-                <div className="flex items-center space-x-2">
-                  <Button
-                    type="submit"
-                    size="xs"
-                    colorSchema="primary"
-                    variant="outline_bg"
-                    className="mt-4"
-                  >
-                    Apply Filter
-                  </Button>
-                  {Boolean(filteredRoles.length) && (
-                    <Button
-                      size="xs"
-                      variant="link"
-                      className="ml-4 mt-4"
-                      onClick={() => {
-                        filterForm.reset({ roles: "" });
-                        setFilteredRoles([]);
-                      }}
-                    >
-                      Clear
-                    </Button>
-                  )}
-                </div>
-              </form>
-            </PopoverContent>
-          </Popover>
-        </div>
       </div>
       <TableContainer>
         <Table>
@@ -251,8 +258,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                   </IconButton>
                 </div>
               </Th>
-              <Th>Role</Th>
-              {/* <Th>
+              <Th>
                 <div className="flex items-center">
                   Role
                   <IconButton
@@ -271,7 +277,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     />
                   </IconButton>
                 </div>
-              </Th> */}
+              </Th>
               <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
             </Tr>
           </THead>
@@ -303,7 +309,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             <Select
                               value={role === "custom" ? (customRole?.slug as string) : role}
                               isDisabled={!isAllowed}
-                              className="w-48 bg-mineshaft-600"
+                              className="h-8 w-48 bg-mineshaft-700"
+                              position="popper"
                               dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                               onValueChange={(selectedRole) =>
                                 handleChangeRole({
@@ -324,21 +331,24 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     </Td>
                     <Td>
                       <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="flex justify-center hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="Options"
+                            className="w-6"
+                            colorSchema="secondary"
+                            variant="plain"
+                          >
+                            <FontAwesomeIcon icon={faEllipsisV} />
+                          </IconButton>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="mt-3 p-1">
+                        <DropdownMenuContent sideOffset={2} align="end">
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
+                                icon={<FontAwesomeIcon icon={faEdit} />}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   navigate({
@@ -348,7 +358,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                                     }
                                   });
                                 }}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
                               >
                                 Edit Identity
                               </DropdownMenuItem>
@@ -360,11 +370,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   handlePopUpOpen("deleteIdentity", {
@@ -372,7 +377,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                                     name
                                   });
                                 }}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
                               >
                                 Delete Identity
                               </DropdownMenuItem>
@@ -398,7 +404,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
         {!isPending && data && data?.identities.length === 0 && (
           <EmptyState
             title={
-              debouncedSearch.trim().length > 0 || filteredRoles?.length > 0
+              debouncedSearch.trim().length > 0 || filter.roles?.length > 0
                 ? "No identities match search filter"
                 : "No identities have been created in this organization"
             }

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTlsCertAuthForm.tsx

@@ -0,0 +1,358 @@
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faXmark } 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,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityTlsCertAuth,
+  useGetIdentityTlsCertAuth,
+  useUpdateIdentityTlsCertAuth
+} from "@app/hooks/api";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityFormTab } from "./types";
+
+const schema = z.object({
+  allowedCommonNames: z.string().optional(),
+  caCertificate: z.string().min(1),
+  accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token TTL cannot be greater than 315360000"
+  }),
+  accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token Max TTL cannot be greater than 315360000"
+  }),
+  accessTokenNumUsesLimit: z.string(),
+  accessTokenTrustedIps: z
+    .array(
+      z.object({
+        ipAddress: z.string().max(50)
+      })
+    )
+    .min(1)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityId?: string;
+  isUpdate?: boolean;
+};
+
+export const IdentityTlsCertAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityId,
+  isUpdate
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityTlsCertAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityTlsCertAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
+
+  const { data } = useGetIdentityTlsCertAuth(identityId ?? "", {
+    enabled: isUpdate
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      caCertificate: "",
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        caCertificate: data.caCertificate,
+        allowedCommonNames: data.allowedCommonNames || undefined,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        caCertificate: "",
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    caCertificate,
+    allowedCommonNames,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityId) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          caCertificate,
+          allowedCommonNames: allowedCommonNames || null,
+          identityId,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId,
+          caCertificate,
+          allowedCommonNames: allowedCommonNames || undefined,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch {
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
+        <TabList>
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
+        </TabList>
+        <TabPanel value={IdentityFormTab.Configuration}>
+          <Controller
+            control={control}
+            name="caCertificate"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                tooltipText="A PEM-encoded CA certificate. This will be used to validate client certificate."
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedCommonNames"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Common Names"
+                isError={Boolean(error)}
+                isOptional
+                errorText={error?.message}
+                tooltipText="Comma separated common names allowed to authenticate against the identity. Leave empty to allow any certificate."
+              >
+                <Input {...field} placeholder="" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                tooltipText="The lifetime for an access token in seconds. This value will be referenced at renewal time."
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
+
+                          handlePopUpOpen("upgradePlan");
+                        }}
+                        placeholder="123.456.789.0"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  if (subscription?.ipAllowlisting) {
+                    removeAccessTokenTrustedIp(index);
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {isUpdate ? "Update" : "Add"}
+        </Button>
+
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -115,12 +115,12 @@ export const OrgMembersSection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Users</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handleAddMemberModal()}

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -4,11 +4,14 @@ import {
   faArrowUp,
   faCheckCircle,
   faChevronRight,
-  faEllipsis,
+  faEdit,
+  faEllipsisV,
   faFilter,
   faMagnifyingGlass,
   faSearch,
-  faUsers
+  faUsers,
+  faUserSlash,
+  faUserXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
@@ -79,7 +82,8 @@ type Props = {
 
 enum OrgMembersOrderBy {
   Name = "firstName",
-  Email = "email"
+  Email = "email",
+  Role = "role"
 }
 
 type Filter = {
@@ -99,8 +103,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
   const { data: serverDetails } = useFetchServerStatus();
   const { data: members = [], isPending: isMembersLoading } = useGetOrgUsers(orgId);
 
-  const { mutateAsync: resendOrgMemberInvitation } = useResendOrgMemberInvitation();
+  const { mutateAsync: resendOrgMemberInvitation, isPending: isResendInvitePending } =
+    useResendOrgMemberInvitation();
   const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
+  const [resendInviteId, setResendInviteId] = useState<string | null>(null);
 
   const onRoleChange = async (membershipId: string, role: string) => {
     if (!currentOrg?.id) return;
@@ -136,6 +142,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
   };
 
   const onResendInvite = async (membershipId: string) => {
+    setResendInviteId(membershipId);
     try {
       const signupToken = await resendOrgMemberInvitation({
         membershipId
@@ -156,6 +163,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
         text: "Failed to resend org invitation",
         type: "error"
       });
+    } finally {
+      setResendInviteId(null);
     }
   };
 
@@ -229,6 +238,16 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
               valueOne = memberOne.user.email || memberOne.inviteEmail;
               valueTwo = memberTwo.user.email || memberTwo.inviteEmail;
               break;
+            case OrgMembersOrderBy.Role:
+              valueOne =
+                memberOne.role === "custom"
+                  ? findRoleFromId(memberOne.roleId)!.slug
+                  : memberOne.role;
+              valueTwo =
+                memberTwo.role === "custom"
+                  ? findRoleFromId(memberTwo.roleId)!.slug
+                  : memberTwo.role;
+              break;
             case OrgMembersOrderBy.Name:
             default:
               valueOne = memberOne.user.firstName;
@@ -284,7 +303,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -378,7 +397,26 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                   </IconButton>
                 </div>
               </Th>
-              <Th>Role</Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Role
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Role ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgMembersOrderBy.Role)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgMembersOrderBy.Role
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
               <Th className="w-5" />
             </Tr>
           </THead>
@@ -398,7 +436,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                     isActive
                   }) => {
                     const name =
-                      u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : "-";
+                      u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : null;
                     const email = u?.email || inviteEmail;
                     const username = u?.username ?? inviteEmail ?? "-";
                     return (
@@ -415,7 +453,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                         }
                       >
                         <Td className={isActive ? "" : "text-mineshaft-400"}>
-                          {name}
+                          {name ?? <span className="text-mineshaft-400">Not Set</span>}
                           {u.superAdmin && (
                             <Badge variant="primary" className="ml-2">
                               Server Admin
@@ -429,79 +467,77 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                             a={OrgPermissionSubjects.Member}
                           >
                             {(isAllowed) => (
-                              <>
-                                {!isActive && (
-                                  <Button
-                                    isDisabled
-                                    className="w-40"
-                                    colorSchema="primary"
-                                    variant="outline_bg"
-                                    onClick={() => {}}
-                                  >
-                                    Suspended
-                                  </Button>
-                                )}
-                                {isActive && status === "accepted" && (
-                                  <Select
-                                    value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
-                                    isDisabled={userId === u?.id || !isAllowed}
-                                    className="w-48 bg-mineshaft-600"
-                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                    onValueChange={(selectedRole) =>
-                                      onRoleChange(orgMembershipId, selectedRole)
-                                    }
-                                  >
-                                    {(roles || [])
-                                      .filter(({ slug }) =>
-                                        slug === "owner" ? isIamOwner || role === "owner" : true
-                                      )
-                                      .map(({ slug, name: roleName }) => (
-                                        <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                          {roleName}
-                                        </SelectItem>
-                                      ))}
-                                  </Select>
-                                )}
-                                {isActive &&
-                                  (status === "invited" || status === "verified") &&
-                                  email &&
-                                  serverDetails?.emailConfigured && (
+                              <Select
+                                value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
+                                isDisabled={userId === u?.id || !isAllowed}
+                                className="h-8 w-48 bg-mineshaft-700"
+                                position="popper"
+                                dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                onValueChange={(selectedRole) =>
+                                  onRoleChange(orgMembershipId, selectedRole)
+                                }
+                              >
+                                {(roles || [])
+                                  .filter(({ slug }) =>
+                                    slug === "owner" ? isIamOwner || role === "owner" : true
+                                  )
+                                  .map(({ slug, name: roleName }) => (
+                                    <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                      {roleName}
+                                    </SelectItem>
+                                  ))}
+                              </Select>
+                            )}
+                          </OrgPermissionCan>
+                        </Td>
+                        <Td>
+                          <div className="flex items-center justify-end gap-6">
+                            {isActive &&
+                              (status === "invited" || status === "verified") &&
+                              email &&
+                              serverDetails?.emailConfigured && (
+                                <OrgPermissionCan
+                                  I={OrgPermissionActions.Edit}
+                                  a={OrgPermissionSubjects.Member}
+                                >
+                                  {(isAllowed) => (
                                     <Button
-                                      isDisabled={!isAllowed}
-                                      className="w-48"
+                                      isDisabled={!isAllowed || isResendInvitePending}
+                                      className="h-8 border-mineshaft-600 bg-mineshaft-700 font-normal"
                                       colorSchema="primary"
                                       variant="outline_bg"
+                                      isLoading={
+                                        isResendInvitePending && resendInviteId === orgMembershipId
+                                      }
                                       onClick={(e) => {
                                         onResendInvite(orgMembershipId);
                                         e.stopPropagation();
                                       }}
                                     >
-                                      Resend invite
+                                      Resend Invite
                                     </Button>
                                   )}
-                              </>
-                            )}
-                          </OrgPermissionCan>
-                        </Td>
-                        <Td>
-                          {userId !== u?.id && (
+                                </OrgPermissionCan>
+                              )}
                             <DropdownMenu>
-                              <DropdownMenuTrigger asChild className="rounded-lg">
-                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                                </div>
+                              <DropdownMenuTrigger asChild>
+                                <IconButton
+                                  ariaLabel="Options"
+                                  colorSchema="secondary"
+                                  className={twMerge("w-6", userId === u?.id && "opacity-50")}
+                                  variant="plain"
+                                  isDisabled={userId === u?.id}
+                                >
+                                  <FontAwesomeIcon icon={faEllipsisV} />
+                                </IconButton>
                               </DropdownMenuTrigger>
-                              <DropdownMenuContent align="start" className="p-1">
+                              <DropdownMenuContent sideOffset={2} align="end">
                                 <OrgPermissionCan
                                   I={OrgPermissionActions.Edit}
                                   a={OrgPermissionSubjects.Member}
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={twMerge(
-                                        !isAllowed &&
-                                          "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         navigate({
@@ -511,7 +547,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           }
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faEdit} />}
                                     >
                                       Edit User
                                     </DropdownMenuItem>
@@ -523,15 +560,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={
-                                        isActive
-                                          ? twMerge(
-                                              isAllowed
-                                                ? "hover:!bg-red-500 hover:!text-white"
-                                                : "pointer-events-none cursor-not-allowed opacity-50"
-                                            )
-                                          : ""
-                                      }
+                                      icon={<FontAwesomeIcon icon={faUserSlash} />}
                                       onClick={async (e) => {
                                         e.stopPropagation();
 
@@ -560,7 +589,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           username
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
                                     >
                                       {`${isActive ? "Deactivate" : "Activate"} User`}
                                     </DropdownMenuItem>
@@ -572,11 +601,6 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={twMerge(
-                                        isAllowed
-                                          ? "hover:!bg-red-500 hover:!text-white"
-                                          : "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
                                       onClick={(e) => {
                                         e.stopPropagation();
 
@@ -593,7 +617,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           username
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faUserXmark} />}
                                     >
                                       Remove User
                                     </DropdownMenuItem>
@@ -601,7 +626,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 </OrgPermissionCan>
                               </DropdownMenuContent>
                             </DropdownMenu>
-                          )}
+                          </div>
                         </Td>
                       </Tr>
                     );

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -6,10 +6,10 @@ export const OrgRoleTabSection = () => {
   return (
     <motion.div
       key="role-list"
-      transition={{ duration: 0.1 }}
-      initial={{ opacity: 0, translateX: -30 }}
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
       animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: -30 }}
+      exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgRoleTable />
     </motion.div>

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -1,4 +1,17 @@
-import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faCopy,
+  faEdit,
+  faEllipsisV,
+  faEye,
+  faIdBadge,
+  faMagnifyingGlass,
+  faPlus,
+  faSearch,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
@@ -14,6 +27,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -30,13 +47,25 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
-import { isCustomOrgRole } from "@app/helpers/roles";
-import { usePopUp } from "@app/hooks";
+import { isCustomOrgRole, isCustomProjectRole } from "@app/helpers/roles";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { TOrgRole } from "@app/hooks/api/roles/types";
 import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { RoleModal } from "@app/pages/organization/RoleByIDPage/components/RoleModal";
 
+enum RolesOrderBy {
+  Name = "name",
+  Slug = "slug",
+  Type = "type"
+}
+
 export const OrgRoleTable = () => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -93,14 +122,89 @@ export const OrgRoleTable = () => {
     }
   };
 
+  const {
+    orderDirection,
+    toggleOrderDirection,
+    orderBy,
+    setOrderDirection,
+    setOrderBy,
+    search,
+    setSearch,
+    page,
+    perPage,
+    setPerPage,
+    setPage,
+    offset
+  } = usePagination<RolesOrderBy>(RolesOrderBy.Type, {
+    initPerPage: getUserTablePreference("orgRolesTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("orgRolesTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const filteredRoles = useMemo(
+    () =>
+      roles
+        ?.filter((role) => {
+          const { slug, name } = role;
+
+          const searchValue = search.trim().toLowerCase();
+
+          return (
+            name.toLowerCase().includes(searchValue) || slug.toLowerCase().includes(searchValue)
+          );
+        })
+        .sort((a, b) => {
+          const [roleOne, roleTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          switch (orderBy) {
+            case RolesOrderBy.Slug:
+              return roleOne.slug.toLowerCase().localeCompare(roleTwo.slug.toLowerCase());
+            case RolesOrderBy.Type: {
+              const roleOneValue = isCustomOrgRole(roleOne.slug) ? -1 : 1;
+              const roleTwoValue = isCustomOrgRole(roleTwo.slug) ? -1 : 1;
+
+              return roleTwoValue - roleOneValue;
+            }
+            case RolesOrderBy.Name:
+            default:
+              return roleOne.name.toLowerCase().localeCompare(roleTwo.name.toLowerCase());
+          }
+        }) ?? [],
+    [roles, orderDirection, search, orderBy]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredRoles.length,
+    offset,
+    setPage
+  });
+
+  const handleSort = (column: RolesOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  const getClassName = (col: RolesOrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+  const getColSortIcon = (col: RolesOrderBy) =>
+    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Organization Roles</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => {
@@ -113,18 +217,63 @@ export const OrgRoleTable = () => {
           )}
         </OrgPermissionCan>
       </div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search roles..."
+        className="flex-1"
+        containerClassName="mb-4"
+      />
       <TableContainer>
         <Table>
           <THead>
             <Tr>
-              <Th>Name</Th>
-              <Th>Slug</Th>
+              <Th>
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Name)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Name)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Slug
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Slug)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Slug)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Slug)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Type
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Type)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Type)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Type)} />
+                  </IconButton>
+                </div>
+              </Th>
               <Th aria-label="actions" className="w-5" />
             </Tr>
           </THead>
           <TBody>
-            {isRolesLoading && <TableSkeleton columns={3} innerKey="org-roles" />}
-            {roles?.map((role) => {
+            {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
+            {filteredRoles?.slice(offset, perPage * page).map((role) => {
               const { id, name, slug } = role;
               const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
               const isDefaultOrgRole = isCustomOrgRole(slug)
@@ -162,23 +311,30 @@ export const OrgRoleTable = () => {
                   <Td className="max-w-md overflow-hidden text-ellipsis whitespace-nowrap">
                     {slug}
                   </Td>
+                  <Td>
+                    <Badge className="w-min whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
+                      {isCustomProjectRole(slug) ? "Custom" : "Default"}
+                    </Badge>
+                  </Td>
                   <Td>
                     <DropdownMenu>
-                      <DropdownMenuTrigger asChild className="rounded-lg">
-                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                        </div>
+                      <DropdownMenuTrigger asChild>
+                        <IconButton
+                          ariaLabel="Options"
+                          colorSchema="secondary"
+                          className="w-6"
+                          variant="plain"
+                        >
+                          <FontAwesomeIcon icon={faEllipsisV} />
+                        </IconButton>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="p-1">
+                      <DropdownMenuContent className="min-w-[12rem]" sideOffset={2} align="end">
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}
                           a={OrgPermissionSubjects.Role}
                         >
                           {(isAllowed) => (
                             <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 navigate({
@@ -188,7 +344,8 @@ export const OrgRoleTable = () => {
                                   }
                                 });
                               }}
-                              disabled={!isAllowed}
+                              isDisabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={isNonMutatable ? faEye : faEdit} />}
                             >
                               {`${isNonMutatable ? "View" : "Edit"} Role`}
                             </DropdownMenuItem>
@@ -200,14 +357,12 @@ export const OrgRoleTable = () => {
                         >
                           {(isAllowed) => (
                             <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handlePopUpOpen("duplicateRole", role);
                               }}
-                              disabled={!isAllowed}
+                              isDisabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faCopy} />}
                             >
                               Duplicate Role
                             </DropdownMenuItem>
@@ -220,14 +375,12 @@ export const OrgRoleTable = () => {
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   handleSetRoleAsDefault(slug);
                                 }}
+                                icon={<FontAwesomeIcon icon={faIdBadge} />}
                               >
                                 Set as Default Role
                               </DropdownMenuItem>
@@ -250,16 +403,12 @@ export const OrgRoleTable = () => {
                               >
                                 {(isAllowed) => (
                                   <DropdownMenuItem
-                                    className={twMerge(
-                                      isAllowed && !isDefaultOrgRole
-                                        ? "hover:!bg-red-500 hover:!text-white"
-                                        : "pointer-events-none cursor-not-allowed opacity-50"
-                                    )}
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       handlePopUpOpen("deleteRole", role);
                                     }}
-                                    disabled={!isAllowed || isDefaultOrgRole}
+                                    icon={<FontAwesomeIcon icon={faTrash} />}
+                                    isDisabled={!isAllowed || isDefaultOrgRole}
                                   >
                                     Delete Role
                                   </DropdownMenuItem>
@@ -276,6 +425,25 @@ export const OrgRoleTable = () => {
             })}
           </TBody>
         </Table>
+        {Boolean(filteredRoles?.length) && (
+          <Pagination
+            count={filteredRoles!.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!filteredRoles?.length && !isRolesLoading && (
+          <EmptyState
+            title={
+              roles?.length
+                ? "No roles match search..."
+                : "This organization does not have any roles"
+            }
+            icon={roles?.length ? faSearch : undefined}
+          />
+        )}
       </TableContainer>
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal

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/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/LogsFilter.tsx

@@ -418,10 +418,10 @@ export const LogsFilter = ({
                               onChange(e);
                             }}
                             placeholder="All projects"
-                            options={workspacesInOrg.map(({ name, id, type }) => ({
+                            options={workspacesInOrg.map(({ name, id, defaultProduct }) => ({
                               name,
                               id,
-                              type
+                              type: defaultProduct
                             }))}
                             getOptionValue={(option) => option.id}
                             getOptionLabel={(option) => option.name}

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/components/ViewIdentityAuthModal/ViewIdentityAuthModal.tsx

@@ -15,6 +15,7 @@ import {
   useDeleteIdentityLdapAuth,
   useDeleteIdentityOciAuth,
   useDeleteIdentityOidcAuth,
+  useDeleteIdentityTlsCertAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
 } from "@app/hooks/api";
@@ -29,6 +30,7 @@ import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthC
 import { ViewIdentityLdapAuthContent } from "./ViewIdentityLdapAuthContent";
 import { ViewIdentityOciAuthContent } from "./ViewIdentityOciAuthContent";
 import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
+import { ViewIdentityTlsCertAuthContent } from "./ViewIdentityTlsCertAuthContent";
 import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
 import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
 
@@ -63,6 +65,7 @@ export const Content = ({
   const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
   const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
   const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
+  const { mutateAsync: revokeTlsCertAuth } = useDeleteIdentityTlsCertAuth();
   const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeAliCloudAuth } = useDeleteIdentityAliCloudAuth();
@@ -93,6 +96,10 @@ export const Content = ({
       revokeMethod = revokeGcpAuth;
       Component = ViewIdentityGcpAuthContent;
       break;
+    case IdentityAuthMethod.TLS_CERT_AUTH:
+      revokeMethod = revokeTlsCertAuth;
+      Component = ViewIdentityTlsCertAuthContent;
+      break;
     case IdentityAuthMethod.AWS_AUTH:
       revokeMethod = revokeAwsAuth;
       Component = ViewIdentityAwsAuthContent;

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx

@@ -0,0 +1,88 @@
+import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { useGetIdentityTlsCertAuth } from "@app/hooks/api";
+import { IdentityTlsCertAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTlsCertAuthForm";
+
+import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
+import { ViewAuthMethodProps } from "./types";
+import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
+
+export const ViewIdentityTlsCertAuthContent = ({
+  identityId,
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
+}: ViewAuthMethodProps) => {
+  const { data, isPending } = useGetIdentityTlsCertAuth(identityId);
+
+  if (isPending) {
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Spinner className="text-mineshaft-400" />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <EmptyState
+        icon={faBan}
+        title="Could not find TLS Certificate Auth associated with this Identity."
+      />
+    );
+  }
+
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityTlsCertAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
+  return (
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
+        <Tooltip
+          side="right"
+          className="max-w-xl p-2"
+          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCertificate}</p>}
+        >
+          <div className="w-min">
+            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+              <FontAwesomeIcon icon={faEye} />
+              <span>Reveal</span>
+            </Badge>
+          </div>
+        </Tooltip>
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Common Names">
+        {data.allowedCommonNames
+          ?.split(",")
+          .map((cn) => cn.trim())
+          .join(", ")}
+      </IdentityAuthFieldDisplay>
+    </ViewIdentityContentWrapper>
+  );
+};

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";

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

@@ -0,0 +1,144 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  TextArea
+} from "@app/components/v2";
+import {
+  TProjectTemplate,
+  useCreateProjectTemplate,
+  useUpdateProjectTemplate
+} from "@app/hooks/api/projectTemplates";
+import { slugSchema } from "@app/lib/schemas";
+
+const formSchema = z.object({
+  name: slugSchema({ min: 1, max: 64, field: "Name" }),
+  description: z.string().max(500).optional()
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onComplete?: (template: TProjectTemplate) => void;
+  projectTemplate?: TProjectTemplate;
+};
+
+type FormProps = {
+  projectTemplate?: TProjectTemplate;
+  onComplete: (template: TProjectTemplate) => void;
+};
+
+const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
+  const createProjectTemplate = useCreateProjectTemplate();
+  const updateProjectTemplate = useUpdateProjectTemplate();
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: projectTemplate?.name,
+      description: projectTemplate?.description
+    }
+  });
+
+  const onFormSubmit = async (data: FormData) => {
+    const mutation = projectTemplate
+      ? updateProjectTemplate.mutateAsync({ templateId: projectTemplate.id, ...data })
+      : createProjectTemplate.mutateAsync({ ...data });
+
+    try {
+      const template = await mutation;
+      createNotification({
+        text: `Successfully ${
+          projectTemplate ? "updated template details" : "created project template"
+        }`,
+        type: "success"
+      });
+
+      onComplete(template);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${
+          projectTemplate ? "update template details" : "create project template"
+        }`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <FormControl
+        helperText="Name must be slug-friendly"
+        errorText={errors.name?.message}
+        isError={Boolean(errors.name?.message)}
+        label="Name"
+      >
+        <Input autoFocus placeholder="my-project-template" {...register("name")} />
+      </FormControl>
+      <FormControl
+        label="Description (optional)"
+        errorText={errors.description?.message}
+        isError={Boolean(errors.description?.message)}
+      >
+        <TextArea
+          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+          {...register("description")}
+        />
+      </FormControl>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {projectTemplate ? "Update" : "Add"} Template
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
+
+export const ProjectTemplateDetailsModal = ({
+  isOpen,
+  onOpenChange,
+  projectTemplate,
+  onComplete
+}: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title={projectTemplate ? "Edit Project Template Details" : "Create Project Template"}
+      >
+        <ProjectTemplateForm
+          projectTemplate={projectTemplate}
+          onComplete={(template) => {
+            if (onComplete) onComplete(template);
+            onOpenChange(false);
+          }}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { TProjectTemplate } from "@app/hooks/api/projectTemplates";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { EditProjectTemplateSection } from "./EditProjectTemplateSection";
+import { ProjectTemplateDetailsModal } from "./ProjectTemplateDetailsModal";
+import { ProjectTemplatesTable } from "./ProjectTemplatesTable";
+
+export const ProjectTemplatesSection = () => {
+  const { subscription } = useSubscription();
+  const [editTemplate, setEditTemplate] = useState<TProjectTemplate | null>(null);
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "upgradePlan",
+    "addTemplate"
+  ] as const);
+
+  return (
+    <div className="relative">
+      <AnimatePresence>
+        {editTemplate ? (
+          <motion.div
+            key="edit-project-template"
+            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"
+          >
+            <EditProjectTemplateSection
+              template={editTemplate}
+              onBack={() => setEditTemplate(null)}
+            />
+          </motion.div>
+        ) : (
+          <motion.div
+            key="project-templates-list"
+            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"
+          >
+            <div>
+              <p className="mb-6 font-inter text-bunker-300">
+                Create and configure templates with predefined roles and environments to streamline
+                project setup
+              </p>
+              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+                <div className="mb-4 flex items-start">
+                  <p className="text-xl font-semibold text-mineshaft-100">Project Templates</p>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://infisical.com/docs/documentation/platform/project-templates"
+                  >
+                    <div className="ml-2 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>
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Create}
+                    a={OrgPermissionSubjects.ProjectTemplates}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        colorSchema="secondary"
+                        type="submit"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        onClick={() => {
+                          if (!subscription?.projectTemplates) {
+                            handlePopUpOpen("upgradePlan");
+                            return;
+                          }
+
+                          handlePopUpOpen("addTemplate");
+                        }}
+                        isDisabled={!isAllowed}
+                        className="ml-auto"
+                      >
+                        Add Template
+                      </Button>
+                    )}
+                  </OrgPermissionCan>
+                </div>
+                <ProjectTemplatesTable onEdit={setEditTemplate} />
+                <ProjectTemplateDetailsModal
+                  onComplete={(template) => setEditTemplate(template)}
+                  isOpen={popUp.addTemplate.isOpen}
+                  onOpenChange={(isOpen) => handlePopUpToggle("addTemplate", isOpen)}
+                />
+                <UpgradePlanModal
+                  isOpen={popUp.upgradePlan.isOpen}
+                  onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                  text="You can create project templates if you switch to Infisical's Enterprise plan."
+                />
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

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

@@ -0,0 +1,193 @@
+import { useMemo, useState } from "react";
+import {
+  faCircleInfo,
+  faClone,
+  faMagnifyingGlass,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
+
+import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
+
+type Props = {
+  onEdit: (projectTemplate: TProjectTemplate) => void;
+};
+
+export const ProjectTemplatesTable = ({ onEdit }: Props) => {
+  const { subscription } = useSubscription();
+
+  const { isPending, data: projectTemplates = [] } = useListProjectTemplates({
+    enabled: subscription?.projectTemplates
+  });
+
+  const [search, setSearch] = useState("");
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteTemplate"] as const);
+
+  const filteredTemplates = useMemo(
+    () =>
+      projectTemplates?.filter((template) =>
+        template.name.toLowerCase().includes(search.toLowerCase().trim())
+      ) ?? [],
+    [search, projectTemplates]
+  );
+
+  const colSpan = 4;
+
+  return (
+    <div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search templates..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Roles</Th>
+              <Th>Environments</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {subscription?.projectTemplates && isPending && (
+              <TableSkeleton
+                innerKey="project-templates-table"
+                columns={colSpan}
+                key="project-templates"
+              />
+            )}
+            {filteredTemplates.map((template) => {
+              const { id, name, roles, environments = [], description } = template;
+              return (
+                <Tr
+                  onClick={() => onEdit(template)}
+                  className="cursor-pointer hover:bg-mineshaft-700"
+                  key={id}
+                >
+                  <Td>
+                    {name}
+                    {description && (
+                      <Tooltip content={description}>
+                        <FontAwesomeIcon
+                          size="sm"
+                          className="ml-2 text-mineshaft-400"
+                          icon={faCircleInfo}
+                        />
+                      </Tooltip>
+                    )}
+                  </Td>
+                  <Td className="pl-8">
+                    {roles.length}
+                    {roles.length > 0 && (
+                      <Tooltip
+                        content={
+                          <ul className="ml-2 list-disc">
+                            {roles.map((role) => (
+                              <li key={role.name}>{role.name}</li>
+                            ))}
+                          </ul>
+                        }
+                      >
+                        <FontAwesomeIcon
+                          size="sm"
+                          className="ml-2 text-mineshaft-400"
+                          icon={faCircleInfo}
+                        />
+                      </Tooltip>
+                    )}
+                  </Td>
+                  <Td className="pl-14">
+                    {environments?.length || 0}
+                    {environments?.length && (
+                      <Tooltip
+                        content={
+                          <ul className="ml-2 list-disc">
+                            {environments
+                              ?.sort((a, b) => (a.position > b.position ? 1 : -1))
+                              .map((env) => <li key={env.slug}>{env.name}</li>)}
+                          </ul>
+                        }
+                      >
+                        <FontAwesomeIcon
+                          size="sm"
+                          className="ml-2 text-mineshaft-400"
+                          icon={faCircleInfo}
+                        />
+                      </Tooltip>
+                    )}
+                  </Td>
+                  <Td className="w-5">
+                    {name !== "default" && (
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Delete}
+                        a={OrgPermissionSubjects.ProjectTemplates}
+                      >
+                        {(isAllowed) => (
+                          <IconButton
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handlePopUpOpen("deleteTemplate", template);
+                            }}
+                            variant="plain"
+                            colorSchema="danger"
+                            ariaLabel="Delete template"
+                            isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        )}
+                      </OrgPermissionCan>
+                    )}
+                  </Td>
+                </Tr>
+              );
+            })}
+            {(!subscription?.projectTemplates ||
+              (!isPending && filteredTemplates?.length === 0)) && (
+              <Tr>
+                <Td colSpan={colSpan}>
+                  <EmptyState
+                    title={
+                      search.trim()
+                        ? "No project templates match search"
+                        : "No project templates found"
+                    }
+                    icon={faClone}
+                  />
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <DeleteProjectTemplateModal
+        isOpen={popUp.deleteTemplate.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("deleteTemplate", isOpen)}
+        template={popUp.deleteTemplate.data}
+      />
+    </div>
+  );
+};

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

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