Merge pull request 'feature/view-patient-data' (#7) from feature/view-patient-data into develop

Reviewed-on: #7

package-lock.json

@@ -41,6 +41,7 @@
         "react-leaflet": "^4.2.1",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
+        "react-signature-canvas": "^1.0.6",
         "react-table": "^7.8.0",
         "recharts": "^2.7.2",
         "typescript": "^4.9.5",
@@ -53,6 +54,7 @@
         "@types/leaflet": "^1.9.3",
         "@types/react-date-range": "^1.4.4",
         "@types/react-gauge-chart": "^0.4.0",
+        "@types/react-signature-canvas": "^1.0.2",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.24",
         "tailwindcss": "^3.3.2"
@@ -4972,6 +4974,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-signature-canvas": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-signature-canvas/-/react-signature-canvas-1.0.2.tgz",
+      "integrity": "sha512-uDHDoo2JM/9qYS+U7PRKDLBgOnQOOUEkDdXjCxBvI19fWtOLqXisrjiquPu+enu5iu2oWIfU7cVhn1QJZPkLTg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "@types/signature_pad": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.6",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
@@ -5029,6 +5041,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/signature_pad": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.2.tgz",
+      "integrity": "sha512-dDfWIgRcdzAaeVOpLRmLHIumGwc5inSD4Dj2Duis3yUEoSADZECLJHKkUQphbaANQ7kSC2bkf1JzyBPSmTlrPQ==",
+      "dev": true
+    },
     "node_modules/@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -15961,6 +15979,20 @@
         }
       }
     },
+    "node_modules/react-signature-canvas": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
+      "integrity": "sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==",
+      "dependencies": {
+        "signature_pad": "^2.3.2",
+        "trim-canvas": "^0.1.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.8",
+        "react": "0.14 - 18",
+        "react-dom": "0.14 - 18"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz",
@@ -16844,6 +16876,11 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/signature_pad": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz",
+      "integrity": "sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -17691,6 +17728,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/trim-canvas": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/trim-canvas/-/trim-canvas-0.1.2.tgz",
+      "integrity": "sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ=="
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",
     "recharts": "^2.7.2",
     "typescript": "^4.9.5",
@@ -73,6 +74,7 @@
     "@types/leaflet": "^1.9.3",
     "@types/react-date-range": "^1.4.4",
     "@types/react-gauge-chart": "^0.4.0",
+    "@types/react-signature-canvas": "^1.0.2",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2"

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="In Motion Spine & Joint Center"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>In Motion Spine & Joint Center</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css

@@ -1,37 +1,34 @@
-.app-screen-constants .MuiInputBase-root{
+/* .app-screen-constants .MuiInputBase-root{
     margin:auto;
     max-width:1500;
     height:800 !important;
-}
+} */
 
-.collapsable-form-style .MuiInputBase-root {
-    width: 300px !important;
-    margin: 5%;
+/* .collapsable-form-style .MuiInputBase-root {
+    margin:3%;
     height: 50px
 }
 
 .collapsable-form-style-form7 .MuiInputBase-root {
-    width: 350px !important;
     margin: 3%;
     height: 50px
 }
 
 .collapsable-form-style-multiline .MuiInputBase-root {
-    width: 350px !important;
     margin: 5%;
     min-height: 100px
-}
-.collapsable-form-style-multiline label {
+} */
+/* .collapsable-form-style-multiline label {
     padding: 15px;
-}
+} */
 
-.collapsable-form-style label {
+/* .collapsable-form-style label {
     padding: 15px;
-}
+} */
 
-.collapsable-form-style-form7 label {
+/* .collapsable-form-style-form7 label {
     padding: 13px;
-}
+} */
 
 .collapsable-form-style-radioButtons{
     width: 300px !important;
@@ -41,7 +38,6 @@
 }
 
 .collapsable-form-style-radioButtons-fullwidth{
-    /* width: 300px !important; */
     margin: 5%;
     padding-top: 12px;
     padding-left: 16px;
@@ -57,4 +53,33 @@
 
 .addNew-form-table-style label {
     padding: 0px;
-}
+}
+.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;
+} */

src/Components/Helper/AddNewTable.tsx

@@ -1,4 +1,17 @@
-import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
+import {
+  Button,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  TextField,
+  Paper,
+  Grid,
+  FormLabel,
+  FormControl,
+} from '@mui/material';
 import * as React from 'react';
 
 interface RowData {
@@ -13,51 +26,64 @@ interface DataTableProps {
   onAddRow: () => void;
 }
 
-type Props={
-  handleFormSection5Data:(
-    generalHealth: string|undefined,
-    presentProblemBefore: string|undefined,
-    ifYespresentProblemBefore:string|undefined,
-    ifYestreatmentProvided: string|undefined,
-    ifYesOutcome: string|undefined,
-    strokeBloodclotting: string|undefined,
-    ifYesstrokeBloodclotting: string|undefined,
-    dizzinessFetigue: string|undefined,
-    ifyesdizzinessFetigue: string|undefined,
-    antiColligent: string|undefined,
-    injuriesHospitalization: string|undefined,
-    supplementsOrDrugs: string|undefined,
-  )=> void
-  patientDataDiplay:any;
-  type:string;
-
-}
-
-function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
+type Props = {
+  handleFormSection5Data: (
+    generalHealth: string | undefined,
+    presentProblemBefore: string | undefined,
+    ifYespresentProblemBefore: string | undefined,
+    ifYestreatmentProvided: string | undefined,
+    ifYesOutcome: string | undefined,
+    strokeBloodclotting: string | undefined,
+    ifYesstrokeBloodclotting: string | undefined,
+    dizzinessFetigue: string | undefined,
+    ifyesdizzinessFetigue: string | undefined,
+    antiColligent: string | undefined,
+    injuriesHospitalization: string | undefined,
+    supplementsOrDrugs: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
+function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
   const [illnessFromData, setIllnessFromData] = React.useState<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"?
-    <FormControl>
-      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
-        <Grid item xs={2} className='addNew-form-table-style'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Date" 
+      <FormLabel>If yes, Please enter the details below:</FormLabel>
+      <br></br>
+      {type !== 'display' ? (
+        <FormControl>
+          <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'
                 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'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Injury/Illness/Surgeries" 
+              />
+            </Grid>
+            <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'
                 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'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Treatment" 
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <TextField
+                required
+                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'>
-            <TextField 
+              />
+            </Grid>
+            <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>
-        
-      </Grid>
-    </FormControl>
-      :""}
-    
-     
-      <TableContainer sx={{width:800}} className='illness-table-style'>
-        <Table  aria-label="simple table">
+              />
+            </Grid>
+            <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 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)}}>
-                    Delete
-                  </Button>
-                    :""}
+                  {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;

src/Components/Helper/SignatureComponent.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import { FormLabel, Grid } from '@mui/material';
+
+
+type Props={
+    signature:any;
+    setSignature: (value: any) => void;
+}
+const SignatureComponent = ({signature,setSignature}:Props) => {
+  const sigCanvas = useRef<any>();
+  
+  const clear = () => sigCanvas.current.clear();
+//   setSignature(sigCanvas.current.toDataURL());
+
+  const save = () => {
+    setSignature(sigCanvas.current.toDataURL());
+  };
+  
+  const StyledCanvas = styled(SignatureCanvas)({
+    border: '5px solid #888888'
+  });
+  
+  return (
+    <>   
+        <Grid item sx={{border:'1px solid #888888',borderRadius:2, width:'250px', height:'110px',marginLeft:'10px'}}>
+            <StyledCanvas
+                ref={sigCanvas}
+                canvasProps={{
+                className: 'signatureCanvas',
+                height:'110px',
+                width:'250px'
+                }}
+            />
+        </Grid>
+        <Grid  container flexDirection={'row'}  sx={{ marginTop:'10px'}}>
+            <Grid item sx={{marginLeft:'10px'}}>
+                <Button variant="contained" onClick={clear}>Clear</Button>
+            </Grid>
+            <Grid item sx={{marginLeft:'20px'}}>
+                <Button variant="contained" onClick={save}>Save</Button>
+            </Grid>
+        </Grid>
+    </>
+  );
+};
+
+export default SignatureComponent;

src/Components/ImageMarker/EntryForm.tsx

@@ -11,10 +11,12 @@ type Props = {
 const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
   return (
     <div className='entryForm'>
-      <span className='header'>*** Mark Your Areas of Pain on the Picture ***</span>
-      {entries && entries.length > 0 &&
+      <span className='header'>
+        *** Mark Your Areas of Pain on the Picture ***
+      </span>
+      {entries && entries.length > 0 && (
         <span className='sub-header'>How much pain are you in right now?</span>
-      }
+      )}
       {entries?.map((entry: any, index: number) => (
         <Entry
           entry={entry}
@@ -24,14 +26,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>
   );
 };

src/Components/ImageMarker/PatientImageMarker.css

@@ -5,7 +5,7 @@
 }
 
 .image-marker-div .entry-div {
-    width: 50%;
+    width: 55%;
 }
 
 .image-marker-div .entry-div .entryForm {
@@ -51,6 +51,9 @@
     margin-top: 2%;
     margin-bottom: 3%;
 }
+.image-marker-div .marker-div {
+    width: 45%;
+}
 
 @media only screen and (max-width: 1200px) {
     .image-marker-div {
@@ -69,6 +72,11 @@
         gap: 0;
         margin-bottom: 2%;
     }
+    .image-marker-div .marker-div {
+        /* margin-right: 5%; */
+        margin-top: 3%;
+        width: 100%;
+    }
 }
 
 @media only screen and (min-width: 1400px) {

src/Components/ImageMarker/PatientImageMarker.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import ImageMarker, { Marker } from 'react-image-marker';
 
 import humanImage from '../../Assets/human_body_3d.jpg';
 import EntryForm from './EntryForm';
 
-import './PatientImageMarker.css'
+import './PatientImageMarker.css';
 
-type Props = {}
+type Props = {};
 
 const PatientImageMarker = (props: Props) => {
   const [markers, setMarkers] = useState<Array<Marker>>([]);
@@ -38,36 +38,42 @@ const PatientImageMarker = (props: Props) => {
       'entry',
       JSON.stringify({ markers: markers, entries: entries })
     );
-  }
+  };
 
   useEffect(() => {
-    if (action.type === 'add')
-      setEntries([...entries, { index: entries.length + 1, severity: 5 }]);
-    else
+    if (action.type === 'add') {
+      const ind =
+        entries.length != 0 ? entries[entries.length - 1].index + 1 : 1;
+      setEntries([...entries, { index: ind, severity: 5 }]);
+    } else
       setEntries(
         entries.filter((entry: any, ind: number) => ind != action.index)
       );
   }, [action]);
-  
-  return (
-      <div className='image-marker-div'>
-          <div className='entry-div'>
-              <EntryForm
-                entries={entries}
-                onSave={onSave}
-                onDelete={deleteEntry}
-                onUpdate={updateEntry}
-              />
-          </div>
-          <div className='marker-div'>
-              <ImageMarker
-                src={humanImage}
-                markers={markers}
-                onAddMarker={(marker: Marker) => addEntries(marker)}
-            />
-          </div>
-    </div>
-  )
-}
 
-export default PatientImageMarker;
+  useEffect(() => {
+    onSave();
+  }, [entries]);
+
+  return (
+    <div className='image-marker-div'>
+      <div className='entry-div'>
+        <EntryForm
+          entries={entries}
+          onSave={onSave}
+          onDelete={deleteEntry}
+          onUpdate={updateEntry}
+        />
+      </div>
+      <div className='marker-div'>
+        <ImageMarker
+          src={humanImage}
+          markers={markers}
+          onAddMarker={(marker: Marker) => addEntries(marker)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PatientImageMarker;

src/Components/ImageMarker/ViewPatientImageMarker.tsx

@@ -15,7 +15,7 @@ const ViewPatientImageMarker = (props: Props) => {
         <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>
+            <span className='image-marker__marker--default'>{index + 1}</span>
             <Rating
               index={entry.index}
               defaultValue={entry.severity}

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -1,10 +1,38 @@
-import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import { useFormik } from "formik";
-import * as yup from "yup";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import React, { useEffect } from 'react';
 
 interface Patient {
+  maritalStatus: string | undefined;
+  numberOfChildren: string | undefined;
+  occupation: string | undefined;
+  hoursPerWeek: number | string | undefined;
+  employer: string | undefined;
+  businessPhone: string | undefined;
+  spouseName: string | undefined;
+  spouseEmployer: string | undefined;
+  spouseBusinessPhone: string | undefined;
+  emergencyContact: string | undefined;
+  relationship: string | undefined;
+  spousePhone: string | undefined;
+}
+
+type Props = {
+  handleFormSection2Data: (
     maritalStatus: string | undefined,
     numberOfChildren: string | undefined,
     occupation: string | undefined,
@@ -16,360 +44,438 @@ interface Patient {
     spouseBusinessPhone: string | undefined,
     emergencyContact: string | undefined,
     relationship: string | undefined,
-    spousePhone: string | undefined,
-}
-
-type Props = {
-    handleFormSection2Data:(
-        maritalStatus: string | undefined,
-        numberOfChildren: string | undefined,
-        occupation: string | undefined,
-        hoursPerWeek: number | string | undefined,
-        employer: string | undefined,
-        businessPhone: string | undefined,
-        spouseName: string | undefined,
-        spouseEmployer: string | undefined,
-        spouseBusinessPhone: string | undefined,
-        emergencyContact: string | undefined,
-        relationship: string | undefined,
-        spousePhone: string | undefined,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
-  
-
-export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
-    const [patient, setPatient] = React.useState<Patient>({
-        maritalStatus:'',
-        numberOfChildren:'',
-        occupation:'',
-        hoursPerWeek:'',
-        employer:'',
-        businessPhone:'',
-        spouseName:'',
-        spouseEmployer:'',
-        spouseBusinessPhone:'',
-        emergencyContact:'',
-        relationship:'',
-        spousePhone:''
-      });
-
-      useEffect(()=>{
-        handleFormSection2Data(
-            patient.maritalStatus,
-            patient.numberOfChildren,
-            patient.occupation,
-            patient.hoursPerWeek,
-            patient.employer,
-            patient.businessPhone,
-            patient.spouseName,
-            patient.spouseEmployer,
-            patient.spouseBusinessPhone,
-            patient.emergencyContact,
-            patient.relationship,
-            patient.spousePhone,
-        )
-      },[patient])
-
-    return(
-        <>
-        <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) => ({
-                            ...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'}/>
-                </RadioGroup>
-                
-            </FormControl>
-            </Grid>
-           
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                <TextField 
-                
-                variant="outlined" 
-                type="number"
-                label="Number of Children/Ages" 
-                className='collapsable-form-style'
-                name='numberOfChildren'
-                onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        numberOfChildren: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
-                disabled={type=='display'}
-                />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style '>
-                <TextField 
-                // required
-                variant="outlined" 
-                label="Occupation" 
-                className='collapsable-form-style'
-                name='occupation'
-                onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        occupation: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.occupation:patient.occupation}
-                disabled={type=='display'}
-                />
-               
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Hours/Week" 
-                 type="number" 
-                 className='collapsable-form-style'
-                 name='hoursPerWeek'
-                 onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        hoursPerWeek: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
-                disabled={type=='display'}
-                 />
-                 
-            </Grid>
-            <Grid
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                <TextField 
-                variant="outlined" 
-                label="Employer" 
-                className='collapsable-form-style'
-                name='employer'
-                onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        employer: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.employer:patient.employer}
-                disabled={type=='display'}
-                />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                <TextField 
-                variant="outlined" 
-                label="Business Phone" 
-                type="number"
-                className='collapsable-form-style'
-                name='businessPhone'
-                onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        businessPhone: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
-                disabled={type=='display'}
-                />
-            </Grid>
-
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             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={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Spouse's Name" 
-                 className='collapsable-form-style'
-                 name='spouseName'
-                 onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        spouseName: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
-                disabled={type=='display'}
-                 />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Spouse's Employer" 
-                 className='collapsable-form-style'
-                 name='spouseEmployer'
-                 onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        spouseEmployer: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
-                disabled={type=='display'}
-                 />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                  <TextField 
-                  variant="outlined" 
-                  label="Business Phone" 
-                  type="number"
-                  className='collapsable-form-style'
-                  name='spouseBusinessPhone'
-                  onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        spouseBusinessPhone: e.target.value,
-                      }));
-                }}
-                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>
-            </Grid>
-           
-
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                   <TextField 
-                   variant="outlined" 
-                   label="Emergency Contact" 
-                   className='collapsable-form-style'
-                   name='emergencyContact'
-                   onChange={(e)=>{
-                    setPatient((prevValues:any) => ({
-                        ...prevValues,
-                        emergencyContact: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
-                disabled={type=='display'}
-                   />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
-                    <TextField 
-                    variant="outlined" 
-                    label="Relationship" 
-                    className='collapsable-form-style'
-                    name='relationship'
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            relationship: e.target.value,
-                          }));
-                    }}
-                    value={type=='display'?patientDataDiplay.relationship:patient.relationship}
-                    disabled={type=='display'}
-                    />
-            </Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style '>
-                     <TextField 
-                     variant="outlined" 
-                     type="number"
-                     label="Phone" 
-                     className='collapsable-form-style'
-                     name='spousePhone'
-                     onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            spousePhone: e.target.value,
-                          }));
-                    }}
-                    value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
-                    disabled={type=='display'}
-                     />
-            </Grid>
-        </Grid>
-        </>
-    )
+    spousePhone: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
 };
+
+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: '',
+  });
+
+  useEffect(() => {
+    handleFormSection2Data(
+      patient.maritalStatus,
+      patient.numberOfChildren,
+      patient.occupation,
+      patient.hoursPerWeek,
+      patient.employer,
+      patient.businessPhone,
+      patient.spouseName,
+      patient.spouseEmployer,
+      patient.spouseBusinessPhone,
+      patient.emergencyContact,
+      patient.relationship,
+      patient.spousePhone
+    );
+  }, [patient]);
+
+  return (
+    <>
+      <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 && 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'}
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid item xs={4} className='collapsable-form-style '></Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            type='number'
+            label='Number of Children/Ages'
+            className='collapsable-form-style'
+            name='numberOfChildren'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                numberOfChildren: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.numberOfChildren
+                : patient.numberOfChildren
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            // required
+            variant='outlined'
+            label='Occupation'
+            className='collapsable-form-style'
+            name='occupation'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                occupation: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.occupation
+                : patient.occupation
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Hours/Week'
+            type='number'
+            className='collapsable-form-style'
+            name='hoursPerWeek'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                hoursPerWeek: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.hoursPerWeek
+                : patient.hoursPerWeek
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Employer'
+            className='collapsable-form-style'
+            name='employer'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                employer: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display' ? patientDataDiplay && patientDataDiplay.employer : patient.employer
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Business Phone'
+            type='number'
+            className='collapsable-form-style'
+            name='businessPhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                businessPhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.businessPhone
+                : patient.businessPhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          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={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Spouse's Name"
+            className='collapsable-form-style'
+            name='spouseName'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseName: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseName
+                : patient.spouseName
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Spouse's Employer"
+            className='collapsable-form-style'
+            name='spouseEmployer'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseEmployer: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseEmployer
+                : patient.spouseEmployer
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Business Phone'
+            type='number'
+            className='collapsable-form-style'
+            name='spouseBusinessPhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseBusinessPhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseBusinessPhone
+                : patient.spouseBusinessPhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+
+        <Grid item xs={12} className='collapsable-form-style '>
+          <FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Emergency Contact'
+            className='collapsable-form-style'
+            name='emergencyContact'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                emergencyContact: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.emergencyContact
+                : patient.emergencyContact
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Relationship'
+            className='collapsable-form-style'
+            name='relationship'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                relationship: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.relationship
+                : patient.relationship
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            type='number'
+            label='Phone'
+            className='collapsable-form-style'
+            name='spousePhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spousePhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spousePhone
+                : patient.spousePhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -68,7 +68,6 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
         )
       },[patient])
 
-      console.log("patientDataDiplay",patientDataDiplay)
     return(
         <>
         <Grid item xs={12} className='collapsable-form-style '> 
@@ -93,7 +92,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         physicianname: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.physicianname:patient.physicianname}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
                 disabled={type=='display'}
                 />
             </Grid>
@@ -114,7 +113,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         physiciancity: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.physiciancity:patient.physiciancity}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
                 disabled={type=='display'}
                 />
             </Grid>
@@ -135,7 +134,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         physicianstate: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.physicianstate:patient.physicianstate}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
                 disabled={type=='display'}
                  />
             </Grid>
@@ -157,7 +156,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         physicianphone: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.physicianphone:patient.physicianphone}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
                 disabled={type=='display'}
                 />
             </Grid>
@@ -190,7 +189,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'?patientDataDiplay.haveChiropractor:patient.haveChiropractor}
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -223,7 +222,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         chiropractorName: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.chiropractorName:patient.chiropractorName}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
                 disabled={type=='display'}
                  />
             </Grid>
@@ -245,7 +244,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                         chiropractorState: e.target.value,
                       }));
                 }}
-                value={type=='display'?patientDataDiplay.chiropractorState:patient.chiropractorState}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
                 disabled={type=='display'}
                  />
             </Grid>
@@ -257,7 +256,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'?patientDataDiplay.xray:patient.xray}
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -279,7 +278,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'?patientDataDiplay.reference:patient.reference}
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -305,7 +304,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'?patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({

src/Components/PatientForm/OtherDetails8.tsx

@@ -1,212 +1,318 @@
-import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import React, { useEffect } from "react";
+import {
+  Grid,
+  FormLabel,
+  TextField,
+  FormControl,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import React, { useEffect } from 'react';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 
 interface Patient {
-    familyHistory: string;
-    sleep: string;
-    pillow:string;
-    orthotics:string;
-    brestExam: any;
-    pregnancy:string;
-    menstralCycle: any;
-  }
+  familyHistory: string;
+  sleep: string;
+  pillow: string;
+  orthotics: string;
+  brestExam: any;
+  pregnancy: string;
+  menstralCycle: any;
+}
 
-  type Props = {
-    handleFormSection8Data:(
-      familyHistory: string|undefined,
-      sleep: string|undefined,
-      pillow:string|undefined,
-      orthotics:string|undefined,
-      brestExam: any,
-      pregnancy:string|undefined,
-      menstralCycle: any,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
+type Props = {
+  handleFormSection8Data: (
+    familyHistory: string | undefined,
+    sleep: string | undefined,
+    pillow: string | undefined,
+    orthotics: string | undefined,
+    brestExam: any,
+    pregnancy: string | undefined,
+    menstralCycle: any
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
-export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){
-  
-    const [patient, setPatient] = React.useState<Patient>({
-        familyHistory: '',
-        sleep: '',
-        pillow:'',
-        orthotics:'',
-        brestExam: dayjs('2022-04-17'),
-        pregnancy:'',
-        menstralCycle: dayjs('2022-04-17'),
-    });
+export default function OtherDetails8({
+  handleFormSection8Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    familyHistory: '',
+    sleep: '',
+    pillow: '',
+    orthotics: '',
+    brestExam: dayjs('2022-04-17'),
+    pregnancy: '',
+    menstralCycle: dayjs('2022-04-17'),
+  });
 
-    useEffect(()=>{
-      handleFormSection8Data(
-        patient.familyHistory,
-        patient.sleep,
-        patient.pillow,
-        patient.orthotics,
-        patient.brestExam=dayjs(patient.brestExam),
-        patient.pregnancy,
-        patient.menstralCycle=dayjs(patient.menstralCycle)
-      )
-    },[patient])
+  useEffect(() => {
+    handleFormSection8Data(
+      patient.familyHistory,
+      patient.sleep,
+      patient.pillow,
+      patient.orthotics,
+      (patient.brestExam = dayjs(patient.brestExam)),
+      patient.pregnancy,
+      (patient.menstralCycle = dayjs(patient.menstralCycle))
+    );
+  }, [patient]);
 
-    const formatDate = (inputDate:any) => {
-      const date = new Date(inputDate);
-      const year = date.getUTCFullYear();
-      const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-      const day = String(date.getUTCDate()+1).padStart(2, '0');
-      
-      return `${year}-${month}-${day}`;
-    };
+  const formatDate = (inputDate: any) => {
+    const date = new Date(inputDate);
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate() + 1).padStart(2, '0');
 
-  
+    return `${year}-${month}-${day}`;
+  };
 
-    
-    return(
-        <>
-        <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="" 
-                value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory}
-                disabled={type=='display'}
-                onChange={(event:any) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    familyHistory: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
+  return (
+    <>
+      <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 && patientDataDiplay.familyHistory
+                : patient.familyHistory
+            }
+            disabled={type == 'display'}
+            onChange={(event: any) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                familyHistory: event.target.value,
+              }));
+            }}
+          />
+        </Grid>
 
         <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>How do you sleep?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            sleep: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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>
+          <FormControl>
+            <FormLabel>How do you sleep?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.sleep : patient.sleep
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  sleep: event.target.value,
+                }));
+              }}
+            >
+              <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>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Do you use a pillow?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            pillow: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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'>
+          <FormControl>
+            <FormLabel>Do you use a pillow?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.pillow : patient.pillow
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  pillow: event.target.value,
+                }));
+              }}
+            >
+              <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'>
-                <FormControl>
-                    <FormLabel>Do you wear orthotics or arch support?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            orthotics: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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'>
+          <FormControl>
+            <FormLabel>Do you wear orthotics or arch support?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.orthotics
+                  : patient.orthotics
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  orthotics: event.target.value,
+                }));
+              }}
+            >
+              <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>
-                <FormControl>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    value={type=='display'?patientDataDiplay.brestExam:patient.brestExam}
-                    disabled={type=='display'}
-                    onChange={(event) => {
-                      const formattedDate = formatDate(event)
-                      setPatient((prevValues) => ({
-                        ...prevValues,
-                        brestExam: formattedDate,
-                      }));
-                      }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-              </FormControl>
-          </Grid>
+        <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 && patientDataDiplay.brestExam
+                    : patient.brestExam
+                }
+                disabled={type == 'display'}
+                onChange={(event) => {
+                  const formattedDate = formatDate(event);
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    brestExam: formattedDate,
+                  }));
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
 
-          {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
+        {/* <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'}}
-                        defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            pregnancy: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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>
-                <FormControl>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle}
-                    disabled={type=='display'}
-                    onChange={(event) => {
-                      const formattedDate = formatDate(event)
-                      setPatient((prevValues) => ({
-                        ...prevValues,
-                        menstralCycle: formattedDate,
-                      }));
-                      }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-              </FormControl>
-          </Grid>
-
-       
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Possible pregnancy?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.pregnancy
+                  : patient.pregnancy
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  pregnancy: event.target.value,
+                }));
+              }}
+            >
+              <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}
+          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 && patientDataDiplay.menstralCycle
+                    : patient.menstralCycle
+                }
+                disabled={type == 'display'}
+                onChange={(event) => {
+                  const formattedDate = formatDate(event);
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    menstralCycle: formattedDate,
+                  }));
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -1,368 +1,587 @@
 import * as React from 'react';
-import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  FormGroup,
+  Grid,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import path from 'path';
 import { useEffect } from 'react';
 
 interface Patient {
-    chiefComplaint:string;
-    painWorse: string[];
-    painBetter: string[];
-    painQuality: string[];
-    painWorstTime: string[];
-    currentComplaintIssues: string[];
-    painDuration: string;
-    currentTreatment: string;
-    treatmentGoal: string;
-    selfTreatment:string;
-  }
+  chiefComplaint: string;
+  painWorse: string[];
+  painBetter: string[];
+  painQuality: string[];
+  painWorstTime: string[];
+  currentComplaintIssues: string[];
+  painDuration: string;
+  currentTreatment: string;
+  treatmentGoal: string;
+  selfTreatment: string;
+}
 
-  type Props = {
-    handleFormSection4Data:(
-        chiefComplaint:string|undefined,
-        painWorse: any,
-        painBetter: any,
-        painQuality: any,
-        painWorstTime: any,
-        currentComplaintIssues: any,
-        painDuration: string|undefined,
-        currentTreatment: string|undefined,
-        treatmentGoal: string|undefined,
-        selfTreatment:string|undefined,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
-  
+type Props = {
+  handleFormSection4Data: (
+    chiefComplaint: string | undefined,
+    painWorse: any,
+    painBetter: any,
+    painQuality: any,
+    painWorstTime: any,
+    currentComplaintIssues: any,
+    painDuration: string | undefined,
+    currentTreatment: string | undefined,
+    treatmentGoal: string | undefined,
+    selfTreatment: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
-export default function PainAnalysisSection4({handleFormSection4Data,patientDataDiplay,type}:Props){
-    const [patient, setPatient] = React.useState<Patient>({
-        chiefComplaint:'',
-        painWorse:[],
-        painBetter:[],
-        painQuality:[],
-        painWorstTime:[],
-        currentComplaintIssues:[],
-        painDuration:'',
-        currentTreatment:'',
-        treatmentGoal:'',
-        selfTreatment:'',
-      });
+export default function PainAnalysisSection4({
+  handleFormSection4Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    chiefComplaint: '',
+    painWorse: [],
+    painBetter: [],
+    painQuality: [],
+    painWorstTime: [],
+    currentComplaintIssues: [],
+    painDuration: '',
+    currentTreatment: '',
+    treatmentGoal: '',
+    selfTreatment: '',
+  });
 
-      useEffect(()=>{
-        handleFormSection4Data(
-            patient.chiefComplaint,
-            patient.painWorse,
-            patient.painBetter,
-            patient.painQuality,
-            patient.painWorstTime,
-            patient.currentComplaintIssues,
-            patient.painDuration,
-            patient.currentTreatment,
-            patient.treatmentGoal,
-            patient.selfTreatment,
-        )
-      },[patient])
-   
-      const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, checked } = event.target;
-        setPatient((prevValues) => ({
-          ...prevValues,
-          painWorse: checked
-            ? [...prevValues.painWorse, name]
-            : prevValues.painWorse.filter((item) => item !== name),
-        }));
-      };
+  useEffect(() => {
+    handleFormSection4Data(
+      patient.chiefComplaint,
+      patient.painWorse,
+      patient.painBetter,
+      patient.painQuality,
+      patient.painWorstTime,
+      patient.currentComplaintIssues,
+      patient.painDuration,
+      patient.currentTreatment,
+      patient.treatmentGoal,
+      patient.selfTreatment
+    );
+  }, [patient]);
 
-      const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, checked } = event.target;
-        setPatient((prevValues) => ({
-          ...prevValues,
-          painBetter: checked
-            ? [...prevValues.painBetter, name]
-            : prevValues.painBetter.filter((item) => item !== name),
-        }));
-      };
+  const handlePainWorseChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painWorse: checked
+        ? [...prevValues.painWorse, name]
+        : prevValues.painWorse.filter((item) => item !== name),
+    }));
+  };
 
-      const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, checked } = event.target;
-        setPatient((prevValues) => ({
-          ...prevValues,
-          painQuality: checked
-            ? [...prevValues.painQuality, name]
-            : prevValues.painQuality.filter((item) => item !== name),
-        }));
-      };
+  const handlePainBetterChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painBetter: checked
+        ? [...prevValues.painBetter, name]
+        : prevValues.painBetter.filter((item) => item !== name),
+    }));
+  };
 
-      const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, checked } = event.target;
-        setPatient((prevValues) => ({
-          ...prevValues,
-          painWorstTime: checked
-            ? [...prevValues.painWorstTime, name]
-            : prevValues.painWorstTime.filter((item) => item !== name),
-        }));
-      };
+  const handlePainQualityChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painQuality: checked
+        ? [...prevValues.painQuality, name]
+        : prevValues.painQuality.filter((item) => item !== name),
+    }));
+  };
 
-      const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, checked } = event.target;
-        setPatient((prevValues) => ({
-          ...prevValues,
-          currentComplaintIssues: checked
-            ? [...prevValues.currentComplaintIssues, name]
-            : prevValues.currentComplaintIssues.filter((item) => item !== name),
-        }));
-      };
+  const handlePainWorstTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painWorstTime: checked
+        ? [...prevValues.painWorstTime, name]
+        : prevValues.painWorstTime.filter((item) => item !== name),
+    }));
+  };
 
-    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'
-                onChange={(e)=>{
-                    setPatient((prevValues) => ({
-                        ...prevValues,
-                        chiefComplaint: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint}
-                disabled={type=='display'}
-                />
-            </Grid>
+  const handleCurrentComplaintIssuesTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      currentComplaintIssues: checked
+        ? [...prevValues.currentComplaintIssues, name]
+        : prevValues.currentComplaintIssues.filter((item) => item !== name),
+    }));
+  };
 
-            <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 onChange={handlePainWorseChange} name="Bending" />}
-                            label="Bending"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
-                            label="Standing"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
-                            label="Sitting"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
-                            label="Walking"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
-                            label="Others"
-                            disabled={type=='display'}
-                        />
-                    </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 onChange={handlePainBetterChange} name="laying down" />}
-                            label="laying down"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
-                            label="Standing"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
-                            label="Sitting"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
-                            label="Walking"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
-                            label="Others"
-                            disabled={type=='display'}
-                        />
-                    </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 onChange={handlePainQualityChange} name="sharp" />}
-                            label="Sharp"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            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'}
-                        />
-                        <FormControlLabel
-                            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'}
-                        />
-                    </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 onChange={handlePainWorstTimeChange} name="Morning" />}
-                            label="Morning"
-                            disabled={type=='display'}
-                        />
-                        <FormControlLabel
-                            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'}
-                        />
-                        <FormControlLabel
-                            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'}
-                        />
-                    </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"
-                        onChange={(e)=>{
-                            setPatient((prevValues) => ({
-                                ...prevValues,
-                                painDuration: e.target.value,
-                              }));
-                        }}
-                        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%" />
-                    </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 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'}
-                        />
-                        <FormControlLabel
-                            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'}
-                        />
-                       
-                    </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"
-                        onChange={(e)=>{
-                            setPatient((prevValues) => ({
-                                ...prevValues,
-                                selfTreatment: e.target.value,
-                              }));
-                        }}
-                        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" />
-                    </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'
-                onChange={(e)=>{
-                    setPatient((prevValues) => ({
-                        ...prevValues,
-                        treatmentGoal: e.target.value,
-                      }));
-                }}
-                value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal}
-                disabled={type=='display'}
-                />
-            </Grid>
-          
+  return (
+    <>
+      <Grid item xs={12} className='collapsable-form-style '>
+        <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
+      </Grid>
+      <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)'
+            name='chiefComplaint'
+            onChange={(e) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                chiefComplaint: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.chiefComplaint
+                : patient.chiefComplaint
+            }
+            disabled={type == 'display'}
+          />
         </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 onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
+                }
+                label='Bending'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
+                }
+                label='Sitting'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
+                }
+                label='Walking'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </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
+                    onChange={handlePainBetterChange}
+                    name='laying down'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
+                  />
+                }
+                label='laying down'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
+                }
+                label='Sitting'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
+                }
+                label='Walking'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </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 onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
+                }
+                label='Sharp'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
+                }
+                label='Dull/Ache'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainQualityChange}
+                    name='Throbbing'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
+                  />
+                }
+                label='Throbbing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainQualityChange}
+                    name='Tingling/Numbness/Burning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
+                  />
+                }
+                label='Tingling/Numbness/Burning'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </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
+                    onChange={handlePainWorstTimeChange}
+                    name='Morning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
+                  />
+                }
+                label='Morning'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='During day'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
+                  />
+                }
+                label='During day'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Evening'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
+                  />
+                }
+                label='Evening'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Lying in bed'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
+                  />
+                }
+                label='Lying in bed'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Others'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
+                  />
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </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'
+              onChange={(e) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  painDuration: e.target.value,
+                }));
+              }}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && 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%'
+              />
+            </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
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Muscle weakness'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
+                  />
+                }
+                label='Muscle weakness'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Bowel/Bladder problem'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
+                  />
+                }
+                label='Bowel/Bladder problem'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Digestion'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
+                  />
+                }
+                label='Digestion'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Cardiac/Respiratory'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
+                  />
+                }
+                label='Cardiac/Respiratory'
+                disabled={type == 'display'}
+              />
+            </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'
+              onChange={(e) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  selfTreatment: e.target.value,
+                }));
+              }}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && 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'
+              />
+            </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={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)'
+            name='treatmentGoal'
+            onChange={(e) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                treatmentGoal: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.treatmentGoal
+                : patient.treatmentGoal
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/PastTreatment5.tsx

@@ -1,4 +1,13 @@
-import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
+import {
+  TextField,
+  FormControlLabel,
+  Grid,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
 import * as React from 'react';
 import Table from '../Helper/AddNewTable';
 import { useEffect } from 'react';
@@ -6,7 +15,7 @@ import { useEffect } from 'react';
 interface Patient {
   generalHealth: string;
   presentProblemBefore: string;
-  ifYespresentProblemBefore:string;
+  ifYespresentProblemBefore: string;
   ifYestreatmentProvided: string;
   ifYesOutcome: string;
   strokeBloodclotting: string;
@@ -19,313 +28,511 @@ interface Patient {
 }
 
 type Props = {
-  handleFormSection5Data:(
-    generalHealth: string|undefined,
-    presentProblemBefore: string|undefined,
-    ifYespresentProblemBefore:string|undefined,
-    ifYestreatmentProvided: string|undefined,
-    ifYesOutcome: string|undefined,
-    strokeBloodclotting: string|undefined,
-    ifYesstrokeBloodclotting: string|undefined,
-    dizzinessFetigue: string|undefined,
-    ifyesdizzinessFetigue: string|undefined,
-    antiColligent: string|undefined,
-    injuriesHospitalization: string|undefined,
-    supplementsOrDrugs: string|undefined,
-  )=> void
-  patientDataDiplay:any;
-  type:string;
+  handleFormSection5Data: (
+    generalHealth: string | undefined,
+    presentProblemBefore: string | undefined,
+    ifYespresentProblemBefore: string | undefined,
+    ifYestreatmentProvided: string | undefined,
+    ifYesOutcome: string | undefined,
+    strokeBloodclotting: string | undefined,
+    ifYesstrokeBloodclotting: string | undefined,
+    dizzinessFetigue: string | undefined,
+    ifyesdizzinessFetigue: string | undefined,
+    antiColligent: string | undefined,
+    injuriesHospitalization: string | undefined,
+    supplementsOrDrugs: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function PastTreatment5({
+  handleFormSection5Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    generalHealth: '',
+    presentProblemBefore: '',
+    ifYespresentProblemBefore: '',
+    ifYestreatmentProvided: '',
+    ifYesOutcome: '',
+    strokeBloodclotting: '',
+    ifYesstrokeBloodclotting: '',
+    dizzinessFetigue: '',
+    ifyesdizzinessFetigue: '',
+    antiColligent: '',
+    injuriesHospitalization: '',
+    supplementsOrDrugs: '',
+  });
+
+  useEffect(() => {
+    handleFormSection5Data(
+      patient.generalHealth,
+      patient.presentProblemBefore,
+      patient.ifYespresentProblemBefore,
+      patient.ifYestreatmentProvided,
+      patient.ifYesOutcome,
+      patient.strokeBloodclotting,
+      patient.ifYesstrokeBloodclotting,
+      patient.dizzinessFetigue,
+      patient.ifyesdizzinessFetigue,
+      patient.antiColligent,
+      patient.injuriesHospitalization,
+      patient.supplementsOrDrugs
+    );
+  }, [patient]);
+
+  return (
+    <>
+      <form>
+        <Grid container direction='row'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>Overall your General Health is:</FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.generalHealth
+                    : patient.generalHealth
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    generalHealth: event.target.value,
+                  }));
+                }}
+              >
+                <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'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you experienced your present problem before?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.presentProblemBefore
+                    : patient.presentProblemBefore
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    presentProblemBefore: event.target.value,
+                  }));
+                }}
+              >
+                <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}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYespresentProblemBefore: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='Was treatment provided?If yes, by whom?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYestreatmentProvided
+                  : patient.ifYestreatmentProvided
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYestreatmentProvided: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='Outcome?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesOutcome
+                  : patient.ifYesOutcome
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYesOutcome: event.target.value,
+                }));
+              }}
+            />
+          </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'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    strokeBloodclotting: event.target.value,
+                  }));
+                }}
+              >
+                <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}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesstrokeBloodclotting
+                  : patient.ifYesstrokeBloodclotting
+              }
+              disabled={
+                patient.strokeBloodclotting !== 'Yes' || type == 'display'
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYesstrokeBloodclotting: event.target.value,
+                }));
+              }}
+            />
+          </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' }}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.dizzinessFetigue
+                    : patient.dizzinessFetigue
+                }
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    dizzinessFetigue: event.target.value,
+                  }));
+                }}
+              >
+                <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}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              disabled={patient.dizzinessFetigue !== 'Yes'}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifyesdizzinessFetigue
+                  : patient.ifyesdizzinessFetigue
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifyesdizzinessFetigue: event.target.value,
+                }));
+              }}
+            />
+          </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' }}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.antiColligent
+                    : patient.antiColligent
+                }
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    antiColligent: event.target.value,
+                  }));
+                }}
+              >
+                <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'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you ever had any major illness, injuries, hospitalization
+                or surgeries?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.injuriesHospitalization
+                    : patient.injuriesHospitalization
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    injuriesHospitalization: event.target.value,
+                  }));
+                }}
+              >
+                <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 }}>
+            <Table
+              handleFormSection5Data={handleFormSection5Data}
+              patientDataDiplay={patientDataDiplay}
+              type={type}
+            />
+          </Grid>
+
+          <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>
+            <TextField
+              multiline
+              variant='outlined'
+              label=''
+              name='treatmentGoal'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.supplementsOrDrugs
+                  : patient.supplementsOrDrugs
+              }
+              disabled={type == 'display'}
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  supplementsOrDrugs: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+        </Grid>
+      </form>
+    </>
+  );
 }
-
-
-export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
-
-    const [patient, setPatient] = React.useState<Patient>({
-        generalHealth: '',
-        presentProblemBefore: '',
-        ifYespresentProblemBefore:'',
-        ifYestreatmentProvided:'',
-        ifYesOutcome:'',
-        strokeBloodclotting: '',
-        ifYesstrokeBloodclotting: '',
-        dizzinessFetigue: '',
-        ifyesdizzinessFetigue:'',
-        antiColligent: '',
-        injuriesHospitalization: '',
-        supplementsOrDrugs:''
-      });
-
-      useEffect(()=>{
-        handleFormSection5Data(
-            patient.generalHealth,
-            patient.presentProblemBefore,
-            patient.ifYespresentProblemBefore,
-            patient.ifYestreatmentProvided,
-            patient.ifYesOutcome,
-            patient.strokeBloodclotting,
-            patient.ifYesstrokeBloodclotting,
-            patient.dizzinessFetigue,
-            patient.ifyesdizzinessFetigue,
-            patient.antiColligent,
-            patient.injuriesHospitalization,
-            patient.supplementsOrDrugs,
-        )
-      },[patient])
-
-    return(
-        <>
-        <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"
-                        defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            generalHealth: event.target.value,
-                          }));
-                        }}
-                      >
-                        <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'>
-                <FormControl>
-                    <FormLabel>Have you experienced your present problem before?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            presentProblemBefore: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    ifYespresentProblemBefore: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            <Grid item 
-            xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
-                <TextField 
-                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}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    ifYestreatmentProvided: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            <Grid item 
-            xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="Outcome?" 
-                name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    ifYesOutcome: event.target.value,
-                  }));
-                }}
-                />
-            </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"
-                        defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
-                        value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            strokeBloodclotting: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
-                disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    ifYesstrokeBloodclotting: event.target.value,
-                  }));
-                }}
-                />
-            </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'}}
-                        defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            dizzinessFetigue: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={patient.dizzinessFetigue!=='Yes'}
-                value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    ifyesdizzinessFetigue: event.target.value,
-                  }));
-                }}
-                />
-            </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'}}
-                        defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            antiColligent: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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'>
-                <FormControl>
-                    <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'}}
-                        onChange={(event) => {
-                          setPatient((prevValues) => ({
-                            ...prevValues,
-                            injuriesHospitalization: event.target.value,
-                          }));
-                        }}
-                        >
-                        <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}} >
-                <Table 
-                handleFormSection5Data={handleFormSection5Data}
-                patientDataDiplay={patientDataDiplay}
-                type={type}/>
-          </Grid>
-
-          <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>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='treatmentGoal'
-                defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
-                disabled={type=='display'}
-                onChange={(event) => {
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    supplementsOrDrugs: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            
-      </Grid>
-    </form>
-        </>
-    )
-}

src/Components/PatientForm/PatientForm.tsx

@@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Footer from '../Footer';
 import Header from '../Header';
 import {
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -33,6 +34,8 @@ import OtherDetails8 from './OtherDetails8';
 import PatientImageMarker from '../ImageMarker/PatientImageMarker';
 import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
 import AlertDialog from '../Helper/AlertDialogBox';
+import SignatureComponent from '../Helper/SignatureComponent';
+import { Link, useLocation  } from 'react-router-dom';
 
 const Accordion = styled((props: AccordionProps) => (
   <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -78,7 +81,7 @@ export default function PatientForm({ type }: Props) {
   const [alertProps, setAlertProps] = React.useState<any>({});
   const [expanded, setExpanded] = React.useState<string | false>('panel1');
   const [isChecked, setIsChecked] = React.useState(false);
-  const [signature, setSignature] = React.useState('');
+  const [signature, setSignature] = React.useState<any>();
   const [section1Data, setSection1Data] = React.useState<any>({});
   const [section2Data, setSection2Data] = React.useState<any>({});
   const [section3Data, setSection3Data] = React.useState<any>({});
@@ -88,6 +91,7 @@ export default function PatientForm({ type }: Props) {
   const [section7Data, setSection7Data] = React.useState<any>({});
   const [section8Data, setSection8Data] = React.useState<any>({});
   const [allPatientData, setAllPatientData] = React.useState<any>([]);
+  const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState<boolean>(false)
 
   const handleFormSection1Data = (
     fullName?: string | undefined,
@@ -347,6 +351,7 @@ export default function PatientForm({ type }: Props) {
       recreationalActivities: section7Data,
       otherDetails: section8Data,
       injuryPainDetails: saved.entries,
+      signature: signature,
     };
 
     // Create a copy of the existing data array and push the new patient data
@@ -370,6 +375,13 @@ export default function PatientForm({ type }: Props) {
       section1Data.mailingAddress !== ''
     ) {
       TextFile();
+      setPatientDetailsButtonFlag(true)
+      setAlertProps({
+        open: true,
+        severity: 'success',
+        message: 'The patient details have been submitted!',
+        duration: 5000,
+      });
     } else {
       setAlertProps({
         open: true,
@@ -410,8 +422,6 @@ export default function PatientForm({ type }: Props) {
       JSON.parse(localStorage.getItem('patientData'))
     : [];
 
-  console.log('dfsdfdsf', patientData);
-
   return (
     <>
       {alertProps && alertProps.open && (
@@ -425,7 +435,7 @@ export default function PatientForm({ type }: Props) {
       )}
       <Paper elevation={0} className='app-screen-constants'>
         <Header />
-        <Paper elevation={0} sx={{ margin: 4, minHeight: 550 }}>
+        <Paper elevation={0} sx={{ margin: '2%', minHeight: 550 }}>
           {/* <form onSubmit={handleSubmit}> */}
           <Typography sx={{ fontSize: 20 }} gutterBottom>
             Confidential Patient Information
@@ -436,7 +446,7 @@ export default function PatientForm({ type }: Props) {
               onChange={handleExpandChange('panel1')}
             >
               <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
+                // expandIcon={<ExpandMoreIcon />}
                 aria-controls='panel1a-content'
                 id='panel1a-header'
               >
@@ -633,6 +643,7 @@ export default function PatientForm({ type }: Props) {
                 <FormGroup sx={{ marginTop: 3 }}>
                   <FormControlLabel
                     required
+                    disabled={type == 'display'}
                     control={
                       <Checkbox
                         checked={type === 'display' ? true : isChecked}
@@ -644,32 +655,106 @@ export default function PatientForm({ type }: Props) {
                 </FormGroup>
               </Grid>
 
-              <Grid item xs={6} className='collapsable-form-style'>
-                <TextField
-                  disabled={type == 'display'}
-                  variant='outlined'
-                  label='SIGNATURE'
-                  name='treatmentGoal'
-                  placeholder='Please type your name'
-                  onChange={(event) => {
-                    setSignature(event.target.value);
-                  }}
-                />
+              <Grid item xs={12}>
+                <Grid container spacing={2} flexDirection={'row'}>
+                  {type !== 'display' ? (
+                    <>
+
+                    <Grid item className='collapsable-form-style'>
+                      <FormLabel sx={{marginLeft:'10px'}}>  Signature:</FormLabel>
+                      <SignatureComponent signature={signature} setSignature={setSignature} />
+                    </Grid>
+
+                      <Grid item>
+                        <FormLabel sx={{ margin: 0, padding: 0 }}>
+                          Please verify your signature here:
+                        </FormLabel>
+                        <Box
+                          sx={{
+                            border: '1px solid black',
+                            borderRadius: 2,
+                            height: '110px',
+                            width: '250px',
+                          }}
+                        >
+                          <img
+                            src={signature}
+                            style={{ height: '110px', width: '250px' }}
+                          />
+                        </Box>
+                      </Grid>
+                    </>
+                  ) : (
+                    <Grid item>
+                      <FormLabel sx={{ margin: 0, padding: 0 }}>
+                        Your signature:
+                      </FormLabel>
+                      <Box
+                        sx={{
+                          border: '1px solid black',
+                          borderRadius: 2,
+                          height: '110px',
+                          width: '250px',
+                        }}
+                      >
+                        <img
+                          src={patientData.signature}
+                          style={{ height: '110px', width: '250px' }}
+                        />
+                      </Box>
+                    </Grid>
+                  )}
+                </Grid>
               </Grid>
             </Grid>
-            <Grid>
-              <Button
-                // type="submit"
-                variant='contained'
-                color='primary'
-                sx={{ margin: 5, left: '40%', width: '200px' }}
-                disabled={
-                  isChecked == false || signature == '' || type == 'display'
-                }
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
+            <Grid container flexDirection={'row-reverse'}>
+              {patientDetailsButtonFlag && type!=='display'?
+            <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  onClick={(e)=>{
+                    
+                  }}
+                  component={Link}
+                  to='/view-details'
+                >
+                  View Patient Details
+                </Button>
+              </Grid>:null}
+
+              {type=='display'?
+            <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  onClick={(e)=>{
+                    
+                  }}
+                  component={Link}
+                  to='/'
+                >
+                  New Patient Form
+                </Button>
+              </Grid>:null}
+
+              <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  disabled={
+                    isChecked == false ||
+                    signature == undefined ||
+                    type == 'display'
+                  }
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </Button>
+              </Grid>
             </Grid>
           </Grid>
           {/* </form> */}

src/Components/PatientForm/PersonalSection1.tsx

@@ -109,7 +109,7 @@ export default function PersonalSection({
             name='fullName'
             placeholder='Please enter your name'
             value={
-              type == 'display' ? patientDataDiplay.fullName : patient.fullName
+              type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
             }
             disabled={type == 'display'}
             onChange={(e) => {
@@ -147,49 +147,48 @@ export default function PersonalSection({
           className='collapsable-form-style'
         >
           <TextField
-              required
-              variant='outlined'
-              label='Phone Number'
-              name='cellPhone'
-              type='number'
-              placeholder='Please enter your cell Phone number'
-              value={
-                type == 'display'
-                  ? patientDataDiplay.cellPhone
-                  : patient.cellPhone
+            required
+            variant='outlined'
+            label='Phone Number'
+            name='cellPhone'
+            type='number'
+            placeholder='Please enter your cell Phone number'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.cellPhone
+                : patient.cellPhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              let value = e.target.value;
+              if (value[0] === '0') {
+                value = value.slice(1);
               }
-              disabled={type == 'display'}
-              onChange={(e) => {
-                let value = e.target.value;
-                if (value[0] === '0') {
-                  value = value.slice(1);
-                }
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                cellPhone: value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\d{10}$/.test(e.target.value)) {
                 setPatient((prevValues: any) => ({
                   ...prevValues,
-                  cellPhone: value,
+                  cellPhoneError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: false,
                 }));
-              }}
-              onBlur={(e) => {
-                if (!/^\d{10}$/.test(e.target.value)) {
-                  setPatient((prevValues: any) => ({
-                    ...prevValues,
-                    cellPhoneError: true,
-                  }));
-                } else {
-                  setPatient((prevValues: any) => ({
-                    ...prevValues,
-                    cellPhoneError: false,
-                  }));
-                }
-              }}
-              error={patient.cellPhoneError}
-              helperText={
-                patient.cellPhoneError
-                  ? 'Please enter a valid 10-digit phone number'
-                  : ''
               }
-            />
-
+            }}
+            error={patient.cellPhoneError}
+            helperText={
+              patient.cellPhoneError
+                ? 'Please enter a valid 10-digit phone number'
+                : ''
+            }
+          />
         </Grid>
 
         <Grid
@@ -209,7 +208,7 @@ export default function PersonalSection({
             placeholder='Please enter your home phone'
             value={
               type == 'display'
-                ? patientDataDiplay.homePhone
+                ? patientDataDiplay && patientDataDiplay.homePhone
                 : patient.homePhone
             }
             disabled={type == 'display'}
@@ -239,7 +238,7 @@ export default function PersonalSection({
             label='Email'
             name='email'
             placeholder='Please enter your email'
-            value={type == 'display' ? patientDataDiplay.email : patient.email}
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -282,7 +281,7 @@ export default function PersonalSection({
             name='age'
             type='number'
             placeholder='Please enter your age'
-            value={type == 'display' ? patientDataDiplay.age : patient.age}
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -323,7 +322,7 @@ export default function PersonalSection({
                 label='Date of Birth'
                 value={
                   type == 'display'
-                    ? patientDataDiplay.dateOfBirth
+                    ? patientDataDiplay && patientDataDiplay.dateOfBirth
                     : birthDateValue
                 }
                 disabled={type == 'display'}
@@ -353,7 +352,7 @@ export default function PersonalSection({
             name='socialSecurityNumber'
             value={
               type == 'display'
-                ? patientDataDiplay.socialSecurityNumber
+                ? patientDataDiplay && patientDataDiplay.socialSecurityNumber
                 : patient.socialSecurityNumber
             }
             disabled={type == 'display'}
@@ -385,7 +384,7 @@ export default function PersonalSection({
             name='mailingAddress'
             value={
               type == 'display'
-                ? patientDataDiplay.mailingAddress
+                ? patientDataDiplay && patientDataDiplay.mailingAddress
                 : patient.mailingAddress
             }
             disabled={type == 'display'}
@@ -430,7 +429,7 @@ export default function PersonalSection({
             variant='outlined'
             label='State'
             name='state'
-            value={type == 'display' ? patientDataDiplay.state : patient.state}
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -454,7 +453,7 @@ export default function PersonalSection({
             variant='outlined'
             label='City'
             name='city'
-            value={type == 'display' ? patientDataDiplay.city : patient.city}
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -479,7 +478,7 @@ export default function PersonalSection({
             label='Zip Code'
             name='zipCode'
             value={
-              type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
+              type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
             }
             disabled={type == 'display'}
             onChange={(e) => {
@@ -508,7 +507,7 @@ export default function PersonalSection({
             <RadioGroup
               aria-labelledby='demo-radio-buttons-group-label'
               defaultValue={
-                type == 'display' ? patientDataDiplay.gender : patient.gender
+                type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
               }
               name='radio-buttons-group'
               onChange={(e) => {

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -103,7 +103,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 multiline
                 variant="outlined"
                 label="" 
-                value={type=='display'?patientDataDiplay.hobbies:patient.hobbies}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies}
                 disabled={type=='display'}
                 onChange={(event:any) => {
                   setPatient((prevValues) => ({
@@ -119,7 +119,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <FormLabel>Your education level:</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.educationLevel:patient.educationLevel}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.educationLevel:patient.educationLevel}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -146,7 +146,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.excercise:patient.excercise}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.excercise:patient.excercise}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -170,7 +170,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 variant="outlined"
                 label="Times per week?" 
                 name='treatmentGoal'
-                value={type=='display'?patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -190,7 +190,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.tobacco:patient.tobacco}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.tobacco:patient.tobacco}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -211,7 +211,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.tobacco!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
                 variant="outlined"
                 label="Packs/Cans per day(If you have quit, when did you quit?)" 
                 name='treatmentGoal'
@@ -234,7 +234,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.alcohol:patient.alcohol}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.alcohol:patient.alcohol}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -255,7 +255,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.alcohol!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
                 variant="outlined"
                 label="How many drinks per week?" 
                 name='treatmentGoal'
@@ -278,7 +278,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.healthyDiet:patient.healthyDiet}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.healthyDiet:patient.healthyDiet}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -299,7 +299,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.healthyDiet!=='No'||type=='display'}
-                value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
@@ -322,7 +322,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.sleep:patient.sleep}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -343,7 +343,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.sleep!=='No'||type=='display'}
-                value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.sleepExplanation:patient.sleepExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
@@ -366,7 +366,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -387,7 +387,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.workSchool!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
@@ -410,7 +410,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.familyLife:patient.familyLife}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.familyLife:patient.familyLife}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -431,7 +431,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.familyLife!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
@@ -454,7 +454,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay.drugs:patient.drugs}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.drugs:patient.drugs}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -475,7 +475,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.drugs!=='Yes'||type=='display'}
-                value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.drugsExplanation:patient.drugsExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'