create rolelist

src/shared/SideBar.tsx

@@ -14,6 +14,7 @@ import TransactionsSubMenu from './components/TransactionsSubMenu'
 import ReceiptSubMenu from './components/ReceiptSubMenu'
 import CustomerSubMenu from './components/CustomerSubMenu'
 import TicketSubMenu from './components/TicketSubMenu'
+import UsersSubMenu from './components/UsersSubMenu'
 
 const SideBar: FC = () => {
 
@@ -260,7 +261,9 @@ const SideBar: FC = () => {
                                         <CustomerSubMenu />
                                         : subMenuName === 'tickets' ?
                                             <TicketSubMenu />
-                                            : null
+                                            : subMenuName === 'users' ?
+                                                <UsersSubMenu />
+                                                : null
                     }
                 </div>
             }

src/shared/components/UsersSubMenu.tsx

@@ -0,0 +1,54 @@
+import { Profile } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import SubMenuItem from './SubMenuItem'
+import { Pages } from '../../config/Pages'
+
+const UsersSubMenu: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    return (
+        <div className='py-12'>
+            <div className='flex gap-3 items-center border-b pb-10 px-6'>
+                <Profile
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.users')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('submenu.user_list')}
+                    isActive={isActive('list')}
+                    link={Pages.users.list}
+                />
+                <SubMenuItem
+                    title={t('submenu.add_user')}
+                    isActive={isActive('create')}
+                    link={Pages.users.create}
+                />
+                <SubMenuItem
+                    title={t('submenu.role_list')}
+                    isActive={isActive('all')}
+                    link={Pages.users.roleList}
+                />
+                <SubMenuItem
+                    title={t('submenu.role_create')}
+                    isActive={isActive('roles-add')}
+                    link={Pages.users.roleCreate}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default UsersSubMenu