add dashboard for gld user and public user

src/layout/MainLayout/index.js

@@ -5,19 +5,24 @@ import { useDispatch, useSelector } from 'react-redux';
 // material-ui
 import { useTheme } from '@mui/material/styles';
 import { Box, useMediaQuery } from '@mui/material';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
 // import { Toolbar, useMediaQuery } from '@mui/material';
 
 // project import
 // import Drawer from './Drawer';
-import Header from './Header';
-import Footer from 'components/cards/AuthFooter';
+// import Header from './Header';
+const Header = Loadable(lazy(() => import('./Header')));
+const Footer = Loadable(lazy(() => import('components/cards/AuthFooter')));
+
+// import Footer from 'components/cards/AuthFooter';
 
 // import navigation from 'menu-items';
 // import Breadcrumbs from 'components/@extended/Breadcrumbs';
 
 // types
 import { openDrawer } from 'store/reducers/menu';
-import "assets/style/styles.css";
+// import "assets/style/styles.css";
 
 
 // ==============================|| MAIN LAYOUT ||============================== //

src/pages/authentication/AuthWrapper.js

@@ -25,7 +25,7 @@ const BackgroundHead = {
 // ==============================|| AUTHENTICATION - WRAPPER ||============================== //
 
 const AuthWrapper = ({ children }) => (
-  <Box sx={{ minHeight: '80vh' }}>
+  <Box sx={{ minHeight: '90vh' }}>
     {/* <AuthBackground /> */}
     {/* <img src={banner} alt="banner" width="100%" /> */}
     <div style={BackgroundHead}>
@@ -35,7 +35,7 @@ const AuthWrapper = ({ children }) => (
         justifyContent="space-between"
         alignItems="center"
         sx={{
-          minHeight: '80vh'
+          minHeight: '90vh'
         }}
       >
         <Grid item xs={12}>
@@ -56,7 +56,7 @@ const AuthWrapper = ({ children }) => (
               container
               justifyContent="right"
               alignItems="center"
-              sx={{ minHeight: { xs: 'calc(80vh - 134px)', md: 'calc(80vh - 112px)' } }}
+              sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' } }}
             >
               <Grid item>
                 <AuthCard>{children}</AuthCard>

src/pages/authentication/AuthWrapperCustom.js

@@ -24,7 +24,7 @@ const AuthWrapperCustom = ({ children }) => (
       justifyContent="center"
       alignItems="flex-start"
       sx={{
-        minHeight: '60vh'
+        minHeight: '90vh',
       }}
     >
       {/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
@@ -37,7 +37,7 @@ const AuthWrapperCustom = ({ children }) => (
           container
           justifyContent="center"
           alignItems="flex-start"
-          sx={{ minHeight: { xs: 'calc(60vh - 134px)', md: 'calc(60vh - 112px)' }}}
+          sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' }}}
         >   
           <Grid item>
             <AuthCard>{children}</AuthCard>

src/pages/authentication/BusRegister.js

@@ -97,7 +97,7 @@
 
     return(
       // <AuthWrapper>
-      <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
+      <Stack sx={{ width: '100%',fontSize: '2rem',paddingTop: '65px'}} alignItems="center">
         <Stepper activeStep={activeStep} sx={stepStyle}>
           {steps.map((label, index) => (
             <Step key={label} completed={completed[index]} readOnly={true}>
@@ -136,7 +136,7 @@
               <CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} />
               {/* <CustomFormWizard step={activeStep} /> */}
             </AuthWrapper>
-            <Stack direction="row" sx={{ pt: 2 }}>
+            <Stack direction="row" sx={{ pb: 2 }}>
               { activeStep === totalSteps() - 1 ? (
                 <Button
                   color="inherit"

src/pages/authentication/Register.js

@@ -102,7 +102,7 @@ const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 
     return(
       // <AuthWrapper>
-      <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
+      <Stack sx={{ width: '100%',fontSize: '2rem',paddingTop: '65px'}} alignItems="center">
         <Stepper activeStep={activeStep} sx={stepStyle}>
           {steps.map((label, index) => (
             <Step key={label} completed={completed[index]} readOnly={true}>

src/pages/gldDashboard/index.js

@@ -2,28 +2,10 @@
 
 // material-ui
 import {
-  // Avatar,
-  // AvatarGroup,
-  // Box,
-  // Button,
   Grid,
-  // List,
-  // ListItemAvatar,
-  // ListItemButton,
-  // ListItemSecondaryAction,
-  // ListItemText,
-  // MenuItem,
-  // Stack,
-  // TextField,
-  Typography
+  Typography,
+  Stack
 } from '@mui/material';
-import { Stack } from '../../../node_modules/@mui/material/index';
-
-// project import
-// import Loadable from 'components/Loadable';
-// import { lazy } from 'react';
-// import backbroundImg from 'assets/images/bg_ml.jpg'
-
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -36,15 +18,14 @@ const DashboardDefault = () => {
     backgroundSize:'cover'
   }
   return (
-    <Grid container sx={{minHeight: '85vh'}}>
+    <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
       <div style={BackgroundHead}>
-        <Grid item xs={12} ml={2} height='60px'>
-          <Stack direction="row" justifyContent="flex-start" alignItems="center">
-            <Typography color='#FFF'variant="h4">Moring, {userData.fullenName}</Typography>
+        <Grid item xs={12} height='60px'>
+          <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
+            <Typography ml={10} color='#FFF' variant="h4">Morning, {userData.fullenName}</Typography>
           </Stack>
         </Grid>
       </div>
-      
     </Grid>
   );
 };

src/pages/publicDashboard/index.js

@@ -2,37 +2,33 @@
 
 // material-ui
 import {
-  // Avatar,
-  // AvatarGroup,
-  // Box,
-  // Button,
   Grid,
-  // List,
-  // ListItemAvatar,
-  // ListItemButton,
-  // ListItemSecondaryAction,
-  // ListItemText,
-  // MenuItem,
-  // Stack,
-  // TextField,
-  Typography
+  Typography,
+  Stack
 } from '@mui/material';
 
-// project import
-// import Loadable from 'components/Loadable';
-// import { lazy } from 'react';
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
-
+  const userData = JSON.parse(localStorage.getItem("userData"));
+  const BackgroundHead = {
+    backgroundColor: '#0d47a1',
+    width: '100%',
+    height: '100%',
+    backgroundSize:'cover'
+  }
   return (
-    <Grid container rowSpacing={4.5} columnSpacing={2.75} sx={{minHeight: '80vh'}}>
-      <Grid item xs={12} ml={2} mt={1}>
-        <Typography variant="h5">我的公共啟事</Typography>
-      </Grid>
-      
+    <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
+      <div style={BackgroundHead}>
+        <Grid item xs={12} height='60px'>
+          <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
+            {/* <Typography variant="h5">我的公共啟事</Typography> */}
+            <Typography ml={10} color='#FFF' variant="h4">{userData.fullchName}, 午安! 請選擇所需服務。</Typography>
+          </Stack>
+        </Grid>
+      </div>
     </Grid>
   );
 };

src/routes/GLDUserRoutes.js

@@ -2,7 +2,8 @@ import { lazy } from 'react';
 
 // project import
 import Loadable from 'components/Loadable';
-import MainLayout from 'layout/MainLayout';
+// import MainLayout from 'layout/MainLayout';
+const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));

src/routes/PublicUserRoutes.js

@@ -2,7 +2,8 @@ import { lazy } from 'react';
 
 // project import
 import Loadable from 'components/Loadable';
-import MainLayout from 'layout/MainLayout';
+// import MainLayout from 'layout/MainLayout';
+const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard')));