bt

BTAPP.tsx

import React from 'react';

import Button from 'react-bootstrap/Button';

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import Purpose from '../context/Purpose';

import EmployeeInformation from '../context/EmployeeInformation';

import Itinerary from '../context/Itinerary';

import Agenda from '../context/Agenda';

import Paper from '@material-ui/core/Paper';

import Container from 'react-bootstrap/Container';

import Row from 'react-bootstrap/Row';

import Col from 'react-bootstrap/Col';

const useStyles = makeStyles((theme: Theme) =>

createStyles({

root: {

flexGrow: 1,

},

paper: {

padding: theme.spacing(2),

textAlign: 'center',

color: theme.palette.text.secondary,

},

})

);

export default function BusinessTripApplication() {

const classes = useStyles();

return (

<div className={classes.root}>

<Container>

<Row>

<Col>

<Purpose />

</Col>

<Col xs={6} md={4}>

<EmployeeInformation />

</Col>

</Row>

</Container>

<Container fluid>

<Row>

<Col>

<Itinerary />

</Col>

</Row>

</Container>

<Container fluid>

<Row>

<Col>

<Agenda />

</Col>

</Row>

</Container>

<Button variant="primary" type="submit">

Submit

</Button>

</div>

);

}

DatePicker.tsx

import 'date-fns';

import React from 'react';

import Grid from '@material-ui/core/Grid';

import DateFnsUtils from '@date-io/date-fns';

import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';

export default function MaterialUIPickers() {

const [selectedDate, setSelectedDate] = React.useState<Date | null>(new Date());

const handleDateChange = (date: Date | null) => {

setSelectedDate(date);

};

return (

<MuiPickersUtilsProvider utils={DateFnsUtils}>

<Grid container justify="space-around">

<KeyboardDatePicker

disableToolbar

variant="inline"

format="MM/dd/yyyy"

margin="normal"

id="date-picker-inline"

label="Start Date"

value={selectedDate}

onChange={handleDateChange}

KeyboardButtonProps={{

'aria-label': 'change date',

}}

/>

<KeyboardDatePicker

disableToolbar

variant="inline"

format="MM/dd/yyyy"

margin="normal"

id="date-picker-inline"

label="End Date"

value={selectedDate}

onChange={handleDateChange}

KeyboardButtonProps={{

'aria-label': 'change date',

}}

/>

</Grid>

</MuiPickersUtilsProvider>

);

}

Purpose.tsx

import React from 'react';

import Form from 'react-bootstrap/Form';

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import Card from 'react-bootstrap/Card';

const useStyles = makeStyles((theme: Theme) =>

createStyles({

root: {

flexGrow: 1,

},

paper: {

padding: theme.spacing(2),

textAlign: 'center',

color: theme.palette.text.secondary,

},

})

);

export default function Purpose() {

const classes = useStyles();

return (

<Card>

<Card.Header>Purpose</Card.Header>

<Card.Body>

<Form.Control placeholder="Enter your purpose here"></Form.Control>

</Card.Body>

</Card>

);

}

Itinerary.tsx

import React from 'react';

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import InputGroup from 'react-bootstrap/InputGroup';

import FormControl from 'react-bootstrap/FormControl';

import DatePicker from '../components/common/DatePicker';

import Form from 'react-bootstrap/Form';

import Card from 'react-bootstrap/Card';

const useStyles = makeStyles((theme: Theme) =>

createStyles({

root: {

flexGrow: 1,

},

paper: {

padding: theme.spacing(2),

textAlign: 'center',

color: theme.palette.text.secondary,

},

})

);

export default function BusinessTripApplication() {

const classes = useStyles();

return (

<Card>

<Card.Header>Itinerary</Card.Header>

<Card.Body>

<Card.Title>

<InputGroup className="mb-3">

<InputGroup.Prepend>

<InputGroup.Text>Start place | End Place</InputGroup.Text>

</InputGroup.Prepend>

<FormControl />

<FormControl />

</InputGroup>

</Card.Title>

<DatePicker />

</Card.Body>

</Card>

);

}

Emploeeinformation.tsx

import React from 'react';

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import Card from 'react-bootstrap/Card';

import InputGroup from 'react-bootstrap/InputGroup';

import FormControl from 'react-bootstrap/FormControl';

const useStyles = makeStyles((theme: Theme) =>

createStyles({

root: {

flexGrow: 1,

},

paper: {

padding: theme.spacing(1),

textAlign: 'center',

color: theme.palette.text.secondary,

},

})

);

export default function EmployeeInformation() {

return (

<Card>

<Card.Header> Employee Information</Card.Header>

<Card.Body>

<InputGroup className="mb-3">

<InputGroup.Prepend>

<InputGroup.Text id="basic-addon1">Name:</InputGroup.Text>

</InputGroup.Prepend>

<FormControl placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />

</InputGroup>

<InputGroup className="mb-3">

<InputGroup.Prepend>

<InputGroup.Text id="basic-addon1">Dept:</InputGroup.Text>

</InputGroup.Prepend>

<FormControl placeholder="Department" aria-label="Department" aria-describedby="basic-addon1" />

</InputGroup>

</Card.Body>

</Card>

);

}

Agenda.tsx

import React from 'react';

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import Form from 'react-bootstrap/Form';

import Card from 'react-bootstrap/Card';

const useStyles = makeStyles((theme: Theme) =>

createStyles({

root: {

flexGrow: 1,

},

paper: {

padding: theme.spacing(2),

textAlign: 'center',

color: theme.palette.text.secondary,

},

})

);

export default function Agenda() {

return (

<Card>

<Card.Header>Agenda</Card.Header>

<Card.Body>

<Form.Control> </Form.Control>

</Card.Body>

</Card>

);

}