second section

src/App.css

@@ -8,3 +8,11 @@
     width: 300px !important;
     margin: 5%;
 }
+
+.textfield-padding .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root{
+    padding:'15px' !important;
+}
+
+.custom-legend-padding fieldset legend {
+    padding: 25px !important;
+}

src/Components/PatientForm/FormSection1.tsx

@@ -67,7 +67,7 @@ export default function FormSection1(){
           city: "",
           state: "",
           zipCode: "",
-          gender: "",
+          gender: "male",
           maritalStatus: "",
         },
         validationSchema,
@@ -88,10 +88,10 @@ export default function FormSection1(){
     return(
         <>
         <Grid container direction="row">
-            <Grid item xs={4} className='collapsable-form-style'>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
              <TextField
                     variant="filled"
-                    label="  Patient's Full Name"
+                    label="Patient's Full Name"
                     name="fullName"
                     placeholder='Please enter your name'
                     value={formik.values.fullName}
@@ -173,17 +173,7 @@ export default function FormSection1(){
                     />
                 </LocalizationProvider>
                 </FormControl>
-                {/* <TextField
+            
-                variant="filled"
-                    label="Date of Birth"
-                    name="dateOfBirth"
-                    type="date"
-                    value={formik.values.dateOfBirth}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    error={formik.touched.dateOfBirth && Boolean(formik.errors.dateOfBirth)}
-                    helperText={formik.touched.dateOfBirth && formik.errors.dateOfBirth}
-                /> */}
                 </Grid>
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
@@ -251,36 +241,21 @@ export default function FormSection1(){
                 </Grid>
 
                 <Grid item xs={4} sx={{paddingLeft:"14px"}} className='collapsable-form-style'>
+                <FormControl>
                 <FormLabel>Gender</FormLabel>
                 <RadioGroup
-                    // name="gender"
+                    // value={patient.gender}
-                    value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue="male"
+                    name="radio-buttons-group"
                     onChange={handleChange}
                     sx={{display:'flex', flexDirection:'row'}}
-                    defaultValue="male"
                 >
                     <FormControlLabel value="male" control={<Radio />} label="Male" />
                     <FormControlLabel value="female" control={<Radio />} label="Female" />
                 </RadioGroup>
+                </FormControl>
                 </Grid>
-
-              {/*   <Grid item xs={4} className='collapsable-form-style' >
-                <FormLabel>Marital Status</FormLabel>
-                <RadioGroup
-                    name="maritalStatus"
-                    value={patient.maritalStatus}
-                    onChange={handleChange}
-                >
-                    <FormControlLabel value="single" control={<Radio />} label="Single" />
-                    <FormControlLabel value="married" control={<Radio />} label="Married" />
-                </RadioGroup>
-                </Grid> */}
-
-                {/* <Grid item xs={3} className='collapsable-form-style' sx={{margin:5}}>
-                <Button type="submit" variant="contained" color="primary" sx={{width:'200px'}}>
-                    Submit
-                </Button>
-                </Grid> */}
             </Grid>       
         </>
     )

src/Components/PatientForm/FormSection2.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import { useFormik } from "formik";
+import * as yup from "yup";
+import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
+
+export default function FormSection1(){
+    const [state, setState] = React.useState({
+        married: false,
+        single: false,
+        widowed: false,
+        separated: false,
+        divorced: false,
+      });
+    
+      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setState({ ...state, [event.target.name]: event.target.checked });
+      };
+
+    
+    return(
+        <>
+        
+        <form>
+        <Grid container direction="row">
+        <Grid item xs={8} className='collapsable-form-style textfield-padding' sx={{paddingLeft:"14px"}}>
+            <FormControl>
+            <FormLabel>Marital Status</FormLabel>
+                <RadioGroup
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue="married"
+                    name="radio-buttons-group"
+                    onChange={handleChange}
+                    sx={{display:'flex', flexDirection:'row'}}
+                    >
+                    <FormControlLabel value="married" control={<Radio />} label="Married" />
+                    <FormControlLabel value="single" control={<Radio />} label="Single" />
+                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
+                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
+                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
+                </RadioGroup>
+                </FormControl>
+            </Grid>
+           
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Number of Children/Ages" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Occupation" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Hours/Week" type="number" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Employer" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Spouse's Name" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Spouse's Employer" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Emergency Contact" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Relationship" className='collapsable-form-style'/>
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
+            <TextField variant="filled" label="Phone" type="tel" className='collapsable-form-style'/>
+            </Grid>
+        </Grid>
+        </form>
+        </>
+    )
+}

src/Components/PatientForm/PatientForm.tsx

@@ -1,13 +1,18 @@
 import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Footer from "../Footer";
 import Header from "../Header";
-import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import {Button, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
 import FormSection1 from './FormSection1';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import FormSection2 from './FormSection2';
 
 interface Patient {
     fullName: string;
@@ -25,6 +30,41 @@ interface Patient {
     maritalStatus: string;
   }
 
+  const Accordion = styled((props: AccordionProps) => (
+    <MuiAccordion disableGutters elevation={0} square {...props} />
+  ))(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '&:not(:last-child)': {
+      borderBottom: 0,
+    },
+    '&:before': {
+      display: 'none',
+    },
+  }));
+  
+  const AccordionSummary = styled((props: AccordionSummaryProps) => (
+    <MuiAccordionSummary
+      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+      {...props}
+    />
+  ))(({ theme }) => ({
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, .05)'
+        : 'rgba(0, 0, 0, .03)',
+    flexDirection: 'row-reverse',
+    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+      transform: 'rotate(90deg)',
+    },
+    '& .MuiAccordionSummary-content': {
+      marginLeft: theme.spacing(1),
+    },
+  }));
+  
+  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+    padding: theme.spacing(2),
+    borderTop: '1px solid rgba(0, 0, 0, .125)',
+  }));
 
 export default function PatientForm(){
     const [expanded, setExpanded] = React.useState<string | false>('panel1');
@@ -73,25 +113,19 @@ export default function PatientForm(){
                                 >
                                 <Typography variant="h6">Basic Patient Information (Part 1)</Typography>
                             </AccordionSummary>
+                           
                             <AccordionDetails>
                                 <FormSection1/>
                             </AccordionDetails>
                             </form>
                         </Accordion>
 
-                        <Accordion>
+                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
-                            <AccordionSummary
+                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-                            expandIcon={<ExpandMoreIcon />}
-                            aria-controls="panel2a-content"
-                            id="panel2a-header"
-                            >
                             <Typography variant="h6">Basic Patient Information (Part 2)</Typography>
                             </AccordionSummary>
                             <AccordionDetails>
-                            <Typography>
+                                <FormSection2/>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-                                malesuada lacus ex, sit amet blandit leo lobortis eget.
-                            </Typography>
                             </AccordionDetails>
                         </Accordion>
                         <Grid >