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 {
+/* .collapsable-form-style .MuiInputBase-root {
-    width: 300px !important;
+    margin:3%;
-    margin: 5%;
     height: 50px
 }
 
 .collapsable-form-style-form7 .MuiInputBase-root {
-    width: 350px !important;
     margin: 3%;
     height: 50px
 }
 
 .collapsable-form-style-multiline .MuiInputBase-root {
-    width: 350px !important;
     margin: 5%;
     min-height: 100px
-}
+} */
-.collapsable-form-style-multiline label {
+/* .collapsable-form-style-multiline label {
     padding: 15px;
-}
+} */
 
-.collapsable-form-style label {
+/* .collapsable-form-style label {
     padding: 15px;
-}
+} */
 
-.collapsable-form-style-form7 label {
+/* .collapsable-form-style-form7 label {
     padding: 13px;
-}
+} */
 
 .collapsable-form-style-radioButtons{
     width: 300px !important;
@@ -41,7 +38,6 @@
 }
 
 .collapsable-form-style-radioButtons-fullwidth{
-    /* width: 300px !important; */
     margin: 5%;
     padding-top: 12px;
     padding-left: 16px;
@@ -58,3 +54,32 @@
 .addNew-form-table-style label {
     padding: 0px;
 }
+.MuiFormControl-root {
+    width: 95% !important;
+}
+
+.MuiGrid-root .MuiTextField-root {
+    margin-top: 3%;
+    margin-bottom: 3%;
+}
+
+/* .MuiFormControl-root{
+    width: 90% !important;
+    height: 50px !important;
+    margin-bottom: 1% !important;
+}
+
+.MuiTextField-root {
+    margin-top: 3% !important;
+    margin-bottom: 5% !important;
+}
+
+.collapsable-form-style-multiline label {
+    padding: 15px;
+}
+
+.collapsable-form-style-radioButtons-fullwidth {
+    margin: 5%;
+    padding-top: 12px;
+    padding-left: 16px;
+} */

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={
+type Props = {
-  handleFormSection5Data:(
+  handleFormSection5Data: (
-    generalHealth: string|undefined,
+    generalHealth: string | undefined,
-    presentProblemBefore: string|undefined,
+    presentProblemBefore: string | undefined,
-    ifYespresentProblemBefore:string|undefined,
+    ifYespresentProblemBefore: string | undefined,
-    ifYestreatmentProvided: string|undefined,
+    ifYestreatmentProvided: string | undefined,
-    ifYesOutcome: string|undefined,
+    ifYesOutcome: string | undefined,
-    strokeBloodclotting: string|undefined,
+    strokeBloodclotting: string | undefined,
-    ifYesstrokeBloodclotting: string|undefined,
+    ifYesstrokeBloodclotting: string | undefined,
-    dizzinessFetigue: string|undefined,
+    dizzinessFetigue: string | undefined,
-    ifyesdizzinessFetigue: string|undefined,
+    ifyesdizzinessFetigue: string | undefined,
-    antiColligent: string|undefined,
+    antiColligent: string | undefined,
-    injuriesHospitalization: string|undefined,
+    injuriesHospitalization: string | undefined,
-    supplementsOrDrugs: string|undefined,
+    supplementsOrDrugs: string | undefined
-  )=> void
+  ) => void;
-  patientDataDiplay:any;
+  patientDataDiplay: any;
-  type:string;
+  type: string;
-
+};
-}
-
-function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
 
+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 deleteIllnessData = (idToDelete: number) => {
-    const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
+    const updatedIllnessData = illnessData.filter(
+      (item) => item.id !== idToDelete
+    );
     setIllnessData(updatedIllnessData);
   };
 
-
   const handleAddRow = () => {
-    if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){
+    if (
-
+      illnessFromData.date != '' &&
-      const newId = Math.max(...illnessData.map(item => item.id)) + 1;
+      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>
+      <FormLabel>If yes, Please enter the details below:</FormLabel>
-    {type!=="display"?
+      <br></br>
+      {type !== 'display' ? (
         <FormControl>
-      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
+          <Grid container spacing={1.5}>
-        <Grid item xs={2} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
+                variant='outlined'
-                label="Date" 
+                label='Date'
                 value={illnessFromData.date}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     date: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={3.7} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
+                variant='outlined'
-                label="Injury/Illness/Surgeries" 
+                label='Injury/Illness/Surgeries'
                 value={illnessFromData.illness}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     illness: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={3.5} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
+                variant='outlined'
-                label="Treatment" 
+                label='Treatment'
                 value={illnessFromData.treatment}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     treatment: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={2} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
+                variant='outlined'
-                label="Results" 
+                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'>
+            <Grid
-          <Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
+              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'>
-      <TableContainer sx={{width:800}} className='illness-table-style'>
+        <Table aria-label='simple table'>
-        <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}
+                  {type !== 'display' ? (
-                </TableCell>
+                    <Button
-                <TableCell align='center'> 
+                      sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
-                  {row.illness}
+                      onClick={(e) => {
-                </TableCell>
+                        deleteIllnessData(row.id);
-                <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>
-                    :""}
+                  ) : (
+                    ''
+                  )}
                 </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>
+      <span className='header'>
-      {entries && entries.length > 0 &&
+        *** 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,17 +38,23 @@ const PatientImageMarker = (props: Props) => {
       'entry',
       JSON.stringify({ markers: markers, entries: entries })
     );
-  }
+  };
 
   useEffect(() => {
-    if (action.type === 'add')
+    if (action.type === 'add') {
-      setEntries([...entries, { index: entries.length + 1, severity: 5 }]);
+      const ind =
-    else
+        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]);
 
+  useEffect(() => {
+    onSave();
+  }, [entries]);
+
   return (
     <div className='image-marker-div'>
       <div className='entry-div'>
@@ -67,7 +73,7 @@ const PatientImageMarker = (props: Props) => {
         />
       </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,26 +1,38 @@
-import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import {
-import { useFormik } from "formik";
+  Button,
-import * as yup from "yup";
+  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,
+  maritalStatus: string | undefined;
-    numberOfChildren: string | undefined,
+  numberOfChildren: string | undefined;
-    occupation: string | undefined,
+  occupation: string | undefined;
-    hoursPerWeek: number | string | undefined,
+  hoursPerWeek: number | string | undefined;
-    employer: string | undefined,
+  employer: string | undefined;
-    businessPhone: string | undefined,
+  businessPhone: string | undefined;
-    spouseName: string | undefined,
+  spouseName: string | undefined;
-    spouseEmployer: string | undefined,
+  spouseEmployer: string | undefined;
-    spouseBusinessPhone: string | undefined,
+  spouseBusinessPhone: string | undefined;
-    emergencyContact: string | undefined,
+  emergencyContact: string | undefined;
-    relationship: string | undefined,
+  relationship: string | undefined;
-    spousePhone: string | undefined,
+  spousePhone: string | undefined;
 }
 
 type Props = {
-    handleFormSection2Data:(
+  handleFormSection2Data: (
     maritalStatus: string | undefined,
     numberOfChildren: string | undefined,
     occupation: string | undefined,
@@ -32,30 +44,33 @@ type Props = {
     spouseBusinessPhone: string | undefined,
     emergencyContact: string | undefined,
     relationship: string | undefined,
-        spousePhone: string | undefined,
+    spousePhone: string | undefined
-    )=> void
+  ) => void;
-    patientDataDiplay:any;
+  patientDataDiplay: any;
-    type:string;
+  type: string;
-  }
+};
 
-
+export default function FamilyFormSection({
-export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
+  handleFormSection2Data,
+  patientDataDiplay,
+  type,
+}: Props) {
   const [patient, setPatient] = React.useState<Patient>({
-        maritalStatus:'',
+    maritalStatus: '',
-        numberOfChildren:'',
+    numberOfChildren: '',
-        occupation:'',
+    occupation: '',
-        hoursPerWeek:'',
+    hoursPerWeek: '',
-        employer:'',
+    employer: '',
-        businessPhone:'',
+    businessPhone: '',
-        spouseName:'',
+    spouseName: '',
-        spouseEmployer:'',
+    spouseEmployer: '',
-        spouseBusinessPhone:'',
+    spouseBusinessPhone: '',
-        emergencyContact:'',
+    emergencyContact: '',
-        relationship:'',
+    relationship: '',
-        spousePhone:''
+    spousePhone: '',
   });
 
-      useEffect(()=>{
+  useEffect(() => {
     handleFormSection2Data(
       patient.maritalStatus,
       patient.numberOfChildren,
@@ -68,110 +83,153 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
       patient.spouseBusinessPhone,
       patient.emergencyContact,
       patient.relationship,
-            patient.spousePhone,
+      patient.spousePhone
-        )
+    );
-      },[patient])
+  }, [patient]);
 
-    return(
+  return (
     <>
-        <Grid container direction="row">
+      <Grid container direction='row'>
         <Grid item xs={8} className='collapsable-form-style-radioButtons'>
           <FormControl>
             <FormLabel>Marital Status</FormLabel>
             <RadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
+              aria-labelledby='demo-radio-buttons-group-label'
-                    name="maritalStatus"
+              name='maritalStatus'
-                    defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus}
+              defaultValue={
-                    sx={{display:'flex', flexDirection:'row'}}
+                type == 'display'
-                    onChange={(e)=>{
+                  ? patientDataDiplay && patientDataDiplay.maritalStatus
-                        setPatient((prevValues:any) => ({
+                  : 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
-                    <FormControlLabel value="single" control={<Radio />} label="Single" disabled={type=='display'}/>
+                value='married'
-                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" disabled={type=='display'}/>
+                control={<Radio />}
-                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" disabled={type=='display'}/>
+                label='Married'
-                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" disabled={type=='display'}/>
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='single'
+                control={<Radio />}
+                label='Single'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='widowed'
+                control={<Radio />}
+                label='Widowed'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='seperated'
+                control={<Radio />}
+                label='Seperated'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='divorced'
+                control={<Radio />}
+                label='Divorced'
+                disabled={type == 'display'}
+              />
             </RadioGroup>
-                
           </FormControl>
         </Grid>
 
         <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                
+            variant='outlined'
-                variant="outlined" 
+            type='number'
-                type="number"
+            label='Number of Children/Ages'
-                label="Number of Children/Ages" 
             className='collapsable-form-style'
             name='numberOfChildren'
-                onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 numberOfChildren: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.numberOfChildren
+                : patient.numberOfChildren
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-            className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
             // required
-                variant="outlined" 
+            variant='outlined'
-                label="Occupation" 
+            label='Occupation'
             className='collapsable-form-style'
             name='occupation'
-                onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 occupation: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.occupation:patient.occupation}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.occupation
+                : patient.occupation
+            }
+            disabled={type == 'display'}
           />
-               
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                 variant="outlined" 
+            variant='outlined'
-                 label="Hours/Week" 
+            label='Hours/Week'
-                 type="number" 
+            type='number'
             className='collapsable-form-style'
             name='hoursPerWeek'
-                 onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 hoursPerWeek: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.hoursPerWeek
+                : patient.hoursPerWeek
+            }
+            disabled={type == 'display'}
           />
-                 
         </Grid>
         <Grid
           xs={12}
@@ -179,197 +237,245 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                variant="outlined" 
+            variant='outlined'
-                label="Employer" 
+            label='Employer'
             className='collapsable-form-style'
             name='employer'
-                onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 employer: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.employer:patient.employer}
+            value={
-                disabled={type=='display'}
+              type == 'display' ? patientDataDiplay && patientDataDiplay.employer : patient.employer
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                variant="outlined" 
+            variant='outlined'
-                label="Business Phone" 
+            label='Business Phone'
-                type="number"
+            type='number'
             className='collapsable-form-style'
             name='businessPhone'
-                onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 businessPhone: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.businessPhone
+                : patient.businessPhone
+            }
+            disabled={type == 'display'}
           />
         </Grid>
 
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '></Grid>
+          className='collapsable-form-style '
+        ></Grid>
 
         <Grid item xs={12} className='collapsable-form-style '>
-                <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
+          <FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
         </Grid>
 
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
-            sm={12} className='collapsable-form-style '>
+          sm={12}
+          className='collapsable-form-style '
+        >
           <TextField
-                 variant="outlined" 
+            variant='outlined'
             label="Spouse's Name"
             className='collapsable-form-style'
             name='spouseName'
-                 onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 spouseName: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseName
+                : patient.spouseName
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                 variant="outlined" 
+            variant='outlined'
             label="Spouse's Employer"
             className='collapsable-form-style'
             name='spouseEmployer'
-                 onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 spouseEmployer: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseEmployer
+                : patient.spouseEmployer
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                  variant="outlined" 
+            variant='outlined'
-                  label="Business Phone" 
+            label='Business Phone'
-                  type="number"
+            type='number'
             className='collapsable-form-style'
             name='spouseBusinessPhone'
-                  onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 spouseBusinessPhone: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone}
+            value={
-                disabled={type=='display'}
+              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>
+          <FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
         </Grid>
 
-
+        <Grid
-            <Grid item 
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                   variant="outlined" 
+            variant='outlined'
-                   label="Emergency Contact" 
+            label='Emergency Contact'
             className='collapsable-form-style'
             name='emergencyContact'
-                   onChange={(e)=>{
+            onChange={(e) => {
-                    setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 emergencyContact: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.emergencyContact
+                : patient.emergencyContact
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
           sm={12}
-             className='collapsable-form-style '>
+          className='collapsable-form-style '
+        >
           <TextField
-                    variant="outlined" 
+            variant='outlined'
-                    label="Relationship" 
+            label='Relationship'
             className='collapsable-form-style'
             name='relationship'
-                    onChange={(e)=>{
+            onChange={(e) => {
-                        setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 relationship: e.target.value,
               }));
             }}
-                    value={type=='display'?patientDataDiplay.relationship:patient.relationship}
+            value={
-                    disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.relationship
+                : patient.relationship
+            }
+            disabled={type == 'display'}
           />
         </Grid>
-            <Grid item 
+        <Grid
+          item
           xs={12}
           xl={3}
           lg={4}
           md={6}
-            sm={12} className='collapsable-form-style '>
+          sm={12}
+          className='collapsable-form-style '
+        >
           <TextField
-                     variant="outlined" 
+            variant='outlined'
-                     type="number"
+            type='number'
-                     label="Phone" 
+            label='Phone'
             className='collapsable-form-style'
             name='spousePhone'
-                     onChange={(e)=>{
+            onChange={(e) => {
-                        setPatient((prevValues:any) => ({
+              setPatient((prevValues: any) => ({
                 ...prevValues,
                 spousePhone: e.target.value,
               }));
             }}
-                    value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
+            value={
-                    disabled={type=='display'}
+              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,81 +1,102 @@
-import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
+import {
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+  Grid,
-import React, { useEffect } from "react";
+  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;
+  pillow: string;
-    orthotics:string;
+  orthotics: string;
   brestExam: any;
-    pregnancy:string;
+  pregnancy: string;
   menstralCycle: any;
-  }
+}
 
-  type Props = {
+type Props = {
-    handleFormSection8Data:(
+  handleFormSection8Data: (
-      familyHistory: string|undefined,
+    familyHistory: string | undefined,
-      sleep: string|undefined,
+    sleep: string | undefined,
-      pillow:string|undefined,
+    pillow: string | undefined,
-      orthotics:string|undefined,
+    orthotics: string | undefined,
     brestExam: any,
-      pregnancy:string|undefined,
+    pregnancy: string | undefined,
-      menstralCycle: any,
+    menstralCycle: any
-    )=> void
+  ) => void;
-    patientDataDiplay:any;
+  patientDataDiplay: any;
-    type:string;
+  type: string;
-  }
+};
-
-export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){
 
+export default function OtherDetails8({
+  handleFormSection8Data,
+  patientDataDiplay,
+  type,
+}: Props) {
   const [patient, setPatient] = React.useState<Patient>({
     familyHistory: '',
     sleep: '',
-        pillow:'',
+    pillow: '',
-        orthotics:'',
+    orthotics: '',
     brestExam: dayjs('2022-04-17'),
-        pregnancy:'',
+    pregnancy: '',
     menstralCycle: dayjs('2022-04-17'),
   });
 
-    useEffect(()=>{
+  useEffect(() => {
     handleFormSection8Data(
       patient.familyHistory,
       patient.sleep,
       patient.pillow,
       patient.orthotics,
-        patient.brestExam=dayjs(patient.brestExam),
+      (patient.brestExam = dayjs(patient.brestExam)),
       patient.pregnancy,
-        patient.menstralCycle=dayjs(patient.menstralCycle)
+      (patient.menstralCycle = dayjs(patient.menstralCycle))
-      )
+    );
-    },[patient])
+  }, [patient]);
 
-    const formatDate = (inputDate:any) => {
+  const formatDate = (inputDate: any) => {
     const date = new Date(inputDate);
     const year = date.getUTCFullYear();
     const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-      const day = String(date.getUTCDate()+1).padStart(2, '0');
+    const day = String(date.getUTCDate() + 1).padStart(2, '0');
 
     return `${year}-${month}-${day}`;
   };
 
-  
+  return (
-
-    
-    return(
     <>
-        <Grid container direction="row">
+      <Grid container direction='row'>
-        <Grid item xs={12} className='collapsable-form-style-multiline'>
+        <Grid
-          <FormLabel>Family history and health status:</FormLabel><br></br>
+          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"
+            variant='outlined'
-                label="" 
+            label=''
-                value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory}
+            value={
-                disabled={type=='display'}
+              type == 'display'
-                onChange={(event:any) => {
+                ? patientDataDiplay && patientDataDiplay.familyHistory
+                : patient.familyHistory
+            }
+            disabled={type == 'display'}
+            onChange={(event: any) => {
               setPatient((prevValues) => ({
                 ...prevValues,
                 familyHistory: event.target.value,
@@ -88,8 +109,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
           <FormControl>
             <FormLabel>How do you sleep?</FormLabel>
             <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
+              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,
@@ -97,9 +120,24 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
                 }));
               }}
             >
-                        <FormControlLabel disabled={type=='display'} value="Back" control={<Radio />} label="Back" />
+              <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="Side" control={<Radio />} label="Side" />
+                disabled={type == 'display'}
-                        <FormControlLabel disabled={type=='display'} value="Stomach" control={<Radio />} label="Stomach" />
+                value='Back'
+                control={<Radio />}
+                label='Back'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Side'
+                control={<Radio />}
+                label='Side'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Stomach'
+                control={<Radio />}
+                label='Stomach'
+              />
             </RadioGroup>
           </FormControl>
         </Grid>
@@ -108,8 +146,10 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
           <FormControl>
             <FormLabel>Do you use a pillow?</FormLabel>
             <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
+              sx={{ display: 'flex', flexDirection: 'row' }}
-                        defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow}
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.pillow : patient.pillow
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -117,8 +157,18 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
                 }));
               }}
             >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+              <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                disabled={type == 'display'}
+                value='Yes'
+                control={<Radio />}
+                label='Yes'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='No'
+                control={<Radio />}
+                label='No'
+              />
             </RadioGroup>
           </FormControl>
         </Grid>
@@ -127,8 +177,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
           <FormControl>
             <FormLabel>Do you wear orthotics or arch support?</FormLabel>
             <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
+              sx={{ display: 'flex', flexDirection: 'row' }}
-                        defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.orthotics
+                  : patient.orthotics
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -136,27 +190,52 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
                 }));
               }}
             >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+              <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                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'>
+        <Grid
-          <FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormLabel>Date of last gynecological and brest exam?</FormLabel>
+          <br></br>
           <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
               <DatePicker
-                    value={type=='display'?patientDataDiplay.brestExam:patient.brestExam}
+                value={
-                    disabled={type=='display'}
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.brestExam
+                    : patient.brestExam
+                }
+                disabled={type == 'display'}
                 onChange={(event) => {
-                      const formattedDate = formatDate(event)
+                  const formattedDate = formatDate(event);
                   setPatient((prevValues) => ({
                     ...prevValues,
                     brestExam: formattedDate,
                   }));
                 }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
               />
             </LocalizationProvider>
           </FormControl>
@@ -170,8 +249,12 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
           <FormControl>
             <FormLabel>Possible pregnancy?</FormLabel>
             <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
+              sx={{ display: 'flex', flexDirection: 'row' }}
-                        defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.pregnancy
+                  : patient.pregnancy
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -179,34 +262,57 @@ export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,
                 }));
               }}
             >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+              <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                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'>
+        <Grid
-            <FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormLabel>Date of last menstrual cycle?</FormLabel>
+          <br></br>
           <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
               <DatePicker
-                    value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle}
+                value={
-                    disabled={type=='display'}
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.menstralCycle
+                    : patient.menstralCycle
+                }
+                disabled={type == 'display'}
                 onChange={(event) => {
-                      const formattedDate = formatDate(event)
+                  const formattedDate = formatDate(event);
                   setPatient((prevValues) => ({
                     ...prevValues,
                     menstralCycle: formattedDate,
                   }));
                 }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
               />
             </LocalizationProvider>
           </FormControl>
         </Grid>
-
-       
       </Grid>
     </>
-    )
+  );
 }

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -1,12 +1,22 @@
 import * as React from 'react';
-import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  FormGroup,
+  Grid,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import path from 'path';
 import { useEffect } from 'react';
 
 interface Patient {
-    chiefComplaint:string;
+  chiefComplaint: string;
   painWorse: string[];
   painBetter: string[];
   painQuality: string[];
@@ -15,42 +25,45 @@ interface Patient {
   painDuration: string;
   currentTreatment: string;
   treatmentGoal: string;
-    selfTreatment:string;
+  selfTreatment: string;
-  }
+}
 
-  type Props = {
+type Props = {
-    handleFormSection4Data:(
+  handleFormSection4Data: (
-        chiefComplaint:string|undefined,
+    chiefComplaint: string | undefined,
     painWorse: any,
     painBetter: any,
     painQuality: any,
     painWorstTime: any,
     currentComplaintIssues: any,
-        painDuration: string|undefined,
+    painDuration: string | undefined,
-        currentTreatment: string|undefined,
+    currentTreatment: string | undefined,
-        treatmentGoal: string|undefined,
+    treatmentGoal: string | undefined,
-        selfTreatment:string|undefined,
+    selfTreatment: string | undefined
-    )=> void
+  ) => void;
-    patientDataDiplay:any;
+  patientDataDiplay: any;
-    type:string;
+  type: string;
-  }
+};
 
-
+export default function PainAnalysisSection4({
-export default function PainAnalysisSection4({handleFormSection4Data,patientDataDiplay,type}:Props){
+  handleFormSection4Data,
+  patientDataDiplay,
+  type,
+}: Props) {
   const [patient, setPatient] = React.useState<Patient>({
-        chiefComplaint:'',
+    chiefComplaint: '',
-        painWorse:[],
+    painWorse: [],
-        painBetter:[],
+    painBetter: [],
-        painQuality:[],
+    painQuality: [],
-        painWorstTime:[],
+    painWorstTime: [],
-        currentComplaintIssues:[],
+    currentComplaintIssues: [],
-        painDuration:'',
+    painDuration: '',
-        currentTreatment:'',
+    currentTreatment: '',
-        treatmentGoal:'',
+    treatmentGoal: '',
-        selfTreatment:'',
+    selfTreatment: '',
   });
 
-      useEffect(()=>{
+  useEffect(() => {
     handleFormSection4Data(
       patient.chiefComplaint,
       patient.painWorse,
@@ -61,11 +74,13 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
       patient.painDuration,
       patient.currentTreatment,
       patient.treatmentGoal,
-            patient.selfTreatment,
+      patient.selfTreatment
-        )
+    );
-      },[patient])
+  }, [patient]);
 
-      const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePainWorseChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const { name, checked } = event.target;
     setPatient((prevValues) => ({
       ...prevValues,
@@ -75,7 +90,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
     }));
   };
 
-      const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePainBetterChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const { name, checked } = event.target;
     setPatient((prevValues) => ({
       ...prevValues,
@@ -85,7 +102,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
     }));
   };
 
-      const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePainQualityChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const { name, checked } = event.target;
     setPatient((prevValues) => ({
       ...prevValues,
@@ -95,7 +114,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
     }));
   };
 
-      const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePainWorstTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const { name, checked } = event.target;
     setPatient((prevValues) => ({
       ...prevValues,
@@ -105,7 +126,9 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
     }));
   };
 
-      const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleCurrentComplaintIssuesTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const { name, checked } = event.target;
     setPatient((prevValues) => ({
       ...prevValues,
@@ -115,254 +138,450 @@ export default function PainAnalysisSection4({handleFormSection4Data,patientData
     }));
   };
 
-    return(
+  return (
     <>
       <Grid item xs={12} className='collapsable-form-style '>
-            <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
+        <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
       </Grid>
-        <Grid container direction="row">
+      <Grid container direction='row'>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+        <Grid
+          item
+          xs={12}
+          xl={10}
+          lg={10}
+          md={10}
+          sm={12}
+          className='collapsable-form-style-form7'
+        >
           <TextField
-                variant="outlined"
+            variant='outlined'
-                label="How did your Chief complaint start?(ex-fell on ice)" 
+            label='How did your Chief complaint start?(ex-fell on ice)'
             name='chiefComplaint'
-                onChange={(e)=>{
+            onChange={(e) => {
               setPatient((prevValues) => ({
                 ...prevValues,
                 chiefComplaint: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint}
+            value={
-                disabled={type=='display'}
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.chiefComplaint
+                : patient.chiefComplaint
+            }
+            disabled={type == 'display'}
           />
         </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
             <FormLabel>What makes your pain worse?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
+                control={
-                            label="Bending"
+                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
-                            disabled={type=='display'}
+                }
+                label='Bending'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
+                control={
-                            label="Standing"
+                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
-                            disabled={type=='display'}
+                }
+                label='Standing'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
+                control={
-                            label="Sitting"
+                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
-                            disabled={type=='display'}
+                }
+                label='Sitting'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
+                control={
-                            label="Walking"
+                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
-                            disabled={type=='display'}
+                }
+                label='Walking'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
+                control={
-                            label="Others"
+                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
-                            disabled={type=='display'}
+                }
+                label='Others'
+                disabled={type == 'display'}
               />
             </FormGroup>
-                   
           </FormControl>
         </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
             <FormLabel>What makes your pain better?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
+                control={
-                            label="laying down"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Standing"
+                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
-                            disabled={type=='display'}
+                }
+                label='Standing'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
+                control={
-                            label="Sitting"
+                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
-                            disabled={type=='display'}
+                }
+                label='Sitting'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
+                control={
-                            label="Walking"
+                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
-                            disabled={type=='display'}
+                }
+                label='Walking'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
+                control={
-                            label="Others"
+                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
-                            disabled={type=='display'}
+                }
+                label='Others'
+                disabled={type == 'display'}
               />
             </FormGroup>
           </FormControl>
         </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
             <FormLabel>What is the quality of your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                control={
-                            label="Sharp"
+                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
-                            disabled={type=='display'}
+                }
+                label='Sharp'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
+                control={
-                            label="Dull/Ache"
+                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
-                            disabled={type=='display'}
+                }
+                label='Dull/Ache'
+                disabled={type == 'display'}
               />
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
+                control={
-                            label="Throbbing"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Tingling/Numbness/Burning"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Others"
+                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
-                            disabled={type=='display'}
+                }
+                label='Others'
+                disabled={type == 'display'}
               />
             </FormGroup>
           </FormControl>
         </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
             <FormLabel>What is the worst time for your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
-                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
+                control={
-                            label="Morning"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="During day"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Evening"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Lying in bed"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Others"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
-                    <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
+            <FormLabel>
+              How much of the day do you experience your chief complaint?
+            </FormLabel>
             <RadioGroup
-                        name="painDuration"
+              name='painDuration'
-                        onChange={(e)=>{
+              onChange={(e) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
                   painDuration: e.target.value,
                 }));
               }}
-                        value={type=='display'?patientDataDiplay.painDuration:patient.painDuration}
+              value={
-                        sx={{display:'flex', flexDirection:'row'}}
+                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
-                        <FormControlLabel disabled={type=='display'} value="25-50%" control={<Radio />} label="25-50%" />
+                disabled={type == 'display'}
-                        <FormControlLabel disabled={type=='display'} value="50-75%" control={<Radio />} label="50-75%" />
+                value='0-25%'
-                        <FormControlLabel disabled={type=='display'} value="75-100%" control={<Radio />} label="75-100%" />
+                control={<Radio />}
+                label='0-25%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='25-50%'
+                control={<Radio />}
+                label='25-50%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='50-75%'
+                control={<Radio />}
+                label='50-75%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='75-100%'
+                control={<Radio />}
+                label='75-100%'
+              />
             </RadioGroup>
           </FormControl>
         </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
-                    <FormLabel>Has your current complaint caused any of the following?</FormLabel>
+            <FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
+              Has your current complaint caused any of the following?
+            </FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
-                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
+                control={
-                            label="Muscle weakness"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Bowel/Bladder problem"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Digestion"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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" />}
+                control={
-                            label="Cardiac/Respiratory"
+                  <Checkbox
-                            disabled={type=='display'}
+                    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'>
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
           <FormControl>
-                    <FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
+            <FormLabel>
+              Have you tried any self treatment (ex-ice, heat, excercise) or
+              taken any medication(over the counter or prescription)?
+            </FormLabel>
             <RadioGroup
-                        name="painDuration"
+              name='painDuration'
-                        onChange={(e)=>{
+              onChange={(e) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
                   selfTreatment: e.target.value,
                 }));
               }}
-                        value={type=='display'?patientDataDiplay.selfTreatment:patient.selfTreatment}
+              value={
-                        sx={{display:'flex', flexDirection:'row'}}
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.selfTreatment
+                  : patient.selfTreatment
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
             >
-                        <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
+              <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
+                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 }}> 
+        <Grid
-                <FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
+          item
+          xs={12}
+          className='collapsable-form-style'
+          sx={{ marginTop: 3 }}
+        >
+          <FormLabel sx={{ fontWeight: 600 }}>
+            Expected Treatment Result:
+          </FormLabel>
         </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+        <Grid
+          item
+          xs={12}
+          xl={10}
+          lg={10}
+          md={10}
+          sm={12}
+          className='collapsable-form-style-form7'
+        >
           <TextField
-                variant="outlined"
+            variant='outlined'
-                label="What is your goal from treatment?(ex-play golf without pain)" 
+            label='What is your goal from treatment?(ex-play golf without pain)'
             name='treatmentGoal'
-                onChange={(e)=>{
+            onChange={(e) => {
               setPatient((prevValues) => ({
                 ...prevValues,
                 treatmentGoal: e.target.value,
               }));
             }}
-                value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal}
+            value={
-                disabled={type=='display'}
+              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,43 +28,45 @@ interface Patient {
 }
 
 type Props = {
-  handleFormSection5Data:(
+  handleFormSection5Data: (
-    generalHealth: string|undefined,
+    generalHealth: string | undefined,
-    presentProblemBefore: string|undefined,
+    presentProblemBefore: string | undefined,
-    ifYespresentProblemBefore:string|undefined,
+    ifYespresentProblemBefore: string | undefined,
-    ifYestreatmentProvided: string|undefined,
+    ifYestreatmentProvided: string | undefined,
-    ifYesOutcome: string|undefined,
+    ifYesOutcome: string | undefined,
-    strokeBloodclotting: string|undefined,
+    strokeBloodclotting: string | undefined,
-    ifYesstrokeBloodclotting: string|undefined,
+    ifYesstrokeBloodclotting: string | undefined,
-    dizzinessFetigue: string|undefined,
+    dizzinessFetigue: string | undefined,
-    ifyesdizzinessFetigue: string|undefined,
+    ifyesdizzinessFetigue: string | undefined,
-    antiColligent: string|undefined,
+    antiColligent: string | undefined,
-    injuriesHospitalization: string|undefined,
+    injuriesHospitalization: string | undefined,
-    supplementsOrDrugs: string|undefined,
+    supplementsOrDrugs: string | undefined
-  )=> void
+  ) => void;
-  patientDataDiplay:any;
+  patientDataDiplay: any;
-  type:string;
+  type: string;
-}
+};
-
-
-export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
 
+export default function PastTreatment5({
+  handleFormSection5Data,
+  patientDataDiplay,
+  type,
+}: Props) {
   const [patient, setPatient] = React.useState<Patient>({
     generalHealth: '',
     presentProblemBefore: '',
-        ifYespresentProblemBefore:'',
+    ifYespresentProblemBefore: '',
-        ifYestreatmentProvided:'',
+    ifYestreatmentProvided: '',
-        ifYesOutcome:'',
+    ifYesOutcome: '',
     strokeBloodclotting: '',
     ifYesstrokeBloodclotting: '',
     dizzinessFetigue: '',
-        ifyesdizzinessFetigue:'',
+    ifyesdizzinessFetigue: '',
     antiColligent: '',
     injuriesHospitalization: '',
-        supplementsOrDrugs:''
+    supplementsOrDrugs: '',
   });
 
-      useEffect(()=>{
+  useEffect(() => {
     handleFormSection5Data(
       patient.generalHealth,
       patient.presentProblemBefore,
@@ -68,22 +79,29 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
       patient.ifyesdizzinessFetigue,
       patient.antiColligent,
       patient.injuriesHospitalization,
-            patient.supplementsOrDrugs,
+      patient.supplementsOrDrugs
-        )
+    );
-      },[patient])
+  }, [patient]);
 
-    return(
+  return (
     <>
       <form>
-      <Grid container direction="row">
+        <Grid container direction='row'>
-        
+          <Grid
-      <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Overall your General Healgth is:</FormLabel>
+              <FormLabel>Overall your General Health is:</FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
+                defaultValue={
-                        sx={{display:'flex', flexDirection:'row'}}
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.generalHealth
+                    : patient.generalHealth
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -91,22 +109,57 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" />
+                  disabled={type == 'display'}
-                        <FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" />
+                  value='Excellent'
-                        <FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" />
+                  control={<Radio />}
-                        <FormControlLabel disabled={type=='display'} value="Poor" control={<Radio />} label="Poor" />
+                  label='Excellent'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Very Good'
+                  control={<Radio />}
+                  label='Very Good'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Good'
+                  control={<Radio />}
+                  label='Good'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Fair'
+                  control={<Radio />}
+                  label='Fair'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Poor'
+                  control={<Radio />}
+                  label='Poor'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Have you experienced your present problem before?</FormLabel>
+              <FormLabel>
+                Have you experienced your present problem before?
+              </FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
+                defaultValue={
-                        sx={{display:'flex', flexDirection:'row'}}
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.presentProblemBefore
+                    : patient.presentProblemBefore
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -114,24 +167,38 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-        
+          <Grid
-          <Grid item 
+            item
             xs={12}
             xl={3}
             lg={4}
             md={6}
-          sm={12} className='collapsable-form-style-form7'>
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
             <TextField
-                variant="outlined"
+              variant='outlined'
-                label="If yes, when?" 
+              label='If yes, when?'
               name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -140,18 +207,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
               }}
             />
           </Grid>
-            <Grid item 
+          <Grid
+            item
             xs={12}
             xl={3}
             lg={4}
             md={6}
-          sm={12} className='collapsable-form-style-form7'>
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
             <TextField
-                variant="outlined"
+              variant='outlined'
-                label="Was treatment provided?If yes, by whom?" 
+              label='Was treatment provided?If yes, by whom?'
               name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
+              disabled={
-                value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYestreatmentProvided
+                  : patient.ifYestreatmentProvided
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -160,18 +236,27 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
               }}
             />
           </Grid>
-            <Grid item 
+          <Grid
+            item
             xs={12}
             xl={3}
             lg={4}
             md={6}
-          sm={12} className='collapsable-form-style-form7'>
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
             <TextField
-                variant="outlined"
+              variant='outlined'
-                label="Outcome?" 
+              label='Outcome?'
               name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
+              disabled={
-                value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesOutcome
+                  : patient.ifYesOutcome
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -181,15 +266,28 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
             />
           </Grid>
 
-
+          <Grid
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
+              <FormLabel>
+                Have you ever had a stroke or issues with blood clotting?
+              </FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
+                defaultValue={
-                        value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
+                  type == 'display'
-                        sx={{display:'flex', flexDirection:'row'}}
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -197,19 +295,43 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-          <Grid item xs={4} className='collapsable-form-style-form7'>
+          <Grid
+            item
+            xs={12}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
             <TextField
-                variant="outlined"
+              variant='outlined'
-                label="If yes, when?" 
+              label='If yes, when?'
               name='treatmentGoal'
-                value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
+              value={
-                disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesstrokeBloodclotting
+                  : patient.ifYesstrokeBloodclotting
+              }
+              disabled={
+                patient.strokeBloodclotting !== 'Yes' || type == 'display'
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -219,13 +341,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
             />
           </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
+              <FormLabel>
+                Have you recently experienced dizziness, unexplained fatigue,
+                weight loss or blood loss?
+              </FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        sx={{display:'flex', flexDirection:'row'}}
+                sx={{ display: 'flex', flexDirection: 'row' }}
-                        defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.dizzinessFetigue
+                    : patient.dizzinessFetigue
+                }
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -233,19 +366,41 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-          <Grid item xs={4} className='collapsable-form-style-form7'>
+          <Grid
+            item
+            xs={12}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
             <TextField
-                variant="outlined"
+              variant='outlined'
-                label="If yes, when?" 
+              label='If yes, when?'
               name='treatmentGoal'
-                disabled={patient.dizzinessFetigue!=='Yes'}
+              disabled={patient.dizzinessFetigue !== 'Yes'}
-                value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifyesdizzinessFetigue
+                  : patient.ifyesdizzinessFetigue
+              }
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -255,13 +410,24 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
             />
           </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
+              <FormLabel>
+                Are you currently taking anti-coagulant or blood thinning
+                medication?
+              </FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        sx={{display:'flex', flexDirection:'row'}}
+                sx={{ display: 'flex', flexDirection: 'row' }}
-                        defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.antiColligent
+                    : patient.antiColligent
+                }
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -269,19 +435,40 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
             <FormControl>
-                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
+              <FormLabel>
+                Have you ever had any major illness, injuries, hospitalization
+                or surgeries?
+              </FormLabel>
               <RadioGroup
-                        name="painDuration"
+                name='painDuration'
-                        defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
+                defaultValue={
-                        sx={{display:'flex', flexDirection:'row'}}
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.injuriesHospitalization
+                    : patient.injuriesHospitalization
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -289,32 +476,53 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                   }));
                 }}
               >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                <FormControlLabel
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
               </RadioGroup>
             </FormControl>
           </Grid>
 
-          <Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
+          <Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
             <Table
               handleFormSection5Data={handleFormSection5Data}
               patientDataDiplay={patientDataDiplay}
-                type={type}/>
+              type={type}
+            />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid
+            item
+            xs={12}
             xl={3}
             lg={4}
             md={6}
-          sm={12} className='collapsable-form-style-multiline'>
+            sm={12}
-          <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
+            className='collapsable-form-style-multiline'
+          >
+            <FormLabel>
+              Please list current supplements or drugs you may be taking:
+            </FormLabel>
             <TextField
               multiline
-                variant="outlined"
+              variant='outlined'
-                label="" 
+              label=''
               name='treatmentGoal'
-                defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
+              defaultValue={
-                disabled={type=='display'}
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.supplementsOrDrugs
+                  : patient.supplementsOrDrugs
+              }
+              disabled={type == 'display'}
               onChange={(event) => {
                 setPatient((prevValues) => ({
                   ...prevValues,
@@ -323,9 +531,8 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
               }}
             />
           </Grid>
-            
         </Grid>
       </form>
     </>
-    )
+  );
 }

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,27 +655,100 @@ export default function PatientForm({ type }: Props) {
                 </FormGroup>
               </Grid>
 
-              <Grid item xs={6} className='collapsable-form-style'>
+              <Grid item xs={12}>
-                <TextField
+                <Grid container spacing={2} flexDirection={'row'}>
-                  disabled={type == 'display'}
+                  {type !== 'display' ? (
-                  variant='outlined'
+                    <>
-                  label='SIGNATURE'
+
-                  name='treatmentGoal'
+                    <Grid item className='collapsable-form-style'>
-                  placeholder='Please type your name'
+                      <FormLabel sx={{marginLeft:'10px'}}>  Signature:</FormLabel>
-                  onChange={(event) => {
+                      <SignatureComponent signature={signature} setSignature={setSignature} />
-                    setSignature(event.target.value);
+                    </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>
+            <Grid container flexDirection={'row-reverse'}>
+              {patientDetailsButtonFlag && type!=='display'?
+            <Grid item>
                 <Button
-                // type="submit"
                   variant='contained'
                   color='primary'
-                sx={{ margin: 5, left: '40%', width: '200px' }}
+                  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 == '' || type == 'display'
+                    isChecked == false ||
+                    signature == undefined ||
+                    type == 'display'
                   }
                   onClick={handleSubmit}
                 >
@@ -672,6 +756,7 @@ export default function PatientForm({ type }: Props) {
                 </Button>
               </Grid>
             </Grid>
+          </Grid>
           {/* </form> */}
         </Paper>
         <Footer />

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) => {
@@ -155,7 +155,7 @@ export default function PersonalSection({
             placeholder='Please enter your cell Phone number'
             value={
               type == 'display'
-                  ? patientDataDiplay.cellPhone
+                ? patientDataDiplay && patientDataDiplay.cellPhone
                 : patient.cellPhone
             }
             disabled={type == 'display'}
@@ -189,7 +189,6 @@ export default function PersonalSection({
                 : ''
             }
           />
-
         </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'

src/Components/PatientForm/SyestemReviewSection6.tsx

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