datastake-daf 0.6.773 → 0.6.775

package/dist/pages/index.js

@@ -7570,6 +7570,8 @@ const Style$f = styled__default["default"].div`
   width: 100%;
   height: 472px;
 
+  
+
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -7672,11 +7674,24 @@ const Style$f = styled__default["default"].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;
+      }
+    }
+
     
   }
 
@@ -8200,18 +8215,15 @@ 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;
 const RADIUS_LARGE = 60;
-const RADIUS_CURVE_SMALL = 10;
-const RADIUS_CURVE_MEDIUM = 15;
-const RADIUS_CURVE_LARGE = 20;
-const TENSION = 0.2;
 function isLocation(type) {
   return LOCATION_TYPES.includes(type);
 }
@@ -8268,7 +8280,6 @@ function getStakeholderPosition({
   const isLarge = isLargeMarker(zoom);
   let radius;
   let center = {
-    // NOT BEING USED FOR NOW AND MAYBE NEVER
     left: 0,
     top: 0
   };
@@ -8292,6 +8303,25 @@ function getStakeholderPosition({
     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);
+  }
+}
 function createPolyline({
   L,
   startLatLng,
@@ -8301,109 +8331,47 @@ function createPolyline({
   zoom,
   listOfPolylines = [],
   isFromStakeholder = false,
-  isForceOpen = false
+  isForceOpen = false,
+  stakeholderType = null,
+  animated = false,
+  mapRef
 }) {
-  const width = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
-  const coordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
-  const style = {
+  const lineWidth = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
+  const isShortLink = stakeholderType === OPERATOR || isFromStakeholder;
+  const shouldAnimate = animated;
+  const lineCoordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
+  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;
   }
-  return newPolyline;
-}
-function createCurvePath({
-  zoom,
-  totalMarkers,
-  markerIndex
-}) {
-  const radius = getCurvePointRadius(zoom);
-  const {
-    x,
-    y,
-    angleDeg
-  } = getAngleDeg(totalMarkers, markerIndex, radius);
-  return {
-    x,
-    y,
-    angleDeg
-  };
-}
-function getCurvePointRadius(zoom) {
-  const isSmall = isSmallMarker(zoom) || isExtraSmallMarker(zoom);
-  const isMedium = isMediumMarker(zoom);
-  if (isSmall) {
-    return RADIUS_SMALL + RADIUS_CURVE_SMALL;
-  } else if (isMedium) {
-    return RADIUS_MEDIUM + RADIUS_CURVE_MEDIUM;
-  } else {
-    return RADIUS_LARGE + RADIUS_CURVE_LARGE;
+  const newPolyline = L.polyline(lineCoordinates, polylineStyle);
+  newPolyline.addTo(mapRef);
+  listOfPolylines.push(newPolyline);
+  if (shouldAnimate && isSelected) {
+    newPolyline.once('add', () => {
+      applyAnimationToPolyline(newPolyline, isShortLink);
+    });
+    applyAnimationToPolyline(newPolyline, isShortLink);
   }
-}
-function buildSmoothCurve(layerPoints, mapRef) {
-  const path = [];
-  for (let i = 0; i < layerPoints.length - 1; i++) {
-    const p0 = layerPoints[i];
-    const p1 = layerPoints[i + 1];
-    const pPrev = layerPoints[i - 1] || p0;
-    const pNext = layerPoints[i + 2] || p1;
-    const cp1 = L__namespace.point(p0.x + (p1.x - pPrev.x) * TENSION, p0.y + (p1.y - pPrev.y) * TENSION);
-    const cp2 = L__namespace.point(p1.x - (pNext.x - p0.x) * TENSION, p1.y - (pNext.y - p0.y) * TENSION);
-    if (i === 0) {
-      path.push("M", [mapRef.layerPointToLatLng(p0).lat, mapRef.layerPointToLatLng(p0).lng]);
-    }
-    path.push("C", [mapRef.layerPointToLatLng(cp1).lat, mapRef.layerPointToLatLng(cp1).lng], [mapRef.layerPointToLatLng(cp2).lat, mapRef.layerPointToLatLng(cp2).lng], [mapRef.layerPointToLatLng(p1).lat, mapRef.layerPointToLatLng(p1).lng]);
-  }
-  return path;
-}
-function getSiblingCurveStrength(zoom) {
-  if (isExtraSmallMarker(zoom)) return RADIUS_CURVE_SMALL / 2;
-  if (isSmallMarker(zoom)) return RADIUS_CURVE_MEDIUM;
-  if (isMediumMarker(zoom)) return RADIUS_CURVE_LARGE;
-  return RADIUS_CURVE_LARGE;
-}
-function buildCurveWIthTwoSiblings({
-  mapRef,
-  startLatLng,
-  endLatLng,
-  zoom,
-  isSelected,
-  id
-}) {
-  const fromPoint = mapRef.latLngToLayerPoint(startLatLng);
-  const toPoint = mapRef.latLngToLayerPoint(endLatLng);
-  const midX = (fromPoint.x + toPoint.x) / 2;
-  const midY = (fromPoint.y + toPoint.y) / 2 + (isSmallMarker(zoom) ? RADIUS_CURVE_SMALL / 2 : 0);
-  const dx = toPoint.x - fromPoint.x;
-  const dy = toPoint.y - fromPoint.y;
-  const normal = L__namespace.point(-dy, dx);
-  const length = Math.sqrt(normal.x ** 2 + normal.y ** 2) || 1;
-  const normalized = normal.multiplyBy(1 / length);
-  const curveStrength = getSiblingCurveStrength(zoom);
-  const controlPoint = L__namespace.point(midX, midY).add(normalized.multiplyBy(curveStrength));
-  const latlngs = [startLatLng, mapRef.layerPointToLatLng(controlPoint), endLatLng];
-  const layerPoints = latlngs.map(latlng => mapRef.latLngToLayerPoint(latlng));
-  const path = buildSmoothCurve(layerPoints, mapRef);
-  const curve = L__namespace.curve(path, {
-    color: "var(--base-gray-70)",
-    weight: isExtraSmallMarker(zoom) ? 0 : 1.2,
-    opacity: 0.5,
-    smoothFactor: 1,
-    id,
-    dashArray: !isSelected ? "5, 5" : "0, 0"
-  });
-  mapRef.addLayer(curve);
+  return newPolyline;
 }
 
 const StakeholderMarker = styled__default["default"].div`
@@ -8705,6 +8673,9 @@ function StakeholderIcon$1({
     return null;
   }, [parentId, allData]);
   React.useEffect(() => {
+    if (selectedMarkersId.length === 0 || !isSelected) {
+      return;
+    }
     linkNodesData.map(node => {
       const isConnectingToStakeholder = node.isStakeholder;
       const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
@@ -8716,8 +8687,6 @@ function StakeholderIcon$1({
       const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
       const stakeholderLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
       let endLatLng = L__namespace.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: L__namespace,
@@ -8727,7 +8696,8 @@ function StakeholderIcon$1({
           zoom,
           isSelected,
           id,
-          listOfPolylines: polylinesRef.current
+          listOfPolylines: polylinesRef.current,
+          animated: true
         });
         return;
       }
@@ -8745,61 +8715,8 @@ function StakeholderIcon$1({
         const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
         const endPoint = L__namespace.point(x + nodePoint.x + center.left, 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__namespace.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);
-          const curve = L__namespace?.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: L__namespace,
         mapRef,
@@ -8809,10 +8726,11 @@ function StakeholderIcon$1({
         isFromStakeholder: false,
         isSelected,
         id,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        animated: true
       });
     });
-  }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
+  }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen, selectedMarkersId]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
       content: renderTooltipJsx({
@@ -8879,6 +8797,8 @@ function LocationIcon({
   const linkedNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
+
+    // Add links from the location itself
     links.forEach(link => {
       allData.forEach(d => {
         if (d.datastakeId === link) {
@@ -8898,8 +8818,45 @@ 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 = React.useMemo(() => {
     return data?.stakeholders || [];
   }, [data.stakeholders, zoom]);
@@ -8917,7 +8874,13 @@ 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 {
@@ -9003,7 +8966,9 @@ function LocationIcon({
         zoom,
         isFromStakeholder: true,
         isForceOpen,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        stakeholderType: stakeholder.type,
+        animated: true
       });
     });
     return () => {
@@ -9018,38 +8983,88 @@ function LocationIcon({
       rootsMapRef.current.clear();
       markersRef.current = [];
     };
-  }, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
-  linkedNodesData.map(node => {
-    const id = `${data.datastakeId}-${node.datastakeId}`;
-    const isConnectingToStakeholder = node.isStakeholder;
-    const centerLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
-    let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
-    const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
-    if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
-      const {
-        x,
-        y
-      } = getStakeholderPosition({
+  }, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
+
+  // Only create polylines for linked nodes when something is selected
+  React.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;
+
+      // 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__namespace.latLng(data.gps.latitude, data.gps.longitude);
+          const centerPoint = mapRef.latLngToLayerPoint(centerLatLng);
+          const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
+          startLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
+        } else {
+          startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
+        }
+      } else {
+        startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
+      }
+      let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
+      const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
+      if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
+        const {
+          x,
+          y
+        } = getStakeholderPosition({
+          zoom,
+          totalMarkers: node.totalStakeholders,
+          markerIndex: node.stakeholdersIndex
+        });
+        const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
+        const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
+        const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
+        endLatLng = mapRef.layerPointToLatLng(endPoint);
+      }
+      createPolyline({
+        L: L__namespace,
+        mapRef,
+        startLatLng,
+        endLatLng,
+        isSelected: isConnectingToStakeholderSelected,
+        id,
         zoom,
-        totalMarkers: node.totalStakeholders,
-        markerIndex: node.stakeholdersIndex
+        listOfPolylines: polylinesRef.current
       });
-      const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
-      const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
-      const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
-      endLatLng = mapRef.layerPointToLatLng(endPoint);
-    }
-    createPolyline({
-      L: L__namespace,
-      mapRef,
-      startLatLng: centerLatLng,
-      endLatLng,
-      isSelected: isConnectingToStakeholderSelected,
-      id,
-      zoom,
-      listOfPolylines: polylinesRef.current
     });
-  });
+  }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
     content: renderTooltipJsx({
       title: data.name,
@@ -9565,7 +9580,8 @@ function useMapHelper$1({
           link: link,
           onClickLink: onClickLink,
           activeStakeholder: activeStakeholder,
-          setActiveStakeholder: setActiveStakeholder
+          setActiveStakeholder: setActiveStakeholder,
+          mapRef: mapRef
         }));
         roots.current.push(root);
       } else if (type === "location") {
@@ -9770,7 +9786,8 @@ const useMap = ({
     MAP_TOKEN
   } = useMapConfig({
     app,
-    isSatellite
+    isSatellite,
+    mapRef: container
   });
   const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = React.useState(false);
   const [mapCenter, setMapCenter] = React.useState([0, 0]);
@@ -9787,6 +9804,8 @@ const useMap = ({
     const graph = new Map();
     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);
@@ -9811,26 +9830,45 @@ 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();
-      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));
-        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 {
+      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);
+          }
+        }
+
+        // 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);
         }
       }
       highlightTable[node] = [...highlighted];
@@ -9895,19 +9933,29 @@ 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 || data.some(other => other.datastakeId !== obj.datastakeId && (other.stakeholders || []).some(stk => (stk.links || []).includes(obj.datastakeId)))));
+      const filteredData = data?.filter(obj => obj.type === 'mineSite' || obj?.stakeholders?.length > 0 || data.some(other => other.datastakeId !== obj.datastakeId && (other.stakeholders || []).some(stk => (stk.links || []).includes(obj.datastakeId))));
       const maxTotal = Math.max(...(data || []).map(d => d.total));
       const dataToRender = type === "chain" ? filteredData : data;
       dataToRender.forEach((d, i) => {
         addIconToMapInitialy([d?.marker?.lat, d?.marker?.lng], "location", d.category || "mineSite", d, maxTotal, i);
       });
-      polylinesRef.current.forEach(polyline => {
-        mapRef.addLayer(polyline);
-      });
+      if (selectedMarkersId.length > 0) {
+        polylinesRef.current.forEach(polyline => {
+          mapRef.addLayer(polyline);
+        });
+      }
       mapRef.invalidateSize();
       mapRef.fire("moveend");
     }
@@ -40837,6 +40885,25 @@ styled__default["default"].div`
 	}
 `;
 
+/**
+ * Formats a number for display with locale-specific formatting
+ * @param {any} val - The value to format
+ * @param {boolean} doubleDigit - Whether to ensure single digit numbers are padded with a leading zero
+ * @returns {string} Formatted number string or '--' if input is not a number
+ */
+const renderNumber = (val, doubleDigit = false) => {
+  if (typeof val !== 'number') {
+    return '--';
+  }
+  const _string = Number(val).toLocaleString('en-us');
+  if (doubleDigit) {
+    if (_string.length === 1) {
+      return '0' + _string;
+    }
+  }
+  return _string;
+};
+
 styled__default["default"].div`
 	height: 333px;
 	width: calc(100% - 48px);
@@ -42851,6 +42918,551 @@ const calculateStatChange = (data, options = {}) => {
   };
 };
 
+/**
+ * Formats a date based on the time filter
+ * @param {dayjs.Dayjs} date - The date to format
+ * @param {boolean} breakLine - Whether to add a line break (for tooltips)
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @returns {string} Formatted date string
+ */
+const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
+  switch (timeFilter) {
+    case "daily":
+      return date.format("DD/MM");
+    case "weekly":
+      return `W${renderNumber(date.week())}`;
+    default:
+      // Monthly format: "Dec 24", "Jan 25", etc.
+
+      return breakLine ? `${capitalize(date.format("MMM"))}\n${date.format("YY")}` : `${capitalize(date.format("MMM"))} ${date.format("YY")}`;
+  }
+};
+
+/**
+ * Gets the time quantity string for dayjs operations
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @returns {string} Time quantity string ('days', 'weeks', 'months')
+ */
+const getTimeQuantity = (timeFilter = 'monthly') => {
+  return timeFilter === "monthly" ? "months" : timeFilter === "daily" ? "days" : "weeks";
+};
+
+/**
+ * Gets previous cumulative score from data before start date
+ * @param {Array} dates - Array of data objects with date field
+ * @param {dayjs.Dayjs} startDate - The start date
+ * @param {string} timeFilter - The time filter
+ * @param {string} valueField - The field name to extract value from (default: 'total')
+ * @returns {Object} Object with hasPreviousData, previousCumulativeScore, previousMaxScore
+ */
+const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total') => {
+  let previousCumulativeScore = 0;
+  let previousMaxScore = 0;
+  let hasPreviousData = false;
+  dates.forEach(d => {
+    const date = dayjs__default["default"](d.date, "YYYY-MM-DD");
+    if (!date.isValid()) return;
+    let isBeforeStart = false;
+    switch (timeFilter) {
+      case "daily":
+        isBeforeStart = date.isBefore(startDate, 'day');
+        break;
+      case "weekly":
+        isBeforeStart = date.isBefore(startDate, 'week');
+        break;
+      default:
+        isBeforeStart = date.isBefore(startDate, 'month');
+        break;
+    }
+    if (isBeforeStart) {
+      hasPreviousData = true;
+      const value = Number(d[valueField] || d.count || d.jobs || d.value || 0) || 0;
+      previousCumulativeScore += value;
+      previousMaxScore = Math.max(previousMaxScore, value);
+    }
+  });
+  return {
+    hasPreviousData,
+    previousCumulativeScore,
+    previousMaxScore
+  };
+};
+
+/**
+ * Processes chart data with time filtering support
+ * @param {Object} params - Parameters object
+ * @param {Array} params.mainData - Array of data objects with date and value fields
+ * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly')
+ * @param {Object} params.filters - Optional filters object with timeframe
+ * @param {boolean} params.isCumulative - Whether to calculate cumulative values (default: false)
+ * @param {string} params.valueField - Field name to extract value from (default: 'total', also checks 'count', 'jobs', 'value')
+ * @returns {Array} Processed chart data array
+ */
+const processChartDateData = ({
+  mainData,
+  timeFilter: filter,
+  filters = {},
+  isCumulative = false,
+  valueField = 'total'
+}) => {
+  if (!mainData || !Array.isArray(mainData) || mainData.length === 0) {
+    return [];
+  }
+  const timeQuantity = getTimeQuantity(filter);
+  const dates = mainData;
+  const _data = [];
+  let end = filters?.timeframe?.endDate || dayjs__default["default"]();
+  let start = filters?.timeframe?.startDate || dayjs__default["default"]().add(-12, timeQuantity);
+
+  // Normalize start and end to period boundaries
+  if (filter === "daily") {
+    start = start.startOf('day');
+    end = end.startOf('day');
+  } else if (filter === "weekly") {
+    start = start.startOf('week');
+    end = end.startOf('week');
+  } else {
+    start = start.startOf('month');
+    end = end.startOf('month');
+  }
+  let i = 0;
+  let cumulativeScore = 0;
+
+  // Calculate initial cumulative value if needed
+  if (isCumulative) {
+    const {
+      hasPreviousData,
+      previousCumulativeScore
+    } = getPreviousGraphData(dates, start, filter, valueField);
+    cumulativeScore = hasPreviousData ? previousCumulativeScore : 0;
+  }
+
+  // Loop until we reach the end date
+  let currentDate = start.clone();
+  while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
+    // Filter data points that fall within this period
+    const score = dates.filter(d => {
+      if (!d.date) return false;
+      switch (filter) {
+        case "daily":
+          return d.date === currentDate.format("YYYY-MM-DD");
+        case "weekly":
+          return dayjs__default["default"](d.date, "YYYY-MM-DD").week() === currentDate.week() && dayjs__default["default"](d.date, "YYYY-MM-DD").year() === currentDate.year();
+        default:
+          return dayjs__default["default"](d.date, "YYYY-MM-DD").format("YYYY-MM") === currentDate.format("YYYY-MM");
+      }
+    }).reduce((a, b) => {
+      const value = Number(b[valueField] || b.count || b.jobs || b.value || 0) || 0;
+      return a + value;
+    }, 0);
+    if (isCumulative) {
+      cumulativeScore += score;
+    }
+    _data.push({
+      date: getFormatDate(currentDate, false, filter),
+      value: isCumulative ? cumulativeScore : score,
+      period: score,
+      // Period value for tooltip
+      jobs: score,
+      // For compatibility with jobs field
+      month: currentDate.format('YYYY-MM-DD'),
+      // For compatibility
+      key: i
+    });
+    currentDate = currentDate.add(1, timeQuantity);
+    i++;
+  }
+  return _data;
+};
+
+/**
+ * Formats date axis labels, checking if already formatted
+ * @param {string} label - The label to format
+ * @param {Function} getFormatDateFn - Function to format dates
+ * @returns {string} Formatted date string
+ */
+const formatDateAxis = (label, getFormatDateFn) => {
+  if (!label) return label;
+
+  // Check if label is already in the correct format (MMM YY, DD/MM, or W#)
+  // If it matches our format patterns, return as-is
+  if (typeof label === 'string') {
+    // Check for MMM YY format (e.g., "Dec 24", "Jan 25")
+    if (/^[A-Z][a-z]{2} \d{2}$/.test(label)) {
+      return label;
+    }
+    // Check for DD/MM format (e.g., "03/11")
+    if (/^\d{2}\/\d{2}$/.test(label)) {
+      return label;
+    }
+    // Check for W# format (e.g., "W1", "W12")
+    if (/^W\d+$/.test(label)) {
+      return label;
+    }
+  }
+
+  // Otherwise, try to parse and format it
+  let date = dayjs__default["default"](label);
+
+  // If first attempt fails, try parsing as ISO date string
+  if (!date.isValid() && typeof label === 'string') {
+    date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY', 'DD/MM'], true);
+  }
+
+  // If it's a valid date, format it using getFormatDate
+  if (date.isValid() && getFormatDateFn) {
+    return getFormatDateFn(date, false);
+  }
+
+  // Return as-is if we can't parse it
+  return label;
+};
+
+/**
+ * Custom hook for time filtering functionality
+ * Provides state management and formatting functions for time-based charts
+ * 
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @returns {Object} Time filter state and utilities
+ */
+const useTimeFilter = ({
+  defaultFilter = 'monthly'
+} = {}) => {
+  const [timeFilter, setTimeFilter] = React.useState(defaultFilter);
+
+  // Memoized format date function bound to current timeFilter
+  const getFormatDateFn = React.useCallback((date, breakLine = false) => getFormatDate(date, breakLine, timeFilter), [timeFilter]);
+
+  // Memoized time quantity function bound to current timeFilter
+  const getTimeQuantityFn = React.useCallback(() => getTimeQuantity(timeFilter), [timeFilter]);
+
+  // Memoized date axis formatter
+  const formatDateAxisFn = React.useMemo(() => label => formatDateAxis(label, getFormatDateFn), [getFormatDateFn]);
+
+  // Process chart data with current time filter
+  const processData = React.useCallback(({
+    mainData,
+    filters = {},
+    isCumulative = false,
+    valueField = 'total'
+  }) => {
+    return processChartDateData({
+      mainData,
+      timeFilter,
+      filters,
+      isCumulative,
+      valueField
+    });
+  }, [timeFilter]);
+  return {
+    timeFilter,
+    setTimeFilter,
+    getFormatDate: getFormatDateFn,
+    getTimeQuantity: getTimeQuantityFn,
+    formatDateAxis: formatDateAxisFn,
+    processChartDateData: processData
+  };
+};
+
+const selectOptions$2 = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
+const RestoredArea = ({
+  restoredAreaChart,
+  t = s => s
+}) => {
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
+
+  // Map restoredAreaChart data to LineChart format with time filter support
+  // Y-axis: total/cumulated value
+  // X-axis: date (formatted based on timeFilter)
+  // Fill all periods in the range, even if empty
+  const restoredAreaChartData = React.useMemo(() => {
+    if (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0) {
+      return [];
+    }
+
+    // Process data with cumulative calculation (for restored area)
+    return processChartDateData({
+      mainData: restoredAreaChart,
+      isCumulative: true,
+      valueField: 'total'
+    });
+  }, [restoredAreaChart, processChartDateData]);
+
+  // Calculate max value for yAxis dynamically (round up to nearest 10)
+  const maxYValue = React.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]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Restored Area"),
+    className: "with-border-header h-w-btn-header",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions$2,
+        popupMatchSelectWidth: 120
+      })]
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(LineChart, {
+          animated: true,
+          isArea: true,
+          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,
+              style: {
+                fontSize: 12,
+                fill: '#666'
+              }
+            }
+          }
+        })
+      })
+    })
+  });
+};
+
+const selectOptions$1 = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
+const PlantingActivitiesTimeline = ({
+  activitiesTimelineChart,
+  t = s => s
+}) => {
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
+
+  // Map activitiesTimelineChart data to ColumnChart format with time filter support
+  // Data structure: [{count: 2, date: "2025-11-03"}]
+  // Fill all periods in the range, even if empty
+  const activitiesTimelineData = React.useMemo(() => {
+    if (!activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0) {
+      return [];
+    }
+
+    // Process data without cumulative calculation (for activities timeline)
+    return processChartDateData({
+      mainData: activitiesTimelineChart,
+      isCumulative: false,
+      valueField: 'count'
+    });
+  }, [activitiesTimelineChart, processChartDateData]);
+
+  // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+  const maxActivitiesYValue = React.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 /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Planting Activities Timeline"),
+    className: "with-border-header h-w-btn-header",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions$1,
+        popupMatchSelectWidth: 120
+      })]
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
+          data: activitiesTimelineData,
+          xFieldKey: "date",
+          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'
+              }
+            }
+          }
+        })
+      })
+    })
+  });
+};
+
 const CycleOutcomes = ({
   id,
   getSummaryDetail,
@@ -42911,223 +43523,6 @@ const CycleOutcomes = ({
       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 = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().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__default["default"](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 = React.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 = React.useMemo(() => {
-    return label => {
-      if (!label) return label;
-
-      // Try to parse the date using dayjs with various formats
-      let date = dayjs__default["default"](label);
-
-      // If first attempt fails, try parsing as ISO date string
-      if (!date.isValid() && typeof label === 'string') {
-        date = dayjs__default["default"](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 = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().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__default["default"](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 = React.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 /*#__PURE__*/jsxRuntime.jsx("section", {
     children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
       title: t("Restoration Cycle Outcomes"),
@@ -43169,172 +43564,17 @@ const CycleOutcomes = ({
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-            title: t("Restored Area"),
-            className: "with-border-header h-w-btn-header",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex flex-1 flex-column justify-content-center",
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex justify-content-center w-full",
-                children: /*#__PURE__*/jsxRuntime.jsx(LineChart, {
-                  animated: true,
-                  isArea: true,
-                  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'
-                      }
-                    }
-                  }
-                })
-              })
-            })
+          children: /*#__PURE__*/jsxRuntime.jsx(RestoredArea, {
+            restoredAreaChart: restoredAreaChart,
+            t: t
           })
         }), /*#__PURE__*/jsxRuntime.jsx("section", {
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-            title: t("Planting Activities Timeline"),
-            className: "with-border-header h-w-btn-header",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex flex-1 flex-column justify-content-center",
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex justify-content-center w-full",
-                children: /*#__PURE__*/jsxRuntime.jsx(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'
-                      }
-                    }
-                  }
-                })
-              })
-            })
+          children: /*#__PURE__*/jsxRuntime.jsx(PlantingActivitiesTimeline, {
+            activitiesTimelineChart: activitiesTimelineChart,
+            t: t
           })
         })]
       })]
@@ -43460,8 +43700,8 @@ const CyclePartners = ({
 };
 
 const HEALTH_SAFETY_COLORS = {
-  compliant: '#52C41A',
-  notCompliant: '#FF4D4F',
+  compliant: '#016C6E',
+  notCompliant: '#F97066',
   empty: '#D9D9D9'
 };
 const getIndicatorType = value => {
@@ -43530,8 +43770,9 @@ const isHealthAndSafetyDistributionEmpty = healthAndSafetyDistributionData => {
 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")
+    compliant: t("Available"),
+    notCompliant: t("Not available"),
+    empty: t("Not answered")
   };
   return Object.keys(healthAndSafetyDistributionData).map(key => {
     const color = HEALTH_SAFETY_COLORS[key] || '#D9D9D9';
@@ -43569,8 +43810,9 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
     return null;
   }
   const labels = {
-    compliant: t("Compliant"),
-    notCompliant: t("Not Compliant")
+    compliant: t("Available"),
+    notCompliant: t("Not available"),
+    empty: t("Not answered")
   };
 
   // Filter items with values > 0
@@ -43597,41 +43839,6 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
 };
 
 const HealthAndSafety = ({
-  activityData,
-  loading = false,
-  t = s => s
-}) => {
-  const healthAndSafetyDistributionData = React.useMemo(() => getHealthAndSafetyDistributionData(activityData), [activityData]);
-  const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
-  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
-  const getTooltipChildren = React.useCallback(item => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx), [t, isEmpty, healthAndSafetyDistributionData]);
-  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
-    loading: loading,
-    title: /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: t("Health and Safety")
-    }),
-    className: "with-border-header h-w-btn-header ",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        marginTop: "auto",
-        marginBottom: "auto"
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(Chart, {
-        mouseXOffset: 10,
-        mouseYOffset: 10,
-        changeOpacityOnHover: false,
-        data: pieData,
-        doConstraints: false,
-        isPie: true,
-        t: t,
-        isEmpty: isEmpty,
-        getTooltipChildren: getTooltipChildren
-      })
-    })
-  });
-};
-
-const CycleIndicators = ({
   id,
   getSummaryDetail,
   loading = false,
@@ -43639,18 +43846,26 @@ const CycleIndicators = ({
 }) => {
   const defaultConfig = React.useMemo(() => ({
     basepath: "planting-cycle",
-    url: `/summary/${id}/indicators`,
+    url: `/summary/${id}/filtered-piechart`,
+    filters: {
+      field: 'duosFormed'
+    },
     stop: !id
   }), [id]);
   const customGetData = React.useMemo(() => {
     if (getSummaryDetail && id) {
-      return ({
-        url,
-        params = {}
-      }) => {
+      return rest => {
+        const {
+          url,
+          filters: restFilters
+        } = rest;
         const match = url.match(/\/summary\/[^/]+\/(.+)/);
         if (match) {
           const [, type] = match;
+          // Pass filters as params for the query string
+          const params = {
+            ...(restFilters || {})
+          };
           return getSummaryDetail(id, type, params);
         }
         throw new Error(`Invalid URL format: ${url}`);
@@ -43659,213 +43874,60 @@ const CycleIndicators = ({
     return undefined;
   }, [getSummaryDetail, id]);
   const {
-    loading: indicatorsLoading,
-    data: indicatorsData
+    loading: pieChartLoading,
+    data: pieChartData
   } = useWidgetFetch({
     config: defaultConfig,
     getData: customGetData
   });
-  const {
-    participantsCount,
-    eventIncidents,
-    cyclePartners
-  } = indicatorsData;
-  const participantsCountChange = React.useMemo(() => {
-    if (!participantsCount) return null;
-    return calculateStatChange({
-      current: Number(participantsCount.current) || 0,
-      previous: Number(participantsCount.previous) || 0
-    }, {
-      tooltipText: t("In comparison to last cycle"),
-      format: 'absolute'
-    });
-  }, [participantsCount, t]);
-  const eventIncidentsChange = React.useMemo(() => {
-    if (!eventIncidents) return null;
-    return calculateStatChange({
-      current: Number(eventIncidents.current) || 0,
-      previous: Number(eventIncidents.previous) || 0
-    }, {
-      tooltipText: t("In comparison to last cycle"),
-      format: 'absolute'
-    });
-  }, [eventIncidents, t]);
-  return /*#__PURE__*/jsxRuntime.jsx("section", {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
-      title: t("Cycle Indicators"),
-      loading: loading,
-      className: "with-border-header h-w-btn-header",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          display: 'flex',
-          gap: '24px',
-          marginBottom: '24px'
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx("section", {
-          style: {
-            flex: 1
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
-            title: t("Activity Participants"),
-            value: participantsCount?.current ? Number(participantsCount?.current).toLocaleString() : 0,
-            icon: "partnerIcon",
-            change: participantsCountChange
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("section", {
-          style: {
-            flex: 1
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
-            title: t("Reported Incidents"),
-            value: eventIncidents?.current || 0,
-            icon: "ReportIncidents",
-            change: eventIncidentsChange
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          display: 'flex',
-          gap: '24px'
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx("section", {
-          style: {
-            flex: 1
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(CyclePartners, {
-            cyclePartners: cyclePartners,
-            loading: indicatorsLoading,
-            t: t
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("section", {
-          style: {
-            flex: 1
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(HealthAndSafety, {
-            activityData: indicatorsData,
-            loading: indicatorsLoading,
-            t: t
-          })
-        })]
-      })]
-    })
-  });
-};
 
-const GENDER_COLORS = ['#a0ebec', '#00aeb1'];
-const getGenderDistributionData = genderDistribution => {
-  if (Array.isArray(genderDistribution) && genderDistribution.length > 0) {
-    const firstItem = genderDistribution[0];
-    if (firstItem && (firstItem.totalFemale !== undefined || firstItem.totalMale !== undefined)) {
-      const totalFemale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalFemale) || 0), 0);
-      const totalMale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalMale) || 0), 0);
-      return {
-        Male: totalMale,
-        Female: totalFemale
-      };
-    }
-    const distribution = {};
-    genderDistribution.forEach(item => {
-      const gender = item?.gender || item?.label || item?.name || 'Unknown';
-      const count = item?.count || item?.value || item?.total || 0;
-      const normalizedGender = gender.toLowerCase() === 'male' ? 'Male' : gender.toLowerCase() === 'female' ? 'Female' : gender;
-      distribution[normalizedGender] = (distribution[normalizedGender] || 0) + count;
-    });
-    return distribution;
-  }
-  if (genderDistribution && typeof genderDistribution === 'object' && !Array.isArray(genderDistribution)) {
-    if (genderDistribution.genderDistribution && typeof genderDistribution.genderDistribution === 'object') {
-      return genderDistribution.genderDistribution;
-    }
-    if (genderDistribution.totalFemale !== undefined || genderDistribution.totalMale !== undefined) {
-      return {
-        Male: Number(genderDistribution.totalMale) || 0,
-        Female: Number(genderDistribution.totalFemale) || 0
-      };
-    }
-    if (genderDistribution.Male !== undefined || genderDistribution.Female !== undefined || genderDistribution.male !== undefined || genderDistribution.female !== undefined) {
-      return {
-        Male: genderDistribution.Male || genderDistribution.male || 0,
-        Female: genderDistribution.Female || genderDistribution.female || 0
-      };
-    }
-    return genderDistribution;
-  }
-  return {};
-};
-
-/**
- * Checks if the gender distribution data is empty
- * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
- * @returns {boolean} True if all values are 0 or empty
- */
-const isGenderDistributionEmpty = genderDistributionData => {
-  return Object.values(genderDistributionData).every(val => !val || val === 0);
-};
-
-/**
- * Calculates pie chart data from gender distribution
- * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
- * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
- */
-const calculateGenderPieData = genderDistributionData => {
-  const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
-  return Object.keys(genderDistributionData).map((key, index) => {
-    const color = GENDER_COLORS[index % GENDER_COLORS.length];
-    return {
-      value: genderDistributionData[key] || 0,
-      percent: total > 0 ? (genderDistributionData[key] || 0) / total : 0,
-      color: color,
-      label: key,
-      key: key
+  // Process the fetched pie chart data
+  // The API returns data in format: [{count: 1, duosFormed: "null"}, {count: 1, duosFormed: "no"}, {count: 1, duosFormed: "yes"}]
+  const healthAndSafetyDistributionData = React.useMemo(() => {
+    if (!pieChartData) return {
+      compliant: 0,
+      notCompliant: 0,
+      empty: 0
     };
-  });
-};
-const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
-  if (isEmpty) {
-    if (!Object.keys(genderDistributionData).length) {
-      return null;
-    }
-    return renderTooltipJsx({
-      title: t("Gender Distribution"),
-      items: Object.keys(genderDistributionData).map(k => ({
-        color: GENDER_COLORS[Object.keys(genderDistributionData).indexOf(k) % GENDER_COLORS.length],
-        label: k,
-        value: '0%'
-      }))
-    });
-  }
 
-  // Calculate total for percentage calculation
-  const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+    // If it's already a distribution object
+    if (pieChartData.compliant !== undefined || pieChartData.notCompliant !== undefined) {
+      return pieChartData;
+    }
 
-  // Show all gender items with percentages (matching the image format)
-  return renderTooltipJsx({
-    title: t("Gender Distribution"),
-    items: Object.keys(genderDistributionData).map((k, index) => {
-      const value = genderDistributionData[k] || 0;
-      const percent = total > 0 ? Math.round(value / total * 100) : 0;
-      return {
-        color: GENDER_COLORS[index % GENDER_COLORS.length],
-        label: k,
-        value: `${percent}%`
+    // If it's an array, process it
+    if (Array.isArray(pieChartData)) {
+      const distribution = {
+        compliant: 0,
+        notCompliant: 0,
+        empty: 0
       };
-    })
-  });
-};
+      pieChartData.forEach(item => {
+        const duosFormedValue = item.duosFormed;
+        const count = item.count || 0;
+
+        // Map duosFormed values to distribution categories
+        if (duosFormedValue === "yes" || duosFormedValue === true) {
+          distribution.compliant += count;
+        } else if (duosFormedValue === "no" || duosFormedValue === false) {
+          distribution.notCompliant += count;
+        } else if (duosFormedValue === "null" || duosFormedValue === null || duosFormedValue === undefined) {
+          distribution.empty += count;
+        }
+      });
+      return distribution;
+    }
 
-const GenderDistribution = ({
-  genderDistribution,
-  loading = false,
-  t = s => s
-}) => {
-  const genderDistributionData = React.useMemo(() => getGenderDistributionData(genderDistribution), [genderDistribution]);
-  const isEmpty = React.useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
-  const pieData = React.useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
-  const getTooltipChildren = React.useCallback(item => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx), [t, isEmpty, genderDistributionData]);
+    // Fallback: try to extract from activityData-like structure
+    return getHealthAndSafetyDistributionData(pieChartData);
+  }, [pieChartData]);
+  const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
+  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
+  const getTooltipChildren = React.useCallback(item => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx), [t, isEmpty, healthAndSafetyDistributionData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
-    loading: loading,
+    loading: loading || pieChartLoading,
     title: /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: t("Gender Distribution")
+      children: t("Health and Safety")
     }),
     className: "with-border-header h-w-btn-header ",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -43888,109 +43950,301 @@ const GenderDistribution = ({
   });
 };
 
-const JobsTimeline = ({
-  dayJobsTimeline,
+const CycleIndicators = ({
+  id,
+  getSummaryDetail,
   loading = false,
   t = s => s
 }) => {
-  const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
-  const formatDateAxis = React.useMemo(() => {
-    return label => {
-      if (!label) return label;
-
-      // Try to parse the date using dayjs with various formats
-      let date = dayjs__default["default"](label);
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "planting-cycle",
+    url: `/summary/${id}/indicators`,
+    stop: !id
+  }), [id]);
+  const customGetData = React.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: indicatorsLoading,
+    data: indicatorsData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+  const {
+    participantsCount,
+    eventIncidents,
+    cyclePartners
+  } = indicatorsData;
+  const participantsCountChange = React.useMemo(() => {
+    if (!participantsCount) return null;
+    return calculateStatChange({
+      current: Number(participantsCount.current) || 0,
+      previous: Number(participantsCount.previous) || 0
+    }, {
+      tooltipText: t("In comparison to last cycle"),
+      format: 'absolute'
+    });
+  }, [participantsCount, t]);
+  const eventIncidentsChange = React.useMemo(() => {
+    if (!eventIncidents) return null;
+    return calculateStatChange({
+      current: Number(eventIncidents.current) || 0,
+      previous: Number(eventIncidents.previous) || 0
+    }, {
+      tooltipText: t("In comparison to last cycle"),
+      format: 'absolute'
+    });
+  }, [eventIncidents, t]);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
+      title: t("Cycle Indicators"),
+      loading: loading,
+      className: "with-border-header h-w-btn-header",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '24px',
+          marginBottom: '24px'
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
+            title: t("Activity Participants"),
+            value: participantsCount?.current ? Number(participantsCount?.current).toLocaleString() : 0,
+            icon: "partnerIcon",
+            change: participantsCountChange
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(StatCard, {
+            title: t("Reported Incidents"),
+            value: eventIncidents?.current || 0,
+            icon: "ReportIncidents",
+            change: eventIncidentsChange
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '24px'
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(CyclePartners, {
+            cyclePartners: cyclePartners,
+            loading: indicatorsLoading,
+            t: t
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(HealthAndSafety, {
+            id: id,
+            getSummaryDetail: getSummaryDetail,
+            loading: indicatorsLoading,
+            t: t
+          })
+        })]
+      })]
+    })
+  });
+};
 
-      // If first attempt fails, try parsing as ISO date string
-      if (!date.isValid() && typeof label === 'string') {
-        date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY'], true);
-      }
+const GENDER_COLORS = ['#a0ebec', '#00aeb1'];
+const getGenderDistributionData = genderDistribution => {
+  if (Array.isArray(genderDistribution) && genderDistribution.length > 0) {
+    const firstItem = genderDistribution[0];
+    if (firstItem && (firstItem.totalFemale !== undefined || firstItem.totalMale !== undefined)) {
+      const totalFemale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalFemale) || 0), 0);
+      const totalMale = genderDistribution.reduce((sum, item) => sum + (Number(item.totalMale) || 0), 0);
+      return {
+        Male: totalMale,
+        Female: totalFemale
+      };
+    }
+    const distribution = {};
+    genderDistribution.forEach(item => {
+      const gender = item?.gender || item?.label || item?.name || 'Unknown';
+      const count = item?.count || item?.value || item?.total || 0;
+      const normalizedGender = gender.toLowerCase() === 'male' ? 'Male' : gender.toLowerCase() === 'female' ? 'Female' : gender;
+      distribution[normalizedGender] = (distribution[normalizedGender] || 0) + count;
+    });
+    return distribution;
+  }
+  if (genderDistribution && typeof genderDistribution === 'object' && !Array.isArray(genderDistribution)) {
+    if (genderDistribution.genderDistribution && typeof genderDistribution.genderDistribution === 'object') {
+      return genderDistribution.genderDistribution;
+    }
+    if (genderDistribution.totalFemale !== undefined || genderDistribution.totalMale !== undefined) {
+      return {
+        Male: Number(genderDistribution.totalMale) || 0,
+        Female: Number(genderDistribution.totalFemale) || 0
+      };
+    }
+    if (genderDistribution.Male !== undefined || genderDistribution.Female !== undefined || genderDistribution.male !== undefined || genderDistribution.female !== undefined) {
+      return {
+        Male: genderDistribution.Male || genderDistribution.male || 0,
+        Female: genderDistribution.Female || genderDistribution.female || 0
+      };
+    }
+    return genderDistribution;
+  }
+  return {};
+};
 
-      // If it's a valid date, format it as "Mmm YY"
-      if (date.isValid()) {
-        return date.format('MMM YY');
-      }
+/**
+ * Checks if the gender distribution data is empty
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {boolean} True if all values are 0 or empty
+ */
+const isGenderDistributionEmpty = genderDistributionData => {
+  return Object.values(genderDistributionData).every(val => !val || val === 0);
+};
 
-      // If it's already in "Mmm YY" format or similar, return as is
-      // Otherwise return the original label
-      return label;
+/**
+ * Calculates pie chart data from gender distribution
+ * @param {Object} genderDistributionData - Distribution object: { "Male": 10, "Female": 5 }
+ * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
+ */
+const calculateGenderPieData = genderDistributionData => {
+  const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
+  return Object.keys(genderDistributionData).map((key, index) => {
+    const color = GENDER_COLORS[index % GENDER_COLORS.length];
+    return {
+      value: genderDistributionData[key] || 0,
+      percent: total > 0 ? (genderDistributionData[key] || 0) / total : 0,
+      color: color,
+      label: key,
+      key: key
     };
-  }, []);
-  const jobsTimelineData = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().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 jobs data if available
-    if (jobsData && Array.isArray(jobsData) && jobsData.length > 0) {
-      jobsData.forEach(item => {
-        if (typeof item === 'object' && item !== null && item.date) {
-          const date = dayjs__default["default"](item.date);
-          if (date.isValid()) {
-            const monthKey = date.format('YYYY-MM');
-            const count = Number(item.total || 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
-              });
-            }
-          }
-        }
-      });
+  });
+};
+const getGenderTooltipChildren = (item, isEmpty, genderDistributionData, t, renderTooltipJsx) => {
+  if (isEmpty) {
+    if (!Object.keys(genderDistributionData).length) {
+      return null;
     }
+    return renderTooltipJsx({
+      title: t("Gender Distribution"),
+      items: Object.keys(genderDistributionData).map(k => ({
+        color: GENDER_COLORS[Object.keys(genderDistributionData).indexOf(k) % GENDER_COLORS.length],
+        label: k,
+        value: '0%'
+      }))
+    });
+  }
 
-    // Determine date range
-    let minDate = twelveMonthsAgo;
-    let maxDate = now;
+  // Calculate total for percentage calculation
+  const total = Object.values(genderDistributionData).reduce((all, val) => all + (val || 0), 0);
 
-    // 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');
+  // Show all gender items with percentages (matching the image format)
+  return renderTooltipJsx({
+    title: t("Gender Distribution"),
+    items: Object.keys(genderDistributionData).map((k, index) => {
+      const value = genderDistributionData[k] || 0;
+      const percent = total > 0 ? Math.round(value / total * 100) : 0;
+      return {
+        color: GENDER_COLORS[index % GENDER_COLORS.length],
+        label: k,
+        value: `${percent}%`
+      };
+    })
+  });
+};
 
-      // Start from the earlier of: 12 months ago, or first data date
-      minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
+const GenderDistribution = ({
+  genderDistribution,
+  loading = false,
+  t = s => s
+}) => {
+  const genderDistributionData = React.useMemo(() => getGenderDistributionData(genderDistribution), [genderDistribution]);
+  const isEmpty = React.useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
+  const pieData = React.useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
+  const getTooltipChildren = React.useCallback(item => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx), [t, isEmpty, genderDistributionData]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    loading: loading,
+    title: /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: t("Gender Distribution")
+    }),
+    className: "with-border-header h-w-btn-header ",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        marginTop: "auto",
+        marginBottom: "auto"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Chart, {
+        mouseXOffset: 10,
+        mouseYOffset: 10,
+        changeOpacityOnHover: false,
+        data: pieData,
+        doConstraints: false,
+        isPie: true,
+        t: t,
+        isEmpty: isEmpty,
+        getTooltipChildren: getTooltipChildren
+      })
+    })
+  });
+};
 
-      // End at the later of: current month, or last data date
-      maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
+const selectOptions = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
+const JobsTimeline = ({
+  dayJobsTimeline,
+  loading = false,
+  t = s => s
+}) => {
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
+  const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
+  const jobsTimelineData = React.useMemo(() => {
+    if (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) {
+      return [];
     }
 
-    // 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;
-  }, [jobsData]);
+    // Process data without cumulative calculation (for jobs timeline)
+    // Try to find value in total, count, jobs, or value fields
+    return processChartDateData({
+      mainData: jobsData,
+      isCumulative: false,
+      valueField: 'total' // Will fallback to count/jobs/value if total doesn't exist
+    });
+  }, [jobsData, processChartDateData]);
   const maxYValue = React.useMemo(() => {
     if (!jobsTimelineData || jobsTimelineData.length === 0) {
       return 100;
@@ -44008,9 +44262,22 @@ const JobsTimeline = ({
       children: t("Day Jobs Timeline")
     }),
     className: "with-border-header h-w-btn-header ",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions,
+        popupMatchSelectWidth: 120
+      })]
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
       data: jobsTimelineData,
-      xFieldKey: "month",
+      xFieldKey: "date",
       yFieldKey: "jobs",
       animated: true
       // height={200}
@@ -44377,7 +44644,7 @@ const getColumns = ({
         }
         return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
           title: value,
-          children: value?.toUpperCase().charAt(0) + value?.slice(1) || '-'
+          children: capitalize(value) || '-'
         });
       }
     }, {
@@ -44628,19 +44895,10 @@ const getColumns = ({
             className: "daf-default-cell"
           });
         }
-        let country = '-';
-        if (value) {
-          country = value;
-        } else if (all.country?.name) {
-          country = all.country.name;
-        } else if (all.location && typeof all.location === 'object' && all.location.country) {
-          country = all.location.country;
-        } else if (all.location && typeof all.location === 'object' && all.location.name) {
-          country = all.location.name;
-        }
+        const title = findOptions(value, selectOptions?.country || []) || '-';
         return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: country,
-          children: country
+          title: title,
+          children: title
         });
       }
     }, {
@@ -44892,6 +45150,7 @@ const AssociatedInformation = ({
   endpoint = "associated-information",
   tabsConfig = TABS_CONFIG,
   searchFieldsMap = getSearchFields,
+  selectOptions,
   t = s => s
 }) => {
   const [activeTab, setActiveTab] = React.useState(ACTIVITIES_TAB);
@@ -44948,8 +45207,9 @@ const AssociatedInformation = ({
     view: activeTab,
     projectId,
     navigate,
-    getRedirectLink
-  }), [t, activeTab, projectId, navigate]);
+    getRedirectLink,
+    selectOptions
+  }), [t, activeTab, projectId, navigate, selectOptions]);
   const tableDataSource = React.useMemo(() => ensureArray(associatedInformationData), [associatedInformationData]);
   const translatedTabs = React.useMemo(() => tabsConfig.map(tab => ({
     ...tab,
@@ -45084,7 +45344,8 @@ const PlantingCycleSummary = ({
   projectId,
   t = () => {},
   getSummaryDetail,
-  navigate
+  navigate,
+  selectOptions
 }) => {
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
@@ -45128,7 +45389,8 @@ const PlantingCycleSummary = ({
       getSummaryDetail: getSummaryDetail,
       loading: loading,
       t: t,
-      navigate: navigate
+      navigate: navigate,
+      selectOptions: selectOptions
     })]
   });
 };