Confirm?

Are you sure you want to proceed?
?

MudBlazor Dashboard Summary Design

Clone & Customize via AI

MudBlazor Dashboard displays summary metric cards and a customer MudTable with search and select controls. Demonstrates MudTextField search, MudSelect filtering, avatar group and status chips.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Top summary cards showing metrics with icons and avatar group. - Customer listing using a MudTable with a search input and a short-by MudSelect control. - Row templates that render customer fields and MudChip status indicators. - Responsive grid layout using MudContainer and MudGrid. ## Key components - MudContainer, MudGrid, MudItem, MudPaper - MudAvatar, MudAvatarGroup, MudIcon, MudText - MudTextField (search), MudSelect, MudSelectItem - MudTable, HeaderContent, RowTemplate, MudTh, MudTd - MudChip for status display - @code block with a CustomerViewModel class ## How it works - The page initializes a local List<CustomerViewModel> in OnInitialized and binds it to MudTable Items. - MudTextField uses @bind-Value (shown as _searchString) for search state; MudSelect provides a short-by value (select items present). - MudTable renders rows via RowTemplate and uses conditional rendering to show MudChip color based on IsActive. - Interaction patterns are local and synchronous; no async data loading, paging, or server filtering is implemented. ## Styling - UI relies on MudBlazor components and default Mud theme styling. - A small custom CSS class (.icon-container-success) adjusts avatar background color in app.css. - Layout uses MudGrid breakpoints (xs, sm, md) for basic responsiveness and MudPaper elevation for card visuals. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor and include the MudBlazor CSS and JS in index.html/_Host.cshtml as required. 3. Copy the DashboardPage.razor, CustomerViewModel, and the small CSS into the project and adjust namespaces. 4. Replace the in-memory _customers list with a service or HttpClient call and implement filtering/paging as needed. 5. Optionally add sorting, server-side paging, and authentication plumbing for real data scenarios. ## Limitations & next steps - This is a single page generated by Instruct UI; it uses in-memory sample data and no persistence layer. - Add services for data access, implement async loading, server-side filtering/sorting/paging, and secure endpoints for production. - Consider enabling MudTable built-in paging/sorting and add Edit/Details dialogs (MudDialog) for CRUD operations.