src/Components/ImageMarker/ViewPatientImageMarker.tsx

@@ -1,11 +1,11 @@
-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') || '{}');
@@ -16,12 +16,7 @@ const ViewPatientImageMarker = (props: Props) => {
             {saved.entries?.map((entry: any, index: number) => (
               <div className='ratingResult' key={index}>
                 <span className='image-marker__marker--default'>{entry.index}</span>
-            <Rating
+                <Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/>
-              index={entry.index}
-              defaultValue={entry.severity}
-              onUpdate={() => {}}
-              disabled
-            />
               </div>
             ))}
           </div>
@@ -29,7 +24,7 @@ const ViewPatientImageMarker = (props: Props) => {
               <ImageMarker src={humanImage} markers={saved.markers ?? []} />
           </div>
     </div>
-  );
+  )
-};
+}
 
 export default ViewPatientImageMarker;

src/Components/PatientForm/PatientForm.tsx

@@ -1,20 +1,9 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Footer from '../Footer';
+import Footer from "../Footer";
-import Header from '../Header';
+import Header from "../Header";
-import {
+import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-  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';
@@ -72,7 +61,7 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
 
 type Props={
   type:any;
-};
+}
 
 export default function PatientForm({type}:Props){
     const [alertProps, setAlertProps] = React.useState<any>({});
@@ -101,7 +90,7 @@ export default function PatientForm({ type }: Props) {
       city?: string|undefined,
       state?: string|undefined,
       zipCode?: string|undefined,
-    gender?: string | undefined
+      gender?: string|undefined,
     ) =>{
       setSection1Data({
         fullName,
@@ -116,8 +105,8 @@ export default function PatientForm({ type }: Props) {
         state,
         zipCode,
         gender,
-    });
+      })
-  };
+    }
 
     const handleFormSection2Data = (
       maritalStatus: string | undefined,
@@ -131,7 +120,7 @@ export default function PatientForm({ type }: Props) {
       spouseBusinessPhone: string | undefined,
       emergencyContact: string | undefined,
       relationship: string | undefined,
-    spousePhone: string | undefined
+      spousePhone: string | undefined,
     ) =>{
       setSection2Data({
         maritalStatus,
@@ -146,8 +135,8 @@ export default function PatientForm({ type }: Props) {
         emergencyContact,
         relationship,
         spousePhone,
-    });
+      })
-  };
+    }
 
     const handleFormSection3Data = (
       physicianname: string |undefined,
@@ -160,7 +149,7 @@ export default function PatientForm({ type }: Props) {
       haveChiropractor: string|undefined,
       reference: string|undefined,
       visitDetails: string |undefined,
-    cellPhoneProvider: string | undefined
+      cellPhoneProvider: string |undefined,
     ) =>{
       setSection3Data({
         physicianname,
@@ -174,8 +163,8 @@ export default function PatientForm({ type }: Props) {
         reference,
         visitDetails,
         cellPhoneProvider,
-    });
+      })
-  };
+    }
 
     const handleFormSection4Data = (
         chiefComplaint:string|undefined,
@@ -187,7 +176,7 @@ export default function PatientForm({ type }: Props) {
         painDuration: string|undefined,
         currentTreatment: string|undefined,
         treatmentGoal: string|undefined,
-    selfTreatment: string | undefined
+        selfTreatment:string|undefined,
     ) =>{
       setSection4Data({
         chiefComplaint,
@@ -200,8 +189,8 @@ export default function PatientForm({ type }: Props) {
         currentTreatment,
         treatmentGoal,
         selfTreatment,
-    });
+      })
-  };
+    }
 
     const handleFormSection5Data = (
       generalHealth: string|undefined,
@@ -215,7 +204,7 @@ export default function PatientForm({ type }: Props) {
       ifyesdizzinessFetigue: string|undefined,
       antiColligent: string|undefined,
       injuriesHospitalization: string|undefined,
-    supplementsOrDrugs: string | undefined
+      supplementsOrDrugs: string|undefined,
     ) =>{
       setSection5Data({
         generalHealth,
@@ -230,8 +219,8 @@ export default function PatientForm({ type }: Props) {
         antiColligent,
         injuriesHospitalization,
         supplementsOrDrugs,
-    });
+      })
-  };
+    }
 
     const handleFormSection6Data = (
       eyes: string|undefined,
@@ -250,7 +239,7 @@ export default function PatientForm({ type }: Props) {
       nerves: string|undefined,
       blood: string|undefined,
       prostate: string|undefined,
-    explanation: string | undefined
+      explanation:string|undefined,
     ) =>{
       setSection6Data({
         eyes,
@@ -270,8 +259,9 @@ export default function PatientForm({ type }: Props) {
         blood,
         prostate,
         explanation,
-    });
+      })
-  };
+    }
+
 
     const handleFormSection7Data = (
       hobbies: string|undefined,
@@ -291,7 +281,7 @@ export default function PatientForm({ type }: Props) {
       familyLife: string|undefined,
       familyLifeExplanation: string|undefined,
       drugs: string|undefined,
-    drugsExplanation: string | undefined
+      drugsExplanation:string|undefined,
     ) =>{
       setSection7Data({
         hobbies,
@@ -312,8 +302,8 @@ export default function PatientForm({ type }: Props) {
         familyLifeExplanation,
         drugs,
         drugsExplanation,
-    });
+      })
-  };
+    }
 
     const handleFormSection8Data = (
       familyHistory: string|undefined,
@@ -322,7 +312,7 @@ export default function PatientForm({ type }: Props) {
       orthotics: string|undefined,
       brestExam: any,
       pregnancy: string|undefined,
-    menstralCycle: any
+      menstralCycle: any,
     ) =>{
       setSection8Data({
         familyHistory,
@@ -332,11 +322,10 @@ export default function PatientForm({ type }: Props) {
         brestExam,
         pregnancy,
         menstralCycle,
-    });
+      })
-  };
+    }    
     
     const handleSubmit = () => {
-    const saved = JSON.parse(localStorage.getItem('entry') || '{}');
       const newPatientData = {
         personalInformation: section1Data,
         familyInformation: section2Data,
@@ -346,7 +335,6 @@ export default function PatientForm({ type }: Props) {
         systemReviewQuestions: section6Data,
         recreationalActivities: section7Data,
         otherDetails: section8Data,
-      injuryPainDetails: saved.entries,
       };
     
       // Create a copy of the existing data array and push the new patient data
@@ -358,17 +346,11 @@ export default function PatientForm({ type }: Props) {
       localStorage.setItem('patientData', JSON.stringify(newPatientData));
 
       if (
-      section1Data.fullName !== '' &&
+        section1Data.fullName !== "" && section1Data.cellPhone &&
-      section1Data.cellPhone &&
+        /^\d{10}$/.test(section1Data.cellPhone) && section1Data.email &&
-      /^\d{10}$/.test(section1Data.cellPhone) &&
+        /^\S+@\S+\.\S+$/.test(section1Data.email) && section1Data.age &&
-      section1Data.email &&
+        section1Data.age !== "" && Number(section1Data.age) >= 0 && section1Data.mailingAddress &&
-      /^\S+@\S+\.\S+$/.test(section1Data.email) &&
+        section1Data.mailingAddress !== "" ){
-      section1Data.age &&
-      section1Data.age !== '' &&
-      Number(section1Data.age) >= 0 &&
-      section1Data.mailingAddress &&
-      section1Data.mailingAddress !== ''
-    ) {
           TextFile();     
         }else{
           setAlertProps({
@@ -381,16 +363,15 @@ export default function PatientForm({ type }: Props) {
   };
   
   const TextFile = () => {
-    const element = document.createElement('a');
+    const element = document.createElement("a");
     //@ts-ignore
-    const textFile = new Blob([localStorage.getItem('patientData')], {
+    const textFile = new Blob([localStorage.getItem('patientData')], {type: 'text/json'});
-      type: 'text/json',
-    });
     element.href = URL.createObjectURL(textFile);
-    element.download = 'patientData.json';
+    element.download = "patientData.json";
     document.body.appendChild(element); 
     element.click();
-  };
+  }
+    
 
   const handleExpandChange =
     (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
@@ -405,12 +386,10 @@ export default function PatientForm({ type }: Props) {
     setAlertProps({});
   };
 
-  const patientData = localStorage.getItem('patientData')
+  //@ts-ignore
-    ? //@ts-ignore
+  const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
-      JSON.parse(localStorage.getItem('patientData'))
-    : [];
 
-  console.log('dfsdfdsf', patientData);
+  console.log("dfsdfdsf",patientData)
   
     return(
         <>
@@ -431,18 +410,14 @@ export default function PatientForm({ type }: Props) {
                             Confidential Patient Information
                         </Typography>
                         <Grid>
-            <Accordion
+                        <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
-              expanded={expanded === 'panel1'}
+                            
-              onChange={handleExpandChange('panel1')}
-            >
                             <AccordionSummary
                                 expandIcon={<ExpandMoreIcon />}
-                aria-controls='panel1a-content'
+                                aria-controls="panel1a-content"
-                id='panel1a-header'
+                                id="panel1a-header"
                                 >
-                <Typography sx={{ fontSize: 18 }}>
+                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
-                  Patient's Personal Information
-                </Typography>
                             </AccordionSummary>
                            
                             <AccordionDetails>
@@ -450,21 +425,15 @@ export default function PatientForm({ type }: Props) {
                                   handleFormSection1Data={handleFormSection1Data}
                                   patientDataDiplay={patientData.personalInformation}
                                   type={type}
+                                  
                                   />
                             </AccordionDetails>
+                           
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
-              expanded={expanded === 'panel2'}
+                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-              onChange={handleExpandChange('panel2')}
+                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
-            >
-              <AccordionSummary
-                aria-controls='panel2d-content'
-                id='panel2d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Family Information
-                </Typography>
                             </AccordionSummary>
 
                             <AccordionDetails>
@@ -476,17 +445,9 @@ export default function PatientForm({ type }: Props) {
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
-              expanded={expanded === 'panel3'}
+                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-              onChange={handleExpandChange('panel3')}
+                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
-            >
-              <AccordionSummary
-                aria-controls='panel3d-content'
-                id='panel3d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Medical History Information
-                </Typography>
                             </AccordionSummary>
                             
                             <AccordionDetails>
@@ -498,39 +459,26 @@ export default function PatientForm({ type }: Props) {
                             </AccordionDetails>
                         </Accordion>
                 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel9'} onChange={handleExpandChange('panel9')}>
-              expanded={expanded === 'panel9'}
+                            <AccordionSummary aria-controls="panel9d-content" id="panel9d-header">
-              onChange={handleExpandChange('panel9')}
+                                <Typography sx={{fontSize:18}}>Patient's Injury Image</Typography>
-            >
-              <AccordionSummary
-                aria-controls='panel9d-content'
-                id='panel9d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Injury Image
-                </Typography>
                             </AccordionSummary>
                             
                 <AccordionDetails>
-                {type === 'fill' ? (
+                  {
+                    type === 'fill' ?
                       <PatientImageMarker />
-                ) : (
+                      :
                       <ViewPatientImageMarker />
-                )}
+                  }
+                                
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+
-              expanded={expanded === 'panel4'}
+                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
-              onChange={handleExpandChange('panel4')}
+                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
-            >
+                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
-              <AccordionSummary
-                aria-controls='panel4d-content'
-                id='panel4d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Injury Details
-                </Typography>
                             </AccordionSummary>
                             
                             <AccordionDetails>
@@ -542,39 +490,22 @@ export default function PatientForm({ type }: Props) {
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
-              expanded={expanded === 'panel5'}
+                            <AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
-              onChange={handleExpandChange('panel5')}
+                                <Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
-            >
-              <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}
+                                type={type}/>
-                />
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
-              expanded={expanded === 'panel6'}
+                            <AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
-              onChange={handleExpandChange('panel6')}
+                                <Typography sx={{fontSize:18}}>System Review Questions</Typography>
-            >
-              <AccordionSummary
-                aria-controls='panel6d-content'
-                id='panel6d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  System Review Questions
-                </Typography>
                             </AccordionSummary>
                             
                             <AccordionDetails>
@@ -586,36 +517,21 @@ export default function PatientForm({ type }: Props) {
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
-              expanded={expanded === 'panel7'}
+                            <AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
-              onChange={handleExpandChange('panel7')}
+                                <Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
-            >
-              <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}
+                                type={type}/>
-                />
                             </AccordionDetails>
                         </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
-              expanded={expanded === 'panel8'}
+                            <AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
-              onChange={handleExpandChange('panel8')}
-            >
-              <AccordionSummary
-                aria-controls='panel8d-content'
-                id='panel8d-header'
-              >
                                 <Typography sx={{fontSize:18}}>Other Details</Typography>
                             </AccordionSummary>
                             
@@ -623,8 +539,7 @@ export default function PatientForm({ type }: Props) {
                                 <OtherDetails8 
                                 handleFormSection8Data={handleFormSection8Data}
                                 patientDataDiplay={patientData.otherDetails}
-                  type={type}
+                                type={type}/>
-                />
                             </AccordionDetails>
                         </Accordion>
 
@@ -633,13 +548,8 @@ export default function PatientForm({ type }: Props) {
                           <FormGroup sx={{ marginTop: 3 }}>
                             <FormControlLabel
                               required
-                    control={
+                              control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
-                      <Checkbox
+                              label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
-                        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>
@@ -647,12 +557,12 @@ export default function PatientForm({ type }: Props) {
                         <Grid item xs={6} className='collapsable-form-style'>
                               <TextField 
                               disabled={type=='display'}
-                  variant='outlined'
+                              variant="outlined"
-                  label='SIGNATURE'
+                              label="SIGNATURE" 
                               name='treatmentGoal'
                               placeholder='Please type your name'
                               onChange={(event) => {
-                    setSignature(event.target.value);
+                                setSignature(event.target.value)
                               }}
                               />
                         </Grid>
@@ -660,12 +570,10 @@ export default function PatientForm({ type }: Props) {
                         <Grid>
                           <Button
                             // type="submit"
-                variant='contained'
+                            variant="contained"
-                color='primary'
+                            color="primary"
                             sx={{ margin: 5, left: '40%', width: '200px' }}
-                disabled={
+                            disabled={isChecked==false || signature=='' || type=='display'}
-                  isChecked == false || signature == '' || type == 'display'
-                }
                             onClick={handleSubmit}
                           >
                             Submit
@@ -673,9 +581,10 @@ export default function PatientForm({ type }: Props) {
                         </Grid>
                         </Grid>
                         {/* </form> */}
+                       
                     </Paper>
                 <Footer/>
              </Paper>
         </>
-  );
+    )
 }