@topconsultnpm/sdkui-react 6.22.0-dev2.2 → 6.22.0-dev2.20

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

@@ -0,0 +1,256 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { LayoutModes } from "@topconsultnpm/sdk-ts";
+import { LoadIndicator } from "devextreme-react/load-indicator";
+import { SearchResultContext } from "../../../ts";
+import { getFullFileExtension, getMultiDetailPanelStates, hasMultiDetailPanelStates, hoverStyle, IconArchive, IconDelete, IconDuplicate, IconEdit, IconEraser, IconMenuVertical, IconRefresh, IconSearch, IconSearchCheck, saveMultiDetailPanelStates, SDKUI_Localizator } from "../../../helper";
+import { TMColors } from "../../../utils/theme";
+import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+import TMModal from "../../base/TMModal";
+import TMDataGrid from "../../base/TMDataGrid";
+import TMTooltip from "../../base/TMTooltip";
+import { TMDcmtTypeIcon } from "../../viewers/TMTidViewer";
+import { ContextMenu } from "../../NewComponents/ContextMenu";
+import { TMPanelManagerWithPersistenceProvider } from "../../layout/panelManager/TMPanelManagerWithPersistenceProvider";
+import TMPanelManagerContainer from "../../layout/panelManager/TMPanelManagerContainer";
+import TMSearchResult from "../search/TMSearchResult";
+import TMDcmtForm from "./TMDcmtForm";
+import TMDcmtIcon from "./TMDcmtIcon";
+import TMMasterInfoFields from "./TMMasterInfoFields";
+import { MultiDetailArchivePhase, useMultiMasterDetailDcmts } from "../../../hooks/useMultiMasterDetailDcmts";
+import { accordionStyles, getDtdDisplayName, INLINE_EDITABLE_CELL_CLASS, multiDetailStyles, PANEL_GUTTER_PX, renderAccordionHeader, renderSelectDcmtType, renderStepper, SECTION_HEADER_HEIGHT_PX, sectionPanelHeights, TMSectionPanelsHeights, TMSummarySectionSlot } from "./TMMultiMasterDetailDcmtsUtils";
+// Stili delle sezioni in TMMultiMasterDetailDcmtsUtils (vedi accordionStyles e multiDetailStyles)
+const styles = {
+    content: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 },
+    header: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '6px 12px', borderBottom: `1px solid ${TMColors.card_background}`, flexShrink: 0 },
+    // Opzioni nella barra del titolo: stesse misure e colore della chiusura DevExtreme (.dx-popup-title .dx-closebutton)
+    titleMenuIcon: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', margin: '1px 0 0', color: `var(--dx-color-text, ${TMColors.text_normal})`, cursor: 'pointer' },
+    loader: { display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' },
+    summaryContainer: { display: 'flex', flexDirection: 'column', flex: 1, padding: '8px 12px 10px', minHeight: 0, gap: '8px' },
+    // I pannelli ripartiscono l'altezza in percentuale: serve un'altezza definita che non dipenda dal
+    // contenuto, da qui il riempimento in posizione assoluta dello spazio residuo
+    panelsHost: { position: 'relative', flex: 1, minHeight: 0, minWidth: 0 },
+    panelsHostFill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex' },
+    gridWrapper: { position: 'relative', flex: 1, minHeight: 0 },
+    actionsCell: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px' },
+    actionIcon: { cursor: 'pointer', display: 'flex' },
+    fileCell: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    fab: { position: 'absolute', bottom: '18px', right: '20px', width: '42px', height: '42px', borderRadius: '50%', backgroundColor: TMColors.button_floating_background, color: '#fff', border: 'none', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.2)', zIndex: 1000, transition: 'background-color 0.3s ease, transform 0.2s ease', display: 'flex', justifyContent: 'center', alignItems: 'center' },
+    footer: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', gap: '14px', paddingTop: '8px', borderTop: `1px solid ${TMColors.card_background}`, flexShrink: 0 },
+    footerLabel: { display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: 'pointer', color: TMColors.label_normal, fontSize: '12px', userSelect: 'none', padding: '5px 10px', borderRadius: '16px', background: 'transparent', border: `1px solid ${TMColors.card_background}`, transition: 'all 0.15s ease' },
+    archiveButton: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', height: '38px', padding: '0 22px', border: 'none', borderRadius: '10px', fontSize: '14px', fontWeight: 600, letterSpacing: '0.2px', color: '#ffffff', cursor: 'pointer', transition: 'transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease' },
+    checkbox: { width: '16px', height: '16px', accentColor: TMColors.primary, cursor: 'pointer', margin: 0 },
+};
+const TMMultiMasterDetailDcmtsForm = (props) => {
+    const { dtd, masterDcmt, onClose, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showDcmtFormSidebar, showTodoDcmtForm, openFileUploaderPdfEditor, graphometricManager, editPdfForm, openS4TViewer, showToppyDraggableHelpCenter, toppyHelpCenterUsePortal, fetchRemoteCertificates, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onReferenceClick, onTaskCreateRequest, onRefreshAfterAddDcmtToFavs, onFileOpened, passToArchiveCallback, openWGsCopyMoveForm } = props;
+    const { isLoading, isSummaryReady, phase, setPhase, detailRelationItems, selectedRelation, selectedItem, hasMultipleTypes, selectRelation, backToTypeSelection, isBackLocked, closeModal, sectionsOpen, setSectionOpen, clearLayout, layoutResetToken, canUpdateMaster, masterFieldsCount, getMasterMetadataAsync, masterInfoReloadToken, isOpenMasterForm, setIsOpenMasterForm, handleMasterSavedAsync, archivedDetailResults, archivedDetailsCount, isLoadingArchivedDetails, refreshArchivedDetailsAsync, detailColumns, detailSupportsFile, archiveRows, currentRows, focusedRowKey, setFocusedRowKey, selectedRowKeys, setSelectedRowKeys, isOpenAddForm, editingRowId, editingRow, formInputMids, openAddForm, openEditForm, closeAddForm, deleteRow, duplicateRow, upsertRow, updateRowValues, stopOnFirstError, setStopOnFirstError, isArchiving, archiveAllAsync, waitPanel, abortController, } = useMultiMasterDetailDcmts({ dtd, masterDcmt, onClose });
+    // Ricerca nella griglia dei dettagli da archiviare, come in TMSearch (vedi useDocumentOperations)
+    const [showGridSearch, setShowGridSearch] = useState(false);
+    const toggleGridSearchItem = {
+        name: showGridSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+        icon: _jsx(IconSearch, { fontSize: 18 }),
+        beginGroup: true,
+        onClick: () => setShowGridSearch(prev => !prev),
+    };
+    const isSummaryPhase = phase === MultiDetailArchivePhase.ArchiveSummary;
+    const baseTitle = SDKUI_Localizator.ArchiveMultipleDetailDocuments;
+    // Con un solo tipo il nome è mostrato direttamente nel titolo del modale
+    const modalTitle = !hasMultipleTypes && selectedItem ? `${baseTitle}: ${getDtdDisplayName(selectedItem.detailDtd)}` : baseTitle;
+    const isArchiveDisabled = isArchiving || currentRows.length === 0;
+    const archiveButtonCaption = currentRows.length > 0
+        ? `${SDKUI_Localizator.Archive} ${currentRows.length} ${currentRows.length === 1 ? 'dettaglio' : 'dettagli'}`
+        : SDKUI_Localizator.Archive;
+    const steps = [
+        ...(hasMultipleTypes ? [{ phase: MultiDetailArchivePhase.SelectDcmtType, label: SDKUI_Localizator.DcmtType }] : []),
+        {
+            phase: MultiDetailArchivePhase.ArchiveSummary,
+            // Nel riepilogo lo step mostra il tipo selezionato (icona + nome)
+            label: selectedItem
+                ? (_jsxs("span", { style: multiDetailStyles.stepTypeLabel, children: [_jsx(TMDcmtTypeIcon, { dtd: selectedItem.detailDtd }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: getDtdDisplayName(selectedItem.detailDtd) })] }))
+                : SDKUI_Localizator.Summary,
+        },
+    ];
+    // Colonne della griglia: icona del documento, metadati del tipo, file e azioni
+    const gridColumns = useMemo(() => {
+        const iconColumn = {
+            caption: '', width: 50, alignment: 'center',
+            allowSorting: false, allowFiltering: false, allowResizing: false, allowReordering: false, allowHiding: false, allowEditing: false,
+            cellRender: (cell) => {
+                const file = cell.data?.__file;
+                return _jsx(TMDcmtIcon, { fileExtension: file ? getFullFileExtension(file.name) : undefined, fileCount: file ? 1 : 0, tooltipContent: file?.name });
+            },
+        };
+        const fileColumn = {
+            caption: 'File', width: 220, allowSorting: false, allowEditing: false,
+            cellRender: (cell) => {
+                const file = cell.data?.__file;
+                return _jsx("span", { style: { ...styles.fileCell, color: file ? TMColors.text_normal : TMColors.label_normal }, children: file ? file.name : '' });
+            },
+        };
+        const actionsColumn = {
+            caption: '', width: 110, alignment: 'center',
+            allowSorting: false, allowFiltering: false, allowHeaderFiltering: false, allowResizing: false,
+            allowReordering: false, allowHiding: false, showInColumnChooser: false, allowEditing: false,
+            cssClass: 'tm-row-actions',
+            cellRender: (cell) => (_jsxs("div", { style: styles.actionsCell, children: [_jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Update, onClick: () => openEditForm(cell.data), children: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }) }), _jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Duplicate, onClick: () => duplicateRow(cell.data), children: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }) }), _jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Deletion, onClick: () => deleteRow(cell.data), children: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }) })] })),
+        };
+        return [actionsColumn, iconColumn, ...detailColumns, ...(detailSupportsFile ? [fileColumn] : [])];
+    }, [detailColumns, detailSupportsFile]);
+    // ----- Griglia dei dettagli: opzioni e callback con identità stabile -------------------------
+    // Un nuovo riferimento a ogni render farebbe rifare a DevExtreme il setup di selezione/editing
+    const gridSelection = useMemo(() => ({ mode: 'single', showCheckBoxesMode: 'none' }), []);
+    const gridEditing = useMemo(() => ({
+        mode: 'cell', allowUpdating: true, allowAdding: false, allowDeleting: false, startEditAction: 'click', selectTextOnEditStart: true,
+    }), []);
+    const handleSelectionChanged = useCallback((e) => {
+        setSelectedRowKeys(e.selectedRowKeys ?? []);
+    }, [setSelectedRowKeys]);
+    const handleFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, [setFocusedRowKey]);
+    const handleRowUpdating = useCallback((e) => {
+        updateRowValues(e.key, e.newData);
+    }, [updateRowValues]);
+    // Il doppio clic apre il form della riga, tranne su azioni e celle modificabili in linea
+    const handleCellDblClick = useCallback((e) => {
+        if (e.rowType !== 'data')
+            return;
+        const cssClass = e.column?.cssClass ?? '';
+        if (cssClass === 'tm-row-actions' || cssClass === INLINE_EDITABLE_CELL_CLASS)
+            return;
+        openEditForm(e.data);
+    }, [openEditForm]);
+    // Menu contestuale con le stesse azioni della colonna
+    const contextMenuItems = useMemo(() => [
+        { name: SDKUI_Localizator.Update, icon: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }), operationType: 'singleRow', onClick: (id) => openEditForm(archiveRows.find(r => r.id === id)) },
+        { name: SDKUI_Localizator.Duplicate, icon: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }), operationType: 'singleRow', onClick: (id) => duplicateRow(archiveRows.find(r => r.id === id)) },
+        { name: SDKUI_Localizator.Deletion, icon: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }), operationType: 'singleRow', beginGroup: true, onClick: (id) => deleteRow(archiveRows.find(r => r.id === id)) },
+        toggleGridSearchItem,
+    ], [archiveRows, showGridSearch]);
+    // Menu delle opzioni del modale, aperto dal pulsante a tre punti nella barra del titolo
+    const optionsMenuItems = useMemo(() => [
+        { name: 'Cancella layout', icon: _jsx(IconEraser, { fontSize: 18, color: TMColors.error }), onClick: clearLayout },
+    ], [clearLayout]);
+    // Le opzioni riguardano i pannelli del riepilogo: fuori da quella fase non hanno effetto
+    const renderOptionsMenu = () => {
+        if (!isSummaryPhase)
+            return undefined;
+        return (_jsx(ContextMenu, { trigger: 'left', items: optionsMenuItems, children: _jsx("span", { style: styles.titleMenuIcon, title: SDKUI_Localizator.Options, "aria-label": SDKUI_Localizator.Options, children: _jsx(IconMenuVertical, { fontSize: 16, color: "white" }) }) }));
+    };
+    // ----- Sezione: informazioni del master -----------------------------------------------------
+    const renderMasterInfo = (panel) => {
+        const isOpen = sectionsOpen.masterInfo;
+        const editMasterButton = canUpdateMaster
+            ? (_jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setIsOpenMasterForm(true); }, style: accordionStyles.accordionExpandBtn, title: `${SDKUI_Localizator.Update}: ${getDtdDisplayName(dtd)}`, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconEdit, { fontSize: 16 }) }))
+            : undefined;
+        return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
+                    section: 'masterInfo',
+                    isOpen,
+                    tooltip: isOpen ? SDKUI_Localizator.HideMasterInfo : SDKUI_Localizator.ShowMasterInfo,
+                    count: masterFieldsCount,
+                    title: (_jsxs(_Fragment, { children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsxs("span", { style: multiDetailStyles.stepTypeLabelText, children: ["Master: ", getDtdDisplayName(dtd)] })] })),
+                    actions: editMasterButton,
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsx(TMMasterInfoFields, { dtd: dtd, dcmt: masterDcmt, getValuesByMidAsync: getMasterMetadataAsync, reloadToken: masterInfoReloadToken, isExpandedView: panel.isMaximized }))] }));
+    };
+    // ----- Sezione: dettagli già archiviati -----------------------------------------------------
+    const renderArchivedDetails = (panel) => {
+        const isOpen = sectionsOpen.archivedDetails;
+        const hasResults = archivedDetailResults.length > 0 && archivedDetailsCount > 0;
+        // Ricarica i dettagli già archiviati: la sezione va aperta, altrimenti l'esito non sarebbe visibile
+        const refreshArchivedButton = (_jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setSectionOpen('archivedDetails', true); refreshArchivedDetailsAsync(); }, disabled: isLoadingArchivedDetails, style: { ...accordionStyles.accordionExpandBtn, ...(isLoadingArchivedDetails ? { cursor: 'default', opacity: 0.5 } : {}) }, title: SDKUI_Localizator.Refresh, "aria-label": SDKUI_Localizator.Refresh, ...(isLoadingArchivedDetails ? {} : hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal })), children: _jsx(IconRefresh, { fontSize: 16 }) }));
+        return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
+                    section: 'archivedDetails',
+                    isOpen,
+                    tooltip: isOpen ? SDKUI_Localizator.HideArchivedDetails : SDKUI_Localizator.ShowArchivedDetails,
+                    count: archivedDetailsCount,
+                    title: (_jsxs(_Fragment, { children: [_jsx(IconSearchCheck, { fontSize: 15 }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: SDKUI_Localizator.ArchivedDetails })] })),
+                    actions: refreshArchivedButton,
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsx("div", { style: { ...accordionStyles.accordionListBody, ...(panel.isMaximized ? { borderTop: 'none' } : {}) }, children: isLoadingArchivedDetails
+                        ? _jsxs("div", { style: accordionStyles.accordionListPlaceholder, children: [_jsx(LoadIndicator, { height: 30, width: 30 }), SDKUI_Localizator.Loading] })
+                        : (hasResults
+                            ? _jsx(TMSearchResult, { showToolbarHeader: false, showCounterConfig: false, showActionsColumn: true, compactPager: !panel.isMaximized, context: SearchResultContext.METADATA_SEARCH, searchResults: archivedDetailResults, onClose: () => setSectionOpen('archivedDetails', false), showBackButton: false, showToolbarCloseButton: false, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, showSearchResultSidebar: false, showDcmtFormSidebar: true, autoFocusFirstRow: false, onRefreshSearchAsyncDatagrid: refreshArchivedDetailsAsync, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, showToppyDraggableHelpCenter: showToppyDraggableHelpCenter, toppyHelpCenterUsePortal: toppyHelpCenterUsePortal, fetchRemoteCertificates: fetchRemoteCertificates, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onReferenceClick: onReferenceClick, onTaskCreateRequest: onTaskCreateRequest, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onFileOpened: onFileOpened, passToArchiveCallback: passToArchiveCallback, openWGsCopyMoveForm: openWGsCopyMoveForm })
+                            : _jsx("div", { style: accordionStyles.accordionListPlaceholder, children: SDKUI_Localizator.NoDataToDisplay })) }))] }));
+    };
+    // ----- Sezione: dettagli da archiviare ------------------------------------------------------
+    const renderArchiveList = (panel) => {
+        const isOpen = sectionsOpen.archiveList;
+        return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
+                    section: 'archiveList',
+                    isOpen,
+                    tooltip: isOpen ? SDKUI_Localizator.HideDetailsToArchive : SDKUI_Localizator.ShowDetailsToArchive,
+                    count: currentRows.length,
+                    title: (_jsxs(_Fragment, { children: [_jsx(IconArchive, { fontSize: 15 }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: SDKUI_Localizator.DetailsToArchive })] })),
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsxs("div", { style: { ...styles.gridWrapper, ...(panel.isMaximized ? {} : { borderTop: `1px solid ${TMColors.card_background}` }) }, children: [_jsx(TMDataGrid, { dataColumns: gridColumns, dataSource: currentRows, keyExpr: "id", height: "100%", showSearchPanel: showGridSearch, showGroupPanel: false, showFilterPanel: false, showHeaderFilter: true, selection: gridSelection, selectedRowKeys: selectedRowKeys, onSelectionChanged: handleSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: handleFocusedRowChanged, onCellDblClick: handleCellDblClick, editing: gridEditing, onRowUpdating: handleRowUpdating, customContextMenuItems: contextMenuItems }), _jsx("button", { type: "button", onClick: openAddForm, style: styles.fab, ...hoverStyle({ backgroundColor: '#D94A9F', transform: 'scale(1.1)', boxShadow: '0 4px 12px rgba(37, 89, 165, 0.6)' }, { backgroundColor: TMColors.button_floating_background, transform: 'scale(1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx("i", { className: "dx-icon-add", style: { fontSize: '22px' } }) }) })] }))] }));
+    };
+    // ----- Pannelli del riepilogo, uno per sezione ----------------------------------------------
+    const renderSectionsInPanels = () => {
+        const definitions = [
+            { section: 'masterInfo', name: `Master: ${getDtdDisplayName(dtd)}`, render: renderMasterInfo },
+            ...(selectedRelation?.detailTID !== undefined
+                ? [{ section: 'archivedDetails', name: SDKUI_Localizator.ArchivedDetails, render: renderArchivedDetails }]
+                : []),
+            { section: 'archiveList', name: SDKUI_Localizator.DetailsToArchive, render: renderArchiveList },
+        ];
+        const panels = definitions.map(definition => ({
+            id: definition.section,
+            name: definition.name,
+            currentGroupDirection: 'vertical',
+            contentOptions: {
+                // Ingrandire una sezione collassata la apre: altrimenti il pannello a tutto schermo sarebbe vuoto
+                component: _jsx(TMSummarySectionSlot, { section: definition.section, render: definition.render, onBeforeMaximize: (section) => setSectionOpen(section, true) }),
+                // Una sezione chiusa vale 0% di altezza: è questo minimo a tenerne a schermo la testata
+                minHeight: `${SECTION_HEADER_HEIGHT_PX}px`,
+                // La sezione collassata è alta quanto la sua testata: i separatori non la ingrandiscono
+                isCollapsed: !sectionsOpen[definition.section],
+            },
+        }));
+        const sections = panels.map(panel => panel.id);
+        // Le altezze salvate sono il punto di partenza, ma è il collasso corrente a decidere le quote
+        const savedStates = getMultiDetailPanelStates();
+        const savedDimensions = hasMultiDetailPanelStates()
+            ? sections.reduce((acc, section) => {
+                if (savedStates[section])
+                    acc[section] = { width: savedStates[section].width, height: savedStates[section].height };
+                return acc;
+            }, {})
+            : undefined;
+        const initialDimensions = sectionPanelHeights(sections, sectionsOpen, savedDimensions);
+        const initialVisibility = sections.reduce((acc, section) => { acc[section] = true; return acc; }, {});
+        return (_jsx("div", { style: styles.panelsHost, children: _jsx("div", { style: styles.panelsHostFill, children: _jsxs(TMPanelManagerWithPersistenceProvider
+                // Le dimensioni sono lette solo al montaggio: dopo la cancellazione del layout i pannelli vanno rimontati
+                , { panels: panels, initialVisibility: initialVisibility, defaultDimensions: initialDimensions, initialDimensions: initialDimensions, initialMobilePanelId: 'archiveList', isPersistenceEnabled: true, persistPanelStates: saveMultiDetailPanelStates, children: [_jsx(TMSectionPanelsHeights, { sections: sections, sectionsOpen: sectionsOpen }), _jsx(TMPanelManagerContainer, { panels: panels, direction: 'vertical', showToolbar: false, minPanelSizePx: SECTION_HEADER_HEIGHT_PX, gutterSizePx: PANEL_GUTTER_PX })] }, layoutResetToken) }) }));
+    };
+    const renderArchiveSummary = () => (_jsxs("div", { style: styles.summaryContainer, children: [renderSectionsInPanels(), _jsxs("div", { style: styles.footer, children: [_jsxs("label", { style: styles.footerLabel, ...hoverStyle({ borderColor: TMColors.primary, color: TMColors.text_normal }, { borderColor: TMColors.card_background, color: TMColors.label_normal }), children: [_jsx("input", { type: "checkbox", checked: stopOnFirstError, onChange: (e) => setStopOnFirstError(e.target.checked), style: styles.checkbox }), "Ferma l'archiviazione al primo errore"] }), _jsxs("button", { type: "button", onClick: archiveAllAsync, disabled: isArchiveDisabled, style: {
+                            ...styles.archiveButton,
+                            background: isArchiveDisabled ? TMColors.disabled : TMColors.success,
+                            boxShadow: isArchiveDisabled ? 'none' : `0 4px 14px ${TMColors.success}55`,
+                            cursor: isArchiveDisabled ? 'default' : 'pointer',
+                            opacity: isArchiveDisabled ? 0.6 : 1,
+                        }, ...(isArchiveDisabled ? {} : hoverStyle({ transform: 'translateY(-2px)', boxShadow: `0 6px 20px ${TMColors.success}77`, filter: 'brightness(1.06)' }, { transform: 'translateY(0)', boxShadow: `0 4px 14px ${TMColors.success}55`, filter: 'brightness(1)' })), children: [_jsx(IconArchive, {}), archiveButtonCaption] })] })] }));
+    // ----- Render principale --------------------------------------------------------------------
+    if (isLoading)
+        return null;
+    return _jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', ...waitPanel, isCancelable: true, abortController: abortController, usePortal: true, children: _jsx(TMModal, { width: isSummaryPhase ? '95%' : '720px', height: isSummaryPhase ? '95%' : 'auto', onClose: closeModal, title: modalTitle, hidePopup: false, askClosingConfirm: archiveRows.length > 0, recenterOnResize: true, titleActions: renderOptionsMenu(), children: _jsxs("div", { style: styles.content, children: [hasMultipleTypes && _jsx("div", { style: styles.header, children: renderStepper({
+                                    steps,
+                                    phase,
+                                    hasMultipleTypes,
+                                    isBackLocked,
+                                    showBackArrow: isSummaryPhase,
+                                    onBack: backToTypeSelection,
+                                    onStepClick: (stepPhase) => (stepPhase === MultiDetailArchivePhase.SelectDcmtType ? backToTypeSelection() : setPhase(stepPhase)),
+                                }) }), !isSummaryPhase
+                                ? renderSelectDcmtType({ detailRelationItems, selectedRelation, onSelectRelation: selectRelation })
+                                : (isSummaryReady
+                                    ? renderArchiveSummary()
+                                    : _jsx("div", { style: styles.loader, children: _jsx(LoadIndicator, { height: 40, width: 40 }) }))] }) }) }), isOpenAddForm && selectedRelation?.detailTID && (_jsx(TMDcmtForm, { isModal: true, titleModal: getDtdDisplayName(selectedItem?.detailDtd), TID: selectedRelation.detailTID, layoutMode: LayoutModes.Ark, showBackButton: false, allowButtonsRefs: false, inputMids: formInputMids, inputFile: editingRow?.__file ?? null, archiveListMode: {
+                    isEditingRow: editingRowId !== undefined,
+                    onUpsertRow: (values, file) => upsertRow(values, file),
+                }, onClose: closeAddForm, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showDcmtFormSidebar: showDcmtFormSidebar, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager })), isOpenMasterForm && masterDcmt?.TID !== undefined && masterDcmt?.DID !== undefined && (_jsx(TMDcmtForm, { isModal: true, titleModal: `${SDKUI_Localizator.Update}: ${getDtdDisplayName(dtd)}`, TID: masterDcmt.TID, DID: masterDcmt.DID, layoutMode: LayoutModes.Update, showBackButton: false, allowRelations: false, allowButtonsRefs: false, onSavedAsyncCallback: handleMasterSavedAsync, onClose: () => setIsOpenMasterForm(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, onTaskCreateRequest: onTaskCreateRequest, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showDcmtFormSidebar: showDcmtFormSidebar, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, fetchRemoteCertificates: fetchRemoteCertificates, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onReferenceClick: onReferenceClick }))] });
+};
+export default TMMultiMasterDetailDcmtsForm;

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

@@ -0,0 +1,352 @@
+import React from 'react';
+import { DataListViewModes, DcmtTypeDescriptor, MetadataDescriptor, RelationDescriptor } from '@topconsultnpm/sdk-ts';
+import { DataGridTypes, IColumnProps } from 'devextreme-react/data-grid';
+import { TMPanelDimensionsMap } from '../../layout/panelManager/types';
+import { DcmtInfo, MetadataValueDescriptorEx } from '../../../ts';
+/** Relazione di dettaglio con il relativo tipo documento */
+export interface DetailRelationItem {
+    relation: RelationDescriptor;
+    detailDtd: DcmtTypeDescriptor | undefined;
+}
+export interface MultiDetailStep {
+    phase: number;
+    label: React.ReactNode;
+}
+export type AccordionSection = 'masterInfo' | 'archivedDetails' | 'archiveList';
+/**
+ * Stato del pannello che ospita una sezione. Lo espone il panel manager, il cui contesto è leggibile
+ * solo dentro l'albero del provider: da qui passa alle testate (vedi TMSummarySectionSlot)
+ */
+export type SectionPanelState = {
+    isMaximized: boolean;
+    toggleMaximize: () => void;
+};
+/** Valore di un metadato letto da un documento: una cella del risultato di ricerca */
+export type MetadataScalarValue = string | number | boolean | Date | null | undefined;
+/**
+ * Riga del riepilogo: oltre ai campi di servizio (prefisso `__`) porta i valori dei metadati
+ * indicizzati per mid (`String(mid)`), come richiesto dal dataField delle colonne della griglia
+ */
+export interface ArchiveRow {
+    /** Chiave della riga in griglia */
+    id: number;
+    /** Tipo documento di dettaglio a cui appartiene la riga */
+    __tid: number;
+    /** Valori compilati nel form, nel formato richiesto dall'archiviazione */
+    __values: Array<MetadataValueDescriptorEx>;
+    /** File da archiviare, se il tipo documento lo prevede */
+    __file?: File;
+    /** Valore del metadato mostrato in colonna, indicizzato per mid */
+    [mid: string]: string | number | Array<MetadataValueDescriptorEx> | File | undefined;
+}
+/**
+ * Cella nel render delle colonne del riepilogo: i valori dei metadati arrivano dal form come
+ * stringhe, quindi il `value` generico di DevExtreme si restringe
+ */
+export type ArchiveRowCell = Omit<DataGridTypes.ColumnCellTemplateData<ArchiveRow, number>, 'value'> & {
+    readonly value?: string;
+};
+/**
+ * Modifiche di una riga in arrivo dalla griglia (mid -> nuovo valore): in modifica diretta ci sono
+ * solo i metadati testuali (vedi isInlineEditableMetadata) e l'editor svuotato restituisce null
+ */
+export type ArchiveRowChanges = Record<string, string | null | undefined>;
+/** Aggiornamento di una riga della griglia, con le sole modifiche possibili in linea */
+export type ArchiveRowUpdatingEvent = Omit<DataGridTypes.RowUpdatingEvent<ArchiveRow, number>, 'newData'> & {
+    newData: ArchiveRowChanges;
+};
+export declare const SECTION_WEIGHTS: Record<AccordionSection, number>;
+export declare const SECTION_HEADER_HEIGHT_PX = 30;
+export declare const PANEL_GUTTER_PX = 10;
+/** Il master è modificabile solo se il tipo documento lo consente */
+export declare const canUpdateMasterCallback: (dtd?: DcmtTypeDescriptor, masterDcmt?: DcmtInfo) => boolean;
+/** Permesso di archiviazione sul tipo documento di dettaglio */
+export declare const canArchive: (dtd?: DcmtTypeDescriptor) => boolean;
+/**
+ * Marcatore delle celle modificabili direttamente in griglia: il doppio clic le porta in modifica,
+ * quindi non deve aprire anche il form della riga
+ */
+export declare const INLINE_EDITABLE_CELL_CLASS = "tm-cell-inline-editable";
+/**
+ * Modifica diretta in griglia: solo il testo libero. Liste dati, calcolati, numeratori e speciali
+ * hanno editor e vincoli propri, date e numeri una formattazione dedicata: restano al form
+ */
+export declare const isInlineEditableMetadata: (md: MetadataDescriptor) => boolean;
+/** Colonne della griglia di riepilogo dai metadati (utente) del tipo documento */
+export declare const buildColumnsFromDtd: (dtd: DcmtTypeDescriptor | undefined, renderDataListCell: (value: string | Date | number | undefined, dataListID: number, viewMode: DataListViewModes) => React.ReactElement) => Array<IColumnProps>;
+export declare const getDetailDtdAsync: (detailTID: number | undefined) => Promise<DcmtTypeDescriptor | undefined>;
+/** Nome visualizzato del tipo documento (localizzato se richiesto) */
+export declare const getDtdDisplayName: (dtd: DcmtTypeDescriptor | undefined) => string;
+/** Messaggio del blocco: con righe inserite il tipo documento non è più modificabile */
+export declare const getBackLockedTitle: () => string;
+/**
+ * Altezze dei pannelli impilati a partire dalle sezioni aperte:
+ * una sezione chiusa vale 0% e resta a schermo con la sola testata
+ * le aperte si spartiscono tutto lo spazio
+ */
+export declare const sectionPanelHeights: (sections: Array<AccordionSection>, sectionsOpen: Record<AccordionSection, boolean>, currentDimensions?: TMPanelDimensionsMap) => TMPanelDimensionsMap;
+export declare const multiDetailStyles: {
+    stepper: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: string;
+    };
+    backArrow: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        color: string;
+        cursor: "pointer";
+        marginRight: string;
+        transition: "all 0.18s ease";
+    };
+    stepPill: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        borderRadius: string;
+        transition: "all 0.18s ease";
+    };
+    stepCircle: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        color: "#ffffff";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        fontSize: string;
+        fontWeight: number;
+        flexShrink: number;
+        transition: "all 0.18s ease";
+    };
+    stepLabel: {
+        fontSize: string;
+        whiteSpace: "nowrap";
+        display: "flex";
+        alignItems: "center";
+    };
+    stepConnector: {
+        width: string;
+        height: string;
+        margin: string;
+        borderRadius: string;
+        flexShrink: number;
+    };
+    stepTypeLabel: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        maxWidth: string;
+    };
+    stepTypeLabelText: {
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    selectContainer: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        flex: number;
+        gap: string;
+        overflow: "auto";
+        padding: string;
+    };
+    selectTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    selectList: {
+        display: "flex";
+        flexDirection: "column";
+        gap: string;
+        width: string;
+        maxWidth: string;
+    };
+    typeCard: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        borderRadius: string;
+        cursor: "pointer";
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)";
+        transition: "all 0.15s ease";
+    };
+    typeCardIcon: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        background: string;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexShrink: number;
+    };
+    typeCardName: {
+        flex: number;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        whiteSpace: "normal";
+        wordBreak: "break-word";
+        lineHeight: number;
+    };
+};
+/** Stili delle sezioni collassabili: qui perché la testata comune (renderAccordionHeader) vive in questo file */
+export declare const accordionStyles: {
+    accordion: {
+        display: "flex";
+        flexDirection: "column";
+        minHeight: number;
+        borderRadius: string;
+        border: string;
+        background: string;
+        overflow: "hidden";
+    };
+    accordionInPanel: {
+        flex: number;
+    };
+    accordionHeader: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        cursor: "pointer";
+        userSelect: "none";
+        transition: "background 0.15s ease";
+        outline: string;
+        flexShrink: number;
+        minHeight: string;
+    };
+    accordionTitle: {
+        flex: number;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        minWidth: number;
+    };
+    accordionBadge: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        minWidth: string;
+        height: string;
+        padding: string;
+        borderRadius: string;
+        background: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flexShrink: number;
+    };
+    accordionListBody: {
+        position: "relative";
+        flex: number;
+        minHeight: number;
+        display: "flex";
+        flexDirection: "column";
+        borderTop: string;
+    };
+    accordionListPlaceholder: {
+        display: "flex";
+        flex: number;
+        alignItems: "center";
+        justifyContent: "center";
+        gap: string;
+        padding: string;
+        color: string;
+        fontSize: string;
+    };
+    accordionExpandBtn: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: string;
+        height: string;
+        padding: number;
+        borderRadius: string;
+        border: string;
+        background: string;
+        color: string;
+        cursor: "pointer";
+        flexShrink: number;
+        transition: "background 0.15s ease, color 0.15s ease";
+    };
+};
+export interface RenderStepperParams {
+    /** Passi da mostrare, in ordine di fase */
+    steps: Array<MultiDetailStep>;
+    /** Fase corrente: i passi con fase minore sono completati */
+    phase: number;
+    /** Con un solo tipo documento il numero dello step non si mostra */
+    hasMultipleTypes: boolean;
+    /** Con righe inserite il ritorno alla scelta del tipo è bloccato (freccia e step completato) */
+    isBackLocked: boolean;
+    /** La freccia di ritorno si mostra solo dove ha senso tornare indietro */
+    showBackArrow: boolean;
+    /** Ritorno indietro dalla freccia */
+    onBack: () => void;
+    /** Click su uno step completato: riceve la fase di destinazione */
+    onStepClick: (phase: number) => void;
+}
+export declare const renderStepper: ({ steps, phase, hasMultipleTypes, isBackLocked, showBackArrow, onBack, onStepClick }: RenderStepperParams) => import("react/jsx-runtime").JSX.Element;
+export interface RenderSelectDcmtTypeParams {
+    /** Relazioni di dettaglio fra cui scegliere */
+    detailRelationItems: Array<DetailRelationItem>;
+    /** Relazione attualmente selezionata */
+    selectedRelation: RelationDescriptor | undefined;
+    /** Selezione di una relazione */
+    onSelectRelation: (item: DetailRelationItem) => void;
+}
+export declare const renderSelectDcmtType: ({ detailRelationItems, selectedRelation, onSelectRelation }: RenderSelectDcmtTypeParams) => import("react/jsx-runtime").JSX.Element;
+export interface RenderAccordionHeaderParams {
+    /** Sezione a cui appartiene la testata */
+    section: AccordionSection;
+    /** Sezione aperta o collassata */
+    isOpen: boolean;
+    /** Tooltip del collasso */
+    tooltip: string;
+    /** Conteggio mostrato nel badge */
+    count: number;
+    /** Titolo della sezione (icona + testo) */
+    title: React.ReactNode;
+    /** Pulsanti specifici della sezione, mostrati prima di quello di ingrandimento */
+    actions?: React.ReactNode;
+    /** Stato del pannello che ospita la sezione: l'ingrandimento è quello del panel manager */
+    panel: SectionPanelState;
+    /** Apre/chiude la sezione */
+    onToggleOpen: (section: AccordionSection, isOpen: boolean) => void;
+}
+export declare const renderAccordionHeader: ({ section, isOpen, tooltip, count, title, actions, panel, onToggleOpen }: RenderAccordionHeaderParams) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Contenuto di un pannello: il contesto del panel manager è leggibile solo dentro l'albero del
+ * provider, quindi è qui che si prende lo stato di ingrandimento da passare alla sezione
+ */
+export declare const TMSummarySectionSlot: ({ section, render, onBeforeMaximize }: {
+    section: AccordionSection;
+    render: (panel: SectionPanelState) => React.ReactNode;
+    onBeforeMaximize?: (section: AccordionSection) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Tiene allineate le altezze dei pannelli al collasso delle sezioni: il panel manager non
+ * conosce il collasso, quindi è qui che l'apertura di una sezione si traduce nelle nuove quote.
+ * Vive dentro il provider perché il contesto è leggibile solo lì
+ */
+export declare const TMSectionPanelsHeights: ({ sections, sectionsOpen }: {
+    sections: Array<AccordionSection>;
+    sectionsOpen: Record<AccordionSection, boolean>;
+}) => null;