slider

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-VITE_BASE_URL = 'https://api.danakcorp.com'
+# VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.117:4000'
+VITE_BASE_URL = 'http://192.168.1.117:4000'

src/config/Pages.ts

@@ -16,6 +16,11 @@ export const Pages = {
     plan: "/services/plan/",
     review: "/services/reviews",
   },
+  sliders: {
+    list: "/sliders/list",
+    create: "/sliders/create",
+    detail: "/sliders/detail/",
+  },
   transactions: "/transactions",
   receipts: {
     index: "/receipts/list",

src/langs/fa.json

@@ -69,7 +69,23 @@
     "setting": "تنظیمات",
     "logout": "خروج",
     "card": "حساب های بانکی",
-    "payments": "پرداخت ها"
+    "payments": "پرداخت ها",
+    "sliders": "اسلایدر"
+  },
+  "slider": {
+    "new_slider": "اسلایدر جدید",
+    "submit": "ثبت اسلایدر",
+    "title": "عنوان",
+    "link": "لینک",
+    "description": "توضیحات",
+    "image": "تصویر",
+    "order": "ترتیب",
+    "isActive": "فعال / غیرفعال",
+    "image_required": "تصویر الزامی می باشد",
+    "list_slider": "لیست اسلایدر ها",
+    "submit_slider": "اسلایدر جدید",
+    "active": "فعال",
+    "inactive": "غیرفعال"
   },
   "submenu": {
     "services_list": "لیست سرویس ها",

src/pages/slider/Create.tsx

@@ -0,0 +1,141 @@
+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: () => {
+                    toast.success(t('slider.slider_created'))
+                    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}
+                >
+                    <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,75 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import { useGetSliders } from './hooks/useSliderData'
+import { SliderItemType } from './types/SliderTypes'
+import PageLoading from '../../components/PageLoading'
+const SliderList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { data: sliders, isPending } = useGetSliders()
+
+    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')} />
+                                </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')} />
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default SliderList

src/pages/slider/hooks/useSliderData.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/SliderService";
+
+export const useCreateSlider = () => {
+  return useMutation({
+    mutationFn: api.createSlider,
+  });
+};
+
+export const useGetSliders = () => {
+  return useQuery({
+    queryKey: ["sliders"],
+    queryFn: api.getSliders,
+  });
+};

src/pages/slider/service/SliderService.ts

@@ -0,0 +1,12 @@
+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;
+};

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

@@ -61,6 +61,8 @@ import UpdateBlog from '../pages/blog/Update'
 import Update from '../pages/annoncement/Update'
 import UpdateDiscount from '../pages/discounts/UpdateDiscount'
 import UpdateUser from '../pages/users/Update'
+import CreateSlider from '../pages/slider/Create'
+import SliderList from '../pages/slider/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -133,7 +135,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.cardBank.list} element={<CardBankList />} />
                             <Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
                             <Route path={Pages.payment.list} element={<PaymentList />} />
-
+                            <Route path={Pages.sliders.create} element={<CreateSlider />} />
+                            <Route path={Pages.sliders.list} element={<SliderList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -158,6 +158,13 @@ const SideBar: FC = () => {
                             link={Pages.users.list}
                             activeName='admins'
                         />
+                        <SideBarItem
+                            icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.sliders')}
+                            isActive={isActive('sliders')}
+                            link={Pages.sliders.list}
+                            activeName='blogs'
+                        />
                     </div>
 
                     {