datastake-daf 0.6.835 → 0.6.838

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

@@ -0,0 +1,206 @@
+import { useMemo, useCallback } from "react";
+import dayjs from "dayjs";
+import isoWeek from "dayjs/plugin/isoWeek";
+dayjs.extend(isoWeek);
+
+
+
+export function useTimelineBase({ language, selectedRange }) {
+  const locale = useMemo(
+    () => (language === "sp" ? "es" : language || "en"),
+    [language]
+  );
+
+
+
+  const baseMonths = useMemo(() => {
+    if (selectedRange === "12") {
+      const y = dayjs().year();
+      const arr = [];
+      for (let i = 0; i < 12; i++) {
+        const d = dayjs().year(y).month(i);
+        arr.push({
+          key: d.format("YYYY-MM"),
+          label: d.locale(locale).format("MMM YYYY"),
+          date: d.toISOString(),
+        });
+      }
+      return arr;
+    }
+
+    if (selectedRange === "3") {
+      const end = dayjs().endOf("month");
+      const start = end.subtract(2, "month").startOf("month");
+      const diff = end.diff(start, "month");
+      const arr = [];
+      for (let i = 0; i <= diff; i++) {
+        const d = start.add(i, "month");
+        arr.push({
+          key: d.format("YYYY-MM"),
+          label: d.locale(locale).format("MMM YYYY"),
+          date: d.toISOString(),
+        });
+      }
+      return arr;
+    }
+
+    return [];
+  }, [locale, selectedRange]);
+
+  const baseWeeks = useMemo(() => {
+    if (selectedRange !== "3") return [];
+    const end = dayjs().endOf("week");
+    const start = end.subtract(12, "week");
+    const diff = end.diff(start, "week");
+    const arr = [];
+    for (let i = 0; i <= diff; i++) {
+      const d = start.add(i, "week");
+      arr.push({
+        key: d.format("GGGG-[W]WW"),
+        label: d.format("[W]WW"),
+        date: d.toISOString(),
+      });
+    }
+    return arr;
+  }, [selectedRange]);
+
+  const severityOrder = ["minor", "moderate", "major"];
+
+  const mergeWithData = useCallback(
+    (backendData = []) => {
+      let events = [];
+
+      if (Array.isArray(backendData)) {
+        backendData.forEach((entry) => {
+          if (!entry) return;
+          if (typeof entry === "object" && !Array.isArray(entry)) {
+            Object.values(entry).forEach((arr) => {
+              if (Array.isArray(arr)) events.push(...arr);
+            });
+          } else if (Array.isArray(entry)) {
+            events.push(...entry);
+          }
+        });
+      } else if (backendData && typeof backendData === "object") {
+        Object.values(backendData).forEach((arr) => {
+          if (Array.isArray(arr)) events.push(...arr);
+        });
+      }
+
+      if (selectedRange === "12") {
+        const monthBuckets = baseMonths.reduce((acc, m) => {
+          acc[m.key] = [];
+          return acc;
+        }, {});
+
+        events.forEach((ev) => {
+          const d = dayjs(ev.date);
+          const key = d.format("YYYY-MM");
+          if (monthBuckets[key]) monthBuckets[key].push(ev);
+        });
+
+        const res = [];
+        baseMonths.forEach((m) => {
+          const arr = monthBuckets[m.key];
+          if (!arr.length) {
+            res.push({
+              label: m.label,
+              key: m.key,
+              severity: "placeholder",
+              category: "placeholder",
+              value: 1,
+              isPlaceholder: true,
+            });
+            return;
+          }
+          arr
+            .sort(
+              (a, b) =>
+                severityOrder.indexOf(a.severity) -
+                severityOrder.indexOf(b.severity)
+            )
+            .forEach((ev, idx) => {
+              const source = Array.isArray(ev.source)
+                ? ev.source.join(", ")
+                : ev.source;
+              res.push({
+                ...ev,
+                source,
+                label: m.label,
+                key: m.key,
+                indexInGroup: idx + 1,
+                severity: ev.severity || "undetermined",
+                category: ev.severity || "undetermined",
+                value: 1,
+              });
+            });
+        });
+
+        return res;
+      }
+
+      if (selectedRange === "3") {
+        const weekBuckets = baseWeeks.reduce((acc, w) => {
+          acc[w.key] = [];
+          return acc;
+        }, {});
+
+        events.forEach((ev) => {
+          const d = dayjs(ev.date);
+          const key = d.format("GGGG-[W]WW");
+          if (weekBuckets[key]) weekBuckets[key].push(ev);
+        });
+
+        const res = [];
+        baseWeeks.forEach((w) => {
+          const arr = weekBuckets[w.key];
+          if (!arr.length) {
+            res.push({
+              label: w.label,
+              key: w.key,
+              severity: "placeholder",
+              category: "placeholder",
+              value: 1,
+              isPlaceholder: true,
+            });
+            return;
+          }
+          arr
+            .sort(
+              (a, b) =>
+                severityOrder.indexOf(a.severity) -
+                severityOrder.indexOf(b.severity)
+            )
+            .forEach((ev, idx) => {
+              const source = Array.isArray(ev.source)
+                ? ev.source.join(", ")
+                : ev.source;
+              res.push({
+                ...ev,
+                source,
+                label: w.label,
+                key: w.key,
+                indexInGroup: idx + 1,
+                severity: ev.severity || "undetermined",
+                category: ev.severity || "undetermined",
+                value: 1,
+              });
+            });
+        });
+
+        return res;
+      }
+
+      return [];
+    },
+    [selectedRange, baseMonths, baseWeeks]
+  );
+
+  return {
+    baseMonths,
+    baseWeeks,
+    mergeWithData,
+  };
+}
+
+export default useTimelineBase;

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

@@ -0,0 +1,48 @@
+import { useMemo, useState } from "react";
+import useTimelineBase from "./config.js";
+
+export default function useIncidentsTimeline({
+  t,
+  language,
+  severityOptions = [],
+  selectedRange = "12",
+}) {
+  const [filters, setFilters] = useState({ severity: "all" });
+
+  const { baseMonths, baseWeeks, mergeWithData } = useTimelineBase({ language, selectedRange });
+
+  const filtersConfig = useMemo(
+    () => ({
+      language,
+      filtersConfig: {
+        severity: {
+          type: "select",
+          label: "",
+          placeholder: (tFn) => tFn(""),
+          style: { flex: 1 },
+          labelStyle: { flex: 1 },
+        },
+      },
+      onApply: (val) => setFilters(val),
+      options: {
+        severity: [
+          { value: "all", label: t("All") },
+          ...(severityOptions || []),
+        ],
+      },
+      selectedFilters: filters,
+      type: "small",
+      t,
+    }),
+    [t, language, filters, severityOptions]
+  );
+
+  return {
+    filters,
+    filtersConfig,
+    setFilters,
+    baseMonths,
+    baseWeeks,
+    mergeWithData
+  };
+}

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

@@ -0,0 +1,154 @@
+import { useMemo, useCallback } 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,
+    mergeWithData,
+    baseMonths,
+    baseWeeks,
+  } = useIncidentsTimeline({
+    t,
+    language,
+    severityOptions: options?.severityOptions || [],
+    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]);
+
+  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
+      loading={loading}
+      filtersConfig={filtersConfig}
+      title={t("nashiriki::Incidents Timeline")}
+      className="with-border-header"
+    >
+      <div className="mb-4 flex-1 flex flex-column justify-content-center">
+        <StackChart
+          data={chartData}
+          xFieldKey="label"
+          categories={categories}
+          seriesField="severity"
+          colors={severityColors}
+          doConstraints={false}
+          renderTooltip={getTooltipContent}
+        />
+      </div>
+    </Widget>
+  );
+}
+
+IncidentsTimeline.propTypes = {
+  selectedRange: PropTypes.string,
+  selectedPartners: PropTypes.object,
+  t: PropTypes.func.isRequired,
+  language: PropTypes.string,
+  goTo: PropTypes.func.isRequired,
+  user: PropTypes.object,
+  options: PropTypes.shape({
+    severityOptions: PropTypes.array,
+  }),
+};

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

@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useState } from "react";
+import DashboardService from "../../../../../../../services/DashboardService.js";
+
+
+export default function useProblemSolvers({ t = () => {} } = {}) {
+	const [filters, setFilters] = useState({
+		administrativeLevel1: "all",
+	});
+
+	const [filterOptions, setFilterOptions] = useState([]);
+
+
+	useEffect(() => {
+		async function fetchOptions() {
+			try {
+				const { data } = await DashboardService.getWidgetConflictManagement(
+					"/problem-solvers",
+					{},
+					"dashboard/conflict-management"
+				);
+
+				const all = Object.keys(data);
+
+				const options = all
+					.map((key) => {
+						const actions = data[key].actions;
+
+						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);
+			}
+		}
+
+		fetchOptions();
+	}, []);
+
+
+	const filtersConfig = useMemo(
+		() => ({
+			filtersConfig: {
+				administrativeLevel1: {
+					type: "select",
+					label: "",
+					placeholder: t("Select"),
+					style: { flex: 1 },
+					labelStyle: { flex: 1 },
+				},
+			},
+			onApply: (val) => setFilters(val),
+			options: {
+				administrativeLevel1: [
+					{ label: t("All"), value: "all" },
+					...filterOptions,
+				],
+			},
+			selectedFilters: filters,
+			type: "small",
+			t,
+		}),
+		[t, filters, filterOptions]
+	);
+
+	return {
+		filters,
+		filtersConfig,
+	};
+}

package/src/@daf/{core/components/Screens → pages/Dashboards}/ConflictManagement/components/RisksWidget/components/ProblemSolver/index.js

@@ -1,20 +1,21 @@
 import React, { useMemo, useCallback } from 'react'
 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 { 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();
+    const { filters, filtersConfig } = useProblemSolvers({ t });
 
     const defaultFetchConfig = useMemo(
         () => ({
-            basepath: "conflict-management",  
             url: "/problem-solvers",
+            basepath: "dashboard/conflict-management",
             filters: {
                 ...filters,
                 period: selectedRange,
@@ -26,8 +27,14 @@ function ProblemSolvers({ selectedPartners = {}, loading: parentLoading = false,
         [filters, selectedRange, selectedPartners],
     );
     
+    const getData = useCallback(({ url, filters, basepath }) => {
+        return DashboardService.getWidgetConflictManagement(url, filters, basepath);
+    }, []);
 
-    const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
+    const { data, loading } = useWidgetFetch({ 
+        config: defaultFetchConfig,
+        getData 
+    });
 
     const pieData = useMemo(() => {
         if (!data || Array.isArray(data)) return []; 

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

@@ -0,0 +1,10 @@
+
+export const getColors = (theme) => {
+  return [
+    theme.colorPrimary8,
+    theme.colorPrimary7,
+    theme.colorPrimary5,
+    theme.colorPrimary6,
+    theme.colorPrimary4,
+  ];
+};

package/src/@daf/{core/components/Screens → pages/Dashboards}/ConflictManagement/components/RisksWidget/components/TerritorialDistribution/index.js

@@ -1,32 +1,38 @@
 import React, { useMemo, useCallback } from 'react'
 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 { 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 useTerritorialDistribution from './config.js';
 
 function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading = false, t = (s) => s, theme = {}, category = "conflict", selectedRange ,goTo = () => {}, getRedirectLink = () => {}}) {
-    const { filters, filtersConfig } = useTerritorialDistribution({ t });
     const colors = getColors(theme);
 
     const defaultFetchConfig = useMemo(
         () => ({
             url: "/territorial-distribution",
+            basepath: "dashboard/conflict-management",
             filters: {
-                ...filters,
                 category,
                 period: selectedRange,
                 sources: selectedPartners?.partners || [],
             },
-            defaultData: [],
+            defaultData: {},
             stop: selectedPartners?.loading,
         }),
-        [filters, category, selectedRange, selectedPartners],
+        [category, selectedRange, selectedPartners],
     );
 
-    const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
+    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 []; 
@@ -50,7 +56,7 @@ function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading
     const isEmpty = !pieData.length;
 
     const getTooltipChildren = useCallback((items) => {
-        const item = items[0]; 
+        const item = Array.isArray(items) ? items[0] : items;
         
         return renderTooltipJsx({
             title: item?.label || t("Undetermined"),
@@ -58,7 +64,7 @@ function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading
             onClickLink: () => {
                  if (item?.label) {
                      goTo(
-                         `/app/incident?administrativeLevel1=${item?.locationData?.administrativeLevel1}&administrativeLevel2=${item?.locationData?.administrativeLevel2}&country=${item?.locationData?.country}`,
+                         `/app/incidents?administrativeLevel1=${item?.locationData?.administrativeLevel1}&administrativeLevel2=${item?.locationData?.administrativeLevel2}&country=${item?.locationData?.country}`,
                      );
                  } else {
                     goTo("/app/incident");
@@ -78,7 +84,6 @@ function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading
             loading={loading || parentLoading}
             title={t("Territorial Distribution")}
             className="with-border-header"
-            filtersConfig={filtersConfig}
         >
             <Chart
                 mouseXOffset={10}

package/src/@daf/{core/components/Screens → pages/Dashboards}/ConflictManagement/components/RisksWidget/index.js

@@ -1,10 +1,10 @@
 import { Select } from "antd";
 import { useState } from "react";
-import Widget from "../../../../Dashboard/Widget/index.jsx";
 import IncidentsTime from "./components/IncidentsTime/index.js";
 import TerritorialDistribution from "./components/TerritorialDistribution/index.js";
 import ProblemSolver from "./components/ProblemSolver/index.js";
 import { filterOptions } from "./config.js";
+import Widget from "../../../../../core/components/Dashboard/Widget/index.jsx";
 
 export default function RisksWidget({ 
     title = "Analytics",