@topconsultnpm/sdkui-react 6.21.0-t1 → 6.21.0-t2

package/lib/components/features/documents/TMDcmtFormActionButtons.js

@@ -1,23 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { ObjectClasses, SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS } from "../../../helper";
+import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
-import { ReferencesContainer, StyledReferenceButton } from "../../base/Styled";
+import { StyledReferenceButton } from "../../base/Styled";
 import TMButton from "../../base/TMButton";
+import TMModal from "../../base/TMModal";
 import TMTooltip from "../../base/TMTooltip";
 import { WorkFlowOperationButtons } from "../workflow/TMWorkflowPopup";
 const TMDcmtFormActionButtons = (props) => {
     const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
+    const [showAllMoreInfoModal, setShowAllMoreInfoModal] = useState(false);
+    const [showAllDossiersModal, setShowAllDossiersModal] = useState(false);
+    const [showAllWorkingGroupsModal, setShowAllWorkingGroupsModal] = useState(false);
     const tasksNumber = useMemo(() => moreInfoTasks?.length ?? 0, [moreInfoTasks]);
-    const currentTask = useMemo(() => {
+    const firstTask = useMemo(() => {
         if (!moreInfoTasks || moreInfoTasks.length === 0)
             return null;
-        if (moreInfoTasks.length === 1)
-            return moreInfoTasks[0];
-        // If there are multiple tasks, we cannot determine which one is relevant, so we return null
-        return null;
+        return moreInfoTasks[0];
     }, [moreInfoTasks]);
+    // Verifica se la More Info Card sarà effettivamente renderizzata (non null)
+    const isMoreInfoCardVisible = useMemo(() => {
+        if (!firstTask)
+            return false;
+        const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const isSender = firstTask?.fromID !== undefined && firstTask.fromID === userID;
+        const isRecipient = firstTask?.toID !== undefined && firstTask.toID === userID;
+        // Caso 4: L'utente è sia mittente che destinatario - la card non viene renderizzata
+        if (isSender && isRecipient)
+            return false;
+        return true;
+    }, [firstTask]);
     const { hasMoreInfo, hasApprove, hasReferences } = useMemo(() => {
         const referencesExist = showToppyForReferences && dcmtReferences?.some(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup);
         return {
@@ -31,8 +44,34 @@ const TMDcmtFormActionButtons = (props) => {
         showToppyForReferences,
         dcmtReferences
     ]);
+    // Raggruppa references per categoria
+    const { dossierRefs, workingGroupRefs } = useMemo(() => {
+        const dossiers = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier) ?? [];
+        const workingGroups = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.WorkingGroup) ?? [];
+        return { dossierRefs: dossiers, workingGroupRefs: workingGroups };
+    }, [dcmtReferences]);
+    const refButtonMouseMoved = useRef(false);
+    const handleRefButtonMouseDown = useCallback(() => { refButtonMouseMoved.current = false; }, []);
+    const handleRefButtonMouseMove = useCallback(() => { refButtonMouseMoved.current = true; }, []);
+    const handleRefButtonClick = useCallback((ref) => {
+        if (!refButtonMouseMoved.current) {
+            handleNavigateToReference(ref);
+        }
+    }, [handleNavigateToReference]);
     const Divider = () => (_jsx("div", { style: { height: '1px', width: '100%', background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent)', margin: '3px 0', opacity: 0.8, } }));
-    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && (tasksNumber === 1 ? (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center' }, children: _jsx("div", { style: {
+    const truncate = (str, maxLength) => str && str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+    const formatBadgeCount = (count) => count > 99 ? '99+' : `+${count}`;
+    const renderMoreInfoCard = (task, showOthersIndicator = false) => {
+        const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const isSender = task?.fromID !== undefined && task.fromID === userID;
+        const isRecipient = task?.toID !== undefined && task.toID === userID;
+        const senderNameTruncated = task?.fromName ? truncate(task.fromName, 30) : 'N/A';
+        const recipientNameTruncated = task?.toName ? truncate(task.toName, 30) : 'N/A';
+        const taskNameTrunc = task?.name ? truncate(task.name.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', ''), 30) : 'N/A';
+        // Caso 4: L'utente è sia mittente che destinatario - non renderizzare nulla
+        if (isSender && isRecipient)
+            return null;
+        return (_jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsxs("div", { style: {
                         padding: '10px',
                         color: '#FFFFFF',
                         maxWidth: '240px',
@@ -46,58 +85,218 @@ const TMDcmtFormActionButtons = (props) => {
                         textAlign: 'center',
                         gap: '10px',
                         cursor: 'default',
-                    }, children: (() => {
+                        flex: 1,
+                    }, children: [(isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask })), (isRecipient && !isSender) && (_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                gap: '10px'
+                            }, children: [_jsx(TaskLink, { messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] })), (!isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Richiesta maggiori informazioni tramite l'attività`, name: task.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: task.description ?? 'N/A', currentTask: task, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }))] }), showOthersIndicator && tasksNumber > 1 && ((() => {
+                    const bgColor = '#0077BE';
+                    const bgColorHover = '#1E90FF';
+                    return (_jsx("div", { onClick: () => setShowAllMoreInfoModal(true), onMouseDown: e => e.stopPropagation(), style: {
+                            position: 'absolute',
+                            right: '-36px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            width: '28px',
+                            height: '28px',
+                            background: bgColor,
+                            border: '2px solid rgba(255,255,255,0.5)',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                            color: '#FFFFFF',
+                            fontSize: '11px',
+                            fontWeight: 700,
+                            boxShadow: '0 2px 8px rgba(0, 0, 50, 0.3)',
+                            transition: 'all 0.2s',
+                        }, onMouseEnter: e => {
+                            e.currentTarget.style.background = bgColorHover;
+                            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+                        }, onMouseLeave: e => {
+                            e.currentTarget.style.background = bgColor;
+                            e.currentTarget.style.transform = 'translateY(-50%)';
+                        }, children: formatBadgeCount(tasksNumber - 1) }));
+                })())] }));
+    };
+    const renderReferenceCard = (ref, allRefs, showOthersIndicator, onShowAll, onClickRef) => {
+        const mapEntry = referenceActionMap[String(ref.objClass)];
+        const label = mapEntry?.label ?? 'Vai a riferimento';
+        const othersCount = allRefs.length - 1;
+        let backgroundColor;
+        switch (ref.objClass) {
+            case ObjectClasses.WorkingGroup:
+                backgroundColor = PDGS_COLORS.WORKING_GROUP;
+                break;
+            case ObjectClasses.Dossier:
+                backgroundColor = PDGS_COLORS.DOSSIER;
+                break;
+            case ObjectClasses.Document:
+                backgroundColor = PDGS_COLORS.DOCUMENT;
+                break;
+            default:
+                backgroundColor = "#C2388B";
+                break;
+        }
+        return (_jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, children: [_jsxs(StyledReferenceButton, { onMouseDown: handleRefButtonMouseDown, onMouseMove: handleRefButtonMouseMove, onClick: () => {
+                        handleRefButtonClick(ref);
+                        onClickRef?.();
+                    }, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, "$bgColor": backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }), showOthersIndicator && othersCount > 0 && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onShowAll(); }, onMouseDown: e => e.stopPropagation(), style: {
+                        position: 'absolute',
+                        right: '-36px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: '28px',
+                        height: '28px',
+                        background: backgroundColor,
+                        border: '2px solid rgba(255,255,255,0.5)',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'pointer',
+                        color: '#FFFFFF',
+                        fontSize: '11px',
+                        fontWeight: 700,
+                        boxShadow: '0 2px 8px rgba(0, 0, 50, 0.3)',
+                        transition: 'all 0.2s',
+                    }, onMouseEnter: e => {
+                        e.currentTarget.style.filter = 'brightness(1.2)';
+                        e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
+                    }, onMouseLeave: e => {
+                        e.currentTarget.style.filter = 'none';
+                        e.currentTarget.style.transform = 'translateY(-50%)';
+                    }, children: formatBadgeCount(othersCount) }))] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
+                        _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
+                        :
+                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: moreInfoTasks.slice(1).map((task, index) => {
                         const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
-                        const isSender = currentTask?.fromID !== undefined && currentTask.fromID === userID;
-                        const isRecipient = currentTask?.toID !== undefined && currentTask.toID === userID;
-                        const truncate = (str, maxLength) => str && str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
-                        const senderNameTruncated = currentTask?.fromName ? truncate(currentTask.fromName, 30) : 'N/A';
-                        const recipientNameTruncated = currentTask?.toName ? truncate(currentTask.toName, 30) : 'N/A';
-                        const taskNameTrunc = currentTask?.name ? truncate(currentTask.name.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', ''), 30) : 'N/A';
-                        return (_jsxs(_Fragment, { children: [(isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask })), (isRecipient && !isSender) && (_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                        gap: '10px'
-                                    }, children: [_jsx(TaskLink, { messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] }))] }));
-                    })() }) })) : (_jsx("div", { style: {
-                    padding: '10px',
-                    color: '#FFFFFF',
-                    maxWidth: '240px',
-                    background: 'linear-gradient(135deg, #1E90FF 0%, #0077BE 60%, #00509E 100%)',
-                    border: '1px solid rgba(255,255,255,0.15)',
-                    boxShadow: '0 8px 20px rgba(0, 0, 50, 0.4)',
-                    backdropFilter: 'blur(6px)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    textAlign: 'center',
-                    gap: '10px',
-                    cursor: 'default',
-                }, children: `Ci sono ${moreInfoTasks?.length ?? 0} richieste di maggiori informazioni. ${SDKUI_Localizator.ManageFromTaskPanel}` }))), hasMoreInfo && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
-                _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
-                :
-                    _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsx(ReferencesContainer, { children: dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup)
-                    .map((ref, index) => {
-                    const mapEntry = referenceActionMap[String(ref.objClass)];
-                    const label = mapEntry?.label ?? 'Vai a riferimento';
-                    let backgroundColor;
-                    switch (ref.objClass) {
-                        case ObjectClasses.WorkingGroup:
-                            backgroundColor = PDGS_COLORS.WORKING_GROUP;
-                            break;
-                        case ObjectClasses.Dossier:
-                            backgroundColor = PDGS_COLORS.DOSSIER;
-                            break;
-                        case ObjectClasses.Document:
-                            backgroundColor = PDGS_COLORS.DOCUMENT;
-                            break;
-                        default:
-                            backgroundColor = "#C2388B";
-                            break;
-                    }
-                    return (_jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, "$bgColor": backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }, `ref-${index}-${ref.objID}`));
-                }) }))] });
+                        const isSender = task?.fromID !== undefined && task.fromID === userID;
+                        const isRecipient = task?.toID !== undefined && task.toID === userID;
+                        const taskName = task?.name?.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', '') ?? 'N/A';
+                        let roleInfo = '';
+                        if (isSender && !isRecipient) {
+                            roleInfo = `Richiesta a: ${task.toName ?? 'N/A'}`;
+                        }
+                        else if (isRecipient && !isSender) {
+                            roleInfo = `Da: ${task.fromName ?? 'N/A'}`;
+                        }
+                        return (_jsxs("div", { onClick: () => {
+                                setShowMoreInfoTaskPopup(true);
+                                setShowMoreInfoTaskTask(task);
+                                setShowAllMoreInfoModal(false);
+                            }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: '#0077BE',
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: taskName }), roleInfo && (_jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word'
+                                            }, children: roleInfo }))] })] }, `moreinfo-task-${index}-${task.id}`));
+                    }) }) })), showAllDossiersModal && dossierRefs.length > 1 && (_jsx(TMModal, { title: `Altre ${SDKUI_Localizator.Dossiers} (${dossierRefs.length - 1})`, onClose: () => setShowAllDossiersModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: calcResponsiveSizes(deviceType, 'auto', 'auto', '95%'), children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: dossierRefs.slice(1).map((ref, index) => {
+                        const mapEntry = referenceActionMap[String(ref.objClass)];
+                        const label = mapEntry?.label ?? 'Vai a riferimento';
+                        return (_jsxs("div", { onClick: () => { handleNavigateToReference(ref); setShowAllDossiersModal(false); }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: PDGS_COLORS.DOSSIER,
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333'
+                                            }, children: [label, ":"] }), _jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: ref.objName })] })] }, `dossier-ref-${index}-${ref.objID}`));
+                    }) }) })), showAllWorkingGroupsModal && workingGroupRefs.length > 1 && (_jsx(TMModal, { title: `Altri ${SDKUI_Localizator.WorkingGroups} (${workingGroupRefs.length - 1})`, onClose: () => setShowAllWorkingGroupsModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: calcResponsiveSizes(deviceType, 'auto', 'auto', '95%'), children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
+                        padding: '15px',
+                        maxHeight: '50vh',
+                        overflowY: 'auto',
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: '#888 #f1f1f1'
+                    }, children: workingGroupRefs.slice(1).map((ref, index) => {
+                        const mapEntry = referenceActionMap[String(ref.objClass)];
+                        const label = mapEntry?.label ?? 'Vai a riferimento';
+                        return (_jsxs("div", { onClick: () => { handleNavigateToReference(ref); setShowAllWorkingGroupsModal(false); }, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                padding: '12px 16px',
+                                borderRadius: '8px',
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'pointer',
+                                transition: 'background-color 0.2s',
+                            }, onMouseEnter: e => e.currentTarget.style.backgroundColor = '#e8e8e8', onMouseLeave: e => e.currentTarget.style.backgroundColor = '#f5f5f5', children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: PDGS_COLORS.WORKING_GROUP,
+                                        flexShrink: 0
+                                    } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333'
+                                            }, children: [label, ":"] }), _jsx("span", { style: {
+                                                fontSize: '1rem',
+                                                color: '#333',
+                                                wordBreak: 'break-word',
+                                                fontWeight: 500
+                                            }, children: ref.objName })] })] }, `wg-ref-${index}-${ref.objID}`));
+                    }) }) }))] }));
 };
 export default TMDcmtFormActionButtons;
 const TaskLink = (props) => {

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -9,6 +9,7 @@ interface ITMDcmtPreviewProps {
     onNext?: () => void;
     onPrev?: () => void;
     onClosePanel?: () => void;
+    onBack?: () => void;
     allowMaximize?: boolean;
     onMaximizePanel?: () => void;
 }

package/lib/components/features/documents/TMDcmtPreview.js

@@ -22,7 +22,7 @@ const ErrorContent = ({ error, isAbortError, onRetry }) => {
     }
     return _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error });
 };
-const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev, onClosePanel, onNext, onPrev, allowMaximize = true, onMaximizePanel }) => {
+const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev, onClosePanel, onBack, onNext, onPrev, allowMaximize = true, onMaximizePanel }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
     const [isFromCache, setIsFromCache] = useState(false);
@@ -183,7 +183,7 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
         { icon: _jsx(IconCloseCircle, {}), name: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
         { icon: _jsx(IconClear, {}), name: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
     ], [cacheKey, removeDcmtsFileCache, clearDcmtsFileCache, setIsFromCache]);
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, onBack: onBack, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
                 ? _jsx(ErrorContent, { error: error, isAbortError: isAbortError, onRetry: reOpenDcmt })
                 : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { isBasketMode ? loadBasketFile() : loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob, isBasketMode) }) }));
 };

package/lib/components/features/documents/TMDcmtTasks.d.ts

@@ -10,6 +10,7 @@ interface TMDcmtTasksProps {
     afterTaskSaved: (task: TaskDescriptor | undefined, formMode: FormModes | undefined, forceRefresh?: boolean) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    onBack?: () => void;
 }
 declare const TMDcmtTasks: (props: TMDcmtTasksProps) => import("react/jsx-runtime").JSX.Element;
 export default TMDcmtTasks;

package/lib/components/features/documents/TMDcmtTasks.js

@@ -6,7 +6,7 @@ import { useTMPanelManagerContext } from "../../layout/panelManager/TMPanelManag
 import TMPanel from "../../base/TMPanel";
 import TMTasksPanelContent from "../tasks/TMTasksPanelContent";
 const TMDcmtTasks = (props) => {
-    const { taskContext, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { taskContext, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, afterTaskSaved, handleNavigateToWGs, handleNavigateToDossiers, onBack } = props;
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
@@ -19,6 +19,6 @@ const TMDcmtTasks = (props) => {
                 text: SDKUI_Localizator.Refresh,
             },
         ], children: _jsx(IconMenuVertical, { id: "TMTaksPanel-Commands-Header", color: 'white', cursor: 'pointer' }) }), []);
-    return _jsx("div", { style: { width: "100%", height: "100%", position: 'relative' }, children: _jsx(TMPanel, { title: SDKUI_Localizator.Widget_Activities, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onClose: countVisibleLeafPanels() > 1 ? () => togglePanelVisibility("tmDcmtTasks") : undefined, onMaximize: countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmDcmtTasks") : undefined, toolbar: toolbar, children: _jsx(TMTasksPanelContent, { id: "dcmtTasks", taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs ? handleNavigateToWGs : () => { return Promise.resolve(); }, handleNavigateToDossiers: handleNavigateToDossiers ? handleNavigateToDossiers : () => { return Promise.resolve(); }, afterTaskSaved: afterTaskSaved }) }) });
+    return _jsx("div", { style: { width: "100%", height: "100%", position: 'relative' }, children: _jsx(TMPanel, { title: SDKUI_Localizator.Widget_Activities, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onClose: countVisibleLeafPanels() > 1 ? () => togglePanelVisibility("tmDcmtTasks") : undefined, onMaximize: countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmDcmtTasks") : undefined, toolbar: toolbar, onBack: onBack, children: _jsx(TMTasksPanelContent, { id: "dcmtTasks", taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs ? handleNavigateToWGs : () => { return Promise.resolve(); }, handleNavigateToDossiers: handleNavigateToDossiers ? handleNavigateToDossiers : () => { return Promise.resolve(); }, afterTaskSaved: afterTaskSaved }) }) });
 };
 export default TMDcmtTasks;

package/lib/components/features/documents/TMDownloadRelationViewerSection.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo } from '../../../ts';
+import { IRelatedDcmt } from './TMMasterDetailDcmts';
+interface ITMDownloadRelationViewerSectionProps {
+    selectedDcmtInfos: Array<DcmtInfo>;
+    /** Notifica al parent la lista dei documenti correlati selezionati (deduplicati) */
+    onSelectionChanged: (items: Array<IRelatedDcmt>) => void;
+    allTasks?: Array<TaskDescriptor>;
+    getAllTasks?: () => Promise<void>;
+    deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+}
+/**
+ * Sezione condivisa tra TMCopyToFolderForm e TMMergeToPdfForm
+ * che mostra l'elenco dei documenti correlati e il tree di selezione
+ * per tipo documento / "solo metadati".
+ */
+declare const TMDownloadRelationViewerSection: React.FC<ITMDownloadRelationViewerSectionProps>;
+export default TMDownloadRelationViewerSection;