From 7304efa0694f83c1166392d0b42ee9f7a7c0c28d Mon Sep 17 00:00:00 2001
From: Harshitha Shetty <141444342+HarshithaShetty27@users.noreply.github.com>
Date: Fri, 14 Mar 2025 17:52:21 +0530
Subject: [PATCH] semester-wise sort

---
 client/src/Pages/PanelConsolidated.jsx | 97 +++++++++++++++-----------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/client/src/Pages/PanelConsolidated.jsx b/client/src/Pages/PanelConsolidated.jsx
index a636975..498534f 100644
--- a/client/src/Pages/PanelConsolidated.jsx
+++ b/client/src/Pages/PanelConsolidated.jsx
@@ -26,9 +26,15 @@ const PanelConsolidated = () => {
             });
     }, []);
 
-    const filteredCourses = courses.filter((course) =>
-        course.name.toLowerCase().includes(search.toLowerCase())
-    );
+    const groupedCourses = {};
+    courses.forEach((course) => {
+        if (!groupedCourses[course.semester]) {
+            groupedCourses[course.semester] = [];
+        }
+        groupedCourses[course.semester].push(course);
+    });
+
+    const sortedSemesters = Object.keys(groupedCourses).sort((a, b) => a - b);
 
     const courseFacultyMap = {};
     faculty.forEach((fac) => {
@@ -64,46 +70,55 @@ const PanelConsolidated = () => {
                 />
 
                 <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"
-                                }}
+                    {sortedSemesters.map((semester) => (
+                        <div key={semester}>
+                            <h3
+                                onClick={() => toggleCourse(courses.courseId)}
+                                style={{ marginTop: "20px", fontSize: "20px", color: "#800000" }}
                             >
-                                {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>
-                            )}
+                                Semester {semester}
+                            </h3>
+                            {groupedCourses[semester].filter((course) => course.name.toLowerCase().includes(search.toLowerCase())).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>
             </div>