Record Not Found Error Block for React

It searches six typed records, two orders, two invoices and two customers, by the number in what you type: "ord 12346", "ORD-12346" and "12346" all find the same order, and the kind you chose decides the prefix. A hit shows the record's number, its owner and a line about it, with an Open link. A miss says that number is not there and names the nearest record of the same kind, the lower one when two are as near, with a button that uses it: pressing "Use ORD-12346" fills the field and runs the lookup. Text with no digits in it is a problem under the field instead, since there is no number to look for.

The records are the typed ENTRIES at the top of the file and the lookup runs in the browser, so nothing is requested. To wire it, replace lookupOf with a request to your API for the kind and number, show the record it returns, and keep the miss message. The Open link and "back to all orders" point at # here: link them to the record's page and your orders list. Where the nearest number is a guess, leave it out if the number might belong to a record this person may not see.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing it with the field empty, or with no digits in it, writes one sentence under the field and moves focus to it; typing clears the sentence. The line for the problem is always there, so one appearing never moves the page. Changing the kind clears the result and the problem.

Return 404 for an id that was never there or that this person may not see, and 410 for one you know was deleted. The same page can serve both. Answer in the same way for records a visitor has no right to see, so the page doesn't reveal which ids exist. The id in the inset frame is typed here (ASKED_ID): in your app, read it from the address.

The page reads the headline, the facts and then the lookup, which is the order a screen reader and the keyboard follow, so the heading comes first. On a wide screen the grid places the lookup at the start and the message at the end; the markup order doesn't change. On a phone they stack in reading order.

The headline and the inset frame come first, then the lookup, whose kind and number sit side by side so the Look up button is on the first screen. The result row keeps its height, so a hit or a miss never moves the page.