PNSPS-frontend-MaterialUI/src/pages/dashboard/GLD/index.js

// import { useState } from 'react';

// material-ui
import {
  Grid,
  Typography,
  Stack
} from '@mui/material';
import * as React from "react";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const DashboardDefault = () => {
  const userData = JSON.parse(localStorage.getItem("userData"));
  
  React.useEffect(() => {
    localStorage.setItem('searchCriteria',"")
  }, [])
  
  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize:'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
  }
  const getWelcomeMsg=()=>{
    var current = new Date()
    var curHr = current.getHours()

    if (curHr < 12) {
      return "Good Morning"
    } else if (curHr < 18) {
      return "Good Afternoon"
    } else {
      //evening
      return "Good Evening"
    }
  }
  return (
    <Grid container sx={{minHeight: '87vh', backgroundColor: "backgroundColor.default"}} 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" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
              {getWelcomeMsg()}, {userData.fullenName}
            </Typography>
          </Stack>
        </div>
      </Grid>
    </Grid>
  );
};

export default DashboardDefault;