datastake-daf 0.6.803 → 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,
@@ -44748,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
       })
@@ -48526,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 = {},
@@ -50283,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,
@@ -50441,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
@@ -57349,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;
@@ -57386,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,
@@ -57432,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 = [],
@@ -57490,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
-        })]
-      })
+        })
+      })]
     })
   });
 };