Medical history section

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -16,7 +16,7 @@ interface FormValues {
   spouseBusinessPhone: string;
   emergencyContact: string;
   relationship: string;
-  phone: string;
+  spousePhone: string;
 }
 
 const validationSchema = yup.object({
@@ -32,10 +32,10 @@ const validationSchema = yup.object({
 //   spouseBusinessPhone:yup.string().required("Full name is required"),
   emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
   relationship:yup.string().required("Relationship is required"),
-  phone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
+  spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
 });
 
-const Form: React.FC = () => {
+export default function FamilyFormSection(){
     const formik = useFormik<FormValues>({
         initialValues:{
             maritalStatus:'',
@@ -50,7 +50,7 @@ const Form: React.FC = () => {
             spouseBusinessPhone:'',
             emergencyContact:'',
             relationship:'',
-            phone:''
+            spousePhone:''
         },
         validationSchema,
         onSubmit:(values)=>{
@@ -87,6 +87,7 @@ const Form: React.FC = () => {
             <Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                 <TextField 
+                required
                 variant="filled" 
                 label="Number of Children/Ages" 
                 className='collapsable-form-style'
@@ -100,6 +101,7 @@ const Form: React.FC = () => {
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                 <TextField 
+                required
                 variant="filled" 
                 label="Occupation" 
                 className='collapsable-form-style'
@@ -207,19 +209,16 @@ const Form: React.FC = () => {
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                      <TextField 
                      variant="filled" 
-                     label="Phone" type="tel" 
+                     label="Spouse's Phone" type="tel" 
                      className='collapsable-form-style'
                      name='phone'
                      onChange={formik.handleChange}
-                     value={formik.values.phone}
+                     value={formik.values.spousePhone}
                      onBlur={formik.handleBlur}
                      />
             </Grid>
         </Grid>
         </form>
-
         </>
     )
 };
-
-export default Form;

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+
+interface FormValues {
+  physicianname: string;
+  physiciancity: string;
+  physicianstate: string;
+  physicianphone: string;
+  chiropractorName: string;
+  chiropractorState: string;
+  xray: boolean;
+  ctScan: boolean;
+  cdImages: boolean;
+  visitDetails: string;
+  cellPhoneProvider: string;
+}
+
+const validationSchema = Yup.object({
+  familyphysician: Yup.string().required('Required'),
+  city: Yup.string().required('Required'),
+  state: Yup.string().required('Required'),
+  phone: Yup.string().required('Required'),
+  chiropractorName: Yup.string().required('Required'),
+  xray: Yup.boolean().required('Required'),
+  ctScan: Yup.boolean().required('Required'),
+  cdImages: Yup.boolean().required('Required'),
+  visitDetails: Yup.string().required('Required'),
+  cellPhoneProvider: Yup.string().required('Required'),
+});
+
+export default function MedicalHistoryForm(){
+    const formik = useFormik<FormValues>({
+        initialValues:{
+            physicianname: '',
+            physiciancity: '',
+            physicianstate: '',
+            physicianphone: '',
+            chiropractorName: '',
+            chiropractorState: '',
+            xray: false,
+            ctScan: false,
+            cdImages: false,
+            visitDetails: '',
+            cellPhoneProvider: '',
+        },
+        validationSchema,
+        onSubmit:(values)=>{
+            console.log(values);
+        }
+    })
+    return(
+        <>
+        <form onSubmit={formik.handleSubmit}>
+        <Grid container direction="row">
+            <Grid item xs={4} className='collapsable-form-style'>
+                <TextField 
+                variant="filled"
+                label="Family physician" 
+                name='familyphysician'
+                onChange={formik.handleChange}
+                value={formik.values.physicianname}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style'>
+                <TextField 
+                variant="filled"
+                label="City" 
+                name='city'
+                onChange={formik.handleChange}
+                value={formik.values.physiciancity}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style'>
+                 <TextField 
+                 variant="filled"
+                 label="State" 
+                 name='state'
+                 onChange={formik.handleChange}
+                 value={formik.values.physicianstate}
+                 onBlur={formik.handleBlur}
+                 />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style'>
+                <TextField 
+                variant="filled"
+                label="Phone" 
+                type="tel" 
+                name='phone'
+                onChange={formik.handleChange}
+                value={formik.values.physicianphone}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
+            
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
+
+            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
+                <FormControl>
+                <FormLabel>Previous Chiropractic Care</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue="yes"
+                    name="radio-buttons-group"
+                    onChange={formik.handleChange}
+                    sx={{display:'flex', flexDirection:'row'}}
+                >
+                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel value="no" control={<Radio />} label="No" />
+                </RadioGroup>
+                </FormControl>
+            </Grid>
+
+            <Grid item xs={4} className='collapsable-form-style'>
+                 <TextField 
+                 variant="filled"
+                 label="Chiropractor's Name" 
+                 name='chiropractorName'
+                 onChange={formik.handleChange}
+                 value={formik.values.chiropractorName}
+                 onBlur={formik.handleBlur}
+                 />
+            </Grid>
+
+            <Grid item xs={4} className='collapsable-form-style'>
+                 <TextField 
+                 variant="filled"
+                 label="City/State" 
+                 name='chiropractorState'
+                 onChange={formik.handleChange}
+                 value={formik.values.chiropractorState}
+                 onBlur={formik.handleBlur}
+                 />
+            </Grid>
+        </Grid>
+        </form>
+        </>
+    )}
+            

src/Components/PatientForm/PatientForm.tsx

@@ -4,7 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Footer from "../Footer";
 import Header from "../Header";
 import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import FormSection1 from './FormSection1';
+import PersonalSection from './PersonalSection1';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
@@ -12,7 +12,9 @@ import MuiAccordionSummary, {
   AccordionSummaryProps,
 } from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
-import FormSection2 from './FormSection2';
+import FormSection2 from './FamilyFormSection2';
+import MedicalHistory from './MedicalHistorySection3';
+import FamilyFormSection from './FamilyFormSection2';
 
 interface Patient {
     fullName: string;
@@ -100,34 +102,47 @@ export default function PatientForm(){
             <Paper elevation={0} className='app-screen-constants'>
                 <Header/>
                     <Paper  elevation={0} sx={{margin:4, minHeight:700}} >
+                    <form onSubmit={handleSubmit}>
                         <Typography variant="h5"  gutterBottom>
                             Confidential Patient Information
                         </Typography>
                         <Grid>
                         <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
-                            <form onSubmit={handleSubmit}>
+                            
                             <AccordionSummary
                                 expandIcon={<ExpandMoreIcon />}
                                 aria-controls="panel1a-content"
                                 id="panel1a-header"
                                 >
-                                <Typography variant="h6">Basic Patient Information (Part 1)</Typography>
+                                <Typography variant="h6">Patient's Personal Information</Typography>
                             </AccordionSummary>
                            
                             <AccordionDetails>
-                                <FormSection1/>
+                                <PersonalSection/>
                             </AccordionDetails>
-                            </form>
+                           
                         </Accordion>
 
                         <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
                             <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-                            <Typography variant="h6">Basic Patient Information (Part 2)</Typography>
+                                <Typography variant="h6">Patient's Family Information</Typography>
                             </AccordionSummary>
+
                             <AccordionDetails>
-                                <FormSection2/>
+                                <FamilyFormSection/>
                             </AccordionDetails>
                         </Accordion>
+
+                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
+                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+                                <Typography variant="h6">Patient's Medical History Information</Typography>
+                            </AccordionSummary>
+                            
+                            <AccordionDetails>
+                                <MedicalHistory/>
+                            </AccordionDetails>
+                        </Accordion>
+                       
                         <Grid >
                             <Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
                                 Submit
@@ -135,6 +150,7 @@ export default function PatientForm(){
                         </Grid>
                    
                         </Grid>
+                        </form>
                     </Paper>
                 <Footer/>
              </Paper>

src/Components/PatientForm/PersonalSection1.tsx

@@ -35,7 +35,7 @@ interface Patient {
     zipCode: yup.string().matches(/^\d{5}$/, "Zip code must be 6 digits").required("Zip code is required")
   });
 
-export default function FormSection1(){
+export default function PersonalSection(){
 
     const [startDateValue, setStartDateValue] = React.useState<any>();
     const [patient, setPatient] = React.useState<Patient>({