From 303225458d82c493a62faa38d92d77f519b47be6 Mon Sep 17 00:00:00 2001
From: vipeeshpavithran <vpavithran@quinovas.com>
Date: Thu, 7 Sep 2023 14:15:12 +0530
Subject: [PATCH] Added image marker values to json data

---
 .../ImageMarker/ViewPatientImageMarker.tsx    |   37 +-
 src/Components/PatientForm/PatientForm.tsx    | 1159 +++++++++--------
 2 files changed, 646 insertions(+), 550 deletions(-)

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