Merge branch 'main' of https://github.com/hk151109/appointment_to_examiner

2025-01-27 04:04:31 +05:30
parent 0e0f686c70 81be9c352d
commit 805d866190
6 changed files with 637 additions and 0 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,6 +13,8 @@
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.6.8",
        "bootstrap": "^5.3.3",
+        "jspdf": "^2.5.2",
+        "jspdf-autotable": "^3.8.4",
        "md5": "^2.3.0",
        "mongoose": "^8.3.1",
        "react": "^18.2.0",
@@ -4502,6 +4504,12 @@
      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.14.tgz",
      "integrity": "sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA=="
    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
    "node_modules/@types/range-parser": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
@@ -5443,6 +5451,17 @@
        "node": ">= 4.0.0"
      }
    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.19",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
@@ -5848,6 +5867,15 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/batch": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6051,6 +6079,17 @@
        "node": ">=16.20.1"
      }
    },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/buffer-from": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -6159,6 +6198,31 @@
        }
      ]
    },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
    "node_modules/case-sensitive-paths-webpack-plugin": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -6671,6 +6735,15 @@
        "postcss": "^8.4"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/css-loader": {
      "version": "6.11.0",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -7403,6 +7476,12 @@
        "url": "https://github.com/fb55/domhandler?sponsor=1"
      }
    },
+    "node_modules/dompurify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "optional": true
+    },
    "node_modules/domutils": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -9596,6 +9675,19 @@
        }
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -12592,6 +12684,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.8.4.tgz",
+      "integrity": "sha512-rSffGoBsJYX83iTRv8Ft7FhqfgEL2nLpGAIiqruEQQ3e4r0qdLFbPUB7N9HAle0I3XgpisvyW751VHCqKUVOgQ==",
+      "peerDependencies": {
+        "jspdf": "^2.5.1"
+      }
+    },
+    "node_modules/jspdf/node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -16066,6 +16188,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -16775,6 +16906,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/stackframe": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@@ -17267,6 +17407,15 @@
      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/svgo": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -17515,6 +17664,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -18010,6 +18168,15 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "node_modules/uuid": {
      "version": "8.3.2",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -8,6 +8,8 @@
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.8",
    "bootstrap": "^5.3.3",
+    "jspdf": "^2.5.2",
+    "jspdf-autotable": "^3.8.4",
    "md5": "^2.3.0",
    "mongoose": "^8.3.1",
    "react": "^18.2.0",
--- a/client/public/logo.png
+++ b/client/public/logo.png
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -14,6 +14,7 @@ import "react-toastify/dist/ReactToastify.css";
 import CourseTable from "./Pages/CourseTable";
 import GenerateCSV from "./Pages/GenerateCSV";
 import ConsolidatedTable from "./Pages/ConsolidatedTable";
+import CourseConsolidated from "./Pages/courseConsolidated";

 function App() {
  return (
@@ -30,6 +31,7 @@ function App() {
        <Route path="/Filter" element={<FilterPage />} />
        <Route path="/courses" element={<CourseTable />} />
        <Route path="/consolidated" element={<ConsolidatedTable />} />
+        <Route path="/courseConsolidated" element={<CourseConsolidated />} />
      </Routes>
  );
 }
--- a/client/src/Pages/courseConsolidated.jsx
+++ b/client/src/Pages/courseConsolidated.jsx
@@ -0,0 +1,398 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import * as XLSX from "xlsx-js-style";
+import { jsPDF } from "jspdf";
+import autoTable from "jspdf-autotable";
+
+
+const CourseConsolidated = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const tablesPerPage = 5;
+  const [expandedCourse, setExpandedCourse] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          "http://localhost:8080/api/table/course-consolidated"
+        );
+        setData(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching table data:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  // Extract unique courses by courseCode
+  const uniqueCourses = [...new Set(data.map((row) => row.courseCode))];
+
+  // Pagination
+  const indexOfLastTable = currentPage * tablesPerPage;
+  const indexOfFirstTable = indexOfLastTable - tablesPerPage;
+  const currentCourses = uniqueCourses.slice(
+    indexOfFirstTable,
+    indexOfLastTable
+  );
+
+  const totalPages = Math.ceil(uniqueCourses.length / tablesPerPage);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) setCurrentPage((prevPage) => prevPage - 1);
+  };
+
+  const generateAppointmentPDF = async (courseData, courseName) => {
+    const doc = new jsPDF();
+    const maroon = [128, 0, 0];
+  
+    // College Logo
+    const logoUrl = "/logo.png"; // Ensure the logo is placed in the public folder
+    const logoWidth = 40;
+    const logoHeight = 40;
+    const logoX = 10;
+    const logoY = 10;
+  
+    const loadImage = async (url) => {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(blob);
+      });
+    };
+  
+    try {
+      const logoBase64 = await loadImage(logoUrl);
+      doc.addImage(logoBase64, "PNG", logoX, logoY, logoWidth, logoHeight);
+    } catch (error) {
+      console.error("Failed to load logo:", error);
+    }
+  
+    // Title Section
+    doc.setFont("times", "normal");
+    doc.setTextColor(0, 0, 0);
+    doc.setFontSize(12);
+    doc.text("Date: " + new Date().toLocaleDateString(), 150, 20);
+    doc.setFontSize(14);
+    doc.text("CONFIDENTIAL", 10, 60);
+    doc.setFontSize(16);
+    doc.text(
+      "LETTER OF APPOINTMENT AS QUESTION PAPER SETTER",
+      105,
+      70,
+      { align: "center" }
+    );
+  
+    // Appointment Table
+    const table1Data = [
+      ...(courseData.oralPracticalTeachers?.map((teacher) => [
+        teacher,
+        "K. J. Somaiya School of Engineering",
+        "Oral/Practical Teacher",
+        "Contact Number",
+      ]) || []),
+      ...(courseData.reassessmentTeachers?.map((teacher) => [
+        teacher,
+        "K. J. Somaiya School of Engineering",
+        "Reassessment Teacher",
+        "Contact Number",
+      ]) || []),
+      ...(courseData.paperSettingTeachers?.map((teacher) => [
+        teacher,
+        "K. J. Somaiya School of Engineering",
+        "Paper Setter",
+        "Contact Number",
+      ]) || []),
+      ...(courseData.moderationTeachers?.map((teacher) => [
+        teacher,
+        "K. J. Somaiya School of Engineering",
+        "Moderator",
+        "Contact Number",
+      ]) || []),
+      ...(courseData.pwdPaperSettingTeachers?.map((teacher) => [
+        teacher,
+        "K. J. Somaiya School of Engineering",
+        "PwD Paper Setter",
+        "Contact Number",
+      ]) || []),
+    ];
+  
+    autoTable(doc, {
+      head: [["Name", "Affiliation", "Appointment Role", "Email"]],
+      body: table1Data,
+      startY: 80,
+      theme: "grid",
+      headStyles: { fillColor: maroon, textColor: [255, 255, 255] },
+      styles: { textColor: [0, 0, 0] }, // Keep body text black
+    });
+  
+    // Content Table
+    const detailsTableData = [
+      ["Programme:", courseData.courseName],
+      ["Exam Category:", "Regular Examination"],
+      ["Exam Type:", courseData.examType],
+      ["Exam Season:", "Second Half - Winter Examination 2023"],
+      ["Number of Sets Required:", courseData.paperSettingTeachers.length],
+      ["Year:", courseData.year],
+      ["Semester:", courseData.semester],
+      ["Course Name:", courseName],
+      ["Course Code:", courseData.courseCode],
+    ];
+  
+    autoTable(doc, {
+      body: detailsTableData,
+      startY: doc.previousAutoTable.finalY + 10,
+      theme: "plain", // Plain table style
+      styles: { textColor: [0, 0, 0] },
+    });
+  
+    // Footer Section
+    const footerY = doc.previousAutoTable.finalY + 10; // Dynamic Y-coordinate
+    doc.setFontSize(12);
+    doc.text("Dr. S. K. Ukarande", 10, footerY);
+    doc.text("Principal", 10, footerY + 5);
+    doc.text("K. J. Somaiya School of Engineering", 10, footerY + 10);
+  
+    // Footer Contact Details
+    const footerContactY = footerY + 20;
+    doc.setFontSize(10);
+    doc.text(
+      "Somaiya Vidyavihar, Vidyavihar (East), Mumbai-400 022, India",
+      10,
+      footerContactY
+    );
+    doc.text("Telephone: (91-22) 44444400, 44444404", 10, footerContactY + 5);
+    doc.text("Email: principal.tech@somaiya.edu", 10, footerContactY + 10);
+    doc.text("Web: www.somaiya.edu/kjsieit", 10, footerContactY + 15);
+  
+    // Save PDF
+    doc.save(`${courseName} - AppointmentOrder.pdf`);
+  };
+  
+
+  return (
+    <div>
+      <h1 style={{ textAlign: "center" }}>
+        Course Tables with Download Options
+      </h1>
+
+      <div
+        style={{
+          maxHeight: "70vh",
+          overflowY: "auto",
+          border: "1px solid #ccc",
+          padding: "10px",
+          borderRadius: "5px",
+          backgroundColor: "#f9f9f9",
+        }}
+      >
+        {currentCourses.map((courseCode, index) => {
+          const courseData = data.filter(
+            (row) => row.courseCode === courseCode
+          );
+          const courseName = courseData[0]?.courseName; // Get course name from first item
+          return (
+            <div key={index} style={{ marginBottom: "20px" }}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  backgroundColor: "#ffffff",
+                  color: "black",
+                  padding: "10px",
+                  borderRadius: "5px",
+                }}
+                onClick={() =>
+                  setExpandedCourse(
+                    expandedCourse === courseCode ? null : courseCode
+                  )
+                }
+              >
+                <h2 style={{ margin: 0 }}>{courseName}'s Table</h2>
+                <button
+                  onClick={() => generateAppointmentPDF(courseData[0], courseName)}
+                  className="btn btn-primary"
+                  style={{
+                    padding: "10px 15px",
+                    backgroundColor: "#007bff",
+                    color: "white",
+                    textDecoration: "none",
+                    borderRadius: "5px",
+                  }}
+                >
+                  Download {courseName}'s Appointment Order
+                </button>
+              </div>
+
+              {expandedCourse === courseCode && (
+                <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>Oral/Practical</th>
+                      <th>Assessment</th>
+                      <th>Reassessment</th>
+                      <th>Paper Setting</th>
+                      <th>Moderation</th>
+                      <th>PwD Paper Setting</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {courseData.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.oralPracticalTeachers &&
+                            row.oralPracticalTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.oralPracticalTeachers.map((teacher, idx) => (
+                                <li key={idx}>{teacher}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                        <td>
+                          {row.assesmentTeachers &&
+                            row.assesmentTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.assesmentTeachers.map((teacher, idx) => (
+                                <li key={idx}>{teacher}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                        <td>
+                          {row.reassessmentTeachers &&
+                            row.reassessmentTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.reassessmentTeachers.map((teacher, idx) => (
+                                <li key={idx}>{teacher}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                        <td>
+                          {row.paperSettingTeachers &&
+                            row.paperSettingTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.paperSettingTeachers.map((teacher, idx) => (
+                                <li key={idx}>{teacher}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                        <td>
+                          {row.moderationTeachers &&
+                            row.moderationTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.moderationTeachers.map((teacher, idx) => (
+                                <li key={idx}>{teacher}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                        <td>
+                          {row.pwdPaperSettingTeachers &&
+                            row.pwdPaperSettingTeachers.length > 0 ? (
+                            <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                              {row.pwdPaperSettingTeachers.map(
+                                (teacher, idx) => (
+                                  <li key={idx}>{teacher}</li>
+                                )
+                              )}
+                            </ul>
+                          ) : (
+                            "N/A"
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 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",
+          }}
+        >
+          Previous
+        </button>
+        <span>
+          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",
+          }}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CourseConsolidated;