create schedule

src/pages/schedule/Create.tsx

@@ -0,0 +1,74 @@
+import { type FC } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { TickCircle } from 'iconsax-react';
+import { toast } from 'react-toastify';
+import Button from '@/components/Button';
+import ScheduleFormFields from './components/ScheduleFormFields';
+import { useCreateSchedule } from './hooks/useScheduleData';
+import type { CreateScheduleType } from './types/Types';
+import { Pages } from '@/config/Pages';
+import type { ErrorType } from '@/helpers/types';
+import { extractErrorMessage } from '@/config/func';
+import { useNavigate } from 'react-router-dom';
+
+const CreateSchedule: FC = () => {
+    const { mutate: createSchedule, isPending } = useCreateSchedule();
+    const navigate = useNavigate();
+    const formik = useFormik<CreateScheduleType>({
+        initialValues: {
+            weekDay: 1,
+            openTime: '',
+            closeTime: '',
+            isActive: true,
+        },
+        validationSchema: Yup.object().shape({
+            weekDay: Yup.number()
+                .required('روز هفته الزامی است')
+                .min(0, 'روز هفته باید بین 1 تا 7 باشد')
+                .max(6, 'روز هفته باید بین 1 تا 7 باشد'),
+            openTime: Yup.string().required('زمان شروع الزامی است'),
+            closeTime: Yup.string().required('زمان پایان الزامی است'),
+            isActive: Yup.boolean(),
+        }),
+        onSubmit: (values) => {
+            createSchedule(values, {
+                onSuccess: () => {
+                    toast.success('زمانبندی با موفقیت ایجاد شد');
+                    navigate(Pages.schedule.list);
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(extractErrorMessage(error));
+                },
+            });
+        },
+    });
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    زمانبندی جدید
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت زمانبندی</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <ScheduleFormFields formik={formik} />
+            </div>
+        </div>
+    );
+};
+
+export default CreateSchedule;

src/pages/schedule/List.tsx

@@ -7,6 +7,8 @@ import { useGetSchedules, useDeleteSchedule } from './hooks/useScheduleData'
 import { useScheduleFilters } from './hooks/useScheduleFilters'
 import { getScheduleTableColumns } from './components/ScheduleTableColumns'
 import { useScheduleFiltersFields } from './components/ScheduleFiltersFields'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
 
 const ScheduleList: FC = () => {
     const {
@@ -34,12 +36,14 @@ const ScheduleList: FC = () => {
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>لیست زمانبندی</h1>
-                <Button className='w-fit px-6'>
-                    <div className='flex gap-2 items-center'>
-                        <Add color='#fff' size={20} />
-                        <span>افزودن زمانبندی</span>
-                    </div>
-                </Button>
+                <Link to={Pages.schedule.create}>
+                    <Button className='w-fit px-6'>
+                        <div className='flex gap-2 items-center'>
+                            <Add color='#fff' size={20} />
+                            <span>افزودن زمانبندی</span>
+                        </div>
+                    </Button>
+                </Link>
             </div>
 
             <div className='mt-8'>

src/pages/schedule/components/ScheduleFormFields.tsx

@@ -0,0 +1,65 @@
+import { type FC } from 'react';
+import type { FormikProps } from 'formik';
+import Select from '@/components/Select';
+import TimePicker from '@/components/TimePicker';
+import Switch from '@/components/Switch';
+import type { CreateScheduleType } from '../types/Types';
+
+type ScheduleFormFieldsProps = {
+  formik: FormikProps<CreateScheduleType>;
+};
+
+const weekDayOptions = [
+  { value: '0', label: 'شنبه' },
+  { value: '1', label: 'یکشنبه' },
+  { value: '2', label: 'دوشنبه' },
+  { value: '3', label: 'سه‌شنبه' },
+  { value: '4', label: 'چهارشنبه' },
+  { value: '5', label: 'پنج‌شنبه' },
+  { value: '6', label: 'جمعه' },
+];
+
+const ScheduleFormFields: FC<ScheduleFormFieldsProps> = ({ formik }) => {
+  return (
+    <div className='bg-white py-8 xl:px-10 px-4 rounded-3xl space-y-5'>
+      <Select
+        label='روز هفته'
+        name='weekDay'
+        placeholder='انتخاب کنید'
+        items={weekDayOptions}
+        value={String(formik.values.weekDay)}
+        onChange={(e) => formik.setFieldValue('weekDay', Number(e.target.value))}
+        error_text={formik.touched.weekDay && formik.errors.weekDay ? String(formik.errors.weekDay) : ''}
+      />
+
+      <div className='grid grid-cols-2 gap-4'>
+        <TimePicker
+          label='زمان شروع'
+          placeholder='انتخاب زمان شروع'
+          defaultValue={formik.values.openTime}
+          onChange={(time) => formik.setFieldValue('openTime', time)}
+          error_text={formik.touched.openTime && formik.errors.openTime ? formik.errors.openTime : ''}
+        />
+
+        <TimePicker
+          label='زمان پایان'
+          placeholder='انتخاب زمان پایان'
+          defaultValue={formik.values.closeTime}
+          onChange={(time) => formik.setFieldValue('closeTime', time)}
+          error_text={formik.touched.closeTime && formik.errors.closeTime ? formik.errors.closeTime : ''}
+        />
+      </div>
+
+      <div className='flex items-center gap-3 pt-2'>
+        <Switch
+          active={formik.values.isActive}
+          onChange={(value) => formik.setFieldValue('isActive', value)}
+          label='فعال'
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleFormFields;
+

src/pages/schedule/hooks/useScheduleData.ts

@@ -17,3 +17,13 @@ export const useDeleteSchedule = () => {
     },
   });
 };
+
+export const useCreateSchedule = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createSchedule,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["schedules"] });
+    },
+  });
+};

src/pages/schedule/service/ScheduleService.ts

@@ -1,5 +1,8 @@
 import axios from "@/config/axios";
-import type { GetSchedulesResponseType } from "../types/Types";
+import type {
+  CreateScheduleType,
+  GetSchedulesResponseType,
+} from "../types/Types";
 
 export const getSchedules = async (
   params?: Record<string, unknown>
@@ -14,3 +17,8 @@ export const deleteSchedule = async (id: string) => {
   const { data } = await axios.delete(`/schedules/${id}`);
   return data;
 };
+
+export const createSchedule = async (params: CreateScheduleType) => {
+  const { data } = await axios.post("/schedules", params);
+  return data;
+};

src/pages/schedule/types/Types.ts

@@ -12,3 +12,10 @@ export type Schedule = {
 };
 
 export type GetSchedulesResponseType = IResponse<Schedule[]>;
+
+export type CreateScheduleType = {
+  weekDay: number;
+  openTime: string;
+  closeTime: string;
+  isActive: boolean;
+};