●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Dashboard summary cards with navigation targets and counts.
- Software product cards with progress bars, badges and click-to-open detail modal.
- Table lists for Support Tickets, Repairs, Licenses and Devices with row click handlers.
- Reusable modal detail components for Software, Support, Repair, License and Device items.
- Simple visual charts implemented as stacked progress bars and status distribution bars.
## Key components
- Razor pages/components: `Dashboard.razor`, `SoftwareList.razor`, `SupportList.razor`, `RepairList.razor`, `LicenseList.razor`, `DeviceList.razor`.
- Detail modals: `SoftwareDetailModal.razor`, `SupportDetailModal.razor`, `RepairDetailModal.razor`, `LicenseDetailModal.razor`, `DeviceDetailModal.razor`.
- Models: `SoftwareModel`, `SupportTicketModel`, `RepairModel`, `LicenseModel`, `DeviceModel` (C# records/classes).
- Bootstrap UI primitives: cards, progress bars, tables, badges, grid (`row`/`col-*`), buttons and responsive utilities.
- Interaction: `@onclick`, `@foreach`, `@bind-IsOpen` on modal components, `OnInitialized` used to seed demo data.
## How it works
- Pages populate in-memory sample lists in `OnInitialized` and compute aggregates (counts, percentages) in C# fields.
- Lists render with `@foreach` and inline `@onclick` handlers to set the selected model and open modals (`IsOpen` bound via `EventCallback<bool>`).
- Detail panels are implemented as simple overlay modals with CSS-based backdrops; print hooks are placeholders for `IJSRuntime` calls.
- No server calls, pagination, sorting or form validation are included; state is page-local for demo purposes.
## Styling
- Uses Bootstrap classes extensively (`container`, `row`, `col-*`, `card`, `table`, `badge`, `progress`) and Font Awesome icons.
- Per-component CSS files provide modal overlay, animations (`fadeIn`) and small UX tweaks (card hover, responsive label hiding).
- Layout follows Bootstrap grid for responsive behavior across breakpoints.
## Reuse steps
1. Copy Razor components and model classes into a Blazor project (Pages/Components folders).
2. Ensure Bootstrap and Font Awesome are included in `wwwroot/index.html` or `_Host.cshtml` and add the component CSS files.
3. Wire navigation by adding routes (already present via `@page`) and update `NavMenu` to link pages.
4. Replace in-page demo lists with injected services or HttpClient calls; optionally register services in `Program.cs`.
5. Inject `IJSRuntime` in modal components to implement `PrintDetails`, and add paging/filtering or server-side APIs as needed.
## Limitations & next steps
- This sample stores demo data in-page; integrate APIs or data services for real datasets and implement paging, filtering and sorting on tables.
- No authentication or authorization is included; secure pages and actions as required.
- Add forms and validation (e.g., `EditForm` + `DataAnnotationsValidator`) for create/edit flows.
- Improve accessibility (focus management for modals) and add unit/visual tests for components.
This implementation is generated by Instruct UI and is editable in a Blazor/.NET project to connect real services and extend behaviors.