template-draw.js

/* template-draw.js — draws the ENTIRE static invoice template with jsPDF
 * vector primitives (no background image / no canvas raster).
 *
 * This replaces the 425KB base64 JPEG in template.js. Everything that used to
 * be baked into the image — the page frame, the box grid, the letterhead, all
 * column headers, the totals labels and the footer — is drawn here with
 * doc.rect / doc.line / doc.text so the PDF is pure vector: tiny, crisp and
 * fully editable in code.
 *
 * Geometry (all in mm) was measured from the original scan so the grid matches
 * the old template line-for-line. Fonts are jsPDF built-ins (helvetica), per
 * the chosen "built-in fonts" option.
 *
 * Business/letterhead constants live in TEMPLATE_INFO so they are trivial to
 * edit later (phone, address, bank, GSTIN, etc.).
 *
 * Exposes: window.drawTemplate(doc)  and  window.TEMPLATE_INFO
 */
(function () {
  "use strict";

  var TEMPLATE_INFO = {
    title: "T.S Industries & Traders",
    subtitle: "“A Unit of Packaging”",
    docHeading: "GST INVOICE",
    docSubheading:
      "(See Rule US-31 of CGST ACT read with Rule 1 of Invoice, Debit & Credit Note Rule.)",
    gstin: "GSTIN - 20ASYPS9457K1ZQ",
    stateCode: "State Code - 20",
    addressLine1: "Renu Bela, Meena Bazar, PO - Madhupur",
    addressLine2: "Dist. - Deoghar (Jharkhand) - 815353",
    mobLabel: "Mob. NO. - ",
    mobiles: ["8789975066", "9431132893", "8789602809"], // corrected middle number
    emailLabel: "E-mail: ",
    email: "arbindkumar32893@gmail.com",
    webmail: "webmail.tsindustries.co.in",
    bank: [
      "OUR BANK : CANARA BANK",
      "BRANCH : MADHUPUR",
      "A/C NO. : 4902201000178",
      "IFSC : CNRB0004902",
      "PAN NO. : "
    ],
    jurisdiction: "(Subject to Madhupur Jurisdiction)",
    signatory: "Authorized Signatory"
  };

  // ---- Grid geometry (mm), measured from the original template ----
  var G = {
    // outer frame
    left: 9.2, right: 200.6, top: 9.2, bottom: 287.6,
    // horizontal rules
    hDocHead: 20.4,     // under "GST INVOICE" heading band
    hLetter: 57.2,      // under the letterhead (name/address)
    hDetails: 96.1,     // under invoice-details / consignee band
    hItemHead: 106.8,   // under the item column-header row
    hItemsEnd: 203.5,   // bottom of the item grid (top of totals band)
    hBandEnd: 255.6,    // bottom of the left band / totals stack
    hGross: 267.5,      // bottom of the GROSS TOTAL row (right side)
    // vertical rules
    vLeft: 9.2,
    vDetailSplit: 72.2, // splits invoice-details | consignee (only y 57..96)
    // item-grid column separators (y 106.8 .. 203.5, extended into totals where noted)
    vSno: 21.1,         // after S.No
    vDesc: 67.0,        // after Product Description
    vHsn: 84.8,         // after HSN code
    vGsm: 96.8,         // after GSM  (also the TOTAL QUANTITY left edge below)
    vSize: 121.7,       // after Size (also TOTAL QUANTITY right edge below)
    vQty: 139.8,        // after Quantity (also totals-labels left edge, runs to hGross)
    vBund: 155.3,       // after Bundles (item grid only, y 106.8 .. 203.5)
    vRate: 173.5,       // after Rate (runs to hGross)
    vRight: 200.6
  };

  function line(doc, x1, y1, x2, y2) { doc.line(x1, y1, x2, y2); }

  function drawGrid(doc) {
    doc.setDrawColor(0, 0, 0);
    doc.setLineWidth(0.6);

    // Outer frame
    doc.rect(G.left, G.top, G.right - G.left, G.bottom - G.top, "S");

    // ---- Horizontal rules (full width unless noted) ----
    line(doc, G.left, G.hDocHead, G.right, G.hDocHead);
    line(doc, G.left, G.hLetter, G.right, G.hLetter);
    line(doc, G.left, G.hDetails, G.right, G.hDetails);
    line(doc, G.left, G.hItemHead, G.right, G.hItemHead);
    line(doc, G.left, G.hItemsEnd, G.right, G.hItemsEnd);
    line(doc, G.left, G.hBandEnd, G.right, G.hBandEnd);

    // Right-side totals stack: rows between hItemsEnd(203.5) and hGross(267.5)
    var rightRows = [210.4, 219.7, 226.2, 232.6, 238.9, 249.0, 267.5];
    for (var i = 0; i < rightRows.length; i++) {
      line(doc, G.vQty, rightRows[i], G.right, rightRows[i]);
    }

    // ---- Vertical rules ----
    // Details/consignee split (only in the 57..96 band)
    line(doc, G.vDetailSplit, G.hLetter, G.vDetailSplit, G.hDetails);

    // Item-grid columns (header + body): y hItemHead .. hItemsEnd
    var colTop = G.hItemHead, colBot = G.hItemsEnd;
    [G.vSno, G.vDesc, G.vHsn, G.vGsm, G.vSize, G.vQty, G.vBund, G.vRate].forEach(
      function (x) { line(doc, x, colTop, x, colBot); }
    );

    // Extend some separators DOWN through the totals band (203.5 .. 255.6 / 267.5)
    // Left "TOTAL QUANTITY" cell walls:
    line(doc, G.vGsm, G.hItemsEnd, G.vGsm, G.hBandEnd);   // 96.8
    line(doc, G.vSize, G.hItemsEnd, G.vSize, G.hBandEnd); // 121.7
    // Totals-labels | values separators run to the gross line:
    line(doc, G.vQty, G.hItemsEnd, G.vQty, G.hGross);     // 139.8
    line(doc, G.vRate, G.hItemsEnd, G.vRate, G.hGross);   // 173.5
  }

  function center(a, b) { return (a + b) / 2; }

  function drawLetterhead(doc) {
    var T = TEMPLATE_INFO;

    // GST INVOICE heading (bold) + subheading (small)
    doc.setFont("helvetica", "bold");
    doc.setFontSize(13);
    doc.text(T.docHeading, center(G.left, G.right), 15.5, { align: "center" });
    doc.setFont("helvetica", "normal");
    doc.setFontSize(8);
    doc.text(T.docSubheading, center(G.left, G.right), 19.2, { align: "center" });

    // Company name (big bold) + subtitle (italic). Baselines measured ~32.3 / 41.5.
    doc.setFont("helvetica", "bold");
    doc.setFontSize(29);
    doc.text(T.title, center(G.left, G.right), 32.3, { align: "center" });
    doc.setFont("helvetica", "italic");
    doc.setFontSize(16);
    doc.text(T.subtitle, center(G.left, G.right), 41.5, { align: "center" });

    // Right-aligned columns (mobiles, webmail). Keep ~2mm clear of the frame's
    // right edge (200.6mm) so nothing touches the border.
    var rx = 198.5;

    // Mobile block (right, bold). Measured baselines 37.9 / 42.2 / 46.4.
    doc.setFont("helvetica", "bold");
    doc.setFontSize(9.5);
    doc.text(T.mobLabel + T.mobiles[0], rx, 37.9, { align: "right" });
    doc.text(T.mobiles[1], rx, 42.2, { align: "right" });
    doc.text(T.mobiles[2], rx, 46.4, { align: "right" });

    // GSTIN + State code (left, bold). Measured baselines 50.5 / 54.7, x≈11.9.
    doc.setFont("helvetica", "bold");
    doc.setFontSize(9.5);
    doc.text(T.gstin, 11.9, 50.5);
    doc.text(T.stateCode, 11.9, 54.7);

    // Address (center block, normal). Measured centers 104.2 / 101.5,
    // baselines 50.8 / 55.4. Kept at 10pt so Helvetica's width stays clear of
    // the E-mail column (which starts at x≈139.7).
    doc.setFont("helvetica", "normal");
    doc.setFontSize(10);
    doc.text(T.addressLine1, 103, 50.8, { align: "center" });
    doc.text(T.addressLine2, 101.5, 55.4, { align: "center" });

    // Email + webmail (right area). Measured: "E-mail:" starts x≈139.7,
    // baseline 51.3; webmail right-aligned, baseline 54.9.
    doc.setFont("helvetica", "bold");
    doc.setFontSize(9.5);
    doc.text(T.emailLabel, 139.7, 51.3);
    doc.setFont("helvetica", "normal");
    var emW = doc.getStringUnitWidth(T.emailLabel) * 9.5 / doc.internal.scaleFactor;
    doc.text(T.email, 139.7 + emW + 0.5, 51.3);
    doc.text(T.webmail, rx, 54.9, { align: "right" });
  }

  function drawDetailLabels(doc) {
    // Invoice-details labels. Measured: colons right-align at x≈40.5mm (the
    // VALUES are printed at x=42mm by invoice.js, so the labels must end just
    // to their left — NOT at the box divider). Baselines 61.6/65.9/70.8/74.3.
    // 10pt (not 11) so the widest label "Invoice Serial No. :" (≈29.5mm) still
    // starts at x≈11mm — safely inside the frame's left edge (9.2mm).
    doc.setFont("helvetica", "normal");
    doc.setFontSize(10);
    var lx = 40.5;
    doc.text("Invoice Serial No. :", lx, 61.6, { align: "right" });
    doc.text("Invoice Date :", lx, 65.9, { align: "right" });
    doc.text("Transport :", lx, 70.8, { align: "right" });
    doc.text("Vehicle Number :", lx, 74.3, { align: "right" });

    // Consignee header (bold, left of the divider's right cell)
    doc.setFont("helvetica", "bold");
    doc.text("Details of Consignee/Billed to :", G.vDetailSplit + 2, 61.6);
  }

  function drawItemHeaders(doc) {
    doc.setFont("helvetica", "normal");
    doc.setFontSize(11);
    // Column centers + labels (some are two lines). Header band y 96.1..106.8.
    var y1 = 100.5, y2 = 104.5;
    function c(x0, x1) { return (x0 + x1) / 2; }
    doc.text("S.No.", c(G.vLeft, G.vSno), 102.5, { align: "center" });
    doc.text("Product Description", c(G.vSno, G.vDesc), 102.5, { align: "center" });
    doc.text("HSN", c(G.vDesc, G.vHsn), y1, { align: "center" });
    doc.text("code", c(G.vDesc, G.vHsn), y2, { align: "center" });
    doc.text("GSM", c(G.vHsn, G.vGsm), 102.5, { align: "center" });
    doc.text("Size", c(G.vGsm, G.vSize), y1, { align: "center" });
    doc.text("(inches)", c(G.vGsm, G.vSize), y2, { align: "center" });
    doc.text("Quantity", c(G.vSize, G.vQty), y1, { align: "center" });
    doc.text("(Kgs/Pcs)", c(G.vSize, G.vQty), y2, { align: "center" });
    doc.text("Bundles", c(G.vQty, G.vBund), 102.5, { align: "center" });
    doc.text("Rate Per", c(G.vBund, G.vRate), y1, { align: "center" });
    doc.text("Kgs/Pcs", c(G.vBund, G.vRate), y2, { align: "center" });
    doc.text("Amount", c(G.vRate, G.vRight), y1, { align: "center" });
    doc.text("Rs.", c(G.vRate, G.vRight), y2, { align: "center" });
  }

  function drawTotalsLabels(doc) {
    doc.setFont("helvetica", "bold");
    doc.setFontSize(11);
    // TOTAL QUANTITY (two lines) in the cell x[vGsm..vSize], centered
    var tqx = (G.vGsm + G.vSize) / 2;
    doc.text("TOTAL", tqx, 209.5, { align: "center" });
    doc.text("QUANTITY", tqx, 214.0, { align: "center" });

    // Right-side stacked labels in cell x[vQty..vRate], centered on that column
    var lx = (G.vQty + G.vRate) / 2;
    doc.text("Carriage Outward", lx, 208.0, { align: "center" });
    doc.text("Transportaion/", lx, 214.5, { align: "center" });
    doc.text("Packing Charges", lx, 218.5, { align: "center" });
    doc.text("SGST - 9%", lx, 224.0, { align: "center" });
    doc.text("CGST - 9%", lx, 230.5, { align: "center" });
    doc.text("IGST - 18%", lx, 236.5, { align: "center" });
    doc.text("Total", lx, 243.0, { align: "center" });
    doc.text("Rounded", lx, 247.0, { align: "center" });
    doc.text("Less Adv.", lx, 253.0, { align: "center" });
    doc.text("GROSS TOTAL", lx, 263.0, { align: "center" });
  }

  function drawFooter(doc) {
    var T = TEMPLATE_INFO;
    doc.setFont("helvetica", "bold");
    doc.setFontSize(11);
    var y = 261.5;
    for (var i = 0; i < T.bank.length; i++) {
      doc.text(T.bank[i], 20, y);
      y += 5.4;
    }
    doc.setFont("helvetica", "normal");
    doc.text(T.jurisdiction, 74, 285.5, { align: "left" });
    doc.setFont("helvetica", "bold");
    doc.text(T.signatory, G.right - 3, 285.5, { align: "right" });
  }

  function drawTemplate(doc) {
    drawGrid(doc);
    drawLetterhead(doc);
    drawDetailLabels(doc);
    drawItemHeaders(doc);
    drawTotalsLabels(doc);
    drawFooter(doc);
    // reset to the defaults the value-printing code expects
    doc.setFont("helvetica", "normal");
    doc.setFontSize(10);
    doc.setDrawColor(0, 0, 0);
    doc.setLineWidth(0.2);
  }

  if (typeof window !== "undefined") {
    window.drawTemplate = drawTemplate;
    window.TEMPLATE_INFO = TEMPLATE_INFO;
    window.TEMPLATE_GRID = G;
  }
  if (typeof globalThis !== "undefined") {
    globalThis.drawTemplate = drawTemplate;
    globalThis.TEMPLATE_INFO = TEMPLATE_INFO;
    globalThis.TEMPLATE_GRID = G;
  }
})();