permission sidebar
This commit is contained in:
hamid zarghami
@@ -0,0 +1,59 @@
|
||||
import type { PermissionType } from '@/pages/roles/types/Types';
|
||||
|
||||
/**
|
||||
* Checks if user has a specific permission
|
||||
* @param permissions - Array of user permissions
|
||||
* @param permissionName - Name of the permission to check
|
||||
* @returns boolean indicating if user has the permission
|
||||
*/
|
||||
export const hasPermission = (
|
||||
permissions: PermissionType[] | undefined,
|
||||
permissionName: string
|
||||
): boolean => {
|
||||
if (!permissions || permissions.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return permissions.some(
|
||||
(permission) => permission.name === permissionName
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if user has any of the specified permissions
|
||||
* @param permissions - Array of user permissions
|
||||
* @param permissionNames - Array of permission names to check
|
||||
* @returns boolean indicating if user has at least one of the permissions
|
||||
*/
|
||||
export const hasAnyPermission = (
|
||||
permissions: PermissionType[] | undefined,
|
||||
permissionNames: string[]
|
||||
): boolean => {
|
||||
if (!permissions || permissions.length === 0 || permissionNames.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return permissionNames.some((permissionName) =>
|
||||
hasPermission(permissions, permissionName)
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if user has all of the specified permissions
|
||||
* @param permissions - Array of user permissions
|
||||
* @param permissionNames - Array of permission names to check
|
||||
* @returns boolean indicating if user has all of the permissions
|
||||
*/
|
||||
export const hasAllPermissions = (
|
||||
permissions: PermissionType[] | undefined,
|
||||
permissionNames: string[]
|
||||
): boolean => {
|
||||
if (!permissions || permissions.length === 0 || permissionNames.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return permissionNames.every((permissionName) =>
|
||||
hasPermission(permissions, permissionName)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { useMemo } from "react";
|
||||
import { useGetPermissions } from "@/pages/roles/hooks/useRolesData";
|
||||
import {
|
||||
hasPermission,
|
||||
hasAnyPermission,
|
||||
hasAllPermissions,
|
||||
} from "@/helpers/permissions";
|
||||
|
||||
/**
|
||||
* Custom hook for managing user permissions
|
||||
* @returns Object with permissions data and helper functions
|
||||
*/
|
||||
export const usePermissions = () => {
|
||||
const { data: permissionsResponse, isLoading, error } = useGetPermissions();
|
||||
|
||||
const permissions = useMemo(() => {
|
||||
return permissionsResponse?.data || [];
|
||||
}, [permissionsResponse]);
|
||||
|
||||
/**
|
||||
* Checks if user has a specific permission
|
||||
*/
|
||||
const checkPermission = (permissionName: string): boolean => {
|
||||
return hasPermission(permissions, permissionName);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if user has any of the specified permissions
|
||||
*/
|
||||
const checkAnyPermission = (permissionNames: string[]): boolean => {
|
||||
return hasAnyPermission(permissions, permissionNames);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if user has all of the specified permissions
|
||||
*/
|
||||
const checkAllPermissions = (permissionNames: string[]): boolean => {
|
||||
return hasAllPermissions(permissions, permissionNames);
|
||||
};
|
||||
|
||||
return {
|
||||
permissions,
|
||||
isLoading,
|
||||
error,
|
||||
checkPermission,
|
||||
checkAnyPermission,
|
||||
checkAllPermissions,
|
||||
hasPermission: checkPermission,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
export const enum PermissionEnum {
|
||||
MANAGE_PAGER = "manage_pager",
|
||||
// Food Management
|
||||
MANAGE_FOODS = "manage_foods",
|
||||
MANAGE_CATEGORIES = "manage_categories",
|
||||
|
||||
// Order Management
|
||||
MANAGE_ORDERS = "manage_orders",
|
||||
|
||||
// User & Admin Management
|
||||
MANAGE_ADMINS = "manage_admins",
|
||||
MANAGE_USERS = "manage_users",
|
||||
|
||||
// Reports & Finances
|
||||
VIEW_REPORTS = "view_reports",
|
||||
|
||||
UPDATE_RESTAURANT = "update_restaurant",
|
||||
|
||||
// Role Management
|
||||
MANAGE_ROLES = "manage_roles",
|
||||
MANAGE_REVIEWS = "manage_reviews",
|
||||
MANAGE_COUPONS = "manage_coupons",
|
||||
MANAGE_PAYMENTS = "manage_payments",
|
||||
MANAGE_DELIVERY = "manage_delivery",
|
||||
MANAGE_SETTINGS = "manage_settings",
|
||||
MANAGE_SCHEDULES = "manage_schedules",
|
||||
MANAGE_REPORTS = "manage_reports",
|
||||
MANAGE_CONTACTS = "manage_contacts",
|
||||
}
|
||||
+161
-131
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user