slider

src/pages/company/Update.tsx

@@ -244,7 +244,7 @@ const UpdateCompany: FC = () => {
                 >
                     <div className='flex items-center gap-2'>
                         <TickCircle size={20} color='white' />
-                        <div>ثبت شرکت</div>
+                        <div>بروزرسانی شرکت</div>
                     </div>
                 </Button>
             </div>

src/pages/slider/Create.tsx

@@ -0,0 +1,140 @@
+import { useFormik } from 'formik'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateSliderType } from './types/SliderTypes'
+import * as Yup from 'yup'
+import Button from '../../components/Button'
+import { useCreateSlider } from './hooks/useSliderData'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Textarea from '../../components/Textarea'
+import UploadBox from '../../components/UploadBox'
+import SwitchComponent from '../../components/Switch'
+import { toast } from 'react-toastify'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { Pages } from '../../config/Pages'
+import { useNavigate } from 'react-router-dom'
+import { ErrorType } from '../../helpers/types'
+const CreateSlider: FC = () => {
+
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const createSlider = useCreateSlider()
+    const singleUpload = useSingleUpload()
+    const [file, setFile] = useState<File | null>(null)
+    const formik = useFormik<CreateSliderType>({
+        initialValues: {
+            title: '',
+            description: '',
+            imageUrl: '',
+            link: '',
+            order: 0,
+            isActive: true,
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+            link: Yup.string().required(t('errors.required')),
+            order: Yup.number().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (!file) {
+                toast.error(t('slider.image_required'))
+                return
+            }
+
+            const formData = new FormData()
+            formData.append('file', file)
+            await singleUpload.mutateAsync(formData, {
+                onSuccess: (data) => {
+                    values.imageUrl = data?.data?.url
+                }
+            })
+
+            values.order = +values.order
+
+            createSlider.mutate(values, {
+                onSuccess: () => {
+                    navigate(Pages.sliders.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        }
+    })
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('slider.new_slider')}
+                </div>
+                <Button
+                    className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createSlider.isPending || singleUpload.isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='white' />
+                        <div>
+                            {t('slider.submit')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex-1 mt-9 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+                <div className='flex flex-col gap-6'>
+                    <div className='rowTwoInput'>
+                        <Input
+                            label={t('slider.title')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+
+                        <Input
+                            label={t('slider.link')}
+                            {...formik.getFieldProps('link')}
+                            error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <Textarea
+                            label={t('slider.description')}
+                            {...formik.getFieldProps('description')}
+                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <div className='w-full'>
+                            <UploadBox
+                                label={t('slider.image')}
+                                onChange={(file) => setFile(file[0])}
+                            />
+                        </div>
+
+                        <Input
+                            label={t('slider.order')}
+                            {...formik.getFieldProps('order')}
+                            error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <div className='w-full'>
+                            <SwitchComponent
+                                label={t('slider.isActive')}
+                                active={formik.values.isActive}
+                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateSlider

src/pages/slider/List.tsx

@@ -0,0 +1,106 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import Button from '../../components/Button'
+import { Add, Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import { useDeleteSlider, useGetSliders } from './hooks/useSliderData'
+import { SliderItemType } from './types/SliderTypes'
+import PageLoading from '../../components/PageLoading'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
+const SliderList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { data: sliders, isPending, refetch } = useGetSliders()
+    const deleteSlider = useDeleteSlider()
+
+    const handleDelete = (id: string) => {
+        deleteSlider.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('slider.slider_deleted'))
+                refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('slider.list_slider')}
+                </div>
+                <div>
+                    <Link to={Pages.sliders.create}>
+                        <Button
+                            className='px-5'
+                        >
+                            <div className='flex gap-2'>
+                                <Add
+                                    className='size-5'
+                                    color='#fff'
+                                />
+                                <div>{t('slider.submit_slider')}</div>
+                            </div>
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            {
+                isPending ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm '>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('slider.image')} />
+                                    <Td text={t('slider.title')} />
+                                    <Td text={t('slider.description')} />
+                                    <Td text={t('slider.order')} />
+                                    <Td text={t('slider.isActive')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sliders?.data?.sliders?.map((item: SliderItemType) => (
+                                    <tr className='tr' key={item.id}>
+                                        <Td text={''}>
+                                            <img src={item.imageUrl} alt={item.title} className='w-14' />
+                                        </Td>
+                                        <Td text={item.title} />
+                                        <Td text={item.description} />
+                                        <Td text={item.order.toString()} />
+                                        <Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
+                                        <Td text={''}>
+                                            <div className='flex gap-2'>
+                                                <Link to={Pages.sliders.detail + item.id}>
+                                                    <Edit
+                                                        className='size-5'
+                                                        color='#888'
+                                                    />
+                                                </Link>
+                                                <TrashWithConfrim
+                                                    onDelete={() => handleDelete(item.id)}
+                                                    isLoading={deleteSlider.isPending}
+                                                />
+                                            </div>
+                                        </Td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default SliderList

src/pages/slider/Update.tsx

@@ -0,0 +1,148 @@
+import { useFormik } from 'formik'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateSliderType } from './types/SliderTypes'
+import * as Yup from 'yup'
+import Button from '../../components/Button'
+import { useGetSliderDetail, useUpdateSlider } from './hooks/useSliderData'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Textarea from '../../components/Textarea'
+import UploadBox from '../../components/UploadBox'
+import SwitchComponent from '../../components/Switch'
+import { toast } from 'react-toastify'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { Pages } from '../../config/Pages'
+import { useNavigate, useParams } from 'react-router-dom'
+import { ErrorType } from '../../helpers/types'
+const UpdateSlider: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const updateSlider = useUpdateSlider()
+    const singleUpload = useSingleUpload()
+    const { data: sliderDetail } = useGetSliderDetail(id || '')
+
+    const [file, setFile] = useState<File | null>(null)
+    const formik = useFormik<CreateSliderType>({
+        initialValues: {
+            title: '',
+            description: '',
+            imageUrl: '',
+            link: '',
+            order: 0,
+            isActive: true,
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+            link: Yup.string().required(t('errors.required')),
+            order: Yup.number().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
+                    }
+                })
+            }
+
+            values.order = +values.order
+
+            updateSlider.mutate({ id: id || '', data: values }, {
+                onSuccess: () => {
+                    navigate(Pages.sliders.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        }
+    })
+
+    useEffect(() => {
+        if (sliderDetail?.data?.slider) {
+            formik.setValues(sliderDetail?.data?.slider)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sliderDetail])
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('slider.new_slider')}
+                </div>
+                <Button
+                    className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateSlider.isPending || singleUpload.isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickCircle size={20} color='white' />
+                        <div>
+                            {t('slider.submit')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex-1 mt-9 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+                <div className='flex flex-col gap-6'>
+                    <div className='rowTwoInput'>
+                        <Input
+                            label={t('slider.title')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+
+                        <Input
+                            label={t('slider.link')}
+                            {...formik.getFieldProps('link')}
+                            error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <Textarea
+                            label={t('slider.description')}
+                            {...formik.getFieldProps('description')}
+                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <div className='w-full'>
+                            <UploadBox
+                                label={t('slider.image')}
+                                onChange={(file) => setFile(file[0])}
+                            />
+                        </div>
+
+                        <Input
+                            label={t('slider.order')}
+                            {...formik.getFieldProps('order')}
+                            error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput'>
+                        <div className='w-full'>
+                            <SwitchComponent
+                                label={t('slider.isActive')}
+                                active={formik.values.isActive}
+                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateSlider

src/pages/slider/hooks/useSliderData.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/SliderService";
+import { CreateSliderType } from "../types/SliderTypes";
+export const useCreateSlider = () => {
+  return useMutation({
+    mutationFn: api.createSlider,
+  });
+};
+
+export const useGetSliders = () => {
+  return useQuery({
+    queryKey: ["sliders"],
+    queryFn: api.getSliders,
+  });
+};
+
+export const useGetSliderDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["slider-detail", id],
+    queryFn: () => api.getSliderDetail(id),
+  });
+};
+
+export const useUpdateSlider = () => {
+  return useMutation({
+    mutationFn: (params: { id: string; data: CreateSliderType }) =>
+      api.updateSlider(params.id, params.data),
+  });
+};
+
+export const useDeleteSlider = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSlider(id),
+  });
+};

src/pages/slider/service/SliderService.ts

@@ -0,0 +1,27 @@
+import axios from "../../../config/axios";
+import { CreateSliderType } from "../types/SliderTypes";
+
+export const createSlider = async (params: CreateSliderType) => {
+  const { data } = await axios.post("/sliders", params);
+  return data;
+};
+
+export const getSliders = async () => {
+  const { data } = await axios.get("/sliders");
+  return data;
+};
+
+export const getSliderDetail = async (id: string) => {
+  const { data } = await axios.get(`/sliders/${id}`);
+  return data;
+};
+
+export const updateSlider = async (id: string, params: CreateSliderType) => {
+  const { data } = await axios.patch(`/sliders/${id}`, params);
+  return data;
+};
+
+export const deleteSlider = async (id: string) => {
+  const { data } = await axios.delete(`/sliders/${id}`);
+  return data;
+};

src/pages/slider/types/SliderTypes.ts

@@ -0,0 +1,20 @@
+export type CreateSliderType = {
+  title: string;
+  description: string;
+  imageUrl: string;
+  link: string;
+  order: number;
+  isActive: boolean;
+};
+
+export type SliderItemType = {
+  createdAt: string;
+  description: string;
+  id: string;
+  imageUrl: string;
+  isActive: boolean;
+  link: string;
+  order: number;
+  title: string;
+  updatedAt: string;
+};

src/router/Main.tsx

@@ -52,6 +52,9 @@ import CompanyList from '../pages/company/List'
 import UpdateCompany from '../pages/company/Update'
 import RequestsList from '../pages/requests/List'
 import RequestDetail from '../pages/requests/Detail'
+import SliderList from '../pages/slider/List'
+import UpdateSlider from '../pages/slider/Update'
+import CreateSlider from '../pages/slider/Create'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -117,6 +120,9 @@ const MainRouter: FC = () => {
                             <Route path={Pages.company.detail + ':id'} element={<UpdateCompany />} />
                             <Route path={Pages.requests.list} element={<RequestsList />} />
                             <Route path={Pages.requests.detail + ':id'} element={<RequestDetail />} />
+                            <Route path={Pages.sliders.create} element={<CreateSlider />} />
+                            <Route path={Pages.sliders.list} element={<SliderList />} />
+                            <Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, Fragment, useEffect, useState } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Building, DocumentText, Home2, Logout, Messages3, NoteAdd, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
+import { Building, DocumentText, Gallery, Home2, Logout, Messages3, NoteAdd, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -149,6 +149,14 @@ const SideBar: FC = () => {
                                 />
                             </div>
 
+                            <SideBarItem
+                                icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.sliders')}
+                                isActive={isActive('sliders')}
+                                link={Pages.sliders.list}
+                                activeName='sliders'
+                            />
+
                             <div className='text-xs text-[#8C90A3]'>
                                 <SideBarItem
                                     icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}