datastake-daf 0.6.774 → 0.6.775

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

@@ -1,40 +1,153 @@
-import React, { useState } from 'react';
-import { Widget } from '../../../../../../../../src/index.js';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Widget, StickyTable, SearchFilters } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { getColumns } from './config.js';
+import { getRedirectLink } from '../../../../../../../utils.js';
 
-const ACTIVITIES_TAB = 'activities';
-const PARTNERS_TAB = 'partners';
-const INCIDENTS_TAB = 'incidents';
+// Constants
+export const ACTIVITIES_TAB = 'activities';
+export const PARTNERS_TAB = 'partners';
+export const INCIDENTS_TAB = 'incidents';
 
+export const DEFAULT_SEARCH_FIELDS = ["name", "datastakeId"];
+const URL_PATTERN = /\/summary\/[^/]+\/(.+)/;
 
-const AssociatedInformation = ({ 
-    activityData, 
-    loading = false, 
-    t = (s) => s 
+// Configuration
+export const TABS_CONFIG = [
+    { label: "straatos::activities", value: ACTIVITIES_TAB },
+    { label: "straatos::partners", value: PARTNERS_TAB },
+    { label: "straatos::incidents", value: INCIDENTS_TAB, disabled: true },
+];
+
+// Helper functions
+export const getSearchFields = (activeTab) => DEFAULT_SEARCH_FIELDS;
+
+export const buildSearchFilter = (search, fields) => 
+    search ? { search: { qs: search, fields } } : {};
+
+export const extractTypeFromUrl = (url) => {
+    const match = url.match(URL_PATTERN);
+    if (!match) {
+        throw new Error(`Invalid URL format: ${url}`);
+    }
+    return match[1];
+};
+
+export const ensureArray = (data) => Array.isArray(data) ? data : [];
+
+const AssociatedInformation = ({
+    id,
+    navigate,
+    getSummaryDetail,
+    loading = false,
+    projectId,
+    basepath = "planting-cycle",
+    endpoint = "associated-information",
+    tabsConfig = TABS_CONFIG,
+    searchFieldsMap = getSearchFields,
+    selectOptions,
+    t = (s) => s
 }) => {
     const [activeTab, setActiveTab] = useState(ACTIVITIES_TAB);
+    const [search, setSearch] = useState('');
+    
+    const searchFields = useMemo(() => searchFieldsMap(activeTab), [activeTab, searchFieldsMap]);
+    
+    const filters = useMemo(() => ({
+        type: activeTab,
+        ...buildSearchFilter(search, searchFields)
+    }), [activeTab, search, searchFields]);
+
+    const defaultConfig = useMemo(() => ({
+        basepath,
+        url: `/summary/${id}/${endpoint}`,
+        filters,
+        stop: !id,
+    }), [id, filters, basepath, endpoint]);
+
+    const customGetData = useMemo(() => {
+        if (!getSummaryDetail || !id) return undefined;
+        
+        return (rest) => {
+            const { url, filters: restFilters } = rest;
+            const type = extractTypeFromUrl(url);
+            const params = {
+                ...(restFilters || {}),
+                type: restFilters?.type || activeTab
+            };
+            return getSummaryDetail(id, type, params);
+        };
+    }, [getSummaryDetail, id, activeTab]);
+
+    const { loading: associatedInformationLoading, data: associatedInformationData, setData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    // Reset data and search when tab changes
+    useEffect(() => {
+        setData([]);
+        setSearch('');
+    }, [activeTab, setData]);
+
+    const handleSearch = useCallback((activeFilter, searchValue) => {
+        setSearch(searchValue || '');
+    }, []);
+
+    const handleTabChange = useCallback((value) => {
+        setActiveTab(value);
+    }, []);
+
+    const columns = useMemo(() => getColumns({
+        t,
+        activeTab,
+        view: activeTab,
+        projectId,
+        navigate,
+        getRedirectLink,
+        selectOptions,
+    }), [t, activeTab, projectId, navigate, selectOptions]);
+
+    const tableDataSource = useMemo(() => 
+        ensureArray(associatedInformationData), 
+        [associatedInformationData]
+    );
+
+    const translatedTabs = useMemo(() => 
+        tabsConfig.map(tab => ({ ...tab, label: t(tab.label) })),
+        [tabsConfig, t]
+    );
 
     return (
         <section>
-
-              <Widget 
-                className="v2-widget no-px h-w-btn-header no-p-body"
+            <Widget
+                className="v2-widget no-px no-p-body h-w-btn-header with-border-header"
                 title={t("Associated Information")}
                 tabsConfig={{
-                    tabs: [
-                        { label: t("straatos::activities"), value: ACTIVITIES_TAB },
-                        { label: t("straatos::partners"), value: PARTNERS_TAB },
-                        { label: t("straatos::incidents"), value: INCIDENTS_TAB },
-                    ],
+                    tabs: translatedTabs,
                     value: activeTab,
-                    onChange: (value) => {
-                        setActiveTab(value);
-                        // setData([]);
-                    },
+                    onChange: handleTabChange,
                 }}
             >
-            <div>
-            </div>
-        </Widget>
+                <div className='mt-6 ml-6 mr-6'>
+                    <SearchFilters
+                        t={t}
+                        showFilter={false}
+                        hasError={false}
+                        canClear={true}
+                        setHasError={() => {}}
+                        onSearch={handleSearch}
+                        activeFilters={{ search }}
+                    />
+                </div>
+                <div className='mb-6'>
+                    <StickyTable
+                        columns={columns}
+                        dataSource={tableDataSource}
+                        loading={associatedInformationLoading || loading}
+                    />
+                </div>
+            </Widget>
         </section>
     );
 };

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

@@ -1,119 +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' });
 
-    console.log('dayJobsTimeline', dayJobsTimeline);
     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) {
@@ -132,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;
+