●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Tabbed layout for three areas: add expense form, expense list, charts.
- Input form with text, numeric, select, date and checkbox controls plus a submit button.
- Interactive MudDataGrid with sorting, filtering and groupable columns and action buttons.
- Three chart panels (pie, bar, line) driven by ChartSeries and label arrays.
- Summary cards for fixed, variable and total amounts.
## Key components
- MudTabs, MudTabPanel
- MudTextField, MudNumericField, MudSelect, MudDatePicker, MudCheckBox, MudButton
- MudGrid, MudItem, MudCard, MudCardContent, MudPaper
- MudDataGrid, PropertyColumn, TemplateColumn, MudIconButton
- MudChart, ChartSeries
- MudChip
- ExpenseModel with DataAnnotations ([Range], [Required])
## How it works
- Two main collections: expenses (List<ExpenseModel>) and newExpense (ExpenseModel) bound with @bind-Value and @bind-Date.
- AddExpense performs manual checks (non-empty name/category and amount > 0) then adds a new ExpenseModel and resets the form.
- DeleteExpense removes an item from the in-memory list and calls UpdateChartData + StateHasChanged to refresh visuals.
- UpdateChartData aggregates expenses by category/month and prepares ChartSeries and label arrays consumed by MudChart.
- MudDataGrid uses the provided items list with SortMode.Multiple and Filterable/Groupable enabled; a TemplateColumn provides row-level actions.
- Model-level DataAnnotations exist but no EditForm/DataAnnotationsValidator is present in the page; validation is partly enforced by control properties (Required, Min).
## Styling
- UI uses MudBlazor components and styling; explicit gradients and inline styles appear on MudPaper summary cards.
- Layout relies on MudGrid and MudItem for responsive columns (xs/md breakpoints) and MudCard for grouped panels.
- Icons and Material design elements use MudBlazor Icons.
## Reuse steps
1. Add the MudBlazor NuGet package and any chart dependencies used by the project.
2. Register MudBlazor services in Program.cs (e.g., builder.Services.AddMudServices()) and import MudBlazor namespaces.
3. Add the ExpenseModel class to the shared/models folder and adjust DataAnnotations as needed.
4. Paste the Razor page and wire persistent storage: replace the in-memory List<ExpenseModel> with a service or repository.
5. Optionally add EditForm and DataAnnotationsValidator around the form to enable automatic validation and show validation messages.
## Limitations & next steps
- This is a single-page example generated by Instruct UI; persistence, authentication and API wiring are not implemented.
- Model DataAnnotations exist but the page uses manual validation checks; add EditForm + DataAnnotationsValidator for full model validation and validation messages.
- Charts and grid use in-memory data; move aggregation and paging to server-side logic for large datasets.
- Consider adding localization, export (CSV/PDF), and unit tests for AddExpense/DeleteExpense logic when integrating into a larger app.