●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top metrics cards with icons and accent color.
- Weekly bar chart using MudChart (ChartSeries, ChartOptions).
- Recent tasks list rendered with MudSimpleTable and MudChip status badges.
- Active projects table using MudTable and MudProgressLinear for progress bars.
- Application shell with MudLayout, MudAppBar, persistent MudDrawer navigation and MudMainContent.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink
- MudGrid, MudItem, MudPaper
- MudText, MudIcon, MudIconButton, MudAvatar, MudSpacer
- MudChart (ChartSeries, ChartOptions)
- MudSimpleTable, MudTable, MudTh, MudTd, MudChip, MudProgressLinear
## How it works
- Static data is populated in OnInitialized into ChartSeries, string[] X axis labels, ChartOptions, and lists for tasks and projects.
- MudChart binds ChartSeries and XAxisLabels to render a bar chart; ChartOptions sets palette and Y axis formatting.
- Tables iterate over IEnumerable<DashboardTableModel> using a foreach (MudSimpleTable) and a RowTemplate (MudTable).
- Drawer state toggles via @bind-Open on MudDrawer and a local DrawerToggle method in the layout component.
- Color and sizing are applied via component parameters (Color, Size, Elevation) and inline Style strings for dynamic colors.
## Styling
- UI uses MudBlazor components and theme primitives; custom CSS targets navigation text (.white-text) and active nav background in app.css.
- Layout uses responsive MudGrid breakpoints (xs, sm, md) for card and chart placement.
- Inline styles and MudBlazor color enums provide accenting; consider theme provider for centralized theming.
## Reuse steps
1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); and include MudBlazor CSS in index.html/_Host.
2. Add MudBlazor namespace to _Imports.razor and import the sample model (DashboardTableModel) into the project.
3. Place DashboardLayout.razor on a route (already uses @page "/dashboard") and include DashboardContent.razor as shown.
4. Replace hard-coded data in OnInitialized with services or injected data providers (HTTP, EF Core, SignalR) as needed.
5. Add app.css rules to project or adapt to a MudTheme for global colors and responsive tweaks.
## Limitations & next steps
- Page uses hard-coded sample data; backend services, APIs, or state management are required for dynamic content and persistence.
- No authentication or authorization wiring is included; integrate ASP.NET Core Identity or other auth in the shell.
- Accessibility, localization, and server-side data loading not implemented; add ARIA attributes, resource files, and async data fetching for production.
- Consider adding sorting, paging or virtualization for large datasets and interactive chart tooltips or drilldown.
Note: this is a single-page scaffold generated by Instruct UI and is editable; integrate services and app-level configuration to make it production-ready.