permission sidebar

src/helpers/permissions.ts

@@ -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

@@ -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

@@ -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

@@ -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,6 +81,7 @@ const SideBar: FC = () => {
                             activeName=''
                         />
 
+                        {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
                             <SideBarItem
                                 icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.orders')}
@@ -85,7 +90,9 @@ const SideBar: FC = () => {
                                 name='orders'
                                 activeName='orders'
                             />
+                        )}
 
+                        {checkPermission(PermissionEnum.MANAGE_FOODS) && (
                             <SideBarItem
                                 icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.foods')}
@@ -93,7 +100,9 @@ const SideBar: FC = () => {
                                 link={Pages.foods.list}
                                 activeName='foods'
                             />
+                        )}
 
+                        {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
                             <SideBarItem
                                 icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.schedule')}
@@ -102,7 +111,9 @@ const SideBar: FC = () => {
                                 name='schedule'
                                 activeName='schedule'
                             />
+                        )}
 
+                        {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')}
@@ -111,8 +122,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -121,7 +133,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -130,7 +144,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -139,7 +155,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -148,7 +166,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -157,7 +177,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -166,7 +188,9 @@ const SideBar: FC = () => {
                                 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')}
@@ -175,7 +199,10 @@ const SideBar: FC = () => {
                                 name='roles'
                                 activeName='roles'
                             />
+                        )}
 
+                        {
+                            checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
                                 <SideBarItem
                                     icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.notifications')}
@@ -184,6 +211,8 @@ const SideBar: FC = () => {
                                     name='notifications'
                                     activeName='notifications'
                                 />
+                            )
+                        }
                     </div>
 
                     <div className={clx(
@@ -194,13 +223,7 @@ const SideBar: FC = () => {
                     </div>
 
                     <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} />}
-                            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')}
@@ -208,6 +231,8 @@ const SideBar: FC = () => {
                                 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')}
@@ -215,7 +240,9 @@ const SideBar: FC = () => {
                                 link={Pages.comments.list}
                                 activeName='comments'
                             />
+                        )}
 
+                        {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
                             <SideBarItem
                                 icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.reports')}
@@ -223,10 +250,12 @@ const SideBar: FC = () => {
                                 link={Pages.reports.list}
                                 activeName='reports'
                             />
+                        )}
                     </div>
 
                     <div className='flex-1 flex flex-col justify-end mt-14'>
                         <div className='text-xs text-[#8C90A3]'>
+                            {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
                                 <SideBarItem
                                     icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.setting')}
@@ -234,6 +263,7 @@ const SideBar: FC = () => {
                                     link={Pages.setting}
                                     activeName='settings'
                                 />
+                            )}
                         </div>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem