From 9d2401d9518cbf520b247fc51cf7664e39029929 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 10 Jun 2026 11:27:56 +0330
Subject: [PATCH] Add to sidebar

---
 src/config/Pages.ts    |   3 +
 src/langs/fa.json      |   3 +-
 src/shared/SideBar.tsx | 614 +++++++----------------------------------
 3 files changed, 105 insertions(+), 515 deletions(-)

diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index cb02116..35b5455 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -166,4 +166,7 @@ export const Pages = {
     create: "/reseller/create",
     withdraw: "/reseller/withdraw",
   },
+  taskmanager: {
+    list: "/taskmanager/list",
+  },
 };
diff --git a/src/langs/fa.json b/src/langs/fa.json
index ffaae64..61d8a89 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -90,7 +90,8 @@
     "domain": "دامنه",
     "reseller": "نماینده",
     "resellers": "نمایندگان",
-    "withdraw": "درخواست های برداشت"
+    "withdraw": "درخواست های برداشت",
+    "taskmanager": "مدیریت تسک ها"
   },
   "reseller": {
     "list": "لیست نمایندکان",
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 3fa0fc7..3988053 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -27,6 +27,7 @@ import {
   Setting2,
   Sms,
   SmsTracking,
+  Task,
   Teacher,
   TicketDiscount,
   UserSquare,
@@ -56,14 +57,7 @@ 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 { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
   const location = useLocation();
   const { data: profile } = useGetProfile();
   const { data: adminPermissions } = useGetAdminPermissions();
@@ -102,12 +96,7 @@ const SideBar: FC = () => {
 
   return (
     <>
-      {openSidebar && (
-        <div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10"
-          onClick={() => setOpenSidebar(false)}
-        />
-      )}
+      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-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",
@@ -115,63 +104,30 @@ const SideBar: FC = () => {
           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>
+        <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>
 
         <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
           <div
             onClick={() => handleOpenMenu("menu")}
-            className={clx(
-              "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-              hasSubMenu && "px-2 text-center",
-              !hasSubMenu && "flex gap-2 items-center",
-            )}
+            className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
           >
             {t("sidebar.menu")}
 
-            <div
-              className={clx(
-                "transition-all",
-                !openMenu.includes("menu") && "rotate-180",
-                hasSubMenu && "hidden",
-              )}
-            >
+            <div className={clx("transition-all", !openMenu.includes("menu") && "rotate-180", hasSubMenu && "hidden")}>
               <ArrowDown2 size={18} color="#c3c7dd" />
             </div>
           </div>
 
-          <div
-            className={clx(
-              "text-xs text-[#8C90A3]",
-              !openMenu.includes("menu") && "hidden",
-            )}
-          >
+          <div className={clx("text-xs text-[#8C90A3]", !openMenu.includes("menu") && "hidden")}>
             <SideBarItem
-              icon={
-                <Home2
-                  variant={isActive("dashboard") ? "Bold" : "Outline"}
-                  color={isActive("dashboard") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              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=""
             />
             <SideBarItem
-              icon={
-                <Element3
-                  variant={isActive("services") ? "Bold" : "Outline"}
-                  color={isActive("services") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Element3 variant={isActive("services") ? "Bold" : "Outline"} color={isActive("services") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.services")}
               isActive={isActive("services")}
               link={Pages.services.list}
@@ -180,13 +136,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Headphone
-                  variant={isActive("support") ? "Bold" : "Outline"}
-                  color={isActive("support") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Headphone variant={isActive("support") ? "Bold" : "Outline"} color={isActive("support") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.support")}
               isActive={isActive("support")}
               link={Pages.support.list}
@@ -194,39 +144,21 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <People
-                  variant={isActive("customers") ? "Bold" : "Outline"}
-                  color={isActive("customers") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              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}
               activeName="customers"
             />
             <SideBarItem
-              icon={
-                <UserSquare
-                  variant={isActive("representatives") ? "Bold" : "Outline"}
-                  color={isActive("representatives") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<UserSquare variant={isActive("representatives") ? "Bold" : "Outline"} color={isActive("representatives") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.representatives")}
               isActive={isActive("representatives")}
               link={Pages.representative.list}
               activeName="agents"
             />
             <SideBarItem
-              icon={
-                <CodeCircle
-                  variant={isActive("developers") ? "Bold" : "Outline"}
-                  color={isActive("developers") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<CodeCircle variant={isActive("developers") ? "Bold" : "Outline"} color={isActive("developers") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.developers")}
               isActive={isActive("developers")}
               link={Pages.developers.list}
@@ -234,13 +166,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Money3
-                  variant={isActive("payments") ? "Bold" : "Outline"}
-                  color={isActive("payments") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Money3 variant={isActive("payments") ? "Bold" : "Outline"} color={isActive("payments") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.payments")}
               isActive={isActive("payments")}
               link={Pages.payment.list}
@@ -248,39 +174,21 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Code
-                  variant={isActive("referral-code") ? "Bold" : "Outline"}
-                  color={isActive("referral-code") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Code variant={isActive("referral-code") ? "Bold" : "Outline"} color={isActive("referral-code") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.code_referral")}
               isActive={isActive("referral-code")}
               link={Pages.referralCode.list}
               activeName="referralCode"
             />
             <SideBarItem
-              icon={
-                <Profile
-                  variant={isActive("users") ? "Bold" : "Outline"}
-                  color={isActive("users") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Profile variant={isActive("users") ? "Bold" : "Outline"} color={isActive("users") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.users")}
               isActive={isActive("users")}
               link={Pages.users.list}
               activeName="admins"
             />
             <SideBarItem
-              icon={
-                <Gallery
-                  variant={isActive("sliders") ? "Bold" : "Outline"}
-                  color={isActive("sliders") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Gallery variant={isActive("sliders") ? "Bold" : "Outline"} color={isActive("sliders") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.sliders")}
               isActive={isActive("sliders")}
               link={Pages.sliders.list}
@@ -291,39 +199,18 @@ const SideBar: FC = () => {
           {
             <div
               onClick={() => handleOpenMenu("financial")}
-              className={clx(
-                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                hasSubMenu && "px-2 text-center",
-                !hasSubMenu && "flex gap-2 items-center",
-              )}
+              className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
             >
               {t("sidebar.financial")}
 
-              <div
-                className={clx(
-                  "transition-all",
-                  !openMenu.includes("financial") && "rotate-180",
-                  hasSubMenu && "hidden",
-                )}
-              >
+              <div className={clx("transition-all", !openMenu.includes("financial") && "rotate-180", hasSubMenu && "hidden")}>
                 <ArrowDown2 size={18} color="#c3c7dd" />
               </div>
             </div>
           }
-          <div
-            className={clx(
-              "text-xs text-[#8C90A3]",
-              !openMenu.includes("financial") && "hidden",
-            )}
-          >
+          <div className={clx("text-xs text-[#8C90A3]", !openMenu.includes("financial") && "hidden")}>
             <SideBarItem
-              icon={
-                <BagTick
-                  variant={isActive("subscriptions") ? "Bold" : "Outline"}
-                  color={isActive("subscriptions") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<BagTick variant={isActive("subscriptions") ? "Bold" : "Outline"} color={isActive("subscriptions") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.subscriptions")}
               isActive={isActive("subscriptions")}
               link={Pages.subscriptions.list}
@@ -331,13 +218,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Receipt21
-                  variant={isActive("receipts") ? "Bold" : "Outline"}
-                  color={isActive("receipts") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Receipt21 variant={isActive("receipts") ? "Bold" : "Outline"} color={isActive("receipts") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.receipt_list")}
               isActive={isActive("receipts")}
               link={Pages.receipts.index}
@@ -345,13 +226,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Card
-                  variant={isActive("transactions") ? "Bold" : "Outline"}
-                  color={isActive("transactions") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Card variant={isActive("transactions") ? "Bold" : "Outline"} color={isActive("transactions") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.transactions")}
               isActive={isActive("transactions")}
               link={Pages.transactions}
@@ -359,13 +234,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <TicketDiscount
-                  variant={isActive("discounts") ? "Bold" : "Outline"}
-                  color={isActive("discounts") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<TicketDiscount variant={isActive("discounts") ? "Bold" : "Outline"} color={isActive("discounts") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.discounts")}
               isActive={isActive("discounts")}
               link={Pages.discount.list}
@@ -373,13 +242,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Card
-                  variant={isActive("card") ? "Bold" : "Outline"}
-                  color={isActive("card") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Card variant={isActive("card") ? "Bold" : "Outline"} color={isActive("card") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.card")}
               isActive={isActive("card")}
               link={Pages.cardBank.list}
@@ -387,45 +250,22 @@ const SideBar: FC = () => {
             />
           </div>
 
-          {profile?.data?.user?.roles.some(
-            (role: { name: string }) => role.name === "super_admin",
-          ) && (
+          {profile?.data?.user?.roles.some((role: { name: string }) => role.name === "super_admin") && (
             <div
               onClick={() => handleOpenMenu("other")}
-              className={clx(
-                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                hasSubMenu && "px-2 text-center",
-                !hasSubMenu && "flex gap-2 items-center",
-              )}
+              className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
             >
               {t("sidebar.other")}
 
-              <div
-                className={clx(
-                  "transition-all",
-                  !openMenu.includes("other") && "rotate-180",
-                  hasSubMenu && "hidden",
-                )}
-              >
+              <div className={clx("transition-all", !openMenu.includes("other") && "rotate-180", hasSubMenu && "hidden")}>
                 <ArrowDown2 size={18} color="#c3c7dd" />
               </div>
             </div>
           )}
 
-          <div
-            className={clx(
-              "text-xs text-[#8C90A3]",
-              !openMenu.includes("other") && "hidden",
-            )}
-          >
+          <div className={clx("text-xs text-[#8C90A3]", !openMenu.includes("other") && "hidden")}>
             <SideBarItem
-              icon={
-                <Messages3
-                  variant={isActive("tickets") ? "Bold" : "Outline"}
-                  color={isActive("tickets") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Messages3 variant={isActive("tickets") ? "Bold" : "Outline"} color={isActive("tickets") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.ticket")}
               isActive={isActive("tickets")}
               link={Pages.ticket.list}
@@ -433,13 +273,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
-                <Chart21
-                  variant={isActive("feedback") ? "Bold" : "Outline"}
-                  color={isActive("feedback") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Chart21 variant={isActive("feedback") ? "Bold" : "Outline"} color={isActive("feedback") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
               title={t("sidebar.feedback")}
               isActive={isActive("feedback")}
               link={Pages.feedback.list}
@@ -448,13 +282,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <Activity
-                    variant={isActive("access-logs") ? "Bold" : "Outline"}
-                    color={isActive("access-logs") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<Activity variant={isActive("access-logs") ? "Bold" : "Outline"} color={isActive("access-logs") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.accessLogs")}
                 isActive={isActive("access-logs")}
                 link={Pages.accessLogs.list}
@@ -465,13 +293,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <DocumentText
-                    variant={isActive("criticisms") ? "Bold" : "Outline"}
-                    color={isActive("criticisms") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<DocumentText variant={isActive("criticisms") ? "Bold" : "Outline"} color={isActive("criticisms") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.criticisms")}
                 isActive={isActive("criticisms")}
                 link={Pages.criticisms.list}
@@ -479,70 +301,58 @@ const SideBar: FC = () => {
               />
             </div>
           </div>
-          {profile?.data?.user?.roles?.some(
-            (role: { name: string }) => role.name === "super_admin",
-          ) && (
+
+          {
+            <div
+              onClick={() => handleOpenMenu("taskmanager")}
+              className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
+            >
+              {t("sidebar.taskmanager")}
+
+              <div className={clx("transition-all", !openMenu.includes("taskmanager") && "rotate-180", hasSubMenu && "hidden")}>
+                <ArrowDown2 size={18} color="#c3c7dd" />
+              </div>
+            </div>
+          }
+          <div className={clx("text-xs text-[#8C90A3]")}>
+            <SideBarItem
+              icon={<Task variant={isActive("taskmanager") ? "Bold" : "Outline"} color={isActive("taskmanager") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
+              title={t("sidebar.taskmanager")}
+              isActive={isActive("taskmanager")}
+              link={Pages.taskmanager.list}
+              activeName=""
+            />
+          </div>
+
+          {profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (
             <div
               onClick={() => handleOpenMenu("content")}
-              className={clx(
-                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                hasSubMenu && "px-2 text-center text-xs",
-                !hasSubMenu && "flex gap-2 items-center",
-              )}
+              className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center text-xs", !hasSubMenu && "flex gap-2 items-center")}
             >
               {t("sidebar.mnage_content")}
 
-              <div
-                className={clx(
-                  "transition-all",
-                  !openMenu.includes("content") && "rotate-180",
-                  hasSubMenu && "hidden",
-                )}
-              >
+              <div className={clx("transition-all", !openMenu.includes("content") && "rotate-180", hasSubMenu && "hidden")}>
                 <ArrowDown2 size={18} color="#c3c7dd" />
               </div>
             </div>
           )}
 
-          {adminPermissions?.data?.permissions?.some(
-            (permission: { name: string }) => permission.name === "reseller",
-          ) && (
+          {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "reseller") && (
             <>
               <div
                 onClick={() => handleOpenMenu("reseller")}
-                className={clx(
-                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                  hasSubMenu && "px-2 text-center",
-                  !hasSubMenu && "flex gap-2 items-center",
-                )}
+                className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
               >
                 {t("sidebar.reseller")}
 
-                <div
-                  className={clx(
-                    "transition-all",
-                    !openMenu.includes("reseller") && "rotate-180",
-                    hasSubMenu && "hidden",
-                  )}
-                >
+                <div className={clx("transition-all", !openMenu.includes("reseller") && "rotate-180", hasSubMenu && "hidden")}>
                   <ArrowDown2 size={18} color="#c3c7dd" />
                 </div>
               </div>
-              <div
-                className={clx(
-                  "flex-1 flex flex-col justify-end",
-                  !openMenu.includes("reseller") && "hidden",
-                )}
-              >
+              <div className={clx("flex-1 flex flex-col justify-end", !openMenu.includes("reseller") && "hidden")}>
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <UserTick
-                        variant={isActive("reseller/list") ? "Bold" : "Outline"}
-                        color={isActive("reseller/list") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<UserTick variant={isActive("reseller/list") ? "Bold" : "Outline"} color={isActive("reseller/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.resellers")}
                     isActive={isActive("reseller/list")}
                     link={Pages.reseller.list}
@@ -552,17 +362,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Money
-                        variant={
-                          isActive("reseller/withdraw") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("reseller/withdraw") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Money variant={isActive("reseller/withdraw") ? "Bold" : "Outline"} color={isActive("reseller/withdraw") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.withdraw")}
                     isActive={isActive("reseller/withdraw")}
                     link={Pages.reseller.withdraw}
@@ -576,13 +376,7 @@ const SideBar: FC = () => {
           <div className={clx(!openMenu.includes("content") && "hidden")}>
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <DocumentLike
-                    variant={isActive("ads") ? "Bold" : "Outline"}
-                    color={isActive("ads") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<DocumentLike variant={isActive("ads") ? "Bold" : "Outline"} color={isActive("ads") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.ads")}
                 isActive={isActive("ads")}
                 link={Pages.ads.list}
@@ -592,13 +386,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <NotificationStatus
-                    variant={isActive("announcement") ? "Bold" : "Outline"}
-                    color={isActive("announcement") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<NotificationStatus variant={isActive("announcement") ? "Bold" : "Outline"} color={isActive("announcement") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.announcement")}
                 isActive={isActive("announcement")}
                 link={Pages.announcement.list}
@@ -608,13 +396,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <DocumentText
-                    variant={isActive("blog") ? "Bold" : "Outline"}
-                    color={isActive("blog") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<DocumentText variant={isActive("blog") ? "Bold" : "Outline"} color={isActive("blog") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.blog")}
                 isActive={isActive("blog")}
                 link={Pages.blog.list}
@@ -624,13 +406,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <Teacher
-                    variant={isActive("learning") ? "Bold" : "Outline"}
-                    color={isActive("learning") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<Teacher variant={isActive("learning") ? "Bold" : "Outline"} color={isActive("learning") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.learning")}
                 isActive={isActive("learning")}
                 link={Pages.learning.list}
@@ -640,13 +416,7 @@ const SideBar: FC = () => {
 
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <SmsTracking
-                    variant={isActive("messages") ? "Bold" : "Outline"}
-                    color={isActive("messages") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<SmsTracking variant={isActive("messages") ? "Bold" : "Outline"} color={isActive("messages") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.messages")}
                 isActive={isActive("messages")}
                 link={Pages.messages.list}
@@ -655,49 +425,22 @@ const SideBar: FC = () => {
             </div>
           </div>
 
-          {adminPermissions?.data?.permissions?.some(
-            (permission: { name: string }) => permission.name === "dmenu",
-          ) && (
+          {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dmenu") && (
             <>
               <div
                 onClick={() => handleOpenMenu("dmenu")}
-                className={clx(
-                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                  hasSubMenu && "px-2 text-center",
-                  !hasSubMenu && "flex gap-2 items-center",
-                )}
+                className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
               >
                 {t("sidebar.dmenu")}
 
-                <div
-                  className={clx(
-                    "transition-all",
-                    !openMenu.includes("dmenu") && "rotate-180",
-                    hasSubMenu && "hidden",
-                  )}
-                >
+                <div className={clx("transition-all", !openMenu.includes("dmenu") && "rotate-180", hasSubMenu && "hidden")}>
                   <ArrowDown2 size={18} color="#c3c7dd" />
                 </div>
               </div>
-              <div
-                className={clx(
-                  "flex-1 flex flex-col justify-end",
-                  !openMenu.includes("dmenu") && "hidden",
-                )}
-              >
+              <div className={clx("flex-1 flex flex-col justify-end", !openMenu.includes("dmenu") && "hidden")}>
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Icon
-                        variant={
-                          isActive("dmenu/icons/list") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dmenu/icons/list") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Icon variant={isActive("dmenu/icons/list") ? "Bold" : "Outline"} color={isActive("dmenu/icons/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.icons")}
                     isActive={isActive("dmenu/icons/list")}
                     link={Pages.dmenu.icons.list}
@@ -707,21 +450,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Category
-                        variant={
-                          isActive("dmenu/icons/group/list")
-                            ? "Bold"
-                            : "Outline"
-                        }
-                        color={
-                          isActive("dmenu/icons/group/list")
-                            ? "black"
-                            : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Category variant={isActive("dmenu/icons/group/list") ? "Bold" : "Outline"} color={isActive("dmenu/icons/group/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.groups_icon")}
                     isActive={isActive("dmenu/icons/group/list")}
                     link={Pages.dmenu.icons.groupList}
@@ -731,13 +460,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Warning2
-                        variant={isActive("dmenu/reports") ? "Bold" : "Outline"}
-                        color={isActive("dmenu/reports") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Warning2 variant={isActive("dmenu/reports") ? "Bold" : "Outline"} color={isActive("dmenu/reports") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.reports")}
                     isActive={isActive("dmenu/reports")}
                     link={Pages.dmenu.warnings.list}
@@ -747,13 +470,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Building
-                        variant={isActive("restaurants") ? "Bold" : "Outline"}
-                        color={isActive("restaurants") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Building variant={isActive("restaurants") ? "Bold" : "Outline"} color={isActive("restaurants") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.restaurants")}
                     isActive={isActive("restaurants")}
                     link={Pages.dmenu.restaurants.list}
@@ -763,13 +480,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Sms
-                        variant={isActive("sms-count") ? "Bold" : "Outline"}
-                        color={isActive("sms-count") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Sms variant={isActive("sms-count") ? "Bold" : "Outline"} color={isActive("sms-count") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.sms_count")}
                     isActive={isActive("sms-count")}
                     link={Pages.dmenu.restaurants.smsCountList}
@@ -780,49 +491,22 @@ const SideBar: FC = () => {
             </>
           )}
 
-          {adminPermissions?.data?.permissions?.some(
-            (permission: { name: string }) => permission.name === "dkala",
-          ) && (
+          {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dkala") && (
             <>
               <div
                 onClick={() => handleOpenMenu("dkala")}
-                className={clx(
-                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                  hasSubMenu && "px-2 text-center",
-                  !hasSubMenu && "flex gap-2 items-center",
-                )}
+                className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
               >
                 {t("sidebar.dkala")}
 
-                <div
-                  className={clx(
-                    "transition-all",
-                    !openMenu.includes("dkala") && "rotate-180",
-                    hasSubMenu && "hidden",
-                  )}
-                >
+                <div className={clx("transition-all", !openMenu.includes("dkala") && "rotate-180", hasSubMenu && "hidden")}>
                   <ArrowDown2 size={18} color="#c3c7dd" />
                 </div>
               </div>
-              <div
-                className={clx(
-                  "flex-1 flex flex-col justify-end",
-                  !openMenu.includes("dkala") && "hidden",
-                )}
-              >
+              <div className={clx("flex-1 flex flex-col justify-end", !openMenu.includes("dkala") && "hidden")}>
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Icon
-                        variant={
-                          isActive("dkala/icons/list") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dkala/icons/list") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Icon variant={isActive("dkala/icons/list") ? "Bold" : "Outline"} color={isActive("dkala/icons/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.icons")}
                     isActive={isActive("dkala/icons/list")}
                     link={Pages.dkala.icons.list}
@@ -832,17 +516,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Category
-                        variant={
-                          isActive("dkala/icons/group") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dkala/icons/group") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Category variant={isActive("dkala/icons/group") ? "Bold" : "Outline"} color={isActive("dkala/icons/group") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.groups_icon")}
                     isActive={isActive("dkala/icons/group")}
                     link={Pages.dkala.icons.groupList}
@@ -852,13 +526,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Warning2
-                        variant={isActive("dkala/reports") ? "Bold" : "Outline"}
-                        color={isActive("dkala/reports") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Warning2 variant={isActive("dkala/reports") ? "Bold" : "Outline"} color={isActive("dkala/reports") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.reports")}
                     isActive={isActive("dkala/reports")}
                     link={Pages.dkala.warnings.list}
@@ -868,13 +536,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Building
-                        variant={isActive("dkala/shops") ? "Bold" : "Outline"}
-                        color={isActive("dkala/shops") ? "black" : "#8C90A3"}
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Building variant={isActive("dkala/shops") ? "Bold" : "Outline"} color={isActive("dkala/shops") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.shops")}
                     isActive={isActive("dkala/shops")}
                     link={Pages.dkala.shops.list}
@@ -884,17 +546,7 @@ const SideBar: FC = () => {
 
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Sms
-                        variant={
-                          isActive("dkala/sms-count") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dkala/sms-count") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Sms variant={isActive("dkala/sms-count") ? "Bold" : "Outline"} color={isActive("dkala/sms-count") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.sms_count")}
                     isActive={isActive("dkala/sms-count")}
                     link={Pages.dkala.shops.smsCountList}
@@ -904,49 +556,22 @@ const SideBar: FC = () => {
               </div>
             </>
           )}
-          {adminPermissions?.data?.permissions?.some(
-            (permission: { name: string }) => permission.name === "dpage",
-          ) && (
+          {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dpage") && (
             <>
               <div
                 onClick={() => handleOpenMenu("dpage")}
-                className={clx(
-                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                  hasSubMenu && "px-2 text-center",
-                  !hasSubMenu && "flex gap-2 items-center",
-                )}
+                className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
               >
                 {t("sidebar.dpage")}
 
-                <div
-                  className={clx(
-                    "transition-all",
-                    !openMenu.includes("dpage") && "rotate-180",
-                    hasSubMenu && "hidden",
-                  )}
-                >
+                <div className={clx("transition-all", !openMenu.includes("dpage") && "rotate-180", hasSubMenu && "hidden")}>
                   <ArrowDown2 size={18} color="#c3c7dd" />
                 </div>
               </div>
-              <div
-                className={clx(
-                  "flex-1 flex flex-col justify-end",
-                  !openMenu.includes("dpage") && "hidden",
-                )}
-              >
+              <div className={clx("flex-1 flex flex-col justify-end", !openMenu.includes("dpage") && "hidden")}>
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Icon
-                        variant={
-                          isActive("dpage/stickers/list") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dpage/stickers/list") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Icon variant={isActive("dpage/stickers/list") ? "Bold" : "Outline"} color={isActive("dpage/stickers/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.sticker")}
                     isActive={isActive("dpage/stickers/list")}
                     link={Pages.dpage.stickers.list}
@@ -957,49 +582,22 @@ const SideBar: FC = () => {
             </>
           )}
 
-          {adminPermissions?.data?.permissions?.some(
-            (permission: { name: string }) => permission.name === "dmail",
-          ) && (
+          {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dmail") && (
             <>
               <div
                 onClick={() => handleOpenMenu("dmail")}
-                className={clx(
-                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
-                  hasSubMenu && "px-2 text-center",
-                  !hasSubMenu && "flex gap-2 items-center",
-                )}
+                className={clx("mt-10 px-12 text-header text-sm font-normal cursor-pointer", hasSubMenu && "px-2 text-center", !hasSubMenu && "flex gap-2 items-center")}
               >
                 {t("sidebar.dmail")}
 
-                <div
-                  className={clx(
-                    "transition-all",
-                    !openMenu.includes("dmail") && "rotate-180",
-                    hasSubMenu && "hidden",
-                  )}
-                >
+                <div className={clx("transition-all", !openMenu.includes("dmail") && "rotate-180", hasSubMenu && "hidden")}>
                   <ArrowDown2 size={18} color="#c3c7dd" />
                 </div>
               </div>
-              <div
-                className={clx(
-                  "flex-1 flex flex-col justify-end",
-                  !openMenu.includes("dmail") && "hidden",
-                )}
-              >
+              <div className={clx("flex-1 flex flex-col justify-end", !openMenu.includes("dmail") && "hidden")}>
                 <div className="text-xs text-[#8C90A3]">
                   <SideBarItem
-                    icon={
-                      <Global
-                        variant={
-                          isActive("dmail/domain/list") ? "Bold" : "Outline"
-                        }
-                        color={
-                          isActive("dmail/domain/list") ? "black" : "#8C90A3"
-                        }
-                        size={iconSizeSideBar}
-                      />
-                    }
+                    icon={<Global variant={isActive("dmail/domain/list") ? "Bold" : "Outline"} color={isActive("dmail/domain/list") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                     title={t("sidebar.domain")}
                     isActive={isActive("dmail/domain/list")}
                     link={Pages.dmail.list}
@@ -1014,13 +612,7 @@ const SideBar: FC = () => {
             <div className="text-xs text-[#8C90A3]"></div>
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <Setting2
-                    variant={isActive("setting") ? "Bold" : "Outline"}
-                    color={isActive("setting") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<Setting2 variant={isActive("setting") ? "Bold" : "Outline"} color={isActive("setting") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.setting")}
                 isActive={isActive("setting")}
                 link={Pages.setting}
@@ -1029,13 +621,7 @@ const SideBar: FC = () => {
             </div>
             <div className="text-xs text-[#8C90A3]">
               <SideBarItem
-                icon={
-                  <Logout
-                    variant={isActive("logout") ? "Bold" : "Outline"}
-                    color={isActive("logout") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                 title={t("sidebar.logout")}
                 isActive={isActive("logout")}
                 link={`#`}