shadcn.io is not affiliated with official shadcn/ui
Invoice Processor File Upload Block for Radix UI
A drawn invoice beside editable vendor, number and dates and three line items with live subtotal, 8% tax and total in whole cents; Mark as processed locks every field.
Installation
Overview
Let someone check what an extractor found before an invoice is posted, with this invoice review panel for React with Radix UI. It is the review screen of Ledgerwing, an accounts-payable intake. At the start, a drawn invoice page in greys that shows the live vendor, number and total. At the end, Input fields for the vendor, the invoice number and two dates, then three line items: a description, a quantity in a Number Input, and a unit price in a decimal field, each with its amount. The subtotal, the 8% tax and the total are worked out in whole cents and follow every keystroke. Bad input is named in one reserved line: an empty vendor, a quantity that is not a whole number, a price that is not money, a due date before the invoice date. The status badge reads Pending review until the Shine Button, Mark as processed, locks every field; Reopen unlocks them. The panel is ruled by Guides. For accounts payable, expense review and any extracted form.
FAQ
Is anything read from a file?
No. The vendor, dates and lines are a typed sample, and the page says so. There is no upload on this panel: in your app, fill the same state from your extraction service and keep the editing, the checks and the totals as they are.
How are the totals worked out?
In whole cents. A line's amount is its quantity times its price in cents, the subtotal is their sum, and tax is the subtotal times the rate, divided by 100 and rounded once. The total is the two added, shown as currency. A line that is not valid shows n/a and counts as zero until it is fixed.
What does Mark as processed do?
It checks the invoice, and if nothing is wrong it locks the fields and changes the status to Processed. The fields keep their values and are read only; Reopen makes them editable again. Nothing is posted. In your app, send the lines and totals to your ledger at this step.
How do the number fields behave?
Quantity is a whole number from 1 to 9,999. The total updates as you type. The unit price is a plain decimal field so every keystroke counts, with up to two decimals.