M
Mouli Eswararao

Responsive Blazor Funding Table Component

Bootstrap Stage Funding Card demonstrates a collapsible Bootstrap card listing disbursements with a responsive table and currency formatting. Uses Blazor component parameters and a simple toggle behavior.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Collapsible card component that lists disbursements and shows a request-funding action. - Responsive Bootstrap table for rows of disbursement data with header labels and right-aligned amount columns. - Status display with Font Awesome icons and conditional rendering for funded vs. unknown states. - Sample data population in a demo page (OnInitialized) that demonstrates component usage. ## Key components - Razor component: StageFundingCard.razor - Demo page: StageFundingCardDemo.razor - Model: DisbursementModel (C# class) - Markup and logic: foreach rendering, conditional status checks, CultureInfo currency formatting - CSS isolation: StageFundingCard.razor.css - UI primitives: Bootstrap card, table, button classes and Font Awesome icons ## How it works - The demo page creates a List<DisbursementModel> in OnInitialized and passes it to the StageFundingCard component via a parameter (Disbursements). - StageFundingCard exposes [Parameter] properties (Title, StatusText, ButtonText, Disbursements) and renders rows with @foreach. - The header is clickable and toggles a private bool isExpanded via ToggleExpand to show or hide the card body. - Status text renders a green check icon and a formatted date when Status equals "Funded" and FundedDate.HasValue; otherwise it renders a placeholder "--". - Amounts use Amount.ToString("C", CultureInfo.GetCultureInfo("en-US")) for currency formatting. ## Styling - Uses Bootstrap layout and utility classes (container, row, col-*, card, table, text-muted, text-end) for responsiveness. - Local CSS isolation file customizes border, button colors (.btn-request-funding), small table fonts, and mobile adjustments via a media query. - Font Awesome provides the status and chevron icons; Bootstrap handles most responsive behavior. ## Reuse steps 1. Add StageFundingCard.razor, StageFundingCard.razor.css and DisbursementModel.cs to a Blazor project. 2. Ensure Bootstrap and Font Awesome are available in the app (wwwroot or CDN references in index.html/_Host.cshtml). 3. Import namespaces if files are in a different namespace; confirm the model is accessible to the component. 4. Replace the demo data with a real service or inject a service (e.g., IDisbursementService) to load data asynchronously. 5. Add an EventCallback or parameter for the Request Funding button to wire actions to parent components or services. ## Limitations & next steps - This is a single component/demo page and does not include data services, authentication, API wiring, or unit tests. - No form validation or EditForm usage is present; add validation if row-level edits are required. - Accessibility labels and ARIA attributes are minimal; add aria-expanded/aria-controls and keyboard handling for the header toggle. - Consider internationalization for currency and date formatting, and expose callbacks to handle the Request Funding action and row interactions.