datastake-daf 0.6.781 → 0.6.783

package/dist/utils/index.js

@@ -7211,6 +7211,17 @@ function convertUndefinedToNull(obj) {
   }
   return obj;
 }
+const removeKeysFromObject = (obj = {}, keys = []) => {
+  if (typeof obj !== 'object' || obj === null) return obj;
+  const result = {};
+  for (const key of Object.keys(obj)) {
+    if (!keys.includes(key)) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+};
+const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);
 
 ({
   t: PropTypes__default["default"].func,
@@ -14935,6 +14946,7 @@ exports.handleError = handleError;
 exports.handleInfo = handleInfo;
 exports.handleSuccess = handleSuccess;
 exports.handleWarning = handleWarning;
+exports.hasKeyInObject = hasKeyInObject;
 exports.hasNotChanged = hasNotChanged;
 exports.isEmptyOrSpaces = isEmptyOrSpaces;
 exports.isModuleApproved = isModuleApproved;
@@ -14950,6 +14962,7 @@ exports.modules = modules;
 exports.nowToIso = nowToIso;
 exports.processConfig = processConfig;
 exports.propHasValue = propHasValue;
+exports.removeKeysFromObject = removeKeysFromObject;
 exports.renderBreadCrumbs = renderBreadCrumbs;
 exports.renderDateFormatted = renderDateFormatted;
 exports.renderNumber = renderNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.781",
+	"version": "0.6.783",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Map/ChainIcon/Markers/StakeholderMarker.js

@@ -88,6 +88,10 @@ export default function StakeholderIcon({
 	}, [parentId, allData]);
 
 	useEffect(() => {
+		if (selectedMarkersId.length === 0 || !isSelected) {
+			return;
+		}
+
 		linkNodesData.map((node) => {
 			const isConnectingToStakeholder = node.isStakeholder;
 			const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
@@ -101,13 +105,6 @@ export default function StakeholderIcon({
 			const stakeholderLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
 			let endLatLng = L.latLng(node.gps.latitude, node.gps.longitude);
 
-			const areNextToEachOther =
-				targetMarkerIndex === index + 1 ||
-				targetMarkerIndex === index - 1 ||
-				(index === 0 && targetMarkerIndex === node.totalStakeholders - 1) ||
-				(targetMarkerIndex === 0 && index === node.totalStakeholders - 1);
-			const areOnlyTwoSiblings = node.totalStakeholders === 2;
-
 			if (isExtraSmallMarker(zoom) && !isForceOpen) {
 				createPolyline({
 					L,
@@ -118,6 +115,7 @@ export default function StakeholderIcon({
 					isSelected,
 					id,
 					listOfPolylines: polylinesRef.current,
+					animated: true,
 				});
 				return;
 			}
@@ -137,75 +135,8 @@ export default function StakeholderIcon({
 					y + nodePoint.y + center.top,
 				);
 				endLatLng = mapRef.layerPointToLatLng(endPoint);
-
-				if (isSibling && (!areNextToEachOther || areOnlyTwoSiblings)) {
-					if (areOnlyTwoSiblings) {
-						buildCurveWIthTwoSiblings({
-							mapRef,
-							startLatLng: stakeholderLatLng,
-							endLatLng,
-							zoom,
-							isSelected,
-							id,
-						});
-						return;
-					}
-
-					const total = node.totalStakeholders;
-					let from = index;
-					let to = targetMarkerIndex;
-					let flip = false;
-
-					const forwardDistance = (to - from + total) % total;
-					const backwardDistance = (from - to + total) % total;
-
-					if (backwardDistance < forwardDistance) {
-						[from, to] = [to, from];
-						flip = true;
-					}
-
-					const intermediateIndices = [];
-					for (let i = 1; i < (to - from + total) % total; i++) {
-						intermediateIndices.push((from + i) % total);
-					}
-
-					const indices = [from, ...intermediateIndices, to];
-
-					const intermediatePoints = [];
-
-					for (const i of indices) {
-						const { x, y } = createCurvePath({
-							zoom,
-							totalMarkers: node.totalStakeholders,
-							markerIndex: i,
-						});
-
-						const point = centerPoint.add(L.point(x, y));
-						const latlng = mapRef.layerPointToLatLng(point);
-						intermediatePoints.push(latlng);
-					}
-
-					const latlngs = flip
-						? [endLatLng, ...intermediatePoints, stakeholderLatLng]
-						: [stakeholderLatLng, ...intermediatePoints, endLatLng];
-
-					const layerPoints = latlngs.map((latlng) => mapRef.latLngToLayerPoint(latlng));
-
-					const path = buildSmoothCurve(layerPoints, mapRef, flip);
-
-					const curve = L?.curve?.(path, {
-						color: "var(--base-gray-70)",
-						weight: isExtraSmallMarker(zoom) ? 0 : 1,
-						opacity: isSelected ? 1 : 0.5,
-						smoothFactor: 1,
-						id,
-					});
-
-					mapRef.addLayer(curve);
-					return;
-				}
 			}
-
+			// Always use straight lines
 			createPolyline({
 				L,
 				mapRef,
@@ -216,9 +147,10 @@ export default function StakeholderIcon({
 				isSelected,
 				id,
 				listOfPolylines: polylinesRef.current,
+				animated: true,
 			});
 		});
-	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
+	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen, selectedMarkersId]);
 
 	return (
 		<>
@@ -233,6 +165,7 @@ export default function StakeholderIcon({
 					onClickLink: () => {
 						onClickLink(data);
 					},
+					isNewTab: true,
 				})}
 				getPopupContainer={(triggerNode) => {
 					const mapElement = document.getElementById("map");

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -48,6 +48,7 @@ export default function LocationIcon({
 		const nodes = [];
 		const links = data.links || [];
 
+		// Add links from the location itself
 		links.forEach((link) => {
 			allData.forEach((d) => {
 				if (d.datastakeId === link) {
@@ -68,8 +69,49 @@ export default function LocationIcon({
 			});
 		});
 
+		// ADD: Also include links from this location's stakeholders
+		const stakeholders = data.stakeholders || [];
+		stakeholders.forEach((stakeholder) => {
+			const stakeholderLinks = stakeholder.links || [];
+			stakeholderLinks.forEach((link) => {
+				allData.forEach((d) => {
+					// Check if it's a direct location link
+					if (d.datastakeId === link) {
+						// Avoid duplicates
+						if (!nodes.find(n => n.datastakeId === link && !n.isStakeholder)) {
+							nodes.push({
+								...d,
+								fromStakeholderId: stakeholder.datastakeId,
+							});
+						}
+					}
+					// Check if it's a stakeholder link
+					if (d.stakeholders && d.stakeholders.length > 0) {
+						d.stakeholders.forEach((targetStakeholder) => {
+							if (targetStakeholder.datastakeId === link) {
+								// Avoid duplicates
+								if (!nodes.find(n => 
+									n.isStakeholder && 
+									n.datastakeId === d.datastakeId && 
+									n.stakeholdersIndex === d.stakeholders.indexOf(targetStakeholder)
+								)) {
+									nodes.push({
+										...d,
+										isStakeholder: true,
+										totalStakeholders: d.stakeholders.length,
+										stakeholdersIndex: d.stakeholders.indexOf(targetStakeholder),
+										fromStakeholderId: stakeholder.datastakeId,
+									});
+								}
+							}
+						});
+					}
+				});
+			});
+		});
+
 		return nodes;
-	}, [JSON.stringify(allData), JSON.stringify(data.links), zoom]);
+	}, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
 		return data?.stakeholders || [];
@@ -90,7 +132,16 @@ export default function LocationIcon({
 		currentRoots.clear();
 		markersRef.current = [];
 
-		// Create new markers
+		// Only create stakeholder markers if this location or any of its stakeholders are selected
+		const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => 
+			selectedMarkersId.includes(stk.datastakeId)
+		);
+
+		if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
+			return;
+		}
+
+		// Create new markers only when selected
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
@@ -184,6 +235,8 @@ export default function LocationIcon({
 				isFromStakeholder: true,
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
+				stakeholderType: stakeholder.type,
+				animated: true,                     
 			});
 		});
 
@@ -199,12 +252,67 @@ export default function LocationIcon({
 			rootsMapRef.current.clear();
 			markersRef.current = [];
 		};
-	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
+	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
-	linkedNodesData.map((node) => {
-		const id = `${data.datastakeId}-${node.datastakeId}`;
+// Only create polylines for linked nodes when something is selected
+useEffect(() => {
+	if (selectedMarkersId.length === 0) {
+		return;
+	}
+
+	// IMPORTANT: Only draw links if this location is actually selected
+	// Not just highlighted as part of the chain
+	if (!isSelected) {
+		return;
+	}
+
+	// Filter linkedNodesData to only include nodes that are in the selected chain
+	const relevantLinks = linkedNodesData.filter(node => {
+		// Check if the target node (location) is in the selected markers
+		const targetLocationInSelection = selectedMarkersId.includes(node.datastakeId);
+		
+		// If connecting to a stakeholder, check if that stakeholder is selected
+		if (node.isStakeholder) {
+			const stakeholderInSelection = node.stakeholdersIndex !== undefined && 
+				selectedMarkersId.includes(node.datastakeId);
+			return stakeholderInSelection;
+		}
+		
+		return targetLocationInSelection;
+	});
+
+	relevantLinks.forEach((node) => {
+		const id = node.fromStakeholderId 
+			? `${node.fromStakeholderId}-${node.datastakeId}` 
+			: `${data.datastakeId}-${node.datastakeId}`;
 		const isConnectingToStakeholder = node.isStakeholder;
-		const centerLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
+		
+		// If the link is from a stakeholder, start from the stakeholder position
+		let startLatLng;
+		if (node.fromStakeholderId) {
+			// Find the stakeholder index in this location's stakeholders
+			const stakeholderIndex = stakeholdersOfLocation.findIndex(
+				s => s.datastakeId === node.fromStakeholderId
+			);
+			
+			if (stakeholderIndex !== -1) {
+				const { x, y } = getStakeholderPosition({
+					zoom,
+					totalMarkers: stakeholdersOfLocation.length,
+					markerIndex: stakeholderIndex,
+				});
+				
+				const centerLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
+				const centerPoint = mapRef.latLngToLayerPoint(centerLatLng);
+				const stakeholderPoint = centerPoint.add(L.point(x, y));
+				startLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
+			} else {
+				startLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
+			}
+		} else {
+			startLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
+		}
+		
 		let endLatLng = L.latLng(node.gps.latitude, node.gps.longitude);
 		const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
 
@@ -225,15 +333,15 @@ export default function LocationIcon({
 		createPolyline({
 			L,
 			mapRef,
-			startLatLng: centerLatLng,
+			startLatLng,
 			endLatLng,
-
 			isSelected: isConnectingToStakeholderSelected,
 			id,
 			zoom,
 			listOfPolylines: polylinesRef.current,
 		});
 	});
+}, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
 
 	return (
 		<Popover

package/src/@daf/core/components/Dashboard/Map/ChainIcon/utils.js

@@ -5,13 +5,14 @@ const VILLAGE = "village";
 const EXPORTER = "exporter";
 const PROCESSOR = "mineralProcessor";
 const DEPOT = "depot";
+const OPERATOR = "miningOperator";
 
 const MAX_EXTRA_SMALL_ZOOM_THRESHOLD = 2;
 const MAX_SMALL_ZOOM_THRESHOLD = 3;
 const MAX_MEDIUM_ZOOM_THRESHOLD = 6;
 
 const LOCATION_TYPES = [MINE_SITE, VILLAGE];
-const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT];
+const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT, OPERATOR];
 
 const RADIUS_SMALL = 15;
 const RADIUS_MEDIUM = 35;
@@ -100,7 +101,6 @@ export function getStakeholderPosition({ zoom, totalMarkers, markerIndex }) {
 
 	let radius;
 	let center = {
-		// NOT BEING USED FOR NOW AND MAYBE NEVER
 		left: 0,
 		top: 0,
 	};
@@ -117,6 +117,32 @@ export function getStakeholderPosition({ zoom, totalMarkers, markerIndex }) {
 	return { x, y, center, radius, angleDeg };
 }
 
+function applyAnimationDirect(el, isShortLink) {
+	if (!(el instanceof SVGElement) || isShortLink) return;
+  
+	el.style.strokeDasharray = "10, 10";
+	el.style.strokeDashoffset = "0";
+  
+	el.style.animation = "dash-flow 1.2s linear infinite";
+  
+	el.classList.add('animated-polyline');
+}
+
+function removeAnimationFromElement(element) {
+	if (!element) return;
+	
+	element.classList.remove('animated-polyline');
+	element.style.animation = '';
+	element.style.strokeDasharray = '';
+}
+
+function applyAnimationToPolyline(polyline, isShortLink) {
+	const element = polyline.getElement();
+	if (element) {
+		applyAnimationDirect(element, isShortLink);
+	}
+}
+
 export function createPolyline({
 	L,
 	startLatLng,
@@ -127,32 +153,62 @@ export function createPolyline({
 	listOfPolylines = [],
 	isFromStakeholder = false,
 	isForceOpen = false,
+	stakeholderType = null,
+	animated = false,
+	mapRef
 }) {
-	const width = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
+	const lineWidth = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
+
+	const isShortLink = stakeholderType === OPERATOR || isFromStakeholder;
+	const shouldAnimate = animated;
 
-	const coordinates = [
+	const lineCoordinates = [
 		[startLatLng.lat, startLatLng.lng],
 		[endLatLng.lat, endLatLng.lng],
 	];
-	const style = {
+
+	const polylineStyle = {
 		color: "var(--base-gray-70)",
-		weight: width,
-		opacity: 0.5,
-		smoothFactor: 1,
+		weight: lineWidth,
+		opacity: isSelected ? 1 : 0.5,
+		smoothFactor: 0,
 		id,
-		dashArray: !isSelected ? "5, 5" : "0, 0",
+		dashArray: isShortLink ? "0, 0" : (shouldAnimate ? "10, 10" : (!isSelected ? "5, 5" : "10, 10")),
+		renderer: L.svg()
 	};
 
-	const newPolyline = L.polyline(coordinates, style);
-
-	if (listOfPolylines.find((p) => p.options.id === id)) {
-		const polylineToUpdateCoordinates = listOfPolylines.find((p) => p.options.id === id);
-		polylineToUpdateCoordinates.setLatLngs(coordinates);
-		polylineToUpdateCoordinates.setStyle(style);
-	} else {
-		listOfPolylines.push(newPolyline);
+	const existingPolyline = listOfPolylines.find(p => p.options.id === id);
+
+	if (existingPolyline) {
+		removeAnimationFromElement(existingPolyline.getElement());
+		
+		existingPolyline.setLatLngs(lineCoordinates);
+		existingPolyline.setStyle(polylineStyle);
+		
+		if (shouldAnimate && isSelected) {
+			existingPolyline.once('add', () => {
+				applyAnimationToPolyline(existingPolyline, isShortLink);
+			});
+			
+			applyAnimationToPolyline(existingPolyline, isShortLink);
+		}
+		
+		return existingPolyline;
 	}
 
+	const newPolyline = L.polyline(lineCoordinates, polylineStyle);
+	
+	newPolyline.addTo(mapRef);
+	listOfPolylines.push(newPolyline);
+	
+	if (shouldAnimate && isSelected) {
+		newPolyline.once('add', () => {
+			applyAnimationToPolyline(newPolyline, isShortLink);
+		});
+		
+		applyAnimationToPolyline(newPolyline, isShortLink);
+	}
+	
 	return newPolyline;
 }
 

package/src/@daf/core/components/Dashboard/Map/helper.js

@@ -369,6 +369,7 @@ export function useMapHelper({
 							onClickLink={onClickLink}
 							activeStakeholder={activeStakeholder}
 							setActiveStakeholder={setActiveStakeholder}
+							mapRef={mapRef}
 						/>,
 					);
 

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -31,7 +31,7 @@ export const useMap = ({
 	const container = createRef();
 	const [data, setData] = useState([]);
 	const [mapRef, setMapRef] = useState(null);
-	const { TILE_LAYER_URL, MAP_TOKEN } = useMapConfig({ app, isSatellite });
+	const { TILE_LAYER_URL, MAP_TOKEN } = useMapConfig({ app, isSatellite, mapRef: container });
 	const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = useState(false);
 	const [mapCenter, setMapCenter] = useState([0, 0]);
 	const [emptyStateIsVisible, setEmptyStateIsVisible] = useState(false);
@@ -48,6 +48,7 @@ export const useMap = ({
 		const stakeToLoc = new Map();
 		const nodeTypes = new Map();
 
+		// Build the graph
 		for (const loc of data) {
 			const locId = loc.datastakeId;
 			nodeTypes.set(locId, loc.type);
@@ -81,34 +82,45 @@ export const useMap = ({
 
 		const highlightTable = {};
 
+		// Perform BFS/DFS to find all connected nodes in the entire chain
 		for (const [node] of graph) {
 			const highlighted = new Set();
+			const queue = [node];
+			const visited = new Set([node]);
 			
-			highlighted.add(node);
-			
-			const nodeIsStakeholder = !isLocation(nodeTypes.get(node));
-			if (nodeIsStakeholder && stakeToLoc.has(node)) {
-				const parentLoc = stakeToLoc.get(node);
-				highlighted.add(parentLoc);
-			}
-			
-			for (const neighbor of graph.get(node) || []) {
-				const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+			while (queue.length > 0) {
+				const current = queue.shift();
+				highlighted.add(current);
 				
-				if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
-					const neighborParent = stakeToLoc.get(neighbor);
-					
-					if (
-						(isLocation(nodeTypes.get(node)) && neighborParent === node) ||
-						(nodeIsStakeholder && stakeToLoc.get(node) === neighborParent)
-					) {
-						highlighted.add(neighbor);
-					} else {
+				// Add parent location if current is stakeholder
+				const currentIsStakeholder = !isLocation(nodeTypes.get(current));
+				if (currentIsStakeholder && stakeToLoc.has(current)) {
+					const parentLoc = stakeToLoc.get(current);
+					if (!visited.has(parentLoc)) {
+						highlighted.add(parentLoc);
+						visited.add(parentLoc);
+						queue.push(parentLoc);
+					}
+				}
+				
+				// Traverse all neighbors
+				for (const neighbor of graph.get(current) || []) {
+					if (!visited.has(neighbor)) {
+						visited.add(neighbor);
+						queue.push(neighbor);
 						highlighted.add(neighbor);
-						highlighted.add(neighborParent);
+						
+						// If neighbor is stakeholder, add its parent location
+						const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+						if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
+							const neighborParent = stakeToLoc.get(neighbor);
+							if (!visited.has(neighborParent)) {
+								highlighted.add(neighborParent);
+								visited.add(neighborParent);
+								queue.push(neighborParent);
+							}
+						}
 					}
-				} else {
-					highlighted.add(neighbor);
 				}
 			}
 
@@ -151,10 +163,21 @@ export const useMap = ({
 		destroyAllPopovers();
 		setSelectedMarkersId((prev) => {
 			if (prev.includes(clickedMarker.datastakeId)) {
+				// Deselecting - clear polylines
 				openPopupIdRef.current = null;
 				setMarkerWithPopup(null);
 				return [];
 			} else {
+				// CLEAR OLD POLYLINES BEFORE SELECTING NEW MARKER
+				if (polylinesRef.current.length > 0) {
+					polylinesRef.current.forEach((polyline) => {
+						if (mapRef.hasLayer(polyline)) {
+							mapRef.removeLayer(polyline);
+						}
+					});
+					polylinesRef.current = [];
+				}
+				
 				setMarkerWithPopup(isStakeholder(clickedMarker.type) ? clickedMarker : null);
 				const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
 				openPopupIdRef.current = clickedMarker.datastakeId;
@@ -191,12 +214,22 @@ export const useMap = ({
 				});
 			}
 		}
+		
+		if (type === "chain" && selectedMarkersId.length === 0) {
+			if (polylinesRef.current.length) {
+				polylinesRef.current.forEach((polyline) => {
+					if (mapRef.hasLayer(polyline)) {
+						mapRef.removeLayer(polyline);
+					}
+				});
+				polylinesRef.current = [];
+			}
+		}
+		
 		clearMapMarkers();
 		if (data) {
-			// Filters out locations that are not connected to any stakeholders
-			const excludedType = ['village', 'town', 'area', 'territory']
 			const filteredData = data?.filter((obj) => 
-				!excludedType.includes(obj?.type) && (obj?.stakeholders?.length > 0 || 
+				obj.type === 'mineSite' || (obj?.stakeholders?.length > 0 || 
 				data.some((other) => 
 				  other.datastakeId !== obj.datastakeId &&
 				  (other.stakeholders || []).some((stk) =>
@@ -218,9 +251,11 @@ export const useMap = ({
 				);
 			});
 
-			polylinesRef.current.forEach((polyline) => {
-				mapRef.addLayer(polyline);
-			});
+			if (selectedMarkersId.length > 0) {
+				polylinesRef.current.forEach((polyline) => {
+					mapRef.addLayer(polyline);
+				});
+			}
 
 			mapRef.invalidateSize();
 			mapRef.fire("moveend");

package/src/@daf/core/components/Dashboard/Map/style.js

@@ -7,6 +7,8 @@ const Style = styled.div`
   width: 100%;
   height: 472px;
 
+  
+
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -109,11 +111,24 @@ const Style = styled.div`
       align-items: center;
     }
 
-	.marker-chain {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+    .marker-chain {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .animated-polyline {
+      stroke-dasharray: 10 10;
+      animation: dash-flow 1.5s linear infinite;
+      stroke-linecap: round;
+    }
+
+    @keyframes dash-flow {
+      to {
+        stroke-dashoffset: -20;
+      }
+    }
+
     
   }
 

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

@@ -82,7 +82,7 @@ const CycleOutcomes = ({
                     <section style={{ flex: 1 }}>
                         <StatCard
                             title={t("Total Area Restored")}
-                            value={totalAreaRestored?Number(totalAreaRestored.current).toLocaleString() : 0}
+                            value={totalAreaRestored?Number(totalAreaRestored.current).toLocaleString() + " ha" : 0 + " ha"}
                             icon="Tree"
                             change={totalAreaRestoredChange}
                         />