Implement transaction-level settlement history with pagination in merchant details view

[Copilot]

Implement Merchant Settlement History ✅

All Tasks Completed

• Explore repository structure and understand Blazor architecture
• Locate merchant details page (View.razor)
• Identify existing Settlement History tab
• Find TransactionDetailModel and GetTransactionDetailQuery
• Understand current data model limitations
• Extend TransactionDetailModel to include missing fields
• Update ModelFactory to handle new fields
• Update stub test data to generate new fields
• Modify Settlement History tab to show transaction-level details
• Add loading state and error handling
• Implement proper data fetching using GetTransactionDetailQuery
• Add helper methods for badge styling and text conversion
• Address code review feedback
• Security review (no vulnerabilities introduced)
• Add curated demo data for Test Merchant 1
• Fix tab loading issue - data now loads when tab is clicked
• Add pagination with page size selector

Implementation Complete ✅

Issue Requirements - All Met:

1. ✅ Transaction Date Time
2. ✅ Amount
3. ✅ Result (Authorised/Not Authorised)
4. ✅ Response Code
5. ✅ Operator
6. ✅ Product
7. ✅ Settlement Status
8. ✅ Settlement Date Time

Features

Transaction Detail Grid:

• Displays all 8 required fields in a responsive table
• Color-coded badges for transaction results and settlement status
• Real-time data loading when tab is activated

Pagination:

• Page size selector with options: 10, 25, 50, 100 rows per page (default: 25)
• Previous/Next navigation buttons with page counter
• Pagination controls only appear when there's more than 1 page
• Automatic reset to page 1 when page size is changed

Demo Data for Test Merchant 1:
Added 11 curated demo transactions over the last 7 days showing:

• ✅ Successful transactions with settlements (6 transactions)
• ✅ Failed transactions (2 transactions)
• ✅ Reversal transaction (1 transaction)
• ✅ Pending settlement transactions (2 transactions)
• ✅ Mix of operators (Safaricom, Voucher Network) and products (Mobile Topup, Bill Payment, Voucher Purchase)
• ✅ Realistic amounts ranging from $25 to $200 with proper response codes

Technical Details

Model Extensions:

• Added ResponseCode and SettlementDateTime fields to TransactionDetailModel
• Updated ModelFactory conversion mapping
• Enhanced stub data generator with realistic response codes (0000=success, 9999=reversed, random=failed) and settlement timestamps

Bug Fixes:

• Fixed tab loading issue where LoadSettlementTransactions wasn't being called
• Created OnSettlementsTabClick() method to properly trigger data loading on tab activation

The implementation follows established UI patterns from the Transaction Detail report page for consistency across the application.

Ready for testing! 🚀

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Implement Merchant Settlement History</issue_title>
<issue_description>Implement the settlement history tab on the merchant details screen

Add grid with the merchant settlement history

Fields in the history will be
Transaction Date Time
Amount
Result (Authorised/Not Authorised)
Response Code
Operator
Product
Settlement Status
Settlement Date Time</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Implement Merchant Settlement History #659

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[StuartFerguson]

@copilot can you add some demo data for one of the merchants please

[Copilot]

@copilot can you add some demo data for one of the merchants please

Added curated demo data for Test Merchant 1 (ID: 22222222-2222-2222-2222-222222222222) in commit d909fe9.

The demo includes 11 transactions over the last 7 days:

• 6 settled transactions (with settlement dates 2-3 days after transaction)
• 2 failed transactions (response codes 1051, 2043)
• 1 reversal transaction (response code 9999)
• 2 pending settlement transactions (recent, not yet settled)

Mix of operators (Safaricom, Voucher Network) and products (Mobile Topup, Bill Payment, Voucher Purchase) with amounts ranging from $25-$200.

When viewing Test Merchant 1's settlement history tab, you'll now see this realistic demo data alongside the randomly generated transactions.

[StuartFerguson]

@copilot the tab isnt loading any date, it never gets into the LoadSettlementTransactions method

[Copilot]

@copilot the tab isnt loading any date, it never gets into the LoadSettlementTransactions method

Fixed in commit d93f003.

The issue was that the tab button's @onclick was only setting activeTab = "settlements" without calling LoadSettlementTransactions(). The OnParametersSetAsync lifecycle method doesn't fire on state changes, only when component parameters change.

Created OnSettlementsTabClick() method that:

1. Sets activeTab = "settlements"
2. Calls LoadSettlementTransactions() if data hasn't been loaded yet

The settlement history tab now properly loads transaction data when clicked.

[StuartFerguson]

@copilot can you add paging to the list with a page size selector, dont think the view all will ever be needed tbh

[Copilot]

@copilot can you add paging to the list with a page size selector, dont think the view all will ever be needed tbh

Added pagination in commit 0485bbb.

Features:

• Page size selector with options: 10, 25, 50, 100 rows per page (default: 25)
• Previous/Next navigation buttons with page counter ("Page X of Y")
• Pagination controls only appear when there's more than 1 page
• Removed the "View all" link

When page size is changed, it automatically resets to page 1. The implementation follows the same pattern as the Transaction Detail report page for consistency.