remove remark

src/components/DefaulModal.tsx

@@ -1,4 +1,5 @@
 import { FC, Fragment, ReactNode, useEffect } from 'react'
+import { clx } from '../helpers/utils'
 import HeaderModal from './HeaderModal'
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
     isHeader?: boolean,
     title_header?: string,
     width?: number
+    /** Raise above popovers (z-80) when confirm opens from nested panels */
+    elevated?: boolean
 }
 
 const DefaulModal: FC<Props> = (props: Props) => {
@@ -26,7 +29,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                        <div
+                            style={{ maxWidth: props.width }}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto',
+                                props.elevated ? 'z-[100]' : 'z-[60]',
+                            )}
+                        >
                             <div className='relative max-h-[85vh] bottom-0 left-0 flex xl:items-center items-end w-full xl:my-6 xl:p-2'>
                                 <div className='border-0 max-h-[85vh] p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none'>
 
@@ -46,7 +56,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
                             </div>
                         </div>
 
-                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-50 '></div>
+                        <div
+                            onClick={props.close}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'fixed size-full top-0 bottom-0 right-0 modalGlass inset-0',
+                                props.elevated ? 'z-[90]' : 'z-50',
+                            )}
+                        />
                     </Fragment>
                 )
             }

src/components/ModalConfrim.tsx

@@ -1,7 +1,8 @@
 import { FC, useState } from 'react'
-import DefaulModal from './DefaulModal'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Button from './Button'
+import DefaulModal from './DefaulModal'
 import Textarea from './Textarea'
 
 type Props = {
@@ -18,12 +19,13 @@ const ModalConfrim: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const [description, setDescription] = useState<string>('')
 
-    return (
+    return createPortal(
         <DefaulModal
             open={props.isOpen}
             close={props.close}
             title_header={t('confrim.subject')}
             isHeader
+            elevated
         >
             <div className='mt-6'>
                 <div className='text-sm text-center'>
@@ -60,7 +62,8 @@ const ModalConfrim: FC<Props> = (props: Props) => {
                     />
                 </div>
             </div>
-        </DefaulModal>
+        </DefaulModal>,
+        document.body,
     )
 }
 

src/langs/fa.json

@@ -35,7 +35,8 @@
     "enter_password_step3": "رمز عبور را وارد کنید",
     "enter_your_password": "رمز عبور خود را وارد کنید.",
     "forgot_password": "فراموشی رمز عبور",
-    "login_with_otp": "ورود با رمز عبور یکبار مصرف"
+    "login_with_otp": "ورود با رمز عبور یکبار مصرف",
+    "otp_sent": "رمز یک بار مصرف برای شما ارسال شد"
   },
   "errors": {
     "required": "این فیلد اجباری می باشد",
@@ -785,7 +786,10 @@
     "confrim_email": "تایید ایمیل",
     "confrim": "تایید صورتحساب ",
     "link_email": "یک لینک برای تایید ایمیل برای شما ارسال شد.",
-    "email_not_verified": "ایمیل تایید نشده"
+    "email_not_verified": "ایمیل تایید نشده",
+    "resend_email": "ارسال مجدد تایید",
+    "first_name": "نام",
+    "last_name": "نام خانوادگی"
   },
   "email": "ایمیل",
   "customer": {

src/pages/auth/components/LoginStep2.tsx

@@ -78,7 +78,13 @@ const LoginStep2: FC = () => {
                         value={formik.values.code}
                         numInputs={5}
                         inputType='tel'
-                        onChange={(otp: string) => formik.setFieldValue('code', otp)}
+                        onChange={(otp: string) => {
+                            formik.setFieldValue('code', otp).then(() => {
+                                if (otp.length === 5 && !otpVerify.isPending) {
+                                    formik.submitForm()
+                                }
+                            })
+                        }}
                         renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
                     />
                 </div>

src/pages/profile/Profile.tsx

@@ -1,70 +1,31 @@
-import { FC, useCallback, useEffect, useState } 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'
 import { DocumentUpload } from 'iconsax-react'
-import Input from '../../components/Input'
-import DatePickerComponent from '../../components/DatePicker'
 import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
 import Username from './components/Username'
 import { useDropzone } from 'react-dropzone'
-import { toast } from '../../components/Toast';
+import { toast } from '../../components/Toast'
 import { ErrorType } from '../../helpers/types'
 import { UpdateProfileType } from './types/ProfileTypes'
 import PageLoading from '../../components/PageLoading'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
 import Email from './components/Email'
 import Phone from './components/Phone'
-import { useGetProvines } from '../customer/hooks/useCustomerData'
+import FirstName from './components/FirstName'
+import LastName from './components/LastName'
+import BirthDate from './components/BirthDate'
+import NationalCode from './components/NationalCode'
 import { useSingleUpload } from '../service/hooks/useServiceData'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
     const [file, setFile] = useState<File>()
-    const getProvines = useGetProvines()
     const getProfile = useGetProfile()
     const singleUpload = useSingleUpload()
     const updateProfile = useUpdateProfile()
 
-    const formik = useFormik<UpdateProfileType>({
-        initialValues: {
-            cityId: '',
-            userAddress: '',
-            postalCode: '',
-        },
-        validationSchema: Yup.object({
-            cityId: Yup.string().required(t('errors.required')),
-            userAddress: Yup.string().required(t('errors.required')),
-            postalCode: Yup.string().required(t('errors.required')),
-        }),
-        onSubmit: (values) => {
-            updateProfile.mutate(values, {
-                onSuccess: () => {
-                    toast(t('success'), 'success')
-                },
-                onError: (error: ErrorType) => {
-                    toast(error.response?.data?.error?.message[0], 'error')
-                }
-            })
-        }
-    })
-
-    useEffect(() => {
-
-        if (getProfile.data) {
-            formik.setValues({
-                cityId: getProfile.data.data.user.city?.id || '',
-                userAddress: getProfile.data.data.user.userAddress || '',
-                postalCode: getProfile.data.data.user.postalCode || '',
-            })
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getProfile.data])
-
-
     const onDrop = useCallback((acceptedFiles: File[]) => {
 
         if (acceptedFiles.length > 0) {
@@ -83,12 +44,12 @@ const Profile: FC = () => {
                                 toast(t('profile.image_uploaded_successfully'), 'success')
                             },
                             onError: (error: ErrorType) => {
-                                toast(error.response?.data?.error?.message[0], 'error')
+                                toast(error.response?.data?.error?.message?.[0], 'error')
                             }
                         })
                     },
                     onError: (error: ErrorType) => {
-                        toast(error.response?.data?.error?.message[0], 'error')
+                        toast(error.response?.data?.error?.message?.[0], 'error')
                     }
                 })
             } else {
@@ -107,7 +68,7 @@ const Profile: FC = () => {
             </div>
 
             {
-                getProfile.isPending || getProvines.isPending ?
+                getProfile.isPending ?
                     <PageLoading />
                     :
                     <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
@@ -175,87 +136,15 @@ const Profile: FC = () => {
                                 </div>
                             </div>
                             <div className='flex-1'>
-                                <DatePickerComponent
+                                <FirstName firstName={getProfile.data?.data?.user?.firstName} />
-                                    label={t('profile.date_of_birth')}
+                                <LastName lastName={getProfile.data?.data?.user?.lastName} />
-                                    onChange={() => { }}
-                                    placeholder=''
-                                    defaulValue={getProfile.data?.data?.user?.birthDate}
-                                />
-
                                 <div className='xl:mt-7 mt-4'>
-                                    <Input
+                                    <BirthDate birthDate={getProfile.data?.data?.user?.birthDate} />
-                                        label={t('profile.national_code')}
-                                        value={getProfile.data?.data?.user?.nationalCode}
-                                    />
                                 </div>
+                                <NationalCode nationalCode={getProfile.data?.data?.user?.nationalCode} />
                             </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={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
-                                        onChange={(e) => setProvinesId(e.target.value)}
-                                        className='bg-white border'
-                                        placeholder={t('select')}
-                                        value={provinesId}
-                                    />
-                                    <Select
-                                        label={t('profile.city')}
-                                        items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
-                                        placeholder={t('select')}
-                                        {...formik.getFieldProps('cityId')}
-                                        error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
-                                    />
-                                </div>
-
-                                <div className='xl:mt-7 mt-4'>
-                                    <Input
-                                        label={t('profile.postal_code')}
-                                        {...formik.getFieldProps('postalCode')}
-                                        error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
-                                        value={formik.values.postalCode}
-                                    />
-                                </div>
-                                <div className='xl:mt-7 mt-4'>
-                                    <Textarea
-                                        label={t('profile.address')}
-                                        defaultValue={formik.values.userAddress}
-                                        {...formik.getFieldProps('userAddress')}
-                                        error_text={formik.touched.userAddress && formik.errors.userAddress ? formik.errors.userAddress : ''}
-                                    />
-                                </div>
-
-                                <div className='flex justify-end mt-5'>
-                                    <Button
-                                        className='xl:w-fit px-10'
-                                        onClick={() => formik.handleSubmit()}
-                                        isLoading={updateProfile.isPending}
-                                    >
-                                        <div className='flex gap-2 items-center'>
-                                            <TickCircle size={20} color='white' />
-                                            <div>
-                                                {t('save')}
-                                            </div>
-                                        </div>
-                                    </Button>
-                                </div>
-
-                            </div>
-
-
-                        </div> */}
-
                         <div className='h-20 xl:hidden'></div>
                     </div>
             }

src/pages/profile/components/BirthDate.tsx

@@ -0,0 +1,80 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import DatePickerComponent from '../../../components/DatePicker'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    birthDate: string | null | undefined
+}
+
+const BirthDate: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.birthDate || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.birthDate || '')
+    }, [props.birthDate])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { birthDate: value }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = !value || value === (props.birthDate || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3'>
+            {
+                isReadOnly ? (
+                    <Input
+                        label={t('profile.date_of_birth')}
+                        value={value}
+                        readOnly
+                    />
+                ) : (
+                    <DatePickerComponent
+                        label={t('profile.date_of_birth')}
+                        onChange={setValue}
+                        placeholder=''
+                        defaulValue={value}
+                    />
+                )
+            }
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer 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>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default BirthDate

src/pages/profile/components/Email.tsx

@@ -1,14 +1,12 @@
-import { FC, Fragment, useState } from 'react'
+import { FC, Fragment, useEffect, useState } from 'react'
 import Input from '../../../components/Input'
-import { Edit, TickCircle } from 'iconsax-react'
+import { Edit } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../../components/Button'
 import { isEmail } from '../../../config/func'
-import DefaulModal from '../../../components/DefaulModal'
-import OTPInput from 'react-otp-input'
 import { useUpdateEmail } from '../hooks/useProfileData'
 import { ErrorType } from '../../../helpers/types'
-import { toast } from '../../../components/Toast';
+import { toast } from '../../../components/Toast'
 
 type Props = {
     email: string | null,
@@ -20,17 +18,20 @@ const Email: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const [email, setEmail] = useState<string>(props.email ? props.email : '')
     const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
-    const [showModal, setShowModal] = useState<boolean>(false)
-    const [code, setCode] = useState<string>('')
     const updateEmail = useUpdateEmail()
 
-    const handleShowModal = () => {
+    useEffect(() => {
-        updateEmail.mutate({ email: email }, {
+        setEmail(props.email ? props.email : '')
+    }, [props.email])
+
+    const handleSendVerification = () => {
+        updateEmail.mutate({ email }, {
             onSuccess: () => {
                 toast(t('profile.link_email'), 'success')
+                setIsReadOnly(true)
             },
             onError: (error: ErrorType) => {
-                toast(error.response?.data?.error.message[0], 'error')
+                toast(error.response?.data?.error?.message?.[0], 'error')
             }
         })
     }
@@ -45,17 +46,30 @@ const Email: FC<Props> = (props: Props) => {
                     onChange={(e) => setEmail(e.target.value)}
                 />
                 {
-                    !props.isVerified &&
+                    !props.isVerified && isReadOnly &&
                     <div className='text-[10px] absolute left-24 text-red-400 top-[34px]'>
                         {t('profile.email_not_verified')}
                     </div>
                 }
                 {
                     isReadOnly ?
-                        <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                        <div className='flex items-center gap-3 relative -top-3'>
-                            <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                            {
-                            <div>
+                                !props.isVerified && !!email &&
-                                {t('edit')}
+                                <button
+                                    type='button'
+                                    onClick={handleSendVerification}
+                                    disabled={updateEmail.isPending}
+                                    className='text-[#0047FF] text-xs whitespace-nowrap disabled:opacity-50'
+                                >
+                                    {t('profile.resend_email')}
+                                </button>
+                            }
+                            <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
                             </div>
                         </div>
                         :
@@ -63,63 +77,11 @@ const Email: FC<Props> = (props: Props) => {
                             label={t('save')}
                             className='px-4 w-fit'
                             disabled={!isEmail(email)}
-                            onClick={handleShowModal}
+                            onClick={handleSendVerification}
                             isLoading={updateEmail.isPending}
                         />
                 }
             </div>
-
-            <DefaulModal
-                open={showModal}
-                close={() => setShowModal(false)}
-                isHeader
-                title_header={t('profile.confrim_email')}
-            >
-                <div className='mt-7'>
-                    <div className='text-xs text-center'>
-                        کد تایید به ایمیل {email} ارسال شده است.برای تایید  کد مربوطه را وارد کنید.
-                    </div>
-
-                    <div className='mt-10'>کد تایید</div>
-                    <div className='mt-2 w-full flex justify-center dltr otp'>
-                        <OTPInput
-                            value={code}
-                            onChange={setCode}
-                            shouldAutoFocus
-                            renderInput={(props) =>
-                                <input
-                                    {...props}
-                                    type='tel'
-                                    autoComplete="one-time-code"
-                                    inputMode="numeric"
-                                    className='w-full h-[50px] flex-1 mx-2  bg-white bg-opacity-30 border rounded-2.5' />
-                            }
-                        />
-                    </div>
-
-                    <div className='mt-14 flex justify-end border-t border-border pt-8'>
-                        <div className='flex gap-5'>
-                            <Button
-                                className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
-                                label='لغو'
-                                onClick={() => setShowModal(false)}
-                            />
-                            <Button
-                                className='w-[150px] text-xs'
-                            >
-                                <div className='flex gap-2 items-center'>
-                                    <TickCircle
-                                        size={20}
-                                        color='white'
-                                    />
-                                    <div>{t('wallet.submit_slip')}</div>
-                                </div>
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-
-            </DefaulModal>
         </Fragment>
     )
 }

src/pages/profile/components/FirstName.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    firstName: string | null | undefined
+}
+
+const FirstName: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.firstName || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.firstName || '')
+    }, [props.firstName])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { firstName: value.trim() }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.trim().length < 2 || value.trim() === (props.firstName || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.first_name')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer 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>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default FirstName

src/pages/profile/components/LastName.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    lastName: string | null | undefined
+}
+
+const LastName: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.lastName || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.lastName || '')
+    }, [props.lastName])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { lastName: value.trim() }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.trim().length < 2 || value.trim() === (props.lastName || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.last_name')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer 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>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default LastName

src/pages/profile/components/NationalCode.tsx

@@ -0,0 +1,74 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    nationalCode: string | null | undefined
+}
+
+const NationalCode: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.nationalCode || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.nationalCode || '')
+    }, [props.nationalCode])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { nationalCode: value }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.length !== 10 || value === (props.nationalCode || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.national_code')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => {
+                    const next = e.target.value.replace(/\D/g, '').slice(0, 10)
+                    setValue(next)
+                }}
+                inputMode='numeric'
+                maxLength={10}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer 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>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default NationalCode

src/pages/profile/hooks/useProfileData.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import * as api from '../service/ProfileService'
 import { CheckUserNameType, UpdateEmailType, UpdatePhoneType, UpdateProfileType, VerifyPhoneType } from '../types/ProfileTypes';
 
@@ -16,14 +16,22 @@ export const useCheckUserName = () => {
 };
 
 export const useUpdateProfile = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
 };
 
 export const useUpdateEmail = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: UpdateEmailType) => api.updateEmail(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
 };
 
@@ -34,7 +42,11 @@ export const useUpdatePhone = () => {
 };
 
 export const useVerifyPhone = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: VerifyPhoneType) => api.verifyPhone(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
 };

src/pages/profile/types/ProfileTypes.ts

@@ -7,6 +7,7 @@ export type UpdateProfileType = {
   firstName?: string;
   lastName?: string;
   birthDate?: string;
+  nationalCode?: string;
   userName?: string;
   profilePic?: string;
   cityId?: string;

src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx

@@ -56,7 +56,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
 
   return (
     <>
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center justify-center sm:justify-start gap-2">
         {TABS.map(({ id, icon: Icon, labelKey }) => {
           const isActive = activeTab === id;
           const hasPopover = POPOVER_TABS.has(id);

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -209,7 +209,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
             isSaving={updateTask.isPending}
           />
 
-          <AttachmentList attachments={taskDetail?.attachments} />
+          <AttachmentList taskId={task.id} attachments={taskDetail?.attachments} />
 
           <CheckLists
             taskId={task.id}

src/pages/taskmanager/components/task-detail/TaskDetailPopoverPanel.tsx

@@ -10,8 +10,10 @@ type Props = {
   onClose?: () => void;
 };
 
+const MOBILE_BREAKPOINT = 640;
+
 const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, width = 300, onClose }) => {
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [position, setPosition] = useState<{ top: number; left: number; width: number } | null>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
@@ -21,12 +23,21 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
 
       const rect = anchor.getBoundingClientRect();
       const padding = 8;
-      let left = rect.right - width;
+      const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
-      left = Math.max(padding, Math.min(left, window.innerWidth - width - padding));
+      const panelWidth = Math.min(width, window.innerWidth - padding * 2);
+
+      let left: number;
+      if (isMobile) {
+        left = (window.innerWidth - panelWidth) / 2;
+      } else {
+        left = rect.right - panelWidth;
+        left = Math.max(padding, Math.min(left, window.innerWidth - panelWidth - padding));
+      }
 
       setPosition({
         top: rect.bottom + 8,
         left,
+        width: panelWidth,
       });
     };
 
@@ -59,7 +70,7 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
   return createPortal(
     <div
       ref={panelRef}
-      style={{ top: position.top, left: position.left, width }}
+      style={{ top: position.top, left: position.left, width: position.width }}
       className={clx("fixed z-[80] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80", className)}
     >
       {children}

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -17,7 +17,13 @@ import TaskDetailTimePopover from "./time/TaskDetailTimePopover";
 import type { TaskUser } from "./users/types";
 import type { UserItemType } from "../../../users/types/UserTypes";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
-import { useCreateCheckListItem, useCreateTaskAttachment, useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
+import {
+  useCreateCheckListItem,
+  useCreateTaskAttachment,
+  useCreateTaskRemark,
+  useDeleteTaskRemark,
+  useUpdateTask,
+} from "../../task/hooks/useTaskData";
 import { useSingleUpload } from "../../../service/hooks/useServiceData";
 import { ErrorType } from "../../../../helpers/types";
 
@@ -31,6 +37,7 @@ type Props = {
 const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId }) => {
   const { t } = useTranslation("global");
   const createTaskRemark = useCreateTaskRemark();
+  const deleteTaskRemark = useDeleteTaskRemark();
   const createCheckListItem = useCreateCheckListItem();
   const createTaskAttachment = useCreateTaskAttachment();
   const singleUpload = useSingleUpload();
@@ -224,6 +231,29 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     );
   };
 
+  const handleDeleteLabel = (id: string) => {
+    const effectiveTaskId = taskId || taskDetail?.id;
+    if (!effectiveTaskId) return;
+
+    deleteTaskRemark.mutate(
+      { id, taskId: effectiveTaskId },
+      {
+        onSuccess: () => {
+          setLabels((prev) => prev.filter((label) => label.id !== id));
+          setSelectedLabelIds((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
   const handleChecklistClose = () => {
     if (isChecklistOpen) onTabChange("checklist");
   };
@@ -338,7 +368,9 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
               onViewChange={setLabelsView}
               onToggle={handleLabelToggle}
               onCreate={handleCreate}
+              onDelete={handleDeleteLabel}
               isSubmitting={createTaskRemark.isPending}
+              isDeleting={deleteTaskRemark.isPending}
             />
           ) : null
         }

src/pages/taskmanager/components/task-detail/attachment/AttachmentItem.tsx

@@ -73,13 +73,31 @@ const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDele
           </PopoverButton>
 
           <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
-            <button type="button" onClick={onEdit} className="w-full text-sm text-right">
+            {({ close }) => (
-              ویرایش
+              <>
-            </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onEdit();
+                    close();
+                  }}
+                  className="w-full text-sm text-right"
+                >
+                  ویرایش
+                </button>
 
-            <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+                <button
-              پاک کردن
+                  type="button"
-            </button>
+                  onClick={() => {
+                    onDelete();
+                    close();
+                  }}
+                  className="w-full mt-3 text-sm text-right text-[#FF0000]"
+                >
+                  پاک کردن
+                </button>
+              </>
+            )}
           </PopoverPanel>
         </Popover>
       </div>

src/pages/taskmanager/components/task-detail/attachment/List.tsx

@@ -1,15 +1,28 @@
-import { type FC } from "react";
+import { useState, type FC } from "react";
 import { useTranslation } from "react-i18next";
-import AttachmentItem from "./AttachmentItem";
+import DefaulModal from "../../../../../components/DefaulModal";
-import type { TaskAttachment } from "./types";
+import ModalConfrim from "../../../../../components/ModalConfrim";
+import { toast } from "../../../../../components/Toast";
+import { ErrorType } from "../../../../../helpers/types";
+import { useSingleUpload } from "../../../../service/hooks/useServiceData";
+import { useDeleteTaskAttachment, useUpdateTaskAttachment } from "../../../task/hooks/useTaskData";
 import type { TaskAttachmentType } from "../../../task/types/TaskTypes";
+import AttachmentItem from "./AttachmentItem";
+import TaskDetailAttachmentForm from "./TaskDetailAttachmentForm";
+import type { TaskAttachment } from "./types";
 
 type Props = {
+  taskId: string;
   attachments?: TaskAttachmentType[];
 };
 
-const AttachmentList: FC<Props> = ({ attachments = [] }) => {
+const AttachmentList: FC<Props> = ({ taskId, attachments = [] }) => {
   const { t } = useTranslation("global");
+  const singleUpload = useSingleUpload();
+  const updateTaskAttachment = useUpdateTaskAttachment();
+  const deleteTaskAttachment = useDeleteTaskAttachment();
+  const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
+  const [editItem, setEditItem] = useState<TaskAttachment | null>(null);
 
   const mappedAttachments: TaskAttachment[] = attachments.map((item) => ({
     id: item.id,
@@ -22,6 +35,61 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
   const files = mappedAttachments.filter((item) => item.type === "file");
   const links = mappedAttachments.filter((item) => item.type === "link");
 
+  const handleDelete = () => {
+    if (!deleteItemId) return;
+
+    deleteTaskAttachment.mutate(
+      { id: deleteItemId, taskId },
+      {
+        onSuccess: () => {
+          setDeleteItemId(null);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleUpdate = async (data: { file?: File; title: string; linkId: string }) => {
+    if (!editItem) return;
+
+    let fileUrl = data.linkId.trim() || editItem.file || "";
+
+    if (data.file) {
+      const formData = new FormData();
+      formData.append("file", data.file);
+
+      try {
+        const uploadResult = await singleUpload.mutateAsync(formData);
+        fileUrl = uploadResult?.data?.url ?? "";
+      } catch (error) {
+        toast((error as ErrorType).response?.data?.error.message[0], "error");
+        return;
+      }
+    }
+
+    if (!fileUrl) return;
+
+    const title = data.title.trim() || data.file?.name || editItem.title;
+    const type = data.file ? "file" : editItem.type;
+
+    updateTaskAttachment.mutate(
+      { id: editItem.id, params: { file: fileUrl, title, type, taskId } },
+      {
+        onSuccess: () => {
+          setEditItem(null);
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const isUpdateSubmitting = singleUpload.isPending || updateTaskAttachment.isPending;
+
   if (mappedAttachments.length === 0) return null;
 
   return (
@@ -40,8 +108,8 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
                 createdAt={item.createdAt}
                 type="file"
                 url={item.file}
-                onEdit={() => {}}
+                onEdit={() => setEditItem(item)}
-                onDelete={() => {}}
+                onDelete={() => setDeleteItemId(item.id)}
               />
             ))}
           </div>
@@ -60,13 +128,38 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
                 createdAt={item.createdAt}
                 type="link"
                 url={item.file}
-                onEdit={() => {}}
+                onEdit={() => setEditItem(item)}
-                onDelete={() => {}}
+                onDelete={() => setDeleteItemId(item.id)}
               />
             ))}
           </div>
         </div>
       )}
+
+      <ModalConfrim
+        isOpen={deleteItemId !== null}
+        close={() => setDeleteItemId(null)}
+        onConfrim={handleDelete}
+        isLoading={deleteTaskAttachment.isPending}
+      />
+
+      <DefaulModal
+        open={editItem !== null}
+        close={() => setEditItem(null)}
+        isHeader
+        title_header={t("edit")}
+        width={420}
+      >
+        {editItem ? (
+          <TaskDetailAttachmentForm
+            initialValues={{ title: editItem.title, fileUrl: editItem.file, type: editItem.type }}
+            onClose={() => setEditItem(null)}
+            onSubmit={handleUpdate}
+            isSubmitting={isUpdateSubmitting}
+            submitLabel={t("save")}
+          />
+        ) : null}
+      </DefaulModal>
     </div>
   );
 };

src/pages/taskmanager/components/task-detail/attachment/TaskDetailAttachmentForm.tsx

@@ -4,22 +4,39 @@ import Button from "../../../../../components/Button";
 import Input from "../../../../../components/Input";
 import Select from "../../../../../components/Select";
 
+type InitialValues = {
+  title: string;
+  fileUrl?: string;
+  type: "file" | "link";
+};
+
 type Props = {
   onClose: () => void;
   onSubmit: (data: { file?: File; title: string; linkId: string }) => void;
   isSubmitting?: boolean;
+  initialValues?: InitialValues;
+  submitLabel?: string;
 };
 
-const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting = false }) => {
+const TaskDetailAttachmentForm: FC<Props> = ({
+  onClose,
+  onSubmit,
+  isSubmitting = false,
+  initialValues,
+  submitLabel,
+}) => {
   const { t } = useTranslation("global");
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState(initialValues?.title ?? "");
-  const [linkId, setLinkId] = useState("");
+  const [linkId, setLinkId] = useState(initialValues?.type === "link" ? (initialValues.fileUrl ?? "") : "");
+  const isEdit = Boolean(initialValues);
 
   const linkItems = [{ value: "", label: t("taskmanager.task_detail.none") }];
 
-  const canSubmit = Boolean(file) || Boolean(title.trim());
+  const canSubmit = isEdit
+    ? Boolean(title.trim()) || Boolean(file)
+    : Boolean(file) || Boolean(title.trim());
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selected = e.target.files?.[0];
@@ -35,6 +52,12 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
     });
   };
 
+  const currentFileLabel = file
+    ? file.name
+    : initialValues?.fileUrl
+      ? initialValues.fileUrl
+      : t("no_select_file");
+
   return (
     <div className="flex flex-col gap-3">
       <h3 className="text-xs font-bold text-center">{t("taskmanager.task_detail.attachment")}</h3>
@@ -43,7 +66,7 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
         <button type="button" onClick={() => fileInputRef.current?.click()} className="shrink-0 h-6 rounded-lg text-[11px] px-3 bg-secondary">
           {t("select_file")}
         </button>
-        <span className="text-[11px] text-description truncate">{file ? file.name : t("no_select_file")}</span>
+        <span className="text-[11px] text-description truncate">{currentFileLabel}</span>
         <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
       </div>
 
@@ -69,7 +92,7 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
           {t("cancel")}
         </Button>
         <Button type="button" onClick={handleSubmit} disabled={!canSubmit || isSubmitting} isLoading={isSubmitting} className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]">
-          {t("taskmanager.task_detail.insert")}
+          {submitLabel ?? t("taskmanager.task_detail.insert")}
         </Button>
       </div>
     </div>

src/pages/taskmanager/components/task-detail/comment/List.tsx

@@ -17,9 +17,10 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
   const createComment = useCreateTaskComment();
 
   const comments = getComments.data?.data ?? [];
+  const trimmedContent = content.trim();
+  const isSubmitDisabled = createComment.isPending || trimmedContent.length === 0;
 
   const handleSubmit = () => {
-    const trimmedContent = content.trim();
     if (!trimmedContent) return;
 
     createComment.mutate(
@@ -44,7 +45,7 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
         <button
           type="button"
           onClick={handleSubmit}
-          disabled={createComment.isPending || !content.trim()}
+          disabled={isSubmitDisabled}
           className="absolute top-2 left-2 z-10 h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
         >
           {t("taskmanager.task_detail.add_comment")}
@@ -54,7 +55,7 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
           onChange={(e) => setContent(e.target.value)}
           placeholder={t("taskmanager.task_detail.comment_placeholder")}
           rows={3}
-          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 pl-20 text-xs outline-none resize-none placeholder:text-description"
         />
       </div>
 
@@ -65,7 +66,11 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
       ) : (
         <div className="mt-3 flex flex-col gap-2">
           {comments.map((comment) => (
-            <CommentItem key={comment.id} comment={comment} taskId={taskId} />
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              taskId={taskId}
+            />
           ))}
         </div>
       )}

src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelsList.tsx

@@ -2,6 +2,7 @@ import { AddCircle, Edit } from "iconsax-react";
 import { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "../../../../../components/Button";
+import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import TaskDetailLabelCheckbox from "./TaskDetailLabelCheckbox";
 import type { TaskLabel } from "./types";
 
@@ -10,10 +11,20 @@ type Props = {
   selectedIds: Set<string>;
   onToggle: (id: string) => void;
   onEdit: (label: TaskLabel) => void;
+  onDelete: (id: string) => void;
   onCreateClick: () => void;
+  isDeleting?: boolean;
 };
 
-const TaskDetailLabelsList: FC<Props> = ({ labels, selectedIds, onToggle, onEdit, onCreateClick }) => {
+const TaskDetailLabelsList: FC<Props> = ({
+  labels,
+  selectedIds,
+  onToggle,
+  onEdit,
+  onDelete,
+  onCreateClick,
+  isDeleting = false,
+}) => {
   const { t } = useTranslation("global");
 
   return (
@@ -32,7 +43,8 @@ const TaskDetailLabelsList: FC<Props> = ({ labels, selectedIds, onToggle, onEdit
                 {label.title && <span className="text-xs font-medium truncate">{label.title}</span>}
               </div>
 
-              <Edit onClick={() => onEdit(label)} size={16} color="#0047FF" />
+              <Edit onClick={() => onEdit(label)} size={16} color="#0047FF" className="shrink-0 cursor-pointer" />
+              <TrashWithConfrim onDelete={() => onDelete(label.id)} isLoading={isDeleting} size={16} color="#FF0000" />
             </div>
           );
         })}

src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelsPopover.tsx

@@ -10,7 +10,9 @@ type Props = {
   onViewChange: (view: LabelsView) => void;
   onToggle: (id: string) => void;
   onCreate: (title: string, color: string) => void;
+  onDelete: (id: string) => void;
   isSubmitting?: boolean;
+  isDeleting?: boolean;
 };
 
 const TaskDetailLabelsPopover: FC<Props> = ({
@@ -20,7 +22,9 @@ const TaskDetailLabelsPopover: FC<Props> = ({
   onViewChange,
   onToggle,
   onCreate,
+  onDelete,
   isSubmitting = false,
+  isDeleting = false,
 }) => {
   return (
     <>
@@ -30,7 +34,9 @@ const TaskDetailLabelsPopover: FC<Props> = ({
           selectedIds={selectedIds}
           onToggle={onToggle}
           onEdit={() => undefined}
+          onDelete={onDelete}
           onCreateClick={() => onViewChange("create")}
+          isDeleting={isDeleting}
         />
       ) : (
         <TaskDetailNewLabelForm

src/pages/taskmanager/task/hooks/useTaskData.ts

@@ -6,7 +6,9 @@ import {
   CreateTaskAttachmentType,
   CreateTaskRemarkType,
   CreateTaskType,
+  GetTaskDetailResponse,
   UpdateCheckListItemType,
+  UpdateTaskAttachmentType,
   UpdateTaskType,
 } from "../types/TaskTypes";
 
@@ -117,6 +119,18 @@ export const useCreateTaskRemark = () => {
   });
 };
 
+export const useDeleteTaskRemark = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskRemark(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
 export const useCreateCheckListItem = () => {
   const queryClient = useQueryClient();
 
@@ -136,7 +150,37 @@ export const useUpdateCheckListItem = () => {
   return useMutation({
     mutationFn: ({ id, params }: { id: string; params: UpdateCheckListItemType; taskId: string }) =>
       api.updateCheckListItem(id, params),
-    onSuccess: (_data, variables) => {
+    onMutate: async ({ id, params, taskId }) => {
+      await queryClient.cancelQueries({ queryKey: ["task-detail", taskId] });
+
+      const previous = queryClient.getQueryData<GetTaskDetailResponse>(["task-detail", taskId]);
+
+      queryClient.setQueryData<GetTaskDetailResponse>(["task-detail", taskId], (current) => {
+        if (!current?.data?.checkListItems) return current;
+
+        const checkListItems = current.data.checkListItems.map((item) =>
+          item.id === id ? { ...item, isDone: params.isDone } : item,
+        );
+        const completedCheckListItemCount = checkListItems.filter((item) => item.isDone).length;
+
+        return {
+          ...current,
+          data: {
+            ...current.data,
+            checkListItems,
+            completedCheckListItemCount,
+          },
+        };
+      });
+
+      return { previous };
+    },
+    onError: (_error, variables, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(["task-detail", variables.taskId], context.previous);
+      }
+    },
+    onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
       queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
@@ -169,3 +213,30 @@ export const useCreateTaskAttachment = () => {
     },
   });
 };
+
+export const useUpdateTaskAttachment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateTaskAttachmentType }) =>
+      api.updateTaskAttachment(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.params.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
+export const useDeleteTaskAttachment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskAttachment(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};

src/pages/taskmanager/task/service/TaskService.ts

@@ -11,6 +11,7 @@ import {
   GetTasksByTaskPhaseResponse,
   UpdateCheckListItemResponse,
   UpdateCheckListItemType,
+  UpdateTaskAttachmentType,
   UpdateTaskType,
 } from "../types/TaskTypes";
 
@@ -63,6 +64,11 @@ export const createTaskRemark = async (params: CreateTaskRemarkType): Promise<Cr
   return data;
 };
 
+export const deleteTaskRemark = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/remarks/${id}`);
+  return data;
+};
+
 export const createCheckListItem = async (params: CreateCheckListItemType): Promise<CreateCheckListItemResponse> => {
   const { data } = await axios.post(`/task-manager/check-list-items`, params);
   return data;
@@ -85,3 +91,13 @@ export const createTaskAttachment = async (params: CreateTaskAttachmentType) =>
   const { data } = await axios.post(`/task-manager/attachments`, params);
   return data;
 };
+
+export const updateTaskAttachment = async (id: string, params: UpdateTaskAttachmentType) => {
+  const { data } = await axios.patch(`/task-manager/attachments/${id}`, params);
+  return data;
+};
+
+export const deleteTaskAttachment = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/attachments/${id}`);
+  return data;
+};

src/pages/taskmanager/task/types/TaskTypes.ts

@@ -111,6 +111,13 @@ export type CreateTaskAttachmentType = {
   taskId: string;
 };
 
+export type UpdateTaskAttachmentType = {
+  file: string;
+  title: string;
+  type: "file" | "link";
+  taskId: string;
+};
+
 export type TaskDetailType = {
   id: string;
   createdAt: string;

src/pages/taskmanager/workspace/List.tsx

@@ -2,11 +2,11 @@ import { Add, Edit, Trash } from "iconsax-react";
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { toast } from "../../../components/Toast";
 import Button from "../../../components/Button";
 import DeleteNameConfirmModal from "../../../components/DeleteNameConfirmModal";
 import PageLoading from "../../../components/PageLoading";
 import Td from "../../../components/Td";
+import { toast } from "../../../components/Toast";
 import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useDeleteWorkspace, useGetWorkspaces } from "./hooks/useWorkspaceData";
@@ -85,7 +85,7 @@ const WorkspaceList: FC = () => {
                   <Td text="">
                     <Link to={Pages.taskmanager.projectList + item.id}>
                       <Button
-                        label="مدیریت پروژه ها"
+                        label="مشاهده پروژه ها"
                         className="bg-blue-400 w-fit px-3"
                       />
                     </Link>

src/pages/users/List.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye, Trash } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
 import { Link, useNavigate } from 'react-router-dom'
@@ -12,6 +12,7 @@ import PageLoading from '../../components/PageLoading'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
 import Pagination from '../../components/Pagination'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
 const UsersList: FC = () => {
 
     const navigate = useNavigate()
@@ -90,13 +91,15 @@ const UsersList: FC = () => {
                                                 <Td text={item.firstName + ' ' + item.lastName} />
                                                 <Td text={item.email} />
                                                 <Td text={''}>
-                                                    {
+                                                    <div className='flex flex-wrap gap-2'>
-                                                        item.roles.map((role) => (
+                                                        {
-                                                            <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
+                                                            item.roles.map((role) => (
-                                                                {role.name}
+                                                                <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
-                                                            </div>
+                                                                    {role.name}
-                                                        ))
+                                                                </div>
-                                                    }
+                                                            ))
+                                                        }
+                                                    </div>
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-2'>
@@ -104,10 +107,11 @@ const UsersList: FC = () => {
                                                             <Eye size={20} color='#8C90A3' />
                                                         </Link>
 
-                                                        <Trash
+                                                        <TrashWithConfrim
                                                             size={20}
                                                             color='#8C90A3'
-                                                            onClick={() => handleDeleteUser(item.id)}
+                                                            onDelete={() => handleDeleteUser(item.id)}
+                                                            isLoading={deleteUser.isPending}
                                                         />
                                                     </div>
                                                 </Td>