[TM-874] site profile non monitoring partner

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

@@ -232,7 +232,11 @@ 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={`id_map_${Math.random().toString(36).substr(2, 9)}`}
+    >
       <When condition={hasControls}>
         <When condition={polygonFromMap?.isOpen}>
           <ControlGroup position="top-center">

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

@@ -46,6 +46,8 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => {
 
   const initMap = () => {
     if (map.current) return;
+
+    console.log("map.current", map.current);
     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 { fetchGetV2TypeEntity } from "@/generated/apiComponents";
 import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas";
 
 import { BBox, FeatureCollection } from "./GeoJSON";
@@ -275,3 +276,16 @@ 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);
+  });
+}

src/components/elements/MapPolygonPanel/AttributeInformation.tsx

@@ -0,0 +1,152 @@
+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 = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        label="Polygon Name"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Input Polygon Name"
+        type="text"
+        name=""
+      />
+      <label className="flex flex-col gap-2">
+        <Text variant="text-14-light" className="text-white">
+          Plant Start Date
+        </Text>
+        <input
+          type="date"
+          className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
+          placeholder="Input Plant Start Date"
+        />
+      </label>
+      <label className="flex flex-col gap-2">
+        <Text variant="text-14-light" className="text-white">
+          Plant End Date
+        </Text>
+        <input
+          type="date"
+          className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
+          placeholder="Input Plant Start Date"
+        />
+      </label>
+      <Dropdown
+        multiSelect
+        label="Restoration Practice"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Select Restoration Practice"
+        options={dropdownOptionsRestoration}
+        value={["Planting Complete"]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Dropdown
+        label="Target Land Use System"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Select Target Land Use System"
+        options={dropdownOptionsTarget}
+        value={["Planting Complete"]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Dropdown
+        multiSelect
+        label="Tree Distribution"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Select Tree Distribution"
+        options={dropdownOptionsTree}
+        value={["Planting Complete"]}
+        onChange={() => {}}
+        className="bg-white"
+      />
+      <Input
+        label="Trees Planted"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Input Trees Planted"
+        type="text"
+        name=""
+      />
+      <Input
+        label="Estimated Area"
+        labelClassName="capitalize text-white"
+        labelVariant="text-14-light"
+        placeholder="Input Estimated Area"
+        type="text"
+        name=""
+      />
+    </div>
+  );
+};
+
+export default AttributeInformation;

src/components/elements/MapPolygonPanel/ChecklistInformation.tsx

@@ -0,0 +1,82 @@
+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 openFormModalHandlerRequestPolygonSupport = () => {
+    openModal(
+      <ModalWithMap
+        title="Request Support"
+        onClose={closeModal}
+        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
+        primaryButtonText="Submit"
+        primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
+      ></ModalWithMap>
+    );
+  };
+  return (
+    <div className="text-white">
+      <Text variant="text-14-bold">3 out 14</Text>
+      <Text variant="text-14-light">Validation criteria are not met</Text>
+      <Button variant="primary" className="mt-4" onClick={openFormModalHandlerRequestPolygonSupport}>
+        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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          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" />
+          Country
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default ChecklistInformation;

src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx

@@ -0,0 +1,95 @@
+import { t } from "@transifex/native";
+import classNames from "classnames";
+import { Dispatch, SetStateAction } from "react";
+import { When } from "react-if";
+
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+
+import Button from "../Button/Button";
+import Text from "../Text/Text";
+import AttributeInformation from "./AttributeInformation";
+import ChecklistInformation from "./ChecklistInformation";
+import VersionInformation from "./VersionInformation";
+
+export interface MapEditPolygonPanelProps {
+  setEditPolygon: Dispatch<SetStateAction<boolean>>;
+  tabEditPolygon: string;
+  setTabEditPolygon: Dispatch<SetStateAction<string>>;
+  setPreviewVersion: Dispatch<SetStateAction<boolean>>;
+}
+
+const MapEditPolygonPanel = ({
+  setEditPolygon,
+  tabEditPolygon,
+  setTabEditPolygon,
+  setPreviewVersion
+}: MapEditPolygonPanelProps) => {
+  return (
+    <>
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <Text variant="text-12-light" className="text-white ">
+            Faja Lobi Project
+          </Text>
+          <Text variant="text-20-bold" className="mb-4 text-white">
+            Iseme Site
+          </Text>
+        </div>
+
+        <Button variant="text" onClick={() => setEditPolygon(false)} className="text-white hover:text-primary">
+          <Icon name={IconNames.CLEAR} className="h-4 w-4" />
+        </Button>
+      </div>
+      <div className="flex rounded-lg bg-white">
+        <button
+          className={classNames(
+            "text-12-semibold w-1/3 rounded-l-lg border border-neutral-300 p-3 hover:bg-neutral-100",
+            tabEditPolygon === "Attributes"
+              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+              : "border border-neutral-300"
+          )}
+          onClick={() => {
+            setTabEditPolygon("Attributes");
+          }}
+        >
+          {t("Attributes")}
+        </button>
+        <button
+          className={classNames(
+            "text-12-semibold w-1/3 border border-neutral-300 p-3 hover:bg-neutral-100",
+            tabEditPolygon === "Checklist"
+              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+              : "border border-neutral-300"
+          )}
+          onClick={() => {
+            setTabEditPolygon("Checklist");
+          }}
+        >
+          {t("Checklist")}
+        </button>
+        <button
+          className={classNames(
+            "text-12-semibold w-1/3 rounded-r-lg border border-neutral-300 p-3 hover:bg-neutral-100",
+            tabEditPolygon === "Version"
+              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+              : "border border-neutral-300"
+          )}
+          onClick={() => {
+            setTabEditPolygon("Version");
+          }}
+        >
+          {t("Version")}
+        </button>
+      </div>
+      <div className="mr-[-10px] mt-4 h-[calc(100%-132px)] overflow-y-auto pr-2">
+        <When condition={tabEditPolygon === "Attributes"}>{AttributeInformation}</When>
+        <When condition={tabEditPolygon === "Checklist"}>{ChecklistInformation}</When>
+        <When condition={tabEditPolygon === "Version"}>
+          <VersionInformation setPreviewVersion={setPreviewVersion} />
+        </When>
+      </div>
+    </>
+  );
+};
+
+export default MapEditPolygonPanel;