datastake-daf 0.6.768 → 0.6.769

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

@@ -0,0 +1,50 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../index.js';
+import { getCyclePartners, isPartnersDistributionEmpty, calculatePartnersPieData, getPartnersTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../../../utils.js';
+
+const CyclePartners = ({ 
+    cyclePartners, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+
+    const partnersDistributionData = useMemo(() => getCyclePartners(cyclePartners), [cyclePartners]);
+    const isEmpty = useMemo(() => isPartnersDistributionEmpty(partnersDistributionData), [partnersDistributionData]);
+    const pieData = useMemo(() => calculatePartnersPieData(partnersDistributionData), [partnersDistributionData]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getPartnersTooltipChildren(item, isEmpty, partnersDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, partnersDistributionData],
+    );
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Cycle Partners")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <div
+                style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                }}
+            >
+                <PieChart
+                    mouseXOffset={10}
+                    mouseYOffset={10}
+                    changeOpacityOnHover={false}
+                    data={pieData}
+                    doConstraints={false}
+                    isPie
+                    t={t}
+                    isEmpty={isEmpty}
+                    getTooltipChildren={getTooltipChildren}
+                />
+            </div>
+        </Widget>
+    );
+};
+
+export default CyclePartners;
+

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

@@ -0,0 +1,134 @@
+const HEALTH_SAFETY_COLORS = {
+    compliant: '#52C41A',
+    notCompliant: '#FF4D4F',
+    empty: '#D9D9D9',
+};
+
+const getIndicatorType = (value) => {
+    if (value === "yes" || value === true) return "compliant";
+    if (value === "no" || value === false) return "notCompliant";
+    if (value === null || value === undefined) return "empty";
+    return "empty";
+};
+
+/**
+ * Gets health and safety distribution data from activity data
+ * @param {Object} activityData - Activity data object
+ * @returns {Object} Distribution object with compliant, notCompliant, and empty counts
+ */
+export const getHealthAndSafetyDistributionData = (activityData) => {
+    // Define health and safety indicator fields
+    const indicators = [
+        { field: 'aidKitAccessible', label: 'Aid kit availability' },
+        { field: 'hsTrainingConfirmation', label: 'H&S training delivery' },
+        { field: 'duosFormed', label: 'Workers safe pairing' },
+        { field: 'presenceOfChildren', label: 'No children' },
+        { field: 'focalPointPresent', label: 'Security presence' },
+        { field: 'relayPresent', label: 'Relay presence' },
+    ];
+
+    const distribution = {
+        compliant: 0,
+        notCompliant: 0,
+        empty: 0,
+    };
+
+    indicators.forEach(({ field }) => {
+        const value = activityData?.[field];
+        const type = getIndicatorType(value);
+        distribution[type] = (distribution[type] || 0) + 1;
+    });
+
+    return distribution;
+};
+
+/**
+ * Checks if the health and safety distribution data is empty
+ * @param {Object} healthAndSafetyDistributionData - Distribution object
+ * @returns {boolean} True if all values are 0 or empty
+ */
+export const isHealthAndSafetyDistributionEmpty = (healthAndSafetyDistributionData) => {
+    return Object.values(healthAndSafetyDistributionData).every(val => !val || val === 0);
+};
+
+/**
+ * Calculates pie chart data from health and safety distribution
+ * @param {Object} healthAndSafetyDistributionData - Distribution object
+ * @param {Function} t - Translation function
+ * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
+ */
+export const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData, t) => {
+    const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
+
+    const labels = {
+        compliant: t("Compliant"),
+        notCompliant: t("Not Compliant"),
+    };
+
+    return Object.keys(healthAndSafetyDistributionData).map((key) => {
+        const color = HEALTH_SAFETY_COLORS[key] || '#D9D9D9';
+
+        return {
+            value: healthAndSafetyDistributionData[key] || 0,
+            percent: total > 0 ? (healthAndSafetyDistributionData[key] || 0) / total : 0,
+            color: color,
+            label: labels[key] || key,
+            key: key,
+        };
+    });
+};
+
+/**
+ * Generates tooltip content for health and safety pie chart
+ * Shows all statuses with their percentages
+ * @param {Object} item - The pie chart item being hovered (not used, but kept for compatibility)
+ * @param {boolean} isEmpty - Whether the distribution is empty
+ * @param {Object} healthAndSafetyDistributionData - Distribution object
+ * @param {Function} t - Translation function
+ * @param {Function} renderTooltipJsx - Function to render tooltip JSX
+ * @returns {JSX.Element|null} Tooltip content or null
+ */
+export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx) => {
+    // If empty or no data, return null to display nothing
+    if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
+        return null;
+    }
+
+    // Calculate total for percentage calculation
+    const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
+    
+    // If total is 0, return null to display nothing
+    if (total === 0) {
+        return null;
+    }
+    
+    const labels = {
+        compliant: t("Compliant"),
+        notCompliant: t("Not Compliant"),
+    };
+
+    // Filter items with values > 0
+    const itemsWithData = Object.keys(healthAndSafetyDistributionData)
+        .filter(key => healthAndSafetyDistributionData[key] > 0)
+        .map((key) => {
+            const value = healthAndSafetyDistributionData[key] || 0;
+            const percent = total > 0 ? ((value / total) * 100).toFixed(0) : 0;
+            return {
+                color: HEALTH_SAFETY_COLORS[key] || '#D9D9D9',
+                label: labels[key] || key,
+                value: `${percent}%`,
+            };
+        });
+
+    // If no items with data, return null
+    if (itemsWithData.length === 0) {
+        return null;
+    }
+
+    // Show all items with their percentages
+    return renderTooltipJsx({
+        title: t("Health and Safety"),
+        items: itemsWithData,
+    });
+};
+

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

@@ -0,0 +1,49 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../index.js';
+import { getHealthAndSafetyDistributionData, isHealthAndSafetyDistributionEmpty, calculateHealthAndSafetyPieData, getHealthAndSafetyTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../../../utils';
+
+const HealthAndSafety = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const healthAndSafetyDistributionData = useMemo(() => getHealthAndSafetyDistributionData(activityData), [activityData]);
+    const isEmpty = useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
+    const pieData = useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, healthAndSafetyDistributionData],
+    );
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Health and Safety")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <div
+                style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                }}
+            >
+                <PieChart
+                    mouseXOffset={10}
+                    mouseYOffset={10}
+                    changeOpacityOnHover={false}
+                    data={pieData}
+                    doConstraints={false}
+                    isPie
+                    t={t}
+                    isEmpty={isEmpty}
+                    getTooltipChildren={getTooltipChildren}
+                />
+            </div>
+        </Widget>
+    );
+};
+
+export default HealthAndSafety;
+

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import { Widget, StatCard } from '../../../../../../../index.js';
+import CyclePartners from './CyclePartners/index.jsx';
+import HealthAndSafety from './HealthAndSafety/index.jsx';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { calculateStatChange } from '../../helper.js';
+
+const CycleIndicators = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/indicators`,
+            stop: !id,
+        }),
+        [id],
+    );
+
+    const customGetData = useMemo(() => {
+        if (getSummaryDetail && id) {
+            return ({ url, params = {} }) => {
+                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+                if (match) {
+                    const [, type] = match;
+                    return getSummaryDetail(id, type, params);
+                }
+                throw new Error(`Invalid URL format: ${url}`);
+            };
+        }
+        return undefined;
+    }, [getSummaryDetail, id]);
+
+    const { loading: indicatorsLoading, data: indicatorsData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    const { participantsCount, eventIncidents, cyclePartners } = indicatorsData;
+
+    const participantsCountChange = useMemo(() => {
+        if (!participantsCount) return null;
+        return calculateStatChange(
+            {
+                current: Number(participantsCount.current) || 0,
+                previous: Number(participantsCount.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last cycle"),
+                format: 'absolute',
+            }
+        );
+    }, [participantsCount, t]);
+
+    const eventIncidentsChange = useMemo(() => {
+        if (!eventIncidents) return null;
+        return calculateStatChange(
+            {
+                current: Number(eventIncidents.current) || 0,
+                previous: Number(eventIncidents.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last cycle"),
+                format: 'absolute',
+            }
+        );
+    }, [eventIncidents, t]);
+
+    return (
+        <section>
+            <Widget
+                title={t("Cycle Indicators")}
+                loading={loading}
+                className="with-border-header h-w-btn-header"
+            >
+                <div style={{ display: 'flex', gap: '24px', marginBottom: '24px' }}>
+                    <section style={{ flex: 1 }}>
+                        <StatCard
+                            title={t("Activity Participants")}
+                            value={ participantsCount?.current ? Number(participantsCount?.current).toLocaleString() : 0}
+                            icon="partnerIcon"
+                            change={participantsCountChange}
+                        />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <StatCard
+                            title={t("Reported Incidents")}
+                            value={eventIncidents?.current || 0}
+                            icon="ReportIncidents"
+                            change={eventIncidentsChange}
+                        />
+                    </section>
+                </div>
+                <div style={{ display: 'flex', gap: '24px' }}>
+                    <section style={{ flex: 1 }}>
+                        <CyclePartners cyclePartners={cyclePartners} loading={indicatorsLoading} t={t} />
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <HealthAndSafety activityData={indicatorsData} loading={indicatorsLoading} t={t} />
+                    </section>
+                </div>
+            </Widget>
+        </section>
+    );
+};
+
+export default CycleIndicators;
+