added profile page and logout
test-org/trust-module-frontend/pipeline/pr-rc This commit looks good Details

pull/51/head
DmitriyA 2025-07-16 10:22:06 -04:00
parent dabdda4afe
commit cb030a01d2
3 changed files with 83 additions and 3 deletions

View File

@ -5,6 +5,7 @@ import LoginModal from "./Components/UI/LoginModal";
import { lightTheme, darkTheme } from "./Style/theme"; import { lightTheme, darkTheme } from "./Style/theme";
import Logo from './assets/images/logo.svg?react'; import Logo from './assets/images/logo.svg?react';
import { checkAuth } from "./Components/UI/auth"; import { checkAuth } from "./Components/UI/auth";
import axios from "axios";
function App() { function App() {
const [authState, setAuthState] = useState({ const [authState, setAuthState] = useState({

View File

@ -8,9 +8,9 @@ import useSidebarResize from "../hooks/useSidebarResize";
import TabContent from "../hooks/TabContent"; import TabContent from "../hooks/TabContent";
import menuData from "../TreeChart/menuData.json"; import menuData from "../TreeChart/menuData.json";
import SidebarMenuWrapper from "./SidebarMenuWrapper"; import SidebarMenuWrapper from "./SidebarMenuWrapper";
import MetricTabContent from "./MetricTabContent" import MetricTabContent from "./MetricTabContent";
import ProfileMenu from "../UI/ProfileMenu";
// Стилизованные компоненты
const DashboardContainer = styled(Box)(({ theme }) => ({ const DashboardContainer = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
height: '100vh', height: '100vh',
@ -37,7 +37,7 @@ const Content = styled(Box)(({ theme }) => ({
color: theme.palette.custom.modalText, color: theme.palette.custom.modalText,
})); }));
const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => { const Dashboard = ({ isDarkMode, setIsDarkMode, user, onLogout }) => {
const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная"); const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
const [tabContent, setTabContent] = useState({}); const [tabContent, setTabContent] = useState({});
const [treeData1, setTreeData1] = useState(menuData); const [treeData1, setTreeData1] = useState(menuData);
@ -133,6 +133,19 @@ const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
return ( return (
<DashboardContainer> <DashboardContainer>
<Box
sx={{
position: 'fixed',
top: 12,
right: 20,
zIndex: (theme) => theme.zIndex.tooltip + 10,
pointerEvents: 'auto'
}}
>
<ProfileMenu user={user} onLogout={onLogout} />
</Box>
{/* Сайдбар */} {/* Сайдбар */}
<SidebarMenuWrapper <SidebarMenuWrapper
isDarkMode={isDarkMode} isDarkMode={isDarkMode}

View File

@ -0,0 +1,66 @@
import React, { useState } from 'react';
import {
IconButton, Menu, MenuItem, Avatar, Tooltip, Typography
} from '@mui/material';
const ProfileMenu = ({ user, onLogout }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleLogoutClick = () => {
handleClose();
onLogout();
};
return (
<>
<Tooltip title="Профиль">
<IconButton onClick={handleOpen} size="small" sx={{ ml: 2 }}>
<Avatar sx={{ bgcolor: 'primary.main' }}>
{user?.login?.[0]?.toUpperCase() || '?'}
</Avatar>
</IconButton>
</Tooltip>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 3,
sx: {
mt: 1.5,
minWidth: 180,
},
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem disabled>
<Typography variant="body2" color="text.secondary">
{user?.login || 'Неизвестный'}
</Typography>
</MenuItem>
<MenuItem onClick={handleLogoutClick}>
Выйти
</MenuItem>
</Menu>
</>
);
};
export default ProfileMenu;