datastake-daf 0.6.776 → 0.6.778

package/dist/pages/index.js

@@ -5322,7 +5322,7 @@ const getMetaPlaceholer = (inputMeta, t) => inputMeta.notApplicable ? t("Not app
  * @param {string} [filterCond=null] - Filter condition.
  * @returns {Object[]} - Filtered options.
  */
-function filterOptions(options, filters, formsValue = {}, repeatValues = {}, filterCond = null) {
+function filterOptions$1(options, filters, formsValue = {}, repeatValues = {}, filterCond = null) {
   const isOrCond = filterCond !== "and";
   const objFilter = {};
   filters.forEach(f => {
@@ -27265,7 +27265,7 @@ const inputTypeComponent = {
     opts = JSON.parse(JSON.stringify(opts));
     opts = opts.map(o => getSelectOptions(o, formsValue));
     if (optionsFilter && Array.isArray(optionsFilter)) {
-      opts = filterOptions(opts, optionsFilter, formsValue, repeatValues, filterCond);
+      opts = filterOptions$1(opts, optionsFilter, formsValue, repeatValues, filterCond);
     }
     if (propHasValue(value)) {
       const selectOption = opts.find(o => o.value === value);
@@ -27384,7 +27384,7 @@ const inputTypeComponent = {
     opts = JSON.parse(JSON.stringify(opts));
     opts = opts.map(o => getSelectOptions(o, formsValue));
     if (optionsFilter && Array.isArray(optionsFilter)) {
-      opts = filterOptions(opts, optionsFilter, formsValue, repeatValues, filterCond);
+      opts = filterOptions$1(opts, optionsFilter, formsValue, repeatValues, filterCond);
     }
     if (propHasValue(value) && Array.isArray(value) && value.length > 0 && !tags) {
       try {
@@ -42957,11 +42957,9 @@ const processChartDateData = ({
   isCumulative = false,
   valueField = 'total'
 }) => {
-  if (!mainData || !Array.isArray(mainData) || mainData.length === 0) {
-    return [];
-  }
   const timeQuantity = getTimeQuantity(filter);
-  const dates = mainData;
+  const dates = mainData || [];
+  const isEmpty = !mainData || !Array.isArray(mainData) || mainData.length === 0;
   const _data = [];
   let end = filters?.timeframe?.endDate || dayjs__default["default"]();
   let start = filters?.timeframe?.startDate || dayjs__default["default"]().add(-12, timeQuantity);
@@ -42993,7 +42991,7 @@ const processChartDateData = ({
   let currentDate = start.clone();
   while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
     // Filter data points that fall within this period
-    const score = dates.filter(d => {
+    const score = isEmpty ? 0 : dates.filter(d => {
       if (!d.date) return false;
       switch (filter) {
         case "daily":
@@ -43139,19 +43137,12 @@ const RestoredArea = ({
   } = useTimeFilter({
     defaultFilter: 'monthly'
   });
-
-  // Map restoredAreaChart data to LineChart format with time filter support
-  // Y-axis: total/cumulated value
-  // X-axis: date (formatted based on timeFilter)
-  // Fill all periods in the range, even if empty
   const restoredAreaChartData = React.useMemo(() => {
-    if (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0) {
-      return [];
-    }
+    const dataToProcess = !restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0 ? [] : restoredAreaChart;
 
     // Process data with cumulative calculation (for restored area)
     return processChartDateData({
-      mainData: restoredAreaChart,
+      mainData: dataToProcess,
       isCumulative: true,
       valueField: 'total'
     });
@@ -43289,18 +43280,12 @@ const PlantingActivitiesTimeline = ({
   } = 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 = React.useMemo(() => {
-    if (!activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0) {
-      return [];
-    }
+    const dataToProcess = !activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0 ? [] : activitiesTimelineChart;
 
     // Process data without cumulative calculation (for activities timeline)
     return processChartDateData({
-      mainData: activitiesTimelineChart,
+      mainData: dataToProcess,
       isCumulative: false,
       valueField: 'count'
     });
@@ -43746,9 +43731,10 @@ const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData, t) =>
  * @param {Object} healthAndSafetyDistributionData - Distribution object
  * @param {Function} t - Translation function
  * @param {Function} renderTooltipJsx - Function to render tooltip JSX
+ * @param {string} tooltipTitle - Title to display in the tooltip (defaults to "Health and Safety")
  * @returns {JSX.Element|null} Tooltip content or null
  */
-const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx) => {
+const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety") => {
   // If empty or no data, return null to display nothing
   if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
     return null;
@@ -43785,25 +43771,39 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
 
   // Show all items with their percentages
   return renderTooltipJsx({
-    title: t("Health and Safety"),
+    title: t(tooltipTitle),
     items: itemsWithData
   });
 };
 
+const filterOptions = [{
+  value: 'aidKitAccessible',
+  label: 'Aid kit availability'
+}, {
+  value: 'hsTrainingConfirmation',
+  label: 'H&S training delivery'
+}, {
+  value: 'duosFormed',
+  label: 'Workers safe pairing'
+}, {
+  value: 'presenceOfChildren',
+  label: 'No children'
+}];
 const HealthAndSafety = ({
   id,
   getSummaryDetail,
   loading = false,
   t = s => s
 }) => {
+  const [selectedField, setSelectedField] = React.useState('aidKitAccessible');
   const defaultConfig = React.useMemo(() => ({
     basepath: "planting-cycle",
     url: `/summary/${id}/filtered-piechart`,
     filters: {
-      field: 'duosFormed'
+      field: selectedField
     },
     stop: !id
-  }), [id]);
+  }), [id, selectedField]);
   const customGetData = React.useMemo(() => {
     if (getSummaryDetail && id) {
       return rest => {
@@ -43834,7 +43834,7 @@ const HealthAndSafety = ({
   });
 
   // Process the fetched pie chart data
-  // The API returns data in format: [{count: 1, duosFormed: "null"}, {count: 1, duosFormed: "no"}, {count: 1, duosFormed: "yes"}]
+  // The API returns data in format: [{count: 1, [field]: "null"}, {count: 1, [field]: "no"}, {count: 1, [field]: "yes"}]
   const healthAndSafetyDistributionData = React.useMemo(() => {
     if (!pieChartData) return {
       compliant: 0,
@@ -43847,7 +43847,7 @@ const HealthAndSafety = ({
       return pieChartData;
     }
 
-    // If it's an array, process it
+    // If it's an array, process it using the selected field
     if (Array.isArray(pieChartData)) {
       const distribution = {
         compliant: 0,
@@ -43855,15 +43855,15 @@ const HealthAndSafety = ({
         empty: 0
       };
       pieChartData.forEach(item => {
-        const duosFormedValue = item.duosFormed;
+        const fieldValue = item[selectedField];
         const count = item.count || 0;
 
-        // Map duosFormed values to distribution categories
-        if (duosFormedValue === "yes" || duosFormedValue === true) {
+        // Map field values to distribution categories
+        if (fieldValue === "yes" || fieldValue === true) {
           distribution.compliant += count;
-        } else if (duosFormedValue === "no" || duosFormedValue === false) {
+        } else if (fieldValue === "no" || fieldValue === false) {
           distribution.notCompliant += count;
-        } else if (duosFormedValue === "null" || duosFormedValue === null || duosFormedValue === undefined) {
+        } else if (fieldValue === "null" || fieldValue === null || fieldValue === undefined) {
           distribution.empty += count;
         }
       });
@@ -43872,16 +43872,41 @@ const HealthAndSafety = ({
 
     // Fallback: try to extract from activityData-like structure
     return getHealthAndSafetyDistributionData(pieChartData);
-  }, [pieChartData]);
+  }, [pieChartData, selectedField]);
   const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
   const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
-  const getTooltipChildren = React.useCallback(item => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx), [t, isEmpty, healthAndSafetyDistributionData]);
+
+  // Get the label for the selected field to use as tooltip title
+  const selectedFieldLabel = React.useMemo(() => {
+    const selectedOption = filterOptions.find(opt => opt.value === selectedField);
+    return selectedOption ? selectedOption.label : 'Health and Safety';
+  }, [selectedField]);
+  const getTooltipChildren = React.useCallback(item => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, selectedFieldLabel), [t, isEmpty, healthAndSafetyDistributionData, selectedFieldLabel]);
+  const handleFilterChange = React.useCallback(value => {
+    setSelectedField(value);
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     loading: loading || pieChartLoading,
     title: /*#__PURE__*/jsxRuntime.jsx("div", {
       children: t("Health and Safety")
     }),
     className: "with-border-header h-w-btn-header ",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: selectedField,
+        style: {
+          width: 180
+        },
+        onChange: handleFilterChange,
+        options: filterOptions.map(opt => ({
+          ...opt,
+          label: t(opt.label)
+        })),
+        popupMatchSelectWidth: 180
+      })]
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         marginTop: "auto",
@@ -44185,14 +44210,13 @@ const JobsTimeline = ({
   });
   const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
   const jobsTimelineData = React.useMemo(() => {
-    if (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) {
-      return [];
-    }
+    // Always process data, even if empty, to generate default date range for x-axis
+    const dataToProcess = !jobsData || !Array.isArray(jobsData) || jobsData.length === 0 ? [] : jobsData;
 
     // Process data without cumulative calculation (for jobs timeline)
     // Try to find value in total, count, jobs, or value fields
     return processChartDateData({
-      mainData: jobsData,
+      mainData: dataToProcess,
       isCumulative: false,
       valueField: 'total' // Will fallback to count/jobs/value if total doesn't exist
     });

package/package.json

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

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

@@ -21,14 +21,15 @@ const JobsTimeline = ({
         : (dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || []);
 
     const jobsTimelineData = useMemo(() => {
-        if (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) {
-            return [];
-        }
+        // Always process data, even if empty, to generate default date range for x-axis
+        const dataToProcess = (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) 
+            ? [] 
+            : jobsData;
 
         // Process data without cumulative calculation (for jobs timeline)
         // Try to find value in total, count, jobs, or value fields
         return processChartDateData({
-            mainData: jobsData,
+            mainData: dataToProcess,
             isCumulative: false,
             valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
         });

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

@@ -87,9 +87,10 @@ export const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData,
  * @param {Object} healthAndSafetyDistributionData - Distribution object
  * @param {Function} t - Translation function
  * @param {Function} renderTooltipJsx - Function to render tooltip JSX
+ * @param {string} tooltipTitle - Title to display in the tooltip (defaults to "Health and Safety")
  * @returns {JSX.Element|null} Tooltip content or null
  */
-export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx) => {
+export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety") => {
     // If empty or no data, return null to display nothing
     if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
         return null;
@@ -129,7 +130,7 @@ export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafety
 
     // Show all items with their percentages
     return renderTooltipJsx({
-        title: t("Health and Safety"),
+        title: t(tooltipTitle),
         items: itemsWithData,
     });
 };

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

@@ -1,23 +1,33 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import { Widget, PieChart } from '../../../../../../../../index.js';
+import { Select } from 'antd';
 import { getHealthAndSafetyDistributionData, isHealthAndSafetyDistributionEmpty, calculateHealthAndSafetyPieData, getHealthAndSafetyTooltipChildren } from './helper';
 import { renderTooltipJsx } from '../../../../../../../../utils';
 import { useWidgetFetch } from '../../../../../../../hooks/useWidgetFetch.js';
 
-const HealthAndSafety = ({ 
+const filterOptions = [
+    { value: 'aidKitAccessible', label: 'Aid kit availability' },
+    { value: 'hsTrainingConfirmation', label: 'H&S training delivery' },
+    { value: 'duosFormed', label: 'Workers safe pairing' },
+    { value: 'presenceOfChildren', label: 'No children' },
+];
+
+const HealthAndSafety = ({
     id,
     getSummaryDetail,
-    loading = false, 
-    t = (s) => s 
+    loading = false,
+    t = (s) => s
 }) => {
+    const [selectedField, setSelectedField] = useState('aidKitAccessible');
+
     const defaultConfig = useMemo(
         () => ({
             basepath: "planting-cycle",
             url: `/summary/${id}/filtered-piechart`,
-            filters: { field: 'duosFormed' },
+            filters: { field: selectedField },
             stop: !id,
         }),
-        [id],
+        [id, selectedField],
     );
 
     const customGetData = useMemo(() => {
@@ -45,53 +55,75 @@ const HealthAndSafety = ({
     });
 
     // Process the fetched pie chart data
-    // The API returns data in format: [{count: 1, duosFormed: "null"}, {count: 1, duosFormed: "no"}, {count: 1, duosFormed: "yes"}]
+    // The API returns data in format: [{count: 1, [field]: "null"}, {count: 1, [field]: "no"}, {count: 1, [field]: "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 it's an array, process it using the selected field
         if (Array.isArray(pieChartData)) {
             const distribution = { compliant: 0, notCompliant: 0, empty: 0 };
-            
+
             pieChartData.forEach(item => {
-                const duosFormedValue = item.duosFormed;
+                const fieldValue = item[selectedField];
                 const count = item.count || 0;
-                
-                // Map duosFormed values to distribution categories
-                if (duosFormedValue === "yes" || duosFormedValue === true) {
+
+                // Map field values to distribution categories
+                if (fieldValue === "yes" || fieldValue === true) {
                     distribution.compliant += count;
-                } else if (duosFormedValue === "no" || duosFormedValue === false) {
+                } else if (fieldValue === "no" || fieldValue === false) {
                     distribution.notCompliant += count;
-                } else if (duosFormedValue === "null" || duosFormedValue === null || duosFormedValue === undefined) {
+                } else if (fieldValue === "null" || fieldValue === null || fieldValue === undefined) {
                     distribution.empty += count;
                 }
             });
-            
+
             return distribution;
         }
-        
+
         // Fallback: try to extract from activityData-like structure
         return getHealthAndSafetyDistributionData(pieChartData);
-    }, [pieChartData]);
+    }, [pieChartData, selectedField]);
 
     const isEmpty = useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
     const pieData = useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
 
+    // Get the label for the selected field to use as tooltip title
+    const selectedFieldLabel = useMemo(() => {
+        const selectedOption = filterOptions.find(opt => opt.value === selectedField);
+        return selectedOption ? selectedOption.label : 'Health and Safety';
+    }, [selectedField]);
+
     const getTooltipChildren = useCallback(
-        (item) => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx),
-        [t, isEmpty, healthAndSafetyDistributionData],
+        (item) => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, selectedFieldLabel),
+        [t, isEmpty, healthAndSafetyDistributionData, selectedFieldLabel],
     );
 
+    const handleFilterChange = useCallback((value) => {
+        setSelectedField(value);
+    }, []);
+
     return (
         <Widget
             loading={loading || pieChartLoading}
             title={<div>{t("Health and Safety")}</div>}
             className="with-border-header h-w-btn-header "
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <Select
+                        value={selectedField}
+                        style={{ width: 180 }}
+                        onChange={handleFilterChange}
+                        options={filterOptions.map(opt => ({ ...opt, label: t(opt.label) }))}
+                        popupMatchSelectWidth={180}
+                    />
+                </>
+            }
         >
             <div
                 style={{

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

@@ -15,17 +15,15 @@ const PlantingActivitiesTimeline = ({
 }) => {
     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 [];
-        }
+        const dataToProcess = (!activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0)
+            ? []
+            : activitiesTimelineChart;
 
         // Process data without cumulative calculation (for activities timeline)
         return processChartDateData({
-            mainData: activitiesTimelineChart,
+            mainData: dataToProcess,
             isCumulative: false,
             valueField: 'count',
         });

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

@@ -15,18 +15,14 @@ const RestoredArea = ({
 }) => {
     const { timeFilter, setTimeFilter, formatDateAxis, processChartDateData } = useTimeFilter({ defaultFilter: 'monthly' });
 
-    // Map restoredAreaChart data to LineChart format with time filter support
-    // Y-axis: total/cumulated value
-    // X-axis: date (formatted based on timeFilter)
-    // Fill all periods in the range, even if empty
     const restoredAreaChartData = useMemo(() => {
-        if (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0) {
-            return [];
-        }
+        const dataToProcess = (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0)
+            ? []
+            : restoredAreaChart;
 
         // Process data with cumulative calculation (for restored area)
         return processChartDateData({
-            mainData: restoredAreaChart,
+            mainData: dataToProcess,
             isCumulative: true,
             valueField: 'total',
         });

package/src/@daf/utils/timeFilterUtils.js

@@ -99,12 +99,9 @@ export const processChartDateData = ({
     isCumulative = false,
     valueField = 'total'
 }) => {
-    if (!mainData || !Array.isArray(mainData) || mainData.length === 0) {
-        return [];
-    }
-
     const timeQuantity = getTimeQuantity(filter);
-    const dates = mainData;
+    const dates = mainData || [];
+    const isEmpty = !mainData || !Array.isArray(mainData) || mainData.length === 0;
 
     const _data = [];
     let end = filters?.timeframe?.endDate || dayjs();
@@ -140,7 +137,7 @@ export const processChartDateData = ({
     let currentDate = start.clone();
     while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
         // Filter data points that fall within this period
-        const score = dates
+        const score = isEmpty ? 0 : dates
             .filter((d) => {
                 if (!d.date) return false;
                 switch (filter) {