●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Left-hand searchable patient list using a MudDataGrid with row selection and row click.
- Right-hand master-detail area that shows patient header and MudTabs for 15 child entities (Allergies, Medications, Diagnoses, etc.).
- Add / Edit dialogs for patients and child records implemented with MudDialog + MudForm and MudTextField / MudDatePicker / MudSelect / MudNumericField.
- Confirmation dialog component (ConfirmDialog) used via IDialogService.ShowAsync and snackbar notifications via ISnackbar.
- Client-side sample data seeded in OnInitialized for demo purposes.
## Key components
- MudDataGrid (T=PatientModel, ChildRecordModel) with PropertyColumn and TemplateColumn
- MudTabs / MudTabPanel
- MudDialog, MudForm, MudTextField, MudNumericField, MudSelect, MudDatePicker
- MudButton, MudIconButton, MudCard, MudPaper, MudGrid / MudItem, MudSnackbar (ISnackbar), IDialogService
- ConfirmDialog component (Cascading IMudDialogInstance)
## How it works
- Data binding uses @bind-Value (MudTextField, MudSelect, MudNumericField) and @bind-Date (MudDatePicker). Selected row is bound via @bind-SelectedItem on MudDataGrid and RowClick handler sets the active patient.
- Dialogs toggle boolean visibility (_patientDialogVisible, _childDialogVisible) bound to MudDialog; Save handlers call MudForm.Validate() and check _patientForm.IsValid/_childForm.IsValid before persisting.
- Add/edit operations clone models (Clone/UpdateFrom helpers) to enable cancel without mutating the selected item. Delete flows use DialogService.ShowAsync<ConfirmDialog> and inspect dialog.Result.
- Child records are stored per patient in a Dictionary<string, List<ChildRecordModel>> and retrieved with GetChildList(entityName) for each tab.
- Notifications use Snackbar.Add with Severity values after CRUD operations.
## Styling
- Uses MudBlazor component library and its layout primitives (MudGrid, MudItem, MudPaper, MudCard) and utility classes such as d-flex, flex-column, align-center, justify-between.
- Layout is responsive via MudGrid/MudItem (xs / md breakpoints) and uses inline heights (calc(100vh - 32px)) for scrollable panes.
- No Tailwind or Bootstrap dependencies detected; look-and-feel follows MudBlazor theming.
## Reuse steps
1. Add the MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs; inject MudBlazor styles in host page.
2. Copy DataModel classes (PatientModel, ChildRecordModel) into the project and adjust properties to match backend contracts.
3. Import MudBlazor namespaces (using MudBlazor) in components and register IDialogService/ISnackbar via DI (already provided by AddMudServices()).
4. Add the PatientManagement.razor and ConfirmDialog.razor components; wire persistent services (repository/HttpClient) in place of in-memory Lists.
5. Replace seeded data and List operations with async calls to APIs; preserve model cloning and MudForm validation logic.
## Limitations & next steps
- The page uses in-memory sample data seeded on initialization; no backend API, persistence, or authentication is wired.
- Server-side paging, sorting, and large-data virtualization for MudDataGrid are not implemented and should be added for production datasets.
- Additional validation rules, localization, and accessibility checks are required (currently relies on MudForm.IsValid only).
- Consider extracting child-entity grids into reusable components and adding centralized state or API services for testability and separation of concerns.