●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top app bar with avatar and notification icon, collapsible side drawer (navigation).
- Four stat cards showing revenue, customers, orders and growth with an inline progress bar.
- Two chart widgets: a bar chart (monthly sales) and a donut chart (traffic sources).
- Responsive layout using MudGrid and MudItem for cards and charts.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink
- MudGrid, MudItem, MudContainer, MudPaper
- MudIconButton, MudIcon, MudAvatar, MudText, MudSpacer
- MudChart (ChartType.Bar, ChartType.Donut), MudProgressLinear
- ChartSeries, ChartOptions arrays in code-behind
## How it works
- Drawer open/close uses two-way binding: @bind-Open="_drawerOpen" toggled by MudIconButton click.
- Charts are driven by in-file data: ChartSeries, XAxisLabels, and arrays for donut data and labels.
- Stat cards use static values in markup; MudProgressLinear shows a numeric percentage from a value property.
- No server calls or EditForm validation are present; the page uses local readonly arrays for visualization.
## Styling
- Uses MudBlazor component styling and Elevation for card shadows.
- Layout and responsiveness use MudGrid and MudItem breakpoints (xs, sm, md).
- Icons use Material icons via MudIcon; charts use MudChart sizing via Width/Height and ChartOptions.
## Reuse steps
1. Add the MudBlazor NuGet package and static assets to the project.
2. Register MudBlazor services in Program.cs (e.g., builder.Services.AddMudServices()).
3. Import MudBlazor namespace in the component or _Imports.razor.
4. Copy the page markup and chart data arrays, adjust models (ChartSeries, ChartOptions) to source real data.
5. Wire backend services, dependency injection, and authentication to populate metrics and charts dynamically.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI; it uses static in-file data and requires service wiring for live data.
- No form validation, paging, or tables are included; add APIs and state management for full admin features.
- Consider adding tooltips, interactive chart events, server-side data fetching, and accessibility attributes.