datastake-daf 0.6.765 → 0.6.767

package/dist/pages/index.js

@@ -7934,7 +7934,12 @@ const defaultMapConfig = {
   maxZoom: 18,
   preferCanvas: true,
   zoomControl: false,
-  maxBounds: maxBounds
+  maxBounds: maxBounds,
+  zoomSnap: 0.5,
+  zoomDelta: 0.5,
+  wheelPxPerZoomLevel: 150,
+  zoomAnimation: true,
+  zoomAnimationThreshold: 10
 };
 const filterValidGPS = data => {
   const latCheck = lat => lat > -90 || lat < 90;
@@ -8809,7 +8814,7 @@ function StakeholderIcon$1({
           onClickLink(data);
         }
       }),
-      getPopupContainer: () => document.getElementById(data.datastakeId),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
         className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
@@ -8916,12 +8921,6 @@ function LocationIcon({
       }).addTo(mapRef);
       const div = document.getElementById(markerId);
       root.current = client.createRoot(div);
-      console.log({
-        locationID: data.datastakeId,
-        stakeholder,
-        index,
-        parentId: data.datastakeId
-      });
       root.current.render( /*#__PURE__*/jsxRuntime.jsx(StakeholderIcon$1, {
         data: stakeholder,
         zoom: zoom,
@@ -9018,8 +9017,7 @@ function LocationIcon({
     // 	isHovering
     // }
     ,
-
-    getPopupContainer: () => document.getElementById(i),
+    getPopupContainer: () => document.getElementById("map"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -9120,6 +9118,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -9161,6 +9160,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -9196,6 +9196,7 @@ function StakeholderIcon({
         link,
         onClickLink: () => onClickLink(marker)
       }),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(Style$c
       // onClick={toggleOpen}
       , {
@@ -9919,7 +9920,13 @@ const useMap = ({
     if (mapRef) {
       L__namespace.control.scale().addTo(mapRef);
       L__namespace.tileLayer(TILE_LAYER_URL, {
-        access_token: MAP_TOKEN
+        access_token: MAP_TOKEN,
+        keepBuffer: 4,
+        updateWhenZooming: false,
+        updateInterval: 200,
+        maxNativeZoom: 18,
+        tileSize: 256,
+        fadeAnimation: true
       }).addTo(mapRef);
     }
   }, [mapRef]);
@@ -9983,6 +9990,23 @@ const useMap = ({
       mapRef.setView([marker.coordinates[0], marker.coordinates[1]], getZoom(mapRef));
     }
   }, [activeMarker, mapRef]);
+  React.useEffect(() => {
+    if (mapRef && type === "chain") {
+      const handleMapClick = e => {
+        const clickedElement = e.originalEvent.target;
+        const isMarkerClick = clickedElement.closest('.marker-chain') || clickedElement.closest('.leaflet-marker-icon');
+        if (!isMarkerClick && selectedMarkersId.length > 0) {
+          setSelectedMarkersId([]);
+          openPopupIdRef.current = null;
+          setMarkerWithPopup(null);
+        }
+      };
+      mapRef.on('click', handleMapClick);
+      return () => {
+        mapRef.off('click', handleMapClick);
+      };
+    }
+  }, [mapRef, type, selectedMarkersId]);
   return {
     container,
     activeMarker,
@@ -10475,6 +10499,7 @@ function SupplyChainMap({
   } = useWidgetFetch({
     config: defaultConfig
   });
+  console.log('data', data);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Supply Chain Map"),
     loading: loading,
@@ -10484,22 +10509,25 @@ function SupplyChainMap({
       data: Array.isArray(data) && data.length > 0 ? data : [],
       renderTooltip: data => {
         const productsText = data?.products?.[0];
-        const minerals = options?.minerals || [];
+        const minerals = options?.mineralOptions || [];
+        const participants = data?.stakeholders?.map(stakeholder => stakeholder.name);
         return [{
           label: t("Products"),
-          value: minerals.find(mineral => mineral.value === productsText)?.label || productsText || "-",
+          value: findOptions(productsText, minerals) || productsText || "-",
           ...(productsText && {
             tag: getTagColor(productsText)
           })
         }, {
           label: t("Participants"),
-          value: data?.participants || "-"
+          value: participants?.length > 0 ? participants.join(', ') : "-"
         }];
       },
       link: true,
       onClickLink: data => {
-        const locationTypes = ['mineSite', 'village'];
-        if (locationTypes.includes(data.type)) {
+        const locationTypes = ['village', 'town', 'area', 'territory'];
+        if (data?.type === 'mineSite') {
+          goTo(getRedirectLink(`/app/mine-summary/${data.datastakeId}`));
+        } else if (locationTypes.includes(data.type)) {
           goTo(getRedirectLink(`/app/view/locations/${data.datastakeId}`));
         } else {
           goTo(getRedirectLink(`/app/view/stakeholders/${data.datastakeId}`));
@@ -11626,7 +11654,6 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   withDuration = true,
   onFilterChange,
   isPdf,
-  zoomOutTransition = false,
   ...props
 }, ref) {
   const {
@@ -11643,17 +11670,23 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
     }
     return result;
   }, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
+
+  // In BaseGraph.jsx, replace the useEffect with:
   React.useEffect(() => {
     if (nodesToFit.length === 0) return;
-    requestAnimationFrame(() => {
+
+    // Use setTimeout instead of requestAnimationFrame to ensure nodes are rendered
+    const timer = setTimeout(() => {
       fitView({
         padding: 0.4,
         nodes: [...nodesToFit],
-        duration: withDuration ? 300 : undefined,
-        maxZoom: 0.8
+        // duration: withDuration ? 300 : undefined,
+        maxZoom: 0.9
       });
-    });
-  }, [JSON.stringify(nodesToFit), withDuration]);
+    }, 100); // Small delay to ensure nodes are rendered
+
+    return () => clearTimeout(timer);
+  }, [nodesToFit.length, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
@@ -11684,9 +11717,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
         fitViewOptions: {
           padding: 0.2,
           //zoom out on default
-          ...(zoomOutTransition ? {
-            duration: withDuration ? 300 : undefined
-          } : {})
+          duration: withDuration ? 300 : undefined
         },
         ...props,
         children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
@@ -12300,11 +12331,13 @@ function useIdentification({
           const values = graphData.filter(d => d.date === title);
           return {
             title: "Products",
-            items: values.map(val => ({
-              label: options?.minerals?.find(mineral => mineral.value === val.typeOfProduct)?.label || val.typeOfProduct,
-              color: colors[allSeenProducts.indexOf(val.typeOfProduct) % colors.length],
-              value: val.value.toLocaleString()
-            }))
+            items: values.map(val => {
+              return {
+                label: findOptions(val.typeOfProduct, options?.mineralOptions) || val.typeOfProduct,
+                color: colors[allSeenProducts.indexOf(val.typeOfProduct) % colors.length],
+                value: val.value.toLocaleString()
+              };
+            })
           };
         }
         return {
@@ -13594,7 +13627,7 @@ function MineSites({
     if (activeTab === "stakeholder") {
       return [{
         label: t("Category"),
-        value: findOptions(data?.category, locationCategories ?? []) || "--"
+        value: findOptions(data?.category, options?.categoriesOptions ?? []) || "--"
       }];
     }
     if (activeTab === "event") {
@@ -14079,6 +14112,7 @@ function BarChart({
   isPdf = false,
   legendConfig = {},
   width,
+  xAxisConfig = {},
   ...rest
 }) {
   const containerRef = React__default["default"].useRef(null);
@@ -14111,8 +14145,10 @@ function BarChart({
             return Array.from(new Array(11), (v, i) => i * 10);
           }
         } : {}),
+        ...xAxisConfig,
         label: {
-          formatter: isPercentage ? v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`) + " %" : formattedXAxis
+          formatter: isPercentage ? v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`) + " %" : formattedXAxis,
+          ...xAxisConfig?.label
         }
       },
       yAxis: {
@@ -14138,7 +14174,7 @@ function BarChart({
     } else {
       chartRef.current.update(config);
     }
-  }, [data, xFieldKey, yFieldKey, renderTooltipContent, tooltipConfig, animated, isStack, isGroup, isPercentage, seriesField, formattedYAxis, formattedXAxis, color, token.colorPrimary7]);
+  }, [data, xFieldKey, yFieldKey, renderTooltipContent, tooltipConfig, animated, isStack, isGroup, isPercentage, seriesField, formattedYAxis, formattedXAxis, color, token.colorPrimary7, xAxisConfig]);
   React__default["default"].useEffect(() => {
     return () => {
       if (chartRef.current) {
@@ -14172,55 +14208,7 @@ const mapData = ({
   tabSelected
 }) => {
   if (!data.length) {
-    return [{
-      category: "",
-      type: t("Stakeholders"),
-      value: 0.5
-    }, {
-      category: "",
-      type: t("Locations"),
-      value: 0.5
-    }, {
-      category: "",
-      type: t("Events"),
-      value: 0.5
-    }, {
-      category: " ",
-      type: "Stakeholders",
-      value: 0.5
-    }, {
-      category: " ",
-      type: "Locations",
-      value: 0.5
-    }, {
-      category: " ",
-      type: t("Events"),
-      value: 0.5
-    }, {
-      category: "  ",
-      type: t("Stakeholders"),
-      value: 0.5
-    }, {
-      category: "  ",
-      type: t("Locations"),
-      value: 0.5
-    }, {
-      category: "  ",
-      type: t("Events"),
-      value: 0.5
-    }, {
-      category: "   ",
-      type: t("Stakeholders"),
-      value: 0.5
-    }, {
-      category: "   ",
-      type: t("Locations"),
-      value: 0.5
-    }, {
-      category: "   ",
-      type: t("Events"),
-      value: 0.5
-    }];
+    return [];
   }
   const metricTypes = {
     stakeholders: tabSelected === "dataPoints" ? t("Stakeholders Data") : t("Stakeholders"),
@@ -14286,15 +14274,22 @@ const useContributionsGraph = ({
       tabSelected
     });
   }, [data, t]);
+  const isEmpty = React.useMemo(() => _data?.length === 0, [_data]);
   const chartConfig = React.useMemo(() => {
     return {
       data: _data,
-      xField: "value",
-      yField: "category",
+      xFieldKey: "value",
+      yFieldKey: "category",
       seriesField: "type",
       isGroup: true,
+      ...(isEmpty && {
+        xAxisConfig: {
+          min: 0,
+          max: 10,
+          tickCount: 5
+        }
+      }),
       renderTooltipContent: (title, items) => {
-        const isEmpty = !data.length;
         const tooltipItems = items.map(item => ({
           label: item.name,
           color: item.color,
@@ -14308,7 +14303,7 @@ const useContributionsGraph = ({
       },
       color: [theme.colorPrimary7, theme.colorPrimary4, theme.colorPrimary9]
     };
-  }, [_data, t, theme]);
+  }, [_data, t, theme, isEmpty]);
   return chartConfig;
 };
 
@@ -14422,7 +14417,7 @@ const useTriangulation = ({
     const _config = config.find(c => c.key === item.key);
     if (_config) {
       return renderTooltipJsx({
-        title: t(section === "data-compilation" ? "nashiriki::Information Sharing" : "Triangulation"),
+        title: t(section === "data-compilation" ? "Information Sharing" : "Triangulation"),
         items: [{
           // color: _config.color,
           label: t(_config.label[section]),
@@ -16133,6 +16128,42 @@ MoreMenu.propTypes = {
   trigger: PropTypes__default["default"].oneOf(["click", "hover", "contextMenu"])
 };
 
+const renderStatusTag = ({
+  value,
+  t = s => s
+}) => {
+  const width = 87;
+  switch (value) {
+    case "edited":
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+        color: "yellow",
+        style: {
+          width
+        },
+        className: "text-center",
+        children: t("Edited")
+      });
+    case "submitted":
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+        color: "green",
+        style: {
+          width
+        },
+        className: "text-center",
+        children: t("Submitted")
+      });
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+        color: "blue",
+        style: {
+          width
+        },
+        className: "text-center",
+        children: t("Private")
+      });
+  }
+};
+
 const getColumns$a = ({
   t,
   goTo,
@@ -16289,11 +16320,11 @@ const getColumns$a = ({
         className: "daf-default-cell"
       });
     }
-    const status = findOptions(v, data?.options?.statusOptions);
-    return status ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: status,
-      children: status
-    }) : '-';
+    const _val = all?.published || all?.status === "submitted" ? "submitted" : v;
+    return renderStatusTag({
+      value: _val,
+      t
+    });
   }
 }, {
   id: 'actions',
@@ -31157,7 +31188,10 @@ function MoreTags({
   values = [],
   maxWidthCont = 120,
   maxTextCont = 100,
-  diff = 30
+  diff = 30,
+  style = {},
+  tagColor,
+  limit
 }) {
   const ref = React.useRef();
   const [width, setWidth] = React.useState(0);
@@ -31172,6 +31206,11 @@ function MoreTags({
     return () => resizeObserver.disconnect();
   }, []);
   const _calculate = () => {
+    // If limit prop is provided and valid, use it instead of calculating
+    if (typeof limit === 'number' && limit > 0) {
+      setIndexToReturn(Math.min(limit - 1, values.length - 1));
+      return;
+    }
     const tabs = ref.current.querySelectorAll(".check-tabs");
     let filled = 0;
     let indexToReturn;
@@ -31198,7 +31237,7 @@ function MoreTags({
   const other = hasMore ? values.slice(indexToReturn + 1, values.length + 1) : [];
   React.useEffect(() => {
     _calculate();
-  }, [width, values]);
+  }, [width, values, limit]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "daf-more-tags",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -31208,9 +31247,10 @@ function MoreTags({
           maxWidth: _maxWidthCont,
           overflow: "hidden",
           textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
+          whiteSpace: "nowrap",
+          ...style
         },
-        color: ac.color,
+        color: tagColor || ac.color,
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
           title: typeof ac === "object" ? ac.label : ac,
           children: /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -31218,7 +31258,8 @@ function MoreTags({
               maxWidth: _maxWidthTxt,
               overflow: "hidden",
               textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              ...style
             },
             children: typeof ac === "object" ? ac.label : ac
           })
@@ -31226,6 +31267,8 @@ function MoreTags({
       }, `${typeof ac === "object" ? ac.value : ac}-${i}`)), other.length ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
         title: other.map(ac => typeof ac === "object" ? ac.label : ac).join(", "),
         children: /*#__PURE__*/jsxRuntime.jsxs(antd.Tag, {
+          color: tagColor || 'default',
+          style: style,
           children: ["+", other.length]
         })
       }) : null]
@@ -31233,10 +31276,11 @@ function MoreTags({
       className: "list hidden",
       ref: ref,
       children: values.map((ac, i) => typeof ac.renderTag === "function" ? ac.renderTag("check-tabs") : /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-        color: ac.color,
+        color: tagColor || ac.color,
         className: "check-tabs",
         style: {
-          maxWidth: _maxWidthCont
+          maxWidth: _maxWidthCont,
+          ...style
         },
         children: /*#__PURE__*/jsxRuntime.jsx(Text, {
           ellipsis: {
@@ -31255,43 +31299,8 @@ MoreTags.propTypes = {
   values: PropTypes__default["default"].array,
   maxWidthCont: PropTypes__default["default"].number,
   maxTextCont: PropTypes__default["default"].number,
-  diff: PropTypes__default["default"].number
-};
-
-const renderStatusTag = ({
-  value,
-  t = s => s
-}) => {
-  const width = 87;
-  switch (value) {
-    case "edited":
-      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-        color: "yellow",
-        style: {
-          width
-        },
-        className: "text-center",
-        children: t("Edited")
-      });
-    case "submitted":
-      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-        color: "green",
-        style: {
-          width
-        },
-        className: "text-center",
-        children: t("Submitted")
-      });
-    default:
-      return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-        color: "blue",
-        style: {
-          width
-        },
-        className: "text-center",
-        children: t("Private")
-      });
-  }
+  diff: PropTypes__default["default"].number,
+  limit: PropTypes__default["default"].number
 };
 
 const getColumns$7 = ({
@@ -31910,7 +31919,7 @@ const EventsTable = ({
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(TablePageWithTabs, {
     t: t,
-    title: t("events"),
+    title: t("Events"),
     breadCrumbs: breadcrumbs,
     location: location,
     loading: loading,
@@ -32940,11 +32949,11 @@ const WorkersTable = ({
   });
 };
 
-const getEventCategoryBySubject = (eventCategoryObject, subject) => {
+const getEventCategoryBySubject = (eventCategoryObject, subject, isSingular = false) => {
   if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
     return null;
   }
-  const subjectSingular = subject.endsWith('ies') ? subject.slice(0, -3) + 'y' : subject.endsWith('s') ? subject.slice(0, -1) : subject;
+  const subjectSingular = isSingular ? subject : subject.endsWith('ies') ? subject.slice(0, -3) + 'y' : subject.endsWith('s') ? subject.slice(0, -1) : subject;
   const key = `typeOfEvent is ${subjectSingular}`;
   return eventCategoryObject[key] || null;
 };
@@ -33074,16 +33083,7 @@ const getColumns$4 = ({
       });
     }
     const eventCategory = findOptions(v, data?.options?.eventCategoryOptions);
-    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
-    console.log({
-      categoryValue
-    });
-    console.log({
-      eventCategory
-    });
-    console.log({
-      subject
-    });
+    const categoryValue = getEventCategoryBySubject(eventCategory, "correctiveActions", true);
     return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: categoryValue,
       children: categoryValue
@@ -34397,10 +34397,10 @@ const getColumns$2 = ({
         className: "daf-default-cell"
       });
     }
-    const operators = all?.operatorOfLocation?.map(operator => operator?.clientLocation?.name);
+    const operators = all?.operator?.map(operator => operator?.locationClient?.name)?.filter(Boolean);
     return operators && operators.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(MoreOptions, {
       data: operators || [],
-      tooltipPlacement: "topLeft"
+      toolTipPlacement: operators?.length < 2 ? "topLeft" : "top"
     }) : '-';
   }
 }, {
@@ -34432,11 +34432,11 @@ const getColumns$2 = ({
         className: "daf-default-cell"
       });
     }
-    const status = findOptions(v, data?.options?.statusOptions);
-    return status ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: status,
-      children: status
-    }) : '-';
+    const _val = all?.published || all?.status === "submitted" ? "submitted" : v;
+    return renderStatusTag({
+      value: _val,
+      t
+    });
   }
 }, {
   title: t("Sources"),
@@ -36844,6 +36844,9 @@ const useSummary = ({
   hasTooltip: PropTypes__default["default"].bool
 });
 
+const getAllProducts = arr => {
+  return arr.flatMap(item => (item.products || []).map(product => product.typeOfProduct));
+};
 const getKeyIndicatorConfig = ({
   t,
   data = {},
@@ -36872,7 +36875,7 @@ const getKeyIndicatorConfig = ({
 }, {
   label: t("Supply Chain Position"),
   render: () => {
-    const position = findOptions(data?.positionSupplyChain, options?.positionSupplyChainOptions);
+    const position = findOptions(data?.positionSupplyChain, options?.positionSupplyChainOptions || options?.optionPositionSupplyChain);
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       children: position || "-"
     });
@@ -36880,7 +36883,7 @@ const getKeyIndicatorConfig = ({
 }, {
   label: t("Legal Form"),
   render: () => {
-    const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions);
+    const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions || options?.subCategory);
     if (subCategory?.length > 22) {
       const _subCategory = truncateString(subCategory, 22);
       return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
@@ -36901,45 +36904,49 @@ const getKeyIndicatorConfig = ({
 }, {
   label: t("Products"),
   render: () => {
-    if ((data?.products || []).length === 0) {
-      return "-";
-    }
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        display: "flex",
-        flexWrap: "wrap"
-      },
-      children: data?.products?.map(product => {
-        return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
-          color: "processing",
+    const clientProducts = getAllProducts(data?.clients || []);
+    const supplierProducts = getAllProducts(data?.suppliers || []);
+    const locationProducts = getAllProducts(data?.locationSuppliers || []);
+    const allProducts = [...clientProducts, ...supplierProducts, ...locationProducts];
+    const uniqueProducts = [...new Set(allProducts)];
+    const products = findOptions(uniqueProducts, options?.mineralOptions || options?.minerals);
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: products.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(MoreTags, {
+          values: products,
+          limit: 3,
+          tagColor: "processing",
           style: {
-            color: "#1677FF",
-            marginBottom: 8
-          },
-          children: t(product)
-        }, product);
-      })
+            fontWeight: "normal",
+            fontSize: 14
+          }
+        })
+      }) : "-"
     });
   }
 }, {
   label: t("Associated Mine Sites"),
   render: () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: data?.associatedMineSites || 0
+      children: data?.locationSuppliers?.length || 0
     });
   }
 }, {
   label: t("Identified Suppliers"),
   render: () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: data?.identifiedSuppliers || 0
+      children: data?.suppliers?.length || 0
     });
   }
 }, {
   label: t("Identified Customers"),
   render: () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: data?.identifiedCustomers || 0
+      children: data?.clients?.length || 0
     });
   }
 }];
@@ -37240,7 +37247,8 @@ const InformationAvailability = ({
   t = () => {},
   id,
   subject,
-  partners
+  partners,
+  APP
 }) => {
   const defaultFetchConfig = React.useMemo(() => ({
     basepath: subject === "stakeholder" ? "stakeholder" : "location",
@@ -37249,10 +37257,10 @@ const InformationAvailability = ({
     stop: !id || selectedPartners?.loading,
     filters: {
       // datastakeId: id,
-      scope: subject === "stakeholder" ? "operatorInfo" : "locationInfo",
+      scope: subject === "stakeholder" ? APP === "nashiriki" ? "operator" : "operatorInfo" : APP === "nashiriki" ? "nashiriki" : "locationInfo",
       sources: selectedPartners?.partners || []
     }
-  }), [id, selectedPartners]);
+  }), [id, selectedPartners, APP]);
   const {
     data,
     loading
@@ -37383,12 +37391,13 @@ const getFilterConfig = ({
   operatorData = {},
   options = {},
   filters = {},
-  t = () => {}
+  t = () => {},
+  APP
 }) => {
   const productSet = new Set();
   const allTradeMineralOptions = [...(operatorData?.suppliers || []), ...(operatorData?.clients || []), ...(operatorData?.locationSuppliers || [])].flatMap(trade => (trade?.products || []).filter(product => !!product?.typeOfProduct && !productSet.has(product.typeOfProduct)).map(product => {
     productSet.add(product.typeOfProduct);
-    const label = options?.minerals?.find(mineral => mineral.value === product.typeOfProduct)?.label;
+    const label = options?.[APP !== 'nashiriki' ? 'mineralOptions' : 'minerals']?.find(mineral => mineral.value === product.typeOfProduct)?.label;
     return {
       value: product.typeOfProduct,
       label: label ?? product.typeOfProduct
@@ -37419,30 +37428,31 @@ const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {
     return mapChildren([location], location.connect, "left");
   }).flat().filter(d => !!d);
 };
-const mapItem = (data, options, goTo, getRedirectLink) => {
+const mapItem = (data, options, goTo, getRedirectLink, operatorData = {}, APP) => {
   const {
     positionSupplyChainOptions,
-    locationCategories
+    locationCategories,
+    optionPositionSupplyChain
   } = options || {};
   return {
-    id: data.datastakeId || "-",
-    datastakeId: data.datastakeId || "-",
+    id: data.datastakeId || operatorData?.id || "-",
+    datastakeId: data.datastakeId || operatorData?.datastakeId || "-",
     leftIcon: leftIcons[data.type === "mineSite" ? "location" : "stakeholder"],
-    name: data.name || "-",
-    subTitle: findOptions(data.type, [...(positionSupplyChainOptions || []), ...(locationCategories || [])]),
+    name: data.name || operatorData?.name || "-",
+    subTitle: findOptions(data.type || operatorData?.positionSupplyChain, [...(positionSupplyChainOptions || optionPositionSupplyChain || []), ...(locationCategories || [])]),
     leftBackground: data.type === "mineSite" ? leftBackgroundColorLocation : leftBackgroundColorStakeholder,
     topIcon: topIcons[data.type],
     country: {
-      label: findOptions(data.country, options?.countries || []),
-      value: data.country
+      label: findOptions(data.country || operatorData?.country, options?.countries || []),
+      value: data.country || operatorData?.country
     },
     totalSources: data.sources ?? 0,
     volume: data?.volume || "",
     onClick: function () {
       if (data.type === "mineSite") {
-        return goTo(getRedirectLink(`/app/summary/scl/${data.datastakeId}`));
+        return goTo(getRedirectLink(`/app/${APP === 'nashiriki' ? 'summary/scl' : 'mine-summary'}/${data.datastakeId}`));
       }
-      return goTo(getRedirectLink(`/app/summary/operators/${data.datastakeId}`));
+      return goTo(getRedirectLink(`/app/${APP === 'nashiriki' ? 'summary/operators' : 'operator-summary'}/${data.datastakeId}`));
     }
   };
 };
@@ -37453,26 +37463,30 @@ const useTradeRelationship = ({
   options,
   goTo,
   getRedirectLink,
-  filters
+  filters,
+  operatorData,
+  APP
 }) => {
   const [graphData, setGraphData] = React.useState({});
   const [loading, setLoading] = React.useState(false);
   const [fetchedProducts, setFetchedProducts] = React.useState(false);
   const config = React.useMemo(() => ({
     basepath: "analytics",
-    url: "/widgets/trade-connection-map",
+    url: `/widgets/trade-relationship-map`,
     filters: {
+      datastakeId: id,
       product: filters?.products,
       sources: selectedPartners?.partners || []
-    }
-  }), [id, filters?.products, selectedPartners?.partners]);
+    },
+    stop: !selectedPartners?.partners?.length || selectedPartners?.loading
+  }), [id, filters?.products, selectedPartners?.partners, selectedPartners?.loading]);
   const {
     data
   } = useWidgetFetch({
     config: config
   });
   const mapItem$1 = data => {
-    return mapItem(data, options, goTo, getRedirectLink);
+    return mapItem(data, options, goTo, getRedirectLink, operatorData, APP);
   };
   React.useEffect(() => {
     if (id && selectedPartners?.partners?.length > 0 && fetchedProducts) {
@@ -37545,9 +37559,6 @@ const useTradeRelationship = ({
             right: mapChildren(data.clients, data.datastakeId, "right")?.filter(d => !!d),
             left: getLeft(data, mapChildren, supplierLocations)
           };
-          console.log({
-            graphData
-          });
           setGraphData(graphData);
         } catch (err) {
           setGraphData({});
@@ -37557,7 +37568,7 @@ const useTradeRelationship = ({
       };
       _fetch();
     }
-  }, [filters?.products, id, selectedPartners, fetchedProducts]);
+  }, [filters?.products, id, selectedPartners, fetchedProducts, operatorData, options, goTo, getRedirectLink, data]);
   return {
     graphData,
     loading,
@@ -37580,7 +37591,8 @@ function TradeRelationship({
   filtersConfig,
   onFilterChange = () => {},
   renderTooltipItems = () => [],
-  getTotal = () => 0
+  getTotal = () => 0,
+  onRenderComplete = () => {}
 }) {
   const reactFlowWrapper = React.useRef(null);
   const [nodes, setNodes] = react.useNodesState([]);
@@ -37593,6 +37605,23 @@ function TradeRelationship({
   const [activeNode, setActiveNode] = React.useState(null);
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = React.useState(null);
+  const isFullyRenderedRef = React.useRef(false);
+  const [isFullyRendered, setIsFullyRendered] = React.useState(false);
+  React.useEffect(() => {
+    isFullyRenderedRef.current = false;
+    setIsFullyRendered(false);
+    setActiveNode(null);
+  }, [data]);
+  React.useEffect(() => {
+    if (nodes.length > 0 && edges.length > 0 && !isFullyRenderedRef.current) {
+      const timeoutId = setTimeout(() => {
+        isFullyRenderedRef.current = true;
+        setIsFullyRendered(true);
+        onRenderComplete(true);
+      }, 200);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [nodes.length, edges.length, associatedNodes]);
   React.useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -37632,7 +37661,7 @@ function TradeRelationship({
       return;
     }
     const _nodes = [{
-      id: data.id,
+      id: data.id?.toString(),
       type: "expandedNode",
       position: {
         x: xInit,
@@ -37644,10 +37673,10 @@ function TradeRelationship({
     if (isBilateral) {
       (data.sources || []).forEach(source => {
         const hasPrev = false;
-        _edges.push({
+        const edge = {
           id: `e-${data.id}-${source}`,
-          source: source,
-          type: "default",
+          source: source?.toString(),
+          type: "defaultEdge",
           target: data?.id?.toString(),
           sourceHandle: "left",
           targetHandle: "right",
@@ -37661,7 +37690,8 @@ function TradeRelationship({
             tooltipTitle,
             moreLeft: false
           }
-        });
+        };
+        _edges.push(edge);
       });
     }
     const mapChildren = ({
@@ -37702,7 +37732,7 @@ function TradeRelationship({
         (ch.sources || []).forEach(source => {
           const hasPrev = _prevNodes.find(p => p.id === source);
           const isCustom = !hasPrev ? true : prevChildren.includes(source) ? false : true;
-          _edges.push({
+          const edge = {
             id: `e-${ch.id}-${source}`,
             source: hasPrev ? source : ch?.id?.toString(),
             type: isCustom ? "verticalPath" : "defaultEdge",
@@ -37720,7 +37750,8 @@ function TradeRelationship({
               tooltipTitle,
               moreLeft: prevChildren.length > children.length
             }
-          });
+          };
+          _edges.push(edge);
           if (isCustom) {
             customIndex += 1;
           }
@@ -37759,11 +37790,24 @@ function TradeRelationship({
       prevChildren: !isBilateral ? [data.id] : [],
       maxHeight: 0
     });
+
+    // Check for potential ID mismatches
+    const nodeIds = _nodes.map(n => n.id);
+    _edges.filter(e => {
+      const sourceExists = nodeIds.includes(e.source);
+      const targetExists = nodeIds.includes(e.target);
+      return !sourceExists || !targetExists;
+    });
+
+    // Set nodes first
     setNodes(_nodes);
-    setEdges(_edges);
-  }, [data, activeNode]);
+    const timeoutId = setTimeout(() => {
+      setEdges(_edges);
+    }, 100); // 100ms is imperceptible to users but ensures React Flow is ready
 
-  // Used to find associated nodes, when a node is selected
+    // Cleanup to prevent memory leaks if component unmounts quickly
+    return () => clearTimeout(timeoutId);
+  }, [data, activeNode]);
   React.useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -37829,7 +37873,7 @@ function TradeRelationship({
       });
     },
     ref: reactFlowWrapper
-  });
+  }, JSON.stringify(nodes) + JSON.stringify(edges));
 }
 var TradeRelationship$1 = withProvider(TradeRelationship);
 
@@ -37840,9 +37884,11 @@ const TradeRelationships = ({
   selectedPartners = {},
   id,
   options = {},
-  getRedirectLink = () => {}
+  getRedirectLink = () => {},
+  APP
 }) => {
   const [filters, setFilters] = React.useState({});
+  const [isFullyRendered, setIsFullyRendered] = React.useState(true);
   const onFilterChange = filters => {
     setFilters(p => ({
       ...p,
@@ -37854,9 +37900,10 @@ const TradeRelationships = ({
       operatorData,
       options,
       filters,
-      t
+      t,
+      APP
     });
-  }, [filters.products, t, options?.minerals, operatorData]);
+  }, [filters.products, t, options?.mineralOptions, operatorData, options?.mineral, APP]);
   const {
     graphData,
     loading,
@@ -37868,7 +37915,9 @@ const TradeRelationships = ({
     options,
     goTo,
     getRedirectLink,
-    filters
+    filters,
+    operatorData,
+    APP
   });
   React.useEffect(() => {
     const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
@@ -37888,7 +37937,7 @@ const TradeRelationships = ({
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Trade Relationships"),
     className: "flex flex-1 with-border-header no-p-body",
-    loading: loading,
+    loading: loading || isFullyRendered,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-1 flex-column justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -37911,7 +37960,10 @@ const TradeRelationships = ({
           minZoom: 0.4,
           tooltipTitle: "Trade",
           filtersConfig: filterConfig,
-          onFilterChange: onFilterChange
+          onFilterChange: onFilterChange,
+          onRenderComplete: data => {
+            setIsFullyRendered(!data);
+          }
         })
       })
     })
@@ -38142,8 +38194,7 @@ function StakeholderMappings({
   iconOffsetY = 250,
   t = s => s,
   emptyString = undefined,
-  isPdf = false,
-  zoomOutTransition = false
+  isPdf = false
 }) {
   const reactFlowWrapper = React.useRef(null);
   const [nodes, setNodes] = react.useNodesState([]);
@@ -38404,7 +38455,6 @@ function StakeholderMappings({
     });
   }, [reactFlowWrapper.current, JSON.stringify(data), JSON.stringify(selectedIconNodes), isAllOpenDefault, isSelectable, isChanged, emptyString]);
   return /*#__PURE__*/jsxRuntime.jsx(BaseGraph, {
-    zoomOutTransition: zoomOutTransition,
     nodes: nodes,
     mandatoryNodesToFit: mandatoryNodesToFit,
     edges: edges,
@@ -38511,7 +38561,8 @@ const OperatorSummary = ({
   getRedirectLink = () => {},
   goBack = () => {},
   onIdChange = () => {},
-  breadcrumbs = []
+  breadcrumbs = [],
+  APP
 }) => {
   const {
     selectedItem,
@@ -38617,7 +38668,8 @@ const OperatorSummary = ({
         t: t,
         id: params?.id || selectedItem,
         subject: "stakeholder",
-        partners: partners
+        partners: partners,
+        APP: APP
       })
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(TradeRelationships, {
@@ -38627,7 +38679,8 @@ const OperatorSummary = ({
         options: options,
         goTo: goTo,
         getRedirectLink: getRedirectLink,
-        operatorData: singleItemData
+        operatorData: singleItemData,
+        APP: APP
       })
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(Governance, {
@@ -43112,10 +43165,10 @@ const IconNodesConfig = {
     emptyName: "no-traders"
   },
   government: {
-    name: "Government",
+    name: "Governance",
     icon: "KYC",
     order: 3,
-    emptyName: "no-government"
+    emptyName: "no-governance"
   },
   other: {
     name: "Other",
@@ -43133,18 +43186,19 @@ const getStakeholderMappingData = ({
   t,
   goTo,
   selectedPartners,
-  mainSubject
+  mainSubject,
+  APP
 }) => {
   const _data = data;
   const mainSubjectData = _data?.[mainSubject];
   return {
-    id: mainSubjectData?.datastakeId || "",
-    name: mainSubjectData?.name || "",
+    id: mainSubjectData?.datastakeId || locationData?.datastakeId || "",
+    name: mainSubjectData?.name || locationData?.name || "",
     country: {
-      label: findOptions(mainSubjectData?.country, options?.countries) || "",
-      value: (mainSubjectData?.country || "").toLowerCase() || ""
+      label: findOptions(mainSubjectData?.country || locationData?.country, options?.countries) || "",
+      value: (mainSubjectData?.country || locationData?.country || "").toLowerCase() || ""
     },
-    onClick: () => goTo(`/app/view/production-sites/${mainSubjectData?.datastakeId}`),
+    onClick: () => goTo(`/app/view/${APP === 'nashiriki' ? 'scl' : 'production-sites'}/${mainSubjectData?.datastakeId || locationData?.datastakeId}`),
     totalSources: selectedPartners?.partners?.length || 0,
     backgroundColor: "#FFD6E7",
     iconColor: "#C41D7F",
@@ -43171,7 +43225,7 @@ const getStakeholderMappingData = ({
             icon: "DashboardStakeholder",
             onClick: () => {
               if (child?.type === "operator") {
-                goTo(`/app/summary/operators/${child.datastakeId}`);
+                goTo(`/app/${APP === 'nashiriki' ? 'summary/operators' : 'operator-summary'}/${child.datastakeId}`);
                 return;
               }
               goTo(`/app/view/stakeholders/${child.datastakeId}`);
@@ -43193,7 +43247,8 @@ const StakeholderMapping = ({
   options = {},
   goTo = () => {},
   selectedPartners = {},
-  locationData = {}
+  locationData = {},
+  APP
 }) => {
   const defaultFilter = React.useMemo(() => {
     return {
@@ -43207,7 +43262,7 @@ const StakeholderMapping = ({
         coreSubject: "location",
         filterBySources: false,
         metrics: {
-          operator: ['operator', 'operator.clientLocation'],
+          operator: ['operator.locationClient'],
           government: ['custom.stakeholderId', 'governance'],
           trader: ['trade'],
           other: ['civilSociety', 'international']
@@ -43230,7 +43285,8 @@ const StakeholderMapping = ({
       t,
       goTo,
       selectedPartners,
-      mainSubject: "mine"
+      mainSubject: "mine",
+      APP
     });
   }, [data, locationData, id, options, t, goTo, selectedPartners]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
@@ -43448,7 +43504,8 @@ const MineSummary = ({
   getRedirectLink = () => {},
   goBack = () => {},
   onIdChange = () => {},
-  breadcrumbs = []
+  breadcrumbs = [],
+  APP
 }) => {
   const {
     selectedItem,
@@ -43493,7 +43550,7 @@ const MineSummary = ({
         tooltip: t("Details"),
         icon: "FileEdit",
         onClick: () => {
-          goTo(getRedirectLink(`/app/view/production-sites/${params?.id ? params?.id : selectedItem}`));
+          goTo(getRedirectLink(`/app/view/${APP === 'nashiriki' ? 'scl' : 'production-sites'}/${params?.id ? params?.id : selectedItem}`));
         }
       }, {
         tooltip: t("Find Data"),
@@ -43554,7 +43611,8 @@ const MineSummary = ({
         selectedPartners: selectedPartners,
         t: t,
         id: params?.id || selectedItem,
-        partners: partners
+        partners: partners,
+        APP: APP
       })
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMapping, {