Confirm?

Are you sure you want to proceed?
E
Eduardo Teodoro

Competency Matrix Page Layout

Clone & Customize via AI

The MudBlazor Competency Matrix presents a skill-map grid and detail drawer for employee competencies. It uses MudTextField search, MudSelect filters, MudChip statuses and Tailwind utility classes for layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Skill-map matrix grid with level columns and clickable rows - Detail drawer showing competency description, validity, history, evidences and recommended trainings - Filters: search, category select, fit status select, critical-only and grouping switches - Interactive cells with MudTooltip details and colored status backgrounds - Seeded sample data and export/report action buttons ## Key components - MudPaper, MudContainer, MudGrid, MudItem - MudTextField, MudSelect, MudSelectItem, MudSwitch - MudChip, MudButton, MudAvatar, MudText, MudTooltip - RenderFragment-based matrix renderer and EventCallback<CompetencyModel> ## How it works - Data is seeded in OnInitialized (SeedSampleData) and stored in AllCompetencies - Filters bind with @bind-Value on MudTextField and MudSelect; LINQ produces FilteredCompetencies - Matrix uses a RenderFragment that emits a CSS grid per row and attaches EventCallback.Factory.Create to row clicks - Cell visuals derive from Competency.FitStatus and RequiredLevel/CurrentLevel; tooltips show context info - Detail drawer is a child component receiving the selected CompetencyModel via a [Parameter] ## Styling - UI uses MudBlazor components for controls and Tailwind-like utility classes (flex, grid, gap-*, text-*, rounded-*) for layout - Status colors use MudChip Color enums and bg-* utility classes for cell highlights - Responsive layout relies on CSS grid columns and MudContainer breakpoints ## Reuse steps 1. Install MudBlazor NuGet and register services (builder.Services.AddMudServices()) in Program.cs 2. Import MudBlazor namespaces and include MudBlazor CSS in index.html/_Host 3. Add Tailwind utility classes or include equivalent utility CSS used by the components 4. Copy CompetencyModel classes and the three components into the project and import their namespaces 5. Replace SeedSampleData with real data services, implement export/report endpoints and wire persistence/auth ## Limitations & next steps - This is a single-page demo generated by Instruct UI; no backend, persistence or authentication is included - Export/Generate Report buttons are placeholders and need server-side implementation - Consider adding an EditForm with DataAnnotations validation to update competency levels, accessibility fixes, and unit/integration tests