\n \n \n \n\n",[],[156,199],"cf8388c5-0404-4843-a9ea-9e320459fcca","favicon.svg","019f2e36-6bd4-7647-aaa3-25f16fe61df1",["D",1783186745995],"\n",[],[156,207],"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",[],[156,222,214],"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",[],[156,222,224],"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",[],[156,222,231],"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",[],[156,222,239],"aa103f8c-97b2-43d2-8f72-4cf36f3d4732",["D",1783186745995],[174,175,176,177],[156,222],["D",1783186745995],[173,178,179,180],[156],["D",1783186745995],["D",1789521041830],{"_16":17,"_91":87},{"_16":17,"_85":-5,"_86":87,"_34":35,"_88":89,"_90":26},{"_69":70,"_20":71,"_18":72,"_73":19,"_74":75,"_76":77,"_78":28,"_79":80,"_81":82,"_83":21,"_84":17},"ctx",{"_62":-5,"_114":291,"_292":293,"_294":295,"_296":26,"_297":26,"_298":26,"_299":39,"_300":-5,"_301":-7,"_302":-7,"_303":43,"_304":26,"_305":26,"_306":-5,"_307":26,"_308":26,"_309":26,"_310":-5},"ENV",{"_262":263,"_264":265,"_266":71,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290},"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"]

Search