New Clients page
unknown
plain_text
2 years ago
16 kB
5
Indexable
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
Autocomplete,
Box,
Button,
FormControl,
FormControlLabel,
Radio,
RadioGroup,
Tab,
Tabs,
TextField,
Typography,
} from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { useState } from 'react';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Content from '../common/components/content';
import Layout from '../common/components/layout';
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
const NewClientPage = () => {
const breadcrumbs = [
{ label: 'System', href: '/' },
{ label: 'Dashboard', href: '/' },
{ label: 'Your Clients', href: '/clients' },
{ label: 'Add New Natural Person', href: '/newClient' },
];
const {
handleSubmit,
control,
formState: { errors },
getValues,
} = useForm({
mode: 'onChange',
});
const onSubmit = (data: any) => console.log(data, 'data');
const values = getValues();
console.log(values, 999);
const [tab, setTab] = useState(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTab(newValue);
};
const taxes = [{ label: 'tax1' }, { label: 'tax2' }, { label: 'tax3' }, { label: 'tax4' }];
const titles = [
{ label: 'title1' },
{ label: 'title2' },
{ label: 'title3' },
{ label: 'title4' },
];
const gender = [{ label: 'Male' }, { label: 'Female' }];
return (
<Layout breadcrumbs={breadcrumbs}>
<Content sx={{ mt: 4 }}>
<Box display="flex" pb={4} alignItems="center">
<Button sx={{ minWidth: 0, p: 0 }} component="a" href="/clients">
<ArrowBackIcon color="disabled" />
</Button>
<Typography ml={1} variant="h2">
Natural Person
</Typography>
</Box>
<Box sx={{ background: 'white' }}>
<form style={{ padding: '20px' }} onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ width: '100%', p: '12px' }}>
<Box
sx={{
borderBottom: 1,
borderColor: 'divider',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Tabs value={tab} onChange={handleChange}>
<Tab label="1. Basic Information" />
<Tab label="2. Rating details" />
<Tab label="3. Contact and address details" />
<Tab label="4. Discounts" />
</Tabs>
<Typography color="text.secondary" mr={2}>
Status: Unfilled
</Typography>
</Box>
</Box>
{tab === 0 && (
<>
<Box display="flex" justifyContent="space-between">
<Controller
control={control}
name="taxes"
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
onChange={(event, item) => {
onChange(item?.label);
}}
value={value}
options={taxes}
sx={{ width: '270px' }}
getOptionLabel={(option) => {
return option.label ?? option;
}}
isOptionEqualToValue={(
option: { label: string },
value: { label: string },
) => value === undefined || option.label === value.label}
renderInput={(parameters) => (
<TextField
{...parameters}
variant="outlined"
sx={{ p: 0 }}
label="Tax status *"
placeholder="Please choose ..."
size="small"
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
<Box display="flex" flexDirection="column">
<Controller
name="identity"
control={control}
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
onChange={({ target: { value } }) => {
onChange(value);
}}
value={value}
sx={{ p: 0, width: '270px' }}
label="Identity number *"
placeholder="e.g. 123456789"
error={!!error}
helperText={error?.message}
/>
)}
/>
<FormControl>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
row
name="radio-buttons-group"
>
<FormControlLabel value="id" control={<Radio />} label="South African ID" />
<FormControlLabel value="passport" control={<Radio />} label="Passport" />
</RadioGroup>
</FormControl>
</Box>
<Controller
control={control}
name="title"
render={({ field: { onChange, value } }) => (
<Autocomplete
onChange={(event, item) => {
onChange(item?.label);
}}
value={value}
options={titles}
sx={{ width: '270px' }}
getOptionLabel={(option) => option.label}
isOptionEqualToValue={(
option: { label: string },
value: { label: string },
) => value === undefined || option.label === value.label}
renderInput={(parameters) => (
<TextField
{...parameters}
variant="outlined"
sx={{ p: 0 }}
label="Title"
placeholder="Please choose ..."
size="small"
/>
)}
/>
)}
/>
</Box>
<Box mt={2} display="flex" justifyContent="space-between">
<Controller
name="firstName"
control={control}
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
value={value}
sx={{ p: 0, width: '270px' }}
label="First name(s) as per ID document *"
placeholder="e.g. Peter"
error={!!error}
helperText={error?.message}
onChange={({ target: { value } }) => {
onChange(value);
}}
/>
)}
/>
<Controller
name="middleName"
control={control}
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
value={value}
sx={{ p: 0, width: '270px' }}
label="Middle name(s) as per ID document *"
placeholder="e.g. John"
error={!!error}
helperText={error?.message}
onChange={({ target: { value } }) => {
onChange(value);
}}
/>
)}
/>
<Controller
name="lastName"
control={control}
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
value={value}
sx={{ p: 0, width: '270px' }}
label="Last name as per ID document *"
placeholder="e.g. Lambie"
error={!!error}
helperText={error?.message}
onChange={({ target: { value } }) => {
onChange(value);
}}
/>
)}
/>
</Box>
<Box display="flex" mt={4} justifyContent="space-between">
<Controller
control={control}
name="gender"
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
onChange={(event, item) => {
onChange(item?.label);
}}
value={value}
options={gender}
sx={{ width: '270px' }}
getOptionLabel={(option) => option.label}
isOptionEqualToValue={(
option: { label: string },
value: { label: string },
) => value === undefined || option.label === value.label}
renderInput={(parameters) => (
<TextField
{...parameters}
variant="outlined"
sx={{ p: 0 }}
label="Gender*"
placeholder="Please choose ..."
size="small"
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
<Controller
name="date"
defaultValue=""
control={control}
rules={{
required: 'Please enter something',
}}
render={({ field: { onBlur, onChange, value, name }, fieldState }) => (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={value}
renderInput={(inputProps) => (
<TextField
{...inputProps}
onBlur={onBlur}
label="Date of birth *"
name={name}
error={!!fieldState.error}
helperText={fieldState.error?.message}
/>
)}
onChange={onChange}
/>
</LocalizationProvider>
)}
/>
<Box width={271}></Box>
</Box>
<Box
sx={{
position: 'absolute',
display: 'flex',
justifyContent: 'flex-end',
bottom: 0,
left: 0,
height: '60px',
padding: '10px',
backgroundColor: 'common.white',
width: '100%',
}}
>
<Button type="submit" variant="outlined" sx={{ width: 70 }} color="primary">
Next
</Button>
</Box>
</>
)}
{tab === 1 && (
<>
<Typography p={3} width="50%" color="text.secondary">
Instructional text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Typography>
<Controller
control={control}
name="tabacco"
rules={{
required: 'Please enter something',
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
onChange={(event, item) => {
onChange(item?.label);
}}
value={value}
options={[{ label: 'Yes' }, { label: 'No' }]}
sx={{ width: '270px' }}
getOptionLabel={(option) => {
return option.label ?? option;
}}
isOptionEqualToValue={(option: { label: string }, value: { label: string }) =>
value === undefined || option.label === value.label
}
renderInput={(parameters) => (
<TextField
{...parameters}
variant="outlined"
sx={{ p: 0 }}
label="Has the person used tobacco in the last 6 months?"
placeholder="Please choose ..."
size="small"
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
</>
)}
</form>
{/* <TabPanel value={tab} index={2}>
Item Three
</TabPanel> */}
</Box>
</Content>
</Layout>
);
};
export default NewClientPage;
Editor is loading...