Group E-development

client/src/pages/Home.js

@@ -71,14 +71,25 @@ function Home() {
             semester: user.semester,
           };
 
+            localStorage.clear();
           localStorage.setItem("ipmsUser", JSON.stringify(limitedUserInfo));
           localStorage.setItem("ouEmail", user.ouEmail);
           navigate("/student-dashboard");
         } else if (role === "supervisor") {
+          // Store only required fields
+          const limitedUserInfo = {
+            role: role,
+          };
+          const token = data.user.token;
+
+            localStorage.clear();
+          localStorage.setItem("ipmsUser", JSON.stringify(limitedUserInfo));
+          localStorage.setItem("token", token);
+
           Swal.fire({
-            icon: "success",
-            title: "Login Successful 🌟",
-            text: `Welcome back, ${role}!`,
+              icon: "success",
+              title: "Login Successful 🌟",
+              text: `Welcome back, ${role}!`,
           });
           navigate("/supervisor-dashboard");
         } else {
@@ -249,4 +260,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Home;

client/src/pages/ProtectedSupervisor.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+
+const ProtectedSupervisor = ({ children }) => {
+    const user = JSON.parse(localStorage.getItem("ipmsUser"));
+    return user && user.role === "supervisor" ? children : <Navigate to="/" />;
+  };
+
+  export default ProtectedSupervisor;

client/src/pages/SupervisorDashboard.js

@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import "../styles/SupervisorDashboard.css";
@@ -9,28 +10,25 @@ const SupervisorDashboard = () => {
   const [selectedForm, setSelectedForm] = useState(null);
   const [loading, setLoading] = useState(true);
   const [message, setMessage] = useState("");
-
-  useEffect(() => {
-    const token = localStorage.getItem("token") || "";
-
-    const fetchRequests = async () => {
+  const token = localStorage.getItem("token") || "";
+
+    useEffect(() => {
+      const fetchRequests = async () => {
       try {
-        const res = await axios.get(
+        const response = await axios.get(
           `${process.env.REACT_APP_API_URL}/api/supervisor/forms`,
           {
             headers: {
               Authorization: `Bearer ${token}`,
             },
-          }
-        );
+        });
 
-        const formatted = res.data.map((item) => ({
+        const formatted = response.data.map(item => ({
           _id: item._id,
-          interneeName: item.interneeName || item.student_id?.userName || "N/A",
-          soonerId: item.soonerId || item.student_id?.soonerId || "N/A",
-          interneeEmail: item.interneeEmail || item.student_id?.email || "N/A",
+          interneeName: item.student?.name || item.studentId?.fullName || item.interneeName || "N/A",
+          interneeEmail: item.student?.email || item.studentId?.ouEmail || item.interneeEmail || "N/A",
           form_type: item.form_type,
-          createdAt: item.createdAt,
+          createdAt: item.createdAt || item.submittedAt,
           supervisor_status: item.supervisor_status || "pending",
           fullForm: item,
           workplace: {
@@ -48,27 +46,44 @@ const SupervisorDashboard = () => {
           endDate: item.endDate || "N/A",
           tasks: item.tasks || [],
           status: item.status || "pending",
-          supervisor_comment: item.supervisor_comment || "N/A",
+          supervisor_comment: item.supervisor_comment || "N/A"
         }));
 
+        setLoading(false);
         setRequests(formatted);
+
       } catch (err) {
-        console.error("Error fetching forms:", err);
-        setMessage("Error fetching forms.");
-      } finally {
-        setLoading(false);
+          if (err.response) {
+              if (err.response.status === 401) {
+                  console.error("Unauthorized access. Redirecting to login...");
+                  setMessage("Unauthorized access. Redirecting to login...");
+                  localStorage.removeItem("token");
+                  window.location.href = "/";
+              }
+              else if (err.response.status === 403) {
+                  console.error("Forbidden access. Redirecting to login...");
+                  setMessage("Forbidden access. Redirecting to login...");
+                  window.location.href = "/";
+              }
+              else if (err.response.status === 500) {
+                  console.error("Server error. Please try again later.");
+                  setMessage("Server error. Please try again later.");
+              }
+              else {
+                  console.error("Unexpected error:", err.message);
+                  setMessage("Unexpected error. Please try again.");
+              }
+          }
+
+          setLoading(false);
       }
     };
 
     fetchRequests();
-  }, []);
-
-  const handleAction = async (form_type, id, action, comment, signature) => {
-    const token = localStorage.getItem("token");
+  }, [token, setLoading]);
 
-    const confirmed = window.confirm(
-      `Are you sure you want to ${action} this request?`
-    );
+  const handleAction = async (id, form_type, action, comment, signature) => {
+    const confirmed = window.confirm(`Are you sure you want to ${action} this request?`);
     if (!confirmed) return;
 
     try {
@@ -94,78 +109,77 @@ const SupervisorDashboard = () => {
 
   const openFormView = (form) => setSelectedForm(form);
   const closeFormView = () => setSelectedForm(null);
+
   const formatDate = (date) => new Date(date).toLocaleDateString();
 
   const sortedRequests = [...requests]
     .filter((res) => res.supervisor_status?.toLowerCase() === "pending")
     .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
-
-  let content;
-
-  if (loading) {
-    content = <p>Loading...</p>;
-  } else if (sortedRequests.length === 0) {
-    content = (
-      <div className="empty-message-container">
-        <div className="empty-message">No pending approvals.</div>
-      </div>
-    );
-  } else {
-    content = (
-      <table className="dashboard-table">
-        <thead>
-          <tr>
-            <th>Student Name</th>
-            <th>Sooner ID</th>
-            <th>Student Email</th>
-            <th>Form Type</th>
-            <th>Submitted</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedRequests.map((req) => (
-            <tr key={req._id}>
-              <td>{req.interneeName}</td>
-              <td>
-                <button
-                  className="link-button"
-                  onClick={() => openFormView(req)}
-                >
-                  {req.soonerId}
-                </button>
-              </td>
-              <td>{req.interneeEmail}</td>
-              <td>{req.form_type}</td>
-              <td>{formatDate(req.createdAt)}</td>
-              <td>
-                <span className={`status-badge ${req.supervisor_status}`}>
-                  {req.supervisor_status}
-                </span>
-              </td>
+
+    let content;
+    if (loading) {
+      content = <p>Loading...</p>;
+    } else if (sortedRequests.length === 0) {
+      content = (
+        <div className="empty-message-container">
+          <div className="empty-message">No pending approvals.</div>
+        </div>
+      );
+    } else {
+      content = (
+        <table className="dashboard-table">
+          <thead>
+            <tr>
+              <th>Student Name</th>
+              <th>Student Email</th>
+              <th>Form Type</th>
+              <th>Submitted</th>
+              <th>Status</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+  {sortedRequests.map((req) => {
+    return (
+      <tr
+        key={req._id}
+        className="clickable-row"
+        onClick={() => openFormView(req)}
+        style={{ cursor: "pointer" }}
+      >
+        <td>{req.interneeName || "N/A"}</td>
+        <td>{req.interneeEmail || "N/A"}</td>
+        <td>{req.form_type}</td>
+        <td>{formatDate(req.createdAt)}</td>
+        <td>
+          <span className={`status-badge ${req.supervisor_status || req.status}`}>
+            {req.supervisor_status || req.status}
+          </span>
+        </td>
+      </tr>
     );
-  }
+  })}
+</tbody>
 
-  return (
-    <div className="dashboard-container">
-      <h2>Supervisor Dashboard</h2>
-      {message && <p className="status-msg">{message}</p>}
-      {content}
-      {selectedForm && (
-        <ViewFormModal
-          formData={selectedForm}
-          onClose={closeFormView}
-          onAction={(id, action, comment, signature) =>
-            handleAction(selectedForm.form_type, id, action, comment, signature)
-          }
-        />
-      )}
-    </div>
-  );
-};
+        </table>
+      );
+    }
+
+    return (
+      <div className="dashboard-container">
+        <h2>Supervisor Dashboard</h2>
+        {message && <p className="status-msg">{message}</p>}
+        {content}
+        {selectedForm && (
+          <ViewFormModal
+            formData={selectedForm}
+            onClose={closeFormView}
+            onAction={(id, action, comment, signature) =>
+              handleAction(id, selectedForm.form_type, action, comment, signature)
+            }
+          />
+        )}
+      </div>
+    );
+  };
 
 export default SupervisorDashboard;