From 23c8e973f2eddc57a8243febcf462d32fc12258b Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 27 Dec 2025 09:51:58 +0330
Subject: [PATCH] permission sidebar

---
 src/helpers/permissions.ts   |  59 +++++++
 src/hooks/usePermissions.ts  |  50 ++++++
 src/pages/roles/enum/Enum.ts |  29 ++++
 src/shared/SideBar.tsx       | 292 +++++++++++++++++++----------------
 4 files changed, 299 insertions(+), 131 deletions(-)
 create mode 100644 src/helpers/permissions.ts
 create mode 100644 src/hooks/usePermissions.ts
 create mode 100644 src/pages/roles/enum/Enum.ts

diff --git a/src/helpers/permissions.ts b/src/helpers/permissions.ts
new file mode 100644
index 0000000..be8fcd2
--- /dev/null
+++ b/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)
+  );
+};
+
diff --git a/src/hooks/usePermissions.ts b/src/hooks/usePermissions.ts
new file mode 100644
index 0000000..bd13ab6
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/src/pages/roles/enum/Enum.ts b/src/pages/roles/enum/Enum.ts
new file mode 100644
index 0000000..d9f0073
--- /dev/null
+++ b/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",
+}
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index f3e6efe..85c5210 100644
--- a/src/shared/SideBar.tsx
+++ b/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,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