Confirm?

Are you sure you want to proceed?
S
Sergio Fernandez

Despachos Dashboard Template

Clone & Customize via AI

The MudBlazor Shipments Page displays recent dispatch records in a MudTable with status MudChip and a persistent MudDrawer navigation. Layout uses MudBlazor components and custom CSS for sidebar and main content.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Persistent sidebar navigation using MudDrawer and MudNavLink - App header with avatar and action button using MudAppBar and MudIconButton - Shipments list rendered with MudTable including responsive Breakpoint.Sm and hover rows - Status display with MudChip color mapping - Page layout using MudContainer, MudPaper, MudGrid and MudItem - Action button placeholder for Informar envío (no dialog or form implemented) ## Key components - MudLayout, MudAppBar, MudDrawer, MudNavMenu, MudNavLink - MudContainer, MudPaper, MudGrid, MudItem - MudTable<T> with HeaderContent and RowTemplate - MudChip for status, MudButton, MudAvatar, MudIconButton ## How it works - Data is stored in a private list _shipments and populated in OnInitialized - MudTable binds Items to _shipments and uses RowTemplate to render model fields - Drawer open state uses @bind-Open to toggle visibility - GetStatusChipColor maps Estado strings to Color values for MudChip rendering - Interaction points include the Informar envío button which is a UI placeholder without click handler or dialog wiring ## Styling - Uses MudBlazor component CSS with additional app.css overrides for sidebar colors and button styles - Custom classes include sidebar-custom-bg, informar-envio-btn and mud-main-content-custom - Layout uses MudGrid/MudItem for responsive spacing; MudTable Breakpoint.Sm helps table adapt on small screens ## Reuse steps 1. Add MudBlazor NuGet to the project and register services in Program.cs (AddMudServices or AddMudBlazorDialog etc.) 2. Import MudBlazor namespace in _Imports.razor and reference any required MudBlazor CSS in index.html or layout 3. Copy the ShipmentModel and the razor page into Pages folder and include the app.css rules or adapt to project styles 4. Replace the sample _shipments data with a service call (inject a data service and call async in OnInitializedAsync) 5. Wire the Informar envío button to a MudDialog or EditForm for create/edit flows and add validation where needed ## Limitations & next steps - Sample uses in-memory data; persistence, HTTP services, and authentication are not wired - No EditForm, validation, create/edit dialogs, or confirmation flows are implemented - Accessibility, localization, server-side paging, sorting and filtering are not included and should be added for larger datasets - Suggest adding a service layer, async data loading, MudDialog for the Informar envío flow, and client/server paging or virtualization for scalability