datastake-daf 0.6.768 → 0.6.769

package/src/@daf/pages/Summary/Activities/PlantingCycle/config.js

@@ -4,36 +4,31 @@ export const getKeyIndicatorsRowConfig = ({ t, data = {} }) => [
   {
     label: t('Region'),
     render: () => {
-    //   const region = data?.region;
-      return <div>{ '-'}</div>;
+      return <div>{ data?.region || '-'}</div>;
     }
   },
   {
     label: t('Associated Plots'),
     render: () => {
-    //   const plotsCount =  data?.associatedPlotsCount || '0';
-      return <div>{'0'}</div>
+      return <div>{data?.associatedPlotsCount || '0'}</div>
     }
   },
   {
     label: t('Implementation Partners'),
     render: () => {
-    //   const partnersCount = data?.partnersCount || '0';
-      return <div>{'0'}</div>
+      return <div>{data?.partnersCount || '0'}</div>
     }
   },
   {
     label: t('Total Activities'),
     render: () => {
-    //   const activitiesCount = data?.activitiesCount || '0';
-      return <div>{'0'}</div>
+      return <div>{data?.activitiesCount || '0'}</div>
     }
   },
   {
     label: t('Information Sources'),
     render: () => {
-    //   const sourcesCount = data?.informationSourcesCount || '0';
-      return <div>{'0'}</div>
+      return <div>{data?.informationSourcesCount || '0'}</div>
     }
   },
 ];

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

@@ -120,3 +120,221 @@ export const getMapDataFromActivity = (activityData, t) => {
     return mapData;
 };
 
+const PARTNER_COLORS = ['#016C6E', '#00AEB1', '#FF7A45', '#52C41A', '#1890FF', '#722ED1', '#FA8C16', '#EB2F96'];
+
+export const getPartnersDistributionData = (activityData) => {
+    // Handle object format: { "Partner 1": count1, "Partner 2": count2 }
+    if (activityData?.partnersDistribution && typeof activityData.partnersDistribution === 'object') {
+        return activityData.partnersDistribution;
+    }
+    
+    if (Array.isArray(activityData?.partners)) {
+        const distribution = {};
+        activityData.partners.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;
+    }
+    
+    // Default empty object
+    return {};
+};
+
+export const isPartnersDistributionEmpty = (partnersDistributionData) => {
+    return Object.values(partnersDistributionData).every(val => !val || val === 0);
+};
+
+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,
+        };
+    });
+};
+
+export const getPartnersTooltipChildren = (item, isEmpty, partnersDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(partnersDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Partners"),
+            items: Object.keys(partnersDistributionData).map((k) => ({
+                label: k,
+                value: 0,
+            })),
+        });
+    }
+
+    return renderTooltipJsx({
+        title: t("Partners"),
+        items: [
+            {
+                color: item.color,
+                label: item.label,
+                value: `${item.value || 0}`,
+            },
+        ],
+    });
+};
+
+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";
+};
+
+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;
+};
+
+export const isHealthAndSafetyDistributionEmpty = (healthAndSafetyDistributionData) => {
+    return Object.values(healthAndSafetyDistributionData).every(val => !val || val === 0);
+};
+
+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"),
+        empty: t("Not Set"),
+    };
+
+    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,
+        };
+    });
+};
+
+export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx) => {
+    if (isEmpty) {
+        if (!Object.keys(healthAndSafetyDistributionData).length) {
+            return null;
+        }
+
+        return renderTooltipJsx({
+            title: t("Health and Safety"),
+            items: Object.keys(healthAndSafetyDistributionData).map((k) => ({
+                label: k === 'compliant' ? t("Compliant") : k === 'notCompliant' ? t("Not Compliant") : t("Not Set"),
+                value: 0,
+            })),
+        });
+    }
+
+    return renderTooltipJsx({
+        title: t("Health and Safety"),
+        items: [
+            {
+                color: item.color,
+                label: item.label,
+                value: `${item.value || 0}`,
+            },
+        ],
+    });
+};
+
+/**
+ * Calculates stat change object for StatCard component based on current and previous values
+ * @param {Object} data - Object with current and previous values
+ * @param {number} data.current - Current value
+ * @param {number} data.previous - Previous value
+ * @param {Object} options - Optional configuration
+ * @param {string} options.tooltipText - Custom tooltip text
+ * @param {string} options.format - Format type: 'percentage' (default) or 'absolute'
+ * @param {number} options.decimalPlaces - Number of decimal places for percentage (default: 1)
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+export const calculateStatChange = (data, options = {}) => {
+    if (!data || typeof data !== 'object') {
+        return null;
+    }
+
+    const { current, previous } = data;
+    
+    // Validate that both values are numbers
+    if (typeof current !== 'number' || typeof previous !== 'number') {
+        return null;
+    }
+
+    // If previous is 0, we can't calculate percentage change
+    if (previous === 0) {
+        return null;
+    }
+
+    const {
+        tooltipText,
+        format = 'percentage',
+        decimalPlaces = 1,
+    } = options;
+
+    // Calculate the difference
+    const difference = current - previous;
+    const isPositive = difference >= 0;
+    const direction = isPositive ? 'up' : 'down';
+
+    // Format the value
+    let value;
+    if (format === 'absolute') {
+        // Show absolute difference
+        value = Math.abs(difference).toLocaleString();
+    } else {
+        // Show percentage change
+        const percentageChange = (Math.abs(difference) / previous) * 100;
+        value = `${percentageChange.toFixed(decimalPlaces)}%`;
+    }
+
+    return {
+        value,
+        direction,
+        tooltipText: tooltipText || undefined,
+    };
+};
+

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

@@ -1,44 +1,34 @@
-import { useMemo } from 'react';
-import { DashboardLayout, Header, KeyIndicators, MineSiteMap, Widget } from '../../../../../../src/index.js'
-import { getKeyIndicatorsRowConfig } from './config';
+import { DashboardLayout, Header } from '../../../../../../src/index.js'
+import PlantingLocations from './components/PlantingLocations/index.jsx';
+import CycleOutcomes from './components/CycleOutcomes/index.jsx';
+import CycleIndicators from './components/CycleIndicators/index.jsx';
+import CommunityParticipation from './components/CommunityParticipation/index.jsx';
+import AssociatedInformation from './components/AssociatedInformation/index.jsx';
+import KeyInformation from './components/KeyInformation/index.jsx';
 
-const PlantingCycleSummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
-    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: {} }), [t]);
+const PlantingCycleSummary = ({ header, activityData, loading = false, id, t = () => { }, getSummaryDetail }) => {
 
     return (
         <DashboardLayout
             header={
                 <Header
-                    title={'Planting Cycle Summary'}
-                    supportText={supportText || ''}
-                    onDownload={onDownload}
-                    downloadDisabled={downloadDisabled}
-                    actionButtons={actionButtons}
-                    breadcrumbs={breadcrumbs}
-                    goBackTo={goBackTo}
-                    loading={loading}
+                    title={header?.title || ''}
+                    supportText={header?.supportText || ''}
+                    onDownload={header?.onDownload}
+                    downloadDisabled={header?.downloadDisabled}
+                    actionButtons={header?.actionButtons}
+                    breadcrumbs={header?.breadcrumbs}
+                    goBackTo={header?.goBackTo}
+                    loading={header?.loading}
                 />
             }
         >
-            <section>
-                <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
-            </section>
-
-            <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
-                        loading={loading}
-                        t={t}
-                        isSatellite
-                        data={[]}
-                    />
-                </Widget>
-
-            </section>
+            <KeyInformation id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
+            <PlantingLocations id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
+            <CycleOutcomes id={id} getSummaryDetail={getSummaryDetail}  loading={loading} t={t} />
+            <CycleIndicators id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
+            <CommunityParticipation id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
+            <AssociatedInformation id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
         </DashboardLayout>
     )
 }

package/src/@daf/pages/Summary/Activities/Restoration/components/ActivityImagery/index.jsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { ImageCarousel } from '../../../../../../../../src/index.js';
+import { getActivityImages } from '../../helper';
+import { useResizeContext } from '../../../../../../../../src/context';
+
+const ActivityImagery = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
+    const images = useMemo(() => getActivityImages(activityData), [activityData]);
+
+    return (
+        <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
+            <ImageCarousel
+                loading={loading}
+                images={images}
+                title={t("straatos::activity-imagery")}
+                key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
+                customArrows={true}
+                activeDotColor="#003435"
+            />
+        </div>
+    );
+};
+
+export default ActivityImagery;
+

package/src/@daf/pages/Summary/Activities/Restoration/components/ActivityLocation/index.jsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { Widget, MineSiteMap } from '../../../../../../../../src/index.js';
+import { getMapDataFromActivity } from '../../helper';
+import { convertDMS } from '../../../../../../../../src/helpers/Map';
+import CustomIcon from '../../../../../../../../src/@daf/core/components/Icon/CustomIcon.jsx';
+
+const ActivityLocation = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const mapData = useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
+
+    return (
+        <section>
+        <Widget
+            title={t("Activity Location")}
+            className="no-px h-w-btn-header no-pt-body  no-p-body no-pb-body"
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+            <div style={{ flex: 1, minHeight: 0 }}>
+                <MineSiteMap
+                    loading={loading}
+                    t={t}
+                    isSatellite={true}
+                    app={"straatos"}
+                    type={'location-territory'}
+                    showSider={false}
+                    user={null}
+                    data={mapData}
+                    maxZoom={18}
+                    primaryLink={true}
+                    style={{ height: '100%', width: '100%' }}
+                    renderTooltipForLocation={(data) => {
+                        const coordinates = data.gps?.latitude && data.gps?.longitude
+                            ? convertDMS(data.gps.latitude, data.gps.longitude)
+                            : null;
+
+                        if (!coordinates) {
+                            return [];
+                        }
+
+                        const isActivityEnd = data.name === t("Activity End") || data.id?.includes('-departure');
+                        const iconColor = isActivityEnd ? "#FF7A45" : "#016C6E";
+
+                        return [
+                            {
+                                label: t("Coordinates"),
+                              
+                                value: (
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'nowrap' }}>
+                                        {/* Latitude icon (vertical) */}
+                                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                                            <CustomIcon 
+                                                name="SpacingHeight" 
+                                                width={14} 
+                                                height={14} 
+                                                color={iconColor}
+                                            />
+                                            <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[0]}</span>
+                                        </div>
+                                        {/* Longitude icon (horizontal) */}
+                                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                                            <CustomIcon 
+                                                name="SpacingWidth" 
+                                                width={14} 
+                                                height={14} 
+                                                color={iconColor}
+                                            />
+                                            <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[1]}</span>
+                                        </div>
+                                    </div>
+                                ),
+                            },
+                        ];
+                    }}
+                    renderTooltipForTerritory={(data) => {
+                        return [
+                            {
+                                label: t("Plot Name"),
+                                value: data.plotName || data.name || "--",
+                            },
+                        ];
+                    }}
+                    link={true}
+                />
+            </div>
+        </Widget>
+        </section>
+    );
+};
+
+export default ActivityLocation;
+

package/src/@daf/pages/Summary/Activities/Restoration/components/WorkersDistribution/index.jsx

@@ -0,0 +1,49 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../src/index.js';
+import { getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from '../../helper';
+import { renderTooltipJsx } from '../../../../../../../../src/utils';
+
+const WorkersDistribution = ({ 
+    activityData, 
+    loading = false, 
+    t = (s) => s 
+}) => {
+    const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
+    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("Workers 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 WorkersDistribution;
+