profile ,footer , ...

src/langs/fa.json

@@ -43,7 +43,8 @@
   },
   "errors": {
     "required": "این فیلد اجباری می باشد",
-    "password_not_match": "رمز عبور با تکرار آن مطابقت ندارد"
+    "password_not_match": "رمز عبور با تکرار آن مطابقت ندارد",
+    "is_not_image": "فرمت فایل انتخاب شده اشتباه می باشد"
   },
   "description": "توضیحات",
   "sidebar": {
@@ -300,7 +301,9 @@
     "image_profile": "تصویر حساب کاربری",
     "image_profile_desc": "تصویر خود را در حساب کاربری قرار دهید.",
     "upload_image": "آپلود تصویر",
-    "format_image": "فرمت های jpg, png,jpeg.حداکثر ۱مگابایت",
+    "formats": "فرمت های",
+    "max_size": "حداکثر ۱مگابایت",
+    "format_image": " jpg, png,jpeg.",
     "info_account": "اطلاعات حساب",
     "auth_after_change_info": "در صورت تغییر اطلاعات حساب باید مجددا احراز هویت انجام شود.",
     "username": "نام کاربری",
@@ -316,7 +319,8 @@
     "postal_code": "کد پستی",
     "username_available": "نام کاربری موجود",
     "username_not_available": "نام کاربری موجود نیست",
-    "username_save_success": "نام کاربری با موفقیت ذخیره شد"
+    "username_save_success": "نام کاربری با موفقیت ذخیره شد",
+    "image_uploaded_successfully": "تصویر با موفقیت آپلود شد"
   },
   "email": "ایمیل",
   "save": "ذخیره",

src/pages/annoncement/List.tsx

@@ -6,9 +6,11 @@ import StatusWithText from '../../components/StatusWithText'
 import { clx } from '../../helpers/utils'
 import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
+import { useGetAnnoncement } from './hooks/useAnnoncementData'
 
 const AnnouncementtList: FC = () => {
 
+    const getAnnoncements = useGetAnnoncement()
     const { t } = useTranslation('global')
     const navigate = useNavigate()
 

src/pages/annoncement/hooks/useAnnoncementData.ts

@@ -0,0 +1,9 @@
+import * as api from "../service/AnnoncementService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetAnnoncement = () => {
+  return useQuery({
+    queryKey: ["announcements"],
+    queryFn: () => api.getAnnoncements(),
+  });
+};

src/pages/annoncement/service/AnnoncementService.ts

@@ -0,0 +1,6 @@
+import axios from "../../../config/axios";
+
+export const getAnnoncements = async () => {
+  const { data } = await axios.get(`/announcements/user`);
+  return data;
+};

src/pages/auth/components/LoginStep2.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { OtpVerifyType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
@@ -47,6 +47,28 @@ const LoginStep2: FC = () => {
         },
     })
 
+    useEffect(() => {
+        // بررسی پشتیبانی از Web OTP API
+        if (!("OTPCredential" in window)) return;
+
+        const ac = new AbortController();
+
+        navigator.credentials
+            .get({
+                otp: { transport: ["sms"] },
+                signal: ac.signal,
+            } as CredentialRequestOptions) // اطمینان از تطابق تایپ‌ها
+            .then((otpCredential) => {
+                if (otpCredential && "code" in otpCredential) {
+                    alert("OTP Received: " + otpCredential.code);
+                    formik.setFieldValue("code", (otpCredential).code);
+                }
+            })
+            .catch((err) => console.error("SMS AutoFill Error:", err));
+
+        return () => ac.abort();
+    }, []);
+
     return (
         <div>
             <div className='mt-5'>
@@ -78,7 +100,13 @@ const LoginStep2: FC = () => {
                         numInputs={5}
                         inputType='tel'
                         onChange={(otp: string) => formik.setFieldValue('code', otp)}
-                        renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
+                        renderInput={(props) =>
+                            <input
+                                {...props}
+                                autoComplete="one-time-code"
+                                inputMode="numeric"
+                                className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />
+                        }
                     />
                 </div>
 

src/pages/financial/components/Legal.tsx

@@ -4,7 +4,7 @@ import Input from '../../../components/Input'
 import { useFormik } from 'formik'
 import Textarea from '../../../components/Textarea'
 import Button from '../../../components/Button'
-import { TickCircle } from 'iconsax-react'
+import { InfoCircle, TickCircle } from 'iconsax-react'
 import { CreateLegalUserType, ProvinesItemType } from '../types/FinancialTypes'
 import * as Yup from 'yup'
 import { useCreateLegalUser, useGetCities, useGetFinancialInfo, useGetProvines } from '../hooks/useFinancialData'
@@ -186,6 +186,14 @@ const Legal: FC = () => {
                                     />
                                 </div>
 
+                                <div className='mt-8 h-10 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
+                                    <InfoCircle
+                                        size={18}
+                                        color='#DB0105'
+                                    />
+                                    <div>{t('financial.notice_cannot_edit')}</div>
+                                </div>
+
                                 {
                                     !isReadOnly &&
                                     <div className='mt-8 flex justify-end'>

src/pages/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AvatarImage from '../../assets/images/avatar_image.png'
 import Button from '../../components/Button'
@@ -7,13 +7,56 @@ import Input from '../../components/Input'
 import DatePickerComponent from '../../components/DatePicker'
 import Select from '../../components/Select'
 import Textarea from '../../components/Textarea'
-import { useGetProfile } from './hooks/useProfileData'
+import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
 import Username from './components/Username'
+import { useDropzone } from 'react-dropzone'
+import { toast } from 'react-toastify'
+import { useSingleUpload } from '../ticket/hooks/useTicketData'
+import { ErrorType } from '../../helpers/types'
+import { UpdateProfileType } from './types/ProfileTypes'
+import PageLoading from '../../components/PageLoading'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const [file, setFile] = useState<File>()
     const getProfile = useGetProfile()
+    const updateProfile = useUpdateProfile()
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+
+        if (acceptedFiles.length > 0) {
+            const file = acceptedFiles[0];
+            if (file.type.startsWith('image/')) {
+                setFile(file);
+                const formData = new FormData()
+                formData.append('file', file)
+                singleUpload.mutate(formData, {
+                    onSuccess: (data) => {
+                        const params: UpdateProfileType = {
+                            profilePic: data.data?.url
+                        }
+                        updateProfile.mutate(params, {
+                            onSuccess: () => {
+                                toast.success(t('profile.image_uploaded_successfully'))
+                            },
+                            onError: (error: ErrorType) => {
+                                toast.error(error.response?.data?.error?.message[0])
+                            }
+                        })
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('errors.is_not_image'))
+            }
+        }
+
+    }, [])
+    const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
     return (
         <div className='mt-4 '>
@@ -21,151 +64,160 @@ const Profile: FC = () => {
                 {t('profile.account_user')}
             </div>
 
-            <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
+            {
-                <div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
+                getProfile.isPending ?
-                    <div className='flex-1'>
+                    <PageLoading />
-                        <div>
+                    :
-                            {t('profile.image_profile')}
+                    <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
-                        </div>
+                        <div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
-                        <div className='text-description text-xs mt-2'>
+                            <div className='flex-1'>
-                            {t('profile.image_profile_desc')}
-                        </div>
-                    </div>
-                    <div className='flex-1 flex xl:gap-6 gap-4'>
-                        <img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
-                        <div>
-                            <Button
-                                className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
-                            >
-                                <div className='flex items-center gap-3'>
-                                    <DocumentUpload color='white' size={18} />
-                                    <div>{t('profile.upload_image')}</div>
-                                </div>
-                            </Button>
-                            <p className='mt-3 text-description'>
-                                {t('profile.format_image')}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
-                    <div className='flex-1'>
-                        <div>
-                            {t('profile.info_account')}
-                        </div>
-                        <div className='text-description text-xs mt-2'>
-                            {t('profile.auth_after_change_info')}
-                        </div>
-                    </div>
-                    <div className='flex-1 '>
-                        <Username
-                            username={getProfile.data?.data?.user?.userName}
-                        />
-                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
-                            <Input
-                                label={t('email')}
-                                value={getProfile.data?.data?.user?.email}
-                                readOnly
-                            />
-                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                 <div>
-                                    {t('edit')}
+                                    {t('profile.image_profile')}
+                                </div>
+                                <div className='text-description text-xs mt-2'>
+                                    {t('profile.image_profile_desc')}
+                                </div>
+                            </div>
+                            <div className='flex-1 flex xl:gap-6 gap-4'>
+                                <img src={file ? URL.createObjectURL(file) : getProfile.data?.data?.user?.profilePic ? getProfile.data?.data?.user?.profilePic : AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
+                                <div>
+                                    <Button
+                                        isLoading={singleUpload.isPending || updateProfile.isPending}
+                                        className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
+                                    >
+                                        <input {...getInputProps()} />
+                                        <div {...getRootProps()} className='flex items-center gap-3'>
+                                            <DocumentUpload color='white' size={18} />
+                                            <div>{t('profile.upload_image')}</div>
+                                        </div>
+                                    </Button>
+                                    <p className='mt-3 items-center flex gap-0.5 text-description'>
+                                        {t('profile.formats')}
+                                        <div className='-mt-0.5'>{t('profile.format_image')}</div>
+                                        <span>{t('profile.max_size')}</span>
+                                    </p>
                                 </div>
                             </div>
                         </div>
-                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+
-                            <Input
+                        <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
-                                label={t('profile.phone_call')}
+                            <div className='flex-1'>
-                                value={getProfile.data?.data?.user?.phone}
-                                readOnly
-                            />
-                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                 <div>
-                                    {t('edit')}
+                                    {t('profile.info_account')}
+                                </div>
+                                <div className='text-description text-xs mt-2'>
+                                    {t('profile.auth_after_change_info')}
+                                </div>
+                            </div>
+                            <div className='flex-1 '>
+                                <Username
+                                    username={getProfile.data?.data?.user?.userName}
+                                />
+                                <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+                                    <Input
+                                        label={t('email')}
+                                        value={getProfile.data?.data?.user?.email}
+                                        readOnly
+                                    />
+                                    <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                        <div>
+                                            {t('edit')}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+                                    <Input
+                                        label={t('profile.phone_call')}
+                                        value={getProfile.data?.data?.user?.phone}
+                                        readOnly
+                                    />
+                                    <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                        <div>
+                                            {t('edit')}
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
 
-                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
+                        <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
-                    <div className='flex-1'>
+                            <div className='flex-1'>
-                        <div>
+                                <div>
-                            {t('profile.personal_information')}
+                                    {t('profile.personal_information')}
-                        </div>
+                                </div>
-                        <div className='text-description text-xs mt-2'>
+                                <div className='text-description text-xs mt-2'>
-                            {t('profile.enter_carefully_your_information')}
+                                    {t('profile.enter_carefully_your_information')}
-                        </div>
+                                </div>
-                    </div>
+                            </div>
-                    <div className='flex-1'>
+                            <div className='flex-1'>
-                        <DatePickerComponent
+                                <DatePickerComponent
-                            label={t('profile.date_of_birth')}
+                                    label={t('profile.date_of_birth')}
-                            onChange={() => { }}
+                                    onChange={() => { }}
-                            placeholder=''
+                                    placeholder=''
-                            defaulValue={getProfile.data?.data?.user?.birthDate}
+                                    defaulValue={getProfile.data?.data?.user?.birthDate}
-                        />
+                                />
 
-                        <div className='xl:mt-7 mt-4'>
+                                <div className='xl:mt-7 mt-4'>
-                            <Input
+                                    <Input
-                                label={t('profile.national_code')}
+                                        label={t('profile.national_code')}
-                                value={getProfile.data?.data?.user?.nationalCode}
+                                        value={getProfile.data?.data?.user?.nationalCode}
-                            />
+                                    />
-                        </div>
+                                </div>
-                    </div>
+                            </div>
-                </div>
-
-                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
-                    <div className='flex-1'>
-                        <div>
-                            {t('profile.address')}
-                        </div>
-                        <div className='text-description text-xs mt-2'>
-                            {t('profile.address_live')}
-                        </div>
-                    </div>
-                    <div className='flex-1'>
-                        <div className='rowTwoInput'>
-                            <Select
-                                label={t('profile.province')}
-                                items={[
-                                    {
-                                        label: 'تهران',
-                                        value: 'tehran'
-                                    }
-                                ]}
-                                className='bg-white border'
-                            />
-                            <Select
-                                label={t('profile.city')}
-                                items={[
-                                    {
-                                        label: 'تهران',
-                                        value: 'tehran'
-                                    }
-                                ]}
-                            />
                         </div>
 
-                        <div className='xl:mt-7 mt-4'>
+                        <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
-                            <Input
+                            <div className='flex-1'>
-                                label={t('profile.postal_code')}
+                                <div>
-                                value={'۱۲۳۴۵۶۷۸'}
+                                    {t('profile.address')}
-                            />
+                                </div>
-                        </div>
+                                <div className='text-description text-xs mt-2'>
-                        <div className='xl:mt-7 mt-4'>
+                                    {t('profile.address_live')}
-                            <Textarea
+                                </div>
-                                label={t('profile.address')}
+                            </div>
-                                value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
+                            <div className='flex-1'>
-                            />
+                                <div className='rowTwoInput'>
-                        </div>
+                                    <Select
-                    </div>
+                                        label={t('profile.province')}
-                </div>
+                                        items={[
+                                            {
+                                                label: 'تهران',
+                                                value: 'tehran'
+                                            }
+                                        ]}
+                                        className='bg-white border'
+                                    />
+                                    <Select
+                                        label={t('profile.city')}
+                                        items={[
+                                            {
+                                                label: 'تهران',
+                                                value: 'tehran'
+                                            }
+                                        ]}
+                                    />
+                                </div>
 
-                <div className='h-20 xl:hidden'></div>
+                                <div className='xl:mt-7 mt-4'>
-            </div>
+                                    <Input
+                                        label={t('profile.postal_code')}
+                                        value={'۱۲۳۴۵۶۷۸'}
+                                    />
+                                </div>
+                                <div className='xl:mt-7 mt-4'>
+                                    <Textarea
+                                        label={t('profile.address')}
+                                        value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='h-20 xl:hidden'></div>
+                    </div>
+            }
 
         </div>
     )

src/pages/profile/types/ProfileTypes.ts

@@ -8,4 +8,5 @@ export type UpdateProfileType = {
   lastName?: string;
   birthDate?: string;
   userName?: string;
+  profilePic?: string;
 };

src/pages/ticket/CreateTicket.tsx

@@ -224,7 +224,7 @@ const CreateTicket: FC = () => {
                                         <TickSquare size={20} color='black' variant='Bold' />
                                     </div>
                                     <div className='text-description text-xs leading-5'>
-                                        پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                                        پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
                                     </div>
                                 </div>
                             </div>

src/shared/Footer.tsx

@@ -2,72 +2,78 @@ import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsa
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pages } from '../config/Pages'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 const Footer: FC = () => {
-
     const { t } = useTranslation('global')
+    const location = useLocation()
+
+    const isActive = (path: string) => location.pathname === path
 
     return (
         <div className='xl:hidden'>
             <div className='h-[60px] '></div>
             <div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
                 <Link to={Pages.dashboard}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
                         <Home2
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
                             {t('footer.home')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.services.other}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
-                        <Element4
+                        <Element3
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.services.other) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.services.other) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
                             {t('footer.other_services')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.services.mine}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                         <div className='bg-white p-1 rounded-full -mt-7'>
-                            <div className='bg-black flex justify-center items-center size-10 rounded-full'>
+                            <div className={`bg-black flex justify-center items-center size-10 rounded-full ${isActive(Pages.services.mine) ? 'bg-black' : ''}`}>
-                                <Element3
+                                <Element4
                                     className='size-5'
-                                    color='white'
+                                    color={isActive(Pages.services.mine) ? 'white' : 'white'}
+                                    variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
                                 />
                             </div>
                         </div>
-                        <div className='text-[10px] '>
+                        <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                             {t('footer.my_services')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.announcement.list}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                         <NotificationStatus
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                             {t('footer.announcements')}
                         </div>
                     </div>
                 </Link>
-
                 <Link to={Pages.ticket.list}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                         <Messages3
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                             {t('footer.tickets')}
                         </div>
                     </div>
@@ -77,4 +83,4 @@ const Footer: FC = () => {
     )
 }
 
-export default Footer
+export default Footer

src/shared/Header.tsx

@@ -37,7 +37,9 @@ const Header: FC = () => {
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
-                <Element3 color='black' className='xl:size-[18px] size-[17px]' />
+                <Link to={Pages.services.other}>
+                    <Element3 color='black' className='xl:size-[18px] size-[17px]' />
+                </Link>
                 <Link to={Pages.wallet}>
                     <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                 </Link>

src/shared/SideBar.tsx

@@ -48,13 +48,13 @@ const SideBar: FC = () => {
                             link={Pages.dashboard}
                         />
                         <SideBarItem
-                            icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Element4 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.myservice')}
                             isActive={isActive('services')}
                             link={Pages.services.mine}
                         />
                         <SideBarItem
-                            icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Element3 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.other_service')}
                             isActive={isActive('other-service')}
                             link={Pages.services.other}