filter

client/src/Pages/ConsolidatedTable.jsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+const ConsolidatedTable = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("http://localhost:8080/api/data/consolidated");
+        setData(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching consolidated data:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Consolidated Data</h1>
+      <table border="1" style={{ width: "100%", textAlign: "left" }}>
+        <thead>
+          <tr>
+            <th>Faculty ID</th>
+            <th>Faculty Name</th>
+            <th>Course ID</th>
+            <th>Course Name</th>
+            <th>Task</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((faculty) =>
+            faculty.tasks.map((task, index) => (
+              <tr key={`${faculty.facultyId}-${index}`}>
+                <td>{faculty.facultyId}</td>
+                <td>{faculty.facultyName}</td>
+                <td>{task.courseId}</td>
+                <td>{task.courseName}</td>
+                <td>{task.task}</td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ConsolidatedTable;