synced source control with server

src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx

@@ -168,9 +168,12 @@ const PrivacyOfficeList = () => {
                 grow: false,
                 size: 100,
                 Cell: ({ row }) =>
-                    row.original.primary_area ? (
+                    row.original.primary_area && row.original.forbidden_area ? (
                         <Stack alignItems={"center"} justifyContent={"center"}>
-                            <ShowPrimaryArea primaryArea={row.original.primary_area} />
+                            <ShowPrimaryArea
+                                primaryArea={row.original.primary_area}
+                                forbiddenArea={row.original.forbidden_area}
+                            />
                         </Stack>
                     ) : (
                         "-"

src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/ShowForbiddenBound.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+import { FeatureGroup, useMap } from "react-leaflet";
+
+const ShowForbiddenBound = ({ bound }) => {
+    const map = useMap();
+    const featureRef = useRef(null);
+
+    const safeFitBounds = (layer) => {
+        if (!layer || !map) return;
+        try {
+            const latLngs = layer.getLatLngs();
+            map.fitBounds(latLngs, {
+                paddingTopLeft: [20, 20],
+                paddingBottomRight: [20, 20],
+            });
+        } catch (e) {
+            console.warn("fitBounds failed:", e);
+        }
+    };
+
+    useEffect(() => {
+        bound?.editing?.disable();
+        featureRef.current.addLayer(bound);
+        safeFitBounds(bound);
+    }, []);
+
+    return <FeatureGroup ref={featureRef} />;
+};
+export default ShowForbiddenBound;

src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx

@@ -1,27 +1,27 @@
-const {
-    Button,
-    IconButton,
-    Tooltip,
-    Box,
-    Dialog,
-    DialogTitle,
-    Typography,
-    DialogContent,
-    DialogActions,
-} = require("@mui/material");
-import LayersIcon from "@mui/icons-material/Layers";
-import CloseIcon from "@mui/icons-material/Close";
-import { useMemo, useState } from "react";
+const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
 import MapLayer from "@/core/components/MapLayer";
+import CloseIcon from "@mui/icons-material/Close";
+import LayersIcon from "@mui/icons-material/Layers";
+import { useMemo, useState } from "react";
 import ShowBound from "./ShowBound";
+import ShowForbiddenBound from "./ShowForbiddenBound";
 
-const ShowPrimaryArea = ({ primaryArea }) => {
+const ShowPrimaryArea = ({ primaryArea, forbiddenArea }) => {
     const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
     const bound = useMemo(() => {
         const latLngCoords = primaryArea.coordinates.map((coord) => [coord[1], coord[0]]);
         return primaryArea.type === "polygon" ? L.polygon(latLngCoords) : L.polyline(latLngCoords);
     }, [primaryArea]);
 
+    const forbiddenBound = useMemo(() => {
+        const latLngCoords = forbiddenArea.coordinates.map((coord) => [coord[1], coord[0]]);
+        return forbiddenArea.type === "polygon"
+            ? L.polygon(latLngCoords, {
+                  color: "#ff5555",
+              })
+            : L.polyline(latLngCoords);
+    }, [forbiddenArea]);
+
     return (
         <Box>
             <Tooltip title="نمایش پلیگان" placement="right" arrow>
@@ -57,6 +57,7 @@ const ShowPrimaryArea = ({ primaryArea }) => {
                         <Box sx={{ width: "100%", height: "400px" }}>
                             <MapLayer style={{ borderRadius: "4px" }}>
                                 <ShowBound bound={bound} />
+                                <ShowForbiddenBound bound={forbiddenBound} />
                             </MapLayer>
                         </Box>
                     </Box>