frontend changes

2025-01-27 03:06:39 +05:30
parent 785025944f
commit 0e0f686c70
19 changed files with 523 additions and 542 deletions
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -24,9 +24,6 @@
 body {
  background-color:#ffffff;
  /* background: linear-gradient(to right, #dab8fc, #afc2ff); */
-  display: flex;
-  align-items: center;
-  justify-content: center;
  height: 100vh;
 }
 body h1{
@@ -486,3 +483,10 @@ height:auto !important;
 }
    }

+
+.LoginPage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -15,11 +15,8 @@ import CourseTable from "./Pages/CourseTable";
 import GenerateCSV from "./Pages/GenerateCSV";
 import ConsolidatedTable from "./Pages/ConsolidatedTable";

-
 function App() {
  return (
-    <Router>
-      {/* <Navbar /> */}
      <Routes>
        <Route path="/" element={<AuthPage />}></Route>
        <Route path="/generate-csv" element={<GenerateCSV />} />
@@ -34,7 +31,6 @@ function App() {
        <Route path="/courses" element={<CourseTable />} />
        <Route path="/consolidated" element={<ConsolidatedTable />} />
      </Routes>
-    </Router>
  );
 }

--- a/client/src/Pages/ConsolidatedTable.jsx
+++ b/client/src/Pages/ConsolidatedTable.jsx
@@ -1,8 +1,84 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import * as XLSX from "xlsx-js-style";
-import { sendEmail } from "../api";
-import { createExcelBook } from "../api";
+import { sendEmail, createExcelBook } from "../api";
+import Navbar from "./Navbar";
+
+const styles = {
+  header: {
+    background: '#003366', 
+    color: 'white',
+    padding: '20px 0',
+    textAlign: 'center',
+    fontSize: '24px',
+    marginBottom: '0', 
+  },
+  buttonRow: {
+    display: 'flex',
+    justifyContent: 'space-around', 
+    alignItems: 'center',
+    padding: '10px 0',
+    margin: '0', 
+    backgroundColor: '#003366', 
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' 
+  },
+  button: {
+    padding: '10px 20px',
+    borderRadius: '5px',
+    color: 'white',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '16px',
+    flex: '1', 
+  },
+  bulkDownloadButton: {
+    backgroundColor: '#3fb5a3',
+  },
+  downloadButton: {
+    backgroundColor: '#28a745',
+  },
+  emailButton: {
+    backgroundColor: '#ff6f61',
+  },
+  tableContainer: {
+    maxHeight: "70vh",
+    overflowY: "auto",
+    border: "1px solid #ccc",
+    padding: "10px",
+    borderRadius: "5px",
+    backgroundColor: "#f9f9f9",
+    marginBottom: "20px",
+  },
+  table: {
+    width: "100%",
+    marginTop: "20px",
+    borderCollapse: "collapse",
+  },
+  th: {
+    backgroundColor: "#333",
+    color: "white",
+    padding: "10px 15px",
+  },
+  td: {
+    padding: "10px",
+    textAlign: "left",
+    borderBottom: "1px solid #ddd",
+  },
+  paginationContainer: {
+    textAlign: "center",
+    marginTop: "20px",
+  },
+  paginationButton: {
+    padding: "10px 15px",
+    backgroundColor: "#007bff",
+    color: "white",
+    borderRadius: "5px",
+    border: "none",
+  },
+  main: {
+    width: "100%",
+  }
+};

 const ConsolidatedTable = () => {
  const [data, setData] = useState([]);
@@ -63,7 +139,7 @@ const ConsolidatedTable = () => {
  };

  const handleSendEmail = async (teacher, teacherData) => {
-    const facultyId = teacherData[0].facultyId; // This assumes all rows for a teacher have the same facultyId
+    const facultyId = teacherData[0].facultyId; 
    try {
      const response = await axios.get(
        `http://localhost:8080/api/faculty/${facultyId}`
@@ -87,15 +163,15 @@ const ConsolidatedTable = () => {
      formData.append("file", file);

      try {
-        const response = await sendEmail(formData);
+        const emailResponse = await sendEmail(formData);
        alert(`Email sent successfully to ${facultyEmail}`);
-        console.log("Response from server:", response);
-      } catch (error) {
-        console.error("Error sending email:", error);
+        console.log("Response from server:", emailResponse);
+      } catch (emailError) {
+        console.error("Error sending email:", emailError);
        alert("Failed to send email.");
      }
-    } catch (error) {
-      console.error("Error fetching Faculty data:", error);
+    } catch (facultyError) {
+      console.error("Error fetching Faculty data:", facultyError);
      alert("Failed to fetch faculty data.");
    }
  };
@@ -110,66 +186,35 @@ const ConsolidatedTable = () => {
  };

  return (
-    <div>
-      <h1 style={{ textAlign: "center" }}>
+    <>
+    <Navbar/>
+    <div style={styles.main}>
+      <h1 style={styles.header}>
        Faculty Tables with Download Options
      </h1>
  
-      <div style={{ marginBottom: "20px", textAlign: "center" }}>
+      <div style={styles.buttonRow}>
        <button
          onClick={bulkDownload}
-          className="btn btn-primary"
-          style={{
-            padding: "10px 15px",
-            backgroundColor: "#17a2b8",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "5px",
-            marginRight: "10px",
-          }}
+          style={{ ...styles.button, ...styles.bulkDownloadButton }}
        >
          Bulk Download All Tables
        </button>
        <button
          onClick={() => createExcelFile(data, "Consolidated Table")}
-          className="btn btn-primary"
-          style={{
-            padding: "10px 15px",
-            backgroundColor: "#28a745",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "5px",
-          }}
+          style={{ ...styles.button, ...styles.downloadButton }}
        >
          Download Consolidated Table
        </button>
-
        <button
          onClick={sendEmailsToAllTeachers}
-          className="btn btn-danger"
-          style={{
-            padding: "10px 15px",
-            backgroundColor: "#dc3545",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "5px",
-            marginLeft: "10px",
-          }}
+          style={{ ...styles.button, ...styles.emailButton }}
        >
          Send Emails to All Teachers
        </button>
      </div>

-      <div
-        style={{
-          maxHeight: "70vh",
-          overflowY: "auto",
-          border: "1px solid #ccc",
-          padding: "10px",
-          borderRadius: "5px",
-          backgroundColor: "#f9f9f9",
-        }}
-      >
+      <div style={styles.tableContainer}>
        {currentTeachers.map((teacher, index) => {
          const teacherData = data.filter((row) => row.Name === teacher);
          return (
@@ -180,93 +225,71 @@ const ConsolidatedTable = () => {
                  justifyContent: "space-between",
                  alignItems: "center",
                  cursor: "pointer",
-                  backgroundColor: "#ffffff",
-                  color: "white",
                  padding: "10px",
                  borderRadius: "5px",
+                  backgroundColor: "#ffffff",
+                  boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
                }}
                onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
              >
-                <h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2>
+                <h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{teacher}'s Table</h2>
                <div>
                  <button
                    onClick={() => createExcelFile(teacherData, teacher)}
-                    className="btn btn-primary"
-                    style={{
-                      padding: "10px 15px",
-                      backgroundColor: "#007bff",
-                      color: "black",
-                      textDecoration: "none",
-                      borderRadius: "5px",
-                      marginRight: "10px",
-                    }}
+                    style={{ ...styles.button, backgroundColor: "#007bff" }}
                  >
                    Download {teacher}'s Table
                  </button>
                  <button
                    onClick={() => handleSendEmail(teacher, teacherData)}
-                    className="btn btn-secondary"
-                    style={{
-                      padding: "10px 15px",
-                      backgroundColor: "#6c757d",
-                      color: "white",
-                      textDecoration: "none",
-                      borderRadius: "5px",
-                    }}
+                    style={{ ...styles.button, backgroundColor: "#6c757d" }}
                  >
-                    Send {teacher}'s CSV via Email
+                    Send {teacher}'s XSL via Email
                  </button>
                </div>
              </div>

              {expandedTeacher === teacher && (
-                <table
-                  border="1"
-                  style={{
-                    width: "100%",
-                    textAlign: "left",
-                    marginTop: "20px",
-                  }}
-                >
+                <table style={styles.table}>
                  <thead>
                    <tr>
-                      <th>Semester</th>
-                      <th>Course Code</th>
-                      <th>Course Name</th>
-                      <th>Exam Type</th>
-                      <th>Year</th>
-                      <th>Marks</th>
-                      <th>Name</th>
-                      <th>Affiliation/College</th>
-                      <th>Highest Qualification</th>
-                      <th>Career Experience</th>
-                      <th>Oral/Practical</th>
-                      <th>Assessment</th>
-                      <th>Reassessment</th>
-                      <th>Paper Setting</th>
-                      <th>Moderation</th>
-                      <th>PwD Paper Setting</th>
+                      <th style={styles.th}>Semester</th>
+                      <th style={styles.th}>Course Code</th>
+                      <th style={styles.th}>Course Name</th>
+                      <th style={styles.th}>Exam Type</th>
+                      <th style={styles.th}>Year</th>
+                      <th style={styles.th}>Marks</th>
+                      <th style={styles.th}>Name</th>
+                      <th style={styles.th}>Affiliation/College</th>
+                      <th style={styles.th}>Highest Qualification</th>
+                      <th style={styles.th}>Career Experience</th>
+                      <th style={styles.th}>Oral/Practical</th>
+                      <th style={styles.th}>Assessment</th>
+                      <th style={styles.th}>Reassessment</th>
+                      <th style={styles.th}>Paper Setting</th>
+                      <th style={styles.th}>Moderation</th>
+                      <th style={styles.th}>PwD Paper Setting</th>
                    </tr>
                  </thead>
                  <tbody>
                    {teacherData.map((row, idx) => (
                      <tr key={idx}>
-                        <td>{row.semester}</td>
-                        <td>{row.courseCode}</td>
-                        <td>{row.courseName}</td>
-                        <td>{row.examType}</td>
-                        <td>{row.year}</td>
-                        <td>{row.marks}</td>
-                        <td>{row.Name}</td>
-                        <td>{row.affiliation}</td>
-                        <td>{row.qualification}</td>
-                        <td>{row.experience}</td>
-                        <td>{row.oralPractical}</td>
-                        <td>{row.assessment}</td>
-                        <td>{row.reassessment}</td>
-                        <td>{row.paperSetting}</td>
-                        <td>{row.moderation}</td>
-                        <td>{row.pwdPaperSetting}</td>
+                        <td style={styles.td}>{row.semester}</td>
+                        <td style={styles.td}>{row.courseCode}</td>
+                        <td style={styles.td}>{row.courseName}</td>
+                        <td style={styles.td}>{row.examType}</td>
+                        <td style={styles.td}>{row.year}</td>
+                        <td style={styles.td}>{row.marks}</td>
+                        <td style={styles.td}>{row.Name}</td>
+                        <td style={styles.td}>{row.affiliation}</td>
+                        <td style={styles.td}>{row.qualification}</td>
+                        <td style={styles.td}>{row.experience}</td>
+                        <td style={styles.td}>{row.oralPractical}</td>
+                        <td style={styles.td}>{row.assessment}</td>
+                        <td style={styles.td}>{row.reassessment}</td>
+                        <td style={styles.td}>{row.paperSetting}</td>
+                        <td style={styles.td}>{row.moderation}</td>
+                        <td style={styles.td}>{row.pwdPaperSetting}</td>
                      </tr>
                    ))}
                  </tbody>
@@ -278,18 +301,11 @@ const ConsolidatedTable = () => {
      </div>

      {/* Pagination controls */}
-      <div style={{ textAlign: "center", marginTop: "20px" }}>
+      <div style={styles.paginationContainer}>
        <button
          onClick={handlePrevPage}
          disabled={currentPage === 1}
-          style={{
-            padding: "10px 15px",
-            marginRight: "10px",
-            backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
-            color: "white",
-            borderRadius: "5px",
-            border: "none",
-          }}
+          style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
        >
          Previous
        </button>
@@ -299,19 +315,13 @@ const ConsolidatedTable = () => {
        <button
          onClick={handleNextPage}
          disabled={currentPage === totalPages}
-          style={{
-            padding: "10px 15px",
-            marginLeft: "10px",
-            backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
-            color: "white",
-            borderRadius: "5px",
-            border: "none",
-          }}
+          style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
        >
          Next
        </button>
      </div>
    </div>
+    </>
  );
 };

--- a/client/src/Pages/CourseForm.css
+++ b/client/src/Pages/CourseForm.css
@@ -1,130 +1,99 @@
-/* CourseForm.css */
-.form-container {
-  max-width: 600px;
-  margin: 50px auto;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  background-color: #f9f9f9;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+/* General container styles */
+.courseFormContainer {
+  display: flex ;
+  justify-content: center ;
+  align-items: center ;
+  padding: 20px ;
 }

-h2 {
-  text-align: center;
-  color: #333;
-  margin-bottom: 20px;
-  font-size: 1.8rem;
+.courseFormFormContainer {
+  background: #f4f4f4 ;
+  padding: 20px ;
+  border-radius: 8px ;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1) ;
+  width: 100% ;
+  max-width: 960px ;
 }

-form {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+.courseFormHeader {
+  text-align: center ;
+  color: #333 ;
+  grid-column: 1 / -1 ; /* Spans the entire width */
 }

-label {
-  font-size: 1rem;
-  font-weight: bold;
-  color: #555;
-  display: flex;
-  flex-direction: column;
+.courseForm {
+  display: grid ;
+  grid-template-columns: repeat(3, 1fr) ; /* Creates three columns */
+  grid-gap: 20px ;
+  align-items: start ;
 }

-input[type="text"] {
-  padding: 10px;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #fff;
-  transition: border-color 0.3s ease;
+.courseFormLabel {
+  display: block ;
+  color: #666 ;
+  font-weight: bold ;
 }

-input[type="text"]:focus {
-  border-color: #007bff;
-  outline: none;
+.courseFormInput, .courseFormSelect, .courseFormButton {
+  width: 100% ;
+  padding: 8px ;
+  margin-top: 5px ;
+  border: 1px solid #ddd ;
+  border-radius: 4px ;
+  box-sizing: border-box ; /* Makes sure the padding doesn't affect the final width */
 }

-button {
-  padding: 10px 15px;
-  font-size: 1rem;
-  font-weight: bold;
-  color: #fff;
-  background-color: #007bff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+.courseFormReadOnly {
+  background: #eee ;
+  color: #666 ;
 }

-button:hover {
-  background-color: #0056b3;
+.courseFormButton {
+  padding: 10px 20px ;
+  background-color: #a71515 ;
+  color: white ;
+  border: none ;
+  border-radius: 4px ;
+  cursor: pointer ;
 }

-button:active {
-  background-color: #003d7a;
+.courseFormButton:hover {
+  background-color: #e14a4a ;
 }

-button[type="submit"] {
-  align-self: center;
-  width: 50%;
+.courseFormErrorMessage {
+  color: red ;
+  font-size: 12px ;
+  grid-column: 1 / -1 ; /* Spans the entire width */
 }

-.suggestions {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  border: 1px solid #ccc;
-  max-height: 150px;
-  overflow-y: auto;
-  background: #fff;
-  position: absolute;
-  width: 100%;
-  z-index: 10;
+.courseFormErrorInput, .courseFormErrorSelect {
+  border-color: red ;
 }

-.suggestions li {
-  padding: 8px;
-  cursor: pointer;
+/* Adjusting list styles for better grid integration */
+.courseFormSuggestions, .courseFormTempList {
+  list-style: none ;
+  padding: 0 ;
+  width: 100% ;
+  position: absolute ;
+  z-index: 1000 ;
 }

-.suggestions li:hover {
-  background-color: #f0f0f0;
+.courseFormSuggestionsItem, .courseFormTempListItem {
+  padding: 8px ;
+  background-color: #fff ;
+  border: 1px solid #ddd ;
+  cursor: pointer ;
 }

-.error-message {
-  color: red;
-  font-size: 12px;
+.courseFormSuggestionsItem:hover, .courseFormTempListItem:hover {
+  background-color: #f0f0f0 ;
 }

-.error input {
-  border-color: red;
-}
-
-
-@media (max-width: 768px) {
-  .form-container {
-    margin: 20px;
-    padding: 15px;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-  }
-
-  button[type="submit"] {
-    width: 100%;
-  }
-}
-.remove-faculty-btn {
-  padding: 0px 0px;
-  background: none;
-  border: none;
-  color: red;
-  cursor: pointer;
-  font-size: 16px;
-  margin-left: 10px;
-}
-
-.remove-faculty-btn:hover {
-  color: darkred;
+.courseFormRemoveFacultyBtn {
+  background: none ;
+  border: none ;
+  color: red ;
+  cursor: pointer ;
 }
--- a/client/src/Pages/CourseForm.jsx
+++ b/client/src/Pages/CourseForm.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useLocation, useParams, useNavigate } from "react-router-dom";
 import { fetchFaculties, saveAppointment, updateCourseStatus } from "../api";
 import "./CourseForm.css";
+import "./Navbar.jsx";
+import Navbar from "./Navbar.jsx";

 const CourseForm = () => {
  const { id } = useParams();
@@ -146,156 +148,130 @@ const CourseForm = () => {
  };

  return (
-    <div className="form-container">
-      <h2>Course Info</h2>
-      <form onSubmit={handleSubmit}>
-        <label>
-          Course ID:
-          <input type="text" value={course?.courseId || id} readOnly />
-        </label>
-        <label>
-          Course Name:
-          <input type="text" value={course?.name || ""} readOnly />
-        </label>
-        {[
-          { name: "oralsPracticals", label: "Orals/Practicals" },
-          { name: "assessment", label: "Assessment" },
-          { name: "reassessment", label: "Reassessment" },
-          { name: "paperSetting", label: "Paper Setting" },
-          { name: "moderation", label: "Moderation" },
-          { name: "pwdPaperSetter", label: "PwD Paper Setter" },
-        ].map(({ name, label }) => (
-          <div key={name} className={errors[name] ? "error" : ""}>
-            <label>
-              {label}:
-              <input
-                type="text"
-                name={name}
-                value={formData[name]}
-                onChange={handleInputChange}
-                placeholder={`Search faculty for ${label}`}
-              />
-              <button
-                type="button"
-                onClick={() => handleAddFaculty(name)}
-                disabled={!formData[name].trim()}
-              >
-                Add
-              </button>
-              <ul
-                className="suggestions"
-                id={`suggestions-${name}`}
-                style={{
-                  display:
-                    (suggestions[name] || []).length > 0 ? "block" : "none",
-                }}
-              >
-                {(suggestions[name] || []).map((faculty) => (
-                  <li
-                    key={faculty.facultyId}
-                    onClick={() => {
-                      setFormData({ ...formData, [name]: faculty.name });
-                      setSuggestions((prev) => ({ ...prev, [name]: [] }));
-                    }}
-                  >
-                    {faculty.name}
-                  </li>
+    <>
+      <Navbar />
+      <div className="container">
+        <div className="courseFormContainer">
+          <div className="courseFormFormContainer">
+            <h2 className="courseFormHeader">Course Info</h2>
+            <form className="courseForm" onSubmit={handleSubmit}>
+              <div>
+                <label className="courseFormLabel">
+                  Course ID:
+                  <input type="text" className="courseFormInput courseFormReadOnly" value={course?.courseId || id} readOnly />
+                </label>
+              </div>
+              <div>
+                <label className="courseFormLabel">
+                  Course Name:
+                  <input type="text" className="courseFormInput courseFormReadOnly" value={course?.name || ""} readOnly />
+                </label>
+              </div>
+              <div className={errors.examPeriod ? "courseFormErrorSelect" : ""}>
+                <label className="courseFormLabel">Exam Period:</label>
+                <select
+                  className="courseFormSelect"
+                  value={examPeriod.year}
+                  onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
+                >
+                  <option value="">Year</option>
+                  {[2025, 2026, 2027].map(year => (
+                    <option key={year} value={year}>{year}</option>
+                  ))}
+                </select>
+                <select
+                  className="courseFormSelect"
+                  value={examPeriod.startMonth}
+                  onChange={(e) => setExamPeriod({ ...examPeriod, startMonth: e.target.value })}
+                >
+                  <option value="">Start Month</option>
+                  {["January", "February", "March", "April", "May", "June",
+                    "July", "August", "September", "October", "November", "December"]
+                    .map(month => (
+                      <option key={month} value={month}>{month}</option>
+                    ))}
+                </select>
+                <select
+                  className="courseFormSelect"
+                  value={examPeriod.endMonth}
+                  onChange={(e) => setExamPeriod({ ...examPeriod, endMonth: e.target.value })}
+                >
+                  <option value="">End Month</option>
+                  {["January", "February", "March", "April", "May", "June",
+                    "July", "August", "September", "October", "November", "December"]
+                    .map(month => (
+                      <option key={month} value={month}>{month}</option>
+                    ))}
+                </select>
+                {errors.examPeriod && <span className="courseFormErrorMessage">{errors.examPeriod}</span>}
+              </div>
+              {[{ name: "oralsPracticals", label: "Orals/Practicals" },
+              { name: "assessment", label: "Assessment" },
+              { name: "reassessment", label: "Reassessment" },
+              { name: "paperSetting", label: "Paper Setting" },
+              { name: "moderation", label: "Moderation" },
+              { name: "pwdPaperSetter", label: "PwD Paper Setter" }]
+                .map(({ name, label }) => (
+                  <div key={name} className={errors[name] ? "courseFormErrorInput" : ""}>
+                    <label className="courseFormLabel">
+                      {label}:
+                      <input
+                        type="text"
+                        className="courseFormInput"
+                        name={name}
+                        value={formData[name]}
+                        onChange={handleInputChange}
+                        placeholder={`Search faculty for ${label}`}
+                      />
+                      <button
+                        type="button"
+                        className="courseFormButton"
+                        onClick={() => handleAddFaculty(name)}
+                        disabled={!formData[name].trim()}
+                      >
+                        Add
+                      </button>
+                      <ul className="courseFormSuggestions" id={`suggestions-${name}`}
+                        style={{ display: (suggestions[name] || []).length > 0 ? "block" : "none" }}>
+                        {(suggestions[name] || []).map((faculty) => (
+                          <li className="courseFormSuggestionsItem" key={faculty.facultyId} onClick={() => {
+                            setFormData({ ...formData, [name]: faculty.name });
+                            setSuggestions((prev) => ({ ...prev, [name]: [] }));
+                          }}>
+                            {faculty.name}
+                          </li>
+                        ))}
+                      </ul>
+                    </label>
+                    {tempAssignments[name].length > 0 && (
+                      <ul className="courseFormTempList">
+                        {tempAssignments[name].map((faculty, index) => (
+                          <li className="courseFormTempListItem" key={index}>
+                            {faculty.name}
+                            <button
+                              type="button"
+                              className="courseFormRemoveFacultyBtn"
+                              onClick={() => handleRemoveFaculty(name, index)}
+                            >
+                              &#10005;
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                    {errors[name] && <span className="courseFormErrorMessage">{errors[name]}</span>}
+                  </div>
                ))}
-              </ul>
-            </label>
-            {tempAssignments[name].length > 0 && (
-              <ul className="temp-list">
-                {tempAssignments[name].map((faculty, index) => (
-                  <li key={index}>
-                    {faculty.name}
-                    <button
-                      type="button"
-                      onClick={() => handleRemoveFaculty(name, index)}
-                      className="remove-faculty-btn"
-                    >
-                      &#10005;
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
-            {errors[name] && (
-              <span className="error-message">{errors[name]}</span>
-            )}
+
+              <button type="submit" className="courseFormButton" style={{ gridColumn: "1 / -1" }}>Submit</button>
+            </form>
          </div>
-        ))}
-        <div className={errors.examPeriod ? "error" : ""}>
-          <label>Exam Period:</label>
-          <select
-            value={examPeriod.year}
-            onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
-          >
-            <option value="">Year</option>
-            {[2025, 2026, 2027].map((year) => (
-              <option key={year} value={year}>
-                {year}
-              </option>
-            ))}
-          </select>
-          <select
-            value={examPeriod.startMonth}
-            onChange={(e) =>
-              setExamPeriod({ ...examPeriod, startMonth: e.target.value })
-            }
-          >
-            <option value="">Start Month</option>
-            {[
-              "January",
-              "February",
-              "March",
-              "April",
-              "May",
-              "June",
-              "July",
-              "August",
-              "September",
-              "October",
-              "November",
-              "December",
-            ].map((month) => (
-              <option key={month} value={month}>
-                {month}
-              </option>
-            ))}
-          </select>
-          <select
-            value={examPeriod.endMonth}
-            onChange={(e) =>
-              setExamPeriod({ ...examPeriod, endMonth: e.target.value })
-            }
-          >
-            <option value="">End Month</option>
-            {[
-              "January",
-              "February",
-              "March",
-              "April",
-              "May",
-              "June",
-              "July",
-              "August",
-              "September",
-              "October",
-              "November",
-              "December",
-            ].map((month) => (
-              <option key={month} value={month}>
-                {month}
-              </option>
-            ))}
-          </select>
-          {errors.examPeriod && (
-            <span className="error-message">{errors.examPeriod}</span>
-          )}
        </div>
-        <button type="submit">Submit</button>
-      </form>
-    </div>
+
+      </div>
+
+    </>
+
  );
 };

--- a/client/src/Pages/CourseTable.css
+++ b/client/src/Pages/CourseTable.css
@@ -1,7 +1,7 @@
 /* CourseTable.css */

 .course-table {
-    width: 80%;
+    width: 90vw;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
--- a/client/src/Pages/CourseTable.jsx
+++ b/client/src/Pages/CourseTable.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./CourseTable.css";
 import { fetchCourses } from "../api";
+import Navbar from "./Navbar";

 const CourseTable = () => {
  const { state } = useLocation();
@@ -49,6 +50,8 @@ const CourseTable = () => {
  };

  return (
+   <>
+   <Navbar/>
    <table className="course-table">
      <thead>
        <tr>
@@ -73,6 +76,7 @@ const CourseTable = () => {
        )}
      </tbody>
    </table>
+   </>
  );
 };

--- a/client/src/Pages/FacultyForm.css
+++ b/client/src/Pages/FacultyForm.css
@@ -42,7 +42,7 @@
  }
  
  button {
-    padding: 12px;
+     padding: 12px; 
    font-size: 16px;
    background-color: #4caf50;
    color: white;
--- a/client/src/Pages/FacultyForm.jsx
+++ b/client/src/Pages/FacultyForm.jsx
@@ -1,29 +1,33 @@
 import React from "react";
 import { useParams } from "react-router-dom";
 import "./FacultyForm.css";
+import Navbar from "./Navbar";

 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>
+    <>
+      <Navbar />
+      <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>
+    </>
  );
 };

--- a/client/src/Pages/FilterPage.jsx
+++ b/client/src/Pages/FilterPage.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import "./FilterPage.css";
 import { fetchCourses } from "../api";
+import Navbar from "./Navbar";

 const FilterPage = () => {
  const [formData, setFormData] = useState({
@@ -59,50 +60,53 @@ const FilterPage = () => {
  };

  return (
-    <div className="filter-container">
-      <div className="filter-form">
-        <select
-          name="department"
-          value={formData.department}
-          onChange={handleInputChange}
-        >
-          <option value="">Select Department</option>
-          <option value="COMPS">COMPS</option>
-          <option value="IT">IT</option>
-        </select>
-        <select
-          name="program"
-          value={formData.program}
-          onChange={handleInputChange}
-        >
-          <option value="">Select Program</option>
-          <option value="B.Tech">B.Tech</option>
-          <option value="M.Tech">M.Tech</option>
-        </select>
-        <select
-          name="semester"
-          value={formData.semester}
-          onChange={handleInputChange}
-        >
-          <option value="">Select Semester</option>
-          {getSemesters().map((sem) => (
-            <option key={sem} value={sem}>
-              Semester {sem}
-            </option>
-          ))}
-        </select>
-        <select
-          name="scheme"
-          value={formData.scheme}
-          onChange={handleInputChange}
-        >
-          <option value="">Select Scheme</option>
-          <option value="2020">SVU 2020</option>
-          <option value="2023">SVU 2023</option>
-        </select>
-        <button onClick={handleApplyFilter}>Apply Filter</button>
+    <>
+    <Navbar/>
+      <div className="filter-container">
+        <div className="filter-form">
+          <select
+            name="department"
+            value={formData.department}
+            onChange={handleInputChange}
+          >
+            <option value="">Select Department</option>
+            <option value="COMPS">COMPS</option>
+            <option value="IT">IT</option>
+          </select>
+          <select
+            name="program"
+            value={formData.program}
+            onChange={handleInputChange}
+          >
+            <option value="">Select Program</option>
+            <option value="B.Tech">B.Tech</option>
+            <option value="M.Tech">M.Tech</option>
+          </select>
+          <select
+            name="semester"
+            value={formData.semester}
+            onChange={handleInputChange}
+          >
+            <option value="">Select Semester</option>
+            {getSemesters().map((sem) => (
+              <option key={sem} value={sem}>
+                Semester {sem}
+              </option>
+            ))}
+          </select>
+          <select
+            name="scheme"
+            value={formData.scheme}
+            onChange={handleInputChange}
+          >
+            <option value="">Select Scheme</option>
+            <option value="2020">SVU 2020</option>
+            <option value="2023">SVU 2023</option>
+          </select>
+          <button onClick={handleApplyFilter}>Apply Filter</button>
+        </div>
      </div>
-    </div>
+    </>
  );
 };

--- a/client/src/Pages/Login.jsx
+++ b/client/src/Pages/Login.jsx
@@ -3,6 +3,7 @@ import { Container, Col, Row } from "react-bootstrap";
 import { FcGoogle } from "react-icons/fc";
 import axios from "axios";
 import md5 from "md5";
+
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";

--- a/client/src/Pages/Navbar.css
+++ b/client/src/Pages/Navbar.css
@@ -1,44 +1,57 @@
 .navbar {
  background-color: #800000; /* Maroon background */
-  height: 50px; /* Navbar height */
+  height: 50px; /* Increased 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 */
+  display: flex; /* Use flexbox for layout */
+  justify-content: space-between; /* Space between items */
+  align-items: center; /* Align items vertically */
+  padding: 0 20px; /* Horizontal padding */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
-  position: fixed; /* Fix the navbar to the top */
+  position: fixed; /* Fixed position */
  top: 0;
-  z-index: 1000; /* Place above other elements */
+  z-index: 1000;
 }

-.navbar {
-  box-sizing: border-box; /* Include padding and border in the height calculation */
+.mb-10 {
+  margin-bottom: 20px;
 }

-* {
-  margin: 0;
-  padding: 1000;
-  box-sizing: border-box;
+.navbar-container{
+display: flex;
+align-items: center;
+justify-content: space-between;
+width: 100%;
 }

-.navbar select,
-.navbar input {
-  height: auto;
-  margin: 0;
-  padding: 5px 10px;
-  font-size: 16px; /* Ensure consistent font size */
-}
-
-
-/* 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 */
+  font-size: 30px; /* Size of user icon */
+  color: #fff; /* Color of the icon */
+  margin-left: 20px; /* Space after the icon before the buttons */
+  cursor: pointer; /* Cursor type */
+  transition: color 0.3s ease-in-out; /* Transition for hover effect */
 }

 .user-icon:hover {
-  color: #ffcccc; /* Light pink on hover */
+  color: #ffcccc; /* Color on hover */
+}
+
+.button-container {
+  display: flex; /* Flexbox for buttons */
+  gap: 20px; /* Gap between buttons */
+}
+
+.button-container button {
+  background-color: #c00000; /* Button color */
+  color: white; /* Text color */
+  border: none; /* No border */
+ 
+  cursor: pointer; /* Cursor type */
+  font-size: 12px; /* Font size */
+  white-space: nowrap; /* Prevent text wrapping */
+  transition: background-color 0.3s; /* Smooth transition for hover */
+  padding: 6px 10px;
+}
+
+.button-container button:hover {
+  background-color: #ffcccc; /* Hover color */
 }
--- a/client/src/Pages/Navbar.jsx
+++ b/client/src/Pages/Navbar.jsx
@@ -1,25 +1,24 @@
 import React from "react";
 import { FaUserCircle } from "react-icons/fa";
-import { useNavigate } from "react-router-dom"; // Import for navigation
+import { NavLink } from "react-router-dom"; // Import NavLink for navigation
 import "./Navbar.css"; // Navbar-specific styles

 const Navbar = () => {
-  const navigate = useNavigate(); // Hook for navigation
-
-  const goToConsolidatedPage = () => {
-    navigate("/consolidated"); // Route to the consolidated page
-  };
-
  return (
-    <header className="navbar">
+    <header className="navbar mb-10">
      <div className="navbar-container">
        <FaUserCircle className="user-icon" />
-        <button
-          className="consolidated-button"
-          onClick={goToConsolidatedPage}
-        >
-          Go to Consolidated Page
-        </button>
+        <div className="button-container">
+          <NavLink to="/consolidated" className="consolidated-button">
+            Faculty Form
+          </NavLink>
+          <NavLink to="/course-form" className="course-form-button">
+            Course Form
+          </NavLink>
+        </div>
+        <div>
+          
+        </div>
      </div>
    </header>
  );
--- a/client/src/Pages/Welcom.jsx
+++ b/client/src/Pages/Welcom.jsx
@@ -1,25 +1,25 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import "./Welcom.css";
+// import React from "react";
+// import { useNavigate } from "react-router-dom";
+// import "./Welcom.css";

-const Welcom = () => {
-  const navigate = useNavigate();
+// const Welcom = () => {
+//   const navigate = useNavigate();

-  const goToFilterPage = () => {
-    navigate("/Filter");
-  };
+//   const goToFilterPage = () => {
+//     navigate("/Filter");
+//   };

-  return (
-    <div className="welcom-container">
-      <div className="welcom-message">
-        <h1>Welcome</h1>
-        <p>You're signed in</p>
-      </div>
-      <button className="next-button" onClick={goToFilterPage}>
-        Proceed
-      </button>
-    </div>
-  );
-};
+//   return (
+//     <div className="welcom-container">
+//       <div className="welcom-message">
+//         <h1>Welcome</h1>
+//         <p>You're signed in</p>
+//       </div>
+//       <button className="next-button" onClick={goToFilterPage}>
+//         Proceed
+//       </button>
+//     </div>
+//   );
+// };

-export default Welcom;
+// export default Welcom;
--- a/client/src/Pages/Welcome.jsx
+++ b/client/src/Pages/Welcome.jsx
@@ -1,28 +1,28 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+// import React from "react";
+// import { useNavigate } from "react-router-dom";

-const Welcome = () => {
-  const navigate = useNavigate();
+// const Welcome = () => {
+//   const navigate = useNavigate();

-  const handleRedirect = () => {
-    navigate("/AuthpPage");
-  };
+//   const handleRedirect = () => {
+//     navigate("/AuthpPage");
+//   };

-  return (
-    <div className="container text-center mt-5">
-      <div className="row justify-content-center">
-        <div className="col-md-6">
-          <h1 className="mb-4">Welcome Page</h1>
-          <button
-            onClick={handleRedirect}
-            className="btn btn-primary btn-lg"
-          >
-            SIGN IN / SIGN UP
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
+//   return (
+//     <div className="container text-center mt-5">
+//       <div className="row justify-content-center">
+//         <div className="col-md-6">
+//           <h1 className="mb-4">Welcome Page</h1>
+//           <button
+//             onClick={handleRedirect}
+//             className="btn btn-primary btn-lg"
+//           >
+//             SIGN IN / SIGN UP
+//           </button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };

-export default Welcome;
+// export default Welcome;
--- a/client/src/Pages/WelcomeWithFilter.jsx
+++ b/client/src/Pages/WelcomeWithFilter.jsx
@@ -22,8 +22,6 @@ const WelcomeWithFilter = () => {

  return (
    <div className="welcome-with-filter-container">
-      {/* Navbar */}
-      <Navbar />

      {/* Filter Section */}
      <div className="filter-section">
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -14,4 +14,5 @@ code {

 #root{
  width: 100vw;
+  height: 100vh;
 }
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+// import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import "bootstrap/dist/css/bootstrap.min.css";
+import Navbar from './Pages/Navbar.jsx';
+import { BrowserRouter } from 'react-router-dom';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
    <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );

 reportWebVitals();