update role + and fox

2026-06-29 16:28:26 +03:30
parent f3153c6793
commit d0a1d79fad
10 changed files with 545 additions and 67 deletions
@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://10.73.49.88:3500'
+# VITE_BASE_URL = 'https://api.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.99.131:3500'
@@ -81,6 +81,7 @@ export const Pages = {
    detail: "/users/detail/",
    roleList: "/users/roles-all",
    roleCreate: "/users/roles-add",
+    roleUpdate: "/users/roles-edit/",
    groupAdd: "/users/group-add",
    groupList: "/users/groups",
  },
@@ -696,6 +696,7 @@
    "image": "تصویر حساب کاربری",
    "roles_list": "لیست نقش ها",
    "add_role": "افزودن نقش",
+    "update_role": "ویرایش نقش",
    "role_search": "جستجو در نقش ها",
    "title": "عنوان",
    "user": "کاربر",
@@ -0,0 +1,141 @@
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import { useGetPermissions, useGetRoleDetail, useUpdateRole } from './hooks/useUserData'
+import PageLoading from '../../components/PageLoading'
+import { useFormik } from 'formik'
+import { CreateRoleType, RolePermissionType } from './types/UserTypes'
+import * as Yup from 'yup'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+
+const RoleUpdate: FC = () => {
+
+    const { id } = useParams()
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const [permissions, setPermissions] = useState<string[]>([])
+    const getPermissions = useGetPermissions()
+    const { data: roleDetail, isPending: isRoleDetailPending } = useGetRoleDetail(id || '')
+    const updateRole = useUpdateRole()
+
+    const handleAdd = (permissionId: string) => {
+        if (permissions.includes(permissionId)) {
+            setPermissions(permissions.filter(permission => permission !== permissionId))
+        } else {
+            setPermissions([...permissions, permissionId])
+        }
+    }
+
+    const formik = useFormik<CreateRoleType>({
+        initialValues: {
+            name: '',
+            permissions: [],
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: (values) => {
+            if (permissions.length > 0) {
+                values.permissions = permissions
+                updateRole.mutate({ id: id || '', params: values }, {
+                    onSuccess: () => {
+                        toast.success(t('success'))
+                        navigate(Pages.users.roleList)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('user.error_count_permission'))
+            }
+        }
+    })
+
+    useEffect(() => {
+        const role = roleDetail?.data?.role
+        if (role) {
+            formik.setFieldValue('name', role.name)
+            const permissionIds = role.permissions?.map((permission: string | RolePermissionType) =>
+                typeof permission === 'string' ? permission : permission.id
+            ) || []
+            setPermissions(permissionIds)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [roleDetail])
+
+    if (getPermissions.isPending || isRoleDetailPending) {
+        return <PageLoading />
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('user.update_role')}
+                </div>
+                <Button
+                    className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateRole.isPending}
+                >
+                    <div className='flex gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div className='text-sm'>
+                            {t('user.submit_role')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='flex gap-6 mt-9'>
+                <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+
+                    <Input
+                        label={t('user.title_role')}
+                        {...formik.getFieldProps('name')}
+                        error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                    />
+
+                    <div className='mt-8'>
+                        <div className='text-sm'>
+                            {t('user.permissions')}
+                        </div>
+
+                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                            {
+                                getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
+                                    return (
+                                        <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                            <CheckBoxComponent
+                                                checked={permissions.includes(item.id)}
+                                                onChange={() => handleAdd(item.id)}
+                                            />
+                                            <div>{item.name}</div>
+                                        </div>
+                                    )
+                                })
+                            }
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                            <div className='flex flex-1 min-w-[23%] items-center'></div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RoleUpdate
@@ -1,10 +1,10 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetRoles } from './hooks/useUserData'
 import { RoleItemType } from './types/UserTypes'
@@ -57,6 +57,7 @@ const RolesList: FC = () => {
                            <Td text={t('user.title')} />
                            <Td text={t('user.user')} />
                            <Td text={t('user.is_admin')} />
+                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
@@ -67,11 +68,11 @@ const RolesList: FC = () => {
                                        <Td text={item.name} />
                                        <Td text={item.userCount + ''} />
                                        <Td text={item.isAdmin ? t('yes') : t('no')} />
-                                        {/* <Td text={''}>
-                                            <Link to={Pages.ticket.detail + '1'}>
+                                        <Td text={''}>
+                                            <Link to={Pages.users.roleUpdate + item.id}>
                                                <Eye size={20} color='#8C90A3' />
                                            </Link>
-                                        </Td> */}
+                                        </Td>
                                    </tr>
                                )
                            })
@@ -26,6 +26,21 @@ export const useGetRoles = (search: string) => {
  });
 };

+export const useGetRoleDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["role-detail", id],
+    queryFn: () => api.getRoleDetail(id),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateRole = () => {
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateRoleType }) =>
+      api.updateRole(id, params),
+  });
+};
+
 export const useCreateUser = () => {
  return useMutation({
    mutationFn: (variables: CreateUserType) => api.createUser(variables),
@@ -20,6 +20,16 @@ export const getRoles = async (search: string) => {
  return data;
 };

+export const getRoleDetail = async (id: string) => {
+  const { data } = await axios.get(`/users/roles/${id}`);
+  return data;
+};
+
+export const updateRole = async (id: string, params: CreateRoleType) => {
+  const { data } = await axios.patch(`/users/roles/${id}`, params);
+  return data;
+};
+
 export const createUser = async (params: CreateUserType) => {
  const { data } = await axios.post(`/users/admins`, params);
  return data;
@@ -12,6 +12,18 @@ export type RoleItemType = {
  userCount: number;
 };

+export type RolePermissionType = {
+  id: string;
+  name: string;
+};
+
+export type RoleDetailType = {
+  id: string;
+  name: string;
+  isAdmin: boolean;
+  permissions: (string | RolePermissionType)[];
+};
+
 export type CreateUserType = {
  phone: string;
  firstName: string;
@@ -92,6 +92,7 @@ import GroupCreate from "../pages/users/GroupCreate";
 import GroupList from "../pages/users/GroupList";
 import UsersList from "../pages/users/List";
 import RoleCreate from "../pages/users/RoleCreate";
+import RoleUpdate from "../pages/users/RoleUpdate";
 import RolesList from "../pages/users/RolesList";
 import UpdateUser from "../pages/users/Update";
 import Wallet from "../pages/wallet/Wallet";
@@ -167,6 +168,7 @@ const MainRouter: FC = () => {
              <Route path={Pages.users.detail + ":id"} element={<UpdateUser />} />
              <Route path={Pages.users.roleList} element={<RolesList />} />
              <Route path={Pages.users.roleCreate} element={<RoleCreate />} />
+              <Route path={Pages.users.roleUpdate + ":id"} element={<RoleUpdate />} />
              <Route path={Pages.users.groupAdd} element={<GroupCreate />} />
              <Route path={Pages.users.groupList} element={<GroupList />} />
              <Route path={Pages.cardBank.create} element={<CreateBankCard />} />
@@ -96,7 +96,12 @@ 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",
@@ -104,7 +109,19 @@ 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
@@ -114,20 +131,35 @@ const SideBar: FC = () => {
            {t("sidebar.menu")}

            <div className={clx("transition-all", !openMenu.includes("menu") && "rotate-180", hasSubMenu && "hidden")}>
-              <ArrowDown2 size={18} color="#c3c7dd" />
+              <ArrowDown2
+                size={18}
+                color="#c3c7dd"
+              />
            </div>
          </div>

          <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}
@@ -136,7 +168,13 @@ 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}
@@ -144,21 +182,39 @@ 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}
@@ -166,7 +222,13 @@ 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}
@@ -174,26 +236,46 @@ 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} />}
-              title={t("sidebar.sliders")}
-              isActive={isActive("sliders")}
-              link={Pages.sliders.list}
-              activeName="blogs"
-            />
+            {profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (
+              <SideBarItem
+                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}
+                activeName="blogs"
+              />
+            )}
          </div>

          {
@@ -204,13 +286,22 @@ const SideBar: FC = () => {
              {t("sidebar.financial")}

              <div className={clx("transition-all", !openMenu.includes("financial") && "rotate-180", hasSubMenu && "hidden")}>
-                <ArrowDown2 size={18} color="#c3c7dd" />
+                <ArrowDown2
+                  size={18}
+                  color="#c3c7dd"
+                />
              </div>
            </div>
          }
          <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}
@@ -218,7 +309,13 @@ 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}
@@ -226,7 +323,13 @@ 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}
@@ -234,7 +337,13 @@ 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}
@@ -242,7 +351,13 @@ 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}
@@ -258,14 +373,23 @@ const SideBar: FC = () => {
              {t("sidebar.other")}

              <div className={clx("transition-all", !openMenu.includes("other") && "rotate-180", hasSubMenu && "hidden")}>
-                <ArrowDown2 size={18} color="#c3c7dd" />
+                <ArrowDown2
+                  size={18}
+                  color="#c3c7dd"
+                />
              </div>
            </div>
          )}

          <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}
@@ -273,7 +397,13 @@ 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}
@@ -282,7 +412,13 @@ 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}
@@ -293,7 +429,13 @@ 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}
@@ -310,13 +452,22 @@ const SideBar: FC = () => {
              {t("sidebar.taskmanager")}

              <div className={clx("transition-all", !openMenu.includes("taskmanager") && "rotate-180", hasSubMenu && "hidden")}>
-                <ArrowDown2 size={18} color="#c3c7dd" />
+                <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} />}
+              icon={
+                <Task
+                  variant={isActive("taskmanager") ? "Bold" : "Outline"}
+                  color={isActive("taskmanager") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
              title={t("sidebar.taskmanager")}
              isActive={isActive("taskmanager")}
              link={Pages.taskmanager.workspace + "dpage"}
@@ -332,7 +483,10 @@ const SideBar: FC = () => {
              {t("sidebar.mnage_content")}

              <div className={clx("transition-all", !openMenu.includes("content") && "rotate-180", hasSubMenu && "hidden")}>
-                <ArrowDown2 size={18} color="#c3c7dd" />
+                <ArrowDown2
+                  size={18}
+                  color="#c3c7dd"
+                />
              </div>
            </div>
          )}
@@ -346,13 +500,22 @@ const SideBar: FC = () => {
                {t("sidebar.reseller")}

                <div className={clx("transition-all", !openMenu.includes("reseller") && "rotate-180", hasSubMenu && "hidden")}>
-                  <ArrowDown2 size={18} color="#c3c7dd" />
+                  <ArrowDown2
+                    size={18}
+                    color="#c3c7dd"
+                  />
                </div>
              </div>
              <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}
@@ -362,7 +525,13 @@ 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}
@@ -373,10 +542,16 @@ const SideBar: FC = () => {
            </>
          )}

-          <div className={clx(!openMenu.includes("content") && "hidden")}>
+          <div>
            <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}
@@ -386,7 +561,13 @@ 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}
@@ -396,7 +577,13 @@ 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}
@@ -406,7 +593,13 @@ 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}
@@ -416,7 +609,13 @@ 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}
@@ -434,13 +633,22 @@ const SideBar: FC = () => {
                {t("sidebar.dmenu")}

                <div className={clx("transition-all", !openMenu.includes("dmenu") && "rotate-180", hasSubMenu && "hidden")}>
-                  <ArrowDown2 size={18} color="#c3c7dd" />
+                  <ArrowDown2
+                    size={18}
+                    color="#c3c7dd"
+                  />
                </div>
              </div>
              <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}
@@ -450,7 +658,13 @@ 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}
@@ -460,7 +674,13 @@ 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}
@@ -470,7 +690,13 @@ 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}
@@ -480,7 +706,13 @@ 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}
@@ -500,13 +732,22 @@ const SideBar: FC = () => {
                {t("sidebar.dkala")}

                <div className={clx("transition-all", !openMenu.includes("dkala") && "rotate-180", hasSubMenu && "hidden")}>
-                  <ArrowDown2 size={18} color="#c3c7dd" />
+                  <ArrowDown2
+                    size={18}
+                    color="#c3c7dd"
+                  />
                </div>
              </div>
              <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}
@@ -516,7 +757,13 @@ 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}
@@ -526,7 +773,13 @@ 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}
@@ -536,7 +789,13 @@ 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}
@@ -546,7 +805,13 @@ 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}
@@ -565,13 +830,22 @@ const SideBar: FC = () => {
                {t("sidebar.dpage")}

                <div className={clx("transition-all", !openMenu.includes("dpage") && "rotate-180", hasSubMenu && "hidden")}>
-                  <ArrowDown2 size={18} color="#c3c7dd" />
+                  <ArrowDown2
+                    size={18}
+                    color="#c3c7dd"
+                  />
                </div>
              </div>
              <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}
@@ -591,13 +865,22 @@ const SideBar: FC = () => {
                {t("sidebar.dmail")}

                <div className={clx("transition-all", !openMenu.includes("dmail") && "rotate-180", hasSubMenu && "hidden")}>
-                  <ArrowDown2 size={18} color="#c3c7dd" />
+                  <ArrowDown2
+                    size={18}
+                    color="#c3c7dd"
+                  />
                </div>
              </div>
              <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}
@@ -612,7 +895,13 @@ 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}
@@ -621,7 +910,13 @@ 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={`#`}