186 lines
7.0 KiB
TypeScript
186 lines
7.0 KiB
TypeScript
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
|
import { useFormik } from "formik";
|
|
import * as yup from "yup";
|
|
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
|
|
|
interface FormValues {
|
|
maritalStatus: string;
|
|
numberOfChildren: string;
|
|
ages: string;
|
|
occupation: string;
|
|
hoursPerWeek: number | string;
|
|
employer: string;
|
|
businessPhone: string;
|
|
spouseName: string;
|
|
spouseEmployer: string;
|
|
spouseBusinessPhone: string;
|
|
emergencyContact: string;
|
|
relationship: string;
|
|
spousePhone: string;
|
|
}
|
|
|
|
interface Props {
|
|
familyDetails: FormValues;
|
|
}
|
|
|
|
export default function FamilyFormSection({familyDetails}:Props){
|
|
return(
|
|
<>
|
|
<Grid container direction="row">
|
|
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Marital Status</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue="married"
|
|
name="maritalStatus"
|
|
value={familyDetails.maritalStatus}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
|
<FormControlLabel value="single" control={<Radio />} label="Single" />
|
|
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
|
|
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
|
|
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
|
|
</RadioGroup>
|
|
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
label="Number of Children/Ages"
|
|
className='collapsable-form-style'
|
|
name='numberOfChildren'
|
|
value={familyDetails.numberOfChildren}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Occupation"
|
|
className='collapsable-form-style'
|
|
name='occupation'
|
|
value={familyDetails.occupation}
|
|
disabled
|
|
/>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Hours/Week"
|
|
type="number"
|
|
className='collapsable-form-style'
|
|
name='hoursPerWeek'
|
|
value={familyDetails.hoursPerWeek}
|
|
disabled
|
|
/>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Employer"
|
|
className='collapsable-form-style'
|
|
name='employer'
|
|
value={familyDetails.employer}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Business Phone"
|
|
type="number"
|
|
className='collapsable-form-style'
|
|
name='businessPhone'
|
|
value={familyDetails.businessPhone}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Spouse's Name"
|
|
className='collapsable-form-style'
|
|
name='spouseName'
|
|
value={familyDetails.spouseName}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Spouse's Employer"
|
|
className='collapsable-form-style'
|
|
name='spouseEmployer'
|
|
value={familyDetails.spouseEmployer}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Business Phone"
|
|
type="number"
|
|
className='collapsable-form-style'
|
|
name='spouseBusinessPhone'
|
|
value={familyDetails.spouseBusinessPhone}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
|
|
</Grid>
|
|
|
|
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Emergency Contact"
|
|
type="number"
|
|
className='collapsable-form-style'
|
|
name='emergencyContact'
|
|
value={familyDetails.emergencyContact}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Relationship"
|
|
className='collapsable-form-style'
|
|
name='relationship'
|
|
value={familyDetails.relationship}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
label="Phone"
|
|
className='collapsable-form-style'
|
|
name='spousePhone'
|
|
value={familyDetails.spousePhone}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
)
|
|
};
|