●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top app bar with avatar menu and responsive drawer navigation.
- Summary cards showing counts and icons for critical/alert/transit items.
- Supply item panels with three-column layout: basic info, transit info, daily consumption.
- Select filter control for ordering and per-item progress indicators (MudProgressLinear).
- Reusable view models (SummaryCardViewModel, SupplyItemViewModel) with computed StockPercentage.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudMainContent
- MudContainer, MudGrid, MudItem, MudPaper
- MudStack, MudText, MudIcon, MudAvatar, MudChip
- MudSelect, MudSelectItem, MudMenu, MudMenuItem
- MudProgressLinear, MudDivider, MudNavLink
- View models: SummaryCardViewModel, SupplyItemViewModel
## How it works
- Static sample data is populated in OnInitialized into _summaryCards and _supplyItems using the view models.
- UI renders lists with @foreach; layout uses MudGrid and MudItem to create responsive columns.
- Drawer open state is bound with @bind-Open="_drawerOpen" and toggled by ToggleDrawer().
- MudSelect sets an initial Value and can be wired to a property to trigger sorting/filter logic.
- Stock percentage displays via SupplyItemViewModel.StockPercentage and binds to MudProgressLinear Value.
## Styling
- Uses MudBlazor components and the project-level CSS (app.css) for customizations.
- Sidebar overrides use color vars and selector rules (.sidebar, .white-text, .blue-text, .autonomy-chip).
- Layout relies on MudGrid responsive breakpoints (xs, sm, md) and MudContainer MaxWidth.ExtraLarge.
- Visual focus on cards and spacing via MudPaper and MudStack; responsive behavior depends on MudBlazor breakpoints.
## Reuse steps
1. Add MudBlazor NuGet and register services: builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/JS in index.html or _Host.cshtml.
3. Copy the .razor file and view model classes into the project; adjust namespace to match the app.
4. Wire the MudSelect Value to a property and implement sorting/filter logic; replace sample lists with injected services or APIs.
5. Include app.css in the project and adapt color variables or theme overrides via MudTheme if needed.
## Limitations & next steps
- This is a single page demo generated by Instruct UI and uses in-memory sample data; backend services, repositories or APIs are not connected.
- Authentication, authorization and localization are not implemented; MudMenu items are placeholders.
- Paging, live updates, and server-side data loading are not present; add data services and state management (e.g., scoped services or Flux) for production use.
- Consider extracting card and panel pieces into reusable components, adding unit/UI tests, and wiring real-time telemetry for stock changes.