Confirm?

Are you sure you want to proceed?
?

Activations Overview Page

Clone & Customize via AI

The MudBlazor Activations Table provides date-range and party filters and lists ActivationDto entries in a MudTable. Uses MudDateRangePicker and MudSelect for client-side filtering and mock data.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Filter area with a date range picker (max 7 days) and a party select plus a Search button. - Client-side search that filters ActivationDto items by sender/receiver party and overlapping TimeInterval. - Results rendered in a MudTable with a simple header and row template. - Loading state with MudProgressLinear and inline error messages for validation. - Mock data initialization for customers and sample ActivationDto records. ## Key components - MudDateRangePicker (@bind-DateRange) - MudSelect / MudSelectItem (@bind-Value) - MudButton (@onclick) - MudTable<T> with HeaderContent and RowTemplate - MudProgressLinear, MudText, MudPaper - DTOs: ActivationDto, PartyDto, TimeInterval, TimeSeriesModelDto ## How it works - Filters are two-way bound: the date range uses @bind-DateRange and the party select uses @bind-Value. - OnSearchAsync validates inputs (presence, date order, max days) and sets ErrorMessage for user feedback. - Search logic filters AllActivations by party id (sender or receiver) and overlapping TimeInterval.Start/End against selected range. - IsLoading toggles around an awaited Task.Delay(500) to simulate API latency; StateHasChanged is called to update UI. - Activations are ordered by TimeInterval.Start and assigned to Activations for the MudTable Items. ## Styling - Uses MudBlazor components and typical Mud classes/variants (Variant.Outlined, Margin.Dense, Color.Primary). - Layout uses simple flex wrapper classes inlined in Razor (d-flex, flex-wrap, gap-4) consistent with MudBlazor examples. - Responsive behaviour is basic: controls have min/max widths and the table flows below filters; no explicit breakpoints or Tailwind/Bootstrap classes beyond small flex utilities. ## Reuse steps 1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); 2. Import MudBlazor in _Imports.razor and include MudBlazor CSS in index.html/Pages/_Host. 3. Copy DTOs (ActivationDto, PartyDto, TimeInterval, TimeSeriesModelDto) into the shared/models folder. 4. Drop ActivationsOverviewPage.razor into a Pages folder and update @page route if needed. 5. Replace the mock LoadMockData/AllActivations with an injected API service that returns ActivationDto; inject via [Inject] or constructor. 6. Optionally add server-side paging/sorting in place of the current client filter for larger datasets. ## Limitations & next steps - This is a single page generated by Instruct UI and uses in-memory mock data; backend service wiring (HTTP client, repository) is required for real data. - No server-side paging, sorting, or column formatting; MudTable paging and sorting can be added for large result sets. - No authentication/authorization handling; secure API calls and party filtering logic must be implemented in services. - TimeSeries content is present in DTOs but not surfaced; consider expandable rows or a detail dialog to show time series charts.