Confirm?

Are you sure you want to proceed?
В
Владимир Потапов

Dashboard Catalog UI

Clone & Customize via AI

MudBlazor Report Catalog shows analytics and a report list with charts and a searchable table. Demonstrates MudChart visualizations and MudTable filtering/sorting within a responsive layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Dashboard-style report catalog with two charts (bar and donut) and a paged, searchable report table. - Left responsive drawer navigation, top app bar with menu and notifications, and per-row action menu. - Table features: client-side search/filter, sorting, paging, row selection and status chips. ## Key components - MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink - MudGrid, MudItem, MudPaper for responsive layout - MudChart (bar and donut) and ChartSeries/ChartOptions - MudTable, MudTableSortLabel, MudTablePager, MudTextField (search) - MudMenu, MudMenuItem, MudChip ## How it works - Sample data is initialized in OnInitialized and transformed into ChartSeries and status arrays. - MudTable binds Items to a List<ReportViewModel> and @bind-SelectedItem for selection. - Search uses @bind-Value on MudTextField and a FilterFunc passed to MudTable.Filter for client-side filtering. - Sorting uses MudTableSortLabel with lambda SortBy expressions and paging is handled by MudTablePager. - Charts take ChartSeries and label arrays; ChartOptions control legend and display. ## Styling - Uses MudBlazor components and theme primitives rather than utility CSS frameworks. - Layout uses MudGrid and responsive props (xs/md) and MudDrawer Variant="Responsive" for adaptivity. - Papers have Elevation for card-like appearance; charts specify explicit Height for consistent rendering. ## Reuse steps 1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); 2. Import MudBlazor namespace via _Imports.razor and include MudBlazor CSS in index.html/_Host.cshtml. 3. Copy ReportCatalogPage.razor and ReportViewModel, then adapt the model to the app's domain. 4. Replace sample data in OnInitialized with injected data service calls (async) and bind to the table and charts. 5. Wire action handlers for View/Edit/Delete and integrate authentication/authorization where needed. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI; backend services, APIs, and auth are not implemented. - Charts and table use client-side data; consider server-side paging/filtering for large datasets. - Add confirmation dialogs for destructive actions, form pages for editing, and services for persistence. - Enhance accessibility, localization, and error handling when integrating into a full application.