data display changes for section1

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

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

src/Components/PatientForm/PatientForm.tsx

@@ -57,9 +57,11 @@ 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 [expanded, setExpanded] = React.useState<string | false>('panel1');
     const [isChecked, setIsChecked] = React.useState(false);
     const [signature,setSignature]=React.useState('');
@@ -71,7 +73,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 +324,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
@@ -340,8 +341,6 @@ export default function PatientForm(){
       setAllPatientData(updatedAllPatientData);
 
       localStorage.setItem('patientData', JSON.stringify(newPatientData));
-    
-      console.log("UpdatedallPatientData:", updatedAllPatientData);
       TextFile();
   };
   
@@ -365,7 +364,8 @@ export default function PatientForm(){
         setIsChecked(event.target.checked);
       };
 
-    
+      //@ts-ignore
+      const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
 
     return(
         <>
@@ -388,7 +388,12 @@ export default function PatientForm(){
                             </AccordionSummary>
                            
                             <AccordionDetails>
-                                <PersonalSection handleFormSection1Data={handleFormSection1Data}/>
+                                <PersonalSection 
+                                  handleFormSection1Data={handleFormSection1Data}
+                                  patientDataDiplay={patientData.personalInformation}
+                                  type={type}
+                                  
+                                  />
                             </AccordionDetails>
                            
                         </Accordion>

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,
-        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,29 +73,9 @@ export default function PersonalSection({handleFormSection1Data}:Props){
             patient.zipCode,
             patient.gender,
         )
-      },[patient])
+      },[patient])    
 
-    //   const formik = useFormik<Patient>({
+      console.log(type,"sfsdfsdfsd")
-    //       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(
         <>
@@ -120,16 +86,14 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     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
                 />
                 </Grid>
@@ -141,7 +105,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     label="Phone Number"
                     name="cellPhone"
                     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,
@@ -160,7 +125,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     label="Home Phone Number"
                     name="homePhone"
                     placeholder='Please enter your home phone'
-                    value={patient.homePhone}
+                    value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
+                    disabled={type=='display'}
                     onChange={(e)=>{
                         setPatient((prevValues) => ({
                             ...prevValues,
@@ -179,7 +145,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     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,
@@ -199,7 +166,8 @@ 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,
@@ -217,9 +185,10 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                 <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} />}
                     />
@@ -232,7 +201,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                     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,7 +221,8 @@ 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,
@@ -269,7 +240,8 @@ 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,
@@ -288,7 +260,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                         variant="outlined"
                         label="City"
                         name="city"
-                        value={patient.city}
+                        value={type=='display'?patientDataDiplay.city:patient.city}
+                        disabled={type=='display'}
                         onChange={(e)=>{
                             setPatient((prevValues) => ({
                                 ...prevValues,
@@ -306,7 +279,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 +298,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 +308,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>