datastake-daf 0.6.784 → 0.6.785

package/dist/pages/index.js

@@ -36289,7 +36289,7 @@ const getKeyIndicatorConfig = ({
   }
 }];
 
-const KeyInformation$1 = ({
+const KeyInformation$2 = ({
   options = {},
   selectedPartners = {},
   t = () => {},
@@ -38001,7 +38001,7 @@ const OperatorSummary = ({
           size: "small"
         }) : null
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(KeyInformation$1, {
+    }), /*#__PURE__*/jsxRuntime.jsx(KeyInformation$2, {
       options: options,
       selectedPartners: selectedPartners,
       t: t,
@@ -42120,6 +42120,63 @@ const renderNumber = (val, doubleDigit = false) => {
   return _string;
 };
 
+/**
+ * Calculates stat change object for StatCard component based on current and previous values
+ * @param {Object} data - Object with current and previous values
+ * @param {number} data.current - Current value
+ * @param {number} data.previous - Previous value
+ * @param {Object} options - Optional configuration
+ * @param {string} options.tooltipText - Custom tooltip text
+ * @param {string} options.format - Format type: 'percentage' (default) or 'absolute'
+ * @param {number} options.decimalPlaces - Number of decimal places for percentage (default: 1)
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+const calculateStatChange = (data, options = {}) => {
+  if (!data || typeof data !== 'object') {
+    return null;
+  }
+  const {
+    current,
+    previous
+  } = data;
+
+  // Validate that both values are numbers
+  if (typeof current !== 'number' || typeof previous !== 'number') {
+    return null;
+  }
+
+  // If previous is 0, we can't calculate percentage change
+  if (previous === 0) {
+    return null;
+  }
+  const {
+    tooltipText,
+    format = 'percentage',
+    decimalPlaces = 1
+  } = options;
+
+  // Calculate the difference
+  const difference = current - previous;
+  const isPositive = difference >= 0;
+  const direction = isPositive ? 'up' : 'down';
+
+  // Format the value
+  let value;
+  if (format === 'absolute') {
+    // Show absolute difference
+    value = Math.abs(difference).toLocaleString();
+  } else {
+    // Show percentage change
+    const percentageChange = Math.abs(difference) / previous * 100;
+    value = `${percentageChange.toFixed(decimalPlaces)}%`;
+  }
+  return {
+    value,
+    direction,
+    tooltipText: tooltipText || undefined
+  };
+};
+
 styled__default["default"].div`
 	height: 333px;
 	width: calc(100% - 48px);
@@ -43274,7 +43331,7 @@ styled__default["default"].div`
   flex: 1;
 `;
 
-const getKeyIndicatorsRowConfig$1 = ({
+const getKeyIndicatorsRowConfig$2 = ({
   t,
   data = {}
 }) => [{
@@ -43933,7 +43990,7 @@ const RestorationActivitySummary = ({
   loading,
   t = () => {}
 }) => {
-  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$1({
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$2({
     t,
     data: activityData
   }), [t, activityData]);
@@ -44143,63 +44200,6 @@ const PlantingLocations = ({
   });
 };
 
-/**
- * Calculates stat change object for StatCard component based on current and previous values
- * @param {Object} data - Object with current and previous values
- * @param {number} data.current - Current value
- * @param {number} data.previous - Previous value
- * @param {Object} options - Optional configuration
- * @param {string} options.tooltipText - Custom tooltip text
- * @param {string} options.format - Format type: 'percentage' (default) or 'absolute'
- * @param {number} options.decimalPlaces - Number of decimal places for percentage (default: 1)
- * @returns {Object|null} Change object for StatCard or null if data is invalid
- */
-const calculateStatChange = (data, options = {}) => {
-  if (!data || typeof data !== 'object') {
-    return null;
-  }
-  const {
-    current,
-    previous
-  } = data;
-
-  // Validate that both values are numbers
-  if (typeof current !== 'number' || typeof previous !== 'number') {
-    return null;
-  }
-
-  // If previous is 0, we can't calculate percentage change
-  if (previous === 0) {
-    return null;
-  }
-  const {
-    tooltipText,
-    format = 'percentage',
-    decimalPlaces = 1
-  } = options;
-
-  // Calculate the difference
-  const difference = current - previous;
-  const isPositive = difference >= 0;
-  const direction = isPositive ? 'up' : 'down';
-
-  // Format the value
-  let value;
-  if (format === 'absolute') {
-    // Show absolute difference
-    value = Math.abs(difference).toLocaleString();
-  } else {
-    // Show percentage change
-    const percentageChange = Math.abs(difference) / previous * 100;
-    value = `${percentageChange.toFixed(decimalPlaces)}%`;
-  }
-  return {
-    value,
-    direction,
-    tooltipText: tooltipText || undefined
-  };
-};
-
 /**
  * Formats a date based on the time filter
  * @param {dayjs.Dayjs} date - The date to format
@@ -46557,7 +46557,7 @@ const AssociatedInformation = ({
   });
 };
 
-const getKeyIndicatorsRowConfig = ({
+const getKeyIndicatorsRowConfig$1 = ({
   t,
   data = {}
 }) => [{
@@ -46597,7 +46597,7 @@ const getKeyIndicatorsRowConfig = ({
   }
 }];
 
-const KeyInformation = ({
+const KeyInformation$1 = ({
   id,
   t = () => {},
   getSummaryDetail,
@@ -46631,7 +46631,7 @@ const KeyInformation = ({
     config: defaultConfig,
     getData: customGetData
   });
-  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig({
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig$1({
     t,
     data: keyInformationData
   }), [t, keyInformationData]);
@@ -46666,7 +46666,7 @@ const PlantingCycleSummary = ({
       goBackTo: header?.goBackTo,
       loading: header?.loading
     }),
-    children: [/*#__PURE__*/jsxRuntime.jsx(KeyInformation, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(KeyInformation$1, {
       id: id,
       t: t,
       getSummaryDetail: getSummaryDetail,
@@ -46703,6 +46703,786 @@ const PlantingCycleSummary = ({
   });
 };
 
+const getKeyIndicatorsRowConfig = ({
+  t,
+  data = {}
+}) => [{
+  label: t('Region'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.region || '-'
+    });
+  }
+}, {
+  label: t('Associated Plots'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.associatedPlotsCount || '0'
+    });
+  }
+}, {
+  label: t('Implementation Partners'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.partnersCount || '0'
+    });
+  }
+}, {
+  label: t('Total Activities'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.activitiesCount || '0'
+    });
+  }
+}, {
+  label: t('Information Sources'),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.informationSourcesCount || '0'
+    });
+  }
+}];
+
+const KeyInformation = ({
+  id,
+  t = () => {},
+  getSummaryDetail,
+  loading = false
+}) => {
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "events/monitoring-campaign",
+    url: `/summary/${id}/key-information`,
+    stop: !id
+  }), [id]);
+  const customGetData = React.useMemo(() => {
+    if (getSummaryDetail && id) {
+      return ({
+        url,
+        params = {}
+      }) => {
+        const match = url.match(/\/summary\/[^/]+\/(.+)/);
+        if (match) {
+          const [, type] = match;
+          return getSummaryDetail(id, type, params);
+        }
+        throw new Error(`Invalid URL format: ${url}`);
+      };
+    }
+    return undefined;
+  }, [getSummaryDetail, id]);
+  const {
+    loading: keyInformationLoading,
+    data: keyInformationData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+  const keyIndicatorsConfig = React.useMemo(() => getKeyIndicatorsRowConfig({
+    t,
+    data: keyInformationData
+  }), [t, keyInformationData]);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    children: /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+      title: t("Key Information"),
+      config: keyIndicatorsConfig,
+      loading: loading || keyInformationLoading
+    })
+  });
+};
+
+const VISITS_TAB = "visits";
+const GROWTH_AND_SURVIVAL_TAB = "growthAndSurvival";
+const FAUNA_SIGHTINGS_TAB = "faunaSightings";
+const INVASIVE_SPECIES_TAB = "invasiveSpecies";
+const SYMPTOM_HOTSPOTS_TAB = "symptomHotspots";
+const SOIL_TAB = "soil";
+const MonitoringScopeAndFindings = ({
+  id,
+  getSummaryDetail,
+  loading = false,
+  t = s => s
+}) => {
+  const [activeTab, setActiveTab] = React.useState(VISITS_TAB);
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "events/monitoring-campaign",
+    url: `/summary/${id}/monitoring-scope`,
+    stop: !id
+  }), [id]);
+  const customGetData = React.useMemo(() => {
+    if (getSummaryDetail && id) {
+      return ({
+        url,
+        params = {}
+      }) => {
+        const match = url.match(/\/summary\/[^/]+\/(.+)/);
+        if (match) {
+          const [, type] = match;
+          return getSummaryDetail(id, type, {
+            ...params,
+            tab: activeTab
+          });
+        }
+        throw new Error(`Invalid URL format: ${url}`);
+      };
+    }
+    return undefined;
+  }, [getSummaryDetail, id, activeTab]);
+  const {
+    loading: monitoringScopeLoading,
+    data: monitoringScopeData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+  const filtersConfig = React.useMemo(() => {
+    switch (activeTab) {
+      case GROWTH_AND_SURVIVAL_TAB:
+        return [{
+          label: t("Mangrove Survival Rate"),
+          placeholder: t("Select"),
+          key: "mangroveSurvivalRate",
+          type: "slider"
+        }, {
+          label: t("Planting Density"),
+          placeholder: t("Select"),
+          key: "plantingDensity",
+          type: "select"
+        }];
+      case FAUNA_SIGHTINGS_TAB:
+        return [{
+          label: t("Fauna Observed"),
+          placeholder: t("Select"),
+          key: "faunaSightings",
+          type: "select",
+          options: [{
+            label: t("Birds"),
+            value: "birds"
+          }, {
+            label: t("Crabs"),
+            value: "crabs"
+          }, {
+            label: t("Fish"),
+            value: "fish"
+          }, {
+            label: t("Molluscs"),
+            value: "molluscs"
+          }, {
+            label: t("Oysters"),
+            value: "oysters"
+          }]
+        }];
+      case INVASIVE_SPECIES_TAB:
+        return [{
+          label: t("Fauna Observed"),
+          placeholder: t("Select"),
+          key: "invasiveSpecies",
+          type: "select",
+          options: [{
+            label: t("Spiders"),
+            value: "spiders"
+          }, {
+            label: t("Scale insects"),
+            value: "scaleInsects"
+          }, {
+            label: t("Caterpillars"),
+            value: "caterpillars"
+          }, {
+            label: t("Unidentified pests"),
+            value: "unidentifiedPests"
+          }, {
+            label: t("Other"),
+            value: "other"
+          }]
+        }];
+      case SYMPTOM_HOTSPOTS_TAB:
+        return [{
+          label: t("Symptom Hotspots"),
+          placeholder: t("Select"),
+          key: "symptomHotspots",
+          type: "select",
+          options: [{
+            label: t("Reddish spots on leaves"),
+            value: "reddishSpotsOnLeaves"
+          }, {
+            label: t("Black spots on leaves"),
+            value: "blackSpotsOnLeaves"
+          }, {
+            label: t("Yellowing of leaves"),
+            value: "yellowingOfLeaves"
+          }, {
+            label: t("Presence of mosaic"),
+            value: "presenceOfMosaic"
+          }]
+        }];
+      case SOIL_TAB:
+        return [{
+          label: t("Soil"),
+          placeholder: t("Select"),
+          key: "soil",
+          type: "select",
+          options: [{
+            label: t("Sandy"),
+            value: "sandy"
+          }, {
+            label: t("Clay"),
+            value: "clay"
+          }, {
+            label: t("Muddy"),
+            value: "muddy"
+          }, {
+            label: t("Loamy"),
+            value: "loamy"
+          }, {
+            label: t("Mixed"),
+            value: "mixed"
+          }]
+        }];
+      default:
+        return [];
+    }
+  }, [activeTab, t]);
+  const mappedData = React.useMemo(() => {
+    if (!monitoringScopeData || !monitoringScopeData.plots) {
+      return [];
+    }
+    const {
+      plots = [],
+      monitoringActivities = []
+    } = monitoringScopeData;
+    if (activeTab === VISITS_TAB) {
+      return plots.map((plot, index) => {
+        const area = plot?.perimeter ? plot.perimeter.map(coord => Array.isArray(coord) && coord.length >= 2 ? [coord[1], coord[0]] : coord) : null;
+        const validArea = area && Array.isArray(area) && area.length >= 3 ? area : null;
+        const matchingActivity = monitoringActivities?.find(activity => activity.plotId === plot.id || activity.plotId === plot._id);
+        const gps = matchingActivity?.locationCheckArrival ? {
+          latitude: matchingActivity.locationCheckArrival.latitude,
+          longitude: matchingActivity.locationCheckArrival.longitude
+        } : null;
+        return {
+          _id: plot._id || {},
+          area: validArea,
+          color: "#15FFFFB2",
+          datastakeId: plot.datastakeId || `PLOT-${String(index + 1).padStart(9, '0')}`,
+          gps: gps,
+          id: plot.id || plot._id || `plot-${index}`,
+          name: plot.name || t("Plot"),
+          date: matchingActivity?.date,
+          subTitle: matchingActivity?.date ? renderDateFormatted(matchingActivity.date, "DD MMM YY") : plot.name,
+          plotName: plot.name,
+          territoryTitle: plot.name,
+          type: plot.type || 'Operational Plot',
+          lastVisit: matchingActivity?.date,
+          implementer: matchingActivity?.implementer,
+          areaHa: plot.area
+        };
+      });
+    }
+    return plots.map((plot, index) => {
+      const area = plot?.perimeter ? plot.perimeter.map(coord => Array.isArray(coord) && coord.length >= 2 ? [coord[1], coord[0]] : coord) : null;
+      const validArea = area && Array.isArray(area) && area.length >= 3 ? area : null;
+      return {
+        _id: plot._id || {},
+        area: validArea,
+        color: "#15FFFFB2",
+        datastakeId: plot.datastakeId || `PLOT-${String(index + 1).padStart(9, '0')}`,
+        id: plot.id || plot._id || `plot-${index}`,
+        name: plot.name || t("Plot"),
+        plotName: plot.name,
+        territoryTitle: plot.name,
+        type: plot.type || 'Operational Plot'
+      };
+    });
+  }, [monitoringScopeData, activeTab, t]);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
+      title: t("Monitoring Scope & Findings"),
+      className: "v2-widget no-px no-p-body h-w-btn-header with-border-header",
+      style: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      tabsConfig: {
+        tabs: [{
+          label: t("Visits"),
+          value: VISITS_TAB
+        }, {
+          label: t("Growth & Survival"),
+          value: GROWTH_AND_SURVIVAL_TAB
+        }, {
+          label: t("Fauna Sightings"),
+          value: FAUNA_SIGHTINGS_TAB
+        }, {
+          label: t("Invasive Species"),
+          value: INVASIVE_SPECIES_TAB
+        }, {
+          label: t("Symptom Hotspots"),
+          value: SYMPTOM_HOTSPOTS_TAB
+        }, {
+          label: t("Soil"),
+          value: SOIL_TAB
+        }],
+        value: activeTab,
+        onChange: setActiveTab
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Map$1, {
+        data: mappedData,
+        link: false,
+        style: {
+          height: '100%',
+          width: '100%'
+        },
+        maxZoom: 18,
+        isSatellite: true,
+        onClickLink: () => {},
+        onFilterChange: () => {},
+        primaryLink: true,
+        showSider: false,
+        filtersConfig: filtersConfig,
+        renderTooltipForLocation: data => {
+          if (activeTab === VISITS_TAB && data.gps) {
+            const coordinates = data.gps?.latitude && data.gps?.longitude ? convertDMS(data.gps.latitude, data.gps.longitude) : null;
+            if (!coordinates) {
+              return [];
+            }
+            const iconColor = "#016C6E";
+            const tooltipItems = [{
+              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]
+                  })]
+                })]
+              })
+            }];
+            if (data.date) {
+              tooltipItems.push({
+                label: t("Date"),
+                value: renderDateFormatted(data.date, "DD MMM YY")
+              });
+            }
+            if (data.implementer) {
+              tooltipItems.push({
+                label: t("Implementer"),
+                value: data.implementer
+              });
+            }
+            return tooltipItems;
+          }
+          return [];
+        },
+        renderTooltipForTerritory: data => {
+          const items = [{
+            label: t("Plot Name"),
+            value: data.plotName || data.name || "--"
+          }];
+          if (activeTab === VISITS_TAB && data.lastVisit) {
+            items.push({
+              label: t("Last visit"),
+              value: renderDateFormatted(data.lastVisit, "DD MMM YY")
+            });
+          }
+          if (activeTab === VISITS_TAB && data.areaHa) {
+            items.push({
+              label: t("Area"),
+              value: `${data.areaHa} ha`
+            });
+          }
+          return items;
+        },
+        renderTooltipTags: () => {},
+        type: "location-territory",
+        loading: loading || monitoringScopeLoading
+      })
+    })
+  });
+};
+
+const COLORS$1 = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const VegetationHealth = ({
+  vegetationHealthChart,
+  t = s => s
+}) => {
+  const pieData = React.useMemo(() => {
+    const data = vegetationHealthChart || [];
+    const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+    return data.map((item, index) => ({
+      value: Number(item?.value) || 0,
+      percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+      color: COLORS$1[index % COLORS$1.length],
+      label: item?.type || '',
+      key: item?.type || `item-${index}`
+    }));
+  }, [vegetationHealthChart]);
+  const isEmpty = React.useMemo(() => {
+    return !vegetationHealthChart || vegetationHealthChart.length === 0 || vegetationHealthChart.every(item => !item?.value || Number(item.value) === 0);
+  }, [vegetationHealthChart]);
+  const getTooltipChildren = React.useCallback(item => {
+    if (isEmpty) {
+      return null;
+    }
+    return renderTooltipJsx({
+      title: t("Vegetation Health"),
+      items: [{
+        color: item.color,
+        label: item.label || '',
+        value: `${item.value || 0}%`
+      }]
+    });
+  }, [t, isEmpty]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Vegetation Health"),
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(Chart, {
+          data: pieData,
+          isPie: true,
+          isEmpty: isEmpty,
+          getTooltipChildren: getTooltipChildren,
+          mouseXOffset: 10,
+          mouseYOffset: 10,
+          changeOpacityOnHover: false,
+          doConstraints: false
+        })
+      })
+    })
+  });
+};
+
+const SeedlingsHeight = ({
+  seedlingsHeightChart,
+  t = s => s
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Seedlings Height"),
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
+          data: seedlingsHeightChart || [],
+          xFieldKey: "label",
+          yFieldKey: "value",
+          animated: true,
+          height: 200,
+          color: "#016C6E",
+          renderTooltipContent: (title, data) => {
+            if (!data || data.length === 0) return {};
+            const item = data[0]?.data || data[0];
+            return {
+              title: t("Seedlings Height"),
+              subTitle: title,
+              items: [{
+                label: t("Count"),
+                value: item?.value || 0
+              }]
+            };
+          }
+        })
+      })
+    })
+  });
+};
+
+const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const PlantedSpecies = ({
+  plantedSpeciesChart,
+  t = s => s
+}) => {
+  const pieData = React.useMemo(() => {
+    const data = plantedSpeciesChart || [];
+    const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+    return data.map((item, index) => ({
+      value: Number(item?.value) || 0,
+      percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+      color: COLORS[index % COLORS.length],
+      label: item?.type || '',
+      key: item?.type || `item-${index}`
+    }));
+  }, [plantedSpeciesChart]);
+  const isEmpty = React.useMemo(() => {
+    return !plantedSpeciesChart || plantedSpeciesChart.length === 0 || plantedSpeciesChart.every(item => !item?.value || Number(item.value) === 0);
+  }, [plantedSpeciesChart]);
+  const getTooltipChildren = React.useCallback(item => {
+    if (isEmpty) {
+      return null;
+    }
+    return renderTooltipJsx({
+      title: t("Planted Species"),
+      items: [{
+        color: item.color,
+        label: item.label || '',
+        value: item.value || 0
+      }]
+    });
+  }, [t, isEmpty]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Planted Species"),
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(Chart, {
+          data: pieData,
+          isPie: true,
+          isEmpty: isEmpty,
+          getTooltipChildren: getTooltipChildren,
+          mouseXOffset: 10,
+          mouseYOffset: 10,
+          changeOpacityOnHover: false,
+          doConstraints: false
+        })
+      })
+    })
+  });
+};
+
+const Stats = ({
+  survivalRate,
+  averageHeight,
+  averageDiameter,
+  t = s => s
+}) => {
+  const survivalRateChange = React.useMemo(() => {
+    if (!survivalRate) return null;
+    return calculateStatChange({
+      current: Number(survivalRate.current) || 0,
+      previous: Number(survivalRate.previous) || 0
+    }, {
+      tooltipText: t("In comparison to last period"),
+      format: 'absolute'
+    });
+  }, [survivalRate, t]);
+  const averageHeightChange = React.useMemo(() => {
+    if (!averageHeight) return null;
+    return calculateStatChange({
+      current: Number(averageHeight.current) || 0,
+      previous: Number(averageHeight.previous) || 0
+    }, {
+      tooltipText: t("In comparison to last period"),
+      format: 'absolute'
+    });
+  }, [averageHeight, t]);
+  const averageDiameterChange = React.useMemo(() => {
+    if (!averageDiameter) return null;
+    return calculateStatChange({
+      current: Number(averageDiameter.current) || 0,
+      previous: Number(averageDiameter.previous) || 0
+    }, {
+      tooltipText: t("In comparison to last period"),
+      format: 'absolute'
+    });
+  }, [averageDiameter, t]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      display: "flex",
+      gap: "24px",
+      marginBottom: "24px"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("section", {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
+        title: t("Survival Rate"),
+        value: survivalRate ? Number(survivalRate.current).toLocaleString() : "0",
+        icon: "EventCalendar",
+        change: survivalRateChange
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
+        title: t("Average Height"),
+        value: averageHeight ? Number(averageHeight.current).toLocaleString() + " cm" : "0 cm",
+        icon: "ProjectLocation",
+        change: averageHeightChange
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
+        title: t("Average Diameter"),
+        value: averageDiameter ? Number(averageDiameter.current).toLocaleString() + " mm" : "0 mm",
+        icon: "Activity",
+        change: averageDiameterChange
+      })
+    })]
+  });
+};
+
+const MangroveGrowth = ({
+  id,
+  getSummaryDetail,
+  loading = false,
+  t = s => s
+}) => {
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "events/monitoring-campaign",
+    url: `/summary/${id}/outcomes`,
+    stop: !id
+  }), [id]);
+  const customGetData = React.useMemo(() => {
+    if (getSummaryDetail && id) {
+      return ({
+        url,
+        params = {}
+      }) => {
+        const match = url.match(/\/summary\/[^/]+\/(.+)/);
+        if (match) {
+          const [, type] = match;
+          return getSummaryDetail(id, type, params);
+        }
+        throw new Error(`Invalid URL format: ${url}`);
+      };
+    }
+    return undefined;
+  }, [getSummaryDetail, id]);
+  const {
+    loading: outcomesLoading,
+    data: outcomesData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+  const {
+    survivalRate,
+    averageHeight,
+    averageDiameter,
+    vegetationHealthChart,
+    seedlingsHeightChart,
+    plantedSpeciesChart
+  } = outcomesData || {};
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
+      title: t("Mangrove Growth"),
+      loading: loading || outcomesLoading,
+      className: "with-border-header h-w-btn-header",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Stats, {
+        survivalRate: survivalRate,
+        averageHeight: averageHeight,
+        averageDiameter: averageDiameter,
+        t: t
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          gap: "24px"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(VegetationHealth, {
+            vegetationHealthChart: vegetationHealthChart,
+            t: t
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(SeedlingsHeight, {
+            seedlingsHeightChart: seedlingsHeightChart,
+            t: t
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(PlantedSpecies, {
+            plantedSpeciesChart: plantedSpeciesChart,
+            t: t
+          })
+        })]
+      })]
+    })
+  });
+};
+
+const MonitoringCampaignSummary = ({
+  header,
+  activityData,
+  loading = false,
+  id,
+  projectId,
+  t = () => {},
+  getSummaryDetail,
+  navigate,
+  selectOptions
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
+    header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
+      title: header?.title + ' Summary' || '',
+      supportText: header?.supportText || '',
+      onDownload: header?.onDownload,
+      downloadDisabled: header?.downloadDisabled,
+      actionButtons: header?.actionButtons,
+      breadcrumbs: header?.breadcrumbs,
+      goBackTo: header?.goBackTo,
+      loading: header?.loading
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(KeyInformation, {
+      id: id,
+      t: t,
+      getSummaryDetail: getSummaryDetail,
+      loading: loading
+    }), /*#__PURE__*/jsxRuntime.jsx(MonitoringScopeAndFindings, {
+      id: id,
+      t: t,
+      getSummaryDetail: getSummaryDetail,
+      loading: loading
+    }), /*#__PURE__*/jsxRuntime.jsx(MangroveGrowth, {
+      id: id,
+      t: t,
+      getSummaryDetail: getSummaryDetail,
+      loading: loading
+    })]
+  });
+};
+
 const IconNodesConfig = {
   operator: {
     name: "Operators",
@@ -48270,6 +49050,7 @@ exports.EventsTable = EventsTable;
 exports.IncidentsTable = IncidentsTable;
 exports.LocationsTable = LocationsTable;
 exports.MineSummary = MineSummary;
+exports.MonitoringCampaignSummary = MonitoringCampaignSummary;
 exports.OperatorSummary = OperatorSummary;
 exports.OperatorsTable = OperatorsTable;
 exports.PartnersTable = PartnersTable;