From 5786d8156f7473357cf0f398ecea0d6f0e6efb3b Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 5 Jan 2023 16:22:45 +0800
Subject: [PATCH] feat(console): roles page (#2820)

---
 packages/console/src/App.tsx                  | 16 ++--
 packages/console/src/assets/images/role.svg   |  5 ++
 .../AppContent/components/Sidebar/hook.tsx    | 10 +++
 packages/console/src/pages/Roles/index.tsx    | 78 +++++++++++++++++++
 .../de/translation/admin-console/index.ts     |  2 +
 .../de/translation/admin-console/roles.ts     | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../de/translation/admin-console/tabs.ts      |  1 +
 .../en/translation/admin-console/index.ts     |  2 +
 .../en/translation/admin-console/roles.ts     | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../en/translation/admin-console/tabs.ts      |  1 +
 .../fr/translation/admin-console/index.ts     |  2 +
 .../fr/translation/admin-console/roles.ts     | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../fr/translation/admin-console/tabs.ts      |  1 +
 .../ko/translation/admin-console/index.ts     |  2 +
 .../ko/translation/admin-console/roles.ts     | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../ko/translation/admin-console/tabs.ts      |  1 +
 .../pt-br/translation/admin-console/index.ts  |  2 +
 .../pt-br/translation/admin-console/roles.ts  | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../pt-br/translation/admin-console/tabs.ts   |  1 +
 .../pt-pt/translation/admin-console/index.ts  |  2 +
 .../pt-pt/translation/admin-console/roles.ts  | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../pt-pt/translation/admin-console/tabs.ts   |  1 +
 .../tr-tr/translation/admin-console/index.ts  |  2 +
 .../tr-tr/translation/admin-console/roles.ts  | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../tr-tr/translation/admin-console/tabs.ts   |  1 +
 .../zh-cn/translation/admin-console/index.ts  |  2 +
 .../zh-cn/translation/admin-console/roles.ts  | 10 +++
 .../translation/admin-console/tab-sections.ts |  1 +
 .../zh-cn/translation/admin-console/tabs.ts   |  1 +
 36 files changed, 215 insertions(+), 6 deletions(-)
 create mode 100644 packages/console/src/assets/images/role.svg
 create mode 100644 packages/console/src/pages/Roles/index.tsx
 create mode 100644 packages/phrases/src/locales/de/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/en/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/fr/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/ko/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
 create mode 100644 packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts

diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index caa7f1719..225cd5e40 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -25,6 +25,7 @@ import Connectors from '@/pages/Connectors';
 import Dashboard from '@/pages/Dashboard';
 import GetStarted from '@/pages/GetStarted';
 import NotFound from '@/pages/NotFound';
+import Roles from '@/pages/Roles';
 import Settings from '@/pages/Settings';
 import SignInExperience from '@/pages/SignInExperience';
 import UserDetails from '@/pages/UserDetails';
@@ -50,6 +51,7 @@ const Main = () => {
             <Route element={<AppContent />}>
               <Route path="*" element={<NotFound />} />
               <Route path="get-started" element={<GetStarted />} />
+              <Route path="dashboard" element={<Dashboard />} />
               <Route path="applications">
                 <Route index element={<Applications />} />
                 <Route path="create" element={<Applications />} />
@@ -60,6 +62,10 @@ const Main = () => {
                 <Route path="create" element={<ApiResources />} />
                 <Route path=":id" element={<ApiResourceDetails />} />
               </Route>
+              <Route path="sign-in-experience">
+                <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
+                <Route path=":tab" element={<SignInExperience />} />
+              </Route>
               <Route path="connectors">
                 <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
                 <Route path=":tab" element={<Connectors />} />
@@ -73,16 +79,14 @@ const Main = () => {
                 <Route path=":userId/logs" element={<UserDetails />} />
                 <Route path=":userId/logs/:logId" element={<AuditLogDetails />} />
               </Route>
-              <Route path="sign-in-experience">
-                <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
-                <Route path=":tab" element={<SignInExperience />} />
-              </Route>
-              <Route path="settings" element={<Settings />} />
               <Route path="audit-logs">
                 <Route index element={<AuditLogs />} />
                 <Route path=":logId" element={<AuditLogDetails />} />
               </Route>
-              <Route path="dashboard" element={<Dashboard />} />
+              <Route path="roles">
+                <Route index element={<Roles />} />
+              </Route>
+              <Route path="settings" element={<Settings />} />
             </Route>
           </Routes>
         </AppBoundary>
diff --git a/packages/console/src/assets/images/role.svg b/packages/console/src/assets/images/role.svg
new file mode 100644
index 000000000..fe550299d
--- /dev/null
+++ b/packages/console/src/assets/images/role.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.3417 10.2334C12.8692 9.66689 13.1664 8.924 13.1751 8.15002C13.1751 7.31459 12.8432 6.51337 12.2525 5.92263C11.6617 5.33189 10.8605 5.00002 10.0251 5.00002C9.18965 5.00002 8.38844 5.33189 7.7977 5.92263C7.20696 6.51337 6.87508 7.31459 6.87508 8.15002C6.88378 8.924 7.18093 9.66689 7.70842 10.2334C6.97396 10.5991 6.34193 11.1416 5.86918 11.8122C5.39642 12.4828 5.09777 13.2604 5.00008 14.075C4.97577 14.296 5.04025 14.5177 5.17934 14.6911C5.31843 14.8646 5.52073 14.9757 5.74175 15C5.96276 15.0243 6.18438 14.9599 6.35785 14.8208C6.53132 14.6817 6.64244 14.4794 6.66675 14.2584C6.76619 13.451 7.15745 12.7078 7.76682 12.1689C8.37619 11.63 9.1616 11.3325 9.97508 11.3325C10.7886 11.3325 11.574 11.63 12.1833 12.1689C12.7927 12.7078 13.184 13.451 13.2834 14.2584C13.3066 14.472 13.4114 14.6685 13.576 14.8067C13.7406 14.9449 13.9523 15.0142 14.1667 15H14.2584C14.4769 14.9749 14.6765 14.8644 14.8139 14.6927C14.9512 14.521 15.0152 14.302 14.9917 14.0834C14.9013 13.273 14.6121 12.4975 14.1498 11.8259C13.6875 11.1542 13.0664 10.6072 12.3417 10.2334ZM10.0001 9.63335C9.70671 9.63335 9.41992 9.54636 9.17599 9.38337C8.93205 9.22038 8.74193 8.98871 8.62966 8.71767C8.51739 8.44662 8.48802 8.14838 8.54525 7.86064C8.60248 7.5729 8.74376 7.30859 8.95121 7.10115C9.15865 6.8937 9.42296 6.75242 9.7107 6.69519C9.99844 6.63795 10.2967 6.66733 10.5677 6.7796C10.8388 6.89187 11.0704 7.08199 11.2334 7.32592C11.3964 7.56986 11.4834 7.85664 11.4834 8.15002C11.4834 8.54343 11.3271 8.92072 11.049 9.1989C10.7708 9.47708 10.3935 9.63335 10.0001 9.63335ZM15.8334 1.66669H4.16675C3.50371 1.66669 2.86782 1.93008 2.39898 2.39892C1.93014 2.86776 1.66675 3.50365 1.66675 4.16669V15.8334C1.66675 16.4964 1.93014 17.1323 2.39898 17.6011C2.86782 18.07 3.50371 18.3334 4.16675 18.3334H15.8334C16.4965 18.3334 17.1323 18.07 17.6012 17.6011C18.07 17.1323 18.3334 16.4964 18.3334 15.8334V4.16669C18.3334 3.50365 18.07 2.86776 17.6012 2.39892C17.1323 1.93008 16.4965 1.66669 15.8334 1.66669ZM16.6667 15.8334C16.6667 16.0544 16.579 16.2663 16.4227 16.4226C16.2664 16.5789 16.0544 16.6667 15.8334 16.6667H4.16675C3.94573 16.6667 3.73377 16.5789 3.57749 16.4226C3.42121 16.2663 3.33341 16.0544 3.33341 15.8334V4.16669C3.33341 3.94567 3.42121 3.73371 3.57749 3.57743C3.73377 3.42115 3.94573 3.33335 4.16675 3.33335H15.8334C16.0544 3.33335 16.2664 3.42115 16.4227 3.57743C16.579 3.73371 16.6667 3.94567 16.6667 4.16669V15.8334Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx b/packages/console/src/components/AppContent/components/Sidebar/hook.tsx
index 7862050de..379bae176 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/hook.tsx
@@ -2,6 +2,7 @@ import type { Optional } from '@silverhand/essentials';
 import type { FC, ReactNode } from 'react';
 import type { TFuncKey } from 'react-i18next';
 
+import Role from '@/assets/images/role.svg';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserPreferences from '@/hooks/use-user-preferences';
 
@@ -98,6 +99,15 @@ export const useSidebarMenuItems = (): {
         },
       ],
     },
+    {
+      title: 'access_control',
+      items: [
+        {
+          Icon: Role,
+          title: 'roles',
+        },
+      ],
+    },
     {
       title: 'help_and_support',
       items: [
diff --git a/packages/console/src/pages/Roles/index.tsx b/packages/console/src/pages/Roles/index.tsx
new file mode 100644
index 000000000..9eed75427
--- /dev/null
+++ b/packages/console/src/pages/Roles/index.tsx
@@ -0,0 +1,78 @@
+import type { Role } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Plus from '@/assets/images/plus.svg';
+import Button from '@/components/Button';
+import CardTitle from '@/components/CardTitle';
+import ItemPreview from '@/components/ItemPreview';
+import Table from '@/components/Table';
+import type { RequestError } from '@/hooks/use-api';
+import * as pageStyles from '@/scss/resources.module.scss';
+
+const rolesPathname = '/roles';
+const createRolePathname = `${rolesPathname}/create`;
+const buildDetailsPathname = (id: string) => `${rolesPathname}/${id}`;
+
+const Roles = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const navigate = useNavigate();
+  const { data: roles, error, mutate } = useSWR<Role[], RequestError>(`/api/roles`);
+  const isLoading = !roles && !error;
+
+  return (
+    <div className={pageStyles.container}>
+      <div className={pageStyles.headline}>
+        <CardTitle title="roles.title" subtitle="roles.subtitle" />
+        <Button
+          icon={<Plus />}
+          title="roles.create"
+          type="primary"
+          size="large"
+          onClick={() => {
+            navigate(createRolePathname);
+          }}
+        />
+      </div>
+      <Table
+        className={pageStyles.table}
+        rowGroups={[{ key: 'roles', data: roles }]}
+        rowIndexKey="id"
+        isLoading={isLoading}
+        errorMessage={error?.body?.message ?? error?.message}
+        columns={[
+          {
+            title: t('roles.role_name'),
+            dataIndex: 'name',
+            colSpan: 6,
+            render: ({ id, name }) => <ItemPreview title={name} to={buildDetailsPathname(id)} />,
+          },
+          {
+            title: t('roles.role_description'),
+            dataIndex: 'description',
+            colSpan: 10,
+            render: ({ description }) => description,
+          },
+        ]}
+        rowClickHandler={({ id }) => {
+          navigate(buildDetailsPathname(id));
+        }}
+        placeholder={{
+          content: (
+            <Button
+              title="roles.create"
+              type="outline"
+              onClick={() => {
+                navigate(createRolePathname);
+              }}
+            />
+          ),
+        }}
+        onRetry={async () => mutate(undefined, true)}
+      />
+    </div>
+  );
+};
+
+export default Roles;
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 816360791..c4dc1ba62 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/index.ts
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/de/translation/admin-console/roles.ts b/packages/phrases/src/locales/de/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/de/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
index e5cfecc8c..d7d1c9827 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: 'Übersicht',
   resource_management: 'Ressourcenverwaltung',
   user_management: 'Benutzerverwaltung',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: 'Hilfe und Support',
 };
 
diff --git a/packages/phrases/src/locales/de/translation/admin-console/tabs.ts b/packages/phrases/src/locales/de/translation/admin-console/tabs.ts
index 4cd526fb3..f1b8d0202 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Connectoren',
   users: 'Benutzerverwaltung',
   audit_logs: 'Audit Logs',
+  roles: 'Roles', // UNTRANSLATED
   docs: 'Dokumentation',
   contact_us: 'Kontakt',
   settings: 'Einstellungen',
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 102cfde03..09a18c0c5 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/index.ts
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/en/translation/admin-console/roles.ts b/packages/phrases/src/locales/en/translation/admin-console/roles.ts
new file mode 100644
index 000000000..855f14e52
--- /dev/null
+++ b/packages/phrases/src/locales/en/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles',
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.',
+  create: 'Add Roles',
+  role_name: 'Role',
+  role_description: 'Description',
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
index 7ba570b1e..7714c2338 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: 'Overview',
   resource_management: 'Resource Management',
   user_management: 'User Management',
+  access_control: 'Access Control',
   help_and_support: 'Help and Support',
 };
 
diff --git a/packages/phrases/src/locales/en/translation/admin-console/tabs.ts b/packages/phrases/src/locales/en/translation/admin-console/tabs.ts
index 59cc5f995..3e8e70f5a 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Connectors',
   users: 'User Management',
   audit_logs: 'Audit Logs',
+  roles: 'Roles',
   docs: 'Docs',
   contact_us: 'Contact Us',
   settings: 'Settings',
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 102cfde03..09a18c0c5 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/index.ts
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
index 9f7cae421..8a906f6c8 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: "Vue d'ensemble",
   resource_management: 'Gestion des ressources',
   user_management: 'Gestion des utilisateurs',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: 'Aide et support',
 };
 
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts b/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts
index 9c33edbdc..bbe2d79cc 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Connecteurs',
   users: 'Gestion des utilisateurs',
   audit_logs: "Journaux d'audit",
+  roles: 'Roles', // UNTRANSLATED
   docs: 'Documentation',
   contact_us: 'Contactez nous',
   settings: 'Paramètres',
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 a1641d313..e7efe2388 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/index.ts
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
index 3cb7e3901..231af4797 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: '살펴보기',
   resource_management: '리소스 관리',
   user_management: '사용자 관리',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: '고객센터',
 };
 
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts b/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts
index 390d9b7f2..b3fdd64f3 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: '연동',
   users: '사용자 관리',
   audit_logs: 'Audit 기록',
+  roles: 'Roles', // UNTRANSLATED
   docs: '문서',
   contact_us: '연락처',
   settings: '설정',
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 4b390643b..783442e67 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
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
index 32347a9f6..9ee5d8a87 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: 'Visão geral',
   resource_management: 'Recursos',
   user_management: 'Usuários',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: 'Ajuda e suporte',
 };
 
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts
index ff48550a5..2335d76c5 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Conectores',
   users: 'Usuários',
   audit_logs: 'Logs',
+  roles: 'Roles', // UNTRANSLATED
   docs: 'Documentação',
   contact_us: 'Contate-nos',
   settings: 'Configurações',
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 997ce0cf7..dc4df3b1f 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
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
index 3df4211c2..03a3e1558 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: 'Vista geral',
   resource_management: 'Gestão de recursos',
   user_management: 'Gestão de utilizadores',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: 'Ajuda e suporte',
 };
 
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts
index 78501bb0d..8ccd6746c 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Conectores',
   users: 'Gestão de utilizadores',
   audit_logs: 'Registos de auditoria',
+  roles: 'Roles', // UNTRANSLATED
   docs: 'Documentação',
   contact_us: 'Contate-nos',
   settings: 'Definições',
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 d0e3612fd..69b18a3a8 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
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
index d0378668c..ca07dc53a 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: 'Genel Bakış',
   resource_management: 'Kaynak Yönetimi',
   user_management: 'Kullanıcı Yönetimi',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: 'Yardım ve Destek',
 };
 
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts
index b2f0c67ad..79330ceb3 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: 'Connectors',
   users: 'Kullanıcı Yönetimi',
   audit_logs: 'Denetim Kayıtları',
+  roles: 'Roles', // UNTRANSLATED
   docs: 'Dökümanlar',
   contact_us: 'Bize Ulaşın',
   settings: 'Ayarlar',
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 156b0534a..00bad73aa 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
@@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@@ -47,6 +48,7 @@ const admin_console = {
   log_details,
   session_expired,
   welcome,
+  roles,
 };
 
 export default admin_console;
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts
new file mode 100644
index 000000000..66771537f
--- /dev/null
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts
@@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
index 95da10d6e..d811e7fa9 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
@@ -2,6 +2,7 @@ const tab_sections = {
   overview: '概览',
   resource_management: '资源管理',
   user_management: '用户管理',
+  access_control: 'Access Control', // UNTRANSLATED
   help_and_support: '帮助与支持',
 };
 
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts
index 6ca72a6da..b334551e8 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts
@@ -7,6 +7,7 @@ const tabs = {
   connectors: '连接器',
   users: '用户管理',
   audit_logs: '审计日志',
+  roles: 'Roles', // UNTRANSLATED
   docs: '文档',
   contact_us: '联系我们',
   settings: '设置',