Fix Name & User Avatar

frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx

@@ -1,6 +1,7 @@
 // @mui
 import { styled } from '@mui/material/styles';
 import { Box, Link, Typography, Avatar } from '@mui/material';
+import useAuth from '../../../hooks/useAuth';
 
 // ----------------------------------------------------------------------
 
@@ -22,6 +23,10 @@ type Props = {
 };
 
 export default function NavbarAccount({ isCollapse }: Props) {
+  
+  const { user } = useAuth();
+
+  console.log('current user is ', user)
   return (
     <Link underline="none" color="inherit">
       <RootStyle
@@ -31,10 +36,10 @@ export default function NavbarAccount({ isCollapse }: Props) {
           }),
         }}
       >
-        <Avatar
-          src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
-          alt="Rayan Moran"
-        />
+        {user && user.user.avatar_url && (<Avatar
+          src={user ? user.user.avatar_url : ''}
+          alt={user ? user.user.full_name : ''}
+        />)}
 
         <Box
           sx={{
@@ -50,10 +55,10 @@ export default function NavbarAccount({ isCollapse }: Props) {
           }}
         >
           <Typography variant="subtitle2" noWrap>
-            Rayan Moran
+            { user ? user.user.full_name ?? 'Hi, ' : 'Hi, '}
           </Typography>
-          <Typography variant="body2" noWrap sx={{ color: 'text.secondary' }}>
-            user
+          <Typography variant="body2" noWrap sx={{ color: 'text.secondary', fontSize: '11px' }}>
+            { user ? user.user.email : 'Please Wait'}
           </Typography>
         </Box>
       </RootStyle>