Added View Patient details screen

This commit is contained in:
vipeeshpavithran 2023-09-05 12:29:08 +05:30
parent 70f97d1e00
commit 5add485a0b
15 changed files with 1896 additions and 7 deletions

View File

@ -3,6 +3,7 @@ import './App.css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import PatientForm from './Components/PatientForm/PatientForm';
import PatientDetails from './Components/PatientDetails/PatientDetails';
function App() {
const queryClient = new QueryClient();
@ -12,6 +13,7 @@ function App() {
<BrowserRouter>
<Routes>
<Route path='/' element={<PatientForm />} />
<Route path='/view-details' element={<PatientDetails />}/>
</Routes>
</BrowserRouter>
</div>

View File

@ -24,14 +24,14 @@ const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
onDelete={onDelete}
/>
))}
{/* {
{
entries && entries.length > 0 &&
<div className='buttonDiv'>
<Button variant='contained' onClick={() => onSave({})}>
Save
</Button>
</div>
} */}
}
</div>
);
};

View File

@ -39,6 +39,19 @@
width: 80%;
}
.image-marker-div .entry-div .sub-header {
font-weight: 500;
font-size: 16px;
}
.ratingResult {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2%;
margin-bottom: 3%;
}
@media only screen and (max-width: 1200px) {
.image-marker-div {
flex-direction: column;
@ -60,7 +73,11 @@
@media only screen and (min-width: 1400px) {
.image-marker-div .rating-div {
width: 60%;
width: 70%;
}
.ratingResult .rating-div {
width: 80%;
}
}

View File

@ -34,7 +34,10 @@ const PatientImageMarker = (props: Props) => {
};
const onSave = () => {
localStorage.setItem(
'entry',
JSON.stringify({ markers: markers, entries: entries })
);
}
useEffect(() => {

View File

@ -5,9 +5,10 @@ type Props = {
index: number;
defaultValue: number;
onUpdate: (data: any) => void;
disabled?: boolean;
};
const Rating = ({index, defaultValue, onUpdate} : Props) => {
const Rating = ({index, defaultValue, onUpdate, disabled} : Props) => {
return (
<div key={index} className='rating-div'>
{[...Array(10)].map((star, ind) => {
@ -17,6 +18,7 @@ const Rating = ({index, defaultValue, onUpdate} : Props) => {
className={`btn btn-scale btn-scale-asc-${ind+1} ${(ind+1) === defaultValue ? 'selected' : ''}`}
key={ind + 1}
onClick={() => onUpdate({ index: index, severity: ind + 1 })}
disabled={disabled}
>
{ind + 1}
</Button>

View File

@ -0,0 +1,30 @@
import React, { useEffect, useState } from 'react'
import ImageMarker, { Marker } from 'react-image-marker';
import humanImage from '../../Assets/human_body_3d.jpg';
import './PatientImageMarker.css'
import Rating from './Rating';
type Props = {}
const ViewPatientImageMarker = (props: Props) => {
const saved = JSON.parse(localStorage.getItem('entry') || '{}');
return (
<div className='image-marker-div'>
<div className='entry-div'>
<span className='sub-header'>How much pain?</span>
{saved.entries?.map((entry: any, index: number) => (
<div className='ratingResult' key={index}>
<span className='image-marker__marker--default'>{entry.index}</span>
<Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/>
</div>
))}
</div>
<div className='marker-div'>
<ImageMarker src={humanImage} markers={saved.markers ?? []} />
</div>
</div>
)
}
export default ViewPatientImageMarker;

View File

@ -0,0 +1,185 @@
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';
interface FormValues {
maritalStatus: string;
numberOfChildren: string;
ages: string;
occupation: string;
hoursPerWeek: number | string;
employer: string;
businessPhone: string;
spouseName: string;
spouseEmployer: string;
spouseBusinessPhone: string;
emergencyContact: string;
relationship: string;
spousePhone: string;
}
interface Props {
familyDetails: FormValues;
}
export default function FamilyFormSection({familyDetails}:Props){
return(
<>
<Grid container direction="row">
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Marital Status</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="married"
name="maritalStatus"
value={familyDetails.maritalStatus}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="married" control={<Radio />} label="Married" />
<FormControlLabel value="single" control={<Radio />} label="Single" />
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
type="number"
label="Number of Children/Ages"
className='collapsable-form-style'
name='numberOfChildren'
value={familyDetails.numberOfChildren}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Occupation"
className='collapsable-form-style'
name='occupation'
value={familyDetails.occupation}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Hours/Week"
type="number"
className='collapsable-form-style'
name='hoursPerWeek'
value={familyDetails.hoursPerWeek}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Employer"
className='collapsable-form-style'
name='employer'
value={familyDetails.employer}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Business Phone"
type="number"
className='collapsable-form-style'
name='businessPhone'
value={familyDetails.businessPhone}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Spouse's Name"
className='collapsable-form-style'
name='spouseName'
value={familyDetails.spouseName}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Spouse's Employer"
className='collapsable-form-style'
name='spouseEmployer'
value={familyDetails.spouseEmployer}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Business Phone"
type="number"
className='collapsable-form-style'
name='spouseBusinessPhone'
value={familyDetails.spouseBusinessPhone}
disabled
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Emergency Contact"
type="number"
className='collapsable-form-style'
name='emergencyContact'
value={familyDetails.emergencyContact}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Relationship"
className='collapsable-form-style'
name='relationship'
value={familyDetails.relationship}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
type="number"
label="Phone"
className='collapsable-form-style'
name='spousePhone'
value={familyDetails.spousePhone}
disabled
/>
</Grid>
</Grid>
</>
)
};

View File

@ -0,0 +1,165 @@
import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from 'yup';
interface FormValues {
physicianname: string;
physiciancity: string;
physicianstate: string;
physicianphone: string;
chiropractorName: string;
chiropractorState: string;
xray: boolean;
ctScan: boolean;
cdImages: boolean;
visitDetails: string;
cellPhoneProvider: string;
}
interface Props {
medicalHistory: FormValues;
}
export default function MedicalHistoryForm({medicalHistory}:Props){
return(
<>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
</Grid>
<Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Family physician"
name='physicianname'
value={medicalHistory.physicianname}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="City"
name='physiciancity'
value={medicalHistory.physiciancity}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="State"
name='physicianstate'
value={medicalHistory.physicianstate}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Phone"
type="number"
name='physicianphone'
value={medicalHistory.physicianphone}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'></Grid>
<Grid item xs={4} className='collapsable-form-style'></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
</Grid>
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Previous Chiropractic Care:</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Chiropractor's Name"
name='chiropractorName'
value={medicalHistory.chiropractorName}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="City/State"
name='chiropractorState'
value={medicalHistory.chiropractorState}
disabled
/>
</Grid>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="yes"
name="radio-buttons-group"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Who can we thank for referring you to our office:</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="physician"
name="radio-buttons-group"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="friend" control={<Radio />} label="Friend" />
<FormControlLabel value="relative" control={<Radio />} label="Relative" />
<FormControlLabel value="physician" control={<Radio />} label="Physician" />
<FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
<FormControlLabel value="google" control={<Radio />} label="Google" />
<FormControlLabel value="others" control={<Radio />} label="Others" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
// defaultValue="email"
name="radio-buttons-group"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="email" control={<Radio />} label="Email" />
<FormControlLabel value="text" control={<Radio />} label="Text" />
</RadioGroup>
</FormControl>
</Grid>
</>
)}

View File

@ -0,0 +1,113 @@
import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import React from "react";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import dayjs from "dayjs";
interface FormValues {
familyHistory: string;
sleep: string;
pillow:string;
orthotics:string;
brestExam: any;
pregnancy:string;
menstralCycle: any;
}
export default function OtherDetails8(){
return(
<>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-multiline'>
<FormLabel>Family history and health status:</FormLabel><br></br>
<TextField
multiline
variant="outlined"
label=""
name='explanation'
value=''
disabled
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>How do you sleep?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Back" control={<Radio />} label="Back" />
<FormControlLabel value="Side" control={<Radio />} label="Side" />
<FormControlLabel value="Stomach" control={<Radio />} label="Stomach" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Do you use a pillow?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Do you wear orthotics or arch support?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
<FormControl>
<TextField
name=''
value=''
disabled
/>
</FormControl>
</Grid>
{/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
<FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
</Grid> */}
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Possible pregnancy?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
<FormControl>
<TextField
name=''
value=''
disabled
/>
</FormControl>
</Grid>
</Grid>
</>
)
}

View File

@ -0,0 +1,219 @@
import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from 'yup';
interface FormValues {
chiefComplaint:string;
painQuality: string[];
painDuration: string;
currentTreatment: string;
treatmentResults: string;
treatmentGoal: string;
}
interface Props {
painAnalysis: FormValues;
}
export default function PainAnalysisSection4({painAnalysis}:Props){
return(
<>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
</Grid>
<Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="How did your Chief complaint start?(ex-fell on ice)"
name='chiefComplaint'
value={painAnalysis.chiefComplaint}
disabled
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>What makes your pain worse?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox name="sharp" />}
label="Bending"
/>
<FormControlLabel
control={<Checkbox name="dull" />}
label="Standing"
/>
<FormControlLabel
control={<Checkbox name="burning" />}
label="Sitting"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Walking"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Others"
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>What makes your pain better?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox name="sharp" />}
label="laying down"
/>
<FormControlLabel
control={<Checkbox name="dull" />}
label="Standing"
/>
<FormControlLabel
control={<Checkbox name="burning" />}
label="Sitting"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Walking"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Others"
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>What is the quality of your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox name="sharp" />}
label="Sharp"
/>
<FormControlLabel
control={<Checkbox name="dull" />}
label="Dull/Ache"
/>
<FormControlLabel
control={<Checkbox name="burning" />}
label="Throbbing"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Tingling/Numbness/Burning"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Others"
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>What is the worst time for your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox name="sharp" />}
label="Morning"
/>
<FormControlLabel
control={<Checkbox name="dull" />}
label="During day"
/>
<FormControlLabel
control={<Checkbox name="burning" />}
label="Evening"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Lying in bed"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Others"
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
<RadioGroup
name="painDuration"
value={painAnalysis.painDuration}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
<FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
<FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
<FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Has your current complaint caused any of the following?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox name="sharp" />}
label="Muscle weakness"
/>
<FormControlLabel
control={<Checkbox name="dull" />}
label="Bowel/Bladder problem"
/>
<FormControlLabel
control={<Checkbox name="burning" />}
label="Digestion"
/>
<FormControlLabel
control={<Checkbox name="aching" />}
label="Cardiac/Respiratory"
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
<RadioGroup
name="painDuration"
value={painAnalysis.painDuration}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}>
<FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="What is your goal from treatment?(ex-play golf without pain)"
name='treatmentGoal'
value={painAnalysis.treatmentGoal}
disabled
/>
</Grid>
</Grid>
</>
)}

View File

@ -0,0 +1,170 @@
import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import * as React from 'react';
import Table from '../Helper/AddNewTable';
interface FormValues {
generalHealth: string;
presentProblemBefore: string;
ifYespresentProblemBefore:string;
ifYestreatmentProvided: string;
ifYesOutcome: string;
strokeBloodclotting: string;
ifYesstrokeBloodclotting: string;
dizzinessFetigue: string;
ifyesdizzinessFetigue: string;
antiColligent: string;
injuriesHospitalization: string;
supplementsOrDrugs: string;
}
interface Props {
pastTreatement: FormValues
}
export default function PastTreatment5({pastTreatement}: Props){
return(
<>
<form>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Overall your General Healgth is:</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Excellent" control={<Radio />} label="Excellent" />
<FormControlLabel value="Very Good" control={<Radio />} label="Very Good" />
<FormControlLabel value="Good" control={<Radio />} label="Good" />
<FormControlLabel value="Fair" control={<Radio />} label="Fair" />
<FormControlLabel value="Poor" control={<Radio />} label="Poor" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you experienced your present problem before?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="Was treatment provided?If yes, by whom?"
name='treatmentGoal'
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="Outcome?"
name='treatmentGoal'
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, when?"
name='treatmentGoal'
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
<Table />
</Grid>
<Grid item xs={6} className='collapsable-form-style-multiline'>
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
<TextField
multiline
variant="outlined"
label=""
name='treatmentGoal'
/>
</Grid>
</Grid>
</form>
</>
)
}

View File

@ -0,0 +1,333 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Footer from "../Footer";
import Header from "../Header";
import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import PersonalSection from './PersonalSection1';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import MuiAccordionSummary, {
AccordionSummaryProps,
} from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import MedicalHistory from './MedicalHistorySection3';
import FamilyFormSection from './FamilyFormSection2';
import PainAnalysisSection4 from './PainAnalysisSection4';
import PastTreatment5 from './PastTreatment5';
import SystemReviewSection6 from './SyestemReviewSection6';
import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
import OtherDetails8 from './OtherDetails8';
import PatientImageMarker from '../ImageMarker/PatientImageMarker';
import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
interface Patient {
fullName: string;
homePhone: string;
cellPhone: string;
email: string;
age: number;
dateOfBirth: string;
socialSecurityNumber: string;
mailingAddress: string;
city: string;
state: string;
zipCode: string;
gender: string;
maritalStatus: string;
}
const personalData : Patient = {
fullName: "Vipeesh",
homePhone: "7259910917",
cellPhone: "7259910917",
email: "vipeesh191@gmail.com",
age: 33,
dateOfBirth: "27-4-1990",
socialSecurityNumber: "",
mailingAddress: "",
city: "Kannur",
state: "Kerala",
zipCode: "670643",
gender: "male",
maritalStatus: "",
}
const familyData = {
maritalStatus:'',
numberOfChildren:'',
ages:'',
occupation:'',
hoursPerWeek:'',
employer:'',
businessPhone:'',
spouseName:'',
spouseEmployer:'',
spouseBusinessPhone:'',
emergencyContact:'',
relationship:'',
spousePhone:''
}
const medicalHstory = {
physicianname: '',
physiciancity: '',
physicianstate: '',
physicianphone: '',
chiropractorName: '',
chiropractorState: '',
xray: false,
ctScan: false,
cdImages: false,
visitDetails: '',
cellPhoneProvider: '',
}
const painAnalysis = {
chiefComplaint:'',
painQuality:[],
painDuration:'',
currentTreatment:'',
treatmentResults:'',
treatmentGoal:'',
}
const pastTreatement = {
generalHealth: '',
presentProblemBefore: '',
ifYespresentProblemBefore:'',
ifYestreatmentProvided:'',
ifYesOutcome:'',
strokeBloodclotting: '',
ifYesstrokeBloodclotting: '',
dizzinessFetigue: '',
ifyesdizzinessFetigue:'',
antiColligent: '',
injuriesHospitalization: '',
supplementsOrDrugs:''
}
const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
}));
const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props}
/>
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .05)'
: 'rgba(0, 0, 0, .03)',
flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)',
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1),
},
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)',
}));
export default function PatientDetails(){
const [expanded, setExpanded] = React.useState<string | false>('panel1');
const [isChecked, setIsChecked] = React.useState(false);
const [signature,setSignature]=React.useState('');
const [patient, setPatient] = React.useState<Patient>({
fullName: "",
homePhone: "",
cellPhone: "",
email: "",
age: 0,
dateOfBirth: "",
socialSecurityNumber: "",
mailingAddress: "",
city: "",
state: "",
zipCode: "",
gender: "",
maritalStatus: "",
});
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
};
const handleExpandChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false);
};
const handleCheckboxChange = (event:any) => {
setIsChecked(event.target.checked);
};
return(
<>
<Paper elevation={0} className='app-screen-constants'>
<Header/>
<Paper elevation={0} sx={{margin:4, minHeight:550}} >
<form onSubmit={handleSubmit}>
<Typography sx={{fontSize:20}} gutterBottom>
Confidential Patient Information
</Typography>
<Grid>
<Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
</AccordionSummary>
<AccordionDetails>
<PersonalSection personalData={personalData} />
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
<Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
</AccordionSummary>
<AccordionDetails>
<FamilyFormSection familyDetails={familyData}/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
<Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
</AccordionSummary>
<AccordionDetails>
<MedicalHistory medicalHistory={medicalHstory}/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel9'} onChange={handleExpandChange('panel9')}>
<AccordionSummary aria-controls="panel9d-content" id="panel9d-header">
<Typography sx={{fontSize:18}}>Patient's Injury Image</Typography>
</AccordionSummary>
<AccordionDetails>
<ViewPatientImageMarker />
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
<AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
<Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
</AccordionSummary>
<AccordionDetails>
<PainAnalysisSection4 painAnalysis={painAnalysis} />
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
<AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
<Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
</AccordionSummary>
<AccordionDetails>
<PastTreatment5 pastTreatement={pastTreatement} />
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
<AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
<Typography sx={{fontSize:18}}>System Review Questions</Typography>
</AccordionSummary>
<AccordionDetails>
<SystemReviewSection6/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
<AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
<Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
</AccordionSummary>
<AccordionDetails>
<RecreationalHobbiesSection7/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
<AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
<Typography sx={{fontSize:18}}>Other Details</Typography>
</AccordionSummary>
<AccordionDetails>
<OtherDetails8/>
</AccordionDetails>
</Accordion>
<Grid container>
<Grid item xs={12} className='collapsable-form-style-multiline'>
<FormGroup sx={{ marginTop: 3 }}>
<FormControlLabel
required
control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
/>
</FormGroup>
</Grid>
<Grid item xs={6} className='collapsable-form-style'>
<TextField
variant="outlined"
label="SIGNATURE"
name='treatmentGoal'
placeholder='Please type your name'
onChange={(event) => {
setSignature(event.target.value)
}}
/>
</Grid>
</Grid>
<Grid>
<Button
type="submit"
variant="contained"
color="primary"
sx={{ margin: 5, left: '40%', width: '200px' }}
disabled={isChecked==false || signature==''}
>
Submit
</Button>
</Grid>
</Grid>
</form>
</Paper>
<Footer/>
</Paper>
</>
)
}

View File

@ -0,0 +1,170 @@
import * as React from 'react';
import { Button, FormControl, FormControlLabel, 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 { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import PatientDetails from './PatientDetails';
interface Patient {
fullName: string;
homePhone: string;
cellPhone: string;
email: string;
age: number | string;
dateOfBirth: string;
socialSecurityNumber: string;
mailingAddress: string;
city: string;
state: string;
zipCode: string;
gender: string;
maritalStatus: string;
}
interface Props {
personalData: Patient;
}
export default function PersonalSection({personalData} : Props){
return(
<>
<Grid container direction="row" className='section1-test-class'>
<Grid item xs={4} className='collapsable-form-style '>
<TextField
variant="outlined"
label="Patient's Full Name"
name="fullName"
placeholder='Please enter your name'
value={personalData.fullName}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
required
variant="outlined"
label="Phone Number"
name="cellPhone"
placeholder='Please enter your cell Phone number'
value={personalData.cellPhone}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Home Phone Number"
name="homePhone"
placeholder='Please enter your home phone'
value={personalData.homePhone}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Email"
name="email"
placeholder='Please enter your email'
value={personalData.email}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
required
variant="outlined"
label="Age"
name="age"
type="number"
placeholder='Please enter your age'
value={personalData.age}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<FormControl >
<TextField
variant="outlined"
label="Date of birth"
name="dob"
value={personalData.dateOfBirth}
disabled
/>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Social Security Number"
name="socialSecurityNumber"
value={personalData.socialSecurityNumber}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
required
variant="outlined"
label="Mailing Address"
name="mailingAddress"
value={personalData.mailingAddress}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="State"
name="state"
value={personalData.state}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
required
variant="outlined"
label="City"
name="city"
value={personalData.city}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style'>
<TextField
variant="outlined"
label="Zip Code"
name="zipCode"
value={personalData.zipCode}
disabled
/>
</Grid>
<Grid item xs={4} className='collapsable-form-style-radioButtons'>
<FormControl >
<FormLabel>Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="male"
name="radio-buttons-group"
sx={{ display: 'flex', flexDirection: 'row' }}
>
<FormControlLabel value="male" control={<Radio />} label="Male" checked={personalData.gender === 'male'} />
<FormControlLabel value="female" control={<Radio />} label="Female" checked={personalData.gender === 'female'} />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</>
)
}

View File

@ -0,0 +1,243 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React from "react";
interface FormValues {
hobbies: string;
educationLevel: string;
excercise: string;
excerciseExplanation: string;
tobacco: string;
tobaccoExplanation: string;
alcohol: string;
alcoholExplanation: string;
healthyDiet: string;
healthyDietExplanation: string;
sleep: string;
sleepExplanation: string;
workSchool: string;
workSchoolExplanation: string;
familyLife: string;
familyLifeExplanation: string;
drugs: string;
drugsExplanation:string;
}
export default function RecreationalHobbiesSection7(){
return(
<>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-multiline'>
<FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
<TextField
multiline
variant="outlined"
label=""
name='explanation'
value=''
disabled
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Your education level:</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="High School" control={<Radio />} label="High School" />
<FormControlLabel value="Some college" control={<Radio />} label="Some college" />
<FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
<FormControlLabel value="Post college" control={<Radio />} label="Post college" />
<FormControlLabel value="Other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Do you excercise?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="Times per week?"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Use tobacco?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="Packs/Cans per day(If you have quit, when did you quit?)"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Consume alcohol?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="How many drinks per week?"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Have a healthy diet?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="If no, explain"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Get adequate sleep?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="If no, explain"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Is Work/School stressful to you?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
variant="outlined"
label="If yes, explain"
name='treatmentGoal'
value=''
disabled
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Family life stressful to you?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="If yes, explain"
name='treatmentGoal'
value=''
/>
</Grid>
<Grid item xs={6} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Use recreational drugs?</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-form7'>
<TextField
disabled
variant="outlined"
label="If yes, explain"
name='treatmentGoal'
value=''
/>
</Grid>
</Grid>
</>
)
}

View File

@ -0,0 +1,237 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React from "react";
interface FormValues {
eyes: string;
IntestinesBowls: string;
jointsBones:string;
allergies: string;
earsNoseMouth: string;
urinary: string;
skin: string;
psychological: string;
heart: string;
muscles: string;
internalOrgans: string;
gynecological: string;
lungsBreathing: string;
nerves: string;
blood: string;
prostate: string;
explanation:string;
}
export default function SystemReviewSection6(){
return(
<>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
</Grid>
<Grid container direction="row">
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Eyes</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Intestines/Bowls</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Joints/Bones</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Allergies</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Urinary</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Skin</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Psychological/Emotional</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Heart</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Muscles</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Internal Organs</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Gynecological menstrual/Brest</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Lungs/Breathing</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Nerves</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Blood</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
<FormControl>
<FormLabel>Prostate/Testicular/Penile</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel value="No" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} className='collapsable-form-style-multiline'>
<FormLabel>Please explain your check marks:</FormLabel><br></br>
<TextField
multiline
variant="outlined"
label=""
name='explanation'
/>
</Grid>
</Grid>
</>
)
}