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

Compare commits

base: sonika:84a55d48c895a452a416ff21ecd48b952475a813
Branches Tags
sonika:master
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
..
compare: sonika:5add485a0b892a62755422ac771bca0573240b06
Branches Tags
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
sonika:master

No commits in common. "84a55d48c895a452a416ff21ecd48b952475a813" and "5add485a0b892a62755422ac771bca0573240b06" have entirely different histories.
84a55d48c8 ... 5add485a0b

9 changed files with 430 additions and 1141 deletions
Show Stats Expand all files Collapse all files

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

@ -2,26 +2,27 @@ import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel,
import { useFormik } from "formik"; import { useFormik } from "formik";
import * as yup from "yup"; import * as yup from "yup";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import React, { useEffect } from 'react';
interface Patient { interface FormValues {
maritalStatus: string | undefined, maritalStatus: string;
numberOfChildren: string | undefined, numberOfChildren: string;
occupation: string | undefined, ages: string;
hoursPerWeek: number | string | undefined, occupation: string;
employer: string | undefined, hoursPerWeek: number | string;
businessPhone: string | undefined, employer: string;
spouseName: string | undefined, businessPhone: string;
spouseEmployer: string | undefined, spouseName: string;
spouseBusinessPhone: string | undefined, spouseEmployer: string;
emergencyContact: string | undefined, spouseBusinessPhone: string;
relationship: string | undefined, emergencyContact: string;
spousePhone: string | undefined, relationship: string;
spousePhone: string;
} }
const validationSchema = yup.object({ const validationSchema = yup.object({
maritalStatus:yup.string().required("Marital Status is required"), maritalStatus:yup.string().required("Marital Status is required"),
numberOfChildren:yup.string().required("Full name is required"), numberOfChildren:yup.string().required("Full name is required"),
ages:yup.string().required("Full name is required"),
occupation:yup.string().required("Occupation is required"), occupation:yup.string().required("Occupation is required"),
// hoursPerWeek: yup.number().required('Required'), // hoursPerWeek: yup.number().required('Required'),
// employer:yup.string().required("Full name is required"), // employer:yup.string().required("Full name is required"),
@ -34,59 +35,31 @@ const validationSchema = yup.object({
spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"), spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
}); });
type Props = { export default function FamilyFormSection(){
handleFormSection2Data:( const formik = useFormik<FormValues>({
maritalStatus: string | undefined, initialValues:{
numberOfChildren: string | undefined, maritalStatus:'',
occupation: string | undefined, numberOfChildren:'',
hoursPerWeek: number | string | undefined, ages:'',
employer: string | undefined, occupation:'',
businessPhone: string | undefined, hoursPerWeek:'',
spouseName: string | undefined, employer:'',
spouseEmployer: string | undefined, businessPhone:'',
spouseBusinessPhone: string | undefined, spouseName:'',
emergencyContact: string | undefined, spouseEmployer:'',
relationship: string | undefined, spouseBusinessPhone:'',
spousePhone: string | undefined, emergencyContact:'',
)=> void relationship:'',
} spousePhone:''
},
validationSchema,
export default function FamilyFormSection({handleFormSection2Data}:Props){ onSubmit:(values)=>{
const [patient, setPatient] = React.useState<Patient>({ console.log(values);
maritalStatus:'', }
numberOfChildren:'', })
occupation:'',
hoursPerWeek:'',
employer:'',
businessPhone:'',
spouseName:'',
spouseEmployer:'',
spouseBusinessPhone:'',
emergencyContact:'',
relationship:'',
spousePhone:''
});
useEffect(()=>{
handleFormSection2Data(
patient.maritalStatus,
patient.numberOfChildren,
patient.occupation,
patient.hoursPerWeek,
patient.employer,
patient.businessPhone,
patient.spouseName,
patient.spouseEmployer,
patient.spouseBusinessPhone,
patient.emergencyContact,
patient.relationship,
patient.spousePhone,
)
},[patient])
return( return(
<> <>
<form onSubmit={formik.handleSubmit}>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={8} className='collapsable-form-style-radioButtons'> <Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
@ -95,14 +68,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue="married" defaultValue="married"
name="maritalStatus" name="maritalStatus"
value={patient.maritalStatus} onChange={formik.handleChange}
value={formik.values.maritalStatus}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(e)=>{
setPatient((prevValues:any) => ({
...prevValues,
maritalStatus: e.target.value,
}));
}}
// error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)} // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
// helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus} // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
> >
@ -125,14 +93,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.numberOfChildren}
...prevValues, onBlur={formik.handleBlur}
numberOfChildren: e.target.value,
}));
}}
value={patient.numberOfChildren}
// onBlur={formik.handleBlur}
// error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)} // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
// helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren} // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
/> />
@ -144,14 +107,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Occupation" label="Occupation"
className='collapsable-form-style' className='collapsable-form-style'
name='occupation' name='occupation'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.occupation}
...prevValues, onBlur={formik.handleBlur}
occupation: e.target.value,
}));
}}
value={patient.occupation}
// onBlur={formik.handleBlur}
// error={formik.touched.occupation && Boolean(formik.errors.occupation)} // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
// helperText={formik.touched.occupation && formik.errors.occupation} // helperText={formik.touched.occupation && formik.errors.occupation}
/> />
@ -164,14 +122,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='hoursPerWeek' name='hoursPerWeek'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.hoursPerWeek}
...prevValues, onBlur={formik.handleBlur}
hoursPerWeek: e.target.value,
}));
}}
value={patient.hoursPerWeek}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -181,14 +134,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Employer" label="Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='employer' name='employer'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.employer}
...prevValues, onBlur={formik.handleBlur}
employer: e.target.value,
}));
}}
value={patient.employer}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -198,14 +146,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='businessPhone' name='businessPhone'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.businessPhone}
...prevValues, onBlur={formik.handleBlur}
businessPhone: e.target.value,
}));
}}
value={patient.businessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -221,14 +164,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Spouse's Name" label="Spouse's Name"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseName' name='spouseName'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.spouseName}
...prevValues, onBlur={formik.handleBlur}
spouseName: e.target.value,
}));
}}
value={patient.spouseName}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -237,14 +175,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Spouse's Employer" label="Spouse's Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseEmployer' name='spouseEmployer'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.spouseEmployer}
...prevValues, onBlur={formik.handleBlur}
spouseEmployer: e.target.value,
}));
}}
value={patient.spouseEmployer}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -254,14 +187,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseBusinessPhone' name='spouseBusinessPhone'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.spouseBusinessPhone}
...prevValues, onBlur={formik.handleBlur}
spouseBusinessPhone: e.target.value,
}));
}}
value={patient.spouseBusinessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -274,16 +202,12 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
<TextField <TextField
variant="outlined" variant="outlined"
label="Emergency Contact" label="Emergency Contact"
type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='emergencyContact' name='emergencyContact'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.emergencyContact}
...prevValues, onBlur={formik.handleBlur}
emergencyContact: e.target.value,
}));
}}
value={patient.emergencyContact}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -292,14 +216,9 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Relationship" label="Relationship"
className='collapsable-form-style' className='collapsable-form-style'
name='relationship' name='relationship'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.relationship}
...prevValues, onBlur={formik.handleBlur}
relationship: e.target.value,
}));
}}
value={patient.relationship}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
@ -309,17 +228,13 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
label="Phone" label="Phone"
className='collapsable-form-style' className='collapsable-form-style'
name='spousePhone' name='spousePhone'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues:any) => ({ value={formik.values.spousePhone}
...prevValues, onBlur={formik.handleBlur}
spousePhone: e.target.value,
}));
}}
value={patient.spousePhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form>
</> </>
) )
}; };

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

@ -2,20 +2,19 @@ import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { useEffect } from 'react';
interface Patient { interface FormValues {
physicianname: string |undefined; physicianname: string;
physiciancity: string |undefined; physiciancity: string;
physicianstate: string |undefined; physicianstate: string;
physicianphone: string |undefined; physicianphone: string;
chiropractorName: string |undefined; chiropractorName: string;
chiropractorState: string |undefined; chiropractorState: string;
xray: string|undefined; xray: boolean;
haveChiropractor: string|undefined; ctScan: boolean;
reference: string|undefined; cdImages: boolean;
visitDetails: string |undefined; visitDetails: string;
cellPhoneProvider: string |undefined; cellPhoneProvider: string;
} }
const validationSchema = Yup.object({ const validationSchema = Yup.object({
@ -25,61 +24,35 @@ const validationSchema = Yup.object({
phone: Yup.string().required('Required'), phone: Yup.string().required('Required'),
chiropractorName: Yup.string().required('Required'), chiropractorName: Yup.string().required('Required'),
xray: Yup.boolean().required('Required'), xray: Yup.boolean().required('Required'),
haveChiropractor: Yup.boolean().required('Required'), ctScan: Yup.boolean().required('Required'),
reference: Yup.boolean().required('Required'), cdImages: Yup.boolean().required('Required'),
visitDetails: Yup.string().required('Required'), visitDetails: Yup.string().required('Required'),
cellPhoneProvider: Yup.string().required('Required'), cellPhoneProvider: Yup.string().required('Required'),
}); });
type Props = { export default function MedicalHistoryForm(){
handleFormSection3Data:( const formik = useFormik<FormValues>({
physicianname?: string |undefined, initialValues:{
physiciancity?: string |undefined, physicianname: '',
physicianstate?: string |undefined, physiciancity: '',
physicianphone?: string |undefined, physicianstate: '',
chiropractorName?: string |undefined, physicianphone: '',
chiropractorState?: string |undefined, chiropractorName: '',
xray?: string|undefined, chiropractorState: '',
haveChiropractor?: string|undefined, xray: false,
reference?: string|undefined, ctScan: false,
visitDetails?: string |undefined, cdImages: false,
cellPhoneProvider?: string |undefined, visitDetails: '',
)=> void cellPhoneProvider: '',
} },
validationSchema,
export default function MedicalHistoryForm({handleFormSection3Data}:Props){ onSubmit:(values)=>{
console.log(values);
const [patient, setPatient] = React.useState<Patient>({ }
physicianname: '', })
physiciancity: '',
physicianstate: '',
physicianphone: '',
chiropractorName: '',
chiropractorState: '',
xray: '',
haveChiropractor: '',
reference: '',
visitDetails: '',
cellPhoneProvider: '',
});
useEffect(()=>{
handleFormSection3Data(
patient.physicianname,
patient.physiciancity,
patient.physicianstate,
patient.physicianphone,
patient.chiropractorName,
patient.chiropractorState,
patient.xray,
patient.haveChiropractor,
patient.reference,
patient.visitDetails,
patient.cellPhoneProvider,
)
},[patient])
return( return(
<> <>
<form onSubmit={formik.handleSubmit}>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel> <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
</Grid> </Grid>
@ -90,14 +63,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
variant="outlined" variant="outlined"
label="Family physician" label="Family physician"
name='physicianname' name='physicianname'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.physicianname}
...prevValues, onBlur={formik.handleBlur}
physicianname: e.target.value,
}));
}}
value={patient.physicianname}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -105,14 +73,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
variant="outlined" variant="outlined"
label="City" label="City"
name='physiciancity' name='physiciancity'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.physiciancity}
...prevValues, onBlur={formik.handleBlur}
physiciancity: e.target.value,
}));
}}
value={patient.physiciancity}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -120,14 +83,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
variant="outlined" variant="outlined"
label="State" label="State"
name='physicianstate' name='physicianstate'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.physicianstate}
...prevValues, onBlur={formik.handleBlur}
physicianstate: e.target.value,
}));
}}
value={patient.physicianstate}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -136,14 +94,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
label="Phone" label="Phone"
type="number" type="number"
name='physicianphone' name='physicianphone'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.physicianphone}
...prevValues, onBlur={formik.handleBlur}
physicianphone: e.target.value,
}));
}}
value={patient.physicianphone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -162,12 +115,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="yes" // defaultValue="yes"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({
...prevValues,
haveChiropractor: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="yes" control={<Radio />} label="Yes" /> <FormControlLabel value="yes" control={<Radio />} label="Yes" />
@ -181,14 +129,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
variant="outlined" variant="outlined"
label="Chiropractor's Name" label="Chiropractor's Name"
name='chiropractorName' name='chiropractorName'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.chiropractorName}
...prevValues, onBlur={formik.handleBlur}
chiropractorName: e.target.value,
}));
}}
value={patient.chiropractorName}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -197,14 +140,9 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
variant="outlined" variant="outlined"
label="City/State" label="City/State"
name='chiropractorState' name='chiropractorState'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.chiropractorState}
...prevValues, onBlur={formik.handleBlur}
chiropractorState: e.target.value,
}));
}}
value={patient.chiropractorState}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
</Grid> </Grid>
@ -217,12 +155,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="yes" // defaultValue="yes"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({
...prevValues,
xray: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="yes" control={<Radio />} label="Yes" /> <FormControlLabel value="yes" control={<Radio />} label="Yes" />
@ -239,12 +172,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="physician" // defaultValue="physician"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({
...prevValues,
reference: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="friend" control={<Radio />} label="Friend" /> <FormControlLabel value="friend" control={<Radio />} label="Friend" />
@ -265,12 +193,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="email" // defaultValue="email"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({
...prevValues,
cellPhoneProvider: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="email" control={<Radio />} label="Email" /> <FormControlLabel value="email" control={<Radio />} label="Email" />
@ -278,6 +201,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
</form>
</> </>
)} )}

57
src/Components/PatientForm/OtherDetails8.tsx
View File

@ -1,10 +1,10 @@
import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material"; import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import React, { useEffect } from "react"; import React from "react";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import dayjs from "dayjs"; import dayjs from "dayjs";
interface Patient { interface FormValues {
familyHistory: string; familyHistory: string;
sleep: string; sleep: string;
pillow:string; pillow:string;
@ -14,21 +14,9 @@ interface Patient {
menstralCycle: any; menstralCycle: any;
} }
type Props = { export default function OtherDetails8(){
handleFormSection8Data:(
familyHistory: string|undefined,
sleep: string|undefined,
pillow:string|undefined,
orthotics:string|undefined,
brestExam: any,
pregnancy:string|undefined,
menstralCycle: any,
)=> void
}
export default function OtherDetails8({handleFormSection8Data}:Props){
const [patient, setPatient] = React.useState<Patient>({ const [values, setValues] = React.useState<FormValues>({
familyHistory: '', familyHistory: '',
sleep: '', sleep: '',
pillow:'', pillow:'',
@ -38,18 +26,6 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
menstralCycle: dayjs('2022-04-17'), menstralCycle: dayjs('2022-04-17'),
}); });
useEffect(()=>{
handleFormSection8Data(
patient.familyHistory,
patient.sleep,
patient.pillow,
patient.orthotics,
patient.brestExam=dayjs(patient.brestExam),
patient.pregnancy,
patient.menstralCycle=dayjs(patient.menstralCycle)
)
},[patient])
const formatDate = (inputDate:any) => { const formatDate = (inputDate:any) => {
const date = new Date(inputDate); const date = new Date(inputDate);
const year = date.getUTCFullYear(); const year = date.getUTCFullYear();
@ -59,8 +35,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
console.log("dsfdsfsdf",values)
return( return(
<> <>
@ -73,7 +48,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
label="" label=""
name='explanation' name='explanation'
onChange={(event:any) => { onChange={(event:any) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
familyHistory: event.target.value, familyHistory: event.target.value,
})); }));
@ -87,9 +62,9 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
sleep: event.target.value, educationLevel: event.target.value,
})); }));
}} }}
> >
@ -106,7 +81,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
pillow: event.target.value, pillow: event.target.value,
})); }));
@ -124,7 +99,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
orthotics: event.target.value, orthotics: event.target.value,
})); }));
@ -141,10 +116,10 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={patient.brestExam} value={values.brestExam}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event)
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
brestExam: formattedDate, brestExam: formattedDate,
})); }));
@ -165,9 +140,9 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
pregnancy: event.target.value, orthotics: event.target.value,
})); }));
}} }}
> >
@ -182,10 +157,10 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={patient.menstralCycle} value={values.menstralCycle}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event)
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
menstralCycle: formattedDate, menstralCycle: formattedDate,
})); }));

232
src/Components/PatientForm/PainAnalysisSection4.tsx
View File

@ -2,119 +2,51 @@ import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import path from 'path';
import { useEffect } from 'react';
interface Patient { interface FormValues {
chiefComplaint:string; chiefComplaint:string;
painWorse: string[];
painBetter: string[];
painQuality: string[]; painQuality: string[];
painWorstTime: string[];
currentComplaintIssues: string[];
painDuration: string; painDuration: string;
currentTreatment: string; currentTreatment: string;
treatmentResults: string;
treatmentGoal: string; treatmentGoal: string;
selfTreatment:string;
}
type Props = {
handleFormSection4Data:(
chiefComplaint:string|undefined,
painWorse: any,
painBetter: any,
painQuality: any,
painWorstTime: any,
currentComplaintIssues: any,
painDuration: string|undefined,
currentTreatment: string|undefined,
treatmentGoal: string|undefined,
selfTreatment:string|undefined,
)=> void
} }
const validationSchema = Yup.object({
chiefComplaint:Yup.array().required('Required'),
painQuality: Yup.array().required('Required'),
painDuration: Yup.string().required('Required'),
currentTreatment: Yup.string().required('Required'),
treatmentResults: Yup.string().required('Required'),
treatmentGoal: Yup.string().required('Required'),
});
export default function PainAnalysisSection4({handleFormSection4Data}:Props){ export default function PainAnalysisSection4(){
const [patient, setPatient] = React.useState<Patient>({ const formik = useFormik<FormValues>({
chiefComplaint:'', initialValues:{
painWorse:[], chiefComplaint:'',
painBetter:[], painQuality:[],
painQuality:[], painDuration:'',
painWorstTime:[], currentTreatment:'',
currentComplaintIssues:[], treatmentResults:'',
painDuration:'', treatmentGoal:'',
currentTreatment:'', },
treatmentGoal:'', validationSchema,
selfTreatment:'', onSubmit:(values)=>{
}); console.log(values);
}
useEffect(()=>{ })
handleFormSection4Data( const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
patient.chiefComplaint, if (event.target.checked) {
patient.painWorse, formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
patient.painBetter, } else {
patient.painQuality, formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
patient.painWorstTime, }
patient.currentComplaintIssues, };
patient.painDuration,
patient.currentTreatment,
patient.treatmentGoal,
patient.selfTreatment,
)
},[patient])
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painWorse: checked
? [...prevValues.painWorse, name]
: prevValues.painWorse.filter((item) => item !== name),
}));
};
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painBetter: checked
? [...prevValues.painBetter, name]
: prevValues.painBetter.filter((item) => item !== name),
}));
};
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painQuality: checked
? [...prevValues.painQuality, name]
: prevValues.painQuality.filter((item) => item !== name),
}));
};
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painWorstTime: checked
? [...prevValues.painWorstTime, name]
: prevValues.painWorstTime.filter((item) => item !== name),
}));
};
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
currentComplaintIssues: checked
? [...prevValues.currentComplaintIssues, name]
: prevValues.currentComplaintIssues.filter((item) => item !== name),
}));
};
return( return(
<> <>
<form onSubmit={formik.handleSubmit}>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel> <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
</Grid> </Grid>
@ -124,13 +56,9 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
variant="outlined" variant="outlined"
label="How did your Chief complaint start?(ex-fell on ice)" label="How did your Chief complaint start?(ex-fell on ice)"
name='chiefComplaint' name='chiefComplaint'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.chiefComplaint}
...prevValues, onBlur={formik.handleBlur}
chiefComplaint: e.target.value,
}));
}}
value={patient.chiefComplaint}
/> />
</Grid> </Grid>
@ -139,27 +67,29 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>What makes your pain worse?</FormLabel> <FormLabel>What makes your pain worse?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />} control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
label="Bending" label="Bending"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />} control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
label="Standing" label="Standing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />} control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
label="Sitting" label="Sitting"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Walking" label="Walking"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Others" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -168,23 +98,23 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>What makes your pain better?</FormLabel> <FormLabel>What makes your pain better?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />} control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
label="laying down" label="laying down"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />} control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
label="Standing" label="Standing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />} control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
label="Sitting" label="Sitting"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Walking" label="Walking"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Others" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
@ -200,22 +130,25 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
label="Sharp" label="Sharp"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />} control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
label="Dull/Ache" label="Dull/Ache"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />} control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
label="Throbbing" label="Throbbing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Tingling/Numbness/Burning" label="Tingling/Numbness/Burning"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Others" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -224,26 +157,29 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>What is the worst time for your pain?</FormLabel> <FormLabel>What is the worst time for your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />} control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
label="Morning" label="Morning"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />} control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
label="During day" label="During day"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />} control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
label="Evening" label="Evening"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Lying in bed" label="Lying in bed"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -252,13 +188,8 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel> <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name="painDuration"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.painDuration}
...prevValues,
painDuration: e.target.value,
}));
}}
value={patient.painDuration}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="0-25%" control={<Radio />} label="0-25%" /> <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
@ -274,19 +205,19 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>Has your current complaint caused any of the following?</FormLabel> <FormLabel>Has your current complaint caused any of the following?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}> <FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />} control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
label="Muscle weakness" label="Muscle weakness"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />} control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
label="Bowel/Bladder problem" label="Bowel/Bladder problem"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />} control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
label="Digestion" label="Digestion"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />} control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
label="Cardiac/Respiratory" label="Cardiac/Respiratory"
/> />
@ -299,18 +230,16 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
<FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel> <FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
<RadioGroup <RadioGroup
name="painDuration" name="painDuration"
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.painDuration}
...prevValues,
selfTreatment: e.target.value,
}));
}}
value={patient.selfTreatment}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="yes" control={<Radio />} label="Yes" /> <FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" /> <FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup> </RadioGroup>
{formik.touched.painDuration && formik.errors.painDuration ? (
<div>{formik.errors.painDuration}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -323,17 +252,14 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
variant="outlined" variant="outlined"
label="What is your goal from treatment?(ex-play golf without pain)" label="What is your goal from treatment?(ex-play golf without pain)"
name='treatmentGoal' name='treatmentGoal'
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ value={formik.values.treatmentGoal}
...prevValues, onBlur={formik.handleBlur}
treatmentGoal: e.target.value,
}));
}}
value={patient.treatmentGoal}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form>
</> </>
)} )}

76
src/Components/PatientForm/PastTreatment5.tsx
View File

@ -1,9 +1,8 @@
import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import Table from '../Helper/AddNewTable'; import Table from '../Helper/AddNewTable';
import { useEffect } from 'react';
interface Patient { interface FormValues {
generalHealth: string; generalHealth: string;
presentProblemBefore: string; presentProblemBefore: string;
ifYespresentProblemBefore:string; ifYespresentProblemBefore:string;
@ -18,27 +17,10 @@ interface Patient {
supplementsOrDrugs: string; supplementsOrDrugs: string;
} }
type Props = {
handleFormSection5Data:(
generalHealth: string|undefined,
presentProblemBefore: string|undefined,
ifYespresentProblemBefore:string|undefined,
ifYestreatmentProvided: string|undefined,
ifYesOutcome: string|undefined,
strokeBloodclotting: string|undefined,
ifYesstrokeBloodclotting: string|undefined,
dizzinessFetigue: string|undefined,
ifyesdizzinessFetigue: string|undefined,
antiColligent: string|undefined,
injuriesHospitalization: string|undefined,
supplementsOrDrugs: string|undefined,
)=> void
}
export default function PastTreatment5(){
export default function PastTreatment5({handleFormSection5Data}:Props){ const [values, setValues] = React.useState<FormValues>({
const [patient, setPatient] = React.useState<Patient>({
generalHealth: '', generalHealth: '',
presentProblemBefore: '', presentProblemBefore: '',
ifYespresentProblemBefore:'', ifYespresentProblemBefore:'',
@ -53,23 +35,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
supplementsOrDrugs:'' supplementsOrDrugs:''
}); });
useEffect(()=>{ console.log("dsfdsfdsfg",values)
handleFormSection5Data(
patient.generalHealth,
patient.presentProblemBefore,
patient.ifYespresentProblemBefore,
patient.ifYestreatmentProvided,
patient.ifYesOutcome,
patient.strokeBloodclotting,
patient.ifYesstrokeBloodclotting,
patient.dizzinessFetigue,
patient.ifyesdizzinessFetigue,
patient.antiColligent,
patient.injuriesHospitalization,
patient.supplementsOrDrugs,
)
},[patient])
return( return(
<> <>
<form> <form>
@ -82,7 +48,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
generalHealth: event.target.value, generalHealth: event.target.value,
})); }));
@ -104,7 +70,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
presentProblemBefore: event.target.value, presentProblemBefore: event.target.value,
})); }));
@ -122,9 +88,9 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'} disabled={values.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
ifYespresentProblemBefore: event.target.value, ifYespresentProblemBefore: event.target.value,
})); }));
@ -136,9 +102,9 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
variant="outlined" variant="outlined"
label="Was treatment provided?If yes, by whom?" label="Was treatment provided?If yes, by whom?"
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'} disabled={values.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
ifYestreatmentProvided: event.target.value, ifYestreatmentProvided: event.target.value,
})); }));
@ -150,9 +116,9 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
variant="outlined" variant="outlined"
label="Outcome?" label="Outcome?"
name='treatmentGoal' name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'} disabled={values.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
ifYesOutcome: event.target.value, ifYesOutcome: event.target.value,
})); }));
@ -168,7 +134,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
strokeBloodclotting: event.target.value, strokeBloodclotting: event.target.value,
})); }));
@ -185,9 +151,9 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={patient.strokeBloodclotting!=='Yes'} disabled={values.strokeBloodclotting!=='Yes'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
ifYesstrokeBloodclotting: event.target.value, ifYesstrokeBloodclotting: event.target.value,
})); }));
@ -202,7 +168,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
dizzinessFetigue: event.target.value, dizzinessFetigue: event.target.value,
})); }));
@ -219,9 +185,9 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={patient.dizzinessFetigue!=='Yes'} disabled={values.dizzinessFetigue!=='Yes'}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
ifyesdizzinessFetigue: event.target.value, ifyesdizzinessFetigue: event.target.value,
})); }));
@ -236,7 +202,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
antiColligent: event.target.value, antiColligent: event.target.value,
})); }));
@ -255,7 +221,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
injuriesHospitalization: event.target.value, injuriesHospitalization: event.target.value,
})); }));
@ -279,7 +245,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
label="" label=""
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
supplementsOrDrugs: event.target.value, supplementsOrDrugs: event.target.value,
})); }));

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

@ -21,6 +21,22 @@ import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
import OtherDetails8 from './OtherDetails8'; import OtherDetails8 from './OtherDetails8';
import PatientImageMarker from '../ImageMarker/PatientImageMarker'; import PatientImageMarker from '../ImageMarker/PatientImageMarker';
interface Patient {
fullName: string;
homePhone: string;
cellPhone: string;
email: string;
age: number;
dateOfBirth: string;
socialSecurityNumber: string;
mailingAddress: string;
city: string;
state: string;
zipCode: string;
gender: string;
maritalStatus: string;
}
const Accordion = styled((props: AccordionProps) => ( const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} /> <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({ ))(({ theme }) => ({
@ -57,291 +73,30 @@ import PatientImageMarker from '../ImageMarker/PatientImageMarker';
borderTop: '1px solid rgba(0, 0, 0, .125)', borderTop: '1px solid rgba(0, 0, 0, .125)',
})); }));
export default function PatientForm(){ export default function PatientForm(){
const [expanded, setExpanded] = React.useState<string | false>('panel1'); const [expanded, setExpanded] = React.useState<string | false>('panel1');
const [isChecked, setIsChecked] = React.useState(false); const [isChecked, setIsChecked] = React.useState(false);
const [signature,setSignature]=React.useState(''); const [signature,setSignature]=React.useState('');
const [section1Data, setSection1Data] = React.useState<any>({});
const [section2Data, setSection2Data] = React.useState<any>({}); const [patient, setPatient] = React.useState<Patient>({
const [section3Data, setSection3Data] = React.useState<any>({}); fullName: "",
const [section4Data, setSection4Data] = React.useState<any>({}); homePhone: "",
const [section5Data, setSection5Data] = React.useState<any>({}); cellPhone: "",
const [section6Data, setSection6Data] = React.useState<any>({}); email: "",
const [section7Data, setSection7Data] = React.useState<any>({}); age: 0,
const [section8Data, setSection8Data] = React.useState<any>({}); dateOfBirth: "",
const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState<any>({}); socialSecurityNumber: "",
const [allPatientData, setAllPatientData] = React.useState<any>([]); mailingAddress: "",
city: "",
const handleFormSection1Data = ( state: "",
fullName?: string|undefined, zipCode: "",
homePhone?: string|undefined, gender: "",
cellPhone?: string|undefined, maritalStatus: "",
email?: string|undefined, });
age?: number|undefined|string,
dateOfBirth?: string|undefined,
socialSecurityNumber?: string|undefined,
mailingAddress?: string|undefined,
city?: string|undefined,
state?: string|undefined,
zipCode?: string|undefined,
gender?: string|undefined,
) =>{
setSection1Data({
fullName,
homePhone,
cellPhone,
email,
age,
dateOfBirth,
socialSecurityNumber,
mailingAddress,
city,
state,
zipCode,
gender,
})
}
const handleFormSection2Data = (
maritalStatus: string | undefined,
numberOfChildren: string | undefined,
occupation: string | undefined,
hoursPerWeek: number | string | undefined,
employer: string | undefined,
businessPhone: string | undefined,
spouseName: string | undefined,
spouseEmployer: string | undefined,
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
) =>{
setSection2Data({
maritalStatus,
numberOfChildren,
occupation,
hoursPerWeek,
employer,
businessPhone,
spouseName,
spouseEmployer,
spouseBusinessPhone,
emergencyContact,
relationship,
spousePhone,
})
}
const handleFormSection3Data = (
physicianname: string |undefined,
physiciancity: string |undefined,
physicianstate: string |undefined,
physicianphone: string |undefined,
chiropractorName: string |undefined,
chiropractorState: string |undefined,
xray: string|undefined,
haveChiropractor: string|undefined,
reference: string|undefined,
visitDetails: string |undefined,
cellPhoneProvider: string |undefined,
) =>{
setSection3Data({
physicianname,
physiciancity,
physicianstate,
physicianphone,
chiropractorName,
chiropractorState,
xray,
haveChiropractor,
reference,
visitDetails,
cellPhoneProvider,
})
}
const handleFormSection4Data = (
chiefComplaint:string|undefined,
painWorse: any,
painBetter: any,
painQuality: any,
painWorstTime: any,
currentComplaintIssues: any,
painDuration: string|undefined,
currentTreatment: string|undefined,
treatmentGoal: string|undefined,
selfTreatment:string|undefined,
) =>{
setSection4Data({
chiefComplaint,
painWorse,
painBetter,
painQuality,
painWorstTime,
currentComplaintIssues,
painDuration,
currentTreatment,
treatmentGoal,
selfTreatment,
})
}
const handleFormSection5Data = (
generalHealth: string|undefined,
presentProblemBefore: string|undefined,
ifYespresentProblemBefore:string|undefined,
ifYestreatmentProvided: string|undefined,
ifYesOutcome: string|undefined,
strokeBloodclotting: string|undefined,
ifYesstrokeBloodclotting: string|undefined,
dizzinessFetigue: string|undefined,
ifyesdizzinessFetigue: string|undefined,
antiColligent: string|undefined,
injuriesHospitalization: string|undefined,
supplementsOrDrugs: string|undefined,
) =>{
setSection5Data({
generalHealth,
presentProblemBefore,
ifYespresentProblemBefore,
ifYestreatmentProvided,
ifYesOutcome,
strokeBloodclotting,
ifYesstrokeBloodclotting,
dizzinessFetigue,
ifyesdizzinessFetigue,
antiColligent,
injuriesHospitalization,
supplementsOrDrugs,
})
}
const handleFormSection6Data = (
eyes: string|undefined,
IntestinesBowls: string|undefined,
jointsBones:string|undefined,
allergies: string|undefined,
earsNoseMouth: string|undefined,
urinary: string|undefined,
skin: string|undefined,
psychological: string|undefined,
heart: string|undefined,
muscles: string|undefined,
internalOrgans: string|undefined,
gynecological: string|undefined,
lungsBreathing: string|undefined,
nerves: string|undefined,
blood: string|undefined,
prostate: string|undefined,
explanation:string|undefined,
) =>{
setSection6Data({
eyes,
IntestinesBowls,
jointsBones,
allergies,
earsNoseMouth,
urinary,
skin,
psychological,
heart,
muscles,
internalOrgans,
gynecological,
lungsBreathing,
nerves,
blood,
prostate,
explanation,
})
}
const handleFormSection7Data = (
hobbies: string|undefined,
educationLevel: string|undefined,
excercise: string|undefined,
excerciseExplanation: string|undefined,
tobacco: string|undefined,
tobaccoExplanation: string|undefined,
alcohol: string|undefined,
alcoholExplanation: string|undefined,
healthyDiet: string|undefined,
healthyDietExplanation: string|undefined,
sleep: string|undefined,
sleepExplanation: string|undefined,
workSchool: string|undefined,
workSchoolExplanation: string|undefined,
familyLife: string|undefined,
familyLifeExplanation: string|undefined,
drugs: string|undefined,
drugsExplanation:string|undefined,
) =>{
setSection7Data({
hobbies,
educationLevel,
excercise,
excerciseExplanation,
tobacco,
tobaccoExplanation,
alcohol,
alcoholExplanation,
healthyDiet,
healthyDietExplanation,
sleep,
sleepExplanation,
workSchool,
workSchoolExplanation,
familyLife,
familyLifeExplanation,
drugs,
drugsExplanation,
})
}
const handleFormSection8Data = (
familyHistory: string|undefined,
sleep: string|undefined,
pillow: string|undefined,
orthotics: string|undefined,
brestExam: any,
pregnancy: string|undefined,
menstralCycle: any,
) =>{
setSection8Data({
familyHistory,
sleep,
pillow,
orthotics,
brestExam,
pregnancy,
menstralCycle,
})
}
const handleSubmit = () => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
const newPatientData = { event.preventDefault();
section1: section1Data,
section2: section2Data,
section3: section3Data,
section4: section4Data,
section5: section5Data,
section6: section6Data,
section7: section7Data,
section8: section8Data,
}; };
// Create a copy of the existing data array and push the new patient data
const updatedAllPatientData = [...allPatientData, newPatientData];
// Update the state with the new array
setAllPatientData(updatedAllPatientData);
console.log("UpdatedallPatientData:", updatedAllPatientData);
};
const handleExpandChange = const handleExpandChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => { (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
@ -351,7 +106,6 @@ export default function PatientForm(){
const handleCheckboxChange = (event:any) => { const handleCheckboxChange = (event:any) => {
setIsChecked(event.target.checked); setIsChecked(event.target.checked);
}; };
return( return(
@ -359,7 +113,7 @@ export default function PatientForm(){
<Paper elevation={0} className='app-screen-constants'> <Paper elevation={0} className='app-screen-constants'>
<Header/> <Header/>
<Paper elevation={0} sx={{margin:4, minHeight:550}} > <Paper elevation={0} sx={{margin:4, minHeight:550}} >
{/* <form onSubmit={handleSubmit}> */} <form onSubmit={handleSubmit}>
<Typography sx={{fontSize:20}} gutterBottom> <Typography sx={{fontSize:20}} gutterBottom>
Confidential Patient Information Confidential Patient Information
</Typography> </Typography>
@ -375,7 +129,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PersonalSection handleFormSection1Data={handleFormSection1Data}/> <PersonalSection/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -386,7 +140,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<FamilyFormSection handleFormSection2Data={handleFormSection2Data}/> <FamilyFormSection/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -396,7 +150,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<MedicalHistory handleFormSection3Data={handleFormSection3Data}/> <MedicalHistory/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -417,7 +171,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/> <PainAnalysisSection4/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -427,7 +181,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PastTreatment5 handleFormSection5Data={handleFormSection5Data}/> <PastTreatment5/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -437,7 +191,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<SystemReviewSection6 handleFormSection6Data={handleFormSection6Data}/> <SystemReviewSection6/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -447,7 +201,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<RecreationalHobbiesSection7 handleFormSection7Data={handleFormSection7Data}/> <RecreationalHobbiesSection7/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -457,7 +211,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<OtherDetails8 handleFormSection8Data={handleFormSection8Data}/> <OtherDetails8/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -488,18 +242,17 @@ export default function PatientForm(){
</Grid> </Grid>
<Grid> <Grid>
<Button <Button
// type="submit" type="submit"
variant="contained" variant="contained"
color="primary" color="primary"
sx={{ margin: 5, left: '40%', width: '200px' }} sx={{ margin: 5, left: '40%', width: '200px' }}
disabled={isChecked==false || signature==''} disabled={isChecked==false || signature==''}
onClick={handleSubmit}
> >
Submit Submit
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
{/* </form> */} </form>
</Paper> </Paper>
<Footer/> <Footer/>

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

@ -4,7 +4,6 @@ import { useFormik } from "formik";
import * as yup from "yup"; import * as yup from "yup";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useEffect } from 'react';
interface Patient { interface Patient {
fullName: string; fullName: string;
@ -19,6 +18,7 @@ interface Patient {
state: string; state: string;
zipCode: string; zipCode: string;
gender: string; gender: string;
maritalStatus: string;
} }
const validationSchema = yup.object({ const validationSchema = yup.object({
@ -35,81 +35,57 @@ interface Patient {
zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required") zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
}); });
type Props = { export default function PersonalSection(){
handleFormSection1Data:(
fullName?: string|undefined,
homePhone?: string|undefined,
cellPhone?: string|undefined,
email?: string|undefined,
age?: number|undefined|string,
dateOfBirth?: string|undefined,
socialSecurityNumber?: string|undefined,
mailingAddress?: string|undefined,
city?: string|undefined,
state?: string|undefined,
zipCode?: string|undefined,
gender?: string|undefined,
)=> void
}
export default function PersonalSection({handleFormSection1Data}:Props){
const [startDateValue, setStartDateValue] = React.useState<any>(); const [startDateValue, setStartDateValue] = React.useState<any>();
const [emailValue, setEmailValue]= React.useState<string>('');
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
fullName: "", fullName: "",
homePhone: "", homePhone: "",
cellPhone: "", cellPhone: "",
email: "", email: "",
age: 0, age: 0,
dateOfBirth: startDateValue, dateOfBirth: "",
socialSecurityNumber: "", socialSecurityNumber: "",
mailingAddress:"", mailingAddress:"",
city: "", city: "",
state: "", state: "",
zipCode: "", zipCode: "",
gender: "male", gender: "male",
maritalStatus: "",
}); });
const formik = useFormik<Patient>({
useEffect(()=>{ initialValues: {
handleFormSection1Data( fullName: "",
patient.fullName, homePhone: "",
patient.homePhone, cellPhone: "",
patient.cellPhone, email: "",
patient.email, age: "",
patient.age, dateOfBirth: "",
startDateValue, socialSecurityNumber: "",
patient.socialSecurityNumber, mailingAddress:"",
patient.mailingAddress, city: "",
patient.city, state: "",
patient.state, zipCode: "",
patient.zipCode, gender: "male",
patient.gender, maritalStatus: "",
) },
},[patient]) validationSchema,
onSubmit: (values) => {
// const formik = useFormik<Patient>({ // Do something with the patient data
// initialValues: { console.log(values);
// fullName: "", },
// homePhone: "", });
// cellPhone: "",
// email: "", const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// age: "", console.log("dsfsdfsdf",event.target.value)
// dateOfBirth: "", const { name, value } = event.target;
// socialSecurityNumber: "", setPatient((prevPatient) => ({
// mailingAddress: "", ...prevPatient,
// city: "", [name]: value,
// state: "", }));
// zipCode: "", };
// gender: "male",
// },
// validationSchema,
// onSubmit: (values) => {
// // Do something with the patient data
// console.log(values,"sdfdsfsd34");
// },
// });
return( return(
<> <>
@ -120,16 +96,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
label="Patient's Full Name" label="Patient's Full Name"
name="fullName" name="fullName"
placeholder='Please enter your name' placeholder='Please enter your name'
value={patient.fullName} value={formik.values.fullName}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.fullName && Boolean(formik.errors.fullName)}
fullName: e.target.value, helperText={formik.touched.fullName && formik.errors.fullName}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.fullName && Boolean(formik.errors.fullName)}
// helperText={formik.touched.fullName && formik.errors.fullName}
required required
/> />
</Grid> </Grid>
@ -141,16 +112,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
label="Phone Number" label="Phone Number"
name="cellPhone" name="cellPhone"
placeholder='Please enter your cell Phone number' placeholder='Please enter your cell Phone number'
value={patient.cellPhone} value={formik.values.cellPhone}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
cellPhone: e.target.value, helperText={formik.touched.cellPhone && formik.errors.cellPhone}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
// helperText={formik.touched.cellPhone && formik.errors.cellPhone}
/> />
</Grid> </Grid>
@ -160,16 +126,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
label="Home Phone Number" label="Home Phone Number"
name="homePhone" name="homePhone"
placeholder='Please enter your home phone' placeholder='Please enter your home phone'
value={patient.homePhone} value={formik.values.homePhone}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
homePhone: e.target.value, helperText={formik.touched.homePhone && formik.errors.homePhone}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
// helperText={formik.touched.homePhone && formik.errors.homePhone}
/> />
</Grid> </Grid>
@ -179,14 +140,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
label="Email" label="Email"
name="email" name="email"
placeholder='Please enter your email' placeholder='Please enter your email'
value={patient.email} value={emailValue}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setEmailValue(e.target.value)
...prevValues,
email: e.target.value,
}));
}} }}
// onBlur={formik.handleBlur} onBlur={formik.handleBlur}
// error={formik.touched.email && Boolean(formik.errors.email)} // error={formik.touched.email && Boolean(formik.errors.email)}
// helperText={formik.touched.email && formik.errors.email} // helperText={formik.touched.email && formik.errors.email}
/> />
@ -199,16 +157,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
name="age" name="age"
type="number" type="number"
placeholder='Please enter your age' placeholder='Please enter your age'
value={patient.age} value={formik.values.age}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.age && Boolean(formik.errors.age)}
age: e.target.value, helperText={formik.touched.age && formik.errors.age}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.age && Boolean(formik.errors.age)}
// helperText={formik.touched.age && formik.errors.age}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -232,16 +185,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
variant="outlined" variant="outlined"
label="Social Security Number" label="Social Security Number"
name="socialSecurityNumber" name="socialSecurityNumber"
value={patient.socialSecurityNumber} value={formik.values.socialSecurityNumber}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
socialSecurityNumber: e.target.value, helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
/> />
</Grid> </Grid>
@ -251,16 +199,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
variant="outlined" variant="outlined"
label="Mailing Address" label="Mailing Address"
name="mailingAddress" name="mailingAddress"
value={patient.mailingAddress} value={formik.values.mailingAddress}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
mailingAddress: e.target.value, helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
// helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
/> />
</Grid> </Grid>
@ -269,14 +212,9 @@ export default function PersonalSection({handleFormSection1Data}:Props){
variant="outlined" variant="outlined"
label="State" label="State"
name="state" name="state"
value={patient.state} value={formik.values.state}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues,
state: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.state && Boolean(formik.errors.state)} // error={formik.touched.state && Boolean(formik.errors.state)}
// helperText={formik.touched.state && formik.errors.state} // helperText={formik.touched.state && formik.errors.state}
/> />
@ -288,16 +226,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
variant="outlined" variant="outlined"
label="City" label="City"
name="city" name="city"
value={patient.city} value={formik.values.city}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.city && Boolean(formik.errors.city)}
city: e.target.value, helperText={formik.touched.city && formik.errors.city}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.city && Boolean(formik.errors.city)}
// helperText={formik.touched.city && formik.errors.city}
/> />
</Grid> </Grid>
@ -306,16 +239,11 @@ export default function PersonalSection({handleFormSection1Data}:Props){
variant="outlined" variant="outlined"
label="Zip Code" label="Zip Code"
name="zipCode" name="zipCode"
value={patient.zipCode} value={formik.values.zipCode}
onChange={(e)=>{ onChange={formik.handleChange}
setPatient((prevValues) => ({ onBlur={formik.handleBlur}
...prevValues, error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
zipCode: e.target.value, helperText={formik.touched.zipCode && formik.errors.zipCode}
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
// helperText={formik.touched.zipCode && formik.errors.zipCode}
/> />
</Grid> </Grid>
@ -324,14 +252,9 @@ export default function PersonalSection({handleFormSection1Data}:Props){
<FormLabel>Gender</FormLabel> <FormLabel>Gender</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue={patient.gender} defaultValue="male"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={handleChange}
setPatient((prevValues) => ({
...prevValues,
gender: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="male" control={<Radio />} label="Male" />

108
src/Components/PatientForm/RecreationalHobbiesSection7.tsx
View File

@ -1,7 +1,7 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material"; import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React, { useEffect } from "react"; import React from "react";
interface Patient { interface FormValues {
hobbies: string; hobbies: string;
educationLevel: string; educationLevel: string;
excercise: string; excercise: string;
@ -22,31 +22,8 @@ interface Patient {
drugsExplanation:string; drugsExplanation:string;
} }
type Props = { export default function RecreationalHobbiesSection7(){
handleFormSection7Data:( const [values, setValues] = React.useState<FormValues>({
hobbies: string|undefined,
educationLevel: string|undefined,
excercise: string|undefined,
excerciseExplanation: string|undefined,
tobacco: string|undefined,
tobaccoExplanation: string|undefined,
alcohol: string|undefined,
alcoholExplanation: string|undefined,
healthyDiet: string|undefined,
healthyDietExplanation: string|undefined,
sleep: string|undefined,
sleepExplanation: string|undefined,
workSchool: string|undefined,
workSchoolExplanation: string|undefined,
familyLife: string|undefined,
familyLifeExplanation: string|undefined,
drugs: string|undefined,
drugsExplanation:string|undefined,
)=> void
}
export default function RecreationalHobbiesSection7({handleFormSection7Data}:Props){
const [patient, setPatient] = React.useState<Patient>({
hobbies: '', hobbies: '',
educationLevel: '', educationLevel: '',
excercise:'', excercise:'',
@ -66,31 +43,6 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
drugs: '', drugs: '',
drugsExplanation:'' drugsExplanation:''
}); });
useEffect(()=>{
handleFormSection7Data(
patient.hobbies,
patient.educationLevel,
patient.excercise,
patient.excerciseExplanation,
patient.tobacco,
patient.tobaccoExplanation,
patient.alcohol,
patient.alcoholExplanation,
patient.healthyDiet,
patient.healthyDietExplanation,
patient.sleep,
patient.sleepExplanation,
patient.workSchool,
patient.workSchoolExplanation,
patient.familyLife,
patient.familyLifeExplanation,
patient.drugs,
patient.drugsExplanation
)
},[patient])
return( return(
<> <>
@ -103,7 +55,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
label="" label=""
name='explanation' name='explanation'
onChange={(event:any) => { onChange={(event:any) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
hobbies: event.target.value, hobbies: event.target.value,
})); }));
@ -117,7 +69,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
educationLevel: event.target.value, educationLevel: event.target.value,
})); }));
@ -139,7 +91,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
excercise: event.target.value, excercise: event.target.value,
})); }));
@ -153,12 +105,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.excercise!=='Yes'} disabled={values.excercise!=='Yes'}
variant="outlined" variant="outlined"
label="Times per week?" label="Times per week?"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
excerciseExplanation: event.target.value, excerciseExplanation: event.target.value,
})); }));
@ -173,7 +125,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
tobacco: event.target.value, tobacco: event.target.value,
})); }));
@ -187,12 +139,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.tobacco!=='Yes'} disabled={values.tobacco!=='Yes'}
variant="outlined" variant="outlined"
label="Packs/Cans per day(If you have quit, when did you quit?)" label="Packs/Cans per day(If you have quit, when did you quit?)"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
excerciseExplanation: event.target.value, excerciseExplanation: event.target.value,
})); }));
@ -207,7 +159,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
alcohol: event.target.value, alcohol: event.target.value,
})); }));
@ -221,12 +173,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.alcohol!=='Yes'} disabled={values.alcohol!=='Yes'}
variant="outlined" variant="outlined"
label="How many drinks per week?" label="How many drinks per week?"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
alcoholExplanation: event.target.value, alcoholExplanation: event.target.value,
})); }));
@ -241,7 +193,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
healthyDiet: event.target.value, healthyDiet: event.target.value,
})); }));
@ -255,12 +207,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.healthyDiet!=='No'} disabled={values.healthyDiet!=='No'}
variant="outlined" variant="outlined"
label="If no, explain" label="If no, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
healthyDietExplanation: event.target.value, healthyDietExplanation: event.target.value,
})); }));
@ -275,7 +227,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
sleep: event.target.value, sleep: event.target.value,
})); }));
@ -289,12 +241,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.sleep!=='No'} disabled={values.sleep!=='No'}
variant="outlined" variant="outlined"
label="If no, explain" label="If no, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
sleepExplanation: event.target.value, sleepExplanation: event.target.value,
})); }));
@ -309,7 +261,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
workSchool: event.target.value, workSchool: event.target.value,
})); }));
@ -323,12 +275,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.workSchool!=='Yes'} disabled={values.workSchool!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
workSchool: event.target.value, workSchool: event.target.value,
})); }));
@ -343,7 +295,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
familyLife: event.target.value, familyLife: event.target.value,
})); }));
@ -357,12 +309,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.familyLife!=='Yes'} disabled={values.familyLife!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
familyLifeExplanation: event.target.value, familyLifeExplanation: event.target.value,
})); }));
@ -377,7 +329,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
drugs: event.target.value, drugs: event.target.value,
})); }));
@ -391,12 +343,12 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={patient.drugs!=='Yes'} disabled={values.drugs!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setPatient((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
drugsExplanation: event.target.value, drugsExplanation: event.target.value,
})); }));

89
src/Components/PatientForm/SyestemReviewSection6.tsx
View File

@ -1,7 +1,7 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material"; import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React, { useEffect } from "react"; import React from "react";
interface Patient { interface FormValues {
eyes: string; eyes: string;
IntestinesBowls: string; IntestinesBowls: string;
jointsBones:string; jointsBones:string;
@ -21,30 +21,8 @@ interface Patient {
explanation:string; explanation:string;
} }
type Props = { export default function SystemReviewSection6(){
handleFormSection6Data:( const [values, setValues] = React.useState<FormValues>({
eyes: string|undefined,
IntestinesBowls: string|undefined,
jointsBones:string|undefined,
allergies: string|undefined,
earsNoseMouth: string|undefined,
urinary: string|undefined,
skin: string|undefined,
psychological: string|undefined,
heart: string|undefined,
muscles: string|undefined,
internalOrgans: string|undefined,
gynecological: string|undefined,
lungsBreathing: string|undefined,
nerves: string|undefined,
blood: string|undefined,
prostate: string|undefined,
explanation:string|undefined,
)=> void
}
export default function SystemReviewSection6({handleFormSection6Data}:Props){
const [patient, setPatients] = React.useState<Patient>({
eyes: '', eyes: '',
IntestinesBowls: '', IntestinesBowls: '',
jointsBones:'', jointsBones:'',
@ -63,28 +41,6 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
prostate: '', prostate: '',
explanation:'', explanation:'',
}); });
useEffect(()=>{
handleFormSection6Data(
patient.eyes,
patient.IntestinesBowls,
patient.jointsBones,
patient.allergies,
patient.earsNoseMouth,
patient.urinary,
patient.skin,
patient.psychological,
patient.heart,
patient.muscles,
patient.internalOrgans,
patient.gynecological,
patient.lungsBreathing,
patient.nerves,
patient.blood,
patient.prostate,
patient.explanation,
)
},[patient])
return( return(
<> <>
<Grid item xs={12} className='collapsable-form-style '> <Grid item xs={12} className='collapsable-form-style '>
@ -98,7 +54,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
eyes: event.target.value, eyes: event.target.value,
})); }));
@ -116,9 +72,9 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
IntestinesBowls: event.target.value, presentProblemBefore: event.target.value,
})); }));
}} }}
> >
@ -134,7 +90,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
jointsBones: event.target.value, jointsBones: event.target.value,
})); }));
@ -152,7 +108,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
allergies: event.target.value, allergies: event.target.value,
})); }));
@ -170,7 +126,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
earsNoseMouth: event.target.value, earsNoseMouth: event.target.value,
})); }));
@ -188,7 +144,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
urinary: event.target.value, urinary: event.target.value,
})); }));
@ -206,7 +162,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
skin: event.target.value, skin: event.target.value,
})); }));
@ -224,7 +180,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
psychological: event.target.value, psychological: event.target.value,
})); }));
@ -242,7 +198,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
heart: event.target.value, heart: event.target.value,
})); }));
@ -260,7 +216,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
muscles: event.target.value, muscles: event.target.value,
})); }));
@ -278,7 +234,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
internalOrgans: event.target.value, internalOrgans: event.target.value,
})); }));
@ -296,7 +252,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
gynecological: event.target.value, gynecological: event.target.value,
})); }));
@ -315,7 +271,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
lungsBreathing: event.target.value, lungsBreathing: event.target.value,
})); }));
@ -333,7 +289,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
nerves: event.target.value, nerves: event.target.value,
})); }));
@ -351,7 +307,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
blood: event.target.value, blood: event.target.value,
})); }));
@ -369,7 +325,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
prostate: event.target.value, prostate: event.target.value,
})); }));
@ -387,9 +343,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
variant="outlined" variant="outlined"
label="" label=""
name='explanation' name='explanation'
value={patient.explanation}
onChange={(event:any) => { onChange={(event:any) => {
setPatients((prevValues) => ({ setValues((prevValues) => ({
...prevValues, ...prevValues,
explanation: event.target.value, explanation: event.target.value,
})); }));