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

Reviewed-on: #7

package-lock.json

@@ -37,9 +37,11 @@
         "react-dom": "^18.2.0",
         "react-gauge-chart": "^0.4.1",
         "react-icons": "^4.9.0",
+        "react-image-marker": "^1.2.0",
         "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",
@@ -52,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"
@@ -4971,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",
@@ -5028,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",
@@ -15795,6 +15814,15 @@
         "react": "*"
       }
     },
+    "node_modules/react-image-marker": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-image-marker/-/react-image-marker-1.2.0.tgz",
+      "integrity": "sha512-HFrzKVnX/hgZqHlxwV7XQNiyMRowD1IAnbsf4dZCEuSzGlGHxAv+sCv/AU1VHHVxFxoHubNL/xYNpGQfgtX67A==",
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15951,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",
@@ -16834,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",
@@ -17681,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

@@ -33,9 +33,11 @@
     "react-dom": "^18.2.0",
     "react-gauge-chart": "^0.4.1",
     "react-icons": "^4.9.0",
+    "react-image-marker": "^1.2.0",
     "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",
@@ -72,6 +74,7 @@
     "@types/leaflet": "^1.9.3",
     "@types/react-date-range": "^1.4.4",
     "@types/react-gauge-chart": "^0.4.0",
+    "@types/react-signature-canvas": "^1.0.2",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2"

public/index.html

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

src/App.css

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

src/App.tsx

@@ -11,7 +11,8 @@ function App() {
         <div className='flex'>
           <BrowserRouter>
           <Routes>
-              <Route path='/' element={<PatientForm />}/>
+            <Route path='/' element={<PatientForm type={"fill"}/>} />
+            <Route path='/view-details' element={<PatientForm type={"display"}/>}/>
           </Routes>
           </BrowserRouter>
         </div>

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,31 +26,64 @@ interface DataTableProps {
   onAddRow: () => void;
 }
 
-const DataTable: React.FC= () => {
+type Props = {
+  handleFormSection5Data: (
+    generalHealth: string | undefined,
+    presentProblemBefore: string | undefined,
+    ifYespresentProblemBefore: string | undefined,
+    ifYestreatmentProvided: string | undefined,
+    ifYesOutcome: string | undefined,
+    strokeBloodclotting: string | undefined,
+    ifYesstrokeBloodclotting: string | undefined,
+    dizzinessFetigue: string | undefined,
+    ifyesdizzinessFetigue: string | undefined,
+    antiColligent: string | undefined,
+    injuriesHospitalization: string | undefined,
+    supplementsOrDrugs: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
+function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
   const [illnessFromData, setIllnessFromData] = React.useState<any>({
-    id:0,date:'',illness:'',treatment:'',results:''
-  })
+    id: 0,
+    date: '',
+    illness: '',
+    treatment: '',
+    results: '',
+  });
   const [illnessData, setIllnessData] = React.useState<any[]>([
-    {id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'}
+    {
+      id: 0,
+      date: 'ex-12-01-2020',
+      illness: 'knee pain',
+      treatment: 'surgery',
+      results: 'cured',
+    },
   ]);
 
-  const deleteIllnessData = (idToDelete:number) => {
-    const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
+  const deleteIllnessData = (idToDelete: number) => {
+    const updatedIllnessData = illnessData.filter(
+      (item) => item.id !== idToDelete
+    );
     setIllnessData(updatedIllnessData);
   };
-  
 
   const handleAddRow = () => {
-    if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){
-
-      const newId = Math.max(...illnessData.map(item => item.id)) + 1;
+    if (
+      illnessFromData.date != '' &&
+      illnessFromData.illness != '' &&
+      illnessFromData.treatment != '' &&
+      illnessFromData.results != ''
+    ) {
+      const newId = Math.max(...illnessData.map((item) => item.id)) + 1;
       const newIllnessData = [
         ...illnessData,
         {
           ...illnessFromData,
-          id: newId
-        }
+          id: newId,
+        },
       ];
       setIllnessData(newIllnessData);
       setIllnessFromData({
@@ -45,89 +91,136 @@ const DataTable: React.FC= () => {
         date: '',
         illness: '',
         treatment: '',
-        results: ''
+        results: '',
       });
     }
   };
 
-  console.log("sdfsdfdsf",illnessData, illnessFromData)
-  
-
   return (
     <>
-    <FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
-    <FormControl>
-      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
-        <Grid item xs={2} className='addNew-form-table-style'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Date" 
+      <FormLabel>If yes, Please enter the details below:</FormLabel>
+      <br></br>
+      {type !== 'display' ? (
+        <FormControl>
+          <Grid container spacing={1.5}>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <TextField
+                required
+                variant='outlined'
+                label='Date'
                 value={illnessFromData.date}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     date: event.target.value,
                   }));
                 }}
-                />
-        </Grid>
-        <Grid item xs={3.7} className='addNew-form-table-style'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Injury/Illness/Surgeries" 
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <TextField
+                required
+                variant='outlined'
+                label='Injury/Illness/Surgeries'
                 value={illnessFromData.illness}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     illness: event.target.value,
                   }));
                 }}
-                />
-        </Grid>
-        <Grid item xs={3.5} className='addNew-form-table-style'>
-            <TextField 
-              required
-                variant="outlined"
-                label="Treatment" 
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <TextField
+                required
+                variant='outlined'
+                label='Treatment'
                 value={illnessFromData.treatment}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     treatment: event.target.value,
                   }));
                 }}
-                />
-        </Grid>
-        <Grid item xs={2} className='addNew-form-table-style'>
-            <TextField 
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <TextField
                 required
-                variant="outlined"
-                label="Results" 
+                variant='outlined'
+                label='Results'
                 value={illnessFromData.results}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     results: event.target.value,
                   }));
                 }}
-                />
-        </Grid>
-        <Grid item xs={0.8} className='addNew-form-table-style'>
-          <Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
-        </Grid>
-        
-      </Grid>
-    </FormControl>
-    
-     
-      <TableContainer sx={{width:800}} className='illness-table-style'>
-        <Table  aria-label="simple table">
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <Button
+                sx={{ height: '40px', bgcolor: 'skyblue' }}
+                onClick={handleAddRow}
+              >
+                Add
+              </Button>
+            </Grid>
+          </Grid>
+        </FormControl>
+      ) : (
+        ''
+      )}
+
+      <TableContainer className='illness-table-style'>
+        <Table aria-label='simple table'>
           <TableHead>
             <TableRow>
               <TableCell align='left'>Date</TableCell>
-              <TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
+              <TableCell align='center'>
+                Injury/Fracture/Illness/Surgeries
+              </TableCell>
               <TableCell align='left'>Treatment</TableCell>
               <TableCell align='left'>Results</TableCell>
               <TableCell align='left'></TableCell>
@@ -136,22 +229,23 @@ const DataTable: React.FC= () => {
           <TableBody>
             {illnessData.map((row, index) => (
               <TableRow key={index}>
+                <TableCell align='left'>{row.date}</TableCell>
+                <TableCell align='center'>{row.illness}</TableCell>
+                <TableCell align='left'>{row.treatment}</TableCell>
+                <TableCell align='left'>{row.results}</TableCell>
                 <TableCell align='left'>
-                    {row.date}
-                </TableCell>
-                <TableCell align='center'> 
-                  {row.illness}
-                </TableCell>
-                <TableCell align='left'> 
-                  {row.treatment}
-                </TableCell>
-                <TableCell align='left'> 
-                  {row.results}
-                </TableCell>
-                <TableCell align='left'> 
-                  <Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
-                    Delete
-                  </Button>
+                  {type !== 'display' ? (
+                    <Button
+                      sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
+                      onClick={(e) => {
+                        deleteIllnessData(row.id);
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  ) : (
+                    ''
+                  )}
                 </TableCell>
               </TableRow>
             ))}
@@ -160,6 +254,6 @@ const DataTable: React.FC= () => {
       </TableContainer>
     </>
   );
-};
+}
 
 export default DataTable;

src/Components/Helper/AlertDialogBox.tsx

@@ -0,0 +1,35 @@
+import { Alert, AlertColor, Snackbar, Stack } from '@mui/material';
+
+type Props = {
+  open: boolean;
+  message: string;
+  severity: AlertColor;
+  duration: number;
+  handleAlertClose: () => void;
+};
+
+function AlertDialog({
+  open,
+  message,
+  severity,
+  duration,
+  handleAlertClose,
+}: Props) {
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={open}
+        autoHideDuration={duration}
+        onClose={handleAlertClose}
+        sx={{ zIndex: 9999 }}
+      >
+        <Alert severity={severity} sx={{ width: '100%' }}>
+          {message}
+        </Alert>
+      </Snackbar>
+    </Stack>
+  );
+}
+
+export default AlertDialog;

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/Entry.tsx

@@ -0,0 +1,26 @@
+import Slider from '@mui/material/Slider';
+import IconButton from '@mui/material/IconButton';
+
+import deleteIcon from '../../Assets/delete.png';
+import Rating from './Rating';
+
+type Props = {
+  entry: any;
+  index: number;
+  onUpdate: (data: any) => void;
+  onDelete: (index: number) => void;
+};
+
+const Entry = ({ entry, onUpdate, onDelete, index }: Props) => {
+  return (
+    <div className='entry'>
+      <span className='image-marker__marker--default'>{index + 1}</span>
+      <Rating index={entry.index} defaultValue={entry.severity} onUpdate={onUpdate}/>
+      <IconButton aria-label='delete' onClick={() => onDelete(index)}>
+        <img src={deleteIcon} height='25' width='25' />
+      </IconButton>
+    </div>
+  );
+};
+
+export default Entry;

src/Components/ImageMarker/EntryForm.tsx

@@ -0,0 +1,41 @@
+import Entry from './Entry';
+import { Button } from '@mui/material';
+
+type Props = {
+  entries: Array<any>;
+  onUpdate: (data: any) => void;
+  onDelete: (index: number) => void;
+  onSave: (data: any) => void;
+};
+
+const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
+  return (
+    <div className='entryForm'>
+      <span className='header'>
+        *** Mark Your Areas of Pain on the Picture ***
+      </span>
+      {entries && entries.length > 0 && (
+        <span className='sub-header'>How much pain are you in right now?</span>
+      )}
+      {entries?.map((entry: any, index: number) => (
+        <Entry
+          entry={entry}
+          index={index}
+          key={index}
+          onUpdate={onUpdate}
+          onDelete={onDelete}
+        />
+      ))}
+      {/* {
+        entries && entries.length > 0 &&
+        <div className='buttonDiv'>
+          <Button variant='contained' onClick={() => onSave({})}>
+            Save
+          </Button>
+        </div>
+      } */}
+    </div>
+  );
+};
+
+export default EntryForm;

src/Components/ImageMarker/PatientImageMarker.css

@@ -0,0 +1,185 @@
+.image-marker-div {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.image-marker-div .entry-div {
+    width: 55%;
+}
+
+.image-marker-div .entry-div .entryForm {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.image-marker-div .entry-div .entryForm .header {
+    font-weight: 500;
+    font-size: 18px;
+}
+
+.image-marker-div .entry-div .entryForm .sub-header {
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.image-marker-div .entry-div .entryForm .entry {
+    margin-top: 1%;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.image-marker-div .marker-div {
+    /* margin-right: 5%; */
+}
+
+.image-marker-div .rating-div {
+    width: 80%;
+}
+
+.image-marker-div .entry-div .sub-header {
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.ratingResult {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin-top: 2%;
+    margin-bottom: 3%;
+}
+.image-marker-div .marker-div {
+    width: 45%;
+}
+
+@media only screen and (max-width: 1200px) {
+    .image-marker-div {
+        flex-direction: column;
+    }
+
+    .image-marker-div .entry-div {
+        width: 100%;
+    }
+
+    .image-marker-div .rating-div {
+        width: 100%;
+    }
+
+    .image-marker-div .entry-div .entryForm .entry {
+        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) {
+    .image-marker-div .rating-div {
+        width: 70%;
+    }
+
+    .ratingResult .rating-div {
+        width: 80%;
+    }
+}
+
+.btn-scale {
+    min-width: 40px !important;
+    width: 3% !important;
+    text-align: center !important;
+    font-weight: bold !important;
+    color: black !important;
+    font-family: 'Lato', sans-serif;
+    border: none !important;
+    margin-left: 1% !important;
+}
+
+.selected {
+    border: 3px solid black !important;
+}
+
+.btn-scale-asc-1 {
+    background-color: #33FF00 !important;
+}
+
+.btn-scale-asc-1:hover {
+    background-color: #2CDE00 !important;
+}
+
+.btn-scale-asc-2 {
+    background-color: #66FF00 !important;
+}
+
+.btn-scale-asc-2:hover {
+    background-color: #59DE00 !important;
+}
+
+.btn-scale-asc-3 {
+    background-color: #99FF00 !important;
+}
+
+.btn-scale-asc-3:hover {
+    background-color: #85DE00 !important;
+}
+
+.btn-scale-asc-4 {
+    background-color: #CCFF00 !important;
+}
+
+.btn-scale-asc-4:hover {
+    background-color: #B1DE00 !important;
+}
+
+.btn-scale-asc-5 {
+    background-color: #FFFF00 !important;
+}
+
+.btn-scale-asc-5:hover {
+    background-color: #DEDE00 !important;
+}
+
+.btn-scale-asc-6 {
+    background-color: #FFCC00 !important;
+}
+
+.btn-scale-asc-6:hover {
+    background-color: #DEB100 !important;
+}
+
+.btn-scale-asc-7 {
+    background-color: #FF9900 !important;
+}
+
+.btn-scale-asc-7:hover {
+    background-color: #DE8500 !important;
+}
+
+.btn-scale-asc-8 {
+    background-color: #FF6600 !important;
+}
+
+.btn-scale-asc-8 {
+    background-color: #DE5900 !important;
+}
+
+.btn-scale-asc-9 {
+    background-color: #FF3300 !important;
+}
+
+.btn-scale-asc-9:hover {
+    background-color: #DE2C00 !important;
+}
+
+.btn-scale-asc-10 {
+    background-color: #FF0000 !important;
+}
+
+.btn-scale-asc-10:hover {
+    background-color: #DE0000 !important;
+}

src/Components/ImageMarker/PatientImageMarker.tsx

@@ -0,0 +1,79 @@
+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';
+
+type Props = {};
+
+const PatientImageMarker = (props: Props) => {
+  const [markers, setMarkers] = useState<Array<Marker>>([]);
+  const [entries, setEntries] = useState<Array<any>>([]);
+  const [action, setAction] = useState<any>({});
+
+  const updateEntry = (updated: any) => {
+    setEntries((prevEntries) =>
+      prevEntries.map((entry) =>
+        entry.index === updated.index
+          ? { ...entry, severity: updated.severity }
+          : entry
+      )
+    );
+  };
+
+  const addEntries = (marker: Marker) => {
+    setAction({ type: 'add', index: 0 });
+    setMarkers([...markers, marker]);
+  };
+
+  const deleteEntry = (index: number) => {
+    setAction({ type: 'delete', index: index });
+    setMarkers(markers.filter((marker: Marker, ind: number) => ind != index));
+  };
+
+  const onSave = () => {
+    localStorage.setItem(
+      'entry',
+      JSON.stringify({ markers: markers, entries: entries })
+    );
+  };
+
+  useEffect(() => {
+    if (action.type === 'add') {
+      const ind =
+        entries.length != 0 ? entries[entries.length - 1].index + 1 : 1;
+      setEntries([...entries, { index: ind, severity: 5 }]);
+    } else
+      setEntries(
+        entries.filter((entry: any, ind: number) => ind != action.index)
+      );
+  }, [action]);
+
+  useEffect(() => {
+    onSave();
+  }, [entries]);
+
+  return (
+    <div className='image-marker-div'>
+      <div className='entry-div'>
+        <EntryForm
+          entries={entries}
+          onSave={onSave}
+          onDelete={deleteEntry}
+          onUpdate={updateEntry}
+        />
+      </div>
+      <div className='marker-div'>
+        <ImageMarker
+          src={humanImage}
+          markers={markers}
+          onAddMarker={(marker: Marker) => addEntries(marker)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PatientImageMarker;

src/Components/ImageMarker/Rating.tsx

@@ -0,0 +1,32 @@
+import { Button, Tooltip } from '@mui/material';
+import React, { useState } from 'react';
+
+type Props = {
+  index: number;
+  defaultValue: number;
+  onUpdate: (data: any) => void;
+  disabled?: boolean;
+};
+
+const Rating = ({index, defaultValue, onUpdate, disabled} : Props) => {
+  return (
+    <div key={index} className='rating-div'>
+      {[...Array(10)].map((star, ind) => {
+        return (
+          <Tooltip title={(ind+1) < 3 ? 'No Pain' : (ind+1) > 7 ? 'Unbearable' : ''} placement="top-end">
+            <Button
+              className={`btn btn-scale btn-scale-asc-${ind+1} ${(ind+1) === defaultValue ? 'selected' : ''}`}
+              key={ind + 1}
+              onClick={() => onUpdate({ index: index, severity: ind + 1 })}
+              disabled={disabled}
+            >
+              {ind + 1}
+            </Button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Rating;

src/Components/ImageMarker/ViewPatientImageMarker.tsx

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

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -1,240 +1,481 @@
-import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import { useFormik } from "formik";
-import * as yup from "yup";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
+import React, { useEffect } from 'react';
 
-interface FormValues {
-  maritalStatus: string;
-  numberOfChildren: string;
-  ages: string;
-  occupation: string;
-  hoursPerWeek: number | string;
-  employer: string;
-  businessPhone: string;
-  spouseName: string;
-  spouseEmployer: string;
-  spouseBusinessPhone: string;
-  emergencyContact: string;
-  relationship: string;
-  spousePhone: string;
+interface Patient {
+  maritalStatus: string | undefined;
+  numberOfChildren: string | undefined;
+  occupation: string | undefined;
+  hoursPerWeek: number | string | undefined;
+  employer: string | undefined;
+  businessPhone: string | undefined;
+  spouseName: string | undefined;
+  spouseEmployer: string | undefined;
+  spouseBusinessPhone: string | undefined;
+  emergencyContact: string | undefined;
+  relationship: string | undefined;
+  spousePhone: string | undefined;
 }
 
-const validationSchema = yup.object({
-  maritalStatus:yup.string().required("Marital Status is required"),
-  numberOfChildren:yup.string().required("Full name is required"),
-  ages:yup.string().required("Full name is required"),
-  occupation:yup.string().required("Occupation is required"),
-//   hoursPerWeek: yup.number().required('Required'),
-//   employer:yup.string().required("Full name is required"),
-//   businessPhone:yup.string().required("Full name is required"),
-  spouseName:yup.string().required("Spouse name is required"),
-//   spouseEmployer:yup.string().required("Full name is required"),
-//   spouseBusinessPhone:yup.string().required("Full name is required"),
-  emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-  relationship:yup.string().required("Relationship is required"),
-  spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-});
-
-export default function FamilyFormSection(){
-    const formik = useFormik<FormValues>({
-        initialValues:{
-            maritalStatus:'',
-            numberOfChildren:'',
-            ages:'',
-            occupation:'',
-            hoursPerWeek:'',
-            employer:'',
-            businessPhone:'',
-            spouseName:'',
-            spouseEmployer:'',
-            spouseBusinessPhone:'',
-            emergencyContact:'',
-            relationship:'',
-            spousePhone:''
-        },
-        validationSchema,
-        onSubmit:(values)=>{
-            console.log(values);
-        }
-    })
-    return(
-        <>
-        <form onSubmit={formik.handleSubmit}>
-        <Grid container direction="row">
-            <Grid item xs={8} className='collapsable-form-style-radioButtons'>
-            <FormControl>
-            <FormLabel>Marital Status</FormLabel>
-                <RadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue="married"
-                    name="maritalStatus"
-                    onChange={formik.handleChange}
-                    value={formik.values.maritalStatus}
-                    sx={{display:'flex', flexDirection:'row'}}
-                    // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
-                    // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
-                    >
-                    <FormControlLabel value="married" control={<Radio />} label="Married" />
-                    <FormControlLabel value="single" control={<Radio />} label="Single" />
-                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
-                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
-                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
-                </RadioGroup>
-                
-            </FormControl>
-            </Grid>
-           
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                
-                variant="outlined" 
-                type="number"
-                label="Number of Children/Ages" 
-                className='collapsable-form-style'
-                name='numberOfChildren'
-                onChange={formik.handleChange}
-                value={formik.values.numberOfChildren}
-                onBlur={formik.handleBlur}
-                // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
-                // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                // required
-                variant="outlined" 
-                label="Occupation" 
-                className='collapsable-form-style'
-                name='occupation'
-                onChange={formik.handleChange}
-                value={formik.values.occupation}
-                onBlur={formik.handleBlur}
-                // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
-                // helperText={formik.touched.occupation && formik.errors.occupation}
-                />
-               
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Hours/Week" 
-                 type="number" 
-                 className='collapsable-form-style'
-                 name='hoursPerWeek'
-                 onChange={formik.handleChange}
-                 value={formik.values.hoursPerWeek}
-                 onBlur={formik.handleBlur}
-                 />
-                 
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                variant="outlined" 
-                label="Employer" 
-                className='collapsable-form-style'
-                name='employer'
-                onChange={formik.handleChange}
-                value={formik.values.employer}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                variant="outlined" 
-                label="Business Phone" 
-                type="number"
-                className='collapsable-form-style'
-                name='businessPhone'
-                onChange={formik.handleChange}
-                value={formik.values.businessPhone}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
-
-            <Grid item xs={12} className='collapsable-form-style '> 
-                <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Spouse's Name" 
-                 className='collapsable-form-style'
-                 name='spouseName'
-                 onChange={formik.handleChange}
-                 value={formik.values.spouseName}
-                 onBlur={formik.handleBlur}
-                 />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                 <TextField 
-                 variant="outlined" 
-                 label="Spouse's Employer" 
-                 className='collapsable-form-style'
-                 name='spouseEmployer'
-                 onChange={formik.handleChange}
-                 value={formik.values.spouseEmployer}
-                 onBlur={formik.handleBlur}
-                 />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                  <TextField 
-                  variant="outlined" 
-                  label="Business Phone" 
-                  type="number"
-                  className='collapsable-form-style'
-                  name='spouseBusinessPhone'
-                  onChange={formik.handleChange}
-                  value={formik.values.spouseBusinessPhone}
-                  onBlur={formik.handleBlur}
-                  />
-            </Grid>
-            
-            <Grid item xs={12} className='collapsable-form-style '> 
-                <FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
-            </Grid>
-           
-
-            <Grid item xs={4} className='collapsable-form-style '>
-                   <TextField 
-                   variant="outlined" 
-                   label="Emergency Contact" 
-                   type="number"
-                   className='collapsable-form-style'
-                   name='emergencyContact'
-                   onChange={formik.handleChange}
-                   value={formik.values.emergencyContact}
-                   onBlur={formik.handleBlur}
-                   />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                    <TextField 
-                    variant="outlined" 
-                    label="Relationship" 
-                    className='collapsable-form-style'
-                    name='relationship'
-                    onChange={formik.handleChange}
-                    value={formik.values.relationship}
-                    onBlur={formik.handleBlur}
-                    />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                     <TextField 
-                     variant="outlined" 
-                     type="number"
-                     label="Phone" 
-                     className='collapsable-form-style'
-                     name='spousePhone'
-                     onChange={formik.handleChange}
-                     value={formik.values.spousePhone}
-                     onBlur={formik.handleBlur}
-                     />
-            </Grid>
-        </Grid>
-        </form>
-        </>
-    )
+type Props = {
+  handleFormSection2Data: (
+    maritalStatus: string | undefined,
+    numberOfChildren: string | undefined,
+    occupation: string | undefined,
+    hoursPerWeek: number | string | undefined,
+    employer: string | undefined,
+    businessPhone: string | undefined,
+    spouseName: string | undefined,
+    spouseEmployer: string | undefined,
+    spouseBusinessPhone: string | undefined,
+    emergencyContact: string | undefined,
+    relationship: string | undefined,
+    spousePhone: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
 };
+
+export default function FamilyFormSection({
+  handleFormSection2Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    maritalStatus: '',
+    numberOfChildren: '',
+    occupation: '',
+    hoursPerWeek: '',
+    employer: '',
+    businessPhone: '',
+    spouseName: '',
+    spouseEmployer: '',
+    spouseBusinessPhone: '',
+    emergencyContact: '',
+    relationship: '',
+    spousePhone: '',
+  });
+
+  useEffect(() => {
+    handleFormSection2Data(
+      patient.maritalStatus,
+      patient.numberOfChildren,
+      patient.occupation,
+      patient.hoursPerWeek,
+      patient.employer,
+      patient.businessPhone,
+      patient.spouseName,
+      patient.spouseEmployer,
+      patient.spouseBusinessPhone,
+      patient.emergencyContact,
+      patient.relationship,
+      patient.spousePhone
+    );
+  }, [patient]);
+
+  return (
+    <>
+      <Grid container direction='row'>
+        <Grid item xs={8} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Marital Status</FormLabel>
+            <RadioGroup
+              aria-labelledby='demo-radio-buttons-group-label'
+              name='maritalStatus'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.maritalStatus
+                  : patient.maritalStatus
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(e) => {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  maritalStatus: e.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                value='married'
+                control={<Radio />}
+                label='Married'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='single'
+                control={<Radio />}
+                label='Single'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='widowed'
+                control={<Radio />}
+                label='Widowed'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='seperated'
+                control={<Radio />}
+                label='Seperated'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='divorced'
+                control={<Radio />}
+                label='Divorced'
+                disabled={type == 'display'}
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid item xs={4} className='collapsable-form-style '></Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            type='number'
+            label='Number of Children/Ages'
+            className='collapsable-form-style'
+            name='numberOfChildren'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                numberOfChildren: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.numberOfChildren
+                : patient.numberOfChildren
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            // required
+            variant='outlined'
+            label='Occupation'
+            className='collapsable-form-style'
+            name='occupation'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                occupation: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.occupation
+                : patient.occupation
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Hours/Week'
+            type='number'
+            className='collapsable-form-style'
+            name='hoursPerWeek'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                hoursPerWeek: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.hoursPerWeek
+                : patient.hoursPerWeek
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Employer'
+            className='collapsable-form-style'
+            name='employer'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                employer: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display' ? patientDataDiplay && patientDataDiplay.employer : patient.employer
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Business Phone'
+            type='number'
+            className='collapsable-form-style'
+            name='businessPhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                businessPhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.businessPhone
+                : patient.businessPhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        ></Grid>
+
+        <Grid item xs={12} className='collapsable-form-style '>
+          <FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Spouse's Name"
+            className='collapsable-form-style'
+            name='spouseName'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseName: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseName
+                : patient.spouseName
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Spouse's Employer"
+            className='collapsable-form-style'
+            name='spouseEmployer'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseEmployer: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseEmployer
+                : patient.spouseEmployer
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Business Phone'
+            type='number'
+            className='collapsable-form-style'
+            name='spouseBusinessPhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseBusinessPhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseBusinessPhone
+                : patient.spouseBusinessPhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+
+        <Grid item xs={12} className='collapsable-form-style '>
+          <FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Emergency Contact'
+            className='collapsable-form-style'
+            name='emergencyContact'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                emergencyContact: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.emergencyContact
+                : patient.emergencyContact
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label='Relationship'
+            className='collapsable-form-style'
+            name='relationship'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                relationship: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.relationship
+                : patient.relationship
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            type='number'
+            label='Phone'
+            className='collapsable-form-style'
+            name='spousePhone'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spousePhone: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spousePhone
+                : patient.spousePhone
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -2,147 +2,250 @@ import * as React from 'react';
 import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
+import { useEffect } from 'react';
 
-interface FormValues {
-  physicianname: string;
-  physiciancity: string;
-  physicianstate: string;
-  physicianphone: string;
-  chiropractorName: string;
-  chiropractorState: string;
-  xray: boolean;
-  ctScan: boolean;
-  cdImages: boolean;
-  visitDetails: string;
-  cellPhoneProvider: string;
+interface Patient {
+  physicianname: string |undefined;
+  physiciancity: string |undefined;
+  physicianstate: string |undefined;
+  physicianphone: string |undefined;
+  chiropractorName: string |undefined;
+  chiropractorState: string |undefined;
+  xray: string|undefined;
+  haveChiropractor: string|undefined;
+  reference: string|undefined;
+  visitDetails: string |undefined;
+  cellPhoneProvider: string |undefined;
 }
 
-const validationSchema = Yup.object({
-  familyphysician: Yup.string().required('Required'),
-  city: Yup.string().required('Required'),
-  state: Yup.string().required('Required'),
-  phone: Yup.string().required('Required'),
-  chiropractorName: Yup.string().required('Required'),
-  xray: Yup.boolean().required('Required'),
-  ctScan: Yup.boolean().required('Required'),
-  cdImages: Yup.boolean().required('Required'),
-  visitDetails: Yup.string().required('Required'),
-  cellPhoneProvider: Yup.string().required('Required'),
-});
+type Props = {
+    handleFormSection3Data:(
+        physicianname?: string |undefined,
+        physiciancity?: string |undefined,
+        physicianstate?: string |undefined,
+        physicianphone?: string |undefined,
+        chiropractorName?: string |undefined,
+        chiropractorState?: string |undefined,
+        xray?: string|undefined,
+        haveChiropractor?: string|undefined,
+        reference?: string|undefined,
+        visitDetails?: string |undefined,
+        cellPhoneProvider?: string |undefined,
+    )=> void
+    patientDataDiplay:any;
+    type:string;
+  }
+
+export default function MedicalHistoryForm({handleFormSection3Data,patientDataDiplay,type}:Props){
+    
+    const [patient, setPatient] = React.useState<Patient>({
+        physicianname: '',
+        physiciancity: '',
+        physicianstate: '',
+        physicianphone: '',
+        chiropractorName: '',
+        chiropractorState: '',
+        xray: '',
+        haveChiropractor: '',
+        reference: '',
+        visitDetails: '',
+        cellPhoneProvider: '',
+      });
+   
+      useEffect(()=>{
+        handleFormSection3Data(
+            patient.physicianname,
+            patient.physiciancity,
+            patient.physicianstate,
+            patient.physicianphone,
+            patient.chiropractorName,
+            patient.chiropractorState,
+            patient.xray,
+            patient.haveChiropractor,
+            patient.reference,
+            patient.visitDetails,
+            patient.cellPhoneProvider,
+        )
+      },[patient])
 
-export default function MedicalHistoryForm(){
-    const formik = useFormik<FormValues>({
-        initialValues:{
-            physicianname: '',
-            physiciancity: '',
-            physicianstate: '',
-            physicianphone: '',
-            chiropractorName: '',
-            chiropractorState: '',
-            xray: false,
-            ctScan: false,
-            cdImages: false,
-            visitDetails: '',
-            cellPhoneProvider: '',
-        },
-        validationSchema,
-        onSubmit:(values)=>{
-            console.log(values);
-        }
-    })
     return(
         <>
-        <form onSubmit={formik.handleSubmit}>
         <Grid item xs={12} className='collapsable-form-style '> 
             <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
         </Grid>
 
         <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Family physician" 
                 name='physicianname'
-                onChange={formik.handleChange}
-                value={formik.values.physicianname}
-                onBlur={formik.handleBlur}
+                onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianname: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
+                disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City" 
                 name='physiciancity'
-                onChange={formik.handleChange}
-                value={formik.values.physiciancity}
-                onBlur={formik.handleBlur}
+                onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physiciancity: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
+                disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="State" 
                  name='physicianstate'
-                 onChange={formik.handleChange}
-                 value={formik.values.physicianstate}
-                 onBlur={formik.handleBlur}
+                 onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianstate: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
+                disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Phone" 
                 type="number"
                 name='physicianphone'
-                onChange={formik.handleChange}
-                value={formik.values.physicianphone}
-                onBlur={formik.handleBlur}
+                onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianphone: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
+                disabled={type=='display'}
                 />
             </Grid>
             
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
             </Grid>
 
-            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
-                    // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="yes"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            haveChiropractor: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel value="no" control={<Radio />} label="No" />
+                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
                 </RadioGroup>
                 </FormControl>
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="Chiropractor's Name" 
                  name='chiropractorName'
-                 onChange={formik.handleChange}
-                 value={formik.values.chiropractorName}
-                 onBlur={formik.handleBlur}
+                 onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        chiropractorName: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
+                disabled={type=='display'}
                  />
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="City/State" 
                  name='chiropractorState'
-                 onChange={formik.handleChange}
-                 value={formik.values.chiropractorState}
-                 onBlur={formik.handleBlur}
+                 onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        chiropractorState: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
+                disabled={type=='display'}
                  />
             </Grid>
         </Grid>
@@ -153,13 +256,18 @@ export default function MedicalHistoryForm(){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="yes"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            xray: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel value="no" control={<Radio />} label="No" />
+                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -170,17 +278,22 @@ export default function MedicalHistoryForm(){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="physician"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            reference: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
-                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
-                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
-                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
-                    <FormControlLabel value="google" control={<Radio />} label="Google" />
-                    <FormControlLabel value="others" control={<Radio />} label="Others" />
+                    <FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
+                    <FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
+                    <FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
+                    <FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
+                    <FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
+                    <FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -191,17 +304,21 @@ export default function MedicalHistoryForm(){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="email"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            cellPhoneProvider: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="email" control={<Radio />} label="Email" />
-                    <FormControlLabel value="text" control={<Radio />} label="Text" />
+                    <FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
+                    <FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
                 </RadioGroup>
             </FormControl>
         </Grid>
-        </form>
         </>
     )}
             

src/Components/PatientForm/OtherDetails8.tsx

@@ -1,178 +1,318 @@
-import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import React from "react";
+import {
+  Grid,
+  FormLabel,
+  TextField,
+  FormControl,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import React, { useEffect } from 'react';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 
-interface FormValues {
-    familyHistory: string;
-    sleep: string;
-    pillow:string;
-    orthotics:string;
-    brestExam: any;
-    pregnancy:string;
-    menstralCycle: any;
-  }
+interface Patient {
+  familyHistory: string;
+  sleep: string;
+  pillow: string;
+  orthotics: string;
+  brestExam: any;
+  pregnancy: string;
+  menstralCycle: any;
+}
 
-export default function OtherDetails8(){
-  
-    const [values, setValues] = React.useState<FormValues>({
-        familyHistory: '',
-        sleep: '',
-        pillow:'',
-        orthotics:'',
-        brestExam: dayjs('2022-04-17'),
-        pregnancy:'',
-        menstralCycle: dayjs('2022-04-17'),
-    });
+type Props = {
+  handleFormSection8Data: (
+    familyHistory: string | undefined,
+    sleep: string | undefined,
+    pillow: string | undefined,
+    orthotics: string | undefined,
+    brestExam: any,
+    pregnancy: string | undefined,
+    menstralCycle: any
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
-    const formatDate = (inputDate:any) => {
-      const date = new Date(inputDate);
-      const year = date.getUTCFullYear();
-      const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-      const day = String(date.getUTCDate()+1).padStart(2, '0');
-      
-      return `${year}-${month}-${day}`;
-    };
+export default function OtherDetails8({
+  handleFormSection8Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    familyHistory: '',
+    sleep: '',
+    pillow: '',
+    orthotics: '',
+    brestExam: dayjs('2022-04-17'),
+    pregnancy: '',
+    menstralCycle: dayjs('2022-04-17'),
+  });
 
-    console.log("dsfdsfsdf",values)
-    
-    return(
-        <>
-        <Grid container direction="row">
-        <Grid item xs={12} className='collapsable-form-style-multiline'>
-          <FormLabel>Family history and health status:</FormLabel><br></br>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='explanation'
-                onChange={(event:any) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    familyHistory: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
+  useEffect(() => {
+    handleFormSection8Data(
+      patient.familyHistory,
+      patient.sleep,
+      patient.pillow,
+      patient.orthotics,
+      (patient.brestExam = dayjs(patient.brestExam)),
+      patient.pregnancy,
+      (patient.menstralCycle = dayjs(patient.menstralCycle))
+    );
+  }, [patient]);
+
+  const formatDate = (inputDate: any) => {
+    const date = new Date(inputDate);
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate() + 1).padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+  };
+
+  return (
+    <>
+      <Grid container direction='row'>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-multiline'
+        >
+          <FormLabel>Family history and health status:</FormLabel>
+          <br></br>
+          <TextField
+            multiline
+            variant='outlined'
+            label=''
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.familyHistory
+                : patient.familyHistory
+            }
+            disabled={type == 'display'}
+            onChange={(event: any) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                familyHistory: event.target.value,
+              }));
+            }}
+          />
+        </Grid>
 
         <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>How do you sleep?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            educationLevel: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Back" control={<Radio />} label="Back" />
-                        <FormControlLabel value="Side" control={<Radio />} label="Side" />
-                        <FormControlLabel value="Stomach" control={<Radio />} label="Stomach" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
+          <FormControl>
+            <FormLabel>How do you sleep?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.sleep : patient.sleep
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  sleep: event.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Back'
+                control={<Radio />}
+                label='Back'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Side'
+                control={<Radio />}
+                label='Side'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Stomach'
+                control={<Radio />}
+                label='Stomach'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Do you use a pillow?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            pillow: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Do you use a pillow?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.pillow : patient.pillow
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  pillow: event.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Yes'
+                control={<Radio />}
+                label='Yes'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='No'
+                control={<Radio />}
+                label='No'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Do you wear orthotics or arch support?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            orthotics: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Do you wear orthotics or arch support?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.orthotics
+                  : patient.orthotics
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  orthotics: event.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Yes'
+                control={<Radio />}
+                label='Yes'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='No'
+                control={<Radio />}
+                label='No'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          <FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
-                <FormControl>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    value={values.brestExam}
-                    onChange={(event) => {
-                      const formattedDate = formatDate(event)
-                      setValues((prevValues) => ({
-                        ...prevValues,
-                        brestExam: formattedDate,
-                      }));
-                      }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-              </FormControl>
-          </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormLabel>Date of last gynecological and brest exam?</FormLabel>
+          <br></br>
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.brestExam
+                    : patient.brestExam
+                }
+                disabled={type == 'display'}
+                onChange={(event) => {
+                  const formattedDate = formatDate(event);
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    brestExam: formattedDate,
+                  }));
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
 
-          {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
+        {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
                 <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
           </Grid> */}
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Possible pregnancy?</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            orthotics: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-            <FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
-                <FormControl>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    value={values.menstralCycle}
-                    onChange={(event) => {
-                      const formattedDate = formatDate(event)
-                      setValues((prevValues) => ({
-                        ...prevValues,
-                        menstralCycle: formattedDate,
-                      }));
-                      }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-              </FormControl>
-          </Grid>
-
-       
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Possible pregnancy?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.pregnancy
+                  : patient.pregnancy
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  pregnancy: event.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='Yes'
+                control={<Radio />}
+                label='Yes'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='No'
+                control={<Radio />}
+                label='No'
+              />
+            </RadioGroup>
+          </FormControl>
         </Grid>
-        </>
-    )
-}
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormLabel>Date of last menstrual cycle?</FormLabel>
+          <br></br>
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.menstralCycle
+                    : patient.menstralCycle
+                }
+                disabled={type == 'display'}
+                onChange={(event) => {
+                  const formattedDate = formatDate(event);
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    menstralCycle: formattedDate,
+                  }));
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -1,266 +1,587 @@
 import * as React from 'react';
-import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  FormGroup,
+  Grid,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
+import path from 'path';
+import { useEffect } from 'react';
 
-interface FormValues {
-    chiefComplaint:string;
-    painQuality: string[];
-    painDuration: string;
-    currentTreatment: string;
-    treatmentResults: string;
-    treatmentGoal: string;
-  }
-  
-  const validationSchema = Yup.object({
-    chiefComplaint:Yup.array().required('Required'),
-    painQuality: Yup.array().required('Required'),
-    painDuration: Yup.string().required('Required'),
-    currentTreatment: Yup.string().required('Required'),
-    treatmentResults: Yup.string().required('Required'),
-    treatmentGoal: Yup.string().required('Required'),
+interface Patient {
+  chiefComplaint: string;
+  painWorse: string[];
+  painBetter: string[];
+  painQuality: string[];
+  painWorstTime: string[];
+  currentComplaintIssues: string[];
+  painDuration: string;
+  currentTreatment: string;
+  treatmentGoal: string;
+  selfTreatment: string;
+}
+
+type Props = {
+  handleFormSection4Data: (
+    chiefComplaint: string | undefined,
+    painWorse: any,
+    painBetter: any,
+    painQuality: any,
+    painWorstTime: any,
+    currentComplaintIssues: any,
+    painDuration: string | undefined,
+    currentTreatment: string | undefined,
+    treatmentGoal: string | undefined,
+    selfTreatment: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function PainAnalysisSection4({
+  handleFormSection4Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    chiefComplaint: '',
+    painWorse: [],
+    painBetter: [],
+    painQuality: [],
+    painWorstTime: [],
+    currentComplaintIssues: [],
+    painDuration: '',
+    currentTreatment: '',
+    treatmentGoal: '',
+    selfTreatment: '',
   });
 
-export default function PainAnalysisSection4(){
-    const formik = useFormik<FormValues>({
-        initialValues:{
-            chiefComplaint:'',
-            painQuality:[],
-            painDuration:'',
-            currentTreatment:'',
-            treatmentResults:'',
-            treatmentGoal:'',
-        },
-        validationSchema,
-        onSubmit:(values)=>{
-            console.log(values);
-        }
-    })
-    const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.checked) {
-          formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
-        } else {
-          formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
-        }
-    };
+  useEffect(() => {
+    handleFormSection4Data(
+      patient.chiefComplaint,
+      patient.painWorse,
+      patient.painBetter,
+      patient.painQuality,
+      patient.painWorstTime,
+      patient.currentComplaintIssues,
+      patient.painDuration,
+      patient.currentTreatment,
+      patient.treatmentGoal,
+      patient.selfTreatment
+    );
+  }, [patient]);
 
-    return(
-        <>
-        <form onSubmit={formik.handleSubmit}>
-        <Grid item xs={12} className='collapsable-form-style '> 
-            <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
+  const handlePainWorseChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painWorse: checked
+        ? [...prevValues.painWorse, name]
+        : prevValues.painWorse.filter((item) => item !== name),
+    }));
+  };
+
+  const handlePainBetterChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painBetter: checked
+        ? [...prevValues.painBetter, name]
+        : prevValues.painBetter.filter((item) => item !== name),
+    }));
+  };
+
+  const handlePainQualityChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painQuality: checked
+        ? [...prevValues.painQuality, name]
+        : prevValues.painQuality.filter((item) => item !== name),
+    }));
+  };
+
+  const handlePainWorstTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      painWorstTime: checked
+        ? [...prevValues.painWorstTime, name]
+        : prevValues.painWorstTime.filter((item) => item !== name),
+    }));
+  };
+
+  const handleCurrentComplaintIssuesTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...prevValues,
+      currentComplaintIssues: checked
+        ? [...prevValues.currentComplaintIssues, name]
+        : prevValues.currentComplaintIssues.filter((item) => item !== name),
+    }));
+  };
+
+  return (
+    <>
+      <Grid item xs={12} className='collapsable-form-style '>
+        <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
+      </Grid>
+      <Grid container direction='row'>
+        <Grid
+          item
+          xs={12}
+          xl={10}
+          lg={10}
+          md={10}
+          sm={12}
+          className='collapsable-form-style-form7'
+        >
+          <TextField
+            variant='outlined'
+            label='How did your Chief complaint start?(ex-fell on ice)'
+            name='chiefComplaint'
+            onChange={(e) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                chiefComplaint: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.chiefComplaint
+                : patient.chiefComplaint
+            }
+            disabled={type == 'display'}
+          />
         </Grid>
-        <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="How did your Chief complaint start?(ex-fell on ice)" 
-                name='chiefComplaint'
-                onChange={formik.handleChange}
-                value={formik.values.chiefComplaint}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
 
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What makes your pain worse?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Bending"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Standing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Sitting"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Walking"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What makes your pain better?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="laying down"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Standing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Sitting"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Walking"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What is the quality of your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Sharp"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Dull/Ache"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Throbbing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Tingling/Numbness/Burning"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What is the worst time for your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Morning"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="During day"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Evening"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Lying in bed"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-            
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        onChange={formik.handleChange}
-                        value={formik.values.painDuration}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        >
-                        <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
-                        <FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
-                        <FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
-                        <FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
-                    </RadioGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Has your current complaint caused any of the following?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Muscle weakness"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Bowel/Bladder problem"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Digestion"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Cardiac/Respiratory"
-                        />
-                       
-                    </FormGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        onChange={formik.handleChange}
-                        value={formik.values.painDuration}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        >
-                        <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="no" control={<Radio />} label="No" />
-                    </RadioGroup>
-                    {formik.touched.painDuration && formik.errors.painDuration ? (
-                        <div>{formik.errors.painDuration}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}> 
-                <FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="What is your goal from treatment?(ex-play golf without pain)" 
-                name='treatmentGoal'
-                onChange={formik.handleChange}
-                value={formik.values.treatmentGoal}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-          
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What makes your pain worse?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
+                }
+                label='Bending'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
+                }
+                label='Sitting'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
+                }
+                label='Walking'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </FormGroup>
+          </FormControl>
         </Grid>
-        </form>
 
-        </>
-    )}
-            
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What makes your pain better?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainBetterChange}
+                    name='laying down'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
+                  />
+                }
+                label='laying down'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
+                }
+                label='Sitting'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
+                }
+                label='Walking'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </FormGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What is the quality of your pain?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
+                }
+                label='Sharp'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
+                }
+                label='Dull/Ache'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainQualityChange}
+                    name='Throbbing'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
+                  />
+                }
+                label='Throbbing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainQualityChange}
+                    name='Tingling/Numbness/Burning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
+                  />
+                }
+                label='Tingling/Numbness/Burning'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </FormGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What is the worst time for your pain?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Morning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
+                  />
+                }
+                label='Morning'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='During day'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
+                  />
+                }
+                label='During day'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Evening'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
+                  />
+                }
+                label='Evening'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Lying in bed'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
+                  />
+                }
+                label='Lying in bed'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Others'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
+                  />
+                }
+                label='Others'
+                disabled={type == 'display'}
+              />
+            </FormGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>
+              How much of the day do you experience your chief complaint?
+            </FormLabel>
+            <RadioGroup
+              name='painDuration'
+              onChange={(e) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  painDuration: e.target.value,
+                }));
+              }}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.painDuration
+                  : patient.painDuration
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='0-25%'
+                control={<Radio />}
+                label='0-25%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='25-50%'
+                control={<Radio />}
+                label='25-50%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='50-75%'
+                control={<Radio />}
+                label='50-75%'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='75-100%'
+                control={<Radio />}
+                label='75-100%'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>
+              Has your current complaint caused any of the following?
+            </FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Muscle weakness'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
+                  />
+                }
+                label='Muscle weakness'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Bowel/Bladder problem'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
+                  />
+                }
+                label='Bowel/Bladder problem'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Digestion'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
+                  />
+                }
+                label='Digestion'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Cardiac/Respiratory'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
+                  />
+                }
+                label='Cardiac/Respiratory'
+                disabled={type == 'display'}
+              />
+            </FormGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>
+              Have you tried any self treatment (ex-ice, heat, excercise) or
+              taken any medication(over the counter or prescription)?
+            </FormLabel>
+            <RadioGroup
+              name='painDuration'
+              onChange={(e) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  selfTreatment: e.target.value,
+                }));
+              }}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.selfTreatment
+                  : patient.selfTreatment
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='yes'
+                control={<Radio />}
+                label='Yes'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='no'
+                control={<Radio />}
+                label='No'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          className='collapsable-form-style'
+          sx={{ marginTop: 3 }}
+        >
+          <FormLabel sx={{ fontWeight: 600 }}>
+            Expected Treatment Result:
+          </FormLabel>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={10}
+          lg={10}
+          md={10}
+          sm={12}
+          className='collapsable-form-style-form7'
+        >
+          <TextField
+            variant='outlined'
+            label='What is your goal from treatment?(ex-play golf without pain)'
+            name='treatmentGoal'
+            onChange={(e) => {
+              setPatient((prevValues) => ({
+                ...prevValues,
+                treatmentGoal: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.treatmentGoal
+                : patient.treatmentGoal
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/PastTreatment5.tsx

@@ -1,11 +1,21 @@
-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';
 
-interface FormValues {
+interface Patient {
   generalHealth: string;
   presentProblemBefore: string;
-  ifYespresentProblemBefore:string;
+  ifYespresentProblemBefore: string;
   ifYestreatmentProvided: string;
   ifYesOutcome: string;
   strokeBloodclotting: string;
@@ -17,244 +27,512 @@ interface FormValues {
   supplementsOrDrugs: string;
 }
 
+type Props = {
+  handleFormSection5Data: (
+    generalHealth: string | undefined,
+    presentProblemBefore: string | undefined,
+    ifYespresentProblemBefore: string | undefined,
+    ifYestreatmentProvided: string | undefined,
+    ifYesOutcome: string | undefined,
+    strokeBloodclotting: string | undefined,
+    ifYesstrokeBloodclotting: string | undefined,
+    dizzinessFetigue: string | undefined,
+    ifyesdizzinessFetigue: string | undefined,
+    antiColligent: string | undefined,
+    injuriesHospitalization: string | undefined,
+    supplementsOrDrugs: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
-export default function PastTreatment5(){
+export default function PastTreatment5({
+  handleFormSection5Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<Patient>({
+    generalHealth: '',
+    presentProblemBefore: '',
+    ifYespresentProblemBefore: '',
+    ifYestreatmentProvided: '',
+    ifYesOutcome: '',
+    strokeBloodclotting: '',
+    ifYesstrokeBloodclotting: '',
+    dizzinessFetigue: '',
+    ifyesdizzinessFetigue: '',
+    antiColligent: '',
+    injuriesHospitalization: '',
+    supplementsOrDrugs: '',
+  });
 
-    const [values, setValues] = React.useState<FormValues>({
-        generalHealth: '',
-        presentProblemBefore: '',
-        ifYespresentProblemBefore:'',
-        ifYestreatmentProvided:'',
-        ifYesOutcome:'',
-        strokeBloodclotting: '',
-        ifYesstrokeBloodclotting: '',
-        dizzinessFetigue: '',
-        ifyesdizzinessFetigue:'',
-        antiColligent: '',
-        injuriesHospitalization: '',
-        supplementsOrDrugs:''
-      });
+  useEffect(() => {
+    handleFormSection5Data(
+      patient.generalHealth,
+      patient.presentProblemBefore,
+      patient.ifYespresentProblemBefore,
+      patient.ifYestreatmentProvided,
+      patient.ifYesOutcome,
+      patient.strokeBloodclotting,
+      patient.ifYesstrokeBloodclotting,
+      patient.dizzinessFetigue,
+      patient.ifyesdizzinessFetigue,
+      patient.antiColligent,
+      patient.injuriesHospitalization,
+      patient.supplementsOrDrugs
+    );
+  }, [patient]);
 
-    console.log("dsfdsfdsfg",values)
-    return(
-        <>
-        <form>
-      <Grid container direction="row">
-        
-      <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Overall your General Healgth is:</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            generalHealth: event.target.value,
-                          }));
-                        }}
-                      >
-                        <FormControlLabel value="Excellent" control={<Radio />} label="Excellent" />
-                        <FormControlLabel value="Very Good" control={<Radio />} label="Very Good" />
-                        <FormControlLabel value="Good" control={<Radio />} label="Good" />
-                        <FormControlLabel value="Fair" control={<Radio />} label="Fair" />
-                        <FormControlLabel value="Poor" control={<Radio />} label="Poor" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you experienced your present problem before?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            presentProblemBefore: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          
-        
-          <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={values.presentProblemBefore!=='Yes'}
+  return (
+    <>
+      <form>
+        <Grid container direction='row'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>Overall your General Health is:</FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.generalHealth
+                    : patient.generalHealth
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
-                    ifYespresentProblemBefore: event.target.value,
+                    generalHealth: event.target.value,
                   }));
                 }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Excellent'
+                  control={<Radio />}
+                  label='Excellent'
                 />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="Was treatment provided?If yes, by whom?" 
-                name='treatmentGoal'
-                disabled={values.presentProblemBefore!=='Yes'}
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    ifYestreatmentProvided: event.target.value,
-                  }));
-                }}
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Very Good'
+                  control={<Radio />}
+                  label='Very Good'
                 />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="Outcome?" 
-                name='treatmentGoal'
-                disabled={values.presentProblemBefore!=='Yes'}
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    ifYesOutcome: event.target.value,
-                  }));
-                }}
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Good'
+                  control={<Radio />}
+                  label='Good'
                 />
-            </Grid>
-           
-
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            strokeBloodclotting: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
+                <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={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={values.strokeBloodclotting!=='Yes'}
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you experienced your present problem before?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.presentProblemBefore
+                    : patient.presentProblemBefore
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
-                    ifYesstrokeBloodclotting: event.target.value,
+                    presentProblemBefore: event.target.value,
                   }));
                 }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
                 />
-            </Grid>
-
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            dizzinessFetigue: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
+              </RadioGroup>
+            </FormControl>
           </Grid>
 
-          <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={values.dizzinessFetigue!=='Yes'}
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYespresentProblemBefore: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='Was treatment provided?If yes, by whom?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYestreatmentProvided
+                  : patient.ifYestreatmentProvided
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYestreatmentProvided: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='Outcome?'
+              name='treatmentGoal'
+              disabled={
+                patient.presentProblemBefore !== 'Yes' || type == 'display'
+              }
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesOutcome
+                  : patient.ifYesOutcome
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYesOutcome: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you ever had a stroke or issues with blood clotting?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
+                    : patient.strokeBloodclotting
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
-                    ifyesdizzinessFetigue: event.target.value,
+                    strokeBloodclotting: event.target.value,
                   }));
                 }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
                 />
-            </Grid>
-
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            antiColligent: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
+              </RadioGroup>
+            </FormControl>
           </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            injuriesHospitalization: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
+          <Grid
+            item
+            xs={12}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifYesstrokeBloodclotting
+                  : patient.ifYesstrokeBloodclotting
+              }
+              disabled={
+                patient.strokeBloodclotting !== 'Yes' || type == 'display'
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifYesstrokeBloodclotting: event.target.value,
+                }));
+              }}
+            />
           </Grid>
 
-          <Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
-                <Table />
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-multiline'>
-          <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='treatmentGoal'
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you recently experienced dizziness, unexplained fatigue,
+                weight loss or blood loss?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.dizzinessFetigue
+                    : patient.dizzinessFetigue
+                }
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
-                    supplementsOrDrugs: event.target.value,
+                    dizzinessFetigue: event.target.value,
                   }));
                 }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
                 />
-            </Grid>
-            
-      </Grid>
-    </form>
-        </>
-    )
-}
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+
+          <Grid
+            item
+            xs={12}
+            xl={10}
+            lg={10}
+            md={10}
+            sm={12}
+            className='collapsable-form-style-form7'
+          >
+            <TextField
+              variant='outlined'
+              label='If yes, when?'
+              name='treatmentGoal'
+              disabled={patient.dizzinessFetigue !== 'Yes'}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.ifyesdizzinessFetigue
+                  : patient.ifyesdizzinessFetigue
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  ifyesdizzinessFetigue: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Are you currently taking anti-coagulant or blood thinning
+                medication?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.antiColligent
+                    : patient.antiColligent
+                }
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    antiColligent: event.target.value,
+                  }));
+                }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you ever had any major illness, injuries, hospitalization
+                or surgeries?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.injuriesHospitalization
+                    : patient.injuriesHospitalization
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    injuriesHospitalization: event.target.value,
+                  }));
+                }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Yes'
+                  control={<Radio />}
+                  label='Yes'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='No'
+                  control={<Radio />}
+                  label='No'
+                />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
+            <Table
+              handleFormSection5Data={handleFormSection5Data}
+              patientDataDiplay={patientDataDiplay}
+              type={type}
+            />
+          </Grid>
+
+          <Grid
+            item
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style-multiline'
+          >
+            <FormLabel>
+              Please list current supplements or drugs you may be taking:
+            </FormLabel>
+            <TextField
+              multiline
+              variant='outlined'
+              label=''
+              name='treatmentGoal'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.supplementsOrDrugs
+                  : patient.supplementsOrDrugs
+              }
+              disabled={type == 'display'}
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  supplementsOrDrugs: event.target.value,
+                }));
+              }}
+            />
+          </Grid>
+        </Grid>
+      </form>
+    </>
+  );
+}

src/Components/PatientForm/PatientForm.tsx

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Footer from "../Footer";
-import Header from "../Header";
-import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import Footer from '../Footer';
+import Header from '../Header';
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
 import PersonalSection from './PersonalSection1';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@@ -19,232 +31,736 @@ import PastTreatment5 from './PastTreatment5';
 import SystemReviewSection6 from './SyestemReviewSection6';
 import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
 import OtherDetails8 from './OtherDetails8';
+import PatientImageMarker from '../ImageMarker/PatientImageMarker';
+import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
+import AlertDialog from '../Helper/AlertDialogBox';
+import SignatureComponent from '../Helper/SignatureComponent';
+import { Link, useLocation  } from 'react-router-dom';
 
-interface Patient {
-    fullName: string;
-    homePhone: string;
-    cellPhone: string;
-    email: string;
-    age: number;
-    dateOfBirth: string;
-    socialSecurityNumber: string;
-    mailingAddress: string;
-    city: string;
-    state: string;
-    zipCode: string;
-    gender: string;
-    maritalStatus: string;
-  }
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
 
-  const Accordion = styled((props: AccordionProps) => (
-    <MuiAccordion disableGutters elevation={0} square {...props} />
-  ))(({ theme }) => ({
-    border: `1px solid ${theme.palette.divider}`,
-    '&:not(:last-child)': {
-      borderBottom: 0,
-    },
-    '&:before': {
-      display: 'none',
-    },
-  }));
-  
-  const AccordionSummary = styled((props: AccordionSummaryProps) => (
-    <MuiAccordionSummary
-      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
-      {...props}
-    />
-  ))(({ theme }) => ({
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, .05)'
-        : 'rgba(0, 0, 0, .03)',
-    flexDirection: 'row-reverse',
-    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-      transform: 'rotate(90deg)',
-    },
-    '& .MuiAccordionSummary-content': {
-      marginLeft: theme.spacing(1),
-    },
-  }));
-  
-  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
-    padding: theme.spacing(2),
-    borderTop: '1px solid rgba(0, 0, 0, .125)',
-  }));
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
 
-export default function PatientForm(){
-    const [expanded, setExpanded] = React.useState<string | false>('panel1');
-    const [isChecked, setIsChecked] = React.useState(false);
-    const [signature,setSignature]=React.useState('');
- 
-    const [patient, setPatient] = React.useState<Patient>({
-        fullName: "",
-        homePhone: "",
-        cellPhone: "",
-        email: "",
-        age: 0,
-        dateOfBirth: "",
-        socialSecurityNumber: "",
-        mailingAddress: "",
-        city: "",
-        state: "",
-        zipCode: "",
-        gender: "",
-        maritalStatus: "",
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+type Props = {
+  type: any;
+};
+
+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<any>();
+  const [section1Data, setSection1Data] = React.useState<any>({});
+  const [section2Data, setSection2Data] = React.useState<any>({});
+  const [section3Data, setSection3Data] = React.useState<any>({});
+  const [section4Data, setSection4Data] = React.useState<any>({});
+  const [section5Data, setSection5Data] = React.useState<any>({});
+  const [section6Data, setSection6Data] = React.useState<any>({});
+  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,
+    homePhone?: string | undefined,
+    cellPhone?: string | undefined,
+    email?: string | undefined,
+    age?: number | undefined | string,
+    dateOfBirth?: string | undefined,
+    socialSecurityNumber?: string | undefined,
+    mailingAddress?: string | undefined,
+    city?: string | undefined,
+    state?: string | undefined,
+    zipCode?: string | undefined,
+    gender?: string | undefined
+  ) => {
+    setSection1Data({
+      fullName,
+      homePhone,
+      cellPhone,
+      email,
+      age,
+      dateOfBirth,
+      socialSecurityNumber,
+      mailingAddress,
+      city,
+      state,
+      zipCode,
+      gender,
+    });
+  };
+
+  const handleFormSection2Data = (
+    maritalStatus: string | undefined,
+    numberOfChildren: string | undefined,
+    occupation: string | undefined,
+    hoursPerWeek: number | string | undefined,
+    employer: string | undefined,
+    businessPhone: string | undefined,
+    spouseName: string | undefined,
+    spouseEmployer: string | undefined,
+    spouseBusinessPhone: string | undefined,
+    emergencyContact: string | undefined,
+    relationship: string | undefined,
+    spousePhone: string | undefined
+  ) => {
+    setSection2Data({
+      maritalStatus,
+      numberOfChildren,
+      occupation,
+      hoursPerWeek,
+      employer,
+      businessPhone,
+      spouseName,
+      spouseEmployer,
+      spouseBusinessPhone,
+      emergencyContact,
+      relationship,
+      spousePhone,
+    });
+  };
+
+  const handleFormSection3Data = (
+    physicianname: string | undefined,
+    physiciancity: string | undefined,
+    physicianstate: string | undefined,
+    physicianphone: string | undefined,
+    chiropractorName: string | undefined,
+    chiropractorState: string | undefined,
+    xray: string | undefined,
+    haveChiropractor: string | undefined,
+    reference: string | undefined,
+    visitDetails: string | undefined,
+    cellPhoneProvider: string | undefined
+  ) => {
+    setSection3Data({
+      physicianname,
+      physiciancity,
+      physicianstate,
+      physicianphone,
+      chiropractorName,
+      chiropractorState,
+      xray,
+      haveChiropractor,
+      reference,
+      visitDetails,
+      cellPhoneProvider,
+    });
+  };
+
+  const handleFormSection4Data = (
+    chiefComplaint: string | undefined,
+    painWorse: any,
+    painBetter: any,
+    painQuality: any,
+    painWorstTime: any,
+    currentComplaintIssues: any,
+    painDuration: string | undefined,
+    currentTreatment: string | undefined,
+    treatmentGoal: string | undefined,
+    selfTreatment: string | undefined
+  ) => {
+    setSection4Data({
+      chiefComplaint,
+      painWorse,
+      painBetter,
+      painQuality,
+      painWorstTime,
+      currentComplaintIssues,
+      painDuration,
+      currentTreatment,
+      treatmentGoal,
+      selfTreatment,
+    });
+  };
+
+  const handleFormSection5Data = (
+    generalHealth: string | undefined,
+    presentProblemBefore: string | undefined,
+    ifYespresentProblemBefore: string | undefined,
+    ifYestreatmentProvided: string | undefined,
+    ifYesOutcome: string | undefined,
+    strokeBloodclotting: string | undefined,
+    ifYesstrokeBloodclotting: string | undefined,
+    dizzinessFetigue: string | undefined,
+    ifyesdizzinessFetigue: string | undefined,
+    antiColligent: string | undefined,
+    injuriesHospitalization: string | undefined,
+    supplementsOrDrugs: string | undefined
+  ) => {
+    setSection5Data({
+      generalHealth,
+      presentProblemBefore,
+      ifYespresentProblemBefore,
+      ifYestreatmentProvided,
+      ifYesOutcome,
+      strokeBloodclotting,
+      ifYesstrokeBloodclotting,
+      dizzinessFetigue,
+      ifyesdizzinessFetigue,
+      antiColligent,
+      injuriesHospitalization,
+      supplementsOrDrugs,
+    });
+  };
+
+  const handleFormSection6Data = (
+    eyes: string | undefined,
+    IntestinesBowls: string | undefined,
+    jointsBones: string | undefined,
+    allergies: string | undefined,
+    earsNoseMouth: string | undefined,
+    urinary: string | undefined,
+    skin: string | undefined,
+    psychological: string | undefined,
+    heart: string | undefined,
+    muscles: string | undefined,
+    internalOrgans: string | undefined,
+    gynecological: string | undefined,
+    lungsBreathing: string | undefined,
+    nerves: string | undefined,
+    blood: string | undefined,
+    prostate: string | undefined,
+    explanation: string | undefined
+  ) => {
+    setSection6Data({
+      eyes,
+      IntestinesBowls,
+      jointsBones,
+      allergies,
+      earsNoseMouth,
+      urinary,
+      skin,
+      psychological,
+      heart,
+      muscles,
+      internalOrgans,
+      gynecological,
+      lungsBreathing,
+      nerves,
+      blood,
+      prostate,
+      explanation,
+    });
+  };
+
+  const handleFormSection7Data = (
+    hobbies: string | undefined,
+    educationLevel: string | undefined,
+    excercise: string | undefined,
+    excerciseExplanation: string | undefined,
+    tobacco: string | undefined,
+    tobaccoExplanation: string | undefined,
+    alcohol: string | undefined,
+    alcoholExplanation: string | undefined,
+    healthyDiet: string | undefined,
+    healthyDietExplanation: string | undefined,
+    sleep: string | undefined,
+    sleepExplanation: string | undefined,
+    workSchool: string | undefined,
+    workSchoolExplanation: string | undefined,
+    familyLife: string | undefined,
+    familyLifeExplanation: string | undefined,
+    drugs: string | undefined,
+    drugsExplanation: string | undefined
+  ) => {
+    setSection7Data({
+      hobbies,
+      educationLevel,
+      excercise,
+      excerciseExplanation,
+      tobacco,
+      tobaccoExplanation,
+      alcohol,
+      alcoholExplanation,
+      healthyDiet,
+      healthyDietExplanation,
+      sleep,
+      sleepExplanation,
+      workSchool,
+      workSchoolExplanation,
+      familyLife,
+      familyLifeExplanation,
+      drugs,
+      drugsExplanation,
+    });
+  };
+
+  const handleFormSection8Data = (
+    familyHistory: string | undefined,
+    sleep: string | undefined,
+    pillow: string | undefined,
+    orthotics: string | undefined,
+    brestExam: any,
+    pregnancy: string | undefined,
+    menstralCycle: any
+  ) => {
+    setSection8Data({
+      familyHistory,
+      sleep,
+      pillow,
+      orthotics,
+      brestExam,
+      pregnancy,
+      menstralCycle,
+    });
+  };
+
+  const handleSubmit = () => {
+    const saved = JSON.parse(localStorage.getItem('entry') || '{}');
+    const newPatientData = {
+      personalInformation: section1Data,
+      familyInformation: section2Data,
+      medicalHistory: section3Data,
+      injuryDetails: section4Data,
+      pastTreatment: section5Data,
+      systemReviewQuestions: section6Data,
+      recreationalActivities: section7Data,
+      otherDetails: section8Data,
+      injuryPainDetails: saved.entries,
+      signature: signature,
+    };
+
+    // Create a copy of the existing data array and push the new patient data
+    const updatedAllPatientData = [...allPatientData, newPatientData];
+
+    // Update the state with the new array
+    setAllPatientData(updatedAllPatientData);
+
+    localStorage.setItem('patientData', JSON.stringify(newPatientData));
+
+    if (
+      section1Data.fullName !== '' &&
+      section1Data.cellPhone &&
+      /^\d{10}$/.test(section1Data.cellPhone) &&
+      section1Data.email &&
+      /^\S+@\S+\.\S+$/.test(section1Data.email) &&
+      section1Data.age &&
+      section1Data.age !== '' &&
+      Number(section1Data.age) >= 0 &&
+      section1Data.mailingAddress &&
+      section1Data.mailingAddress !== ''
+    ) {
+      TextFile();
+      setPatientDetailsButtonFlag(true)
+      setAlertProps({
+        open: true,
+        severity: 'success',
+        message: 'The patient details have been submitted!',
+        duration: 5000,
       });
-    
-      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-      };
+    } else {
+      setAlertProps({
+        open: true,
+        severity: 'error',
+        message: 'Please fill all the mandatory fields with valid data!',
+        duration: 4000,
+      });
+    }
+  };
 
-      const handleExpandChange =
-        (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
-        setExpanded(newExpanded ? panel : false);
-        };
- 
-      const handleCheckboxChange = (event:any) => {
-        setIsChecked(event.target.checked);
-      };
-    
+  const TextFile = () => {
+    const element = document.createElement('a');
+    //@ts-ignore
+    const textFile = new Blob([localStorage.getItem('patientData')], {
+      type: 'text/json',
+    });
+    element.href = URL.createObjectURL(textFile);
+    element.download = 'patientData.json';
+    document.body.appendChild(element);
+    element.click();
+  };
 
-    return(
-        <>
-            <Paper elevation={0} className='app-screen-constants'>
-                <Header/>
-                    <Paper  elevation={0} sx={{margin:4, minHeight:550}} >
-                    <form onSubmit={handleSubmit}>
-                        <Typography sx={{fontSize:20}}  gutterBottom>
-                            Confidential Patient Information
-                        </Typography>
-                        <Grid>
-                        <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
-                            
-                            <AccordionSummary
-                                expandIcon={<ExpandMoreIcon />}
-                                aria-controls="panel1a-content"
-                                id="panel1a-header"
-                                >
-                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
-                            </AccordionSummary>
-                           
-                            <AccordionDetails>
-                                <PersonalSection/>
-                            </AccordionDetails>
-                           
-                        </Accordion>
+  const handleExpandChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
 
-                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
-                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
-                            </AccordionSummary>
+  const handleCheckboxChange = (event: any) => {
+    setIsChecked(event.target.checked);
+  };
 
-                            <AccordionDetails>
-                                <FamilyFormSection/>
-                            </AccordionDetails>
-                        </Accordion>
+  const handleAlertClose = () => {
+    setAlertProps({});
+  };
 
-                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
-                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <MedicalHistory/>
-                            </AccordionDetails>
-                        </Accordion>
+  const patientData = localStorage.getItem('patientData')
+    ? //@ts-ignore
+      JSON.parse(localStorage.getItem('patientData'))
+    : [];
 
-                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
-                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <PainAnalysisSection4/>
-                            </AccordionDetails>
-                        </Accordion>
+  return (
+    <>
+      {alertProps && alertProps.open && (
+        <AlertDialog
+          open={alertProps.open}
+          message={alertProps.message}
+          severity={alertProps.severity}
+          duration={alertProps.duration}
+          handleAlertClose={handleAlertClose}
+        />
+      )}
+      <Paper elevation={0} className='app-screen-constants'>
+        <Header />
+        <Paper elevation={0} sx={{ margin: '2%', minHeight: 550 }}>
+          {/* <form onSubmit={handleSubmit}> */}
+          <Typography sx={{ fontSize: 20 }} gutterBottom>
+            Confidential Patient Information
+          </Typography>
+          <Grid>
+            <Accordion
+              expanded={expanded === 'panel1'}
+              onChange={handleExpandChange('panel1')}
+            >
+              <AccordionSummary
+                // expandIcon={<ExpandMoreIcon />}
+                aria-controls='panel1a-content'
+                id='panel1a-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Personal Information
+                </Typography>
+              </AccordionSummary>
 
-                        <Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
-                            <AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <PastTreatment5/>
-                            </AccordionDetails>
-                        </Accordion>
+              <AccordionDetails>
+                <PersonalSection
+                  handleFormSection1Data={handleFormSection1Data}
+                  patientDataDiplay={patientData.personalInformation}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
 
-                        <Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
-                            <AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
-                                <Typography sx={{fontSize:18}}>System Review Questions</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <SystemReviewSection6/>
-                            </AccordionDetails>
-                        </Accordion>
+            <Accordion
+              expanded={expanded === 'panel2'}
+              onChange={handleExpandChange('panel2')}
+            >
+              <AccordionSummary
+                aria-controls='panel2d-content'
+                id='panel2d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Family Information
+                </Typography>
+              </AccordionSummary>
 
-                        <Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
-                            <AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
-                                <Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <RecreationalHobbiesSection7/>
-                            </AccordionDetails>
-                        </Accordion>
+              <AccordionDetails>
+                <FamilyFormSection
+                  handleFormSection2Data={handleFormSection2Data}
+                  patientDataDiplay={patientData.familyInformation}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
 
-                        <Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
-                            <AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
-                                <Typography sx={{fontSize:18}}>Other Details</Typography>
-                            </AccordionSummary>
-                            
-                            <AccordionDetails>
-                                <OtherDetails8/>
-                            </AccordionDetails>
-                        </Accordion>
+            <Accordion
+              expanded={expanded === 'panel3'}
+              onChange={handleExpandChange('panel3')}
+            >
+              <AccordionSummary
+                aria-controls='panel3d-content'
+                id='panel3d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Medical History Information
+                </Typography>
+              </AccordionSummary>
 
-                        <Grid container>
+              <AccordionDetails>
+                <MedicalHistory
+                  handleFormSection3Data={handleFormSection3Data}
+                  patientDataDiplay={patientData.medicalHistory}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
 
-                        <Grid item xs={12} className='collapsable-form-style-multiline'>
-                          <FormGroup sx={{ marginTop: 3 }}>
-                            <FormControlLabel
-                              required
-                              control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
-                              label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
-                            />
-                          </FormGroup>
-                        </Grid>
+            <Accordion
+              expanded={expanded === 'panel9'}
+              onChange={handleExpandChange('panel9')}
+            >
+              <AccordionSummary
+                aria-controls='panel9d-content'
+                id='panel9d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Pain Zone
+                </Typography>
+              </AccordionSummary>
 
-                        <Grid item xs={6} className='collapsable-form-style'>
-                              <TextField 
-                              
-                              variant="outlined"
-                              label="SIGNATURE" 
-                              name='treatmentGoal'
-                              placeholder='Please type your name'
-                              onChange={(event) => {
-                                setSignature(event.target.value)
-                              }}
-                              />
-                        </Grid>
-                        </Grid>                
-                        <Grid>
-                          <Button
-                            type="submit"
-                            variant="contained"
-                            color="primary"
-                            sx={{ margin: 5, left: '40%', width: '200px' }}
-                            disabled={isChecked==false || signature==''}
-                          >
-                            Submit
-                          </Button>
-                        </Grid>
-                        </Grid>
-                        </form>
-                       
-                    </Paper>
-                <Footer/>
-             </Paper>
-        </>
-    )
-}
+              <AccordionDetails>
+                {type === 'fill' ? (
+                  <PatientImageMarker />
+                ) : (
+                  <ViewPatientImageMarker />
+                )}
+              </AccordionDetails>
+            </Accordion>
+
+            <Accordion
+              expanded={expanded === 'panel4'}
+              onChange={handleExpandChange('panel4')}
+            >
+              <AccordionSummary
+                aria-controls='panel4d-content'
+                id='panel4d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Injury Details
+                </Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <PainAnalysisSection4
+                  handleFormSection4Data={handleFormSection4Data}
+                  patientDataDiplay={patientData.injuryDetails}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
+
+            <Accordion
+              expanded={expanded === 'panel5'}
+              onChange={handleExpandChange('panel5')}
+            >
+              <AccordionSummary
+                aria-controls='panel5d-content'
+                id='panel5d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Past Treatment Details
+                </Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <PastTreatment5
+                  handleFormSection5Data={handleFormSection5Data}
+                  patientDataDiplay={patientData.pastTreatment}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
+
+            <Accordion
+              expanded={expanded === 'panel6'}
+              onChange={handleExpandChange('panel6')}
+            >
+              <AccordionSummary
+                aria-controls='panel6d-content'
+                id='panel6d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  System Review Questions
+                </Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <SystemReviewSection6
+                  handleFormSection6Data={handleFormSection6Data}
+                  patientDataDiplay={patientData.systemReviewQuestions}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
+
+            <Accordion
+              expanded={expanded === 'panel7'}
+              onChange={handleExpandChange('panel7')}
+            >
+              <AccordionSummary
+                aria-controls='panel7d-content'
+                id='panel7d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Recreational Activities/Hobbies Details
+                </Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <RecreationalHobbiesSection7
+                  handleFormSection7Data={handleFormSection7Data}
+                  patientDataDiplay={patientData.recreationalActivities}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
+
+            <Accordion
+              expanded={expanded === 'panel8'}
+              onChange={handleExpandChange('panel8')}
+            >
+              <AccordionSummary
+                aria-controls='panel8d-content'
+                id='panel8d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>Other Details</Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <OtherDetails8
+                  handleFormSection8Data={handleFormSection8Data}
+                  patientDataDiplay={patientData.otherDetails}
+                  type={type}
+                />
+              </AccordionDetails>
+            </Accordion>
+
+            <Grid container>
+              <Grid item xs={12} className='collapsable-form-style-multiline'>
+                <FormGroup sx={{ marginTop: 3 }}>
+                  <FormControlLabel
+                    required
+                    disabled={type == 'display'}
+                    control={
+                      <Checkbox
+                        checked={type === 'display' ? true : isChecked}
+                        onChange={handleCheckboxChange}
+                      />
+                    }
+                    label='I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history.'
+                  />
+                </FormGroup>
+              </Grid>
+
+              <Grid item xs={12}>
+                <Grid container spacing={2} flexDirection={'row'}>
+                  {type !== 'display' ? (
+                    <>
+
+                    <Grid item className='collapsable-form-style'>
+                      <FormLabel sx={{marginLeft:'10px'}}>  Signature:</FormLabel>
+                      <SignatureComponent signature={signature} setSignature={setSignature} />
+                    </Grid>
+
+                      <Grid item>
+                        <FormLabel sx={{ margin: 0, padding: 0 }}>
+                          Please verify your signature here:
+                        </FormLabel>
+                        <Box
+                          sx={{
+                            border: '1px solid black',
+                            borderRadius: 2,
+                            height: '110px',
+                            width: '250px',
+                          }}
+                        >
+                          <img
+                            src={signature}
+                            style={{ height: '110px', width: '250px' }}
+                          />
+                        </Box>
+                      </Grid>
+                    </>
+                  ) : (
+                    <Grid item>
+                      <FormLabel sx={{ margin: 0, padding: 0 }}>
+                        Your signature:
+                      </FormLabel>
+                      <Box
+                        sx={{
+                          border: '1px solid black',
+                          borderRadius: 2,
+                          height: '110px',
+                          width: '250px',
+                        }}
+                      >
+                        <img
+                          src={patientData.signature}
+                          style={{ height: '110px', width: '250px' }}
+                        />
+                      </Box>
+                    </Grid>
+                  )}
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid container flexDirection={'row-reverse'}>
+              {patientDetailsButtonFlag && type!=='display'?
+            <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  onClick={(e)=>{
+                    
+                  }}
+                  component={Link}
+                  to='/view-details'
+                >
+                  View Patient Details
+                </Button>
+              </Grid>:null}
+
+              {type=='display'?
+            <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  onClick={(e)=>{
+                    
+                  }}
+                  component={Link}
+                  to='/'
+                >
+                  New Patient Form
+                </Button>
+              </Grid>:null}
+
+              <Grid item>
+                <Button
+                  variant='contained'
+                  color='primary'
+                  sx={{ margin: 5, width: '200px' }}
+                  disabled={
+                    isChecked == false ||
+                    signature == undefined ||
+                    type == 'display'
+                  }
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+          {/* </form> */}
+        </Paper>
+        <Footer />
+      </Paper>
+    </>
+  );
+}

src/Components/PatientForm/PersonalSection1.tsx

@@ -1,268 +1,539 @@
 import * as React from 'react';
-import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import { useFormik } from "formik";
-import * as yup from "yup";
+import {
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { useEffect } from 'react';
 
 interface Patient {
-    fullName: string;
-    homePhone: string;
-    cellPhone: string;
-    email: string;
-    age: number | string;
-    dateOfBirth: string;
-    socialSecurityNumber: string;
-    mailingAddress: string;
-    city: string;
-    state: string;
-    zipCode: string;
-    gender: string;
-    maritalStatus: string;
-  }
+  fullName: string;
+  homePhone: string;
+  cellPhone: string;
+  email: string;
+  age: number | string;
+  dateOfBirth: string;
+  socialSecurityNumber: string;
+  mailingAddress: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  gender: string;
+}
 
-  const validationSchema = yup.object({
-    fullName: yup.string().required("Full name is required"),
-    homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
-    cellPhone: yup.string().required("Phone number is required").matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-    email: yup.string().required("Email is required"),
-    age: yup.number().positive().integer("Age must be a positive integer").required("Age is required"),
-    dateOfBirth: yup.date().required("Date of birth is required"),
-    socialSecurityNumber: yup.string(),
-    mailingAddress: yup.string().required("Mailing address is required"),
-    city: yup.string().required("City is required"),
-    state: yup.string().required("State is required"),
-    zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
+type Props = {
+  handleFormSection1Data: (
+    fullName?: string | undefined,
+    homePhone?: string | undefined,
+    cellPhone?: string | undefined,
+    email?: string | undefined,
+    age?: number | undefined | string,
+    dateOfBirth?: string | undefined,
+    socialSecurityNumber?: string | undefined,
+    mailingAddress?: string | undefined,
+    city?: string | undefined,
+    state?: string | undefined,
+    zipCode?: string | undefined,
+    gender?: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function PersonalSection({
+  handleFormSection1Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [birthDateValue, setBirthDateValue] = React.useState<any>();
+  const [patient, setPatient] = React.useState<any>({
+    fullName: '',
+    fullNameError: false,
+    homePhone: '',
+    cellPhone: '',
+    cellPhoneError: false,
+    email: '',
+    emailError: false,
+    age: '',
+    ageError: false,
+    dateOfBirth: birthDateValue,
+    socialSecurityNumber: '',
+    mailingAddress: '',
+    mailingAddressFalse: false,
+    city: '',
+    state: '',
+    zipCode: '',
+    gender: 'male',
   });
 
-export default function PersonalSection(){
+  useEffect(() => {
+    handleFormSection1Data(
+      patient.fullName,
+      patient.homePhone,
+      patient.cellPhone,
+      patient.email,
+      patient.age,
+      birthDateValue,
+      patient.socialSecurityNumber,
+      patient.mailingAddress,
+      patient.city,
+      patient.state,
+      patient.zipCode,
+      patient.gender
+    );
+  }, [patient]);
 
-    const [startDateValue, setStartDateValue] = React.useState<any>();
-    const [emailValue, setEmailValue]= React.useState<string>('');
-    const [patient, setPatient] = React.useState<Patient>({
-        fullName: "",
-        homePhone: "",
-        cellPhone: "",
-        email: "",
-        age: 0,
-        dateOfBirth: "",
-        socialSecurityNumber: "",
-        mailingAddress:"",
-        city: "",
-        state: "",
-        zipCode: "",
-        gender: "male",
-        maritalStatus: "",
-      });
+  return (
+    <>
+      <Grid container direction='row' className='section1-test-class'>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Patient's Full Name"
+            name='fullName'
+            placeholder='Please enter your name'
+            value={
+              type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                fullName: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: false,
+                }));
+              }
+            }}
+            required
+            error={patient.fullNameError}
+            helperText={patient.fullNameError ? 'Please enter your name' : ''}
+          />
+        </Grid>
 
-      const formik = useFormik<Patient>({
-        initialValues: {
-          fullName: "",
-          homePhone: "",
-          cellPhone: "",
-          email: "",
-          age: "",
-          dateOfBirth: "",
-          socialSecurityNumber: "",
-          mailingAddress:"",
-          city: "",
-          state: "",
-          zipCode: "",
-          gender: "male",
-          maritalStatus: "",
-        },
-        validationSchema,
-        onSubmit: (values) => {
-          // Do something with the patient data
-          console.log(values);
-        },
-      });
-    
-      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        console.log("dsfsdfsdf",event.target.value)
-        const { name, value } = event.target;
-        setPatient((prevPatient) => ({
-          ...prevPatient,
-          [name]: value,
-        }));
-      };
-    
-    return(
-        <>
-        <Grid container direction="row" className='section1-test-class'>
-            <Grid item xs={4} className='collapsable-form-style '>
-             <TextField
-                    variant="outlined"
-                    label="Patient's Full Name"
-                    name="fullName"
-                    placeholder='Please enter your name'
-                    value={formik.values.fullName}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.fullName && Boolean(formik.errors.fullName)}
-                    helperText={formik.touched.fullName && formik.errors.fullName}
-                    required
-                />
-                </Grid>
-               
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    required
-                    variant="outlined"
-                    label="Phone Number"
-                    name="cellPhone"
-                    placeholder='Please enter your cell Phone number'
-                    value={formik.values.cellPhone}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
-                    helperText={formik.touched.cellPhone && formik.errors.cellPhone}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Phone Number'
+            name='cellPhone'
+            type='number'
+            placeholder='Please enter your cell Phone number'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.cellPhone
+                : patient.cellPhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              let value = e.target.value;
+              if (value[0] === '0') {
+                value = value.slice(1);
+              }
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                cellPhone: value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\d{10}$/.test(e.target.value)) {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: false,
+                }));
+              }
+            }}
+            error={patient.cellPhoneError}
+            helperText={
+              patient.cellPhoneError
+                ? 'Please enter a valid 10-digit phone number'
+                : ''
+            }
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Home Phone Number"
-                    name="homePhone"
-                    placeholder='Please enter your home phone'
-                    value={formik.values.homePhone}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
-                    helperText={formik.touched.homePhone && formik.errors.homePhone}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Home Phone Number'
+            name='homePhone'
+            type='number'
+            placeholder='Please enter your home phone'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.homePhone
+                : patient.homePhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                homePhone: e.target.value,
+              }));
+            }}
+            // error={!(/^\d{10}$/.test(patient.homePhone))}
+            // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Email"
-                    name="email"
-                    placeholder='Please enter your email'
-                    value={emailValue}
-                    onChange={(e)=>{
-                        setEmailValue(e.target.value)
-                    }}
-                    onBlur={formik.handleBlur}
-                    // error={formik.touched.email && Boolean(formik.errors.email)}
-                    // helperText={formik.touched.email && formik.errors.email}
-                />
-                </Grid>
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    required
-                    variant="outlined"
-                    label="Age"
-                    name="age"
-                    type="number"
-                    placeholder='Please enter your age'
-                    value={formik.values.age}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.age && Boolean(formik.errors.age)}
-                    helperText={formik.touched.age && formik.errors.age}
-                />
-                </Grid>
-                <Grid item xs={4} className='collapsable-form-style'>
-                <FormControl >
-        
-                <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    label="Date of Birth"
-                    value={startDateValue}
-                    onChange={(newValue) => {
-                        setStartDateValue(newValue);
-                    }}
-                    renderInput={(params) => <TextField required  variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-                </FormControl>
-            
-                </Grid>
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Social Security Number"
-                    name="socialSecurityNumber"
-                    value={formik.values.socialSecurityNumber}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-                    helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Email'
+            name='email'
+            placeholder='Please enter your email'
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                email: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: false,
+                }));
+              }
+            }}
+            error={patient.emailError}
+            helperText={
+              patient.emailError ? 'Please enter a valid email address' : ''
+            }
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Age'
+            name='age'
+            type='number'
+            placeholder='Please enter your age'
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                age: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: false,
+                }));
+              }
+            }}
+            error={patient.ageError}
+            helperText={patient.ageError ? 'Please enter your age' : ''}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                    <TextField
-                        required
-                        variant="outlined"
-                        label="Mailing Address"
-                        name="mailingAddress"
-                        value={formik.values.mailingAddress}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
-                        helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
-                    />
-                </Grid>                
-            
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="State"
-                    name="state"
-                    value={formik.values.state}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    // error={formik.touched.state && Boolean(formik.errors.state)}
-                    // helperText={formik.touched.state && formik.errors.state}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                label='Date of Birth'
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.dateOfBirth
+                    : birthDateValue
+                }
+                disabled={type == 'display'}
+                onChange={(newValue) => {
+                  setBirthDateValue(newValue);
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                    <TextField
-                        required
-                        variant="outlined"
-                        label="City"
-                        name="city"
-                        value={formik.values.city}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        error={formik.touched.city && Boolean(formik.errors.city)}
-                        helperText={formik.touched.city && formik.errors.city}
-                    />
-                </Grid>
-                
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Zip Code"
-                    name="zipCode"
-                    value={formik.values.zipCode}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
-                    helperText={formik.touched.zipCode && formik.errors.zipCode}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Social Security Number'
+            name='socialSecurityNumber'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.socialSecurityNumber
+                : patient.socialSecurityNumber
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                socialSecurityNumber: e.target.value,
+              }));
+            }}
+            // onBlur={formik.handleBlur}
+            // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
+            // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
-                <FormControl >
-                <FormLabel>Gender</FormLabel>
-                <RadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue="male"
-                    name="radio-buttons-group"
-                    onChange={handleChange}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <FormControlLabel value="male" control={<Radio />} label="Male" />
-                    <FormControlLabel value="female" control={<Radio />} label="Female" />
-                </RadioGroup>
-                </FormControl>
-                </Grid>
-            </Grid>       
-        </>
-    )
-}
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Mailing Address'
+            name='mailingAddress'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.mailingAddress
+                : patient.mailingAddress
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                mailingAddress: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: false,
+                }));
+              }
+            }}
+            error={patient.mailingAddressError}
+            helperText={
+              patient.mailingAddressError
+                ? 'Please enter your mailing address'
+                : ''
+            }
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='State'
+            name='state'
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                state: e.target.value,
+              }));
+            }}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='City'
+            name='city'
+            value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                city: e.target.value,
+              }));
+            }}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Zip Code'
+            name='zipCode'
+            value={
+              type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                zipCode: e.target.value,
+              }));
+            }}
+            // onBlur={formik.handleBlur}
+            // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
+            // helperText={formik.touched.zipCode && formik.errors.zipCode}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormControl>
+            <FormLabel>Gender</FormLabel>
+            <RadioGroup
+              aria-labelledby='demo-radio-buttons-group-label'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
+              }
+              name='radio-buttons-group'
+              onChange={(e) => {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  gender: e.target.value,
+                }));
+              }}
+              sx={{ display: 'flex', flexDirection: 'row' }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='male'
+                control={<Radio />}
+                label='Male'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='female'
+                control={<Radio />}
+                label='Female'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -1,7 +1,7 @@
 import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
-import React from "react";
+import React, { useEffect } from "react";
 
-interface FormValues {
+interface Patient {
     hobbies: string;
     educationLevel: string;
     excercise: string;
@@ -22,8 +22,33 @@ interface FormValues {
     drugsExplanation:string;
   }
 
-export default function RecreationalHobbiesSection7(){
-    const [values, setValues] = React.useState<FormValues>({
+  type Props = {
+    handleFormSection7Data:(
+      hobbies: string|undefined,
+      educationLevel: string|undefined,
+      excercise: string|undefined,
+      excerciseExplanation: string|undefined,
+      tobacco: string|undefined,
+      tobaccoExplanation: string|undefined,
+      alcohol: string|undefined,
+      alcoholExplanation: string|undefined,
+      healthyDiet: string|undefined,
+      healthyDietExplanation: string|undefined,
+      sleep: string|undefined,
+      sleepExplanation: string|undefined,
+      workSchool: string|undefined,
+      workSchoolExplanation: string|undefined,
+      familyLife: string|undefined,
+      familyLifeExplanation: string|undefined,
+      drugs: string|undefined,
+      drugsExplanation:string|undefined,
+    )=> void
+    patientDataDiplay:any;
+    type:string;
+  }
+
+export default function RecreationalHobbiesSection7({handleFormSection7Data,patientDataDiplay,type}:Props){
+    const [patient, setPatient] = React.useState<Patient>({
           hobbies: '',
           educationLevel: '',
           excercise:'',
@@ -43,6 +68,31 @@ export default function RecreationalHobbiesSection7(){
           drugs: '',
           drugsExplanation:''
       });
+
+
+    useEffect(()=>{
+      handleFormSection7Data(
+        patient.hobbies,
+        patient.educationLevel,
+        patient.excercise,
+        patient.excerciseExplanation,
+        patient.tobacco,
+        patient.tobaccoExplanation,
+        patient.alcohol,
+        patient.alcoholExplanation,
+        patient.healthyDiet,
+        patient.healthyDietExplanation,
+        patient.sleep,
+        patient.sleepExplanation,
+        patient.workSchool,
+        patient.workSchoolExplanation,
+        patient.familyLife,
+        patient.familyLifeExplanation,
+        patient.drugs,
+        patient.drugsExplanation
+      )
+    },[patient])
+    
     return(
         <>
         
@@ -53,9 +103,10 @@ export default function RecreationalHobbiesSection7(){
                 multiline
                 variant="outlined"
                 label="" 
-                name='explanation'
+                value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies}
+                disabled={type=='display'}
                 onChange={(event:any) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     hobbies: event.target.value,
                   }));
@@ -68,49 +119,60 @@ export default function RecreationalHobbiesSection7(){
                     <FormLabel>Your education level:</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.educationLevel:patient.educationLevel}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             educationLevel: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="High School" control={<Radio />} label="High School" />
-                        <FormControlLabel value="Some college" control={<Radio />} label="Some college" />
-                        <FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
-                        <FormControlLabel value="Post college" control={<Radio />} label="Post college" />
-                        <FormControlLabel value="Other" control={<Radio />} label="Other" />
+                        <FormControlLabel disabled={type=='display'} value="High School" control={<Radio />} label="High School" />
+                        <FormControlLabel disabled={type=='display'} value="Some college" control={<Radio />} label="Some college" />
+                        <FormControlLabel disabled={type=='display'} value="College Graduate" control={<Radio />} label="College Graduate" />
+                        <FormControlLabel disabled={type=='display'} value="Post college" control={<Radio />} label="Post college" />
+                        <FormControlLabel disabled={type=='display'} value="Other" control={<Radio />} label="Other" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.excercise:patient.excercise}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             excercise: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.excercise!=='Yes'}
+                disabled={patient.excercise!=='Yes'||type=='display'}
                 variant="outlined"
                 label="Times per week?" 
                 name='treatmentGoal'
+                value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     excerciseExplanation: event.target.value,
                   }));
@@ -118,67 +180,87 @@ export default function RecreationalHobbiesSection7(){
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.tobacco:patient.tobacco}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             tobacco: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.tobacco!=='Yes'}
+                disabled={patient.tobacco!=='Yes'||type=='display'}
+                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'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
-                    excerciseExplanation: event.target.value,
+                    tobaccoExplanation: event.target.value,
                   }));
                 }}
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.alcohol:patient.alcohol}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             alcohol: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.alcohol!=='Yes'}
+                disabled={patient.alcohol!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
                 variant="outlined"
                 label="How many drinks per week?" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     alcoholExplanation: event.target.value,
                   }));
@@ -186,33 +268,43 @@ export default function RecreationalHobbiesSection7(){
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.healthyDiet:patient.healthyDiet}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             healthyDiet: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.healthyDiet!=='No'}
+                disabled={patient.healthyDiet!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     healthyDietExplanation: event.target.value,
                   }));
@@ -220,33 +312,43 @@ export default function RecreationalHobbiesSection7(){
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.sleep:patient.sleep}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             sleep: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.sleep!=='No'}
+                disabled={patient.sleep!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.sleepExplanation:patient.sleepExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     sleepExplanation: event.target.value,
                   }));
@@ -254,33 +356,43 @@ export default function RecreationalHobbiesSection7(){
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             workSchool: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.workSchool!=='Yes'}
+                disabled={patient.workSchool!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     workSchool: event.target.value,
                   }));
@@ -288,33 +400,43 @@ export default function RecreationalHobbiesSection7(){
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.familyLife:patient.familyLife}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             familyLife: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.familyLife!=='Yes'}
+                disabled={patient.familyLife!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     familyLifeExplanation: event.target.value,
                   }));
@@ -322,33 +444,43 @@ export default function RecreationalHobbiesSection7(){
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.drugs:patient.drugs}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             drugs: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={12}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={values.drugs!=='Yes'}
+                disabled={patient.drugs!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.drugsExplanation:patient.drugsExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     drugsExplanation: event.target.value,
                   }));