datastake-daf 0.6.783 → 0.6.785

package/src/@daf/pages/Stakeholders/Workers/config.js

@@ -3,7 +3,7 @@ export const getFiltersConfig = ({t}) => {
 		country: {
 		  type: 'select',
 		  label: 'Country',
-		  placeholder: (t) => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+		  placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		  getLabel: (option) => option.label,
@@ -27,7 +27,7 @@ export const getFiltersConfig = ({t}) => {
 	  
 			return t('Province');
 		  },
-		  placeholder: (t) => `${t('Filter by')} ${t('Province').toLowerCase()}`,
+		  placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
 		  filters: (data) => ({
 			country: data.country,
 			level: 'level_1',
@@ -59,7 +59,7 @@ export const getFiltersConfig = ({t}) => {
 			return t('Province');
 		  },
 		  show: (data) => !(data.country && data.administrativeLevel1),
-		  placeholder: (t) => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
+		  placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
 		  filters: (data) => ({
 			country: data.country,
 			level: 'level_2',
@@ -75,31 +75,16 @@ export const getFiltersConfig = ({t}) => {
 		activity: {
 		  type: 'select',
 		  label: 'Activity',
-		  placeholder: (t) => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
+		  placeholder: () => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		  getLabel: (option) => option.label,
 		  getValue: (option) => option.value,
-		  filterOptions: (val) => {
-			if (val) {
-			  const { option, filters } = val
-			  if (filters && option) {
-				const { filters: optionFilters } = option;
-				if (Array.isArray(optionFilters) && optionFilters.length) {
-				  const { value, condition } = optionFilters[0];
-				  if (condition === 'includes') {
-					return value.includes('corporation');
-				  }
-				}
-			  }
-			}
-			return true;
-		  },
 		},
 		positionInTheMineralSupplyChain: {
 		  type: 'select',
 		  label: 'Position',
-		  placeholder: (t) => `${t('Filter by')} ${t('Position').toLowerCase()}`,
+		  placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		  getLabel: (option) => option.label,
@@ -108,7 +93,7 @@ export const getFiltersConfig = ({t}) => {
 		status: {
 		  type: "select",
 		  label: "Status",
-		  placeholder: (t) => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+		  placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { fley: 1 },
 		  getLabel: (option) => option.label,
@@ -136,11 +121,11 @@ export const getFilterOptions = (options, t) => {
 		status: [
 			{
 				value: "submitted",
-				label: "Submitted",
+				label: t("Submitted"),
 			},
 			{
 				value: "private",
-				label: "Private",
+				label: t("Private"),
 			},
 		],
 		category: stakeholderCategoryOptions || categoryOptions,

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

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { KeyIndicators } from '../../../../../../../../src/index.js';
+import { getKeyIndicatorsRowConfig } from '../../config';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+
+const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }) => {
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign",
+            url: `/summary/${id}/key-information`,
+            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: keyInformationLoading, data: keyInformationData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: keyInformationData }), [t, keyInformationData]);
+    return (
+        <section>
+            <KeyIndicators
+                title={t("Key Information")}
+                config={keyIndicatorsConfig}
+                loading={loading || keyInformationLoading}
+            />
+        </section>
+    );
+};
+
+export default KeyInformation;
+

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

@@ -0,0 +1,73 @@
+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 PlantedSpecies = ({
+    plantedSpeciesChart,
+    t = (s) => s
+}) => {
+    const pieData = useMemo(() => {
+        const data = plantedSpeciesChart || [];
+        const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+
+        return data.map((item, index) => ({
+            value: Number(item?.value) || 0,
+            percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+            color: COLORS[index % COLORS.length],
+            label: item?.type || '',
+            key: item?.type || `item-${index}`,
+        }));
+    }, [plantedSpeciesChart]);
+
+    const isEmpty = useMemo(() => {
+        return !plantedSpeciesChart || plantedSpeciesChart.length === 0 || 
+               plantedSpeciesChart.every(item => !item?.value || Number(item.value) === 0);
+    }, [plantedSpeciesChart]);
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            return renderTooltipJsx({
+                title: t("Planted Species"),
+                items: [
+                    {
+                        color: item.color,
+                        label: item.label || '',
+                        value: item.value || 0,
+                    },
+                ],
+            });
+        },
+        [t, isEmpty]
+    );
+
+    return (
+        <Widget
+            title={t("Planted Species")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default PlantedSpecies;
+

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+
+const SeedlingsHeight = ({
+    seedlingsHeightChart,
+    t = (s) => s
+}) => {
+    return (
+        <Widget
+            title={t("Seedlings Height")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <ColumnChart
+                        data={seedlingsHeightChart || []}
+                        xFieldKey="label"
+                        yFieldKey="value"
+                        animated={true}
+                        height={200}
+                        color="#016C6E"
+                        renderTooltipContent={(title, data) => {
+                            if (!data || data.length === 0) return {};
+                            const item = data[0]?.data || data[0];
+                            return {
+                                title: t("Seedlings Height"),
+                                subTitle: title,
+                                items: [
+                                    {
+                                        label: t("Count"),
+                                        value: item?.value || 0,
+                                    },
+                                ],
+                            };
+                        }}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default SeedlingsHeight;
+

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

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../src/index.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
+
+const Stats = ({
+    survivalRate,
+    averageHeight,
+    averageDiameter,
+    t = (s) => s
+}) => {
+    const survivalRateChange = useMemo(() => {
+        if (!survivalRate) return null;
+        return calculateStatChange(
+            {
+                current: Number(survivalRate.current) || 0,
+                previous: Number(survivalRate.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [survivalRate, t]);
+
+    const averageHeightChange = useMemo(() => {
+        if (!averageHeight) return null;
+        return calculateStatChange(
+            {
+                current: Number(averageHeight.current) || 0,
+                previous: Number(averageHeight.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [averageHeight, t]);
+
+    const averageDiameterChange = useMemo(() => {
+        if (!averageDiameter) return null;
+        return calculateStatChange(
+            {
+                current: Number(averageDiameter.current) || 0,
+                previous: Number(averageDiameter.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [averageDiameter, t]);
+
+    return (
+        <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Survival Rate")}
+                    value={survivalRate ? Number(survivalRate.current).toLocaleString() : "0"}
+                    icon="EventCalendar"
+                    change={survivalRateChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Average Height")}
+                    value={averageHeight ? Number(averageHeight.current).toLocaleString() + " cm" : "0 cm"}
+                    icon="ProjectLocation"
+                    change={averageHeightChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Average Diameter")}
+                    value={averageDiameter ? Number(averageDiameter.current).toLocaleString() + " mm" : "0 mm"}
+                    icon="Activity"
+                    change={averageDiameterChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default Stats;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/VegetationHealth.jsx

@@ -0,0 +1,73 @@
+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 VegetationHealth = ({
+    vegetationHealthChart,
+    t = (s) => s
+}) => {
+    const pieData = useMemo(() => {
+        const data = vegetationHealthChart || [];
+        const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+
+        return data.map((item, index) => ({
+            value: Number(item?.value) || 0,
+            percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+            color: COLORS[index % COLORS.length],
+            label: item?.type || '',
+            key: item?.type || `item-${index}`,
+        }));
+    }, [vegetationHealthChart]);
+
+    const isEmpty = useMemo(() => {
+        return !vegetationHealthChart || vegetationHealthChart.length === 0 || 
+               vegetationHealthChart.every(item => !item?.value || Number(item.value) === 0);
+    }, [vegetationHealthChart]);
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            return renderTooltipJsx({
+                title: t("Vegetation Health"),
+                items: [
+                    {
+                        color: item.color,
+                        label: item.label || '',
+                        value: `${item.value || 0}%`,
+                    },
+                ],
+            });
+        },
+        [t, isEmpty]
+    );
+
+    return (
+        <Widget
+            title={t("Vegetation Health")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default VegetationHealth;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/index.jsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import VegetationHealth from './VegetationHealth.jsx';
+import SeedlingsHeight from './SeedlingsHeight.jsx';
+import PlantedSpecies from './PlantedSpecies.jsx';
+import Stats from './Stats.jsx';
+
+const MangroveGrowth = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign",
+            url: `/summary/${id}/outcomes`,
+            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 {
+        survivalRate,
+        averageHeight,
+        averageDiameter,
+        vegetationHealthChart,
+        seedlingsHeightChart,
+        plantedSpeciesChart
+    } = outcomesData || {};
+
+    return (
+        <section>
+            <Widget
+                title={t("Mangrove Growth")}
+                loading={loading || outcomesLoading}
+                className="with-border-header h-w-btn-header"
+            >
+                <Stats
+                    survivalRate={survivalRate}
+                    averageHeight={averageHeight}
+                    averageDiameter={averageDiameter}
+                    t={t}
+                />
+
+                <div style={{ display: "flex", gap: "24px" }}>
+                    <section style={{ flex: 1 }}>
+                        <VegetationHealth
+                            vegetationHealthChart={vegetationHealthChart}
+                            t={t}
+                        />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <SeedlingsHeight
+                            seedlingsHeightChart={seedlingsHeightChart}
+                            t={t}
+                        />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <PlantedSpecies
+                            plantedSpeciesChart={plantedSpeciesChart}
+                            t={t}
+                        />
+                    </section>
+                </div>
+            </Widget>
+        </section>
+    );
+};
+
+export default MangroveGrowth;
+