●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Patient header with avatar and vitals chips.
- Persistent left drawer for patient overview and navigation links.
- Persistent right drawer with live notes, reminders and clinical decision content.
- Tabbed content area (Chief Complaint/HPI, Diagnosis, Prescriptions).
- Autocomplete search for diagnoses and drugs with async SearchFunc callbacks.
- Prescription entry grid using MudGrid and a MudSimpleTable listing added medications.
- Action toolbar (Save, Print, End Consultation) in a fixed bottom AppBar.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudMainContent
- MudTabs, MudTabPanel
- MudAutocomplete, MudTextField, MudSelect, MudDatePicker, MudSwitch
- MudGrid, MudItem, MudSimpleTable
- MudCard, MudCardHeader, MudCardContent, MudChip, MudAvatar, MudIconButton
- Bindings and callbacks: @bind-Open, @bind-Value, SearchFunc, OnClick handlers
## How it works
- UI state is held in component fields (_leftDrawerOpen, _rightDrawerOpen, _patient, _selectedDiagnosis, _newMedication, _prescribedMedications).
- MudAutocomplete uses async SearchFunc methods that return filtered in-memory arrays; ToStringFunc formats diagnosis display.
- Prescription entry binds fields to _newMedication and calls AddMedication to append to _prescribedMedications and reset the form.
- Drawers use two-way binding (@bind-Open) to toggle visibility. Chips and table rows render collections directly in Razor.
- No EditForm or DataAnnotationsValidator is present; input validation is handled minimally (e.g., disabled Add button when name is empty).
## Styling
- Uses MudBlazor components and theme classes (pa-4, mt-4, PanelClass, Variant properties).
- Also uses Bootstrap utility classes present in markup (d-flex, d-none d-md-flex, ms-3, gap-2) for layout tweaks.
- Custom CSS ensures main content padding to avoid overlap with fixed top and bottom AppBars (.consultation-main-content).
- Layout is responsive via MudBlazor Breakpoint props on drawers and MudGrid item sizing.
## Reuse steps
1. Add the MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/theme in index.html or _Host.cshtml.
3. Copy models (PatientViewModel, DiagnosisViewModel, MedicationViewModel) into shared project or folder and adjust properties as needed.
4. Place the Razor page in Pages, inject or provide services for diagnosis/drug lookups instead of in-memory arrays.
5. Wire persistence and printing: implement data services, save endpoints, and printing/printing components.
6. Add form validation (EditForm + DataAnnotationsValidator) for prescriptions and any required fields.
## Limitations & next steps
- This is a single-page UI snippet generated by Instruct UI; server-side services, persistence, authentication and role checks are not implemented.
- Search functions use in-memory arrays and artificial Task.Delay; replace with HTTP calls or database queries for production.
- No comprehensive input validation or error handling is present; integrate EditForm/DataAnnotationsValidator or FluentValidation for field-level checks.
- Consider accessibility improvements, keyboard focus management for drawers/tabs, autosave for notes, and printing layout for prescriptions.