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

Merge branch 'develop' into feature/view-patient-data

Browse Source
This commit is contained in:
vipeeshpavithran 2023-09-05 14:37:11 +05:30
commit 84a55d48c8
9 changed files with 1141 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,27 +2,26 @@ 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 FormValues { interface Patient {
maritalStatus: string; maritalStatus: string | undefined,
numberOfChildren: string; numberOfChildren: string | undefined,
ages: string; occupation: string | undefined,
occupation: string; hoursPerWeek: number | string | undefined,
hoursPerWeek: number | string; employer: string | undefined,
employer: string; businessPhone: string | undefined,
businessPhone: string; spouseName: string | undefined,
spouseName: string; spouseEmployer: string | undefined,
spouseEmployer: string; spouseBusinessPhone: string | undefined,
spouseBusinessPhone: string; emergencyContact: string | undefined,
emergencyContact: string; relationship: string | undefined,
relationship: string; spousePhone: string | undefined,
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"),
@ -35,31 +34,59 @@ 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"),
}); });
export default function FamilyFormSection(){ type Props = {
const formik = useFormik<FormValues>({ handleFormSection2Data:(
initialValues:{ maritalStatus: string | undefined,
maritalStatus:'', numberOfChildren: string | undefined,
numberOfChildren:'', occupation: string | undefined,
ages:'', hoursPerWeek: number | string | undefined,
occupation:'', employer: string | undefined,
hoursPerWeek:'', businessPhone: string | undefined,
employer:'', spouseName: string | undefined,
businessPhone:'', spouseEmployer: string | undefined,
spouseName:'', spouseBusinessPhone: string | undefined,
spouseEmployer:'', emergencyContact: string | undefined,
spouseBusinessPhone:'', relationship: string | undefined,
emergencyContact:'', spousePhone: string | undefined,
relationship:'', )=> void
spousePhone:'' }
},
validationSchema,
onSubmit:(values)=>{ export default function FamilyFormSection({handleFormSection2Data}:Props){
console.log(values); const [patient, setPatient] = React.useState<Patient>({
} 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>
@ -68,9 +95,14 @@ export default function FamilyFormSection(){
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue="married" defaultValue="married"
name="maritalStatus" name="maritalStatus"
onChange={formik.handleChange} value={patient.maritalStatus}
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}
> >
@ -93,9 +125,14 @@ export default function FamilyFormSection(){
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
name='numberOfChildren' name='numberOfChildren'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.numberOfChildren} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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}
/> />
@ -107,9 +144,14 @@ export default function FamilyFormSection(){
label="Occupation" label="Occupation"
className='collapsable-form-style' className='collapsable-form-style'
name='occupation' name='occupation'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.occupation} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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}
/> />
@ -122,9 +164,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='hoursPerWeek' name='hoursPerWeek'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.hoursPerWeek} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
hoursPerWeek: e.target.value,
}));
}}
value={patient.hoursPerWeek}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -134,9 +181,14 @@ export default function FamilyFormSection(){
label="Employer" label="Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='employer' name='employer'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.employer} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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 '>
@ -146,9 +198,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='businessPhone' name='businessPhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.businessPhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
businessPhone: e.target.value,
}));
}}
value={patient.businessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -164,9 +221,14 @@ export default function FamilyFormSection(){
label="Spouse's Name" label="Spouse's Name"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseName' name='spouseName'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseName} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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 '>
@ -175,9 +237,14 @@ export default function FamilyFormSection(){
label="Spouse's Employer" label="Spouse's Employer"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseEmployer' name='spouseEmployer'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseEmployer} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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 '>
@ -187,9 +254,14 @@ export default function FamilyFormSection(){
type="number" type="number"
className='collapsable-form-style' className='collapsable-form-style'
name='spouseBusinessPhone' name='spouseBusinessPhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spouseBusinessPhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spouseBusinessPhone: e.target.value,
}));
}}
value={patient.spouseBusinessPhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -202,12 +274,16 @@ export default function FamilyFormSection(){
<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={formik.handleChange} onChange={(e)=>{
value={formik.values.emergencyContact} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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 '>
@ -216,9 +292,14 @@ export default function FamilyFormSection(){
label="Relationship" label="Relationship"
className='collapsable-form-style' className='collapsable-form-style'
name='relationship' name='relationship'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.relationship} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
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 '>
@ -228,13 +309,17 @@ export default function FamilyFormSection(){
label="Phone" label="Phone"
className='collapsable-form-style' className='collapsable-form-style'
name='spousePhone' name='spousePhone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.spousePhone} setPatient((prevValues:any) => ({
onBlur={formik.handleBlur} ...prevValues,
spousePhone: e.target.value,
}));
}}
value={patient.spousePhone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form>
</> </>
) )
}; };

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

@ -2,19 +2,20 @@ 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 FormValues { interface Patient {
physicianname: string; physicianname: string |undefined;
physiciancity: string; physiciancity: string |undefined;
physicianstate: string; physicianstate: string |undefined;
physicianphone: string; physicianphone: string |undefined;
chiropractorName: string; chiropractorName: string |undefined;
chiropractorState: string; chiropractorState: string |undefined;
xray: boolean; xray: string|undefined;
ctScan: boolean; haveChiropractor: string|undefined;
cdImages: boolean; reference: string|undefined;
visitDetails: string; visitDetails: string |undefined;
cellPhoneProvider: string; cellPhoneProvider: string |undefined;
} }
const validationSchema = Yup.object({ const validationSchema = Yup.object({
@ -24,35 +25,61 @@ 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'),
ctScan: Yup.boolean().required('Required'), haveChiropractor: Yup.boolean().required('Required'),
cdImages: Yup.boolean().required('Required'), reference: Yup.boolean().required('Required'),
visitDetails: Yup.string().required('Required'), visitDetails: Yup.string().required('Required'),
cellPhoneProvider: Yup.string().required('Required'), cellPhoneProvider: Yup.string().required('Required'),
}); });
export default function MedicalHistoryForm(){ type Props = {
const formik = useFormik<FormValues>({ handleFormSection3Data:(
initialValues:{ physicianname?: string |undefined,
physicianname: '', physiciancity?: string |undefined,
physiciancity: '', physicianstate?: string |undefined,
physicianstate: '', physicianphone?: string |undefined,
physicianphone: '', chiropractorName?: string |undefined,
chiropractorName: '', chiropractorState?: string |undefined,
chiropractorState: '', xray?: string|undefined,
xray: false, haveChiropractor?: string|undefined,
ctScan: false, reference?: string|undefined,
cdImages: false, visitDetails?: string |undefined,
visitDetails: '', cellPhoneProvider?: string |undefined,
cellPhoneProvider: '', )=> void
}, }
validationSchema,
onSubmit:(values)=>{ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
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>
@ -63,9 +90,14 @@ export default function MedicalHistoryForm(){
variant="outlined" variant="outlined"
label="Family physician" label="Family physician"
name='physicianname' name='physicianname'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.physicianname} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
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'>
@ -73,9 +105,14 @@ export default function MedicalHistoryForm(){
variant="outlined" variant="outlined"
label="City" label="City"
name='physiciancity' name='physiciancity'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.physiciancity} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
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'>
@ -83,9 +120,14 @@ export default function MedicalHistoryForm(){
variant="outlined" variant="outlined"
label="State" label="State"
name='physicianstate' name='physicianstate'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.physicianstate} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
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'>
@ -94,9 +136,14 @@ export default function MedicalHistoryForm(){
label="Phone" label="Phone"
type="number" type="number"
name='physicianphone' name='physicianphone'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.physicianphone} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
physicianphone: e.target.value,
}));
}}
value={patient.physicianphone}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -115,7 +162,12 @@ export default function MedicalHistoryForm(){
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={formik.handleChange} onChange={(e)=>{
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" />
@ -129,9 +181,14 @@ export default function MedicalHistoryForm(){
variant="outlined" variant="outlined"
label="Chiropractor's Name" label="Chiropractor's Name"
name='chiropractorName' name='chiropractorName'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.chiropractorName} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
chiropractorName: e.target.value,
}));
}}
value={patient.chiropractorName}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
@ -140,9 +197,14 @@ export default function MedicalHistoryForm(){
variant="outlined" variant="outlined"
label="City/State" label="City/State"
name='chiropractorState' name='chiropractorState'
onChange={formik.handleChange} onChange={(e)=>{
value={formik.values.chiropractorState} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
chiropractorState: e.target.value,
}));
}}
value={patient.chiropractorState}
// onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
</Grid> </Grid>
@ -155,7 +217,12 @@ export default function MedicalHistoryForm(){
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={formik.handleChange} onChange={(e)=>{
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" />
@ -172,7 +239,12 @@ export default function MedicalHistoryForm(){
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={formik.handleChange} onChange={(e)=>{
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" />
@ -193,7 +265,12 @@ export default function MedicalHistoryForm(){
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={formik.handleChange} onChange={(e)=>{
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" />
@ -201,7 +278,6 @@ export default function MedicalHistoryForm(){
</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 from "react"; import React, { useEffect } 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 FormValues { interface Patient {
familyHistory: string; familyHistory: string;
sleep: string; sleep: string;
pillow:string; pillow:string;
@ -14,9 +14,21 @@ interface FormValues {
menstralCycle: any; menstralCycle: any;
} }
export default function OtherDetails8(){ type Props = {
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 [values, setValues] = React.useState<FormValues>({ const [patient, setPatient] = React.useState<Patient>({
familyHistory: '', familyHistory: '',
sleep: '', sleep: '',
pillow:'', pillow:'',
@ -26,6 +38,18 @@ export default function OtherDetails8(){
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();
@ -35,7 +59,8 @@ export default function OtherDetails8(){
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
console.log("dsfdsfsdf",values)
return( return(
<> <>
@ -48,7 +73,7 @@ export default function OtherDetails8(){
label="" label=""
name='explanation' name='explanation'
onChange={(event:any) => { onChange={(event:any) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
familyHistory: event.target.value, familyHistory: event.target.value,
})); }));
@ -62,9 +87,9 @@ export default function OtherDetails8(){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
educationLevel: event.target.value, sleep: event.target.value,
})); }));
}} }}
> >
@ -81,7 +106,7 @@ export default function OtherDetails8(){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
pillow: event.target.value, pillow: event.target.value,
})); }));
@ -99,7 +124,7 @@ export default function OtherDetails8(){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
orthotics: event.target.value, orthotics: event.target.value,
})); }));
@ -116,10 +141,10 @@ export default function OtherDetails8(){
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={values.brestExam} value={patient.brestExam}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event)
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
brestExam: formattedDate, brestExam: formattedDate,
})); }));
@ -140,9 +165,9 @@ export default function OtherDetails8(){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
orthotics: event.target.value, pregnancy: event.target.value,
})); }));
}} }}
> >
@ -157,10 +182,10 @@ export default function OtherDetails8(){
<FormControl> <FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker <DatePicker
value={values.menstralCycle} value={patient.menstralCycle}
onChange={(event) => { onChange={(event) => {
const formattedDate = formatDate(event) const formattedDate = formatDate(event)
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
menstralCycle: formattedDate, menstralCycle: formattedDate,
})); }));

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

@ -2,51 +2,119 @@ 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 FormValues { interface Patient {
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(){ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
const formik = useFormik<FormValues>({ const [patient, setPatient] = React.useState<Patient>({
initialValues:{ chiefComplaint:'',
chiefComplaint:'', painWorse:[],
painQuality:[], painBetter:[],
painDuration:'', painQuality:[],
currentTreatment:'', painWorstTime:[],
treatmentResults:'', currentComplaintIssues:[],
treatmentGoal:'', painDuration:'',
}, currentTreatment:'',
validationSchema, treatmentGoal:'',
onSubmit:(values)=>{ selfTreatment:'',
console.log(values); });
}
}) useEffect(()=>{
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => { handleFormSection4Data(
if (event.target.checked) { patient.chiefComplaint,
formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]); patient.painWorse,
} else { patient.painBetter,
formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value)); patient.painQuality,
} 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>
@ -56,9 +124,13 @@ export default function PainAnalysisSection4(){
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={formik.handleChange} onChange={(e)=>{
value={formik.values.chiefComplaint} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
chiefComplaint: e.target.value,
}));
}}
value={patient.chiefComplaint}
/> />
</Grid> </Grid>
@ -67,29 +139,27 @@ export default function PainAnalysisSection4(){
<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={handlePainQualityChange} name="sharp" />} control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
label="Bending" label="Bending"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />} control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
label="Standing" label="Standing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />} control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
label="Sitting" label="Sitting"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
label="Walking" label="Walking"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -98,23 +168,23 @@ export default function PainAnalysisSection4(){
<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={handlePainQualityChange} name="sharp" />} control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
label="laying down" label="laying down"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />} control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
label="Standing" label="Standing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />} control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
label="Sitting" label="Sitting"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
label="Walking" label="Walking"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
@ -130,25 +200,22 @@ export default function PainAnalysisSection4(){
label="Sharp" label="Sharp"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />} control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
label="Dull/Ache" label="Dull/Ache"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />} control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
label="Throbbing" label="Throbbing"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
label="Tingling/Numbness/Burning" label="Tingling/Numbness/Burning"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -157,29 +224,26 @@ export default function PainAnalysisSection4(){
<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={handlePainQualityChange} name="sharp" />} control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
label="Morning" label="Morning"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />} control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
label="During day" label="During day"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />} control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
label="Evening" label="Evening"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
label="Lying in bed" label="Lying in bed"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
label="Others" label="Others"
/> />
</FormGroup> </FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
@ -188,8 +252,13 @@ export default function PainAnalysisSection4(){
<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={formik.handleChange} onChange={(e)=>{
value={formik.values.painDuration} setPatient((prevValues) => ({
...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%" />
@ -205,19 +274,19 @@ export default function PainAnalysisSection4(){
<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={handlePainQualityChange} name="sharp" />} control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
label="Muscle weakness" label="Muscle weakness"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />} control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
label="Bowel/Bladder problem" label="Bowel/Bladder problem"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />} control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
label="Digestion" label="Digestion"
/> />
<FormControlLabel <FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />} control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
label="Cardiac/Respiratory" label="Cardiac/Respiratory"
/> />
@ -230,16 +299,18 @@ export default function PainAnalysisSection4(){
<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={formik.handleChange} onChange={(e)=>{
value={formik.values.painDuration} setPatient((prevValues) => ({
...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>
@ -252,14 +323,17 @@ export default function PainAnalysisSection4(){
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={formik.handleChange} onChange={(e)=>{
value={formik.values.treatmentGoal} setPatient((prevValues) => ({
onBlur={formik.handleBlur} ...prevValues,
treatmentGoal: e.target.value,
}));
}}
value={patient.treatmentGoal}
/> />
</Grid> </Grid>
</Grid> </Grid>
</form>
</> </>
)} )}

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

@ -1,8 +1,9 @@
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 FormValues { interface Patient {
generalHealth: string; generalHealth: string;
presentProblemBefore: string; presentProblemBefore: string;
ifYespresentProblemBefore:string; ifYespresentProblemBefore:string;
@ -17,10 +18,27 @@ interface FormValues {
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(){
const [values, setValues] = React.useState<FormValues>({ export default function PastTreatment5({handleFormSection5Data}:Props){
const [patient, setPatient] = React.useState<Patient>({
generalHealth: '', generalHealth: '',
presentProblemBefore: '', presentProblemBefore: '',
ifYespresentProblemBefore:'', ifYespresentProblemBefore:'',
@ -35,7 +53,23 @@ export default function PastTreatment5(){
supplementsOrDrugs:'' supplementsOrDrugs:''
}); });
console.log("dsfdsfdsfg",values) useEffect(()=>{
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>
@ -48,7 +82,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
generalHealth: event.target.value, generalHealth: event.target.value,
})); }));
@ -70,7 +104,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
presentProblemBefore: event.target.value, presentProblemBefore: event.target.value,
})); }));
@ -88,9 +122,9 @@ export default function PastTreatment5(){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={values.presentProblemBefore!=='Yes'} disabled={patient.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
ifYespresentProblemBefore: event.target.value, ifYespresentProblemBefore: event.target.value,
})); }));
@ -102,9 +136,9 @@ export default function PastTreatment5(){
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={values.presentProblemBefore!=='Yes'} disabled={patient.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
ifYestreatmentProvided: event.target.value, ifYestreatmentProvided: event.target.value,
})); }));
@ -116,9 +150,9 @@ export default function PastTreatment5(){
variant="outlined" variant="outlined"
label="Outcome?" label="Outcome?"
name='treatmentGoal' name='treatmentGoal'
disabled={values.presentProblemBefore!=='Yes'} disabled={patient.presentProblemBefore!=='Yes'}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
ifYesOutcome: event.target.value, ifYesOutcome: event.target.value,
})); }));
@ -134,7 +168,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
strokeBloodclotting: event.target.value, strokeBloodclotting: event.target.value,
})); }));
@ -151,9 +185,9 @@ export default function PastTreatment5(){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={values.strokeBloodclotting!=='Yes'} disabled={patient.strokeBloodclotting!=='Yes'}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
ifYesstrokeBloodclotting: event.target.value, ifYesstrokeBloodclotting: event.target.value,
})); }));
@ -168,7 +202,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
dizzinessFetigue: event.target.value, dizzinessFetigue: event.target.value,
})); }));
@ -185,9 +219,9 @@ export default function PastTreatment5(){
variant="outlined" variant="outlined"
label="If yes, when?" label="If yes, when?"
name='treatmentGoal' name='treatmentGoal'
disabled={values.dizzinessFetigue!=='Yes'} disabled={patient.dizzinessFetigue!=='Yes'}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
ifyesdizzinessFetigue: event.target.value, ifyesdizzinessFetigue: event.target.value,
})); }));
@ -202,7 +236,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
antiColligent: event.target.value, antiColligent: event.target.value,
})); }));
@ -221,7 +255,7 @@ export default function PastTreatment5(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
injuriesHospitalization: event.target.value, injuriesHospitalization: event.target.value,
})); }));
@ -245,7 +279,7 @@ export default function PastTreatment5(){
label="" label=""
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
supplementsOrDrugs: event.target.value, supplementsOrDrugs: event.target.value,
})); }));

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

@ -21,22 +21,6 @@ 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 }) => ({
@ -73,30 +57,291 @@ interface Patient {
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 [patient, setPatient] = React.useState<Patient>({ const [section2Data, setSection2Data] = React.useState<any>({});
fullName: "", const [section3Data, setSection3Data] = React.useState<any>({});
homePhone: "", const [section4Data, setSection4Data] = React.useState<any>({});
cellPhone: "", const [section5Data, setSection5Data] = React.useState<any>({});
email: "", const [section6Data, setSection6Data] = React.useState<any>({});
age: 0, const [section7Data, setSection7Data] = React.useState<any>({});
dateOfBirth: "", const [section8Data, setSection8Data] = React.useState<any>({});
socialSecurityNumber: "", const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState<any>({});
mailingAddress: "", const [allPatientData, setAllPatientData] = React.useState<any>([]);
city: "",
state: "", const handleFormSection1Data = (
zipCode: "", fullName?: string|undefined,
gender: "", homePhone?: string|undefined,
maritalStatus: "", 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,
) =>{
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 = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = () => {
event.preventDefault(); const newPatientData = {
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) => {
@ -106,6 +351,7 @@ export default function PatientForm(){
const handleCheckboxChange = (event:any) => { const handleCheckboxChange = (event:any) => {
setIsChecked(event.target.checked); setIsChecked(event.target.checked);
}; };
return( return(
@ -113,7 +359,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>
@ -129,7 +375,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PersonalSection/> <PersonalSection handleFormSection1Data={handleFormSection1Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -140,7 +386,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<FamilyFormSection/> <FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -150,7 +396,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<MedicalHistory/> <MedicalHistory handleFormSection3Data={handleFormSection3Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -171,7 +417,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PainAnalysisSection4/> <PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -181,7 +427,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PastTreatment5/> <PastTreatment5 handleFormSection5Data={handleFormSection5Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -191,7 +437,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<SystemReviewSection6/> <SystemReviewSection6 handleFormSection6Data={handleFormSection6Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -201,7 +447,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<RecreationalHobbiesSection7/> <RecreationalHobbiesSection7 handleFormSection7Data={handleFormSection7Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -211,7 +457,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<OtherDetails8/> <OtherDetails8 handleFormSection8Data={handleFormSection8Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -242,17 +488,18 @@ 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,6 +4,7 @@ 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;
@ -18,7 +19,6 @@ 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,57 +35,81 @@ 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")
}); });
export default function PersonalSection(){ type Props = {
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: "", dateOfBirth: startDateValue,
socialSecurityNumber: "", socialSecurityNumber: "",
mailingAddress:"", mailingAddress:"",
city: "", city: "",
state: "", state: "",
zipCode: "", zipCode: "",
gender: "male", gender: "male",
maritalStatus: "",
}); });
const formik = useFormik<Patient>({
initialValues: { useEffect(()=>{
fullName: "", handleFormSection1Data(
homePhone: "", patient.fullName,
cellPhone: "", patient.homePhone,
email: "", patient.cellPhone,
age: "", patient.email,
dateOfBirth: "", patient.age,
socialSecurityNumber: "", startDateValue,
mailingAddress:"", patient.socialSecurityNumber,
city: "", patient.mailingAddress,
state: "", patient.city,
zipCode: "", patient.state,
gender: "male", patient.zipCode,
maritalStatus: "", patient.gender,
}, )
validationSchema, },[patient])
onSubmit: (values) => {
// Do something with the patient data // const formik = useFormik<Patient>({
console.log(values); // initialValues: {
}, // fullName: "",
}); // homePhone: "",
// cellPhone: "",
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { // email: "",
console.log("dsfsdfsdf",event.target.value) // age: "",
const { name, value } = event.target; // dateOfBirth: "",
setPatient((prevPatient) => ({ // socialSecurityNumber: "",
...prevPatient, // mailingAddress: "",
[name]: value, // city: "",
})); // state: "",
}; // zipCode: "",
// gender: "male",
// },
// validationSchema,
// onSubmit: (values) => {
// // Do something with the patient data
// console.log(values,"sdfdsfsd34");
// },
// });
return( return(
<> <>
@ -96,11 +120,16 @@ export default function PersonalSection(){
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={formik.values.fullName} value={patient.fullName}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.fullName && Boolean(formik.errors.fullName)} ...prevValues,
helperText={formik.touched.fullName && formik.errors.fullName} fullName: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.fullName && Boolean(formik.errors.fullName)}
// helperText={formik.touched.fullName && formik.errors.fullName}
required required
/> />
</Grid> </Grid>
@ -112,11 +141,16 @@ export default function PersonalSection(){
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={formik.values.cellPhone} value={patient.cellPhone}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)} ...prevValues,
helperText={formik.touched.cellPhone && formik.errors.cellPhone} cellPhone: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
// helperText={formik.touched.cellPhone && formik.errors.cellPhone}
/> />
</Grid> </Grid>
@ -126,11 +160,16 @@ export default function PersonalSection(){
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={formik.values.homePhone} value={patient.homePhone}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.homePhone && Boolean(formik.errors.homePhone)} ...prevValues,
helperText={formik.touched.homePhone && formik.errors.homePhone} homePhone: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
// helperText={formik.touched.homePhone && formik.errors.homePhone}
/> />
</Grid> </Grid>
@ -140,11 +179,14 @@ export default function PersonalSection(){
label="Email" label="Email"
name="email" name="email"
placeholder='Please enter your email' placeholder='Please enter your email'
value={emailValue} value={patient.email}
onChange={(e)=>{ onChange={(e)=>{
setEmailValue(e.target.value) setPatient((prevValues) => ({
...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}
/> />
@ -157,11 +199,16 @@ export default function PersonalSection(){
name="age" name="age"
type="number" type="number"
placeholder='Please enter your age' placeholder='Please enter your age'
value={formik.values.age} value={patient.age}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.age && Boolean(formik.errors.age)} ...prevValues,
helperText={formik.touched.age && formik.errors.age} age: e.target.value,
}));
}}
// 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'>
@ -185,11 +232,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Social Security Number" label="Social Security Number"
name="socialSecurityNumber" name="socialSecurityNumber"
value={formik.values.socialSecurityNumber} value={patient.socialSecurityNumber}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)} ...prevValues,
helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber} socialSecurityNumber: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
/> />
</Grid> </Grid>
@ -199,11 +251,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Mailing Address" label="Mailing Address"
name="mailingAddress" name="mailingAddress"
value={formik.values.mailingAddress} value={patient.mailingAddress}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)} ...prevValues,
helperText={formik.touched.mailingAddress && formik.errors.mailingAddress} mailingAddress: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
// helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
/> />
</Grid> </Grid>
@ -212,9 +269,14 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="State" label="State"
name="state" name="state"
value={formik.values.state} value={patient.state}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
...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}
/> />
@ -226,11 +288,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="City" label="City"
name="city" name="city"
value={formik.values.city} value={patient.city}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.city && Boolean(formik.errors.city)} ...prevValues,
helperText={formik.touched.city && formik.errors.city} city: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.city && Boolean(formik.errors.city)}
// helperText={formik.touched.city && formik.errors.city}
/> />
</Grid> </Grid>
@ -239,11 +306,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Zip Code" label="Zip Code"
name="zipCode" name="zipCode"
value={formik.values.zipCode} value={patient.zipCode}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.zipCode && Boolean(formik.errors.zipCode)} ...prevValues,
helperText={formik.touched.zipCode && formik.errors.zipCode} zipCode: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
// helperText={formik.touched.zipCode && formik.errors.zipCode}
/> />
</Grid> </Grid>
@ -252,9 +324,14 @@ export default function PersonalSection(){
<FormLabel>Gender</FormLabel> <FormLabel>Gender</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue="male" defaultValue={patient.gender}
name="radio-buttons-group" name="radio-buttons-group"
onChange={handleChange} onChange={(e)=>{
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 from "react"; import React, { useEffect } from "react";
interface FormValues { interface Patient {
hobbies: string; hobbies: string;
educationLevel: string; educationLevel: string;
excercise: string; excercise: string;
@ -22,8 +22,31 @@ interface FormValues {
drugsExplanation:string; drugsExplanation:string;
} }
export default function RecreationalHobbiesSection7(){ type Props = {
const [values, setValues] = React.useState<FormValues>({ 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,
)=> void
}
export default function RecreationalHobbiesSection7({handleFormSection7Data}:Props){
const [patient, setPatient] = React.useState<Patient>({
hobbies: '', hobbies: '',
educationLevel: '', educationLevel: '',
excercise:'', excercise:'',
@ -43,6 +66,31 @@ export default function RecreationalHobbiesSection7(){
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(
<> <>
@ -55,7 +103,7 @@ export default function RecreationalHobbiesSection7(){
label="" label=""
name='explanation' name='explanation'
onChange={(event:any) => { onChange={(event:any) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
hobbies: event.target.value, hobbies: event.target.value,
})); }));
@ -69,7 +117,7 @@ export default function RecreationalHobbiesSection7(){
<RadioGroup <RadioGroup
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
educationLevel: event.target.value, educationLevel: event.target.value,
})); }));
@ -91,7 +139,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
excercise: event.target.value, excercise: event.target.value,
})); }));
@ -105,12 +153,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.excercise!=='Yes'} disabled={patient.excercise!=='Yes'}
variant="outlined" variant="outlined"
label="Times per week?" label="Times per week?"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
excerciseExplanation: event.target.value, excerciseExplanation: event.target.value,
})); }));
@ -125,7 +173,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
tobacco: event.target.value, tobacco: event.target.value,
})); }));
@ -139,12 +187,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.tobacco!=='Yes'} disabled={patient.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) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
excerciseExplanation: event.target.value, excerciseExplanation: event.target.value,
})); }));
@ -159,7 +207,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
alcohol: event.target.value, alcohol: event.target.value,
})); }));
@ -173,12 +221,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.alcohol!=='Yes'} disabled={patient.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) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
alcoholExplanation: event.target.value, alcoholExplanation: event.target.value,
})); }));
@ -193,7 +241,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
healthyDiet: event.target.value, healthyDiet: event.target.value,
})); }));
@ -207,12 +255,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.healthyDiet!=='No'} disabled={patient.healthyDiet!=='No'}
variant="outlined" variant="outlined"
label="If no, explain" label="If no, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
healthyDietExplanation: event.target.value, healthyDietExplanation: event.target.value,
})); }));
@ -227,7 +275,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
sleep: event.target.value, sleep: event.target.value,
})); }));
@ -241,12 +289,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.sleep!=='No'} disabled={patient.sleep!=='No'}
variant="outlined" variant="outlined"
label="If no, explain" label="If no, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
sleepExplanation: event.target.value, sleepExplanation: event.target.value,
})); }));
@ -261,7 +309,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
workSchool: event.target.value, workSchool: event.target.value,
})); }));
@ -275,12 +323,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.workSchool!=='Yes'} disabled={patient.workSchool!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
workSchool: event.target.value, workSchool: event.target.value,
})); }));
@ -295,7 +343,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
familyLife: event.target.value, familyLife: event.target.value,
})); }));
@ -309,12 +357,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.familyLife!=='Yes'} disabled={patient.familyLife!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
familyLifeExplanation: event.target.value, familyLifeExplanation: event.target.value,
})); }));
@ -329,7 +377,7 @@ export default function RecreationalHobbiesSection7(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((prevValues) => ({
...prevValues, ...prevValues,
drugs: event.target.value, drugs: event.target.value,
})); }));
@ -343,12 +391,12 @@ export default function RecreationalHobbiesSection7(){
<Grid item xs={6} className='collapsable-form-style-form7'> <Grid item xs={6} className='collapsable-form-style-form7'>
<TextField <TextField
disabled={values.drugs!=='Yes'} disabled={patient.drugs!=='Yes'}
variant="outlined" variant="outlined"
label="If yes, explain" label="If yes, explain"
name='treatmentGoal' name='treatmentGoal'
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatient((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 from "react"; import React, { useEffect } from "react";
interface FormValues { interface Patient {
eyes: string; eyes: string;
IntestinesBowls: string; IntestinesBowls: string;
jointsBones:string; jointsBones:string;
@ -21,8 +21,30 @@ interface FormValues {
explanation:string; explanation:string;
} }
export default function SystemReviewSection6(){ type Props = {
const [values, setValues] = React.useState<FormValues>({ 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,
)=> void
}
export default function SystemReviewSection6({handleFormSection6Data}:Props){
const [patient, setPatients] = React.useState<Patient>({
eyes: '', eyes: '',
IntestinesBowls: '', IntestinesBowls: '',
jointsBones:'', jointsBones:'',
@ -41,6 +63,28 @@ export default function SystemReviewSection6(){
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 '>
@ -54,7 +98,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
eyes: event.target.value, eyes: event.target.value,
})); }));
@ -72,9 +116,9 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
presentProblemBefore: event.target.value, IntestinesBowls: event.target.value,
})); }));
}} }}
> >
@ -90,7 +134,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
jointsBones: event.target.value, jointsBones: event.target.value,
})); }));
@ -108,7 +152,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
allergies: event.target.value, allergies: event.target.value,
})); }));
@ -126,7 +170,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
earsNoseMouth: event.target.value, earsNoseMouth: event.target.value,
})); }));
@ -144,7 +188,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
urinary: event.target.value, urinary: event.target.value,
})); }));
@ -162,7 +206,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
skin: event.target.value, skin: event.target.value,
})); }));
@ -180,7 +224,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
psychological: event.target.value, psychological: event.target.value,
})); }));
@ -198,7 +242,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
heart: event.target.value, heart: event.target.value,
})); }));
@ -216,7 +260,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
muscles: event.target.value, muscles: event.target.value,
})); }));
@ -234,7 +278,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
internalOrgans: event.target.value, internalOrgans: event.target.value,
})); }));
@ -252,7 +296,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
gynecological: event.target.value, gynecological: event.target.value,
})); }));
@ -271,7 +315,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
lungsBreathing: event.target.value, lungsBreathing: event.target.value,
})); }));
@ -289,7 +333,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
nerves: event.target.value, nerves: event.target.value,
})); }));
@ -307,7 +351,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
blood: event.target.value, blood: event.target.value,
})); }));
@ -325,7 +369,7 @@ export default function SystemReviewSection6(){
name="painDuration" name="painDuration"
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
onChange={(event) => { onChange={(event) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
prostate: event.target.value, prostate: event.target.value,
})); }));
@ -343,8 +387,9 @@ export default function SystemReviewSection6(){
variant="outlined" variant="outlined"
label="" label=""
name='explanation' name='explanation'
value={patient.explanation}
onChange={(event:any) => { onChange={(event:any) => {
setValues((prevValues) => ({ setPatients((prevValues) => ({
...prevValues, ...prevValues,
explanation: event.target.value, explanation: event.target.value,
})); }));