From 81fb560898dd83aeffdd456211de5fc402312095 Mon Sep 17 00:00:00 2001
From: vipeeshpavithran <vpavithran@quinovas.com>
Date: Thu, 7 Sep 2023 14:31:45 +0530
Subject: [PATCH 1/5] Screen responsive changes

---
 .../PatientForm/PersonalSection1.tsx          | 884 ++++++++++--------
 1 file changed, 515 insertions(+), 369 deletions(-)

diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx
index bd55434..4681b2d 100644
--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@@ -1,389 +1,535 @@
 import * as React from 'react';
-import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import {
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useEffect } from 'react';
 
 interface Patient {
-    fullName: string;
-    homePhone: string;
-    cellPhone: string;
-    email: string;
-    age: number | string;
-    dateOfBirth: string;
-    socialSecurityNumber: string;
-    mailingAddress: string;
-    city: string;
-    state: string;
-    zipCode: string;
-    gender: string;
-  }
+  fullName: string;
+  homePhone: string;
+  cellPhone: string;
+  email: string;
+  age: number | string;
+  dateOfBirth: string;
+  socialSecurityNumber: string;
+  mailingAddress: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  gender: string;
+}
 
-  type Props = {
-    handleFormSection1Data:(
-        fullName?: string|undefined,
-        homePhone?: string|undefined,
-        cellPhone?: string|undefined,
-        email?: string|undefined,
-        age?: number|undefined|string,
-        dateOfBirth?: string|undefined,
-        socialSecurityNumber?: string|undefined,
-        mailingAddress?: string|undefined,
-        city?: string|undefined,
-        state?: string|undefined,
-        zipCode?: string|undefined,
-        gender?: string|undefined,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
-  
+type Props = {
+  handleFormSection1Data: (
+    fullName?: string | undefined,
+    homePhone?: string | undefined,
+    cellPhone?: string | undefined,
+    email?: string | undefined,
+    age?: number | undefined | string,
+    dateOfBirth?: string | undefined,
+    socialSecurityNumber?: string | undefined,
+    mailingAddress?: string | undefined,
+    city?: string | undefined,
+    state?: string | undefined,
+    zipCode?: string | undefined,
+    gender?: string | undefined
+  ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
-export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
+export default function PersonalSection({
+  handleFormSection1Data,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [birthDateValue, setBirthDateValue] = React.useState<any>();
+  const [patient, setPatient] = React.useState<any>({
+    fullName: '',
+    fullNameError: false,
+    homePhone: '',
+    cellPhone: '',
+    cellPhoneError: false,
+    email: '',
+    emailError: false,
+    age: '',
+    ageError: false,
+    dateOfBirth: birthDateValue,
+    socialSecurityNumber: '',
+    mailingAddress: '',
+    mailingAddressFalse: false,
+    city: '',
+    state: '',
+    zipCode: '',
+    gender: 'male',
+  });
 
-    const [birthDateValue, setBirthDateValue] = React.useState<any>();
-    const [patient, setPatient] = React.useState<any>({
-        fullName: "",
-        fullNameError:false,
-        homePhone: "",
-        cellPhone: "",
-        cellPhoneError: false,
-        email: "",
-        emailError: false,
-        age: "",
-        ageError: false,
-        dateOfBirth: birthDateValue,
-        socialSecurityNumber: "",
-        mailingAddress:"",
-        mailingAddressFalse:false,
-        city: "",
-        state: "",
-        zipCode: "",
-        gender: "male",
-      });
+  useEffect(() => {
+    handleFormSection1Data(
+      patient.fullName,
+      patient.homePhone,
+      patient.cellPhone,
+      patient.email,
+      patient.age,
+      birthDateValue,
+      patient.socialSecurityNumber,
+      patient.mailingAddress,
+      patient.city,
+      patient.state,
+      patient.zipCode,
+      patient.gender
+    );
+  }, [patient]);
 
+  return (
+    <>
+      <Grid container direction='row' className='section1-test-class'>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Patient's Full Name"
+            name='fullName'
+            placeholder='Please enter your name'
+            value={
+              type == 'display' ? patientDataDiplay.fullName : patient.fullName
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                fullName: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: false,
+                }));
+              }
+            }}
+            required
+            error={patient.fullNameError}
+            helperText={patient.fullNameError ? 'Please enter your name' : ''}
+          />
+        </Grid>
 
-      useEffect(()=>{
-        handleFormSection1Data(
-            patient.fullName,
-            patient.homePhone,
-            patient.cellPhone,
-            patient.email,
-            patient.age,
-            birthDateValue,
-            patient.socialSecurityNumber,
-            patient.mailingAddress,
-            patient.city,
-            patient.state,
-            patient.zipCode,
-            patient.gender,
-        )
-      },[patient])    
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Phone Number'
+            name='cellPhone'
+            type='number'
+            placeholder='Please enter your cell Phone number'
+            value={
+              type == 'display'
+                ? patientDataDiplay.cellPhone
+                : patient.cellPhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                cellPhone: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\d{10}$/.test(e.target.value)) {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: false,
+                }));
+              }
+            }}
+            error={patient.cellPhoneError}
+            helperText={
+              patient.cellPhoneError
+                ? 'Please enter a valid 10-digit phone number'
+                : ''
+            }
+          />
+        </Grid>
 
-     
-    
-    return(
-        <>
-        <Grid container direction="row" className='section1-test-class'>
-        <Grid item xs={4} className='collapsable-form-style '>
-                    <TextField
-                        variant="outlined"
-                        label="Patient's Full Name"
-                        name="fullName"
-                        placeholder='Please enter your name'
-                        value={type=='display'?patientDataDiplay.fullName:patient.fullName}
-                        disabled={type=='display'}
-                        onChange={(e)=>{
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                fullName: e.target.value,
-                            }));
-                        }}
-                        onBlur={(e) => {
-                            if (e.target.value === "") {
-                                setPatient((prevValues:any) => ({
-                                    ...prevValues,
-                                    fullNameError: true,
-                                }));
-                            } else {
-                                setPatient((prevValues:any) => ({
-                                    ...prevValues,
-                                    fullNameError: false,
-                                }));
-                            }
-                        }}
-                        required
-                        error={patient.fullNameError}
-                        helperText={patient.fullNameError ? "Please enter your name" : ""}
-                    />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Home Phone Number'
+            name='homePhone'
+            type='number'
+            placeholder='Please enter your home phone'
+            value={
+              type == 'display'
+                ? patientDataDiplay.homePhone
+                : patient.homePhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                homePhone: e.target.value,
+              }));
+            }}
+            // error={!(/^\d{10}$/.test(patient.homePhone))}
+            // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
+          />
+        </Grid>
 
-               
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    required
-                    variant="outlined"
-                    label="Phone Number"
-                    name="cellPhone"
-                    type="number"
-                    placeholder='Please enter your cell Phone number'
-                    value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            cellPhone: e.target.value,
-                          }));
-                    }}
-                    onBlur={(e) => {
-                        if (!(/^\d{10}$/.test(e.target.value))) {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                cellPhoneError: true,
-                            }));
-                        } else {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                cellPhoneError: false,
-                            }));
-                        }
-                    }}
-                    error={patient.cellPhoneError}
-                    helperText={patient.cellPhoneError? "Please enter a valid 10-digit phone number" : ""}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Email'
+            name='email'
+            placeholder='Please enter your email'
+            value={type == 'display' ? patientDataDiplay.email : patient.email}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                email: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: false,
+                }));
+              }
+            }}
+            error={patient.emailError}
+            helperText={
+              patient.emailError ? 'Please enter a valid email address' : ''
+            }
+          />
+        </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Age'
+            name='age'
+            type='number'
+            placeholder='Please enter your age'
+            value={type == 'display' ? patientDataDiplay.age : patient.age}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                age: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: false,
+                }));
+              }
+            }}
+            error={patient.ageError}
+            helperText={patient.ageError ? 'Please enter your age' : ''}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Home Phone Number"
-                    name="homePhone"
-                    type='number'
-                    placeholder='Please enter your home phone'
-                    value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            homePhone: e.target.value,
-                          }));
-                    }}
-                    // error={!(/^\d{10}$/.test(patient.homePhone))}
-                    // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                label='Date of Birth'
+                value={
+                  type == 'display'
+                    ? patientDataDiplay.dateOfBirth
+                    : birthDateValue
+                }
+                disabled={type == 'display'}
+                onChange={(newValue) => {
+                  setBirthDateValue(newValue);
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    required
-                    variant="outlined"
-                    label="Email"
-                    name="email"
-                    placeholder='Please enter your email'
-                    value={type=='display'?patientDataDiplay.email:patient.email}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            email: e.target.value,
-                          }));
-                    }}
-                    onBlur={(e) => {
-                        if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                emailError: true,
-                            }));
-                        } else {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                emailError: false,
-                            }));
-                        }
-                    }}
-                    error={patient.emailError}
-                    helperText={patient.emailError? "Please enter a valid email address" : ""}
-                />
-                </Grid>
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    required
-                    variant="outlined"
-                    label="Age"
-                    name="age"
-                    type="number"
-                    placeholder='Please enter your age'
-                    value={type=='display'?patientDataDiplay.age:patient.age}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            age: e.target.value,
-                          }));
-                    }}
-                    onBlur={(e) => {
-                        if (e.target.value === "") {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                ageError: true,
-                            }));
-                        } else {
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                ageError: false,
-                            }));
-                        }
-                    }}
-                    error={patient.ageError}
-                    helperText={patient.ageError ? "Please enter your age" : ""}
-                    
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Social Security Number'
+            name='socialSecurityNumber'
+            value={
+              type == 'display'
+                ? patientDataDiplay.socialSecurityNumber
+                : patient.socialSecurityNumber
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                socialSecurityNumber: e.target.value,
+              }));
+            }}
+            // onBlur={formik.handleBlur}
+            // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
+            // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <FormControl >
-                <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    label="Date of Birth"
-                    value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
-                    disabled={type=='display'}
-                    onChange={(newValue) => {
-                        setBirthDateValue(newValue);
-                    }}
-                    renderInput={(params) => <TextField  variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-                </FormControl>
-            
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Mailing Address'
+            name='mailingAddress'
+            value={
+              type == 'display'
+                ? patientDataDiplay.mailingAddress
+                : patient.mailingAddress
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                mailingAddress: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: true,
+                }));
+              } else {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: false,
+                }));
+              }
+            }}
+            error={patient.mailingAddressError}
+            helperText={
+              patient.mailingAddressError
+                ? 'Please enter your mailing address'
+                : ''
+            }
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Social Security Number"
-                    name="socialSecurityNumber"
-                    value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            socialSecurityNumber: e.target.value,
-                          }));
-                    }}
-                    // onBlur={formik.handleBlur}
-                    // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-                    // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='State'
+            name='state'
+            value={type == 'display' ? patientDataDiplay.state : patient.state}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                state: e.target.value,
+              }));
+            }}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                    <TextField
-                        required
-                        variant="outlined"
-                        label="Mailing Address"
-                        name="mailingAddress"
-                        value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
-                        disabled={type=='display'}
-                        onChange={(e)=>{
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                mailingAddress: e.target.value,
-                              }));
-                        }}
-                        onBlur={(e) => {
-                            if (e.target.value === "") {
-                                setPatient((prevValues:any) => ({
-                                    ...prevValues,
-                                    mailingAddressError: true,
-                                }));
-                            } else {
-                                setPatient((prevValues:any) => ({
-                                    ...prevValues,
-                                    mailingAddressError: false,
-                                }));
-                            }
-                        }}
-                        error={patient.mailingAddressError}
-                        helperText={patient.mailingAddressError? "Please enter your mailing address" : ""}
-                    />
-                </Grid>                
-            
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="State"
-                    name="state"
-                    value={type=='display'?patientDataDiplay.state:patient.state}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            state: e.target.value,
-                          }));
-                    }}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='City'
+            name='city'
+            value={type == 'display' ? patientDataDiplay.city : patient.city}
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                city: e.target.value,
+              }));
+            }}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style'>
-                    <TextField
-                        variant="outlined"
-                        label="City"
-                        name="city"
-                        value={type=='display'?patientDataDiplay.city:patient.city}
-                        disabled={type=='display'}
-                        onChange={(e)=>{
-                            setPatient((prevValues:any) => ({
-                                ...prevValues,
-                                city: e.target.value,
-                              }));
-                        }}
-                    />
-                </Grid>
-                
-                <Grid item xs={4} className='collapsable-form-style'>
-                <TextField
-                    variant="outlined"
-                    label="Zip Code"
-                    name="zipCode"
-                    value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
-                    disabled={type=='display'}
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            zipCode: e.target.value,
-                          }));
-                    }}
-                    // onBlur={formik.handleBlur}
-                    // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
-                    // helperText={formik.touched.zipCode && formik.errors.zipCode}
-                />
-                </Grid>
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Zip Code'
+            name='zipCode'
+            value={
+              type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                zipCode: e.target.value,
+              }));
+            }}
+            // onBlur={formik.handleBlur}
+            // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
+            // helperText={formik.touched.zipCode && formik.errors.zipCode}
+          />
+        </Grid>
 
-                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
-                <FormControl >
-                <FormLabel>Gender</FormLabel>
-                <RadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
-                    name="radio-buttons-group"
-                    onChange={(e)=>{
-                        setPatient((prevValues:any) => ({
-                            ...prevValues,
-                            gender: e.target.value,
-                          }));
-                    }}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <FormControlLabel
-                        disabled={type=='display'}
-                         value="male" control={<Radio />} label="Male" />
-                    <FormControlLabel 
-                        disabled={type=='display'}
-                        value="female" control={<Radio />} label="Female" />
-                </RadioGroup>
-                </FormControl>
-                </Grid>
-            </Grid>       
-        </>
-    )
-}
\ No newline at end of file
+        <Grid
+          item
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormControl>
+            <FormLabel>Gender</FormLabel>
+            <RadioGroup
+              aria-labelledby='demo-radio-buttons-group-label'
+              defaultValue={
+                type == 'display' ? patientDataDiplay.gender : patient.gender
+              }
+              name='radio-buttons-group'
+              onChange={(e) => {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  gender: e.target.value,
+                }));
+              }}
+              sx={{ display: 'flex', flexDirection: 'row' }}
+            >
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='male'
+                control={<Radio />}
+                label='Male'
+              />
+              <FormControlLabel
+                disabled={type == 'display'}
+                value='female'
+                control={<Radio />}
+                label='Female'
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

From f27ef0e113a59bf3e4af945e91311a5fa78b658b Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Thu, 7 Sep 2023 17:08:28 +0530
Subject: [PATCH 2/5] responsive all sections

---
 .../PatientForm/FamilyFormSection2.tsx        | 94 +++++++++++++++---
 .../PatientForm/MedicalHistorySection3.tsx    | 70 ++++++++++++--
 src/Components/PatientForm/PastTreatment5.tsx | 27 +++++-
 .../RecreationalHobbiesSection7.tsx           | 96 +++++++++++++++----
 .../PatientForm/SyestemReviewSection6.tsx     | 96 +++++++++++++++----
 5 files changed, 326 insertions(+), 57 deletions(-)

diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx
index f1ad09c..b73a92d 100644
--- a/src/Components/PatientForm/FamilyFormSection2.tsx
+++ b/src/Components/PatientForm/FamilyFormSection2.tsx
@@ -101,7 +101,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
             <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 
                 variant="outlined" 
@@ -119,7 +125,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+            className='collapsable-form-style '>
                 <TextField 
                 // required
                 variant="outlined" 
@@ -137,7 +149,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
                
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Hours/Week" 
@@ -155,7 +173,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  />
                  
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Employer" 
@@ -171,7 +195,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Business Phone" 
@@ -189,13 +219,24 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Name" 
@@ -211,7 +252,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Employer" 
@@ -227,7 +274,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                   <TextField 
                   variant="outlined" 
                   label="Business Phone" 
@@ -250,7 +303,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
 
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                    <TextField 
                    variant="outlined" 
                    label="Emergency Contact" 
@@ -266,7 +325,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                    />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style '>
                     <TextField 
                     variant="outlined" 
                     label="Relationship" 
@@ -282,7 +347,12 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                     disabled={type=='display'}
                     />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style '>
                      <TextField 
                      variant="outlined" 
                      type="number"
diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx
index 3f7211d..4d3c81a 100644
--- a/src/Components/PatientForm/MedicalHistorySection3.tsx
+++ b/src/Components/PatientForm/MedicalHistorySection3.tsx
@@ -76,7 +76,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
         </Grid>
 
         <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Family physician" 
@@ -91,7 +97,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City" 
@@ -106,7 +118,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="State" 
@@ -121,7 +139,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Phone" 
@@ -138,14 +162,30 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 />
             </Grid>
             
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            <Grid item xs={4} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12} className='collapsable-form-style'></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
             </Grid>
 
-            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
@@ -166,7 +206,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 </FormControl>
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="Chiropractor's Name" 
@@ -182,7 +228,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                  />
             </Grid>
 
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item 
+            xs={2}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="City/State" 
diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx
index 7ad90c8..d2dfb01 100644
--- a/src/Components/PatientForm/PastTreatment5.tsx
+++ b/src/Components/PatientForm/PastTreatment5.tsx
@@ -121,7 +121,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
           </Grid>
           
         
-          <Grid item xs={4} className='collapsable-form-style-form7'>
+          <Grid item 
+          xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="If yes, when?" 
@@ -135,7 +140,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+            <Grid item 
+            xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Was treatment provided?If yes, by whom?" 
@@ -150,7 +160,12 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
+            <Grid item 
+            xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Outcome?" 
@@ -287,7 +302,11 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 type={type}/>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-multiline'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-multiline'>
           <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
                 <TextField 
                 multiline
diff --git a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
index 976471b..44a60e1 100644
--- a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
+++ b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
@@ -136,7 +136,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
                     <RadioGroup
@@ -156,7 +160,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.excercise!=='Yes'||type=='display'}
                 variant="outlined"
@@ -172,7 +180,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
                     <RadioGroup
@@ -192,7 +204,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.tobacco!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
@@ -208,7 +224,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
                     <RadioGroup
@@ -228,7 +248,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.alcohol!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
@@ -244,7 +268,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
                     <RadioGroup
@@ -264,7 +292,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.healthyDiet!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
@@ -280,7 +312,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
                     <RadioGroup
@@ -300,7 +336,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.sleep!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
@@ -316,7 +356,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
                     <RadioGroup
@@ -336,7 +380,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.workSchool!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
@@ -352,7 +400,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
                     <RadioGroup
@@ -372,7 +424,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.familyLife!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
@@ -388,7 +444,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
@@ -408,7 +468,11 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={6} className='collapsable-form-style-form7'>
+          <Grid item xs={2}
+          xl={3}
+          // lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.drugs!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
diff --git a/src/Components/PatientForm/SyestemReviewSection6.tsx b/src/Components/PatientForm/SyestemReviewSection6.tsx
index aa46419..d2e71c3 100644
--- a/src/Components/PatientForm/SyestemReviewSection6.tsx
+++ b/src/Components/PatientForm/SyestemReviewSection6.tsx
@@ -93,7 +93,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
             <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
         </Grid>
         <Grid container direction="row">
-        <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+        <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Eyes</FormLabel>
                     <RadioGroup
@@ -112,7 +116,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Intestines/Bowls</FormLabel>
                     <RadioGroup
@@ -131,7 +139,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Joints/Bones</FormLabel>
                     <RadioGroup
@@ -150,7 +162,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Allergies</FormLabel>
                     <RadioGroup
@@ -169,7 +185,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
                     <RadioGroup
@@ -188,7 +208,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Urinary</FormLabel>
                     <RadioGroup
@@ -207,7 +231,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Skin</FormLabel>
                     <RadioGroup
@@ -226,7 +254,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Psychological/Emotional</FormLabel>
                     <RadioGroup
@@ -245,7 +277,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Heart</FormLabel>
                     <RadioGroup
@@ -264,7 +300,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Muscles</FormLabel>
                     <RadioGroup
@@ -283,7 +323,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Internal Organs</FormLabel>
                     <RadioGroup
@@ -302,7 +346,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Gynecological menstrual/Brest</FormLabel>
                     <RadioGroup
@@ -322,7 +370,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
               </FormControl>
           </Grid>
 
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Lungs/Breathing</FormLabel>
                     <RadioGroup
@@ -341,7 +393,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Nerves</FormLabel>
                     <RadioGroup
@@ -360,7 +416,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Blood</FormLabel>
                     <RadioGroup
@@ -379,7 +439,11 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={2}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Prostate/Testicular/Penile</FormLabel>
                     <RadioGroup

From e747ac7bda8584833a4f17e1a4ba24ad16e9fba5 Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Thu, 7 Sep 2023 17:15:57 +0530
Subject: [PATCH 3/5] responsive fix all section

---
 .../PatientForm/FamilyFormSection2.tsx        | 24 +++++++-------
 .../PatientForm/MedicalHistorySection3.tsx    | 18 +++++------
 src/Components/PatientForm/PastTreatment5.tsx |  8 ++---
 .../PatientForm/PersonalSection1.tsx          | 24 +++++++-------
 .../RecreationalHobbiesSection7.tsx           | 32 +++++++++----------
 .../PatientForm/SyestemReviewSection6.tsx     | 32 +++++++++----------
 6 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx
index b73a92d..aad2239 100644
--- a/src/Components/PatientForm/FamilyFormSection2.tsx
+++ b/src/Components/PatientForm/FamilyFormSection2.tsx
@@ -102,7 +102,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
            
             <Grid item xs={4} className='collapsable-form-style '></Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -126,7 +126,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -150,7 +150,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -174,7 +174,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  
             </Grid>
             <Grid
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -196,7 +196,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -220,7 +220,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -232,7 +232,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -253,7 +253,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -275,7 +275,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -304,7 +304,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
            
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -326,7 +326,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                    />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -348,7 +348,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                     />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx
index 4d3c81a..67df552 100644
--- a/src/Components/PatientForm/MedicalHistorySection3.tsx
+++ b/src/Components/PatientForm/MedicalHistorySection3.tsx
@@ -77,7 +77,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
 
         <Grid container direction="row">
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -98,7 +98,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -119,7 +119,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -140,7 +140,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                  />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -163,13 +163,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
             </Grid>
             
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
             sm={12} className='collapsable-form-style'></Grid>
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -180,7 +180,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
             </Grid>
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -207,7 +207,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
             </Grid>
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
@@ -229,7 +229,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
             </Grid>
 
             <Grid item 
-            xs={2}
+            xs={12}
             xl={3}
             lg={4}
             md={6}
diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx
index d2dfb01..b5fc217 100644
--- a/src/Components/PatientForm/PastTreatment5.tsx
+++ b/src/Components/PatientForm/PastTreatment5.tsx
@@ -122,7 +122,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
           
         
           <Grid item 
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -141,7 +141,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -161,7 +161,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 />
             </Grid>
             <Grid item 
-            xs={2}
+            xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -302,7 +302,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 type={type}/>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx
index 4681b2d..c4c4f28 100644
--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@@ -96,7 +96,7 @@ export default function PersonalSection({
       <Grid container direction='row' className='section1-test-class'>
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -139,7 +139,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -189,7 +189,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -221,7 +221,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -263,7 +263,7 @@ export default function PersonalSection({
         </Grid>
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -305,7 +305,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -335,7 +335,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -366,7 +366,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -414,7 +414,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -438,7 +438,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -462,7 +462,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -491,7 +491,7 @@ export default function PersonalSection({
 
         <Grid
           item
-          xs={2}
+          xs={12}
           xl={3}
           lg={4}
           md={6}
diff --git a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
index 44a60e1..f57278f 100644
--- a/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
+++ b/src/Components/PatientForm/RecreationalHobbiesSection7.tsx
@@ -136,7 +136,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -160,7 +160,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -180,7 +180,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -204,7 +204,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -224,7 +224,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -248,7 +248,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -268,7 +268,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -292,7 +292,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -312,7 +312,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -336,7 +336,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -356,7 +356,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -380,7 +380,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -400,7 +400,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -424,7 +424,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -444,7 +444,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
@@ -468,7 +468,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           // lg={4}
           md={6}
diff --git a/src/Components/PatientForm/SyestemReviewSection6.tsx b/src/Components/PatientForm/SyestemReviewSection6.tsx
index d2e71c3..f97df7b 100644
--- a/src/Components/PatientForm/SyestemReviewSection6.tsx
+++ b/src/Components/PatientForm/SyestemReviewSection6.tsx
@@ -93,7 +93,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
             <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
         </Grid>
         <Grid container direction="row">
-        <Grid item xs={2}
+        <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -116,7 +116,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -139,7 +139,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -162,7 +162,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -185,7 +185,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -208,7 +208,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -231,7 +231,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -254,7 +254,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -277,7 +277,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -300,7 +300,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -323,7 +323,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -346,7 +346,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -370,7 +370,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
               </FormControl>
           </Grid>
 
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -393,7 +393,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -416,7 +416,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}
@@ -439,7 +439,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={2}
+          <Grid item xs={12}
           xl={3}
           lg={4}
           md={6}

From ee88fc80e48666f7b4bb05a952f383c89ebe3fd1 Mon Sep 17 00:00:00 2001
From: vipeeshpavithran <vpavithran@quinovas.com>
Date: Thu, 7 Sep 2023 17:28:05 +0530
Subject: [PATCH 4/5] Title change

---
 src/Components/PatientForm/PatientForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx
index d043916..2725462 100644
--- a/src/Components/PatientForm/PatientForm.tsx
+++ b/src/Components/PatientForm/PatientForm.tsx
@@ -507,7 +507,7 @@ export default function PatientForm({ type }: Props) {
                 id='panel9d-header'
               >
                 <Typography sx={{ fontSize: 18 }}>
-                  Patient's Injury Image
+                  Patient's Pain Zone
                 </Typography>
               </AccordionSummary>
 

From f52b8ed7f497d2a307401d8e1920edae30bbd517 Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Thu, 7 Sep 2023 17:44:07 +0530
Subject: [PATCH 5/5] phone number validation issue fix

---
 .../PatientForm/PersonalSection1.tsx          | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx
index c4c4f28..52c393d 100644
--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@@ -147,44 +147,49 @@ export default function PersonalSection({
           className='collapsable-form-style'
         >
           <TextField
-            required
-            variant='outlined'
-            label='Phone Number'
-            name='cellPhone'
-            type='number'
-            placeholder='Please enter your cell Phone number'
-            value={
-              type == 'display'
-                ? patientDataDiplay.cellPhone
-                : patient.cellPhone
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                cellPhone: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (!/^\d{10}$/.test(e.target.value)) {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  cellPhoneError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  cellPhoneError: false,
-                }));
+              required
+              variant='outlined'
+              label='Phone Number'
+              name='cellPhone'
+              type='number'
+              placeholder='Please enter your cell Phone number'
+              value={
+                type == 'display'
+                  ? patientDataDiplay.cellPhone
+                  : patient.cellPhone
               }
-            }}
-            error={patient.cellPhoneError}
-            helperText={
-              patient.cellPhoneError
-                ? 'Please enter a valid 10-digit phone number'
-                : ''
-            }
-          />
+              disabled={type == 'display'}
+              onChange={(e) => {
+                let value = e.target.value;
+                if (value[0] === '0') {
+                  value = value.slice(1);
+                }
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhone: value,
+                }));
+              }}
+              onBlur={(e) => {
+                if (!/^\d{10}$/.test(e.target.value)) {
+                  setPatient((prevValues: any) => ({
+                    ...prevValues,
+                    cellPhoneError: true,
+                  }));
+                } else {
+                  setPatient((prevValues: any) => ({
+                    ...prevValues,
+                    cellPhoneError: false,
+                  }));
+                }
+              }}
+              error={patient.cellPhoneError}
+              helperText={
+                patient.cellPhoneError
+                  ? 'Please enter a valid 10-digit phone number'
+                  : ''
+              }
+            />
+
         </Grid>
 
         <Grid