datastake-daf 0.6.798 → 0.6.799

package/src/@daf/core/components/Screens/Admin/AdminScreens/SubjectsView.jsx

@@ -0,0 +1,395 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import Header from "../../../Header/index.jsx";
+import Loading from "../../../Loading/index.jsx";
+import SideBarMenu from "../AdminViews/components/SidebarMenu/index.jsx";
+import ViewLocation from "../AdminViews/ViewLocation/index.jsx";
+import ViewStakeholder from "../AdminViews/ViewStakeholder/index.jsx";
+import EditLocation from "../AdminViews/EditLocation/index.jsx";
+import EditStakeholder from "../AdminViews/EditStakeholder/index.jsx";
+import { config as locationConfig } from "../AdminViews/ViewLocation/config.js";
+import { config as stakeholderConfig } from "../AdminViews/ViewStakeholder/config.js";
+import NotFound from "../../NotFound/index.jsx";
+import { Form, message, Modal } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { NOTIFICATION_MODE, useForms, FormsProvider } from "../../../../context/Forms/index.js";
+import { getMainApiUrl, getAppHeader as getBaseAppHeader } from "../../../../../services/BaseService.js";
+
+function withFormsProvider(Component) {
+	return function WrappedWithFormsProvider(props) {
+		return (
+			<FormsProvider>
+				<Component {...props} />
+			</FormsProvider>
+		);
+	};
+}
+
+
+function normalizeFormData(data) {
+	if (!data || typeof data !== 'object') {
+		return data;
+	}
+
+	const normalized = { ...data };
+
+	Object.keys(normalized).forEach(key => {
+		const value = normalized[key];
+
+		if (value === null || value === undefined) {
+			return;
+		}
+
+		if (Array.isArray(value)) {
+			if (value.length > 0 && typeof value[0] === 'object' && value[0] !== null) {
+				if ('value' in value[0]) {
+					normalized[key] = value.map(item => item.value);
+				}
+			}
+			return;
+		}
+
+		if (typeof value === 'object' && 'value' in value) {
+			normalized[key] = value.value;
+		}
+	});
+
+	return normalized;
+}
+
+/**
+ * Admin Subjects View Screen
+ * This component handles viewing and editing individual subjects (locations or stakeholders)
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.subject - Subject type: "location" or "stakeholder"
+ * @param {string} config.id - Subject ID from route params
+ * @param {string} config.mode - Mode: "view" or "edit"
+ * @param {string} config.module - Module identifier
+ * @param {Function} config.goTo - Navigation function
+ * @param {Function} config.t - Translation function
+ * @param {Object} config.location - Router location object
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Function} config.renderBreadCrumbs - Function to render breadcrumbs
+ * @param {Object} config.options - Options object with countries, categories, etc.
+ * @param {Function} config.AdminService - Admin service for API calls
+ * @param {Function} config.handleError - Error handling function
+ */
+function AdminSubjectsViewScreen({ config }) {
+	const {
+		subject,
+		id,
+		mode = "view",
+		module,
+		goTo,
+		t,
+		location,
+		getRedirectLink,
+		renderBreadCrumbs,
+		options,
+		AdminService,
+		handleError,
+		userRoles = [],
+		accountStatuses = [],
+		getApiBaseUrl = getMainApiUrl,
+		getAppHeader = getBaseAppHeader,
+	} = config;
+
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState({});
+	const [editData, setEditData] = useState({});
+	const [isChanged, setIsChanged] = useState(false);
+	const [selectedGroup, setSelectedGroup] = useState("");
+	const [MainForm] = Form.useForm();
+	const { setNotificationMode, changeNotificationState, ajaxForms } = useForms();
+
+	const configs = useMemo(() => {
+		return subject === "location" ? locationConfig : stakeholderConfig;
+	}, [subject]);
+
+	const conf = useMemo(() => {
+		if (!Array.isArray(configs) || configs.length === 0) {
+			console.warn("configs is not a valid array:", configs);
+			return null;
+		}
+
+		if (!selectedGroup) {
+			setSelectedGroup(configs[0].key);
+			return configs[0];
+		}
+		
+		const foundConfig = configs.find((c) => c.key === selectedGroup);
+		return foundConfig || configs[0];
+	}, [selectedGroup, configs]);
+
+	useEffect(() => {
+		const normalizedData = normalizeFormData(data);
+		
+		console.log(' Form Data Normalization:', {
+			rawData: data,
+			normalizedData: normalizedData,
+			changes: Object.keys(data).filter(key => 
+				JSON.stringify(data[key]) !== JSON.stringify(normalizedData[key])
+			).map(key => ({
+				field: key,
+				original: data[key],
+				normalized: normalizedData[key]
+			}))
+		});
+		
+		MainForm.setFieldsValue(normalizedData);
+		setEditData(normalizedData);
+	}, [data, MainForm]);
+
+	const goToView = useCallback(() => {
+		changeNotificationState({
+			onYes: () => {
+				setEditData(data);
+				setIsChanged(false);
+				goTo(`/app/view/management-${subject}/${id}`);
+			},
+		});
+	}, [goTo, changeNotificationState, data, subject, id]);
+
+	const fetchData = useCallback(async () => {
+		try {
+			setLoading(true);
+			
+			let response;
+			if (subject === "location") {
+				response = await AdminService.viewLocation({ id });
+			} else if (subject === "stakeholder") {
+				response = await AdminService.viewStakeholder({ id });
+			}
+			
+			if (response?.data) {
+			
+				
+				if (!response.data.id) {
+					console.error(' Warning: Backend response missing UUID (id field). Only datastakeId present:', {
+						datastakeId: response.data.datastakeId,
+						fullData: response.data
+					});
+				}
+				
+				setData(response.data);
+			}
+			
+			setLoading(false);
+		} catch (err) {
+			if (handleError) {
+				handleError(err);
+			}
+			setLoading(false);
+		}
+	}, [id, subject, AdminService, handleError]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	const breadCrumbs = useMemo(() => {
+		if (renderBreadCrumbs) {
+			return renderBreadCrumbs({
+				view: subject === "location" ? "location" : "stakeholder",
+				t,
+				goTo,
+				id,
+				isView: mode === "view",
+				isEdit: mode === "edit",
+			});
+		}
+		return [];
+	}, [renderBreadCrumbs, subject, t, goTo, id, mode]);
+
+	const formOptions = useMemo(() => {
+		const opts = options || {};
+		
+	
+		return {
+			...opts, 
+			
+			countries: opts.countries || [],
+			// category: opts.categoriesOptions || [],
+			locationCategories: opts.locationCategories || [],
+			
+		};
+	}, [options]);
+
+	const handleDelete = useCallback(() => {
+		const subjectName = subject === "location" ? t("location") : t("stakeholder");
+		
+		Modal.confirm({
+			title: t("Delete") + " " + subjectName,
+			icon: <ExclamationCircleOutlined />,
+			content: t(`Are you sure you want to delete this ${subjectName}? This action cannot be undone.`),
+			okText: t("Delete"),
+			okType: "danger",
+			cancelText: t("Cancel"),
+			onOk: async () => {
+				setLoading(true);
+				try {
+					const uuid = data.id;
+					
+					if (!uuid) {
+						throw new Error('UUID not found in subject data');
+					}
+
+					await AdminService.deleteSubject({ 
+						subject, 
+						id: uuid 
+					});
+					
+					message.success(t(`${subjectName} deleted successfully`));
+					goTo(`/app/management/subject/${subject}`);
+				} catch (err) {
+					handleError(err);
+					setLoading(false);
+				}
+			},
+		});
+	}, [subject, data, AdminService, handleError, t, goTo]);
+
+	const actionButtons = useMemo(() => {
+		if (mode === "view") {
+			return [
+				{
+					type: "primary",
+					tooltip: t("Edit"),
+					icon: "Edit",
+					onClick: () => goTo(`/app/edit/management-${subject}/${id}`),
+				},
+				{
+					type: "danger",
+					tooltip: t("Delete"),
+					icon: "Delete",
+					onClick: handleDelete,
+				},
+			];
+		}
+
+		return [
+			{
+				type: "primary",
+				tooltip: t("Save"),
+				icon: "Save",
+				disabled: !isChanged,
+				onClick: () => {
+					MainForm.validateFields()
+						.then(async (formData) => {
+							setLoading(true);
+
+							try {
+								const allowedKeys = conf?.items?.map(item => item.key) || [];
+								const filteredData = {};
+								allowedKeys.forEach(key => {
+									if (formData[key] !== undefined) {
+										filteredData[key] = formData[key];
+									}
+								});
+
+								const uuid = editData.id || data.id;
+								
+								console.log('🔍 Debug - Save operation:', {
+									editDataId: editData.id,
+									dataId: data.id,
+									editDataDatastakeId: editData.datastakeId,
+									dataDatastakeId: data.datastakeId,
+									uuidUsed: uuid,
+									routeParamId: id
+								});
+								
+								if (!uuid) {
+									console.error('UUID not found. Available data:', { 
+										editData, 
+										data,
+										routeParamId: id 
+									});
+									throw new Error('UUID not found in subject data. Please refresh the page and try again.');
+								}
+
+								if (typeof uuid !== 'string' || uuid.length < 20) {
+									console.error('Invalid UUID format detected:', uuid);
+									throw new Error('Invalid UUID format');
+								}
+
+								await AdminService.updateSubject({ 
+									subject, 
+									id: uuid, 
+									data: filteredData 
+								});
+								await fetchData();
+								message.success(t("Information saved successfully"));
+								setNotificationMode(NOTIFICATION_MODE.EMPTY);
+								setIsChanged(false);
+								goTo(`/app/view/management-${subject}/${id}`);
+							} catch (err) {
+								handleError(err);
+							}
+
+							setLoading(false);
+						})
+						.catch(() => {});
+				},
+			},
+			{
+				tooltip: t("Cancel"),
+				icon: "Close",
+				onClick: goToView,
+			},
+		];
+	}, [t, mode, MainForm, goToView, isChanged, editData, fetchData, subject, id, goTo, handleError, AdminService, setNotificationMode, data, conf, handleDelete]);
+
+	const ViewComponent = subject === "location" ? ViewLocation : ViewStakeholder;
+	const EditComponent = subject === "location" ? EditLocation : EditStakeholder;
+
+	return (
+		<div className={mode === "view" ? "daf-view-form" : "daf-edit-form"}>
+			{loading && <Loading background="white" />}
+			<Header 
+				title={data.name || t("Loading...")} 
+				breadcrumbs={breadCrumbs}
+				actionButtons={actionButtons}
+			/>
+			<div className="view-content">
+				<SideBarMenu
+					selectedGroup={selectedGroup}
+					onChange={(v) => setSelectedGroup(v)}
+					t={t}
+					config={configs}
+				/>
+			{mode === "edit" ? (
+				<EditComponent
+					t={t}
+					conf={conf}
+					data={editData}
+					formOptions={formOptions}
+					MainForm={MainForm}
+					setData={setEditData}
+					isChanged={isChanged}
+					setIsChanged={setIsChanged}
+					goToView={goToView}
+					getApiBaseUrl={getApiBaseUrl}
+					getAppHeader={getAppHeader}
+					ajaxForms={ajaxForms}
+				/>
+			) : (
+					<ViewComponent
+						userRoles={userRoles}
+						formOptions={formOptions}
+						conf={conf}
+						data={data}
+						t={t}
+						goTo={goTo}
+						location={location}
+						getRedirectLink={getRedirectLink}
+						accountStatuses={accountStatuses}
+						module={module}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default withFormsProvider(AdminSubjectsViewScreen);
+

package/src/@daf/core/components/Screens/Admin/AdminScreens/index.js

@@ -10,3 +10,4 @@ export { default as AdminAccountsScreen } from "./Accounts.jsx";
 export { default as AdminAccountsViewScreen } from "./AccountsView.jsx";
 export { default as AdminSubjectsScreen } from "./Subjects.jsx";
 export { default as AdminLocationScreen } from "./Location.jsx";
+export { default as AdminSubjectsViewScreen } from "./SubjectsView.jsx";

package/src/@daf/core/components/Screens/Admin/AdminTables/AccountTable/index.jsx

@@ -60,6 +60,7 @@ export default function AccountTable({
 		filtersConfig,
 		getRedirectLink,
 		getData,
+		fetchPendingOnMount: true, 
 	});
 
 	const selectOptions = useMemo(() => {

package/src/@daf/core/components/Screens/Admin/AdminTables/LocationTable/column.js

@@ -0,0 +1,223 @@
+import { Checkbox, Tooltip, Avatar } from "antd";
+import CustomIcon from "../../../../Icon/CustomIcon.jsx";
+import { findOptions } from "../../../../../../../helpers/StringHelper.js";
+import { getNameByLevel } from "../../AdminViews/ViewLocation/helpers.js";
+
+export const getColumns = ({
+	t,
+	goTo = () => {},
+	show = "show",
+	getRedirectLink = () => {},
+	token,
+	selectedLocations,
+	setSelectedLocations,
+	selectOptions,
+	entity,
+}) => {
+	const cols = [
+		{
+			title: "",
+			dataIndex: "select",
+			key: "select",
+			width: 50,
+			show: true,
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+				return (
+					<Checkbox
+						onChange={() =>
+							setSelectedLocations((prev) => {
+								const isSelected = prev.some((p) => p.id === all.id);
+								if (isSelected) {
+									return prev.filter((p) => p.id !== all.id);
+								}
+								return [...prev, all];
+							})
+						}
+						checked={selectedLocations.some((p) => p.id === all.id)}
+						disabled={
+							selectedLocations?.length >= 3 &&
+							!selectedLocations.some((p) => p.id === all.id)
+						}
+					/>
+				);
+			},
+		},
+		{
+			title: t("ID"),
+			dataIndex: "datastakeId",
+			key: "datastakeId",
+			ellipsis: true,
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				return <Tooltip title={value}>{value}</Tooltip>;
+			},
+		},
+		{
+			title: t("Name"),
+			dataIndex: "name",
+			key: "name",
+			ellipsis: true,
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				return <Tooltip title={value}>{value}</Tooltip>;
+			},
+		},
+		{
+			title: t("Category"),
+			dataIndex: "category",
+			key: "category",
+			ellipsis: true,
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const category = findOptions(value, selectOptions?.category || []) || "--";
+
+				return <Tooltip title={category}>{category}</Tooltip>;
+			},
+		},
+		{
+			title: t("Country"),
+			dataIndex: "country",
+			key: "country",
+			ellipsis: true,
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+				const country = findOptions(value, selectOptions?.country || []) || "--";
+
+				return <Tooltip title={country}>{country}</Tooltip>;
+			},
+		},
+	{
+		title: t("Admin Level 1"),
+		dataIndex: "administrativeLevel1",
+		key: "administrativeLevel1",
+		ellipsis: true,
+		show: entity.includes("location"),
+		render: (value, all) => {
+			if (all.empty) {
+				return <div className="daf-default-cell" />;
+			}
+
+			let label;
+			if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
+				label = all?.linking?.SCL?.[value]?.name
+			} else {
+				label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+			}
+
+			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
+		},
+	},
+	{
+		title: t("Admin Level 2"),
+		dataIndex: "administrativeLevel2",
+		key: "administrativeLevel2",
+		show: entity.includes("location"),
+		ellipsis: true,
+		render: (value, all) => {
+			if (all.empty) {
+				return <div className="daf-default-cell" />;
+			}
+
+			let label;
+			if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
+				label = all?.linking?.SCL?.[value]?.name
+			} else {
+				label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+			}
+
+			return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
+		},
+	},
+		{
+			title: t("Sources"),
+			dataIndex: "sources",
+			key: "sources",
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const MAX_SOURCES = 3;
+				const count = value?.length === MAX_SOURCES + 1 ? value?.length : MAX_SOURCES;
+				return (
+					Array.isArray(value) && value?.length > 0 ? <Avatar.Group
+					max={{
+						count: count,
+						style: {
+							color: token.baseGray90,
+							backgroundColor: token.baseGray20,
+							border: `1px solid ${token.baseGray40}`,
+						},
+					}}
+					size={"small"}
+				>
+					{value.map((v, i) => (
+						<Avatar
+							key={i}
+							size={"small"}
+							style={{
+								backgroundColor: token.baseGray20,
+								color: token.baseGray90,
+								border: `1px solid ${token.baseGray40}`,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+							}}
+						>
+							<CustomIcon
+								name="Organisation02"
+								width={18}
+								height={18}
+								color={token.baseGray90}
+							/>
+						</Avatar>
+					))}
+				</Avatar.Group> : '-'
+				);
+			},
+		},
+		{
+			title: "",
+			dataIndex: "actions",
+			key: "actions",
+			width: 60,
+			show: true,
+			render: (value, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				return (
+					<div
+						className="cursor-pointer"
+						onClick={() => {
+							goTo(getRedirectLink(`/app/view/management-location/${all.id}`));						}}
+					>
+						<CustomIcon name="Link" width={18} height={18} />
+					</div>
+				);
+			},
+		},
+	];
+
+	return cols.filter((c) => c[show]);
+};

package/src/@daf/core/components/Screens/Admin/AdminTables/LocationTable/helper.js

@@ -0,0 +1,65 @@
+export const getTabs = ({ t }) => {
+	return [
+		{
+			key: "active",
+			label: t("Active"),
+		},
+		{
+			key: "pending",
+			label: t("Pending"),
+		},
+		{
+			key: 'suspended',
+			label: t("Suspended"),
+		}
+	];
+};
+
+export const selectFiltersConfig = {
+	category: {
+		type: "select",
+		label: "Category",
+		placeholder: (t) => t("Category"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+	country: {
+		type: "select",
+		label: "Country",
+		placeholder: (t) => t("Country"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+	sources: {
+		type: "select",
+		label: "Sources",
+		placeholder: (t) => t("Sources"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+};
+
+export const filtersConfig = {
+	name: "",
+	datastakeId: "",
+};
+
+export const defaultUrlParams = { activeTab: "active" };
+
+export const checkboxConfig = {
+	name: "Name",
+	datastakeId: "ID",
+};
+
+export const getNameByLevel = (data, level) => {
+	const entry = Object.values(data || {}).find(item => item.level === level);
+	return entry;
+  }
+
+