Faculty and Course Forms

client/package-lock.json

@@ -18,8 +18,8 @@
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
-        "react-icons": "^5.0.1",
+        "react-icons": "^5.4.0",
-        "react-router-dom": "^6.22.3",
+        "react-router-dom": "^6.28.0",
         "react-scripts": "5.0.1",
         "react-toastify": "^10.0.5",
         "web-vitals": "^2.1.4"
@@ -3446,9 +3446,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
+      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -15474,9 +15474,9 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
     "node_modules/react-icons": {
-      "version": "5.0.1",
+      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
-      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
       "peerDependencies": {
         "react": "*"
       }
@@ -15500,11 +15500,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
+      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.21.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15514,12 +15514,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
+      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
+        "@remix-run/router": "1.21.0",
-        "react-router": "6.22.3"
+        "react-router": "6.28.0"
       },
       "engines": {
         "node": ">=14.0.0"

client/package.json

@@ -13,8 +13,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.4.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.5",
     "web-vitals": "^2.1.4"

client/src/App.js

@@ -1,27 +1,33 @@
-import {BrowserRouter as Router , Route , Routes } from "react-router-dom";
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import CourseForm from "./Pages/CourseForm";
+import FacultyForm from "./Pages/FacultyForm";
 import './App.css';
 import Welcome from "./Pages/Welcome"
-import AuthPage from "./Pages/Login"; 
+import AuthPage from "./Pages/Login";
 import HomePage from "./Pages/HomePage";
-import ForgetPwPage from "./Pages/ForgetPw"; 
+import ForgetPwPage from "./Pages/ForgetPw";
 import ResetPwPage from "./Pages/ResetPw";
 import FilterPage from "./Pages/FilterPage";
 import WelcomeWithFilter from "./Pages/WelcomeWithFilter";
- import "react-toastify/dist/ReactToastify.css";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
-      <Router>
+    <Router>
-        <Routes>
+      {/* <Navbar /> */}
-          <Route path="/" element={<Welcome />}></Route>
+      <Routes>
-          <Route path="/Welcom" element={<WelcomeWithFilter />} />
+        <Route path="/" element={<AuthPage />}></Route>
-          <Route path="/AuthpPage" element={<AuthPage />}></Route>
+        <Route path="/course-form/:id" element={<CourseForm />} />
-          <Route path="/Home" element={<HomePage />}></Route>
+        <Route path="/faculty-form/:id" element={<FacultyForm />} />
-          <Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
+        <Route path="/Welcom" element={<WelcomeWithFilter />} />
-          <Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
+        <Route path="/AuthPage" element={<AuthPage />}></Route>
-          <Route path="/Filter" element={<FilterPage />} />
+        <Route path="/Home" element={<HomePage />}></Route>
-        </Routes>
+        <Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
-      </Router>
+        <Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
+        <Route path="/Filter" element={<FilterPage />} />
+      </Routes>
+    </Router>
   );
 }
 

client/src/Pages/CourseForm.css

@@ -0,0 +1,64 @@
+/* General form container styling */
+.form-container {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: 20px;
+    background-color: #f4f4f9;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  h2 {
+    text-align: center;
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  label {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 5px;
+  }
+  
+  input {
+    padding: 12px;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  input:focus {
+    outline: none;
+    border-color: #4caf50;
+    box-shadow: 0 0 5px rgba(0, 192, 0, 0.2);
+  }
+  
+  button {
+    padding: 12px;
+    font-size: 16px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  button:hover {
+    background-color: #45a049;
+  }
+  
+  button:focus {
+    outline: none;
+  }
+  

client/src/Pages/CourseForm.jsx

@@ -0,0 +1,31 @@
+// CourseForm.js
+import React from "react";
+import { useParams } from "react-router-dom";
+import "./CourseForm.css";
+
+const CourseForm = () => {
+  const { id } = useParams(); // Get the course ID from the URL params
+
+  return (
+    <div className="form-container">
+      <h2>Course Info</h2>
+      <form>
+        <label>
+          Course ID:
+          <input type="text" value={id} readOnly />
+        </label>
+        <label>
+          Course Name:
+          <input type="text" placeholder="Enter course name" />
+        </label>
+        <label>
+          Status:
+          <input type="text" placeholder="Enter course status" />
+        </label>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default CourseForm;

client/src/Pages/FacultyForm.css

@@ -0,0 +1,64 @@
+/* General form container styling */
+.form-container {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: 20px;
+    background-color: #f4f4f9;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  h2 {
+    text-align: center;
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  label {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 5px;
+  }
+  
+  input {
+    padding: 12px;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  input:focus {
+    outline: none;
+    border-color: #4caf50;
+    box-shadow: 0 0 5px rgba(0, 192, 0, 0.2);
+  }
+  
+  button {
+    padding: 12px;
+    font-size: 16px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  button:hover {
+    background-color: #45a049;
+  }
+  
+  button:focus {
+    outline: none;
+  }
+  

client/src/Pages/FacultyForm.jsx

@@ -0,0 +1,31 @@
+// FacultyForm.js
+import React from "react";
+import { useParams } from "react-router-dom";
+import "./FacultyForm.css";
+
+const FacultyForm = () => {
+  const { id } = useParams(); // Get the faculty ID from the URL params
+
+  return (
+    <div className="form-container">
+      <h2>Faculty Info</h2>
+      <form>
+        <label>
+          Faculty ID:
+          <input type="text" value={id} readOnly />
+        </label>
+        <label>
+          Faculty Name:
+          <input type="text" placeholder="Enter faculty name" />
+        </label>
+        <label>
+          Department:
+          <input type="text" placeholder="Enter department" />
+        </label>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default FacultyForm;

client/src/Pages/FilterPage.jsx

@@ -22,7 +22,7 @@ const FilterPage = ({ onApplyFilter }) => {
       alert("Please select either 'Course' or 'Faculty' before applying the filter.");
       return;
     }
-    onApplyFilter(); // Trigger the table display
+    onApplyFilter(selectedOption); // Pass the selected option to the parent
   };
 
   const handleSelectOption = (option) => {

client/src/Pages/Login.jsx

@@ -70,7 +70,7 @@ function AuthPage() {
       user.profilePicture = gravatarUrl;
 
       localStorage.setItem("user", JSON.stringify(user));
-      window.location.href = "/Home";
+      window.location.href = "/Welcom";
     } catch (error) {
       console.error("Authentication error:", error);
       if (

client/src/Pages/Navbar.css

@@ -0,0 +1,26 @@
+/* Navbar Container */
+.navbar {
+  background-color: #800000; /* Maroon background */
+  height: 60px; /* Navbar height */
+  width: 100%; /* Full width */
+  display: flex; /* Flexbox for alignment */
+  justify-content: flex-end; /* Align items to the right */
+  align-items: center; /* Center vertically */
+  padding: 0 20px; /* Horizontal padding for spacing */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+  position: fixed; /* Fix the navbar to the top */
+  top: 0;
+  z-index: 1000; /* Place above other elements */
+}
+
+/* User Icon */
+.user-icon {
+  font-size: 30px; /* Icon size */
+  color: #fff; /* White color for the icon */
+  cursor: pointer; /* Pointer cursor on hover */
+  transition: color 0.3s ease-in-out; /* Smooth hover effect */
+}
+
+.user-icon:hover {
+  color: #ffcccc; /* Light pink on hover */
+}

client/src/Pages/Navbar.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { FaUserCircle } from "react-icons/fa";
+import "./Navbar.css"; // Navbar-specific styles
+
+const Navbar = () => {
+  return (
+    <header className="navbar">
+      <div className="navbar-container">
+        <FaUserCircle className="user-icon" />
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;

client/src/Pages/Welcom.jsx

@@ -13,7 +13,7 @@ const Welcom = () => {
     <div className="welcom-container">
       <div className="welcom-message">
         <h1>Welcome, John Doe</h1>
-        <p>You’re signed in as DEC/EIC</p>
+        <p>You're signed in as DEC/EIC</p>
       </div>
       <button className="next-button" onClick={goToFilterPage}>
         Proceed

client/src/Pages/WelcomeWithFilter.jsx

@@ -1,16 +1,30 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
 import FilterPage from "./FilterPage";
+import Navbar from "./Navbar"; 
 import "./WelcomeWithFilter.css";
 
 const WelcomeWithFilter = () => {
-  const [showTable, setShowTable] = useState(false); // State to toggle between table and welcome content
+  const [selectedOption, setSelectedOption] = useState(null); // State for selected filter option
+  const navigate = useNavigate(); // Hook for navigation
 
-  const handleApplyFilter = () => {
+  const handleApplyFilter = (option) => {
-    setShowTable(true); // Show table and replace the welcome content
+    setSelectedOption(option); // Update the selected option
+  };
+
+  const handleRowClick = (type, id) => {
+    if (type === "Faculty") {
+      navigate(`/faculty-form/${id}`); // Navigate to Faculty form page
+    } else if (type === "Course") {
+      navigate(`/course-form/${id}`); // Navigate to Course form page
+    }
   };
 
   return (
     <div className="welcome-with-filter-container">
+      {/* Navbar */}
+      <Navbar />
+
       {/* Filter Section */}
       <div className="filter-section">
         <FilterPage onApplyFilter={handleApplyFilter} />
@@ -18,20 +32,48 @@ const WelcomeWithFilter = () => {
 
       {/* Lower Section */}
       <div className="welcome-section">
-        {showTable ? (
+        {selectedOption === "Faculty" ? (
-          // Show the table when 'Apply Filter' is clicked
+          // Show the faculty table
+          <div className="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th>Faculty ID</th>
+                  <th>Faculty Name</th>
+                  <th>Department</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <tr
+                    key={index}
+                    onClick={() => handleRowClick("Faculty", index + 1)} // Pass type and id on row click
+                  >
+                    <td>FAC-{index + 1}</td>
+                    <td>Faculty {index + 1}</td>
+                    <td>Department {index + 1}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : selectedOption === "Course" ? (
+          // Show the course table
           <div className="table-container">
             <table>
               <thead>
                 <tr>
                   <th>Course ID</th>
                   <th>Course Name</th>
-                  <th>Availability</th>
+                  <th>Status</th>
                 </tr>
               </thead>
               <tbody>
                 {Array.from({ length: 10 }).map((_, index) => (
-                  <tr key={index}>
+                  <tr
+                    key={index}
+                    onClick={() => handleRowClick("Course", index + 1)} // Pass type and id on row click
+                  >
                     <td>Course-{index + 1}</td>
                     <td>Sample Course</td>
                     <td>Available</td>
@@ -41,7 +83,7 @@ const WelcomeWithFilter = () => {
             </table>
           </div>
         ) : (
-          // Show the welcome content by default
+          // Default welcome content
           <div className="welcome-content">
             <div className="welcome-message">
               <h1>Welcome, John Doe</h1>

server/server.js

@@ -86,7 +86,7 @@ app.get(
   "/auth/google/callback",
   passport.authenticate("google", { failureRedirect: "/" }),
   function (req, res) {
-    res.redirect("http://localhost:3000/Home"); 
+    res.redirect("http://localhost:3000/Welcom"); 
   }
 );