Confirm?

Are you sure you want to proceed?
A
Aaron Hong

Virtual Servers Dashboard Design

Clone & Customize via AI

The MudBlazor Dashboard displays virtual server services using a server-side MudTable with paging and MudSelect filters. It also includes a persistent MudDrawer navigation and status chips.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Hosting dashboard layout with app bar, persistent drawer navigation and main content area. - Server-side MudTable with paging, sorting and a MudTablePager. - Type filter implemented with MudSelect to apply server-side filtering. - Status display using MudChip and server list rows rendered via a RowTemplate. - Mock data initialization and simulated latency for server reloads. ## Key components - MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink - MudTable<T> with ServerData callback, MudTableSortLabel, MudTablePager - MudSelect, MudSelectItem - MudChip, MudContainer, MudAvatar, MudIconButton, MudText, MudSpacer - VirtualServerModel (Id, Name, Type, Status, IPAddress, MonthlyCost) ## How it works - Data flow relies on a ServerReload(TableState, CancellationToken) callback assigned to MudTable.ServerData to provide TableData<T> for server-side paging. - Filtering is applied by storing a _typeFilter and calling _table.ReloadServerData() when MudSelect ValueChanged triggers OnTypeFilterChanged. - Sorting reads state.SortLabel and state.SortDirection to order the IEnumerable before paging; paging uses state.Page and state.PageSize. - UI references the table via @ref to programmatically trigger reloads. Status color mapping is provided by GetStatusColor returning MudBlazor Color values. - Task.Delay simulates network latency; replace with real async data service calls. ## Styling - Uses MudBlazor components and theme colors (no Tailwind or Bootstrap utility classes present). - Drawer is a persistent variant for desktop; components use MudBlazor spacing and elevation (mud-elevation-1, mud-background-surface) for visual grouping. - Table is Dense and Hover-enabled; Breakpoint.Sm controls responsive behavior on small screens. ## Reuse steps 1. Add the MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs. 2. Include MudBlazor CSS and the icon set in index.html/_Host.cshtml and configure a MudTheme if needed. 3. Import MudBlazor namespaces in the consuming Razor files or _Imports.razor. 4. Add VirtualServerModel or adapt to an existing model and replace the mock _serverData with an injected data service (use async calls in ServerReload). 5. Wire authentication/authorization and real navigation links for the MudNavLink items. ## Limitations & next steps - This is a single-page showcase generated by Instruct UI and uses in-memory mock data; no backend, DI services or auth are provided. - Sorting logic reads state.SortLabel; consider adding explicit column sort identifiers and stable ordering when multiple sorts are required. - Replace Task.Delay and mock generation with a paged API call that returns total count and items. - Add row actions (details, edit, delete) via MudDialog or context menu and integrate real billing/support pages.