[TM-874] site profile non monitoring partner

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

@@ -8,7 +8,11 @@ import { VARIANT_FILE_INPUT_MODAL_ADD_IMAGES } from "@/components/elements/Input
 import { BBox } from "@/components/elements/Map-mapbox/GeoJSON";
 import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
 import { MapContainer } from "@/components/elements/Map-mapbox/Map";
-import { addSourcesToLayers, mapPolygonData } from "@/components/elements/Map-mapbox/utils";
+import {
+  addSourcesToLayers,
+  downloadSiteGeoJsonPolygons,
+  mapPolygonData
+} from "@/components/elements/Map-mapbox/utils";
 import Menu from "@/components/elements/Menu/Menu";
 import { MENU_PLACEMENT_RIGHT_BOTTOM, MENU_PLACEMENT_RIGHT_TOP } from "@/components/elements/Menu/MenuVariant";
 import Table from "@/components/elements/Table/Table";
@@ -23,7 +27,6 @@ import { useModalContext } from "@/context/modal.provider";
 import { SitePolygonDataProvider } from "@/context/sitePolygon.provider";
 import {
   fetchDeleteV2TerrafundPolygonUuid,
-  fetchGetV2TerrafundGeojsonSite,
   fetchGetV2TerrafundPolygonBboxUuid,
   fetchPostV2TerrafundPolygon,
   fetchPostV2TerrafundSitePolygonUuidSiteUuid,
@@ -203,19 +206,6 @@ const PolygonReviewTab: FC<IProps> = props => {
     );
   };
 
-  const downloadSiteGeoJsonPolygons = async (siteUuid: string) => {
-    const polygonGeojson = await fetchGetV2TerrafundGeojsonSite({
-      queryParams: { uuid: siteUuid }
-    });
-    const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `SitePolygons.geojson`;
-    link.click();
-    URL.revokeObjectURL(url);
-  };
-
   useEffect(() => {
     if (files && files.length > 0 && saveFlags) {
       uploadFiles();

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

@@ -232,7 +232,7 @@ export const MapContainer = ({
   };
 
   return (
-    <div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="mapContainer">
+    <div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="map-container">
       <When condition={hasControls}>
         <When condition={polygonFromMap?.isOpen}>
           <ControlGroup position="top-center">

src/components/elements/Map-mapbox/hooks/useMap.ts

@@ -46,6 +46,7 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => {
 
   const initMap = () => {
     if (map.current) return;
+
     map.current = new mapboxgl.Map({
       container: mapContainer.current as HTMLDivElement,
       style: MAP_STYLE,

src/components/elements/Map-mapbox/utils.ts

@@ -4,6 +4,7 @@ import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 
 import { layersList } from "@/constants/layers";
+import { fetchGetV2TerrafundGeojsonSite, fetchGetV2TypeEntity } from "@/generated/apiComponents";
 import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas";
 
 import { BBox, FeatureCollection } from "./GeoJSON";
@@ -275,3 +276,29 @@ export function mapPolygonData(sitePolygonData: SitePolygonsDataResponse | undef
     return acc;
   }, {});
 }
+
+export function getPolygonsData(uuid: string, statusFilter: string, sortOrder: string, type: string, cb: Function) {
+  fetchGetV2TypeEntity({
+    queryParams: {
+      uuid: uuid,
+      type: type,
+      status: statusFilter,
+      [`sort[${sortOrder}]`]: sortOrder === "created_at" ? "desc" : "asc"
+    }
+  }).then(result => {
+    cb(result);
+  });
+}
+
+export async function downloadSiteGeoJsonPolygons(siteUuid: string): Promise<void> {
+  const polygonGeojson = await fetchGetV2TerrafundGeojsonSite({
+    queryParams: { uuid: siteUuid }
+  });
+  const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `SitePolygons.geojson`;
+  link.click();
+  URL.revokeObjectURL(url);
+}

src/components/elements/MapPolygonPanel/AttributeInformation.tsx

@@ -0,0 +1,156 @@
+import { useT } from "@transifex/react";
+
+import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
+import Input from "@/components/elements/Inputs/Input/Input";
+
+import Text from "../Text/Text";
+
+const dropdownOptionsRestoration = [
+  {
+    title: "Tree Planting",
+    value: 1
+  },
+  {
+    title: "Direct Seeding",
+    value: 2
+  },
+  {
+    title: "Assisted Natural Regeneration",
+    value: 3
+  }
+];
+const dropdownOptionsTarget = [
+  {
+    title: "Agroforest",
+    value: 1
+  },
+  {
+    title: "Natural Forest",
+    value: 2
+  },
+  {
+    title: "Mangrove",
+    value: 3
+  },
+  {
+    title: "Peatland",
+    value: 4
+  },
+  {
+    title: "Riparian Area or Wetland",
+    value: 5
+  },
+  {
+    title: "Silvopasture",
+    value: 6
+  },
+  {
+    title: "Woodlot or Plantation",
+    value: 7
+  },
+  {
+    title: "Urban Forest",
+    value: 8
+  }
+];
+
+const dropdownOptionsTree = [
+  {
+    title: "Single Line",
+    value: 1
+  },
+  {
+    title: "Partial",
+    value: 2
+  },
+  {
+    title: "Full",
+    value: 3
+  }
+];
+const AttributeInformation = () => {
+  const t = useT();
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        label={t("Polygon Name")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Input Polygon Name")}
+        type="text"
+        name=""
+      />
+      <label className="flex flex-col gap-2">
+        <Text variant="text-14-light" className="text-white">
+          {t("Plant Start Date")}
+        </Text>
+        <input
+          type="date"
+          className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
+          placeholder={t("Input Plant Start Date")}
+        />
+      </label>
+      <label className="flex flex-col gap-2">
+        <Text variant="text-14-light" className="text-white">
+          {t("Plant End Date")}
+        </Text>
+        <input
+          type="date"
+          className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
+          placeholder={t("Input Plant Start Date")}
+        />
+      </label>
+      <Dropdown
+        multiSelect
+        label={t("Restoration Practice")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Select Restoration Practice")}
+        options={dropdownOptionsRestoration}
+        value={[t("Planting Complete")]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Dropdown
+        label={t("Target Land Use System")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Select Target Land Use System")}
+        options={dropdownOptionsTarget}
+        value={[t("Planting Complete")]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Dropdown
+        multiSelect
+        label={t("Tree Distribution")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Select Tree Distribution")}
+        options={dropdownOptionsTree}
+        value={[t("Planting Complete")]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Input
+        label={t("Trees Planted")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Input Trees Planted")}
+        type="text"
+        name=""
+      />
+      <Input
+        label={t("Estimated Area")}
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder={t("Input Estimated Area")}
+        type="text"
+        name=""
+      />
+    </div>
+  );
+};
+
+export default AttributeInformation;

src/components/elements/MapPolygonPanel/ChecklistInformation.tsx

@@ -0,0 +1,86 @@
+import { useT } from "@transifex/react";
+
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import ModalWithMap from "@/components/extensive/Modal/ModalWithMap";
+import { useModalContext } from "@/context/modal.provider";
+
+import Button from "../Button/Button";
+import Text from "../Text/Text";
+
+const ChecklistInformation = () => {
+  const { openModal, closeModal } = useModalContext();
+  const t = useT();
+
+  const openFormModalHandlerRequestPolygonSupport = () => {
+    openModal(
+      <ModalWithMap
+        title={t("Request Support")}
+        onClose={closeModal}
+        primaryButtonText={t("Submit")}
+        content="-&nbsp;&nbsp;•&nbsp;&nbsp;-"
+        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
+      ></ModalWithMap>
+    );
+  };
+  return (
+    <div className="text-white">
+      <Text variant="text-14-bold">3 {t("out")} 14</Text>
+      <Text variant="text-14-light">{t("Validation criteria are not met")}</Text>
+      <Button variant="primary" className="mt-4" onClick={openFormModalHandlerRequestPolygonSupport}>
+        {t("request support")}
+      </Button>
+      <div className="mt-3 grid gap-3">
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("GeoJSON Format")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("WGS84 Projection")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
+          {t("Earth Location")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
+          {t("Country")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("Reasonable Size Self-Intersecting Topology")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
+          {t("Overlapping Polygons")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("Spike")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("Polygon Integrity")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("GeoJSON Format")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
+          {t("WGS84 Projection")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
+          {t("Earth Location")}
+        </Text>
+        <Text variant="text-14-light" className="flex items-center gap-2">
+          <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
+          {t("Country")}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default ChecklistInformation;