feat : make general changes for download account statement.

src/app/_components/statement_download/PdfGenerator.tsx

@@ -5,29 +5,18 @@ export const generatePDF = (
   accountNo: string,
   balance: string,
   txns: any[],
+  customerName: string,
+  periodFrom: string,
+  periodTo: string
 ) => {
   const html2pdf = require("html2pdf.js");
 
-  // Header with logo + bank name + generated date
-  const headerHTML = `
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
-      <div style="display:flex;align-items:center;gap:10px;">
-        <img src="/logo.jpg" alt="Bank Logo" style="height:50px;" />
-        <h2 style="margin:0;">The Kangra Central Co Operative Bank</h2>
-      </div>
-      <div style="font-size:12px;color:#555;">
-        Report generated: ${dayjs().format("DD/MM/YYYY HH:mm")}
-      </div>
-    </div>
-    <hr/>
-  `;
-
-  // Table rows
+  // Build rows
   const rows = txns.map(
     (t: any) => `
       <tr style="page-break-inside: avoid;">
+        <td style="border:1px solid #ccc;padding:6px;text-align:center;">${t.date}</td>
         <td style="border:1px solid #ccc;padding:6px;text-align:left;">${t.name}</td>
-        <td style="border:1px solid #ccc;padding:6px;text-align:left;">${t.date}</td>
         <td style="border:1px solid #ccc;padding:6px;text-align:right;color:${t.type === "DR" ? "red" : "green"
       }">
           ${parseFloat(t.amount).toLocaleString("en-IN", {
@@ -38,20 +27,34 @@ export const generatePDF = (
     `
   );
 
+  // Content for first page
   const content = `
     <div style="font-family:Arial, sans-serif;">
-      ${headerHTML}
-      <h3 style ="text-align:center;">Account Statement</h3>
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+        <div style="display:flex;align-items:center;gap:10px;">
+          <img src="/logo.jpg" alt="Bank Logo" style="height:50px;" />
+          <h2 style="margin:0;">The Kangra Central Co Operative Bank</h2>
+        </div>
+        <div style="font-size:12px;color:#555;">
+          Report generated: ${dayjs().format("DD/MM/YYYY HH:mm")}
+        </div>
+      </div>
+      <hr/>
+
+      <h3 style="text-align:center;">Account Statement</h3>
       <p><strong>Account No:</strong> ${accountNo}</p>
-      <p><strong>Available Balance:</strong> ₹ ${parseFloat(
-    balance
-  ).toLocaleString("en-IN", { minimumFractionDigits: 2 })}</p>
-      
+      <p><strong>Account Holder:</strong> ${customerName}</p>
+      <p><strong>Statement Period:</strong> ${periodFrom} to ${periodTo}</p>
+      <p><strong>Available Balance:</strong> ₹ ${parseFloat(balance).toLocaleString(
+    "en-IN",
+    { minimumFractionDigits: 2 }
+  )}</p>
+
       <table style="width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;page-break-inside:auto;">
         <thead style="background:#f0f0f0;">
           <tr>
-            <th style="border:1px solid #ccc;padding:6px;text-align:left;">Name</th>
-            <th style="border:1px solid #ccc;padding:6px;text-align:left;">Date</th>
+            <th style="border:1px solid #ccc;padding:6px;text-align:center;">Date</th>
+            <th style="border:1px solid #ccc;padding:6px;text-align:left;">Description</th>
             <th style="border:1px solid #ccc;padding:6px;text-align:right;">Amount (₹)</th>
           </tr>
         </thead>
@@ -59,15 +62,12 @@ export const generatePDF = (
           ${rows.join("")}
         </tbody>
       </table>
-
-      <div style="height:40px;"></div>
     </div>
   `;
 
-  // PDF options
   const opt = {
-    margin: [10, 10, 20, 10], // bottom margin for page count
-    filename: `AccountStatement_${accountNo}.pdf`,
+    margin: [20, 10, 20, 10],
+    filename: `AccountStatement_${accountNo}_${dayjs().format("DD/MM/YYYY HH:mm")}.pdf`,
     image: { type: "jpeg", quality: 0.98 },
     html2canvas: { scale: 2 },
     jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
@@ -81,12 +81,29 @@ export const generatePDF = (
     .get("pdf")
     .then((pdf: any) => {
       const totalPages = pdf.internal.getNumberOfPages();
-      for (let i = 1; i <= totalPages; i++) {
+      const pageWidth = pdf.internal.pageSize.getWidth();
+
+      for (let i = 2; i <= totalPages; i++) {
         pdf.setPage(i);
         pdf.setFontSize(10);
+
+        // ✅ Left side Account No
+        pdf.setFont("helvetica", "bold");
+        // pdf.text(`Account No: ${accountNo}`, 15, 18);
+
+        // ✅ Centered Statement Period
+        pdf.text(
+          `Statement Period: ${periodFrom} to ${periodTo}`,
+          pageWidth / 2,
+          18,
+          { align: "center" }
+        );
+
+        // Footer page numbers
+        pdf.setFontSize(9);
         pdf.text(
           `Page ${i} of ${totalPages}`,
-          pdf.internal.pageSize.getWidth() - 40,
+          pageWidth - 40,
           pdf.internal.pageSize.getHeight() - 10
         );
       }