danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

permission sidebar

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/helpers/permissions.ts
+59
View File
@@ -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)
);
};
src/hooks/usePermissions.ts
+50
View File
@@ -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,
};
};
src/pages/roles/enum/Enum.ts
+29
View File
@@ -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",
}
src/shared/SideBar.tsx
+161 -131
View File
@@ -13,11 +13,15 @@ import OrdersSubMenu from './components/OrdersSubMenu'
import CustomersSubMenu from './components/CustomersSubMenu' import CustomersSubMenu from './components/CustomersSubMenu'
import DiscountSubMenu from './components/DiscountSubMenu' import DiscountSubMenu from './components/DiscountSubMenu'
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu' import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
import { usePermissions } from '@/hooks/usePermissions'
import { PermissionEnum } from '@/pages/roles/enum/Enum'
const SideBar: FC = () => { const SideBar: FC = () => {
const { t } = useTranslation('global') const { t } = useTranslation('global')
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore() const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
const location = useLocation() const location = useLocation()
const { checkPermission } = usePermissions()
const isActive = (name: string) => { const isActive = (name: string) => {
return location.pathname.includes(name) return location.pathname.includes(name)
@@ -77,113 +81,138 @@ const SideBar: FC = () => {
activeName='' activeName=''
/> />
<SideBarItem {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.orders')} icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('orders')} title={t('sidebar.orders')}
link={Pages.orders.list} isActive={isActive('orders')}
name='orders' link={Pages.orders.list}
activeName='orders' name='orders'
/> activeName='orders'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_FOODS) && (
icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.foods')} icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('foods')} title={t('sidebar.foods')}
link={Pages.foods.list} isActive={isActive('foods')}
activeName='foods' link={Pages.foods.list}
/> activeName='foods'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.schedule')} icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('schedule')} title={t('sidebar.schedule')}
link={Pages.schedule.list} isActive={isActive('schedule')}
name='schedule' link={Pages.schedule.list}
activeName='schedule' name='schedule'
/> activeName='schedule'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.payment_methods')} icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('payment_methods')} title={t('sidebar.payment_methods')}
link={Pages.payment_methods.list} isActive={isActive('payment_methods')}
name='payment_methods' link={Pages.payment_methods.list}
activeName='payment_methods' 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 {checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.customers')} icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('customers')} title={t('sidebar.reviews')}
link={Pages.customers.list} isActive={isActive('reviews')}
name='customers' link={Pages.reviews.list}
activeName='customers' name='reviews'
/> activeName='reviews'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_PAGER) && (
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.reviews')} icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('reviews')} title={t('sidebar.pagers')}
link={Pages.reviews.list} isActive={isActive('pagers')}
name='reviews' link={Pages.pagers.list}
activeName='reviews' name='pagers'
/> activeName='pagers'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_ADMINS) && (
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.pagers')} icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('pagers')} title={t('sidebar.admins')}
link={Pages.pagers.list} isActive={isActive('admins')}
name='pagers' link={Pages.admins.list}
activeName='pagers' name='admins'
/> activeName='admins'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.admins')} icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('admins')} title={t('sidebar.shipment_methods')}
link={Pages.admins.list} isActive={isActive('shipment_methods')}
name='admins' link={Pages.shipment_methods.list}
activeName='admins' name='shipment_methods'
/> activeName='shipment_methods'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_COUPONS) && (
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.shipment_methods')} icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('shipment_methods')} title={t('sidebar.discount')}
link={Pages.shipment_methods.list} isActive={isActive('discounts')}
name='shipment_methods' link={Pages.coupons.list}
activeName='shipment_methods' name='discounts'
/> activeName='discounts'
/>
)}
<SideBarItem {checkPermission(PermissionEnum.MANAGE_ROLES) && (
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.discount')} icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('discounts')} title={t('sidebar.roles')}
link={Pages.coupons.list} isActive={isActive('roles')}
name='discounts' link={Pages.roles.list}
activeName='discounts' name='roles'
/> activeName='roles'
/>
)}
<SideBarItem {
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
title={t('sidebar.roles')} <SideBarItem
isActive={isActive('roles')} icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
link={Pages.roles.list} title={t('sidebar.notifications')}
name='roles' isActive={isActive('notifications')}
activeName='roles' link={Pages.notifications.list}
/> name='notifications'
activeName='notifications'
<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>
<div className={clx( <div className={clx(
@@ -194,46 +223,47 @@ const SideBar: FC = () => {
</div> </div>
<div className='text-xs text-[#8C90A3]'> <div className='text-xs text-[#8C90A3]'>
<SideBarItem {checkPermission(PermissionEnum.VIEW_REPORTS) && (
icon={<NotificationStatus variant={isActive('announcements') ? 'Bold' : 'Outline'} color={isActive('announcements') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.announcements')} icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('announcements')} title={t('sidebar.statistics')}
link={Pages.announcements.list} isActive={isActive('statistics')}
activeName='announcements' link={Pages.statistics.list}
/> activeName='statistics'
<SideBarItem />
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} )}
title={t('sidebar.statistics')} {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
isActive={isActive('statistics')} <SideBarItem
link={Pages.statistics.list} icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
activeName='statistics' title={t('sidebar.comments')}
/> isActive={isActive('comments')}
<SideBarItem link={Pages.comments.list}
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} activeName='comments'
title={t('sidebar.comments')} />
isActive={isActive('comments')} )}
link={Pages.comments.list}
activeName='comments'
/>
<SideBarItem {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.reports')} icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('reports')} title={t('sidebar.reports')}
link={Pages.reports.list} isActive={isActive('reports')}
activeName='reports' link={Pages.reports.list}
/> activeName='reports'
/>
)}
</div> </div>
<div className='flex-1 flex flex-col justify-end mt-14'> <div className='flex-1 flex flex-col justify-end mt-14'>
<div className='text-xs text-[#8C90A3]'> <div className='text-xs text-[#8C90A3]'>
<SideBarItem {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} <SideBarItem
title={t('sidebar.setting')} icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
isActive={isActive('setting')} title={t('sidebar.setting')}
link={Pages.setting} isActive={isActive('setting')}
activeName='settings' link={Pages.setting}
/> activeName='settings'
/>
)}
</div> </div>
<div className='text-xs text-[#8C90A3]'> <div className='text-xs text-[#8C90A3]'>
<SideBarItem <SideBarItem