change sidebar

src/config/SideBarSubMenu.ts

@@ -1,57 +1,46 @@
 export const SideBarItemHasSubMenu = [
-  "menu",
-  "financial",
-  "other",
+  "services",
+  "customers",
+  "representatives",
+  "users",
   "content",
-  "reseller",
-  "dmenu",
-  "dkala",
-  "dpage",
-  "dmail",
+  "financial",
+  "support",
+  "other",
+  "products",
 ];
 
 const pathSegmentToSubMenu: Record<string, string> = {
-  dashboard: "menu",
-  services: "menu",
-  support: "menu",
-  customers: "menu",
-  representatives: "menu",
-  developers: "menu",
-  payments: "menu",
-  "referral-code": "menu",
-  users: "menu",
-  sliders: "menu",
-  subscriptions: "financial",
-  receipts: "financial",
-  transactions: "financial",
-  discounts: "financial",
-  "card-bank": "financial",
-  tickets: "other",
-  feedback: "other",
-  "access-logs": "other",
-  criticisms: "other",
-  workspace: "other",
-  project: "other",
-  taskmanager: "other",
+  services: "services",
+  customers: "customers",
+  representatives: "representatives",
+  reseller: "representatives",
+  users: "users",
   ads: "content",
   announcement: "content",
   blog: "content",
   learning: "content",
-  messages: "content",
-  reseller: "reseller",
-  dmenu: "dmenu",
-  dkala: "dkala",
-  dpage: "dpage",
-  dmail: "dmail",
+  sliders: "content",
+  payments: "financial",
+  receipts: "financial",
+  transactions: "financial",
+  discounts: "financial",
+  "card-bank": "financial",
+  support: "support",
+  tickets: "support",
+  feedback: "other",
+  "access-logs": "other",
+  criticisms: "other",
+  messages: "other",
+  dmenu: "products",
+  dkala: "products",
+  dpage: "products",
+  dmail: "products",
 };
 
 export const getSubMenuNameFromPath = (pathname: string): string => {
   if (pathname.startsWith("/customers/subscriptions")) {
-    return "financial";
-  }
-
-  if (pathname.startsWith("/workspace") || pathname.startsWith("/project") || pathname.startsWith("/taskmanager")) {
-    return "other";
+    return "customers";
   }
 
   const segment = pathname.split("/")[1] ?? "";

src/langs/fa.json

@@ -59,7 +59,7 @@
     "mainpage": "صفحه اصلی",
     "myservice": "سرویس های من",
     "other_service": "سایر سرویس ها",
-    "receipt_list": "لیست صورتحساب",
+    "receipt_list": "صورتحساب ها",
     "transactions": "تراکنش ها",
     "other": "سایر",
     "ticket": "تیکت ها",
@@ -72,8 +72,9 @@
     "payments": "پرداخت ها",
     "sliders": "اسلایدر",
     "support": "پلن پشتیبانی",
+    "support_section": "پشتیبانی",
     "feedback": "گزارش ها",
-    "accessLogs": "لاگ‌های دسترسی",
+    "accessLogs": "لگ دسترسی",
     "icons": "آیکون ها",
     "dmenu": "دی منو",
     "dkala": "دی کالا",
@@ -86,6 +87,7 @@
     "sms_count": "تعداد پیامک",
     "subscriptions": "اشتراک ها",
     "financial": "مالی",
+    "products": "محصولات",
     "dmail": "دی میل",
     "domain": "دامنه",
     "reseller": "نماینده",
@@ -129,7 +131,9 @@
     "service_category": "دسته بندی سرویس ها",
     "customer_list": "لیست مشتریان",
     "create_customer": "افزودن مشتری",
+    "representative_list": "لیست نمایندگان",
     "ticket_list": "لیست تیکت ها",
+    "ticket_category": "دسته بندی تیکت ها",
     "send_ticket": "ارسال تیکت",
     "category": "دسته بندی",
     "user_list": "لیست کاربران",
@@ -141,9 +145,15 @@
     "plan_users": "کاربران پلن",
     "plan_list": "لیست پلن ها",
     "guide": "راهنمای سرویس",
+    "blog_list": "لیست بلاگ",
+    "blog_comments": "نظرات بلاگ",
+    "blog_category": "دسته بندی بلاگ",
+    "learning_list": "لیست آموزش ها",
+    "learning_category": "دسته بندی آموزش ها",
     "access_logs_list": "لیست لاگ‌ها",
     "access_logs_stats": "آمار لاگ‌ها",
     "access_logs_errors": "لاگ‌های خطا",
+    "access_logs_permissions": "لاگ‌های مجوز",
     "taskmanager_workspace": "فضای کاری",
     "taskmanager_workspace_list": "لیست فضاهای کاری",
     "taskmanager_create_workspace": "ساخت فضای کاری جدید",

src/shared/SideBar.tsx

@@ -1,13 +1,15 @@
 import {
-  Building,
+  Box,
   Category,
   DocumentLike,
   Element3,
-  Gallery,
-  Global,
+  Headphone,
   Logout,
   Money3,
+  Profile,
+  Profile2User,
   Setting2,
+  UserOctagon,
   UserTick,
 } from "iconsax-react";
 import { FC, useEffect } from "react";
@@ -21,14 +23,14 @@ import { clx } from "../helpers/utils";
 import { useGetProfile } from "../pages/profile/hooks/useProfileData";
 import { useGetAdminPermissions } from "../pages/users/hooks/useUserData";
 import ContentSubMenu from "./components/ContentSubMenu";
-import DkalaSubMenu from "./components/DkalaSubMenu";
-import DmailSubMenu from "./components/DmailSubMenu";
-import DmenuSubMenu from "./components/DmenuSubMenu";
-import DpageSubMenu from "./components/DpageSubMenu";
+import CustomersSubMenu from "./components/CustomersSubMenu";
 import FinancialSubMenu from "./components/FinancialSubMenu";
-import MenuSubMenu from "./components/MenuSubMenu";
 import OtherSubMenu from "./components/OtherSubMenu";
+import ProductsSubMenu from "./components/ProductsSubMenu";
 import ResellerSubMenu from "./components/ResellerSubMenu";
+import ServicesSubMenu from "./components/ServicesSubMenu";
+import SupportSubMenu from "./components/SupportSubMenu";
+import UsersSubMenu from "./components/UsersSubMenu";
 import SideBarItem from "./SideBarItem";
 import { useSharedStore } from "./store/sharedStore";
 
@@ -40,6 +42,20 @@ const SideBar: FC = () => {
   const { data: adminPermissions } = useGetAdminPermissions();
 
   const isGroupActive = (name: string) => subMenuName === name || getSubMenuNameFromPath(location.pathname) === name;
+  const isPathActive = (name: string) => location.pathname.includes(name);
+
+  const hasProductPermission = adminPermissions?.data?.permissions?.some((permission: { name: string }) =>
+    ["dmenu", "dkala", "dpage", "dmail"].includes(permission.name),
+  );
+
+  const productsDefaultLink = (() => {
+    const permissions = adminPermissions?.data?.permissions?.map((p: { name: string }) => p.name) ?? [];
+    if (permissions.includes("dmenu")) return Pages.dmenu.icons.list;
+    if (permissions.includes("dkala")) return Pages.dkala.icons.list;
+    if (permissions.includes("dmail")) return Pages.dmail.list;
+    if (permissions.includes("dpage")) return Pages.dpage.stickers.list;
+    return Pages.dashboard;
+  })();
 
   useEffect(() => {
     const groupName = getSubMenuNameFromPath(location.pathname);
@@ -91,15 +107,105 @@ const SideBar: FC = () => {
             <SideBarItem
               icon={
                 <Element3
-                  variant={isGroupActive("menu") ? "Bold" : "Outline"}
-                  color={isGroupActive("menu") ? "black" : "#8C90A3"}
+                  variant={isPathActive("dashboard") ? "Bold" : "Outline"}
+                  color={isPathActive("dashboard") ? "black" : "#8C90A3"}
                   size={iconSizeSideBar}
                 />
               }
-              title={t("sidebar.menu")}
-              isActive={isGroupActive("menu")}
+              title={t("sidebar.mainpage")}
+              isActive={isPathActive("dashboard")}
               link={Pages.dashboard}
-              name="menu"
+              activeName=""
+            />
+
+            <SideBarItem
+              icon={
+                <Category
+                  variant={isGroupActive("services") ? "Bold" : "Outline"}
+                  color={isGroupActive("services") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.services")}
+              isActive={isGroupActive("services")}
+              link={Pages.services.list}
+              name="services"
+              activeName="services"
+            />
+
+            <SideBarItem
+              icon={
+                <Profile2User
+                  variant={isGroupActive("customers") ? "Bold" : "Outline"}
+                  color={isGroupActive("customers") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.customers")}
+              isActive={isGroupActive("customers")}
+              link={Pages.customer.list}
+              name="customers"
+              activeName="customers"
+            />
+
+            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "reseller") && (
+              <SideBarItem
+                icon={
+                  <UserTick
+                    variant={isGroupActive("representatives") ? "Bold" : "Outline"}
+                    color={isGroupActive("representatives") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.representatives")}
+                isActive={isGroupActive("representatives")}
+                link={Pages.reseller.list}
+                name="representatives"
+                activeName="reseller"
+              />
+            )}
+
+            <SideBarItem
+              icon={
+                <UserOctagon
+                  variant={isPathActive("developers") ? "Bold" : "Outline"}
+                  color={isPathActive("developers") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.developers")}
+              isActive={isPathActive("developers")}
+              link={Pages.developers.list}
+              activeName="developers"
+            />
+
+            <SideBarItem
+              icon={
+                <Profile
+                  variant={isGroupActive("users") ? "Bold" : "Outline"}
+                  color={isGroupActive("users") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.users")}
+              isActive={isGroupActive("users")}
+              link={Pages.users.list}
+              name="users"
+              activeName="admins"
+            />
+
+            <SideBarItem
+              icon={
+                <DocumentLike
+                  variant={isGroupActive("content") ? "Bold" : "Outline"}
+                  color={isGroupActive("content") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.mnage_content")}
+              isActive={isGroupActive("content")}
+              link={Pages.blog.list}
+              name="content"
               activeName=""
             />
 
@@ -113,11 +219,26 @@ const SideBar: FC = () => {
               }
               title={t("sidebar.financial")}
               isActive={isGroupActive("financial")}
-              link={Pages.receipts.index}
+              link={Pages.payment.list}
               name="financial"
               activeName=""
             />
 
+            <SideBarItem
+              icon={
+                <Headphone
+                  variant={isGroupActive("support") ? "Bold" : "Outline"}
+                  color={isGroupActive("support") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.support_section")}
+              isActive={isGroupActive("support")}
+              link={Pages.support.list}
+              name="support"
+              activeName=""
+            />
+
             {profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (
               <SideBarItem
                 icon={
@@ -129,109 +250,26 @@ const SideBar: FC = () => {
                 }
                 title={t("sidebar.other")}
                 isActive={isGroupActive("other")}
-                link={Pages.ticket.list}
+                link={Pages.feedback.list}
                 name="other"
                 activeName=""
               />
             )}
 
-            <SideBarItem
-              icon={
-                <DocumentLike
-                  variant={isGroupActive("content") ? "Bold" : "Outline"}
-                  color={isGroupActive("content") ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
-              title={t("sidebar.mnage_content")}
-              isActive={isGroupActive("content")}
-              link={Pages.ads.list}
-              name="content"
-              activeName=""
-            />
-
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "reseller") && (
+            {hasProductPermission && (
               <SideBarItem
                 icon={
-                  <UserTick
-                    variant={isGroupActive("reseller") ? "Bold" : "Outline"}
-                    color={isGroupActive("reseller") ? "black" : "#8C90A3"}
+                  <Box
+                    variant={isGroupActive("products") ? "Bold" : "Outline"}
+                    color={isGroupActive("products") ? "black" : "#8C90A3"}
                     size={iconSizeSideBar}
                   />
                 }
-                title={t("sidebar.reseller")}
-                isActive={isGroupActive("reseller")}
-                link={Pages.reseller.list}
-                name="reseller"
-                activeName="reseller"
-              />
-            )}
-
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dmenu") && (
-              <SideBarItem
-                icon={
-                  <Building
-                    variant={isGroupActive("dmenu") ? "Bold" : "Outline"}
-                    color={isGroupActive("dmenu") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
-                title={t("sidebar.dmenu")}
-                isActive={isGroupActive("dmenu")}
-                link={Pages.dmenu.icons.list}
-                name="dmenu"
-                activeName="dmenu"
-              />
-            )}
-
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dkala") && (
-              <SideBarItem
-                icon={
-                  <Building
-                    variant={isGroupActive("dkala") ? "Bold" : "Outline"}
-                    color={isGroupActive("dkala") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
-                title={t("sidebar.dkala")}
-                isActive={isGroupActive("dkala")}
-                link={Pages.dkala.icons.list}
-                name="dkala"
-                activeName="dkala"
-              />
-            )}
-
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dpage") && (
-              <SideBarItem
-                icon={
-                  <Gallery
-                    variant={isGroupActive("dpage") ? "Bold" : "Outline"}
-                    color={isGroupActive("dpage") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
-                title={t("sidebar.dpage")}
-                isActive={isGroupActive("dpage")}
-                link={Pages.dpage.stickers.list}
-                name="dpage"
-                activeName="dpage"
-              />
-            )}
-
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "dmail") && (
-              <SideBarItem
-                icon={
-                  <Global
-                    variant={isGroupActive("dmail") ? "Bold" : "Outline"}
-                    color={isGroupActive("dmail") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
-                title={t("sidebar.dmail")}
-                isActive={isGroupActive("dmail")}
-                link={Pages.dmail.list}
-                name="dmail"
-                activeName="dmail"
+                title={t("sidebar.products")}
+                isActive={isGroupActive("products")}
+                link={productsDefaultLink}
+                name="products"
+                activeName=""
               />
             )}
           </div>
@@ -274,24 +312,24 @@ const SideBar: FC = () => {
 
       {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 overflow-y-auto no-scrollbar">
-          {subMenuName === "menu" ? (
-            <MenuSubMenu />
-          ) : subMenuName === "financial" ? (
-            <FinancialSubMenu />
-          ) : subMenuName === "other" ? (
-            <OtherSubMenu />
+          {subMenuName === "services" ? (
+            <ServicesSubMenu />
+          ) : subMenuName === "customers" ? (
+            <CustomersSubMenu />
+          ) : subMenuName === "representatives" ? (
+            <ResellerSubMenu />
+          ) : subMenuName === "users" ? (
+            <UsersSubMenu />
           ) : subMenuName === "content" ? (
             <ContentSubMenu />
-          ) : subMenuName === "reseller" ? (
-            <ResellerSubMenu />
-          ) : subMenuName === "dmenu" ? (
-            <DmenuSubMenu />
-          ) : subMenuName === "dkala" ? (
-            <DkalaSubMenu />
-          ) : subMenuName === "dpage" ? (
-            <DpageSubMenu />
-          ) : subMenuName === "dmail" ? (
-            <DmailSubMenu />
+          ) : subMenuName === "financial" ? (
+            <FinancialSubMenu />
+          ) : subMenuName === "support" ? (
+            <SupportSubMenu />
+          ) : subMenuName === "other" ? (
+            <OtherSubMenu />
+          ) : subMenuName === "products" ? (
+            <ProductsSubMenu />
           ) : null}
         </div>
       )}

src/shared/components/ContentSubMenu.tsx

@@ -3,7 +3,6 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { Pages } from "../../config/Pages";
-import SubMenuAccordion from "./SubMenuAccordion";
 import SubMenuItem from "./SubMenuItem";
 
 const ContentSubMenu: FC = () => {
@@ -24,68 +23,53 @@ const ContentSubMenu: FC = () => {
       </div>
 
       <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.blog_list")}
+          isActive={isActive("/blog/list") || isActive("/blog/detail") || isActive("/blog/create")}
+          link={Pages.blog.list}
+          activeName="blogs"
+        />
+        <SubMenuItem
+          title={t("submenu.learning_list")}
+          isActive={isActive("/learning/list") || isActive("/learning/detail") || isActive("/learning/create")}
+          link={Pages.learning.list}
+          activeName="learnings"
+        />
+        <SubMenuItem
+          title={t("submenu.blog_comments")}
+          isActive={isActive("/blog/comments")}
+          link={Pages.blog.comments}
+          activeName="blogs"
+        />
+        <SubMenuItem
+          title={t("submenu.blog_category")}
+          isActive={isActive("/blog/category")}
+          link={Pages.blog.category}
+          activeName="blogs"
+        />
         <SubMenuItem
           title={t("sidebar.ads")}
           isActive={isActive("ads")}
           link={Pages.ads.list}
           activeName="advertisements"
         />
+        <SubMenuItem
+          title={t("submenu.learning_category")}
+          isActive={isActive("/learning/category")}
+          link={Pages.learning.category}
+          activeName="learnings"
+        />
         <SubMenuItem
           title={t("sidebar.announcement")}
           isActive={isActive("announcement")}
           link={Pages.announcement.list}
           activeName="announcements"
         />
-
-        <SubMenuAccordion
-          title={t("sidebar.blog")}
-          isActive={isActive("blog")}
-          activeName="blogs"
-        >
-          <SubMenuItem
-            title="لیست"
-            isActive={isActive("/blog/list")}
-            link={Pages.blog.list}
-          />
-          <SubMenuItem
-            title="دسته بندی"
-            isActive={isActive("/blog/category")}
-            link={Pages.blog.category}
-          />
-          <SubMenuItem
-            title="نظرات"
-            isActive={isActive("/blog/comments")}
-            link={Pages.blog.comments}
-          />
-        </SubMenuAccordion>
-
-        <SubMenuAccordion
-          title={t("sidebar.learning")}
-          isActive={isActive("learning")}
-          activeName="learnings"
-        >
-          <SubMenuItem
-            title={t("learning.learnings")}
-            isActive={isActive("/learning/list")}
-            link={Pages.learning.list}
-          />
-          <SubMenuItem
-            title={t("learning.new_learning")}
-            isActive={isActive("/learning/create")}
-            link={Pages.learning.create}
-          />
-          <SubMenuItem
-            title={t("learning.category_learning")}
-            isActive={isActive("/learning/category")}
-            link={Pages.learning.category}
-          />
-        </SubMenuAccordion>
-
         <SubMenuItem
-          title={t("sidebar.messages")}
-          isActive={isActive("messages")}
-          link={Pages.messages.list}
-          activeName="contacts_us"
+          title={t("sidebar.sliders")}
+          isActive={isActive("sliders")}
+          link={Pages.sliders.list}
+          activeName="blogs"
         />
       </div>
     </div>

src/shared/components/CustomersSubMenu.tsx

@@ -1,11 +1,11 @@
-import { Global } from "iconsax-react";
+import { Profile2User } from "iconsax-react";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { Pages } from "../../config/Pages";
 import SubMenuItem from "./SubMenuItem";
 
-const DmailSubMenu: FC = () => {
+const CustomersSubMenu: FC = () => {
   const location = useLocation();
   const { t } = useTranslation("global");
 
@@ -14,24 +14,30 @@ const DmailSubMenu: FC = () => {
   return (
     <div className="py-12">
       <div className="flex gap-3 items-center border-b pb-10 px-6">
-        <Global
+        <Profile2User
           size={24}
           color="#000"
           variant="Bold"
         />
-        <div className="text-xs">{t("sidebar.dmail")}</div>
+        <div className="text-xs">{t("sidebar.customers")}</div>
       </div>
 
       <div className="flex flex-col mt-10 gap-4">
         <SubMenuItem
-          title={t("sidebar.domain")}
-          isActive={isActive("dmail/domain/list")}
-          link={Pages.dmail.list}
-          activeName="dmail"
+          title={t("submenu.customer_list")}
+          isActive={isActive("/customers/list")}
+          link={Pages.customer.list}
+          activeName="customers"
+        />
+        <SubMenuItem
+          title={t("sidebar.subscriptions")}
+          isActive={isActive("subscriptions")}
+          link={Pages.subscriptions.list}
+          activeName="customers"
         />
       </div>
     </div>
   );
 };
 
-export default DmailSubMenu;
+export default CustomersSubMenu;

src/shared/components/DkalaSubMenu.tsx

@@ -1,61 +0,0 @@
-import { Building } from "iconsax-react";
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { Pages } from "../../config/Pages";
-import SubMenuItem from "./SubMenuItem";
-
-const DkalaSubMenu: FC = () => {
-  const location = useLocation();
-  const { t } = useTranslation("global");
-
-  const isActive = (name: string) => location.pathname.includes(name);
-
-  return (
-    <div className="py-12">
-      <div className="flex gap-3 items-center border-b pb-10 px-6">
-        <Building
-          size={24}
-          color="#000"
-          variant="Bold"
-        />
-        <div className="text-xs">{t("sidebar.dkala")}</div>
-      </div>
-
-      <div className="flex flex-col mt-10 gap-4">
-        <SubMenuItem
-          title={t("sidebar.icons")}
-          isActive={isActive("dkala/icons/list") && !isActive("group")}
-          link={Pages.dkala.icons.list}
-          activeName="dkala"
-        />
-        <SubMenuItem
-          title={t("sidebar.groups_icon")}
-          isActive={isActive("dkala/icons/group")}
-          link={Pages.dkala.icons.groupList}
-          activeName="dkala"
-        />
-        <SubMenuItem
-          title={t("sidebar.reports")}
-          isActive={isActive("dkala/reports")}
-          link={Pages.dkala.warnings.list}
-          activeName="dkala"
-        />
-        <SubMenuItem
-          title={t("sidebar.shops")}
-          isActive={isActive("dkala/shops")}
-          link={Pages.dkala.shops.list}
-          activeName="dkala"
-        />
-        <SubMenuItem
-          title={t("sidebar.sms_count")}
-          isActive={isActive("dkala/sms-count")}
-          link={Pages.dkala.shops.smsCountList}
-          activeName="dkala"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DkalaSubMenu;

src/shared/components/DmenuSubMenu.tsx

@@ -1,61 +0,0 @@
-import { Building } from "iconsax-react";
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { Pages } from "../../config/Pages";
-import SubMenuItem from "./SubMenuItem";
-
-const DmenuSubMenu: FC = () => {
-  const location = useLocation();
-  const { t } = useTranslation("global");
-
-  const isActive = (name: string) => location.pathname.includes(name);
-
-  return (
-    <div className="py-12">
-      <div className="flex gap-3 items-center border-b pb-10 px-6">
-        <Building
-          size={24}
-          color="#000"
-          variant="Bold"
-        />
-        <div className="text-xs">{t("sidebar.dmenu")}</div>
-      </div>
-
-      <div className="flex flex-col mt-10 gap-4">
-        <SubMenuItem
-          title={t("sidebar.icons")}
-          isActive={isActive("dmenu/icons/list") && !isActive("group")}
-          link={Pages.dmenu.icons.list}
-          activeName="dmenu"
-        />
-        <SubMenuItem
-          title={t("sidebar.groups_icon")}
-          isActive={isActive("dmenu/icons/group")}
-          link={Pages.dmenu.icons.groupList}
-          activeName="dmenu"
-        />
-        <SubMenuItem
-          title={t("sidebar.reports")}
-          isActive={isActive("dmenu/reports")}
-          link={Pages.dmenu.warnings.list}
-          activeName="dmenu"
-        />
-        <SubMenuItem
-          title={t("sidebar.restaurants")}
-          isActive={isActive("restaurants")}
-          link={Pages.dmenu.restaurants.list}
-          activeName="dmenu"
-        />
-        <SubMenuItem
-          title={t("sidebar.sms_count")}
-          isActive={isActive("dmenu/sms-count")}
-          link={Pages.dmenu.restaurants.smsCountList}
-          activeName="dmenu"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DmenuSubMenu;

src/shared/components/DpageSubMenu.tsx

@@ -1,37 +0,0 @@
-import { Gallery } from "iconsax-react";
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { Pages } from "../../config/Pages";
-import SubMenuItem from "./SubMenuItem";
-
-const DpageSubMenu: FC = () => {
-  const location = useLocation();
-  const { t } = useTranslation("global");
-
-  const isActive = (name: string) => location.pathname.includes(name);
-
-  return (
-    <div className="py-12">
-      <div className="flex gap-3 items-center border-b pb-10 px-6">
-        <Gallery
-          size={24}
-          color="#000"
-          variant="Bold"
-        />
-        <div className="text-xs">{t("sidebar.dpage")}</div>
-      </div>
-
-      <div className="flex flex-col mt-10 gap-4">
-        <SubMenuItem
-          title={t("sidebar.sticker")}
-          isActive={isActive("dpage/stickers/list")}
-          link={Pages.dpage.stickers.list}
-          activeName="dpage"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DpageSubMenu;

src/shared/components/FinancialSubMenu.tsx

@@ -3,7 +3,6 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { Pages } from "../../config/Pages";
-import SubMenuAccordion from "./SubMenuAccordion";
 import SubMenuItem from "./SubMenuItem";
 
 const FinancialSubMenu: FC = () => {
@@ -25,29 +24,17 @@ const FinancialSubMenu: FC = () => {
 
       <div className="flex flex-col mt-10 gap-4">
         <SubMenuItem
-          title={t("sidebar.subscriptions")}
-          isActive={isActive("subscriptions")}
-          link={Pages.subscriptions.list}
+          title={t("sidebar.payments")}
+          isActive={isActive("payments")}
+          link={Pages.payment.list}
           activeName="payments"
         />
-
-        <SubMenuAccordion
+        <SubMenuItem
           title={t("sidebar.receipt_list")}
           isActive={isActive("receipts")}
+          link={Pages.receipts.index}
           activeName="invoices"
-        >
-          <SubMenuItem
-            title={t("receip.receip_list")}
-            isActive={isActive("/receipts/list")}
-            link={Pages.receipts.index}
-          />
-          <SubMenuItem
-            title={t("receip.add_receip")}
-            isActive={isActive("/receipts/create")}
-            link={Pages.receipts.create}
-          />
-        </SubMenuAccordion>
-
+        />
         <SubMenuItem
           title={t("sidebar.transactions")}
           isActive={isActive("transactions")}

src/shared/components/MenuSubMenu.tsx

@@ -1,176 +0,0 @@
-import { Element3 } from "iconsax-react";
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { Pages } from "../../config/Pages";
-import { useGetProfile } from "../../pages/profile/hooks/useProfileData";
-import SubMenuAccordion from "./SubMenuAccordion";
-import SubMenuItem from "./SubMenuItem";
-
-const MenuSubMenu: FC = () => {
-  const location = useLocation();
-  const { t } = useTranslation("global");
-  const { data: profile } = useGetProfile();
-
-  const isActive = (name: string) => location.pathname.includes(name);
-
-  return (
-    <div className="py-12">
-      <div className="flex gap-3 items-center border-b pb-10 px-6">
-        <Element3
-          size={24}
-          color="#000"
-          variant="Bold"
-        />
-        <div className="text-xs">{t("sidebar.menu")}</div>
-      </div>
-
-      <div className="flex flex-col mt-10 gap-4">
-        <SubMenuItem
-          title={t("sidebar.mainpage")}
-          isActive={isActive("dashboard")}
-          link={Pages.dashboard}
-        />
-
-        <SubMenuAccordion
-          title={t("sidebar.services")}
-          isActive={isActive("services")}
-          activeName="services"
-        >
-          <SubMenuItem
-            title={t("submenu.services_list")}
-            isActive={isActive("/services/list")}
-            link={Pages.services.list}
-          />
-          <SubMenuItem
-            title={t("submenu.add_service")}
-            isActive={isActive("/services/add")}
-            link={Pages.services.add}
-          />
-          <SubMenuItem
-            title={t("submenu.service_category")}
-            isActive={isActive("/services/category")}
-            link={Pages.services.category}
-          />
-          <SubMenuItem
-            title={t("submenu.reviews")}
-            isActive={isActive("/services/reviews")}
-            link={Pages.services.review}
-          />
-        </SubMenuAccordion>
-
-        <SubMenuAccordion
-          title={t("sidebar.support")}
-          isActive={isActive("support")}
-          activeName="support_plan"
-        >
-          <SubMenuItem
-            title={t("submenu.plan_list")}
-            isActive={isActive("/support/list")}
-            link={Pages.support.list}
-          />
-          <SubMenuItem
-            title={t("submenu.create_plan")}
-            isActive={isActive("/support/create")}
-            link={Pages.support.create}
-          />
-        </SubMenuAccordion>
-
-        <SubMenuAccordion
-          title={t("sidebar.customers")}
-          isActive={isActive("customers") && !isActive("subscriptions")}
-          activeName="customers"
-        >
-          <SubMenuItem
-            title={t("submenu.customer_list")}
-            isActive={isActive("/customers/list")}
-            link={Pages.customer.list}
-          />
-          <SubMenuItem
-            title={t("submenu.create_customer")}
-            isActive={isActive("/customers/create")}
-            link={Pages.customer.create}
-          />
-          <SubMenuItem
-            title={t("sidebar.subscriptions")}
-            isActive={isActive("subscriptions")}
-            link={Pages.subscriptions.list}
-          />
-        </SubMenuAccordion>
-
-        <SubMenuItem
-          title={t("sidebar.representatives")}
-          isActive={isActive("representatives")}
-          link={Pages.representative.list}
-          activeName="agents"
-        />
-        <SubMenuItem
-          title={t("sidebar.developers")}
-          isActive={isActive("developers")}
-          link={Pages.developers.list}
-          activeName="developers"
-        />
-        <SubMenuItem
-          title={t("sidebar.payments")}
-          isActive={isActive("payments")}
-          link={Pages.payment.list}
-          activeName="payments"
-        />
-        <SubMenuItem
-          title={t("sidebar.code_referral")}
-          isActive={isActive("referral-code")}
-          link={Pages.referralCode.list}
-          activeName="referralCode"
-        />
-
-        <SubMenuAccordion
-          title={t("sidebar.users")}
-          isActive={isActive("users")}
-          activeName="admins"
-        >
-          <SubMenuItem
-            title={t("submenu.user_list")}
-            isActive={isActive("/users/list")}
-            link={Pages.users.list}
-          />
-          <SubMenuItem
-            title={t("submenu.add_user")}
-            isActive={isActive("/users/create")}
-            link={Pages.users.create}
-          />
-          <SubMenuItem
-            title={t("submenu.role_list")}
-            isActive={isActive("roles-all")}
-            link={Pages.users.roleList}
-          />
-          <SubMenuItem
-            title={t("submenu.role_create")}
-            isActive={isActive("roles-add")}
-            link={Pages.users.roleCreate}
-          />
-          <SubMenuItem
-            title={t("user.add_user_group")}
-            isActive={isActive("group-add")}
-            link={Pages.users.groupAdd}
-          />
-          <SubMenuItem
-            title={t("user.list_user_group")}
-            isActive={isActive("/users/groups")}
-            link={Pages.users.groupList}
-          />
-        </SubMenuAccordion>
-
-        {profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (
-          <SubMenuItem
-            title={t("sidebar.sliders")}
-            isActive={isActive("sliders")}
-            link={Pages.sliders.list}
-            activeName="blogs"
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default MenuSubMenu;

src/shared/components/OtherSubMenu.tsx

@@ -12,15 +12,6 @@ const OtherSubMenu: FC = () => {
 
   const isActive = (name: string) => location.pathname.includes(name);
 
-  const isTaskManagerActive =
-    location.pathname.startsWith(Pages.taskmanager.workspace) ||
-    location.pathname === Pages.taskmanager.workspaceList ||
-    location.pathname.startsWith(Pages.taskmanager.updateWorkspace) ||
-    location.pathname === Pages.taskmanager.createWorkspace ||
-    location.pathname === Pages.taskmanager.createProject ||
-    location.pathname.startsWith(Pages.taskmanager.updateProject) ||
-    location.pathname.startsWith(Pages.taskmanager.projectList);
-
   return (
     <div className="py-12">
       <div className="flex gap-3 items-center border-b pb-10 px-6">
@@ -33,28 +24,6 @@ const OtherSubMenu: FC = () => {
       </div>
 
       <div className="flex flex-col mt-10 gap-4">
-        <SubMenuAccordion
-          title={t("sidebar.ticket")}
-          isActive={isActive("tickets")}
-          activeName="tickets"
-        >
-          <SubMenuItem
-            title={t("submenu.ticket_list")}
-            isActive={isActive("/tickets/list")}
-            link={Pages.ticket.list}
-          />
-          <SubMenuItem
-            title={t("submenu.send_ticket")}
-            isActive={isActive("/tickets/create")}
-            link={Pages.ticket.create}
-          />
-          <SubMenuItem
-            title={t("submenu.category")}
-            isActive={isActive("/tickets/category")}
-            link={Pages.ticket.category}
-          />
-        </SubMenuAccordion>
-
         <SubMenuItem
           title={t("sidebar.feedback")}
           isActive={isActive("feedback")}
@@ -83,7 +52,7 @@ const OtherSubMenu: FC = () => {
             link={Pages.accessLogs.errors}
           />
           <SubMenuItem
-            title="لاگ‌های مجوز"
+            title={t("submenu.access_logs_permissions")}
             isActive={isActive("access-logs/permissions")}
             link={Pages.accessLogs.permissions}
           />
@@ -96,9 +65,10 @@ const OtherSubMenu: FC = () => {
           activeName="criticisms"
         />
         <SubMenuItem
-          title={t("sidebar.taskmanager")}
-          isActive={isTaskManagerActive}
-          link={Pages.taskmanager.workspaceList}
+          title={t("sidebar.messages")}
+          isActive={isActive("messages")}
+          link={Pages.messages.list}
+          activeName="contacts_us"
         />
       </div>
     </div>

src/shared/components/ProductsSubMenu.tsx

@@ -0,0 +1,131 @@
+import { Box } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import SubMenuAccordion from "./SubMenuAccordion";
+import SubMenuItem from "./SubMenuItem";
+
+const ProductsSubMenu: FC = () => {
+  const location = useLocation();
+  const { t } = useTranslation("global");
+
+  const isActive = (name: string) => location.pathname.includes(name);
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <Box
+          size={24}
+          color="#000"
+          variant="Bold"
+        />
+        <div className="text-xs">{t("sidebar.products")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuAccordion
+          title={t("sidebar.dmenu")}
+          isActive={isActive("dmenu")}
+          activeName="dmenu"
+        >
+          <SubMenuItem
+            title={t("sidebar.icons")}
+            isActive={isActive("dmenu/icons/list") && !isActive("group")}
+            link={Pages.dmenu.icons.list}
+            activeName="dmenu"
+          />
+          <SubMenuItem
+            title={t("sidebar.groups_icon")}
+            isActive={isActive("dmenu/icons/group")}
+            link={Pages.dmenu.icons.groupList}
+            activeName="dmenu"
+          />
+          <SubMenuItem
+            title={t("sidebar.reports")}
+            isActive={isActive("dmenu/reports")}
+            link={Pages.dmenu.warnings.list}
+            activeName="dmenu"
+          />
+          <SubMenuItem
+            title={t("sidebar.restaurants")}
+            isActive={isActive("restaurants")}
+            link={Pages.dmenu.restaurants.list}
+            activeName="dmenu"
+          />
+          <SubMenuItem
+            title={t("sidebar.sms_count")}
+            isActive={isActive("dmenu/sms-count")}
+            link={Pages.dmenu.restaurants.smsCountList}
+            activeName="dmenu"
+          />
+        </SubMenuAccordion>
+
+        <SubMenuAccordion
+          title={t("sidebar.dkala")}
+          isActive={isActive("dkala")}
+          activeName="dkala"
+        >
+          <SubMenuItem
+            title={t("sidebar.icons")}
+            isActive={isActive("dkala/icons/list") && !isActive("group")}
+            link={Pages.dkala.icons.list}
+            activeName="dkala"
+          />
+          <SubMenuItem
+            title={t("sidebar.groups_icon")}
+            isActive={isActive("dkala/icons/group")}
+            link={Pages.dkala.icons.groupList}
+            activeName="dkala"
+          />
+          <SubMenuItem
+            title={t("sidebar.reports")}
+            isActive={isActive("dkala/reports")}
+            link={Pages.dkala.warnings.list}
+            activeName="dkala"
+          />
+          <SubMenuItem
+            title={t("sidebar.shops")}
+            isActive={isActive("dkala/shops")}
+            link={Pages.dkala.shops.list}
+            activeName="dkala"
+          />
+          <SubMenuItem
+            title={t("sidebar.sms_count")}
+            isActive={isActive("dkala/sms-count")}
+            link={Pages.dkala.shops.smsCountList}
+            activeName="dkala"
+          />
+        </SubMenuAccordion>
+
+        <SubMenuAccordion
+          title={t("sidebar.dmail")}
+          isActive={isActive("dmail")}
+          activeName="dmail"
+        >
+          <SubMenuItem
+            title={t("sidebar.domain")}
+            isActive={isActive("dmail/domain/list")}
+            link={Pages.dmail.list}
+            activeName="dmail"
+          />
+        </SubMenuAccordion>
+
+        <SubMenuAccordion
+          title={t("sidebar.dpage")}
+          isActive={isActive("dpage")}
+          activeName="dpage"
+        >
+          <SubMenuItem
+            title={t("sidebar.sticker")}
+            isActive={isActive("dpage/stickers/list")}
+            link={Pages.dpage.stickers.list}
+            activeName="dpage"
+          />
+        </SubMenuAccordion>
+      </div>
+    </div>
+  );
+};
+
+export default ProductsSubMenu;

src/shared/components/ResellerSubMenu.tsx

@@ -19,13 +19,13 @@ const ResellerSubMenu: FC = () => {
           color="#000"
           variant="Bold"
         />
-        <div className="text-xs">{t("sidebar.reseller")}</div>
+        <div className="text-xs">{t("sidebar.representatives")}</div>
       </div>
 
       <div className="flex flex-col mt-10 gap-4">
         <SubMenuItem
-          title={t("sidebar.resellers")}
-          isActive={isActive("reseller/list")}
+          title={t("submenu.representative_list")}
+          isActive={isActive("reseller/list") || isActive("reseller/create")}
           link={Pages.reseller.list}
           activeName="reseller"
         />

src/shared/components/ServicesSubMenu.tsx

@@ -0,0 +1,49 @@
+import { Category } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import SubMenuItem from "./SubMenuItem";
+
+const ServicesSubMenu: FC = () => {
+  const location = useLocation();
+  const { t } = useTranslation("global");
+
+  const isActive = (name: string) => location.pathname.includes(name);
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <Category
+          size={24}
+          color="#000"
+          variant="Bold"
+        />
+        <div className="text-xs">{t("sidebar.services")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.service_category")}
+          isActive={isActive("/services/category")}
+          link={Pages.services.category}
+          activeName="services"
+        />
+        <SubMenuItem
+          title={t("submenu.services_list")}
+          isActive={isActive("/services/list")}
+          link={Pages.services.list}
+          activeName="services"
+        />
+        <SubMenuItem
+          title={t("submenu.reviews")}
+          isActive={isActive("/services/reviews")}
+          link={Pages.services.review}
+          activeName="services"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ServicesSubMenu;

src/shared/components/SupportSubMenu.tsx

@@ -0,0 +1,49 @@
+import { Headphone } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import SubMenuItem from "./SubMenuItem";
+
+const SupportSubMenu: FC = () => {
+  const location = useLocation();
+  const { t } = useTranslation("global");
+
+  const isActive = (name: string) => location.pathname.includes(name);
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <Headphone
+          size={24}
+          color="#000"
+          variant="Bold"
+        />
+        <div className="text-xs">{t("sidebar.support_section")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("sidebar.support")}
+          isActive={isActive("/support")}
+          link={Pages.support.list}
+          activeName="support_plan"
+        />
+        <SubMenuItem
+          title={t("submenu.ticket_list")}
+          isActive={isActive("/tickets/list") || isActive("/tickets/messages") || isActive("/tickets/create")}
+          link={Pages.ticket.list}
+          activeName="tickets"
+        />
+        <SubMenuItem
+          title={t("submenu.ticket_category")}
+          isActive={isActive("/tickets/category")}
+          link={Pages.ticket.category}
+          activeName="tickets"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SupportSubMenu;

src/shared/components/UsersSubMenu.tsx

@@ -0,0 +1,49 @@
+import { Profile } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import SubMenuItem from "./SubMenuItem";
+
+const UsersSubMenu: FC = () => {
+  const location = useLocation();
+  const { t } = useTranslation("global");
+
+  const isActive = (name: string) => location.pathname.includes(name);
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <Profile
+          size={24}
+          color="#000"
+          variant="Bold"
+        />
+        <div className="text-xs">{t("sidebar.users")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.user_list")}
+          isActive={isActive("/users/list")}
+          link={Pages.users.list}
+          activeName="admins"
+        />
+        <SubMenuItem
+          title={t("submenu.role_list")}
+          isActive={isActive("roles-all") || isActive("roles-edit") || isActive("roles-add")}
+          link={Pages.users.roleList}
+          activeName="admins"
+        />
+        <SubMenuItem
+          title={t("user.list_user_group")}
+          isActive={isActive("/users/groups") || isActive("group-add")}
+          link={Pages.users.groupList}
+          activeName="admins"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UsersSubMenu;