Restore operator components.

src/components/Dashboard/Operator/Data.tsx

+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',
+  },
+];

src/components/Dashboard/Operator/OpReservation.tsx

+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>
+  );
+};

src/components/Dashboard/Operator/OperatorReservationPage.tsx

+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>
+  );
+};