From cb030a01d2a3c4c077482ff22a7fd4418ccc5814 Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Wed, 16 Jul 2025 10:22:06 -0400
Subject: [PATCH] added profile page and logout

---
 src/App.jsx                         |  1 +
 src/Components/Layout/Dashboard.jsx | 19 +++++++--
 src/Components/UI/ProfileMenu.jsx   | 66 +++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/Components/UI/ProfileMenu.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 2406af5..bbc0c28 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ import LoginModal from "./Components/UI/LoginModal";
 import { lightTheme, darkTheme } from "./Style/theme";
 import Logo from './assets/images/logo.svg?react';
 import { checkAuth } from "./Components/UI/auth";
+import axios from "axios";
 
 function App() {
     const [authState, setAuthState] = useState({
diff --git a/src/Components/Layout/Dashboard.jsx b/src/Components/Layout/Dashboard.jsx
index 48ac303..baf6004 100755
--- a/src/Components/Layout/Dashboard.jsx
+++ b/src/Components/Layout/Dashboard.jsx
@@ -8,9 +8,9 @@ import useSidebarResize from "../hooks/useSidebarResize";
 import TabContent from "../hooks/TabContent";
 import menuData from "../TreeChart/menuData.json";
 import SidebarMenuWrapper from "./SidebarMenuWrapper";
-import MetricTabContent from "./MetricTabContent"
+import MetricTabContent from "./MetricTabContent";
+import ProfileMenu from "../UI/ProfileMenu";
 
-// Стилизованные компоненты
 const DashboardContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   height: '100vh',
@@ -37,7 +37,7 @@ const Content = styled(Box)(({ theme }) => ({
   color: theme.palette.custom.modalText,
 }));
 
-const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
+const Dashboard = ({ isDarkMode, setIsDarkMode, user, onLogout }) => {
   const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
   const [tabContent, setTabContent] = useState({});
   const [treeData1, setTreeData1] = useState(menuData);
@@ -133,6 +133,19 @@ const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
 
   return (
     <DashboardContainer>
+
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 12,
+          right: 20,
+          zIndex: (theme) => theme.zIndex.tooltip + 10,
+          pointerEvents: 'auto'
+        }}
+      >
+        <ProfileMenu user={user} onLogout={onLogout} />
+      </Box>
+
       {/* Сайдбар */}
       <SidebarMenuWrapper
         isDarkMode={isDarkMode}
diff --git a/src/Components/UI/ProfileMenu.jsx b/src/Components/UI/ProfileMenu.jsx
new file mode 100644
index 0000000..689b451
--- /dev/null
+++ b/src/Components/UI/ProfileMenu.jsx
@@ -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;