datastake-daf 0.6.775 → 0.6.777

package/dist/utils/index.js

@@ -7211,17 +7211,6 @@ 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,
@@ -14946,7 +14935,6 @@ exports.handleError = handleError;
 exports.handleInfo = handleInfo;
 exports.handleSuccess = handleSuccess;
 exports.handleWarning = handleWarning;
-exports.hasKeyInObject = hasKeyInObject;
 exports.hasNotChanged = hasNotChanged;
 exports.isEmptyOrSpaces = isEmptyOrSpaces;
 exports.isModuleApproved = isModuleApproved;
@@ -14962,7 +14950,6 @@ 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.775",
+	"version": "0.6.777",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -88,10 +88,6 @@ 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}`;
@@ -105,6 +101,13 @@ 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,
@@ -115,7 +118,6 @@ export default function StakeholderIcon({
 					isSelected,
 					id,
 					listOfPolylines: polylinesRef.current,
-					animated: true,
 				});
 				return;
 			}
@@ -135,8 +137,75 @@ 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,
@@ -147,10 +216,9 @@ export default function StakeholderIcon({
 				isSelected,
 				id,
 				listOfPolylines: polylinesRef.current,
-				animated: true,
 			});
 		});
-	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen, selectedMarkersId]);
+	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
 
 	return (
 		<>

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

@@ -48,7 +48,6 @@ 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) {
@@ -69,49 +68,8 @@ 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), JSON.stringify(data.stakeholders), zoom]);
+	}, [JSON.stringify(allData), JSON.stringify(data.links), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
 		return data?.stakeholders || [];
@@ -132,16 +90,7 @@ export default function LocationIcon({
 		currentRoots.clear();
 		markersRef.current = [];
 
-		// 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
+		// Create new markers
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
@@ -235,8 +184,6 @@ export default function LocationIcon({
 				isFromStakeholder: true,
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
-				stakeholderType: stakeholder.type,
-				animated: true,                     
 			});
 		});
 
@@ -252,67 +199,12 @@ export default function LocationIcon({
 			rootsMapRef.current.clear();
 			markersRef.current = [];
 		};
-	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
+	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
 
-// 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}`;
+	linkedNodesData.map((node) => {
+		const id = `${data.datastakeId}-${node.datastakeId}`;
 		const isConnectingToStakeholder = node.isStakeholder;
-		
-		// 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);
-		}
-		
+		const centerLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
 		let endLatLng = L.latLng(node.gps.latitude, node.gps.longitude);
 		const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
 
@@ -333,15 +225,15 @@ useEffect(() => {
 		createPolyline({
 			L,
 			mapRef,
-			startLatLng,
+			startLatLng: centerLatLng,
 			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,14 +5,13 @@ 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, OPERATOR];
+const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT];
 
 const RADIUS_SMALL = 15;
 const RADIUS_MEDIUM = 35;
@@ -101,6 +100,7 @@ export function getStakeholderPosition({ zoom, totalMarkers, markerIndex }) {
 
 	let radius;
 	let center = {
+		// NOT BEING USED FOR NOW AND MAYBE NEVER
 		left: 0,
 		top: 0,
 	};
@@ -117,32 +117,6 @@ 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,
@@ -153,62 +127,32 @@ export function createPolyline({
 	listOfPolylines = [],
 	isFromStakeholder = false,
 	isForceOpen = false,
-	stakeholderType = null,
-	animated = false,
-	mapRef
 }) {
-	const lineWidth = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
-
-	const isShortLink = stakeholderType === OPERATOR || isFromStakeholder;
-	const shouldAnimate = animated;
+	const width = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
 
-	const lineCoordinates = [
+	const coordinates = [
 		[startLatLng.lat, startLatLng.lng],
 		[endLatLng.lat, endLatLng.lng],
 	];
-
-	const polylineStyle = {
+	const style = {
 		color: "var(--base-gray-70)",
-		weight: lineWidth,
-		opacity: isSelected ? 1 : 0.5,
-		smoothFactor: 0,
+		weight: width,
+		opacity: 0.5,
+		smoothFactor: 1,
 		id,
-		dashArray: isShortLink ? "0, 0" : (shouldAnimate ? "10, 10" : (!isSelected ? "5, 5" : "10, 10")),
-		renderer: L.svg()
+		dashArray: !isSelected ? "5, 5" : "0, 0",
 	};
 
-	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(coordinates, style);
 
-	const newPolyline = L.polyline(lineCoordinates, polylineStyle);
-	
-	newPolyline.addTo(mapRef);
-	listOfPolylines.push(newPolyline);
-	
-	if (shouldAnimate && isSelected) {
-		newPolyline.once('add', () => {
-			applyAnimationToPolyline(newPolyline, isShortLink);
-		});
-		
-		applyAnimationToPolyline(newPolyline, isShortLink);
+	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);
 	}
-	
+
 	return newPolyline;
 }
 

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

@@ -369,7 +369,6 @@ 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, mapRef: container });
+	const { TILE_LAYER_URL, MAP_TOKEN } = useMapConfig({ app, isSatellite });
 	const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = useState(false);
 	const [mapCenter, setMapCenter] = useState([0, 0]);
 	const [emptyStateIsVisible, setEmptyStateIsVisible] = useState(false);
@@ -48,7 +48,6 @@ 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);
@@ -82,45 +81,34 @@ 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]);
 			
-			while (queue.length > 0) {
-				const current = queue.shift();
-				highlighted.add(current);
-				
-				// 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);
-					}
-				}
+			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));
 				
-				// Traverse all neighbors
-				for (const neighbor of graph.get(current) || []) {
-					if (!visited.has(neighbor)) {
-						visited.add(neighbor);
-						queue.push(neighbor);
+				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 {
 						highlighted.add(neighbor);
-						
-						// 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);
-							}
-						}
+						highlighted.add(neighborParent);
 					}
+				} else {
+					highlighted.add(neighbor);
 				}
 			}
 
@@ -203,22 +191,12 @@ 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) => 
-				obj.type === 'mineSite' || (obj?.stakeholders?.length > 0 || 
+				!excludedType.includes(obj?.type) && (obj?.stakeholders?.length > 0 || 
 				data.some((other) => 
 				  other.datastakeId !== obj.datastakeId &&
 				  (other.stakeholders || []).some((stk) =>
@@ -240,11 +218,9 @@ export const useMap = ({
 				);
 			});
 
-			if (selectedMarkersId.length > 0) {
-				polylinesRef.current.forEach((polyline) => {
-					mapRef.addLayer(polyline);
-				});
-			}
+			polylinesRef.current.forEach((polyline) => {
+				mapRef.addLayer(polyline);
+			});
 
 			mapRef.invalidateSize();
 			mapRef.fire("moveend");

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

@@ -7,8 +7,6 @@ const Style = styled.div`
   width: 100%;
   height: 472px;
 
-  
-
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -111,24 +109,11 @@ const Style = styled.div`
       align-items: 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;
-      }
-    }
-
+	.marker-chain {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
     
   }
 

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

@@ -87,9 +87,10 @@ export const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData,
  * @param {Object} healthAndSafetyDistributionData - Distribution object
  * @param {Function} t - Translation function
  * @param {Function} renderTooltipJsx - Function to render tooltip JSX
+ * @param {string} tooltipTitle - Title to display in the tooltip (defaults to "Health and Safety")
  * @returns {JSX.Element|null} Tooltip content or null
  */
-export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx) => {
+export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety") => {
     // If empty or no data, return null to display nothing
     if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
         return null;
@@ -129,7 +130,7 @@ export const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafety
 
     // Show all items with their percentages
     return renderTooltipJsx({
-        title: t("Health and Safety"),
+        title: t(tooltipTitle),
         items: itemsWithData,
     });
 };