●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Sidebar navigation (MudDrawer) with search and NavGroup items.
- Top AppBar with global search, action icons and user avatar.
- KPI cards grid built with MudGrid and MudCard.
- Property carousel using MudCarousel with image badges and favorite toggle.
- Agenda list implemented with MudTable using RowTemplate and action icons.
## Key components
- MudDrawer, MudAppBar, MudContainer, MudGrid, MudCard
- MudCarousel, MudCarouselItem, MudBadge, MudIconButton
- MudTable, MudTh, MudTd, MudTextField, MudNavMenu, MudNavGroup
## How it works
- Static collections (Kpis, RecentProperties, Agenda) bind to the UI using @foreach and Items="@Agenda" for MudTable.
- Favorite toggles update PropertyModel.IsFavorite via ToggleFavorite(property) and call StateHasChanged().
- MudTable uses Breakpoint for responsive layout; MudCarousel manages slides, bullets and swipe gestures.
- Search fields are MudTextField instances; no EditForm or DataAnnotations validation is present on this page.
## Styling
- Primary UI is MudBlazor components with Mud classes (mud-width-full, Typo, Color properties).
- Additional layout utilities use Bootstrap-like classes (d-flex, ml-2, rounded-circle, justify-center) for spacing tweaks.
- Responsive behavior relies on MudGrid breakpoints and MudContainer max-width settings.
## Reuse steps
1. Install MudBlazor NuGet and call builder.Services.AddMudServices() in Program.cs.
2. Include MudBlazor CSS/theme in index.html or _Host.cshtml and import the MudBlazor namespace in components.
3. Copy the Razor page and model classes into the project Pages/Components folder.
4. Replace static lists with injected data services or APIs; register services and state management as needed.
## Limitations & next steps
- This is a single-page sample with static data and placeholder images; no persistence or backend integration is included.
- No authentication, authorization, localization, or server-side paging/filtering is wired.
- Consider adding data services, API integration, EditForm validation where items are editable, and unit/integration tests.