Reporting Screens Revamp: Modern Tile-Based Layout

[Copilot]

The Reporting screens used a plain vertical list of buttons with no visual hierarchy or modern styling.

Changes

ReportsPage.xaml

• Replaced flat button list with ScrollView + gradient header (reports theme color #E38C44) containing page icon, title, and subtitle
• Swapped VerticalStackLayout of buttons for a FlexLayout (Wrap, JustifyContent="SpaceEvenly") to render responsive tiles
• Back button now uses StandardButton style, consistent with other revamped pages

ReportsPage.xaml.cs

• Removed LoadProducts/AddBackButton button-building methods and CommunityToolkit.Maui.Behaviors dependency
• Added LoadReports + CreateReportTile producing Frame tiles styled with SelectionTileFrame, matching the pattern used in MyAccountPage and MobileTopupSelectProductPage
• Tiles use per-report SVG icons, reports theme-colored labels, and TapGestureRecognizer for navigation
• AutomationId values (SalesAnalysisButton, BalanceAnalysisButton) preserved for UI test compatibility

private Frame CreateReportTile(ListViewItem modelOption, Int32 rowCount)
{
    Frame tile = new Frame();
    tile.SetDynamicResource(VisualElement.StyleProperty, "SelectionTileFrame");
    tile.AutomationId = $"{modelOption.Title.Replace(" ", "")}Button";

    String iconSource = modelOption.Title switch
    {
        "Sales Analysis"  => "transactionsbutton.svg",
        "Balance Analysis" => "reportbutton.svg",
        _ => "reportbutton.svg"
    };
    // icon + label + TapGestureRecognizer bound to OptionSelectedCommand
    ...
}

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)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Reporting Screens Revamp</issue_title>
<issue_description>I would like the Reporting 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 Reporting Screens Revamp #467

---

🔒 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.