No Expenses Empty State Block for React

Everything. The tape is state in the page: nothing is saved, exported or synced, the budget of $500.00 is a typed constant and every expense is dated with the demo's fixed day, so a reload empties it. To wire it for real, send the amount and category to your API where the code says so, list what it returns instead of the typed state, and read the budget from the account.

In whole cents. A typed 12.50 becomes 1250, the total is the sum of the cents on the tape, the bar is that over the budget as a rounded percentage that stops at 100, and the words say "$487.50 to go this month" or "Over budget by $112.50" from the same number. One number formatter writes every figure, in a left-to-right span, so the digits stay Western digits in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.

It is a real ordered list, named "Receipt tape", with a row for each expense; the five places under the shop name are drawn, so the unused ones are dashed boxes hidden from assistive technology and the first says "Next expense". Holding five keeps the panel the same height with one expense or five. When it is full the button stays in place but quiet and says so, and Start over clears the tape and puts focus back on the amount.

Add expense is always there. Pressing it with nothing, or with text that is not an amount of up to four whole digits and two decimals, writes "Type an amount like 12.50." under the field, marks the field invalid and moves focus to it. The message sits in a reserved line, so the form below it does not move.

The bands stack: the budget, the two fields, then the tape, and the foot with Add expense is pinned to the bottom of the screen so the button is always on the first screen. The tape never scrolls sideways, and the status line has room for three lines so a longer message does not move the buttons.

Tab runs through the amount, the category, Add expense and Start over; Enter in the amount adds the expense. The category is a native select, so its keys and its picker are the system's own. One polite status message says every change, such as "Added Meals $12.50 in this demo. $487.50 to go this month.", and after an add focus returns to the amount for the next one. The bar is decoration, and the same figures are in the words above it.