datastake-daf 0.6.768 → 0.6.770

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/CommunityStats/helper.js

@@ -0,0 +1,60 @@
+import { calculateStatChange } from '../../../helper.js';
+
+/**
+ * Calculates the change for day jobs stat
+ * @param {Object} dayJobs - Object with current and previous day jobs values
+ * @param {Function} t - Translation function
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+export const calculateDayJobsChange = (dayJobs, t) => {
+    if (!dayJobs) return null;
+    return calculateStatChange(
+        {
+            current: Number(dayJobs.current) || 0,
+            previous: Number(dayJobs.previous) || 0,
+        },
+        {
+            tooltipText: t("In comparison to last cycle"),
+            format: 'absolute',
+        }
+    );
+};
+
+/**
+ * Calculates the change for employed women stat
+ * @param {Object} employedWomen - Object with current and previous employed women values
+ * @param {Function} t - Translation function
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+export const calculateEmployedWomenChange = (employedWomen, t) => {
+    if (!employedWomen) return null;
+    return calculateStatChange(
+        {
+            current: Number(employedWomen.current) || 0,
+            previous: Number(employedWomen.previous) || 0,
+        },
+        {
+            tooltipText: t("In comparison to last cycle"),
+            format: 'absolute',
+        }
+    );
+};
+
+/**
+ * Formats the day jobs value for display
+ * @param {Object} dayJobs - Object with current day jobs value
+ * @returns {string} Formatted value string
+ */
+export const formatDayJobsValue = (dayJobs) => {
+    return dayJobs?.current ? Number(dayJobs.current).toLocaleString() : 0;
+};
+
+/**
+ * Formats the employed women value for display
+ * @param {Object} employedWomen - Object with current employed women value
+ * @returns {string} Formatted value string
+ */
+export const formatEmployedWomenValue = (employedWomen) => {
+    return employedWomen?.current ? Number(employedWomen.current).toLocaleString() : 0;
+};
+

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

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../index.js';
+import { calculateDayJobsChange, calculateEmployedWomenChange, formatDayJobsValue, formatEmployedWomenValue } from './helper.js';
+
+const CommunityStats = ({
+    dayJobs,
+    employedWomen,
+    t = (s) => s
+}) => {
+    const dayJobsChange = useMemo(() => calculateDayJobsChange(dayJobs, t), [dayJobs, t]);
+    const employedWomenChange = useMemo(() => calculateEmployedWomenChange(employedWomen, t), [employedWomen, t]);
+
+    return (
+        <div style={{ display: 'flex', gap: '24px', marginBottom: '24px' }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Total Jobs")}
+                    value={formatDayJobsValue(dayJobs)}
+                    icon="MineOperators"
+                    change={dayJobsChange}
+                />
+            </section>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Employed Women")}
+                    value={formatEmployedWomenValue(employedWomen)}
+                    icon="GenderFemale"
+                    change={employedWomenChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default CommunityStats;
+

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/GenderDistribution/helper.js

@@ -0,0 +1,117 @@
+const GENDER_COLORS = ['#a0ebec', '#00aeb1'];
+
+export const getGenderDistributionData = (genderDistribution) => {
+    if (Array.isArray(genderDistribution) && genderDistribution.length > 0) {
+        const firstItem = genderDistribution[0];
+        
+        if (firstItem && (firstItem.totalFemale !== undefined || firstItem.totalMale !== undefined)) {
+            const totalFemale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalFemale) || 0), 0);
+            const totalMale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalMale) || 0), 0);
+            
+            return {
+                Male: totalMale,
+                Female: totalFemale,
+            };
+        }
+        
+        const distribution = {};
+        genderDistribution.forEach(item => {
+            const gender = item?.gender || item?.label || item?.name || 'Unknown';
+            const count = item?.count || item?.value || item?.total || 0;
+            const normalizedGender = gender.toLowerCase() === 'male' ? 'Male' : 
+                                   gender.toLowerCase() === 'female' ? 'Female' : gender;
+            distribution[normalizedGender] = (distribution[normalizedGender] || 0) + count;
+        });
+        return distribution;
+    }
+    
+    if (genderDistribution && typeof genderDistribution === 'object' && !Array.isArray(genderDistribution)) {
+        if (genderDistribution.genderDistribution && typeof genderDistribution.genderDistribution === 'object') {
+            return genderDistribution.genderDistribution;
+        }
+        
+        if (genderDistribution.totalFemale !== undefined || genderDistribution.totalMale !== undefined) {
+            return {
+                Male: Number(genderDistribution.totalMale) || 0,
+                Female: Number(genderDistribution.totalFemale) || 0,
+            };
+        }
+        
+        if (genderDistribution.Male !== undefined || genderDistribution.Female !== undefined || 
+            genderDistribution.male !== undefined || genderDistribution.female !== undefined) {
+            return {
+                Male: genderDistribution.Male || genderDistribution.male || 0,
+                Female: genderDistribution.Female || genderDistribution.female || 0,
+            };
+        }
+        
+        return genderDistribution;
+    }
+    
+    return {};
+};
+
+/**
+ * Checks if the gender distribution data is empty
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {boolean} True if all values are 0 or empty
+ */
+export const isGenderDistributionEmpty = (genderDistributionData) => {
+    return Object.values(genderDistributionData).every(val => !val || val === 0);
+};
+
+/**
+ * Calculates pie chart data from gender distribution
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
+ */
+export const calculateGenderPieData = (genderDistributionData) => {
+    const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+
+    return Object.keys(genderDistributionData).map((key, index) => {
+        const color = GENDER_COLORS[index % GENDER_COLORS.length];
+
+        return {
+            value: genderDistributionData[key] || 0,
+            percent: total > 0 ? (genderDistributionData[key] || 0) / total : 0,
+            color: color,
+            label: key,
+            key: key,
+        };
+    });
+};
+
+export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(genderDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Gender Distribution"),
+            items: Object.keys(genderDistributionData).map((k) => ({
+                color: GENDER_COLORS[Object.keys(genderDistributionData).indexOf(k) % GENDER_COLORS.length],
+                label: k,
+                value: '0%',
+            })),
+        });
+    }
+
+    // Calculate total for percentage calculation
+    const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+    
+    // Show all gender items with percentages (matching the image format)
+    return renderTooltipJsx({
+        title: t("Gender Distribution"),
+        items: Object.keys(genderDistributionData).map((k, index) => {
+            const value = genderDistributionData[k] || 0;
+            const percent = total > 0 ? Math.round((value / total) * 100) : 0;
+            return {
+                color: GENDER_COLORS[index % GENDER_COLORS.length],
+                label: k,
+                value: `${percent}%`,
+            };
+        }),
+    });
+};
+

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

@@ -0,0 +1,49 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../index.js';
+import { getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../../../utils.js';
+
+const GenderDistribution = ({ 
+    genderDistribution, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const genderDistributionData = useMemo(() => getGenderDistributionData(genderDistribution), [genderDistribution]);
+    const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
+    const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, genderDistributionData],
+    );
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Gender Distribution")}</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 GenderDistribution;
+

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}`,
+            },
+        ],
+    });
+};
+