mobile responsive changes

This commit is contained in:
vipeeshpavithran 2023-09-08 13:48:44 +05:30
parent 66f0b3941e
commit d1e1952298
9 changed files with 2873 additions and 1844 deletions

View File

@ -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;
@ -58,3 +54,32 @@
.addNew-form-table-style label {
padding: 0px;
}
.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;
} */

View File

@ -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<any>({
id:0,date:'',illness:'',treatment:'',results:''
})
id: 0,
date: '',
illness: '',
treatment: '',
results: '',
});
const [illnessData, setIllnessData] = React.useState<any[]>([
{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 (
<>
<FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
{type!=="display"?
<FormLabel>If yes, Please enter the details below:</FormLabel>
<br></br>
{type !== 'display' ? (
<FormControl>
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
<Grid item xs={2} className='addNew-form-table-style'>
<Grid container spacing={1.5}>
<Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant="outlined"
label="Date"
variant='outlined'
label='Date'
value={illnessFromData.date}
onChange={(event) => {
setIllnessFromData((prevValues:any) => ({
setIllnessFromData((prevValues: any) => ({
...prevValues,
date: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={3.7} className='addNew-form-table-style'>
<Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant="outlined"
label="Injury/Illness/Surgeries"
variant='outlined'
label='Injury/Illness/Surgeries'
value={illnessFromData.illness}
onChange={(event) => {
setIllnessFromData((prevValues:any) => ({
setIllnessFromData((prevValues: any) => ({
...prevValues,
illness: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={3.5} className='addNew-form-table-style'>
<Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant="outlined"
label="Treatment"
variant='outlined'
label='Treatment'
value={illnessFromData.treatment}
onChange={(event) => {
setIllnessFromData((prevValues:any) => ({
setIllnessFromData((prevValues: any) => ({
...prevValues,
treatment: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={2} className='addNew-form-table-style'>
<Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<TextField
required
variant="outlined"
label="Results"
variant='outlined'
label='Results'
value={illnessFromData.results}
onChange={(event) => {
setIllnessFromData((prevValues:any) => ({
setIllnessFromData((prevValues: any) => ({
...prevValues,
results: event.target.value,
}));
}}
/>
</Grid>
<Grid item xs={0.8} className='addNew-form-table-style'>
<Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
<Grid
item
xs={12}
xl={3}
lg={3}
md={6}
sm={12}
className='addNew-form-table-style'
>
<Button
sx={{ height: '40px', bgcolor: 'skyblue' }}
onClick={handleAddRow}
>
Add
</Button>
</Grid>
</Grid>
</FormControl>
:""}
) : (
''
)}
<TableContainer sx={{width:800}} className='illness-table-style'>
<Table aria-label="simple table">
<TableContainer className='illness-table-style'>
<Table aria-label='simple table'>
<TableHead>
<TableRow>
<TableCell align='left'>Date</TableCell>
<TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
<TableCell align='center'>
Injury/Fracture/Illness/Surgeries
</TableCell>
<TableCell align='left'>Treatment</TableCell>
<TableCell align='left'>Results</TableCell>
<TableCell align='left'></TableCell>
@ -155,25 +229,23 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
<TableBody>
{illnessData.map((row, index) => (
<TableRow key={index}>
<TableCell align='left'>{row.date}</TableCell>
<TableCell align='center'>{row.illness}</TableCell>
<TableCell align='left'>{row.treatment}</TableCell>
<TableCell align='left'>{row.results}</TableCell>
<TableCell align='left'>
{row.date}
</TableCell>
<TableCell align='center'>
{row.illness}
</TableCell>
<TableCell align='left'>
{row.treatment}
</TableCell>
<TableCell align='left'>
{row.results}
</TableCell>
<TableCell align='left'>
{type!=="display"?
<Button sx={{height:'30x',width:20, bgcolor:'skyblue'}}
onClick={(e)=>{deleteIllnessData(row.id)}}>
{type !== 'display' ? (
<Button
sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
onClick={(e) => {
deleteIllnessData(row.id);
}}
>
Delete
</Button>
:""}
) : (
''
)}
</TableCell>
</TableRow>
))}
@ -182,6 +254,6 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
</TableContainer>
</>
);
};
}
export default DataTable;

View File

@ -69,6 +69,10 @@
gap: 0;
margin-bottom: 2%;
}
.image-marker-div .marker-div {
/* margin-right: 5%; */
margin-top: 3%;
}
}
@media only screen and (min-width: 1400px) {

View File

@ -1,26 +1,38 @@
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import { useFormik } from "formik";
import * as yup from "yup";
import {
Button,
Checkbox,
FormControl,
FormControlLabel,
FormGroup,
FormLabel,
Grid,
Paper,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import React, { useEffect } from 'react';
interface Patient {
maritalStatus: string | undefined,
numberOfChildren: string | undefined,
occupation: string | undefined,
hoursPerWeek: number | string | undefined,
employer: string | undefined,
businessPhone: string | undefined,
spouseName: string | undefined,
spouseEmployer: string | undefined,
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
maritalStatus: string | undefined;
numberOfChildren: string | undefined;
occupation: string | undefined;
hoursPerWeek: number | string | undefined;
employer: string | undefined;
businessPhone: string | undefined;
spouseName: string | undefined;
spouseEmployer: string | undefined;
spouseBusinessPhone: string | undefined;
emergencyContact: string | undefined;
relationship: string | undefined;
spousePhone: string | undefined;
}
type Props = {
handleFormSection2Data:(
handleFormSection2Data: (
maritalStatus: string | undefined,
numberOfChildren: string | undefined,
occupation: string | undefined,
@ -32,30 +44,33 @@ type Props = {
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
)=> void
patientDataDiplay:any;
type:string;
}
spousePhone: string | undefined
) => void;
patientDataDiplay: any;
type: string;
};
export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
export default function FamilyFormSection({
handleFormSection2Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({
maritalStatus:'',
numberOfChildren:'',
occupation:'',
hoursPerWeek:'',
employer:'',
businessPhone:'',
spouseName:'',
spouseEmployer:'',
spouseBusinessPhone:'',
emergencyContact:'',
relationship:'',
spousePhone:''
maritalStatus: '',
numberOfChildren: '',
occupation: '',
hoursPerWeek: '',
employer: '',
businessPhone: '',
spouseName: '',
spouseEmployer: '',
spouseBusinessPhone: '',
emergencyContact: '',
relationship: '',
spousePhone: '',
});
useEffect(()=>{
useEffect(() => {
handleFormSection2Data(
patient.maritalStatus,
patient.numberOfChildren,
@ -68,110 +83,153 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
patient.spouseBusinessPhone,
patient.emergencyContact,
patient.relationship,
patient.spousePhone,
)
},[patient])
patient.spousePhone
);
}, [patient]);
return(
return (
<>
<Grid container direction="row">
<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"
name="maritalStatus"
defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus}
sx={{display:'flex', flexDirection:'row'}}
onChange={(e)=>{
setPatient((prevValues:any) => ({
aria-labelledby='demo-radio-buttons-group-label'
name='maritalStatus'
defaultValue={
type == 'display'
? patientDataDiplay.maritalStatus
: patient.maritalStatus
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
maritalStatus: e.target.value,
}));
}}
>
<FormControlLabel value="married" control={<Radio />} label="Married" disabled={type=='display'}/>
<FormControlLabel value="single" control={<Radio />} label="Single" disabled={type=='display'}/>
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" disabled={type=='display'}/>
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" disabled={type=='display'}/>
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" disabled={type=='display'}/>
<FormControlLabel
value='married'
control={<Radio />}
label='Married'
disabled={type == 'display'}
/>
<FormControlLabel
value='single'
control={<Radio />}
label='Single'
disabled={type == 'display'}
/>
<FormControlLabel
value='widowed'
control={<Radio />}
label='Widowed'
disabled={type == 'display'}
/>
<FormControlLabel
value='seperated'
control={<Radio />}
label='Seperated'
disabled={type == 'display'}
/>
<FormControlLabel
value='divorced'
control={<Radio />}
label='Divorced'
disabled={type == 'display'}
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
type="number"
label="Number of Children/Ages"
variant='outlined'
type='number'
label='Number of Children/Ages'
className='collapsable-form-style'
name='numberOfChildren'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
numberOfChildren: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.numberOfChildren
: patient.numberOfChildren
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
// required
variant="outlined"
label="Occupation"
variant='outlined'
label='Occupation'
className='collapsable-form-style'
name='occupation'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
occupation: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.occupation:patient.occupation}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.occupation
: patient.occupation
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Hours/Week"
type="number"
variant='outlined'
label='Hours/Week'
type='number'
className='collapsable-form-style'
name='hoursPerWeek'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
hoursPerWeek: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.hoursPerWeek
: patient.hoursPerWeek
}
disabled={type == 'display'}
/>
</Grid>
<Grid
xs={12}
@ -179,197 +237,245 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Employer"
variant='outlined'
label='Employer'
className='collapsable-form-style'
name='employer'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
employer: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.employer:patient.employer}
disabled={type=='display'}
value={
type == 'display' ? patientDataDiplay.employer : patient.employer
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Business Phone"
type="number"
variant='outlined'
label='Business Phone'
type='number'
className='collapsable-form-style'
name='businessPhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
businessPhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.businessPhone
: patient.businessPhone
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '></Grid>
className='collapsable-form-style '
></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
<FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style '>
sm={12}
className='collapsable-form-style '
>
<TextField
variant="outlined"
variant='outlined'
label="Spouse's Name"
className='collapsable-form-style'
name='spouseName'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseName: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.spouseName
: patient.spouseName
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
variant='outlined'
label="Spouse's Employer"
className='collapsable-form-style'
name='spouseEmployer'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseEmployer: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.spouseEmployer
: patient.spouseEmployer
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Business Phone"
type="number"
variant='outlined'
label='Business Phone'
type='number'
className='collapsable-form-style'
name='spouseBusinessPhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spouseBusinessPhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.spouseBusinessPhone
: patient.spouseBusinessPhone
}
disabled={type == 'display'}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
<FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Emergency Contact"
variant='outlined'
label='Emergency Contact'
className='collapsable-form-style'
name='emergencyContact'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
emergencyContact: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.emergencyContact
: patient.emergencyContact
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style '>
className='collapsable-form-style '
>
<TextField
variant="outlined"
label="Relationship"
variant='outlined'
label='Relationship'
className='collapsable-form-style'
name='relationship'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
relationship: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.relationship:patient.relationship}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.relationship
: patient.relationship
}
disabled={type == 'display'}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style '>
sm={12}
className='collapsable-form-style '
>
<TextField
variant="outlined"
type="number"
label="Phone"
variant='outlined'
type='number'
label='Phone'
className='collapsable-form-style'
name='spousePhone'
onChange={(e)=>{
setPatient((prevValues:any) => ({
onChange={(e) => {
setPatient((prevValues: any) => ({
...prevValues,
spousePhone: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.spousePhone
: patient.spousePhone
}
disabled={type == 'display'}
/>
</Grid>
</Grid>
</>
)
};
);
}

View File

@ -1,81 +1,102 @@
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;
pillow: string;
orthotics: string;
brestExam: any;
pregnancy:string;
pregnancy: string;
menstralCycle: any;
}
}
type Props = {
handleFormSection8Data:(
familyHistory: string|undefined,
sleep: string|undefined,
pillow:string|undefined,
orthotics:string|undefined,
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){
pregnancy: string | undefined,
menstralCycle: any
) => void;
patientDataDiplay: any;
type: string;
};
export default function OtherDetails8({
handleFormSection8Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({
familyHistory: '',
sleep: '',
pillow:'',
orthotics:'',
pillow: '',
orthotics: '',
brestExam: dayjs('2022-04-17'),
pregnancy:'',
pregnancy: '',
menstralCycle: dayjs('2022-04-17'),
});
useEffect(()=>{
useEffect(() => {
handleFormSection8Data(
patient.familyHistory,
patient.sleep,
patient.pillow,
patient.orthotics,
patient.brestExam=dayjs(patient.brestExam),
(patient.brestExam = dayjs(patient.brestExam)),
patient.pregnancy,
patient.menstralCycle=dayjs(patient.menstralCycle)
)
},[patient])
(patient.menstralCycle = dayjs(patient.menstralCycle))
);
}, [patient]);
const formatDate = (inputDate:any) => {
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');
const day = String(date.getUTCDate() + 1).padStart(2, '0');
return `${year}-${month}-${day}`;
};
return(
return (
<>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-multiline'>
<FormLabel>Family history and health status:</FormLabel><br></br>
<Grid container direction='row'>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>Family history and health status:</FormLabel>
<br></br>
<TextField
multiline
variant="outlined"
label=""
value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory}
disabled={type=='display'}
onChange={(event:any) => {
variant='outlined'
label=''
value={
type == 'display'
? patientDataDiplay.familyHistory
: patient.familyHistory
}
disabled={type == 'display'}
onChange={(event: any) => {
setPatient((prevValues) => ({
...prevValues,
familyHistory: event.target.value,
@ -88,8 +109,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl>
<FormLabel>How do you sleep?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display' ? patientDataDiplay.sleep : patient.sleep
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -97,9 +120,24 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Back" control={<Radio />} label="Back" />
<FormControlLabel disabled={type=='display'} value="Side" control={<Radio />} label="Side" />
<FormControlLabel disabled={type=='display'} value="Stomach" control={<Radio />} label="Stomach" />
<FormControlLabel
disabled={type == 'display'}
value='Back'
control={<Radio />}
label='Back'
/>
<FormControlLabel
disabled={type == 'display'}
value='Side'
control={<Radio />}
label='Side'
/>
<FormControlLabel
disabled={type == 'display'}
value='Stomach'
control={<Radio />}
label='Stomach'
/>
</RadioGroup>
</FormControl>
</Grid>
@ -108,8 +146,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl>
<FormLabel>Do you use a pillow?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow}
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display' ? patientDataDiplay.pillow : patient.pillow
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -117,8 +157,18 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
@ -127,8 +177,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl>
<FormLabel>Do you wear orthotics or arch support?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics}
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.orthotics
: patient.orthotics
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -136,27 +190,52 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
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>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormLabel>Date of last gynecological and brest exam?</FormLabel>
<br></br>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={type=='display'?patientDataDiplay.brestExam:patient.brestExam}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.brestExam
: patient.brestExam
}
disabled={type == 'display'}
onChange={(event) => {
const formattedDate = formatDate(event)
const formattedDate = formatDate(event);
setPatient((prevValues) => ({
...prevValues,
brestExam: formattedDate,
}));
}}
renderInput={(params) => <TextField variant="outlined" {...params} />}
renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/>
</LocalizationProvider>
</FormControl>
@ -170,8 +249,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
<FormControl>
<FormLabel>Possible pregnancy?</FormLabel>
<RadioGroup
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy}
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.pregnancy
: patient.pregnancy
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -179,34 +262,57 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
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>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormLabel>Date of last menstrual cycle?</FormLabel>
<br></br>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.menstralCycle
: patient.menstralCycle
}
disabled={type == 'display'}
onChange={(event) => {
const formattedDate = formatDate(event)
const formattedDate = formatDate(event);
setPatient((prevValues) => ({
...prevValues,
menstralCycle: formattedDate,
}));
}}
renderInput={(params) => <TextField variant="outlined" {...params} />}
renderInput={(params) => (
<TextField variant='outlined' {...params} />
)}
/>
</LocalizationProvider>
</FormControl>
</Grid>
</Grid>
</>
)
);
}

View File

@ -1,12 +1,22 @@
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;
chiefComplaint: string;
painWorse: string[];
painBetter: string[];
painQuality: string[];
@ -15,42 +25,45 @@ interface Patient {
painDuration: string;
currentTreatment: string;
treatmentGoal: string;
selfTreatment:string;
}
selfTreatment: string;
}
type Props = {
handleFormSection4Data:(
chiefComplaint:string|undefined,
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;
}
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){
export default function PainAnalysisSection4({
handleFormSection4Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({
chiefComplaint:'',
painWorse:[],
painBetter:[],
painQuality:[],
painWorstTime:[],
currentComplaintIssues:[],
painDuration:'',
currentTreatment:'',
treatmentGoal:'',
selfTreatment:'',
chiefComplaint: '',
painWorse: [],
painBetter: [],
painQuality: [],
painWorstTime: [],
currentComplaintIssues: [],
painDuration: '',
currentTreatment: '',
treatmentGoal: '',
selfTreatment: '',
});
useEffect(()=>{
useEffect(() => {
handleFormSection4Data(
patient.chiefComplaint,
patient.painWorse,
@ -61,11 +74,13 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
patient.painDuration,
patient.currentTreatment,
patient.treatmentGoal,
patient.selfTreatment,
)
},[patient])
patient.selfTreatment
);
}, [patient]);
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePainWorseChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
@ -75,7 +90,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
}));
};
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePainBetterChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
@ -85,7 +102,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
}));
};
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePainQualityChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
@ -95,7 +114,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
}));
};
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePainWorstTimeChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
@ -105,7 +126,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
}));
};
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handleCurrentComplaintIssuesTimeChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
@ -115,254 +138,441 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
}));
};
return(
return (
<>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
<FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
</Grid>
<Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style-form7'>
<Grid container direction='row'>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="How did your Chief complaint start?(ex-fell on ice)"
variant='outlined'
label='How did your Chief complaint start?(ex-fell on ice)'
name='chiefComplaint'
onChange={(e)=>{
onChange={(e) => {
setPatient((prevValues) => ({
...prevValues,
chiefComplaint: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.chiefComplaint
: patient.chiefComplaint
}
disabled={type == 'display'}
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>What makes your pain worse?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
label="Bending"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainWorseChange} name='Bending' />
}
label='Bending'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
label="Standing"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainWorseChange} name='Standing' />
}
label='Standing'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
label="Sitting"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainWorseChange} name='Sitting' />
}
label='Sitting'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
label="Walking"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainWorseChange} name='Walking' />
}
label='Walking'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
label="Others"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainWorseChange} name='Others' />
}
label='Others'
disabled={type == 'display'}
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>What makes your pain better?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
label="laying down"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainBetterChange}
name='laying down'
/>
}
label='laying down'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
label="Standing"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainBetterChange} name='Standing' />
}
label='Standing'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
label="Sitting"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainBetterChange} name='Sitting' />
}
label='Sitting'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
label="Walking"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainBetterChange} name='Walking' />
}
label='Walking'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
label="Others"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainBetterChange} name='Others' />
}
label='Others'
disabled={type == 'display'}
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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'}}>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
label="Sharp"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainQualityChange} name='sharp' />
}
label='Sharp'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
label="Dull/Ache"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainQualityChange}
name='Dull/Ache'
/>
}
label='Dull/Ache'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
label="Throbbing"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainQualityChange}
name='Throbbing'
/>
}
label='Throbbing'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
label="Tingling/Numbness/Burning"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainQualityChange}
name='Tingling/Numbness/Burning'
/>
}
label='Tingling/Numbness/Burning'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
label="Others"
disabled={type=='display'}
control={
<Checkbox onChange={handlePainQualityChange} name='Others' />
}
label='Others'
disabled={type == 'display'}
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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'}}>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
label="Morning"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainWorstTimeChange}
name='Morning'
/>
}
label='Morning'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
label="During day"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainWorstTimeChange}
name='During day'
/>
}
label='During day'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
label="Evening"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainWorstTimeChange}
name='Evening'
/>
}
label='Evening'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
label="Lying in bed"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainWorstTimeChange}
name='Lying in bed'
/>
}
label='Lying in bed'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
label="Others"
disabled={type=='display'}
control={
<Checkbox
onChange={handlePainWorstTimeChange}
name='Others'
/>
}
label='Others'
disabled={type == 'display'}
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
<FormLabel>
How much of the day do you experience your chief complaint?
</FormLabel>
<RadioGroup
name="painDuration"
onChange={(e)=>{
name='painDuration'
onChange={(e) => {
setPatient((prevValues) => ({
...prevValues,
painDuration: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.painDuration:patient.painDuration}
sx={{display:'flex', flexDirection:'row'}}
value={
type == 'display'
? patientDataDiplay.painDuration
: patient.painDuration
}
sx={{ display: 'flex', flexDirection: 'row' }}
>
<FormControlLabel disabled={type=='display'} value="0-25%" control={<Radio />} label="0-25%" />
<FormControlLabel disabled={type=='display'} value="25-50%" control={<Radio />} label="25-50%" />
<FormControlLabel disabled={type=='display'} value="50-75%" control={<Radio />} label="50-75%" />
<FormControlLabel disabled={type=='display'} value="75-100%" control={<Radio />} label="75-100%" />
<FormControlLabel
disabled={type == 'display'}
value='0-25%'
control={<Radio />}
label='0-25%'
/>
<FormControlLabel
disabled={type == 'display'}
value='25-50%'
control={<Radio />}
label='25-50%'
/>
<FormControlLabel
disabled={type == 'display'}
value='50-75%'
control={<Radio />}
label='50-75%'
/>
<FormControlLabel
disabled={type == 'display'}
value='75-100%'
control={<Radio />}
label='75-100%'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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'}}>
<FormLabel>
Has your current complaint caused any of the following?
</FormLabel>
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
<FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
label="Muscle weakness"
disabled={type=='display'}
control={
<Checkbox
onChange={handleCurrentComplaintIssuesTimeChange}
name='Muscle weakness'
/>
}
label='Muscle weakness'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
label="Bowel/Bladder problem"
disabled={type=='display'}
control={
<Checkbox
onChange={handleCurrentComplaintIssuesTimeChange}
name='Bowel/Bladder problem'
/>
}
label='Bowel/Bladder problem'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
label="Digestion"
disabled={type=='display'}
control={
<Checkbox
onChange={handleCurrentComplaintIssuesTimeChange}
name='Digestion'
/>
}
label='Digestion'
disabled={type == 'display'}
/>
<FormControlLabel
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
label="Cardiac/Respiratory"
disabled={type=='display'}
control={
<Checkbox
onChange={handleCurrentComplaintIssuesTimeChange}
name='Cardiac/Respiratory'
/>
}
label='Cardiac/Respiratory'
disabled={type == 'display'}
/>
</FormGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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>
<FormLabel>
Have you tried any self treatment (ex-ice, heat, excercise) or
taken any medication(over the counter or prescription)?
</FormLabel>
<RadioGroup
name="painDuration"
onChange={(e)=>{
name='painDuration'
onChange={(e) => {
setPatient((prevValues) => ({
...prevValues,
selfTreatment: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.selfTreatment:patient.selfTreatment}
sx={{display:'flex', flexDirection:'row'}}
value={
type == 'display'
? patientDataDiplay.selfTreatment
: patient.selfTreatment
}
sx={{ display: 'flex', flexDirection: 'row' }}
>
<FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
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
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'>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="What is your goal from treatment?(ex-play golf without pain)"
variant='outlined'
label='What is your goal from treatment?(ex-play golf without pain)'
name='treatmentGoal'
onChange={(e)=>{
onChange={(e) => {
setPatient((prevValues) => ({
...prevValues,
treatmentGoal: e.target.value,
}));
}}
value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal}
disabled={type=='display'}
value={
type == 'display'
? patientDataDiplay.treatmentGoal
: patient.treatmentGoal
}
disabled={type == 'display'}
/>
</Grid>
</Grid>
</>
)}
);
}

View File

@ -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,43 +28,45 @@ 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;
}
export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,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;
};
export default function PastTreatment5({
handleFormSection5Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatient] = React.useState<Patient>({
generalHealth: '',
presentProblemBefore: '',
ifYespresentProblemBefore:'',
ifYestreatmentProvided:'',
ifYesOutcome:'',
ifYespresentProblemBefore: '',
ifYestreatmentProvided: '',
ifYesOutcome: '',
strokeBloodclotting: '',
ifYesstrokeBloodclotting: '',
dizzinessFetigue: '',
ifyesdizzinessFetigue:'',
ifyesdizzinessFetigue: '',
antiColligent: '',
injuriesHospitalization: '',
supplementsOrDrugs:''
supplementsOrDrugs: '',
});
useEffect(()=>{
useEffect(() => {
handleFormSection5Data(
patient.generalHealth,
patient.presentProblemBefore,
@ -68,22 +79,29 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
patient.ifyesdizzinessFetigue,
patient.antiColligent,
patient.injuriesHospitalization,
patient.supplementsOrDrugs,
)
},[patient])
patient.supplementsOrDrugs
);
}, [patient]);
return(
return (
<>
<form>
<Grid container direction="row">
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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"
defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.generalHealth
: patient.generalHealth
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -91,22 +109,57 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" />
<FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" />
<FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" />
<FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" />
<FormControlLabel disabled={type=='display'} value="Poor" control={<Radio />} label="Poor" />
<FormControlLabel
disabled={type == 'display'}
value='Excellent'
control={<Radio />}
label='Excellent'
/>
<FormControlLabel
disabled={type == 'display'}
value='Very Good'
control={<Radio />}
label='Very Good'
/>
<FormControlLabel
disabled={type == 'display'}
value='Good'
control={<Radio />}
label='Good'
/>
<FormControlLabel
disabled={type == 'display'}
value='Fair'
control={<Radio />}
label='Fair'
/>
<FormControlLabel
disabled={type == 'display'}
value='Poor'
control={<Radio />}
label='Poor'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>Have you experienced your present problem before?</FormLabel>
<FormLabel>
Have you experienced your present problem before?
</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.presentProblemBefore
: patient.presentProblemBefore
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -114,24 +167,38 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="If yes, when?"
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -140,18 +207,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="Was treatment provided?If yes, by whom?"
variant='outlined'
label='Was treatment provided?If yes, by whom?'
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYestreatmentProvided
: patient.ifYestreatmentProvided
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -160,18 +236,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}}
/>
</Grid>
<Grid item
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-form7'>
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="Outcome?"
variant='outlined'
label='Outcome?'
name='treatmentGoal'
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
disabled={
patient.presentProblemBefore !== 'Yes' || type == 'display'
}
value={
type == 'display'
? patientDataDiplay.ifYesOutcome
: patient.ifYesOutcome
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -181,15 +266,28 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
<FormLabel>
Have you ever had a stroke or issues with blood clotting?
</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
value={
type == 'display'
? patientDataDiplay.strokeBloodclotting
: patient.strokeBloodclotting
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -197,19 +295,43 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="If yes, when?"
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
value={
type == 'display'
? patientDataDiplay.ifYesstrokeBloodclotting
: patient.ifYesstrokeBloodclotting
}
disabled={
patient.strokeBloodclotting !== 'Yes' || type == 'display'
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -219,13 +341,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<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>
<FormLabel>
Have you recently experienced dizziness, unexplained fatigue,
weight loss or blood loss?
</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
name='painDuration'
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.dizzinessFetigue
: patient.dizzinessFetigue
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -233,19 +366,41 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={4} className='collapsable-form-style-form7'>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-form7'
>
<TextField
variant="outlined"
label="If yes, when?"
variant='outlined'
label='If yes, when?'
name='treatmentGoal'
disabled={patient.dizzinessFetigue!=='Yes'}
value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
disabled={patient.dizzinessFetigue !== 'Yes'}
value={
type == 'display'
? patientDataDiplay.ifyesdizzinessFetigue
: patient.ifyesdizzinessFetigue
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -255,13 +410,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
/>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
<FormLabel>
Are you currently taking anti-coagulant or blood thinning
medication?
</FormLabel>
<RadioGroup
name="painDuration"
sx={{display:'flex', flexDirection:'row'}}
defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
name='painDuration'
sx={{ display: 'flex', flexDirection: 'row' }}
defaultValue={
type == 'display'
? patientDataDiplay.antiColligent
: patient.antiColligent
}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -269,19 +435,40 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
<Grid
item
xs={12}
className='collapsable-form-style-radioButtons-fullwidth'
>
<FormControl>
<FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
<FormLabel>
Have you ever had any major illness, injuries, hospitalization
or surgeries?
</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.injuriesHospitalization
: patient.injuriesHospitalization
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -289,32 +476,53 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
<Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
<Table
handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientDataDiplay}
type={type}/>
type={type}
/>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-multiline'>
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>
Please list current supplements or drugs you may be taking:
</FormLabel>
<TextField
multiline
variant="outlined"
label=""
variant='outlined'
label=''
name='treatmentGoal'
defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
disabled={type=='display'}
defaultValue={
type == 'display'
? patientDataDiplay.supplementsOrDrugs
: patient.supplementsOrDrugs
}
disabled={type == 'display'}
onChange={(event) => {
setPatient((prevValues) => ({
...prevValues,
@ -323,9 +531,8 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
}}
/>
</Grid>
</Grid>
</form>
</>
)
);
}

View File

@ -189,7 +189,6 @@ export default function PersonalSection({
: ''
}
/>
</Grid>
<Grid

View File

@ -1,10 +1,18 @@
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React, { useEffect } from "react";
import {
FormControl,
FormControlLabel,
FormLabel,
Grid,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import React, { useEffect } from 'react';
interface Patient {
eyes: string;
IntestinesBowls: string;
jointsBones:string;
jointsBones: string;
allergies: string;
earsNoseMouth: string;
urinary: string;
@ -18,38 +26,42 @@ interface Patient {
nerves: string;
blood: string;
prostate: string;
explanation:string;
}
explanation: 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;
}
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){
export default function SystemReviewSection6({
handleFormSection6Data,
patientDataDiplay,
type,
}: Props) {
const [patient, setPatients] = React.useState<Patient>({
eyes: '',
IntestinesBowls: '',
jointsBones:'',
jointsBones: '',
allergies: '',
earsNoseMouth: '',
urinary: '',
@ -63,10 +75,10 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
nerves: '',
blood: '',
prostate: '',
explanation:'',
explanation: '',
});
useEffect(()=>{
useEffect(() => {
handleFormSection6Data(
patient.eyes,
patient.IntestinesBowls,
@ -84,26 +96,34 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
patient.nerves,
patient.blood,
patient.prostate,
patient.explanation,
)
},[patient])
return(
patient.explanation
);
}, [patient]);
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>
<FormLabel sx={{ fontWeight: 600 }}>
Please choose body areas or systems where you may have problems:
</FormLabel>
</Grid>
<Grid container direction="row">
<Grid item xs={12}
<Grid container direction='row'>
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Eyes</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.eyes:patient.eyes}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.eyes : patient.eyes
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -111,22 +131,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Intestines/Bowls</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.IntestinesBowls:patient.IntestinesBowls}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.IntestinesBowls
: patient.IntestinesBowls
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -134,22 +172,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Joints/Bones</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.jointsBones:patient.jointsBones}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.jointsBones
: patient.jointsBones
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -157,22 +213,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Allergies</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.allergies:patient.allergies}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.allergies
: patient.allergies
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -180,22 +254,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.earsNoseMouth:patient.earsNoseMouth}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.earsNoseMouth
: patient.earsNoseMouth
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -203,22 +295,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Urinary</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.urinary:patient.urinary}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.urinary : patient.urinary
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -226,22 +334,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Skin</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.skin:patient.skin}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.skin : patient.skin
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -249,22 +373,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Psychological/Emotional</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.psychological:patient.psychological}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.psychological
: patient.psychological
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -272,22 +414,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Heart</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.heart:patient.heart}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.heart : patient.heart
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -295,22 +453,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Muscles</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.muscles:patient.muscles}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.muscles : patient.muscles
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -318,22 +492,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Internal Organs</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.internalOrgans:patient.internalOrgans}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.internalOrgans
: patient.internalOrgans
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -341,22 +533,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Gynecological menstrual/Brest</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.gynecological:patient.gynecological}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.gynecological
: patient.gynecological
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -364,23 +574,41 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Lungs/Breathing</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.lungsBreathing:patient.lungsBreathing}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.lungsBreathing
: patient.lungsBreathing
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -388,22 +616,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Nerves</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.nerves:patient.nerves}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.nerves : patient.nerves
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -411,22 +655,38 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Blood</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.blood:patient.blood}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display' ? patientDataDiplay.blood : patient.blood
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -434,22 +694,40 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
value='No'
control={<Radio />}
label='No'
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12}
<Grid
item
xs={12}
xl={3}
lg={4}
md={6}
sm={12} className='collapsable-form-style-radioButtons'>
sm={12}
className='collapsable-form-style-radioButtons'
>
<FormControl>
<FormLabel>Prostate/Testicular/Penile</FormLabel>
<RadioGroup
name="painDuration"
defaultValue={type=='display'?patientDataDiplay.prostate:patient.prostate}
sx={{display:'flex', flexDirection:'row'}}
name='painDuration'
defaultValue={
type == 'display'
? patientDataDiplay.prostate
: patient.prostate
}
sx={{ display: 'flex', flexDirection: 'row' }}
onChange={(event) => {
setPatients((prevValues) => ({
...prevValues,
@ -457,21 +735,44 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}));
}}
>
<FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
<FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
<FormControlLabel
disabled={type == 'display'}
value='Yes'
control={<Radio />}
label='Yes'
/>
<FormControlLabel
disabled={type == 'display'}
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>
<Grid
item
xs={12}
xl={10}
lg={10}
md={10}
sm={12}
className='collapsable-form-style-multiline'
>
<FormLabel>Please explain your check marks:</FormLabel>
<br></br>
<TextField
multiline
variant="outlined"
label=""
variant='outlined'
label=''
name='explanation'
value={type=='display'?patientDataDiplay.explanation:patient.explanation}
disabled={type=='display'}
onChange={(event:any) => {
value={
type == 'display'
? patientDataDiplay.explanation
: patient.explanation
}
disabled={type == 'display'}
onChange={(event: any) => {
setPatients((prevValues) => ({
...prevValues,
explanation: event.target.value,
@ -479,8 +780,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
}}
/>
</Grid>
</Grid>
</>
)
);
}