@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,439 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ResultTypes, SDK_Globals, WorkingGroupCacheService, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { TreeView } from 'devextreme-react';
+import styled from 'styled-components';
+import { buildFolderHierarchy, findFileItems, setFolderTreeViewItems } from '../../base/TMFileManagerUtils';
+import TMSpinner from '../../base/TMSpinner';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import { useDeviceType } from '../../base/TMDeviceProvider';
+import { SDKUI_Localizator, getExceptionMessage, Globalization, IconUserGroup, IconFolder, calcResponsiveSizes } from '../../../helper';
+import { useSaveForm, SaveFormOptions } from '../../../hooks/useForm';
+import { FormModes } from '../../../ts';
+import { TMColors } from '../../../utils/theme';
+import TMDataGrid from '../../base/TMDataGrid';
+import TMTooltip from '../../base/TMTooltip';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import { TMResultManager } from '../../forms/TMResultDialog';
+import TMSaveForm from '../../forms/TMSaveForm';
+// Returns a formatted name and optional description based on document type and item DID.
+export const getDocumentDisplayInfo = (descriptor, item) => {
+    if (!descriptor || !descriptor.nameLoc || !item?.DID) {
+        return { name: '', description: '' };
+    }
+    const maxTotalLength = 50;
+    const didPart = ` (DID ${item.DID})`;
+    const maxNameLocLength = maxTotalLength - didPart.length;
+    let trimmedName = descriptor.nameLoc;
+    if (descriptor.nameLoc.length > maxNameLocLength) {
+        trimmedName = descriptor.nameLoc.slice(0, maxNameLocLength);
+    }
+    const name = `${trimmedName}${didPart}`;
+    const description = descriptor.nameLoc.length > maxNameLocLength
+        ? `${descriptor.nameLoc}${didPart}`
+        : '';
+    return { name, description };
+};
+let abortController = new AbortController();
+const TMWGsCopyMoveForm = (props) => {
+    const { mode, workingGroups, context, folder, onClose, focusedWorkingGroupId = undefined, fetchTreeFileSystemForWorkingGroup, fetchArchivedDocumentsForWorkingGroup } = props;
+    // Destructure context to get the current working group descriptor or document type descriptor based on the engine type
+    const currentWorkingGroupDescriptor = context.engine === 'WorkingGroupEngine' ? (context.object ?? undefined) : undefined;
+    const currentDcmtTypeDescriptor = context.engine === 'SearchEngine' ? (context.object ?? undefined) : undefined;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // Stepper state: manages the current step in a multi-step UI
+    const [currentStep, setCurrentStep] = useState(0);
+    // State to store the list of working groups
+    const [wgs, setWgs] = useState([]);
+    // State to store the currently selected working group, or undefined if none is selected
+    const [selectedWg, setSelectedWg] = useState(undefined);
+    // State hook to store the currently focused row key, initially set to undefined
+    const [focusedRowKey, setFocusedRowKey] = useState(focusedWorkingGroupId ?? undefined);
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    // State to manage the file system hierarchy
+    const [treeFs, setTreeFs] = useState(undefined);
+    // State to store transformed directory data for file manager
+    const [treeViewData, setTreeViewData] = useState([]);
+    // State to manage the selected file
+    const [selectedFolder, setSelectedFolder] = useState(undefined);
+    // State variable to control the visibility of the wait panel
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    // State variable to store the title of the wait panel
+    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    // State variable to control the visibility of the primary section of the wait panel
+    const [showPrimary, setShowPrimary] = useState(false);
+    // State variable to store the primary text of the wait panel
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    // State variable to track the current value of the primary progress indicator in the wait panel
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    // State variable to define the maximum value for the primary progress indicator in the wait panel
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    // State to manage the current working group descriptor, initially set to the one from context
+    const steps = useMemo(() => {
+        return mode === 'copyToWgArchivedDoc'
+            ? [
+                { id: 0, title: SDKUI_Localizator.ChooseGroup, subtitle: selectedWg ? selectedWg.name : undefined }
+            ]
+            : [
+                { id: 0, title: SDKUI_Localizator.ChooseGroup, subtitle: selectedWg ? selectedWg.name : undefined },
+                { id: 1, title: SDKUI_Localizator.ChooseFolder, subtitle: selectedFolder ? selectedFolder.name : undefined }
+            ];
+    }, [mode, selectedWg, selectedFolder]);
+    //  State to manage the current step in the stepper, initially set to 0
+    const adjustedCurrentStep = useMemo(() => {
+        return currentStep >= steps.length ? 0 : currentStep;
+    }, [currentStep, steps.length]);
+    // Disable if currentWorkingGroup or its id, selectedWg, or selectedFolder are undefined; recomputed only when dependencies change
+    const isDisabled = useMemo(() => {
+        if (context.engine === 'WorkingGroupEngine') {
+            return !currentWorkingGroupDescriptor?.id || !selectedWg || !selectedFolder;
+        }
+        if (context.engine === 'SearchEngine') {
+            if (mode === 'copyToWgArchivedDoc') {
+                return !selectedWg;
+            }
+            return !selectedWg || !selectedFolder;
+        }
+        return true;
+    }, [context, currentWorkingGroupDescriptor, selectedWg, selectedFolder]);
+    // Sort working groups and set focused row to current and select current working group and go to step 
+    useEffect(() => {
+        const loadWorkingGroups = async () => {
+            let groupsToUse = workingGroups;
+            if (!groupsToUse) {
+                try {
+                    TMSpinner.show({ description: SDKUI_Localizator.LoadingWorkGroups });
+                    // Clear cache and fetch working groups
+                    WorkingGroupCacheService.RemoveAll();
+                    const fetchedGroups = await WorkingGroupCacheService.GetAllAsync();
+                    groupsToUse = fetchedGroups;
+                }
+                catch (error) {
+                    TMExceptionBoxManager.show({ exception: error });
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            }
+            if (groupsToUse) {
+                const sortedGroups = [...groupsToUse].sort((a, b) => {
+                    if (!a.name && !b.name)
+                        return 0;
+                    if (!a.name)
+                        return 1;
+                    if (!b.name)
+                        return -1;
+                    return a.name.localeCompare(b.name);
+                });
+                setWgs(sortedGroups);
+                if (currentWorkingGroupDescriptor) {
+                    setFocusedRowKey(currentWorkingGroupDescriptor.id);
+                    setSelectedWg(currentWorkingGroupDescriptor);
+                    setCurrentStep(1);
+                }
+            }
+        };
+        loadWorkingGroups();
+    }, [workingGroups, currentWorkingGroupDescriptor]);
+    // Fetch the file system tree for the selected working group when it or the list of WGs changes
+    useEffect(() => {
+        const fetchWgTree = async () => {
+            if (!selectedWg || !selectedWg.id || mode === 'copyToWgArchivedDoc')
+                return;
+            try {
+                const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                const wgTreeFileSystem = await workingGroupEngine.DraftsGetTreeAsync(selectedWg.id);
+                const { folderMap } = buildFolderHierarchy(wgTreeFileSystem, undefined, undefined, undefined);
+                const rootFolder = { id: -1, name: SDKUI_Localizator.Drafts, isDirectory: true, items: Array.from(folderMap.values()), };
+                const rootTreeViewItem = { id: -1, text: rootFolder.name, subFileFolderCount: rootFolder.items.filter(item => !item.isDirectory).length, expanded: true, items: setFolderTreeViewItems(rootFolder.items), };
+                setTreeFs(rootFolder);
+                setTreeViewData([rootTreeViewItem]);
+            }
+            catch (error) {
+                TMExceptionBoxManager.show({ exception: error });
+            }
+        };
+        if (selectedWg && wgs.length) {
+            fetchWgTree();
+        }
+    }, [selectedWg, wgs]);
+    // When the current step resets to the first step (index 0), clear the selected folder by setting it to undefined
+    useEffect(() => {
+        if (currentStep === 0) {
+            setSelectedFolder(undefined);
+        }
+    }, [currentStep]);
+    // Single selection mode for data grid
+    const selection = useMemo(() => {
+        return { mode: 'single' };
+    }, []);
+    // Handles focus change in the data grid
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowKeys(selectedKeys);
+    }, []);
+    const onRowClick = useCallback((e) => {
+        if (e.data && mode === 'copyToWgArchivedDoc') {
+            setSelectedWg(e.data);
+        }
+    }, [mode]);
+    // Handle selected folder
+    const handleSelectedFolder = (folderItem) => {
+        setSelectedFolder(folderItem);
+    };
+    // Function to handle item click event in the TreeView
+    const handleTreeViewItemClick = (e) => {
+        if (!e || !treeFs)
+            return;
+        const clickedItemId = e.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        handleSelectedFolder(item);
+    };
+    const validator = async () => {
+        let vil = [];
+        return vil;
+    };
+    // Returns true if one row and folder are selected and either differs from the current group or folder
+    const isLocalSelectionModified = () => {
+        // Ensure a single row is selected and a folder is selected
+        if (currentWorkingGroupDescriptor !== undefined && selectedWg !== undefined && folder !== undefined && selectedFolder !== undefined && currentStep === 1) {
+            // Check if the selected row and folder differ from the current state
+            const isGroupChanged = selectedWg.id !== currentWorkingGroupDescriptor.id;
+            const isFolderChanged = selectedFolder.id !== folder.id;
+            return isGroupChanged || isFolderChanged;
+        }
+        // Default to unmodified
+        return false;
+    };
+    const { validationItems, exception } = useSaveForm(FormModes.Update, 0, new SaveFormOptions(), validator);
+    const getTitle = () => {
+        if (context.engine === 'WorkingGroupEngine') {
+            return (mode === 'copy' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move) + (context.selectedDrafts.length === 1
+                ? ': ' + context.selectedDrafts[0].name
+                : ' (' + context.selectedDrafts.length + ')');
+        }
+        else if (context.engine === 'SearchEngine' && currentDcmtTypeDescriptor) {
+            return SDKUI_Localizator.Copy + (context.selectedDrafts.length === 1
+                ? ': ' + getDocumentDisplayInfo(currentDcmtTypeDescriptor, context.selectedDrafts[0]).name
+                : ' (' + context.selectedDrafts.length + ')');
+        }
+        return '-';
+    };
+    const onSaveAsync = async (currentWg) => {
+        if (isDisabled)
+            return;
+        try {
+            const targetWorkingGroup = currentWg ?? selectedWg;
+            const isWgFolderRequired = mode !== 'copyToWgArchivedDoc';
+            const missingWgOrFolder = isWgFolderRequired ? (!targetWorkingGroup || !selectedFolder) : !targetWorkingGroup;
+            if (missingWgOrFolder) {
+                return Promise.resolve();
+            }
+            setWaitPanelTitle(mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move);
+            setShowWaitPanel(true);
+            setShowPrimary(true);
+            abortController = new AbortController();
+            let result = [];
+            const totalDrafts = context.selectedDrafts.length;
+            setWaitPanelMaxValuePrimary(totalDrafts);
+            const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+            const selectedFolderId = selectedFolder?.id === -1 ? 0 : selectedFolder?.id ?? 0;
+            const isWgEngine = context.engine === 'WorkingGroupEngine';
+            const isSearchEngine = context.engine === 'SearchEngine';
+            for (let i = 0; i < totalDrafts; i++) {
+                if (abortController.signal.aborted) {
+                    result.push({
+                        rowIndex: i + 1,
+                        id1: i + 1,
+                        id2: i + 1,
+                        resultType: ResultTypes.WARNING,
+                        description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i + 1)
+                    });
+                    break;
+                }
+                setWaitPanelValuePrimary(i + 1);
+                setWaitPanelTextPrimary(`${i + 1}/${totalDrafts}`);
+                const item = context.selectedDrafts[i];
+                try {
+                    if (isWgEngine && targetWorkingGroup && targetWorkingGroup.id && currentWorkingGroupDescriptor && currentWorkingGroupDescriptor.id && selectedFolder && item.did) {
+                        const draft = item;
+                        const did = draft.did ?? 0;
+                        if (mode === 'copy') {
+                            await workingGroupEngine.DraftsCopyAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                            if (fetchTreeFileSystemForWorkingGroup) {
+                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                            }
+                        }
+                        else if (mode === 'move') {
+                            await workingGroupEngine.DraftsMoveAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                            if (fetchTreeFileSystemForWorkingGroup) {
+                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                                await fetchTreeFileSystemForWorkingGroup(currentWorkingGroupDescriptor.id);
+                            }
+                        }
+                    }
+                    else if (isSearchEngine) {
+                        if (mode === 'copyToWgDraft' && targetWorkingGroup && targetWorkingGroup.id && selectedFolder && currentDcmtTypeDescriptor) {
+                            const documentDisplayInfo = getDocumentDisplayInfo(currentDcmtTypeDescriptor, item);
+                            await workingGroupEngine.DraftsAddByIDAsync(targetWorkingGroup.id, selectedFolderId, documentDisplayInfo.name, documentDisplayInfo.description, item.TID, item.DID);
+                            if (fetchTreeFileSystemForWorkingGroup)
+                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                        }
+                        else if (mode === 'copyToWgArchivedDoc' && targetWorkingGroup && targetWorkingGroup.id) {
+                            await workingGroupEngine.DcmtsAddOrRemoveAsync(targetWorkingGroup.id, item.TID, item.DID, false);
+                            if (fetchArchivedDocumentsForWorkingGroup)
+                                await fetchArchivedDocumentsForWorkingGroup(targetWorkingGroup.id);
+                        }
+                    }
+                    result.push({
+                        rowIndex: i + 1,
+                        id1: item.DID ?? i + 1,
+                        id2: item.TID ?? i + 1,
+                        description: SDKUI_Localizator.UpdateCompletedSuccessfully,
+                        resultType: ResultTypes.SUCCESS
+                    });
+                }
+                catch (err) {
+                    result.push({
+                        rowIndex: i + 1,
+                        id1: item.DID ?? i + 1,
+                        id2: item.TID ?? i + 1,
+                        resultType: ResultTypes.ERROR,
+                        description: getExceptionMessage(err)
+                    });
+                }
+            }
+            setWaitPanelTextPrimary('');
+            setWaitPanelMaxValuePrimary(0);
+            setWaitPanelValuePrimary(0);
+            setShowWaitPanel(false);
+            TMResultManager.show(result, mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined);
+            onClose();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    // Callback function triggered when a row in the DataGrid is double-clicked
+    const onRowDblClick = useCallback((e) => {
+        // Check if the event contains valid row data
+        if (e.data) {
+            // Determine whether the workflow requires selecting a working group folder
+            const isWgFolderRequired = mode !== 'copyToWgArchivedDoc';
+            // Set the selected working group to the data from the clicked row
+            setSelectedWg(e.data);
+            // If a working group folder selection is required, move to the next step
+            if (isWgFolderRequired) {
+                setCurrentStep(1);
+            }
+            else {
+                // Otherwise, saving
+                onSaveAsync(e.data);
+            }
+        }
+    }, [mode, onSaveAsync]);
+    const cellIconRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsx("div", { children: _jsx("strong", { children: SDKUI_Localizator.WorkGroup }) }), _jsx("hr", {}), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", data.id] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", data.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.OwnerName, ":"] }), " ", data.ownerName ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(data.creationTime)] })] }));
+        return _jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconUserGroup, { color: TMColors.primary }) });
+    }, []);
+    const cellDafaultRender = useCallback((cellData) => {
+        return _jsx("span", { children: cellData.value });
+    }, []);
+    const cellNameRender = useCallback((cellData) => {
+        const data = cellData.data;
+        return _jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: _jsx("span", { children: data.name }) });
+    }, []);
+    const dataColumns = useMemo(() => {
+        return ([
+            { dataField: 'id', caption: "ID", dataType: 'string', visible: false, cellRender: cellDafaultRender },
+            { caption: "", dataType: 'string', cellRender: cellIconRender, width: "30px", allowFiltering: false },
+            { dataField: 'name', caption: SDKUI_Localizator.Name, dataType: 'string', cellRender: cellNameRender },
+            { dataField: 'description', caption: SDKUI_Localizator.Description, dataType: 'string', cellRender: cellDafaultRender },
+            { dataField: "ownerName", caption: SDKUI_Localizator.OwnerName, dataType: 'string', cellRender: cellDafaultRender },
+        ]);
+    }, []);
+    // Render each TreeView item (directories) with custom styling/icons
+    const renderTreeViewItem = (itemData) => {
+        const isSelected = selectedFolder && selectedFolder.id === itemData.id;
+        const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
+        return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text] }));
+    };
+    return _jsx(TMSaveForm, { title: getTitle(), showTitleFormMode: false, showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: steps, currentStep: adjustedCurrentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
+                        marginTop: '10px',
+                        padding: '10px',
+                        borderRadius: '8px',
+                        boxShadow: '3px 0 5px #D3D3D3BF, -3px 0 5px #D3D3D3BF, 0 3px 5px #D3D3D3BF, 0 -3px 5px #D3D3D3BF',
+                        border: '1px solid rgba(0,0,0,0.15)',
+                        width: '100%',
+                        height: 'calc(100% - 113px)',
+                        overflow: 'auto',
+                    }, children: [(currentStep === 0 && wgs.length > 0) &&
+                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowClick: onRowClick, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (currentStep === 1) &&
+                            _jsx(TreeView, { dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick })] }), _jsxs("div", { style: {
+                        width: "100%",
+                        height: '45px',
+                        marginTop: "10px",
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: '10px'
+                    }, children: [_jsx("button", { onClick: () => onSaveAsync(), disabled: isDisabled, style: {
+                                background: 'none',
+                                border: 'none',
+                                color: isDisabled ? '#a0a0a0' : TMColors.primary,
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                padding: '6px 14px',
+                                borderRadius: '6px',
+                                transition: 'background-color 0.3s, color 0.3s',
+                            }, onMouseEnter: e => {
+                                if (!isDisabled) {
+                                    e.currentTarget.style.backgroundColor = '#e6f0ff';
+                                    e.currentTarget.style.color = '#004a99';
+                                }
+                            }, onMouseLeave: e => {
+                                if (!isDisabled) {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = TMColors.primary;
+                                }
+                            }, children: mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move }), _jsx("button", { onClick: () => onClose(), style: {
+                                background: 'none',
+                                border: 'none',
+                                color: TMColors.primary,
+                                cursor: 'pointer',
+                                padding: '6px 14px',
+                                borderRadius: '6px',
+                                transition: 'background-color 0.3s, color 0.3s',
+                            }, onMouseEnter: e => {
+                                e.currentTarget.style.backgroundColor = '#e6f0ff';
+                                e.currentTarget.style.color = '#004a99';
+                            }, onMouseLeave: e => {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                                e.currentTarget.style.color = TMColors.primary;
+                            }, 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')};
+  }
+`;
+export const TMStepNavigator = (props) => {
+    const { steps, currentStep, onStepChange } = props;
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', backgroundColor: '#f9f9f9', padding: '6px 16px', borderRadius: '999px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }, children: steps.map((step, index) => {
+                const isPastStep = index < currentStep;
+                const isCurrent = currentStep === index;
+                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { "$isCurrent": isCurrent, "$isPast": isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
+            }) }) }));
+};

package/lib/components/features/workflow/TMWorkflowPopup.d.ts

@@ -0,0 +1,42 @@
+import { DcmtTypeDescriptor } from '@topconsultnpm/sdk-ts';
+import { DeviceType } from "../../base/TMDeviceProvider";
+interface IWorkflowOperationButtonsProps {
+    dtd: DcmtTypeDescriptor | undefined;
+    approveDisable?: boolean;
+    signApproveDisable?: boolean;
+    rejectDisable?: boolean;
+    reassignDisable?: boolean;
+    infoDisable?: boolean;
+    deviceType?: DeviceType;
+    onApprove?: () => void;
+    onSignApprove?: () => void;
+    onReject?: () => void;
+    onReAssign?: () => void;
+    onMoreInfo?: () => void;
+}
+export declare const WorkFlowOperationButtons: (props: IWorkflowOperationButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkFlowApproveRejectPopUp: ({ TID, DID, deviceType, isReject, selectedItems, onClose, onCompleted }: {
+    TID?: number;
+    DID?: number;
+    deviceType?: DeviceType;
+    selectedItems?: any[];
+    isReject: number;
+    onClose?: () => void;
+    onCompleted?: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkFlowReAssignPopUp: ({ DID, TID, deviceType, onClose, selectedItems, onCompleted }: {
+    TID?: number;
+    DID?: number;
+    deviceType?: DeviceType;
+    onClose?: () => void;
+    selectedItems?: any[];
+    onCompleted?: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkFlowMoreInfoPopUp: ({ DID, TID, deviceType, onClose, onCompleted }: {
+    TID?: number;
+    DID?: number;
+    deviceType?: DeviceType;
+    onClose?: () => void;
+    onCompleted?: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};