@topconsultnpm/sdkui-react 6.19.0-dev1.5 → 6.19.0-dev1.50

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TMDcmtPreview from './TMDcmtPreview';
-import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, UpdateEngineByID, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, TID_DID, UpdateEngineByID, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
 import { ContextMenu } from 'devextreme-react';
 import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
-import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
+import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
@@ -37,7 +37,7 @@ import WFDiagram from '../workflow/diagram/WFDiagram';
 import TMTooltip from '../../base/TMTooltip';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
     const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
@@ -59,6 +59,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [showReAssignPopup, setShowReAssignPopup] = useState(false);
     const [showMoreInfoPopup, setShowMoreInfoPopup] = useState(false);
     const [layout, setLayout] = useState();
+    const [customButtonsLayout, setCustomButtonsLayout] = useState();
     const appliedInputMidsRef = useRef(null);
     // Refs per evitare stale closure nei callback
     // I useCallback catturano i valori delle dipendenze al momento della creazione.
@@ -67,6 +68,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const formDataOrigRef = useRef([]);
     const formDataRef = useRef([]);
     const fromDTDRef = useRef();
+    const dcmtFileRef = useRef(null);
     const [isOpenDetails, setIsOpenDetails] = useState(false);
     const [isOpenMaster, setIsOpenMaster] = useState(false);
     const [secondaryMasterDcmts, setSecondaryMasterDcmts] = useState([]);
@@ -85,6 +87,11 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [showCommentForm, setShowCommentForm] = useState(false);
     const [isInitialLoading, setIsInitialLoading] = useState(true);
     const [isNavigating, setIsNavigating] = useState(false);
+    const [dcmtReferences, setDcmtReferences] = useState(undefined);
+    useEffect(() => {
+        if (!allowButtonsRefs)
+            setDcmtReferences(undefined);
+    }, [allowButtonsRefs]);
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // Custom hook to manage workflow approval data
@@ -152,9 +159,37 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 return;
             if (!DID && layoutMode === LayoutModes.Update)
                 return;
-            let getMetadataResult;
-            if (layoutMode === LayoutModes.Update)
-                getMetadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+            // Esegui chiamate in parallelo per ottimizzare le performance
+            const parallelCalls = [
+                // 1. GetMetadataAsync - solo se layoutMode === Update
+                layoutMode === LayoutModes.Update
+                    ? SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true) ?? Promise.resolve(undefined)
+                    : Promise.resolve(undefined),
+                // 2. Layout per il layoutMode corrente
+                LayoutCacheService.GetAsync(TID, layoutMode),
+                // 3. CustomButtonsLayout - solo se layoutMode === Update
+                layoutMode === LayoutModes.Update
+                    ? LayoutCacheService.GetAsync(TID, LayoutModes.None)
+                    : Promise.resolve(undefined),
+                // 4. Opcionalmente FindAllReferencesAsync se abilitato nelle impostazioni e se i bottoni sono richiesti
+                (allowButtonsRefs && SDKUI_Globals.userSettings.searchSettings.autoFindReferences.length > 0)
+                    ? SDK_Globals.tmSession?.NewSearchEngine().FindAllReferencesAsync(TID, DID, SDKUI_Globals.userSettings.searchSettings.autoFindReferences) ?? Promise.resolve(undefined)
+                    : Promise.resolve(undefined)
+            ];
+            const results = await Promise.all(parallelCalls);
+            // Destructuring: first three are always the original ones, fourth is references (or undefined)
+            const getMetadataResult = results[0];
+            const resLayout = results[1];
+            const customButtonsLayoutResult = results[2];
+            const findRefsResult = results[3];
+            // Save references result into state (may be undefined)
+            setDcmtReferences(findRefsResult);
+            // Imposta il layout e customButtonsLayout immediatamente
+            setLayout(resLayout);
+            if (layoutMode === LayoutModes.Update && customButtonsLayoutResult) {
+                setCustomButtonsLayout(customButtonsLayoutResult);
+            }
+            // Carica DTD e metadata
             let dtd = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, DID, getMetadataResult);
             setFromDTD(dtd);
             if (layoutMode === LayoutModes.Update || (layoutMode === LayoutModes.Ark && DID)) {
@@ -167,8 +202,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 setFormData(structuredClone(metadataList));
                 formDataOrigRef.current = structuredClone(metadataList);
             }
-            let resLayout = await SDK_Globals.tmSession?.NewDcmtTypeEngine().LayoutRetrieveAsync(TID, layoutMode);
-            setLayout(resLayout);
             (layoutMode === LayoutModes.Ark && !inputFile) && handleReset();
         }
         catch (e) {
@@ -179,7 +212,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setIsInitialLoading(false);
             setIsNavigating(false);
         }
-    }, [TID, DID, layoutMode, inputFile, setMetadataList, handleReset]);
+    }, [TID, DID, layoutMode, inputFile, setMetadataList, handleReset, allowButtonsRefs]);
     const createChange = useCallback((mid, metadataType, modifiedValue) => {
         return { mid, metadataType, modifiedValue };
     }, []);
@@ -211,6 +244,9 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     useEffect(() => {
         fromDTDRef.current = fromDTD;
     }, [fromDTD]);
+    useEffect(() => {
+        dcmtFileRef.current = dcmtFile;
+    }, [dcmtFile]);
     useEffect(() => {
         if (!inputFile || inputFile === null)
             return;
@@ -271,6 +307,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         if (layoutMode !== LayoutModes.Ark)
             return;
         setFocusedMetadataValue(undefined);
+        appliedInputMidsRef.current = null;
     }, [fromDTD, layoutMode]);
     useEffect(() => {
         if (!inputMids || inputMids.length === 0)
@@ -279,9 +316,13 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             return;
         if (!formData || formData.length === 0)
             return;
+        if (!formDataOrig || formDataOrig.length === 0)
+            return;
+        // Check if formData has actual user metadata (mid > 99), not just system metadata
+        if (!formData.some(md => md.mid && md.mid > 99))
+            return;
         if (appliedInputMidsRef.current && deepCompare(appliedInputMidsRef.current, inputMids))
             return;
-        appliedInputMidsRef.current = inputMids;
         let data = structuredClone(formData);
         for (let md of data) {
             if (!md.mid)
@@ -312,6 +353,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             }
         });
         setFormData(data);
+        appliedInputMidsRef.current = inputMids;
     }, [inputMids, layoutMode, formData, formDataOrig]);
     // Memoizza solo il valore WI_SetID per evitare re-render quando altri metadata cambiano
     const workItemSetIDValue = useMemo(() => formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [formData]);
@@ -396,8 +438,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         const outputMids = formData
             .filter(md => md.mid && md.mid > 100 && md.value && md.value.length > 0)
             .map(md => ({ mid: md.mid, value: md.value }));
-        passToSearch(outputMids);
-    }, [passToSearch, formData]);
+        passToSearch(outputMids, TID);
+    }, [passToSearch, formData, TID]);
     const isPreviewDisabled = useMemo(() => layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata, [layoutMode, fromDTD?.archiveConstraint]);
     const isBoardDisabled = useMemo(() => layoutMode !== LayoutModes.Update || fromDTD?.hasBlog !== 1, [layoutMode, fromDTD?.hasBlog]);
     const isSysMetadataDisabled = useMemo(() => layoutMode !== LayoutModes.Update, [layoutMode]);
@@ -406,18 +448,41 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const isWFDisabled = useMemo(() => layoutMode !== LayoutModes.Update || fetchError || workItems.length <= 0, [layoutMode, fetchError, workItems.length]);
     const showToppyForApprove = useMemo(() => layoutMode === LayoutModes.Update && !fetchError && workItems.length > 0 && !isOpenDetails && !isOpenMaster, [layoutMode, fetchError, workItems.length, isOpenDetails, isOpenMaster]);
     const showToppyForCompleteMoreInfo = useMemo(() => layoutMode === LayoutModes.Update && isTaskMoreInfo(taskMoreInfo?.name) && taskMoreInfo?.state !== Task_States.Completed, [layoutMode, taskMoreInfo?.name, taskMoreInfo?.state]);
+    const showToppyForReferences = useMemo(() => allowButtonsRefs && layoutMode === LayoutModes.Update && dcmtReferences && dcmtReferences.length > 0 && !isOpenDetails && !isOpenMaster, [allowButtonsRefs, layoutMode, dcmtReferences, isOpenDetails, isOpenMaster]);
     const isMobile = useMemo(() => deviceType === DeviceType.MOBILE, [deviceType]);
     const isApprView = useMemo(() => fromDTD?.templateTID === TemplateTIDs.WF_WIApprView, [fromDTD?.templateTID]);
     const workitemSetID = useMemo(() => workItems.find(o => o.did === Number(DID))?.setID || formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [workItems, DID, formData]);
     const approvalVID = useMemo(() => workItems.length > 0 ? Number(workItems[0].tid) : -1, [workItems]);
-    const commandsMenuItems = useMemo(() => [
-        { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, text: "Download file", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt, "download") },
-        { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: !isXMLFileExt(currentDcmt?.fileExt), text: "Download allegati XML", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, "download", undefined, openConfirmAttachmentsDialog) },
-        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })), operationType: 'singleRow', disabled: isMasterDisabled, text: SDKUI_Localizator.DcmtsMaster, onClick: () => { if (!isMasterDisabled)
-                    setIsOpenMaster(!isOpenMaster); } }] : []),
-        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, {})), operationType: 'singleRow', disabled: isDetailsDisabled, text: SDKUI_Localizator.DcmtsDetail, onClick: () => { if (!isDetailsDisabled)
-                    setIsOpenDetails(!isOpenDetails); } }] : []),
-    ], [fromDTD?.perm?.canRetrieveFile, currentDcmt?.fileExt, allowRelations, currentTIDHasMasterRelations, isMasterDisabled, currentTIDHasDetailRelations, isDetailsDisabled, getDcmts, downloadDcmtsAsync, openConfirmAttachmentsDialog]);
+    const commandsMenuItems = useMemo(() => {
+        const items = [
+            { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, text: "Download file", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt, "download") },
+            { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: !isXMLFileExt(currentDcmt?.fileExt), text: "Download allegati XML", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, "download", undefined, openConfirmAttachmentsDialog) },
+            ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })), operationType: 'singleRow', disabled: isMasterDisabled, text: SDKUI_Localizator.DcmtsMaster, onClick: () => { if (!isMasterDisabled)
+                        setIsOpenMaster(!isOpenMaster); } }] : []),
+            ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, {})), operationType: 'singleRow', disabled: isDetailsDisabled, text: SDKUI_Localizator.DcmtsDetail, onClick: () => { if (!isDetailsDisabled)
+                        setIsOpenDetails(!isOpenDetails); } }] : []),
+        ];
+        // Aggiungi submenu "Bottoni personalizzati" se esistono customButtons
+        if (customButtonsLayout?.customButtons && Array.isArray(customButtonsLayout.customButtons) && customButtonsLayout.customButtons.length > 0) {
+            const customButtonsItems = customButtonsLayout.customButtons.map((customButton) => ({
+                text: customButton.title || 'Bottone personalizzato',
+                onClick: () => {
+                    // Per ora, visualizziamo le proprietà del bottone in console e alert
+                    console.log('Custom Button Properties:', customButton);
+                    TMMessageBoxManager.show({
+                        message: `Custom Button:\n${JSON.stringify(customButton, null, 2)}`,
+                        buttons: [ButtonNames.OK],
+                    });
+                }
+            }));
+            items.push({
+                icon: svgToString(_jsx(IconCheck, {})),
+                text: 'Bottoni personalizzati',
+                items: customButtonsItems
+            });
+        }
+        return items;
+    }, [fromDTD?.perm?.canRetrieveFile, currentDcmt?.fileExt, allowRelations, currentTIDHasMasterRelations, isMasterDisabled, currentTIDHasDetailRelations, isDetailsDisabled, customButtonsLayout, getDcmts, downloadDcmtsAsync, openConfirmAttachmentsDialog]);
     const isModified = useMemo(() => calcIsModified(formData, formDataOrig), [formData, formDataOrig]);
     const formToolbar = useMemo(() => _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` }), layoutMode === LayoutModes.Ark &&
                 _jsx(TMTooltip, { content: SDKUI_Localizator.PassToSearch, position: 'bottom', children: _jsx(IconSearch, { style: { cursor: 'pointer' }, onClick: handlePassToSearch }) })] }), [allowNavigation, canPrev, canNext, itemIndex, count, isModified, formMode, onPrev, onNext, layoutMode, id, commandsMenuItems, handlePassToSearch]);
@@ -566,7 +631,13 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 ae.ArchivingFile = file;
             }
             else {
-                ae.ArchivingFile = dcmtFile;
+                ae.ArchivingFile = dcmtFileRef.current;
+            }
+            if (isSharedDcmt && sharedSourceTID && sharedSourceDID) {
+                const sharedDcmt = new TID_DID();
+                sharedDcmt.tid = sharedSourceTID;
+                sharedDcmt.did = sharedSourceDID;
+                ae.SharedDcmt = sharedDcmt;
             }
             let newDID = await ae.ArchiveAsync(abortControllerLocal.signal, (pd) => {
                 if (firstBlock) {
@@ -614,7 +685,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setShowWaitPanelLocal(false);
             setUseWaitPanelLocalState(false);
         }
-    }, [TID, dcmtFile, connectorFileSave, onSavedAsyncCallback, onSaveRecents, onClose, DID, setMetadataList, handleReset, layoutMode]);
+    }, [TID, connectorFileSave, onSavedAsyncCallback, onSaveRecents, onClose, DID, setMetadataList, handleReset, layoutMode, isSharedDcmt]);
     const handleClearForm = useCallback(() => {
         let data = structuredClone(formData);
         if (!data || data.length === 0)
@@ -756,9 +827,9 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     ]);
     const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID }), [TID, DID]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [], inputMids: inputMids }), [TID, layoutMode, formData, deviceType, inputMids]);
-    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
-            setDcmtFile(setFile);
-        }, enableDragDropOverlay: enableDragDropOverlay }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay]);
+    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (file) => {
+            setDcmtFile(file);
+        }, enableDragDropOverlay: enableDragDropOverlay }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay, setDcmtFile]);
     const tmWF = useMemo(() => {
         if (isWFDataLoading) {
             return (_jsx("div", { style: {
@@ -824,7 +895,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                     showHeader: showHeader,
                     title: fromDTD?.nameLoc,
                     allowMaximize: !isMobile,
-                    onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose,
+                    onBack: showBackButton ? (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose : undefined,
                     onClose: isClosable ? () => { } : undefined,
                     toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
                 },
@@ -877,7 +948,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 isActive: allInitialPanelVisibility['tmWF']
             }
         },
-    ], [fromDTD, tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, tmWF, isPreviewDisabled, isSysMetadataDisabled, isBoardDisabled, isWFDisabled, inputFile, isClosable]);
+    ], [fromDTD, showBackButton, tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, tmWF, isPreviewDisabled, isSysMetadataDisabled, isBoardDisabled, isWFDisabled, inputFile, isClosable]);
     // Retrieves the current document form setting based on the normalized TID
     const getCurrentDcmtFormSetting = () => {
         const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
@@ -959,6 +1030,23 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             title: SDKUI_Localizator.SignatureAndApprove,
         });
     }, [onOpenS4TViewerRequest, TID, DID]);
+    const handleNavigateToReference = useCallback((ref) => {
+        if (onReferenceClick) {
+            try {
+                onReferenceClick(ref);
+            }
+            catch (e) {
+                console.error('onReferenceClick handler failed', e);
+            }
+            return;
+        }
+    }, [onReferenceClick]);
+    // Mapping for objClass specific label/action. Easy to extend for future objClass types.
+    const referenceActionMap = useMemo(() => ({
+        [ObjectClasses.Dossier]: { label: 'Vai a pratica' },
+        [ObjectClasses.WorkingGroup]: { label: 'Vai a gruppo di lavoro' },
+        // add other ObjectClasses here as needed
+    }), []);
     const renderDcmtForm = () => {
         // Show flat spinner during initial load (before component is mounted)
         if (isInitialLoading) {
@@ -989,12 +1077,22 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                         isEditable: true,
                                         value: FormulaHelper.addFormulaTag(newFormula.expression)
                                     }));
-                                } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), showToppyForApprove && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: workItems.length === 1 ?
-                        _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(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: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] }) })), showToppyForCompleteMoreInfo && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
-                                    setShowCommentForm(true);
-                                } })] }) })), (showCommentForm && TID && DID) &&
+                                } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+                                _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
+                                :
+                                    _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
+                                            setShowCommentForm(true);
+                                        } })] })), showToppyForReferences && dcmtReferences && dcmtReferences
+                                .filter(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup) // keep only known objClass types
+                                .map((ref, index, arr) => {
+                                const mapEntry = referenceActionMap[String(ref.objClass)];
+                                const label = mapEntry?.label ?? 'Vai a riferimento';
+                                return (_jsxs(React.Fragment, { children: [index === 0 && (showToppyForApprove || showToppyForCompleteMoreInfo) && (_jsx("div", { style: {
+                                                height: 1,
+                                                backgroundColor: 'rgba(255,255,255,0.2)',
+                                                margin: '6px 0'
+                                            } })), _jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), children: [_jsx("span", { children: label }), _jsx("span", { children: ref.objName })] }, `ref-${index}-${ref.objID}`)] }, `ref-frag-${index}-${ref.objID}`));
+                            })] }) })), (showCommentForm && TID && DID) &&
                     _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: handleCompleteMoreInfo, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
@@ -1034,7 +1132,7 @@ const applyMetadataFilter = (data, showAll, listMaxItems, TID) => {
     return showAll ? filteredData : filteredData.slice(0, listMaxItems);
 };
 //#region Validaion
-const validateMetadataList = (mvdList = []) => {
+export const validateMetadataList = (mvdList = []) => {
     if (!Array.isArray(mvdList)) {
         throw new TypeError("metadataList must be an array of ITMMetadataProps.");
     }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import Toppy from '../../../assets/Toppy-generico.png';
+import { SDKUI_Localizator } from "../../../helper";
 const TMDragDropOverlay = (props) => {
     const { handleFile, refocusAfterFileInput } = props;
     const [dragOver, setDragOver] = useState(false);
@@ -91,6 +92,6 @@ const TMDragDropOverlay = (props) => {
                     alignItems: 'center',
                     gap: 20,
                     textAlign: 'center',
-                }, children: [_jsx("img", { src: Toppy, alt: "Toppy", style: { width: 80, height: 'auto' } }), _jsx("div", { style: { fontSize: '1.6rem' }, children: "Rilascia il tuo file qui" })] })] }));
+                }, children: [_jsx("img", { src: Toppy, alt: "Toppy", style: { width: 80, height: 'auto' } }), _jsx("div", { style: { fontSize: '1.6rem' }, children: SDKUI_Localizator.DropFileHere })] })] }));
 };
 export default TMDragDropOverlay;

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

@@ -279,7 +279,7 @@ const TMRelationViewerWrapper = ({ inputDcmts, isForMaster, showCurrentDcmtIndic
 const TMFormOrResultWrapper = ({ deviceType, focusedItem, onTaskCreateRequest }) => {
     const { setPanelVisibilityById } = useTMPanelManagerContext();
     return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
-            _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: false, onClose: () => {
+            _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, allowButtonsRefs: true, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: false, onClose: () => {
                     setPanelVisibilityById('tmTreeView', true);
                 } }) :
             _jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onTaskCreateRequest: onTaskCreateRequest, onClose: () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DcmtTypeDescriptor, SearchResultDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtTypeDescriptor, SearchResultDescriptor, DataColumnDescriptor } from "@topconsultnpm/sdk-ts";
 import { DcmtInfo } from '../../../ts';
 import { ITMTreeItem } from '../../base/TMTreeView';
 /**
@@ -17,6 +17,7 @@ export interface RelationTreeItem extends ITMTreeItem {
     isMaster?: boolean;
     isCorrelated?: boolean;
     isLoaded?: boolean;
+    isSeparator?: boolean;
     values?: any;
     searchResult?: SearchResultDescriptor[];
     itemsCount?: number;
@@ -49,8 +50,24 @@ export interface TMRelationViewerProps {
     onSelectedItemsChanged?: (items: RelationTreeItem[]) => void;
     /** Callback when a document is double-clicked */
     onDocumentDoubleClick?: (tid: number, did: number, name?: string) => void;
-    /** Custom item renderer */
-    customItemRender?: (item: RelationTreeItem | null) => JSX.Element;
+    /** Custom item renderer (full control). Return undefined to use default renderer. */
+    customItemRender?: (item: RelationTreeItem | null) => JSX.Element | undefined;
+    /** Custom document style function */
+    customDocumentStyle?: (item: RelationTreeItem) => React.CSSProperties;
+    /**
+     * Custom content renderer for the main container (when showMainDocument is false).
+     * Allows full control over the main container rendering including style and content.
+     * This replaces only the main container content, not the detail containers.
+     */
+    customMainContainerContent?: (item: RelationTreeItem, defaultContent: JSX.Element) => JSX.Element;
+    /** Custom document content renderer (partial control - replaces only metadata display) */
+    customDocumentContent?: (item: RelationTreeItem, defaultMetadataContent: JSX.Element) => JSX.Element;
+    /**
+     * Show metadata names before values (default: false).
+     * When true, displays "MetadataName: Value", otherwise just "Value".
+     * Value rendering respects DataDomain (uses TMDataListItemViewer for lists, TMUserIdViewer for users, etc.)
+     */
+    showMetadataNames?: boolean;
     /** Maximum depth level for recursive loading (default: 2) */
     maxDepthLevel?: number;
     /**
@@ -58,6 +75,23 @@ export interface TMRelationViewerProps {
      * If false, when isForMaster=true shows: master docs → detail docs as children (original navigation)
      */
     invertMasterNavigation?: boolean;
+    /**
+     * Additional static items to append at the end of the tree.
+     * These items are not loaded dynamically - they must already contain all data.
+     * Useful for showing pre-calculated documents (e.g., additional documents in dossiers).
+     * Can include a separator item by marking it with `isSeparator: true`.
+     */
+    additionalStaticItems?: RelationTreeItem[];
+    /**
+     * If false, hides the main document node and shows detail containers directly under the main container.
+     * Default: true (show main document as intermediate node)
+     */
+    showMainDocument?: boolean;
+    /**
+     * Custom label for the main container when showMainDocument is false.
+     * If not provided, uses the document type name.
+     */
+    labelMainContainer?: string;
 }
 /**
  * Check if document type has detail relations
@@ -67,5 +101,21 @@ export declare const hasDetailRelations: (mTID: number | undefined) => Promise<b
  * Check if document type has master relations
  */
 export declare const hasMasterRelations: (dTID: number | undefined) => Promise<boolean>;
+/**
+ * Get metadata keys excluding system metadata
+ */
+export declare const getMetadataKeys: (obj: any) => string[];
+/**
+ * Get display value keys for a document (max 5, prioritize SYS_Abstract)
+ */
+export declare const getDcmtDisplayValue: (obj: any) => string[];
+/**
+ * Get display value formatted by column type
+ */
+export declare const getDisplayValueByColumn: (col: DataColumnDescriptor | undefined, value: any) => any;
+/**
+ * Convert SearchResultDescriptor to structured data source with metadata
+ */
+export declare const searchResultToDataSource: (searchResult: SearchResultDescriptor | undefined, hideSysMetadata?: boolean) => Promise<any[]>;
 declare const TMRelationViewer: React.FC<TMRelationViewerProps>;
 export default TMRelationViewer;