@topconsultnpm/sdkui-react 6.19.0-dev1.53 → 6.19.0-dev1.55

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

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrayStore from 'devextreme/data/array_store';
+import { useCallback, useEffect, useRef, useState } from 'react';
+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 { FormModes } from '../../../ts';
+import { SDKUI_Localizator } from '../../../helper';
+import TMTooltip from '../../base/TMTooltip';
+import TMCustomSearchBar from '../../../helper/TMCustomSearchBar';
+const views = ['month'];
+let clickTimeout = null; // Timeout reference
+let clickCount = 0; // Click counter
+let lastClickedCell = null;
+const TMTasksCalendar = (props) => {
+    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const mobileBreakpoint = 768;
+    const [schedulerData, setSchedulerData] = useState([]);
+    const [isRange, setIsRange] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const containerRef = useRef(null);
+    const schedulerRef = useRef(null);
+    useEffect(() => {
+        const updateDimensions = (entries) => {
+            for (let entry of entries) {
+                const { width } = entry.contentRect;
+                setIsMobile(width <= mobileBreakpoint);
+            }
+            if (schedulerRef.current && schedulerRef.current.instance) {
+                schedulerRef.current.instance().repaint();
+            }
+        };
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+        };
+    }, [containerRef]);
+    useEffect(() => {
+        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+    }, [visualizedTasks]);
+    useEffect(() => {
+        let timeoutId;
+        if (searchText.length > 0) {
+            setLoading(true);
+            timeoutId = setTimeout(() => {
+                const filteredTasks = findTasksBySearch(visualizedTasks, searchText);
+                setSchedulerData(convertToSchedulerAppointments(filteredTasks));
+                setLoading(false);
+            }, 300);
+        }
+        else {
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+            setLoading(false);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [searchText]);
+    // Runs the handleContentReady function whenever the currentCalendarDate changes, ensuring the scheduler scrolls to the correct date
+    useEffect(() => {
+        handleContentReady();
+    }, [currentCalendarDate]);
+    // Scrolls the scheduler to the current date or the start of the view based on the current calendar date
+    const handleContentReady = () => {
+        if (schedulerRef.current === null)
+            return;
+        const schedulerInstance = schedulerRef.current.instance();
+        const startOfView = schedulerInstance.getStartViewDate();
+        const endOfView = schedulerInstance.getEndViewDate();
+        if (currentCalendarDate >= startOfView && currentCalendarDate <= endOfView) {
+            schedulerInstance.scrollTo(currentCalendarDate);
+        }
+        else {
+            schedulerInstance.scrollTo(startOfView);
+        }
+    };
+    const handleAppointmentClick = (e) => {
+        // Capture the appointment ID
+        const appointmentId = e.appointmentData.id;
+        const task = visualizedTasks.find(task => task.id === appointmentId);
+        if (task)
+            handleFocusedRowChange(task);
+    };
+    // Double-click appointment handler
+    const handleAppointmentDblClick = (e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const task = visualizedTasks.find(task => task.id === e.appointmentData.id);
+        if (task) {
+            handleFocusedRowChange(task);
+            openTaskForm(FormModes.Update, task);
+        }
+    };
+    const onAppointmentContextMenu = (e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task)
+            handleFocusedRowChange(task);
+        setCalendarStartDate(undefined);
+        setCalendarEndDate(undefined);
+    };
+    const onCellContextMenu = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        e.event.preventDefault();
+        handleFocusedRowChange(undefined);
+        if (!isRange) {
+            setCalendarStartDate(e.cellData.startDate);
+            const endDateWithTime = new Date(e.cellData.endDate);
+            endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+            endDateWithTime.setHours(23, 59, 0, 0);
+            setCalendarEndDate(endDateWithTime);
+        }
+    };
+    const appointmentTooltipComponent = (params) => {
+        if (params === undefined || params.data === undefined || params.data.appointmentData === undefined)
+            return;
+        const { appointmentData } = params.data;
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === appointmentData.id);
+        if (currentTask === undefined || currentTask.id === undefined)
+            return;
+        const priority = getPriorityLocalizatorValue(currentTask.priority ?? Priorities.None);
+        const startTime = currentTask.startTime;
+        const endTime = currentTask.endTime;
+        const remTime = currentTask.remTime;
+        const stateLabel = currentTask.state ?? Task_States.None;
+        const stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const pdg = currentTask.pdG || undefined;
+        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 })] });
+    };
+    const onCurrentCalendarDateChange = (value) => {
+        // Exit early if it's not a valid Date
+        if (!(value instanceof Date) || isNaN(value.getTime())) {
+            return;
+        }
+        setCurrentCalendarDate(value);
+        setSearchText('');
+    };
+    // Custom appointment component to render each appointment
+    const appointmentComponent = (params) => {
+        if (!params || !params.data)
+            return null;
+        const { appointmentData } = params.data;
+        // Define inline styles for the selected appointment
+        const isSelected = focusedRowKey === appointmentData.id;
+        let stateLabel = undefined;
+        let stateTooltipLabel = undefined;
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === appointmentData.id);
+        stateLabel = currentTask?.state ?? Task_States.None;
+        stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const inlineStyles = isSelected ? { backgroundColor: '#2559A5', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', fontWeight: 'bold', color: 'white', cursor: 'pointer', transition: 'all 0.3s ease-in-out', } : {};
+        const centerStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center', height: '100%' };
+        return (_jsxs("div", { id: "appointment-" + appointmentData.id.toString(), style: { ...inlineStyles, ...centerStyles }, children: [(stateLabel && stateTooltipLabel) && _jsxs(TMTooltip, { content: stateTooltipLabel, children: [" ", _jsxs("div", { children: [taskStateIconMap(15).get(stateLabel), "\u00A0"] })] }), showId && _jsxs("span", { children: [highlightTaskText(appointmentData.id.toString(), searchText, appointmentData.id), "\u00A0-\u00A0"] }), appointmentData.text] }));
+    };
+    const handleCellClick = (e) => {
+        handleFocusedRowChange(undefined);
+        clickCount += 1;
+        if (clickTimeout)
+            clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+            if (clickCount === 1) {
+                // Single click logic
+                setCalendarStartDate(e.cellData.startDate);
+                const endDateWithTime = new Date(e.cellData.endDate);
+                endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                endDateWithTime.setHours(23, 59, 59, 0);
+                setCalendarEndDate(endDateWithTime);
+            }
+            else if (clickCount === 2) {
+                // Double click logic (only on the same cell)
+                if (lastClickedCell && lastClickedCell.startDate === e.cellData.startDate && lastClickedCell.endDate === e.cellData.endDate) {
+                    // Double click on the same cell
+                    setCalendarStartDate(e.cellData.startDate);
+                    const endDateWithTime = new Date(e.cellData.endDate);
+                    endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                    endDateWithTime.setHours(23, 59, 59, 0);
+                    setCalendarEndDate(endDateWithTime);
+                    openTaskForm(FormModes.Create, undefined); // Open the task form
+                }
+            }
+            // Reset click count
+            clickCount = 0;
+        }, 200); // Delay for double-click detection
+        // Save the current cell as the last clicked cell
+        lastClickedCell = { startDate: e.cellData.startDate, endDate: e.cellData.endDate };
+    };
+    const handleAppointmentFormOpening = (e) => {
+        // Cancel the default form opening
+        e.cancel = true;
+        // If no appointment data, return
+        if (!e.appointmentData)
+            return;
+        // Show the tooltip manually
+        e.component.showAppointmentTooltip(e.appointmentData, "#appointment-" + e.appointmentData.id.toString());
+    };
+    const onOptionChanged = ({ name, value }) => {
+        if (typeof name === 'string' && Array.isArray(value)) {
+            if (name === "selectedCellData") {
+                const startDate = value[0]?.startDate;
+                const endDate = value[value.length - 1]?.endDate;
+                if (startDate && endDate) {
+                    setCalendarStartDate(startDate);
+                    // Set the endDate to 23:59:59 and subtract one day
+                    const endDateWithTime = new Date(endDate);
+                    endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                    endDateWithTime.setHours(23, 59, 59, 0);
+                    setCalendarEndDate(endDateWithTime);
+                    setIsRange(true);
+                }
+            }
+        }
+    };
+    const onWrapperContextMenu = useCallback(() => {
+        handleFocusedRowChange(undefined);
+    }, []);
+    const onWrapperClick = useCallback(() => {
+        handleFocusedRowChange(undefined);
+    }, []);
+    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px", padding: 5 }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsx(TMTooltip, { content: priorityLegend(), children: SDKUI_Localizator.PriorityLegend }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
+                    : _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: onWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) }) })] }));
+};
+export default TMTasksCalendar;

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

@@ -0,0 +1,14 @@
+import { TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { TaskViewType } from './TMTasksUtils';
+import React from 'react';
+interface TMTasksHeaderProps {
+    activeComponent: TaskViewType;
+    updateActiveComponent: (newComponent: TaskViewType) => void;
+    allTasks: Array<TaskDescriptor>;
+    appliedGlobalFilters: Array<number>;
+    setAppliedGlobalFilters: React.Dispatch<React.SetStateAction<Array<number>>>;
+    color?: string;
+    height?: string;
+}
+declare const TMTasksHeader: (props: TMTasksHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksHeader;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 TMTooltip from '../../base/TMTooltip';
+import { SDKUI_Localizator } from '../../../helper';
+import TMDropDown from '../../editors/TMDropDown';
+import TMTreeDropDown from '../../editors/TMTreeDropDown';
+const StyledListHeader = styled.div ` border-bottom: 1px solid #e6e6e6; width: 100%; height: ${props => props.$height}; min-height: 55px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 20px; `;
+const StyledViewChangerContainer = styled.div ` width: 100%; height: 100%; display: flex; flex-direction: row; gap: 8px; align-items: left; `;
+const TMTasksHeader = (props) => {
+    const { activeComponent, color, height, appliedGlobalFilters, setAppliedGlobalFilters, updateActiveComponent, allTasks } = props;
+    const containerRef = useRef(null);
+    const [treeDataSource, setTreeDataSource] = useState([]);
+    useEffect(() => {
+        setTreeDataSource(treeFilterDataSource(allTasks));
+    }, [allTasks]);
+    // Function to disable right-click
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+    };
+    const onSelectListOrCalendarCallback = (e) => {
+        const { value } = e.target;
+        updateActiveComponent(value);
+    };
+    const isValidKey = (key) => {
+        return key !== FilterCategoryId.AllStates && key !== FilterCategoryId.AllPriorities;
+    };
+    return (_jsx(StyledListHeader, { ref: containerRef, "$color": color ?? 'black', "$height": height ?? '100%', onContextMenu: handleContextMenu, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "horizontal", useNative: true, children: _jsxs(StyledViewChangerContainer, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SelectViewMode, showEvent: "mouseenter", hideEvent: "mouseleave", position: "top", children: _jsx(TMDropDown, { elementStyle: { minWidth: "120px", width: "120px", height: "29px" }, dataSource: [
+                                { value: TaskView.AGENDA_TASK, display: "Agenda", icon: 'clock' },
+                                { value: TaskView.CALENDAR_TASK, display: SDKUI_Localizator.Calendar, icon: 'event' },
+                                { value: TaskView.LIST_TASK, display: SDKUI_Localizator.List, icon: 'fields' },
+                            ], value: activeComponent, onValueChanged: onSelectListOrCalendarCallback }) }), _jsx(TMTreeDropDown, { dataSource: treeDataSource, values: appliedGlobalFilters, setValues: setAppliedGlobalFilters, displayExpr: false, isValidKey: isValidKey, elementStyle: { minWidth: "250px", height: "29px" } })] }) }) }));
+};
+export default TMTasksHeader;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { TaskDescriptor, UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo, TaskContext } from "../../../ts";
+interface TMTasksPanelContentProps {
+    id: string;
+    allTasks: Array<TaskDescriptor>;
+    getAllTasks: () => Promise<void>;
+    deleteTaskByIdsCallback: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs: (workGroupId: number) => void;
+    handleNavigateToDossiers: (dossierId: number) => void;
+    taskContext?: TaskContext;
+    usersList?: Array<UserDescriptor>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    s4TViewerDialogComponent?: React.ReactNode;
+}
+declare const TMTasksPanelContent: (props: TMTasksPanelContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksPanelContent;

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect } from "react";
+import { useState } from "react";
+import { AssignedTab, FilterCategoryId, filterTreeTask, getTaskAssignedToMe, TaskView } from "./TMTasksUtils";
+import { getTaskAssignedByMe } from "../tasks/TMTasksUtils";
+import TMTasksView from "./TMTasksView";
+import TMTasksHeader from "./TMTasksHeader";
+const TMTasksPanelContent = (props) => {
+    // Destructure the common props
+    const { id, handleNavigateToWGs, handleNavigateToDossiers, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent } = props;
+    // activeComponent holds the current task view type, which is determined based on the `layout` prop
+    const [activeComponent, setActiveComponent] = useState(TaskView.LIST_TASK);
+    // State to store clicked task to process for editing
+    const [currentTask, setCurrentTask] = useState(null);
+    // State to hold tasks that are currently visualized
+    const [visualizedTasks, setVisualizedTasks] = useState([]);
+    // State to count tasks in different categories
+    const [assignedToMeCount, setAssignedToMeCount] = useState(0);
+    const [assignedByMeCount, setAssignedByMeCount] = useState(0);
+    const [allTasksFilteredCount, setAllTasksFilteredCount] = useState(0);
+    // State to manage the active tab
+    const [activeTabIndex, setActiveTabIndex] = useState(AssignedTab.AssignedToMe);
+    // appliedGlobalFilters is a state variable that holds an array of filter category IDs (numbers)
+    const [appliedGlobalFilters, setAppliedGlobalFilters] = useState([FilterCategoryId.Expiring, FilterCategoryId.NewAssignedActivities, FilterCategoryId.New, FilterCategoryId.InProgress, FilterCategoryId.Pending, FilterCategoryId.Postponed, FilterCategoryId.Low, FilterCategoryId.High]);
+    // showContextualWG is a state variable that determines whether the contextual working group filter is visible
+    const [showContextualWG, setShowContextualWG] = useState(true);
+    // showContextualDossier is a state variable that determines whether the contextual dossier filter is visible
+    const [showContextualDossier, setShowContextualDossier] = useState(true);
+    // showId is a state variable that determines whether an ID-related component or feature should be displayed
+    const [showId, setShowId] = useState(false);
+    // showSearch is a state variable that controls the visibility of a search-related component or feature
+    const [showSearch, setShowSearch] = useState(true);
+    const contextualTasks = React.useMemo(() => {
+        let tasks = allTasks;
+        if (showContextualWG && taskContext && taskContext.workingGroup && taskContext.workingGroup.id) {
+            tasks = tasks.filter(task => task.iD1 === taskContext.workingGroup.id);
+        }
+        if (showContextualDossier && taskContext && taskContext.dossier && taskContext.dossier.id) {
+            tasks = tasks.filter(task => task.iD1 === taskContext.dossier.id);
+        }
+        return tasks;
+    }, [allTasks, showContextualWG, showContextualDossier, taskContext]);
+    useEffect(() => {
+        const getFilteredTasks = (tab) => {
+            let tasks = allTasks;
+            switch (tab) {
+                case AssignedTab.AssignedToMe:
+                    tasks = getTaskAssignedToMe(tasks);
+                    break;
+                case AssignedTab.AssignedByMe:
+                    tasks = getTaskAssignedByMe(tasks);
+                    break;
+                default:
+                    break;
+            }
+            if (showContextualWG && taskContext && taskContext.workingGroup && taskContext.workingGroup.id) {
+                tasks = tasks.filter(task => task.iD1 === taskContext.workingGroup?.id);
+            }
+            if (showContextualDossier && taskContext && taskContext.dossier && taskContext.dossier.id) {
+                tasks = tasks.filter(task => task.iD1 === taskContext.dossier?.id);
+            }
+            return filterTreeTask(tasks, appliedGlobalFilters);
+        };
+        setAssignedToMeCount(getFilteredTasks(AssignedTab.AssignedToMe).length);
+        setAssignedByMeCount(getFilteredTasks(AssignedTab.AssignedByMe).length);
+        setAllTasksFilteredCount(getFilteredTasks(AssignedTab.All).length);
+        setVisualizedTasks(getFilteredTasks(activeTabIndex));
+    }, [allTasks, appliedGlobalFilters, activeTabIndex, showContextualWG, showContextualDossier, taskContext]);
+    const updateActiveComponent = useCallback((newComponent) => {
+        setActiveComponent(newComponent);
+    }, []);
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMTasksHeader, { height: "55px", activeComponent: activeComponent, updateActiveComponent: updateActiveComponent, allTasks: contextualTasks, appliedGlobalFilters: appliedGlobalFilters, setAppliedGlobalFilters: setAppliedGlobalFilters }), _jsx("div", { style: { width: "100%", height: "calc(100% - 55px)" }, children: _jsx(TMTasksView, { id: id, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, currentTask: currentTask, setCurrentTask: setCurrentTask, visualizedTasks: visualizedTasks, activeComponent: activeComponent, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, assignedToMeCount: assignedToMeCount, assignedByMeCount: assignedByMeCount, allTasksFilteredCount: allTasksFilteredCount, showId: showId, setShowId: setShowId, showSearch: showSearch, setShowSearch: setShowSearch, showContextualWG: showContextualWG, setShowContextualWG: setShowContextualWG, showContextualDossier: showContextualDossier, setShowContextualDossier: setShowContextualDossier, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, taskContext: taskContext, usersList: usersList, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent }) })] });
+};
+export default TMTasksPanelContent;

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

@@ -0,0 +1,130 @@
+import { Appointment } from 'devextreme/ui/scheduler';
+import { ContextMenuTypes } from 'devextreme-react/cjs/context-menu';
+import { TaskDescriptor, Task_States, PdGs, Priorities, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { FormModes } from '../../../ts';
+import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
+export declare const TEXT_SELECTED_COLOR = "#ff5e1a";
+export declare const BG_COLOR_INACTIVE_WIDGET = "#fff";
+export declare const BG_COLOR_ACTIVE_WIDGET = "#fff0b7";
+export declare const TEXT_NOT_SELECTED_COLOR = "#2559A5";
+export declare const TODAY_ROW_HIGHLIGHT_BG_COLOR = "#ffb74d";
+export declare const NOT_TODAY_ROW_HIGHLIGHT_COLOR = "#ff0000";
+export declare const NOT_TODAY_ROW_HIGHLIGHT_BG_COLOR = "#81d7fe";
+export declare const START_DATE_MUST_BE_BEFORE_END_DATE = "StartDateMustBeBeforeEndDate";
+export declare const REMINDER_TIME_MUST_BE_BEFORE_END_TIME = "ReminderTimeMustBeBeforeEndTime";
+export declare enum AssignedTab {
+    AssignedToMe = 0,
+    AssignedByMe = 1,
+    All = 2,
+    TaskNotPersonalAssignedToMe = 3,
+    TaskPersonalAssignedToMe = 4
+}
+export type ContextMenuItem = ContextMenuTypes.Item & {
+    onItemClick?: (e: ContextMenuTypes.ItemClickEvent) => void;
+};
+export interface IFieldsEditability {
+    name: boolean;
+    description: boolean;
+    fromID: boolean;
+    assignedTO: boolean;
+    status: boolean;
+    priority: boolean;
+    startDate: boolean;
+    endDate: boolean;
+    remTime: boolean;
+}
+export declare const sortTasks: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
+export declare const taskIsToday: (startTime: Date, endTime: Date) => boolean;
+export declare const taskIsExpiringSoon: (endTime: Date, remTime?: Date) => boolean;
+export declare const appointmentBackgroundColorFn: (startTime: Date, endTime: Date) => string;
+export declare const getPriorityLocalizatorValues: () => Array<{
+    value: string;
+    display: string;
+}>;
+export declare const getPriorityId: (priority: Priorities) => number;
+export declare const getPriorityColor: (priority: Priorities) => string;
+export declare const LIGTH_CYAN = "#80DEEA";
+export declare const LIGTH_RED_ORGANGE = "#FFAB91";
+export declare const prioritiesResourceData: Array<{
+    id?: number;
+    text: string;
+    color?: string;
+}>;
+export declare const getStatusLocalizatorValues: () => Array<{
+    value: string;
+    display: string;
+}>;
+export declare const getStatusLocalizatorValue: (status: Task_States) => string;
+export declare const getPriorityLocalizatorValue: (priority: Priorities) => string;
+export declare const getTaskAssignedToMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
+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 getHeaderStatusFilterConfig: () => {
+    enabled: boolean;
+    dataSource: {
+        text: string;
+        value: string;
+    }[];
+};
+export declare const getHeaderPriorityFilterConfig: () => {
+    enabled: boolean;
+    dataSource: {
+        text: string;
+        value: string;
+    }[];
+};
+export declare const TaskView: {
+    LIST_TASK: string;
+    AGENDA_TASK: string;
+    CALENDAR_TASK: string;
+};
+export type TaskViewType = typeof TaskView[keyof typeof TaskView];
+export declare enum Extended_Task_States {
+    Init = "Init",
+    Expiring = "Expiring",
+    AssignedToMe = "AssignedToMe",
+    AssignedByMe = "AssignedByMe",
+    NewAssignedActivities = "NewAssignedActivities"
+}
+export declare const getTaskColor: (taskState: Task_States) => {
+    color: string;
+};
+export declare const mergeUniqueTasks: (existing: Array<TaskDescriptor>, // Array of existing tasks
+newTasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
+export declare const getOriginLabel: (pdg: PdGs | undefined, ID1Name: string | undefined) => string;
+export declare const taskValidatorAsync: (taskDescriptor: TaskDescriptor) => Promise<ValidationItem[]>;
+export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1Name: string | undefined) => string;
+export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
+export declare const formatDate: (date: Date) => string;
+export declare const areDifferentIDs: (fromID: number | undefined, userID: number | undefined) => boolean;
+export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void, editTaskCallback: (rowId: number | undefined) => void, duplicateTaskCallback: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
+export declare const checkIfNew: (fromId: number | undefined, isNew: number | undefined) => boolean;
+export declare const getNewTaskCount: (tasks: Array<TaskDescriptor>) => number;
+export declare const isTaskAssignedToAnotherUser: (task: TaskDescriptor) => boolean;
+export declare const getMondayOfCurrentWeek: (date: Date) => Date;
+export declare const getSundayOfCurrentWeek: (date: Date) => Date;
+export declare const getFirstDayOfMonth: (date: Date) => Date;
+export declare const getLastDayOfMonth: (date: Date) => Date;
+export declare const findTasksBySearch: (visualizedTasks: Array<TaskDescriptor>, searchText: string) => TaskDescriptor[];
+export interface CellData {
+    startDate: Date;
+    endDate: Date;
+    groups?: Record<string, unknown>;
+    text?: string;
+}
+export declare enum FilterCategoryId {
+    AllStates = 1,
+    AllPriorities = 2,
+    NewAssignedActivities = 1.05,
+    Expiring = 1.1,
+    New = 1.2,
+    InProgress = 1.3,
+    Completed = 1.4,
+    Pending = 1.5,
+    Postponed = 1.6,
+    Low = 2.1,
+    Normal = 2.2,
+    High = 2.3
+}
+export declare const filterTreeTask: (tasks: Array<TaskDescriptor>, filtersApplied: Array<FilterCategoryId>) => Array<TaskDescriptor>;