datastake-daf 0.6.813 → 0.6.815

package/package.json

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

package/src/@daf/core/components/AuthForm/index.jsx

@@ -13,20 +13,13 @@ function AuthForm ({
   errors,
   t = (key) => key,
   executeRecaptcha = () => {},
-  getCurrentStep = () => {},
-  theme,
+  getCurrentStep = () => {}
 }){
   const [formInstance] = Form.useForm(form);
   const [currentStep, setCurrentStep] = useState(0);
   const [allFormValues, setAllFormValues] = useState(initialValues);
   const [formErrors, setFormErrors] = useState(null);
 
-  const buttonStyle = theme?.colorPrimary ? {
-    backgroundColor: theme.colorPrimary,
-    borderColor: theme.colorPrimary,
-  } : {};
-
-
   const isMultiStep = !!steps;
   const currentFields = isMultiStep ? steps?.[currentStep]?.fields : fields || [];
 
@@ -173,7 +166,6 @@ function AuthForm ({
       name: field.name,
       label: field.label,
       rules: field.rules,
-      dependencies: field.dependencies,
       style: { marginBottom: 0 }
     };
     if (field.valuePropName && field.type !== 'select') {
@@ -225,7 +217,6 @@ function AuthForm ({
                                 htmlType="submit"
                                 disabled={isLastStep && !allFieldsFilled}
                                 block className="normal-br"
-                                style={buttonStyle}
                             >
                                 {isLastStep ? submitText : t("Next")}
                             </BorderedButton>
@@ -234,14 +225,14 @@ function AuthForm ({
                 }}
                 </Form.Item>
                 <div className="buttons" style={{ marginTop: 0}}>
-                    <BorderedButton onClick={prev} block className="normal-br" style={buttonStyle}>
+                    <BorderedButton onClick={prev} block className="normal-br">
                         {t("Back")}
                     </BorderedButton>
                 </div>
             </div>
         ) : (
             <div className="buttons" style={{ marginTop: isMultiStep ? '16px' : 0}}>
-                <BorderedButton type="primary" htmlType="submit" block className="normal-br" style={buttonStyle}>
+                <BorderedButton type="primary" htmlType="submit" block className="normal-br">
                     {isMultiStep ? t("Next") : submitText}
                 </BorderedButton>
             </div>

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -1,4 +1,5 @@
 import { useMemo, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
 	isMineSite,
 	getStakeholderPosition,
@@ -10,7 +11,6 @@ import {
 import MineSiteMarker from "./Markers/SVG/MinesiteMarker.js";
 import VillageMarker from "./Markers/SVG/VillageMarker.js";
 import StakeholderIcon from "./Markers/StakeholderMarker.js";
-import { createRoot } from "react-dom/client";
 import * as L from "leaflet";
 import { Popover } from "antd";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
@@ -32,8 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const rootsMapRef = useRef(new Map());
-	const markersRef = useRef([])
+	const markersRef = useRef([]);
+	const [portalContainers, setPortalContainers] = useState([]);
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -114,25 +114,31 @@ export default function LocationIcon({
 	}, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
-		return data?.stakeholders || [];
-	}, [data.stakeholders, zoom]);
+		return (data?.stakeholders || []).filter(stakeholder => {
+			if (!stakeholder.links || stakeholder.links.length === 0) {
+				return true;
+			}
+			
+			const locationsWithThisStakeholder = allData
+				.filter(loc => 
+					loc.stakeholders?.some(s => s.datastakeId === stakeholder.datastakeId)
+				)
+				.map(loc => loc.datastakeId);
+			
+			const primaryLocation = locationsWithThisStakeholder.sort()[0];
+			return data.datastakeId === primaryLocation;
+		});
+	}, [data.stakeholders, data.datastakeId, allData, zoom]);
 
 	useEffect(() => {
-		const currentRoots = rootsMapRef.current;
-		const currentMarkers = markersRef.current;
-
-		currentMarkers.forEach(marker => {
-			if (mapRef.hasLayer(marker)) {
+		markersRef.current.forEach(marker => {
+			if (mapRef && mapRef.hasLayer(marker)) {
 				mapRef.removeLayer(marker);
 			}
 		});
-		currentRoots.forEach(root => {
-			root.unmount();
-		});
-		currentRoots.clear();
 		markersRef.current = [];
+		setPortalContainers([]);
 
-		// Only create stakeholder markers if this location or any of its stakeholders are selected
 		const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => 
 			selectedMarkersId.includes(stk.datastakeId)
 		);
@@ -141,9 +147,11 @@ export default function LocationIcon({
 			return;
 		}
 
-		// Create new markers only when selected
+		// Create markers and store their container references
+		const containers = [];
+		
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
-			const markerId = `${stakeholder.datastakeId}`;
+			const markerId = `${data.datastakeId}-${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
 				totalMarkers: stakeholdersOfLocation.length,
@@ -162,46 +170,30 @@ export default function LocationIcon({
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
 			
+			// Create container div
+			const containerDiv = document.createElement('div');
+			containerDiv.id = markerId;
+			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
-					html: `<div id="${markerId}"></div>`,
+					html: containerDiv.outerHTML,
 					className: "marker-chain",
 					iconSize: iconSize,
 				}),
 			}).addTo(mapRef);
 
 			markersRef.current.push(marker);
-
-			setTimeout(() => {
-				const div = document.getElementById(markerId);
-				if (div && !rootsMapRef.current.has(markerId)) {
-					const root = createRoot(div);
-					rootsMapRef.current.set(markerId, root);
-					
-					root.render(
-						<StakeholderIcon
-							data={stakeholder}
-							zoom={zoom}
-							allData={allData}
-							link={link}
-							parentId={data.datastakeId}
-							renderTooltip={renderTooltip}
-							onClickLink={onClickLink}
-							selectedMarkersId={selectedMarkersId}
-							handleSelectMarker={handleSelectMarker}
-							mapRef={mapRef}
-							radius={radius}
-							index={index}
-							x={x}
-							y={y}
-							openPopupIdRef={openPopupIdRef}
-							polylinesRef={polylinesRef}
-							isForceOpen={isForceOpen}
-							activeMarker={activeMarker}
-						/>,
-					);
-				}
-			}, 0);
+			
+			// Store container info for portal rendering
+			containers.push({
+				markerId,
+				stakeholder,
+				x,
+				y,
+				radius,
+				index,
+				isForceOpen,
+			});
 
 			setMapMarkers((prev) => {
 				const array = [
@@ -236,21 +228,23 @@ export default function LocationIcon({
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
 				stakeholderType: stakeholder.type,
-				animated: true,                     
+				animated: true,
 			});
 		});
 
+		// Update portal containers after markers are created
+		setTimeout(() => {
+			setPortalContainers(containers);
+		}, 0);
+
 		return () => {
 			markersRef.current.forEach(marker => {
-				if (mapRef.hasLayer(marker)) {
+				if (mapRef && mapRef.hasLayer(marker)) {
 					mapRef.removeLayer(marker);
 				}
 			});
-			rootsMapRef.current.forEach(root => {
-				root.unmount();
-			});
-			rootsMapRef.current.clear();
 			markersRef.current = [];
+			setPortalContainers([]);
 		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
@@ -344,56 +338,81 @@ useEffect(() => {
 }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
 
 	return (
-		<Popover
-			content={renderTooltipJsx({
-				title: data.name,
-				subTitle: data.subTitle,
-				total: data.sources,
-				className: "pt-0 pb-0",
-				items: renderTooltip(data),
-				link,
-				onClickLink: () => onClickLink(data),
-				isNewTab: true,
-			})}
-			// open={
-			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
-			// 	isHovering
-			// }
-			getPopupContainer={(triggerNode) => {
-				const mapElement = document.getElementById("map");
-				return mapElement || triggerNode.parentElement || document.body;
-			}}
-		>
-			<div style={{ position: "relative", display: "inline-block" }}>
-				{(isSelected || selectedMarkersId.length === 0) && (
-					<div
-						style={{
-							position: "absolute",
-							bottom: "0",
-							left: "50%",
-							transform: "translateX(-50%)",
-							width: "12px",
-							height: "6px",
-							background: "rgba(0,0,0,0.15)",
-							borderRadius: "50%",
-							filter: "blur(3px)",
+		<>
+			<Popover
+				content={renderTooltipJsx({
+					title: data.name,
+					subTitle: data.subTitle,
+					total: data.sources,
+					className: "pt-0 pb-0",
+					items: renderTooltip(data),
+					link,
+					onClickLink: () => onClickLink(data),
+					isNewTab: true,
+				})}
+				getPopupContainer={(triggerNode) => {
+					const mapElement = document.getElementById("map");
+					return mapElement || triggerNode.parentElement || document.body;
+				}}
+			>
+				<div style={{ position: "relative", display: "inline-block" }}>
+					{(isSelected || selectedMarkersId.length === 0) && (
+						<div
+							style={{
+								position: "absolute",
+								bottom: "0",
+								left: "50%",
+								transform: "translateX(-50%)",
+								width: "12px",
+								height: "6px",
+								background: "rgba(0,0,0,0.15)",
+								borderRadius: "50%",
+								filter: "blur(3px)",
+							}}
+						/>
+					)}
+					<Marker
+						isSelected={isSelected}
+						onClick={() => {
+							handleSelectMarker(data);
+							setActiveMarker(isSelected ? null : data);
 						}}
+						zoom={zoom}
+						selectedMarkersId={selectedMarkersId}
 					/>
-				)}
-				<Marker
-					isSelected={isSelected}
-					onClick={() => {
-						handleSelectMarker(data);
-						setActiveMarker(isSelected ? null : data);
-					}}
-					zoom={zoom}
-					onMouseEnter={() => setIsHovering(true)}
-					onMouseLeave={() => {
-						setIsHovering(false);
-					}}
-					selectedMarkersId={selectedMarkersId}
-				/>
-			</div>
-		</Popover>
+				</div>
+			</Popover>
+			
+			{/* Render stakeholder icons via portals */}
+			{portalContainers.map(({markerId, stakeholder, x, y, radius, index, isForceOpen}) => {
+				const container = document.getElementById(markerId);
+				if (!container) return null;
+				
+				return createPortal(
+					<StakeholderIcon
+						key={markerId}
+						data={stakeholder}
+						zoom={zoom}
+						allData={allData}
+						link={link}
+						parentId={data.datastakeId}
+						renderTooltip={renderTooltip}
+						onClickLink={onClickLink}
+						selectedMarkersId={selectedMarkersId}
+						handleSelectMarker={handleSelectMarker}
+						mapRef={mapRef}
+						radius={radius}
+						index={index}
+						x={x}
+						y={y}
+						openPopupIdRef={openPopupIdRef}
+						polylinesRef={polylinesRef}
+						isForceOpen={isForceOpen}
+						activeMarker={activeMarker}
+					/>,
+					container
+				);
+			})}
+		</>
 	);
 }

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

@@ -230,6 +230,7 @@ import Up from "./Up";
 import Down from "./Down";
 import TrendUp from "./TrendUp";
 import Droplets from "./Droplets";
+import AddDocument from "./AddDocument";
 
 const config = {
 	AppAdmin,
@@ -463,7 +464,8 @@ const config = {
 	Up,
 	Down,
 	TrendUp,
-	Droplets
+	Droplets,
+	AddDocument
 };
 
 export default config;

package/src/@daf/core/components/Screens/Admin/AdminDashboard/components/UserStatistics/TopContributors/index.jsx

@@ -8,6 +8,7 @@ export default function TopContributors({ data, loading, t }) {
 	const container = useRef(null);
 
 	useTopContributors({ container, data, t });
+console.log("topcontributorshhhh", data);
 	return (
 		<Widget
 			title={t(`admin::top-contributors`)}

package/src/@daf/core/components/Screens/Admin/AdminDashboard/components/UserStatistics/UserGrowth/hook.js

@@ -12,6 +12,7 @@ export default function useUserGrowth({ container, data: mainData = {}, t, trans
 	const [mainGraph, setMainGraph] = useState(null);
 	const [data, setData] = useState([]);
 	const { token } = useToken();
+console.log("mainData", mainData);
 	const fetchData = () => {
 		const { dates = [] } = mainData;
 		const _data = [];

package/src/@daf/core/components/Screens/Admin/AdminDashboard/components/UserStatistics/UserGrowth/index.jsx

@@ -9,11 +9,13 @@ export default function UserGrowth({ loading, data = [], t, translationKeys, fet
 	const [selectValue, setSelectValue] = useState(selectOptions[0]?.value);
 
 	useUserGrowth({ container, data, t, translationKeys });
+console.log("usergrowthhhhh", data);
+
 	useEffect(() => {
 		if (typeof fetchUserGrowth === "function") {
 			fetchUserGrowth(selectValue);
 		}
-	}, [selectValue, fetchUserGrowth]);
+	}, [selectValue]);
 
 	return (
 		<Widget

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/index.jsx

@@ -34,19 +34,19 @@ export default function CombineLocationModal({
 
 	const onSubmit = () => {
 		MainForm.validateFields().then((data) => {
-			const ids = selectedLocations.map((location) => location.id);
+			const ids = selectedLocations.map((location) => location.id);	  
 			const allowedKeys = [
-				"id",
-				"name",
-				"country",
-				"category",
-				"administrativeLevel1",
+				"id", 
+				"name", 
+				"country", 
+				"category", 
+				"administrativeLevel1", 
 				"administrativeLevel2"
-			];
+			];		  
 			const filteredData = Object.fromEntries(
 				Object.entries(data).filter(([key]) => allowedKeys.includes(key))
 			);
-
+	
 			onSuccess({
 				ids,
 				data: filteredData,
@@ -66,15 +66,15 @@ export default function CombineLocationModal({
 			destroyOnHidden={true}
 			onValuesChange={() => {
 				setIsDisabled(() => {
-					const values = MainForm.getFieldsValue();
-
-					const requiredFields = entity?.includes("location")
-						? ["id", "name", "category", "country", "administrativeLevel1", "administrativeLevel2"]
-						: ["id", "name", "category", "country"];
-
-					return requiredFields.some((field) => values[field] === undefined);
+				  const values = MainForm.getFieldsValue();
+			  
+				  const requiredFields = entity?.includes("location")
+					  ? ["id", "name", "category", "country", "administrativeLevel1", "administrativeLevel2"]
+					  : ["id", "name", "category", "country"];
+			  
+				  return requiredFields.some((field) => values[field] === undefined);
 				});
-			}}
+			  }}
 		>
 			<Container>
 				<div className="daf-table-wrapper no-pagination">
@@ -124,7 +124,7 @@ export default function CombineLocationModal({
 							options={selectedLocations.map((location) => {
 								return {
 									label: location?.datastakeId || "-",
-									value: location?.id || "-",
+                value: location?.id || "-",
 								};
 							})}
 							placeholder={t("ID")}
@@ -181,41 +181,41 @@ export default function CombineLocationModal({
 
 					{entity?.includes("location") && (
 						<>
-							<Form.Item className="flex-1" name="administrativeLevel1">
-								<Select
-									placeholder={t("Province")}
-									options={selectedLocations
-										.map((location) => {
-											const _data = getAdminLevelName(location?.linking?.SCL, "level_1");
-											return {
-												label: _data?.name || "-",
-												value: _data?.id || "-",
-											};
-										})
-										.filter(
-											(option, index, self) =>
-												index === self.findIndex((o) => o.value === option.value),
-										)}
-								/>
-							</Form.Item>
+						<Form.Item className="flex-1" name="administrativeLevel1">
+							<Select
+							placeholder={t("Province")}
+							options={selectedLocations
+								.map((location) => {
+								const _data = getAdminLevelName(location?.linking?.SCL, "level_1");
+								return {
+									label: _data?.name || "-",
+									value: _data?.id || "-",
+								};
+								})
+								.filter(
+								(option, index, self) =>
+									index === self.findIndex((o) => o.value === option.value),
+								)}
+							/>
+						</Form.Item>
 
-							<Form.Item className="flex-1" name="administrativeLevel2">
-								<Select
-									placeholder={t("Territory")}
-									options={selectedLocations
-										.map((location) => {
-											const _data = getAdminLevelName(location?.linking?.SCL, "level_2");
-											return {
-												label: _data?.name || "-",
-												value: _data?.id || "-",
-											};
-										})
-										.filter(
-											(option, index, self) =>
-												index === self.findIndex((o) => o.value === option.value),
-										)}
-								/>
-							</Form.Item>
+						<Form.Item className="flex-1" name="administrativeLevel2">
+							<Select
+							placeholder={t("Territory")}
+							options={selectedLocations
+								.map((location) => {
+								const _data = getAdminLevelName(location?.linking?.SCL, "level_2");
+								return {
+									label: _data?.name || "-",
+									value: _data?.id || "-",
+								};
+								})
+								.filter(
+								(option, index, self) =>
+									index === self.findIndex((o) => o.value === option.value),
+								)}
+							/>
+						</Form.Item>
 						</>
 					)}
 				</Form>

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/index.jsx

@@ -37,8 +37,6 @@ export default function CombineSubjectsModal({
 	const onSubmit = () => {
 		MainForm.validateFields().then((data) => {
 			const ids = selectedSubjects.map((subject) => subject.id);
-			console.log(ids, "ids");
-			console.log(data, "data");
 			onSuccess({
 				ids,
 				data,
@@ -114,10 +112,7 @@ export default function CombineSubjectsModal({
 				>
 					<Form.Item className="flex-1" name="id">
 						<Select
-							options={selectedSubjects.map((s) => ({
-								label: s?.datastakeId || "-",
-								value: s?.id || "-",
-							}))}
+							options={mapToSelectOptions(selectedSubjects, "datastakeId", selectOptions, null)}
 							placeholder={t("ID")}
 						></Select>
 					</Form.Item>