●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-column patient profile page split into three responsive columns (personal, other/more, contact/address/notes).
- Editable form fields using Blazor input components: text, date, select, checkbox, textarea.
- Collapsible "More" panel, dropdown actions, and card-based layout with header actions (Save, menu).
- Visual styling with a pastel color palette, avatar placeholder, and small responsive adjustments in CSS.
## Key components
- Blazor input components: InputText, InputDate, InputSelect, InputCheckbox, InputTextArea
- Razor page state: private PatientProfileViewModel Model { get; set; } = new();
- Bootstrap layout classes: container-fluid, row, col-*, card, btn, form-control
- UI patterns: collapse (Bootstrap), dropdown menu, list-group, badges, custom CSS classes (.bg-pastel-*, .avatar-placeholder)
## How it works
- Two-way binding is used via @bind-Value on InputText/InputDate/InputSelect/InputCheckbox/InputTextArea to update the in-memory PatientProfileViewModel instance.
- No EditForm or DataAnnotationsValidator is present; validation attributes are not applied in the view model, so validation UI is not implemented.
- Collapse and dropdown interactions rely on Bootstrap JS (data-bs-toggle attributes) rather than Blazor-managed dialogs.
- Buttons and menu items are static anchors and would need event handlers or Command methods wired to perform save/print/download/delete actions.
## Styling
- Uses Bootstrap grid and form classes for responsive layout and spacing (col-lg-4, mb-4, form-control, form-select).
- Custom app.css defines a pastel palette (.bg-pastel-primary, .bg-pastel-info, etc.), header gradient (.bg-gradient) and responsive overrides via media queries.
- Component-level scoped CSS (PatientProfile.razor.css) styles the avatar placeholder, collapse chevron rotation, and small-label typography.
## Reuse steps
1. Add the Razor file and PatientProfileViewModel to a Blazor project (no extra NuGet required for built-in Input* components).
2. Ensure Bootstrap CSS/JS and FontAwesome (or equivalent icons) are referenced in index.html/_Host.cshtml for collapse and dropdown to work.
3. Import the scoped CSS file and include app.css in the project stylesheet pipeline.
4. Adjust PatientProfileViewModel to match real domain models and add validation attributes if UI validation is required.
5. Wire save/print/download/delete button events to injected services (e.g., IPatientService) and implement persistence and navigation.
## Limitations & next steps
- This is a single page scaffold generated by Instruct UI; server-side wiring, authentication, and persistence are not included.
- No EditForm or DataAnnotationsValidator is used; add EditForm + model validation attributes to enable field validation.
- Bootstrap JS is required for collapse and dropdown functionality; consider replacing with Blazor components for full WASM/SSR control.
- Add localization, input masking for phone/AMKA, and unit tests for view model mappings before production use.