datastake-daf 0.6.786 → 0.6.788

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

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { Widget, MineSiteMap } from '../../../../../../../../src/index.js';
+import { getMapDataFromActivity } from '../../helper';
+import { convertDMS } from '../../../../../../../../src/helpers/Map';
+import CustomIcon from '../../../../../../../../src/@daf/core/components/Icon/CustomIcon.jsx';
+
+const ActivityLocation = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const mapData = useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
+
+    return (
+        <section>
+        <Widget
+            title={t("Activity Location")}
+            className="no-px h-w-btn-header no-pt-body  no-p-body no-pb-body"
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+            <div style={{ flex: 1, minHeight: 0 }}>
+                <MineSiteMap
+                    loading={loading}
+                    t={t}
+                    isSatellite={true}
+                    app={"straatos"}
+                    type={'location-territory'}
+                    showSider={false}
+                    user={null}
+                    data={mapData}
+                    maxZoom={18}
+                    primaryLink={true}
+                    style={{ height: '100%', width: '100%' }}
+                    renderTooltipForLocation={(data) => {
+                        const coordinates = data.gps?.latitude && data.gps?.longitude
+                            ? convertDMS(data.gps.latitude, data.gps.longitude)
+                            : null;
+
+                        if (!coordinates) {
+                            return [];
+                        }
+
+                        const isActivityEnd = data.name === t("Activity End") || data.id?.includes('-departure');
+                        const iconColor = isActivityEnd ? "#FF7A45" : "#016C6E";
+
+                        return [
+                            {
+                                label: t("Coordinates"),
+                              
+                                value: (
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'nowrap' }}>
+                                        {/* Latitude icon (vertical) */}
+                                        <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>
+                                        {/* Longitude icon (horizontal) */}
+                                        <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>
+                                ),
+                            },
+                        ];
+                    }}
+                    renderTooltipForTerritory={(data) => {
+                        return [
+                            {
+                                label: t("Plot Name"),
+                                value: data.plotName || data.name || "--",
+                            },
+                        ];
+                    }}
+                    link={true}
+                />
+            </div>
+        </Widget>
+        </section>
+    );
+};
+
+export default ActivityLocation;
+

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

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { ActivityIndicators } from '../../../../../../../../../../src/index.js';
+
+const PlantedSpecies = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const speciesConfig = useMemo(() => {
+        // Extract planted species from activityData
+        // Assuming the data structure might have plantedSpecies array or similar
+        const species = activityData?.plantedSpecies || activityData?.mangroveSpecies || [];
+        
+        // If species is an array, map it to config format
+        if (Array.isArray(species)) {
+            return species.map((speciesItem, index) => {
+                const speciesName = typeof speciesItem === 'string' 
+                    ? speciesItem 
+                    : speciesItem?.name || speciesItem?.species || `Species ${index + 1}`;
+                
+                // Determine if species is selected/planted (you may need to adjust this logic)
+                const isSelected = typeof speciesItem === 'object' 
+                    ? speciesItem?.selected !== false 
+                    : true;
+                
+                return {
+                    icon: 'Tree',
+                    label: speciesName,
+                    type: isSelected ? 'compliant' : 'notCompliant',
+                    statusIcon: isSelected ? 'Check' : 'Close'
+                };
+            });
+        }
+        
+        // Fallback: if no species data, show default species from image
+        return [
+            { icon: 'Tree', label: 'Rhyzophora sp', type: 'compliant', statusIcon: 'Check' },
+            { icon: 'Tree', label: 'Rhyzophora', type: 'notCompliant', statusIcon: 'Close' },
+            { icon: 'Tree', label: 'Rhyzophora mangle', type: 'notCompliant', statusIcon: 'Close' }
+        ];
+    }, [activityData]);
+
+    return (
+        <ActivityIndicators
+            title={t("Planted Species")}
+            config={speciesConfig}
+            loading={loading}
+            widgetClassName="h-w-btn-header"
+            t={t}
+            className="single-column"
+        />
+    );
+};
+
+export default PlantedSpecies;
+

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