end fase 2

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Container,
   Typography,
@@ -5,26 +6,30 @@ import {
   Button,
   IconButton,
   Tooltip,
+  Chip,
+  Avatar,
+  Tabs,
+  Tab,
 } from '@mui/material';
-import { Add, Logout } from '@mui/icons-material';
+import { Add, Logout, Person, Lightbulb, Group } from '@mui/icons-material';
 import { IdeasTable } from './components/IdeasTable';
 import { IdeasFilters } from './components/IdeasFilters';
 import { CreateIdeaModal } from './components/CreateIdeaModal';
+import { TeamPage } from './components/TeamPage';
 import { useIdeasStore } from './store/ideas';
-import keycloak from './services/keycloak';
+import { useAuth } from './hooks/useAuth';
 
 function App() {
   const { setCreateModalOpen } = useIdeasStore();
-
-  const handleLogout = () => {
-    void keycloak.logout();
-  };
+  const { user, logout } = useAuth();
+  const [tab, setTab] = useState(0);
 
   return (
     <Container maxWidth="xl" sx={{ py: 4 }}>
+      {/* Header */}
       <Box
         sx={{
-          mb: 4,
+          mb: 3,
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
@@ -39,28 +44,50 @@ function App() {
           </Typography>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Button
-            variant="contained"
-            startIcon={<Add />}
-            onClick={() => setCreateModalOpen(true)}
-          >
-            Новая идея
-          </Button>
+          <Chip
+            avatar={
+              <Avatar sx={{ bgcolor: 'primary.main' }}>
+                <Person sx={{ fontSize: 16 }} />
+              </Avatar>
+            }
+            label={user?.name ?? 'Пользователь'}
+            variant="outlined"
+          />
           <Tooltip title="Выйти">
-            <IconButton onClick={handleLogout} color="default">
+            <IconButton onClick={logout} color="default" size="small">
               <Logout />
             </IconButton>
           </Tooltip>
         </Box>
       </Box>
 
-      <Box sx={{ mb: 3 }}>
-        <IdeasFilters />
+      {/* Tabs */}
+      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
+        <Tabs value={tab} onChange={(_, v) => setTab(v)}>
+          <Tab icon={<Lightbulb />} iconPosition="start" label="Идеи" />
+          <Tab icon={<Group />} iconPosition="start" label="Команда" />
+        </Tabs>
       </Box>
 
-      <IdeasTable />
+      {/* Content */}
+      {tab === 0 && (
+        <>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+            <IdeasFilters />
+            <Button
+              variant="contained"
+              startIcon={<Add />}
+              onClick={() => setCreateModalOpen(true)}
+            >
+              Новая идея
+            </Button>
+          </Box>
+          <IdeasTable />
+          <CreateIdeaModal />
+        </>
+      )}
 
-      <CreateIdeaModal />
+      {tab === 1 && <TeamPage />}
     </Container>
   );
 }