datastake-daf 0.6.774 → 0.6.775

package/dist/pages/index.js

@@ -7069,7 +7069,7 @@ const getRowConfig$1 = ({
 const MOBILE_W = 850;
 const MOBILE_WIDTH = `max-width: ${MOBILE_W}px`;
 
-const Style$f = styled__default["default"].div`
+const Style$g = styled__default["default"].div`
 	overflow-x: auto;
 
 	@media (${MOBILE_WIDTH}) {
@@ -7467,7 +7467,7 @@ function KeyIndicatorsWidget({
     className: formatClassname(["flex-1 h-w-btn-header with-border-header", widgetClassName]),
     title: noTitle ? undefined : t(title),
     noTitle: noTitle,
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$f, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$g, {
       className: formatClassname(["flex", className]),
       children: config.map((c, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "row-item",
@@ -7563,7 +7563,7 @@ KeyIndicators$1.propTypes = {
   goTo: PropTypes__default["default"].func
 };
 
-const Style$e = styled__default["default"].div`
+const Style$f = styled__default["default"].div`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -9119,7 +9119,7 @@ function LocationIcon({
   });
 }
 
-const Style$d = styled__default["default"].div`
+const Style$e = styled__default["default"].div`
   .main {
     width: 24px;
     height: 24px;
@@ -9264,7 +9264,7 @@ function StakeholderIcon({
         onClickLink: () => onClickLink(marker)
       }),
       getPopupContainer: () => document.getElementById("map"),
-      children: /*#__PURE__*/jsxRuntime.jsx(Style$d
+      children: /*#__PURE__*/jsxRuntime.jsx(Style$e
       // onClick={toggleOpen}
       , {
         className: `map-marker marker closed`,
@@ -9277,7 +9277,7 @@ function StakeholderIcon({
       })
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$e, {
     onClick: toggleOpen,
     className: `map-marker marker ${isActive ? "opened" : "closed"}`,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -10116,7 +10116,7 @@ const useMap = ({
   };
 };
 
-const Style$c = styled__default["default"].div`
+const Style$d = styled__default["default"].div`
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -10189,7 +10189,7 @@ function ComponentWithFocus({
       setClosed(false);
     }
   }, [closed]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$c, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
     className: className,
     ref: ref,
     style: style,
@@ -10201,7 +10201,7 @@ function ComponentWithFocus({
   });
 }
 
-const Style$b = styled__default["default"].div`
+const Style$c = styled__default["default"].div`
   position: absolute; 
   top: 24px;
   left: 24px;
@@ -10376,7 +10376,7 @@ function Filters({
         return null;
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$b, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$c, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Button, {
       onClick: () => setOpened(p => !p),
       children: [t("Filter"), /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
@@ -10457,7 +10457,7 @@ function Map$1({
     isSatellite
   });
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Style$e, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Style$f, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
       children: [filtersConfig ? /*#__PURE__*/jsxRuntime.jsx(Filters, {
         t: t,
@@ -10666,7 +10666,7 @@ function PrimaryNode({
       style: {
         opacity: 0
       }
-    }), /*#__PURE__*/jsxRuntime.jsxs(Style$a, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(Style$b, {
       $isPdf: isPdf,
       className: "flex",
       children: [" ", /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -10777,7 +10777,7 @@ function PrimaryNode({
     })]
   });
 }
-const Style$a = styled__default["default"].div`
+const Style$b = styled__default["default"].div`
   width: ${MAIN_NODE_WIDTH}px;
   height: ${MAIN_NODE_HEIGHT}px; /* Explicitly set height */
   display: flex;
@@ -10913,7 +10913,7 @@ function IconNode({
     }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: data?.name,
       defaultOpen: data?.ONLY_IN_STORYBOOK,
-      children: /*#__PURE__*/jsxRuntime.jsx(Style$9, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Style$a, {
         hoverColor: data?.iconHoverColor,
         children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
           theme: {
@@ -10956,7 +10956,7 @@ function IconNode({
     })]
   });
 }
-const Style$9 = styled__default["default"].div`
+const Style$a = styled__default["default"].div`
 	height: 40px;
 	width: 40px;
 
@@ -11034,7 +11034,7 @@ function NameNode({
       style: {
         opacity: 0
       }
-    }), /*#__PURE__*/jsxRuntime.jsxs(Style$8, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(Style$9, {
       $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
@@ -11122,7 +11122,7 @@ function NameNode({
     })]
   });
 }
-const Style$8 = styled__default["default"].div`
+const Style$9 = styled__default["default"].div`
     width: ${NAME_CARD_WIDTH}px;
     height: 55px;
     display: flex;
@@ -11153,7 +11153,7 @@ const Style$8 = styled__default["default"].div`
     }
 `;
 
-const Style$7 = styled__default["default"].div`
+const Style$8 = styled__default["default"].div`
 	width: 405px;
 	display: flex;
 	height: 140px;
@@ -11264,7 +11264,7 @@ function ExpandedNode({
       style: {
         opacity: 0
       }
-    }), /*#__PURE__*/jsxRuntime.jsxs(Style$7, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(Style$8, {
       style: {
         opacity
       },
@@ -12516,7 +12516,7 @@ Identification.propTypes = {
   theme: PropTypes__default["default"].object
 };
 
-const Style$6 = styled__default["default"].div`
+const Style$7 = styled__default["default"].div`
   position: absolute;
   display: flex;
   gap: 12px;
@@ -12531,7 +12531,7 @@ function Tooltip({
   mouseY = 0,
   children = null
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Style$6, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$7, {
     style: {
       top: mouseY,
       left: mouseX
@@ -15224,7 +15224,7 @@ const renderStatusTag = ({
   }
 };
 
-const getColumns$b = ({
+const getColumns$c = ({
   t,
   goTo,
   user,
@@ -20881,7 +20881,7 @@ function Comments({
   });
 }
 
-var Style$5 = styled__default["default"].div`
+var Style$6 = styled__default["default"].div`
   border: 1px solid var(--base-gray-40);
   padding: 12px;
   background: var(--base-gray-20);
@@ -21027,7 +21027,7 @@ function GroupInfoHOC({
     meta,
     t
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$5, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$6, {
     className: formatClassname([!isExpanded && 'collapsed', className, isSuccess && 'success']),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "cont-header",
@@ -21184,7 +21184,7 @@ function GroupInfo({
         });
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$5, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$6, {
     className: formatClassname([!isExpanded && 'collapsed', className]),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "cont-header",
@@ -21225,7 +21225,7 @@ function GroupInfos({
   }, key));
 }
 
-const Style$4 = styled__default["default"].div`
+const Style$5 = styled__default["default"].div`
   gap: 16px;
   display: flex;
   max-width: 465px;
@@ -21247,7 +21247,7 @@ function EvaluationPopover({
   t = s => s,
   evaluationConfig = []
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Style$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
     children: evaluationConfig.map(c =>
     /*#__PURE__*/
     //? ASK REDI
@@ -23219,7 +23219,7 @@ const useMapHelper = ({
   };
 };
 
-const Style$3 = styled__default["default"].div`
+const Style$4 = styled__default["default"].div`
   width: 100%;
   height: 20rem;
   flex: 1;
@@ -23346,7 +23346,7 @@ function PolygonSelector({
       searchForLocation(mapRef);
     }
   }, [searchValue, mapRef]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$3, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$4, {
     className: "polygon-selector",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "map-container",
@@ -30104,7 +30104,7 @@ const NavigationAction = ({
   });
 };
 
-const getColumns$a = ({
+const getColumns$b = ({
   t,
   goTo,
   user,
@@ -30676,7 +30676,7 @@ const viewConfig$6 = {
   createTitle: "Create Worker"
 };
 
-const getColumns$9 = ({
+const getColumns$a = ({
   t,
   goTo,
   user,
@@ -31178,7 +31178,7 @@ MoreTags.propTypes = {
   limit: PropTypes__default["default"].number
 };
 
-const getColumns$8 = ({
+const getColumns$9 = ({
   t,
   goTo,
   user,
@@ -31633,7 +31633,7 @@ const getEventCategoryBySubject = (eventCategoryObject, subject, isSingular = fa
   return eventCategoryObject[key] || null;
 };
 
-const getColumns$7 = ({
+const getColumns$8 = ({
   t,
   goTo,
   user,
@@ -32058,6 +32058,264 @@ const viewConfig$3 = {
   createTitle: "Create Incident"
 };
 
+const getColumns$7 = ({
+  t,
+  goTo,
+  user,
+  options,
+  activeTab,
+  getRedirectLink,
+  theme,
+  subject,
+  data,
+  applications
+}) => [{
+  dataIndex: 'datastakeId',
+  title: t('ID'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: v,
+      children: v
+    });
+  }
+}, {
+  dataIndex: 'name',
+  title: t('Title'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: v,
+      children: v
+    });
+  }
+}, {
+  title: t("Date"),
+  dataIndex: "date",
+  key: "date",
+  render: (date, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: _date,
+      children: _date
+    });
+  },
+  ellipsis: true
+}, {
+  dataIndex: 'mineSite',
+  title: t('Location'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+
+    // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
+    const mineSite = all?.location?.name;
+    return mineSite ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: mineSite,
+      children: mineSite
+    }) : '-';
+  }
+}, {
+  dataIndex: 'province',
+  title: t('Province'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
+    return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: region,
+      children: region
+    }) : '-';
+  }
+}, {
+  dataIndex: 'territory',
+  title: t('Territory'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
+    return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: district,
+      children: district
+    }) : '-';
+  }
+}, {
+  dataIndex: 'eventCategory',
+  title: t('Category'),
+  ellipsis: true,
+  show: true,
+  render: (v, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const eventCategory = findOptions(v, data?.options?.eventCategoryOptions);
+    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
+    return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: categoryValue,
+      children: categoryValue
+    }) : '-';
+  }
+}, {
+  title: t("Sources"),
+  dataIndex: "sources",
+  key: "sources",
+  show: activeTab !== "own",
+  render: (val, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const sources = sourceAvatarConfig(val, user, applications);
+    return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
+      items: sources
+    });
+  }
+}, {
+  title: t("Status"),
+  dataIndex: "status",
+  key: "status",
+  show: activeTab === "own",
+  render: (val, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
+    return renderStatusTag({
+      value: _val,
+      t
+    });
+  }
+}, {
+  title: t("Last Update"),
+  dataIndex: "updatedAt",
+  key: "updatedAt",
+  render: (date, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: _date,
+      children: _date
+    });
+  },
+  ellipsis: true
+}, {
+  id: 'actions',
+  title: "",
+  width: 60,
+  render: (_, all) => {
+    if (all.empty) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-default-cell"
+      });
+    }
+    const onClick = () => {
+      let link = `/app/view/${subject}/${all.datastakeId}`;
+      if (activeTab === "shared") {
+        link += `?sourceId=${all?.authorId?.id}`;
+      }
+      goTo(getRedirectLink(link));
+    };
+    return /*#__PURE__*/jsxRuntime.jsx(NavigationAction, {
+      onClick: onClick,
+      theme: theme
+    });
+  }
+}].filter(column => column.show !== false);
+
+const getFiltersConfig$4 = ({
+  t
+}) => {
+  return {
+    country: {
+      type: 'select',
+      placeholder: t('Country'),
+      style: {
+        flex: 1
+      },
+      labelStyle: {
+        flex: 1
+      },
+      getLabel: option => option.label,
+      getValue: option => option.value
+    },
+    category: {
+      type: 'select',
+      label: 'Category',
+      placeholder: t => `${t('Filter by')} ${t('Category').toLowerCase()}`,
+      style: {
+        flex: 1
+      },
+      labelStyle: {
+        flex: 1
+      },
+      getLabel: option => option.label,
+      getValue: option => option.value
+    }
+  };
+};
+const getFilterOptions$4 = (options, t) => {
+  const {
+    countries = [],
+    category = [],
+    locationCategories = []
+  } = options || {};
+  return {
+    country: countries,
+    category: locationCategories || category
+  };
+};
+const formConfig$2 = {
+  namespace: 'locations',
+  view: 'scoping',
+  scope: 'create',
+  formType: 'location'
+};
+const viewConfig$2 = {
+  title: "Locations",
+  createTitle: "Create Location"
+};
+
 const getColumns$6 = ({
   t,
   goTo,
@@ -32085,264 +32343,6 @@ const getColumns$6 = ({
       children: v
     });
   }
-}, {
-  dataIndex: 'name',
-  title: t('Title'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
-}, {
-  title: t("Date"),
-  dataIndex: "date",
-  key: "date",
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  dataIndex: 'mineSite',
-  title: t('Location'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-
-    // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
-    const mineSite = all?.location?.name;
-    return mineSite ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: mineSite,
-      children: mineSite
-    }) : '-';
-  }
-}, {
-  dataIndex: 'province',
-  title: t('Province'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
-    return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: region,
-      children: region
-    }) : '-';
-  }
-}, {
-  dataIndex: 'territory',
-  title: t('Territory'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
-    return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: district,
-      children: district
-    }) : '-';
-  }
-}, {
-  dataIndex: 'eventCategory',
-  title: t('Category'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const eventCategory = findOptions(v, data?.options?.eventCategoryOptions);
-    const categoryValue = getEventCategoryBySubject(eventCategory, subject);
-    return categoryValue ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: categoryValue,
-      children: categoryValue
-    }) : '-';
-  }
-}, {
-  title: t("Sources"),
-  dataIndex: "sources",
-  key: "sources",
-  show: activeTab !== "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const sources = sourceAvatarConfig(val, user, applications);
-    return /*#__PURE__*/jsxRuntime.jsx(AvatarGroup, {
-      items: sources
-    });
-  }
-}, {
-  title: t("Status"),
-  dataIndex: "status",
-  key: "status",
-  show: activeTab === "own",
-  render: (val, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
-    return renderStatusTag({
-      value: _val,
-      t
-    });
-  }
-}, {
-  title: t("Last Update"),
-  dataIndex: "updatedAt",
-  key: "updatedAt",
-  render: (date, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: _date,
-      children: _date
-    });
-  },
-  ellipsis: true
-}, {
-  id: 'actions',
-  title: "",
-  width: 60,
-  render: (_, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    const onClick = () => {
-      let link = `/app/view/${subject}/${all.datastakeId}`;
-      if (activeTab === "shared") {
-        link += `?sourceId=${all?.authorId?.id}`;
-      }
-      goTo(getRedirectLink(link));
-    };
-    return /*#__PURE__*/jsxRuntime.jsx(NavigationAction, {
-      onClick: onClick,
-      theme: theme
-    });
-  }
-}].filter(column => column.show !== false);
-
-const getFiltersConfig$4 = ({
-  t
-}) => {
-  return {
-    country: {
-      type: 'select',
-      placeholder: t('Country'),
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    },
-    category: {
-      type: 'select',
-      label: 'Category',
-      placeholder: t => `${t('Filter by')} ${t('Category').toLowerCase()}`,
-      style: {
-        flex: 1
-      },
-      labelStyle: {
-        flex: 1
-      },
-      getLabel: option => option.label,
-      getValue: option => option.value
-    }
-  };
-};
-const getFilterOptions$4 = (options, t) => {
-  const {
-    countries = [],
-    category = [],
-    locationCategories = []
-  } = options || {};
-  return {
-    country: countries,
-    category: locationCategories || category
-  };
-};
-const formConfig$2 = {
-  namespace: 'locations',
-  view: 'scoping',
-  scope: 'create',
-  formType: 'location'
-};
-const viewConfig$2 = {
-  title: "Locations",
-  createTitle: "Create Location"
-};
-
-const getColumns$5 = ({
-  t,
-  goTo,
-  user,
-  options,
-  activeTab,
-  getRedirectLink,
-  theme,
-  subject,
-  data,
-  applications
-}) => [{
-  dataIndex: 'datastakeId',
-  title: t('ID'),
-  ellipsis: true,
-  show: true,
-  render: (v, all) => {
-    if (all.empty) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-default-cell"
-      });
-    }
-    return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-      title: v,
-      children: v
-    });
-  }
 }, {
   dataIndex: 'name',
   title: t('Name'),
@@ -32730,7 +32730,7 @@ MoreOptions.propTypes = {
   limit: PropTypes__default["default"].number
 };
 
-const getColumns$4 = ({
+const getColumns$5 = ({
   t,
   goTo,
   user,
@@ -32966,7 +32966,7 @@ const viewConfig = {
   createTitle: "Create Document"
 };
 
-const getColumns$3 = ({
+const getColumns$4 = ({
   t,
   goTo,
   user,
@@ -33091,63 +33091,63 @@ const FILTER_REGISTRY = {
     options: getFilterOptions$a,
     formConfig: formConfig$8,
     viewConfig: viewConfig$8,
-    columns: getColumns$a
+    columns: getColumns$b
   },
   workers: {
     config: getFiltersConfig$8,
     options: getFilterOptions$8,
     formConfig: formConfig$6,
     viewConfig: viewConfig$6,
-    columns: getColumns$9
+    columns: getColumns$a
   },
   operators: {
     config: getFiltersConfig$9,
     options: getFilterOptions$9,
     formConfig: formConfig$7,
     viewConfig: viewConfig$7,
-    columns: getColumns$b
+    columns: getColumns$c
   },
   events: {
     config: getFiltersConfig$7,
     options: getFilterOptions$7,
     formConfig: formConfig$5,
     viewConfig: viewConfig$5,
-    columns: getColumns$8
+    columns: getColumns$9
   },
   activities: {
     config: getFiltersConfig$6,
     options: getFilterOptions$6,
     formConfig: formConfig$4,
     viewConfig: viewConfig$4,
-    columns: getColumns$7
+    columns: getColumns$8
   },
   incidents: {
     config: getFiltersConfig$5,
     options: getFilterOptions$5,
     formConfig: formConfig$3,
     viewConfig: viewConfig$3,
-    columns: getColumns$6
+    columns: getColumns$7
   },
   locations: {
     config: getFiltersConfig$4,
     options: getFilterOptions$4,
     formConfig: formConfig$2,
     viewConfig: viewConfig$2,
-    columns: getColumns$5
+    columns: getColumns$6
   },
   'production-sites': {
     config: getFiltersConfig$3,
     options: getFilterOptions$3,
     formConfig: formConfig$1,
     viewConfig: viewConfig$1,
-    columns: getColumns$4
+    columns: getColumns$5
   },
   documents: {
     config: getFiltersConfig$2,
     options: getFilterOptions$2,
     formConfig: formConfig,
     viewConfig: viewConfig,
-    columns: getColumns$3
+    columns: getColumns$4
   }
 };
 const DEFAULT_SUBJECT = 'stakeholders';
@@ -33198,7 +33198,7 @@ const getViewConfig = ({
   return registry?.viewConfig;
 };
 
-const getColumns$2 = ({
+const getColumns$3 = ({
   t,
   goTo,
   user,
@@ -33285,7 +33285,7 @@ const useTablePage = ({
     extendingFilters: extendingFilters,
     subject
   });
-  const columns = React.useMemo(() => getColumns$2({
+  const columns = React.useMemo(() => getColumns$3({
     t,
     goTo,
     user,
@@ -33296,7 +33296,7 @@ const useTablePage = ({
     subject,
     data,
     applications
-  }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns$2]);
+  }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns$3]);
   const selectFiltersConfig = React.useMemo(() => getFiltersConfig$1({
     t,
     subject
@@ -33861,7 +33861,7 @@ const WorkersTable = ({
     getData: getData,
     getApiBaseUrl: getApiBaseUrl,
     getAppHeader: getAppHeader,
-    getColumns: getColumns$9,
+    getColumns: getColumns$a,
     breadcrumbs: breadcrumbs,
     extendingFilters: extendingFilters,
     formConfig: {
@@ -34086,7 +34086,7 @@ const ProductionSitesTable = ({
   });
 };
 
-const getColumns$1 = ({
+const getColumns$2 = ({
   t,
   goTo,
   user,
@@ -34564,7 +34564,7 @@ const UsersTable = ({
   const params = new URLSearchParams(location?.search);
   const [openCreateModal, setOpenCreateModal] = React.useState(params.has("create"));
   const [userToEdit, setUserToEdit] = React.useState(null);
-  const columns = React.useMemo(() => getColumns$1({
+  const columns = React.useMemo(() => getColumns$2({
     t,
     goTo,
     user,
@@ -34955,7 +34955,7 @@ const partnershipTypes = [{
   value: "exchange"
 }];
 
-const getColumns = ({
+const getColumns$1 = ({
   t,
   accept,
   decline,
@@ -35465,7 +35465,7 @@ const Create = ({
   });
 };
 
-const Style$2 = styled__default["default"].div`
+const Style$3 = styled__default["default"].div`
   display: flex;
   gap: 8px;
   justify-content: center;
@@ -35488,7 +35488,7 @@ function Footer({
   disabledFooterText,
   disabledFooter
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$2, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$3, {
     className: className,
     children: [disabledFooterText ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: t(disabledFooterText),
@@ -35700,7 +35700,7 @@ const PartnersTable = ({
     setTotalRequests,
     t
   });
-  const columns = React.useMemo(() => getColumns({
+  const columns = React.useMemo(() => getColumns$1({
     t,
     accept,
     decline,
@@ -37867,7 +37867,63 @@ const OperatorSummary = ({
   });
 };
 
-styled__default["default"].div`
+function StickyTable({
+  size = "small",
+  maxHeight = 300,
+  containerHeight = 525,
+  dataSource = [],
+  columns = {},
+  pagination = false,
+  doEmptyRows = true,
+  ...props
+}) {
+  const data = React__default["default"].useMemo(() => {
+    if (!doEmptyRows) {
+      return dataSource;
+    }
+    const MIN_ROWS = 4;
+    if (dataSource.length < MIN_ROWS) {
+      const paddedData = [...dataSource];
+      while (paddedData.length < MIN_ROWS) {
+        paddedData.push({
+          empty: true
+        });
+      }
+      return paddedData;
+    }
+    return dataSource;
+  }, [dataSource, doEmptyRows]);
+  const Wrapper = React__default["default"].useMemo(() => {
+    return data.length > 5 ? ComponentWithFocus : "div";
+  }, [data.length]);
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Style$2, {
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-table-wrapper",
+        style: {
+          maxHeight: containerHeight,
+          overflowY: "auto"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "daf-sticky-table",
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, {
+            ...props,
+            size: size,
+            scroll: true,
+            sticky: true,
+            style: {
+              maxHeight
+            },
+            dataSource: data,
+            columns: columns,
+            pagination: pagination
+          })
+        })
+      })
+    })
+  });
+}
+const Style$2 = styled__default["default"].div`
 	max-width: calc(100% - 48px);
 	margin-left: var(--size-lg);
 	overflow: hidden;
@@ -37891,13 +37947,13 @@ styled__default["default"].div`
 		padding-top: 16px;
 	}
 `;
-({
+StickyTable.propTypes = {
   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
-});
+};
 
 ({
   content: PropTypes__default["default"].string,
@@ -40829,6 +40885,25 @@ styled__default["default"].div`
 	}
 `;
 
+/**
+ * Formats a number for display with locale-specific formatting
+ * @param {any} val - The value to format
+ * @param {boolean} doubleDigit - Whether to ensure single digit numbers are padded with a leading zero
+ * @returns {string} Formatted number string or '--' if input is not a number
+ */
+const renderNumber = (val, doubleDigit = false) => {
+  if (typeof val !== 'number') {
+    return '--';
+  }
+  const _string = Number(val).toLocaleString('en-us');
+  if (doubleDigit) {
+    if (_string.length === 1) {
+      return '0' + _string;
+    }
+  }
+  return _string;
+};
+
 styled__default["default"].div`
 	height: 333px;
 	width: calc(100% - 48px);
@@ -41851,6 +41926,13 @@ styled__default["default"].div`
   }
 `;
 
+const getRedirectLink = (link, APP) => {
+  if (window.location.pathname.includes(`/${APP}`)) {
+    return `${APP}${link}`;
+  }
+  return link;
+};
+
 styled__default["default"].div`
   display: flex;
   flex-direction: column;
@@ -42836,6 +42918,551 @@ const calculateStatChange = (data, options = {}) => {
   };
 };
 
+/**
+ * Formats a date based on the time filter
+ * @param {dayjs.Dayjs} date - The date to format
+ * @param {boolean} breakLine - Whether to add a line break (for tooltips)
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @returns {string} Formatted date string
+ */
+const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
+  switch (timeFilter) {
+    case "daily":
+      return date.format("DD/MM");
+    case "weekly":
+      return `W${renderNumber(date.week())}`;
+    default:
+      // Monthly format: "Dec 24", "Jan 25", etc.
+
+      return breakLine ? `${capitalize(date.format("MMM"))}\n${date.format("YY")}` : `${capitalize(date.format("MMM"))} ${date.format("YY")}`;
+  }
+};
+
+/**
+ * Gets the time quantity string for dayjs operations
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @returns {string} Time quantity string ('days', 'weeks', 'months')
+ */
+const getTimeQuantity = (timeFilter = 'monthly') => {
+  return timeFilter === "monthly" ? "months" : timeFilter === "daily" ? "days" : "weeks";
+};
+
+/**
+ * Gets previous cumulative score from data before start date
+ * @param {Array} dates - Array of data objects with date field
+ * @param {dayjs.Dayjs} startDate - The start date
+ * @param {string} timeFilter - The time filter
+ * @param {string} valueField - The field name to extract value from (default: 'total')
+ * @returns {Object} Object with hasPreviousData, previousCumulativeScore, previousMaxScore
+ */
+const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total') => {
+  let previousCumulativeScore = 0;
+  let previousMaxScore = 0;
+  let hasPreviousData = false;
+  dates.forEach(d => {
+    const date = dayjs__default["default"](d.date, "YYYY-MM-DD");
+    if (!date.isValid()) return;
+    let isBeforeStart = false;
+    switch (timeFilter) {
+      case "daily":
+        isBeforeStart = date.isBefore(startDate, 'day');
+        break;
+      case "weekly":
+        isBeforeStart = date.isBefore(startDate, 'week');
+        break;
+      default:
+        isBeforeStart = date.isBefore(startDate, 'month');
+        break;
+    }
+    if (isBeforeStart) {
+      hasPreviousData = true;
+      const value = Number(d[valueField] || d.count || d.jobs || d.value || 0) || 0;
+      previousCumulativeScore += value;
+      previousMaxScore = Math.max(previousMaxScore, value);
+    }
+  });
+  return {
+    hasPreviousData,
+    previousCumulativeScore,
+    previousMaxScore
+  };
+};
+
+/**
+ * Processes chart data with time filtering support
+ * @param {Object} params - Parameters object
+ * @param {Array} params.mainData - Array of data objects with date and value fields
+ * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly')
+ * @param {Object} params.filters - Optional filters object with timeframe
+ * @param {boolean} params.isCumulative - Whether to calculate cumulative values (default: false)
+ * @param {string} params.valueField - Field name to extract value from (default: 'total', also checks 'count', 'jobs', 'value')
+ * @returns {Array} Processed chart data array
+ */
+const processChartDateData = ({
+  mainData,
+  timeFilter: filter,
+  filters = {},
+  isCumulative = false,
+  valueField = 'total'
+}) => {
+  if (!mainData || !Array.isArray(mainData) || mainData.length === 0) {
+    return [];
+  }
+  const timeQuantity = getTimeQuantity(filter);
+  const dates = mainData;
+  const _data = [];
+  let end = filters?.timeframe?.endDate || dayjs__default["default"]();
+  let start = filters?.timeframe?.startDate || dayjs__default["default"]().add(-12, timeQuantity);
+
+  // Normalize start and end to period boundaries
+  if (filter === "daily") {
+    start = start.startOf('day');
+    end = end.startOf('day');
+  } else if (filter === "weekly") {
+    start = start.startOf('week');
+    end = end.startOf('week');
+  } else {
+    start = start.startOf('month');
+    end = end.startOf('month');
+  }
+  let i = 0;
+  let cumulativeScore = 0;
+
+  // Calculate initial cumulative value if needed
+  if (isCumulative) {
+    const {
+      hasPreviousData,
+      previousCumulativeScore
+    } = getPreviousGraphData(dates, start, filter, valueField);
+    cumulativeScore = hasPreviousData ? previousCumulativeScore : 0;
+  }
+
+  // Loop until we reach the end date
+  let currentDate = start.clone();
+  while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
+    // Filter data points that fall within this period
+    const score = dates.filter(d => {
+      if (!d.date) return false;
+      switch (filter) {
+        case "daily":
+          return d.date === currentDate.format("YYYY-MM-DD");
+        case "weekly":
+          return dayjs__default["default"](d.date, "YYYY-MM-DD").week() === currentDate.week() && dayjs__default["default"](d.date, "YYYY-MM-DD").year() === currentDate.year();
+        default:
+          return dayjs__default["default"](d.date, "YYYY-MM-DD").format("YYYY-MM") === currentDate.format("YYYY-MM");
+      }
+    }).reduce((a, b) => {
+      const value = Number(b[valueField] || b.count || b.jobs || b.value || 0) || 0;
+      return a + value;
+    }, 0);
+    if (isCumulative) {
+      cumulativeScore += score;
+    }
+    _data.push({
+      date: getFormatDate(currentDate, false, filter),
+      value: isCumulative ? cumulativeScore : score,
+      period: score,
+      // Period value for tooltip
+      jobs: score,
+      // For compatibility with jobs field
+      month: currentDate.format('YYYY-MM-DD'),
+      // For compatibility
+      key: i
+    });
+    currentDate = currentDate.add(1, timeQuantity);
+    i++;
+  }
+  return _data;
+};
+
+/**
+ * Formats date axis labels, checking if already formatted
+ * @param {string} label - The label to format
+ * @param {Function} getFormatDateFn - Function to format dates
+ * @returns {string} Formatted date string
+ */
+const formatDateAxis = (label, getFormatDateFn) => {
+  if (!label) return label;
+
+  // Check if label is already in the correct format (MMM YY, DD/MM, or W#)
+  // If it matches our format patterns, return as-is
+  if (typeof label === 'string') {
+    // Check for MMM YY format (e.g., "Dec 24", "Jan 25")
+    if (/^[A-Z][a-z]{2} \d{2}$/.test(label)) {
+      return label;
+    }
+    // Check for DD/MM format (e.g., "03/11")
+    if (/^\d{2}\/\d{2}$/.test(label)) {
+      return label;
+    }
+    // Check for W# format (e.g., "W1", "W12")
+    if (/^W\d+$/.test(label)) {
+      return label;
+    }
+  }
+
+  // Otherwise, try to parse and format it
+  let date = dayjs__default["default"](label);
+
+  // If first attempt fails, try parsing as ISO date string
+  if (!date.isValid() && typeof label === 'string') {
+    date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY', 'DD/MM'], true);
+  }
+
+  // If it's a valid date, format it using getFormatDate
+  if (date.isValid() && getFormatDateFn) {
+    return getFormatDateFn(date, false);
+  }
+
+  // Return as-is if we can't parse it
+  return label;
+};
+
+/**
+ * Custom hook for time filtering functionality
+ * Provides state management and formatting functions for time-based charts
+ * 
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @returns {Object} Time filter state and utilities
+ */
+const useTimeFilter = ({
+  defaultFilter = 'monthly'
+} = {}) => {
+  const [timeFilter, setTimeFilter] = React.useState(defaultFilter);
+
+  // Memoized format date function bound to current timeFilter
+  const getFormatDateFn = React.useCallback((date, breakLine = false) => getFormatDate(date, breakLine, timeFilter), [timeFilter]);
+
+  // Memoized time quantity function bound to current timeFilter
+  const getTimeQuantityFn = React.useCallback(() => getTimeQuantity(timeFilter), [timeFilter]);
+
+  // Memoized date axis formatter
+  const formatDateAxisFn = React.useMemo(() => label => formatDateAxis(label, getFormatDateFn), [getFormatDateFn]);
+
+  // Process chart data with current time filter
+  const processData = React.useCallback(({
+    mainData,
+    filters = {},
+    isCumulative = false,
+    valueField = 'total'
+  }) => {
+    return processChartDateData({
+      mainData,
+      timeFilter,
+      filters,
+      isCumulative,
+      valueField
+    });
+  }, [timeFilter]);
+  return {
+    timeFilter,
+    setTimeFilter,
+    getFormatDate: getFormatDateFn,
+    getTimeQuantity: getTimeQuantityFn,
+    formatDateAxis: formatDateAxisFn,
+    processChartDateData: processData
+  };
+};
+
+const selectOptions$2 = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
+const RestoredArea = ({
+  restoredAreaChart,
+  t = s => s
+}) => {
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
+
+  // Map restoredAreaChart data to LineChart format with time filter support
+  // Y-axis: total/cumulated value
+  // X-axis: date (formatted based on timeFilter)
+  // Fill all periods in the range, even if empty
+  const restoredAreaChartData = React.useMemo(() => {
+    if (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0) {
+      return [];
+    }
+
+    // Process data with cumulative calculation (for restored area)
+    return processChartDateData({
+      mainData: restoredAreaChart,
+      isCumulative: true,
+      valueField: 'total'
+    });
+  }, [restoredAreaChart, processChartDateData]);
+
+  // Calculate max value for yAxis dynamically (round up to nearest 10)
+  const maxYValue = React.useMemo(() => {
+    if (!restoredAreaChartData || restoredAreaChartData.length === 0) {
+      return 80;
+    }
+    const maxValue = Math.max(...restoredAreaChartData.map(item => item.value || 0));
+    // If max is 0, set default to 80 to show Y-axis
+    // Otherwise, round up to nearest 10
+    if (maxValue === 0) {
+      return 80;
+    }
+    return Math.ceil(maxValue / 10) * 10 || 80;
+  }, [restoredAreaChartData]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Restored Area"),
+    className: "with-border-header h-w-btn-header",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions$2,
+        popupMatchSelectWidth: 120
+      })]
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(LineChart, {
+          animated: true,
+          isArea: true,
+          color: '#00AEB1',
+          data: restoredAreaChartData,
+          fillOpacity: 0.7,
+          height: 200,
+          renderTooltipContent: (title, data) => {
+            if (!data || data.length === 0) return {};
+            const item = data[0]?.data || data[0];
+            const periodValue = item?.period !== undefined ? item.period : item?.value || 0;
+            const cumulatedValue = item?.value || 0;
+            return {
+              title: t("Restored Area"),
+              subTitle: formatDateAxis(title),
+              items: [{
+                label: t("Period"),
+                value: `${periodValue.toLocaleString()} ha`
+              }, {
+                label: t("Cumulated"),
+                value: `${cumulatedValue.toLocaleString()} ha`
+              }]
+            };
+          },
+          xFieldKey: "date",
+          yFieldKey: "value",
+          formattedXAxis: formatDateAxis,
+          style: {
+            width: '100%'
+          },
+          yAxis: {
+            min: 0,
+            max: maxYValue,
+            tickMethod: () => {
+              // Generate ticks every 10 units for maxYValue of 80
+              // For other values, show ticks every 10 units
+              const step = maxYValue <= 80 ? 10 : Math.max(10, Math.floor(maxYValue / 8));
+              const ticks = [];
+              for (let i = 0; i <= maxYValue; i += step) {
+                ticks.push(i);
+              }
+              // Ensure max value is included
+              if (ticks.length === 0 || ticks[ticks.length - 1] < maxYValue) {
+                ticks.push(maxYValue);
+              }
+              return ticks;
+            },
+            label: {
+              style: {
+                fontSize: 12,
+                fill: '#666'
+              }
+            },
+            grid: {
+              line: {
+                style: {
+                  stroke: '#E5E7EB',
+                  lineWidth: 1
+                }
+              }
+            }
+          },
+          xAxis: {
+            label: {
+              formatter: formatDateAxis,
+              style: {
+                fontSize: 12,
+                fill: '#666'
+              }
+            }
+          }
+        })
+      })
+    })
+  });
+};
+
+const selectOptions$1 = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
+const PlantingActivitiesTimeline = ({
+  activitiesTimelineChart,
+  t = s => s
+}) => {
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
+
+  // Map activitiesTimelineChart data to ColumnChart format with time filter support
+  // Data structure: [{count: 2, date: "2025-11-03"}]
+  // Fill all periods in the range, even if empty
+  const activitiesTimelineData = React.useMemo(() => {
+    if (!activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0) {
+      return [];
+    }
+
+    // Process data without cumulative calculation (for activities timeline)
+    return processChartDateData({
+      mainData: activitiesTimelineChart,
+      isCumulative: false,
+      valueField: 'count'
+    });
+  }, [activitiesTimelineChart, processChartDateData]);
+
+  // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+  const maxActivitiesYValue = React.useMemo(() => {
+    if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
+      return 100;
+    }
+    const maxValue = Math.max(...activitiesTimelineData.map(item => item.jobs || 0));
+    // If max is 0, set default to 100 to show Y-axis
+    if (maxValue === 0) {
+      return 100;
+    }
+    // Round up to nearest 10, but ensure minimum of 100
+    const roundedMax = Math.ceil(maxValue / 10) * 10;
+    return Math.max(100, roundedMax);
+  }, [activitiesTimelineData]);
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: t("Planting Activities Timeline"),
+    className: "with-border-header h-w-btn-header",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions$1,
+        popupMatchSelectWidth: 120
+      })]
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-1 flex-column justify-content-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex justify-content-center w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
+          data: activitiesTimelineData,
+          xFieldKey: "date",
+          yFieldKey: "jobs",
+          animated: true,
+          height: 400,
+          color: "#016C6E",
+          renderTooltipContent: (title, data) => {
+            if (!data || data.length === 0) return {};
+            // For ColumnChart, data structure: data[0]?.data contains the actual data point
+            const item = data[0]?.data || data[0];
+            const count = item?.jobs || item?.value || 0;
+            // Title is the X-axis value (month/date), use it for formatting
+            const dateValue = item?.date || title || '';
+            return {
+              title: t("Planting Activities"),
+              subTitle: formatDateAxis(dateValue),
+              items: [{
+                label: t("Total"),
+                value: count
+              }]
+            };
+          },
+          formattedXAxis: formatDateAxis,
+          formattedYAxis: value => {
+            return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`);
+          },
+          yAxis: {
+            min: 0,
+            max: maxActivitiesYValue,
+            tickMethod: () => {
+              // Generate ticks: for 100 max, show 0, 20, 40, 60, 80, 100
+              // For other values, show ticks every 20 units
+              const step = maxActivitiesYValue <= 100 ? 20 : Math.max(20, Math.floor(maxActivitiesYValue / 5));
+              const ticks = [];
+              for (let i = 0; i <= maxActivitiesYValue; i += step) {
+                ticks.push(i);
+              }
+              // Ensure max value is included
+              if (ticks.length === 0 || ticks[ticks.length - 1] < maxActivitiesYValue) {
+                ticks.push(maxActivitiesYValue);
+              }
+              return ticks;
+            },
+            label: {
+              style: {
+                fontSize: 12,
+                fill: '#666'
+              }
+            },
+            grid: {
+              line: {
+                style: {
+                  stroke: '#E5E7EB',
+                  lineWidth: 1
+                }
+              }
+            }
+          },
+          xAxis: {
+            label: {
+              formatter: formatDateAxis,
+              autoHide: true,
+              style: {
+                fontSize: 12,
+                fill: '#666'
+              }
+            }
+          }
+        })
+      })
+    })
+  });
+};
+
 const CycleOutcomes = ({
   id,
   getSummaryDetail,
@@ -42896,223 +43523,6 @@ const CycleOutcomes = ({
       format: 'absolute'
     });
   }, [locationsCount, t]);
-
-  // Map restoredAreaChart data to LineChart format
-  // Y-axis: total/cumulated value
-  // X-axis: date
-  // Fill all months in the range, even if empty
-  const restoredAreaChartData = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().startOf('month');
-    const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-
-    // Create a map of existing data by month (YYYY-MM format)
-    const dataMap = new Map();
-    const dates = [];
-
-    // Process restored area data if available
-    if (restoredAreaChart && Array.isArray(restoredAreaChart) && restoredAreaChart.length > 0) {
-      restoredAreaChart.forEach(item => {
-        if (typeof item === 'object' && item !== null) {
-          // Priority: look for date field first
-          const dateValue = item.date || item.label || item.name || item.period || item.month;
-          if (dateValue) {
-            const date = dayjs__default["default"](dateValue);
-            if (date.isValid()) {
-              const monthKey = date.format('YYYY-MM');
-              // Total/cumulated value for Y-axis (this is what gets plotted)
-              const totalValue = Number(item.cumulated || item.cumulative || item.total || item.value || 0) || 0;
-              // Period value for tooltip only
-              const periodValue = Number(item.period || item.area || item.count || 0) || 0;
-              dates.push(date);
-
-              // If multiple entries for same month, use the latest one (or sum if needed)
-              if (!dataMap.has(monthKey) || dataMap.get(monthKey).value < totalValue) {
-                dataMap.set(monthKey, {
-                  date: dateValue,
-                  value: totalValue,
-                  period: periodValue
-                });
-              }
-            }
-          }
-        }
-      });
-    }
-
-    // Determine date range
-    let minDate = twelveMonthsAgo;
-    let maxDate = now;
-
-    // If we have data, adjust range to include it
-    if (dates.length > 0) {
-      const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-      const firstDataDate = sortedDates[0].startOf('month');
-      const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-
-      // Start from the earlier of: 12 months ago, or first data date
-      minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-
-      // End at the later of: current month, or last data date
-      maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
-    }
-
-    // Generate all months in the range
-    const result = [];
-    let currentDate = minDate.clone();
-    let lastKnownValue = 0; // For cumulative data, carry forward the last known value
-
-    while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-      const monthKey = currentDate.format('YYYY-MM');
-      const existingData = dataMap.get(monthKey);
-      if (existingData) {
-        lastKnownValue = existingData.value;
-        result.push(existingData);
-      } else {
-        // Fill missing month - for cumulative data, use last known value
-        result.push({
-          date: currentDate.format('YYYY-MM-DD'),
-          value: lastKnownValue,
-          // Carry forward cumulative value
-          period: 0
-        });
-      }
-      currentDate = currentDate.add(1, 'month');
-    }
-    return result;
-  }, [restoredAreaChart]);
-
-  // Calculate max value for yAxis dynamically (round up to nearest 10)
-  const maxYValue = React.useMemo(() => {
-    if (!restoredAreaChartData || restoredAreaChartData.length === 0) {
-      return 80;
-    }
-    const maxValue = Math.max(...restoredAreaChartData.map(item => item.value || 0));
-    // If max is 0, set default to 80 to show Y-axis
-    // Otherwise, round up to nearest 10
-    if (maxValue === 0) {
-      return 80;
-    }
-    return Math.ceil(maxValue / 10) * 10 || 80;
-  }, [restoredAreaChartData]);
-
-  // Format date to "Mmm YY" format for X-axis
-  const formatDateAxis = React.useMemo(() => {
-    return label => {
-      if (!label) return label;
-
-      // Try to parse the date using dayjs with various formats
-      let date = dayjs__default["default"](label);
-
-      // If first attempt fails, try parsing as ISO date string
-      if (!date.isValid() && typeof label === 'string') {
-        date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY'], true);
-      }
-
-      // If it's a valid date, format it as "Mmm YY"
-      if (date.isValid()) {
-        return date.format('MMM YY');
-      }
-
-      // If it's already in "Mmm YY" format or similar, return as is
-      // Otherwise return the original label
-      return label;
-    };
-  }, []);
-
-  // Map activitiesTimelineChart data to ColumnChart format
-  // Data structure: [{count: 2, date: "2025-11-03"}]
-  // Fill all months in the range, even if empty
-  const activitiesTimelineData = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().startOf('month');
-    const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-
-    // Create a map of existing data by month (YYYY-MM format)
-    const dataMap = new Map();
-    const dates = [];
-
-    // Process activities timeline data if available
-    if (activitiesTimelineChart && Array.isArray(activitiesTimelineChart) && activitiesTimelineChart.length > 0) {
-      activitiesTimelineChart.forEach(item => {
-        if (typeof item === 'object' && item !== null && item.date) {
-          const date = dayjs__default["default"](item.date);
-          if (date.isValid()) {
-            const monthKey = date.format('YYYY-MM');
-            const count = Number(item.count || item.jobs || item.value || 0) || 0;
-            dates.push(date);
-
-            // If multiple entries for same month, sum them
-            if (dataMap.has(monthKey)) {
-              dataMap.set(monthKey, {
-                ...dataMap.get(monthKey),
-                jobs: dataMap.get(monthKey).jobs + count
-              });
-            } else {
-              dataMap.set(monthKey, {
-                month: item.date,
-                jobs: count,
-                date: item.date
-              });
-            }
-          }
-        }
-      });
-    }
-
-    // Determine date range
-    let minDate = twelveMonthsAgo;
-    let maxDate = now;
-
-    // If we have data, adjust range to include it
-    if (dates.length > 0) {
-      const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-      const firstDataDate = sortedDates[0].startOf('month');
-      const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-
-      // Start from the earlier of: 12 months ago, or first data date
-      minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-
-      // End at the later of: current month, or last data date
-      maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
-    }
-
-    // Generate all months in the range
-    const result = [];
-    let currentDate = minDate.clone();
-    while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-      const monthKey = currentDate.format('YYYY-MM');
-      const existingData = dataMap.get(monthKey);
-      if (existingData) {
-        result.push(existingData);
-      } else {
-        // Fill missing month with 0
-        result.push({
-          month: currentDate.format('YYYY-MM-DD'),
-          // Use first day of month
-          jobs: 0,
-          date: currentDate.format('YYYY-MM-DD')
-        });
-      }
-      currentDate = currentDate.add(1, 'month');
-    }
-    return result;
-  }, [activitiesTimelineChart]);
-
-  // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
-  const maxActivitiesYValue = React.useMemo(() => {
-    if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
-      return 100;
-    }
-    const maxValue = Math.max(...activitiesTimelineData.map(item => item.jobs || 0));
-    // If max is 0, set default to 100 to show Y-axis
-    if (maxValue === 0) {
-      return 100;
-    }
-    // Round up to nearest 10, but ensure minimum of 100
-    const roundedMax = Math.ceil(maxValue / 10) * 10;
-    return Math.max(100, roundedMax);
-  }, [activitiesTimelineData]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
       title: t("Restoration Cycle Outcomes"),
@@ -43154,172 +43564,17 @@ const CycleOutcomes = ({
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-            title: t("Restored Area"),
-            className: "with-border-header h-w-btn-header",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex flex-1 flex-column justify-content-center",
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex justify-content-center w-full",
-                children: /*#__PURE__*/jsxRuntime.jsx(LineChart, {
-                  animated: true,
-                  isArea: true,
-                  color: '#00AEB1',
-                  data: restoredAreaChartData,
-                  fillOpacity: 0.7,
-                  height: 200,
-                  renderTooltipContent: (title, data) => {
-                    if (!data || data.length === 0) return {};
-                    const item = data[0]?.data || data[0];
-                    const periodValue = item?.period !== undefined ? item.period : item?.value || 0;
-                    const cumulatedValue = item?.value || 0;
-                    return {
-                      title: t("Restored Area"),
-                      subTitle: formatDateAxis(title),
-                      items: [{
-                        label: t("Period"),
-                        value: `${periodValue.toLocaleString()} ha`
-                      }, {
-                        label: t("Cumulated"),
-                        value: `${cumulatedValue.toLocaleString()} ha`
-                      }]
-                    };
-                  },
-                  xFieldKey: "date",
-                  yFieldKey: "value",
-                  formattedXAxis: formatDateAxis,
-                  style: {
-                    width: '100%'
-                  },
-                  yAxis: {
-                    min: 0,
-                    max: maxYValue,
-                    tickMethod: () => {
-                      // Generate ticks every 10 units for maxYValue of 80
-                      // For other values, show ticks every 10 units
-                      const step = maxYValue <= 80 ? 10 : Math.max(10, Math.floor(maxYValue / 8));
-                      const ticks = [];
-                      for (let i = 0; i <= maxYValue; i += step) {
-                        ticks.push(i);
-                      }
-                      // Ensure max value is included
-                      if (ticks.length === 0 || ticks[ticks.length - 1] < maxYValue) {
-                        ticks.push(maxYValue);
-                      }
-                      return ticks;
-                    },
-                    label: {
-                      style: {
-                        fontSize: 12,
-                        fill: '#666'
-                      }
-                    },
-                    grid: {
-                      line: {
-                        style: {
-                          stroke: '#E5E7EB',
-                          lineWidth: 1
-                        }
-                      }
-                    }
-                  },
-                  xAxis: {
-                    label: {
-                      formatter: formatDateAxis,
-                      // Ensure formatter is applied
-                      style: {
-                        fontSize: 12,
-                        fill: '#666'
-                      }
-                    }
-                  }
-                })
-              })
-            })
+          children: /*#__PURE__*/jsxRuntime.jsx(RestoredArea, {
+            restoredAreaChart: restoredAreaChart,
+            t: t
           })
         }), /*#__PURE__*/jsxRuntime.jsx("section", {
           style: {
             flex: 1
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-            title: t("Planting Activities Timeline"),
-            className: "with-border-header h-w-btn-header",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex flex-1 flex-column justify-content-center",
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex justify-content-center w-full",
-                children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
-                  data: activitiesTimelineData,
-                  xFieldKey: "month",
-                  yFieldKey: "jobs",
-                  animated: true,
-                  height: 400,
-                  color: "#016C6E",
-                  renderTooltipContent: (title, data) => {
-                    if (!data || data.length === 0) return {};
-                    // For ColumnChart, data structure: data[0]?.data contains the actual data point
-                    const item = data[0]?.data || data[0];
-                    const count = item?.jobs || item?.value || 0;
-                    // Title is the X-axis value (month/date), use it for formatting
-                    const dateValue = item?.date || title || '';
-                    return {
-                      title: t("Planting Activities"),
-                      subTitle: formatDateAxis(dateValue),
-                      items: [{
-                        label: t("Total"),
-                        value: count
-                      }]
-                    };
-                  },
-                  formattedXAxis: formatDateAxis,
-                  formattedYAxis: value => {
-                    return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`);
-                  },
-                  yAxis: {
-                    min: 0,
-                    max: maxActivitiesYValue,
-                    tickMethod: () => {
-                      // Generate ticks: for 100 max, show 0, 20, 40, 60, 80, 100
-                      // For other values, show ticks every 20 units
-                      const step = maxActivitiesYValue <= 100 ? 20 : Math.max(20, Math.floor(maxActivitiesYValue / 5));
-                      const ticks = [];
-                      for (let i = 0; i <= maxActivitiesYValue; i += step) {
-                        ticks.push(i);
-                      }
-                      // Ensure max value is included
-                      if (ticks.length === 0 || ticks[ticks.length - 1] < maxActivitiesYValue) {
-                        ticks.push(maxActivitiesYValue);
-                      }
-                      return ticks;
-                    },
-                    label: {
-                      style: {
-                        fontSize: 12,
-                        fill: '#666'
-                      }
-                    },
-                    grid: {
-                      line: {
-                        style: {
-                          stroke: '#E5E7EB',
-                          lineWidth: 1
-                        }
-                      }
-                    }
-                  },
-                  xAxis: {
-                    label: {
-                      formatter: formatDateAxis,
-                      autoHide: true,
-                      style: {
-                        fontSize: 12,
-                        fill: '#666'
-                      }
-                    }
-                  }
-                })
-              })
-            })
+          children: /*#__PURE__*/jsxRuntime.jsx(PlantingActivitiesTimeline, {
+            activitiesTimelineChart: activitiesTimelineChart,
+            t: t
           })
         })]
       })]
@@ -43445,8 +43700,8 @@ const CyclePartners = ({
 };
 
 const HEALTH_SAFETY_COLORS = {
-  compliant: '#52C41A',
-  notCompliant: '#FF4D4F',
+  compliant: '#016C6E',
+  notCompliant: '#F97066',
   empty: '#D9D9D9'
 };
 const getIndicatorType = value => {
@@ -43515,8 +43770,9 @@ const isHealthAndSafetyDistributionEmpty = healthAndSafetyDistributionData => {
 const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData, t) => {
   const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
   const labels = {
-    compliant: t("Compliant"),
-    notCompliant: t("Not Compliant")
+    compliant: t("Available"),
+    notCompliant: t("Not available"),
+    empty: t("Not answered")
   };
   return Object.keys(healthAndSafetyDistributionData).map(key => {
     const color = HEALTH_SAFETY_COLORS[key] || '#D9D9D9';
@@ -43554,8 +43810,9 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
     return null;
   }
   const labels = {
-    compliant: t("Compliant"),
-    notCompliant: t("Not Compliant")
+    compliant: t("Available"),
+    notCompliant: t("Not available"),
+    empty: t("Not answered")
   };
 
   // Filter items with values > 0
@@ -43582,16 +43839,93 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
 };
 
 const HealthAndSafety = ({
-  activityData,
+  id,
+  getSummaryDetail,
   loading = false,
   t = s => s
 }) => {
-  const healthAndSafetyDistributionData = React.useMemo(() => getHealthAndSafetyDistributionData(activityData), [activityData]);
+  const defaultConfig = React.useMemo(() => ({
+    basepath: "planting-cycle",
+    url: `/summary/${id}/filtered-piechart`,
+    filters: {
+      field: 'duosFormed'
+    },
+    stop: !id
+  }), [id]);
+  const customGetData = React.useMemo(() => {
+    if (getSummaryDetail && id) {
+      return rest => {
+        const {
+          url,
+          filters: restFilters
+        } = rest;
+        const match = url.match(/\/summary\/[^/]+\/(.+)/);
+        if (match) {
+          const [, type] = match;
+          // Pass filters as params for the query string
+          const params = {
+            ...(restFilters || {})
+          };
+          return getSummaryDetail(id, type, params);
+        }
+        throw new Error(`Invalid URL format: ${url}`);
+      };
+    }
+    return undefined;
+  }, [getSummaryDetail, id]);
+  const {
+    loading: pieChartLoading,
+    data: pieChartData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+
+  // Process the fetched pie chart data
+  // The API returns data in format: [{count: 1, duosFormed: "null"}, {count: 1, duosFormed: "no"}, {count: 1, duosFormed: "yes"}]
+  const healthAndSafetyDistributionData = React.useMemo(() => {
+    if (!pieChartData) return {
+      compliant: 0,
+      notCompliant: 0,
+      empty: 0
+    };
+
+    // If it's already a distribution object
+    if (pieChartData.compliant !== undefined || pieChartData.notCompliant !== undefined) {
+      return pieChartData;
+    }
+
+    // If it's an array, process it
+    if (Array.isArray(pieChartData)) {
+      const distribution = {
+        compliant: 0,
+        notCompliant: 0,
+        empty: 0
+      };
+      pieChartData.forEach(item => {
+        const duosFormedValue = item.duosFormed;
+        const count = item.count || 0;
+
+        // Map duosFormed values to distribution categories
+        if (duosFormedValue === "yes" || duosFormedValue === true) {
+          distribution.compliant += count;
+        } else if (duosFormedValue === "no" || duosFormedValue === false) {
+          distribution.notCompliant += count;
+        } else if (duosFormedValue === "null" || duosFormedValue === null || duosFormedValue === undefined) {
+          distribution.empty += count;
+        }
+      });
+      return distribution;
+    }
+
+    // Fallback: try to extract from activityData-like structure
+    return getHealthAndSafetyDistributionData(pieChartData);
+  }, [pieChartData]);
   const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
   const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
   const getTooltipChildren = React.useCallback(item => getHealthAndSafetyTooltipChildren(item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx), [t, isEmpty, healthAndSafetyDistributionData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
-    loading: loading,
+    loading: loading || pieChartLoading,
     title: /*#__PURE__*/jsxRuntime.jsx("div", {
       children: t("Health and Safety")
     }),
@@ -43726,7 +44060,8 @@ const CycleIndicators = ({
             flex: 1
           },
           children: /*#__PURE__*/jsxRuntime.jsx(HealthAndSafety, {
-            activityData: indicatorsData,
+            id: id,
+            getSummaryDetail: getSummaryDetail,
             loading: indicatorsLoading,
             t: t
           })
@@ -43873,110 +44208,43 @@ const GenderDistribution = ({
   });
 };
 
+const selectOptions = [{
+  label: "Daily",
+  value: "daily"
+}, {
+  label: "Weekly",
+  value: "weekly"
+}, {
+  label: "Monthly",
+  value: "monthly"
+}];
 const JobsTimeline = ({
   dayJobsTimeline,
   loading = false,
   t = s => s
 }) => {
-  console.log('dayJobsTimeline', dayJobsTimeline);
+  const {
+    timeFilter,
+    setTimeFilter,
+    formatDateAxis,
+    processChartDateData
+  } = useTimeFilter({
+    defaultFilter: 'monthly'
+  });
   const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
-  const formatDateAxis = React.useMemo(() => {
-    return label => {
-      if (!label) return label;
-
-      // Try to parse the date using dayjs with various formats
-      let date = dayjs__default["default"](label);
-
-      // If first attempt fails, try parsing as ISO date string
-      if (!date.isValid() && typeof label === 'string') {
-        date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY'], true);
-      }
-
-      // If it's a valid date, format it as "Mmm YY"
-      if (date.isValid()) {
-        return date.format('MMM YY');
-      }
-
-      // If it's already in "Mmm YY" format or similar, return as is
-      // Otherwise return the original label
-      return label;
-    };
-  }, []);
   const jobsTimelineData = React.useMemo(() => {
-    // Always show last 12 months, even if no data
-    const now = dayjs__default["default"]().startOf('month');
-    const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-
-    // Create a map of existing data by month (YYYY-MM format)
-    const dataMap = new Map();
-    const dates = [];
-
-    // Process jobs data if available
-    if (jobsData && Array.isArray(jobsData) && jobsData.length > 0) {
-      jobsData.forEach(item => {
-        if (typeof item === 'object' && item !== null && item.date) {
-          const date = dayjs__default["default"](item.date);
-          if (date.isValid()) {
-            const monthKey = date.format('YYYY-MM');
-            const count = Number(item.total || item.count || item.jobs || item.value || 0) || 0;
-            dates.push(date);
-
-            // If multiple entries for same month, sum them
-            if (dataMap.has(monthKey)) {
-              dataMap.set(monthKey, {
-                ...dataMap.get(monthKey),
-                jobs: dataMap.get(monthKey).jobs + count
-              });
-            } else {
-              dataMap.set(monthKey, {
-                month: item.date,
-                jobs: count,
-                date: item.date
-              });
-            }
-          }
-        }
-      });
-    }
-
-    // Determine date range
-    let minDate = twelveMonthsAgo;
-    let maxDate = now;
-
-    // If we have data, adjust range to include it
-    if (dates.length > 0) {
-      const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-      const firstDataDate = sortedDates[0].startOf('month');
-      const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-
-      // Start from the earlier of: 12 months ago, or first data date
-      minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-
-      // End at the later of: current month, or last data date
-      maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
+    if (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) {
+      return [];
     }
 
-    // Generate all months in the range
-    const result = [];
-    let currentDate = minDate.clone();
-    while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-      const monthKey = currentDate.format('YYYY-MM');
-      const existingData = dataMap.get(monthKey);
-      if (existingData) {
-        result.push(existingData);
-      } else {
-        // Fill missing month with 0
-        result.push({
-          month: currentDate.format('YYYY-MM-DD'),
-          // Use first day of month
-          jobs: 0,
-          date: currentDate.format('YYYY-MM-DD')
-        });
-      }
-      currentDate = currentDate.add(1, 'month');
-    }
-    return result;
-  }, [jobsData]);
+    // Process data without cumulative calculation (for jobs timeline)
+    // Try to find value in total, count, jobs, or value fields
+    return processChartDateData({
+      mainData: jobsData,
+      isCumulative: false,
+      valueField: 'total' // Will fallback to count/jobs/value if total doesn't exist
+    });
+  }, [jobsData, processChartDateData]);
   const maxYValue = React.useMemo(() => {
     if (!jobsTimelineData || jobsTimelineData.length === 0) {
       return 100;
@@ -43994,9 +44262,22 @@ const JobsTimeline = ({
       children: t("Day Jobs Timeline")
     }),
     className: "with-border-header h-w-btn-header ",
+    addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+        value: timeFilter,
+        style: {
+          width: 100
+        },
+        onChange: value => setTimeFilter(value),
+        options: selectOptions,
+        popupMatchSelectWidth: 120
+      })]
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx(ColumnChart, {
       data: jobsTimelineData,
-      xFieldKey: "month",
+      xFieldKey: "date",
       yFieldKey: "jobs",
       animated: true
       // height={200}
@@ -44238,37 +44519,732 @@ const CommunityParticipation = ({
   });
 };
 
+const ACTIVITIES_TAB$1 = 'activities';
+const PARTNERS_TAB$1 = 'partners';
+const INCIDENTS_TAB$1 = 'incidents';
+const getColumns = ({
+  projectId,
+  t,
+  show = 'show',
+  navigate,
+  selectOptions,
+  view,
+  getRedirectLink,
+  activeTab = ACTIVITIES_TAB$1
+}) => {
+  if (activeTab === ACTIVITIES_TAB$1) {
+    return [{
+      title: "",
+      dataIndex: 'image',
+      key: 'image',
+      active: true,
+      width: 80,
+      pending: true,
+      suspended: true,
+      ellipsis: true,
+      render: (v, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const firstGroupPhoto = all?.groupPhotos?.[0];
+        const pictures = firstGroupPhoto?.pictures;
+        const firstPicture = Array.isArray(pictures) && pictures.length > 0 ? pictures[0] : null;
+        let imageUrl = firstPicture?.url;
+        const normalizeUrl = url => url?.endsWith(':') ? url.slice(0, -1) : url;
+        let normalizedUrl = imageUrl ? normalizeUrl(imageUrl.trim()) : null;
+        if (normalizedUrl && !normalizedUrl.startsWith('http://') && !normalizedUrl.startsWith('https://') && !normalizedUrl.startsWith('//')) {
+          if (normalizedUrl.startsWith('cdn.') || normalizedUrl.includes('.') && !normalizedUrl.startsWith('/')) {
+            normalizedUrl = `https://${normalizedUrl}`;
+          }
+        }
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "daf-default-cell",
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              width: 32,
+              height: 32,
+              borderWidth: '1px',
+              borderStyle: 'solid',
+              borderColor: '#E5E7EB',
+              borderRadius: '6px',
+              background: '#F9FAFB',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: 'hidden',
+              position: 'relative'
+            },
+            children: normalizedUrl && /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: normalizedUrl,
+              alt: all.name || 'Activity image',
+              style: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                borderRadius: '6px'
+              },
+              onError: e => {
+                e.target.style.display = 'none';
+              }
+            })
+          })
+        });
+      }
+    }, {
+      title: t('ID'),
+      dataIndex: 'datastakeId',
+      key: 'datastakeId',
+      active: true,
+      pending: true,
+      suspended: true,
+      ellipsis: true,
+      render: (v, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "daf-default-cell",
+          children: all.datastakeId
+        });
+      }
+    }, {
+      title: t("Title"),
+      dataIndex: "name",
+      key: "name",
+      ellipsis: true,
+      active: true,
+      pending: true,
+      suspended: true,
+      render: value => /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+        title: value,
+        children: value
+      })
+    }, {
+      title: t("Type"),
+      dataIndex: "type",
+      key: "type",
+      ellipsis: true,
+      active: true,
+      pending: true,
+      suspended: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: value,
+          children: capitalize(value) || '-'
+        });
+      }
+    }, {
+      title: t("Location"),
+      dataIndex: "location",
+      key: "location",
+      ellipsis: true,
+      active: true,
+      pending: true,
+      width: 220,
+      suspended: true,
+      show: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const location = all.location || value;
+        if (location && typeof location === 'object' && typeof location.latitude === 'number' && typeof location.longitude === 'number') {
+          const coordinates = convertDMS(location.latitude, location.longitude);
+          const iconColor = "#016C6E";
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              flexWrap: 'nowrap'
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px'
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                name: "SpacingHeight",
+                width: 14,
+                height: 14,
+                fill: iconColor
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: coordinates[0]
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px'
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+                name: "SpacingWidth",
+                width: 14,
+                height: 14,
+                fill: iconColor
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: coordinates[1]
+              })]
+            })]
+          });
+        }
+        let locationDisplay = '-';
+        if (all.project?.name || all.project?.title) {
+          locationDisplay = all.project?.name || all.project?.title;
+        } else if (location?.name) {
+          locationDisplay = location.name;
+        } else if (value && typeof value === 'string') {
+          locationDisplay = value;
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: locationDisplay,
+          children: locationDisplay
+        });
+      }
+    }, {
+      title: t("Implementer"),
+      dataIndex: "technicalPartner",
+      key: "implementer",
+      ellipsis: true,
+      show: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const implementerName = all.technicalPartner || all.implementer?.name || all.implementer?.title || value || '-';
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: implementerName,
+          children: implementerName
+        });
+      }
+    }, {
+      title: t("Status"),
+      dataIndex: "published",
+      key: "published",
+      ellipsis: false,
+      show: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        let statusDisplay = '-';
+        let color = 'default';
+        if (value !== undefined) {
+          statusDisplay = value ? t('Published') : t('Unpublished');
+          color = value ? 'green' : 'default';
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+          color: color,
+          style: {
+            width: 100
+          },
+          className: "text-center",
+          children: t(statusDisplay)
+        });
+      }
+    }, {
+      title: t("Date"),
+      dataIndex: "lastUpdated",
+      key: "lastUpdated",
+      ellipsis: true,
+      active: true,
+      pending: false,
+      suspended: true,
+      show: true,
+      render: (val, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const title = renderDateFormatted(all.updatedAt || all.date, "DD MMM YYYY");
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: title,
+          children: title
+        });
+      }
+    }, {
+      title: "",
+      dataIndex: "actions",
+      key: "actions",
+      width: 60,
+      render: (_, val) => {
+        if (val.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const items = [{
+          key: "viewSummary",
+          label: t("Summary"),
+          onClick: () => {
+            const link = `/app/projects/${projectId}/restoration/summary/${val.datastakeId}`;
+            navigate(getRedirectLink(link));
+          }
+        }, {
+          key: "viewDetails",
+          label: t("Details"),
+          onClick: () => {
+            const link = `/app/projects/${projectId}/restoration/view/general/${val.datastakeId}/identification`;
+            navigate(getRedirectLink(link));
+          }
+        }];
+        return /*#__PURE__*/jsxRuntime.jsx(MoreMenu, {
+          items: items
+        });
+      },
+      ellipsis: true
+    }];
+  }
+  if (activeTab === PARTNERS_TAB$1) {
+    return [{
+      title: t('ID'),
+      dataIndex: 'datastakeId',
+      key: 'datastakeId',
+      ellipsis: true,
+      width: 160,
+      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("Name"),
+      dataIndex: "name",
+      key: "name",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const name = value || all.nickName || '-';
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: name,
+          children: name
+        });
+      }
+    }, {
+      title: t("Category"),
+      dataIndex: "category",
+      key: "category",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: value,
+          children: value || '-'
+        });
+      }
+    }, {
+      title: t("Subcategory"),
+      dataIndex: "subcategory",
+      key: "subcategory",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: value,
+          children: value || '-'
+        });
+      }
+    }, {
+      title: t("Country"),
+      dataIndex: "country",
+      key: "country",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const title = findOptions(value, selectOptions?.country || []) || '-';
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: title,
+          children: title
+        });
+      }
+    }, {
+      title: t("Last Update"),
+      dataIndex: "lastUpdated",
+      key: "lastUpdated",
+      ellipsis: true,
+      render: (val, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const title = renderDateFormatted(all.updatedAt || all.lastUpdated, "DD MMM YYYY");
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: title,
+          children: title
+        });
+      }
+    }, {
+      title: t(''),
+      dataIndex: 'actions',
+      key: 'actions',
+      width: 60,
+      render: (_, record) => {
+        const onClick = () => {
+          record.id;
+          const link = `/app/projects/${projectId}/implementation-partners/view/general/${record?.datastakeId}/identification`;
+          navigate(getRedirectLink(link));
+        };
+        return !record.empty ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "cursor-pointer",
+          onClick: onClick,
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: "Link",
+            width: 16,
+            height: 16,
+            color: "#6C737F"
+          })
+        }) : null;
+      },
+      active: true,
+      pending: true,
+      suspended: true
+    }];
+  }
+  if (activeTab === INCIDENTS_TAB$1) {
+    return [{
+      title: t('ID'),
+      dataIndex: 'datastakeId',
+      key: 'datastakeId',
+      ellipsis: true,
+      width: 160,
+      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("Title"),
+      dataIndex: "name",
+      key: "name",
+      ellipsis: true,
+      render: value => /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+        title: value,
+        children: value
+      })
+    }, {
+      title: t("Date"),
+      dataIndex: "date",
+      key: "date",
+      ellipsis: true,
+      render: (val, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const title = renderDateFormatted(all.date || all.updatedAt, "DD MMM YYYY");
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: title,
+          children: title
+        });
+      }
+    }, {
+      title: t("Location"),
+      dataIndex: "location",
+      key: "location",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        let locationDisplay = '-';
+        if (all.location?.name) {
+          locationDisplay = all.location.name;
+        } else if (all.mineSite?.name) {
+          locationDisplay = all.mineSite.name;
+        } else if (all.location && typeof all.location === 'object' && all.location.latitude && all.location.longitude) {
+          locationDisplay = `${all.location.latitude.toFixed(6)}, ${all.location.longitude.toFixed(6)}`;
+        } else if (value && typeof value === 'string') {
+          locationDisplay = value;
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: locationDisplay,
+          children: locationDisplay
+        });
+      }
+    }, {
+      title: t("Province"),
+      dataIndex: "province",
+      key: "province",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        let province = '-';
+        if (all.province) {
+          province = all.province;
+        } else if (all.location && typeof all.location === 'object' && all.location.administrativeLevel1) {
+          province = all.location.administrativeLevel1;
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: province,
+          children: province
+        });
+      }
+    }, {
+      title: t("Territory"),
+      dataIndex: "territory",
+      key: "territory",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        let territory = '-';
+        if (all.territory) {
+          territory = all.territory;
+        } else if (all.location && typeof all.location === 'object' && all.location.administrativeLevel2) {
+          territory = all.location.administrativeLevel2;
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: territory,
+          children: territory
+        });
+      }
+    }, {
+      title: t("Category"),
+      dataIndex: "category",
+      key: "category",
+      ellipsis: true,
+      render: (value, all) => {
+        if (all.empty) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "daf-default-cell"
+          });
+        }
+        const category = all.eventCategory || all.category || value || '-';
+        return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: category,
+          children: category
+        });
+      }
+    }, {
+      title: t(''),
+      dataIndex: 'actions',
+      key: 'actions',
+      width: 60,
+      render: (_, record) => {
+        const onClick = () => {
+          const link = `/app/projects/${projectId}/implementation-partners/view/general/${record.datastakeId}/identification`;
+          getRedirectLink(link);
+        };
+        return !record.empty ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "cursor-pointer",
+          onClick: onClick,
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: "Link",
+            width: 16,
+            height: 16,
+            color: "#6C737F"
+          })
+        }) : null;
+      },
+      active: true,
+      pending: true,
+      suspended: true
+    }];
+  }
+  return [];
+};
+
 const ACTIVITIES_TAB = 'activities';
 const PARTNERS_TAB = 'partners';
 const INCIDENTS_TAB = 'incidents';
+const DEFAULT_SEARCH_FIELDS = ["name", "datastakeId"];
+const URL_PATTERN = /\/summary\/[^/]+\/(.+)/;
+
+// Configuration
+const TABS_CONFIG = [{
+  label: "straatos::activities",
+  value: ACTIVITIES_TAB
+}, {
+  label: "straatos::partners",
+  value: PARTNERS_TAB
+}, {
+  label: "straatos::incidents",
+  value: INCIDENTS_TAB,
+  disabled: true
+}];
+
+// Helper functions
+const getSearchFields = activeTab => DEFAULT_SEARCH_FIELDS;
+const buildSearchFilter = (search, fields) => search ? {
+  search: {
+    qs: search,
+    fields
+  }
+} : {};
+const extractTypeFromUrl = url => {
+  const match = url.match(URL_PATTERN);
+  if (!match) {
+    throw new Error(`Invalid URL format: ${url}`);
+  }
+  return match[1];
+};
+const ensureArray = data => Array.isArray(data) ? data : [];
 const AssociatedInformation = ({
-  activityData,
+  id,
+  navigate,
+  getSummaryDetail,
   loading = false,
+  projectId,
+  basepath = "planting-cycle",
+  endpoint = "associated-information",
+  tabsConfig = TABS_CONFIG,
+  searchFieldsMap = getSearchFields,
+  selectOptions,
   t = s => s
 }) => {
   const [activeTab, setActiveTab] = React.useState(ACTIVITIES_TAB);
+  const [search, setSearch] = React.useState('');
+  const searchFields = React.useMemo(() => searchFieldsMap(activeTab), [activeTab, searchFieldsMap]);
+  const filters = React.useMemo(() => ({
+    type: activeTab,
+    ...buildSearchFilter(search, searchFields)
+  }), [activeTab, search, searchFields]);
+  const defaultConfig = React.useMemo(() => ({
+    basepath,
+    url: `/summary/${id}/${endpoint}`,
+    filters,
+    stop: !id
+  }), [id, filters, basepath, endpoint]);
+  const customGetData = React.useMemo(() => {
+    if (!getSummaryDetail || !id) return undefined;
+    return rest => {
+      const {
+        url,
+        filters: restFilters
+      } = rest;
+      const type = extractTypeFromUrl(url);
+      const params = {
+        ...(restFilters || {}),
+        type: restFilters?.type || activeTab
+      };
+      return getSummaryDetail(id, type, params);
+    };
+  }, [getSummaryDetail, id, activeTab]);
+  const {
+    loading: associatedInformationLoading,
+    data: associatedInformationData,
+    setData
+  } = useWidgetFetch({
+    config: defaultConfig,
+    getData: customGetData
+  });
+
+  // Reset data and search when tab changes
+  React.useEffect(() => {
+    setData([]);
+    setSearch('');
+  }, [activeTab, setData]);
+  const handleSearch = React.useCallback((activeFilter, searchValue) => {
+    setSearch(searchValue || '');
+  }, []);
+  const handleTabChange = React.useCallback(value => {
+    setActiveTab(value);
+  }, []);
+  const columns = React.useMemo(() => getColumns({
+    t,
+    activeTab,
+    view: activeTab,
+    projectId,
+    navigate,
+    getRedirectLink,
+    selectOptions
+  }), [t, activeTab, projectId, navigate, selectOptions]);
+  const tableDataSource = React.useMemo(() => ensureArray(associatedInformationData), [associatedInformationData]);
+  const translatedTabs = React.useMemo(() => tabsConfig.map(tab => ({
+    ...tab,
+    label: t(tab.label)
+  })), [tabsConfig, t]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
-    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-      className: "v2-widget no-px h-w-btn-header no-p-body",
+    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
+      className: "v2-widget no-px no-p-body h-w-btn-header with-border-header",
       title: t("Associated Information"),
       tabsConfig: {
-        tabs: [{
-          label: t("straatos::activities"),
-          value: ACTIVITIES_TAB
-        }, {
-          label: t("straatos::partners"),
-          value: PARTNERS_TAB
-        }, {
-          label: t("straatos::incidents"),
-          value: INCIDENTS_TAB
-        }],
+        tabs: translatedTabs,
         value: activeTab,
-        onChange: value => {
-          setActiveTab(value);
-          // setData([]);
-        }
+        onChange: handleTabChange
       },
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {})
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "mt-6 ml-6 mr-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(SearchFilters, {
+          t: t,
+          showFilter: false,
+          hasError: false,
+          canClear: true,
+          setHasError: () => {},
+          onSearch: handleSearch,
+          activeFilters: {
+            search
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "mb-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(StickyTable, {
+          columns: columns,
+          dataSource: tableDataSource,
+          loading: associatedInformationLoading || loading
+        })
+      })]
     })
   });
 };
@@ -44365,12 +45341,15 @@ const PlantingCycleSummary = ({
   activityData,
   loading = false,
   id,
+  projectId,
   t = () => {},
-  getSummaryDetail
+  getSummaryDetail,
+  navigate,
+  selectOptions
 }) => {
   return /*#__PURE__*/jsxRuntime.jsxs(DashboardLayout, {
     header: /*#__PURE__*/jsxRuntime.jsx(DAFHeader, {
-      title: header?.title || '',
+      title: header?.title + ' Summary' || '',
       supportText: header?.supportText || '',
       onDownload: header?.onDownload,
       downloadDisabled: header?.downloadDisabled,
@@ -44406,9 +45385,12 @@ const PlantingCycleSummary = ({
       t: t
     }), /*#__PURE__*/jsxRuntime.jsx(AssociatedInformation, {
       id: id,
+      projectId: projectId,
       getSummaryDetail: getSummaryDetail,
       loading: loading,
-      t: t
+      t: t,
+      navigate: navigate,
+      selectOptions: selectOptions
     })]
   });
 };