chore: Custom Roles to manage permissions [ UI ] (#9865)

In admin settings, this Pr will add the UI for managing custom roles (
ref: https://github.com/chatwoot/chatwoot/pull/9995 ). It also handles
the routing logic changes to accommodate fine-tuned permissions.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -39,6 +39,7 @@ const settings = accountId => ({
     'settings_teams_list',
     'settings_teams_new',
     'sla_list',
+    'custom_roles_list',
   ],
   menuItems: [
     {
@@ -178,6 +179,18 @@ const settings = accountId => ({
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
     },
+    {
+      icon: 'scan-person',
+      label: 'CUSTOM_ROLES',
+      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
+      toState: frontendURL(`accounts/${accountId}/settings/custom-roles/list`),
+      toStateName: 'custom_roles_list',
+      isEnterpriseOnly: true,
+      beta: true,
+    },
     {
       icon: 'document-list-clock',
       label: 'SLA',

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -52,9 +52,13 @@ export default {
                 {{ account.name }}
               </div>
               <div
-                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+                class="text-xs font-medium lowercase text-slate-500 dark:text-slate-500 hover:underline-offset-4"
               >
-                {{ account.role }}
+                {{
+                  account.custom_role_id
+                    ? account.custom_role.name
+                    : account.role
+                }}
               </div>
             </label>
           </span>