imrpove the UI for pdf here
// Install pdfkit // npm install pdfkit
const PDFDocument = require('pdfkit'); const fs = require('fs');
const exportJobPDF = () => { const doc = new PDFDocument({ size: 'A4', margin: 50 }); const filePath = 'job-demo1.pdf'; const stream = fs.createWriteStream(filePath);
doc.pipe(stream);
// Company Header
doc
.image('./logo.png', 50, 45, { width: 100 })
.fontSize(24).fillColor('#0A74DA
')
.text('Canada Goods Transport Ltd.', 160, 50)
.fontSize(12).fillColor('black')
.text('123 Main St, Toronto, ON, Canada', 160, 80)
.text('Phone: (123) 456-7890', 160, 95)
.moveDown(2);
// Divider doc.moveTo(50, 130).lineTo(550, 130).stroke(); doc.moveDown();
// Job Information
doc.fontSize(18).fillColor('#0A74DA
').text('Job Information', { underline: true });
doc.moveDown();
const jobInfo = { ID: 'PD3', Customer: 'Demo Customer', Phone: '+1 (324) 213-2321', Address: 'Toronto, ON, Canada', Date: '2025-01-09', Service: 'Drop-off', ContainerSize: '20 YDS', MaterialType: 'Mixed Garbage', Quantity: '4 tonnes', Status: 'Completed', };
Object.entries(jobInfo).forEach(([key, value]) => {
doc.fontSize(12).text(${key}:
, { continued: true }).font('Helvetica-Bold').text(value);
});
doc.moveDown();
// Driver Information
doc.fontSize(18).fillColor('#0A74DA
').text('Driver Information', { underline: true });
doc.moveDown();
const drivers = [ { Name: 'Demo Driver', Phone: '3939339322', Truck: 'asd-322', BinNumber: '211', LoadingTime: '10:02 AM', Loads: '10', DumpLocation: "Canada's Waste Facility", Status: 'Completed', }, ];
drivers.forEach((driver, index) => {
doc.fontSize(14).fillColor('black').text(Driver ${index + 1}:
, { underline: true });
Object.entries(driver).forEach(([key, value]) => {
doc.fontSize(12).text(${key}:
, { continued: true }).font('Helvetica-Bold').text(value);
});
doc.moveDown();
});
// Receiver Information
doc.fontSize(18).fillColor('#0A74DA
').text('Receiver Information', { underline: true });
doc.moveDown();
const receiverInfo = { Name: 'Abc', Address: 'Canada', City: 'Toronto', PostalCode: '526272', DeliveryTime: '2025-01-09 19:22', AuthorizerPhone: '584 545 4545', AuthorizedBy: 'Alex', };
Object.entries(receiverInfo).forEach(([key, value]) => {
doc.fontSize(12).text(${key}:
, { continued: true }).font('Helvetica-Bold').text(value);
});
doc.moveDown();
// Receipt Information
doc.fontSize(18).fillColor('#0A74DA
').text('Receipt', { underline: true });
doc.moveDown();
const receipt = { Amount: '$970.92', Reference: 'Ref#87028', };
doc.fontSize(12).text(Amount:
, { continued: true }).font('Helvetica-Bold').text(receipt.Amount);
doc.text(Reference:
, { continued: true }).font('Helvetica-Bold').text(receipt.Reference);
doc.end();
stream.on('finish', () => {
console.log(PDF generated successfully at ${filePath}
);
});
};
exportJobPDF();
I'll improve the PDF UI with better styling, layout, and professional elements while maintaining the same data structure. Here's an enhanced version:
generate-pdf.js
This improved version includes:
Better Visual Structure:
Professional Elements:
Improved Typography:
Additional Features:
The PDF now has a more professional and polished appearance while maintaining all the original information.
some changes we have multiple drivers, each driver will have their receiver information and an image for reciept if attached. Change color them according to logo attached
I'll update the PDF generator to accommodate multiple drivers with their respective receiver information, add support for receipt images, and change the color theme to match the Phantom Disposal logo (red and black).
generate-pdf.js
I did not output the full code. I will fix this.
generate-pdf.js
Updated Color Scheme:
#E30613
)Multiple Drivers Support:
Receipt Image Support:
Improved Organization:
Phantom Disposal Branding:
The PDF now supports multiple drivers with their respective receiver information and receipt images, all styled according to the Phantom Disposal brand colors.
driver information and receiver information can be one section no need for separate for each driver they can be in one flow. AND FOR RECEIPT IMAGE YOU CAN LEAVE A PLACEHOLDER. REMOVE SIGNATURES
No Output
Run the code to generate an output.