[TM-3122] ANR plots as Project Developer

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/PolygonDrawer.tsx

@@ -1,7 +1,7 @@
 import { Divider } from "@mui/material";
 import { useT } from "@transifex/react";
 import { isEmpty } from "lodash";
-import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { When } from "react-if";
 
 import Accordion from "@/components/elements/Accordion/Accordion";
@@ -23,6 +23,7 @@ import { useOnUnmount } from "@/hooks/useOnMount";
 import { useValueChanged } from "@/hooks/useValueChanged";
 import ApiSlice from "@/store/apiSlice";
 import Log from "@/utils/log";
+import { isSitePolygonEligibleForAnrMonitoringPlots } from "@/utils/sitePolygonAnrEligibility";
 
 import AuditLogTable from "../../../AuditLogTab/components/AuditLogTable";
 import CommentarySection from "../CommentarySection/CommentarySection";
@@ -75,6 +76,10 @@ const PolygonDrawer = ({
   const sitePolygonRefresh = context?.reloadSiteData;
   const openEditNewPolygon = contextMapArea?.isUserDrawingEnabled;
   const selectedPolygon = sitePolygonData?.find((item: SitePolygonLightDto) => item?.polygonUuid === polygonSelected);
+  const anrPlotsEligible = useMemo(
+    () => isSitePolygonEligibleForAnrMonitoringPlots(selectedPolygon),
+    [selectedPolygon]
+  );
   const anrMapOverlay = useAnrMapOverlayOptional();
   const { statusSelectedPolygon, setStatusSelectedPolygon, setShouldRefetchValidation } = contextMapArea;
   const { showLoader, hideLoader } = useLoading();
@@ -136,8 +141,46 @@ const PolygonDrawer = ({
   });
 
   useEffect(() => {
-    setActiveTab(initialTopTab);
-  }, [polygonSelected, initialTopTab]);
+    const eligible = isSitePolygonEligibleForAnrMonitoringPlots(selectedPolygon);
+    const safeTab = initialTopTab === "anrMonitoringPlots" && !eligible ? "attributes" : initialTopTab;
+    setActiveTab(safeTab);
+  }, [polygonSelected, initialTopTab, selectedPolygon]);
+
+  useEffect(() => {
+    if (!isSitePolygonEligibleForAnrMonitoringPlots(selectedPolygon) && activeTab === "anrMonitoringPlots") {
+      setActiveTab("attributes");
+    }
+  }, [selectedPolygon, activeTab]);
+
+  useEffect(() => {
+    if (anrMapOverlay == null) {
+      return;
+    }
+    if (!isOpenPolygonDrawer) {
+      anrMapOverlay.resetAnrMapOverlay();
+      prevActiveTabForAnrRef.current = null;
+      return;
+    }
+    anrMapOverlay.setDrawerOpen(true);
+    const onAnrTab = activeTab === "anrMonitoringPlots" && anrPlotsEligible;
+    anrMapOverlay.setAnrTabActive(onAnrTab);
+
+    if (selectedPolygon?.uuid != null && selectedPolygon.uuid !== "") {
+      anrMapOverlay.syncDrawerSelection({
+        sitePolygonUuid: selectedPolygon.uuid,
+        geometryPolygonUuid: polygonSelected
+      });
+    }
+
+    if (onAnrTab && prevActiveTabForAnrRef.current !== "anrMonitoringPlots") {
+      anrMapOverlay.setShowPlotsOnMap(true);
+    }
+    prevActiveTabForAnrRef.current = activeTab;
+  }, [anrMapOverlay, activeTab, anrPlotsEligible, isOpenPolygonDrawer, polygonSelected, selectedPolygon?.uuid]);
+
+  useOnUnmount(() => {
+    anrMapOverlayRef.current?.resetAnrMapOverlay();
+  });
 
   useEffect(() => {
     if (anrMapOverlay == null) {
@@ -248,13 +291,15 @@ const PolygonDrawer = ({
         >
           <span className="text-12">{t("Polygon Status")}</span>
         </Button>
-        <Button
-          variant={`${activeTab === "anrMonitoringPlots" ? "white-toggle" : "transparent-toggle"}`}
-          onClick={() => setActiveTab("anrMonitoringPlots")}
-          className="px-3 py-1 lg:px-2.5 lg:py-1"
-        >
-          <span className="text-12">{t("ANR Monitoring Plots")}</span>
-        </Button>
+        {anrPlotsEligible ? (
+          <Button
+            variant={`${activeTab === "anrMonitoringPlots" ? "white-toggle" : "transparent-toggle"}`}
+            onClick={() => setActiveTab("anrMonitoringPlots")}
+            className="px-3 py-1 lg:px-2.5 lg:py-1"
+          >
+            <span className="text-12">{t("ANR Monitoring Plots")}</span>
+          </Button>
+        ) : null}
       </div>
       {activeTab === "polygonStatus" ? (
         <div className="flex max-h-max flex-[1_1_0] flex-col gap-6 overflow-auto pr-2.5">
@@ -295,9 +340,9 @@ const PolygonDrawer = ({
             </>
           )}
         </div>
-      ) : activeTab === "anrMonitoringPlots" ? (
+      ) : activeTab === "anrMonitoringPlots" && anrPlotsEligible ? (
         <div className="flex max-h-max flex-[1_1_0] flex-col gap-6 overflow-auto pr-2.5">
-          <AnrMonitoringPlots sitePolygonUuid={selectedPolygon?.uuid} />
+          <AnrMonitoringPlots sitePolygonUuid={selectedPolygon?.uuid ?? ""} />
         </div>
       ) : (
         <div ref={wrapperRef} className="flex max-h-max flex-[1_1_0] flex-col gap-6 overflow-auto pr-2.5">

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/AnrMonitoringPlots.tsx

@@ -18,7 +18,6 @@ import { useModalContext } from "@/context/modal.provider";
 import { useNotificationContext } from "@/context/notification.provider";
 import ApiSlice from "@/store/apiSlice";
 import Log from "@/utils/log";
-
 function getAnrPlotGeometryErrorMessage(error: unknown, fallback: string): string {
   if (error != null && typeof error === "object" && "message" in error) {
     try {
@@ -33,7 +32,10 @@ function getAnrPlotGeometryErrorMessage(error: unknown, fallback: string): strin
   return fallback;
 }
 
-const AnrMonitoringPlots: FC<{ sitePolygonUuid?: string }> = ({ sitePolygonUuid }) => {
+const AnrMonitoringPlots: FC<{
+  sitePolygonUuid: string;
+  dataFetchEnabled?: boolean;
+}> = ({ sitePolygonUuid, dataFetchEnabled = true }) => {
   const t = useT();
   const { openModal, closeModal } = useModalContext();
   const { openNotification } = useNotificationContext();
@@ -46,7 +48,7 @@ const AnrMonitoringPlots: FC<{ sitePolygonUuid?: string }> = ({ sitePolygonUuid
 
   const [, { data: anrPlotGeometry, isLoading }] = useAnrPlotGeometry({
     sitePolygonUuid,
-    enabled: sitePolygonUuid != null
+    enabled: sitePolygonUuid !== "" && dataFetchEnabled
   });
 
   const hasAnrPlotGeometry = anrPlotGeometry?.geojson?.features != null;
@@ -175,6 +177,21 @@ const AnrMonitoringPlots: FC<{ sitePolygonUuid?: string }> = ({ sitePolygonUuid
     );
   }
 
+  if (!dataFetchEnabled) {
+    return (
+      <div className="flex flex-col gap-3">
+        <Text variant="text-14" className="text-darkCustom">
+          {t("ANR Monitoring Plots")}
+        </Text>
+        <Text variant="text-12" className="text-gray-500">
+          {t(
+            "ANR monitoring plots are only available for approved polygons that include Assisted Natural Regeneration as a restoration practice."
+          )}
+        </Text>
+      </div>
+    );
+  }
+
   if (isLoading || isUploading) {
     return (
       <div className="flex items-center justify-center p-4">

src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx

@@ -22,9 +22,10 @@ import { useMapAreaContext } from "@/context/mapArea.provider";
 import { useModalContext } from "@/context/modal.provider";
 import { useSitePolygonData } from "@/context/sitePolygon.provider";
 import { usePolygonsPagination } from "@/hooks/usePolygonsPagination";
-import { ANRIcon } from "@/redesignComponents/foundations/Icons";
+import { AssistedNaturalRegenIcon } from "@/redesignComponents/foundations/Icons";
 import { OptionValue } from "@/types/common";
 import Log from "@/utils/log";
+import { isSitePolygonEligibleForAnrMonitoringPlots } from "@/utils/sitePolygonAnrEligibility";
 
 import PolygonDrawer, { PolygonDrawerTopTab } from "./PolygonDrawer/PolygonDrawer";
 import PolygonItem from "./PolygonItem";
@@ -204,106 +205,117 @@ const Polygons = (props: IPolygonProps) => {
   );
 
   const polygonMenuItems = useCallback(
-    (item: any) => [
-      {
-        id: "1",
-        render: () => (
-          <div className="flex w-full items-center gap-2">
-            <Icon name={IconNames.POLYGON} className="h-6 w-6" />
-            <Text variant="text-12-bold">Edit Polygon</Text>
-          </div>
-        ),
-        onClick: () => {
-          setDrawerInitialTopTab("attributes");
-          setSelectedPolygon(item);
-          flyToPolygonBounds(item);
-          setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
-          setIsOpenPolygonDrawer(true);
-          setSelectedPolygonsInCheckbox([]);
-        }
-      },
-      {
-        id: "2",
-        render: () => (
-          <div className="flex items-center gap-2">
-            <Icon name={IconNames.SEARCH_PA} className="h-6 w-6" />
-            <Text variant="text-12-bold">Zoom to</Text>
-          </div>
-        ),
-        onClick: () => {
-          flyToPolygonBounds(item);
-        }
-      },
-      {
-        id: "3",
-        render: () => (
-          <div className="flex items-center gap-2">
-            <Icon name={IconNames.DOWNLOAD_PA} className="h-6 w-6" />
-            <Text variant="text-12-bold">Download</Text>
-          </div>
-        ),
-        onClick: () => {
-          downloadGeoJsonPolygon(item);
-        }
-      },
-      {
-        id: "4",
-        render: () => (
-          <div className="flex items-center gap-2">
-            <Icon name={IconNames.COMMENT} className="h-6 w-6" />
-            <Text variant="text-12-bold">Comment</Text>
-          </div>
-        ),
-        onClick: () => {
-          setDrawerInitialTopTab("attributes");
-          setSelectedPolygon(item);
-          flyToPolygonBounds(item);
-          setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
-          setIsOpenPolygonDrawer(true);
-          setSelectedPolygonsInCheckbox([]);
-        }
-      },
-      {
-        id: "5",
-        render: () => (
-          <div className="flex items-center gap-2">
-            <Icon name={IconNames.TRASH_PA} className="h-5 w-5" />
-            <Text variant="text-12-bold">Delete Polygon</Text>
-          </div>
-        ),
-        onClick: () => {
-          openFormModalHandlerConfirm(item);
-        }
-      },
-      {
-        id: "6",
-        render: () => <div className="h-[1px] w-full bg-grey-750" />,
-        MenuItemVariant: MENU_ITEM_VARIANT_DIVIDER
-      },
-      {
-        id: "7",
-        render: () => (
-          <div className="flex w-full items-center gap-2">
-            <ANRIcon className="h-5 w-5" />
-            <Text variant="text-12-bold">{t("ANR Monitoring Plots")}</Text>
-          </div>
-        ),
-        onClick: () => {
-          setDrawerInitialTopTab("anrMonitoringPlots");
-          setSelectedPolygon(item);
-          flyToPolygonBounds(item);
-          setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
-          setIsOpenPolygonDrawer(true);
-          setSelectedPolygonsInCheckbox([]);
+    (item: IPolygonItem) => {
+      const siteRow = sitePolygonData?.find(p => p.polygonUuid === item.uuid);
+      const anrEligible = isSitePolygonEligibleForAnrMonitoringPlots(siteRow);
+      const baseItems = [
+        {
+          id: "1",
+          render: () => (
+            <div className="flex w-full items-center gap-2">
+              <Icon name={IconNames.POLYGON} className="h-6 w-6" />
+              <Text variant="text-12-bold">Edit Polygon</Text>
+            </div>
+          ),
+          onClick: () => {
+            setDrawerInitialTopTab("attributes");
+            setSelectedPolygon(item);
+            flyToPolygonBounds(item);
+            setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
+            setIsOpenPolygonDrawer(true);
+            setSelectedPolygonsInCheckbox([]);
+          }
+        },
+        {
+          id: "2",
+          render: () => (
+            <div className="flex items-center gap-2">
+              <Icon name={IconNames.SEARCH_PA} className="h-6 w-6" />
+              <Text variant="text-12-bold">Zoom to</Text>
+            </div>
+          ),
+          onClick: () => {
+            flyToPolygonBounds(item);
+          }
+        },
+        {
+          id: "3",
+          render: () => (
+            <div className="flex items-center gap-2">
+              <Icon name={IconNames.DOWNLOAD_PA} className="h-6 w-6" />
+              <Text variant="text-12-bold">Download</Text>
+            </div>
+          ),
+          onClick: () => {
+            downloadGeoJsonPolygon(item);
+          }
+        },
+        {
+          id: "4",
+          render: () => (
+            <div className="flex items-center gap-2">
+              <Icon name={IconNames.COMMENT} className="h-6 w-6" />
+              <Text variant="text-12-bold">Comment</Text>
+            </div>
+          ),
+          onClick: () => {
+            setDrawerInitialTopTab("attributes");
+            setSelectedPolygon(item);
+            flyToPolygonBounds(item);
+            setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
+            setIsOpenPolygonDrawer(true);
+            setSelectedPolygonsInCheckbox([]);
+          }
+        },
+        {
+          id: "5",
+          render: () => (
+            <div className="flex items-center gap-2">
+              <Icon name={IconNames.TRASH_PA} className="h-5 w-5" />
+              <Text variant="text-12-bold">Delete Polygon</Text>
+            </div>
+          ),
+          onClick: () => {
+            openFormModalHandlerConfirm(item);
+          }
         }
+      ];
+      if (!anrEligible) {
+        return baseItems;
       }
-    ],
+      return [
+        ...baseItems,
+        {
+          id: "6",
+          render: () => <div className="h-[1px] w-full bg-grey-750" />,
+          MenuItemVariant: MENU_ITEM_VARIANT_DIVIDER
+        },
+        {
+          id: "7",
+          render: () => (
+            <div className="flex w-full items-center gap-2">
+              <AssistedNaturalRegenIcon boxSize={5} />
+              <Text variant="text-12-bold">{t("ANR Monitoring Plots")}</Text>
+            </div>
+          ),
+          onClick: () => {
+            setDrawerInitialTopTab("anrMonitoringPlots");
+            setSelectedPolygon(item);
+            flyToPolygonBounds(item);
+            setPolygonFromMap({ isOpen: true, uuid: item.uuid, source: "menu" });
+            setIsOpenPolygonDrawer(true);
+            setSelectedPolygonsInCheckbox([]);
+          }
+        }
+      ];
+    },
     [
       downloadGeoJsonPolygon,
       flyToPolygonBounds,
       setPolygonFromMap,
       setSelectedPolygonsInCheckbox,
       openFormModalHandlerConfirm,
+      sitePolygonData,
       t
     ]
   );

src/components/elements/Map-mapbox/components/AnrPlotMapPopup.tsx

@@ -14,7 +14,7 @@ export const AnrPlotMapPopup = ({ plotId, areaM2, select, onClose }: AnrPlotMapP
   const t = useT();
 
   return (
-    <div className="shadow-md relative w-[240px] rounded border-t-[5px] border-t-[rgb(195,110,95)] bg-white px-3 pb-3 pt-2">
+    <div className="border-t-gray-700 shadow-md relative w-[240px] rounded border-t-[5px] bg-white px-3 pb-3 pt-2">
       <button
         type="button"
         onClick={onClose}