Confirm?

Are you sure you want to proceed?
?

Property Management Dashboard UI

Clone & Customize via AI

MudBlazor Dashboard with navigation drawer, metric cards, a MudChart bar visualization and a MudSimpleTable listing recent work orders. Uses MudGrid layout and custom CSS styles.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Persistent left navigation using a MudDrawer with MudNavLink entries. - Metric summary cards rendered with MudPaper inside a MudGrid. - Bar chart visualization using MudChart with ChartSeries and ChartOptions. - Recent Work Orders presented in a MudSimpleTable. - Page layout composed with MudLayout, MudMainContent, MudContainer and MudCard. ## Key components - MudLayout, MudDrawer, MudNavMenu, MudNavLink - MudGrid, MudItem, MudPaper - MudCard, MudCardHeader, MudCardContent - MudChart (ChartSeries, ChartOptions) - MudSimpleTable - MudText, MudIcon - Model: WorkOrderViewModel ## How it works - The left drawer state is two-way bound with @bind-Open on a private _drawerOpen field. - Chart data is supplied via a List<ChartSeries> and ChartOptions configured with a ChartPalette and axis settings. - Work orders are rendered from a private List<WorkOrderViewModel> with a simple foreach in the table body. - Interaction patterns are static in this page: no API calls or EditForm bindings are present. Components use property bindings and Razor foreach for rendering. ## Styling - Uses MudBlazor components and layout primitives (MudGrid/MudItem) for responsive breakpoints (xs, sm, md). - Custom CSS overrides live in app.css (side-nav color, .white-text, .edge-curves, .dashboard-title). No Tailwind or Bootstrap-specific frameworks detected. - Cards and tables use MudPaper/MudCard outlines and rounded corners for a clean dashboard look; responsiveness relies on MudGrid breakpoints. ## Reuse steps 1. Add the MudBlazor NuGet package and register services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespaces in _Imports.razor or the page: @using MudBlazor. 3. Include the custom CSS (app.css) and ensure MudBlazor CSS is loaded in index.html/_Host.cshtml. 4. Add the WorkOrderViewModel (or replace with domain model) and adapt the private lists to fetch data from a service. 5. Wire data services and dependency injection, and replace hard-coded _series/_workOrders with async data calls. ## Limitations & next steps - This is a single page generated by Instruct UI and contains static sample data; API integration, authentication and state management are not implemented. - Add data services (HTTP or gRPC), error handling and loading states, and move chart/table data to observable models or a state container. - Consider adding paging, sorting or filtering to the table, drill-downs on chart points, and accessibility attributes. - Add unit and component tests for rendering and interaction when integrating into an application.