datastake-daf 0.6.773 → 0.6.775

package/src/@daf/hooks/useTimeFilter.js

@@ -0,0 +1,56 @@
+import { useState, useMemo, useCallback } from 'react';
+import { getFormatDate, getTimeQuantity, processChartDateData, formatDateAxis } from '../utils/timeFilterUtils.js';
+
+/**
+ * Custom hook for time filtering functionality
+ * Provides state management and formatting functions for time-based charts
+ * 
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @returns {Object} Time filter state and utilities
+ */
+export const useTimeFilter = ({ defaultFilter = 'monthly' } = {}) => {
+    const [timeFilter, setTimeFilter] = useState(defaultFilter);
+
+    // Memoized format date function bound to current timeFilter
+    const getFormatDateFn = useCallback(
+        (date, breakLine = false) => getFormatDate(date, breakLine, timeFilter),
+        [timeFilter]
+    );
+
+    // Memoized time quantity function bound to current timeFilter
+    const getTimeQuantityFn = useCallback(
+        () => getTimeQuantity(timeFilter),
+        [timeFilter]
+    );
+
+    // Memoized date axis formatter
+    const formatDateAxisFn = useMemo(
+        () => (label) => formatDateAxis(label, getFormatDateFn),
+        [getFormatDateFn]
+    );
+
+    // Process chart data with current time filter
+    const processData = useCallback(
+        ({ mainData, filters = {}, isCumulative = false, valueField = 'total' }) => {
+            return processChartDateData({
+                mainData,
+                timeFilter,
+                filters,
+                isCumulative,
+                valueField,
+            });
+        },
+        [timeFilter]
+    );
+
+    return {
+        timeFilter,
+        setTimeFilter,
+        getFormatDate: getFormatDateFn,
+        getTimeQuantity: getTimeQuantityFn,
+        formatDateAxis: formatDateAxisFn,
+        processChartDateData: processData,
+    };
+};
+

package/src/@daf/hooks/useViewFormUrlParams.js

@@ -0,0 +1,84 @@
+import { useState, useEffect, useMemo } from "react";
+
+export const useViewFormUrlParams = ({
+    params,
+    pathname,
+    search,
+    searchParams,
+    setSearchParams,
+    push,
+}) => {
+    const [namespace, setNamespace] = useState(params.namespace);
+    const [id, setId] = useState(params.id);
+    const [group, setGroup] = useState(params.group);
+    const [subsection, setSubsection] = useState(params.subsection);
+    const [source, setSource] = useState(searchParams.get("source") || null);
+    const [version, setVersion] = useState(searchParams.get("version") || null);
+
+    useEffect(() => {
+        if (
+          (id && params.id !== id) ||
+          (namespace && namespace !== params.namespace)
+        ) {
+          setGroup(undefined);
+          setSubsection(undefined);
+        } else {
+          setGroup(params.group);
+          setSubsection(params.subsection);
+        }
+        setNamespace(params.namespace);
+        setId(params.id);
+    }, [params, id, namespace]);
+
+    useEffect(() => {
+        if (source && version) {
+            const newParams = new URLSearchParams(searchParams);
+            newParams.set("source", source);
+            newParams.set("version", version);
+            setSearchParams(newParams);
+        }
+	}, [source, version]);
+
+    const updateSourceAndVersion = (newSource, newVersion) => {
+        const newParams = new URLSearchParams(searchParams);
+        if (newSource && newVersion) {
+          newParams.set("source", newSource);
+          newParams.set("version", newVersion);
+        } else {
+          newParams.delete("source");
+          newParams.delete("version");
+        }
+        setSearchParams(newParams);
+        setSource(newSource);
+        setVersion(newVersion);
+      };
+    
+    const clearSourceAndVersion = () => {
+        updateSourceAndVersion(null, null);
+    };
+
+    const match = useMemo(
+		() => ({
+			params,
+			path: pathname,
+		}),
+		[params, pathname],
+	);
+    
+    return {
+        namespace,
+        id,
+        group,
+        subsection,
+        source,
+        version,
+        params,
+        searchParams,
+        setSource,
+        setVersion,
+        updateSourceAndVersion,
+        clearSourceAndVersion,
+        match,
+        search,
+      };
+}

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/AssociatedInformation/config.js

@@ -3,7 +3,7 @@ import { MoreMenu  , CustomIcon} from "../../../../../../../index";
 import { renderDateFormatted } from "../../../../../../../helpers/Forms";
 import { Avatar, Tag } from "antd";
 import { convertDMS } from "../../../../../../../helpers/Map";
-
+import { findOptions, capitalize } from "../../../../../../../helpers/StringHelper.js";
 const ACTIVITIES_TAB = 'activities';
 const PARTNERS_TAB = 'partners';
 const INCIDENTS_TAB = 'incidents';
@@ -17,6 +17,7 @@ export const getColumns = ({
     view,
     getRedirectLink,
     activeTab = ACTIVITIES_TAB,
+
 }) => {
     const renderActions = (record, viewType = 'activities') => {
         if (record.empty) {
@@ -163,7 +164,7 @@ export const getColumns = ({
                     if (all.empty) {
                         return <div className="daf-default-cell" />;
                     }
-                    return <Tooltip title={value}>{value?.toUpperCase().charAt(0) + value?.slice(1) || '-'}</Tooltip>;
+                    return <Tooltip title={value}>{capitalize(value) || '-'}</Tooltip>;
                 },
             },
             {
@@ -371,17 +372,10 @@ export const getColumns = ({
                     if (all.empty) {
                         return <div className="daf-default-cell" />;
                     }
-                    let country = '-';
-                    if (value) {
-                        country = value;
-                    } else if (all.country?.name) {
-                        country = all.country.name;
-                    } else if (all.location && typeof all.location === 'object' && all.location.country) {
-                        country = all.location.country;
-                    } else if (all.location && typeof all.location === 'object' && all.location.name) {
-                        country = all.location.name;
-                    }
-                    return <Tooltip title={country}>{country}</Tooltip>;
+
+                    const title = findOptions(value, selectOptions?.country || []) || '-';
+
+                    return <Tooltip title={title}>{title}</Tooltip>
                 },
             },
             {

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/AssociatedInformation/index.jsx

@@ -45,6 +45,7 @@ const AssociatedInformation = ({
     endpoint = "associated-information",
     tabsConfig = TABS_CONFIG,
     searchFieldsMap = getSearchFields,
+    selectOptions,
     t = (s) => s
 }) => {
     const [activeTab, setActiveTab] = useState(ACTIVITIES_TAB);
@@ -104,7 +105,8 @@ const AssociatedInformation = ({
         projectId,
         navigate,
         getRedirectLink,
-    }), [t, activeTab, projectId, navigate]);
+        selectOptions,
+    }), [t, activeTab, projectId, navigate, selectOptions]);
 
     const tableDataSource = useMemo(() => 
         ensureArray(associatedInformationData), 

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/JobsTimeline/index.jsx

@@ -1,118 +1,38 @@
 import React, { useMemo } from 'react';
-import dayjs from 'dayjs';
 import { Widget, ColumnChart } from '../../../../../../../../index.js';
+import { Select } from 'antd';
+import { useTimeFilter } from '../../../../../../../hooks/useTimeFilter.js';
+
+const selectOptions = [
+    { label: "Daily", value: "daily" },
+    { label: "Weekly", value: "weekly" },
+    { label: "Monthly", value: "monthly" },
+];
 
 const JobsTimeline = ({
     dayJobsTimeline,
     loading = false,
     t = (s) => s
 }) => {
+    const { timeFilter, setTimeFilter, formatDateAxis, processChartDateData } = useTimeFilter({ defaultFilter: 'monthly' });
 
     const jobsData = Array.isArray(dayJobsTimeline) 
         ? dayJobsTimeline 
         : (dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || []);
 
-    const formatDateAxis = useMemo(() => {
-        return (label) => {
-            if (!label) return label;
-            
-            // Try to parse the date using dayjs with various formats
-            let date = dayjs(label);
-            
-            // If first attempt fails, try parsing as ISO date string
-            if (!date.isValid() && typeof label === 'string') {
-                date = dayjs(label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY'], true);
-            }
-            
-            // If it's a valid date, format it as "Mmm YY"
-            if (date.isValid()) {
-                return date.format('MMM YY');
-            }
-            
-            // If it's already in "Mmm YY" format or similar, return as is
-            // Otherwise return the original label
-            return label;
-        };
-    }, []);
-
     const jobsTimelineData = useMemo(() => {
-        // Always show last 12 months, even if no data
-        const now = dayjs().startOf('month');
-        const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-        
-        // Create a map of existing data by month (YYYY-MM format)
-        const dataMap = new Map();
-        const dates = [];
-        
-        // Process jobs data if available
-        if (jobsData && Array.isArray(jobsData) && jobsData.length > 0) {
-            jobsData.forEach((item) => {
-                if (typeof item === 'object' && item !== null && item.date) {
-                    const date = dayjs(item.date);
-                    if (date.isValid()) {
-                        const monthKey = date.format('YYYY-MM');
-                        const count = Number(item.total || item.count || item.jobs || item.value || 0) || 0;
-                        dates.push(date);
-                        
-                        // If multiple entries for same month, sum them
-                        if (dataMap.has(monthKey)) {
-                            dataMap.set(monthKey, {
-                                ...dataMap.get(monthKey),
-                                jobs: dataMap.get(monthKey).jobs + count,
-                            });
-                        } else {
-                            dataMap.set(monthKey, {
-                                month: item.date,
-                                jobs: count,
-                                date: item.date,
-                            });
-                        }
-                    }
-                }
-            });
+        if (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) {
+            return [];
         }
-        
-        // Determine date range
-        let minDate = twelveMonthsAgo;
-        let maxDate = now;
-        
-        // If we have data, adjust range to include it
-        if (dates.length > 0) {
-            const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-            const firstDataDate = sortedDates[0].startOf('month');
-            const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-            
-            // Start from the earlier of: 12 months ago, or first data date
-            minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-            
-            // End at the later of: current month, or last data date
-            maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
-        }
-        
-        // Generate all months in the range
-        const result = [];
-        let currentDate = minDate.clone();
-        
-        while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-            const monthKey = currentDate.format('YYYY-MM');
-            const existingData = dataMap.get(monthKey);
-            
-            if (existingData) {
-                result.push(existingData);
-            } else {
-                // Fill missing month with 0
-                result.push({
-                    month: currentDate.format('YYYY-MM-DD'), // Use first day of month
-                    jobs: 0,
-                    date: currentDate.format('YYYY-MM-DD'),
-                });
-            }
-            
-            currentDate = currentDate.add(1, 'month');
-        }
-        
-        return result;
-    }, [jobsData]);
+
+        // Process data without cumulative calculation (for jobs timeline)
+        // Try to find value in total, count, jobs, or value fields
+        return processChartDateData({
+            mainData: jobsData,
+            isCumulative: false,
+            valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
+        });
+    }, [jobsData, processChartDateData]);
 
     const maxYValue = useMemo(() => {
         if (!jobsTimelineData || jobsTimelineData.length === 0) {
@@ -131,10 +51,22 @@ const JobsTimeline = ({
         <Widget
             title={<div>{t("Day Jobs Timeline")}</div>}
             className="with-border-header h-w-btn-header "
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <Select
+                        value={timeFilter}
+                        style={{ width: 100 }}
+                        onChange={(value) => setTimeFilter(value)}
+                        options={selectOptions}
+                        popupMatchSelectWidth={120}
+                    />
+                </>
+            }
         >
             <ColumnChart
                 data={jobsTimelineData}
-                xFieldKey="month"
+                xFieldKey="date"
                 yFieldKey="jobs"
                 animated={true}
                 // height={200}

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleIndicators/HealthAndSafety/helper.js

@@ -1,6 +1,6 @@
 const HEALTH_SAFETY_COLORS = {
-    compliant: '#52C41A',
-    notCompliant: '#FF4D4F',
+    compliant: '#016C6E',
+    notCompliant: '#F97066',
     empty: '#D9D9D9',
 };
 
@@ -61,8 +61,9 @@ export const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData,
     const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
 
     const labels = {
-        compliant: t("Compliant"),
-        notCompliant: t("Not Compliant"),
+        compliant: t("Available"),
+        notCompliant: t("Not available"),
+        empty: t("Not answered"),
     };
 
     return Object.keys(healthAndSafetyDistributionData).map((key) => {
@@ -103,8 +104,9 @@ export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafety
     }
     
     const labels = {
-        compliant: t("Compliant"),
-        notCompliant: t("Not Compliant"),
+        compliant: t("Available"),
+        notCompliant: t("Not available"),
+        empty: t("Not answered"),
     };
 
     // Filter items with values > 0

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleIndicators/HealthAndSafety/index.jsx

@@ -2,13 +2,83 @@ import React, { useMemo, useCallback } from 'react';
 import { Widget, PieChart } from '../../../../../../../../index.js';
 import { getHealthAndSafetyDistributionData, isHealthAndSafetyDistributionEmpty, calculateHealthAndSafetyPieData, getHealthAndSafetyTooltipChildren } from './helper';
 import { renderTooltipJsx } from '../../../../../../../../utils';
+import { useWidgetFetch } from '../../../../../../../hooks/useWidgetFetch.js';
 
 const HealthAndSafety = ({ 
-    activityData, 
+    id,
+    getSummaryDetail,
     loading = false, 
     t = (s) => s 
 }) => {
-    const healthAndSafetyDistributionData = useMemo(() => getHealthAndSafetyDistributionData(activityData), [activityData]);
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/filtered-piechart`,
+            filters: { field: 'duosFormed' },
+            stop: !id,
+        }),
+        [id],
+    );
+
+    const customGetData = useMemo(() => {
+        if (getSummaryDetail && id) {
+            return (rest) => {
+                const { url, filters: restFilters } = rest;
+                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+                if (match) {
+                    const [, type] = match;
+                    // Pass filters as params for the query string
+                    const params = {
+                        ...(restFilters || {}),
+                    };
+                    return getSummaryDetail(id, type, params);
+                }
+                throw new Error(`Invalid URL format: ${url}`);
+            };
+        }
+        return undefined;
+    }, [getSummaryDetail, id]);
+
+    const { loading: pieChartLoading, data: pieChartData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    // Process the fetched pie chart data
+    // The API returns data in format: [{count: 1, duosFormed: "null"}, {count: 1, duosFormed: "no"}, {count: 1, duosFormed: "yes"}]
+    const healthAndSafetyDistributionData = useMemo(() => {
+        if (!pieChartData) return { compliant: 0, notCompliant: 0, empty: 0 };
+        
+        // If it's already a distribution object
+        if (pieChartData.compliant !== undefined || pieChartData.notCompliant !== undefined) {
+            return pieChartData;
+        }
+        
+        // If it's an array, process it
+        if (Array.isArray(pieChartData)) {
+            const distribution = { compliant: 0, notCompliant: 0, empty: 0 };
+            
+            pieChartData.forEach(item => {
+                const duosFormedValue = item.duosFormed;
+                const count = item.count || 0;
+                
+                // Map duosFormed values to distribution categories
+                if (duosFormedValue === "yes" || duosFormedValue === true) {
+                    distribution.compliant += count;
+                } else if (duosFormedValue === "no" || duosFormedValue === false) {
+                    distribution.notCompliant += count;
+                } else if (duosFormedValue === "null" || duosFormedValue === null || duosFormedValue === undefined) {
+                    distribution.empty += count;
+                }
+            });
+            
+            return distribution;
+        }
+        
+        // Fallback: try to extract from activityData-like structure
+        return getHealthAndSafetyDistributionData(pieChartData);
+    }, [pieChartData]);
+
     const isEmpty = useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
     const pieData = useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
 
@@ -19,7 +89,7 @@ const HealthAndSafety = ({
 
     return (
         <Widget
-            loading={loading}
+            loading={loading || pieChartLoading}
             title={<div>{t("Health and Safety")}</div>}
             className="with-border-header h-w-btn-header "
         >
@@ -46,4 +116,3 @@ const HealthAndSafety = ({
 };
 
 export default HealthAndSafety;
-

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleIndicators/index.jsx

@@ -100,7 +100,7 @@ const CycleIndicators = ({
                         <CyclePartners cyclePartners={cyclePartners} loading={indicatorsLoading} t={t} />
                     </section>
                     <section style={{ flex: 1 }}>
-                        <HealthAndSafety activityData={indicatorsData} loading={indicatorsLoading} t={t} />
+                        <HealthAndSafety id={id} getSummaryDetail={getSummaryDetail} loading={indicatorsLoading} t={t} />
                     </section>
                 </div>
             </Widget>

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleOutcomes/PlantingActivitiesTimeline.jsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+import { Select } from 'antd';
+import { useTimeFilter } from '../../../../../../hooks/useTimeFilter.js';
+
+const selectOptions = [
+    { label: "Daily", value: "daily" },
+    { label: "Weekly", value: "weekly" },
+    { label: "Monthly", value: "monthly" },
+];
+
+const PlantingActivitiesTimeline = ({
+    activitiesTimelineChart,
+    t = (s) => s
+}) => {
+    const { timeFilter, setTimeFilter, formatDateAxis, processChartDateData } = useTimeFilter({ defaultFilter: 'monthly' });
+
+    // Map activitiesTimelineChart data to ColumnChart format with time filter support
+    // Data structure: [{count: 2, date: "2025-11-03"}]
+    // Fill all periods in the range, even if empty
+    const activitiesTimelineData = useMemo(() => {
+        if (!activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0) {
+            return [];
+        }
+
+        // Process data without cumulative calculation (for activities timeline)
+        return processChartDateData({
+            mainData: activitiesTimelineChart,
+            isCumulative: false,
+            valueField: 'count',
+        });
+    }, [activitiesTimelineChart, processChartDateData]);
+
+    // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+    const maxActivitiesYValue = useMemo(() => {
+        if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
+            return 100;
+        }
+        const maxValue = Math.max(...activitiesTimelineData.map(item => item.jobs || 0));
+        // If max is 0, set default to 100 to show Y-axis
+        if (maxValue === 0) {
+            return 100;
+        }
+        // Round up to nearest 10, but ensure minimum of 100
+        const roundedMax = Math.ceil(maxValue / 10) * 10;
+        return Math.max(100, roundedMax);
+    }, [activitiesTimelineData]);
+
+    return (
+        <Widget
+            title={t("Planting Activities Timeline")}
+            className="with-border-header h-w-btn-header"
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <Select
+                        value={timeFilter}
+                        style={{ width: 100 }}
+                        onChange={(value) => setTimeFilter(value)}
+                        options={selectOptions}
+                        popupMatchSelectWidth={120}
+                    />
+                </>
+            }
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <ColumnChart
+                        data={activitiesTimelineData}
+                        xFieldKey="date"
+                        yFieldKey="jobs"
+                        animated={true}
+                        height={400}
+                        color="#016C6E"
+                        renderTooltipContent={(title, data) => {
+                            if (!data || data.length === 0) return {};
+                            // For ColumnChart, data structure: data[0]?.data contains the actual data point
+                            const item = data[0]?.data || data[0];
+                            const count = item?.jobs || item?.value || 0;
+                            // Title is the X-axis value (month/date), use it for formatting
+                            const dateValue = item?.date || title || '';
+                            
+                            return {
+                                title: t("Planting Activities"),
+                                subTitle: formatDateAxis(dateValue),
+                                items: [
+                                    {
+                                        label: t("Total"),
+                                        value: count,
+                                    },
+                                ],
+                            };
+                        }}
+                        formattedXAxis={formatDateAxis}
+                        formattedYAxis={(value) => {
+                            return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`);
+                        }}
+                        yAxis={{
+                            min: 0,
+                            max: maxActivitiesYValue,
+                            tickMethod: () => {
+                                // Generate ticks: for 100 max, show 0, 20, 40, 60, 80, 100
+                                // For other values, show ticks every 20 units
+                                const step = maxActivitiesYValue <= 100 ? 20 : Math.max(20, Math.floor(maxActivitiesYValue / 5));
+                                const ticks = [];
+                                for (let i = 0; i <= maxActivitiesYValue; i += step) {
+                                    ticks.push(i);
+                                }
+                                // Ensure max value is included
+                                if (ticks.length === 0 || ticks[ticks.length - 1] < maxActivitiesYValue) {
+                                    ticks.push(maxActivitiesYValue);
+                                }
+                                return ticks;
+                            },
+                            label: {
+                                style: {
+                                    fontSize: 12,
+                                    fill: '#666',
+                                },
+                            },
+                            grid: {
+                                line: {
+                                    style: {
+                                        stroke: '#E5E7EB',
+                                        lineWidth: 1,
+                                    },
+                                },
+                            },
+                        }}
+                        xAxis={{
+                            label: {
+                                formatter: formatDateAxis, 
+                                autoHide: true,
+                                style: {
+                                    fontSize: 12,
+                                    fill: '#666',
+                                },
+                            },
+                        }}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default PlantingActivitiesTimeline;
+