diff --git a/src/App.tsx b/src/App.tsx
index 39679e5d88a6011ac4c39f9b7c0e66bf99a7497e..ec3b401d00671f1fdea68975124c303453bc4021 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,16 @@
-import React, { FC } from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+
+import React, { FC } from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-import { HomePage2 } from './components/AuthUser/HomePage2/HomePage2';
-import { ReservationPage } from './components/AuthUser/Reservation/ReservationPage';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { HomePage } from 'components/HomePage/HomePage';
+import { AuthUser } from 'components/AuthUser/AuthUser';
+import { LandingPage } from 'components/LandingPage/LandingPage';
+import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
+import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
+import { NotFound } from 'components/NotFound/NotFound';
+import { ProfilePage } from 'components/ProfilePage/ProfilePage';
+import { Roles } from 'components/api/userRoles';
+import { Unauthorized } from 'components/Unauthorized/Unauthorized';
const theme = createMuiTheme({
palette: {
@@ -32,16 +40,26 @@ const theme = createMuiTheme({
},
});
+
export const App: FC = () => (
<Router>
- <Switch>
- <Route path="/">
- <div data-testid="App">
- <ThemeProvider theme={theme}>
- <ReservationPage />
- </ThemeProvider>
- </div>
- </Route>
- </Switch>
+ <div data-testid="App">
+ <Switch>
+ <Route path={NonAuthRoutes.signIn} component={AuthUser} />
+ <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+ <PrivateRoute
+ path={AuthRoutes.dashboard}
+ Component={HomePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <PrivateRoute
+ path={AuthRoutes.profile}
+ Component={ProfilePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
+ <Route component={NotFound} />
+ </Switch>
+ </div>
</Router>
);
diff --git a/src/components/AuthUser/Profile/ProfilePage.tsx b/src/components/AuthUser/Profile/ProfilePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80195856ca7954a99b71e421fef388f42b18442b
--- /dev/null
+++ b/src/components/AuthUser/Profile/ProfilePage.tsx
@@ -0,0 +1,163 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ CssBaseline,
+ Grid,
+ Typography,
+ Hidden,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ Container,
+} from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+
+import { NavBar } from '../HomePage2/NavBar';
+import { Steps } from '../HomePage2/Steps';
+import { Numbers } from '../HomePage2/Numbers';
+import { Reservation } from '../HomePage2/Reservation';
+
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
+const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '36vh',
+ backgroundImage: `url(${'/assets/bg7.png'})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'cover',
+ },
+ rightAlign: {
+ marginLeft: 'auto',
+ },
+ whiteText: {
+ color: 'white',
+ },
+ imageIcon: {
+ maxHeight: '50%',
+ },
+ paddingBottom: {
+ paddingBottom: '65px',
+ },
+ paddingTop: {
+ paddingTop: '65px',
+ },
+ bodyIcon: {
+ fontSize: '90px',
+ paddingBottom: '10px',
+ paddingTop: '10px',
+ },
+ contIcon: {
+ width: '100%',
+ left: '0',
+ right: '0',
+ },
+ noShadow: {
+ border: 'none',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
+ },
+ extendedIcon: {
+ fontSize: '50px',
+ },
+ fab: {
+ margin: '10px 90px 80px 10px',
+ bottom: '0',
+ right: '0',
+ position: 'fixed',
+ padding: '45px',
+ },
+}));
+
+export const ReservationPage: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <CssBaseline />
+
+ <Grid item>
+ <NavBar />
+ </Grid>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
+
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
+ </div>
+
+ <Fab
+ color="primary"
+ size="large"
+ aria-label="add"
+ className={classes.fab}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservations</Typography>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation />
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
+
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation />
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
+
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation />
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3" align="right">
+ Your Past Reservations
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation />
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
+ </Grid>
+ );
+};
diff --git a/src/components/AuthUser/Reservation/ReservationPage.tsx b/src/components/AuthUser/Reservation/ReservationPage.tsx
index 174881d6f944049c2a4bb5ef6591ec1e09e438bf..b21e58171b52d4641ee48bcb6772d6a5dae4e4f1 100644
--- a/src/components/AuthUser/Reservation/ReservationPage.tsx
+++ b/src/components/AuthUser/Reservation/ReservationPage.tsx
@@ -9,11 +9,19 @@ import {
responsiveFontSizes,
MuiThemeProvider,
Container,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle ,
+ TextField,
+ Button
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
import { NavBar } from '../HomePage2/NavBar';
+import { NavBarLogin } from '../HomePage2/NavBarLogin';
import { Steps } from '../HomePage2/Steps';
import { Numbers } from '../HomePage2/Numbers';
import { Reservation } from '../HomePage2/Reservation';
@@ -68,11 +76,28 @@ const useStyles = makeStyles(() => ({
position: 'fixed',
padding: '45px',
},
+ fabSmall: {
+ margin: '10px 45px 70px 10px',
+ bottom: '0',
+ right: '0',
+ position: 'fixed',
+ padding: '35px',
+ },
}));
export const ReservationPage: FC = () => {
const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleClickOpen = (): void => {
+ setOpen(true);
+ };
+
+ const handleClose = (): void => {
+ setOpen(false);
+ };
+
return (
<Grid container direction="column" className={classes.paddingBottom}>
<div className={classes.root}>
@@ -82,6 +107,59 @@ export const ReservationPage: FC = () => {
<NavBar />
</Grid>
+
+ <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+ <DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ Write here below the details of your next reservation
+ </DialogContentText>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Name Reservation"
+ type="text"
+ fullWidth
+ />
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Date"
+ type="date"
+ fullWidth
+ InputLabelProps={{ shrink: true }}
+ />
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Department Time"
+ type="time"
+ fullWidth
+ InputLabelProps={{ shrink: true }}
+ />
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Destination"
+ type="text"
+ fullWidth
+ />
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose} color="primary">
+ Cancel
+ </Button>
+ <Button onClick={handleClose} color="primary" variant="contained">
+ Subscribe
+ </Button>
+ </DialogActions>
+ </Dialog>
+
+
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
@@ -100,14 +178,28 @@ export const ReservationPage: FC = () => {
</MuiThemeProvider>
</div>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fab}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
+ <Hidden mdDown>
+ <Fab
+ color="primary"
+ size="large"
+ aria-label="add"
+ className={classes.fab}
+ onClick={handleClickOpen}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+ </Hidden>
+
+ <Hidden lgUp>
+ <Fab
+ color="primary"
+ size="small"
+ aria-label="add"
+ className={classes.fabSmall}
+ >
+ <AddIcon />
+ </Fab>
+ </Hidden>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />