datastake-daf 0.6.802 → 0.6.804

package/dist/pages/index.js

@@ -12579,7 +12579,7 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
   hardcodedData: PropTypes__default["default"].array
 });
 
-const Container$2 = styled__default["default"].div`
+const Container$1 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
 	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
 `;
@@ -12853,7 +12853,7 @@ function LineChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -14767,7 +14767,7 @@ function BarChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -14855,10 +14855,6 @@ const useContributionsGraph = ({
     });
   }, [data, t]);
   const isEmpty = React.useMemo(() => _data?.length === 0, [_data]);
-  console.log({
-    _data,
-    isEmpty
-  });
   const chartConfig = React.useMemo(() => {
     return {
       data: _data,
@@ -19333,12 +19329,6 @@ const showHideInput$3 = (input, formsValue, repeatValues) => {
   }
   return true;
 };
-const getNkey = namespace => {
-  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm'].includes(namespace)) {
-    return 'scoping';
-  }
-  return namespace;
-};
 const groupSubsections = (form, onlyConf = false) => {
   return Object.keys(form).reduce((f, fKey) => {
     if (form[fKey].subSection) {
@@ -44758,7 +44748,7 @@ function RadialBarChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         isPdf: isPdf
       })
@@ -48536,6 +48526,218 @@ const VegetationContainer = styled__default["default"].div`
 	}
 `;
 
+const getFaunaConfig = () => {
+  return [{
+    img: "/Biodiversity/birds.svg",
+    key: "birds",
+    disabled: "/Biodiversity/birds-default.svg"
+  }, {
+    img: "/Biodiversity/crabs.svg",
+    key: "crabs",
+    disabled: "/Biodiversity/crabs-default.svg"
+  }, {
+    img: "/Biodiversity/cymbium.svg",
+    key: "cymbium",
+    disabled: "/Biodiversity/cymbium-default.svg"
+  }, {
+    img: "/Biodiversity/fish.svg",
+    key: "fish",
+    disabled: "/Biodiversity/fish-default.svg"
+  }, {
+    img: "/Biodiversity/juveniles.svg",
+    key: "juveniles",
+    disabled: "/Biodiversity/juveniles-default.svg"
+  }, {
+    img: "/Biodiversity/mollusks.svg",
+    key: "mollusks",
+    disabled: "/Biodiversity/mollusks-default.svg"
+  }, {
+    img: "/Biodiversity/mongooses.svg",
+    key: "mongooses",
+    disabled: "/Biodiversity/mongooses-default.svg"
+  }, {
+    img: "/Biodiversity/monkeys.svg",
+    key: "monkeys",
+    disabled: "/Biodiversity/monkeys-default.svg"
+  }, {
+    img: "/Biodiversity/oysters.svg",
+    key: "oysters",
+    disabled: "/Biodiversity/oysters-default.svg"
+  }, {
+    img: "/Biodiversity/snails.svg",
+    key: "snails",
+    disabled: "/Biodiversity/snails-default.svg"
+  }];
+};
+
+function FaunaWidget({
+  title = "Observed Fauna",
+  faunaPresent = [],
+  filterKeys = null,
+  columnsPerRow = 5,
+  itemWidth = 100,
+  itemHeight = 100,
+  t = key => key,
+  ...props
+}) {
+  let faunaConfig = getFaunaConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    faunaConfig = faunaConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: title,
+    className: `with-border-header no-p-body`,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(FaunaWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(FaunaContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: faunaConfig.map(item => {
+          // Use colored SVG if the item's key exists in faunaPresent array
+          // Otherwise use default SVG
+          const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t(`straatos::${item.key}`),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: `fauna-item`,
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  });
+}
+const FaunaWrapper = styled__default["default"].div`
+	padding: 24px;
+	width: 100%;
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+	` : ''}
+`;
+const FaunaContainer = styled__default["default"].div`
+	display: grid;
+	grid-template-columns: ${props => props.$columnsPerRow ? `repeat(${props.$columnsPerRow}, 1fr)` : `repeat(auto-fit, minmax(${props.$itemWidth}px, 1fr))`};
+	gap: 24px;
+	width: 100%;
+
+	.fauna-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: block;
+		margin: 0;
+		padding: 0;
+		object-fit: contain;
+	}
+`;
+
+const getInvasiveSpeciesConfig = () => {
+  return [{
+    img: "/Biodiversity/spiders.svg",
+    key: "spiders",
+    disabled: "/Biodiversity/spiders-default.svg"
+  }, {
+    img: "/Biodiversity/scale-insects.svg",
+    key: "scaleInsects",
+    disabled: "/Biodiversity/scale-insects-default.svg"
+  }, {
+    img: "/Biodiversity/caterpillars.svg",
+    key: "caterpillars",
+    disabled: "/Biodiversity/caterpillars-default.svg"
+  }, {
+    img: "/Biodiversity/ants.svg",
+    key: "ants",
+    disabled: "/Biodiversity/ants-default.svg"
+  }, {
+    img: "/Biodiversity/unidentified-pests.svg",
+    key: "unidentifiedPests",
+    disabled: "/Biodiversity/unidentified-pests-default.svg"
+  }, {
+    img: "/Biodiversity/others.svg",
+    key: "other",
+    disabled: "/Biodiversity/others-default.svg"
+  }];
+};
+
+function InvasiveSpeciesWidget({
+  title = "Invasive Species",
+  invasiveSpecies = [],
+  hasInvasiveSpecies,
+  filterKeys = null,
+  columnsPerRow = 3,
+  itemWidth = 100,
+  itemHeight = 100,
+  t = key => key,
+  ...props
+}) {
+  let invasiveSpeciesConfig = getInvasiveSpeciesConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    invasiveSpeciesConfig = invasiveSpeciesConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: title,
+    className: `with-border-header no-p-body`,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: invasiveSpeciesConfig.map(item => {
+          // If hasInvasiveSpecies is 'no', show all as inactive
+          // If hasInvasiveSpecies is 'yes', show present ones as active
+          const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
+          const isPresent = !shouldShowAllAsNotPresent && Array.isArray(invasiveSpecies) && invasiveSpecies.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t(`straatos::${item.key}`),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: `invasive-species-item`,
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  });
+}
+const InvasiveSpeciesWrapper = styled__default["default"].div`
+	padding: 24px;
+	width: 100%;
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+	` : ''}
+`;
+const InvasiveSpeciesContainer = styled__default["default"].div`
+	display: grid;
+	grid-template-columns: ${props => props.$columnsPerRow ? `repeat(${props.$columnsPerRow}, 1fr)` : `repeat(auto-fit, minmax(${props.$itemWidth}px, 1fr))`};
+	gap: 24px;
+	width: 100%;
+
+	.invasive-species-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: block;
+		margin: 0;
+		padding: 0;
+		object-fit: contain;
+	}
+`;
+
 const RepeatableGroup = ({
   name = null,
   config = {},
@@ -50293,7 +50495,7 @@ function ColumnChart({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -50451,7 +50653,7 @@ function DonutPie({
     className: "flex flex-1 flex-column justify-content-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         style: {
           height
@@ -57359,7 +57561,7 @@ const SeedlingsHeight = ({
   });
 };
 
-const Container$1 = styled__default["default"].div`
+const Container = styled__default["default"].div`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
@@ -57396,7 +57598,7 @@ const MangroveGrowthAndSurvival = ({
     title: t("Mangrove Growth and Survival"),
     className: "with-border-header h-w-btn-header",
     children: /*#__PURE__*/jsxRuntime.jsxs("section", {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Container, {
         children: [/*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
           plantedSpecies: activityData?.plantedSpecies,
           mangroveSpecies: options?.mangroveSpecies,
@@ -57442,57 +57644,22 @@ const MangroveGrowthAndSurvival = ({
   });
 };
 
-const FAUNA_KEYS = ['birds', 'juveniles', 'crabs', 'cymbium', 'fish', 'mongooses', 'mollusks', 'monkeys', 'oysters', 'snails', 'caterpillars', 'animal_tracks', 'other'];
-const INVASIVE_SPECIES_KEYS = ['spiders', 'scaleInsects', 'caterpillars', 'unidentifiedPests', 'other'];
-const formatFaunaLabel = key => {
-  return key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-};
-const formatInvasiveSpeciesLabel = key => {
-  return key.replace(/([A-Z])/g, ' $1').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
-};
-const createFaunaIndicatorConfig = (key, faunaPresent, t) => {
-  const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(key);
-  const label = formatFaunaLabel(key);
-  return {
-    label: t(label),
-    type: isPresent ? 'compliant' : 'notCompliant',
-    statusIcon: isPresent ? 'Check' : 'Close',
-    statusIconColor: isPresent ? '#12B76A' : '#6C737F',
-    statusBadgeBackgroundColor: isPresent ? undefined : '#F9FAFB',
-    statusBadgeBorderColor: isPresent ? undefined : '#E5E7EB'
-  };
-};
-const createInvasiveSpeciesIndicatorConfig = (key, invasiveSpecies, hasInvasiveSpecies, t) => {
-  const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
-  const shouldShowRedForPresent = hasInvasiveSpecies === 'yes';
-  const isPresent = !shouldShowAllAsNotPresent && Array.isArray(invasiveSpecies) && invasiveSpecies.includes(key);
-  const isRedBadge = isPresent && shouldShowRedForPresent;
-  const label = formatInvasiveSpeciesLabel(key);
-  return {
-    label: t(label),
-    type: isPresent ? 'compliant' : 'notCompliant',
-    statusIcon: isPresent ? 'Check' : 'Close',
-    statusIconColor: isRedBadge ? '#D92D20' : isPresent ? '#12B76A' : '#6C737F',
-    statusBadgeBackgroundColor: isRedBadge ? '#FEE4E2' : isPresent ? undefined : '#F9FAFB',
-    statusBadgeBorderColor: isRedBadge ? '#FDA29B' : isPresent ? undefined : '#E5E7EB'
-  };
-};
-const generateFaunaConfig = (faunaPresent, t) => {
-  return FAUNA_KEYS.map(key => createFaunaIndicatorConfig(key, faunaPresent, t));
-};
-const generateInvasiveSpeciesConfig = (invasiveSpecies, hasInvasiveSpecies, t) => {
-  return INVASIVE_SPECIES_KEYS.map(key => createInvasiveSpeciesIndicatorConfig(key, invasiveSpecies, hasInvasiveSpecies, t));
-};
-
-const Container = styled__default["default"].div`
-    display: grid;
-    grid-template-columns: 70% 28.5%;
+const BiodiversityContainer = styled__default["default"].div`
+    display: flex;
     gap: 24px;
     width: 100%;
+    
     @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 `;
+const FaunaSection = styled__default["default"].section`
+    width: 60%;
+    min-width: 0;
+`;
+const InvasiveSpeciesSection = styled__default["default"].section`
+width: 38.5%;
+`;
 const BiodiversityAndHabitat = ({
   faunaPresent = [],
   invasiveSpecies = [],
@@ -57500,28 +57667,32 @@ const BiodiversityAndHabitat = ({
   loading = false,
   t = s => s
 }) => {
-  const observedFaunaConfig = React.useMemo(() => generateFaunaConfig(faunaPresent, t), [faunaPresent, t]);
-  const invasiveSpeciesConfig = React.useMemo(() => generateInvasiveSpeciesConfig(invasiveSpecies, hasInvasiveSpecies, t), [invasiveSpecies, hasInvasiveSpecies, t]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Biodiversity & Habitat"),
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx("section", {
-      children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(BiodiversityContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(FaunaSection, {
+        children: /*#__PURE__*/jsxRuntime.jsx(FaunaWidget, {
           title: t("Observed Fauna"),
-          config: observedFaunaConfig,
+          faunaPresent: faunaPresent,
+          columnsPerRow: 5,
+          itemWidth: 120,
+          itemHeight: 120,
           loading: loading,
-          widgetClassName: "h-w-btn-header",
           t: t
-        }), /*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesSection, {
+        children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesWidget, {
           title: t("Invasive Species"),
-          config: invasiveSpeciesConfig,
+          invasiveSpecies: invasiveSpecies,
+          hasInvasiveSpecies: hasInvasiveSpecies,
+          columnsPerRow: 3,
+          itemWidth: 100,
+          itemHeight: 100,
           loading: loading,
-          className: "single-column",
-          widgetClassName: "h-w-btn-header",
           t: t
-        })]
-      })
+        })
+      })]
     })
   });
 };
@@ -57720,39 +57891,40 @@ const usePrepareForm$1 = ({
   const [notFound, setNotFound] = React.useState(false);
   const prepareForm = currentView => {
     const dKey = namespaceConfig?.dataKey;
-    const nKey = `${APP}-${currentView}`;
-    if (hasKeyInObject(allData, dKey) && hasKeyInObject(allData[dKey], nKey)) {
+    if (hasKeyInObject(allData, dKey)) {
       const {
         form = {},
         data = {},
         config = {},
         linkingForms = {}
-      } = JSON.parse(JSON.stringify(allData[dKey][nKey] || {}));
-      if (data.datastakeId === id || id === "user" || data.id === id) {
-        if (viewConfig.adminNamespaces.includes(namespace)) {
-          setForm(form);
-        } else {
-          setForm({
-            ...form,
-            linking: {
-              position: 100,
-              excludeFromEdit: true,
-              label: t("Linked Subjects"),
-              template: "linkingSubjects"
-            }
-          });
-        }
-        setData(data);
-        setGroups(config.groups || {});
-        setLinkingForms(linkingForms);
-        setLoading(false);
-        setNotFound(false);
-      } else if (!data.id) {
-        if (mode === "proxy") {
-          window.location.reload();
-        } else {
+      } = JSON.parse(JSON.stringify(allData[dKey] || {}));
+      if (Object.keys(form).length > 0) {
+        if (data.datastakeId === id || id === "user" || data.id === id) {
+          if (viewConfig.adminNamespaces.includes(namespace)) {
+            setForm(form);
+          } else {
+            setForm({
+              ...form,
+              linking: {
+                position: 100,
+                excludeFromEdit: true,
+                label: t("Linked Subjects"),
+                template: "linkingSubjects"
+              }
+            });
+          }
+          setData(data);
+          setGroups(config.groups || {});
+          setLinkingForms(linkingForms);
           setLoading(false);
-          setNotFound(true);
+          setNotFound(false);
+        } else if (!data.id) {
+          if (mode === "proxy") {
+            window.location.reload();
+          } else {
+            setLoading(false);
+            setNotFound(true);
+          }
         }
       }
     }
@@ -57887,8 +58059,7 @@ const useCallToGetData = ({
   const isFirstRender = React.useRef(true);
   const callToGetData = (_doCall = false) => {
     const dKey = namespaceConfig?.dataKey;
-    const nKey = `${APP}-${getNkey(namespace || "")}`;
-    const doCall = _doCall ? true : hasKeyInObject(allData, dKey) && hasKeyInObject(allData[dKey], nKey) ? allData[dKey][nKey]?.data?.datastakeId !== id : true;
+    const doCall = _doCall ? true : hasKeyInObject(allData, dKey) ? allData[dKey]?.data?.datastakeId !== id : true;
     if (doCall) {
       if (isSupported) {
         namespaceGet[namespace]();
@@ -58609,19 +58780,6 @@ const View = ({
   const actionButtons = React.useMemo(() => {
     return groupForm?.template === "linkingSubjects" ? pageActions.filter(v => v.key !== "edit") : pageActions;
   }, [groupForm, pageActions]);
-  console.log({
-    namespaceConfiguration,
-    namespaceConfig,
-    allData,
-    namespace,
-    id,
-    group,
-    subsection,
-    version,
-    source,
-    isSupported,
-    notFound
-  });
   if (!isSupported || notFound) {
     return /*#__PURE__*/jsxRuntime.jsx(Loading, {});
   }
@@ -58747,16 +58905,15 @@ const usePrepareForm = ({
   const prepareForm = (setExtra = true) => {
     if (isSupported) {
       const dKey = namespaceConfig?.dataKey;
-      const nKey = `${APP}-${namespaceConfig?.view}`;
-      if (hasKeyInObject(allData, dKey) && hasKeyInObject(allData[dKey], nKey)) {
-        const d = JSON.parse(JSON.stringify(allData[dKey][nKey].data || {}));
+      if (hasKeyInObject(allData, dKey)) {
+        const d = JSON.parse(JSON.stringify(allData[dKey].data || {}));
         Object.keys(d).forEach(k => {
           if (d[k] === null) {
             d[k] = undefined;
           }
         });
         if (d.datastakeId === id || d.applicationId === id || id === "user" || d.id === id) {
-          const formG = mapFormGroup(allData[dKey][nKey].form || {}, d);
+          const formG = mapFormGroup(allData[dKey].form || {}, d);
           setForm(formG);
           if (setExtra) {
             if ((d || {}).risk && Array.isArray(formG) && formG.find(r => r.id === "risk")) {
@@ -58792,7 +58949,7 @@ const usePrepareForm = ({
                 setOriginalData({
                   ...d
                 });
-                setLinkingForms(allData[dKey][nKey].linkingForms);
+                setLinkingForms(allData[dKey].linkingForms);
                 setLoading(false);
                 return;
               }
@@ -58808,7 +58965,7 @@ const usePrepareForm = ({
             setOriginalData({
               ...d
             });
-            setLinkingForms(allData[dKey][nKey].linkingForms);
+            setLinkingForms(allData[dKey].linkingForms);
             setLoading(false);
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.802",
+	"version": "0.6.804",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/public/Biodiversity/others-default.svg

@@ -0,0 +1,38 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ddd_3654_27690)">
+<rect x="5" y="4" width="100" height="100" rx="8" fill="#FCFCFD" shape-rendering="crispEdges"/>
+<rect x="5.5" y="4.5" width="99" height="99" rx="7.5" stroke="#F9FAFB" shape-rendering="crispEdges"/>
+<path d="M55 45.25C55.9665 45.25 56.75 44.4665 56.75 43.5C56.75 42.5335 55.9665 41.75 55 41.75C54.0335 41.75 53.25 42.5335 53.25 43.5C53.25 44.4665 54.0335 45.25 55 45.25Z" fill="#E5E7EB"/>
+<path d="M67.25 45.25C68.2165 45.25 69 44.4665 69 43.5C69 42.5335 68.2165 41.75 67.25 41.75C66.2835 41.75 65.5 42.5335 65.5 43.5C65.5 44.4665 66.2835 45.25 67.25 45.25Z" fill="#E5E7EB"/>
+<path d="M42.75 45.25C43.7165 45.25 44.5 44.4665 44.5 43.5C44.5 42.5335 43.7165 41.75 42.75 41.75C41.7835 41.75 41 42.5335 41 43.5C41 44.4665 41.7835 45.25 42.75 45.25Z" fill="#E5E7EB"/>
+<path d="M55 45.25C55.9665 45.25 56.75 44.4665 56.75 43.5C56.75 42.5335 55.9665 41.75 55 41.75C54.0335 41.75 53.25 42.5335 53.25 43.5C53.25 44.4665 54.0335 45.25 55 45.25Z" stroke="#E5E7EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.25 45.25C68.2165 45.25 69 44.4665 69 43.5C69 42.5335 68.2165 41.75 67.25 41.75C66.2835 41.75 65.5 42.5335 65.5 43.5C65.5 44.4665 66.2835 45.25 67.25 45.25Z" stroke="#E5E7EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.75 45.25C43.7165 45.25 44.5 44.4665 44.5 43.5C44.5 42.5335 43.7165 41.75 42.75 41.75C41.7835 41.75 41 42.5335 41 43.5C41 44.4665 41.7835 45.25 42.75 45.25Z" stroke="#E5E7EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.0586 71.4717C41.8955 71.4717 43.6797 73.4336 43.6797 76.5713C43.6797 79.709 41.8955 81.6641 39.0586 81.6641C36.2148 81.6641 34.4375 79.709 34.4375 76.5713C34.4375 73.4336 36.2148 71.4717 39.0586 71.4717ZM39.0586 72.8184C37.1855 72.8184 36.0029 74.2676 36.0029 76.5713C36.0029 78.8682 37.1855 80.3174 39.0586 80.3174C40.9316 80.3174 42.1074 78.8682 42.1074 76.5713C42.1074 74.2676 40.9316 72.8184 39.0586 72.8184ZM45.4365 72.4082H46.9131V74.0762H48.335V75.2451H46.9131V79.3945C46.9131 80.0371 47.2002 80.3379 47.8223 80.3379C47.9795 80.3379 48.2324 80.3174 48.3281 80.3037V81.4727C48.1641 81.5137 47.8154 81.5479 47.4941 81.5479C46.0107 81.5479 45.4365 80.9805 45.4365 79.5449V75.2451H44.4111V74.0762H45.4365V72.4082ZM49.6475 81.5V71.1914H51.1172V75.3271H51.1514C51.5957 74.4521 52.3613 73.9941 53.4961 73.9941C55.1299 73.9941 56.1074 75.0811 56.1074 76.7559V81.5H54.624V77.043C54.624 75.9355 54.0703 75.2656 52.9834 75.2656C51.8281 75.2656 51.1309 76.0586 51.1309 77.248V81.5H49.6475ZM60.6875 75.1904C59.6211 75.1904 58.8486 75.9697 58.7666 77.1113H62.5332C62.499 75.9561 61.7676 75.1904 60.6875 75.1904ZM62.5264 79.3262H63.9414C63.7295 80.6592 62.4238 81.5889 60.7559 81.5889C58.6025 81.5889 57.2627 80.1396 57.2627 77.8154C57.2627 75.4912 58.6162 73.9805 60.6943 73.9805C62.7314 73.9805 64.0166 75.3955 64.0166 77.6445V78.1641H58.7598V78.2529C58.7598 79.5381 59.5664 80.3857 60.7832 80.3857C61.6445 80.3857 62.3213 79.9756 62.5264 79.3262ZM65.2129 81.5V74.0762H66.6279V75.3271H66.6553C66.8877 74.5 67.5713 74.001 68.4463 74.001C68.665 74.001 68.8496 74.0215 68.9658 74.0488V75.4365C68.8428 75.3887 68.583 75.3477 68.2891 75.3477C67.3115 75.3477 66.6963 76.0244 66.6963 77.0703V81.5H65.2129ZM69.793 76.1885C69.793 74.8828 70.9619 73.9873 72.6709 73.9873C74.2979 73.9873 75.4736 74.9033 75.5078 76.1953H74.1133C74.0518 75.5391 73.4844 75.1289 72.6367 75.1289C71.7959 75.1289 71.2354 75.5186 71.2354 76.1064C71.2354 76.5576 71.6045 76.8652 72.3906 77.0566L73.6211 77.3506C75.1182 77.7129 75.6719 78.2529 75.6719 79.3467C75.6719 80.6729 74.4141 81.5889 72.6162 81.5889C70.8867 81.5889 69.7041 80.6934 69.5947 79.3535H71.0576C71.1738 80.0645 71.748 80.4541 72.6914 80.4541C73.6143 80.4541 74.1953 80.0713 74.1953 79.4697C74.1953 78.998 73.9014 78.752 73.1221 78.5537L71.7959 78.2256C70.4561 77.8975 69.793 77.2139 69.793 76.1885Z" fill="#D2D6DB"/>
+</g>
+<defs>
+<filter id="filter0_ddd_3654_27690" x="0" y="0" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3654_27690"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3654_27690"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3654_27690" result="effect2_dropShadow_3654_27690"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_3654_27690" result="effect3_dropShadow_3654_27690"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_3654_27690" result="shape"/>
+</filter>
+</defs>
+</svg>

package/public/Biodiversity/others.svg

@@ -0,0 +1,38 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ddd_3654_27691)">
+<rect x="5" y="4" width="100" height="100" rx="8" fill="white" shape-rendering="crispEdges"/>
+<rect x="5.5" y="4.5" width="99" height="99" rx="7.5" stroke="#E5E7EB" shape-rendering="crispEdges"/>
+<path d="M55 45.25C55.9665 45.25 56.75 44.4665 56.75 43.5C56.75 42.5335 55.9665 41.75 55 41.75C54.0335 41.75 53.25 42.5335 53.25 43.5C53.25 44.4665 54.0335 45.25 55 45.25Z" fill="#00AEB1"/>
+<path d="M67.25 45.25C68.2165 45.25 69 44.4665 69 43.5C69 42.5335 68.2165 41.75 67.25 41.75C66.2835 41.75 65.5 42.5335 65.5 43.5C65.5 44.4665 66.2835 45.25 67.25 45.25Z" fill="#00AEB1"/>
+<path d="M42.75 45.25C43.7165 45.25 44.5 44.4665 44.5 43.5C44.5 42.5335 43.7165 41.75 42.75 41.75C41.7835 41.75 41 42.5335 41 43.5C41 44.4665 41.7835 45.25 42.75 45.25Z" fill="#00AEB1"/>
+<path d="M55 45.25C55.9665 45.25 56.75 44.4665 56.75 43.5C56.75 42.5335 55.9665 41.75 55 41.75C54.0335 41.75 53.25 42.5335 53.25 43.5C53.25 44.4665 54.0335 45.25 55 45.25Z" stroke="#00AEB1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.25 45.25C68.2165 45.25 69 44.4665 69 43.5C69 42.5335 68.2165 41.75 67.25 41.75C66.2835 41.75 65.5 42.5335 65.5 43.5C65.5 44.4665 66.2835 45.25 67.25 45.25Z" stroke="#00AEB1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.75 45.25C43.7165 45.25 44.5 44.4665 44.5 43.5C44.5 42.5335 43.7165 41.75 42.75 41.75C41.7835 41.75 41 42.5335 41 43.5C41 44.4665 41.7835 45.25 42.75 45.25Z" stroke="#00AEB1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.0586 71.4717C41.8955 71.4717 43.6797 73.4336 43.6797 76.5713C43.6797 79.709 41.8955 81.6641 39.0586 81.6641C36.2148 81.6641 34.4375 79.709 34.4375 76.5713C34.4375 73.4336 36.2148 71.4717 39.0586 71.4717ZM39.0586 72.8184C37.1855 72.8184 36.0029 74.2676 36.0029 76.5713C36.0029 78.8682 37.1855 80.3174 39.0586 80.3174C40.9316 80.3174 42.1074 78.8682 42.1074 76.5713C42.1074 74.2676 40.9316 72.8184 39.0586 72.8184ZM45.4365 72.4082H46.9131V74.0762H48.335V75.2451H46.9131V79.3945C46.9131 80.0371 47.2002 80.3379 47.8223 80.3379C47.9795 80.3379 48.2324 80.3174 48.3281 80.3037V81.4727C48.1641 81.5137 47.8154 81.5479 47.4941 81.5479C46.0107 81.5479 45.4365 80.9805 45.4365 79.5449V75.2451H44.4111V74.0762H45.4365V72.4082ZM49.6475 81.5V71.1914H51.1172V75.3271H51.1514C51.5957 74.4521 52.3613 73.9941 53.4961 73.9941C55.1299 73.9941 56.1074 75.0811 56.1074 76.7559V81.5H54.624V77.043C54.624 75.9355 54.0703 75.2656 52.9834 75.2656C51.8281 75.2656 51.1309 76.0586 51.1309 77.248V81.5H49.6475ZM60.6875 75.1904C59.6211 75.1904 58.8486 75.9697 58.7666 77.1113H62.5332C62.499 75.9561 61.7676 75.1904 60.6875 75.1904ZM62.5264 79.3262H63.9414C63.7295 80.6592 62.4238 81.5889 60.7559 81.5889C58.6025 81.5889 57.2627 80.1396 57.2627 77.8154C57.2627 75.4912 58.6162 73.9805 60.6943 73.9805C62.7314 73.9805 64.0166 75.3955 64.0166 77.6445V78.1641H58.7598V78.2529C58.7598 79.5381 59.5664 80.3857 60.7832 80.3857C61.6445 80.3857 62.3213 79.9756 62.5264 79.3262ZM65.2129 81.5V74.0762H66.6279V75.3271H66.6553C66.8877 74.5 67.5713 74.001 68.4463 74.001C68.665 74.001 68.8496 74.0215 68.9658 74.0488V75.4365C68.8428 75.3887 68.583 75.3477 68.2891 75.3477C67.3115 75.3477 66.6963 76.0244 66.6963 77.0703V81.5H65.2129ZM69.793 76.1885C69.793 74.8828 70.9619 73.9873 72.6709 73.9873C74.2979 73.9873 75.4736 74.9033 75.5078 76.1953H74.1133C74.0518 75.5391 73.4844 75.1289 72.6367 75.1289C71.7959 75.1289 71.2354 75.5186 71.2354 76.1064C71.2354 76.5576 71.6045 76.8652 72.3906 77.0566L73.6211 77.3506C75.1182 77.7129 75.6719 78.2529 75.6719 79.3467C75.6719 80.6729 74.4141 81.5889 72.6162 81.5889C70.8867 81.5889 69.7041 80.6934 69.5947 79.3535H71.0576C71.1738 80.0645 71.748 80.4541 72.6914 80.4541C73.6143 80.4541 74.1953 80.0713 74.1953 79.4697C74.1953 78.998 73.9014 78.752 73.1221 78.5537L71.7959 78.2256C70.4561 77.8975 69.793 77.2139 69.793 76.1885Z" fill="#6C737F"/>
+</g>
+<defs>
+<filter id="filter0_ddd_3654_27691" x="0" y="0" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3654_27691"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3654_27691"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3654_27691" result="effect2_dropShadow_3654_27691"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_3654_27691" result="effect3_dropShadow_3654_27691"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_3654_27691" result="shape"/>
+</filter>
+</defs>
+</svg>