Updated UI with accounts and fixed routing

ui/src/components/Header/HeaderUser.tsx

@@ -1,6 +1,7 @@
 import { User } from '@/lib/account.types';
 // import { setPicture } from "@/api/users";
 import { Menu, UnstyledButton, Group, Avatar, Card, FileButton, Grid, Button, Text } from '@mantine/core';
+import { useNavigate } from 'react-router';
 // import './styles.css';
 
 interface HeaderUserProps {
@@ -10,6 +11,8 @@ interface HeaderUserProps {
 }
 
 export default function HeaderUser({ user, profilePicture, logout }: HeaderUserProps) {
+  const navigate = useNavigate();
+
   return (
     <Menu shadow='md' width={200} openDelay={100} closeDelay={400} zIndex={1000}>
       <Menu.Target>
@@ -66,7 +69,7 @@ export default function HeaderUser({ user, profilePicture, logout }: HeaderUserP
           </Text>
           <Grid mt='xl'>
             <Grid.Col span={6}>
-              <Button fullWidth radius='md' size='xs' variant='default'>
+              <Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/profile')}>
                 Profile
               </Button>
             </Grid.Col>
@@ -75,9 +78,9 @@ export default function HeaderUser({ user, profilePicture, logout }: HeaderUserP
                 Logout
               </Button>
             </Grid.Col>
-            {user.role == 'admin' && (
+            {user.role == 'ADMIN' && (
               <Grid.Col span={12}>
-                <Button fullWidth radius='md' size='xs' variant='default'>
+                <Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/administration')}>
                   Administration
                 </Button>
               </Grid.Col>