datastake-daf 0.6.795 → 0.6.797

package/dist/pages/index.js

@@ -6030,7 +6030,7 @@ const useHeader = ({
 };
 
 const {
-  useToken: useToken$9
+  useToken: useToken$a
 } = antd.theme;
 function BreadCrumbs({
   breadcrumbs = [],
@@ -6039,7 +6039,7 @@ function BreadCrumbs({
   const [splitIndex, setSplitIndex] = React.useState(0);
   const {
     token
-  } = useToken$9();
+  } = useToken$a();
   const _renderBreadcrumb = (b, i, isLast, noOnClickLast = false) => {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex breadcrumb-item",
@@ -6204,7 +6204,7 @@ const MultiSelectStyled = styled__default["default"](antd.Select)`
 `;
 
 const {
-  useToken: useToken$8
+  useToken: useToken$9
 } = antd.theme;
 
 /**
@@ -6297,7 +6297,7 @@ function Multiselect({
 }) {
   const {
     token
-  } = useToken$8();
+  } = useToken$9();
   const [selectValue, setSelectValue] = React.useState(Array.isArray(defaultSelected) ? defaultSelected.length > 0 ? defaultSelected : [] : [defaultSelected]);
   function onSelectChange(value) {
     if (!canUnselectLast && value.length === 0) {
@@ -11194,14 +11194,14 @@ const Style$e = styled__default["default"].div`
 // components/Nodes/NameNode.jsx
 const NAME_CARD_WIDTH = 315;
 const {
-  useToken: useToken$7
+  useToken: useToken$8
 } = antd.theme;
 function NameNode({
   data
 }) {
   const {
     token
-  } = useToken$7();
+  } = useToken$8();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
   const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -12291,7 +12291,7 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
   hardcodedData: PropTypes__default["default"].array
 });
 
-const Container$1 = styled__default["default"].div`
+const Container$2 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
 	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
 `;
@@ -12390,7 +12390,7 @@ const CustomLegend = ({
 };
 
 const {
-  useToken: useToken$6
+  useToken: useToken$7
 } = antd.theme;
 
 /**
@@ -12481,7 +12481,7 @@ function LineChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken$6();
+  } = useToken$7();
   const {
     legendEnabled,
     legendItems,
@@ -12565,7 +12565,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$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -14319,7 +14319,7 @@ function AccumulationGraph({
 }
 
 const {
-  useToken: useToken$5
+  useToken: useToken$6
 } = antd.theme;
 
 /**
@@ -14411,7 +14411,7 @@ function BarChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken$5();
+  } = useToken$6();
   const {
     legendEnabled,
     legendItems,
@@ -14479,7 +14479,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$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -21388,12 +21388,12 @@ function Geolocation$1({
 }
 
 const {
-  useToken: useToken$4
+  useToken: useToken$5
 } = antd.theme;
 function Smart() {
   const {
     token
-  } = useToken$4();
+  } = useToken$5();
   const [isOpen, setIsOpen] = React.useState(false);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
@@ -21477,7 +21477,7 @@ function SmartWidget({
 }) {
   const {
     token
-  } = useToken$4();
+  } = useToken$5();
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     noTitle: true,
     className: "no-p-body p-xs",
@@ -22246,7 +22246,7 @@ FormPopover.propTypes = {
 };
 
 const {
-  useToken: useToken$3
+  useToken: useToken$4
 } = antd.theme;
 const disabledTypes = ["dataLink"];
 function Versions({
@@ -22259,7 +22259,7 @@ function Versions({
 }) {
   const {
     token
-  } = useToken$3();
+  } = useToken$4();
   const dataSource = React.useMemo(() => {
     if (!versionsDatapoints) {
       return [];
@@ -32166,7 +32166,7 @@ const viewConfig$8 = {
 };
 
 const {
-  useToken: useToken$2
+  useToken: useToken$3
 } = antd.theme;
 const MAX_LENGTH = 3;
 function AvatarGroup({
@@ -32177,7 +32177,7 @@ function AvatarGroup({
   const count = items.length === maxLength + 1 ? items.length : maxLength;
   const {
     token
-  } = useToken$2();
+  } = useToken$3();
   return /*#__PURE__*/jsxRuntime.jsx(antd.Avatar.Group, {
     max: {
       count: count,
@@ -36180,7 +36180,7 @@ const KeyInformation$2 = ({
 };
 
 const {
-  useToken: useToken$1
+  useToken: useToken$2
 } = antd.theme;
 /**
  * RadialBarChart Component
@@ -36241,7 +36241,7 @@ function RadialBarChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken$1();
+  } = useToken$2();
   const {
     legendEnabled,
     legendItems,
@@ -36342,7 +36342,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$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         ref: containerRef,
         isPdf: isPdf
       })
@@ -38303,12 +38303,8 @@ const Style$1 = styled__default["default"].div`
 		border-left: none;
 		border-bottom: none;
 		
-		/* Add separator line for each item (except items in the last row) */
-		/* Items 1-4 (rows 1 and 2) get separator, items 5-6 (last row) don't */
-		&:nth-child(1),
-		&:nth-child(2),
-		&:nth-child(3),
-		&:nth-child(4) {
+		/* Add separator line for all items except the last two (last items in each column) */
+		&:not(:nth-last-child(-n+2)) {
 			&::after {
 				content: '';
 				position: absolute;
@@ -38513,12 +38509,18 @@ function Label({
  * @param {string} configItem.type - "empty" | "compliant" | "notCompliant"
  * @param {Function} configItem.onClick - Optional callback for empty type
  * @param {string} configItem.statusIcon - Optional custom icon name for status badge (overrides default)
+ * @param {string} configItem.statusIconColor - Optional custom color for status icon
+ * @param {string} configItem.statusBadgeBackgroundColor - Optional custom background color for status badge
+ * @param {string} configItem.statusBadgeBorderColor - Optional custom border color for status badge
  */
 function renderStatus(configItem) {
   const {
     type,
     onClick,
-    statusIcon
+    statusIcon,
+    statusIconColor,
+    statusBadgeBackgroundColor,
+    statusBadgeBorderColor
   } = configItem;
   switch (type) {
     case "empty":
@@ -38534,21 +38536,29 @@ function renderStatus(configItem) {
     case "compliant":
       return /*#__PURE__*/jsxRuntime.jsx(StatusBadge, {
         className: "status-badge compliant border",
+        style: {
+          backgroundColor: statusBadgeBackgroundColor || "#ECFDF3",
+          borderColor: statusBadgeBorderColor || "#A7F3D0"
+        },
         children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
           name: statusIcon || "Check",
           width: 14,
           height: 14,
-          color: "#12B76A"
+          color: statusIconColor || "#12B76A"
         })
       });
     case "notCompliant":
       return /*#__PURE__*/jsxRuntime.jsx(StatusBadge, {
         className: "status-badge not-compliant border",
+        style: {
+          backgroundColor: statusBadgeBackgroundColor || "#FEF3F2",
+          borderColor: statusBadgeBorderColor || "#FECACA"
+        },
         children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
           name: statusIcon || "Close",
           width: 14,
           height: 14,
-          color: "#D92D20"
+          color: statusIconColor || "#D92D20"
         })
       });
     default:
@@ -39921,6 +39931,195 @@ const StatCard = ({
   });
 };
 
+const VEGETATION_KEYS = {
+  HEALTHY: "healthy",
+  WHITE_SPOTS: "white",
+  BLACK_SPOTS: "black",
+  REDDISH_SPOTS: "reddish",
+  YELLOWING: "yellowing",
+  MOSAIC: "mosaic",
+  DRY_OR_DEAD: "dryOrDead",
+  NO_LEAVES: "noLeaves",
+  SPIDER_WEBS: "spiderWebs",
+  DAMAGE_FROM_INSECTS: "damageFromInsects"
+};
+
+// Mapping from growthObservations keys to VEGETATION_KEYS
+const GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS = {
+  "white_spots": VEGETATION_KEYS.WHITE_SPOTS,
+  "healthy_leaves": VEGETATION_KEYS.HEALTHY,
+  "yellowing_leaves": VEGETATION_KEYS.YELLOWING,
+  "leaf_mosaic": VEGETATION_KEYS.MOSAIC,
+  "dry_dead_leaves": VEGETATION_KEYS.DRY_OR_DEAD,
+  "no_leaves": VEGETATION_KEYS.NO_LEAVES,
+  "black_spots": VEGETATION_KEYS.BLACK_SPOTS,
+  "reddish_spots": VEGETATION_KEYS.REDDISH_SPOTS,
+  "spider_webs": VEGETATION_KEYS.SPIDER_WEBS,
+  "insect_damage": VEGETATION_KEYS.DAMAGE_FROM_INSECTS
+};
+const getVegetationConfig = () => {
+  return [{
+    img: "/Vegetation/healthy.svg",
+    key: VEGETATION_KEYS.HEALTHY,
+    disabled: "/Vegetation/healthy-default.svg"
+  }, {
+    img: "/Vegetation/white.svg",
+    key: VEGETATION_KEYS.WHITE_SPOTS,
+    disabled: "/Vegetation/white-default.svg"
+  }, {
+    img: "/Vegetation/black.svg",
+    key: VEGETATION_KEYS.BLACK_SPOTS,
+    disabled: "/Vegetation/black-default.svg"
+  }, {
+    img: "/Vegetation/reddish.svg",
+    key: VEGETATION_KEYS.REDDISH_SPOTS,
+    disabled: "/Vegetation/reddish-default.svg"
+  }, {
+    img: "/Vegetation/yellowing.svg",
+    key: VEGETATION_KEYS.YELLOWING,
+    disabled: "/Vegetation/yellowing-default.svg"
+  }, {
+    img: "/Vegetation/mosaic.svg",
+    key: VEGETATION_KEYS.MOSAIC,
+    disabled: "/Vegetation/mosaic-default.svg"
+  }, {
+    img: "/Vegetation/dry-or-dead.svg",
+    key: VEGETATION_KEYS.DRY_OR_DEAD,
+    disabled: "/Vegetation/dry-or-dead-default.svg"
+  }, {
+    img: "/Vegetation/no-leaves.svg",
+    key: VEGETATION_KEYS.NO_LEAVES,
+    disabled: "/Vegetation/no-leaves-default.svg"
+  }, {
+    img: "/Vegetation/spider-webs.svg",
+    key: VEGETATION_KEYS.SPIDER_WEBS,
+    disabled: "/Vegetation/spider-webs-default.svg"
+  }, {
+    img: "/Vegetation/damage-from-insects.svg",
+    key: VEGETATION_KEYS.DAMAGE_FROM_INSECTS,
+    disabled: "/Vegetation/damage-from-insects-default.svg"
+  }];
+};
+
+function VegetationWidget({
+  title = "Vegetation Health",
+  activeVegetationConditions = [],
+  filterKeys = null,
+  columnsPerRow = null,
+  itemWidth = 140.33,
+  itemHeight = 140,
+  growthObservations = [],
+  t = key => key,
+  ...props
+}) {
+  let vegetationConfig = getVegetationConfig();
+
+  // Get all VEGETATION_KEYS values before filtering (needed for mapping check)
+  const allVegetationKeys = vegetationConfig.map(item => item.key);
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
+  }
+
+  // Map growthObservations to VEGETATION_KEYS
+  // Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
+  const mappedGrowthObservations = Array.isArray(growthObservations) ? growthObservations.map(obs => {
+    // First try to map from growthObservations format
+    const mapped = GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS[obs];
+    if (mapped) {
+      return mapped;
+    }
+    // If not mapped, check if it's already a VEGETATION_KEY value
+    if (allVegetationKeys.includes(obs)) {
+      return obs;
+    }
+    // Debug: log unmapped observations
+    if (obs) {
+      console.warn(`VegetationWidget: Unmapped growthObservation "${obs}"`);
+    }
+    return null;
+  }).filter(Boolean) : [];
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: title,
+    className: `with-border-header`,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(VegetationWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(VegetationContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: vegetationConfig.map(item => {
+          // Use colored SVG if the item's key exists in growthObservations (mapped)
+          // Otherwise use default SVG
+          // Also check activeVegetationConditions for backward compatibility
+          const isInGrowthObservations = mappedGrowthObservations.includes(item.key);
+          const isInActiveConditions = activeVegetationConditions.includes(item.key);
+
+          // Use colored SVG if it exists in growthObservations OR activeVegetationConditions
+          const shouldUseColored = isInGrowthObservations || isInActiveConditions;
+
+          // Debug logging for yellowing specifically
+          if (item.key === "yellowing") {
+            console.log("Yellowing debug:", {
+              itemKey: item.key,
+              growthObservations,
+              mappedGrowthObservations,
+              isInGrowthObservations,
+              isInActiveConditions,
+              shouldUseColored,
+              img: item.img,
+              disabled: item.disabled
+            });
+          }
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t(`straatos::${item.key}`),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: `vegetation-item`,
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  });
+}
+const VegetationWrapper = styled__default["default"].div`
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+		width: 100%;
+	` : ''}
+`;
+const VegetationContainer = 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;
+	${props => props.$columnsPerRow ? `
+		width: 100%;
+	` : ''}
+
+	.vegetation-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+	
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	.vegetation-item-content {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		color: white;
+		text-align: center;
+	}
+`;
+
 const RepeatableGroup = ({
   name = null,
   config = {},
@@ -40679,6 +40878,9 @@ class VersionService extends BaseService {
 var VersionService$1 = createLazyService(VersionService);
 
 const getSourcesType = subject => {
+  console.log({
+    subject
+  });
   const typeMapping = {
     locations: "location",
     location: "location",
@@ -40692,7 +40894,8 @@ const getSourcesType = subject => {
     events: "event",
     event: "event",
     activities: "event",
-    incidents: "event"
+    incidents: "event",
+    "planting-cycle": "planting-cycle"
   };
   return typeMapping[subject] ?? null;
 };
@@ -41489,7 +41692,7 @@ styled__default["default"](antd.Tabs)`
 });
 
 const {
-  useToken
+  useToken: useToken$1
 } = antd.theme;
 
 /**
@@ -41596,7 +41799,7 @@ function ColumnChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken();
+  } = useToken$1();
   const {
     legendEnabled,
     legendItems,
@@ -41674,7 +41877,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$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$2, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -41689,6 +41892,165 @@ function ColumnChart({
   });
 }
 
+const {
+  useToken
+} = antd.theme;
+
+/**
+ * DonutPie Component
+ *
+ * A reusable and customizable donut (pie) chart built using AntV G2Plot's `Pie` chart.
+ * Designed for displaying part-to-whole relationships, with support for tooltips, statistics, and history.
+ *
+ * Props:
+ * - `data` (Array):
+ *   The dataset to visualize. Each item should include the keys defined by `angleField` and `colorField`.
+ *   Default: `[]`
+ *
+ * - `angleField` (string):
+ *   Key in each data item to be used as the value for the angle.
+ *   Default: `"value"`
+ *
+ * - `colorField` (string):
+ *   Key in each data item to be used for color grouping.
+ *   Default: `"type"`
+ *
+ * - `renderTooltipContent` (function):
+ *   Optional callback to render custom tooltip content. Should return an object for your renderTooltip util.
+ *   If provided, `tooltipConfig` is also merged into the custom tooltip.
+ *
+ * - `tooltipConfig` (object):
+ *   Additional configuration for the tooltip, passed directly to the G2Plot `tooltip` option.
+ *
+ * - `statistic` (object|boolean):
+ *   Statistic configuration for the center label. Set to `false` to hide.
+ *
+ * - `color` (string | string[] | function):
+ *   Custom color or color function for slices. If not provided, falls back to Ant Design's theme primary color.
+ *
+ * - `history` (Array):
+ *   Array of previous datasets to display as small donut pies below the main chart.
+ *   Each item should be an object with at least a `data` array and an optional `label`.
+ *
+ * - `height` (number):
+ *   Height of the main chart.
+ *   Default: `200`
+ *
+ * - `innerRadius` (number):
+ *   Inner radius for the donut effect.
+ *   Default: `0.78`
+ *
+ * - `radius` (number):
+ *   Outer radius for the donut.
+ *   Default: `1`
+ */
+
+function DonutPie({
+  data = [],
+  angleField = "value",
+  colorField = "type",
+  color,
+  height = 200,
+  innerRadius = 0.78,
+  radius = 1,
+  legend = false,
+  label = false,
+  statistic = false,
+  tooltip = true,
+  renderTooltipContent,
+  tooltipConfig = {},
+  meta,
+  animation = false,
+  t = s => s,
+  isPdf = false,
+  legendConfig = {},
+  ...rest
+}) {
+  const containerRef = React.useRef(null);
+  const chartRef = React.useRef(null);
+  const {
+    token
+  } = useToken();
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
+
+  // Memoize processed data for progress mode
+  const processedData = React.useMemo(() => {
+    if (!data || data.length === 0) {
+      return [{
+        type: "No Data",
+        value: 1
+      }];
+    }
+    return data;
+  }, [data]);
+  React.useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const tooltipOption = tooltip && renderTooltipContent ? {
+      customContent: (title, data) => renderTooltip(renderTooltipContent(title, data)),
+      ...tooltipConfig
+    } : tooltip ? tooltipConfig : false;
+    const config = {
+      data: processedData,
+      angleField,
+      colorField,
+      color: color || [token.colorPrimary7, "#E8EDF3"],
+      radius,
+      innerRadius,
+      legend: false,
+      label,
+      statistic,
+      tooltip: tooltipOption,
+      meta,
+      animation,
+      ...rest
+    };
+    if (!chartRef.current) {
+      chartRef.current = new g2plot.Pie(containerRef.current, config);
+      chartRef.current.render();
+    } else {
+      chartRef.current.update(config);
+    }
+  }, [processedData, angleField, colorField, color, radius, innerRadius, legend, label, statistic, tooltip, renderTooltipContent, tooltipConfig, meta, animation, token.colorPrimary7, rest]);
+  React.useEffect(() => {
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    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, {
+        ref: containerRef,
+        style: {
+          height
+        },
+        isPdf: isPdf
+      })
+    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
+    })]
+  });
+}
+
 styled__default["default"].div`
 	.timeline {
 		display: flex;
@@ -41872,7 +42234,7 @@ styled__default["default"].div`
  */
 const renderNumber = (val, doubleDigit = false) => {
   if (typeof val !== 'number') {
-    return '--';
+    return '-';
   }
   const _string = Number(val).toLocaleString('en-us');
   if (doubleDigit) {
@@ -43132,15 +43494,15 @@ const getKeyIndicatorsRowConfig$3 = ({
   })
 }];
 
-const normalizeUrl = url => url?.endsWith(':') ? url.slice(0, -1) : url;
-const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
+const normalizeUrl$1 = url => url?.endsWith(':') ? url.slice(0, -1) : url;
+const extractFromPhotoDoc$1 = (photoDoc, label, docIndex) => {
   const photos = photoDoc?.pictures?.filter(p => p?.url) || (photoDoc?.url ? [photoDoc] : []);
   return photos.map((photo, photoIndex) => ({
-    src: normalizeUrl(photo.url),
+    src: normalizeUrl$1(photo.url),
     alt: photo.name || photo.alt || `${label} - Image ${docIndex + 1}-${photoIndex + 1}`
   }));
 };
-const getActivityImages = activityData => {
+const getActivityImages$1 = activityData => {
   const photoArrays = [{
     data: activityData?.groupPhotos,
     label: 'Group Photo'
@@ -43157,7 +43519,7 @@ const getActivityImages = activityData => {
   return photoArrays.flatMap(({
     data,
     label
-  }) => Array.isArray(data) ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index)) : []);
+  }) => Array.isArray(data) ? data.flatMap((photoDoc, index) => extractFromPhotoDoc$1(photoDoc, label, index)) : []);
 };
 const GENDER_COLORS$1 = ['#016C6E', '#00AEB1'];
 const getGenderDistributionData$1 = activityData => {
@@ -43682,7 +44044,7 @@ class NotificationService extends BaseService {
 }
 createLazyService(NotificationService);
 
-const ActivityImagery = ({
+const ActivityImagery$1 = ({
   activityData,
   loading = false,
   t = s => s
@@ -43691,7 +44053,7 @@ const ActivityImagery = ({
     isCollapsed,
     isNestedSidebarCollapsed
   } = useResizeContext();
-  const images = React.useMemo(() => getActivityImages(activityData), [activityData]);
+  const images = React.useMemo(() => getActivityImages$1(activityData), [activityData]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       maxWidth: "70%",
@@ -43787,7 +44149,7 @@ const RestorationActivitySummary = ({
       title: t("Activity Indicators"),
       className: "small-content"
     }), /*#__PURE__*/jsxRuntime.jsxs("section", {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ActivityImagery, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ActivityImagery$1, {
         activityData: activityData,
         loading: loading,
         t: t
@@ -47745,7 +48107,7 @@ const getKeyIndicatorsRowConfig = ({
 }, {
   label: t('Monitored Area'),
   render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
-    children: data?.totalAreaParcelMonitored ? `${data?.totalAreaParcelMonitored} ha` : '0 ha'
+    children: data?.totalAreaParcelMonitored ? `${renderNumber(data?.totalAreaParcelMonitored)} ha` : '0 ha'
   })
 }];
 const getSiteConditionsConfig = ({
@@ -47776,7 +48138,77 @@ const getSiteConditionsConfig = ({
     children: data?.hasDisturbances ? t('Yes') : t('No')
   })
 }];
+const getEnvironmentalMetricsConfig = ({
+  t,
+  data = {},
+  options
+}) => [{
+  label: t('Soil Type'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: camelCaseToTitle(data?.soilType) || '-'
+  })
+}, {
+  label: t('Soil Salinity'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: data?.soilSalinity ? `${renderNumber(data.soilSalinity)} ${data?.soilSalinityUnit || 'dS/m'}` : '-'
+  })
+}, {
+  label: t('pH Level'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: renderNumber(data?.phLevel) || '-'
+  })
+}, {
+  label: t('Water Quality'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: findOptions(data?.waterQuality, options?.waterQuality) || '-'
+  })
+}];
 
+const normalizeUrl = url => url?.endsWith(':') ? url.slice(0, -1) : url;
+const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
+  const photos = photoDoc?.pictures?.filter(p => p?.url) || (photoDoc?.url ? [photoDoc] : []);
+  return photos.map((photo, photoIndex) => ({
+    src: normalizeUrl(photo.url),
+    alt: photo.name || photo.alt || `${label} - Image ${docIndex + 1}-${photoIndex + 1}`
+  }));
+};
+const getActivityImages = activityData => {
+  const photoArrays = [{
+    data: activityData?.groupPhotos,
+    label: 'Group Photo'
+  }, {
+    data: activityData?.photosStartActivity,
+    label: 'Start of Activity'
+  }, {
+    data: activityData?.photosDuringActivity,
+    label: 'During Activity'
+  }, {
+    data: activityData?.photosEndActivity,
+    label: 'End of Activity'
+  }, {
+    data: activityData?.plotPhotosMonitoring,
+    label: 'Plot Photos Monitoring'
+  }, {
+    data: activityData?.faunaFloraPictures,
+    label: 'Fauna and Flora Photos'
+  }, {
+    data: activityData?.pestPlantPhotos,
+    label: 'Pest Plant Photos'
+  }, {
+    data: activityData?.soilPhotos,
+    label: 'Soil Photos'
+  }, {
+    data: activityData?.otherPictures,
+    label: 'Other Pictures'
+  }, {
+    data: activityData?.damagedPlantPhotos,
+    label: 'Damaged Plant Photos'
+  }];
+  return photoArrays.flatMap(({
+    data,
+    label
+  }) => Array.isArray(data) ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index)) : []);
+};
 const getIndicatorType = value => {
   if (value === "yes" || value === true) return "compliant";
   if (value === "no" || value === false) return "notCompliant";
@@ -48028,50 +48460,79 @@ const ActivityLocation = ({
   });
 };
 
-const PlantedSpecies = ({
+const ActivityImagery = ({
   activityData,
   loading = false,
   t = s => s
 }) => {
-  const speciesConfig = React.useMemo(() => {
-    // Extract planted species from activityData
-    // Assuming the data structure might have plantedSpecies array or similar
-    const species = activityData?.plantedSpecies || activityData?.mangroveSpecies || [];
+  const {
+    isCollapsed,
+    isNestedSidebarCollapsed
+  } = useResizeContext();
+  const images = React.useMemo(() => getActivityImages(activityData), [activityData]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      maxWidth: "50%",
+      width: "calc(100% - 405px)"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(ImageCarousel, {
+      loading: loading,
+      images: images,
+      title: t("straatos::activity-imagery"),
+      customArrows: true,
+      activeDotColor: "#003435",
+      height: 245
+    }, `${isCollapsed}-${isNestedSidebarCollapsed}`)
+  });
+};
 
-    // If species is an array, map it to config format
-    if (Array.isArray(species)) {
-      return species.map((speciesItem, index) => {
-        const speciesName = typeof speciesItem === 'string' ? speciesItem : speciesItem?.name || speciesItem?.species || `Species ${index + 1}`;
+const EnvironmentalMetrics = ({
+  activityData,
+  loading = false,
+  t = s => s,
+  options
+}) => {
+  const environmentalMetricsConfig = React.useMemo(() => getEnvironmentalMetricsConfig({
+    t,
+    data: activityData,
+    options
+  }), [t, activityData]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      flex: 1
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+      loading: loading,
+      config: environmentalMetricsConfig,
+      title: t("straatos::environmental-metrics"),
+      className: "small-content row-content",
+      widgetClassName: "h-w-btn-header"
+    })
+  });
+};
 
-        // Determine if species is selected/planted (you may need to adjust this logic)
-        const isSelected = typeof speciesItem === 'object' ? speciesItem?.selected !== false : true;
+const PlantedSpecies = ({
+  plantedSpecies,
+  mangroveSpecies,
+  loading = false,
+  t = s => s
+}) => {
+  const speciesConfig = React.useMemo(() => {
+    if (Array.isArray(mangroveSpecies) && mangroveSpecies.length > 0) {
+      return mangroveSpecies.map(species => {
+        const isPlanted = species.value === plantedSpecies;
         return {
-          icon: 'Tree',
-          label: speciesName,
-          type: isSelected ? 'compliant' : 'notCompliant',
-          statusIcon: isSelected ? 'Check' : 'Close'
+          label: species.label,
+          type: isPlanted ? 'compliant' : 'notCompliant',
+          statusIcon: isPlanted ? 'Check' : 'Close',
+          statusIconColor: isPlanted ? '#12B76A' : '#6C737F',
+          statusBadgeBackgroundColor: isPlanted ? undefined : '#F9FAFB',
+          statusBadgeBorderColor: isPlanted ? undefined : '#E5E7EB'
         };
       });
     }
-
-    // Fallback: if no species data, show default species from image
-    return [{
-      icon: 'Tree',
-      label: 'Rhyzophora sp',
-      type: 'compliant',
-      statusIcon: 'Check'
-    }, {
-      icon: 'Tree',
-      label: 'Rhyzophora',
-      type: 'notCompliant',
-      statusIcon: 'Close'
-    }, {
-      icon: 'Tree',
-      label: 'Rhyzophora mangle',
-      type: 'notCompliant',
-      statusIcon: 'Close'
-    }];
-  }, [activityData]);
+    return [];
+  }, [plantedSpecies, mangroveSpecies]);
   return /*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
     title: t("Planted Species"),
     config: speciesConfig,
@@ -48083,76 +48544,89 @@ const PlantedSpecies = ({
 };
 
 const SurvivalRate = ({
-  activityData,
+  survivalRate,
   loading = false,
   t = s => s
 }) => {
-  React.useMemo(() => {
-    // Extract survival rate from activityData
-    // Assuming the data might have survivalRate as a percentage (0-100)
-    const survivalRate = activityData?.survivalRate || activityData?.mangroveSurvivalRate || 78;
-    const survivalPercent = typeof survivalRate === 'number' ? survivalRate : parseFloat(survivalRate) || 78;
+  const survivalData = React.useMemo(() => {
+    if (!survivalRate && survivalRate !== 0) {
+      return [];
+    }
     return [{
       type: t("Survival Rate"),
-      value: survivalPercent
+      value: Math.round(survivalRate || 0)
     }, {
       type: t("Non-survival"),
-      value: 100 - survivalPercent
+      value: 100 - Math.round(survivalRate || 0)
     }];
-  }, [activityData, t]);
-  React.useMemo(() => {
+  }, [survivalRate, t]);
+  const renderTooltipContent = React.useMemo(() => {
     return (title, data) => {
-      if (!data || data.length === 0) {
+      if (!survivalData || survivalData.length === 0 || !data || data.length === 0) {
         return {
           title: t("Survival Rate"),
           items: [{
-            label: t("No Data"),
+            label: t("Not answered"),
             value: '-'
           }]
         };
       }
-      const item = data[0];
-      const value = item?.value || item?.data?.value || 0;
-      const itemType = item?.type || item?.data?.type || t("Survival Rate");
-
-      // Determine color based on item type
-      const itemColor = itemType === t("Survival Rate") ? '#00AEB1' : '#E8EDF3';
       return {
         title: t("Survival Rate"),
-        items: [{
-          label: itemType,
-          value: `${value.toFixed(1)}%`,
-          color: itemColor
-        }]
+        items: survivalData.map(item => ({
+          label: item.type,
+          value: item.value + '%',
+          color: item.type === t("Survival Rate") ? '#00AEB1' : '#E8EDF3'
+        }))
       };
     };
-  }, [t]);
-  React.useMemo(() => {
-    return !activityData?.survivalRate && !activityData?.mangroveSurvivalRate;
-  }, [activityData]);
+  }, [survivalData, t]);
+  const isEmpty = React.useMemo(() => {
+    return !survivalRate && survivalRate !== 0;
+  }, [survivalRate]);
+  const chartColors = React.useMemo(() => {
+    if (isEmpty) {
+      return ['#E5E7EB', '#F9FAFB'];
+    }
+    return ['#00AEB1', '#E8EDF3'];
+  }, [isEmpty]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     loading: loading,
     title: t("Survival Rate"),
-    className: "with-border-header h-w-btn-header"
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx(DonutPie, {
+      angleField: "value",
+      color: chartColors,
+      colorField: "type",
+      data: isEmpty ? [] : survivalData,
+      height: 250,
+      innerRadius: 0.78,
+      radius: 1,
+      renderTooltipContent: renderTooltipContent,
+      tooltip: true,
+      tooltipConfig: {
+        showTitle: false
+      }
+    })
   });
 };
 
 const SeedlingsHeight = ({
-  activityData,
+  averageHeight,
+  averageHeightUnit,
   loading = false,
   t = s => s
 }) => {
   const heightData = React.useMemo(() => {
     // Extract seedlings height from activityData
     // Assuming the data might have averageHeight, seedlingsHeight, or similar
-    const averageHeight = activityData?.averageHeight || activityData?.seedlingsHeight || activityData?.mangroveAverageHeight || 28; // Default from image
-
-    const heightValue = typeof averageHeight === 'number' ? averageHeight : parseFloat(averageHeight) || 28;
+    const heightValue = typeof averageHeight === 'number' ? averageHeight : parseFloat(averageHeight) || 0;
     return [{
       label: t("Average Height"),
-      value: heightValue
+      value: heightValue,
+      unit: averageHeightUnit
     }];
-  }, [activityData, t]);
+  }, [averageHeight, averageHeightUnit, t]);
   const renderTooltipContent = React.useMemo(() => {
     return (title, data) => {
       if (!data || data.length === 0) {
@@ -48165,102 +48639,223 @@ const SeedlingsHeight = ({
         };
       }
       const item = data[0];
-      const value = item?.value || item?.data?.value || 0;
+      const rawValue = item?.value || item?.data?.value || 0;
+      const value = Number(rawValue) || 0;
+      const formattedValue = Number(value).toLocaleString('en-us');
       return {
         title: t("Average Height"),
         items: [{
           label: t("Average Height"),
-          value: `${value.toFixed(1)}cm`,
+          value: `${formattedValue} ${averageHeightUnit || 'cm'}`,
           color: '#00AEB1'
         }]
       };
     };
-  }, [t]);
+  }, [t, averageHeightUnit]);
   const isEmpty = React.useMemo(() => {
-    return !activityData?.averageHeight && !activityData?.seedlingsHeight && !activityData?.mangroveAverageHeight;
-  }, [activityData]);
-  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    return !averageHeight && averageHeight !== 0;
+  }, [averageHeight]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Widget, {
     loading: loading,
     title: t("Seedlings Height"),
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '250px',
-        padding: '20px 0'
+    children: [/*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
+      data: isEmpty ? [] : heightData,
+      xFieldKey: "label",
+      yFieldKey: "value",
+      color: "#00AEB1",
+      animated: true,
+      renderTooltipContent: renderTooltipContent,
+      yAxis: {
+        min: 0,
+        max: 35,
+        tickMethod: () => [0, 5, 10, 15, 20, 25, 30, 35],
+        label: {
+          formatter: v => `${v} ${averageHeightUnit || 'cm'}`
+        }
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
-        data: isEmpty ? [] : heightData,
-        xFieldKey: "label",
-        yFieldKey: "value",
-        color: "#00AEB1",
-        height: 250,
-        animated: true,
-        renderTooltipContent: renderTooltipContent,
-        yAxis: {
-          min: 0,
-          max: 35,
-          tickMethod: () => [0, 5, 10, 15, 20, 25, 30, 35],
-          label: {
-            formatter: v => `${v}cm`
-          }
-        },
-        xAxis: {
-          label: {
-            formatter: () => ''
-          }
-        },
-        tooltipConfig: {
-          showTitle: true
+      xAxis: {
+        label: {
+          formatter: () => ''
         }
-      }), !isEmpty && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          marginTop: '16px',
-          textAlign: 'center',
-          fontSize: '14px',
-          color: '#475467',
-          fontWeight: 500
-        },
-        children: [t("Average Height"), ": ", heightData[0]?.value.toFixed(0), "cm"]
-      })]
-    })
+      },
+      tooltipConfig: {
+        showTitle: true
+      }
+    }), !isEmpty && /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        marginTop: '16px',
+        textAlign: 'center',
+        fontSize: '14px',
+        color: '#475467',
+        fontWeight: 500
+      }
+    })]
   });
 };
 
-const Container = styled__default["default"].div`
+const Container$1 = styled__default["default"].div`
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     width: 100%;
+    overflow-x: auto;
+    
+    > * {
+        min-width: 0;
+    }
     
     @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(3, minmax(200px, 1fr));
+    }
+`;
+const VegetationHealthContainer = styled__default["default"].div`
+    display: flex;
+    gap: 24px;
+    width: 100%;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
     }
 `;
+const VegetationHealthSection = styled__default["default"].section`
+    width: 66%;
+`;
 const MangroveGrowthAndSurvival = ({
   activityData,
   loading = false,
-  t = s => s
+  t = s => s,
+  options
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
-    title: t("Mangrove Growth & Survival"),
+    title: t("Mangrove Growth and Survival"),
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx("section", {
-      children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("section", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Container$1, {
         children: [/*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
-          activityData: activityData,
+          plantedSpecies: activityData?.plantedSpecies,
+          mangroveSpecies: options?.mangroveSpecies,
           loading: loading,
           t: t
         }), /*#__PURE__*/jsxRuntime.jsx(SurvivalRate, {
-          activityData: activityData,
+          survivalRate: activityData?.survivalRate,
           loading: loading,
           t: t
         }), /*#__PURE__*/jsxRuntime.jsx(SeedlingsHeight, {
-          activityData: activityData,
+          averageHeight: activityData?.averageHeightValue,
+          averageHeightUnit: activityData?.averageHeightUnit,
           loading: loading,
           t: t
         })]
+      }), /*#__PURE__*/jsxRuntime.jsxs(VegetationHealthContainer, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(VegetationHealthSection, {
+          children: /*#__PURE__*/jsxRuntime.jsx(VegetationWidget, {
+            title: t("Vegetation Health"),
+            vegetationHealthChart: activityData?.growthObservations,
+            growthObservations: activityData?.growthObservations,
+            filterKeys: [VEGETATION_KEYS.HEALTHY, VEGETATION_KEYS.WHITE_SPOTS, VEGETATION_KEYS.BLACK_SPOTS, VEGETATION_KEYS.REDDISH_SPOTS, VEGETATION_KEYS.YELLOWING, VEGETATION_KEYS.MOSAIC, VEGETATION_KEYS.DRY_OR_DEAD, VEGETATION_KEYS.NO_LEAVES],
+            columnsPerRow: 4,
+            itemWidth: 80,
+            itemHeight: 80,
+            activeVegetationConditions: activityData?.vegetationHealthChart?.filter(item => item?.type !== VEGETATION_KEYS.SPIDER_WEBS && item?.type !== VEGETATION_KEYS.DAMAGE_FROM_INSECTS)?.map(item => item?.type) || [],
+            loading: loading,
+            t: t
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(VegetationWidget, {
+          title: t("Vegetation Health"),
+          growthObservations: activityData?.growthObservations,
+          activeVegetationConditions: activityData?.vegetationHealthChart?.filter(item => item?.type === VEGETATION_KEYS.SPIDER_WEBS || item?.type === VEGETATION_KEYS.DAMAGE_FROM_INSECTS)?.map(item => item?.type) || [],
+          filterKeys: [VEGETATION_KEYS.SPIDER_WEBS, VEGETATION_KEYS.DAMAGE_FROM_INSECTS],
+          columnsPerRow: 1,
+          itemWidth: 210,
+          itemHeight: 105,
+          loading: loading,
+          t: t
+        })]
+      })]
+    })
+  });
+};
+
+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%;
+    gap: 24px;
+    width: 100%;
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`;
+const BiodiversityAndHabitat = ({
+  faunaPresent = [],
+  invasiveSpecies = [],
+  hasInvasiveSpecies,
+  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, {
+          title: t("Observed Fauna"),
+          config: observedFaunaConfig,
+          loading: loading,
+          widgetClassName: "h-w-btn-header",
+          t: t
+        }), /*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+          title: t("Invasive Species"),
+          config: invasiveSpeciesConfig,
+          loading: loading,
+          className: "single-column",
+          widgetClassName: "h-w-btn-header",
+          t: t
+        })]
       })
     })
   });
@@ -48275,7 +48870,8 @@ const MonitoringActivitySummary = ({
   breadcrumbs,
   goBackTo,
   loading,
-  t = () => {}
+  t = () => {},
+  options
 }) => {
   const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig({
     t,
@@ -48290,9 +48886,6 @@ const MonitoringActivitySummary = ({
     t,
     data: activityData
   }), [t, activityData]);
-  console.log({
-    activityData
-  });
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
       title: 'Monitoring Activity Summary',
@@ -48320,9 +48913,31 @@ const MonitoringActivitySummary = ({
       title: t("straatos::site-conditions"),
       widgetClassName: "h-w-btn-header"
     }), /*#__PURE__*/jsxRuntime.jsx(MangroveGrowthAndSurvival, {
+      options: options,
       activityData: activityData,
       loading: loading,
       t: t
+    }), /*#__PURE__*/jsxRuntime.jsx(BiodiversityAndHabitat, {
+      faunaPresent: activityData?.faunaPresent,
+      invasiveSpecies: activityData?.invasiveSpecies,
+      hasInvasiveSpecies: activityData?.hasInvasiveSpecies,
+      loading: loading,
+      t: t
+    }), /*#__PURE__*/jsxRuntime.jsxs("section", {
+      style: {
+        display: 'flex',
+        gap: '24px'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(EnvironmentalMetrics, {
+        options: options,
+        activityData: activityData,
+        loading: loading,
+        t: t
+      }), /*#__PURE__*/jsxRuntime.jsx(ActivityImagery, {
+        activityData: activityData,
+        loading: loading,
+        t: t
+      })]
     })]
   });
 };