●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Left navigation drawer with header, profile avatar and MudNavMenu links.
- Top app bar with menu toggle and action icon buttons.
- Time-range selection via MudTabs (Tag/Monat/Jahr).
- Responsive stat cards rendered in a MudGrid with MudPaper, MudAvatar, MudProgressLinear and value text.
- Two detail panels implemented as MudCard components and a fixed MudFab for primary actions.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink
- MudTabs, MudTabPanel
- MudGrid, MudItem, MudPaper, MudCard, MudCardHeader, MudCardContent
- MudAvatar, MudIconButton, MudIcon, MudText, MudProgressLinear, MudFab
- C# model: StatCardViewModel (uses MudBlazor Color type)
## How it works
- Drawer open state is bound with @bind-Open to a private bool and toggled by ToggleDrawer().
- Stat cards are created in OnInitialized() by populating a List<StatCardViewModel> and rendered with a foreach loop.
- Components use property and attribute binding (e.g., Value, Icon, Style) and MudBlazor enums (Color, Size, Typo).
- Interaction patterns are UI-only: tab selection changes the active panel (MudTabs) but no data switching logic is implemented; FAB has no click handler in the sample.
## Styling
- Uses MudBlazor components and utility CSS classes (pa-4, ma-4, d-flex, rounded-lg, mr-3) from the MudBlazor stylesheet.
- Layout uses MudGrid/MudItem for responsive columns; MudDrawer Variant="Responsive" adapts to screen size.
- German text strings are present in the markup; localization is not wired.
## Reuse steps
1. Add the MudBlazor NuGet package and include the MudBlazor CSS in the host (import _content/MudBlazor assets).
2. Register services in Program.cs: builder.Services.AddMudServices(); and add any theme provider as needed.
3. Import namespaces (MudBlazor and the component model namespace) in _Imports.razor or the component file.
4. Copy DashboardPage.razor and StatCardViewModel.cs, update the model to use concrete types and adjust Color references to MudBlazor.Color.
5. Wire real data: replace the OnInitialized() sample data with injected services (HTTP/EF/GraphQL) and implement handlers for the FAB and tabs.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI; no backend, authentication, or data services are included.
- No form validation, edit dialogs, or table/grid data operations are implemented; add MudDialog, MudTable or MudDataGrid for CRUD workflows.
- StatCardViewModel references MudBlazor types (Color); ensure correct using statements and package references.
- Extend by adding localization, API services for dynamic values, and click handlers for FAB and navigation items.