datastake-daf 0.6.776 → 0.6.777

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 {
@@ -43746,9 +43746,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 +43786,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 +43849,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 +43862,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 +43870,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 +43887,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",

package/package.json

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

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={{