diff --git a/package-lock.json b/package-lock.json index 7f1ffd9..28653c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-signature-canvas": "^1.0.6", "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", @@ -53,6 +54,7 @@ "@types/leaflet": "^1.9.3", "@types/react-date-range": "^1.4.4", "@types/react-gauge-chart": "^0.4.0", + "@types/react-signature-canvas": "^1.0.2", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "tailwindcss": "^3.3.2" @@ -4972,6 +4974,16 @@ "@types/react": "*" } }, + "node_modules/@types/react-signature-canvas": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/react-signature-canvas/-/react-signature-canvas-1.0.2.tgz", + "integrity": "sha512-uDHDoo2JM/9qYS+U7PRKDLBgOnQOOUEkDdXjCxBvI19fWtOLqXisrjiquPu+enu5iu2oWIfU7cVhn1QJZPkLTg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/signature_pad": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.6", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", @@ -5029,6 +5041,12 @@ "@types/node": "*" } }, + "node_modules/@types/signature_pad": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.2.tgz", + "integrity": "sha512-dDfWIgRcdzAaeVOpLRmLHIumGwc5inSD4Dj2Duis3yUEoSADZECLJHKkUQphbaANQ7kSC2bkf1JzyBPSmTlrPQ==", + "dev": true + }, "node_modules/@types/sockjs": { "version": "0.3.33", "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz", @@ -15961,6 +15979,20 @@ } } }, + "node_modules/react-signature-canvas": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz", + "integrity": "sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==", + "dependencies": { + "signature_pad": "^2.3.2", + "trim-canvas": "^0.1.0" + }, + "peerDependencies": { + "prop-types": "^15.5.8", + "react": "0.14 - 18", + "react-dom": "0.14 - 18" + } + }, "node_modules/react-smooth": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz", @@ -16844,6 +16876,11 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/signature_pad": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz", + "integrity": "sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -17691,6 +17728,11 @@ "node": ">=8" } }, + "node_modules/trim-canvas": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/trim-canvas/-/trim-canvas-0.1.2.tgz", + "integrity": "sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ==" + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index 0e57cc1..4aabaea 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-signature-canvas": "^1.0.6", "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", @@ -73,6 +74,7 @@ "@types/leaflet": "^1.9.3", "@types/react-date-range": "^1.4.4", "@types/react-gauge-chart": "^0.4.0", + "@types/react-signature-canvas": "^1.0.2", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "tailwindcss": "^3.3.2" diff --git a/public/index.html b/public/index.html index aa069f2..207922c 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - React App + In Motion Spine & Joint Center 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/Helper/SignatureComponent.tsx b/src/Components/Helper/SignatureComponent.tsx new file mode 100644 index 0000000..123e546 --- /dev/null +++ b/src/Components/Helper/SignatureComponent.tsx @@ -0,0 +1,50 @@ +import React, { useEffect, useRef } from 'react'; +import SignatureCanvas from 'react-signature-canvas'; +import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; +import { FormLabel, Grid } from '@mui/material'; + + +type Props={ + signature:any; + setSignature: (value: any) => void; +} +const SignatureComponent = ({signature,setSignature}:Props) => { + const sigCanvas = useRef(); + + const clear = () => sigCanvas.current.clear(); +// setSignature(sigCanvas.current.toDataURL()); + + const save = () => { + setSignature(sigCanvas.current.toDataURL()); + }; + + const StyledCanvas = styled(SignatureCanvas)({ + border: '5px solid #888888' + }); + + return ( + <> + + + + + + + + + + + + + ); +}; + +export default SignatureComponent; diff --git a/src/Components/ImageMarker/EntryForm.tsx b/src/Components/ImageMarker/EntryForm.tsx index 06e92c8..cde8697 100644 --- a/src/Components/ImageMarker/EntryForm.tsx +++ b/src/Components/ImageMarker/EntryForm.tsx @@ -11,10 +11,12 @@ type Props = { const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => { return (
- *** Mark Your Areas of Pain on the Picture *** - {entries && entries.length > 0 && + + *** Mark Your Areas of Pain on the Picture *** + + {entries && entries.length > 0 && ( How much pain are you in right now? - } + )} {entries?.map((entry: any, index: number) => ( { onDelete={onDelete} /> ))} - { + {/* { entries && entries.length > 0 &&
- } + } */}
); }; diff --git a/src/Components/ImageMarker/PatientImageMarker.css b/src/Components/ImageMarker/PatientImageMarker.css index 3abf761..82f680a 100644 --- a/src/Components/ImageMarker/PatientImageMarker.css +++ b/src/Components/ImageMarker/PatientImageMarker.css @@ -5,7 +5,7 @@ } .image-marker-div .entry-div { - width: 50%; + width: 55%; } .image-marker-div .entry-div .entryForm { @@ -51,6 +51,9 @@ margin-top: 2%; margin-bottom: 3%; } +.image-marker-div .marker-div { + width: 45%; +} @media only screen and (max-width: 1200px) { .image-marker-div { @@ -69,6 +72,11 @@ gap: 0; margin-bottom: 2%; } + .image-marker-div .marker-div { + /* margin-right: 5%; */ + margin-top: 3%; + width: 100%; + } } @media only screen and (min-width: 1400px) { diff --git a/src/Components/ImageMarker/PatientImageMarker.tsx b/src/Components/ImageMarker/PatientImageMarker.tsx index 1ac39be..a3018a6 100644 --- a/src/Components/ImageMarker/PatientImageMarker.tsx +++ b/src/Components/ImageMarker/PatientImageMarker.tsx @@ -1,12 +1,12 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react'; import ImageMarker, { Marker } from 'react-image-marker'; import humanImage from '../../Assets/human_body_3d.jpg'; import EntryForm from './EntryForm'; -import './PatientImageMarker.css' +import './PatientImageMarker.css'; -type Props = {} +type Props = {}; const PatientImageMarker = (props: Props) => { const [markers, setMarkers] = useState>([]); @@ -38,36 +38,42 @@ const PatientImageMarker = (props: Props) => { 'entry', JSON.stringify({ markers: markers, entries: entries }) ); - } + }; useEffect(() => { - if (action.type === 'add') - setEntries([...entries, { index: entries.length + 1, severity: 5 }]); - else + if (action.type === 'add') { + const ind = + entries.length != 0 ? entries[entries.length - 1].index + 1 : 1; + setEntries([...entries, { index: ind, severity: 5 }]); + } else setEntries( entries.filter((entry: any, ind: number) => ind != action.index) ); }, [action]); - - return ( -
-
- -
-
- addEntries(marker)} - /> -
-
- ) -} -export default PatientImageMarker; \ No newline at end of file + useEffect(() => { + onSave(); + }, [entries]); + + return ( +
+
+ +
+
+ addEntries(marker)} + /> +
+
+ ); +}; + +export default PatientImageMarker; diff --git a/src/Components/ImageMarker/ViewPatientImageMarker.tsx b/src/Components/ImageMarker/ViewPatientImageMarker.tsx index 495dfae..d9cb0f9 100644 --- a/src/Components/ImageMarker/ViewPatientImageMarker.tsx +++ b/src/Components/ImageMarker/ViewPatientImageMarker.tsx @@ -15,7 +15,7 @@ const ViewPatientImageMarker = (props: Props) => { How much pain? {saved.entries?.map((entry: any, index: number) => (
- {entry.index} + {index + 1} 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 && patientDataDiplay.numberOfChildren + : patient.numberOfChildren + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + occupation: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.occupation + : patient.occupation + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + hoursPerWeek: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.hoursPerWeek + : patient.hoursPerWeek + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + employer: e.target.value, + })); + }} + value={ + type == 'display' ? patientDataDiplay && patientDataDiplay.employer : patient.employer + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + businessPhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.businessPhone + : patient.businessPhone + } + disabled={type == 'display'} + /> + + + + + + Spouse's Information: + + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseName: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.spouseName + : patient.spouseName + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseEmployer: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.spouseEmployer + : patient.spouseEmployer + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spouseBusinessPhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.spouseBusinessPhone + : patient.spouseBusinessPhone + } + disabled={type == 'display'} + /> + + + + Emergency: + + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + emergencyContact: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.emergencyContact + : patient.emergencyContact + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + relationship: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.relationship + : patient.relationship + } + disabled={type == 'display'} + /> + + + { + setPatient((prevValues: any) => ({ + ...prevValues, + spousePhone: e.target.value, + })); + }} + value={ + type == 'display' + ? patientDataDiplay && patientDataDiplay.spousePhone + : patient.spousePhone + } + disabled={type == 'display'} + /> + + + + ); +} diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx index 67df552..a86c4d1 100644 --- a/src/Components/PatientForm/MedicalHistorySection3.tsx +++ b/src/Components/PatientForm/MedicalHistorySection3.tsx @@ -68,7 +68,6 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi ) },[patient]) - console.log("patientDataDiplay",patientDataDiplay) return( <> @@ -93,7 +92,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi physicianname: e.target.value, })); }} - value={type=='display'?patientDataDiplay.physicianname:patient.physicianname} + value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname} disabled={type=='display'} /> @@ -114,7 +113,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi physiciancity: e.target.value, })); }} - value={type=='display'?patientDataDiplay.physiciancity:patient.physiciancity} + value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity} disabled={type=='display'} /> @@ -135,7 +134,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi physicianstate: e.target.value, })); }} - value={type=='display'?patientDataDiplay.physicianstate:patient.physicianstate} + value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate} disabled={type=='display'} /> @@ -157,7 +156,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi physicianphone: e.target.value, })); }} - value={type=='display'?patientDataDiplay.physicianphone:patient.physicianphone} + value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone} disabled={type=='display'} /> @@ -190,7 +189,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi Previous Chiropractic Care: { setPatient((prevValues) => ({ @@ -223,7 +222,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi chiropractorName: e.target.value, })); }} - value={type=='display'?patientDataDiplay.chiropractorName:patient.chiropractorName} + value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName} disabled={type=='display'} /> @@ -245,7 +244,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi chiropractorState: e.target.value, })); }} - value={type=='display'?patientDataDiplay.chiropractorState:patient.chiropractorState} + value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState} disabled={type=='display'} /> @@ -257,7 +256,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi { setPatient((prevValues) => ({ @@ -279,7 +278,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi { setPatient((prevValues) => ({ @@ -305,7 +304,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi { setPatient((prevValues) => ({ diff --git a/src/Components/PatientForm/OtherDetails8.tsx b/src/Components/PatientForm/OtherDetails8.tsx index fa5feda..5cf6538 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..b813ff2 100644 --- a/src/Components/PatientForm/PainAnalysisSection4.tsx +++ b/src/Components/PatientForm/PainAnalysisSection4.tsx @@ -1,368 +1,587 @@ 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 && 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 && 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 && 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 && patientDataDiplay.treatmentGoal + : patient.treatmentGoal + } + disabled={type == 'display'} + /> + + + + ); +} diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx index b5fc217..cb5b9fc 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 Health 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/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index 2725462..bc4216e 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Footer from '../Footer'; import Header from '../Header'; import { + Box, Button, Checkbox, FormControlLabel, @@ -33,6 +34,8 @@ import OtherDetails8 from './OtherDetails8'; import PatientImageMarker from '../ImageMarker/PatientImageMarker'; import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker'; import AlertDialog from '../Helper/AlertDialogBox'; +import SignatureComponent from '../Helper/SignatureComponent'; +import { Link, useLocation } from 'react-router-dom'; const Accordion = styled((props: AccordionProps) => ( @@ -78,7 +81,7 @@ export default function PatientForm({ type }: Props) { const [alertProps, setAlertProps] = React.useState({}); const [expanded, setExpanded] = React.useState('panel1'); const [isChecked, setIsChecked] = React.useState(false); - const [signature, setSignature] = React.useState(''); + const [signature, setSignature] = React.useState(); const [section1Data, setSection1Data] = React.useState({}); const [section2Data, setSection2Data] = React.useState({}); const [section3Data, setSection3Data] = React.useState({}); @@ -88,6 +91,7 @@ export default function PatientForm({ type }: Props) { const [section7Data, setSection7Data] = React.useState({}); const [section8Data, setSection8Data] = React.useState({}); const [allPatientData, setAllPatientData] = React.useState([]); + const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState(false) const handleFormSection1Data = ( fullName?: string | undefined, @@ -347,6 +351,7 @@ export default function PatientForm({ type }: Props) { recreationalActivities: section7Data, otherDetails: section8Data, injuryPainDetails: saved.entries, + signature: signature, }; // Create a copy of the existing data array and push the new patient data @@ -370,6 +375,13 @@ export default function PatientForm({ type }: Props) { section1Data.mailingAddress !== '' ) { TextFile(); + setPatientDetailsButtonFlag(true) + setAlertProps({ + open: true, + severity: 'success', + message: 'The patient details have been submitted!', + duration: 5000, + }); } else { setAlertProps({ open: true, @@ -410,8 +422,6 @@ export default function PatientForm({ type }: Props) { JSON.parse(localStorage.getItem('patientData')) : []; - console.log('dfsdfdsf', patientData); - return ( <> {alertProps && alertProps.open && ( @@ -425,7 +435,7 @@ export default function PatientForm({ type }: Props) { )}
- + {/*
*/} Confidential Patient Information @@ -436,7 +446,7 @@ export default function PatientForm({ type }: Props) { onChange={handleExpandChange('panel1')} > } + // expandIcon={} aria-controls='panel1a-content' id='panel1a-header' > @@ -633,6 +643,7 @@ export default function PatientForm({ type }: Props) { - - { - setSignature(event.target.value); - }} - /> + + + {type !== 'display' ? ( + <> + + + Signature: + + + + + + Please verify your signature here: + + + + + + + ) : ( + + + Your signature: + + + + + + )} + - - + + {patientDetailsButtonFlag && type!=='display'? + + + :null} + + {type=='display'? + + + :null} + + + + {/* */} diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 52c393d..78fc6be 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -109,7 +109,7 @@ export default function PersonalSection({ name='fullName' placeholder='Please enter your name' value={ - type == 'display' ? patientDataDiplay.fullName : patient.fullName + type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName } disabled={type == 'display'} onChange={(e) => { @@ -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' + : '' + } + /> { setPatient((prevValues: any) => ({ @@ -282,7 +281,7 @@ export default function PersonalSection({ name='age' type='number' placeholder='Please enter your age' - value={type == 'display' ? patientDataDiplay.age : patient.age} + value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age} disabled={type == 'display'} onChange={(e) => { setPatient((prevValues: any) => ({ @@ -323,7 +322,7 @@ export default function PersonalSection({ label='Date of Birth' value={ type == 'display' - ? patientDataDiplay.dateOfBirth + ? patientDataDiplay && patientDataDiplay.dateOfBirth : birthDateValue } disabled={type == 'display'} @@ -353,7 +352,7 @@ export default function PersonalSection({ name='socialSecurityNumber' value={ type == 'display' - ? patientDataDiplay.socialSecurityNumber + ? patientDataDiplay && patientDataDiplay.socialSecurityNumber : patient.socialSecurityNumber } disabled={type == 'display'} @@ -385,7 +384,7 @@ export default function PersonalSection({ name='mailingAddress' value={ type == 'display' - ? patientDataDiplay.mailingAddress + ? patientDataDiplay && patientDataDiplay.mailingAddress : patient.mailingAddress } disabled={type == 'display'} @@ -430,7 +429,7 @@ export default function PersonalSection({ variant='outlined' label='State' name='state' - value={type == 'display' ? patientDataDiplay.state : patient.state} + value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state} disabled={type == 'display'} onChange={(e) => { setPatient((prevValues: any) => ({ @@ -454,7 +453,7 @@ export default function PersonalSection({ variant='outlined' label='City' name='city' - value={type == 'display' ? patientDataDiplay.city : patient.city} + value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city} disabled={type == 'display'} onChange={(e) => { setPatient((prevValues: any) => ({ @@ -479,7 +478,7 @@ export default function PersonalSection({ label='Zip Code' name='zipCode' value={ - type == 'display' ? patientDataDiplay.zipCode : patient.zipCode + type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode } disabled={type == 'display'} onChange={(e) => { @@ -508,7 +507,7 @@ export default function PersonalSection({ { diff --git a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx index f57278f..6078b78 100644 --- a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx +++ b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx @@ -103,7 +103,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati multiline variant="outlined" label="" - value={type=='display'?patientDataDiplay.hobbies:patient.hobbies} + value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies} disabled={type=='display'} onChange={(event:any) => { setPatient((prevValues) => ({ @@ -119,7 +119,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati Your education level: { setPatient((prevValues) => ({ ...prevValues, @@ -146,7 +146,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati { setPatient((prevValues) => ({ ...prevValues, @@ -170,7 +170,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati variant="outlined" label="Times per week?" name='treatmentGoal' - value={type=='display'?patientDataDiplay.excerciseExplanation:patient.excerciseExplanation} + value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation} onChange={(event) => { setPatient((prevValues) => ({ ...prevValues, @@ -190,7 +190,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati { setPatient((prevValues) => ({ ...prevValues, @@ -211,7 +211,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -255,7 +255,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -299,7 +299,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -343,7 +343,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -387,7 +387,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -431,7 +431,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> { setPatient((prevValues) => ({ ...prevValues, @@ -475,7 +475,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati sm={12} className='collapsable-form-style-form7'> 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, + })); + }} + /> + + + + ); +}