npm - datastake-daf - Versions diffs - 0.6.810 → 0.6.812 - Mend

datastake-daf 0.6.810 → 0.6.812

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.810",
+	"version": "0.6.812",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/public/Vegetation/damage-from-insects-default.svg CHANGED Viewed

	@@ -12,3 +12,5 @@
12 12
13 13	</svg>
14 14
15	+
16	+

package/public/Vegetation/dry-or-dead-default.svg CHANGED Viewed

	@@ -14,3 +14,5 @@
14 14
15 15	</svg>
16 16
17	+
18	+

package/public/Vegetation/healthy-default.svg CHANGED Viewed

	@@ -12,3 +12,5 @@
12 12
13 13	</svg>
14 14
15	+
16	+

package/public/Vegetation/yellowing.svg CHANGED Viewed

@@ -6,3 +6,5 @@
 <path d="M46.6985 104.257H45.1672V100.217L41.6946 94.3924H43.4036L45.9192 98.7469H45.967L48.4827 94.3924H50.178L46.6985 100.217V104.257ZM52.885 97.9471C51.8186 97.9471 51.0461 98.7264 50.9641 99.868H54.7307C54.6965 98.7127 53.9651 97.9471 52.885 97.9471ZM54.7239 102.083H56.1389C55.927 103.416 54.6213 104.346 52.9534 104.346C50.8 104.346 49.4602 102.896 49.4602 100.572C49.4602 98.2479 50.8137 96.7372 52.8918 96.7372C54.9289 96.7372 56.2141 98.1522 56.2141 100.401V100.921H50.9573V101.01C50.9573 102.295 51.7639 103.142 52.9807 103.142C53.842 103.142 54.5188 102.732 54.7239 102.083ZM57.4719 104.257V93.9481H58.9553V104.257H57.4719ZM60.6028 104.257V93.9481H62.0862V104.257H60.6028ZM66.8508 104.346C64.7043 104.346 63.3371 102.883 63.3371 100.545C63.3371 98.2137 64.7112 96.7372 66.8508 96.7372C68.9905 96.7372 70.3577 98.2069 70.3577 100.545C70.3577 102.883 68.9973 104.346 66.8508 104.346ZM66.8508 103.115C68.1086 103.115 68.8537 102.165 68.8537 100.545C68.8537 98.9247 68.1086 97.9676 66.8508 97.9676C65.593 97.9676 64.8411 98.9315 64.8411 100.545C64.8411 102.165 65.593 103.115 66.8508 103.115ZM81.2678 96.8329L79.2239 104.257H77.6926L76.1135 98.6649H76.0793L74.5139 104.257H72.9895L70.9387 96.8329H72.4153L73.7961 102.712H73.8235L75.3957 96.8329H76.8176L78.3967 102.712H78.4241L79.8049 96.8329H81.2678ZM82.2659 104.257V96.8329H83.7493V104.257H82.2659ZM83.011 95.7733C82.5325 95.7733 82.1428 95.3905 82.1428 94.9188C82.1428 94.4334 82.5325 94.0643 83.011 94.0643C83.4895 94.0643 83.8791 94.4334 83.8791 94.9188C83.8791 95.3905 83.4895 95.7733 83.011 95.7733ZM85.3284 104.257V96.8329H86.7434V98.0838H86.7707C87.2219 97.2088 87.967 96.7508 89.1155 96.7508C90.7561 96.7508 91.6926 97.7899 91.6926 99.4989V104.257H90.2092V99.7791C90.2092 98.6512 89.6897 98.0223 88.6028 98.0223C87.4817 98.0223 86.8118 98.8016 86.8118 99.9706V104.257H85.3284ZM96.3274 103.006C97.5305 103.006 98.3303 102.021 98.3303 100.524C98.3303 99.0204 97.5305 98.0155 96.3274 98.0155C95.1311 98.0155 94.3586 98.9998 94.3586 100.524C94.3586 102.042 95.1311 103.006 96.3274 103.006ZM96.3342 106.93C94.55 106.93 93.2785 106.102 93.135 104.831H94.6321C94.7961 105.405 95.4866 105.767 96.3957 105.767C97.5715 105.767 98.3303 105.152 98.3303 104.181V102.958H98.2961C97.8655 103.758 96.9905 104.236 95.9377 104.236C94.0852 104.236 92.841 102.78 92.841 100.517C92.841 98.2274 94.0715 96.7577 95.9719 96.7577C97.0246 96.7577 97.886 97.243 98.344 98.0633H98.3713V96.8329H99.8069V104.065C99.8069 105.836 98.4739 106.93 96.3342 106.93ZM51.9758 127.257V116.948H53.4592V127.257H51.9758ZM58.135 120.947C57.0686 120.947 56.2961 121.726 56.2141 122.868H59.9807C59.9465 121.713 59.2151 120.947 58.135 120.947ZM59.9739 125.083H61.3889C61.177 126.416 59.8713 127.346 58.2034 127.346C56.05 127.346 54.7102 125.896 54.7102 123.572C54.7102 121.248 56.0637 119.737 58.1418 119.737C60.1789 119.737 61.4641 121.152 61.4641 123.401V123.921H56.2073V124.01C56.2073 125.295 57.0139 126.142 58.2307 126.142C59.092 126.142 59.7688 125.732 59.9739 125.083ZM65.2375 126.149C66.3381 126.149 67.1721 125.445 67.1721 124.468V123.887L65.3674 124.01C64.3557 124.071 63.8293 124.447 63.8293 125.103C63.8293 125.739 64.383 126.149 65.2375 126.149ZM64.8411 127.332C63.3577 127.332 62.3323 126.457 62.3323 125.131C62.3323 123.832 63.3371 123.08 65.1692 122.964L67.1721 122.848V122.273C67.1721 121.426 66.6047 120.961 65.6135 120.961C64.8069 120.961 64.219 121.378 64.0891 122.02H62.7014C62.7424 120.708 63.9866 119.737 65.6545 119.737C67.4661 119.737 68.635 120.694 68.635 122.164V127.257H67.22V126.019H67.1858C66.7756 126.826 65.8528 127.332 64.8411 127.332ZM76.428 119.833L73.7551 127.257H72.176L69.4963 119.833H71.0618L72.9553 125.794H72.9895L74.8899 119.833H76.428ZM80.2014 120.947C79.135 120.947 78.3625 121.726 78.2805 122.868H82.0471C82.0129 121.713 81.2815 120.947 80.2014 120.947ZM82.0403 125.083H83.4553C83.2434 126.416 81.9377 127.346 80.2698 127.346C78.1164 127.346 76.7766 125.896 76.7766 123.572C76.7766 121.248 78.1301 119.737 80.2082 119.737C82.2453 119.737 83.5305 121.152 83.5305 123.401V123.921H78.2737V124.01C78.2737 125.295 79.0803 126.142 80.2971 126.142C81.1584 126.142 81.8352 125.732 82.0403 125.083ZM84.6037 121.945C84.6037 120.639 85.7727 119.744 87.4817 119.744C89.1086 119.744 90.2844 120.66 90.3186 121.952H88.9241C88.8625 121.296 88.2952 120.886 87.4475 120.886C86.6067 120.886 86.0461 121.275 86.0461 121.863C86.0461 122.314 86.4153 122.622 87.2014 122.813L88.4319 123.107C89.9289 123.47 90.4827 124.01 90.4827 125.103C90.4827 126.43 89.2248 127.346 87.427 127.346C85.6975 127.346 84.5149 126.45 84.4055 125.11H85.8684C85.9846 125.821 86.5588 126.211 87.5022 126.211C88.425 126.211 89.0061 125.828 89.0061 125.226C89.0061 124.755 88.7121 124.509 87.9328 124.31L86.6067 123.982C85.2668 123.654 84.6037 122.971 84.6037 121.945Z" fill="#6C737F"/>
 </svg>

package/src/@daf/core/components/Dashboard/Widget/FaunaWidget/index.jsx CHANGED Viewed

@@ -29,8 +29,7 @@ export default function FaunaWidget({
 					$itemHeight={itemHeight}
 				>
 					{faunaConfig.map((item) => {
-						// Use colored SVG if the item's key exists in faunaPresent array
-						// Otherwise use default SVG
 						const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(item.key);
 						const shouldUseColored = isPresent;

package/src/@daf/core/components/Icon/configs/Droplets.js ADDED Viewed

@@ -0,0 +1,9 @@
+const config = {
+    viewBox: '0 0 17 18',
+    children: (
+        <path d="M8.71667 3.73333C9.2898 2.8176 9.69608 1.80754 9.91667 0.75C10.3333 2.83333 11.5833 4.83333 13.25 6.16667C14.9167 7.5 15.75 9.08333 15.75 10.75C15.7548 11.9019 15.4174 13.0293 14.7807 13.9892C14.1439 14.9492 13.2365 15.6985 12.1734 16.1421C11.1104 16.5857 9.93952 16.7037 8.80931 16.4811C7.67911 16.2585 6.64044 15.7053 5.825 14.8917M4.08333 11.8167C5.91667 11.8167 7.41667 10.2917 7.41667 8.44167C7.41667 7.475 6.94167 6.55833 5.99167 5.78333C5.04167 5.00833 4.325 3.85833 4.08333 2.65C3.84167 3.85833 3.13333 5.01667 2.175 5.78333C1.21667 6.55 0.75 7.48333 0.75 8.44167C0.75 10.2917 2.25 11.8167 4.08333 11.8167Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    ),
+}
+export default config;

package/src/@daf/core/components/Icon/configs/TrendUp.js ADDED Viewed

@@ -0,0 +1,8 @@
+const config = {
+    viewBox: '0 0 19 10',
+    children: (
+        <path d="M17.4167 0.75L10.8595 7.30719C10.5295 7.63721 10.3645 7.80221 10.1742 7.86404C10.0068 7.91842 9.82652 7.91842 9.65915 7.86404C9.46888 7.80221 9.30387 7.6372 8.97386 7.30719L6.69281 5.02614C6.36279 4.69613 6.19779 4.53112 6.00751 4.4693C5.84014 4.41492 5.65986 4.41492 5.49249 4.4693C5.30221 4.53112 5.1372 4.69613 4.80719 5.02614L0.75 9.08333M17.4167 0.75H11.5833M17.4167 0.75V6.58333" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    ),
+}
+export default config;

package/src/@daf/core/components/Icon/configs/index.js CHANGED Viewed

@@ -228,6 +228,8 @@ import SpacingHeight from "./SpacingHeight";
 import SpacingWidth from "./SpacingWidth";
 import Up from "./Up";
 import Down from "./Down";
+import TrendUp from "./TrendUp";
+import Droplets from "./Droplets";
 const config = {
 	AppAdmin,
@@ -460,6 +462,8 @@ const config = {
 	SpacingWidth,
 	Up,
 	Down,
+	TrendUp,
+	Droplets
 };
 export default config;

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

@@ -40,8 +40,8 @@ const BiodiversityAndHabitat = ({
                         title={t("Observed Fauna")}
                         faunaPresent={faunaPresent}
                         columnsPerRow={5}
-                        itemWidth={120}
-                        itemHeight={120}
+                        itemWidth={130}
+                        itemHeight={130}
                         loading={loading}
                         t={t}
                     />

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

@@ -237,6 +237,30 @@ export const getMapDataFromActivity = (activityData, t) => {
         });
     }
+    // Entry 4: Generic locationCheck marker (independent - show if it exists)
+    const locationCheckLat = activityData?.locationCheck?.latitude;
+    const locationCheckLng = activityData?.locationCheck?.longitude;
+    if (isValidCoordinate(locationCheckLat) && isValidCoordinate(locationCheckLng)) {
+        mapData.push({
+            _id: {},
+            id: `${activityData?.id || activityData?.datastakeId || 'locationcheck'}-locationcheck`,
+            // 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 locationCheckLat === 'number' ? locationCheckLat : parseFloat(locationCheckLat),
+                longitude: typeof locationCheckLng === 'number' ? locationCheckLng : parseFloat(locationCheckLng),
+            },
+            name: t("Location Check"),
+            plotName: locationName,
+            territoryTitle: t("Associated Plot"),
+            datastakeId: `${datastakeId}-locationcheck`,
+            markerColor: "#016C6E",
+            sources: null,
+            link: null,
+        });
+    }
     // Return mapData even if empty - let the map component handle empty arrays
     return mapData;
 };

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/InvasiveSpecies.jsx ADDED Viewed

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { Widget, RadarChart } from '../../../../../../../../src/index.js';
+// Define the specific 5 categories to show in radar chart
+const RADAR_CATEGORIES = ['spiders', 'scaleInsects', 'caterpillars', 'ants', 'unidentifiedPests'];
+// Custom labels for the radar chart
+const RADAR_LABELS = {
+    'spiders': 'Spiders',
+    'scaleInsects': 'Scale insects',
+    'caterpillars': 'Caterpillars',
+    'ants': 'Ants',
+    'unidentifiedPests': 'Unidentified pests'
+};
+const InvasiveSpecies = ({
+    invasiveSpeciesChart,
+    t = (s) => s,
+    options = {}
+}) => {
+    const chartData = useMemo(() => {
+        const speciesOptions = options?.invasiveSpecies || [];
+        // Create a map of existing data
+        const dataMap = new Map();
+        if (invasiveSpeciesChart && Array.isArray(invasiveSpeciesChart)) {
+            invasiveSpeciesChart.forEach(item => {
+                if (item?.invasiveSpecies) {
+                    dataMap.set(item.invasiveSpecies, Number(item?.count) || 0);
+                }
+            });
+        }
+        // Create chart data for all 5 radar categories
+        const data = RADAR_CATEGORIES.map((categoryValue) => {
+            return {
+                item: RADAR_LABELS[categoryValue] || categoryValue,
+                score: dataMap.get(categoryValue) || 0,
+                invasiveSpecies: categoryValue
+            };
+        });
+        return data;
+    }, [invasiveSpeciesChart, options]);
+    const maxScore = useMemo(() => {
+        if (!chartData || chartData.length === 0) return 100;
+        const max = Math.max(...chartData.map(item => item.score || 0));
+        return max > 0 ? Math.ceil(max * 1.2) : 100;
+    }, [chartData]);
+    const isEmpty = useMemo(() => {
+        // Never empty since we always show 5 categories
+        return false;
+    }, []);
+    console.log('InvasiveSpecies - chartData:', chartData);
+    return (
+        <Widget
+            title={t("Invasive Species")}
+            className="with-border-header h-w-btn-header"
+        >
+                    {isEmpty ? (
+                        <div style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '100%',
+                            color: '#999'
+                        }}>
+                            {t("No data available")}
+                        </div>
+                    ) : (
+                        <RadarChart
+                            data={chartData}
+                            xFieldKey="item"
+                            yFieldKey="score"
+                            animated={true}
+                            height={400}
+                            score={{
+                                max: maxScore,
+                                min: 0
+                            }}
+                            renderTooltipContent={(title, data) => {
+                                if (!data || data.length === 0) return {};
+                                const item = data[0]?.data || data[0];
+                                return {
+                                    title: title,
+                                    items: [
+                                        {
+                                            label: t("Sightings"),
+                                            value: item?.score || 0,
+                                        },
+                                    ],
+                                };
+                            }}
+                        />
+                    )}
+        </Widget>
+    );
+};
+export default InvasiveSpecies;

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/ObservedFauna.jsx ADDED Viewed

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { Widget, BarChart } from '../../../../../../../../src/index.js';
+import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+const ObservedFauna = ({
+    observedFaunaChart,
+    t = (s) => s,
+    options = {}
+}) => {
+    const chartData = useMemo(() => {
+        const allFaunaTypes = options?.faunaObserved || [];
+        if (allFaunaTypes.length === 0) {
+            return [];
+        }
+        const mergedData = mergeDefaultCategories(
+            observedFaunaChart,
+            allFaunaTypes,
+            'fauna',
+            'count',
+            'label',
+            'value'
+        );
+        // Rename 'label' to 'type' for BarChart compatibility
+        return mergedData.map(item => ({
+            type: item.label,
+            value: item.value,
+            fauna: item.fauna
+        }));
+    }, [observedFaunaChart, options]);
+    const xAxisConfig = useMemo(() => {
+        return calculateNiceAxisConfig(
+            chartData,
+            'value',
+            1.2, // multiplier: 20% padding
+            {
+                min: 0,
+                max: 10,
+                tickMethod: () => [0, 2, 4, 6, 8, 10]
+            }
+        );
+    }, [chartData]);
+    return (
+        <Widget
+            title={t("Observed Fauna")}
+            className="with-border-header h-w-btn-header"
+        >
+                <BarChart
+                    data={chartData}
+                    yFieldKey="type"
+                    xFieldKey="value"
+                    animated={true}
+                    color="#00AEB1"
+                    xAxisConfig={xAxisConfig}
+                    renderTooltipContent={(title, data) => {
+                        if (!data || data.length === 0) return {};
+                        const item = data[0]?.data || data[0];
+                        return {
+                            title: title,
+                            subTitle: t("Sightings"),
+                            items: [
+                                {
+                                    label: t("Count"),
+                                    value: item?.value || 0,
+                                },
+                            ],
+                        };
+                    }}
+                />
+        </Widget>
+    );
+};
+export default ObservedFauna;

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/Stats.jsx ADDED Viewed

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../src/index.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
+const Stats = ({
+    faunaSightings,
+    invasiveSpeciesSightings,
+    t = (s) => s
+}) => {
+    const faunaSightingsChange = useMemo(() => {
+        if (!faunaSightings) return null;
+        return calculateStatChange(
+            {
+                current: Number(faunaSightings.current) || 0,
+                previous: Number(faunaSightings.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [faunaSightings, t]);
+    const invasiveSpeciesSightingsChange = useMemo(() => {
+        if (!invasiveSpeciesSightings) return null;
+        return calculateStatChange(
+            {
+                current: Number(invasiveSpeciesSightings.current) || 0,
+                previous: Number(invasiveSpeciesSightings.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [invasiveSpeciesSightings, t]);
+    return (
+        <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Fauna Sightings")}
+                    value={faunaSightings ? Number(faunaSightings.current).toLocaleString() : "0"}
+                    icon="Fish"
+                    change={faunaSightingsChange}
+                />
+            </section>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Invasive Species Sightings")}
+                    value={invasiveSpeciesSightings ? Number(invasiveSpeciesSightings.current).toLocaleString() : "0"}
+                    icon="Ant"
+                    change={invasiveSpeciesSightingsChange}
+                />
+            </section>
+        </div>
+    );
+};
+export default Stats;

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/index.jsx ADDED Viewed

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import Stats from './Stats.jsx';
+import ObservedFauna from './ObservedFauna.jsx';
+import InvasiveSpecies from './InvasiveSpecies.jsx';
+const BiodiversityHabitat = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s,
+    options = {}
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign-summary",
+            url: `/summary/${id}/biodiversity-habitat`,
+            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 {
+        faunaSightings,
+        invasiveSpecies,
+        previousCycleFaunaSightings,
+        previousCycleInvasiveSpecies,
+        observedFauna
+    } = outcomesData || {};
+    const transformedFaunaSightings = useMemo(() => {
+        const current = Array.isArray(faunaSightings) && faunaSightings.length > 0
+            ? faunaSightings.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        const previous = Array.isArray(previousCycleFaunaSightings) && previousCycleFaunaSightings.length > 0
+            ? previousCycleFaunaSightings.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        return { current, previous };
+    }, [faunaSightings, previousCycleFaunaSightings]);
+    const transformedInvasiveSpecies = useMemo(() => {
+        const current = Array.isArray(invasiveSpecies) && invasiveSpecies.length > 0
+            ? invasiveSpecies.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        const previous = Array.isArray(previousCycleInvasiveSpecies) && previousCycleInvasiveSpecies.length > 0
+            ? previousCycleInvasiveSpecies.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        return { current, previous };
+    }, [invasiveSpecies, previousCycleInvasiveSpecies]);
+    return (
+        <section>
+            <Widget
+                title={t("Biodiversity & Habitat")}
+                loading={loading || outcomesLoading}
+                className="with-border-header h-w-btn-header"
+            >
+                <Stats
+                    faunaSightings={transformedFaunaSightings}
+                    invasiveSpeciesSightings={transformedInvasiveSpecies}
+                    t={t}
+                />
+                <div style={{ display: "flex", gap: "24px" }}>
+                    <section style={{ flex: 1 }}>
+                        <ObservedFauna
+                            observedFaunaChart={observedFauna}
+                            t={t}
+                            options={options}
+                        />
+                    </section>
+                        <InvasiveSpecies
+                            invasiveSpeciesChart={invasiveSpecies}
+                            t={t}
+                            options={options}
+                        />
+                </div>
+            </Widget>
+        </section>
+    );
+};
+export default BiodiversityHabitat;

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/KeyInformation/index.jsx CHANGED Viewed

@@ -7,8 +7,8 @@ const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }
     const defaultConfig = useMemo(
         () => ({
-            basepath: "events/monitoring-campaign",
-            url: `/summary/${id}/key-information`,
+            basepath: "events/monitoring-campaign-summary",
+            url: `/${id}/key-information`,
             stop: !id,
         }),
         [id],
@@ -16,10 +16,14 @@ const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }
     const customGetData = useMemo(() => {
         if (getSummaryDetail && id) {
-            return ({ url, params = {} }) => {
-                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+            return (rest) => {
+                const { url, filters: restFilters } = rest;
+                const match = url.match(/\/[^/]+\/(.+)/);
                 if (match) {
                     const [, type] = match;
+                    const params = {
+                        ...(restFilters || {}),
+                    };
                     return getSummaryDetail(id, type, params);
                 }
                 throw new Error(`Invalid URL format: ${url}`);

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/PlantedSpecies.jsx CHANGED Viewed

@@ -2,28 +2,40 @@ 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 COLORS = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
 const PlantedSpecies = ({
     plantedSpeciesChart,
-    t = (s) => s
+    t = (s) => s,
+    options = {}
 }) => {
+    const optionsMap = useMemo(() => {
+        if (!options || !Array.isArray(options)) return {};
+        return options.reduce((acc, option) => {
+            if (option?.value) {
+                acc[option.value] = option.label;
+            }
+            return acc;
+        }, {});
+    }, [options]);
     const pieData = useMemo(() => {
         const data = plantedSpeciesChart || [];
-        const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+        const total = data.reduce((sum, item) => sum + (Number(item?.count) || 0), 0);
         return data.map((item, index) => ({
-            value: Number(item?.value) || 0,
-            percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+            value: Number(item?.count) || 0,
+            percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
             color: COLORS[index % COLORS.length],
-            label: item?.type || '',
-            key: item?.type || `item-${index}`,
+            label: optionsMap[item?.name] || item?.name || '',
+            key: item?.name || `item-${index}`,
         }));
-    }, [plantedSpeciesChart]);
+    }, [plantedSpeciesChart, optionsMap]);
     const isEmpty = useMemo(() => {
         return !plantedSpeciesChart || plantedSpeciesChart.length === 0 ||
-               plantedSpeciesChart.every(item => !item?.value || Number(item.value) === 0);
+               plantedSpeciesChart.every(item => !item?.count || Number(item.count) === 0);
     }, [plantedSpeciesChart]);
     const getTooltipChildren = useCallback(

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/SeedlingsHeight.jsx CHANGED Viewed

@@ -1,10 +1,43 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+// Default height ranges to always display
+const DEFAULT_HEIGHT_RANGES = [
+    { value: '0-10', label: '0-10 cm' },
+    { value: '11-20', label: '11-20 cm' },
+    { value: '21-30', label: '21-30 cm' },
+    { value: '30+', label: '30+ cm' }
+];
 const SeedlingsHeight = ({
     seedlingsHeightChart,
     t = (s) => s
 }) => {
+    const chartData = useMemo(() => {
+        return mergeDefaultCategories(
+            seedlingsHeightChart,
+            DEFAULT_HEIGHT_RANGES,
+            'range',
+            'count',
+            'label',
+            'value'
+        );
+    }, [seedlingsHeightChart]);
+    const yAxisConfig = useMemo(() => {
+        return calculateNiceAxisConfig(
+            chartData,
+            'value',
+            2, // multiplier: double the max value
+            {
+                min: 0,
+                max: 20,
+                tickMethod: () => [0, 5, 10, 15, 20]
+            }
+        );
+    }, [chartData]);
     return (
         <Widget
             title={t("Seedlings Height")}
@@ -13,12 +46,13 @@ const SeedlingsHeight = ({
             <div className="flex flex-1 flex-column justify-content-center">
                 <div className="flex justify-content-center w-full">
                     <ColumnChart
-                        data={seedlingsHeightChart || []}
+                        data={chartData}
                         xFieldKey="label"
                         yFieldKey="value"
                         animated={true}
                         height={200}
                         color="#016C6E"
+                        yAxis={yAxisConfig}
                         renderTooltipContent={(title, data) => {
                             if (!data || data.length === 0) return {};
                             const item = data[0]?.data || data[0];

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/Stats.jsx CHANGED Viewed

@@ -56,7 +56,7 @@ const Stats = ({
                 <StatCard
                     title={t("Survival Rate")}
                     value={survivalRate ? Number(survivalRate.current).toLocaleString() : "0"}
-                    icon="EventCalendar"
+                    icon="TrendUp"
                     change={survivalRateChange}
                 />
             </section>
@@ -65,7 +65,7 @@ const Stats = ({
                 <StatCard
                     title={t("Average Height")}
                     value={averageHeight ? Number(averageHeight.current).toLocaleString() + " cm" : "0 cm"}
-                    icon="ProjectLocation"
+                    icon="SpacingHeight"
                     change={averageHeightChange}
                 />
             </section>
@@ -74,7 +74,7 @@ const Stats = ({
                 <StatCard
                     title={t("Average Diameter")}
                     value={averageDiameter ? Number(averageDiameter.current).toLocaleString() + " mm" : "0 mm"}
-                    icon="Activity"
+                    icon="Tree"
                     change={averageDiameterChange}
                 />
             </section>