datastake-daf 0.6.782 → 0.6.784

package/dist/pages/index.js

@@ -4794,6 +4794,7 @@ function Loading({
 }
 
 const capitalize = string => string && string.charAt(0).toUpperCase() + string.slice(1);
+const capitalizeAll = string => string && string.split(" ").map(word => word.length > 1 ? capitalize(word) : word).join(" ");
 const camelCaseToTitle = string => string && typeof string === 'string' ? string.split(/(?=[A-Z])/).map(word => capitalize(word)).join(' ') : string;
 const findOptions = (value, options) => {
   if (value instanceof Array) {
@@ -5295,6 +5296,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;
@@ -5401,6 +5408,44 @@ const getImageUploadEditValue = value => {
   return (Array.isArray(value) ? value : value && typeof value === "object" && value.fileList && Array.isArray(value.fileList) ? value.fileList.map(f => f.response).filter(f => f) : []) || [];
 };
 const noActionsInputs = ["groupExpandable", "groupCheckbox", "smartHelp"];
+const isObjectEmpty = obj => {
+  if (obj === null || typeof obj !== "object") {
+    return false;
+  }
+  if (Object.keys(obj).length === 0) {
+    return true;
+  }
+  return Object.values(obj).every(value => isObjectEmpty(value));
+};
+
+/**
+ * Filters and processes the input data by extracting specific properties.
+ * It checks if the 'meta' property is empty and sets it to undefined if so,
+ * then returns the rest of the data merged with the processed 'meta'. Used to clear data
+ * when they are sent to backend.
+ *
+ * @param {Object} data - The input data object containing various properties.
+ * @returns {Object} - The processed data object with filtered properties.
+ */
+
+const filterCreateData = data => {
+  // eslint-disable-next-line no-unused-vars
+  const {
+    view,
+    module,
+    scope,
+    form,
+    meta,
+    createdAt,
+    updatedAt,
+    ...rest
+  } = data;
+  const _meta = isObjectEmpty(meta) ? undefined : meta;
+  return {
+    ...rest,
+    meta: _meta
+  };
+};
 
 /**
  * Formats a date string into a specified format. This function should
@@ -6147,6 +6192,17 @@ DAFHeader.propTypes = {
   filtersConfig: PropTypes__default["default"].any
 };
 
+const MultiSelectStyled = styled__default["default"](antd.Select)`
+  &.ant-select-single {
+    .ant-select-selector {
+        padding-inline-end: 24px !important;
+        padding: 0 !important;
+        max-width: 56px !important;
+        width: 56px !important;
+    }
+  }
+`;
+
 const {
   useToken: useToken$8
 } = antd.theme;
@@ -6285,7 +6341,7 @@ function Multiselect({
       });
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+  return /*#__PURE__*/jsxRuntime.jsx(MultiSelectStyled, {
     mode: isSingle ? undefined : "multiple",
     value: selectValue,
     onChange: onSelectChange,
@@ -6342,7 +6398,8 @@ function Multiselect({
                 border: `1px solid ${token.baseGray40}`,
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center"
+                justifyContent: "center",
+                padding: 0
               },
               children: option?.avatar || getFirstChar(option?.label)
             }, value);
@@ -7570,6 +7627,8 @@ const Style$f = styled__default["default"].div`
   width: 100%;
   height: 472px;
 
+  
+
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -7672,11 +7731,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 +8272,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 +8337,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 +8360,25 @@ function getStakeholderPosition({
     angleDeg
   };
 }
+function applyAnimationDirect(el, isShortLink, lineFlow = "downstream") {
+  if (!(el instanceof SVGElement) || isShortLink) return;
+  el.style.strokeDasharray = "10, 10";
+  el.style.strokeDashoffset = "0";
+  el.style.animation = `dash-flow 1.2s linear infinite ${lineFlow === "upstream" && "reverse"}`;
+  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 +8388,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 +8730,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 +8744,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 +8753,8 @@ function StakeholderIcon$1({
           zoom,
           isSelected,
           id,
-          listOfPolylines: polylinesRef.current
+          listOfPolylines: polylinesRef.current,
+          animated: true
         });
         return;
       }
@@ -8745,61 +8772,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 +8783,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 +8799,8 @@ function StakeholderIcon$1({
         link,
         onClickLink: () => {
           onClickLink(data);
-        }
+        },
+        isNewTab: true
       }),
       getPopupContainer: triggerNode => {
         const mapElement = document.getElementById("map");
@@ -8879,6 +8855,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 +8876,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 +8932,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 +9024,9 @@ function LocationIcon({
         zoom,
         isFromStakeholder: true,
         isForceOpen,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        stakeholderType: stakeholder.type,
+        animated: true
       });
     });
     return () => {
@@ -9018,38 +9041,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 +9638,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 +9844,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 +9862,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 +9888,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 +9964,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 +10001,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");
     }
@@ -14202,7 +14318,7 @@ function BarChart({
             return Array.from(new Array(11), (v, i) => i * 10);
           }
         } : {}),
-        ...xAxisConfig,
+        ...(Object.keys(xAxisConfig).length > 0 ? xAxisConfig : {}),
         label: {
           formatter: isPercentage ? v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`) + " %" : formattedXAxis,
           ...xAxisConfig?.label
@@ -14332,6 +14448,10 @@ const useContributionsGraph = ({
     });
   }, [data, t]);
   const isEmpty = React.useMemo(() => _data?.length === 0, [_data]);
+  console.log({
+    _data,
+    isEmpty
+  });
   const chartConfig = React.useMemo(() => {
     return {
       data: _data,
@@ -14339,13 +14459,11 @@ const useContributionsGraph = ({
       yFieldKey: "category",
       seriesField: "type",
       isGroup: true,
-      ...(isEmpty && {
-        xAxisConfig: {
-          min: 0,
-          max: 10,
-          tickCount: 5
-        }
-      }),
+      xAxisConfig: isEmpty ? {
+        min: 0,
+        max: 10,
+        tickCount: 5
+      } : {},
       renderTooltipContent: (title, items) => {
         const tooltipItems = items.map(item => ({
           label: item.name,
@@ -14401,10 +14519,11 @@ function ContributionsGraph({
     loading: loading,
     title: t("Contributions"),
     className: "with-border-header h-w-btn-header no-px-body",
-    children: /*#__PURE__*/jsxRuntime.jsx(BarChart, {
+    children: /*#__PURE__*/React.createElement(BarChart, {
       ...chartConfig,
       height: "400px",
-      t: t
+      t: t,
+      key: data?.length
     })
   });
 }
@@ -15176,7 +15295,7 @@ const renderStatusTag = ({
   }
 };
 
-const getColumns$c = ({
+const getColumns$d = ({
   t,
   goTo,
   user,
@@ -15192,6 +15311,8 @@ const getColumns$c = ({
   title: t('ID'),
   ellipsis: true,
   show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -15208,6 +15329,8 @@ const getColumns$c = ({
   title: t('Name'),
   ellipsis: true,
   show: true,
+  key: "name",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -15241,6 +15364,8 @@ const getColumns$c = ({
   title: t('Legal Form'),
   ellipsis: true,
   show: true,
+  key: "subCategory",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -16242,6 +16367,7 @@ const BaseScreen = ({
           showFilters: showFilters,
           defaultFilters: defaultFilters,
           onChange: onTableChange,
+          t: t,
           ...rest
         }), /*#__PURE__*/jsxRuntime.jsx(Pagination, {
           t: t,
@@ -17087,6 +17213,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 +17553,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 +17647,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 +24671,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 +24746,17 @@ function convertUndefinedToNull(obj) {
   }
   return obj;
 }
+const removeKeysFromObject = (obj = {}, keys = []) => {
+  if (typeof obj !== 'object' || obj === null) return obj;
+  const result = {};
+  for (const key of Object.keys(obj)) {
+    if (!keys.includes(key)) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+};
+const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);
 
 const packageApps = ["kota", "sbg", "nashiriki", "straatos", "wazi", "hatua"]; //PACKAGE_CHANGE_LATER (add sbg)
 
@@ -29969,7 +30185,9 @@ const useGetQueryParams = ({
       },
       otherParams: {
         ...rest
-      }
+      },
+      sortBy,
+      sortDir
     };
   }, [queryParams]);
   return params;
@@ -30056,7 +30274,7 @@ const NavigationAction = ({
   });
 };
 
-const getColumns$b = ({
+const getColumns$c = ({
   t,
   goTo,
   user,
@@ -30217,7 +30435,7 @@ const getFiltersConfig$9 = ({
     country: {
       type: 'select',
       label: 'Country',
-      placeholder: t => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30250,7 +30468,7 @@ const getFiltersConfig$9 = ({
         }
         return t('Province');
       },
-      placeholder: t => `${t('Filter by')} ${t('Province').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_1'
@@ -30294,7 +30512,7 @@ const getFiltersConfig$9 = ({
         return t('Province');
       },
       show: data => !(data.country && data.administrativeLevel1),
-      placeholder: t => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_2',
@@ -30317,7 +30535,7 @@ const getFiltersConfig$9 = ({
     subCategory: {
       type: 'select',
       label: 'Sub Category',
-      placeholder: t => `${t('Filter by')} ${t('Sub Category').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Sub Category').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30353,7 +30571,7 @@ const getFiltersConfig$9 = ({
     positionInTheMineralSupplyChain: {
       type: 'select',
       label: 'Position',
-      placeholder: t => `${t('Filter by')} ${t('Position').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30366,7 +30584,7 @@ const getFiltersConfig$9 = ({
     status: {
       type: "select",
       label: "Status",
-      placeholder: t => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+      placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30398,10 +30616,10 @@ const getFilterOptions$9 = (options, t) => {
     subCategory: subCategoriesOptions,
     status: [{
       value: "submitted",
-      label: "Submitted"
+      label: t("Submitted")
     }, {
       value: "private",
-      label: "Private"
+      label: t("Private")
     }]
   };
   return _default;
@@ -30424,7 +30642,7 @@ const getFiltersConfig$8 = ({
     country: {
       type: 'select',
       label: 'Country',
-      placeholder: t => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30457,7 +30675,7 @@ const getFiltersConfig$8 = ({
         }
         return t('Province');
       },
-      placeholder: t => `${t('Filter by')} ${t('Province').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_1'
@@ -30501,7 +30719,7 @@ const getFiltersConfig$8 = ({
         return t('Province');
       },
       show: data => !(data.country && data.administrativeLevel1),
-      placeholder: t => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_2',
@@ -30524,7 +30742,7 @@ const getFiltersConfig$8 = ({
     activity: {
       type: 'select',
       label: 'Activity',
-      placeholder: t => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30532,35 +30750,12 @@ const getFiltersConfig$8 = ({
         flex: 1
       },
       getLabel: option => option.label,
-      getValue: option => option.value,
-      filterOptions: val => {
-        if (val) {
-          const {
-            option,
-            filters
-          } = val;
-          if (filters && option) {
-            const {
-              filters: optionFilters
-            } = option;
-            if (Array.isArray(optionFilters) && optionFilters.length) {
-              const {
-                value,
-                condition
-              } = optionFilters[0];
-              if (condition === 'includes') {
-                return value.includes('corporation');
-              }
-            }
-          }
-        }
-        return true;
-      }
+      getValue: option => option.value
     },
     positionInTheMineralSupplyChain: {
       type: 'select',
       label: 'Position',
-      placeholder: t => `${t('Filter by')} ${t('Position').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30573,7 +30768,7 @@ const getFiltersConfig$8 = ({
     status: {
       type: "select",
       label: "Status",
-      placeholder: t => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+      placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -30602,10 +30797,10 @@ const getFilterOptions$8 = (options, t) => {
   const _default = {
     status: [{
       value: "submitted",
-      label: "Submitted"
+      label: t("Submitted")
     }, {
       value: "private",
-      label: "Private"
+      label: t("Private")
     }],
     category: stakeholderCategoryOptions || categoryOptions,
     country: countries,
@@ -30628,7 +30823,7 @@ const viewConfig$6 = {
   createTitle: "Create Worker"
 };
 
-const getColumns$a = ({
+const getColumns$b = ({
   t,
   goTo,
   user,
@@ -30639,25 +30834,31 @@ const getColumns$a = ({
   subject,
   data,
   applications
-}) => [
-// {
-//     dataIndex: 'datastakeId',
-//     title: t('ID'),
-//     ellipsis: true,
-//     show: true,
-//     render: (v, all) => {
-//       if (all.empty) {
-//         return <div className="daf-default-cell" />
-//       }
-
-//       return <Tooltip title={v}>{v}</Tooltip>;
-//     },
-// },
-{
+}) => [{
+  dataIndex: 'datastakeId',
+  title: t('Title'),
+  ellipsis: true,
+  show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: v,
+      children: v
+    });
+  }
+}, {
   dataIndex: 'name',
   title: t('Name'),
   ellipsis: true,
   show: true,
+  key: "name",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -30671,9 +30872,11 @@ const getColumns$a = ({
   }
 }, {
   dataIndex: 'mineSite',
-  title: t('Position'),
+  title: t('Site'),
   ellipsis: true,
   show: true,
+  key: "mineSite",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -30918,30 +31121,7 @@ const getFiltersConfig$7 = ({
         flex: 1
       },
       getLabel: option => option.label,
-      getValue: option => option.value,
-      filterOptions: val => {
-        if (val) {
-          const {
-            option,
-            filters
-          } = val;
-          if (filters && option) {
-            const {
-              filters: optionFilters
-            } = option;
-            if (Array.isArray(optionFilters) && optionFilters.length) {
-              const {
-                value,
-                condition
-              } = optionFilters[0];
-              if (condition === 'includes') {
-                return value.includes('corporation');
-              }
-            }
-          }
-        }
-        return true;
-      }
+      getValue: option => option.value
     },
     category: {
       type: 'select',
@@ -31130,7 +31310,7 @@ MoreTags.propTypes = {
   limit: PropTypes__default["default"].number
 };
 
-const getColumns$9 = ({
+const getColumns$a = ({
   t,
   goTo,
   user,
@@ -31146,6 +31326,8 @@ const getColumns$9 = ({
   title: t('ID'),
   ellipsis: true,
   show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31162,6 +31344,8 @@ const getColumns$9 = ({
   title: t('Title'),
   ellipsis: true,
   show: true,
+  key: "name",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31178,6 +31362,8 @@ const getColumns$9 = ({
   title: t('Type'),
   ellipsis: true,
   show: true,
+  key: "typeOfEvent",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31365,12 +31551,13 @@ const getFiltersConfig$6 = ({
       label: "Timeframe",
       style: {
         flex: 1
-      }
+      },
+      t: t
     },
     country: {
       type: 'select',
       label: 'Country',
-      placeholder: t => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -31403,7 +31590,7 @@ const getFiltersConfig$6 = ({
         }
         return t('Province');
       },
-      placeholder: t => `${t('Filter by')} ${t('Province').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_1'
@@ -31447,7 +31634,7 @@ const getFiltersConfig$6 = ({
         return t('Province');
       },
       show: data => !(data.country && data.administrativeLevel1),
-      placeholder: t => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_2',
@@ -31470,7 +31657,7 @@ const getFiltersConfig$6 = ({
     category: {
       type: 'select',
       label: 'Category',
-      placeholder: t => `${t('Filter by')} ${t('Category').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Category').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -31506,7 +31693,7 @@ const getFiltersConfig$6 = ({
     positionInTheMineralSupplyChain: {
       type: 'select',
       label: 'Position',
-      placeholder: t => `${t('Filter by')} ${t('Position').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -31519,7 +31706,7 @@ const getFiltersConfig$6 = ({
     status: {
       type: "select",
       label: "Status",
-      placeholder: t => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+      placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -31544,18 +31731,23 @@ const getFilterOptions$6 = (options, t) => {
     administrativeLevel1,
     administrativeLevel2,
     positionInMineralSupplyChainOptions,
-    subCategoriesOptions
+    subCategoriesOptions,
+    eventCategoryOptions = []
   } = options || {};
+  const _categoryOptions = eventCategoryOptions?.map(item => ({
+    value: item.value,
+    label: typeof item.label === 'object' ? Object.values(item.label)[1] : item.label
+  }));
   const _default = {
     timeframe: timeframe,
     status: [{
       value: "submitted",
-      label: "Submitted"
+      label: t("Submitted")
     }, {
       value: "private",
-      label: "Private"
+      label: t("Private")
     }],
-    category: stakeholderCategoryOptions || categoryOptions,
+    category: _categoryOptions,
     country: countries,
     subCategory: subCategoriesOptions,
     // category: category,
@@ -31585,7 +31777,7 @@ const getEventCategoryBySubject = (eventCategoryObject, subject, isSingular = fa
   return eventCategoryObject[key] || null;
 };
 
-const getColumns$8 = ({
+const getColumns$9 = ({
   t,
   goTo,
   user,
@@ -31601,6 +31793,8 @@ const getColumns$8 = ({
   title: t('ID'),
   ellipsis: true,
   show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31617,6 +31811,8 @@ const getColumns$8 = ({
   title: t('Title'),
   ellipsis: true,
   show: true,
+  key: "name",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31632,6 +31828,7 @@ const getColumns$8 = ({
   title: t("Date"),
   dataIndex: "date",
   key: "date",
+  sorter: () => 0 + 0,
   render: (date, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -31978,18 +32175,23 @@ const getFilterOptions$5 = (options, t) => {
     administrativeLevel1,
     administrativeLevel2,
     positionInMineralSupplyChainOptions,
-    subCategoriesOptions
+    subCategoriesOptions,
+    eventCategoryOptions = []
   } = options || {};
+  const _categoryOptions = eventCategoryOptions?.map(item => ({
+    value: item.value,
+    label: typeof item.label === 'object' ? Object.values(item.label)[0] : item.label
+  }));
   const _default = {
     timeframe: timeframe,
     status: [{
       value: "submitted",
-      label: "Submitted"
+      label: t("Submitted")
     }, {
       value: "private",
-      label: "Private"
+      label: t("Private")
     }],
-    category: stakeholderCategoryOptions || categoryOptions,
+    category: _categoryOptions,
     country: countries,
     subCategory: subCategoriesOptions,
     // category: category,
@@ -32010,6 +32212,269 @@ const viewConfig$3 = {
   createTitle: "Create Incident"
 };
 
+const getColumns$8 = ({
+  t,
+  goTo,
+  user,
+  options,
+  activeTab,
+  getRedirectLink,
+  theme,
+  subject,
+  data,
+  applications
+}) => [{
+  dataIndex: 'datastakeId',
+  title: t('ID'),
+  ellipsis: true,
+  show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: v,
+      children: v
+    });
+  }
+}, {
+  dataIndex: 'name',
+  title: t('Title'),
+  ellipsis: true,
+  show: true,
+  key: "name",
+  sorter: () => 0 + 0,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: v,
+      children: v
+    });
+  }
+}, {
+  title: t("Date"),
+  dataIndex: "date",
+  key: "date",
+  sorter: () => 0 + 0,
+  render: (date, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: _date,
+      children: _date
+    });
+  },
+  ellipsis: true
+}, {
+  dataIndex: 'mineSite',
+  title: t('Location'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+
+    // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
+    const mineSite = all?.location?.name;
+    return mineSite ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: mineSite,
+      children: mineSite
+    }) : '-';
+  }
+}, {
+  dataIndex: 'province',
+  title: t('Province'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
+    return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: region,
+      children: region
+    }) : '-';
+  }
+}, {
+  dataIndex: 'territory',
+  title: t('Territory'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
+    return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: district,
+      children: district
+    }) : '-';
+  }
+}, {
+  dataIndex: 'eventCategory',
+  title: t('Category'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const eventCategory = findOptions(v, data?.options?.eventCategoryOptions);
+    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
+    return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: categoryValue,
+      children: categoryValue
+    }) : '-';
+  }
+}, {
+  title: t("Sources"),
+  dataIndex: "sources",
+  key: "sources",
+  show: activeTab !== "own",
+  render: (val, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const sources = sourceAvatarConfig(val, user, applications);
+    return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
+      items: sources
+    });
+  }
+}, {
+  title: t("Status"),
+  dataIndex: "status",
+  key: "status",
+  show: activeTab === "own",
+  render: (val, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
+    return renderStatusTag({
+      value: _val,
+      t
+    });
+  }
+}, {
+  title: t("Last Update"),
+  dataIndex: "updatedAt",
+  key: "updatedAt",
+  render: (date, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: _date,
+      children: _date
+    });
+  },
+  ellipsis: true
+}, {
+  id: 'actions',
+  title: "",
+  width: 60,
+  render: (_, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const onClick = () => {
+      let link = `/app/view/${subject}/${all.datastakeId}`;
+      if (activeTab === "shared") {
+        link += `?sourceId=${all?.authorId?.id}`;
+      }
+      goTo(getRedirectLink(link));
+    };
+    return /*#__PURE__*/jsxRuntime.jsx(NavigationAction, {
+      onClick: onClick,
+      theme: theme
+    });
+  }
+}].filter(column => column.show !== false);
+
+const getFiltersConfig$4 = ({
+  t
+}) => {
+  return {
+    country: {
+      type: 'select',
+      placeholder: t('Country'),
+      style: {
+        flex: 1
+      },
+      labelStyle: {
+        flex: 1
+      },
+      getLabel: option => option.label,
+      getValue: option => option.value
+    },
+    category: {
+      type: 'select',
+      label: 'Category',
+      placeholder: t => `${t('Filter by')} ${t('Category').toLowerCase()}`,
+      style: {
+        flex: 1
+      },
+      labelStyle: {
+        flex: 1
+      },
+      getLabel: option => option.label,
+      getValue: option => option.value
+    }
+  };
+};
+const getFilterOptions$4 = (options, t) => {
+  const {
+    countries = [],
+    category = [],
+    locationCategories = []
+  } = options || {};
+  return {
+    country: countries,
+    category: locationCategories || category
+  };
+};
+const formConfig$2 = {
+  namespace: 'locations',
+  view: 'scoping',
+  scope: 'create',
+  formType: 'location'
+};
+const viewConfig$2 = {
+  title: "Locations",
+  createTitle: "Create Location"
+};
+
 const getColumns$7 = ({
   t,
   goTo,
@@ -32037,264 +32502,6 @@ const getColumns$7 = ({
       children: v
     });
   }
-}, {
-  dataIndex: 'name',
-  title: t('Title'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
-}, {
-  title: t("Date"),
-  dataIndex: "date",
-  key: "date",
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  dataIndex: 'mineSite',
-  title: t('Location'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-
-    // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
-    const mineSite = all?.location?.name;
-    return mineSite ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: mineSite,
-      children: mineSite
-    }) : '-';
-  }
-}, {
-  dataIndex: 'province',
-  title: t('Province'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
-    return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: region,
-      children: region
-    }) : '-';
-  }
-}, {
-  dataIndex: 'territory',
-  title: t('Territory'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
-    return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: district,
-      children: district
-    }) : '-';
-  }
-}, {
-  dataIndex: 'eventCategory',
-  title: t('Category'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const eventCategory = findOptions(v, data?.options?.eventCategoryOptions);
-    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
-    return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: categoryValue,
-      children: categoryValue
-    }) : '-';
-  }
-}, {
-  title: t("Sources"),
-  dataIndex: "sources",
-  key: "sources",
-  show: activeTab !== "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const sources = sourceAvatarConfig(val, user, applications);
-    return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
-      items: sources
-    });
-  }
-}, {
-  title: t("Status"),
-  dataIndex: "status",
-  key: "status",
-  show: activeTab === "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
-    return renderStatusTag({
-      value: _val,
-      t
-    });
-  }
-}, {
-  title: t("Last Update"),
-  dataIndex: "updatedAt",
-  key: "updatedAt",
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  id: 'actions',
-  title: "",
-  width: 60,
-  render: (_, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const onClick = () => {
-      let link = `/app/view/${subject}/${all.datastakeId}`;
-      if (activeTab === "shared") {
-        link += `?sourceId=${all?.authorId?.id}`;
-      }
-      goTo(getRedirectLink(link));
-    };
-    return /*#__PURE__*/jsxRuntime.jsx(NavigationAction, {
-      onClick: onClick,
-      theme: theme
-    });
-  }
-}].filter(column => column.show !== false);
-
-const getFiltersConfig$4 = ({
-  t
-}) => {
-  return {
-    country: {
-      type: 'select',
-      placeholder: t('Country'),
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    },
-    category: {
-      type: 'select',
-      label: 'Category',
-      placeholder: t => `${t('Filter by')} ${t('Category').toLowerCase()}`,
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    }
-  };
-};
-const getFilterOptions$4 = (options, t) => {
-  const {
-    countries = [],
-    category = [],
-    locationCategories = []
-  } = options || {};
-  return {
-    country: countries,
-    category: locationCategories || category
-  };
-};
-const formConfig$2 = {
-  namespace: 'locations',
-  view: 'scoping',
-  scope: 'create',
-  formType: 'location'
-};
-const viewConfig$2 = {
-  title: "Locations",
-  createTitle: "Create Location"
-};
-
-const getColumns$6 = ({
-  t,
-  goTo,
-  user,
-  options,
-  activeTab,
-  getRedirectLink,
-  theme,
-  subject,
-  data,
-  applications
-}) => [{
-  dataIndex: 'datastakeId',
-  title: t('ID'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
 }, {
   dataIndex: 'name',
   title: t('Name'),
@@ -32444,7 +32651,7 @@ const getFiltersConfig$3 = ({
     country: {
       type: 'select',
       label: 'Country',
-      placeholder: t => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -32477,7 +32684,7 @@ const getFiltersConfig$3 = ({
         }
         return t('Province');
       },
-      placeholder: t => `${t('Filter by')} ${t('Province').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_1'
@@ -32521,7 +32728,7 @@ const getFiltersConfig$3 = ({
         return t('Province');
       },
       show: data => !(data.country && data.administrativeLevel1),
-      placeholder: t => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
       filters: data => ({
         country: data.country,
         level: 'level_2',
@@ -32544,7 +32751,7 @@ const getFiltersConfig$3 = ({
     product: {
       type: 'select',
       label: 'Product',
-      placeholder: t => `${t('Filter by')} ${t('Product').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Product').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -32552,35 +32759,25 @@ const getFiltersConfig$3 = ({
         flex: 1
       },
       getLabel: option => option.label,
-      getValue: option => option.value,
-      filterOptions: val => {
-        if (val) {
-          const {
-            option,
-            filters
-          } = val;
-          if (filters && option) {
-            const {
-              filters: optionFilters
-            } = option;
-            if (Array.isArray(optionFilters) && optionFilters.length) {
-              const {
-                value,
-                condition
-              } = optionFilters[0];
-              if (condition === 'includes') {
-                return value.includes('corporation');
-              }
-            }
-          }
-        }
-        return true;
-      }
+      getValue: option => option.value
+    },
+    type: {
+      type: 'select',
+      label: 'Type',
+      placeholder: () => `${t('Filter by')} ${t('Type').toLowerCase()}`,
+      style: {
+        flex: 1
+      },
+      labelStyle: {
+        flex: 1
+      },
+      getLabel: option => option.label,
+      getValue: option => option.value
     },
     positionInTheMineralSupplyChain: {
       type: 'select',
       label: 'Position',
-      placeholder: t => `${t('Filter by')} ${t('Position').toLowerCase()}`,
+      placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -32593,7 +32790,7 @@ const getFiltersConfig$3 = ({
     status: {
       type: "select",
       label: "Status",
-      placeholder: t => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+      placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
       style: {
         flex: 1
       },
@@ -32616,21 +32813,24 @@ const getFilterOptions$3 = (options, t) => {
     stakeholderCategoryOptions,
     stakeholderSubCategoriesOptions,
     administrativeLevel1,
-    administrativeLevel2
+    administrativeLevel2,
+    mineralOptions,
+    locationCategories = []
   } = options || {};
   const _default = {
     category: stakeholderCategoryOptions || categoryOptions,
     country: countries,
-    product: product,
+    product: mineralOptions,
+    type: locationCategories,
     administrativeLevel1,
     administrativeLevel2,
     subCategory: subCategoriesOptions,
     status: [{
       value: "submitted",
-      label: "Submitted"
+      label: t("Submitted")
     }, {
       value: "private",
-      label: "Private"
+      label: t("Private")
     }]
   };
   return _default;
@@ -32682,7 +32882,7 @@ MoreOptions.propTypes = {
   limit: PropTypes__default["default"].number
 };
 
-const getColumns$5 = ({
+const getColumns$6 = ({
   t,
   goTo,
   user,
@@ -32698,6 +32898,8 @@ const getColumns$5 = ({
   title: t('ID'),
   ellipsis: true,
   show: true,
+  key: "datastakeId",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -32714,6 +32916,8 @@ const getColumns$5 = ({
   title: t('Name'),
   ellipsis: true,
   show: true,
+  key: "name",
+  sorter: () => 0 + 0,
   render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -32761,7 +32965,7 @@ const getColumns$5 = ({
   }
 }, {
   dataIndex: 'category',
-  title: t('Type'),
+  title: t('type'),
   ellipsis: true,
   show: true,
   render: (v, all) => {
@@ -32918,7 +33122,7 @@ const viewConfig = {
   createTitle: "Create Document"
 };
 
-const getColumns$4 = ({
+const getColumns$5 = ({
   t,
   goTo,
   user,
@@ -33043,63 +33247,63 @@ const FILTER_REGISTRY = {
     options: getFilterOptions$a,
     formConfig: formConfig$8,
     viewConfig: viewConfig$8,
-    columns: getColumns$b
+    columns: getColumns$c
   },
   workers: {
     config: getFiltersConfig$8,
     options: getFilterOptions$8,
     formConfig: formConfig$6,
     viewConfig: viewConfig$6,
-    columns: getColumns$a
+    columns: getColumns$b
   },
   operators: {
     config: getFiltersConfig$9,
     options: getFilterOptions$9,
     formConfig: formConfig$7,
     viewConfig: viewConfig$7,
-    columns: getColumns$c
+    columns: getColumns$d
   },
   events: {
     config: getFiltersConfig$7,
     options: getFilterOptions$7,
     formConfig: formConfig$5,
     viewConfig: viewConfig$5,
-    columns: getColumns$9
+    columns: getColumns$a
   },
   activities: {
     config: getFiltersConfig$6,
     options: getFilterOptions$6,
     formConfig: formConfig$4,
     viewConfig: viewConfig$4,
-    columns: getColumns$8
+    columns: getColumns$9
   },
   incidents: {
     config: getFiltersConfig$5,
     options: getFilterOptions$5,
     formConfig: formConfig$3,
     viewConfig: viewConfig$3,
-    columns: getColumns$7
+    columns: getColumns$8
   },
   locations: {
     config: getFiltersConfig$4,
     options: getFilterOptions$4,
     formConfig: formConfig$2,
     viewConfig: viewConfig$2,
-    columns: getColumns$6
+    columns: getColumns$7
   },
   'production-sites': {
     config: getFiltersConfig$3,
     options: getFilterOptions$3,
     formConfig: formConfig$1,
     viewConfig: viewConfig$1,
-    columns: getColumns$5
+    columns: getColumns$6
   },
   documents: {
     config: getFiltersConfig$2,
     options: getFilterOptions$2,
     formConfig: formConfig,
     viewConfig: viewConfig,
-    columns: getColumns$4
+    columns: getColumns$5
   }
 };
 const DEFAULT_SUBJECT = 'stakeholders';
@@ -33150,7 +33354,7 @@ const getViewConfig = ({
   return registry?.viewConfig;
 };
 
-const getColumns$3 = ({
+const getColumns$4 = ({
   t,
   goTo,
   user,
@@ -33237,7 +33441,7 @@ const useTablePage = ({
     extendingFilters: extendingFilters,
     subject
   });
-  const columns = React.useMemo(() => getColumns$3({
+  const columns = React.useMemo(() => getColumns$4({
     t,
     goTo,
     user,
@@ -33248,7 +33452,7 @@ const useTablePage = ({
     subject,
     data,
     applications
-  }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns$3]);
+  }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns$4]);
   const selectFiltersConfig = React.useMemo(() => getFiltersConfig$1({
     t,
     subject
@@ -33334,6 +33538,12 @@ const TablePage = ({
   breadcrumbs = [],
   onDownload
 }) => {
+  const _options = React.useMemo(() => {
+    return {
+      ...options,
+      ...data?.options
+    };
+  }, [options, data?.options]);
   const {
     activeTab,
     selectOptions,
@@ -33349,7 +33559,7 @@ const TablePage = ({
     location,
     getData,
     extendingFilters,
-    options,
+    options: _options,
     t,
     goTo,
     user,
@@ -33813,7 +34023,7 @@ const WorkersTable = ({
     getData: getData,
     getApiBaseUrl: getApiBaseUrl,
     getAppHeader: getAppHeader,
-    getColumns: getColumns$a,
+    getColumns: getColumns$b,
     breadcrumbs: breadcrumbs,
     extendingFilters: extendingFilters,
     formConfig: {
@@ -34038,7 +34248,7 @@ const ProductionSitesTable = ({
   });
 };
 
-const getColumns$2 = ({
+const getColumns$3 = ({
   t,
   goTo,
   user,
@@ -34516,7 +34726,7 @@ const UsersTable = ({
   const params = new URLSearchParams(location?.search);
   const [openCreateModal, setOpenCreateModal] = React.useState(params.has("create"));
   const [userToEdit, setUserToEdit] = React.useState(null);
-  const columns = React.useMemo(() => getColumns$2({
+  const columns = React.useMemo(() => getColumns$3({
     t,
     goTo,
     user,
@@ -34889,25 +35099,29 @@ const checkboxConfig = {
   name: "Name",
   datastakeId: "ID"
 };
-const partnerTypes = [{
-  label: "Individual",
-  value: "individual"
-}, {
-  label: "Organisation",
-  value: "organisation"
-}];
-const partnershipTypes = [{
-  label: "Source",
-  value: "source"
-}, {
-  label: "Client",
-  value: "client"
-}, {
-  label: "Exchange",
-  value: "exchange"
-}];
+const getPartnerTypes = t => {
+  return [{
+    label: t("Individual"),
+    value: "individual"
+  }, {
+    label: t("Organisation"),
+    value: "organisation"
+  }];
+};
+const getPartnershipTypes = t => {
+  return [{
+    label: t("Source"),
+    value: "source"
+  }, {
+    label: t("Client"),
+    value: "client"
+  }, {
+    label: t("Exchange"),
+    value: "exchange"
+  }];
+};
 
-const getColumns$1 = ({
+const getColumns$2 = ({
   t,
   accept,
   decline,
@@ -34958,6 +35172,7 @@ const getColumns$1 = ({
         className: "daf-default-cell"
       });
     }
+    const partnershipTypes = getPartnershipTypes(t);
     return partnershipTypes.find(v => v.value === val)?.label || val || "-";
   }
 }, {
@@ -34974,6 +35189,7 @@ const getColumns$1 = ({
         className: "daf-default-cell"
       });
     }
+    const partnerTypes = getPartnerTypes(t);
     return partnerTypes.find(v => v.value === val)?.label || val || "-";
   }
 }, {
@@ -35279,6 +35495,8 @@ const Create = ({
   getAppHeader = () => {},
   getApiBaseUrl = () => {}
 }) => {
+  const partnerTypes = React.useMemo(() => getPartnerTypes(t), [t]);
+  const partnershipTypes = React.useMemo(() => getPartnershipTypes(t), [t]);
   const form = React.useMemo(() => ({
     identification: {
       partnershipType: {
@@ -35485,6 +35703,8 @@ const Edit = ({
 }) => {
   const [MainForm] = antd.Form.useForm();
   const [loading, setLoading] = React.useState(false);
+  React.useMemo(() => getPartnerTypes(t), [t]);
+  const partnershipTypes = React.useMemo(() => getPartnershipTypes(t), [t]);
   React.useEffect(() => {
     MainForm.setFieldsValue({
       ...partner,
@@ -35652,7 +35872,7 @@ const PartnersTable = ({
     setTotalRequests,
     t
   });
-  const columns = React.useMemo(() => getColumns$1({
+  const columns = React.useMemo(() => getColumns$2({
     t,
     accept,
     decline,
@@ -37041,6 +37261,9 @@ const TradeRelationships = ({
     operatorData,
     APP
   });
+  console.log({
+    graphData
+  });
   React.useEffect(() => {
     const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
     if (!filters.products && defaultProduct) {
@@ -37720,12 +37943,12 @@ const OperatorSummary = ({
   });
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
-      title: hasSelect ? t("Operator Review") : (singleItemData?.name || "") + " " + t("Summary"),
+      title: hasSelect ? t("Operator Review") : `${singleItemData?.name || ""} ${singleItemData?.name ? t("Summary") : ""}`,
       className: "with-border-header h-w-btn-header no-px-body",
       goBackTo: !hasSelect && goBack,
       breadcrumbs: breadcrumbs,
       addedHeaderFirst: true,
-      actionButtons: [{
+      actionButtons: hasSelect ? [] : [{
         tooltip: t("Details"),
         icon: "FileEdit",
         onClick: () => {
@@ -37739,9 +37962,6 @@ const OperatorSummary = ({
       }],
       addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-row gap-4",
-        style: {
-          marginRight: 8
-        },
         children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
           options: [...sourceOptions],
           isAvatarGroup: true,
@@ -37757,7 +37977,10 @@ const OperatorSummary = ({
           dropDownWidth: 200,
           defaultSelected: (partners || []).map(p => p.id) || []
         }, partners?.length)
-      })
+      }),
+      onDownload: () => {
+        console.log("onDownload");
+      }
     }),
     children: [hasSelect && /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
@@ -39900,6 +40123,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 +40864,7 @@ class SourceService extends BaseService {
     });
   }
 }
-createLazyService(SourceService);
+var SourceService$1 = createLazyService(SourceService);
 
 class VersionService extends BaseService {
   getSources({
@@ -39951,7 +40878,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%;
@@ -44564,7 +45828,7 @@ const CommunityParticipation = ({
 const ACTIVITIES_TAB$1 = 'activities';
 const PARTNERS_TAB$1 = 'partners';
 const INCIDENTS_TAB$1 = 'incidents';
-const getColumns = ({
+const getColumns$1 = ({
   projectId,
   t,
   show = 'show',
@@ -45245,7 +46509,7 @@ const AssociatedInformation = ({
   const handleTabChange = React.useCallback(value => {
     setActiveTab(value);
   }, []);
-  const columns = React.useMemo(() => getColumns({
+  const columns = React.useMemo(() => getColumns$1({
     t,
     activeTab,
     view: activeTab,
@@ -45828,13 +47092,12 @@ const MineSummary = ({
   });
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
-      title: hasSelect ? t("Mine Review") : (singleItemData?.name || "") + " " + t("Summary"),
+      title: hasSelect ? t("Mine Review") : `${singleItemData?.name || ""} ${singleItemData?.name ? t("Summary") : ""}`,
       className: "with-border-header h-w-btn-header no-px-body",
       goBackTo: !hasSelect && goBack,
-      loading: loading,
       breadcrumbs: breadcrumbs,
       addedHeaderFirst: true,
-      actionButtons: [{
+      actionButtons: hasSelect ? [] : [{
         tooltip: t("Details"),
         icon: "FileEdit",
         onClick: () => {
@@ -45848,9 +47111,6 @@ const MineSummary = ({
       }],
       addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-row gap-4",
-        style: {
-          marginRight: 8
-        },
         children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
           options: [...sourceOptions],
           isAvatarGroup: true,
@@ -45866,7 +47126,10 @@ const MineSummary = ({
           dropDownWidth: 200,
           defaultSelected: (partners || []).map(p => p.id) || []
         }, partners?.length)
-      })
+      }),
+      onDownload: () => {
+        console.log("onDownload");
+      }
     }),
     children: [hasSelect && /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
@@ -45915,6 +47178,1092 @@ 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] && viewConfig?.supportedNamespaces[APP]?.includes(namespace) : viewConfig?.supportedNamespaces[APP] && viewConfig?.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);
+    };
+  }, []);
+
+  // 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 decapitalize = string => string && string.charAt(0).toLowerCase() + string.slice(1);
+const formatRedirectString = stringItem => {
+  let string;
+  if (stringItem.includes("nashiriki")) {
+    string = decapitalize(stringItem?.replaceAll("nashiriki", ""));
+  } else {
+    string = stringItem;
+  }
+  return string;
+};
+const redirect = ({
+  id,
+  item
+}) => {
+  const viewMode = "view";
+  let type = "testimonials";
+  if (item.category === "mineSite") {
+    type = "scl";
+  }
+  if (item.stakeholderType === "operator") {
+    type = "operators";
+  }
+  if (item.stakeholderType === "worker") {
+    type = "workers";
+  }
+  if (item.form) {
+    type = `${formatRedirectString(item.form)}s`;
+  }
+  let url = `/${viewMode}/${type}/${id}`;
+  return `/app${url}`;
+};
+const renderType = ({
+  item = {},
+  t = s => s
+}) => {
+  if (item.empty) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "daf-default-cell"
+    });
+  }
+  if (item.category === "mineSite") {
+    return t("Mine Site");
+  }
+  if (item.stakeholderType === "operator") {
+    return t("Operator");
+  }
+  if (item.stakeholderType === "worker") {
+    return t("Worker");
+  }
+  if (item.form) {
+    return t(capitalizeAll(item.form));
+  }
+  return "--";
+};
+const namespaceMap = {
+  locations: "location",
+  documents: "document",
+  stakeholders: "stakeholder",
+  events: "event",
+  incidents: "event",
+  correctiveActions: "event",
+  "production-sites": "location",
+  operators: "stakeholder",
+  workers: "stakeholder",
+  activities: "event"
+};
+
+const getColumns = ({
+  t,
+  redirect = () => "",
+  mod,
+  mode = "app",
+  options
+}) => [{
+  title: "ID",
+  dataIndex: "datastakeId",
+  key: "datastakeId"
+}, {
+  title: t("Type"),
+  dataIndex: "type",
+  key: "type",
+  render: (type, all) => renderType({
+    item: all,
+    t,
+    type
+  })
+}, {
+  title: t("Name"),
+  dataIndex: "name",
+  key: "name",
+  render: (name, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    if (all?.form === "products") {
+      const {
+        minerals
+      } = options;
+      const mineral = minerals.find(mineral => mineral.value === all?.typeOfProduct)?.label;
+      return mineral || "--";
+    }
+    return name || "--";
+  }
+}, {
+  title: t("Last Update"),
+  dataIndex: "updatedAt",
+  key: "updateAt",
+  render: (updatedAt, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "daf-default-cell",
+      children: renderDateFormatted(updatedAt, "DD MMM YYYY")
+    });
+  }
+}, {
+  title: "",
+  dataIndex: "actions",
+  width: 50,
+  key: "actions",
+  render: (_, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return mode === "proxy" ? /*#__PURE__*/jsxRuntime.jsx("a", {
+      onClick: () => redirect({
+        id: all.datastakeId,
+        type: all.type,
+        mod,
+        mode,
+        item: all
+      }),
+      href: "#",
+      children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+        name: "LinkNewTab",
+        width: 14,
+        height: 14,
+        color: "#6C737F"
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("a", {
+      href: redirect({
+        id: all.datastakeId,
+        type: all.type,
+        mod,
+        mode,
+        item: all
+      }),
+      target: "_blank",
+      rel: "noreferrer",
+      children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+        name: "LinkNewTab",
+        width: 14,
+        height: 14,
+        color: "#6C737F"
+      })
+    });
+  }
+}];
+
+const getNamespace = namespace => {
+  let _namespace = namespace;
+  switch (namespace) {
+    case "locations":
+      _namespace = "location";
+      break;
+    case "stakeholders":
+      _namespace = "stakeholder";
+      break;
+    case "documents":
+      _namespace = "document";
+      break;
+    case "nashirikiEvent":
+    case "events":
+      _namespace = "event";
+      break;
+  }
+  return _namespace;
+};
+class LinkedSubjectsService extends BaseService {
+  getForm({
+    namespace
+  }, language = "en", scope) {
+    return this.apiGet({
+      url: `forms/${namespace === "documents" ? namespace : getNamespace(namespace)}`,
+      isApp: true,
+      params: {
+        scope: scope || "create",
+        language
+      }
+    });
+  }
+  getWithModule({
+    query,
+    signal,
+    namespace
+  }) {
+    const _namespace = getNamespace(namespace);
+    return this.apiGet({
+      url: `/${_namespace}`,
+      isApp: true,
+      params: query,
+      signal
+    });
+  }
+  getOne({
+    id,
+    signal,
+    namespace,
+    sourceId,
+    source,
+    version
+  }) {
+    return this.apiGet({
+      url: `/${namespace === "nashirikiEvent" ? "event" : namespace}/${id}`,
+      isApp: true,
+      signal,
+      params: {
+        authorId: sourceId,
+        source,
+        version
+      }
+    });
+  }
+  getData(query, namespace) {
+    return this.apiGet({
+      url: `/${namespace}/data`,
+      isApp: true,
+      params: query
+    });
+  }
+  save(payload, namespace) {
+    if (payload.datastakeId) {
+      let _namespace = getNamespace(namespace);
+      const keysToRemove = ['associatedSubjects', 'authorId', 'channels', 'form', 'createdAt', 'meta', 'module', 'updatedAt', 'published', 'version', 'sbgi'];
+      const filteredData = removeKeysFromObject(payload, keysToRemove);
+      return this.apiPut({
+        url: `/${_namespace}/${filteredData.id}`,
+        isApp: true,
+        data: filterCreateData(filteredData)
+      });
+    }
+    return this.apiPost({
+      url: `/${getNamespace(namespace)}`,
+      isApp: true,
+      data: payload
+    });
+  }
+  remove(id, data, namespace, mod) {
+    if (mod) {
+      return this.apiDelete({
+        url: `/${namespace}/${id}`,
+        isApp: true,
+        data: data
+      });
+    }
+    return this.apiDelete({
+      url: `/${namespace}/${id}/remove`,
+      data: data
+    });
+  }
+  getLinkedSubjects({
+    namespace,
+    id
+  }) {
+    const _namespace = getNamespace(namespace);
+    return this.apiGet({
+      url: `/${namespace === "events" ? "event" : _namespace}/${id}/linkedSubjects`,
+      isApp: true
+    });
+  }
+  getOptions() {
+    return this.apiGet({
+      url: `/forms/options`,
+      isApp: true,
+      params: {
+        id: "categoryOptions,eventsType,locationCategories,countries,category,subCategory,optionPositionSupplyChain"
+      }
+    });
+  }
+}
+var LinkedSubjectsService$1 = createLazyService(LinkedSubjectsService);
+
+const emptyObject = {};
+const LinkingTemplate = ({
+  conf,
+  namespace
+}) => {
+  const view = React.useMemo(() => conf?.location?.pathname?.split(`/app/${conf.mod}/`)[1], [conf]);
+  const {
+    pagination,
+    onTableChange,
+    totalPages,
+    canGoNext,
+    canGoPrev,
+    setPagination,
+    goPrev,
+    goNext
+  } = useFilters({
+    module: conf.mod,
+    view,
+    selectFiltersConfig: emptyObject,
+    filtersConfig: emptyObject
+  });
+  const columns = React.useMemo(() => getColumns({
+    t: conf.t,
+    redirect,
+    mod: conf.mod,
+    language: conf.user?.language,
+    mode: conf.mode,
+    options: conf.options
+  }), [conf]);
+  const id = conf.allData.id;
+  const dataSource = conf?.linkingTemplateContextData?.[id];
+  const _namespace = namespaceMap[namespace];
+  const changeData = async () => {
+    try {
+      const _data = await LinkedSubjectsService$1.getLinkedSubjects({
+        namespace: _namespace,
+        id,
+        mod: conf.mod
+      });
+      const data = (_data?.data || []).map((d, i) => ({
+        ...d,
+        key: `${d.id}-${i}`
+      }));
+      conf?.addData(id, data);
+      setPagination(prev => ({
+        ...prev,
+        current: 1,
+        total: data.length ? data.length : 1
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const _dataSource = React.useMemo(() => {
+    const startIndex = pagination.pageSize * (pagination.current - 1);
+    const endIndex = Math.min(startIndex + pagination.pageSize, dataSource?.length || 0);
+    return [...(dataSource || [])].slice(startIndex, endIndex);
+  }, [pagination, dataSource]);
+  React.useEffect(() => {
+    if (!dataSource) {
+      changeData();
+    } else {
+      setPagination(prev => ({
+        ...prev,
+        current: 1,
+        total: dataSource.length ? dataSource.length : 1
+      }));
+    }
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: formatClassname(["content", "documents-layout"]),
+    style: {},
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "view-header",
+      style: {
+        flexDirection: "column",
+        paddingTop: 0
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "daf-table-wrapper pagination-no-padding",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DAFTable, {
+          className: "mt-0 p-0",
+          columns: columns,
+          hideOnLoading: false,
+          data: _dataSource,
+          doEmptyRows: true,
+          loading: !dataSource,
+          rowKey: "key",
+          pagination: pagination,
+          size: "small"
+        }), /*#__PURE__*/jsxRuntime.jsx(Pagination, {
+          t: conf?.t,
+          isMobile: conf?.isMobile,
+          page: pagination.current,
+          totalPages: totalPages,
+          goPrev: goPrev,
+          goNext: goNext,
+          canGoNext: canGoNext,
+          canGoPrev: canGoPrev,
+          totalItems: pagination.total,
+          doTotalItems: true,
+          onChangePagination: val => {
+            onTableChange({
+              ...pagination,
+              current: 1,
+              pageSize: val
+            });
+          },
+          perPage: pagination.pageSize,
+          arrowIcons: true
+        })]
+      })
+    })
+  });
+};
+
+/* eslint-disable react/prop-types */
+function Template({
+  conf,
+  namespace
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(LinkingTemplate, {
+    conf: conf,
+    namespace: namespace
+  });
+}
+
+const View = ({
+  push,
+  getRedirectLink,
+  allData,
+  ajaxForms,
+  changeAjaxForms,
+  t,
+  namespaceConfiguration,
+  params,
+  pathname,
+  search,
+  searchParams,
+  setSearchParams,
+  mode = "app",
+  APP,
+  viewConfig,
+  partners,
+  setSelectedPartners,
+  user,
+  serviceMap,
+  actionMap,
+  goBack,
+  breadcrumbs,
+  theme,
+  buttonActions,
+  generatePath,
+  getApiBaseUrl,
+  getAppHeader,
+  location,
+  isMobile,
+  linkingTemplateContextData,
+  addData,
+  options,
+  getSubjectsDetails
+  // ADD CALLBACK TO GET THE CURRENT NAMESPACE CONFIG
+}) => {
+  const getNamespaceConfig = namespace => namespaceConfiguration?.[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: namespaceConfiguration,
+    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
+  });
+  React.useEffect(() => {
+    if (namespace && id && namespaceConfig && typeof getSubjectsDetails === 'function') {
+      getSubjectsDetails({
+        namespace,
+        id,
+        namespaceConfig
+      });
+    }
+  }, [namespace, id, namespaceConfig]);
+  const action = React.useMemo(() => actionMap?.[namespaceConfig?.action], [namespaceConfig?.action, actionMap]);
+  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,
+    APP
+  });
+  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) {
+    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",
+          children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
+            options: [...sourceOptions],
+            isAvatarGroup: true,
+            selectionType: "checkbox",
+            canUnselectLast: false,
+            isSingle: true,
+            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(Template, {
+          namespace: namespace,
+          conf: {
+            mod: APP,
+            group: group,
+            form: groupForm,
+            data: data[group] ? data[group] : data || {},
+            allData: data,
+            linkingForms: linkingForms || {},
+            linkingData: data.linking || {},
+            match,
+            canEdit: isSupported && canEdit,
+            mode,
+            user: user,
+            t: t,
+            location: location,
+            isMobile: isMobile,
+            linkingTemplateContextData: linkingTemplateContextData,
+            addData: addData,
+            options: options
+          }
+        }) : /*#__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;
@@ -45932,4 +48281,5 @@ exports.SupplyChainDashboard = SupplyChain;
 exports.TablePage = TablePage;
 exports.UserDashboard = UserDashboard;
 exports.UsersTable = UsersTable;
+exports.View = View;
 exports.WorkersTable = WorkersTable;