Groupe E - Sprint 1 API/UI Done

client/src/pages/CoordinatorDashboard.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const CoordinatorDashboard = () => {
+  return (
+    <div style={{ padding: "20px", textAlign: "center" }}>
+      <h2>Coordinator Dashboard</h2>
+      <p>Welcome, Coordinator!</p>
+    </div>
+  );
+};
+
+export default CoordinatorDashboard;

client/src/pages/SupervisorDashboard.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState, useCallback } from "react";
+import axios from "axios";
+import '../styles/SupervisorDashboard.css';
+
+const SupervisorDashboard = () => {
+    const [submissions, setSubmissions] = useState([]);
+    const url = process.env.REACT_APP_API_URL  
+
+    const fetchPendingSubmissions = useCallback(async () => {
+        try {
+            const response = await axios.get(url + "/api/submissions/pending");
+            setSubmissions(response.data);
+        } catch (err) {
+            console.error("Error fetching submissions:", err);
+        }
+    }, [url]);
+
+    useEffect(() => {
+        fetchPendingSubmissions();
+    }, [fetchPendingSubmissions]);
+
+
+    const handleDecision = async (id, action) => {
+	try {
+	    const endpoint = url + `/api/submissions/${id}/${action}`;
+	    await axios.post(endpoint);
+	    alert(`Submission ${action}d successfully!`);
+	    fetchPendingSubmissions(); // refresh list
+	} catch (err) {
+	    console.error("Error updating submission:", err);
+	}
+    };
+
+    return (
+	<div className="dashboard-container">
+            <h1 className="dashboard-title">Supervisor Dashboard</h1>
+            <h2>Pending Approvals</h2>
+            <ul className="pending-approvals">
+                {submissions.length === 0 ? (
+                    <div className="empty-message-container">
+                    <div className="empty-message">No pending approvals at this time.</div>
+                    </div>
+                ) : (
+                    submissions.map(item => (
+                        <li key={item._id}>
+                            {item.name} - Details: {item.details} - Status: {item.supervisor_status}
+                            <div>
+                                <button className="approve" onClick={() => handleDecision(item._id, "approve")}>Approve</button>
+                                <button className="reject" onClick={() => handleDecision(item._id, "reject")}>Reject</button>
+                            </div>
+                        </li>
+                    ))
+                )}
+            </ul>
+        </div>
+    );
+};
+
+export default SupervisorDashboard;

client/src/router.js

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import React from "react";
 
 import { createBrowserRouter } from "react-router-dom";
 
@@ -11,6 +10,8 @@ import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import NotFound from "./pages/NotFound";
 import A3JobEvaluationForm from "./pages/A3JobEvaluationForm";
+import SupervisorDashboard from "./pages/SupervisorDashboard";
+import CoordinatorDashboard from "./pages/CoordinatorDashboard";
 
 // Create and export the router configuration
 const router = createBrowserRouter([
@@ -27,11 +28,19 @@ const router = createBrowserRouter([
         path: "signup",
         element: <SignUp />,
       },
-      // Add more routes as needed
       {
-        path: "evaluation", 
+        path: "evaluation",
         element: <A3JobEvaluationForm />,
       },
+      {
+        path: "supervisor-dashboard",
+        element: <SupervisorDashboard />,
+      },
+      {
+        path: "coordinator-dashboard",
+        element: <CoordinatorDashboard />,
+      },
+      // Add more routes as needed
     ],
   },
 ]);

client/src/styles/SupervisorDashboard.css

@@ -0,0 +1,106 @@
+.dashboard-container {
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-container h2 {
+    font-size: 20px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.dashboard-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.pending-approvals {
+    list-style-type: none;
+    padding: 0;
+}
+
+.pending-approvals li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    margin: 40px 0;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+    font-size: 16px;
+}
+
+.pending-approvals li button {
+    margin-left: 10px;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.approve{
+    background-color: #28a745; /* Green background for approve button */
+    color: white;
+}
+
+.reject{
+    background-color: #dc3545; /* Red background for reject button */
+    color: white;
+}
+
+.approve:hover {
+    background-color: #218838;
+}
+
+.reject:hover{
+    background-color: #c82333;
+}
+
+.pending-approvals li button:focus {
+    outline: none;
+}
+
+.empty-message-container{
+    display: flex; /* Use flexbox */
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    height: 20vh;
+}
+.empty-message {
+    font-size: 28px; /* Adjust font size */
+    color: #000000; /* Change text color for better visibility */
+    text-align: center; /*Center the message*/
+    margin: 20px 0; /* Add some margin for spacing */
+    font-weight: bold; /* Make the message bold */
+}
+
+form {
+    margin-bottom: 5px;
+}
+
+form input,
+form textarea {
+    width: 100%;
+    padding: 10px;
+    margin: 5px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+form button {
+    padding: 10px 15px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}

server/controllers/approvalController.js

@@ -0,0 +1,61 @@
+const Submission = require("../models/Submission");
+
+// ✅ Get pending submissions for supervisor
+exports.getPendingSubmissions = async (req, res) => {
+  try {
+    const submissions = await Submission.find({ supervisor_status: "pending" });
+    res.json(submissions);
+  } catch (err) {
+    res.status(500).json({ message: "Failed to fetch pending submissions", error: err });
+  }
+};
+
+// ✅ Supervisor Approves
+exports.approveSubmission = async (req, res) => {
+  const { id } = req.params;
+
+  try {
+    const submission = await Submission.findByIdAndUpdate(
+      id,
+      { supervisor_status: "Approved" },
+      { new: true }
+    );
+
+    if (!submission) {
+      return res.status(404).json({ message: "Submission not found" });
+    }
+
+    res.json({
+      message: "Submission approved and forwarded to Coordinator",
+      updatedSubmission: submission
+    });
+
+  } catch (err) {
+    res.status(500).json({ message: "Approval failed", error: err });
+  }
+};
+
+// ❌ Supervisor Rejects
+exports.rejectSubmission = async (req, res) => {
+  const { id } = req.params;
+
+  try {
+    const submission = await Submission.findByIdAndUpdate(
+      id,
+      { supervisor_status: "Rejected" },
+      { new: true }
+    );
+
+    if (!submission) {
+      return res.status(404).json({ message: "Submission not found" });
+    }
+
+    res.json({
+      message: "Submission rejected",
+      updatedSubmission: submission
+    });
+
+  } catch (err) {
+    res.status(500).json({ message: "Rejection failed", error: err });
+  }
+};

server/index.js

@@ -6,10 +6,12 @@ require("dotenv").config();
 
 const emailRoutes = require("./routes/emailRoutes");
 const tokenRoutes = require("./routes/token");
+const approvalRoutes = require("./routes/approvalRoutes");
 
 // Import cron job manager and register jobs
 const cronJobManager = require("./utils/cronUtils");
 const { registerAllJobs } = require("./jobs/registerCronJobs");
+const Evaluation = require("./models/Evaluation");
 
 const app = express();
 app.use(express.json());
@@ -64,6 +66,7 @@ app.get("/api/message", (req, res) => {
 
 app.use("/api/email", emailRoutes);
 app.use("/api/token", tokenRoutes);
+app.use("/api", approvalRoutes);
 
 app.post("/api/createUser", async (req, res) => {
   try {

server/middleware/authMiddleware.js

@@ -0,0 +1,11 @@
+exports.isSupervisor = (req, res, next) => {
+  // const supervisor = Sup.find({$id: username})
+
+
+  req.user = { role: 'supervisor' }; // Mocking user role for demo
+  if (req.user.role === "supervisor") {
+    next();
+  } else {
+    res.status(403).json({ message: "Access denied. Not a supervisor." });
+  }
+};

server/models/Submission.js

@@ -0,0 +1,13 @@
+const mongoose = require("mongoose");
+
+const submissionSchema = new mongoose.Schema({
+  name: { type: String, required: true },
+  student_name: { type: String, required: true },
+  details: { type: String, required: true },
+  supervisor_status: { type: String, default: "pending" },
+  supervisor_comment: { type: String },
+  coordinator_status: { type: String, default: "pending" },
+  coordinator_comment: { type: String },
+}, { timestamps: true });
+
+module.exports = mongoose.model("Submission", submissionSchema);

server/routes/approvalRoutes.js

@@ -0,0 +1,10 @@
+const express = require("express");
+const router = express.Router();
+const { getPendingSubmissions, approveSubmission, rejectSubmission } = require("../controllers/approvalController");
+const { isSupervisor } = require("../middleware/authMiddleware");
+
+router.get("/submissions/pending", isSupervisor, getPendingSubmissions);
+router.post("/submissions/:id/approve", isSupervisor, approveSubmission);
+router.post("/submissions/:id/reject", isSupervisor, rejectSubmission);
+
+module.exports = router;