datastake-daf 0.6.845 → 0.6.846

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/ProblemSolver/hook.js

@@ -1,55 +1,77 @@
 import { useEffect, useMemo, useState } from "react";
 import DashboardService from "../../../../../../../services/DashboardService.js";
+import { useWidgetFetch } from "../../../../../../../hooks/useWidgetFetch.js";
 
+const distributionColors = ["#3061A8", "#6698E4", "#A6C3EF", "#D6E3F8", "#E6EEFB"];
 
-export default function useProblemSolvers({ t = () => {} } = {}) {
+export default function useProblemSolvers({ t = () => {}, selectedRange, selectedPartners }) {
 	const [filters, setFilters] = useState({
 		administrativeLevel1: "all",
 	});
 
 	const [filterOptions, setFilterOptions] = useState([]);
 
+	const defaultFetchConfig = useMemo(
+        () => ({
+            url: "/problem-solvers",
+            basepath: "dashboard/conflict-management",
+            filters: {
+                ...filters,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            stop: selectedPartners?.loading,
+        }),
+        [filters, selectedRange, selectedPartners],
+    );
+    
+    const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
 
 	useEffect(() => {
-		async function fetchOptions() {
-			try {
-				const { data } = await DashboardService.getWidgetConflictManagement(
-					"/problem-solvers",
-					{},
-					"dashboard/conflict-management"
-				);
+		if(Object.keys(data).length > 0) {
 
-				const all = Object.keys(data);
+			const options = Object.keys(data).flatMap((key) => {
+				const actions = data[key].actions;
 
-				const options = all
-					.map((key) => {
-						const actions = data[key].actions;
+				return actions.filter((action) => action.location !== undefined).flatMap((action) => {
+					const administrativeLevel1 = action?.location?.administrativeLevel1;
+					const name =
+						action?.location?.linking?.SCL?.[administrativeLevel1]?.name;
+					return {
+						label: name,
+						value: administrativeLevel1,
+					};
+				});
+			}).filter((item) => item !== undefined);
 
-						return actions.map((action) => {
-							if (action.location === undefined) {
-								return;
-							}
-							const administrativeLevel1 = action?.location?.administrativeLevel1;
-							const name =
-								action?.location?.linking?.SCL?.[administrativeLevel1]?.name;
-							return {
-								label: name,
-								value: administrativeLevel1,
-							};
-						});
-					})
-					.flat()
-					.filter((item) => item !== undefined);
-
-				setFilterOptions(options);
-			} catch (err) {
-				console.log(err);
-			}
+			const uniqueOptions = Array.from(
+				new Map(options.map(item => [item.value, item])).values()
+			);
+			
+			setFilterOptions(uniqueOptions);
 		}
+	}, [data])
+
+    const pieData = useMemo(() => {
+        if (!data || Array.isArray(data)) return []; 
+        const all = Object.keys(data);
+        const totalActions = all.reduce((acc, key) => acc + (data[key]?.actions?.length || 0), 0);
 
-		fetchOptions();
-	}, []);
+        return all
+            .sort((a, b) => (data[b]?.actions?.length || 0) - (data[a]?.actions?.length || 0))
+            .map((key, index) => {
+                const item = data[key];
+                return {
+                   value: item?.actions?.length,
+                   label: item?.implementerData?.name,
+                   implementerData: item?.implementerData,
+                   color: distributionColors[index % distributionColors.length],
+                   percent: totalActions ? (item?.actions?.length / totalActions) : 0,
+                }
+            });
+    }, [data]);
 
+	const isEmpty = !pieData.length;
 
 	const filtersConfig = useMemo(
 		() => ({
@@ -79,5 +101,8 @@ export default function useProblemSolvers({ t = () => {} } = {}) {
 	return {
 		filters,
 		filtersConfig,
+		pieData,
+		loading,
+		isEmpty,
 	};
 }

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/ProblemSolver/index.js

@@ -3,77 +3,28 @@ import PropTypes from 'prop-types';
 import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
 import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
 import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
-import {useWidgetFetch} from '../../../../../../../hooks/useWidgetFetch.js';
-import DashboardService from '../../../../../../../services/DashboardService.js';
 import useProblemSolvers from './hook.js';
 
-const distributionColors = ["#3061A8", "#6698E4", "#A6C3EF", "#D6E3F8", "#E6EEFB"];
-
-function ProblemSolvers({ selectedPartners = {}, loading: parentLoading = false, t=()=>{}, theme = {}, selectedRange ,goTo = () => {}, getRedirectLink = () => {}}) {
-    const { filters, filtersConfig } = useProblemSolvers({ t });
-
-    const defaultFetchConfig = useMemo(
-        () => ({
-            url: "/problem-solvers",
-            basepath: "dashboard/conflict-management",
-            filters: {
-                ...filters,
-                period: selectedRange,
-                sources: selectedPartners?.partners || [],
-            },
-            defaultData: [],
-            stop: selectedPartners?.loading,
-        }),
-        [filters, selectedRange, selectedPartners],
-    );
-    
-    const getData = useCallback(({ url, filters, basepath }) => {
-        return DashboardService.getWidgetConflictManagement(url, filters, basepath);
-    }, []);
-
-    const { data, loading } = useWidgetFetch({ 
-        config: defaultFetchConfig,
-        getData 
-    });
-
-    const pieData = useMemo(() => {
-        if (!data || Array.isArray(data)) return []; 
-        const all = Object.keys(data);
-        const totalActions = all.reduce((acc, key) => acc + (data[key]?.actions?.length || 0), 0);
-
-        return all
-            .sort((a, b) => (data[b]?.actions?.length || 0) - (data[a]?.actions?.length || 0))
-            .map((key, index) => {
-                const item = data[key];
-                return {
-                   value: item?.actions?.length,
-                   label: item?.implementerData?.name,
-                   implementerData: item?.implementerData,
-                   color: distributionColors[index % distributionColors.length],
-                   percent: totalActions ? (item?.actions?.length / totalActions) : 0,
-                }
-            });
-    }, [data]);
-
-    const isEmpty = !pieData.length;
-
-    const getTooltipChildren = useCallback((items) => {
-        const item = Array.isArray(items) ? items[0] : items;
-        
-        return renderTooltipJsx({
-            title: item?.label || t("Undetermined"),
-            link: true,
-            onClickLink: () => {
-                goTo("/app/corrective-actions");
-            },
-            items: [
-                {
-                    label: t("Number of actions"),
-                    value: item?.value,
-                },
-            ],
+function ProblemSolvers({ 
+    selectedPartners = {}, 
+    loading: parentLoading = false, 
+    t=()=>{}, 
+    theme = {}, 
+    selectedRange,
+    goTo = () => {}, 
+    getRedirectLink = () => {}
+}) {
+    const { 
+        filters, 
+        filtersConfig, 
+        pieData, 
+        loading, 
+        isEmpty 
+    } = useProblemSolvers({ 
+            t, 
+            selectedRange, 
+            selectedPartners 
         });
-    }, [t, goTo]);
 
     return (
         <Widget
@@ -91,7 +42,23 @@ function ProblemSolvers({ selectedPartners = {}, loading: parentLoading = false,
                 isPie
                 t={t}
                 isEmpty={isEmpty}
-                getTooltipChildren={getTooltipChildren}
+                getTooltipChildren={(items) => {
+                    const item = Array.isArray(items) ? items[0] : items;
+                    
+                    return renderTooltipJsx({
+                        title: item?.label || t("Undetermined"),
+                        link: true,
+                        onClickLink: () => {
+                            goTo("/app/corrective-actions");
+                        },
+                        items: [
+                            {
+                                label: t("Number of actions"),
+                                value: item?.value,
+                            },
+                        ],
+                    });
+                }}
             />
         </Widget>
     );

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/TerritorialDistribution/hook.js

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { getColors } from './config.js';
+import { useWidgetFetch } from '../../../../../../../hooks/useWidgetFetch.js';
+
+export const useTerritorialDistribution = ({
+    category,
+    selectedRange,
+    selectedPartners,
+    theme,
+}) => {
+    const colors = getColors(theme);
+
+    const defaultFetchConfig = useMemo(
+        () => ({
+            url: "/territorial-distribution",
+            basepath: "dashboard/conflict-management",
+            filters: {
+                category,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            defaultData: {},
+            stop: selectedPartners?.loading,
+        }),
+        [category, selectedRange, selectedPartners],
+    );
+
+    const { data, loading } = useWidgetFetch({  config: defaultFetchConfig });
+
+    const pieData = useMemo(() => {
+        if (!data || Array.isArray(data)) return []; 
+        const all = Object.keys(data);
+        const totalEvents = all.reduce((acc, key) => acc + (data[key]?.events?.length || 0), 0);
+
+        return all
+            .sort((a, b) => (data[b]?.events?.length || 0) - (data[a]?.events?.length || 0))
+            .map((key, index) => {
+                const item = data[key];
+                return {
+                   value: item?.events?.length,
+                   label: item?.locationData?.name,
+                   locationData: item?.locationData,
+                   color: colors[index % colors.length],
+                   percent: totalEvents ? (item?.events?.length / totalEvents) : 0,
+                }
+            });
+    }, [data, colors]);
+
+    const isEmpty = !pieData.length;
+
+    return {
+        pieData,
+        loading,    
+        isEmpty,
+    }
+}

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/TerritorialDistribution/index.js

@@ -3,88 +3,37 @@ import PropTypes from 'prop-types';
 import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
 import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
 import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
-import {useWidgetFetch} from '../../../../../../../hooks/useWidgetFetch.js';
-import DashboardService from '../../../../../../../services/DashboardService.js';
-import { getColors } from './config.js';
+import { buildQueryString } from '../../../../../../../../helpers/urlHelpers.js';
+import { useTerritorialDistribution } from './hook.js';
 
-function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading = false, t = (s) => s, theme = {}, category = "conflict", selectedRange ,goTo = () => {}, getRedirectLink = () => {}}) {
-    const colors = getColors(theme);
-
-    const defaultFetchConfig = useMemo(
-        () => ({
-            url: "/territorial-distribution",
-            basepath: "dashboard/conflict-management",
-            filters: {
-                category,
-                period: selectedRange,
-                sources: selectedPartners?.partners || [],
-            },
-            defaultData: {},
-            stop: selectedPartners?.loading,
-        }),
-        [category, selectedRange, selectedPartners],
-    );
-
-    const getData = useCallback(({ url, filters, basepath }) => {
-        return DashboardService.getWidgetConflictManagement(url, filters, basepath);
-    }, []);
-
-    const { data, loading } = useWidgetFetch({ 
-        config: defaultFetchConfig,
-        getData 
+function TerritorialDistribution({ 
+    selectedPartners = {}, 
+    loading: parentLoading = false, 
+    t = (s) => s, theme = {}, 
+    category = "conflict", 
+    selectedRange,
+    goTo = () => {}, 
+    getRedirectLink = () => {}
+}) {
+    const { 
+        pieData, 
+        loading, 
+        isEmpty 
+    } = useTerritorialDistribution({ 
+        category, 
+        selectedRange, 
+        selectedPartners, 
+        theme,
     });
 
-    const pieData = useMemo(() => {
-        if (!data || Array.isArray(data)) return []; 
-        const all = Object.keys(data);
-        const totalEvents = all.reduce((acc, key) => acc + (data[key]?.events?.length || 0), 0);
-
-        return all
-            .sort((a, b) => (data[b]?.events?.length || 0) - (data[a]?.events?.length || 0))
-            .map((key, index) => {
-                const item = data[key];
-                return {
-                   value: item?.events?.length,
-                   label: item?.locationData?.name,
-                   locationData: item?.locationData,
-                   color: colors[index % colors.length],
-                   percent: totalEvents ? (item?.events?.length / totalEvents) : 0,
-                }
-            });
-    }, [data, colors]);
-
-    const isEmpty = !pieData.length;
-
-    const getTooltipChildren = useCallback((items) => {
-        const item = Array.isArray(items) ? items[0] : items;
-        
-        return renderTooltipJsx({
-            title: item?.label || t("Undetermined"),
-            link: true,
-            onClickLink: () => {
-                 if (item?.label) {
-                     goTo(
-                         `/app/incidents?administrativeLevel1=${item?.locationData?.administrativeLevel1}&administrativeLevel2=${item?.locationData?.administrativeLevel2}&country=${item?.locationData?.country}`,
-                     );
-                 } else {
-                    goTo("/app/incident");
-                 }
-            },
-            items: [
-                {
-                    label: t("Number of incidents"),
-                    value: item?.value,
-                },
-            ],
-        });
-    }, [t, goTo]);
-
     return (
         <Widget
             loading={loading || parentLoading}
             title={t("Territorial Distribution")}
-            className="with-border-header"
+
+            className="with-border-header h-w-btn-header"
         >
+   
             <Chart
                 mouseXOffset={10}
                 mouseYOffset={10}
@@ -94,8 +43,34 @@ function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading
                 isPie
                 t={t}
                 isEmpty={isEmpty}
-                getTooltipChildren={getTooltipChildren}
+                getTooltipChildren={(items) => {
+                    const item = Array.isArray(items) ? items[0] : items;
+                    
+                    return renderTooltipJsx({
+                        title: item?.label || t("Undetermined"),
+                        link: true,
+                        onClickLink: () => {
+                             if (item?.label) {
+                                const queryString = buildQueryString({
+                                    administrativeLevel1: item?.locationData?.administrativeLevel1,
+                                    administrativeLevel2: item?.locationData?.administrativeLevel2,
+                                    country: item?.locationData?.country,
+                                });
+                                 goTo(`/app/incidents${queryString}`);
+                             } else {
+                                goTo("/app/incidents");
+                             }
+                        },
+                        items: [
+                            {
+                                label: t("Number of incidents"),
+                                value: item?.value,
+                            },
+                        ],
+                    });
+                }}
             />
+            		
         </Widget>
     );
 }

package/src/@daf/pages/Dashboards/ConflictManagement/index.js

@@ -2,8 +2,6 @@ import React, { useMemo, useEffect } from "react";
 import KeyIndicators from "./components/KeyIndicators/index.js";
 import MineSites from "./components/MineSite/index.js";
 import RisksWidget from "./components/RisksWidget/index.js";
-import { useSources } from "../../../hooks/useSources.js";
-import { renderBreadCrumbs } from "../../../../helpers/breadCrumbs.js";
 import CustomIcon from "../../../core/components/Icon/CustomIcon.jsx";
 import { Header, Multiselect } from "../../../../index.js";
 import DashboardLayout from '../../../core/components/Dashboard/DashboardLayout/index.jsx';
@@ -16,21 +14,23 @@ export default function ConflictManagement({
     getRedirectLink = (s) => s, 
     theme = {},
     options = {},
-	breadcrumbs = [],
-
+    breadcrumbs = [],
+	partners, 
+	selectedPartners,
+	setSelectedPartners, 
+	informationSources
 }) {
-	const { partners, selectedPartners, setSelectedPartners, informationSources } =
-		useSources({ user, t });
-
 	// const { pushPath } = useHistory();
 
 	// useEffect(() => {
 	// 	pushPath(`/app/conflict-management`);
 	// }, []);
 
-	const breadCrumbs = useMemo(() => {
-		return renderBreadCrumbs({ t, view: "conflict-management", mod: APP, goTo });
-	}, [t, APP, goTo]);
+	console.log(partners, "partners");
+
+	// const breadCrumbs = useMemo(() => {
+	// 	return renderBreadCrumbs({ t, view: "conflict-management", mod: APP, goTo });
+	// }, [t, APP, goTo]);
 
 	const sourceOptions = useMemo(() => {
 		return partners.map((partner) => {
@@ -53,7 +53,7 @@ export default function ConflictManagement({
 		header={
 		<Header
 				title={t("conflict-management")}
-				breadcrumbs={breadCrumbs}
+				breadcrumbs={breadcrumbs}
 				supportText={
 					<>
 						{t("Supported by")}{" "}

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/components/GenderDistribution/index.js

@@ -39,56 +39,6 @@ function GenderDistribution({
 
     const isEmpty = useMemo(() => Object.keys(data).filter((k) => !!data[k]).length === 0, [data]);
 
-	const getTooltipChildren = useCallback(
-		(item) => {
-			if (isTradeActions) {
-				if (isEmpty) {
-					return;
-				}
-
-				return renderTooltipJsx({
-					title: t("Role"),
-					items: [
-						{
-							label:
-								(options?.optionPositionSupplyChain || options?.positionSupplyChainOptions || [])?.find((o) => {
-									return o.value === item.key;
-								}).label || item.key,
-							value: data[item.key] || 0,
-						},
-					],
-				});
-			} else {
-				if (isEmpty) {
-					return renderTooltipJsx({
-						title: t("Gender"),
-						items: config.map((conf) => ({
-							label: t(conf.label),
-							value: 0,
-						})),
-					});
-				}
-
-				const _config = config?.find((c) => c.key === item.key);
-
-				if (_config) {
-					return renderTooltipJsx({
-						title: t("Gender"),
-						items: [
-							{
-								label: t(_config.label),
-								value: `${Math.round(item.percent * 100)}%`,
-							},
-						],
-					});
-				}
-
-				return null;
-			}
-		},
-		[t, data, isTradeActions],
-	);
-
     return (
         <Widget
             loading={loading}
@@ -110,7 +60,52 @@ function GenderDistribution({
                     isPie
                     t={t}
                     isEmpty={isEmpty}
-                    getTooltipChildren={getTooltipChildren}
+                    getTooltipChildren={		(item) => {
+						if (isTradeActions) {
+							if (isEmpty) {
+								return;
+							}
+			
+							return renderTooltipJsx({
+								title: t("Role"),
+								items: [
+									{
+										label:
+											(options?.optionPositionSupplyChain || options?.positionSupplyChainOptions || [])?.find((o) => {
+												return o.value === item.key;
+											}).label || item.key,
+										value: data[item.key] || 0,
+									},
+								],
+							});
+						} else {
+							if (isEmpty) {
+								return renderTooltipJsx({
+									title: t("Gender"),
+									items: config.map((conf) => ({
+										label: t(conf.label),
+										value: 0,
+									})),
+								});
+							}
+			
+							const _config = config?.find((c) => c.key === item.key);
+			
+							if (_config) {
+								return renderTooltipJsx({
+									title: t("Gender"),
+									items: [
+										{
+											label: t(_config.label),
+											value: `${Math.round(item.percent * 100)}%`,
+										},
+									],
+								});
+							}
+			
+							return null;
+						}
+					}}
                 />
             </div>
         </Widget>

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/components/Identification/hook.js

@@ -53,27 +53,27 @@ export function useIdentification({ data, theme = {}, options = {} }) {
 			yFieldKey: "value",
 			seriesField: "typeOfProduct",
 			color: allSeenProducts.map((_, index) => colors[index % colors.length]),
-			renderTooltipContent: (title, items) => {
-				if (Array.isArray(items) && items[0]) {
-					const title = items[0].title;
-					const values = graphData.filter((d) => d.date === title);
-					return {
-						title: "Products",
-						items: values.map((val) => {
-							return{
-								label: findOptions(val.typeOfProduct, options?.mineralOptions) || val.typeOfProduct,
-								color: colors[
-									allSeenProducts.indexOf(val.typeOfProduct) % colors.length
-								],
-								value: val.value.toLocaleString(),
-							}
-						}),
-					};
-				}
-				return { title: "", items: [] };
-			},
+			// renderTooltipContent: (title, items) => {
+			// 	if (Array.isArray(items) && items[0]) {
+			// 		const title = items[0].title;
+			// 		const values = graphData.filter((d) => d.date === title);
+			// 		return {
+			// 			title: "Products",
+			// 			items: values.map((val) => {
+			// 				return{
+			// 					label: findOptions(val.typeOfProduct, options?.mineralOptions) || val.typeOfProduct,
+			// 					color: colors[
+			// 						allSeenProducts.indexOf(val.typeOfProduct) % colors.length
+			// 					],
+			// 					value: val.value.toLocaleString(),
+			// 				}
+			// 			}),
+			// 		};
+			// 	}
+			// 	return { title: "", items: [] };
+			// },
 		};
 	}, [graphData, allSeenProducts, options.minerals]);
 
-	return chartConfig;
+	return { chartConfig, colors, allSeenProducts, graphData};
 }