diff --git a/src/components/Dashboard/Operator/Data.tsx b/src/components/Dashboard/Operator/Data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..798e7d60c3cf84833e65f5afef951c3646f76916
--- /dev/null
+++ b/src/components/Dashboard/Operator/Data.tsx
@@ -0,0 +1,283 @@
+export const appointments = [
+ {
+ title: 'Website Re-Design Plan',
+ startDate: new Date(2018, 5, 25, 9, 30),
+ endDate: new Date(2018, 5, 25, 11, 30),
+ id: 0,
+ location: 'Room 1',
+ },
+ {
+ title: 'Book Flights to San Fran for Sales Trip',
+ startDate: new Date(2018, 5, 25, 12, 0),
+ endDate: new Date(2018, 5, 25, 13, 0),
+ id: 1,
+ location: 'Room 1',
+ },
+ {
+ title: 'Install New Router in Dev Room',
+ startDate: new Date(2018, 5, 25, 14, 30),
+ endDate: new Date(2018, 5, 25, 15, 30),
+ id: 2,
+ location: 'Room 2',
+ },
+ {
+ title: 'Approve Personal Computer Upgrade Plan',
+ startDate: new Date(2018, 5, 26, 10, 0),
+ endDate: new Date(2018, 5, 26, 11, 0),
+ id: 3,
+ location: 'Room 2',
+ },
+ {
+ title: 'Final Budget Review',
+ startDate: new Date(2018, 5, 26, 12, 0),
+ endDate: new Date(2018, 5, 26, 13, 35),
+ id: 4,
+ location: 'Room 2',
+ },
+ {
+ title: 'New Brochures',
+ startDate: new Date(2018, 5, 26, 14, 30),
+ endDate: new Date(2018, 5, 26, 15, 45),
+ id: 5,
+ location: 'Room 2',
+ },
+ {
+ title: 'Install New Database',
+ startDate: new Date(2018, 5, 27, 9, 45),
+ endDate: new Date(2018, 5, 27, 11, 15),
+ id: 6,
+ location: 'Room 1',
+ },
+ {
+ title: 'Approve New Online Marketing Strategy',
+ startDate: new Date(2018, 5, 27, 12, 0),
+ endDate: new Date(2018, 5, 27, 14, 0),
+ id: 7,
+ location: 'Room 3',
+ },
+ {
+ title: 'Upgrade Personal Computers',
+ startDate: new Date(2018, 5, 27, 15, 15),
+ endDate: new Date(2018, 5, 27, 16, 30),
+ id: 8,
+ location: 'Room 3',
+ },
+ {
+ title: 'Customer Workshop',
+ startDate: new Date(2018, 5, 28, 11, 0),
+ endDate: new Date(2018, 5, 28, 12, 0),
+ id: 9,
+ location: 'Room 3',
+ },
+ {
+ title: 'Prepare 2015 Marketing Plan',
+ startDate: new Date(2018, 5, 28, 11, 0),
+ endDate: new Date(2018, 5, 28, 13, 30),
+ id: 10,
+ location: 'Room 1',
+ },
+ {
+ title: 'Brochure Design Review',
+ startDate: new Date(2018, 5, 28, 14, 0),
+ endDate: new Date(2018, 5, 28, 15, 30),
+ id: 11,
+ location: 'Room 2',
+ },
+ {
+ title: 'Create Icons for Website',
+ startDate: new Date(2018, 5, 29, 10, 0),
+ endDate: new Date(2018, 5, 29, 11, 30),
+ id: 12,
+ location: 'Room 2',
+ },
+ {
+ title: 'Upgrade Server Hardware',
+ startDate: new Date(2018, 5, 29, 14, 30),
+ endDate: new Date(2018, 5, 29, 16, 0),
+ id: 13,
+ location: 'Room 3',
+ },
+ {
+ title: 'Submit New Website Design',
+ startDate: new Date(2018, 5, 29, 16, 30),
+ endDate: new Date(2018, 5, 29, 18, 0),
+ id: 14,
+ location: 'Room 3',
+ },
+ {
+ title: 'Launch New Website',
+ startDate: new Date(2018, 5, 29, 12, 20),
+ endDate: new Date(2018, 5, 29, 14, 0),
+ id: 15,
+ location: 'Room 2',
+ },
+ {
+ title: 'Website Re-Design Plan',
+ startDate: new Date(2018, 6, 2, 9, 30),
+ endDate: new Date(2018, 6, 2, 15, 30),
+ id: 16,
+ location: 'Room 1',
+ },
+ {
+ title: 'Book Flights to San Fran for Sales Trip',
+ startDate: new Date(2018, 6, 2, 12, 0),
+ endDate: new Date(2018, 6, 2, 13, 0),
+ id: 17,
+ location: 'Room 3',
+ },
+ {
+ title: 'Install New Router in Dev Room',
+ startDate: new Date(2018, 6, 2, 14, 30),
+ endDate: new Date(2018, 6, 2, 17, 30),
+ id: 18,
+ location: 'Room 2',
+ },
+ {
+ title: 'Approve Personal Computer Upgrade Plan',
+ startDate: new Date(2018, 6, 2, 16, 0),
+ endDate: new Date(2018, 6, 3, 9, 0),
+ id: 19,
+ location: 'Room 2',
+ },
+ {
+ title: 'Final Budget Review',
+ startDate: new Date(2018, 6, 3, 10, 15),
+ endDate: new Date(2018, 6, 3, 13, 35),
+ id: 20,
+ location: 'Room 1',
+ },
+ {
+ title: 'New Brochures',
+ startDate: new Date(2018, 6, 3, 14, 30),
+ endDate: new Date(2018, 6, 3, 15, 45),
+ id: 21,
+ location: 'Room 3',
+ },
+ {
+ title: 'Install New Database',
+ startDate: new Date(2018, 6, 3, 15, 45),
+ endDate: new Date(2018, 6, 4, 12, 15),
+ id: 22,
+ location: 'Room 3',
+ },
+ {
+ title: 'Approve New Online Marketing Strategy',
+ startDate: new Date(2018, 6, 4, 12, 35),
+ endDate: new Date(2018, 6, 4, 14, 15),
+ id: 23,
+ location: 'Room 3',
+ },
+ {
+ title: 'Upgrade Personal Computers',
+ startDate: new Date(2018, 6, 4, 15, 15),
+ endDate: new Date(2018, 6, 4, 20, 30),
+ id: 24,
+ location: 'Room 2',
+ },
+ {
+ title: 'Customer Workshop',
+ startDate: new Date(2018, 6, 5, 6, 0),
+ endDate: new Date(2018, 6, 5, 14, 20),
+ id: 25,
+ location: 'Room 1',
+ },
+ {
+ title: 'Customer Workshop',
+ startDate: new Date(2018, 6, 5, 14, 35),
+ endDate: new Date(2018, 6, 5, 16, 20),
+ id: 26,
+ location: 'Room 1',
+ },
+ {
+ title: 'Customer Workshop 2',
+ startDate: new Date(2018, 6, 5, 10, 0),
+ endDate: new Date(2018, 6, 5, 11, 20),
+ id: 27,
+ location: 'Room 2',
+ },
+ {
+ title: 'Prepare 2015 Marketing Plan',
+ startDate: new Date(2018, 6, 5, 20, 0),
+ endDate: new Date(2018, 6, 6, 13, 30),
+ id: 28,
+ location: 'Room 3',
+ },
+ {
+ title: 'Brochure Design Review',
+ startDate: new Date(2018, 6, 6, 14, 10),
+ endDate: new Date(2018, 6, 6, 15, 30),
+ id: 29,
+ location: 'Room 3',
+ },
+ {
+ title: 'Create Icons for Website',
+ startDate: new Date(2018, 6, 6, 10, 0),
+ endDate: new Date(2018, 6, 7, 14, 30),
+ id: 30,
+ location: 'Room 1',
+ },
+ {
+ title: 'Upgrade Server Hardware',
+ startDate: new Date(2018, 6, 3, 9, 30),
+ endDate: new Date(2018, 6, 3, 12, 25),
+ id: 31,
+ location: 'Room 2',
+ },
+ {
+ title: 'Submit New Website Design',
+ startDate: new Date(2018, 6, 3, 12, 30),
+ endDate: new Date(2018, 6, 3, 18, 0),
+ id: 32,
+ location: 'Room 2',
+ },
+ {
+ title: 'Launch New Website',
+ startDate: new Date(2018, 6, 3, 12, 20),
+ endDate: new Date(2018, 6, 3, 14, 10),
+ id: 33,
+ location: 'Room 2',
+ },
+ {
+ title: 'Book Flights to San Fran for Sales Trip',
+ startDate: new Date(2018, 5, 26, 0, 0),
+ endDate: new Date(2018, 5, 27, 0, 0),
+ id: 34,
+ location: 'Room 1',
+ },
+ {
+ title: 'Customer Workshop',
+ startDate: new Date(2018, 5, 29, 10, 0),
+ endDate: new Date(2018, 5, 30, 14, 30),
+ id: 35,
+ location: 'Room 1',
+ },
+ {
+ title: 'Google AdWords Strategy',
+ startDate: new Date(2018, 6, 3, 0, 0),
+ endDate: new Date(2018, 6, 4, 10, 30),
+ id: 36,
+ location: 'Room 3',
+ },
+ {
+ title: 'Rollout of New Website and Marketing Brochures',
+ startDate: new Date(2018, 6, 5, 10, 0),
+ endDate: new Date(2018, 6, 9, 14, 30),
+ id: 37,
+ location: 'Room 3',
+ },
+ {
+ title: 'Update NDA Agreement',
+ startDate: new Date(2018, 6, 1, 10, 0),
+ endDate: new Date(2018, 6, 3, 14, 30),
+ id: 38,
+ location: 'Room 2',
+ },
+ {
+ title: 'Customer Workshop',
+ startDate: new Date(2018, 6, 1),
+ endDate: new Date(2018, 6, 2),
+ allDay: true,
+ id: 39,
+ location: 'Room 1',
+ },
+];
diff --git a/src/components/Dashboard/Operator/OpReservation.tsx b/src/components/Dashboard/Operator/OpReservation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac798306c1754c7bdeea36d314475eb4a3e3eb38
--- /dev/null
+++ b/src/components/Dashboard/Operator/OpReservation.tsx
@@ -0,0 +1,114 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Button,
+ TextField,
+ Select,
+ MenuItem,
+ InputLabel,
+} from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+const useStyles = makeStyles(() => ({
+ noShadow: {
+ border: 'none',
+ boxShadow: 'none',
+ backgroundColor: 'transparent',
+ },
+ buttonLong: {
+ padding: '10px 10px 10px 20px',
+ },
+}));
+
+function createData(
+ name: string,
+ value: string,
+): { name: string; value: string } {
+ return { name, value };
+}
+
+const rows = [
+ createData('First Name:', 'Gianluigi'),
+ createData('Last Name:', 'Seritoni'),
+ 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 OpReservation: FC = () => {
+ const classes = useStyles();
+
+ const [driver, setDriver] = React.useState<string | number>('');
+ const [open, setOpen] = React.useState(false);
+
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
+ setDriver(event.target.value as number);
+ };
+
+ const handleClose = (): void => {
+ setOpen(false);
+ };
+
+ const handleOpen = (): void => {
+ setOpen(true);
+ };
+
+ return (
+ <TableContainer component={Paper}>
+ <Table aria-label="simple table">
+ <TableHead>
+ <TableRow>
+ <TableCell>DriveToHospital </TableCell>
+ <TableCell align="right">
+ {' '}
+ <Button
+ variant="contained"
+ className={classes.buttonLong}
+ startIcon={<DeleteIcon />}
+ />
+ </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>
+ ))}
+
+ <TableCell>Driver Assigned </TableCell>
+ <TableCell align="right">
+ <InputLabel id="driver ">Driver</InputLabel>
+ <Select
+ labelId="driver"
+ id="driver"
+ open={open}
+ onClose={handleClose}
+ onOpen={handleOpen}
+ value={driver}
+ onChange={handleChange}
+ fullWidth
+ >
+ <MenuItem value={20}>Alberto Andreini</MenuItem>
+ <MenuItem value={10}>Giovanni Mucciaccia</MenuItem>
+ <MenuItem value={30}>Kassandra Kerschhbaumer</MenuItem>
+ <MenuItem value={40}>Saverio Gennarini</MenuItem>
+ </Select>
+ </TableCell>
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
+};
diff --git a/src/components/Dashboard/Operator/OperatorReservationPage.tsx b/src/components/Dashboard/Operator/OperatorReservationPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d63d24443ff0806e0a2b2bf81d6eb541e2391e1d
--- /dev/null
+++ b/src/components/Dashboard/Operator/OperatorReservationPage.tsx
@@ -0,0 +1,276 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ CssBaseline,
+ Grid,
+ Typography,
+ Hidden,
+ createMuiTheme,
+ 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 { OpReservation } from './OpReservation';
+import { NavBar } from '../HomePage/NavBar';
+
+const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '46vh',
+ 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 OperatorReservationPage: FC = () => {
+ const classes = useStyles();
+
+ const [open, setOpen] = React.useState(false);
+
+ const [value, setValue] = React.useState(
+ new Date('2018-01-01T00:00:00.000Z'),
+ );
+
+ 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 User Info</DialogContentText>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Card Code"
+ type="text"
+ fullWidth
+ />
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="First Name"
+ type="text"
+ fullWidth
+ />
+ <TextField
+ autoFocus
+ margin="dense"
+ id="name"
+ label="Last Name"
+ type="text"
+ fullWidth
+ />
+
+ <DialogContentText className={classes.paddingTop}>
+ Write Here Reservation Info
+ </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">
+ Reserve
+ </Button>
+ </DialogActions>
+ </Dialog>
+
+ <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
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </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">Reservations Calendar</Typography>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3" align="right">
+ Set Reservations
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <form noValidate>
+ <TextField
+ id="datetime-local"
+ label="Select Date"
+ type="datetime-local"
+ defaultValue="2021-05-19T10:30"
+ InputLabelProps={{
+ shrink: true,
+ }}
+ />
+ </form>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <OpReservation />
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
+ </Grid>
+ </div>
+ );
+};