diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx
index 7d47ba8..b05cc6a 100644
--- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx
+++ b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Marker, Polyline, useMap } from "react-leaflet";
 import L from "leaflet";
 import polyline from "@mapbox/polyline";
@@ -18,14 +18,24 @@ const ShowRoute = ({ area }) => {
         });
     };
 
-    useEffect(() => {
-        if (coords.length > 0) {
-            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
-        }
-    }, [area]);
     const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
     const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+    const [showRoute, setShowRoute] = useState(false);
 
+    useEffect(() => {
+        if (!coords.length) return;
+
+        setShowRoute(false);
+
+        map.flyToBounds(coords, {
+            padding: [50, 50],
+            duration: 1.5,
+        });
+
+        map.once("moveend", () => {
+            setShowRoute(true);
+        });
+    }, [area]);
     if (!area) return null;
     const coords = polyline.decode(area, 6);
 
@@ -36,7 +46,8 @@ const ShowRoute = ({ area }) => {
 
     return (
         <>
-            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            {showRoute && <Polyline positions={coords} color="#015688" weight={7} />}
+
             <Marker position={sourcePosition} icon={sourceIcon} />
             <Marker position={destPosition} icon={destIcon} />
         </>
diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx
index 02813c2..6cbcf33 100644
--- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx
+++ b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx
@@ -6,107 +6,107 @@ import { Controller, useWatch } from "react-hook-form";
 
 const MissionDates = ({ control }) => {
     const type = useWatch({ control, name: "type" });
+
     const start_date = useWatch({ control, name: "start_date" });
     const end_date = useWatch({ control, name: "end_date" });
+
     const start_time = useWatch({ control, name: "start_time" });
     const end_time = useWatch({ control, name: "end_time" });
 
-    const startDateTime = makeDateTime(start_date, start_time);
-    const endDateTime = makeDateTime(end_date, end_time);
     const now = new Date();
 
+    const startDateTime = start_date && start_time ? makeDateTime(start_date, start_time) : null;
+
+    const endDateTime = end_date && end_time ? makeDateTime(end_date, end_time) : null;
+
+    const isSameDay =
+        start_date && end_date && new Date(start_date).toDateString() === new Date(end_date).toDateString();
+
+    const isToday = start_date && new Date(start_date).toDateString() === now.toDateString();
+
     return (
         type && (
             <>
                 <Grid item xs={12} sm={6}>
                     <Controller
                         control={control}
-                        name={"start_date"}
-                        render={({ field, fieldState: { error } }) => {
-                            return (
-                                <MuiDatePicker
-                                    name="start_date"
-                                    error={error}
-                                    value={field.value}
-                                    disableFuture={false}
-                                    minDate={now}
-                                    maxDate={end_date ?? null}
-                                    placeholder={"تاریخ شروع ماموریت را وارد کنید"}
-                                    label={"تاریخ شروع ماموریت"}
-                                    setFieldValue={(name, value) => field.onChange(value || [])}
-                                    helperText={error ? error.message : null}
-                                />
-                            );
-                        }}
+                        name="start_date"
+                        render={({ field, fieldState: { error } }) => (
+                            <MuiDatePicker
+                                name="start_date"
+                                value={field.value}
+                                error={error}
+                                disableFuture={false}
+                                minDate={now}
+                                maxDate={end_date ?? null}
+                                label="تاریخ شروع ماموریت"
+                                placeholder="تاریخ شروع ماموریت را وارد کنید"
+                                setFieldValue={(name, value) => field.onChange(value || null)}
+                                helperText={error?.message}
+                            />
+                        )}
                     />
                 </Grid>
+
                 {type == 1 && (
                     <Grid item xs={12} sm={6}>
                         <Controller
                             control={control}
-                            name={"start_time"}
-                            render={({ field, fieldState: { error } }) => {
-                                return (
-                                    <MuiTimePicker
-                                        name="start_time"
-                                        error={error}
-                                        value={field.value}
-                                        minTime={
-                                            start_date && new Date(start_date).toDateString() === now.toDateString()
-                                                ? now
-                                                : null
-                                        }
-                                        maxTime={endDateTime ?? null}
-                                        placeholder={"زمان شروع ماموریت را وارد کنید"}
-                                        label={"زمان شروع ماموریت"}
-                                        setFieldValue={(name, value) => field.onChange(value || null)}
-                                        helperText={error ? error.message : null}
-                                    />
-                                );
-                            }}
+                            name="start_time"
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiTimePicker
+                                    name="start_time"
+                                    value={field.value}
+                                    error={error}
+                                    minTime={isToday ? now : null}
+                                    maxTime={isSameDay && endDateTime ? endDateTime : null}
+                                    label="زمان شروع ماموریت"
+                                    placeholder="زمان شروع ماموریت را وارد کنید"
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error?.message}
+                                />
+                            )}
                         />
                     </Grid>
                 )}
+
                 <Grid item xs={12} sm={6}>
                     <Controller
                         control={control}
-                        name={"end_date"}
-                        render={({ field, fieldState: { error } }) => {
-                            return (
-                                <MuiDatePicker
-                                    name="end_date"
-                                    error={error}
-                                    value={field.value}
-                                    disableFuture={false}
-                                    minDate={start_date ? start_date : now}
-                                    placeholder={"تاریخ پایان ماموریت را وارد کنید"}
-                                    label={"تاریخ پایان ماموریت"}
-                                    setFieldValue={(name, value) => field.onChange(value || [])}
-                                    helperText={error ? error.message : null}
-                                />
-                            );
-                        }}
+                        name="end_date"
+                        render={({ field, fieldState: { error } }) => (
+                            <MuiDatePicker
+                                name="end_date"
+                                value={field.value}
+                                error={error}
+                                disableFuture={false}
+                                minDate={start_date || now}
+                                label="تاریخ پایان ماموریت"
+                                placeholder="تاریخ پایان ماموریت را وارد کنید"
+                                setFieldValue={(name, value) => field.onChange(value || null)}
+                                helperText={error?.message}
+                            />
+                        )}
                     />
                 </Grid>
+
                 {type == 1 && (
                     <Grid item xs={12} sm={6}>
                         <Controller
                             control={control}
-                            name={"end_time"}
-                            render={({ field, fieldState: { error } }) => {
-                                return (
-                                    <MuiTimePicker
-                                        name="end_time"
-                                        error={error}
-                                        value={field.value}
-                                        minTime={startDateTime ?? null}
-                                        placeholder={"زمان پایان ماموریت را وارد کنید"}
-                                        label={"زمان پایان ماموریت"}
-                                        setFieldValue={(name, value) => field.onChange(value || null)}
-                                        helperText={error ? error.message : null}
-                                    />
-                                );
-                            }}
+                            name="end_time"
+                            render={({ field, fieldState: { error } }) => (
+                                <MuiTimePicker
+                                    name="end_time"
+                                    value={field.value}
+                                    error={error}
+                                    minTime={isSameDay && startDateTime ? startDateTime : null}
+                                    label="زمان پایان ماموریت"
+                                    placeholder="زمان پایان ماموریت را وارد کنید"
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error?.message}
+                                />
+                            )}
                         />
                     </Grid>
                 )}
@@ -114,4 +114,5 @@ const MissionDates = ({ control }) => {
         )
     );
 };
+
 export default MissionDates;
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/DriverReportsList.jsx b/src/components/dashboard/roadMissions/reports/diverReports/DriverReportsList.jsx
index a279dc4..bca2edf 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/DriverReportsList.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/DriverReportsList.jsx
@@ -50,7 +50,8 @@ const DriverReportsList = ({ data, specialFilter }) => {
             },
         ];
     }, []);
-
+    const cleanedData = specialFilter.filter((item) => !(item.id === "province_id" && item.value === "-1"));
+    const RowActionsWithRowData = (props) => <RowActions specialFilter={cleanedData} {...props} />;
     return (
         <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
             <DataTableWithAuth
@@ -62,7 +63,7 @@ const DriverReportsList = ({ data, specialFilter }) => {
                 enablePagination={false}
                 specialFilter={specialFilter}
                 enableRowActions
-                RowActions={RowActions}
+                RowActions={RowActionsWithRowData}
             />
         </Box>
     );
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx
index 2d13661..8237b24 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx
@@ -3,7 +3,7 @@ import { GET_DRIVER_DETAILS } from "@/core/utils/routes";
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 
-const DriverList = ({ row }) => {
+const DriverList = ({ row, specialFilter }) => {
     const columns = useMemo(
         () => [
             {
@@ -93,6 +93,7 @@ const DriverList = ({ row }) => {
                 <DataTableWithAuth
                     need_filter={true}
                     columns={columns}
+                    specialFilter={specialFilter}
                     sorting={[{ id: "id", desc: true }]}
                     table_url={`${GET_DRIVER_DETAILS}/${row.driver_id}`}
                     page_name={"driverListReport"}
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/index.jsx b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/index.jsx
index d4c1c65..3f981f7 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/index.jsx
@@ -2,14 +2,14 @@ import { Box, Button, DialogActions, DialogContent } from "@mui/material";
 import { Stack } from "@mui/system";
 import DriverList from "./DriverDetailsDialog/DriverList";
 
-const DriverDetailsTable = ({ row, setOpenDriverDetails }) => {
+const DriverDetailsTable = ({ row, setOpenDriverDetails, specialFilter }) => {
     return (
         <>
             <DialogContent dividers>
                 <Box sx={{ flex: 1 }}>
                     <Stack spacing={3}>
                         <Stack spacing={2}>
-                            <DriverList row={row} />
+                            <DriverList specialFilter={specialFilter} row={row} />
                         </Stack>
                     </Stack>
                 </Box>
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/index.jsx b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/index.jsx
index 9e32458..bcec116 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/index.jsx
@@ -3,7 +3,7 @@ import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import DriverDetailsTable from "./Form";
 
-const DriverDetails = ({ row }) => {
+const DriverDetails = ({ row, specialFilter }) => {
     const [openDriverDetails, setOpenDriverDetails] = useState(false);
 
     return (
@@ -35,7 +35,11 @@ const DriverDetails = ({ row }) => {
                 </IconButton>
                 <DialogTitle>ریز گزارشات راننده</DialogTitle>
                 {openDriverDetails && (
-                    <DriverDetailsTable row={row.original} setOpenDriverDetails={setOpenDriverDetails} />
+                    <DriverDetailsTable
+                        specialFilter={specialFilter}
+                        row={row.original}
+                        setOpenDriverDetails={setOpenDriverDetails}
+                    />
                 )}
             </Dialog>
         </>
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/index.jsx b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/index.jsx
index f37d403..e7aba26 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/RowActions/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/RowActions/index.jsx
@@ -1,6 +1,6 @@
 import DriverDetails from "./DriverDetails";
 
-const RowActions = ({ row }) => {
-    return <DriverDetails row={row} />;
+const RowActions = ({ row, specialFilter }) => {
+    return <DriverDetails specialFilter={specialFilter} row={row} />;
 };
 export default RowActions;
diff --git a/src/components/dashboard/roadMissions/reports/diverReports/index.jsx b/src/components/dashboard/roadMissions/reports/diverReports/index.jsx
index 967a8a6..1c14e4a 100644
--- a/src/components/dashboard/roadMissions/reports/diverReports/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/diverReports/index.jsx
@@ -27,8 +27,8 @@ const DriverReportsPage = () => {
     };
     const defaultFilter = [
         { value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
-        { value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
-        { value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+        { value: `${defaultValues.from_date} 00:00:00`, datatype: "date", id: "start_time", fn: "greaterThan" },
+        { value: `${defaultValues.date_to} 23:59:59`, datatype: "date", id: "finish_time", fn: "lessThan" },
     ];
     const [specialFilter, setSpecialFilter] = useState(defaultFilter);
 
@@ -38,8 +38,8 @@ const DriverReportsPage = () => {
         params.set("date_to", `${data.date_to} 23:59:59`);
         setSpecialFilter([
             { value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
-            { value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
-            { value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+            { value: `${data.from_date} 00:00:00`, datatype: "date", id: "start_time", fn: "greaterThan" },
+            { value: `${data.date_to} 23:59:59`, datatype: "date", id: "finish_time", fn: "lessThan" },
         ]);
         if (data.province_id === "-1") {
             try {
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx
index 363c85f..ca50d9c 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx
@@ -60,7 +60,8 @@ const MachinesReportsList = ({ data, specialFilter }) => {
             },
         ];
     }, []);
-
+    const cleanedData = specialFilter.filter((item) => !(item.id === "province_id" && item.value === "-1"));
+    const RowActionsWithRowData = (props) => <RowActions specialFilter={cleanedData} {...props} />;
     return (
         <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
             <DataTableWithAuth
@@ -72,7 +73,7 @@ const MachinesReportsList = ({ data, specialFilter }) => {
                 enablePagination={false}
                 specialFilter={specialFilter}
                 enableRowActions
-                RowActions={RowActions}
+                RowActions={RowActionsWithRowData}
             />
         </Box>
     );
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx
index 36d781a..d026fba 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx
@@ -3,7 +3,7 @@ import { GET_MACHINE_MISSIONS_DETAILS } from "@/core/utils/routes";
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 
-const MachineMissionsList = ({ row }) => {
+const MachineMissionsList = ({ row, specialFilter }) => {
     const columns = useMemo(
         () => [
             {
@@ -91,6 +91,7 @@ const MachineMissionsList = ({ row }) => {
         <>
             <Box sx={{ mt: 3 }}>
                 <DataTableWithAuth
+                    specialFilter={specialFilter}
                     need_filter={true}
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/index.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/index.jsx
index 117e6ea..6072125 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/index.jsx
@@ -2,14 +2,14 @@ import { Box, Button, DialogActions, DialogContent } from "@mui/material";
 import { Stack } from "@mui/system";
 import MachineMissionsList from "./MachineMissionsDetailsDialog/MachineMissionsList";
 
-const MachineMissionsDetailsTable = ({ row, setOpenMachineMissionsDetails }) => {
+const MachineMissionsDetailsTable = ({ row, setOpenMachineMissionsDetails, specialFilter }) => {
     return (
         <>
             <DialogContent dividers>
                 <Box sx={{ flex: 1 }}>
                     <Stack spacing={3}>
                         <Stack spacing={2}>
-                            <MachineMissionsList row={row} />
+                            <MachineMissionsList specialFilter={specialFilter} row={row} />
                         </Stack>
                     </Stack>
                 </Box>
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/index.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/index.jsx
index f3ef62e..0ec167e 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/index.jsx
@@ -3,7 +3,7 @@ import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import MachineMissionsDetailsTable from "./Form";
 
-const MissionDetails = ({ row }) => {
+const MissionDetails = ({ row, specialFilter }) => {
     const [openMachineMissionsDetails, setOpenMachineMissionsDetails] = useState(false);
 
     return (
@@ -36,6 +36,7 @@ const MissionDetails = ({ row }) => {
                 <DialogTitle>ریز گزارشات خودرو</DialogTitle>
                 {openMachineMissionsDetails && (
                     <MachineMissionsDetailsTable
+                        specialFilter={specialFilter}
                         row={row.original}
                         setOpenMachineMissionsDetails={setOpenMachineMissionsDetails}
                     />
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx
index 5cb6a4d..95b11aa 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx
@@ -1,6 +1,6 @@
 import MissionDetails from "./MissionDitails";
 
-const RowActions = ({ row }) => {
-    return <MissionDetails row={row} />;
+const RowActions = ({ row, specialFilter }) => {
+    return <MissionDetails specialFilter={specialFilter} row={row} />;
 };
 export default RowActions;
diff --git a/src/components/dashboard/roadMissions/reports/machinesReports/index.jsx b/src/components/dashboard/roadMissions/reports/machinesReports/index.jsx
index 655944d..af47ba9 100644
--- a/src/components/dashboard/roadMissions/reports/machinesReports/index.jsx
+++ b/src/components/dashboard/roadMissions/reports/machinesReports/index.jsx
@@ -27,8 +27,8 @@ const MachinesReportsPage = () => {
     };
     const defaultFilter = [
         { value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
-        { value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
-        { value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+        { value: `${defaultValues.from_date} 00:00:00`, datatype: "date", id: "start_time", fn: "greaterThan" },
+        { value: `${defaultValues.date_to} 23:59:59`, datatype: "date", id: "finish_time", fn: "lessThan" },
     ];
     const [specialFilter, setSpecialFilter] = useState(defaultFilter);
 
@@ -38,8 +38,8 @@ const MachinesReportsPage = () => {
         params.set("date_to", `${data.date_to} 23:59:59`);
         setSpecialFilter([
             { value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
-            { value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
-            { value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+            { value: `${data.from_date} 00:00:00`, datatype: "date", id: "start_time", fn: "greaterThan" },
+            { value: `${data.date_to} 23:59:59`, datatype: "date", id: "finish_time", fn: "lessThan" },
         ]);
         if (data.province_id === "-1") {
             try {
diff --git a/src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx b/src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx
index 7d47ba8..b05cc6a 100644
--- a/src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx
+++ b/src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Marker, Polyline, useMap } from "react-leaflet";
 import L from "leaflet";
 import polyline from "@mapbox/polyline";
@@ -18,14 +18,24 @@ const ShowRoute = ({ area }) => {
         });
     };
 
-    useEffect(() => {
-        if (coords.length > 0) {
-            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
-        }
-    }, [area]);
     const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
     const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+    const [showRoute, setShowRoute] = useState(false);
 
+    useEffect(() => {
+        if (!coords.length) return;
+
+        setShowRoute(false);
+
+        map.flyToBounds(coords, {
+            padding: [50, 50],
+            duration: 1.5,
+        });
+
+        map.once("moveend", () => {
+            setShowRoute(true);
+        });
+    }, [area]);
     if (!area) return null;
     const coords = polyline.decode(area, 6);
 
@@ -36,7 +46,8 @@ const ShowRoute = ({ area }) => {
 
     return (
         <>
-            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            {showRoute && <Polyline positions={coords} color="#015688" weight={7} />}
+
             <Marker position={sourcePosition} icon={sourceIcon} />
             <Marker position={destPosition} icon={destIcon} />
         </>