@topconsultnpm/sdkui-react 6.20.0-t2 → 6.20.0-t3

package/lib/components/base/TMPopUp.js

@@ -258,6 +258,10 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
             const el = document.getElementById('tm-messagebox-wrapper');
             if (el)
                 el.style.zIndex = '20000';
+            // Blocca traduzione sul titolo
+            const titleEl = el?.querySelector('.dx-popup-title');
+            if (titleEl)
+                titleEl.setAttribute('translate', 'no');
         }, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
 };
 const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}`, onClose }) => {

package/lib/components/base/TMTreeView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
+import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
@@ -350,7 +350,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '12px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", icon: _jsx(IconArrowLeft, { color: 'white' }), disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '11px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", icon: _jsx(IconArrowRight, { color: 'white' }), disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
     }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages]);
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
@@ -378,19 +378,23 @@ export const StyledStickyPaginator = styled.div `
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 8px;
-	margin: 8px 0;
-	padding: 8px 12px;
+	width: fit-content;
+	margin: 3px auto;
+	gap: 15px;
+	padding: 4px 10px;
 	background: oklch(from var(--dx-color-primary) l c h / .85);
 	border: 1px solid oklch(from var(--dx-color-primary) l c h / .9);
-	border-radius: 6px;
-	box-shadow: 0 -2px 8px oklch(from var(--dx-color-primary) l c h / .15);
+	border-radius: 3px;
+	box-shadow: 0 -1px 4px oklch(from var(--dx-color-primary) l c h / .15);
 	transition: all 0.2s ease;
 	min-width: 0;
 	z-index: 10;
 
 	& > button {
 		flex-shrink: 0;
+		min-width: 24px !important;
+		min-height: 20px !important;
+		padding: 2px 6px !important;
 	}
 
 	& > span {
@@ -401,6 +405,6 @@ export const StyledStickyPaginator = styled.div `
 	&:hover {
 		background: oklch(from var(--dx-color-primary) l c h / .95);
 		border-color: oklch(from var(--dx-color-primary) l c h / 1);
-		box-shadow: 0 -2px 12px oklch(from var(--dx-color-primary) l c h / .2);
+		box-shadow: 0 -1px 6px oklch(from var(--dx-color-primary) l c h / .2);
 	}
 `;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -31,7 +31,7 @@ const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imag
 export const TMDataListItemChooserForm = (props) => {
     const dataColumns = useMemo(() => {
         return [
-            { dataField: 'value', caption: SDKUI_Localizator.Value },
+            { dataField: 'value', caption: SDKUI_Localizator.Value, visible: false },
             { dataField: 'name', caption: SDKUI_Localizator.Description }
         ];
     }, []);

package/lib/components/choosers/TMDataListItemFields.js

@@ -56,6 +56,6 @@ const TMDataListItemFields = ({ item, originalItem, onItemChanged, validationIte
         Object.assign(clone, item);
         onItemChanged(clone);
     };
-    return (_jsxs(FieldsContainer, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Value, value: item.value, isModifiedWhen: (item.value || '') != (originalItem?.value || ''), validationItems: validationItems.filter(o => o.PropertyName === "value"), readOnly: readOnly, onValueChanged: handleValueChange }), _jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: item.name, isModifiedWhen: (item.name || '') != (originalItem?.name || ''), validationItems: validationItems.filter(o => o.PropertyName === "itemName"), readOnly: readOnly, value_IT: item.namesLoc?.it_IT, value_EN: item.namesLoc?.en_US, value_FR: item.namesLoc?.fr_FR, value_PT: item.namesLoc?.pt_PT, value_ES: item.namesLoc?.es_ES, value_DE: item.namesLoc?.de_DE, onValueChanged: handleLocalizedNameChange }), _jsx(TMImageIDChooser, { elementStyle: { marginBottom: '10px' }, label: "Immagine", value: item.imageID, isModifiedWhen: (item.imageID || '') != (originalItem?.imageID || ''), validationItems: validationItems.filter(o => o.PropertyName === "imageID"), readOnly: readOnly, onValueChanged: handleImageIDChange })] }));
+    return (_jsxs(FieldsContainer, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Value, value: item.value, isModifiedWhen: (item.value || '') != (originalItem?.value || ''), validationItems: validationItems.filter(o => o.PropertyName === "value"), readOnly: readOnly, autoFocus: true, onValueChanged: handleValueChange }), _jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: item.name, isModifiedWhen: (item.name || '') != (originalItem?.name || ''), validationItems: validationItems.filter(o => o.PropertyName === "itemName"), readOnly: readOnly, value_IT: item.namesLoc?.it_IT, value_EN: item.namesLoc?.en_US, value_FR: item.namesLoc?.fr_FR, value_PT: item.namesLoc?.pt_PT, value_ES: item.namesLoc?.es_ES, value_DE: item.namesLoc?.de_DE, onValueChanged: handleLocalizedNameChange }), _jsx(TMImageIDChooser, { elementStyle: { marginBottom: '10px' }, label: "Immagine", value: item.imageID, isModifiedWhen: (item.imageID || '') != (originalItem?.imageID || ''), validationItems: validationItems.filter(o => o.PropertyName === "imageID"), readOnly: readOnly, onValueChanged: handleImageIDChange })] }));
 };
 export default TMDataListItemFields;

package/lib/components/choosers/TMDataListItemPicker.d.ts

@@ -4,6 +4,7 @@ interface TMDataListItemPickerProps {
     dataListID: number | undefined;
     selectedValue: string | undefined;
     onItemSelect: (item: DataListItemDescriptor) => void;
+    onItemEdited?: (originalItem: DataListItemDescriptor, editedItem: DataListItemDescriptor) => void;
     allowEdit?: boolean;
 }
 declare const TMDataListItemPicker: React.FC<TMDataListItemPickerProps>;

package/lib/components/choosers/TMDataListItemPicker.js

@@ -128,7 +128,7 @@ const Label = styled.div `
   font-weight: bold;
   margin-bottom: 5px;
 `;
-const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, allowEdit = false }) => {
+const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, onItemEdited, allowEdit = false }) => {
     const [dataList, setDataList] = useState(undefined);
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -194,6 +194,10 @@ const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, allowEd
             DataListCacheService.Remove();
             // Ricarica i dati dalla cache (che richiamerà il server)
             await loadDataList(false);
+            // Notifica il parent se un item esistente è stato modificato
+            if (!isCreating && editingItem) {
+                onItemEdited?.(editingItem, newItem);
+            }
             handleCloseDialog();
         }
         catch (error) {

package/lib/components/choosers/TMUserChooser.js

@@ -100,7 +100,7 @@ export const TMUserTooltip = ({ ud, children }) => {
             .filter(Boolean)
             .join('\n');
     };
-    return (_jsx("div", { title: buildTitle(ud), children: children }));
+    return (_jsx("span", { title: buildTitle(ud), style: { display: 'inline-flex', alignItems: 'center' }, children: children }));
 };
 const getCompleteUserName = (domain, name) => {
     if (!name)

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
+import { AccessLevels, AppModules, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView, StyledTabItem, getAppModuleGradient } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -35,7 +35,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
     const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -79,10 +78,20 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             setDynDataListsToBeRefreshed([]);
             return;
         }
-        // Passiamo did = undefined, perché è già in cache
-        DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, undefined).then((resultDTD) => {
-            setCurrentDTD(resultDTD);
-        });
+        const fetchData = async () => {
+            try {
+                let resultDTD = await DcmtTypeListCacheService.GetAsync(TID);
+                if (!resultDTD) {
+                    // Passiamo did = undefined, perché è già in cache
+                    resultDTD = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, undefined);
+                }
+                setCurrentDTD(resultDTD);
+            }
+            catch (error) {
+                TMExceptionBoxManager.show({ exception: error });
+            }
+        };
+        fetchData();
     }, [TID]);
     useEffect(() => {
         if (metadataValues.length <= 0)
@@ -422,6 +431,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    // Mappa TabLayoutItemID -> conteggio errori e dettagli per mostrare il badge sul tab
+    const tabErrorCountMap = useMemo(() => {
+        const map = new Map();
+        if (!layout || !layout.items || layout.items.length === 0 || !layout.showTab) {
+            return map;
+        }
+        // Trova i tab (LayoutGroup con parentID === 0 e orientation Vertical)
+        const tabGroups = layout.items.filter(item => item.type === LayoutItemTypes.LayoutGroup &&
+            item.parentID === 0 &&
+            item.lgd?.orientation === LayoutGroupOrientations.Vertical);
+        // Funzione ricorsiva per trovare tutti i MID figli di un tab
+        const findMidsInGroup = (parentID) => {
+            const mids = [];
+            const children = layout.items?.filter(item => item.parentID === parentID) || [];
+            for (const child of children) {
+                if (child.type === LayoutItemTypes.LayoutControlItem && child.lcid?.mid) {
+                    mids.push(child.lcid.mid);
+                }
+                else if (child.type === LayoutItemTypes.LayoutGroup) {
+                    mids.push(...findMidsInGroup(child.layoutItemID));
+                }
+            }
+            return mids;
+        };
+        // Per ogni tab, conta gli errori e raccoglie i dettagli
+        for (const tabGroup of tabGroups) {
+            const tabId = tabGroup.layoutItemID;
+            if (tabId === undefined)
+                continue;
+            const midsInTab = findMidsInGroup(tabId);
+            const errorDetails = [];
+            for (const mid of midsInTab) {
+                const md = metadataValues.find(m => m.mid === mid);
+                if (md) {
+                    const validationItem = validationItems.find(v => v.PropertyName === md.md?.nameLoc);
+                    if (validationItem) {
+                        errorDetails.push({
+                            fieldName: md.md?.nameLoc ?? '',
+                            message: validationItem.Message ?? ''
+                        });
+                    }
+                }
+            }
+            if (errorDetails.length > 0) {
+                map.set(tabId, { count: errorDetails.length, details: errorDetails });
+            }
+        }
+        return map;
+    }, [layout, metadataValues, validationItems]);
     const layoutDsAttachs = useMemo(() => {
         const dsAttachsData = [];
         metadataValues.forEach(item => {
@@ -465,22 +523,56 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
             return layout.items?.filter(item => item.parentID === parentID) || [];
         };
-        // Recursive function to render layout items with depth tracking for indentation
-        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
-        // may reference itself as a child or cycles exist).
+        /**
+         * Renderizza ricorsivamente l'albero del layout partendo dalla radice e scendendo verso i figli.
+         *
+         * Tipi gestiti:
+         * - LayoutRoot: elemento radice, renderizza i figli come tab (se showTab) o come contenitore semplice
+         * - LayoutGroup: contenitori con orientamento (Vertical/Horizontal) e stili bordo (NoBorder, Group, GroupBox, Tabbed)
+         * - LayoutControlItem: campi metadata terminali, recuperati tramite MID e passati a renderMetadataItem
+         * - SeparatorItem: linee di separazione orizzontali
+         *
+         * @param layoutItem - elemento del layout da renderizzare
+         * @param depth - profondità di annidamento per calcolare l'indentazione (default 0)
+         * @param visited - Set di ID già visitati per prevenire cicli infiniti in layout malformati
+         */
         const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
             const id = layoutItem.layoutItemID ?? 0;
             if (visited.has(id))
                 return null;
             visited.add(id);
+            // Helper: renderizza i children di un layout item
+            const renderChildren = (parentItem, childDepth) => {
+                const itemChildren = getChildren(parentItem.layoutItemID);
+                return itemChildren.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, childDepth, visited) }, `child-${child.layoutItemID}`)));
+            };
             // Check if this is a LayoutRoot - just render its children
             if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
                 const children = getChildren(layoutItem.layoutItemID);
                 if (layout.showTab) {
-                    return (_jsx(React.Fragment, { children: _jsx(TabPanel, { width: "100%", height: "100%", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }) }, `root-${layoutItem.layoutItemID}`));
+                    // Per ogni figlio che è un LayoutGroup tab, costruisce i dati per il TabPanel
+                    // Segna ogni LayoutGroup come visitato per prevenire cicli
+                    const tabItems = [];
+                    for (const child of children) {
+                        const childId = child.layoutItemID ?? 0;
+                        if (visited.has(childId))
+                            continue;
+                        visited.add(childId);
+                        const childChildren = getChildren(child.layoutItemID);
+                        const childContent = (_jsx("div", { style: { width: '100%' }, children: childChildren.map(grandChild => (_jsx(React.Fragment, { children: renderLayoutItem(grandChild, depth + 1, visited) }, `grandchild-${grandChild.layoutItemID}`))) }));
+                        const errorData = tabErrorCountMap.get(childId);
+                        tabItems.push({
+                            layoutItemID: child.layoutItemID,
+                            content: childContent,
+                            title: (child.type === LayoutItemTypes.LayoutGroup && child.lgd?.caption) || `Tab ${child.layoutItemID}`,
+                            errorCount: errorData?.count || 0,
+                            errorDetails: errorData?.details || []
+                        });
+                    }
+                    return (_jsx(React.Fragment, { children: _jsx(TMLayoutTabPanel, { tabItems: tabItems }) }, `root-${layoutItem.layoutItemID}`));
                 }
                 else {
-                    return (_jsx(React.Fragment, { children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }, `root-${layoutItem.layoutItemID}`));
+                    return (_jsx(React.Fragment, { children: renderChildren(layoutItem, depth) }, `root-${layoutItem.layoutItemID}`));
                 }
             }
             // Check if this is a LayoutGroup
@@ -490,42 +582,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
                 const groupIsNoBorder = groupDescriptor.borderStyle == undefined || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder || groupDescriptor.borderStyle == LayoutGroupBorderStyles.None;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
-                //Layout Grou da trasformare in tab
-                if (groupDescriptor.orientation == LayoutGroupOrientations.Vertical && layout.showTab && layoutItem.parentID === 0) {
-                    return (_jsx(Item, { title: groupTitle, children: _jsx("div", { style: { width: '100%' }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-tab-${layoutItem.layoutItemID}`));
+                const isVertical = groupDescriptor.orientation === LayoutGroupOrientations.Vertical;
+                const isHorizontal = groupDescriptor.orientation === LayoutGroupOrientations.Horizontal;
+                const nextDepth = depth + 1;
+                // Stile comune per gruppi con bordo e titolo
+                const borderedGroupStyle = (flexDir) => ({
+                    position: 'relative',
+                    border: '2px solid #CAD9EB',
+                    borderRadius: '3px',
+                    padding: '12px 6px 6px',
+                    margin: '10px',
+                    display: 'flex',
+                    flexDirection: flexDir,
+                    flexWrap: 'wrap',
+                    gap: '3px'
+                });
+                const groupTitleElement = (_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor }, children: groupTitle }));
+                // Layout Group da trasformare in tab - il rendering è già gestito da LayoutRoot
+                if (isVertical && layout.showTab && layoutItem.parentID === 0) {
+                    return null;
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation !== LayoutGroupOrientations.Horizontal && children.length == 0) {
-                    return (_jsx("br", {}));
+                // Gruppo vuoto senza bordo (non orizzontale) → line break
+                if (groupIsNoBorder && !isHorizontal && children.length === 0) {
+                    return _jsx("br", {});
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Horizontal && children.length > 0 && groupTitle.length > 0) {
-                    return (
-                    // <div key={`group-horizontal-${layoutItem.layoutItemID}`} style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }}>
-                    _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))), "  "] }, `group-horizontal-${layoutItem.layoutItemID}`)
-                    // </div>
-                    );
+                // Orizzontale con bordo, children e titolo
+                if (!groupIsNoBorder && isHorizontal && children.length > 0 && groupTitle.length > 0) {
+                    return (_jsxs("div", { style: borderedGroupStyle('row'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                // Verticale senza bordo
+                if (groupIsNoBorder && isVertical) {
+                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: renderChildren(layoutItem, nextDepth) }));
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group) {
-                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`)))] }));
+                // Verticale con bordo
+                if (!groupIsNoBorder && isVertical) {
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }));
                     }
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed) {
-                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }));
                     }
                 }
-                if (groupDescriptor.orientation === LayoutGroupOrientations.Horizontal) {
-                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed ?
-                            _jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) :
-                            groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group ?
-                                _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID)))] })
-                                :
-                                    children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID))) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                // Orizzontale
+                if (isHorizontal) {
+                    const renderHorizontalChildren = () => children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID)));
+                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed ? (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) })) : groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group ? (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderHorizontalChildren()] })) : (renderHorizontalChildren()) }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                // Apply indentation only to subgroups (depth > 0), not to root groups
+                // Fallback: gruppo con accordion e indentazione
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -559,7 +664,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const visited = new Set();
                 return rootItems.map(item => (_jsx(React.Fragment, { children: renderLayoutItem(item, 0, visited) }, `root-item-${item.layoutItemID}`)));
             })() }));
-    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig, tabErrorCountMap]);
     const renderForm = useMemo(() => {
         // Se currentDTD non è ancora stato caricato, non renderizzare nulla
         if (!currentDTD) {
@@ -611,3 +716,58 @@ const StyledSeparator = styled.hr `
     border: none;
     border-top: 1px solid #e0e0e0;
 `;
+const StyledErrorBadge = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background-color: #c62828;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: bold;
+    line-height: 1;
+    margin-left: 6px;
+`;
+const TMLayoutTabPanel = React.memo(({ tabItems }) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const handleSelectedIndexChange = useCallback((index) => {
+        setActiveTabIndex(index);
+    }, []);
+    return (_jsx(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: handleSelectedIndexChange, children: tabItems.map((tabItem, index) => (_jsx(Item, { title: tabItem.title, tabRender: () => (_jsxs(StyledTabItem, { "$isSelected": activeTabIndex === index, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
+                                minWidth: '240px',
+                                padding: '14px',
+                                borderRadius: '10px',
+                                background: '#ffffff',
+                                boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
+                                border: '1px solid #e5e7eb',
+                                color: '#1f2937',
+                                fontFamily: 'sans-serif'
+                            }, children: [_jsx("div", { style: {
+                                        fontWeight: 600,
+                                        textAlign: 'center',
+                                        fontSize: '1.05em',
+                                        marginBottom: '10px',
+                                        color: '#b91c1c'
+                                    }, children: tabItem.errorCount === 1 ? "1 campo non valido" : `${tabItem.errorCount} campi non validi` }), _jsx("div", { style: {
+                                        height: '1px',
+                                        background: '#e5e7eb',
+                                        marginBottom: '10px'
+                                    } }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: tabItem.errorDetails?.map((error, idx) => (_jsxs("div", { style: {
+                                            padding: '10px',
+                                            borderRadius: '8px',
+                                            background: '#fef2f2',
+                                            border: '1px solid #fecaca'
+                                        }, children: [_jsx("div", { style: {
+                                                    fontWeight: 600,
+                                                    fontSize: '0.95em',
+                                                    marginBottom: '3px',
+                                                    color: '#991b1b'
+                                                }, children: error.fieldName }), _jsx("div", { style: {
+                                                    fontSize: '0.85em',
+                                                    color: '#7f1d1d',
+                                                    lineHeight: 1.4
+                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] })), children: _jsx("div", { style: { width: '100%' }, children: tabItem.content }) }, `tab-${tabItem.layoutItemID}`))) }));
+});

package/lib/components/editors/TMTextArea.d.ts

@@ -13,6 +13,7 @@ interface ITMTextArea extends ITMEditorBase {
     maxLength?: number;
     resize?: boolean;
     autoCalculateRows?: boolean;
+    fillHeight?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true, fillHeight = false } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -36,7 +36,7 @@ const TMTextArea = (props) => {
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
     // Stores the calculated number of rows for the textarea
-    const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    const [calculatedRows, setCalculatedRows] = useState(fillHeight ? 1 : (rows ?? 1));
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     const deviceType = useDeviceType();
@@ -148,8 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: fillHeight ? undefined : calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -170,8 +170,8 @@ const TMTextArea = (props) => {
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, style: fillHeight ? { height: '100%', display: 'flex', flexDirection: 'column' } : {}, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
+    return (_jsx("div", { style: { ...elementStyle, ...(fillHeight ? { height: '100%' } : {}) }, children: renderedLeftLabelTextArea() }));
 };
 export default TMTextArea;

package/lib/components/features/archive/TMArchive.d.ts

@@ -25,6 +25,7 @@ interface ITMArchiveProps {
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
     openPdfEditor?: (fromDTD?: DcmtTypeDescriptor, file?: File | null, handleFile?: (file: File) => void) => void;
+    onScanRequest?: (onFileScanned: (file: File) => void) => void;
 }
 declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
 export default TMArchive;

package/lib/components/features/archive/TMArchive.js

@@ -12,7 +12,7 @@ import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
-const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openPdfEditor }) => {
+const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openPdfEditor, onScanRequest }) => {
     const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined), openPdfEditor: openPdfEditor }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined), openPdfEditor: openPdfEditor, onScanRequest: onScanRequest }, currentTID)
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {

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

@@ -62,6 +62,7 @@ interface ITMDcmtFormProps {
     onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
     s4TViewerDialogComponent?: React.ReactNode;
     enableDragDropOverlay?: boolean;
+    onScanRequest?: (onFileScanned: (file: File) => void) => void;
     passToSearch?: (outputMids: Array<{
         mid: number;
         value: string;