complete routing section and view of route on table actions

src/components/dashboard/roadMissions/operator/Actions/Create/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;

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

@@ -27,9 +27,11 @@ const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget
                     readOnly
                     value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
                 />
-                <Button variant="contained" color="success" size="small" onClick={onEditSource}>
+                {isSource && isDest && (
-                    ویرایش مبدا
+                    <Button variant="contained" color="success" size="small" onClick={onEditSource}>
-                </Button>
+                        ویرایش مبدا
+                    </Button>
+                )}
             </div>
             {isDest && (
                 <div style={{ display: "flex", alignItems: "end", gap: 4 }}>

src/components/dashboard/roadMissions/operator/Actions/Create/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;

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

@@ -5,12 +5,14 @@ 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 { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import DataBox from "./DataBox";
+import AlarmText from "./AlarmText";
 
-const Routing = () => {
+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);
@@ -45,33 +47,48 @@ const Routing = () => {
 
     const map = useMapEvents({
         move(e) {
-            if (isMovingSource) {
+            if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
-                mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
+            if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
-            }
-            if (isMovingDest && mapPrevDestMarker.current) {
-                mapPrevDestMarker.current.setLatLng(e.target.getCenter());
-            }
         },
         movestart() {
-            if (isMovingSource) {
+            if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
-                mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
+            if (isMovingDest && mapPrevDestMarker.current)
-            }
-            if (isMovingDest && mapPrevDestMarker.current) {
                 mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
-            }
         },
         moveend() {
-            if (isMovingSource) {
+            if (isMovingSource)
                 mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
-            }
+            if (isMovingDest && mapPrevDestMarker.current)
-            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 locations = [
+        const locs = [
             { lat: source.lat, lon: source.lng },
             { lat: dest.lat, lon: dest.lng },
         ];
@@ -79,16 +96,17 @@ const Routing = () => {
             const response = await fetch("https://jouya.141.ir/api/router/drive", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ locations }),
+                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 && data.alternates.length > 0) {
+            if (data.alternates?.length > 0) {
                 const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
                 setAlternateCoords(decodedAlternates);
             } else {
@@ -103,7 +121,6 @@ const Routing = () => {
     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);
@@ -144,8 +161,9 @@ const Routing = () => {
 
     const handleSelectRoute = (index, coords) => {
         setSelectedRoute({ index, coords });
+        const encoded = polyline.encode(coords, 6);
+        setArea(encoded);
         map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
-        console.log("Selected route:", index, coords);
     };
 
     return (
@@ -159,6 +177,7 @@ const Routing = () => {
                 onEditSource={handleEditSource}
                 onEditDest={handleEditDest}
             />
+            <AlarmText isSource={isSource} />
             <Marker
                 position={sourcePosition || map.getCenter()}
                 ref={mapPrevSourceMarker}

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

@@ -9,12 +9,14 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
 });
 
 const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
-    const [bound, setBound] = useState(allData.bound);
+    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 (
         <>
@@ -22,7 +24,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
                 <Stack spacing={2}>
                     <Box sx={{ width: "100%", height: "400px" }}>
                         <MapLayer style={{ borderRadius: "4px" }}>
-                            <Routing />
+                            <Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
                         </MapLayer>
                     </Box>
                 </Stack>
@@ -31,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}>
+                <Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
-                    {!bound ? "در انتظار ترسیم" : "مرحله بعد"}
+                    {!area ? "در انتظار ترسیم" : "مرحله بعد"}
                 </Button>
             </DialogActions>
         </>

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

@@ -7,7 +7,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,
@@ -23,11 +23,17 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
             <DialogContent dividers>
                 <Box sx={{ flex: 1 }}>
                     <Stack spacing={2}>
-                        <Box sx={{ width: "100%", height: "200px" }}>
+                        <Stack spacing={1}>
-                            <MapLayer style={{ borderRadius: "4px" }}>
+                            <Divider>
-                                <ShowBound bound={allData.bound} />
+                                <Chip color="primary" variant="outlined" label="مسیر ماموریت" />
-                            </MapLayer>
+                            </Divider>
-                        </Box>
+                            <Box sx={{ width: "100%", height: "400px" }}>
+                                {console.log("allData.area", allData.area)}
+                                <MapLayer style={{ borderRadius: "4px" }}>
+                                    <ShowRoute area={allData.area} />
+                                </MapLayer>
+                            </Box>
+                        </Stack>
                         <Stack spacing={1}>
                             <Divider>
                                 <Chip color="primary" variant="outlined" label="مشخصات ماموریت" />

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

@@ -27,7 +27,7 @@ const reducer = (state, action) => {
 
 const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
     const [allData, dispatch] = useReducer(reducer, defaultValues);
-    const [tabState, setTabState] = useState(2);
+    const [tabState, setTabState] = useState(0);
     const handleClose = () => {
         setOpen(false);
     };

src/components/dashboard/roadMissions/operator/Actions/Create/index.jsx

@@ -19,8 +19,6 @@ const Create = ({ mutate }) => {
 
     const submitForm = async (result) => {
         setSubmitting(true);
-        const bound = result.bound.getLatLngs();
-        let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
 
         await requestServer(REQUEST_MISSION, "post", {
             data: {
@@ -31,10 +29,7 @@ const Create = ({ mutate }) => {
                           road_observed_id: result.road_observed_id,
                       }
                     : {}),
-                area: {
+                encoded_route: result.area,
-                    type: result.bound_type,
-                    coordinates: area,
-                },
                 ...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
                 requested_machines: result.requested_machines,
                 type: result.type,
@@ -101,8 +96,8 @@ const Create = ({ mutate }) => {
                             road_observed_id: "",
                             rahdaran: [],
                             requested_machines: [],
-                            bound: null,
+                            area: null,
-                            bound_type: "polyline",
+                            locations: [],
                             type: "",
                             start_date: "",
                             start_time: null,

src/components/dashboard/roadMissions/operator/OperatorList.jsx

@@ -1,21 +1,21 @@
 "use client";
+import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
 import { missionRegions } from "@/core/utils/missionRegions";
 import { missionTypes } from "@/core/utils/missionTypes";
 import { GET_ROAD_MISSIONS_OPERATOR_LIST } from "@/core/utils/routes";
+import useCities from "@/lib/hooks/useCities";
+import useProvinces from "@/lib/hooks/useProvince";
 import { Box, Stack } from "@mui/material";
 import moment from "jalali-moment";
 import { useMemo } from "react";
-import ShowArea from "./Actions/showArea";
 import RowActions from "./RowActions";
 import MachinesDialog from "./RowActions/Machines";
-import Toolbar from "./Toolbar";
 import RahdaranDialog from "./RowActions/Rahdaran";
-import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
+import RouteDetail from "./RowActions/RouteDetail";
-import useProvinces from "@/lib/hooks/useProvince";
+import Toolbar from "./Toolbar";
-import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
-import useCities from "@/lib/hooks/useCities";
 
 const OperatorList = () => {
     const columns = useMemo(() => {
@@ -247,7 +247,7 @@ const OperatorList = () => {
             },
             {
                 header: "منطقه عملیاتی",
-                id: "area",
+                id: "encoded_route",
                 enableColumnFilter: false,
                 datatype: "numeric",
                 filterMode: "equals",
@@ -263,9 +263,9 @@ const OperatorList = () => {
                     },
                 },
                 Cell: ({ row }) =>
-                    row.original.area ? (
+                    row.original.encoded_route ? (
                         <Stack alignItems={"center"} justifyContent={"center"}>
-                            <ShowArea area={row.original.area} />
+                            <RouteDetail encoded_route={row.original.encoded_route} />
                         </Stack>
                     ) : (
                         "-"

src/components/dashboard/roadMissions/operator/RowActions/RouteDetail/index.jsx

@@ -0,0 +1,57 @@
+import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import MapIcon from "@mui/icons-material/Map";
+import MapLayer from "@/core/components/MapLayer";
+import ShowRoute from "../../Actions/Create/Form/Area/Routing/ShowRoute";
+
+const RouteDetail = ({ encoded_route }) => {
+    const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="مسیر انتخابی">
+                <IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
+                    <MapIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRouteDetailDialog}
+                onClose={() => setOpenRouteDetailDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"sm"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
+                <Box sx={{ mx: 1, borderRadius: "5px" }}>
+                    <Box
+                        sx={{
+                            width: "100%",
+                            height: "300px",
+                            border: "1px solid #e1e1e1",
+                            borderRadius: "5px",
+                        }}
+                    >
+                        <MapLayer style={{ borderRadius: "4px" }}>
+                            <ShowRoute area={encoded_route} />
+                        </MapLayer>
+                    </Box>
+                </Box>
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenRouteDetailDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RouteDetail;