Confirm?

Are you sure you want to proceed?
K
Konstantinos Chalvantzis

Broker Portal Design

Clone & Customize via AI

Bootstrap Broker Dashboard presenting stat cards, recent activity, a responsive client table, and a multi-step quote EditForm. Uses EditForm validation and Bootstrap form-control inputs.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Sidebar navigation and top bar with search and user menu. - Dashboard overview with stat cards and recent activity list. - Responsive client list table with client search/filter and detail panel. - Client details page with policy table and notes. - Multi-step quote form (wizard) using EditForm and DataAnnotations validation. - Settings page with tabbed profile and notification options. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage - InputText, InputNumber, InputSelect, InputTextArea, InputCheckbox - NavLink for sidebar routing and active state - Bootstrap elements: card, table-responsive, table, badge, btn, form-control - C# models: BrokerClientModel, BrokerPolicyModel, BrokerQuoteModel, BrokerUserSettingsModel ## How it works - Forms use Blazor EditForm with model binding (@bind-Value) and DataAnnotations validation on submit. - The quote page implements a simple client/coverage/review wizard by switching an integer step variable. - Search on the clients page binds the input with oninput to filter the in-memory client list. - NavigationManager is used for programmatic navigation (NavigateTo) from buttons and quick actions. - Sidebar uses NavLink with ActiveClass to reflect the current route; FontAwesome provides icons. ## Styling - Layout and responsiveness rely on Bootstrap classes (container, row, col-*, d-*, g-*, card, table-responsive). - Inputs use Bootstrap form-control and form-select; buttons use btn and btn-outline / btn-primary variations. - Icons use FontAwesome classes (fa-*) embedded in markup. - Components are responsive via Bootstrap breakpoints (d-none d-md-*, col- classes). ## Reuse steps 1. Add Bootstrap CSS/JS and FontAwesome to index.html or _Host and ensure Bootstrap JS is available for dropdowns. 2. Add the Razor components and the model file to a Blazor project; no extra NuGet is required for Bootstrap. 3. Import namespaces and register any services used by new pages (API clients, auth handlers) in Program.cs. 4. Replace demo lists with calls to data services or HttpClient endpoints and map DTOs to the provided models. 5. Wire authentication/authorization and server-side validation as required for production. ## Limitations & next steps - All data is in-memory demo data; persistence, APIs, and authentication are not implemented. - Client-side validation uses DataAnnotations; consider adding server-side validation and error handling. - Accessibility and keyboard navigation for the sidebar and forms need review. - Add paging, sorting and backend filtering for large client lists; convert quick actions to modal dialogs or dedicated routes where appropriate.