import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts"; import "jsr:@std/dotenv/load"; import dayjs from "npm:dayjs"; import {qrcode} from "jsr:@libs/qrcode"; const app = new Hono(); // Add QR code generation endpoint app.post("/generate-qr", async (c) => { const { paymentLink } = await c.req.json(); if (!paymentLink) { return c.json({ error: "Payment link is required" }); } const svg = qrcode(paymentLink, { output: "svg", color: { dark: "#000000", light: "#ffffff" }, border: 0, }); return c.json({ svg }); }); const generateInvoiceHtml = (invoice) => { const formattedDueDate = dayjs(invoice.dueDate).format('D MMMM YYYY'); const formattedIssueDate = dayjs(invoice.date).format('D MMMM YYYY'); return ` Invoice ${invoice.number}

Invoice

${invoice.logoUrl ? `

` : ''}

Invoice number

${invoice.number}

Issue date

${formattedIssueDate}

Issued by

${invoice.issuer}

Billed to

${invoice.customer}

${invoice.total} ${invoice.currency} due by ${formattedDueDate}

${invoice.message ? `

${invoice.message}

` : ''} ${invoice.items.map(item => ` `).join('')}

Product or service	Quantity	Unit price	Total
${item.description}	${item.quantity}	${item.price} ${invoice.currency}	${item.total} ${invoice.currency}

Payment Instructions

${invoice.paymentInstructions}

${invoice.paymentLink ? `

${invoice.paymentLink}

${invoice.qrCodeSvg ? `

${invoice.qrCodeSvg}

` : ''} ` : ''}

Amount Due ${invoice.total} ${invoice.currency}

`; } const getDemoInvoice = () => { const today = new Date(); const dueDate = new Date(today); dueDate.setDate(today.getDate() + 30); return { number: 'INV-' + new Date().getTime().toString().slice(-4), date: today.toISOString().split('T')[0], currency: 'USD', customer: 'Citrus & Fresh Grocery Chain\nAttn: Accounts Payable\n789 Retail Plaza\nSuite 500\nLos Angeles, CA 90017\nUnited States', items: [ { description: 'Premium Meyer Lemons Supply (400 lbs)', quantity: 1, price: 600, total: 600 }, { description: 'Cold Chain Delivery Fee', quantity: 1, price: 150, total: 150 }, { description: 'Organic Certification Premium', quantity: 1, price: 250, total: 250 } ], total: 1000, paymentTerms: 'specific', dueDate: dueDate.toISOString().split('T')[0], paymentInstructions: 'Please make payment via bank transfer to:\nBank: First Agricultural Bank\nAccount: 1234567890\nRouting: 987654321\nAccount Name: Sunny Grove Citrus LLC', issuer: 'Sunny Grove Citrus LLC\nLucy Lemon, Owner\n456 Citrus Valley Road\nGrove District\nVentura, CA 93001\nUnited States\nFederal Tax ID (EIN): 12-3456789', logoUrl: 'https://images.unsplash.com/photo-1534531173927-aeb928d54385?q=80&w=400&h=200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', paymentLink: 'https://example.com/pay/demo-invoice', message: "Thank you for choosing Sunny Grove Citrus! We take pride in delivering the finest organic Meyer lemons to your stores. Your business means the world to us. 🍋✨", }; }; // Add a new function for just the invoice content const generateInvoiceContent = (invoice) => `

Invoice

Invoice #${invoice.number}

Date: ${invoice.date}

Bill To

${invoice.customer}

From

${invoice.issuer}

${invoice.items.map(item => ` `).join('')}

Description	Quantity	Price	Total
${item.description}	${item.quantity}	${item.price.toFixed(2)} ${invoice.currency}	${item.total.toFixed(2)} ${invoice.currency}

Total ${invoice.total.toFixed(2)} ${invoice.currency}

${invoice.paymentInstructions ? `

Payment Details

${invoice.paymentInstructions}

` : ''}

`; // Alpine data and methods const getAlpineModule = () => ` window.generateInvoiceHtml = ${generateInvoiceHtml.toString()}; window.generateInvoiceContent = ${generateInvoiceContent.toString()}; window.getDemoInvoice = ${getDemoInvoice.toString()}; window.html2pdf = html2pdf; // Make html2pdf available to Alpine document.addEventListener('alpine:init', () => { Alpine.data('invoiceApp', () => ({ db: new Dexie('InvoiceManager'), invoice: { id: '', number: 'INV-' + new Date().getTime().toString().slice(-4), date: new Date().toISOString().split('T')[0], dueDate: dayjs().add(30, 'days').format('YYYY-MM-DD'), currency: 'USD', customer: '', items: [{ description: '', quantity: 1, price: 0, total: 0 }], issuer: '', logoUrl: '', paymentLink: '', total: 0, paymentTerms: '30days', paymentInstructions: '', message: '', qrCodeSvg: '', }, savedInvoices: [], init() { // Update Dexie schema to match our data model this.db.version(2).stores({ invoices: '++id, number, date, customer' }); this.calculateTotals(); this.loadSavedInvoices(); // Set default due date to 30 days const defaultDueDate = new Date(); defaultDueDate.setDate(defaultDueDate.getDate() + 30); this.invoice.dueDate = defaultDueDate.toISOString().split('T')[0]; // Set up watcher for payment terms this.$watch('invoice.paymentTerms', (newValue) => { const today = new Date(); let dueDate = new Date(today); switch (newValue) { case 'receipt': dueDate = today; break; case '15days': dueDate.setDate(today.getDate() + 15); break; case '30days': dueDate.setDate(today.getDate() + 30); break; case 'specific': // Keep the current specific date if it exists, otherwise default to today + 30 if (!this.invoice.dueDate) { dueDate.setDate(today.getDate() + 30); } else { return; // Don't update if there's already a specific date } break; } this.invoice.dueDate = dueDate.toISOString().split('T')[0]; }); }, async loadSavedInvoices() { const invoices = await this.db.invoices.reverse().toArray(); // Extract customer name from first line for display console.log('invoices:::', invoices); this.savedInvoices = invoices.map(inv => ({ ...inv, customerName: inv.customer?.split('\\n')[0] || 'Unnamed' })); }, async saveInvoice() { try { // Create a clean copy of the invoice const invoiceToSave = { ...JSON.parse(JSON.stringify(this.invoice)), savedAt: new Date().toISOString(), }; // If the invoice has an id, update it; otherwise add as new if (invoiceToSave.id) { await this.db.invoices.put(invoiceToSave); } else { delete invoiceToSave.id; // Remove empty id for new invoices const id = await this.db.invoices.add(invoiceToSave); this.invoice.id = id; } await this.loadSavedInvoices(); // Create new invoice number for next one only if this was a new invoice if (!invoiceToSave.id) { this.invoice.number = 'INV-' + new Date().getTime().toString().slice(-4); } alert('Invoice saved successfully!'); } catch (error) { console.error('Error saving invoice:', error); alert('Failed to save invoice'); } }, async loadInvoice(savedInvoice) { if (!savedInvoice) return; // Don't proceed if no invoice is provided if (typeof savedInvoice === 'string') { try { savedInvoice = JSON.parse(savedInvoice); } catch (e) { console.error('Failed to parse invoice:', e); return; } } // Ensure all required properties exist this.invoice = { ...this.invoice, // Keep default structure ...savedInvoice, // Override with saved data items: savedInvoice.items || [{ description: '', quantity: 1, price: 0, total: 0 }], }; this.calculateTotals(); if (this.invoice.paymentLink) { await this.generateQrCode(); } // Update the dropdown to reflect the current invoice - use $nextTick to ensure DOM is updated this.$nextTick(() => { const selectElement = document.querySelector('select[name="saved-invoices"]'); if (selectElement) { // Find the matching option and set its value const matchingOption = Array.from(selectElement.options).find(option => { try { const optionInvoice = JSON.parse(option.value); return optionInvoice.id === this.invoice.id; } catch { return false; } }); if (matchingOption) { selectElement.value = matchingOption.value; } } }); }, async deleteInvoice(id) { if (confirm('Are you sure you want to delete this invoice?')) { try { await this.db.invoices.delete(id); await this.loadSavedInvoices(); // Clear the form by resetting to default state this.invoice = { id: '', number: 'INV-' + new Date().getTime().toString().slice(-4), date: new Date().toISOString().split('T')[0], dueDate: dayjs().add(30, 'days').format('YYYY-MM-DD'), currency: 'USD', customer: '', items: [{ description: '', quantity: 1, price: 0, total: 0 }], issuer: '', logoUrl: '', paymentLink: '', total: 0, paymentTerms: '30days', paymentInstructions: '', message: '', qrCodeSvg: '', }; // Reset the select dropdown const selectElement = document.querySelector('select[name="saved-invoices"]'); if (selectElement) { selectElement.value = ''; } this.calculateTotals(); } catch (error) { console.error('Error deleting invoice:', error); alert('Failed to delete invoice'); } } }, calculateItemTotal(item) { item.total = Number(item.quantity) * Number(item.price); this.calculateTotals(); }, calculateTotals() { this.invoice.total = this.invoice.items.reduce((sum, item) => sum + (item.total || 0), 0); }, addItem() { this.invoice.items.push({ description: '', quantity: 1, price: 0, total: 0 }); }, removeItem(index) { if (this.invoice.items.length > 1) { this.invoice.items.splice(index, 1); this.calculateTotals(); } }, async previewInvoice() { const win = window.open('', 'Invoice Preview'); win.document.write('Loading preview...'); win.document.close(); // Close the document first win.document.open(); // Reopen it to clear previous content win.document.write(generateInvoiceHtml(this.invoice)); win.document.close(); // Close it again to finish writing }, async downloadPdf() { try { // Create temporary container with updated styling const container = document.createElement('div'); container.style.position = 'fixed'; // Change to fixed container.style.top = '-9999px'; // Move far off-screen container.style.left = '-9999px'; // Move far off-screen container.style.width = '800px'; container.style.backgroundColor = 'white'; container.style.visibility = 'hidden'; // Hide from view but keep rendered container.innerHTML = generateInvoiceHtml(this.invoice); document.body.appendChild(container); // Wait for fonts and layout await document.fonts.ready; // Convert logo to base64 if it exists if (this.invoice.logoUrl) { try { const logoImg = container.querySelector('.logo img'); if (logoImg) { const response = await fetch(this.invoice.logoUrl); const blob = await response.blob(); const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.readAsDataURL(blob); }); logoImg.src = base64; } } catch (error) { console.warn('Failed to convert logo to base64:', error); } } // Convert QR code SVG to base64 if it exists if (this.invoice.qrCodeSvg) { try { const qrDiv = container.querySelector('.qr-code'); if (qrDiv) { const svgElement = qrDiv.querySelector('svg'); if (svgElement) { // Set much larger dimensions for higher quality const scale = 4; // Increase this for even higher quality const size = 150 * scale; svgElement.setAttribute('width', size.toString()); svgElement.setAttribute('height', size.toString()); // Convert SVG to a data URL const svgString = new XMLSerializer().serializeToString(svgElement); const svgBlob = new Blob([svgString], { type: 'image/svg+xml' }); const url = URL.createObjectURL(svgBlob); // Create a high-res canvas const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); // Enable crisp edges ctx.imageSmoothingEnabled = false; // Create an image from the SVG const img = new Image(); img.src = url; // Wait for the image to load and render it to canvas await new Promise((resolve) => { img.onload = () => { ctx.drawImage(img, 0, 0, size, size); // Replace SVG with canvas-generated image const pngUrl = canvas.toDataURL('image/png'); const newImg = document.createElement('img'); newImg.src = pngUrl; newImg.style.width = '150px'; newImg.style.height = '150px'; qrDiv.innerHTML = ''; qrDiv.appendChild(newImg); URL.revokeObjectURL(url); resolve(); }; }); } } } catch (error) { console.warn('Failed to convert QR code to PNG:', error); } } // Wait for base64 conversions await new Promise(resolve => setTimeout(resolve, 1000)); const element = container.querySelector('#invoice-preview'); const opt = { margin: [0.5, 0.5, 0.5, 0.5], filename: 'invoice-' + this.invoice.number + '.pdf', image: { type: 'jpeg', quality: 1 }, html2canvas: { scale: 2, useCORS: true, logging: true, width: 800, windowWidth: 800, height: element.scrollHeight, onclone: (clonedDoc) => { const element = clonedDoc.getElementById('invoice-preview'); element.style.width = '800px'; element.style.margin = '0 auto'; element.style.padding = '0.5rem 1rem'; element.style.backgroundColor = 'white'; element.style.minHeight = '100%'; element.style.position = 'relative'; element.style.boxSizing = 'border-box'; } }, jsPDF: { unit: 'in', format: [8.5, 11], orientation: 'portrait' } }; // Generate PDF await html2pdf() .from(element) .set(opt) .save(); // Clean up document.body.removeChild(container); } catch (error) { console.error('Error generating PDF:', error); alert('Failed to generate PDF: ' + error.message); } }, async createInvoice() { try { await this.previewInvoice(); } catch (error) { console.error('Error creating invoice:', error); alert('Failed to create invoice'); } }, loadDemo() { this.invoice = window.getDemoInvoice(); this.calculateTotals(); this.generateQrCode(); }, resetForm() { // Store the current invoice number and id if they exist const currentNumber = this.invoice.number || ('INV-' + new Date().getTime().toString().slice(-4)); const currentId = this.invoice.id || ''; // Reset to default values this.invoice = { id: currentId, // Preserve the ID if it exists number: currentNumber, // Preserve the number if it exists date: new Date().toISOString().split('T')[0], dueDate: dayjs().add(30, 'days').format('YYYY-MM-DD'), currency: 'USD', customer: '', items: [{ description: '', quantity: 1, price: 0, total: 0 }], issuer: '', logoUrl: '', paymentLink: '', total: 0, paymentTerms: '30days', paymentInstructions: '', message: '', qrCodeSvg: '', }; // Reset the saved invoice dropdown const selectElement = document.querySelector('select[name="saved-invoices"]'); if (selectElement) { selectElement.value = ''; } // Recalculate totals this.calculateTotals(); }, async duplicateInvoice(savedInvoice) { if (typeof savedInvoice === 'string') { savedInvoice = JSON.parse(savedInvoice); } // Create a copy but remove the id and update number/date const duplicatedInvoice = { ...savedInvoice, id: undefined, number: 'INV-' + new Date().getTime().toString().slice(-4), date: new Date().toISOString().split('T')[0], savedAt: new Date().toISOString(), }; console.log("dupes", duplicatedInvoice); try { // Save to Dexie and get the new ID const newId = await this.db.invoices.add(duplicatedInvoice); // Reload the saved invoices list await this.loadSavedInvoices(); // Find the newly created invoice from savedInvoices const newInvoice = this.savedInvoices.find(inv => inv.id === newId); if (newInvoice) { // Load the new invoice into the form await this.loadInvoice(newInvoice); } alert('Invoice duplicated successfully!'); } catch (error) { console.error('Error duplicating invoice:', error); alert('Failed to duplicate invoice'); } }, async generateQrCode() { if (!this.invoice.paymentLink) return; try { const response = await fetch('/generate-qr', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ paymentLink: this.invoice.paymentLink }) }); const data = await response.json(); if (data.svg) { this.invoice.qrCodeSvg = data.svg; } } catch (error) { console.error('Error generating QR code:', error); } }, })); }); `; const getHtml = (moduleScript) => ` Fresh Invoices

Fresh Invoices

Invoice Number

Date

Currency

Who is paying?

Enter your customer's business name and complete address, including company name, street address, city, state/province, postal code, and country

A personal touch

Add a friendly message or note that will appear on your invoice. This is a great place for thank you messages or special instructions.

What's it for

List the products or services you're selling, including quantity and price for each item

Product or service

Quantity

Price

Line Total

Remove

Total

Who is getting paid?

Enter your name and business details, including address, registration/tax numbers, and other information you want to appear on the invoice

Logo URL (recommended size: 200x100px)

Payment Link (optional)

It's your responsibility to invoice your customer in line with their local laws, taxes, and regulations.

All data stays inside the browser, with IndexedDB. No data leaves the browser/client.

A micro-project built by labspace.ai. Open Source on val.town.

`; app.get("/", (c) => c.html(getHtml())); app.post("/preview", async (c) => { const data = await c.req.json(); return c.html(generateInvoiceHtml(data)); }); const handler = (typeof Deno !== "undefined" && Deno.env.get("valtown")) ? app.fetch : app; export { handler as default };

Twitter API examples & templates