●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
MudBlazor Budget Management demo page showcasing MudTable transactions and a MudChart donut.
## What's implemented
- Announcements card with image, title and read link
- Request Status summary using MudChart (donut) with custom inner SVG text showing total
- Transactions MudTable with header, RowTemplate and a Review action button
- Search TextField, sort select and Refresh button included as UI controls
- Persistent MudDrawer navigation and responsive MudGrid/MudItem layout
## Key components
- MudLayout, MudDrawer, MudAppBar, MudContainer, MudGrid, MudItem
- MudPaper, MudText, MudImage, MudLink, MudNavLink
- MudChart (ChartType.Donut) with CustomGraphics, MudTable<T> and RowTemplate
- MudTextField (@bind-Value), MudSelect, MudButton, MudStack, MudSpacer
- TransactionModel POCO and ChartOptions configuration
## How it works
- The page uses MudBlazor components and binds UI state via @bind-Open for the drawer and @bind-Value for the search TextField.
- MudTable binds Items to a static IEnumerable<TransactionModel> and renders rows with @context to access fields (UserName, TransactionId, Amount, Type, Date).
- MudChart receives a double[] InputData and ChartOptions; the CustomGraphics block inserts centered SVG text and computes a total with _chartData.Sum().
- Amount rendering uses .ToString(\"N0\", new CultureInfo(\"en-US\")) inside the RowTemplate to format values.
- The sort select and Refresh button are present but lack event handlers or bound state, so sorting and refresh behavior are not implemented in this demo.
## Styling
- Styling relies on MudBlazor theming plus a custom app.css that defines .sidebar, .transaction-table, .legend-dot, .search-field, .refresh-button and .review-button rules.
- The layout uses MudGrid/MudItem for two-column responsiveness; the drawer is a Persistent variant intended for desktop-like navigation.
## Reuse steps
1. Add the MudBlazor NuGet package and register services in Program.cs: builder.Services.AddMudServices();
2. Import MudBlazor namespaces and include MudBlazor CSS in the host page (_Host.cshtml or index.html).
3. Add the TransactionModel class and ensure ChartOptions or equivalent types are available.
4. Copy the Razor page and app.css, then replace static _transactions with an injected data service or HttpClient call.
5. Implement event handlers: bind the select value to sorting state, apply _searchString to filter the MudTable items, and add a Refresh click handler; consider server-side paging/sorting for larger datasets.
## Limitations & next steps
- This is a single-page UI sample generated by Instruct UI; backend services, authentication and real data sources are not wired.
- Search string and sort select are present but not applied to the MudTable; Refresh has no click handler.
- No server-side paging, sorting, or edit forms are implemented; Date is rendered as a string and may require mapping to DateTime.
- Next steps include wiring repositories/services, implementing filtering and paging on the MudTable, adding EditForm-based editing and integrating authentication/authorization.