Transaction Flow Screens: Modern Tile-Based Layout Revamp

[Copilot]

Transaction flow screens used a flat list of colored buttons with no visual hierarchy. This replaces them with a tile-based card layout consistent with the existing HomePage design.

TransactionsPage

• Gradient header (primary → #2B4A8C) with icon + title
• 2×2 Grid of HomeCardFrame tiles; Admin spans full width (row 3)
• Each tile color-coded by category: green (topup), blue (bill payment), purple (voucher), red (admin)

SelectOperator / SelectProduct Pages (6 pages)

• Category-colored gradient headers per transaction type
• VerticalStackLayout of Button → FlexLayout of Frame tiles with TapGestureRecognizer
• Back button extracted from dynamic list to static XAML StandardButton

// Before: plain buttons added to VerticalStackLayout
Button button = new Button { Text = modelOperator.OperatorName };
button.SetDynamicResource(StyleProperty, "MobileTopupButtonStyle");
button.Behaviors.Add(new EventToCommandBehavior { EventName = "Clicked", ... });
this.OperatorList.Children.Add(button);

// After: Frame tiles added to FlexLayout
Frame tile = new Frame();
tile.SetDynamicResource(StyleProperty, "SelectionTileFrame");
tile.AutomationId = modelOperator.OperatorName;
tile.Content = new VerticalStackLayout { Children = { icon, nameLabel } };
tile.GestureRecognizers.Add(tapGesture); // TapGestureRecognizer with command binding
this.OperatorList.Children.Add(tile);

Form Pages (PerformTopup, GetAccount, GetMeter, PayBill, PerformIssue)

• Category-colored gradient header replaces TitleLabel
• Form fields wrapped in TransactionFormCard (white card with shadow)

Success / Failed Pages (6 pages)

• Gradient header + StatusCardFrame containing status icon + message
• Image references corrected from .png → .svg (matching actual assets)

AdminPage

• Red gradient header; Reconciliation action rendered as HomeCardFrame tile

New Styles (LightTheme.xaml)

Key	Purpose
SelectionTileFrame	Fixed 150×110dp tile for operator/product selection
TransactionFormCard	White rounded card for form fields
StatusCardFrame	White rounded card for success/failure status
StatusMessageLabel	Centered status message text
SectionTitleLabel	Section heading label

All existing AutomationId values are preserved for UI test compatibility.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• f.feedz.io
  • Triggering command: /usr/bin/dotnet dotnet restore TransactionProcessor.Mobile.BusinessLogic.Tests/TransactionProcessor.Mobile.BusinessLogic.Tests.csproj --configfile Nuget.config (dns block)
  • Triggering command: /opt/hostedtoolcache/CodeQL/2.24.2/x64/codeql/csharp/tools/linux64/Semmle.Autobuild.CSharp /opt/hostedtoolcache/CodeQL/2.24.2/x64/codeql/csharp/tools/linux64/Semmle.Autobuild.CSharp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Transaction Flow Screens Revamp</issue_title>
<issue_description>I would like the Transactions Screens to have a more modern tile based layout.

See the parent issue for additional guidance.</issue_description>

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

• Fixes Transaction Flow Screens Revamp #464

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.