complete adding time and date picker to mission page

src/components/dashboard/roadMissions/control/RowActions/FinishMission/FinishMissionContent.jsx

@@ -1,14 +1,43 @@
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
 import { FINISH_MISSION } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import { format } from "date-fns-jalali";
 import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { mixed, object, string } from "yup";
 
 const FinishMissionContent = ({ rowId, mutate, setOpenFinishMissionDialog }) => {
     const [submitting, setSubmitting] = useState(false);
     const requestServer = useRequest({ notificationSuccess: true });
-    const handleClick = () => {
-        setSubmitting(true);
+
+    const validationSchema = object().shape({
+        start_date: mixed().required("تاریخ خروج خودرو را مشخص کنید."),
+        start_time: mixed().required("ساعت خروج خودرو را مشخص کنید."),
+    });
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues: {
+            start_date: null,
+            start_time: null,
+        },
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+
+    const onSubmit = (values) => {
+        const formattedDate = values.start_date;
+        const formattedTime = format(values.start_time, "HH:mm");
         requestServer(`${FINISH_MISSION}/${rowId}`, "post", {
+            data: {
+                time: `${formattedDate} ${formattedTime}`,
+            },
             hasSidebarUpdate: true,
         })
             .then(() => {
@@ -20,18 +49,55 @@ const FinishMissionContent = ({ rowId, mutate, setOpenFinishMissionDialog }) =>
                 setSubmitting(false);
             });
     };
+
     return (
         <>
             <DialogContent>
                 <Stack alignItems="center" spacing={2}>
                     <Typography mt={2}>آیا از ورود خودرو و پایان ماموریت اطمینان دارید؟</Typography>
+                    <Stack>
+                        <Controller
+                            control={control}
+                            name={"start_date"}
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiDatePicker
+                                    name="start_date"
+                                    error={error}
+                                    value={field.value || null}
+                                    disableFuture={false}
+                                    placeholder={"تاریخ شروع ماموریت را وارد کنید"}
+                                    label={"تاریخ شروع ماموریت"}
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error ? error.message : null}
+                                />
+                            )}
+                        />
+                    </Stack>
+                    <Stack>
+                        <Controller
+                            control={control}
+                            name={"start_time"}
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiTimePicker
+                                    name="start_time"
+                                    error={error}
+                                    value={field.value || null}
+                                    views={["hours", "minutes"]}
+                                    placeholder={"زمان شروع ماموریت را وارد کنید"}
+                                    label={"زمان شروع ماموریت"}
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error ? error.message : null}
+                                />
+                            )}
+                        />
+                    </Stack>
                 </Stack>
             </DialogContent>
             <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
                 <Button onClick={() => setOpenFinishMissionDialog(false)} variant="outlined" color="secondary">
                     خیر !
                 </Button>
-                <Button onClick={handleClick} variant="contained" color="primary" disabled={submitting}>
+                <Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={submitting}>
                     {submitting ? "درحال ثبت..." : "بله اطمینان دارم"}
                 </Button>
             </DialogActions>

src/components/dashboard/roadMissions/control/RowActions/StartMission/StartMissionContent.jsx

@@ -1,17 +1,23 @@
 import LtrTextField from "@/core/components/LtrTextField";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
 import { START_MISSION } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import { format } from "date-fns-jalali";
 import { Controller, useForm } from "react-hook-form";
-import { object, string } from "yup";
+import { mixed, object, string } from "yup";
 
 const StartMissionContent = ({ rowId, mutate, setOpenStartMissionDialog }) => {
     const requestServer = useRequest({ notificationSuccess: true });
+    const now = new Date();
 
     const validationSchema = object().shape({
         code: string().length(6, "کد خروج باید 6 رقم باشد").required("لطفاً کد خروج را وارد کنید."),
         km: string().required("لطفاً کیلومتر را وارد کنید."),
+        start_date: mixed().required("تاریخ خروج خودرو را مشخص کنید."),
+        start_time: mixed().required("ساعت خروج خودرو را مشخص کنید."),
     });
 
     const {
@@ -22,16 +28,23 @@ const StartMissionContent = ({ rowId, mutate, setOpenStartMissionDialog }) => {
         defaultValues: {
             code: "",
             km: "",
+            start_date: null,
+            start_time: null,
         },
         resolver: yupResolver(validationSchema),
         mode: "all",
     });
 
     const onSubmit = (values) => {
+        const formattedDate = values.start_date;
+        const formattedTime = format(values.start_time, "HH:mm");
+        console.log(formattedDate, formattedTime);
+
         requestServer(`${START_MISSION}/${rowId}`, "post", {
             data: {
                 code: values.code,
                 km: values.km,
+                time: `${formattedDate} ${formattedTime}`,
             },
             hasSidebarUpdate: true,
         })
@@ -93,6 +106,43 @@ const StartMissionContent = ({ rowId, mutate, setOpenStartMissionDialog }) => {
                             )}
                         />
                     </Stack>
+                    <Stack>
+                        <Controller
+                            control={control}
+                            name={"start_date"}
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiDatePicker
+                                    name="start_date"
+                                    error={error}
+                                    value={field.value || null}
+                                    disableFuture={false}
+                                    minDate={now}
+                                    placeholder={"تاریخ شروع ماموریت را وارد کنید"}
+                                    label={"تاریخ شروع ماموریت"}
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error ? error.message : null}
+                                />
+                            )}
+                        />
+                    </Stack>
+                    <Stack>
+                        <Controller
+                            control={control}
+                            name={"start_time"}
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiTimePicker
+                                    name="start_time"
+                                    error={error}
+                                    value={field.value || null}
+                                    views={["hours", "minutes"]}
+                                    placeholder={"زمان شروع ماموریت را وارد کنید"}
+                                    label={"زمان شروع ماموریت"}
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error ? error.message : null}
+                                />
+                            )}
+                        />
+                    </Stack>
                 </Stack>
             </DialogContent>
             <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>