Confirm?

Are you sure you want to proceed?
C
CaptureTech Support

Device Activity Details Popup

Clone & Customize via AI

Blazor Device Dashboard summarizes device activity with metric cards, a recent activity data table and a details modal. It uses Bootstrap layout and simulates live refresh via a background task.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Metric cards showing devices seen, message count, last device and error count. - Warehouse analysis panel with compact metric tiles. - Recent activity table (scrollable, striped) that lists latest messages and a Details action. - Details modal implemented as a scoped CSS overlay showing device fields via description lists (dl/dd). - Simulated live updates via a background Task/CancellationTokenSource that appends sample messages. ## Key components - Razor component (Dashboard.razor) with table, buttons and cards. - MessageModel and DeviceDataCapture model classes. - Scoped CSS (Dashboard.razor.css) for modal/backdrop styling. - Bootstrap layout classes (container-fluid, row, col-*, card, table, btn). - Runtime patterns: OnInitialized, InvokeAsync(StateHasChanged), CancellationTokenSource background refresher. ## How it works - The page seeds an in-memory list of MessageModel items and updates stats from that list (UpdateStats). - BackgroundRefreshAsync runs on a loop and adds sample messages, calling InvokeAsync(StateHasChanged) to refresh UI. - Recent activity table is rendered from _messages.OrderByDescending(...).Take(100); each row's Details button sets SelectedMessage to open the modal. - Modal overlay displays device details using <dl>/<dt>/<dd> pairs; clicking the backdrop calls CloseDetails and clears SelectedMessage. - No EditForm or DataAnnotationsValidator is present; interactions are event-driven via @onclick handlers. ## Styling - Uses Bootstrap utility and layout classes for grid, cards, buttons and responsive table styling. - Font Awesome icon classes (fas) appear in markup for visual indicators. - Scoped CSS (Dashboard.razor.css) implements the modal backdrop, card sizing and small-screen adjustments. - Table is contained in a .table-responsive wrapper with a fixed max-height and vertical scroll for long feeds. ## Reuse steps 1. Add the Razor file and model classes to a Blazor project and ensure Bootstrap CSS and Font Awesome are available in index.html/_Host. 2. Include the scoped CSS file (Dashboard.razor.css) alongside the component for modal styling. 3. Replace the SeedSampleMessages/BackgroundRefreshAsync logic with a real MessageStore service (Web API, SignalR, or injected singleton) and inject it into the component. 4. Wire cancellation and lifetime correctly (dispose CancellationTokenSource in Dispose). Call InvokeAsync when updating state from background threads. 5. Adjust MessageModel/DeviceDataCapture to match backend DTOs and add paging, filtering or server-side queries as needed. ## Limitations & next steps - This is a single Blazor page generated by Instruct UI and uses seeded sample data; it does not include backend services, authentication, or real-time SignalR integration. - No form validation or EditForm usage is present; add DataAnnotations and EditForm for editable operations. - Table has no built-in paging, sorting or column filtering; integrate a data grid component or server-side endpoints for large feeds. - Consider replacing the background task with a subscription to a MessageStore or SignalR hub for production live updates and reconcile threading and error handling.