@topconsultnpm/sdkui-react 6.20.0-dev1.15 → 6.20.0-dev1.16

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

@@ -0,0 +1,1574 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import TMDcmtPreview from './TMDcmtPreview';
+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, DcmtOperationTypes } from '../../../ts';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
+import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
+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, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots } from '../../../helper';
+import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
+import { Gutters, TMColors } from '../../../utils/theme';
+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';
+import TMSpinner, { Spinner } from '../../base/TMSpinner';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import TMDistinctValues from '../../choosers/TMDistinctValues';
+import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
+import TMMetadataValues, { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import { TMSaveFormButtonPrevious, TMSaveFormButtonNext, TMSaveFormButtonSave, TMSaveFormButtonUndo } from '../../forms/TMSaveForm';
+import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
+import TMFileUploader from '../../features/documents/TMFileUploader';
+import TMMasterDetailDcmts from './TMMasterDetailDcmts';
+import TMDcmtBlog from './TMDcmtBlog';
+import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
+import TMModal from '../../base/TMModal';
+import TMChooserForm from '../../forms/TMChooserForm';
+import TMSearchResult from '../search/TMSearchResult';
+import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
+import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
+import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
+import TMBlogCommentForm from '../blog/TMBlogCommentForm';
+import WFDiagram from '../workflow/diagram/WFDiagram';
+import TMTooltip from '../../base/TMTooltip';
+import TMDcmtTasks from './TMDcmtTasks';
+import TMToppyMessage from '../../../helper/TMToppyMessage';
+import { getTaskAssignedToMe } from '../tasks/TMTasksUtils';
+import TMCustomButton from '../../base/TMCustomButton';
+import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
+import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations';
+import TMViewHistoryDcmt from '../search/TMViewHistoryDcmt';
+import TMDcmtCheckoutInfoForm from '../search/TMDcmtCheckoutInfoForm';
+let abortControllerLocal = new AbortController();
+//#endregion
+const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, 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, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], openS4TViewer = false, onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
+    const { showHistory, showHistoryCallback, hideHistoryCallback, showCheckoutInformationForm, commentFormState, hideCommentFormCallback, showCheckoutInformationFormCallback, hideCheckoutInformationFormCallback, copyCheckoutPathToClipboardCallback, handleCheckOutCallback, handleCheckInCallback, refreshPreviewTrigger, showCicoWaitPanel, cicoWaitPanelTitle, showCicoPrimaryProgress, cicoPrimaryProgressText, cicoPrimaryProgressValue, cicoPrimaryProgressMax, } = useCheckInOutOperations();
+    const [id, setID] = useState('');
+    const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
+    const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
+    const [showPrimaryLocal, setShowPrimaryLocal] = useState(false);
+    const [waitPanelTextPrimaryLocal, setWaitPanelTextPrimaryLocal] = useState('');
+    const [waitPanelValuePrimaryLocal, setWaitPanelValuePrimaryLocal] = useState(0);
+    const [waitPanelMaxValuePrimaryLocal, setWaitPanelMaxValuePrimaryLocal] = useState(0);
+    const [showSecondaryLocal, setShowSecondaryLocal] = useState(false);
+    const [waitPanelTextSecondaryLocal, setWaitPanelTextSecondaryLocal] = useState('');
+    const [waitPanelValueSecondaryLocal, setWaitPanelValueSecondaryLocal] = useState(0);
+    const [waitPanelMaxValueSecondaryLocal, setWaitPanelMaxValueSecondaryLocal] = useState(0);
+    const [useWaitPanelLocalState, setUseWaitPanelLocalState] = useState(false);
+    const [formData, setFormData] = useState([]);
+    const [formDataOrig, setFormDataOrig] = useState([]);
+    const [validationItems, setValidationItems] = useState([]);
+    const [fromDTD, setFromDTD] = useState();
+    const [showApprovePopup, setShowApprovePopup] = useState(false);
+    const [showRejectPopup, setShowRejectPopup] = useState(false);
+    const [showReAssignPopup, setShowReAssignPopup] = useState(false);
+    const [showMoreInfoPopup, setShowMoreInfoPopup] = useState(false);
+    const [layout, setLayout] = useState();
+    const [customButtonsLayout, setCustomButtonsLayout] = useState();
+    const [customButton, setCustomButton] = useState();
+    const appliedInputMidsRef = useRef(null);
+    // Refs per evitare stale closure nei callback
+    // I useCallback catturano i valori delle dipendenze al momento della creazione.
+    // Questi ref vengono sincronizzati tramite useEffect e permettono di accedere
+    // sempre ai valori correnti senza dover ricreare i callback ad ogni cambio di stato.
+    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([]);
+    const [isOpenDistinctValues, setIsOpenDistinctValues] = useState(false);
+    const [isOpenFormulaEditor, setIsOpenFormulaEditor] = useState(false);
+    const [currentTIDHasDetailRelations, setCurrentTIDHasDetailRelations] = useState();
+    const [currentTIDHasMasterRelations, setCurrentTIDHasMasterRelations] = useState();
+    const [currentDcmt, setCurrentDcmt] = useState();
+    const [dcmtFile, setDcmtFile] = useState(null);
+    const [focusedMetadataValue, setFocusedMetadataValue] = useState();
+    const [showAll, setShowAll] = useState(layoutMode === LayoutModes.Ark);
+    const [fetchError, setFetchError] = useState(false);
+    const [isWFDataLoading, setIsWFDataLoading] = useState(false);
+    const [workItems, setWorkItems] = useState([]);
+    const [workflows, setWorkflows] = useState([]);
+    const [showCommentForm, setShowCommentForm] = useState(false);
+    const [isInitialLoading, setIsInitialLoading] = useState(true);
+    const [isNavigating, setIsNavigating] = useState(false);
+    const [dcmtReferences, setDcmtReferences] = useState(undefined);
+    // Stato per triggerare il refresh del blog dall'esterno
+    const [refreshBlogTrigger, setRefreshBlogTrigger] = useState(0);
+    const triggerBlogRefresh = useCallback(async () => {
+        setRefreshBlogTrigger(prev => prev + 1);
+    }, []);
+    useEffect(() => {
+        if (!allowButtonsRefs)
+            setDcmtReferences(undefined);
+    }, [allowButtonsRefs]);
+    const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync } = useDcmtOperations();
+    const { workflowApproveData } = useWorkflowApprove();
+    const currentSearchResults = useMemo(() => {
+        if (!formData || formData.length === 0 || !TID || !DID)
+            return [];
+        const selectMIDs = [];
+        const rowValues = [];
+        formData.forEach(md => {
+            if (md.mid !== undefined) {
+                selectMIDs.push(md.mid);
+                rowValues.push(md.value);
+            }
+        });
+        const searchResult = {
+            fromTID: TID,
+            selectMIDs: selectMIDs,
+            dtdResult: {
+                rows: [rowValues],
+                columns: selectMIDs.map(mid => ({ name: `MID_${mid}`, }))
+            },
+            dcmtsFound: 1,
+            dcmtsReturned: 1
+        };
+        return [searchResult];
+    }, [formData, TID, DID]);
+    const relatedDocuments = useRelatedDocuments({
+        selectedSearchResult: TID ? { fromTID: Number(TID) } : undefined,
+        focusedItem: currentDcmt ? { TID: currentDcmt.tid, DID: currentDcmt.did, rowIndex: 0 } : undefined,
+        currentSearchResults: currentSearchResults
+    });
+    const { relatedDcmts, showRelatedDcmtsChooser, archiveType, isOpenArchiveRelationForm, archiveRelatedDcmtFormTID, archiveRelatedDcmtFormMids, relatedDcmtsChooserDataSource, showManyToManyChooser, manyToManyChooserDataSource, manyToManyRelations, isPairingManyToMany, showPairDcmtsModal, pairedSearchResults, pairFloatingActionConfig, hasManyToManyRelation, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToMany, archiveMasterDocuments, archiveDetailDocuments, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, setShowRelatedDcmtsChooser, setShowManyToManyChooser, setShowPairDcmtsModal, setIsOpenArchiveRelationForm, setArchiveType, setArchiveRelatedDcmtFormTID, setArchiveRelatedDcmtFormMids, archiveRelatedDcmtHandler, executeManyToManyPairing } = relatedDocuments;
+    const fetchErrorShownRef = useRef(false);
+    useEffect(() => {
+        if (!TID)
+            return;
+        checkRelatedDcmtsArchiveCapability();
+        checkManyToManyCapability();
+    }, [TID, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability]);
+    const deviceType = useDeviceType();
+    const getDcmts = useCallback(() => {
+        return [{ TID: currentDcmt?.tid, DID: currentDcmt?.did, FILEEXT: currentDcmt?.fileExt }];
+    }, [currentDcmt?.tid, currentDcmt?.did, currentDcmt?.fileExt]);
+    const handleReset = useCallback(() => {
+        setDcmtFile(null);
+    }, []);
+    const setMetadataList = useCallback(async (mdList, getMetadataResult = undefined, archived = false, currentDID) => {
+        try {
+            let did = currentDID ?? DID;
+            if (!did)
+                return;
+            TMSpinner.show({ description: 'Loading Metadata...' });
+            let res = getMetadataResult ?? await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, did, true);
+            let dtd = res?.dtdResult;
+            let rows = dtd.rows ? dtd.rows[0] : [];
+            let mids = res?.selectMIDs;
+            let metadataList = searchResultToMetadataValues(TID, dtd, rows, mids, mdList, layoutMode);
+            if (archived) {
+                // Usa setFormData con funzione callback per accedere allo stato precedente
+                // invece di dipendere da formDataOrig nell'array di dipendenze
+                setFormData(prevFormDataOrig => {
+                    let tempMetadataList = [];
+                    for (let md of metadataList) {
+                        if (md.value === null) {
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === '') {
+                                tempMetadataList.push({ ...md, value: '' });
+                            }
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                                tempMetadataList.push({ ...md, value: undefined });
+                            }
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === null) {
+                                tempMetadataList.push(md);
+                            }
+                        }
+                        else {
+                            tempMetadataList.push(md);
+                        }
+                    }
+                    return tempMetadataList;
+                });
+                return;
+            }
+            setFormDataOrig(structuredClone(metadataList));
+            setFormData(structuredClone(metadataList));
+            // Sincronizza il ref con i dati caricati per evitare stale closure in handleSave
+            formDataOrigRef.current = structuredClone(metadataList);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [TID, DID, layoutMode]);
+    const fetchData = useCallback(async () => {
+        try {
+            setFetchError(false);
+            if (!TID)
+                return;
+            if (!DID && layoutMode === LayoutModes.Update)
+                return;
+            // 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
+                (() => {
+                    const refs = SDKUI_Globals?.userSettings?.searchSettings?.autoFindReferences ?? [];
+                    const hasRefs = allowButtonsRefs && Array.isArray(refs) && refs.length > 0;
+                    return hasRefs
+                        ? SDK_Globals.tmSession?.NewSearchEngine().FindAllReferencesAsync(TID, DID, refs) ?? 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)) {
+                await setMetadataList(dtd?.metadata ?? [], getMetadataResult);
+            }
+            else {
+                const renderedMetadata = dtd?.metadata?.filter((metadata) => handleArchiveVisibility(metadata)) ?? [];
+                const metadataList = searchResultToMetadataValues(dtd?.id, undefined, [], [], renderedMetadata, layoutMode);
+                setFormDataOrig(structuredClone(metadataList));
+                setFormData(structuredClone(metadataList));
+                formDataOrigRef.current = structuredClone(metadataList);
+            }
+            (layoutMode === LayoutModes.Ark && !inputFile) && handleReset();
+        }
+        catch (e) {
+            setFetchError(true);
+            throw e;
+        }
+        finally {
+            setIsInitialLoading(false);
+            setIsNavigating(false);
+        }
+    }, [TID, DID, layoutMode, inputFile, setMetadataList, handleReset, allowButtonsRefs]);
+    const createChange = useCallback((mid, metadataType, modifiedValue) => {
+        return { mid, metadataType, modifiedValue };
+    }, []);
+    const getSpecificChangedKeysWithValues = useCallback((originalList, modifiedList) => {
+        const changes = [];
+        if (!originalList || !modifiedList)
+            return changes;
+        const originalMap = new Map(originalList.map(item => [item.mid, item]));
+        for (const modified of modifiedList) {
+            if (modified.mid === undefined)
+                continue;
+            const original = originalMap.get(modified.mid);
+            if (!original)
+                continue;
+            if (original.value !== modified.value) {
+                changes.push(createChange(modified.mid, modified.md?.dataType ?? MetadataDataTypes.Varchar, modified.value));
+            }
+        }
+        return changes;
+    }, [createChange]);
+    useEffect(() => { setID(genUniqueId()); }, []);
+    // Sincronizza i ref con gli stati correnti per evitare stale closure nei callback.
+    // I useCallback catturano le variabili delle dipendenze al momento della loro creazione,
+    // quindi se uno stato cambia frequentemente, il callback avrebbe sempre valori vecchi.
+    // Usando i ref, possiamo accedere sempre ai valori più recenti senza dover ricreare i callback.
+    useEffect(() => {
+        formDataRef.current = formData;
+    }, [formData]);
+    useEffect(() => {
+        fromDTDRef.current = fromDTD;
+    }, [fromDTD]);
+    useEffect(() => {
+        dcmtFileRef.current = dcmtFile;
+    }, [dcmtFile]);
+    useEffect(() => {
+        if (!inputFile || inputFile === null)
+            return;
+        setDcmtFile(inputFile);
+    }, [inputFile]);
+    useEffect(() => {
+        const run = async () => {
+            try {
+                fetchErrorShownRef.current = false; // Reset flag all'inizio
+                // Distinguish between initial load and navigation
+                if (isInitialLoading) {
+                    // First load - keep isInitialLoading true
+                    await fetchData();
+                }
+                else {
+                    // Navigation - use isNavigating instead
+                    setIsNavigating(true);
+                    await fetchData();
+                }
+            }
+            catch (e) {
+                // Mostra l'errore solo se non è già stato mostrato (evita duplicati in StrictMode)
+                if (!fetchErrorShownRef.current) {
+                    fetchErrorShownRef.current = true;
+                    TMExceptionBoxManager.show({ exception: e });
+                    // Se il caricamento fallisce, chiudi il form
+                    onClose?.();
+                }
+            }
+        };
+        run();
+    }, [TID, DID, fetchData]);
+    useEffect(() => {
+        if (formData.length > 0) {
+            setValidationItems(validateMetadataList(formData));
+            const newDcmt = {
+                tid: formData.find(o => o.mid == SystemMIDsAsNumber.TID)?.value,
+                did: formData.find(o => o.mid == SystemMIDsAsNumber.DID)?.value,
+                fileCount: formData.find(o => o.mid == SystemMIDsAsNumber.FileCount)?.value,
+                fileSize: formData.find(o => o.mid == SystemMIDsAsNumber.FileSize)?.value,
+                fileExt: formData.find(o => o.mid == SystemMIDsAsNumber.FileExt)?.value
+            };
+            if (!currentDcmt ||
+                currentDcmt.tid !== newDcmt.tid ||
+                currentDcmt.did !== newDcmt.did ||
+                currentDcmt.fileExt !== newDcmt.fileExt ||
+                currentDcmt.fileSize !== newDcmt.fileSize ||
+                currentDcmt.fileCount !== newDcmt.fileCount) {
+                setCurrentDcmt(newDcmt);
+            }
+        }
+    }, [formData, formDataOrig, getSpecificChangedKeysWithValues, currentDcmt]);
+    useEffect(() => {
+        hasDetailRelations(TID).then((value) => setCurrentTIDHasDetailRelations(value));
+        hasMasterRelations(TID).then((value) => setCurrentTIDHasMasterRelations(value));
+    }, [TID]);
+    useEffect(() => {
+        if (layoutMode !== LayoutModes.Ark)
+            return;
+        setFocusedMetadataValue(undefined);
+        appliedInputMidsRef.current = null;
+    }, [fromDTD, layoutMode]);
+    useEffect(() => {
+        if (!inputMids || inputMids.length === 0)
+            return;
+        if (layoutMode !== LayoutModes.Ark)
+            return;
+        if (!formData || formData.length === 0)
+            return;
+        if (!formDataOrig || formDataOrig.length === 0)
+            return;
+        const hasUserMetadata = formData.some(md => md.mid && md.mid > 99);
+        if (!hasUserMetadata)
+            return;
+        if (appliedInputMidsRef.current && deepCompare(appliedInputMidsRef.current, inputMids))
+            return;
+        let data = structuredClone(formData);
+        for (let md of data) {
+            if (!md.mid)
+                continue;
+            if (md.mid > 99) {
+                const defaultValue = md.md?.defaultValue;
+                if (defaultValue) {
+                    if (FormulaHelper.isFormula(defaultValue)) {
+                        md.value = undefined;
+                    }
+                    else {
+                        md.value = defaultValue;
+                    }
+                }
+                else if (formDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                    if (md.value)
+                        md.value = undefined;
+                }
+                else if (md.value && md.value.length > 0) {
+                    md.value = '';
+                }
+            }
+        }
+        inputMids.forEach(inputMid => {
+            const md = data.find(m => m.mid === inputMid.mid);
+            if (md) {
+                md.value = inputMid.value;
+            }
+        });
+        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]);
+    // Valore derivato: true se formData ha elementi validi
+    const hasFormData = useMemo(() => formData.length > 0 && formData.some(md => md.mid && md.mid > 99), [formData]);
+    const handleCheckOutOperationCallback = async (checkout) => {
+        if (!currentDcmt)
+            return;
+        await handleCheckOutCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, checkout, fromDTD?.name ?? SDKUI_Localizator.SearchResult, downloadDcmtsAsync, updateCurrentDcmt);
+    };
+    const handleCheckInOperationCallback = async () => {
+        if (!currentDcmt)
+            return;
+        await handleCheckInCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt, fileName: fromDTD?.name ?? SDKUI_Localizator.SearchResult }, updateCurrentDcmt, undefined);
+    };
+    const copyCheckoutPathToClipboardOperationCallback = () => {
+        if (!currentDcmt)
+            return;
+        copyCheckoutPathToClipboardCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, fromDTD?.name ?? SDKUI_Localizator.SearchResult);
+    };
+    useEffect(() => {
+        const loadAllWfData = async () => {
+            if (layoutMode !== LayoutModes.Update || !DID || fromDTD?.templateTID !== TemplateTIDs.WF_WIApprView) {
+                setWorkItems([]);
+                setWorkflows([]);
+                return;
+            }
+            setIsWFDataLoading(true);
+            try {
+                // 1. item da processare in modo sincrono
+                const itemsToProcess = [];
+                for (const workflow of workflowApproveData) {
+                    for (const dataRow of workflow.dtdResult?.rows ?? []) {
+                        const did = Number(dataRow?.[1]);
+                        if (did === Number(DID)) {
+                            const tid = Number(dataRow?.[0]);
+                            itemsToProcess.push({ tid, did });
+                        }
+                    }
+                }
+                if (itemsToProcess.length === 0) {
+                    setWorkItems([]);
+                    setWorkflows([]);
+                    setIsWFDataLoading(false);
+                    return;
+                }
+                // promises per i setID in modo condizionale
+                let setIDPromises;
+                if (workItemSetIDValue !== undefined) {
+                    // Se abbiamo il setID dal form, non facciamo chiamate di rete.
+                    setIDPromises = itemsToProcess.map(() => Promise.resolve(workItemSetIDValue));
+                }
+                else {
+                    // Altrimenti, procediamo con le chiamate di rete come prima.
+                    setIDPromises = itemsToProcess.map(item => getWorkItemSetIDAsync(item.tid, item.did));
+                }
+                // Crea un array di Promise per tutte le chiamate a GetWFInfoAsync
+                const workflowInfoPromises = itemsToProcess.map(item => WorkflowCacheService.GetWFInfoAsync(item.tid));
+                // Esegui tutte le chiamate in parallelo e attendi i risultati
+                const setIDResults = await Promise.all(setIDPromises);
+                const workflowInfoResults = await Promise.all(workflowInfoPromises);
+                // Combina i risultati
+                const finalWorkItems = itemsToProcess.map((item, index) => ({
+                    ...item,
+                    setID: setIDResults[index],
+                }));
+                const validWorkflows = workflowInfoResults.filter(Boolean);
+                // Aggiorna lo stato una sola volta con i dati finali
+                setWorkItems(finalWorkItems);
+                setWorkflows(validWorkflows);
+            }
+            catch (error) {
+                TMExceptionBoxManager.show({ exception: error });
+                setWorkItems([]);
+                setWorkflows([]);
+            }
+            finally {
+                setIsWFDataLoading(false);
+            }
+        };
+        // Usa hasFormData invece di formDataRef.current
+        if (!hasFormData || !fromDTD?.id) {
+            // console.log("formData is empty or fromDTD not loaded, skipping loadAllWfData");
+            return;
+        }
+        if (workItemSetIDValue !== undefined || workflowApproveData.length > 0)
+            loadAllWfData();
+    }, [hasFormData, workItemSetIDValue, workflowApproveData, DID, layoutMode, fromDTD?.templateTID, fromDTD?.id]);
+    const getSelectionDcmtInfo = useCallback(() => {
+        let dcmts = [];
+        dcmts.push({ TID: TID ?? 0, DID: DID ?? 0 });
+        return dcmts;
+    }, [TID, DID]);
+    const handleAddItem = useCallback((tid, did) => {
+        let newItem = { TID: tid ?? 0, DID: did ?? 0 };
+        setSecondaryMasterDcmts((prevItems) => [...prevItems, newItem]);
+    }, []);
+    const handleRemoveItem = useCallback((tid, did) => {
+        setSecondaryMasterDcmts((prevItems) => prevItems.filter(item => item.TID !== tid && item.DID !== did));
+    }, []);
+    const handlePassToSearch = useCallback(() => {
+        if (!passToSearch)
+            return;
+        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, 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]);
+    const isDetailsDisabled = useMemo(() => layoutMode !== LayoutModes.Update || !DID, [layoutMode, DID]);
+    const isMasterDisabled = useMemo(() => layoutMode !== LayoutModes.Update || !DID, [layoutMode, DID]);
+    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]);
+    //here
+    const commandsMenuItems = useMemo(() => {
+        const items = [];
+        const operationsItems = [];
+        operationsItems.push({
+            icon: svgToString(_jsx(IconDownload, {})),
+            operationType: 'singleRow',
+            disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes,
+            text: SDKUI_Localizator.DownloadFile,
+            onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt, "download", undefined, undefined, true)
+        }, {
+            icon: svgToString(_jsx(IconDownload, {})),
+            operationType: 'singleRow',
+            disabled: !isXMLFileExt(currentDcmt?.fileExt),
+            text: SDKUI_Localizator.DownloadXMLAttachments,
+            onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, "download", undefined, openConfirmAttachmentsDialog, true)
+        });
+        if (layoutMode === LayoutModes.Update && DID) {
+            operationsItems.push({
+                icon: svgToString(_jsx(IconStar, {})),
+                text: SDKUI_Localizator.AddTo + ' ' + SDKUI_Localizator.Favorites,
+                operationType: 'singleRow',
+                disabled: false,
+                onClick: async () => {
+                    await runOperationAsync(getDcmts(), DcmtOperationTypes.AddToFavs);
+                },
+            });
+        }
+        if (onTaskCreateRequest && layoutMode === LayoutModes.Update && DID) {
+            operationsItems.push({
+                icon: svgToString(_jsx(IconActivity, {})),
+                text: SDKUI_Localizator.CreateContextualTask,
+                operationType: 'singleRow',
+                disabled: false,
+                onClick: () => {
+                    const dcmt = getDcmts()[0];
+                    const taskContext = {
+                        document: {
+                            tid: dcmt.TID,
+                            did: dcmt.DID,
+                            name: fromDTD?.description || ''
+                        }
+                    };
+                    onTaskCreateRequest(taskContext);
+                }
+            });
+        }
+        if (operationsItems.length > 0) {
+            items.push({
+                icon: svgToString(_jsx(IconCheck, {})),
+                text: SDKUI_Localizator.DocumentOperations,
+                items: operationsItems
+            });
+        }
+        // Check in/Check out menu
+        const { cicoEnabled, checkoutStatus } = getDcmtCicoStatus(formData, [], fromDTD);
+        items.push({
+            icon: svgToString(_jsx(IconFileDots, {})),
+            text: "Check in/Check out",
+            disabled: false,
+            items: [
+                {
+                    icon: "edit",
+                    text: 'Check out',
+                    disabled: !cicoEnabled || checkoutStatus.isCheckedOut,
+                    onClick: () => handleCheckOutOperationCallback(true),
+                },
+                {
+                    icon: "unlock",
+                    text: 'Check in',
+                    onClick: () => handleCheckInOperationCallback(),
+                    disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode'
+                },
+                {
+                    icon: "remove",
+                    text: SDKUI_Localizator.CancelCheckOut,
+                    disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode',
+                    onClick: () => handleCheckOutOperationCallback(false),
+                },
+                {
+                    icon: "info",
+                    text: SDKUI_Localizator.CheckoutInfo,
+                    onClick: showCheckoutInformationFormCallback,
+                    disabled: !checkoutStatus.isCheckedOut
+                },
+                {
+                    icon: "copy",
+                    text: SDKUI_Localizator.CopyCheckoutPath,
+                    onClick: copyCheckoutPathToClipboardOperationCallback,
+                    disabled: !checkoutStatus.isCheckedOut
+                },
+                {
+                    icon: "clock",
+                    text: SDKUI_Localizator.History,
+                    disabled: !cicoEnabled,
+                    onClick: showHistoryCallback,
+                },
+            ]
+        });
+        if (allowRelations && layoutMode === LayoutModes.Update && DID) {
+            const relationsItems = [
+                {
+                    icon: svgToString(_jsx(IconPair, {})),
+                    text: SDKUI_Localizator.MatchManyDocumentsManyToMany,
+                    operationType: 'singleRow',
+                    disabled: !hasManyToManyRelation,
+                    onClick: async () => await pairManyToMany?.(true)
+                },
+                {
+                    icon: svgToString(_jsx(IconUnpair, {})),
+                    text: SDKUI_Localizator.UnmatchManyDocumentsManyToMany,
+                    operationType: 'singleRow',
+                    disabled: !hasManyToManyRelation,
+                    onClick: async () => await pairManyToMany?.(false)
+                },
+                {
+                    icon: svgToString(_jsx(IconArchiveMaster, {})),
+                    text: SDKUI_Localizator.ArchiveMasterDocument,
+                    operationType: 'singleRow',
+                    beginGroup: true,
+                    disabled: canArchiveMasterRelation !== true,
+                    onClick: async () => { if (TID)
+                        await archiveMasterDocuments?.(TID); }
+                },
+                {
+                    icon: svgToString(_jsx(IconArchiveDetail, {})),
+                    text: SDKUI_Localizator.ArchiveDetailDocument,
+                    operationType: 'singleRow',
+                    disabled: canArchiveDetailRelation !== true,
+                    onClick: async () => { if (TID)
+                        await archiveDetailDocuments?.(TID); }
+                },
+                {
+                    icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })),
+                    text: SDKUI_Localizator.DcmtsMaster,
+                    operationType: 'singleRow',
+                    visible: true,
+                    beginGroup: true,
+                    disabled: !currentTIDHasMasterRelations || isMasterDisabled,
+                    onClick: () => { if (!isMasterDisabled)
+                        setIsOpenMaster(!isOpenMaster); }
+                },
+                {
+                    icon: svgToString(_jsx(IconDetailDcmts, {})),
+                    text: SDKUI_Localizator.DcmtsDetail,
+                    operationType: 'singleRow',
+                    disabled: !currentTIDHasDetailRelations || isDetailsDisabled,
+                    visible: true,
+                    onClick: () => { if (!isDetailsDisabled)
+                        setIsOpenDetails(!isOpenDetails); }
+                }
+            ];
+            items.push({
+                icon: svgToString(_jsx(IconRelation, {})),
+                text: SDKUI_Localizator.Relations,
+                items: relationsItems
+            });
+        }
+        if (layoutMode === LayoutModes.Update && DID) {
+            const fullTextItems = [
+                {
+                    icon: svgToString(_jsx(IconInfo, {})),
+                    text: SDKUI_Localizator.IndexingInformation,
+                    operationType: 'singleRow',
+                    disabled: false,
+                    onClick: async () => {
+                        try {
+                            TMSpinner.show({ description: `${SDKUI_Localizator.Loading}...` });
+                            const dcmts = getDcmts();
+                            const msg = await SDK_Globals.tmSession?.NewSearchEngine().FreeSearchGetDcmtInfoAsync(dcmts[0].TID, dcmts[0].DID);
+                            TMMessageBoxManager.show({ buttons: [ButtonNames.OK], message: msg, title: SDKUI_Localizator.IndexingInformation });
+                        }
+                        catch (e) {
+                            TMExceptionBoxManager.show({ exception: e });
+                        }
+                        finally {
+                            TMSpinner.hide();
+                        }
+                    }
+                },
+                {
+                    icon: svgToString(_jsx(IconArchiveDoc, {})),
+                    text: SDKUI_Localizator.IndexOrReindex,
+                    operationType: 'singleRow',
+                    disabled: false,
+                    onClick: async () => {
+                        await runOperationAsync(getDcmts(), DcmtOperationTypes.FreeSearchReindex);
+                    }
+                },
+                {
+                    icon: svgToString(_jsx(IconDelete, {})),
+                    text: SDKUI_Localizator.IndexingDelete,
+                    operationType: 'singleRow',
+                    disabled: false,
+                    onClick: async () => {
+                        await runOperationAsync(getDcmts(), DcmtOperationTypes.FreeSearchPurge);
+                    }
+                }
+            ];
+            items.push({
+                icon: svgToString(_jsx(IconSearch, {})),
+                text: SDKUI_Localizator.FullTextSearch,
+                items: fullTextItems
+            });
+        }
+        // Aggiungi submenu "Bottoni personalizzati" se esistono customButtons
+        if (customButtonsLayout?.customButtons && Array.isArray(customButtonsLayout.customButtons) && customButtonsLayout.customButtons.length > 0) {
+            const customButtonsItems = customButtonsLayout.customButtons
+                .filter((customButton) => customButton.isForUpdate && customButton.isForUpdate > 0)
+                .map((customButton) => ({
+                icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: true })),
+                text: customButton.title || 'Bottone personalizzato',
+                onClick: () => setCustomButton(customButton)
+            }));
+            items.push({
+                icon: svgToString(_jsx(IconCheck, {})),
+                text: SDKUI_Localizator.CustomButtons,
+                items: customButtonsItems
+            });
+        }
+        return items;
+    }, [
+        fromDTD?.perm?.canRetrieveFile,
+        fromDTD?.description,
+        currentDcmt?.fileExt,
+        allowRelations,
+        currentTIDHasMasterRelations,
+        isMasterDisabled,
+        currentTIDHasDetailRelations,
+        isDetailsDisabled,
+        customButtonsLayout,
+        layoutMode,
+        TID,
+        DID,
+        onTaskCreateRequest,
+        hasManyToManyRelation,
+        canArchiveMasterRelation,
+        canArchiveDetailRelation,
+        pairManyToMany,
+        archiveMasterDocuments,
+        archiveDetailDocuments,
+        getDcmts,
+        downloadDcmtsAsync,
+        runOperationAsync,
+        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]);
+    const handleUndo = useCallback(() => {
+        setFormData(structuredClone(formDataOrig));
+    }, [formDataOrig]);
+    const handleConfirmAction = useCallback(async () => {
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            message: layoutMode === LayoutModes.Update ? SDKUI_Localizator.SaveQuestion : 'Sei sicuro di voler archiviare questo documento?',
+            onButtonClick(e) {
+                if (e !== ButtonNames.YES)
+                    return;
+                layoutMode === LayoutModes.Update ? handleSave() : handleArchiveCompleted();
+            },
+        });
+    }, [isModal, id, layoutMode]);
+    // Funzione helper per ottenere e aggiornare i metadati con gestione errori centralizzata
+    const refreshMetadataAsync = useCallback(async () => {
+        let metadataResult = undefined;
+        let hasGetMetadataError = false;
+        try {
+            metadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+        }
+        catch (metadataError) {
+            hasGetMetadataError = true;
+            // Estrai ErrorCode dal campo detail se disponibile
+            let errorCode = undefined;
+            if (metadataError?.isApiException && metadataError?.response?.detail) {
+                try {
+                    const detailObj = JSON.parse(metadataError.response.detail);
+                    errorCode = detailObj?.ErrorCode;
+                }
+                catch (parseError) {
+                    console.log("Impossibile parsare il detail dell'eccezione:", parseError);
+                }
+            }
+            // Se ErrorCode è -5, mostra messaggio personalizzato, altrimenti mostra l'eccezione originale
+            if (errorCode === -5) {
+                TMMessageBoxManager.show({
+                    message: SDKUI_Localizator.DcmtOutOfView,
+                    buttons: [ButtonNames.OK],
+                });
+            }
+            else {
+                TMExceptionBoxManager.show({ exception: metadataError });
+            }
+            // Usa null per indicare al callback che c'è stato un errore e non deve ritentare
+            metadataResult = null;
+        }
+        // Aggiorna i metadati locali solo se non ci sono stati errori
+        if (!hasGetMetadataError && metadataResult && metadataResult !== null) {
+            await setMetadataList(fromDTDRef.current?.metadata ?? [], metadataResult);
+        }
+        return { success: !hasGetMetadataError, result: metadataResult };
+    }, [TID, DID, setMetadataList]);
+    const updateCurrentDcmt = useCallback(async () => {
+        try {
+            TMSpinner.show({ description: 'Aggiornamento in corso...' });
+            const { success, result: metadataResult } = await refreshMetadataAsync();
+            if (!success)
+                onClose?.();
+            await onSavedAsyncCallback?.(TID, DID, metadataResult === null ? null : metadataResult);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [refreshMetadataAsync, onClose]);
+    const handleSave = useCallback(async () => {
+        const ue = new UpdateEngineByID(SDK_Globals.tmSession);
+        ue.DID = DID;
+        ue.TID = TID;
+        ue.Metadata_ClearAll();
+        try {
+            TMSpinner.show({ description: 'Aggiornamento in corso...' });
+            // Usa i ref invece degli stati per evitare stale closure.
+            // handleSave è un useCallback che verrebbe ricreato ogni volta che formData/formDataOrig cambiano,
+            // causando problemi di performance. Usando i ref, possiamo mantenere lo stesso callback
+            // ma accedere sempre ai valori correnti tramite formDataRef.current e formDataOrigRef.current.
+            const changes = getSpecificChangedKeysWithValues(formDataOrigRef.current, formDataRef.current);
+            for (let metadata of changes) {
+                if (!metadata.modifiedValue)
+                    ue.Metadata_AddNull(metadata.mid);
+                else {
+                    switch (metadata.metadataType) {
+                        case MetadataDataTypes.DateTime:
+                            ue.Metadata_AddDateTime(metadata.mid, new Date(metadata.modifiedValue));
+                            break;
+                        case MetadataDataTypes.Number:
+                            ue.Metadata_AddNumber(metadata.mid, metadata.modifiedValue);
+                            break;
+                        case MetadataDataTypes.Varchar:
+                            ue.Metadata_AddString(metadata.mid, metadata.modifiedValue);
+                            break;
+                        default: ue.Metadata_AddNull(metadata.mid);
+                    }
+                }
+            }
+            await ue.UpdateAsync();
+            // Aggiorna lo stato locale immediatamente dopo il salvataggio riuscito
+            // Questo garantisce che isModified diventi false anche se il reload fallisce
+            const savedFormData = structuredClone(formDataRef.current);
+            setFormDataOrig(savedFormData);
+            formDataOrigRef.current = savedFormData;
+            // Usa la funzione helper per ottenere i metadati aggiornati
+            const { success, result: metadataResult } = await refreshMetadataAsync();
+            // Esegui sempre il callback:
+            // - Se metadataResult è un oggetto: refresh normale
+            // - Se metadataResult è null: GetMetadataAsync fallito, rimuove il documento dalla griglia senza ritentare
+            // - Se metadataResult è undefined: nessun parametro passato, il callback può decidere cosa fare
+            await onSavedAsyncCallback?.(TID, DID, metadataResult === null ? null : metadataResult);
+            // Mostra messaggio di successo solo se non ci sono stati errori critici
+            if (success) {
+                ShowAlert({ mode: 'success', title: 'Form di documento', message: 'Le modifiche sono state salvate con successo', duration: 3000 });
+            }
+            else {
+                onClose?.();
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [DID, TID, getSpecificChangedKeysWithValues, refreshMetadataAsync, onSavedAsyncCallback, onClose]);
+    const handleArchiveCompleted = useCallback(async () => {
+        let firstBlock = true;
+        let maxFileSize = 0;
+        let operationTitle = 'Archiviazione';
+        setUseWaitPanelLocalState(true);
+        setShowWaitPanelLocal(true);
+        setShowPrimaryLocal(false);
+        setShowSecondaryLocal(true);
+        setWaitPanelTitleLocal(operationTitle);
+        abortControllerLocal = new AbortController();
+        const ae = new ArchiveEngineByID(SDK_Globals.tmSession);
+        ae.TID = TID;
+        ae.Metadata_ClearAll();
+        try {
+            // Usa formDataRef.current invece di formData per evitare stale closure.
+            // Questo garantisce di avere sempre i valori più recenti dei metadati da archiviare.
+            for (let metadata of formDataRef.current) {
+                if (!metadata.value)
+                    continue;
+                switch (metadata.md?.dataType) {
+                    case MetadataDataTypes.DateTime:
+                        ae.Metadata_AddDateTime(metadata.mid, new Date(metadata.value));
+                        break;
+                    case MetadataDataTypes.Number:
+                        ae.Metadata_AddNumber(metadata.mid, parseFloat(metadata.value));
+                        break;
+                    case MetadataDataTypes.Varchar:
+                        ae.Metadata_AddString(metadata.mid, metadata.value);
+                        break;
+                    default: ae.Metadata_AddNull(metadata.mid);
+                }
+            }
+            if (connectorFileSave) {
+                let file = await connectorFileSave();
+                ae.ArchivingFile = file;
+            }
+            else {
+                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) {
+                    maxFileSize = pd.ProgressBarMaximum ?? 0;
+                    setWaitPanelMaxValueSecondaryLocal(maxFileSize);
+                    firstBlock = false;
+                }
+                setWaitPanelValueSecondaryLocal(pd.ProgressBarValue);
+                setWaitPanelTextSecondaryLocal(`Archiviazione... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
+                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
+                    setWaitPanelMaxValueSecondaryLocal(0);
+                    setWaitPanelValueSecondaryLocal(0);
+                    setWaitPanelTextSecondaryLocal('');
+                    firstBlock = true;
+                }
+            });
+            // Aggiorna lo stato locale immediatamente dopo il salvataggio riuscito
+            // Questo garantisce che isModified diventi false anche se il reload fallisce
+            const savedFormData = structuredClone(formDataRef.current);
+            setFormDataOrig(savedFormData);
+            formDataOrigRef.current = savedFormData;
+            await onSavedAsyncCallback?.(ae.TID, newDID);
+            // Usa fromDTDRef.current invece di fromDTD per evitare stale closure,
+            // garantendo di avere il descrittore del tipo documento corrente.
+            await setMetadataList(fromDTDRef.current?.metadata ?? [], undefined, true, newDID);
+            handleReset();
+            let newMruTIDS = updateMruTids(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, TID);
+            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
+            onSaveRecents?.(newMruTIDS);
+            ShowAlert({ mode: 'success', title: 'Archiviazione', message: 'Il documento è stato archiviato con successo', duration: 3000 });
+            const isDuplication = layoutMode === LayoutModes.Ark && DID;
+            if (isDuplication)
+                onClose?.();
+        }
+        catch (err) {
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            setWaitPanelTextPrimaryLocal('');
+            setWaitPanelMaxValuePrimaryLocal(0);
+            setWaitPanelValuePrimaryLocal(0);
+            setWaitPanelTextSecondaryLocal('');
+            setWaitPanelMaxValueSecondaryLocal(0);
+            setWaitPanelValueSecondaryLocal(0);
+            setShowWaitPanelLocal(false);
+            setUseWaitPanelLocalState(false);
+        }
+    }, [TID, connectorFileSave, onSavedAsyncCallback, onSaveRecents, onClose, DID, setMetadataList, handleReset, layoutMode, isSharedDcmt]);
+    const handleClearForm = useCallback(() => {
+        let data = structuredClone(formData);
+        if (!data || data.length === 0)
+            return;
+        for (let md of data) {
+            if (!md.mid)
+                continue;
+            if (md.mid > 99) {
+                const defaultValue = md.md?.defaultValue;
+                if (defaultValue) {
+                    if (FormulaHelper.isFormula(defaultValue)) {
+                        md.value = undefined;
+                    }
+                    else {
+                        md.value = defaultValue;
+                    }
+                }
+                else if (formDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                    if (md.value)
+                        md.value = undefined;
+                }
+                else if (md.value && md.value.length > 0) {
+                    md.value = '';
+                }
+            }
+        }
+        setFormData(data);
+    }, [formData, formDataOrig]);
+    const clearFormBtnDisabled = useMemo(() => formData.filter(md => md.mid && md.value && md.mid > 99 && md.value.length > 0).length > 0, [formData]);
+    const archiveBtnDisabled = useMemo(() => layoutMode === LayoutModes.Update || (fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && !dcmtFile) || validationItems.length > 0, [layoutMode, fromDTD?.archiveConstraint, dcmtFile, validationItems.length]);
+    const undoBtnDisabled = useMemo(() => layoutMode === LayoutModes.Update || !isModified, [layoutMode, isModified]);
+    const listMaxItems = useMemo(() => getListMaxItems(deviceType ?? DeviceType.DESKTOP), [deviceType]);
+    const totalItems = useMemo(() => formData.filter(o => o.mid && o.mid > 100).length, [formData]);
+    const metadataValuesSource = useMemo(() => {
+        return applyMetadataFilter(formData, showAll, listMaxItems, TID);
+    }, [showAll, formData, listMaxItems, TID]);
+    const metadataValuesSourceOrig = useMemo(() => {
+        return applyMetadataFilter(formDataOrig, showAll, listMaxItems, TID);
+    }, [showAll, formDataOrig, listMaxItems, TID]);
+    const handleClose = useCallback(() => {
+        if (!isModified) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await handleSave();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    }, [isModified, onClose, isModal, id, handleSave]);
+    const getFormula = useCallback(() => {
+        let fd = new FormulaDescriptor();
+        fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
+        fd.formulaTarget = FormulaTargets.BatchUpdate;
+        fd.items = FormulaHelper.TreeViewList(TID ?? 0, getSystemMetadata(true), undefined, FormulaTargets.BatchUpdate, SDK_Globals.dbBrand);
+        fd.mid = focusedMetadataValue?.mid ?? 0;
+        fd.tid = TID;
+        return fd;
+    }, [focusedMetadataValue?.value, focusedMetadataValue?.mid, TID]);
+    const handleWFOperationCompleted = useCallback(async () => {
+        await onWFOperationCompleted?.();
+        onClose?.();
+    }, [onWFOperationCompleted, onClose]);
+    // Determina se showAll deve essere automaticamente true
+    // Best practice: usa useMemo per calcolare valori derivati invece di useEffect con setState
+    const shouldShowAll = useMemo(() => {
+        // Mostra sempre tutti i metadati se:
+        // 1. È presente un layout personalizzato (per renderizzare correttamente la gerarchia)
+        // 2. È una vista di approvazione workflow
+        // 3. È il tipo documento Drafts
+        const hasCustomLayout = layout && layout.items && layout.items.length > 0;
+        return hasCustomLayout || isApprView || TID === SystemTIDs.Drafts;
+    }, [layout, isApprView, TID]);
+    // Aggiorna showAll quando shouldShowAll cambia
+    useEffect(() => {
+        if (shouldShowAll && !showAll) {
+            setShowAll(true);
+        }
+    }, [shouldShowAll, showAll]);
+    const afterTaskSaved = useCallback(async (task, formMode, forceRefresh = false) => {
+        const shouldRefresh = forceRefresh || (task && task.state === Task_States.Completed) || formMode === FormModes.Create || formMode === FormModes.Duplicate;
+        if (TID && DID && shouldRefresh) {
+            await triggerBlogRefresh();
+        }
+    }, [TID, DID, triggerBlogRefresh]);
+    const tmDcmtForm = useMemo(() => {
+        return _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
+                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, isReadOnly: formMode === FormModes.ReadOnly, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, inputMids: inputMids, layout: layout, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                setFormData((prevItems) => prevItems.map((item) => {
+                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                    return newItem ? { ...item, ...newItem } : item;
+                                }));
+                            }, onAdvancedMenuClick: (e) => {
+                                switch (e.button) {
+                                    case AdvancedMenuButtons.DistinctValues:
+                                        setIsOpenDistinctValues(!isOpenDistinctValues);
+                                        break;
+                                    case AdvancedMenuButtons.FormulaEditor:
+                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                        break;
+                                }
+                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: handleConfirmAction }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: handleUndo })] }) :
+                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: handleConfirmAction }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: handleClearForm }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: handleUndo })] }) }) }), customButton && _jsx(TMCustomButton, { button: customButton, formData: formData, selectedItems: [], onClose: () => setCustomButton(undefined) }), totalItems > listMaxItems &&
+                                    !isApprView &&
+                                    TID !== SystemTIDs.Drafts &&
+                                    !shouldShowAll &&
+                                    _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), _jsx(ConfirmAttachmentsDialog, {})] }) });
+    }, [
+        TID,
+        DID,
+        metadataValuesSource,
+        metadataValuesSourceOrig,
+        isExpertMode,
+        isOpenDistinctValues,
+        focusedMetadataValue?.mid,
+        formMode,
+        layoutMode,
+        deviceType,
+        validationItems,
+        inputMids,
+        layout,
+        isModified,
+        archiveBtnDisabled,
+        clearFormBtnDisabled,
+        undoBtnDisabled,
+        totalItems,
+        listMaxItems,
+        isApprView,
+        shouldShowAll,
+        showAll,
+        handleConfirmAction,
+        handleUndo,
+        handleClearForm
+    ]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID, allTasks: allTasks, fetchBlogDataTrigger: refreshBlogTrigger, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [TID, DID, allTasks, refreshBlogTrigger]);
+    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: (file) => {
+            setDcmtFile(file);
+        }, enableDragDropOverlay: enableDragDropOverlay }, refreshPreviewTrigger), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay, setDcmtFile]);
+    const tmWF = useMemo(() => {
+        if (isWFDataLoading) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    height: '100%',
+                    minHeight: '200px'
+                }, children: _jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento dati workflow'}...` })] }) }));
+        }
+        const isAuthorized = !!workflows?.[0]?.diagram;
+        return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 3 }, children: [workItems.length > 0
+                    ? (isAuthorized
+                        ? _jsx(WFDiagram, { xmlDiagramString: workflows?.[0]?.diagram || '', allowEdit: false, currentSetID: workitemSetID })
+                        : _jsx("div", { style: {
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                fontSize: '1.1rem',
+                                color: TMColors.primaryColor,
+                                textAlign: 'center',
+                            }, children: SDKUI_Localizator.WorkflowDiagramNotAuthorized }))
+                    : _jsx("div", { style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            fontSize: '1.1rem',
+                            color: TMColors.primaryColor,
+                            textAlign: 'center',
+                        }, children: SDKUI_Localizator.WorkitemsToApproveNone }), isAuthorized && !workitemSetID && workItems.length > 0 &&
+                    _jsx("div", { style: {
+                            padding: 5,
+                            backgroundColor: 'khaki',
+                            borderRadius: 8
+                        }, children: SDKUI_Localizator.WorkItemTechnicalNote_SetID })] }));
+    }, [workflows, formData, workitemSetID, workItems, isWFDataLoading]);
+    const tmDcmtTasks = useMemo(() => {
+        const isReady = TID && DID && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback;
+        if (!isReady) {
+            return _jsx(TMToppyMessage, { message: SDKUI_Localizator.TasksEmpty });
+        }
+        return (_jsx(TMDcmtTasks, { taskContext: {
+                document: {
+                    tid: Number(TID),
+                    did: Number(DID),
+                    name: fromDTD?.nameLoc ?? SDKUI_Localizator.Widget_Activities,
+                },
+            }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, afterTaskSaved: afterTaskSaved }));
+    }, [allTasks, TID, DID, fromDTD]);
+    const normalizedTID = TID !== undefined ? Number(TID) : undefined;
+    const defaultPanelDimensions = {
+        'tmDcmtForm': { width: '16.66%', height: '100%' },
+        'tmBlog': { width: '16.66%', height: '100%' },
+        'tmSysMetadata': { width: '16.66%', height: '100%' },
+        'tmDcmtPreview': { width: '16.66%', height: '100%' },
+        'tmWF': { width: '16.66%', height: '100%' },
+        'tmDcmtTasks': { width: '16.66%', height: '100%' },
+    };
+    const allInitialPanelVisibility = {
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+        'tmWF': false,
+        'tmDcmtTasks': false,
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmDcmtForm',
+            name: SDK_Localizator.Metadatas,
+            contentOptions: {
+                component: tmDcmtForm,
+                isClosable: isClosable,
+                panelContainer: {
+                    showHeader: showHeader,
+                    title: fromDTD?.nameLoc,
+                    allowMaximize: !isMobile,
+                    onBack: showBackButton ? (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose : undefined,
+                    onClose: isClosable ? () => { } : undefined,
+                    toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
+                },
+            },
+            toolbarOptions: {
+                icon: _jsx(IconPreview, { fontSize: 24 }),
+                visible: true,
+                orderNumber: 1,
+                isActive: allInitialPanelVisibility['tmDcmtForm']
+            }
+        },
+        {
+            id: 'tmBlog',
+            name: SDKUI_Localizator.BlogCase,
+            contentOptions: { component: tmBlog, panelContainer: { title: SDKUI_Localizator.BlogCase, allowMaximize: !isMobile } },
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                visible: true,
+                disabled: isBoardDisabled,
+                orderNumber: 2,
+                isActive: allInitialPanelVisibility['tmBlog']
+            }
+        },
+        {
+            id: 'tmSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            contentOptions: { component: tmSysMetadata, panelContainer: { title: SDKUI_Localizator.MetadataSystem, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: isSysMetadataDisabled, orderNumber: 3, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+        },
+        {
+            id: 'tmDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            contentOptions: { component: tmDcmtPreview },
+            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+        },
+        {
+            id: 'tmWF',
+            name: "Workflow",
+            contentOptions: {
+                component: tmWF,
+                panelContainer: {
+                    title: "Workflow", allowMaximize: !isMobile
+                }
+            },
+            toolbarOptions: {
+                icon: _jsx(IconWorkflow, { fontSize: 24 }),
+                visible: true,
+                disabled: isWFDisabled,
+                orderNumber: 5,
+                isActive: allInitialPanelVisibility['tmWF']
+            }
+        },
+        {
+            id: 'tmDcmtTasks',
+            name: SDKUI_Localizator.Widget_Activities,
+            contentOptions: {
+                component: tmDcmtTasks,
+            },
+            toolbarOptions: {
+                icon: _jsx(IconActivity, { fontSize: 24 }),
+                visible: layoutMode !== LayoutModes.Ark,
+                orderNumber: 6,
+                isActive: allInitialPanelVisibility['tmDcmtTasks'],
+                count: (TID && DID && allTasks && allTasks.length > 0) ?
+                    getTaskAssignedToMe(allTasks).filter(task => task.iD1?.toString() === TID.toString()
+                        && task.iD2?.toString() === DID.toString()
+                        && task.state !== Task_States.Completed).length ?? 0
+                    : 0
+            }
+        },
+    ], [fromDTD, showBackButton, tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, tmWF, tmDcmtTasks, isPreviewDisabled, isSysMetadataDisabled, isBoardDisabled, isWFDisabled, inputFile, isClosable, allTasks, DID, TID]);
+    // Retrieves the current document form setting based on the normalized TID
+    const getCurrentDcmtFormSetting = () => {
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        // Find the index of the setting that matches the normalized TID
+        const idx = settings.findIndex(s => Number(s.TID) === normalizedTID);
+        // Return both the index and the corresponding setting (or empty object if not found)
+        return { idx, setting: settings[idx] ?? {} };
+    };
+    // Checks if there's a saved panel layout for the current context (ToDo or general)
+    const hasSavedLayout = () => {
+        const { setting } = getCurrentDcmtFormSetting();
+        if (invokedByTodo) {
+            // If invoked by ToDo, check for existence of layoutToDo and that it has keys
+            return setting.layoutToDo !== undefined && Object.keys(setting.layoutToDo).length > 0;
+        }
+        else {
+            // Otherwise, check for general layout
+            return setting.layout !== undefined && Object.keys(setting.layout).length > 0;
+        }
+    };
+    // Persists the current panel states (layout) into user settings
+    const persistPanelStates = (state) => {
+        // If no valid TID or empty state, skip saving
+        if (normalizedTID === undefined || Object.keys(state).length === 0)
+            return;
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        const { idx, setting: existingSetting } = getCurrentDcmtFormSetting();
+        // Prepare the new setting object with updated layout depending on context
+        const newSetting = {
+            TID: normalizedTID,
+            layout: invokedByTodo ? (existingSetting.layout ?? {}) : state,
+            layoutToDo: invokedByTodo ? state : (existingSetting.layoutToDo ?? {}),
+        };
+        // Replace existing setting if found, otherwise push a new one
+        if (idx >= 0) {
+            settings[idx] = newSetting;
+        }
+        else {
+            settings.push(newSetting);
+        }
+        // Assign the updated settings array back to the global settings
+        SDKUI_Globals.userSettings.dcmtFormSettings = [...settings];
+    };
+    // Retrieves the persisted panel states (layout) for the current context
+    const getPersistedPanelStates = () => {
+        // Do not return layout on mobile devices
+        if (isMobile)
+            return undefined;
+        const settings = getCurrentDcmtFormSetting()?.setting;
+        // Return the appropriate layout based on context
+        return invokedByTodo ? settings?.layoutToDo : settings?.layout;
+    };
+    const handleCompleteMoreInfo = useCallback(async () => {
+        try {
+            TMSpinner.show();
+            let newTask = { ...taskMoreInfo, state: Task_States.Completed };
+            await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(newTask);
+            onTaskCompleted?.(newTask);
+            onClose?.();
+            ShowAlert({ mode: 'success', title: SDKUI_Localizator.MoreInformation, message: SDKUI_Localizator.MoreInfoCompleted, duration: 3000 });
+        }
+        catch (e) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [taskMoreInfo, onTaskCompleted, onClose]);
+    const handleSignApprove = useCallback(() => {
+        if (onOpenS4TViewerRequest && TID && DID) {
+            onOpenS4TViewerRequest([{ TID, DID }]);
+            return;
+        }
+        ShowAlert({
+            message: "TODO",
+            mode: "info",
+            duration: 3000,
+            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) {
+            return _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: true });
+        }
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: deviceType === DeviceType.MOBILE ? 'column' : 'row',
+                justifyContent: 'space-between',
+                gap: Gutters.getGutters(),
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                overflow: 'hidden'
+            }, children: [_jsxs("div", { style: { width: '100%', height: '100%', display: isOpenDetails || isOpenMaster ? 'none' : 'flex' }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showCicoWaitPanel, showWaitPanelPrimary: showCicoPrimaryProgress, waitPanelTitle: cicoWaitPanelTitle, waitPanelTextPrimary: cicoPrimaryProgressText, waitPanelValuePrimary: cicoPrimaryProgressValue, waitPanelMaxValuePrimary: cicoPrimaryProgressMax, isCancelable: true, abortController: abortControllerLocal, children: [(groupId && groupId.length > 0)
+                                        ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                                        : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
+                                        _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                                if (!e)
+                                                    return;
+                                                setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                            } }), isOpenFormulaEditor &&
+                                        _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                                setFocusedMetadataValue(prevState => ({
+                                                    ...prevState,
+                                                    isSelected: true,
+                                                    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 })] }) }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer, 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.length > 0)) && 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), onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, 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, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenMaster &&
+                    _jsxs(StyledModalContainer, { children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                                return (_jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }, `${index}-${dcmt.DID}`));
+                            })] }), taskFormDialogComponent, s4TViewerDialogComponent] }));
+    };
+    return (_jsxs(_Fragment, { children: [(isModal && onClose)
+                ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px", position: 'relative' }, children: renderDcmtForm() }) })
+                : renderDcmtForm(), showRelatedDcmtsChooser && (_jsx(TMChooserForm, { dataSource: relatedDcmtsChooserDataSource, onChoose: async (selectedRelation) => {
+                    try {
+                        setShowRelatedDcmtsChooser(false);
+                        TMSpinner.show({ description: SDKUI_Localizator.Loading });
+                        const relation = relatedDcmts?.find(r => r.id === selectedRelation[0]);
+                        if (!relation || !archiveType)
+                            return;
+                        await archiveRelatedDcmtHandler(relation, archiveType);
+                    }
+                    catch (error) {
+                        TMExceptionBoxManager.show({ exception: error });
+                    }
+                    finally {
+                        TMSpinner.hide();
+                    }
+                }, onClose: () => setShowRelatedDcmtsChooser(false), manageUseLocalizedName: false })), showManyToManyChooser && (_jsx(TMChooserForm, { dataSource: manyToManyChooserDataSource, onChoose: async (selectedRelation) => {
+                    try {
+                        setShowManyToManyChooser(false);
+                        TMSpinner.show({ description: SDKUI_Localizator.Loading });
+                        const relation = manyToManyRelations?.find(r => r.id === selectedRelation[0]);
+                        if (!relation)
+                            return;
+                        await executeManyToManyPairing(relation, isPairingManyToMany);
+                    }
+                    catch (error) {
+                        TMExceptionBoxManager.show({ exception: error });
+                    }
+                    finally {
+                        TMSpinner.hide();
+                    }
+                }, onClose: () => setShowManyToManyChooser(false), manageUseLocalizedName: false })), (showHistory && fromDTD && currentDcmt) && _jsx(TMViewHistoryDcmt, { fromDTD: fromDTD, deviceType: deviceType, inputDcmt: { TID: currentDcmt.tid, DID: currentDcmt.did }, onClose: hideHistoryCallback, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showCheckoutInformationForm && fromDTD && currentDcmt) &&
+                _jsx(TMDcmtCheckoutInfoForm, { dtdName: fromDTD.name ?? SDKUI_Localizator.SearchResult, selectedDcmtOrFocused: { TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, onClose: hideCheckoutInformationFormCallback }), (commentFormState.show && currentDcmt) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: currentDcmt.tid, did: currentDcmt.did } }, onClose: hideCommentFormCallback, refreshCallback: triggerBlogRefresh, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], isCommentRequired: commentFormState.isRequired, removeAndEditAttachment: commentFormState.removeAndEditAttachment }), isOpenArchiveRelationForm && (_jsx(TMDcmtForm, { isModal: true, titleModal: SDKUI_Localizator.Archive + ' - ' + (archiveType === 'detail' ? SDKUI_Localizator.DcmtsDetail : SDKUI_Localizator.DcmtsMaster), TID: archiveRelatedDcmtFormTID, layoutMode: LayoutModes.Ark, inputMids: archiveRelatedDcmtFormMids, showBackButton: false, allowButtonsRefs: false, onClose: () => {
+                    setIsOpenArchiveRelationForm(false);
+                    setArchiveType(undefined);
+                    setArchiveRelatedDcmtFormTID(undefined);
+                    setArchiveRelatedDcmtFormMids([]);
+                }, onSavedAsyncCallback: async (tid, did) => {
+                    setIsOpenArchiveRelationForm(false);
+                    setArchiveType(undefined);
+                    setArchiveRelatedDcmtFormTID(undefined);
+                    setArchiveRelatedDcmtFormMids([]);
+                    await fetchData();
+                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })), showPairDcmtsModal && (_jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshSearchAsync: async () => await fetchData(), onTaskCreateRequest: onTaskCreateRequest, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }))] }));
+};
+export default TMDcmtForm;
+/**
+ * Utility function to apply metadata filtering logic
+ * @param data - Array of metadata values to filter
+ * @param showAll - Whether to show all items or limit to maxItems
+ * @param listMaxItems - Maximum number of items to show when showAll is false
+ * @param TID - Document type ID to determine specific filtering rules
+ * @returns Filtered array of metadata values
+ */
+const applyMetadataFilter = (data, showAll, listMaxItems, TID) => {
+    // Early return for empty data
+    if (!data || data.length === 0)
+        return [];
+    // Base filter: include only metadata with mid > 100
+    const baseFilter = (o) => Boolean(o.mid && o.mid > 100);
+    // Special filter for Draft document type: includes base filter + system fields
+    const draftFilter = (o) => baseFilter(o) ||
+        o.mid === SystemMIDsAsNumber.FileExt ||
+        o.mid === SystemMIDsAsNumber.FileSize ||
+        o.mid === SystemMIDsAsNumber.LastUpdateTime ||
+        o.mid === SystemMIDsAsNumber.CreationTime;
+    // Select the appropriate filter based on document type
+    const currentFilter = TID === SystemTIDs.Drafts ? draftFilter : baseFilter;
+    // Apply filter once
+    const filteredData = data.filter(currentFilter);
+    // Return all filtered data or slice to max items
+    return showAll ? filteredData : filteredData.slice(0, listMaxItems);
+};
+//#region Validaion
+export const validateMetadataList = (mvdList = []) => {
+    if (!Array.isArray(mvdList)) {
+        throw new TypeError("metadataList must be an array of ITMMetadataProps.");
+    }
+    return mvdList.reduce((validationItems, mvd) => {
+        const value = mvd.value?.toString() ?? "";
+        if (isValidForValidation(mvd)) {
+            validateRequiredField(mvd, value, validationItems);
+            validateMaxLength(mvd, value, validationItems);
+        }
+        return validationItems;
+    }, []);
+};
+const isValidForValidation = (mvd) => { return mvd.mid > 99; };
+const validateRequiredField = (mvd, value, validationItems) => {
+    if (mvd.isRequired === '1' && !value.trim()) {
+        const message = SDKUI_Localizator.RequiredField;
+        validationItems.push(new ValidationItem(ResultTypes.ERROR, mvd.md?.nameLoc ?? "", message));
+    }
+};
+const validateMaxLength = (mvd, value, validationItems) => {
+    const regex = /[!?[\],./*-+'<>:";]/g;
+    const maxLength = mvd.md?.length ?? 0;
+    const isTextOrNumber = mvd.md?.dataType === MetadataDataTypes.Varchar || mvd.md?.dataType === MetadataDataTypes.Number;
+    const isFormula = FormulaHelper.isFormula(value);
+    if (isTextOrNumber && !isFormula && mvd.md?.length && value.replace(regex, '').length > maxLength) {
+        const message = `"${mvd.md.nameLoc ?? "no-name"}" ha superata massimo lunghezza di ${maxLength} caratteri.`;
+        validationItems.push(new ValidationItem(ResultTypes.ERROR, mvd.md.nameLoc ?? "", message));
+    }
+};
+//#endregion Validation
+// Questo componente non renderizza nulla (return null)
+// ma viene utilizzato come child del Provider per disabilitare il bottone
+const WfButtonStateHandler = ({ isWFDisabled }) => {
+    const { setToolbarButtonDisabled } = useTMPanelManagerContext();
+    useEffect(() => {
+        setToolbarButtonDisabled('tmWF', isWFDisabled);
+    }, [isWFDisabled, setToolbarButtonDisabled]);
+    return null; // Non renderizza elementi nel DOM
+};
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload, enableDragDropOverlay = false }) => {
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels, panelVisibility } = useTMPanelManagerContext();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (layoutMode === LayoutModes.Update ?
+        _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: panelVisibility['tmDcmtPreview'] && enableDragDropOverlay }));
+};