UI for consolidated

client/src/Pages/ConsolidatedTable.jsx

@@ -9,6 +9,7 @@ const ConsolidatedTable = () => {
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const tablesPerPage = 5;
+  const [expandedTeacher, setExpandedTeacher] = useState(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -34,19 +35,19 @@ const ConsolidatedTable = () => {
   // Extract unique faculty names
   const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
 
-  //pagination 
+  // Pagination 
   const indexOfLastTable = currentPage * tablesPerPage;
   const indexOfFirstTable = indexOfLastTable - tablesPerPage;
-  const currentTeachers = uniqueTeachers.slice(indexOfFirstTable,indexOfLastTable);
+  const currentTeachers = uniqueTeachers.slice(indexOfFirstTable, indexOfLastTable);
 
-  const totalPages = Math.ceil(uniqueTeachers.length/tablesPerPage);
+  const totalPages = Math.ceil(uniqueTeachers.length / tablesPerPage);
 
-  const handleNextPage = ()=>{
-    if(currentPage < totalPages) setCurrentPage((prevPage)=>prevPage+1);
+  const handleNextPage = () => {
+    if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
   };
 
-  const handlePrevPage = ()=>{
-    if(currentPage > 1) setCurrentPage((prevPage)=>prevPage-1);
+  const handlePrevPage = () => {
+    if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
   };
 
   const createExcelFile = (teacherData, teacherName) => {
@@ -82,7 +83,7 @@ const ConsolidatedTable = () => {
 
       const formData = new FormData();
       formData.append("teacher", teacher);
-      formData.append("fileName", fileName);  
+      formData.append("fileName", fileName);
       formData.append("recipientEmail", facultyEmail);
       formData.append("file", file);
 
@@ -150,104 +151,122 @@ const ConsolidatedTable = () => {
           const teacherData = data.filter((row) => row.Name === teacher);
           return (
             <div key={index} style={{ marginBottom: "20px" }}>
-              <h2 style={{ textAlign: "center" }}>{teacher}'s Table</h2>
-              <table
-                border="1"
+              <div
                 style={{
-                  width: "100%",
-                  textAlign: "left",
-                  marginBottom: "10px",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  backgroundColor: "#ffffff",
+                  color: "white",
+                  padding: "10px",
+                  borderRadius: "5px",
                 }}
+                onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
               >
-                <thead>
-                  <tr>
-                    <th>Semester</th>
-                    <th>Course Code</th>
-                    <th>Course Name</th>
-                    <th>Exam Type</th>
-                    <th>Year</th>
-                    <th>Marks</th>
-                    <th>Name</th>
-                    <th>Affiliation/College</th>
-                    <th>Highest Qualification</th>
-                    <th>Career Experience</th>
-                    <th>Oral/Practical</th>
-                    <th>Assessment</th>
-                    <th>Reassessment</th>
-                    <th>Paper Setting</th>
-                    <th>Moderation</th>
-                    <th>PwD Paper Setting</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {teacherData.map((row, idx) => (
-                    <tr key={idx}>
-                      <td>{row.semester}</td>
-                      <td>{row.courseCode}</td>
-                      <td>{row.courseName}</td>
-                      <td>{row.examType}</td>
-                      <td>{row.year}</td>
-                      <td>{row.marks}</td>
-                      <td>{row.Name}</td>
-                      <td>{row.affiliation}</td>
-                      <td>{row.qualification}</td>
-                      <td>{row.experience}</td>
-                      <td>{row.oralPractical}</td>
-                      <td>{row.assessment}</td>
-                      <td>{row.reassessment}</td>
-                      <td>{row.paperSetting}</td>
-                      <td>{row.moderation}</td>
-                      <td>{row.pwdPaperSetting}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                <h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2>
+                <div>
+                  <button
+                    onClick={() => createExcelFile(teacherData, teacher)}
+                    className="btn btn-primary"
+                    style={{
+                      padding: "10px 15px",
+                      backgroundColor: "#007bff",
+                      color: "black",
+                      textDecoration: "none",
+                      borderRadius: "5px",
+                      marginRight: "10px",
+                    }}
+                  >
+                    Download {teacher}'s Table
+                  </button>
+                  <button
+                    onClick={() => handleSendEmail(teacher, teacherData)}
+                    className="btn btn-secondary"
+                    style={{
+                      padding: "10px 15px",
+                      backgroundColor: "#6c757d",
+                      color: "white",
+                      textDecoration: "none",
+                      borderRadius: "5px",
+                    }}
+                  >
+                    Send {teacher}'s CSV via Email
+                  </button>
+                </div>
+              </div>
 
-              <button
-                onClick={() => createExcelFile(teacherData, teacher)}
-                className="btn btn-primary"
-                style={{
-                  padding: "10px 15px",
-                  backgroundColor: "#007bff",
-                  color: "white",
-                  textDecoration: "none",
-                  borderRadius: "5px",
-                }}
-              >
-                Download {teacher}'s Table
-              </button>
-              {/* Send Email Button */}
-              <button
-                onClick={() => handleSendEmail(teacher, teacherData)}
-                className="btn btn-secondary"
-                style={{
-                  padding: "10px 15px",
-                  backgroundColor: "#6c757d",
-                  color: "white",
-                  textDecoration: "none",
-                  borderRadius: "5px",
-                }}
-              >
-                Send {teacher}'s CSV via Email
-              </button>
+              {expandedTeacher === teacher && (
+                <table
+                  border="1"
+                  style={{
+                    width: "100%",
+                    textAlign: "left",
+                    marginTop: "20px",
+                  }}
+                >
+                  <thead>
+                    <tr>
+                      <th>Semester</th>
+                      <th>Course Code</th>
+                      <th>Course Name</th>
+                      <th>Exam Type</th>
+                      <th>Year</th>
+                      <th>Marks</th>
+                      <th>Name</th>
+                      <th>Affiliation/College</th>
+                      <th>Highest Qualification</th>
+                      <th>Career Experience</th>
+                      <th>Oral/Practical</th>
+                      <th>Assessment</th>
+                      <th>Reassessment</th>
+                      <th>Paper Setting</th>
+                      <th>Moderation</th>
+                      <th>PwD Paper Setting</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {teacherData.map((row, idx) => (
+                      <tr key={idx}>
+                        <td>{row.semester}</td>
+                        <td>{row.courseCode}</td>
+                        <td>{row.courseName}</td>
+                        <td>{row.examType}</td>
+                        <td>{row.year}</td>
+                        <td>{row.marks}</td>
+                        <td>{row.Name}</td>
+                        <td>{row.affiliation}</td>
+                        <td>{row.qualification}</td>
+                        <td>{row.experience}</td>
+                        <td>{row.oralPractical}</td>
+                        <td>{row.assessment}</td>
+                        <td>{row.reassessment}</td>
+                        <td>{row.paperSetting}</td>
+                        <td>{row.moderation}</td>
+                        <td>{row.pwdPaperSetting}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
             </div>
           );
         })}
       </div>
 
-      {/* pagination controls */}
-      <div style={{textAlign: "center", marginTop:"20px",}}>
+      {/* Pagination controls */}
+      <div style={{ textAlign: "center", marginTop: "20px" }}>
         <button
-        onClick={handlePrevPage}
-        disabled= {currentPage ===1}
-        style={{
-          padding: "10px 15px",
-          marginRight: "10px",
-          backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
-          color: "white",
-          borderRadius: "5px",
-          border: "none",
-        }}
+          onClick={handlePrevPage}
+          disabled={currentPage === 1}
+          style={{
+            padding: "10px 15px",
+            marginRight: "10px",
+            backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
+            color: "white",
+            borderRadius: "5px",
+            border: "none",
+          }}
         >
           Previous
         </button>
@@ -255,17 +274,16 @@ const ConsolidatedTable = () => {
           Page {currentPage} of {totalPages}
         </span>
         <button
-        onClick={handleNextPage}
-        disabled={currentPage === totalPages}
-        style={{
-          padding: "10px 15px",
-          marginLeft: "10px",
-          backgroundColor:
-            currentPage === totalPages ? "#ccc" : "#007bff",
-          color: "white",
-          borderRadius: "5px",
-          border: "none",
-        }}
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages}
+          style={{
+            padding: "10px 15px",
+            marginLeft: "10px",
+            backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
+            color: "white",
+            borderRadius: "5px",
+            border: "none",
+          }}
         >
           Next
         </button>