datastake-daf 0.6.795 → 0.6.796

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

@@ -12,16 +12,18 @@ const ActivityImagery = ({
     const images = useMemo(() => getActivityImages(activityData), [activityData]);
 
     return (
-        <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
-            <ImageCarousel
-                loading={loading}
-                images={images}
-                title={t("straatos::activity-imagery")}
-                key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
-                customArrows={true}
-                activeDotColor="#003435"
-            />
-        </div>
+        <div style={{ maxWidth: "50%", width: "calc(100% - 405px)" , }}>
+                <ImageCarousel
+                    loading={loading}
+                    images={images}
+                    title={t("straatos::activity-imagery")}
+                    key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
+                    customArrows={true}
+                    activeDotColor="#003435"
+                    height={245}
+                />
+                   </div>
+          
     );
 };
 

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

@@ -0,0 +1,86 @@
+export const FAUNA_KEYS = [
+    'birds',
+    'juveniles',
+    'crabs',
+    'cymbium',
+    'fish',
+    'mongooses',
+    'mollusks',
+    'monkeys',
+    'oysters',
+    'snails',
+    'caterpillars',
+    'animal_tracks',
+    'other'
+];
+
+export const INVASIVE_SPECIES_KEYS = [
+    'spiders',
+    'scaleInsects',
+    'caterpillars',
+    'unidentifiedPests',
+    'other',
+];
+
+export const formatFaunaLabel = (key) => {
+    return key
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+};
+
+export const formatInvasiveSpeciesLabel = (key) => {
+    return key
+        .replace(/([A-Z])/g, ' $1')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+};
+
+export const createFaunaIndicatorConfig = (key, faunaPresent, t) => {
+    const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(key);
+    const label = formatFaunaLabel(key);
+
+    return {
+        label: t(label),
+        type: isPresent ? 'compliant' : 'notCompliant',
+        statusIcon: isPresent ? 'Check' : 'Close',
+        statusIconColor: isPresent ? '#12B76A' : '#6C737F',
+        statusBadgeBackgroundColor: isPresent ? undefined : '#F9FAFB',
+        statusBadgeBorderColor: isPresent ? undefined : '#E5E7EB'
+    };
+};
+
+export const createInvasiveSpeciesIndicatorConfig = (key, invasiveSpecies, hasInvasiveSpecies, t) => {
+    const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
+    const shouldShowRedForPresent = hasInvasiveSpecies === 'yes';
+    
+    const isPresent = !shouldShowAllAsNotPresent && 
+                     Array.isArray(invasiveSpecies) && 
+                     invasiveSpecies.includes(key);
+    
+    const isRedBadge = isPresent && shouldShowRedForPresent;
+    const label = formatInvasiveSpeciesLabel(key);
+
+    return {
+        label: t(label),
+        type: isPresent ? 'compliant' : 'notCompliant',
+        statusIcon: isPresent ? 'Check' : 'Close',
+        statusIconColor: isRedBadge ? '#D92D20' : (isPresent ? '#12B76A' : '#6C737F'),
+        statusBadgeBackgroundColor: isRedBadge ? '#FEE4E2' : (isPresent ? undefined : '#F9FAFB'),
+        statusBadgeBorderColor: isRedBadge ? '#FDA29B' : (isPresent ? undefined : '#E5E7EB')
+    };
+};
+
+export const generateFaunaConfig = (faunaPresent, t) => {
+    return FAUNA_KEYS.map(key => 
+        createFaunaIndicatorConfig(key, faunaPresent, t)
+    );
+};
+
+export const generateInvasiveSpeciesConfig = (invasiveSpecies, hasInvasiveSpecies, t) => {
+    return INVASIVE_SPECIES_KEYS.map(key => 
+        createInvasiveSpeciesIndicatorConfig(key, invasiveSpecies, hasInvasiveSpecies, t)
+    );
+};
+

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

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { ActivityIndicators, Widget } from '../../../../../../../../src/index.js';
+import styled from 'styled-components';
+import { 
+    generateFaunaConfig, 
+    generateInvasiveSpeciesConfig 
+} from './helper';
+
+const Container = styled.div`
+    display: grid;
+    grid-template-columns: 70% 28.5%;
+    gap: 24px;
+    width: 100%;
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
+const BiodiversityAndHabitat = ({
+    faunaPresent = [],
+    invasiveSpecies = [],
+    hasInvasiveSpecies,
+    loading = false,
+    t = (s) => s
+}) => {
+    const observedFaunaConfig = useMemo(() => 
+        generateFaunaConfig(faunaPresent, t),
+        [faunaPresent, t]
+    );
+
+    const invasiveSpeciesConfig = useMemo(() => 
+        generateInvasiveSpeciesConfig(invasiveSpecies, hasInvasiveSpecies, t),
+        [invasiveSpecies, hasInvasiveSpecies, t]
+    );
+
+    return (
+        <Widget
+            title={t("Biodiversity & Habitat")}
+            className="with-border-header h-w-btn-header"
+        >
+            <section>
+                <Container>
+                    <ActivityIndicators
+                        title={t("Observed Fauna")}
+                        config={observedFaunaConfig}
+                        loading={loading}
+                        widgetClassName="h-w-btn-header"
+                        t={t}
+                    />
+                    <ActivityIndicators
+                        title={t("Invasive Species")}
+                        config={invasiveSpeciesConfig}
+                        loading={loading}
+                        className="single-column"
+                        widgetClassName="h-w-btn-header"
+                        t={t}
+                    />
+                </Container>
+            </section>
+        </Widget>
+    );
+};
+
+export default BiodiversityAndHabitat;
+

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

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { KeyIndicators } from '../../../../../../../../src/index.js';
+import { getEnvironmentalMetricsConfig } from '../../config';
+
+const EnvironmentalMetrics = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s,
+    options
+}) => {
+    const environmentalMetricsConfig = useMemo(() => 
+        getEnvironmentalMetricsConfig({ t, data: activityData, options }), 
+        [t, activityData]
+    );
+
+    return (
+            <div style={{ flex: 1, }}>
+                <KeyIndicators
+                    loading={loading}
+                    config={environmentalMetricsConfig}
+                    title={t("straatos::environmental-metrics")}
+                    className="small-content row-content"
+                    widgetClassName="h-w-btn-header"
+                />
+            </div>
+    );
+};
+
+export default EnvironmentalMetrics;
+

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

@@ -2,43 +2,30 @@ import React, { useMemo } from 'react';
 import { ActivityIndicators } from '../../../../../../../../../../src/index.js';
 
 const PlantedSpecies = ({ 
-    activityData, 
+    plantedSpecies, 
+    mangroveSpecies,
     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;
-                
+        if (Array.isArray(mangroveSpecies) && mangroveSpecies.length > 0) {
+            return mangroveSpecies.map((species) => {
+                const isPlanted = species.value === plantedSpecies;
                 return {
-                    icon: 'Tree',
-                    label: speciesName,
-                    type: isSelected ? 'compliant' : 'notCompliant',
-                    statusIcon: isSelected ? 'Check' : 'Close'
+                    label: species.label,
+                    type: isPlanted ? 'compliant' : 'notCompliant',
+                    statusIcon: isPlanted ? 'Check' : 'Close',
+                    statusIconColor: isPlanted ? '#12B76A' : '#6C737F',
+                    statusBadgeBackgroundColor: isPlanted ? undefined : '#F9FAFB',
+                    statusBadgeBorderColor: isPlanted ? undefined : '#E5E7EB'
                 };
             });
         }
         
-        // 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 []
+           
+    }, [plantedSpecies, mangroveSpecies]);
 
     return (
         <ActivityIndicators

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

@@ -2,29 +2,26 @@ import React, { useMemo } from 'react';
 import { Widget, ColumnChart } from '../../../../../../../../../../src/index.js';
 
 const SeedlingsHeight = ({ 
-    activityData, 
+    averageHeight, 
+    averageHeightUnit,
     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;
+            : parseFloat(averageHeight) || 0;
         
         return [
             {
                 label: t("Average Height"),
-                value: heightValue
+                value: heightValue,
+                unit: averageHeightUnit
             }
         ];
-    }, [activityData, t]);
+    }, [averageHeight, averageHeightUnit,t]);
 
     const renderTooltipContent = useMemo(() => {
         return (title, data) => {
@@ -41,26 +38,26 @@ const SeedlingsHeight = ({
             }
             
             const item = data[0];
-            const value = item?.value || item?.data?.value || 0;
+            const rawValue = item?.value || item?.data?.value || 0;
+            const value = Number(rawValue) || 0;
+            const formattedValue =   Number(value).toLocaleString('en-us');
             
             return {
                 title: t("Average Height"),
                 items: [
                     {
                         label: t("Average Height"),
-                        value: `${value.toFixed(1)}cm`,
-                        color: '#00AEB1'
+                        value: `${formattedValue} ${averageHeightUnit || 'cm'}`,
+                        color: '#00AEB1',
                     }
                 ]
             };
         };
-    }, [t]);
+    }, [t, averageHeightUnit]);
 
     const isEmpty = useMemo(() => {
-        return !activityData?.averageHeight && 
-               !activityData?.seedlingsHeight && 
-               !activityData?.mangroveAverageHeight;
-    }, [activityData]);
+            return !averageHeight && averageHeight !== 0;
+    }, [averageHeight]);
 
     return (
         <Widget
@@ -68,20 +65,11 @@ const SeedlingsHeight = ({
             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={{
@@ -89,7 +77,7 @@ const SeedlingsHeight = ({
                         max: 35,
                         tickMethod: () => [0, 5, 10, 15, 20, 25, 30, 35],
                         label: {
-                            formatter: (v) => `${v}cm`
+                            formatter: (v) => `${v} ${averageHeightUnit || 'cm'}`
                         }
                     }}
                     xAxis={{
@@ -103,16 +91,15 @@ const SeedlingsHeight = ({
                 />
                 {!isEmpty && (
                     <div style={{ 
-                        marginTop: '16px', 
+                         marginTop: '16px', 
                         textAlign: 'center',
                         fontSize: '14px',
                         color: '#475467',
                         fontWeight: 500
                     }}>
-                        {t("Average Height")}: {heightData[0]?.value.toFixed(0)}cm
                     </div>
                 )}
-            </div>
+         
         </Widget>
     );
 };

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

@@ -2,65 +2,62 @@ import React, { useMemo } from 'react';
 import { Widget, DonutPie } from '../../../../../../../../../../src/index.js';
 
 const SurvivalRate = ({
-    activityData,
+    survivalRate,
     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;
+        if (!survivalRate && survivalRate !== 0) {
+            return [];
+        }
 
         return [
             {
                 type: t("Survival Rate"),
-                value: survivalPercent
+                value: Math.round(survivalRate || 0)
             },
             {
                 type: t("Non-survival"),
-                value: 100 - survivalPercent
+                value: 100 - Math.round(survivalRate || 0)
             }
         ];
-    }, [activityData, t]);
+    }, [survivalRate, t]);
 
     const renderTooltipContent = useMemo(() => {
         return (title, data) => {
-            if (!data || data.length === 0) {
+            if (!survivalData || survivalData.length === 0 || !data || data.length === 0) {
                 return {
                     title: t("Survival Rate"),
                     items: [
                         {
-                            label: t("No Data"),
+                            label: t("Not answered"),
                             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
-                    }
-                ]
+                items: survivalData.map((item) => ({
+                    label: item.type,
+                    value: item.value + '%',
+                    color: item.type === t("Survival Rate") ? '#00AEB1' : '#E8EDF3'
+                })),
             };
         };
-    }, [t]);
+    }, [survivalData, t]);
 
     const isEmpty = useMemo(() => {
-        return !activityData?.survivalRate && !activityData?.mangroveSurvivalRate;
-    }, [activityData]);
+        return !survivalRate && survivalRate !== 0;
+    }, [survivalRate]);
+
+    const chartColors = useMemo(() => {
+        if (isEmpty) {
+            return ['#E5E7EB', '#F9FAFB'];
+        }
+        return ['#00AEB1', '#E8EDF3'];
+    }, [isEmpty]);
 
     return (
         <Widget
@@ -68,24 +65,20 @@ const SurvivalRate = ({
             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
-                    }}
-                /> */}
-
+            <DonutPie
+                angleField="value"
+                color={chartColors}
+                colorField="type"
+                data={isEmpty ? [] : survivalData}
+                height={250}
+                innerRadius={0.78}
+                radius={1}
+                renderTooltipContent={renderTooltipContent}
+                tooltip
+                tooltipConfig={{
+                    showTitle: false
+                }}
+            />
         </Widget>
     );
 };

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

@@ -3,48 +3,127 @@ 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';
+import { Widget, VegetationHealth } from '../../../../../../../../src/index.js';
+import { VEGETATION_KEYS } from '../../../../../../../../src/constants/Vegetation.js';
 
 const Container = styled.div`
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    width: 100%;
+    overflow-x: auto;
+    
+    > * {
+        min-width: 0;
+    }
+    
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(3, minmax(200px, 1fr));
+    }
+`;
+
+const VegetationHealthContainer = styled.div`
+    display: flex;
     gap: 24px;
     width: 100%;
     
     @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 `;
 
+const VegetationHealthSection = styled.section`
+    width: 66%;
+`;
+
 const MangroveGrowthAndSurvival = ({ 
     activityData, 
     loading = false, 
-    t = (s) => s 
+    t = (s) => s,
+    options
 }) => {
+
     return (
 
         <Widget
-            title={t("Mangrove Growth & Survival")}
+            title={t("Mangrove Growth and Survival")}
             className="with-border-header h-w-btn-header"
         >      
         <section>
+
+            
             <Container>
                 <PlantedSpecies 
-                    activityData={activityData} 
+                    plantedSpecies={activityData?.plantedSpecies} 
+                    mangroveSpecies={options?.mangroveSpecies}
                     loading={loading} 
                     t={t} 
                 />
                 <SurvivalRate 
-                    activityData={activityData} 
+                    survivalRate={activityData?.survivalRate} 
                     loading={loading} 
                     t={t} 
                 />
                 <SeedlingsHeight 
-                    activityData={activityData} 
+                    averageHeight={activityData?.averageHeightValue} 
+                    averageHeightUnit={activityData?.averageHeightUnit}
                     loading={loading} 
                     t={t} 
                 />
             </Container>
+
+            <VegetationHealthContainer>
+                <VegetationHealthSection>   
+                    <VegetationHealth 
+                        title={t("Vegetation Health")}
+                        vegetationHealthChart={activityData?.growthObservations}
+                        growthObservations={activityData?.growthObservations}
+                        filterKeys={[
+                            VEGETATION_KEYS.HEALTHY,
+                            VEGETATION_KEYS.WHITE_SPOTS,
+                            VEGETATION_KEYS.BLACK_SPOTS,
+                            VEGETATION_KEYS.REDDISH_SPOTS,
+                            VEGETATION_KEYS.YELLOWING,
+                            VEGETATION_KEYS.MOSAIC,
+                            VEGETATION_KEYS.DRY_OR_DEAD,
+                            VEGETATION_KEYS.NO_LEAVES
+                        ]}
+                        columnsPerRow={4}
+                        itemWidth={80}
+                        itemHeight={80}
+                        activeVegetationConditions={
+                            activityData?.vegetationHealthChart
+                                ?.filter(item => 
+                                    item?.type !== VEGETATION_KEYS.SPIDER_WEBS && 
+                                    item?.type !== VEGETATION_KEYS.DAMAGE_FROM_INSECTS
+                                )
+                                ?.map(item => item?.type) || []
+                        }
+                        loading={loading} 
+                        t={t} 
+                    />
+                </VegetationHealthSection>
+         
+                    <VegetationHealth 
+                        title={t("Vegetation Health")}
+                        growthObservations={activityData?.growthObservations}
+                        activeVegetationConditions={
+                            activityData?.vegetationHealthChart
+                                ?.filter(item => 
+                                    item?.type === VEGETATION_KEYS.SPIDER_WEBS || 
+                                    item?.type === VEGETATION_KEYS.DAMAGE_FROM_INSECTS
+                                )
+                                ?.map(item => item?.type) || []
+                        }
+                        filterKeys={[VEGETATION_KEYS.SPIDER_WEBS, VEGETATION_KEYS.DAMAGE_FROM_INSECTS]}
+                        columnsPerRow={1}
+                        itemWidth={210}
+                        itemHeight={105}
+                        loading={loading} 
+                        t={t} 
+                    />
+        
+            </VegetationHealthContainer>
         </section>
         </Widget>
     );