datastake-daf 0.6.768 → 0.6.769

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

@@ -0,0 +1,498 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { Widget, StatCard, LineChart, ColumnChart } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { calculateStatChange } from '../../helper.js';
+
+const CycleOutcomes = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/outcomes`,
+            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: dataDetailsLoading, data: dataDetails } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    const { activitiesTimelineChart, locationsCount, restoredAreaChart, totalAreaRestored
+    } = dataDetails;
+
+    const totalAreaRestoredChange = useMemo(() => {
+        if (!totalAreaRestored) return null;
+        return calculateStatChange(
+            {
+                current: Number(totalAreaRestored.current) || 0,
+                previous: Number(totalAreaRestored.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last cycle"),
+                format: 'absolute',
+            }
+        );
+    }, [totalAreaRestored, t]);
+
+    const locationsCountChange = useMemo(() => {
+        if (!locationsCount) return null;
+        return calculateStatChange(
+            {
+                current: Number(locationsCount.current) || 0,
+                previous: Number(locationsCount.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last cycle"),
+                format: 'absolute',
+            }
+        );
+    }, [locationsCount, t]);
+
+    // Map restoredAreaChart data to LineChart format
+    // Y-axis: total/cumulated value
+    // X-axis: date
+    // Fill all months in the range, even if empty
+    const restoredAreaChartData = 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 restored area data if available
+        if (restoredAreaChart && Array.isArray(restoredAreaChart) && restoredAreaChart.length > 0) {
+            restoredAreaChart.forEach((item) => {
+                if (typeof item === 'object' && item !== null) {
+                    // Priority: look for date field first
+                    const dateValue = item.date || item.label || item.name || item.period || item.month;
+                    if (dateValue) {
+                        const date = dayjs(dateValue);
+                        if (date.isValid()) {
+                            const monthKey = date.format('YYYY-MM');
+                            // Total/cumulated value for Y-axis (this is what gets plotted)
+                            const totalValue = Number(item.cumulated || item.cumulative || item.total || item.value || 0) || 0;
+                            // Period value for tooltip only
+                            const periodValue = Number(item.period || item.area || item.count || 0) || 0;
+                            dates.push(date);
+                            
+                            // If multiple entries for same month, use the latest one (or sum if needed)
+                            if (!dataMap.has(monthKey) || dataMap.get(monthKey).value < totalValue) {
+                                dataMap.set(monthKey, {
+                                    date: dateValue,
+                                    value: totalValue,
+                                    period: periodValue,
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // 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();
+        let lastKnownValue = 0; // For cumulative data, carry forward the last known value
+        
+        while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
+            const monthKey = currentDate.format('YYYY-MM');
+            const existingData = dataMap.get(monthKey);
+            
+            if (existingData) {
+                lastKnownValue = existingData.value;
+                result.push(existingData);
+            } else {
+                // Fill missing month - for cumulative data, use last known value
+                result.push({
+                    date: currentDate.format('YYYY-MM-DD'),
+                    value: lastKnownValue, // Carry forward cumulative value
+                    period: 0,
+                });
+            }
+            
+            currentDate = currentDate.add(1, 'month');
+        }
+        
+        return result;
+    }, [restoredAreaChart]);
+
+    // Calculate max value for yAxis dynamically (round up to nearest 10)
+    const maxYValue = useMemo(() => {
+        if (!restoredAreaChartData || restoredAreaChartData.length === 0) {
+            return 80;
+        }
+        const maxValue = Math.max(...restoredAreaChartData.map(item => item.value || 0));
+        // If max is 0, set default to 80 to show Y-axis
+        // Otherwise, round up to nearest 10
+        if (maxValue === 0) {
+            return 80;
+        }
+        return Math.ceil(maxValue / 10) * 10 || 80;
+    }, [restoredAreaChartData]);
+
+    // Format date to "Mmm YY" format for X-axis
+    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;
+        };
+    }, []);
+
+    // Map activitiesTimelineChart data to ColumnChart format
+    // Data structure: [{count: 2, date: "2025-11-03"}]
+    // Fill all months in the range, even if empty
+    const activitiesTimelineData = 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 activities timeline data if available
+        if (activitiesTimelineChart && Array.isArray(activitiesTimelineChart) && activitiesTimelineChart.length > 0) {
+            activitiesTimelineChart.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.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;
+    }, [activitiesTimelineChart]);
+
+    // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+    const maxActivitiesYValue = useMemo(() => {
+        if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
+            return 100;
+        }
+        const maxValue = Math.max(...activitiesTimelineData.map(item => item.jobs || 0));
+        // If max is 0, set default to 100 to show Y-axis
+        if (maxValue === 0) {
+            return 100;
+        }
+        // Round up to nearest 10, but ensure minimum of 100
+        const roundedMax = Math.ceil(maxValue / 10) * 10;
+        return Math.max(100, roundedMax);
+    }, [activitiesTimelineData]);
+
+    return (
+        <section>
+            <Widget
+                title={t("Restoration Cycle Outcomes")}
+                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("Total Area Restored")}
+                            value={totalAreaRestored?Number(totalAreaRestored.current).toLocaleString() : 0}
+                            icon="Tree"
+                            change={totalAreaRestoredChange}
+                        />
+                    </section>
+
+                    <section style={{ flex: 1 }}>
+                        <StatCard
+                            title={t("Associated Plots")}
+                            value={locationsCount?Number(locationsCount.current).toLocaleString() : 0}
+                            icon="ProjectLocation"
+                            change={locationsCountChange}
+                        />
+                    </section>
+                </div>
+
+                <div style={{ display: "flex", gap: "24px" }}>
+                    <section style={{ flex: 1 }}>
+                        <Widget
+                            title={t("Restored Area")}
+                            className="with-border-header h-w-btn-header"
+                        >
+                            <div className="flex flex-1 flex-column justify-content-center">
+                                <div className="flex justify-content-center w-full">
+                                    <LineChart
+                                        animated
+                                        isArea
+                                        color={'#00AEB1'}
+                                        data={restoredAreaChartData}
+                                        fillOpacity={0.7}
+                                        height={200}
+                                        renderTooltipContent={(title, data) => {
+                                            if (!data || data.length === 0) return {};
+                                            const item = data[0]?.data || data[0];
+                                            const periodValue = item?.period !== undefined ? item.period : (item?.value || 0);
+                                            const cumulatedValue = item?.value || 0;
+                                            
+                                            return {
+                                                title:  t("Restored Area"),
+                                                subTitle: formatDateAxis(title),
+                                                items: [
+                                                    {
+                                                        label: t("Period"),
+                                                        value: `${periodValue.toLocaleString()} ha`,
+                                                    },
+                                                    {
+                                                        label: t("Cumulated"),
+                                                        value: `${cumulatedValue.toLocaleString()} ha`,
+                                                    },
+                                                ],
+                                            };
+                                        }}
+                                        xFieldKey="date"
+                                        yFieldKey="value"
+                                        formattedXAxis={formatDateAxis}
+                                        style={{ width: '100%' }}
+                                        yAxis={{
+                                            min: 0,
+                                            max: maxYValue,
+                                            tickMethod: () => {
+                                                // Generate ticks every 10 units for maxYValue of 80
+                                                // For other values, show ticks every 10 units
+                                                const step = maxYValue <= 80 ? 10 : Math.max(10, Math.floor(maxYValue / 8));
+                                                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, // Ensure formatter is applied
+                                                style: {
+                                                    fontSize: 12,
+                                                    fill: '#666',
+                                                },
+                                            },
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        </Widget>
+                    </section>
+                    <section style={{ flex: 1 }}>
+                        <Widget
+                            title={t("Planting Activities Timeline")}
+                            className="with-border-header h-w-btn-header"
+                        >
+                            <div className="flex flex-1 flex-column justify-content-center">
+                                <div className="flex justify-content-center w-full">
+                                    <ColumnChart
+                                        data={activitiesTimelineData}
+                                        xFieldKey="month"
+                                        yFieldKey="jobs"
+                                        animated={true}
+                                        height={400}
+                                        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("Planting Activities"),
+                                                subTitle: formatDateAxis(dateValue),
+                                                items: [
+                                                    {
+                                                        label: t("Total"),
+                                                        value: count,
+                                                    },
+                                                ],
+                                            };
+                                        }}
+                                        formattedXAxis={formatDateAxis}
+                                        formattedYAxis={(value) => {
+                                            return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`);
+                                        }}
+                                        yAxis={{
+                                            min: 0,
+                                            max: maxActivitiesYValue,
+                                            tickMethod: () => {
+                                                // Generate ticks: for 100 max, show 0, 20, 40, 60, 80, 100
+                                                // For other values, show ticks every 20 units
+                                                const step = maxActivitiesYValue <= 100 ? 20 : Math.max(20, Math.floor(maxActivitiesYValue / 5));
+                                                const ticks = [];
+                                                for (let i = 0; i <= maxActivitiesYValue; i += step) {
+                                                    ticks.push(i);
+                                                }
+                                                // Ensure max value is included
+                                                if (ticks.length === 0 || ticks[ticks.length - 1] < maxActivitiesYValue) {
+                                                    ticks.push(maxActivitiesYValue);
+                                                }
+                                                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',
+                                                },
+                                            },
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        </Widget>
+                    </section>
+                </div>
+            </Widget>
+        </section>
+    );
+};
+export default CycleOutcomes;

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { KeyIndicators } from '../../../../../../../../src/index.js';
+import { getKeyIndicatorsRowConfig } from '../../config';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+
+const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }) => {
+
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/key-information`,
+            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: keyInformationLoading, data: keyInformationData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: keyInformationData }), [t, keyInformationData]);
+    return (
+        <section>
+            <KeyIndicators
+                title={t("Key Information")}
+                config={keyIndicatorsConfig}
+                loading={loading || keyInformationLoading}
+            />
+        </section>
+    );
+};
+
+export default KeyInformation;
+

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

@@ -0,0 +1,120 @@
+import React, { useMemo } from 'react';
+import { Widget, MineSiteMap } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+
+const PlantingLocations = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "planting-cycle",
+            url: `/summary/${id}/locations`,
+            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: plantingLocationsLoading, data: plantingLocationsData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+
+    const mappedData = useMemo(() => {
+        if (!plantingLocationsData || !plantingLocationsData.events) {
+            return [];
+        }
+
+        const { locations = [], events } = plantingLocationsData;
+
+        // Filter events that have valid GPS coordinates
+        const eventsWithGPS = events.filter(event =>
+            event.locationCheckArrival &&
+            event.locationCheckArrival.latitude &&
+            event.locationCheckArrival.longitude
+        );
+
+        return eventsWithGPS.map((event, index) => {
+            const locationCheckArrival = event.locationCheckArrival;
+
+            const matchingLocation = locations.find(location =>
+                locationCheckArrival.name === location.name ||
+                locationCheckArrival._id === location.id ||
+                location.id === locationCheckArrival._id
+            ) || locations[0]; 
+
+            
+            const area = matchingLocation?.perimeter ? matchingLocation.perimeter.map(coord =>
+                Array.isArray(coord) && coord.length >= 2
+                    ? [coord[1], coord[0]] 
+                    : coord
+            ) : [];
+
+           
+            const gps = {
+                latitude: locationCheckArrival.latitude,
+                longitude: locationCheckArrival.longitude
+            };
+
+         
+            const color = "#15FFFFB2"
+
+            return {
+                _id: locationCheckArrival._id || event._id || {},
+                area: area,
+                color: color,
+                datastakeId: `LOC-${String(index + 1).padStart(9, '0')}`,
+                gps: gps,
+                id: matchingLocation?.id || locationCheckArrival._id || `event-${index}`,
+                name: locationCheckArrival.name || matchingLocation?.name || `Event ${index + 1}`,
+                sources: 1,
+                subTitle: locationCheckArrival.name || matchingLocation?.name || 'Planting Location',
+                type: 'Planting Location'
+            };
+        });
+    }, [plantingLocationsData]);
+
+    return (
+        <section>
+            <Widget
+                title={t("Planting Locations")}
+                className="no-px h-w-btn-header no-pt-body  no-p-body no-pb-body"
+                style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+            >
+                <MineSiteMap
+                    data={mappedData}
+                    link
+                    style={{ height: '100%', width: '100%' }}
+                    maxZoom={18}
+                    isSatellite={true}
+                    onClickLink={() => { }}
+                    onFilterChange={() => { }}
+                    primaryLink
+                    renderTooltip={() => { }}
+                    renderTooltipTags={() => { }}
+                    type="location-territory"
+                />
+            </Widget>
+        </section>
+    );
+};
+
+export default PlantingLocations;
+