Page for driver.

src/components/Dashboard/DriverShift/DriverShiftDialog.tsx

+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, useState } from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
+  Typography,
+} from '@material-ui/core';
+import { DriverShiftType } from 'types/DriverShiftType';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { getRoleObject } from 'api/getRoleObject';
+import { ControlledDateTimePicker } from 'components/Utils/ControlledDateTimePicker';
+import { driverShiftStyle } from './DriverShiftPage.style';
+
+type DriverShiftDialogProps = {
+  handleClose: () => void;
+  isOpen: boolean;
+};
+
+export const DriverShiftDialog: FC<DriverShiftDialogProps> = ({
+  handleClose,
+  isOpen,
+}: DriverShiftDialogProps) => {
+  const classes = driverShiftStyle();
+  const { control, handleSubmit } = useForm<DriverShiftType>({
+    mode: 'onSubmit',
+  });
+
+  const onSubmit: SubmitHandler<DriverShiftType> = (
+    driverShift: DriverShiftType,
+  ) => {
+    const filledShift = driverShift;
+    getRoleObject().then((role) => {
+      filledShift.driver = role.id;
+      console.log(filledShift);
+    });
+    handleClose();
+  };
+
+  return (
+    <div data-testid="DriverShiftDialog">
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
+          <DialogTitle id="form-dialog-title">
+            <Typography variant="h4" component="h1">
+              Book New DriverShift
+            </Typography>
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Write here below the details of your next DriverShift
+            </DialogContentText>
+            <Typography
+              variant="h5"
+              component="h2"
+              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
+            >
+              Search
+            </Typography>
+
+            <ControlledDateTimePicker
+              control={control}
+              name="startTime"
+              id="start-time"
+              label="Start time"
+            />
+
+            <ControlledDateTimePicker
+              control={control}
+              name="endTime"
+              id="end-time"
+              label="End time"
+            />
+
+            <Typography
+              variant="h5"
+              component="h2"
+              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
+            >
+              Trip stage
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button type="submit" variant="contained" color="primary">
+              Insert
+            </Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </div>
+  );
+};

src/components/Dashboard/DriverShift/DriverShiftPage.style.ts

+import { makeStyles } from '@material-ui/core/styles';
+
+export const driverShiftStyle = makeStyles(() => ({
+  root: {
+    minHeight: '36vh',
+    backgroundImage: `url(${'/assets/bgMED.svg'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingBottomKlein: {
+    paddingBottom: '15px',
+  },
+  paddingTop: {
+    paddingTop: '65px',
+  },
+  paddingTopKlein: {
+    paddingTop: '35px',
+  },
+  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: '5vw',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    fontSize: '2em',
+    padding: '1.5em',
+  },
+}));

src/components/Dashboard/DriverShift/DriverShiftPage.tsx

+import React, { FC } from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+import { Header } from 'components/Utils/Header';
+import { DriverShiftDialog } from './DriverShiftDialog';
+import { driverShiftStyle } from './DriverShiftPage.style';
+
+export const DriverShiftPage: FC = () => {
+  const classes = driverShiftStyle();
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const handleOpen = (): void => {
+    setIsOpen(true);
+  };
+
+  const handleClose = (): void => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div data-testid="DriverShift">
+      <Grid container direction="column" className={classes.paddingBottom}>
+        <Header title="Plan here your" subtitle="DriverShifts" />
+        <DriverShiftDialog handleClose={handleClose} isOpen={isOpen} />
+
+        <Fab
+          color="primary"
+          size="large"
+          className={classes.fab}
+          onClick={handleOpen}
+          aria-label="Add New Shift"
+        >
+          <AddIcon className={classes.extendedIcon} />
+        </Fab>
+
+        <Grid item container className={classes.paddingTop}>
+          <Grid item xs={1} lg={2} />
+          <Grid item xs={10} lg={8}>
+            <Typography variant="h3">Your Next DriverShifts</Typography>
+          </Grid>
+          <Grid item xs={1} lg={2} />
+
+          <Grid item xs={1} lg={2} />
+          <Grid item xs={10} lg={8}>
+            <h1>Nothing</h1>
+          </Grid>
+          <Grid item xs={1} lg={2} />
+        </Grid>
+      </Grid>
+    </div>
+  );
+};