Confirm?

Are you sure you want to proceed?
M
Mouli Eswararao

Blazor Funding Status Component

Clone & Customize via AI

Demo page showcases the Bootstrap Stage Funding Card Blazor component that lists disbursements, shows funded status and amounts, and exposes a request action with a collapse toggle.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Reusable card UI to display a funding stage and its disbursements. - Header with title, ready/total counts, Font Awesome status icon, and a collapse toggle. - Optional primary action button that shows ready count and total. - Iterated disbursement items showing name, funded status with date, loan percentage, and formatted amount. - Empty-state message when no disbursements are present. ## Key components - Razor component: StageFundingCard.razor - Demo page: StageFundingCardDemoPage.razor - View models: StageFundingViewModel, DisbursementItemModel (plain C# classes) - UI elements: Bootstrap card, .card-header/.card-body, buttons, hr separators - Icons: Font Awesome (fa-check-circle, fa-chevron-up/down, fa-circle-dot) ## How it works - The demo page instantiates StageFundingViewModel and passes it to <StageFundingCard ViewModel="@fundingData" /> as a [Parameter]. - The component uses a private isCollapsed flag and ToggleCollapse method to show/hide the card body. - Disbursement rows are rendered with a for loop; conditional rendering shows funded status and formatted date when IsFunded and StatusDate are present. - Amount values are formatted using CultureInfo.GetCultureInfo("en-US") and Decimal.ToString("C"). - The request button text includes ReadyCount and TotalCount at render time and is always present when ReadyCount &gt; 0. ## Styling - Layout and spacing use Bootstrap utility classes (container, row, col-*, d-flex, justify-content-between, mb-3, fw-bold, text-muted). - Component-scoped CSS in StageFundingCard.razor.css customizes border, rounded corners, button colors (.btn-custom-teal), and small typography. - Font Awesome provides status and toggle icons; ensure the library is loaded in the host page. - The markup is mobile-responsive via Bootstrap grid classes; component size depends on parent column classes (col-md-6 col-lg-4). ## Reuse steps 1. Add component files and view models to a Blazor project and import Bootstrap CSS and Font Awesome in index.html/_Host.cshtml. 2. Ensure project target includes .NET and Blazor (no extra NuGet packages required for this plain Bootstrap component). 3. Adjust model namespace and wire a real data source or service to populate StageFundingViewModel. 4. Replace inline demo data with injected services (register service in Program.cs and inject into the demo page or parent component). 5. Optionally expose an EventCallback for the Request Funding button to invoke application logic. ## Limitations & next steps - This is a single page/component generated by Instruct UI and contains no backend wiring, dependency injection, or authentication. - No EditForm or validation logic is present; add EditForm and DataAnnotationsValidator if user input is required. - Add EventCallback or service calls for the request action and integrate with application state or API endpoints. - Consider localization for currency and dates and unit tests for rendering and interaction.