datastake-daf 0.6.793 → 0.6.794

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

@@ -0,0 +1,272 @@
+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 } from "antd";
+import { NOTIFICATION_MODE, useForms, FormsProvider } from "../../../../context/Forms/index.js";
+
+function withFormsProvider(Component) {
+	return function WrappedWithFormsProvider(props) {
+		return (
+			<FormsProvider>
+				<Component {...props} />
+			</FormsProvider>
+		);
+	};
+}
+
+/**
+ * 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 = [],
+	} = 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 } = 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(() => {
+		MainForm.setFieldsValue(data);
+		setEditData(data);
+	}, [data, MainForm]);
+
+	const goToView = useCallback(() => {
+		changeNotificationState({
+			onYes: () => {
+				setEditData(data);
+				setIsChanged(false);
+				goTo(`/app/management/subject/${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) {
+				console.log('📦 Backend response data:', {
+					id: response.data.id,
+					datastakeId: response.data.datastakeId,
+					name: response.data.name,
+					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(() => {
+		return {
+			countries: options?.countries || [],
+			category: options?.category || [],
+		};
+	}, [options]);
+
+	const actionButtons = useMemo(() => {
+		if (mode === "view") {
+			return [
+				{
+					type: "primary",
+					tooltip: t("Edit"),
+					icon: "Edit",
+					onClick: () => goTo(`/app/management/subject/${subject}/edit/${id}`),
+				},
+			];
+		}
+
+		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 internalId = data.id;
+								if (!internalId) {
+									throw new Error('Internal ID not found');
+								}
+
+								await AdminService.updateSubject({ 
+									subject, 
+									id: internalId, 
+									data: filteredData 
+								});
+								await fetchData();
+								message.success(t("Information saved successfully"));
+								setNotificationMode(NOTIFICATION_MODE.EMPTY);
+								setIsChanged(false);
+								goTo(`/app/management/subject/${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]);
+
+	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}
+					/>
+				) : (
+					<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/management/subject/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;
+  }
+
+