datastake-daf 0.6.775 → 0.6.777

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/utils/object.js

@@ -61,6 +61,4 @@ export const removeKeysFromObject = (obj = {}, keys = []) => {
         }
     }
     return result;
-}
-
-export const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);
+}

package/src/hooks.js

@@ -13,5 +13,4 @@ export { useFirebase } from "./@daf/hooks/useFirebase.js"
 export { useIsDatastake } from "./@daf/hooks/useIsDatastake.js"
 export { useWidgetFetch } from "./@daf/hooks/useWidgetFetch.js"
 export { useAdminDashboard } from "./@daf/hooks/useAdminDashboard.js"
-export { useGetQueryParams } from "./@daf/hooks/useGetQueryParams.js"
-export { useViewFormUrlParams } from "./@daf/hooks/useViewFormUrlParams.js"
+export { useGetQueryParams } from "./@daf/hooks/useGetQueryParams.js"

package/src/utils.js

@@ -27,7 +27,7 @@ export { default as locales } from './constants/locales/index.js';
 
 export { getTagColor } from "./@daf/utils/productTag.js";
 
-export { convertUndefinedToNull, hasKeyInObject, removeKeysFromObject } from './@daf/utils/object'
+export { convertUndefinedToNull } from './@daf/utils/object'
 
 export { default as ErrorFormat, formatErrors } from './helpers/ErrorFormater'