PNSPS-frontend-MaterialUI/src/pages/gldDashboard/index.js

// import { useState } from 'react';

// material-ui
import {
  Grid,
  Typography,
  Stack
} from '@mui/material';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const DashboardDefault = () => {
  const userData = JSON.parse(localStorage.getItem("userData"));
  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize:'cover'
  }
  return (
    <Grid container sx={{minHeight: '90vh'}} direction="column">
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
            <Typography ml={15} color='#FFF' variant="h4">Morning, {userData.fullenName}</Typography>
          </Stack>
        </div>
      </Grid>
    </Grid>
  );
};

export default DashboardDefault;