datastake-daf 0.6.746 → 0.6.748

package/src/@daf/pages/Summary/Minesite/index.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { useSummary } from '../hook.js'
+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 { Select, Spin } from 'antd'
+import MineSiteDetails from './components/MineSiteDetails/index.js'
+import LocationMap from './components/LocationMap/index.js'
+import InformationAvailability from '../components/InformationAvailability/index.js'
+import StakeholderMapping from './components/StakeholderMapping/index.js'
+
+const MineSummary = ({
+    hasSelect = false,
+    loading = false,
+    getSingleData = () => {},
+    getMultipleData = () => {},
+    data = [],
+    id = '',
+    storageKey = '',
+    isPdf = false,
+    params = {},
+    partners = [],
+    selectedPartners = {},
+    user = {},
+    t = () => {},
+    theme = {},
+    service,
+    options = {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+    goBack = () => {},
+    onIdChange = () => {},
+}) => {
+    const { 
+        selectedItem, 
+        setSelectedItem, 
+        dataOptions,
+        search,
+        debouncedSearch,
+        onSearch,
+        setSearch,
+        setDebouncedSearch,
+        sourceOptions,
+        setSelectedPartners,
+        singleItemData,
+        loading: loadingData,
+    } = useSummary({
+            getOne: getSingleData,
+            getMultiple: getMultipleData, 
+            id, 
+            hasSelect, 
+            storageKey, 
+            data,
+            isPdf: false,
+            params,
+            partners,
+            selectedPartners,
+            user,
+            t,
+            theme,
+            service,
+            onIdChange,
+    });
+
+    return (
+        <DashboardLayout
+            header={
+                <Header 
+                    title={t('Mine Summary')}
+                    className="with-border-header h-w-btn-header no-px-body"
+                    goBackTo={!hasSelect && goBack}
+                    addedHeaderFirst
+					actionButtons={[
+                        {
+							tooltip: t("Details"),
+							icon: "FileEdit",
+							onClick: () => {
+								goTo(getRedirectLink(`/app/view/production-sites/${params?.id ? params?.id : selectedItem}`));
+							},
+						},
+						{
+							tooltip: t("Find Data"),
+							icon: "Search",
+							onClick: () => {},
+							disabled: true,
+						},
+					]}
+                    addedHeader={
+						<div className="flex flex-row gap-4" style={{ marginRight: 8 }}>
+							<Multiselect
+								options={[...sourceOptions]}
+								isAvatarGroup
+								selectionType="checkbox"
+								key={partners?.length}
+								canUnselectLast={false}
+								onChange={(selected) => {
+									setSelectedPartners((prev) => ({
+										...prev,
+										partners: selected,
+										loading: false,
+									}));
+								}}
+								dropDownWidth={200}
+								defaultSelected={(partners || []).map((p) => p.id) || []}
+							/>
+						</div>
+					}
+                />
+            }
+        >
+            {hasSelect && (
+				<section>
+					<Select
+						showSearch
+						debounceTimeout={300}
+						onSearch={onSearch}
+						isSingle
+						style={{ height: "40px", width: "100%" }}
+						value={selectedItem}
+						onChange={setSelectedItem}
+						options={dataOptions}
+						filterOption={false}
+						loading={loading}
+						notFoundContent={loading ? <Spin size="small" /> : null}
+					/>
+				</section>
+			)}
+            <section>
+                <MineSiteDetails
+                    locationData={hasSelect ? singleItemData : data}
+                    loading={loadingData}
+                    t={t}
+                    options={options}
+                />
+                <LocationMap
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    params={params}
+                    locationData={hasSelect ? singleItemData : data}
+                    loading={loadingData}
+                />
+            </section>
+            <section>
+                <InformationAvailability
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                />
+            </section>
+            <section>
+                <StakeholderMapping
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                    locationData={hasSelect ? singleItemData : data}
+                />  
+            </section>
+        </DashboardLayout>
+    )
+}
+
+export default MineSummary

package/src/@daf/pages/Summary/Operator/components/Governance/config.js

@@ -0,0 +1,26 @@
+export const IconNodesConfig = {
+	beneficiaries: {
+		name: "nashiriki::beneficiaries",
+		icon: "CoinsHand",
+		order: 3,
+		emptyName: "no-beneficiaries",
+	},
+	boardMembers: {
+		name: "nashiriki::board-members",
+		icon: "Users",
+		order: 1,
+		emptyName: "no-board-members",
+	},
+	management: {
+		name: "nashiriki::management",
+		icon: "Filters",
+		order: 2,
+		emptyName: "no-management",
+	},
+	shareholders: {
+		name: "nashiriki::stakeholders",
+		icon: "PercentCircle",
+		order: 4,
+		emptyName: "no-stakeholders",
+	},
+};

package/src/@daf/pages/Summary/Operator/components/Governance/helper.js

@@ -0,0 +1,61 @@
+import { IconNodesConfig } from './config.js';
+
+export const getGovernanceData = ({data, operatorData, id, options, t, goTo, selectedPartners}) => {
+    const { sources, ...rest } = data;
+
+    const _data = rest;
+
+    return {
+        id: operatorData?.datastakeId || id,
+        name: t(operatorData?.name || ""),
+        country: {
+            label:
+                options?.countries?.find((country) => country.value === operatorData?.country)
+                    ?.label || "",
+            value: (operatorData?.country || "").toLowerCase() || "",
+        },
+        onClick: () => {
+        	goTo(`/app/view/operators/${operatorData?.datastakeId || id}`);
+        },
+        totalSources: selectedPartners?.partners?.length || 0,
+
+        children: Object.keys(_data)?.map((key, index) => {
+            return {
+                id: key,
+                name: t(IconNodesConfig[key]?.name),
+                icon: IconNodesConfig[key]?.icon,
+                order: IconNodesConfig[key]?.order || index + 1,
+                emptyName: t(`${IconNodesConfig[key]?.emptyName}`),
+                activeColour: "#b6f5ec",
+                iconHoverColor: "#fff",
+                hoverColor: "#36cfca",
+                content: _data[key].length,
+                children: _data[key]?.map((child) => {
+                    return {
+                        id: child?.datastakeId || "",
+                        name: child?.name || "",
+                        country: {
+                            label:
+                                options?.countries?.find(
+                                    (country) => country.value === child?.country,
+                                )?.label || "",
+                            value: (child?.country || "").toLowerCase() || "",
+                        },
+
+                        totalSources: child?.sources || 0,
+                        tooltipLabel: t("Holding"),
+                        onClick: () => {
+                            if (child?.type === "operator") {
+                                goTo(`/app/operator-summary/${child.datastakeId}`);
+                                return;
+                            }
+
+                            goTo(`/app/view/stakeholders/${child.datastakeId}`);
+                        },
+                        value: child?.holding || 0,
+                    };
+                }),
+            };
+        }),
+    };
+}

package/src/@daf/pages/Summary/Operator/components/Governance/index.js

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getGovernanceData } from './helper.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import StakeholderMappings from '../../../../../core/components/Graphs/StakeholderMappings/index.jsx';
+
+const Governance = ({
+    selectedPartners = {},
+    operatorData = {},
+    t = () => {},
+    id,
+    options = {},
+    goTo = () => {},
+
+}) => {
+    const defaultFetchConfig = useMemo(() => {
+		return {
+			basepath: "analytics",
+			url: "/widgets/information-map-graph",
+			filters: {
+				datastakeId: id,
+				sources: selectedPartners?.partners || [],
+                coreSubject: "stakeholder"
+			},
+			defaultData: {},
+			stop: selectedPartners?.loading,
+		};
+	}, [selectedPartners]);
+
+    const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+    const graphData = useMemo(() => {
+		return getGovernanceData({data, operatorData, id, options, t, goTo, selectedPartners});
+	}, [data, operatorData, options, t]);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Governance")}
+            className={"with-border-header no-p-body"}
+        >
+            <div style={{ height: 600 }}>
+                <StakeholderMappings
+                    data={graphData}
+                    maxZoom={1.1}
+                    t={t}
+                    isSelectable={true}
+                    isAllOpenDefault={true}
+                />
+            </div>
+        </Widget>
+    )
+}
+
+export default Governance

package/src/@daf/pages/Summary/Operator/components/KeyInformation/config.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { Tag, Tooltip } from "antd";
+import CountryFlag from "../../../../../core/components/UI/CountryFlag/index.jsx";
+import {findOptions } from "../../../../../../helpers/StringHelper.js";
+
+export const getKeyIndicatorConfig = ({ t, data = {}, options = {} }) => [
+	{
+		label: t("Country"),
+		render: () => {
+			if (!data?.country) {
+				return "-";
+			}
+
+            const country = findOptions(data?.country, options?.countries);
+            const code = data?.country;
+
+			return (
+                <Tooltip title={country}>
+                    <img
+                        alt={code}
+                        style={{ width: 24, borderRadius: 100, height: 24 }}
+                        src={`https://flagcdn.com/w80/${code.toLowerCase()}.png`}
+                    />
+                </Tooltip>
+			);
+		},
+	},
+	{
+		label: t("Supply Chain Position"),
+		render: () => {
+            const position = findOptions(data?.positionSupplyChain, options?.positionSupplyChainOptions);
+			return <div>{position|| "-"}</div>;
+		},
+	},
+	{
+		label: t("Legal Form"),
+		render: () => {
+            const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions);
+			return <div>{subCategory || "-"}</div>;
+		},
+	},
+	{
+		label: t("Products"),
+		render: () => {
+			if ((data?.products || []).length === 0) {
+				return "-";
+			}
+
+			return (
+				<div style={{ display: "flex", flexWrap: "wrap" }}>
+					{data?.products?.map((product) => {
+						return (
+							<Tag
+								color="processing"
+								style={{ color: "#1677FF", marginBottom: 8 }}
+								key={product}
+							>
+								{t(product)}
+							</Tag>
+						);
+					})}
+				</div>
+			);
+		},
+	},
+	{
+		label: t("Associated Mine Sites"),
+		render: () => {
+			return <div>{data?.associatedMineSites || 0}</div>;
+		},
+	},
+	{
+		label: t("Identified Suppliers"),
+		render: () => {
+			return <div>{data?.identifiedSuppliers || 0}</div>;
+		},
+	},
+	{
+		label: t("Identified Customers"),
+		render: () => {
+			return <div>{data?.identifiedCustomers || 0}</div>;
+		},
+	},
+];

package/src/@daf/pages/Summary/Operator/components/KeyInformation/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx';
+import { useMemo } from 'react';
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getKeyIndicatorConfig } from './config.js';
+
+
+const KeyInformation = ({options = {}, selectedPartners = {}, t = () => {}, id = {}, data = {}, loading = false}) => {
+    // const defaultFetchConfig = useMemo(() => {
+	// 	return {
+    //         basepath: "analytics",
+    //         url: '/widgets/key-informations',
+	// 		defaultData: [],
+	// 		stop: selectedPartners?.loading,
+	// 		filters: {
+	// 			datastakeId: id,
+	// 			sources: selectedPartners?.partners || [],
+	// 		},
+	// 	};
+	// }, [selectedPartners, id]);
+
+    // const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+    const config = useMemo(
+		() =>
+			getKeyIndicatorConfig({
+				t,
+				data,
+                options,
+			}),
+		[t, data, options],
+	);
+
+    return (
+        <KeyIndicatorsWidget
+            t={t}
+            config={config}
+            className="small-content"
+            loading={loading}
+            withTooltip
+            noMinWidth
+        />
+    )
+}
+
+export default KeyInformation

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/config.js

@@ -0,0 +1,40 @@
+import React from "react";
+import CustomIcon from "../../../../../core/components/Icon/CustomIcon.jsx";
+
+export const topIconColor = "#6C737F";
+export const iconColorStakeholder = "#08979C";
+export const leftBackgroundColorStakeholder = "#B5F5EC";
+export const iconColorLocation = "#C41D7F";
+export const leftBackgroundColorLocation = "#FFD6E7";
+
+export const topIcons = {
+	building: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	factory: <CustomIcon name="Factory" color={topIconColor} width={16} height={16} />,
+	smelter: <CustomIcon name="Smelter" color={topIconColor} width={16} height={16} />,
+	internationalTrader: <CustomIcon name="Globe04" color={topIconColor} width={16} height={16} />,
+	exporter: <CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />,
+	miningOperator: <CustomIcon name="MineOperators" color={topIconColor} width={16} height={16} />,
+	mineSite: <CustomIcon name="MineSite" color={topIconColor} width={16} height={16} />,
+	location: <CustomIcon name="PMESmallLogo" color={topIconColor} width={16} height={16} />,
+	inCountryTrader: <CustomIcon name="Handshake" color={topIconColor} width={16} height={16} />,
+	localTradingHouse: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	mineralProcessor: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	inCountryTransporter: <CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />,
+	internationalTransporter: (
+		<CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />
+	),
+};
+
+export const leftIcons = {
+	stakeholder: (
+		<CustomIcon
+			name="DashboardStakeholder"
+			color={iconColorStakeholder}
+			width={16}
+			height={16}
+		/>
+	),
+	location: (
+		<CustomIcon name="DashboardLocations" color={iconColorLocation} width={16} height={16} />
+	),
+};

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/helper.js

@@ -0,0 +1,98 @@
+import { leftIcons, leftBackgroundColorLocation, leftBackgroundColorStakeholder, topIcons } from './config.js';
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
+
+export const getFilterConfig = ({operatorData = {}, options = {}, filters = {}, t = () => {}}) => {
+    const productSet = new Set();
+    const allTradeMineralOptions = [
+        ...(operatorData?.suppliers || []),
+        ...(operatorData?.clients || []),
+        ...(operatorData?.locationSuppliers || []),
+    ].flatMap((trade) =>
+        (trade?.products || [])
+            .filter(
+                (product) => !!product?.typeOfProduct && !productSet.has(product.typeOfProduct),
+            )
+            .map((product) => {
+                productSet.add(product.typeOfProduct);
+
+                const label = options?.minerals?.find(
+                    (mineral) => mineral.value === product.typeOfProduct,
+                )?.label;
+
+                return {
+                    value: product.typeOfProduct,
+                    label: label ?? product.typeOfProduct,
+                };
+            }),
+    );
+
+    const combinedMineralOptions = [...allTradeMineralOptions].filter((option, index, self) => {
+        return option && index === self.findIndex((o) => o.value === option.value);
+    });
+
+    const value = filters.products ? { value: filters.products } : {};
+    return [
+        {
+            label: t("Products"),
+            placeholder: t("Select"),
+            key: "products",
+            type: "select",
+            ...value,
+            options: combinedMineralOptions,
+        },
+    ];
+}
+
+export const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {
+    if (data?.suppliers?.length > 0) {
+        return mapChildren(data.suppliers, data.datastakeId, "left").filter(
+            (d) => !!d,
+        );
+    }
+
+    const storeLocation = supplierLocations;
+    supplierLocations = [];
+
+    return storeLocation
+        .map((location) => {
+            return mapChildren([location], location.connect, "left");
+        })
+        .flat()
+        .filter((d) => !!d);
+}
+
+export const mapItem = (data, options, goTo, getRedirectLink) => {
+    const { positionSupplyChainOptions, locationCategories } = options || {};
+    return {
+        id: data.datastakeId || "-",
+        datastakeId: data.datastakeId || "-",
+        leftIcon: leftIcons[data.type === "mineSite" ? "location" : "stakeholder"],
+        name: data.name || "-",
+        subTitle: findOptions(data.type, [
+            ...(positionSupplyChainOptions || []),
+            ...(locationCategories || []),
+        ]),
+        leftBackground:
+            data.type === "mineSite"
+                ? leftBackgroundColorLocation
+                : leftBackgroundColorStakeholder,
+        topIcon: topIcons[data.type],
+        country: {
+            label: findOptions(data.country, options?.countries || []),
+            value: data.country,
+        },
+        totalSources: data.sources ?? 0,
+        volume: data?.volume || "",
+        onClick: function () {
+            if (data.type === "mineSite") {
+                return goTo(
+                    getRedirectLink(`/app/summary/scl/${data.datastakeId}`),
+                );
+            }
+            return goTo(
+                getRedirectLink(`/app/summary/operators/${data.datastakeId}`),
+            );
+        },
+    }
+}
+