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';

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={{