datastake-daf 0.6.786 → 0.6.788

package/dist/pages/index.js

@@ -7184,12 +7184,45 @@ const Style$g = styled__default["default"].div`
 				margin-top: 14px;
 			}
 		}
+
+		&.row-item-with-icon {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			h4 {
+				margin-bottom: 0;
+				flex: 0 0 auto;
+			}
+
+			.flex {
+				flex: 0 0 auto;
+				display: flex;
+				align-items: center;
+				font-size: 16px;
+				font-weight: 500;
+				line-height: 38px;
+				letter-spacing: 0;
+				color: var(--base-gray-90);
+				font-family: 'SF UI Display', -apple-system, BlinkMacSystemFont, sans-serif;
+			}
+		}
 	}
 
 	&.small-content {
 		span {
 			font-size: 16px;
 		}
+
+		.row-item-with-icon {
+			.flex {
+				font-size: 16px;
+				line-height: 38px;
+				font-weight: 500;
+				color: var(--base-gray-90);
+			}
+		}
 	}
 
 	.ant-tag {
@@ -7507,6 +7540,50 @@ Widget.propTypes = {
 };
 Widget.displayName = 'Widget';
 
+const LabelWithIcon = ({
+  t,
+  name,
+  icon,
+  iconColor = "#028788",
+  iconWidth = 16,
+  iconHeight = 16
+}) => {
+  // name is expected to be already translated (string) or a translation key
+  // If it's a string that looks like a translation key (contains '::'), translate it
+  // Otherwise, use it as-is (already translated)
+  const displayText = typeof name === 'string' && name.includes('::') && t && typeof t === 'function' ? t(name) : name;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center",
+    style: {
+      gap: 8
+    },
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      name: icon,
+      color: iconColor,
+      width: iconWidth,
+      height: iconHeight
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '26px',
+        letterSpacing: '0%',
+        color: 'var(--base-gray-70)',
+        fontFamily: 'SF UI Display, -apple-system, BlinkMacSystemFont, sans-serif'
+      },
+      children: displayText
+    })]
+  });
+};
+LabelWithIcon.propTypes = {
+  t: PropTypes__default["default"].func,
+  name: PropTypes__default["default"].string.isRequired,
+  icon: PropTypes__default["default"].string,
+  iconColor: PropTypes__default["default"].string,
+  iconWidth: PropTypes__default["default"].number,
+  iconHeight: PropTypes__default["default"].number
+};
+
 function KeyIndicatorsWidget({
   t = s => s,
   className,
@@ -7527,10 +7604,12 @@ function KeyIndicatorsWidget({
     children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$g, {
       className: formatClassname(["flex", className]),
       children: config.map((c, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "row-item",
+        className: `row-item ${c.icon ? 'row-item-with-icon' : ''}`,
         children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, {
           label: c.label,
-          withTooltip: withTooltip
+          icon: c.icon,
+          withTooltip: withTooltip,
+          t: t
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex",
           children: c.render()
@@ -7547,8 +7626,29 @@ function KeyIndicatorsWidget({
 }
 function Label$1({
   label,
-  withTooltip
+  icon,
+  withTooltip,
+  t
 }) {
+  if (icon) {
+    const labelContent = /*#__PURE__*/jsxRuntime.jsx(LabelWithIcon, {
+      t: t,
+      name: label,
+      icon: icon
+    });
+    if (withTooltip) {
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+        title: label,
+        placement: "topLeft",
+        children: /*#__PURE__*/jsxRuntime.jsx("h4", {
+          children: labelContent
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("h4", {
+      children: labelContent
+    });
+  }
   if (withTooltip) {
     return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: label,
@@ -12172,7 +12272,7 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
   hardcodedData: PropTypes__default["default"].array
 });
 
-const Container = 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)'}; 
 `;
@@ -12446,7 +12546,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, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -14360,7 +14460,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, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -36498,7 +36598,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, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         isPdf: isPdf
       })
@@ -38624,6 +38724,40 @@ const Style$1 = styled__default["default"].div`
 			}
 		}
 	}
+
+	&.single-column {
+		grid-template-columns: 1fr;
+
+		.indicator-item {
+			/* Remove the 2-column specific separators first */
+			&:nth-child(1),
+			&:nth-child(2),
+			&:nth-child(3),
+			&:nth-child(4) {
+				&::after {
+					display: none !important;
+				}
+			}
+
+			/* On single column, all items except last get separator */
+			&:not(:last-child) {
+				&::after {
+					content: '' !important;
+					position: absolute;
+					bottom: 0;
+					left: var(--size-lg);
+					right: var(--size-lg);
+					height: 1px;
+					background-color: var(--border-color, #E5E7EB);
+					display: block !important;
+				}
+			}
+			
+			&:last-child::after {
+				display: none !important;
+			}
+		}
+	}
 `;
 const NoMinWidth = styled__default["default"].div`
 	.indicator-item {
@@ -41919,7 +42053,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, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
         isPdf: isPdf,
@@ -43339,7 +43473,7 @@ styled__default["default"].div`
   flex: 1;
 `;
 
-const getKeyIndicatorsRowConfig$2 = ({
+const getKeyIndicatorsRowConfig$3 = ({
   t,
   data = {}
 }) => [{
@@ -43449,40 +43583,40 @@ const getGenderTooltipChildren$1 = (item, isEmpty, genderDistributionData, t, re
     }]
   });
 };
-const getIndicatorType$1 = value => {
+const getIndicatorType$2 = value => {
   if (value === "yes" || value === true) return "compliant";
   if (value === "no" || value === false) return "notCompliant";
   if (value === null || value === undefined) return "empty";
   return "empty"; // default fallback
 };
-const getActivityIndicatorsConfig = (activityData, t) => {
+const getActivityIndicatorsConfig$1 = (activityData, t) => {
   return [{
     icon: "Aid",
     label: t("Aid kit availability"),
-    type: getIndicatorType$1(activityData?.aidKitAccessible)
+    type: getIndicatorType$2(activityData?.aidKitAccessible)
   }, {
     icon: "MineOperators",
     label: t("H&S training delivery"),
-    type: getIndicatorType$1(activityData?.hsTrainingConfirmation)
+    type: getIndicatorType$2(activityData?.hsTrainingConfirmation)
   }, {
     icon: "Users",
     label: t("Workers safe pairing"),
-    type: getIndicatorType$1(activityData?.duosFormed)
+    type: getIndicatorType$2(activityData?.duosFormed)
   }, {
     icon: "Bear",
     label: t("No children"),
-    type: getIndicatorType$1(activityData?.presenceOfChildren)
+    type: getIndicatorType$2(activityData?.presenceOfChildren)
   }, {
     icon: "Security",
     label: t("Security presence"),
-    type: getIndicatorType$1(activityData?.focalPointPresent)
+    type: getIndicatorType$2(activityData?.focalPointPresent)
   }, {
     icon: "UserCircle",
     label: t("Relay presence"),
-    type: getIndicatorType$1(activityData?.relayPresent)
+    type: getIndicatorType$2(activityData?.relayPresent)
   }];
 };
-const getMapDataFromActivity = (activityData, t) => {
+const getMapDataFromActivity$1 = (activityData, t) => {
   const location = activityData?.location;
   const perimeter = location?.perimeter;
   const area = Array.isArray(perimeter) && perimeter.length > 0 ? perimeter.filter(coord => Array.isArray(coord) && coord.length >= 2).map(coord => {
@@ -43598,12 +43732,12 @@ const getMapDataFromActivity = (activityData, t) => {
   return mapData;
 };
 
-const ActivityLocation = ({
+const ActivityLocation$1 = ({
   activityData,
   loading = false,
   t = s => s
 }) => {
-  const mapData = React.useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
+  const mapData = React.useMemo(() => getMapDataFromActivity$1(activityData, t), [activityData, t]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
       title: t("Activity Location"),
@@ -43998,13 +44132,13 @@ const RestorationActivitySummary = ({
   loading,
   t = () => {}
 }) => {
-  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$2({
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$3({
     t,
     data: activityData
   }), [t, activityData]);
 
   // Activity Indicators Config - mapped from activityData
-  const activityIndicatorsConfig = React.useMemo(() => getActivityIndicatorsConfig(activityData, t), [activityData, t]);
+  const activityIndicatorsConfig = React.useMemo(() => getActivityIndicatorsConfig$1(activityData, t), [activityData, t]);
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
       title: 'Restoration Activity Summary',
@@ -44022,7 +44156,7 @@ const RestorationActivitySummary = ({
         config: keyIndicatorsConfig,
         loading: loading
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(ActivityLocation, {
+    }), /*#__PURE__*/jsxRuntime.jsx(ActivityLocation$1, {
       activityData: activityData,
       loading: loading,
       t: t
@@ -44979,7 +45113,7 @@ const HEALTH_SAFETY_COLORS = {
   notCompliant: '#F97066',
   empty: '#D9D9D9'
 };
-const getIndicatorType = value => {
+const getIndicatorType$1 = value => {
   if (value === "yes" || value === true) return "compliant";
   if (value === "no" || value === false) return "notCompliant";
   if (value === null || value === undefined) return "empty";
@@ -45021,7 +45155,7 @@ const getHealthAndSafetyDistributionData = activityData => {
     field
   }) => {
     const value = activityData?.[field];
-    const type = getIndicatorType(value);
+    const type = getIndicatorType$1(value);
     distribution[type] = (distribution[type] || 0) + 1;
   });
   return distribution;
@@ -46565,7 +46699,7 @@ const AssociatedInformation = ({
   });
 };
 
-const getKeyIndicatorsRowConfig$1 = ({
+const getKeyIndicatorsRowConfig$2 = ({
   t,
   data = {}
 }) => [{
@@ -46639,7 +46773,7 @@ const KeyInformation$1 = ({
     config: defaultConfig,
     getData: customGetData
   });
-  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$1({
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$2({
     t,
     data: keyInformationData
   }), [t, keyInformationData]);
@@ -46711,7 +46845,7 @@ const PlantingCycleSummary = ({
   });
 };
 
-const getKeyIndicatorsRowConfig = ({
+const getKeyIndicatorsRowConfig$1 = ({
   t,
   data = {}
 }) => [{
@@ -46785,7 +46919,7 @@ const KeyInformation = ({
     config: defaultConfig,
     getData: customGetData
   });
-  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig({
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$1({
     t,
     data: keyInformationData
   }), [t, keyInformationData]);
@@ -47197,7 +47331,7 @@ const VegetationHealth = ({
   });
 };
 
-const SeedlingsHeight = ({
+const SeedlingsHeight$1 = ({
   seedlingsHeightChart,
   t = s => s
 }) => {
@@ -47234,7 +47368,7 @@ const SeedlingsHeight = ({
 };
 
 const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
-const PlantedSpecies = ({
+const PlantedSpecies$1 = ({
   plantedSpeciesChart,
   t = s => s
 }) => {
@@ -47432,7 +47566,7 @@ const MangroveGrowth = ({
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(SeedlingsHeight, {
+          children: /*#__PURE__*/jsxRuntime.jsx(SeedlingsHeight$1, {
             seedlingsHeightChart: seedlingsHeightChart,
             t: t
           })
@@ -47440,7 +47574,7 @@ const MangroveGrowth = ({
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
+          children: /*#__PURE__*/jsxRuntime.jsx(PlantedSpecies$1, {
             plantedSpeciesChart: plantedSpeciesChart,
             t: t
           })
@@ -47966,6 +48100,612 @@ const MineSummary = ({
   });
 };
 
+const getKeyIndicatorsRowConfig = ({
+  t,
+  data = {}
+}) => [{
+  label: t('Primary Data Collection'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex",
+      children: '-'
+    });
+  }
+}, {
+  label: t('Monitoring Organization'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: data?.technicalPartner?.name || '-'
+  })
+}, {
+  label: t('Team Members'),
+  render: () => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [" ", data?.teamMembers?.length || '0']
+  })
+}, {
+  label: t('Monitored Area'),
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: data?.totalAreaParcelMonitored ? `${data?.totalAreaParcelMonitored} ha` : '0 ha'
+  })
+}];
+const getSiteConditionsConfig = ({
+  t,
+  data = {}
+}) => [{
+  label: t('Season'),
+  icon: 'Tree',
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: camelCaseToTitle(data?.season) || '-'
+  })
+}, {
+  label: t('Weather conditions'),
+  icon: 'Globe',
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: camelCaseToTitle(data?.weatherConditions) || '-'
+  })
+}, {
+  label: t('Tide level'),
+  icon: 'WaterDrop',
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: camelCaseToTitle(data?.tideLevel) || '-'
+  })
+}, {
+  label: t('Disturbances'),
+  icon: 'Lightning',
+  render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: data?.hasDisturbances ? t('Yes') : t('No')
+  })
+}];
+
+const getIndicatorType = value => {
+  if (value === "yes" || value === true) return "compliant";
+  if (value === "no" || value === false) return "notCompliant";
+  if (value === null || value === undefined) return "empty";
+  return "empty"; // default fallback
+};
+const getActivityIndicatorsConfig = (activityData, t) => {
+  return [{
+    icon: "Aid",
+    label: t("Aid kit availability"),
+    type: getIndicatorType(activityData?.aidKitAccessible)
+  }, {
+    icon: "MineOperators",
+    label: t("H&S training delivery"),
+    type: getIndicatorType(activityData?.hsTrainingConfirmation)
+  }, {
+    icon: "Users",
+    label: t("Workers safe pairing"),
+    type: getIndicatorType(activityData?.duosFormed)
+  }, {
+    icon: "Bear",
+    label: t("No children"),
+    type: getIndicatorType(activityData?.presenceOfChildren)
+  }, {
+    icon: "Security",
+    label: t("Security presence"),
+    type: getIndicatorType(activityData?.focalPointPresent)
+  }, {
+    icon: "UserCircle",
+    label: t("Relay presence"),
+    type: getIndicatorType(activityData?.relayPresent)
+  }];
+};
+const getMapDataFromActivity = (activityData, t) => {
+  const location = activityData?.location;
+  const perimeter = location?.perimeter;
+  const area = Array.isArray(perimeter) && perimeter.length > 0 ? perimeter.filter(coord => Array.isArray(coord) && coord.length >= 2).map(coord => {
+    const first = typeof coord[0] === 'number' ? coord[0] : parseFloat(coord[0]);
+    const second = typeof coord[1] === 'number' ? coord[1] : parseFloat(coord[1]);
+    if (isNaN(first) || isNaN(second) || !isFinite(first) || !isFinite(second)) {
+      return null;
+    }
+
+    // Try both formats and use Leaflet to validate
+    // First try as [lat, lng]
+    try {
+      const latLng1 = L__default["default"].latLng(first, second);
+      if (latLng1.lat >= -90 && latLng1.lat <= 90 && latLng1.lng >= -180 && latLng1.lng <= 180) {
+        return [latLng1.lat, latLng1.lng];
+      }
+    } catch (e) {
+      // Not valid as [lat, lng], try swapping
+    }
+
+    // Try as [lng, lat] (GeoJSON format) - swap them
+    try {
+      const latLng2 = L__default["default"].latLng(second, first);
+      if (latLng2.lat >= -90 && latLng2.lat <= 90 && latLng2.lng >= -180 && latLng2.lng <= 180) {
+        return [latLng2.lat, latLng2.lng];
+      }
+    } catch (e) {
+      // Invalid coordinates
+    }
+    return null;
+  }).filter(coord => coord !== null) : null;
+
+  // Don't return early - we need to check for markers even if there's no perimeter
+
+  const mapData = [];
+  const baseColor = '#15FFFFB2';
+  const locationName = location?.name || activityData?.name || t("Activity Location");
+  const datastakeId = location?.datastakeId || activityData?.datastakeId;
+
+  // Helper to validate coordinates
+  const isValidCoordinate = coord => {
+    const num = typeof coord === 'number' ? coord : parseFloat(coord);
+    return !isNaN(num) && isFinite(num);
+  };
+
+  // Entry 1: Perimeter polygon (independent - show if it exists)
+  if (area && area.length >= 3) {
+    mapData.push({
+      _id: {},
+      id: `${activityData?.id || activityData?.datastakeId || 'perimeter'}-perimeter`,
+      area: area,
+      color: baseColor,
+      // No gps property - this will display only the polygon without markers
+      name: locationName,
+      plotName: locationName,
+      territoryTitle: t("Associated Plot"),
+      subTitle: t("Activity Location"),
+      type: t("Activity Location"),
+      datastakeId: datastakeId,
+      sources: null,
+      link: null
+    });
+  }
+
+  // Entry 2: Arrival marker (independent - show if it exists)
+  const arrivalLat = activityData?.locationCheckArrival?.latitude;
+  const arrivalLng = activityData?.locationCheckArrival?.longitude;
+  if (isValidCoordinate(arrivalLat) && isValidCoordinate(arrivalLng)) {
+    mapData.push({
+      _id: {},
+      id: `${activityData?.id || activityData?.datastakeId || 'arrival'}-arrival`,
+      // Include area if it exists, so marker can show on top of polygon
+      area: area && area.length >= 3 ? area : null,
+      color: baseColor,
+      gps: {
+        latitude: typeof arrivalLat === 'number' ? arrivalLat : parseFloat(arrivalLat),
+        longitude: typeof arrivalLng === 'number' ? arrivalLng : parseFloat(arrivalLng)
+      },
+      name: t("Activity Start"),
+      plotName: locationName,
+      territoryTitle: t("Associated Plot"),
+      datastakeId: `${datastakeId}-arrival`,
+      sources: null,
+      link: null
+    });
+  }
+
+  // Entry 3: Departure marker (independent - show if it exists)
+  const departureLat = activityData?.locationCheckDeparture?.latitude;
+  const departureLng = activityData?.locationCheckDeparture?.longitude;
+  if (isValidCoordinate(departureLat) && isValidCoordinate(departureLng)) {
+    mapData.push({
+      _id: {},
+      id: `${activityData?.id || activityData?.datastakeId || 'departure'}-departure`,
+      // Include area if it exists, so marker can show on top of polygon
+      area: area && area.length >= 3 ? area : null,
+      color: baseColor,
+      gps: {
+        latitude: typeof departureLat === 'number' ? departureLat : parseFloat(departureLat),
+        longitude: typeof departureLng === 'number' ? departureLng : parseFloat(departureLng)
+      },
+      name: t("Activity End"),
+      plotName: locationName,
+      territoryTitle: t("Associated Plot"),
+      datastakeId: `${datastakeId}-departure`,
+      markerColor: "#FF7A45",
+      sources: null,
+      link: null
+    });
+  }
+
+  // Return mapData even if empty - let the map component handle empty arrays
+  return mapData;
+};
+
+const ActivityLocation = ({
+  activityData,
+  loading = false,
+  t = s => s
+}) => {
+  const mapData = React.useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
+      title: t("Activity Location"),
+      className: "no-px h-w-btn-header no-pt-body  no-p-body no-pb-body",
+      style: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Map$1, {
+          loading: loading,
+          t: t,
+          isSatellite: true,
+          app: "straatos",
+          type: 'location-territory',
+          showSider: false,
+          user: null,
+          data: mapData,
+          maxZoom: 18,
+          primaryLink: true,
+          style: {
+            height: '100%',
+            width: '100%'
+          },
+          renderTooltipForLocation: data => {
+            const coordinates = data.gps?.latitude && data.gps?.longitude ? convertDMS(data.gps.latitude, data.gps.longitude) : null;
+            if (!coordinates) {
+              return [];
+            }
+            const isActivityEnd = data.name === t("Activity End") || data.id?.includes('-departure');
+            const iconColor = isActivityEnd ? "#FF7A45" : "#016C6E";
+            return [{
+              label: t("Coordinates"),
+              value: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  flexWrap: 'nowrap'
+                },
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                  },
+                  children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                    name: "SpacingHeight",
+                    width: 14,
+                    height: 14,
+                    color: iconColor
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    style: {
+                      fontWeight: 600,
+                      marginLeft: '4px'
+                    },
+                    children: coordinates[0]
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                  },
+                  children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                    name: "SpacingWidth",
+                    width: 14,
+                    height: 14,
+                    color: iconColor
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    style: {
+                      fontWeight: 600,
+                      marginLeft: '4px'
+                    },
+                    children: coordinates[1]
+                  })]
+                })]
+              })
+            }];
+          },
+          renderTooltipForTerritory: data => {
+            return [{
+              label: t("Plot Name"),
+              value: data.plotName || data.name || "--"
+            }];
+          },
+          link: true
+        })
+      })
+    })
+  });
+};
+
+const PlantedSpecies = ({
+  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 || [];
+
+    // 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}`;
+
+        // Determine if species is selected/planted (you may need to adjust this logic)
+        const isSelected = typeof speciesItem === 'object' ? speciesItem?.selected !== false : true;
+        return {
+          icon: 'Tree',
+          label: speciesName,
+          type: isSelected ? 'compliant' : 'notCompliant',
+          statusIcon: isSelected ? 'Check' : 'Close'
+        };
+      });
+    }
+
+    // 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 /*#__PURE__*/jsxRuntime.jsx(ActivityIndicatorsWidget, {
+    title: t("Planted Species"),
+    config: speciesConfig,
+    loading: loading,
+    widgetClassName: "h-w-btn-header",
+    t: t,
+    className: "single-column"
+  });
+};
+
+const SurvivalRate = ({
+  activityData,
+  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;
+    return [{
+      type: t("Survival Rate"),
+      value: survivalPercent
+    }, {
+      type: t("Non-survival"),
+      value: 100 - survivalPercent
+    }];
+  }, [activityData, t]);
+  React.useMemo(() => {
+    return (title, data) => {
+      if (!data || data.length === 0) {
+        return {
+          title: t("Survival Rate"),
+          items: [{
+            label: t("No Data"),
+            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
+        }]
+      };
+    };
+  }, [t]);
+  React.useMemo(() => {
+    return !activityData?.survivalRate && !activityData?.mangroveSurvivalRate;
+  }, [activityData]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    loading: loading,
+    title: t("Survival Rate"),
+    className: "with-border-header h-w-btn-header"
+  });
+};
+
+const SeedlingsHeight = ({
+  activityData,
+  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;
+    return [{
+      label: t("Average Height"),
+      value: heightValue
+    }];
+  }, [activityData, t]);
+  const renderTooltipContent = React.useMemo(() => {
+    return (title, data) => {
+      if (!data || data.length === 0) {
+        return {
+          title: t("Average Height"),
+          items: [{
+            label: t("No Data"),
+            value: '-'
+          }]
+        };
+      }
+      const item = data[0];
+      const value = item?.value || item?.data?.value || 0;
+      return {
+        title: t("Average Height"),
+        items: [{
+          label: t("Average Height"),
+          value: `${value.toFixed(1)}cm`,
+          color: '#00AEB1'
+        }]
+      };
+    };
+  }, [t]);
+  const isEmpty = React.useMemo(() => {
+    return !activityData?.averageHeight && !activityData?.seedlingsHeight && !activityData?.mangroveAverageHeight;
+  }, [activityData]);
+  return /*#__PURE__*/jsxRuntime.jsx(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",
+        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
+        }
+      }), !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"]
+      })]
+    })
+  });
+};
+
+const Container = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 24px;
+    width: 100%;
+    
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`;
+const MangroveGrowthAndSurvival = ({
+  activityData,
+  loading = false,
+  t = s => s
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Mangrove Growth & Survival"),
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
+          activityData: activityData,
+          loading: loading,
+          t: t
+        }), /*#__PURE__*/jsxRuntime.jsx(SurvivalRate, {
+          activityData: activityData,
+          loading: loading,
+          t: t
+        }), /*#__PURE__*/jsxRuntime.jsx(SeedlingsHeight, {
+          activityData: activityData,
+          loading: loading,
+          t: t
+        })]
+      })
+    })
+  });
+};
+
+const MonitoringActivitySummary = ({
+  activityData,
+  supportText,
+  onDownload,
+  downloadDisabled,
+  actionButtons,
+  breadcrumbs,
+  goBackTo,
+  loading,
+  t = () => {}
+}) => {
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig({
+    t,
+    data: activityData
+  }), [t, activityData]);
+
+  // Activity Indicators Config - mapped from activityData
+  React.useMemo(() => getActivityIndicatorsConfig(activityData, t), [activityData, t]);
+
+  // Site Conditions Config
+  const siteConditionsConfig = React.useMemo(() => getSiteConditionsConfig({
+    t,
+    data: activityData
+  }), [t, activityData]);
+  console.log({
+    activityData
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
+    header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
+      title: 'Monitoring Activity Summary',
+      supportText: supportText || '',
+      onDownload: onDownload,
+      downloadDisabled: downloadDisabled,
+      actionButtons: actionButtons,
+      breadcrumbs: breadcrumbs,
+      goBackTo: goBackTo,
+      loading: loading
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+        title: t("Key Information"),
+        config: keyIndicatorsConfig,
+        loading: loading
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(ActivityLocation, {
+      activityData: activityData,
+      loading: loading,
+      t: t
+    }), /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+      loading: loading,
+      config: siteConditionsConfig,
+      title: t("straatos::site-conditions"),
+      widgetClassName: "h-w-btn-header"
+    }), /*#__PURE__*/jsxRuntime.jsx(MangroveGrowthAndSurvival, {
+      activityData: activityData,
+      loading: loading,
+      t: t
+    })]
+  });
+};
+
 const useViewUrlParams = ({
   params,
   push,
@@ -49058,6 +49798,7 @@ exports.EventsTable = EventsTable;
 exports.IncidentsTable = IncidentsTable;
 exports.LocationsTable = LocationsTable;
 exports.MineSummary = MineSummary;
+exports.MonitoringActivitySummary = MonitoringActivitySummary;
 exports.MonitoringCampaignSummary = MonitoringCampaignSummary;
 exports.OperatorSummary = OperatorSummary;
 exports.OperatorsTable = OperatorsTable;