@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/sidebar/TMHeader.js

@@ -1,616 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo } from 'react';
-import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, IconSearch, openApps, SDKUI_Localizator } from '../../helper';
-import styled, { keyframes } from 'styled-components';
-import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
-import { TMColors } from '../../utils/theme';
-import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
-import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-import { TMAboutApp } from './TMAboutApp';
-import ShowAlert from '../base/TMAlert';
-import TMResizableMenu from '../base/TMResizableMenu';
-import it from '../../assets/italy.svg';
-import de from '../../assets/german.svg';
-import fr from '../../assets/france.svg';
-import en from '../../assets/united-kingdom.svg';
-import es from '../../assets/spain.svg';
-import pt from '../../assets/portugal.svg';
-export var TMSearchContext;
-(function (TMSearchContext) {
-    TMSearchContext["JOBS"] = "jobs";
-    TMSearchContext["PROCESSES"] = "processes";
-    TMSearchContext["PROCESS_MONITOR"] = "ProcessMonitor";
-    TMSearchContext["JOBS_LIST"] = "JobsList";
-    TMSearchContext["PLATFORM"] = "OrchestrationPlatform";
-    TMSearchContext["QE"] = "QueryEditor";
-})(TMSearchContext || (TMSearchContext = {}));
-export const getInitials = (name) => {
-    if (!name)
-        return 'U';
-    if (name.toLowerCase() === 'sysadmin')
-        return 'SYS';
-    const words = name.trim().split(/\s+/);
-    if (words.length === 1) {
-        return words[0].substring(0, 2).toUpperCase();
-    }
-    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
-};
-export const getCultureFlag = (cultureId) => {
-    switch (cultureId) {
-        case 'it_IT': return it;
-        case 'fr_FR': return fr;
-        case 'en_US': return en;
-        case 'pt_PT': return pt;
-        case 'es_ES': return es;
-        case 'de_DE': return de;
-        default: return it;
-    }
-};
-export const getCultureDisplayName = (cultureId) => {
-    switch (cultureId) {
-        case 'it_IT': return 'Italiano';
-        case 'fr_FR': return 'Français';
-        case 'en_US': return 'English';
-        case 'pt_PT': return 'Português';
-        case 'es_ES': return 'Español';
-        case 'de_DE': return 'Deutsch';
-        default: return 'Italiano';
-    }
-};
-export const copyUserInfoToClipboard = (userName, cultureId, archiveId, archiveDesc, endpoint, domain) => {
-    const userInfo = {
-        username: userName,
-        endpoint: endpoint,
-        cultureID: cultureId,
-        archiveID: archiveId,
-        archiveDescription: archiveDesc,
-        domain: domain ?? 'undefined',
-    };
-    navigator.clipboard.writeText(JSON.stringify(userInfo, null, 2))
-        .then(() => {
-        ShowAlert({
-            message: SDKUI_Localizator.OperationSuccess,
-            mode: 'success',
-            title: SDKUI_Localizator.CopyUserInfo,
-            duration: 3000
-        });
-    })
-        .catch(() => {
-        ShowAlert({
-            message: SDKUI_Localizator.FailedToCopyToClipboard,
-            mode: 'error',
-            title: 'Error',
-            duration: 3000
-        });
-    });
-};
-export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
-    const deviceType = useDeviceType();
-    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
-};
-const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
-    const [appRoutes, setAppRoutes] = useState();
-    const [menuStatus, setMenuStatus] = useState(false);
-    const [showAppMenu, setShowAppMenu] = useState(false);
-    const [searchJobListValue, setSearchJobListValue] = useState('');
-    const [searchJobsValue, setSearchJobsValue] = useState('');
-    const [searchProcessesValue, setSearchProcessesValue] = useState('');
-    const [searchProcessMonitorValue, setSearchProcessMonitorValue] = useState('');
-    const [searchPlatformValue, setSearchPlatformValue] = useState('');
-    const [searchQEValue, setSearchQEValue] = useState('');
-    const tmSession = SDK_Globals.tmSession;
-    const deviceType = useDeviceType();
-    let isMobile = deviceType == DeviceType.MOBILE;
-    const menuRef = useRef(null);
-    const userIcon = useRef(null);
-    const logoRef = useRef(null);
-    const appMenuRef = useRef(null);
-    const userName = tmSession?.SessionDescr?.userName ?? 'User';
-    const archiveId = tmSession?.SessionDescr?.archiveID ?? 'No Archive';
-    const archiveDesc = tmSession?.SessionDescr?.description ?? 'No Description';
-    const endpoint = tmSession?.TopMediaServer.BaseAddress ?? 'No Endpoint';
-    const domain = tmSession?.SessionDescr?.domain;
-    const cultureId = tmSession?.SessionDescr?.cultureID ?? CultureIDs.It_IT;
-    const userInitials = getInitials(userName);
-    const avatarColor = getAvatarColor(userName);
-    const cultureFlag = getCultureFlag(cultureId);
-    const cultureName = getCultureDisplayName(cultureId);
-    const headerAppName = useMemo(() => {
-        switch (SDK_Globals.appModule) {
-            case AppModules.WORD_CONNECTOR:
-            case AppModules.EXCEL_CONNECTOR:
-            case AppModules.OUTLOOK_CONNECTOR:
-            case AppModules.POWERPOINT_CONNECTOR: return '';
-            default: return SDK_Globals.appModule;
-        }
-    }, [SDK_Globals.appModule, AppModules]);
-    useEffect(() => { clearSearchJobValue && setSearchJobsValue(''); }, [clearSearchJobValue]);
-    useEffect(() => { clearSearchQEValue && setSearchQEValue(''); }, [clearSearchQEValue]);
-    useEffect(() => {
-        switch (searchContext) {
-            case TMSearchContext.JOBS_LIST:
-                onSeacrhJobslistValueChange && onSeacrhJobslistValueChange(searchJobListValue);
-                break;
-            case TMSearchContext.JOBS:
-                onSeacrhJobsValueChange && onSeacrhJobsValueChange(searchJobsValue);
-                break;
-            case TMSearchContext.PROCESSES:
-                onSeacrhProcessValueChange && onSeacrhProcessValueChange(searchProcessesValue);
-                break;
-            case TMSearchContext.PROCESS_MONITOR:
-                onSeacrhProcessMonitorValueChange && onSeacrhProcessMonitorValueChange(searchProcessMonitorValue);
-                break;
-            case TMSearchContext.PLATFORM:
-                onSeacrhPlatformValueChange && onSeacrhPlatformValueChange(searchPlatformValue);
-                break;
-            case TMSearchContext.QE:
-                onSeacrhQEValueChange && onSeacrhQEValueChange(searchQEValue);
-                break;
-        }
-    }, [searchContext, searchJobListValue, searchJobsValue, searchProcessMonitorValue, searchProcessesValue, searchPlatformValue, searchQEValue]);
-    const openMenuTimer = useRef(null);
-    useEffect(() => {
-        function handleClickOutside(event) {
-            if (menuRef.current && !menuRef.current.contains(event.target) && !userIcon.current?.contains(event.target)) {
-                if (menuStatus) {
-                    setMenuStatus(false);
-                }
-            }
-        }
-        document.addEventListener('click', handleClickOutside);
-        return () => document.removeEventListener('click', handleClickOutside);
-    }, [menuRef, userIcon, menuStatus]);
-    useEffect(() => {
-        if (SDK_Globals.appModule === AppModules.WORD_CONNECTOR)
-            return;
-        fetch('../appConfig.json')
-            .then(res => res.json())
-            .then(json => setAppRoutes(Object.values(json.appRoutes)));
-    }, [SDK_Globals.appModule]);
-    useEffect(() => {
-        return () => {
-            if (openMenuTimer.current)
-                clearTimeout(openMenuTimer.current);
-        };
-    }, []);
-    useEffect(() => {
-        if (!showAppMenu)
-            return;
-        const safe = 20;
-        const handleMouseMove = (e) => {
-            const logoRect = logoRef.current?.getBoundingClientRect();
-            const menuRect = appMenuRef.current?.getBoundingClientRect();
-            const insideLogo = logoRect &&
-                e.clientX >= logoRect.left - safe &&
-                e.clientX <= logoRect.right + safe &&
-                e.clientY >= logoRect.top - safe &&
-                e.clientY <= logoRect.bottom + safe;
-            const insideMenu = menuRect &&
-                e.clientX >= menuRect.left - safe &&
-                e.clientX <= menuRect.right + safe &&
-                e.clientY >= menuRect.top - safe &&
-                e.clientY <= menuRect.bottom + safe;
-            if (!insideLogo && !insideMenu) {
-                setShowAppMenu(false);
-            }
-        };
-        window.addEventListener('mousemove', handleMouseMove);
-        return () => window.removeEventListener('mousemove', handleMouseMove);
-    }, [showAppMenu]);
-    const hasAdministrativeLevel = (sd) => {
-        if (sd.userLevel == UserLevels.SystemAdministrator)
-            return true;
-        if (sd.userLevel == UserLevels.Administrator)
-            return true;
-        if (sd.userLevel == UserLevels.AutonomousAdministrator)
-            return true;
-        return false;
-    };
-    const isAdministrativeLevel = useMemo(() => {
-        return hasAdministrativeLevel(tmSession?.SessionDescr);
-    }, [tmSession?.SessionDescr]);
-    const openAppsHandler = (appName, session, appRoutes) => {
-        if (!appRoutes) {
-            ShowAlert({ message: `App routes are not defined`, mode: 'error', title: appName, duration: 3000 });
-            return;
-        }
-        const route = appRoutes.find(route => route.appName === appName);
-        if (route) {
-            openApps(appName, session, appRoutes);
-        }
-        else {
-            ShowAlert({ message: `Route is not found`, mode: 'info', title: appName, duration: 3000 });
-        }
-        setShowAppMenu(false);
-    };
-    const isTopMediaAuth = useMemo(() => {
-        return tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia;
-    }, [tmSession]);
-    const appModuleHandler = useMemo(() => {
-        if (SDK_Globals.appModule === AppModules.ORCHESTRATOR) {
-            return { app_1: AppModules.DESIGNER, app_2: AppModules.SURFER };
-        }
-        if (SDK_Globals.appModule === AppModules.DESIGNER) {
-            return { app_1: AppModules.ORCHESTRATOR, app_2: AppModules.SURFER };
-        }
-        return { app_1: AppModules.DESIGNER, app_2: AppModules.ORCHESTRATOR };
-        ;
-    }, [SDK_Globals.appModule]);
-    const isOfficeConnector = useMemo(() => {
-        return SDK_Globals.appModule === AppModules.WORD_CONNECTOR || SDK_Globals.appModule === AppModules.EXCEL_CONNECTOR || SDK_Globals.appModule === AppModules.POWERPOINT_CONNECTOR || SDK_Globals.appModule === AppModules.OUTLOOK_CONNECTOR;
-    }, [SDK_Globals.appModule]);
-    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [(isAdministrativeLevel && !isOfficeConnector) &&
-                _jsx(TMResizableMenu, { ref: appMenuRef, isVisible: showAppMenu, top: 58, left: 10, resizable: false, maxWidth: 215, minWidth: 215, maxHeight: 180, minHeight: 180, onClose: () => { }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx("h5", { style: { color: TMColors.primary }, children: "Accessi ad altre applicazioni " }), _jsx("hr", {}), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center', width: '100%' }, children: [_jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_1, tmSession, appRoutes), "$bgColor": '#482234', children: [_jsx("img", { src: six, alt: appModuleHandler.app_1, width: 30, height: 30 }), " ", appModuleHandler.app_1.toUpperCase()] }), _jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_2, tmSession, appRoutes), "$bgColor": '#1d6f42', children: [_jsx("img", { src: six, alt: appModuleHandler.app_2, width: 30, height: 30 }), " ", appModuleHandler.app_2.toUpperCase()] })] })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%', gap: isMobile ? 5 : 15 }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 20, justifyContent: 'center' }, children: [_jsx(StyledLogo, { ref: logoRef, style: { cursor: (isAdministrativeLevel && !isOfficeConnector) ? 'pointer' : 'default' }, onMouseEnter: () => {
-                                    if (openMenuTimer.current)
-                                        clearTimeout(openMenuTimer.current);
-                                    openMenuTimer.current = setTimeout(() => { setShowAppMenu(true); onMenusOpen?.(); }, 200);
-                                }, onMouseLeave: () => {
-                                    if (openMenuTimer.current)
-                                        clearTimeout(openMenuTimer.current);
-                                }, src: six, height: isMobile ? 35 : 40, alt: "" }), (!isMobile || SDK_Globals.appModule === AppModules.WORD_CONNECTOR) && _jsx(StyledHeaderAppText, { children: headerAppName })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] }), customButtons] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconHeaderSettings, { fontSize: 24 }), " "] }), _jsx(UserAvatarContainer, { "$isSelected": menuStatus, ref: userIcon, onClick: e => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setMenuStatus(prev => !prev);
-                }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
-                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
-                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
-                                            setMenuStatus(false);
-                                            onLogout && onLogout();
-                                        }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
-                                            setMenuStatus(false);
-                                            onChangePassword && onChangePassword();
-                                        }, children: _jsx(BottomActionText, { children: SDKUI_Localizator.ChangePassword }) })), _jsx(BottomActionButton, { onClick: () => {
-                                            setMenuStatus(false);
-                                            TMMessageBoxManager.show({
-                                                buttons: [ButtonNames.OK],
-                                                title: SDK_Globals.appModule,
-                                                message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true })
-                                            });
-                                        }, children: _jsx(BottomActionText, { children: SDKUI_Localizator.About }) })] })] }) })] }));
-};
-export default TMHeader;
-export function IconHeaderNotifications(props) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 31 31", width: "1em", height: "1em", ...props, children: [_jsx("defs", {}), _jsxs("g", { children: [_jsxs("g", { children: [_jsx("path", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", d: "m4.37,25.81v-14.18C4.37,5.48,9.36.5,15.5.5s11.13,4.98,11.13,11.13v14.18" }), _jsx("line", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", x1: ".5", y1: "25.81", x2: "30.5", y2: "25.81" })] }), _jsx("path", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", d: "m20.19,25.81c0,2.59-2.1,4.69-4.69,4.69s-4.69-2.1-4.69-4.69h9.39Z" })] })] }));
-}
-export function IconHeaderSettings(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5px", d: "M39.23 26a17 17 0 0 0 .14-2a17 17 0 0 0-.14-2l4.33-3.39a1 1 0 0 0 .25-1.31l-4.1-7.11a1 1 0 0 0-1.25-.44l-5.11 2.06a15.7 15.7 0 0 0-3.46-2l-.77-5.43a1 1 0 0 0-1-.86H19.9a1 1 0 0 0-1 .86l-.77 5.43a15.4 15.4 0 0 0-3.46 2L9.54 9.75a1 1 0 0 0-1.25.44l-4.1 7.11a1 1 0 0 0 .25 1.31L8.76 22a17 17 0 0 0-.14 2a17 17 0 0 0 .14 2l-4.32 3.39a1 1 0 0 0-.25 1.31l4.1 7.11a1 1 0 0 0 1.25.44l5.11-2.06a15.7 15.7 0 0 0 3.46 2l.77 5.43a1 1 0 0 0 1 .86h8.2a1 1 0 0 0 1-.86l.77-5.43a15.4 15.4 0 0 0 3.46-2l5.11 2.06a1 1 0 0 0 1.25-.44l4.1-7.11a1 1 0 0 0-.25-1.31ZM24 31.18A7.18 7.18 0 1 1 31.17 24A7.17 7.17 0 0 1 24 31.18" }) }));
-}
-const iconPulse = keyframes `
-    0% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}20; }
-    50% { transform: scale(1.05); box-shadow: 0 0 0 8px ${TMColors.primary}10; }
-    100% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}00; }
-`;
-const iconBounce = keyframes `
-    0%, 20%, 60%, 100% { transform: translateY(0); }
-    40% { transform: translateY(-3px); }
-    80% { transform: translateY(-1px); }
-`;
-const slideInFromLeft = keyframes `
-    from { opacity: 0; transform: translateX(-20px); }
-    to { opacity: 1; transform: translateX(0); }
-`;
-const fadeIn = keyframes `
-    from { opacity: 0; }
-    to { opacity: 1; }
-`;
-const StyledLogo = styled.img `
-    image-rendering: auto;
-    shape-rendering: auto;
-`;
-const StyledHeaderContainer = styled.div ` 
-    position:fixed; 
-    width: 100%; 
-    height: 60px; 
-    background-color:transparent; 
-    opacity: 1; 
-    display: flex; 
-    flex-direction: row; 
-    width: 100%; 
-    justify-content: space-between; 
-    align-items: center; 
-    padding: 0px 10px;
-`;
-const StyledHeaderIcon = styled.div `
-    position: relative;
-    width: 40px;
-    height: 40px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${TMColors.primary};
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: pointer;
-    border-radius: 50%;
-
-    &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 35px;
-        height: 35px;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
-        background: ${TMColors.primary}20;
-        opacity: 0;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: -1;
-    }
-
-    &:hover {
-        color: ${TMColors.primary};
-        transform: translateY(-2px);
-        &:before {
-            opacity: 1;
-        }
-        svg {
-            animation: ${iconBounce} 0.6s ease-in-out;
-        }
-    }
-
-    &:active {
-        transform: translateY(0);
-        color: ${TMColors.primary};
-        &:before {
-            opacity: 1;
-            background: ${TMColors.primary}40;
-        }
-    }
-
-    ${props => props.$isSelected && `
-        &:before {
-            opacity: 1;
-            background: ${TMColors.primary}25;
-        }
-    `}
-
-    &.has-notification {
-        animation: ${iconPulse} 2s infinite;
-    }
-
-    &:focus {
-        outline: none;
-    }
-
-    svg {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-    }
-`;
-const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
-const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
-const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
-const AppMenuButton = styled.div `
-  width: 90px;
-  height: 90px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  color: #2459A4;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  border-radius: 10px;
-  margin: 8px 0;
-  cursor: pointer;
-  box-shadow: 0 2px 8px #2459a41a;
-  user-select: none;
-  gap: 5px;
-  transition:
-    transform 0.18s cubic-bezier(.4,0,.2,1),
-    box-shadow 0.18s cubic-bezier(.4,0,.2,1);
-  &:hover {
-    transform: translateY(-2px) scale(1.06);
-    box-shadow: 0 6px 18px #2459a433;
-  }
-`;
-const UserAvatarContainer = styled.div `
-    position: relative;
-    width: 40px;
-    height: 40px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 50%;
-    transition: all 0.2s ease;
-    padding: 2px;
-
-    ${props => props.$isSelected && `
-        background: ${TMColors.primary}20;
-        transform: scale(1.05);
-    `}
-
-    &:hover {
-        background: ${TMColors.primary}15;
-        transform: scale(1.05);
-    }
-`;
-const UserAvatar = styled.div `
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: ${props => props.$bgColor};
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    user-select: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-`;
-const UserAvatarLarge = styled(UserAvatar) `
-    width: 48px;
-    height: 48px;
-    font-size: 18px;
-    flex-shrink: 0;
-`;
-const MenuContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
-    height: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-`;
-const UserProfileSection = styled.div `
-    display: flex;
-    padding: 20px;  
-    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
-    border-bottom: 1px solid #e1e5e9;
-    gap: 12px;
-    opacity: 0;
-    animation: ${fadeIn} 0.3s ease-out forwards;
-    flex: 1;  
-`;
-const UserProfileSectionWithUserName = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 12px;  
-`;
-const UserInfo = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-    flex: 1;
-`;
-const UserName = styled.div `
-    font-size: 16px;
-    font-weight: 600;
-    color: #242424;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.2;
-`;
-const SessionInfo = styled.div `
-    font-size: 11px;
-    color: #605e5c;
-    font-weight: 400;
-    line-height: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-const CultureFlag = styled.img `
-    width: 14px;
-    height: 14px;
-    object-fit: cover;
-    flex-shrink: 0;
-`;
-const LogoutButton = styled.div `
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-left: auto;
-    flex-shrink: 0;
-
-    &:hover {
-        transform: translateY(-1px);
-        color: ${TMColors.primary};
-    }
-
-    &:active {
-        transform: translateY(0);
-    }
-`;
-const LogoutText = styled.span `
-    font-size: 13px;
-    color: #605e5c;
-    font-weight: 500;
-    transition: color 0.2s ease;
-    white-space: nowrap;
-
-    &:hover {
-        color: ${TMColors.primary};
-    }
-`;
-const AvatarContainer = styled.div `
-    position: relative;
-    flex-shrink: 0;
-`;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border: 1px solid #e1e5e9;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: #605e5c;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
-
-    &:hover {
-        background: #b7b7b7;
-        color: white;
-        opacity: 1;
-    }
-
-    &:active {
-        transform: scale(0.95);
-    }
-
-    svg {
-        transition: all 0.2s ease;
-    }
-`;
-const BottomActionsContainer = styled.div `
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px;
-    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
-    border-top: 1px solid #e1e5e9;
-    gap: 20px;
-`;
-const BottomActionButton = styled.div `
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        transform: translateY(-1px);
-        color: ${TMColors.primary};
-    }
-
-    &:active {
-        transform: translateY(0);
-    }
-`;
-const BottomActionText = styled.span `
-    font-size: 13px;
-    color: #605e5c;
-    font-weight: 500;
-    transition: color 0.2s ease;
-    white-space: nowrap;
-
-    &:hover {
-        color: ${TMColors.primary};
-    }
-`;
-const UserNameContainer = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    min-width: 0;
-`;

package/lib/components/sidebar/TMSidebar.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-export type AppRouteType = 'route' | 'panel' | 'panelRight' | 'app';
-export interface AppRoute {
-    name: string;
-    path: string;
-    icon?: any;
-    element?: JSX.Element;
-    category?: string;
-    type?: AppRouteType;
-}
-interface ITMSidebar {
-    /** List of TMSidebarItem components that make up the menu */
-    items: JSX.Element[];
-    height?: string;
-    width?: string;
-    top?: string;
-    left?: string;
-    borderRightRadius?: string;
-}
-declare const TMSidebar: React.FC<ITMSidebar>;
-export default TMSidebar;