From 516507183b3c581ee7483a4abaa065fee37cf5f1 Mon Sep 17 00:00:00 2001
From: JORGE <egrojmonroy@gmail.com>
Date: Tue, 3 Dec 2024 12:21:44 -0400
Subject: [PATCH 1/4] [TM-1535] add loaded

---
 .../ResourceTabs/PolygonReviewTab/components/Polygons.tsx  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
index c719588f8..75cefc80c 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -1,3 +1,4 @@
+import { Box, LinearProgress } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 
 import Button from "@/components/elements/Button/Button";
@@ -232,6 +233,12 @@ const Polygons = (props: IPolygonProps) => {
           </Button>
         </div>
       </div>
+      <div className="mb-4 flex flex-col gap-1">
+        123 of 678 polygons loaded
+        <Box sx={{ width: "100%", maxWidth: 305, ml: 1 }}>
+          <LinearProgress variant="determinate" value={80} />
+        </Box>
+      </div>
       <div ref={containerRef} className="flex max-h-[150vh] flex-col gap-2 overflow-auto">
         {polygonMenu.map(item => (
           <div key={item.id}>

From e992378c11d704efdbd75fb131da410bfb2f06b9 Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Tue, 3 Dec 2024 15:28:15 -0400
Subject: [PATCH 2/4] [TM-1534] add indeterminate linear loader for polygon
 validation data

---
 .../components/PolygonItem.tsx                | 19 +++++++++++++------
 .../ResourceTabs/PolygonReviewTab/index.tsx   |  6 +++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx
index 599c52dcd..865ecb246 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx
@@ -1,3 +1,5 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
 import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { DetailedHTMLProps, HTMLAttributes, useEffect, useState } from "react";
@@ -45,7 +47,7 @@ const PolygonItem = ({
 }: MapMenuPanelItemProps & { isChecked: boolean; onCheckboxChange: (uuid: string, isChecked: boolean) => void }) => {
   let imageStatus = `IC_${status.toUpperCase().replace(/-/g, "_")}`;
   const [openCollapse, setOpenCollapse] = useState(false);
-  const [validationStatus, setValidationStatus] = useState<boolean | undefined>(undefined);
+  const [validationStatus, setValidationStatus] = useState<string | undefined>(undefined);
   const [showWarning, setShowWarning] = useState(false);
   const { polygonCriteriaMap: polygonMap } = useMapAreaContext();
   const t = useT();
@@ -59,10 +61,10 @@ const PolygonItem = ({
     const criteriaData = polygonMap[uuid];
     if (criteriaData?.criteria_list && criteriaData.criteria_list.length > 0) {
       setPolygonValidationData(parseValidationData(criteriaData));
-      setValidationStatus(isValidCriteriaData(criteriaData));
+      setValidationStatus(isValidCriteriaData(criteriaData) ? "passed" : "failed");
       setShowWarning(hasCompletedDataWhitinStimatedAreaCriteriaInvalid(criteriaData));
-    } else {
-      setValidationStatus(undefined);
+    } else if (criteriaData?.criteria_list && criteriaData.criteria_list.length === 0) {
+      setValidationStatus("notChecked");
     }
   }, [polygonMap]);
 
@@ -105,12 +107,17 @@ const PolygonItem = ({
           <div className="flex items-center justify-between">
             <Status status={status as StatusEnum} variant="small" textVariant="text-10" />
             <When condition={validationStatus == undefined}>
+              <Box sx={{ width: "100%", maxWidth: 100, ml: 1 }}>
+                <LinearProgress />
+              </Box>
+            </When>
+            <When condition={validationStatus == "notChecked"}>
               <Text variant="text-10" className="flex items-center gap-1 whitespace-nowrap text-grey-700">
                 <Icon name={IconNames.CROSS_CIRCLE} className="h-2 w-2" />
                 Not Checked
               </Text>
             </When>
-            <When condition={validationStatus}>
+            <When condition={validationStatus == "passed"}>
               <Text
                 variant="text-10"
                 className={classNames("flex items-center gap-1 text-green", {
@@ -125,7 +132,7 @@ const PolygonItem = ({
                 Passed
               </Text>
             </When>
-            <When condition={validationStatus === false}>
+            <When condition={validationStatus === "failed"}>
               <Text variant="text-10" className="flex items-center gap-1 whitespace-nowrap text-red-200">
                 <Icon name={IconNames.ROUND_RED_CROSS} className="h-2 w-2" />
                 Failed
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
index 32b1c7b4e..4449c95c5 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
@@ -280,9 +280,13 @@ const PolygonReviewTab: FC<IProps> = props => {
   }, [errorMessage]);
 
   useEffect(() => {
-    setPolygonCriteriaMap(polygonCriteriaMap);
     setPolygonData(sitePolygonData);
   }, [loading]);
+
+  useEffect(() => {
+    setPolygonCriteriaMap(polygonCriteriaMap);
+  }, [polygonCriteriaMap]);
+
   useEffect(() => {
     if (shouldRefetchValidation) {
       refetch();

From 9dcc7a58ba55013b160f99923af5a11ac70740a3 Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Tue, 3 Dec 2024 15:44:09 -0400
Subject: [PATCH 3/4] [TM-1535] fix style of linear progress bar

---
 .../ResourceTabs/PolygonReviewTab/components/Polygons.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
index 75cefc80c..3da5858e1 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -235,8 +235,8 @@ const Polygons = (props: IPolygonProps) => {
       </div>
       <div className="mb-4 flex flex-col gap-1">
         123 of 678 polygons loaded
-        <Box sx={{ width: "100%", maxWidth: 305, ml: 1 }}>
-          <LinearProgress variant="determinate" value={80} />
+        <Box sx={{ width: "100%" }}>
+          <LinearProgress variant="determinate" value={80} sx={{ borderRadius: 5 }} />
         </Box>
       </div>
       <div ref={containerRef} className="flex max-h-[150vh] flex-col gap-2 overflow-auto">

From e3b8c59f903b37cc18408740883096d683c7411c Mon Sep 17 00:00:00 2001
From: JORGE <egrojmonroy@gmail.com>
Date: Tue, 3 Dec 2024 16:28:42 -0400
Subject: [PATCH 4/4] [TM-1535] add loader of polygons

---
 .../components/PolygonReviewAside/index.tsx   |  2 ++
 .../PolygonReviewTab/components/Polygons.tsx  | 22 ++++++++++++++-----
 .../ResourceTabs/PolygonReviewTab/index.tsx   | 13 +++++++++--
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
index 9dbf3c45a..9e2c3088e 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
@@ -8,6 +8,7 @@ interface SitePolygonReviewAsideProps {
   setPolygonFromMap?: any;
   refresh?: () => void;
   mapFunctions: any;
+  totalPolygons?: number;
 }
 
 const SitePolygonReviewAside = (props: SitePolygonReviewAsideProps) => (
@@ -18,6 +19,7 @@ const SitePolygonReviewAside = (props: SitePolygonReviewAsideProps) => (
       setPolygonFromMap={props?.setPolygonFromMap}
       refresh={props?.refresh}
       mapFunctions={props?.mapFunctions}
+      totalPolygons={props?.totalPolygons}
     />
   </Stack>
 );
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
index 3da5858e1..deffea75c 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -1,5 +1,6 @@
 import { Box, LinearProgress } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
+import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import Drawer from "@/components/elements/Drawer/Drawer";
@@ -41,6 +42,7 @@ export interface IPolygonProps {
   setPolygonFromMap?: any;
   refresh?: () => void;
   mapFunctions: any;
+  totalPolygons?: number;
 }
 
 export const polygonData = [
@@ -63,13 +65,13 @@ const Polygons = (props: IPolygonProps) => {
   const context = useSitePolygonData();
   const contextMapArea = useMapAreaContext();
   const reloadSiteData = context?.reloadSiteData;
+  const sitePolygonData = context?.sitePolygonData;
   const { setIsUserDrawingEnabled, setSelectedPolygonsInCheckbox, selectedPolygonsInCheckbox } = contextMapArea;
   const [openCollapseAll, setOpenCollapseAll] = useState(false);
 
   useEffect(() => {
     setPolygonMenu(props.menu);
   }, [props.menu]);
-
   useEffect(() => {
     if (polygonFromMap?.isOpen) {
       const newSelectedPolygon = polygonMenu.find(polygon => polygon.uuid === polygonFromMap.uuid);
@@ -201,6 +203,7 @@ const Polygons = (props: IPolygonProps) => {
     setSelectedPolygonsInCheckbox(checkedUuids);
   };
 
+  const polygonSitePolygonCount = sitePolygonData?.length ?? 0;
   return (
     <div>
       <Drawer isOpen={isOpenPolygonDrawer} setIsOpen={setIsOpenPolygonDrawer} setPolygonFromMap={setPolygonFromMap}>
@@ -234,10 +237,19 @@ const Polygons = (props: IPolygonProps) => {
         </div>
       </div>
       <div className="mb-4 flex flex-col gap-1">
-        123 of 678 polygons loaded
-        <Box sx={{ width: "100%" }}>
-          <LinearProgress variant="determinate" value={80} sx={{ borderRadius: 5 }} />
-        </Box>
+        <When condition={props.totalPolygons ?? 0 > 0}>
+          <Text variant="text-14-semibold" className="text-darkCustom">
+            <span className="font-bold">{polygonSitePolygonCount}</span> of{" "}
+            <span className="font-bold">{props.totalPolygons}</span> polygons
+          </Text>
+          <Box sx={{ width: "100%" }}>
+            <LinearProgress
+              variant="determinate"
+              value={(polygonSitePolygonCount / (props.totalPolygons ?? 1)) * 100}
+              sx={{ borderRadius: 5 }}
+            />
+          </Box>
+        </When>
       </div>
       <div ref={containerRef} className="flex max-h-[150vh] flex-col gap-2 overflow-auto">
         {polygonMenu.map(item => (
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
index 4449c95c5..bb079552e 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
@@ -96,7 +96,8 @@ const PolygonReviewAside: FC<{
   setPolygonFromMap: any;
   refresh?: () => void;
   mapFunctions: any;
-}> = ({ type, data, polygonFromMap, setPolygonFromMap, refresh, mapFunctions }) => {
+  totalPolygons?: number;
+}> = ({ type, data, polygonFromMap, setPolygonFromMap, refresh, mapFunctions, totalPolygons }) => {
   switch (type) {
     case "sites":
       return (
@@ -106,6 +107,7 @@ const PolygonReviewAside: FC<{
           setPolygonFromMap={setPolygonFromMap}
           mapFunctions={mapFunctions}
           refresh={refresh}
+          totalPolygons={totalPolygons}
         />
       );
     default:
@@ -165,7 +167,13 @@ const PolygonReviewTab: FC<IProps> = props => {
     storePolygon(geojson, record, refetch, setPolygonFromMap, refreshEntity);
   };
   const mapFunctions = useMap(onSave);
-  const { data: sitePolygonData, refetch, polygonCriteriaMap, loading } = useLoadCriteriaSite(record.uuid, "sites");
+  const {
+    data: sitePolygonData,
+    refetch,
+    polygonCriteriaMap,
+    loading,
+    total
+  } = useLoadCriteriaSite(record.uuid, "sites");
 
   const { data: modelFilesData } = useGetV2MODELUUIDFiles<GetV2MODELUUIDFilesResponse>({
     pathParams: { model: "sites", uuid: record.uuid }
@@ -759,6 +767,7 @@ const PolygonReviewTab: FC<IProps> = props => {
               setPolygonFromMap={setPolygonFromMap}
               mapFunctions={mapFunctions}
               refresh={refetch}
+              totalPolygons={total}
             />
           </Grid>
         </Grid>