Ecommerce Dashboard with Sales and Orders

Shadcn UI Dashboard Block

Dashboard4 is an e-commerce operations dashboard built with Shadcn UI, featuring a collapsible sidebar and a main content area organized into stat cards, a sales by category panel (MTD gross), and a paginated orders table. The sidebar includes grouped navigation with nested menus, a logo section, and a user profile dropdown. The main area has a header with search and notifications, then opens with stat cards for gross sales, completed orders, new customers, and refund value. The category panel breaks down MTD gross sales by product category with interactive hover highlighting and a companion table of order volume and growth per category. The orders table includes a Category column, search (including category text), status filtering via dropdown, and pagination controls with URL state persistence.

The design uses card-based sections on a muted background with consistent border radii. The sales-by-category panel features a proportional bar visualization where hovering a segment highlights it and dims others. The orders table has status badges with semantic colors for different order states. Charts compare gross sales to the prior year using a monochromatic primary palette. Typography is restrained with small labels and medium-weight values. Hover states provide subtle feedback throughout.

This is a moderately complex dashboard focused on order fulfillment and sales health. The interactive category panel helps users scan how MTD gross sales splits across merchandising categories alongside order counts and trends. The orders table with combined search, filter, and pagination is a complete data management interface. Complexity is code-driven through the hover state logic and URL-synced filter state. Requires order data with status, category, amounts, and timestamps, plus category-level sales and order metrics to populate.