Fix Name & User Avatar

frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx

@@ -32,7 +32,7 @@ const MENU_OPTIONS = [
 export default function AccountPopover() {
   const [open, setOpen] = useState<HTMLElement | null>(null);
   const navigate = useNavigate();
-  const { logout } = useAuth();
+  const { logout, user } = useAuth();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget);
@@ -67,10 +67,10 @@ export default function AccountPopover() {
           }),
         }}
       >
-        <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 : ''}
+        />)}
       </IconButtonAnimate>
 
       <MenuPopover
@@ -89,16 +89,16 @@ export default function AccountPopover() {
       >
         <Box sx={{ my: 1.5, px: 2.5 }}>
           <Typography variant="subtitle2" noWrap>
-            Rayan Moran
+            { user ? user.user.full_name ?? 'Hi, ' : 'Hi, '}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            rayan.moran@gmail.com
+            { user ? user.user.email : 'Please Wait'}
           </Typography>
         </Box>
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <Stack sx={{ p: 1 }}>
+        {/* <Stack sx={{ p: 1 }}>
           {MENU_OPTIONS.map((option) => (
             <MenuItem key={option.label} onClick={handleClose}>
               {option.label}
@@ -106,7 +106,7 @@ export default function AccountPopover() {
           ))}
         </Stack>
 
-        <Divider sx={{ borderStyle: 'dashed' }} />
+        <Divider sx={{ borderStyle: 'dashed' }} /> */}
 
         <MenuItem sx={{ m: 1 }} onClick={handleLogout}>
           Logout

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>