datastake-daf 0.6.815 → 0.6.816

package/dist/pages/index.js

@@ -16,7 +16,6 @@ var reactCollapsed = require('react-collapsed');
 var L$1 = require('leaflet');
 var countryCityLocation = require('country-city-location');
 var client = require('react-dom/client');
-var reactDom = require('react-dom');
 require('@elfalem/leaflet-curve');
 var react = require('@xyflow/react');
 var g2plot = require('@antv/g2plot');
@@ -9402,8 +9401,8 @@ function LocationIcon({
   activeMarker,
   setActiveMarker
 }) {
+  const rootsMapRef = React.useRef(new Map());
   const markersRef = React.useRef([]);
-  const [portalContainers, setPortalContainers] = React.useState([]);
   const isSelected = selectedMarkersId.includes(data.datastakeId);
   const Marker = React.useMemo(() => {
     if (isMineSite(data.type)) {
@@ -9411,7 +9410,7 @@ function LocationIcon({
     }
     return VillageMarker;
   }, [data.type]);
-  React.useState(false);
+  const [isHovering, setIsHovering] = React.useState(false);
   const linkedNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
@@ -9476,32 +9475,31 @@ function LocationIcon({
     return nodes;
   }, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
   const stakeholdersOfLocation = React.useMemo(() => {
-    return (data?.stakeholders || []).filter(stakeholder => {
-      if (!stakeholder.links || stakeholder.links.length === 0) {
-        return true;
-      }
-      const locationsWithThisStakeholder = allData.filter(loc => loc.stakeholders?.some(s => s.datastakeId === stakeholder.datastakeId)).map(loc => loc.datastakeId);
-      const primaryLocation = locationsWithThisStakeholder.sort()[0];
-      return data.datastakeId === primaryLocation;
-    });
-  }, [data.stakeholders, data.datastakeId, allData, zoom]);
+    return data?.stakeholders || [];
+  }, [data.stakeholders, zoom]);
   React.useEffect(() => {
-    markersRef.current.forEach(marker => {
-      if (mapRef && mapRef.hasLayer(marker)) {
+    const currentRoots = rootsMapRef.current;
+    const currentMarkers = markersRef.current;
+    currentMarkers.forEach(marker => {
+      if (mapRef.hasLayer(marker)) {
         mapRef.removeLayer(marker);
       }
     });
+    currentRoots.forEach(root => {
+      root.unmount();
+    });
+    currentRoots.clear();
     markersRef.current = [];
-    setPortalContainers([]);
+
+    // Only create stakeholder markers if this location or any of its stakeholders are selected
     const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => selectedMarkersId.includes(stk.datastakeId));
     if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
       return;
     }
 
-    // Create markers and store their container references
-    const containers = [];
+    // Create new markers only when selected
     stakeholdersOfLocation.forEach((stakeholder, index) => {
-      const markerId = `${data.datastakeId}-${stakeholder.datastakeId}`;
+      const markerId = `${stakeholder.datastakeId}`;
       const {
         x,
         y,
@@ -9524,29 +9522,41 @@ function LocationIcon({
       const pathLocLatLng = mapRef.layerPointToLatLng(pathLocPoint);
       const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
       const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
-
-      // Create container div
-      const containerDiv = document.createElement('div');
-      containerDiv.id = markerId;
       const marker = L__namespace.marker(stakeholderLatLng, {
         icon: L__namespace.divIcon({
-          html: containerDiv.outerHTML,
+          html: `<div id="${markerId}"></div>`,
           className: "marker-chain",
           iconSize: iconSize
         })
       }).addTo(mapRef);
       markersRef.current.push(marker);
-
-      // Store container info for portal rendering
-      containers.push({
-        markerId,
-        stakeholder,
-        x,
-        y,
-        radius,
-        index,
-        isForceOpen
-      });
+      setTimeout(() => {
+        const div = document.getElementById(markerId);
+        if (div && !rootsMapRef.current.has(markerId)) {
+          const root = client.createRoot(div);
+          rootsMapRef.current.set(markerId, root);
+          root.render( /*#__PURE__*/jsxRuntime.jsx(StakeholderIcon$1, {
+            data: stakeholder,
+            zoom: zoom,
+            allData: allData,
+            link: link,
+            parentId: data.datastakeId,
+            renderTooltip: renderTooltip,
+            onClickLink: onClickLink,
+            selectedMarkersId: selectedMarkersId,
+            handleSelectMarker: handleSelectMarker,
+            mapRef: mapRef,
+            radius: radius,
+            index: index,
+            x: x,
+            y: y,
+            openPopupIdRef: openPopupIdRef,
+            polylinesRef: polylinesRef,
+            isForceOpen: isForceOpen,
+            activeMarker: activeMarker
+          }));
+        }
+      }, 0);
       setMapMarkers(prev => {
         const array = [...prev, {
           id: marker._leaflet_id,
@@ -9578,19 +9588,17 @@ function LocationIcon({
         animated: true
       });
     });
-
-    // Update portal containers after markers are created
-    setTimeout(() => {
-      setPortalContainers(containers);
-    }, 0);
     return () => {
       markersRef.current.forEach(marker => {
-        if (mapRef && mapRef.hasLayer(marker)) {
+        if (mapRef.hasLayer(marker)) {
           mapRef.removeLayer(marker);
         }
       });
+      rootsMapRef.current.forEach(root => {
+        root.unmount();
+      });
+      rootsMapRef.current.clear();
       markersRef.current = [];
-      setPortalContainers([]);
     };
   }, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
@@ -9674,81 +9682,57 @@ function LocationIcon({
       });
     });
   }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
-      content: renderTooltipJsx({
-        title: data.name,
-        subTitle: data.subTitle,
-        total: data.sources,
-        className: "pt-0 pb-0",
-        items: renderTooltip(data),
-        link,
-        onClickLink: () => onClickLink(data),
-        isNewTab: true
-      }),
-      getPopupContainer: triggerNode => {
-        const mapElement = document.getElementById("map");
-        return mapElement || triggerNode.parentElement || document.body;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+    content: renderTooltipJsx({
+      title: data.name,
+      subTitle: data.subTitle,
+      total: data.sources,
+      className: "pt-0 pb-0",
+      items: renderTooltip(data),
+      link,
+      onClickLink: () => onClickLink(data),
+      isNewTab: true
+    })
+    // open={
+    // 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
+    // 	isHovering
+    // }
+    ,
+    getPopupContainer: triggerNode => {
+      const mapElement = document.getElementById("map");
+      return mapElement || triggerNode.parentElement || document.body;
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        position: "relative",
+        display: "inline-block"
       },
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [(isSelected || selectedMarkersId.length === 0) && /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
-          position: "relative",
-          display: "inline-block"
+          position: "absolute",
+          bottom: "0",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "12px",
+          height: "6px",
+          background: "rgba(0,0,0,0.15)",
+          borderRadius: "50%",
+          filter: "blur(3px)"
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(Marker, {
+        isSelected: isSelected,
+        onClick: () => {
+          handleSelectMarker(data);
+          setActiveMarker(isSelected ? null : data);
         },
-        children: [(isSelected || selectedMarkersId.length === 0) && /*#__PURE__*/jsxRuntime.jsx("div", {
-          style: {
-            position: "absolute",
-            bottom: "0",
-            left: "50%",
-            transform: "translateX(-50%)",
-            width: "12px",
-            height: "6px",
-            background: "rgba(0,0,0,0.15)",
-            borderRadius: "50%",
-            filter: "blur(3px)"
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(Marker, {
-          isSelected: isSelected,
-          onClick: () => {
-            handleSelectMarker(data);
-            setActiveMarker(isSelected ? null : data);
-          },
-          zoom: zoom,
-          selectedMarkersId: selectedMarkersId
-        })]
-      })
-    }), portalContainers.map(({
-      markerId,
-      stakeholder,
-      x,
-      y,
-      radius,
-      index,
-      isForceOpen
-    }) => {
-      const container = document.getElementById(markerId);
-      if (!container) return null;
-      return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(StakeholderIcon$1, {
-        data: stakeholder,
         zoom: zoom,
-        allData: allData,
-        link: link,
-        parentId: data.datastakeId,
-        renderTooltip: renderTooltip,
-        onClickLink: onClickLink,
-        selectedMarkersId: selectedMarkersId,
-        handleSelectMarker: handleSelectMarker,
-        mapRef: mapRef,
-        radius: radius,
-        index: index,
-        x: x,
-        y: y,
-        openPopupIdRef: openPopupIdRef,
-        polylinesRef: polylinesRef,
-        isForceOpen: isForceOpen,
-        activeMarker: activeMarker
-      }, markerId), container);
-    })]
+        onMouseEnter: () => setIsHovering(true),
+        onMouseLeave: () => {
+          setIsHovering(false);
+        },
+        selectedMarkersId: selectedMarkersId
+      })]
+    })
   });
 }
 
@@ -12768,7 +12752,8 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
 
 const Container$1 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
-	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
+	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'};
+	overflow: ${props => props.style?.overflow || 'visible'};
 `;
 
 const useLegendConfig = ({
@@ -14176,7 +14161,7 @@ const getTabs = t => {
     label: t("Events")
   }];
 };
-const getFiltersConfig$c = ({
+const getFiltersConfig$b = ({
   t,
   filters,
   activeTab,
@@ -14411,7 +14396,7 @@ function MineSites({
     config: dataFetchConfig
   });
   const tabs = React.useMemo(() => getTabs(t), [t]);
-  const filtersConfig = React.useMemo(() => getFiltersConfig$c({
+  const filtersConfig = React.useMemo(() => getFiltersConfig$b({
     t,
     filters,
     options,
@@ -15564,12 +15549,7 @@ function DAFTable({
   doEmptyRows,
   ...rest
 }) {
-  const source = React.useMemo(() => {
-    if (data && Array.isArray(data)) {
-      return data;
-    }
-    return [];
-  }, [data]);
+  const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
   React.useEffect(() => {
@@ -15614,13 +15594,11 @@ function DAFTable({
       }
     } : filtersConfig;
   }, [sourcesKey, sources, filtersConfig, t]);
-
-  // useEffect(() => {
-  //   if (data && Array.isArray(data)) {
-  //     setSource(data);
-  //   }
-  // }, [data, data.length]);
-
+  React.useEffect(() => {
+    if (data && Array.isArray(data)) {
+      setSource(data);
+    }
+  }, [data, data.length]);
   const paginationPageSize = pagination?.pageSize;
   const dataSource = React.useMemo(() => {
     const pageSize = paginationPageSize ? paginationPageSize : source.length > 10 ? source.length : 10;
@@ -16110,7 +16088,7 @@ const NavigationAction = ({
   });
 };
 
-const getColumns$h = ({
+const getColumns$g = ({
   t,
   data,
   user,
@@ -16236,7 +16214,7 @@ function OrganisationInformation({
     });
   }, [organisationInfo, data]);
   const columns = React.useMemo(() => {
-    return getColumns$h({
+    return getColumns$g({
       t,
       data: tableData,
       user,
@@ -16367,7 +16345,7 @@ const Style$8 = styled__default["default"].div`
   }
 `;
 
-const getColumns$g = ({
+const getColumns$f = ({
   t = () => {},
   options = {},
   user = {},
@@ -16524,7 +16502,7 @@ function ProductionSites({
     return productionSites?.length > 5 ? ComponentWithFocus : "div";
   }, [productionSites]);
   const columns = React.useMemo(() => {
-    return getColumns$g({
+    return getColumns$f({
       t,
       options,
       user,
@@ -16758,7 +16736,7 @@ const getAdminLevelName = (data, level) => {
   return entry?.name || "-";
 };
 
-const getColumns$f = ({
+const getColumns$e = ({
   t,
   activeTab,
   options,
@@ -17052,7 +17030,7 @@ function AssociatedInformation$1({
   console.log({
     data
   });
-  const columns = React.useMemo(() => getColumns$f({
+  const columns = React.useMemo(() => getColumns$e({
     t,
     isMonitoring: false,
     activeTab,
@@ -17436,7 +17414,7 @@ const getPartnershipTypes = t => {
   }];
 };
 
-const getColumns$e = ({
+const getColumns$d = ({
   t,
   accept,
   decline,
@@ -40822,7 +40800,7 @@ const PartnersTable = ({
     setTotalRequests,
     t
   });
-  const columns = React.useMemo(() => getColumns$e({
+  const columns = React.useMemo(() => getColumns$d({
     t,
     accept,
     decline,
@@ -41059,7 +41037,7 @@ const Create = ({
   });
 };
 
-const getFiltersConfig$b = ({
+const getFiltersConfig$a = ({
   t
 }) => {
   return {
@@ -41090,7 +41068,7 @@ const getFiltersConfig$b = ({
     }
   };
 };
-const getFilterOptions$b = (options, t) => {
+const getFilterOptions$a = (options, t) => {
   const {
     countries,
     category,
@@ -41101,13 +41079,13 @@ const getFilterOptions$b = (options, t) => {
     category: categoriesOptions || category || []
   };
 };
-const formConfig$9 = {
+const formConfig$8 = {
   namespace: 'stakeholders',
   view: 'scoping',
   scope: 'create',
   formType: 'stakeholder'
 };
-const viewConfig$9 = {
+const viewConfig$8 = {
   title: "Stakeholders",
   createTitle: "Create Stakeholder"
 };
@@ -41194,7 +41172,7 @@ function sourceAvatarConfig(items, user, applications) {
   });
 }
 
-const getColumns$d = ({
+const getColumns$c = ({
   t,
   goTo,
   user,
@@ -41247,8 +41225,7 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const categoriesOptions = [...(options?.categoriesOptions || []), ...(options?.category || [])];
-    const category = findOptions(v, categoriesOptions);
+    const category = findOptions(v, options?.categoriesOptions);
     return category ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: category,
       children: category
@@ -41265,8 +41242,7 @@ const getColumns$d = ({
         className: "daf-default-cell"
       });
     }
-    const subCategoriesOptions = [...(options?.subCategoriesOptions || []), ...(options?.subCategory || [])];
-    const subCategory = findOptions(v, subCategoriesOptions);
+    const subCategory = findOptions(v, options?.subCategoriesOptions);
     return subCategory ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: subCategory,
       children: subCategory
@@ -41301,7 +41277,7 @@ const getColumns$d = ({
       });
     }
     if (!val || val?.length === 0) {
-      return "-";
+      return "--";
     }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
@@ -41350,7 +41326,7 @@ const getColumns$d = ({
   }
 }].filter(column => column.show !== false);
 
-const getFiltersConfig$a = ({
+const getFiltersConfig$9 = ({
   t
 }) => {
   return {
@@ -41518,7 +41494,7 @@ const getFiltersConfig$a = ({
     }
   };
 };
-const getFilterOptions$a = (options, t) => {
+const getFilterOptions$9 = (options, t) => {
   const {
     statusOptions,
     categoryOptions,
@@ -41540,13 +41516,13 @@ const getFilterOptions$a = (options, t) => {
   };
   return _default;
 };
-const formConfig$8 = {
+const formConfig$7 = {
   namespace: 'OPERATOR',
   view: ['scoping', 'new'],
   scope: 'global',
   formType: 'operator'
 };
-const viewConfig$8 = {
+const viewConfig$7 = {
   title: "Operators",
   createTitle: "Create Operator"
 };
@@ -41587,7 +41563,7 @@ const renderStatusTag = ({
   }
 };
 
-const getColumns$c = ({
+const getColumns$b = ({
   t,
   goTo,
   user,
@@ -41733,9 +41709,6 @@ const getColumns$c = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -41797,7 +41770,7 @@ const getColumns$c = ({
   }
 }].filter(column => column.show !== false);
 
-const getFiltersConfig$9 = ({
+const getFiltersConfig$8 = ({
   t
 }) => {
   return {
@@ -41938,7 +41911,7 @@ const getFiltersConfig$9 = ({
     }
   };
 };
-const getFilterOptions$9 = (options, t) => {
+const getFilterOptions$8 = (options, t) => {
   const {
     statusOptions,
     categoryOptions,
@@ -41965,18 +41938,18 @@ const getFilterOptions$9 = (options, t) => {
   };
   return _default;
 };
-const formConfig$7 = {
+const formConfig$6 = {
   namespace: 'WORKERS',
   view: ['scoping', 'new'],
   scope: 'global',
   formType: 'worker'
 };
-const viewConfig$7 = {
+const viewConfig$6 = {
   title: "Workers",
   createTitle: "Create Worker"
 };
 
-const getColumns$b = ({
+const getColumns$a = ({
   t,
   goTo,
   user,
@@ -42106,9 +42079,6 @@ const getColumns$b = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -42155,7 +42125,7 @@ const getColumns$b = ({
   }
 }].filter(column => column.show !== false);
 
-const getFiltersConfig$8 = ({
+const getFiltersConfig$7 = ({
   t
 }) => {
   return {
@@ -42307,7 +42277,7 @@ const getFiltersConfig$8 = ({
     }
   };
 };
-const getFilterOptions$8 = (options, t) => {
+const getFilterOptions$7 = (options, t) => {
   const {
     timeframe = [],
     status,
@@ -42333,13 +42303,13 @@ const getFilterOptions$8 = (options, t) => {
     }]
   };
 };
-const formConfig$6 = {
+const formConfig$5 = {
   namespace: 'event',
   view: 'scoping',
   scope: 'create',
   formType: 'event'
 };
-const viewConfig$6 = {
+const viewConfig$5 = {
   title: "Events",
   createTitle: "Create Event"
 };
@@ -42466,7 +42436,7 @@ MoreTags.propTypes = {
   limit: PropTypes__default["default"].number
 };
 
-const getColumns$a = ({
+const getColumns$9 = ({
   t,
   goTo,
   user,
@@ -42628,9 +42598,6 @@ const getColumns$a = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -42701,7 +42668,7 @@ const getColumns$a = ({
   }
 }].filter(column => column.show !== false);
 
-const getFiltersConfig$7 = ({
+const getFiltersConfig$6 = ({
   t
 }) => {
   return {
@@ -42873,7 +42840,7 @@ const getFiltersConfig$7 = ({
     }
   };
 };
-const getFilterOptions$7 = (options, t) => {
+const getFilterOptions$6 = (options, t) => {
   const {
     timeframe = [],
     statusOptions,
@@ -42906,13 +42873,13 @@ const getFilterOptions$7 = (options, t) => {
   };
   return _default;
 };
-const formConfig$5 = {
+const formConfig$4 = {
   namespace: 'corrective-actions',
   view: 'corrective-actions',
   scope: 'createActivity',
   formType: 'activity'
 };
-const viewConfig$5 = {
+const viewConfig$4 = {
   title: "Activities",
   createTitle: "Create Activity"
 };
@@ -42926,7 +42893,7 @@ const getEventCategoryBySubject = (eventCategoryObject, subject, isSingular = fa
   return eventCategoryObject[key] || null;
 };
 
-const getColumns$9 = ({
+const getColumns$8 = ({
   t,
   goTo,
   user,
@@ -43073,9 +43040,6 @@ const getColumns$9 = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -43139,7 +43103,7 @@ const getColumns$9 = ({
   }
 }].filter(column => column.show !== false);
 
-const getFiltersConfig$6 = ({
+const getFiltersConfig$5 = ({
   t
 }) => {
   return {
@@ -43310,7 +43274,7 @@ const getFiltersConfig$6 = ({
     }
   };
 };
-const getFilterOptions$6 = (options, t) => {
+const getFilterOptions$5 = (options, t) => {
   const {
     timeframe = [],
     statusOptions,
@@ -43343,18 +43307,18 @@ const getFilterOptions$6 = (options, t) => {
   };
   return _default;
 };
-const formConfig$4 = {
+const formConfig$3 = {
   namespace: 'incident',
   view: 'incident',
   scope: 'createIncident',
   formType: 'incident'
 };
-const viewConfig$4 = {
+const viewConfig$3 = {
   title: "Incidents",
   createTitle: "Create Incident"
 };
 
-const getColumns$8 = ({
+const getColumns$7 = ({
   t,
   goTo,
   user,
@@ -43501,423 +43465,6 @@ const getColumns$8 = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
-    const sources = sourceAvatarConfig(val, user, applications);
-    return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
-      items: sources
-    });
-  }
-}, {
-  title: t("Status"),
-  dataIndex: "status",
-  key: "status",
-  show: activeTab === "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
-    return renderStatusTag({
-      value: _val,
-      t
-    });
-  }
-}, {
-  title: t("Last Update"),
-  dataIndex: "updatedAt",
-  key: "updatedAt",
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  id: 'actions',
-  title: "",
-  width: 60,
-  render: (_, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const onClick = () => {
-      let link = `/app/view/${subject}/${all.datastakeId}`;
-      if (activeTab === "shared") {
-        link += `?sourceId=${all?.authorId?.id}`;
-      }
-      goTo(getRedirectLink(link));
-    };
-    return /*#__PURE__*/jsxRuntime.jsx(NavigationAction, {
-      onClick: onClick,
-      theme: theme
-    });
-  }
-}].filter(column => column.show !== false);
-
-const getFiltersConfig$5 = ({
-  t
-}) => {
-  return {
-    timeframe: {
-      type: "timeframe",
-      label: "Timeframe",
-      style: {
-        flex: 1
-      },
-      t: t
-    },
-    country: {
-      type: 'select',
-      label: 'Country',
-      placeholder: () => `${t('Filter by')} ${t('Country').toLowerCase()}`,
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    },
-    administrativeLevel1: {
-      type: 'ajaxSelect',
-      label: ({
-        t = s => s,
-        options = {},
-        filters = {},
-        language = 'en'
-      }) => {
-        const {
-          administrativeLevel1
-        } = options;
-        if (administrativeLevel1) {
-          if (options.country) {
-            const _item = administrativeLevel1[filters.country];
-            if (_item) {
-              if (_item[language]) {
-                return _item[language];
-              }
-            }
-          }
-        }
-        return t('Province');
-      },
-      placeholder: () => `${t('Filter by')} ${t('Province').toLowerCase()}`,
-      filters: data => ({
-        country: data.country,
-        level: 'level_1'
-      }),
-      show: data => !data.country,
-      disabled: data => !data.country,
-      mapper: {
-        label: "name",
-        value: "id"
-      },
-      method: 'getOptions',
-      entity: 'AdministrativeLevel',
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      }
-    },
-    administrativeLevel2: {
-      type: 'ajaxSelect',
-      label: ({
-        t = s => s,
-        options = {},
-        filters = {},
-        language = 'en'
-      }) => {
-        const {
-          administrativeLevel2
-        } = options;
-        if (administrativeLevel2) {
-          if (options.country) {
-            const _item = administrativeLevel2[filters.country];
-            if (_item) {
-              if (_item[language]) {
-                return _item[language];
-              }
-            }
-          }
-        }
-        return t('Province');
-      },
-      show: data => !(data.country && data.administrativeLevel1),
-      placeholder: () => `${t('Filter by')} ${t('Territory').toLowerCase()}`,
-      filters: data => ({
-        country: data.country,
-        level: 'level_2',
-        administrativeLevel1: data.administrativeLevel1
-      }),
-      disabled: data => !(data.country && data.administrativeLevel1),
-      mapper: {
-        label: "name",
-        value: "id"
-      },
-      method: 'getOptions',
-      entity: 'AdministrativeLevel',
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      }
-    },
-    eventCategory: {
-      type: 'select',
-      label: 'Category',
-      placeholder: () => `${t('Filter by')} ${t('Category').toLowerCase()}`,
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value,
-      filterOptions: val => {
-        if (val) {
-          const {
-            option,
-            filters
-          } = val;
-          if (filters && option) {
-            const {
-              filters: optionFilters
-            } = option;
-            if (Array.isArray(optionFilters) && optionFilters.length) {
-              const {
-                value,
-                condition
-              } = optionFilters[0];
-              if (condition === 'includes') {
-                return value.includes('corporation');
-              }
-            }
-          }
-        }
-        return true;
-      }
-    },
-    // positionInTheMineralSupplyChain: {
-    //   type: 'select',
-    //   label: 'Position',
-    //   placeholder: () => `${t('Filter by')} ${t('Position').toLowerCase()}`,
-    //   style: { flex: 1 },
-    //   labelStyle: { flex: 1 },
-    //   getLabel: (option) => option.label,
-    //   getValue: (option) => option.value,
-    // },
-    status: {
-      type: "select",
-      label: "Status",
-      placeholder: () => `${t("Filter by")} ${t("Status").toLowerCase()}`,
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        fley: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    }
-  };
-};
-const getFilterOptions$5 = (options, t) => {
-  const {
-    timeframe = [],
-    statusOptions,
-    categoryOptions,
-    countries,
-    subCategory,
-    category,
-    stakeholderCategoryOptions,
-    stakeholderSubCategoriesOptions,
-    administrativeLevel1,
-    administrativeLevel2,
-    positionInMineralSupplyChainOptions,
-    subCategoriesOptions,
-    eventCategoryOptions
-  } = options || {};
-  const _categoryOptions = (eventCategoryOptions || categoryOptions || [])?.map(item => ({
-    value: item.value,
-    label: typeof item.label === 'object' ? Object.values(item.label)[1] : item.label
-  }));
-  const _default = {
-    timeframe: timeframe,
-    status: getStatusOptions(t) || [],
-    eventCategory: _categoryOptions || [],
-    country: countries || [],
-    subCategory: subCategoriesOptions || [],
-    // category: category,
-    administrativeLevel1,
-    administrativeLevel2
-    // positionInTheMineralSupplyChain: positionInMineralSupplyChainOptions || [],
-  };
-  return _default;
-};
-const formConfig$3 = {
-  namespace: 'testimonials',
-  view: 'testimonials',
-  scope: 'create',
-  formType: 'testimonial'
-};
-const viewConfig$3 = {
-  title: "Testimonials",
-  createTitle: "New Testimonial"
-};
-
-const getColumns$7 = ({
-  t,
-  goTo,
-  user,
-  options,
-  activeTab,
-  getRedirectLink,
-  theme,
-  subject,
-  data,
-  applications
-}) => [{
-  dataIndex: 'datastakeId',
-  title: t('ID'),
-  ellipsis: true,
-  show: true,
-  key: "datastakeId",
-  sorter: () => 0 + 0,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
-}, {
-  dataIndex: 'name',
-  title: t('Title'),
-  ellipsis: true,
-  show: true,
-  key: "name",
-  sorter: () => 0 + 0,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
-}, {
-  title: t("type"),
-  dataIndex: "typeOfTestimonials",
-  key: "typeOfTestimonials",
-  sorter: () => 0 + 0,
-  show: true,
-  render: (title, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const type = findOptions(title, data?.options?.testimonialsType);
-    return type ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: type,
-      children: type
-    }) : '-';
-  },
-  ellipsis: true
-}, {
-  title: t("Date"),
-  dataIndex: "date",
-  key: "date",
-  sorter: () => 0 + 0,
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  dataIndex: 'mineSite',
-  title: t('Location'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-
-    // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
-    const mineSite = all?.location?.name;
-    return mineSite ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: mineSite,
-      children: mineSite
-    }) : '-';
-  }
-}, {
-  dataIndex: 'eventCategory',
-  title: t('Category'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const eventCategory = findOptions(v, data?.options?.eventCategoryOptions || data?.options?.categoryOptions);
-    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
-    return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: categoryValue,
-      children: categoryValue
-    }) : '-';
-  }
-}, {
-  title: t("Sources"),
-  dataIndex: "sources",
-  key: "sources",
-  show: activeTab !== "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -44157,9 +43704,6 @@ const getColumns$6 = ({
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
     const sources = sourceAvatarConfig(val, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
@@ -44623,19 +44167,16 @@ const getColumns$5 = ({
   }
 }, {
   title: t("Sources"),
-  dataIndex: "sources",
-  key: "sources",
+  dataIndex: 'sources',
+  ellipsis: true,
   show: activeTab !== "own",
-  render: (val, all) => {
+  render: (v, all) => {
     if (all.empty) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "daf-default-cell"
       });
     }
-    if (!val || val?.length === 0) {
-      return "-";
-    }
-    const sources = sourceAvatarConfig(val, user, applications);
+    const sources = sourceAvatarConfig(v, user, applications);
     return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
       items: sources
     });
@@ -44835,55 +44376,48 @@ const getColumns$4 = ({
 
 const FILTER_REGISTRY = {
   stakeholders: {
-    config: getFiltersConfig$b,
-    options: getFilterOptions$b,
-    formConfig: formConfig$9,
-    viewConfig: viewConfig$9,
-    columns: getColumns$d
-  },
-  workers: {
-    config: getFiltersConfig$9,
-    options: getFilterOptions$9,
-    formConfig: formConfig$7,
-    viewConfig: viewConfig$7,
-    columns: getColumns$b
-  },
-  operators: {
     config: getFiltersConfig$a,
     options: getFilterOptions$a,
     formConfig: formConfig$8,
     viewConfig: viewConfig$8,
     columns: getColumns$c
   },
-  events: {
+  workers: {
     config: getFiltersConfig$8,
     options: getFilterOptions$8,
     formConfig: formConfig$6,
     viewConfig: viewConfig$6,
     columns: getColumns$a
   },
-  activities: {
-    config: getFiltersConfig$7,
-    options: getFilterOptions$7,
-    formConfig: formConfig$5,
-    viewConfig: viewConfig$5,
-    columns: getColumns$9
+  operators: {
+    config: getFiltersConfig$9,
+    options: getFilterOptions$9,
+    formConfig: formConfig$7,
+    viewConfig: viewConfig$7,
+    columns: getColumns$b
   },
-  'corrective-actions': {
+  events: {
     config: getFiltersConfig$7,
     options: getFilterOptions$7,
     formConfig: formConfig$5,
     viewConfig: viewConfig$5,
     columns: getColumns$9
   },
-  incidents: {
+  activities: {
     config: getFiltersConfig$6,
     options: getFilterOptions$6,
     formConfig: formConfig$4,
     viewConfig: viewConfig$4,
     columns: getColumns$8
   },
-  testimonials: {
+  'corrective-actions': {
+    config: getFiltersConfig$6,
+    options: getFilterOptions$6,
+    formConfig: formConfig$4,
+    viewConfig: viewConfig$4,
+    columns: getColumns$8
+  },
+  incidents: {
     config: getFiltersConfig$5,
     options: getFilterOptions$5,
     formConfig: formConfig$3,
@@ -49422,17 +48956,10 @@ function VegetationWidget({
   ...props
 }) {
   let vegetationConfig = getVegetationConfig();
-
-  // Get all VEGETATION_KEYS values before filtering (needed for mapping check)
   const allVegetationKeys = vegetationConfig.map(item => item.key);
-
-  // Filter to show only specific keys if filterKeys is provided
   if (filterKeys && Array.isArray(filterKeys)) {
     vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
   }
-
-  // Map growthObservations to VEGETATION_KEYS
-  // Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
   const mappedGrowthObservations = Array.isArray(growthObservations) ? growthObservations.map(obs => {
     // First try to map from growthObservations format
     const mapped = GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS[obs];
@@ -51930,9 +51457,17 @@ const RadarChart = ({
         ...tooltipConfig
       },
       color: color || token.colorPrimary7,
+      paddingX: 60,
+      paddingY: 60,
       xAxis: {
         label: {
-          formatter: formattedXAxis
+          formatter: formattedXAxis,
+          offset: 15,
+          style: {
+            fontSize: 12,
+            fill: '#666',
+            textAlign: 'center'
+          }
         },
         line: null,
         tickLine: null,
@@ -52001,12 +51536,23 @@ const RadarChart = ({
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-1 flex-column justify-content-center",
+    style: {
+      overflow: 'visible'
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
+      style: {
+        paddingX: '30px',
+        overflow: 'visible',
+        width: '100%'
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
-        isPdf: isPdf
+        isPdf: isPdf,
+        style: {
+          paddingX: '30px'
+        }
       })
     }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
       items: legendItems,
@@ -57316,7 +56862,20 @@ const MonitoringScopeAndFindings = ({
   });
 };
 
-const COLORS$3 = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const VEGETATION_HEALTH_COLORS = {
+  healthy_leaves: '#6AD99E',
+  white_spots: '#E8F0F0',
+  yellowing_leaves: '#CDC14F',
+  black_spots: '#2E3131',
+  reddish_spots: '#CB2525',
+  leaf_mosaic: '#B59E76',
+  spider_webs: '#F8F6EF',
+  damage_from_insects: '#DE8954',
+  dry_dead_leaves: '#767870',
+  no_leaves: '#F97066',
+  other: '#BDBDBD'
+};
+const DEFAULT_COLOR$3 = '#9E9E9E';
 const VegetationHealth = ({
   vegetationHealthChart,
   t = s => s,
@@ -57337,7 +56896,7 @@ const VegetationHealth = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$3[index % COLORS$3.length],
+      color: VEGETATION_HEALTH_COLORS[item?.name] || DEFAULT_COLOR$3,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -57435,6 +56994,80 @@ const calculateNiceAxisConfig = (data, valueField = 'value', multiplier = 1.2, d
   };
 };
 
+/**
+ * Calculate y-axis configuration with natural numbers (integers) only
+ * Always starts from 0 and extends slightly above max for better visualization
+ * @param {number} maxValue - Maximum value from the data
+ * @param {Object} options - Optional configuration
+ * @param {number} options.minTicks - Minimum number of ticks to show (default: 4)
+ * @param {number} options.maxTicks - Maximum number of ticks to show (default: 6)
+ * @returns {Object} Axis configuration with min, max, and tickMethod
+ */
+const calculateNaturalAxisConfig = (maxValue, options = {}) => {
+  const {
+    minTicks = 4,
+    maxTicks = 6
+  } = options;
+  if (maxValue <= 0) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // For very small values (max <= 1), always show 0, 1, 2, 3, 4
+  if (maxValue <= 1) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // Calculate appropriate step size based on max value
+  let step = 1;
+  let displayMax = maxValue;
+  if (maxValue <= 5) {
+    // For small values, use step of 1 and extend a bit above
+    step = 1;
+    displayMax = Math.max(5, Math.ceil(maxValue * 1.5));
+  } else if (maxValue <= 10) {
+    // For medium-small values, use step of 2
+    step = 2;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 20) {
+    // For medium values, use step of 5
+    step = 5;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 50) {
+    // For larger values, use step of 10
+    step = 10;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else {
+    // For very large values, calculate step to get 4-6 ticks
+    const targetTicks = Math.min(maxTicks, Math.max(minTicks, Math.ceil(maxValue / 20)));
+    step = Math.ceil(maxValue / targetTicks / 10) * 10; // Round to nearest 10
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  }
+
+  // Generate ticks from 0 to displayMax
+  const ticks = [];
+  for (let i = 0; i <= displayMax; i += step) {
+    ticks.push(i);
+  }
+
+  // Ensure max value is included if it's close
+  if (ticks[ticks.length - 1] < maxValue && maxValue - ticks[ticks.length - 1] <= step / 2) {
+    ticks.push(maxValue);
+  }
+  return {
+    min: 0,
+    max: displayMax,
+    tickMethod: () => ticks
+  };
+};
+
 /**
  * Merge default categories with backend data
  * Ensures all categories are displayed even if they have no data
@@ -57490,13 +57123,11 @@ const SeedlingsHeight$1 = ({
     return mergeDefaultCategories(seedlingsHeightChart, DEFAULT_HEIGHT_RANGES, 'range', 'count', 'label', 'value');
   }, [seedlingsHeightChart]);
   const yAxisConfig = React.useMemo(() => {
-    return calculateNiceAxisConfig(chartData, 'value', 2,
-    // multiplier: double the max value
-    {
-      min: 0,
-      max: 20,
-      tickMethod: () => [0, 5, 10, 15, 20]
-    });
+    // Calculate max value from data
+    const maxValue = chartData && chartData.length > 0 ? Math.max(...chartData.map(item => Number(item?.value) || 0)) : 0;
+
+    // Use the helper function to calculate natural number axis configuration
+    return calculateNaturalAxisConfig(maxValue);
   }, [chartData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Seedlings Height"),
@@ -57518,9 +57149,9 @@ const SeedlingsHeight$1 = ({
             const item = data[0]?.data || data[0];
             return {
               title: t("Seedlings Height"),
-              subTitle: title,
               items: [{
-                label: t("Count"),
+                color: "#016C6E",
+                label: title,
                 value: item?.value || 0
               }]
             };
@@ -57531,7 +57162,12 @@ const SeedlingsHeight$1 = ({
   });
 };
 
-const COLORS$2 = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const PLANTED_SPECIES_COLORS = {
+  rhyzophora_mangle: '#016C6E',
+  rhyzophora: '#00AEB1',
+  rhyzophora_sp: '#A0EBEC'
+};
+const DEFAULT_COLOR$2 = '#9E9E9E';
 const PlantedSpecies$1 = ({
   plantedSpeciesChart,
   t = s => s,
@@ -57552,7 +57188,7 @@ const PlantedSpecies$1 = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$2[index % COLORS$2.length],
+      color: PLANTED_SPECIES_COLORS[item?.name] || DEFAULT_COLOR$2,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -57564,15 +57200,22 @@ const PlantedSpecies$1 = ({
     if (isEmpty) {
       return null;
     }
+
+    // Calculate total from all items
+    const total = pieData.reduce((sum, dataItem) => sum + (dataItem.value || 0), 0);
+
+    // Show all items in the tooltip, sorted by value (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.value - a.value).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: dataItem.value || 0
+    }));
     return renderTooltipJsx({
       title: t("Planted Species"),
-      items: [{
-        color: item.color,
-        label: item.label || '',
-        value: item.value || 0
-      }]
+      subTitle: total.toLocaleString(),
+      items: allItems
     });
-  }, [t, isEmpty]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Planted Species"),
     className: "with-border-header h-w-btn-header",
@@ -57837,13 +57480,8 @@ const ObservedFauna = ({
     }));
   }, [observedFaunaChart, options]);
   const xAxisConfig = React.useMemo(() => {
-    return calculateNiceAxisConfig(chartData, 'value', 1.2,
-    // multiplier: 20% padding
-    {
-      min: 0,
-      max: 10,
-      tickMethod: () => [0, 2, 4, 6, 8, 10]
-    });
+    const maxValue = chartData && chartData.length > 0 ? Math.max(...chartData.map(item => Number(item?.value) || 0)) : 0;
+    return calculateNaturalAxisConfig(maxValue);
   }, [chartData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Observed Fauna"),
@@ -58113,7 +57751,13 @@ const Stats = ({
   });
 };
 
-const COLORS$1 = ['#016C6E', '#4FB3A1', '#A8E6CF', '#FFD93D', '#F0A888', '#DF571E', '#C04B19'];
+const SOIL_TYPE_COLORS$1 = {
+  sandy: '#00AEB1',
+  mixed: '#016C6E',
+  clay: '#A0EBEC',
+  muddy: '#4FB3A1'
+};
+const DEFAULT_COLOR$1 = '#9E9E9E';
 const SoilType = ({
   soilTypeChart,
   t = s => s,
@@ -58134,7 +57778,7 @@ const SoilType = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$1[index % COLORS$1.length],
+      color: SOIL_TYPE_COLORS$1[item?.soilType] || DEFAULT_COLOR$1,
       label: optionsMap[item?.soilType] || item?.soilType || '',
       key: item?.soilType || `item-${index}`
     }));
@@ -58146,15 +57790,18 @@ const SoilType = ({
     if (isEmpty) {
       return null;
     }
+
+    // Show all items in the tooltip, sorted by percentage (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.percent - a.percent).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: renderPercentage(Math.round(dataItem.percent * 100))
+    }));
     return renderTooltipJsx({
       title: t("Soil Type"),
-      items: [{
-        color: item.color,
-        label: optionsMap[item.label] || item.label || '',
-        value: `${renderPercentage(item.percent.toFixed(2) * 100)}`
-      }]
+      items: allItems
     });
-  }, [t, isEmpty, optionsMap]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Soil Type"),
     className: "with-border-header h-w-btn-header",
@@ -58255,7 +57902,16 @@ const SalinityLevels = ({
   });
 };
 
-const COLORS = ['#6AD99E', '#FFD93D', '#F0A888', '#DF571E', '#B0B0B0', '#016C6E', '#4FB3A1'];
+const WATER_QUALITY_COLORS = {
+  fairly_clear: '#32D583',
+  turbid: '#FFA940',
+  polluted: '#F97066',
+  oil_traces: '#2B3644',
+  no_water: '#DAD6CE',
+  clear: '#6AD99E',
+  other: '#9E9E9E'
+};
+const DEFAULT_COLOR = '#9E9E9E';
 const WaterQuality = ({
   waterQualityChart,
   t = s => s,
@@ -58276,7 +57932,7 @@ const WaterQuality = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS[index % COLORS.length],
+      color: WATER_QUALITY_COLORS[item?.waterQuality] || DEFAULT_COLOR,
       label: optionsMap[item?.waterQuality] || item?.waterQuality || '',
       key: item?.waterQuality || `item-${index}`
     }));
@@ -58288,15 +57944,18 @@ const WaterQuality = ({
     if (isEmpty) {
       return null;
     }
+
+    // Show all items in the tooltip, sorted by percentage (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.percent - a.percent).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: renderPercentage(Math.round(dataItem.percent * 100))
+    }));
     return renderTooltipJsx({
       title: t("Water Quality"),
-      items: [{
-        color: item.color,
-        label: item.label || '',
-        value: `${Math.round(item.percent * 100)}%`
-      }]
+      items: allItems
     });
-  }, [t, isEmpty]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Water Quality"),
     className: "with-border-header h-w-btn-header",