datastake-daf 0.6.745 → 0.6.747

package/src/@daf/pages/Summary/Operator/hook.js

@@ -0,0 +1,176 @@
+import { useState, useMemo, useCallback, useEffect } from "react"
+import { debounce } from "lodash";
+import { StorageManager } from "../../../../helpers/StorageManager.js";
+
+export const useSummary = ({
+    getOne, 
+    getMultiple, 
+    id, 
+    hasSelect = false, 
+    storageKey, 
+    data, 
+    isPdf, 
+    params,
+    partners, 
+    selectedPartners,
+    user,
+    t,
+    theme = {},
+    service
+}) => {
+    const [search, setSearch] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const [singleItemData, setSingleItemData] = useState();
+	const [loading, setLoading] = useState(false);
+    const [_partners, _setPartners] = useState();
+
+	const [selectedItem, setSelectedItem] = useState(undefined);
+
+	const dataOptions = useMemo(() => {		
+		const mappedData = data?.map((item) => ({
+			label: item?.name,
+			value: item?.datastakeId
+		})) || [];
+		
+		const storedData = StorageManager.get(storageKey);
+		if (storedData) {
+			try {
+				const parsedStoredData = JSON.parse(storedData);
+				const existsInData = mappedData?.find(item => item.value === parsedStoredData.value);
+
+				if (!existsInData) {
+					return [...mappedData, parsedStoredData];
+				}
+			} catch (error) {
+				console.log('Error parsing stored data:', error);
+			}
+		}
+		
+		return mappedData;
+	}, [data, hasSelect, storageKey])
+
+	useEffect(() => {
+		if (hasSelect && dataOptions && dataOptions.length > 0 && !debouncedSearch && !hasInitialized) {
+			let selectedValue;
+			
+			if (isPdf) {
+				selectedValue = id;
+			} else {
+				const storedData = StorageManager.get(storageKey);
+				if (storedData) {
+					try {
+						const parsedData = JSON.parse(storedData);
+						const existsInOptions = dataOptions?.find((item) => item?.value === parsedData?.value);
+						selectedValue = existsInOptions ? parsedData?.value : (Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined);
+					} catch (error) {
+						console.log('Error parsing stored data:', error);
+						selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+					}
+				} else {
+					selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+				}
+			}
+			
+			setSelectedItem(selectedValue);
+			setHasInitialized(true);
+		}
+	}, [hasSelect, storageKey, isPdf, id, debouncedSearch, hasInitialized, dataOptions]);
+
+    useEffect(() => {
+		if (selectedItem) {
+			const selectedData = data?.find((item) => item?.datastakeId === selectedItem);
+			if(selectedData) {
+				const saved = {
+					label: selectedData.name,
+					value: selectedData.datastakeId,
+				}
+				StorageManager.set(storageKey, JSON.stringify(saved));
+			}
+		}
+	}, [selectedItem, storageKey]);
+
+    const debouncedSetSearch = useMemo(
+		() => debounce((value) => setDebouncedSearch(value), 300),
+		[]
+	  );
+
+	  const onSearch = useCallback((value) => {
+		setSearch(value);         
+		debouncedSetSearch(value);
+	  }, [debouncedSetSearch]);
+
+	
+	  useEffect(() => {
+		setDebouncedSearch("");
+	  }, [selectedItem]);
+
+      const filters = useMemo(() => {
+		return {
+		  pagination: { size: 20, page: 1 },
+		  ...(debouncedSearch
+			? { search: { qs: debouncedSearch, fields: ["name","datastakeId","orgShortName"] } }
+			: {}),
+		};
+	  }, [debouncedSearch]);
+
+      useEffect(() => {
+		if (_partners !== undefined) {
+			if ((params?.id !== null || (isPdf && id !== null)) && !hasSelect) {
+				getOne(params?.id || id, { sources: _partners });
+			}
+		}
+		if (hasSelect && !params?.id) {
+			getMultiple(filters);
+		}
+	}, [params?.id, hasSelect, getOne, getMultiple, _partners, isPdf, id, filters]);
+
+    	useEffect(() => {
+		if (selectedItem && _partners !== undefined) {
+			const fetchSingleItem = async () => {
+				setLoading(true);
+				try {
+					const { data } = await service.getOne(selectedItem, { sources: _partners });
+					setSingleItemData(data);
+				} catch (error) {
+					console.log(error);
+				} finally {
+					setLoading(false);
+				}
+			};
+			fetchSingleItem();
+		}
+	}, [selectedItem, service, _partners]);
+
+    useEffect(() => {
+		_setPartners(selectedPartners?.partners);
+	}, [selectedPartners]);
+
+    const sourceOptions = useMemo(() => {
+		return partners?.map((partner) => {
+			const isOwnData = partner.id === user?.company?.id;
+
+			return {
+				label: isOwnData ? t("Own Data") : partner.nickName,
+				value: partner.id,
+				avatar: isOwnData ? <span>OWN</span> : undefined,
+				background: isOwnData ? theme.colorPrimary7 : undefined,
+				color: isOwnData ? "white" : undefined,
+			};
+		});
+	}, [partners, user]);
+
+    return {
+        selectedItem,
+        setSelectedItem,
+        dataOptions,
+        search,
+        debouncedSearch,
+        onSearch,
+        setSearch,
+        setDebouncedSearch,
+        sourceOptions,
+        singleItemData,
+        loading,
+    }
+}

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

@@ -0,0 +1,170 @@
+import React from 'react'
+import DashboardLayout from '../../../core/components/Dashboard/DashboardLayout/index.jsx'
+import { Select, Spin } from 'antd'
+import { useSummary } from '../hook.js'
+import Header from '../../../core/components/Header/index.jsx'
+import Multiselect from '../../../core/components/Select/MultiSelect/index.jsx'
+import KeyInformation from './components/KeyInformation/index.js'
+import InformationAvailability from '../components/InformationAvailability/index.js'
+import TradeRelationships from './components/TradeRelationships/index.js'
+import Governance from './components/Governance/index.js'
+
+const OperatorSummary = ({
+    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('Operator 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/operators/${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>
+			)}
+            <KeyInformation
+                options={options}
+                selectedPartners={selectedPartners}
+                t={t}
+                id={params?.id || selectedItem}
+                data={hasSelect ? singleItemData : data}
+                loading={loading}
+            />
+            <section>
+                <InformationAvailability
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                />
+            </section>
+            <section>
+                <TradeRelationships
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                    options={options}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                    operatorData={hasSelect ? singleItemData : data}
+                />
+            </section>
+            <section>
+                <Governance
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                    options={options}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                    operatorData={hasSelect ? singleItemData : data}
+                />
+            </section>
+
+        </DashboardLayout>
+    )
+}
+
+export default OperatorSummary

package/src/@daf/pages/Summary/components/InformationAvailability/components/Contributions/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Widget from '../../../../../../core/components/Dashboard/Widget/index.jsx';
+import BarChart from '../../../../../../core/components/Charts/BarChart/index.jsx';
+
+const Contributions = ({
+    data = {},
+    loading = false,
+    t = () => {},
+}) => {
+    return (
+        <Widget
+            title={t("Contributions")}
+            className="with-border-header h-w-btn-header"
+            loading={loading}
+        >
+            <BarChart
+                data={data?.stakeholders || []}
+                xFieldKey="completedDatapoints"
+                yFieldKey="author"
+                renderTooltipContent={(title, item) => {
+                    return {
+                        title: title,
+                        items: [
+                            {
+                                label: t("Datapoints"),
+                                value: item?.[0]?.data?.completedDatapoints || 0,
+                            },
+                        ],
+                    };
+                }}
+            />
+        </Widget>
+    )
+}
+
+export default Contributions

package/src/@daf/pages/Summary/components/InformationAvailability/components/InformationCompleteness/index.js

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../../core/components/Dashboard/Widget/index.jsx';
+import RadialBarChart from '../../../../../../core/components/Charts/RadialBarChart/index.jsx';
+
+const InformationCompleteness = ({
+    data = {},
+    loading = false,
+    t = () => {},
+}) => {
+
+    const graphData = useMemo(() => {
+        const keys = {
+          ownDataCompletion: data?.ownDataCompletion || 0,
+          consolidatedCompletion: data?.consolidatedCompletion || 0,
+        };
+    
+        const _data = Object.keys(keys).map((key) => {
+          const item = keys[key];
+    
+          if (!Array.isArray(item)) {
+            return {
+              label: key?.includes("own") ? t("Own Data") : t("Consolidated"),
+              value: item,
+            };
+          }
+        });
+    
+        return _data.filter((item) => item !== undefined);
+      }, [data]);
+
+    return (
+        <Widget
+            title={t("Information Completeness")}
+            loading={loading}
+            className="with-border-header h-w-btn-header"
+        >
+            <RadialBarChart
+                data={graphData}
+                renderTooltipContent={(title, item) => {
+                const value =
+                    item?.[0]?.data?.value > 100 ? 100 : item?.[0]?.data?.value || 0;
+
+                return {
+                    title: title,
+                    items: [
+                    {
+                        label: t("Completion"),
+                        value: `${value}%`,
+                    },
+                    ],
+                };
+                }}
+            />
+        </Widget>
+    )
+}
+
+export default InformationCompleteness

package/src/@daf/pages/Summary/components/InformationAvailability/index.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../hooks/useWidgetFetch.js';
+import Widget from '../../../../core/components/Dashboard/Widget/index.jsx';
+import InformationCompleteness from './components/InformationCompleteness/index.js';
+import Contributions from './components/Contributions/index.js';
+
+const InformationAvailability = ({
+    selectedPartners = {},
+    t = () => {},
+    id,
+}) => {
+    const defaultFetchConfig = useMemo(
+		() => ({
+            basepath: "analytics",
+			url: "/widgets/completeness",
+			defaultData: [],
+			stop: selectedPartners?.loading,
+			filters: {
+				datastakeId: id,
+				sources: selectedPartners?.partners || [],
+			},
+		}),
+		[id, selectedPartners],
+	);
+
+    const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+    return (
+        <Widget
+            title={t("Information Availability")}
+            loading={loading}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-row flex-col-mobile gap-6">
+                <InformationCompleteness data={data} loading={loading} t={t} />
+                <Contributions data={data} loading={loading} t={t} />
+            </div>
+        </Widget>
+    )
+}
+
+export default InformationAvailability

package/src/@daf/pages/Summary/hook.js

@@ -0,0 +1,188 @@
+import { useState, useMemo, useCallback, useEffect } from "react"
+import { debounce } from "lodash";
+import { StorageManager } from "../../../helpers/StorageManager.js";
+
+export const useSummary = ({
+    getOne, 
+    getMultiple, 
+    id, 
+    hasSelect = false, 
+    storageKey, 
+    data, 
+    isPdf, 
+    params,
+    partners, 
+    selectedPartners,
+    user,
+    t,
+    theme = {},
+    service,
+	onIdChange = () => {}
+}) => {
+    const [search, setSearch] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const [singleItemData, setSingleItemData] = useState();
+	const [loading, setLoading] = useState(false);
+    const [_partners, _setPartners] = useState();
+
+	const [selectedItem, setSelectedItem] = useState(undefined);
+
+	const dataOptions = useMemo(() => {		
+		if(hasSelect) {
+			const mappedData = Array.isArray(data) ? data.map((item) => ({
+				label: item?.name,
+				value: item?.datastakeId
+			})) : [];
+			
+			const storedData = StorageManager.get(storageKey);
+			if (storedData) {
+				try {
+					const parsedStoredData = JSON.parse(storedData);
+					const existsInData = mappedData?.find(item => item.value === parsedStoredData.value);
+	
+					if (!existsInData) {
+						return [...mappedData, parsedStoredData];
+					}
+				} catch (error) {
+					console.log('Error parsing stored data:', error);
+				}
+			}
+			
+			return mappedData;
+		}
+	}, [data, hasSelect, storageKey])
+
+	useEffect(() => {
+		if (hasSelect && dataOptions && dataOptions.length > 0 && !debouncedSearch && !hasInitialized) {
+			let selectedValue;
+			
+			if (isPdf) {
+				selectedValue = id;
+			} else {
+				const storedData = StorageManager.get(storageKey);
+				if (storedData) {
+					try {
+						const parsedData = JSON.parse(storedData);
+						const existsInOptions = dataOptions?.find((item) => item?.value === parsedData?.value);
+						selectedValue = existsInOptions ? parsedData?.value : (Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined);
+					} catch (error) {
+						console.log('Error parsing stored data:', error);
+						selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+					}
+				} else {
+					selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+				}
+			}
+			
+			setSelectedItem(selectedValue);
+			setHasInitialized(true);
+		}
+	}, [hasSelect, storageKey, isPdf, id, debouncedSearch, hasInitialized, dataOptions]);
+
+	useEffect(() => {
+		if (selectedItem && Array.isArray(data)) {
+			const selectedData = data.find((item) => item?.datastakeId === selectedItem);
+			if(selectedData) {
+				const saved = {
+					label: selectedData.name,
+					value: selectedData.datastakeId,
+				}
+				StorageManager.set(storageKey, JSON.stringify(saved));
+			}
+		}
+	}, [selectedItem, storageKey, data]);
+
+    const debouncedSetSearch = useMemo(
+		() => debounce((value) => setDebouncedSearch(value), 300),
+		[]
+	  );
+
+	  const onSearch = useCallback((value) => {
+		setSearch(value);         
+		debouncedSetSearch(value);
+	  }, [debouncedSetSearch]);
+
+	
+	  useEffect(() => {
+		setDebouncedSearch("");
+	  }, [selectedItem]);
+
+      const filters = useMemo(() => {
+		return {
+		  pagination: { size: 20, page: 1 },
+		  ...(debouncedSearch
+			? { search: { qs: debouncedSearch, fields: ["name","datastakeId","orgShortName"] } }
+			: {}),
+		};
+	  }, [debouncedSearch]);
+
+      useEffect(() => {
+		if (_partners !== undefined) {
+			if ((params?.id !== null || (isPdf && id !== null)) && !hasSelect) {
+				getOne({ datastakeId: params?.id || id, sources: _partners });
+			}
+		}
+		if (hasSelect && !params?.id) {
+			getMultiple(filters);
+		}
+	}, [params?.id, hasSelect, getOne, getMultiple, _partners, isPdf, id, filters]);
+
+    	useEffect(() => {
+		if (selectedItem && _partners !== undefined) {
+			const fetchSingleItem = async () => {
+				setLoading(true);
+				try {
+					const { data } = await service.getOne(selectedItem, { sources: _partners });
+					setSingleItemData(data);
+				} catch (error) {
+					console.log(error);
+				} finally {
+					setLoading(false);
+				}
+			};
+			fetchSingleItem();
+		}
+	}, [selectedItem, service, _partners]);
+
+    useEffect(() => {
+		_setPartners(selectedPartners?.partners);
+	}, [selectedPartners]);
+
+	useEffect(() => {
+        const currentId = params?.id || selectedItem;
+        if(typeof onIdChange === 'function') {
+			if (currentId) {
+				onIdChange(currentId);
+			}
+		}
+    }, [params?.id, selectedItem, onIdChange]);
+
+    const sourceOptions = useMemo(() => {
+		return (partners || [])?.map((partner) => {
+			const isOwnData = partner.id === user?.company?.id;
+
+			return {
+				label: isOwnData ? t("Own Data") : partner.nickName,
+				value: partner.id,
+				avatar: isOwnData ? <span>OWN</span> : undefined,
+				background: isOwnData ? theme.colorPrimary7 : undefined,
+				color: isOwnData ? "white" : undefined,
+			};
+		});
+	}, [partners, user, hasSelect]);
+
+    return {
+        selectedItem,
+        setSelectedItem,
+        dataOptions,
+        search,
+        debouncedSearch,
+        onSearch,
+        setSearch,
+        setDebouncedSearch,
+        sourceOptions,
+        singleItemData,
+        loading,
+    }
+}

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

@@ -14,8 +14,24 @@ const namespaceEnums = {
 
 class OperatorService extends BaseService {
 	get(params) {
+		const { datastakeId, ...rest } = params;
+		if(datastakeId) {
+			return this.apiGet({
+				url: `/stakeholder/${datastakeId}`,
+				params: {...rest},
+				isApp: true,
+			});
+		}
 		return this.apiGet({
 			url: "/stakeholder",
+			params: {...rest},
+			isApp: true,
+		});
+	}
+
+	getOne(id, params) {
+		return this.apiGet({
+			url: `/stakeholder/${id}`,
 			params,
 			isApp: true,
 		});

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

@@ -28,7 +28,7 @@ class SourceService extends BaseService {
 
   getSources({type,id}) {
       return this.apiGet({
-          url: `/${type}/sources-for-subject/${id}`,
+          url: `/${type}/sources/${id}`,
       });
   }
 }