Skip to content

Transaction Flow Screens: Modern Tile-Based Layout Revamp #475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StuartFerguson merged 6 commits into from
Mar 6, 2026
Merged

Transaction Flow Screens: Modern Tile-Based Layout Revamp #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ef893e
Initial plan
Copilot Mar 5, 2026
775d1d3
Revamp transaction flow screens to modern tile-based layout
Copilot Mar 5, 2026
453b402
Rename OperatorTileFrame to SelectionTileFrame for clarity
Copilot Mar 5, 2026
f634cee
fix test bug
StuartFerguson Mar 6, 2026
12845f2
:|
StuartFerguson Mar 6, 2026
31b3710
:|
StuartFerguson Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 49 additions & 13 deletions TransactionProcessor.Mobile/Pages/Transactions/Admin/AdminPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,60 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.Transactions.Admin.AdminPage"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Shell.NavBarIsVisible="False"
Padding="0"
x:Name="Admin">
<ScrollView>
<VerticalStackLayout 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 Spacing="10">
<Button AutomationId="ReconciliationButton" x:Name="ReconciliationButton" Text="Reconciliation" Style="{DynamicResource AdminButtonStyle}">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding ReconciliationCommand}" BindingContext="{Binding Source={x:Reference Admin}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<VerticalStackLayout Spacing="0">

<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource admin}" Offset="0.0"/>
<GradientStop Color="#8b1a1a" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
<Label Text="Administrative options"
FontSize="13"
TextColor="White"
Opacity="0.85"
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Frame>
</Grid>

<!-- Admin tiles -->
<VerticalStackLayout Padding="20,24,20,16" Spacing="16">

<!-- Reconciliation tile -->
<Frame Style="{StaticResource HomeCardFrame}" AutomationId="ReconciliationButton">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ReconciliationCommand}"/>
</Frame.GestureRecognizers>
<HorizontalStackLayout Spacing="10" HorizontalOptions="Center">
<Image Source="transactionsbutton.svg" HeightRequest="36" WidthRequest="36" VerticalOptions="Center"/>
<Label Text="Reconciliation"
FontSize="15"
FontAttributes="Bold"
TextColor="{StaticResource admin}"
VerticalOptions="Center"/>
</HorizontalStackLayout>
</Frame>

<Button Text="Back"
AutomationId="BackButton"
Style="{StaticResource StandardButton}"
Command="{Binding BackButtonCommand}"/>

</VerticalStackLayout>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
58 changes: 38 additions & 20 deletions TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentFailedPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,52 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentFailedPage"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentFailedPage"
Shell.NavBarIsVisible="False"
Padding="0"
x:Name="BillPaymentFailed">
<ScrollView>
<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 Spacing="10">
<VerticalStackLayout Spacing="0">

<Image Source="paymentfailure.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource billPayment}" Offset="0.0"/>
<GradientStop Color="#2b8ccc" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Grid>

<Label Margin="17,8"
Text="Unfortunately, we could not process your bill payment, this may be for a variety of reasons. If you wish you can retry the transaction."/>
<!-- Status card -->
<VerticalStackLayout Padding="20,20,20,16" Spacing="12">
<Frame Style="{StaticResource StatusCardFrame}">
<VerticalStackLayout Spacing="8" HorizontalOptions="Center">
<Image Source="paymentfailure.svg" VerticalOptions="Start" Style="{DynamicResource PaymentImage}" HorizontalOptions="Center"/>
<Label Style="{StaticResource StatusMessageLabel}"
Text="Unfortunately, we could not process your bill payment, this may be for a variety of reasons. If you wish you can retry the transaction."/>
</VerticalStackLayout>
</Frame>

<Button x:Name="CancelButton" Grid.Row="5" Margin="0,16"
Text="Cancel"
<Button x:Name="CancelButton" Text="Cancel"
Style="{DynamicResource BillPaymentButtonStyle}" AutomationId="CancelButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding CancelledCommand}" BindingContext="{Binding Source={x:Reference BillPaymentFailed}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
</VerticalStackLayout>
</Frame>
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding CancelledCommand}" BindingContext="{Binding Source={x:Reference BillPaymentFailed}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
</VerticalStackLayout>

</VerticalStackLayout>
</ScrollView>
</ContentPage>
75 changes: 50 additions & 25 deletions TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetAccountPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,62 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentGetAccountPage"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Shell.NavBarIsVisible="False"
Padding="0"
x:Name="BillPaymentGetAccount">
<ScrollView>
<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 Spacing="10">
<Entry x:Name="CustomerAccountNumberEntry"
Placeholder="Customer Account Number"
AutomationId="CustomerAccountNumberEntry"
Style="{DynamicResource CustomerAccountNumberEntryStyle}"
Text="{Binding CustomerAccountNumber}"
Keyboard="Numeric">
</Entry>
<VerticalStackLayout Spacing="0">

<Button x:Name="GetAccountButton"
Text="Get Account"
Style="{DynamicResource BillPaymentButtonStyle}"
AutomationId="GetAccountButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding GetAccountCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetAccount}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="Back" Style="{StaticResource BillPaymentButtonStyle}" Command="{Binding BackButtonCommand}"/>
<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource billPayment}" Offset="0.0"/>
<GradientStop Color="#2b8ccc" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
<Label Text="Enter account details below"
FontSize="13"
TextColor="White"
Opacity="0.85"
HorizontalOptions="Center"/>
</VerticalStackLayout>

</Frame>
</Grid>

<!-- Form card -->
<VerticalStackLayout Padding="20,20,20,16" Spacing="12">
<Frame Style="{StaticResource TransactionFormCard}">
<VerticalStackLayout Spacing="12">
<Entry x:Name="CustomerAccountNumberEntry"
Placeholder="Customer Account Number"
AutomationId="CustomerAccountNumberEntry"
Style="{DynamicResource CustomerAccountNumberEntryStyle}"
Text="{Binding CustomerAccountNumber}"
Keyboard="Numeric"/>
</VerticalStackLayout>
</Frame>

<Button x:Name="GetAccountButton"
Text="Get Account"
Style="{DynamicResource BillPaymentButtonStyle}"
AutomationId="GetAccountButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding GetAccountCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetAccount}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="Back" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}"/>
</VerticalStackLayout>

</VerticalStackLayout>
</ScrollView>
</ContentPage>
77 changes: 51 additions & 26 deletions TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetMeterPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,64 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentGetMeterPage"
Shell.NavBarIsVisible="False"
Padding="0"
x:Name="BillPaymentGetMeter">
<ScrollView>
<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 Spacing="10">
<Entry x:Name="MeterNumberEntry"
Placeholder="Meter Number"
AutomationId="MeterNumberEntry"
Style="{DynamicResource CustomerAccountNumberEntryStyle}"
Text="{Binding MeterNumber}"
Keyboard="Numeric">
</Entry>
<VerticalStackLayout Spacing="0">

<Button x:Name="GetMeterButton"
Text="Get Meter"
Command="{Binding GetMeterCommand}"
Style="{DynamicResource BillPaymentButtonStyle}"
AutomationId="GetMeterButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding GetMeterCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetMeter}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="Back" Style="{StaticResource BillPaymentButtonStyle}" Command="{Binding BackButtonCommand}"/>
<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource billPayment}" Offset="0.0"/>
<GradientStop Color="#2b8ccc" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
<Label Text="Enter meter details below"
FontSize="13"
TextColor="White"
Opacity="0.85"
HorizontalOptions="Center"/>
</VerticalStackLayout>

</Frame>
</Grid>

<!-- Form card -->
<VerticalStackLayout Padding="20,20,20,16" Spacing="12">
<Frame Style="{StaticResource TransactionFormCard}">
<VerticalStackLayout Spacing="12">
<Entry x:Name="MeterNumberEntry"
Placeholder="Meter Number"
AutomationId="MeterNumberEntry"
Style="{DynamicResource CustomerAccountNumberEntryStyle}"
Text="{Binding MeterNumber}"
Keyboard="Numeric"/>
</VerticalStackLayout>
</Frame>

<Button x:Name="GetMeterButton"
Text="Get Meter"
Command="{Binding GetMeterCommand}"
Style="{DynamicResource BillPaymentButtonStyle}"
AutomationId="GetMeterButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding GetMeterCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetMeter}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="Back" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}"/>
</VerticalStackLayout>

</VerticalStackLayout>
</ScrollView>
</ContentPage>
Loading
Loading