complete most of the routing task just request to server

package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.9.0",
+    "@mapbox/polyline": "^1.2.1",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx

@@ -87,21 +87,21 @@ export default function Example() {
                     height: "400px",
                 }}
             >
-                    <MapCenterTracker setCenter={setCenter} />
+                <MapCenterTracker setCenter={setCenter} />
 
-                    {/* saved markers */}
+                {/* saved markers */}
-                    {origin && <Marker position={origin} icon={originIcon} />}
+                {origin && <Marker position={origin} icon={originIcon} />}
 
-                    {destination && <Marker position={destination} icon={destinationIcon} />}
+                {destination && <Marker position={destination} icon={destinationIcon} />}
 
-                    {/* route line */}
+                {/* route line */}
-                    {origin && destination && <Polyline positions={[origin, destination]} />}
+                {origin && destination && <Polyline positions={[origin, destination]} />}
 
                 {/* fixed center pin */}
                 {step !== "done" && <FixedCenterMarker />}
             </div>
 
-            <div style={{ marginTop: 16, position: "absolute", z : 50, top : 5 }}>
+            <div style={{ marginTop: 16, position: "absolute", z: 50, top: 5 }}>
                 <button onClick={handleOk}>
                     {step === "origin" && "Set Origin"}
                     {step === "destination" && "Set Destination"}

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/DataBox.jsx

@@ -0,0 +1,46 @@
+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)}` : ""}
+                />
+                <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;

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx

@@ -1,46 +1,202 @@
-import { Marker, useMapEvents } from "react-leaflet";
+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 { useRef } from "react";
+import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
-
+import DestIcon from "@/assets/images/destination-icon.svg";
+import { useRef, useState } from "react";
+import DataBox from "./DataBox";
 
 const Routing = () => {
-  const mapPrevSourceMarker = useRef();
+    const mapPrevSourceMarker = useRef();
-  const defaultIconSize = [35, 35];
+    const mapPrevDestMarker = useRef();
-  const createCustomIcon = (size, iconUrl) => {
+    const defaultIconSize = [35, 35];
-      return L.icon({
+    const [isSource, setIsSource] = useState(false);
-          iconUrl: iconUrl,
+    const [sourcePosition, setSourcePosition] = useState(null);
-          iconSize: size,
+    const [isDest, setIsDest] = useState(false);
-          iconAnchor: [size[0] / 2, size[1]],
+    const [destPosition, setDestPosition] = useState(null);
-          popupAnchor: [0, -size[1]],
+    const [routeCoords, setRouteCoords] = useState([]);
-      });
+    const [alternateCoords, setAlternateCoords] = useState([]);
-  };
+    const [editingTarget, setEditingTarget] = useState(null);
+    const [selectedRoute, setSelectedRoute] = useState(null);
 
-  const map = useMapEvents({
+    const createCustomIcon = (size, iconUrl) => {
-    move(e) {
+        return L.icon({
-        mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
+            iconUrl: iconUrl,
-    },
+            iconSize: size,
-    movestart() {
+            iconAnchor: [size[0] / 2, size[1]],
-        mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
+            popupAnchor: [0, -size[1]],
-    },
+        });
-    moveend() {
+    };
-        mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
-    },
-  });
 
-  const handleMarkerClick = () => {
+    const defaultIcon = createCustomIcon(
-      console.log(mapPrevSourceMarker.current.getLatLng().lat);
+        defaultIconSize,
-  };
+        isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
+    );
 
-  return (
+    const prevDestIcon = createCustomIcon(
-    <Marker
+        defaultIconSize,
-        position={map.getCenter()}
+        isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
-        ref={mapPrevSourceMarker}
+    );
-        eventHandlers={{ click: handleMarkerClick }}
-        icon={L.divIcon({ className: "" })}
-    />
-  )
-}
 
-export default Routing
+    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));
+            }
+        },
+    });
+
+    const fetchRoute = async (source, dest) => {
+        const locations = [
+            { 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 }),
+            });
+            const data = await response.json();
+
+            const shape = data.trip.legs[0].shape;
+            const decoded = polyline.decode(shape, 6);
+            setRouteCoords(decoded);
+            setSelectedRoute({ index: "main", coords: decoded });
+
+            if (data.alternates && 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();
+            console.log("Source:", clickedPosition.lat, clickedPosition.lng);
+            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 });
+        map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
+        console.log("Selected route:", index, coords);
+    };
+
+    return (
+        <>
+            <DataBox
+                isSource={isSource}
+                isDest={isDest}
+                sourcePosition={sourcePosition}
+                destPosition={destPosition}
+                editingTarget={editingTarget}
+                onEditSource={handleEditSource}
+                onEditDest={handleEditDest}
+            />
+            <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;

src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/Area/index.jsx

@@ -24,7 +24,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
                 <Stack spacing={2}>
                     <Box sx={{ width: "100%", height: "400px" }}>
                         <MapLayer style={{ borderRadius: "4px" }}>
-                           <MapControlPolygon bound={bound} setBound={setBound} boundType={"polyline"} />
+                            <MapControlPolygon bound={bound} setBound={setBound} boundType={"polyline"} />
                         </MapLayer>
                     </Box>
                 </Stack>

src/components/dashboard/roadMissions/reports/taradodReports/Search/index.jsx

@@ -5,10 +5,7 @@ const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesP
     return (
         <>
             <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
-                <SearchReportField
+                <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
-                    control={control}
-                    hasProvincesPermission={hasProvincesPermission}
-                />
             </StyledForm>
         </>
     );

src/components/dashboard/roadMissions/reports/violationsReports/Search/index.jsx

@@ -5,10 +5,7 @@ const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesP
     return (
         <>
             <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
-                <SearchReportField
+                <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
-                    control={control}
-                    hasProvincesPermission={hasProvincesPermission}
-                />
             </StyledForm>
         </>
     );

src/core/utils/routes.js

@@ -47,10 +47,8 @@ export const GET_COUNTRY_ACTIVITY_REPORT = api + "/api/v3/missions/report/countr
 export const EXPORT_COUNTRY_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/country_activity_excel";
 export const EXPORT_PROVINCE_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/province_activity_excel";
 
-export const GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY =
+export const GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY = api + "/api/v3/missions/report_taradod/country_activity";
-    api + "/api/v3/missions/report_taradod/country_activity";
+export const GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY = api + "/api/v3/missions/report_taradod/province_activity";
-export const GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY =
-    api + "/api/v3/missions/report_taradod/province_activity";
 export const EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY =
     api + "/api/v3/missions/report_taradod/country_excel_activity";
 export const EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY =