[TM-1466] sort list of polygons

src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx

@@ -384,10 +384,8 @@ const DataCard = ({
   const basename = useBasename();
   const mapFunctions = useMap();
   const { record } = useShowContext();
-  const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator } = useMonitoredData(
-    type!,
-    record.uuid
-  );
+  const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator, polygonOptions } =
+    useMonitoredData(type!, record.uuid);
   const filteredPolygonsIndicator =
     selectedPolygonUuid !== "0"
       ? polygonsIndicator?.filter((polygon: any) => polygon.poly_id === selectedPolygonUuid)
@@ -428,14 +426,6 @@ const DataCard = ({
   const [topHeaderSecondTable, setTopHeaderSecondTable] = useState("70px");
   const totalElemIndicator = filteredPolygonsIndicator?.length ? filteredPolygonsIndicator?.length - 1 : null;
 
-  const polygonsList = [
-    { title: "All Polygons", value: "0" },
-    ...(polygonsIndicator ?? []).map((item: any) => ({
-      title: item.poly_name,
-      value: item.poly_id
-    }))
-  ];
-
   useEffect(() => {
     if (typeof window !== "undefined") {
       const width = window.innerWidth;
@@ -654,14 +644,14 @@ const DataCard = ({
             </div>
           </When>
           <When condition={tabActive === 1}>
-            <div className="relative z-auto flex w-full gap-8 px-6 pb-6 pt-2">
+            <div className="relative z-auto flex h-[calc(100vh-320px)] w-full gap-8 px-6 pb-6 pt-2">
               <Dropdown
                 containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1]", {
                   hidden: selected.includes("6")
                 })}
                 optionsClassName="!w-max right-0"
                 className="w-max"
-                options={polygonsList}
+                options={polygonOptions}
                 defaultValue={["0"]}
                 onChange={option => setSelectedPolygonUuid(option[0])}
               />

src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import classNames from "classnames";
+import React, { useEffect, useState } from "react";
 import { ReactNode } from "react";
 import { When } from "react-if";
 
@@ -81,6 +82,27 @@ const MonitoredCharts = ({
   record,
   totalHectaresRestoredGoal
 }: MonitoredChartsProps) => {
+  const [hasNoData, setHasNoData] = useState(false);
+
+  useEffect(() => {
+    const noData = selected.some(chartId => {
+      switch (chartId) {
+        case "1":
+        case "2":
+          return !parsedData?.length;
+        case "3":
+          return !ecoRegionData?.chartData?.length;
+        case "4":
+          return !strategiesData?.length;
+        case "5":
+          return !landUseData?.graphicTargetLandUseTypes?.length;
+        default:
+          return false;
+      }
+    });
+    setHasNoData(noData);
+  }, [selected, parsedData, ecoRegionData, strategiesData, landUseData]);
+
   const renderChart = (chartId: React.Key) => {
     switch (chartId) {
       case "1":
@@ -124,7 +146,11 @@ const MonitoredCharts = ({
   };
 
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div
+      className={classNames("flex w-full flex-col gap-6", {
+        "relative z-10 bg-white": hasNoData
+      })}
+    >
       {selected.map(
         (id: React.Key | null | undefined) =>
           id != null && (

src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx

@@ -6,7 +6,7 @@ import Icon from "@/components/extensive/Icon/Icon";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 
 export const NoDataState = () => (
-  <div className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
+  <div className="z-10 flex h-[75%] w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
     <Text variant="text-32-semibold" className="text-blueCustom">
       No Data to Display
     </Text>

src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts

@@ -1,5 +1,5 @@
 import { useT } from "@transifex/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { ModalId } from "@/components/extensive/Modal/ModalConst";
 import { useModalContext } from "@/context/modal.provider";
@@ -82,13 +82,19 @@ type InterfaceIndicatorPolygonsStatus = {
   approved: number;
 };
 
+interface PolygonOption {
+  title: string;
+  value: string;
+}
+
 export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => {
   const t = useT();
   const { searchTerm, indicatorSlug, setLoadingAnalysis, setIndicatorSlugAnalysis } = useMonitoredDataContext();
   const { modalOpened } = useModalContext();
   const [isLoadingVerify, setIsLoadingVerify] = useState<boolean>(false);
   const { openNotification } = useNotificationContext();
   const [treeCoverLossData, setTreeCoverLossData] = useState<Indicators[]>([]);
+  const [polygonOptions, setPolygonOptions] = useState<PolygonOption[]>([{ title: "All Polygons", value: "0" }]);
   const [treeCoverLossFiresData, setTreeCoverLossFiresData] = useState<Indicators[]>([]);
   const [analysisToSlug, setAnalysisToSlug] = useState<any>({
     treeCoverLoss: [],
@@ -172,11 +178,33 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => {
     }
   );
 
-  const filteredPolygons = indicatorData?.filter(
-    (polygon: Indicators) =>
-      polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) ||
-      polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase())
-  );
+  const filteredPolygons = useMemo(() => {
+    if (!indicatorData) return [];
+
+    return indicatorData
+      .filter(
+        (polygon: Indicators) =>
+          polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) ||
+          polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase())
+      )
+      .sort((a, b) => (a.poly_name || "").localeCompare(b.poly_name || ""));
+  }, [indicatorData, searchTerm]);
+
+  useEffect(() => {
+    if (!indicatorData) return;
+
+    const options = [
+      { title: "All Polygons", value: "0" },
+      ...indicatorData
+        .map((item: any) => ({
+          title: item.poly_name || "",
+          value: item.poly_id || ""
+        }))
+        .sort((a, b) => a.title.localeCompare(b.title))
+    ];
+
+    setPolygonOptions(options);
+  }, [indicatorData]);
 
   const headerBarPolygonStatus = dataPolygonOverview.map(status => {
     const key = status.status_key as keyof InterfaceIndicatorPolygonsStatus;
@@ -251,6 +279,7 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => {
 
   return {
     polygonsIndicator: filteredPolygons,
+    polygonOptions,
     indicatorPolygonsStatus,
     headerBarPolygonStatus,
     totalPolygonsStatus: totalPolygonsApproved,