complete transportation page

src/components/dashboard/roadMissions/transportation/RowActions/Allocation/Form/index.jsx

@@ -14,16 +14,10 @@ import MachinesDialog from "./MachinesDialog";
 import Reject from "./Reject";
 import SelectBox from "@/core/components/SelectBox";
 import { Controller, useForm } from "react-hook-form";
+import RouteDetail from "../../RouteDetail";
+import ShowRoute from "../../RouteDetail/ShowRoute";
 
 const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
-    const latLngs = useMemo(() => {
-        return row.area.coordinates.map(([lng, lat]) => [lat, lng]);
-    }, [row.area.coordinates]);
-
-    const bound = useMemo(
-        () => (row.area.type === "polygon" ? L.polygon(latLngs) : L.polyline(latLngs)),
-        [row.area.type, latLngs]
-    );
     const requestServer = useRequest({ notificationSuccess: true });
     const [machine, setMachine] = useState();
     const [driver, setDriver] = useState();
@@ -180,10 +174,32 @@ const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
                                 )}
                             </Stack>
                         </Stack>
-                        <Box sx={{ width: "100%", height: "200px" }}>
+                        <Box
+                            sx={{
+                                width: "100%",
+                                height: "200px",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                display: "flex",
+                            }}
+                        >
+                            {row.encoded_route ? (
                                 <MapLayer style={{ borderRadius: "4px" }}>
-                                <ShowBound bound={bound} />
+                                    <ShowRoute area={row.encoded_route} />
                                 </MapLayer>
+                            ) : (
+                                <Typography
+                                    sx={{
+                                        color: "#ff4a4c",
+                                        fontSize: "16px",
+                                        fontWeight: "bold",
+                                        textAlign: "center",
+                                        letterSpacing: "1px",
+                                    }}
+                                >
+                                    مختصات برای این ماموریت در دسترس نمیباشد
+                                </Typography>
+                            )}
                         </Box>
                     </Stack>
                 </Box>