170 lines
6.0 KiB
TypeScript
170 lines
6.0 KiB
TypeScript
import * as React from 'react';
|
|
import { Button, FormControl, FormControlLabel, 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';
|
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
import PatientDetails from './PatientDetails';
|
|
|
|
interface Patient {
|
|
fullName: string;
|
|
homePhone: string;
|
|
cellPhone: string;
|
|
email: string;
|
|
age: number | string;
|
|
dateOfBirth: string;
|
|
socialSecurityNumber: string;
|
|
mailingAddress: string;
|
|
city: string;
|
|
state: string;
|
|
zipCode: string;
|
|
gender: string;
|
|
maritalStatus: string;
|
|
}
|
|
|
|
interface Props {
|
|
personalData: Patient;
|
|
}
|
|
|
|
export default function PersonalSection({personalData} : Props){
|
|
return(
|
|
<>
|
|
<Grid container direction="row" className='section1-test-class'>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Patient's Full Name"
|
|
name="fullName"
|
|
placeholder='Please enter your name'
|
|
value={personalData.fullName}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
label="Phone Number"
|
|
name="cellPhone"
|
|
placeholder='Please enter your cell Phone number'
|
|
value={personalData.cellPhone}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Home Phone Number"
|
|
name="homePhone"
|
|
placeholder='Please enter your home phone'
|
|
value={personalData.homePhone}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Email"
|
|
name="email"
|
|
placeholder='Please enter your email'
|
|
value={personalData.email}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
label="Age"
|
|
name="age"
|
|
type="number"
|
|
placeholder='Please enter your age'
|
|
value={personalData.age}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<FormControl >
|
|
<TextField
|
|
variant="outlined"
|
|
label="Date of birth"
|
|
name="dob"
|
|
value={personalData.dateOfBirth}
|
|
disabled
|
|
/>
|
|
</FormControl>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Social Security Number"
|
|
name="socialSecurityNumber"
|
|
value={personalData.socialSecurityNumber}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
label="Mailing Address"
|
|
name="mailingAddress"
|
|
value={personalData.mailingAddress}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="State"
|
|
name="state"
|
|
value={personalData.state}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
label="City"
|
|
name="city"
|
|
value={personalData.city}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Zip Code"
|
|
name="zipCode"
|
|
value={personalData.zipCode}
|
|
disabled
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style-radioButtons'>
|
|
<FormControl >
|
|
<FormLabel>Gender</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue="male"
|
|
name="radio-buttons-group"
|
|
sx={{ display: 'flex', flexDirection: 'row' }}
|
|
>
|
|
<FormControlLabel value="male" control={<Radio />} label="Male" checked={personalData.gender === 'male'} />
|
|
<FormControlLabel value="female" control={<Radio />} label="Female" checked={personalData.gender === 'female'} />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
)
|
|
} |