Order Management 1 block design & features
OrderManagement1 is a full-width order list built with shadcn/ui, pairing a page title and create action with status tabs, a search field, date and payment selects, and a column visibility menu above a sortable table. Desktop rows show order ID, total, payment and fulfillment badges, customer name with a code chip, order date, and channel. Mobile switches to stacked order cards with the same status and total details.
Light surfaces with a muted table header and hairline borders. Payment badges use soft emerald, amber, and rose fills. Fulfillment badges sit beside them in muted or blue tints. Attention dots mark rows that still need work. Spacing stays compact so filters and the table share one continuous admin surface.
This reads as a practical commerce operations list rather than a marketing section. The combination of tabs, multi-filter toolbar, and dual payment plus fulfillment badges is denser than a basic table starter, but still a familiar admin pattern. Complexity is moderate and mostly content-driven: you need realistic order IDs, customer names, dates, and channel labels for the layout to feel finished.
On small screens the table hides and each order becomes a card with the same badges and a channel pill. The create order button stretches full width under the title.