toggle error fixed

client/src/App.js

@@ -18,12 +18,14 @@ import DepartmentConsolidated from "./Pages/DepartmentConsolidated";
 import PanelConsolidated from "./Pages/PanelConsolidated";
 import { AdminFacultyPage } from "./Pages/AdminFacultyPage";
 import AdminCoursePage from "./Pages/AdminCoursePage";
+import { ToastContainer } from "react-toastify";
 
 
 function App() {
   return (
     <>
     <TokenRefresher />
+    <ToastContainer/>
       <Routes>
         <Route path="/" element={<AuthPage />}></Route>
         <Route path="/course-form/:id" element={<PrivateRoute element={<CourseForm />} />} />

client/src/Pages/Accounts.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Container, Col, Row, Button, Spinner } from "react-bootstrap";
 import axios from "axios";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
@@ -9,7 +9,7 @@ import Footer from "./Footer";
 function HomePage(props) {
 
   const notifyLoading = () => {
-    toast.info("Logging Out Successfull..");
+    toast.info("Logging Out Successfully..");
   };
 
   const [user, setUser] = useState(null);
@@ -61,7 +61,6 @@ function HomePage(props) {
   return (
     <>
     <Navbar />
-    <ToastContainer />
       <div className="LoginPage">
         <Container className="HomePageContainer ProfileContainer">
           {loading ? (

client/src/Pages/AdminCoursePage.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Navbar from './Navbar';
-import { toast, ToastContainer } from "react-toastify";
+import { toast} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import { useNavigate } from 'react-router-dom';
 import Footer from './Footer';
@@ -149,7 +149,6 @@ export const AdminCoursePage = () => {
     return (
         <>
             <Navbar />
-            <ToastContainer />
             <div style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f4f6f9', padding: '20px' }}>
                 <h2 style={{ textAlign: 'center', color: '#333', marginBottom: '20px' }}>Course Management</h2>
 

client/src/Pages/AdminFacultyPage.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Navbar from './Navbar';
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 import { useNavigate } from 'react-router-dom';
 import Footer from './Footer';
@@ -28,18 +28,18 @@ export const AdminFacultyPage = () => {
   useEffect(() => {
     const checkAdmin = async () => {
       try {
-          const res = await axios.get("http://localhost:8080/api/me", { withCredentials: true });
-          console.log(res.data);
-          if (!res.data.isAdmin) {
-              handleUnauthorizedAccess();
-          } else {
-              setIsLoading(false);
-          }
-      } catch (error) {
-          console.error("Unauthorized access:", error);
+        const res = await axios.get("http://localhost:8080/api/me", { withCredentials: true });
+        console.log(res.data);
+        if (!res.data.isAdmin) {
           handleUnauthorizedAccess();
+        } else {
+          setIsLoading(false);
+        }
+      } catch (error) {
+        console.error("Unauthorized access:", error);
+        handleUnauthorizedAccess();
       }
-  };
+    };
     fetchFaculties();
     fetchCourses();
     checkAdmin();
@@ -47,19 +47,19 @@ export const AdminFacultyPage = () => {
 
   const handleUnauthorizedAccess = async () => {
     try {
-        toast.warning("Unauthorized access. Logging out...", { position: "top-center" });
+      toast.warning("Unauthorized access. Logging out...", { position: "top-center" });
 
-        // Attempt to log out
-        await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
+      // Attempt to log out
+      await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
 
-        // Delay redirection to show the toast message
-        setTimeout(() => {
-            navigate("/"); // Redirect to login
-        }, 1500);
+      // Delay redirection to show the toast message
+      setTimeout(() => {
+        navigate("/"); // Redirect to login
+      }, 1500);
     } catch (error) {
-        console.error("Error during unauthorized access handling:", error);
+      console.error("Error during unauthorized access handling:", error);
     }
-};
+  };
 
   useEffect(() => {
     if (!isLoading) {
@@ -207,102 +207,102 @@ export const AdminFacultyPage = () => {
       </div>
 
       {showForm && (
-  <div style={{
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000, // Ensures it stays above other content
-    padding: '10px', // Prevents content from hitting screen edges
-  }}>
-    <div style={{
-      backgroundColor: '#fff',
-      borderRadius: '10px',
-      padding: '20px',
-      boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
-      maxWidth: '90vw', // Ensures it doesn’t exceed the viewport width
-      maxHeight: '80vh', // Ensures it doesn’t exceed the viewport height
-      overflowY: 'auto', // Enables scrolling if content overflows
-      display: 'flex',
-      flexDirection: 'column', // Ensures elements stack properly
-    }}>
-      <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
-      
-      <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <div style={inputContainer}>
-          <input
-            placeholder="Faculty ID"
-            value={currentFaculty.facultyId}
-            onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
-            style={inputStyle}
-          />
-          <input
-            placeholder="Name"
-            value={currentFaculty.name}
-            onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
-            style={inputStyle}
-          />
-        </div>
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 1000, // Ensures it stays above other content
+          padding: '10px', // Prevents content from hitting screen edges
+        }}>
+          <div style={{
+            backgroundColor: '#fff',
+            borderRadius: '10px',
+            padding: '20px',
+            boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
+            maxWidth: '90vw', // Ensures it doesn’t exceed the viewport width
+            maxHeight: '80vh', // Ensures it doesn’t exceed the viewport height
+            overflowY: 'auto', // Enables scrolling if content overflows
+            display: 'flex',
+            flexDirection: 'column', // Ensures elements stack properly
+          }}>
+            <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
 
-        <div style={inputContainer}>
-          <input
-            placeholder="Email"
-            value={currentFaculty.email}
-            onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
-            style={inputStyle}
-          />
-          <input
-            placeholder="Department"
-            value={currentFaculty.department}
-            onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
-            style={inputStyle}
-          />
-        </div>
+            <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+              <div style={inputContainer}>
+                <input
+                  placeholder="Faculty ID"
+                  value={currentFaculty.facultyId}
+                  onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
+                  style={inputStyle}
+                />
+                <input
+                  placeholder="Name"
+                  value={currentFaculty.name}
+                  onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
+                  style={inputStyle}
+                />
+              </div>
 
-        <div style={inputContainer}>
-          <input
-            placeholder="Program"
-            value={currentFaculty.program}
-            onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
-            style={inputStyle}
-          />
-        </div>
+              <div style={inputContainer}>
+                <input
+                  placeholder="Email"
+                  value={currentFaculty.email}
+                  onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
+                  style={inputStyle}
+                />
+                <input
+                  placeholder="Department"
+                  value={currentFaculty.department}
+                  onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
+                  style={inputStyle}
+                />
+              </div>
 
-        {currentFaculty.courses.map((course, index) => (
-          <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-            <select
-              value={course}
-              onChange={(e) => handleCourseChange(index, e.target.value)}
-              style={{ ...inputStyle, flex: 1 }}
-            >
-              <option value="">Select Course</option>
-              {Object.entries(courses).map(([courseId, courseName]) => (
-                <option key={courseId} value={courseId}>
-                  {courseName}
-                </option>
+              <div style={inputContainer}>
+                <input
+                  placeholder="Program"
+                  value={currentFaculty.program}
+                  onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
+                  style={inputStyle}
+                />
+              </div>
+
+              {currentFaculty.courses.map((course, index) => (
+                <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+                  <select
+                    value={course}
+                    onChange={(e) => handleCourseChange(index, e.target.value)}
+                    style={{ ...inputStyle, flex: 1 }}
+                  >
+                    <option value="">Select Course</option>
+                    {Object.entries(courses).map(([courseId, courseName]) => (
+                      <option key={courseId} value={courseId}>
+                        {courseName}
+                      </option>
+                    ))}
+                  </select>
+                  <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}>❌</button>
+                </div>
               ))}
-            </select>
-            <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}>❌</button>
+
+              <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
+
+              <div style={formButtonContainer}>
+                <button type="submit" style={submitButtonStyle}>
+                  {isEditMode ? 'Update Faculty' : 'Add Faculty'}
+                </button>
+                <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
+              </div>
+            </form>
           </div>
-        ))}
-
-        <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
-
-        <div style={formButtonContainer}>
-          <button type="submit" style={submitButtonStyle}>
-            {isEditMode ? 'Update Faculty' : 'Add Faculty'}
-          </button>
-          <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
         </div>
-      </form>
-    </div>
-  </div>
-)}
+      )}
 
 
 
@@ -378,7 +378,7 @@ export const AdminFacultyPage = () => {
           )}
         </tbody>
       </table >
-      <Footer/>
+      <Footer />
     </>
   );
 };

client/src/Pages/ConsolidatedTable.jsx

@@ -3,7 +3,7 @@ import axios from "axios";
 import * as XLSX from "xlsx-js-style";
 import { sendEmail, createExcelBook } from "../api";
 import Navbar from "./Navbar";
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Footer from "./Footer";
 
@@ -223,7 +223,6 @@ const ConsolidatedTable = () => {
       minHeight: "100vh"
     }}>
       <Navbar />
-      <ToastContainer />
       <div style={styles.main}>
         <h1 style={styles.header}>Faculty Tables with Download Options</h1>
 

client/src/Pages/FilterPage.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import "./FilterPage.css";
 import { fetchCourses } from "../api";
 import Navbar from "./Navbar";
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 const FilterPage = () => {
@@ -90,7 +90,6 @@ const FilterPage = () => {
   return (
     <>
       <Navbar />
-      <ToastContainer />
       <div className="filter-container">
         <div className="filter-form">
           <select

client/src/Pages/ForgetPw.jsx

@@ -57,7 +57,7 @@ function ForgetPwPage() {
 
   return (
     <>
-      <ToastContainer />
+      {/* <ToastContainer /> */}
       <div className="LoginPage">
         <Container className="LoginPageContainer">
           <Row className="PwPageContainer">

client/src/Pages/Login.jsx

@@ -87,7 +87,7 @@ function AuthPage() {
 
   return (
     <>
-      <ToastContainer />
+      {/* <ToastContainer /> */}
       <div className="LoginPage">
         <Container className={`LoginPageContainer ${signin ? "active" : ""}`}>
           <Row>

client/src/Pages/Navbar.jsx

@@ -60,7 +60,7 @@ const Navbar = () => {
         width: "95%",
         margin: "0 auto"
       }}>
-        <ToastContainer />
+        {/* <ToastContainer /> */}
 
         <NavLink to="/Welcome">
           <img src="logo_.png" alt="Logo" style={{

client/src/Pages/ResetPw.jsx

@@ -51,7 +51,7 @@ function ResetPwPage() {
 
   return (
     <>
-      <ToastContainer />
+      {/* <ToastContainer /> */}
       <div className="LoginPage">
         <Container className="LoginPageContainer">
           <Row className="PwPageContainer">

client/src/Pages/courseConsolidated.jsx

@@ -3,7 +3,7 @@ import axios from "axios";
 import { jsPDF } from "jspdf";
 import autoTable from "jspdf-autotable";
 import Navbar from "./Navbar";
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import { sendEmail } from "../api";
 import Footer from "./Footer";
 
@@ -457,7 +457,6 @@ const CourseConsolidated = () => {
       minHeight: "100vh"
     }}>
       <Navbar />
-      <ToastContainer />
       <div style={{flexGrow:1}}>
         <h1
           style={{