[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_274":275,"_276":277},"routes/_app.x.$handle.$name",{"_110":109,"_38":50,"_118":96,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":31,"_135":136,"_137":65,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",14,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","a91e3b1a-c3d2-4b6c-8150-17222fef2ec4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f2e36-6bd4-7647-aaa3-37fb6be56463","name","fileType","content","# Invoice Builder\n\nA simple invoice builder — create invoices, add line items, and print or save as PDF.\n\n## Features\n\n- **Live preview** — see your invoice update in real time as you type\n- **Line items** — add, edit, and remove items with description, quantity, and rate\n- **Tax support** — configurable tax rate with automatic calculation\n- **Multiple currencies** — USD, EUR, GBP, CAD, AUD, JPY\n- **Print / Save PDF** — clean print layout via the browser's print dialog\n- **Pre-filled defaults** — business and client info are editable in the form\n\n## How to use\n\n1. Fill in your business details and client details in the form\n2. Add line items with descriptions, quantities, and rates\n3. Set tax rate if applicable\n4. Click **Print / Save PDF** to print or save as PDF\n\n## File structure\n\n```\nindex.ts ← Hono server (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root component (layout + print button)\n InvoiceForm.tsx ← Editable invoice form\n InvoicePreview.tsx ← Printable invoice preview\n```\n","# 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","createdAt",["D",1783187435781],"branchVersion","branchId","2ccacf26-0a3f-42db-8cee-8945735b490e","id","e807eb12-458a-468e-ae80-c84ddf6dee50","invoice-builder",["D",1783186745995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Simple invoice builder — create invoices and add line items","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789567199&sig=be2da3e537d6269cefeedcb88843ac66f83d7a4623f50e71633938e44918ec3c","6dbddadf-0fa7-4093-8637-6c10a9bfefa5","pinnedFileId","019f2e36-6bd4-7647-aaa3-3886f053fd2c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","3e88fad9-3aac-464e-99c3-84dc222664eb","tursoName","e807eb12458a468eae80c84ddf6dee50","tursoHostname","e807eb12458a468eae80c84ddf6dee50-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521041830],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_117":113},"org",{"_110":109,"_111":-5,"_112":113,"_19":61,"_114":115,"_116":31},"branch",{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"isOwned",19,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","iorek","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhQQm44TURHWFBRVndhdTJUd0FkQ3VMOCIsImluaXRpYWxzIjoiSlYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":269,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":270,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":271,"_90":272,"_92":273,"_94":31},"tree",[187,196,197],"files",[187,188,189,190,191,192,193,194,195,196,197],"counts",{"_177":69,"_178":162,"_179":69,"_180":181,"_182":183},"contents",[153,154,155],"upstreamProject",{"_48":104,"_38":149,"_57":150,"_59":60,"_54":55,"_88":151},"upstreamBranch",{"_48":99,"_43":142,"_143":144,"_38":96,"_97":104,"_13":145,"_98":-5,"_100":-5,"_146":147,"_52":-5,"_94":31,"_54":55,"_108":148,"_70":106,"_107":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_110":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789567199&sig=d8af4f1d5d6ef07a152f6225f86a0227f22fe92650a7f9572d94a5f64256bba9",{"_48":171,"_38":172,"_36":173,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":174,"_13":69,"_39":175,"_40":-5,"_30":31,"_165":-5,"_33":176},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":65,"_43":168,"_13":169,"_39":26,"_40":42,"_30":31,"_165":-5,"_33":170},{"_48":156,"_38":157,"_36":63,"_158":-5,"_46":47,"_45":159,"_160":31,"_43":161,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_33":166},"a6582969-b7d4-474f-bb48-6169764d862a","index.ts","parentId",10,"latest",["D",1783187379579],1,"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 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","label",[157],"d792f8b2-1b8a-46c5-8555-0602685c9d6f",["D",1783187435781],2,[34],"aa216952-4c82-4033-bfbf-d375fb8c1d85","frontend","019f2e36-6bd4-7647-aaa3-3315e653fe7a",["D",1783186745995],"directory",[172],"pulls","branches","forks","envVars",{"_184":69,"_186":69},"connections",{"_184":69,"_185":69},"count","unfilledCount","emptyCount",{"_48":171,"_38":172,"_36":173,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":266,"_13":69,"_39":175,"_40":-5,"_30":31,"_165":-5,"_199":267,"_33":268},{"_48":262,"_38":237,"_36":231,"_158":173,"_46":47,"_45":162,"_160":65,"_43":263,"_13":69,"_39":175,"_40":-5,"_30":31,"_165":-5,"_199":264,"_33":265},{"_48":254,"_38":255,"_36":256,"_158":231,"_46":47,"_45":257,"_160":65,"_43":258,"_13":169,"_39":209,"_40":259,"_30":31,"_165":-5,"_199":260,"_33":261},{"_48":246,"_38":247,"_36":248,"_158":231,"_46":47,"_45":249,"_160":65,"_43":250,"_13":69,"_39":209,"_40":251,"_30":31,"_165":-5,"_199":252,"_33":253},{"_48":238,"_38":239,"_36":240,"_158":231,"_46":47,"_45":241,"_160":31,"_43":242,"_13":169,"_39":209,"_40":243,"_30":31,"_165":-5,"_199":244,"_33":245},{"_48":228,"_38":229,"_36":230,"_158":231,"_46":47,"_45":232,"_160":31,"_43":233,"_13":162,"_39":209,"_40":234,"_30":31,"_165":-5,"_199":235,"_33":236},{"_48":221,"_38":222,"_36":223,"_158":173,"_46":47,"_45":162,"_160":65,"_43":224,"_13":69,"_39":26,"_40":225,"_30":31,"_165":-5,"_199":226,"_33":227},{"_48":213,"_38":214,"_36":215,"_158":173,"_46":47,"_45":216,"_160":65,"_43":217,"_13":162,"_39":26,"_40":218,"_30":31,"_165":-5,"_199":219,"_33":220},{"_48":205,"_38":206,"_36":207,"_158":173,"_46":47,"_45":162,"_160":65,"_43":208,"_13":69,"_39":209,"_40":210,"_30":31,"_165":-5,"_199":211,"_33":212},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":65,"_43":202,"_13":169,"_39":26,"_40":42,"_30":31,"_165":-5,"_199":203,"_33":204},{"_48":156,"_38":157,"_36":63,"_158":-5,"_46":47,"_45":159,"_160":31,"_43":198,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_199":200,"_33":201},["D",1783187379579],"children",[],[157],["D",1783187435781],[],[34],"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();",[],[172,206],"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",[],[172,214],"cf8388c5-0404-4843-a9ea-9e320459fcca","favicon.svg","019f2e36-6bd4-7647-aaa3-25f16fe61df1",["D",1783186745995],"\n",[],[172,222],"bcb5f9f8-eee0-4886-94cf-74e714499621","InvoicePreview.tsx","5be28de0-77cf-11f1-a81f-1607ee4eb77e","019f2e36-6bd4-7647-aaa3-219be4637385",9,["D",1783187270644],"/** @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

\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",[],[172,237,229],"components","ba022345-b9b7-499d-aae0-a9ffc3267efc","InvoiceForm.tsx","5498a574-77cf-11f1-b656-1607ee4eb77e",12,["D",1783187410884],"/** @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: [newItem()],\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 const updateItem = (id: string, patch: Partial) => {\n update({\n items: invoice.items.map((item) =>\n item.id === id ? { ...item, ...patch } : item\n ),\n });\n };\n\n const addItem = () => update({ items: [...invoice.items, newItem()] });\n const removeItem = (id: string) =>\n update({ items: invoice.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 {invoice.items.map((item) => (\n updateItem(item.id, patch)}\n onRemove={() => removeItem(item.id)}\n canRemove={invoice.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",[],[172,237,239],"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",[],[172,237,247],"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",[],[172,237,255],"aa103f8c-97b2-43d2-8f72-4cf36f3d4732",["D",1783186745995],[189,190,191,192],[172,237],["D",1783186745995],[188,193,194,195],[172],["D",1783186745995],["D",1789521041830],{"_110":109,"_117":113},{"_110":109,"_111":-5,"_112":113,"_19":61,"_114":115,"_116":31},{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"ctx",{"_88":-5,"_139":307,"_308":309,"_310":311,"_312":31,"_313":31,"_314":31,"_315":65,"_316":-5,"_317":-7,"_318":-7,"_319":69,"_320":31,"_321":31,"_322":-5,"_323":31,"_324":31,"_325":31,"_326":-5},"ENV",{"_278":279,"_280":281,"_282":96,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306},"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"]

Diff · v14