\n \n \n \n\n",[120,110],"8a70d904016d430ad02c0679d9cb70797c3d54614db11d9406bdda0bd2559229","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[120,110],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":144,"_13":134,"_81":145,"_83":146,"_84":33,"_85":147,"_87":26,"_34":148,"_40":113,"_89":139,"_91":149,"_66":48,"_93":-5,"_94":-7,"_74":150,"_96":151},{"_32":133,"_13":134,"_81":135,"_83":136,"_84":58,"_85":137,"_87":26,"_34":138,"_40":22,"_89":139,"_91":140,"_66":48,"_93":-5,"_94":-7,"_74":141,"_96":142},"7ea6aa95-d9b7-4122-8b3c-c0d0ba240909","App.tsx","019f2e36-6bd4-7647-aaa3-188cf609c70a","019f2e36-6bd4-7647-aaa3-219be4637385",13,["D",1783187422386],"script","/** @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",[120,143,134],"e8ad056ea050ba8d99b1d8e021ab2e247701b166cab333ec413514562f848453","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[120,143,134],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":162,"_13":152,"_81":163,"_83":-5,"_84":33,"_85":60,"_87":48,"_34":164,"_40":165,"_89":116,"_91":166,"_66":48,"_93":-5,"_94":-7,"_74":167,"_96":168},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_87":26,"_34":158,"_40":22,"_89":116,"_91":159,"_66":48,"_93":-5,"_94":-7,"_74":160,"_96":161},"d792f8b2-1b8a-46c5-8555-0602685c9d6f","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",[152],"1c0a7dd6be4fe3ac5d2fa0577398395cc8cdb5093db54a704a4d333461ba213b","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[152],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":170,"_76":171,"_78":-7},"frontend/components/Counter.tsx",{"_32":172,"_13":173,"_81":174,"_83":146,"_84":33,"_85":175,"_87":26,"_34":176,"_40":177,"_89":139,"_91":178,"_66":48,"_93":-5,"_94":-7,"_74":179,"_96":180},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[120,143,173],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":202,"_76":-7,"_78":203},{"_74":193,"_76":-7,"_78":194},{"_74":184,"_76":-7,"_78":185},"frontend/components/InvoicePreview.tsx",{"_32":186,"_13":187,"_81":188,"_83":136,"_84":58,"_85":102,"_87":26,"_34":189,"_40":22,"_89":139,"_91":190,"_66":48,"_93":-5,"_94":-7,"_74":191,"_96":192},"cfe73859-d1c1-442f-992a-b0fef92b7b03","InvoicePreview.tsx","5be28de0-77cf-11f1-a81f-1607ee4eb77e",["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",[120,143,187],"7f92202c8ca58177a4b11f05507e762a6c247fd05fcd66bfad5548f86bde8910","frontend/components/InvoiceForm.tsx",{"_32":195,"_13":196,"_81":197,"_83":136,"_84":58,"_85":57,"_87":26,"_34":198,"_40":113,"_89":139,"_91":199,"_66":48,"_93":-5,"_94":-7,"_74":200,"_96":201},"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",[120,143,196],"f0728a951dad6931410a1494af90d4f91b092b1cb78c3dbe1684256d2d3e6570","frontend/components/Home.tsx",{"_32":204,"_13":205,"_81":206,"_83":136,"_84":58,"_85":207,"_87":26,"_34":208,"_40":177,"_89":139,"_91":209,"_66":48,"_93":-5,"_94":-7,"_74":210,"_96":211},"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",[120,143,205],"82750891fbbdc894e3b778a1a489594821b6c9202b86b646e12ed11ed9fc9e79",["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=1789527599&sig=0d894086c0af42ecb01197039479c0fffb55aba894accf0a0e78adbfe9ad755c","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,"_254":250},"org",{"_11":12,"_248":-5,"_249":250,"_219":220,"_251":252,"_253":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhQQm44TURHWFBRVndhdTJUd0FkQ3VMOCIsImluaXRpYWxzIjoiSlYifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":350,"_46":-5,"_213":48,"_49":50,"_214":50,"_215":216,"_217":218,"_219":220,"_221":82,"_222":26,"_223":-5,"_224":-5,"_225":177,"_53":226,"_227":228,"_229":230,"_231":351,"_233":-5,"_234":235,"_236":235,"_237":238,"_239":238,"_240":238,"_241":235,"_242":235,"_243":352,"_245":353,"_247":354,"_47":48},"tree",[304,313,314],"files",[304,305,306,307,308,309,310,311,312,313,314],"counts",{"_294":177,"_295":115,"_296":177,"_297":298,"_299":300},"contents",[283,284,285],"upstreamProject",{"_32":39,"_13":56,"_215":280,"_217":218,"_49":50,"_243":281},"upstreamBranch",{"_32":33,"_34":278,"_36":279,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":52,"_254":282},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789527599&sig=c0420a404df732002c03eca9bce405b755065f984097bbe146cb490e828e28ea",{"_32":290,"_13":120,"_81":112,"_83":-5,"_84":58,"_85":115,"_87":26,"_34":291,"_40":177,"_89":292,"_91":-5,"_66":48,"_93":-5,"_74":293},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_87":26,"_34":288,"_40":22,"_89":116,"_91":159,"_66":48,"_93":-5,"_74":289},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":286,"_40":22,"_89":90,"_91":92,"_66":48,"_93":-5,"_74":287},["D",1783187610988],[75],["D",1783187435781],[152],"aa216952-4c82-4033-bfbf-d375fb8c1d85",["D",1783186745995],"directory",[120],"pulls","branches","forks","envVars",{"_301":177,"_303":177},"connections",{"_301":177,"_302":177},"count","unfilledCount","emptyCount",{"_32":290,"_13":120,"_81":112,"_83":-5,"_84":58,"_85":115,"_87":26,"_34":347,"_40":177,"_89":292,"_91":-5,"_66":48,"_93":-5,"_94":348,"_74":349},{"_32":343,"_13":143,"_81":136,"_83":112,"_84":58,"_85":115,"_87":26,"_34":344,"_40":177,"_89":292,"_91":-5,"_66":48,"_93":-5,"_94":345,"_74":346},{"_32":133,"_13":134,"_81":135,"_83":136,"_84":58,"_85":137,"_87":26,"_34":138,"_40":22,"_89":139,"_91":140,"_66":48,"_93":-5,"_94":341,"_74":342},{"_32":204,"_13":205,"_81":206,"_83":136,"_84":58,"_85":207,"_87":26,"_34":208,"_40":177,"_89":139,"_91":209,"_66":48,"_93":-5,"_94":339,"_74":340},{"_32":195,"_13":196,"_81":197,"_83":136,"_84":58,"_85":57,"_87":26,"_34":198,"_40":113,"_89":139,"_91":199,"_66":48,"_93":-5,"_94":337,"_74":338},{"_32":186,"_13":187,"_81":188,"_83":136,"_84":58,"_85":102,"_87":26,"_34":189,"_40":22,"_89":139,"_91":190,"_66":48,"_93":-5,"_94":335,"_74":336},{"_32":328,"_13":329,"_81":330,"_83":112,"_84":58,"_85":115,"_87":26,"_34":331,"_40":177,"_89":116,"_91":332,"_66":48,"_93":-5,"_94":333,"_74":334},{"_32":109,"_13":110,"_81":111,"_83":112,"_84":58,"_85":113,"_87":26,"_34":114,"_40":115,"_89":116,"_91":117,"_66":48,"_93":-5,"_94":326,"_74":327},{"_32":319,"_13":320,"_81":321,"_83":112,"_84":58,"_85":115,"_87":26,"_34":322,"_40":177,"_89":139,"_91":323,"_66":48,"_93":-5,"_94":324,"_74":325},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_87":26,"_34":158,"_40":22,"_89":116,"_91":159,"_66":48,"_93":-5,"_94":317,"_74":318},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":88,"_40":22,"_89":90,"_91":92,"_66":48,"_93":-5,"_94":315,"_74":316},[],[75],[],[152],"6f239b69-366f-4030-b9d7-0cc3ed97e2b6","index.tsx","019f2e36-6bd4-7647-aaa3-2cb57e923e06",["D",1783186745995],"/** @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();",[],[120,320],[],[120,110],"cf8388c5-0404-4843-a9ea-9e320459fcca","favicon.svg","019f2e36-6bd4-7647-aaa3-25f16fe61df1",["D",1783186745995],"\n",[],[120,329],[],[120,143,187],[],[120,143,196],[],[120,143,205],[],[120,143,134],"aa103f8c-97b2-43d2-8f72-4cf36f3d4732",["D",1783186745995],[306,307,308,309],[120,143],["D",1783186745995],[305,310,311,312],[120],["D",1783186745995],["D",1789434108412],{"_11":12,"_254":250},{"_11":12,"_248":-5,"_249":250,"_219":220,"_251":252,"_253":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_243":-5,"_275":388,"_389":390,"_391":392,"_393":48,"_394":48,"_395":48,"_396":26,"_397":-5,"_398":-7,"_399":-7,"_400":177,"_401":48,"_402":48,"_403":-5,"_404":48,"_405":48,"_406":48,"_407":-5},"ENV",{"_359":360,"_361":362,"_363":16,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387},"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"]

Compare

Mergeiorek/mainintotemplates/main

README.md+33-47

frontend/components/App.tsx+128-6

frontend/index.html+9-3

Hindex.ts+105-5

frontend/components/Home.tsx+160-0

frontend/components/InvoiceForm.tsx+364-0

frontend/components/InvoicePreview.tsx+145-0

frontend/components/Counter.tsx+0-18