From 5c5651b87e3c35e0da67dfc90e1b8d26f4a96d08 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 13 Nov 2025 17:43:01 +0800 Subject: [PATCH] Display of bldg additional on pdf --- src/utils/functions/createPdfOccupancy.ts | 187 +++++++++++++++++++++- 1 file changed, 185 insertions(+), 2 deletions(-) diff --git a/src/utils/functions/createPdfOccupancy.ts b/src/utils/functions/createPdfOccupancy.ts index b9d057c..384d728 100644 --- a/src/utils/functions/createPdfOccupancy.ts +++ b/src/utils/functions/createPdfOccupancy.ts @@ -1,7 +1,7 @@ import jsPDF from 'jspdf' // @ts-ignore import jspdfBarcode from 'jspdf-barcode' -import { _optn, _applicationNo, _date, _name, _type, _location, _assessor, _feeList, _codeList, _amountList, _signatureAssessor, _signatureApprover, _assessorid, _approvedDate, _assessedDate, _units, _totalUnits, _floorArea } from '../../stores/pdfinfo' +import { _optn, _applicationNo, _date, _name, _type, _location, _assessor, _feeList, _codeList, _amountList, _signatureAssessor, _signatureApprover, _assessorid, _approvedDate, _assessedDate, _units, _totalUnits, _floorArea, _additional, _additionalAmountList, _additionalCodeList, _additionalFeeList, _additionalUnitList } from '../../stores/pdfinfo' import dayjs from 'dayjs' // @ts-ignore import QRCode from 'qrcode' @@ -29,10 +29,17 @@ export default async () => { const MULTIPLIED = AMOUNTS.map((amount) => parseInt(amount) * UNITS) + const ADDTLFEES = _additionalFeeList.get() + const ADDTLAMOUNTS = _additionalAmountList.get() + const ADDTLCODES = _additionalCodeList.get() + const ADDTLUNITS = _additionalUnitList.get() + + const ADDTLMULTIPLIED = ADDTLAMOUNTS.map((amount, index) => parseInt(amount) * ADDTLUNITS[index]) + const doc = new jsPDF({ orientation: 'p', unit: 'mm', - format: [215.9, 279.4], + format: 'letter', }) const arial = @@ -265,5 +272,181 @@ export default async () => { doc.setFontSize(6) doc.text('Officer-in-Charge', 154, newYPosition + 37) + if (_additional.get()) { + doc.addPage('letter') + + jspdfBarcode(doc, APPLICATION, { + fontSize: 32, + textColor: '#000000', + x: pageWidth - 35, + y: 38, + textOptions: { align: 'center' }, + }) + + doc.setFont('arial', 'normal') + doc.setFontSize(9) + doc.text(republicText, republicTextX, 14) + doc.setFont('arial-bold', 'bold') + doc.setFontSize(10) + doc.text(officeText, officeTextX, 19) + doc.setFont('arial', 'normal') + doc.setFontSize(9) + doc.text(cityText, cityTextX, 24) + + doc.addImage(lungsod, 'PNG', 14, 8, 18, 18, 'lungsod', 'NONE', 0) + doc.addImage(ocbo, 'PNG', pageWidth - 34, 8, 18, 18, 'ocbo', 'NONE', 0) + + const opText = 'ORDER OF PAYMENT' + const opTextWidth = getTextWidth(opText, 8.75) + const opTextX = (pageWidth - opTextWidth) / 2 + doc.setFont('arial-bold', 'bold') + doc.setFontSize(9) + doc.text(opText, opTextX, 34) + + const divisionText = 'BUILDING ADDITIONAL PERMIT' + const divisionTextWidth = getTextWidth(divisionText, 7.25) + const divisionTextX = (pageWidth - divisionTextWidth) / 2 + doc.setFont('arial', 'normal') + doc.setFontSize(8) + doc.text(divisionText, divisionTextX, 38) + + const optnText = 'OPTN:' + const optnTextX = 16 + doc.setFont('arial-bold', 'bold') + doc.setFontSize(8) + doc.text(optnText, optnTextX, 38) + + const optnContentX = 25 + doc.setFontSize(8) + doc.text(OPTN, optnContentX, 38) + + const toText = `TO: The City Treasurer's Office` + const toTextX = 16 + doc.setFont('arial', 'normal') + doc.setFontSize(8) + doc.text(toText, toTextX, 46) + + doc.text('Please accept payment for fee specified herunder', 16, 50) + + doc.text('Application No. :', pageWidth - 60, 46) + + doc.setFont('arial-bold', 'bold') + doc.text(APPLICATION, pageWidth - 38, 46) + + doc.setFont('arial', 'normal') + doc.text('Approved Date :', pageWidth - 60, 50) + + doc.setFont('arial-bold', 'bold') + doc.text(DATE, pageWidth - 38, 50) + + doc.setFont('arial', 'normal') + doc.text('Name of Applicant :', 23.4, 58) + + doc.setFont('arial-bold', 'bold') + doc.text(NAME, 50, 58) + + doc.setFont('arial', 'normal') + doc.text('Location of Construction :', 16, 62) + + doc.setFont('arial-bold', 'bold') + doc.text(LOCATION, 50, 62) + + doc.setFont('arial', 'normal') + doc.text('Type of Use :', 31.2, 66) + + doc.setFont('arial-bold', 'bold') + doc.text(TYPE, 50, 66) + + doc.text('ACCOUNT DESCRIPTION', 16, 74) + doc.text('ACCOUNT CODE', getTextWidth('ACCOUNT DESCRIPTION', 8) + 40, 74) + doc.text('AMOUNT', getTextWidth('ACCOUNT DESCRIPTION', 8) + getTextWidth('ACCOUNT CODE', 8) + 65, 74) + doc.text('UNIT', getTextWidth('ACCOUNT DESCRIPTION', 8) + getTextWidth('ACCOUNT CODE', 8) + 82, 74) + + doc.setFont('arial', 'normal') + + let yPosition = 82 + ADDTLFEES.forEach((fee) => { + doc.text(fee, 16, yPosition) + yPosition += 4 + }) + + yPosition = 82 + ADDTLCODES.forEach((code) => { + doc.text(code, 76, yPosition) + yPosition += 4 + }) + + yPosition = 82 + ADDTLAMOUNTS.forEach((amount) => { + doc.text(`${PESO} ${parseInt(amount).toLocaleString('en-US', { minimumFractionDigits: 2 })}`, 122, yPosition) + yPosition += 4 + }) + + yPosition = 82 + ADDTLAMOUNTS.forEach(() => { + doc.text(`x${UNITS}`, 140, yPosition) + yPosition += 4 + }) + + yPosition = 82 + ADDTLAMOUNTS.forEach(() => { + doc.text('=', 148, yPosition) + yPosition += 4 + }) + + yPosition = 82 + ADDTLMULTIPLIED.forEach((amount) => { + doc.text(`${PESO} ${parseInt(amount.toString()).toLocaleString('en-US', { minimumFractionDigits: 2 })}`, 156, yPosition) + yPosition += 4 + }) + + let newYPosition = yPosition + + doc.line(156, newYPosition, 170, newYPosition) + + doc.setFont('arial', 'normal') + doc.text(`${PESO}`, 156, newYPosition + 4) + + doc.setFont('arial-bold', 'bold') + doc.text('Total :', 146, newYPosition + 4) + const totalAmount = ADDTLMULTIPLIED.reduce((sum, amount) => sum + parseFloat(amount.toString()), 0) + doc.text(`${totalAmount.toLocaleString('en-US', { minimumFractionDigits: 2 })}`, 159, newYPosition + 4) + + doc.text('No. of Units:', 16, newYPosition + 4) + doc.text(TOTALUNITS.toString(), 34, newYPosition + 4) + doc.text('Actual Floor Area:', 16, newYPosition + 8) + doc.text(FLOORAREA.toLocaleString('en-US', { minimumFractionDigits: 2 }), 42, newYPosition + 8) + + doc.text('Assessed By :', 16, newYPosition + 16) + doc.text('Approved By :', 142, newYPosition + 16) + + doc.text(ASSESSOR, 16, newYPosition + 34) + doc.text(APPROVER, 142, newYPosition + 34) + + doc.addImage(assessorQr, 'PNG', 16, newYPosition + 18, 14, 14, 'assessorQr', 'NONE', 0) + doc.addImage(_signatureAssessor.get(), 'PNG', 30, newYPosition + 18, 10, 5.9, 'signatureAssessor', 'NONE', 0) + doc.setFont('arial', 'normal') + doc.setFontSize(4) + doc.text('Digitally signed by :', 30, newYPosition + 26) + doc.text(ASSESSOR, 30, newYPosition + 28) + doc.text('Date: ' + dayjs(_assessedDate.get()).format('YYYY-MM-DD HH:mm:ss'), 30, newYPosition + 30) + + doc.addImage(approverQr, 'PNG', 142, newYPosition + 18, 14, 14, 'approverQr', 'NONE', 0) + doc.addImage(_signatureApprover.get(), 'PNG', 156, newYPosition + 18, 41.4, 5.9, 'signatureApprover', 'NONE', 0) + doc.text('Digitally signed by :', 156, newYPosition + 26) + doc.text(APPROVER, 156, newYPosition + 28) + doc.text('Date: ' + dayjs(_approvedDate.get()).format('YYYY-MM-DD HH:mm:ss'), 156, newYPosition + 30) + + doc.setFont('arial-bold', 'bold') + doc.setFontSize(7) + doc.text('Please use the OPTN when paying online.', 16, newYPosition + 44) + const note = doc.splitTextToSize('Note: The 72 Hours Transaction Policy of the City Mayor, shall commence upon submission of the Bureau of Fire Protection clearance/certificate and other requirement stated in the notice to comply to be issued by this office.', newYPosition + 50) + doc.text(note, 16, newYPosition + 48) + + doc.setFont('arial', 'normal') + doc.setFontSize(6) + doc.text('Officer-in-Charge', 154, newYPosition + 37) + } + doc.save(`OP-${APPLICATION}.pdf`) }