datastake-daf 0.6.784 → 0.6.785

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/VegetationHealth.jsx

@@ -0,0 +1,73 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../src/index.js';
+import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
+
+const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+
+const VegetationHealth = ({
+    vegetationHealthChart,
+    t = (s) => s
+}) => {
+    const pieData = 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[index % COLORS.length],
+            label: item?.type || '',
+            key: item?.type || `item-${index}`,
+        }));
+    }, [vegetationHealthChart]);
+
+    const isEmpty = useMemo(() => {
+        return !vegetationHealthChart || vegetationHealthChart.length === 0 || 
+               vegetationHealthChart.every(item => !item?.value || Number(item.value) === 0);
+    }, [vegetationHealthChart]);
+
+    const getTooltipChildren = 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 (
+        <Widget
+            title={t("Vegetation Health")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default VegetationHealth;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/index.jsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import VegetationHealth from './VegetationHealth.jsx';
+import SeedlingsHeight from './SeedlingsHeight.jsx';
+import PlantedSpecies from './PlantedSpecies.jsx';
+import Stats from './Stats.jsx';
+
+const MangroveGrowth = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign",
+            url: `/summary/${id}/outcomes`,
+            stop: !id,
+        }),
+        [id],
+    );
+
+    const customGetData = 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 (
+        <section>
+            <Widget
+                title={t("Mangrove Growth")}
+                loading={loading || outcomesLoading}
+                className="with-border-header h-w-btn-header"
+            >
+                <Stats
+                    survivalRate={survivalRate}
+                    averageHeight={averageHeight}
+                    averageDiameter={averageDiameter}
+                    t={t}
+                />
+
+                <div style={{ display: "flex", gap: "24px" }}>
+                    <section style={{ flex: 1 }}>
+                        <VegetationHealth
+                            vegetationHealthChart={vegetationHealthChart}
+                            t={t}
+                        />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <SeedlingsHeight
+                            seedlingsHeightChart={seedlingsHeightChart}
+                            t={t}
+                        />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <PlantedSpecies
+                            plantedSpeciesChart={plantedSpeciesChart}
+                            t={t}
+                        />
+                    </section>
+                </div>
+            </Widget>
+        </section>
+    );
+};
+
+export default MangroveGrowth;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MonitoringScopeAndFindings/index.jsx

@@ -0,0 +1,348 @@
+import React, { useMemo, useState } from 'react';
+import { Widget, MineSiteMap } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { convertDMS } from '../../../../../../../../src/helpers/Map';
+import CustomIcon from '../../../../../../../../src/@daf/core/components/Icon/CustomIcon.jsx';
+import { renderDateFormatted } from '../../../../../../../../src/helpers/Forms';
+
+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] = useState(VISITS_TAB);
+
+  const defaultConfig = useMemo(
+    () => ({
+      basepath: "events/monitoring-campaign",
+      url: `/summary/${id}/monitoring-scope`,
+      stop: !id,
+    }),
+    [id],
+  );
+
+  const customGetData = 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 = 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 = 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 (
+    <section>
+      <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,
+        }}
+      >
+        <MineSiteMap
+          data={mappedData}
+          link={false}
+          style={{ height: '100%', width: '100%' }}
+          maxZoom={18}
+          isSatellite={true}
+          onClickLink={() => { }}
+          onFilterChange={() => { }}
+          primaryLink
+          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: (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'nowrap' }}>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <CustomIcon
+                          name="SpacingHeight"
+                          width={14}
+                          height={14}
+                          color={iconColor}
+                        />
+                        <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[0]}</span>
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <CustomIcon
+                          name="SpacingWidth"
+                          width={14}
+                          height={14}
+                          color={iconColor}
+                        />
+                        <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[1]}</span>
+                      </div>
+                    </div>
+                  ),
+                },
+              ];
+
+              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}
+        />
+      </Widget>
+    </section>
+  );
+};
+
+export default MonitoringScopeAndFindings;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/config.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const getKeyIndicatorsRowConfig = ({ t, data = {} }) => [
+  {
+    label: t('Region'),
+    render: () => {
+      return <div>{ data?.region || '-'}</div>;
+    }
+  },
+  {
+    label: t('Associated Plots'),
+    render: () => {
+      return <div>{data?.associatedPlotsCount || '0'}</div>
+    }
+  },
+  {
+    label: t('Implementation Partners'),
+    render: () => {
+      return <div>{data?.partnersCount || '0'}</div>
+    }
+  },
+  {
+    label: t('Total Activities'),
+    render: () => {
+      return <div>{data?.activitiesCount || '0'}</div>
+    }
+  },
+  {
+    label: t('Information Sources'),
+    render: () => {
+      return <div>{data?.informationSourcesCount || '0'}</div>
+    }
+  },
+];
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/index.jsx

@@ -0,0 +1,30 @@
+import { DashboardLayout, Header } from '../../../../../../src/index.js'
+import KeyInformation from './components/KeyInformation/index.jsx';
+import MonitoringScopeAndFindings from './components/MonitoringScopeAndFindings/index.jsx';
+import MangroveGrowth from './components/MangroveGrowth/index.jsx';
+
+const MonitoringCampaignSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate, selectOptions }) => {
+    return (
+        <DashboardLayout
+            header={
+                <Header
+                    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}
+                />
+            }
+        >
+            <KeyInformation id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
+            <MonitoringScopeAndFindings id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
+            <MangroveGrowth id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
+        </DashboardLayout>
+    )
+}
+
+export default MonitoringCampaignSummary;
+

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/CommunityStats/helper.js

@@ -1,4 +1,4 @@
-import { calculateStatChange } from '../../../helper.js';
+import { calculateStatChange } from '../../../../../../../utils/numbers.js';
 
 /**
  * Calculates the change for day jobs stat

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleIndicators/index.jsx

@@ -3,7 +3,7 @@ import { Widget, StatCard } from '../../../../../../../index.js';
 import CyclePartners from './CyclePartners/index.jsx';
 import HealthAndSafety from './HealthAndSafety/index.jsx';
 import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
-import { calculateStatChange } from '../../helper.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
 
 const CycleIndicators = ({
     id,

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleOutcomes/index.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Widget, StatCard } from '../../../../../../../../src/index.js';
 import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
-import { calculateStatChange } from '../../helper.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
 import RestoredArea from './RestoredArea.jsx';
 import PlantingActivitiesTimeline from './PlantingActivitiesTimeline.jsx';
 

package/src/@daf/pages/Summary/Activities/PlantingCycle/helper.js

@@ -281,60 +281,4 @@ export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafety
     });
 };
 
-/**
- * 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
- */
-export 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,
-    };
-};