Recent Orders Dashboard Block for React

Edit ORDERS. Each has an id, the customer's initials, an ISO day, a status, a shipping cost in cents and its lines (name, quantity and unit price in cents). The totals, counts and the sentence above are all worked out from those rows.

Tick any order that is not refunded, or use the mixed box in the head to tick or clear everything shown. Only the shown orders count, so changing the filter changes what the actions apply to. Mark as shipped only moves processing orders and says how many it left alone; a refunded order has no box.

An alert dialog names the number of orders and the amount, with Cancel focused first. Confirming moves them to Refunded in this page and says nothing was sent to a payment provider; Cancel or Escape changes nothing. In both cases focus returns to the Refund button.

The orders, the ticks and the moves are component state, so a reload puts them back. To wire it up, send shipping to your fulfilment system and the refund to your payment provider from server actions, and update the rows from their results.

Yes. Every checkbox and order number is a button, the order number reports whether its line items are open, the segments take the arrow keys, and the status line announces each result politely.

Each order is two lines: the number and total on the first, the customer, day and status on the second. The segments wrap, and the foot with both actions stays pinned to the bottom of the screen.