From 1fa2af41398736ceb2397021f1bca7c1f2734302 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Thu, 18 Jun 2026 10:27:11 +0330
Subject: [PATCH] remove from sidebar pager

---
 src/shared/SideBar.tsx | 568 +++++++++++++++++++----------------------
 1 file changed, 260 insertions(+), 308 deletions(-)

diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 830b4cb..e65794c 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -1,173 +1,151 @@
-import { type FC, useEffect } from 'react'
-import LogoImage from '../assets/images/logo.svg'
-import LogoSmall from '../assets/images/logo-small.png'
-import { useTranslation } from 'react-i18next'
-import { DocumentText, Home2, Logout, People, Setting2, TicketDiscount, Calendar, Security, Card, SecurityUser, TruckFast, Element3, Star1, NotificationBing, SmsEdit } from 'iconsax-react'
-import SideBarItem from './SideBarItem'
-import { useLocation } from 'react-router-dom'
-import { Pages } from '../config/Pages'
-import { useSharedStore } from './store/sharedStore'
-import { clx } from '../helpers/utils'
-import ProductsSubMenu from './components/ProductsSubMenu'
-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'
-import Skeleton from 'react-loading-skeleton'
+import { usePermissions } from "@/hooks/usePermissions";
+import { PermissionEnum } from "@/pages/roles/enum/Enum";
+import { Calendar, Card, DocumentText, Element3, Home2, Logout, People, Security, SecurityUser, Setting2, SmsEdit, Star1, TicketDiscount, TruckFast } from "iconsax-react";
+import { type FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import Skeleton from "react-loading-skeleton";
+import { useLocation } from "react-router-dom";
+import LogoSmall from "../assets/images/logo-small.png";
+import LogoImage from "../assets/images/logo.svg";
+import { Pages } from "../config/Pages";
+import { SideBarItemHasSubMenu } from "../config/SideBarSubMenu";
+import { clx } from "../helpers/utils";
+import CustomersSubMenu from "./components/CustomersSubMenu";
+import DiscountSubMenu from "./components/DiscountSubMenu";
+import OrdersSubMenu from "./components/OrdersSubMenu";
+import ProductsSubMenu from "./components/ProductsSubMenu";
+import SideBarItem from "./SideBarItem";
+import { useSharedStore } from "./store/sharedStore";
 
 const SideBar: FC = () => {
+  const { t } = useTranslation("global");
+  const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
+  const location = useLocation();
+  const { checkPermission, isLoading } = usePermissions();
 
-    const { t } = useTranslation('global')
-    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
-    const location = useLocation()
-    const { checkPermission, isLoading } = usePermissions()
+  const isActive = (name: string) => {
+    return location.pathname.includes(name);
+  };
 
-    const isActive = (name: string) => {
-        return location.pathname.includes(name)
+  useEffect(() => {
+    const split = location.pathname.split("/");
+
+    if (SideBarItemHasSubMenu.includes(split[1])) {
+      setSubMenuName(split[1]);
+      setSubtMenu(true);
+    } else {
+      setSubMenuName("");
+      setSubtMenu(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
 
-    useEffect(() => {
-        const split = location.pathname.split('/')
+  const iconSizeSideBar = 20;
 
-        if (SideBarItemHasSubMenu.includes(split[1])) {
-            setSubMenuName(split[1])
-            setSubtMenu(true)
-        } else {
-            setSubMenuName('')
-            setSubtMenu(false)
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname])
+  return (
+    <>
+      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10" onClick={() => setOpenSidebar(false)} />}
+      <div
+        className={clx(
+          "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12 duration-300",
+          openSidebar && "opacity-100 visible -translate-x-[0px] block z-40",
+          hasSubMenu && "w-24 !rounded-tl-none !rounded-bl-none",
+        )}
+      >
+        <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>
 
-    const iconSizeSideBar = 20
+        <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
+          <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.menu")}</div>
 
-
-    return (
-        <>
-            {
-                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10' onClick={() => setOpenSidebar(false)} />
-            }
-            <div
-                className={clx(
-                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12 duration-300',
-                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
-                    hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
-                )}
-            >
-                <div className='flex justify-center'>
-                    {
-                        !hasSubMenu ?
-                            <img src={LogoImage} className='w-[140px]' />
-                            :
-                            <img src={LogoSmall} className='w-7' />
-                    }
+          {isLoading ? (
+            <div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <div key={index} className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
+                  <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
+                    <Skeleton circle width={20} height={20} />
+                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                  </div>
                 </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-xs text-[#8C90A3]">
+              {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
+                <SideBarItem
+                  icon={<Home2 variant={isActive("dashboard") ? "Bold" : "Outline"} color={isActive("dashboard") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
+                  title={t("sidebar.mainpage")}
+                  isActive={isActive("dashboard")}
+                  link={Pages.dashboard}
+                  activeName=""
+                />
+              )}
 
-                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
-                    <div className={clx(
-                        'mt-10 px-12 text-header text-sm font-normal',
-                        hasSubMenu && 'px-2 text-center'
-                    )}>
-                        {t('sidebar.menu')}
-                    </div>
+              {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"
+                />
+              )}
 
-                    {isLoading ? (
-                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
-                            {Array.from({ length: 8 }).map((_, index) => (
-                                <div key={index} className={clx(
-                                    'flex gap-9',
-                                    hasSubMenu && 'flex-col items-center'
-                                )}>
-                                    <div className={clx(
-                                        'flex gap-3 items-center',
-                                        hasSubMenu && 'flex-col'
-                                    )}>
-                                        <Skeleton circle width={20} height={20} />
-                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    ) : (
-                        <div className='text-xs text-[#8C90A3]'>
-                            {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
-                                <SideBarItem
-                                    icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                    title={t('sidebar.mainpage')}
-                                    isActive={isActive('dashboard')}
-                                    link={Pages.dashboard}
-                                    activeName=''
-                                />
-                            )}
+              {checkPermission(PermissionEnum.MANAGE_FOODS) && (
+                <SideBarItem
+                  icon={<Element3 variant={isActive("products") ? "Bold" : "Outline"} color={isActive("products") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
+                  title={t("sidebar.foods")}
+                  isActive={isActive("products")}
+                  link={Pages.products.list}
+                  activeName="products"
+                />
+              )}
 
-                            {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'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {checkPermission(PermissionEnum.MANAGE_FOODS) && (
-                                <SideBarItem
-                                    icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                    title={t('sidebar.foods')}
-                                    isActive={isActive('products')}
-                                    link={Pages.products.list}
-                                    activeName='products'
-                                />
-                            )}
+              {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_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'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {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_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_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'
-                                />
-                            )}
-
-                            {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'
-                                />
-                            )}
-
-                            {checkPermission(PermissionEnum.MANAGE_PAGER) && (
+              {/* {checkPermission(PermissionEnum.MANAGE_PAGER) && (
                                 <SideBarItem
                                     icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.pagers')}
@@ -176,53 +154,53 @@ 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')}
-                                    isActive={isActive('admins')}
-                                    link={Pages.admins.list}
-                                    name='admins'
-                                    activeName='admins'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {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'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {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'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {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'
-                                />
-                            )}
+              {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"
+                />
+              )}
 
-                            {/* {
+              {/* {
                                 checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
                                     <SideBarItem
                                         icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -234,34 +212,23 @@ const SideBar: FC = () => {
                                     />
                                 )
                             } */}
-                        </div>
-                    )}
+            </div>
+          )}
 
-                    <div className={clx(
-                        'mt-10 px-12 text-header text-sm font-normal',
-                        hasSubMenu && 'px-2 text-center'
-                    )}>
-                        {t('sidebar.other')}
-                    </div>
+          <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.other")}</div>
 
-                    {isLoading ? (
-                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
-                            <div className={clx(
-                                'flex gap-9',
-                                hasSubMenu && 'flex-col items-center'
-                            )}>
-                                <div className={clx(
-                                    'flex gap-3 items-center',
-                                    hasSubMenu && 'flex-col'
-                                )}>
-                                    <Skeleton circle width={20} height={20} />
-                                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <div className='text-xs text-[#8C90A3]'>
-                            {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
+          {isLoading ? (
+            <div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
+              <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
+                <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
+                  <Skeleton circle width={20} height={20} />
+                  <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-xs text-[#8C90A3]">
+              {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
                                 <SideBarItem
                                     icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.statistics')}
@@ -270,7 +237,7 @@ const SideBar: FC = () => {
                                     activeName='statistics'
                                 />
                             )} */}
-                            {/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
+              {/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
                                 <SideBarItem
                                     icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                     title={t('sidebar.comments')}
@@ -280,93 +247,78 @@ const SideBar: FC = () => {
                                 />
                             )} */}
 
-                            {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'>
-                        {isLoading ? (
-                            <div className='text-xs text-[#8C90A3] px-12 space-y-4'>
-                                <div className={clx(
-                                    'flex gap-9',
-                                    hasSubMenu && 'flex-col items-center'
-                                )}>
-                                    <div className={clx(
-                                        'flex gap-3 items-center',
-                                        hasSubMenu && 'flex-col'
-                                    )}>
-                                        <Skeleton circle width={20} height={20} />
-                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
-                                    </div>
-                                </div>
-                                <div className={clx(
-                                    'flex gap-9',
-                                    hasSubMenu && 'flex-col items-center'
-                                )}>
-                                    <div className={clx(
-                                        'flex gap-3 items-center',
-                                        hasSubMenu && 'flex-col'
-                                    )}>
-                                        <Skeleton circle width={20} height={20} />
-                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
-                                    </div>
-                                </div>
-                            </div>
-                        ) : (
-                            <>
-                                <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')}
-                                            isActive={isActive('setting')}
-                                            link={Pages.setting}
-                                            activeName='settings'
-                                        />
-                                    )}
-                                </div>
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.logout')}
-                                        isActive={isActive('logout')}
-                                        link={`#`}
-                                        isLogout
-                                        activeName=''
-                                    />
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </div>
+              {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>
+          )}
 
-            {
-                hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
-                <div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
-                    {
-                        subMenuName === 'products' ?
-                            <ProductsSubMenu />
-                            : subMenuName === 'orders' ?
-                                <OrdersSubMenu />
-                                : subMenuName === 'customers' ?
-                                    <CustomersSubMenu />
-                                    : subMenuName === 'discounts' ?
-                                        <DiscountSubMenu />
-                                        : null
-                    }
+          <div className="flex-1 flex flex-col justify-end mt-14">
+            {isLoading ? (
+              <div className="text-xs text-[#8C90A3] px-12 space-y-4">
+                <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
+                  <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
+                    <Skeleton circle width={20} height={20} />
+                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                  </div>
                 </div>
-            }
-        </>
-    )
-}
+                <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
+                  <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
+                    <Skeleton circle width={20} height={20} />
+                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                <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")}
+                      isActive={isActive("setting")}
+                      link={Pages.setting}
+                      activeName="settings"
+                    />
+                  )}
+                </div>
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
+                    title={t("sidebar.logout")}
+                    isActive={isActive("logout")}
+                    link={`#`}
+                    isLogout
+                    activeName=""
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
 
-export default SideBar
\ No newline at end of file
+      {hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
+        <div className="fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border">
+          {subMenuName === "products" ? (
+            <ProductsSubMenu />
+          ) : subMenuName === "orders" ? (
+            <OrdersSubMenu />
+          ) : subMenuName === "customers" ? (
+            <CustomersSubMenu />
+          ) : subMenuName === "discounts" ? (
+            <DiscountSubMenu />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SideBar;