Fixed navbar issue, added panel Consolidated page

client/src/App.js

@@ -15,6 +15,7 @@ import CourseConsolidated from "./Pages/courseConsolidated";
 import PrivateRoute from "./components/PrivateRoute";
 import TokenRefresher from "./components/TokenRefresher";
 import DepartmentConsolidated from "./Pages/DepartmentConsolidated";
+import PanelConsolidated from "./Pages/PanelConsolidated";
 
 function App() {
   return (
@@ -32,6 +33,7 @@ function App() {
         <Route path="/consolidated" element={<PrivateRoute element={<ConsolidatedTable />} />}  />
         <Route path="/courseConsolidated" element={<PrivateRoute element={<CourseConsolidated />} />}  />
         <Route path="/departmentConsolidated" element={<PrivateRoute element={<DepartmentConsolidated />} />}  />
+        <Route path="/panelConsolidated" element={<PrivateRoute element={<PanelConsolidated/>} />}  />
       </Routes>
       </>
   );

client/src/Pages/Accounts.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Container, Col, Row, Button, Spinner, Navbar } from "react-bootstrap";
+import { Container, Col, Row, Button, Spinner } from "react-bootstrap";
 import axios from "axios";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import Navbar from "./Navbar";
 
 function HomePage(props) {
 

client/src/Pages/PanelConsolidated.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Navbar from "./Navbar";
+
+const PanelConsolidated = () => {
+    const [faculty, setFaculty] = useState([]);
+    const [courses, setCourses] = useState([]);
+    const [search, setSearch] = useState("");
+    const [expandedCourse, setExpandedCourse] = useState(null);
+
+    useEffect(() => {
+        axios.get("http://localhost:8080/api/faculty")
+            .then((response) => {
+                setFaculty(response.data);
+            })
+            .catch((error) => {
+                console.error("Error fetching faculty data:", error);
+            });
+
+        axios.get("http://localhost:8080/api/courses")
+            .then((response) => {
+                setCourses(response.data);
+            })
+            .catch((error) => {
+                console.error("Error fetching course data:", error);
+            });
+    }, []);
+
+    const filteredCourses = courses.filter((course) =>
+        course.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const courseFacultyMap = {};
+    faculty.forEach((fac) => {
+        fac.courses.forEach((courseId) => {
+            if (!courseFacultyMap[courseId]) {
+                courseFacultyMap[courseId] = [];
+            }
+            courseFacultyMap[courseId].push({
+                facultyId: fac.facultyId,
+                name: fac.name,
+                department: fac.department,
+                email: fac.email,
+            });
+        });
+    });
+
+    const toggleCourse = (courseId) => {
+        setExpandedCourse(expandedCourse === courseId ? null : courseId);
+    };
+
+    return (
+        <>
+            <Navbar />
+            <div style={{ padding: "24px", backgroundColor: "#f7f7f7", minHeight: "100vh" }}>
+                <h2 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" }}>Faculty Expertise</h2>
+
+                <input
+                    type="text"
+                    placeholder="Search by Course Name"
+                    style={{ marginBottom: "16px", padding: "8px", border: "1px solid #ccc", borderRadius: "4px", width: "100%", maxWidth: "300px" }}
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+
+                <div>
+                    {filteredCourses.map((course) => (
+                        <div key={course.courseId}>
+                            <div
+                                onClick={() => toggleCourse(course.courseId)}
+                                style={{
+                                    cursor: "pointer",
+                                    padding: "12px",
+                                    backgroundColor: "#fff",
+                                    marginBottom: "8px",
+                                    border: "1px solid #ccc",
+                                    borderRadius: "4px",
+                                    fontWeight: "bold"
+                                }}
+                            >
+                                {course.name}
+                            </div>
+                            {expandedCourse === course.courseId && (
+                                <table style={{ width: "100%", borderCollapse: "collapse", backgroundColor: "#fff", border: "1px solid #ccc", marginBottom: "16px" }}>
+                                    <thead>
+                                        <tr style={{ backgroundColor: "#e5e5e5" }}>
+                                            <th style={{ border: "1px solid #ccc", padding: "8px" }}>Faculty ID</th>
+                                            <th style={{ border: "1px solid #ccc", padding: "8px" }}>Name</th>
+                                            <th style={{ border: "1px solid #ccc", padding: "8px" }}>Email</th>
+                                            <th style={{ border: "1px solid #ccc", padding: "8px" }}>Department</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {courseFacultyMap[course.courseId]?.map((faculty, index) => (
+                                            <tr key={index}>
+                                                <td style={{ border: "1px solid #ccc", padding: "8px" }}>{faculty.facultyId}</td>
+                                                <td style={{ border: "1px solid #ccc", padding: "8px" }}>{faculty.name}</td>
+                                                <td style={{ border: "1px solid #ccc", padding: "8px" }}>{faculty.email}</td>
+                                                <td style={{ border: "1px solid #ccc", padding: "8px" }}>{faculty.department}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            )}
+                        </div>
+
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+};
+
+
+export default PanelConsolidated;