datastake-daf 0.6.783 → 0.6.785

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,
-    };
-};
 

package/src/@daf/pages/Summary/Minesite/index.jsx

@@ -68,13 +68,12 @@ const MineSummary = ({
         <DashboardLayout
             header={
                 <Header 
-                    title={hasSelect ? t("Mine Review") : (singleItemData?.name || "") + " " + t("Summary")}
+                    title={hasSelect ? t("Mine Review") : (`${singleItemData?.name || ""} ${singleItemData?.name ? t("Summary") : ""}`)}
                     className="with-border-header h-w-btn-header no-px-body"
                     goBackTo={!hasSelect && goBack}
-                    loading={loading}
                     breadcrumbs={breadcrumbs}
                     addedHeaderFirst
-					actionButtons={[
+					actionButtons={hasSelect ? [] :[
                         {
 							tooltip: t("Details"),
 							icon: "FileEdit",
@@ -90,7 +89,7 @@ const MineSummary = ({
 						},
 					]}
                     addedHeader={
-						<div className="flex flex-row gap-4" style={{ marginRight: 8 }}>
+						<div className="flex flex-row gap-4">
 							<Multiselect
 								options={[...sourceOptions]}
 								isAvatarGroup
@@ -109,6 +108,9 @@ const MineSummary = ({
 							/>
 						</div>
 					}
+                    onDownload={() => {
+                        console.log("onDownload");
+                    }}
                 />
             }
         >

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/index.js

@@ -36,6 +36,8 @@ const TradeRelationships = ({
 		APP
     });
 
+	console.log({graphData});
+
     useEffect(() => {
 		const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
 

package/src/@daf/pages/Summary/Operator/index.jsx

@@ -69,12 +69,12 @@ const OperatorSummary = ({
         <DashboardLayout
             header={
                 <Header 
-                    title={hasSelect ? t("Operator Review") : (singleItemData?.name || "") + " " + t("Summary")}
+                    title={hasSelect ? t("Operator Review") : (`${singleItemData?.name || ""} ${singleItemData?.name ? t("Summary") : ""}`)}
                     className="with-border-header h-w-btn-header no-px-body"
                     goBackTo={!hasSelect && goBack}
                     breadcrumbs={breadcrumbs}
                     addedHeaderFirst
-					actionButtons={[
+					actionButtons={hasSelect ? [] :[
                         {
 							tooltip: t("Details"),
 							icon: "FileEdit",
@@ -90,7 +90,7 @@ const OperatorSummary = ({
 						},
 					]}
                     addedHeader={
-						<div className="flex flex-row gap-4" style={{ marginRight: 8 }}>
+						<div className="flex flex-row gap-4">
 							<Multiselect
 								options={[...sourceOptions]}
 								isAvatarGroup
@@ -109,6 +109,9 @@ const OperatorSummary = ({
 							/>
 						</div>
 					}
+                    onDownload={() => {
+                        console.log("onDownload");
+                    }}
                 />
             }
         >

package/src/@daf/pages/TablePage/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx';
 import Create from './create.jsx';
 import { displayMessage } from '../../../helpers/messages.js';
@@ -40,6 +40,12 @@ const TablePage = ({
     breadcrumbs = [],
     onDownload,
 }) => {
+    const _options = useMemo(() => {
+        return {
+            ...options,
+            ...data?.options,
+        }
+    },[options, data?.options])
     
     const {
         activeTab,
@@ -56,7 +62,7 @@ const TablePage = ({
         location,
         getData,
         extendingFilters,
-        options,
+        options: _options,
         t,
         goTo,
         user,

package/src/@daf/pages/Template/components/LinkingTemplate/config.js

@@ -72,4 +72,17 @@ export const renderType = ({ item = {}, t = (s) => s }) => {
 	}
 
 	return "--";
-};
+};
+
+export const namespaceMap = {
+	locations: "location",
+	documents: "document",
+	stakeholders: "stakeholder",
+	events: "event",
+	incidents: "event",
+	correctiveActions: "event",
+	"production-sites": "location",
+	operators: "stakeholder",
+	workers: "stakeholder",
+	activities: "event",
+}

package/src/@daf/pages/Template/components/LinkingTemplate/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useFilters } from '../../../../hooks/useFilters.js';
 import { getColumns } from './columns.js';
-import { redirect } from './config.js';
+import { redirect, namespaceMap } from './config.js';
 import LinkedSubjectsService from '../../../../services/LinkedSubjects.js';
 import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
 import Table from '../../../../core/components/Table/index.jsx';
@@ -44,9 +44,11 @@ const LinkingTemplate = ({
 
     const dataSource = conf?.linkingTemplateContextData?.[id];
 
+	const _namespace = namespaceMap[namespace];
+
     const changeData = async () => {
 		try {
-			const _data = await LinkedSubjectsService.getLinkedSubjects({ namespace, id, mod: conf.mod });
+			const _data = await LinkedSubjectsService.getLinkedSubjects({ namespace: _namespace, id, mod: conf.mod });
 			const data = (_data?.data || []).map((d, i) => ({ ...d, key: `${d.id}-${i}` }));
 			conf?.addData(id, data);
 			setPagination((prev) => ({

package/src/@daf/pages/Template/index.jsx

@@ -6,14 +6,5 @@ export function Template({
   conf,
   namespace,
 }) {
-  switch (namespace) {
-    case 'locations':
-    case 'documents':
-    case 'stakeholders':
-    case 'events':
-      return <LinkingTemplate conf={conf} namespace={namespace} />
-    default:
-      return null;
-
-  }
+  return <LinkingTemplate conf={conf} namespace={namespace} />
 }