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