sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

padding issue

Browse Source
This commit is contained in:
sonika 2023-08-21 14:34:17 +05:30
parent f3fa5136ec
commit 3c038ffa7d
6 changed files with 122 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.css
View File

@ -9,10 +9,6 @@
margin: 5%; margin: 5%;
} }
.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{ .collapsable-form-style label {
padding:'15px' !important; padding: 15px;
}
.custom-legend-padding fieldset legend {
padding: 25px !important;
} }

6
src/Components/Header.tsx
View File

@ -22,9 +22,9 @@ export default function Header(){
</IconButton> </IconButton>
<Button color="inherit" component={Link} <Button color="inherit" component={Link}
to='/' sx={{marginLeft:'20px', fontSize:10}}> to='/' sx={{marginLeft:'10px', fontSize:10}}>
<Typography component="div" sx={{ flexGrow: 1 }}> <Typography component="div" sx={{ flexGrow: 1, fontSize:18 }}>
Home In Motion Spine & Joint Center
</Typography> </Typography>
</Button> </Button>
</Toolbar> </Toolbar>

46
src/Components/PatientForm/FamilyFormSection2.tsx
View File

@ -84,11 +84,11 @@ export default function FamilyFormSection(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid> <Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
required required
variant="filled" variant="outlined"
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
@ -99,10 +99,10 @@ export default function FamilyFormSection(){
helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren} helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
required required
variant="filled" variant="outlined"
label="Occupation" label="Occupation"
className='collapsable-form-style' className='collapsable-form-style'
name='occupation' name='occupation'
@ -114,9 +114,9 @@ export default function FamilyFormSection(){
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Hours/Week" label="Hours/Week"
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
@ -127,9 +127,9 @@ export default function FamilyFormSection(){
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Employer" label="Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='employer' name='employer'
@ -138,9 +138,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Business Phone" label="Business Phone"
type="tel" type="tel"
className='collapsable-form-style' className='collapsable-form-style'
@ -150,9 +150,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Spouse's Name" label="Spouse's Name"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseName' name='spouseName'
@ -161,9 +161,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Spouse's Employer" label="Spouse's Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseEmployer' name='spouseEmployer'
@ -172,9 +172,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Business Phone" label="Business Phone"
type="tel" type="tel"
className='collapsable-form-style' className='collapsable-form-style'
@ -184,9 +184,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Emergency Contact" label="Emergency Contact"
className='collapsable-form-style' className='collapsable-form-style'
name='emergencyContact' name='emergencyContact'
@ -195,9 +195,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Relationship" label="Relationship"
className='collapsable-form-style' className='collapsable-form-style'
name='relationship' name='relationship'
@ -206,9 +206,9 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Spouse's Phone" type="tel" label="Spouse's Phone" type="tel"
className='collapsable-form-style' className='collapsable-form-style'
name='phone' name='phone'

69
src/Components/PatientForm/MedicalHistorySection3.tsx
View File

@ -56,7 +56,7 @@ export default function MedicalHistoryForm(){
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Family physician" label="Family physician"
name='familyphysician' name='familyphysician'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -66,7 +66,7 @@ export default function MedicalHistoryForm(){
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="City" label="City"
name='city' name='city'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -76,7 +76,7 @@ export default function MedicalHistoryForm(){
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="State" label="State"
name='state' name='state'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -86,7 +86,7 @@ export default function MedicalHistoryForm(){
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Phone" label="Phone"
type="tel" type="tel"
name='phone' name='phone'
@ -101,7 +101,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'> <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl> <FormControl>
<FormLabel>Previous Chiropractic Care</FormLabel> <FormLabel>Previous Chiropractic Care:</FormLabel>
<RadioGroup <RadioGroup
// value={patient.gender} // value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
@ -118,7 +118,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Chiropractor's Name" label="Chiropractor's Name"
name='chiropractorName' name='chiropractorName'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -129,7 +129,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="City/State" label="City/State"
name='chiropractorState' name='chiropractorState'
onChange={formik.handleChange} onChange={formik.handleChange}
@ -138,6 +138,61 @@ export default function MedicalHistoryForm(){
/> />
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl>
<FormLabel>Who can we thank for referring you to our office:</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="physician"
name="radio-buttons-group"
onChange={formik.handleChange}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="friend" control={<Radio />} label="Friend" />
<FormControlLabel value="relative" control={<Radio />} label="Relative" />
<FormControlLabel value="physician" control={<Radio />} label="Physician" />
<FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
<FormControlLabel value="google" control={<Radio />} label="Google" />
<FormControlLabel value="others" control={<Radio />} label="Others" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl>
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="yes"
name="radio-buttons-group"
onChange={formik.handleChange}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl>
<FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="email"
name="radio-buttons-group"
onChange={formik.handleChange}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="email" control={<Radio />} label="Email" />
<FormControlLabel value="text" control={<Radio />} label="Text" />
</RadioGroup>
</FormControl>
</Grid>
</form> </form>
</> </>
)} )}

25
src/Components/PatientForm/PatientForm.tsx
View File

@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Footer from "../Footer"; import Footer from "../Footer";
import Header from "../Header"; import Header from "../Header";
import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; import {Button, Checkbox, FormControlLabel, FormGroup, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import PersonalSection from './PersonalSection1'; import PersonalSection from './PersonalSection1';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'; import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@ -103,7 +103,7 @@ export default function PatientForm(){
<Header/> <Header/>
<Paper elevation={0} sx={{margin:4, minHeight:700}} > <Paper elevation={0} sx={{margin:4, minHeight:700}} >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Typography variant="h5" gutterBottom> <Typography sx={{fontSize:20}} gutterBottom>
Confidential Patient Information Confidential Patient Information
</Typography> </Typography>
<Grid> <Grid>
@ -114,7 +114,7 @@ export default function PatientForm(){
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header" id="panel1a-header"
> >
<Typography variant="h6">Patient's Personal Information</Typography> <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -125,7 +125,7 @@ export default function PatientForm(){
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}> <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header"> <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
<Typography variant="h6">Patient's Family Information</Typography> <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -135,7 +135,7 @@ export default function PatientForm(){
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}> <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header"> <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
<Typography variant="h6">Patient's Medical History Information</Typography> <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -143,6 +143,20 @@ export default function PatientForm(){
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
<AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
<Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
</AccordionSummary>
<AccordionDetails>
<MedicalHistory/>
</AccordionDetails>
</Accordion>
<FormGroup sx={{marginTop:3}}>
<FormControlLabel required control={<Checkbox />} label="I hearby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history." />
</FormGroup>
<Grid > <Grid >
<Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}> <Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
Submit Submit
@ -151,6 +165,7 @@ export default function PatientForm(){
</Grid> </Grid>
</form> </form>
</Paper> </Paper>
<Footer/> <Footer/>
</Paper> </Paper>

24
src/Components/PatientForm/PersonalSection1.tsx
View File

@ -88,9 +88,9 @@ export default function PersonalSection(){
return( return(
<> <>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style textfield-padding'> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="filled" variant="outlined"
label="Patient's Full Name" label="Patient's Full Name"
name="fullName" name="fullName"
placeholder='Please enter your name' placeholder='Please enter your name'
@ -106,7 +106,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
required required
variant="filled" variant="outlined"
label="Phone Number" label="Phone Number"
name="cellPhone" name="cellPhone"
placeholder='Please enter your cell Phone number' placeholder='Please enter your cell Phone number'
@ -120,7 +120,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Home Phone Number" label="Home Phone Number"
name="homePhone" name="homePhone"
placeholder='Please enter your home phone' placeholder='Please enter your home phone'
@ -134,7 +134,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Email" label="Email"
name="email" name="email"
placeholder='Please enter your email' placeholder='Please enter your email'
@ -147,7 +147,7 @@ export default function PersonalSection(){
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Age" label="Age"
name="age" name="age"
type="number" type="number"
@ -169,7 +169,7 @@ export default function PersonalSection(){
onChange={(newValue) => { onChange={(newValue) => {
setStartDateValue(newValue); setStartDateValue(newValue);
}} }}
renderInput={(params) => <TextField required variant="filled" {...params} />} renderInput={(params) => <TextField required variant="outlined" {...params} />}
/> />
</LocalizationProvider> </LocalizationProvider>
</FormControl> </FormControl>
@ -177,7 +177,7 @@ export default function PersonalSection(){
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Social Security Number" label="Social Security Number"
name="socialSecurityNumber" name="socialSecurityNumber"
value={formik.values.socialSecurityNumber} value={formik.values.socialSecurityNumber}
@ -190,7 +190,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Mailing Address" label="Mailing Address"
name="mailingAddress" name="mailingAddress"
value={formik.values.mailingAddress} value={formik.values.mailingAddress}
@ -203,7 +203,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="State" label="State"
name="state" name="state"
value={formik.values.state} value={formik.values.state}
@ -216,7 +216,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="City" label="City"
name="city" name="city"
value={formik.values.city} value={formik.values.city}
@ -229,7 +229,7 @@ export default function PersonalSection(){
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
variant="filled" variant="outlined"
label="Zip Code" label="Zip Code"
name="zipCode" name="zipCode"
value={formik.values.zipCode} value={formik.values.zipCode}