Group d/jayman 4

client/src/pages/ProtectedRouteA3.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import { Navigate } from "react-router-dom";
+
+const ProtectedRouteA3 = ({ children }) => {
+  const user = JSON.parse(localStorage.getItem("ipmsUser"));
+  const [eligible, setEligible] = useState(null); // null = loading
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkEligibility = async () => {
+      if (!user?.email) {
+        setEligible(false);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await fetch(
+          `${process.env.REACT_APP_API_URL}/api/reports/A3-eligibility`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email: user.email }),
+          }
+        );
+        const data = await response.json();
+        setEligible(data.eligibleForA3);
+      } catch (err) {
+        setEligible(false);
+      }
+      setLoading(false);
+    };
+
+    checkEligibility();
+  }, [user]);
+
+  if (loading) return <div>Checking eligibility...</div>;
+
+  if (!eligible) {
+    // Not eligible, redirecting to student dashboard
+    return <Navigate to="/student-dashboard" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRouteA3;

client/src/pages/StudentDashboard.jsx

@@ -8,17 +8,26 @@ const StudentDashboard = () => {
   const user = JSON.parse(localStorage.getItem("ipmsUser"));
   const ouEmail = user?.email;
   const [approvalStatus, setApprovalStatus] = useState("not_submitted");
+  const [a3Eligibility, setA3Eligibility] = useState({
+    checked: false,
+    eligible: false,
+    completedHours: 0,
+    requiredHours: 0,
+  });
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const res = await fetch(`${process.env.REACT_APP_API_URL}/api/student`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ ouEmail }),
-        });
+        const res = await fetch(
+          `${process.env.REACT_APP_API_URL}/api/student`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ ouEmail }),
+          }
+        );
 
         const data = await res.json();
         setApprovalStatus(data.approvalStatus);
@@ -33,6 +42,38 @@ const StudentDashboard = () => {
   }, [ouEmail]);
   console.log(approvalStatus);
 
+  useEffect(() => {
+    const checkA3Eligibility = async () => {
+      if (!ouEmail) return;
+      try {
+        const res = await fetch(
+          `${process.env.REACT_APP_API_URL}/api/reports/A3-eligibility`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email: ouEmail }),
+          }
+        );
+        const data = await res.json();
+        setA3Eligibility({
+          checked: true,
+          eligible: data.eligibleForA3,
+          completedHours: data.completedHours,
+          requiredHours: data.requiredHours,
+        });
+      } catch (err) {
+        setA3Eligibility({
+          checked: true,
+          eligible: false,
+          completedHours: 0,
+          requiredHours: 0,
+        });
+        console.error("Error checking A3 eligibility", err);
+      }
+    };
+    checkA3Eligibility();
+  }, [ouEmail]);
+
   return (
     <div className="student-dashboard">
       <div className="dashboard-header">
@@ -133,6 +174,44 @@ const StudentDashboard = () => {
             Request
           </button>
         </div>
+
+        {/* ------ FORM A3 Card ------ */}
+        <div className="card-section">
+          <div className="card-content">
+            <h3>Final Evaluation (Form A3)</h3>
+            {!a3Eligibility.checked ? (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                Checking eligibility...
+              </p>
+            ) : a3Eligibility.eligible ? (
+              <p style={{ fontSize: "0.85rem", color: "green" }}>
+                You have completed {a3Eligibility.completedHours} of{" "}
+                {a3Eligibility.requiredHours} hours. Eligible for final
+                evaluation.
+              </p>
+            ) : (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                You have completed {a3Eligibility.completedHours} of{" "}
+                {a3Eligibility.requiredHours} hours.
+                <br />
+                Complete all required hours to unlock A3 Final Evaluation.
+              </p>
+            )}
+          </div>
+          <button
+            className="card-button"
+            disabled={!a3Eligibility.eligible}
+            onClick={() => {
+              if (a3Eligibility.eligible) navigate("/evaluation");
+            }}
+            style={{
+              backgroundColor: !a3Eligibility.eligible ? "#ccc" : "",
+              cursor: !a3Eligibility.eligible ? "not-allowed" : "pointer",
+            }}
+          >
+            {a3Eligibility.eligible ? "Open Final Evaluation" : "Locked"}
+          </button>
+        </div>
       </div>
     </div>
   );