●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- KPI cards with totals and icons (Ventas de Hoy, Sucursales Activas, Productos en Catálogo, Alertas de Stock Bajo).
- Sales-by-branch list with horizontal progress bars showing relative totals.
- Conic-gradient pie visualization rendered via inline CSS gradient and a legend list for top products.
- Responsive Bootstrap table showing recent sales rows.
- Navigation buttons wired to NavigationManager.NavigateTo for page transitions.
## Key components
- Razor page with standard Bootstrap markup: .container-fluid, .row, .card, .table, .progress, .list-group.
- Razor/C# features: OnInitialized lifecycle, @foreach, @if, @onclick handlers, NavigationManager.
- Models: SucursalModel, ProductoModel, VentaModel (defined in PasteleriaModels.cs).
- Utility methods: CalcularPorcentaje(decimal, decimal) and GenerarGradienteConico(...) to build the pie gradient.
- Custom CSS file (DashboardPasteleria.razor.css) for .pie-chart and .legend-dot.
## How it works
- Sample data is loaded in OnInitialized via CargarDatosDeEjemplo(), then aggregates are computed (ventasHoy, ventasRecientes, ventasPorSucursal, topProductos).
- UI binds to C# fields (ventasHoy, productos, sucursales, ventasRecientes, ventasPorSucursal, topProductos) using Razor expressions (e.g., @ventasHoy, @foreach).
- Buttons use @onclick to call NavigateTo which delegates to NavigationManager.NavigateTo(url).
- The pie visualization is a CSS conic-gradient produced by GenerarGradienteConico; progress bars use computed width percentages from CalcularPorcentaje.
## Styling
- Uses Bootstrap classes for layout, cards, buttons, responsive grid, and table styling.
- Small scoped CSS provides a circular .pie-chart and .legend-dot styling and card/table tweaks.
- Layout is responsive via Bootstrap breakpoints (col-*, row). No responsive JavaScript is required.
## Reuse steps
1. Add the Razor page and the PasteleriaModels.cs to a Blazor project and ensure Bootstrap CSS is included in index.html/_Host.cshtml.
2. Keep the scoped CSS file (DashboardPasteleria.razor.css) next to the .razor file for local styles.
3. Replace CargarDatosDeEjemplo() with real services or inject a repository/HttpClient to fetch data.
4. Wire NavigationManager or router links as needed; register services in Program.cs if using DI for data.
5. Optionally replace the CSS conic-gradient with a charting library for interactive charts (ChartJS, Radzen, etc.).
## Limitations & next steps
- This is a single-page UI generated by Instruct UI and uses in-memory sample data; backend services, data stores, and authentication are not wired.
- The pie chart is a static CSS conic-gradient and lacks interactivity and accessibility semantics; consider a charting library for tooltips and accessibility.
- Add localization, server-side paging for large tables, error handling, and role-based access before production use.
- Implement API endpoints or data services and replace sample loading with injected services for live data.