●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Devices inventory table using QuickGrid with sortable columns and a template column for actions.
- Inline search/filter using InputText bound to a LINQ IQueryable filter.
- Page layout with a collapsible sidebar, topbar with notifications and user menu, and responsive content area.
- Authentication pages (Login, Signup, Forgot Password) using EditForm with DataAnnotations validation and provider buttons.
- Scoped CSS files defining gradients, theme overrides, and responsive tweaks.
## Key components
- QuickGrid, PropertyColumn, TemplateColumn
- InputText, @bind-Value for search
- EditForm, DataAnnotationsValidator, ValidationMessage
- NavLink, NavigationManager.NavigateTo for page navigation
- Scoped .razor.css files and a global app.css with Bootstrap variable overrides
## How it works
- Devices are stored in a local List<DeviceModel> and exposed as an IQueryable via FilteredDevices for QuickGrid consumption.
- Search uses @bind-Value (oninput) to update searchQuery; the LINQ Where clause filters devices by SerialNumber, DeviceType, or Description.
- Action buttons call methods that use NavigationManager.NavigateTo to simulate details and RMA flows.
- Login/Signup/ForgotPassword pages use EditForm + DataAnnotationsValidator and ValidationMessage components bound to view models (LoginViewModel, RegisterViewModel, ForgotPasswordViewModel).
- Sidebar collapsed state is driven by a local boolean (isSidebarCollapsed) toggled by button clicks and rendered via conditional CSS classes.
## Styling
- UI relies on Bootstrap utility classes (container, row, col-*, btn, form-control) and scoped component CSS for theming.
- app.css overrides Bootstrap CSS variables (--bs-primary, etc.) and provides color and focus state customizations.
- Layout and auth pages apply radial/linear gradients and backdrop-filter for a modern look; media queries handle small-screen adjustments.
## Reuse steps
1. Add required packages and assets: include Bootstrap and FontAwesome; add Microsoft.AspNetCore.Components.QuickGrid package if not present.
2. Import namespaces in components: Microsoft.AspNetCore.Components.QuickGrid and Microsoft.AspNetCore.Components.Forms.
3. Copy DeviceModel and AuthModels into the project and adapt properties to backend API models.
4. Register authentication and API services in Program.cs and inject NavigationManager or HttpClient where needed.
5. Add scoped .razor.css files and the global app.css to preserve theme overrides; ensure _Imports.razor or components import required namespaces.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI; data currently uses in-memory sample lists and simulated navigation.
- Server-side wiring is required for persistent data: implement device APIs, RMA creation endpoints, and secure authentication flows.
- Consider adding paging, server-side filtering, sorting callbacks, and unit/integration tests for data access.
- Add role-based authorization for admin actions and link details/RMA pages to real routes and components.