search bar

client/src/Pages/courseConsolidated.jsx

@@ -6,6 +6,7 @@ import Navbar from "./Navbar";
 
 
 const CourseConsolidated = () => {
+  const [searchQuery, setSearchQuery] = useState(""); // State for the search input
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -34,17 +35,25 @@ const CourseConsolidated = () => {
   }
 
   // Extract unique courses by courseCode
-  const uniqueCourses = [...new Set(data.map((row) => row.courseCode))];
+  const filteredCourses = [...new Set(data.map((row) => row.courseCode))].filter(
+    (courseCode) => {
+      const courseName = data.find((row) => row.courseCode === courseCode)
+        ?.courseName;
+      return (
+        courseName &&
+        courseName.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+  );
   
-  // Pagination
+  const totalPages = Math.ceil(filteredCourses.length / tablesPerPage);
   const indexOfLastTable = currentPage * tablesPerPage;
   const indexOfFirstTable = indexOfLastTable - tablesPerPage;
-  const currentCourses = uniqueCourses.slice(
+  const currentCourses = filteredCourses.slice(
     indexOfFirstTable,
     indexOfLastTable
   );
   
-  const totalPages = Math.ceil(uniqueCourses.length / tablesPerPage);
 
   const handleNextPage = () => {
     if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
@@ -199,6 +208,23 @@ const CourseConsolidated = () => {
         Course Tables with Download Options
       </h1>
 
+        <div style={{ padding: "10px", marginBottom: "20px" }}>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search for a course..."
+            style={{
+              width: "100%",
+              padding: "10px",
+              borderRadius: "5px",
+              border: "1px solid #ccc",
+              fontSize: "16px",
+            }}
+          />
+        </div>
+
+
       <div
         style={{
           maxHeight: "70vh",