datastake-daf 0.6.758 → 0.6.760

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.758",
+	"version": "0.6.760",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Map/Map.stories.js

@@ -80,4 +80,12 @@ export const ChainMap = {
 		showSider: false,
 		type: "chain",
 	},
+};
+
+export const LocationTerritoryMap = {
+	name: "Location Territory Map",
+	args: {
+		...configs.LocationTerritoryMapConfig,
+		type: "location-territory",
+	},
 };

package/src/@daf/core/components/Dashboard/Map/helper.js

@@ -20,6 +20,8 @@ export function useMapHelper({
 	mapCenter,
 	allData,
 	renderTooltip,
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags,
 	onClickLink,
 	link,
@@ -212,10 +214,139 @@ export function useMapHelper({
 						this.setStyle({ fillOpacity: 0.7 });
 					});
 
-					marker.on("popupclose", function () {
-						this.setStyle({ fillOpacity: 0.4 });
+				marker.on("popupclose", function () {
+					this.setStyle({ fillOpacity: 0.4 });
+				});
+			} else if (type === "location-territory" || type === "territory-location") {
+				const territoryTooltip = renderTooltipForTerritory || renderTooltip;
+				const locationTooltip = renderTooltipForLocation || renderTooltip;
+
+				let polygonMarker = null;
+				if (data.area && Array.isArray(data.area) && data.area.length >= 3) {
+					// Validate area coordinates are valid arrays with numeric values
+					const validArea = data.area.filter(coord => {
+						if (!Array.isArray(coord) || coord.length < 2) {
+							return false;
+						}
+						const lat = typeof coord[0] === 'number' ? coord[0] : parseFloat(coord[0]);
+						const lng = typeof coord[1] === 'number' ? coord[1] : parseFloat(coord[1]);
+						return !isNaN(lat) && !isNaN(lng) && isFinite(lat) && isFinite(lng);
 					});
-				} else if (type === "stakeholder") {
+					
+					if (validArea && validArea.length >= 3) {
+						polygonMarker = L.polygon(validArea, {
+							color: data.color,
+							opacity: 0.4,
+						}).addTo(mapRef);
+						
+						const territoryDiv = document.createElement("div");
+						const territoryRoot = createRoot(territoryDiv);
+
+						const territoryTitle = data.territoryTitle || data.name;
+
+						territoryRoot.render(
+							<>
+								{renderTooltipHtml({
+									title: territoryTitle,
+									subTitle: data?.subTitle || data.type,
+									items: territoryTooltip(data),
+									tags: renderTooltipTags(data),
+									link,
+									total: data.sources,
+									onClickLink: () => onClickLink(data),
+								})}
+							</>,
+						);
+
+						roots.current.push(territoryRoot);
+
+						// Bind popup to polygon
+						polygonMarker.bindPopup(territoryDiv);
+
+						// Polygon hover effects
+						polygonMarker.on("popupopen", function () {
+							this.setStyle({ fillOpacity: 0.7 });
+						});
+
+						polygonMarker.on("popupclose", function () {
+							this.setStyle({ fillOpacity: 0.4 });
+						});
+					}
+				}
+
+				let locationMarker = null;
+				if (coordinates && coordinates[0] && coordinates[1]) {
+					let markerLat = typeof coordinates[0] === 'number' ? coordinates[0] : parseFloat(coordinates[0]);
+					let markerLng = typeof coordinates[1] === 'number' ? coordinates[1] : parseFloat(coordinates[1]);
+					
+					if ((markerLat < -90 || markerLat > 90) && (markerLng >= -90 && markerLng <= 90)) {
+						const temp = markerLat;
+						markerLat = markerLng;
+						markerLng = temp;
+					}
+					
+					if (!isNaN(markerLat) && !isNaN(markerLng) && isFinite(markerLat) && isFinite(markerLng) &&
+						markerLat >= -90 && markerLat <= 90 && markerLng >= -180 && markerLng <= 180) {
+						const markerCoordinates = [markerLat, markerLng];
+						
+						iconClassName = "";
+						const markerFillColor = data.markerColor || "var(--color-primary-60)";
+						innerHtml = `
+					
+						<svg
+							width="28"
+							height="33"
+							viewBox="0 0 28 33"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z"
+								fill="${markerFillColor}"
+								stroke="white"
+							/>
+						</svg>
+						
+						`;
+
+						const locationDiv = document.createElement("div");
+						const locationRoot = createRoot(locationDiv);
+
+						locationRoot.render(
+							<>
+								{renderTooltipHtml({
+									title: data.name,
+									subTitle: data?.subTitle || data.type,
+									items: locationTooltip(data),
+									tags: renderTooltipTags(data),
+									link: false,
+									total: data.sources,
+									onClickLink: () => onClickLink(data),
+								})}
+							</>,
+						);
+
+						roots.current.push(locationRoot);
+
+					
+						locationMarker = addIconToMap(
+							markerCoordinates,
+							iconClassName,
+							data,
+							tooltipAsText ? data.name : locationDiv, 
+							iconSize,
+							innerHtml,
+						);
+
+						if (locationMarker) {
+							locationMarker.setZIndexOffset(1000); 
+							locationMarker.bindPopup(locationDiv);
+						}
+					}
+				}
+
+				marker = polygonMarker || locationMarker;
+			} else if (type === "stakeholder") {
 					marker = L.marker(coordinates, {
 						icon: L.divIcon({
 							html: `<div id="${i}"></div>`,

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -18,6 +18,8 @@ export const useMap = ({
 	polygon,
 	app,
 	renderTooltip,
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags,
 	mapConfig,
 	tooltipAsText,
@@ -137,6 +139,8 @@ export const useMap = ({
 		allData,
 		mapCenter,
 		renderTooltip,
+		renderTooltipForLocation,
+		renderTooltipForTerritory,
 		renderTooltipTags,
 		onClickLink,
 		link,

package/src/@daf/core/components/Dashboard/Map/index.jsx

@@ -48,6 +48,16 @@ import Filters from "../../Filters/FloatingFilters/index.js";
  *   Custom renderer for tooltip content.
  *   Signature: `(dataItem) => ReactNode | string`
  *
+ * - `renderTooltipForLocation` (function, optional):
+ *   Custom renderer for location marker tooltips (used in location-territory type).
+ *   Signature: `(dataItem) => Array`
+ *   Falls back to `renderTooltip` if not provided.
+ *
+ * - `renderTooltipForTerritory` (function, optional):
+ *   Custom renderer for territory polygon tooltips (used in location-territory type).
+ *   Signature: `(dataItem) => Array`
+ *   Falls back to `renderTooltip` if not provided.
+ *
  * - `mapConfig` (object):
  *   Configuration object for the map's behavior, such as zoom levels, center, and controls.
  *
@@ -102,6 +112,8 @@ function Map({
 	link,
 	siderTitle = "Mine Description",
 	renderTooltip = () => [],
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags = () => {},
 	mapConfig = { maxZoom: 18, center: [13, -15], zoom: 5 },
 	emptyDescriptionText = "No description provided",
@@ -134,6 +146,8 @@ function Map({
 		t,
 		app,
 		renderTooltip,
+		renderTooltipForLocation,
+		renderTooltipForTerritory,
 		renderTooltipTags,
 		onClickLink,
 		link,
@@ -260,6 +274,11 @@ Map.propTypes = {
 	filtersConfig: PropTypes.any,
 	onFilterChange: PropTypes.any,
 	nameAsSiderTitle: PropTypes.bool,
+	renderTooltip: PropTypes.func,
+	renderTooltipForLocation: PropTypes.func,
+	renderTooltipForTerritory: PropTypes.func,
+	renderTooltipTags: PropTypes.func,
+	link: PropTypes.any,
 };
 
 export default Map;

package/src/@daf/core/components/Dashboard/Map/storyConfig.js

@@ -3,5 +3,6 @@ import { storyConfig as DefaultMapConfig } from "./storyConfig2.js";
 import { storyConfig as TerritoryMapConfig } from "./storyConfig3.js";
 import { storyConfig as StakeholderMapConfig } from "./storyConfig4.js";
 import { storyConfig as ChainMapConfig } from "./storyConfig5.js";
+import { storyConfig as LocationTerritoryMapConfig } from "./storyConfig6.js";
 
-export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig };
+export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig, LocationTerritoryMapConfig };

package/src/@daf/core/components/Dashboard/Map/storyConfig6.js

@@ -0,0 +1,69 @@
+export const storyConfig = {
+	data: [
+		{
+			_id: {},
+			id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8367b",
+			color: "#6698E4",
+			gps: {
+				latitude: 7,
+				longitude: 1,
+			},
+			area: [
+				[6, 5],
+				[7, 1],
+				[9, 2],
+				[8, 4],
+			],
+			name: "Territory with Location - Area 1",
+			subTitle: "Mine Site",
+			type: "Territory Type",
+			datastakeId: "LOC-00000000141",
+			sources: 2,
+		},
+		{
+			_id: {},
+			id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8368c",
+			color: "#D3ADF7",
+			gps: {
+				latitude: 8,
+				longitude: 2,
+			},
+			area: [
+				[7, 6],
+				[8, 2],
+				[10, 13],
+				[9, 8],
+			],
+			name: "Territory with Location - Area 2",
+			subTitle: "Processing Site",
+			type: "Territory Type",
+			datastakeId: "LOC-00000000142",
+			sources: 1,
+		},
+	],
+	// tooltipAsText: true,
+	primaryLink: true,
+	renderTooltip: (data) => {
+		return [
+			{
+				label: "Location",
+				value: data.name || "--",
+			},
+			{
+				label: "Type",
+				value: data.subTitle || data.type || "--",
+			},
+		];
+	},
+	renderTooltipTags: () => {
+		return {
+			label: "Category",
+			items: [{ label: "Active", color: "blue" }, { label: "Monitored" }],
+		};
+	},
+	link: true,
+	onClickLink: (data) => {
+		console.log(data);
+	},
+};
+

package/src/@daf/core/components/Dashboard/Widget/ActivityIndicators/config.js

@@ -53,11 +53,8 @@ export const getActivityIndicatorsConfig = ({ t, data = {}, onRemove }) => {
 		},
 		{
 			icon: "User",
-			label: t("Children presence"),
-			// Special rule: Children presence is compliant if answered 'no', not compliant if answered 'yes'
-			type: data?.childrenPresence === true ? "notCompliant" : 
-			      data?.childrenPresence === false ? "compliant" : 
-			      "empty",
+			label: t("No children"),
+			type: getType(data?.childrenPresence),
 			onClick: getOnClick("childrenPresence"),
 		},
 		{

package/src/@daf/core/components/Dashboard/Widget/KeyIndicators/index.jsx

@@ -18,7 +18,7 @@ export default function KeyIndicatorsWidget({
 	const component = (
 		<Widget
 			loading={loading}
-			className={formatClassname(["flex-1 with-border-header", widgetClassName])}
+			className={formatClassname(["flex-1 h-w-btn-header with-border-header", widgetClassName])}
 			title={noTitle ? undefined : t(title)}
 			noTitle={noTitle}
 		>

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

@@ -86,7 +86,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 					fitView={true} // zoom out on default
 					fitViewOptions={{
 						padding: 0.2, //zoom out on default
-						duration: withDuration ? 300 : undefined,
+						// duration: withDuration ? 300 : undefined,
 					}}
 					{...props}
 				>

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

@@ -0,0 +1,8 @@
+const config = {    
+    viewBox: "0 0 12 12",
+    children: (
+        <path d="M5.6875 9.1875L5.6875 2.1875M5.6875 9.1875L3.9375 8.02083M5.6875 9.1875L7.4375 8.02083M5.6875 2.1875L3.9375 3.35417M5.6875 2.1875L7.4375 3.35417M10.9375 0.4375H0.4375M10.9375 10.9375H0.4375" stroke="currentColor" strokeWidth="0.875" strokeLinecap="round" strokeLinejoin="round"/>
+    ),
+}
+
+export default config;

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

@@ -0,0 +1,8 @@
+const config = {
+    viewBox: "0 0 12 12",
+    children: (
+        <path d="M2.1875 5.6875H9.1875M2.1875 5.6875L3.35417 3.9375M2.1875 5.6875L3.35417 7.4375M9.1875 5.6875L8.02083 3.9375M9.1875 5.6875L8.02083 7.4375M10.9375 10.9375V0.437501M0.4375 10.9375V0.4375" stroke="currentColor" strokeWidth="0.875" strokeLinecap="round" strokeLinejoin="round"/>
+    ),
+}
+
+export default config;

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

@@ -223,7 +223,9 @@ import Bear from "./Bear";
 import Security from "./Security";
 import Minus from "./Minus";
 import ClockPlus from "./ClockPlus";
-import WaziDarkIcon from "./WaziDarkIcon";
+import WaziDarkIcon from "./WaziDarkIcon";	
+import SpacingHeight from "./SpacingHeight";
+import SpacingWidth from "./SpacingWidth";
 
 const config = {
 	AppAdmin,
@@ -452,6 +454,8 @@ const config = {
 	Minus,
 	ClockPlus,
 	WaziDarkIcon,
+	SpacingHeight,
+	SpacingWidth,
 };
 
 export default config;

package/src/@daf/core/components/Screens/FindInformation/index.js

@@ -18,6 +18,7 @@ export default function FindInformation({
 	goTo = () => {},
 	getRedirectLink = () => {},
 	renderBreadCrumbs = () => {},
+	breadcrumbs = [],
 }) {
 	const { defaultTab, setDefaultTab } = useFindInformation();
 	const params = useMemo(() => new URLSearchParams(location.search), [location.search]);
@@ -41,7 +42,7 @@ export default function FindInformation({
 	return (
 		<div className="daf-create-view semibold form-input-output">
 			<Header
-				breadcrumbs={breadCrumbs}
+				breadcrumbs={breadcrumbs || breadCrumbs}
 				title={t("Find Information")}
 				supportText={t(
 					"Identify available information sources among users of compatible applications and connected databases.",

package/src/@daf/core/components/Screens/Users/columns.js

@@ -3,12 +3,6 @@ import { Modal, Tag, Typography, message ,Tooltip} from "antd";
 
 import { renderDateFormatted } from '../../../../../helpers/Forms.js';
 import MoreMenu from '../../../../core/components/Table/MoreMenu/index.jsx';
-const getLinkValue = (value, linkingObject) => {
-  if(linkingObject && linkingObject?.[value]) {
-    return linkingObject?.[value]?.name;
-  }
-  return null;
-}
 
 export const getColumns = ({t, goTo, user, 	removeUser = () => {},
 resendInvite = () => {},

package/src/@daf/core/components/Table/NavigationAction/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import CustomIcon from '../../Icon/CustomIcon.jsx';
+
+const NavigationAction = ({onClick, theme}) => {
+  return ( 
+        <div style={{ display: "flex", justifyContent: "center" }}>
+            <button 
+                onClick={onClick}
+                style={{ 
+                    cursor: 'pointer', 
+                    border: 'none', 
+                    background: 'transparent',
+                    padding: 0,
+                    display: 'flex',
+                    alignItems: 'center'
+                }}
+            >
+                <CustomIcon name="Link" size={15} color={theme.baseGray70} />
+            </button>
+        </div>
+  )
+}
+
+export default NavigationAction

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

@@ -15,9 +15,23 @@ export const filterValidGPS = (data) => {
   const latCheck = (lat) => lat > -90 || lat < 90;
   const lngCheck = (lng) => lng > -180 || lng < 180;
   return data.filter(item => {
-    return item.marker &&
+    // Check if item has valid GPS coordinates
+    const hasValidGPS = item.marker &&
       latCheck(Number(item.marker.lat)) &&
       lngCheck(Number(item.marker.lng));
+    
+    const hasValidArea = item.area &&
+      Array.isArray(item.area) &&
+      item.area.length >= 3 &&
+      item.area.every(coord => 
+        Array.isArray(coord) && 
+        coord.length >= 2 &&
+        !isNaN(coord[0]) && !isNaN(coord[1]) &&
+        isFinite(coord[0]) && isFinite(coord[1])
+      );
+    
+    // Include item if it has either valid GPS or valid area
+    return hasValidGPS || hasValidArea;
   });
 }
 

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Tooltip } from 'antd';
-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';
+import NavigationAction from '../../core/components/Table/NavigationAction/index.jsx';
+
 export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink, theme, subject, applications }) => [
   {
     dataIndex: 'datastakeId',
@@ -88,30 +87,14 @@ 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}`;
         }
         goTo(getRedirectLink(link));
       };
-      const moreMenuItems = [
-        {
-          label: t("Details"),
-          value: "details",
-          onClick: onClick,
-        },
-        {
-          label: t("Remove"),
-          value: "remove",
-          onClick: () => {
-            console.log("remove");
-          },
-          disabled: true,
-        },
-      ];
-      return <div >
-           <MoreMenu items={moreMenuItems} />
-      </div>;
+
+      return <NavigationAction onClick={onClick} theme={theme} />;
     }
   }
 ].filter((column) => column.show !== false);

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

@@ -1,55 +1,12 @@
 import React from 'react';
 import { Tooltip, Tag } from 'antd';
-import { findOptions } from '../../../../helpers/StringHelper.js';
+import { findOptions, getLinkValue } 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;
-  }
-  return null;
-}
-
-const getEventCategoryBySubject = (eventCategoryObject, subject) => {
-  if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
-    return null;
-  }
-  
-  const subjectSingular = subject.endsWith('ies') 
-    ? subject.slice(0, -3) + 'y'
-    : subject;                      
-
-  const key = `typeOfEvent is ${subjectSingular}`;
-  return eventCategoryObject[key] || null;
-};
-
-export const renderStatusTag = ({ value, t = (s) => s }) => {
-	const width = 87;
-
-	switch (value) {
-		case "edited":
-			return (
-				<Tag color="yellow" style={{ width }} className="text-center">
-					{t("Edited")}
-				</Tag>
-			);
-		case "submitted":
-			return (
-				<Tag color="green" style={{ width }} className="text-center">
-					{t("Submitted")}
-				</Tag>
-			);
-		default:
-			return (
-				<Tag color="blue" style={{ width }} className="text-center">
-					{t("Private")}
-				</Tag>
-			);
-	}
-};
+import { getEventCategoryBySubject } from '../helper.js';
+import { renderStatusTag } from '../../../utils/tags.js';
+import NavigationAction from '../../../core/components/Table/NavigationAction/index.jsx';
 
 export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
     {
@@ -210,23 +167,14 @@ 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}`;
           }
           goTo(getRedirectLink(link));
         };
-        const moreMenuItems = [
-          {
-            label: t("Details"),
-            value: "details",
-            onClick: onClick,
-          },
-     
-        ];
-        return <div >
-             <MoreMenu items={moreMenuItems} />
-        </div>;
+
+        return <NavigationAction onClick={onClick} theme={theme} />;
       }
     }
 ].filter((column) => column.show !== false);