●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Persistent left drawer navigation and top app bar with avatar menu.
- Tabbed view (MudTabs) switching between Insumos and Guías.
- Filter header with MudSelect controls and an action icon.
- Repeating supply cards showing name, location, autonomy chip and action buttons.
- Linear progress indicators for supply levels using MudProgressLinear and formatted numbers.
- Movements list implemented as a MudTable with toolbar controls (select for last N days).
## Key components
- Layout/navigation: MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink
- Tabs and panels: MudTabs, MudTabPanel
- Controls and inputs: MudSelect, MudSelectItem, MudIconButton, MudButton, MudMenu, MudMenuItem
- Display: MudPaper, MudGrid, MudItem, MudText, MudChip, MudAvatar
- Data/visuals: MudProgressLinear, MudTable, MudTh, MudTd
- Utility: MudSpacer, MudIcon
## How it works
- Static sample data is created in OnInitialized into _supplyItems and _movements; the page currently uses in-memory models (SupplyItemModel, MovementModel).
- Drawer open state is two-way bound with @bind-Open on MudDrawer and toggled by ToggleDrawer().
- MudSelect uses Value attributes for initial values; MudTable iterates _movements via Items.
- Progress and autonomy colors derive from helper methods GetProgressColor and GetAutonomyColor which return MudBlazor Color enums.
- Number and date formatting uses CultureInfo for Spanish (es-ES) in display expressions.
- Interaction patterns include action buttons per item (Consume, Download, Adjust) but no handlers are wired to backend services in this sample.
## Styling
- Uses MudBlazor components for layout and theming; custom CSS in app.css adjusts background (.mud-main-content-bg), drawer text (.white-text) and nav link styles.
- Responsive layout relies on MudGrid and MudItem with xs/md breakpoints to adapt card layout across widths.
- Text and status chips use MudBlazor Color enums for visual semantics rather than raw CSS classes.
## Reuse steps
1. Add the MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor in _Imports.razor and add the MudBlazor CSS/JS according to project template.
3. Copy the page, SupplyItemModel and MovementModel into the target project and add app.css rules to the main stylesheet.
4. Replace static lists in OnInitialized with injected services (HTTP client or data services) and bind MudSelect with @bind-Value for two-way updates.
5. Wire actions (Consume, Download, Adjust) to dialog components or API calls and add paging/filtering to MudTable if needed.
## Limitations & next steps
- The page uses static sample data; persistence, API integration and state management are not implemented.
- No authentication, authorization or server-side validation is wired; add policies and user context where required.
- MudTable lacks paging, sorting and server-side filtering; implement MudTable server data pattern for large datasets.
- Text is partially hard-coded in Spanish; extract strings for localization if needed.
- Add unit tests and error handling for data operations and consider dialogs for CRUD workflows.