datastake-daf 0.6.755 → 0.6.757

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -54,9 +54,10 @@ const BaseGraph = forwardRef(function BaseGraph(
 
 		requestAnimationFrame(() => {
 			fitView({
-				padding: 0.1,
+				padding: 0.4,
 				nodes: [...nodesToFit],
 				duration: withDuration ? 300 : undefined,
+				maxZoom: 0.8,
 			});
 		});
 	}, [JSON.stringify(nodesToFit), withDuration]);
@@ -82,8 +83,9 @@ const BaseGraph = forwardRef(function BaseGraph(
 					minZoom={minZoom}
 					maxZoom={maxZoom}
 					attributionPosition="top-left"
+					fitView={true} // zoom out on default
 					fitViewOptions={{
-						padding: 0.1,
+						padding: 0.2, //zoom out on default
 						duration: withDuration ? 300 : undefined,
 					}}
 					{...props}

package/src/@daf/core/components/Icon/configs/ClockPlus.js

@@ -0,0 +1,14 @@
+const config = {
+	viewBox: "0 0 19 19",
+	children: (
+		<path 
+            d="M17.3506 10.1375C17.3942 9.79224 17.4167 9.44041 17.4167 9.08333C17.4167 4.48096 13.6857 0.75 9.08333 0.75C4.48096 0.75 0.75 4.48096 0.75 9.08333C0.75 13.6857 4.48096 17.4167 9.08333 17.4167C9.44617 17.4167 9.80359 17.3935 10.1542 17.3485M9.08333 4.08333V9.08333L12.1986 10.641M14.9167 17.4167V12.4167M12.4167 14.9167H17.4167" 
+            stroke="currentColor" 
+            strokeWidth="1.5" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+        />
+	),
+};
+
+export default config;

package/src/@daf/core/components/Icon/configs/WaziDarkIcon.js

@@ -0,0 +1,15 @@
+const config = {
+    viewBox: '0 0 25 26',
+    children: (
+        <path 
+            d="M12.5001 0C19.4037 2.39999e-07 25.0001 5.59644 25.0001 12.5C25.0001 19.0635 19.941 24.4456 13.5099 24.96C13.1457 24.9946 12.7787 25.0126 12.4103 25.0146H12.1056C5.42401 25.0146 0.00713129 19.5985 0.00695801 12.917C0.00242724 12.7787 0.000122101 12.6394 0.00012207 12.5C0.00012207 5.59644 5.59656 0 12.5001 0ZM12.1642 5.32715C8.53558 5.32715 5.65747 8.46702 5.65735 12.2588V13.4951C5.65735 17.287 8.5355 20.4268 12.1642 20.4268C15.7926 20.4264 18.671 17.2868 18.671 13.4951V12.2588C18.6709 8.46722 15.7925 5.32748 12.1642 5.32715ZM12.1642 6.42676C15.1149 6.42709 17.5703 9.00217 17.5704 12.2588V13.4951C17.5704 16.7518 15.115 19.3268 12.1642 19.3271C9.21313 19.3271 6.75696 16.7521 6.75696 13.4951V12.2588C6.75708 9.00197 9.21321 6.42676 12.1642 6.42676ZM11.7618 9.40918L8.86145 12.5166L8.51086 12.8926L8.86145 13.2676L11.7618 16.375L12.1642 16.8057L12.5665 16.375L15.4669 13.2676L15.8175 12.8926L15.4669 12.5166L12.5665 9.40918L12.1642 8.97852L11.7618 9.40918ZM13.798 13.4424L12.1632 15.1924L10.5294 13.4424H13.798ZM13.798 12.3418H10.5294L12.1632 10.5908L13.798 12.3418Z" 
+            fill="currentColor"
+        />
+    ),
+    tag: ['logo']
+  }
+  
+  export default config;
+  
+  
+  

package/src/@daf/core/components/Icon/configs/index.js

@@ -222,6 +222,8 @@ import Aid from "./Aid";
 import Bear from "./Bear";
 import Security from "./Security";
 import Minus from "./Minus";
+import ClockPlus from "./ClockPlus";
+import WaziDarkIcon from "./WaziDarkIcon";
 
 const config = {
 	AppAdmin,
@@ -448,6 +450,8 @@ const config = {
 	Bear,
 	Security,
 	Minus,
+	ClockPlus,
+	WaziDarkIcon,
 };
 
 export default config;

package/src/@daf/core/components/Screens/BaseScreen/index.jsx

@@ -104,8 +104,8 @@ const BaseScreen = ({
 	});
 
 	useEffect(() => {
-		if (typeof data?.meta?.total === "number") {
-			setPagination((prev) => ({ ...prev, total: data?.meta?.total }));
+		if (typeof (data?.meta?.total || data?.totalItems) === "number") {
+			setPagination((prev) => ({ ...prev, total: (data?.meta?.total || data?.totalItems) }));
 		}
 	}, [data]);
 
@@ -161,7 +161,7 @@ const BaseScreen = ({
 						goNext={goNext}
 						canGoNext={canGoNext}
 						canGoPrev={canGoPrev}
-						totalItems={pagination.total}
+						totalItems={pagination.total || pagination.pageSize}
 						doTotalItems
 						onChangePagination={(val) => {
 							onTableChange({ ...pagination, current: 1, pageSize: val });

package/src/@daf/hooks/useFilters.js

@@ -15,7 +15,7 @@ export const useFilters = ({
   doPagination = true,
   getRedirectLink,
 }) => {
-  const params = useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const params = useMemo(() => new URLSearchParams(location?.search), [location?.search]);
   const [activeFilters, setActiveFilters] = useState(
     defaultActiveFilters || getDefaultActiveFilters(params, selectFiltersConfig, defaultPageSize, defaultUrlParams, doPagination)
   );
@@ -69,9 +69,9 @@ export const useFilters = ({
       if (typeof getRedirectLink === 'function') {
         goTo(getRedirectLink(
           view === 'mine-monitoring' 
-            ? (qs !== '' ? `${location.pathname}?${qs}`
-                : doPagination ? `${location.pathname}?page=${page}`
-                  : location.pathname)
+            ? (qs !== '' ? `${location?.pathname}?${qs}`
+                : doPagination ? `${location?.pathname}?page=${page}`
+                  : location?.pathname)
             : (qs !== '' ? `${`/app/${view}`}?${qs}`
                 : doPagination ? `${`/app/${view}`}?page=${page}`
                   : `${`/app/${view}`}`)
@@ -81,9 +81,9 @@ export const useFilters = ({
 
       if (view === 'mine-monitoring') {
         goTo(
-          qs !== '' ? `${location.pathname}?${qs}`
-            : doPagination ? `${location.pathname}?page=${page}`
-              : location.pathname);
+          qs !== '' ? `${location?.pathname}?${qs}`
+            : doPagination ? `${location?.pathname}?page=${page}`
+              : location?.pathname);
       } else {
         goTo(
           qs !== '' ? `${`/app/${module}/${view}`}?${qs}`
@@ -91,7 +91,7 @@ export const useFilters = ({
               : `${`/app/${module}/${view}`}`);
       }
     }
-  }, [module, view, location.pathname, goTo, getRedirectLink, doPagination]);
+  }, [module, view, location?.pathname, goTo, getRedirectLink, doPagination]);
 
   const defaultFilters = useMemo(() => {
     const def = {};
@@ -234,6 +234,8 @@ export const useFilters = ({
   const canGoPrev = useMemo(() => pagination.current !== 1, [pagination]);
   const canGoNext = useMemo(() => pagination.current !== totalPages && totalPages, [pagination, totalPages]);
 
+  console.log({totalPages, pagination})
+
   const goPrev = () => {
     if (!canGoPrev) {
       return;

package/src/@daf/hooks/useWidgetFetch.js

@@ -16,9 +16,9 @@ export const useWidgetFetch = ({config, getData = DashboardService.getWidget, on
 
 
 	const fetchData = async () => {
-		// if (stop) {
-		// 	return;
-		// }
+		if (stop) {
+			return;
+		}
 
 		setLoading(true);
 

package/src/@daf/pages/Dashboards/SupplyChain/index.jsx

@@ -20,7 +20,7 @@ function SupplyChain({
     setSelectedPartners, 
     informationSources,
     hardcodedData,
-    breadCrumbs = [],
+    breadcrumbs = [],
 }) {
 
     const sourceOptions = useMemo(() => {
@@ -69,7 +69,7 @@ function SupplyChain({
                             />
                         </div>
                     }
-                    breadcrumbs={breadCrumbs}
+                    breadcrumbs={breadcrumbs}
                 />
             }
         >

package/src/@daf/pages/Dashboards/helper.js

@@ -11,7 +11,7 @@ const individualIcon = <CustomIcon name="UserCircle" color="#6C737F" width={18}
 const csIcon = <CustomIcon name="CivilSociety" color="#6C737F" width={18} height={18} />;
 const leftIcon = (
 	<CustomIcon
-		name="NashirikiSmallLogo"
+		name="WaziDarkIcon"
 		color={theme.colorPrimary8}
 		width={16}
 		height={16}
@@ -19,14 +19,14 @@ const leftIcon = (
 );
 const middleIcon = (
 	<CustomIcon
-		name="NashirikiSmallLogo"
+		name="WaziDarkIcon"
 		color={theme.colorPrimary2}
 		width={16}
 		height={16}
 	/>
 );
 
-const rightIcon = <CustomIcon name="NashirikiSmallLogo" color="white" width={16} height={16} />;
+const rightIcon = <CustomIcon name="WaziDarkIcon" color="white" width={16} height={16} />;
 
 const mapIcon = (category) => {
 	switch (category) {

package/src/@daf/pages/Documents/columns.js

@@ -37,7 +37,6 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     title: t("Date"),
     dataIndex: "date",
     key: "date",
-    width: 125,
     render: (date, all) => {
       if (all.empty) {
         return <div className="daf-default-cell" />;
@@ -58,19 +57,18 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
         return <div className="daf-default-cell" />;
       }
       if (!val || val?.length === 0) {
-        return "--";
+        return "-";
       }
 
       const sources = sourceAvatarConfig(val, user, applications);
 
-      return <AvatarGroup items={sources}></AvatarGroup>;
+      return <AvatarGroup items={sources} />;
     },
   },
   {
     title: t("Last Update"),
     dataIndex: "updatedAt",
     key: "updatedAt",
-    width: 125,
     render: (date, all) => {
       if (all.empty) {
         return <div className="daf-default-cell" />;

package/src/@daf/pages/Documents/index.jsx

@@ -34,6 +34,7 @@ const DocumentsTable = ({
     form = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -49,8 +50,6 @@ const DocumentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     useEffect(() => {
@@ -91,7 +90,7 @@ const DocumentsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Documents")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/Activities/index.jsx

@@ -35,6 +35,7 @@ const ActivitiesTable = ({
     extendingFilters = {},
     createDefaultValues = {},
     applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -47,13 +48,11 @@ const ActivitiesTable = ({
         activeTab,
         getRedirectLink, 
         theme,
-        subject: 'correctiveActions',
+        subject: 'activities',
         data,
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -95,7 +94,7 @@ const ActivitiesTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Activities")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/Incidents/index.jsx

@@ -35,6 +35,7 @@ const IncidentsTable = ({
     extendingFilters = {},
     createDefaultValues = {},
     applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -52,8 +53,6 @@ const IncidentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -95,7 +94,7 @@ const IncidentsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Incidents")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Events/columns.js

@@ -96,7 +96,7 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
       })
 
       if (val?.length === 0) {
-        return "--";
+        return "-";
       }
 
       return <MoreTags values={val} />;
@@ -106,19 +106,19 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     title: t("Date"),
     dataIndex: "date",
     key: "date",
-    testimonials: true,
-    incident: true,
-    correctiveActions: true,
+    // testimonials: true,
+    // incident: true,
+    // correctiveActions: true,
     show: true,
-    sorter: () => 0 + 0,
-    searchType: "date",
-    width: 125,
+    // sorter: () => 0 + 0,
+    // searchType: "date",
+    // width: 125,
     render: (date, all) => {
       if (all.empty) {
         return null;
       }
 
-      const title = date ? renderDateFormatted(date, "DD MMM YYYY") : "--";
+      const title = date ? renderDateFormatted(date, "DD MMM YYYY") : "-";
       return <Tooltip title={title}>{title}</Tooltip>;
     },
     ellipsis: true,
@@ -134,13 +134,13 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
       }
 
       if (!value) {
-        return "--";
+        return "-";
       }
 
       // Form the moment the intend of the if block is to be executed only in event table
       if (typeof value === "string") {
         if (all.navigationEventType === "other") {
-          return "--";
+          return "-";
         }
 
         const categoryOptions = (data?.options?.categoryOptions || []).map((c) => {
@@ -158,13 +158,13 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
           ...(data?.options?.testimonialsType || []),
         ];
 
-        const title = relaxantOptions.find((v) => v.value === value)?.label || "--";
+        const title = relaxantOptions.find((v) => v.value === value)?.label || "-";
 
         return <Tooltip title={title}>{title}</Tooltip>;
       }
 
       const val = value.map((v, i) => ({ label: v.name, value: `${v.name}-${i}` }));
-      return val.length ? <MoreTags values={val} /> : "--";
+      return val.length ? <MoreTags values={val} /> : "-";
     },
   },
   {
@@ -190,7 +190,6 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     correctiveActions: activeTab === "own",
     testimonials: activeTab === "own",
     incident: activeTab === "own",
-    width: 120,
     render: (value, all) => {
       if (all.empty) {
         return <div className="daf-default-cell" />;
@@ -209,7 +208,6 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     title: t("Last Update"),
     dataIndex: "updatedAt",
     key: "updatedAt",
-    width: 125,
     render: (date, all) => {
       if (all.empty) {
         return <div className="daf-default-cell" />;

package/src/@daf/pages/Events/index.jsx

@@ -35,6 +35,7 @@ const EventsTable = ({
     extendingFilters = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -52,8 +53,6 @@ const EventsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
     const filters = useMemo(() => {
@@ -101,7 +100,7 @@ const EventsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("events")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Locations/MineSite/columns.js

@@ -4,7 +4,9 @@ import { findOptions } from '../../../../helpers/StringHelper.js';
 import { renderDateFormatted } from '../../../../helpers/Forms.js';
 import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
 import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
+
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -12,7 +14,7 @@ const getLinkValue = (value, linkingObject) => {
   return null;
 }
 
-export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data}) => [
+export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
         dataIndex: 'datastakeId',
         title: t('ID'),
@@ -40,8 +42,8 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },    
     {
-        dataIndex: 'province',
-        title: t('Province'),
+        dataIndex: 'region',
+        title: t('Region'),
         ellipsis: true,
         show: true,
         render: (v, all) => {
@@ -49,13 +51,11 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
+          const region = getLinkValue(all?.administrativeLevel1, all?.linking?.SCL);
 
           return region ? <Tooltip title={region}>{region}</Tooltip> : '-';
         },
     },   
-        
- 
     {
         dataIndex: 'territory',
         title: t('Territory'),
@@ -66,26 +66,25 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
+          const district = getLinkValue(all?.administrativeLevel2, all?.linking?.SCL);
 
           return district ? <Tooltip title={district}>{district}</Tooltip> : '-';
         },
     },     
     {
-        title: t("Products"),
-        dataIndex: "products",
-        key: "products",
-        show: activeTab !== "own",
-        render: (val, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
-
-            console.log({val, all})
-
-            return <AvatarGroup items={val}></AvatarGroup>;
+        dataIndex: 'category',
+        title: t('Type'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+          const category = findOptions(v, options?.locationCategories);
+    
+          return <Tooltip title={category}>{category}</Tooltip>;
         },
-    },
+    },    
     {
         dataIndex: 'operator',
         title: t('Operator'),
@@ -132,15 +131,15 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
     
       {
         title: t("Sources"),
-        dataIndex: 'source',
+        dataIndex: 'sources',
         ellipsis: true,
         show: activeTab !== "own",
         render: (v, all) => {
           if (all.empty) {
             return <div className="daf-default-cell" />
           }
-          const source = findOptions(v, data?.options?.sourceOptions);
-          return source ? <Tooltip title={source}>{source}</Tooltip> : '-';
+          const sources = sourceAvatarConfig(v, user, applications);
+          return <AvatarGroup items={sources}></AvatarGroup>;
         },
       },
       {
@@ -152,7 +151,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />;
           }
           const onClick = () => {
-            const link = `/app/view/${subject}/${all.datastakeId}`;
+            let link = `/app/view/${subject}/${all.datastakeId}`;
             if (activeTab === "shared") {
               link += `?sourceId=${all?.authorId?.id}`;
             }

package/src/@daf/pages/Locations/MineSite/index.jsx

@@ -34,6 +34,8 @@ const ProductionSitesTable = ({
     form = {},
     extendingFilters = {},
     createDefaultValues = {},
+    applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState('own');
@@ -48,9 +50,8 @@ const ProductionSitesTable = ({
         theme,
         subject: 'production-sites',
         data,
-    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data]);
-
-    const breadCrumbs = [];
+        applications,   
+    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
@@ -93,7 +94,7 @@ const ProductionSitesTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("production-sites")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Locations/columns.js

@@ -80,7 +80,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const province = getLinkValue(v, all?.linking?.SCL);
+          const province = getLinkValue(all?.administrativeLevel1, all?.linking?.SCL);
 
           return province ? <Tooltip title={province}>{province}</Tooltip> : '-';
         },
@@ -95,7 +95,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const territory = getLinkValue(v, all?.linking?.SCL);
+          const territory = getLinkValue(all?.administrativeLevel2, all?.linking?.SCL);
 
           return territory ? <Tooltip title={territory}>{territory}</Tooltip> : '-';
         },

package/src/@daf/pages/Locations/index.jsx

@@ -34,6 +34,7 @@ const LocationsTable = ({
     form = {},
     applications = [],
     subjectClear = () => {},
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -51,8 +52,6 @@ const LocationsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
-
     const { paginationQuery, searchParams, otherParams } = useGetQueryParams({location});
 
     useEffect(() => {
@@ -92,7 +91,7 @@ const LocationsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Locations")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Stakeholders/Operators/index.jsx

@@ -35,6 +35,7 @@ const OperatorsTable = ({
     extendingFilters = {},
     createDefaultValues = {},
     applications = [],
+    breadcrumbs = [],
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState('own');
@@ -52,7 +53,6 @@ const OperatorsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const breadCrumbs = [];
 
     const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
 
@@ -95,7 +95,7 @@ const OperatorsTable = ({
         <TablePageWithTabs 
            t={t}
            title={t("Operators")}
-           breadCrumbs={breadCrumbs}
+           breadCrumbs={breadcrumbs}
            location={location}
            loading={loading}
            goTo={goTo}

package/src/@daf/pages/Stakeholders/Workers/columns.js

@@ -167,10 +167,20 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         const link = `/app/view/${subject}/${all.datastakeId}`;
 
         return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+            <button 
+                onClick={() => goTo(getRedirectLink(link))}
+                style={{ 
+                    cursor: 'pointer', 
+                    border: 'none', 
+                    background: 'transparent',
+                    padding: 0,
+                    display: 'flex',
+                    alignItems: 'center'
+                }}
+            >
+                <CustomIcon name="Link" size={15} color={theme.baseGray70} />
+            </button>
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);