●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Lead detail header with action buttons and an Edit dropdown.
- Horizontal status stepper showing completed/active states.
- Left-side info cards: About and Get in Touch.
- Modular activity composer with a dropdown to switch between multiple activity forms.
- Several EditForm-based activity forms (Task, Meeting, Send Letter, Simple Task, To-Do List) with DataAnnotationsValidator.
- Activity filters, insights switch, and an Upcoming & Overdue list with sample data injection.
## Key components
- EditForm, DataAnnotationsValidator
- InputText, InputTextArea, InputDate
- Child components: NewTaskFormComponent, NewMeetingFormComponent, SendLetterFormComponent, SimpleTaskFormComponent, ToDoListFormComponent
- Razor switch statement to render active activity component
- View models: LeadViewModel, ActivityViewModel, SendLetterFormModel, TaskFormModel, MeetingFormModel, SimpleTaskFormModel, ToDoListFormModel
## How it works
- OnInitialized populates LeadViewModel with sample values and selectedActivityType default is "New Task".
- A switch statement renders the appropriate activity form component; each child uses EditForm with @bind-Value on InputText/InputDate elements and DataAnnotationsValidator for model rules (EditForm validation).
- ShowSampleActivities adds ActivityViewModel entries to the activities list; GetIconForActivity maps activity types to FontAwesome classes.
- UI interactions such as dropdown selection use inline @onclick lambdas and @onclick:preventDefault to change selectedActivityType.
## Styling
- Uses Bootstrap grid and utilities (row, col-*, card, btn, input-group, form-control) for layout and responsiveness.
- Custom CSS (LeadDetailPage.razor.css) implements the horizontal stepper visuals (.status-stepper, .step-item, .active, .completed) while preserving Bootstrap colors.
- FontAwesome provides action and activity icons.
## Reuse steps
1. Add a Blazor project with Bootstrap and FontAwesome included (default Blazor template or add CDN links in index.html/_Host.cshtml).
2. Add the Razor files and LeadViewModels.cs to the project and register namespaces if needed.
3. Ensure DataAnnotations are available (System.ComponentModel.DataAnnotations) and models include validation attributes for EditForm validation.
4. Wire data services and dependency injection to replace sample data: inject services into components and implement submit handlers (OnValidSubmit) for forms.
5. Import the component CSS file or include the CSS in site stylesheet; adjust breakpoints or classes for the app layout.
## Limitations & next steps
- No backend wiring: form submissions currently have no OnValidSubmit handlers or persistence to APIs; child forms submit buttons do not call parent services.
- Authentication, authorization, and real data fetching are not implemented; routing exists but server-side data and service registration are required.
- Validation UI is basic: add ValidationSummary/field-level validation messages and server-side validation handling.
- Replace the placeholder textarea in NewMeetingFormComponent with a rich-text editor component if formatted content is required.
- Consider extracting the stepper into a reusable component and adding unit/visual tests for interactive states.