@topconsultnpm/sdkui-react 6.20.0-dev2.49 → 6.20.0-dev2.50

package/lib/components/features/tasks/TMTaskForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ObjectClasses, TaskDescriptor, PdGs, UserListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
 import ScrollView from 'devextreme-react/scroll-view';
@@ -12,8 +12,7 @@ import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMSaveForm from '../../forms/TMSaveForm';
 import TMDcmtForm from '../documents/TMDcmtForm';
-import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-import { getCurrentUserTaskRole, RenderDescriptionField, RenderEndDateField, RenderNameField, RenderPriorityField, RenderRemindDateField, RenderStartDateField, RenderTaskFormStateField, TaskAssigneeField, TaskFormAssignmentNoticeBadge, TaskFormContextualAttachments, TaskFormResponseComment, TaskPdgOriginNavigator, TMChangeStateForm } from './TMTaskFormUtils';
+import { getCurrentUserTaskRole, RenderDescriptionField, RenderEndDateField, RenderNameField, RenderPriorityField, RenderRemindDateField, RenderStartDateField, RenderTaskFormStateField, TaskAssigneeField, TaskFormAssignmentNoticeBadge, TaskFormContextualAttachments, TMChangeStateForm } from './TMTaskFormUtils';
 const TMTaskForm = (props) => {
     // Custom hook to manage workflow approval data
     const { refreshWorkflowApprove } = useWorkflowApprove();
@@ -61,10 +60,6 @@ const TMTaskForm = (props) => {
     };
     const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
     const containerRef = useRef(null);
-    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
-    const deviceType = useDeviceType();
-    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
-    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const [showDcmtForm, setShowDcmtForm] = useState(false);
     const [showChangeStateForm, setShowChangeStateForm] = useState(false);
     const [users, setUsers] = useState([]); // State to store the users
@@ -270,7 +265,7 @@ const TMTaskForm = (props) => {
                 console.warn(`Unhandled object type: ${ref.objClass}`);
         }
     };
-    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsxs(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: [_jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: formData && (formMode === FormModes.Create || formMode === FormModes.None) ? "calc(100% - 70px)" : "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Create || formMode === FormModes.None) && _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx(RenderNameField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(RenderDescriptionField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(TaskAssigneeField, { formMode: formMode, formData: formData, formDataOrig: formDataOrig, taskContext: taskContext, validationItems: validationItems, fieldsReadOnly: fieldsReadOnly, usersList: usersList, onValueChanged: (newValue) => {
+    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsxs(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, showUndoButton: formMode === FormModes.Update, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: [_jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: formData && (formMode === FormModes.Create || formMode === FormModes.None) ? "calc(100% - 70px)" : "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Create || formMode === FormModes.None) && _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx(RenderNameField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(RenderDescriptionField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(TaskAssigneeField, { formMode: formMode, formData: formData, formDataOrig: formDataOrig, taskContext: taskContext, validationItems: validationItems, fieldsReadOnly: fieldsReadOnly, usersList: usersList, onValueChanged: (newValue) => {
                                                         if (newValue === undefined)
                                                             return;
                                                         setFormData({ ...formData ?? {}, toID: newValue[0] });
@@ -278,7 +273,7 @@ const TMTaskForm = (props) => {
                                                         if (newValue === undefined)
                                                             return;
                                                         setFormData({ ...formData ?? {}, toID: newValue[0] });
-                                                    } }), _jsx(RenderStartDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleStartTimeContentReady }), _jsx(RenderEndDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleEndTimeContentReady }), _jsx(RenderPriorityField, { formData: formData, formDataOrig: formDataOrig, fieldsReadOnly: fieldsReadOnly, onPriorityValueChange: onPriorityValueChange }), _jsx(RenderRemindDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData }), _jsx(RenderTaskFormStateField, { formData: formData, formDataOrig: formDataOrig, handleShowChangeStateForm: handleShowChangeStateForm, onSavedCallback: onSaved }), _jsx(TaskFormResponseComment, { originalResponse: formDataOrig?.response, currentResponse: formData?.response, readonly: true }), _jsx(TaskPdgOriginNavigator, { formMode: formMode, formData: formDataOrig, isMobile: isMobile, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback })] })] }) }) }), formData && (_jsx("div", { style: {
+                                                    } }), _jsx(RenderStartDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleStartTimeContentReady }), _jsx(RenderEndDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleEndTimeContentReady }), _jsx(RenderPriorityField, { formData: formData, formDataOrig: formDataOrig, fieldsReadOnly: fieldsReadOnly, onPriorityValueChange: onPriorityValueChange }), _jsx(RenderRemindDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData }), _jsx(RenderTaskFormStateField, { formData: formData, formDataOrig: formDataOrig, formMode: formMode, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback, handleShowChangeStateForm: handleShowChangeStateForm, onSavedCallback: onSaved })] })] }) }) }), formData && (_jsx("div", { style: {
                                 position: 'absolute',
                                 bottom: 0,
                                 left: 0,

package/lib/components/features/tasks/TMTaskFormUtils.d.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import { PdGs, Task_States, TaskDescriptor, UserDescriptor, ValidationItem } from "@topconsultnpm/sdk-ts";
 import { FormModes, TaskContext } from "../../../ts";
 import { IFieldsEditability } from "./TMTasksUtils";
@@ -18,13 +18,6 @@ interface TaskFormContextualAttachmentsProps {
     taskContext: TaskContext | undefined;
 }
 export declare const TaskFormContextualAttachments: ({ taskContext }: TaskFormContextualAttachmentsProps) => JSX.Element | null;
-interface TaskPdgOriginNavigatorProps {
-    formMode: FormModes;
-    formData: TaskDescriptor | undefined;
-    isMobile: boolean;
-    gotoPDGExtendedLabelClickCallback: () => void;
-}
-export declare const TaskPdgOriginNavigator: (props: TaskPdgOriginNavigatorProps) => false | "" | import("react/jsx-runtime").JSX.Element | undefined;
 interface TaskFormAssignedToProps {
     formMode: FormModes;
     formData: TaskDescriptor | undefined;
@@ -36,13 +29,6 @@ interface TaskFormAssignedToProps {
     onValueChanged: (newValue: Array<number> | undefined) => void;
 }
 export declare const TaskAssigneeField: (props: TaskFormAssignedToProps) => import("react/jsx-runtime").JSX.Element;
-interface TaskFormResponseCommentProps {
-    originalResponse?: string;
-    currentResponse?: string;
-    readonly?: boolean;
-    onAnswerChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
-}
-export declare const TaskFormResponseComment: (props: TaskFormResponseCommentProps) => import("react/jsx-runtime").JSX.Element;
 interface RenderFieldBaseProps {
     fieldsReadOnly: IFieldsEditability;
     formDataOrig?: TaskDescriptor;
@@ -67,6 +53,8 @@ export declare const RenderRemindDateField: ({ validationItems, setFormData, for
 interface RenderTaskFormStateFieldProps {
     formDataOrig: TaskDescriptor | undefined;
     formData: TaskDescriptor | undefined;
+    formMode: FormModes;
+    gotoPDGExtendedLabelClickCallback: () => void;
     handleShowChangeStateForm: (value: boolean) => void;
     onSavedCallback?: (task: TaskDescriptor) => void;
 }

package/lib/components/features/tasks/TMTaskFormUtils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { PdGs, Priorities, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { FormModes } from "../../../ts";
 import { calcResponsiveSizes, DateDisplayTypes, getPdgsIconMap, IconSave, SDKUI_Localizator } from "../../../helper";
@@ -12,11 +12,12 @@ import { TMColors } from "../../../utils/theme";
 import TMTextArea from "../../editors/TMTextArea";
 import TMDropDown from "../../editors/TMDropDown";
 import TMDateBox from "../../editors/TMDateBox";
-import { useDeviceType } from "../../base/TMDeviceProvider";
+import { DeviceType, useDeviceType } from "../../base/TMDeviceProvider";
 import TMModal from "../../base/TMModal";
 import TMButton from "../../base/TMButton";
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../../base/TMPopUp";
 import TMSpinner from "../../base/TMSpinner";
+import { taskStateIconMap } from "./TMTasksUtilsView";
 export const getCurrentUserTaskRole = (task) => {
     if (!task)
         return "personal";
@@ -93,7 +94,7 @@ export const TaskFormContextualAttachments = ({ taskContext }) => {
     const hasAnyAttachment = hasWorkingGroup || hasDossier || hasDocument || hasWorkItem;
     return (_jsx("div", { style: { width: '100%', marginTop: 15, marginLeft: 5 }, children: !hasAnyAttachment ? (_jsxs("span", { children: [SDKUI_Localizator.Attachment, ": ", _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: 'Nessun allegato' })] })) : (_jsxs(_Fragment, { children: [_jsx(RenderAttachmentBlock, { condition: hasWorkingGroup, pdg: PdGs.WG, label: SDKUI_Localizator.WorkGroup + ' "' + getOriginLabel(PdGs.WG, taskContext?.workingGroup?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasDossier, pdg: PdGs.CF, label: SDKUI_Localizator.Dossier + ' "' + getOriginLabel(PdGs.CF, taskContext?.dossier?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasDocument, pdg: PdGs.DT, label: SDKUI_Localizator.Document + ' "' + getOriginLabel(PdGs.DT, taskContext?.document?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasWorkItem, pdg: PdGs.DT, label: SDKUI_Localizator.Document + ' "' + getOriginLabel(PdGs.DT, taskContext?.workItem?.name) + '"' })] })) }));
 };
-export const TaskPdgOriginNavigator = (props) => {
+const TaskPdgOriginNavigator = (props) => {
     const { formMode, formData, isMobile, gotoPDGExtendedLabelClickCallback } = props;
     return formMode === FormModes.Update && formData?.pdG && formData?.iD1Name && (_jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 16, padding: '8px 0' }, children: _jsx("div", { style: { width: "100%", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsxs("div", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
                     backgroundColor: "#C2388B",
@@ -173,17 +174,16 @@ export const TaskAssigneeField = (props) => {
     }
     return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: content }));
 };
-const ReadOnlyFieldWrapper = styled.div `
+const FloatingLabelFieldCard = styled.div `
     position: relative;
     width: 100%;
     background: #ffffff;
     border: 1px solid ${props => props.$isModifiedWhen ? '#E29000' : '#e6e6e6'};
     border-radius: 10px;
     padding: 12px 15px;
-    margin-top: 12px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.05);
 `;
-const ReadOnlyFieldLabel = styled.label `
+const FloatingFieldLabel = styled.label `
     position: absolute;
     top: -9px;
     left: 9px;
@@ -195,18 +195,72 @@ const ReadOnlyFieldLabel = styled.label `
     align-items: center;
     gap: 6px;
 `;
-const ReadOnlyFieldValue = styled.div `
+// Nuovo Styled component semplice per StatusFieldValue
+const StatusFieldLabel = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;      // spazio tra label e valore
+    font-size: 1rem;
+    color: #000;   // nero semplice
+    font-weight: 400;
+`;
+const StatusValue = styled.span `
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background: ${props => props.$isModifiedWhen
+    ? "#FFF4E0"
+    : `linear-gradient(#F6F7F9, #F6F7F9) padding-box,
+           linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%) border-box`};
+    ${props => props.$isModifiedWhen && `border-color: #FFD79A;`}
+    color: ${props => props.$isModifiedWhen ? "#B46900" : "#3A3A3A"};
+    transition: all 0.2s ease;
+`;
+const ResponseReadOnlyContainer = styled.div `width: 100%;`;
+const ResponseReadOnlyLabel = styled.div `
+    font-size: 1rem;
+    color: #000;
+    margin-bottom: 6px;
+`;
+const ResponseReadOnlyValue = styled.div `
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 12px 14px;
     font-size: 0.95rem;
-    color: ${props => props.$isModifiedWhen ? '#E29000' : '#525252'};
+    color: #495057;
+    line-height: 1.5;
     white-space: pre-wrap;
-
-    /* Limite a 4 linee con scrollbar se serve */
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;  
-    overflow-y: auto;   /* scrollbar verticale se serve */
-    max-height: calc(1.2em * 4); /* altezza approssimativa di 4 linee */
-
+    word-wrap: break-word;
+    background: ${props => props.$isModifiedWhen
+    ? "#FFF4E0"
+    : `linear-gradient(#F6F7F9, #F6F7F9) padding-box,
+           linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%) border-box`};
+    ${props => props.$isModifiedWhen && `border-color: #FFD79A;`}
+    /* Limite a 3 righe con scrollbar */
+    max-height: calc(1.5em * 3 + 24px); /* 3 righe + padding */
+    overflow-y: auto;
+    
+    /* Scrollbar stilizzata */
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #46B5A2, #3681AD);
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(180deg, #3a9a89, #2d6d94);
+    }
+    
     /* Permette selezione testo */
     user-select: text;
 `;
@@ -249,9 +303,50 @@ const ResponseCommentCharacterCounter = styled.div `
     color: #6c757d;
     margin-top: 4px;
 `;
-export const TaskFormResponseComment = (props) => {
+const TaskFormResponseComment = (props) => {
     const { originalResponse = "", currentResponse = "", onAnswerChange, readonly = false } = props;
-    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: readonly ? (currentResponse && currentResponse.trim() !== '' ? (_jsxs(ReadOnlyFieldWrapper, { "$isModifiedWhen": currentResponse !== originalResponse, children: [_jsxs(ReadOnlyFieldLabel, { "$isModifiedWhen": currentResponse !== originalResponse, children: [SDKUI_Localizator.Answer, " "] }), _jsx(ReadOnlyFieldValue, { "$isModifiedWhen": currentResponse !== originalResponse, children: currentResponse && currentResponse.trim() !== '' ? currentResponse : "" })] })) : null) : (_jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: currentResponse ?? '', onChange: onAnswerChange ? onAnswerChange : undefined, "$isModifiedWhen": currentResponse !== originalResponse }), _jsx(ResponseCommentLabel, { htmlFor: "responseId", "$isModifiedWhen": currentResponse !== originalResponse, children: SDKUI_Localizator.Answer }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (currentResponse ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] })) }));
+    const [showFullscreen, setShowFullscreen] = useState(false);
+    const deviceType = useDeviceType();
+    return (_jsx("div", { style: { width: '100%', marginTop: !readonly ? 10 : 0 }, children: readonly ?
+            _jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                            width: '100%',
+                            backgroundColor: '#fff',
+                            border: '1px solid #ccc',
+                            borderRadius: 8,
+                            padding: 8,
+                            boxSizing: 'border-box',
+                            height: '5.4rem',
+                            overflowY: 'auto',
+                            position: 'relative',
+                        }, children: [_jsx("i", { className: "dx-icon-fullscreen", onClick: () => setShowFullscreen(true), style: {
+                                    position: 'absolute',
+                                    top: 6,
+                                    right: 6,
+                                    fontSize: '1.1rem',
+                                    color: '#6c757d',
+                                    cursor: 'pointer',
+                                    transition: 'color 0.2s',
+                                }, onMouseEnter: e => e.currentTarget.style.color = '#333', onMouseLeave: e => e.currentTarget.style.color = '#6c757d' }), _jsx("div", { style: {
+                                    fontSize: '1rem',
+                                    color: '#000',
+                                    whiteSpace: 'pre-wrap',
+                                    lineHeight: '1.6rem',
+                                    paddingRight: 20,
+                                }, children: currentResponse && currentResponse.length > 0
+                                    ? currentResponse
+                                    : _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: SDKUI_Localizator.NoAnswerProvided }) })] }), showFullscreen && (_jsx(TMModal, { title: SDKUI_Localizator.Answer, width: calcResponsiveSizes(deviceType, '600px', '600px', '95%'), height: calcResponsiveSizes(deviceType, '400px', '400px', '80%'), isModal: true, resizable: true, onClose: () => setShowFullscreen(false), children: _jsx("div", { style: {
+                                padding: 16,
+                                fontSize: '1rem',
+                                color: '#000',
+                                whiteSpace: 'pre-wrap',
+                                lineHeight: '1.6rem',
+                                overflowY: 'auto',
+                                height: '100%',
+                                boxSizing: 'border-box',
+                            }, children: currentResponse && currentResponse.length > 0
+                                ? currentResponse
+                                : _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: SDKUI_Localizator.NoAnswerProvided }) }) }))] })
+            : (_jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: currentResponse ?? '', onChange: onAnswerChange ? onAnswerChange : undefined, "$isModifiedWhen": currentResponse !== originalResponse }), _jsx(ResponseCommentLabel, { htmlFor: "responseId", "$isModifiedWhen": currentResponse !== originalResponse, children: SDKUI_Localizator.Answer }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (currentResponse ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] })) }));
 };
 // Stile comune per i container dei campi
 const fieldContainerStyle = { width: '100%' };
@@ -263,14 +358,18 @@ export const RenderStartDateField = ({ validationItems, setFormData, formData, f
 export const RenderEndDateField = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }) => (_jsx("div", { style: fieldContainerWithMarginStyle, children: !fieldsReadOnly.startDate ? (_jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.ExpirationDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: onContentReady, onValueChange: (value) => setFormData({ ...formData ?? {}, endTime: value }), showClearButton: true, readOnly: fieldsReadOnly.endDate })) : (_jsx(TMTextBox, { label: SDKUI_Localizator.ExpirationDate, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true })) }));
 export const RenderRemindDateField = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }) => (_jsx("div", { style: fieldContainerWithMarginStyle, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => setFormData({ ...formData ?? {}, remTime: value }), showClearButton: true, readOnly: fieldsReadOnly.remTime }) }));
 export const RenderTaskFormStateField = (props) => {
-    const { formDataOrig, formData, handleShowChangeStateForm, onSavedCallback } = props;
-    // Non renderizzare nulla finché i dati non sono pronti
-    if (!formDataOrig)
-        return null;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const { formDataOrig, formData, formMode, gotoPDGExtendedLabelClickCallback, handleShowChangeStateForm, onSavedCallback } = props;
     const taskRole = getCurrentUserTaskRole(formDataOrig);
     // Condizione per mostrare il pulsante
-    const showCloseButton = taskRole === 'sender' && formDataOrig.state === Task_States.Completed;
-    const showModifyButton = !(taskRole === 'sender' && formDataOrig.state === Task_States.Completed);
+    const showCloseButton = taskRole === 'sender' && formDataOrig?.state === Task_States.Completed;
+    const showModifyButton = !(taskRole === 'sender' && formDataOrig?.state === Task_States.Completed);
+    console.log(taskRole);
+    console.log("showCloseButton", showCloseButton);
+    console.log("showModifyButton", showModifyButton);
     const closeTaskCallback = () => {
         if (!formData || !formData.id)
             return;
@@ -300,41 +399,48 @@ export const RenderTaskFormStateField = (props) => {
             }
         });
     };
-    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(ReadOnlyFieldWrapper, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(ReadOnlyFieldLabel, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.Status }), _jsx(ReadOnlyFieldValue, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: getStatusLocalizatorValue(formData?.state ?? Task_States.None) }), _jsxs("div", { style: { flex: 1, display: 'flex', justifyContent: 'center' }, children: [showModifyButton && (_jsx("div", { onClick: () => handleShowChangeStateForm(true), style: {
-                                backgroundColor: '#C2388B',
-                                color: '#fff',
-                                padding: '10px 16px',
-                                borderRadius: '25px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                cursor: 'pointer',
-                                fontWeight: 600,
-                                transition: 'background-color 0.3s, transform 0.2s',
-                            }, onMouseEnter: (e) => {
-                                e.currentTarget.style.backgroundColor = '#A12D78';
-                                e.currentTarget.style.transform = 'scale(1.05)';
-                            }, onMouseLeave: (e) => {
-                                e.currentTarget.style.backgroundColor = '#C2388B';
-                                e.currentTarget.style.transform = 'scale(1)';
-                            }, children: _jsx("span", { style: { fontSize: '1rem', letterSpacing: '0.5px' }, children: "Modifica stato" }) })), showCloseButton && (_jsx("div", { onClick: closeTaskCallback, style: {
-                                backgroundColor: '#C2388B',
-                                color: '#fff',
-                                padding: '10px 16px',
-                                borderRadius: '25px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                cursor: 'pointer',
-                                fontWeight: 600,
-                                transition: 'background-color 0.3s, transform 0.2s',
-                            }, onMouseEnter: (e) => {
-                                e.currentTarget.style.backgroundColor = '#A12D78';
-                                e.currentTarget.style.transform = 'scale(1.05)';
-                            }, onMouseLeave: (e) => {
-                                e.currentTarget.style.backgroundColor = '#C2388B';
-                                e.currentTarget.style.transform = 'scale(1)';
-                            }, children: _jsx("span", { style: { fontSize: '1rem', letterSpacing: '0.5px' }, children: "Chiudi attivit\u00E0" }) }))] })] }) }));
+    // Non renderizzare nulla finché i dati non sono pronti
+    if (!formDataOrig)
+        return null;
+    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(FloatingLabelFieldCard, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(FloatingFieldLabel, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.StatusAndAnswer }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx(StatusFieldLabel, { children: _jsxs(StatusValue, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: taskStateIconMap(20).get(formData?.state ?? Task_States.None) }), getStatusLocalizatorValue(formData?.state ?? Task_States.None)] }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [showModifyButton && (_jsxs("div", { onClick: () => handleShowChangeStateForm(true), style: {
+                                        backgroundColor: "#d17800",
+                                        color: "#fff",
+                                        padding: "10px 16px",
+                                        borderRadius: "20px",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        cursor: "pointer",
+                                        fontWeight: 600,
+                                        width: "120px",
+                                        transition: 'background-color 0.3s, transform 0.2s',
+                                    }, onMouseEnter: e => {
+                                        e.currentTarget.style.backgroundColor = "#a66300";
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                    }, onMouseLeave: e => {
+                                        e.currentTarget.style.backgroundColor = "#d17800";
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, children: [_jsx("span", { style: { fontWeight: 500 }, children: SDKUI_Localizator.Update }), _jsx("i", { className: "dx-icon-edit", style: { fontSize: '20px' } })] })), showCloseButton && (_jsxs("div", { onClick: closeTaskCallback, style: {
+                                        backgroundColor: "#d17800",
+                                        color: "#fff",
+                                        padding: "10px 16px",
+                                        borderRadius: "20px",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        cursor: "pointer",
+                                        fontWeight: 600,
+                                        width: "150px",
+                                        transition: 'background-color 0.3s, transform 0.2s',
+                                    }, onMouseEnter: e => {
+                                        e.currentTarget.style.backgroundColor = "#a66300";
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                    }, onMouseLeave: e => {
+                                        e.currentTarget.style.backgroundColor = "#d17800";
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, children: [_jsx("span", { style: { fontWeight: 500 }, children: SDKUI_Localizator.CloseTask }), _jsx("i", { className: "dx-icon-lock", style: { fontSize: '20px' } })] }))] })] }), _jsx(TaskFormResponseComment, { originalResponse: formDataOrig?.response, currentResponse: formData?.response, readonly: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TaskPdgOriginNavigator, { formMode: formMode, formData: formDataOrig, isMobile: isMobile, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback }) })] }) }));
 };
 export const TMChangeStateForm = (props) => {
     const { formData, formDataOrig, handleShowChangeStateForm, setFormData } = props;

package/lib/components/pages/TMPage.js

@@ -41,6 +41,8 @@ const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastR
         let itemsCount = gridInstance?.instance().getDataSource().items().length;
         if (itemsCount && itemsCount > 0) {
             gridInstance?.instance().selectRows(selectedItems?.map((item) => item.id) ?? [], false);
+            if (selectedItems && selectedItems.length > 0 && (selectedItems?.[0]).id)
+                gridInstance?.instance()?.navigateToRow((selectedItems?.[0]).id);
         }
     }, [selectedItems]);
     useEffect(() => {
@@ -52,6 +54,8 @@ const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastR
     useEffect(() => {
         if (lastRefreshTime) {
             loadDataAsync(id);
+            if (id)
+                gridInstance?.instance()?.navigateToRow(id);
         }
     }, [lastRefreshTime]);
     useEffect(() => {

package/lib/helper/Enum_Localizator.js

@@ -101,6 +101,11 @@ export function LocalizeJobTypes(value) {
                 case CultureIDs.It_IT: return value?.toString();
                 default: return "CustomsDrawerPlus";
             }
+        case JobTypes.CassettoDoganaleDistiller:
+            switch (cultureID) {
+                case CultureIDs.It_IT: return value?.toString();
+                default: return "CustomsDrawerDistiller";
+            }
         default: return value?.toString() ?? '';
     }
 }

package/lib/helper/SDKUI_Localizator.d.ts

@@ -37,6 +37,7 @@ export declare class SDKUI_Localizator {
     static get Anomalies(): "Anomalien" | "Anomalies" | "Anomalías" | "Anomalias" | "Anomalie";
     static get Answer(): "Antwort" | "Answer" | "Respuesta" | "Réponse" | "Resposta" | "Risposta";
     static get AnswerTooltip(): "Die Antwort kann nur bearbeitet werden, wenn der Aktivitätsstatus \"Abgeschlossen\", \"Ausstehend\" oder \"Verschoben\" ist." | "The answer can be edited only if the activity status is \"Completed\", \"Pending\", or \"Deferred\"." | "La respuesta solo se puede editar si el estado de la actividad es \"Completada\", \"Pendiente\" o \"Pospuesta\"." | "La réponse peut être modifiée uniquement si l'état de l’activité est \"Terminée\", \"En attente\" ou \"Reportée\"." | "A resposta só pode ser editada se o estado da atividade for \"Concluída\", \"Pendente\" ou \"Adiada\"." | "La risposta può essere modificata solo se lo stato dell’attività è \"Completata\", \"In attesa\" o \"Rinviata\".";
+    static get NoAnswerProvided(): "Keine Antwort" | "No answer" | "Sin respuesta" | "Aucune réponse" | "Nenhuma resposta" | "Nessuna risposta";
     static get Application(): "Anwendung" | "Application" | "Aplicación" | "Aplicação" | "Applicazione";
     static get Applied(): string;
     static get Apply(): "Anwenden" | "Apply" | "Aplicar" | "Applique" | "Applica";
@@ -634,6 +635,7 @@ export declare class SDKUI_Localizator {
     static get StartDateMustBeBeforeEndDate(): "Das Startdatum muss vor dem Enddatum liegen" | "The start date must be before the end date" | "La fecha de inicio debe ser anterior a la fecha de finalización" | "La date de début doit être antérieure à la date de fin" | "A data de início deve ser anterior à data de término" | "La data di inizio deve essere precedente alla data di fine";
     static get Statistics(): "Statistiken" | "Statistics" | "Estadística" | "Statistiques" | "Estatísticas" | "Statistiche";
     static get Status(): "Status" | "Estado" | "Statut" | "Stato";
+    static get StatusAndAnswer(): "Status und Antwort" | "Status and answer" | "Estado y respuesta" | "Statut et réponse" | "Estado e resposta" | "Stato e risposta";
     static get Subject(): "Betreff" | "Subject" | "Asunto" | "Objet" | "Assunto" | "Oggetto";
     static get Summary(): "Zusammenfassung" | "Summary" | "Resumen" | "Résumé" | "Resumo" | "Riepilogo";
     static get SwitchUser(): "Benutzer wechseln" | "Switch user" | "Cambiar usuario" | "Changer d'utilisateur" | "Mudar de usuário" | "Cambia utente";

package/lib/helper/SDKUI_Localizator.js

@@ -324,6 +324,16 @@ export class SDKUI_Localizator {
                 return "La risposta può essere modificata solo se lo stato dell’attività è \"Completata\", \"In attesa\" o \"Rinviata\".";
         }
     }
+    static get NoAnswerProvided() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Keine Antwort";
+            case CultureIDs.En_US: return "No answer";
+            case CultureIDs.Es_ES: return "Sin respuesta";
+            case CultureIDs.Fr_FR: return "Aucune réponse";
+            case CultureIDs.Pt_PT: return "Nenhuma resposta";
+            default: return "Nessuna risposta";
+        }
+    }
     static get Application() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Anwendung";
@@ -6312,6 +6322,16 @@ export class SDKUI_Localizator {
             default: return "Stato";
         }
     }
+    static get StatusAndAnswer() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Status und Antwort";
+            case CultureIDs.En_US: return "Status and answer";
+            case CultureIDs.Es_ES: return "Estado y respuesta";
+            case CultureIDs.Fr_FR: return "Statut et réponse";
+            case CultureIDs.Pt_PT: return "Estado e resposta";
+            default: return "Stato e risposta";
+        }
+    }
     static get Subject() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Betreff";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.20.0-dev2.49",
+    "version": "6.20.0-dev2.50",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",