'use client'; /* * Vireo Next.js — Ecommerce / Invoice details (route "ecommerce/invoice-details"). * * Faithful re-expression of src/html/ecommerce/invoice-details.html: a printable * invoice paper (parties, meta strip, line items, totals, notes) with a right * rail (payment card + status timeline), an overdue/paid banner, and header * print/download/send/edit actions. The Alpine x-data (status unpaid|paid|draft, * send animation) is ported to React state; the print stylesheet is inlined. * Classes + ARIA match the reference 1:1. */ import { useState } from 'react'; import Link from 'next/link'; import { PageHead } from '../../components/shell/PageHead'; export function InvoiceDetails() { const [status, setStatus] = useState<'unpaid' | 'paid' | 'draft'>('unpaid'); const [sent, setSent] = useState(false); const paid = () => setStatus('paid'); const doSend = () => { setSent(true); if (status === 'draft') setStatus('unpaid'); setTimeout(() => setSent(false), 2400); }; return ( <> #INV-2026-0140 {status === 'unpaid' && Unpaid} {status === 'paid' && Paid} {status === 'draft' && Draft} ) as unknown as string} subtitle={(<>Issued Jun 18, 2026 to Clayhouse Ceramics · due Jun 25, 2026.) as unknown as string} actions={ <> {status !== 'paid' && ( Edit )} } /> {/* overdue / paid banner */} {status === 'unpaid' && (

This invoice is 3 days overdue

Balance of $3,180.00 is past its due date of Jun 25, 2026.

)} {status === 'paid' && (

Invoice paid in full

Balance due is now $0.00.

)} {/* CONTENT GRID */}
{/* INVOICE PAPER (8) */}
{/* paper head */}
Vireo Inc.
Marketplace operations
Invoice
#INV-2026-0140
{/* from / to / meta */}
Billed from
Vireo Inc.
400 Market Street, Suite 1100
San Francisco · CA · 94111
United States
VAT US-8841-2207
Billed to
Clayhouse Ceramics
Attn: Mei-Ling Chen
88 Kiln Road, Unit 4
Portland · OR · 97209
United States
billing@clayhouse.io
{/* meta strip */}
Issue date
Jun 18, 2026
Due date
Jun 25, 2026
Payment terms
Net 7
{/* line items */}
Description Qty Unit price Tax Amount
{/* totals */}
Subtotal$3,168.00
Discount EARLY5−$158.40
Tax (8%)$240.77
ShippingFree
Total$3,490.37
Amount paid{status === 'paid' ? '−$3,490.37' : '−$310.37'}
Balance due{status === 'paid' ? '$0.00' : '$3,180.00'}
{/* notes / terms */}
Notes

Thanks for your continued partnership. A 5% early-payment discount was applied. Items ship from the Portland warehouse within 3 business days.

Payment details

Bank: First Republic
Account •••• 7045
Routing 021-000-021
Or pay online via the link in your email.

{/* RIGHT RAIL (4) */}
{/* responsive + print */} ); } function LineRow({ desc, sub, qty, unit, tax, amount }: { desc: string; sub: string; qty: string; unit: string; tax: string; amount: string }) { return (
{desc}
{sub}
{qty} {unit} {tax} {amount} ); } export default InvoiceDetails;