No Invoices Empty State Block for React

Nothing leaves the page. The invoice is a row kept in the page's state, the client and the lines are whatever you typed, the due date is the fixed demo day plus 14, and the status line says "as a draft in this demo. Nothing was sent." The one real file is the PDF: a small one-page file built in the browser when you press Download PDF. To wire it for real, send the client and the priced lines to your API where the code says so, list what it returns, and let your server render the PDF.

In whole cents, never in floating point: a price like 120.50 becomes 12050 cents, each line is its quantity times that, the subtotal is their sum, and the total adds the tax. Tax is a typed constant at 0%, so the example is easy to check by hand; change TAX_PERCENT and the rounding keeps the lines summing to the total. Every figure is written by one Intl.NumberFormat in a left-to-right span, so the digits stay Western in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.

A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason in the line above it: "Name who it is for.", then "Add a line: what and its price.", then which line needs a price or a quantity. Pressing it anyway, or Enter in a field, says the same thing in the status message and moves focus to the field that is missing. Once the form is complete the line turns into a count and the total, and the button turns on.

It is built from boxes of a fixed height. A dashed box and the typed text share one place, and typing fades the dashed one out and shows the text, so nothing grows or shifts. The paper is a picture of the form, so it is hidden from assistive technology; the totals beside the form say every figure it shows. On a phone it sits below the form and drops its second line of detail, and the Create invoice button stays pinned to the bottom of the screen.

No. The form stays where it is and is only locked until you press Start over, the list row is the same height dashed or filled, and the button keeps its place with a new label, so the page never jumps. Start over empties the client and the lines, shows the dashed row again and puts focus back on the client field.

Tab runs through the client, the nine line fields, Create invoice, Start over and, once there is an invoice, Download PDF. Every line field is named by its line and its role ("Line 2, quantity"), the line under the button is tied to them, and one polite status message says what happened. After creating, focus moves to the new row's Download PDF button.