Building Enrollment Form in MERN Stack Course Management App

//server.js

const app = require("./app")
const { config } = require("dotenv")

config({
    path: './config/config.env'
})

app.listen(process.env.PORT, () => {
    console.log(`Server is Running at ${process.env.PORT}`);
})

//app.js

const express = require('express');
const database = require('./config/database');
const bodyParser = require('body-parser');
const app = express();
const cors = require('cors')

const enrollment = require('./routes/enrollmentRoutes')
const ErrorMiddleware = require('./middleware/Error');

app.use(cors({
    origin: ['http://localhost:3000'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
}));

database.connectedToDatabase();


app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));



app.use('/api/v1', enrollment)
app.use(ErrorMiddleware);


module.exports = app;

// models/enrollmentModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const EnrollmentSchema = new Schema({
    personalInfo: {
        fullName: {
            type: String,
            required: true
        },
        dateOfBirth: {
            type: Date,
            required: true
        },
        gender: {
            type: String,
            enum: ['Male', 'Female', 'Other'],
            required: true
        },
        nationality: {
            type: String,
            required: true
        },

        phoneNumber: {
            type: String,
            required: true
        },
        emailAddress: {
            type: String,
            required: true
        }
    },
    parentGuardianInfo: {
        fullName: {
            type: String,
            required: true
        },
        relationship: {
            type: String,
            required: true
        },
        phoneNumber: {
            type: String,
            required: true
        },
        emailAddress: {
            type: String,
            required: true
        }
    },
    emergencyContact: {
        fullName: {
            type: String,
            required: true
        },
        relationship: {
            type: String,
            required: true
        },
        phoneNumber: {
            type: String,
            required: true
        }
    },
    previousEducation: {
        schoolName: {
            type: String,
            required: true
        },
        address: {
            type: String,
            required: true
        },
        gradeCompleted: {
            type: String,
            required: true
        },
        yearsAttended: {
            type: String,
            required: true
        }
    },
    enrollmentDetails: {
        programGrade: {
            type: String,
            required: true
        },
        startDate: {
            type: Date,
            required: true
        },
        preferredSchedule: {
            type: String,
            enum: ['Morning', 'Afternoon', 'Evening'],
            required: true
        }
    },
    medicalInfo: {
        allergies: {
            type: String
        },
        medications: {
            type: String
        },

    },
    additionalInfo: {
        specialNeeds: {
            type: String
        },
        extracurricularInterests: {
            type: String
        }
    },
    consent: {
        dataConsent: {
            type: Boolean,
            required: true
        },
        policyAgreement: {
            type: Boolean,
            required: true
        }
    },
    createdAt: {
        type: Date,
        default: Date.now
    }
});

const Enrollment = mongoose.model('Enrollment', EnrollmentSchema);

module.exports = Enrollment;

// contollers/enrollmentController.js

const Enrollment = require('../models/enrollmentModel');


exports.createEnrollment = async (req, res) => {
    try {
        const newEnrollment = new Enrollment(req.body);
        await newEnrollment.save();
        console.log("sfs", newEnrollment)
        res.status(201).json({ message: 'Enrollment created successfully',
        enrollment: newEnrollment });
    } catch (error) {
        res.status(400).json({ message: 'Error creating enrollment', error });
    }
};


exports.getAllEnrollments = async (req, res) => {
    try {
        const enrollments = await Enrollment.find();
        res.status(200).json(enrollments);
    } catch (error) {
        res.status(400).json({ message: 'Error fetching enrollments', error });
    }
};


exports.getEnrollmentById = async (req, res) => {
    try {
        const enrollment = await Enrollment.findById(req.params.id);
        if (!enrollment) {
            return res.status(404).json({ message: 'Enrollment not found' });
        }
        res.status(200).json(enrollment);
    } catch (error) {
        res.status(400).json({ message: 'Error fetching enrollment', error });
    }
};

exports.updateEnrollment = async (req, res) => {
    try {
        const enrollment = await Enrollment.findByIdAndUpdate(req.params.id,
        req.body, { new: true, runValidators: true });
        if (!enrollment) {
            return res.status(404).json({ message: 'Enrollment not found' });
        }
        res.status(200).json({ message: 'Enrollment updated successfully', enrollment });
    } catch (error) {
        res.status(400).json({ message: 'Error updating enrollment', error });
    }
};


exports.deleteEnrollment = async (req, res) => {
    try {
        const enrollment = await Enrollment.findByIdAndDelete(req.params.id);
        if (!enrollment) {
            return res.status(404).json({ message: 'Enrollment not found' });
        }
        res.status(200).json({ message: 'Enrollment deleted successfully' });
    } catch (error) {
        res.status(400).json({ message: 'Error deleting enrollment', error });
    }
};

// config/database.js

const mongoose = require('mongoose');


const connectedToDatabase = async () => {
    try {
        await mongoose.connect('mongodb://localhost:27017/course', {
            useNewUrlParser: true,
            useUnifiedTopology: true
        });
        console.log('Connected to MongoDB');
    } catch (error) {
        console.error('MongoDB connection error:', error);
    }
}

module.exports = { connectedToDatabase }

//routes/enrollemntRoutes.js

const express = require('express');
const router = express.Router();
const enrollmentController = require('../controllers/enrollmentController');

router.post('/enrollments', enrollmentController.createEnrollment);


router.get('/enrollments', enrollmentController.getAllEnrollments);


router.get('/enrollments/:id', enrollmentController.getEnrollmentById);


router.put('/enrollments/:id', enrollmentController.updateEnrollment);


router.delete('/enrollments/:id', enrollmentController.deleteEnrollment);

module.exports = router;

//App.js

import React from 'react';
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
import Home from './components/Home/Home';
import Header from '../src/components/Layout/Header/Header'

import Footer from './components/Layout/Footer/Footer';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';

import Contact from './components/Contact/Contact';
import Request from './components/Request/Request';
import About from './components/About/About';

import EnrollmentForm from './components/Auth/EnrollmentForm';

function App() {

    return (
        <Router>
            <Header />
            <Routes>
                <Route path='/' element={<Home />} />

                <Route path='/contact' element={<Contact />} />
                <Route path='/request' element={<Request />} />
                <Route path='/about' element={<About />} />

                <Route path='/login' element={<Login />} />
                <Route path='/signup' element={<Register />} />

                <Route path='/enroll' element={<EnrollmentForm />} />
            </Routes>
            <Footer />
        </Router>
    );
}

export default App;

//src/components/Home/Home.jsx

import { Box, Button, HStack, Heading, Image, Stack, Text, VStack } from '@chakra-ui/react'
import React from 'react'
import "./home.css"
import bg from "../../assets/images/bg.jpg"
import { Link } from 'react-router-dom'
import intro from '../../assets/video/intro.mp4'
import { CgGoogle, CgYoutube } from 'react-icons/cg'
import { SiCoursera, SiUdemy } from 'react-icons/si'




const Home = () => {
    return (
        <section className='home'>
            <div className='container'>
                <Stack
                    direction={["column", "row"]}
                    height="100%" justifyContent={["center", "space-between"]}
                    alignItems="center"
                    spacing={["16", "56"]}
                >
                    <VStack width={'full'} alignItems={['center', 'flex-end']}>
                        <Heading children="LEARN FROM THE EXPERTS" size={'xl'} />
                        <Text textAlign={['center', 'left']}
                            children='Find a vlauable content at reasonble price' />
                        <Link to={"/enroll"}>
                            <Button size={'lg'} colorScheme='yellow'>
                                Enroll Now
                            </Button>
                        </Link>
                    </VStack>
                    <Image className='vector-graphics'
                        boxSize={"md"} src={bg} objectFit={'contain'} />
                </Stack>
            </div>
            <Box padding={'8'} bg={'blackAlpha.800'}>
                <Heading
                    textAlign={'center'}
                    fontFamily={'body'}
                    color={'yellow.400'}
                    children="OUR BRANDS"
                />
                <HStack className='brandsBanner'
                    justifyContent={'space-evenly'} marginTop={'4'}>
                    <CgGoogle />
                    <CgYoutube />
                    <SiCoursera />
                    <SiUdemy />

                </HStack>

            </Box>

            <div className='container2'>
                <video
                    autoPlay controls
                    controlsList='nodownload nofullscreen noremoteplayback'
                    disablePictureInPicture
                    disableRemotePlayback
                    src={intro}
                >

                </video>
            </div>
        </section>
    )
}

export default Home

//src/components/About/About.jsx

import {
    Avatar,
    Button,
    Container,
    HStack,
    Heading,
    Stack,
    Text,
    VStack,
} from "@chakra-ui/react";
import React from "react";
import { Link } from "react-router-dom";
import intro from "../../assets/video/intro.mp4";
import { RiSecurePaymentFill } from "react-icons/ri";
const Founder = () => (
    <Stack direction={["column", "row"]} spacing={["4", "16"]} padding={"8"}>
        <VStack>
            <Avatar boxSize={["40", "48"]} />
            <Text children="Co-Founder" opacity={"0.7"} />
        </VStack>
        <VStack justifyContent={"center"} alignItems={["center", "flex-start"]}>
            <Heading children="Faheem Akhtar" size={["md", "xl"]} />

            <Text
                textAlign={["center", "left"]}
                children={
                    "Hi, I am a full-stack developer and Our mission is
                    to provide the content at a reasonable price"
                }
            />
        </VStack>
    </Stack>
);

const VideoPlayer = () => (
    <video
        autoPlay
        controls
        muted
        loop
        controlsList="nodownload nofullscreen noremoteplayback"
        disablePictureInPicture
        disableRemotePlayback
        src={intro}
    ></video>
);

const About = () => {
    return (
        <Container maxW={"container.lg"} padding={"16"} boxShadow={"lg"}>
            <Heading children="About us" textAlign={["center", "left"]} />
            <Founder />
            <Stack m={"8"} direction={["column", "row"]} alignItems={"center"}>
                <Text fontFamily={"cursive"} m={"8"} textAlign={["center", "left"]}>
                    We are a video streaming platform with some premium course available
                    only for premium users.
                </Text>
                <Link to="/subscribe">
                    <Button variant={"ghost"} colorScheme="yellow">
                        {" "}
                        Checkout Our Plan
                    </Button>
                </Link>
            </Stack>
            <VideoPlayer />

            <HStack my={"4"} p={"4"}>
                <RiSecurePaymentFill />
                <Heading
                    size={"xs"}
                    fontFamily={"sans-serif"}
                    textTransform={"uppercase"}
                    children={"Payement is secured by Razorpay"}
                />
            </HStack>
        </Container>
    );
};

export default About;

//src/components/Contact/Contact.jsx

import {
    Box,
    Button,
    Container,
    FormLabel,
    Heading,
    Input,
    Textarea,
    VStack,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Contact = () => {
    const [email, setEmail] = useState("");
    const [name, setName] = useState("");
    const [message, setMessage] = useState("");

    return (
        <Container h={"90vh"}>
            <VStack h={"full"} justifyContent={"center"} spacing={"16"}>
                <Heading children={"Contact Us"} textTransform={"uppercase"} />

                <form style={{ width: "100%" }}>
                    <Box my={"4"}>
                        <FormLabel htmlFor="name" children="Name" />
                        <Input
                            required
                            id="name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="example"
                            type="text"
                            focusBorderColor="yellow.500"
                        />
                    </Box>
                    <Box my={"4"}>
                        <FormLabel htmlFor="email" children="Email Address" />
                        <Input
                            required
                            id="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="example@gmail.com"
                            type="email"
                            focusBorderColor="yellow.500"
                        />
                    </Box>
                    <Box my={"4"}>
                        <FormLabel htmlFor="message" children="Message" />
                        <Textarea
                            required
                            id="message"
                            value={message}
                            onChange={(e) => setMessage(e.target.value)}
                            placeholder="Your message........"
                            focusBorderColor="yellow.500"
                        />
                    </Box>

                    <Button colorScheme="yellow" my={"4"} type="submit">
                        Send Meassage
                    </Button>
                    <Box my={"4"}>
                        Request a Course?{" "}
                        <Link to="/request">
                            <Button colorScheme="yellow" variant={"link"}>
                                Click
                            </Button>{" "}
                            here
                        </Link>
                    </Box>
                </form>
            </VStack>
        </Container>
    );
};

export default Contact;

//src/components/Auth/Register.jsx

import React, { useState } from "react";
import {
    Avatar,
    Box,
    Button,
    Container,
    FormLabel,
    Heading,
    Input,
    VStack,
} from "@chakra-ui/react";
import { Link } from "react-router-dom";

export const fileUploadCss = {
    cursor: "pointer",
    marginLeft: "-5%",
    width: "110%",
    height: "100%",
    color: "#ECC94B",
    backgroundColor: "white",
};

const fileUploadStyle = {
    "&file-selector-button": fileUploadCss,
};

const Register = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [name, setName] = useState("");
    const [imagePrev, setImagePrev] = useState("");
    const [Image, setImage] = useState("");

    const chnageImageHandler = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            setImagePrev(reader.result);
            setImage(file);
        };
    };

    return (
        <Container h={"95vh"}>
            <VStack h={"full"} justifyContent={"center"}>
                <Heading children={"User Registeration"} />

                <form style={{ width: "100%" }}>
                    <Box my={"4"} justifyContent={"center"} display={"flex"}>
                        <Avatar src={imagePrev} size={"xl"} />
                    </Box>
                    <Box my={"4"}>
                        <FormLabel htmlFor="name" children="Name" />
                        <Input
                            required
                            id="name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="example"
                            type="text"
                            focusBorderColor="yellow.500"
                        />
                    </Box>
                    <Box my={"4"}>
                        <FormLabel htmlFor="email" children="Email Address" />
                        <Input
                            required
                            id="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="example@gmail.com"
                            type="email"
                            focusBorderColor="yellow.500"
                        />
                    </Box>
                    <Box my={"4"}>
                        <FormLabel htmlFor="password" children="Password" />
                        <Input
                            required
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="********"
                            type="password"
                            focusBorderColor="yellow.500"
                        />
                    </Box>

                    <Box my={"4"}>
                        <FormLabel htmlFor="chooseAvatar" children="Choose Avatar" />
                        <Input
                            accept="image/*"
                            css={fileUploadStyle}
                            required
                            id="chooseAvatar"
                            type="file"
                            focusBorderColor="yellow.500"
                            onChange={chnageImageHandler}
                        />
                    </Box>
                    <Button colorScheme="yellow" my={"4"} type="submit">
                        Sign Up
                    </Button>
                    <Box my={"4"}>
                        User Already Exist?{" "}
                        <Link to="/login">
                            <Button colorScheme="yellow" variant={"link"}>
                                Login
                            </Button>{" "}
                            here
                        </Link>
                    </Box>
                </form>
            </VStack>
        </Container>
    );
};

export default Register;

//src/components/Auth/Login.jsx

import {
    Box,
    Button,
    Container,
    FormLabel,
    Heading,
    Input,
    VStack,
} from "@chakra-ui/react";
import { Link } from "react-router-dom";
import React, { useState } from "react";

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    return (
        <Container h={"95vh"}>
            <VStack h={"full"} justifyContent={"center"} spacing={"16"}>
                <Heading children={"Welcome To Bundler"} />

                <form style={{ width: "100%" }}>
                    <Box>
                        <FormLabel htmlFor="email" children="Email Address" />
                        <Input
                            required
                            id="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="example@gmail.com"
                            type="email"
                            focusBorderColor="yellow.500"
                        />
                    </Box>
                    <Box>
                        <FormLabel htmlFor="password" children="Password" />
                        <Input
                            required
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="********"
                            type="password"
                            focusBorderColor="yellow.500"
                        />
                    </Box>

                    <Box>
                        <Link to="/forgetpassword">
                            <Button fontSize={"sm"} variant={"link"}>
                                Forgot Pssword?
                            </Button>
                        </Link>
                    </Box>
                    <Button colorScheme="yellow" my={"4"} type="submit">
                        Login
                    </Button>
                    <Box my={"4"}>
                        New User?{" "}
                        <Link to="/signup">
                            <Button colorScheme="yellow" variant={"link"}>
                                Sign Up
                            </Button>{" "}
                            here
                        </Link>
                    </Box>
                </form>
            </VStack>
        </Container>
    );
};

export default Login;

//src/components/Auth/EnrollmentForm.jsx

import React, { useState } from "react";
import {
    Box,
    Button,
    FormControl,
    FormLabel,
    Input,
    Stack,
    Textarea,
    Select,
    useToast,
    Checkbox,
} from "@chakra-ui/react";

const EnrollmentForm = () => {
    const [formData, setFormData] = useState({
        personalInfo: {
            fullName: "",
            dateOfBirth: "",
            gender: "",
            nationality: "",
            phoneNumber: "",
            emailAddress: "",
        },
        parentGuardianInfo: {
            fullName: "",
            relationship: "",
            phoneNumber: "",
            emailAddress: "",
        },
        emergencyContact: {
            fullName: "",
            relationship: "",
            phoneNumber: "",
        },
        previousEducation: {
            schoolName: "",
            address: "",
            gradeCompleted: "",
            yearsAttended: "",
        },
        enrollmentDetails: {
            programGrade: "",
            startDate: "",
            preferredSchedule: "",
        },
        medicalInfo: {
            allergies: "",
            medications: "",
        },
        additionalInfo: {
            specialNeeds: "",
            extracurricularInterests: "",
        },
        consent: {
            dataConsent: false,
            policyAgreement: false,
        },
    });

    const toast = useToast();

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        if (type === "checkbox") {
            setFormData((prev) => ({
                ...prev,
                consent: {
                    ...prev.consent,
                    [name]: checked,
                },
            }));
        } else {
            const nameParts = name.split(".");
            if (nameParts.length > 1) {
                const [section, subKey] = nameParts;
                setFormData((prev) => ({
                    ...prev,
                    [section]: {
                        ...prev[section],
                        [subKey]: value,
                    },
                }));
            } else {
                setFormData((prev) => ({
                    ...prev,
                    [name]: value,
                }));
            }
        }
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        console.log("Form Data:", formData);

        try {
            const response = await fetch("http://localhost:4000/api/v1/enrollments", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                const result = await response.json();
                toast({
                    title: "Enrollment created.",
                    description: result.message,
                    status: "success",
                    duration: 9000,
                    isClosable: true,
                });
                setFormData({
                    personalInfo: {
                        fullName: "",
                        dateOfBirth: "",
                        gender: "",
                        nationality: "",
                        phoneNumber: "",
                        emailAddress: "",
                    },
                    parentGuardianInfo: {
                        fullName: "",
                        relationship: "",
                        phoneNumber: "",
                        emailAddress: "",
                    },
                    emergencyContact: { fullName: "", relationship: "", phoneNumber: "" },
                    previousEducation: {
                        schoolName: "",
                        address: "",
                        gradeCompleted: "",
                        yearsAttended: "",
                    },
                    enrollmentDetails: {
                        programGrade: "",
                        startDate: "",
                        preferredSchedule: "",
                    },
                    medicalInfo: { allergies: "", medications: "" },
                    additionalInfo: { specialNeeds: "", extracurricularInterests: "" },
                    consent: { dataConsent: false, policyAgreement: false },
                });
            } else {
                const error = await response.json();
                console.error("Server Error:", error);
                toast({
                    title: "Error.",
                    description: error.message,
                    status: "error",
                    duration: 9000,
                    isClosable: true,
                });
            }
        } catch (error) {
            console.error("Unexpected Error:", error);
            toast({
                title: "Error.",
                description: "An unexpected error occurred.",
                status: "error",
                duration: 9000,
                isClosable: true,
            });
        }
    };

    return (
        <Box width="80%" maxW="800px" mx="auto" p={4}>
            <form onSubmit={handleSubmit}>
                <Stack spacing={4}>
                    <Box>
                        <FormControl isRequired>
                            <FormLabel>Full Name</FormLabel>
                            <Input
                                name="personalInfo.fullName"
                                value={formData.personalInfo.fullName}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Date of Birth</FormLabel>
                            <Input
                                type="date"
                                name="personalInfo.dateOfBirth"
                                value={formData.personalInfo.dateOfBirth}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Gender</FormLabel>
                            <Select
                                name="personalInfo.gender"
                                value={formData.personalInfo.gender}
                                onChange={handleChange}
                            >
                                <option value="">Select Gender</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </Select>
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Nationality</FormLabel>
                            <Input
                                name="personalInfo.nationality"
                                value={formData.personalInfo.nationality}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Phone Number</FormLabel>
                            <Input
                                name="personalInfo.phoneNumber"
                                value={formData.personalInfo.phoneNumber}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Email Address</FormLabel>
                            <Input
                                type="email"
                                name="personalInfo.emailAddress"
                                value={formData.personalInfo.emailAddress}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Parent/Guardian Info */}
                    <Box>
                        <FormControl isRequired>
                            <FormLabel>Parent/Guardian Full Name</FormLabel>
                            <Input
                                name="parentGuardianInfo.fullName"
                                value={formData.parentGuardianInfo.fullName}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Relationship</FormLabel>
                            <Input
                                name="parentGuardianInfo.relationship"
                                value={formData.parentGuardianInfo.relationship}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Phone Number</FormLabel>
                            <Input
                                name="parentGuardianInfo.phoneNumber"
                                value={formData.parentGuardianInfo.phoneNumber}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Email Address</FormLabel>
                            <Input
                                type="email"
                                name="parentGuardianInfo.emailAddress"
                                value={formData.parentGuardianInfo.emailAddress}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Emergency Contact */}
                    <Box>
                        <FormControl isRequired>
                            <FormLabel>Emergency Contact Full Name</FormLabel>
                            <Input
                                name="emergencyContact.fullName"
                                value={formData.emergencyContact.fullName}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Relationship</FormLabel>
                            <Input
                                name="emergencyContact.relationship"
                                value={formData.emergencyContact.relationship}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Phone Number</FormLabel>
                            <Input
                                name="emergencyContact.phoneNumber"
                                value={formData.emergencyContact.phoneNumber}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Previous Education */}
                    <Box>
                        <FormControl>
                            <FormLabel>Previous School Name</FormLabel>
                            <Input
                                name="previousEducation.schoolName"
                                value={formData.previousEducation.schoolName}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Address</FormLabel>
                            <Input
                                name="previousEducation.address"
                                value={formData.previousEducation.address}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Grade Completed</FormLabel>
                            <Input
                                name="previousEducation.gradeCompleted"
                                value={formData.previousEducation.gradeCompleted}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Years Attended</FormLabel>
                            <Input
                                name="previousEducation.yearsAttended"
                                value={formData.previousEducation.yearsAttended}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Enrollment Details */}
                    <Box>
                        <FormControl isRequired>
                            <FormLabel>Program Grade</FormLabel>
                            <Input
                                name="enrollmentDetails.programGrade"
                                value={formData.enrollmentDetails.programGrade}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl isRequired>
                            <FormLabel>Start Date</FormLabel>
                            <Input
                                type="date"
                                name="enrollmentDetails.startDate"
                                value={formData.enrollmentDetails.startDate}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Preferred Schedule</FormLabel>
                            <Input
                                name="enrollmentDetails.preferredSchedule"
                                value={formData.enrollmentDetails.preferredSchedule}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Medical Info */}
                    <Box>
                        <FormControl>
                            <FormLabel>Allergies</FormLabel>
                            <Textarea
                                name="medicalInfo.allergies"
                                value={formData.medicalInfo.allergies}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Medications</FormLabel>
                            <Textarea
                                name="medicalInfo.medications"
                                value={formData.medicalInfo.medications}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Additional Info */}
                    <Box>
                        <FormControl>
                            <FormLabel>Special Needs</FormLabel>
                            <Textarea
                                name="additionalInfo.specialNeeds"
                                value={formData.additionalInfo.specialNeeds}
                                onChange={handleChange}
                            />
                        </FormControl>
                        <FormControl>
                            <FormLabel>Extracurricular Interests</FormLabel>
                            <Textarea
                                name="additionalInfo.extracurricularInterests"
                                value={formData.additionalInfo.extracurricularInterests}
                                onChange={handleChange}
                            />
                        </FormControl>
                    </Box>

                    {/* Consent */}
                    <Box>
                        <FormControl isRequired>
                            <Checkbox
                                name="dataConsent"
                                isChecked={formData.consent.dataConsent}
                                onChange={handleChange}
                            >
                                I consent to data collection
                            </Checkbox>
                        </FormControl>
                        <FormControl isRequired>
                            <Checkbox
                                name="policyAgreement"
                                isChecked={formData.consent.policyAgreement}
                                onChange={handleChange}
                            >
                                I agree to the policy
                            </Checkbox>
                        </FormControl>
                    </Box>

                    <Button type="submit" colorScheme="blue">
                        Submit
                    </Button>
                </Stack>
            </form>
        </Box>
    );
};

export default EnrollmentForm;

//src/components/Layout/Header.jsx

import React from "react";
import { ColorModeSwitcher } from "../../../ColorModeSwitcher";
import {
    Button,
    Drawer,
    DrawerBody,
    DrawerContent,
    DrawerHeader,
    DrawerOverlay,
    HStack,
    VStack,
    useDisclosure,
} from "@chakra-ui/react";
import { RiDashboardFill, RiLogoutBoxLine, RiMenu5Fill } from "react-icons/ri";
import { Link } from "react-router-dom";

const LinkButton = ({ url = "/", title = "Home", onClose }) => (
    <Link to={url} onClick={onClose}>
        <Button variant={"ghost"}>{title}</Button>
    </Link>
);

const Header = () => {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const isAuthenticated = false;
    const user = {
        role: "admin",
    };
    const logoutHandler = () => {
        console.log("Succefull");
    };
    return (
        <>
            <ColorModeSwitcher />
            <Button
                onClick={onOpen}
                colorScheme="yellow"
                width={"12"}
                height={"12"}
                rounded={"full"}
                zIndex={"overlay"}
                position={"fixed"}
                top={"6"}
                left={"6"}
            >
                <RiMenu5Fill />
            </Button>
            <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
                <DrawerOverlay />
                <DrawerContent>
                    <DrawerHeader borderBottomWidth={"1px"}>BUNDLER</DrawerHeader>

                    <DrawerBody>
                        <VStack spacing={"12"} alignItems={"flex-start"}>
                            <LinkButton onClose={onClose} url="/" title="Home" />
                            <LinkButton
                                onClose={onClose}
                                url="/courses"
                                title="ALL Courses"
                            />
                            <LinkButton
                                onClose={onClose}
                                url="request"
                                title="Request Courses"
                            />
                            <LinkButton onClose={onClose} url="/contact" title="Contact" />
                            <LinkButton onClose={onClose} url="/about" title="About" />

                            <HStack
                                justifyContent={"space-evenly"}
                                position={"absolute"}
                                bottom={"2rem"}
                                width={"80%"}
                            >
                                {isAuthenticated ? (
                                    <>
                                        <VStack>
                                            <HStack>
                                                <Link to="/profile" onClick={onClose}>
                                                    <Button colorScheme="yellow" variant={"ghost"}>
                                                        Profile
                                                    </Button>
                                                </Link>
                                                <Button variant={"ghost"} onClick={logoutHandler}>
                                                    <RiLogoutBoxLine />
                                                    Logout
                                                </Button>
                                            </HStack>
                                            {user && user.role === "admin" && (
                                                <Link to={"/admin/dashboard"} onClick={onClose}>
                                                    <Button colorScheme="purple" variant={"ghost"}>
                                                        <RiDashboardFill style={{ margin: "4px" }} />
                                                        Dashboard
                                                    </Button>
                                                </Link>
                                            )}
                                        </VStack>
                                    </>
                                ) : (
                                    <>
                                        <Link to="/login" onClick={onClose}>
                                            <Button colorScheme="yellow">Login</Button>
                                        </Link>
                                        <p>OR</p>
                                        <Link to="/signup" onClick={onClose}>
                                            <Button colorScheme="yellow">Sign up</Button>
                                        </Link>
                                    </>
                                )}
                            </HStack>
                        </VStack>
                    </DrawerBody>
                </DrawerContent>
            </Drawer>
        </>
    );
};

export default Header;