Merge pull request #3193 from Infisical/misc/privilege-management-v2-transition

misc: privilege management v2 transition

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -17,6 +17,8 @@ export type CheckboxProps = Omit<
   isError?: boolean;
   isIndeterminate?: boolean;
   containerClassName?: string;
+  indicatorClassName?: string;
+  allowMultilineLabel?: boolean;
 };
 
 export const Checkbox = ({
@@ -30,6 +32,8 @@ export const Checkbox = ({
   isError,
   isIndeterminate,
   containerClassName,
+  indicatorClassName,
+  allowMultilineLabel,
   ...props
 }: CheckboxProps): JSX.Element => {
   return (
@@ -48,7 +52,9 @@ export const Checkbox = ({
         {...props}
         id={id}
       >
-        <CheckboxPrimitive.Indicator className={`${checkIndicatorBg || "text-bunker-800"}`}>
+        <CheckboxPrimitive.Indicator
+          className={twMerge(`${checkIndicatorBg || "text-bunker-800"}`, indicatorClassName)}
+        >
           {isIndeterminate ? (
             <FontAwesomeIcon icon={faMinus} size="sm" />
           ) : (
@@ -57,7 +63,11 @@ export const Checkbox = ({
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       <label
-        className={twMerge("truncate whitespace-nowrap text-sm", isError && "text-red-400")}
+        className={twMerge(
+          "text-sm",
+          !allowMultilineLabel && "truncate whitespace-nowrap",
+          isError && "text-red-400"
+        )}
         htmlFor={id}
       >
         {children}

frontend/src/context/OrgPermissionContext/index.tsx

@@ -1,3 +1,8 @@
 export { useOrgPermission } from "./OrgPermissionContext";
 export type { TOrgPermission } from "./types";
-export { OrgPermissionActions, OrgPermissionSubjects } from "./types";
+export {
+  OrgPermissionActions,
+  OrgPermissionGroupActions,
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects
+} from "./types";

frontend/src/context/OrgPermissionContext/types.ts

@@ -59,6 +59,28 @@ export enum OrgPermissionKmipActions {
   Setup = "setup"
 }
 
+export enum OrgPermissionIdentityActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  GrantPrivileges = "grant-privileges",
+  RevokeAuth = "revoke-auth",
+  CreateToken = "create-token",
+  GetToken = "get-token",
+  DeleteToken = "delete-token"
+}
+
+export enum OrgPermissionGroupActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  GrantPrivileges = "grant-privileges",
+  AddMembers = "add-members",
+  RemoveMembers = "remove-members"
+}
+
 export type AppConnectionSubjectFields = {
   connectionId: string;
 };
@@ -73,15 +95,15 @@ export type OrgPermissionSet =
   | [OrgPermissionActions, OrgPermissionSubjects.Scim]
   | [OrgPermissionActions, OrgPermissionSubjects.Sso]
   | [OrgPermissionActions, OrgPermissionSubjects.Ldap]
-  | [OrgPermissionActions, OrgPermissionSubjects.Groups]
+  | [OrgPermissionGroupActions, OrgPermissionSubjects.Groups]
   | [OrgPermissionActions, OrgPermissionSubjects.SecretScanning]
   | [OrgPermissionActions, OrgPermissionSubjects.Billing]
-  | [OrgPermissionActions, OrgPermissionSubjects.Identity]
   | [OrgPermissionActions, OrgPermissionSubjects.Kms]
   | [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
   | [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
   | [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates]
   | [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections]
+  | [OrgPermissionIdentityActions, OrgPermissionSubjects.Identity]
   | [OrgPermissionKmipActions, OrgPermissionSubjects.Kmip]
   | [OrgGatewayPermissionActions, OrgPermissionSubjects.Gateway]
   | [OrgPermissionSecretShareAction, OrgPermissionSubjects.SecretShare];

frontend/src/context/ProjectPermissionContext/index.tsx

@@ -4,6 +4,9 @@ export {
   ProjectPermissionActions,
   ProjectPermissionCmekActions,
   ProjectPermissionDynamicSecretActions,
+  ProjectPermissionGroupActions,
+  ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
+  ProjectPermissionMemberActions,
   ProjectPermissionSub
 } from "./types";

frontend/src/context/ProjectPermissionContext/types.ts

@@ -51,6 +51,30 @@ export enum ProjectPermissionSecretSyncActions {
   RemoveSecrets = "remove-secrets"
 }
 
+export enum ProjectPermissionIdentityActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  GrantPrivileges = "grant-privileges"
+}
+
+export enum ProjectPermissionMemberActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  GrantPrivileges = "grant-privileges"
+}
+
+export enum ProjectPermissionGroupActions {
+  Read = "read",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  GrantPrivileges = "grant-privileges"
+}
+
 export enum PermissionConditionOperators {
   $IN = "$in",
   $ALL = "$all",

frontend/src/context/index.tsx

@@ -2,6 +2,8 @@ export { useOrganization } from "./OrganizationContext";
 export type { TOrgPermission } from "./OrgPermissionContext";
 export {
   OrgPermissionActions,
+  OrgPermissionGroupActions,
+  OrgPermissionIdentityActions,
   OrgPermissionSubjects,
   useOrgPermission
 } from "./OrgPermissionContext";
@@ -10,7 +12,10 @@ export {
   ProjectPermissionActions,
   ProjectPermissionCmekActions,
   ProjectPermissionDynamicSecretActions,
+  ProjectPermissionGroupActions,
+  ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
+  ProjectPermissionMemberActions,
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";

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

@@ -20,5 +20,6 @@ export {
   useGetOrgTaxIds,
   useGetOrgTrialUrl,
   useUpdateOrg,
-  useUpdateOrgBillingDetails
+  useUpdateOrgBillingDetails,
+  useUpgradePrivilegeSystem
 } from "./queries";

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

@@ -129,6 +129,18 @@ export const useUpdateOrg = () => {
   });
 };
 
+export const useUpgradePrivilegeSystem = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => {
+      return apiRequest.post("/api/v2/organizations/privilege-system-upgrade");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: organizationKeys.getUserOrganizations });
+    }
+  });
+};
+
 export const useGetOrgTrialUrl = () => {
   return useMutation({
     mutationFn: async ({ orgId, success_url }: { orgId: string; success_url: string }) => {

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

@@ -15,6 +15,7 @@ export type Organization = {
   defaultMembershipRole: string;
   enforceMfa: boolean;
   selectedMfaMethod?: MfaMethod;
+  shouldUseNewPrivilegeSystem: boolean;
   allowSecretSharingOutsideOrganization?: boolean;
 };
 

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

@@ -1,17 +1,30 @@
+import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
-import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { Button, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import {
+  OrgPermissionActions,
+  OrgPermissionGroupActions,
+  OrgPermissionIdentityActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
+import { UpgradePrivilegeSystemModal } from "./components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal";
 import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
 
 export const AccessManagementPage = () => {
   const { t } = useTranslation();
   const { permission } = useOrgPermission();
+  const { currentOrg } = useOrganization();
+
   const navigate = useNavigate({
     from: ROUTE_PATHS.Organization.AccessControlPage.path
   });
@@ -21,6 +34,8 @@ export const AccessManagementPage = () => {
     structuralSharing: true
   });
 
+  const [isUpgradePrivilegeSystemModalOpen, setIsUpgradePrivilegeSystemModalOpen] = useState(false);
+
   const updateSelectedTab = (tab: string) => {
     navigate({
       search: { selectedTab: tab }
@@ -37,13 +52,16 @@ export const AccessManagementPage = () => {
     {
       key: OrgAccessControlTabSections.Groups,
       label: "Groups",
-      isHidden: permission.cannot(OrgPermissionActions.Read, OrgPermissionSubjects.Groups),
+      isHidden: permission.cannot(OrgPermissionGroupActions.Read, OrgPermissionSubjects.Groups),
       component: OrgGroupsTab
     },
     {
       key: OrgAccessControlTabSections.Identities,
       label: "Identities",
-      isHidden: permission.cannot(OrgPermissionActions.Read, OrgPermissionSubjects.Identity),
+      isHidden: permission.cannot(
+        OrgPermissionIdentityActions.Read,
+        OrgPermissionSubjects.Identity
+      ),
       component: OrgIdentityTab
     },
     {
@@ -64,6 +82,30 @@ export const AccessManagementPage = () => {
           title="Organization Access Control"
           description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
         />
+        {!currentOrg.shouldUseNewPrivilegeSystem && (
+          <div className="mb-4 mt-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+            <div className="mb-1 flex items-center text-sm">
+              <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+              Your organization is using legacy privilege management
+            </div>
+            <p className="mb-2 mt-1 text-sm text-bunker-300">
+              We&apos;ve developed an improved privilege management system to better serve your
+              security needs. Upgrade to our new permission-based approach that allows you to
+              explicitly designate who can modify specific access levels, rather than relying on hierarchy comparisons.
+            </p>
+            <Button
+              colorSchema="primary"
+              className="mt-2 w-fit text-xs"
+              onClick={() => setIsUpgradePrivilegeSystemModalOpen(true)}
+            >
+              Learn More & Upgrade
+            </Button>
+          </div>
+        )}
+        <UpgradePrivilegeSystemModal
+          isOpen={isUpgradePrivilegeSystemModalOpen}
+          onOpenChange={setIsUpgradePrivilegeSystemModalOpen}
+        />
         <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
           <TabList>
             {tabSections

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

@@ -5,7 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { useDeleteGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -58,7 +58,7 @@ export const OrgGroupsSection = () => {
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
-        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
+        <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button
               colorSchema="primary"

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

@@ -33,7 +33,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -241,7 +241,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                       <Td>{slug}</Td>
                       <Td>
                         <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
+                          I={OrgPermissionGroupActions.Edit}
                           a={OrgPermissionSubjects.Groups}
                         >
                           {(isAllowed) => {
@@ -289,7 +289,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               Copy Group ID
                             </DropdownMenuItem>
                             <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
+                              I={OrgPermissionGroupActions.Edit}
                               a={OrgPermissionSubjects.Groups}
                             >
                               {(isAllowed) => (
@@ -315,7 +315,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               )}
                             </OrgPermissionCan>
                             <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
+                              I={OrgPermissionGroupActions.Edit}
                               a={OrgPermissionSubjects.Groups}
                             >
                               {(isAllowed) => (
@@ -339,7 +339,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               )}
                             </OrgPermissionCan>
                             <OrgPermissionCan
-                              I={OrgPermissionActions.Delete}
+                              I={OrgPermissionGroupActions.Delete}
                               a={OrgPermissionSubjects.Groups}
                             >
                               {(isAllowed) => (

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

@@ -6,7 +6,7 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import {
-  OrgPermissionActions,
+  OrgPermissionIdentityActions,
   OrgPermissionSubjects,
   useOrganization,
   useSubscription
@@ -87,7 +87,10 @@ export const IdentitySection = withPermission(
               />
             </a>
           </div>
-          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Identity}>
+          <OrgPermissionCan
+            I={OrgPermissionIdentityActions.Create}
+            a={OrgPermissionSubjects.Identity}
+          >
             {(isAllowed) => (
               <Button
                 colorSchema="primary"
@@ -143,5 +146,5 @@ export const IdentitySection = withPermission(
       </div>
     );
   },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Identity }
+  { action: OrgPermissionIdentityActions.Read, subject: OrgPermissionSubjects.Identity }
 );

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

@@ -32,7 +32,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -207,7 +207,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     <Td>{name}</Td>
                     <Td>
                       <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
+                        I={OrgPermissionIdentityActions.Edit}
                         a={OrgPermissionSubjects.Identity}
                       >
                         {(isAllowed) => {
@@ -243,7 +243,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="start" className="p-1">
                           <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
+                            I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}
                           >
                             {(isAllowed) => (
@@ -267,7 +267,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             )}
                           </OrgPermissionCan>
                           <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
+                            I={OrgPermissionIdentityActions.Delete}
                             a={OrgPermissionSubjects.Identity}
                           >
                             {(isAllowed) => (

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

@@ -0,0 +1,293 @@
+import { 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, Checkbox, Modal, ModalContent } from "@app/components/v2";
+import { useOrgPermission } from "@app/context";
+import { useUpgradePrivilegeSystem } from "@app/hooks/api";
+
+const formSchema = z.object({
+  isProjectPrivilegesUpdated: z.literal(true),
+  isOrgPrivilegesUpdated: z.literal(true),
+  isInfrastructureUpdated: z.literal(true),
+  acknowledgesPermanentChange: z.literal(true)
+});
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) => {
+  const { membership } = useOrgPermission();
+  const [step, setStep] = useState<"info" | "upgrade">("info");
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting }
+  } = useForm({ resolver: zodResolver(formSchema) });
+  const { mutateAsync: upgradePrivilegeSystem } = useUpgradePrivilegeSystem();
+
+  const isProjectPrivilegesUpdated = watch("isProjectPrivilegesUpdated");
+  const isOrgPrivilegesUpdated = watch("isOrgPrivilegesUpdated");
+  const isInfrastructureUpdated = watch("isInfrastructureUpdated");
+  const acknowledgesPermanentChange = watch("acknowledgesPermanentChange");
+  const isAllChecksCompleted =
+    isProjectPrivilegesUpdated &&
+    isOrgPrivilegesUpdated &&
+    isInfrastructureUpdated &&
+    acknowledgesPermanentChange;
+
+  const handlePrivilegeSystemUpgrade = async () => {
+    try {
+      await upgradePrivilegeSystem();
+
+      createNotification({
+        text: "Privilege system upgrade completed",
+        type: "success"
+      });
+
+      onOpenChange(false);
+    } catch {
+      createNotification({
+        text: "Failed to upgrade privilege system",
+        type: "error"
+      });
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    setStep("info");
+  };
+
+  const isAdmin = membership?.role === "admin";
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={handleClose}>
+      <ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
+        {step === "info" ? (
+          <div className="mb-4">
+            <p className="mb-4 text-sm text-mineshaft-300">
+              We&apos;ve developed an improved privilege management system that enhances how access
+              controls work in your organization.
+            </p>
+
+            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+              <div className="mb-3">
+                <div className="mb-3">
+                  <p className="mb-3 text-sm text-mineshaft-300">
+                    <strong>Current system: </strong>
+                    Users with higher privilege levels can modify access for anyone below them. This
+                    rigid hierarchy makes it difficult to implement precise access control policies,
+                    forcing you to either over-grant permissions or create complex workarounds when
+                    specialized roles (like team leads) need to manage their team&apos;s access
+                    without receiving broader administrative powers.
+                  </p>
+                  <p className="text-sm text-mineshaft-300">
+                    <strong>New system:</strong> Users need explicit permission to modify specific
+                    access levels, providing targeted control. After upgrading, you&apos;ll need to
+                    grant the new &apos;Grant Privileges&apos; permission. At the organization
+                    level, this is available for the{" "}
+                    <a
+                      href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-groups"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                    >
+                      Group
+                    </a>{" "}
+                    and{" "}
+                    <a
+                      href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-identity"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                    >
+                      Identity
+                    </a>{" "}
+                    subjects while at the project level, this is available for the{" "}
+                    <a
+                      href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-member"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                    >
+                      Member,
+                    </a>{" "}
+                    <a
+                      href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-groups"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                    >
+                      Group,
+                    </a>{" "}
+                    and{" "}
+                    <a
+                      href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-identity"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline hover:text-bunker-200 hover:decoration-primary-700"
+                    >
+                      Identity
+                    </a>{" "}
+                    subjects.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 flex justify-end">
+              <Button
+                onClick={() => setStep("upgrade")}
+                variant="solid"
+                colorSchema="primary"
+                size="md"
+                className="w-[120px] bg-primary hover:bg-primary-600"
+              >
+                Continue
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="mb-4">
+            <p className="mb-4 text-sm text-mineshaft-300">
+              Your existing access control workflows will continue to function. However, actions
+              that involve modifying privileges or permissions will now use the new permission-based
+              system, requiring users to have explicit permission to modify given resource.
+            </p>
+
+            <p className="mb-4 text-sm text-mineshaft-300">
+              This upgrade affects operations like updating roles, managing group memberships, and
+              modifying privileges across your organization and projects.
+            </p>
+
+            <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+              <p className="mb-4 text-sm text-mineshaft-300">
+                Once upgraded, your organization <span className="font-bold">cannot</span> revert to
+                the legacy privilege system. Please ensure you&apos;ve completed all preparations
+                before proceeding.
+              </p>
+
+              <div className="mb-4">
+                <p className="mb-3 text-sm font-medium">Required preparation checklist:</p>
+
+                <div className="flex flex-col space-y-4">
+                  <Controller
+                    control={control}
+                    name="isProjectPrivilegesUpdated"
+                    defaultValue={false}
+                    render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
+                      <Checkbox
+                        containerClassName="items-start"
+                        className="mt-0.5 items-start"
+                        id="is-project-privileges-updated"
+                        indicatorClassName="flex h-full w-full items-center justify-center"
+                        allowMultilineLabel
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        onBlur={onBlur}
+                        isError={Boolean(error?.message)}
+                      >
+                        I have reviewed project-level privileges and updated them if necessary
+                      </Checkbox>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="isOrgPrivilegesUpdated"
+                    defaultValue={false}
+                    render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
+                      <Checkbox
+                        containerClassName="items-start"
+                        className="mt-0.5 items-start"
+                        id="is-org-privileges-updated"
+                        indicatorClassName="flex h-full w-full items-center justify-center"
+                        allowMultilineLabel
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        onBlur={onBlur}
+                        isError={Boolean(error?.message)}
+                      >
+                        I have reviewed organization-level privileges and updated them if necessary
+                      </Checkbox>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="isInfrastructureUpdated"
+                    defaultValue={false}
+                    render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
+                      <Checkbox
+                        containerClassName="items-start"
+                        className="mt-0.5 items-start"
+                        id="is-infrastructure-updated"
+                        indicatorClassName="flex h-full w-full items-center justify-center"
+                        allowMultilineLabel
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        onBlur={onBlur}
+                        isError={Boolean(error?.message)}
+                      >
+                        I have checked Terraform configurations and API integrations for
+                        compatibility with the new system
+                      </Checkbox>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="acknowledgesPermanentChange"
+                    defaultValue={false}
+                    render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
+                      <Checkbox
+                        containerClassName="items-start"
+                        className="mt-0.5 items-start"
+                        id="acknowledges-permanent-change"
+                        indicatorClassName="flex h-full w-full items-center justify-center"
+                        allowMultilineLabel
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        onBlur={onBlur}
+                        isError={Boolean(error?.message)}
+                      >
+                        I understand that this upgrade is permanent and cannot be reversed
+                      </Checkbox>
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <form onSubmit={handleSubmit(handlePrivilegeSystemUpgrade)}>
+              <div className="mt-6 flex items-center justify-end gap-4">
+                <button
+                  type="button"
+                  onClick={() => setStep("info")}
+                  className="w-[120px] text-sm text-mineshaft-300 hover:text-mineshaft-200"
+                >
+                  Cancel
+                </button>
+                <Button
+                  type="submit"
+                  variant="solid"
+                  colorSchema="primary"
+                  size="md"
+                  className="w-[120px] bg-primary hover:bg-primary-600"
+                  isDisabled={!isAllChecksCompleted || !isAdmin}
+                  isLoading={isSubmitting}
+                >
+                  Upgrade
+                </Button>
+              </div>
+            </form>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -18,7 +18,7 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
 import { useDeleteGroup } from "@app/hooks/api";
 import { useGetGroupById } from "@app/hooks/api/groups/queries";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -93,7 +93,10 @@ const Page = () => {
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="p-1">
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+                <OrgPermissionCan
+                  I={OrgPermissionGroupActions.Edit}
+                  a={OrgPermissionSubjects.Groups}
+                >
                   {(isAllowed) => (
                     <DropdownMenuItem
                       className={twMerge(
@@ -113,7 +116,10 @@ const Page = () => {
                     </DropdownMenuItem>
                   )}
                 </OrgPermissionCan>
-                <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Groups}>
+                <OrgPermissionCan
+                  I={OrgPermissionGroupActions.Delete}
+                  a={OrgPermissionSubjects.Groups}
+                >
                   {(isAllowed) => (
                     <DropdownMenuItem
                       className={twMerge(
@@ -179,7 +185,7 @@ export const GroupDetailsByIDPage = () => {
       </Helmet>
       <OrgPermissionCan
         passThrough={false}
-        I={OrgPermissionActions.Read}
+        I={OrgPermissionGroupActions.Read}
         a={OrgPermissionSubjects.Groups}
       >
         <Page />

frontend/src/pages/organization/GroupDetailsByIDPage/components/AddGroupMemberModal.tsx

@@ -20,7 +20,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
 import { useDebounce, useResetPageHelper } from "@app/hooks";
 import { useAddUserToGroup, useListGroupUsers } from "@app/hooks/api";
 import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
@@ -124,7 +124,7 @@ export const AddGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
                       </Td>
                       <Td className="flex justify-end">
                         <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
+                          I={OrgPermissionGroupActions.Edit}
                           a={OrgPermissionSubjects.Groups}
                         >
                           {(isAllowed) => {

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { IconButton, Spinner, Tooltip } from "@app/components/v2";
 import { CopyButton } from "@app/components/v2/CopyButton";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
 import { useGetGroupById } from "@app/hooks/api/";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -22,7 +22,7 @@ export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Group Details</h3>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => {
             return (
               <Tooltip content="Edit Group">

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useOidcManageGroupMembershipsEnabled, useRemoveUserFromGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -54,7 +54,7 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
     <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Group Members</h3>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Tooltip
               className="text-center"

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx

@@ -24,7 +24,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useListGroupUsers, useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -177,7 +177,7 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
           />
         )}
         {!groupMemberships?.users.length && (
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+          <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
             {(isAllowed) => (
               <Tooltip
                 className="text-center"

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembershipRow.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
 import { TGroupUser } from "@app/hooks/api/groups/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -39,7 +39,7 @@ export const GroupMembershipRow = ({
         </Tooltip>
       </Td>
       <Td className="justify-end">
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => {
             return (
               <Tooltip

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

@@ -7,7 +7,7 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { DeleteActionModal, PageHeader } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 import { ViewIdentityAuthModal } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal";
@@ -132,7 +132,7 @@ export const IdentityDetailsByIDPage = () => {
       </Helmet>
       <OrgPermissionCan
         passThrough={false}
-        I={OrgPermissionActions.Read}
+        I={OrgPermissionIdentityActions.Read}
         a={OrgPermissionSubjects.Identity}
       >
         <Page />

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { IdentityAuthMethod, identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -47,7 +47,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
       {!Object.values(IdentityAuthMethod).every((method) =>
         data.identity.authMethods.includes(method)
       ) && (
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+        <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
             <Button
               isDisabled={!isAllowed}

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx

@@ -4,7 +4,7 @@ import { format } from "date-fns";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, IconButton, Tooltip } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import {
   useGetIdentityById,
@@ -118,7 +118,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
             </div>
           );
         })}
-      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+      <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
         {(isAllowed) => {
           return (
             <Button

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -20,7 +20,7 @@ import {
   Tag,
   Tooltip
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import { useGetIdentityById } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -54,7 +54,10 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="min-w-[120px]" align="end">
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+            <OrgPermissionCan
+              I={OrgPermissionIdentityActions.Edit}
+              a={OrgPermissionSubjects.Identity}
+            >
               {(isAllowed) => (
                 <DropdownMenuItem
                   className={twMerge(
@@ -75,7 +78,10 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
                 </DropdownMenuItem>
               )}
             </OrgPermissionCan>
-            <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Identity}>
+            <OrgPermissionCan
+              I={OrgPermissionIdentityActions.Delete}
+              a={OrgPermissionSubjects.Identity}
+            >
               {(isAllowed) => (
                 <DropdownMenuItem
                   className={twMerge(

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

@@ -20,7 +20,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useRevokeIdentityTokenAuthToken } from "@app/hooks/api";
 import { IdentityAccessToken } from "@app/hooks/api/identities/types";
@@ -79,7 +79,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
     <div className="col-span-2 mt-3">
       <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
         <span className="text-bunker-300">Access Tokens</span>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+        <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
             <Button
               size="xs"
@@ -144,7 +144,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
                       <Td>
                         <div className="flex items-center gap-2">
                           <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
+                            I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}
                           >
                             {(isAllowed) => (
@@ -169,7 +169,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
                           </OrgPermissionCan>
                           {!isAccessTokenRevoked && (
                             <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
+                              I={OrgPermissionIdentityActions.Edit}
                               a={OrgPermissionSubjects.Identity}
                             >
                               {(isAllowed) => (

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

@@ -20,7 +20,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useRevokeIdentityUniversalAuthClientSecret } from "@app/hooks/api";
 import { ClientSecretData } from "@app/hooks/api/identities/types";
@@ -68,7 +68,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
     <div className="col-span-2">
       <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
         <span className="text-bunker-300">Client Secrets</span>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+        <OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => (
             <Button
               isDisabled={!isAllowed}
@@ -129,7 +129,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
                       </Td>
                       <Td>
                         <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
+                          I={OrgPermissionIdentityActions.Edit}
                           a={OrgPermissionSubjects.Identity}
                         >
                           {(isAllowed) => (

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

@@ -10,7 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 
 type Props = {
   children: ReactNode;
@@ -36,7 +36,10 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent className="min-w-[120px]" align="end">
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+                <OrgPermissionCan
+                  I={OrgPermissionIdentityActions.Edit}
+                  a={OrgPermissionSubjects.Identity}
+                >
                   {(isAllowed) => (
                     <DropdownMenuItem
                       isDisabled={!isAllowed}
@@ -47,7 +50,10 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
                     </DropdownMenuItem>
                   )}
                 </OrgPermissionCan>
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+                <OrgPermissionCan
+                  I={OrgPermissionIdentityActions.Delete}
+                  a={OrgPermissionSubjects.Identity}
+                >
                   {(isAllowed) => (
                     <DropdownMenuItem
                       isDisabled={!isAllowed}

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

@@ -5,6 +5,8 @@ import { OrgPermissionSubjects } from "@app/context";
 import {
   OrgGatewayPermissionActions,
   OrgPermissionAppConnectionActions,
+  OrgPermissionGroupActions,
+  OrgPermissionIdentityActions,
   OrgPermissionKmipActions,
   OrgPermissionSecretShareAction
 } from "@app/context/OrgPermissionContext/types";
@@ -36,6 +38,32 @@ const kmipPermissionSchema = z
   })
   .optional();
 
+const identityPermissionSchema = z
+  .object({
+    [OrgPermissionIdentityActions.Read]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.Edit]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.Delete]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.Create]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.GrantPrivileges]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.RevokeAuth]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.CreateToken]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.GetToken]: z.boolean().optional(),
+    [OrgPermissionIdentityActions.DeleteToken]: z.boolean().optional()
+  })
+  .optional();
+
+const groupPermissionSchema = z
+  .object({
+    [OrgPermissionGroupActions.Read]: z.boolean().optional(),
+    [OrgPermissionGroupActions.Create]: z.boolean().optional(),
+    [OrgPermissionGroupActions.Edit]: z.boolean().optional(),
+    [OrgPermissionGroupActions.Delete]: z.boolean().optional(),
+    [OrgPermissionGroupActions.GrantPrivileges]: z.boolean().optional(),
+    [OrgPermissionGroupActions.AddMembers]: z.boolean().optional(),
+    [OrgPermissionGroupActions.RemoveMembers]: z.boolean().optional()
+  })
+  .optional();
+
 const orgGatewayPermissionSchema = z
   .object({
     [OrgGatewayPermissionActions.ListGateways]: z.boolean().optional(),
@@ -74,7 +102,7 @@ export const formSchema = z.object({
 
       "audit-logs": generalPermissionSchema,
       member: generalPermissionSchema,
-      groups: generalPermissionSchema,
+      groups: groupPermissionSchema,
       role: generalPermissionSchema,
       settings: generalPermissionSchema,
       "service-account": generalPermissionSchema,
@@ -84,7 +112,7 @@ export const formSchema = z.object({
       scim: generalPermissionSchema,
       ldap: generalPermissionSchema,
       billing: generalPermissionSchema,
-      identity: generalPermissionSchema,
+      identity: identityPermissionSchema,
       "organization-admin-console": adminConsolePermissionSchmea,
       [OrgPermissionSubjects.Kms]: generalPermissionSchema,
       [OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,

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

@@ -0,0 +1,207 @@
+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 { OrgPermissionGroupActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+const PERMISSION_ACTIONS = [
+  { action: OrgPermissionGroupActions.Read, label: "Read Groups" },
+  { action: OrgPermissionGroupActions.Create, label: "Create Groups" },
+  { action: OrgPermissionGroupActions.Edit, label: "Edit Groups" },
+  { action: OrgPermissionGroupActions.Delete, label: "Delete Groups" },
+  { action: OrgPermissionGroupActions.GrantPrivileges, label: "Grant Privileges" },
+  { action: OrgPermissionGroupActions.AddMembers, label: "Add Members" },
+  { action: OrgPermissionGroupActions.RemoveMembers, label: "Remove Members" }
+] as const;
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-access",
+  Custom = "custom"
+}
+
+export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.groups"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSION_ACTIONS.length;
+    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;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.read) return Permission.ReadOnly;
+
+    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 === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          "permissions.groups",
+          {
+            [OrgPermissionGroupActions.Read]: false,
+            [OrgPermissionGroupActions.Create]: false,
+            [OrgPermissionGroupActions.Edit]: false,
+            [OrgPermissionGroupActions.Delete]: false,
+            [OrgPermissionGroupActions.GrantPrivileges]: false,
+            [OrgPermissionGroupActions.AddMembers]: false,
+            [OrgPermissionGroupActions.RemoveMembers]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          "permissions.groups",
+          {
+            [OrgPermissionGroupActions.Read]: true,
+            [OrgPermissionGroupActions.Create]: true,
+            [OrgPermissionGroupActions.Edit]: true,
+            [OrgPermissionGroupActions.Delete]: true,
+            [OrgPermissionGroupActions.GrantPrivileges]: true,
+            [OrgPermissionGroupActions.AddMembers]: true,
+            [OrgPermissionGroupActions.RemoveMembers]: true
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          "permissions.groups",
+          {
+            [OrgPermissionGroupActions.Read]: true,
+            [OrgPermissionGroupActions.Edit]: false,
+            [OrgPermissionGroupActions.Create]: false,
+            [OrgPermissionGroupActions.Delete]: false,
+            [OrgPermissionGroupActions.GrantPrivileges]: false,
+            [OrgPermissionGroupActions.AddMembers]: false,
+            [OrgPermissionGroupActions.RemoveMembers]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          "permissions.groups",
+          {
+            [OrgPermissionGroupActions.Read]: false,
+            [OrgPermissionGroupActions.Edit]: false,
+            [OrgPermissionGroupActions.Create]: false,
+            [OrgPermissionGroupActions.Delete]: false,
+            [OrgPermissionGroupActions.GrantPrivileges]: false,
+            [OrgPermissionGroupActions.AddMembers]: false,
+            [OrgPermissionGroupActions.RemoveMembers]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>Group Management</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.groups.${action}`}
+                    key={`permissions.groups.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.groups.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,217 @@
+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 { OrgPermissionIdentityActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+const PERMISSION_ACTIONS = [
+  { action: OrgPermissionIdentityActions.Read, label: "Read Identities" },
+  { action: OrgPermissionIdentityActions.Create, label: "Create Identities" },
+  { action: OrgPermissionIdentityActions.Edit, label: "Edit Identities" },
+  { action: OrgPermissionIdentityActions.Delete, label: "Delete Identities" },
+  { action: OrgPermissionIdentityActions.GrantPrivileges, label: "Grant Privileges" },
+  { action: OrgPermissionIdentityActions.RevokeAuth, label: "Revoke Auth" },
+  { action: OrgPermissionIdentityActions.CreateToken, label: "Create Token" },
+  { action: OrgPermissionIdentityActions.GetToken, label: "Get Token" },
+  { action: OrgPermissionIdentityActions.DeleteToken, label: "Delete Token" }
+] as const;
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-access",
+  Custom = "custom"
+}
+
+export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.identity"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSION_ACTIONS.length;
+    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;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.read) return Permission.ReadOnly;
+
+    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 === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          "permissions.identity",
+          {
+            [OrgPermissionIdentityActions.Read]: false,
+            [OrgPermissionIdentityActions.Edit]: false,
+            [OrgPermissionIdentityActions.Create]: false,
+            [OrgPermissionIdentityActions.Delete]: false,
+            [OrgPermissionIdentityActions.GrantPrivileges]: false,
+            [OrgPermissionIdentityActions.RevokeAuth]: false,
+            [OrgPermissionIdentityActions.CreateToken]: false,
+            [OrgPermissionIdentityActions.GetToken]: false,
+            [OrgPermissionIdentityActions.DeleteToken]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          "permissions.identity",
+          {
+            [OrgPermissionIdentityActions.Read]: true,
+            [OrgPermissionIdentityActions.Edit]: true,
+            [OrgPermissionIdentityActions.Create]: true,
+            [OrgPermissionIdentityActions.Delete]: true,
+            [OrgPermissionIdentityActions.GrantPrivileges]: true,
+            [OrgPermissionIdentityActions.RevokeAuth]: true,
+            [OrgPermissionIdentityActions.CreateToken]: true,
+            [OrgPermissionIdentityActions.GetToken]: true,
+            [OrgPermissionIdentityActions.DeleteToken]: true
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          "permissions.identity",
+          {
+            [OrgPermissionIdentityActions.Read]: true,
+            [OrgPermissionIdentityActions.Edit]: false,
+            [OrgPermissionIdentityActions.Create]: false,
+            [OrgPermissionIdentityActions.Delete]: false,
+            [OrgPermissionIdentityActions.GrantPrivileges]: false,
+            [OrgPermissionIdentityActions.RevokeAuth]: false,
+            [OrgPermissionIdentityActions.CreateToken]: false,
+            [OrgPermissionIdentityActions.GetToken]: false,
+            [OrgPermissionIdentityActions.DeleteToken]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          "permissions.identity",
+          {
+            [OrgPermissionIdentityActions.Read]: false,
+            [OrgPermissionIdentityActions.Edit]: false,
+            [OrgPermissionIdentityActions.Create]: false,
+            [OrgPermissionIdentityActions.Delete]: false,
+            [OrgPermissionIdentityActions.GrantPrivileges]: false,
+            [OrgPermissionIdentityActions.RevokeAuth]: false,
+            [OrgPermissionIdentityActions.CreateToken]: false,
+            [OrgPermissionIdentityActions.GetToken]: false,
+            [OrgPermissionIdentityActions.DeleteToken]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>Machine Identity Management</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.identity.${action}`}
+                    key={`permissions.identity.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.identity.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

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

@@ -15,6 +15,8 @@ import {
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
 import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
+import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
+import { OrgPermissionIdentityRow } from "./OrgPermissionIdentityRow";
 import { OrgPermissionKmipRow } from "./OrgPermissionKmipRow";
 import { OrgPermissionSecretShareRow } from "./OrgPermissionSecretShareRow";
 import { OrgRoleWorkspaceRow } from "./OrgRoleWorkspaceRow";
@@ -25,14 +27,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
     title: "User Management",
     formName: "member"
   },
-  {
-    title: "Group Management",
-    formName: "groups"
-  },
-  {
-    title: "Machine Identity Management",
-    formName: "identity"
-  },
   {
     title: "Usage & Billing",
     formName: "billing"
@@ -168,6 +162,16 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                   />
                 );
               })}
+              <OrgPermissionIdentityRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
+              <OrgPermissionGroupRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
               <OrgPermissionAppConnectionRow
                 control={control}
                 setValue={setValue}

frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx

@@ -140,7 +140,7 @@ const Page = withPermission(
                     <DropdownMenuContent align="end" className="p-1">
                       <OrgPermissionCan
                         I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
+                        a={OrgPermissionSubjects.Member}
                       >
                         {(isAllowed) => (
                           <DropdownMenuItem

frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx

@@ -82,7 +82,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">User Details</h3>
         {userId !== membership.user.id && (
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Member}>
             {(isAllowed) => {
               return (
                 <Tooltip content="Edit Membership">
@@ -196,7 +196,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           (membership.status === "invited" || membership.status === "verified") &&
           membership.user.email &&
           serverDetails?.emailConfigured && (
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Member}>
               {(isAllowed) => {
                 return (
                   <Button

frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
+import { useWorkspace } from "@app/context";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
@@ -16,73 +15,67 @@ import {
   ServiceTokenTab
 } from "./components";
 
-const Page = withProjectPermission(
-  () => {
-    const navigate = useNavigate();
-    const { currentWorkspace } = useWorkspace();
-    const selectedTab = useSearch({
-      strict: false,
-      select: (el) => el.selectedTab
+const Page = () => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const selectedTab = useSearch({
+    strict: false,
+    select: (el) => el.selectedTab
+  });
+
+  const updateSelectedTab = (tab: string) => {
+    navigate({
+      to: `/${currentWorkspace.type}/$projectId/access-management` as const,
+      search: (prev) => ({ ...prev, selectedTab: tab }),
+      params: {
+        projectId: currentWorkspace.id
+      }
     });
+  };
 
-    const updateSelectedTab = (tab: string) => {
-      navigate({
-        to: `/${currentWorkspace.type}/$projectId/access-management` as const,
-        search: (prev) => ({ ...prev, selectedTab: tab }),
-        params: {
-          projectId: currentWorkspace.id
-        }
-      });
-    };
-
-    return (
-      <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="Access Control"
-            description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
-          />
-          <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
-            <TabList>
-              <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
-              <Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
-              <Tab value={ProjectAccessControlTabs.Identities}>
-                <div className="flex items-center">
-                  <p>Machine Identities</p>
-                </div>
-              </Tab>
-              {currentWorkspace?.type === ProjectType.SecretManager && (
-                <Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
-              )}
-              <Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
-            </TabList>
-            <TabPanel value={ProjectAccessControlTabs.Member}>
-              <MembersTab />
-            </TabPanel>
-            <TabPanel value={ProjectAccessControlTabs.Groups}>
-              <GroupsTab />
-            </TabPanel>
-            <TabPanel value={ProjectAccessControlTabs.Identities}>
-              <IdentityTab />
-            </TabPanel>
+  return (
+    <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="Access Control"
+          description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
+        />
+        <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
+          <TabList>
+            <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
+            <Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
+            <Tab value={ProjectAccessControlTabs.Identities}>
+              <div className="flex items-center">
+                <p>Machine Identities</p>
+              </div>
+            </Tab>
             {currentWorkspace?.type === ProjectType.SecretManager && (
-              <TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
-                <ServiceTokenTab />
-              </TabPanel>
+              <Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
             )}
-            <TabPanel value={ProjectAccessControlTabs.Roles}>
-              <ProjectRoleListTab />
+            <Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
+          </TabList>
+          <TabPanel value={ProjectAccessControlTabs.Member}>
+            <MembersTab />
+          </TabPanel>
+          <TabPanel value={ProjectAccessControlTabs.Groups}>
+            <GroupsTab />
+          </TabPanel>
+          <TabPanel value={ProjectAccessControlTabs.Identities}>
+            <IdentityTab />
+          </TabPanel>
+          {currentWorkspace?.type === ProjectType.SecretManager && (
+            <TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
+              <ServiceTokenTab />
             </TabPanel>
-          </Tabs>
-        </div>
+          )}
+          <TabPanel value={ProjectAccessControlTabs.Roles}>
+            <ProjectRoleListTab />
+          </TabPanel>
+        </Tabs>
       </div>
-    );
-  },
-  {
-    action: ProjectPermissionActions.Read,
-    subject: ProjectPermissionSub.Member
-  }
-);
+    </div>
+  );
+};
 
 export const AccessControlPage = () => {
   const { t } = useTranslation();

frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx

@@ -1,17 +1,26 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { GroupsSection } from "./components";
 
-export const GroupsTab = () => {
-  return (
-    <motion.div
-      key="panel-groups"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <GroupsSection />
-    </motion.div>
-  );
-};
+export const GroupsTab = withProjectPermission(
+  () => {
+    return (
+      <motion.div
+        key="panel-groups"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <GroupsSection />
+      </motion.div>
+    );
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Groups
+  }
+);

frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx

@@ -1,17 +1,26 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { MembersSection } from "./components";
 
-export const MembersTab = () => {
-  return (
-    <motion.div
-      key="panel-project-members"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <MembersSection />
-    </motion.div>
-  );
-};
+export const MembersTab = withProjectPermission(
+  () => {
+    return (
+      <motion.div
+        key="panel-project-members"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <MembersSection />
+      </motion.div>
+    );
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Member
+  }
+);

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -12,7 +12,10 @@ import {
 import {
   PermissionConditionOperators,
   ProjectPermissionDynamicSecretActions,
+  ProjectPermissionGroupActions,
+  ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
+  ProjectPermissionMemberActions,
   ProjectPermissionSecretActions,
   ProjectPermissionSecretSyncActions,
   TPermissionCondition,
@@ -71,6 +74,30 @@ const KmipPolicyActionSchema = z.object({
   [ProjectPermissionKmipActions.GenerateClientCertificates]: z.boolean().optional()
 });
 
+const MemberPolicyActionSchema = z.object({
+  [ProjectPermissionMemberActions.Read]: z.boolean().optional(),
+  [ProjectPermissionMemberActions.Create]: z.boolean().optional(),
+  [ProjectPermissionMemberActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionMemberActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionMemberActions.GrantPrivileges]: z.boolean().optional()
+});
+
+const IdentityPolicyActionSchema = z.object({
+  [ProjectPermissionIdentityActions.Read]: z.boolean().optional(),
+  [ProjectPermissionIdentityActions.Create]: z.boolean().optional(),
+  [ProjectPermissionIdentityActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionIdentityActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionIdentityActions.GrantPrivileges]: z.boolean().optional()
+});
+
+const GroupPolicyActionSchema = z.object({
+  [ProjectPermissionGroupActions.Read]: z.boolean().optional(),
+  [ProjectPermissionGroupActions.Create]: z.boolean().optional(),
+  [ProjectPermissionGroupActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionGroupActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionGroupActions.GrantPrivileges]: z.boolean().optional()
+});
+
 const SecretRollbackPolicyActionSchema = z.object({
   read: z.boolean().optional(),
   create: z.boolean().optional()
@@ -152,14 +179,14 @@ export const projectRoleFormSchema = z.object({
       })
         .array()
         .default([]),
-      [ProjectPermissionSub.Identity]: GeneralPolicyActionSchema.extend({
+      [ProjectPermissionSub.Identity]: IdentityPolicyActionSchema.extend({
         inverted: z.boolean().optional(),
         conditions: ConditionSchema
       })
         .array()
         .default([]),
-      [ProjectPermissionSub.Member]: GeneralPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.Groups]: GeneralPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.Member]: MemberPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.Groups]: GroupPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Role]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Integrations]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Webhooks]: GeneralPolicyActionSchema.array().default([]),
@@ -248,9 +275,6 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         ProjectPermissionSub.DynamicSecrets,
         ProjectPermissionSub.SecretFolders,
         ProjectPermissionSub.SecretImports,
-        ProjectPermissionSub.Member,
-        ProjectPermissionSub.Groups,
-        ProjectPermissionSub.Identity,
         ProjectPermissionSub.Role,
         ProjectPermissionSub.Integrations,
         ProjectPermissionSub.Webhooks,
@@ -432,6 +456,63 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
       return;
     }
 
+    if (subject === ProjectPermissionSub.Member) {
+      const canRead = action.includes(ProjectPermissionMemberActions.Read);
+      const canCreate = action.includes(ProjectPermissionMemberActions.Create);
+      const canEdit = action.includes(ProjectPermissionMemberActions.Edit);
+      const canDelete = action.includes(ProjectPermissionMemberActions.Delete);
+      const canGrantPrivileges = action.includes(ProjectPermissionMemberActions.GrantPrivileges);
+
+      if (!formVal[subject]) formVal[subject] = [{}];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead) formVal[subject]![0][ProjectPermissionMemberActions.Read] = true;
+      if (canCreate) formVal[subject]![0][ProjectPermissionMemberActions.Create] = true;
+      if (canEdit) formVal[subject]![0][ProjectPermissionMemberActions.Edit] = true;
+      if (canDelete) formVal[subject]![0][ProjectPermissionMemberActions.Delete] = true;
+      if (canGrantPrivileges)
+        formVal[subject]![0][ProjectPermissionMemberActions.GrantPrivileges] = true;
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.Identity) {
+      const canRead = action.includes(ProjectPermissionIdentityActions.Read);
+      const canCreate = action.includes(ProjectPermissionIdentityActions.Create);
+      const canEdit = action.includes(ProjectPermissionIdentityActions.Edit);
+      const canDelete = action.includes(ProjectPermissionIdentityActions.Delete);
+      const canGrantPrivileges = action.includes(ProjectPermissionIdentityActions.GrantPrivileges);
+
+      if (!formVal[subject]) formVal[subject] = [{ conditions: [] }];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead) formVal[subject]![0][ProjectPermissionIdentityActions.Read] = true;
+      if (canCreate) formVal[subject]![0][ProjectPermissionIdentityActions.Create] = true;
+      if (canEdit) formVal[subject]![0][ProjectPermissionIdentityActions.Edit] = true;
+      if (canDelete) formVal[subject]![0][ProjectPermissionIdentityActions.Delete] = true;
+      if (canGrantPrivileges)
+        formVal[subject]![0][ProjectPermissionIdentityActions.GrantPrivileges] = true;
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.Groups) {
+      const canRead = action.includes(ProjectPermissionGroupActions.Read);
+      const canCreate = action.includes(ProjectPermissionGroupActions.Create);
+      const canEdit = action.includes(ProjectPermissionGroupActions.Edit);
+      const canDelete = action.includes(ProjectPermissionGroupActions.Delete);
+      const canGrantPrivileges = action.includes(ProjectPermissionGroupActions.GrantPrivileges);
+
+      if (!formVal[subject]) formVal[subject] = [{}];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead) formVal[subject]![0][ProjectPermissionGroupActions.Read] = true;
+      if (canCreate) formVal[subject]![0][ProjectPermissionGroupActions.Create] = true;
+      if (canEdit) formVal[subject]![0][ProjectPermissionGroupActions.Edit] = true;
+      if (canDelete) formVal[subject]![0][ProjectPermissionGroupActions.Delete] = true;
+      if (canGrantPrivileges)
+        formVal[subject]![0][ProjectPermissionGroupActions.GrantPrivileges] = true;
+      return;
+    }
+
     if (subject === ProjectPermissionSub.SecretSyncs) {
       const canRead = action.includes(ProjectPermissionSecretSyncActions.Read);
       const canEdit = action.includes(ProjectPermissionSecretSyncActions.Edit);
@@ -637,28 +718,31 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
   [ProjectPermissionSub.Member]: {
     title: "User Management",
     actions: [
-      { label: "View all members", value: "read" },
-      { label: "Invite members", value: "create" },
-      { label: "Edit members", value: "edit" },
-      { label: "Remove members", value: "delete" }
+      { label: "Read", value: ProjectPermissionMemberActions.Read },
+      { label: "Add", value: ProjectPermissionMemberActions.Create },
+      { label: "Modify", value: ProjectPermissionMemberActions.Edit },
+      { label: "Remove", value: ProjectPermissionMemberActions.Delete },
+      { label: "Grant Privileges", value: ProjectPermissionMemberActions.GrantPrivileges }
     ]
   },
   [ProjectPermissionSub.Identity]: {
     title: "Machine Identity Management",
     actions: [
-      { label: "Read", value: "read" },
-      { label: "Add", value: "create" },
-      { label: "Modify", value: "edit" },
-      { label: "Remove", value: "delete" }
+      { label: "Read", value: ProjectPermissionIdentityActions.Read },
+      { label: "Add", value: ProjectPermissionIdentityActions.Create },
+      { label: "Modify", value: ProjectPermissionIdentityActions.Edit },
+      { label: "Remove", value: ProjectPermissionIdentityActions.Delete },
+      { label: "Grant Privileges", value: ProjectPermissionIdentityActions.GrantPrivileges }
     ]
   },
   [ProjectPermissionSub.Groups]: {
     title: "Group Management",
     actions: [
-      { label: "Read", value: "read" },
-      { label: "Create", value: "create" },
-      { label: "Modify", value: "edit" },
-      { label: "Remove", value: "delete" }
+      { label: "Read", value: ProjectPermissionGroupActions.Read },
+      { label: "Create", value: ProjectPermissionGroupActions.Create },
+      { label: "Modify", value: ProjectPermissionGroupActions.Edit },
+      { label: "Remove", value: ProjectPermissionGroupActions.Delete },
+      { label: "Grant Privileges", value: ProjectPermissionGroupActions.GrantPrivileges }
     ]
   },
   [ProjectPermissionSub.Webhooks]: {