datastake-daf 0.6.787 → 0.6.788

package/src/@daf/pages/Summary/Activities/Monitoring/components/MangroveGrowthAndSurvival/components/SeedlingsHeight/index.jsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { Widget, ColumnChart } from '../../../../../../../../../../src/index.js';
+
+const SeedlingsHeight = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const heightData = 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 = 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 = useMemo(() => {
+        return !activityData?.averageHeight && 
+               !activityData?.seedlingsHeight && 
+               !activityData?.mangroveAverageHeight;
+    }, [activityData]);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Seedlings Height")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '250px',
+                    padding: '20px 0'
+                }}
+            >
+                <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 && (
+                    <div style={{ 
+                        marginTop: '16px', 
+                        textAlign: 'center',
+                        fontSize: '14px',
+                        color: '#475467',
+                        fontWeight: 500
+                    }}>
+                        {t("Average Height")}: {heightData[0]?.value.toFixed(0)}cm
+                    </div>
+                )}
+            </div>
+        </Widget>
+    );
+};
+
+export default SeedlingsHeight;
+

package/src/@daf/pages/Summary/Activities/Monitoring/components/MangroveGrowthAndSurvival/components/SurvivalRate/index.jsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { Widget, DonutPie } from '../../../../../../../../../../src/index.js';
+
+const SurvivalRate = ({
+    activityData,
+    loading = false,
+    t = (s) => s
+}) => {
+    const survivalData = 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]);
+
+    const renderTooltipContent = 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]);
+
+    const isEmpty = useMemo(() => {
+        return !activityData?.survivalRate && !activityData?.mangroveSurvivalRate;
+    }, [activityData]);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Survival Rate")}
+            className="with-border-header h-w-btn-header"
+        >
+          
+                {/* <DonutPie
+                    angleField="value"
+                    color={[
+                        '#E8EDF3'
+                    ]}
+                    colorField="type"
+                    data={[]}
+                    height={200}
+                    innerRadius={0.78}
+                    radius={1}
+                    renderTooltipContent={() => { }}
+                    tooltip
+                    tooltipConfig={{
+                        showTitle: false
+                    }}
+                /> */}
+
+        </Widget>
+    );
+};
+
+export default SurvivalRate;
+

package/src/@daf/pages/Summary/Activities/Monitoring/components/MangroveGrowthAndSurvival/index.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PlantedSpecies from './components/PlantedSpecies/index.jsx';
+import SurvivalRate from './components/SurvivalRate/index.jsx';
+import SeedlingsHeight from './components/SeedlingsHeight/index.jsx';
+import styled from 'styled-components';
+import { Widget } from '../../../../../../../../src/index.js';
+
+const Container = styled.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 (
+
+        <Widget
+            title={t("Mangrove Growth & Survival")}
+            className="with-border-header h-w-btn-header"
+        >      
+        <section>
+            <Container>
+                <PlantedSpecies 
+                    activityData={activityData} 
+                    loading={loading} 
+                    t={t} 
+                />
+                <SurvivalRate 
+                    activityData={activityData} 
+                    loading={loading} 
+                    t={t} 
+                />
+                <SeedlingsHeight 
+                    activityData={activityData} 
+                    loading={loading} 
+                    t={t} 
+                />
+            </Container>
+        </section>
+        </Widget>
+    );
+};
+
+export default MangroveGrowthAndSurvival;
+

package/src/@daf/pages/Summary/Activities/Monitoring/components/WorkersDistribution/index.jsx

@@ -0,0 +1,49 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../src/index.js';
+import { getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from '../../helper';
+import { renderTooltipJsx } from '../../../../../../../../src/utils';
+
+const WorkersDistribution = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
+    const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
+    const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, genderDistributionData],
+    );
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Workers Distribution")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <div
+                style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                }}
+            >
+                <PieChart
+                    mouseXOffset={10}
+                    mouseYOffset={10}
+                    changeOpacityOnHover={false}
+                    data={pieData}
+                    doConstraints={false}
+                    isPie
+                    t={t}
+                    isEmpty={isEmpty}
+                    getTooltipChildren={getTooltipChildren}
+                />
+            </div>
+        </Widget>
+    );
+};
+
+export default WorkersDistribution;
+

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { camelCaseToTitle } from "../../../../../utils";
+
+
+
+export const getKeyIndicatorsRowConfig = ({ t, data = {} }) => [
+
+  {
+    label: t('Primary Data Collection'),
+    render: () => {
+      
+      return <div className="flex">{'-'}</div>;
+    }
+  },
+  {
+    label: t('Monitoring Organization'),
+    render: () => <div>{data?.technicalPartner?.name || '-'}</div>
+  },
+  {
+    label: t('Team Members'),
+    render: () => <div> {data?.teamMembers?.length || '0'}</div>
+  },
+  {
+    label: t('Monitored Area'),
+    render: () => <div>{data?.totalAreaParcelMonitored ? `${data?.totalAreaParcelMonitored} ha` : '0 ha'}</div>
+  }, 
+
+];
+
+export const getSiteConditionsConfig = ({ t, data = {} }) => [
+  {
+    label: t('Season'),
+    icon: 'Tree',
+    render: () => <div>{camelCaseToTitle(data?.season)|| '-'}</div>
+  },
+  {
+    label: t('Weather conditions'),
+    icon: 'Globe',
+    render: () => <div>{ camelCaseToTitle(data?.weatherConditions )|| '-'}</div>
+  },
+  {
+    label: t('Tide level'),
+    icon: 'WaterDrop',
+    render: () => <div>{camelCaseToTitle(data?.tideLevel )|| '-'}</div>
+  },
+  {
+    label: t('Disturbances'),
+    icon: 'Lightning',  
+    render: () => <div>{data?.hasDisturbances ? t('Yes') : t('No')}</div>
+  },
+];

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

@@ -0,0 +1,236 @@
+import L from "leaflet";
+
+const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+
+
+export const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
+    const photos = photoDoc?.pictures?.filter(p => p?.url) || (photoDoc?.url ? [photoDoc] : []);
+    
+    return photos.map((photo, photoIndex) => ({
+        src: normalizeUrl(photo.url),
+        alt: photo.name || photo.alt || `${label} - Image ${docIndex + 1}-${photoIndex + 1}`
+    }));
+};
+
+export const getActivityImages = (activityData) => {
+    const photoArrays = [
+        { data: activityData?.groupPhotos, label: 'Group Photo' },
+        { data: activityData?.photosStartActivity, label: 'Start of Activity' },
+        { data: activityData?.photosDuringActivity, label: 'During Activity' },
+        { data: activityData?.photosEndActivity, label: 'End of Activity' }
+    ];
+
+    return photoArrays
+        .flatMap(({ data, label }) =>
+            Array.isArray(data)
+                ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index))
+                : []
+        );
+};
+
+const GENDER_COLORS = ['#016C6E', '#00AEB1'];
+
+export const getGenderDistributionData = (activityData) => {
+    return {
+        Male: activityData?.genderDistributionMale || 0,
+        Female: activityData?.genderDistributionFemale || 0,
+    };
+};
+
+
+export const isGenderDistributionEmpty = (genderDistributionData) => {
+    return Object.values(genderDistributionData).every(val => !val || val === 0);
+};
+
+export const calculateGenderPieData = (genderDistributionData) => {
+    const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+
+    return Object.keys(genderDistributionData).map((key, index) => {
+        const color = GENDER_COLORS[index % GENDER_COLORS.length];
+
+        return {
+            value: genderDistributionData[key] || 0,
+            percent: total > 0 ? (genderDistributionData[key] || 0) / total : 0,
+            color: color,
+            label: key,
+            key: key,
+        };
+    });
+};
+
+export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(genderDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Gender"),
+            items: Object.keys(genderDistributionData).map((k) => ({
+                label: k,
+                value: 0,
+            })),
+        });
+    }
+
+    return renderTooltipJsx({
+        title: t("Gender"),
+        items: [
+            {
+                color: item.color,
+                label: t(item.label),
+                value: `${item.value || 0}`,
+            },
+        ],
+    });
+};
+
+export 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
+};
+
+export 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) },
+    ];
+};
+
+export 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.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.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;
+};

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

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { DashboardLayout, Header, KeyIndicators } from '../../../../../../src/index.js'
+import { getKeyIndicatorsRowConfig, getSiteConditionsConfig } from './config';
+import { getActivityIndicatorsConfig } from './helper';
+import ActivityLocation from './components/ActivityLocation/index.jsx';
+import ActivityImagery from './components/ActivityImagery/index.jsx';
+import WorkersDistribution from './components/WorkersDistribution/index.jsx';
+import MangroveGrowthAndSurvival from './components/MangroveGrowthAndSurvival/index.jsx';
+
+
+const   MonitoringActivitySummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: activityData }), [t, activityData]);
+
+    // Activity Indicators Config - mapped from activityData
+    const activityIndicatorsConfig = useMemo(() =>
+        getActivityIndicatorsConfig(activityData, t),
+        [activityData, t]
+    );
+
+    // Site Conditions Config
+    const siteConditionsConfig = useMemo(() => 
+        getSiteConditionsConfig({ t, data: activityData }),
+        [t, activityData]
+    );
+
+
+    console.log({activityData});
+    return (
+        <DashboardLayout
+            header={
+                <Header
+                    title={'Monitoring Activity Summary'}
+                    supportText={supportText || ''}
+                    onDownload={onDownload}
+                    downloadDisabled={downloadDisabled}
+                    actionButtons={actionButtons}
+                    breadcrumbs={breadcrumbs}
+                    goBackTo={goBackTo}
+                    loading={loading}
+                />
+            }
+        >
+            <section>
+                <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
+            </section>
+
+            <ActivityLocation activityData={activityData} loading={loading} t={t} />
+
+            <KeyIndicators
+                loading={loading}
+                config={siteConditionsConfig}
+                title={t("straatos::site-conditions")}
+                widgetClassName="h-w-btn-header"
+            />
+
+            <MangroveGrowthAndSurvival 
+                activityData={activityData} 
+                loading={loading} 
+                t={t} 
+            />
+
+        </DashboardLayout>
+    )
+}
+
+export default MonitoringActivitySummary;