datastake-daf 0.6.746 → 0.6.748

package/src/@daf/core/components/Icon/configs/index.js

@@ -218,6 +218,10 @@ import userIcon from "./userIcon";
 import partnerIcon from "./partnerIcon";
 import LifeCycle from "./LifeCycle";
 import EventCalendar from "./EventCalendar";
+import Aid from "./Aid";
+import Bear from "./Bear";
+import Security from "./Security";
+import Minus from "./Minus";
 
 const config = {
 	AppAdmin,
@@ -440,6 +444,10 @@ const config = {
 	partnerIcon,
 	LifeCycle,
 	EventCalendar,
+	Aid,
+	Bear,
+	Security,
+	Minus,
 };
 
 export default config;

package/src/@daf/hooks/useSources.js

@@ -82,7 +82,7 @@ export default function useSource({ user = {}, t = () => {}, getData = () => {},
 
 export const useSources = ({type, id, user, t = () => {}}) => {
 	function getData(params) {
-		if(id) {
+		if(id !== undefined && id !== null) {
 			return SourceService.getSources({type, id});
 		} else {
 			return SourceService.get(null, params);

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

@@ -2,6 +2,11 @@
 // REGION: Photo/Image Extraction
 // ============================================================================
 
+/**
+ * Normalize URL by removing trailing colon if present
+ */
+const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+
 /**
  * Extract images from a photo document
  * Handles both documents with pictures arrays and direct image objects
@@ -16,9 +21,27 @@ export const extractFromPhotoDoc = (photoDoc, label, docIndex) => {
 };
 
 /**
- * Normalize URL by removing trailing colon if present
+ * Extract and process images from activity data
+ * Processes group photos and activity photos (start, during, end) into a flat array
+ * 
+ * @param {Object} activityData - Activity data object containing photo arrays
+ * @returns {Array} - Flat array of image objects with src and alt properties
  */
-const normalizeUrl = (url) => url?.endsWith(':') ? url.slice(0, -1) : url;
+export const getActivityImages = (activityData) => {
+    const photoArrays = [
+        { data: activityData?.groupPhotos, label: 'Group Photo' },
+        { data: activityData?.photosStartActivity, label: 'Start of Activity' },
+        { data: activityData?.photosDuringActivity, label: 'During Activity' },
+        { data: activityData?.photosEndActivity, label: 'End of Activity' }
+    ];
+
+    return photoArrays
+        .flatMap(({ data, label }) =>
+            Array.isArray(data)
+                ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index))
+                : []
+        );
+};
 
 // ============================================================================
 // REGION: Gender Distribution
@@ -95,4 +118,65 @@ export const getGenderTooltipChildren = (item, isEmpty, genderDistributionData,
             },
         ],
     });
+};
+
+// ============================================================================
+// REGION: Activity Indicators
+// ============================================================================
+
+/**
+ * Maps activityData value to indicator type
+ * "yes" or true → "compliant"
+ * "no" or false → "notCompliant"
+ * null or undefined → "empty"
+ */
+export 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"; // default fallback
+};
+
+/**
+ * Special case: Children presence indicator configuration
+ * Children presence is compliant if answered 'no', not compliant if answered 'yes'
+ * Custom icons: "no" (compliant) → X icon with green badge, "yes" (notCompliant) → Check icon with red badge
+ * 
+ * @param {string|boolean|null} value - The presenceOfChildren value from activityData
+ * @returns {Object} - Configuration object with type and optional statusIcon
+ */
+export const getChildrenPresenceConfig = (value) => {
+    if (value === "no" || value === false) {
+        return { type: "compliant", statusIcon: "Close" }; // X icon with green badge
+    }
+    if (value === "yes" || value === true) {
+        return { type: "notCompliant", statusIcon: "Check" }; // Check icon with red badge
+    }
+    return { type: "empty" }; // empty state
+};
+
+/**
+ * Get activity indicators configuration from activityData
+ * Maps activityData fields to indicator config objects with icon, label, type, and optional statusIcon
+ * 
+ * @param {Object} activityData - Activity data object
+ * @param {Function} t - Translation function
+ * @returns {Array} - Array of indicator config objects
+ */
+export const getActivityIndicatorsConfig = (activityData, t) => {
+    const childrenPresenceConfig = getChildrenPresenceConfig(activityData?.presenceOfChildren);
+    
+    return [
+        { icon: "Aid", label: t("Aid kit availability"), type: getIndicatorType(activityData?.aidKitAccessible) },
+        { icon: "MineOperators", label: t("H&S training delivery"), type: getIndicatorType(activityData?.hsTrainingConfirmation) },
+        { icon: "Users", label: t("Workers safe pairing"), type: getIndicatorType(activityData?.duosFormed) },
+        { 
+            icon: "Bear", 
+            label: t("Children presence"), 
+            type: childrenPresenceConfig.type,
+            ...(childrenPresenceConfig.statusIcon && { statusIcon: childrenPresenceConfig.statusIcon })
+        },
+        { icon: "Security", label: t("Security presence"), type: getIndicatorType(activityData?.focalPointPresent) },
+        { icon: "UserCircle", label: t("Relay presence"), type: getIndicatorType(activityData?.relayPresent) },
+    ];
 };

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

@@ -1,29 +1,14 @@
 import { useMemo, useCallback } from 'react';
-import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart } from '../../../../../../src/index.js'
+import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart, ActivityIndicators } from '../../../../../../src/index.js'
 import { getKeyIndicatorsRowConfig } from './config';
-import { extractFromPhotoDoc, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { getActivityImages, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren, getActivityIndicatorsConfig } from './helper';
 import { renderTooltipJsx } from '../../../../../../src/utils';
 import { useResizeContext } from '../../../../../../src/context';
 
 const RestorationActivitySummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
     const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
     const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: activityData }), [t, activityData]);
-    const images = useMemo(() => {
-
-        const photoArrays = [
-            { data: activityData?.groupPhotos, label: 'Group Photo' },
-            { data: activityData?.photosStartActivity, label: 'Start of Activity' },
-            { data: activityData?.photosDuringActivity, label: 'During Activity' },
-            { data: activityData?.photosEndActivity, label: 'End of Activity' }
-        ];
-
-        return photoArrays
-            .flatMap(({ data, label }) =>
-                Array.isArray(data)
-                    ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index))
-                    : []
-            );
-    }, [activityData]);
+    const images = useMemo(() => getActivityImages(activityData), [activityData]);
     const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
     const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
     const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
@@ -32,6 +17,13 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
         (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
         [t, isEmpty, genderDistributionData],
     );
+   
+    // Activity Indicators Config - mapped from activityData
+    const activityIndicatorsConfig = useMemo(() => 
+        getActivityIndicatorsConfig(activityData, t),
+        [activityData, t]
+    );
+
     return (
         <DashboardLayout
             header={
@@ -54,7 +46,7 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
             <section>
                 <Widget
                     title={t("Activity Location")}
-                    className="no-px no-pb-body"
+                    className="no-px no-pt-body  no-p-body no-pb-body"
                     style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                 >
                     <div style={{ flex: 1, minHeight: 0 }}>
@@ -135,6 +127,15 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
                 </Widget>
             </section>
 
+            <section>
+                <ActivityIndicators 
+                    config={activityIndicatorsConfig}
+                    loading={loading}
+                    title={t("Activity Indicators")}
+                    className="small-content"
+                />
+            </section>
+
             <section>
                 <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
                     <ImageCarousel

package/src/@daf/pages/Summary/Minesite/components/LocationMap/index.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx'
+import Map from '../../../../../core/components/Dashboard/Map/index.jsx'
+import { getLinkValue } from '../../../../../../helpers/StringHelper.js'
+
+const LocationMap = ({
+    selectedPartners = {},
+    t = () => {},
+    params,
+    locationData = {},
+    loading = false,
+}) => {
+    const data = useMemo(() => {
+		return {
+			gps: locationData?.gps || {},
+			name: locationData?.name || "",
+			admin_level_01:
+				locationData?.linking?.SCL?.[locationData?.administrativeLevel1]?.name || "",
+			admin_level_02:
+				locationData?.linking?.SCL?.[locationData?.administrativeLevel2]?.name || "",
+			country: locationData?.country,
+		};
+	}, [locationData]);
+
+
+    return (
+        <Widget
+			title={t("Location")}
+			className="no-px no-pb-body overflow-hidden"
+			loading={loading}
+		>
+            <Map 
+                showSider={false}
+                primaryLink={true}
+				mapConfig={{
+					maxZoom: 10,
+				}}
+				type={"location"}
+				data={[data]}
+                renderTooltip={() => {
+					const country = data?.country;
+					const adminLevel1Label = t("Province")
+					const adminLevel2Label = t("Territory");
+
+					return [
+						{
+							label: t(adminLevel1Label),
+							value: data?.admin_level_01 || "--",
+						},
+						{
+							label: t(adminLevel2Label),
+							value: data?.admin_level_02 || "--",
+						},
+					];
+				}}
+            />
+		</Widget>
+    )
+}
+
+export default LocationMap

package/src/@daf/pages/Summary/Minesite/components/MineSiteDetails/config.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { Tag } from "antd";
+import { getTagColor } from "../../../../../utils/productTag.js";
+
+export function getKeyIndicatorsConfig({ t, data }) {
+	return [
+		{
+			label: t("Extraction Methods"),
+			render: () => {
+				if (!data?.extractionPoints?.length) {
+					return "-";
+				}
+				return (
+					<div
+						style={{
+							display: "flex",
+							flexWrap: "wrap",
+						}}
+					>
+						{data?.extractionPoints?.map((method) => {
+							return (
+								<Tag
+									key={method}
+									style={{
+										marginBottom: 8,
+									}}
+								>
+									{method}
+								</Tag>
+							);
+						})}
+					</div>
+				);
+			},
+		},
+		{
+			label: t("Products"),
+			render: () => {
+				if (data?.productsOfLocation?.length === 0) {
+					return "-";
+				}
+
+				return (
+					<div
+						style={{
+							display: "flex",
+							flexWrap: "wrap",
+						}}
+					>
+						{data?.productsOfLocation?.map((product) => {
+							return (
+								<Tag
+									key={product}
+									style={{
+										marginBottom: 8,
+									}}
+									color={getTagColor(product)}
+								>
+									{product}
+								</Tag>
+							);
+						})}
+					</div>
+				);
+			},
+		},
+		{
+			label: t("Number of Workers on Site"),
+			render: () => {
+				if (!data.workers) {
+					return "-";
+				}
+				return data.workers;
+			},
+		},
+	];
+}

package/src/@daf/pages/Summary/Minesite/components/MineSiteDetails/index.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react'
+import { getKeyIndicatorsConfig } from './config.js'
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx'
+
+const MineSiteDetails = ({
+    locationData = {},
+    loading = false,
+    t = () => {},
+    options = {}
+}) => {
+
+    const data = useMemo(() => {
+		return {
+			extractionPoints: (locationData?.extractionMethod || []).map((method) => {
+				const _method = options?.extractionMethodsOptions?.find(
+					(option) => option.value === method,
+				)?.label;
+
+				return _method;
+			}),
+			products: (
+				(locationData?.products || []).map((product) => product.typeOfProduct) || []
+			).map((product) => {
+				const _product = options?.minerals?.find(
+					(option) => option.value === product,
+				)?.label;
+
+				return _product;
+			}),
+			workers: locationData?.totalNumberOfWorkers || 0,
+		};
+	}, [locationData, options]);
+
+    const config = useMemo(() => getKeyIndicatorsConfig({ t, data }), [t, data]);
+
+    return (
+        <KeyIndicatorsWidget
+            title={t("Mine Site Details")}
+            className="value-center small-content row-content-col"
+            config={config}
+            loading={loading}
+            widgetClassName="custom-width-b"
+        />
+    )
+}
+
+export default MineSiteDetails

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/config.js

@@ -0,0 +1,26 @@
+export const IconNodesConfig = {
+	operators: {
+		name: "nashiriki::Operators",
+		icon: "Worker",
+		order: 1,
+		emptyName: "no-operators",
+	},
+	traders: {
+		name: "nashiriki::Traders",
+		icon: "Handshake",
+		order: 2,
+		emptyName: "no-traders",
+	},
+	government: {
+		name: "nashiriki::Government",
+		icon: "KYC",
+		order: 3,
+		emptyName: "no-government",
+	},
+	other: {
+		name: "nashiriki::Other",
+		icon: "CivilSociety",
+		order: 4,
+		emptyName: "no-other",
+	},
+};

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/helper.js

@@ -0,0 +1,64 @@
+import { IconNodesConfig } from './config.js';
+
+export const getStakeholderMappingData = ({data, locationData, id, options, t, goTo, selectedPartners}) => {
+    const _data = data;
+
+    return {
+        id: id,
+        name: locationData?.name || "",
+        country: {
+            label:
+                options?.countries?.find((country) => country.value === locationData?.country)
+                    ?.label || "",
+            value: (locationData?.country || "").toLowerCase() || "",
+        },
+        onClick: () => goTo(`/app/view/production-sites/${id}`),
+        totalSources: selectedPartners?.partners?.length || 0,
+        backgroundColor: "#FFD6E7",
+        iconColor: "#C41D7F",
+
+        icon: "DashboardLocations",
+        children: Object.keys(_data)?.map((key, index) => {
+            return {
+                id: key,
+                name: t(IconNodesConfig[key]?.name),
+                icon: IconNodesConfig[key]?.icon,
+                order: IconNodesConfig[key]?.order || index + 1,
+                activeColour: "#b6f5ec",
+                iconHoverColor: "#fff",
+                hoverColor: "#36cfca",
+                content: _data[key].length,
+                emptyName: IconNodesConfig[key]?.emptyName
+                    ? t(`nashiriki::${IconNodesConfig[key]?.emptyName}`)
+                    : undefined,
+                children: (_data[key] || [])?.map((child) => {
+                    return {
+                        id: child?.datastakeId || "",
+                        name: child?.name || "",
+                        country: {
+                            label:
+                                options?.countries?.find(
+                                    (country) => country.value === child?.country,
+                                )?.label || "",
+                            value: child?.country ? child?.country?.toLowerCase() : "",
+                        },
+
+                        icon: "DashboardStakeholder",
+                        onClick: () => {
+                            if (child?.type === "operator") {
+                                goTo(`/app/summary/operators/${child.datastakeId}`);
+                                return;
+                            }
+
+                            goTo(`/app/view/stakeholders/${child.datastakeId}`);
+                        },
+                        totalSources: child?.sources || 0,
+                        tooltipHeader: t("nashiriki::link-details"),
+                        tooltipLabel: t("nashiriki::sources-reporting"),
+                        value: child?.sources || 0,
+                    };
+                }),
+            };
+        }),
+    };
+}

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/index.js

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getStakeholderMappingData } from './helper.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import StakeholderMappings from '../../../../../core/components/Graphs/StakeholderMappings/index.jsx';
+
+const StakeholderMapping = ({
+    t = () => {},
+    id,
+    options = {},
+    goTo = () => {},
+    selectedPartners = {},
+    locationData = {},
+}) => {
+
+    const defaultFilter = useMemo(() => {
+		return {
+			basepath: "analytics",
+			url: "/widgets/information-map-graph",
+			defaultData: [],
+			stop: selectedPartners?.loading,
+			filters: {
+				datastakeId: id,
+				sources: selectedPartners?.partners || [],
+				coreSubject: "location",
+				filterBySources: false,
+				metrics: {
+					operator: ['operator'],
+					government: ['custom', 'governance'],
+					trader: ['trade'],
+					other: ['civilSociety', 'international'],
+				}
+			},
+		};
+	}, [selectedPartners, id]);
+
+    const { data, loading } = useWidgetFetch({config: defaultFilter});
+
+    const graphData = useMemo(() => {
+        return getStakeholderMappingData({data, locationData, id, options, t, goTo, selectedPartners});
+    }, [data, locationData, id, options, t, goTo, selectedPartners]);
+
+    return (
+		<Widget
+			loading={loading}
+			title={t("Stakeholder Mapping")}
+			className={"with-border-header no-px no-p-body"}
+		>
+			<div style={{ height: 600 }}>
+				<StakeholderMappings data={graphData} t={t} />
+			</div>
+		</Widget>
+    )
+}
+
+export default StakeholderMapping