datastake-daf 0.6.830 → 0.6.832

package/src/@daf/core/components/Screens/ConflictManagement/components/KeyIndicators/config.js

@@ -0,0 +1,106 @@
+import React from "react";
+import CustomIcon from "../../../../../components/Icon/CustomIcon.jsx";
+
+const renderNumber = (number, locale = 'en') => {
+  return new Intl.NumberFormat(locale).format(number);
+}
+
+export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Identified Armed Groups")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/armed-groups"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => {
+			return <span>{renderNumber(data.armedGroups ?? 0, "en")}</span>;
+		},
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Reported Incidents")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/incident"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{renderNumber(data?.incidents ?? 0, "en")}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Monitored Locations")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/locations"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{renderNumber(data.locations ?? 0, "en")}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Testimonials")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/testimonials"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{renderNumber(data.testimonials ?? 0, "en")}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Information Sources")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/partners"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{renderNumber(data.partners ?? 0, "en")}</span>,
+	},
+];

package/src/@daf/core/components/Screens/ConflictManagement/components/KeyIndicators/index.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import KeyIndicatorsWidget from "../../../../Dashboard/Widget/KeyIndicators/index.jsx";
+import { getRowConfig } from "./config.js";
+import {useWidgetFetch} from "../../../../../../hooks/useWidgetFetch.js";
+
+export const defaultFetchConfig = {
+	url: "/informations",
+	filters: {},
+    basepath: "dashboard/conflict-management"
+};
+
+export default function KeyIndicators({ selectedPartners = {}, partners = 0, t = (s) => s, goTo = () => {}, getRedirectLink = (s) => s, theme = {} }) {
+	const fetchConfig = useMemo(
+		() => ({
+			...defaultFetchConfig,
+			filters: {
+				sources: selectedPartners?.partners || [],
+			},
+			stop: selectedPartners?.loading,
+		}),
+		[selectedPartners],
+	);
+
+	const { data, loading } = useWidgetFetch({ config: fetchConfig });
+
+	const config = useMemo(
+		() =>
+			getRowConfig({
+				t,
+				data: { ...data, partners },
+				goTo,
+				getRedirectLink,
+                theme,
+			}),
+		[t, data, goTo, getRedirectLink, partners, theme],
+	);
+
+	return (
+		<KeyIndicatorsWidget
+			t={t}
+			config={config}
+			loading={loading}
+			title={t("Key Information")}
+			className="small-content"
+		/>
+	);
+}

package/src/@daf/core/components/Screens/ConflictManagement/components/MineSite/helper.js

@@ -0,0 +1,3 @@
+const areaColors = ["#6698E4", "#B37FEB", "#FF9C6E", "#95DE64", "#FF85C0"];
+
+export { areaColors };

package/src/@daf/core/components/Screens/ConflictManagement/components/MineSite/index.js

@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useState } from "react";
+// import { useSelector } from "react-redux";
+import MineSiteMap from "../../../../Dashboard/Map/index.jsx";
+import Widget from "../../../../Dashboard/Widget/index.jsx";
+import { areaColors } from "./helper.js";
+import  {useWidgetFetch}  from "../../../../../../hooks/useWidgetFetch.js";
+
+
+const TERRITORY_MAP = "territory";
+const EVENT_MAP = "event";
+
+export default function MineSites({ selectedPartners = {} ,t = (s) => s,goTo = () => {},getRedirectLink = (s) => s, theme = {}, APP , options = {}, user = {}}) {
+
+	const tabs = useMemo(
+		() => [
+			{ value: TERRITORY_MAP, label: t("Armed Groups") },
+			{ value: EVENT_MAP, label: t("Incidents") },
+		],
+		[t],
+	);
+
+	const [filters, setFilters] = useState({});
+	const [activeTab, setActiveTab] = useState(tabs[0].value);
+
+	// useEffect(() => {
+	// 	setFilters({});
+	// }, [activeTab]);
+
+	const defaultFetchConfig = useMemo(
+		() => ({
+			basepath: "analytics",
+			url: "/widgets/gps-monitoring",
+			filters: {
+				activeTab,
+				sources: selectedPartners?.partners || [],
+				...filters,
+				...(activeTab === 'event' ? { eventTypes: ['incident'] } : {}) 
+			},
+			defaultData: [],
+			stop: selectedPartners?.loading,
+		}),
+		[activeTab, selectedPartners, filters],
+	);
+
+	const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
+	// const { user } = useSelector((state) => state.authentication);
+
+	const filtersConfig = useMemo(() => {
+		if (activeTab === EVENT_MAP) {
+			return [
+				{
+					label: t("Location type"),
+					placeholder: t("Select"),
+					key: "category",
+					type: "select",
+					value: filters?.category || "all",
+					options: [
+						{ label: t("All"), value: "all" },
+						...(options?.locationCategories || []),
+					],
+				},
+			];
+		}
+	}, [activeTab, filters, t, options.locationCategories]);
+
+	const onFilterChange = (filters) => {
+		setFilters((p) => ({ ...p, ...filters }));
+	};
+
+	const renderTooltip = (data) => {
+		if (activeTab === TERRITORY_MAP) {
+			return [
+				{
+					label: t("Members"),
+					value: data.numberOfMembers || "--",
+				},
+				{
+					label: t("Location"),
+					value: data?.headquarters || "--",
+				},
+			];
+		} else {
+			return [
+				{
+					label: t("Major Incidents"),
+					color: "#F04438",
+					value: data?.totals?.major,
+				},
+				{
+					label: t("Moderate Incidents"),
+					color: "#FF7A45",
+					value: data?.totals?.moderate,
+				},
+				{
+					label: t("Minor Incidents"),
+					color: "#FFC069",
+					value: data?.totals?.minor,
+				},
+			];
+		}
+	};
+
+	const onClickLink = (data) => {
+		const sourceId = data?.authorId;
+		const getLink = (link) => getRedirectLink(sourceId && sourceId !== user?.company?.id ? `${link}?sourceId=${sourceId}` : link);
+		if (activeTab === TERRITORY_MAP) {
+			goTo(`/app/view/armed-groups/${data?.datastakeId}`);
+		} else {
+			switch (data?.category) {
+				case "mineSite":
+					return goTo(getLink(`/app/mine-summary/${data?.datastakeId}`));
+				case "area":
+					return goTo(getLink(`/app/view/conflict-areas/${data?.datastakeId}`));
+				default:
+					goTo(getLink(`/app/view/locations/${data?.datastakeId}`));
+			}
+		}
+	};
+
+	const mapData = useMemo(() => {
+		if (activeTab === TERRITORY_MAP) {
+			const safeData = Array.isArray(data) ? data : [];
+
+			if (safeData.length === 0) return [];
+
+			return safeData.map((d, index) => {
+				return {
+					...d,
+					area: d?.areaOfInfluence?.areaOfInfluence || {},
+					gps: {
+						latitude: 7,
+						longitude: 1,
+					},
+					color: areaColors[index % areaColors.length],
+				};
+			});
+		} else {
+			const safeData = Array.isArray(data) ? data : [];
+
+			if (safeData.length === 0) return [];
+
+			const locations = {};
+
+			data.filter((d) => d?.location).forEach((d) => {
+				const { location, ...rest } = d;
+
+				const event = {
+					...rest,
+					type: rest.severity ? `${rest.severity}_incident` : "",
+				};
+
+				if (locations[location.datastakeId]) {
+					locations[location.datastakeId].data.push(event);
+				} else {
+					locations[location.datastakeId] = {
+						gps: location.gps,
+						name: location.name,
+						datastakeId: location.datastakeId,
+						authorId: location?.authorId,
+						data: [event],
+						type: options.locationCategories.find((c) => c.value === location.category)
+							?.label,
+						category: location.category,
+					};
+				}
+			});
+
+			return Object.values(locations).map((d) => {
+				const sources = [];
+
+				d.data.forEach((d) => {
+					if (Array.isArray(d.sources)) {
+						d.sources.forEach((s) => {
+							if (!sources.includes(s)) {
+								sources.push(s);
+							}
+						});
+					}
+				});
+
+				return {
+					...d,
+					total: d.data.length || 0,
+				};
+			});
+		}
+	}, [activeTab, data.length, data, options.locationCategory, filters.type]);
+
+	const _mapData = useMemo(() => {
+		return mapData?.filter((d) => d?.gps)
+	}, [activeTab, mapData])
+
+	return (
+		<Widget
+			loading={loading}
+			title={t("Conflict Map")}
+			className="v2-widget no-px no-pb-body h-w-btn-header"
+			tabsConfig={{ tabs, value: activeTab, onChange: setActiveTab }}
+		>
+			<MineSiteMap
+				t={t}
+				app={APP}
+				showSider={false}
+				user={user}
+				data={_mapData}
+				mapConfig={{ maxZoom: 10 }}
+				primaryLink
+				type={activeTab}
+				onFilterChange={onFilterChange}
+				filtersConfig={activeTab === TERRITORY_MAP ? undefined : filtersConfig}
+				renderTooltip={renderTooltip}
+				onClickLink={onClickLink}
+				link={true}
+				key={activeTab}
+			/>
+		</Widget>
+	);
+}

package/src/@daf/core/components/Screens/ConflictManagement/components/RisksWidget/components/IncidentsTime/hook.js

@@ -0,0 +1,32 @@
+import { useMemo, useState } from "react";
+
+export default function useIncidentsTimeline({ t=()=>{}, options = {} }) {
+	const [filters, setFilters] = useState({ severity: "all" });
+
+	const filtersConfig = useMemo(
+		() => ({
+			filtersConfig: {
+				severity: {
+					type: "select",
+					label: "",
+					placeholder: (t) => t(""),
+					style: { flex: 1 },
+					labelStyle: { flex: 1 },
+				},
+			},
+			onApply: (val) => setFilters(val),
+			options: {
+				severity: [{ value: "all", label: t("All") }, ...(options?.severityOptions || [])],
+			},
+			selectedFilters: filters,
+			type: "small",
+			t,
+		}),
+		[t, filters, options?.severityOptions],
+	);
+
+	return {
+		filters,
+		filtersConfig,
+	};
+}

package/src/@daf/core/components/Screens/ConflictManagement/components/RisksWidget/components/IncidentsTime/index.js

@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from "react";
+import StackChart from "../../../../../../Charts/StackChart/index.jsx";
+import  Widget from "../../../../../../Dashboard/Widget/index.jsx";
+import PropTypes from 'prop-types';
+import useIncidentsTimeline from "./hook.js";
+
+export default function IncidentsTime({ selectedRange, selectedPartners = {} ,t=()=>{},goTo=(s)=>s,getRedirectLink=(s)=>s, theme = {}, APP , options = {}}) {
+    const { filters, filtersConfig } = useIncidentsTimeline({ t, options });
+    const { user } = useSelector((state) => state.authentication);
+
+	const getSourceParam = useCallback((sourceId) => {
+		if (user?.company?.id !== sourceId) {
+			return `?sourceId=${sourceId}`;
+		}
+
+		return "";
+	}, [user?.company?.id]);
+
+	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 renderSeverity = (val) => {
+		const colors = getColors("INCIDENTS", app);
+
+		switch (val) {
+			case "major":
+				return <span style={{ color: colors.major }}>{t("Major")}</span>;
+			case "minor":
+				return <span style={{ color: colors.minor }}>{t("Minor")}</span>;
+			case "moderate":
+				return <span style={{ color: colors.moderate }}>{t("Moderate")}</span>;
+			default:
+				return null;
+		}
+	};
+
+    const chartConfig = {}; 	const { data, loading } = useWidgetFetch(defaultFetchConfig);
+
+
+    return (
+        <Widget
+            loading={loading}
+            filtersConfig={filtersConfig}
+            title={t("Incidents Timeline")}
+            className="with-border-header"
+            t={t}
+        >
+            <StackChart {...chartConfig} height="400px" t={t} />
+        </Widget>
+    );
+}
+
+IncidentsTime.propTypes = {
+    selectedRange: PropTypes.string,
+    selectedPartners: PropTypes.object,
+    t: PropTypes.func,
+    goTo: PropTypes.func,
+    getRedirectLink: PropTypes.func,
+    theme: PropTypes.object,
+    APP: PropTypes.string,
+    options: PropTypes.object,
+};

package/src/@daf/core/components/Screens/ConflictManagement/components/RisksWidget/components/ProblemSolver/hook.js

@@ -0,0 +1,86 @@
+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.getWidget({
+					url: "/problem-solvers",
+				});
+
+
+				const rawOptions = Object.keys(data)
+					.map((agentKey) => {
+						const actions = data[agentKey]?.actions || [];
+
+						return actions
+							.map((action) => {
+								const lvl1 = action?.location?.administrativeLevel1;
+								const name =
+									action?.location?.name ||
+									action?.location?.administrativeLevel1 ||
+									null;
+
+								if (!lvl1 || !name) return undefined;
+
+								return {
+									label: name,
+									value: lvl1,
+								};
+							})
+							.filter(Boolean);
+					})
+					.flat();
+
+				const unique = [
+					...new Map(rawOptions.map((item) => [item.value, item])).values(),
+				];
+
+				setFilterOptions(unique);
+			} catch (err) {
+				console.error("Problem Solvers fetch failed:", 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/ConflictManagement/components/RisksWidget/components/ProblemSolver/index.js

@@ -0,0 +1,102 @@
+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 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 defaultFetchConfig = useMemo(
+        () => ({
+            basepath: "conflict-management",  
+            url: "/problem-solvers",
+            filters: {
+                ...filters,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            defaultData: [],
+            stop: selectedPartners?.loading,
+        }),
+        [filters, selectedRange, selectedPartners],
+    );
+    
+
+    const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
+
+    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 = items[0]; 
+        
+        return renderTooltipJsx({
+            title: item?.label || t("Undetermined"),
+            link: true,
+            onClickLink: () => {
+                goTo("/app/corrective-actions");
+            },
+            items: [
+                {
+                    label: t("Number of actions"),
+                    value: item?.value,
+                },
+            ],
+        });
+    }, [t, goTo]);
+
+    return (
+        <Widget
+            loading={loading || parentLoading}
+            title={t("Problem Solvers")}
+            filtersConfig={filtersConfig}
+            className="with-border-header"
+        >
+            <Chart
+                mouseXOffset={10}
+                mouseYOffset={10}
+                changeOpacityOnHover={false}
+                data={pieData}
+                doConstraints={false}
+                isPie
+                t={t}
+                isEmpty={isEmpty}
+                getTooltipChildren={getTooltipChildren}
+            />
+        </Widget>
+    );
+}
+
+ProblemSolvers.propTypes = {
+    selectedPartners: PropTypes.object,
+    loading: PropTypes.bool,
+    t: PropTypes.func,
+    theme: PropTypes.object,
+    selectedRange: PropTypes.string,
+}
+
+export default ProblemSolvers;
+

package/src/@daf/core/components/Screens/ConflictManagement/components/RisksWidget/components/TerritorialDistribution/config.js

@@ -0,0 +1,34 @@
+
+import { useMemo, useState } from "react";
+
+export default function useTerritorialDistribution({ t = (s)=>{s}, options = {} }) {
+  const [filters, setFilters] = useState({ filter1: 'all', filter2: 'all' });
+
+  const filtersConfig = useMemo((t) => ({
+    onApply: (val) => setFilters(val),
+    options: {
+      filter1: [{ label: t('All'), value: 'all' }],
+      filter2: [{ label: t('All'), value: 'all' }],
+    },
+    selectedFilters: filters,
+    type: 'small',
+    t,
+  }), [t,  filters]);
+
+  return {
+    filters,
+    filtersConfig,
+    setFilters,
+    t,
+  };
+}
+
+export const getColors = (theme) => {
+    return [
+        theme.colorPrimary8,
+        theme.colorPrimary7,
+        theme.colorPrimary5,
+        theme.colorPrimary6,
+        theme.colorPrimary4,
+    ]
+}