[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_315":316,"_317":318},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_232":-5,"_20":233,"_22":234,"_235":236,"_237":238,"_26":239,"_24":240,"_241":242,"_243":244,"_245":51,"_246":247,"_248":75,"_249":-5,"_250":-5,"_251":252},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","iorek","name","invoice-builder","branchName","main","version","path","frontend","project",{"_36":183,"_13":14,"_38":184,"_49":-5,"_185":51,"_52":53,"_186":53,"_187":188,"_189":190,"_191":192,"_193":112,"_194":75,"_195":-5,"_196":-5,"_197":77,"_56":198,"_199":200,"_201":202,"_203":204,"_205":-5,"_206":207,"_208":207,"_209":210,"_211":210,"_212":210,"_213":207,"_214":207,"_215":216,"_217":218,"_219":220,"_50":51},"tree",[107,108,109],"file",{"_36":104,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":105,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_18":106},"contents",[60,61,62,63],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"pull","ahead",18,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":101,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_18":103},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_18":97},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_18":91},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_18":84},"6f239b69-366f-4030-b9d7-0cc3ed97e2b6","index.tsx","fileId","019f2e36-6bd4-7647-aaa3-2cb57e923e06","parentId","019f2e36-6bd4-7647-aaa3-3315e653fe7a","branchId","2ccacf26-0a3f-42db-8cee-8945735b490e","branchVersion",1,"latest",true,["D",1783186745995],0,"fileType","script","content","/** @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();","deleted","label",[19,65],"4f18b67a-e5f3-4e95-b381-e5e25aee63d1","index.html","019f2e36-6bd4-7647-aaa3-2a0e7211cbc6",5,["D",1783186798894],"\n\n \n \n \n Invoice Builder\n \n \n \n \n \n

\n \n \n \n\n",[19,86],"cf8388c5-0404-4843-a9ea-9e320459fcca","favicon.svg","019f2e36-6bd4-7647-aaa3-25f16fe61df1",["D",1783186745995],"\n",[19,93],"aa103f8c-97b2-43d2-8f72-4cf36f3d4732","components","019f2e36-6bd4-7647-aaa3-219be4637385",["D",1783186745995],"directory",[19,99],"aa216952-4c82-4033-bfbf-d375fb8c1d85",["D",1783186745995],[19],{"_36":104,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":128,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_117":129,"_18":130},{"_36":120,"_13":121,"_66":122,"_68":-5,"_70":71,"_72":123,"_74":75,"_38":124,"_17":34,"_78":24,"_80":125,"_82":51,"_83":-5,"_117":126,"_18":127},{"_36":110,"_13":111,"_66":112,"_68":-5,"_70":71,"_72":113,"_74":75,"_38":114,"_17":34,"_78":115,"_80":116,"_82":51,"_83":-5,"_117":118,"_18":119},"027b4a2d-640e-4c89-bf44-eb7f196d229e","index.ts","019f2e36-6bd4-7647-aaa3-3886f053fd2c",17,["D",1783187610988],"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",[],[111],"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",[],[121],["D",1783186745995],[131,132,133,134],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":144,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_117":145,"_18":146},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":141,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_117":142,"_18":143},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":138,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_117":139,"_18":140},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":135,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_117":136,"_18":137},["D",1783186745995],[],[19,65],["D",1783186798894],[],[19,86],["D",1783186745995],[],[19,93],["D",1783186745995],[147,148,149,150],[19,99],{"_36":175,"_13":176,"_66":177,"_68":100,"_70":71,"_72":178,"_74":75,"_38":179,"_17":34,"_78":79,"_80":180,"_82":51,"_83":-5,"_117":181,"_18":182},{"_36":167,"_13":168,"_66":169,"_68":100,"_70":71,"_72":170,"_74":75,"_38":171,"_17":77,"_78":79,"_80":172,"_82":51,"_83":-5,"_117":173,"_18":174},{"_36":159,"_13":160,"_66":161,"_68":100,"_70":71,"_72":162,"_74":75,"_38":163,"_17":88,"_78":79,"_80":164,"_82":51,"_83":-5,"_117":165,"_18":166},{"_36":151,"_13":152,"_66":153,"_68":100,"_70":71,"_72":154,"_74":75,"_38":155,"_17":34,"_78":79,"_80":156,"_82":51,"_83":-5,"_117":157,"_18":158},"cfe73859-d1c1-442f-992a-b0fef92b7b03","InvoicePreview.tsx","5be28de0-77cf-11f1-a81f-1607ee4eb77e",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",[],[19,99,152],"fc0cc500-4755-4d38-8fb4-911b6e534038","InvoiceForm.tsx","5498a574-77cf-11f1-b656-1607ee4eb77e",19,["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",[],[19,99,160],"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",[],[19,99,168],"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",[],[19,99,176],"e807eb12-458a-468e-ae80-c84ddf6dee50",["D",1783186745995],"legacyEnvVars","httpPrivacy","description","Simple invoice builder — create invoices and add line items","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789523999&sig=ddec8b74ef2383c6f8bc1f92294102b93fbe53e7cc4968800d22e8558cb46b5f","userId","6dbddadf-0fa7-4093-8637-6c10a9bfefa5","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","3e88fad9-3aac-464e-99c3-84dc222664eb","tursoName","e807eb12458a468eae80c84ddf6dee50","tursoHostname","e807eb12458a468eae80c84ddf6dee50-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789434108412],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_231":227},"org",{"_11":12,"_225":-5,"_226":227,"_191":192,"_228":229,"_230":51},"branch",{"_17":162,"_13":16,"_36":71,"_42":183,"_45":37,"_46":221,"_222":53,"_223":43,"_224":57,"_58":14,"_54":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhQQm44TURHWFBRVndhdTJUd0FkQ3VMOCIsImluaXRpYWxzIjoiSlYifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":183,"_13":14,"_38":310,"_49":-5,"_185":51,"_52":53,"_186":53,"_187":188,"_189":190,"_191":192,"_193":112,"_194":75,"_195":-5,"_196":-5,"_197":77,"_56":198,"_199":200,"_201":202,"_203":311,"_205":-5,"_206":207,"_208":207,"_209":210,"_211":210,"_212":210,"_213":207,"_214":207,"_215":312,"_217":313,"_219":314,"_50":51},[277,286,287],"files",[277,278,279,280,281,282,283,284,285,286,287],"counts",{"_268":77,"_269":73,"_270":77,"_35":271,"_272":273},[260,261,262,263],{"_36":104,"_70":71,"_66":69,"_13":19,"_80":-5,"_78":102,"_17":77,"_68":-5,"_38":258,"_72":73,"_83":-5,"_18":259},"upstreamProject",{"_36":43,"_13":59,"_187":255,"_189":190,"_52":53,"_215":256},"upstreamBranch",{"_36":37,"_38":253,"_40":254,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":55,"_231":257},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789523999&sig=17477bf80bbbb975ec406b5ce9e7fa4b3807c0792d58b2630a6396281d59b65a",["D",1783186745995],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":101,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_18":267},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_18":266},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_18":265},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_18":264},[19,65],[19,86],[19,93],[19,99],"pulls","branches","forks",{"_274":77,"_276":77},"connections",{"_274":77,"_275":77},"count","unfilledCount","emptyCount",{"_36":104,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":128,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_117":308,"_18":309},{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":144,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_117":306,"_18":307},{"_36":175,"_13":176,"_66":177,"_68":100,"_70":71,"_72":178,"_74":75,"_38":179,"_17":34,"_78":79,"_80":180,"_82":51,"_83":-5,"_117":304,"_18":305},{"_36":167,"_13":168,"_66":169,"_68":100,"_70":71,"_72":170,"_74":75,"_38":171,"_17":77,"_78":79,"_80":172,"_82":51,"_83":-5,"_117":302,"_18":303},{"_36":159,"_13":160,"_66":161,"_68":100,"_70":71,"_72":162,"_74":75,"_38":163,"_17":88,"_78":79,"_80":164,"_82":51,"_83":-5,"_117":300,"_18":301},{"_36":151,"_13":152,"_66":153,"_68":100,"_70":71,"_72":154,"_74":75,"_38":155,"_17":34,"_78":79,"_80":156,"_82":51,"_83":-5,"_117":298,"_18":299},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":141,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_117":296,"_18":297},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":138,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_117":294,"_18":295},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":135,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_117":292,"_18":293},{"_36":120,"_13":121,"_66":122,"_68":-5,"_70":71,"_72":123,"_74":75,"_38":124,"_17":34,"_78":24,"_80":125,"_82":51,"_83":-5,"_117":290,"_18":291},{"_36":110,"_13":111,"_66":112,"_68":-5,"_70":71,"_72":113,"_74":75,"_38":114,"_17":34,"_78":115,"_80":116,"_82":51,"_83":-5,"_117":288,"_18":289},[],[111],[],[121],[],[19,65],[],[19,86],[],[19,93],[],[19,99,152],[],[19,99,160],[],[19,99,168],[],[19,99,176],[279,280,281,282],[19,99],[278,283,284,285],[19],["D",1783186745995],["D",1789434108412],{"_11":12,"_231":227},{"_11":12,"_225":-5,"_226":227,"_191":192,"_228":229,"_230":51},{"_17":162,"_13":16,"_36":71,"_42":183,"_45":37,"_46":221,"_222":53,"_223":43,"_224":57,"_58":14,"_54":12},"ctx",{"_215":-5,"_250":348,"_349":350,"_351":352,"_353":51,"_354":51,"_355":51,"_356":75,"_357":-5,"_358":-7,"_359":-7,"_360":77,"_361":51,"_362":51,"_363":-5,"_364":51,"_365":51,"_366":51,"_367":-5},"ENV",{"_319":320,"_321":322,"_323":16,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347},"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"]