From 855afc05e56a9bb1a145594d43faf7cbef0d8c5d Mon Sep 17 00:00:00 2001
From: mhmjalali <muhammad.art79@gmail.com>
Date: Sat, 13 Jun 2026 10:22:49 +0330
Subject: [PATCH] complete adding route selection and view of it for violation
 page

---
 .../Actions/Create/Form/Verify/index.jsx      |   1 -
 .../MapControlPolygon/DrawBound/index.jsx     | 129 -----------
 .../Form/Area/MapControlPolygon/index.jsx     | 116 ----------
 .../MapControlPolyline/DrawBound/index.jsx    | 129 -----------
 .../Form/Area/MapControlPolyline/index.jsx    | 116 ----------
 .../Form/Area/Routing/AlarmText.jsx           |  28 +++
 .../Form/Area/Routing/DataBox.jsx             |  53 +++++
 .../Form/Area/Routing/ShowRoute.jsx           |  46 ++++
 .../Form/Area/Routing/index.jsx               | 219 ++++++++++++++++++
 .../Form/Area/SelectBoundType/index.jsx       |  25 --
 .../CreateWithoutProcess/Form/Area/index.jsx  |  29 +--
 .../Form/Verify/index.jsx                     |  12 +-
 .../CreateWithoutProcess/Form/index.jsx       |  20 +-
 .../Actions/CreateWithoutProcess/index.jsx    |   5 +-
 14 files changed, 386 insertions(+), 542 deletions(-)
 delete mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx
 delete mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx
 delete mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx
 delete mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx
 create mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx
 create mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx
 create mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx
 create mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx
 delete mode 100644 src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx

diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx
index 639fdef..e48883e 100644
--- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx
+++ b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx
@@ -28,7 +28,6 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
                                 <Chip color="primary" variant="outlined" label="مسیر ماموریت" />
                             </Divider>
                             <Box sx={{ width: "100%", height: "400px" }}>
-                                {console.log("allData.area", allData.area)}
                                 <MapLayer style={{ borderRadius: "4px" }}>
                                     <ShowRoute area={allData.area} />
                                 </MapLayer>
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx
deleted file mode 100644
index 5a253a9..0000000
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import L from "leaflet";
-import { FeatureGroup, useMap } from "react-leaflet";
-import "leaflet-draw";
-
-const DrawBound = ({ control, controlDispach, bound, setBound }) => {
-    const map = useMap();
-    const featureRef = useRef(null);
-    const [area, setArea] = useState();
-    const drawControlRef = useRef(null);
-
-    const safeFlyToBounds = (layer) => {
-        if (!layer || !map) return;
-        try {
-            const latLngs = layer.getLatLngs();
-            map.flyToBounds(latLngs, {
-                paddingTopLeft: [20, 35],
-                paddingBottomRight: [20, 55],
-            });
-        } catch (e) {
-            console.warn("flyToBounds failed:", e);
-        }
-    };
-
-    const safeFitBounds = (layer) => {
-        if (!layer || !map) return;
-        try {
-            const latLngs = layer.getLatLngs();
-            map.fitBounds(latLngs, {
-                paddingTopLeft: [20, 35],
-                paddingBottomRight: [20, 55],
-            });
-        } catch (e) {
-            console.warn("fitBounds failed:", e);
-        }
-    };
-
-    const bindEditEvent = (layer) => {
-        if (!layer) return;
-        layer.on("edit", function (e) {
-            const editedLayer = e.target;
-            setArea(editedLayer);
-            setBound(editedLayer);
-            safeFlyToBounds(editedLayer);
-        });
-    };
-
-    const handlerCreatedBound = useCallback((event) => {
-        const { layer } = event;
-        layer.editing.enable();
-        featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
-        setArea(layer);
-        setBound(layer);
-        safeFlyToBounds(layer);
-        bindEditEvent(layer);
-        controlDispach({ type: "SET_STATUS", status: 2 });
-    }, []);
-
-    useEffect(() => {
-        if (
-            control.status === 1 &&
-            drawControlRef.current &&
-            drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler
-        ) {
-            drawControlRef.current._toolbars.draw._modes.polygon.handler.enable();
-        }
-    }, [control.status]);
-
-    useEffect(() => {
-        if (control.status === 0 && area && featureRef.current) {
-            featureRef.current.removeLayer(area);
-            setArea(null);
-            setBound(null);
-        }
-    }, [control.status, area]);
-
-    useEffect(() => {
-        if (control.status === 2 && bound && featureRef.current) {
-            setArea(bound);
-            featureRef.current.addLayer(bound);
-            bound.editing.enable();
-            safeFitBounds(bound);
-            bindEditEvent(bound);
-        }
-    }, [control.status, bound]);
-
-    useEffect(() => {
-        if (!featureRef.current) return;
-
-        L.drawLocal.draw.handlers.polygon.tooltip.start = "برای شروع ترسیم محدوده، روی نقشه کلیک کنید";
-        L.drawLocal.draw.handlers.polygon.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
-        L.drawLocal.draw.handlers.polygon.tooltip.end = "برای بستن محدوده، روی نقطه‌ی شروع کلیک کنید";
-
-        const drawControl = new L.Control.Draw({
-            draw: {
-                polygon: {
-                    shapeOptions: {
-                        color: "#3388ff",
-                        weight: 3,
-                        clickable: true,
-                    },
-                },
-                polyline: false,
-                rectangle: false,
-                circle: false,
-                marker: false,
-                circlemarker: false,
-            },
-            edit: {
-                featureGroup: featureRef.current,
-                edit: true,
-                remove: false,
-            },
-        });
-
-        drawControlRef.current = drawControl;
-        map.addControl(drawControl);
-        map.on(L.Draw.Event.CREATED, handlerCreatedBound);
-
-        return () => {
-            map.off(L.Draw.Event.CREATED, handlerCreatedBound);
-            map.removeControl(drawControl);
-        };
-    }, [map, handlerCreatedBound]);
-
-    return <FeatureGroup ref={featureRef} />;
-};
-
-export default DrawBound;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx
deleted file mode 100644
index 718600c..0000000
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Delete, Route } from "@mui/icons-material";
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { useReducer } from "react";
-import DrawBound from "./DrawBound";
-
-const statusType = [
-    {
-        id: 0,
-        message: "برای آغاز ترسیم محدوده، کلیک کنید!",
-        buttons: [
-            {
-                label: "شروع ترسیم محدوده",
-                key: "start",
-                color: "primary",
-                icon: <Route />,
-                onclick: (controlDispach) => {
-                    controlDispach({ type: "SET_STATUS", status: 1 });
-                },
-            },
-        ],
-    },
-    {
-        id: 1,
-        message: "محدوده‌ی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی ابتدایی کلیک کنید!",
-        buttons: [],
-    },
-    {
-        id: 2,
-        message: "برای اصلاح محدوده، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
-        buttons: [
-            {
-                label: "حذف",
-                key: "end",
-                color: "error",
-                icon: <Delete />,
-                onclick: (controlDispach) => {
-                    controlDispach({ type: "SET_STATUS", status: 0 });
-                },
-            },
-        ],
-    },
-];
-
-const createInitialState = (bound) => {
-    if (bound) {
-        return { status: 2 };
-    }
-    return { status: 0 };
-};
-
-const reducer = (state, action) => {
-    switch (action.type) {
-        case "SET_STATUS":
-            return { ...state, status: action.status };
-        default:
-            return state;
-    }
-};
-
-const MapControlPolygon = ({ bound, setBound }) => {
-    const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
-
-    return (
-        <>
-            <DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
-            <Stack
-                direction={"row"}
-                justifyContent={"center"}
-                sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
-            >
-                <Box
-                    sx={{
-                        background: (theme) => theme.palette.info.main,
-                        borderBottomLeftRadius: 8,
-                        borderBottomRightRadius: 8,
-                        py: 0.5,
-                        px: 2,
-                    }}
-                >
-                    <Typography align="center" component={"div"} variant="caption" color={"#fff"}>
-                        {statusType.find((st) => st.id == control.status).message}
-                    </Typography>
-                </Box>
-            </Stack>
-            <Box
-                sx={{
-                    position: "absolute",
-                    left: 0,
-                    bottom: 0,
-                    zIndex: 2000,
-                    width: "100%",
-                    py: 1,
-                    background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
-                }}
-            >
-                <Stack direction={"row"} justifyContent={"center"} spacing={2}>
-                    {statusType
-                        .find((st) => st.id == control.status)
-                        .buttons.map((button) => (
-                            <Button
-                                size="small"
-                                key={button.key}
-                                variant="contained"
-                                onClick={() => button.onclick(controlDispach)}
-                                color={button.color}
-                                startIcon={button.icon}
-                            >
-                                {button.label}
-                            </Button>
-                        ))}
-                </Stack>
-            </Box>
-        </>
-    );
-};
-export default MapControlPolygon;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx
deleted file mode 100644
index 5456d12..0000000
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import L from "leaflet";
-import { FeatureGroup, useMap } from "react-leaflet";
-import "leaflet-draw";
-
-const DrawBound = ({ control, controlDispach, bound, setBound }) => {
-    const map = useMap();
-    const featureRef = useRef(null);
-    const [area, setArea] = useState();
-    const drawControlRef = useRef(null);
-
-    const safeFlyToBounds = (layer) => {
-        if (!layer || !map) return;
-        try {
-            const latLngs = layer.getLatLngs();
-            map.flyToBounds(latLngs, {
-                paddingTopLeft: [20, 35],
-                paddingBottomRight: [20, 55],
-            });
-        } catch (e) {
-            console.warn("flyToBounds failed:", e);
-        }
-    };
-
-    const safeFitBounds = (layer) => {
-        if (!layer || !map) return;
-        try {
-            const latLngs = layer.getLatLngs();
-            map.fitBounds(latLngs, {
-                paddingTopLeft: [20, 35],
-                paddingBottomRight: [20, 55],
-            });
-        } catch (e) {
-            console.warn("fitBounds failed:", e);
-        }
-    };
-
-    const bindEditEvent = (layer) => {
-        if (!layer) return;
-        layer.on("edit", function (e) {
-            const editedLayer = e.target;
-            setArea(editedLayer);
-            setBound(editedLayer);
-            safeFlyToBounds(editedLayer);
-        });
-    };
-
-    const handlerCreatedBound = useCallback((event) => {
-        const { layer } = event;
-        layer.editing.enable();
-        featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
-        setArea(layer);
-        setBound(layer);
-        safeFlyToBounds(layer);
-        bindEditEvent(layer);
-        controlDispach({ type: "SET_STATUS", status: 2 });
-    }, []);
-
-    useEffect(() => {
-        if (
-            control.status === 1 &&
-            drawControlRef.current &&
-            drawControlRef.current._toolbars?.draw?._modes?.polyline?.handler
-        ) {
-            drawControlRef.current._toolbars.draw._modes.polyline.handler.enable();
-        }
-    }, [control.status]);
-
-    useEffect(() => {
-        if (control.status === 0 && area && featureRef.current) {
-            featureRef.current.removeLayer(area);
-            setArea(null);
-            setBound(null);
-        }
-    }, [control.status, area]);
-
-    useEffect(() => {
-        if (control.status === 2 && bound && featureRef.current) {
-            setArea(bound);
-            featureRef.current.addLayer(bound);
-            bound.editing.enable();
-            safeFitBounds(bound);
-            bindEditEvent(bound);
-        }
-    }, [control.status, bound]);
-
-    useEffect(() => {
-        if (!featureRef.current) return;
-
-        L.drawLocal.draw.handlers.polyline.tooltip.start = "برای شروع ترسیم مسیر، روی نقشه کلیک کنید";
-        L.drawLocal.draw.handlers.polyline.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
-        L.drawLocal.draw.handlers.polyline.tooltip.end = "برای بستن مسیر، روی نقطه پایانی کلیک کنید";
-
-        const drawControl = new L.Control.Draw({
-            draw: {
-                polyline: {
-                    shapeOptions: {
-                        color: "#3388ff",
-                        weight: 3,
-                        clickable: true,
-                    },
-                },
-                polygon: false,
-                rectangle: false,
-                circle: false,
-                marker: false,
-                circlemarker: false,
-            },
-            edit: {
-                featureGroup: featureRef.current,
-                edit: true,
-                remove: false,
-            },
-        });
-
-        drawControlRef.current = drawControl;
-        map.addControl(drawControl);
-        map.on(L.Draw.Event.CREATED, handlerCreatedBound);
-
-        return () => {
-            map.off(L.Draw.Event.CREATED, handlerCreatedBound);
-            map.removeControl(drawControl);
-        };
-    }, [map, handlerCreatedBound]);
-
-    return <FeatureGroup ref={featureRef} />;
-};
-
-export default DrawBound;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx
deleted file mode 100644
index 8d9b5d0..0000000
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Delete, Route } from "@mui/icons-material";
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { useReducer } from "react";
-import DrawBound from "./DrawBound";
-
-const statusType = [
-    {
-        id: 0,
-        message: "برای آغاز ترسیم مسیر، کلیک کنید!",
-        buttons: [
-            {
-                label: "شروع ترسیم مسیر",
-                key: "start",
-                color: "primary",
-                icon: <Route />,
-                onclick: (controlDispach) => {
-                    controlDispach({ type: "SET_STATUS", status: 1 });
-                },
-            },
-        ],
-    },
-    {
-        id: 1,
-        message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!",
-        buttons: [],
-    },
-    {
-        id: 2,
-        message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
-        buttons: [
-            {
-                label: "حذف",
-                key: "end",
-                color: "error",
-                icon: <Delete />,
-                onclick: (controlDispach) => {
-                    controlDispach({ type: "SET_STATUS", status: 0 });
-                },
-            },
-        ],
-    },
-];
-
-const createInitialState = (bound) => {
-    if (bound) {
-        return { status: 2 };
-    }
-    return { status: 0 };
-};
-
-const reducer = (state, action) => {
-    switch (action.type) {
-        case "SET_STATUS":
-            return { ...state, status: action.status };
-        default:
-            return state;
-    }
-};
-
-const MapControlPolyline = ({ bound, setBound }) => {
-    const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
-
-    return (
-        <>
-            <DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
-            <Stack
-                direction={"row"}
-                justifyContent={"center"}
-                sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
-            >
-                <Box
-                    sx={{
-                        background: (theme) => theme.palette.info.main,
-                        borderBottomLeftRadius: 8,
-                        borderBottomRightRadius: 8,
-                        py: 0.5,
-                        px: 2,
-                    }}
-                >
-                    <Typography align="center" component={"div"} variant="caption" color={"#fff"}>
-                        {statusType.find((st) => st.id == control.status).message}
-                    </Typography>
-                </Box>
-            </Stack>
-            <Box
-                sx={{
-                    position: "absolute",
-                    left: 0,
-                    bottom: 0,
-                    zIndex: 2000,
-                    width: "100%",
-                    py: 1,
-                    background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
-                }}
-            >
-                <Stack direction={"row"} justifyContent={"center"} spacing={2}>
-                    {statusType
-                        .find((st) => st.id == control.status)
-                        .buttons.map((button) => (
-                            <Button
-                                size="small"
-                                key={button.key}
-                                variant="contained"
-                                onClick={() => button.onclick(controlDispach)}
-                                color={button.color}
-                                startIcon={button.icon}
-                            >
-                                {button.label}
-                            </Button>
-                        ))}
-                </Stack>
-            </Box>
-        </>
-    );
-};
-export default MapControlPolyline;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx
new file mode 100644
index 0000000..0a3be1b
--- /dev/null
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx
@@ -0,0 +1,28 @@
+import { Box, Typography } from "@mui/material";
+
+const AlarmText = ({ isSource }) => {
+    if (isSource) return null;
+    return (
+        <Box
+            sx={{
+                position: "absolute",
+                top: 5,
+                left: 5,
+                zIndex: 1000,
+                border: "1px solid #ed0f02",
+                backgroundColor: "#f19898",
+                py: 0.5,
+                px: 1,
+                borderRadius: 2,
+                opacity: 0.8,
+                boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+            }}
+        >
+            <Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
+                با کلیک بر روی مارکر موقعیت را انتخاب کنید
+            </Typography>
+        </Box>
+    );
+};
+
+export default AlarmText;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx
new file mode 100644
index 0000000..c19cb6f
--- /dev/null
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx
@@ -0,0 +1,53 @@
+import { Box, Button, TextField } from "@mui/material";
+
+const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
+    if (!isSource) return null;
+
+    return (
+        <Box
+            sx={{
+                position: "absolute",
+                bottom: 5,
+                left: 5,
+                zIndex: 1000,
+                backgroundColor: "white",
+                border: "1px solid #e1e1e1",
+                padding: 1,
+                borderRadius: 2,
+                opacity: 0.8,
+                gap: 1,
+                display: "flex",
+                flexDirection: "column",
+            }}
+        >
+            <div style={{ display: "flex", alignItems: "end", gap: 4 }}>
+                <TextField
+                    variant="outlined"
+                    size="small"
+                    readOnly
+                    value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
+                />
+                {isSource && isDest && (
+                    <Button variant="contained" color="success" size="small" onClick={onEditSource}>
+                        ویرایش مبدا
+                    </Button>
+                )}
+            </div>
+            {isDest && (
+                <div style={{ display: "flex", alignItems: "end", gap: 4 }}>
+                    <TextField
+                        size="small"
+                        variant="outlined"
+                        readOnly
+                        value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
+                    />
+                    <Button variant="contained" color="error" size="small" onClick={onEditDest}>
+                        ویرایش مقصد
+                    </Button>
+                </div>
+            )}
+        </Box>
+    );
+};
+
+export default DataBox;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx
new file mode 100644
index 0000000..8cc7e90
--- /dev/null
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { Marker, Polyline, useMap } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+
+const ShowRoute = ({ area }) => {
+    const map = useMap();
+    const defaultIconSize = [35, 35];
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
+    const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+
+    if (!area) return null;
+    const coords = polyline.decode(area, 6);
+
+    if (coords.length === 0) return null;
+
+    const sourcePosition = coords[0];
+    const destPosition = coords[coords.length - 1];
+    useEffect(() => {
+        if (coords.length > 0) {
+            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
+        }
+    }, [area]);
+
+    return (
+        <>
+            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            <Marker position={sourcePosition} icon={sourceIcon} />
+            <Marker position={destPosition} icon={destIcon} />
+        </>
+    );
+};
+
+export default ShowRoute;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx
new file mode 100644
index 0000000..06e7c9b
--- /dev/null
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx
@@ -0,0 +1,219 @@
+import { Marker, Polyline, useMapEvents } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
+import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+import { useEffect, useRef, useState } from "react";
+import DataBox from "./DataBox";
+import AlarmText from "./AlarmText";
+
+const Routing = ({ setArea, setLocations, locations, area }) => {
+    const mapPrevSourceMarker = useRef();
+    const mapPrevDestMarker = useRef();
+    const mapRef = useRef(null);
+    const defaultIconSize = [35, 35];
+    const [isSource, setIsSource] = useState(false);
+    const [sourcePosition, setSourcePosition] = useState(null);
+    const [isDest, setIsDest] = useState(false);
+    const [destPosition, setDestPosition] = useState(null);
+    const [routeCoords, setRouteCoords] = useState([]);
+    const [alternateCoords, setAlternateCoords] = useState([]);
+    const [editingTarget, setEditingTarget] = useState(null);
+    const [selectedRoute, setSelectedRoute] = useState(null);
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    const defaultIcon = createCustomIcon(
+        defaultIconSize,
+        isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
+    );
+
+    const prevDestIcon = createCustomIcon(
+        defaultIconSize,
+        isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
+    );
+
+    const isMovingSource = !isSource || editingTarget === "source";
+    const isMovingDest = isSource && (!isDest || editingTarget === "dest");
+
+    const map = useMapEvents({
+        move(e) {
+            if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
+            if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
+        },
+        movestart() {
+            if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
+            if (isMovingDest && mapPrevDestMarker.current)
+                mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
+        },
+        moveend() {
+            if (isMovingSource)
+                mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
+            if (isMovingDest && mapPrevDestMarker.current)
+                mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
+        },
+    });
+
+    useEffect(() => {
+        mapRef.current = map;
+    }, [map]);
+
+    useEffect(() => {
+        if (locations.length < 2) return;
+        const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
+        const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
+        setSourcePosition(restoredSource);
+        setDestPosition(restoredDest);
+        setIsSource(true);
+        setIsDest(true);
+        if (area) {
+            const decoded = polyline.decode(area, 6);
+            setRouteCoords(decoded);
+            setSelectedRoute({ index: "main", coords: decoded });
+            setTimeout(() => {
+                mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
+            }, 100);
+        } else {
+            fetchRoute(restoredSource, restoredDest);
+        }
+    }, []);
+
+    const fetchRoute = async (source, dest) => {
+        const locs = [
+            { lat: source.lat, lon: source.lng },
+            { lat: dest.lat, lon: dest.lng },
+        ];
+        try {
+            const response = await fetch("https://jouya.141.ir/api/router/drive", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ locations: locs }),
+            });
+            const data = await response.json();
+            const shape = data.trip.legs[0].shape;
+            setLocations(locs);
+            setArea(shape);
+            const decoded = polyline.decode(shape, 6);
+            setRouteCoords(decoded);
+            setSelectedRoute({ index: "main", coords: decoded });
+
+            if (data.alternates?.length > 0) {
+                const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
+                setAlternateCoords(decodedAlternates);
+            } else {
+                setAlternateCoords([]);
+            }
+            map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
+        } catch (error) {
+            console.error("Routing error:", error);
+        }
+    };
+
+    const handleMarkerClick = async () => {
+        if (!isSource || editingTarget === "source") {
+            const clickedPosition = mapPrevSourceMarker.current.getLatLng();
+            setSourcePosition(clickedPosition);
+            setIsSource(true);
+            setEditingTarget(null);
+            setRouteCoords([]);
+            setAlternateCoords([]);
+            setSelectedRoute(null);
+
+            if (editingTarget === "source" && destPosition) {
+                await fetchRoute(clickedPosition, destPosition);
+            }
+        }
+    };
+
+    const handleDestMarkerClick = async () => {
+        if (!isDest || editingTarget === "dest") {
+            const clickedPosition = mapPrevDestMarker.current.getLatLng();
+            setDestPosition(clickedPosition);
+            setIsDest(true);
+            setEditingTarget(null);
+
+            await fetchRoute(sourcePosition, clickedPosition);
+        }
+    };
+
+    const handleEditSource = () => {
+        setEditingTarget("source");
+        setRouteCoords([]);
+        setAlternateCoords([]);
+        setSelectedRoute(null);
+    };
+
+    const handleEditDest = () => {
+        setEditingTarget("dest");
+        setRouteCoords([]);
+        setAlternateCoords([]);
+        setSelectedRoute(null);
+    };
+
+    const handleSelectRoute = (index, coords) => {
+        setSelectedRoute({ index, coords });
+        const encoded = polyline.encode(coords, 6);
+        setArea(encoded);
+        map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
+    };
+
+    return (
+        <>
+            <DataBox
+                isSource={isSource}
+                isDest={isDest}
+                sourcePosition={sourcePosition}
+                destPosition={destPosition}
+                editingTarget={editingTarget}
+                onEditSource={handleEditSource}
+                onEditDest={handleEditDest}
+            />
+            <AlarmText isSource={isSource} />
+            <Marker
+                position={sourcePosition || map.getCenter()}
+                ref={mapPrevSourceMarker}
+                eventHandlers={{ click: handleMarkerClick }}
+                icon={defaultIcon}
+            />
+            {isSource && (
+                <Marker
+                    position={destPosition || map.getCenter()}
+                    ref={mapPrevDestMarker}
+                    eventHandlers={{ click: handleDestMarkerClick }}
+                    icon={prevDestIcon}
+                />
+            )}
+            {alternateCoords.map((coords, index) => (
+                <Polyline
+                    key={`alternate-${index}-${selectedRoute?.index === index}`}
+                    positions={coords}
+                    color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
+                    weight={selectedRoute?.index === index ? 7 : 6}
+                    opacity={selectedRoute?.index === index ? 1 : 0.7}
+                    eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
+                />
+            ))}
+            {routeCoords.length > 0 && (
+                <Polyline
+                    key={`main-${selectedRoute?.index === "main"}`}
+                    positions={routeCoords}
+                    color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
+                    weight={selectedRoute?.index === "main" ? 7 : 6}
+                    opacity={selectedRoute?.index === "main" ? 1 : 0.7}
+                    eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
+                />
+            )}
+        </>
+    );
+};
+
+export default Routing;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx
deleted file mode 100644
index ebb3c69..0000000
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import SelectBox from "@/core/components/SelectBox";
-
-export const boundTypes = [
-    { id: "polygon", name_fa: "محدوده" },
-    { id: "polyline", name_fa: "مسیر" },
-];
-
-const SelectBoundType = ({ boundType, setBoundType, setBound, setAllData }) => {
-    return (
-        <>
-            <SelectBox
-                value={boundType}
-                label="نوع منطقه عملیاتی"
-                selectors={boundTypes}
-                schema={{ name: "name_fa", value: "id" }}
-                onChange={(newValue) => {
-                    setBound(null);
-                    setBoundType(newValue);
-                    setAllData({ bound_type: newValue });
-                }}
-            />
-        </>
-    );
-};
-export default SelectBoundType;
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx
index 3d666fd..200c1e0 100644
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx
@@ -2,40 +2,29 @@ import MapLoading from "@/core/components/MapLayer/Loading";
 import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
 import { useCallback, useState } from "react";
-import MapControlPolygon from "./MapControlPolygon";
-import MapControlPolyline from "./MapControlPolyline";
-import SelectBoundType from "./SelectBoundType";
+import Routing from "./Routing";
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
     ssr: false,
 });
 
 const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
-    const [bound, setBound] = useState(allData.bound);
-    const [boundType, setBoundType] = useState(allData.bound_type);
+    const [area, setArea] = useState(allData.area);
+    const [locations, setLocations] = useState(allData.locations);
 
     const handleNext = useCallback(() => {
-        setAllData({ bound: bound });
+        setAllData({ area: area });
+        setAllData({ locations: locations });
         setTabState((s) => s + 1);
-    }, [bound]);
+    }, [area]);
 
     return (
         <>
             <DialogContent dividers>
                 <Stack spacing={2}>
-                    <SelectBoundType
-                        boundType={boundType}
-                        setBoundType={setBoundType}
-                        setBound={setBound}
-                        setAllData={setAllData}
-                    />
                     <Box sx={{ width: "100%", height: "400px" }}>
                         <MapLayer style={{ borderRadius: "4px" }}>
-                            {boundType == "polygon" ? (
-                                <MapControlPolygon bound={bound} setBound={setBound} boundType={boundType} />
-                            ) : (
-                                <MapControlPolyline bound={bound} setBound={setBound} boundType={boundType} />
-                            )}
+                            <Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
                         </MapLayer>
                     </Box>
                 </Stack>
@@ -44,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
                 <Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
                     {"مرحله قبلی"}
                 </Button>
-                <Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
-                    {!bound ? "در انتظار ترسیم" : "مرحله بعد"}
+                <Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
+                    {!area ? "در انتظار ترسیم" : "مرحله بعد"}
                 </Button>
             </DialogActions>
         </>
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx
index 09f865f..68f99e7 100644
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx
@@ -5,7 +5,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
 import moment from "jalali-moment";
 import dynamic from "next/dynamic";
 import { useCallback } from "react";
-import ShowBound from "../../../showBound";
+import ShowRoute from "../Area/Routing/ShowRoute";
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
     ssr: false,
@@ -22,6 +22,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
                 <Box sx={{ flex: 1 }}>
                     <Stack spacing={2}>
                         <Stack spacing={1}>
+                            <Stack spacing={1}>
+                                <Divider>
+                                    <Chip color="primary" variant="outlined" label="مسیر ماموریت" />
+                                </Divider>
+                                <Box sx={{ width: "100%", height: "400px" }}>
+                                    <MapLayer style={{ borderRadius: "4px" }}>
+                                        <ShowRoute area={allData.area} />
+                                    </MapLayer>
+                                </Box>
+                            </Stack>
                             <Divider>
                                 <Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
                             </Divider>
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx
index 96de65d..0f9c7b2 100644
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx
@@ -1,4 +1,4 @@
-import { AccessTime, Engineering, InsertDriveFile, Person, Verified } from "@mui/icons-material";
+import { AccessTime, Engineering, InsertDriveFile, Person, Verified, Map } from "@mui/icons-material";
 import { Box, Tab, Tabs } from "@mui/material";
 import { useReducer, useState } from "react";
 import GetDateTime from "./GetDateTime";
@@ -6,6 +6,7 @@ import GetItemInfo from "./GetItemInfo";
 import MachineAndDriver from "./MachineAndDriver";
 import Rahdaran from "./Rahdaran";
 import Verify from "./Verify";
+import Area from "./Area";
 
 function TabPanel(props) {
     const { children, value, index } = props;
@@ -61,8 +62,9 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                 <Tab icon={<InsertDriveFile />} label="مشخصات" />
                 <Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
                 <Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
-                <Tab disabled={tabState < 3} icon={<Engineering />} label="همراهان" />
-                <Tab disabled={tabState < 4} icon={<Verified />} label="بررسی نهایی" />
+                <Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
+                <Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
+                <Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
             </Tabs>
             <TabPanel value={tabState} index={0}>
                 <GetItemInfo
@@ -95,7 +97,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                 />
             </TabPanel>
             <TabPanel value={tabState} index={3}>
-                <Rahdaran
+                <Area
                     allData={allData}
                     setAllData={(data) => {
                         dispatch({ type: "changeData", data });
@@ -105,6 +107,16 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                 />
             </TabPanel>
             <TabPanel value={tabState} index={4}>
+                <Rahdaran
+                    allData={allData}
+                    setAllData={(data) => {
+                        dispatch({ type: "changeData", data });
+                    }}
+                    handlePrev={handlePrev}
+                    setTabState={setTabState}
+                />
+            </TabPanel>
+            <TabPanel value={tabState} index={5}>
                 <Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
             </TabPanel>
         </>
diff --git a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx
index 0e1f42b..f2d3d09 100644
--- a/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx
+++ b/src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx
@@ -28,6 +28,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
                 start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
                 end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
                 driver: result.driver.id,
+                encoded_route: result.area,
             },
             hasSidebarUpdate: true,
         })
@@ -49,7 +50,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
                 </IconButton>
             </Tooltip>
 
-            <Dialog open={open} fullWidth maxWidth="sm">
+            <Dialog open={open} fullWidth maxWidth="md">
                 <IconButton
                     aria-label="close"
                     onClick={() => setOpen(false)}
@@ -77,6 +78,8 @@ const CreateWithoutProcess = ({ row, mutate }) => {
                             end_point: "",
                             region: "",
                             driver: null,
+                            area: null,
+                            locations: [],
                         }}
                         submitForm={submitForm}
                         submitting={submitting}