datastake-daf 0.6.746 → 0.6.747

package/dist/pages/index.js

@@ -5841,7 +5841,7 @@ const useHeader = ({
 };
 
 const {
-  useToken: useToken$7
+  useToken: useToken$8
 } = antd.theme;
 function BreadCrumbs({
   breadcrumbs = [],
@@ -5850,7 +5850,7 @@ function BreadCrumbs({
   const [splitIndex, setSplitIndex] = React.useState(0);
   const {
     token
-  } = useToken$7();
+  } = useToken$8();
   const _renderBreadcrumb = (b, i, isLast, noOnClickLast = false) => {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex breadcrumb-item",
@@ -6004,7 +6004,7 @@ DAFHeader.propTypes = {
 };
 
 const {
-  useToken: useToken$6
+  useToken: useToken$7
 } = antd.theme;
 
 /**
@@ -6097,7 +6097,7 @@ function Multiselect({
 }) {
   const {
     token
-  } = useToken$6();
+  } = useToken$7();
   const [selectValue, setSelectValue] = React.useState(Array.isArray(defaultSelected) ? defaultSelected.length > 0 ? defaultSelected : [] : [defaultSelected]);
   function onSelectChange(value) {
     if (!canUnselectLast && value.length === 0) {
@@ -10525,6 +10525,9 @@ PrimaryNode.propTypes = {
   })
 };
 
+// import { ICON_NODES } from "../../config.js";
+const ICON_NODE_WIDTH = 40;
+const ICON_NODE_HEIGHT = 40;
 function IconNode({
   id,
   data
@@ -10642,14 +10645,14 @@ const Style$6 = styled__default["default"].div`
 // components/Nodes/NameNode.jsx
 const NAME_CARD_WIDTH = 315;
 const {
-  useToken: useToken$5
+  useToken: useToken$6
 } = antd.theme;
 function NameNode({
   data
 }) {
   const {
     token
-  } = useToken$5();
+  } = useToken$6();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
   const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -10873,6 +10876,9 @@ const Style$4 = styled__default["default"].div`
 		}
 	}
 `;
+const EXPANDED_NODE_WIDTH = 535;
+const EXPANDED_NODE_HEIGHT = 120;
+const EXPANDED_NODE_ACTIVE_HEIGHT = 50;
 function ExpandedNode({
   data
 }) {
@@ -11724,7 +11730,7 @@ const defaultFetchConfig$6 = {
   filters: {},
   defaultData: []
 };
-function TradeRelationships({
+function TradeRelationships$1({
   goTo,
   t = () => {},
   options = {},
@@ -11756,7 +11762,7 @@ function TradeRelationships({
     })
   });
 }
-TradeRelationships.propTypes = {
+TradeRelationships$1.propTypes = {
   goTo: PropTypes__default["default"].func,
   t: PropTypes__default["default"].func,
   options: PropTypes__default["default"].object,
@@ -11863,7 +11869,7 @@ const CustomLegend = ({
 };
 
 const {
-  useToken: useToken$4
+  useToken: useToken$5
 } = antd.theme;
 
 /**
@@ -11952,7 +11958,7 @@ function LineChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken$4();
+  } = useToken$5();
   const {
     legendEnabled,
     legendItems,
@@ -12954,7 +12960,7 @@ function SupplyChain({
         getRedirectLink: getRedirectLink
       })
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
-      children: /*#__PURE__*/jsxRuntime.jsx(TradeRelationships, {
+      children: /*#__PURE__*/jsxRuntime.jsx(TradeRelationships$1, {
         selectedSources: selectedPartners,
         t: t,
         options: options,
@@ -13832,7 +13838,7 @@ function AccumulationGraph({
 }
 
 const {
-  useToken: useToken$3
+  useToken: useToken$4
 } = antd.theme;
 
 /**
@@ -13923,7 +13929,7 @@ function BarChart({
   const chartRef = React__default["default"].useRef(null);
   const {
     token
-  } = useToken$3();
+  } = useToken$4();
   const {
     legendEnabled,
     legendItems,
@@ -15605,7 +15611,7 @@ const TablePageWithTabs = ({
 };
 
 const {
-  useToken: useToken$2
+  useToken: useToken$3
 } = antd.theme;
 const MAX_LENGTH = 3;
 function AvatarGroup({
@@ -15616,7 +15622,7 @@ function AvatarGroup({
   const count = items.length === maxLength + 1 ? items.length : maxLength;
   const {
     token
-  } = useToken$2();
+  } = useToken$3();
   return /*#__PURE__*/jsxRuntime.jsx(antd.Avatar.Group, {
     max: {
       count: count,
@@ -19478,12 +19484,12 @@ function Geolocation$1({
 }
 
 const {
-  useToken: useToken$1
+  useToken: useToken$2
 } = antd.theme;
 function Smart() {
   const {
     token
-  } = useToken$1();
+  } = useToken$2();
   const [isOpen, setIsOpen] = React.useState(false);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
@@ -19567,7 +19573,7 @@ function SmartWidget({
 }) {
   const {
     token
-  } = useToken$1();
+  } = useToken$2();
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     noTitle: true,
     className: "no-p-body p-xs",
@@ -20615,7 +20621,7 @@ FormPopover.propTypes = {
 };
 
 const {
-  useToken
+  useToken: useToken$1
 } = antd.theme;
 const disabledTypes = ["dataLink"];
 function Versions({
@@ -20628,7 +20634,7 @@ function Versions({
 }) {
   const {
     token
-  } = useToken();
+  } = useToken$1();
   const dataSource = React.useMemo(() => {
     if (!versionsDatapoints) {
       return [];
@@ -34878,188 +34884,2066 @@ const ProductionSitesTable = ({
   });
 };
 
-function OperatorSummary({
-  t = () => {},
-  goTo = () => {},
-  getRedirectLink = () => {},
-  theme = {},
-  user = {},
-  options = {},
+const useSummary = ({
+  getOne,
+  getMultiple,
+  id,
+  hasSelect = false,
+  storageKey,
+  data,
+  isPdf,
+  params,
   partners,
   selectedPartners,
-  setSelectedPartners,
-  informationSources,
-  hardcodedData,
-  breadCrumbs = []
-}) {
+  user,
+  t,
+  theme = {},
+  service,
+  onIdChange = () => {}
+}) => {
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [hasInitialized, setHasInitialized] = React.useState(false);
+  const [singleItemData, setSingleItemData] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  const [_partners, _setPartners] = React.useState();
+  const [selectedItem, setSelectedItem] = React.useState(undefined);
+  const dataOptions = React.useMemo(() => {
+    if (hasSelect) {
+      const mappedData = Array.isArray(data) ? data.map(item => ({
+        label: item?.name,
+        value: item?.datastakeId
+      })) : [];
+      const storedData = StorageManager$1.get(storageKey);
+      if (storedData) {
+        try {
+          const parsedStoredData = JSON.parse(storedData);
+          const existsInData = mappedData?.find(item => item.value === parsedStoredData.value);
+          if (!existsInData) {
+            return [...mappedData, parsedStoredData];
+          }
+        } catch (error) {
+          console.log('Error parsing stored data:', error);
+        }
+      }
+      return mappedData;
+    }
+  }, [data, hasSelect, storageKey]);
+  React.useEffect(() => {
+    if (hasSelect && dataOptions && dataOptions.length > 0 && !debouncedSearch && !hasInitialized) {
+      let selectedValue;
+      if (isPdf) {
+        selectedValue = id;
+      } else {
+        const storedData = StorageManager$1.get(storageKey);
+        if (storedData) {
+          try {
+            const parsedData = JSON.parse(storedData);
+            const existsInOptions = dataOptions?.find(item => item?.value === parsedData?.value);
+            selectedValue = existsInOptions ? parsedData?.value : Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+          } catch (error) {
+            console.log('Error parsing stored data:', error);
+            selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+          }
+        } else {
+          selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+        }
+      }
+      setSelectedItem(selectedValue);
+      setHasInitialized(true);
+    }
+  }, [hasSelect, storageKey, isPdf, id, debouncedSearch, hasInitialized, dataOptions]);
+  React.useEffect(() => {
+    if (selectedItem && Array.isArray(data)) {
+      const selectedData = data.find(item => item?.datastakeId === selectedItem);
+      if (selectedData) {
+        const saved = {
+          label: selectedData.name,
+          value: selectedData.datastakeId
+        };
+        StorageManager$1.set(storageKey, JSON.stringify(saved));
+      }
+    }
+  }, [selectedItem, storageKey, data]);
+  const debouncedSetSearch = React.useMemo(() => _.debounce(value => setDebouncedSearch(value), 300), []);
+  const onSearch = React.useCallback(value => {
+    setSearch(value);
+    debouncedSetSearch(value);
+  }, [debouncedSetSearch]);
+  React.useEffect(() => {
+    setDebouncedSearch("");
+  }, [selectedItem]);
+  const filters = React.useMemo(() => {
+    return {
+      pagination: {
+        size: 20,
+        page: 1
+      },
+      ...(debouncedSearch ? {
+        search: {
+          qs: debouncedSearch,
+          fields: ["name", "datastakeId", "orgShortName"]
+        }
+      } : {})
+    };
+  }, [debouncedSearch]);
+  React.useEffect(() => {
+    if (_partners !== undefined) {
+      if ((params?.id !== null || isPdf && id !== null) && !hasSelect) {
+        getOne({
+          datastakeId: params?.id || id,
+          sources: _partners
+        });
+      }
+    }
+    if (hasSelect && !params?.id) {
+      getMultiple(filters);
+    }
+  }, [params?.id, hasSelect, getOne, getMultiple, _partners, isPdf, id, filters]);
+  React.useEffect(() => {
+    if (selectedItem && _partners !== undefined) {
+      const fetchSingleItem = async () => {
+        setLoading(true);
+        try {
+          const {
+            data
+          } = await service.getOne(selectedItem, {
+            sources: _partners
+          });
+          setSingleItemData(data);
+        } catch (error) {
+          console.log(error);
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchSingleItem();
+    }
+  }, [selectedItem, service, _partners]);
+  React.useEffect(() => {
+    _setPartners(selectedPartners?.partners);
+  }, [selectedPartners]);
+  React.useEffect(() => {
+    const currentId = params?.id || selectedItem;
+    if (typeof onIdChange === 'function') {
+      if (currentId) {
+        onIdChange(currentId);
+      }
+    }
+  }, [params?.id, selectedItem, onIdChange]);
   const sourceOptions = React.useMemo(() => {
-    if (!partners?.length) return [];
-    return partners?.map(partner => {
+    return (partners || [])?.map(partner => {
       const isOwnData = partner.id === user?.company?.id;
       return {
-        label: partner.nickName,
+        label: isOwnData ? t("Own Data") : partner.nickName,
         value: partner.id,
         avatar: isOwnData ? /*#__PURE__*/jsxRuntime.jsx("span", {
           children: "OWN"
-        }) : /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-          name: "Search02",
-          size: 14
-        }),
+        }) : undefined,
         background: isOwnData ? theme.colorPrimary7 : undefined,
         color: isOwnData ? "white" : undefined
       };
     });
-  }, [partners, user]);
-  React.useEffect(() => {
-    window.theme = theme;
-  }, [theme]);
-  return /*#__PURE__*/jsxRuntime.jsx(DashboardLayout, {
-    header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
-      title: t('Operator Summary'),
-      addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
-          options: [...sourceOptions],
-          isAvatarGroup: true,
-          selectionType: "checkbox",
-          canUnselectLast: false,
-          onChange: selected => {
-            setSelectedPartners(prev => ({
-              ...prev,
-              partners: selected,
-              loading: false
-            }));
-          },
-          dropDownWidth: 200,
-          defaultSelected: partners?.map(p => p.id) || []
-        }, partners?.length)
-      }),
-      breadcrumbs: breadCrumbs
-    })
-  });
-}
-
-styled__default["default"].div`
-	max-width: calc(100% - 48px);
-	margin-left: var(--size-lg);
-	overflow: hidden;
-
-	.daf-table {
-		padding: 0px;
-		margin-top: 0px;
-
-		.ant-tag {
-			text-align: center;
-		}
-	}
-
-	.daf-select-filters .filters {
-		padding-top: 16px;
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	.daf-table {
-		padding-top: 16px;
-	}
-`;
-({
-  size: PropTypes__default["default"].any,
-  maxHeight: PropTypes__default["default"].number,
-  dataSource: PropTypes__default["default"].array,
-  columns: PropTypes__default["default"].object,
-  pagination: PropTypes__default["default"].any
-});
+  }, [partners, user, hasSelect]);
+  return {
+    selectedItem,
+    setSelectedItem,
+    dataOptions,
+    search,
+    debouncedSearch,
+    onSearch,
+    setSearch,
+    setDebouncedSearch,
+    sourceOptions,
+    singleItemData,
+    loading
+  };
+};
 
 ({
-  data: PropTypes__default["default"].array.isRequired,
-  limit: PropTypes__default["default"].number
+  countryName: PropTypes__default["default"].string.isRequired,
+  code: PropTypes__default["default"].string.isRequired,
+  hasTooltip: PropTypes__default["default"].bool
 });
 
-({
-  content: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].oneOf(['large', 'middle', 'small']),
-  type: PropTypes__default["default"].oneOf(['dashed', 'default', 'ghost', 'link', 'primary', 'text']),
-  icon: PropTypes__default["default"].node,
-  onClick: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  loading: PropTypes__default["default"].bool,
-  title: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].object,
-  className: PropTypes__default["default"].string
-});
+const getKeyIndicatorConfig = ({
+  t,
+  data = {},
+  options = {}
+}) => [{
+  label: t("Country"),
+  render: () => {
+    if (!data?.country) {
+      return "-";
+    }
+    const country = findOptions(data?.country, options?.countries);
+    const code = data?.country;
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: country,
+      children: /*#__PURE__*/jsxRuntime.jsx("img", {
+        alt: code,
+        style: {
+          width: 24,
+          borderRadius: 100,
+          height: 24
+        },
+        src: `https://flagcdn.com/w80/${code.toLowerCase()}.png`
+      })
+    });
+  }
+}, {
+  label: t("Supply Chain Position"),
+  render: () => {
+    const position = findOptions(data?.positionSupplyChain, options?.positionSupplyChainOptions);
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: position || "-"
+    });
+  }
+}, {
+  label: t("Legal Form"),
+  render: () => {
+    const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions);
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: subCategory || "-"
+    });
+  }
+}, {
+  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",
+          style: {
+            color: "#1677FF",
+            marginBottom: 8
+          },
+          children: t(product)
+        }, product);
+      })
+    });
+  }
+}, {
+  label: t("Associated Mine Sites"),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.associatedMineSites || 0
+    });
+  }
+}, {
+  label: t("Identified Suppliers"),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.identifiedSuppliers || 0
+    });
+  }
+}, {
+  label: t("Identified Customers"),
+  render: () => {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: data?.identifiedCustomers || 0
+    });
+  }
+}];
 
-({
-  onClick: PropTypes__default["default"].func,
-  isActive: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].any,
-  className: PropTypes__default["default"].string
-});
+const KeyInformation = ({
+  options = {},
+  selectedPartners = {},
+  t = () => {},
+  id = {},
+  data = {},
+  loading = false
+}) => {
+  // const defaultFetchConfig = useMemo(() => {
+  // 	return {
+  //         basepath: "analytics",
+  //         url: '/widgets/key-informations',
+  // 		defaultData: [],
+  // 		stop: selectedPartners?.loading,
+  // 		filters: {
+  // 			datastakeId: id,
+  // 			sources: selectedPartners?.partners || [],
+  // 		},
+  // 	};
+  // }, [selectedPartners, id]);
+
+  // const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+  const config = React.useMemo(() => getKeyIndicatorConfig({
+    t,
+    data,
+    options
+  }), [t, data, options]);
+  return /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+    t: t,
+    config: config,
+    className: "small-content",
+    loading: loading,
+    withTooltip: true,
+    noMinWidth: true
+  });
+};
 
-styled__default["default"].div`
-  .ant-btn {
-    border-radius: 100px 100px 100px 0;
-    padding: 10px;
-    height: fit-content;
-    font-size: var(--size);
-    line-height: var(--size-lg);
-    font-weight: 400;
-    width: 100%;
+const {
+  useToken
+} = antd.theme;
+/**
+ * RadialBarChart Component
+ *
+ * A reusable and customizable radial bar chart built on top of AntV's G2Plot `RadialBar` component.
+ * This chart supports percentage-based or absolute values and allows detailed tooltip customization.
+ *
+ * Props:
+ * - data (Array):
+ *   Array of data points to be visualized. Each object should contain fields matching `xFieldKey` and `yFieldKey`.
+ *   Example: [{ label: 'Item A', value: 40 }]
+ *
+ * - xFieldKey (string):
+ *   The key in the data objects used for the X-axis (typically the label).
+ *   Default: "label"
+ *
+ * - yFieldKey (string):
+ *   The key in the data objects used for the Y-axis (typically the value to plot).
+ *   Default: "value"
+ *
+ * - renderTooltipContent (function):
+ *   Optional custom tooltip render function. It receives `(title, data)` and should return a React node or HTML content.
+ *
+ * - tooltipConfig (object):
+ *   Additional configuration passed to the AntV `tooltip` config.
+ *   Can include fields like `showMarkers`, `showTitle`, etc.
+ *
+ * - colorKey (string):
+ *   Optional key in data to map unique colors for each bar (via AntV's `colorField`).
+ *   If not provided, a single color is used.
+ *
+ * - animation (boolean):
+ *   Whether to animate the initial chart render.
+ *   Default: false
+ *
+ * - isPercentage (boolean):
+ *   If true, calculates the chart's maximum angle based on percentage value (0–100).
+ *   Default: true
+ *
+ * - color (string):
+ *   Custom hex color string or token for chart bars. Overrides the default theme color.
+ */
 
-    @media (${MOBILE_WIDTH}) {
-      padding: 0.8rem 2.625rem;
+function RadialBarChart({
+  data = [],
+  xFieldKey = "label",
+  yFieldKey = "value",
+  renderTooltipContent,
+  tooltipConfig = {},
+  colorKey,
+  animation = false,
+  isPercentage = true,
+  color,
+  isPdf = false,
+  legendConfig = {}
+}) {
+  const containerRef = React__default["default"].useRef(null);
+  const chartRef = React__default["default"].useRef(null);
+  const {
+    token
+  } = useToken();
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
+  const formattedData = React.useMemo(() => {
+    return data.map(item => ({
+      ...item,
+      originalValue: item[yFieldKey],
+      [yFieldKey]: item[yFieldKey] || 100,
+      isEmptyBar: item[yFieldKey] === 0
+    }));
+  }, [data, yFieldKey]);
+  const maxAngle = React.useMemo(() => {
+    const maxValue = Math.max(...formattedData.map(item => item[yFieldKey]));
+    if (isPercentage) {
+      if (maxValue >= 0 && maxValue <= 100) {
+        return maxValue / 100 * 360;
+      }
     }
-
-    &.normal-br {
-      border-radius: 8px;
+    if (maxValue >= 10 && maxValue <= 90 && maxValue % 10 === 0) {
+      return maxValue / 100 * 360;
+    }
+    return 360;
+  }, [formattedData, isPercentage, yFieldKey]);
+  React.useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const config = {
+      data: formattedData,
+      xField: xFieldKey,
+      yField: yFieldKey,
+      color: color || token.colorPrimary7,
+      colorField: colorKey || undefined,
+      innerRadius: data.length === 1 ? 0.8 : 0.3,
+      maxAngle,
+      tooltip: renderTooltipContent ? {
+        customContent: (title, data) => {
+          // Replace the displayed value with originalValue
+          const updatedData = data.map(d => {
+            const matchedItem = formattedData.find(item => item[xFieldKey] === d.data.label);
+            return {
+              ...d,
+              [yFieldKey]: matchedItem?.originalValue ?? d.data.value,
+              data: {
+                ...d.data,
+                value: matchedItem?.originalValue ?? d.data.value
+              }
+            };
+          });
+          return renderTooltip(renderTooltipContent(title, updatedData));
+        },
+        ...tooltipConfig
+      } : tooltipConfig,
+      label: false,
+      xAxis: false,
+      barBackground: {
+        style: {
+          fill: "#EEEFF0",
+          fillOpacity: 1
+        }
+      },
+      barStyle: item => {
+        const dataItem = formattedData.find(d => d[xFieldKey] === item[xFieldKey]);
+        if (dataItem.isEmptyBar) {
+          return {
+            fill: "#EEEFF0",
+            strokeOpacity: 0
+          };
+        }
+        return undefined;
+      },
+      animation: animation
+    };
+    if (!chartRef.current) {
+      chartRef.current = new g2plot.RadialBar(containerRef.current, config);
+      chartRef.current.render();
+    } else {
+      chartRef.current.update(config);
     }
+  }, [formattedData, xFieldKey, yFieldKey, maxAngle, renderTooltipContent, tooltipConfig, colorKey, animation, color, token.colorPrimary7]);
+  React.useEffect(() => {
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-1 flex-column justify-content-center",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Container, {
+        ref: containerRef,
+        isPdf: isPdf
+      })
+    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
+    })]
+  });
+}
 
-    &.ant-btn-primary {
-      background: var(--color-primary-70);
+const InformationCompleteness = ({
+  data = {},
+  loading = false,
+  t = () => {}
+}) => {
+  const graphData = React.useMemo(() => {
+    const keys = {
+      ownDataCompletion: data?.ownDataCompletion || 0,
+      consolidatedCompletion: data?.consolidatedCompletion || 0
+    };
+    const _data = Object.keys(keys).map(key => {
+      const item = keys[key];
+      if (!Array.isArray(item)) {
+        return {
+          label: key?.includes("own") ? t("Own Data") : t("Consolidated"),
+          value: item
+        };
+      }
+    });
+    return _data.filter(item => item !== undefined);
+  }, [data]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Information Completeness"),
+    loading: loading,
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsx(RadialBarChart, {
+      data: graphData,
+      renderTooltipContent: (title, item) => {
+        const value = item?.[0]?.data?.value > 100 ? 100 : item?.[0]?.data?.value || 0;
+        return {
+          title: title,
+          items: [{
+            label: t("Completion"),
+            value: `${value}%`
+          }]
+        };
+      }
+    })
+  });
+};
 
-      &[disabled] {
-        opacity: 0.6;
-        color: white;
+const Contributions = ({
+  data = {},
+  loading = false,
+  t = () => {}
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Contributions"),
+    className: "with-border-header h-w-btn-header",
+    loading: loading,
+    children: /*#__PURE__*/jsxRuntime.jsx(BarChart, {
+      data: data?.stakeholders || [],
+      xFieldKey: "completedDatapoints",
+      yFieldKey: "author",
+      renderTooltipContent: (title, item) => {
+        return {
+          title: title,
+          items: [{
+            label: t("Datapoints"),
+            value: item?.[0]?.data?.completedDatapoints || 0
+          }]
+        };
       }
-    }
+    })
+  });
+};
 
-    &.ant-btn-dark-primary {
-      background: #193E61;
-      color: white;
+const InformationAvailability = ({
+  selectedPartners = {},
+  t = () => {},
+  id
+}) => {
+  const defaultFetchConfig = React.useMemo(() => ({
+    basepath: "analytics",
+    url: "/widgets/completeness",
+    defaultData: [],
+    stop: selectedPartners?.loading,
+    filters: {
+      datastakeId: id,
+      sources: selectedPartners?.partners || []
     }
+  }), [id, selectedPartners]);
+  const {
+    data,
+    loading
+  } = useWidgetFetch({
+    config: defaultFetchConfig
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Information Availability"),
+    loading: loading,
+    className: "with-border-header h-w-btn-header",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row flex-col-mobile gap-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(InformationCompleteness, {
+        data: data,
+        loading: loading,
+        t: t
+      }), /*#__PURE__*/jsxRuntime.jsx(Contributions, {
+        data: data,
+        loading: loading,
+        t: t
+      })]
+    })
+  });
+};
 
-    &.ant-btn-default {
-      color: var(--color-primary-70);
-      border: 1.5px solid var(--color-primary-70);
+const topIconColor = "#6C737F";
+const iconColorStakeholder = "#08979C";
+const leftBackgroundColorStakeholder = "#B5F5EC";
+const iconColorLocation = "#C41D7F";
+const leftBackgroundColorLocation = "#FFD6E7";
+const topIcons = {
+  building: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Building",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  factory: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Factory",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  smelter: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Smelter",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  internationalTrader: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Globe04",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  exporter: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Truck01",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  miningOperator: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "MineOperators",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  mineSite: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "MineSite",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  location: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "PMESmallLogo",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  inCountryTrader: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Handshake",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  localTradingHouse: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Building",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  mineralProcessor: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Building",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  inCountryTransporter: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Truck01",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  }),
+  internationalTransporter: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "Truck01",
+    color: topIconColor,
+    width: 16,
+    height: 16
+  })
+};
+const leftIcons = {
+  stakeholder: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "DashboardStakeholder",
+    color: iconColorStakeholder,
+    width: 16,
+    height: 16
+  }),
+  location: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+    name: "DashboardLocations",
+    color: iconColorLocation,
+    width: 16,
+    height: 16
+  })
+};
 
-      &.default {
-        color: #1F2A37;
-        border: 1.5px solid #E5E7EB;
+const getFilterConfig = ({
+  operatorData = {},
+  options = {},
+  filters = {},
+  t = () => {}
+}) => {
+  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;
+    return {
+      value: product.typeOfProduct,
+      label: label ?? product.typeOfProduct
+    };
+  }));
+  const combinedMineralOptions = [...allTradeMineralOptions].filter((option, index, self) => {
+    return option && index === self.findIndex(o => o.value === option.value);
+  });
+  const value = filters.products ? {
+    value: filters.products
+  } : {};
+  return [{
+    label: t("Products"),
+    placeholder: t("Select"),
+    key: "products",
+    type: "select",
+    ...value,
+    options: combinedMineralOptions
+  }];
+};
+const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {
+  if (data?.suppliers?.length > 0) {
+    return mapChildren(data.suppliers, data.datastakeId, "left").filter(d => !!d);
+  }
+  const storeLocation = supplierLocations;
+  supplierLocations = [];
+  return storeLocation.map(location => {
+    return mapChildren([location], location.connect, "left");
+  }).flat().filter(d => !!d);
+};
+const mapItem = (data, options, goTo, getRedirectLink) => {
+  const {
+    positionSupplyChainOptions,
+    locationCategories
+  } = options || {};
+  return {
+    id: data.datastakeId || "-",
+    datastakeId: data.datastakeId || "-",
+    leftIcon: leftIcons[data.type === "mineSite" ? "location" : "stakeholder"],
+    name: data.name || "-",
+    subTitle: findOptions(data.type, [...(positionSupplyChainOptions || []), ...(locationCategories || [])]),
+    leftBackground: data.type === "mineSite" ? leftBackgroundColorLocation : leftBackgroundColorStakeholder,
+    topIcon: topIcons[data.type],
+    country: {
+      label: findOptions(data.country, options?.countries || []),
+      value: data.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/summary/operators/${data.datastakeId}`));
     }
+  };
+};
 
-    &.cancel {
-      background: #1F4A72;
-      color: white;
-      border-color: transparent;
-    }
-
-    &.blue-color {
-      color: var(--color-primary-70);
-      border-color: var(--color-primary-70);
+const useTradeRelationship = ({
+  id,
+  selectedPartners,
+  options,
+  goTo,
+  getRedirectLink,
+  filters
+}) => {
+  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",
+    filters: {
+      product: filters?.products,
+      sources: selectedPartners?.partners || []
     }
-  }
-`;
-
-styled__default["default"].div`
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	padding: 4px;
-	max-width: 100%;
-
-	overflow: hidden;
-	white-space: nowrap;
+  }), [id, filters?.products, selectedPartners?.partners]);
+  const {
+    data
+  } = useWidgetFetch({
+    config: config
+  });
+  const mapItem$1 = data => {
+    return mapItem(data, options, goTo, getRedirectLink);
+  };
+  React.useEffect(() => {
+    if (id && selectedPartners?.partners?.length > 0 && fetchedProducts) {
+      const _fetch = async () => {
+        setLoading(true);
+        try {
+          let supplierLocations = [];
+          const sources = {};
+          const dataSources = [];
+          const mapChildren = (children, parentId, type = "left") => {
+            return children?.map(child => {
+              const childData = mapItem$1(child);
+              if (type === "left") {
+                supplierLocations.push(...(child?.locations || []).map(location => {
+                  return {
+                    ...location,
+                    type: "mineSite",
+                    sources: child.sources || 1,
+                    suppliers: [],
+                    clients: [],
+                    connect: child.datastakeId
+                  };
+                }));
+              }
+              const children = type === "left" ? [...child.suppliers] : [...child.clients];
+              if (child.datastakeId === data.datastakeId) {
+                dataSources.push(parentId);
+                return null;
+              }
+              if (sources[child.datastakeId]) {
+                if (!sources[child.datastakeId].includes(parentId)) {
+                  sources[child.datastakeId].push(parentId);
+                }
+                return null;
+              } else {
+                sources[child.datastakeId] = [parentId];
+              }
+              if (type === "left" && children?.length === 0 && supplierLocations?.length > 0) {
+                const storeLocation = supplierLocations;
+                supplierLocations = [];
+                const children = storeLocation?.map(location => {
+                  return mapChildren([location], location.connect, "left");
+                });
+                return {
+                  ...childData,
+                  sources: sources[child.datastakeId] || [],
+                  children: children.flat()?.filter(d => !!d)
+                };
+              }
+              return {
+                ...childData,
+                sources: sources[child.datastakeId] || [],
+                children: children.length > 0 ? mapChildren(children, child.datastakeId, type)?.filter(d => !!d) : []
+              };
+            });
+          };
+          supplierLocations.push(...(data?.locations || []).map(location => {
+            return {
+              ...location,
+              type: "mineSite",
+              suppliers: [],
+              clients: [],
+              connect: data?.datastakeId
+            };
+          }));
+          const graphData = {
+            ...mapItem$1(data),
+            onClick: undefined,
+            sources: dataSources,
+            right: mapChildren(data.clients, data.datastakeId, "right")?.filter(d => !!d),
+            left: getLeft(data, mapChildren, supplierLocations)
+          };
+          console.log({
+            graphData
+          });
+          setGraphData(graphData);
+        } catch (err) {
+          setGraphData({});
+          console.log(err);
+        }
+        setLoading(false);
+      };
+      _fetch();
+    }
+  }, [filters?.products, id, selectedPartners, fetchedProducts]);
+  return {
+    graphData,
+    loading,
+    fetchedProducts,
+    setFetchedProducts,
+    setGraphData,
+    setLoading,
+    data
+  };
+};
+
+const NODE_GAP_X = 100;
+const NODE_GAP_Y = 50;
+function TradeRelationship({
+  data,
+  maxZoom = 1,
+  minZoom = 0.2,
+  t = s => s,
+  tooltipTitle = "Trade",
+  filtersConfig,
+  onFilterChange = () => {},
+  renderTooltipItems = () => [],
+  getTotal = () => 0
+}) {
+  const reactFlowWrapper = React.useRef(null);
+  const [nodes, setNodes] = react.useNodesState([]);
+  const [edges, setEdges] = react.useEdgesState([]);
+  const {
+    setViewport,
+    getViewport,
+    fitView
+  } = react.useReactFlow();
+  const [activeNode, setActiveNode] = React.useState(null);
+  // const [initCenter, setInitCenter] = useState(true);
+  const [associatedNodes, setAssociatedNodes] = React.useState(null);
+  React.useEffect(() => {
+    setActiveNode(null);
+  }, [data]);
+  const mappedNodes = React.useMemo(() => nodes.map(n => ({
+    ...n,
+    id: (n?.id || "").toString(),
+    width: 405,
+    height: activeNode === n.id ? 190 : 140,
+    data: {
+      ...n.data,
+      activeNode,
+      setActiveNode,
+      associatedNodes,
+      t
+    }
+  })), [activeNode, setActiveNode, nodes, associatedNodes, t]);
+  const mappedEdges = React.useMemo(() => edges.map(n => ({
+    ...n,
+    id: (n?.id || "").toString(),
+    width: 224,
+    height: 1,
+    data: {
+      ...n.data,
+      activeNode,
+      associatedNodes
+    }
+  })), [edges, activeNode, associatedNodes]);
+  React.useEffect(() => {
+    let yInit = 0;
+    let xInit = 0;
+    const isBilateral = data?.sources?.length >= 1;
+    let customIndex = 0;
+    const isActive = activeNode === data.id;
+    if (Object.keys(data).length === 0) {
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+    const _nodes = [{
+      id: data.id,
+      type: "expandedNode",
+      position: {
+        x: xInit,
+        y: isActive ? yInit - EXPANDED_NODE_ACTIVE_HEIGHT / 2 : yInit
+      },
+      data
+    }];
+    const _edges = [];
+    if (isBilateral) {
+      (data.sources || []).forEach(source => {
+        const hasPrev = false;
+        _edges.push({
+          id: `e-${data.id}-${source}`,
+          source: source,
+          type: "default",
+          target: data?.id?.toString(),
+          sourceHandle: "left",
+          targetHandle: "right",
+          data: {
+            maxHeight: 0,
+            isBilateral: !hasPrev,
+            type: "left",
+            ...data,
+            getTotal,
+            renderTooltipItems,
+            tooltipTitle,
+            moreLeft: false
+          }
+        });
+      });
+    }
+    const mapChildren = ({
+      children = [],
+      x = 0,
+      sourceHandle,
+      targetHandle,
+      type = "right",
+      prevChildren = [],
+      maxHeight = 0
+    }) => {
+      let _maxHeight = maxHeight;
+      let y = children.length === 1 ? yInit : yInit - children.length / 2 * (EXPANDED_NODE_HEIGHT + NODE_GAP_Y) + NODE_GAP_Y;
+      let addedHeight = 0;
+      const _children = [];
+      let hasActive = children.find(ch => ch.id === activeNode);
+      if (hasActive) {
+        y = y - EXPANDED_NODE_ACTIVE_HEIGHT / 2;
+      }
+      children.forEach((ch, i) => {
+        const _prevNodes = [..._nodes];
+        const _y = Math.round(y + (EXPANDED_NODE_HEIGHT + NODE_GAP_Y) * i + addedHeight);
+        if (activeNode === ch.id) {
+          addedHeight += EXPANDED_NODE_ACTIVE_HEIGHT;
+        }
+        _nodes.push({
+          id: ch?.id?.toString(),
+          type: "expandedNode",
+          position: {
+            x,
+            y: _y
+          },
+          data: ch
+        });
+        if (_y > _maxHeight) {
+          _maxHeight = _y;
+        }
+        (ch.sources || []).forEach(source => {
+          const hasPrev = _prevNodes.find(p => p.id === source);
+          const isCustom = !hasPrev ? true : prevChildren.includes(source) ? false : true;
+          _edges.push({
+            id: `e-${ch.id}-${source}`,
+            source: hasPrev ? source : ch?.id?.toString(),
+            type: isCustom ? "verticalPath" : "defaultEdge",
+            target: hasPrev ? ch?.id?.toString() : source,
+            sourceHandle: sourceHandle,
+            targetHandle: targetHandle,
+            data: {
+              maxHeight: _maxHeight,
+              isBilateral: !hasPrev,
+              type,
+              ...ch,
+              getTotal,
+              customIndex,
+              renderTooltipItems,
+              tooltipTitle,
+              moreLeft: prevChildren.length > children.length
+            }
+          });
+          if (isCustom) {
+            customIndex += 1;
+          }
+        });
+        if (Array.isArray(ch.children)) {
+          _children.push(...ch.children);
+        }
+      });
+      if (_children.length) {
+        mapChildren({
+          children: _children,
+          x: type === "right" ? x + (EXPANDED_NODE_WIDTH + NODE_GAP_X) : x - (EXPANDED_NODE_WIDTH + NODE_GAP_X),
+          sourceHandle,
+          targetHandle,
+          type,
+          maxHeight: _maxHeight,
+          prevChildren: children.map(ch => ch.id)
+        });
+      }
+    };
+    mapChildren({
+      children: data.left,
+      x: xInit - (EXPANDED_NODE_WIDTH + NODE_GAP_X),
+      sourceHandle: "left",
+      targetHandle: "right",
+      type: "left",
+      prevChildren: !isBilateral ? [data.id] : [],
+      maxHeight: 0
+    });
+    mapChildren({
+      children: data.right,
+      x: xInit + (EXPANDED_NODE_WIDTH + NODE_GAP_X),
+      sourceHandle: "right",
+      targetHandle: "left",
+      type: "right",
+      prevChildren: !isBilateral ? [data.id] : [],
+      maxHeight: 0
+    });
+    setNodes(_nodes);
+    setEdges(_edges);
+  }, [data, activeNode]);
+
+  // Used to find associated nodes, when a node is selected
+  React.useEffect(() => {
+    if (activeNode) {
+      let _associatedNodesRight = [activeNode];
+      let _prevAssocatedNodesRight = [];
+      let _associatedNodesLeft = [activeNode];
+      let _prevAssocatedNodesLeft = [];
+      let check = false;
+      const checkSide = ({
+        type = "target",
+        associatedNodes = [],
+        prevAssocatedNodes = []
+      }) => {
+        while (prevAssocatedNodes.length !== associatedNodes.length) {
+          prevAssocatedNodes = [...associatedNodes];
+          const _edges = edges.filter(e => associatedNodes.includes(e[type]));
+          const _allEdges = _edges.reduce((a, e) => [...a, e.source, e.target], []);
+          _allEdges.forEach(e => {
+            if (!associatedNodes.includes(e)) {
+              associatedNodes.push(e);
+            }
+            if (e === data.id && !check) {
+              check = true;
+              checkSide({
+                prevAssocatedNodes: _prevAssocatedNodesRight,
+                associatedNodes: _associatedNodesRight,
+                type: "source"
+              });
+            }
+          });
+        }
+      };
+
+      // Find Targets
+      checkSide({
+        prevAssocatedNodes: _prevAssocatedNodesRight,
+        associatedNodes: _associatedNodesRight
+      });
+      // Find Sources
+      checkSide({
+        prevAssocatedNodes: _prevAssocatedNodesLeft,
+        associatedNodes: _associatedNodesLeft,
+        type: "source"
+      });
+      setAssociatedNodes([..._associatedNodesLeft, ..._associatedNodesRight]);
+    } else {
+      setAssociatedNodes(null);
+    }
+  }, [edges.length, activeNode]);
+  return /*#__PURE__*/jsxRuntime.jsx(BaseGraph, {
+    nodes: mappedNodes,
+    edges: mappedEdges,
+    maxZoom: maxZoom,
+    minZoom: minZoom,
+    setViewport: setViewport,
+    getViewport: getViewport,
+    filtersConfig: filtersConfig,
+    t: t,
+    onFilterChange: onFilterChange,
+    centerFlow: () => {
+      fitView({
+        padding: 0.1,
+        nodes
+      });
+    },
+    ref: reactFlowWrapper
+  });
+}
+var TradeRelationship$1 = withProvider(TradeRelationship);
+
+const TradeRelationships = ({
+  t = () => {},
+  goTo = () => {},
+  operatorData = {},
+  selectedPartners = {},
+  id,
+  options = {},
+  getRedirectLink = () => {}
+}) => {
+  const [filters, setFilters] = React.useState({});
+  const onFilterChange = filters => {
+    setFilters(p => ({
+      ...p,
+      ...filters
+    }));
+  };
+  const filterConfig = React.useMemo(() => {
+    return getFilterConfig({
+      operatorData,
+      options,
+      filters,
+      t
+    });
+  }, [filters.products, t, options?.minerals, operatorData]);
+  const {
+    graphData,
+    loading,
+    fetchedProducts,
+    setFetchedProducts
+  } = useTradeRelationship({
+    id,
+    selectedPartners,
+    options,
+    goTo,
+    getRedirectLink,
+    filters
+  });
+  React.useEffect(() => {
+    const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
+    if (!filters.products && defaultProduct) {
+      setFilters(prev => {
+        const data = {
+          ...prev,
+          products: defaultProduct
+        };
+        return data;
+      });
+    }
+    if (!fetchedProducts) {
+      setFetchedProducts(true);
+    }
+  }, [filterConfig]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Trade Relationships"),
+    className: "flex flex-1 with-border-header no-p-body",
+    loading: loading,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          height: 600
+        },
+        className: "flex flex-column",
+        children: /*#__PURE__*/jsxRuntime.jsx(TradeRelationship$1, {
+          data: graphData,
+          goTo: goTo,
+          t: t,
+          getTotal: c => {
+            return c.totalSources || 0;
+          },
+          renderTooltipItems: data => [{
+            label: "Volume",
+            value: data?.volume || "--"
+          }],
+          maxZoom: 1.2,
+          minZoom: 0.4,
+          tooltipTitle: "Trade",
+          filtersConfig: filterConfig,
+          onFilterChange: onFilterChange
+        })
+      })
+    })
+  });
+};
+
+const IconNodesConfig$1 = {
+  beneficiaries: {
+    name: "nashiriki::beneficiaries",
+    icon: "CoinsHand",
+    order: 3,
+    emptyName: "no-beneficiaries"
+  },
+  boardMembers: {
+    name: "nashiriki::board-members",
+    icon: "Users",
+    order: 1,
+    emptyName: "no-board-members"
+  },
+  management: {
+    name: "nashiriki::management",
+    icon: "Filters",
+    order: 2,
+    emptyName: "no-management"
+  },
+  shareholders: {
+    name: "nashiriki::stakeholders",
+    icon: "PercentCircle",
+    order: 4,
+    emptyName: "no-stakeholders"
+  }
+};
+
+const getGovernanceData = ({
+  data,
+  operatorData,
+  id,
+  options,
+  t,
+  goTo,
+  selectedPartners
+}) => {
+  const {
+    sources,
+    ...rest
+  } = data;
+  const _data = rest;
+  return {
+    id: operatorData?.datastakeId || id,
+    name: t(operatorData?.name || ""),
+    country: {
+      label: options?.countries?.find(country => country.value === operatorData?.country)?.label || "",
+      value: (operatorData?.country || "").toLowerCase() || ""
+    },
+    onClick: () => {
+      goTo(`/app/view/operators/${operatorData?.datastakeId || id}`);
+    },
+    totalSources: selectedPartners?.partners?.length || 0,
+    children: Object.keys(_data)?.map((key, index) => {
+      return {
+        id: key,
+        name: t(IconNodesConfig$1[key]?.name),
+        icon: IconNodesConfig$1[key]?.icon,
+        order: IconNodesConfig$1[key]?.order || index + 1,
+        emptyName: t(`${IconNodesConfig$1[key]?.emptyName}`),
+        activeColour: "#b6f5ec",
+        iconHoverColor: "#fff",
+        hoverColor: "#36cfca",
+        content: _data[key].length,
+        children: _data[key]?.map(child => {
+          return {
+            id: child?.datastakeId || "",
+            name: child?.name || "",
+            country: {
+              label: options?.countries?.find(country => country.value === child?.country)?.label || "",
+              value: (child?.country || "").toLowerCase() || ""
+            },
+            totalSources: child?.sources || 0,
+            tooltipLabel: t("Holding"),
+            onClick: () => {
+              if (child?.type === "operator") {
+                goTo(`/app/operator-summary/${child.datastakeId}`);
+                return;
+              }
+              goTo(`/app/view/stakeholders/${child.datastakeId}`);
+            },
+            value: child?.holding || 0
+          };
+        })
+      };
+    })
+  };
+};
+
+const DEFAULT_SIBLING_SPACE = 49;
+const NO_CHILDREN_SIBLING_SPACE = 46;
+const DEFAULT_PRIMARY_NODE_SPACE = 33;
+const SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE = 36;
+
+const DATA_NODE_SIZE = {
+  primaryNode: {
+    width: MAIN_NODE_WIDTH,
+    height: MAIN_NODE_HEIGHT
+  },
+  iconNode: {
+    width: ICON_NODE_WIDTH,
+    height: ICON_NODE_HEIGHT
+  },
+  nameNode: {
+    width: NAME_CARD_WIDTH,
+    height: ICON_NODE_HEIGHT
+  }
+};
+function positionIconNodes({
+  order,
+  mainNode,
+  offsetY = 250
+}) {
+  const offsetX = 270;
+  const centerX = mainNode.position.x + MAIN_NODE_WIDTH / 2;
+  const centerY = mainNode.position.y + MAIN_NODE_HEIGHT / 2;
+  switch (order) {
+    case 1:
+      return {
+        x: centerX - offsetX,
+        y: centerY - offsetY
+      };
+    case 2:
+      return {
+        x: centerX + offsetX,
+        y: centerY - offsetY
+      };
+    case 3:
+      return {
+        x: centerX - offsetX,
+        y: centerY + offsetY - ICON_NODE_HEIGHT
+      };
+    case 4:
+      return {
+        x: centerX + offsetX,
+        y: centerY + offsetY - ICON_NODE_HEIGHT
+      };
+    default:
+      return null;
+  }
+}
+function positionDataNodes({
+  isLeftSide,
+  isAboveMainNode,
+  iconNode,
+  index,
+  total,
+  mainNode,
+  type,
+  hasContent,
+  isPdf
+}) {
+  const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
+  const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
+
+  // const siblingSpace = () => {
+  // 	if (type === "primaryNode") {
+  // 		if (iconNode?.data.children?.length === 1 && hasContent) { 
+  // 			return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+  // 		}
+  // 		return DEFAULT_PRIMARY_NODE_SPACE;
+  // 	}
+  // 	if (iconNode?.data?.children?.length === 0) {
+  // 		return NO_CHILDREN_SIBLING_SPACE;
+  // 	}
+  // 	return DEFAULT_SIBLING_SPACE;
+  // };
+
+  // const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+  const X_SPACE_FROM_ICON_NODE = 130;
+  // const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+
+  // const totalHeight = total * MIN_SPACE_REQUIRED;
+
+  iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 26.5 : type === "primaryNode" ? 15 : 16.5);
+  // const startY = iconNodeCenterY - totalHeight / 2;
+  // const END_Y = startY + totalHeight;
+
+  // const yOffset = index * MIN_SPACE_REQUIRED;
+  let yPosition;
+  const iconNodeHandleCenterY = iconNode.position.y + ICON_NODE_HEIGHT / 2 + (hasContent ? 10 : 0);
+  if (type === "nameNode" && total === 1 || isPdf) {
+    yPosition = iconNodeHandleCenterY - DATA_NODE_HEIGHT / 2 - 7;
+  } else {
+    const siblingSpace = () => {
+      if (type === "primaryNode") {
+        if (iconNode?.data.children?.length === 1 && hasContent) {
+          return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+        }
+        return DEFAULT_PRIMARY_NODE_SPACE;
+      }
+      if (iconNode?.data?.children?.length === 0) {
+        return NO_CHILDREN_SIBLING_SPACE;
+      }
+      return DEFAULT_SIBLING_SPACE;
+    };
+    const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+    const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+    const totalHeight = total * MIN_SPACE_REQUIRED;
+    const startY = iconNodeHandleCenterY - totalHeight / 2;
+    const END_Y = startY + totalHeight;
+    const yOffset = index * MIN_SPACE_REQUIRED;
+    yPosition = startY + yOffset;
+    if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+      yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
+    } else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+      yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+    }
+  }
+  return {
+    x: isLeftSide ? iconNode.position.x - (DATA_NODE_WIDTH + X_SPACE_FROM_ICON_NODE) : iconNode.position.x + (X_SPACE_FROM_ICON_NODE + ICON_NODE_WIDTH),
+    y: yPosition
+  };
+}
+function StakeholderMappings({
+  data,
+  maxZoom = 1,
+  minZoom = 0.4,
+  isAllOpenDefault = true,
+  isSelectable = true,
+  iconOffsetY = 250,
+  t = s => s,
+  emptyString = undefined,
+  isPdf = false
+}) {
+  const reactFlowWrapper = React.useRef(null);
+  const [nodes, setNodes] = react.useNodesState([]);
+  const [edges, setEdges] = react.useEdgesState([]);
+  const {
+    setViewport,
+    getViewport,
+    fitView
+  } = react.useReactFlow();
+  const [selectedIconNodes, setSelectedIconNodes] = React.useState([]);
+  const [isChanged, setIsChanged] = React.useState(false);
+  const [mandatoryNodesToFit, setMandatoryNodesToFit] = React.useState([]);
+  React.useEffect(() => {
+    if (!reactFlowWrapper.current) return;
+    const clientHeight = reactFlowWrapper.current.clientHeight;
+    const clientWidth = reactFlowWrapper.current.clientWidth;
+    const centerX = Math.floor(clientWidth / 2);
+    const centerY = Math.floor(clientHeight / 2);
+    const children = data?.children || [];
+    const mandatoryNodes = [];
+    if (emptyString) {
+      const emptyNode = {
+        type: "nameNode",
+        id: "empty-node",
+        data: {
+          isEmpty: true,
+          name: emptyString,
+          icon: data?.icon || "DashboardStakeholder",
+          t: t,
+          isPdf: isPdf
+        },
+        position: {
+          x: centerX - MAIN_NODE_WIDTH / 2,
+          y: centerY - MAIN_NODE_HEIGHT / 2
+        }
+      };
+      setNodes([emptyNode]);
+      mandatoryNodes.push(emptyNode.id);
+      return;
+    }
+    const mainNode = {
+      type: "primaryNode",
+      id: data?.id,
+      data: {
+        name: data?.name,
+        id: data?.id,
+        country: data?.country,
+        icon: data?.icon || "KYC",
+        onClick: data?.onClick || undefined,
+        totalSources: data?.totalSources,
+        backgroundColor: data?.backgroundColor || "#ade9e1",
+        iconColor: data?.iconColor || "#08949a",
+        isPdf: isPdf
+      },
+      position: {
+        x: centerX - MAIN_NODE_WIDTH / 2,
+        y: centerY - MAIN_NODE_HEIGHT / 2
+      }
+    };
+    mandatoryNodes.push(mainNode.id);
+    const iconNodes = children?.map(child => {
+      return {
+        id: child.id,
+        type: "iconNode",
+        data: {
+          name: child.name,
+          type: child.icon,
+          hoverColor: child.hoverColor,
+          iconHoverColor: child.iconHoverColor,
+          content: child.content,
+          children: child?.children || [],
+          order: child.order,
+          isLeftSide: child.order % 2 !== 0,
+          emptyName: child.emptyName,
+          onSelect: !isSelectable ? undefined : nodeId => {
+            if (selectedIconNodes.includes(nodeId)) {
+              setSelectedIconNodes(prev => prev.filter(id => id !== nodeId));
+            } else {
+              setSelectedIconNodes(prev => [...prev, nodeId]);
+            }
+            setIsChanged(true);
+          },
+          isSelected: selectedIconNodes.includes(child.id),
+          activeColour: child.activeColour
+        },
+        position: positionIconNodes({
+          order: child.order,
+          mainNode,
+          offsetY: iconOffsetY
+        })
+      };
+    });
+    mandatoryNodes.push(...iconNodes.map(node => node.id));
+    const iconEdges = [];
+    const openIconNOdes = iconNodes.filter(node => {
+      if (isAllOpenDefault && !isChanged) return true;
+      return selectedIconNodes.includes(node.id);
+    });
+    if (isAllOpenDefault && !isChanged) {
+      setSelectedIconNodes(openIconNOdes.map(node => node.id));
+    }
+    const dataNodes = openIconNOdes.flatMap(node => {
+      const children = node.data.children || [];
+      const total = children?.length || 0;
+      const iconNodeId = node.id;
+      node?.data?.content !== undefined && node?.data?.content !== null;
+      if (children.length === 0) {
+        iconEdges.push({
+          id: `${node.id}-empty`,
+          source: node.id,
+          target: node.data.name + "-name-node",
+          type: "tooltipEdge",
+          data: {
+            isEmpty: true,
+            isOnlyOne: true,
+            isPdf: isPdf
+          },
+          targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
+        });
+        mandatoryNodes.push(`${node.data.name}-name-node`);
+        return [{
+          id: node.data.name + "-name-node",
+          type: "nameNode",
+          data: {
+            isEmpty: true,
+            name: node.data?.emptyName || `No${node.data?.name} identified`,
+            icon: node.data?.type,
+            t: t,
+            isPdf: isPdf
+          },
+          position: positionDataNodes({
+            isLeftSide: node.data.order % 2 !== 0,
+            isAboveMainNode: node.data.order <= 2,
+            iconNode: node,
+            index: 0,
+            total: 1,
+            mainNode,
+            type: "nameNode",
+            hasContent: node?.data?.content !== undefined && node?.data?.content !== null ? true : false
+          })
+        }];
+      }
+      if (isPdf) {
+        iconEdges.push({
+          id: `${node.id}-empty`,
+          source: node.id,
+          target: node.data.name + "-name-node",
+          type: "tooltipEdge",
+          data: {
+            name: node?.data?.name,
+            content: node?.data?.content,
+            isOnlyOne: true,
+            isPdf: true
+          },
+          targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
+        });
+        mandatoryNodes.push(`${node.data.name}-name-node`);
+        return [{
+          id: node.data.name + "-name-node",
+          type: "nameNode",
+          data: {
+            name: node?.data?.name,
+            content: node?.data?.content,
+            icon: node.data?.type,
+            backgroundColor: node?.data?.activeColour,
+            iconColor: node?.data?.hoverColor,
+            isPdf: true,
+            t: t
+          },
+          position: positionDataNodes({
+            isLeftSide: node.data.order % 2 !== 0,
+            isAboveMainNode: node.data.order <= 2,
+            iconNode: node,
+            isPdf: true,
+            index: 0,
+            total: 1,
+            mainNode,
+            type: "nameNode",
+            hasContent: node?.data?.content !== undefined && node?.data?.content !== null ? true : false
+          })
+        }];
+      }
+      return children.map((child, index) => {
+        iconEdges.push({
+          id: `${node.id}-${child.id}`,
+          source: node.id,
+          target: `${child.id}-${iconNodeId}`,
+          type: "tooltipEdge",
+          data: {
+            title: child.name,
+            isOnlyOne: children.length === 1,
+            value: child.value,
+            tooltipHeader: child.tooltipHeader,
+            tooltipLabel: child?.tooltipLabel || "Holding",
+            totalSources: child.totalSources || 0,
+            isPdf: isPdf
+          },
+          targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
+        });
+        const isLeftSide = node.data.order % 2 !== 0;
+        const isAboveMainNode = node.data.order <= 2;
+        if (isAboveMainNode) {
+          if (index >= children.length - 5) {
+            mandatoryNodes.push(`${child.id}-${iconNodeId}`);
+          }
+        } else {
+          if (index <= 5) {
+            mandatoryNodes.push(`${child.id}-${iconNodeId}`);
+          }
+        }
+        return {
+          id: `${child.id}-${iconNodeId}`,
+          type: child.type || "primaryNode",
+          data: {
+            name: child.name,
+            id: child.id,
+            country: child?.country,
+            totalSources: child.totalSources || 0,
+            onClick: child.onClick,
+            backgroundColor: child.backgroundColor || "#ade9e1",
+            iconColor: child.iconColor || "#08949a",
+            icon: child.icon || "UserCircle",
+            content: children.length,
+            isPdf: isPdf
+          },
+          position: positionDataNodes({
+            isLeftSide,
+            isAboveMainNode,
+            iconNode: node,
+            index,
+            total,
+            mainNode,
+            type: child.type || "primaryNode",
+            hasContent: node?.data?.content ? true : false,
+            isPdf: isPdf
+          })
+        };
+      });
+    });
+    const mainNodeEdges = (data?.children || []).map(child => {
+      return {
+        id: `${mainNode.id}-${child.id}`,
+        source: mainNode.id,
+        target: child.id,
+        sourceHandle: child.order % 2 !== 0 ? "left-handle-source" : "right-handle-source",
+        type: "default",
+        data: {
+          group: child.id,
+          type: "mainNode",
+          isPdf: isPdf
+        }
+      };
+    });
+    setMandatoryNodesToFit(() => {
+      setNodes([mainNode, ...iconNodes, ...dataNodes.flat()]);
+      setEdges([...mainNodeEdges, ...iconEdges]);
+      return mandatoryNodes;
+    });
+  }, [reactFlowWrapper.current, JSON.stringify(data), JSON.stringify(selectedIconNodes), isAllOpenDefault, isSelectable, isChanged, emptyString]);
+  return /*#__PURE__*/jsxRuntime.jsx(BaseGraph, {
+    nodes: nodes,
+    mandatoryNodesToFit: mandatoryNodesToFit,
+    edges: edges,
+    maxZoom: maxZoom,
+    withDuration: true,
+    minZoom: minZoom,
+    setViewport: setViewport,
+    getViewport: getViewport,
+    centerFlow: () => {
+      fitView({
+        padding: 0.1,
+        nodes: mandatoryNodesToFit,
+        duration: 300
+      });
+    },
+    ref: reactFlowWrapper,
+    isPdf: isPdf
+  });
+}
+var StakeholderMappings$1 = withProvider(StakeholderMappings);
+
+const Governance = ({
+  selectedPartners = {},
+  operatorData = {},
+  t = () => {},
+  id,
+  options = {},
+  goTo = () => {}
+}) => {
+  const defaultFetchConfig = React.useMemo(() => {
+    return {
+      basepath: "analytics",
+      url: "/widgets/information-map-graph",
+      filters: {
+        datastakeId: id,
+        sources: selectedPartners?.partners || [],
+        coreSubject: "stakeholder"
+      },
+      defaultData: {},
+      stop: selectedPartners?.loading
+    };
+  }, [selectedPartners]);
+  const {
+    data,
+    loading
+  } = useWidgetFetch({
+    config: defaultFetchConfig
+  });
+  const graphData = React.useMemo(() => {
+    return getGovernanceData({
+      data,
+      operatorData,
+      id,
+      options,
+      t,
+      goTo,
+      selectedPartners
+    });
+  }, [data, operatorData, options, t]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    loading: loading,
+    title: t("Governance"),
+    className: "with-border-header no-p-body",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        height: 600
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMappings$1, {
+        data: graphData,
+        maxZoom: 1.1,
+        t: t,
+        isSelectable: true,
+        isAllOpenDefault: true
+      })
+    })
+  });
+};
+
+const OperatorSummary = ({
+  hasSelect = false,
+  loading = false,
+  getSingleData = () => {},
+  getMultipleData = () => {},
+  data = [],
+  id = '',
+  storageKey = '',
+  isPdf = false,
+  params = {},
+  partners = [],
+  selectedPartners = {},
+  user = {},
+  t = () => {},
+  theme = {},
+  service,
+  options = {},
+  goTo = () => {},
+  getRedirectLink = () => {},
+  goBack = () => {},
+  onIdChange = () => {}
+}) => {
+  const {
+    selectedItem,
+    setSelectedItem,
+    dataOptions,
+    search,
+    debouncedSearch,
+    onSearch,
+    setSearch,
+    setDebouncedSearch,
+    sourceOptions,
+    setSelectedPartners,
+    singleItemData,
+    loading: loadingData
+  } = useSummary({
+    getOne: getSingleData,
+    getMultiple: getMultipleData,
+    id,
+    hasSelect,
+    storageKey,
+    data,
+    isPdf: false,
+    params,
+    partners,
+    selectedPartners,
+    user,
+    t,
+    theme,
+    service,
+    onIdChange
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
+    header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
+      title: t('Operator Summary'),
+      className: "with-border-header h-w-btn-header no-px-body",
+      goBackTo: !hasSelect && goBack,
+      addedHeaderFirst: true,
+      actionButtons: [{
+        tooltip: t("Details"),
+        icon: "FileEdit",
+        onClick: () => {
+          goTo(getRedirectLink(`/app/view/operators/${params?.id ? params?.id : selectedItem}`));
+        }
+      }, {
+        tooltip: t("Find Data"),
+        icon: "Search",
+        onClick: () => {},
+        disabled: true
+      }],
+      addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-row gap-4",
+        style: {
+          marginRight: 8
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
+          options: [...sourceOptions],
+          isAvatarGroup: true,
+          selectionType: "checkbox",
+          canUnselectLast: false,
+          onChange: selected => {
+            setSelectedPartners(prev => ({
+              ...prev,
+              partners: selected,
+              loading: false
+            }));
+          },
+          dropDownWidth: 200,
+          defaultSelected: (partners || []).map(p => p.id) || []
+        }, partners?.length)
+      })
+    }),
+    children: [hasSelect && /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        showSearch: true,
+        debounceTimeout: 300,
+        onSearch: onSearch,
+        isSingle: true,
+        style: {
+          height: "40px",
+          width: "100%"
+        },
+        value: selectedItem,
+        onChange: setSelectedItem,
+        options: dataOptions,
+        filterOption: false,
+        loading: loading,
+        notFoundContent: loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Spin, {
+          size: "small"
+        }) : null
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(KeyInformation, {
+      options: options,
+      selectedPartners: selectedPartners,
+      t: t,
+      id: params?.id || selectedItem,
+      data: hasSelect ? singleItemData : data,
+      loading: loading
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(InformationAvailability, {
+        selectedPartners: selectedPartners,
+        t: t,
+        id: params?.id || selectedItem
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(TradeRelationships, {
+        selectedPartners: selectedPartners,
+        t: t,
+        id: params?.id || selectedItem,
+        options: options,
+        goTo: goTo,
+        getRedirectLink: getRedirectLink,
+        operatorData: hasSelect ? singleItemData : data
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(Governance, {
+        selectedPartners: selectedPartners,
+        t: t,
+        id: params?.id || selectedItem,
+        options: options,
+        goTo: goTo,
+        getRedirectLink: getRedirectLink,
+        operatorData: hasSelect ? singleItemData : data
+      })
+    })]
+  });
+};
+
+styled__default["default"].div`
+	max-width: calc(100% - 48px);
+	margin-left: var(--size-lg);
+	overflow: hidden;
+
+	.daf-table {
+		padding: 0px;
+		margin-top: 0px;
+
+		.ant-tag {
+			text-align: center;
+		}
+	}
+
+	.daf-select-filters .filters {
+		padding-top: 16px;
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	.daf-table {
+		padding-top: 16px;
+	}
+`;
+({
+  size: PropTypes__default["default"].any,
+  maxHeight: PropTypes__default["default"].number,
+  dataSource: PropTypes__default["default"].array,
+  columns: PropTypes__default["default"].object,
+  pagination: PropTypes__default["default"].any
+});
+
+({
+  data: PropTypes__default["default"].array.isRequired,
+  limit: PropTypes__default["default"].number
+});
+
+({
+  content: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOf(['large', 'middle', 'small']),
+  type: PropTypes__default["default"].oneOf(['dashed', 'default', 'ghost', 'link', 'primary', 'text']),
+  icon: PropTypes__default["default"].node,
+  onClick: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
+  loading: PropTypes__default["default"].bool,
+  title: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
+});
+
+({
+  onClick: PropTypes__default["default"].func,
+  isActive: PropTypes__default["default"].bool,
+  children: PropTypes__default["default"].any,
+  className: PropTypes__default["default"].string
+});
+
+styled__default["default"].div`
+  .ant-btn {
+    border-radius: 100px 100px 100px 0;
+    padding: 10px;
+    height: fit-content;
+    font-size: var(--size);
+    line-height: var(--size-lg);
+    font-weight: 400;
+    width: 100%;
+
+    @media (${MOBILE_WIDTH}) {
+      padding: 0.8rem 2.625rem;
+    }
+
+    &.normal-br {
+      border-radius: 8px;
+    }
+
+    &.ant-btn-primary {
+      background: var(--color-primary-70);
+
+      &[disabled] {
+        opacity: 0.6;
+        color: white;
+      }
+    }
+
+    &.ant-btn-dark-primary {
+      background: #193E61;
+      color: white;
+    }
+
+    &.ant-btn-default {
+      color: var(--color-primary-70);
+      border: 1.5px solid var(--color-primary-70);
+
+      &.default {
+        color: #1F2A37;
+        border: 1.5px solid #E5E7EB;
+      }
+    }
+
+    &.cancel {
+      background: #1F4A72;
+      color: white;
+      border-color: transparent;
+    }
+
+    &.blue-color {
+      color: var(--color-primary-70);
+      border-color: var(--color-primary-70);
+    }
+  }
+`;
+
+styled__default["default"].div`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	padding: 4px;
+	max-width: 100%;
+
+	overflow: hidden;
+	white-space: nowrap;
 	text-overflow: ellipsis;
 
 	> svg {
@@ -37911,12 +39795,6 @@ styled__default["default"].div`
   }
 `;
 
-({
-  countryName: PropTypes__default["default"].string.isRequired,
-  code: PropTypes__default["default"].string.isRequired,
-  hasTooltip: PropTypes__default["default"].bool
-});
-
 const getKeyIndicatorsRowConfig = ({
   t,
   data = {}
@@ -38456,11 +40334,435 @@ const RestorationActivitySummary = ({
   });
 };
 
+function getKeyIndicatorsConfig({
+  t,
+  data
+}) {
+  return [{
+    label: t("Extraction Methods"),
+    render: () => {
+      if (!data?.extractionPoints?.length) {
+        return "-";
+      }
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap"
+        },
+        children: data?.extractionPoints?.map(method => {
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+            style: {
+              marginBottom: 8
+            },
+            children: method
+          }, method);
+        })
+      });
+    }
+  }, {
+    label: t("Products"),
+    render: () => {
+      if (data?.productsOfLocation?.length === 0) {
+        return "-";
+      }
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap"
+        },
+        children: data?.productsOfLocation?.map(product => {
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+            style: {
+              marginBottom: 8
+            },
+            color: getTagColor(product),
+            children: product
+          }, product);
+        })
+      });
+    }
+  }, {
+    label: t("Number of Workers on Site"),
+    render: () => {
+      if (!data.workers) {
+        return "-";
+      }
+      return data.workers;
+    }
+  }];
+}
+
+const MineSiteDetails = ({
+  locationData = {},
+  loading = false,
+  t = () => {},
+  options = {}
+}) => {
+  const data = React.useMemo(() => {
+    return {
+      extractionPoints: (locationData?.extractionMethod || []).map(method => {
+        const _method = options?.extractionMethodsOptions?.find(option => option.value === method)?.label;
+        return _method;
+      }),
+      products: ((locationData?.products || []).map(product => product.typeOfProduct) || []).map(product => {
+        const _product = options?.minerals?.find(option => option.value === product)?.label;
+        return _product;
+      }),
+      workers: locationData?.totalNumberOfWorkers || 0
+    };
+  }, [locationData, options]);
+  const config = React.useMemo(() => getKeyIndicatorsConfig({
+    t,
+    data
+  }), [t, data]);
+  return /*#__PURE__*/jsxRuntime.jsx(KeyIndicatorsWidget, {
+    title: t("Mine Site Details"),
+    className: "value-center small-content row-content-col",
+    config: config,
+    loading: loading,
+    widgetClassName: "custom-width-b"
+  });
+};
+
+const LocationMap = ({
+  selectedPartners = {},
+  t = () => {},
+  params,
+  locationData = {},
+  loading = false
+}) => {
+  const data = React.useMemo(() => {
+    return {
+      gps: locationData?.gps || {},
+      name: locationData?.name || "",
+      admin_level_01: locationData?.linking?.SCL?.[locationData?.administrativeLevel1]?.name || "",
+      admin_level_02: locationData?.linking?.SCL?.[locationData?.administrativeLevel2]?.name || "",
+      country: locationData?.country
+    };
+  }, [locationData]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Location"),
+    className: "no-px no-pb-body overflow-hidden",
+    loading: loading,
+    children: /*#__PURE__*/jsxRuntime.jsx(Map$1, {
+      showSider: false,
+      primaryLink: true,
+      mapConfig: {
+        maxZoom: 10
+      },
+      type: "location",
+      data: [data],
+      renderTooltip: () => {
+        data?.country;
+        const adminLevel1Label = t("Province");
+        const adminLevel2Label = t("Territory");
+        return [{
+          label: t(adminLevel1Label),
+          value: data?.admin_level_01 || "--"
+        }, {
+          label: t(adminLevel2Label),
+          value: data?.admin_level_02 || "--"
+        }];
+      }
+    })
+  });
+};
+
+const IconNodesConfig = {
+  operators: {
+    name: "nashiriki::Operators",
+    icon: "Worker",
+    order: 1,
+    emptyName: "no-operators"
+  },
+  traders: {
+    name: "nashiriki::Traders",
+    icon: "Handshake",
+    order: 2,
+    emptyName: "no-traders"
+  },
+  government: {
+    name: "nashiriki::Government",
+    icon: "KYC",
+    order: 3,
+    emptyName: "no-government"
+  },
+  other: {
+    name: "nashiriki::Other",
+    icon: "CivilSociety",
+    order: 4,
+    emptyName: "no-other"
+  }
+};
+
+const getStakeholderMappingData = ({
+  data,
+  locationData,
+  id,
+  options,
+  t,
+  goTo,
+  selectedPartners
+}) => {
+  const _data = data;
+  return {
+    id: id,
+    name: locationData?.name || "",
+    country: {
+      label: options?.countries?.find(country => country.value === locationData?.country)?.label || "",
+      value: (locationData?.country || "").toLowerCase() || ""
+    },
+    onClick: () => goTo(`/app/view/production-sites/${id}`),
+    totalSources: selectedPartners?.partners?.length || 0,
+    backgroundColor: "#FFD6E7",
+    iconColor: "#C41D7F",
+    icon: "DashboardLocations",
+    children: Object.keys(_data)?.map((key, index) => {
+      return {
+        id: key,
+        name: t(IconNodesConfig[key]?.name),
+        icon: IconNodesConfig[key]?.icon,
+        order: IconNodesConfig[key]?.order || index + 1,
+        activeColour: "#b6f5ec",
+        iconHoverColor: "#fff",
+        hoverColor: "#36cfca",
+        content: _data[key].length,
+        emptyName: IconNodesConfig[key]?.emptyName ? t(`nashiriki::${IconNodesConfig[key]?.emptyName}`) : undefined,
+        children: (_data[key] || [])?.map(child => {
+          return {
+            id: child?.datastakeId || "",
+            name: child?.name || "",
+            country: {
+              label: options?.countries?.find(country => country.value === child?.country)?.label || "",
+              value: child?.country ? child?.country?.toLowerCase() : ""
+            },
+            icon: "DashboardStakeholder",
+            onClick: () => {
+              if (child?.type === "operator") {
+                goTo(`/app/summary/operators/${child.datastakeId}`);
+                return;
+              }
+              goTo(`/app/view/stakeholders/${child.datastakeId}`);
+            },
+            totalSources: child?.sources || 0,
+            tooltipHeader: t("nashiriki::link-details"),
+            tooltipLabel: t("nashiriki::sources-reporting"),
+            value: child?.sources || 0
+          };
+        })
+      };
+    })
+  };
+};
+
+const StakeholderMapping = ({
+  t = () => {},
+  id,
+  options = {},
+  goTo = () => {},
+  selectedPartners = {},
+  locationData = {}
+}) => {
+  const defaultFilter = React.useMemo(() => {
+    return {
+      basepath: "analytics",
+      url: "/widgets/information-map-graph",
+      defaultData: [],
+      stop: selectedPartners?.loading,
+      filters: {
+        datastakeId: id,
+        sources: selectedPartners?.partners || [],
+        coreSubject: "location",
+        filterBySources: false,
+        metrics: {
+          operator: ['operator'],
+          government: ['custom', 'governance'],
+          trader: ['trade'],
+          other: ['civilSociety', 'international']
+        }
+      }
+    };
+  }, [selectedPartners, id]);
+  const {
+    data,
+    loading
+  } = useWidgetFetch({
+    config: defaultFilter
+  });
+  const graphData = React.useMemo(() => {
+    return getStakeholderMappingData({
+      data,
+      locationData,
+      id,
+      options,
+      t,
+      goTo,
+      selectedPartners
+    });
+  }, [data, locationData, id, options, t, goTo, selectedPartners]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    loading: loading,
+    title: t("Stakeholder Mapping"),
+    className: "with-border-header no-px no-p-body",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        height: 600
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMappings$1, {
+        data: graphData,
+        t: t
+      })
+    })
+  });
+};
+
+const MineSummary = ({
+  hasSelect = false,
+  loading = false,
+  getSingleData = () => {},
+  getMultipleData = () => {},
+  data = [],
+  id = '',
+  storageKey = '',
+  isPdf = false,
+  params = {},
+  partners = [],
+  selectedPartners = {},
+  user = {},
+  t = () => {},
+  theme = {},
+  service,
+  options = {},
+  goTo = () => {},
+  getRedirectLink = () => {},
+  goBack = () => {},
+  onIdChange = () => {}
+}) => {
+  const {
+    selectedItem,
+    setSelectedItem,
+    dataOptions,
+    search,
+    debouncedSearch,
+    onSearch,
+    setSearch,
+    setDebouncedSearch,
+    sourceOptions,
+    setSelectedPartners,
+    singleItemData,
+    loading: loadingData
+  } = useSummary({
+    getOne: getSingleData,
+    getMultiple: getMultipleData,
+    id,
+    hasSelect,
+    storageKey,
+    data,
+    isPdf: false,
+    params,
+    partners,
+    selectedPartners,
+    user,
+    t,
+    theme,
+    service,
+    onIdChange
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
+    header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
+      title: t('Mine Summary'),
+      className: "with-border-header h-w-btn-header no-px-body",
+      goBackTo: !hasSelect && goBack,
+      addedHeaderFirst: true,
+      actionButtons: [{
+        tooltip: t("Details"),
+        icon: "FileEdit",
+        onClick: () => {
+          goTo(getRedirectLink(`/app/view/production-sites/${params?.id ? params?.id : selectedItem}`));
+        }
+      }, {
+        tooltip: t("Find Data"),
+        icon: "Search",
+        onClick: () => {},
+        disabled: true
+      }],
+      addedHeader: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-row gap-4",
+        style: {
+          marginRight: 8
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
+          options: [...sourceOptions],
+          isAvatarGroup: true,
+          selectionType: "checkbox",
+          canUnselectLast: false,
+          onChange: selected => {
+            setSelectedPartners(prev => ({
+              ...prev,
+              partners: selected,
+              loading: false
+            }));
+          },
+          dropDownWidth: 200,
+          defaultSelected: (partners || []).map(p => p.id) || []
+        }, partners?.length)
+      })
+    }),
+    children: [hasSelect && /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        showSearch: true,
+        debounceTimeout: 300,
+        onSearch: onSearch,
+        isSingle: true,
+        style: {
+          height: "40px",
+          width: "100%"
+        },
+        value: selectedItem,
+        onChange: setSelectedItem,
+        options: dataOptions,
+        filterOption: false,
+        loading: loading,
+        notFoundContent: loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Spin, {
+          size: "small"
+        }) : null
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("section", {
+      children: [/*#__PURE__*/jsxRuntime.jsx(MineSiteDetails, {
+        locationData: hasSelect ? singleItemData : data,
+        loading: loadingData,
+        t: t,
+        options: options
+      }), /*#__PURE__*/jsxRuntime.jsx(LocationMap, {
+        selectedPartners: selectedPartners,
+        t: t,
+        params: params,
+        locationData: hasSelect ? singleItemData : data,
+        loading: loadingData
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(InformationAvailability, {
+        selectedPartners: selectedPartners,
+        t: t,
+        id: params?.id || selectedItem
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMapping, {
+        selectedPartners: selectedPartners,
+        t: t,
+        id: params?.id || selectedItem,
+        locationData: hasSelect ? singleItemData : data
+      })
+    })]
+  });
+};
+
 exports.ActivitiesTable = ActivitiesTable;
 exports.DocumentsTable = DocumentsTable;
 exports.EventsTable = EventsTable;
 exports.IncidentsTable = IncidentsTable;
 exports.LocationsTable = LocationsTable;
+exports.MineSummary = MineSummary;
 exports.OperatorSummary = OperatorSummary;
 exports.OperatorsTable = OperatorsTable;
 exports.ProductionSitesTable = ProductionSitesTable;