datastake-daf 0.6.765 → 0.6.767

package/src/@daf/core/components/Graphs/TradeRelationship/index.jsx

@@ -21,6 +21,7 @@ function TradeRelationship({
   onFilterChange = () => {},
   renderTooltipItems = () => [],
   getTotal = () => 0,
+  onRenderComplete = () => {},
 }) {
   const reactFlowWrapper = useRef(null);
   const [nodes, setNodes] = useNodesState([]);
@@ -30,6 +31,27 @@ function TradeRelationship({
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = useState(null);
 
+  const isFullyRenderedRef = useRef(false);
+  const [isFullyRendered, setIsFullyRendered] = useState(false);
+
+  useEffect(() => {
+    isFullyRenderedRef.current = false;
+    setIsFullyRendered(false);
+    setActiveNode(null);
+  }, [data]);
+
+  useEffect(() => {
+    if (nodes.length > 0 && edges.length > 0 && !isFullyRenderedRef.current) {
+      const timeoutId = setTimeout(() => {
+        isFullyRenderedRef.current = true;
+        setIsFullyRendered(true);
+        onRenderComplete(true);
+      }, 200);
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, [nodes.length, edges.length, associatedNodes]);
+  
   useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -58,7 +80,7 @@ function TradeRelationship({
     [edges, activeNode, associatedNodes]
   );
 
-  useEffect(() => {
+  useEffect(() => {    
     let yInit = 0;
     let xInit = 0;
     const isBilateral = data?.sources?.length >= 1;
@@ -71,10 +93,9 @@ function TradeRelationship({
       setEdges([]);
       return;
     }
-
     const _nodes = [
       {
-        id: data.id,
+        id: data.id?.toString(),
         type: "expandedNode",
         position: {
           x: xInit,
@@ -89,10 +110,10 @@ function TradeRelationship({
     if (isBilateral) {
       (data.sources || []).forEach((source) => {
         const hasPrev = false;
-        _edges.push({
+        const edge = {
           id: `e-${data.id}-${source}`,
-          source: source,
-          type: "default",
+          source: source?.toString(),
+          type: "defaultEdge",
           target: data?.id?.toString(),
           sourceHandle: "left",
           targetHandle: "right",
@@ -106,7 +127,8 @@ function TradeRelationship({
             tooltipTitle,
             moreLeft: false,
           },
-        });
+        };
+        _edges.push(edge);
       });
     }
 
@@ -164,7 +186,7 @@ function TradeRelationship({
             ? false
             : true;
 
-          _edges.push({
+          const edge = {
             id: `e-${ch.id}-${source}`,
             source: hasPrev ? source : ch?.id?.toString(),
             type: isCustom ? "verticalPath" : "defaultEdge",
@@ -182,7 +204,8 @@ function TradeRelationship({
               tooltipTitle,
               moreLeft: prevChildren.length > children.length,
             },
-          });
+          };          
+          _edges.push(edge);
 
           if (isCustom) {
             customIndex += 1;
@@ -230,11 +253,25 @@ function TradeRelationship({
       maxHeight: 0,
     });
 
+        // Check for potential ID mismatches
+    const nodeIds = _nodes.map(n => n.id);
+    const edgeIssues = _edges.filter(e => {
+      const sourceExists = nodeIds.includes(e.source);
+      const targetExists = nodeIds.includes(e.target);
+      return !sourceExists || !targetExists;
+    });
+    
+    // Set nodes first
     setNodes(_nodes);
-    setEdges(_edges);
+    
+    const timeoutId = setTimeout(() => {
+      setEdges(_edges);
+    }, 100); // 100ms is imperceptible to users but ensures React Flow is ready
+    
+    // Cleanup to prevent memory leaks if component unmounts quickly
+    return () => clearTimeout(timeoutId);
   }, [data, activeNode]);
 
-  // Used to find associated nodes, when a node is selected
   useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -293,6 +330,7 @@ function TradeRelationship({
 
   return (
     <BaseGraph
+      key={JSON.stringify(nodes) + JSON.stringify(edges)}
       nodes={mappedNodes}
       edges={mappedEdges}
       maxZoom={maxZoom}

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

@@ -33,7 +33,6 @@ const BaseGraph = forwardRef(function BaseGraph(
 		withDuration = true,
 		onFilterChange,
 		isPdf,
-		zoomOutTransition = false,
 		...props
 	},
 	ref,
@@ -50,18 +49,22 @@ const BaseGraph = forwardRef(function BaseGraph(
 		return result;
 	}, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
 
+	// In BaseGraph.jsx, replace the useEffect with:
 	useEffect(() => {
 		if (nodesToFit.length === 0) return;
 
-		requestAnimationFrame(() => {
+		// Use setTimeout instead of requestAnimationFrame to ensure nodes are rendered
+		const timer = setTimeout(() => {
 			fitView({
 				padding: 0.4,
 				nodes: [...nodesToFit],
-				duration: withDuration ? 300 : undefined,
-				maxZoom: 0.8,
+				// duration: withDuration ? 300 : undefined,
+				maxZoom: 0.9,
 			});
-		});
-	}, [JSON.stringify(nodesToFit), withDuration]);
+		}, 100); // Small delay to ensure nodes are rendered
+
+		return () => clearTimeout(timer);
+	}, [nodesToFit.length, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
 
 	return (
 		<ComponentWithFocus>
@@ -87,7 +90,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 					fitView={true} // zoom out on default
 					fitViewOptions={{
 						padding: 0.2, //zoom out on default
-						...(zoomOutTransition ? { duration: withDuration ? 300 : undefined } : {}),
+						duration: withDuration ? 300 : undefined,
 					}}
 					{...props}
 				>

package/src/@daf/core/components/Screens/Admin/AdminDashboard/components/KeyIndicatorsWidget/config.js

@@ -8,7 +8,7 @@ export function getConfig(data, goTo, t) {
 		return {
 			label: (
 				<div className="flex">
-					<div className="flex-1">{t(`admin::${item.title}`)}</div>
+					<div className="flex-1">{t(`${item.title}`)}</div>
 					<div className="cursor-pointer" onClick={() => goTo(item.goToPath)}>
 						<CustomIcon name="LinkNewTab" width={16} height={16} color={iconColor} />
 					</div>
@@ -17,4 +17,4 @@ export function getConfig(data, goTo, t) {
 			render: () => <span>{renderNumber(item.valueToShow)}</span>,
 		};
 	});
-}
+}

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

@@ -17,4 +17,4 @@ export default function KeyIndicatorsWidget({ data = [], loading, goTo, t }) {
 			/>
 		</div>
 	);
-}
+}

package/src/@daf/core/components/Screens/Admin/AdminDashboard/components/UserStatistics/UserActivity/helper.js

@@ -53,6 +53,9 @@ export const getColor = (users, items) => {
 
 export function useConfig(data) {
 	const config = useMemo(() => {
+		// Ensure data is an array to prevent "data.find is not a function" error
+		const safeData = Array.isArray(data) ? data : [];
+		
 		const start = moment().add(-1, "years").format("MMM YY");
 		let now = moment(start, "MMM YY");
 		const _config = [];
@@ -65,7 +68,7 @@ export function useConfig(data) {
 			while (true) {
 				DAYS.forEach((d) => {
 					if (d === nowMonth.format("dd") && now.format("MMM YY") === nowMonth.format("MMM YY")) {
-						const users = data.find((d) => d._id === nowMonth.format("YYYY-MM-DD"))?.count || 0;
+						const users = safeData.find((d) => d._id === nowMonth.format("YYYY-MM-DD"))?.count || 0;
 						conf.push({ date: nowMonth.format("DD MMM YY"), active: true, users: users });
 						nowMonth.add(1, "days");
 					} else {

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

@@ -10,8 +10,13 @@ const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 
 export default function UserActivity({ loading, data = [], t }) {
 	const config = useConfig(data);
+
 	const { isCollapsed } = useResizeContext();
 
+
+
+	// console.log("userActivityyyyy",data);
+
 	return (
 		<Widget
 			title={t(`admin::user-activity`)}

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

@@ -10,6 +10,7 @@ export default function UserGrowth({ loading, data = [], t, translationKeys, fet
 
 	useUserGrowth({ container, data, t, translationKeys });
 
+
 	useEffect(() => {
 		if (typeof fetchUserGrowth === "function") {
 			fetchUserGrowth(selectValue);

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

@@ -4,32 +4,40 @@ import TopContributors from "./TopContributors/index.jsx";
 import Widget from "../../../../../Dashboard/Widget/index.jsx";
 
 export default function UserStatistics({
-	fetchUserGrowth,
-	loading,
-	loadingUserGrowth,
-	data,
-	t,
-	translationKeys,
+  fetchUserGrowth,
+  loading,
+  loadingUserGrowth,
+  data,
+  t,
+  translationKeys,
 }) {
-	return (
-		<Widget
-			title={t(`${translationKeys}-admin::usage-statistics`)}
-			className="with-border-header"
-		>
-			<div className="flex flex-column gap-6">
-				<UserActivity loading={loading} data={data.userActivityData} t={t} />
+	// console.log("UserStatistics:loading", loading);
+	// console.log("UserStatistics:loadingUserGrowth", loadingUserGrowth);
+	// console.log("UserStatistics:data", data);
+	// console.log("UserStatistics:userActivityData", data?.userActivityData);
+	// console.log("UserStatistics:topContributorsData", data?.topContributorsData);
+	// console.log("UserStatistics:userGrowthData", data?.userGrowthData);
 
-				<div className="flex flex-row flex-col-mobile gap-6">
-					<TopContributors data={data.topContributorsData} loading={loading} t={t} />
-					<UserGrowth
-						t={t}
-						loading={loadingUserGrowth}
-						data={data.userGrowthData}
-						fetchUserGrowth={fetchUserGrowth}
-						translationKeys={translationKeys}
-					/>
-				</div>
-			</div>
-		</Widget>
-	);
+
+  return (
+    <Widget
+      title={t(`${translationKeys}-admin::usage-statistics`)}
+      className="with-border-header"
+    >
+      <div className="flex flex-column gap-6">
+        <UserActivity loading={loading} data={data.userActivityData || []} t={t} />
+
+        <div className="flex flex-row flex-col-mobile gap-6">
+          <TopContributors data={data.topContributorsData || []} loading={loading} t={t} />
+          <UserGrowth
+            t={t}
+            loading={loadingUserGrowth}
+            data={data.userGrowthData || []}
+            fetchUserGrowth={fetchUserGrowth}
+            translationKeys={translationKeys}
+          />
+        </div>
+      </div>
+    </Widget>
+  );
 }

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

@@ -5,60 +5,64 @@ import KeyIndicatorsWidget from "./components/KeyIndicatorsWidget/index.jsx";
 import UserStatistics from "./components/UserStatistics/index.jsx";
 
 export default function AdminDashboard({
-	actionWidgetConfig,
-	loading,
-	data,
-	goTo,
-	adminTranslationIdentifier,
-	t,
-	loadingUserGrowth,
-	fetchUserGrowth = () => {},
+  actionWidgetConfig,
+  loading,
+  data,
+  goTo,
+  adminTranslationIdentifier,
+  t,
+  loadingUserGrowth,
+  fetchUserGrowth = () => {},
+  userGrowthData,
 }) {
-	const { keyIndicatorsData } = data;
+  const keyIndicatorsCards = Array.isArray(data?.keyIndicatorsData)
+    ? data.keyIndicatorsData
+    : [];
 
-	return (
-		<div className="daf-analysis admin-dashboard">
-			<Header title={t(`${adminTranslationIdentifier}::dashboard`)} />
-			<div className="content">
-				<div className="view-content">
-					<div className="daf-analysis-layout">
-						<div className="sections-cont w-pt">
-							<section>
-								{actionWidgetConfig.map((widgetConfig) => {
-									return (
-										<ActionWidget
-											key={widgetConfig.title}
-											{...widgetConfig}
-											onClick={() => goTo(widgetConfig.goToPath)}
-											title={t(`admin::${widgetConfig.title}`)}
-										/>
-									);
-								})}
-							</section>
+  console.log("AdminDashboard:data", data);
 
-							<section>
-								<KeyIndicatorsWidget
-									data={keyIndicatorsData}
-									loading={loading}
-									goTo={goTo}
-									t={t}
-								/>
-							</section>
+  return (
+    <div className="daf-analysis admin-dashboard">
+      <Header title={t(`${adminTranslationIdentifier}::dashboard`)} />
+      <div className="content">
+        <div className="view-content">
+          <div className="daf-analysis-layout">
+            <div className="sections-cont w-pt">
+              <section>
+                {actionWidgetConfig.map((widgetConfig) => (
+                  <ActionWidget
+                    key={widgetConfig.title}
+                    {...widgetConfig}
+                    onClick={() => goTo(widgetConfig.goToPath)}
+                    title={t(`${widgetConfig.title}`)}
+                  />
+                ))}
+              </section>
 
-							<section>
-								<UserStatistics
-									data={data}
-									loading={loading}
-									t={t}
-									loadingUserGrowth={loadingUserGrowth}
-									fetchUserGrowth={fetchUserGrowth}
-									translationKeys={adminTranslationIdentifier}
-								></UserStatistics>
-							</section>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+              <section>
+                <KeyIndicatorsWidget
+                  data={keyIndicatorsCards}   
+                  loading={loading}
+                  goTo={goTo}
+                  t={t}
+                />
+              </section>
+
+              <section>
+                <UserStatistics
+                  data={{ ...data }}
+                  userGrowthData={userGrowthData}    
+                  loading={loading}
+                  t={t}
+                  loadingUserGrowth={loadingUserGrowth}
+                  fetchUserGrowth={fetchUserGrowth}
+                  translationKeys={adminTranslationIdentifier}
+                />
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

package/src/@daf/core/components/Screens/Admin/AdminScreens/Dashboard.jsx

@@ -1,77 +1,62 @@
 import React, { useMemo } from "react";
 import AdminDashboard from "../AdminDashboard/index.jsx";
 
-/**
- * Admin Dashboard Screen Wrapper
- * This is a ready-to-use route component that can be configured per application
- * 
- * @param {Object} config - Application configuration
- * @param {string} config.appName - Application name for translations (e.g., "wazi", "tazama")
- * @param {Function} config.goTo - Navigation function (useNavigate)
- * @param {Function} config.t - Translation function (useTranslation)
- * @param {Function} config.getRedirectLink - Function to get redirect links
- * @param {Function} config.getActionWidgetsConfig - Function that returns action widgets config
- * @param {Function} config.getKeyIndicatorsConfig - Function that returns key indicators config
- * @param {Function} config.useWidgetFetch - Hook to fetch dashboard data
- */
 export default function AdminDashboardScreen({ config }) {
-	const {
-		appName = "app",
-		goTo,
-		t,
-		getRedirectLink,
-		getActionWidgetsConfig,
-		getKeyIndicatorsConfig,
-		useWidgetFetch,
-	} = config;
+  const {
+    appName = "app",
+    goTo,
+    t,
+    getRedirectLink,
+    getActionWidgetsConfig,
+    getKeyIndicatorsConfig,
+    useWidgetFetch,
+  } = config;
 
-	const {
-		data,
-		loading,
-		userGrowthData,
-		fetchUserGrowth,
-		userGrowthDataLoading,
-	} = useWidgetFetch();
+  const {
+    data,
+    loading,
+    userGrowthData,
+    fetchUserGrowth,
+    userGrowthDataLoading,
+  } = useWidgetFetch();
 
-	const actionsWidgetsConfig = useMemo(
-		() => getActionWidgetsConfig({ getRedirectLink }),
-		[getRedirectLink]
-	);
+  console.log({userGrowthData});
 
-	const keyIndicatorsConfig = useMemo(
-		() =>
-			getKeyIndicatorsConfig({
-				getRedirectLink,
-				keyIndicatorsData: data?.keyInformation,
-			}),
-		[data?.keyInformation, getRedirectLink]
-	);
+  const actionsWidgetsConfig = useMemo(
+    () => getActionWidgetsConfig({ getRedirectLink }),
+    [getRedirectLink, getActionWidgetsConfig]
+  );
 
-	// Dummy data for top contributors if not provided
-	const TOTAL_DUMMY = [
-		{ label: "Contributor 1", Score: 0 },
-		{ label: "Contributor 2", Score: 0 },
-		{ label: "Contributor 3", Score: 0 },
-		{ label: "Contributor 4", Score: 0 },
-		{ label: "Contributor 5", Score: 0 },
-	];
+  const keyIndicatorsConfig = useMemo(
+    () =>
+      getKeyIndicatorsConfig({
+        getRedirectLink,
+        keyIndicators: data?.keyIndicators ?? data?.keyInformation,
+      }),
+    [data?.keyIndicators, data?.keyInformation, getRedirectLink, getKeyIndicatorsConfig]
+  );
+
+  const safeUserActivity = Array.isArray(data?.data?.userActivity) ? data.data.userActivity : [];
+  const safeTopContributors = Array.isArray(data?.topContributors) ? data.topContributors : [];
+  const safeUserGrowth = Array.isArray(data?.userGrowthData) ? data.userGrowthData : [];
 
-	return (
-		<AdminDashboard
-			t={t}
-			loading={loading}
-			goTo={goTo}
-			actionWidgetConfig={actionsWidgetsConfig}
-			loadingUserGrowth={userGrowthDataLoading}
-			fetchUserGrowth={fetchUserGrowth}
-			data={{
-				keyIndicatorsData: keyIndicatorsConfig,
-				userActivityData: data?.userActivity,
-				topContributorsData: data?.topContributors || TOTAL_DUMMY,
-				userGrowthData: userGrowthData,
-			}}
-			adminTranslationIdentifier={appName}
-		/>
-	);
-}
 
+  return (
+    <AdminDashboard
+      t={t}
+      goTo={goTo}
+      loading={loading}
+      actionWidgetConfig={actionsWidgetsConfig}
+      loadingUserGrowth={userGrowthDataLoading}
+      fetchUserGrowth={fetchUserGrowth}
+      adminTranslationIdentifier={appName}
+      data={{
+        keyIndicatorsData: keyIndicatorsConfig,
+        userActivityData: safeUserActivity,
+        topContributorsData: safeTopContributors,
+        userGrowthData: safeUserGrowth,
+        data: data,
+      }}
+    />
+  );
+}

package/src/@daf/core/components/Screens/Admin/AdminScreens/Location.jsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from "react";
+import { message } from "antd";
+import LocationTable from "../AdminTables/LocationTable/index.jsx";
+
+/**
+ * Admin Location Screen Wrapper
+ * This is a ready-to-use route component that can be configured per application
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.appName - Application name
+ * @param {string} config.module - Module identifier (APP constant)
+ * @param {Function} config.goTo - Navigation function
+ * @param {Function} config.t - Translation function
+ * @param {Object} config.location - Router location object
+ * @param {boolean} config.isMobile - Is mobile viewport
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Object} config.AdminService - Admin service with methods
+ * @param {Object} config.options - Options object with categories, countries, etc.
+ * @param {Function} config.handleError - Error handling function
+ * @param {number} config.defaultPageSize - Default pagination page size
+ * @param {string} config.view - View identifier
+ * @param {string} config.headerTitle - Header title for the table
+ * @param {Array} config.breadcrumbs - Breadcrumbs configuration
+ * @param {any} config.refetchTrigger - Trigger to refetch data
+ * @param {Function} config.getData - Optional custom getData function
+ */
+export default function AdminLocationScreen({ config }) {
+	const {
+		appName = "app",
+		module,
+		goTo,
+		t,
+		location,
+		isMobile,
+		getRedirectLink,
+		AdminService,
+		options,
+		handleError,
+		defaultPageSize = 20,
+		view,
+		headerTitle = "location",
+		breadcrumbs,
+		refetchTrigger,
+		getData
+	} = config;
+
+	const handleMergeLocations = useCallback(
+		async (mergeData) => {
+			try {
+				if (AdminService.mergeLocations) {
+					await AdminService.mergeLocations(mergeData);
+					message.success(t("Locations merged successfully"));
+				} else {
+					console.warn("AdminService.mergeLocations is not implemented");
+					message.success(t("Locations merged successfully"));
+				}
+			} catch (err) {
+				handleError?.(err);
+			}
+		},
+		[AdminService, t, handleError]
+	);
+
+	// Use custom getData if provided, otherwise use default AdminService.getLocations
+	const getLocations = useCallback((params) => {
+		if (getData) {
+			return getData(params);
+		}
+		return AdminService.getLocations(params);
+	}, [getData, AdminService]);
+
+	return (
+		<LocationTable
+			t={t}
+			goTo={goTo}
+			getRedirectLink={getRedirectLink}
+			location={location}
+			module={module}
+			headerTitle={headerTitle}
+			getData={getLocations}
+			isMobile={isMobile}
+			defaultPageSize={defaultPageSize}
+			view={view}
+			breadcrumbs={breadcrumbs}
+			mergeSubjectsFunction={handleMergeLocations}
+			refetchTrigger={refetchTrigger}
+			config={{
+				options: {
+					category: options?.category,
+					countries: options?.countries,
+				},
+			}}
+		/>
+	);
+}
+