\n \n \n \n\n","label",[182,68],"frontend","pulls","branches","forks","envVars",{"_190":26,"_192":26},"connections",{"_190":26,"_191":26},"count","unfilledCount","emptyCount",{"_33":278,"_13":182,"_66":174,"_43":-5,"_35":36,"_175":40,"_176":97,"_37":279,"_39":26,"_69":275,"_178":-5,"_70":24,"_180":-5,"_211":280,"_17":281},{"_33":273,"_13":249,"_66":243,"_43":174,"_35":36,"_175":40,"_176":97,"_37":274,"_39":26,"_69":275,"_178":-5,"_70":24,"_180":-5,"_211":276,"_17":277},{"_33":265,"_13":266,"_66":267,"_43":243,"_35":36,"_175":268,"_176":97,"_37":269,"_39":208,"_69":226,"_178":270,"_70":24,"_180":-5,"_211":271,"_17":272},{"_33":257,"_13":258,"_66":259,"_43":243,"_35":36,"_175":260,"_176":97,"_37":261,"_39":26,"_69":226,"_178":262,"_70":24,"_180":-5,"_211":263,"_17":264},{"_33":250,"_13":251,"_66":252,"_43":243,"_35":36,"_175":123,"_176":97,"_37":253,"_39":76,"_69":226,"_178":254,"_70":24,"_180":-5,"_211":255,"_17":256},{"_33":240,"_13":241,"_66":242,"_43":243,"_35":36,"_175":244,"_176":97,"_37":245,"_39":208,"_69":226,"_178":246,"_70":24,"_180":-5,"_211":247,"_17":248},{"_33":233,"_13":234,"_66":235,"_43":174,"_35":36,"_175":40,"_176":97,"_37":236,"_39":26,"_69":21,"_178":237,"_70":24,"_180":-5,"_211":238,"_17":239},{"_33":173,"_13":68,"_66":67,"_43":174,"_35":36,"_175":76,"_176":97,"_37":230,"_39":40,"_69":21,"_178":179,"_70":24,"_180":-5,"_211":231,"_17":232},{"_33":222,"_13":223,"_66":224,"_43":174,"_35":36,"_175":40,"_176":97,"_37":225,"_39":26,"_69":226,"_178":227,"_70":24,"_180":-5,"_211":228,"_17":229},{"_33":214,"_13":215,"_66":216,"_43":-5,"_35":36,"_175":217,"_176":97,"_37":218,"_39":208,"_69":21,"_178":219,"_70":24,"_180":-5,"_211":220,"_17":221},{"_33":204,"_13":205,"_66":95,"_43":-5,"_35":36,"_175":206,"_176":97,"_37":207,"_39":208,"_69":209,"_178":210,"_70":24,"_180":-5,"_211":212,"_17":213},"027b4a2d-640e-4c89-bf44-eb7f196d229e","index.ts",17,["D",1783187610988],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { nanoid } from \"npm:nanoid\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// === API Routes ===\n\n// Get all invoices (summary list)\napp.get(\"/api/invoices\", async (c) => {\n try {\n const result = await sqlite.execute({\n sql: \"SELECT id, number, date, dueDate, createdAt, updatedAt FROM invoices ORDER BY date DESC\",\n });\n\n return c.json({\n invoices: result.rows,\n });\n } catch (error) {\n return c.json({ error: String(error) }, 500);\n }\n});\n\n// Get single invoice\napp.get(\"/api/invoices/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n const result = await sqlite.execute({\n sql: \"SELECT data FROM invoices WHERE id = ?\",\n args: [id],\n });\n\n if (result.rows.length === 0) {\n return c.json({ error: \"Invoice not found\" }, 404);\n }\n\n const data = JSON.parse(result.rows[0].data as string);\n // Ensure items is always an array\n if (!data.items || !Array.isArray(data.items)) {\n data.items = [];\n }\n return c.json(data);\n } catch (error) {\n return c.json({ error: String(error) }, 500);\n }\n});\n\n// Create new invoice\napp.post(\"/api/invoices\", async (c) => {\n try {\n const invoiceData = await c.req.json();\n const id = nanoid();\n\n await sqlite.execute({\n sql: `INSERT INTO invoices (id, number, date, dueDate, data)\n VALUES (?, ?, ?, ?, ?)`,\n args: [\n id,\n invoiceData.number,\n invoiceData.date,\n invoiceData.dueDate,\n JSON.stringify(invoiceData),\n ],\n });\n\n return c.json({ id });\n } catch (error) {\n return c.json({ error: String(error) }, 500);\n }\n});\n\n// Update invoice\napp.put(\"/api/invoices/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n const invoiceData = await c.req.json();\n\n await sqlite.execute({\n sql: `UPDATE invoices \n SET number = ?, date = ?, dueDate = ?, data = ?, updatedAt = CURRENT_TIMESTAMP\n WHERE id = ?`,\n args: [\n invoiceData.number,\n invoiceData.date,\n invoiceData.dueDate,\n JSON.stringify(invoiceData),\n id,\n ],\n });\n\n return c.json({ success: true });\n } catch (error) {\n return c.json({ error: String(error) }, 500);\n }\n});\n\n// Delete invoice\napp.delete(\"/api/invoices/:id\", async (c) => {\n try {\n const id = c.req.param(\"id\");\n await sqlite.execute({\n sql: \"DELETE FROM invoices WHERE id = ?\",\n args: [id],\n });\n return c.json({ success: true });\n } catch (error) {\n return c.json({ error: String(error) }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[205],"d792f8b2-1b8a-46c5-8555-0602685c9d6f","README.md","019f2e36-6bd4-7647-aaa3-37fb6be56463",14,["D",1783187435781],"# Invoice Builder\n\nA simple invoice builder for creating and managing invoices. Create invoices, add line items, and print or save as PDF.\n\n## Features\n\n- **Home screen** — List all invoices with quick access to edit or delete\n- **Invoice editor** — Focus on line items, settings collapse by default\n- **Live preview** — See your invoice update in real time as you edit\n- **Auto-save** — Changes automatically save to the database\n- **Line items** — Add/remove items with description, quantity, and rate\n- **Print / PDF** — Clean print layout; use browser print dialog to save as PDF\n- **Pre-filled defaults** — Business and client details rarely change; edit them in settings\n\n## How to use\n\n1. **Home screen** — Click \"+ New Invoice\" to create a new invoice or \"Edit\" to modify an existing one\n2. **Add items** — Enter description, quantity, and rate for each line item\n3. **Adjust settings** — Click \"⚙ Settings\" to change invoice number, date, client, or business details\n4. **Print / Save PDF** — Click \"Print / Save PDF\" and use your browser's print dialog\n\n## File structure\n\n```\nindex.ts ← Hono server + API\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root component (navigation & auto-save)\n Home.tsx ← Invoice list & create new\n InvoiceForm.tsx ← Line items editor + settings\n InvoicePreview.tsx ← Printable invoice preview\n```\n\n## Database\n\nInvoices are stored in SQLite at `iorek/invoice-builder` with the `invoices` table:\n- `id` — Unique invoice ID\n- `number` — Invoice number (e.g., HBFANRDP-0003)\n- `date` — Issue date\n- `dueDate` — Due date\n- `createdAt` — When invoice was created\n- `updatedAt` — Last update timestamp\n- `data` — Full invoice JSON (line items, business details, etc.)\n\n## Auto-save\n\nThe app debounces changes and saves automatically 1 second after you stop typing. Look for the save status indicator in the top bar: \"✓ Saved\", \"Saving...\", or \"Unsaved changes\".\n",[],[215],"6f239b69-366f-4030-b9d7-0cc3ed97e2b6","index.tsx","019f2e36-6bd4-7647-aaa3-2cb57e923e06",["D",1783186745995],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[182,223],["D",1783186798894],[],[182,68],"cf8388c5-0404-4843-a9ea-9e320459fcca","favicon.svg","019f2e36-6bd4-7647-aaa3-25f16fe61df1",["D",1783186745995],"\n",[],[182,234],"cfe73859-d1c1-442f-992a-b0fef92b7b03","InvoicePreview.tsx","5be28de0-77cf-11f1-a81f-1607ee4eb77e","019f2e36-6bd4-7647-aaa3-219be4637385",15,["D",1783187528882],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { InvoiceData } from \"./InvoiceForm.tsx\";\nimport { currencySymbol } from \"./InvoiceForm.tsx\";\n\ninterface Props {\n invoice: InvoiceData;\n}\n\nfunction fmtDate(s: string): string {\n if (!s) return \"\";\n const d = new Date(s + \"T00:00:00\");\n return d.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n}\n\nexport function InvoicePreview({ invoice }: Props) {\n const sym = currencySymbol(invoice.currency);\n const subtotal = invoice.items.reduce(\n (sum, item) => sum + item.quantity * item.rate,\n 0,\n );\n const total = subtotal;\n\n return (\n \n {/* Header */}\n

{invoice.businessName}

INVOICE

{invoice.businessEmail}

\n\n {/* Invoice meta + Bill to, side by side */}\n

\n Invoice number\n

{invoice.number}

\n Date of issue\n

{fmtDate(invoice.date)}

\n Date due\n

{fmtDate(invoice.dueDate)}

\n\n

Bill To

{invoice.clientName}

{invoice.clientEmail}

\n\n {/* From section */}\n

From

{invoice.businessAddress}

\n {invoice.businessPhone &&

Phone: {invoice.businessPhone}

}\n

\n\n {/* Amount due highlight */}\n

\n {sym}{total.toFixed(2)} due {fmtDate(invoice.dueDate)}\n

\n\n {/* Items table */}\n \n \n \n \n \n \n \n \n \n \n {invoice.items.map((item, idx) => (\n \n \n \n \n \n \n ))}\n \n

Description	Qty	Unit Price	Amount
{item.description \|\| \"—\"}	{item.quantity % 1 === 0 ? Math.floor(item.quantity) : item.quantity.toFixed(2)}	{sym}{item.rate.toFixed(2)}	{sym}{(item.quantity * item.rate).toFixed(2)}

\n\n {/* Totals - right aligned */}\n

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

Subtotal	{sym}{subtotal.toFixed(2)}
Total	{sym}{total.toFixed(2)}
Amount due	{sym}{total.toFixed(2)}

\n\n {/* Payment & Company Details */}\n

Payment & Company Details

Bank details: {invoice.bankName}

IBAN: {invoice.iban}

BIC: {invoice.bic}

\n\n {/* VAT Info */}\n {invoice.vatInfo && (\n

\n {invoice.vatInfo}\n

\n )}\n\n {/* Notes */}\n {invoice.notes && (\n

{invoice.notes}

\n )}\n \n );\n}\n",[],[182,249,241],"components","fc0cc500-4755-4d38-8fb4-911b6e534038","InvoiceForm.tsx","5498a574-77cf-11f1-b656-1607ee4eb77e",["D",1783187640791],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport interface LineItem {\n id: string;\n description: string;\n quantity: number;\n rate: number;\n}\n\nexport interface InvoiceData {\n number: string;\n date: string;\n dueDate: string;\n currency: string;\n businessName: string;\n businessAddress: string;\n businessPhone: string;\n businessEmail: string;\n clientName: string;\n clientEmail: string;\n items: LineItem[];\n bankName: string;\n iban: string;\n bic: string;\n vatInfo: string;\n notes: string;\n}\n\nconst CURRENCIES: Record = {\n USD: \"$\",\n EUR: \"€\",\n GBP: \"£\",\n CAD: \"C$\",\n AUD: \"A$\",\n JPY: \"¥\",\n};\n\nexport function currencySymbol(code: string): string {\n return CURRENCIES[code] ?? \"$\";\n}\n\nconst inputClass =\n \"w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\";\nconst labelClass = \"block text-sm font-medium text-gray-600 mb-1\";\n\nlet itemCounter = 0;\nfunction newItem(): LineItem {\n itemCounter++;\n return { id: `item-${itemCounter}`, description: \"\", quantity: 1, rate: 0 };\n}\n\nexport function defaultInvoice(): InvoiceData {\n const today = new Date();\n const due = new Date(today);\n due.setDate(due.getDate() + 31);\n return {\n number: \"HBFANRDP-0003\",\n date: today.toISOString().slice(0, 10),\n dueDate: due.toISOString().slice(0, 10),\n currency: \"EUR\",\n businessName: \"Jeremy Vuillermet\",\n businessAddress: \"7 rue de chauzat\\n17570 Les Mathes\\nFrance\",\n businessPhone: \"+33 6 52 96 40 17\",\n businessEmail: \"jeremy@example.com\",\n clientName: \"Ecospace B.V\",\n clientEmail: \"eelke@lumax.ai\",\n items: [{ id: \"item-init\", description: \"\", quantity: 1, rate: 0 }],\n bankName: \"Revolut\",\n iban: \"FR76 2823 3000 0125 7270 9212 669\",\n bic: \"REVOFRP2\",\n vatInfo: \"TVA non applicable / VAT non applicable\\nSiret: 79760223200010 | Siren: 797 602 232 | Code APE: 5829C\",\n notes: \"\",\n };\n}\n\ninterface Props {\n invoice: InvoiceData;\n onChange: (data: InvoiceData) => void;\n}\n\nexport function InvoiceForm({ invoice, onChange }: Props) {\n const [showSettings, setShowSettings] = useState(false);\n const update = (patch: Partial) => onChange({ ...invoice, ...patch });\n\n // Ensure items is always an array\n const items = Array.isArray(invoice.items) ? invoice.items : [];\n\n const updateItem = (id: string, patch: Partial) => {\n update({\n items: items.map((item) =>\n item.id === id ? { ...item, ...patch } : item\n ),\n });\n };\n\n const addItem = () => update({ items: [...items, newItem()] });\n const removeItem = (id: string) =>\n update({ items: items.filter((item) => item.id !== id) });\n\n return (\n

\n {/* Quick actions bar */}\n

Line Items

\n setShowSettings(!showSettings)}\n class=\"text-sm text-gray-500 hover:text-gray-700 cursor-pointer\"\n >\n {showSettings ? \"⬆ Hide Settings\" : \"⚙ Settings\"}\n \n

\n\n {/* Line items editor */}\n

\n {items.map((item) => (\n updateItem(item.id, patch)}\n onRemove={() => removeItem(item.id)}\n canRemove={items.length > 1}\n />\n ))}\n

\n \n + Add Item\n \n

\n\n {/* Settings (hidden by default) */}\n {showSettings && (\n

\n {/* Invoice meta */}\n

Invoice Details

\n Invoice #\n update({ number: e.currentTarget.value })}\n />\n

\n Date\n update({ date: e.currentTarget.value })}\n />\n

\n Due Date\n update({ dueDate: e.currentTarget.value })}\n />\n

\n Currency\n update({ currency: e.currentTarget.value })}\n >\n {Object.keys(CURRENCIES).map((code) => (\n \n ))}\n \n

\n\n {/* Business info */}\n

From (Your Business)

\n Business Name\n update({ businessName: e.currentTarget.value })}\n />\n

\n Address\n update({ businessAddress: e.currentTarget.value })}\n />\n

\n Phone\n update({ businessPhone: e.currentTarget.value })}\n />\n

\n Email\n update({ businessEmail: e.currentTarget.value })}\n />\n

\n\n {/* Client info */}\n

Bill To (Client)

\n Client Name\n update({ clientName: e.currentTarget.value })}\n />\n

\n Email\n update({ clientEmail: e.currentTarget.value })}\n />\n

\n\n {/* Payment details */}\n

Payment & Company Details

\n Bank Name\n update({ bankName: e.currentTarget.value })}\n />\n

\n IBAN\n update({ iban: e.currentTarget.value })}\n />\n

\n BIC\n update({ bic: e.currentTarget.value })}\n />\n

\n VAT / Company Info\n update({ vatInfo: e.currentTarget.value })}\n />\n

\n\n {/* Notes */}\n

Additional Notes

\n Notes\n update({ notes: e.currentTarget.value })}\n placeholder=\"Optional notes (e.g., payment terms, thank you message)\"\n />\n

\n )}\n

\n );\n}\n\nfunction LineItemRow({\n item,\n sym,\n onChange,\n onRemove,\n canRemove,\n}: {\n item: LineItem;\n sym: string;\n onChange: (patch: Partial) => void;\n onRemove: () => void;\n canRemove: boolean;\n}) {\n const [focused, setFocused] = useState(false);\n return (\n

\n onChange({ description: e.currentTarget.value })}\n />\n setFocused(true)}\n onBlur={() => setFocused(false)}\n onChange={(e) => {\n const v = parseFloat(e.currentTarget.value);\n onChange({ quantity: focused ? (isNaN(v) ? 0 : v) : (isNaN(v) ? 1 : v) });\n }}\n />\n \n onChange({ rate: parseFloat(e.currentTarget.value) || 0 })\n }\n />\n \n {sym}{(item.quantity * item.rate).toFixed(2)}\n \n {canRemove && (\n \n ×\n \n )}\n

\n );\n}\n",[],[182,249,251],"3c43d3ba-a712-440a-b0db-715532f9c1ce","Home.tsx","c15ac718-77d0-11f1-ab6e-1607ee4eb77e",11,["D",1783187390595],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { defaultInvoice } from \"./InvoiceForm.tsx\";\n\ninterface InvoiceSummary {\n id: string;\n number: string;\n date: string;\n dueDate: string;\n createdAt: string;\n updatedAt: string;\n}\n\ninterface Props {\n onCreateNew: (id: string) => void;\n onSelectInvoice: (id: string) => void;\n}\n\nfunction fmtDate(s: string): string {\n if (!s) return \"\";\n const d = new Date(s + \"T00:00:00\");\n return d.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nexport function Home({ onCreateNew, onSelectInvoice }: Props) {\n const [invoices, setInvoices] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n loadInvoices();\n }, []);\n\n const loadInvoices = async () => {\n try {\n const res = await fetch(\"/api/invoices\");\n const data = await res.json();\n setInvoices(data.invoices || []);\n } catch (err) {\n setError(\"Failed to load invoices\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleCreateNew = async () => {\n try {\n const newInvoice = defaultInvoice();\n const res = await fetch(\"/api/invoices\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newInvoice),\n });\n const data = await res.json();\n onCreateNew(data.id);\n } catch (err) {\n setError(\"Failed to create invoice\");\n }\n };\n\n const handleDelete = async (id: string) => {\n if (!confirm(\"Delete this invoice?\")) return;\n try {\n await fetch(`/api/invoices/${id}`, { method: \"DELETE\" });\n await loadInvoices();\n } catch (err) {\n setError(\"Failed to delete invoice\");\n }\n };\n\n return (\n

\n {/* Header */}\n

📄 Invoices

\n \n + New Invoice\n \n

\n\n {/* Content */}\n

\n {error && (\n

\n {error}\n

\n )}\n\n {loading ? (\n

Loading invoices...

\n ) : invoices.length === 0 ? (\n

No invoices yet

\n \n Create your first invoice\n \n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {invoices.map((inv, idx) => (\n \n \n \n \n \n \n \n ))}\n \n

Invoice #	Date	Due	Updated	Actions
{inv.number}	{fmtDate(inv.date)}	{fmtDate(inv.dueDate)}	{fmtDate(inv.updatedAt)}	\n onSelectInvoice(inv.id)}\n class=\"text-blue-600 hover:text-blue-700 font-medium mr-4 cursor-pointer\"\n >\n Edit\n \n handleDelete(inv.id)}\n class=\"text-red-600 hover:text-red-700 font-medium cursor-pointer\"\n >\n Delete\n \n

\n )}\n

\n\n {/* Footer */}\n

\n View source\n

\n );\n}\n",[],[182,249,258],"7ea6aa95-d9b7-4122-8b3c-c0d0ba240909","App.tsx","019f2e36-6bd4-7647-aaa3-188cf609c70a",13,["D",1783187422386],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { InvoiceData } from \"./InvoiceForm.tsx\";\nimport { InvoiceForm } from \"./InvoiceForm.tsx\";\nimport { InvoicePreview } from \"./InvoicePreview.tsx\";\nimport { Home } from \"./Home.tsx\";\n\ntype View = \"home\" | \"editor\";\n\nexport function App() {\n const [view, setView] = useState(\"home\");\n const [currentInvoiceId, setCurrentInvoiceId] = useState(\"\");\n const [invoice, setInvoice] = useState(null);\n const [loading, setLoading] = useState(false);\n const [saveStatus, setSaveStatus] = useState<\"saved\" | \"saving\" | \"unsaved\">(\"saved\");\n\n // Auto-save invoice when it changes\n useEffect(() => {\n if (!invoice || !currentInvoiceId) return;\n\n const timer = setTimeout(async () => {\n setSaveStatus(\"saving\");\n try {\n await fetch(`/api/invoices/${currentInvoiceId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(invoice),\n });\n setSaveStatus(\"saved\");\n } catch (err) {\n setSaveStatus(\"unsaved\");\n console.error(\"Save failed:\", err);\n }\n }, 1000); // Debounce: save 1s after last change\n\n return () => clearTimeout(timer);\n }, [invoice, currentInvoiceId]);\n\n const handleCreateNew = (id: string) => {\n setCurrentInvoiceId(id);\n loadInvoice(id);\n };\n\n const handleSelectInvoice = (id: string) => {\n setCurrentInvoiceId(id);\n loadInvoice(id);\n };\n\n const loadInvoice = async (id: string) => {\n setLoading(true);\n try {\n const res = await fetch(`/api/invoices/${id}`);\n const data = await res.json();\n setInvoice(data);\n setView(\"editor\");\n setSaveStatus(\"saved\");\n } catch (err) {\n console.error(\"Failed to load invoice:\", err);\n setView(\"home\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleBackToHome = () => {\n setView(\"home\");\n setCurrentInvoiceId(\"\");\n setInvoice(null);\n };\n\n if (view === \"home\") {\n return ;\n }\n\n if (loading || !invoice) {\n return (\n

Loading invoice...

\n );\n }\n\n return (\n

\n {/* Top bar */}\n

\n \n ← Back\n \n

{invoice.number}

\n \n {saveStatus === \"saved\" ? \"✓ Saved\" :\n saveStatus === \"saving\" ? \"Saving...\" :\n \"Unsaved changes\"}\n \n window.print()}\n class=\"bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n Print / Save PDF\n \n

\n\n {/* Main content: form + preview side by side */}\n

\n {/* Form column */}\n

\n \n

\n\n {/* Preview column */}\n

\n \n

\n\n {/* Footer */}\n

\n View source\n

\n );\n}\n",[],[182,249,266],"aa103f8c-97b2-43d2-8f72-4cf36f3d4732",["D",1783186745995],"directory",[195,196,197,198],[182,249],"aa216952-4c82-4033-bfbf-d375fb8c1d85",["D",1783186745995],[194,199,200,201],[182],["D",1783186745995],["D",1789521041830],{"_11":12,"_139":73},{"_11":12,"_135":-5,"_72":73,"_30":71,"_136":137,"_138":24},{"_39":123,"_13":16,"_33":36,"_124":84,"_125":63,"_126":127,"_128":88,"_129":130,"_131":132,"_133":14,"_134":12},"ctx",{"_52":-5,"_160":320,"_321":322,"_323":324,"_325":24,"_326":24,"_327":24,"_328":97,"_329":-5,"_330":-7,"_331":-7,"_332":26,"_333":24,"_334":24,"_335":-5,"_336":24,"_337":24,"_338":24,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":16,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"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"]

History · index.html