From d1e19522987e3fd1cba9053ed8c965922b751bf3 Mon Sep 17 00:00:00 2001 From: vipeeshpavithran Date: Fri, 8 Sep 2023 13:48:44 +0530 Subject: [PATCH] mobile responsive changes --- src/App.css | 57 +- src/Components/Helper/AddNewTable.tsx | 274 ++-- .../ImageMarker/PatientImageMarker.css | 4 + .../PatientForm/FamilyFormSection2.tsx | 824 ++++++----- src/Components/PatientForm/OtherDetails8.tsx | 492 ++++--- .../PatientForm/PainAnalysisSection4.tsx | 910 +++++++----- src/Components/PatientForm/PastTreatment5.tsx | 829 +++++++---- .../PatientForm/PersonalSection1.tsx | 75 +- .../PatientForm/SyestemReviewSection6.tsx | 1252 ++++++++++------- 9 files changed, 2873 insertions(+), 1844 deletions(-) diff --git a/src/App.css b/src/App.css index 6f6487b..7238d02 100644 --- a/src/App.css +++ b/src/App.css @@ -1,37 +1,34 @@ -.app-screen-constants .MuiInputBase-root{ +/* .app-screen-constants .MuiInputBase-root{ margin:auto; max-width:1500; height:800 !important; -} +} */ -.collapsable-form-style .MuiInputBase-root { - width: 300px !important; - margin: 5%; +/* .collapsable-form-style .MuiInputBase-root { + margin:3%; height: 50px } .collapsable-form-style-form7 .MuiInputBase-root { - width: 350px !important; margin: 3%; height: 50px } .collapsable-form-style-multiline .MuiInputBase-root { - width: 350px !important; margin: 5%; min-height: 100px -} -.collapsable-form-style-multiline label { +} */ +/* .collapsable-form-style-multiline label { padding: 15px; -} +} */ -.collapsable-form-style label { +/* .collapsable-form-style label { padding: 15px; -} +} */ -.collapsable-form-style-form7 label { +/* .collapsable-form-style-form7 label { padding: 13px; -} +} */ .collapsable-form-style-radioButtons{ width: 300px !important; @@ -41,7 +38,6 @@ } .collapsable-form-style-radioButtons-fullwidth{ - /* width: 300px !important; */ margin: 5%; padding-top: 12px; padding-left: 16px; @@ -57,4 +53,33 @@ .addNew-form-table-style label { padding: 0px; -} \ No newline at end of file +} +.MuiFormControl-root { + width: 95% !important; +} + +.MuiGrid-root .MuiTextField-root { + margin-top: 3%; + margin-bottom: 3%; +} + +/* .MuiFormControl-root{ + width: 90% !important; + height: 50px !important; + margin-bottom: 1% !important; +} + +.MuiTextField-root { + margin-top: 3% !important; + margin-bottom: 5% !important; +} + +.collapsable-form-style-multiline label { + padding: 15px; +} + +.collapsable-form-style-radioButtons-fullwidth { + margin: 5%; + padding-top: 12px; + padding-left: 16px; +} */ \ No newline at end of file diff --git a/src/Components/Helper/AddNewTable.tsx b/src/Components/Helper/AddNewTable.tsx index dcfa0b7..4602360 100644 --- a/src/Components/Helper/AddNewTable.tsx +++ b/src/Components/Helper/AddNewTable.tsx @@ -1,4 +1,17 @@ -import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material'; +import { + Button, + TableContainer, + Table, + TableHead, + TableRow, + TableCell, + TableBody, + TextField, + Paper, + Grid, + FormLabel, + FormControl, +} from '@mui/material'; import * as React from 'react'; interface RowData { @@ -13,51 +26,64 @@ interface DataTableProps { onAddRow: () => void; } -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 - patientDataDiplay:any; - type:string; - -} - -function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) { +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; + patientDataDiplay: any; + type: string; +}; +function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) { const [illnessFromData, setIllnessFromData] = React.useState({ - id:0,date:'',illness:'',treatment:'',results:'' - }) + id: 0, + date: '', + illness: '', + treatment: '', + results: '', + }); const [illnessData, setIllnessData] = React.useState([ - {id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'} + { + id: 0, + date: 'ex-12-01-2020', + illness: 'knee pain', + treatment: 'surgery', + results: 'cured', + }, ]); - const deleteIllnessData = (idToDelete:number) => { - const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete); + const deleteIllnessData = (idToDelete: number) => { + const updatedIllnessData = illnessData.filter( + (item) => item.id !== idToDelete + ); setIllnessData(updatedIllnessData); }; - const handleAddRow = () => { - if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){ - - const newId = Math.max(...illnessData.map(item => item.id)) + 1; + if ( + illnessFromData.date != '' && + illnessFromData.illness != '' && + illnessFromData.treatment != '' && + illnessFromData.results != '' + ) { + const newId = Math.max(...illnessData.map((item) => item.id)) + 1; const newIllnessData = [ ...illnessData, { ...illnessFromData, - id: newId - } + id: newId, + }, ]; setIllnessData(newIllnessData); setIllnessFromData({ @@ -65,88 +91,136 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) { date: '', illness: '', treatment: '', - results: '' + results: '', }); } - }; + }; return ( <> - If yes, Please enter the details below:

- {type!=="display"? - - - - If yes, Please enter the details below: +

+ {type !== 'display' ? ( + + + + { - setIllnessFromData((prevValues:any) => ({ + setIllnessFromData((prevValues: any) => ({ ...prevValues, date: event.target.value, })); }} - /> - - - + + + { - setIllnessFromData((prevValues:any) => ({ + setIllnessFromData((prevValues: any) => ({ ...prevValues, illness: event.target.value, })); }} - /> - - - + + + { - setIllnessFromData((prevValues:any) => ({ + setIllnessFromData((prevValues: any) => ({ ...prevValues, treatment: event.target.value, })); }} - /> - - - + + + { - setIllnessFromData((prevValues:any) => ({ + setIllnessFromData((prevValues: any) => ({ ...prevValues, results: event.target.value, })); }} - /> - - - - - - - - :""} - - - - + /> + + + + + + + ) : ( + '' + )} + + +
Date - Injury/Fracture/Illness/Surgeries + + Injury/Fracture/Illness/Surgeries + Treatment Results @@ -155,25 +229,23 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) { {illnessData.map((row, index) => ( + {row.date} + {row.illness} + {row.treatment} + {row.results} - {row.date} - - - {row.illness} - - - {row.treatment} - - - {row.results} - - - {type!=="display"? - - :""} + {type !== 'display' ? ( + + ) : ( + '' + )} ))} @@ -182,6 +254,6 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) { ); -}; +} export default DataTable; diff --git a/src/Components/ImageMarker/PatientImageMarker.css b/src/Components/ImageMarker/PatientImageMarker.css index 3abf761..7e9d324 100644 --- a/src/Components/ImageMarker/PatientImageMarker.css +++ b/src/Components/ImageMarker/PatientImageMarker.css @@ -69,6 +69,10 @@ gap: 0; margin-bottom: 2%; } + .image-marker-div .marker-div { + /* margin-right: 5%; */ + margin-top: 3%; + } } @media only screen and (min-width: 1400px) { diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx index aad2239..7839ded 100644 --- a/src/Components/PatientForm/FamilyFormSection2.tsx +++ b/src/Components/PatientForm/FamilyFormSection2.tsx @@ -1,10 +1,38 @@ -import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; -import { useFormik } from "formik"; -import * as yup from "yup"; +import { + Button, + Checkbox, + FormControl, + FormControlLabel, + FormGroup, + FormLabel, + Grid, + Paper, + Radio, + RadioGroup, + TextField, +} from '@mui/material'; +import { useFormik } from 'formik'; +import * as yup from 'yup'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import React, { useEffect } from 'react'; interface Patient { + 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; +} + +type Props = { + handleFormSection2Data: ( maritalStatus: string | undefined, numberOfChildren: string | undefined, occupation: string | undefined, @@ -16,360 +44,438 @@ interface Patient { spouseBusinessPhone: string | undefined, emergencyContact: string | undefined, relationship: string | undefined, - spousePhone: string | undefined, -} - -type Props = { - 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, - )=> void - patientDataDiplay:any; - type:string; - } - - -export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){ - const [patient, setPatient] = React.useState({ - 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( - <> - - - - Marital Status - { - setPatient((prevValues:any) => ({ - ...prevValues, - maritalStatus: e.target.value, - })); - }} - > - } label="Married" disabled={type=='display'}/> - } label="Single" disabled={type=='display'}/> - } label="Widowed" disabled={type=='display'}/> - } label="Seperated" disabled={type=='display'}/> - } label="Divorced" disabled={type=='display'}/> - - - - - - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - numberOfChildren: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - occupation: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.occupation:patient.occupation} - disabled={type=='display'} - /> - - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - hoursPerWeek: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek} - disabled={type=='display'} - /> - - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - employer: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.employer:patient.employer} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - businessPhone: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone} - disabled={type=='display'} - /> - - - - - - Spouse's Information: - - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - spouseName: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.spouseName:patient.spouseName} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - spouseEmployer: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - spouseBusinessPhone: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone} - disabled={type=='display'} - /> - - - - Emergency: - - - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - emergencyContact: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - relationship: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.relationship:patient.relationship} - disabled={type=='display'} - /> - - - { - setPatient((prevValues:any) => ({ - ...prevValues, - spousePhone: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone} - disabled={type=='display'} - /> - - - - ) + spousePhone: string | undefined + ) => void; + patientDataDiplay: any; + type: string; }; + +export default function FamilyFormSection({ + handleFormSection2Data, + patientDataDiplay, + type, +}: Props) { + const [patient, setPatient] = React.useState({ + 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 ( + <> + + + + Marital Status + { + setPatient((prevValues: any) => ({ + ...prevValues, + maritalStatus: e.target.value, + })); + }} + > + } + label='Married' + disabled={type == 'display'} + /> + } + label='Single' + disabled={type == 'display'} + /> + } + label='Widowed' + disabled={type == 'display'} + /> + } + label='Seperated' + disabled={type == 'display'} + /> + } + label='Divorced' + disabled={type == 'display'} + /> + + + + + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + numberOfChildren: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.numberOfChildren + : patient.numberOfChildren + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + occupation: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.occupation + : patient.occupation + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + hoursPerWeek: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.hoursPerWeek + : patient.hoursPerWeek + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + employer: e.target.value, + })); + }} + value={ + type == 'display' ? patientDataDiplay.employer : patient.employer + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + businessPhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.businessPhone + : patient.businessPhone + } + disabled={type == 'display'} + /> + + + + + + Spouse's Information: + + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseName: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.spouseName + : patient.spouseName + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseEmployer: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.spouseEmployer + : patient.spouseEmployer + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseBusinessPhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.spouseBusinessPhone + : patient.spouseBusinessPhone + } + disabled={type == 'display'} + /> + + + + Emergency: + + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + emergencyContact: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.emergencyContact + : patient.emergencyContact + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + relationship: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.relationship + : patient.relationship + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spousePhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.spousePhone + : patient.spousePhone + } + disabled={type == 'display'} + /> + + + + ); +} diff --git a/src/Components/PatientForm/OtherDetails8.tsx b/src/Components/PatientForm/OtherDetails8.tsx index fa5feda..87b2475 100644 --- a/src/Components/PatientForm/OtherDetails8.tsx +++ b/src/Components/PatientForm/OtherDetails8.tsx @@ -1,212 +1,318 @@ -import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material"; -import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; -import React, { useEffect } from "react"; +import { + Grid, + FormLabel, + TextField, + FormControl, + RadioGroup, + FormControlLabel, + Radio, +} from '@mui/material'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import React, { useEffect } from 'react'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; -import dayjs from "dayjs"; +import dayjs from 'dayjs'; interface Patient { - familyHistory: string; - sleep: string; - pillow:string; - orthotics:string; - brestExam: any; - pregnancy:string; - menstralCycle: any; - } + familyHistory: string; + sleep: string; + pillow: string; + orthotics: string; + brestExam: any; + pregnancy: string; + menstralCycle: any; +} - type Props = { - handleFormSection8Data:( - familyHistory: string|undefined, - sleep: string|undefined, - pillow:string|undefined, - orthotics:string|undefined, - brestExam: any, - pregnancy:string|undefined, - menstralCycle: any, - )=> void - patientDataDiplay:any; - type:string; - } +type Props = { + handleFormSection8Data: ( + familyHistory: string | undefined, + sleep: string | undefined, + pillow: string | undefined, + orthotics: string | undefined, + brestExam: any, + pregnancy: string | undefined, + menstralCycle: any + ) => void; + patientDataDiplay: any; + type: string; +}; -export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){ - - const [patient, setPatient] = React.useState({ - familyHistory: '', - sleep: '', - pillow:'', - orthotics:'', - brestExam: dayjs('2022-04-17'), - pregnancy:'', - menstralCycle: dayjs('2022-04-17'), - }); +export default function OtherDetails8({ + handleFormSection8Data, + patientDataDiplay, + type, +}: Props) { + const [patient, setPatient] = React.useState({ + familyHistory: '', + sleep: '', + pillow: '', + orthotics: '', + brestExam: dayjs('2022-04-17'), + pregnancy: '', + 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]) + 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 date = new Date(inputDate); - const year = date.getUTCFullYear(); - const month = String(date.getUTCMonth() + 1).padStart(2, '0'); - const day = String(date.getUTCDate()+1).padStart(2, '0'); - - return `${year}-${month}-${day}`; - }; + const formatDate = (inputDate: any) => { + const date = new Date(inputDate); + const year = date.getUTCFullYear(); + const month = String(date.getUTCMonth() + 1).padStart(2, '0'); + const day = String(date.getUTCDate() + 1).padStart(2, '0'); - + return `${year}-${month}-${day}`; + }; - - return( - <> - - - Family history and health status:

- { - setPatient((prevValues) => ({ - ...prevValues, - familyHistory: event.target.value, - })); - }} - /> - + return ( + <> + + + Family history and health status: +

+ { + setPatient((prevValues) => ({ + ...prevValues, + familyHistory: event.target.value, + })); + }} + /> + - - How do you sleep? - { - setPatient((prevValues) => ({ - ...prevValues, - sleep: event.target.value, - })); - }} - > - } label="Back" /> - } label="Side" /> - } label="Stomach" /> - - - + + How do you sleep? + { + setPatient((prevValues) => ({ + ...prevValues, + sleep: event.target.value, + })); + }} + > + } + label='Back' + /> + } + label='Side' + /> + } + label='Stomach' + /> + + + - - - Do you use a pillow? - { - setPatient((prevValues) => ({ - ...prevValues, - pillow: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - + + + Do you use a pillow? + { + setPatient((prevValues) => ({ + ...prevValues, + pillow: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + - - - Do you wear orthotics or arch support? - { - setPatient((prevValues) => ({ - ...prevValues, - orthotics: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - + + + Do you wear orthotics or arch support? + { + setPatient((prevValues) => ({ + ...prevValues, + orthotics: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + - - Date of last gynecological and brest exam?

- - - { - const formattedDate = formatDate(event) - setPatient((prevValues) => ({ - ...prevValues, - brestExam: formattedDate, - })); - }} - renderInput={(params) => } - /> - - - + + Date of last gynecological and brest exam? +

+ + + { + const formattedDate = formatDate(event); + setPatient((prevValues) => ({ + ...prevValues, + brestExam: formattedDate, + })); + }} + renderInput={(params) => ( + + )} + /> + + + - {/* + {/* For X-Ray purposes: */} - - - Possible pregnancy? - { - setPatient((prevValues) => ({ - ...prevValues, - pregnancy: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Date of last menstrual cycle?

- - - { - const formattedDate = formatDate(event) - setPatient((prevValues) => ({ - ...prevValues, - menstralCycle: formattedDate, - })); - }} - renderInput={(params) => } - /> - - - - - + + + Possible pregnancy? + { + setPatient((prevValues) => ({ + ...prevValues, + pregnancy: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + - - ) -} \ No newline at end of file + + + Date of last menstrual cycle? +

+ + + { + const formattedDate = formatDate(event); + setPatient((prevValues) => ({ + ...prevValues, + menstralCycle: formattedDate, + })); + }} + renderInput={(params) => ( + + )} + /> + + + + + + ); +} diff --git a/src/Components/PatientForm/PainAnalysisSection4.tsx b/src/Components/PatientForm/PainAnalysisSection4.tsx index 9c909a9..0981bd9 100644 --- a/src/Components/PatientForm/PainAnalysisSection4.tsx +++ b/src/Components/PatientForm/PainAnalysisSection4.tsx @@ -1,368 +1,578 @@ 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 * as Yup from 'yup'; import path from 'path'; import { useEffect } from 'react'; interface Patient { - chiefComplaint:string; - painWorse: string[]; - painBetter: string[]; - painQuality: string[]; - painWorstTime: string[]; - currentComplaintIssues: string[]; - painDuration: string; - currentTreatment: string; - treatmentGoal: string; - selfTreatment:string; - } + chiefComplaint: string; + painWorse: string[]; + painBetter: string[]; + painQuality: string[]; + painWorstTime: string[]; + currentComplaintIssues: string[]; + painDuration: string; + currentTreatment: 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 - patientDataDiplay:any; - type: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; + patientDataDiplay: any; + type: string; +}; -export default function PainAnalysisSection4({handleFormSection4Data,patientDataDiplay,type}:Props){ - const [patient, setPatient] = React.useState({ - chiefComplaint:'', - painWorse:[], - painBetter:[], - painQuality:[], - painWorstTime:[], - currentComplaintIssues:[], - painDuration:'', - currentTreatment:'', - treatmentGoal:'', - selfTreatment:'', - }); +export default function PainAnalysisSection4({ + handleFormSection4Data, + patientDataDiplay, + type, +}: Props) { + const [patient, setPatient] = React.useState({ + chiefComplaint: '', + painWorse: [], + painBetter: [], + painQuality: [], + painWorstTime: [], + currentComplaintIssues: [], + painDuration: '', + currentTreatment: '', + treatmentGoal: '', + selfTreatment: '', + }); - useEffect(()=>{ - handleFormSection4Data( - patient.chiefComplaint, - patient.painWorse, - patient.painBetter, - patient.painQuality, - patient.painWorstTime, - patient.currentComplaintIssues, - patient.painDuration, - patient.currentTreatment, - patient.treatmentGoal, - patient.selfTreatment, - ) - },[patient]) - - const handlePainWorseChange = (event: React.ChangeEvent) => { - const { name, checked } = event.target; - setPatient((prevValues) => ({ - ...prevValues, - painWorse: checked - ? [...prevValues.painWorse, name] - : prevValues.painWorse.filter((item) => item !== name), - })); - }; + useEffect(() => { + handleFormSection4Data( + patient.chiefComplaint, + patient.painWorse, + patient.painBetter, + patient.painQuality, + patient.painWorstTime, + patient.currentComplaintIssues, + patient.painDuration, + patient.currentTreatment, + patient.treatmentGoal, + patient.selfTreatment + ); + }, [patient]); - const handlePainBetterChange = (event: React.ChangeEvent) => { - const { name, checked } = event.target; - setPatient((prevValues) => ({ - ...prevValues, - painBetter: checked - ? [...prevValues.painBetter, name] - : prevValues.painBetter.filter((item) => item !== name), - })); - }; + const handlePainWorseChange = ( + event: React.ChangeEvent + ) => { + const { name, checked } = event.target; + setPatient((prevValues) => ({ + ...prevValues, + painWorse: checked + ? [...prevValues.painWorse, name] + : prevValues.painWorse.filter((item) => item !== name), + })); + }; - const handlePainQualityChange = (event: React.ChangeEvent) => { - const { name, checked } = event.target; - setPatient((prevValues) => ({ - ...prevValues, - painQuality: checked - ? [...prevValues.painQuality, name] - : prevValues.painQuality.filter((item) => item !== name), - })); - }; + const handlePainBetterChange = ( + event: React.ChangeEvent + ) => { + const { name, checked } = event.target; + setPatient((prevValues) => ({ + ...prevValues, + painBetter: checked + ? [...prevValues.painBetter, name] + : prevValues.painBetter.filter((item) => item !== name), + })); + }; - const handlePainWorstTimeChange = (event: React.ChangeEvent) => { - const { name, checked } = event.target; - setPatient((prevValues) => ({ - ...prevValues, - painWorstTime: checked - ? [...prevValues.painWorstTime, name] - : prevValues.painWorstTime.filter((item) => item !== name), - })); - }; + const handlePainQualityChange = ( + event: React.ChangeEvent + ) => { + const { name, checked } = event.target; + setPatient((prevValues) => ({ + ...prevValues, + painQuality: checked + ? [...prevValues.painQuality, name] + : prevValues.painQuality.filter((item) => item !== name), + })); + }; - const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent) => { - const { name, checked } = event.target; - setPatient((prevValues) => ({ - ...prevValues, - currentComplaintIssues: checked - ? [...prevValues.currentComplaintIssues, name] - : prevValues.currentComplaintIssues.filter((item) => item !== name), - })); - }; + const handlePainWorstTimeChange = ( + event: React.ChangeEvent + ) => { + const { name, checked } = event.target; + setPatient((prevValues) => ({ + ...prevValues, + painWorstTime: checked + ? [...prevValues.painWorstTime, name] + : prevValues.painWorstTime.filter((item) => item !== name), + })); + }; - return( - <> - - Issue Details: - - - - { - setPatient((prevValues) => ({ - ...prevValues, - chiefComplaint: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint} - disabled={type=='display'} - /> - + const handleCurrentComplaintIssuesTimeChange = ( + event: React.ChangeEvent + ) => { + const { name, checked } = event.target; + setPatient((prevValues) => ({ + ...prevValues, + currentComplaintIssues: checked + ? [...prevValues.currentComplaintIssues, name] + : prevValues.currentComplaintIssues.filter((item) => item !== name), + })); + }; - - - What makes your pain worse? - - } - label="Bending" - disabled={type=='display'} - /> - } - label="Standing" - disabled={type=='display'} - /> - } - label="Sitting" - disabled={type=='display'} - /> - } - label="Walking" - disabled={type=='display'} - /> - } - label="Others" - disabled={type=='display'} - /> - - - - - - - - What makes your pain better? - - } - label="laying down" - disabled={type=='display'} - /> - } - label="Standing" - disabled={type=='display'} - /> - } - label="Sitting" - disabled={type=='display'} - /> - } - label="Walking" - disabled={type=='display'} - /> - } - label="Others" - disabled={type=='display'} - /> - - - - - - - What is the quality of your pain? - - } - label="Sharp" - disabled={type=='display'} - /> - } - label="Dull/Ache" - disabled={type=='display'} - /> - } - label="Throbbing" - disabled={type=='display'} - /> - } - label="Tingling/Numbness/Burning" - disabled={type=='display'} - /> - } - label="Others" - disabled={type=='display'} - /> - - - - - - - What is the worst time for your pain? - - } - label="Morning" - disabled={type=='display'} - /> - } - label="During day" - disabled={type=='display'} - /> - } - label="Evening" - disabled={type=='display'} - /> - } - label="Lying in bed" - disabled={type=='display'} - /> - } - label="Others" - disabled={type=='display'} - /> - - - - - - - How much of the day do you experience your chief complaint? - { - setPatient((prevValues) => ({ - ...prevValues, - painDuration: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.painDuration:patient.painDuration} - sx={{display:'flex', flexDirection:'row'}} - > - } label="0-25%" /> - } label="25-50%" /> - } label="50-75%" /> - } label="75-100%" /> - - - - - - - Has your current complaint caused any of the following? - - } - label="Muscle weakness" - disabled={type=='display'} - /> - } - label="Bowel/Bladder problem" - disabled={type=='display'} - /> - } - label="Digestion" - disabled={type=='display'} - /> - } - label="Cardiac/Respiratory" - disabled={type=='display'} - /> - - - - - - - - Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)? - { - setPatient((prevValues) => ({ - ...prevValues, - selfTreatment: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.selfTreatment:patient.selfTreatment} - sx={{display:'flex', flexDirection:'row'}} - > - } label="Yes" /> - } label="No" /> - - - - - - Expected Treatment Result: - - - - { - setPatient((prevValues) => ({ - ...prevValues, - treatmentGoal: e.target.value, - })); - }} - value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal} - disabled={type=='display'} - /> - - + return ( + <> + + Issue Details: + + + + { + setPatient((prevValues) => ({ + ...prevValues, + chiefComplaint: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.chiefComplaint + : patient.chiefComplaint + } + disabled={type == 'display'} + /> - - )} - \ No newline at end of file + + + What makes your pain worse? + + + } + label='Bending' + disabled={type == 'display'} + /> + + } + label='Standing' + disabled={type == 'display'} + /> + + } + label='Sitting' + disabled={type == 'display'} + /> + + } + label='Walking' + disabled={type == 'display'} + /> + + } + label='Others' + disabled={type == 'display'} + /> + + + + + + + What makes your pain better? + + + } + label='laying down' + disabled={type == 'display'} + /> + + } + label='Standing' + disabled={type == 'display'} + /> + + } + label='Sitting' + disabled={type == 'display'} + /> + + } + label='Walking' + disabled={type == 'display'} + /> + + } + label='Others' + disabled={type == 'display'} + /> + + + + + + + What is the quality of your pain? + + + } + label='Sharp' + disabled={type == 'display'} + /> + + } + label='Dull/Ache' + disabled={type == 'display'} + /> + + } + label='Throbbing' + disabled={type == 'display'} + /> + + } + label='Tingling/Numbness/Burning' + disabled={type == 'display'} + /> + + } + label='Others' + disabled={type == 'display'} + /> + + + + + + + What is the worst time for your pain? + + + } + label='Morning' + disabled={type == 'display'} + /> + + } + label='During day' + disabled={type == 'display'} + /> + + } + label='Evening' + disabled={type == 'display'} + /> + + } + label='Lying in bed' + disabled={type == 'display'} + /> + + } + label='Others' + disabled={type == 'display'} + /> + + + + + + + + How much of the day do you experience your chief complaint? + + { + setPatient((prevValues) => ({ + ...prevValues, + painDuration: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.painDuration + : patient.painDuration + } + sx={{ display: 'flex', flexDirection: 'row' }} + > + } + label='0-25%' + /> + } + label='25-50%' + /> + } + label='50-75%' + /> + } + label='75-100%' + /> + + + + + + + + Has your current complaint caused any of the following? + + + + } + label='Muscle weakness' + disabled={type == 'display'} + /> + + } + label='Bowel/Bladder problem' + disabled={type == 'display'} + /> + + } + label='Digestion' + disabled={type == 'display'} + /> + + } + label='Cardiac/Respiratory' + disabled={type == 'display'} + /> + + + + + + + + Have you tried any self treatment (ex-ice, heat, excercise) or + taken any medication(over the counter or prescription)? + + { + setPatient((prevValues) => ({ + ...prevValues, + selfTreatment: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.selfTreatment + : patient.selfTreatment + } + sx={{ display: 'flex', flexDirection: 'row' }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + + Expected Treatment Result: + + + + + { + setPatient((prevValues) => ({ + ...prevValues, + treatmentGoal: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay.treatmentGoal + : patient.treatmentGoal + } + disabled={type == 'display'} + /> + + + + ); +} diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx index b5fc217..46932bd 100644 --- a/src/Components/PatientForm/PastTreatment5.tsx +++ b/src/Components/PatientForm/PastTreatment5.tsx @@ -1,4 +1,13 @@ -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 Table from '../Helper/AddNewTable'; import { useEffect } from 'react'; @@ -6,7 +15,7 @@ import { useEffect } from 'react'; interface Patient { generalHealth: string; presentProblemBefore: string; - ifYespresentProblemBefore:string; + ifYespresentProblemBefore: string; ifYestreatmentProvided: string; ifYesOutcome: string; strokeBloodclotting: string; @@ -19,313 +28,511 @@ interface Patient { } 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 - patientDataDiplay:any; - type:string; + 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; + patientDataDiplay: any; + type: string; +}; + +export default function PastTreatment5({ + handleFormSection5Data, + patientDataDiplay, + type, +}: Props) { + const [patient, setPatient] = React.useState({ + generalHealth: '', + presentProblemBefore: '', + ifYespresentProblemBefore: '', + ifYestreatmentProvided: '', + ifYesOutcome: '', + strokeBloodclotting: '', + ifYesstrokeBloodclotting: '', + dizzinessFetigue: '', + ifyesdizzinessFetigue: '', + antiColligent: '', + injuriesHospitalization: '', + supplementsOrDrugs: '', + }); + + 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 ( + <> +
+ + + + Overall your General Healgth is: + { + setPatient((prevValues) => ({ + ...prevValues, + generalHealth: event.target.value, + })); + }} + > + } + label='Excellent' + /> + } + label='Very Good' + /> + } + label='Good' + /> + } + label='Fair' + /> + } + label='Poor' + /> + + + + + + + + Have you experienced your present problem before? + + { + setPatient((prevValues) => ({ + ...prevValues, + presentProblemBefore: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + { + setPatient((prevValues) => ({ + ...prevValues, + ifYespresentProblemBefore: event.target.value, + })); + }} + /> + + + { + setPatient((prevValues) => ({ + ...prevValues, + ifYestreatmentProvided: event.target.value, + })); + }} + /> + + + { + setPatient((prevValues) => ({ + ...prevValues, + ifYesOutcome: event.target.value, + })); + }} + /> + + + + + + Have you ever had a stroke or issues with blood clotting? + + { + setPatient((prevValues) => ({ + ...prevValues, + strokeBloodclotting: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + { + setPatient((prevValues) => ({ + ...prevValues, + ifYesstrokeBloodclotting: event.target.value, + })); + }} + /> + + + + + + Have you recently experienced dizziness, unexplained fatigue, + weight loss or blood loss? + + { + setPatient((prevValues) => ({ + ...prevValues, + dizzinessFetigue: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + { + setPatient((prevValues) => ({ + ...prevValues, + ifyesdizzinessFetigue: event.target.value, + })); + }} + /> + + + + + + Are you currently taking anti-coagulant or blood thinning + medication? + + { + setPatient((prevValues) => ({ + ...prevValues, + antiColligent: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + + + Have you ever had any major illness, injuries, hospitalization + or surgeries? + + { + setPatient((prevValues) => ({ + ...prevValues, + injuriesHospitalization: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + +
+ + + + + Please list current supplements or drugs you may be taking: + + { + setPatient((prevValues) => ({ + ...prevValues, + supplementsOrDrugs: event.target.value, + })); + }} + /> + + + + + ); } - - -export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){ - - const [patient, setPatient] = React.useState({ - generalHealth: '', - presentProblemBefore: '', - ifYespresentProblemBefore:'', - ifYestreatmentProvided:'', - ifYesOutcome:'', - strokeBloodclotting: '', - ifYesstrokeBloodclotting: '', - dizzinessFetigue: '', - ifyesdizzinessFetigue:'', - antiColligent: '', - injuriesHospitalization: '', - supplementsOrDrugs:'' - }); - - 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( - <> -
- - - - - Overall your General Healgth is: - { - setPatient((prevValues) => ({ - ...prevValues, - generalHealth: event.target.value, - })); - }} - > - } label="Excellent" /> - } label="Very Good" /> - } label="Good" /> - } label="Fair" /> - } label="Poor" /> - - - - - - - Have you experienced your present problem before? - { - setPatient((prevValues) => ({ - ...prevValues, - presentProblemBefore: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - - { - setPatient((prevValues) => ({ - ...prevValues, - ifYespresentProblemBefore: event.target.value, - })); - }} - /> - - - { - setPatient((prevValues) => ({ - ...prevValues, - ifYestreatmentProvided: event.target.value, - })); - }} - /> - - - { - setPatient((prevValues) => ({ - ...prevValues, - ifYesOutcome: event.target.value, - })); - }} - /> - - - - - - Have you ever had a stroke or issues with blood clotting? - { - setPatient((prevValues) => ({ - ...prevValues, - strokeBloodclotting: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - { - setPatient((prevValues) => ({ - ...prevValues, - ifYesstrokeBloodclotting: event.target.value, - })); - }} - /> - - - - - Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss? - { - setPatient((prevValues) => ({ - ...prevValues, - dizzinessFetigue: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - { - setPatient((prevValues) => ({ - ...prevValues, - ifyesdizzinessFetigue: event.target.value, - })); - }} - /> - - - - - Are you currently taking anti-coagulant or blood thinning medication? - { - setPatient((prevValues) => ({ - ...prevValues, - antiColligent: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - - Have you ever had any major illness, injuries, hospitalization or surgeries? - { - setPatient((prevValues) => ({ - ...prevValues, - injuriesHospitalization: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - -
- - - - Please list current supplements or drugs you may be taking: - { - setPatient((prevValues) => ({ - ...prevValues, - supplementsOrDrugs: event.target.value, - })); - }} - /> - - - - - - ) -} \ No newline at end of file diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 52c393d..3c6414c 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -147,49 +147,48 @@ export default function PersonalSection({ className='collapsable-form-style' > { + let value = e.target.value; + if (value[0] === '0') { + value = value.slice(1); } - disabled={type == 'display'} - onChange={(e) => { - let value = e.target.value; - if (value[0] === '0') { - value = value.slice(1); - } + setPatient((prevValues: any) => ({ + ...prevValues, + cellPhone: value, + })); + }} + onBlur={(e) => { + if (!/^\d{10}$/.test(e.target.value)) { setPatient((prevValues: any) => ({ ...prevValues, - cellPhone: value, + cellPhoneError: true, + })); + } else { + setPatient((prevValues: any) => ({ + ...prevValues, + cellPhoneError: false, })); - }} - onBlur={(e) => { - if (!/^\d{10}$/.test(e.target.value)) { - setPatient((prevValues: any) => ({ - ...prevValues, - cellPhoneError: true, - })); - } else { - setPatient((prevValues: any) => ({ - ...prevValues, - cellPhoneError: false, - })); - } - }} - error={patient.cellPhoneError} - helperText={ - patient.cellPhoneError - ? 'Please enter a valid 10-digit phone number' - : '' } - /> - + }} + error={patient.cellPhoneError} + helperText={ + patient.cellPhoneError + ? 'Please enter a valid 10-digit phone number' + : '' + } + /> void - patientDataDiplay:any; - type:string; - } +type Props = { + 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; + patientDataDiplay: any; + type: string; +}; -export default function SystemReviewSection6({handleFormSection6Data,patientDataDiplay,type}:Props){ - const [patient, setPatients] = React.useState({ - eyes: '', - IntestinesBowls: '', - jointsBones:'', - allergies: '', - earsNoseMouth: '', - urinary: '', - skin: '', - psychological: '', - heart: '', - muscles: '', - internalOrgans: '', - gynecological: '', - lungsBreathing: '', - nerves: '', - blood: '', - prostate: '', - explanation:'', - }); +export default function SystemReviewSection6({ + handleFormSection6Data, + patientDataDiplay, + type, +}: Props) { + const [patient, setPatients] = React.useState({ + eyes: '', + IntestinesBowls: '', + jointsBones: '', + allergies: '', + earsNoseMouth: '', + urinary: '', + skin: '', + psychological: '', + heart: '', + muscles: '', + internalOrgans: '', + gynecological: '', + lungsBreathing: '', + nerves: '', + blood: '', + prostate: '', + 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( - <> - - Please choose body areas or systems where you may have problems: + 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 ( + <> + + + Please choose body areas or systems where you may have problems: + + + + + + Eyes + { + setPatients((prevValues) => ({ + ...prevValues, + eyes: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + - - - - Eyes - { - setPatients((prevValues) => ({ - ...prevValues, - eyes: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Intestines/Bowls - { - setPatients((prevValues) => ({ - ...prevValues, - IntestinesBowls: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Joints/Bones - { - setPatients((prevValues) => ({ - ...prevValues, - jointsBones: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Allergies - { - setPatients((prevValues) => ({ - ...prevValues, - allergies: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Ears, Nose, Mouth, Throat - { - setPatients((prevValues) => ({ - ...prevValues, - earsNoseMouth: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Urinary - { - setPatients((prevValues) => ({ - ...prevValues, - urinary: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Skin - { - setPatients((prevValues) => ({ - ...prevValues, - skin: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Psychological/Emotional - { - setPatients((prevValues) => ({ - ...prevValues, - psychological: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Heart - { - setPatients((prevValues) => ({ - ...prevValues, - heart: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Muscles - { - setPatients((prevValues) => ({ - ...prevValues, - muscles: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Internal Organs - { - setPatients((prevValues) => ({ - ...prevValues, - internalOrgans: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Gynecological menstrual/Brest - { - setPatients((prevValues) => ({ - ...prevValues, - gynecological: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - - Lungs/Breathing - { - setPatients((prevValues) => ({ - ...prevValues, - lungsBreathing: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Nerves - { - setPatients((prevValues) => ({ - ...prevValues, - nerves: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Blood - { - setPatients((prevValues) => ({ - ...prevValues, - blood: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - - Prostate/Testicular/Penile - { - setPatients((prevValues) => ({ - ...prevValues, - prostate: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - - - - - Please explain your check marks:

- { - setPatients((prevValues) => ({ - ...prevValues, - explanation: event.target.value, - })); - }} - /> - - + sm={12} + className='collapsable-form-style-radioButtons' + > + + Intestines/Bowls + { + setPatients((prevValues) => ({ + ...prevValues, + IntestinesBowls: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + - - ) -} \ No newline at end of file + + + Joints/Bones + { + setPatients((prevValues) => ({ + ...prevValues, + jointsBones: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Allergies + { + setPatients((prevValues) => ({ + ...prevValues, + allergies: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Ears, Nose, Mouth, Throat + { + setPatients((prevValues) => ({ + ...prevValues, + earsNoseMouth: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Urinary + { + setPatients((prevValues) => ({ + ...prevValues, + urinary: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Skin + { + setPatients((prevValues) => ({ + ...prevValues, + skin: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Psychological/Emotional + { + setPatients((prevValues) => ({ + ...prevValues, + psychological: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Heart + { + setPatients((prevValues) => ({ + ...prevValues, + heart: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Muscles + { + setPatients((prevValues) => ({ + ...prevValues, + muscles: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Internal Organs + { + setPatients((prevValues) => ({ + ...prevValues, + internalOrgans: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Gynecological menstrual/Brest + { + setPatients((prevValues) => ({ + ...prevValues, + gynecological: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + + Lungs/Breathing + { + setPatients((prevValues) => ({ + ...prevValues, + lungsBreathing: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Nerves + { + setPatients((prevValues) => ({ + ...prevValues, + nerves: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Blood + { + setPatients((prevValues) => ({ + ...prevValues, + blood: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + + Prostate/Testicular/Penile + { + setPatients((prevValues) => ({ + ...prevValues, + prostate: event.target.value, + })); + }} + > + } + label='Yes' + /> + } + label='No' + /> + + + + + Please explain your check marks: +

+ { + setPatients((prevValues) => ({ + ...prevValues, + explanation: event.target.value, + })); + }} + /> + + + + ); +}