●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Driver selector (InputSelect) and filtered pending trips list.
- Trip header with summary badges (botellones cargados/entregados/devueltos) and status.
- Editable clients table with InputNumber per row, line totals and sticky header/footer.
- EditForm with DataAnnotationsValidator and form submit handling to "Generar" invoice.
- Action buttons: Recalcular, Generar, Cancelar and a success alert after generation.
## Key components
- EditForm, DataAnnotationsValidator, InputSelect, InputNumber, table (Bootstrap), buttons and badges.
- Bindings and events: @bind-Value, @bind-Value:after, @onclick, EditContext usage and StateHasChanged.
- Models present: ChoferModel, ViajeModel, ClienteFacturaDetalleModel, FacturaViajeViewModel.
## How it works
- OnChoferChanged filters viajesFiltrados from viajes and resets selection.
- SeleccionarViaje maps viaje.Clientes into facturaActual.Detalles and calls RecalcularTotales.
- InputNumber uses @bind-Value and calls OnCantidadChanged on change to validate and update totals.
- RecalcularTotales recomputes each detail.Total and facturaActual.TotalGeneral; GenerarFactura sets facturaGenerada (demo save).
## Styling
- Uses Bootstrap classes: container-fluid, row, col-*, card, form-select, form-control, table, btn and utility classes.
- Custom CSS provides .border-start-3, custom scrollbar styles and sticky header/footer for the table.
- Responsive layout with col-12 / col-lg-3 and col-xl split; flex and overflow rules manage vertical space.
## Reuse steps
1. Copy the .razor component and Facturacion models into a Blazor project and ensure Bootstrap and FontAwesome are included.
2. Import Microsoft.AspNetCore.Components.Forms and keep DataAnnotationsValidator for client validation.
3. Replace CargarDatosDemo with service calls (inject HttpClient or a data service in Program.cs) and persist invoices in GenerarFactura.
4. Adjust model validation attributes, add server-side validation and mark viajes as Facturado when saved.
## Limitations & next steps
- This is a single-page demo using in-memory data; persistence, authentication and API wiring are required.
- No optimistic concurrency or transactional save for marking viajes as facturado.
- Consider adding server-side validation, paging/search for large trip lists, input masks/currency formatting and unit tests.