datastake-daf 0.6.778 → 0.6.780

package/dist/pages/index.js

@@ -5295,6 +5295,12 @@ const createNumberArray = i => {
   return numbers;
 };
 const tooltipInputs = ["text", "phoneNumber", "textarea", "percentage", "number", "select", "ajaxSelect", "switch", "multiselect", "radioGroup", "date", "year"];
+const formPaths = {
+  edit: (mod, getRedirectLink) => typeof getRedirectLink === "function" ? getRedirectLink(`/app/edit/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`) : `/app/${mod}/edit/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`,
+  view: (mod, getRedirectLink) => typeof getRedirectLink === "function" ? getRedirectLink(`/app/view/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`) : `/app/${mod}/view/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`,
+  viewDD: mod => `/app/${mod}/viewdd/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`,
+  editDD: mod => `/app/${mod}/editdd/:namespace/:id/:group?/:subsection?/:subgroup?/:formid?`
+};
 const CREATE_DRAWER_WIDTH = 480;
 const MAX_COMMENTS_LENGTH = 1200;
 const MAX_TEXT_AREA_LENGTH = 1200;
@@ -7570,6 +7576,8 @@ const Style$f = styled__default["default"].div`
   width: 100%;
   height: 472px;
 
+  
+
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -7672,11 +7680,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 +8221,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 +8286,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 +8309,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 +8337,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 +8679,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 +8693,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 +8702,8 @@ function StakeholderIcon$1({
           zoom,
           isSelected,
           id,
-          listOfPolylines: polylinesRef.current
+          listOfPolylines: polylinesRef.current,
+          animated: true
         });
         return;
       }
@@ -8745,61 +8721,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 +8732,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({
@@ -8824,7 +8748,8 @@ function StakeholderIcon$1({
         link,
         onClickLink: () => {
           onClickLink(data);
-        }
+        },
+        isNewTab: true
       }),
       getPopupContainer: triggerNode => {
         const mapElement = document.getElementById("map");
@@ -8879,6 +8804,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 +8825,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 +8881,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 +8973,9 @@ function LocationIcon({
         zoom,
         isFromStakeholder: true,
         isForceOpen,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        stakeholderType: stakeholder.type,
+        animated: true
       });
     });
     return () => {
@@ -9018,38 +8990,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
-      });
-      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
+        listOfPolylines: polylinesRef.current
+      });
     });
-  });
+  }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
     content: renderTooltipJsx({
       title: data.name,
@@ -9565,7 +9587,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 +9793,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 +9811,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 +9837,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];
@@ -9868,10 +9913,20 @@ const useMap = ({
   function handleSelectMarker(clickedMarker) {
     setSelectedMarkersId(prev => {
       if (prev.includes(clickedMarker.datastakeId)) {
+        // Deselecting - clear polylines
         openPopupIdRef.current = null;
         setMarkerWithPopup(null);
         return [];
       } else {
+        // CLEAR OLD POLYLINES BEFORE SELECTING NEW MARKER
+        if (polylinesRef.current.length > 0) {
+          polylinesRef.current.forEach(polyline => {
+            if (mapRef.hasLayer(polyline)) {
+              mapRef.removeLayer(polyline);
+            }
+          });
+          polylinesRef.current = [];
+        }
         setMarkerWithPopup(isStakeholder(clickedMarker.type) ? clickedMarker : null);
         const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
         openPopupIdRef.current = clickedMarker.datastakeId;
@@ -9895,19 +9950,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");
     }
@@ -17087,6 +17152,9 @@ function showHideForm(form, formsValue) {
   }
   return true;
 }
+const filterForm = (f, d) => {
+  return f && (f.showFormIf ? showHideForm(f, d) : true);
+};
 const getSgbEvaluationIcons = (width, height) => ({
   0: /*#__PURE__*/jsxRuntime.jsxs("svg", {
     width: width,
@@ -17424,8 +17492,28 @@ function AjaxModal$1({
 const types = {
   MODAL: 'modal'
 };
+const isGroupInput = (group, repeatable = false, data) => {
+  let resp = group.inputs && Object.keys(group.inputs).length && group.repeatable === repeatable && group.type !== 'groupInputs' && group.type !== 'group' && group.type !== 'dataLinkGroup' && group.display !== 'group' && !group.viewGroup && !group.component;
+  if (group.showIf || group?.meta?.excludeFromView) {
+    resp = resp && showHideInput$3(group, data);
+  }
+  return resp;
+};
 const repeatObjects = (obj, fn = () => {}, filter = null, sort = null) => filter ? Object.keys(obj).filter(key => filter(obj[key])).map(fn) : sort ? Object.keys(obj).sort(sort).map(fn) : Object.keys(obj).map(fn);
 const conditions = new RegExp(/( is | and | not | notEmpty | includes )/gm);
+const getLastRow = (arr, cols) => {
+  let currentInd = -1;
+  const newArr = [];
+  arr.forEach(nr => {
+    if (nr % cols === 0) {
+      newArr[currentInd + 1] = [nr];
+      currentInd++;
+    } else {
+      newArr[currentInd].push(nr);
+    }
+  });
+  return newArr[newArr.length - 1];
+};
 const _verifyCondition = (condition, data, allData) => {
   let [path, match, needed] = condition.split(conditions);
   const isRepeatable = path.split('./').length > 1;
@@ -17498,6 +17586,49 @@ const showHideInput$3 = (input, formsValue, repeatValues) => {
   }
   return true;
 };
+const getNkey = namespace => {
+  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm'].includes(namespace)) {
+    return 'scoping';
+  }
+  return namespace;
+};
+const groupSubsections = (form, onlyConf = false) => {
+  return Object.keys(form).reduce((f, fKey) => {
+    if (form[fKey].subSection) {
+      let subName = form[fKey].subSection;
+      if (typeof form[fKey].subSection === "object") {
+        subName = form[fKey].subSection.name;
+      }
+      if (!f[subName]) {
+        f[subName] = {
+          label: '',
+          icon: '',
+          position: 0
+        };
+        if (typeof form[fKey].subSection === "object") {
+          const {
+            label = '',
+            icon = '',
+            position = 0,
+            showFormIf = ''
+          } = form[fKey].subSection;
+          f[subName] = {
+            label,
+            icon,
+            position,
+            showFormIf
+          };
+        }
+      }
+      if (!onlyConf) {
+        Object.assign(f[subName], {
+          [fKey]: form[fKey]
+        });
+      }
+    }
+    return f;
+  }, {});
+};
 const renderPlaceholder = ({
   data,
   config,
@@ -24479,6 +24610,19 @@ const Input = ({
   return getComponent();
 };
 
+const getDisabled = ({
+  disabled,
+  groupCheckboxDisableKey,
+  data
+}) => {
+  if (disabled) {
+    return true;
+  }
+  if (typeof groupCheckboxDisableKey === 'string') {
+    return !Object.values(data?.[groupCheckboxDisableKey] || {}).find(c => typeof c === 'number');
+  }
+  return false;
+};
 ({
   t: PropTypes__default["default"].func,
   data: PropTypes__default["default"].any,
@@ -24541,6 +24685,7 @@ function convertUndefinedToNull(obj) {
   }
   return obj;
 }
+const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);
 
 const packageApps = ["kota", "sbg", "nashiriki", "straatos", "wazi", "hatua"]; //PACKAGE_CHANGE_LATER (add sbg)
 
@@ -39900,6 +40045,710 @@ const StatCard = ({
   });
 };
 
+const RepeatableGroup = ({
+  name = null,
+  config = {},
+  allData = {},
+  linkingData = {},
+  ajaxOptions,
+  t,
+  ajaxForms,
+  changeAjaxForms,
+  getApiBaseUrl,
+  getAppHeader,
+  user,
+  getToken,
+  app
+}) => {
+  const {
+    automaticallyLink,
+    dataLink,
+    call
+  } = React.useMemo(() => config, [config]);
+  const entity = React.useMemo(() => automaticallyLink?.entity || config?.meta?.dataLinkEntity, [automaticallyLink, config]);
+  const isAjaxModal = React.useMemo(() => automaticallyLink && dataLink && call, [automaticallyLink, dataLink, call]);
+  const [modalRow, setModalRow] = React.useState(null);
+  const dataSource = React.useMemo(() => allData[name] || [], [allData, name]);
+  const notAvailable = (allData?.meta?.inputs || {})[name]?.notAvailable;
+  const notApplicable = (allData?.meta?.inputs || {})[name]?.notApplicable;
+  const noBody = notApplicable || notAvailable;
+  const _data = React.useMemo(() => dataSource.length ? dataSource.map((f, i) => {
+    if (isAjaxModal && typeof f === 'string' && linkingData && linkingData[entity] && linkingData[entity][f]) {
+      const value = linkingData[entity][f];
+      return {
+        ...value,
+        key: i
+      };
+    }
+    if (config?.meta?.ajaxOptionsKey) {
+      if (linkingData && linkingData[entity] && linkingData[entity][f[config?.meta?.ajaxOptionsKey]]) {
+        const value = linkingData[entity][f[config?.meta?.ajaxOptionsKey]];
+        return {
+          ...value,
+          key: i
+        };
+      }
+      const options = ajaxOptions[config?.meta?.ajaxOptionsKey];
+      if (Array.isArray(options)) {
+        const value = options.find(v => v.value === f[config?.meta?.ajaxOptionsKey]);
+        if (value) {
+          return {
+            ...f,
+            ...value,
+            key: i
+          };
+        }
+      }
+    }
+    return {
+      ...f,
+      key: i
+    };
+  }) : [{
+    key: 1,
+    isEmpty: true
+  }, {
+    key: 2,
+    isEmpty: true
+  }], [isAjaxModal, dataSource, entity, config, ajaxOptions, linkingData]);
+  const mapKey = key => ({
+    title: config?.inputs[key]?.label,
+    key: key,
+    dataIndex: key,
+    ellipsis: true,
+    render: (v, all) => {
+      if (all.isEmpty) {
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "daf-default-cell md"
+        });
+      }
+      if (v) {
+        return /*#__PURE__*/jsxRuntime.jsx(BasicInput, {
+          t: t,
+          app: app,
+          ajaxForms: ajaxForms,
+          changeAjaxForms: changeAjaxForms,
+          getApiBaseUrl: getApiBaseUrl,
+          getAppHeader: getAppHeader,
+          user: user,
+          getToken: getToken,
+          name: key,
+          config: config.inputs[key],
+          valueOnlyString: true,
+          data: all
+        }, key);
+      }
+      return '--';
+    }
+  });
+  const columns = [...(Array.isArray(config?.meta?.tableKeys) ? config.meta.tableKeys.map(mapKey) : Object.keys(config?.inputs).map(mapKey)), {
+    key: 'actions',
+    dataIndex: 'actions',
+    label: '',
+    width: 50,
+    render: (_, all) => {
+      if (all.isEmpty) {
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "daf-default-cell md"
+        });
+      }
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        onClick: () => setModalRow(all),
+        className: "cursor-pointer flex justify-content-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icons.EyeOutlined, {})
+      });
+    }
+  }];
+  const _subTitle = config.viewSubTitle || config.subTitle;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: formatClassname(["group repeatable", noBody && 'no-body']),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "daf-title with-subtitle",
+      children: [/*#__PURE__*/jsxRuntime.jsx("h1", {
+        children: ReactHtmlParser__default["default"](config?.label)
+      }), _subTitle && typeof _subTitle === 'string' ? /*#__PURE__*/jsxRuntime.jsx("p", {
+        children: ReactHtmlParser__default["default"](_subTitle)
+      }) : null]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-table-wrapper no-padding repeatable-form-table input no-pagination",
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
+          renderEmpty: () => notApplicable ? t('Not applicable') : t('No information available'),
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, {
+            locale: getLocales(t),
+            pagination: false,
+            columns: columns,
+            rowKey: "key",
+            dataSource: noBody ? [] : _data
+          })
+        })
+      }), !noActionsInputs.includes(config?.type) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ml-4 input-actions flex",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Review, {
+          t: t,
+          config: config,
+          inputMeta: (allData?.meta?.inputs || {})[name] || {},
+          name: name
+        }), /*#__PURE__*/jsxRuntime.jsx(Versions, {
+          t: t,
+          versionsDatapoints: [],
+          config: config,
+          allData: allData,
+          name: name,
+          getValue: () => null
+        }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: t("Sources"),
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+              className: "default p-0 flex flex-column justify-content-center",
+              type: "link",
+              disabled: true,
+              children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                name: "Sources",
+                width: 16,
+                height: 16
+              })
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: t("Comments"),
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(Comments, {
+              t: t,
+              config: config,
+              allData: allData,
+              name: name
+            })
+          })
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
+      open: !!modalRow,
+      title: /*#__PURE__*/jsxRuntime.jsx(ModalHeader, {
+        title: config?.label
+      }),
+      footer: null,
+      width: 650,
+      className: "max-h-50",
+      onCancel: () => setModalRow(null),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-view-form",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "view-content",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "content no-padding",
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "wrapper",
+              style: {
+                maxWidth: 600 // FUTURE ILVI 
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "group",
+                children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+                  app: app,
+                  t: t,
+                  ajaxForms: ajaxForms,
+                  changeAjaxForms: changeAjaxForms,
+                  getApiBaseUrl: getApiBaseUrl,
+                  getAppHeader: getAppHeader,
+                  user: user,
+                  getToken: getToken,
+                  config: Object.keys(config.inputs || {}).filter(k => {
+                    return !(config?.meta?.excludedKeysView || []).includes(k);
+                  }).reduce((all, key) => {
+                    all[key] = config.inputs[key];
+                    return all;
+                  }, {}),
+                  data: {
+                    ...modalRow
+                  }
+                })
+              })
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+/* eslint-disable no-case-declarations */
+const RepeatableModals = ({
+  name = null,
+  config = {},
+  data = {},
+  linkingData = {},
+  linkingForms = {},
+  ajaxOptions = [],
+  t,
+  ajaxForms,
+  changeAjaxForms,
+  getApiBaseUrl,
+  getAppHeader,
+  user,
+  getToken,
+  app
+}) => {
+  const label = (prop = null) => {
+    function getLabel(label) {
+      switch (typeof label) {
+        case 'string':
+          return label;
+        case 'object':
+          const labelKey = Object.keys(label).find(cond => verifyConditional(cond, data));
+          return label[labelKey];
+        default:
+          return label;
+      }
+    }
+    if (config[prop]) {
+      return getLabel(config[prop]);
+    }
+    if (config.sectionLabel) {
+      return getLabel(config.sectionLabel);
+    }
+    if (config.outputLabel) {
+      return getLabel(config.outputLabel);
+    }
+    return getLabel(config.label);
+  };
+  return verifyConditional(config.showIf ? config.showIf : null, data) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "group",
+    children: [label('outputLabel') ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "title",
+      children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+        children: label('outputLabel')
+      })
+    }) : null, data[name] && data[name].length ? data[name].map((item, index) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "group display",
+      style: {
+        border: '1px dotted var(--mmt-primary-70)'
+      },
+      children: [label() ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "title",
+        children: /*#__PURE__*/jsxRuntime.jsxs("h1", {
+          children: [label(), " #", index + 1]
+        })
+      }) : null, repeatObjects(config.inputs, key => {
+        const modalData = {
+          [name]: {
+            [key]: data[name][index][key] || null
+          }
+        };
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "group",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "title",
+            children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+              children: config.inputs[key].outputLabel || getInputLabel$2(config.inputs[key], item)
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+            app: app,
+            ajaxForms: ajaxForms,
+            changeAjaxForms: changeAjaxForms,
+            getApiBaseUrl: getApiBaseUrl,
+            getAppHeader: getAppHeader,
+            user: user,
+            getToken: getToken,
+            t: t,
+            parent: name,
+            name: config.inputs[key].dataId || key,
+            config: config.inputs[key],
+            data: modalData,
+            linkingData: linkingData,
+            linkingForms: linkingForms,
+            ajaxOptions: ajaxOptions,
+            cols: 2
+          }, key)]
+        }, key);
+      })]
+    }, index)) : /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-muted",
+      children: t('Not answered')
+    })]
+  }) : null;
+};
+
+/* eslint-disable no-unused-vars */
+const Content = ({
+  style = {},
+  form = {},
+  data = {},
+  groupConfig = {},
+  versionsDatapoints,
+  linkingData = {},
+  linkingForms = {},
+  ajaxOptions = [],
+  // ADDED
+  t,
+  app,
+  ajaxForms,
+  language,
+  changeAjaxForms,
+  getApiBaseUrl,
+  getAppHeader,
+  user,
+  evaluationConfig = [],
+  fullWidth = false
+}) => {
+  const groupSingle = grps => {
+    const form = Object.keys(grps).reduce((f, gKey) => {
+      if (grps[gKey].type !== "modal" && !isGroupInput(grps[gKey], false, data) && !isGroupInput(grps[gKey], true, data) && grps[gKey].display !== "group" && !grps[gKey].viewGroup && !grps[gKey].component) {
+        if (grps[gKey].group && !f[grps[gKey].group]) {
+          f[grps[gKey].group] = {};
+          Object.assign(f[grps[gKey].group], {
+            [gKey]: grps[gKey]
+          });
+        } else if (grps[gKey].group && f[grps[gKey].group]) {
+          Object.assign(f[grps[gKey].group], {
+            [gKey]: grps[gKey]
+          });
+        }
+        if (grps[gKey]?.meta?.group && !f[grps[gKey]?.meta?.group]) {
+          f[grps[gKey]?.meta?.group] = {};
+          Object.assign(f[grps[gKey].meta.group], {
+            [gKey]: grps[gKey]
+          });
+        } else if (grps[gKey]?.meta?.group && f[grps[gKey]?.meta?.group]) {
+          Object.assign(f[grps[gKey].meta.group], {
+            [gKey]: grps[gKey]
+          });
+        }
+        if (grps[gKey].section && !f[grps[gKey].section]) {
+          f[grps[gKey].section] = {};
+          Object.assign(f[grps[gKey].section], {
+            [gKey]: grps[gKey]
+          });
+        } else if (grps[gKey].section && f[grps[gKey].section]) {
+          Object.assign(f[grps[gKey].section], {
+            [gKey]: grps[gKey]
+          });
+        }
+      }
+      return f;
+    }, {});
+    return form;
+  };
+  const getDisplayGroupConfig = (groups, key) => {
+    return Object.keys(groups).reduce((items, gKey) => {
+      if (groups[gKey].viewGroup === key) {
+        // eslint-disable-next-line no-unused-vars
+        const {
+          viewGroup,
+          ...gCfg
+        } = groups[gKey];
+        items[gKey] = gCfg;
+      }
+      return items;
+    }, {});
+  };
+  const getComponent = (component, key, config) => {
+    switch (component) {
+      case "repeatableModals":
+        return /*#__PURE__*/jsxRuntime.jsx(RepeatableModals, {
+          app: app,
+          t: t,
+          ajaxForms: ajaxForms,
+          changeAjaxForms: changeAjaxForms,
+          getApiBaseUrl: getApiBaseUrl,
+          getAppHeader: getAppHeader,
+          user: user,
+          getToken: getToken,
+          name: key,
+          data: data,
+          config: config,
+          linkingData: linkingData,
+          linkingForms: linkingForms,
+          ajaxOptions: ajaxOptions
+        }, key);
+      default:
+        return /*#__PURE__*/jsxRuntime.jsx("p", {
+          children: "Component"
+        });
+    }
+  };
+  const isDisplayGroup = input => input.display && input.display === "group";
+  const isSingleModal = input => input.type && input.type === "modal";
+  const hasComponent = input => input.component && typeof input.component === "string";
+  const typeRender = (groups, singleGroupsKeys, addedContent) => {
+    const _length = Object.keys(groups || {}).length;
+    const isEven = _length % 2 === 0;
+    const groupped = Object.keys(groups).reduce((all, key) => {
+      const _val = groups[key];
+      const group = _val.group || _val?.meta?.group || _val.section;
+      if (all[group]) {
+        all[group][key] = _val;
+      } else {
+        all[group] = {
+          [key]: _val
+        };
+      }
+      return all;
+    }, {});
+    return Object.keys(groupped).map(key => {
+      const groups = groupped[key];
+      return /*#__PURE__*/jsxRuntime.jsx(React__default["default"].Fragment, {
+        children: repeatObjects(groups, (key, ind) => {
+          // normal group
+          return hasComponent(groups[key]) ? getComponent(groups[key].component, key, groups[key]) : isGroupInput(groups[key], false, data) ? /*#__PURE__*/jsxRuntime.jsx(Group, {
+            t: t,
+            name: key,
+            linkingData: linkingData,
+            config: groups[key],
+            data: data,
+            allData: data,
+            linkingForms: linkingForms,
+            cols: 2,
+            ajaxForms: ajaxForms,
+            changeAjaxForms: changeAjaxForms,
+            getApiBaseUrl: getApiBaseUrl,
+            getAppHeader: getAppHeader,
+            user: user,
+            getToken: getToken,
+            evaluationConfig: evaluationConfig,
+            ajaxOptions: ajaxOptions
+          }, key) :
+          // repeatable group
+          isGroupInput(groups[key], true, data) ? /*#__PURE__*/jsxRuntime.jsx(RepeatableGroup, {
+            app: app,
+            t: t,
+            ajaxForms: ajaxForms,
+            changeAjaxForms: changeAjaxForms,
+            getApiBaseUrl: getApiBaseUrl,
+            getAppHeader: getAppHeader,
+            user: user,
+            getToken: getToken,
+            name: key,
+            config: groups[key],
+            data: data,
+            allData: data,
+            linkingData: linkingData,
+            linkingForms: linkingForms,
+            ajaxOptions: ajaxOptions
+          }, key) :
+          // single inputs grouped
+          singleGroupsKeys.includes(key) ? (() => {
+            if (!addedContent.includes(key)) {
+              const currentGroup = Object.keys(groupSingle(groups)).find(k => Object.keys(groupSingle(groups)[k]).includes(key));
+              addedContent.push(...Object.keys(groupSingle(groups)[currentGroup]));
+              const config = groupSingle(groups)[currentGroup];
+              if (groups[key].viewShowIf || groups[key]?.meta?.excludeFromView) {
+                if (!showHideInput$3(groups[key], data)) {
+                  return null;
+                }
+              }
+              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "group",
+                id: currentGroup,
+                children: [groupConfig[currentGroup] ? /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "title",
+                  children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+                    children: groupConfig[currentGroup][language]
+                  })
+                }) : null, /*#__PURE__*/jsxRuntime.jsx(Input, {
+                  app: app,
+                  t: t,
+                  ajaxForms: ajaxForms,
+                  changeAjaxForms: changeAjaxForms,
+                  getApiBaseUrl: getApiBaseUrl,
+                  getAppHeader: getAppHeader,
+                  user: user,
+                  getToken: getToken,
+                  versionsDatapoints: versionsDatapoints,
+                  name: config.dataId || key,
+                  config: config,
+                  data: data,
+                  allData: data,
+                  linkingData: linkingData,
+                  className: isEven ? ind === _length - 1 || ind === _length - 2 ? "last" : undefined : ind === _length - 1 ? "last" : undefined,
+                  linkingForms: linkingForms,
+                  ajaxOptions: ajaxOptions,
+                  evaluationConfig: evaluationConfig,
+                  cols: 2
+                }, key)]
+              }, `${currentGroup}-${Date.now()}`);
+            }
+          })() :
+          // display group
+          isDisplayGroup(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "group display",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "title",
+              children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+                children: groups[key].label
+              })
+            }), typeRender(getDisplayGroupConfig(groups, key), singleGroupsKeys, addedContent)]
+          }, key) :
+          // single modal
+          isSingleModal(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "group",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "title",
+              children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+                children: groups[key].outputLabel || getInputLabel$2(groups[key], data)
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+              app: app,
+              t: t,
+              ajaxForms: ajaxForms,
+              changeAjaxForms: changeAjaxForms,
+              getApiBaseUrl: getApiBaseUrl,
+              getAppHeader: getAppHeader,
+              user: user,
+              getToken: getToken,
+              versionsDatapoints: versionsDatapoints,
+              parent: key,
+              name: groups[key].dataId || key,
+              config: groups[key],
+              className: "last",
+              data: data,
+              allData: data,
+              linkingData: linkingData,
+              linkingForms: linkingForms,
+              ajaxOptions: ajaxOptions,
+              evaluationConfig: evaluationConfig,
+              cols: 2
+            }, key)]
+          }, key) : null;
+        })
+      }, key);
+    });
+  };
+  React.useEffect(() => {
+    setTimeout(() => {
+      const groups = Array.from(document.getElementsByClassName("group"));
+      const rows = Array.from(document.querySelectorAll(".repetable-row-extra"));
+      rows.forEach(row => {
+        const inputs = Array.from(row.querySelectorAll(".input"));
+        const lasts = getLastRow(inputs.map((i, ind) => ind), 4);
+        if (lasts) {
+          lasts.forEach(index => inputs[index].classList.add("last"));
+        }
+      });
+      groups.forEach(group => {
+        // const isRepeatable = Array.from(group.classList).includes('repeatable');
+        const inputs = Array.from(group.querySelectorAll(".input"));
+        // if (inputs.length && !isRepeatable) {
+        //   if (inputs.length % 2 === 0) {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //     inputs[inputs.length - 2].classList.add('last');
+        //   } else {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //   }
+        // }
+        // remove groups without inputs
+        if (!inputs.length) {
+          group.remove();
+        }
+      });
+    }, 200);
+  }, [form, data]);
+  React.useState({});
+  React.useState({});
+  React.useState({});
+  const renderContent = (f, showTitle = true) => {
+    if (f) {
+      const alertType = ["error", "warning", "info", "success"];
+      if (f.alertConf && f.alertConf.type === "warning") {
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
+          message: f.alertConf.text,
+          type: f.alertConf.type,
+          showIcon: true
+        });
+      }
+      let {
+        label,
+        icon,
+        position,
+        ...groups
+      } = f;
+      groups = Object.keys(groups).reduce((items, key) => {
+        if (!groups[key]?.meta?.excludeFromView) {
+          items[key] = groups[key];
+        }
+        return items;
+      }, {});
+      const addedContent = [];
+      const singleGroupsKeys = [].concat(...Object.keys(groupSingle(groups)).map(key => Object.keys(groupSingle(groups)[key])));
+      return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "wrapper",
+          style: {
+            width: fullWidth ? "100%" : 700
+          },
+          children: [f.alertConf ? /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
+            className: "w-100",
+            style: {
+              marginBottom: "20px"
+            },
+            message: f.alertConf.text,
+            type: alertType.includes(f.alertConf.type) ? f.alertConf.type : "info",
+            showIcon: true
+          }) : null, typeRender(groups, singleGroupsKeys, addedContent)]
+        }, Date.now())
+      });
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "content",
+    style: style,
+    children: renderContent(form) 
+  });
+};
+
+function Modal({
+  t = text => text,
+  open,
+  title,
+  children,
+  onClose,
+  onSuccess,
+  cancelBtnText = "Cancel",
+  saveBtnText = "Save",
+  className,
+  loading = false,
+  disabled = false,
+  withModalFormWrapper = true,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(antd.Modal, {
+    width: 650,
+    footer: null,
+    open: open,
+    onCancel: onClose,
+    title: /*#__PURE__*/jsxRuntime.jsx(ModalHeader, {
+      title: t(title)
+    }),
+    className: `${className}`,
+    ...props,
+    children: [withModalFormWrapper ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "repeatable-modal-form",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-dynamic-form-form",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "form",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-dynamic-form dynamic-form",
+            children: children
+          })
+        })
+      })
+    }) : children, onSuccess && onClose ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "daf-form-bottom",
+      children: [onClose && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+        onClick: onClose,
+        children: t(cancelBtnText)
+      }), onSuccess && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+        type: "primary",
+        onClick: onSuccess,
+        disabled: loading || disabled,
+        children: t(saveBtnText)
+      })]
+    }) : null]
+  });
+}
+
 class SourceService extends BaseService {
   get(tab, filters) {
     const {
@@ -39937,7 +40786,7 @@ class SourceService extends BaseService {
     });
   }
 }
-createLazyService(SourceService);
+var SourceService$1 = createLazyService(SourceService);
 
 class VersionService extends BaseService {
   getSources({
@@ -39951,7 +40800,344 @@ class VersionService extends BaseService {
     });
   }
 }
-createLazyService(VersionService);
+var VersionService$1 = createLazyService(VersionService);
+
+const getSourcesType = subject => {
+  const typeMapping = {
+    locations: "location",
+    location: "location",
+    "production-sites": "location",
+    stakeholders: "stakeholder",
+    stakeholder: "stakeholder",
+    workers: "stakeholder",
+    operators: "stakeholder",
+    documents: "document",
+    document: "document",
+    events: "event",
+    event: "event",
+    activities: "event",
+    incidents: "event"
+  };
+  return typeMapping[subject] ?? null;
+};
+
+const Records = ({
+  onSubmit,
+  modalTitle = "Records",
+  t = () => {},
+  onClose = () => {},
+  open = false,
+  subject = "",
+  id = ""
+}) => {
+  const [form] = antd.Form.useForm();
+  const [sources, setSources] = React.useState([]);
+  const [versions, setVersions] = React.useState([]);
+  const [selectedSource, setSelectedSource] = React.useState(null);
+  const handleCancel = () => {
+    onClose();
+    form.resetFields();
+  };
+  const type = React.useMemo(() => getSourcesType(subject), [subject]);
+  const getSources = async () => {
+    try {
+      const {
+        data
+      } = await SourceService$1.getSources({
+        type,
+        id
+      });
+      setSources(data);
+    } catch (error) {
+      console.error('Error fetching sources:', error);
+    }
+  };
+  const getVersions = async () => {
+    try {
+      const {
+        data
+      } = await VersionService$1.getSources({
+        type,
+        id,
+        params: {
+          source: selectedSource
+        }
+      });
+      console.log({
+        data
+      });
+      setVersions(data);
+    } catch (error) {
+      console.error('Error fetching versions:', error);
+    }
+  };
+  const sourceOptions = React.useMemo(() => {
+    return sources.map(source => ({
+      label: source?.name,
+      value: source?.id
+    }));
+  }, [sources]);
+  React.useEffect(() => {
+    if (type && id) {
+      getSources();
+    }
+  }, [type, id]);
+  React.useEffect(() => {
+    if (selectedSource) {
+      getVersions();
+    }
+  }, [selectedSource]);
+  const versionOptions = React.useMemo(() => {
+    if (!versions?.numberOfVersions) return [];
+    return Array.from({
+      length: versions.numberOfVersions
+    }, (_, index) => ({
+      label: `Version ${index + 1}`,
+      value: index + 1
+    }));
+  }, [versions]);
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      if (onSubmit) {
+        onSubmit(values);
+      }
+      onClose();
+      form.resetFields();
+    } catch (error) {
+      console.error('Validation failed:', error);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
+    open: open,
+    t: t,
+    title: t(modalTitle),
+    onSuccess: handleOk,
+    onClose: handleCancel,
+    withModalFormWrapper: false,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Form, {
+      form: form,
+      layout: "vertical",
+      name: "recordsForm",
+      children: [/*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+        name: "source",
+        label: t("Source"),
+        rules: [{
+          required: true,
+          message: t('Please select an option')
+        }],
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+          placeholder: t("Select"),
+          showSearch: true,
+          optionFilterProp: "children",
+          onChange: value => {
+            console.log('Selected source ID:', value);
+            setSelectedSource(value);
+          },
+          children: sourceOptions.map(option => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+            value: option.value,
+            children: option.label
+          }, option.value))
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+        name: "version",
+        label: t("Version"),
+        rules: [{
+          required: true,
+          message: t('Please select an option')
+        }],
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+          placeholder: t("Select"),
+          showSearch: true,
+          optionFilterProp: "children",
+          children: versionOptions.map(option => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+            value: option.value,
+            children: option.label
+          }, option.value))
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        height: 60
+      }
+    })]
+  });
+};
+
+const Navigation = ({
+  form = {},
+  data = {},
+  group = null,
+  subsection = null,
+  search = null,
+  onGroupChange = () => {},
+  mod,
+  // TODO: ADD this
+  goTo,
+  params,
+  generatePath,
+  getRedirectLink
+}) => {
+  const [selectedGroup, setSelectedGroup] = React.useState(null);
+  const [formGroups, setFormGroups] = React.useState([]);
+  const [openKeys, setOpenKeys] = React.useState([]);
+  const hasSubSections = f => Object.keys(f).map(key => propHasValue$1(f[key].subSection)).includes(true);
+  const mapFormGroup = f => Object.keys(f).map(key => {
+    const {
+      label,
+      showFormIf,
+      position
+    } = f[key];
+    const disabled = getDisabled({
+      disabled: f[key]?.title?.meta?.disabled || false,
+      groupCheckboxDisableKey: f[key]?.title?.meta?.groupCheckboxDisableKey,
+      data
+    });
+    const fConf = {
+      key,
+      label,
+      showFormIf,
+      show: filterForm(f[key], data),
+      items: [],
+      disabled: disabled || false,
+      position
+    };
+    if (hasSubSections(f[key])) {
+      fConf.items = {};
+      const items = groupSubsections(f[key], true);
+      Object.keys(items).forEach(i => {
+        items[i].show = filterForm(items[i], data);
+        fConf.items[i] = items[i];
+      });
+    }
+    return fConf;
+  });
+  React.useEffect(() => {
+    const formG = mapFormGroup(form).sort((a, b) => (a.position || 0) - (b.position || 0));
+    const keys = [];
+    formG.forEach(f => {
+      if (!keys.includes(f.key)) {
+        keys.push(f.key);
+      }
+      if (f.items) {
+        Object.keys(f.items).forEach(item => {
+          if (!keys.includes(`${f.key}/${item}`)) {
+            keys.push(`${f.key}/${item}`);
+          }
+        });
+      }
+    });
+    let sGroup = group;
+    if (!group && formG.length) {
+      sGroup = formG[0].key;
+    }
+    if (subsection && keys.includes(`${sGroup}/${subsection}`)) {
+      sGroup = `${sGroup}/${subsection}`;
+    }
+    if (sGroup === selectedGroup) {
+      groupChanged();
+    }
+    setFormGroups(formG);
+    if (!keys.includes(sGroup)) {
+      sGroup = keys[0];
+    }
+    setSelectedGroup(sGroup);
+  }, [form, group, subsection]);
+  React.useEffect(() => {
+    groupChanged();
+  }, [selectedGroup]);
+
+  // useEffect(() => {
+  //   if (!selectedGroup && !formGroups.map(f => f.key).includes(selectedGroup)) {
+  //     setSelectedGroup(formGroups.map(f => f.key)[0]);
+  //   }
+  // }, [formGroups])
+
+  const groupChanged = () => {
+    if (selectedGroup) {
+      onGroupChange(selectedGroup);
+      if (selectedGroup !== group) {
+        // const path = formPaths.view(mod, getRedirectLink);
+        const [section, subSection, subgroup] = selectedGroup.split('/');
+        let url;
+        if (params.formId) {
+          // Dynamic context (within a project : monitoring, restoration, engagement, etc.)
+          url = `/app/${params.namespace}/${params.id}/${params.subsection}/view/general/${params.formId}/${section}`;
+        } else {
+          // Default: organisation context
+          const path = formPaths.view(mod, getRedirectLink);
+          url = `${generatePath(path, {
+            ...params,
+            group: section,
+            subsection: subSection,
+            subgroup: subgroup || undefined
+          })}${search || ''}`;
+        }
+        goTo(url);
+      }
+    }
+    setTimeout(() => {
+      const groups = Array.from(document.getElementsByClassName('group'));
+      const rows = Array.from(document.querySelectorAll('.repetable-row-extra'));
+      rows.forEach(row => {
+        const inputs = Array.from(row.querySelectorAll('.input'));
+        const lasts = getLastRow(inputs.map((i, ind) => ind), 4);
+        if (lasts) {
+          lasts.forEach(index => inputs[index].classList.add('last'));
+        }
+      });
+      groups.forEach(group => {
+        // const isRepeatable = Array.from(group.classList).includes('repeatable');
+        const inputs = Array.from(group.querySelectorAll('.input'));
+        // if (inputs.length && !isRepeatable) {
+        //   if (inputs.length % 2 === 0) {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //     inputs[inputs.length - 2].classList.add('last');
+        //   } else {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //   }
+        // }
+        // remove groups without inputs
+        if (!inputs.length) {
+          group.remove();
+        }
+      });
+    }, 200);
+  };
+  return selectedGroup ? /*#__PURE__*/jsxRuntime.jsx(antd.Menu, {
+    mode: "inline",
+    defaultSelectedKeys: [selectedGroup],
+    selectedKeys: [selectedGroup],
+    defaultOpenKeys: selectedGroup ? [selectedGroup.split('/')[0]] : [],
+    openKeys: openKeys,
+    onOpenChange: oKeys => {
+      setOpenKeys(oKeys);
+    },
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    },
+    onSelect: g => {
+      setSelectedGroup(g.key);
+    },
+    children: formGroups.filter(key => key.show).map(key => key.items && typeof key.items === 'object' && Object.keys(key.items).length > 0 ? /*#__PURE__*/jsxRuntime.jsx(antd.Menu.SubMenu, {
+      title: getInputLabel$2(key, data),
+      children: Object.keys(key.items).filter(item => key.items[item].show).map(item => /*#__PURE__*/jsxRuntime.jsx(antd.Menu.Item, {
+        level: 2,
+        children: getInputLabel$2(key.items[item], data)
+      }, `${key.key}/${item}`))
+    }, key.key) : /*#__PURE__*/jsxRuntime.jsx(antd.Menu.Item, {
+      disabled: key.disabled,
+      onClick: props => {
+        if (params.subgroup && params.group === props.key) {
+          const path = formPaths.view(mod, getRedirectLink);
+          goTo(`${generatePath(path, params)}${search || ''}`);
+        }
+      },
+      children: getInputLabel$2(key, data)
+    }, key.key))
+  }) : null;
+};
 
 styled__default["default"](antd.Select)`
   width: 100%;
@@ -42770,6 +43956,7 @@ const PlantingLocations = ({
         longitude: locationCheckArrival.longitude
       };
       const color = "#15FFFFB2";
+      const locationName = matchingLocation?.name || locationCheckArrival.name || 'Planting Location';
       return {
         _id: locationCheckArrival._id || event._id || {},
         area: area,
@@ -42777,13 +43964,16 @@ const PlantingLocations = ({
         datastakeId: `LOC-${String(index + 1).padStart(9, '0')}`,
         gps: gps,
         id: matchingLocation?.id || locationCheckArrival._id || `event-${index}`,
-        name: locationCheckArrival.name || matchingLocation?.name || `Event ${index + 1}`,
+        name: event.name || t("Activity Start"),
+        date: event.date,
         sources: 1,
-        subTitle: locationCheckArrival.name || matchingLocation?.name || 'Planting Location',
+        subTitle: event.date ? renderDateFormatted(event.date, "DD MMM YY") : locationName,
+        plotName: locationName,
+        territoryTitle: locationName,
         type: 'Planting Location'
       };
     });
-  }, [plantingLocationsData]);
+  }, [plantingLocationsData, t]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
       title: t("Planting Locations"),
@@ -42805,7 +43995,66 @@ const PlantingLocations = ({
         onClickLink: () => {},
         onFilterChange: () => {},
         primaryLink: true,
-        renderTooltip: () => {},
+        renderTooltipForLocation: data => {
+          const coordinates = data.gps?.latitude && data.gps?.longitude ? convertDMS(data.gps.latitude, data.gps.longitude) : null;
+          if (!coordinates) {
+            return [];
+          }
+          const iconColor = "#016C6E"; // Activity Start color
+
+          return [{
+            label: t("Coordinates"),
+            value: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                flexWrap: 'nowrap'
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center'
+                },
+                children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                  name: "SpacingHeight",
+                  width: 14,
+                  height: 14,
+                  color: iconColor
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  style: {
+                    fontWeight: 600,
+                    marginLeft: '4px'
+                  },
+                  children: coordinates[0]
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center'
+                },
+                children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                  name: "SpacingWidth",
+                  width: 14,
+                  height: 14,
+                  color: iconColor
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  style: {
+                    fontWeight: 600,
+                    marginLeft: '4px'
+                  },
+                  children: coordinates[1]
+                })]
+              })]
+            })
+          }];
+        },
+        renderTooltipForTerritory: data => {
+          return [{
+            label: t("Plot Name"),
+            value: data.plotName || data.name || "--"
+          }];
+        },
         renderTooltipTags: () => {},
         type: "location-territory"
       })
@@ -44839,9 +46088,10 @@ const getColumns = ({
             className: "daf-default-cell"
           });
         }
+        const title = findOptions(value, selectOptions?.implPartnersCategory || []) || '-';
         return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: value,
-          children: value || '-'
+          title: title,
+          children: title
         });
       }
     }, {
@@ -44855,9 +46105,10 @@ const getColumns = ({
             className: "daf-default-cell"
           });
         }
+        const title = findOptions(value, selectOptions?.implPartnersSubcategory || []) || '-';
         return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: value,
-          children: value || '-'
+          title: title,
+          children: title
         });
       }
     }, {
@@ -45847,6 +47098,639 @@ const MineSummary = ({
   });
 };
 
+const useViewUrlParams = ({
+  params,
+  push,
+  pathname,
+  search,
+  searchParams,
+  setSearchParams
+}) => {
+  const [namespace, setNamespace] = React.useState(params?.namespace);
+  const [id, setId] = React.useState(params?.id);
+  const [group, setGroup] = React.useState(params?.group);
+  const [subsection, setSubSection] = React.useState(params?.subsection);
+  const sourceUrl = searchParams.get("source");
+  const versionUrl = searchParams.get("version");
+  const [source, setSource] = React.useState(sourceUrl || null);
+  const [version, setVersion] = React.useState(versionUrl || null);
+  React.useEffect(() => {
+    if (id && params.id !== id || namespace && namespace !== params.namespace) {
+      setGroup(undefined);
+      setSubSection(undefined);
+      // setSubGroup(undefined);
+    } else {
+      setGroup(params.group);
+      setSubSection(params.subsection);
+      // setSubGroup(params.subgroup);
+    }
+    setNamespace(params.namespace);
+    setId(params.id);
+  }, [params]);
+  React.useEffect(() => {
+    if (source && version) {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("source", source);
+      newParams.set("version", version);
+      setSearchParams(newParams);
+    }
+  }, [source, version]);
+  const goBackFromSource = React.useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.delete("source");
+    params.delete("version");
+    setSearchParams(params);
+    setVersion(null);
+    setSource(null);
+  }, [searchParams, setSearchParams]);
+  const getEditLink = React.useCallback(srcId => {
+    const r = new RegExp(`\/view\/`);
+    const [previous, extra] = pathname.split(r);
+    if (srcId) {
+      push(`${previous}/edit/${extra}?sourceId=${srcId}`);
+      return;
+    }
+    if (search) {
+      push(`${previous}/edit/${extra}${search}`);
+    } else {
+      push(`${previous}/edit/${extra}`);
+    }
+  }, [pathname, search, push]);
+  const match = React.useMemo(() => ({
+    params,
+    path: pathname
+  }), [params, pathname]);
+  return {
+    namespace,
+    id,
+    group,
+    subsection,
+    params,
+    source,
+    setSource,
+    sourceUrl,
+    version,
+    setVersion,
+    versionUrl,
+    goBackFromSource,
+    getEditLink,
+    match,
+    search
+  };
+};
+
+const usePrepareForm = ({
+  namespaceConfig,
+  allData,
+  id,
+  namespace,
+  t,
+  mode,
+  APP,
+  viewConfig
+}) => {
+  const [form, setForm] = React.useState({});
+  const [data, setData] = React.useState({});
+  const [groups, setGroups] = React.useState({});
+  const [linkingForms, setLinkingForms] = React.useState({});
+  const [loading, setLoading] = React.useState(true);
+  const [notFound, setNotFound] = React.useState(false);
+  const prepareForm = currentView => {
+    const dKey = namespaceConfig.dataKey;
+    const nKey = `${APP}-${currentView}`;
+    if (hasKeyInObject(allData, dKey) && hasKeyInObject(allData[dKey], nKey)) {
+      const {
+        form = {},
+        data = {},
+        config = {},
+        linkingForms = {}
+      } = JSON.parse(JSON.stringify(allData[dKey][nKey] || {}));
+      if (data.datastakeId === id || id === "user") {
+        if (viewConfig.linkingSubjects.includes(namespace)) {
+          setForm({
+            ...form,
+            linking: {
+              position: 100,
+              excludeFromEdit: true,
+              label: t("Linked Subjects"),
+              template: "linkingSubjects"
+            }
+          });
+        } else {
+          setForm(form);
+        }
+        setData(data);
+        setGroups(config.groups || {});
+        setLinkingForms(linkingForms);
+        setLoading(false);
+        setNotFound(false);
+      } else if (!data.id) {
+        if (mode === "proxy") {
+          window.location.reload();
+        } else {
+          setLoading(false);
+          setNotFound(true);
+        }
+      }
+    }
+  };
+  const getCertainData = allData[namespaceConfig.dataKey];
+  React.useEffect(() => {
+    if (namespace && namespaceConfig) {
+      prepareForm(namespaceConfig.view);
+    }
+  }, [getCertainData, namespaceConfig]);
+  return {
+    form,
+    setForm,
+    data,
+    setData,
+    groups,
+    setGroups,
+    linkingForms,
+    setLinkingForms,
+    loading,
+    setLoading,
+    notFound,
+    setNotFound,
+    prepareForm
+  };
+};
+
+const useViewPermissions = ({
+  data,
+  id,
+  namespaceOverrides = {
+    supportedNamespaces: {},
+    canEdit: {}
+  },
+  namespace,
+  user,
+  push,
+  getRedirectLink,
+  namespaceConfig,
+  APP,
+  viewConfig
+}) => {
+  const baseNamespaceKeys = Object.keys(namespaceConfig);
+  const baseSupportedNamespaces = baseNamespaceKeys.reduce((acc, key) => {
+    acc[key] = () => true;
+    return acc;
+  }, {});
+  const isSupportedNamespaces = React.useMemo(() => ({
+    ...baseSupportedNamespaces,
+    ...namespaceOverrides.supportedNamespaces
+  }), [data, id]);
+  const isSupported = typeof isSupportedNamespaces[namespace] === "function" ? isSupportedNamespaces[namespace]() && viewConfig.supportedNamespaces[APP] && namespaceConfig.supportedNamespaces[APP].includes(namespace) : namespaceConfig.supportedNamespaces[APP] && namespaceConfig.supportedNamespaces[APP].includes(namespace);
+  const isUserData = () => {
+    return data && data.authorId && user?.company?.id === data.authorId;
+  };
+  const canEdit = React.useMemo(() => {
+    const baseCanEditAction = baseNamespaceKeys.reduce((acc, key) => {
+      acc[key] = () => isUserData();
+      return acc;
+    }, {});
+    const canEditAction = {
+      ...baseCanEditAction,
+      ...namespaceOverrides.canEdit
+    };
+    return canEditAction[namespace] ? canEditAction[namespace]() : false;
+  }, [namespace, data, user]);
+  React.useEffect(() => {
+    if (data) {
+      if (typeof isSupportedNamespaces[namespace] === "function") {
+        if (!isSupportedNamespaces[namespace]()) {
+          push(getRedirectLink(`/app`));
+        }
+      }
+    }
+  }, [data, namespace]);
+  return {
+    isSupportedNamespaces,
+    canEdit,
+    isSupported
+  };
+};
+
+const submitSubjectData = async (namespace, data, serviceMap) => {
+  const service = serviceMap[namespace];
+  if (!service) {
+    throw new Error(`No service found for namespace: ${namespace}`);
+  }
+  const response = await service.submitStep(data, data.datastakeId || data.id);
+  return response.data;
+};
+const useSubmitSubject = ({
+  namespace,
+  data,
+  serviceMap
+}) => {
+  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [isPublished, setIsPublished] = React.useState(false);
+  const submitSubject = React.useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await submitSubjectData(namespace, data, serviceMap);
+      setIsDisabled(response.published);
+      setIsPublished(response.published);
+    } catch (error) {
+      console.error("Submit error:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [namespace, data]);
+  return {
+    submitSubject,
+    isDisabled,
+    submitLoading: loading,
+    isPublished
+  };
+};
+
+const useCallToGetData = ({
+  namespaceConfig,
+  namespace,
+  allData,
+  id,
+  isSupported,
+  namespaceGet,
+  source,
+  version,
+  user,
+  setLoading,
+  APP
+}) => {
+  const isFirstRender = React.useRef(true);
+  const callToGetData = (_doCall = false) => {
+    const dKey = namespaceConfig.dataKey;
+    const nKey = `${APP}-${getNkey(namespace)}`;
+    const doCall = _doCall ? true : hasKeyInObject(allData, dKey) && hasKeyInObject(allData[dKey], nKey) ? allData[dKey][nKey]?.data?.datastakeId !== id : true;
+    if (doCall) {
+      if (isSupported) {
+        namespaceGet[namespace]();
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    callToGetData(true);
+  }, [source, version]);
+  React.useEffect(() => {
+    callToGetData(true);
+  }, [id, namespace, user.language]);
+  const onStorageUpdate = e => {
+    const {
+      key,
+      newValue
+    } = e;
+    if (key === `${id}-loading` && newValue) {
+      setLoading(newValue);
+    }
+    if (key === `${id}-updated` && newValue) {
+      setLoading(true);
+      callToGetData();
+    }
+  };
+  React.useEffect(() => {
+    window.addEventListener("storage", onStorageUpdate);
+    return () => {
+      window.removeEventListener("storage", onStorageUpdate);
+    };
+  }, []);
+  React.useEffect(() => {
+    setLoading(true);
+  }, [namespace]);
+  return {
+    callToGetData
+  };
+};
+
+const useViewActions = ({
+  namespace,
+  data,
+  isSupported,
+  canEdit,
+  versionUrl,
+  sourceUrl,
+  getEditLink,
+  submitSubject,
+  isDisabled,
+  setOpenRecordsModal,
+  goBackFromSource,
+  push,
+  getRedirectLink,
+  t,
+  viewConfig,
+  buttonActions
+}) => {
+  const [pageActions, setPageActions] = React.useState([]);
+  const [extraPageActions, setExtraPageActions] = React.useState([]);
+  React.useEffect(() => {
+    const actions = [];
+    const extraActions = [];
+    if (!isSupported) {
+      setPageActions([]);
+      setExtraPageActions([]);
+      return;
+    }
+    if (canEdit) {
+      if (viewConfig.namespacesWithoutActionButtons.includes(namespace)) {
+        if (viewConfig.editOnlyButton.includes(namespace)) {
+          if (versionUrl && sourceUrl) {
+            actions.push(buttonActions.createBackButton(t, goBackFromSource));
+          } else {
+            actions.push(buttonActions.createEditButton(t, getEditLink));
+          }
+        }
+      } else {
+        if (versionUrl && sourceUrl) {
+          actions.push(buttonActions.createBackButton(t, goBackFromSource));
+        } else {
+          actions.push(buttonActions.createSubmitButton(t, submitSubject, isDisabled, data));
+          actions.push(buttonActions.createEditButton(t, getEditLink));
+          // actions.push(createRecordsButton(t, setOpenRecordsModal));
+        }
+      }
+    }
+    if (viewConfig.summaryNamespaces.includes(namespace)) {
+      extraActions.push(buttonActions.createSummaryButton(t, namespace, data, push, getRedirectLink));
+      extraActions.push(buttonActions.createRecordsButton(t, setOpenRecordsModal));
+    }
+    setPageActions(actions);
+    setExtraPageActions(extraActions);
+  }, [namespace, data, isSupported, canEdit, versionUrl, sourceUrl, isDisabled, t, getEditLink, submitSubject, goBackFromSource, setOpenRecordsModal, push, getRedirectLink]);
+  return {
+    pageActions,
+    extraPageActions
+  };
+};
+
+const View = ({
+  push,
+  getRedirectLink,
+  allData,
+  ajaxForms,
+  changeAjaxForms,
+  t,
+  namespaceConfiguaration,
+  params,
+  pathname,
+  search,
+  searchParams,
+  setSearchParams,
+  mode = "app",
+  APP,
+  viewConfig,
+  partners,
+  setSelectedPartners,
+  user,
+  serviceMap,
+  actionMap,
+  goBack,
+  breadcrumbs,
+  theme,
+  buttonActions,
+  generatePath,
+  getApiBaseUrl,
+  getAppHeader
+  // ADD CALLBACK TO GET THE CURRENT NAMESPACE CONFIG
+}) => {
+  const getNamespaceConfig = namespace => namespaceConfiguaration[namespace];
+  const [openRecordsModal, setOpenRecordsModal] = React.useState(false);
+
+  // HANDLES THE URL PARAMS FOR THE VIEW PAGE
+  const {
+    namespace,
+    id,
+    group,
+    subsection,
+    source,
+    setSource,
+    sourceUrl,
+    version,
+    setVersion,
+    versionUrl,
+    goBackFromSource,
+    getEditLink,
+    match
+  } = useViewUrlParams({
+    params,
+    push,
+    pathname,
+    search,
+    searchParams,
+    setSearchParams
+  });
+  const namespaceConfig = React.useMemo(() => getNamespaceConfig(namespace), [namespace]);
+
+  // PREPARES THE FORM FOR THE VIEW PAGE
+  const {
+    form,
+    data,
+    groups,
+    linkingForms,
+    loading,
+    setLoading,
+    notFound
+  } = usePrepareForm({
+    namespaceConfig,
+    allData,
+    id,
+    namespace,
+    t,
+    mode,
+    APP,
+    viewConfig
+  });
+  const {
+    canEdit,
+    isSupported
+  } = useViewPermissions({
+    data,
+    id,
+    namespace,
+    user,
+    push,
+    getRedirectLink,
+    namespaceConfig: namespaceConfiguaration,
+    APP,
+    viewConfig
+  });
+  const groupForm = React.useMemo(() => {
+    const gF = form[group] || {};
+    if (subsection) {
+      const sectionForms = groupSubsections(gF);
+      if (sectionForms[subsection]) {
+        return sectionForms[subsection];
+      }
+    }
+    return gF;
+  }, [form, group, subsection]);
+  const {
+    submitSubject,
+    isDisabled,
+    submitLoading,
+    isPublished
+  } = useSubmitSubject({
+    namespace,
+    data,
+    serviceMap
+  });
+  const {
+    pageActions,
+    extraPageActions
+  } = useViewActions({
+    namespace,
+    data,
+    isSupported,
+    canEdit,
+    versionUrl,
+    sourceUrl,
+    getEditLink,
+    submitSubject,
+    isDisabled,
+    setOpenRecordsModal,
+    goBackFromSource,
+    push,
+    getRedirectLink,
+    t,
+    viewConfig,
+    buttonActions
+  });
+  const action = React.useMemo(() => actionMap[namespaceConfig?.action], [namespaceConfig?.action]);
+  const namespaceGet = {
+    [namespace]: () => {
+      return action({
+        namespace: namespaceConfig.namespace,
+        module: APP,
+        view: namespaceConfig.view,
+        ...(namespaceConfig.scope && {
+          scope: namespaceConfig.scope
+        }),
+        datastakeId: id,
+        version,
+        source
+      });
+    }
+  };
+  useCallToGetData({
+    namespaceConfig,
+    namespace,
+    allData,
+    id,
+    isSupported,
+    namespaceGet,
+    source,
+    version,
+    user,
+    setLoading
+  });
+  const extraLinking = React.useMemo(() => {
+    return null;
+  }, [namespace, match, data]);
+  const sourceOptions = React.useMemo(() => {
+    return partners.map(partner => {
+      const isOwnData = partner.id === user?.company?.id;
+      return {
+        label: partner.nickName,
+        value: partner.id,
+        avatar: isOwnData ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "OWN"
+        }) : undefined,
+        background: isOwnData ? theme.colorPrimary7 : undefined,
+        color: isOwnData ? "white" : undefined
+      };
+    });
+  }, [partners, user]);
+  const actionButtons = React.useMemo(() => {
+    return groupForm?.template === "linkingSubjects" ? pageActions.filter(v => v.key !== "edit") : pageActions;
+  }, [groupForm, pageActions]);
+  if (!isSupported || notFound || loading) {
+    return /*#__PURE__*/jsxRuntime.jsx(Loading, {});
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "daf-view-form",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
+        title: data?.name || "",
+        breadcrumbs: breadcrumbs,
+        goBackTo: goBack,
+        actionButtons: actionButtons,
+        extraButtons: extraPageActions,
+        addedHeaderFirst: true,
+        addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex flex-row gap-4",
+          style: {
+            marginRight: 8
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
+            options: [...sourceOptions],
+            isAvatarGroup: true,
+            selectionType: "checkbox",
+            canUnselectLast: false,
+            onChange: selected => {
+              setSelectedPartners(prev => ({
+                ...prev,
+                partners: selected,
+                loading: false
+              }));
+            },
+            dropDownWidth: 200,
+            defaultSelected: (partners || []).map(p => p.id) || []
+          }, partners?.length)
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "view-content",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Navigation, {
+          mod: APP,
+          data: data,
+          match: match,
+          form: form,
+          group: group,
+          subsection: subsection,
+          search: search,
+          goTo: push,
+          getRedirectLink: getRedirectLink,
+          generatePath: generatePath,
+          params: params
+        }), groupForm.template ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /*#__PURE__*/jsxRuntime.jsx(Content, {
+          form: groupForm,
+          data: data || {},
+          groupConfig: groups || {},
+          linkingData: (data || {}).linking || {},
+          linkingForms: linkingForms || {},
+          ajaxOptions: [],
+          extraLinking: extraLinking,
+          t: t,
+          app: APP,
+          ajaxForms: ajaxForms,
+          language: user?.language,
+          changeAjaxForms: changeAjaxForms,
+          getApiBaseUrl: getApiBaseUrl,
+          getAppHeader: getAppHeader,
+          user: user
+        })]
+      })]
+    }), openRecordsModal && /*#__PURE__*/jsxRuntime.jsx(Records, {
+      open: openRecordsModal,
+      onClose: () => setOpenRecordsModal(false),
+      t: t,
+      sourceOptions: [],
+      versionOptions: [],
+      id: params?.id,
+      subject: namespace,
+      onSubmit: values => {
+        setSource(values?.source);
+        setVersion(values?.version);
+      }
+    })]
+  });
+};
+
 exports.ActivitiesTable = ActivitiesTable;
 exports.DocumentsTable = DocumentsTable;
 exports.EventsTable = EventsTable;
@@ -45864,4 +47748,5 @@ exports.SupplyChainDashboard = SupplyChain;
 exports.TablePage = TablePage;
 exports.UserDashboard = UserDashboard;
 exports.UsersTable = UsersTable;
+exports.View = View;
 exports.WorkersTable = WorkersTable;