update service

src/components/UploadBoxDraggble.tsx

@@ -1,5 +1,5 @@
 import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 
@@ -8,12 +8,16 @@ type Props = {
     onChange: (file: File[]) => void;
     isMultiple?: boolean;
     isFile?: boolean,
+    preview?: string[],
+    onChangePreview?: (preview: string[]) => void
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
 
-    const [files, setFiles] = useState<File[]>([])
     const { t } = useTranslation('global')
+    const [files, setFiles] = useState<File[]>([])
+    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
+    const [isFill, setIsFill] = useState<boolean>(false)
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
         if (props.isMultiple) {
@@ -36,6 +40,27 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
         props.onChange(array)
     }
 
+    const handleDeletePreview = (index: number) => {
+        const array = [...perviews];
+        array.splice(index, 1);
+        setPerviews(array);
+        if (props.onChangePreview) {
+            props.onChangePreview(array);
+        }
+    }
+
+    useEffect(() => {
+
+        if (props.preview && props.preview.length > 0 && !isFill) {
+            setPerviews(props.preview)
+            console.log('preview', props.preview);
+
+            setIsFill(true)
+        }
+
+    }, [props.preview, isFill])
+
+
     return (
         <div>
             <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
@@ -58,8 +83,22 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
             </div>
 
             {
-                files.length > 0 && (
+                files.length > 0 || perviews ? (
                     <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            perviews && perviews.map((item, index) => {
+                                return (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <div key={index} className='flex relative items-center gap-2'>
+                                            <img src={item} className='size-10 rounded-full object-cover' />
+                                            <div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                <CloseCircle className='size-4 ' color='red' />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        }
                         {
                             files.map((file, index) => {
                                 if (props.isFile) {
@@ -88,7 +127,7 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                             })
                         }
                     </div>
-                )
+                ) : null
             }
 
         </div>

src/config/Pages.ts

@@ -9,6 +9,7 @@ export const Pages = {
     mine: "/services",
     other: "/other-service",
     detail: "/services/detail/",
+    update: "/services/update/",
     add: "/services/add",
     list: "/services/list",
     category: "/services/category",
@@ -72,6 +73,7 @@ export const Pages = {
   ads: {
     list: "/ads/list",
     create: "/ads/create",
+    update: "/ads/update/",
   },
   blog: {
     list: "/blog/list",

src/pages/ads/AdsList.tsx

@@ -1,14 +1,14 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
+import { Add, Eye, Trash } from 'iconsax-react'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import DatePickerComponent from '../../components/DatePicker'
 import Select from '../../components/Select'
 import Input from '../../components/Input'
-import { useGetAdsList } from './hooks/useAdsData'
+import { useDeleteAds, useGetAdsList } from './hooks/useAdsData'
 import { AdsItemType } from './types/AdsTypes'
 import moment from 'moment-jalaali'
 import ToggleStatusAds from './components/ToggleStatus'
@@ -22,6 +22,15 @@ const AddList: FC = () => {
     const [since, setSince] = useState<string>('')
     const [page, setPage] = useState<number>(1)
     const getAds = useGetAdsList(page, search, isActive, since)
+    const deleteAds = useDeleteAds()
+
+    const handleDelete = (id: string) => {
+        deleteAds.mutate(id, {
+            onSuccess: () => {
+                getAds.refetch()
+            }
+        })
+    }
 
     return (
         <div className='mt-4 min-h-[500px]'>
@@ -120,9 +129,12 @@ const AddList: FC = () => {
                                                     />
                                                 </Td>
                                                 <Td text={''}>
-                                                    <Link to={Pages.ticket.detail + '1'}>
+                                                    <div className='flex gap-3'>
-                                                        <Eye size={20} color='#8C90A3' />
+                                                        <Link to={Pages.ads.update + item.id}>
-                                                    </Link>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+                                                        <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' />
+                                                    </div>
                                                 </Td>
                                             </tr>
                                         )

src/pages/ads/Update.tsx

@@ -0,0 +1,258 @@
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Button from '../../components/Button'
+import SwitchComponent from '../../components/Switch'
+import { TickCircle, Link2 } from 'iconsax-react'
+import DatePickerComponent from '../../components/DatePicker'
+import { useFormik } from 'formik'
+import { AdsDisplayLocation, CreateAdsType } from './types/AdsTypes'
+import * as Yup from 'yup'
+import UploadBoxDraggble from '../../components/UploadBoxDraggble'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { useGetDetailAds, useUpdateAds } from './hooks/useAdsData'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+import { clx } from '../../helpers/utils'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import moment from 'moment-jalaali'
+
+const UpdateAds: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const singleUpload = useSingleUpload()
+    const updateAds = useUpdateAds(id ? id : '')
+    const getDetail = useGetDetailAds(id)
+
+    const formik = useFormik<CreateAdsType>({
+        initialValues: {
+            displayLocation: '',
+            endDate: '',
+            imageUrl: '',
+            isActive: true,
+            link: '',
+            serviceId: undefined,
+            startDate: '',
+            title: ''
+        },
+        validationSchema: Yup.object().shape({
+            title: Yup.string().required(t('errors.required')),
+            displayLocation: Yup.string().required(t('errors.required')),
+            endDate: Yup.string().required(t('errors.required')),
+            link: Yup.string().required(t('errors.required')),
+            startDate: Yup.string().required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            if (file) {
+                const formData = new FormData()
+                formData.append('file', file)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.imageUrl = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            }
+
+            updateAds.mutate(values, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                    navigate(Pages.ads.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+
+        }
+    })
+
+    useEffect(() => {
+
+        if (getDetail.data) {
+            console.log(getDetail.data);
+
+            formik.setValues({
+                displayLocation: getDetail.data?.data?.ads?.displayLocation,
+                endDate: moment(getDetail.data?.data?.ads?.endDate).format('jYYYY-jMM-jDD'),
+                imageUrl: getDetail.data?.data?.ads?.imageUrl,
+                isActive: getDetail.data?.data?.ads?.isActive,
+                link: getDetail.data?.data?.ads?.link,
+                serviceId: getDetail.data?.data?.ads?.serviceId,
+                startDate: moment(getDetail.data?.data?.ads?.startDate).format('jYYYY-jMM-jDD'),
+                title: getDetail.data?.data?.ads?.title
+            })
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getDetail.data])
+
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('ads.new_ads')}
+                </div>
+                <Button
+                    className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateAds.isPending || singleUpload.isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='white' />
+                        <div>
+                            {t('ads.submit')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
+                <div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                    <div className='mt-6'>
+                        <Input
+                            label={t('ads.title')}
+                            placeholder={t('ads.enter_your_title')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+                    </div>
+                    <div className='mt-6 rowTwoInput'>
+                        <DatePickerComponent
+                            label={t('ads.startDate')}
+                            onChange={(value) => formik.setFieldValue('startDate', moment(value, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
+                            placeholder=''
+                            error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
+                            defaulValue={formik.values.startDate}
+                        />
+                        <DatePickerComponent
+                            label={t('ads.endDate')}
+                            onChange={(value) => formik.setFieldValue('endDate', moment(value, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
+                            placeholder=''
+                            error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
+                            defaulValue={formik.values.endDate}
+                        />
+                    </div>
+                    <div className='mt-6 relative'>
+                        <Input
+                            label={t('ads.link')}
+                            placeholder={t('ads.enter_your_link')}
+                            {...formik.getFieldProps('link')}
+                            error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
+                        />
+                        <Link2 size={20} color='blue' className={clx(
+                            'absolute left-4 bottom-[10px] cursor-pointer',
+                            formik.touched.link && formik.errors.link ? 'bottom-[31px]' : ''
+                        )} />
+                    </div>
+                </div>
+                <div className='min-h-[calc(100vh-201px)] bg-white w-full xl:w-sidebar  py-10 px-5 h-fit rounded-3xl'>
+                    <div className='text-sm flex items-center justify-between'>
+                        <p>
+                            وضعیت تبلیغ
+                        </p>
+                        <div className='flex gap-1 text-xs items-center text-description'>
+                            <div>
+                                {t('ads.deactive')}
+                            </div>
+                            <SwitchComponent
+                                active={formik.values.isActive}
+                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                            />
+                        </div>
+                    </div>
+                    <p className='mt-6 text-sm'>{t('ads.location')}</p>
+
+                    <div className='p-2 border border-[##D0D0D0] rounded-lg mt-1'>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.HOMEPAGE_TOP}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.HOMEPAGE_TOP)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.HOMEPAGE_TOP}`)}
+                            </div>
+                        </div>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.SINGLE_SERVICE_PAGE}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.SINGLE_SERVICE_PAGE)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.SINGLE_SERVICE_PAGE}`)}
+                            </div>
+                        </div>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.MY_SERVICES_PAGE}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.MY_SERVICES_PAGE)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.MY_SERVICES_PAGE}`)}
+                            </div>
+                        </div>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.OTHER_SERVICES_TOP}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.OTHER_SERVICES_TOP)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.OTHER_SERVICES_TOP}`)}
+                            </div>
+                        </div>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.OTHER_SERVICES_LEFT}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.OTHER_SERVICES_LEFT)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.OTHER_SERVICES_LEFT}`)}
+                            </div>
+                        </div>
+                        <div className='flex items-center py-2'>
+                            <div>
+                                <CheckBoxComponent
+                                    checked={formik.values.displayLocation === AdsDisplayLocation.SERVICE}
+                                    onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.SERVICE)}
+                                />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                {t(`ads.${AdsDisplayLocation.SERVICE}`)}
+                            </div>
+                        </div>
+
+                    </div>
+                    <div className='mt-8'>
+                        <UploadBoxDraggble
+                            label={t('ads.upload_picture')}
+                            onChange={(value) => setFile(value[0])}
+                        />
+                    </div>
+                    <div className='mt-4'>
+                        <img src={formik.values.imageUrl} alt='ads' className='size-8 object-cover rounded-lg' />
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default UpdateAds

src/pages/ads/hooks/useAdsData.ts

@@ -25,3 +25,23 @@ export const useToggleStatusAds = () => {
     mutationFn: (variables: string) => api.toggleStatusAds(variables),
   });
 };
+
+export const useGetDetailAds = (id?: string) => {
+  return useQuery({
+    queryKey: ["ads-detail", id],
+    queryFn: () => api.getDetailAds(id ? id : ""),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateAds = (id: string) => {
+  return useMutation({
+    mutationFn: (variables: CreateAdsType) => api.updateAds(id, variables),
+  });
+};
+
+export const useDeleteAds = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.deleteAds(variables),
+  });
+};

src/pages/ads/service/AdsService.ts

@@ -31,3 +31,18 @@ export const toggleStatusAds = async (id: string) => {
   const { data } = await axios.patch(`/advertise/toggle-status/${id}`);
   return data;
 };
+
+export const getDetailAds = async (id: string) => {
+  const { data } = await axios.get(`/advertise/${id}`);
+  return data;
+};
+
+export const updateAds = async (id: string, params: CreateAdsType) => {
+  const { data } = await axios.patch(`/advertise/${id}`, params);
+  return data;
+};
+
+export const deleteAds = async (id: string) => {
+  const { data } = await axios.delete(`/advertise/${id}`);
+  return data;
+};

src/pages/service/List.tsx

@@ -154,7 +154,7 @@ const ListService: FC = () => {
                                                     />
                                                 </Td>
                                                 <Td text={''}>
-                                                    <Link to={Pages.ticket.detail + item.id}>
+                                                    <Link to={Pages.services.update + item.id}>
                                                         <Eye size={20} color='#8C90A3' />
                                                     </Link>
                                                 </Td>

src/pages/service/UpdateService.tsx

@@ -0,0 +1,284 @@
+import { FC, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import Quill from 'quill';
+import Button from '../../components/Button';
+import { TickCircle } from 'iconsax-react';
+import { useFormik } from 'formik';
+import { CreateServiceType } from './types/ServiceTypes';
+import DatePickerComponent from '../../components/DatePicker';
+import * as Yup from 'yup'
+import { useGetDetailService, useMultiUpload, useSingleUpload, useUpdateService } from './hooks/useServiceData';
+import moment from 'moment-jalaali';
+import { ErrorType } from '../../helpers/types';
+import { toast } from 'react-toastify';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Pages } from '../../config/Pages';
+import UpdateServiceSidebar from './components/UpdateServiceSidebar';
+
+const UpdateService: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const multiUpload = useMultiUpload()
+    const editorRef = useRef<HTMLDivElement | null>(null);
+    const createService = useUpdateService(id ? id : '')
+    const [iconFile, setIconFile] = useState<File>()
+    const [imagesFile, setImagesFile] = useState<File[]>()
+    const getDetailService = useGetDetailService(id)
+
+    useEffect(() => {
+        const quill = new Quill('#editor', {
+            theme: 'snow',
+            modules: {
+                toolbar: [
+                    [{ header: '1' }, { header: '2' }, { font: [] }],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    ['bold', 'italic', 'underline'],
+                    ['link', 'image'],
+                    [{ align: [] }],
+                    ['clean']
+                ]
+            }
+        });
+        quill.on('text-change', () => {
+            if (editorRef.current) {
+                const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
+                formik.setFieldValue('metaDescription', html);
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const formik = useFormik<CreateServiceType>({
+        initialValues: {
+            author: '',
+            categoryId: '',
+            description: '',
+            icon: '',
+            images: [],
+            isDanakSuggest: false,
+            link: '',
+            metaDescription: '',
+            name: '',
+            title: '',
+            serviceLanguage: '',
+            softwareLanguage: '',
+            userCount: 0,
+            createDate: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string().required(t('errors.required')),
+            title: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+            author: Yup.string().required(t('errors.required')),
+            createDate: Yup.date().required(t('errors.required')),
+            userCount: Yup.number().required(t('errors.required')),
+            serviceLanguage: Yup.string().required(t('errors.required')),
+            metaDescription: Yup.string().required(t('errors.required')),
+            link: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+
+
+            if (iconFile) {
+                const formData = new FormData()
+                formData.append('file', iconFile)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.icon = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            }
+
+            if (imagesFile && imagesFile.length > 0) {
+                const images = new FormData()
+                imagesFile.forEach(file => {
+                    images.append('files', file)
+                })
+                await multiUpload.mutateAsync(images, {
+                    onSuccess: async (data) => {
+                        console.log('values.images', values.images);
+
+                        values.images = [...(values.images || []), ...data.data.map((item: { url: string }) => item?.url)]
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            }
+
+            const params = {
+                ...values,
+                userCount: +values.userCount,
+                createDate: moment(values.createDate).format('YYYY-MM-DD'),
+            }
+            createService.mutate(params, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    toast.success(t('success'))
+                    navigate(Pages.services.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+
+        },
+    })
+
+    useEffect(() => {
+        if (getDetailService.data) {
+            const data = getDetailService.data?.data?.danakService;
+            formik.setValues({
+                author: data?.author,
+                categoryId: data?.category?.id,
+                description: data?.description,
+                icon: data?.icon,
+                images: data?.images?.map((image: { imageUrl: string }) => image.imageUrl),
+                isDanakSuggest: data?.isDanakSuggest,
+                link: data?.link,
+                metaDescription: data?.metaDescription,
+                name: data?.name,
+                title: data?.title,
+                serviceLanguage: data?.serviceLanguage,
+                softwareLanguage: data?.softwareLanguage,
+                userCount: data?.userCount || 0,
+                createDate: moment(data?.createDate).format('YYYY-MM-DD'),
+            });
+            const editorElement = editorRef.current?.querySelector('.ql-editor');
+            if (editorElement) {
+                editorElement.innerHTML = data?.metaDescription || '';
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getDetailService.data]);
+
+    return (
+        <div className='w-full mt-4'>
+
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('service.add_service')}
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={createService.isPending || singleUpload.isPending || multiUpload.isPending}
+                    >
+                        <div className='flex gap-2'>
+                            <TickCircle
+                                className='size-5'
+                                color='#fff'
+                            />
+                            <div>{t('service.submit_service')}</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+            <div className='flex gap-6'>
+                <div className='flex-1'>
+
+
+                    <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                        <div className='rowTwoInput'>
+                            <Input
+                                label={t('service.service_name')}
+                                {...formik.getFieldProps('name')}
+                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                            />
+
+                            <Input
+                                label={t('service.title')}
+                                {...formik.getFieldProps('title')}
+                                error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                            />
+                        </div>
+
+                        <div className='mt-8 rowTwoInput'>
+                            <Input
+                                label={t('service.description_short')}
+                                {...formik.getFieldProps('description')}
+                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                            />
+
+                            <Input
+                                label={t('service.software_langauge')}
+                                {...formik.getFieldProps('softwareLanguage')}
+                                error_text={formik.touched.softwareLanguage && formik.errors.softwareLanguage ? formik.errors.softwareLanguage : ''}
+                            />
+
+                        </div>
+
+                        <div className='mt-8 rowTwoInput'>
+                            <Input
+                                label={t('service.company_developed')}
+                                {...formik.getFieldProps('author')}
+                                error_text={formik.touched.author && formik.errors.author ? formik.errors.author : ''}
+                            />
+
+                            <DatePickerComponent
+                                label={t('service.year_make')}
+                                onChange={(d) => formik.setFieldValue('createDate', d)}
+                                placeholder={t('select')}
+                                error_text={formik.touched.createDate && formik.errors.createDate ? formik.errors.createDate : ''}
+                                defaulValue={formik.values.createDate}
+                            />
+                        </div>
+
+                        <div className='mt-8 rowTwoInput'>
+                            <Input
+                                label={t('service.user_count')}
+                                {...formik.getFieldProps('userCount')}
+                                error_text={formik.touched.userCount && formik.errors.userCount ? formik.errors.userCount : ''}
+                            />
+
+                            <Select
+                                label={t('service.lang_app')}
+                                items={[
+                                    {
+                                        label: 'فارسی',
+                                        value: 'fa'
+                                    },
+                                    {
+                                        label: 'انگلیسی',
+                                        value: 'en'
+                                    },
+                                ]}
+                                placeholder={t('select')}
+                                name='serviceLanguage'
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.serviceLanguage && formik.errors.serviceLanguage ? formik.errors.serviceLanguage : ''}
+                                value={formik.values.serviceLanguage}
+                            />
+                        </div>
+
+                        <div className='mt-8'>
+                            <div ref={editorRef} id='editor' style={{ minHeight: '120px' }}></div>
+                        </div>
+                    </div>
+                </div>
+
+                {
+                    getDetailService.data && (
+                        <UpdateServiceSidebar
+                            formik={formik}
+                            onChangeIconFile={(file: File) => setIconFile(file)}
+                            onChangeImagesFile={(file: File[]) => setImagesFile(file)}
+                        />
+                    )
+                }
+            </div>
+
+        </div>
+    )
+}
+
+export default UpdateService

src/pages/service/components/AddServiceSidebar.tsx

@@ -46,8 +46,7 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
             <div className='mt-8'>
                 <Input
                     label={t('service.service_link')}
-                    name='link'
+                    {...formik.getFieldProps('link')}
-                    onChange={formik.handleChange}
                     error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
                 />
             </div>

src/pages/service/components/UpdateServiceSidebar.tsx

@@ -0,0 +1,104 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import CheckBoxComponent from '../../../components/CheckBoxComponent'
+import Input from '../../../components/Input'
+import UploadBoxDraggble from '../../../components/UploadBoxDraggble'
+import { FormikProps } from 'formik'
+import { CreateServiceType, ServiceCategoryType } from '../types/ServiceTypes'
+import { useGetCategoryParents, useGetDetailService } from '../hooks/useServiceData'
+import { useParams } from 'react-router-dom'
+
+type Props = {
+    formik: FormikProps<CreateServiceType>,
+    onChangeIconFile: (file: File) => void,
+    onChangeImagesFile: (file: File[]) => void
+}
+
+const UpdateServiceSidebar: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const { id } = useParams()
+    const { formik } = props
+
+    const getCategory = useGetCategoryParents()
+    const { data } = useGetDetailService(id)
+
+
+    return (
+        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+            <div className='flex justify-between'>
+                <div className='text-sm'>
+                    {t('service.service_status')}
+                </div>
+                {/* <div className='flex gap-1'>
+                    <SwitchComponent
+                        active={formik.values.isDanakSuggest}
+                        onChange={(e) => formik.setFieldValue('isDanakSuggest', e)}
+                    />
+                </div> */}
+            </div>
+
+            <div className='mt-8 items-center flex '>
+                <CheckBoxComponent
+                    checked={formik.values.isDanakSuggest}
+                    onChange={(e) => formik.setFieldValue('isDanakSuggest', e.target.checked)}
+                />
+                <div>{t('service.special_danak')}</div>
+            </div>
+
+            <div className='mt-8'>
+                <Input
+                    label={t('service.service_link')}
+                    {...formik.getFieldProps('link')}
+                    error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <div>{t('service.category')}</div>
+                <div className='mt-2 border border-border rounded-xl p-4'>
+                    {
+                        getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => {
+                            return (
+                                <div key={item.id} className='flex items-center'>
+                                    <CheckBoxComponent
+                                        checked={formik.values.categoryId === item.id}
+                                        onChange={(e) => formik.setFieldValue('categoryId', e.target.checked ? item.id : '')}
+                                    />
+                                    <div>{item.title}</div>
+                                </div>
+                            )
+                        })
+                    }
+
+                </div>
+            </div>
+
+            <div className='mt-8'>
+                <div>{t('service.service_icon')}</div>
+                <div className='mt-2'>
+                    <UploadBoxDraggble
+                        label={t('service.upload_icon_service')}
+                        onChange={(file: File[]) => props.onChangeIconFile(file[0])}
+                        preview={[data?.data?.danakService?.icon]}
+                        onChangePreview={(images: string[]) => formik.setFieldValue('icon', images[0])}
+                    />
+                </div>
+            </div>
+            <div className='mt-8'>
+                <div>{t('service.service_images')}</div>
+                <div className='mt-2'>
+                    <UploadBoxDraggble
+                        label={t('service.upload_images_service')}
+                        onChange={props.onChangeImagesFile}
+                        isMultiple
+                        preview={data?.data?.danakService?.images?.map((image: { imageUrl: string }) => image.imageUrl) || []}
+                        onChangePreview={(images: string[]) => formik.setFieldValue('images', images)}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateServiceSidebar

src/pages/service/hooks/useServiceData.ts

@@ -146,3 +146,18 @@ export const useChangeStatusReview = () => {
       api.changeStatusReview(variables),
   });
 };
+
+export const useGetDetailService = (id?: string) => {
+  return useQuery({
+    queryKey: ["service-detail", id],
+    queryFn: () => api.getServiceDetail(id ? id : ""),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateService = (id: string) => {
+  return useMutation({
+    mutationFn: (variables: CreateServiceType) =>
+      api.updateService(id, variables),
+  });
+};

src/pages/service/service/ServiceService.ts

@@ -130,3 +130,13 @@ export const changeStatusReview = async (params: {
   );
   return data;
 };
+
+export const getServiceDetail = async (id: string) => {
+  const { data } = await axios.get(`/danak-services/${id}`);
+  return data;
+};
+
+export const updateService = async (id: string, params: CreateServiceType) => {
+  const { data } = await axios.patch(`/danak-services/${id}`, params);
+  return data;
+};

src/router/Main.tsx

@@ -55,6 +55,8 @@ import Plans from '../pages/service/Plans'
 import GroupCreate from '../pages/users/GroupCreate'
 import GroupList from '../pages/users/GroupList'
 import Reviews from '../pages/service/Reviews'
+import UpdateAds from '../pages/ads/Update'
+import UpdateService from '../pages/service/UpdateService'
 
 const MainRouter: FC = () => {
 
@@ -79,6 +81,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.services.detail + ':id'} element={<DetailService />} />
                             <Route path={Pages.services.add} element={<AddService />} />
                             <Route path={Pages.services.list} element={<ListService />} />
+                            <Route path={Pages.services.update + ':id'} element={<UpdateService />} />
                             <Route path={Pages.services.category} element={<Category />} />
                             <Route path={Pages.services.plan + ':id'} element={<Plans />} />
                             <Route path={Pages.services.review} element={<Reviews />} />
@@ -88,6 +91,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                             <Route path={Pages.ads.list} element={<AdsList />} />
                             <Route path={Pages.ads.create} element={<CreateAds />} />
+                            <Route path={Pages.ads.update + ':id'} element={<UpdateAds />} />
                             <Route path={Pages.discount.list} element={<DiscountsList />} />
                             <Route path={Pages.discount.create} element={<CreateDiscount />} />
                             <Route path={Pages.blog.list} element={<BlogList />} />