shadcn.io is not affiliated with official shadcn/ui
Multi-Currency Invoice Preview Billing Block for Vue
One dollar invoice shown again in euros with a choice of three rates (issue date, today, month average): every line is converted and rounded, the VAT is worked out on the sum, the move against the issue date is listed, and the euro invoice downloads as a text file.
Installation
Overview
Show a buyer what an invoice in another currency comes to, and let them choose the rate, with this multi-currency invoice for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, a native table lists the invoice's three lines with a USD column and an EUR column, then the euro subtotal, the VAT at 19% and the total due. At the end, a side cell holds a native radio group of three rates, Issue date 0.9200, Today 0.9400 and Month average 0.9300: choosing one converts every line again, rounds each to the cent, adds the lines up and works the VAT out on that sum, so the invoice always agrees with its own lines. A list under the rates shows the rate used, the total and how far it is from the issue date's total ("+€157.44"). The only Shine Button, "Download in EUR", saves the euro invoice as a real text file. The bands are ruled by Guides and the foot is pinned on a phone, where each line shows its dollar amount and the euro one under it. It's built from a native table, native radios, Shine Button and Guides, with a CSS entrance only. For marketplaces, agencies and any invoice that crosses a border.
FAQ
How do I fill it with my invoice and rates?
Edit LINES (the dollar amounts in cents), RATES (euros per dollar in ten-thousandths, with the date each one is from) and VAT_PERCENT. Fetch the three rates from your treasury or rates provider on the server; the issue date's rate should be the one you stored when the invoice was issued, so it never changes.
Why are the lines rounded one by one?
Because a printed invoice states the sum of its lines. Converting the dollar total once and rounding would sometimes differ by a cent from the sum of the converted lines. Here each line is rounded, the subtotal is their sum, and the VAT is worked out on that subtotal and rounded, so every figure on the page can be added by hand.
Is the download real?
Yes. The button builds a text file in the browser: each line in dollars and euros, the rate and its date, and the difference against the issue date. It is saved as contractmoor-CM-3318-eur.txt. Nothing is uploaded. For a PDF, render the same numbers on your server.
What stays local?
The rates are typed constants, not live quotes, and the invoice in the demo is not sent or stored. The preview is for the buyer's books: the invoice you issued stays in dollars unless your system issues a euro one.
Is it accessible?
The table has a caption, headers and a row header for each line, and a row that has no dollar amount says so for a screen reader instead of showing a bare dash. The rates are a native radio group with a legend, so arrow keys move between them. Amounts are in one direction, and the chosen rate is marked by a border and a tint.