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%;
}
.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{
padding:'15px' !important;
}
.custom-legend-padding fieldset legend {
padding: 25px !important;
.collapsable-form-style label {
padding: 15px;
}

6
src/Components/Header.tsx
View File

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

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

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

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

@ -56,7 +56,7 @@ export default function MedicalHistoryForm(){
<Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="Family physician"
name='familyphysician'
onChange={formik.handleChange}
@ -66,7 +66,7 @@ export default function MedicalHistoryForm(){
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="City"
name='city'
onChange={formik.handleChange}
@ -76,7 +76,7 @@ export default function MedicalHistoryForm(){
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="State"
name='state'
onChange={formik.handleChange}
@ -86,7 +86,7 @@ export default function MedicalHistoryForm(){
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="Phone"
type="tel"
name='phone'
@ -101,7 +101,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl>
<FormLabel>Previous Chiropractic Care</FormLabel>
<FormLabel>Previous Chiropractic Care:</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
@ -118,7 +118,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="Chiropractor's Name"
name='chiropractorName'
onChange={formik.handleChange}
@ -129,7 +129,7 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="filled"
variant="outlined"
label="City/State"
name='chiropractorState'
onChange={formik.handleChange}
@ -138,6 +138,61 @@ export default function MedicalHistoryForm(){
/>
</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>
</>
)}

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 Footer from "../Footer";
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 { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@ -103,7 +103,7 @@ export default function PatientForm(){
<Header/>
<Paper elevation={0} sx={{margin:4, minHeight:700}} >
<form onSubmit={handleSubmit}>
<Typography variant="h5" gutterBottom>
<Typography sx={{fontSize:20}} gutterBottom>
Confidential Patient Information
</Typography>
<Grid>
@ -114,7 +114,7 @@ export default function PatientForm(){
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography variant="h6">Patient's Personal Information</Typography>
<Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
</AccordionSummary>
<AccordionDetails>
@ -125,7 +125,7 @@ export default function PatientForm(){
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
<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>
<AccordionDetails>
@ -135,13 +135,27 @@ export default function PatientForm(){
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
<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>
<AccordionDetails>
<MedicalHistory/>
</AccordionDetails>
</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 >
<Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
@ -151,6 +165,7 @@ export default function PatientForm(){
</Grid>
</form>
</Paper>
<Footer/>
</Paper>

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

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