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) => {
@@ -150,13 +151,58 @@ 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>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  backgroundColor: "#ffffff",
+                  color: "white",
+                  padding: "10px",
+                  borderRadius: "5px",
+                }}
+                onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
+              >
+                <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>
+
+              {expandedTeacher === teacher && (
                 <table
                   border="1"
                   style={{
                     width: "100%",
                     textAlign: "left",
-                  marginBottom: "10px",
+                    marginTop: "20px",
                   }}
                 >
                   <thead>
@@ -202,44 +248,17 @@ const ConsolidatedTable = () => {
                     ))}
                   </tbody>
                 </table>
-
-              <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>
+              )}
             </div>
           );
         })}
       </div>
 
-      {/* pagination controls */}
-      <div style={{textAlign: "center", marginTop:"20px",}}>
+      {/* Pagination controls */}
+      <div style={{ textAlign: "center", marginTop: "20px" }}>
         <button
           onClick={handlePrevPage}
-        disabled= {currentPage ===1}
+          disabled={currentPage === 1}
           style={{
             padding: "10px 15px",
             marginRight: "10px",
@@ -260,8 +279,7 @@ const ConsolidatedTable = () => {
           style={{
             padding: "10px 15px",
             marginLeft: "10px",
-          backgroundColor:
-            currentPage === totalPages ? "#ccc" : "#007bff",
+            backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
             color: "white",
             borderRadius: "5px",
             border: "none",