From ca7e83749d50babd57c9a4589a7fd083021548b9 Mon Sep 17 00:00:00 2001
From: Vikrant Kumar <vikrantkrd@gmail.com>
Date: Mon, 5 Oct 2026 17:24:57 +0530
Subject: [PATCH] Add an academic-year grade sheet generator for acad admin

Lets acad admin generate the official multi-semester grade sheet PDF
for a batch of students, matching the layout of the existing
semester-wise Grade Sheet Software but grouped by academic year.
Pages pack semesters continuously (not fixed to one academic year
per page) and the shared grading legend only prints once, on the
final page.
---
 .../Examination/components/gradeSheetList.jsx | 134 ++++++++
 .../Examination/components/gradeSheetPdf.js   | 238 ++++++++++++++
 .../components/gradeSheetTemplate.js          | 297 ++++++++++++++++++
 src/Modules/Examination/examination.jsx       |   1 +
 src/Modules/Examination/gradeSheet.jsx        | 168 ++++++++++
 src/Modules/Examination/pages.js              |   8 +
 .../Examination/routes/examinationRoutes.jsx  |   2 +
 vite.config.js                                |   2 +-
 8 files changed, 849 insertions(+), 1 deletion(-)
 create mode 100644 src/Modules/Examination/components/gradeSheetList.jsx
 create mode 100644 src/Modules/Examination/components/gradeSheetPdf.js
 create mode 100644 src/Modules/Examination/components/gradeSheetTemplate.js
 create mode 100644 src/Modules/Examination/gradeSheet.jsx

diff --git a/src/Modules/Examination/components/gradeSheetList.jsx b/src/Modules/Examination/components/gradeSheetList.jsx
new file mode 100644
index 000000000..b3acdb901
--- /dev/null
+++ b/src/Modules/Examination/components/gradeSheetList.jsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Table, Button, Group, Modal, Alert } from "@mantine/core";
+import { IconEye, IconDownload, IconAlertTriangle } from "@tabler/icons-react";
+import axios from "axios";
+import { generate_full_gradesheet_data } from "../routes/examinationRoutes";
+import { buildFullGradeSheetHTML } from "./gradeSheetTemplate";
+import { saveGradeSheetPDF } from "./gradeSheetPdf";
+import styles from "../styles/transcript.module.css";
+
+export default function GradeSheetList({ students }) {
+  const [busy, setBusy] = useState({});
+  const [error, setError] = useState(null);
+  const [preview, setPreview] = useState({ open: false, html: "", title: "" });
+
+  const setRowBusy = (roll, v) => setBusy((p) => ({ ...p, [roll]: v }));
+
+  const fetchFullGradeSheetHtml = async (rollNo) => {
+    const token = localStorage.getItem("authToken");
+    const { data } = await axios.post(
+      generate_full_gradesheet_data,
+      { student: rollNo },
+      { headers: { Authorization: `Token ${token}` } },
+    );
+    if (!data.semesters || data.semesters.length === 0) {
+      throw new Error("No graded semesters found for this student.");
+    }
+    return buildFullGradeSheetHTML(data.student_info, data.semesters);
+  };
+
+  const handlePreview = async (student) => {
+    setRowBusy(student.id_id, "preview");
+    setError(null);
+    try {
+      const html = await fetchFullGradeSheetHtml(student.id_id);
+      setPreview({ open: true, html, title: `Grade Sheet — ${student.id_id}` });
+    } catch (err) {
+      setError(err.message || "Failed to load grade sheet.");
+    } finally {
+      setRowBusy(student.id_id, null);
+    }
+  };
+
+  const handleDownload = async (student) => {
+    setRowBusy(student.id_id, "download");
+    setError(null);
+    try {
+      const html = await fetchFullGradeSheetHtml(student.id_id);
+      await saveGradeSheetPDF(html, `GradeSheet_${student.id_id}.pdf`);
+    } catch (err) {
+      setError(err.message || "Failed to download grade sheet.");
+    } finally {
+      setRowBusy(student.id_id, null);
+    }
+  };
+
+  return (
+    <div className={styles["transcript-container"]}>
+      {error && (
+        <Alert
+          color="red"
+          icon={<IconAlertTriangle size={16} />}
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+      {students.length > 0 ? (
+        <Table
+          striped
+          highlightOnHover
+          captionSide="top"
+          mt="md"
+          className={styles["transcript-table"]}
+        >
+          <thead>
+            <tr>
+              <th>Roll Number</th>
+              <th>Programme</th>
+              <th style={{ textAlign: "center" }}>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {students.map((student) => (
+              <tr key={student.id_id} className={styles["table-row"]}>
+                <td className={styles["table-cell"]}>{student.id_id}</td>
+                <td className={styles["table-cell"]}>{student.programme}</td>
+                <td style={{ textAlign: "center" }}>
+                  <Group gap="xs" justify="center">
+                    <Button
+                      size="xs"
+                      color="blue"
+                      leftSection={<IconEye size={14} />}
+                      onClick={() => handlePreview(student)}
+                      loading={busy[student.id_id] === "preview"}
+                    >
+                      Preview
+                    </Button>
+                    <Button
+                      size="xs"
+                      color="teal"
+                      variant="outline"
+                      leftSection={<IconDownload size={14} />}
+                      onClick={() => handleDownload(student)}
+                      loading={busy[student.id_id] === "download"}
+                    >
+                      Download
+                    </Button>
+                  </Group>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      ) : (
+        <div className="no-data">No students found for this batch.</div>
+      )}
+
+      <Modal
+        opened={preview.open}
+        onClose={() => setPreview((p) => ({ ...p, open: false }))}
+        title={preview.title}
+        size="90%"
+      >
+        <iframe
+          title="Grade sheet preview"
+          srcDoc={preview.html}
+          style={{ width: "100%", height: "80vh", border: "1px solid #ddd" }}
+        />
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/Modules/Examination/components/gradeSheetPdf.js b/src/Modules/Examination/components/gradeSheetPdf.js
new file mode 100644
index 000000000..36a8fd048
--- /dev/null
+++ b/src/Modules/Examination/components/gradeSheetPdf.js
@@ -0,0 +1,238 @@
+import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
+
+const PDF_MARGIN = { top: 75, left: 23, right: 23, bottom: 25 };
+const PAGE_W_MM = 210;
+const PAGE_H_MM = 297;
+const CONTENT_W_MM = PAGE_W_MM - PDF_MARGIN.left - PDF_MARGIN.right;
+const CONTENT_H_MM = PAGE_H_MM - PDF_MARGIN.top - PDF_MARGIN.bottom;
+const CONTENT_W_PX = Math.round(CONTENT_W_MM * (96 / 25.4));
+const CONTENT_H_PX = Math.round(CONTENT_H_MM * (96 / 25.4));
+
+export async function saveGradeSheetPDF(html, filename) {
+  const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" });
+  let firstPage = true;
+
+  const cleanHTML = html
+    .replace(/@page\b[^{]*\{[^}]*\}/g, "")
+    .replace(/@media\s+print\s*\{[\s\S]*?\}/g, "")
+    .replace(/(:\s*)hidden\b/g, "$1none")
+    .replace(
+      /border-collapse\s*:\s*collapse/g,
+      "border-collapse:separate;border-spacing:0",
+    )
+    .replace(
+      /<\/style>/i,
+      `
+  body { background: #fff !important; }
+</style>`,
+    );
+
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText =
+    `position:fixed;top:-99999px;left:-99999px;` +
+    `width:${CONTENT_W_PX}px;height:10px;border:none;visibility:hidden;`;
+  document.body.appendChild(iframe);
+
+  try {
+    const iDoc = iframe.contentDocument;
+    iDoc.open();
+    iDoc.write(cleanHTML);
+    iDoc.close();
+
+    await new Promise((r) => setTimeout(r, 250));
+    iDoc.body.style.cssText = `margin:0;padding:0;width:${CONTENT_W_PX}px;background:#fff;`;
+    iframe.style.height = `${iDoc.body.scrollHeight}px`;
+    await new Promise((r) => setTimeout(r, 100));
+
+    const shedOverflowingPages = (pageDivs) => {
+      for (let i = 0; i < pageDivs.length; i += 1) {
+        const pageDiv = pageDivs[i];
+        let nextPage = null;
+
+        while (pageDiv.scrollHeight > CONTENT_H_PX) {
+          const semBlocks = Array.from(
+            pageDiv.querySelectorAll(":scope > .sem-block"),
+          );
+          if (semBlocks.length < 2) break;
+
+          if (!nextPage) {
+            const legendBlock = pageDiv.querySelector(":scope > .legend-block");
+            const footerBlock = pageDiv.querySelector(":scope > .footer-block");
+            nextPage = iDoc.createElement("div");
+            nextPage.className = "gs-page";
+            pageDiv.parentNode.insertBefore(nextPage, pageDiv.nextSibling);
+            pageDivs.splice(i + 1, 0, nextPage);
+            if (legendBlock) nextPage.appendChild(legendBlock);
+            if (footerBlock) nextPage.appendChild(footerBlock.cloneNode(true));
+          }
+
+          const lastBlock = semBlocks[semBlocks.length - 1];
+          const gapBox = lastBlock.previousElementSibling;
+          const isGap = gapBox && gapBox.classList.contains("sem-gap");
+          const hadSemBlock = !!nextPage.querySelector(":scope > .sem-block");
+
+          nextPage.insertBefore(lastBlock, nextPage.firstChild);
+          if (isGap) {
+            if (hadSemBlock)
+              nextPage.insertBefore(gapBox, lastBlock.nextSibling);
+            else gapBox.remove();
+          }
+        }
+      }
+      return pageDivs;
+    };
+
+    const hideHeaderRows = (block) => {
+      const ir1 = block.querySelector(".ir1");
+      const ir2 = block.querySelector(".ir2");
+      if (ir1) ir1.style.display = "none";
+      if (ir2) ir2.style.display = "none";
+    };
+    const showHeaderRows = (block) => {
+      const ir1 = block.querySelector(".ir1");
+      const ir2 = block.querySelector(".ir2");
+      if (ir1) ir1.style.display = "";
+      if (ir2) ir2.style.display = "";
+    };
+
+    const allSemBlocks = Array.from(iDoc.querySelectorAll(".sem-block"));
+    allSemBlocks.slice(1).forEach(hideHeaderRows);
+
+    let pageDivs = Array.from(iDoc.querySelectorAll(".gs-page"));
+    pageDivs = shedOverflowingPages(pageDivs);
+
+    pageDivs.slice(1).forEach((pageDiv) => {
+      const firstBlock = pageDiv.querySelector(":scope > .sem-block");
+      if (firstBlock) showHeaderRows(firstBlock);
+    });
+    pageDivs = shedOverflowingPages(pageDivs);
+
+    const completionRows = Array.from(iDoc.querySelectorAll(".completion-row"));
+    const completionText =
+      completionRows[0]?.querySelector("td")?.textContent || "";
+    completionRows.forEach((row) => row.remove());
+
+    pageDivs = Array.from(iDoc.querySelectorAll(".gs-page"));
+    const lastPageDiv = pageDivs[pageDivs.length - 1];
+    const lastLegendTable = lastPageDiv?.querySelector("#legend-table");
+    if (completionText && lastLegendTable) {
+      const tr = iDoc.createElement("tr");
+      const td = iDoc.createElement("td");
+      td.colSpan = 2;
+      td.style.cssText =
+        "font-size:9pt;text-align:center;font-weight:bold;padding:4pt 5pt";
+      td.textContent = completionText;
+      tr.appendChild(td);
+      lastLegendTable.appendChild(tr);
+    }
+
+    pageDivs.forEach((p, idx) => {
+      const pnDiv = p.querySelector(".page-number");
+      if (pnDiv) pnDiv.textContent = `Page ${idx + 1} of ${pageDivs.length}`;
+    });
+
+    pageDivs.forEach((p) => {
+      const footerBlock = p.querySelector(":scope > .footer-block");
+      const signatureTable = footerBlock?.querySelector("table");
+      if (!signatureTable) return;
+      const remaining = CONTENT_H_PX - p.scrollHeight;
+      if (remaining > 0) {
+        const spacer = iDoc.createElement("div");
+        spacer.style.height = `${remaining}px`;
+        signatureTable.parentNode.insertBefore(spacer, signatureTable);
+      }
+    });
+
+    iframe.style.height = `${iDoc.body.scrollHeight}px`;
+    await new Promise((r) => setTimeout(r, 100));
+
+    const BORDER = "1px solid #000";
+    const NONE = "none";
+    const tables = [
+      { sel: "#info-table", type: "box" },
+      { sel: "#course-table", type: "box+header" },
+      { sel: "#spi-table", type: "grid" },
+      { sel: "#gp-table", type: "box+col" },
+      { sel: "#abbr-table", type: "box+col" },
+      { sel: "#ss-table", type: "box+col" },
+      { sel: "#legend-table", type: "box+rows" },
+    ];
+
+    tables.forEach(({ sel, type }) => {
+      const tbls = Array.from(iDoc.querySelectorAll(sel));
+      tbls.forEach((tbl) => {
+        const rows = Array.from(tbl.rows);
+        const lastRowIdx = rows.length - 1;
+
+        rows.forEach((row, rIdx) => {
+          const isFirstRow = rIdx === 0;
+          const isLastRow = rIdx === lastRowIdx;
+          const cells = Array.from(row.cells);
+          const lastColIdx = cells.length - 1;
+
+          cells.forEach((cell, cIdx) => {
+            const normStyle = (cell.getAttribute("style") || "").replace(
+              /\s/g,
+              "",
+            );
+            if (normStyle.includes("border:none")) {
+              cell.style.border = "none";
+              return;
+            }
+            const origHideLeft = normStyle.includes("border-left:none");
+            const isFirstCol = cIdx === 0;
+            const isLastCol = cIdx === lastColIdx;
+
+            let bottomDivider = NONE;
+            let leftDivider = NONE;
+            if (type === "grid") {
+              bottomDivider = isLastRow ? NONE : BORDER;
+              leftDivider = isFirstCol || origHideLeft ? NONE : BORDER;
+            } else if (type === "box+header") {
+              bottomDivider = isFirstRow && !isLastRow ? BORDER : NONE;
+            } else if (type === "box+rows") {
+              bottomDivider = isLastRow ? NONE : BORDER;
+            } else if (type === "box+col") {
+              leftDivider = isFirstCol ? NONE : BORDER;
+            }
+
+            cell.style.borderTop = isFirstRow ? BORDER : NONE;
+            cell.style.borderBottom = isLastRow ? BORDER : bottomDivider;
+            cell.style.borderLeft = isFirstCol ? BORDER : leftDivider;
+            cell.style.borderRight = isLastCol ? BORDER : NONE;
+          });
+        });
+      });
+    });
+
+    const pageNodes = Array.from(iDoc.querySelectorAll(".gs-page"));
+    const nodesToRender = pageNodes.length > 0 ? pageNodes : [iDoc.body];
+
+    for (const node of nodesToRender) {
+      const canvas = await html2canvas(node, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: "#ffffff",
+        width: CONTENT_W_PX,
+        windowWidth: CONTENT_W_PX,
+      });
+      const imgData = canvas.toDataURL("image/png");
+      const imgH = (canvas.height / canvas.width) * CONTENT_W_MM;
+      if (!firstPage) pdf.addPage();
+      pdf.addImage(
+        imgData,
+        "PNG",
+        PDF_MARGIN.left,
+        PDF_MARGIN.top,
+        CONTENT_W_MM,
+        imgH,
+      );
+      firstPage = false;
+    }
+  } finally {
+    if (document.body.contains(iframe)) document.body.removeChild(iframe);
+  }
+
+  pdf.save(filename);
+}
diff --git a/src/Modules/Examination/components/gradeSheetTemplate.js b/src/Modules/Examination/components/gradeSheetTemplate.js
new file mode 100644
index 000000000..e428bc544
--- /dev/null
+++ b/src/Modules/Examination/components/gradeSheetTemplate.js
@@ -0,0 +1,297 @@
+const esc = (s) =>
+  String(s ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+
+function toRoman(n) {
+  if (!n || n <= 0 || !Number.isFinite(n)) return String(n ?? "");
+  const vals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+  const syms = [
+    "M",
+    "CM",
+    "D",
+    "CD",
+    "C",
+    "XC",
+    "L",
+    "XL",
+    "X",
+    "IX",
+    "V",
+    "IV",
+    "I",
+  ];
+  let r = "";
+  let num = n;
+  for (let i = 0; i < vals.length; i++) {
+    while (num >= vals[i]) {
+      r += syms[i];
+      num -= vals[i];
+    }
+  }
+  return r;
+}
+
+function semesterLabel(sem) {
+  if (sem.is_summer) {
+    const summerNo = Math.floor((sem.semester_no || 0) / 2);
+    return summerNo > 0 ? `Summer ${toRoman(summerNo)}` : "Summer";
+  }
+  return toRoman(sem.semester_no);
+}
+
+function specialSymbolFor(remark) {
+  if (remark === "Substitute") return "S";
+  if (remark === "Backlog" || remark === "Improvement") return "R";
+  return "";
+}
+
+const GRADE_SHEET_CSS = `
+  :root { --fs: 9pt; --fs-sm: 8.5pt; --fs-xs: 8pt; }
+  @page { size: A4; margin-top: 7.5cm; margin-left: 2.3cm; margin-right: 2.3cm; margin-bottom: 2.5cm; }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: "Arial MT", "ArialMT", Arial, Helvetica, sans-serif; font-size: var(--fs); color: #000; line-height: 1.0; }
+  .lbl, th, b, strong { font-family: Arial, "Arial MT", Helvetica, sans-serif; }
+  table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+  td, th { border: 1pt solid #000; padding: 0.6pt 3pt; font-size: var(--fs); vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word; }
+  th { font-weight: bold; text-align: center; }
+  .lbl { font-weight: bold; }
+
+  #info-table col.i1 { width: 2.7cm; } #info-table col.i2 { width: 4.3cm; }
+  #info-table col.i3 { width: 2.9cm; } #info-table col.i4 { width: 6.5cm; }
+  #info-table td { vertical-align: top; padding: 1.3pt 5pt; line-height: 1.1; font-size: var(--fs); text-transform: uppercase; }
+  #info-table .lbl { white-space: nowrap; }
+  #info-table .ir1 td { border-bottom: hidden; }
+  #info-table .ir2 td { border-top: hidden; border-bottom: hidden; }
+
+  #course-table col.k1 { width: 13%; } #course-table col.k2 { width: 56%; }
+  #course-table col.k3 { width: 12%; } #course-table col.k4 { width: 9%; } #course-table col.k5 { width: 10%; }
+  #course-table tr:first-child th { border-top: none; }
+  #course-table td { padding: 1.5pt 3pt; }
+
+  #spi-table td { font-size: var(--fs-sm); padding: 1pt 4pt; white-space: nowrap; text-align: center; }
+
+  #gp-table col.gp1 { width: 15%; } #gp-table col.gp2 { width: 85%; }
+  #gp-table td { font-size: var(--fs-xs); line-height: 1.2; padding: 1.5pt 5pt; vertical-align: top; }
+  #gp-table .lbl { font-size: var(--fs-xs); vertical-align: middle; }
+
+  #abbr-table col.ab1 { width: 15%; } #abbr-table col.ab2 { width: 85%; }
+  #abbr-table td { font-size: var(--fs-xs); line-height: 1.2; padding: 1.5pt 5pt; vertical-align: top; }
+  #abbr-table .lbl { font-size: var(--fs-xs); vertical-align: middle; }
+
+  #ss-table col.ss1 { width: 15%; } #ss-table col.ss2 { width: 85%; }
+  #ss-table td { font-size: var(--fs-xs); line-height: 1.2; padding: 1.5pt 5pt; vertical-align: top; }
+  #ss-table .lbl { font-size: var(--fs-xs); vertical-align: middle; }
+
+  #legend-table tr:first-child td { border-top: none; }
+  #legend-table td { font-size: var(--fs-xs); line-height: 1.2; padding: 1.5pt 5pt; vertical-align: top; }
+
+  .gs-page { break-after: page; page-break-after: always; padding-top: 0; }
+  .gs-page:last-child { break-after: auto; page-break-after: auto; }
+
+  @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
+`;
+
+export function buildFullGradeSheetHTML(studentInfo, semesters) {
+  const isBachelor =
+    (studentInfo.programme || "").toLowerCase().includes("bachelor") ||
+    /^b\.(tech|des)/i.test(studentInfo.programme || "");
+  const minCpi = isBachelor ? "5.0" : "6.5";
+  const creditThreshold = isBachelor ? 148 : 48;
+
+  const pages = [semesters];
+
+  const lastSem = semesters[semesters.length - 1];
+  const graduated =
+    !!lastSem && (lastSem.total_credits || 0) >= creditThreshold;
+  const completionText = `Student has ${graduated ? "" : "not "}successfully completed the programme.`;
+
+  const courseRowsFor = (courses) =>
+    courses
+      .map((c, idx) => {
+        const topHide = idx > 0 ? "border-top:hidden;" : "";
+        const symbol = specialSymbolFor(c.remark);
+        return `
+    <tr>
+      <td style="text-align:center;vertical-align:middle;border-right:hidden;${topHide}">${esc(c.code || "")}</td>
+      <td style="vertical-align:middle;border-left:hidden;border-right:hidden;${topHide}">${esc(c.name)}</td>
+      <td style="text-align:center;vertical-align:middle;border-left:hidden;border-right:hidden;${topHide}">${esc(c.credits)}</td>
+      <td style="text-align:center;vertical-align:middle;border-left:hidden;border-right:hidden;${topHide}">${esc(c.grade)}</td>
+      <td style="text-align:center;vertical-align:middle;border-left:hidden;${topHide}">${esc(symbol)}</td>
+    </tr>`;
+      })
+      .join("");
+
+  const semesterBlockHTML = (sem) => {
+    const label = semesterLabel(sem);
+    const isSpecialCourse = (c) => {
+      const g = String(c.grade ?? "").trim();
+      return g !== "" && !Number.isNaN(Number(g));
+    };
+    const hasSpecialCourses = sem.courses.some(isSpecialCourse);
+    const specialCourseCodes = sem.courses
+      .filter(isSpecialCourse)
+      .map((c) => c.code)
+      .join(", ");
+    return `
+<table id="info-table">
+<colgroup><col class="i1"><col class="i2"><col class="i3"><col class="i4"></colgroup>
+<tr class="ir1">
+  <td class="lbl" style="border-right:none">Roll No.</td>
+  <td style="border-left:none;border-right:none">${esc(studentInfo.roll_no)}</td>
+  <td class="lbl" style="border-left:none;border-right:none">Programme</td>
+  <td style="border-left:none">${esc(studentInfo.programme)}</td>
+</tr>
+<tr class="ir2">
+  <td class="lbl" style="border-right:none">Student Name</td>
+  <td style="border-left:none;border-right:none">${esc(studentInfo.name)}</td>
+  <td class="lbl" style="border-left:none;border-right:none">Discipline</td>
+  <td style="border-left:none">${esc(studentInfo.discipline)}</td>
+</tr>
+<tr class="ir3">
+  <td class="lbl" style="border-right:none">Semester</td>
+  <td style="border-left:none;border-right:none">${esc(label)}</td>
+  <td class="lbl" style="border-left:none;border-right:none;font-weight:bold">Academic Year</td>
+  <td style="border-left:none;font-weight:bold">${esc(sem.academic_year)}</td>
+</tr>
+</table>
+
+<table id="course-table">
+<colgroup><col class="k1"><col class="k2"><col class="k3"><col class="k4"><col class="k5"></colgroup>
+<tr>
+  <th style="border-right:hidden">Course No.</th>
+  <th style="text-align:left;border-left:hidden;border-right:hidden">Course Title</th>
+  <th style="border-left:hidden;border-right:hidden">Unit</th>
+  <th style="border-left:hidden;border-right:hidden">Grade</th>
+  <th style="border-left:hidden">Special<br>Symbols</th>
+</tr>
+${courseRowsFor(sem.courses)}
+</table>
+
+<table id="spi-table">
+<colgroup><col style="width:20%"><col style="width:40%"><col style="width:40%"></colgroup>
+<tr>
+  <td class="lbl" style="text-align:center;border-right:hidden">Result</td>
+  <td style="text-align:center;font-size:var(--fs-sm);border-left:hidden;border-right:hidden">SPI &nbsp;&nbsp; ${Number(sem.spi || 0).toFixed(1)}</td>
+  <td style="text-align:center;font-size:var(--fs-sm);border-left:hidden">CPI &nbsp;&nbsp; ${Number(sem.cpi || 0).toFixed(1)}</td>
+</tr>
+</table>
+${hasSpecialCourses ? `<div style="font-size:8pt;margin-top:3pt">*In ${esc(specialCourseCodes)} student is awarded SPI based on performance in various evaluation in place of grade.</div>` : ""}
+`;
+  };
+
+  const legendBlockHTML = () => `
+<div class="legend-block">
+<table id="gp-table">
+<colgroup><col class="gp1"><col class="gp2"></colgroup>
+<tr>
+  <td class="lbl" style="vertical-align:middle">Grading<br>Points</td>
+  <td>
+    <table style="width:100%;border-collapse:collapse;table-layout:fixed">
+      <colgroup><col style="width:20%"><col style="width:20%"><col style="width:20%"><col style="width:20%"><col style="width:20%"></colgroup>
+      <tr>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">O=10 (Distinguished)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">A+=10 (Outstanding)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">A=9 (Excellent)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">B+=8 (Very Good)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">B=7 (Good)</td>
+      </tr>
+      <tr>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">C+=6 (Average)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">C=5 (Below Average)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">D+=4 (Marginal)</td>
+        <td style="border:none;padding:0 0 1pt 0;font-size:var(--fs-xs)">D=3 (Poor)</td>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)">F=2 (Very Poor)</td>
+      </tr>
+      <tr>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)">I=0 (Incomplete)</td>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)">S=0 (Satisfactory)</td>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)">X=0 (Unsatisfactory)</td>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)"></td>
+        <td style="border:none;padding:0;font-size:var(--fs-xs)"></td>
+      </tr>
+    </table>
+  </td>
+</tr>
+</table>
+
+<table id="abbr-table">
+<colgroup><col class="ab1"><col class="ab2"></colgroup>
+<tr>
+  <td class="lbl" style="vertical-align:middle">Abbreviations</td>
+  <td style="padding:3pt 5pt">
+    <b>SPI</b>: Semester Performance Index<br>
+    <b>CPI</b>: Cumulative Performance Index<br>
+    <b>AU</b>: Indicates that the course has been Audited<br>
+    <b>CD</b>: Indicates that the course has been Dropped due to a shortage of attendance
+  </td>
+</tr>
+</table>
+
+<table id="ss-table">
+<colgroup><col class="ss1"><col class="ss2"></colgroup>
+<tr>
+  <td class="lbl" style="vertical-align:middle">Special<br>Symbols</td>
+  <td style="padding:3pt 5pt">
+    <b>&#8216;R&#8217;</b> after letter grade indicates that the course has been Repeated<br>
+    <b>&#8216;S&#8217;</b> after letter grade indicates that the course has been Substituted
+  </td>
+</tr>
+</table>
+
+<table id="legend-table" style="table-layout:auto;width:100%">
+<tr>
+  <td style="font-size:8pt;padding:3pt 5pt;white-space:nowrap;width:auto;text-align:center;border-right:hidden">&#8226;&nbsp;Medium of instruction is English</td>
+  <td style="font-size:8pt;padding:3pt 5pt;white-space:nowrap;width:auto;text-align:center;border-left:hidden">&#8226;&nbsp;Conversion from CPI to Percentage using (CPI&#215;10) % formula</td>
+</tr>
+<tr>
+  <td style="font-size:8pt;text-align:center;font-weight:bold;border-right:hidden">Minimum Graduating CPI: ${minCpi}</td>
+  <td style="font-size:8pt;text-align:center;font-weight:bold;border-left:hidden">Maximum Graduating CPI: 10.0</td>
+</tr>
+<tr class="completion-row">
+  <td colspan="2" style="font-size:9pt;text-align:center;font-weight:bold;padding:4pt 5pt">${esc(completionText)}</td>
+</tr>
+</table>
+</div>`;
+
+  const footerBlockHTML = (pageIdx, pageCount) => `
+<div class="footer-block">
+<table style="width:100%;border-collapse:collapse;table-layout:fixed;margin-top:50pt">
+<tr>
+  <td style="border:none;font-size:9pt;text-align:left;width:33%">Academic Office</td>
+  <td style="border:none;font-size:9pt;text-align:center;width:34%">Issued on ${new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</td>
+  <td style="border:none;font-size:9pt;text-align:right;width:33%">Assistant/Deputy Registrar</td>
+</tr>
+</table>
+<div class="page-number" style="text-align:center;font-size:9pt;margin-top:calc(1.5cm - 12px)">Page ${pageIdx + 1} of ${pageCount}</div>
+</div>`;
+
+  const semesterGapHTML = `
+<table class="sem-gap" style="width:100%;border-collapse:collapse;table-layout:fixed">
+<tr><td style="border-left:1pt solid #000;border-right:1pt solid #000;border-top:none;border-bottom:none;height:12pt;padding:0">&nbsp;</td></tr>
+</table>`;
+
+  const pageHTML = (page, pageIdx) => {
+    const isLastPage = pageIdx === pages.length - 1;
+    const blocks = page
+      .map((sem) => `<div class="sem-block">${semesterBlockHTML(sem)}</div>`)
+      .join(semesterGapHTML);
+    return `<div class="gs-page">
+${blocks}
+${isLastPage ? legendBlockHTML() : ""}
+${footerBlockHTML(pageIdx, pages.length)}
+</div>`;
+  };
+
+  return `<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>Grade Sheet - ${esc(studentInfo.roll_no)}</title>
+<style>
+${GRADE_SHEET_CSS}
+</style>
+</head><body>
+${pages.map(pageHTML).join("\n")}
+</body></html>`;
+}
diff --git a/src/Modules/Examination/examination.jsx b/src/Modules/Examination/examination.jsx
index 29d611567..58aaa1077 100644
--- a/src/Modules/Examination/examination.jsx
+++ b/src/Modules/Examination/examination.jsx
@@ -19,6 +19,7 @@ const COMPONENTS = {
   checkResult: lazy(() => import("./checkResult.jsx")),
   announceResult: lazy(() => import("./AnnounceResult.jsx")),
   generateTranscript: lazy(() => import("./generateTranscript.jsx")),
+  gradeSheet: lazy(() => import("./gradeSheet.jsx")),
 };
 
 const StudentTranscript = lazy(
diff --git a/src/Modules/Examination/gradeSheet.jsx b/src/Modules/Examination/gradeSheet.jsx
new file mode 100644
index 000000000..817b0c9be
--- /dev/null
+++ b/src/Modules/Examination/gradeSheet.jsx
@@ -0,0 +1,168 @@
+import { useState, useEffect } from "react";
+import {
+  Alert,
+  Card,
+  Paper,
+  Select,
+  Button,
+  Stack,
+  Group,
+  Box,
+  SimpleGrid,
+  LoadingOverlay,
+  Text,
+} from "@mantine/core";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import GradeSheetList from "./components/gradeSheetList.jsx";
+import { generate_full_gradesheet_form } from "./routes/examinationRoutes.jsx";
+
+export default function GradeSheet() {
+  const userRole = useSelector((state) => state.user.role);
+  const [formData, setFormData] = useState({ batch: "", specialization: "" });
+  const [formOptions, setFormOptions] = useState({
+    batches: [],
+    specializations: [],
+  });
+  const [students, setStudents] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchFormOptions = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) {
+        setError("No authentication token found!");
+        return;
+      }
+      try {
+        setLoading(true);
+        const { data } = await axios.get(generate_full_gradesheet_form, {
+          params: { role: userRole },
+          headers: { Authorization: `Token ${token}` },
+        });
+        const batches = (data.batches || []).slice().sort((a, b) => {
+          const yearA = parseInt(
+            (a.label || "").match(/(\d{4})/g)?.pop() || 0,
+            10,
+          );
+          const yearB = parseInt(
+            (b.label || "").match(/(\d{4})/g)?.pop() || 0,
+            10,
+          );
+          return yearB - yearA;
+        });
+        setFormOptions({
+          batches: batches.map((batch) => ({
+            value: batch.id.toString(),
+            label: batch.label,
+          })),
+          specializations: (data.specializations || []).map((s) => ({
+            value: s,
+            label: s,
+          })),
+        });
+      } catch (e) {
+        setError(`Error fetching form options: ${e.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchFormOptions();
+  }, [userRole]);
+
+  const handleChange = (field) => (value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setStudents(null);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const token = localStorage.getItem("authToken");
+    if (!token) {
+      setError("No authentication token found!");
+      return;
+    }
+    if (!formData.batch) {
+      setError("Please select a batch.");
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const { data } = await axios.post(
+        generate_full_gradesheet_form,
+        {
+          Role: userRole,
+          batch: formData.batch,
+          specialization: formData.specialization || undefined,
+        },
+        { headers: { Authorization: `Token ${token}` } },
+      );
+      setStudents(data.students || []);
+    } catch (err) {
+      setError(`Error fetching students: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card shadow="sm" p="md" radius="md" withBorder>
+      <Stack gap="md" pos="relative">
+        <LoadingOverlay visible={loading} />
+        {error && (
+          <Alert color="red" radius="sm">
+            {error}
+          </Alert>
+        )}
+        <Paper shadow="sm" radius="sm" p="md" withBorder>
+          <Stack gap="md">
+            <Text size="sm" c="dimmed">
+              Every semester a student has been graded in, one course table per
+              semester, paginated by Academic Year — the institute's official
+              multi-page grade sheet.
+            </Text>
+            <form onSubmit={handleSubmit}>
+              <SimpleGrid cols={2} spacing="md">
+                <Box>
+                  <Select
+                    label="Batch"
+                    placeholder="Select or type to search batch"
+                    data={formOptions.batches}
+                    value={formData.batch?.toString()}
+                    onChange={handleChange("batch")}
+                    radius="sm"
+                    searchable
+                    nothingFoundMessage="No matching batch"
+                  />
+                </Box>
+                <Box>
+                  <Select
+                    label="Specialization (optional)"
+                    placeholder="All specializations"
+                    data={formOptions.specializations}
+                    value={formData.specialization}
+                    onChange={handleChange("specialization")}
+                    radius="sm"
+                    clearable
+                  />
+                </Box>
+              </SimpleGrid>
+              <Group justify="flex-end" mt="md">
+                <Button type="submit" size="md" radius="sm">
+                  Find Students
+                </Button>
+              </Group>
+            </form>
+          </Stack>
+        </Paper>
+        {students !== null && (
+          <Paper shadow="sm" radius="sm" p="md" withBorder>
+            <GradeSheetList students={students} />
+          </Paper>
+        )}
+      </Stack>
+    </Card>
+  );
+}
diff --git a/src/Modules/Examination/pages.js b/src/Modules/Examination/pages.js
index dd28dbfb1..1b0799c29 100644
--- a/src/Modules/Examination/pages.js
+++ b/src/Modules/Examination/pages.js
@@ -102,4 +102,12 @@ export const EXAMINATION_PAGES = [
     group: null,
     roles: [...ACAD, ...PROGRAMME_ADMIN_ROLES],
   },
+  {
+    key: "gradeSheet",
+    slug: "grade-sheet",
+    title: "Grade Sheet",
+    icon: "FileText",
+    group: null,
+    roles: [...ACAD, ...PROGRAMME_ADMIN_ROLES],
+  },
 ];
diff --git a/src/Modules/Examination/routes/examinationRoutes.jsx b/src/Modules/Examination/routes/examinationRoutes.jsx
index 1e8535d69..bebcaf7c5 100644
--- a/src/Modules/Examination/routes/examinationRoutes.jsx
+++ b/src/Modules/Examination/routes/examinationRoutes.jsx
@@ -38,3 +38,5 @@ export const grade_status = `${host}/examination/api/grade_status/`;
 export const grade_summary = `${host}/examination/api/grade_summary/`;
 export const grade_validation = `${host}/examination/api/grade_validation/`;
 export const submit_phd_milestone_grades = `${host}/examination/api/submit_phd_milestone_grades/`;
+export const generate_full_gradesheet_form = `${host}/examination/api/generate_full_gradesheet_form/`;
+export const generate_full_gradesheet_data = `${host}/examination/api/generate_full_gradesheet_data/`;
diff --git a/vite.config.js b/vite.config.js
index 438fa2ded..ea7b156dc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,7 +13,7 @@ export default defineConfig(({ mode }) => ({
         "/aims",
         "/academic-procedures",
         "/programme_curriculum",
-        "/examination",
+        "/examination/api",
         "/eis",
         "/spacs",
         "/media",