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

Reviewed-on: #3

package-lock.json

@@ -37,6 +37,7 @@
         "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",
@@ -15795,6 +15796,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",

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/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/ImageMarker/EntryForm.tsx

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

src/Components/ImageMarker/PatientImageMarker.css

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

src/Components/ImageMarker/PatientImageMarker.tsx

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

src/Components/ImageMarker/Rating.tsx

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

src/Components/ImageMarker/ViewPatientImageMarker.tsx

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

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -19,21 +19,6 @@ interface Patient {
     spousePhone: string | undefined,
 }
 
-const validationSchema = yup.object({
-  maritalStatus:yup.string().required("Marital Status is required"),
-  numberOfChildren: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"),
-});
-
 type Props = {
     handleFormSection2Data:(
         maritalStatus: string | undefined,
@@ -49,10 +34,12 @@ type Props = {
         relationship: string | undefined,
         spousePhone: string | undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
   
 
-export default function FamilyFormSection({handleFormSection2Data}:Props){
+export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
     const [patient, setPatient] = React.useState<Patient>({
         maritalStatus:'',
         numberOfChildren:'',
@@ -93,9 +80,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
             <FormLabel>Marital Status</FormLabel>
                 <RadioGroup
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue="married"
                     name="maritalStatus"
-                    value={patient.maritalStatus}
+                    defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus}
                     sx={{display:'flex', flexDirection:'row'}}
                     onChange={(e)=>{
                         setPatient((prevValues:any) => ({
@@ -103,14 +89,12 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                             maritalStatus: e.target.value,
                           }));
                     }}
-                    // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
-                    // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
                     >
-                    <FormControlLabel value="married" control={<Radio />} label="Married" />
+                    <FormControlLabel value="married" control={<Radio />} label="Married" disabled={type=='display'}/>
-                    <FormControlLabel value="single" control={<Radio />} label="Single" />
+                    <FormControlLabel value="single" control={<Radio />} label="Single" disabled={type=='display'}/>
-                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
+                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" disabled={type=='display'}/>
-                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
+                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" disabled={type=='display'}/>
-                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
+                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" disabled={type=='display'}/>
                 </RadioGroup>
                 
             </FormControl>
@@ -131,10 +115,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         numberOfChildren: e.target.value,
                       }));
                 }}
-                value={patient.numberOfChildren}
+                value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
-                // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
-                // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -150,10 +132,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         occupation: e.target.value,
                       }));
                 }}
-                value={patient.occupation}
+                value={type=='display'?patientDataDiplay.occupation:patient.occupation}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
-                // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
-                // helperText={formik.touched.occupation && formik.errors.occupation}
                 />
                
             </Grid>
@@ -170,8 +150,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         hoursPerWeek: e.target.value,
                       }));
                 }}
-                 value={patient.hoursPerWeek}
+                value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
                  
             </Grid>
@@ -187,8 +167,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         employer: e.target.value,
                       }));
                 }}
-                value={patient.employer}
+                value={type=='display'?patientDataDiplay.employer:patient.employer}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -204,8 +184,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         businessPhone: e.target.value,
                       }));
                 }}
-                value={patient.businessPhone}
+                value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
                 />
             </Grid>
 
@@ -227,8 +207,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         spouseName: e.target.value,
                       }));
                 }}
-                 value={patient.spouseName}
+                value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -243,8 +223,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         spouseEmployer: e.target.value,
                       }));
                 }}
-                 value={patient.spouseEmployer}
+                value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -260,8 +240,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         spouseBusinessPhone: e.target.value,
                       }));
                 }}
-                  value={patient.spouseBusinessPhone}
+                value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone}
-                //   onBlur={formik.handleBlur}
+                disabled={type=='display'}
                   />
             </Grid>
             
@@ -282,8 +262,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                         emergencyContact: e.target.value,
                       }));
                 }}
-                   value={patient.emergencyContact}
+                value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
-                //    onBlur={formik.handleBlur}
+                disabled={type=='display'}
                    />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -298,8 +278,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                             relationship: e.target.value,
                           }));
                     }}
-                    value={patient.relationship}
+                    value={type=='display'?patientDataDiplay.relationship:patient.relationship}
-                    // onBlur={formik.handleBlur}
+                    disabled={type=='display'}
                     />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style '>
@@ -315,8 +295,8 @@ export default function FamilyFormSection({handleFormSection2Data}:Props){
                             spousePhone: e.target.value,
                           }));
                     }}
-                     value={patient.spousePhone}
+                    value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
-                    //  onBlur={formik.handleBlur}
+                    disabled={type=='display'}
                      />
             </Grid>
         </Grid>

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -18,19 +18,6 @@ interface Patient {
   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'),
-  haveChiropractor: Yup.boolean().required('Required'),
-  reference: Yup.boolean().required('Required'),
-  visitDetails: Yup.string().required('Required'),
-  cellPhoneProvider: Yup.string().required('Required'),
-});
-
 type Props = {
     handleFormSection3Data:(
         physicianname?: string |undefined,
@@ -45,9 +32,11 @@ type Props = {
         visitDetails?: string |undefined,
         cellPhoneProvider?: string |undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
 
-export default function MedicalHistoryForm({handleFormSection3Data}:Props){
+export default function MedicalHistoryForm({handleFormSection3Data,patientDataDiplay,type}:Props){
     
     const [patient, setPatient] = React.useState<Patient>({
         physicianname: '',
@@ -78,6 +67,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
             patient.cellPhoneProvider,
         )
       },[patient])
+
+      console.log("patientDataDiplay",patientDataDiplay)
     return(
         <>
         <Grid item xs={12} className='collapsable-form-style '> 
@@ -96,8 +87,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         physicianname: e.target.value,
                       }));
                 }}
-                value={patient.physicianname}
+                value={type=='display'?patientDataDiplay.physicianname:patient.physicianname}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -111,8 +102,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         physiciancity: e.target.value,
                       }));
                 }}
-                value={patient.physiciancity}
+                value={type=='display'?patientDataDiplay.physiciancity:patient.physiciancity}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -126,8 +117,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         physicianstate: e.target.value,
                       }));
                 }}
-                 value={patient.physicianstate}
+                value={type=='display'?patientDataDiplay.physicianstate:patient.physicianstate}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -142,8 +133,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         physicianphone: e.target.value,
                       }));
                 }}
-                value={patient.physicianphone}
+                value={type=='display'?patientDataDiplay.physicianphone:patient.physicianphone}
-                // onBlur={formik.handleBlur}
+                disabled={type=='display'}
                 />
             </Grid>
             
@@ -158,9 +149,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
-                    // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="yes"
+                    defaultValue={type=='display'?patientDataDiplay.haveChiropractor:patient.haveChiropractor}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -170,8 +160,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                     }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel value="no" control={<Radio />} label="No" />
+                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
                 </RadioGroup>
                 </FormControl>
             </Grid>
@@ -187,8 +177,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         chiropractorName: e.target.value,
                       }));
                 }}
-                 value={patient.chiropractorName}
+                value={type=='display'?patientDataDiplay.chiropractorName:patient.chiropractorName}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
             </Grid>
 
@@ -203,8 +193,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                         chiropractorState: e.target.value,
                       }));
                 }}
-                 value={patient.chiropractorState}
+                value={type=='display'?patientDataDiplay.chiropractorState:patient.chiropractorState}
-                //  onBlur={formik.handleBlur}
+                disabled={type=='display'}
                  />
             </Grid>
         </Grid>
@@ -215,7 +205,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="yes"
+                    defaultValue={type=='display'?patientDataDiplay.xray:patient.xray}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -225,8 +215,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                     }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel value="no" control={<Radio />} label="No" />
+                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -237,7 +227,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="physician"
+                    defaultValue={type=='display'?patientDataDiplay.reference:patient.reference}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -247,12 +237,12 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                     }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
+                    <FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
-                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
+                    <FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
-                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
+                    <FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
-                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
+                    <FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
-                    <FormControlLabel value="google" control={<Radio />} label="Google" />
+                    <FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
-                    <FormControlLabel value="others" control={<Radio />} label="Others" />
+                    <FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -263,7 +253,7 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="email"
+                    defaultValue={type=='display'?patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -273,8 +263,8 @@ export default function MedicalHistoryForm({handleFormSection3Data}:Props){
                     }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="email" control={<Radio />} label="Email" />
+                    <FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
-                    <FormControlLabel value="text" control={<Radio />} label="Text" />
+                    <FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
                 </RadioGroup>
             </FormControl>
         </Grid>

src/Components/PatientForm/OtherDetails8.tsx

@@ -24,9 +24,11 @@ interface Patient {
       pregnancy:string|undefined,
       menstralCycle: any,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
 
-export default function OtherDetails8({handleFormSection8Data}:Props){
+export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){
   
     const [patient, setPatient] = React.useState<Patient>({
         familyHistory: '',
@@ -71,7 +73,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                 multiline
                 variant="outlined"
                 label="" 
-                name='explanation'
+                value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory}
+                disabled={type=='display'}
                 onChange={(event:any) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -86,6 +89,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                     <FormLabel>How do you sleep?</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -93,9 +97,9 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Back" control={<Radio />} label="Back" />
+                        <FormControlLabel disabled={type=='display'} value="Back" control={<Radio />} label="Back" />
-                        <FormControlLabel value="Side" control={<Radio />} label="Side" />
+                        <FormControlLabel disabled={type=='display'} value="Side" control={<Radio />} label="Side" />
-                        <FormControlLabel value="Stomach" control={<Radio />} label="Stomach" />
+                        <FormControlLabel disabled={type=='display'} value="Stomach" control={<Radio />} label="Stomach" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -105,6 +109,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                     <FormLabel>Do you use a pillow?</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -112,8 +117,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -123,6 +128,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                     <FormLabel>Do you wear orthotics or arch support?</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -130,8 +136,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -141,7 +147,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                 <FormControl>
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DatePicker
-                    value={patient.brestExam}
+                    value={type=='display'?patientDataDiplay.brestExam:patient.brestExam}
+                    disabled={type=='display'}
                     onChange={(event) => {
                       const formattedDate = formatDate(event)
                       setPatient((prevValues) => ({
@@ -164,6 +171,7 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                     <FormLabel>Possible pregnancy?</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -171,8 +179,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -182,7 +190,8 @@ export default function OtherDetails8({handleFormSection8Data}:Props){
                 <FormControl>
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DatePicker
-                    value={patient.menstralCycle}
+                    value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle}
+                    disabled={type=='display'}
                     onChange={(event) => {
                       const formattedDate = formatDate(event)
                       setPatient((prevValues) => ({

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -31,10 +31,12 @@ interface Patient {
         treatmentGoal: string|undefined,
         selfTreatment:string|undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
   
 
-export default function PainAnalysisSection4({handleFormSection4Data}:Props){
+export default function PainAnalysisSection4({handleFormSection4Data,patientDataDiplay,type}:Props){
     const [patient, setPatient] = React.useState<Patient>({
         chiefComplaint:'',
         painWorse:[],
@@ -130,7 +132,8 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         chiefComplaint: e.target.value,
                       }));
                 }}
-                value={patient.chiefComplaint}
+                value={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint}
+                disabled={type=='display'}
                 />
             </Grid>
 
@@ -141,22 +144,27 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
                             label="Bending"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
                             label="Standing"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
                             label="Sitting"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
                             label="Walking"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
                             label="Others"
+                            disabled={type=='display'}
                         />
                     </FormGroup>
                    
@@ -170,22 +178,27 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
                             label="laying down"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
                             label="Standing"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
                             label="Sitting"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
                             label="Walking"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
                             label="Others"
+                            disabled={type=='display'}
                         />
                     </FormGroup>
                 </FormControl>
@@ -198,22 +211,27 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
                             label="Sharp"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
                             label="Dull/Ache"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
                             label="Throbbing"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
                             label="Tingling/Numbness/Burning"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
                             label="Others"
+                            disabled={type=='display'}
                         />
                     </FormGroup>
                 </FormControl>
@@ -226,22 +244,27 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
                             label="Morning"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
                             label="During day"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
                             label="Evening"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
                             label="Lying in bed"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
                             label="Others"
+                            disabled={type=='display'}
                         />
                     </FormGroup>
                 </FormControl>
@@ -258,13 +281,13 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                                 painDuration: e.target.value,
                               }));
                         }}
-                        value={patient.painDuration}
+                        value={type=='display'?patientDataDiplay.painDuration:patient.painDuration}
                         sx={{display:'flex', flexDirection:'row'}}
                         >
-                        <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
+                        <FormControlLabel disabled={type=='display'} value="0-25%" control={<Radio />} label="0-25%" />
-                        <FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
+                        <FormControlLabel disabled={type=='display'} value="25-50%" control={<Radio />} label="25-50%" />
-                        <FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
+                        <FormControlLabel disabled={type=='display'} value="50-75%" control={<Radio />} label="50-75%" />
-                        <FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
+                        <FormControlLabel disabled={type=='display'} value="75-100%" control={<Radio />} label="75-100%" />
                     </RadioGroup>
                 </FormControl>
             </Grid>
@@ -276,18 +299,22 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         <FormControlLabel
                             control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
                             label="Muscle weakness"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
                             label="Bowel/Bladder problem"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
                             label="Digestion"
+                            disabled={type=='display'}
                         />
                         <FormControlLabel
                             control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
                             label="Cardiac/Respiratory"
+                            disabled={type=='display'}
                         />
                        
                     </FormGroup>
@@ -305,11 +332,11 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                                 selfTreatment: e.target.value,
                               }));
                         }}
-                        value={patient.selfTreatment}
+                        value={type=='display'?patientDataDiplay.selfTreatment:patient.selfTreatment}
                         sx={{display:'flex', flexDirection:'row'}}
                         >
-                        <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="no" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
                     </RadioGroup>
                 </FormControl>
             </Grid>
@@ -329,7 +356,8 @@ export default function PainAnalysisSection4({handleFormSection4Data}:Props){
                         treatmentGoal: e.target.value,
                       }));
                 }}
-                value={patient.treatmentGoal}
+                value={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal}
+                disabled={type=='display'}
                 />
             </Grid>
           

src/Components/PatientForm/PastTreatment5.tsx

@@ -33,10 +33,12 @@ type Props = {
     injuriesHospitalization: string|undefined,
     supplementsOrDrugs: string|undefined,
   )=> void
+  patientDataDiplay:any;
+  type:string;
 }
 
 
-export default function PastTreatment5({handleFormSection5Data}:Props){
+export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
 
     const [patient, setPatient] = React.useState<Patient>({
         generalHealth: '',
@@ -80,6 +82,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <FormLabel>Overall your General Healgth is:</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
@@ -88,11 +91,11 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                       >
-                        <FormControlLabel value="Excellent" control={<Radio />} label="Excellent" />
+                        <FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" />
-                        <FormControlLabel value="Very Good" control={<Radio />} label="Very Good" />
+                        <FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" />
-                        <FormControlLabel value="Good" control={<Radio />} label="Good" />
+                        <FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" />
-                        <FormControlLabel value="Fair" control={<Radio />} label="Fair" />
+                        <FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" />
-                        <FormControlLabel value="Poor" control={<Radio />} label="Poor" />
+                        <FormControlLabel disabled={type=='display'} value="Poor" control={<Radio />} label="Poor" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -102,6 +105,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <FormLabel>Have you experienced your present problem before?</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
@@ -110,8 +114,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -122,7 +126,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 variant="outlined"
                 label="If yes, when?" 
                 name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'}
+                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -136,7 +140,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 variant="outlined"
                 label="Was treatment provided?If yes, by whom?" 
                 name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'}
+                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -150,7 +155,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 variant="outlined"
                 label="Outcome?" 
                 name='treatmentGoal'
-                disabled={patient.presentProblemBefore!=='Yes'}
+                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -166,6 +172,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
+                        value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
@@ -174,8 +182,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -185,7 +193,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 variant="outlined"
                 label="If yes, when?" 
                 name='treatmentGoal'
-                disabled={patient.strokeBloodclotting!=='Yes'}
+                value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
+                disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -201,6 +210,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -208,8 +218,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -220,6 +230,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 label="If yes, when?" 
                 name='treatmentGoal'
                 disabled={patient.dizzinessFetigue!=='Yes'}
+                value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -235,6 +246,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -242,8 +254,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -253,6 +265,7 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                     <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
@@ -261,8 +274,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -278,6 +291,8 @@ export default function PastTreatment5({handleFormSection5Data}:Props){
                 variant="outlined"
                 label="" 
                 name='treatmentGoal'
+                defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
+                disabled={type=='display'}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,

src/Components/PatientForm/PatientForm.tsx

@@ -20,6 +20,8 @@ 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';
 
   const Accordion = styled((props: AccordionProps) => (
     <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -57,9 +59,12 @@ import PatientImageMarker from '../ImageMarker/PatientImageMarker';
     borderTop: '1px solid rgba(0, 0, 0, .125)',
   }));
 
+type Props={
+  type:any;
+}
 
-
+export default function PatientForm({type}:Props){
-export default function PatientForm(){
+    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('');
@@ -71,7 +76,6 @@ export default function PatientForm(){
     const [section6Data, setSection6Data] = React.useState<any>({});
     const [section7Data, setSection7Data] = React.useState<any>({});
     const [section8Data, setSection8Data] = React.useState<any>({});
-    const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState<any>({});
     const [allPatientData, setAllPatientData] = React.useState<any>([]);
 
     const handleFormSection1Data = (
@@ -323,14 +327,14 @@ export default function PatientForm(){
     
     const handleSubmit = () => {
       const newPatientData = {
-        section1: section1Data,
+        personalInformation: section1Data,
-        section2: section2Data,
+        familyInformation: section2Data,
-        section3: section3Data,
+        medicalHistory: section3Data,
-        section4: section4Data,
+        injuryDetails: section4Data,
-        section5: section5Data,
+        pastTreatment: section5Data,
-        section6: section6Data,
+        systemReviewQuestions: section6Data,
-        section7: section7Data,
+        recreationalActivities: section7Data,
-        section8: section8Data,
+        otherDetails: section8Data,
       };
     
       // Create a copy of the existing data array and push the new patient data
@@ -338,24 +342,64 @@ export default function PatientForm(){
     
       // 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();     
+        }else{
+          setAlertProps({
+            open: true,
+            severity: 'error',
+            message: 'Please fill all the mandatory fields with valid data!',
+            duration: 4000,
+          });
+        }
+  };
+  
+  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();
+  }
     
-      console.log("UpdatedallPatientData:", updatedAllPatientData);
+
+  const handleExpandChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
     };
-    
-
-      const handleExpandChange =
-        (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
-        setExpanded(newExpanded ? panel : false);
-        };
  
-      const handleCheckboxChange = (event:any) => {
+  const handleCheckboxChange = (event:any) => {
-        setIsChecked(event.target.checked);
+    setIsChecked(event.target.checked);
-      };
+  };
 
-    
+  const handleAlertClose = () => {
+    setAlertProps({});
+  };
 
+  //@ts-ignore
+  const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
+  
     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:4, minHeight:550}} >
@@ -375,7 +419,12 @@ export default function PatientForm(){
                             </AccordionSummary>
                            
                             <AccordionDetails>
-                                <PersonalSection handleFormSection1Data={handleFormSection1Data}/>
+                                <PersonalSection 
+                                  handleFormSection1Data={handleFormSection1Data}
+                                  patientDataDiplay={patientData.personalInformation}
+                                  type={type}
+                                  
+                                  />
                             </AccordionDetails>
                            
                         </Accordion>
@@ -386,7 +435,11 @@ export default function PatientForm(){
                             </AccordionSummary>
 
                             <AccordionDetails>
-                                <FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
+                                <FamilyFormSection 
+                                handleFormSection2Data={handleFormSection2Data}
+                                patientDataDiplay={patientData.familyInformation}
+                                type={type}
+                                  />
                             </AccordionDetails>
                         </Accordion>
 
@@ -396,7 +449,11 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <MedicalHistory handleFormSection3Data={handleFormSection3Data}/>
+                                <MedicalHistory 
+                                handleFormSection3Data={handleFormSection3Data}
+                                patientDataDiplay={patientData.medicalHistory}
+                                type={type}
+                                />
                             </AccordionDetails>
                         </Accordion>
                 
@@ -405,8 +462,14 @@ export default function PatientForm(){
                                 <Typography sx={{fontSize:18}}>Patient's Injury Image</Typography>
                             </AccordionSummary>
                             
-                            <AccordionDetails>
+                <AccordionDetails>
-                                <PatientImageMarker />
+                  {
+                    type === 'fill' ?
+                      <PatientImageMarker />
+                      :
+                      <ViewPatientImageMarker />
+                  }
+                                
                             </AccordionDetails>
                         </Accordion>
 
@@ -417,7 +480,11 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/>
+                                <PainAnalysisSection4
+                                 handleFormSection4Data={handleFormSection4Data}
+                                 patientDataDiplay={patientData.injuryDetails}
+                                  type={type}
+                                  />
                             </AccordionDetails>
                         </Accordion>
 
@@ -427,7 +494,10 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <PastTreatment5 handleFormSection5Data={handleFormSection5Data}/>
+                                <PastTreatment5 
+                                handleFormSection5Data={handleFormSection5Data}
+                                patientDataDiplay={patientData.pastTreatment}
+                                type={type}/>
                             </AccordionDetails>
                         </Accordion>
 
@@ -437,7 +507,11 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <SystemReviewSection6 handleFormSection6Data={handleFormSection6Data}/>
+                                <SystemReviewSection6 
+                                handleFormSection6Data={handleFormSection6Data}
+                                patientDataDiplay={patientData.systemReviewQuestions}
+                                type={type}
+                                />
                             </AccordionDetails>
                         </Accordion>
 
@@ -447,7 +521,10 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <RecreationalHobbiesSection7 handleFormSection7Data={handleFormSection7Data}/>
+                                <RecreationalHobbiesSection7 
+                                handleFormSection7Data={handleFormSection7Data}
+                                patientDataDiplay={patientData.recreationalActivities}
+                                type={type}/>
                             </AccordionDetails>
                         </Accordion>
 
@@ -457,12 +534,14 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <OtherDetails8 handleFormSection8Data={handleFormSection8Data}/>
+                                <OtherDetails8 
+                                handleFormSection8Data={handleFormSection8Data}
+                                patientDataDiplay={patientData.otherDetails}
+                                type={type}/>
                             </AccordionDetails>
                         </Accordion>
 
-                        <Grid container>
+                      <Grid container>
-
                         <Grid item xs={12} className='collapsable-form-style-multiline'>
                           <FormGroup sx={{ marginTop: 3 }}>
                             <FormControlLabel
@@ -475,7 +554,7 @@ export default function PatientForm(){
 
                         <Grid item xs={6} className='collapsable-form-style'>
                               <TextField 
-                              
+                              disabled={type=='display'}
                               variant="outlined"
                               label="SIGNATURE" 
                               name='treatmentGoal'
@@ -492,7 +571,7 @@ export default function PatientForm(){
                             variant="contained"
                             color="primary"
                             sx={{ margin: 5, left: '40%', width: '200px' }}
-                            disabled={isChecked==false || signature==''}
+                            disabled={isChecked==false || signature=='' || type=='display'}
                             onClick={handleSubmit}
                           >
                             Submit

src/Components/PatientForm/PersonalSection1.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import { useFormik } from "formik";
-import * as yup from "yup";
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useEffect } from 'react';
@@ -21,20 +19,6 @@ interface Patient {
     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,
@@ -50,19 +34,21 @@ interface Patient {
         zipCode?: string|undefined,
         gender?: string|undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
   
 
-export default function PersonalSection({handleFormSection1Data}:Props){
+export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
 
-    const [startDateValue, setStartDateValue] = React.useState<any>();
+    const [birthDateValue, setBirthDateValue] = React.useState<any>();
     const [patient, setPatient] = React.useState<Patient>({
         fullName: "",
         homePhone: "",
         cellPhone: "",
         email: "",
-        age: 0,
+        age: "",
-        dateOfBirth: startDateValue,
+        dateOfBirth: birthDateValue,
         socialSecurityNumber: "",
         mailingAddress:"",
         city: "",
@@ -79,7 +65,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){
             patient.cellPhone,
             patient.email,
             patient.age,
-            startDateValue,
+            birthDateValue,
             patient.socialSecurityNumber,
             patient.mailingAddress,
             patient.city,
@@ -87,50 +73,30 @@ export default function PersonalSection({handleFormSection1Data}:Props){
             patient.zipCode,
             patient.gender,
         )
-      },[patient])
+      },[patient])    
 
-    //   const formik = useFormik<Patient>({
+     
-    //       initialValues: {
-    //       fullName: "",
-    //       homePhone: "",
-    //       cellPhone: "",
-    //       email: "",
-    //       age: "",
-    //       dateOfBirth: "",
-    //       socialSecurityNumber: "",
-    //       mailingAddress: "",
-    //       city: "",
-    //       state: "",
-    //       zipCode: "",
-    //       gender: "male",
-    //     },
-    //     validationSchema,
-    //     onSubmit: (values) => {
-    //       // Do something with the patient data
-    //       console.log(values,"sdfdsfsd34");
-    //     },
-    //   });      
     
     return(
         <>
         <Grid container direction="row" className='section1-test-class'>
-            <Grid item xs={4} className='collapsable-form-style '>
+                <Grid item xs={4} className='collapsable-form-style '>
-             <TextField
+                <TextField
                     variant="outlined"
                     label="Patient's Full Name"
                     name="fullName"
                     placeholder='Please enter your name'
-                    value={patient.fullName}
+                    value={type=='display'?patientDataDiplay.fullName:patient.fullName}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             fullName: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
-                    // error={formik.touched.fullName && Boolean(formik.errors.fullName)}
-                    // helperText={formik.touched.fullName && formik.errors.fullName}
                     required
+                    error={patient.fullName === ""}
+                    helperText={patient.fullName === "" ? "Please enter your name" : ""}
                 />
                 </Grid>
                
@@ -140,17 +106,18 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     variant="outlined"
                     label="Phone Number"
                     name="cellPhone"
+                    type="number"
                     placeholder='Please enter your cell Phone number'
-                    value={patient.cellPhone}
+                    value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             cellPhone: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
+                    error={!(/^\d{10}$/.test(patient.cellPhone))}
-                    // error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
+                    helperText={!(/^\d{10}$/.test(patient.cellPhone)) ? "Please enter a valid 10-digit phone number" : ""}
-                    // helperText={formik.touched.cellPhone && formik.errors.cellPhone}
                 />
                 </Grid>
 
@@ -159,36 +126,38 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     variant="outlined"
                     label="Home Phone Number"
                     name="homePhone"
+                    type='number'
                     placeholder='Please enter your home phone'
-                    value={patient.homePhone}
+                    value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             homePhone: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
+                    // error={!(/^\d{10}$/.test(patient.homePhone))}
-                    // error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
+                    // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
-                    // helperText={formik.touched.homePhone && formik.errors.homePhone}
                 />
                 </Grid>
 
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
+                    required
                     variant="outlined"
                     label="Email"
                     name="email"
                     placeholder='Please enter your email'
-                    value={patient.email}
+                    value={type=='display'?patientDataDiplay.email:patient.email}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             email: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
+                    error={!(/^\S+@\S+\.\S+$/.test(patient.email))}
-                    // error={formik.touched.email && Boolean(formik.errors.email)}
+                    helperText={!(/^\S+@\S+\.\S+$/.test(patient.email)) ? "Please enter a valid email address" : ""}
-                    // helperText={formik.touched.email && formik.errors.email}
                 />
                 </Grid>
                 <Grid item xs={4} className='collapsable-form-style'>
@@ -199,27 +168,29 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     name="age"
                     type="number"
                     placeholder='Please enter your age'
-                    value={patient.age}
+                    value={type=='display'?patientDataDiplay.age:patient.age}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             age: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
+                    error={patient.age === ""}
-                    // error={formik.touched.age && Boolean(formik.errors.age)}
+                    helperText={patient.age === "" ? "Please enter your 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}
+                    value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
+                    disabled={type=='display'}
                     onChange={(newValue) => {
-                        setStartDateValue(newValue);
+                        setBirthDateValue(newValue);
                     }}
                     renderInput={(params) => <TextField required  variant="outlined" {...params} />}
                     />
@@ -227,12 +198,14 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                 </FormControl>
             
                 </Grid>
+
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
                     variant="outlined"
                     label="Social Security Number"
                     name="socialSecurityNumber"
-                    value={patient.socialSecurityNumber}
+                    value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
@@ -251,16 +224,16 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                         variant="outlined"
                         label="Mailing Address"
                         name="mailingAddress"
-                        value={patient.mailingAddress}
+                        value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
+                        disabled={type=='display'}
                         onChange={(e)=>{
                             setPatient((prevValues) => ({
                                 ...prevValues,
                                 mailingAddress: e.target.value,
                               }));
                         }}
-                        // onBlur={formik.handleBlur}
+                        error={patient.mailingAddress === ""}
-                        // error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
+                        helperText={patient.mailingAddress === "" ? "Please enter your mailing address" : ""}
-                        // helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
                     />
                 </Grid>                
             
@@ -269,35 +242,30 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     variant="outlined"
                     label="State"
                     name="state"
-                    value={patient.state}
+                    value={type=='display'?patientDataDiplay.state:patient.state}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
                             state: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
-                    // error={formik.touched.state && Boolean(formik.errors.state)}
-                    // helperText={formik.touched.state && formik.errors.state}
                 />
                 </Grid>
 
                 <Grid item xs={4} className='collapsable-form-style'>
                     <TextField
-                        required
                         variant="outlined"
                         label="City"
                         name="city"
-                        value={patient.city}
+                        value={type=='display'?patientDataDiplay.city:patient.city}
+                        disabled={type=='display'}
                         onChange={(e)=>{
                             setPatient((prevValues) => ({
                                 ...prevValues,
                                 city: e.target.value,
                               }));
                         }}
-                        // onBlur={formik.handleBlur}
-                        // error={formik.touched.city && Boolean(formik.errors.city)}
-                        // helperText={formik.touched.city && formik.errors.city}
                     />
                 </Grid>
                 
@@ -306,7 +274,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     variant="outlined"
                     label="Zip Code"
                     name="zipCode"
-                    value={patient.zipCode}
+                    value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
@@ -324,7 +293,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                 <FormLabel>Gender</FormLabel>
                 <RadioGroup
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={patient.gender}
+                    defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
                     name="radio-buttons-group"
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
@@ -334,8 +303,12 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel value="male" control={<Radio />} label="Male" />
+                    <FormControlLabel
-                    <FormControlLabel value="female" control={<Radio />} label="Female" />
+                        disabled={type=='display'}
+                         value="male" control={<Radio />} label="Male" />
+                    <FormControlLabel 
+                        disabled={type=='display'}
+                        value="female" control={<Radio />} label="Female" />
                 </RadioGroup>
                 </FormControl>
                 </Grid>

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -43,9 +43,11 @@ interface Patient {
       drugs: string|undefined,
       drugsExplanation:string|undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
 
-export default function RecreationalHobbiesSection7({handleFormSection7Data}:Props){
+export default function RecreationalHobbiesSection7({handleFormSection7Data,patientDataDiplay,type}:Props){
     const [patient, setPatient] = React.useState<Patient>({
           hobbies: '',
           educationLevel: '',
@@ -101,7 +103,8 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                 multiline
                 variant="outlined"
                 label="" 
-                name='explanation'
+                value={type=='display'?patientDataDiplay.hobbies:patient.hobbies}
+                disabled={type=='display'}
                 onChange={(event:any) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -116,6 +119,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <FormLabel>Your education level:</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.educationLevel:patient.educationLevel}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -123,11 +127,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="High School" control={<Radio />} label="High School" />
+                        <FormControlLabel disabled={type=='display'} value="High School" control={<Radio />} label="High School" />
-                        <FormControlLabel value="Some college" control={<Radio />} label="Some college" />
+                        <FormControlLabel disabled={type=='display'} value="Some college" control={<Radio />} label="Some college" />
-                        <FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
+                        <FormControlLabel disabled={type=='display'} value="College Graduate" control={<Radio />} label="College Graduate" />
-                        <FormControlLabel value="Post college" control={<Radio />} label="Post college" />
+                        <FormControlLabel disabled={type=='display'} value="Post college" control={<Radio />} label="Post college" />
-                        <FormControlLabel value="Other" control={<Radio />} label="Other" />
+                        <FormControlLabel disabled={type=='display'} value="Other" control={<Radio />} label="Other" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -138,6 +142,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.excercise:patient.excercise}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -145,18 +150,19 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.excercise!=='Yes'}
+                disabled={patient.excercise!=='Yes'||type=='display'}
                 variant="outlined"
                 label="Times per week?" 
                 name='treatmentGoal'
+                value={type=='display'?patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
@@ -172,6 +178,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.tobacco:patient.tobacco}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -179,22 +186,23 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.tobacco!=='Yes'}
+                disabled={patient.tobacco!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
                 variant="outlined"
                 label="Packs/Cans per day(If you have quit, when did you quit?)" 
                 name='treatmentGoal'
                 onChange={(event) => {
                   setPatient((prevValues) => ({
                     ...prevValues,
-                    excerciseExplanation: event.target.value,
+                    tobaccoExplanation: event.target.value,
                   }));
                 }}
                 />
@@ -206,6 +214,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.alcohol:patient.alcohol}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -213,15 +222,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.alcohol!=='Yes'}
+                disabled={patient.alcohol!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
                 variant="outlined"
                 label="How many drinks per week?" 
                 name='treatmentGoal'
@@ -240,6 +250,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.healthyDiet:patient.healthyDiet}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -247,15 +258,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.healthyDiet!=='No'}
+                disabled={patient.healthyDiet!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
@@ -274,6 +286,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -281,15 +294,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.sleep!=='No'}
+                disabled={patient.sleep!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
@@ -308,6 +322,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -315,15 +330,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.workSchool!=='Yes'}
+                disabled={patient.workSchool!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
@@ -342,6 +358,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.familyLife:patient.familyLife}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -349,15 +366,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.familyLife!=='Yes'}
+                disabled={patient.familyLife!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
@@ -376,6 +394,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay.drugs:patient.drugs}
                         onChange={(event) => {
                           setPatient((prevValues) => ({
                             ...prevValues,
@@ -383,15 +402,16 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data}:Pro
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
           <Grid item xs={6} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.drugs!=='Yes'}
+                disabled={patient.drugs!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'

src/Components/PatientForm/SyestemReviewSection6.tsx

@@ -41,9 +41,11 @@ interface Patient {
       prostate: string|undefined,
       explanation:string|undefined,
     )=> void
+    patientDataDiplay:any;
+    type:string;
   }
 
-export default function SystemReviewSection6({handleFormSection6Data}:Props){
+export default function SystemReviewSection6({handleFormSection6Data,patientDataDiplay,type}:Props){
     const [patient, setPatients] = React.useState<Patient>({
         eyes: '',
         IntestinesBowls: '',
@@ -96,6 +98,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Eyes</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.eyes:patient.eyes}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -104,8 +107,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -114,6 +117,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Intestines/Bowls</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.IntestinesBowls:patient.IntestinesBowls}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -122,8 +126,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -132,6 +136,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Joints/Bones</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.jointsBones:patient.jointsBones}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -140,8 +145,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -150,6 +155,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Allergies</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.allergies:patient.allergies}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -158,8 +164,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -168,6 +174,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.earsNoseMouth:patient.earsNoseMouth}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -176,8 +183,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -186,6 +193,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Urinary</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.urinary:patient.urinary}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -194,8 +202,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -204,6 +212,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Skin</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.skin:patient.skin}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -212,8 +221,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -222,6 +231,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Psychological/Emotional</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.psychological:patient.psychological}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -230,8 +240,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -240,6 +250,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Heart</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.heart:patient.heart}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -248,8 +259,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -258,6 +269,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Muscles</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.muscles:patient.muscles}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -266,8 +278,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -276,6 +288,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Internal Organs</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.internalOrgans:patient.internalOrgans}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -284,8 +297,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -294,6 +307,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Gynecological menstrual/Brest</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.gynecological:patient.gynecological}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -302,8 +316,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -313,6 +327,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Lungs/Breathing</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.lungsBreathing:patient.lungsBreathing}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -321,8 +336,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -331,6 +346,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Nerves</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.nerves:patient.nerves}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -339,8 +355,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -349,6 +365,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Blood</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.blood:patient.blood}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -357,8 +374,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -367,6 +384,7 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                     <FormLabel>Prostate/Testicular/Penile</FormLabel>
                     <RadioGroup
                         name="painDuration"
+                        defaultValue={type=='display'?patientDataDiplay.prostate:patient.prostate}
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
                           setPatients((prevValues) => ({
@@ -375,8 +393,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                           }));
                         }}
                         >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
@@ -387,7 +405,8 @@ export default function SystemReviewSection6({handleFormSection6Data}:Props){
                 variant="outlined"
                 label="" 
                 name='explanation'
-                value={patient.explanation}
+                value={type=='display'?patientDataDiplay.explanation:patient.explanation}
+                disabled={type=='display'}
                 onChange={(event:any) => {
                   setPatients((prevValues) => ({
                     ...prevValues,