datastake-daf 0.6.767 → 0.6.769

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

@@ -0,0 +1,212 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { Widget, ColumnChart } from '../../../../../../../../index.js';
+
+const JobsTimeline = ({
+    dayJobsTimeline,
+    loading = false,
+    t = (s) => s
+}) => {
+
+    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,
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 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]);
+
+    const maxYValue = useMemo(() => {
+        if (!jobsTimelineData || jobsTimelineData.length === 0) {
+            return 100;
+        }
+        const maxValue = Math.max(...jobsTimelineData.map(item => item.jobs || 0));
+        // If max is 0, set default to 100 to show Y-axis
+        // Otherwise, round up to nearest 10
+        if (maxValue === 0) {
+            return 100;
+        }
+        return Math.ceil(maxValue / 10) * 10 || 100;
+    }, [jobsTimelineData]);
+    
+    return (
+        <Widget
+            title={<div>{t("Day Jobs Timeline")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <ColumnChart
+                data={jobsTimelineData}
+                xFieldKey="month"
+                yFieldKey="jobs"
+                animated={true}
+                // height={200}
+                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("straatos::local-jobs-created"),
+                        subTitle: formatDateAxis(dateValue),
+                        items: [
+                            {
+                            label: t("straatos::jobs"),
+                                value: count,
+                            },
+                        ],
+                    };
+                }}
+                formattedXAxis={formatDateAxis}
+                formattedYAxis={(value) => {
+                    return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`);
+                }}
+                yAxis={{
+                    min: 0,
+                    max: maxYValue,
+                    tickMethod: () => {
+                       
+                        const step = maxYValue <= 100 ? 5 : Math.max(5, Math.floor(maxYValue / 10));
+                        const ticks = [];
+                        for (let i = 0; i <= maxYValue; i += step) {
+                            ticks.push(i);
+                        }
+                        // Ensure max value is included
+                        if (ticks.length === 0 || ticks[ticks.length - 1] < maxYValue) {
+                            ticks.push(maxYValue);
+                        }
+                        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',
+                        },
+                    },
+                }}
+            />
+        </Widget>
+    );
+};
+
+export default JobsTimeline;

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

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { Widget } from '../../../../../../../../src/index.js';
+import GenderDistribution from './GenderDistribution/index.jsx';
+import JobsTimeline from './JobsTimeline/index.jsx';
+import CommunityStats from './CommunityStats/index.jsx';
+
+const CommunityParticipation = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/community-participation`,
+            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: communityParticipationLoading, data: communityParticipationData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });     
+
+    const { dayJobs, employedWomen, dayJobsTimeline, genderDistribution } = communityParticipationData;
+
+    return (
+        <section>
+            <Widget
+                title={t("Community Participation")}
+                loading={loading}
+                className="with-border-header h-w-btn-header"
+            >
+                <CommunityStats
+                    dayJobs={dayJobs}
+                    employedWomen={employedWomen}
+                    t={t}
+                />
+
+                <div style={{ display: 'flex', gap: '24px' , }}>
+                    <section style={{ flex: 1 , height: '100%' }}>
+                        <JobsTimeline dayJobsTimeline={dayJobsTimeline} loading={communityParticipationLoading} t={t} />
+                    </section>
+                    <section style={{ flex: 1 , height: '100%' }}>
+                        <GenderDistribution genderDistribution={genderDistribution} loading={communityParticipationLoading} t={t} style={{ flex: 1 }} />
+                    </section>
+                </div>
+            </Widget>
+        </section>
+    );
+};
+
+export default CommunityParticipation;
+

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

@@ -0,0 +1,91 @@
+const PARTNER_COLORS = ['#016C6E', '#00AEB1', '#FF7A45', '#52C41A', '#1890FF', '#722ED1', '#FA8C16', '#EB2F96'];
+
+/**
+ * Converts a direct array of partners to distribution format
+ * @param {Array} partnersArray - Array of partner objects: [{ name: "Partner 1", count: 5 }, ...]
+ * @returns {Object} Distribution object: { "Partner 1": 5, "Partner 2": 3, ... }
+ */
+export const getCyclePartners = (partnersArray) => {
+    if (!Array.isArray(partnersArray)) {
+        return {};
+    }
+    
+    const distribution = {};
+    partnersArray.forEach(partner => {
+        const name = partner?.name || partner?.nickName || partner?.label || 'Unknown';
+        const count = partner?.count || partner?.value || 1;
+        distribution[name] = (distribution[name] || 0) + count;
+    });
+    
+    return distribution;
+};
+
+/**
+ * Checks if the partners distribution data is empty
+ * @param {Object} partnersDistributionData - Distribution object: { "Partner 1": 5, ... }
+ * @returns {boolean} True if all values are 0 or empty
+ */
+export const isPartnersDistributionEmpty = (partnersDistributionData) => {
+    return Object.values(partnersDistributionData).every(val => !val || val === 0);
+};
+
+/**
+ * Calculates pie chart data from partners distribution
+ * @param {Object} partnersDistributionData - Distribution object: { "Partner 1": 5, ... }
+ * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
+ */
+export const calculatePartnersPieData = (partnersDistributionData) => {
+    const total = Object.values(partnersDistributionData).reduce((all, val) => all + (val || 0), 0);
+
+    return Object.keys(partnersDistributionData).map((key, index) => {
+        const color = PARTNER_COLORS[index % PARTNER_COLORS.length];
+
+        return {
+            value: partnersDistributionData[key] || 0,
+            percent: total > 0 ? (partnersDistributionData[key] || 0) / total : 0,
+            color: color,
+            label: key,
+            key: key,
+        };
+    });
+};
+
+/**
+ * Generates tooltip content for partners pie chart
+ * @param {Object} item - The pie chart item being hovered
+ * @param {boolean} isEmpty - Whether the distribution is empty
+ * @param {Object} partnersDistributionData - 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 getPartnersTooltipChildren = (item, isEmpty, partnersDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(partnersDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Cycle Partners"),
+            items: Object.keys(partnersDistributionData).map((k) => ({
+                label: t("Partner"),
+                value: k,
+            })),
+        });
+    }
+
+    return renderTooltipJsx({
+        title: t("Cycle Partners"),
+        items: [
+            {
+                label: t("Partner"),
+                value: item.label || item.key || 'Unknown',
+            },
+            {
+                label: t("Activities"),
+                value: `${item.value || 0}`,
+            },
+        ],
+    });
+};
+

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;
+