Updated the root structure of Client side

Client/src/Components/Dropdown/index.css

@@ -0,0 +1 @@
+/* dropdown styles*/

Client/src/Components/Dropdown/index.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+const Dropdown = ({ id, label, options, onChange, value }) => {
+    return (
+        <Autocomplete
+            id={id}
+            options={options}
+            getOptionLabel={(option) => option.name}
+            value={value}
+            onChange={onChange}
+            renderInput={(params) => <TextField {...params} label={label} />}
+        />
+    );
+};
+
+// Define PropTypes for DropDown component
+Dropdown.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    options: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object.isRequired,
+};
+
+export default Dropdown;

Client/src/Components/DropdownTeamMember/index.css

@@ -0,0 +1 @@
+/*Dropdown Team Member styles*/

Client/src/Components/DropdownTeamMember/index.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useState } from 'react'
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+// import DropDown from './Dropdown';
+import DropDown from '../Dropdown'
+
+
+
+const DropdownTeamMember = () => {
+    const [selectedTeamMember, setSelectedTeamMember] = useState(null);
+
+    const teamMembers = [
+        { id: 1, name: 'John Doe' },
+        { id: 2, name: 'Jane Smith' },
+        { id: 3, name: 'Alex Johnson' },
+        // more team members...
+    ];
+
+    const handleTeamMemberChange = (event, value) => {
+        setSelectedTeamMember(value);
+    };
+
+    const handleSubmit = () => {
+        alert(`Selected Team Member: ${selectedTeamMember ? selectedTeamMember.name : 'None'}`);
+    };
+
+    return (
+        <>
+            <div className="app-container" style={{ width: '500px' }}>
+                <DropDown
+                    id="team-member-autocomplete"
+                    options={teamMembers}
+                    label="Select team member"
+                    value={selectedTeamMember}
+                    onChange={handleTeamMemberChange}
+                />
+            </div>
+        </>
+    );
+
+}
+
+export default DropdownTeamMember

Client/src/Components/NavBar/index.css

@@ -0,0 +1 @@
+/* NavBar Component Styles*/

Client/src/Components/NavBar/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.css'
+
+const NavBar = () => {
+    return (
+        <div>NavBar Component</div>
+    )
+}
+
+export default NavBar