datastake-daf 0.6.847 → 0.6.848

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

@@ -1,16 +1,75 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, useCallback } from "react";
 import useTimelineBase from "./config.js";
-
+import DashboardService from "../../../../../../../services/DashboardService.js";
 export default function useIncidentsTimeline({
   t,
   language,
   severityOptions = [],
   selectedRange = "12",
+  selectedPartners = {},
+  user,
 }) {
   const [filters, setFilters] = useState({ severity: "all" });
-
   const { baseMonths, baseWeeks, mergeWithData } = useTimelineBase({ language, selectedRange });
 
+  const getSourceParam = useCallback(
+    (sourceId) => {
+      if (user?.company?.id !== sourceId) return `?sourceId=${sourceId}`;
+      return "";
+    },
+    [user?.company?.id]
+  );
+   const severityColors = useMemo(
+    () => ({
+      major: "#cf1322",
+      minor: "#fadb14",
+      moderate: "#fa8c16",
+      undetermined: "#999999",
+      placeholder: "transparent",
+    }),
+    []
+  );
+  
+  
+     const renderSeverity = (val) => {
+    if (val === "major")
+      return <span style={{ color: severityColors.major }}>{t("Major")}</span>;
+    if (val === "minor")
+      return <span style={{ color: severityColors.minor }}>{t("Minor")}</span>;
+    if (val === "moderate")
+      return (
+        <span style={{ color: severityColors.moderate }}>{t("Moderate")}</span>
+      );
+    return <span>{t("Undetermined")}</span>;
+  };
+  
+     const categories = useMemo(() => {
+    if (selectedRange === "12") return baseMonths.map((m) => m.label);
+    return baseWeeks.map((w) => w.label);
+  }, [selectedRange, baseMonths, baseWeeks]);
+
+  const defaultFetchConfig = useMemo(
+    () => ({
+      url: `/incidents-timeline`,
+      filters: {
+        ...filters,
+        severity: filters.severity ? filters.severity : "all",
+        period: selectedRange,
+        sources: selectedPartners?.partners || [],
+      },
+      defaultData: [],
+      stop: selectedPartners?.loading,
+    }),
+    [filters, selectedRange, selectedPartners]
+  );
+
+  const getIncidentsTimelineData = useCallback(
+    ({ url, filters }) =>
+      DashboardService.getWidgetConflictManagement(url, filters),
+    []
+  );
+
+
   const filtersConfig = useMemo(
     () => ({
       language,
@@ -43,6 +102,12 @@ export default function useIncidentsTimeline({
     setFilters,
     baseMonths,
     baseWeeks,
-    mergeWithData
+    mergeWithData,
+    defaultFetchConfig,
+    getSourceParam,
+    getIncidentsTimelineData,
+    severityColors,
+    renderSeverity,
+    categories,
   };
 }

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

@@ -1,27 +1,26 @@
-import { useMemo, useCallback } from "react";
+import { useMemo } from "react";
 import Widget from "../../../../../../../core/components/Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
 import useIncidentsTimeline from "./hook.js";
 import { useWidgetFetch } from "../../../../../../../hooks/useWidgetFetch.js";
-import DashboardService from "../../../../../../../services/DashboardService.js";
 import { renderDateFormatted } from "../../../../../../../../helpers/Forms.js";
 import StackChart from "../../../../../../../core/components/Charts/StackChart/index.jsx";
-
 export default function IncidentsTimeline({
   selectedRange,
-  selectedPartners = {},
   t,
   language,
   goTo,
-  user,
   options,
 }) {
   const {
-    filters,
     filtersConfig,
+    defaultFetchConfig,
+    getSourceParam,
+    getIncidentsTimelineData,
     mergeWithData,
-    baseMonths,
-    baseWeeks,
+    severityColors,
+    renderSeverity,
+    categories,
   } = useIncidentsTimeline({
     t,
     language,
@@ -29,96 +28,13 @@ export default function IncidentsTimeline({
     selectedRange,
   });
 
-  const getSourceParam = useCallback(
-    (sourceId) => {
-      if (user?.company?.id !== sourceId) return `?sourceId=${sourceId}`;
-      return "";
-    },
-    [user?.company?.id]
-  );
-
-  const severityColors = useMemo(
-    () => ({
-      major: "#cf1322",
-      minor: "#fadb14",
-      moderate: "#fa8c16",
-      undetermined: "#999999",
-      placeholder: "transparent",
-    }),
-    []
-  );
-
-  const defaultFetchConfig = useMemo(
-    () => ({
-      url: `/incidents-timeline`,
-      filters: {
-        ...filters,
-        severity: filters.severity ? filters.severity : "all",
-        period: selectedRange,
-        sources: selectedPartners?.partners || [],
-      },
-      defaultData: [],
-      stop: selectedPartners?.loading,
-    }),
-    [filters, selectedRange, selectedPartners]
-  );
-
-  const getIncidentsTimelineData = useCallback(
-    ({ url, filters }) =>
-      DashboardService.getWidgetConflictManagement(url, filters),
-    []
-  );
-
   const { data, loading } = useWidgetFetch({
     config: defaultFetchConfig,
     getData: getIncidentsTimelineData,
   });
-
-  const renderSeverity = (val) => {
-    if (val === "major")
-      return <span style={{ color: severityColors.major }}>{t("Major")}</span>;
-    if (val === "minor")
-      return <span style={{ color: severityColors.minor }}>{t("Minor")}</span>;
-    if (val === "moderate")
-      return (
-        <span style={{ color: severityColors.moderate }}>{t("Moderate")}</span>
-      );
-    return <span>{t("Undetermined")}</span>;
-  };
-
   const chartData = useMemo(() => mergeWithData(data), [data, mergeWithData]);
 
-  const categories = useMemo(() => {
-    if (selectedRange === "12") return baseMonths.map((m) => m.label);
-    return baseWeeks.map((w) => w.label);
-  }, [selectedRange, baseMonths, baseWeeks]);
-  console.log({filtersConfig})
 
-  const getTooltipContent = useCallback(
-    ({ item }) => {
-      if (!item) return { title: "", items: [] };
-
-      return {
-        title: item.name || item.label || t("Undetermined"),
-        subTitle: renderDateFormatted(item.date, "DD MMM YYYY"),
-        link: true,
-        onClickLink: () => {
-          goTo(
-            `/app/view/incidents/${item.datastakeId}/identification${getSourceParam(
-              item?.sourceId
-            )}`
-          );
-        },
-        items: [
-          { label: t("nashiriki::Source"), value: item?.source || "--" },
-          item.severity
-            ? { label: t("Severity"), value: renderSeverity(item.severity) }
-            : null,
-        ].filter(Boolean),
-      };
-    },
-    [t, goTo, getSourceParam, renderSeverity]
-  );
 
   return (
     <Widget
@@ -135,7 +51,28 @@ export default function IncidentsTimeline({
           seriesField="severity"
           colors={severityColors}
           doConstraints={false}
-          renderTooltip={getTooltipContent}
+          renderTooltip={({ item }) => {
+            if (!item) return { title: "", items: [] };
+
+            return {
+              title: item.name || item.label || t("Undetermined"),
+              subTitle: renderDateFormatted(item.date, "DD MMM YYYY"),
+              link: true,
+              onClickLink: () => {
+                goTo(
+                  `/app/view/incidents/${item.datastakeId}/identification${getSourceParam(
+                    item?.sourceId
+                  )}`
+                );
+              },
+              items: [
+                { label: t("nashiriki::Source"), value: item?.source || "--" },
+                item.severity
+                  ? { label: t("Severity"), value: renderSeverity(item.severity) }
+                  : null,
+              ].filter(Boolean),
+            };
+          }}
         />
       </div>
     </Widget>

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,
+    }
+}