datastake-daf 0.6.831 → 0.6.832

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

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

@@ -0,0 +1,107 @@
+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 { 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",
+            filters: {
+                ...filters,
+                category,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            defaultData: [],
+            stop: selectedPartners?.loading,
+        }),
+        [filters, 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;
+
+    const getTooltipChildren = useCallback((items) => {
+        const item = items[0]; 
+        
+        return renderTooltipJsx({
+            title: item?.label || t("Undetermined"),
+            link: true,
+            onClickLink: () => {
+                 if (item?.label) {
+                     goTo(
+                         `/app/incident?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"
+            filtersConfig={filtersConfig}
+        >
+            <Chart
+                mouseXOffset={10}
+                mouseYOffset={10}
+                changeOpacityOnHover={false}
+                data={pieData}
+                doConstraints={false}
+                isPie
+                t={t}
+                isEmpty={isEmpty}
+                getTooltipChildren={getTooltipChildren}
+            />
+        </Widget>
+    );
+}
+
+TerritorialDistribution.propTypes = {
+    selectedPartners: PropTypes.object,
+    loading: PropTypes.bool,
+    t: PropTypes.func,
+    theme: PropTypes.object,
+    category: PropTypes.string,
+    selectedRange: PropTypes.string,
+}
+
+export default TerritorialDistribution;

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

@@ -0,0 +1,5 @@
+export const filterOptions = [
+  { label: '12 months', value: '12' },
+  { label: '3 months', value: '3' },
+];
+

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

@@ -0,0 +1,77 @@
+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";
+
+export default function RisksWidget({ 
+    title = "Analytics",
+    selectedPartners = {},
+    t = (s) => s,
+    goTo = () => {},
+    getRedirectLink = (s) => s, 
+    theme = {}, 
+    APP, 
+    options = {},
+    category = "conflict",
+    user = {},
+}) {
+    const [range, setRange] = useState(filterOptions[0].value);
+
+    return (
+        <Widget
+            title={t(title)}
+            className="with-border-header month-select-header"
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <div>
+                        <Select
+                            value={range}
+                            className="custom-select white month-select"
+                            onChange={(val) => setRange(val)}
+                        >
+                            {filterOptions.map((o) => (
+                                <Select.Option value={o.value} key={o.value}>
+                                    {t(o.label)}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+                </>
+            }
+        >
+            <div className="flex flex-row flex-col-mobile gap-6">
+                <IncidentsTime
+                    selectedRange={range} 
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    theme={theme}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                    options={options}
+                    user={user}
+                />
+                <TerritorialDistribution
+                    category={category}
+                    selectedRange={range}
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    theme={theme}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                />
+                <ProblemSolver 
+                    selectedRange={range} 
+                    selectedPartners={selectedPartners} 
+                    t={t}
+                    theme={theme}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                />
+            </div>
+        </Widget>
+    );
+}

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

@@ -0,0 +1,136 @@
+import React, { useMemo, useEffect } from "react";
+import Header from "../../Header/index.jsx";
+import KeyIndicators from "./components/KeyIndicators/index.js";
+import Multiselect from "../../Select/MultiSelect/index.jsx";
+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 "../../Icon/CustomIcon.jsx";
+
+export default function ConflictManagement({ 
+    t=()=>{}, 
+    user = {}, 
+    APP, 
+    goTo = () => {}, 
+    getRedirectLink = (s) => s, 
+    theme = {},
+    options = {}
+}) {
+	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]);
+
+	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"} width={14} height={14} />,
+				background: isOwnData ? theme.colorPrimary7 : undefined,
+				color: isOwnData ? "white" : undefined,
+			};
+		});
+	}, [partners, user, theme]);
+
+	return (
+		<div className="daf-analysis">
+			<Header
+				title={t("conflict-management")}
+				breadcrumbs={breadCrumbs}
+				supportText={
+					<>
+						{t("Supported by")}{" "}
+						<a
+							href="https://www.eeas.europa.eu/delegations/dr-congo-kinshasa_en?s=94"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{t("European Union")}
+						</a>
+					</>
+				}
+				addedHeader={
+					<div>
+						<div className="flex-1" />
+						<Multiselect
+							options={[...sourceOptions]}
+							isAvatarGroup
+							canUnselectLast={false}
+							key={partners?.length}
+							onChange={(selected) => {
+								setSelectedPartners((prev) => ({
+									...prev,
+									partners: selected,
+									loading: false,
+								}));
+							}}
+							dropDownWidth={200}
+							selectionType="checkbox"
+							defaultSelected={partners.map((p) => p.id) || []}
+						/>
+					</div>
+				}
+			/>
+
+			<div className="content">
+				<div className="view-content">
+					<div className="daf-analysis-layout">
+						<div className="sections-cont w-pt">
+							<section>
+								<KeyIndicators
+									selectedPartners={selectedPartners}
+									partners={
+										informationSources > 0
+											? informationSources
+											: selectedPartners?.partners?.length > 0
+											? selectedPartners?.partners?.length
+											: 0
+									}
+                                    t={t}
+                                    goTo={goTo}
+                                    getRedirectLink={getRedirectLink}
+                                    theme={theme}
+								/>
+							</section>
+							<section>
+								<MineSites 
+                                    selectedPartners={selectedPartners} 
+                                    t={t}
+                                    goTo={goTo}
+                                    getRedirectLink={getRedirectLink}
+                                    theme={theme}
+                                    APP={APP}
+                                    options={options}
+                                />
+							</section>
+							<section>
+								<RisksWidget
+									selectedPartners={selectedPartners}
+                                    t={t}
+                                    goTo={goTo}
+                                    getRedirectLink={getRedirectLink}
+                                    theme={theme}
+                                    APP={APP}
+                                    options={options}
+								/>
+							</section>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+

package/src/@daf/pages/Events/Testimonials/columns.js

@@ -50,7 +50,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
                 return <div className="daf-default-cell" />;
             }
 
-            const type = findOptions(title, data?.options?.testimonialsType);
+            const type = findOptions(title, options?.testimonialsType);
 
             return type ? <Tooltip title={type}>{type}</Tooltip> : '-';
         },

package/src/@daf/pages/Events/columns.js

@@ -51,9 +51,8 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
         return <div className="daf-default-cell" />
       }
 
-      const type = findOptions(v, data?.options?.eventsType);
-
-      return type ? <Tooltip title={type}>{type}</Tooltip> : '-';
+      const type = findOptions(v, options?.eventType || options?.eventsType);
+      return <Tooltip title={type}>{type}</Tooltip>;
     },
   },
   {

package/src/@daf/pages/Locations/columns.js

@@ -43,7 +43,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const locationCategories = [...(data?.options?.locationCategories || []), ...(options?.productionSiteCategories || [])]
+          const locationCategories = [...(options?.locationCategories || []), ...(options?.productionSiteCategories || [])]
 
           const category = findOptions(v, locationCategories);
     

package/src/@daf/services/DashboardService.js

@@ -24,6 +24,15 @@ class DashboardService extends BaseService {
         isUserManager: true,
       });
     }
+
+    // getWidgetConflictManagement({ url, params = {}, filters = {} }) {
+    //   return this.apiGet({
+    //     url: `/dashboard/conflict-management${url}`,
+    //     params: { ...params, ...filters },
+    //     isApp: true,
+    //   });
+    // }
+    
 }
 
 export default createLazyService(DashboardService);

package/src/constants/locales/en/translation.js

@@ -1,4 +1,5 @@
 const en = {
+  "conflict-management": "Conflict Management",
   "review-requests": "Review Requests",
   "create-account": "Create Account",
   "manage-users": "Manage Users",

package/src/pages.js

@@ -20,4 +20,7 @@ export { default as UsersTable } from './@daf/core/components/Screens/Users/inde
 export { default as View } from './@daf/pages/View/index.jsx';
 
 // Edit
-export { default as Edit } from './@daf/pages/Edit/index.jsx';
+export { default as Edit } from './@daf/pages/Edit/index.jsx';
+
+// Conflict Management
+export { default as ConflictManagement } from './@daf/core/components/Screens/ConflictManagement/index.js';

package/build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow: