From be2da0a331420b58b55c4287e52cb3f124601a5d Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Wed, 19 May 2021 15:47:44 +0200
Subject: [PATCH] Move dashboard components to dedicated folder.
---
.../AuthUser/Dashboard/Dashboard.tsx | 14 +
.../AuthUser/Dashboard/HomePage/HomePage.tsx | 104 +++++++
.../Dashboard/HomePage/MapElement.tsx | 122 +++++++++
.../AuthUser/Dashboard/HomePage/NavBar.tsx | 69 +++++
.../Dashboard/HomePage/NavBarLogin.tsx | 56 ++++
.../AuthUser/Dashboard/HomePage/Numbers.tsx | 137 ++++++++++
.../AuthUser/Dashboard/HomePage/Steps.tsx | 132 +++++++++
.../Dashboard/ProfilePage/ProfilePage.md | 5 +
.../ProfilePage/ProfilePage.test.tsx | 10 +
.../Dashboard/ProfilePage/ProfilePage.tsx | 23 ++
.../Reservation/Reservation.tsx | 60 ++++
.../ReservationPage/ReservationPage.test.tsx | 10 +
.../ReservationPage/ReservationPage.tsx | 257 ++++++++++++++++++
13 files changed, 999 insertions(+)
create mode 100644 src/components/AuthUser/Dashboard/Dashboard.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/MapElement.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/NavBarLogin.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/Numbers.tsx
create mode 100644 src/components/AuthUser/Dashboard/HomePage/Steps.tsx
create mode 100644 src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.md
create mode 100644 src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.test.tsx
create mode 100644 src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.tsx
create mode 100644 src/components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation.tsx
create mode 100644 src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.test.tsx
create mode 100644 src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.tsx
diff --git a/src/components/AuthUser/Dashboard/Dashboard.tsx b/src/components/AuthUser/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..6f3b00a
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/Dashboard.tsx
@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import Container from '@material-ui/core/Container';
+import { Route, useRouteMatch } from 'react-router-dom';
+import { NonAuthRoutes } from 'api/routes';
+import { HomePage } from './HomePage/HomePage';
+
+export const Dashboard: FC = () => {
+ const { path } = useRouteMatch();
+ return (
+ <Container maxWidth="sm">
+ <Route path={`${path}/home`} component={HomePage} />
+ </Container>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
new file mode 100644
index 0000000..99b3448
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
@@ -0,0 +1,104 @@
+import React, { FC } from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerContainer: {
+ overflow: 'auto',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export const HomePage: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <CssBaseline />
+ <AppBar position="fixed" className={classes.appBar}>
+ <Toolbar>
+ <Typography variant="h6" noWrap>
+ Moveaid
+ </Typography>
+ </Toolbar>
+ </AppBar>
+ <Drawer
+ className={classes.drawer}
+ variant="permanent"
+ classes={{
+ paper: classes.drawerPaper,
+ }}
+ >
+ <Toolbar />
+ <div className={classes.drawerContainer}>
+ <List>
+ {['Reservation'].map((text) => (
+ <ListItem button key={text}>
+ <ListItemText primary={text} />
+ </ListItem>
+ ))}
+ </List>
+ </div>
+ </Drawer>
+ <main className={classes.content}>
+ <Toolbar />
+ <Typography paragraph>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
+ dolor purus non enim praesent elementum facilisis leo vel. Risus at
+ ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
+ quisque non tellus. Convallis convallis tellus id interdum velit
+ laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
+ adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
+ integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
+ eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
+ quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
+ vivamus at augue. At augue eget arcu dictum varius duis at consectetur
+ lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
+ faucibus et molestie ac.
+ </Typography>
+ <Typography paragraph>
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
+ ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
+ elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
+ sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
+ mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
+ risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
+ purus viverra accumsan in. In hendrerit gravida rutrum quisque non
+ tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
+ morbi tristique senectus et. Adipiscing elit duis tristique
+ sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+ eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+ posuere sollicitudin aliquam ultrices sagittis orci a.
+ </Typography>
+ </main>
+ </div>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/HomePage/MapElement.tsx b/src/components/AuthUser/Dashboard/HomePage/MapElement.tsx
new file mode 100644
index 0000000..89f7d3c
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/MapElement.tsx
@@ -0,0 +1,122 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+
+export const MapElement: React.FC = (props: React.SVGProps<SVGSVGElement>) => (
+ <svg
+ data-name="Layer 1"
+ xmlns="http://www.w3.org/2000/svg"
+ width={425}
+ height={364.74}
+ viewBox="0 0 923.8 753.71"
+ {...props}
+ >
+ <title>map</title>
+ <ellipse
+ cx={1007.29}
+ cy={789.73}
+ rx={19.99}
+ ry={48.53}
+ transform="rotate(-45 849.945 919.851)"
+ fill="#fff"
+ opacity={0.1}
+ />
+ <ellipse cx={872.63} cy={705.7} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={688.53} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={671.36} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={654.19} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={637.02} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={619.85} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={872.63} cy={602.68} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <path
+ d="M912.8 485.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74a51.41 51.41 0 10-84.9 57.53 51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
+ fill="#fff"
+ />
+ <path
+ d="M821 516.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0c6.89-8.74-91.8-37.55-91.8-31.78z"
+ opacity={0.1}
+ />
+ <path
+ fill="#444053"
+ d="M846.97 0v720l-244-34-296.61 60.51-2.39.49-236-65V56l245-56 268 56 10.19-2.15L846.97 0z"
+ />
+ <path
+ fill="#fff"
+ d="M805.97 39.32v644.21l-218.31-30.42-265.39 54.14-2.14.43-211.16-58.15V89.42l219.22-50.1 239.78 50.1 9.12-1.92 228.88-48.18z"
+ />
+ <path
+ opacity={0.1}
+ d="M602.97 686l-296.61 60.51L312.97 0l268 56 10.19-2.15L602.97 686z"
+ />
+ <g
+ opacity={0.3}
+ fill="none"
+ stroke="#444053"
+ strokeMiterlimit={10}
+ strokeWidth={3}
+ >
+ <path d="M573.35 138l.12 209.5h87v-86h149l17.5-22.44M88.97 204.5h323.5l20-9h8v202h140l6 18v91h108V619M483.2 619V397.5M826.97 559.66H483.2M740.87 138v481M87.97 517.14h739M177.91 619V138M349.69 138v481M88.97 259.5l571.5 2M255.3 138.87V619" />
+ <path d="M87.97 370.82h261.72L483.2 517.14M512.12 138v259.5M483.2 443.98h343.77" />
+ </g>
+ <path fill="#fff" d="M585.97 442h-101v-44l95.5-.5 6 17-.5 27.5z" />
+ <path
+ d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+ fill="#fff"
+ />
+ <path
+ d="M535.97 214a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 214zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+ opacity={0.1}
+ />
+ <path
+ d="M535.97 222a55.28 55.28 0 00-55.28 55.28c0 30.53 55.28 129.72 55.28 129.72s55.28-99.15 55.28-129.72A55.28 55.28 0 00535.97 222zm0 78.86a24.32 24.32 0 1124.32-24.32 24.32 24.32 0 01-24.32 24.31z"
+ fill="#fff"
+ />
+ <ellipse
+ cx={649.86}
+ cy={806.61}
+ rx={33.45}
+ ry={13.78}
+ transform="rotate(-23.3 403.328 1104.861)"
+ fill="#fff"
+ opacity={0.1}
+ />
+ <ellipse cx={511.39} cy={727.97} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={716.13} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={704.3} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={692.47} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={680.63} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={668.8} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <ellipse cx={511.39} cy={656.97} rx={7.4} ry={9.68} fill="#3f3d56" />
+ <path
+ d="M483.7 575.98a36.12 36.12 0 01-2.76-4l19.44-3.2-21 .16a35.54 35.54 0 01-.68-28.07l28.2 14.58-26-19.12a35.43 35.43 0 1158.51 39.65 35.55 35.55 0 014 6.46l-25.21 13.11 26.9-9a35.45 35.45 0 01-5.71 33.27 35.43 35.43 0 11-55.69 0 35.44 35.44 0 010-43.81z"
+ fill="#fff"
+ />
+ <path
+ d="M546.97 597.85a35.28 35.28 0 01-7.58 21.91 35.43 35.43 0 11-55.69 0c-4.75-6 63.27-25.85 63.27-21.91z"
+ opacity={0.1}
+ />
+ <ellipse
+ cx={186.29}
+ cy={767.73}
+ rx={19.99}
+ ry={48.53}
+ transform="rotate(-45 28.942 897.852)"
+ fill="#fff"
+ opacity={0.1}
+ />
+ <ellipse cx={51.63} cy={683.7} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={666.53} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={649.36} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={632.19} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={615.02} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={597.85} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <ellipse cx={51.63} cy={580.68} rx={10.73} ry={14.05} fill="#3f3d56" />
+ <path
+ d="M91.8 463.18a51.13 51.13 0 004-5.88l-28.2-4.63 30.5.22a51.54 51.54 0 001-40.73l-40.91 21.23 37.71-27.74A51.41 51.41 0 1011 463.18a51.16 51.16 0 00-5.86 9.37l36.6 19-39-13.1a51.45 51.45 0 008.29 48.27 51.4 51.4 0 1080.8 0 51.41 51.41 0 000-63.56z"
+ fill="#fff"
+ />
+ <path
+ d="M0 494.96a51.16 51.16 0 0011 31.78 51.4 51.4 0 1080.8 0C98.69 518 0 489.19 0 494.96z"
+ opacity={0.1}
+ />
+ </svg>
+);
diff --git a/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx b/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
new file mode 100644
index 0000000..3d61c75
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs, Tab } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+
+const useStyles = makeStyles(() => ({
+ tabs: {
+ color: 'white',
+ paddingLeft: '25px',
+ paddingRight: '25px',
+ paddingTop: '8px',
+ paddingBottom: '35px',
+ width: '100%',
+ flexWrap: 'wrap',
+ },
+ tabPan: {
+ paddingLeft: '56px',
+ paddingRight: '56px',
+ },
+ tabIcon: {
+ paddingRight: '10px',
+ fontSize: '38px',
+ },
+ rightAlign: {
+ marginLeft: 'auto',
+ },
+}));
+
+export const NavBar: FC = () => {
+ const classes = useStyles();
+
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (
+ event: React.ChangeEvent<unknown>,
+ newValue: number,
+ ): void => {
+ setValue(newValue);
+ };
+
+ return (
+ <Tabs
+ variant="scrollable"
+ scrollButtons="on"
+ onChange={handleChange}
+ value={value}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab
+ label="HomePage"
+ icon={<HomeIcon className={classes.tabIcon} />}
+ className={classes.tabPan}
+ />
+ <Tab
+ label="Reservation"
+ icon={<ImportContactsIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ />
+ <Tab
+ label="Profile"
+ className={classes.tabPan}
+ icon={<AccountCircleIcon className={classes.tabIcon} />}
+ />
+ </Tabs>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/HomePage/NavBarLogin.tsx b/src/components/AuthUser/Dashboard/HomePage/NavBarLogin.tsx
new file mode 100644
index 0000000..92d0045
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/NavBarLogin.tsx
@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs, Tab } from '@material-ui/core';
+import LockIcon from '@material-ui/icons/Lock';
+
+const useStyles = makeStyles(() => ({
+ tabs: {
+ color: 'white',
+ paddingLeft: '25px',
+ paddingRight: '25px',
+ paddingTop: '8px',
+ paddingBottom: '35px',
+ },
+ tabPan: {
+ paddingLeft: '56px',
+ paddingRight: '56px',
+ },
+ tabIcon: {
+ paddingRight: '10px',
+ fontSize: '38px',
+ },
+ rightAlign: {
+ marginLeft: 'auto',
+ backgroundColor: '#FFFFFF',
+ },
+}));
+
+export const NavBarLogin: FC = () => {
+ const classes = useStyles();
+
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (
+ event: React.ChangeEvent<unknown>,
+ newValue: number,
+ ): void => {
+ setValue(newValue);
+ };
+
+ return (
+ <Tabs
+ textColor="primary"
+ onChange={handleChange}
+ value={value}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab label="" className={classes.tabPan} />
+ <Tab
+ label="Login"
+ icon={<LockIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ />
+ </Tabs>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/HomePage/Numbers.tsx b/src/components/AuthUser/Dashboard/HomePage/Numbers.tsx
new file mode 100644
index 0000000..20f38c8
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/Numbers.tsx
@@ -0,0 +1,137 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
+import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
+import LocationCityIcon from '@material-ui/icons/LocationCity';
+import PeopleIcon from '@material-ui/icons/People';
+
+const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '100vh',
+ backgroundImage: `url(${'/assets/bg3.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',
+ },
+}));
+
+export const Numbers: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
+ <CardContent>
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <LocalTaxiIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h4" align="center">
+ 300
+ </Typography>
+
+ <Typography variant="h6" align="center">
+ Rides Offered
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={2} lg={1} />
+
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
+ <CardContent>
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <LocationCityIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h4" align="center">
+ 25000
+ </Typography>
+
+ <Typography variant="h6" align="center">
+ Kilometers
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={1} />
+
+ <Hidden lgUp>
+ <Grid item xs={4} />
+ </Hidden>
+
+ <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
+ <CardContent>
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <PeopleIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h4" align="center">
+ 225
+ </Typography>
+
+ <Typography variant="h6" align="center">
+ People who used our service
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={4} lg={2} />
+ </Grid>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/HomePage/Steps.tsx b/src/components/AuthUser/Dashboard/HomePage/Steps.tsx
new file mode 100644
index 0000000..2452c59
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/HomePage/Steps.tsx
@@ -0,0 +1,132 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+import RoomIcon from '@material-ui/icons/Room';
+
+const useStyles = makeStyles(() => ({
+ bodyIcon: {
+ fontSize: '90px',
+ paddingBottom: '10px',
+ paddingTop: '10px',
+ },
+ paddingBot: {
+ paddingBottom: '40px',
+ },
+ noShadow: {
+ border: 'none',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
+ },
+}));
+
+export const Steps: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <Grid item container alignItems="stretch">
+ <Grid item xs={1} lg={2} />
+
+ <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
+ <CardContent>
+ <Typography variant="h4" align="center">
+ STEP 1
+ </Typography>
+
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <VpnKeyIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h6">
+ Log In or Register an account on the site. Fill all the fields
+ related to your personal information.
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={1} />
+
+ <Hidden lgUp>
+ <Grid
+ item
+ xs={12}
+ component={Card}
+ className={`${classes.paddingBot} ${classes.noShadow}`}
+ />
+ <Grid item xs={1} />
+ </Hidden>
+
+ <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
+ <CardContent>
+ <Typography variant="h4" align="center">
+ STEP 2
+ </Typography>
+
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <BookmarkIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h6">
+ Book in the reservation section a free ride at least 48h than your
+ appointment
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={1} />
+ <Hidden lgUp>
+ <Grid
+ item
+ xs={12}
+ component={Card}
+ className={`${classes.paddingBot} ${classes.noShadow}`}
+ />
+ <Grid item xs={1} />
+ </Hidden>
+
+ <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
+ <CardContent>
+ <Typography variant="h4" align="center">
+ STEP 3
+ </Typography>
+
+ <Grid
+ container
+ spacing={0}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ >
+ <Grid item xs={12}>
+ <RoomIcon color="primary" className={classes.bodyIcon} />
+ </Grid>
+ </Grid>
+
+ <Typography variant="h6">
+ Wait your free drive compfortably at home and reach the place you
+ have booked in the reservation easily!
+ </Typography>
+ </CardContent>
+ </Grid>
+
+ <Grid item xs={1} lg={2} />
+ </Grid>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.md b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.md
new file mode 100644
index 0000000..d696537
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.md
@@ -0,0 +1,5 @@
+Profile page for all type of users
+
+```js
+<ProfilePage />
+```
\ No newline at end of file
diff --git a/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.test.tsx b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.test.tsx
new file mode 100644
index 0000000..8b51893
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ProfilePage } from './ProfilePage';
+
+describe('<ProfilePage />', () => {
+ it('renders without crashing', () => {
+ const wrapper = render(<ProfilePage />);
+ expect(wrapper.queryByTestId('ProfilePage')).toBeTruthy();
+ });
+});
diff --git a/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.tsx
new file mode 100644
index 0000000..bf86148
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import Button from '@material-ui/core/Button';
+import axios from 'axios';
+import { NonAuthRoutes } from 'api/routes';
+import { useHistory } from 'react-router-dom';
+
+export const ProfilePage: FC = () => {
+ const history = useHistory();
+
+ const logout = (): void => {
+ axios
+ .post('/api/web/login/logout')
+ .then(() => history.replace(NonAuthRoutes.home));
+ };
+
+ return (
+ <div data-testid="ProfilePage">
+ <Button variant="outlined" color="default" onClick={logout}>
+ Logout
+ </Button>
+ </div>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation.tsx b/src/components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation.tsx
new file mode 100644
index 0000000..7bdcd17
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+} from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+ noShadow: {
+ border: 'none',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
+ },
+}));
+
+function createData(
+ name: string,
+ value: string,
+): { name: string; value: string } {
+ return { name, value };
+}
+
+const rows = [
+ createData('From:', 'Via Di Quel Bozen, 45, 39037'),
+ createData('Date:', '29 / 07 / 2021'),
+ createData('Time:', '12:15'),
+ createData('To:', 'Via del Krankenhaus, 7, 39037'),
+];
+
+export const Reservation: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <TableContainer component={Paper}>
+ <Table aria-label="simple table">
+ <TableHead>
+ <TableRow>
+ <TableCell>DriveToHospital </TableCell>
+ </TableRow>
+ </TableHead>
+
+ <TableBody>
+ {rows.map((row) => (
+ <TableRow key={row.name}>
+ <TableCell component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell align="right">{row.value}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
+};
diff --git a/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.test.tsx b/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.test.tsx
new file mode 100644
index 0000000..628b7b5
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ReservationPage } from './ReservationPage';
+
+describe('<ReservationPage />', () => {
+ it('renders without crashing', () => {
+ const wrapper = render(<ReservationPage />);
+ expect(wrapper.queryByTestId('Reservation')).toBeTruthy();
+ });
+});
diff --git a/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.tsx
new file mode 100644
index 0000000..9e176c0
--- /dev/null
+++ b/src/components/AuthUser/Dashboard/ReservationPage/ReservationPage.tsx
@@ -0,0 +1,257 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ CssBaseline,
+ Grid,
+ Typography,
+ Hidden,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ 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 { Reservation } from 'components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation';
+import { NavBar } from '../HomePage/NavBar';
+
+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',
+ },
+ 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 (
+ <div data-testid="Reservation">
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <CssBaseline />
+
+ <Grid item>
+ <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} />
+
+ <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>
+
+ <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} />
+ <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>
+ </div>
+ );
+};
--
GitLab