Blocks
v1.0.0Added in 1.0.0
The home of a back office: greeting and period, four KPIs, revenue against the previous period, recent orders, alerts and team activity.
Pick the period in the date range field (presets such as Last 7 days or Last month beside two months on desktop, a bottom sheet on phones): every panel fades to the new numbers, the KPI values count to theirs and the chart grows again. Each KPI tile is a link with a spoken name ("Revenue, $248,300, up 12.4%"); the (i) buttons explain revenue and conversion. Switch the revenue chart between Daily and Weekly (weekly needs 14 days or more), hover, tap or arrow through its points to read both periods, and click a legend entry to hide a series. The Needs attention rows are links with a count. In Recent orders, search by number or client, toggle the New, Shipping and Unpaid chips, sort by a header, select rows for the bulk bar (Confirm, Export, Cancel), open a row's menu (View, Confirm order, Print label, Cancel; Shift+F10 on a focused row) or click a row, or press Enter on it, to open the order sheet: its status, the delivery tracker with the carrier and tracking number, the products, the client and the payment, with Confirm order, Print label and Cancel in the footer. Confirming shows a spinner in the row's badge while it saves; cancelling asks first, then offers Undo in a toast for 5 seconds. The sheet slides in from the right (a tall bottom sheet on phones, drag the handle down to close), Escape closes it and focus returns to the row. On phones the orders are cards with Load more, the header keeps the period field, a + button and a menu with Export, and the KPIs sit two by two. Sections rise in once on mount; reduced motion keeps everything still.
npx wingo-ui@latest add admin-dashboard-pagePro item: the CLI needs a Pro account. See plans