toastify

client/src/Pages/ConsolidatedTable.jsx

@@ -3,6 +3,8 @@ 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 'react-toastify/dist/ReactToastify.css';
 
 const styles = {
   header: {
@@ -172,15 +174,15 @@ const ConsolidatedTable = () => {
 
       try {
         const emailResponse = await sendEmail(formData);
-        alert(`Email sent successfully to ${facultyEmail}`);
+        toast.success(`Email sent successfully to ${facultyEmail}`);
         console.log("Response from server:", emailResponse);
       } catch (emailError) {
         console.error("Error sending email:", emailError);
-        alert("Failed to send email.");
+        toast.error("Failed to send email.");
       }
     } catch (facultyError) {
       console.error("Error fetching Faculty data:", facultyError);
-      alert("Failed to fetch faculty data.");
+      toast.error("Failed to fetch faculty data.");
     }
   };
 
@@ -189,12 +191,13 @@ const ConsolidatedTable = () => {
       const teacherData = data.filter((row) => row.Name === teacher);
       await handleSendEmail(teacher, teacherData); // Wait for each email to be sent before proceeding to the next
     }
-    alert("Emails sent to all teachers.");
+    toast.success("Emails sent to all teachers.");
   };
 
   return (
     <>
       <Navbar />
+      <ToastContainer />
       <div style={styles.main}>
         <h1 style={styles.header}>Faculty Tables with Download Options</h1>
 

client/src/Pages/FilterPage.jsx

@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
 import "./FilterPage.css";
 import { fetchCourses } from "../api";
 import Navbar from "./Navbar";
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const FilterPage = () => {
   const currentYear = new Date().getFullYear();
@@ -34,7 +36,7 @@ const FilterPage = () => {
       !formData.program ||
       !formData.academicYear
     ) {
-      alert("Please fill all the fields before applying the filter.");
+      toast.error("Please fill all the fields before applying the filter.");
       return;
     }
 
@@ -54,11 +56,11 @@ const FilterPage = () => {
           },
         });
       } else {
-        alert("No courses found for the selected filters.");
+        toast.error("No courses found for the selected filters.");
       }
     } catch (error) {
       console.error("Error fetching courses:", error);
-      alert("Failed to fetch courses. Please try again later.");
+      toast.error("Failed to fetch courses. Please try again later.");
     }
   };
 
@@ -84,6 +86,7 @@ const FilterPage = () => {
   return (
     <>
       <Navbar />
+      <ToastContainer />
       <div className="filter-container">
         <div className="filter-form">
           <select

client/src/Pages/Navbar.jsx

@@ -1,11 +1,29 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { FaUserCircle } from "react-icons/fa";
 import { NavLink, useNavigate } from "react-router-dom"; // Import NavLink for navigation
 import "./Navbar.css"; // Navbar-specific styles
 import axios from "axios";
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const Navbar = () => {
   const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem("user");
+    if (loggedInUser) {
+      setUser(JSON.parse(loggedInUser));
+    } else {
+      axios.get("http://localhost:8080/api/user/profile", { withCredentials: true })
+        .then((response) => {
+          setUser(response.data.user);
+        })
+        .catch((error) => {
+          console.error("Error fetching user data:", error);
+        });
+    }
+  }, []);
 
   // Handle logout functionality
   const handleLogout = async () => {
@@ -17,13 +35,14 @@ const Navbar = () => {
       navigate("/");
     } catch (error) {
       console.error("Error during logout:", error);
-      alert("Failed to log out. Please try again.");
+      toast.error("Failed to log out. Please try again.");
     }
   };
 
   return (
     <header className="navbar">
       <div className="navbar-container">
+        <ToastContainer />
         {/* Appointment To Examiner text at the left */}
         <NavLink to="/Welcome" className="navbar-title">
           Appointment To Examiner
@@ -46,7 +65,16 @@ const Navbar = () => {
 
         {/* User icon at the right */}
         <NavLink to="/accounts" className="user-icon-link">
-          <FaUserCircle className="user-icon" />
+        {user && user.profilePicture ? (
+              <img
+                src={user.profilePicture}
+                alt="Profile"
+                className="user-icon"
+                style={{ width: '40px', height: '40px', borderRadius: '50%' }}
+              />
+            ) : (
+              <FaUserCircle className="user-icon" />
+            )}
         </NavLink>
       </div>
     </header>

client/src/Pages/WelcomeWithFilter.jsx

@@ -1,7 +1,6 @@
 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 = () => {