datastake-daf 0.6.745 → 0.6.747

package/src/@daf/pages/Summary/Activities/Restoration/index.jsx

@@ -0,0 +1,178 @@
+import { useMemo, useCallback } from 'react';
+import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart } from '../../../../../../src/index.js'
+import { getKeyIndicatorsRowConfig } from './config';
+import { extractFromPhotoDoc, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren } from './helper';
+import { renderTooltipJsx } from '../../../../../../src/utils';
+import { useResizeContext } from '../../../../../../src/context';
+
+const RestorationActivitySummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
+    const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: activityData }), [t, activityData]);
+    const images = useMemo(() => {
+
+        const photoArrays = [
+            { data: activityData?.groupPhotos, label: 'Group Photo' },
+            { data: activityData?.photosStartActivity, label: 'Start of Activity' },
+            { data: activityData?.photosDuringActivity, label: 'During Activity' },
+            { data: activityData?.photosEndActivity, label: 'End of Activity' }
+        ];
+
+        return photoArrays
+            .flatMap(({ data, label }) =>
+                Array.isArray(data)
+                    ? data.flatMap((photoDoc, index) => extractFromPhotoDoc(photoDoc, label, index))
+                    : []
+            );
+    }, [activityData]);
+    const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
+    const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
+    const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
+
+    const getTooltipChildren = useCallback(
+        (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
+        [t, isEmpty, genderDistributionData],
+    );
+    return (
+        <DashboardLayout
+            header={
+                <Header
+                    title={'Restoration Activity Summary'}
+                    supportText={supportText || ''}
+                    onDownload={onDownload}
+                    downloadDisabled={downloadDisabled}
+                    actionButtons={actionButtons}
+                    breadcrumbs={breadcrumbs}
+                    goBackTo={goBackTo}
+                    loading={loading}
+                />
+            }
+        >
+            <section>
+                <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
+            </section>
+
+            <section>
+                <Widget
+                    title={t("Activity Location")}
+                    className="no-px no-pb-body"
+                    style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+                >
+                    <div style={{ flex: 1, minHeight: 0 }}>
+                        <MineSiteMap
+                            loading={loading}
+                            t={t}
+                            isSatellite={true}
+                            app={"straatos"}
+                            showSider={false}
+                            user={null}
+                            data={[
+                                {
+                                    _id: {},
+                                    id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8367b",
+                                    color: "#6698E4",
+                                    parent: {
+                                        _id: {},
+                                        createdAt: "2024-06-13T14:51:55.296Z",
+                                        updatedAt: "2024-06-13T14:51:55.296Z",
+                                        id: "a5340bf1-2c7d-413f-a2a5-ccd7dc8f7a7c",
+                                        name: "New Mine",
+                                        authorId: "4e6066e9-00d8-423a-94ec-c7c9d3432fec",
+                                        collectId: "f8a2b6a9cc935ef3e5844427f49aade34e152eca",
+                                        country: "AL",
+                                        category: "mineSite",
+                                        datastakeId: "LOC-00000000141",
+                                        __v: 0,
+                                    },
+                                    administrativeLevel1: "6839cb26-5af4-44a3-b136-a0f0a0bcecc6",
+                                    administrativeLevel2: "f849835d-5640-4bee-ae98-9f1c810c1abe",
+                                    // "name": "New Mine",
+                                    country: "AL",
+                                    category: "mineSite",
+                                    authorId: "4e6066e9-00d8-423a-94ec-c7c9d3432fec",
+                                    gps: {
+                                        latitude: 7,
+                                        longitude: 1,
+                                    },
+                                    area: [
+                                        [6, 5],
+                                        [7, 1],
+                                        [9, 2],
+                                    ],
+                                    associatedSubjects: [
+                                        {
+                                            entity: "Event",
+                                            _id: {},
+                                            nature: "",
+                                        },
+                                    ],
+                                    published: false,
+                                    version: 1,
+                                    createdAt: "2024-06-13T14:51:55.296Z",
+                                    updatedAt: "2024-06-13T14:51:55.296Z",
+                                    name: "Name",
+                                    type: "Loc Type",
+                                    __v: 0,
+                                    datastakeId: "LOC-00000000141",
+                                },
+                            ]}
+                            // tooltipAsText: true,
+                            primaryLink={true}
+                            renderTooltip={() => {
+                                return [
+                                    {
+                                        label: "Name",
+                                        value: "Name",
+                                    },
+                                ];
+                            }}
+                            center={[13, -15]}
+                            mapConfig={{ maxZoom: 18 }}
+                            type={'territory'}
+                            link={true}
+                            onClickLink={() => { }}
+                        />
+                    </div>
+                </Widget>
+            </section>
+
+            <section>
+                <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
+                    <ImageCarousel
+                        loading={loading}
+                        images={images}
+                        title={t("straatos::activity-imagery")}
+                        key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
+                        customArrows={true}
+                        activeDotColor="#003435"
+                    />
+                </div>
+                <Widget
+                    loading={loading}
+                    title={<div>{t("Workers Distribution")}</div>}
+                    className="with-border-header h-w-btn-header "
+                >
+                    <div
+                        style={{
+                            marginTop: "auto",
+                            marginBottom: "auto",
+                        }}
+                    >
+                        <PieChart
+                            mouseXOffset={10}
+                            mouseYOffset={10}
+                            changeOpacityOnHover={false}
+                            data={pieData}
+                            doConstraints={false}
+                            isPie
+                            t={t}
+                            isEmpty={isEmpty}
+                            getTooltipChildren={getTooltipChildren}
+                        />
+                    </div>
+                </Widget>
+            </section>
+        </DashboardLayout>
+    )
+}
+
+export default RestorationActivitySummary;

package/src/@daf/pages/Summary/Minesite/components/LocationMap/index.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx'
+import Map from '../../../../../core/components/Dashboard/Map/index.jsx'
+import { getLinkValue } from '../../../../../../helpers/StringHelper.js'
+
+const LocationMap = ({
+    selectedPartners = {},
+    t = () => {},
+    params,
+    locationData = {},
+    loading = false,
+}) => {
+    const data = useMemo(() => {
+		return {
+			gps: locationData?.gps || {},
+			name: locationData?.name || "",
+			admin_level_01:
+				locationData?.linking?.SCL?.[locationData?.administrativeLevel1]?.name || "",
+			admin_level_02:
+				locationData?.linking?.SCL?.[locationData?.administrativeLevel2]?.name || "",
+			country: locationData?.country,
+		};
+	}, [locationData]);
+
+
+    return (
+        <Widget
+			title={t("Location")}
+			className="no-px no-pb-body overflow-hidden"
+			loading={loading}
+		>
+            <Map 
+                showSider={false}
+                primaryLink={true}
+				mapConfig={{
+					maxZoom: 10,
+				}}
+				type={"location"}
+				data={[data]}
+                renderTooltip={() => {
+					const country = data?.country;
+					const adminLevel1Label = t("Province")
+					const adminLevel2Label = t("Territory");
+
+					return [
+						{
+							label: t(adminLevel1Label),
+							value: data?.admin_level_01 || "--",
+						},
+						{
+							label: t(adminLevel2Label),
+							value: data?.admin_level_02 || "--",
+						},
+					];
+				}}
+            />
+		</Widget>
+    )
+}
+
+export default LocationMap

package/src/@daf/pages/Summary/Minesite/components/MineSiteDetails/config.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { Tag } from "antd";
+import { getTagColor } from "../../../../../utils/productTag.js";
+
+export function getKeyIndicatorsConfig({ t, data }) {
+	return [
+		{
+			label: t("Extraction Methods"),
+			render: () => {
+				if (!data?.extractionPoints?.length) {
+					return "-";
+				}
+				return (
+					<div
+						style={{
+							display: "flex",
+							flexWrap: "wrap",
+						}}
+					>
+						{data?.extractionPoints?.map((method) => {
+							return (
+								<Tag
+									key={method}
+									style={{
+										marginBottom: 8,
+									}}
+								>
+									{method}
+								</Tag>
+							);
+						})}
+					</div>
+				);
+			},
+		},
+		{
+			label: t("Products"),
+			render: () => {
+				if (data?.productsOfLocation?.length === 0) {
+					return "-";
+				}
+
+				return (
+					<div
+						style={{
+							display: "flex",
+							flexWrap: "wrap",
+						}}
+					>
+						{data?.productsOfLocation?.map((product) => {
+							return (
+								<Tag
+									key={product}
+									style={{
+										marginBottom: 8,
+									}}
+									color={getTagColor(product)}
+								>
+									{product}
+								</Tag>
+							);
+						})}
+					</div>
+				);
+			},
+		},
+		{
+			label: t("Number of Workers on Site"),
+			render: () => {
+				if (!data.workers) {
+					return "-";
+				}
+				return data.workers;
+			},
+		},
+	];
+}

package/src/@daf/pages/Summary/Minesite/components/MineSiteDetails/index.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react'
+import { getKeyIndicatorsConfig } from './config.js'
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx'
+
+const MineSiteDetails = ({
+    locationData = {},
+    loading = false,
+    t = () => {},
+    options = {}
+}) => {
+
+    const data = useMemo(() => {
+		return {
+			extractionPoints: (locationData?.extractionMethod || []).map((method) => {
+				const _method = options?.extractionMethodsOptions?.find(
+					(option) => option.value === method,
+				)?.label;
+
+				return _method;
+			}),
+			products: (
+				(locationData?.products || []).map((product) => product.typeOfProduct) || []
+			).map((product) => {
+				const _product = options?.minerals?.find(
+					(option) => option.value === product,
+				)?.label;
+
+				return _product;
+			}),
+			workers: locationData?.totalNumberOfWorkers || 0,
+		};
+	}, [locationData, options]);
+
+    const config = useMemo(() => getKeyIndicatorsConfig({ t, data }), [t, data]);
+
+    return (
+        <KeyIndicatorsWidget
+            title={t("Mine Site Details")}
+            className="value-center small-content row-content-col"
+            config={config}
+            loading={loading}
+            widgetClassName="custom-width-b"
+        />
+    )
+}
+
+export default MineSiteDetails

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/config.js

@@ -0,0 +1,26 @@
+export const IconNodesConfig = {
+	operators: {
+		name: "nashiriki::Operators",
+		icon: "Worker",
+		order: 1,
+		emptyName: "no-operators",
+	},
+	traders: {
+		name: "nashiriki::Traders",
+		icon: "Handshake",
+		order: 2,
+		emptyName: "no-traders",
+	},
+	government: {
+		name: "nashiriki::Government",
+		icon: "KYC",
+		order: 3,
+		emptyName: "no-government",
+	},
+	other: {
+		name: "nashiriki::Other",
+		icon: "CivilSociety",
+		order: 4,
+		emptyName: "no-other",
+	},
+};

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/helper.js

@@ -0,0 +1,64 @@
+import { IconNodesConfig } from './config.js';
+
+export const getStakeholderMappingData = ({data, locationData, id, options, t, goTo, selectedPartners}) => {
+    const _data = data;
+
+    return {
+        id: id,
+        name: locationData?.name || "",
+        country: {
+            label:
+                options?.countries?.find((country) => country.value === locationData?.country)
+                    ?.label || "",
+            value: (locationData?.country || "").toLowerCase() || "",
+        },
+        onClick: () => goTo(`/app/view/production-sites/${id}`),
+        totalSources: selectedPartners?.partners?.length || 0,
+        backgroundColor: "#FFD6E7",
+        iconColor: "#C41D7F",
+
+        icon: "DashboardLocations",
+        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,
+                activeColour: "#b6f5ec",
+                iconHoverColor: "#fff",
+                hoverColor: "#36cfca",
+                content: _data[key].length,
+                emptyName: IconNodesConfig[key]?.emptyName
+                    ? t(`nashiriki::${IconNodesConfig[key]?.emptyName}`)
+                    : undefined,
+                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 ? child?.country?.toLowerCase() : "",
+                        },
+
+                        icon: "DashboardStakeholder",
+                        onClick: () => {
+                            if (child?.type === "operator") {
+                                goTo(`/app/summary/operators/${child.datastakeId}`);
+                                return;
+                            }
+
+                            goTo(`/app/view/stakeholders/${child.datastakeId}`);
+                        },
+                        totalSources: child?.sources || 0,
+                        tooltipHeader: t("nashiriki::link-details"),
+                        tooltipLabel: t("nashiriki::sources-reporting"),
+                        value: child?.sources || 0,
+                    };
+                }),
+            };
+        }),
+    };
+}

package/src/@daf/pages/Summary/Minesite/components/StakeholderMapping/index.js

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getStakeholderMappingData } from './helper.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import StakeholderMappings from '../../../../../core/components/Graphs/StakeholderMappings/index.jsx';
+
+const StakeholderMapping = ({
+    t = () => {},
+    id,
+    options = {},
+    goTo = () => {},
+    selectedPartners = {},
+    locationData = {},
+}) => {
+
+    const defaultFilter = useMemo(() => {
+		return {
+			basepath: "analytics",
+			url: "/widgets/information-map-graph",
+			defaultData: [],
+			stop: selectedPartners?.loading,
+			filters: {
+				datastakeId: id,
+				sources: selectedPartners?.partners || [],
+				coreSubject: "location",
+				filterBySources: false,
+				metrics: {
+					operator: ['operator'],
+					government: ['custom', 'governance'],
+					trader: ['trade'],
+					other: ['civilSociety', 'international'],
+				}
+			},
+		};
+	}, [selectedPartners, id]);
+
+    const { data, loading } = useWidgetFetch({config: defaultFilter});
+
+    const graphData = useMemo(() => {
+        return getStakeholderMappingData({data, locationData, id, options, t, goTo, selectedPartners});
+    }, [data, locationData, id, options, t, goTo, selectedPartners]);
+
+    return (
+		<Widget
+			loading={loading}
+			title={t("Stakeholder Mapping")}
+			className={"with-border-header no-px no-p-body"}
+		>
+			<div style={{ height: 600 }}>
+				<StakeholderMappings data={graphData} t={t} />
+			</div>
+		</Widget>
+    )
+}
+
+export default StakeholderMapping

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