Confirm?

Are you sure you want to proceed?
L
Laurens

Modern Budget Activity Dashboard Design

Clone & Customize via AI

MudBlazor Dashboard that presents activity groups, per-item rates and point totals using MudCard and MudProgressLinear. Includes grouped cards and a compact progress summary for Blazor apps.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Top-level summary card showing period, budget text and a MudProgressLinear progress bar. - Repeating activity group cards with header color, icon and multiple item tiles. - Item tiles rendered as MudPaper blocks with rate, contacts and formatted points. - Use of chips, icons and typographic variants for compact visual hierarchy. ## Key components - MudContainer, MudStack, MudCard, MudCardHeader, MudCardContent - MudChip, MudProgressLinear, MudText, MudIcon - MudGrid, MudItem, MudPaper - C# models ActivityGroupViewModel and ActivityItemModel, OnInitialized lifecycle ## How it works - UI is driven by C# properties and lists populated in OnInitialized; the component uses foreach to render groups and items. - BudgetPercentage is a computed double based on CurrentPoints/TotalPoints and is bound to MudProgressLinear Value. - Typographic and icon elements are static; no form inputs or EditForm validation are present. - Interaction is read-only in this sample; replace the in-memory list with injected services and event handlers to make it interactive. ## Styling - Uses MudBlazor components and theme tokens for spacing and colors rather than Tailwind or Bootstrap classes. - A small block of custom CSS adjusts white text and header color fallbacks (.white-text, .puntten-text) and targets .mud-card-header styles. - Layout relies on MudGrid/MudItem and MudStack for responsive behavior; cards and papers adapt to container width. ## Reuse steps 1. Add MudBlazor NuGet package and register services (builder.Services.AddMudServices()) in Program.cs. 2. Add MudBlazor CSS/theme to index.html/_Host.cshtml and include <MudThemeProvider> if customizing the theme. 3. Add @using MudBlazor and copy ModernDashboard.razor and DashboardModels.cs into the project; include models namespace in _Imports.razor. 4. Replace the hard-coded _activityGroups population with an injected data service or API call; map real models to ActivityGroupViewModel. 5. Wire dialogs or edit handlers for CRUD operations and add authentication/authorization where needed. ## Limitations & next steps - This is a single self-contained page generated by Instruct UI; no backend/service injection, authentication, or persistence is wired. - No client-side editing, validation, or paging is implemented; add EditForm/DataAnnotationsValidator for editable forms. - Add localization, accessibility checks, and unit/visual tests before production use. - Consider extracting reusable components (ActivityGroup, ActivityItem) for cleaner composition and testability.