@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.130

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Priorities, ResultTypes, SDK_Globals, SDK_Localizator, TaskEngine, UserListCacheService, ValidationItem, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
+import { useEffect, useMemo, useState } from "react";
+import { Priorities, ResultTypes, SDK_Globals, SDK_Localizator, TaskEngine, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
-import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, DateDisplayTypes, TASK_MORE_INFO_PREFIX_NAME, IconSignaturePencil, isSign4TopEnabled } from "../../../helper";
+import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, DateDisplayTypes, TASK_MORE_INFO_PREFIX_NAME, IconSignaturePencil, isSign4TopEnabled, IconCheck, IconCloseCircle, IconStop } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
 import TMButton from "../../base/TMButton";
 import { DeviceType } from "../../base/TMDeviceProvider";
@@ -21,17 +21,15 @@ const StyledWorkFlowOperationButtonsContainer = styled.div `
     gap: 10px;
     flex-direction: column;
 `;
-const StyledTextArea = styled.textarea.attrs({
-    maxLength: 200
-}) `
+const StyledTextArea = styled.textarea `
     width: 100%; 
     height: 100%; 
-    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
+    border: 1px solid ${(props) => (props.$isValid ? '#b4b4b4' : TMColors.error)}; 
     border-radius: 10px; 
     padding: 10px;
-    &:focus{
+    &:focus {
         outline: none;
-        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+        border-bottom: 4px solid ${(props) => (props.$isValid ? TMColors.primaryColor : TMColors.error)};
     }
 `;
 const CharacterCounter = styled.div `
@@ -68,17 +66,12 @@ const StyledHorizontalContainer = styled.div `
 export const WorkFlowOperationButtons = (props) => {
     const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Stato per distinguere workflow di firma vs approvazione
-    const [isSignWorkflow, setIsSignWorkflow] = useState(false);
-    useEffect(() => {
-        // Controlla se il documento ha dei widget definiti, se il documento ha il widget SIGN4_TOP abilitato, allora è un workflow di firma
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    const isSignWorkflow = useMemo(() => {
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
-            setIsSignWorkflow(isSign4TopEnabled(dtd.widgets));
-        }
-        else {
-            // Se non ci sono widget o non è SIGN4_TOP, imposta il workflow di default (approvazione senza firma)
-            setIsSignWorkflow(false);
+            return isSign4TopEnabled(dtd.widgets);
         }
+        return false;
     }, [dtd]);
     return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
 };
@@ -97,6 +90,7 @@ export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = Devi
             for (const { TID, DID } of items) {
                 await workflowEngine.WorkItem_CompleteOrRejectAsync(TID, DID, commentValue, isReject);
             }
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: isReject === 0 ? SDKUI_Localizator.WorkitemApprove : SDKUI_Localizator.WorkitemReject, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -105,33 +99,42 @@ export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = Devi
             onCompleted?.();
             onClose?.();
             TMSpinner.hide();
-            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: isReject === 0 ? SDKUI_Localizator.WorkitemApprove : SDKUI_Localizator.WorkitemReject, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
         }
     };
     const workflowAction = isReject === 0 ? SDKUI_Localizator.Approve : SDKUI_Localizator.Reject;
     const itemCount = selectedItems.length > 0 ? `(${selectedItems.length} workitem)` : '';
     const title = `${workflowAction} ${itemCount}`;
-    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsxs("p", { style: { color: (isReject === 1 && disable) ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", isReject === 1 && disable && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { "$isValid": isReject === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: isReject === 0
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsxs("p", { style: { color: (isReject === 1 && disable) ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", isReject === 1 && disable && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { maxLength: 200, "$isValid": isReject === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: isReject === 0
                         ? _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: false, onClick: () => completeOrRejectAsync(isReject), advancedColor: TMColors.success })
                         : _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: disable, onClick: () => { !disable && completeOrRejectAsync(isReject); }, advancedColor: TMColors.error }) })] }) }));
 };
-export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, selectedItems = [], onCompleted }) => {
+export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, selectedItems = [], onCompleted, wf, workItemDetail }) => {
     const [commentValue, setCommentValue] = useState('');
     const [selectedUserID, setSelectedUserID] = useState([]);
     const [participants, setParticipants] = useState([]);
     const disable = commentValue.length === 0 || !selectedUserID;
+    // Determina se siamo nel contesto CtrlWorkflow (quando abbiamo workItemDetail)
+    const isCtrlWorkflowContext = !!workItemDetail;
     const reAssignWorkFlowAsync = async () => {
         try {
             TMSpinner.show();
             const workflowEngine = SDK_Globals.tmSession?.NewWorkflowEngine();
             if (!workflowEngine)
                 throw new Error("Workflow engine is not available");
-            const items = selectedItems.length > 0
-                ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
-                : [{ TID, DID }];
-            for (const { TID, DID } of items) {
-                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_ReassignAsync(TID, DID, selectedUserID?.[0], commentValue);
+            if (isCtrlWorkflowContext && workItemDetail) {
+                // Contesto CtrlWorkflow: usa WFCtrl_ReassignWIAsync
+                await workflowEngine.WFCtrl_ReassignWIAsync(workItemDetail.wfid, workItemDetail.did, selectedUserID?.[0], commentValue);
+            }
+            else {
+                // Contesto WorkItem: usa WorkItem_ReassignAsync
+                const items = selectedItems.length > 0
+                    ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
+                    : [{ TID, DID }];
+                for (const { TID, DID } of items) {
+                    await workflowEngine.WorkItem_ReassignAsync(TID, DID, selectedUserID?.[0], commentValue);
+                }
             }
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.WorkitemReassign, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -140,11 +143,10 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
             onCompleted?.();
             onClose?.();
             TMSpinner.hide();
-            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.WorkitemReassign, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
         }
     };
     // Determina il TID da usare
-    const tidToUse = selectedItems?.[0]?.TID ?? TID;
+    const tidToUse = workItemDetail?.tid ?? selectedItems?.[0]?.TID ?? TID;
     useEffect(() => {
         let isMounted = true;
         const fetchData = async () => {
@@ -153,11 +155,11 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
                 if (!tidToUse)
                     return;
                 // Recupera info workflow
-                const wf = await WorkflowCacheService.GetWFInfoAsync(tidToUse);
+                const workflowInfo = wf ?? await WorkflowCacheService.GetWFInfoAsync(tidToUse);
                 // Recupera tutti gli utenti
                 const allUsers = await UserListCacheService.GetAllAsync();
                 // Filtra utenti partecipanti
-                const participantIds = wf?.participants?.map(p => p.userID);
+                const participantIds = workflowInfo?.participants?.map(p => p.userID);
                 const participantUsers = allUsers.filter(u => participantIds?.includes(u.id) && u.id !== SDK_Globals.tmSession?.SessionDescr?.userID);
                 if (isMounted)
                     setParticipants(participantUsers);
@@ -171,10 +173,114 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
         };
         fetchData();
         return () => { isMounted = false; };
-    }, [tidToUse]);
-    return (_jsx(TMModal, { onClose: onClose, width: '600px', height: '270px', isModal: true, title: SDKUI_Localizator.Reassign + (selectedItems.length > 0 ? ' (' + selectedItems.length + ' workitem)' : ''), children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { dataSource: participants, values: selectedUserID, onValueChanged: (IDs) => {
+    }, [tidToUse, wf, workItemDetail]);
+    // Determina il conteggio degli item da mostrare nel titolo
+    const itemCount = workItemDetail ? 1 : selectedItems.length;
+    const titleSuffix = itemCount > 0 ? ` (${itemCount} workitem)` : '';
+    return (_jsx(TMModal, { onClose: onClose, width: '600px', height: '270px', isModal: true, title: SDKUI_Localizator.Reassign + titleSuffix, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx(TMUserChooser, { dataSource: participants, values: selectedUserID, onValueChanged: (IDs) => {
                                 setSelectedUserID(IDs ?? []);
-                            } }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", commentValue.length === 0 && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }) })] }) }));
+                            } }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: [SDKUI_Localizator.CommentText, " ", commentValue.length === 0 && _jsx("span", { children: ` (${SDKUI_Localizator.RequiredField})` }), " "] }), _jsx(StyledTextArea, { maxLength: 200, "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) }), _jsx(CharacterCounter, { children: `${200 - commentValue.length} ${SDKUI_Localizator.CharactersRemaining}` })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }) })] }) }));
+};
+/**
+ * Modal per forzare l'approvazione di un work item
+ */
+export const WorkflowForceApproveModal = ({ detail, onClose, onCompleted }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const disable = commentValue.length === 0;
+    const forceApproveAsync = async () => {
+        try {
+            TMSpinner.show({ description: 'Forza approvazione in corso...' });
+            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.wfid, detail.did, WFEvents.AfterBtnApprove01, commentValue);
+            ShowAlert({
+                mode: 'success',
+                position: 'TOP_RIGHT',
+                title: 'Forza completamento',
+                message: 'Work item approvato con successo',
+                duration: 3000
+            });
+            await onCompleted?.();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onClose?.();
+            TMSpinner.hide();
+        }
+    };
+    const userName = detail.toUser?.name ?? detail.to;
+    const title = `Forza completamento - ${userName}`;
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della forzatura...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCheck, {}), caption: "Forza approvazione", width: '180px', disabled: disable, onClick: () => !disable && forceApproveAsync(), advancedColor: TMColors.success }) })] }) }));
+};
+/**
+ * Modal per forzare il rifiuto di un work item
+ */
+export const WorkflowForceRejectModal = ({ detail, onClose, onCompleted }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const disable = commentValue.length === 0;
+    const forceRejectAsync = async () => {
+        try {
+            TMSpinner.show({ description: 'Forza rifiuto in corso...' });
+            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.wfid, detail.did, WFEvents.AfterBtnReject01, commentValue);
+            ShowAlert({
+                mode: 'success',
+                position: 'TOP_RIGHT',
+                title: 'Forza rifiuto',
+                message: 'Work item rifiutato con successo',
+                duration: 3000
+            });
+            await onCompleted?.();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onClose?.();
+            TMSpinner.hide();
+        }
+    };
+    const userName = detail.toUser?.name ?? detail.to;
+    const title = `Forza rifiuto - ${userName}`;
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo del rifiuto...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconCloseCircle, {}), caption: "Forza rifiuto", width: '150px', disabled: disable, onClick: () => !disable && forceRejectAsync(), advancedColor: TMColors.error }) })] }) }));
+};
+/**
+ * Modal per terminare le istanze workflow selezionate
+ */
+export const WorkflowEndInstanceModal = ({ selectedInstances, onClose, onCompleted }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const disable = commentValue.length === 0;
+    const endInstancesAsync = async () => {
+        try {
+            TMSpinner.show({ description: 'Terminazione istanze in corso...' });
+            const workflowEngine = SDK_Globals.tmSession?.NewWorkflowEngine();
+            if (!workflowEngine)
+                throw new Error("Workflow engine non disponibile");
+            for (const instance of selectedInstances) {
+                if (instance.wfid && instance.did) {
+                    await workflowEngine.WFCtrl_EndInstanceAsync(instance.wfid, instance.tid ?? 0, instance.did, commentValue);
+                }
+            }
+            ShowAlert({
+                mode: 'success',
+                position: 'TOP_RIGHT',
+                title: SDKUI_Localizator.WorkflowEndInstance,
+                message: `${selectedInstances.length} ${selectedInstances.length === 1 ? 'istanza terminata' : 'istanze terminate'} con successo`,
+                duration: 3000
+            });
+            await onCompleted?.();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onClose?.();
+            TMSpinner.hide();
+        }
+    };
+    const title = selectedInstances.length === 1
+        ? `${SDKUI_Localizator.WorkflowEndInstance} (DID: ${selectedInstances[0].did})`
+        : `${SDKUI_Localizator.WorkflowEndInstance} (${selectedInstances.length} istanze)`;
+    return (_jsx(TMModal, { title: title, onClose: onClose, width: '600px', height: '270px', isModal: true, children: _jsxs(StyledModalBodyWrapper, { children: [_jsxs(StyledModalContentContainer, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Motivazione (obbligatorio):" }), _jsx(StyledTextArea, { "$isValid": !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value), placeholder: "Inserisci il motivo della terminazione...", maxLength: 200 }), _jsxs(CharacterCounter, { children: [commentValue.length, "/200"] })] }), _jsx(StyledModalFooter, { children: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconStop, {}), caption: SDKUI_Localizator.WorkflowEndInstance, width: '150px', disabled: disable, onClick: () => !disable && endInstancesAsync(), advancedColor: TMColors.error }) })] }) }));
 };
 export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, onCompleted }) => {
     const [users, setUsers] = useState([]);
@@ -210,6 +316,7 @@ export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
                 name: `${TASK_MORE_INFO_PREFIX_NAME}${nameInput}`
             };
             await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_MoreInfoAsync(TID, DID, taskWithPrefix);
+            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.MoreInformation, message: SDKUI_Localizator.MoreInfoSent, duration: 3000 });
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -218,7 +325,6 @@ export const WorkFlowMoreInfoPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
             onCompleted?.();
             onClose?.();
             TMSpinner.hide();
-            ShowAlert({ mode: 'success', position: 'TOP_RIGHT', title: SDKUI_Localizator.MoreInformation, message: SDKUI_Localizator.MoreInfoSent, duration: 3000 });
         }
     };
     useEffect(() => {

package/lib/components/features/workflow/diagram/DiagramItemComponent.d.ts

@@ -6,6 +6,7 @@ interface DiagramItemComponentProps {
     isSelected: boolean;
     isCurrent: boolean;
     readOnly: boolean;
+    allowItemClick?: boolean;
     onClick: (id: string, event: React.MouseEvent) => void;
     onDrag: (id: string, newX: number, newY: number) => void;
     onDragEnd: (id: string, finalX: number, finalY: number) => void;
@@ -13,6 +14,7 @@ interface DiagramItemComponentProps {
     onConnectorMouseUp: (itemId: string, connectorName: string) => void;
     onDimensionsChange: (itemId: string, width: number, height: number) => void;
     onDoubleClick?: (id: string) => void;
+    backgroundColor?: string;
 }
 declare const _default: React.NamedExoticComponent<DiagramItemComponentProps>;
 export default _default;

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -38,11 +38,16 @@ const AnimatingGroup = styled.g `
     `}
 `;
 const StyledDiagramItem = styled.g `
-  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
+  cursor: ${props => {
+    if (props.$isReadOnly && props.$allowItemClick)
+        return 'pointer';
+    if (props.$isReadOnly)
+        return 'default';
+    return props.$isDragging ? 'grabbing' : 'grab';
+}};
   filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
   
   & .item-main-shape {
-    fill: transparent;
     stroke: ${props => {
     if (props.$isDragging)
         return '#ffc107';
@@ -65,6 +70,8 @@ const StyledDiagramItem = styled.g `
     fill: #333;
     text-anchor: middle;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     pointer-events: none;
   }
 `;
@@ -82,7 +89,7 @@ const ConnectorHitArea = styled.circle `
   opacity: 0;
   pointer-events: all;
 `;
-const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
+const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allowItemClick = false, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, backgroundColor, }) => {
     const diagramItemRef = useRef(null);
     const textRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -207,12 +214,12 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onCli
         };
     }, [isDragging, handleMouseMove, handleMouseUp, readOnly]);
     const handleItemClick = useCallback((event) => {
-        if (readOnly)
+        if (readOnly && !allowItemClick)
             return;
         if (!isDragging) {
             onClick(item.ID, event);
         }
-    }, [item.ID, onClick, isDragging, readOnly]);
+    }, [item.ID, onClick, isDragging, readOnly, allowItemClick]);
     const handleMouseEnter = useCallback(() => {
         setIsHovered(true);
     }, []);
@@ -257,8 +264,8 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onCli
                 isTruncated = textLines[textLines.length - 1].endsWith('...');
             }
         }
-        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
+        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), backgroundColor && (_jsx("rect", { x: "-5", y: "-5", width: calculatedWidth + 10, height: calculatedHeight + 10, rx: "12", ry: "12", fill: backgroundColor, opacity: "0.4", style: { filter: 'blur(3px)' } })), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape", fill: "transparent" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
-    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
+    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, "$allowItemClick": allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };
 export default React.memo(DiagramItemComponent);

package/lib/components/features/workflow/diagram/DiagramItemForm.js

@@ -409,7 +409,7 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
             return qd;
         };
         const qdForRecipientsEditor = localItem.QD ?? newQD();
-        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), onValueChanged: handleLocalizedDescriptionChange }), _jsx(TMTextBox, { label: "SetID", value: localItem.ID ?? '', readOnly: true }), _jsx(WorkitemRecipientsEditor, { tos: localItem.Tos ?? '', mTID: wf?.MTID, qd: qdForRecipientsEditor, onTosChange: handleTosChange, onQDChange: handleSetRuleQDChange }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) }), _jsxs(FlexContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, elementStyle: { width: '320px' }, dataSource: SET_RULE_DATASOURCE, value: localItem.SetRule, isModifiedWhen: localItem.SetRule !== localItemOrig.SetRule, onValueChanged: (e) => { handleSetRuleChange(e.target.value); } }), _jsx(TMCheckBox, { value: localItem.AllowZeroTos ?? 0, label: SDKUI_Localizator.WorkflowAllowZeroTos, isModifiedWhen: localItem.AllowZeroTos !== localItemOrig.AllowZeroTos, onValueChanged: handleAllowZeroTosChange })] }), localItem.Type === DiagramItemTypes.ExecTask &&
+        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, tid: wf?.MTID, isModifiedWhen: localItem.Description !== localItemOrig.Description, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), onValueChanged: handleLocalizedDescriptionChange }), _jsx(TMTextBox, { label: "SetID", value: localItem.ID ?? '', readOnly: true }), _jsx(WorkitemRecipientsEditor, { tos: localItem.Tos ?? '', mTID: wf?.MTID, qd: qdForRecipientsEditor, onTosChange: handleTosChange, onQDChange: handleSetRuleQDChange }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) }), _jsxs(FlexContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, elementStyle: { width: '320px' }, dataSource: SET_RULE_DATASOURCE, value: localItem.SetRule, isModifiedWhen: localItem.SetRule !== localItemOrig.SetRule, onValueChanged: (e) => { handleSetRuleChange(e.target.value); } }), _jsx(TMCheckBox, { value: localItem.AllowZeroTos ?? 0, label: SDKUI_Localizator.WorkflowAllowZeroTos, isModifiedWhen: localItem.AllowZeroTos !== localItemOrig.AllowZeroTos, onValueChanged: handleAllowZeroTosChange })] }), localItem.Type === DiagramItemTypes.ExecTask &&
                     _jsxs(BoxContainer, { children: [_jsx(HeaderContainer, { children: _jsx("span", { children: SDKUI_Localizator.Application }) }), renderAppFields()] })] }));
     };
     // Function to render UpdateDcmt-specific fields

package/lib/components/features/workflow/diagram/RecipientList.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import TMButton from '../../../base/TMButton';
 import { IconAdd, IconDelete, SDKUI_Localizator } from '../../../../helper';
-import { TMUserChooserForm, TMUserIdViewer } from '../../../choosers/TMUserChooser';
+import { TMUserChooserForm } from '../../../choosers/TMUserChooser';
 import { TMGroupChooserForm, TMGroupIdViewer } from '../../../choosers/TMGroupChooser';
 import { TMMidViewer } from '../../../viewers/TMMidViewer';
 import { SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
@@ -13,6 +13,7 @@ import { TMMessageBoxManager, ButtonNames } from '../../../base/TMPopUp';
 import TMModal from '../../../base/TMModal';
 import { TMMetadataChooserForm } from '../../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../../query/TMQueryEditor';
+import TMDataUserIdItemViewer from '../../../viewers/TMDataUserIdItemViewer';
 export var WorkItemActorTypes;
 (function (WorkItemActorTypes) {
     WorkItemActorTypes[WorkItemActorTypes["None"] = 0] = "None";
@@ -168,7 +169,7 @@ const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange
         const actorId = parseInt(recipient.ActorID, 10);
         switch (recipient.ActorType) {
             case WorkItemActorTypes.UID:
-                return _jsx(TMUserIdViewer, { userId: actorId, showIcon: true });
+                return _jsx(TMDataUserIdItemViewer, { userId: actorId, showIcon: true });
             case WorkItemActorTypes.GID:
                 return _jsx(TMGroupIdViewer, { groupID: actorId, showIcon: true });
             case WorkItemActorTypes.MID:

package/lib/components/features/workflow/diagram/WFDiagram.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
+import { IWorkItemData } from '../../../../ts/types';
 interface IWFDiagramProps {
     xmlDiagramString: string;
     currentSetID?: string;
     allowEdit?: boolean;
     onDiagramChange?: (newXmlDiagram: string) => void;
+    workitems?: IWorkItemData[];
+    defaultAutoZoom?: boolean;
+    onDiagramItemClick?: (itemId: string, event: React.MouseEvent) => void;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;