Merge branch 'main' into ENG-3586

frontend/src/components/projects/NewProjectModal.tsx

@@ -153,7 +153,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
       reset();
       onOpenChange(false);
       navigate({
-        to: getProjectHomePage(project.type),
+        to: getProjectHomePage(project.type, project.environments),
         params: { projectId: project.id }
       });
     } catch (err) {

frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx

@@ -1,6 +1,7 @@
 import {
   faCheck,
   faExclamationTriangle,
+  faHourglass,
   faRotate,
   IconDefinition
 } from "@fortawesome/free-solid-svg-icons";
@@ -29,7 +30,11 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
       text = "Synced";
       icon = faCheck;
       break;
-    case SecretSyncStatus.Pending: // no need to differentiate from user perspective
+    case SecretSyncStatus.Pending:
+      variant = "primary";
+      text = "Queued";
+      icon = faHourglass;
+      break;
     case SecretSyncStatus.Running:
     default:
       variant = "primary";
@@ -42,11 +47,7 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
     <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
       <FontAwesomeIcon
         icon={icon}
-        className={
-          [SecretSyncStatus.Pending, SecretSyncStatus.Running].includes(status)
-            ? "animate-spin"
-            : ""
-        }
+        className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""}
       />
       <span>{text}</span>
     </Badge>

frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx

@@ -60,7 +60,8 @@ export const CreatableSelect = <T,>({
             isSelected && "text-mineshaft-200",
             "px-3 py-2 text-xs hover:cursor-pointer"
           ),
-        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
+        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md",
+        loadingMessage: () => "text-mineshaft-400 p-2 rounded-md"
       }}
       {...props}
     />

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -10,6 +10,7 @@ type Props = {
   children?: ReactNode;
   icon?: IconDefinition;
   iconSize?: SizeProp;
+  titleClassName?: string;
 };
 
 export const EmptyState = ({
@@ -17,7 +18,8 @@ export const EmptyState = ({
   className,
   children,
   icon = faCubesStacked,
-  iconSize = "2x"
+  iconSize = "2x",
+  titleClassName
 }: Props) => (
   <div
     className={twMerge(
@@ -27,7 +29,7 @@ export const EmptyState = ({
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
     <div className="flex flex-col items-center py-4">
-      <div className="text-sm text-bunker-300">{title}</div>
+      <div className={twMerge("text-sm text-bunker-300", titleClassName)}>{title}</div>
       <div>{children}</div>
     </div>
   </div>

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -67,7 +67,7 @@ export const FilterableSelect = <T,>({
         }),
         menuPortal: (provided) => ({
           ...provided,
-          zIndex: 9999
+          zIndex: 99999
         })
       }}
       tabSelectsValue={tabSelectsValue}
@@ -91,7 +91,7 @@ export const FilterableSelect = <T,>({
           ),
         placeholder: () =>
           `${isMulti ? "py-[0.22rem]" : "leading-7"} text-mineshaft-400 text-sm pl-1`,
-        input: () => "pl-1",
+        input: () => `pl-1 ${isMulti ? "py-[0.22rem]" : ""}`,
         valueContainer: () =>
           `px-1 max-h-[8.2rem] ${
             isMulti ? "!overflow-y-auto thin-scrollbar py-1" : "py-[0.1rem]"
@@ -114,7 +114,8 @@ export const FilterableSelect = <T,>({
             isSelected && "text-mineshaft-200",
             "rounded px-3 py-2 text-xs hover:cursor-pointer"
           ),
-        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
+        noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md",
+        loadingMessage: () => "text-mineshaft-400 p-2 rounded-md"
       }}
       {...props}
     />

frontend/src/components/v2/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
+import { DetailedHTMLProps, forwardRef, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { Skeleton } from "../Skeleton";
@@ -9,22 +9,20 @@ export type TableContainerProps = {
   className?: string;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const TableContainer = ({
-  children,
-  className,
-  isRounded = true,
-  ...props
-}: TableContainerProps): JSX.Element => (
-  <div
-    className={twMerge(
-      "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
-      isRounded && "rounded-lg",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </div>
+export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
+  ({ children, className, isRounded = true, ...props }, ref): JSX.Element => (
+    <div
+      ref={ref}
+      className={twMerge(
+        "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
+        isRounded && "rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
 );
 
 // main parent table

frontend/src/context/OrgPermissionContext/index.tsx

@@ -2,6 +2,7 @@ export { useOrgPermission } from "./OrgPermissionContext";
 export type { TOrgPermission } from "./types";
 export {
   OrgPermissionActions,
+  OrgPermissionAuditLogsActions,
   OrgPermissionBillingActions,
   OrgPermissionGroupActions,
   OrgPermissionIdentityActions,

frontend/src/context/OrgPermissionContext/types.ts

@@ -52,6 +52,7 @@ export enum OrgPermissionSubjects {
   Gateway = "gateway",
   SecretShare = "secret-share",
   GithubOrgSync = "github-org-sync",
+  GithubOrgSyncManual = "github-org-sync-manual",
   MachineIdentityAuthTemplate = "machine-identity-auth-template"
 }
 
@@ -71,6 +72,10 @@ export enum OrgPermissionAppConnectionActions {
   Connect = "connect"
 }
 
+export enum OrgPermissionAuditLogsActions {
+  Read = "read"
+}
+
 export enum OrgPermissionKmipActions {
   Proxy = "proxy",
   Setup = "setup"
@@ -111,6 +116,7 @@ export type OrgPermissionSet =
   | [OrgPermissionActions, OrgPermissionSubjects.IncidentAccount]
   | [OrgPermissionActions, OrgPermissionSubjects.Scim]
   | [OrgPermissionActions, OrgPermissionSubjects.GithubOrgSync]
+  | [OrgPermissionActions, OrgPermissionSubjects.GithubOrgSyncManual]
   | [OrgPermissionActions, OrgPermissionSubjects.Sso]
   | [OrgPermissionActions, OrgPermissionSubjects.Ldap]
   | [OrgPermissionGroupActions, OrgPermissionSubjects.Groups]
@@ -118,7 +124,7 @@ export type OrgPermissionSet =
   | [OrgPermissionBillingActions, OrgPermissionSubjects.Billing]
   | [OrgPermissionActions, OrgPermissionSubjects.Kms]
   | [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
-  | [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
+  | [OrgPermissionAuditLogsActions, OrgPermissionSubjects.AuditLogs]
   | [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates]
   | [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections]
   | [OrgPermissionIdentityActions, OrgPermissionSubjects.Identity]

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -2,6 +2,7 @@ export { useProjectPermission } from "./ProjectPermissionContext";
 export type { ProjectPermissionSet, TProjectPermission } from "./types";
 export {
   ProjectPermissionActions,
+  ProjectPermissionAuditLogsActions,
   ProjectPermissionCertificateActions,
   ProjectPermissionCmekActions,
   ProjectPermissionDynamicSecretActions,

frontend/src/context/ProjectPermissionContext/types.ts

@@ -150,6 +150,10 @@ export enum ProjectPermissionSecretEventActions {
   SubscribeImportMutations = "subscribe-on-import-mutations"
 }
 
+export enum ProjectPermissionAuditLogsActions {
+  Read = "read"
+}
+
 export enum PermissionConditionOperators {
   $IN = "$in",
   $ALL = "$all",
@@ -365,7 +369,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Groups]
   | [ProjectPermissionActions, ProjectPermissionSub.Integrations]
   | [ProjectPermissionActions, ProjectPermissionSub.Webhooks]
-  | [ProjectPermissionActions, ProjectPermissionSub.AuditLogs]
+  | [ProjectPermissionAuditLogsActions, ProjectPermissionSub.AuditLogs]
   | [ProjectPermissionActions, ProjectPermissionSub.Environments]
   | [ProjectPermissionActions, ProjectPermissionSub.IpAllowList]
   | [ProjectPermissionActions, ProjectPermissionSub.Settings]

frontend/src/context/index.tsx

@@ -2,6 +2,7 @@ export { useOrganization } from "./OrganizationContext";
 export type { TOrgPermission } from "./OrgPermissionContext";
 export {
   OrgPermissionActions,
+  OrgPermissionAuditLogsActions,
   OrgPermissionBillingActions,
   OrgPermissionGroupActions,
   OrgPermissionIdentityActions,
@@ -11,6 +12,7 @@ export {
 export type { TProjectPermission } from "./ProjectPermissionContext";
 export {
   ProjectPermissionActions,
+  ProjectPermissionAuditLogsActions,
   ProjectPermissionCertificateActions,
   ProjectPermissionCmekActions,
   ProjectPermissionDynamicSecretActions,

frontend/src/helpers/auditLogStreams.ts

@@ -0,0 +1,32 @@
+import { faCode, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TAuditLogStream } from "@app/hooks/api/types";
+import { DiscriminativePick } from "@app/types";
+
+export const AUDIT_LOG_STREAM_PROVIDER_MAP: Record<
+  LogProvider,
+  { name: string; image?: string; icon?: IconDefinition; size?: number }
+> = {
+  [LogProvider.Custom]: { name: "Custom", icon: faCode },
+  [LogProvider.Datadog]: { name: "Datadog", image: "Datadog.png" },
+  [LogProvider.Splunk]: { name: "Splunk", image: "Splunk.png", size: 65 }
+};
+
+// Strictly for showing to the client in the front-end
+export function getProviderUrl(
+  logStream: DiscriminativePick<TAuditLogStream, "provider" | "credentials">
+) {
+  switch (logStream.provider) {
+    case LogProvider.Custom:
+      return logStream.credentials.url;
+    case LogProvider.Datadog:
+      return logStream.credentials.url;
+    case LogProvider.Splunk:
+      return `https://${logStream.credentials.hostname}:8088/services/collector/event`;
+    default:
+      throw new Error(
+        `Unhandled provider in getProviderUrl: ${(logStream as TAuditLogStream).provider}`
+      );
+  }
+}

frontend/src/helpers/download.ts

@@ -4,3 +4,15 @@ export const downloadTxtFile = (filename: string, content: string) => {
   const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
   FileSaver.saveAs(blob, filename);
 };
+
+export const downloadFile = (content: string, filename: string, mimeType: string = "text/csv") => {
+  const blob = new Blob([content], { type: mimeType });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+};

frontend/src/helpers/project.ts

@@ -1,6 +1,6 @@
 import { apiRequest } from "@app/config/request";
 import { createWorkspace } from "@app/hooks/api/workspace/queries";
-import { ProjectType } from "@app/hooks/api/workspace/types";
+import { ProjectType, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 
 const secretsToBeAdded = [
   {
@@ -72,12 +72,14 @@ export const getProjectBaseURL = (type: ProjectType) => {
   }
 };
 
-export const getProjectHomePage = (type: ProjectType) => {
+// @ts-expect-error akhilmhdh: will remove this later
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getProjectHomePage = (type: ProjectType, environments: WorkspaceEnv[]) => {
   switch (type) {
     case ProjectType.SecretManager:
-      return "/projects/secret-management/$projectId/overview";
+      return "/projects/secret-management/$projectId/overview" as const;
     case ProjectType.CertificateManager:
-      return "/projects/cert-management/$projectId/subscribers";
+      return "/projects/cert-management/$projectId/subscribers" as const;
     case ProjectType.SecretScanning:
       return `/projects/${type}/$projectId/data-sources` as const;
     default:

frontend/src/hooks/api/admin/mutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { Organization } from "@app/hooks/api/organization/types";
 
 import { organizationKeys } from "../organization/queries";
 import { User } from "../users/types";
@@ -8,9 +9,12 @@ import { adminQueryKeys, adminStandaloneKeys } from "./queries";
 import {
   RootKeyEncryptionStrategy,
   TCreateAdminUserDTO,
+  TCreateOrganizationDTO,
   TInvalidateCacheDTO,
+  TResendOrgInviteDTO,
   TServerConfig,
-  TUpdateServerConfigDTO
+  TUpdateServerConfigDTO,
+  TUsageReportResponse
 } from "./types";
 
 export const useCreateAdminUser = () => {
@@ -193,3 +197,58 @@ export const useInvalidateCache = () => {
     }
   });
 };
+
+export const useServerAdminCreateOrganization = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (opt: TCreateOrganizationDTO) => {
+      const { data } = await apiRequest.post<{ organization: Organization }>(
+        "/api/v1/admin/organization-management/organizations",
+        opt
+      );
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: adminQueryKeys.getOrganizations() });
+    }
+  });
+};
+
+export const useServerAdminResendOrgInvite = () => {
+  return useMutation({
+    mutationFn: async ({ organizationId, membershipId }: TResendOrgInviteDTO) => {
+      await apiRequest.post(
+        `/api/v1/admin/organization-management/organizations/${organizationId}/memberships/${membershipId}/resend-invite`
+      );
+    }
+  });
+};
+
+export const useServerAdminAccessOrg = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (orgId: string) => {
+      const { data } = await apiRequest.post(
+        `/api/v1/admin/organization-management/organizations/${orgId}/access`
+      );
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: organizationKeys.getUserOrganizations });
+      queryClient.invalidateQueries({ queryKey: adminQueryKeys.getOrganizations() });
+    }
+  });
+};
+
+export const useGenerateUsageReport = () => {
+  return useMutation<TUsageReportResponse, object, void>({
+    mutationFn: async () => {
+      const { data } = await apiRequest.post<TUsageReportResponse>(
+        "/api/v1/admin/usage-report/generate"
+      );
+      return data;
+    }
+  });
+};

frontend/src/hooks/api/admin/queries.ts

@@ -1,4 +1,11 @@
-import { useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
+import {
+  DefaultError,
+  InfiniteData,
+  UndefinedInitialDataInfiniteOptions,
+  useInfiniteQuery,
+  useQuery,
+  UseQueryOptions
+} from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 import { Identity } from "@app/hooks/api/identities/types";
@@ -25,8 +32,8 @@ export const adminStandaloneKeys = {
 export const adminQueryKeys = {
   serverConfig: () => ["server-config"] as const,
   getUsers: (filters: AdminGetUsersFilters) => [adminStandaloneKeys.getUsers, { filters }] as const,
-  getOrganizations: (filters: AdminGetOrganizationsFilters) =>
-    [adminStandaloneKeys.getOrganizations, { filters }] as const,
+  getOrganizations: (filters?: AdminGetOrganizationsFilters) =>
+    [adminStandaloneKeys.getOrganizations, ...(filters ? [{ filters }] : [])] as const,
   getIdentities: (filters: AdminGetIdentitiesFilters) =>
     [adminStandaloneKeys.getIdentities, { filters }] as const,
   getAdminSlackConfig: () => ["admin-slack-config"] as const,
@@ -83,7 +90,18 @@ export const useGetServerConfig = ({
     enabled: options?.enabled ?? true
   });
 
-export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
+export const useAdminGetUsers = (
+  filters: AdminGetUsersFilters,
+  options?: Partial<
+    UndefinedInitialDataInfiniteOptions<
+      User[],
+      DefaultError,
+      InfiniteData<User[]>,
+      ReturnType<typeof adminQueryKeys.getUsers>,
+      number
+    >
+  >
+) => {
   return useInfiniteQuery({
     initialPageParam: 0,
     queryKey: adminQueryKeys.getUsers(filters),
@@ -101,7 +119,8 @@ export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
       return data.users;
     },
     getNextPageParam: (lastPage, pages) =>
-      lastPage.length !== 0 ? pages.length * filters.limit : undefined
+      lastPage.length !== 0 ? pages.length * filters.limit : undefined,
+    ...options
   });
 };
 

frontend/src/hooks/api/admin/types.ts

@@ -1,3 +1,5 @@
+import { OrgMembershipStatus } from "@app/hooks/api/organization/types";
+
 import { Organization } from "../types";
 
 export enum LoginMethod {
@@ -20,6 +22,7 @@ export type OrganizationWithProjects = Organization & {
       lastName: string | null;
     };
     membershipId: string;
+    status: OrgMembershipStatus;
     role: string;
     roleId: string | null;
   }[];
@@ -53,6 +56,7 @@ export type TServerConfig = {
   fipsEnabled: boolean;
   envOverrides?: Record<string, string>;
   paramsFolderSecretDetectionEnabled: boolean;
+  isOfflineUsageReportsEnabled: boolean;
 };
 
 export type TUpdateServerConfigDTO = {
@@ -142,3 +146,19 @@ export interface TGetEnvOverrides {
     fields: { key: string; value: string; hasEnvEntry: boolean; description?: string }[];
   };
 }
+
+export type TUsageReportResponse = {
+  filename: string;
+  csvContent: string;
+  signature: string;
+};
+
+export type TCreateOrganizationDTO = {
+  name: string;
+  inviteAdminEmails: string[];
+};
+
+export type TResendOrgInviteDTO = {
+  organizationId: string;
+  membershipId: string;
+};

frontend/src/hooks/api/auditLogStreams/enums.ts

@@ -0,0 +1,5 @@
+export enum LogProvider {
+  Datadog = "datadog",
+  Splunk = "splunk",
+  Custom = "custom"
+}

frontend/src/hooks/api/auditLogStreams/index.tsx

@@ -1,6 +1,2 @@
-export {
-  useCreateAuditLogStream,
-  useDeleteAuditLogStream,
-  useUpdateAuditLogStream
-} from "./mutations";
-export { useGetAuditLogStreamDetails, useGetAuditLogStreams } from "./queries";
+export * from "./mutations";
+export * from "./queries";

frontend/src/hooks/api/auditLogStreams/mutations.tsx

@@ -12,50 +12,54 @@ import {
 
 export const useCreateAuditLogStream = () => {
   const queryClient = useQueryClient();
-
-  return useMutation<{ auditLogStream: TAuditLogStream }, object, TCreateAuditLogStreamDTO>({
-    mutationFn: async (dto) => {
+  return useMutation({
+    mutationFn: async ({ provider, ...params }: TCreateAuditLogStreamDTO) => {
       const { data } = await apiRequest.post<{ auditLogStream: TAuditLogStream }>(
-        "/api/v1/audit-log-streams",
-        dto
+        `/api/v1/audit-log-streams/${provider}`,
+        params
       );
-      return data;
+
+      return data.auditLogStream;
     },
-    onSuccess: (_, { orgId }) => {
-      queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) });
-    }
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() })
   });
 };
 
 export const useUpdateAuditLogStream = () => {
   const queryClient = useQueryClient();
-
-  return useMutation<{ auditLogStream: TAuditLogStream }, object, TUpdateAuditLogStreamDTO>({
-    mutationFn: async (dto) => {
+  return useMutation({
+    mutationFn: async ({ auditLogStreamId, provider, ...params }: TUpdateAuditLogStreamDTO) => {
       const { data } = await apiRequest.patch<{ auditLogStream: TAuditLogStream }>(
-        `/api/v1/audit-log-streams/${dto.id}`,
-        dto
+        `/api/v1/audit-log-streams/${provider}/${auditLogStreamId}`,
+        params
       );
-      return data;
+
+      return data.auditLogStream;
     },
-    onSuccess: (_, { orgId }) => {
-      queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) });
+    onSuccess: (_, { auditLogStreamId, provider }) => {
+      queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() });
+      queryClient.invalidateQueries({
+        queryKey: auditLogStreamKeys.getById(provider, auditLogStreamId)
+      });
     }
   });
 };
 
 export const useDeleteAuditLogStream = () => {
   const queryClient = useQueryClient();
-
-  return useMutation<{ auditLogStream: TAuditLogStream }, object, TDeleteAuditLogStreamDTO>({
-    mutationFn: async (dto) => {
+  return useMutation({
+    mutationFn: async ({ auditLogStreamId, provider }: TDeleteAuditLogStreamDTO) => {
       const { data } = await apiRequest.delete<{ auditLogStream: TAuditLogStream }>(
-        `/api/v1/audit-log-streams/${dto.id}`
+        `/api/v1/audit-log-streams/${provider}/${auditLogStreamId}`
       );
-      return data;
+
+      return data.auditLogStream;
     },
-    onSuccess: (_, { orgId }) => {
-      queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) });
+    onSuccess: (_, { auditLogStreamId, provider }) => {
+      queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() });
+      queryClient.invalidateQueries({
+        queryKey: auditLogStreamKeys.getById(provider, auditLogStreamId)
+      });
     }
   });
 };

frontend/src/hooks/api/auditLogStreams/queries.tsx

@@ -1,40 +1,89 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { TAuditLogStream } from "./types";
+import { TAuditLogStreamProviderOption } from "./types/provider-options";
+import { LogProvider } from "./enums";
+import { TAuditLogStream, TAuditLogStreamProviderMap } from "./types";
 
 export const auditLogStreamKeys = {
-  list: (orgId: string) => ["audit-log-stream", { orgId }],
-  getById: (id: string) => ["audit-log-stream-details", { id }]
+  all: ["audit-log-stream"] as const,
+  options: () => [...auditLogStreamKeys.all, "options"] as const,
+  list: () => [...auditLogStreamKeys.all, "list"] as const,
+  getById: (provider: string, id: string) =>
+    [...auditLogStreamKeys.all, provider, "get-by-id", id] as const
 };
 
-const fetchAuditLogStreams = async () => {
-  const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>(
-    "/api/v1/audit-log-streams"
-  );
+export const useGetAuditLogStreamOptions = (
+  options?: Omit<
+    UseQueryOptions<
+      TAuditLogStreamProviderOption[],
+      unknown,
+      TAuditLogStreamProviderOption[],
+      ReturnType<typeof auditLogStreamKeys.options>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: auditLogStreamKeys.options(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ providerOptions: TAuditLogStreamProviderOption[] }>(
+        "/api/v1/audit-log-streams/options"
+      );
 
-  return data.auditLogStreams;
-};
-
-export const useGetAuditLogStreams = (orgId: string) =>
-  useQuery({
-    queryKey: auditLogStreamKeys.list(orgId),
-    queryFn: () => fetchAuditLogStreams(),
-    enabled: Boolean(orgId)
+      return data.providerOptions;
+    },
+    ...options
   });
-
-const fetchAuditLogStreamDetails = async (id: string) => {
-  const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStream }>(
-    `/api/v1/audit-log-streams/${id}`
-  );
-
-  return data.auditLogStream;
 };
 
-export const useGetAuditLogStreamDetails = (id: string) =>
-  useQuery({
-    queryKey: auditLogStreamKeys.getById(id),
-    queryFn: () => fetchAuditLogStreamDetails(id),
-    enabled: Boolean(id)
+export const useListAuditLogStreams = (
+  options?: Omit<
+    UseQueryOptions<
+      TAuditLogStream[],
+      unknown,
+      TAuditLogStream[],
+      ReturnType<typeof auditLogStreamKeys.list>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: auditLogStreamKeys.list(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>(
+        "/api/v1/audit-log-streams"
+      );
+
+      return data.auditLogStreams;
+    },
+    ...options
   });
+};
+
+export const useGetAuditLogStreamById = <T extends LogProvider>(
+  provider: T,
+  logStreamId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TAuditLogStreamProviderMap[T],
+      unknown,
+      TAuditLogStreamProviderMap[T],
+      ReturnType<typeof auditLogStreamKeys.getById>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: auditLogStreamKeys.getById(provider, logStreamId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStreamProviderMap[T] }>(
+        `/api/v1/audit-log-streams/${provider}/${logStreamId}`
+      );
+
+      return data.auditLogStream;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/auditLogStreams/types.ts

@@ -1,28 +0,0 @@
-export type LogStreamHeaders = {
-  key: string;
-  value: string;
-};
-
-export type TAuditLogStream = {
-  id: string;
-  url: string;
-  headers?: LogStreamHeaders[];
-};
-
-export type TCreateAuditLogStreamDTO = {
-  url: string;
-  headers?: LogStreamHeaders[];
-  orgId: string;
-};
-
-export type TUpdateAuditLogStreamDTO = {
-  id: string;
-  url?: string;
-  headers?: LogStreamHeaders[];
-  orgId: string;
-};
-
-export type TDeleteAuditLogStreamDTO = {
-  id: string;
-  orgId: string;
-};

frontend/src/hooks/api/auditLogStreams/types/index.ts

@@ -0,0 +1,25 @@
+import { LogProvider } from "../enums";
+import { TCustomProviderLogStream } from "./providers/custom-provider";
+import { TDatadogProviderLogStream } from "./providers/datadog-provider";
+import { TSplunkProviderLogStream } from "./providers/splunk-provider";
+
+export type TAuditLogStream =
+  | TCustomProviderLogStream
+  | TDatadogProviderLogStream
+  | TSplunkProviderLogStream;
+
+export type TAuditLogStreamProviderMap = {
+  [LogProvider.Custom]: TCustomProviderLogStream;
+  [LogProvider.Datadog]: TDatadogProviderLogStream;
+  [LogProvider.Splunk]: TSplunkProviderLogStream;
+};
+
+export type TCreateAuditLogStreamDTO = Pick<TAuditLogStream, "provider" | "credentials">;
+export type TUpdateAuditLogStreamDTO = Pick<TAuditLogStream, "credentials"> & {
+  provider: LogProvider;
+  auditLogStreamId: string;
+};
+export type TDeleteAuditLogStreamDTO = {
+  provider: LogProvider;
+  auditLogStreamId: string;
+};

frontend/src/hooks/api/auditLogStreams/types/provider-options.ts

@@ -0,0 +1,11 @@
+import { LogProvider } from "../enums";
+
+export type TAuditLogStreamProviderOptionBase = {
+  name: string;
+};
+
+export type TAuditLogStreamProviderOption = {
+  [P in keyof typeof LogProvider]: TAuditLogStreamProviderOptionBase & {
+    provider: (typeof LogProvider)[P];
+  };
+}[keyof typeof LogProvider];

frontend/src/hooks/api/auditLogStreams/types/providers/custom-provider.ts

@@ -0,0 +1,10 @@
+import { LogProvider } from "../../enums";
+import { TRootProviderLogStream } from "./root-provider";
+
+export type TCustomProviderLogStream = TRootProviderLogStream & {
+  provider: LogProvider.Custom;
+  credentials: {
+    url: string;
+    headers: { key: string; value: string }[];
+  };
+};

frontend/src/hooks/api/auditLogStreams/types/providers/datadog-provider.ts

@@ -0,0 +1,10 @@
+import { LogProvider } from "../../enums";
+import { TRootProviderLogStream } from "./root-provider";
+
+export type TDatadogProviderLogStream = TRootProviderLogStream & {
+  provider: LogProvider.Datadog;
+  credentials: {
+    url: string;
+    token: string;
+  };
+};

frontend/src/hooks/api/auditLogStreams/types/providers/root-provider.ts

@@ -0,0 +1,6 @@
+export type TRootProviderLogStream = {
+  id: string;
+  orgId: string;
+  createdAt: string;
+  updatedAt: string;
+};

frontend/src/hooks/api/auditLogStreams/types/providers/splunk-provider.ts

@@ -0,0 +1,10 @@
+import { LogProvider } from "../../enums";
+import { TRootProviderLogStream } from "./root-provider";
+
+export type TSplunkProviderLogStream = TRootProviderLogStream & {
+  provider: LogProvider.Splunk;
+  credentials: {
+    hostname: string;
+    token: string;
+  };
+};

frontend/src/hooks/api/ca/types.ts

@@ -16,6 +16,8 @@ export type TAcmeCertificateAuthority = {
     };
     directoryUrl: string;
     accountEmail: string;
+    eabKid?: string;
+    eabHmacKey?: string;
   };
 };
 

frontend/src/hooks/api/dashboard/queries.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 
 import { apiRequest } from "@app/config/request";
 import {
@@ -273,6 +274,12 @@ export const useGetProjectSecretsDetails = (
     ...options,
     // wait for all values to be available
     enabled: Boolean(projectId) && (options?.enabled ?? true),
+    retry: (count, error) => {
+      // don't retry 404s
+      if (error instanceof AxiosError && error.status === 404) return false;
+
+      return count <= 5;
+    },
     queryKey: dashboardKeys.getProjectSecretsDetails({
       secretPath,
       search,

frontend/src/hooks/api/dashboard/types.ts

@@ -72,7 +72,7 @@ export type DashboardProjectSecretsOverview = Omit<
   DashboardProjectSecretsOverviewResponse,
   "secrets" | "secretRotations"
 > & {
-  secrets?: SecretV3RawSanitized[];
+  secrets?: (SecretV3RawSanitized & { sourceEnv?: string })[];
   secretRotations?: (TSecretRotationV2 & {
     secrets: (SecretV3RawSanitized | null)[];
   })[];

frontend/src/hooks/api/githubOrgSyncConfig/index.tsx

@@ -1,6 +1,7 @@
 export {
   useCreateGithubSyncOrgConfig,
   useDeleteGithubSyncOrgConfig,
+  useSyncAllGithubTeams,
   useUpdateGithubSyncOrgConfig
 } from "./mutations";
 export { githubOrgSyncConfigQueryKeys } from "./queries";

frontend/src/hooks/api/githubOrgSyncConfig/mutations.tsx

@@ -40,3 +40,19 @@ export const useDeleteGithubSyncOrgConfig = () => {
     }
   });
 };
+
+export const useSyncAllGithubTeams = () => {
+  return useMutation({
+    mutationFn: async (): Promise<{
+      totalUsers: number;
+      errors: string[];
+      createdTeams: string[];
+      updatedTeams: string[];
+      removedMemberships: number;
+      syncDuration: number;
+    }> => {
+      const response = await apiRequest.post("/api/v1/github-org-sync-config/sync-all-teams");
+      return response.data;
+    }
+  });
+};

frontend/src/hooks/api/migration/index.ts

@@ -1 +1,2 @@
 export * from "./mutations";
+export * from "./queries";

frontend/src/hooks/api/migration/mutations.tsx

@@ -46,18 +46,21 @@ export const useImportVault = () => {
       vaultAccessToken,
       vaultNamespace,
       vaultUrl,
-      mappingType
+      mappingType,
+      gatewayId
     }: {
       vaultAccessToken: string;
       vaultNamespace?: string;
       vaultUrl: string;
       mappingType: string;
+      gatewayId?: string;
     }) => {
       await apiRequest.post("/api/v3/external-migration/vault/", {
         vaultAccessToken,
         vaultNamespace,
         vaultUrl,
-        mappingType
+        mappingType,
+        gatewayId
       });
     }
   });

frontend/src/hooks/api/migration/queries.tsx

@@ -0,0 +1,20 @@
+import { apiRequest } from "@app/config/request";
+import { useQuery } from "@tanstack/react-query";
+import { ExternalMigrationProviders } from "./types";
+
+const externalMigrationQueryKeys = {
+  customMigrationAvailable: (provider: ExternalMigrationProviders) => [
+    "custom-migration-available",
+    provider
+  ]
+};
+
+export const useHasCustomMigrationAvailable = (provider: ExternalMigrationProviders) => {
+  return useQuery({
+    queryKey: externalMigrationQueryKeys.customMigrationAvailable(provider),
+    queryFn: () =>
+      apiRequest.get<{ enabled: boolean }>(
+        `/api/v3/external-migration/custom-migration-enabled/${provider}`
+      )
+  });
+};

frontend/src/hooks/api/migration/types.ts

@@ -0,0 +1,4 @@
+export enum ExternalMigrationProviders {
+  Vault = "vault",
+  EnvKey = "env-key"
+}

frontend/src/hooks/api/organization/types.ts

@@ -159,3 +159,8 @@ export enum OrgIdentityOrderBy {
   Name = "name",
   Role = "role"
 }
+
+export enum OrgMembershipStatus {
+  Invited = "invited",
+  Accepted = "accepted"
+}

frontend/src/hooks/api/users/types.ts

@@ -19,10 +19,10 @@ export type User = {
   createdAt: Date;
   updatedAt: Date;
   username: string;
-  email?: string;
+  email?: string | null;
   superAdmin: boolean;
-  firstName?: string;
-  lastName?: string;
+  firstName?: string | null;
+  lastName?: string | null;
   authProvider?: AuthMethod;
   authMethods: AuthMethod[];
   isMfaEnabled: boolean;

frontend/src/hooks/api/workspace/queries.tsx

@@ -47,7 +47,8 @@ import {
   UpdateEnvironmentDTO,
   UpdatePitVersionLimitDTO,
   UpdateProjectDTO,
-  Workspace
+  Workspace,
+  WorkspaceEnv
 } from "./types";
 
 export const fetchWorkspaceById = async (workspaceId: string) => {
@@ -396,12 +397,16 @@ export const useDeleteWorkspace = () => {
 export const useCreateWsEnvironment = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<object, object, CreateEnvironmentDTO>({
-    mutationFn: ({ workspaceId, name, slug }) => {
-      return apiRequest.post(`/api/v1/workspace/${workspaceId}/environments`, {
-        name,
-        slug
-      });
+  return useMutation<WorkspaceEnv, WorkspaceEnv, CreateEnvironmentDTO>({
+    mutationFn: async ({ workspaceId, name, slug }) => {
+      const { data } = await apiRequest.post<{ environment: WorkspaceEnv }>(
+        `/api/v1/workspace/${workspaceId}/environments`,
+        {
+          name,
+          slug
+        }
+      );
+      return data.environment;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({

frontend/src/hooks/useResizableColWidth.tsx

@@ -1,12 +1,13 @@
-import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
+import { MouseEvent, RefObject, useCallback, useEffect, useRef, useState } from "react";
 
 type Params = {
   minWidth: number;
   maxWidth: number;
   initialWidth: number;
+  ref: RefObject<HTMLTableElement>;
 };
 
-export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth }: Params) => {
+export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth, ref }: Params) => {
   const [colWidth, setColWidth] = useState(initialWidth);
   const [isResizing, setIsResizing] = useState(false);
   const startX = useRef(0);
@@ -63,6 +64,28 @@ export const useResizableColWidth = ({ minWidth, maxWidth, initialWidth }: Param
     };
   }, [isResizing, handleMouseMove, handleMouseUp]);
 
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) return;
+
+    const handleResize = () => {
+      if (colWidth > maxWidth) {
+        setColWidth(Math.max(maxWidth, minWidth));
+      } else if (ref.current?.clientWidth && colWidth > ref.current.clientWidth * 0.9) {
+        // this else is a fallback to ensure col is always visible
+        setColWidth(initialWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(element);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref, maxWidth, colWidth]);
+
   return {
     colWidth,
     handleMouseDown,

frontend/src/hooks/utils/secrets-overview.tsx

@@ -130,7 +130,11 @@ export const useSecretOverview = (secrets: DashboardProjectSecretsOverview["secr
 
   const getEnvSecretKeyCount = useCallback(
     (env: string) => {
-      return secrets?.filter((secret) => secret.env === env).length ?? 0;
+      return (
+        secrets?.filter((secret) =>
+          secret.sourceEnv ? secret.sourceEnv === env : secret.env === env
+        ).length ?? 0
+      );
     },
     [secrets]
   );

frontend/src/layouts/AdminLayout/AdminLayout.tsx

@@ -1,11 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Outlet, useRouterState } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";
 
 import { Banner } from "@app/components/page-frames/Banner";
-import { BreadcrumbContainer, TBreadcrumbFormat } from "@app/components/v2";
-import { useServerConfig } from "@app/context";
+import { useServerConfig, useSubscription } from "@app/context";
+import { useFetchServerStatus } from "@app/hooks/api";
+import { AuditLogBanner } from "@app/layouts/OrganizationLayout/components/AuditLogBanner";
+import { Navbar } from "@app/layouts/OrganizationLayout/components/NavBar";
+import { RedisBanner } from "@app/layouts/OrganizationLayout/components/RedisBanner";
+import { SmtpBanner } from "@app/layouts/OrganizationLayout/components/SmtpBanner";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 import { AdminSidebar } from "./Sidebar";
@@ -13,26 +17,27 @@ import { AdminSidebar } from "./Sidebar";
 export const AdminLayout = () => {
   const { t } = useTranslation();
   const { config } = useServerConfig();
-
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-
-  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
+  const { data: serverDetails, isLoading } = useFetchServerStatus();
+  const { subscription } = useSubscription();
 
   const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";
 
   return (
     <>
       <Banner />
-      <div className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden md:flex`}>
+      <div
+        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+      >
+        <Navbar />
+        {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
+        {!isLoading && !serverDetails?.emailConfigured && <SmtpBanner />}
+        {!isLoading && subscription.auditLogs && <AuditLogBanner />}
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <AdminSidebar />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]">
-            {breadcrumbs ? (
-              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-            ) : null}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 pt-8 dark:[color-scheme:dark]">
             <Outlet />
-          </main>
+          </div>
         </div>
       </div>
       <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">

frontend/src/layouts/AdminLayout/Sidebar.tsx

@@ -1,57 +1,62 @@
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faBuilding,
+  faChevronLeft,
+  faCog,
+  faDatabase,
+  faKey,
+  faLock,
+  faPlug,
+  faUserTie
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useMatchRoute } from "@tanstack/react-router";
 
-import { Lottie, Menu, MenuGroup, MenuItem } from "@app/components/v2";
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
 
 const generalTabs = [
   {
     label: "General",
-    icon: "settings-cog",
+    icon: faCog,
     link: "/admin/"
   },
   {
     label: "Encryption",
-    icon: "lock-closed",
+    icon: faLock,
     link: "/admin/encryption"
   },
   {
     label: "Authentication",
-    icon: "check",
+    icon: faCheckCircle,
     link: "/admin/authentication"
   },
   {
     label: "Integrations",
-    icon: "sliding-carousel",
+    icon: faPlug,
     link: "/admin/integrations"
   },
   {
     label: "Caching",
-    icon: "note",
+    icon: faDatabase,
     link: "/admin/caching"
   },
   {
     label: "Environment Variables",
-    icon: "unlock",
+    icon: faKey,
     link: "/admin/environment"
   }
 ];
 
-const resourceTabs = [
+const othersTabs = [
   {
-    label: "Organizations",
-    icon: "groups",
-    link: "/admin/resources/organizations"
+    label: "Access Controls",
+    icon: faUserTie,
+    link: "/admin/access-management"
   },
   {
-    label: "User Identities",
-    icon: "user",
-    link: "/admin/resources/user-identities"
-  },
-  {
-    label: "Machine Identities",
-    icon: "wrench",
-    link: "/admin/resources/machine-identities"
+    label: "Resource Overview",
+    icon: faBuilding,
+    link: "/admin/resources/overview"
   }
 ];
 
@@ -61,6 +66,44 @@ export const AdminSidebar = () => {
   return (
     <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
       <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
+        <div className="flex-1">
+          <Menu>
+            <MenuGroup title="Configuration">
+              {generalTabs.map((tab) => {
+                const isActive = matchRoute({ to: tab.link, fuzzy: false });
+                return (
+                  <Link key={tab.link} to={tab.link}>
+                    <MenuItem isSelected={Boolean(isActive)}>
+                      <div className="mx-1 flex gap-2">
+                        <div className="w-6">
+                          <FontAwesomeIcon icon={tab.icon} />
+                        </div>
+                        {tab.label}
+                      </div>
+                    </MenuItem>
+                  </Link>
+                );
+              })}
+            </MenuGroup>
+            <MenuGroup title="Others">
+              {othersTabs.map((tab) => {
+                const isActive = matchRoute({ to: tab.link, fuzzy: false });
+                return (
+                  <Link key={tab.link} to={tab.link}>
+                    <MenuItem isSelected={Boolean(isActive)}>
+                      <div className="mx-1 flex gap-2">
+                        <div className="w-6">
+                          <FontAwesomeIcon icon={tab.icon} />
+                        </div>
+                        {tab.label}
+                      </div>
+                    </MenuItem>
+                  </Link>
+                );
+              })}
+            </MenuGroup>
+          </Menu>
+        </div>
         <Menu>
           <Link to="/organization/projects">
             <MenuItem
@@ -73,50 +116,10 @@ export const AdminSidebar = () => {
                 />
               }
             >
-              Back to organization
+              Back to Organization
             </MenuItem>
           </Link>
         </Menu>
-        <div className="flex-grow">
-          <Menu>
-            <MenuGroup title="General">
-              {generalTabs.map((tab) => {
-                const isActive = matchRoute({ to: tab.link, fuzzy: false });
-                return (
-                  <Link key={tab.link} to={tab.link}>
-                    <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden rounded-none"
-                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon={tab.icon} />
-                      }
-                      isSelected={Boolean(isActive)}
-                    >
-                      {tab.label}
-                    </MenuItem>
-                  </Link>
-                );
-              })}
-            </MenuGroup>
-            <MenuGroup title="Resources">
-              {resourceTabs.map((tab) => {
-                const isActive = matchRoute({ to: tab.link, fuzzy: false });
-                return (
-                  <Link key={tab.link} to={tab.link}>
-                    <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden rounded-none"
-                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon={tab.icon} />
-                      }
-                      isSelected={Boolean(isActive)}
-                    >
-                      {tab.label}
-                    </MenuItem>
-                  </Link>
-                );
-              })}
-            </MenuGroup>
-          </Menu>
-        </div>
       </nav>
     </aside>
   );

frontend/src/layouts/OrganizationLayout/components/AuditLogBanner/AuditLogBanner.tsx

@@ -1,12 +1,10 @@
-import { useOrganization } from "@app/context";
-import { useFetchServerStatus, useGetAuditLogStreams } from "@app/hooks/api";
+import { useFetchServerStatus, useListAuditLogStreams } from "@app/hooks/api";
 
 import { OrgAlertBanner } from "../OrgAlertBanner";
 
 export const AuditLogBanner = () => {
-  const org = useOrganization();
   const { data: status, isLoading: isLoadingStatus } = useFetchServerStatus();
-  const { data: streams, isLoading: isLoadingStreams } = useGetAuditLogStreams(org.currentOrg.id);
+  const { data: streams, isLoading: isLoadingStreams } = useListAuditLogStreams();
 
   if (isLoadingStreams || isLoadingStatus || !streams) return null;
 

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -10,13 +10,14 @@ import {
   faEnvelope,
   faInfo,
   faInfoCircle,
+  faServer,
   faSignOut,
   faUser,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
-import { Link, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
 
 import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
@@ -136,6 +137,7 @@ export const Navbar = () => {
     [notifications]
   );
 
+  const location = useLocation();
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
@@ -197,6 +199,8 @@ export const Navbar = () => {
     );
   }
 
+  const isServerAdminPanel = location.pathname.startsWith("/admin");
+
   return (
     <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
       <div>
@@ -205,96 +209,117 @@ export const Navbar = () => {
         </Link>
       </div>
       <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
-      <div className="flex items-center">
-        <DropdownMenu modal={false}>
-          <Link to="/organization/projects">
-            <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
-              <div>
-                <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
-              </div>
-              <div className="whitespace-nowrap">{currentOrg?.name}</div>
-              <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
-                {getPlan(subscription)}
-              </div>
-            </div>
-          </Link>
-          <DropdownMenuTrigger asChild>
-            <div>
-              <IconButton
-                variant="plain"
-                colorSchema="secondary"
-                ariaLabel="switch-org"
-                className="px-2 py-1"
-              >
-                <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
-              </IconButton>
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="start"
-            side="bottom"
-            className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
-            style={{ minWidth: "220px" }}
+      {isServerAdminPanel ? (
+        <>
+          <Link
+            to="/admin"
+            className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
           >
-            <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">organizations</div>
-            {orgs?.map((org) => {
-              return (
-                <DropdownMenuItem key={org.id}>
-                  <Button
-                    onClick={async () => {
-                      if (currentOrg?.id === org.id) return;
-
-                      if (org.authEnforced) {
-                        // org has an org-level auth method enabled (e.g. SAML)
-                        // -> logout + redirect to SAML SSO
-
-                        await logout.mutateAsync();
-                        if (org.orgAuthMethod === AuthMethod.OIDC) {
-                          window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
-                        } else {
-                          window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
-                        }
-                        window.close();
-                        return;
-                      }
-
-                      if (org.googleSsoAuthEnforced) {
-                        await logout.mutateAsync();
-                        window.open(`/api/v1/sso/redirect/google?org_slug=${org.slug}`);
-                        window.close();
-                        return;
-                      }
-
-                      handleOrgChange(org?.id);
-                    }}
+            <div>
+              <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
+            </div>
+            <div className="whitespace-nowrap">Server Console</div>
+          </Link>
+          <p className="pl-3 pr-3 text-lg text-mineshaft-400/70">/</p>
+          {breadcrumbs ? (
+            // scott: remove /admin as we show server console above
+            <BreadcrumbContainer breadcrumbs={breadcrumbs.slice(1) as TBreadcrumbFormat[]} />
+          ) : null}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center">
+            <DropdownMenu modal={false}>
+              <Link to="/organization/projects">
+                <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
+                  <div>
+                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
+                  </div>
+                  <div className="whitespace-nowrap">{currentOrg?.name}</div>
+                  <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
+                    {getPlan(subscription)}
+                  </div>
+                </div>
+              </Link>
+              <DropdownMenuTrigger asChild>
+                <div>
+                  <IconButton
                     variant="plain"
                     colorSchema="secondary"
-                    size="xs"
-                    className="flex w-full items-center justify-start p-0 font-normal"
-                    leftIcon={
-                      currentOrg?.id === org.id && (
-                        <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
-                      )
-                    }
+                    ariaLabel="switch-org"
+                    className="px-2 py-1"
                   >
-                    <div className="flex w-full max-w-[150px] items-center justify-between truncate">
-                      {org.name}
-                    </div>
-                  </Button>
+                    <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
+                  </IconButton>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="start"
+                side="bottom"
+                className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
+                style={{ minWidth: "220px" }}
+              >
+                <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">organizations</div>
+                {orgs?.map((org) => {
+                  return (
+                    <DropdownMenuItem key={org.id}>
+                      <Button
+                        onClick={async () => {
+                          if (currentOrg?.id === org.id) return;
+
+                          if (org.authEnforced) {
+                            // org has an org-level auth method enabled (e.g. SAML)
+                            // -> logout + redirect to SAML SSO
+
+                            await logout.mutateAsync();
+                            if (org.orgAuthMethod === AuthMethod.OIDC) {
+                              window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
+                            } else {
+                              window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
+                            }
+                            window.close();
+                            return;
+                          }
+
+                          if (org.googleSsoAuthEnforced) {
+                            await logout.mutateAsync();
+                            window.open(`/api/v1/sso/redirect/google?org_slug=${org.slug}`);
+                            window.close();
+                            return;
+                          }
+
+                          handleOrgChange(org?.id);
+                        }}
+                        variant="plain"
+                        colorSchema="secondary"
+                        size="xs"
+                        className="flex w-full items-center justify-start p-0 font-normal"
+                        leftIcon={
+                          currentOrg?.id === org.id && (
+                            <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                          )
+                        }
+                      >
+                        <div className="flex w-full max-w-[150px] items-center justify-between truncate">
+                          {org.name}
+                        </div>
+                      </Button>
+                    </DropdownMenuItem>
+                  );
+                })}
+                <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
+                  Log Out
                 </DropdownMenuItem>
-              );
-            })}
-            <div className="mt-1 h-1 border-t border-mineshaft-600" />
-            <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
-              Log Out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
-      {breadcrumbs ? (
-        <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-      ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
+          {breadcrumbs ? (
+            <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
+          ) : null}
+        </>
+      )}
       <div className="flex-grow" />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>

frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx

@@ -27,11 +27,11 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
             target="_blank"
             className="group flex items-center"
           >
-            <span className="cursor-pointer pl-1 text-yellow-500 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
+            <span className="cursor-pointer pl-1 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
               here
             </span>
             <FontAwesomeIcon
-              className="ml-0.5 mt-0.5 text-yellow group-hover:text-mineshaft-100"
+              className="ml-1 mt-[0.12rem] group-hover:text-mineshaft-100"
               icon={faArrowUpRightFromSquare}
               size="xs"
             />

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx

@@ -36,7 +36,10 @@ export const AssumePrivilegeModeBanner = () => {
               },
               {
                 onSuccess: () => {
-                  const url = getProjectHomePage(currentWorkspace.type);
+                  const url = getProjectHomePage(
+                    currentWorkspace.type,
+                    currentWorkspace.environments
+                  );
                   window.location.href = url.replace("$projectId", currentWorkspace.id);
                 }
               }

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -101,7 +101,7 @@ export const ProjectSelect = () => {
     <div className="-mr-2 flex w-full items-center gap-1">
       <DropdownMenu modal={false}>
         <Link
-          to={getProjectHomePage(currentWorkspace.type)}
+          to={getProjectHomePage(currentWorkspace.type, currentWorkspace.environments)}
           params={{
             projectId: currentWorkspace.id
           }}
@@ -158,7 +158,7 @@ export const ProjectSelect = () => {
                       // to reproduce change this back to router.push and switch between two projects with different env count
                       // look into this on dashboard revamp
                       const url = linkOptions({
-                        to: getProjectHomePage(workspace.type),
+                        to: getProjectHomePage(workspace.type, workspace.environments),
                         params: {
                           projectId: workspace.id
                         }

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -11,7 +11,7 @@ import {
   faVault
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
 import { Badge, Lottie, Menu, MenuGroup, MenuItem } from "@app/components/v2";
@@ -31,6 +31,7 @@ export const SecretManagerLayout = () => {
   const { t } = useTranslation();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
+  const location = useLocation();
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
     workspaceId
@@ -73,11 +74,21 @@ export const SecretManagerLayout = () => {
                     <Link
                       to="/projects/secret-management/$projectId/overview"
                       params={{
-                        projectId: currentWorkspace.id
+                        projectId: currentWorkspace.id,
+                        ...(currentWorkspace.environments.length
+                          ? { envSlug: currentWorkspace.environments[0]?.slug }
+                          : {})
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem
+                          isSelected={
+                            isActive ||
+                            location.pathname.startsWith(
+                              `/projects/secret-management/${currentWorkspace.id}/overview`
+                            )
+                          }
+                        >
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faVault} />

frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx

@@ -3,23 +3,23 @@ import { useTranslation } from "react-i18next";
 
 import { PageHeader } from "@app/components/v2";
 
-import { OrganizationsTable } from "./components";
+import { ServerAdminsTable } from "./components";
 
-export const OrganizationResourcesPage = () => {
+export const AccessManagementPage = () => {
   const { t } = useTranslation();
 
   return (
     <div className="h-full bg-bunker-800">
       <Helmet>
-        <title>{t("common.head-title", { title: "Admin" })}</title>
+        <title>{t("common.head-title", { title: "Access Control" })}</title>
       </Helmet>
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
-            title="Organizations"
-            description="Manage all organizations within your Infisical instance."
+            title="Access Control"
+            description="Manage server admins within your Infisical instance."
           />
-          <OrganizationsTable />
+          <ServerAdminsTable />
         </div>
       </div>
     </div>

frontend/src/pages/admin/AccessManagementPage/components/AddServerAdminModal.tsx

@@ -0,0 +1,141 @@
+import { useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2";
+import { useDebounce } from "@app/hooks";
+import { useAdminGetUsers, useAdminGrantServerAdminAccess } from "@app/hooks/api";
+import { User } from "@app/hooks/api/users/types";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+type ContentProps = {
+  onClose: () => void;
+};
+
+const getUserLabel = (user: Pick<User, "email" | "firstName" | "lastName" | "username" | "id">) => {
+  const { firstName, lastName, username, email } = user;
+
+  const name = `${firstName ?? ""} ${lastName ?? ""}`.trim();
+  const userEmail = email || username;
+
+  if (!name) return userEmail;
+
+  return `${name}${userEmail ? ` (${userEmail})` : ""}`;
+};
+
+const AddServerAdminSchema = z.object({
+  user: z.object({
+    id: z.string(),
+    firstName: z.string().nullish(),
+    lastName: z.string().nullish(),
+    email: z.string().nullish(),
+    username: z.string()
+  })
+});
+
+type FormData = z.infer<typeof AddServerAdminSchema>;
+
+const Content = ({ onClose }: ContentProps) => {
+  const grantAdmin = useAdminGrantServerAdminAccess();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(AddServerAdminSchema)
+  });
+
+  const [searchUserFilter, setSearchUserFilter] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
+
+  const { data, isFetching } = useAdminGetUsers(
+    {
+      limit: 20,
+      searchTerm: debouncedSearchTerm,
+      adminsOnly: false
+    },
+    {
+      placeholderData: (prev) => prev
+    }
+  );
+
+  const users = useMemo(() => data?.pages.flat().filter((user) => !user.superAdmin) ?? [], [data]);
+
+  const onSubmit = async ({ user }: FormData) => {
+    try {
+      await grantAdmin.mutateAsync(user.id);
+
+      createNotification({
+        type: "success",
+        text: "Successfully granted server admin status"
+      });
+      onClose();
+    } catch {
+      createNotification({
+        text: "Failed to grant server admin status",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        render={({ field, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="User">
+            <FilterableSelect
+              isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
+              className="w-full"
+              placeholder="Search users..."
+              options={users}
+              getOptionLabel={(user) => getUserLabel(user)}
+              getOptionValue={(user) => user.id}
+              value={field.value}
+              onChange={field.onChange}
+              onInputChange={(value) => {
+                setSearchUserFilter(value);
+                if (!value) setDebouncedSearchTerm("");
+              }}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="user"
+      />
+      <div className="flex w-full gap-4 pt-4">
+        <Button
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+          colorSchema="secondary"
+        >
+          Grant
+        </Button>
+        <Button onClick={() => onClose()} variant="plain" colorSchema="secondary">
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export const AddServerAdminModal = ({ isOpen, onOpenChange }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        bodyClassName="overflow-visible"
+        title="Grant Server Admin"
+        subTitle="Grant server admin status to a user"
+      >
+        <Content onClose={() => onOpenChange(false)} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx

@@ -0,0 +1,476 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import {
+  faEllipsisV,
+  faMagnifyingGlass,
+  faPlus,
+  faShieldHalved,
+  faTrash,
+  faUsers,
+  faUserXmark,
+  faWarning,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { InfiniteData } from "@tanstack/react-query";
+import { twMerge } from "tailwind-merge";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import {
+  Badge,
+  Button,
+  Checkbox,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useSubscription, useUser } from "@app/context";
+import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  useAdminBulkDeleteUsers,
+  useAdminDeleteUser,
+  useAdminGetUsers,
+  useRemoveUserServerAdminAccess
+} from "@app/hooks/api";
+import { User } from "@app/hooks/api/users/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+import { AddServerAdminModal } from "@app/pages/admin/AccessManagementPage/components/AddServerAdminModal";
+
+const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions from user";
+
+const ServerAdminsPanelTable = ({
+  handlePopUpOpen,
+  users: usersPages,
+  isPending,
+  searchUserFilter,
+  setSearchUserFilter,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  selectedUsers,
+  setSelectedUsers
+}: {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["removeUser", "upgradePlan", "addServerAdmin", "removeServerAdmin"]
+    >,
+    data?: {
+      username: string;
+      id: string;
+      message?: string;
+    }
+  ) => void;
+  isPending: boolean;
+  users: InfiniteData<User[], unknown> | undefined;
+  searchUserFilter: string;
+  setSearchUserFilter: (filter: string) => void;
+  selectedUsers: User[];
+  setSelectedUsers: Dispatch<SetStateAction<User[]>>;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+}) => {
+  const { subscription } = useSubscription();
+
+  const users = usersPages?.pages.flat();
+
+  const isEmpty = !isPending && !users?.length;
+
+  const selectedUserIds = selectedUsers.map((user) => user.id);
+
+  const isPageSelected = users?.length
+    ? users.every((user) => selectedUserIds.includes(user.id))
+    : false;
+
+  // eslint-disable-next-line no-nested-ternary
+  const isPageIndeterminate = isPageSelected
+    ? false
+    : users?.length
+      ? users?.some((user) => selectedUserIds.includes(user.id))
+      : false;
+
+  return (
+    <>
+      <div className="flex items-center gap-x-2">
+        <Input
+          value={searchUserFilter}
+          onChange={(e) => setSearchUserFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search admins..."
+          className="flex-1"
+        />
+        <Button
+          colorSchema="secondary"
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => handlePopUpOpen("addServerAdmin")}
+        >
+          Add Admin
+        </Button>
+      </div>
+      <div className="mt-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-5">
+                  <Checkbox
+                    id="member-page-select"
+                    isChecked={isPageSelected || isPageIndeterminate}
+                    isIndeterminate={isPageIndeterminate}
+                    onCheckedChange={() => {
+                      if (isPageSelected) {
+                        setSelectedUsers((prev) =>
+                          prev.filter((u) => !users?.find((user) => user.id === u.id))
+                        );
+                      } else {
+                        setSelectedUsers((prev) => [
+                          ...prev,
+                          ...(users?.filter((u) => !prev.find((user) => user.id === u.id)) ?? [])
+                        ]);
+                      }
+                    }}
+                  />
+                </Th>
+                <Th className="w-5/12">Name</Th>
+                <Th className="w-1/2">Username</Th>
+                <Th className="w-2/12" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={4} innerKey="users" />}
+              {!isPending &&
+                users?.map((user) => {
+                  const { username, email, firstName, lastName, id } = user;
+                  const name = firstName || lastName ? `${firstName} ${lastName}` : null;
+
+                  const isSelected = selectedUserIds.includes(id);
+                  return (
+                    <Tr key={`user-${id}`} className="w-full">
+                      <Td>
+                        <Checkbox
+                          id={`select-user-${id}`}
+                          isChecked={isSelected}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedUsers((prev) =>
+                              isSelected ? prev.filter((u) => u.id !== id) : [...prev, user]
+                            );
+                          }}
+                        />
+                      </Td>
+                      <Td className="w-5/12 max-w-0">
+                        <p className="truncate">
+                          {name ?? <span className="text-mineshaft-400">Not Set</span>}
+                        </p>
+                      </Td>
+                      <Td className="w-5/12 max-w-0">
+                        <p className="truncate">{username || email}</p>
+                      </Td>
+                      <Td>
+                        <div className="flex justify-end">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <IconButton
+                                ariaLabel="Options"
+                                colorSchema="secondary"
+                                className="w-6"
+                                variant="plain"
+                              >
+                                <FontAwesomeIcon icon={faEllipsisV} />
+                              </IconButton>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent sideOffset={2} align="end">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("removeUser", { username, id });
+                                }}
+                                icon={<FontAwesomeIcon icon={faUserXmark} />}
+                              >
+                                Remove User
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                icon={
+                                  <div className="relative">
+                                    <FontAwesomeIcon icon={faShieldHalved} />
+                                    <FontAwesomeIcon
+                                      className="absolute -bottom-[0.01rem] -right-1"
+                                      size="2xs"
+                                      icon={faXmark}
+                                    />
+                                  </div>
+                                }
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  if (!subscription?.instanceUserManagement) {
+                                    handlePopUpOpen("upgradePlan", {
+                                      username,
+                                      id,
+                                      message: removeServerAdminUpgradePlanMessage
+                                    });
+                                    return;
+                                  }
+                                  handlePopUpOpen("removeServerAdmin", { username, id });
+                                }}
+                              >
+                                Remove Server Admin
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
+        </TableContainer>
+        {!isEmpty && (
+          <Button
+            className="mt-4 py-3 text-sm"
+            isFullWidth
+            variant="outline_bg"
+            isLoading={isFetchingNextPage}
+            isDisabled={isFetchingNextPage || !hasNextPage}
+            onClick={() => fetchNextPage()}
+          >
+            {hasNextPage ? "Load More" : "End of List"}
+          </Button>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const ServerAdminsTable = () => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeUser",
+    "upgradePlan",
+    "addServerAdmin",
+    "removeServerAdmin",
+    "removeUsers"
+  ] as const);
+
+  const {
+    user: { id: userId }
+  } = useUser();
+
+  const { mutateAsync: deleteUser } = useAdminDeleteUser();
+  const { mutateAsync: deleteUsers } = useAdminBulkDeleteUsers();
+  const { mutateAsync: removeAdminAccess } = useRemoveUserServerAdminAccess();
+
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [searchUserFilter, setSearchUserFilter] = useState("");
+  const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
+
+  const {
+    data: users,
+    isPending,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useAdminGetUsers({
+    limit: 20,
+    searchTerm: debouncedSearchTerm,
+    adminsOnly: true
+  });
+
+  const handleRemoveUser = async () => {
+    const { id } = popUp?.removeUser?.data as { id: string; username: string };
+
+    try {
+      await deleteUser(id);
+      createNotification({
+        type: "success",
+        text: "Successfully deleted user"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Error deleting user"
+      });
+    }
+
+    handlePopUpClose("removeUser");
+  };
+
+  const handleRemoveServerAdminAccess = async () => {
+    const { id } = popUp?.removeServerAdmin?.data as { id: string; username: string };
+
+    try {
+      await removeAdminAccess(id);
+      createNotification({
+        type: "success",
+        text: "Successfully removed server admin access from user"
+      });
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Error removing server admin access from user"
+      });
+    }
+
+    handlePopUpClose("removeServerAdmin");
+  };
+
+  const handleRemoveUsers = async () => {
+    try {
+      await deleteUsers(selectedUsers.map((user) => user.id));
+
+      createNotification({
+        text: "Successfully removed users",
+        type: "success"
+      });
+
+      setSelectedUsers([]);
+      handlePopUpClose("removeUsers");
+    } catch {
+      createNotification({
+        text: "Failed to remove users",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "h-0 flex-shrink-0 overflow-hidden transition-all",
+          selectedUsers.length > 0 && "h-16"
+        )}
+      >
+        <div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
+          <div className="mr-2 text-sm">{selectedUsers.length} Selected</div>
+          <button
+            type="button"
+            className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
+            onClick={() => setSelectedUsers([])}
+          >
+            Unselect All
+          </button>
+          <Button
+            variant="outline_bg"
+            colorSchema="danger"
+            leftIcon={<FontAwesomeIcon icon={faTrash} />}
+            className="ml-2"
+            onClick={() => {
+              if (!selectedUsers?.length) return;
+
+              handlePopUpOpen("removeUsers");
+            }}
+            size="xs"
+          >
+            Delete
+          </Button>
+        </div>
+      </div>
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <ServerAdminsPanelTable
+          handlePopUpOpen={handlePopUpOpen}
+          users={users}
+          selectedUsers={selectedUsers}
+          setSelectedUsers={setSelectedUsers}
+          searchUserFilter={searchUserFilter}
+          setSearchUserFilter={setSearchUserFilter}
+          isPending={isPending}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+        />
+        <DeleteActionModal
+          isOpen={popUp.removeUser.isOpen}
+          deleteKey="remove"
+          title={`Are you sure you want to delete User with username ${
+            (popUp?.removeUser?.data as { id: string; username: string })?.username || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("removeUser", isOpen)}
+          onDeleteApproved={handleRemoveUser}
+        />
+        <DeleteActionModal
+          isOpen={popUp.removeServerAdmin.isOpen}
+          title={`Are you sure you want to remove Server Admin permissions from ${
+            (popUp?.removeServerAdmin?.data as { id: string; username: string })?.username || ""
+          }?`}
+          subTitle=""
+          onChange={(isOpen) => handlePopUpToggle("removeServerAdmin", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={handleRemoveServerAdminAccess}
+          buttonText="Remove Access"
+        />
+        <AddServerAdminModal
+          isOpen={popUp.addServerAdmin.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("addServerAdmin", isOpen)}
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={`${popUp?.upgradePlan?.data?.message} is only available on Infisical's Pro plan and above.`}
+        />
+        <DeleteActionModal
+          isOpen={popUp.removeUsers.isOpen}
+          title="Are you sure you want to delete the following users?"
+          onChange={(isOpen) => handlePopUpToggle("removeUsers", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => handleRemoveUsers()}
+          buttonText="Remove"
+        >
+          <div className="mt-4 text-sm text-mineshaft-400">
+            The following users will be deleted:
+          </div>
+          <div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
+            <ul className="list-disc">
+              {selectedUsers?.map((user) => {
+                const email = user.email ?? user.username;
+                return (
+                  <li key={user.id}>
+                    <div className="flex items-center">
+                      <p>
+                        {user.firstName || user.lastName ? (
+                          <>
+                            {`${`${user.firstName} ${user.lastName}`.trim()} `}(
+                            <span className="break-all">{email}</span>)
+                          </>
+                        ) : (
+                          <span className="break-all">{email}</span>
+                        )}{" "}
+                      </p>
+                      {userId === user.id && (
+                        <Tooltip content="Are you sure you want to remove yourself from this instance?">
+                          <div className="inline-block">
+                            <Badge
+                              variant="primary"
+                              className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                            >
+                              <FontAwesomeIcon icon={faWarning} />
+                              <span>Deleting Yourself</span>
+                            </Badge>
+                          </div>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </DeleteActionModal>
+      </div>
+    </>
+  );
+};

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

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

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

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

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

@@ -2,11 +2,13 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
 import { PageHeader } from "@app/components/v2";
+import { useGetServerConfig } from "@app/hooks/api/admin";
 
-import { GeneralPageForm } from "./components";
+import { GeneralPageForm, UsageReportSection } from "./components";
 
 export const GeneralPage = () => {
   const { t } = useTranslation();
+  const { data: serverConfig } = useGetServerConfig();
 
   return (
     <div className="h-full bg-bunker-800">
@@ -19,7 +21,10 @@ export const GeneralPage = () => {
             title="General"
             description="Manage general settings for your Infisical instance."
           />
-          <GeneralPageForm />
+          <div className="space-y-6">
+            <GeneralPageForm />
+            {serverConfig?.isOfflineUsageReportsEnabled && <UsageReportSection />}
+          </div>
         </div>
       </div>
     </div>

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

@@ -103,7 +103,7 @@ export const GeneralPageForm = () => {
 
   return (
     <form
-      className="space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div className="flex flex-col justify-start">

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

@@ -0,0 +1,53 @@
+import { faDownload, faFileAlt, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, Card, CardTitle } from "@app/components/v2";
+import { downloadFile } from "@app/helpers/download";
+import { useGenerateUsageReport } from "@app/hooks/api/admin/mutation";
+
+export const UsageReportSection = () => {
+  const generateUsageReport = useGenerateUsageReport();
+
+  const handleGenerateReport = async () => {
+    try {
+      const response = await generateUsageReport.mutateAsync();
+      const { csvContent, filename } = response;
+
+      downloadFile(csvContent, filename, "text/csv");
+
+      createNotification({
+        text: `Usage report downloaded: "${filename}"`,
+        type: "success"
+      });
+    } catch (error) {
+      console.error("Failed to generate usage report:", error);
+      createNotification({
+        text: "Failed to generate usage report. Please try again.",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Card className="p-6">
+      <CardTitle className="mb-4 flex items-center gap-3">
+        <FontAwesomeIcon icon={faFileAlt} />
+        Offline Usage Reports
+      </CardTitle>
+
+      <div className="mb-4 text-sm text-gray-400">
+        Generate secure usage reports for offline license compliance and billing verification.
+      </div>
+
+      <Button
+        onClick={handleGenerateReport}
+        className="w-fit"
+        isLoading={generateUsageReport.isPending}
+        leftIcon={<FontAwesomeIcon icon={generateUsageReport.isPending ? faSpinner : faDownload} />}
+      >
+        {generateUsageReport.isPending ? "Generating..." : "Generate Report"}
+      </Button>
+    </Card>
+  );
+};

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

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

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

@@ -1,27 +0,0 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
-
-import { PageHeader } from "@app/components/v2";
-
-import { MachineIdentitiesTable } from "./components";
-
-export const MachineIdentitiesResourcesPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="h-full bg-bunker-800">
-      <Helmet>
-        <title>{t("common.head-title", { title: "Admin" })}</title>
-      </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader
-            title="Machine Identities"
-            description="Manage all machine identities within your Infisical instance."
-          />
-          <MachineIdentitiesTable />
-        </div>
-      </div>
-    </div>
-  );
-};

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

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

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

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

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

@@ -1,396 +0,0 @@
-import { useState } from "react";
-import {
-  faBuilding,
-  faCircleQuestion,
-  faEllipsis,
-  faMagnifyingGlass
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Badge,
-  Button,
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  EmptyState,
-  Input,
-  Modal,
-  ModalContent,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import { useDebounce, usePopUp } from "@app/hooks";
-import {
-  useAdminDeleteOrganization,
-  useAdminDeleteOrganizationMembership,
-  useAdminDeleteUser,
-  useAdminGetOrganizations
-} from "@app/hooks/api";
-import { OrganizationWithProjects } from "@app/hooks/api/admin/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-const ViewMembersModalContent = ({
-  popUp,
-  handlePopUpOpen
-}: {
-  popUp: UsePopUpState<["viewMembers"]>;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>,
-    data?: {
-      username?: string;
-      membershipId?: string;
-      userId?: string;
-      orgName?: string;
-      orgId?: string;
-      organization?: OrganizationWithProjects;
-    }
-  ) => void;
-}) => {
-  const organization = popUp.viewMembers?.data?.organization as OrganizationWithProjects;
-
-  return (
-    <div className="space-y-2">
-      {organization?.members?.map((member) => (
-        <div className="flex items-center justify-between gap-2 rounded-md bg-mineshaft-700 px-4 py-2">
-          <div>
-            <div className="flex items-center gap-2">
-              <p className="text-xs text-mineshaft-100">
-                <div>
-                  {member.user.firstName ? (
-                    <div>
-                      {member.user.firstName} {member.user.lastName}
-                    </div>
-                  ) : (
-                    <p className="text-mineshaft-400">Not set</p>
-                  )}
-                </div>
-                <div className="flex gap-2 opacity-80">
-                  <div>{member.user.username || member.user.email}</div>
-                  <Badge variant="primary">
-                    <div className="flex items-center gap-1">
-                      <span className="capitalize">{member.role.replace("-", " ")}</span>
-                      {Boolean(member.roleId) && (
-                        <Tooltip content="This member has a custom role assigned.">
-                          <FontAwesomeIcon icon={faCircleQuestion} className="text-xs" />
-                        </Tooltip>
-                      )}
-                    </div>
-                  </Badge>
-                </div>
-              </p>
-            </div>
-          </div>
-          <div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <FontAwesomeIcon
-                  icon={faEllipsis}
-                  className="cursor-pointer text-sm text-mineshaft-400 transition-all hover:text-primary-500"
-                />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
-                <DropdownMenuItem
-                  onClick={() =>
-                    handlePopUpOpen("deleteOrganizationMembership", {
-                      membershipId: member.membershipId,
-                      orgId: organization.id,
-                      username: member.user.username,
-                      orgName: organization.name
-                    })
-                  }
-                >
-                  Remove From Organization
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => handlePopUpOpen("deleteUser", { userId: member.user.id })}
-                >
-                  Delete User
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const ViewMembersModal = ({
-  isOpen,
-  onOpenChange,
-  popUp,
-  handlePopUpOpen
-}: {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  popUp: UsePopUpState<["viewMembers", "deleteOrganizationMembership", "deleteUser"]>;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>
-  ) => void;
-}) => {
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent
-        onOpenAutoFocus={(event) => {
-          event.preventDefault();
-        }}
-        title="Organization Members"
-        subTitle="View the members of the organization."
-      >
-        <ViewMembersModalContent popUp={popUp} handlePopUpOpen={handlePopUpOpen} />
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const OrganizationsPanelTable = ({
-  popUp,
-  handlePopUpOpen,
-  handlePopUpToggle
-}: {
-  popUp: UsePopUpState<
-    ["deleteOrganization", "viewMembers", "deleteOrganizationMembership", "deleteUser"]
-  >;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<
-      ["deleteOrganization", "viewMembers", "deleteOrganizationMembership", "deleteUser"]
-    >,
-    data?: {
-      orgName?: string;
-      orgId?: string;
-      message?: string;
-      organization?: OrganizationWithProjects;
-    }
-  ) => void;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["deleteOrganization", "viewMembers"]>,
-    isOpen?: boolean
-  ) => void;
-}) => {
-  const [searchOrganizationsFilter, setSearchOrganizationsFilter] = useState("");
-  const [debouncedSearchTerm] = useDebounce(searchOrganizationsFilter, 500);
-
-  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } =
-    useAdminGetOrganizations({
-      limit: 20,
-      searchTerm: debouncedSearchTerm
-    });
-
-  const isEmpty = !isPending && !data?.pages?.[0].length;
-
-  return (
-    <>
-      <div className="flex gap-2">
-        <Input
-          value={searchOrganizationsFilter}
-          onChange={(e) => setSearchOrganizationsFilter(e.target.value)}
-          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search organizations..."
-          className="flex-1"
-        />
-      </div>
-      <div className="mt-4">
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th className="w-5/12">Name</Th>
-                <Th className="w-5/12">Members</Th>
-                <Th className="w-5/12">Projects</Th>
-                <Th className="w-5" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isPending && <TableSkeleton columns={4} innerKey="organizations" />}
-              {!isPending &&
-                data?.pages?.map((orgs) =>
-                  orgs.map((org) => {
-                    return (
-                      <Tr key={`org-${org.id}`} className="w-full">
-                        <Td className="w-5/12">
-                          {org.name ? (
-                            org.name
-                          ) : (
-                            <span className="text-mineshaft-400">Not set</span>
-                          )}
-                        </Td>
-                        <Td className="w-5/12">
-                          {org.members.length} {org.members.length === 1 ? "member" : "members"}
-                          <Button
-                            variant="outline_bg"
-                            size="xs"
-                            className="ml-2"
-                            onClick={() => handlePopUpOpen("viewMembers", { organization: org })}
-                          >
-                            View Members
-                          </Button>
-                        </Td>
-                        <Td className="w-5/12">
-                          {org.projects.length} {org.projects.length === 1 ? "project" : "projects"}
-                        </Td>
-                        <Td>
-                          <div className="flex justify-end">
-                            <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>
-                              <DropdownMenuContent align="start" className="p-1">
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handlePopUpOpen("deleteOrganization", {
-                                      orgId: org.id,
-                                      orgName: org.name
-                                    });
-                                  }}
-                                >
-                                  Delete Organization
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </div>
-                        </Td>
-                      </Tr>
-                    );
-                  })
-                )}
-            </TBody>
-          </Table>
-          {!isPending && isEmpty && <EmptyState title="No organizations found" icon={faBuilding} />}
-        </TableContainer>
-        {!isEmpty && (
-          <Button
-            className="mt-4 py-3 text-sm"
-            isFullWidth
-            variant="outline_bg"
-            isLoading={isFetchingNextPage}
-            isDisabled={isFetchingNextPage || !hasNextPage}
-            onClick={() => fetchNextPage()}
-          >
-            {hasNextPage ? "Load More" : "End of list"}
-          </Button>
-        )}
-      </div>
-      <ViewMembersModal
-        popUp={popUp}
-        handlePopUpOpen={handlePopUpOpen}
-        isOpen={popUp.viewMembers.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("viewMembers", isOpen)}
-      />
-    </>
-  );
-};
-
-export const OrganizationsTable = () => {
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "deleteOrganization",
-    "deleteOrganizationMembership",
-    "deleteUser",
-    "viewMembers"
-  ] as const);
-
-  const { mutateAsync: deleteOrganization } = useAdminDeleteOrganization();
-  const { mutateAsync: deleteOrganizationMembership } = useAdminDeleteOrganizationMembership();
-  const { mutateAsync: deleteUser } = useAdminDeleteUser();
-
-  const handleDeleteOrganization = async () => {
-    const { orgId } = popUp?.deleteOrganization?.data as { orgId: string };
-
-    await deleteOrganization(orgId);
-    createNotification({
-      type: "success",
-      text: "Successfully deleted organization"
-    });
-
-    handlePopUpClose("deleteOrganization");
-  };
-
-  const handleDeleteOrganizationMembership = async () => {
-    const { orgId, membershipId } = popUp?.deleteOrganizationMembership?.data as {
-      orgId: string;
-      membershipId: string;
-    };
-
-    if (!orgId || !membershipId) {
-      return;
-    }
-
-    await deleteOrganizationMembership({ organizationId: orgId, membershipId });
-    createNotification({
-      type: "success",
-      text: "Successfully removed user from organization"
-    });
-
-    handlePopUpClose("viewMembers");
-    handlePopUpClose("deleteOrganizationMembership");
-  };
-
-  const handleDeleteUser = async () => {
-    const { userId } = popUp?.deleteUser?.data as { userId: string };
-
-    if (!userId) {
-      return;
-    }
-
-    await deleteUser(userId);
-    createNotification({
-      type: "success",
-      text: "Successfully deleted user"
-    });
-
-    handlePopUpClose("viewMembers");
-    handlePopUpClose("deleteUser");
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <OrganizationsPanelTable
-        popUp={popUp}
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteOrganization.isOpen}
-        deleteKey="delete"
-        title={`Are you sure you want to delete organization ${
-          (popUp?.deleteOrganization?.data as { orgName: string })?.orgName || ""
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteOrganization", isOpen)}
-        onDeleteApproved={handleDeleteOrganization}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteOrganizationMembership.isOpen}
-        deleteKey="delete"
-        title={`Are you sure you want to remove ${
-          (popUp?.deleteOrganizationMembership?.data as { username: string })?.username || ""
-        } from organization ${
-          (popUp?.deleteOrganizationMembership?.data as { orgName: string })?.orgName || ""
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteOrganizationMembership", isOpen)}
-        onDeleteApproved={handleDeleteOrganizationMembership}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteUser.isOpen}
-        deleteKey="delete"
-        title={`Are you sure you want to delete user ${
-          (popUp?.deleteUser?.data as { username: string })?.username || ""
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteUser", isOpen)}
-        onDeleteApproved={handleDeleteUser}
-      />
-    </div>
-  );
-};

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

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

frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx

@@ -0,0 +1,42 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { MachineIdentitiesTable, OrganizationsTable, UserIdentitiesTable } from "./components";
+
+export const ResourceOverviewPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Resource Overview" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Resource Overview"
+            description="Manage resources within your Infisical instance."
+          />
+          <Tabs defaultValue="tab-organizations">
+            <TabList>
+              <Tab value="tab-organizations">Organizations</Tab>
+              <Tab value="tab-users">Users</Tab>
+              <Tab value="tab-identities">Identities</Tab>
+            </TabList>
+            <TabPanel value="tab-organizations">
+              <OrganizationsTable />
+            </TabPanel>
+            <TabPanel value="tab-users">
+              <UserIdentitiesTable />
+            </TabPanel>
+            <TabPanel value="tab-identities">
+              <MachineIdentitiesTable />
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/ResourceOverviewPage/components/AddOrganizationModal.tsx

@@ -0,0 +1,203 @@
+import { useMemo, useState } from "react";
+import { Controller, useFieldArray, 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, ModalContent } from "@app/components/v2";
+import { CreatableSelect } from "@app/components/v2/CreatableSelect";
+import { useDebounce } from "@app/hooks";
+import { useAdminGetUsers, useServerAdminCreateOrganization } from "@app/hooks/api";
+import { User } from "@app/hooks/api/users/types";
+import { GenericResourceNameSchema } from "@app/lib/schemas";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+type ContentProps = {
+  onClose: () => void;
+};
+
+type Invitee = Pick<User, "email" | "firstName" | "lastName" | "username" | "id">;
+type NewOption = { label: string; value: string };
+
+const getUserLabel = (user: Invitee | NewOption) => {
+  if (Object.prototype.hasOwnProperty.call(user, "value")) {
+    return (user as NewOption).label;
+  }
+
+  const { firstName, lastName, username, email } = user as Invitee;
+
+  const name = `${firstName ?? ""} ${lastName ?? ""}`.trim();
+  const userEmail = email || username;
+
+  if (!name) return userEmail;
+
+  return `${name}${userEmail ? ` (${userEmail})` : ""}`;
+};
+
+const AddOrgSchema = z.object({
+  name: GenericResourceNameSchema.nonempty("Organization name required"),
+  invitees: z
+    .object({
+      id: z.string(),
+      firstName: z.string().nullish(),
+      lastName: z.string().nullish(),
+      email: z.string().nullish(),
+      username: z.string().nullish()
+    })
+    .array()
+    .min(1, "At least one admin is required")
+});
+
+type FormData = z.infer<typeof AddOrgSchema>;
+
+const Content = ({ onClose }: ContentProps) => {
+  const createOrg = useServerAdminCreateOrganization();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting }
+  } = useForm({
+    defaultValues: {
+      name: "",
+      invitees: []
+    },
+    resolver: zodResolver(AddOrgSchema)
+  });
+
+  const [searchUserFilter, setSearchUserFilter] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
+
+  const { data, isFetching } = useAdminGetUsers(
+    {
+      limit: 20,
+      searchTerm: debouncedSearchTerm,
+      adminsOnly: false
+    },
+    {
+      placeholderData: (prev) => prev
+    }
+  );
+
+  const users = useMemo(() => data?.pages.flat() ?? [], [data]);
+
+  const onSubmit = async ({ name, invitees }: FormData) => {
+    try {
+      await createOrg.mutateAsync({
+        name,
+        inviteAdminEmails: invitees
+          .filter((user) => Boolean(user.email))
+          .map((user) => user.email) as string[]
+      });
+
+      createNotification({
+        type: "success",
+        text: "Successfully created organization"
+      });
+      onClose();
+    } catch {
+      createNotification({
+        text: "Failed to create organization",
+        type: "error"
+      });
+    }
+  };
+
+  const { append } = useFieldArray<FormData>({ control, name: "invitees" });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Name">
+            <Input autoFocus value={value} onChange={onChange} placeholder="My Organization" />
+          </FormControl>
+        )}
+        control={control}
+        name="name"
+      />
+      <Controller
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Assign Organization Admins"
+          >
+            <CreatableSelect
+              /* eslint-disable-next-line react/no-unstable-nested-components */
+              noOptionsMessage={() => (
+                <p>Invite new users to this organization by typing out their email address.</p>
+              )}
+              onCreateOption={(inputValue) =>
+                append({ id: `${inputValue}_${Math.random()}`, email: inputValue })
+              }
+              formatCreateLabel={(inputValue) => `Invite "${inputValue}"`}
+              isValidNewOption={(input) =>
+                Boolean(input) &&
+                z.string().email().safeParse(input).success &&
+                !users
+                  ?.flatMap((user) => {
+                    const emails: string[] = [];
+
+                    if (user.email) {
+                      emails.push(user.email);
+                    }
+
+                    if (user.username) {
+                      emails.push(user.username);
+                    }
+
+                    return emails;
+                  })
+                  .includes(input)
+              }
+              isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
+              className="w-full"
+              placeholder="Search users or invite new ones..."
+              isMulti
+              name="members"
+              options={users}
+              getOptionLabel={(user) => getUserLabel(user)}
+              getOptionValue={(user) => user.id}
+              value={field.value}
+              onChange={field.onChange}
+              onInputChange={(value) => {
+                setSearchUserFilter(value);
+                if (!value) setDebouncedSearchTerm("");
+              }}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="invitees"
+      />
+      <div className="flex w-full gap-4 pt-4">
+        <Button
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+          colorSchema="secondary"
+        >
+          Add Organization
+        </Button>
+        <Button onClick={() => onClose()} variant="plain" colorSchema="secondary">
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export const AddOrganizationModal = ({ isOpen, onOpenChange }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent bodyClassName="overflow-visible" title="Add Organization">
+        <Content onClose={() => onOpenChange(false)} />
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -2,8 +2,8 @@ import { useState } from "react";
 import {
   faEllipsisV,
   faMagnifyingGlass,
-  faServer,
   faShieldHalved,
+  faWrench,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -136,7 +136,7 @@ const IdentityPanelTable = ({
                 )}
             </TBody>
           </Table>
-          {!isPending && isEmpty && <EmptyState title="No identities found" icon={faServer} />}
+          {!isPending && isEmpty && <EmptyState title="No identities found" icon={faWrench} />}
         </TableContainer>
         {!isEmpty && (
           <Button
@@ -183,6 +183,12 @@ export const MachineIdentitiesTable = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-mineshaft-100">Machine Identities</p>
+          <p className="text-sm text-bunker-300">Manage machine identities across your instance.</p>
+        </div>
+      </div>
       <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.removeServerAdmin.isOpen}

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

@@ -0,0 +1,752 @@
+import { useMemo, useState } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faBuilding,
+  faCircleQuestion,
+  faEllipsisV,
+  faEnvelope,
+  faEye,
+  faMagnifyingGlass,
+  faPlus,
+  faTrash,
+  faUserCheck,
+  faUserMinus,
+  faUserPlus,
+  faUsers,
+  faUserXmark,
+  faWarning
+} 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 {
+  Badge,
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useUser } from "@app/context";
+import { OrgMembershipRole } from "@app/helpers/roles";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import {
+  useAdminDeleteOrganization,
+  useAdminDeleteOrganizationMembership,
+  useAdminDeleteUser,
+  useAdminGetOrganizations,
+  useServerAdminAccessOrg,
+  useServerAdminResendOrgInvite
+} from "@app/hooks/api";
+import { OrganizationWithProjects } from "@app/hooks/api/admin/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { OrgMembershipStatus } from "@app/hooks/api/organization/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+import { AddOrganizationModal } from "@app/pages/admin/ResourceOverviewPage/components/AddOrganizationModal";
+
+enum MembersOrderBy {
+  Name = "firstName",
+  Email = "email"
+}
+
+const ORG_MEMBERS_TABLE_LIMIT = 15;
+
+const ViewMembersModalContent = ({
+  popUp,
+  handlePopUpOpen
+}: {
+  popUp: UsePopUpState<["viewMembers"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>,
+    data?: {
+      username?: string;
+      membershipId?: string;
+      userId?: string;
+      orgName?: string;
+      orgId?: string;
+      organization?: OrganizationWithProjects;
+    }
+  ) => void;
+}) => {
+  const organization = popUp.viewMembers?.data?.organization as OrganizationWithProjects;
+  const [resendInviteId, setResendInviteId] = useState<string | null>(null);
+
+  const members = organization?.members ?? [];
+
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    orderBy,
+    setOrderBy,
+    setOrderDirection,
+    toggleOrderDirection
+  } = usePagination<MembersOrderBy>(MembersOrderBy.Name, {
+    initPerPage: ORG_MEMBERS_TABLE_LIMIT
+  });
+
+  const filteredMembers = useMemo(
+    () =>
+      members
+        ?.filter(
+          ({ user: u }) =>
+            u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
+            u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
+            u?.username?.toLowerCase().includes(search.toLowerCase()) ||
+            u?.email?.toLowerCase().includes(search.toLowerCase())
+        )
+        .sort((a, b) => {
+          const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          let valueOne: string | null;
+          let valueTwo: string | null;
+
+          switch (orderBy) {
+            case MembersOrderBy.Email:
+              valueOne = memberOne.user.email || memberOne.user.username;
+              valueTwo = memberTwo.user.email || memberTwo.user.username;
+              break;
+            case MembersOrderBy.Name:
+            default:
+              valueOne = memberOne.user.firstName ?? memberOne.user.lastName;
+              valueTwo = memberTwo.user.firstName ?? memberTwo.user.lastName;
+          }
+
+          if (!valueOne) return 1;
+          if (!valueTwo) return -1;
+
+          return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
+        }),
+    [members, search, orderBy, orderDirection]
+  );
+
+  const handleSort = (column: MembersOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  useResetPageHelper({
+    totalCount: filteredMembers.length,
+    offset,
+    setPage
+  });
+
+  const resendOrgInvite = useServerAdminResendOrgInvite();
+
+  const onResendInvite = async (membershipId: string) => {
+    setResendInviteId(membershipId);
+    try {
+      await resendOrgInvite.mutateAsync({
+        membershipId,
+        organizationId: organization.id
+      });
+
+      createNotification({
+        text: "Successfully resent org invitation",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to resend org invitation",
+        type: "error"
+      });
+    } finally {
+      setResendInviteId(null);
+    }
+  };
+
+  return (
+    <>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+      <TableContainer
+        className={twMerge(
+          "mt-4 flex flex-1 flex-col border border-mineshaft-500 bg-mineshaft-700",
+          Boolean(filteredMembers.length) && "rounded-b-none"
+        )}
+      >
+        <Table className="overflow-y-auto bg-mineshaft-700">
+          <THead className="sticky top-0 z-50">
+            <Tr>
+              <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
+                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === MembersOrderBy.Name ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(MembersOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC && orderBy === MembersOrderBy.Name
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/3 border-none bg-mineshaft-700 p-0">
+                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+                  Email
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === MembersOrderBy.Email ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(MembersOrderBy.Email)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC && orderBy === MembersOrderBy.Email
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/4 border-none bg-mineshaft-700 p-0">
+                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5">
+                  Role
+                </div>
+              </Th>
+              <Th className="w-5 border-none bg-mineshaft-700 p-0">
+                <div className="flex h-12 w-full items-center border-b-2 border-mineshaft-500 px-3 py-2.5" />
+              </Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {filteredMembers.slice(offset, perPage * page).map((member) => {
+              const { username, email, firstName, lastName, id } = member.user;
+              const { role, status } = member;
+              const name = firstName || lastName ? `${firstName} ${lastName}` : null;
+
+              return (
+                <Tr key={`user-${id}`} className="w-full">
+                  <Td className="max-w-0">
+                    <div className="flex items-center">
+                      <p className="truncate">
+                        {name ?? <span className="text-mineshaft-400">Not Set</span>}
+                      </p>
+                    </div>
+                  </Td>
+                  <Td className="max-w-0">
+                    <div className="flex items-center">
+                      <p className="truncate">{username || email}</p>
+                      {role === OrgMembershipRole.Admin &&
+                        status !== OrgMembershipStatus.Accepted && (
+                          <Button
+                            isDisabled={resendOrgInvite.isPending}
+                            className="ml-2 h-7 border-mineshaft-600 bg-mineshaft-800/50 font-normal"
+                            colorSchema="primary"
+                            variant="outline_bg"
+                            size="xs"
+                            isLoading={
+                              resendOrgInvite.isPending && resendInviteId === member.membershipId
+                            }
+                            leftIcon={<FontAwesomeIcon icon={faEnvelope} />}
+                            onClick={(e) => {
+                              onResendInvite(member.membershipId);
+                              e.stopPropagation();
+                            }}
+                          >
+                            Resend Invite
+                          </Button>
+                        )}
+                    </div>
+                  </Td>
+                  <Td className="max-w-0">
+                    <Badge className="flex w-fit max-w-full items-center gap-x-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
+                      <p className="truncate capitalize">{member.role.replace("-", " ")}</p>
+                      {Boolean(member.roleId) && (
+                        <Tooltip content="This member has a custom role assigned.">
+                          <FontAwesomeIcon icon={faCircleQuestion} className="w-3" />
+                        </Tooltip>
+                      )}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <div className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="Options"
+                            colorSchema="secondary"
+                            className="w-6"
+                            variant="plain"
+                          >
+                            <FontAwesomeIcon icon={faEllipsisV} />
+                          </IconButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent sideOffset={2} align="end">
+                          <DropdownMenuItem
+                            icon={<FontAwesomeIcon icon={faUserMinus} />}
+                            onClick={() =>
+                              handlePopUpOpen("deleteOrganizationMembership", {
+                                membershipId: member.membershipId,
+                                orgId: organization.id,
+                                username: member.user.username,
+                                orgName: organization.name
+                              })
+                            }
+                          >
+                            Remove From Organization
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            icon={<FontAwesomeIcon icon={faUserXmark} />}
+                            onClick={() =>
+                              handlePopUpOpen("deleteUser", { userId: member.user.id })
+                            }
+                          >
+                            Delete User
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </Td>
+                </Tr>
+              );
+            })}
+          </TBody>
+        </Table>
+        {!filteredMembers.length && (
+          <EmptyState
+            className="my-auto bg-mineshaft-700"
+            title={
+              members.length
+                ? "No organization members match search..."
+                : "No organization members found"
+            }
+            icon={faUsers}
+          />
+        )}
+      </TableContainer>
+      {Boolean(filteredMembers.length) && (
+        <Pagination
+          className="rounded-b-md border border-t-0 bg-mineshaft-700"
+          count={filteredMembers.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[ORG_MEMBERS_TABLE_LIMIT]}
+        />
+      )}
+    </>
+  );
+};
+
+const ViewMembersModal = ({
+  isOpen,
+  onOpenChange,
+  popUp,
+  handlePopUpOpen
+}: {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  popUp: UsePopUpState<["viewMembers", "deleteOrganizationMembership", "deleteUser"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>
+  ) => void;
+}) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+        }}
+        title="Organization Members"
+        subTitle="View the members of the organization."
+        className="h-full max-w-4xl"
+        bodyClassName="flex flex-col h-full"
+      >
+        <ViewMembersModalContent popUp={popUp} handlePopUpOpen={handlePopUpOpen} />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const OrganizationsPanelTable = ({
+  popUp,
+  handlePopUpOpen,
+  handlePopUpToggle
+}: {
+  popUp: UsePopUpState<
+    [
+      "deleteOrganization",
+      "viewMembers",
+      "deleteOrganizationMembership",
+      "deleteUser",
+      "createOrganization"
+    ]
+  >;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      [
+        "deleteOrganization",
+        "viewMembers",
+        "deleteOrganizationMembership",
+        "deleteUser",
+        "createOrganization"
+      ]
+    >,
+    data?: {
+      orgName?: string;
+      orgId?: string;
+      message?: string;
+      organization?: OrganizationWithProjects;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["deleteOrganization", "viewMembers"]>,
+    isOpen?: boolean
+  ) => void;
+}) => {
+  const [searchOrganizationsFilter, setSearchOrganizationsFilter] = useState("");
+  const [debouncedSearchTerm] = useDebounce(searchOrganizationsFilter, 500);
+
+  const { user } = useUser();
+
+  const navigate = useNavigate();
+  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useAdminGetOrganizations({
+      limit: 20,
+      searchTerm: debouncedSearchTerm
+    });
+
+  const isEmpty = !isPending && !data?.pages?.[0].length;
+
+  const { mutateAsync: accessOrganization } = useServerAdminAccessOrg();
+
+  const handleAccessOrg = async (orgId: string) => {
+    try {
+      await accessOrganization(orgId);
+
+      navigate({
+        to: "/login/select-organization",
+        search: {
+          org_id: orgId
+        }
+      });
+
+      createNotification({
+        text: "Successfully joined organization",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed to join organization",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <Input
+        value={searchOrganizationsFilter}
+        onChange={(e) => setSearchOrganizationsFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search organizations..."
+        className="flex-1"
+      />
+      <div className="mt-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-1/2">Name</Th>
+                <Th className="w-1/3">Members</Th>
+                <Th className="w-1/3">Projects</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={4} innerKey="organizations" />}
+              {!isPending &&
+                data?.pages?.map((orgs) =>
+                  orgs.map((org) => {
+                    const isMember = org.members.find((member) => member.user.id === user.id);
+
+                    return (
+                      <Tr key={`org-${org.id}`} className="w-full">
+                        <Td className="w-1/2 max-w-0">
+                          <div className="flex items-center gap-x-1.5">
+                            {org.name ? (
+                              <p className="truncate">{org.name}</p>
+                            ) : (
+                              <span className="text-mineshaft-400">Not Set</span>
+                            )}
+                          </div>
+                        </Td>
+                        <Td className="w-1/3">
+                          <button
+                            type="button"
+                            onClick={() => handlePopUpOpen("viewMembers", { organization: org })}
+                            className="flex items-center hover:underline"
+                          >
+                            <Tooltip className="text-center" content="View Members">
+                              <FontAwesomeIcon
+                                icon={faEye}
+                                className="mr-1.5 text-mineshaft-300"
+                                size="sm"
+                              />
+                            </Tooltip>
+                            {org.members.length} {org.members.length === 1 ? "Member" : "Members"}
+                            {!org.members.some(
+                              (member) =>
+                                member.role === OrgMembershipRole.Admin &&
+                                member.status === OrgMembershipStatus.Accepted
+                            ) && (
+                              <Tooltip content="No admins have accepted their invitations.">
+                                <div className="ml-1.5">
+                                  <FontAwesomeIcon className="text-yellow" icon={faWarning} />
+                                </div>
+                              </Tooltip>
+                            )}
+                          </button>
+                        </Td>
+                        <Td className="w-1/3">
+                          {org.projects.length} {org.projects.length === 1 ? "Project" : "Projects"}
+                        </Td>
+                        <Td>
+                          <div className="flex justify-end gap-x-1">
+                            {isMember && (
+                              <Tooltip
+                                className="text-center"
+                                content="You are a member of this organization"
+                              >
+                                <div>
+                                  <FontAwesomeIcon
+                                    className="text-mineshaft-400"
+                                    icon={faUserCheck}
+                                    size="sm"
+                                  />
+                                </div>
+                              </Tooltip>
+                            )}
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <IconButton
+                                  ariaLabel="Options"
+                                  colorSchema="secondary"
+                                  className="w-6"
+                                  variant="plain"
+                                >
+                                  <FontAwesomeIcon icon={faEllipsisV} />
+                                </IconButton>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent sideOffset={2} align="end">
+                                {!isMember && (
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleAccessOrg(org.id);
+                                    }}
+                                    icon={<FontAwesomeIcon icon={faUserPlus} />}
+                                  >
+                                    Join Organization
+                                  </DropdownMenuItem>
+                                )}
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("deleteOrganization", {
+                                      orgId: org.id,
+                                      orgName: org.name
+                                    });
+                                  }}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
+                                >
+                                  Delete Organization
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </Td>
+                      </Tr>
+                    );
+                  })
+                )}
+            </TBody>
+          </Table>
+          {!isPending && isEmpty && <EmptyState title="No organizations found" icon={faBuilding} />}
+        </TableContainer>
+        {!isEmpty && (
+          <Button
+            className="mt-4 py-3 text-sm"
+            isFullWidth
+            variant="outline_bg"
+            isLoading={isFetchingNextPage}
+            isDisabled={isFetchingNextPage || !hasNextPage}
+            onClick={() => fetchNextPage()}
+          >
+            {hasNextPage ? "Load More" : "End of list"}
+          </Button>
+        )}
+      </div>
+      <ViewMembersModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        isOpen={popUp.viewMembers.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("viewMembers", isOpen)}
+      />
+    </>
+  );
+};
+
+export const OrganizationsTable = () => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "deleteOrganization",
+    "deleteOrganizationMembership",
+    "deleteUser",
+    "viewMembers",
+    "createOrganization"
+  ] as const);
+
+  const { mutateAsync: deleteOrganization } = useAdminDeleteOrganization();
+  const { mutateAsync: deleteOrganizationMembership } = useAdminDeleteOrganizationMembership();
+  const { mutateAsync: deleteUser } = useAdminDeleteUser();
+
+  const handleDeleteOrganization = async () => {
+    const { orgId } = popUp?.deleteOrganization?.data as { orgId: string };
+
+    await deleteOrganization(orgId);
+    createNotification({
+      type: "success",
+      text: "Successfully deleted organization"
+    });
+
+    handlePopUpClose("deleteOrganization");
+  };
+
+  const handleDeleteOrganizationMembership = async () => {
+    const { orgId, membershipId } = popUp?.deleteOrganizationMembership?.data as {
+      orgId: string;
+      membershipId: string;
+    };
+
+    if (!orgId || !membershipId) {
+      return;
+    }
+
+    await deleteOrganizationMembership({ organizationId: orgId, membershipId });
+    createNotification({
+      type: "success",
+      text: "Successfully removed user from organization"
+    });
+
+    handlePopUpClose("viewMembers");
+    handlePopUpClose("deleteOrganizationMembership");
+  };
+
+  const handleDeleteUser = async () => {
+    const { userId } = popUp?.deleteUser?.data as { userId: string };
+
+    if (!userId) {
+      return;
+    }
+
+    await deleteUser(userId);
+    createNotification({
+      type: "success",
+      text: "Successfully deleted user"
+    });
+
+    handlePopUpClose("viewMembers");
+    handlePopUpClose("deleteUser");
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-mineshaft-100">Organizations</p>
+          <p className="text-sm text-bunker-300">
+            Manage, join and view organizations across your instance.
+          </p>
+        </div>
+        <Button
+          colorSchema="secondary"
+          onClick={() => handlePopUpOpen("createOrganization")}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+        >
+          Add Organization
+        </Button>
+      </div>
+      <OrganizationsPanelTable
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteOrganization.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to delete organization ${
+          (popUp?.deleteOrganization?.data as { orgName: string })?.orgName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrganization", isOpen)}
+        onDeleteApproved={handleDeleteOrganization}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteOrganizationMembership.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to remove ${
+          (popUp?.deleteOrganizationMembership?.data as { username: string })?.username || ""
+        } from organization ${
+          (popUp?.deleteOrganizationMembership?.data as { orgName: string })?.orgName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrganizationMembership", isOpen)}
+        onDeleteApproved={handleDeleteOrganizationMembership}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteUser.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to delete user ${
+          (popUp?.deleteUser?.data as { username: string })?.username || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteUser", isOpen)}
+        onDeleteApproved={handleDeleteUser}
+      />
+      <AddOrganizationModal
+        isOpen={popUp.createOrganization.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("createOrganization", isOpen)}
+      />
+    </div>
+  );
+};

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

@@ -218,7 +218,7 @@ const UserPanelTable = ({
                         </div>
                       </Td>
                       <Td className="w-5/12 max-w-0">
-                        <p className="truncate">{email}</p>
+                        <p className="truncate">{username || email}</p>
                       </Td>
                       <Td>
                         <div className="flex justify-end">
@@ -463,6 +463,12 @@ export const UserIdentitiesTable = () => {
         </div>
       </div>
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <p className="text-xl font-semibold text-mineshaft-100">User Identities</p>
+            <p className="text-sm text-bunker-300">Manage user identities across your instance.</p>
+          </div>
+        </div>
         <UserPanelTable
           handlePopUpOpen={handlePopUpOpen}
           users={users}
@@ -515,14 +521,14 @@ export const UserIdentitiesTable = () => {
         />
         <DeleteActionModal
           isOpen={popUp.removeUsers.isOpen}
-          title="Are you sure you want to remove the following users?"
+          title="Are you sure you want to delete the following users?"
           onChange={(isOpen) => handlePopUpToggle("removeUsers", isOpen)}
           deleteKey="confirm"
           onDeleteApproved={() => handleRemoveUsers()}
-          buttonText="Remove"
+          buttonText="Delete"
         >
           <div className="mt-4 text-sm text-mineshaft-400">
-            The following members will be removed:
+            The following users will be deleted:
           </div>
           <div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
             <ul className="list-disc">
@@ -549,7 +555,7 @@ export const UserIdentitiesTable = () => {
                               className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
                             >
                               <FontAwesomeIcon icon={faWarning} />
-                              <span>Removing Yourself</span>
+                              <span>Deleting Yourself</span>
                             </Badge>
                           </div>
                         </Tooltip>

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

@@ -0,0 +1,3 @@
+export * from "./MachineIdentitiesTable";
+export * from "./OrganizationsTable";
+export * from "./UserIdentitiesTable";

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

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

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

@@ -1,27 +0,0 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
-
-import { PageHeader } from "@app/components/v2";
-
-import { UserIdentitiesTable } from "./components";
-
-export const UserIdentitiesResourcesPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="h-full bg-bunker-800">
-      <Helmet>
-        <title>{t("common.head-title", { title: "Admin" })}</title>
-      </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader
-            title="User Identities"
-            description="Manage all user identities within your Infisical instance."
-          />
-          <UserIdentitiesTable />
-        </div>
-      </div>
-    </div>
-  );
-};

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

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

frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx

@@ -88,7 +88,15 @@ export const SelectOrganizationSection = () => {
         // org has an org-level auth method enabled (e.g. SAML)
         // -> logout + redirect to SAML SSO
         let url = "";
-        if (organization.orgAuthMethod === AuthMethod.OIDC) {
+        if (organization.googleSsoAuthEnforced) {
+          if (authToken.authMethod !== AuthMethod.GOOGLE) {
+            url = `/api/v1/sso/redirect/google?org_slug=${organization.slug}`;
+
+            if (callbackPort) {
+              url += `&callback_port=${callbackPort}`;
+            }
+          }
+        } else if (organization.orgAuthMethod === AuthMethod.OIDC) {
           url = `/api/v1/sso/oidc/login?orgSlug=${organization.slug}${
             callbackPort ? `&callbackPort=${callbackPort}` : ""
           }`;
@@ -98,15 +106,6 @@ export const SelectOrganizationSection = () => {
           if (callbackPort) {
             url += `?callback_port=${callbackPort}`;
           }
-        } else if (
-          organization.googleSsoAuthEnforced &&
-          authToken.authMethod !== AuthMethod.GOOGLE
-        ) {
-          url = `/api/v1/sso/redirect/google?org_slug=${organization.slug}`;
-
-          if (callbackPort) {
-            url += `&callback_port=${callbackPort}`;
-          }
         }
 
         // we are conditionally checking if the url is set because it may not be set if google SSO is enforced, but the user is already logged in with google SSO

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

@@ -42,6 +42,17 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { slugSchema } from "@app/lib/schemas";
 
+const REQUIRED_EAB_DIRECTORIES = [
+  "https://acme.digicert.com/v2/acme/directory",
+  "https://acme.zerossl.com/v2/DV90",
+  "https://acme.ssl.com/sslcom-dv-rsa",
+  "https://acme.ssl.com/sslcom-dv-ecc",
+  "https://dv.acme-v02.api.pki.goog/directory",
+  "https://acme.sectigo.com/v2/OV",
+  "https://acme.sectigo.com/v2/EV",
+  "https://acme.cisco.com/ACMEv2/directory"
+];
+
 const baseSchema = z.object({
   type: z.nativeEnum(CaType),
   name: slugSchema({
@@ -51,18 +62,39 @@ const baseSchema = z.object({
   status: z.nativeEnum(CaStatus)
 });
 
-const acmeConfigurationSchema = z.object({
-  dnsAppConnection: z.object({
-    id: z.string(),
-    name: z.string()
-  }),
-  dnsProviderConfig: z.object({
-    provider: z.nativeEnum(AcmeDnsProvider),
-    hostedZoneId: z.string()
-  }),
-  directoryUrl: z.string(),
-  accountEmail: z.string()
-});
+const acmeConfigurationSchema = z
+  .object({
+    dnsAppConnection: z.object({
+      id: z.string(),
+      name: z.string()
+    }),
+    dnsProviderConfig: z.object({
+      provider: z.nativeEnum(AcmeDnsProvider),
+      hostedZoneId: z.string()
+    }),
+    directoryUrl: z.string(),
+    accountEmail: z.string(),
+    eabKid: z.string().optional(),
+    eabHmacKey: z.string().optional()
+  })
+  .superRefine((data, ctx) => {
+    if (REQUIRED_EAB_DIRECTORIES.includes(data.directoryUrl)) {
+      if (!data.eabKid || data.eabKid.trim() === "") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "EAB Key Identifier (KID) is required for this directory URL",
+          path: ["eabKid"]
+        });
+      }
+      if (!data.eabHmacKey || data.eabHmacKey.trim() === "") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "EAB HMAC Key is required for this directory URL",
+          path: ["eabHmacKey"]
+        });
+      }
+    }
+  });
 
 const azureAdCsConfigurationSchema = z.object({
   azureAdcsConnection: z.object({
@@ -122,6 +154,10 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
     caType === CaType.ACME && configuration && "dnsProviderConfig" in configuration
       ? configuration.dnsProviderConfig.provider
       : undefined;
+  const directoryUrl =
+    caType === CaType.ACME && configuration && "directoryUrl" in configuration
+      ? configuration.directoryUrl
+      : undefined;
 
   useEffect(() => {
     const initialType = (popUp?.ca?.data as { type: CaType })?.type;
@@ -155,7 +191,9 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
               hostedZoneId: ""
             },
             directoryUrl: "",
-            accountEmail: ""
+            accountEmail: "",
+            eabKid: "",
+            eabHmacKey: ""
           }
         });
       }
@@ -178,13 +216,10 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
     });
 
   const availableConnections: TAvailableAppConnection[] = useMemo(() => {
-    if (caType === CaType.ACME) {
-      return [...(availableRoute53Connections || []), ...(availableCloudflareConnections || [])];
-    }
     if (caType === CaType.AZURE_AD_CS) {
       return availableAzureConnections || [];
     }
-    return [];
+    return [...(availableRoute53Connections || []), ...(availableCloudflareConnections || [])];
   }, [
     caType,
     availableRoute53Connections,
@@ -192,7 +227,8 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
     availableAzureConnections
   ]);
 
-  const isPending = isRoute53Pending || isCloudflarePending || isAzurePending;
+  const isPending =
+    isRoute53Pending || isCloudflarePending || (isAzurePending && caType === CaType.AZURE_AD_CS);
 
   const dnsAppConnection =
     caType === CaType.ACME && configuration && "dnsAppConnection" in configuration
@@ -227,7 +263,9 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
               hostedZoneId: ca.configuration.dnsProviderConfig.hostedZoneId
             },
             directoryUrl: ca.configuration.directoryUrl,
-            accountEmail: ca.configuration.accountEmail
+            accountEmail: ca.configuration.accountEmail,
+            eabKid: ca.configuration.eabKid,
+            eabHmacKey: ca.configuration.eabHmacKey
           }
         });
       } else if (ca.type === CaType.AZURE_AD_CS && availableConnections?.length) {
@@ -268,7 +306,9 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
           dnsProviderConfig: formConfiguration.dnsProviderConfig,
           directoryUrl: formConfiguration.directoryUrl,
           accountEmail: formConfiguration.accountEmail,
-          dnsAppConnectionId: formConfiguration.dnsAppConnection.id
+          dnsAppConnectionId: formConfiguration.dnsAppConnection.id,
+          eabKid: formConfiguration.eabKid,
+          eabHmacKey: formConfiguration.eabHmacKey
         };
       } else if (type === CaType.AZURE_AD_CS && "azureAdcsConnection" in formConfiguration) {
         configPayload = {
@@ -499,6 +539,44 @@ export const ExternalCaModal = ({ popUp, handlePopUpToggle }: Props) => {
                   </FormControl>
                 )}
               />
+              <Controller
+                control={control}
+                defaultValue=""
+                name="configuration.eabKid"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="EAB Key Identifier (KID)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    isOptional={!REQUIRED_EAB_DIRECTORIES.includes(directoryUrl || "")}
+                    isRequired={REQUIRED_EAB_DIRECTORIES.includes(directoryUrl || "")}
+                  >
+                    <Input
+                      {...field}
+                      placeholder="abc123def456ghi789jkl012mno345pqr678stu901vwx234yz"
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                defaultValue=""
+                name="configuration.eabHmacKey"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="EAB HMAC Key"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    isOptional={!REQUIRED_EAB_DIRECTORIES.includes(directoryUrl || "")}
+                    isRequired={REQUIRED_EAB_DIRECTORIES.includes(directoryUrl || "")}
+                  >
+                    <Input
+                      {...field}
+                      placeholder="dGhpc2lzYW5leGFtcGxlaG1hY2tleWZvcmRpZ2ljZXJ0YWNtZXRlc3RpbmcxMjM0NTY3ODkw"
+                    />
+                  </FormControl>
+                )}
+              />
             </>
           )}
           {caType === CaType.AZURE_AD_CS && (

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

@@ -15,7 +15,8 @@ import { setAuthToken } from "@app/hooks/api/reactQuery";
 
 const QueryParamsSchema = z.object({
   callback_port: z.coerce.number().optional().catch(undefined),
-  force: z.boolean().optional()
+  force: z.boolean().optional(),
+  org_id: z.string().optional().catch(undefined)
 });
 
 export const AuthConsentWrapper = () => {
@@ -102,6 +103,12 @@ export const Route = createFileRoute("/_restrict-login-signup")({
         return;
     }
 
+    if (search.org_id) {
+      if (location.pathname.endsWith("select-organization")) return;
+
+      throw redirect({ to: "/login/select-organization", search: { org_id: search.org_id } });
+    }
+
     if (!data.organizationId) {
       if (
         location.pathname.endsWith("select-organization") ||

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

@@ -1,7 +1,9 @@
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   FormControl,
@@ -9,9 +11,16 @@ import {
   ModalClose,
   SecretInput,
   Select,
-  SelectItem
+  SelectItem,
+  Tooltip
 } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { HCVaultConnectionMethod, THCVaultConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -66,7 +75,8 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
     resolver: zodResolver(formSchema),
     defaultValues: appConnection ?? {
       app: AppConnection.HCVault,
-      method: HCVaultConnectionMethod.AppRole
+      method: HCVaultConnectionMethod.AppRole,
+      gatewayId: null
     }
   });
 
@@ -79,6 +89,9 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
 
   const selectedMethod = watch("method");
 
+  const { subscription } = useSubscription();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
   return (
     <FormProvider {...form}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -115,6 +128,54 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
+        {subscription.gateway && (
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value as string}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+        )}
         <Controller
           name="credentials.instanceUrl"
           control={control}

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

@@ -4,9 +4,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import {
+  OrgPermissionAuditLogsActions,
+  OrgPermissionSubjects,
+  ProjectPermissionAuditLogsActions,
+  ProjectPermissionSub,
+  useSubscription
+} from "@app/context";
 import { Timezone } from "@app/helpers/datetime";
-import { withPermission } from "@app/hoc";
+import { withPermission, withProjectPermission } from "@app/hoc";
 import { Workspace } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -28,153 +34,173 @@ type Props = {
   project?: Workspace;
 };
 
-export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true, pageView = false, project }: Props) => {
-    const { subscription } = useSubscription();
+const LogsSectionComponent = ({
+  presets,
+  refetchInterval,
+  showFilters = true,
+  pageView = false,
+  project
+}: Props) => {
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+  const [logFilter, setLogFilter] = useState<TAuditLogFilterFormData>({
+    eventType: presets?.eventType || [],
+    actor: presets?.actorId,
+    eventMetadata: presets?.eventMetadata
+  });
+  const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);
 
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-    const [logFilter, setLogFilter] = useState<TAuditLogFilterFormData>({
-      eventType: presets?.eventType || [],
-      actor: presets?.actorId,
-      eventMetadata: presets?.eventMetadata
-    });
-    const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);
+  const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>(
+    presets?.endDate || presets?.startDate
+      ? {
+          type: AuditLogDateFilterType.Absolute,
+          startDate: presets?.startDate || new Date(Number(new Date()) - ms("1h")),
+          endDate: presets?.endDate || new Date()
+        }
+      : {
+          startDate: new Date(Number(new Date()) - ms("1h")),
+          endDate: new Date(),
+          type: AuditLogDateFilterType.Relative,
+          relativeModeValue: "1h"
+        }
+  );
 
-    const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>(
-      presets?.endDate || presets?.startDate
-        ? {
-            type: AuditLogDateFilterType.Absolute,
-            startDate: presets?.startDate || new Date(Number(new Date()) - ms("1h")),
-            endDate: presets?.endDate || new Date()
-          }
-        : {
-            startDate: new Date(Number(new Date()) - ms("1h")),
-            endDate: new Date(),
-            type: AuditLogDateFilterType.Relative,
-            relativeModeValue: "1h"
-          }
-    );
-
-    useEffect(() => {
-      if (subscription && !subscription.auditLogs) {
-        handlePopUpOpen("upgradePlan");
-      }
-    }, [subscription]);
-
-    if (pageView)
-      return (
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
-            <div>
-              <div className="flex items-center gap-1 whitespace-nowrap">
-                <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
-                <a
-                  href="https://infisical.com/docs/documentation/platform/audit-logs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div className="ml-1 mt-[0.1rem] 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>
-            </div>
-            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-              {showFilters && (
-                <LogsDateFilter
-                  filter={dateFilter}
-                  setFilter={setDateFilter}
-                  timezone={timezone}
-                  setTimezone={setTimezone}
-                />
-              )}
-              {showFilters && (
-                <LogsFilter
-                  project={project}
-                  presets={presets}
-                  setFilter={setLogFilter}
-                  filter={logFilter}
-                />
-              )}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <LogsTable
-              refetchInterval={refetchInterval}
-              filter={{
-                secretPath: logFilter.secretPath || undefined,
-                secretKey: logFilter.secretKey || undefined,
-                eventMetadata: logFilter?.eventMetadata,
-                projectId: project?.id || logFilter?.project?.id,
-                actorType: presets?.actorType,
-                limit: 15,
-                eventType: logFilter?.eventType,
-                userAgentType: logFilter?.userAgentType,
-                startDate: dateFilter?.startDate,
-                endDate: dateFilter?.endDate,
-                environment: logFilter?.environment?.slug,
-                actor: logFilter?.actor
-              }}
-              timezone={timezone}
-            />
-            <UpgradePlanModal
-              isOpen={popUp.upgradePlan.isOpen}
-              onOpenChange={(isOpen) => {
-                handlePopUpToggle("upgradePlan", isOpen);
-              }}
-              text="You can use audit logs if you switch to a paid Infisical plan."
-            />
-          </div>
-        </div>
-      );
+  useEffect(() => {
+    if (subscription && !subscription.auditLogs) {
+      handlePopUpOpen("upgradePlan");
+    }
+  }, [subscription]);
 
+  if (pageView)
     return (
-      <div className="space-y-2">
-        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-          {showFilters && (
-            <LogsDateFilter
-              filter={dateFilter}
-              setFilter={setDateFilter}
-              timezone={timezone}
-              setTimezone={setTimezone}
-            />
-          )}
-          {showFilters && (
-            <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
-          )}
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
+          <div>
+            <div className="flex items-center gap-1 whitespace-nowrap">
+              <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
+              <a
+                href="https://infisical.com/docs/documentation/platform/audit-logs"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="ml-1 mt-[0.1rem] 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>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+            {showFilters && (
+              <LogsDateFilter
+                filter={dateFilter}
+                setFilter={setDateFilter}
+                timezone={timezone}
+                setTimezone={setTimezone}
+              />
+            )}
+            {showFilters && (
+              <LogsFilter
+                project={project}
+                presets={presets}
+                setFilter={setLogFilter}
+                filter={logFilter}
+              />
+            )}
+          </div>
+        </div>
+        <div className="space-y-2">
+          <LogsTable
+            refetchInterval={refetchInterval}
+            filter={{
+              secretPath: logFilter.secretPath || undefined,
+              secretKey: logFilter.secretKey || undefined,
+              eventMetadata: logFilter?.eventMetadata,
+              projectId: project?.id || logFilter?.project?.id,
+              actorType: presets?.actorType,
+              limit: 15,
+              eventType: logFilter?.eventType,
+              userAgentType: logFilter?.userAgentType,
+              startDate: dateFilter?.startDate,
+              endDate: dateFilter?.endDate,
+              environment: logFilter?.environment?.slug,
+              actor: logFilter?.actor
+            }}
+            timezone={timezone}
+          />
+          <UpgradePlanModal
+            isOpen={popUp.upgradePlan.isOpen}
+            onOpenChange={(isOpen) => {
+              handlePopUpToggle("upgradePlan", isOpen);
+            }}
+            text="You can use audit logs if you switch to a paid Infisical plan."
+          />
         </div>
-        <LogsTable
-          refetchInterval={refetchInterval}
-          filter={{
-            secretPath: logFilter.secretPath || undefined,
-            secretKey: logFilter.secretKey || undefined,
-            eventMetadata: logFilter?.eventMetadata,
-            projectId: logFilter?.project?.id,
-            actorType: presets?.actorType,
-            limit: 15,
-            eventType: logFilter?.eventType,
-            userAgentType: logFilter?.userAgentType,
-            startDate: dateFilter?.startDate,
-            endDate: dateFilter?.endDate,
-            environment: logFilter?.environment?.slug,
-            actor: logFilter?.actor
-          }}
-          timezone={timezone}
-        />
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => {
-            handlePopUpToggle("upgradePlan", isOpen);
-          }}
-          text="You can use audit logs if you switch to a paid Infisical plan."
-        />
       </div>
     );
-  },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.AuditLogs }
-);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+        {showFilters && (
+          <LogsDateFilter
+            filter={dateFilter}
+            setFilter={setDateFilter}
+            timezone={timezone}
+            setTimezone={setTimezone}
+          />
+        )}
+        {showFilters && (
+          <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
+        )}
+      </div>
+      <LogsTable
+        refetchInterval={refetchInterval}
+        filter={{
+          secretPath: logFilter.secretPath || undefined,
+          secretKey: logFilter.secretKey || undefined,
+          eventMetadata: logFilter?.eventMetadata,
+          projectId: project?.id || logFilter?.project?.id,
+          actorType: presets?.actorType,
+          limit: 15,
+          eventType: logFilter?.eventType,
+          userAgentType: logFilter?.userAgentType,
+          startDate: dateFilter?.startDate,
+          endDate: dateFilter?.endDate,
+          environment: logFilter?.environment?.slug,
+          actor: logFilter?.actor
+        }}
+        timezone={timezone}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("upgradePlan", isOpen);
+        }}
+        text="You can use audit logs if you switch to a paid Infisical plan."
+      />
+    </div>
+  );
+};
+
+export const LogsSection = (props: Props) => {
+  const { project } = props;
+
+  if (project) {
+    const ProjectLogsSectionWithPermission = withProjectPermission(LogsSectionComponent, {
+      action: ProjectPermissionAuditLogsActions.Read,
+      subject: ProjectPermissionSub.AuditLogs
+    });
+    return <ProjectLogsSectionWithPermission {...props} />;
+  }
+
+  const OrgLogsSectionWithPermission = withPermission(LogsSectionComponent, {
+    action: OrgPermissionAuditLogsActions.Read,
+    subject: OrgPermissionSubjects.AuditLogs
+  });
+  return <OrgLogsSectionWithPermission {...props} />;
+};

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

@@ -48,7 +48,7 @@ import {
   useRequestProjectAccess,
   useSearchProjects
 } from "@app/hooks/api";
-import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 import {
   ProjectListToggle,
   ProjectListView
@@ -152,13 +152,17 @@ export const AllProjectView = ({
     type: projectTypeFilter
   });
 
-  const handleAccessProject = async (type: ProjectType, projectId: string) => {
+  const handleAccessProject = async (
+    type: ProjectType,
+    projectId: string,
+    environments: WorkspaceEnv[]
+  ) => {
     try {
       await orgAdminAccessProject.mutateAsync({
         projectId
       });
       await navigate({
-        to: getProjectHomePage(type),
+        to: getProjectHomePage(type, environments),
         params: {
           projectId
         }
@@ -315,7 +319,7 @@ export const AllProjectView = ({
               onKeyDown={(evt) => {
                 if (evt.key === "Enter" && workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                     params: {
                       projectId: workspace.id
                     }
@@ -325,7 +329,7 @@ export const AllProjectView = ({
               onClick={() => {
                 if (workspace.isMember) {
                   navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                     params: {
                       projectId: workspace.id
                     }
@@ -371,7 +375,7 @@ export const AllProjectView = ({
                         onClick={(e) => {
                           e.stopPropagation();
                           e.preventDefault();
-                          handleAccessProject(workspace.type, workspace.id);
+                          handleAccessProject(workspace.type, workspace.id, workspace.environments);
                         }}
                         disabled={
                           orgAdminAccessProject.variables?.projectId === workspace.id &&

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

@@ -193,7 +193,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
           params: {
             projectId: workspace.id
           }
@@ -247,7 +247,7 @@ export const MyProjectView = ({
     <div
       onClick={() => {
         navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
           params: {
             projectId: workspace.id
           }

frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts

@@ -5,6 +5,7 @@ import { OrgPermissionSubjects } from "@app/context";
 import {
   OrgGatewayPermissionActions,
   OrgPermissionAppConnectionActions,
+  OrgPermissionAuditLogsActions,
   OrgPermissionBillingActions,
   OrgPermissionGroupActions,
   OrgPermissionIdentityActions,
@@ -23,6 +24,12 @@ const generalPermissionSchema = z
   })
   .optional();
 
+const auditLogsPermissionSchema = z
+  .object({
+    [OrgPermissionAuditLogsActions.Read]: z.boolean().optional()
+  })
+  .optional();
+
 const billingPermissionSchema = z
   .object({
     [OrgPermissionBillingActions.Read]: z.boolean().optional(),
@@ -121,7 +128,7 @@ export const formSchema = z.object({
         })
         .optional(),
 
-      "audit-logs": generalPermissionSchema,
+      "audit-logs": auditLogsPermissionSchema,
       member: generalPermissionSchema,
       groups: groupPermissionSchema,
       role: generalPermissionSchema,

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAuditLogsRow.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { OrgPermissionAuditLogsActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  Custom = "custom"
+}
+
+const PERMISSION_ACTIONS = [
+  {
+    action: OrgPermissionAuditLogsActions.Read,
+    label: "Read"
+  }
+] as const;
+
+export const OrgPermissionAuditLogsRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.audit-logs"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+      default:
+        setValue(
+          "permissions.audit-logs",
+          {
+            [OrgPermissionAuditLogsActions.Read]: false
+          },
+          { shouldDirty: true }
+        );
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td className="w-full select-none">Audit Logs</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+            position="popper"
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.audit-logs.${action}`}
+                    key={`permissions.audit-logs.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={Boolean(field.value)}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.audit-logs.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx

@@ -71,6 +71,7 @@ type Props = {
     | "gateway"
     | "secret-share"
     | "billing"
+    | "audit-logs"
     | "machine-identity-auth-template"
   >;
   setValue: UseFormSetValue<TFormSchema>;

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -16,6 +16,7 @@ import {
   TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgPermissionAuditLogsRow } from "./OrgPermissionAuditLogsRow";
 import { OrgPermissionBillingRow } from "./OrgPermissionBillingRow";
 import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
@@ -39,10 +40,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
     title: "Incident Contacts",
     formName: "incident-contact"
   },
-  {
-    title: "Audit Logs",
-    formName: "audit-logs"
-  },
   {
     title: "Organization Profile",
     formName: "settings"
@@ -166,6 +163,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                   />
                 );
               })}
+              <OrgPermissionAuditLogsRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
               <OrgPermissionIdentityRow
                 control={control}
                 setValue={setValue}

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

@@ -1,207 +0,0 @@
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, FormLabel, IconButton, Input, Spinner } from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import {
-  useCreateAuditLogStream,
-  useGetAuditLogStreamDetails,
-  useUpdateAuditLogStream
-} from "@app/hooks/api";
-
-type Props = {
-  id?: string;
-  onClose: () => void;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const formSchema = z.object({
-  url: z.string().url().min(1),
-  headers: z
-    .object({
-      key: z.string(),
-      value: z.string()
-    })
-    .array()
-    .optional()
-});
-type TForm = z.infer<typeof formSchema>;
-
-export const AuditLogStreamForm = ({ id = "", onClose }: Props) => {
-  const isEdit = Boolean(id);
-  const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
-
-  const auditLogStream = useGetAuditLogStreamDetails(id);
-  const createAuditLogStream = useCreateAuditLogStream();
-  const updateAuditLogStream = useUpdateAuditLogStream();
-
-  const {
-    handleSubmit,
-    control,
-    setValue,
-    getValues,
-    formState: { isSubmitting }
-  } = useForm<TForm>({
-    values: auditLogStream?.data,
-    defaultValues: {
-      headers: [{ key: "", value: "" }]
-    }
-  });
-
-  const headerFields = useFieldArray({
-    control,
-    name: "headers"
-  });
-
-  const handleAuditLogStreamEdit = async ({ headers, url }: TForm) => {
-    if (!id) return;
-    try {
-      await updateAuditLogStream.mutateAsync({
-        id,
-        orgId,
-        headers,
-        url
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated stream"
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to update stream"
-      });
-    }
-  };
-
-  const handleFormSubmit = async ({ headers = [], url }: TForm) => {
-    if (isSubmitting) return;
-    const sanitizedHeaders = headers.filter(({ key, value }) => Boolean(key) && Boolean(value));
-    const streamHeaders = sanitizedHeaders.length ? sanitizedHeaders : undefined;
-    if (isEdit) {
-      await handleAuditLogStreamEdit({ headers: streamHeaders, url });
-      return;
-    }
-    try {
-      await createAuditLogStream.mutateAsync({
-        orgId,
-        headers: streamHeaders,
-        url
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created stream"
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: (err as Error)?.message ?? "Failed to create stream"
-      });
-    }
-  };
-
-  if (isEdit && auditLogStream.isPending) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <Spinner size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit(handleFormSubmit)} autoComplete="off">
-      <div>
-        <Controller
-          control={control}
-          name="url"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Endpoint URL"
-              isError={Boolean(error?.message)}
-              errorText={error?.message}
-            >
-              <Input {...field} />
-            </FormControl>
-          )}
-        />
-        <FormLabel label="Headers" isOptional />
-        {headerFields.fields.map(({ id: headerFieldId }, i) => (
-          <div key={headerFieldId} className="flex space-x-2">
-            <Controller
-              control={control}
-              name={`headers.${i}.key`}
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  isError={Boolean(error?.message)}
-                  errorText={error?.message}
-                  className="w-1/3"
-                >
-                  <Input {...field} placeholder="Authorization" />
-                </FormControl>
-              )}
-            />
-            <Controller
-              control={control}
-              name={`headers.${i}.value`}
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  isError={Boolean(error?.message)}
-                  errorText={error?.message}
-                  className="flex-grow"
-                >
-                  <Input
-                    {...field}
-                    type="password"
-                    placeholder="Bearer <token>"
-                    autoComplete="new-password"
-                  />
-                </FormControl>
-              )}
-            />
-            <IconButton
-              ariaLabel="delete key"
-              className="h-9"
-              variant="outline_bg"
-              onClick={() => {
-                const header = getValues("headers");
-                if (header && header?.length > 1) {
-                  headerFields.remove(i);
-                } else {
-                  setValue("headers", [{ key: "", value: "" }]);
-                }
-              }}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </IconButton>
-          </div>
-        ))}
-        <div>
-          <Button
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
-            variant="outline_bg"
-            onClick={() => headerFields.append({ value: "", key: "" })}
-          >
-            Add Key
-          </Button>
-        </div>
-      </div>
-      <div className="mt-8 flex items-center">
-        <Button className="mr-4" type="submit" isLoading={isSubmitting}>
-          {isEdit ? "Save" : "Create"}
-        </Button>
-        <Button variant="plain" colorSchema="secondary" onClick={onClose}>
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-};

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

@@ -0,0 +1,125 @@
+import { createNotification } from "@app/components/notifications";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
+import { useCreateAuditLogStream, useUpdateAuditLogStream } from "@app/hooks/api";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TAuditLogStream } from "@app/hooks/api/types";
+import { DiscriminativePick } from "@app/types";
+
+import { AuditLogStreamHeader } from "../components/AuditLogStreamHeader";
+import { CustomProviderAuditLogStreamForm } from "./CustomProviderAuditLogStreamForm";
+import { DatadogProviderAuditLogStreamForm } from "./DatadogProviderAuditLogStreamForm";
+import { SplunkProviderAuditLogStreamForm } from "./SplunkProviderAuditLogStreamForm";
+
+type FormProps = {
+  onComplete: (auditLogStream: TAuditLogStream) => void;
+};
+
+type CreateFormProps = FormProps & { provider: LogProvider };
+type UpdateFormProps = FormProps & {
+  auditLogStream: TAuditLogStream;
+};
+
+const CreateForm = ({ provider, onComplete }: CreateFormProps) => {
+  const createAuditLogStream = useCreateAuditLogStream();
+  const { name: providerName } = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
+
+  const onSubmit = async (
+    formData: DiscriminativePick<TAuditLogStream, "provider" | "credentials">
+  ) => {
+    try {
+      const logStream = await createAuditLogStream.mutateAsync(formData);
+      createNotification({
+        text: `Successfully created ${providerName} Log Stream`,
+        type: "success"
+      });
+      onComplete(logStream);
+    } catch (err: any) {
+      console.error(err);
+      createNotification({
+        title: `Failed to create ${providerName} Log Stream`,
+        text: err.message,
+        type: "error"
+      });
+    }
+  };
+
+  switch (provider) {
+    case LogProvider.Custom:
+      return <CustomProviderAuditLogStreamForm onSubmit={onSubmit} />;
+    case LogProvider.Datadog:
+      return <DatadogProviderAuditLogStreamForm onSubmit={onSubmit} />;
+    case LogProvider.Splunk:
+      return <SplunkProviderAuditLogStreamForm onSubmit={onSubmit} />;
+    default:
+      throw new Error(`Unhandled Provider: ${provider}`);
+  }
+};
+
+const UpdateForm = ({ auditLogStream, onComplete }: UpdateFormProps) => {
+  const updateAuditLogStream = useUpdateAuditLogStream();
+  const { name: providerName } = AUDIT_LOG_STREAM_PROVIDER_MAP[auditLogStream.provider];
+
+  const onSubmit = async (
+    formData: DiscriminativePick<TAuditLogStream, "provider" | "credentials">
+  ) => {
+    try {
+      const connection = await updateAuditLogStream.mutateAsync({
+        auditLogStreamId: auditLogStream.id,
+        ...formData
+      });
+      createNotification({
+        text: `Successfully updated ${providerName} Log Stream`,
+        type: "success"
+      });
+      onComplete(connection);
+    } catch (err: any) {
+      console.error(err);
+      createNotification({
+        title: `Failed to update ${providerName} Log Stream`,
+        text: err.message,
+        type: "error"
+      });
+    }
+  };
+
+  switch (auditLogStream.provider) {
+    case LogProvider.Custom:
+      return (
+        <CustomProviderAuditLogStreamForm onSubmit={onSubmit} auditLogStream={auditLogStream} />
+      );
+    case LogProvider.Datadog:
+      return (
+        <DatadogProviderAuditLogStreamForm onSubmit={onSubmit} auditLogStream={auditLogStream} />
+      );
+    case LogProvider.Splunk:
+      return (
+        <SplunkProviderAuditLogStreamForm onSubmit={onSubmit} auditLogStream={auditLogStream} />
+      );
+    default:
+      throw new Error(`Unhandled Provider: ${(auditLogStream as TAuditLogStream).provider}`);
+  }
+};
+
+type Props = { onBack?: () => void } & Pick<FormProps, "onComplete"> &
+  (
+    | { provider: LogProvider; auditLogStream?: undefined }
+    | { provider?: undefined; auditLogStream: TAuditLogStream }
+  );
+export const AuditLogStreamForm = ({ onBack, ...props }: Props) => {
+  const { provider, auditLogStream } = props;
+
+  return (
+    <div>
+      <AuditLogStreamHeader
+        logStreamExists={Boolean(auditLogStream)}
+        provider={auditLogStream ? auditLogStream.provider : provider}
+        onBack={onBack}
+      />
+      {auditLogStream ? (
+        <UpdateForm {...props} auditLogStream={auditLogStream} />
+      ) : (
+        <CreateForm {...props} provider={provider} />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,176 @@
+import { Controller, FormProvider, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, FormLabel, IconButton, Input, ModalClose } from "@app/components/v2";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TCustomProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/custom-provider";
+
+type Props = {
+  auditLogStream?: TCustomProviderLogStream;
+  onSubmit: (formData: FormData) => void;
+};
+
+const formSchema = z.object({
+  provider: z.literal(LogProvider.Custom),
+  credentials: z.object({
+    url: z.string().url().trim().min(1).max(255),
+    headers: z
+      .object({
+        key: z.string().min(1),
+        value: z.string().min(1)
+      })
+      .array()
+  })
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const CustomProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => {
+  const isUpdate = Boolean(auditLogStream);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: auditLogStream ?? {
+      provider: LogProvider.Custom
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty },
+    getValues,
+    setValue
+  } = form;
+
+  const headerFields = useFieldArray({
+    control,
+    name: "credentials.headers"
+  });
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          name="credentials.url"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Endpoint URL"
+            >
+              <Input {...field} placeholder="https://example.com" />
+            </FormControl>
+          )}
+        />
+
+        <FormLabel label="Headers" isOptional />
+        {headerFields.fields.map(({ id: headerFieldId }, i) => (
+          <div key={headerFieldId} className="flex space-x-2">
+            <Controller
+              control={control}
+              name={`credentials.headers.${i}.key`}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  className="w-1/3"
+                >
+                  <Input {...field} placeholder="Authorization" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name={`credentials.headers.${i}.value`}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  className="flex-grow"
+                >
+                  <Input
+                    {...field}
+                    type="password"
+                    placeholder="Bearer <token>"
+                    autoComplete="new-password"
+                    onFocus={(e) => {
+                      if (
+                        auditLogStream &&
+                        auditLogStream.credentials.headers[i] &&
+                        auditLogStream.credentials.headers[i].value === "******" &&
+                        field.value === "******"
+                      ) {
+                        field.onChange("");
+                      }
+                      e.target.type = "text";
+                    }}
+                    onBlur={(e) => {
+                      if (
+                        auditLogStream &&
+                        auditLogStream.credentials.headers[i] &&
+                        auditLogStream.credentials.headers[i].value === "******" &&
+                        field.value === ""
+                      ) {
+                        field.onChange("******");
+                      }
+                      e.target.type = "password";
+                    }}
+                  />
+                </FormControl>
+              )}
+            />
+            <IconButton
+              ariaLabel="delete key"
+              className="h-9"
+              variant="outline_bg"
+              onClick={() => {
+                const header = getValues("credentials.headers");
+                if (header && header?.length > 1) {
+                  headerFields.remove(i);
+                } else {
+                  setValue("credentials.headers", [{ key: "", value: "" }]);
+                }
+              }}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+            </IconButton>
+          </div>
+        ))}
+        <div>
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            size="xs"
+            variant="outline_bg"
+            onClick={() => headerFields.append({ value: "", key: "" })}
+          >
+            Add Key
+          </Button>
+        </div>
+
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Create Log Stream"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -0,0 +1,132 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TDatadogProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/datadog-provider";
+
+type Props = {
+  auditLogStream?: TDatadogProviderLogStream;
+  onSubmit: (formData: FormData) => void;
+};
+
+const formSchema = z.object({
+  provider: z.literal(LogProvider.Datadog),
+  credentials: z.object({
+    url: z.string().url().trim().min(1).max(255),
+    token: z
+      .string()
+      .trim()
+      .regex(/^[a-fA-F0-9]{32}$/, "Invalid Datadog API key format")
+  })
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const DATADOG_ENDPOINTS = {
+  "Datadog US1": "https://http-intake.logs.datadoghq.com/api/v2/logs",
+  "Datadog US3": "https://http-intake.logs.us3.datadoghq.com/api/v2/logs",
+  "Datadog US5": "https://http-intake.logs.us5.datadoghq.com/api/v2/logs",
+  "Datadog EU": "https://http-intake.logs.datadoghq.eu/api/v2/logs",
+  "Datadog AP1": "https://http-intake.logs.ap1.datadoghq.com/api/v2/logs",
+  "Datadog AP2": "https://http-intake.logs.ap2.datadoghq.com/api/v2/logs",
+  "Datadog GovCloud (US1-FED)": "https://http-intake.logs.ddog-gov.com/api/v2/logs"
+};
+
+export const DatadogProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => {
+  const isUpdate = Boolean(auditLogStream);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: auditLogStream ?? {
+      provider: LogProvider.Datadog,
+      credentials: {
+        url: DATADOG_ENDPOINTS["Datadog US1"]
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          name="credentials.url"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Datadog Region"
+              helperText={value}
+            >
+              <Select
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.entries(DATADOG_ENDPOINTS).map(([k, v]) => {
+                  return (
+                    <SelectItem value={v} key={k}>
+                      {k}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.token"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Datadog Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Create Log Stream"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -0,0 +1,120 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, Input, ModalClose, SecretInput } from "@app/components/v2";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TSplunkProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/splunk-provider";
+
+type Props = {
+  auditLogStream?: TSplunkProviderLogStream;
+  onSubmit: (formData: FormData) => void;
+};
+
+const formSchema = z.object({
+  provider: z.literal(LogProvider.Splunk),
+  credentials: z.object({
+    hostname: z
+      .string()
+      .trim()
+      .min(1)
+      .max(255)
+      .superRefine((val, ctx) => {
+        if (val.includes("://")) {
+          ctx.addIssue({
+            code: "custom",
+            message: "Hostname should not include protocol"
+          });
+          return;
+        }
+
+        try {
+          const url = new URL(`https://${val}`);
+          if (url.hostname !== val) {
+            ctx.addIssue({
+              code: "custom",
+              message: "Must be a valid hostname without port or path"
+            });
+          }
+        } catch {
+          ctx.addIssue({ code: "custom", message: "Invalid hostname" });
+        }
+      }),
+    token: z.string().uuid().trim().min(1)
+  })
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const SplunkProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => {
+  const isUpdate = Boolean(auditLogStream);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: auditLogStream ?? {
+      provider: LogProvider.Splunk
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          name="credentials.hostname"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Hostname"
+            >
+              <Input {...field} placeholder="splunk.example.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.token"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Splunk Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Create Log Stream"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -1,72 +1,24 @@
-import { faPlug, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  Modal,
-  ModalContent,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  THead,
-  Tr
-} from "@app/components/v2";
-import {
-  OrgPermissionActions,
-  OrgPermissionSubjects,
-  useOrganization,
-  useSubscription
-} from "@app/context";
+import { Button } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
-import { useDeleteAuditLogStream, useGetAuditLogStreams } from "@app/hooks/api";
 
-import { AuditLogStreamForm } from "./AuditLogStreamForm";
+import { AuditLogStreamTable } from "./components/AuditLogStreamTable";
+import { AddAuditLogStreamModal } from "./components";
 
 export const AuditLogStreamsTab = withPermission(
   () => {
-    const { currentOrg } = useOrganization();
-    const orgId = currentOrg?.id || "";
-    const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-      "auditLogStreamForm",
-      "deleteAuditLogStream",
-      "upgradePlan"
-    ] as const);
     const { subscription } = useSubscription();
 
-    const { data: auditLogStreams, isPending: isAuditLogStreamsLoading } =
-      useGetAuditLogStreams(orgId);
-
-    // mutation
-    const { mutateAsync: deleteAuditLogStream } = useDeleteAuditLogStream();
-
-    const handleAuditLogStreamDelete = async () => {
-      try {
-        const auditLogStreamId = popUp?.deleteAuditLogStream?.data as string;
-        await deleteAuditLogStream({
-          id: auditLogStreamId,
-          orgId
-        });
-        handlePopUpClose("deleteAuditLogStream");
-        createNotification({
-          type: "success",
-          text: "Successfully deleted stream"
-        });
-      } catch (err) {
-        console.log(err);
-        createNotification({
-          type: "error",
-          text: "Failed to delete stream"
-        });
-      }
-    };
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "auditLogStreamForm",
+      "upgradePlan"
+    ] as const);
 
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
@@ -84,8 +36,10 @@ export const AuditLogStreamsTab = withPermission(
                 }}
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 isDisabled={!isAllowed}
+                variant="outline_bg"
+                colorSchema="secondary"
               >
-                Create
+                Add Log Stream
               </Button>
             )}
           </OrgPermissionCan>
@@ -93,102 +47,15 @@ export const AuditLogStreamsTab = withPermission(
         <p className="mb-8 text-gray-400">
           Send audit logs from Infisical to external logging providers via HTTP
         </p>
-        <div>
-          <TableContainer>
-            <Table>
-              <THead>
-                <Tr>
-                  <Td>URL</Td>
-                  <Td className="text-right">Action</Td>
-                </Tr>
-              </THead>
-              <TBody>
-                {isAuditLogStreamsLoading && (
-                  <TableSkeleton columns={2} innerKey="stream-loading" />
-                )}
-                {!isAuditLogStreamsLoading && auditLogStreams && auditLogStreams?.length === 0 && (
-                  <Tr>
-                    <Td colSpan={5}>
-                      <EmptyState title="No audit log streams found" icon={faPlug} />
-                    </Td>
-                  </Tr>
-                )}
-                {!isAuditLogStreamsLoading &&
-                  auditLogStreams?.map(({ id, url }) => (
-                    <Tr key={id}>
-                      <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                        {url}
-                      </Td>
-                      <Td>
-                        <div className="flex items-center justify-end space-x-2">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Settings}
-                          >
-                            {(isAllowed) => (
-                              <Button
-                                variant="outline_bg"
-                                size="xs"
-                                isDisabled={!isAllowed}
-                                onClick={() => handlePopUpOpen("auditLogStreamForm", id)}
-                              >
-                                Edit
-                              </Button>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Settings}
-                          >
-                            {(isAllowed) => (
-                              <Button
-                                variant="outline_bg"
-                                className="border-red-800 bg-red-800 hover:border-red-700 hover:bg-red-700"
-                                colorSchema="danger"
-                                size="xs"
-                                isDisabled={!isAllowed}
-                                onClick={() => handlePopUpOpen("deleteAuditLogStream", id)}
-                              >
-                                Delete
-                              </Button>
-                            )}
-                          </OrgPermissionCan>
-                        </div>
-                      </Td>
-                    </Tr>
-                  ))}
-              </TBody>
-            </Table>
-          </TableContainer>
-        </div>
-        <Modal
+        <AuditLogStreamTable />
+        <AddAuditLogStreamModal
           isOpen={popUp.auditLogStreamForm.isOpen}
-          onOpenChange={(isModalOpen) => {
-            handlePopUpToggle("auditLogStreamForm", isModalOpen);
-          }}
-        >
-          <ModalContent
-            title={`${popUp?.auditLogStreamForm?.data ? "Update" : "Create"} Audit Log Stream `}
-            subTitle="Continuously stream logs from Infisical to third-party logging providers."
-          >
-            <AuditLogStreamForm
-              id={popUp?.auditLogStreamForm?.data as string}
-              onClose={() => handlePopUpToggle("auditLogStreamForm")}
-            />
-          </ModalContent>
-        </Modal>
+          onOpenChange={(isOpen) => handlePopUpToggle("auditLogStreamForm", isOpen)}
+        />
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text="You can add audit log streams if you switch to Infisical's Enterprise  plan."
-        />
-        <DeleteActionModal
-          isOpen={popUp.deleteAuditLogStream.isOpen}
-          deleteKey="delete"
-          title="Are you sure you want to remove this stream?"
-          onChange={(isOpen) => handlePopUpToggle("deleteAuditLogStream", isOpen)}
-          onClose={() => handlePopUpClose("deleteAuditLogStream")}
-          onDeleteApproved={handleAuditLogStreamDelete}
+          text="You can add audit log streams if you switch to Infisical's Enterprise plan."
         />
       </div>
     );

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

@@ -0,0 +1,69 @@
+import { Dispatch, SetStateAction, useState } from "react";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { TAuditLogStream } from "@app/hooks/api/types";
+
+import { AuditLogStreamForm } from "../AuditLogStreamForm/AuditLogStreamForm";
+import { LogStreamProviderSelect } from "./LogStreamProviderSelect";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+type ContentProps = {
+  onComplete: (auditLogStream: TAuditLogStream) => void;
+  selectedProvider: LogProvider | null;
+  setSelectedProvider: Dispatch<SetStateAction<LogProvider | null>>;
+};
+
+const Content = ({ onComplete, selectedProvider, setSelectedProvider }: ContentProps) => {
+  if (selectedProvider) {
+    return (
+      <AuditLogStreamForm
+        onComplete={onComplete}
+        onBack={() => setSelectedProvider(null)}
+        provider={selectedProvider}
+      />
+    );
+  }
+
+  return <LogStreamProviderSelect onSelect={setSelectedProvider} />;
+};
+
+export const AddAuditLogStreamModal = ({ isOpen, onOpenChange }: Props) => {
+  const [selectedProvider, setSelectedProvider] = useState<LogProvider | null>(null);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(e) => {
+        onOpenChange(e);
+        if (!e) setSelectedProvider(null);
+      }}
+    >
+      <ModalContent
+        className="max-w-2xl"
+        title="Log Provider"
+        subTitle=<>
+          Select a log provider or{" "}
+          <button
+            type="button"
+            className="underline"
+            onClick={() => setSelectedProvider(LogProvider.Custom)}
+          >
+            input a custom URL
+          </button>{" "}
+          to stream logs to.
+        </>
+      >
+        <Content
+          onComplete={() => onOpenChange(false)}
+          selectedProvider={selectedProvider}
+          setSelectedProvider={setSelectedProvider}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,69 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+
+type Props = {
+  provider: LogProvider;
+  logStreamExists: boolean;
+  onBack?: () => void;
+};
+
+export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Props) => {
+  const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
+
+  return (
+    <div className="mb-4 flex w-full items-center gap-2 border-b border-mineshaft-500 pb-4">
+      <div className="relative">
+        {providerDetails.image ? (
+          <img
+            alt={providerDetails.name}
+            src={`/images/integrations/${providerDetails.image}`}
+            className="size-12 rounded-md bg-bunker-500 p-2"
+          />
+        ) : (
+          providerDetails.icon && (
+            <div className="size-12 rounded-md bg-bunker-500 p-2">
+              <FontAwesomeIcon
+                icon={providerDetails.icon}
+                className="h-full w-full text-mineshaft-300"
+              />
+            </div>
+          )
+        )}
+      </div>
+      <div>
+        <div className="mb-1 flex items-center text-mineshaft-300">
+          {providerDetails.name}
+          <a
+            href="https://infisical.com/docs/documentation/platform/audit-log-streams/audit-log-streams#example-providers"
+            target="_blank"
+            className="ml-1"
+            rel="noopener noreferrer"
+          >
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-px mr-1 text-xs" />
+              <span>Docs</span>
+              <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-px ml-1 text-[10px]" />
+            </div>
+          </a>
+        </div>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {logStreamExists
+            ? `${providerDetails.name} Log Stream`
+            : `Create a ${providerDetails.name} Log Stream`}
+        </p>
+      </div>
+      {onBack && (
+        <button
+          type="button"
+          className="ml-auto mt-1 text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
+          onClick={onBack}
+        >
+          Select another provider
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,111 @@
+import { faAsterisk, faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP, getProviderUrl } from "@app/helpers/auditLogStreams";
+import { TAuditLogStream } from "@app/hooks/api/types";
+
+type Props = {
+  logStream: TAuditLogStream;
+  onDelete: (logStream: TAuditLogStream) => void;
+  onEditCredentials: (logStream: TAuditLogStream) => void;
+};
+
+export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Props) => {
+  const { id, provider } = logStream;
+
+  const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
+  const url = getProviderUrl(logStream);
+
+  return (
+    <Tr
+      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
+      key={`log-stream-${id}`}
+    >
+      <Td>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            {providerDetails.image ? (
+              <img
+                alt={providerDetails.name}
+                src={`/images/integrations/${providerDetails.image}`}
+                className="size-5"
+              />
+            ) : (
+              providerDetails.icon && (
+                <FontAwesomeIcon
+                  icon={providerDetails.icon}
+                  className="size-5 text-mineshaft-300"
+                />
+              )
+            )}
+          </div>
+          <span className="hidden lg:inline">{providerDetails.name}</span>
+        </div>
+      </Td>
+      <Td className="!min-w-[8rem] max-w-0">
+        <div className="flex w-full items-center">
+          <p className="truncate">{url}</p>
+        </div>
+      </Td>
+      <Td>
+        <div className="flex items-center justify-end gap-2">
+          <Tooltip className="max-w-sm text-center" content="Options">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <IconButton
+                  ariaLabel="Options"
+                  colorSchema="secondary"
+                  className="w-6"
+                  variant="plain"
+                >
+                  <FontAwesomeIcon icon={faEllipsisV} />
+                </IconButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent sideOffset={2} align="end">
+                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      isDisabled={!isAllowed}
+                      icon={<FontAwesomeIcon icon={faAsterisk} />}
+                      onClick={() => onEditCredentials(logStream)}
+                    >
+                      Edit Credentials
+                    </DropdownMenuItem>
+                  )}
+                </OrgPermissionCan>
+                <OrgPermissionCan
+                  I={OrgPermissionActions.Delete}
+                  a={OrgPermissionSubjects.Settings}
+                >
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      isDisabled={!isAllowed}
+                      icon={<FontAwesomeIcon icon={faTrash} />}
+                      onClick={() => onDelete(logStream)}
+                    >
+                      Delete Stream
+                    </DropdownMenuItem>
+                  )}
+                </OrgPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </Tooltip>
+        </div>
+      </Td>
+    </Tr>
+  );
+};

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

@@ -0,0 +1,304 @@
+import { useMemo, useState } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFilter,
+  faMagnifyingGlass,
+  faPlug,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP, getProviderUrl } from "@app/helpers/auditLogStreams";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { useListAuditLogStreams } from "@app/hooks/api";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { TAuditLogStream } from "@app/hooks/api/types";
+
+import { AuditLogStreamRow } from "./AuditLogStreamRow";
+import { DeleteAuditLogStreamModal } from "./DeleteAuditLogStreamModal";
+import { EditAuditLogStreamCredentialsModal } from "./EditAuditLogStreamCredentialsModal";
+
+enum LogStreamsOrderBy {
+  Provider = "provider",
+  Url = "url"
+}
+
+type LogStreamFilters = {
+  providers: LogProvider[];
+};
+
+export const AuditLogStreamTable = () => {
+  const { isPending, data: logStreams = [] } = useListAuditLogStreams();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "delete",
+    "editCredentials"
+  ] as const);
+
+  const [filters, setFilters] = useState<LogStreamFilters>({
+    providers: []
+  });
+
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection,
+    orderBy,
+    setOrderDirection,
+    setOrderBy
+  } = usePagination<LogStreamsOrderBy>(LogStreamsOrderBy.Provider, {
+    initPerPage: getUserTablePreference("logStreamsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("logStreamsTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const filteredLogStreams = useMemo(
+    () =>
+      logStreams
+        .filter((stream) => {
+          const { provider } = stream;
+
+          if (filters.providers.length && !filters.providers.includes(provider)) return false;
+
+          const searchValue = search.trim().toLowerCase();
+
+          return AUDIT_LOG_STREAM_PROVIDER_MAP[provider].name.toLowerCase().includes(searchValue);
+        })
+        .sort((a, b) => {
+          const [one, two] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          switch (orderBy) {
+            case LogStreamsOrderBy.Url:
+              return getProviderUrl(one)
+                .toLowerCase()
+                .localeCompare(getProviderUrl(two).toLowerCase());
+            case LogStreamsOrderBy.Provider:
+            default:
+              return AUDIT_LOG_STREAM_PROVIDER_MAP[one.provider].name
+                .toLowerCase()
+                .localeCompare(AUDIT_LOG_STREAM_PROVIDER_MAP[two.provider].name.toLowerCase());
+          }
+        }),
+    [logStreams, orderDirection, search, orderBy, filters]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredLogStreams.length,
+    offset,
+    setPage
+  });
+
+  const handleSort = (column: LogStreamsOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  const getClassName = (col: LogStreamsOrderBy) =>
+    twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+  const getColSortIcon = (col: LogStreamsOrderBy) =>
+    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
+  const isTableFiltered = Boolean(filters.providers.length);
+
+  const handleDelete = (logStream: TAuditLogStream) => handlePopUpOpen("delete", logStream);
+
+  const handleEditCredentials = (logStream: TAuditLogStream) => {
+    handlePopUpOpen("editCredentials", logStream);
+  };
+
+  return (
+    <div>
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search audit log streams..."
+          className="flex-1"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Log Streams"
+              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",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+            <DropdownMenuLabel>Filter by Provider</DropdownMenuLabel>
+            {logStreams.length ? (
+              [...new Set(logStreams.map(({ provider }) => provider))].map((provider) => {
+                const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
+
+                return (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setFilters((prev) => ({
+                        ...prev,
+                        providers: prev.providers.includes(provider)
+                          ? prev.providers.filter((a) => a !== provider)
+                          : [...prev.providers, provider]
+                      }));
+                    }}
+                    key={provider}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      {providerDetails.image ? (
+                        <img
+                          alt={providerDetails.name}
+                          src={`/images/integrations/${providerDetails.image}`}
+                          className="h-4 w-4"
+                        />
+                      ) : (
+                        providerDetails.icon && (
+                          <FontAwesomeIcon
+                            icon={providerDetails.icon}
+                            className="size-4 text-mineshaft-300"
+                          />
+                        )
+                      )}
+                      <span>{providerDetails.name}</span>
+                    </div>
+                  </DropdownMenuItem>
+                );
+              })
+            ) : (
+              <DropdownMenuItem isDisabled>No Providers Configured</DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-1/4">
+                <div className="flex items-center">
+                  Provider
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(LogStreamsOrderBy.Provider)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(LogStreamsOrderBy.Provider)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(LogStreamsOrderBy.Provider)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Endpoint URL
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(LogStreamsOrderBy.Url)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(LogStreamsOrderBy.Url)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(LogStreamsOrderBy.Url)} />
+                  </IconButton>
+                </div>
+              </Th>
+
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && (
+              <TableSkeleton
+                innerKey="audit-log-streams-table"
+                columns={3}
+                key="audit-log-streams"
+              />
+            )}
+            {filteredLogStreams.slice(offset, perPage * page).map((stream) => (
+              <AuditLogStreamRow
+                logStream={stream}
+                key={stream.id}
+                onDelete={handleDelete}
+                onEditCredentials={handleEditCredentials}
+              />
+            ))}
+          </TBody>
+        </Table>
+        {Boolean(filteredLogStreams.length) && (
+          <Pagination
+            count={filteredLogStreams.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!isPending && !filteredLogStreams?.length && (
+          <EmptyState
+            title={
+              logStreams.length
+                ? "No log streams match search..."
+                : "No log streams have been configured"
+            }
+            icon={logStreams.length ? faSearch : faPlug}
+          />
+        )}
+      </TableContainer>
+      <DeleteAuditLogStreamModal
+        isOpen={popUp.delete.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("delete", isOpen)}
+        auditLogStream={popUp.delete.data}
+      />
+      <EditAuditLogStreamCredentialsModal
+        isOpen={popUp.editCredentials.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("editCredentials", isOpen)}
+        auditLogStream={popUp.editCredentials.data}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,54 @@
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal } from "@app/components/v2";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
+import { useDeleteAuditLogStream } from "@app/hooks/api";
+import { TAuditLogStream } from "@app/hooks/api/types";
+
+type Props = {
+  auditLogStream?: TAuditLogStream;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export const DeleteAuditLogStreamModal = ({ isOpen, onOpenChange, auditLogStream }: Props) => {
+  const deleteAuditLogStream = useDeleteAuditLogStream();
+
+  if (!auditLogStream) return null;
+
+  const { id: auditLogStreamId, provider } = auditLogStream;
+
+  const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider];
+
+  const handleDelete = async () => {
+    try {
+      await deleteAuditLogStream.mutateAsync({
+        auditLogStreamId,
+        provider
+      });
+
+      createNotification({
+        text: `Successfully deleted ${providerDetails.name} stream`,
+        type: "success"
+      });
+
+      onOpenChange(false);
+    } catch (err) {
+      console.error(err);
+
+      createNotification({
+        text: `Failed to delete ${providerDetails.name} stream`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <DeleteActionModal
+      isOpen={isOpen}
+      onChange={onOpenChange}
+      title="Are you sure you want to delete this log stream?"
+      deleteKey="delete"
+      onDeleteApproved={handleDelete}
+    />
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
+import { TAuditLogStream } from "@app/hooks/api/types";
+
+import { AuditLogStreamForm } from "../AuditLogStreamForm/AuditLogStreamForm";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  auditLogStream?: TAuditLogStream;
+};
+
+export const EditAuditLogStreamCredentialsModal = ({
+  isOpen,
+  onOpenChange,
+  auditLogStream
+}: Props) => {
+  if (!auditLogStream) return null;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        className="max-w-2xl"
+        title="Edit Log Stream Credentials"
+        subTitle={`Update the credentials for this ${AUDIT_LOG_STREAM_PROVIDER_MAP[auditLogStream.provider].name} Log Stream.`}
+      >
+        <AuditLogStreamForm
+          onComplete={() => onOpenChange(false)}
+          auditLogStream={auditLogStream}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,155 @@
+import { useMemo } from "react";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { EmptyState, Spinner } from "@app/components/v2";
+import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useGetAuditLogStreamOptions } from "@app/hooks/api";
+import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
+
+type Props = {
+  onSelect: (provider: LogProvider) => void;
+};
+
+// TODO: When we have more than 1 page of providers, uncomment the search components
+
+export const LogStreamProviderSelect = ({ onSelect }: Props) => {
+  const { isPending, data: logStreamOptions } = useGetAuditLogStreamOptions();
+
+  const { search, setPage, page, perPage, offset } = usePagination("", {
+    initPerPage: 16
+  });
+
+  const filteredOptions = useMemo(
+    () =>
+      (logStreamOptions || [])
+        .filter(
+          ({ name, provider }) =>
+            name.toLowerCase().includes(search.trim().toLowerCase()) ||
+            provider.toLowerCase().includes(search.trim().toLowerCase())
+        )
+        .sort((a, b) => {
+          if (a.provider === LogProvider.Custom) return 1;
+          if (b.provider === LogProvider.Custom) return -1;
+          return 0;
+        }),
+    [logStreamOptions, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredOptions.length,
+    offset,
+    setPage
+  });
+
+  if (isPending) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center py-2.5">
+        <Spinner size="lg" className="text-mineshaft-500" />
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search options..."
+        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
+      /> */}
+      <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
+        {filteredOptions.slice(offset, perPage * page)?.map((option) => {
+          const { image, icon, name, size = 50 } = AUDIT_LOG_STREAM_PROVIDER_MAP[option.provider];
+
+          return (
+            <button
+              type="button"
+              onClick={() => onSelect(option.provider)}
+              className={`group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 ${option.provider === LogProvider.Custom ? "bg-mineshaft-700/30 hover:bg-mineshaft-600/30" : "bg-mineshaft-700 hover:bg-mineshaft-600"} p-4 duration-200`}
+            >
+              {image && (
+                <div className="relative">
+                  <img
+                    src={`/images/integrations/${image}`}
+                    style={{
+                      width: `${size}px`
+                    }}
+                    className="mt-auto"
+                    alt={`${name} logo`}
+                  />
+                </div>
+              )}
+              {icon && (
+                <FontAwesomeIcon className="mt-auto size-10 text-mineshaft-300" icon={icon} />
+              )}
+              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+                {name}
+              </div>
+            </button>
+          );
+        })}
+        {!filteredOptions.length && (
+          <EmptyState
+            className="col-span-full mt-40"
+            title="No providers match search"
+            icon={faSearch}
+          />
+        )}
+      </div>
+      {/* {Boolean(filteredOptions.length) && (
+        <Pagination
+          startAdornment={
+            <Tooltip
+              side="bottom"
+              className="max-w-sm py-4"
+              content={
+                <>
+                  <p className="mb-2">Infisical is constantly adding support for more providers.</p>
+                  <p>
+                    {`If you don't see the third-party
+            provider you're looking for,`}{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://infisical.com/slack"
+                      rel="noopener noreferrer"
+                    >
+                      let us know on Slack
+                    </a>{" "}
+                    or{" "}
+                    <a
+                      target="_blank"
+                      className="underline hover:text-mineshaft-300"
+                      href="https://github.com/Infisical/infisical/discussions"
+                      rel="noopener noreferrer"
+                    >
+                      make a request on GitHub
+                    </a>
+                    .
+                  </p>
+                </>
+              }
+            >
+              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
+                <span className="text-xs">
+                  Don&#39;t see the third-party provider you&#39;re looking for?
+                </span>
+                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
+              </div>
+            </Tooltip>
+          }
+          count={filteredOptions.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+          perPageList={[16]}
+        />
+      )} */}
+    </div>
+  );
+};

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

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

frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/SelectImportFromPlatformModal.tsx

@@ -1,6 +1,4 @@
 import { useState } from "react";
-import { faKey, faVault } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { Modal, ModalContent } from "@app/components/v2";
@@ -20,14 +18,16 @@ enum WizardSteps {
 
 const PLATFORM_LIST = [
   {
-    icon: faKey,
+    image: "/images/integrations/EnvKey.png",
     platform: "env-key",
-    title: "Env Key"
+    title: "EnvKey",
+    size: 34
   },
   {
-    icon: faVault,
+    image: "/images/integrations/Vault.png",
     platform: "vault",
-    title: "Vault"
+    title: "HCP Vault",
+    size: 40
   }
 ] as const;
 
@@ -67,7 +67,7 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
                 {PLATFORM_LIST.map((platform, idx) => (
                   <div
                     key={`platform-${idx + 1}`}
-                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded border border-mineshaft-500 bg-mineshaft-700 p-6 py-5 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {
@@ -81,7 +81,11 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
                       }
                     }}
                   >
-                    <FontAwesomeIcon icon={platform.icon} size="lg" />
+                    <img
+                      src={platform.image}
+                      alt={`${platform.title} logo`}
+                      style={{ width: platform.size }}
+                    />
                     <div className="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
                   </div>
                 ))}

frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx

@@ -2,13 +2,22 @@ import { Controller, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Tooltip } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { useImportVault } from "@app/hooks/api/migration/mutations";
+import { useHasCustomMigrationAvailable } from "@app/hooks/api/migration";
+import { ExternalMigrationProviders } from "@app/hooks/api/migration/types";
 
 type Props = {
   id?: string;
@@ -17,11 +26,13 @@ type Props = {
 
 enum VaultMappingType {
   KeyVault = "key-vault",
-  Namespace = "namespace"
+  Namespace = "namespace",
+  Custom = "custom"
 }
 
 const MAPPING_TYPE_MENU_ITEMS = [
   {
+    isCustom: false,
     value: VaultMappingType.KeyVault,
     label: "Key Vaults",
     tooltip: (
@@ -41,6 +52,7 @@ const MAPPING_TYPE_MENU_ITEMS = [
     )
   },
   {
+    isCustom: false,
     value: VaultMappingType.Namespace,
     label: "Namespaces",
     tooltip: (
@@ -56,42 +68,53 @@ const MAPPING_TYPE_MENU_ITEMS = [
         </div>
       </div>
     )
+  },
+  {
+    isCustom: true,
+    value: VaultMappingType.Custom,
+    label: "Custom Migration",
+    tooltip: (
+      <div>
+        Custom migrations allow you to shape your Vault migration to your specific needs. Please
+        contact our sales team to get started with custom migrations.
+      </div>
+    )
   }
 ];
 
 export const VaultPlatformModal = ({ onClose }: Props) => {
+  const { data: isCustomMigrationAvailable } = useHasCustomMigrationAvailable(
+    ExternalMigrationProviders.Vault
+  );
+
   const formSchema = z.object({
     vaultUrl: z.string().min(1),
+    gatewayId: z.string().optional(),
     vaultNamespace: z.string().trim().optional(),
     vaultAccessToken: z.string().min(1),
     mappingType: z.nativeEnum(VaultMappingType).default(VaultMappingType.KeyVault)
   });
   type TFormData = z.infer<typeof formSchema>;
 
+  const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());
   const { mutateAsync: importVault } = useImportVault();
 
   const {
     control,
     handleSubmit,
     reset,
-    formState: { isLoading, isDirty, isSubmitting, isValid, errors }
+    formState: { isLoading, isDirty, isSubmitting, isValid }
   } = useForm<TFormData>({
     resolver: zodResolver(formSchema)
   });
 
-  console.log({
-    isSubmitting,
-    isLoading,
-    isValid,
-    errors
-  });
-
   const onSubmit = async (data: TFormData) => {
     await importVault({
       vaultAccessToken: data.vaultAccessToken,
       vaultNamespace: data.vaultNamespace,
       vaultUrl: data.vaultUrl,
-      mappingType: data.mappingType
+      mappingType: data.mappingType,
+      ...(data.gatewayId && { gatewayId: data.gatewayId })
     });
     createNotification({
       title: "Import started",
@@ -110,11 +133,70 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
           The Vault migration currently supports importing static secrets from Vault
           Dedicated/Self-Hosted.
           <div className="mt-2 text-xs opacity-80">
-            Currently only KV Secret Engine V2 is supported for Vault migrations.
+            Currently only KV Secret Engine is supported for Vault migrations.
           </div>
         </p>
       </NoticeBannerV2>
       <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+        <div className="w-full flex-1">
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                    isOptional
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <div>
+                        <Select
+                          isDisabled={!isAllowed}
+                          value={value as string}
+                          onValueChange={(v) => {
+                            if (v !== "") {
+                              onChange(v);
+                            }
+                          }}
+                          className="w-full border border-mineshaft-500"
+                          dropdownContainerClassName="max-w-none"
+                          isLoading={isGatewayLoading}
+                          placeholder="Default: Internet Gateway"
+                          position="popper"
+                        >
+                          <SelectItem
+                            value={undefined as unknown as string}
+                            onClick={() => {
+                              onChange(undefined);
+                            }}
+                          >
+                            Internet Gateway
+                          </SelectItem>
+                          {gateways?.map((el) => (
+                            <SelectItem value={el.id} key={el.id}>
+                              {el.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </div>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+
         <Controller
           control={control}
           name="vaultUrl"
@@ -168,31 +250,44 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
               errorText={error?.message}
               className="flex-1"
             >
-              <div className="mt-2 grid h-full w-full grid-cols-2 gap-4">
+              <div className="mt-2 grid grid-cols-2 gap-4">
                 {MAPPING_TYPE_MENU_ITEMS.map((el) => (
                   <div
                     key={el.value}
                     className={twMerge(
                       "flex w-full cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 p-4 opacity-75 transition-all",
                       field.value === el.value
-                        ? "border-primary-700 border-opacity-70 bg-mineshaft-600 opacity-100"
-                        : "hover:border-primary-700 hover:bg-mineshaft-600"
+                        ? "border-primary-700 border-opacity-70 bg-mineshaft-700 opacity-100"
+                        : "hover:border-primary-800/75 hover:bg-mineshaft-600",
+                      el.isCustom && "col-span-2",
+                      el.isCustom &&
+                        !isCustomMigrationAvailable?.data?.enabled &&
+                        "!cursor-not-allowed !border-mineshaft-600 !bg-mineshaft-600 !opacity-40"
                     )}
-                    onClick={() => field.onChange(el.value)}
+                    onClick={() => {
+                      if (el.isCustom && !isCustomMigrationAvailable?.data?.enabled) return;
+
+                      field.onChange(el.value);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key !== "Enter") return;
+                      if (el.isCustom && !isCustomMigrationAvailable?.data?.enabled) return;
+
+                      field.onChange(el.value);
+                    }}
                     role="button"
                     tabIndex={0}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        field.onChange(el.value);
-                      }
-                    }}
                   >
                     <div className="flex items-center gap-1">
                       <div className="text-center text-sm">{el.label}</div>
                       {el.tooltip && (
                         <div className="text-center text-sm">
                           <Tooltip content={el.tooltip} className="max-w-96">
-                            <FontAwesomeIcon className="opacity-60" icon={faQuestionCircle} />
+                            <FontAwesomeIcon
+                              size="sm"
+                              className="text-mineshaft-400"
+                              icon={faQuestionCircle}
+                            />
                           </Tooltip>
                         </div>
                       )}
@@ -210,7 +305,7 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
             isLoading={isLoading}
             isDisabled={!isDirty || isSubmitting || isLoading || !isValid}
           >
-            Import data
+            Import Data
           </Button>
           <Button variant="outline_bg" onClick={onClose}>
             Cancel