bt
btPURPOSE //
import React from 'react';
import Form from 'react-bootstrap/Form';
import Card from 'react-bootstrap/Card';
interface PurposeValues {
purpose: string;
}
export default function Purpose() {
const initialValue: PurposeValues = { purpose: '' };
return (
<Card>
<Card.Header as="h5" initialValue={initialValue}>
Purpose
</Card.Header>
<Card.Body>
<Form.Control placeholder="Enter your purpose here"></Form.Control>
</Card.Body>
</Card>
);
}
/// BOOKING SERVICE
import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Card from 'react-bootstrap/Card';
import {Formik, Form, Field} from 'formik';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 250,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
})
);
export default function BookingService() {
const classes = useStyles();
const [booking, setBooking] = React.useState('');
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setBooking(event.target.value as string);
};
return (
<div>
<Card>
<Card.Header as="h5">Booking Service</Card.Header>
<Card.Body>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Select Service</InputLabel>
<Select labelId="demo-simple-select-label" id="demo-simple-select" value={booking} onChange={handleChange}>
<MenuItem value={10}>Mobile internet roaming</MenuItem>
<MenuItem value={20}>Visa application</MenuItem>
<MenuItem value={30}>Transportation</MenuItem>
<MenuItem value={40}>Accommodation</MenuItem>
</Select>
</FormControl>
</Card.Body>
</Card>
</div>
);
}
/// table
import React from 'react';
import Card from 'react-bootstrap/Card';
import Grid from '@material-ui/core/Grid';
import { TextField, IconButton } from '@material-ui/core';
export default function ItineraryTable2() {
interface TableValuesProps {
namePlace: string;
endPlace: string;
City: string;
State: string;
Comment: string;
}
// select country
return (
<Card>
<Card.Header as="h5">Itinerary</Card.Header>
<Card.Body>
<Grid container spacing={4}>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Start Place" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="End Place" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="City" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Country" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField margin="dense" label="StartDate" type="date" fullWidth InputLabelProps={{ shrink: true }} />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField margin="dense" label="ToDate" type="date" fullWidth InputLabelProps={{ shrink: true }} />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Comment" fullWidth />
</Grid>
</Grid>
</Card.Body>
</Card>
);
}
// payment
import React from 'react';
import Card from 'react-bootstrap/Card';
import { IconButton, Button, DialogActions, CircularProgress, DialogContent } from '@material-ui/core';
import { Delete, ArrowDownward, ArrowUpward, Add } from '@material-ui/icons';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
import Grid from '@material-ui/core/Grid';
import { Formik, FieldArray, Form, Field } from 'formik';
const currencies = [
{
value: 'CZK',
label: 'Kč',
},
{
value: 'EUR',
label: '€',
},
{
value: 'USD',
label: '$',
},
];
const payments = [
{
value: 'Cash',
label: 'Cash',
},
{
value: 'Bank Transfer',
label: 'Bank Transfer',
},
];
export default function AdvancePaymentTable() {
const [currency, setCurrency] = React.useState('CZK');
const [payment, setPayment] = React.useState('Cash');
const handleChangeCurrency = (event: React.ChangeEvent<HTMLInputElement>) => {
setCurrency(event.target.value);
};
const handleChangePayment = (event: React.ChangeEvent<HTMLInputElement>) => {
setPayment(event.target.value as string);
};
const handleOnSubmit = (data: any) => {
console.log(data);
};
return (
<Formik
initialValues={{ Amount: '5000' }}
onSubmit={(values) => handleOnSubmit(values)}
render={({ values }) => (
<Form>
<FieldArray
name="data"
render={(arrayHelpers) => (
<React.Fragment>
<Card>
<Card.Header as="h5">Advance Payment</Card.Header>
<Card.Body>
<Grid container spacing={3}>
<Grid item lg={3} md={6} xs={12} spacing={2}>
<TextField id="standard-basic" label="Amount" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField
id="standard-select-currency"
select
label="Currency"
value={currency}
onChange={handleChangeCurrency}
helperText=""
fullWidth
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField
id="standard-select-payment"
select
label="Payment"
value={payment}
onChange={handleChangePayment}
fullWidth
>
{payments.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item lg={3} md={6} xs={12}>
<IconButton onClick={() => arrayHelpers.push({ text: '' })}>
<Add />
</IconButton>
</Grid>
</Grid>
</Card.Body>
</Card>
</React.Fragment>
)}
/>
</Form>
)}
/>
);
}
// charge department
import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import Card from 'react-bootstrap/Card';
import { TextField } from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import { IconButton, Button, DialogActions, CircularProgress, DialogContent } from '@material-ui/core';
import { Delete, ArrowDownward, ArrowUpward, Add } from '@material-ui/icons';
import { Formik, FieldArray, Form, Field } from 'formik';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 105,
},
})
);
export default function ChargeTable() {
// const classes = useStyles();
// className={classes.formControl}
const [department, setDepartment] = React.useState('');
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setDepartment(event.target.value as string);
};
return (
<Card>
<Card.Header as="h5">Charge Department</Card.Header>
<Card.Body>
<Grid container spacing={3}>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Department" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Percentage" fullWidth />
</Grid>
<Grid item lg={3} md={6} xs={12}>
<TextField id="standard-basic" label="Comment" fullWidth />
</Grid>
<Grid>
{/* <IconButton onClick={() => arrayHelpers.push({ id: uuid(), text: '' })}>
<Add />
</IconButton> */}
</Grid>
</Grid>
</Card.Body>
</Card>
);
}