Fix AutomationId placement on SalesAnalysis page header

[Copilot]

UI automation tests for SalesAnalysisPage were failing because AutomationId="SalesAnalysis" was placed on the header Frame instead of the Label inside it — the element the Appium accessibility ID lookup actually resolves.

Change

Moved AutomationId from Frame to Label, consistent with every other page in the codebase:

<!-- Before -->
<Frame Grid.Row="0" Style="{StaticResource PageHeaderStyle}" AutomationId="SalesAnalysis">
    <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}"/>
</Frame>

<!-- After -->
<Frame Grid.Row="0" Style="{StaticResource PageHeaderStyle}">
    <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SalesAnalysis"/>
</Frame>

Original prompt

---

This section details on the original issue you should resolve

<issue_title>User Interface revamp</issue_title>
<issue_description>I currently have a functional .Net MAUI app in this repository at TransactionProcessor.Mobile.

Can you review the screens and functionality available and suggest a better UI layout, if you need to build this in a new project for now so be it.

I am using Shell based navigation and the MVVM pattern so would lilke to continue with this.

If you could integrate a test backed inside the application for initial prototyping that would be great but build it in such a way I can swap this out with mediatr style command handling.

If you could include screenshots on the PR for my review that would be great.</issue_description>

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

• Fixes User Interface revamp #461

---

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

[StuartFerguson]

@copilot layout looking good, can this be taken to the other screens in the transaction flows and also the my account screens

[Copilot]

@copilot layout looking good, can this be taken to the other screens in the transaction flows and also the my account screens

Done in commit d802f26. The remaining 4 pages that hadn't received the new layout have now been updated:

My Account screens:

• MyAccountAddressesPage — PageHeaderStyle header, SectionCardStyle card with address fields in a grid (Town / Region / Post Code displayed side-by-side)
• MyAccountContactPage — PageHeaderStyle header, SectionCardStyle card with label/value pairs for Name, Email Address, Mobile Number

Reports screens:

• ReportsBalanceAnalysisPage — PageHeaderStyle header, chart wrapped in a SectionCardStyle card, pinned Back button at the bottom via Grid layout
• ReportsSalesAnalysisPage — PageHeaderStyle header, date-picker in a SectionCardStyle card, redesigned CollectionView card template (title + icon row, today's value row, comparison/variance row) replacing the old class-based layout

Every page in the app now uses the consistent PageHeaderStyle header. All original AutomationId values are preserved.

[StuartFerguson]

@copilot can you make the buttons into tiles on these screens as well

[Copilot]

@copilot can you make the buttons into tiles on these screens as well

Done in commit c390b9f. All buttons have been converted to tiles across every screen:

Transaction flows — dynamic selection pages (code-behind updated to build Frame tiles):

• Mobile Topup: operator + product selection → green tiles
• Bill Payment: operator + product selection → blue tiles
• Voucher: operator + select product selection → purple tiles
• My Account options list → teal tiles
• Reports options list → orange tiles

Transaction flows — form & result pages (XAML updated):

• Form pages (Perform Topup, Get Account, Get Meter, Make Payment, Issue Voucher): primary action tile + gray Back tile, displayed side-by-side in a 2-column grid
• Success pages: green Complete tile + gray Back tile side-by-side
• Failure pages: red Cancel tile (full-width)
• Admin page: Reconciliation + Back side-by-side

My Account screens:

• Addresses page: teal Edit Address + gray Back tiles side-by-side
• Contact page: teal Edit Contact + gray Back tiles side-by-side
• Account Details: gray Back tile

Support + other screens:

• Support page: Upload Logs + View Logs side-by-side, then Back full-width below
• View Logs, Reports Balance Analysis, Reports Sales Analysis, Transactions page: gray Back tile
• Home page: Exit Application → gray tile

A new ActionTileStyle was added to LightTheme.xaml (56px height, 14px corner radius, shadow, full-width) as the base for all action tiles.

[StuartFerguson]

@copilot got 3 build errors
'VoucherPerformIssuePage' does not contain a definition for 'IssueVoucherButton' and no accessible extension method 'IssueVoucherButton' accepting a first argument of type 'VoucherPerformIssuePage' could be found (are you missing a using directive or an assembly reference?)

'MobileTopupPerformTopupPage' does not contain a definition for 'PerformTopupButton' and no accessible extension method 'PerformTopupButton' accepting a first argument of type 'MobileTopupPerformTopupPage' could be found (are you missing a using directive or an assembly reference?)

'BillPaymentPayBillPage' does not contain a definition for 'MakePaymentButton' and no accessible extension method 'MakePaymentButton' accepting a first argument of type 'BillPaymentPayBillPage' could be found (are you missing a using directive or an assembly reference?)

[Copilot]

@copilot got 3 build errors
'VoucherPerformIssuePage' does not contain a definition for 'IssueVoucherButton' and no accessible extension method 'IssueVoucherButton' accepting a first argument of typ...

Fixed in commit 5de6b85. The three code-behind files had .Focus() calls targeting the named <Button> elements that were removed when converting to Frame tiles. Those calls have been removed from:

• MobileTopupPerformTopupPage.xaml.cs — vm.OnCustomerEmailAddressEntryCompleted
• BillPaymentPayBillPage.xaml.cs — vm.OnPaymentAmountEntryCompleted
• VoucherPerformIssuePage.xaml.cs — vm.OnCustomerEmailAddressEntryCompleted

[StuartFerguson]

@copilot does that not stop the code from working ?

[Copilot]

@copilot does that not stop the code from working ?

No, it doesn't break anything. Those callbacks only moved keyboard focus to the submit button after the user finished typing in the last form field — a minor UX convenience so pressing Return on the keyboard would activate the button.

The tile Frame elements don't support keyboard focus (they're not focusable controls), so that pattern simply can't work with tiles. The transaction logic itself is wired via data binding commands on the tiles, not through button focus, so submitting transactions works exactly as before — users tap the tile directly. The only thing removed is the now-inapplicable focus-forwarding hint.

[StuartFerguson]

@copilot can the my account and reports screens not have the 4 tiles like other screens, same with the operator and product selection screens if you can

[Copilot]

@copilot can the my account and reports screens not have the 4 tiles like other screens, same with the operator and product selection screens if you can

Done in commit 2879a25. All 8 pages now use the same 2-column tile grid as the Home screen Quick Actions:

My Account — options (Account Details, Addresses, Contact) appear as 100px tiles, two per row, with the Back tile spanning full width below.

Reports — report options appear as 100px tiles, two per row, with Back spanning full width below.

Operator & product selection (Mobile Topup, Bill Payment, Voucher) — operator names and product names fill the grid two-per-row; the Back tile is always full-width at the bottom.

The CreateTile method on all these pages was updated to match DashboardTileStyle dimensions (HeightRequest=100, CornerRadius=16) for visual consistency with the Home screen. The XAML container was changed from VerticalStackLayout to Grid ColumnDefinitions="*,*", and the code-behind Load* methods now use Grid.SetRow/Grid.SetColumn to place tiles in pairs.

Security summary: No security-relevant changes were made. The CodeQL scan timed out (MAUI workload not available in sandbox), but the changes are purely UI layout — no data handling, authentication, or network code was touched.

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: /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)