[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","9612e1d8-2792-11f0-9d52-569c3dd06744","name","fileType","http","content","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport \"jsr:@std/dotenv/load\";\nimport dayjs from \"npm:dayjs\";\n\nconst app = new Hono();\n\nconst generateInvoiceHtml = (invoice) => {\n const formattedDueDate = dayjs(invoice.dueDate).format('D MMMM YYYY');\n const formattedIssueDate = dayjs(invoice.date).format('D MMMM YYYY');\n \n return `\n \n \n \n \n Invoice ${invoice.number}\n \n \n \n

\n \n\n

Billed to

${invoice.customer.name}

${invoice.customer.address}

${invoice.customer.country}

Issued by

${invoice.issuer}

\n\n

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

${invoice.additionalDetails}

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

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

\n\n

\n Total excluding tax\n ${invoice.subtotal} ${invoice.currency}\n

\n Total tax\n ${invoice.tax} ${invoice.currency}\n

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

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

Payment Instructions

${invoice.paymentInstructions}

\n ` : ''}\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: {\n name: 'Banana Inc.',\n email: 'finance@banana.com',\n address: '123 Banana Street\\nFruit Valley, CA 90210',\n country: 'United States'\n },\n items: [\n {\n description: 'Premium Banana Consulting Services',\n quantity: 1,\n price: 500,\n total: 500\n },\n {\n description: 'Banana Ripening Workshop (2 hours)',\n quantity: 2,\n price: 150,\n total: 300\n },\n {\n description: 'Custom Banana Report',\n quantity: 1,\n price: 250,\n total: 250\n }\n ],\n subtotal: 1050,\n tax: 0,\n total: 1050,\n paymentTerms: 'specific',\n dueDate: dueDate.toISOString().split('T')[0],\n paymentInstructions: 'Please make payment via bank transfer to:\\nBank: Banana Bank\\nAccount: 1234567890\\nRouting: 987654321\\nAccount Name: Banana Consulting LLC',\n additionalDetails: 'Federal Tax ID (EIN): 12-3456789\\nPayment due within 30 days',\n issuer: 'Bob Banana\\n456 Plantain Ave\\nFruit Valley, CA 90210\\nUnited States',\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.name}\\n${invoice.customer.address}

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 Subtotal:\n ${invoice.subtotal.toFixed(2)} ${invoice.currency}\n

\n Tax:\n ${invoice.tax.toFixed(2)} ${invoice.currency}\n

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

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

Payment Details

${invoice.paymentInstructions}

\n ` : ''}\n\n ${invoice.additionalDetails ? `\n

Additional Details

${invoice.additionalDetails}

\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 number: 'INV-' + new Date().getTime().toString().slice(-4),\n date: new Date().toISOString().split('T')[0],\n currency: 'USD',\n customer: {\n name: '',\n email: '',\n address: '',\n country: 'United States'\n },\n items: [\n { description: '', quantity: 1, price: 0, total: 0 }\n ],\n subtotal: 0,\n tax: 0,\n total: 0,\n paymentTerms: 'specific',\n dueDate: '',\n paymentInstructions: '',\n additionalDetails: '',\n issuer: '',\n },\n savedInvoices: [],\n\n init() {\n // Initialize Dexie\n this.db.version(1).stores({\n invoices: '++id, number, date, customerName'\n });\n \n this.calculateTotals();\n this.loadSavedInvoices();\n \n // Set default due date\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 console.log('Payment terms changed:', 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 this.savedInvoices = await this.db.invoices.reverse().toArray();\n },\n\n async saveInvoice() {\n try {\n // Create a clean copy of the invoice without methods or complex structures\n const invoiceToSave = {\n ...JSON.parse(JSON.stringify(this.invoice)), // Deep clone to remove any methods\n savedAt: new Date().toISOString(),\n customerName: this.invoice.customer.name\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 await this.db.invoices.add(invoiceToSave);\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 (typeof savedInvoice === 'string') {\n savedInvoice = JSON.parse(savedInvoice);\n }\n this.invoice = { ...savedInvoice };\n this.calculateTotals();\n },\n\n async deleteInvoice(id) {\n if (confirm('Are you sure you want to delete this invoice?')) {\n await this.db.invoices.delete(id);\n await this.loadSavedInvoices();\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.subtotal = this.invoice.items.reduce((sum, item) => sum + (item.total || 0), 0);\n this.invoice.tax = 0; // You can add tax calculation logic here\n this.invoice.total = this.invoice.subtotal + this.invoice.tax;\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(generateInvoiceHtml(this.invoice));\n },\n\n async downloadPdf() {\n try {\n // Create temporary container\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.top = '0';\n container.style.left = '300px';\n container.style.width = '800px';\n container.style.backgroundColor = 'white';\n container.style.zIndex = '-9999';\n container.innerHTML = generateInvoiceHtml(this.invoice);\n document.body.appendChild(container);\n \n // Wait for fonts and layout\n await document.fonts.ready;\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.75, 0.5, 0.75], // [top, right, bottom, left] in inches\n filename: 'invoice-' + this.invoice.number + '.pdf',\n image: { type: 'jpeg', quality: 1 },\n html2canvas: { \n scale: 1,\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'; // Center the content\n element.style.padding = '2rem 3rem'; // Increase left/right padding\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], // US Letter size\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 },\n\n clearForm() {\n this.invoice = {\n number: 'INV-' + new Date().getTime().toString().slice(-4),\n date: new Date().toISOString().split('T')[0],\n currency: 'USD',\n customer: {\n name: '',\n email: '',\n address: '',\n country: 'United States'\n },\n items: [\n { description: '', quantity: 1, price: 0, total: 0 }\n ],\n subtotal: 0,\n tax: 0,\n total: 0,\n paymentTerms: 'specific',\n dueDate: '',\n paymentInstructions: '',\n additionalDetails: '',\n issuer: '',\n };\n this.calculateTotals();\n },\n\n async duplicateInvoice(savedInvoice) {\n if (typeof savedInvoice === 'string') {\n savedInvoice = JSON.parse(savedInvoice);\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 };\n this.invoice = duplicatedInvoice;\n this.calculateTotals();\n \n // Auto-save the duplicated invoice\n await this.saveInvoice();\n \n // Load the newly saved invoice (it will be the first one in the list since they're sorted by newest)\n if (this.savedInvoices.length > 0) {\n this.invoice = this.savedInvoices[0];\n // Update the dropdown to reflect the current invoice\n const selectElement = document.querySelector('select[name=\"saved-invoices\"]');\n if (selectElement) {\n selectElement.value = JSON.stringify(this.invoice);\n }\n }\n },\n }));\n });\n`;\n\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n Invoice Generator\n \n \n \n \n \n\n\n

New Invoice

\n \n

\n \n \n \n \n

\n\n

\n Saved Invoices\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\n \n

Who it's for

\n Business Name\n \n

\n Email\n \n

\n Customer Address and Country\n \n

\n\n \n

What you sold

\n \n \n \n

\n\n \n

Issued by

\n \n

\n\n \n

\n \n

\n \n \n

\n Due date\n \n

\n \n\n

\n Payment Instructions\n \n

\n\n \n

Additional details

\n (Optional)\n

Add a note or extra info, like your company registration or tax number.

\n \n

\n\n\n \n

\n Subtotal\n \n

\n Tax\n \n

\n Total\n \n

\n\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","createdAt",["D",1734478553219],"branchVersion","branchId","9610cccc-2792-11f0-9d52-569c3dd06744","id","96108438-2792-11f0-9d52-569c3dd06744","fresh",["D",1746217098484],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":160,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":161,"_79":162,"_81":163,"_83":25},"tree",[151,152],"files",[151,152],"counts",{"_141":61,"_142":132,"_143":61,"_144":145,"_146":147},"contents",[126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_31":125},"fresh.labspace.ai",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":132,"_130":49,"_38":138,"_13":61,"_33":20,"_35":139,"_24":25,"_133":-5,"_27":140},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"9617e99e-2792-11f0-9d52-569c3dd06744","parentId","latest",["D",1734478553219],1,"label",[28],"9612e6e2-2792-11f0-9d52-569c3dd06744","README.md","9612e76e-2792-11f0-9d52-569c3dd06744",["D",1734478532332],"Migrated from folder: labspace/fresh",[136],"pulls","branches","forks","envVars",{"_148":61,"_150":61},"connections",{"_148":61,"_149":61},"count","unfilledCount","emptyCount",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":132,"_130":49,"_38":157,"_13":61,"_33":20,"_35":139,"_24":25,"_133":-5,"_154":158,"_27":159},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":153,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_154":155,"_27":156},["D",1734478553219],"children",[],[28],["D",1734478532332],[],[136],["D",1746217098484],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":197,"_198":199,"_200":201,"_202":25,"_203":25,"_204":25,"_205":49,"_206":-5,"_207":-7,"_208":-7,"_209":61,"_210":25,"_211":25,"_212":-5,"_213":25,"_214":25,"_215":25,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":85,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Invoice

Invoice number

Issue date

Billed to

Issued by

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

Payment Instructions

Invoice

Bill To

From

Payment Details

Additional Details

New Invoice

Who it's for

What you sold

Issued by

Additional details

Diff · v2