Add User Groups and Permission Settings Management Components

- Introduced UserGroups and PermissionSettings components for managing user groups and permission settings. - Implemented new icons for user groups and permission settings, enhancing visual representation in the dashboard. - Updated routing and sidebar configuration to include new management sections for user groups and permission settings. - Enhanced existing components with loading states and improved styling for better user experience. - Refactored related components to ensure consistency in naming and functionality across the application.
2026-08-20 15:04:50 +01:00 · 2026-08-20 15:04:50 +01:00 · de1bd53f53
commit de1bd53f53
parent daf2e1aab4
23 changed files with 822 additions and 71 deletions
--- a/assets/icons/persongroupicon.svg
+++ b/assets/icons/persongroupicon.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.693368,0,0,0.693368,-2.677595,7.413107)">
+        <path d="M42.242,41.686C40.097,43.436 38.293,45.407 36.884,47.522C34.764,46.735 32.364,46.281 29.811,46.281C20.785,46.281 13.661,51.971 13.661,57.382C13.661,57.696 13.806,57.946 14.24,57.946L33.222,57.946C33.166,58.257 33.157,58.571 33.157,58.884C33.157,61.225 33.721,63.516 34.996,65.46L13.183,65.46C7.906,65.46 5.304,62.977 5.304,58.498C5.304,48.147 16.263,38.838 29.811,38.838C34.357,38.838 38.611,39.886 42.242,41.686ZM42.301,22.95C42.301,30.45 36.757,36.469 29.818,36.469C22.879,36.469 17.311,30.505 17.311,22.965C17.311,15.724 22.975,9.655 29.818,9.655C36.652,9.655 42.301,15.654 42.301,22.95ZM24.809,22.965C24.809,26.414 27.104,28.996 29.818,28.996C32.563,28.996 34.835,26.414 34.835,22.95C34.835,19.737 32.49,17.128 29.818,17.128C27.144,17.128 24.809,19.752 24.809,22.965Z" style="fill-rule:nonzero;"/>
+        <path d="M66.701,35.926C74.64,35.926 80.918,29.117 80.918,20.577C80.918,12.267 74.528,5.46 66.701,5.46C58.889,5.46 52.461,12.296 52.461,20.592C52.461,29.124 58.77,35.926 66.701,35.926ZM66.701,28.318C63.142,28.318 60.166,25.025 60.166,20.568C60.166,16.396 63.198,13.068 66.701,13.068C70.212,13.068 73.212,16.374 73.212,20.577C73.212,24.962 70.3,28.318 66.701,28.318ZM47.673,65.412L85.706,65.412C91.705,65.412 94.723,63.301 94.723,58.884C94.723,49.169 82.875,38.829 66.701,38.829C50.496,38.829 38.649,49.169 38.649,58.884C38.649,63.301 41.666,65.412 47.673,65.412ZM48.131,57.805C47.629,57.805 47.476,57.562 47.476,57.216C47.476,53.516 54.602,46.461 66.701,46.461C78.793,46.461 85.895,53.516 85.895,57.216C85.895,57.562 85.75,57.805 85.272,57.805L48.131,57.805Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -1405,10 +1405,18 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {

 .permission-checkbox[data-state='inherit'] .permission-checkbox-inherit,
 .permission-checkbox[data-state='allow'] .permission-checkbox-allow,
-.permission-checkbox[data-state='deny'] .permission-checkbox-deny {
+.permission-checkbox[data-state='deny'] .permission-checkbox-deny,
+.permission-checkbox[data-state='mixed'] .permission-checkbox-mixed {
  opacity: 1;
 }

+.permission-checkbox-square {
+  width: 7px;
+  height: 7px;
+  background-color: #ffffff;
+  border-radius: 1px;
+}
+
 .permission-checkbox-face .anticon {
  display: flex;
  line-height: 0;
--- a/src/components/Dashboard/Management/PermissionSettings.jsx
+++ b/src/components/Dashboard/Management/PermissionSettings.jsx
@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { Button, Flex, Space, Modal, Dropdown } from 'antd'
-import NewPermissionSettings from './PermissionSettings/NewPermissionSettings'
+import NewPermissionSetting from './PermissionSettings/NewPermissionSetting'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
@ -19,10 +19,10 @@ const PermissionSettingsList = () => {
    useState(false)
  const tableRef = useRef()

-  const [viewMode, setViewMode] = useViewMode('permissionSettings')
+  const [viewMode, setViewMode] = useViewMode('permissionSetting')

  const [columnVisibility, setColumnVisibility] =
-    useColumnVisibility('permissionSettings')
+    useColumnVisibility('permissionSetting')

  const [showFilterSidebar, setShowFilterSidebar] =
    useFilterSidebarVisibility('PermissionSettings')
@ -62,12 +62,12 @@ const PermissionSettingsList = () => {
              <Button>Actions</Button>
            </Dropdown>
            <ColumnViewButton
-              type='permissionSettings'
+              type='permissionSetting'
              loading={false}
              visibleState={columnVisibility}
              updateVisibleState={setColumnVisibility}
            />
-            <ExportListButton objectType='permissionSettings' />
+            <ExportListButton objectType='permissionSetting' />
          </Space>
          <Space>
            <SortSidebarButton
@ -88,7 +88,7 @@ const PermissionSettingsList = () => {
        <ObjectTable
          ref={tableRef}
          visibleColumns={columnVisibility}
-          type='permissionSettings'
+          type='permissionSetting'
          cards={viewMode === 'cards'}
          showFilterSidebar={showFilterSidebar}
          showSortSidebar={showSortSidebar}
@ -110,7 +110,7 @@ const PermissionSettingsList = () => {
        destroyOnHidden={true}
        width={700}
      >
-        <NewPermissionSettings
+        <NewPermissionSetting
          onOk={() => {
            setNewPermissionSettingsOpen(false)
            tableRef.current?.reload()
--- a/src/components/Dashboard/Management/PermissionSettings/NewPermissionSettings.jsx
+++ b/src/components/Dashboard/Management/PermissionSettings/NewPermissionSettings.jsx
@ -3,10 +3,10 @@ import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
 import WizardView from '../../common/WizardView'

-const NewPermissionSettings = ({ onOk, defaultValues }) => {
+const NewPermissionSetting = ({ onOk, defaultValues }) => {
  return (
    <NewObjectForm
-      type={'permissionSettings'}
+      type={'permissionSetting'}
      defaultValues={{ permissions: {}, ...defaultValues }}
    >
      {({ handleSubmit, submitLoading, objectData, formValid }) => {
@ -16,7 +16,7 @@ const NewPermissionSettings = ({ onOk, defaultValues }) => {
            key: 'required',
            content: (
              <ObjectInfo
-                type='permissionSettings'
+                type='permissionSetting'
                column={1}
                bordered={false}
                isEditing={true}
@ -31,7 +31,7 @@ const NewPermissionSettings = ({ onOk, defaultValues }) => {
            key: 'summary',
            content: (
              <ObjectInfo
-                type='permissionSettings'
+                type='permissionSetting'
                column={1}
                bordered={false}
                visibleProperties={{
@ -68,10 +68,10 @@ const NewPermissionSettings = ({ onOk, defaultValues }) => {
  )
 }

-NewPermissionSettings.propTypes = {
+NewPermissionSetting.propTypes = {
  onOk: PropTypes.func.isRequired,
  reset: PropTypes.bool,
  defaultValues: PropTypes.object
 }

-export default NewPermissionSettings
+export default NewPermissionSetting
--- a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx
+++ b/src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx
@ -26,17 +26,17 @@ import {
 } from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
-import PermissionSettingsIcon from '../../../Icons/PermissionSettingsIcon.jsx'
+import PermissionSettingIcon from '../../../Icons/PermissionSettingIcon.jsx'

-const PermissionSettingsInfo = () => {
+const PermissionSettingInfo = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const actionHandlerRef = useRef(null)
-  const permissionSettingsId = new URLSearchParams(location.search).get(
-    'permissionSettingsId'
+  const permissionSettingId = new URLSearchParams(location.search).get(
+    'permissionSettingId'
  )
  const [collapseState, updateCollapseState] = useCollapseState(
-    'PermissionSettingsInfo',
+    'PermissionSettingInfo',
    {
      info: true,
      notes: true,
@ -84,8 +84,8 @@ const PermissionSettingsInfo = () => {
          <Space size='small'>
            <Space size='small'>
              <ObjectActions
-                type='permissionSettings'
-                id={permissionSettingsId}
+                type='permissionSetting'
+                id={permissionSettingId}
                disabled={objectFormState.loading}
                objectData={objectFormState.objectData}
              />
@ -100,12 +100,12 @@ const PermissionSettingsInfo = () => {
                updateVisibleState={updateCollapseState}
              />
              <UserNotifierToggle
-                type='permissionSettings'
+                type='permissionSetting'
                objectData={objectFormState.objectData}
                disabled={objectFormState.loading}
              />
              <DocumentPrintButton
-                type='permissionSettings'
+                type='permissionSetting'
                objectData={objectFormState.objectData}
                disabled={objectFormState.loading}
              />
@ -138,8 +138,8 @@ const PermissionSettingsInfo = () => {
            />
            <ObjectTableNavigationButtons
              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={permissionSettingsId}
-              objectType='permissionSettings'
+              _id={permissionSettingId}
+              objectType='permissionSetting'
              showEndingDivider={true}
            />
          </Space>
@ -152,8 +152,8 @@ const PermissionSettingsInfo = () => {
              ref={actionHandlerRef}
            >
              <ObjectForm
-                id={permissionSettingsId}
-                type='permissionSettings'
+                id={permissionSettingId}
+                type='permissionSetting'
                style={{ height: '100%' }}
                ref={objectFormRef}
                setCurrentObject={true}
@ -176,7 +176,7 @@ const PermissionSettingsInfo = () => {
                        loading={loading}
                        indicator={<LoadingOutlined />}
                        isEditing={isEditing}
-                        type='permissionSettings'
+                        type='permissionSetting'
                        objectData={objectData}
                        visibleProperties={{
                          permissions: false
@ -185,7 +185,7 @@ const PermissionSettingsInfo = () => {
                    </InfoCollapse>
                    <InfoCollapse
                      title='Permissions Matrix'
-                      icon={<PermissionSettingsIcon />}
+                      icon={<PermissionSettingIcon />}
                      active={collapseState.matrix}
                      onToggle={(expanded) =>
                        updateCollapseState('matrix', expanded)
@ -196,7 +196,7 @@ const PermissionSettingsInfo = () => {
                        <Card>
                          <ObjectProperty
                            {...getModelProperty(
-                              'permissionSettings',
+                              'permissionSetting',
                              'permissions'
                            )}
                            isEditing={isEditing}
@ -219,8 +219,8 @@ const PermissionSettingsInfo = () => {
            >
              <Card>
                <NotesPanel
-                  _id={permissionSettingsId}
-                  type='permissionSettings'
+                  _id={permissionSettingId}
+                  type='permissionSetting'
                />
              </Card>
            </InfoCollapse>
@ -240,9 +240,9 @@ const PermissionSettingsInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                      getModelByName('permissionSettings').prefix +
+                      getModelByName('permissionSetting').prefix +
                      ':' +
-                      permissionSettingsId
+                      permissionSettingId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
@ -255,4 +255,4 @@ const PermissionSettingsInfo = () => {
  )
 }

-export default PermissionSettingsInfo
+export default PermissionSettingInfo
--- a/src/components/Dashboard/Management/UserGroups.jsx
+++ b/src/components/Dashboard/Management/UserGroups.jsx
@ -0,0 +1,123 @@
+import { useState, useRef } from 'react'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewUserGroup from './UserGroups/NewUserGroup'
+import ObjectTable from '../common/ObjectTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
+import SortSidebarButton from '../common/SortSidebarButton'
+import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
+import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
+import ColumnViewButton from '../common/ColumnViewButton'
+import ExportListButton from '../common/ExportListButton'
+
+const UserGroups = () => {
+  const [newUserGroupOpen, setNewUserGroupOpen] = useState(false)
+  const tableRef = useRef()
+
+  const [viewMode, setViewMode] = useViewMode('userGroup')
+
+  const [columnVisibility, setColumnVisibility] = useColumnVisibility('userGroup')
+
+  const [showFilterSidebar, setShowFilterSidebar] =
+    useFilterSidebarVisibility('UserGroups')
+
+  const [showSortSidebar, setShowSortSidebar] =
+    useSortSidebarVisibility('UserGroups')
+
+  const actionItems = {
+    items: [
+      {
+        label: 'New User Group',
+        key: 'newUserGroup',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newUserGroup') {
+        setNewUserGroupOpen(true)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Flex vertical={'true'} gap='large' className='h-100'>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+          <Space size='small'>
+            <Dropdown menu={actionItems}>
+              <Button>Actions</Button>
+            </Dropdown>
+            <ColumnViewButton
+              type='userGroup'
+              loading={false}
+              visibleState={columnVisibility}
+              updateVisibleState={setColumnVisibility}
+            />
+            <ExportListButton objectType='userGroup' />
+          </Space>
+          <Space>
+            <SortSidebarButton
+              active={showSortSidebar}
+              onClick={() => setShowSortSidebar(!showSortSidebar)}
+            />
+            <FilterSidebarButton
+              active={showFilterSidebar}
+              onClick={() => setShowFilterSidebar(!showFilterSidebar)}
+            />
+            <ObjectTableViewButton
+              viewMode={viewMode}
+              setViewMode={setViewMode}
+              showEndingDivider={true}
+            />
+          </Space>
+        </Flex>
+        <ObjectTable
+          ref={tableRef}
+          visibleColumns={columnVisibility}
+          type='userGroup'
+          cards={viewMode === 'cards'}
+          showFilterSidebar={showFilterSidebar}
+          showSortSidebar={showSortSidebar}
+          expandHeight={true}
+          saveFilterInSession={true}
+          saveFilterInUrl={true}
+          useFilterInSession={true}
+          useFilterInUrl={true}
+          saveSortInSession={true}
+          saveSortInUrl={true}
+          useSortInSession={true}
+          useSortInUrl={true}
+        />
+      </Flex>
+      <Modal
+        open={newUserGroupOpen}
+        onCancel={() => setNewUserGroupOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewUserGroup
+          onOk={() => {
+            setNewUserGroupOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newUserGroupOpen}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default UserGroups
--- a/src/components/Dashboard/Management/UserGroups/NewUserGroup.jsx
+++ b/src/components/Dashboard/Management/UserGroups/NewUserGroup.jsx
@ -0,0 +1,77 @@
+import PropTypes from 'prop-types'
+import ObjectInfo from '../../common/ObjectInfo'
+import NewObjectForm from '../../common/NewObjectForm'
+import WizardView from '../../common/WizardView'
+
+const NewUserGroup = ({ onOk, defaultValues }) => {
+  return (
+    <NewObjectForm
+      type={'userGroup'}
+      defaultValues={{ permissions: {}, ...defaultValues }}
+    >
+      {({ handleSubmit, submitLoading, objectData, formValid }) => {
+        const steps = [
+          {
+            title: 'Required',
+            key: 'required',
+            content: (
+              <ObjectInfo
+                type='userGroup'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                required={true}
+                objectData={objectData}
+                labelWidth={100}
+              />
+            )
+          },
+          {
+            title: 'Summary',
+            key: 'summary',
+            content: (
+              <ObjectInfo
+                type='userGroup'
+                column={1}
+                bordered={false}
+                visibleProperties={{
+                  _id: false,
+                  _reference: false,
+                  createdAt: false,
+                  updatedAt: false,
+                  permissions: false
+                }}
+                objectPropertyProps={{ scrollHeight: '320px' }}
+                labelWidth={130}
+                isEditing={false}
+                objectData={objectData}
+              />
+            )
+          }
+        ]
+        return (
+          <WizardView
+            steps={steps}
+            loading={submitLoading}
+            formValid={formValid}
+            title='New User Group'
+            onSubmit={async () => {
+              const result = await handleSubmit()
+              if (result) {
+                onOk()
+              }
+            }}
+          />
+        )
+      }}
+    </NewObjectForm>
+  )
+}
+
+NewUserGroup.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  reset: PropTypes.bool,
+  defaultValues: PropTypes.object
+}
+
+export default NewUserGroup
--- a/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
+++ b/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
@ -0,0 +1,265 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import useCollapseState from '../../hooks/useCollapseState'
+import NotesPanel from '../../common/NotesPanel'
+import InfoCollapse from '../../common/InfoCollapse'
+import ObjectInfo from '../../common/ObjectInfo'
+import ViewButton from '../../common/ViewButton'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm'
+import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
+import ActivityIndicator from '../../common/ActivityIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
+import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTable from '../../common/ObjectTable.jsx'
+import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
+import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
+import ObjectProperty from '../../common/ObjectProperty.jsx'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
+import PersonGroupIcon from '../../../Icons/PersonGroupIcon.jsx'
+import PersonIcon from '../../../Icons/PersonIcon.jsx'
+
+const UserGroupInfo = () => {
+  const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
+  const userGroupId = new URLSearchParams(location.search).get('userGroupId')
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'UserGroupInfo',
+    {
+      info: true,
+      permissions: true,
+      users: true,
+      notes: true,
+      auditLogs: false
+    }
+  )
+  const [objectFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    lock: null,
+    loading: false,
+    editDisabled: false,
+    objectData: {}
+  })
+
+  const actions = {
+    edit: () => {
+      objectFormRef?.current?.startEditing?.()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current?.cancelEditing?.()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current?.handleUpdate?.()
+      return true
+    },
+    delete: () => {
+      objectFormRef?.current?.handleDelete?.()
+      return true
+    }
+  }
+
+  return (
+    <Flex
+      gap='large'
+      vertical='true'
+      style={{ maxHeight: '100%', minHeight: 0 }}
+    >
+      <Flex justify={'space-between'}>
+        <Space size='small'>
+          <Space size='small'>
+            <ObjectActions
+              type='userGroup'
+              id={userGroupId}
+              disabled={objectFormState.loading}
+              objectData={objectFormState.objectData}
+            />
+            <ViewButton
+              disabled={objectFormState.loading}
+              items={[
+                { key: 'info', label: 'User Group Information' },
+                { key: 'users', label: 'Users' },
+                { key: 'notes', label: 'Notes' },
+                { key: 'auditLogs', label: 'Audit Logs' }
+              ]}
+              visibleState={collapseState}
+              updateVisibleState={updateCollapseState}
+            />
+            <UserNotifierToggle
+              type='userGroup'
+              objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
+            />
+            <DocumentPrintButton
+              type='userGroup'
+              objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
+            />
+          </Space>
+          <ActivityIndicator
+            activities={objectFormState.activities}
+            showStartingDivider={true}
+          />
+        </Space>
+        <Space>
+          <EditButtons
+            isEditing={objectFormState.isEditing}
+            handleUpdate={() => {
+              actionHandlerRef.current.callAction('finishEdit')
+            }}
+            cancelEditing={() => {
+              actionHandlerRef.current.callAction('cancelEdit')
+            }}
+            startEditing={() => {
+              actionHandlerRef.current.callAction('edit')
+            }}
+            editLoading={objectFormState.editLoading}
+            formValid={objectFormState.formValid}
+            disabled={
+              objectFormState.beingEditedByOther ||
+              objectFormState.loading ||
+              objectFormState.editDisabled
+            }
+            loading={objectFormState.editLoading}
+          />
+          <ObjectTableNavigationButtons
+            disabled={objectFormState.loading || objectFormState.isEditing}
+            _id={userGroupId}
+            objectType='userGroup'
+            showEndingDivider={true}
+          />
+        </Space>
+      </Flex>
+      <ScrollBox>
+        <Flex vertical gap={'large'}>
+          <ActionHandler
+            actions={actions}
+            loading={objectFormState.loading}
+            ref={actionHandlerRef}
+          >
+            <InfoCollapse
+              title='User Group Information'
+              icon={<InfoCircleIcon />}
+              active={collapseState.info}
+              onToggle={(expanded) => updateCollapseState('info', expanded)}
+              collapseKey='info'
+            >
+              <ObjectForm
+                id={userGroupId}
+                type='userGroup'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                setCurrentObject={true}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => (
+                  <ObjectInfo
+                    loading={loading}
+                    indicator={<LoadingOutlined />}
+                    isEditing={isEditing}
+                    type='userGroup'
+                    labelWidth='190px'
+                    objectData={objectData}
+                    visibleProperties={{
+                      permissions: false
+                    }}
+                  />
+                )}
+              </ObjectForm>
+            </InfoCollapse>
+          </ActionHandler>
+          <InfoCollapse
+            title='Permissions Matrix'
+            icon={<PersonGroupIcon />}
+            active={collapseState.permissions}
+            onToggle={(expanded) =>
+              updateCollapseState('permissions', expanded)
+            }
+            collapseKey='permissions'
+          >
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
+                <ObjectProperty
+                  {...getModelProperty('userGroup', 'permissions')}
+                  isEditing={objectFormState.isEditing}
+                  objectData={objectFormState.objectData}
+                  loading={objectFormState.loading}
+                />
+              </Card>
+            </Spin>
+          </InfoCollapse>
+          <InfoCollapse
+            title='Users'
+            icon={<PersonIcon />}
+            active={collapseState.users}
+            onToggle={(expanded) => updateCollapseState('users', expanded)}
+            collapseKey='users'
+          >
+            {!userGroupId ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='user'
+                masterFilter={{
+                  groups: getModelByName('userGroup').prefix + ':' + userGroupId
+                }}
+                visibleColumns={{ groups: false }}
+              />
+            )}
+          </InfoCollapse>
+          <InfoCollapse
+            title='Notes'
+            icon={<NoteIcon />}
+            active={collapseState.notes}
+            onToggle={(expanded) => updateCollapseState('notes', expanded)}
+            collapseKey='notes'
+          >
+            <Card>
+              <NotesPanel _id={userGroupId} type='userGroup' />
+            </Card>
+          </InfoCollapse>
+          <InfoCollapse
+            title='Audit Logs'
+            icon={<AuditLogIcon />}
+            active={collapseState.auditLogs}
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
+            collapseKey='auditLogs'
+          >
+            {objectFormState.loading ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='auditLog'
+                masterFilter={{
+                  parent: getModelByName('userGroup').prefix + ':' + userGroupId
+                }}
+                visibleColumns={{ _id: false, parent: false }}
+              />
+            )}
+          </InfoCollapse>
+        </Flex>
+      </ScrollBox>
+    </Flex>
+  )
+}
+
+export default UserGroupInfo
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@ -187,6 +187,7 @@ const UserInfo = () => {
                      isEditing={isEditing}
                      type='user'
                      objectData={objectData}
+                      labelWidth='190px'
                      visibleProperties={{
                        profileImage: false,
                        permissions: false
--- a/src/components/Dashboard/common/DashboardBreadcrumb.jsx
+++ b/src/components/Dashboard/common/DashboardBreadcrumb.jsx
@ -14,8 +14,6 @@ const breadcrumbNameMap = {
  developer: 'Developer',
  finance: 'Finance',
  sales: 'Sales',
-  productcategories: 'Product Categories',
-  permissionSettings: 'Permission Settings',
  overview: 'Overview',
  info: 'Info',
  design: 'Design',
--- a/src/components/Dashboard/common/NewObjectForm.jsx
+++ b/src/components/Dashboard/common/NewObjectForm.jsx
@ -3,7 +3,7 @@ import { Form } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { useMessageContext } from '../context/MessageContext'
 import PropTypes from 'prop-types'
-import merge from 'lodash/merge'
+import mergeWith from 'lodash/mergeWith'
 import set from 'lodash/set'
 import { getModelByName } from '../../../database/ObjectModels'

@ -18,6 +18,15 @@ const buildObjectFromEntries = (entries = []) => {
  }, {})
 }

+const arrayReplaceCustomizer = (objValue, srcValue, key) => {
+  if (Array.isArray(srcValue)) {
+    return srcValue
+  }
+  if (key === 'permissions' && srcValue !== undefined) {
+    return srcValue
+  }
+}
+
 /**
 * NewObjectForm is a reusable form component for creating new objects.
 * It handles form validation, submission, and error handling logic.
@ -164,9 +173,16 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
      // Calculate computed values for initial data
      const computedEntries = calculateComputedValues(defaultValues, model)
      const computedValuesObject = buildObjectFromEntries(computedEntries)
-      const initialFormData = merge({}, defaultValues, computedValuesObject)
+      const initialFormData = mergeWith(
+        {},
+        defaultValues,
+        computedValuesObject,
+        arrayReplaceCustomizer
+      )
      form.setFieldsValue(initialFormData)
-      setObjectData((prev) => merge({}, prev, initialFormData))
+      setObjectData((prev) =>
+        mergeWith({}, prev, initialFormData, arrayReplaceCustomizer)
+      )
      return validateForm()
    }
  }, [form, defaultValues, calculateComputedValues, model, validateForm])
@ -181,7 +197,12 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
      setSubmitLoading(true)
      const computedEntries = calculateComputedValues(objectData, model)
      const computedValuesObject = buildObjectFromEntries(computedEntries)
-      const computedObjectData = merge({}, objectData, computedValuesObject)
+      const computedObjectData = mergeWith(
+        {},
+        objectData,
+        computedValuesObject,
+        arrayReplaceCustomizer
+      )
      const newObject = await createObject(type, computedObjectData)
      showSuccess('Object created successfully')
      return newObject
@ -207,7 +228,12 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
      style={style}
      onValuesChange={(_changedValues, allFormValues) => {
        // Calculate computed values based on current form data
-        const currentFormData = merge({}, objectData || {}, allFormValues)
+        const currentFormData = mergeWith(
+          {},
+          objectData || {},
+          allFormValues,
+          arrayReplaceCustomizer
+        )
        const computedEntries = calculateComputedValues(currentFormData, model)

        if (Array.isArray(computedEntries) && computedEntries.length > 0) {
@ -229,9 +255,14 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {

        // Merge all values (user input + computed values)
        const computedValuesObject = buildObjectFromEntries(computedEntries)
-        const allValues = merge({}, allFormValues, computedValuesObject)
+        const allValues = mergeWith(
+          {},
+          allFormValues,
+          computedValuesObject,
+          arrayReplaceCustomizer
+        )
        setObjectData((prev) => {
-          return merge({}, prev, allValues)
+          return mergeWith({}, prev, allValues, arrayReplaceCustomizer)
        })
      }}
    >
--- a/src/components/Dashboard/common/ObjectForm.jsx
+++ b/src/components/Dashboard/common/ObjectForm.jsx
@ -20,10 +20,13 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { useActions } from '../context/ActionsContext'

-const arrayReplaceCustomizer = (objValue, srcValue) => {
+const arrayReplaceCustomizer = (objValue, srcValue, key) => {
  if (Array.isArray(srcValue)) {
    return srcValue
  }
+  if (key === 'permissions' && srcValue !== undefined) {
+    return srcValue
+  }
 }

 const getUserId = (user) => user?._id || user
@ -339,10 +342,11 @@ const ObjectForm = forwardRef(
            model
          )
          const computedValuesObject = buildObjectFromEntries(computedEntries)
-          const resetFormData = merge(
+          const resetFormData = mergeWith(
            {},
            serverObjectData.current,
-            computedValuesObject
+            computedValuesObject,
+            arrayReplaceCustomizer
          )
          setIsEditing(false)
          isEditingRef.current = false
@ -470,7 +474,12 @@ const ObjectForm = forwardRef(
        // Calculate and set computed values on initial load
        const computedEntries = calculateComputedValues(data, model)
        const computedValuesObject = buildObjectFromEntries(computedEntries)
-        const initialFormData = merge({}, data, computedValuesObject)
+        const initialFormData = mergeWith(
+          {},
+          data,
+          computedValuesObject,
+          arrayReplaceCustomizer
+        )
        setObjectData({ ...initialFormData, _isEditing: isEditingRef.current })
        form.setFieldsValue(initialFormData)
        setFetchLoading(false)
@ -828,9 +837,9 @@ const ObjectForm = forwardRef(
            const mergedFormValues = mergeWith(
              {},
              allFormValues,
+              computedValuesObject,
              arrayReplaceCustomizer
            )
-            merge(mergedFormValues, computedValuesObject)

            mergedFormValues._isEditing = isEditingRef.current

--- a/src/components/Dashboard/common/PermissionCheckbox.jsx
+++ b/src/components/Dashboard/common/PermissionCheckbox.jsx
@ -11,11 +11,18 @@ const ICON_STYLE = {
 const PermissionCheckbox = ({
  checked = false,
  indeterminate = false,
+  mixed = false,
  disabled = false,
  onChange
 }) => {
  const { token } = theme.useToken()
-  const state = indeterminate ? 'inherit' : checked ? 'allow' : 'deny'
+  const state = mixed
+    ? 'mixed'
+    : indeterminate
+      ? 'inherit'
+      : checked
+        ? 'allow'
+        : 'deny'

  return (
    <button
@ -23,7 +30,7 @@ const PermissionCheckbox = ({
      className='permission-checkbox'
      data-state={state}
      disabled={disabled}
-      aria-checked={indeterminate ? 'mixed' : checked}
+      aria-checked={mixed || indeterminate ? 'mixed' : checked}
      role='checkbox'
      onClick={(event) => {
        if (disabled || typeof onChange !== 'function') return
@ -46,6 +53,12 @@ const PermissionCheckbox = ({
      >
        <XMarkIcon style={ICON_STYLE} />
      </span>
+      <span
+        className='permission-checkbox-face permission-checkbox-mixed'
+        style={{ backgroundColor: token.colorPrimary }}
+      >
+        <span className='permission-checkbox-square' />
+      </span>
    </button>
  )
 }
@ -53,6 +66,7 @@ const PermissionCheckbox = ({
 PermissionCheckbox.propTypes = {
  checked: PropTypes.bool,
  indeterminate: PropTypes.bool,
+  mixed: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
 }
--- a/src/components/Icons/PermissionSettingsIcon.jsx
+++ b/src/components/Icons/PermissionSettingsIcon.jsx
@ -1,8 +1,8 @@
 import Icon from '@ant-design/icons'
 import CustomIconSvg from '../../../assets/icons/permissionsettingsicon.svg?react'

-const PermissionSettingsIcon = (props) => (
+const PermissionSettingIcon = (props) => (
  <Icon component={CustomIconSvg} {...props} />
 )

-export default PermissionSettingsIcon
+export default PermissionSettingIcon
--- a/src/components/Icons/PersonGroupIcon.jsx
+++ b/src/components/Icons/PersonGroupIcon.jsx
@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/persongroupicon.svg?react'
+
+const PersonGroupIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default PersonGroupIcon
--- a/src/components/Icons/sidebarIconMap.jsx
+++ b/src/components/Icons/sidebarIconMap.jsx
@ -38,7 +38,8 @@ import SettingsIcon from './SettingsIcon'
 import AuditLogIcon from './AuditLogIcon'
 import DeveloperIcon from './DeveloperIcon'
 import PersonIcon from './PersonIcon'
-import PermissionSettingsIcon from './PermissionSettingsIcon'
+import PersonGroupIcon from './PersonGroupIcon'
+import PermissionSettingIcon from './PermissionSettingIcon'
 import HostIcon from './HostIcon'
 import DocumentPrinterIcon from './DocumentPrinterIcon'
 import DocumentTemplateIcon from './DocumentTemplateIcon'
@ -96,7 +97,8 @@ const sidebarIconMap = {
  auditLog: <AuditLogIcon />,
  developer: <DeveloperIcon />,
  person: <PersonIcon />,
-  permissionSettings: <PermissionSettingsIcon />,
+  userGroup: <PersonGroupIcon />,
+  permissionSetting: <PermissionSettingIcon />,
  host: <HostIcon />,
  documentPrinter: <DocumentPrinterIcon />,
  documentTemplate: <DocumentTemplateIcon />,
--- a/src/database/ObjectModels.js
+++ b/src/database/ObjectModels.js
@ -31,7 +31,8 @@ import { OrderItem } from './models/OrderItem'
 import { Shipment } from './models/Shipment'
 import { AuditLog } from './models/AuditLog'
 import { User } from './models/User'
-import { PermissionSettings } from './models/PermissionSettings.js'
+import { UserGroup } from './models/UserGroup.js'
+import { PermissionSetting } from './models/PermissionSetting.js'
 import { AppPassword } from './models/AppPassword.js'
 import { NoteType } from './models/NoteType'
 import { Note } from './models/Note'
@ -84,7 +85,8 @@ export const objectModels = [
  Shipment,
  AuditLog,
  User,
-  PermissionSettings,
+  UserGroup,
+  PermissionSetting,
  AppPassword,
  NoteType,
  Note,
@ -138,7 +140,8 @@ export {
  Shipment,
  AuditLog,
  User,
-  PermissionSettings,
+  UserGroup,
+  PermissionSetting,
  AppPassword,
  NoteType,
  Note,
--- a/src/database/models/PermissionSettings.js
+++ b/src/database/models/PermissionSettings.js
@ -1,24 +1,24 @@
 import { createElement, lazy } from 'react'

-const PermissionSettingsInfo = lazy(
+const PermissionSettingInfo = lazy(
  () =>
-    import('../../components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo')
+    import('../../components/Dashboard/Management/PermissionSettings/PermissionSettingInfo')
 )
-import PermissionSettingsIcon from '../../components/Icons/PermissionSettingsIcon'
+import PermissionSettingIcon from '../../components/Icons/PermissionSettingIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
 import BinIcon from '../../components/Icons/BinIcon'

-export const PermissionSettings = {
-  name: 'permissionSettings',
-  label: 'Permission Settings',
+export const PermissionSetting = {
+  name: 'permissionSetting',
+  label: 'Permission Setting',
  labelPlural: 'Permission Settings',
  url: '/dashboard/management/permissionsettings',
  prefix: 'PMS',
  endpoint: 'permissionsettings',
-  icon: PermissionSettingsIcon,
+  icon: PermissionSettingIcon,
  actions: [
    {
      name: 'info',
@ -73,7 +73,7 @@ export const PermissionSettings = {
  pages: [
    {
      name: 'info',
-      content: () => createElement(PermissionSettingsInfo)
+      content: () => createElement(PermissionSettingInfo)
    }
  ],
  columns: ['_reference', 'name', 'createdAt', 'updatedAt'],
@ -85,7 +85,7 @@ export const PermissionSettings = {
      label: 'ID',
      columnFixed: 'left',
      type: 'id',
-      objectType: 'permissionSettings',
+      objectType: 'permissionSetting',
      showCopy: true,
      columnWidth: 140
    },
@ -101,7 +101,7 @@ export const PermissionSettings = {
      label: 'Reference',
      type: 'reference',
      columnFixed: 'left',
-      objectType: 'permissionSettings',
+      objectType: 'permissionSetting',
      showCopy: true,
      readOnly: true,
      columnWidth: 180
--- a/src/database/models/User.js
+++ b/src/database/models/User.js
@ -13,6 +13,7 @@ import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
+import { calculateUserPermissions } from '../permissions.js'

 export const User = {
  name: 'user',
@ -92,6 +93,7 @@ export const User = {
    'name',
    'username',
    'email',
+    'groups',
    'permissionSettings',
    'createdAt',
    'updatedAt'
@ -102,6 +104,7 @@ export const User = {
    'firstName',
    'lastName',
    'email',
+    'groups',
    'permissionSettings',
    'createdAt',
    'updatedAt',
@ -178,11 +181,19 @@ export const User = {
      columnWidth: 300,
      type: 'email'
    },
+    {
+      name: 'groups',
+      label: 'Groups',
+      type: 'objectList',
+      objectType: 'userGroup',
+      span: 2,
+      columnWidth: 250
+    },
    {
      name: 'permissionSettings',
      label: 'Permission Settings',
      type: 'objectList',
-      objectType: 'permissionSettings',
+      objectType: 'permissionSetting',
      span: 2,
      columnWidth: 250
    },
@ -193,7 +204,8 @@ export const User = {
      inherit: false,
      readOnly: true,
      span: 2,
-      columnWidth: 200
+      columnWidth: 200,
+      value: calculateUserPermissions
    },
    {
      name: 'profileImage',
--- a/src/database/models/UserGroup.js
+++ b/src/database/models/UserGroup.js
@ -0,0 +1,142 @@
+import { createElement, lazy } from 'react'
+
+const UserGroupInfo = lazy(
+  () => import('../../components/Dashboard/Management/UserGroups/UserGroupInfo')
+)
+import PersonGroupIcon from '../../components/Icons/PersonGroupIcon'
+import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
+import EditIcon from '../../components/Icons/EditIcon'
+import CheckIcon from '../../components/Icons/CheckIcon'
+import XMarkIcon from '../../components/Icons/XMarkIcon'
+import BinIcon from '../../components/Icons/BinIcon'
+import { calculateUserGroupPermissions } from '../permissions.js'
+
+export const UserGroup = {
+  name: 'userGroup',
+  label: 'User Group',
+  labelPlural: 'User Groups',
+  url: '/dashboard/management/usergroups',
+  prefix: 'UGP',
+  icon: PersonGroupIcon,
+  actions: [
+    {
+      name: 'info',
+      type: 'page',
+      pageName: 'info',
+      label: 'Info',
+      default: true,
+      row: true,
+      icon: InfoCircleIcon
+    },
+    {
+      name: 'edit',
+      type: 'page',
+      pageName: 'info',
+      label: 'Edit',
+      row: true,
+      icon: EditIcon,
+      visible: (objectData) => {
+        return !(objectData?._isEditing && objectData?._isEditing == true)
+      }
+    },
+    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    {
+      name: 'finishEdit',
+      label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: CheckIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      type: 'page',
+      pageName: 'info',
+      label: 'Delete',
+      icon: BinIcon,
+      danger: true
+    }
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(UserGroupInfo)
+    }
+  ],
+  columns: ['_reference', 'name', 'permissionSettings', 'createdAt', 'updatedAt'],
+  filters: ['name', 'permissionSettings', 'createdAt', 'updatedAt', '_reference'],
+  sorters: ['name', 'createdAt', '_id', 'updatedAt'],
+  properties: [
+    {
+      name: '_id',
+      label: 'ID',
+      columnFixed: 'left',
+      type: 'id',
+      objectType: 'userGroup',
+      showCopy: true,
+      columnWidth: 140
+    },
+    {
+      name: 'createdAt',
+      label: 'Created At',
+      type: 'dateTime',
+      readOnly: true,
+      columnWidth: 175
+    },
+    {
+      name: '_reference',
+      label: 'Reference',
+      columnFixed: 'left',
+      type: 'reference',
+      objectType: 'userGroup',
+      showCopy: true,
+      readOnly: true,
+      columnWidth: 180
+    },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true,
+      columnWidth: 175
+    },
+    {
+      name: 'name',
+      label: 'Name',
+      columnFixed: 'left',
+      required: true,
+      type: 'text',
+      columnWidth: 200
+    },
+    {
+      name: 'permissionSettings',
+      label: 'Permission Settings',
+      type: 'objectList',
+      objectType: 'permissionSetting',
+      span: 2,
+      columnWidth: 250
+    },
+    {
+      name: 'permissions',
+      label: 'Permissions',
+      type: 'permissionsMatrix',
+      inherit: false,
+      readOnly: true,
+      span: 2,
+      columnWidth: 200,
+      value: calculateUserGroupPermissions
+    }
+  ]
+}
--- a/src/database/permissions.js
+++ b/src/database/permissions.js
@ -0,0 +1,38 @@
+export const applyPermissionSettingsList = (settingsList = []) => {
+  const permissions = {}
+
+  for (const setting of settingsList) {
+    const matrix = setting?.permissions
+    if (!matrix || typeof matrix !== 'object' || Array.isArray(matrix)) {
+      continue
+    }
+
+    for (const [modelName, actions] of Object.entries(matrix)) {
+      if (!actions || typeof actions !== 'object' || Array.isArray(actions)) {
+        continue
+      }
+      if (!permissions[modelName]) {
+        permissions[modelName] = {}
+      }
+      for (const [actionName, value] of Object.entries(actions)) {
+        if (value === true || value === false) {
+          permissions[modelName][actionName] = value
+        }
+      }
+      if (Object.keys(permissions[modelName]).length === 0) {
+        delete permissions[modelName]
+      }
+    }
+  }
+
+  return permissions
+}
+
+export const calculateUserPermissions = (objectData = {}) =>
+  applyPermissionSettingsList([
+    ...(objectData.groups || []),
+    ...(objectData.permissionSettings || [])
+  ])
+
+export const calculateUserGroupPermissions = (objectData = {}) =>
+  applyPermissionSettingsList(objectData.permissionSettings)
--- a/src/database/sidebars/management.js
+++ b/src/database/sidebars/management.js
@ -125,9 +125,15 @@ const managementSidebarItems = [
    label: 'Users',
    path: '/dashboard/management/users'
  },
+  {
+    key: 'userGroups',
+    iconKey: 'userGroup',
+    label: 'User Groups',
+    path: '/dashboard/management/usergroups'
+  },
  {
    key: 'permissionSettings',
-    iconKey: 'permissionSettings',
+    iconKey: 'permissionSetting',
    label: 'Permission Settings',
    path: '/dashboard/management/permissionsettings'
  },
--- a/src/routes/ManagementRoutes.jsx
+++ b/src/routes/ManagementRoutes.jsx
@ -43,6 +43,9 @@ const NoteInfo = lazy(
  () => import('../components/Dashboard/Management/Notes/NoteInfo.jsx')
 )
 const Users = lazy(() => import('../components/Dashboard/Management/Users.jsx'))
+const UserGroups = lazy(
+  () => import('../components/Dashboard/Management/UserGroups.jsx')
+)
 const PermissionSettings = lazy(
  () => import('../components/Dashboard/Management/PermissionSettings.jsx')
 )
@ -95,6 +98,11 @@ const ManagementRoutes = [
  <Route key='vendors' path='management/vendors' element={<Vendors />} />,
  <Route key='hosts' path='management/hosts' element={<Hosts />} />,
  <Route key='users' path='management/users' element={<Users />} />,
+  <Route
+    key='usergroups'
+    path='management/usergroups'
+    element={<UserGroups />}
+  />,
  <Route
    key='permissionsettings'
    path='management/permissionsettings'