udp-react-enterprise-component-library 25.18.1-beta.36 → 25.18.1-beta.37

package/dist/{UdpTransactionsPage-D6lRI165.js → UdpTransactionsPage-DKF6PKUA.js}

@@ -7,10 +7,11 @@ import { i as useHandleAxiosSnackbar } from "./apiHelpers-B_cn3sZo.js";
 import { t as useUser } from "./useUser-wpHGo6jU.js";
 import { n as useAxiosMutate, t as apiMutate } from "./useAxiosMutate-DcLxzykX.js";
 import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-5Hp3qpk6.js";
-import { M as TransactionActionTypeEnums, N as TransactionEventTypeEnums, P as TransactionUiActionTypeEnums, z as UdpSearchEnums } from "./unitySystemEnums-DM5vXR_m.js";
+import { r as getSanitizedName } from "./entityUtilities-_8w-Zjs3.js";
+import { B as UdpSearchEnums, F as TransactionUiActionTypeEnums, N as TransactionActionTypeEnums, P as TransactionEventTypeEnums, n as CardinalityTypeEnums } from "./unitySystemEnums-e5F9Jr7m.js";
 import { t as useCatalogStore } from "./catalogStore-DP2GxpTJ.js";
 import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
-import { S as getIconFromName } from "./TreeUtilities-CujOFOPm.js";
+import { S as getIconFromName } from "./TreeUtilities-kiPupulY.js";
 import { n as SideSheet } from "./SideSheet-C-rILQqR.js";
 import { t as useAxiosGet } from "./useAxiosGet-vvPjwB4W.js";
 import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
@@ -18,27 +19,31 @@ import { t as UdpTabs } from "./UdpTabs-DVZGEwOC.js";
 import { t as PageContainer } from "./PageContainer-CT3n_ngH.js";
 import { t as Adornment } from "./Adornment-Ciq1X7he.js";
 import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
+import { t as FluentDatePicker } from "./FluentDatePicker-C6WEywwM.js";
 import { t as FluentDialog } from "./FluentDialog-B5ZxvX1E.js";
 import { t as LinearProgress$1 } from "./LinearProgress-DM2DNWCe.js";
 import { t as FluentTextField } from "./FluentTextField-CXvZawOG.js";
+import { t as useAuthedUser } from "./useAuthedUser-CN4neRNZ.js";
 import { t as SearchMethodUdpGrid } from "./SearchMethodUdpGrid-QU4FZ0Gk.js";
 import { t as Divider$1 } from "./Divider-DNtKMiBL.js";
-import { r as getLocalizedDateTimeString } from "./dateUtils-ChKgbJ9U.js";
+import { i as getLocalizedDateTimeString, t as formatDate } from "./dateUtils-ftAbP-Mv.js";
 import { t as EmptyStateDisplay } from "./EmptyStateDisplay-Dpho9v6S.js";
 import { n as AmbientList } from "./dataDisplay-v5yiN4js.js";
-import { t as FileViewer } from "./fileViewer-Dk6GMaSl.js";
+import { t as FileViewer } from "./fileViewer-8-Eh4vLL.js";
+import { n as UdpTabPanel } from "./tabs-DjfuHMHP.js";
+import { n as UdpTimeline } from "./timeline-CuKsHylI.js";
 import { t as UdpActionCard } from "./UdpActionCard-UM7xbcyR.js";
-import React$1, { React as React$2, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CircularProgress, makeStyles } from "@material-ui/core";
+import { t as Attachments } from "./uploader-C36UIFAF.js";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { CircularProgress, FormControlLabel, LinearProgress, Switch, makeStyles } from "@material-ui/core";
 import { useSnackbar } from "notistack";
 import { ContactIcon, DocumentIcon, FileImageIcon, PDFIcon, ViewIcon, WordDocumentIcon } from "@fluentui/react-icons";
 import { useTranslation } from "react-i18next";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import jsonLogic from "json-logic-js";
-import { ConfigService } from "udp-react-stencil-component-library";
+import { ConfigService, UdpAttachmentItem, UdpTimelineConnector, UdpTimelineDot, UdpTimelineItem, UdpTimelineSeparator } from "udp-react-stencil-component-library";
 import "./udp/pages/UdpTransactionsPage/sidesheets/WorkflowActions.css";
-import "date-fns/locale";
 import "./udp/pages/UdpTransactionsPage/sidesheets/EditTransaction.css";
 import "./udp/pages/UdpTransactionsPage/components/EditTransactionDetailsFooterItem.css";
 import "./udp/pages/UdpTransactionsPage/UdpTransactionsPage.css";
@@ -113,6 +118,16 @@ const useTransactionEngine = (transactionTypeId) => {
 	const getUiActionRenderPageId = useCallback((uiActionType) => {
 		return (transactionType?.udpTransactionTypeUdpTransactionUiAction?.find((action) => action.transactionUiActionTypeId === uiActionType))?.parameters?.pageId || null;
 	}, [transactionType]);
+	const getTransactionTypeLabel = useCallback((udpTransaction) => {
+		if (!transactionType?.domainFieldLabel) return null;
+		return udpTransaction?.entityBusinessObject ? udpTransaction.entityBusinessObject[transactionType.domainFieldLabel] : null;
+	}, [transactionType]);
+	const checkIfTransactionIsClosed = useCallback((udpTransaction) => {
+		if (!hasClosedStatus) return false;
+		const closedStatus = transactionType?.udpTransactionTypeUdpTransactionTypeStatus?.find((status) => status.isClosedStatus);
+		if (!closedStatus) return false;
+		return closedStatus.transactionTypeStatusId === udpTransaction?.currentStatusId;
+	}, [hasClosedStatus, transactionType]);
 	useEffect(() => {
 		if (catalogsMap && currentApiCatalogId && transactionType) {
 			const apiCatalog = catalogsMap[currentApiCatalogId];
@@ -135,7 +150,9 @@ const useTransactionEngine = (transactionTypeId) => {
 		getRequiredFields,
 		hasClosedStatus,
 		transactionTypeGridColumns,
-		getUiActionRenderPageId
+		getUiActionRenderPageId,
+		checkIfTransactionIsClosed,
+		getTransactionTypeLabel
 	};
 };
 
@@ -146,7 +163,7 @@ const UdpTransactionGrid = (props) => {
 	const [dialogOpen, setDialogOpen] = useState(false);
 	const [selectedTransaction, setSelectedTransaction] = useState(null);
 	const { t } = useTranslation();
-	const { hasRevisions, transactionTypeGridColumns } = useTransactionEngine(transactionTypeId);
+	const { hasRevisions, transactionTypeGridColumns, getUiActionRenderPageId } = useTransactionEngine(transactionTypeId);
 	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
 	const [{ data, loading: deleteLoading, error: deleteError }, deleteTransaction] = useAxiosMutate(`${ConfigService$1.productV1ApiUrl}`, `udptransaction/${selectedTransaction?.transactionId}`, { method: "delete" }, {});
 	const handleDialogClose = () => {
@@ -171,11 +188,15 @@ const UdpTransactionGrid = (props) => {
 		handleSuccessSnackbar,
 		t
 	]);
+	const pdfViewPageId = useMemo(() => {
+		return getUiActionRenderPageId(TransactionUiActionTypeEnums.Render_View_Pdf_Page);
+	}, [getUiActionRenderPageId]);
 	const columnDefs = useMemo(() => {
 		const initialColumnDefs = [
 			{
 				headerName: t("Transaction Id"),
-				field: "transactionId"
+				field: "transactionId",
+				hide: true
 			},
 			{
 				headerName: t("Created On"),
@@ -234,7 +255,8 @@ const UdpTransactionGrid = (props) => {
 						iconName: "view",
 						handleOnClick: (e, params) => {
 							openViewTransaction(params?.data);
-						}
+						},
+						disabled: !pdfViewPageId
 					},
 					{
 						id: 2,
@@ -246,6 +268,15 @@ const UdpTransactionGrid = (props) => {
 					},
 					{
 						id: 3,
+						title: t("Create Revision"),
+						iconName: "add",
+						handleOnClick: (e, params) => {
+							openCreateRevision(params?.data);
+						},
+						disabled: !hasRevisions
+					},
+					{
+						id: 4,
 						title: t("Cancel"),
 						iconName: "close16",
 						handleOnClick: (e, params) => {
@@ -277,30 +308,9 @@ const UdpTransactionGrid = (props) => {
 		openAttachmentTransaction,
 		openWorkflowActionTransaction,
 		domainColumnFormatters,
-		transactionTypeGridColumns
-	]);
-	const secondaryActionButtons = useMemo(() => {
-		const buttons = [{
-			label: t("Print"),
-			iconName: "printer",
-			onClick: () => {}
-		}];
-		if (hasRevisions) buttons.unshift({
-			label: t("Create Revision"),
-			iconName: "edit",
-			onClick: () => {
-				const selectedNodes = gridApiRef?.current?.getSelectedNodes();
-				const selectedData = selectedNodes?.length === 1 ? selectedNodes[0].data : null;
-				if (selectedData) openCreateRevision(selectedData);
-				else console.warn("Please select a row to create a revision.");
-			}
-		});
-		return buttons;
-	}, [
-		hasRevisions,
-		t,
+		transactionTypeGridColumns,
 		openCreateRevision,
-		gridApiRef
+		hasRevisions
 	]);
 	const headerConfig = {
 		title: domainName,
@@ -310,8 +320,7 @@ const UdpTransactionGrid = (props) => {
 			onClick: () => {
 				openAddTransaction();
 			}
-		},
-		secondaryActionButtons
+		}
 	};
 	const gridFunctions = [
 		{ name: "agGridExport" },
@@ -321,7 +330,7 @@ const UdpTransactionGrid = (props) => {
 	const gridOptions = useMemo(() => {
 		return {
 			pagination: true,
-			rowSelection: { mode: "singleRow" }
+			rowSelection: "none"
 		};
 	}, []);
 	const searchMethodConfig = useMemo(() => {
@@ -353,14 +362,14 @@ const UdpTransactionGrid = (props) => {
 			customSearchObject: combinedSearchObject
 		};
 	}, [transactionTypeId, searchMethodObject]);
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, transactionTypeLoading && /* @__PURE__ */ React$1.createElement(LinearProgress$1, null), /* @__PURE__ */ React$1.createElement(SearchMethodUdpGrid, {
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, transactionTypeLoading && /* @__PURE__ */ React.createElement(LinearProgress$1, null), /* @__PURE__ */ React.createElement(SearchMethodUdpGrid, {
 		gridHeaderConfig: headerConfig,
 		gridFunctions,
 		gridOptions,
 		columnDefs,
 		searchMethodConfig,
 		gridApiCallback: handleGridApiCallback
-	}), /* @__PURE__ */ React$1.createElement(FluentDialog, {
+	}), /* @__PURE__ */ React.createElement(FluentDialog, {
 		title: t(`Cancel Transaction`),
 		message: `Are you sure you want to cancel the transaction for ${selectedTransaction?.entityBusinessKey || ""}?`,
 		labelOne: t("Confirm"),
@@ -378,7 +387,7 @@ var UdpTransactionGrid_default = UdpTransactionGrid;
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/ViewTransaction.jsx
 const ViewTransaction = (props) => {
 	const { transaction } = props;
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(FileViewer, {
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileViewer, {
 		data: {
 			filePath: "",
 			fileExtension: "pdf"
@@ -389,8 +398,8 @@ const ViewTransaction = (props) => {
 var ViewTransaction_default = ViewTransaction;
 
 //#endregion
-//#region src/udp/pages/UdpTransactionsPage/sidesheets/AttachmentList.jsx
-const AttachmentList = (props) => {
+//#region src/udp/pages/UdpTransactionsPage/components/AttachmentTransactionAttachmentList.jsx
+const AttachmentTransactionAttachmentList = (props) => {
 	const { attachments, setSelectedAttachment } = props;
 	const formattedAttachments = useMemo(() => {
 		return attachments.map((attachment) => ({
@@ -421,12 +430,12 @@ const AttachmentList = (props) => {
 		maxHeight: 900
 	}));
 };
-var AttachmentList_default = AttachmentList;
+var AttachmentTransactionAttachmentList_default = AttachmentTransactionAttachmentList;
 
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/AttachmentTransaction.jsx
 const AttachmentTransaction = (props) => {
-	const { transaction } = props;
+	const { transaction, attachmentRef } = props;
 	const [selectedAttachment, setSelectedAttachment] = useState("");
 	const attachments = transaction?.udpTransactionUdpTransactionAttachment;
 	const [{ data: attachmentFileInfo }, refetchattachmentFileInfo] = useAxiosGet(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `UdpTransactionAttachment/${selectedAttachment?.transactionAttachmentId}/udpDriveFile/download`, {}, true);
@@ -486,7 +495,21 @@ const AttachmentTransaction = (props) => {
 		},
 		divider: { "& MuiDivider-root": { backgroundColor: "var(--gray-02)" } }
 	}))();
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classStyles.sidesheet }, /* @__PURE__ */ React.createElement("div", { className: classStyles.attachmentListContainer }, /* @__PURE__ */ React.createElement("div", { className: classStyles.attachmentListHeader }, /* @__PURE__ */ React.createElement("p", { className: classStyles.attachmentListHeaderPrimaryText }, "Attachments"), /* @__PURE__ */ React.createElement("p", { className: classStyles.attachmentListHeaderSecondaryText }, attachments.length + " file(s) attached")), /* @__PURE__ */ React.createElement("div", { className: classStyles.divider }, /* @__PURE__ */ React.createElement(Divider$1, null)), /* @__PURE__ */ React.createElement(AttachmentList_default, {
+	useImperativeHandle(attachmentRef, () => ({ downloadSelectedFile: async () => {
+		if (!selectedAttachment) return;
+		try {
+			const url = (await apiMutate(ConfigService$1.productV1ApiUrl, `UdpTransactionAttachment/${selectedAttachment.transactionAttachmentId}/udpDriveFile/download`, {})).data.link;
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = selectedAttachment.fileName ?? selectedAttachment.name;
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		} catch (e) {
+			console.error("Download failed", e);
+		}
+	} }));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classStyles.sidesheet }, /* @__PURE__ */ React.createElement("div", { className: classStyles.attachmentListContainer }, /* @__PURE__ */ React.createElement("div", { className: classStyles.attachmentListHeader }, /* @__PURE__ */ React.createElement("p", { className: classStyles.attachmentListHeaderPrimaryText }, "Attachments"), /* @__PURE__ */ React.createElement("p", { className: classStyles.attachmentListHeaderSecondaryText }, attachments.length + " file(s) attached")), /* @__PURE__ */ React.createElement("div", { className: classStyles.divider }, /* @__PURE__ */ React.createElement(Divider$1, null)), /* @__PURE__ */ React.createElement(AttachmentTransactionAttachmentList_default, {
 		transaction,
 		attachments,
 		setSelectedAttachment
@@ -501,8 +524,8 @@ var AttachmentTransaction_default = AttachmentTransaction;
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/components/UdpTransactionCustomPage.jsx
 const UdpTransactionCustomPage = (props) => {
-	const { pageId, transactionTypeId, transactionUiActionType, formRef, setHandleOnSubmit, transaction, transactionTypeTransactionActionId } = props;
-	const { getUiActionRenderPageId } = useTransactionEngine(transactionTypeId);
+	const { pageId, transactionTypeId, transactionUiActionType, formRef, transaction, transactionTypeTransactionActionId } = props;
+	const { getUiActionRenderPageId, getHiddenFields, getRequiredFields } = useTransactionEngine(transactionTypeId);
 	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
 	const { t } = useTranslation();
 	const executeCreateTransactionAction = useCallback(async (data) => apiMutate(ConfigService.productV1ApiUrl, `udpTransaction/transactionType/${transactionTypeId}/create`, { method: "post" }, data), [transactionTypeId]);
@@ -548,13 +571,12 @@ const UdpTransactionCustomPage = (props) => {
 		t,
 		transactionTypeTransactionActionId
 	]);
-	useEffect(() => {
-		if (setHandleOnSubmit) setHandleOnSubmit(() => formRef?.current?.form?.submit);
-	}, [
-		onSubmit,
-		setHandleOnSubmit,
-		formRef
-	]);
+	const isFieldRequired = useCallback((fieldName) => {
+		return getRequiredFields(transaction)?.includes(fieldName);
+	}, [getRequiredFields, transaction]);
+	const isFieldHidden = useCallback((fieldName) => {
+		return getHiddenFields(transaction)?.includes(fieldName);
+	}, [getHiddenFields, transaction]);
 	const transactionPageId = useMemo(() => {
 		if (pageId) return pageId;
 		return getUiActionRenderPageId(transactionUiActionType);
@@ -564,13 +586,17 @@ const UdpTransactionCustomPage = (props) => {
 		pageId
 	]);
 	if (!transactionPageId) return null;
-	return /* @__PURE__ */ React$1.createElement(Form, {
+	return /* @__PURE__ */ React.createElement(Form, {
 		onSubmit,
 		ref: formRef
-	}, /* @__PURE__ */ React$1.createElement(PageContainer, {
+	}, /* @__PURE__ */ React.createElement(PageContainer, {
 		pageId: transactionPageId,
 		updateLocationState: false,
-		widgetParams: transaction
+		widgetParams: {
+			transaction,
+			isFieldRequired,
+			isFieldHidden
+		}
 	}));
 };
 var UdpTransactionCustomPage_default = UdpTransactionCustomPage;
@@ -579,7 +605,7 @@ var UdpTransactionCustomPage_default = UdpTransactionCustomPage;
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/WorkflowActions.jsx
 const TransactionActionButton = ({ icon, primaryText, secondaryText, onClick, action }) => {
 	const actionCardIcon = useMemo(() => getIconFromName(icon), [icon]);
-	return /* @__PURE__ */ React$2.createElement(UdpActionCard, {
+	return /* @__PURE__ */ React.createElement(UdpActionCard, {
 		icon: actionCardIcon ? actionCardIcon : DocumentIcon,
 		primaryText,
 		secondaryText,
@@ -594,7 +620,6 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 	const [selectedAction, setSelectedAction] = useState(null);
 	const [sideSheetOpen, setSideSheetOpen] = useState(false);
 	const [loading, setLoading] = useState(false);
-	const [handleSubmitAction, setHandleSubmitAction] = useState(null);
 	const formRef = useRef(null);
 	const { getTransactionTypeTransactionActions } = useTransactionEngine(transaction.transactionTypeId);
 	const handleOnCloseSideSheet = useCallback(() => {
@@ -602,7 +627,7 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 	}, []);
 	const handleSubmitWorkflowAction = useCallback(async () => {
 		setLoading(true);
-		if (handleSubmitAction) await handleSubmitAction();
+		await formRef.current?.form?.submit();
 		setLoading(false);
 		handleOnCloseSideSheet();
 		closeSideSheet();
@@ -610,8 +635,8 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 	}, [
 		handleOnCloseSideSheet,
 		refreshGridData,
-		handleSubmitAction,
-		closeSideSheet
+		closeSideSheet,
+		formRef
 	]);
 	const transactionTypeTransactionActions = useMemo(() => {
 		return getTransactionTypeTransactionActions(transaction, TransactionEventTypeEnums.Sidesheet) || [];
@@ -675,7 +700,7 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 	}, [handleDialogOpen]);
 	const TransactionActionButtons = useMemo(() => {
 		if (!transactionTypeTransactionActions.length) return null;
-		return transactionTypeTransactionActions?.map((action) => /* @__PURE__ */ React$2.createElement(TransactionActionButton, {
+		return transactionTypeTransactionActions?.map((action) => /* @__PURE__ */ React.createElement(TransactionActionButton, {
 			key: action.transactionTypeTransactionActionId,
 			primaryText: action.name,
 			secondaryText: action.description,
@@ -684,7 +709,7 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 			action
 		}));
 	}, [transactionTypeTransactionActions, handleOnActionClick]);
-	return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement("div", { className: "transaction-action-buttons-container" }, TransactionActionButtons), dialogUserStrings && /* @__PURE__ */ React$2.createElement(FluentDialog, {
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "transaction-action-buttons-container" }, TransactionActionButtons), dialogUserStrings && /* @__PURE__ */ React.createElement(FluentDialog, {
 		title: i18n(`Are you sure you want to proceed with \"${dialogUserStrings.title}\"?`),
 		message: dialogUserStrings.message,
 		labelOne: i18n("Confirm"),
@@ -693,7 +718,7 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 		actionTwo: handleDialogClose,
 		open: dialogOpen,
 		handleClose: handleDialogClose
-	}), /* @__PURE__ */ React$2.createElement(SideSheet, {
+	}), /* @__PURE__ */ React.createElement(SideSheet, {
 		open: sideSheetOpen,
 		title: "",
 		onClose: handleOnCloseSideSheet,
@@ -702,27 +727,131 @@ const WorkflowActions = ({ transaction, closeSideSheet, refreshGridData }) => {
 		onSubmit: handleSubmitWorkflowAction,
 		progress: loading,
 		variant: "indeterminate"
-	}, selectedAction && selectedAction.parameters?.pageId && /* @__PURE__ */ React$2.createElement(UdpTransactionCustomPage_default, {
+	}, selectedAction && selectedAction.parameters?.pageId && /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
 		pageId: selectedAction.parameters.pageId,
 		transaction,
 		formRef,
-		setHandleOnSubmit: setHandleSubmitAction,
 		transactionTypeTransactionActionId: selectedAction.transactionTypeTransactionActionId
 	})));
 };
 var WorkflowActions_default = WorkflowActions;
 
+//#endregion
+//#region src/uploader/utils/allowedFileProperties.js
+const MAX_FILE_SIZE_MB = 30;
+const allowedExtensions = [
+	"pdf",
+	"xlsx",
+	"xls",
+	"xlsm",
+	"csv",
+	"jpg",
+	"jpeg",
+	"png",
+	"tif",
+	"tiff",
+	"doc",
+	"docx",
+	"docm",
+	"ppt",
+	"pptm",
+	"rtf"
+];
+
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/EditTransactionHeaderItem.jsx
 const EditTransactionHeaderItem = (props) => {
 	const { label, value, statusChip } = props;
-	return /* @__PURE__ */ React$1.createElement("div", { className: "transaction-sidesheet-header-item" }, /* @__PURE__ */ React$1.createElement(Typography$1, { variant: "caption" }, label), statusChip ? /* @__PURE__ */ React$1.createElement("div", { className: "transaction-sidesheet-header-item-status" }, /* @__PURE__ */ React$1.createElement(StatusChip, statusChip)) : /* @__PURE__ */ React$1.createElement(Typography$1, { variant: "body1" }, value));
+	return /* @__PURE__ */ React.createElement("div", { className: "transaction-sidesheet-header-item" }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, label), statusChip ? /* @__PURE__ */ React.createElement("div", { className: "transaction-sidesheet-header-item-status" }, /* @__PURE__ */ React.createElement(StatusChip, statusChip)) : /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, value));
 };
 var EditTransactionHeaderItem_default = EditTransactionHeaderItem;
 
 //#endregion
-//#region src/udp/pages/UdpTransactionsPage/sidesheets/transactionNote/TransactionNote.jsx
-const useStyles$1 = makeStyles((theme) => ({
+//#region src/udp/pages/UdpTransactionsPage/components/transactionHistory/TransactionTimelineItem.jsx
+const TransactionTimelineItem = (props) => {
+	const { title, description, date, status, onClick } = props;
+	return /* @__PURE__ */ React.createElement(UdpTimelineItem, {
+		dotShape: "default",
+		onItemClick: onClick,
+		clickable: true,
+		statusLabel: status
+	}, /* @__PURE__ */ React.createElement(UdpTimelineSeparator, { slot: "separator" }, /* @__PURE__ */ React.createElement(UdpTimelineConnector, null), /* @__PURE__ */ React.createElement(UdpTimelineDot, {
+		color: "primary",
+		shape: "default",
+		size: "medium"
+	})), /* @__PURE__ */ React.createElement("span", { slot: "title" }, title), /* @__PURE__ */ React.createElement("span", { slot: "content" }, date), /* @__PURE__ */ React.createElement("span", { slot: "caption" }, description));
+};
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/transactionHistory/TransactionTimeline.jsx
+const TransactionTimeline = (props) => {
+	const { transactionId } = props;
+	const { t } = useTranslation();
+	const searchObj = useMemo(() => {
+		return {
+			eagerLoad: true,
+			pageNumber: 0,
+			pageSize: 100,
+			filterElements: [{
+				searchField: "transactionId",
+				searchValue: transactionId,
+				searchOperator: "="
+			}],
+			orderElements: [{
+				sortColumn: "createdOn",
+				sortDirection: "desc"
+			}],
+			getAll: true
+		};
+	}, [transactionId]);
+	const [{ data: transactionHistory, loading: isLoading }, fetchTransactionHistory] = useAxiosMutate(ConfigService$1.productV1ApiUrl, `UdpTransactionHistory/search`, {
+		method: "post",
+		data: searchObj
+	});
+	useEffect(() => {
+		fetchTransactionHistory();
+	}, [fetchTransactionHistory]);
+	return /* @__PURE__ */ React.createElement("div", null, isLoading ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LinearProgress, null)) : transactionHistory?.pageList?.length > 0 ? /* @__PURE__ */ React.createElement(UdpTimeline, null, transactionHistory?.pageList?.map((item, index) => /* @__PURE__ */ React.createElement(TransactionTimelineItem, {
+		key: index,
+		title: item?.udpTransactionHistoryUdpTransactionTypeTransactionAction?.name ?? item?.udpTransactionHistoryUdpTransactionEventType?.name,
+		description: item?.changedByName ? `By ${item?.changedByName}` : null,
+		date: item?.createdOn ? formatDate(item?.createdOn, "dd/mm/yyyy") : null,
+		status: item?.udpTransactionHistoryUdpTransactionTypeStatus?.name
+	}))) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: t("No History") })));
+};
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/transactionAttachment/TransactionAttachment.jsx
+const TransactionAttachment = (props) => {
+	const { attachment, isLastItem } = props;
+	const [{ data: attachmentWithDownloadLink, loading: isLoading }] = useAxiosGet(ConfigService.productV1ApiUrl, `UdpTransactionAttachment/${attachment?.transactionAttachmentId}/udpDriveFile/download`, {}, !!!attachment?.transactionAttachmentId);
+	return /* @__PURE__ */ React.createElement(UdpAttachmentItem, {
+		loading: isLoading,
+		fileName: attachment?.fileName,
+		fileSize: attachment?.fileSize,
+		fileExtension: attachment?.extension,
+		uploadedBy: attachment?.updatedByName,
+		uploadedDate: attachment?.lastUpdated,
+		isLastItem,
+		downloadUrl: attachmentWithDownloadLink?.link
+	});
+};
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/transactionAttachment/TransactionAttachments.jsx
+const TransactionAttachments = (props) => {
+	const { transactionAttachments, isLoading } = props;
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement("div", null, isLoading ? /* @__PURE__ */ React.createElement(LinearProgress, null) : /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, transactionAttachments?.pageList?.length > 0 ? transactionAttachments?.pageList?.map((attachment, index) => /* @__PURE__ */ React.createElement(TransactionAttachment, {
+		key: index,
+		attachment,
+		isLastItem: index === transactionAttachments?.pageList?.length - 1
+	})) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: t("No Attachments") }))));
+};
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/transactionNote/TransactionNote.jsx
+const useStyles$2 = makeStyles((theme) => ({
 	titleContainer: {
 		display: "flex",
 		gap: "8px",
@@ -746,40 +875,122 @@ const useStyles$1 = makeStyles((theme) => ({
 }));
 const TransactionNote = (props) => {
 	const { onClick, note } = props;
-	const classes = useStyles$1();
-	return /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(AmbientCard, {
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientCard, {
 		fullWidth: true,
 		adornment: "info",
 		noAdornment: false,
-		customAdornment: /* @__PURE__ */ React$1.createElement(Adornment, { color: "info" }),
+		customAdornment: /* @__PURE__ */ React.createElement(Adornment, { color: "info" }),
 		removeTopLayoutUnit: true,
 		removePadding: true,
 		lastChildBottomPadding: "0px",
 		cardContentHeight: "100%"
-	}, /* @__PURE__ */ React$1.createElement("div", {
+	}, /* @__PURE__ */ React.createElement("div", {
 		className: classes.card,
 		onClick
-	}, /* @__PURE__ */ React$1.createElement("div", { className: classes.titleContainer }, /* @__PURE__ */ React$1.createElement(Typography$1, { variant: "h6" }, note?.subject ?? "Transaction Note"), /* @__PURE__ */ React$1.createElement(Typography$1, {
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.titleContainer }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, note?.subject ?? "Transaction Note"), /* @__PURE__ */ React.createElement(Typography$1, {
 		variant: "caption",
 		className: classes.captionText
-	}, getLocalizedDateTimeString(note?.createdOn))), /* @__PURE__ */ React$1.createElement(Typography$1, { variant: "body1" }, note?.content ?? "This is a placeholder for the transaction note component."), /* @__PURE__ */ React$1.createElement("div", { className: classes.chipContainer }, /* @__PURE__ */ React$1.createElement(StatusChip, {
+	}, getLocalizedDateTimeString(note?.createdOn))), /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, note?.content ?? "This is a placeholder for the transaction note component."), /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, /* @__PURE__ */ React.createElement(StatusChip, {
 		label: note?.userDisplayName,
 		color: "default",
 		variant: "outline",
-		icon: /* @__PURE__ */ React$1.createElement(ContactIcon, null)
+		icon: /* @__PURE__ */ React.createElement(ContactIcon, null)
 	})))));
 };
 
 //#endregion
-//#region src/udp/pages/UdpTransactionsPage/sidesheets/transactionNote/TransactionNotes.jsx
+//#region src/udp/pages/UdpTransactionsPage/components/transactionNote/TransactionNoteForm.jsx
+const useStyles$1 = makeStyles((theme) => ({ loading: { marginBottom: theme.spacing(1) } }));
+const TransactionNoteFormComponent = (props, ref) => {
+	const { initialValues, viewOnly, businessObjectKey, closeSideSheet, noteTypes, fetchNoteTypesLoading } = props;
+	const [isLoading, setIsLoading] = useState(false);
+	const user = useAuthedUser();
+	const { handleSuccessSnackbar, handleErrorSnackbar } = useHandleAxiosSnackbar();
+	const { t } = useTranslation();
+	const classes = useStyles$1();
+	const addTransactionNote = useCallback(async (data) => apiMutate(ConfigService$1.productV1ApiUrl, `UdpNote`, { method: "post" }, data), []);
+	const addNoteFiledFor = useCallback(async (data) => apiMutate(ConfigService$1.productV1ApiUrl, `UdpNoteFiledFor`, { method: "post" }, data), []);
+	const handleSubmitForm = useCallback(async (values) => {
+		setIsLoading(true);
+		await addTransactionNote({ data: {
+			typeCode: values?.noteType?.code,
+			subject: values?.subject,
+			content: values?.content,
+			unityUserID: user?.id,
+			userDisplayName: user?.name ?? ""
+		} }).then(async (res) => {
+			console.log("Transaction Note response: ", { res });
+			if (res?.data?.id) await addNoteFiledFor({ data: {
+				entityBusinessKey: businessObjectKey,
+				noteId: res?.data?.id
+			} }).then(() => {
+				handleSuccessSnackbar(t("Transaction note has been added successfully."));
+				if (closeSideSheet) closeSideSheet();
+			});
+		}).catch((res) => {
+			handleErrorSnackbar(res, t("Unable to add transaction note."));
+		});
+		setIsLoading(false);
+	}, [
+		addNoteFiledFor,
+		addTransactionNote,
+		businessObjectKey,
+		handleErrorSnackbar,
+		handleSuccessSnackbar,
+		t,
+		user,
+		closeSideSheet
+	]);
+	return /* @__PURE__ */ React.createElement("div", null, fetchNoteTypesLoading ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LinearProgress$1, null)) : /* @__PURE__ */ React.createElement("div", null, isLoading && /* @__PURE__ */ React.createElement("div", { className: classes.loading }, /* @__PURE__ */ React.createElement(LinearProgress$1, null)), /* @__PURE__ */ React.createElement(Form, {
+		ref,
+		onSubmit: handleSubmitForm,
+		initialValues,
+		id: `transactionNoteForm-${businessObjectKey}`,
+		render: ({ submitting }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Field, {
+			component: FluentTextFieldAutoComplete,
+			id: "noteType",
+			name: "noteType",
+			optionKey: "name",
+			disableClearable: true,
+			label: t("Type"),
+			options: noteTypes ?? [],
+			disabled: viewOnly || submitting,
+			onChange: () => {},
+			required: true
+		}), /* @__PURE__ */ React.createElement(Field, {
+			component: FluentTextField,
+			id: "subject",
+			name: "subject",
+			label: t("Subject"),
+			disabled: viewOnly || submitting,
+			onChange: () => {},
+			required: true
+		}), /* @__PURE__ */ React.createElement(Field, {
+			component: FluentTextField,
+			id: "content",
+			name: "content",
+			label: t("Details"),
+			onChange: () => {},
+			multiline: true,
+			rows: 5,
+			maxRows: 10,
+			disabled: viewOnly || submitting,
+			required: true
+		}), viewOnly && /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, t("Viewing note details. Use the Add Note action to create a new entry.")))
+	})));
+};
+const TransactionNoteForm = forwardRef(TransactionNoteFormComponent);
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/transactionNote/TransactionNotes.jsx
 const useStyles = makeStyles((theme) => ({ notes: {
 	display: "flex",
 	flexDirection: "column",
-	gap: theme.spacing(1),
-	margin: theme.spacing(2)
+	gap: theme.spacing(1)
 } }));
 const TransactionNotes = (props) => {
-	const { businessObjectKey = `Univerus.Unity.CPS.Domain.Models.UdpTransaction|0314A512-D7AF-4B46-A5F1-FBD34FBAA694` } = props;
+	const { businessObjectKey, refreshNotes, setRefreshNotes, noteTypes, fetchNoteTypesLoading } = props;
 	const [openSideSheet, setOpenSideSheet] = useState(false);
 	const [selectedNote, setSelectedNote] = useState(null);
 	const [noteList, setNoteList] = useState([]);
@@ -799,11 +1010,10 @@ const TransactionNotes = (props) => {
 			getAll: true
 		};
 	}, [businessObjectKey]);
-	const [{ data: noteFiledFor, loading: fetchNoteFiledForLoading }, fetchNoteFiledFor] = useAxiosMutate(process.env.REACT_APP_PRODUCT_API_BASE, `UdpNoteFiledFor/search`, {
+	const [{ data: noteFiledFor, loading: fetchNoteFiledForLoading }, fetchNoteFiledFor] = useAxiosMutate(ConfigService$1.productV1ApiUrl, `UdpNoteFiledFor/search`, {
 		method: "post",
 		data: noteFileForSearchObj
 	});
-	const [{ data: noteTypes, loading: fetchNoteTypesLoading }] = useAxiosGet(ConfigService$1.productV1ApiUrl, `UdpNoteType`, {});
 	const handleViewNote = useCallback((note) => {
 		setSelectedNote(note);
 		setOpenSideSheet(true);
@@ -812,12 +1022,19 @@ const TransactionNotes = (props) => {
 		setOpenSideSheet(false);
 		setSelectedNote(null);
 	}, []);
-	const formattedSelectedNote = useMemo(() => {
-		return selectedNote;
-	}, [selectedNote]);
 	useEffect(() => {
 		fetchNoteFiledFor();
 	}, [fetchNoteFiledFor]);
+	useEffect(() => {
+		if (refreshNotes) {
+			fetchNoteFiledFor();
+			setRefreshNotes(false);
+		}
+	}, [
+		fetchNoteFiledFor,
+		refreshNotes,
+		setRefreshNotes
+	]);
 	useEffect(() => {
 		if (!fetchNoteFiledForLoading && noteFiledFor?.pageList?.length > 0) {
 			const searchObj = {
@@ -838,55 +1055,31 @@ const TransactionNotes = (props) => {
 			}, {}).then((resp) => {
 				if (resp && resp.data) setNoteList(resp.data?.pageList);
 				else setNoteList([]);
+			}).finally(() => {
+				setIsLoading(false);
 			});
-			setIsLoading(false);
 		} else setNoteList([]);
 	}, [
 		fetchNoteFiledForLoading,
 		noteFiledFor,
 		setIsLoading
 	]);
-	return /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement("div", { className: classes.notes }, isLoading || fetchNoteFiledForLoading ? /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(LinearProgress$1, null)) : noteList?.length > 0 ? noteList.map((note, index) => /* @__PURE__ */ React$1.createElement(TransactionNote, {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.notes }, isLoading || fetchNoteFiledForLoading ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LinearProgress$1, null)) : noteList?.length > 0 ? noteList.map((note, index) => /* @__PURE__ */ React.createElement(TransactionNote, {
 		key: index,
 		note,
 		onClick: () => handleViewNote(note)
-	})) : /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(EmptyStateDisplay, { primaryText: "No Notes" }))), /* @__PURE__ */ React$1.createElement(SideSheet, {
+	})) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: "No Notes" }))), /* @__PURE__ */ React.createElement(SideSheet, {
 		title: t("View Note"),
-		width: 500,
+		width: 600,
 		open: openSideSheet,
 		onClose: handleCloseSideSheet
-	}, /* @__PURE__ */ React$1.createElement("div", null, fetchNoteTypesLoading ? /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(LinearProgress$1, null)) : /* @__PURE__ */ React$1.createElement(Form, {
-		onSubmit: () => {},
-		initialValues: formattedSelectedNote
-	}, /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(Field, {
-		component: FluentTextFieldAutoComplete,
-		id: "noteType",
-		name: "noteType",
-		optionKey: "name",
-		disableClearable: true,
-		label: t("Type"),
-		options: noteTypes ?? [],
-		disabled: true,
-		onChange: () => {}
-	})), /* @__PURE__ */ React$1.createElement(Field, {
-		component: FluentTextField,
-		id: "subject",
-		name: "subject",
-		label: t("Subject"),
-		disabled: true,
-		onChange: () => {}
-	}), /* @__PURE__ */ React$1.createElement(Field, {
-		component: FluentTextField,
-		id: "content",
-		name: "content",
-		slotProps: { input: { readOnly: true } },
-		label: t("Details"),
-		onChange: () => {},
-		multiline: true,
-		rows: 5,
-		maxRows: 10,
-		disabled: true
-	}), /* @__PURE__ */ React$1.createElement(Typography$1, { variant: "caption" }, t("Viewing note details. Use the Add Note action to create a new entry."))))));
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TransactionNoteForm, {
+		initialValues: selectedNote,
+		businessObjectKey,
+		viewOnly: true,
+		noteTypes,
+		fetchNoteTypeLoading: fetchNoteTypesLoading
+	}))));
 };
 
 //#endregion
@@ -902,14 +1095,14 @@ let TRANSACTION_TAB = /* @__PURE__ */ function(TRANSACTION_TAB$1) {
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/components/EditTransactionDetailsFooterItem.jsx
 const EditTransactionDetailsFooterItem = (props) => {
-	const { transactionTypeId, handleOnCancel, handleOnSaveChanges, handleOnCreateRevision } = props;
+	const { transactionTypeId, transactionIsClosed, handleOnCancel, handleOnSaveChanges } = props;
 	const { hasRevisions } = useTransactionEngine(transactionTypeId);
 	const { t } = useTranslation();
-	return /* @__PURE__ */ React$1.createElement("div", { className: "transaction-details-footer-item" }, /* @__PURE__ */ React$1.createElement(FluentButton, {
+	return /* @__PURE__ */ React.createElement("div", { className: "transaction-details-footer-item" }, /* @__PURE__ */ React.createElement(FluentButton, {
 		variant: "outlined",
 		color: "secondary",
 		onClick: handleOnCancel
-	}, t("Cancel")), /* @__PURE__ */ React$1.createElement(FluentButton, {
+	}, t("Cancel")), !transactionIsClosed && /* @__PURE__ */ React.createElement(FluentButton, {
 		variant: "contained",
 		color: "primary",
 		onClick: handleOnSaveChanges
@@ -917,14 +1110,174 @@ const EditTransactionDetailsFooterItem = (props) => {
 };
 var EditTransactionDetailsFooterItem_default = EditTransactionDetailsFooterItem;
 
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/EditTransactionDetailsFormFields.jsx
+const EditTransactionDetailsFormFields = (props) => {
+	const { transaction, fieldAttributes } = props;
+	const { t } = useTranslation();
+	const fieldComponentMap = {
+		string: FluentTextField,
+		datetime: FluentDatePicker,
+		number: FluentTextField,
+		bool: Switch,
+		array: FluentTextFieldAutoComplete
+	};
+	const getEntityName = (optionValuesArr, entityId) => {
+		return (optionValuesArr?.find((entity) => entity.id == entityId))?.name;
+	};
+	const numberDataTypes = [
+		"int",
+		"short",
+		"long"
+	];
+	const dataTypeComponentMap = (transaction$1, attribute) => {
+		let formattedSanitizedName = attribute.sanitizedName.slice(0, 1).toLowerCase() + attribute.sanitizedName.slice(1);
+		let formattedDataType = attribute.dataType.includes("?") ? attribute.dataType.split("?")[0].toLowerCase() : attribute.dataType.toLowerCase();
+		formattedDataType = numberDataTypes.includes(formattedDataType) ? "number" : formattedDataType;
+		if (attribute.sanitizedName.toLowerCase() == "id") formattedSanitizedName = formattedSanitizedName.toLowerCase();
+		const isAsscoiationLabel = attribute.properties.maintainenceConfig.associationLabel;
+		let fieldComponentProps = null;
+		switch (formattedDataType) {
+			case "number":
+				fieldComponentProps = {
+					initialValue: transaction$1.entityBusinessObject[formattedSanitizedName],
+					type: "number",
+					InputProps: { inputProps: { min: 0 } }
+				};
+				break;
+			case "datetime":
+				fieldComponentProps = { initialValue: transaction$1.entityBusinessObject[formattedSanitizedName] };
+				break;
+			case "array":
+				fieldComponentProps = {
+					options: attribute?.options.map((option) => option.id),
+					optionLabelDisplayFunction: (option) => getEntityName(attribute?.options, option),
+					initialValue: transaction$1.entityBusinessObject[formattedSanitizedName]
+				};
+				break;
+			case "bool":
+				fieldComponentProps = {
+					type: "checkbox",
+					initialValue: false
+				};
+				break;
+			default: fieldComponentProps = { initialValue: transaction$1.entityBusinessObject[formattedSanitizedName] };
+		}
+		let formLabel = isAsscoiationLabel ? attribute.domainName + " Name" : attribute.sanitizedName;
+		let fieldComponent = /* @__PURE__ */ React.createElement(Field, {
+			component: fieldComponentMap[formattedDataType] ?? FluentTextField,
+			label: t(formLabel),
+			name: formattedSanitizedName,
+			fullWidth: true,
+			variant: "outlined",
+			margin: "normal",
+			disabled: attribute.properties.isReadOnly,
+			required: !attribute.dataType.includes("?") && formattedDataType != "bool",
+			...fieldComponentProps
+		});
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, attribute.dataType == "bool" ? /* @__PURE__ */ React.createElement(FormControlLabel, {
+			control: fieldComponent,
+			label: formLabel
+		}) : fieldComponent);
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, fieldAttributes.map((attribute) => {
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, dataTypeComponentMap(transaction, attribute));
+	}));
+};
+var EditTransactionDetailsFormFields_default = EditTransactionDetailsFormFields;
+
+//#endregion
+//#region src/udp/pages/UdpTransactionsPage/components/EditTransactionDetailsForm.jsx
+const EditTransactionDetailsForm = (props) => {
+	const { transaction, formRef } = props;
+	const [entityAttributes, setEntityAttributes] = useState(null);
+	const fullyQualifiedName = transaction.entityBusinessKey?.split("|")[0];
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const { t } = useTranslation();
+	const [{ data: udpObjectInfo }, fetchUdpObjectInfo] = useAxiosMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `UdpObjectInfo/search`, {
+		method: "post",
+		data: {
+			eagerLoad: true,
+			pageNumber: 1,
+			pageSize: 50,
+			filterElements: [{
+				searchField: "sanitizedName",
+				searchOperator: "=",
+				searchValue: getSanitizedName(fullyQualifiedName)
+			}]
+		}
+	});
+	const updateFieldInfo = (tableEntries, filteredEntityFieldInfo, fkFieldInfo, fkDomainName) => {
+		let updatedFields = {
+			dataType: "array",
+			options: tableEntries,
+			domainName: fkDomainName
+		};
+		const updatedFieldInfo = {
+			...fkFieldInfo,
+			...updatedFields
+		};
+		const index = filteredEntityFieldInfo.findIndex((f) => f.id === fkFieldInfo.id);
+		if (index != -1) filteredEntityFieldInfo[index] = updatedFieldInfo;
+	};
+	const filterAdjustEntityAttributes = async (entityObjectInfo) => {
+		let filteredEntityFieldInfo = entityObjectInfo.objectFieldInfo.filter((fieldInfo) => fieldInfo.properties.isDefaultVisible);
+		await Promise.all(entityObjectInfo.childObjectAssociations.map(async (coa) => {
+			let fkFieldInfo = filteredEntityFieldInfo.find((fieldInfo) => fieldInfo.id == coa.sourceFieldInfoID);
+			if (fkFieldInfo?.id == coa.sourceFieldInfoID && coa.cardinality != CardinalityTypeEnums.Many_To_Many) {
+				let fkDomainName = (await apiMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `UdpObjectInfo/${coa.targetObjectID}`, { method: "get" })).data.sanitizedName;
+				const getTableEntriesResp = await apiMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `${fkDomainName}`, { method: "get" });
+				if (getTableEntriesResp.data.length > 0) updateFieldInfo(getTableEntriesResp.data, filteredEntityFieldInfo, fkFieldInfo, fkDomainName);
+			}
+		}));
+		return filteredEntityFieldInfo;
+	};
+	useEffect(() => {
+		fetchUdpObjectInfo().then((udpObjectInfoResp) => {
+			filterAdjustEntityAttributes(udpObjectInfoResp.data.pageList[0]).then((filteredResp) => {
+				setEntityAttributes(filteredResp);
+			});
+		});
+	}, []);
+	const executeSaveChanges = useCallback(async (data) => apiMutate(ConfigService.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/saveChanges`, { method: "put" }, data), [transaction.transactionId]);
+	const onSubmit = useCallback(async (values) => {
+		if ((await executeSaveChanges({ data: values }))?.status === 200) handleSuccessSnackbar(t("Transaction has been saved successfully"));
+		else handleErrorSnackbar(new Error(t(`Error saving Transaction. Please try again later.`)));
+	}, [
+		executeSaveChanges,
+		handleSuccessSnackbar,
+		handleErrorSnackbar,
+		t
+	]);
+	const fieldAttributes = useMemo(() => {
+		if (!entityAttributes) return [];
+		return entityAttributes;
+	}, [entityAttributes]);
+	return fieldAttributes.length == 0 ? /* @__PURE__ */ React.createElement(LinearProgress, null) : /* @__PURE__ */ React.createElement(AmbientCard, null, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit,
+		ref: formRef
+	}, /* @__PURE__ */ React.createElement(EditTransactionDetailsFormFields_default, {
+		transaction,
+		fieldAttributes
+	})));
+};
+var EditTransactionDetailsForm_default = EditTransactionDetailsForm;
+
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/EditTransaction.jsx
 const EditTransaction = (props) => {
-	const { transaction: initialTransaction, transactionTypeId, openInnerSidesheetState, setOpenInnerSidesheetState, refreshGridData, closeSideSheet, setSidesheetLoading } = props;
+	const { transaction: initialTransaction, transactionTypeId, transactionIsClosed, openInnerSidesheetState, setOpenInnerSidesheetState, refreshGridData, closeSideSheet, setSidesheetLoading } = props;
 	const { t } = useTranslation();
 	const [selectedTab, setSelectedTab] = useState(0);
-	const [transactionSaveChangesOnSubmit, setTransactionSaveChangesOnSubmit] = useState(null);
 	const [transaction, setTransaction] = useState(initialTransaction);
+	const [transactionAttachments, setTransactionAttachments] = useState([]);
+	const [filePreview, setFilePreview] = useState(false);
+	const [currentAttachments, setCurrentAttachments] = useState([]);
+	const [attachmentType, setAttachmentType] = useState(null);
+	const [attachmentProgress, setAttachmentProgress] = useState(false);
+	const [refreshNotes, setRefreshNotes] = useState(false);
+	const [{ data: noteTypes, loading: fetchNoteTypesLoading }] = useAxiosGet(ConfigService$1.productV1ApiUrl, `UdpNoteType`, {});
+	const { getUiActionRenderPageId } = useTransactionEngine(transactionTypeId);
 	const refetchTransaction = useCallback(async () => {
 		setSidesheetLoading(true);
 		const response = await apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${initialTransaction.transactionId}/full`, { method: "get" });
@@ -932,38 +1285,135 @@ const EditTransaction = (props) => {
 		setSidesheetLoading(false);
 	}, [initialTransaction.transactionId, setSidesheetLoading]);
 	const formRef = useRef(null);
+	const transactionNoteFormRef = useRef(null);
+	const handleNoteFormSubmit = useCallback(() => {
+		transactionNoteFormRef.current?.handleSubmit?.();
+	}, []);
+	const handleNoteFormReset = useCallback(() => {
+		transactionNoteFormRef.current?.form?.reset?.();
+	}, []);
 	const handleSaveChanges = useCallback(async () => {
 		setSidesheetLoading(true);
-		if (transactionSaveChangesOnSubmit) await transactionSaveChangesOnSubmit();
+		await formRef.current?.form?.submit();
 		setSidesheetLoading(false);
 		refreshGridData();
 	}, [
 		refreshGridData,
-		transactionSaveChangesOnSubmit,
-		setSidesheetLoading
+		setSidesheetLoading,
+		formRef
 	]);
+	const [{ data: transactionAttachmentsData, loading: fetchTransactionAttachmentsLoading }, fetchTransactionAttachments] = useAxiosMutate(ConfigService$1.productV1ApiUrl, `UdpTransactionAttachment/search`, {
+		method: "post",
+		data: {
+			pageSize: 50,
+			filterElements: [{
+				searchField: "TransactionId",
+				searchValue: transaction.transactionId,
+				searchOperator: "="
+			}, {
+				searchField: "IsDeleted",
+				searchValue: 0,
+				searchOperator: "="
+			}]
+		}
+	});
+	const [{ data: transactionAttachmentTypes }, fetchTransactionAttachmentType] = useAxiosMutate(process.env.REACT_APP_PRODUCT_API_BASE, `UdpTransactionAttachmentType/search`, {
+		method: "post",
+		data: {
+			pageSize: 50,
+			filterElements: [{
+				searchField: "TransactionTypeId",
+				searchValue: transaction.transactionTypeId,
+				searchOperator: "="
+			}]
+		}
+	});
+	const { enqueueSnackbar } = useSnackbar();
+	const getAttachments = useCallback(async () => {
+		try {
+			setTransactionAttachments((await fetchTransactionAttachments()).data.pageList);
+		} catch (error) {
+			console.error("Failed to fetch attachments:", error);
+			enqueueSnackbar("Attachment fetch failed: We encountered a system error. Please try again or contact support if the issue persists.", {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+		}
+	}, [fetchTransactionAttachments, enqueueSnackbar]);
 	const tabNames = [
 		t("Details"),
 		t("History"),
 		t("Attachments"),
 		t("Notes")
 	];
-	const headerItemInfo = [{
-		label: "Status",
-		statusChip: {
-			label: transaction.udpTransactionUdpTransactionTypeStatus?.name,
-			status: "success"
+	const headerItemInfo = useMemo(() => {
+		const items = [{
+			label: "Status",
+			statusChip: {
+				label: transaction.udpTransactionUdpTransactionTypeStatus?.name,
+				status: "success"
+			}
+		}];
+		if (transaction?.currentRevisionNo) items.push({
+			label: "Revision",
+			value: `${transaction.currentRevisionNo}`
+		});
+		return items;
+	}, [transaction]);
+	const handleUploadFiles = useCallback(async () => {
+		if (!currentAttachments.length) throw new Error("No files added for upload");
+		const formData = new FormData();
+		currentAttachments.forEach((file) => formData.append("files", file));
+		formData.append("attachmentTypeId", attachmentType.transactionAttachmentTypeId);
+		try {
+			setAttachmentProgress(true);
+			await apiMutate(ConfigService$1.productV1ApiUrl, `UdpTransactionAttachment/transaction/${transaction.transactionId}/upload`, {
+				method: "post",
+				headers: {
+					transactionId: transaction.transactionId,
+					attachmentTypeId: attachmentType.transactionAttachmentTypeId
+				},
+				data: formData
+			});
+			await getAttachments();
+			setCurrentAttachments([]);
+			setOpenInnerSidesheetState({ attachments: false });
+			enqueueSnackbar("Files uploaded successfully", {
+				variant: "success",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+		} catch (error) {
+			enqueueSnackbar(`File upload failed: We encountered a system error. Please try again or contact support if the issue persists.`, {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+			throw error;
+		} finally {
+			setAttachmentProgress(false);
 		}
-	}, {
-		label: "Revision",
-		value: transaction?.currentRevisionNo
-	}];
-	const innerSidesheetList = [
+	}, [
+		attachmentType,
+		currentAttachments,
+		enqueueSnackbar,
+		getAttachments,
+		setOpenInnerSidesheetState,
+		transaction.transactionId
+	]);
+	const innerSidesheetList = useMemo(() => [
 		{
 			open: openInnerSidesheetState.workflowAction,
 			closeSheet: () => setOpenInnerSidesheetState({ workflowActions: false }),
 			title: "Available Workflow Actions",
-			children: /* @__PURE__ */ React$1.createElement(WorkflowActions_default, {
+			children: /* @__PURE__ */ React.createElement(WorkflowActions_default, {
 				transaction,
 				closeSideSheet: () => {
 					setOpenInnerSidesheetState({ workflowActions: false });
@@ -976,7 +1426,27 @@ const EditTransaction = (props) => {
 			open: openInnerSidesheetState.attachments,
 			closeSheet: () => setOpenInnerSidesheetState({ attachments: false }),
 			title: "Add Attachment",
-			children: /* @__PURE__ */ React$1.createElement("h1", null, "Add Attachments content")
+			buttonLabel: "Save",
+			buttonOneDisabled: !attachmentType || currentAttachments.length <= 0,
+			onSubmit: () => {
+				handleUploadFiles().then(() => refreshGridData()).catch((error) => console.error(error));
+			},
+			children: /* @__PURE__ */ React.createElement(Attachments, {
+				attachmentTypes: transactionAttachmentTypes,
+				attachmentType,
+				setAttachmentType,
+				attachmentProgress,
+				setAttachmentProgress,
+				currentAttachments,
+				setCurrentAttachments,
+				transaction,
+				previousAttachments: transactionAttachments,
+				setPreviousAttachments: setTransactionAttachments,
+				MAX_FILE_SIZE_MB,
+				allowedExtensions,
+				filePreview,
+				setFilePreview
+			})
 		},
 		{
 			open: openInnerSidesheetState.notes,
@@ -984,55 +1454,127 @@ const EditTransaction = (props) => {
 			title: "Add Note",
 			buttonLabel: "Save note",
 			buttonTwoLabel: "Clear",
-			buttonTwoAction: () => {},
-			children: /* @__PURE__ */ React$1.createElement("h1", null, "Add Notes content")
+			buttonTwoAction: handleNoteFormReset,
+			onSubmit: handleNoteFormSubmit,
+			children: /* @__PURE__ */ React.createElement(TransactionNoteForm, {
+				ref: transactionNoteFormRef,
+				businessObjectKey: transaction?.businessObjectKey,
+				closeSideSheet: () => {
+					setOpenInnerSidesheetState({ notes: false });
+					setRefreshNotes(true);
+				},
+				noteTypes,
+				fetchNoteTypesLoading
+			})
 		}
-	];
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet" }, /* @__PURE__ */ React$1.createElement("div", { className: `edit-transaction-sidesheet-header 'is-sticky'` }, /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-header-title" }), /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-header-content" }, /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-header-items" }, headerItemInfo.map((headerItem) => {
-		return /* @__PURE__ */ React$1.createElement(EditTransactionHeaderItem_default, {
+	], [
+		openInnerSidesheetState.workflowAction,
+		openInnerSidesheetState.attachments,
+		openInnerSidesheetState.notes,
+		transaction,
+		refreshGridData,
+		attachmentType,
+		currentAttachments,
+		transactionAttachmentTypes,
+		attachmentProgress,
+		transactionAttachments,
+		filePreview,
+		handleNoteFormReset,
+		handleNoteFormSubmit,
+		noteTypes,
+		fetchNoteTypesLoading,
+		setOpenInnerSidesheetState,
+		refetchTransaction,
+		handleUploadFiles
+	]);
+	const transactionDetailPageId = useMemo(() => {
+		return getUiActionRenderPageId(TransactionUiActionTypeEnums.Render_Transaction_Details_Page);
+	}, [getUiActionRenderPageId]);
+	useEffect(() => {
+		(async () => {
+			if (!transactionAttachmentsData) getAttachments();
+		})();
+	}, [transactionAttachmentsData, getAttachments]);
+	useEffect(() => {
+		if (!transactionAttachmentTypes) {
+			setAttachmentProgress(true);
+			fetchTransactionAttachmentType().then(() => {
+				setAttachmentProgress(false);
+			});
+		}
+	}, [fetchTransactionAttachmentType, transactionAttachmentTypes]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet" }, /* @__PURE__ */ React.createElement("div", { className: `edit-transaction-sidesheet-header 'is-sticky'` }, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-title" }), /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-content" }, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-items" }, headerItemInfo.map((headerItem) => {
+		return /* @__PURE__ */ React.createElement(EditTransactionHeaderItem_default, {
 			key: headerItem.label,
 			label: headerItem.label,
 			statusChip: headerItem.statusChip,
 			value: headerItem.value
 		});
-	})), /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-header-buttons" }, /* @__PURE__ */ React$1.createElement(FluentButton, {
+	})), /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-buttons" }, /* @__PURE__ */ React.createElement(FluentButton, {
 		variant: "contained",
 		color: "secondary",
 		onClick: () => {
 			setOpenInnerSidesheetState({ attachments: true });
 		}
-	}, "Add Attachment"), /* @__PURE__ */ React$1.createElement(FluentButton, {
+	}, "Add Attachment"), /* @__PURE__ */ React.createElement(FluentButton, {
 		variant: "contained",
 		color: "secondary",
 		onClick: () => {
 			setOpenInnerSidesheetState({ notes: true });
 		}
-	}, "Add Note")), /* @__PURE__ */ React$1.createElement("div", { className: "divider" }, /* @__PURE__ */ React$1.createElement(Divider$1, null)), /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-tabs" }, /* @__PURE__ */ React$1.createElement(UdpTabs, {
+	}, "Add Note")), /* @__PURE__ */ React.createElement("div", { className: "divider" }, /* @__PURE__ */ React.createElement(Divider$1, null)), /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-tabs" }, /* @__PURE__ */ React.createElement(UdpTabs, {
 		value: selectedTab,
 		onChange: (value, tabIndex) => {
 			setSelectedTab(tabIndex);
 		},
 		tabList: tabNames.map((tabName) => ({ label: tabName })),
 		buttonWidth: "100%"
-	}))), /* @__PURE__ */ React$1.createElement("div", { className: "divider" }, /* @__PURE__ */ React$1.createElement(Divider$1, null))), /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-body" }, /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement("div", { style: { display: selectedTab === TRANSACTION_TAB.DETAILS ? "block" : "none" } }, " ", /* @__PURE__ */ React$1.createElement(UdpTransactionCustomPage_default, {
+	}))), /* @__PURE__ */ React.createElement("div", { className: "divider" }, /* @__PURE__ */ React.createElement(Divider$1, null))), /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-body" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UdpTabPanel, {
+		value: selectedTab,
+		index: TRANSACTION_TAB.DETAILS
+	}, transactionDetailPageId ? /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
 		transactionTypeId,
 		transactionUiActionType: TransactionUiActionTypeEnums.Render_Transaction_Details_Page,
 		formRef,
-		setHandleOnSubmit: setTransactionSaveChangesOnSubmit,
 		transaction
-	})), /* @__PURE__ */ React$1.createElement("div", { style: { display: selectedTab === TRANSACTION_TAB.HISTORY ? "block" : "none" } }, /* @__PURE__ */ React$1.createElement("div", null, "History Content Placeholder")), /* @__PURE__ */ React$1.createElement("div", { style: { display: selectedTab === TRANSACTION_TAB.ATTACHMENTS ? "block" : "none" } }, /* @__PURE__ */ React$1.createElement("div", null, "Attachments Content Placeholder")), /* @__PURE__ */ React$1.createElement("div", { style: { display: selectedTab === TRANSACTION_TAB.NOTES ? "block" : "none" } }, /* @__PURE__ */ React$1.createElement(TransactionNotes, { businessObjectKey: transaction?.businessObjectKey })))), selectedTab == 0 && /* @__PURE__ */ React$1.createElement("div", { className: "edit-transaction-sidesheet-footer" }, /* @__PURE__ */ React$1.createElement(EditTransactionDetailsFooterItem_default, {
+	}) : /* @__PURE__ */ React.createElement(EditTransactionDetailsForm_default, {
+		transaction,
+		formRef
+	})), /* @__PURE__ */ React.createElement(UdpTabPanel, {
+		value: selectedTab,
+		index: TRANSACTION_TAB.HISTORY
+	}, /* @__PURE__ */ React.createElement(TransactionTimeline, { transactionId: transaction?.transactionId })), /* @__PURE__ */ React.createElement(UdpTabPanel, {
+		value: selectedTab,
+		index: TRANSACTION_TAB.ATTACHMENTS
+	}, /* @__PURE__ */ React.createElement(TransactionAttachments, {
+		transactionAttachments: transactionAttachmentsData,
+		isLoading: fetchTransactionAttachmentsLoading
+	})), /* @__PURE__ */ React.createElement(UdpTabPanel, {
+		value: selectedTab,
+		index: TRANSACTION_TAB.NOTES
+	}, /* @__PURE__ */ React.createElement(TransactionNotes, {
+		businessObjectKey: transaction?.businessObjectKey,
+		refreshNotes,
+		setRefreshNotes,
+		noteTypes,
+		fetchNoteTypeLoading: fetchNoteTypesLoading
+	})))), selectedTab == TRANSACTION_TAB.DETAILS && /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-footer" }, /* @__PURE__ */ React.createElement(EditTransactionDetailsFooterItem_default, {
 		transactionTypeId,
+		transactionIsClosed,
 		handleOnCancel: closeSideSheet,
 		handleOnSaveChanges: handleSaveChanges
 	}))), openInnerSidesheetState && innerSidesheetList.map((item) => {
-		return /* @__PURE__ */ React$1.createElement(SideSheet, {
+		return /* @__PURE__ */ React.createElement(SideSheet, {
 			key: item.title,
 			open: item.open,
 			width: 600,
 			title: item.title,
 			onClose: item.closeSheet,
 			buttonLabel: item?.buttonLabel,
+			buttonOneDisabled: item?.buttonOneDisabled,
 			buttonTwoLabel: item?.buttonTwoLabel,
+			buttonTwoAction: item?.buttonTwoAction,
+			onSubmit: item?.onSubmit,
 			color: "primary"
 		}, item.children);
 	}));
@@ -1044,24 +1586,25 @@ var EditTransaction_default = EditTransaction;
 const UdpTransactionSidesheet = (props) => {
 	const { openStates, handleSidesheet, handleAttachmentTransaction, transaction, transactionTypeId, domainName, refreshGridData } = props;
 	const [sidesheetLoading, setSidesheetLoading] = useState(false);
-	const [transactionCreationOnSubmit, setTransactionCreationOnSubmit] = useState(null);
-	const [transactionCreateRevisionOnSubmit, setTransactionCreateRevisionOnSubmit] = useState(null);
+	const [closingTransactionLoading, setClosingTransactionLoading] = useState(false);
 	const [editTransactionopenInnerSidesheetState, setEditTransactionOpenInnerSidesheetState] = useState({
 		attachments: false,
 		workflowActions: false,
 		notes: false
 	});
+	const [dialogOpen, setDialogOpen] = useState(false);
 	const { handleSuccessSnackbar, handleErrorSnackbar } = useHandleAxiosSnackbar();
-	const { hasClosedStatus } = useTransactionEngine(transactionTypeId);
+	const { hasClosedStatus, checkIfTransactionIsClosed, getTransactionTypeLabel, getUiActionRenderPageId } = useTransactionEngine(transactionTypeId);
 	const { t } = useTranslation();
 	const formRef = useRef(null);
+	const attachmentRef = useRef();
 	const sidesheetWidth = 800;
 	const transactionTypeEntry = transaction?.entityBusinessObject;
+	const handleDialogClose = () => {
+		setDialogOpen(false);
+	};
 	const executeCloseTransaction = useCallback(async () => {
-		setSidesheetLoading(true);
-		const response = await apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/closeTransaction`, { method: "post" });
-		setSidesheetLoading(false);
-		if (response?.status === 200) {
+		if ((await apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/closeTransaction`, { method: "post" }))?.status === 200) {
 			handleSidesheet("edit", false);
 			refreshGridData();
 			handleSuccessSnackbar(t(`Transaction has been closed successfully`));
@@ -1074,28 +1617,56 @@ const UdpTransactionSidesheet = (props) => {
 		handleErrorSnackbar,
 		t
 	]);
+	const handleConfirmCloseTransactionDialog = useCallback(async () => {
+		try {
+			setClosingTransactionLoading(true);
+			await executeCloseTransaction();
+		} catch (error) {
+			handleErrorSnackbar(error);
+		} finally {
+			setClosingTransactionLoading(false);
+			handleDialogClose();
+		}
+	}, [executeCloseTransaction, handleErrorSnackbar]);
 	const formattedBusinesskey = transactionTypeEntry?.businessObjectKey?.split("|")?.pop();
 	const handleTransactionCreation = useCallback(async () => {
 		setSidesheetLoading(true);
-		if (transactionCreationOnSubmit) await transactionCreationOnSubmit();
+		await formRef.current?.form?.submit();
 		setSidesheetLoading(false);
 		handleSidesheet("add", false);
 		refreshGridData();
 	}, [
 		handleSidesheet,
 		refreshGridData,
-		transactionCreationOnSubmit
+		formRef
 	]);
 	const handleCreateRevision = useCallback(async () => {
 		setSidesheetLoading(true);
-		if (transactionCreateRevisionOnSubmit) await transactionCreateRevisionOnSubmit();
+		formRef.current?.form?.submit();
 		setSidesheetLoading(false);
 		handleSidesheet("createRevision", false);
 		refreshGridData();
 	}, [
 		handleSidesheet,
 		refreshGridData,
-		transactionCreateRevisionOnSubmit
+		formRef
+	]);
+	const pdfViewPageId = useMemo(() => {
+		return getUiActionRenderPageId(TransactionUiActionTypeEnums.Render_View_Pdf_Page);
+	}, [getUiActionRenderPageId]);
+	const viewTransactionPage = useMemo(() => {
+		if (pdfViewPageId) return /* @__PURE__ */ React.createElement(PageContainer, { pageId: pdfViewPageId });
+		else return /* @__PURE__ */ React.createElement(ViewTransaction_default, { transaction });
+	}, [transaction, pdfViewPageId]);
+	const transactionIsClosed = useMemo(() => {
+		return checkIfTransactionIsClosed(transaction);
+	}, [checkIfTransactionIsClosed, transaction]);
+	const transactionLabel = useMemo(() => {
+		return getTransactionTypeLabel(transaction) ?? formattedBusinesskey;
+	}, [
+		getTransactionTypeLabel,
+		transaction,
+		formattedBusinesskey
 	]);
 	const sidesheetList = useMemo(() => {
 		return [
@@ -1105,30 +1676,33 @@ const UdpTransactionSidesheet = (props) => {
 				title: domainName,
 				width: sidesheetWidth,
 				onSubmit: handleTransactionCreation,
-				children: /* @__PURE__ */ React$1.createElement(UdpTransactionCustomPage_default, {
+				children: /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
 					transactionTypeId,
 					transactionUiActionType: TransactionUiActionTypeEnums.Render_Create_Transaction_Page,
-					formRef,
-					setHandleOnSubmit: setTransactionCreationOnSubmit
+					formRef
 				}),
 				buttonLabel: "Add"
 			},
 			{
 				open: openStates.viewTransaction,
 				closeSheet: () => handleSidesheet("view", false),
-				title: domainName + " " + formattedBusinesskey + " - Preview",
+				title: domainName + " " + transactionLabel + " - Preview",
 				width: sidesheetWidth,
-				children: /* @__PURE__ */ React$1.createElement(ViewTransaction_default, { transaction }),
-				buttonLabel: "Download"
+				children: viewTransactionPage,
+				buttonLabel: !pdfViewPageId ? "Download" : null
 			},
 			{
 				open: openStates.attachmentTransaction,
 				closeSheet: () => handleSidesheet("view", false),
-				title: "Attachment for " + domainName + " " + formattedBusinesskey,
+				title: "Attachment for " + domainName + " " + transactionLabel,
 				width: sidesheetWidth,
 				buttonLabel: "Download",
-				children: /* @__PURE__ */ React$1.createElement(AttachmentTransaction_default, {
+				onSubmit: () => {
+					if (attachmentRef.current) attachmentRef.current.downloadSelectedFile();
+				},
+				children: /* @__PURE__ */ React.createElement(AttachmentTransaction_default, {
 					handleAttachmentTransaction,
+					attachmentRef,
 					transaction,
 					domainName,
 					setSidesheetLoading
@@ -1137,9 +1711,9 @@ const UdpTransactionSidesheet = (props) => {
 			{
 				open: openStates.workflowAction,
 				closeSheet: () => handleSidesheet("action", false),
-				title: `Workflow Actions - ${domainName} ${formattedBusinesskey}`,
+				title: `Workflow Actions - ${domainName} ${transactionLabel}`,
 				width: sidesheetWidth,
-				children: /* @__PURE__ */ React$1.createElement(WorkflowActions_default, {
+				children: /* @__PURE__ */ React.createElement(WorkflowActions_default, {
 					transaction,
 					closeSideSheet: () => {
 						handleSidesheet("action", false);
@@ -1150,15 +1724,16 @@ const UdpTransactionSidesheet = (props) => {
 			{
 				open: openStates.editTransaction,
 				closeSheet: () => handleSidesheet("edit", false),
-				title: `Edit ${domainName} ${formattedBusinesskey}`,
+				title: `Edit ${domainName} ${transactionLabel}`,
 				width: sidesheetWidth,
-				buttonLabel: "Next Steps",
+				buttonLabel: !transactionIsClosed ? "Next Steps" : null,
 				onSubmit: () => setEditTransactionOpenInnerSidesheetState({ workflowAction: true }),
-				buttonTwoLabel: hasClosedStatus ? "Close " + domainName : null,
-				buttonTwoAction: hasClosedStatus ? executeCloseTransaction : null,
-				children: /* @__PURE__ */ React$1.createElement(EditTransaction_default, {
+				buttonTwoLabel: !transactionIsClosed ? hasClosedStatus ? "Close " + domainName : null : null,
+				buttonTwoAction: !transactionIsClosed ? hasClosedStatus ? () => setDialogOpen(true) : null : null,
+				children: /* @__PURE__ */ React.createElement(EditTransaction_default, {
 					transaction,
 					transactionTypeId,
+					transactionIsClosed,
 					openInnerSidesheetState: editTransactionopenInnerSidesheetState,
 					setOpenInnerSidesheetState: setEditTransactionOpenInnerSidesheetState,
 					refreshGridData,
@@ -1172,11 +1747,10 @@ const UdpTransactionSidesheet = (props) => {
 				title: `Create Revision for ${domainName}`,
 				width: sidesheetWidth,
 				onSubmit: handleCreateRevision,
-				children: /* @__PURE__ */ React$1.createElement(UdpTransactionCustomPage_default, {
+				children: /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
 					transactionTypeId,
 					transactionUiActionType: TransactionUiActionTypeEnums.Render_Create_Revision_Page,
 					formRef,
-					setHandleOnSubmit: setTransactionCreateRevisionOnSubmit,
 					transaction
 				}),
 				buttonLabel: "Create Revision"
@@ -1190,15 +1764,18 @@ const UdpTransactionSidesheet = (props) => {
 		domainName,
 		editTransactionopenInnerSidesheetState,
 		setEditTransactionOpenInnerSidesheetState,
-		formattedBusinesskey,
+		transactionLabel,
 		refreshGridData,
 		transactionTypeId,
 		handleTransactionCreation,
 		hasClosedStatus,
-		handleCreateRevision
+		handleCreateRevision,
+		transactionIsClosed,
+		viewTransactionPage,
+		pdfViewPageId
 	]);
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, openStates && sidesheetList.map((item) => {
-		return /* @__PURE__ */ React$1.createElement(SideSheet, {
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, openStates && sidesheetList.map((item) => {
+		return /* @__PURE__ */ React.createElement(SideSheet, {
 			key: item.title,
 			open: item.open,
 			width: sidesheetWidth,
@@ -1212,7 +1789,17 @@ const UdpTransactionSidesheet = (props) => {
 			buttonTwoAction: item?.buttonTwoAction,
 			progress: sidesheetLoading,
 			variant: "indeterminate"
-		}, /* @__PURE__ */ React$1.createElement("div", null, item.children));
+		}, sidesheetLoading && /* @__PURE__ */ React.createElement(LinearProgress$1, null), /* @__PURE__ */ React.createElement("div", null, item.children));
+	}), /* @__PURE__ */ React.createElement(FluentDialog, {
+		title: t(`Close Transaction`),
+		message: `Are you sure you want to close transaction for ${transaction?.entityBusinessKey || ""}?`,
+		labelOne: t("Confirm"),
+		actionOne: handleConfirmCloseTransactionDialog,
+		labelTwo: t("Cancel"),
+		actionTwo: handleDialogClose,
+		open: dialogOpen,
+		handleClose: handleDialogClose,
+		loading: closingTransactionLoading
 	}));
 };
 var UdpTransactionSidesheet_default = UdpTransactionSidesheet;
@@ -1333,8 +1920,8 @@ const UdpTransactionsPage = (props) => {
 	useEffect(() => {
 		if (transactionType) setDomainName(transactionType.domainName.split(".").pop());
 	}, [transactionType]);
-	if (!transactionType) return /* @__PURE__ */ React$1.createElement("div", { className: "udp-transaction-page-loading" }, /* @__PURE__ */ React$1.createElement(CircularProgress, { size: 64 }));
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(UdpTransactionGrid_default, {
+	if (!transactionType) return /* @__PURE__ */ React.createElement("div", { className: "udp-transaction-page-loading" }, /* @__PURE__ */ React.createElement(CircularProgress, { size: 64 }));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UdpTransactionGrid_default, {
 		transactionTypeId: transactionType?.transactionTypeId,
 		transactionType,
 		domainName,
@@ -1364,7 +1951,7 @@ const UdpTransactionsPage = (props) => {
 			gridApiRef?.current?.refreshServerSide();
 		},
 		gridApiRef
-	}), /* @__PURE__ */ React$1.createElement(UdpTransactionSidesheet_default, {
+	}), /* @__PURE__ */ React.createElement(UdpTransactionSidesheet_default, {
 		openStates: sidesheetState,
 		handleSidesheet,
 		handleAttachmentTransaction,
@@ -1384,4 +1971,4 @@ var UdpTransactionsPage_exports = /* @__PURE__ */ __export({ default: () => UdpT
 
 //#endregion
 export { UdpTransactionsPage_default as n, UdpTransactionsPage_exports as t };
-//# sourceMappingURL=UdpTransactionsPage-D6lRI165.js.map
+//# sourceMappingURL=UdpTransactionsPage-DKF6PKUA.js.map