Confirm?

Are you sure you want to proceed?
D
David Condon

Site Admin Dashboard Design

Clone & Customize via AI

The Bootstrap Admin Dashboard shows site metrics, a searchable users table and a virtualized activity stream. It uses Blazor components (InputText, InputFile, Virtualize) with Bootstrap layout and utilities.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive admin layout with sidebar navigation and top actions. - Stat cards summarizing metrics (StatCard component). - Searchable users list rendered in a Bootstrap table with action buttons. - File selection via InputFile and client-side metadata handling. - Virtualize-based recent activity feed with placeholder loading. - System health progress bars and footer quick-actions (Add, Refresh, Export). ## Key components - Blazor components: InputText, InputFile, Virtualize, foreach rendering, @bind-Value, @onclick handlers. - Custom component: StatCard.razor with [Parameter] props. - Markup: standard Bootstrap elements (container-fluid, row, col-*, card, table, btn). - Scoped CSS: Dashboard.razor.css for minor theme tweaks. ## How it works - Data is supplied from AdminDashboardModel.SampleData() and bound to the page-level Model instance. - Search uses a computed FilteredUsers property that filters Model.Users by searchTerm via @bind-Value on InputText. - User actions call page methods (AddUser, DeleteUser, ViewUser) that mutate Model collections; UI updates via Blazor's re-rendering. - Virtualize renders Model.Activities with ItemContent and Placeholder for efficient scrolling. - InputFile onChange reads file metadata and inserts an ActivityModel entry; no upload endpoint is implemented. - Export and Refresh update local state (lastRefreshed) as placeholders for real I/O operations. ## Styling - Uses Bootstrap utility and layout classes for grid, spacing and responsive behavior. - Font Awesome icon classes are present in markup (e.g., fas fa-*) and require including the icon CSS. - Scoped CSS overrides (.card.bg-light, .nav-link hover) are in Dashboard.razor.css to adjust contrast and hover states. - Layout targets desktop and mobile with col-12 / col-md-* / col-xl-* breakpoints. ## Reuse steps 1. Ensure a Blazor project with Bootstrap CSS and Font Awesome included (layout _Host or index.html). 2. Add AdminModels.cs and StatCard.razor to the project and import the namespace where needed. 3. Drop Dashboard.razor and Dashboard.razor.css into a Pages or Components folder; update @page route if necessary. 4. Wire real data services: replace AdminDashboardModel.SampleData() with injected services for metrics, users and activities. 5. Implement server endpoints for CSV export and file upload; adapt ExportCsv and OnUserFileSelected to call APIs. ## Limitations & next steps - This is a single-page demo generated by Instruct UI; authentication, authorization and persistent data storage are not implemented. - CSV export and file upload are placeholders; implement server-side endpoints and secure file handling for production. - Consider adding EditForm/DataAnnotationsValidator for user edit dialogs, paging/sorting for large tables, and centralized state or caching for performance. - Icons require Font Awesome and accessibility improvements (aria labels, focus states) before production use.