datastake-daf 0.6.720 → 0.6.722

package/src/@daf/pages/dashboards/UserDashboard/components/KeyIndicators/config.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
+
+export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
+	{
+		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: () => {
+			return <span>{data.locations ?? 0}</span>;
+		},
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Identified Stakeholders")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/stakeholders"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{data?.stakeholders ?? 0}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Corrective Actions")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/corrective-actions"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => {
+			return (
+				<span>
+					{
+						(Array.isArray(data?.events) ? data.events : [])?.find(
+							(c) => c._id === "correctiveActions",
+						)?.count ?? 0
+					}
+				</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>
+				{
+					(Array.isArray(data?.events) ? data.events : [])?.find(
+						(c) => c._id === "incident",
+					)?.count ?? 0
+				}
+			</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>{data.sources ?? 0}</span>,
+	},
+];

package/src/@daf/pages/dashboards/UserDashboard/components/KeyIndicators/index.jsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react'
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getRowConfig } from './config.js';
+
+const defaultFetchConfig = {
+	basepath: "analytics",
+	url: "/widgets/key-informations",
+	filters: {
+		metrics: ['locations', 'stakeholders', 'events', 'sources']
+	},
+};
+
+function KeyIndicators({
+    t = () => {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+	theme = {},
+	partners = [],
+}) {
+    const fetchConfig = useMemo(
+		() => ({
+			...defaultFetchConfig,
+		}),
+		[],
+	);
+    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 "
+		/>
+    )
+}
+
+export default KeyIndicators

package/src/@daf/pages/dashboards/UserDashboard/components/MineSites/config.js

@@ -0,0 +1,22 @@
+export const getTabs = (t) => {
+    return [
+			{ value: "location", label: t("Locations") },
+			{ value: "stakeholder", label: t("Stakeholders") },
+			{ value: "event", label: t("Events") },
+	]
+}
+
+export const getFiltersConfig = (t, filters, locationCategories) => {
+    const value = filters.type ? { value: filters.type } : {};
+
+	return [
+		{
+			label: t("Location type"),
+			placeholder: t("Select"),
+			key: "type",
+			type: "select",
+			...value,
+			options: locationCategories ?? [],
+		},
+	];
+}

package/src/@daf/pages/dashboards/UserDashboard/components/MineSites/helper.js

@@ -0,0 +1,142 @@
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
+
+export const mapData = (data, activeTab, category, locationCategories, filters) => {
+    if (activeTab === "stakeholder") {
+        const locations = {};
+
+        data.filter((d) => d.location).forEach((d) => {
+            const { location, ...rest } = d;
+
+            const stakeholder = {
+                ...rest,
+                sources: Array.isArray(rest.sources) ? rest?.sources?.length : rest?.sources,
+                category: findOptions(rest.category, category),
+            };
+
+            if (locations[location.datastakeId]) {
+                locations[location.datastakeId].stakeholders.push(stakeholder);
+            } else {
+                locations[location.datastakeId] = {
+                    gps: location.gps,
+                    authorId: location?.authorId,
+                    name: location.name,
+                    datastakeId: location.datastakeId,
+                    stakeholders: [stakeholder],
+                };
+            }
+        });
+
+        return Object.values(locations);
+    }
+
+    if (activeTab === "event") {
+        const locations = {};
+
+        data.filter((d) => d?.location).forEach((d) => {
+            const { location, ...rest } = d;
+            const event = {
+                ...rest,
+                type:
+                    rest?.typeOfEvent === "correctiveActions"
+                        ? "correctiveActions"
+                        : rest?.severity
+                        ? `${rest.severity}_incident`
+                        : "minor_incident",
+            };
+
+            if (locations[location.datastakeId]) {
+                locations[location.datastakeId].data.push(event);
+            } else {
+                locations[location.datastakeId] = {
+                    gps: {
+                        ...location.gps,
+                        latitude: location.gps?.latitude ?? 0,
+                        longitude: location.gps?.longitude ?? 0,
+                    },
+                    authorId: location?.authorId,
+                    name: location?.name,
+                    datastakeId: location?.datastakeId,
+                    data: [event],
+                    type: findOptions(location?.category, locationCategories ?? []),
+                    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, sources: sources.length };
+        });
+    }
+
+    return data
+        ?.filter((d) => {
+            if (filters.type && filters.type !== "mineSite") {
+                return false;
+            }
+
+            return !!d?.locationDetails?.gps;
+        })
+        ?.map((d) => ({
+            ...d?.locationDetails,
+            name: d.name,
+            datastakeId: d.datastakeId,
+            sources: d.sources || 1,
+            cadastre: d?.cadastreSituation || "--",
+            products: d?.products || "--",
+            category: d?.category,
+            authorId: d?.authorId,
+        }));
+}
+
+export 	const onClickLink = (data, getRedirectLink, activeTab, goTo, user) => {
+    const sourceId = data?.authorId;
+
+    const getLink = (link) => getRedirectLink(sourceId ? `${link}?sourceId=${sourceId}` : link);
+
+    if (activeTab === "stakeholder") {
+        switch (data.stakeholderType) {
+            case "operator":
+                return goTo(getLink(`/app/summary/operators/${data?.datastakeId}`));
+            case "worker":
+                return goTo(getLink(`/app/view/workers/${data?.datastakeId}`));
+            default:
+                return goTo(getLink(`/app/view/stakeholders/${data?.datastakeId}`));
+        }
+    }
+
+    if (activeTab === "event") {
+        switch (data.category) {
+            case "mineSite":
+                return goTo(getLink(`/app/summary/scl/${data?.datastakeId}`));
+            default:
+                return goTo(getLink(`/app/view/locations/${data?.datastakeId}`));
+        }
+    }
+
+    switch (data.category) {
+        case "mineSite": {
+            const isOwnData = user?.company?.id === data?.authorId;
+            return goTo(
+                `/app/summary/scl/${data?.datastakeId}${
+                    !isOwnData ? `?sourceId=${data?.authorId}` : ""
+                }`,
+            );
+        }
+        case "area":
+            return goTo(getLink(`/app/view/conflict-areas/${data?.datastakeId}`));
+        default:
+            goTo(getLink(`/app/view/locations/${data?.datastakeId}`));
+    }
+};

package/src/@daf/pages/dashboards/UserDashboard/components/MineSites/index.jsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
+import { getFiltersConfig, getTabs } from './config.js';
+import { mapData, onClickLink } from './helper.js';
+import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import Multiselect from '../../../../../core/components/Select/MultiSelect/index.jsx';
+import Map from "../../../../../core/components/Dashboard/Map/index.jsx";
+
+const defaultFetchConfig = {
+	basepath: "forms",
+	url: "/location",
+};
+
+function MineSites({
+    t = () => {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+    theme = {},
+    selectedPartners = {}, 
+    setSelectedPartners, 
+    partners = [],
+    user = {},
+    options = {},
+    APP,
+}) {
+    const { locationCategories = [], category } = useMemo(() => options ?? {}, [options]);
+    const [formData, setFormData] = useState();
+	const [filters, setFilters] = useState({});
+    const [activeTab, setActiveTab] = useState("location");
+
+    const _formFetchConfig = useMemo(
+		() => ({
+			...defaultFetchConfig,
+            params: {
+                scope: "create",
+                language: user?.language || "en",
+            }
+		}),
+		[user],
+	);
+
+    const { data: _formData, loading: formLoading } = useWidgetFetch({config: _formFetchConfig});
+
+    useEffect(() => {
+        if (data) {
+            setFormData(_formData?.identification);
+        }
+    },[_formData, _formData?.identification]);
+
+    useEffect(() => {
+		setFilters({});
+	}, [activeTab]);
+
+    const dataFetchConfig = useMemo(
+		() => ({
+			basepath: "analytics",
+			url: "/widgets/gps-monitoring",
+			filters: { activeTab, sources: selectedPartners?.partners || [], ...(activeTab === 'event' ? { eventTypes: ['incident', 'correctiveActions'] } : {}) },
+			defaultData: [],
+			stop: selectedPartners?.loading,
+		}),
+		[activeTab, selectedPartners],
+	);
+
+    const { data, loading, setData } = useWidgetFetch({config: dataFetchConfig});
+
+	const tabs = useMemo(() => getTabs(t), [t]);
+
+    const filtersConfig = useMemo(() => getFiltersConfig(t, filters, locationCategories), [activeTab, filters, t, locationCategories]);
+
+	const onFilterChange = (filters) => {
+		setFilters((p) => ({ ...p, ...filters }));
+	};
+
+	const _mapData = useMemo(() => mapData(data, activeTab, category, locationCategories, filters), [data, activeTab, category, locationCategories, filters]);
+
+    const renderTooltip = (data) => {
+		const country = data.admLevel1?.country;
+		const adminLevel1Label =
+			formData?.administrativeLevel1?.label[`country is ${country}`] ?? t("Province");
+		const adminLevel2Label =
+			formData?.administrativeLevel2?.label[`country is ${country}`] ?? t("Territory");
+
+		if (activeTab === "stakeholder") {
+			return [
+				{
+					label: t("Category"),
+					value: findOptions(data?.category, locationCategories ?? []) || "--",
+				},
+			];
+		}
+
+		if (activeTab === "event") {
+			const correctiveActionsCount = data?.data?.filter(
+				(d) => d.type === "correctiveActions",
+			).length;
+
+			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 || "--",
+				},
+				{
+					label: t("Corrective Actions"),
+					color: "#12b76a",
+					value: correctiveActionsCount === 0 ? "--" : correctiveActionsCount,
+				},
+			];
+		}
+
+		return [
+			{
+				label: t("Location Type"),
+				value: findOptions(data?.category, locationCategories ?? []) ?? t("Mine Site"),
+			},
+			{
+				label: t(`${adminLevel1Label}`),
+				value: data?.admLevel1?.name || "--",
+			},
+			{
+				label: t(`${adminLevel2Label}`),
+				value: data?.admLevel2?.name || "--",
+			},
+		];
+	};
+
+    const sourceOptions = useMemo(() => {
+		return partners.map((partner) => {
+			const isOwnData = partner.id === user?.company?.id;
+			return {
+				label: partner.nickName,
+				value: partner.id,
+				avatar: isOwnData ? <span>OWN</span> : <CustomIcon name={"Search02"} size={14} />,
+				background: isOwnData ? theme.colorPrimary7 : undefined,
+				color: isOwnData ? "white" : undefined,
+			};
+		});
+	}, [partners, user]);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Monitoring Map")}
+            className="v2-widget no-px no-pb-body h-w-btn-header"
+            tabsConfig={{
+                tabs,
+                value: activeTab,
+                onChange: (tab) => {
+                    setData([]);
+                    setActiveTab(tab);
+                },
+            }}
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <Multiselect
+                        options={[...sourceOptions]}
+                        isAvatarGroup
+                        selectionType="checkbox"
+                        canUnselectLast={false}
+                        key={`partners-${partners?.length}`}
+                        onChange={(selected) => {
+                            setSelectedPartners((prev) => ({
+                                ...prev,
+                                partners: selected,
+                                loading: false,
+                            }));
+                        }}
+                        dropDownWidth={200}
+                        defaultSelected={partners.map((p) => p.id) || []}
+                    />
+                </>
+            }
+        >
+            <Map
+                t={t}
+                app={APP}
+                showSider={false}
+                user={user}
+                data={_mapData}
+                mapConfig={{ maxZoom: 10 }}
+                primaryLink
+                type={activeTab}
+                onFilterChange={onFilterChange}
+                filtersConfig={filtersConfig}
+                renderTooltip={renderTooltip}
+                onClickLink={(data) => {
+                    onClickLink(data, getRedirectLink, activeTab, goTo, user);
+                }}
+                link={true}
+            />
+        </Widget>
+    )
+}
+
+export default MineSites

package/src/@daf/pages/dashboards/UserDashboard/components/Triangulation/config.js

@@ -0,0 +1,20 @@
+export const getConfig = (theme = {}) => {
+    return  [
+        {
+            key: "singleSource",
+            label: {
+                "data-compilation": "Private",
+                "data-consolidation": "Single Source",
+            },
+            color: theme.colorPrimary7,
+        },
+        {
+            key: "multipleSource",
+            label: {
+                "data-compilation": "Submitted",
+                "data-consolidation": "Multiple Sources",
+            },
+            color: theme.colorPrimary4,
+        },
+    ]
+};

package/src/@daf/pages/dashboards/UserDashboard/components/Triangulation/hook.js

@@ -0,0 +1,87 @@
+import { useMemo, useCallback } from "react";
+import { renderTooltipJsx } from '../../../../../utils/tooltip.js'
+import { getConfig } from './config.js'
+
+export const useTriangulation = ({ widgetData, t = () => {}, section, theme = {} }) => {
+
+    const config = useMemo(() => getConfig(theme), [theme]);
+
+    const data = useMemo(() => {
+		const data = {
+			singleSource: 0,
+			multipleSource: 0,
+			total: 0,
+		};
+
+		Object.values(widgetData).forEach((val) => {
+			data.total += val?.total || 0;
+			data.singleSource += val?.singleSource || 0;
+			data.multipleSource += val?.multiSource || 0;
+		});
+
+
+		return {
+			singleSource: data.total > 0 ? Math.round((data.singleSource / data.total) * 100) : 0,
+			multipleSource:
+				data.total > 0 ? Math.round((data.multipleSource / data.total) * 100) : 0,
+		};
+	}, [widgetData]);
+
+
+    const pieData = useMemo(() => {
+		// console.log("data", data);
+		const total = Object.values(data).reduce((all, val) => all + (val || 0), 0);
+		return config.map((conf) => ({
+			percent: (data[conf.key] || 0) / total,
+			color: conf.color,
+			key: conf.key,
+		}));
+	}, [data]);
+
+    const isEmpty = useMemo(() => Object.keys(data).filter((k) => !!data[k]).length === 0, [data]);
+
+    const getTooltipChildren = useCallback(
+		(item) => {
+			if (isEmpty) {
+				return renderTooltipJsx({
+					title: t("Triangulation"),
+					items: config.map((conf) => ({
+						label: t(conf.label[section]),
+						color: conf.color,
+						value: "0%",
+					})),
+				});
+			}
+
+			const _config = config.find((c) => c.key === item.key);
+
+			if (_config) {
+				return renderTooltipJsx({
+					title: t(
+						section === "data-compilation"
+							? "nashiriki::Information Sharing"
+							: "Triangulation",
+					),
+					items: [
+						{
+							// color: _config.color,
+							label: t(_config.label[section]),
+							value: `${data[_config.key] || 0}%`,
+						},
+					],
+				});
+			}
+
+			return null;
+		},
+		[t, data, section, isEmpty],
+	);
+
+    return {
+        pieData,
+        isEmpty,
+        getTooltipChildren,
+        data,
+        config,
+    }
+}