●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero header with action buttons and descriptive lead text.
- Quick statistics card (Visão rápida) with four tiles showing monetary and count metrics.
- Grid of module cards rendered from a local list (modules with icon, code, name, description and route).
- Shortcut buttons (atalhos rápidos) for common actions.
- Operational overview section with metric cards (orders, clients, stock alerts, tasks).
## Key components
- Razor page: @page "/" and a single .razor component file.
- Navigation: NavigationManager injection and NavManager.NavigateTo used by @onclick handlers.
- Render loop: foreach over a List<ModuloPrincipalViewModel> to render module cards.
- UI elements: Bootstrap cards, rows/cols, buttons with @onclick, Font Awesome icons.
- View model: private ModuloPrincipalViewModel class defined in the page code-behind.
## How it works
- The page uses a hard-coded List<ModuloPrincipalViewModel> (modulosPrincipais) as the data source and renders each item in a Bootstrap grid using foreach.
- Buttons use @onclick lambdas that call NavegarPara(string rota), which invokes NavManager.NavigateTo(route).
- No data binding via EditForm or DataAnnotationsValidator is present; inputs and validation are not implemented.
- Interaction is client-side navigation and simple UI rendering; real data and services are not wired.
## Styling
- Uses Bootstrap utility and layout classes (container, row, col-*, card, btn, shadow-sm, d-flex).
- Responsive grid via Bootstrap column classes (col-12, col-md-6, col-lg-4, col-xl-3).
- Icons rely on Font Awesome classes (fas fa-...).
- lang attribute is set to pt-BR on the root container for localization hinting.
## Reuse steps
1. Add the Razor file to the Blazor project and include the ModuloPrincipalViewModel or replace with an application model.
2. Ensure Bootstrap CSS and Font Awesome are referenced in index.html/_Host.cshtml (no extra NuGet required for Bootstrap layout).
3. Keep or replace NavManager usage; NavigationManager is available by default via @inject.
4. Replace the hard-coded list with an injected service (register service in Program.cs) or call an API to populate modulesPrincipais.
5. Adapt routes and localization, and extract repeated markup into a child component if needed.
## Limitations & next steps
- Demo data is static; backend services, APIs or state management must be connected to show real metrics.
- No form editing, validation, authentication or authorization is implemented — add EditForm/DataAnnotations and auth guards where required.
- Charts, live updates, paging or server-side aggregation are not included and should be added for full reporting features.
- Consider extracting module card into a reusable component and adding unit/UI tests and accessibility attributes.