datastake-daf 0.6.700 → 0.6.701

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

@@ -0,0 +1,88 @@
+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("Identified Mine Sites")}</div>
+				<div className="cursor-pointer" onClick={() => goTo(getRedirectLink("/app/scl"))}>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => {
+			return <span>{data.mineSites ?? 0}</span>;
+		},
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Identified Operators")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/operators"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{data?.operators ?? 0}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Trade Connections")}</div>
+			</div>
+		),
+		render: () => <span>{data?.connections ?? 0}</span>,
+	},
+	{
+		label: (
+			<div className="flex">
+				<div className="flex-1">{t("Associated Documents")}</div>
+				<div
+					className="cursor-pointer"
+					onClick={() => goTo(getRedirectLink("/app/documents"))}
+				>
+					<CustomIcon
+						name="LinkNewTab"
+						width={16}
+						height={16}
+						color={theme.colorPrimary}
+					/>
+				</div>
+			</div>
+		),
+		render: () => <span>{data.documents ?? 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/SupplyChain/components/KeyIndicators/index.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getRowConfig } from './config';
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx';
+import PropTypes from 'prop-types';
+
+const defaultFetchConfig = {
+    basepath: "analytics",
+    url: '/widgets/key-informations',
+    filters: {
+      "filterBySources": true,
+      metrics: ['connections', 'documents', 'mineSites', 'operators', 'sources']
+    },
+};
+
+function KeyIndicators({selectedSources = {}, theme = {}, getRedirectLink = () => {}, t = () => {}, goTo = () => {} }) {
+    const fetchConfig = useMemo(() => ({
+        ...defaultFetchConfig,
+        filters: { ...defaultFetchConfig.filters, sources: selectedSources?.partners || [] },
+        stop: selectedSources?.loading,
+    }), [selectedSources]);
+
+    const { data, loading } = useWidgetFetch({config:fetchConfig});
+
+    const config = useMemo(() => {
+        return getRowConfig({
+            t,
+            data: { ...data },
+            goTo,
+            getRedirectLink,
+            theme,
+        })
+    }, [t, data, goTo, getRedirectLink, theme])
+    
+    return (
+        <KeyIndicatorsWidget
+            t={t}
+            config={config}
+            loading={loading}
+            title={ t("Key Information")}
+            className="small-content"
+        />
+    )
+}
+
+KeyIndicators.propTypes = {
+    selectedSources: PropTypes.object,
+    theme: PropTypes.object,
+    getRedirectLink: PropTypes.func,
+    t: PropTypes.func,
+    goTo: PropTypes.func,
+}
+
+export default KeyIndicators

package/src/@daf/pages/dashboards/SupplyChain/components/SupplyChainMap/index.js

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import Map from '../../../../../core/components/Dashboard/Map/index.jsx';
+import { getTagColor } from '../../../../../utils/productTag.js';
+import PropTypes from 'prop-types';
+
+
+function SupplyChainMap({selectedSources = {}, t = () => {}, goTo = () => {}, options = {}, getRedirectLink = () => {} }) {
+
+    const defaultConfig = useMemo(
+		() => ({
+			basepath: "analytics",
+			url: "/widgets/trade-connection-map",
+			filters: {
+				sources: selectedSources?.partners || [],
+			},
+			stop: selectedSources?.loading,
+			defaultData: [],
+		}),
+		[selectedSources],
+	);
+
+    const { loading, data } = useWidgetFetch({config: defaultConfig});
+
+    return (
+        <Widget
+            title={t("Supply Chain Map")}
+            loading={loading}
+            className="flex flex-1 with-border-header no-p-body"
+        >
+            <Map
+				type={"chain"}
+				data={Array.isArray(data) && data.length > 0 ? data : []}
+				renderTooltip={(data) => {
+					const productsText = data?.products?.[0];
+					const minerals = options?.minerals || [];
+					return [
+						{
+							label: t("Products"),
+							value:
+								minerals.find((mineral) => mineral.value === productsText)?.label ||
+								productsText ||
+								"-",
+							...(productsText && { tag: getTagColor(productsText) }),
+						},
+						{
+							label: t("Participants"),
+							value: data?.participants || "-",
+						},
+					];
+				}}
+				link
+				onClickLink={(data) => {
+					goTo(getRedirectLink(`/app/view/stakeholders/${data.datastakeId}`));
+				}}
+			/>
+        </Widget>
+    )
+}
+
+SupplyChainMap.propTypes = {
+    selectedSources: PropTypes.object,
+    t: PropTypes.func,
+    goTo: PropTypes.func,
+    options: PropTypes.object,
+    getRedirectLink: PropTypes.func,
+}
+
+export default SupplyChainMap

package/src/@daf/pages/dashboards/SupplyChain/components/TradeRelationships/index.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import DataChainOfCustody from '../../../../../core/components/Graphs/DataChainOfCustody/index.jsx';
+import PropTypes from 'prop-types';
+
+const defaultFetchConfig = {
+	basepath: "analytics",
+	url: "/widgets/datachain-of-custody",
+	filters: {},
+	defaultData: [],
+};
+
+function TradeRelationships({goTo, t = () => {}, options = {}, mapDataFunction = () => {}, hardcodedData = [] }) {
+
+	const fetchConfig = useMemo(
+		() => ({
+			...defaultFetchConfig,
+			filters: {},
+		}),
+		[],
+	);
+
+    const { data, loading } = useWidgetFetch({config: fetchConfig});
+
+    const mappedData = mapDataFunction(Object.keys(data)?.length > 0 ? data : hardcodedData, options?.category ?? [], goTo);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Trade Relationships")}
+            className="flex flex-1 with-border-header no-p-body"
+        >
+            <div style={{ height: 600 }}>
+                <DataChainOfCustody data={mappedData} maxZoom={1} />
+            </div>
+        </Widget>
+    )
+}
+
+TradeRelationships.propTypes = {
+    goTo: PropTypes.func,
+    t: PropTypes.func,
+    options: PropTypes.object,
+    mapDataFunction: PropTypes.func,
+    hardcodedData: PropTypes.array,
+}
+export default TradeRelationships

package/src/@daf/pages/dashboards/SupplyChain/config.js

@@ -0,0 +1,216 @@
+import React from "react";
+import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
+import { findOptions } from '../../../../helpers/StringHelper.js';3
+
+const theme = window.theme;
+
+const kycIcon = <CustomIcon name="KYC" color="#6C737F" width={18} height={18} />;
+
+const buildingIcon = <CustomIcon name="Building" color="#6C737F" width={18} height={18} />;
+const individualIcon = <CustomIcon name="UserCircle" color="#6C737F" width={18} height={18} />;
+const csIcon = <CustomIcon name="CivilSociety" color="#6C737F" width={18} height={18} />;
+const leftIcon = (
+	<CustomIcon
+		name="NashirikiSmallLogo"
+		color={theme.colorPrimary8}
+		width={16}
+		height={16}
+	/>
+);
+const middleIcon = (
+	<CustomIcon
+		name="NashirikiSmallLogo"
+		color={theme.colorPrimary2}
+		width={16}
+		height={16}
+	/>
+);
+
+const rightIcon = <CustomIcon name="NashirikiSmallLogo" color="white" width={16} height={16} />;
+
+const mapIcon = (category) => {
+	switch (category) {
+		case "businessEntity":
+			return buildingIcon;
+		case "civilSociety":
+			return csIcon;
+		case "government":
+			return kycIcon;
+		case "individual":
+			return individualIcon;
+		default:
+			return;
+	}
+};
+const leftBackground = theme.colorPrimary3;
+const rightBackground = theme.colorPrimary6;
+
+export const mapDataFunction = (data = {}, options = [], goTo = () => {}) => {
+	const mapChildren = (items, type, parentId, isDirect = true) => {
+		return (items ?? [])?.map((item) => ({
+			id: item.id,
+			number: 0,
+			name: item.name,
+			sources: parentId ? [parentId] : [],
+			subTitle: findOptions(item.category, options),
+			leftIcon: type === "client" ? rightIcon : leftIcon,
+			leftBackground: type === "client" ? rightBackground : leftBackground,
+			topIcon: mapIcon(item.category),
+			children: mapChildren(item.sources ?? item.clients ?? [], type, item.id, false),
+			onClick: () => {
+				if (isDirect && parentId === data.id) {
+					goTo(`/app/partners?datastakeId=${item.id}`);
+				}
+			},
+		}));
+	};
+
+	return {
+		id: data.id,
+		number: 0,
+		name: data.name,
+		subTitle: findOptions(data.category, options),
+		leftIcon: middleIcon,
+		leftBackground: theme.colorPrimary10,
+		topIcon: mapIcon(data.category),
+		left: mapChildren(data.sources, "source", data.id),
+		right: mapChildren(data.clients, "client", data.id),
+	};
+};
+
+export const hardcodedData = {
+	id: "1",
+	number: 15,
+	name: "This Organisation",
+	subTitle: "Legal Form",
+	leftIcon: middleIcon,
+	topIcon: kycIcon,
+	left: [
+		{
+			id: "2",
+			number: 15,
+			name: "Client",
+			sources: ["1"],
+			leftBackground,
+			leftIcon,
+			subTitle: "Legal Form",
+			topIcon: kycIcon,
+		},
+		{
+			id: "3",
+			number: 15,
+			name: "Client",
+			sources: ["1"],
+			leftBackground,
+			leftIcon,
+			subTitle: "Legal Form",
+			topIcon: kycIcon,
+		},
+		{
+			id: "4",
+			number: 15,
+			name: "Client",
+			sources: ["1"],
+			leftBackground,
+			leftIcon,
+			subTitle: "Legal Form",
+			topIcon: kycIcon,
+		},
+		{
+			id: "5",
+			number: 15,
+			name: "Client",
+			sources: ["1"],
+			leftBackground,
+			leftIcon,
+			subTitle: "Legal Form",
+			topIcon: kycIcon,
+		},
+	],
+	right: [
+		{
+			id: "6",
+			number: 15,
+			name: "Buyer",
+			sources: ["1"],
+			subTitle: "Legal Form",
+			leftIcon: rightIcon,
+			topIcon: kycIcon,
+			leftBackground: rightBackground,
+			children: [
+				{
+					id: "61",
+					name: "Buyer 2",
+					sources: ["6"],
+					leftIcon: rightIcon,
+					topIcon: kycIcon,
+					leftBackground: rightBackground,
+					subTitle: "Legal Form",
+					children: [
+						{
+							id: "611",
+							leftIcon: rightIcon,
+							topIcon: kycIcon,
+							leftBackground: rightBackground,
+							subTitle: "Legal Form",
+							name: "Buyer 3",
+							sources: ["61"],
+						},
+					],
+				},
+			],
+		},
+		{
+			id: "7",
+			number: 15,
+			subTitle: "Legal Form",
+			name: "Buyer",
+			leftIcon: rightIcon,
+			topIcon: kycIcon,
+			leftBackground: rightBackground,
+			sources: ["1"],
+			children: [
+				{
+					id: "71",
+					leftIcon: rightIcon,
+					topIcon: kycIcon,
+					leftBackground: rightBackground,
+					name: "Buyer 2",
+					sources: ["1", "7", "8", "9"],
+					subTitle: "Legal Form",
+					children: [
+						{
+							id: "711",
+							leftIcon: rightIcon,
+							topIcon: kycIcon,
+							leftBackground: rightBackground,
+							name: "Buyer 3",
+							sources: ["71", "1"],
+							subTitle: "Legal Form",
+						},
+					],
+				},
+			],
+		},
+		{
+			leftIcon: rightIcon,
+			topIcon: kycIcon,
+			leftBackground: rightBackground,
+			id: "8",
+			number: 15,
+			name: "Buyer",
+			sources: ["1"],
+			subTitle: "Legal Form",
+		},
+		{
+			leftIcon: rightIcon,
+			topIcon: kycIcon,
+			leftBackground: rightBackground,
+			id: "9",
+			number: 15,
+			name: "Buyer",
+			sources: ["1"],
+			subTitle: "Legal Form",
+		},
+	],
+};

package/src/@daf/pages/dashboards/SupplyChain/index.jsx

@@ -0,0 +1,96 @@
+import React, { useMemo, useEffect } from 'react'
+import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
+import DashboardLayout from '../../../core/components/Dashboard/DashboardLayout/index.jsx';
+import Header from '../../../core/components/Header/index.jsx';
+import Multiselect from '../../../core/components/Select/MultiSelect/index.jsx';
+import KeyIndicators from './components/KeyIndicators';
+import SupplyChainMap from './components/SupplyChainMap';
+import TradeRelationships from './components/TradeRelationships';
+import ChartsContainer from './components/ChartsContainer';
+
+function SupplyChain({
+    t = () => {},
+    goTo = () => {}, 
+    getRedirectLink = () => {}, 
+    theme = {}, 
+    user = {},
+    options = {},
+    partners,
+    selectedPartners,
+    setSelectedPartners, 
+    informationSources,
+    mapDataFunction,
+    hardcodedData,
+    breadCrumbs = [],
+}) {
+
+    const sourceOptions = useMemo(() => {
+		if(!partners?.length) return [];
+        
+        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]);
+
+    useEffect(() => {
+        window.theme = theme;
+    }, [theme])
+
+    
+    return (
+        <DashboardLayout
+            header={
+                <Header 
+                    title={t('Mineral Supply Chain Transparency')}
+                    addedHeader={
+                        <div>
+                            <Multiselect
+                                options={[...sourceOptions]}
+                                isAvatarGroup
+                                selectionType="checkbox"
+                                canUnselectLast={false}
+                                key={partners?.length}
+                                onChange={(selected) => {
+                                    setSelectedPartners((prev) => ({
+                                        ...prev,
+                                        partners: selected,
+                                        loading: false,
+                                    }));
+                                }}
+                                dropDownWidth={200}
+                                defaultSelected={partners?.map((p) => p.id) || []}
+                            />
+                        </div>
+                    }
+                    breadcrumbs={breadCrumbs}
+                />
+            }
+        >
+            <section>
+                <KeyIndicators selectedSources={selectedPartners} theme={theme} t={t} goTo={goTo} getRedirectLink={getRedirectLink} />
+            </section>                
+            <section>
+                <SupplyChainMap selectedSources={selectedPartners} t={t} goTo={goTo} options={options} getRedirectLink={getRedirectLink} />
+            </section>
+            <section>
+                <TradeRelationships selectedSources={selectedPartners} mapDataFunction={mapDataFunction} t={t} options={options} goTo={goTo} hardcodedData={hardcodedData} />
+            </section>
+            <section>
+                <ChartsContainer selectedSources={selectedPartners} t={t} theme={theme} options={options} />
+            </section>				
+            <section>
+                <ChartsContainer selectedSources={selectedPartners} isTradeActions={true} t={t} theme={theme} options={options} />
+            </section>
+        </DashboardLayout>
+    )
+}
+
+export default SupplyChain;

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

@@ -0,0 +1,14 @@
+import { BaseService } from "./BaseService.js";
+import { createLazyService } from "./helpers/LazyService.js";
+
+class DashboardService extends BaseService {
+    getWidget({url, params = {}, filters = {}, basepath = "dashboard"}) {
+        return this.apiGet({
+          url: `/${basepath}${url}`,
+          params: { ...params, ...filters },
+          isApp: true,
+        });
+    }
+}
+
+export default createLazyService(DashboardService);

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

@@ -0,0 +1,36 @@
+import { BaseService } from "./BaseService.js";
+import { createLazyService } from "./helpers/LazyService.js";
+
+class SourceService extends BaseService {
+  get(tab, filters) {
+		const { page, pageSize, search, searchParams, ...rest } = filters;
+		const params = {
+			filters: rest,
+			pagination: {
+				skip: page,
+				take: pageSize,
+			},
+		};
+		if (search && searchParams.length > 0) {
+			params.search = {
+				qs: search,
+				fields: searchParams,
+			};
+		}
+
+		return this.apiGet({
+			url: "/partner",
+			isApp: true,
+			params,
+		});
+	}
+
+
+  getSources({type,id}) {
+      return this.apiGet({
+          url: `/${type}/sources-for-subject/${id}`,
+      });
+  }
+}
+
+export default createLazyService(SourceService);

package/src/hooks.js

@@ -6,8 +6,9 @@ export { default as useLinearGradientAreaChart } from "./@daf/hooks/useLinearGra
 export { default as useRadialBarChart } from "./@daf/hooks/useRadialBarChart";
 export { useMapConfig } from "./@daf/hooks/useMapHelper.js";
 export { useIsMobile } from "./@daf/hooks/useIsMobile";
-export { default as useSource } from "./@daf/hooks/useSources.js";
+export { default as useSource, useSources } from "./@daf/hooks/useSources.js";
 export { useMapOnExpandableWidget } from "./@daf/hooks/useMapOnExpandableWidget";
 export { checkPermission, checkPermissionList, usePermissions } from "./@daf/hooks/usePermissions";
 export { useFirebase } from "./@daf/hooks/useFirebase.js"
-export { useIsDatastake } from "./@daf/hooks/useIsDatastake.js"
+export { useIsDatastake } from "./@daf/hooks/useIsDatastake.js"
+export { useWidgetFetch } from "./@daf/hooks/useWidgetFetch.js"

package/src/pages.js

@@ -0,0 +1 @@
+export { default as SupplyChainDashboard } from './@daf/pages/dashboards/SupplyChain/index.jsx';

package/src/services.js

@@ -13,4 +13,6 @@ export { default as ChannelsService } from './@daf/services/ChannelsService.js';
 export { default as DataStoreService } from './@daf/services/DataStoreService.js';
 export { default as NotificationService } from './@daf/services/NotificationService.js';
 export { default as QueryService } from './@daf/services/QueryService.js';
-export { default as UserService } from './@daf/services/UserService.js';
+export { default as UserService } from './@daf/services/UserService.js';
+export { default as SourceService } from './@daf/services/SourceService.js';
+export { default as DashboardService } from './@daf/services/DashboardService.js';