@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0-test2

package/lib/components/features/search/TMTreeSelector.js

@@ -201,70 +201,70 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
-const StyledTreeListWrapper = styled.div `
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .dx-treelist,
-    .dx-treelist-rowsview,
-    .dx-scrollable,
-    .dx-scrollable-wrapper,
-    .dx-scrollable-container,
-    .dx-scrollable-content {
-        height: 100% !important;
-        min-height: 0 !important;
-        max-height: 100% !important;
-        box-sizing: border-box;
-    }
-
-    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
-        /* Mostra solo quando serve */
-        opacity: 1 !important;
-    }
-
-    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
-        display: none !important;
-    }
-
-	.dx-treelist-container>.dx-treelist-headers,
-	.dx-treelist-container>.dx-treelist-rowsview {
-		background-color: transparent;
-	}
-
-	.dx-treelist-rowsview .dx-treelist-empty-space {
-		position: relative;
-		top: 4px;
-		display: inline-block;
-		width: 16px;
-	}
-
-	.dx-row > td {
-		padding: 10px 4px;
-		font-size: 1rem;
-        white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.dx-selection td {
-		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
-	}
-
-    .dx-data-row:hover {
-        cursor: pointer;
-        background: linear-gradient(
-            270deg,
-            rgba(70, 181, 162, 0.15) 16%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(54, 129, 173, 0.15) 54%,
-            rgba(51, 104, 165, 0.15) 72%,
-            rgba(47, 84, 157, 0.15) 88%,
-            rgba(48, 79, 153, 0.15) 100%
-        );
-    }
+const StyledTreeListWrapper = styled.div `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dx-treelist,
+    .dx-treelist-rowsview,
+    .dx-scrollable,
+    .dx-scrollable-wrapper,
+    .dx-scrollable-container,
+    .dx-scrollable-content {
+        height: 100% !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
+        /* Mostra solo quando serve */
+        opacity: 1 !important;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
+        display: none !important;
+    }
+
+	.dx-treelist-container>.dx-treelist-headers,
+	.dx-treelist-container>.dx-treelist-rowsview {
+		background-color: transparent;
+	}
+
+	.dx-treelist-rowsview .dx-treelist-empty-space {
+		position: relative;
+		top: 4px;
+		display: inline-block;
+		width: 16px;
+	}
+
+	.dx-row > td {
+		padding: 10px 4px;
+		font-size: 1rem;
+        white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dx-selection td {
+		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
+	}
+
+    .dx-data-row:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
 `;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { ObjectClasses, TaskDescriptor, Priorities, PdGs, SDK_Globals, UserListCacheService, SDK_Localizator, Task_States } from '@topconsultnpm/sdk-ts';
 import { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValues, gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
-import ScrollView from 'devextreme-react/cjs/scroll-view';
+import ScrollView from 'devextreme-react/scroll-view';
 import TMLayoutContainer from '../../base/TMLayout';
 import { FormModes } from '../../../ts';
 import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
@@ -21,42 +21,42 @@ import TMDcmtForm from '../documents/TMDcmtForm';
 import styled from 'styled-components';
 import { TMColors } from '../../../utils/theme';
 import { renderContextBlock } from './TMTasksUtilsView';
-const ResponseCommentWrapper = styled.div `
-  position: relative;
-  width: 100%;
+const ResponseCommentWrapper = styled.div `
+  position: relative;
+  width: 100%;
 `;
-const ResponseCommentLabel = styled.label `
-  position: absolute;
-  top: -8px; 
-  left: 12px;
-  background-color: white; 
-  padding: 0 4px;
-  font-size: 0.9rem;
-  color: rgb(80,80,80);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+const ResponseCommentLabel = styled.label `
+  position: absolute;
+  top: -8px; 
+  left: 12px;
+  background-color: white; 
+  padding: 0 4px;
+  font-size: 0.9rem;
+  color: rgb(80,80,80);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 `;
 const ResponseCommentTextArea = styled.textarea.attrs({
     maxLength: 500,
-}) `
-    width: 100%;
-    height: 100px;
-    border: 1px solid ${props => props.$isValid ? (props.$isModifiedWhen ? "#E29000" : '#b4b4b4') : TMColors.error};
-    border-radius: 10px;
-    padding: 10px;
-    resize: none;
-    cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
-    &:focus {
-        outline: none;
-        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
-    }
+}) `
+    width: 100%;
+    height: 100px;
+    border: 1px solid ${props => props.$isValid ? (props.$isModifiedWhen ? "#E29000" : '#b4b4b4') : TMColors.error};
+    border-radius: 10px;
+    padding: 10px;
+    resize: none;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+    &:focus {
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+    }
 `;
-const ResponseCommentCharacterCounter = styled.div `
-    text-align: right;
-    font-size: 0.8rem;
-    color: #6c757d;
-    margin-top: 4px;
+const ResponseCommentCharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 4px;
 `;
 const TMTaskForm = (props) => {
     // Custom hook to manage workflow approval data
@@ -81,6 +81,11 @@ const TMTaskForm = (props) => {
         else if (taskContext?.workingGroup) {
             task.pdG = PdGs.WG;
             task.iD1 = taskContext.workingGroup.id;
+            if (currentTask) {
+                task.name = currentTask.name;
+                task.toID = 0;
+                task.startTime = new Date();
+            }
         }
         else if (taskContext?.dossier) {
             task.pdG = PdGs.CF;
@@ -158,7 +163,7 @@ const TMTaskForm = (props) => {
             newTaskDescriptor.isNew = 0;
             editTaskCallback(newTaskDescriptor);
         }
-        else if (formDataOrig && formMode === FormModes.Create && taskContext?.dossier && currentTask) {
+        else if (formDataOrig && formMode === FormModes.Create && taskContext?.dossier && taskContext?.dossier?.origin === 'DossierAction' && currentTask) {
             setFieldsReadOnly({
                 name: true,
                 description: false,
@@ -357,6 +362,7 @@ const TMTaskForm = (props) => {
                                                 }, children: _jsx(TMTooltip, { content: formData.pdG !== PdGs.None ? gotoPDGExtendedLabel(true, formData.pdG, formData.iD1Name) : '', children: _jsxs("span", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
                                                             display: 'inline-flex',
                                                             alignItems: 'center',
+                                                            lineHeight: 1,
                                                             padding: '6px 10px',
                                                             borderRadius: 8,
                                                             backgroundColor: formData.pdG !== PdGs.None ? '#f5f5f7' : 'transparent',
@@ -371,13 +377,13 @@ const TMTaskForm = (props) => {
                                                         }, onMouseLeave: e => {
                                                             if (formData.pdG !== PdGs.None)
                                                                 e.currentTarget.style.backgroundColor = '#f5f5f7';
-                                                        }, children: [getPdgsIconMap().get(formData.pdG), _jsx("span", { children: getOriginLabel(formData.pdG, formData.iD1Name) })] }) }) }) }) })), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
-                                            _jsx("div", { id: "assignedToAnotherUserField", style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMUserChooser, { dataSource: usersList ?? undefined, allowMultipleSelection: false, label: SDKUI_Localizator.AssignedTo, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo), onValueChanged: (newValue) => {
+                                                        }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: getPdgsIconMap().get(formData.pdG) }), _jsx("span", { children: getOriginLabel(formData.pdG, formData.iD1Name) })] }) }) }) }) })), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
+                                            _jsx("div", { id: "assignedToAnotherUserField", style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMUserChooser, { dataSource: usersList ?? undefined, allowShowAllUsers: !!taskContext?.dossier, allowMultipleSelection: false, label: SDKUI_Localizator.AssignedTo_Female, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo_Female), onValueChanged: (newValue) => {
                                                         if (newValue === undefined)
                                                             return;
                                                         setFormData({ ...formData ?? {}, toID: newValue[0] });
                                                     } }) })
-                                            : formMode === FormModes.Update && _jsxs(_Fragment, { children: [areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) }), areDifferentIDs(formDataOrig?.toID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo, value: formData?.toName ?? '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Status, value: formData?.state, dataSource: getStatusLocalizatorValues(), isModifiedWhen: formData?.state !== formDataOrig?.state, onValueChanged: onStatusValueChange, readOnly: fieldsReadOnly.status }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: !fieldsReadOnly.priority ? _jsx(TMDropDown, { label: SDKUI_Localizator.Priority, value: formData?.priority, dataSource: getPriorityLocalizatorValues(), isModifiedWhen: formData?.priority !== formDataOrig?.priority, onValueChanged: onPriorityValueChange })
+                                            : formMode === FormModes.Update && _jsxs(_Fragment, { children: [areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) }), areDifferentIDs(formDataOrig?.toID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo_Female, value: formData?.toName ?? '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Status, value: formData?.state, dataSource: getStatusLocalizatorValues(), isModifiedWhen: formData?.state !== formDataOrig?.state, onValueChanged: onStatusValueChange, readOnly: fieldsReadOnly.status }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: !fieldsReadOnly.priority ? _jsx(TMDropDown, { label: SDKUI_Localizator.Priority, value: formData?.priority, dataSource: getPriorityLocalizatorValues(), isModifiedWhen: formData?.priority !== formDataOrig?.priority, onValueChanged: onPriorityValueChange })
                                                         : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, 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: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, 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 }) }) }), (formData?.state && [Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state) ||
                                         (formData?.response ?? "") !== "") && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: formData?.response ?? '', onChange: onAnswerChange, "$isModifiedWhen": formData?.response !== formDataOrig?.response, disabled: (formData?.response ?? "") !== "" &&
                                                             (formData?.state && ![Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state)) }), _jsxs(ResponseCommentLabel, { htmlFor: "responseId", children: [SDKUI_Localizator.Answer, _jsxs(TMTooltip, { content: SDKUI_Localizator.AnswerTooltip, children: [" ", _jsx("i", { className: 'dx-icon-info' }), " "] })] }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (formData?.response ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&

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

@@ -1,12 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from "react";
 import ArrayStore from "devextreme/data/array_store";
-import Scheduler from "devextreme-react/cjs/scheduler";
+import Scheduler from "devextreme-react/scheduler";
 import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons } from "./TMTasksUtilsView";
 import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
 import { checkIfNew, convertToSchedulerAppointments, findTasksBySearch, formatDate, getPriorityColor, getStatusLocalizatorValue } from "./TMTasksUtils";
-import ScrollView from "devextreme-react/cjs/scroll-view";
-import LoadIndicator from "devextreme-react/cjs/load-indicator";
+import ScrollView from "devextreme-react/scroll-view";
+import LoadIndicator from "devextreme-react/load-indicator";
 import { FormModes } from "../../../ts";
 import { SDKUI_Localizator } from "../../../helper";
 import TMCustomSearchBar from "../../../helper/TMCustomSearchBar";
@@ -55,7 +55,7 @@ const TMTasksAgenda = React.memo((props) => {
         let bgColor = 'transparent';
         if (priority)
             bgColor = getPriorityColor(priority);
-        return _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end', backgroundColor: bgColor }, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "both", useNative: true, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', width: '100%', fontWeight: isNew ? 'bold' : 'normal' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [showId && _jsxs("span", { children: [highlightTaskText(currentTask.id.toString(), searchText, currentTask.id), " - "] }), renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }), "\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: highlightTaskText(currentTask.name ?? '', searchText, currentTask.id) })] }), _jsxs("div", { children: [startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime), " - \u00A0"] })), endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] }))] })] }), fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] }) }) });
+        return _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end', backgroundColor: bgColor }, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "both", useNative: true, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', width: '100%', fontWeight: isNew ? 'bold' : 'normal' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [showId && _jsxs("span", { children: [highlightTaskText(currentTask.id.toString(), searchText, currentTask.id), " - "] }), renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }), "\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: highlightTaskText(currentTask.name ?? '', searchText, currentTask.id) })] }), _jsxs("div", { children: [startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime), " - \u00A0"] })), endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] }))] })] }), fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo_Female, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] }) }) });
     }, [visualizedTasks, searchText]);
     // handle appointment click handler
     const handleAppointmentClick = useCallback((e) => {

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

@@ -5,7 +5,7 @@ import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
 import Scheduler, { Resource } from 'devextreme-react/scheduler';
 import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons, taskStateIconMap, TMActionCalendar } from './TMTasksUtilsView';
 import { checkIfNew, convertToSchedulerAppointments, findTasksBySearch, formatDate, getPriorityColor, getPriorityLocalizatorValue, getStatusLocalizatorValue, prioritiesResourceData } from './TMTasksUtils';
-import LoadIndicator from 'devextreme-react/cjs/load-indicator';
+import LoadIndicator from 'devextreme-react/load-indicator';
 import { FormModes } from '../../../ts';
 import { SDKUI_Localizator } from '../../../helper';
 import TMTooltip from '../../base/TMTooltip';
@@ -144,7 +144,7 @@ const TMTasksCalendar = (props) => {
         const ID1Name = currentTask.iD1Name || '';
         const isNew = checkIfNew(currentTask.fromID, currentTask.isNew);
         const numberOfDays = calculateNumberOfDays(startTime, endTime);
-        return _jsxs("div", { className: "dx-tooltip-appointment-item", onClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: { backgroundColor: getPriorityColor(currentTask.priority ?? Priorities.None) }, children: [_jsxs("div", { className: "dx-tooltip-appointment-item-content", style: { width: '70%', cursor: 'auto' }, children: [_jsx("div", { style: { display: "flex" }, children: renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [" ", showId && _jsxs("span", { children: [highlightTaskText(appointmentData.id.toString(), searchText, appointmentData.id), " - "] }), " ", highlightTaskText(appointmentData.text ?? '', searchText, currentTask.id)] }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime)] })) }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] })) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [SDKUI_Localizator.Priority, ": ", highlightTaskText(priority, searchText, currentTask.id)] }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] })] }), _jsx(TMActionCalendar, { currentTask: currentTask, openTaskForm: openTaskForm, onDeleteCallback: onDeleteCallback })] });
+        return _jsxs("div", { className: "dx-tooltip-appointment-item", onClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: { backgroundColor: getPriorityColor(currentTask.priority ?? Priorities.None) }, children: [_jsxs("div", { className: "dx-tooltip-appointment-item-content", style: { width: '70%', cursor: 'auto' }, children: [_jsx("div", { style: { display: "flex" }, children: renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [" ", showId && _jsxs("span", { children: [highlightTaskText(appointmentData.id.toString(), searchText, appointmentData.id), " - "] }), " ", highlightTaskText(appointmentData.text ?? '', searchText, currentTask.id)] }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime)] })) }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] })) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [SDKUI_Localizator.Priority, ": ", highlightTaskText(priority, searchText, currentTask.id)] }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo_Female, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] })] }), _jsx(TMActionCalendar, { currentTask: currentTask, openTaskForm: openTaskForm, onDeleteCallback: onDeleteCallback })] });
     };
     const onCurrentCalendarDateChange = (value) => {
         // Exit early if it's not a valid Date

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { treeFilterDataSource } from './TMTasksUtilsView';
 import { FilterCategoryId, TaskView } from './TMTasksUtils';
 import { useEffect, useRef, useState } from 'react';
-import ScrollView from 'devextreme-react/cjs/scroll-view';
+import ScrollView from 'devextreme-react/scroll-view';
 import TMTooltip from '../../base/TMTooltip';
 import { SDKUI_Localizator } from '../../../helper';
 import TMDropDown from '../../editors/TMDropDown';

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

@@ -1,5 +1,5 @@
 import { Appointment } from 'devextreme/ui/scheduler';
-import { ContextMenuTypes } from 'devextreme-react/cjs/context-menu';
+import { ContextMenuTypes } from 'devextreme-react/context-menu';
 import { TaskDescriptor, Task_States, PdGs, Priorities, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { FormModes, TaskContext } from '../../../ts';
 import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
@@ -61,6 +61,7 @@ export declare const getTaskAssignedToMe: (tasks: Array<TaskDescriptor>) => Arra
 export declare const getTaskNotPersonalAssignedToMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getTaskPersonalAssignedToMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getTaskAssignedByMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
+export declare const getTaskNotCompletedAssignedByMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getHeaderStatusFilterConfig: () => {
     enabled: boolean;
     dataSource: {

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

@@ -210,6 +210,21 @@ export const getTaskAssignedByMe = (tasks) => {
     const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
     return tasks.filter((task) => task.toID !== undefined && task.toID !== userID);
 };
+export const getTaskNotCompletedAssignedByMe = (tasks) => {
+    const userID = SDK_Globals.tmSession?.SessionDescr?.userID;
+    return tasks
+        .filter((task) => task.toID !== undefined &&
+        task.toID !== userID &&
+        task.state !== Task_States.Completed).sort((a, b) => {
+        if (!a.endTime && !b.endTime)
+            return 0;
+        if (!a.endTime)
+            return 1;
+        if (!b.endTime)
+            return -1;
+        return a.endTime.getTime() - b.endTime.getTime();
+    });
+};
 export const getHeaderStatusFilterConfig = () => ({
     enabled: true,
     dataSource: getStatusLocalizatorValues().map(item => ({
@@ -298,7 +313,7 @@ export const taskValidatorAsync = async (taskDescriptor) => {
     }
     // Validate toID
     if (!taskDescriptor.toID || taskDescriptor.toID <= 0)
-        vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo, `${SDK_Localizator.RequiredField}`));
+        vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.AssignedTo_Female, `${SDK_Localizator.RequiredField}`));
     // Validate that startTime is less than or equal to endTime
     if (taskDescriptor.startTime && taskDescriptor.endTime) {
         if (taskDescriptor.startTime > taskDescriptor.endTime) {
@@ -318,7 +333,7 @@ const getPDGExtended = (pdg) => {
         case PdGs.WG:
             return SDKUI_Localizator.WorkGroup;
         case PdGs.CF:
-            return SDKUI_Localizator.Practice;
+            return SDKUI_Localizator.Dossier;
         case PdGs.DT:
             return SDKUI_Localizator.Document;
         case PdGs.WF:
@@ -426,7 +441,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
             operationType: 'multiRow',
             disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
             items: [
-                { icon: 'isblank', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
+                { icon: 'product', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
                 { icon: 'refresh', text: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.InProgress) },
                 { icon: 'check', text: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Completed) },
                 { icon: 'taskstop', text: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Waiting) },

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

@@ -7,8 +7,8 @@ import { FormModes } from "../../../ts";
 import TMTooltip from "../../base/TMTooltip";
 const taskStateIconClassMap = () => {
     return new Map([
-        [Task_States.None, "dx-icon-isblank"],
-        [Task_States.NotStarted, "dx-icon-isblank"],
+        [Task_States.None, "dx-icon-product"],
+        [Task_States.NotStarted, "dx-icon-product"],
         [Task_States.InProgress, "dx-icon-refresh"],
         [Task_States.Completed, "dx-icon-check"],
         [Task_States.Waiting, "dx-icon-taskstop"],
@@ -35,7 +35,28 @@ export const calculateNumberOfDays = (startTime, endTime) => {
 };
 export const renderTaskIcons = (taskData) => {
     const { stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays } = taskData;
-    return (_jsxs(_Fragment, { children: [_jsxs(TMTooltip, { content: stateTooltipLabel, children: [" ", _jsx("div", { children: taskStateIconMap().get(stateLabel) })] }), _jsxs(TMTooltip, { content: gotoPDGExtendedLabel(false, pdg ?? PdGs.None, ID1Name), children: [" ", _jsx("div", { children: getPdgsIconMap().get(pdg) })] }), (stateLabel !== Task_States.Completed && endTime && taskIsExpiringSoon(endTime, remTime)) && _jsx(TMTooltip, { content: SDKUI_Localizator.Expiring, children: _jsx("i", { style: { fontSize: "24px" }, className: "dx-icon-warning" }) }), numberOfDays > 1 && _jsx("i", { title: SDKUI_Localizator.ActivityOverMultipleDays.replaceParams(numberOfDays), style: { fontSize: 20 }, className: "dx-icon-unselectall" }), isNew && _jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivity, children: _jsx("i", { style: { fontSize: "24px" }, className: "dx-icon-bell" }) })] }));
+    return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [_jsx(TMTooltip, { content: stateTooltipLabel, children: _jsx("div", { className: "task-icon", children: taskStateIconMap().get(stateLabel) }) }), (stateLabel !== Task_States.Completed && endTime && taskIsExpiringSoon(endTime, remTime)) &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.Expiring, children: _jsx("i", { className: "dx-icon-warning task-icon" }) }), _jsx(TMTooltip, { content: gotoPDGExtendedLabel(false, pdg ?? PdGs.None, ID1Name), children: _jsx("div", { className: "task-icon", style: {
+                        marginLeft: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                        marginRight: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                    }, children: getPdgsIconMap().get(pdg) }) }), numberOfDays > 1 &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.ActivityOverMultipleDays.replaceParams(numberOfDays), children: _jsx("div", { className: "task-icon", style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            minWidth: "20px",
+                            height: "20px",
+                            padding: "0 4px",
+                            borderRadius: "12px",
+                            border: "1px solid #0078d4",
+                            backgroundColor: "rgba(0, 120, 212, 0.08)",
+                            color: "#0078d4",
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            lineHeight: 1,
+                            boxSizing: "border-box"
+                        }, children: numberOfDays > 99 ? "99+" : numberOfDays }) }), isNew &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivity, children: _jsx("i", { className: "dx-icon-bell task-icon" }) })] }));
 };
 export const TMActionCalendar = (props) => {
     const { currentTask, openTaskForm, onDeleteCallback } = props;
@@ -72,7 +93,8 @@ export const priorityLegend = () => _jsx("div", { style: { display: 'flex', alig
 export const highlightTaskText = (text, search, taskId) => {
     if (!search)
         return text;
-    const regex = new RegExp(`(${search})`, 'gi');
+    const escapedSearchText = search.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedSearchText})`, 'gi');
     const parts = text.split(regex);
     return parts.map((part, index) => part.toLowerCase() === search.toLowerCase() ? (_jsx("span", { style: { color: "#fff", backgroundColor: '#0f6cbd' }, children: part }, taskId + "-" + index)) : (part));
 };

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
+import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, LIGTH_CYAN, LIGTH_RED_ORGANGE, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
-import ContextMenu from 'devextreme-react/cjs/context-menu';
+import ContextMenu from 'devextreme-react/context-menu';
 import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
@@ -362,11 +362,17 @@ const TMTasksView = (props) => {
         const isCompleted = state === Task_States.Completed;
         const isExpired = endTime && endTime < new Date();
         const isNewTask = checkIfNew(fromID, isNew);
-        return _jsx("div", { style: {
+        const priorityColor = cellData.value === Priorities.High ? LIGTH_RED_ORGANGE : LIGTH_CYAN;
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                borderLeft: `4px solid ${priorityColor}`,
+                paddingLeft: '8px',
                 color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
                 textDecoration: isCompleted ? 'line-through' : 'none',
-                fontWeight: isNewTask ? 'bold' : 'normal'
-            }, children: priorityLabel });
+                fontWeight: isNewTask ? 'bold' : 'normal',
+                height: '100%'
+            }, children: priorityLabel }));
     }, []);
     const cellDatetimeRender = useCallback((cellData) => {
         const data = cellData.data;
@@ -503,7 +509,7 @@ const TMTasksView = (props) => {
             },
             {
                 dataField: "toName",
-                caption: SDKUI_Localizator.AssignedTo,
+                caption: SDKUI_Localizator.AssignedTo_Female,
                 dataType: 'string',
                 cellRender: cellToRender,
                 headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),

package/lib/components/features/wg/TMWGsCopyMoveForm.js

@@ -419,15 +419,15 @@ const TMWGsCopyMoveForm = (props) => {
                             }, children: SDKUI_Localizator.Cancel })] })] }) });
 };
 export default TMWGsCopyMoveForm;
-const StepSpan = styled.span `
-  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
-  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
-  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
-  transition: color 0.3s ease;
-  &:hover {
-    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
-    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
-  }
+const StepSpan = styled.span `
+  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
+  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
+  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
+  transition: color 0.3s ease;
+  &:hover {
+    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
+    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
+  }
 `;
 export const TMStepNavigator = (props) => {
     const { steps, currentStep, onStepChange } = props;