●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Summary cards showing totals (users, active users, devices, active devices).
- Tabbed interface with two Bootstrap tables: All Users and All Devices.
- Modal Add User form implemented with a Blazor EditForm and DataAnnotations validation.
- Inline sample data generation for users and devices to demonstrate counts and table rows.
## Key components
- EditForm, DataAnnotationsValidator, ValidationSummary
- InputText, InputDate, InputCheckbox with @bind-Value
- Bootstrap nav tabs, table (table-hover, table-striped), badges
- Custom modal layer using CSS (.modal-backdrop-custom, .modal-card-custom)
- Event handlers via @onclick and form submit handler OnValidSubmit
## How it works
- Data is held in component state lists (users, devices) and computed properties drive summary cards.
- The tabbed UI switches content by setting a string (activeTab) and rendering different table bodies.
- The Add User action opens a modal by toggling isAddModalOpen; the modal contains an EditForm bound to newUser.
- Validation is model-level (IValidatableObject on DeviceIdentityUser) and field-level via DataAnnotations (EmailAddress, Phone); validation errors surface in ValidationSummary.
- AddUserSubmit constructs a new DeviceIdentityUser, inserts it into the users list, and closes the modal.
## Styling
- Uses Bootstrap utility and component classes (container-fluid, row, col-*, card, btn, table, badge).
- Icons use Font Awesome classes (fas fa-*) in summary cards and tabs.
- Modal uses scoped CSS for backdrop and centering; responsive max-width tweak for small screens.
## Reuse steps
1. Add a Blazor project and ensure Bootstrap and Font Awesome are available in layout.
2. Copy the component and model classes into the project; include System.ComponentModel.DataAnnotations for validation.
3. Ensure _Imports.razor or component file has @using for models if placed in a different namespace.
4. Wire real data: replace the sample lists with a service (register in Program.cs) and call async load methods in OnInitializedAsync.
5. Optionally extract modal and table into reusable components and add server-side persistence and authentication.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI with in-memory sample data; persistence, API services, and authentication are not implemented.
- Paging, sorting, and filtering are not present on the tables and must be added for large datasets.
- Accessibility and keyboard focus handling for the custom modal should be improved for production.
- Consider moving validation messages to field-level displays and adding async server validation when wiring to APIs.