permission sidebar

This commit is contained in:
hamid zarghami
2025-12-27 09:51:58 +03:30
parent 0efaa5c5af
commit 23c8e973f2
4 changed files with 299 additions and 131 deletions
+161 -131
View File
@@ -13,11 +13,15 @@ import OrdersSubMenu from './components/OrdersSubMenu'
import CustomersSubMenu from './components/CustomersSubMenu'
import DiscountSubMenu from './components/DiscountSubMenu'
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
import { usePermissions } from '@/hooks/usePermissions'
import { PermissionEnum } from '@/pages/roles/enum/Enum'
const SideBar: FC = () => {
const { t } = useTranslation('global')
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
const location = useLocation()
const { checkPermission } = usePermissions()
const isActive = (name: string) => {
return location.pathname.includes(name)
@@ -77,113 +81,138 @@ const SideBar: FC = () => {
activeName=''
/>
<SideBarItem
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.orders')}
isActive={isActive('orders')}
link={Pages.orders.list}
name='orders'
activeName='orders'
/>
{checkPermission(PermissionEnum.MANAGE_ORDERS) && (
<SideBarItem
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.orders')}
isActive={isActive('orders')}
link={Pages.orders.list}
name='orders'
activeName='orders'
/>
)}
<SideBarItem
icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.foods')}
isActive={isActive('foods')}
link={Pages.foods.list}
activeName='foods'
/>
{checkPermission(PermissionEnum.MANAGE_FOODS) && (
<SideBarItem
icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.foods')}
isActive={isActive('foods')}
link={Pages.foods.list}
activeName='foods'
/>
)}
<SideBarItem
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.schedule')}
isActive={isActive('schedule')}
link={Pages.schedule.list}
name='schedule'
activeName='schedule'
/>
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
<SideBarItem
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.schedule')}
isActive={isActive('schedule')}
link={Pages.schedule.list}
name='schedule'
activeName='schedule'
/>
)}
<SideBarItem
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.payment_methods')}
isActive={isActive('payment_methods')}
link={Pages.payment_methods.list}
name='payment_methods'
activeName='payment_methods'
/>
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
<SideBarItem
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.payment_methods')}
isActive={isActive('payment_methods')}
link={Pages.payment_methods.list}
name='payment_methods'
activeName='payment_methods'
/>
)}
{checkPermission(PermissionEnum.MANAGE_USERS) && (
<SideBarItem
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.customers')}
isActive={isActive('customers')}
link={Pages.customers.list}
name='customers'
activeName='customers'
/>
)}
<SideBarItem
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.customers')}
isActive={isActive('customers')}
link={Pages.customers.list}
name='customers'
activeName='customers'
/>
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
<SideBarItem
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.reviews')}
isActive={isActive('reviews')}
link={Pages.reviews.list}
name='reviews'
activeName='reviews'
/>
)}
<SideBarItem
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.reviews')}
isActive={isActive('reviews')}
link={Pages.reviews.list}
name='reviews'
activeName='reviews'
/>
{checkPermission(PermissionEnum.MANAGE_PAGER) && (
<SideBarItem
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.pagers')}
isActive={isActive('pagers')}
link={Pages.pagers.list}
name='pagers'
activeName='pagers'
/>
)}
<SideBarItem
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.pagers')}
isActive={isActive('pagers')}
link={Pages.pagers.list}
name='pagers'
activeName='pagers'
/>
{checkPermission(PermissionEnum.MANAGE_ADMINS) && (
<SideBarItem
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.admins')}
isActive={isActive('admins')}
link={Pages.admins.list}
name='admins'
activeName='admins'
/>
)}
<SideBarItem
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.admins')}
isActive={isActive('admins')}
link={Pages.admins.list}
name='admins'
activeName='admins'
/>
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
<SideBarItem
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.shipment_methods')}
isActive={isActive('shipment_methods')}
link={Pages.shipment_methods.list}
name='shipment_methods'
activeName='shipment_methods'
/>
)}
<SideBarItem
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.shipment_methods')}
isActive={isActive('shipment_methods')}
link={Pages.shipment_methods.list}
name='shipment_methods'
activeName='shipment_methods'
/>
{checkPermission(PermissionEnum.MANAGE_COUPONS) && (
<SideBarItem
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.discount')}
isActive={isActive('discounts')}
link={Pages.coupons.list}
name='discounts'
activeName='discounts'
/>
)}
<SideBarItem
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.discount')}
isActive={isActive('discounts')}
link={Pages.coupons.list}
name='discounts'
activeName='discounts'
/>
{checkPermission(PermissionEnum.MANAGE_ROLES) && (
<SideBarItem
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.roles')}
isActive={isActive('roles')}
link={Pages.roles.list}
name='roles'
activeName='roles'
/>
)}
<SideBarItem
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.roles')}
isActive={isActive('roles')}
link={Pages.roles.list}
name='roles'
activeName='roles'
/>
<SideBarItem
icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.notifications')}
isActive={isActive('notifications')}
link={Pages.notifications.list}
name='notifications'
activeName='notifications'
/>
{
checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
<SideBarItem
icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.notifications')}
isActive={isActive('notifications')}
link={Pages.notifications.list}
name='notifications'
activeName='notifications'
/>
)
}
</div>
<div className={clx(
@@ -194,46 +223,47 @@ const SideBar: FC = () => {
</div>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<NotificationStatus variant={isActive('announcements') ? 'Bold' : 'Outline'} color={isActive('announcements') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.announcements')}
isActive={isActive('announcements')}
link={Pages.announcements.list}
activeName='announcements'
/>
<SideBarItem
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.statistics')}
isActive={isActive('statistics')}
link={Pages.statistics.list}
activeName='statistics'
/>
<SideBarItem
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.comments')}
isActive={isActive('comments')}
link={Pages.comments.list}
activeName='comments'
/>
{checkPermission(PermissionEnum.VIEW_REPORTS) && (
<SideBarItem
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.statistics')}
isActive={isActive('statistics')}
link={Pages.statistics.list}
activeName='statistics'
/>
)}
{checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
<SideBarItem
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.comments')}
isActive={isActive('comments')}
link={Pages.comments.list}
activeName='comments'
/>
)}
<SideBarItem
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.reports')}
isActive={isActive('reports')}
link={Pages.reports.list}
activeName='reports'
/>
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
<SideBarItem
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.reports')}
isActive={isActive('reports')}
link={Pages.reports.list}
activeName='reports'
/>
)}
</div>
<div className='flex-1 flex flex-col justify-end mt-14'>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.setting')}
isActive={isActive('setting')}
link={Pages.setting}
activeName='settings'
/>
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
<SideBarItem
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.setting')}
isActive={isActive('setting')}
link={Pages.setting}
activeName='settings'
/>
)}
</div>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem