Resumed createpdf

src/utils/functions/createPdf.ts

@@ -1,18 +1,48 @@
 import jsPDF from 'jspdf'
+// @ts-ignore
+import jspdfBarcode from 'jspdf-barcode'
 
 export default () => {
+  const OPTN = 'M25-000123'
+  const APPLICATION = '25-000123'
+  const DATE = 'October 8, 2025'
+  const NAME = 'BRUCE WAYNE'
+  const LOCATION = 'DAVAO CITY'
+  const TYPE = 'RESIDENTIAL - NEW INSTALLATION'
+
+  const init = async () => {
+    console.log('yeah')
+  }
+
+  init()
+
   const doc = new jsPDF({
     orientation: 'p',
     unit: 'mm',
     format: 'letter',
   })
 
+  const getTextWidth = (text: string, fontSize: number) => {
+    doc.setFontSize(fontSize)
+    return doc.getStringUnitWidth(text) * fontSize * 0.35
+  }
+
+  const pageWidth = doc.internal.pageSize.getWidth()
+
   const lungsod = new Image()
-  lungsod.src = 'src/assets/images/lungsod2.png'
+  lungsod.src = 'src/assets/images/lungsod.png'
 
   const ocbo = new Image()
   ocbo.src = 'src/assets/images/ocbologo.png'
 
+  jspdfBarcode(doc, APPLICATION, {
+    fontSize: 32,
+    textColor: '#000000',
+    x: pageWidth - 35,
+    y: 40,
+    textOptions: { align: 'center' }, // optional text options
+  })
+
   // const lungsodItem = document.getElementById('lungsod')
   // const lungsodSrc = lungsodItem?.getAttribute('src')
   // const lungsodLink = document.createElement('a')
@@ -23,55 +53,94 @@ export default () => {
   // const ocboLink = document.createElement('a')
   // ocboLink.href = ocboSrc ?? ''
 
-  const getTextWidth = (text: string, fontSize: number) => {
-    doc.setFontSize(fontSize)
-    return doc.getStringUnitWidth(text) * fontSize * 0.35
-  }
-
-  const pageWidth = doc.internal.pageSize.getWidth()
-
   const republicText = 'Republic of the Philippines'
-  const republicTextWidth = getTextWidth(republicText, 10)
+  const republicTextWidth = getTextWidth(republicText, 9)
   const officeText = 'OFFICE OF THE CITY BUILDING OFFICIAL'
-  const officeTextWidth = getTextWidth(officeText, 11)
+  const officeTextWidth = getTextWidth(officeText, 10)
   const cityText = 'City of Davao'
-  const cityTextWidth = getTextWidth(cityText, 10)
+  const cityTextWidth = getTextWidth(cityText, 9)
 
   const republicTextX = (pageWidth - republicTextWidth) / 2
   const officeTextX = (pageWidth - officeTextWidth) / 2
   const cityTextX = (pageWidth - cityTextWidth) / 2
 
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(10)
+  doc.setFontSize(9)
   doc.text(republicText, republicTextX, 14)
   doc.setFont('helvetica', 'bold')
-  doc.setFontSize(11)
+  doc.setFontSize(10)
   doc.text(officeText, officeTextX, 19)
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(10)
+  doc.setFontSize(9)
   doc.text(cityText, cityTextX, 24)
 
-  doc.addImage(lungsod, 'PNG', 12, 8, 20, 20, 'lungsod', 'NONE', 0)
+  doc.addImage(lungsod, 'PNG', 14, 8, 18, 18, 'lungsod', 'NONE', 0)
-  doc.addImage(ocbo, 'PNG', pageWidth - 36, 8, 20, 20, 'ocbo', 'NONE', 0)
+  doc.addImage(ocbo, 'PNG', pageWidth - 34, 8, 18, 18, 'ocbo', 'NONE', 0)
-
-  // doc.setLineWidth(0.9)
-  // doc.line(10, 34, pageWidth - 10, 34)
 
   const opText = 'ORDER OF PAYMENT'
-  const opTextWidth = getTextWidth(opText, 10)
+  const opTextWidth = getTextWidth(opText, 8.75)
   const opTextX = (pageWidth - opTextWidth) / 2
-
   doc.setFont('helvetica', 'bold')
-  doc.setFontSize(10)
+  doc.setFontSize(9)
-  doc.text(opText, opTextX, 34)
+  doc.text(opText, opTextX, 36)
 
   const divisionText = 'ELECTRICAL PERMIT'
-  const divisionTextWidth = getTextWidth(divisionText, 9)
+  const divisionTextWidth = getTextWidth(divisionText, 7.25)
   const divisionTextX = (pageWidth - divisionTextWidth) / 2
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(8)
+  doc.text(divisionText, divisionTextX, 40)
+
+  const optnText = 'OPTN:'
+  const optnTextX = 16
+  doc.setFont('helvetica', 'bold')
+  doc.setFontSize(8)
+  doc.text(optnText, optnTextX, 48)
+
+  const optnContentX = 25
+  doc.setFontSize(8)
+  doc.text(OPTN, optnContentX, 48)
+
+  const toText = `TO: The City Treasurer's Office`
+  const toTextX = 16
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(8)
+  doc.text(toText, toTextX, 52)
+
+  doc.text('Please accept payment for fee specified herunder', 16, 56)
+
+  doc.text('Application No. :', pageWidth - 60, 48)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(APPLICATION, pageWidth - 38, 48)
 
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(9)
+  doc.text('Approved Date :', pageWidth - 60, 52)
-  doc.text(divisionText, divisionTextX, 39)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(DATE, pageWidth - 38, 52)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Name of Applicant :', 23.4, 64)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(NAME, 50, 64)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Location of Construction :', 16, 68)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(LOCATION, 50, 68)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Type of Use :', 31.2, 72)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(TYPE, 50, 72)
+
+  doc.text('ACCOUNT DESCRIPTION', 16, 84)
+  doc.text('ACCOUNT CODE', getTextWidth('ACCOUNT DESCRIPTION', 8) + 40, 84)
+  doc.text('AMOUNT', getTextWidth('ACCOUNT DESCRIPTION', 8) + getTextWidth('ACCOUNT CODE', 8) + 65, 84)
 
   doc.save('Sample')
 }