Commit With Frontend and Backend in MERN

frontend/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Page1 from './Page1'; 
+import Page2 from './Page2';
+import Page3 from './Page3';   
+import Page4 from './Page4'; 
+import { GoogleOAuthProvider } from '@react-oauth/google'; 
+
+const App = () => {
+  return (
+    <GoogleOAuthProvider clientId="YOUR_GOOGLE_OAUTH_CLIENT_ID"> 
+      <Router>
+        <Routes>
+          <Route path="/" element={<Page1 />} />
+          <Route path="/page2" element={<Page2 />} /> 
+          <Route path="/page3" element={<Page3 />} />
+          <Route path="/page4" element={<Page4 />} />
+        </Routes>
+      </Router>
+    </GoogleOAuthProvider>
+  );
+};
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/Page1.css

@@ -0,0 +1,151 @@
+/* General Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+    background-image: url('../src/components/campus.jpg');
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .wrapper {
+    width: 100%;
+    max-width: 400px;
+    background-color: white;
+    border-radius: 10px;
+    padding: 30px;
+    color: rgb(166, 2, 2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border: 2px solid red; /* Add border to see if it's visible */
+  }
+  
+  
+  h2 {
+    font-size: 24px;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+  
+  /* Input box styling */
+  .input-box {
+    position: relative;
+    width: 100%;
+    margin: 20px 0;
+  }
+  
+  .input-box input {
+    width: 100%;
+    padding: 20px 45px 20px 20px;
+    font-size: 14px;
+    color: #020202;
+    border: 2px solid rgba(119, 3, 3, 0.2);
+    border-radius: 40px;
+    outline: none;
+  }
+  
+  .input-box input::placeholder {
+    color: black;
+  }
+  
+  .input-box .icon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+  }
+  
+  /* Remember me & Forgot password link styles */
+  .remember-forget {
+    display: flex;
+    justify-content: space-between;
+    font-size: 10px;
+    margin: 0 0 30px;
+  }
+  
+  .remember-forget label {
+    font-size: 14px;
+  }
+  
+  .remember-forget a {
+    color: rgb(166, 2, 2);
+    text-decoration: none;
+  }
+  
+  .remember-forget a:hover {
+    text-decoration: underline;
+  }
+  
+  /* Submit button styling */
+  input[type="submit"] {
+    width: 100%;
+    background-color: #e60000;
+    border: none;
+    border-radius: 40px;
+    padding: 12px 0;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  input[type="submit"]:hover {
+    background-color: #cc0000;
+  }
+  
+  /* Forgot password form styling */
+  .forgot-password-form {
+    display: none;
+    text-align: center;
+  }
+  
+  .forgot-password-form input {
+    padding: 12px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    margin-bottom: 15px;
+  }
+  
+  .forgot-password-form button {
+    background-color: #e60000;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  
+  .forgot-password-form button:hover {
+    background-color: #cc0000;
+  }
+  
+  .responsive-image {
+    width: 100%;
+    height: auto;
+  }
+  
+  /* Cancel button styling for reset form */
+  #cancel-reset-password {
+    background-color: #ccc;
+    padding: 8px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    margin-top: 10px;
+  }
+  
+  #cancel-reset-password:hover {
+    background-color: #bbb;
+  }
+  
+  .google-login {
+    margin-top: 20px;
+    text-align: center;
+  }
+  

frontend/src/Page1.js

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { GoogleLogin } from '@react-oauth/google'; // Import GoogleLogin component
+import { getAuth, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from 'firebase/auth'; // Firebase authentication methods
+import './Page1.css';
+
+// Firebase configuration
+import { initializeApp } from 'firebase/app';
+const firebaseConfig = {
+    apiKey: "AIzaSyAFVUCBwz_YH7hq3J8pucRSa5elmzRfyCg",
+    authDomain: "bos-app-4de46.firebaseapp.com",
+    projectId: "bos-app-4de46",
+    storageBucket: "bos-app-4de46.firebasestorage.app",
+    messagingSenderId: "73474147810",
+    appId: "1:73474147810:web:c9881eabf41b26d901e5bb",
+    measurementId: "G-RW4J2ZB06P"
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app); // Firebase Auth instance
+
+const Page1 = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [rememberMe, setRememberMe] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isForgotPasswordVisible, setIsForgotPasswordVisible] = useState(false);
+  const [resetEmail, setResetEmail] = useState('');
+  const navigate = useNavigate();
+
+  // Allowed credentials
+  const allowedCredentials = [
+    { email: "hodcomp@somaiya.edu", password: "hodcomp123!" },
+    { email: "director.kjsse@somaiya.edu", password: "directorkjsse2024" },
+    { email: "dean.engg@somaiya.edu", password: "deanengg2024" },
+    { email: "hodextc@somaiya.edu", password: "hodextc2024" },
+    { email: "hodetrx@somaiya.edu", password: "hodetrx2024" },
+    { email: "hodit.engg@somaiya.edu", password: "hodit2024" },
+    { email: "hodmech@somaiya.edu", password: "hodmech2024" },
+    { email: "aaryaman.s@somaiya.edu", password: "aaryaman2024" },
+    { email: "mansi.zala@somaiya.edu", password: "mansi2024" },
+    { email: "deputydirector.kjsse@somaiya.edu", password: "deputydirector2024" },
+    { email: "deanap@somaiya.edu", password: "deanap2024" },
+  ];
+
+  // Handle normal login (email/password)
+  const handleLogin = (event) => {
+    event.preventDefault();
+
+    // Check if credentials match allowed credentials
+    const validCredential = allowedCredentials.find(
+      (credential) => credential.email === email && credential.password === password
+    );
+
+    if (validCredential) {
+      alert("Login Successful!");
+
+      if (rememberMe) {
+        localStorage.setItem("rememberedEmail", email);
+      } else {
+        localStorage.removeItem("rememberedEmail");
+      }
+
+      setTimeout(() => {
+        navigate('/page2');
+      }, 1000);
+    } else {
+      // Firebase login logic if the credentials are not in allowed credentials
+      signInWithEmailAndPassword(auth, email, password)
+        .then((userCredential) => {
+          const user = userCredential.user;
+          alert("Firebase Login Successful!");
+
+          if (rememberMe) {
+            localStorage.setItem("rememberedEmail", email);
+          } else {
+            localStorage.removeItem("rememberedEmail");
+          }
+
+          setTimeout(() => {
+            navigate('/page2');
+          }, 1000);
+        })
+        .catch((error) => {
+          setErrorMessage("Invalid email or password. Please check your credentials.");
+        });
+    }
+  };
+
+  // Handle password reset
+  const handleResetPassword = (event) => {
+    event.preventDefault();
+    alert(`A password reset link has been sent to ${resetEmail}.`);
+    setIsForgotPasswordVisible(false);
+  };
+
+  // Google login success handler
+  const handleGoogleLoginSuccess = (response) => {
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        console.log("Google login success:", result);
+        alert("Google Login Successful!");
+        navigate('/page2');
+      })
+      .catch((error) => {
+        console.error("Google login error:", error);
+        alert("Google Login Failed. Please try again.");
+      });
+  };
+
+  // Google login failure handler
+  const handleGoogleLoginFailure = (error) => {
+    console.error("Google login error:", error);
+    alert("Google Login Failed. Please try again.");
+  };
+
+  return (
+    <div className="wrapper">
+      <form id="login-form" onSubmit={handleLogin}>
+        <img src="../src/image.png" alt="Responsive" className="responsive-image" />
+        <h2>Board Of Studies</h2>
+
+        <div className="input-box">
+          <input
+            type="email"
+            id="email"
+            className="form-control"
+            placeholder="Enter Somaiya email ID"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <i className="fas fa-user icon"></i>
+        </div>
+
+        <div className="input-box">
+          <input
+            type="password"
+            id="password"
+            className="form-control"
+            placeholder="Enter Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <i className="fas fa-lock icon"></i>
+        </div>
+
+        {errorMessage && <p id="error-message" style={{ color: 'red' }}>{errorMessage}</p>}
+
+        <div className="remember-forget">
+          <label>
+            <input
+              type="checkbox"
+              id="remember-me"
+              checked={rememberMe}
+              onChange={() => setRememberMe(!rememberMe)}
+            /> Remember me
+          </label>
+          <a href="#forgot-password" onClick={(e) => { e.preventDefault(); setIsForgotPasswordVisible(true); }}>
+            <pre>Forgot password?</pre>
+          </a>
+        </div>
+
+        <input className="btn btn-outline-danger" type="submit" value="Login" />
+      </form>
+
+      {/* Forgot Password Form */}
+      {isForgotPasswordVisible && (
+        <div id="forgot-password-form" className="forgot-password-form">
+          <h3>Reset Your Password</h3>
+          <form id="reset-password-form" onSubmit={handleResetPassword}>
+            <input
+              type="email"
+              id="reset-email"
+              placeholder="Enter your registered email"
+              value={resetEmail}
+              onChange={(e) => setResetEmail(e.target.value)}
+              required
+            />
+            <button type="submit">Send Reset Link</button>
+          </form>
+          <button id="cancel-reset-password" onClick={() => setIsForgotPasswordVisible(false)}>Cancel</button>
+        </div>
+      )}
+
+      {/* Google Login Button */}
+      <div className="google-login">
+        <GoogleLogin
+          onSuccess={handleGoogleLoginSuccess}
+          onError={handleGoogleLoginFailure}
+          useOneTap
+          clientId="YOUR_GOOGLE_CLIENT_ID" // Replace with your Firebase client ID
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Page1;

frontend/src/Page2.css

@@ -0,0 +1,169 @@
+/* General Styles */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* Full screen height */
+  overflow: hidden; /* Prevent scrollbars unless necessary */
+  background-color: #fff; /* Solid background */
+}
+
+/* Header Bar */
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; /* Adjust padding on the sides */
+  height: auto; /* Allow header to adjust based on content */
+  min-height: 100px; /* Minimum height for the header */
+  background-color: white;
+  border-bottom: 2px solid #ccc;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.header-bar .leftlogo,
+.header-bar .rightlogo {
+  height: 60px; /* Adjust the logo size */
+  width: auto;
+  object-fit: contain; /* Ensure logos don't stretch */
+}
+
+.header-bar .college-name {
+  font-size: 28px; /* Adjust font size to prevent overflow */
+  font-weight: bold;
+  color: #B7202E;
+  text-align: center;
+  flex-grow: 1;
+  padding: 0 10px;
+  z-index: 10;
+  white-space: nowrap; /* Prevent text from wrapping */
+  overflow: visible; /* Ensure text is not cut off */
+  text-overflow: clip; /* Remove ellipsis */
+  margin: 0 20px; /* Add margin to prevent cutting off */
+}
+
+/* Navigation Bar */
+.navbar {
+  background-color: rgb(228, 227, 227);
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.navbar ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.navbar ul li {
+  margin-right: 20px;
+  margin-left: 30px;
+}
+
+.navbar ul li a {
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+  text-align: center;
+}
+
+.navbar ul li a:hover {
+  text-decoration: underline;
+  color: red;
+}
+
+/* Main Container */
+.main-container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: calc(100vh - 160px); /* Subtract the height of the header and footer */
+}
+
+/* Stream Bar (Right Side) */
+.stream-bar {
+  width: 20%;
+  background-color: #f0f0f0;
+  border-left: 2px solid #ccc;
+  padding: 20px;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+  height: 100%;
+  position: relative;
+}
+
+.stream-bar h3 {
+  margin-top: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.stream-bar ul {
+  list-style: none;
+  padding: 0;
+  margin: 10px 0;
+}
+
+.stream-bar ul li {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+  transition: background-color 0.3s;
+}
+
+.stream-bar ul li:hover {
+  background-color: black;
+  color: white;
+}
+
+/* Content Area (Left Side) */
+.content-area {
+  flex: 1;
+  padding: 20px;
+  background-color: #fff;
+  border-left: 2px solid #ccc;
+  overflow-y: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Footer Styles */
+footer {
+  background-color: white;
+  padding: 10px;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: auto;
+  position: relative;
+}
+
+.terms a {
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.terms a:hover {
+  text-decoration: underline;
+}
+
+.footer-image {
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 0;
+  position: relative;
+}
+
+/* Prevent any margin or padding from appearing above or below the page */
+body, html {
+  margin: 0;
+  padding: 0;
+}

frontend/src/Page2.js

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import './Page2.css'; // CSS File import
+
+// Import images from the src/components folder
+import image from './components/image.png';
+import somaiyatrust from './components/somaiyatrust.png';
+import redlines from './components/redlines.png';
+
+const Page2 = () => {
+  const [selectedStream, setSelectedStream] = useState(null);
+
+  // Handle stream click to display content
+  const handleStreamClick = (stream) => {
+    setSelectedStream(stream);
+  };
+
+  return (
+    <div className="page-container">
+      {/* Header Bar */}
+      <header className="header-bar">
+        <img src={image} alt="Left Logo" className="leftlogo" />
+        <h1 className="college-name">Somaiya Scheduler</h1>
+        <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
+      </header>
+
+      {/* Navigation Bar */}
+      <nav className="navbar">
+        <ul>
+          <li><Link to="/page2">Home</Link></li>
+          <li><Link to="/page3">Schedule</Link></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><Link to="/">Login/Signup</Link></li>
+        </ul>
+      </nav>
+
+      {/* Main Content Container */}
+      <div className="main-container">
+        {/* Stream Bar (Right Side) */}
+        <div className="stream-bar" id="streamBar">
+          <h3>Streams</h3>
+          <ul>
+            <li onClick={() => handleStreamClick("Engineering & Technology")}><Link to="/page4">Engineering & Technology</Link></li>
+            <li onClick={() => handleStreamClick("Management")}>Management Studies</li>
+            <li onClick={() => handleStreamClick("Education")}>Education</li>
+            <li onClick={() => handleStreamClick("Dharama")}>Dharama Studies</li>
+            <li onClick={() => handleStreamClick("Commerce")}>Commerce & Business Studies</li>
+            <li onClick={() => handleStreamClick("Science")}>Science</li>
+            <li onClick={() => handleStreamClick("Humanities")}>Humanities & Social Science</li>
+            <li onClick={() => handleStreamClick("Music")}>Music Performance & Art</li>
+            <li onClick={() => handleStreamClick("Language")}>Language & Literature</li>
+          </ul>
+        </div>
+
+        {/* Content Area (Left Side) */}
+        <div className="content-area" id="contentArea">
+          {selectedStream ? (
+            <p>You selected <strong>{selectedStream}</strong>. Here are the programs and faculty details.</p>
+          ) : (
+            <p>Select a stream to view its programs and faculty.</p>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer>
+        <div className="terms">
+          <a href="#">Terms and Policies</a>
+          <img src={redlines} alt="Footer Logo" className="footer-image" />
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Page2;

frontend/src/Page3.css

@@ -0,0 +1,57 @@
+/* Page3.css */
+.container {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    font-family: Arial, sans-serif;
+  }
+  
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  form {
+    margin-bottom: 20px;
+  }
+  
+  button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+  }
+  
+  button:hover {
+    background-color: #0056b3;
+  }
+  
+  #meetingDetails {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  #meetingDetails p {
+    font-size: 1rem;
+    color: #333;
+  }
+  
+  #meetingDetails a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  #meetingDetails a:hover {
+    text-decoration: underline;
+  }
+  

frontend/src/Page3.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import './Page3.css'
+
+const Page3 = () => {
+  const [meetingDetails, setMeetingDetails] = useState(null);
+
+  // Handle form submission
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+      const response = await fetch('/create-meeting', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const data = await response.json();
+      setMeetingDetails({
+        id: data.id,
+        join_url: data.join_url,
+      });
+    } catch (error) {
+      console.error("Error creating meeting:", error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Generate Zoom Meeting</h1>
+      <form id="meetingForm" onSubmit={handleSubmit}>
+        <button type="submit">Create Meeting</button>
+      </form>
+
+      {meetingDetails && (
+        <div id="meetingDetails">
+          <p>Meeting ID: {meetingDetails.id}</p>
+          <p>
+            Join URL:{" "}
+            <a href={meetingDetails.join_url} target="_blank" rel="noopener noreferrer">
+              {meetingDetails.join_url}
+            </a>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Page3;

frontend/src/Page4.css

@@ -0,0 +1,135 @@
+/* Container for the content area */
+.content-area {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+  }
+  
+  /* Heading Style */
+  .content-area h1 {
+    font-size: 30px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+  
+  /* Label Styling */
+  .content-area label {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-top: 10px;
+    display: block;
+  }
+  
+  /* Input Fields and Select Styling */
+  .content-area input[type="text"],
+  .content-area input[type="email"],
+  .content-area input[type="date"],
+  .content-area input[type="time"],
+  .content-area select,
+  .content-area textarea {
+    width: 100%;
+    padding: 12px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color 0.3s ease;
+  }
+  
+  /* Focus effect for input fields */
+  .content-area input:focus,
+  .content-area select:focus,
+  .content-area textarea:focus {
+    border-color: #4CAF50;
+  }
+  
+  /* Textarea Specific Styling */
+  .content-area textarea {
+    height: 150px;
+    resize: vertical;
+  }
+  
+  /* Agenda and Recipients Section Styling */
+  .content-area .agenda-item,
+  .content-area .recipient-item {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }
+  
+  .content-area .agenda-item input,
+  .content-area .recipient-item input {
+    flex: 1;
+    margin-right: 10px;
+  }
+  
+  .content-area button {
+    width: 100%;
+    padding: 12px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-bottom: 10px;
+  }
+  
+  .content-area button:hover {
+    background-color: #45a049;
+  }
+  
+  /* Remove Button Styling for Agenda & Recipients */
+  .content-area .FaTimes {
+    color: red;
+    cursor: pointer;
+    margin-left: 10px;
+  }
+  
+  /* Attachments Input Styling */
+  .content-area input[type="file"] {
+    padding: 8px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+  }
+  
+  /* Margin for buttons */
+  .content-area button:not(:last-child) {
+    margin-bottom: 10px;
+  }
+  
+  /* Responsiveness */
+  @media (max-width: 768px) {
+    .content-area {
+      padding: 15px;
+    }
+  
+    .content-area h1 {
+      font-size: 24px;
+    }
+  
+    .content-area label,
+    .content-area input,
+    .content-area select,
+    .content-area textarea {
+      font-size: 14px;
+    }
+  
+    .content-area button {
+      font-size: 14px;
+      padding: 10px;
+    }
+  }
+  

frontend/src/Page4.js

@@ -0,0 +1,224 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import axios from "axios";
+import './Page2.css';
+import './Page4.css'; // Import the same CSS file for consistent styling
+import { FaTimes } from "react-icons/fa"; // Red cross icon for agenda/removal
+import image from './components/image.png';
+import somaiyatrust from './components/somaiyatrust.png';
+import redlines from './components/redlines.png';
+
+const programs = ["BTech", "MTech", "PhD"];
+const departments = [
+  "Artificial Intelligence & Data Science",
+  "Computer Engineering",
+  "Computer & Communication Engineering",
+  "Computer Science & Business Systems",
+  "Electronics Engineering (VLSI Design & Technology)",
+  "Electronics & Computer Engineering",
+  "Electronics & Telecommunication Engineering",
+  "Information Technology",
+  "Mechanical Engineering",
+  "Robotics & Artificial Intelligence",
+];
+
+const Page4 = () => {
+  const [program, setProgram] = useState("");
+  const [department, setDepartment] = useState("");
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [agenda, setAgenda] = useState([""]);
+  const [date, setDate] = useState("");
+  const [startTime, setStartTime] = useState("");
+  const [endTime, setEndTime] = useState("");
+  const [recipients, setRecipients] = useState([""]);
+  const [attachments, setAttachments] = useState([]);
+
+  const addAgenda = () => setAgenda([...agenda, ""]);
+  const handleAgendaChange = (index, value) => {
+    const updatedAgenda = [...agenda];
+    updatedAgenda[index] = value;
+    setAgenda(updatedAgenda);
+  };
+  const removeAgenda = (index) => {
+    const updatedAgenda = agenda.filter((_, i) => i !== index);
+    setAgenda(updatedAgenda);
+  };
+
+  const addRecipient = () => setRecipients([...recipients, ""]);
+  const handleRecipientChange = (index, value) => {
+    const updatedRecipients = [...recipients];
+    updatedRecipients[index] = value;
+    setRecipients(updatedRecipients);
+  };
+  const removeRecipient = (index) => {
+    const updatedRecipients = recipients.filter((_, i) => i !== index);
+    setRecipients(updatedRecipients);
+  };
+
+  const handleFileChange = (event) => {
+    setAttachments(event.target.files);
+  };
+
+  const sendEmail = async () => {
+    if (!department || !subject || !body || !date || !startTime || !endTime || recipients.length === 0) {
+      alert("All fields are required!");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("program", program);
+    formData.append("department", department);
+    formData.append("subject", subject);
+    formData.append("body", body);
+    formData.append("date", date);
+    formData.append("startTime", startTime);
+    formData.append("endTime", endTime);
+    recipients.forEach((email) => formData.append("recipients", email));
+    agenda.forEach((item) => formData.append("agenda", item));
+    Array.from(attachments).forEach((file) => formData.append("attachments", file));
+
+    try {
+      const response = await axios.post("http://localhost:5000/api/send-email", formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      alert(response.data.message);
+    } catch (err) {
+      if (err.response?.status === 409) {
+        const conflictDetails = err.response.data.conflictDetails;
+        alert(`Conflict Detected:
+          Department: ${conflictDetails.department}
+          Date: ${conflictDetails.date}
+          Time: ${conflictDetails.startTime} - ${conflictDetails.endTime}
+          Recipients: ${conflictDetails.recipients.join(", ")}
+          Subject: ${conflictDetails.subject}
+        `);
+      } else {
+        alert(err.response?.data?.error || "Error sending email");
+      }
+    }
+  };
+
+  return (
+    <div className="page-container">
+      {/* Header Bar */}
+      <header className="header-bar">
+        <img src={image} alt="Left Logo" className="leftlogo" />
+        <h1 className="college-name">Somaiya Scheduler</h1>
+        <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
+      </header>
+
+      {/* Navigation Bar */}
+      <nav className="navbar">
+        <ul>
+          <li><Link to="/page2">Home</Link></li>
+          <li><Link to="/page3">Schedule</Link></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><Link to="/">Login/Signup</Link></li>
+        </ul>
+      </nav>
+
+      {/* Main Content Container */}
+      <div className="main-container">
+        {/* Stream Bar (Left Side) */}
+        <div className="stream-bar">
+          <h3>Streams</h3>
+          <ul>
+            {["Engineering & Technology", "Management", "Education", "Dharama", "Commerce", "Science", "Humanities", "Music", "Language"].map((stream) => (
+              <li key={stream} onClick={() => alert(`Selected: ${stream}`)}>{stream}</li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Content Area (Right Side) */}
+        <div className="content-area">
+          <h1>BOS Email Management System</h1>
+          <label>Program:</label>
+          <select onChange={(e) => setProgram(e.target.value)} value={program}>
+            <option value="">Choose a Program</option>
+            {programs.map((prog, idx) => (
+              <option key={idx} value={prog}>
+                {prog}
+              </option>
+            ))}
+          </select>
+
+          <label>Department:</label>
+          <select onChange={(e) => setDepartment(e.target.value)} value={department}>
+            <option value="">Choose a Department</option>
+            {departments.map((dept, idx) => (
+              <option key={idx} value={dept}>
+                {dept}
+              </option>
+            ))}
+          </select>
+
+          <label>Subject:</label>
+          <input type="text" placeholder="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
+
+          <label>Body:</label>
+          <textarea placeholder="Body" value={body} onChange={(e) => setBody(e.target.value)} />
+
+          <label>Agenda:</label>
+          {agenda.map((item, index) => (
+            <div key={index} style={{ display: "flex", alignItems: "center" }}>
+              <input
+                type="text"
+                placeholder="Agenda item"
+                value={item}
+                onChange={(e) => handleAgendaChange(index, e.target.value)}
+              />
+              <FaTimes
+                style={{ color: "red", cursor: "pointer", marginLeft: "10px" }}
+                onClick={() => removeAgenda(index)}
+              />
+            </div>
+          ))}
+          <button onClick={addAgenda}>+ Add Agenda</button>
+
+          <label>Date:</label>
+          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+
+          <label>Start Time:</label>
+          <input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} />
+
+          <label>End Time:</label>
+          <input type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)} />
+
+          <label>Recipient Emails:</label>
+          {recipients.map((email, index) => (
+            <div key={index} style={{ display: "flex", alignItems: "center" }}>
+              <input
+                type="email"
+                placeholder="Recipient Email"
+                value={email}
+                onChange={(e) => handleRecipientChange(index, e.target.value)}
+              />
+              <FaTimes
+                style={{ color: "red", cursor: "pointer", marginLeft: "10px" }}
+                onClick={() => removeRecipient(index)}
+              />
+            </div>
+          ))}
+          <button onClick={addRecipient}>+ Add Recipient</button>
+
+          <label>Attachments:</label>
+          <input type="file" multiple onChange={handleFileChange} />
+
+          <button onClick={sendEmail}>Send Email</button>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer>
+        <div className="terms">
+          <a href="#">Terms and Policies</a>
+          <img src={redlines} alt="Footer Logo" className="footer-image" />
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Page4;

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';