Confirm?

Are you sure you want to proceed?
E
Eduardo Teodoro

Home Dashboard Layout Structure

Clone & Customize via AI

MudBlazor Dashboard that shows qualification metrics, alerts and placeholder charts. Uses Tailwind layout and a persistent MudDrawer navigation with MudPaper metric cards and MudAlert notifications.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Persistent right-side navigation (MudDrawer) with MudNavLink entries for dashboard areas. - Top header (MudText) with title and subtitle. - Metric cards (grid of MudPaper) for Aptos / Não aptos / Vencidos / Em risco. - Main content area with two MudPaper placeholders for charts and additional content. - Alerts panel using MudAlert list for warnings, errors and info. - Responsive layout using Tailwind grid and flex utilities (xl breakpoints used). ## Key components - MudDrawer, MudDrawerHeader, MudNavMenu, MudNavLink - MudPaper, MudText, MudAlert - Layout components: Header, SidebarRightMenu, MainContent, MetricsCards, AlertsPanel ## How it works - The page uses a two-column layout implemented with Tailwind flex: main content and a fixed-width right column for the drawer. - Navigation uses MudNavLink Href properties to navigate or anchor to sections; active styles are applied via ActiveClass. - Metric values and chart areas are placeholders; components render static text until services/models supply data. - Alerts are implemented with MudAlert components; add service polling or event handlers to populate them. - No EditForm or @bind-* usage is present; data binding and event handlers must be added where models and actions are required. ## Styling - Tailwind utility classes provide spacing, grid, responsive columns (grid-cols-*, xl:col-span-*), and typography. - MudBlazor components provide elevation, typography (Typo.*) and icons (Icons.Material.*). - The layout is responsive via Tailwind breakpoints; the drawer is persistent (Variant="Persistent") and fixed to the right (Anchor.End). ## Reuse steps 1. Add MudBlazor NuGet and register services (builder.Services.AddMudServices()) in Program.cs. 2. Ensure MudBlazor CSS/JS and Tailwind output CSS are included in the project layout. 3. Import @using MudBlazor in pages or _Imports.razor. 4. Copy the Header, SidebarRightMenu, MainContent and child components into a page folder and register the route @page. 5. Replace placeholder text with bound model properties and inject services to fetch metrics, alerts and chart data; add @bind-* or event callbacks as needed. ## Limitations & next steps - This is a single-page UI shell generated by Instruct UI; it contains placeholders rather than data bindings and business logic. - No data services, authentication, or state management are wired; add repository/service injections and authorization policy checks. - Charts are placeholders; integrate a chart library or MudBlazor charts and bind datasets. - Consider accessibility, ARIA labels, keyboard navigation for the drawer, and localization for production use.