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...