Merge pull request #7 from witelgroup/feature/show_technical_deputy_poligans

implemented displaying project and plans areas

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/Forms/ComputePaymentForm.jsx

@@ -175,7 +175,7 @@ export default function ComputePaymentForm({ mutate, onClose, rowData }) {
                             type="number"
                             InputProps={{ readOnly: true }}
                             fullWidth
-                            label="مساحت عیان (متر مربع)"
+                            label="مساحت اعیان (متر مربع)"
                         />
                     )}
                 />

src/components/dashboard/inquiryPrivacy/technical-deputy/ShowProjectArea/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/technical-deputy/ShowProjectArea/index.jsx

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

src/components/dashboard/inquiryPrivacy/technical-deputy/TechnicalDeputyList.jsx

@@ -6,7 +6,7 @@ import { Box, Stack } from "@mui/material";
 import moment from "jalali-moment";
 import { useMemo } from "react";
 import RowActions from "./RowActions";
-import ShowPrimaryArea from "./ShowPrimaryArea";
+import ShowProjectArea from "./ShowProjectArea";
 
 const TechnicalDeputyList = () => {
     const columns = useMemo(
@@ -127,9 +127,35 @@ const TechnicalDeputyList = () => {
                 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} />
+                            <ShowProjectArea
+                                primaryArea={row.original.primary_area}
+                                forbiddenArea={row.original.forbidden_area}
+                            />
+                        </Stack>
+                    ) : (
+                        "-"
+                    ),
+            },
+            {
+                accessorKey: "final_area",
+                header: "نمایش محدوده عرصه و اعیان",
+                id: "final_area",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+                Cell: ({ row }) =>
+                    row.original.final_area && row.original.final_plan ? (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <ShowProjectArea
+                                primaryArea={row.original.final_area}
+                                forbiddenArea={row.original.final_plan}
+                            />
                         </Stack>
                     ) : (
                         "-"