Added backend and integration for FilterPage and CourseTable done

client/src/Pages/CourseTable.jsx

@@ -0,0 +1,89 @@
+// import React from "react";
+// import { useNavigate } from "react-router-dom";
+// import "./CourseTable.css";
+
+// const CourseTable = ({courses}) => {
+//   const navigate = useNavigate();
+
+//   const handleRowClick = (course) => {
+//     navigate(`/course-form/${course.id}`, { state: { course } });
+//   };
+
+//   return (
+//     <div className="course-table">
+//       <h1>Courses</h1>
+//       <table border="1">
+//         <thead>
+//           <tr>
+//             <th>Course ID</th>
+//             <th>Course Name</th>
+//             <th>Status</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {courses.map((course) => (
+//             <tr
+//               key={course.id}
+//               onClick={() => handleRowClick(course)}
+//               style={{ cursor: "pointer" }}
+//             >
+//               <td>{course.id}</td>
+//               <td>{course.name}</td>
+//               <td>
+//                 <span className={`status ${course.status.replace(" ", "-")}`}>
+//                   {course.status}
+//                 </span>
+//               </td>
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+// };
+
+// export default CourseTable;
+
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from "react-router-dom";
+import "./CourseTable.css";
+import { fetchCourses } from '../api';
+
+const CourseTable = () => {
+  const { state } = useLocation();
+  const courses = state?.courses;
+  console.log(courses);
+
+  useEffect(() => {
+    if (!courses || courses.length === 0) {
+      alert("No courses available");
+    }
+  }, [courses]);
+
+  if (!courses) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <table className="course-table">
+      <thead>
+        <tr>
+          <th>CourseID</th>
+          <th>Course Name</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {courses.map(course => (
+          <tr key={course.id}>
+            <td>{course.courseId}</td>
+            <td>{course.name}</td>
+            <td>{course.status}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default CourseTable;