Invoice

\n ${invoice.logoUrl ? `\n

\n $\"Company$ \n

\n ` : ''}\n

Invoice number

${invoice.number}

Issue date

${formattedIssueDate}

Issued by

${invoice.issuer}

Billed to

${invoice.customer}

\n\n

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

\n \n ${invoice.message ? `\n

\n ${invoice.message}\n

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

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

\n\n

Payment Instructions

${invoice.paymentInstructions}

\n ${invoice.paymentLink ? `\n

${invoice.paymentLink}

\n ${invoice.qrCodeSvg ? `\n

\n ${invoice.qrCodeSvg}\n

\n ` : ''}\n ` : ''}\n

\n\n

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

\n \n \n`;\n}\n\nconst getDemoInvoice = () => {\n const today = new Date();\n const dueDate = new Date(today);\n dueDate.setDate(today.getDate() + 30);\n \n return {\n number: 'INV-' + new Date().getTime().toString().slice(-4),\n date: today.toISOString().split('T')[0],\n currency: 'USD',\n customer: 'Citrus & Fresh Grocery Chain\\nAttn: Accounts Payable\\n789 Retail Plaza\\nSuite 500\\nLos Angeles, CA 90017\\nUnited States',\n items: [\n {\n description: 'Premium Meyer Lemons Supply (400 lbs)',\n quantity: 1,\n price: 600,\n total: 600\n },\n {\n description: 'Cold Chain Delivery Fee',\n quantity: 1,\n price: 150,\n total: 150\n },\n {\n description: 'Organic Certification Premium',\n quantity: 1,\n price: 250,\n total: 250\n }\n ],\n total: 1000,\n paymentTerms: 'specific',\n dueDate: dueDate.toISOString().split('T')[0],\n paymentInstructions: 'Please make payment via bank transfer to:\\nBank: First Agricultural Bank\\nAccount: 1234567890\\nRouting: 987654321\\nAccount Name: Sunny Grove Citrus LLC',\n 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',\n 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',\n paymentLink: 'https://example.com/pay/demo-invoice',\n 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. 🍋✨\",\n };\n};\n\n// Add a new function for just the invoice content\nconst generateInvoiceContent = (invoice) => `\n

Invoice

Invoice #${invoice.number}

Date: ${invoice.date}

\n\n

Bill To

${invoice.customer}

From

${invoice.issuer}

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

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

\n\n

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

\n\n ${invoice.paymentInstructions ? `\n

Payment Details

${invoice.paymentInstructions}

\n ` : ''}\n

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

\n \n

Fresh Invoices

\n \n \n \n

\n \n \n \n \n

\n \n

\n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n

\n\n

\n\n \n

\n Invoice Number\n \n

\n Date\n \n

\n Currency\n

\n \n

\n\n \n

Who is paying?

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

\n \n

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.

\n \n

\n\n \n

What's it for

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

\n \n

\n Product or service\n

\n Quantity\n

\n Price\n

\n Line Total\n

\n Remove\n

\n \n \n \n \n \n

\n \n\n

\n Total\n \n

\n\n \n

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

\n \n\n \n

\n \n \n \n \n \n \n

\n \n

\n \n \n \n \n

\n\n \n

\n \n

\n Logo URL (recommended size: 200x100px)\n

\n \n \n \n

\n\n \n

\n Payment Link (optional)\n

\n \n \n \n

\n\n

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.

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

\n\n \n\n\n`;\n\napp.get(\"/\", (c) => c.html(getHtml()));\n\napp.post(\"/preview\", async (c) => {\n const data = await c.req.json();\n return c.html(generateInvoiceHtml(data));\n});\n\nconst handler = (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\nexport { handler as default };\n","deleted","label",[98],"permalink","https://www.val.town/x/yawnxyz/fresh/code/main.tsx","extension","actionData","errors"]