Feature/add action date

src/components/dashboard/roadSafety/operator/Form/StepThree/StepThreeContent.jsx

@@ -2,23 +2,30 @@ import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import StyledForm from "@/core/components/StyledForm";
-import { mixed, object } from "yup";
+import { mixed, object, string } from "yup";
 import ImageUpload from "./ImageUpload";
 import useRequest from "@/lib/hooks/useRequest";
 import { THIRD_STEP_STORE } from "@/core/utils/routes";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
+import { format } from "date-fns";
 
 const StepThreeContent = ({ setOpen, mutate, rowId }) => {
     const requestServer = useRequest({ notificationSuccess: true });
     const defaultValues = {
+        action_date: "",
+        action_time: "",
         action_picture: null,
     };
     const validationSchema = object({
+        action_date: string().required("لطفا تاریخ اقدام را انتخاب کنید!"),
+        action_time: string().required("لطفا ساعت اقدام را انتخاب کنید!"),
         action_picture: mixed().nullable().required("لطفا عکس اقدام را بارگذاری کنید!"),
     });
     const {
         control,
         handleSubmit,
-        formState: { isSubmitting, errors },
+        formState: { isSubmitting },
     } = useForm({
         defaultValues,
         resolver: yupResolver(validationSchema),
@@ -26,6 +33,7 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
     });
     const onSubmit = async (data) => {
         const formData = new FormData();
+        formData.append("action_date", `${data.action_date} ${format(new Date(data.action_time), "HH:mm")}`);
         formData.append("action_picture", data.action_picture);
         await requestServer(`${THIRD_STEP_STORE}/${rowId}`, "post", {
             data: formData,
@@ -40,6 +48,42 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
         <StyledForm onSubmit={handleSubmit(onSubmit)}>
             <DialogContent dividers>
                 <Stack spacing={2}>
+                    <Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
+                        <Controller
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <MuiDatePicker
+                                        name="action_date"
+                                        error={error}
+                                        value={field.value}
+                                        placeholder={"تاریخ اقدام را وارد کنید"}
+                                        label={"تاریخ اقدام"}
+                                        setFieldValue={(name, value) => field.onChange(value || [])}
+                                        helperText={error ? error.message : null}
+                                    />
+                                );
+                            }}
+                            name={"action_date"}
+                        />
+                        <Controller
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <MuiTimePicker
+                                        name="action_time"
+                                        error={error}
+                                        value={field.value}
+                                        placeholder={"زمان اقدام را وارد کنید"}
+                                        label={"زمان اقدام"}
+                                        setFieldValue={(name, value) => field.onChange(value || null)}
+                                        helperText={error ? error.message : null}
+                                    />
+                                );
+                            }}
+                            name={"action_time"}
+                        />
+                    </Stack>
                     <Controller
                         name="action_picture"
                         control={control}
@@ -60,7 +104,7 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
                     بستن
                 </Button>
                 <Button type={"submit"} variant={"contained"} color={"primary"} disabled={isSubmitting}>
-                    {isSubmitting ? "درحال ثبت تصویر اقدام" : "ثبت تصویر اقدام"}
+                    {isSubmitting ? "درحال ثبت اقدام" : "ثبت اقدام"}
                 </Button>
             </DialogActions>
         </StyledForm>

src/components/dashboard/roadSafety/operator/Form/StepThree/index.jsx

@@ -6,7 +6,7 @@ const StepThree = ({ mutate, rowId }) => {
     const [open, setOpen] = useState(false);
     return (
         <>
-            <Tooltip title="بارگذاری تصویر اقدام">
+            <Tooltip title="ثبت اقدام">
                 <IconButton color="primary" onClick={() => setOpen(true)}>
                     <AddPhotoAlternateIcon />
                 </IconButton>
@@ -20,10 +20,10 @@ const StepThree = ({ mutate, rowId }) => {
                     },
                 }}
                 dir="rtl"
-                maxWidth={"sm"}
+                maxWidth={"xs"}
                 fullWidth
             >
-                <DialogTitle>بارگذاری تصویر اقدام</DialogTitle>
+                <DialogTitle>ثبت اقدام</DialogTitle>
                 <StepThreeContent setOpen={setOpen} mutate={mutate} rowId={rowId} />
             </Dialog>
         </>