src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/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/transportation/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 "./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;

src/components/dashboard/roadMissions/transportation/TransportationList.jsx

@@ -4,13 +4,13 @@ import { GET_ROAD_MISSIONS_TRANSPORTATION_LIST } from "@/core/utils/routes";
 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 { missionRegions } from "@/core/utils/missionRegions";
 import { missionTypes } from "@/core/utils/missionTypes";
 import useProvinces from "@/lib/hooks/useProvince";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import useCities from "@/lib/hooks/useCities";
+import RouteDetail from "./RowActions/RouteDetail";
 
 const TransportationList = () => {
     const columns = useMemo(() => {
@@ -230,9 +230,9 @@ const TransportationList = () => {
                     },
                 },
                 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>
                     ) : (
                         "-"