'use client'; /* * Vireo Next.js — Ecommerce / Create invoice (route "ecommerce/create-invoice"). * * Faithful re-expression of src/html/ecommerce/create-invoice.html: a two-column * invoice builder — left form (client select + fields, details/terms, editable * line items, discount/shipping/notes) and a sticky right rail with a LIVE invoice * preview + totals card; a sticky bottom action bar (save draft / preview / save & * send) and a "sent" toast. All totals recompute live. The Alpine x-data * (axInvoiceBuilder) is ported to React state; classes + ARIA match the reference 1:1. */ import { useMemo, useRef, useState, type FormEvent } from 'react'; import Link from 'next/link'; import { PageHead } from '../../components/shell/PageHead'; interface Client { id: string; name: string; email: string; address: string } interface Line { id: number; desc: string; qty: number; price: number; tax: number } const CLIENTS: Client[] = [ { id: '1', name: 'Clayhouse Ceramics', email: 'billing@clayhouse.io', address: '88 Kiln Road, Unit 4\nPortland · OR · 97209 · United States' }, { id: '2', name: 'Northwind Furniture', email: 'ap@northwind.co', address: '12 Harbor Way\nSeattle · WA · 98104 · United States' }, { id: '3', name: 'Rossi Atelier Ltda.', email: 'finance@rossiatelier.com', address: 'Av. Paulista 2100, Sala 14\nSão Paulo · SP · 01310-930 · Brazil' }, { id: '4', name: 'Voltic Supply Co.', email: 'accounts@voltic.co', address: '400 Circuit Ave\nAustin · TX · 78701 · United States' }, ]; export function CreateInvoice() { const [clientId, setClientId] = useState(''); const [sent, setSent] = useState(false); const [draftSaved, setDraftSaved] = useState(false); const [client, setClient] = useState({ name: '', email: '', address: '' }); const [meta, setMeta] = useState({ number: '#INV-2026-0143', currency: 'USD', issued: '2026-06-28', due: '2026-07-12', terms: '14' }); const [lines, setLines] = useState([ { id: 1, desc: 'Glazed stoneware mug — wholesale pack of 12', qty: 40, price: 42.0, tax: 8 }, { id: 2, desc: 'Matte carafe — 1.2L, slate finish', qty: 18, price: 52.0, tax: 8 }, { id: 3, desc: 'Marketplace listing fee — Q3 2026', qty: 1, price: 120.0, tax: 0 }, ]); const [adj, setAdj] = useState({ discount: 5, discountType: 'pct', shipping: 0, notes: '' }); const seed = useRef(4); const money = (n: number) => { const s = meta.currency === 'EUR' ? '€' : meta.currency === 'GBP' ? '£' : '$'; return s + Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; const applyClient = (id: string) => { setClientId(id); if (id === 'new') { setClient({ name: '', email: '', address: '' }); return; } const c = CLIENTS.find((x) => x.id === id); if (c) setClient({ name: c.name, email: c.email, address: c.address }); }; const applyTerms = (terms: string) => { const d = new Date(meta.issued + 'T00:00:00'); const add = terms === 'receipt' ? 0 : parseInt(terms, 10); d.setDate(d.getDate() + add); setMeta((m) => ({ ...m, terms, due: d.toISOString().slice(0, 10) })); }; const lineAmount = (li: Line) => (li.qty || 0) * (li.price || 0); const addLine = () => { seed.current += 1; setLines((l) => [...l, { id: seed.current, desc: '', qty: 1, price: 0, tax: 0 }]); }; const removeLine = (i: number) => { if (lines.length > 1) setLines((l) => l.filter((_, idx) => idx !== i)); }; const updateLine = (i: number, patch: Partial) => setLines((l) => l.map((li, idx) => (idx === i ? { ...li, ...patch } : li))); const subtotal = useMemo(() => lines.reduce((t, li) => t + lineAmount(li), 0), [lines]); const discountAmt = useMemo(() => (adj.discountType === 'pct' ? subtotal * ((adj.discount || 0) / 100) : adj.discount || 0), [adj.discountType, adj.discount, subtotal]); const taxTotal = useMemo(() => { const dr = subtotal > 0 ? discountAmt / subtotal : 0; return lines.reduce((t, li) => t + lineAmount(li) * (1 - dr) * ((li.tax || 0) / 100), 0); }, [lines, subtotal, discountAmt]); const total = Math.max(0, subtotal - discountAmt + taxTotal + (adj.shipping || 0)); const saveDraft = () => { setDraftSaved(true); try { localStorage.setItem('ax:ecom:invoiceDraft', JSON.stringify({ client, meta, lines, adj })); } catch { /* ignore */ } setTimeout(() => setDraftSaved(false), 2000); }; const saveSend = (e: FormEvent) => { e.preventDefault(); setSent(true); window.scrollTo({ top: 0, behavior: 'smooth' }); setTimeout(() => setSent(false), 3000); }; return ( <> Cancel } /> {/* sent toast */} {sent && (

Invoice sent

{meta.number} was emailed to the client and marked Unpaid.

)} {/* CONTENT GRID */}
{/* LEFT FORM (7) */}
{/* CLIENT */}

Client

Pick an existing customer or enter a new one.

setClient((c) => ({ ...c, name: e.target.value }))} placeholder="Clayhouse Ceramics" />
setClient((c) => ({ ...c, email: e.target.value }))} placeholder="billing@clayhouse.io" />