Reporting Screens Revamp: Modern Tile-Based Layout

TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml

@@ -1,15 +1,49 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <common:NoBackWithoutLogoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-                               xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
                                xmlns:common="clr-namespace:TransactionProcessor.Mobile.Pages.Common"
                                x:Class="TransactionProcessor.Mobile.Pages.Reports.ReportsPage"
-                               Shell.NavBarIsVisible="False">
-    <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-        <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-        <Frame Style="{DynamicResource MainFrame}">
-            <VerticalStackLayout x:Name="ReportsList" Spacing="10">
+                               Shell.NavBarIsVisible="False"
+                               Padding="0">
+    <ScrollView>
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header with gradient background -->
+            <Grid HeightRequest="130">
+                <Grid.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                        <GradientStop Color="{StaticResource reports}" Offset="0.0"/>
+                        <GradientStop Color="#c96a1e" Offset="1.0"/>
+                    </LinearGradientBrush>
+                </Grid.Background>
+                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
+                    <Image Source="reportbutton.svg" HeightRequest="44" WidthRequest="44" HorizontalOptions="Center"/>
+                    <Label Text="{Binding Title}"
+                           AutomationId="{Binding Title}"
+                           FontSize="20"
+                           FontAttributes="Bold"
+                           TextColor="White"
+                           HorizontalOptions="Center"/>
+                    <Label Text="Select a report to view"
+                           FontSize="13"
+                           TextColor="White"
+                           Opacity="0.85"
+                           HorizontalOptions="Center"/>
+                </VerticalStackLayout>
+            </Grid>
+
+            <!-- Report tiles -->
+            <VerticalStackLayout Padding="20,20,20,16" Spacing="16">
+                <FlexLayout x:Name="ReportsList"
+                            Wrap="Wrap"
+                            JustifyContent="SpaceEvenly"
+                            AlignItems="Start"/>
+                <Button Text="Back"
+                        AutomationId="BackButton"
+                        Style="{StaticResource StandardButton}"
+                        Command="{Binding BackButtonCommand}"/>
             </VerticalStackLayout>
-        </Frame>
-    </VerticalStackLayout>
+
+        </VerticalStackLayout>
+    </ScrollView>
 </common:NoBackWithoutLogoutPage>

TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs

@@ -1,4 +1,3 @@
-using CommunityToolkit.Maui.Behaviors;
 using TransactionProcessor.Mobile.BusinessLogic.Common;
 using TransactionProcessor.Mobile.BusinessLogic.Models;
 using TransactionProcessor.Mobile.BusinessLogic.ViewModels.Reports;
@@ -20,72 +19,77 @@ protected override async void OnAppearing()
     {
         base.OnAppearing();
         await this.viewModel.Initialise(CancellationToken.None);
-        this.LoadProducts(this.viewModel);
+        this.LoadReports(this.viewModel);
     }
 
-    private void LoadProducts(ReportsPageViewModel viewModel)
+    private void LoadReports(ReportsPageViewModel viewModel)
     {
-        this.ReportsList.Clear();
+        this.ReportsList.Children.Clear();
 
         Int32 rowCount = 0;
         foreach (ListViewItem modelOption in viewModel.ReportsMenuOptions)
         {
-            Button button = new Button
-                            {
-                                Text = modelOption.Title,
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
-                            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
-
-            Binding commandParameter = new Binding
-            {
-                Source = new ItemSelected<ListViewItem>
-                {
-                    SelectedItem = modelOption,
-                    SelectedItemIndex = rowCount
-                }
-            };
-
-            Binding command = new Binding("OptionSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
-            {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
+            Frame tile = this.CreateReportTile(modelOption, rowCount);
+            this.ReportsList.Children.Add(tile);
             rowCount++;
-            this.ReportsList.Add(button);
-
         }
-
-        this.ReportsList.Add(this.AddBackButton());
     }
 
-    private Button AddBackButton()
+    private Frame CreateReportTile(ListViewItem modelOption, Int32 rowCount)
     {
-        Button button = new Button
+        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"
+        };
+
+        Image icon = new Image
         {
-            Text = "Back",
-            HorizontalOptions = LayoutOptions.FillAndExpand,
-            AutomationId = "BackButton",
+            Source = iconSource,
+            HeightRequest = 36,
+            WidthRequest = 36,
+            HorizontalOptions = LayoutOptions.Center
         };
-        button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
 
-        Binding backButtonCommand = new Binding
+        Label nameLabel = new Label
         {
-            Source = this.viewModel.BackButtonCommand
+            Text = modelOption.Title,
+            HorizontalTextAlignment = TextAlignment.Center,
+            HorizontalOptions = LayoutOptions.Center,
+            FontAttributes = FontAttributes.Bold,
+            FontSize = 13
         };
+        nameLabel.SetDynamicResource(Label.TextColorProperty, "reports");
 
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
+        tile.Content = new VerticalStackLayout
+        {
+            Spacing = 8,
+            HorizontalOptions = LayoutOptions.Center,
+            Children = { icon, nameLabel }
+        };
 
-        return button;
-    }
+        Binding commandParameter = new Binding
+        {
+            Source = new ItemSelected<ListViewItem>
+            {
+                SelectedItem = modelOption,
+                SelectedItemIndex = rowCount
+            }
+        };
+
+        Binding command = new Binding("OptionSelectedCommand", source: this.viewModel);
+
+        TapGestureRecognizer tapGesture = new TapGestureRecognizer();
+        tapGesture.SetBinding(TapGestureRecognizer.CommandProperty, command);
+        tapGesture.SetBinding(TapGestureRecognizer.CommandParameterProperty, commandParameter);
 
+        tile.GestureRecognizers.Add(tapGesture);
+
+        return tile;
+    }
 }