From 0f5347bbb991b3def69d85f93f85429e917e2288 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 2 Apr 2024 21:10:44 +0800
Subject: [PATCH] feat(console): add org role details general settings page
 (#5610)

---
 packages/console/src/consts/page-tabs.ts      |   5 +
 .../src/containers/ConsoleContent/index.tsx   |  31 +++--
 .../Permissions/index.tsx                     |   9 ++
 .../Settings/index.tsx                        |  78 +++++++++++
 .../pages/OrganizationRoleDetails/index.tsx   | 126 ++++++++++++++++++
 .../OrganizationRoles/index.tsx               |  10 +-
 .../de/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../en/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../es/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../fr/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../it/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../ja/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../ko/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../pl-pl/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../pt-br/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../pt-pt/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../ru/translation/admin-console/index.ts     |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../tr-tr/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  30 +++++
 .../zh-cn/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  29 ++++
 .../zh-hk/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  29 ++++
 .../zh-tw/translation/admin-console/index.ts  |   2 +
 .../organization-role-details.ts              |  29 ++++
 36 files changed, 721 insertions(+), 15 deletions(-)
 create mode 100644 packages/console/src/pages/OrganizationRoleDetails/Permissions/index.tsx
 create mode 100644 packages/console/src/pages/OrganizationRoleDetails/Settings/index.tsx
 create mode 100644 packages/console/src/pages/OrganizationRoleDetails/index.tsx
 create mode 100644 packages/phrases/src/locales/de/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/en/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/es/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/fr/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/it/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/ja/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/ko/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/pl-pl/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/pt-br/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/pt-pt/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/ru/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/tr-tr/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/zh-cn/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/zh-hk/translation/admin-console/organization-role-details.ts
 create mode 100644 packages/phrases/src/locales/zh-tw/translation/admin-console/organization-role-details.ts

diff --git a/packages/console/src/consts/page-tabs.ts b/packages/console/src/consts/page-tabs.ts
index e6d593026..890f776c4 100644
--- a/packages/console/src/consts/page-tabs.ts
+++ b/packages/console/src/consts/page-tabs.ts
@@ -52,3 +52,8 @@ export enum OrganizationTemplateTabs {
   OrganizationRoles = 'organization-roles',
   OrganizationPermissions = 'organization-permissions',
 }
+
+export enum OrganizationRoleDetailsTabs {
+  Permissions = 'permissions',
+  General = 'general',
+}
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index 0c05bc80e..39f1f84c8 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -35,6 +35,7 @@ import GetStarted from '@/pages/GetStarted';
 import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
 import OrganizationDetails from '@/pages/OrganizationDetails';
+import OrganizationRoleDetails from '@/pages/OrganizationRoleDetails';
 import OrganizationTemplate from '@/pages/OrganizationTemplate';
 import OrganizationPermissions from '@/pages/OrganizationTemplate/OrganizationPermissions';
 import OrganizationRoles from '@/pages/OrganizationTemplate/OrganizationRoles';
@@ -187,20 +188,26 @@ function ConsoleContent() {
               </Route>
             </Route>
             {isDevFeaturesEnabled && (
-              <Route path="organization-template" element={<OrganizationTemplate />}>
+              <>
+                <Route path="organization-template" element={<OrganizationTemplate />}>
+                  <Route
+                    index
+                    element={<Navigate replace to={OrganizationTemplateTabs.OrganizationRoles} />}
+                  />
+                  <Route
+                    path={OrganizationTemplateTabs.OrganizationRoles}
+                    element={<OrganizationRoles />}
+                  />
+                  <Route
+                    path={OrganizationTemplateTabs.OrganizationPermissions}
+                    element={<OrganizationPermissions />}
+                  />
+                </Route>
                 <Route
-                  index
-                  element={<Navigate replace to={OrganizationTemplateTabs.OrganizationRoles} />}
+                  path={`organization-template/${OrganizationTemplateTabs.OrganizationRoles}/:id/*`}
+                  element={<OrganizationRoleDetails />}
                 />
-                <Route
-                  path={OrganizationTemplateTabs.OrganizationRoles}
-                  element={<OrganizationRoles />}
-                />
-                <Route
-                  path={OrganizationTemplateTabs.OrganizationPermissions}
-                  element={<OrganizationPermissions />}
-                />
-              </Route>
+              </>
             )}
             <Route path="organizations">
               <Route index element={<Organizations />} />
diff --git a/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.tsx b/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.tsx
new file mode 100644
index 000000000..1824f1775
--- /dev/null
+++ b/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.tsx
@@ -0,0 +1,9 @@
+type Props = {
+  organizationRoleId: string;
+};
+
+function Permissions({ organizationRoleId }: Props) {
+  return <div>TBD</div>;
+}
+
+export default Permissions;
diff --git a/packages/console/src/pages/OrganizationRoleDetails/Settings/index.tsx b/packages/console/src/pages/OrganizationRoleDetails/Settings/index.tsx
new file mode 100644
index 000000000..70615c58f
--- /dev/null
+++ b/packages/console/src/pages/OrganizationRoleDetails/Settings/index.tsx
@@ -0,0 +1,78 @@
+import { type OrganizationRole } from '@logto/schemas';
+import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+
+import DetailsForm from '@/components/DetailsForm';
+import FormCard from '@/components/FormCard';
+import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import { organizationRoleLink } from '@/consts';
+import FormField from '@/ds-components/FormField';
+import TextInput from '@/ds-components/TextInput';
+import useApi from '@/hooks/use-api';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
+import { trySubmitSafe } from '@/utils/form';
+
+type Props = {
+  data: OrganizationRole;
+  onUpdate: (updatedData: OrganizationRole) => void;
+};
+
+function Settings({ data, onUpdate }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { getDocumentationUrl } = useDocumentationUrl();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<OrganizationRole>({ defaultValues: data });
+
+  const api = useApi();
+
+  const onSubmit = handleSubmit(
+    trySubmitSafe(async (formData) => {
+      const updatedData = await api
+        .patch(`api/organization-roles/${data.id}`, { json: formData })
+        .json<OrganizationRole>();
+      reset(updatedData);
+      onUpdate(updatedData);
+      toast.success(t('general.saved'));
+    })
+  );
+
+  return (
+    <DetailsForm
+      isDirty={isDirty}
+      isSubmitting={isSubmitting}
+      onSubmit={onSubmit}
+      onDiscard={reset}
+    >
+      <FormCard
+        title="organization_role_details.general.settings"
+        description="organization_role_details.general.description"
+        learnMoreLink={{
+          href: getDocumentationUrl(organizationRoleLink),
+          targetBlank: 'noopener',
+        }}
+      >
+        <FormField isRequired title="organization_role_details.general.name_field">
+          <TextInput
+            placeholder="viewer"
+            error={Boolean(errors.name)}
+            {...register('name', { required: true })}
+          />
+        </FormField>
+        <FormField title="organization_role_details.general.description_field">
+          <TextInput
+            placeholder={t('organization_role_details.general.description_field_placeholder')}
+            {...register('description')}
+          />
+        </FormField>
+      </FormCard>
+      <UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />
+    </DetailsForm>
+  );
+}
+
+export default Settings;
diff --git a/packages/console/src/pages/OrganizationRoleDetails/index.tsx b/packages/console/src/pages/OrganizationRoleDetails/index.tsx
new file mode 100644
index 000000000..9abcfcfdd
--- /dev/null
+++ b/packages/console/src/pages/OrganizationRoleDetails/index.tsx
@@ -0,0 +1,126 @@
+import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
+import { type OrganizationRole } from '@logto/schemas';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
+import useSWR, { useSWRConfig } from 'swr';
+
+import Delete from '@/assets/icons/delete.svg';
+import OrgRoleIcon from '@/assets/icons/role-feature.svg';
+import DetailsPage from '@/components/DetailsPage';
+import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
+import PageMeta from '@/components/PageMeta';
+import ThemedIcon from '@/components/ThemedIcon';
+import { OrganizationRoleDetailsTabs, OrganizationTemplateTabs } from '@/consts';
+import ConfirmModal from '@/ds-components/ConfirmModal';
+import DynamicT from '@/ds-components/DynamicT';
+import TabNav, { TabNavItem } from '@/ds-components/TabNav';
+import useApi, { type RequestError } from '@/hooks/use-api';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
+
+import Permissions from './Permissions';
+import Settings from './Settings';
+
+const orgRolesPath = `/organization-template/${OrganizationTemplateTabs.OrganizationRoles}`;
+
+function OrganizationRoleDetails() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { id } = useParams();
+  const { navigate } = useTenantPathname();
+
+  const { data, error, mutate, isLoading } = useSWR<OrganizationRole, RequestError>(
+    id && `api/organization-roles/${id}`
+  );
+  const api = useApi();
+  const { mutate: mutateGlobal } = useSWRConfig();
+  const [isDeletionAlertOpen, setIsDeletionAlertOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    if (!data) {
+      return;
+    }
+
+    setIsDeleting(true);
+
+    try {
+      await api.delete(`api/organization-roles/${data.id}`);
+      toast.success(t('organization_role_details.deleted', { name: data.name }));
+      await mutateGlobal('api/roles');
+      navigate(orgRolesPath, { replace: true });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <DetailsPage
+      backLink={orgRolesPath}
+      backLinkTitle="organization_role_details.back_to_org_roles"
+      isLoading={isLoading}
+      error={error}
+      onRetry={mutate}
+    >
+      <PageMeta titleKey="organization_role_details.page_title" />
+      {data && (
+        <>
+          <DetailsPageHeader
+            icon={<ThemedIcon for={OrgRoleIcon} size={60} />}
+            title={data.name}
+            primaryTag={t('organization_role_details.org_role')}
+            identifier={{ name: 'ID', value: data.id }}
+            actionMenuItems={[
+              {
+                title: 'general.delete',
+                icon: <Delete />,
+                type: 'danger',
+                onClick: () => {
+                  setIsDeletionAlertOpen(true);
+                },
+              },
+            ]}
+          />
+          <ConfirmModal
+            isOpen={isDeletionAlertOpen}
+            isLoading={isDeleting}
+            confirmButtonText="general.delete"
+            onCancel={() => {
+              setIsDeletionAlertOpen(false);
+            }}
+            onConfirm={handleDelete}
+          >
+            <DynamicT forKey="organization_role_details.delete_confirm" />
+          </ConfirmModal>
+          <TabNav>
+            <TabNavItem
+              href={`${orgRolesPath}/${data.id}/${OrganizationRoleDetailsTabs.Permissions}`}
+            >
+              <DynamicT forKey="organization_role_details.permissions.tab" />
+            </TabNavItem>
+            <TabNavItem href={`${orgRolesPath}/${data.id}/${OrganizationRoleDetailsTabs.General}`}>
+              <DynamicT forKey="organization_role_details.general.tab" />
+            </TabNavItem>
+          </TabNav>
+          <Routes>
+            <Route
+              index
+              element={<Navigate replace to={OrganizationRoleDetailsTabs.Permissions} />}
+            />
+            <Route
+              path={OrganizationRoleDetailsTabs.Permissions}
+              element={<Permissions organizationRoleId={data.id} />}
+            />
+            <Route
+              path={OrganizationRoleDetailsTabs.General}
+              element={<Settings data={data} onUpdate={mutate} />}
+            />
+          </Routes>
+        </>
+      )}
+    </DetailsPage>
+  );
+}
+
+export default withAppInsights(OrganizationRoleDetails);
diff --git a/packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.tsx b/packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.tsx
index 46540c604..1cb6360c9 100644
--- a/packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.tsx
+++ b/packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.tsx
@@ -17,13 +17,14 @@ import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { buildUrl } from '@/utils/url';
 
 import * as styles from './index.module.scss';
 
 function OrganizationRoles() {
   const { getDocumentationUrl } = useDocumentationUrl();
-
+  const { navigate } = useTenantPathname();
   const [{ page }, updateSearchParameters] = useSearchParametersWatcher({
     page: 1,
   });
@@ -49,8 +50,8 @@ function OrganizationRoles() {
           title: <DynamicT forKey="organization_template.roles.role_column" />,
           dataIndex: 'name',
           colSpan: 4,
-          render: ({ name }) => {
-            return <ItemPreview title={name} icon={<ThemedIcon for={OrgRoleIcon} />} />;
+          render: ({ id, name }) => {
+            return <ItemPreview title={name} icon={<ThemedIcon for={OrgRoleIcon} />} to={id} />;
           },
         },
         {
@@ -72,6 +73,9 @@ function OrganizationRoles() {
           },
         },
       ]}
+      rowClickHandler={({ id }) => {
+        navigate(id);
+      }}
       filter={
         <div className={styles.filter}>
           <Button
diff --git a/packages/phrases/src/locales/de/translation/admin-console/index.ts b/packages/phrases/src/locales/de/translation/admin-console/index.ts
index 8c40600f7..89eb78963 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/de/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/de/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..711fd1ea3
--- /dev/null
+++ b/packages/phrases/src/locales/de/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Organisationsrollendetails',
+  back_to_org_roles: 'Zurück zu den Org-Rollen',
+  org_role: 'Org-Rolle',
+  delete_confirm:
+    'Dadurch werden die mit dieser Rolle verbundenen Berechtigungen von den betroffenen Benutzern entfernt und die Beziehungen zwischen Organisationsrollen, Mitgliedern in der Organisation und Organisationsberechtigungen gelöscht.',
+  deleted: 'Organisationsrolle {{name}} wurde erfolgreich gelöscht.',
+  permissions: {
+    tab: 'Berechtigungen',
+    name_column: 'Berechtigung',
+    description_column: 'Beschreibung',
+    type_column: 'Berechtigungstyp',
+    type: {
+      api: 'API-Berechtigung',
+      org: 'Org-Berechtigung',
+    },
+    assign_permissions: 'Berechtigungen zuweisen',
+  },
+  general: {
+    tab: 'Allgemein',
+    settings: 'Einstellungen',
+    description:
+      'Die Organisationsrolle ist eine Gruppierung von Berechtigungen, die Benutzern zugewiesen werden können. Die Berechtigungen müssen aus den vordefinierten Organisationsberechtigungen stammen.',
+    name_field: 'Name',
+    description_field: 'Beschreibung',
+    description_field_placeholder: 'Benutzer mit nur Leseberechtigungen',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/en/translation/admin-console/index.ts b/packages/phrases/src/locales/en/translation/admin-console/index.ts
index 863198535..d85910d39 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/en/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/en/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..14f41b00d
--- /dev/null
+++ b/packages/phrases/src/locales/en/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Organization role details',
+  back_to_org_roles: 'Back to org roles',
+  org_role: 'Organization role',
+  delete_confirm:
+    'Doing so will remove the permissions associated with this role from the affected users and delete the relations among organization roles, members in the organization, and organization permissions.',
+  deleted: 'Org role {{name}} was successfully deleted.',
+  permissions: {
+    tab: 'Permissions',
+    name_column: 'Permission',
+    description_column: 'Description',
+    type_column: 'Permission type',
+    type: {
+      api: 'API permission',
+      org: 'Org permission',
+    },
+    assign_permissions: 'Assign permissions',
+  },
+  general: {
+    tab: 'General',
+    settings: 'Settings',
+    description:
+      'Organization role is a grouping of permissions that can be assigned to users. The permissions must come from the predefined organization permissions.',
+    name_field: 'Name',
+    description_field: 'Description',
+    description_field_placeholder: 'Users with view-only permissions',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/es/translation/admin-console/index.ts b/packages/phrases/src/locales/es/translation/admin-console/index.ts
index 23a056d94..872b251bf 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/es/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/es/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..00b7a1f67
--- /dev/null
+++ b/packages/phrases/src/locales/es/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Detalles del rol de la organización',
+  back_to_org_roles: 'Volver a roles de la organización',
+  org_role: 'Rol de la organización',
+  delete_confirm:
+    'Al hacerlo, se eliminarán los permisos asociados con este rol de los usuarios afectados y se borrarán las relaciones entre roles de organización, miembros en la organización y permisos de organización.',
+  deleted: 'El rol de la organización {{name}} se eliminó correctamente.',
+  permissions: {
+    tab: 'Permisos',
+    name_column: 'Permiso',
+    description_column: 'Descripción',
+    type_column: 'Tipo de permiso',
+    type: {
+      api: 'Permiso de API',
+      org: 'Permiso de organización',
+    },
+    assign_permissions: 'Asignar permisos',
+  },
+  general: {
+    tab: 'General',
+    settings: 'Configuración',
+    description:
+      'El rol de la organización es un grupo de permisos que se pueden asignar a los usuarios. Los permisos deben provenir de los permisos de organización predefinidos.',
+    name_field: 'Nombre',
+    description_field: 'Descripción',
+    description_field_placeholder: 'Usuarios con permisos de solo lectura',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/index.ts b/packages/phrases/src/locales/fr/translation/admin-console/index.ts
index 863198535..d85910d39 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..ad8b4b898
--- /dev/null
+++ b/packages/phrases/src/locales/fr/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: "Détails du rôle de l'organisation",
+  back_to_org_roles: "Retour aux rôles de l'organisation",
+  org_role: "Rôle de l'organisation",
+  delete_confirm:
+    "Cela supprimera les autorisations associées à ce rôle des utilisateurs concernés et supprimera les relations entre les rôles de l'organisation, les membres de l'organisation et les autorisations de l'organisation.",
+  deleted: "Le rôle d'organisation {{name}} a été supprimé avec succès.",
+  permissions: {
+    tab: 'Autorisations',
+    name_column: 'Autorisation',
+    description_column: 'Description',
+    type_column: "Type d'autorisation",
+    type: {
+      api: 'Autorisation API',
+      org: "Autorisation d'organisation",
+    },
+    assign_permissions: 'Attribuer des autorisations',
+  },
+  general: {
+    tab: 'Général',
+    settings: 'Réglages',
+    description:
+      "Le rôle d'organisation est un regroupement de permissions qui peuvent être attribuées aux utilisateurs. Les permissions doivent provenir des permissions d'organisation prédéfinies.",
+    name_field: 'Nom',
+    description_field: 'Description',
+    description_field_placeholder: 'Utenti con permessi di sola visualizzazione',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/it/translation/admin-console/index.ts b/packages/phrases/src/locales/it/translation/admin-console/index.ts
index 863198535..d85910d39 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/it/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/it/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..374145e56
--- /dev/null
+++ b/packages/phrases/src/locales/it/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: "Dettagli del ruolo dell'organizzazione",
+  back_to_org_roles: "Torna ai ruoli dell'organizzazione",
+  org_role: "Ruolo dell'organizzazione",
+  delete_confirm:
+    "Facendo ciò, verranno rimossi i permessi associati a questo ruolo dagli utenti interessati e verranno eliminati i rapporti tra ruoli organizzativi, membri nell'organizzazione e permessi dell'organizzazione.",
+  deleted: "Il ruolo dell'organizzazione {{name}} è stato eliminato con successo.",
+  permissions: {
+    tab: 'Autorizzazioni',
+    name_column: 'Autorizzazione',
+    description_column: 'Descrizione',
+    type_column: 'Tipo di autorizzazione',
+    type: {
+      api: 'Autorizzazione API',
+      org: 'Autorizzazione organizzazione',
+    },
+    assign_permissions: 'Assegna autorizzazioni',
+  },
+  general: {
+    tab: 'Generale',
+    settings: 'Impostazioni',
+    description:
+      "Il ruolo dell'organizzazione è un raggruppamento di autorizzazioni che possono essere assegnate agli utenti. Le autorizzazioni devono provenire dalle autorizzazioni predefinite dell'organizzazione.",
+    name_field: 'Nome',
+    description_field: 'Descrizione',
+    description_field_placeholder: 'Utenti con permessi di sola visualizzazione',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/index.ts b/packages/phrases/src/locales/ja/translation/admin-console/index.ts
index 863198535..d85910d39 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..30f286e4e
--- /dev/null
+++ b/packages/phrases/src/locales/ja/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: '組織の役割の詳細',
+  back_to_org_roles: '組織の役割に戻る',
+  org_role: '組織の役割',
+  delete_confirm:
+    'これにより、関連するユーザーからこのロールに関連付けられた権限が削除され、組織の役割、組織のメンバー、および組織の権限間の関係が削除されます。',
+  deleted: '組織の役割 {{name}} は正常に削除されました。',
+  permissions: {
+    tab: '許可',
+    name_column: '許可',
+    description_column: '説明',
+    type_column: '許可の種類',
+    type: {
+      api: 'API許可',
+      org: '組織許可',
+    },
+    assign_permissions: '許可を割り当てる',
+  },
+  general: {
+    tab: '一般',
+    settings: '設定',
+    description:
+      '組織の役割は、ユーザーに割り当てることができる許可のグループです。 許可は、事前定義された組織の許可から取得する必要があります。',
+    name_field: '名前',
+    description_field: '説明',
+    description_field_placeholder: '閲覧専用権限を持つユーザー',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/index.ts b/packages/phrases/src/locales/ko/translation/admin-console/index.ts
index 02bd0a400..8796cd525 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..8763d9677
--- /dev/null
+++ b/packages/phrases/src/locales/ko/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: '조직 역할 세부 정보',
+  back_to_org_roles: '조직 역할로 돌아가기',
+  org_role: '조직 역할',
+  delete_confirm:
+    '이렇게 하면 해당 역할과 관련된 사용자의 권한이 제거되고 조직 역할, 조직 구성원 및 조직 권한 간의 관계가 삭제됩니다.',
+  deleted: '조직 역할 {{name}} 이(가) 성공적으로 삭제되었습니다.',
+  permissions: {
+    tab: '권한',
+    name_column: '권한',
+    description_column: '설명',
+    type_column: '권한 유형',
+    type: {
+      api: 'API 권한',
+      org: '조직 권한',
+    },
+    assign_permissions: '권한 할당',
+  },
+  general: {
+    tab: '일반',
+    settings: '설정',
+    description:
+      '조직 역할은 사용자에게 할당할 수있는 권한의 그룹입니다. 권한은 사전 정의 된 조직 권한에서 가져와야합니다.',
+    name_field: '이름',
+    description_field: '설명',
+    description_field_placeholder: '읽기 전용 권한을 가진 사용자',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/index.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/index.ts
index 02bd0a400..8796cd525 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..aeae34286
--- /dev/null
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Szczegóły roli organizacji',
+  back_to_org_roles: 'Powrót do ról organizacji',
+  org_role: 'Rola organizacji',
+  delete_confirm:
+    'W wyniku tego zostaną usunięte uprawnienia związane z tą rolą od dotkniętych użytkowników i zostaną usunięte związki między rolami organizacyjnymi, członkami organizacji a uprawnieniami organizacji.',
+  deleted: 'Rola organizacji {{name}} została pomyślnie usunięta.',
+  permissions: {
+    tab: 'Uprawnienia',
+    name_column: 'Uprawnienie',
+    description_column: 'Opis',
+    type_column: 'Typ uprawnienia',
+    type: {
+      api: 'Uprawnienie API',
+      org: 'Uprawnienie organizacji',
+    },
+    assign_permissions: 'Przypisz uprawnienia',
+  },
+  general: {
+    tab: 'Ogólne',
+    settings: 'Ustawienia',
+    description:
+      'Rola organizacji to grupowanie uprawnień, które można przypisać użytkownikom. Uprawnienia muszą pochodzić z predefiniowanych uprawnień organizacji.',
+    name_field: 'Nazwa',
+    description_field: 'Opis',
+    description_field_placeholder: 'Użytkownicy z uprawnieniami tylko do odczytu',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts
index 5b98991b6..0d6394d14 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..5d1ef6f8f
--- /dev/null
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Detalhes da função da organização',
+  back_to_org_roles: 'Voltar para funções da org',
+  org_role: 'Função da organização',
+  delete_confirm:
+    'Ao fazer isso, os privilégios associados a esta função serão removidos dos usuários afetados e as relações entre funções da organização, membros na organização e permissões da organização serão excluídas.',
+  deleted: 'O papel da organização {{name}} foi excluído com sucesso.',
+  permissions: {
+    tab: 'Permissões',
+    name_column: 'Permissão',
+    description_column: 'Descrição',
+    type_column: 'Tipo de permissão',
+    type: {
+      api: 'Permissão da API',
+      org: 'Permissão da org',
+    },
+    assign_permissions: 'Atribuir permissões',
+  },
+  general: {
+    tab: 'Geral',
+    settings: 'Configurações',
+    description:
+      'A função da organização é um agrupamento de permissões que podem ser atribuídas aos usuários. As permissões devem vir das permissões predefinidas da organização.',
+    name_field: 'Nome',
+    description_field: 'Descrição',
+    description_field_placeholder: 'Usuários com permissões somente de visualização',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts
index ae2dbc402..5accb2276 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..e6adcb068
--- /dev/null
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Detalhes da função da organização',
+  back_to_org_roles: 'Voltar para funções da org',
+  org_role: 'Função da organização',
+  delete_confirm:
+    'Ao fazê-lo, serão removidas as permissões associadas a esta função dos utilizadores afetados e serão eliminadas as relações entre funções da organização, membros na organização e permissões da organização.',
+  deleted: 'O papel da organização {{name}} foi removido com sucesso.',
+  permissions: {
+    tab: 'Permissões',
+    name_column: 'Permissão',
+    description_column: 'Descrição',
+    type_column: 'Tipo de permissão',
+    type: {
+      api: 'Permissão da API',
+      org: 'Permissão da org',
+    },
+    assign_permissions: 'Atribuir permissões',
+  },
+  general: {
+    tab: 'Geral',
+    settings: 'Configurações',
+    description:
+      'A função da organização é um agrupamento de permissões que podem ser atribuídas aos usuários. As permissões devem vir das permissões predefinidas da organização.',
+    name_field: 'Nome',
+    description_field: 'Descrição',
+    description_field_placeholder: 'Utilizadores com permissões apenas de visualização',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/index.ts b/packages/phrases/src/locales/ru/translation/admin-console/index.ts
index 2c8c12178..0ce13f251 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..851ed3ef8
--- /dev/null
+++ b/packages/phrases/src/locales/ru/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Детали роли организации',
+  back_to_org_roles: 'Вернуться к ролям организации',
+  org_role: 'Роль организации',
+  delete_confirm:
+    'При этом будут удалены разрешения, связанные с этой ролью, у затронутых пользователей, и будут удалены связи между ролями организации, членами организации и правами организации.',
+  deleted: 'Роль организации {{name}} успешно удалена.',
+  permissions: {
+    tab: 'Разрешения',
+    name_column: 'Разрешение',
+    description_column: 'Описание',
+    type_column: 'Тип разрешения',
+    type: {
+      api: 'Разрешение API',
+      org: 'Разрешение организации',
+    },
+    assign_permissions: 'Назначить разрешения',
+  },
+  general: {
+    tab: 'Общее',
+    settings: 'Настройки',
+    description:
+      'Роль организации - это группировка разрешений, которые можно назначить пользователям. Разрешения должны быть взяты из предопределенных разрешений организации.',
+    name_field: 'Имя',
+    description_field: 'Описание',
+    description_field_placeholder: 'Пользователи с правами только на просмотр',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts
index 2acada991..2fc5cb339 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..d140eb857
--- /dev/null
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,30 @@
+const organization_role_details = {
+  page_title: 'Kuruluş rolü ayrıntıları',
+  back_to_org_roles: 'Kuruluş rollerine geri dön',
+  org_role: 'Kuruluş rolü',
+  delete_confirm:
+    'Bunu yapmak, etkilenen kullanıcılardan bu role ilişkilendirilen izinleri kaldıracak ve organizasyon rolleri, organizasyon üyeleri ve organizasyon izinleri arasındaki ilişkileri silecektir.',
+  deleted: 'Kuruluş rolü {{name}} başarıyla silindi.',
+  permissions: {
+    tab: 'İzinler',
+    name_column: 'İzin',
+    description_column: 'Açıklama',
+    type_column: 'İzin türü',
+    type: {
+      api: 'API izni',
+      org: 'Kuruluş izni',
+    },
+    assign_permissions: 'İzinleri atama',
+  },
+  general: {
+    tab: 'Genel',
+    settings: 'Ayarlar',
+    description:
+      'Kuruluş rolü, kullanıcılara atanabilecek izinlerin bir gruplamasıdır. İzinler, önceden tanımlanmış kuruluş izinlerinden gelmelidir.',
+    name_field: 'Adı',
+    description_field: 'Açıklama',
+    description_field_placeholder: 'Yalnızca görüntüleme izinlerine sahip kullanıcılar',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts
index 7e5120017..21dd05c3c 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..93d734534
--- /dev/null
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,29 @@
+const organization_role_details = {
+  page_title: '组织角色详情',
+  back_to_org_roles: '返回组织角色',
+  org_role: '组织角色',
+  delete_confirm:
+    '这样做将从受影响的用户中删除与此角色关联的权限，并删除组织角色、组织成员和组织权限之间的关系。',
+  deleted: '组织角色 {{name}} 已成功删除。',
+  permissions: {
+    tab: '权限',
+    name_column: '权限',
+    description_column: '描述',
+    type_column: '权限类型',
+    type: {
+      api: 'API 权限',
+      org: '组织权限',
+    },
+    assign_permissions: '分配权限',
+  },
+  general: {
+    tab: '常规',
+    settings: '设置',
+    description: '组织角色是可以分配给用户的权限组。这些权限必须来自预定义的组织权限。',
+    name_field: '名称',
+    description_field: '描述',
+    description_field_placeholder: '仅具有查看权限的用户',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/index.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/index.ts
index 2341ad804..0fb3d9341 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..2208da7fc
--- /dev/null
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,29 @@
+const organization_role_details = {
+  page_title: '組織角色詳情',
+  back_to_org_roles: '返回組織角色',
+  org_role: '組織角色',
+  delete_confirm:
+    '這樣做將會從受影響的使用者中移除與此角色相關聯的權限，並刪除組織角色、組織成員和組織權限之間的關係。',
+  deleted: '組織角色 {{name}} 已成功刪除。',
+  permissions: {
+    tab: '權限',
+    name_column: '權限',
+    description_column: '描述',
+    type_column: '權限類型',
+    type: {
+      api: 'API 權限',
+      org: '組織權限',
+    },
+    assign_permissions: '分配權限',
+  },
+  general: {
+    tab: '一般',
+    settings: '設置',
+    description: '組織角色是可以分配給用戶的權限組。這些權限必須來自預定義的組織權限。',
+    name_field: '名稱',
+    description_field: '描述',
+    description_field_placeholder: '僅擁有檢視權限的使用者',
+  },
+};
+
+export default Object.freeze(organization_role_details);
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/index.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/index.ts
index 2341ad804..0fb3d9341 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/index.ts
@@ -22,6 +22,7 @@ import logs from './logs.js';
 import menu from './menu.js';
 import mfa from './mfa.js';
 import organization_details from './organization-details.js';
+import organization_role_details from './organization-role-details.js';
 import organization_template from './organization-template.js';
 import organizations from './organizations.js';
 import permissions from './permissions.js';
@@ -95,6 +96,7 @@ const admin_console = {
   invitation,
   signing_keys,
   organization_template,
+  organization_role_details,
 };
 
 export default Object.freeze(admin_console);
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-role-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-role-details.ts
new file mode 100644
index 000000000..21a4fa6e8
--- /dev/null
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-role-details.ts
@@ -0,0 +1,29 @@
+const organization_role_details = {
+  page_title: '組織角色詳情',
+  back_to_org_roles: '返回組織角色',
+  org_role: '組織角色',
+  delete_confirm:
+    '這樣做將會從受影響的使用者中移除與此角色相關聯的權限，並刪除組織角色、組織成員和組織權限之間的關係。',
+  deleted: '組織角色 {{name}} 已成功刪除。',
+  permissions: {
+    tab: '權限',
+    name_column: '權限',
+    description_column: '描述',
+    type_column: '權限類型',
+    type: {
+      api: 'API 權限',
+      org: '組織權限',
+    },
+    assign_permissions: '分配權限',
+  },
+  general: {
+    tab: '一般',
+    settings: '設置',
+    description: '組織角色是可以分配給用戶的權限組。這些權限必須來自預定義的組織權限。',
+    name_field: '名稱',
+    description_field: '描述',
+    description_field_placeholder: '僅具有查看權限的使用者',
+  },
+};
+
+export default Object.freeze(organization_role_details);