●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
### What's implemented
* **Dashboard View:** Displays aggregated metrics (Software count, Active Tickets, Repairs) using summary cards and progress bar visualizations for resource utilization (seats, contracts) and ticket status distribution.
* **Data Lists:** Dedicated pages for Software, Licenses, Support Tickets, Devices, and Repairs, displaying data using responsive Bootstrap tables (`table table-hover`, `table-responsive`).
* **Detail Modals:** Separate components (`SoftwareDetailModal`, `SupportDetailModal`, etc.) implemented using conditional rendering and overlay CSS for detailed record viewing.
* **Data Models:** Uses C# `record` types (`SoftwareModel`, `SupportTicketModel`) for clean, immutable data structures and derived calculated properties (e.g., `AgeDays`, `IsExpired`).
### Key components
* Blazor standard components (`@page`, `@code`, `EventCallback`).
* HTML `<table>` elements styled with Bootstrap classes.
* Bootstrap utility components: `card`, `row`, `col-*`, `badge`, `progress`, `progress-bar`.
* Custom modal components using CSS overlays for dialog behavior (`*-modal-overlay`, `*-modal-card`).
### How it works
The application structure uses standard Blazor routing (`@page`). Dashboard components bind static data (`@softwareCount`, `@seatUtilPercent`) calculated during `OnInitialized`. List pages retrieve sample data and render it in tables. Clicking a table row triggers a `ShowDetails` method, setting the `selected*Model` and toggling the `isModalOpen` boolean state, which activates the corresponding modal component via the `@if (IsOpen)` block and `@bind-IsOpen`. Navigation between main sections is handled using `NavigationManager.NavigateTo`.
### Styling
The UI relies entirely on **Bootstrap 5** classes for layout, responsiveness (e.g., `row g-3`, `col-12 col-lg-6`), typography, and visual elements (cards, badges, progress bars). Custom CSS provides styling for the modal overlays and subtle entry animations (`@keyframes fadeIn`).
### Reuse steps
1. Ensure Bootstrap CSS is included in the Blazor project (`index.html` or equivalent).
2. Copy the `.razor` and `.cs` files into the project.
3. Replace the hardcoded sample data initialization within `OnInitialized` methods across all list and dashboard components.
4. Wire up data services or API calls to fetch real inventory, licensing, device, and ticket data.
5. Implement data mutations (editing/creating) by replacing the read-only detail modals with full Blazor EditForms.
### Limitations & next steps
This output is a comprehensive structure for data viewing. Data access and application services (CRUD operations, authentication/authorization) must be implemented by the developer. Extend the tables to include advanced features like sorting, filtering, and pagination.