Feature/show car details

src/core/components/ApplicantRequestDetail/FlyToPolyline.jsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Polyline, useMap } from "react-leaflet";
+import { useEffect } from "react";
+const purpleOptions = { color: "purple" };
+
+const FlyToPolyline = ({ polyline }) => {
+    const map = useMap();
+
+    useEffect(() => {
+        if (map) {
+            const leafletPolyline = L.polyline(polyline); // Create a Leaflet polyline
+            const bounds = leafletPolyline.getBounds(); // Get bounds from the polyline
+            map.flyToBounds(bounds, { padding: [50, 50] }); // Fly to the polyline bounds
+        }
+    }, [map, polyline]);
+
+    return <Polyline pathOptions={purpleOptions} positions={polyline} />; // Render the polyline
+};
+
+export default FlyToPolyline;

src/core/components/MuiDatePicker.jsx

@@ -0,0 +1,61 @@
+import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import { faIR } from "@mui/x-date-pickers/locales";
+import {Box, IconButton, FormControl, FormHelperText, InputAdornment, Stack} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+
+export default function PickerWithButtonField({
+                                                  formik,
+                                                  name,
+                                                  value,
+                                                  error,
+                                                  touched,
+                                                  disabled,
+                                              }) {
+    return (
+        <FormControl variant="outlined" fullWidth size="small" error={!!error}>
+            <Stack sx={{width : "100%"}} direction={"row"}>
+                <LocalizationProvider
+                    dateAdapter={AdapterDateFnsJalali}
+                    localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+                >
+                    <MobileDateTimePicker
+                        ampm={false}
+                        disableFuture
+                        value={value ? new Date(value) : null}
+                        onChange={(newValue) => {
+                            const formattedDate = moment(newValue).locale("en").format("YYYY-MM-DD HH:mm");
+                            formik.setFieldValue(name, formattedDate);
+                        }}
+                        slotProps={{
+                            textField: {
+                                placeholder: name === "start_date"
+                                    ? "تاریخ شروع را وارد کنید"
+                                    : "تاریخ اتمام را وارد کنید",
+                                variant: "outlined",
+                                disabled,
+                                fullWidth: true,
+                                error: !!error,
+                                helperText : touched && error ,
+                                size: "small", // Ensure that the TextField is small
+                                InputProps: {
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <IconButton
+                                                size="small" // Set size="small" for IconButton
+                                                onClick={() => formik.setFieldValue(name, null)}
+                                            >
+                                                <ClearIcon />
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ),
+                                },
+                            },
+                        }}
+                    />
+                </LocalizationProvider>
+            </Stack>
+        </FormControl>
+    );
+}