695 lines
44 KiB
XML
695 lines
44 KiB
XML
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:vm="clr-namespace:Clario.ViewModels"
|
|
xmlns:model="clr-namespace:Clario.Models"
|
|
xmlns:cc="clr-namespace:Clario.CustomControls"
|
|
mc:Ignorable="d" d:DesignWidth="1180" d:DesignHeight="800"
|
|
x:Class="Clario.Views.TransactionsView"
|
|
x:DataType="vm:TransactionsViewModel"
|
|
x:Name="transactionsControl">
|
|
<Design.DataContext>
|
|
<vm:TransactionsViewModel />
|
|
</Design.DataContext>
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
|
|
<!-- LEFT PANEL — Summary + Filters -->
|
|
<Border Grid.Column="0"
|
|
Width="260"
|
|
Background="{DynamicResource BgSurface}"
|
|
BorderBrush="{DynamicResource BorderSubtle}"
|
|
BorderThickness="0,0,1,0"
|
|
Padding="4,0,4,0">
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto"
|
|
HorizontalScrollBarVisibility="Disabled"
|
|
Padding="16,0,16,0">
|
|
<StackPanel Spacing="0" Margin="0 28 0 28">
|
|
|
|
<!-- Period header
|
|
REPLACE: bind TextBlock texts to SelectedPeriodLabel
|
|
-->
|
|
<TextBlock Text="{Binding DateRangeLabel}"
|
|
Classes="label"
|
|
Margin="0,0,0,4" />
|
|
<TextBlock Text="Summary"
|
|
FontSize="15"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource TextPrimary}"
|
|
Margin="0,0,0,16" />
|
|
|
|
<!-- Summary stats — left accent bar style
|
|
REPLACE: bind each amount + count Text
|
|
-->
|
|
<StackPanel Spacing="2">
|
|
|
|
<!-- Income row -->
|
|
<Grid ColumnDefinitions="3,*,Auto"
|
|
Height="48">
|
|
<Border Grid.Column="0"
|
|
Background="{DynamicResource AccentGreen}"
|
|
CornerRadius="2"
|
|
Margin="0,6,0,6" />
|
|
<StackPanel Grid.Column="1"
|
|
VerticalAlignment="Center"
|
|
Margin="12,0,0,0">
|
|
<TextBlock Text="Income"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextMuted}" />
|
|
<!-- REPLACE: bind to PeriodIncomeFormatted -->
|
|
<TextBlock FontSize="15"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource AccentGreen}">
|
|
<TextBlock.Text>
|
|
<MultiBinding StringFormat="{}{0}{1:N2}">
|
|
<Binding Path="PrimaryCurrencySymbol" />
|
|
<Binding Path="TotalIncome" />
|
|
</MultiBinding>
|
|
</TextBlock.Text>
|
|
</TextBlock>
|
|
</StackPanel>
|
|
<!-- REPLACE: bind to IncomeTransactionCount + " transactions" -->
|
|
<TextBlock Grid.Column="2"
|
|
Text="{Binding IncomeCount}"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextDisabled}"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
|
|
<!-- Expenses row -->
|
|
<Grid ColumnDefinitions="3,*,Auto"
|
|
Height="48">
|
|
<Border Grid.Column="0"
|
|
Background="{DynamicResource AccentRed}"
|
|
CornerRadius="2"
|
|
Margin="0,6,0,6" />
|
|
<StackPanel Grid.Column="1"
|
|
VerticalAlignment="Center"
|
|
Margin="12,0,0,0">
|
|
<TextBlock Text="Expenses"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextMuted}" />
|
|
<!-- REPLACE: bind to PeriodExpensesFormatted -->
|
|
<TextBlock FontSize="15"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource AccentRed}">
|
|
<TextBlock.Text>
|
|
<MultiBinding StringFormat="{}{0}{1:N2}">
|
|
<Binding Path="PrimaryCurrencySymbol" />
|
|
<Binding Path="TotalExpenses" />
|
|
</MultiBinding>
|
|
</TextBlock.Text>
|
|
</TextBlock>
|
|
</StackPanel>
|
|
<!-- REPLACE: bind to ExpenseTransactionCount -->
|
|
<TextBlock Grid.Column="2"
|
|
Text="{Binding ExpensesCount}"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextDisabled}"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
|
|
<!-- Net row -->
|
|
<Grid ColumnDefinitions="3,*"
|
|
Height="48">
|
|
<Border Grid.Column="0"
|
|
Background="{DynamicResource AccentBlue}"
|
|
CornerRadius="2"
|
|
Margin="0,6,0,6" />
|
|
<StackPanel Grid.Column="1"
|
|
VerticalAlignment="Center"
|
|
Margin="12,0,0,0">
|
|
<TextBlock Text="Net saved"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextMuted}" />
|
|
<!-- REPLACE: bind to PeriodNetFormatted -->
|
|
<TextBlock
|
|
FontSize="15"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource AccentBlue}">
|
|
<TextBlock.Text>
|
|
<MultiBinding Converter="{StaticResource NetworthSumConverter}">
|
|
<Binding Path="TotalIncome" />
|
|
<Binding Path="TotalExpenses" />
|
|
<Binding Path="PrimaryCurrencySymbol" />
|
|
</MultiBinding>
|
|
</TextBlock.Text>
|
|
</TextBlock>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
</StackPanel>
|
|
|
|
<!-- Divider -->
|
|
<Separator Margin="0,20,0,20" />
|
|
|
|
<!-- Filters header + Reset link
|
|
REPLACE: Command="{Binding ResetFiltersCommand}" on the Button
|
|
-->
|
|
<Grid ColumnDefinitions="*,Auto" Margin="0,0,0,16">
|
|
<TextBlock Grid.Column="0"
|
|
Classes="label"
|
|
Text="FILTERS"
|
|
VerticalAlignment="Center" />
|
|
<!-- REPLACE: Command="{Binding ResetFiltersCommand}" -->
|
|
<Button Grid.Column="1"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
Padding="0"
|
|
Foreground="{DynamicResource AccentBlue}"
|
|
FontSize="12"
|
|
Cursor="Hand"
|
|
Content="Reset"
|
|
Command="{Binding ResetFiltersCommand}" />
|
|
</Grid>
|
|
|
|
<!-- Search
|
|
REPLACE: Text="{Binding SearchQuery, Mode=TwoWay}"
|
|
-->
|
|
<TextBox Watermark="Search transactions..."
|
|
Text="{Binding SearchText}"
|
|
FontSize="13"
|
|
Height="36"
|
|
Padding="12,0"
|
|
VerticalContentAlignment="Center"
|
|
Margin="0,0,0,14" />
|
|
|
|
<!-- Date range
|
|
REPLACE: SelectedIndex="{Binding SelectedDateRangeIndex}"
|
|
-->
|
|
<TextBlock Classes="label" Text="DATE RANGE" Margin="0,0,0,6" />
|
|
<ComboBox HorizontalAlignment="Stretch"
|
|
ItemsSource="{Binding DateRangeOptions}"
|
|
SelectedItem="{Binding SelectedDateRangeOption}"
|
|
Padding="10,8"
|
|
FontSize="13"
|
|
Margin="0,0,0,8">
|
|
</ComboBox>
|
|
|
|
<cc:DateRangePicker SelectionMode="SingleRange"
|
|
Padding="10,8"
|
|
HorizontalAlignment="Stretch"
|
|
FontSize="13"
|
|
SelectedDates="{Binding SelectedDates}"
|
|
Margin="0,0,0,14">
|
|
<cc:DateRangePicker.IsVisible>
|
|
<MultiBinding Converter="{StaticResource EqualValueConverter}">
|
|
<Binding Path="SelectedDateRangeOption" />
|
|
<Binding Source="Custom Range" />
|
|
</MultiBinding>
|
|
</cc:DateRangePicker.IsVisible>
|
|
</cc:DateRangePicker>
|
|
<!-- Type toggle
|
|
REPLACE: wire up to SelectedTypeIndex with ToggleButton group or RadioButtons
|
|
-->
|
|
<TextBlock Classes="label" Text="TYPE" Margin="0,0,0,6" />
|
|
<Border Background="{DynamicResource BgBase}"
|
|
BorderBrush="{DynamicResource BorderSubtle}"
|
|
BorderThickness="1"
|
|
CornerRadius="{DynamicResource RadiusControl}"
|
|
Padding="3"
|
|
Margin="0,0,0,14">
|
|
<Grid ColumnDefinitions="*,*,*,*">
|
|
<Button Grid.Column="0"
|
|
Classes="nav"
|
|
Classes.accented="{Binding FilterTypeAll}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Center"
|
|
Focusable="False"
|
|
CornerRadius="7"
|
|
Padding="0,6"
|
|
Command="{Binding SetTransactionTypeCommand}"
|
|
CommandParameter="all">
|
|
<TextBlock Text="All" FontSize="12" FontWeight="SemiBold" HorizontalAlignment="Center" />
|
|
</Button>
|
|
<Button Grid.Column="1"
|
|
Classes="nav"
|
|
Classes.accented="{Binding FilterTypeIncome}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Center"
|
|
Focusable="False"
|
|
CornerRadius="7"
|
|
Padding="0,6"
|
|
Command="{Binding SetTransactionTypeCommand}"
|
|
CommandParameter="income">
|
|
<TextBlock Text="Income" FontSize="12" Focusable="False" HorizontalAlignment="Center" />
|
|
</Button>
|
|
<Button Grid.Column="2"
|
|
Classes="nav"
|
|
Classes.accented="{Binding FilterTypeExpense}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Center"
|
|
Focusable="False"
|
|
CornerRadius="7"
|
|
Padding="0,6"
|
|
Command="{Binding SetTransactionTypeCommand}"
|
|
CommandParameter="expense">
|
|
<TextBlock Text="Expense" FontSize="12" Focusable="False" HorizontalAlignment="Center" />
|
|
</Button>
|
|
<Button Grid.Column="3"
|
|
Classes="nav"
|
|
Classes.accented="{Binding FilterTypeTransfer}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Center"
|
|
Focusable="False"
|
|
CornerRadius="7"
|
|
Padding="0,6"
|
|
Command="{Binding SetTransactionTypeCommand}"
|
|
CommandParameter="transfer">
|
|
<TextBlock Text="Transfer" FontSize="12" Focusable="False" HorizontalAlignment="Center" />
|
|
</Button>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Category
|
|
REPLACE: ItemsSource="{Binding Categories}" SelectedItem="{Binding SelectedCategory}"
|
|
-->
|
|
<TextBlock Classes="label" Text="CATEGORY" Margin="0,0,0,6" />
|
|
<ComboBox HorizontalAlignment="Stretch"
|
|
SelectedItem="{Binding SelectedCategory}"
|
|
ItemsSource="{Binding Categories}"
|
|
DisplayMemberBinding="{Binding Name}"
|
|
Padding="10,8"
|
|
FontSize="13"
|
|
Margin="0,0,0,14">
|
|
</ComboBox>
|
|
|
|
<!-- Account
|
|
REPLACE: ItemsSource="{Binding Accounts}" SelectedItem="{Binding SelectedAccount}"
|
|
-->
|
|
<TextBlock Classes="label" Text="ACCOUNT" Margin="0,0,0,6" />
|
|
<ComboBox HorizontalAlignment="Stretch"
|
|
ItemsSource="{Binding Accounts}"
|
|
SelectedItem="{Binding SelectedAccount}"
|
|
DisplayMemberBinding="{Binding Name}"
|
|
SelectedIndex="0"
|
|
Padding="10,8"
|
|
FontSize="13"
|
|
Margin="0,0,0,14">
|
|
</ComboBox>
|
|
|
|
<!-- Sort
|
|
REPLACE: SelectedItem="{Binding SelectedSort}"
|
|
-->
|
|
<TextBlock Classes="label" Text="SORT BY" Margin="0,0,0,6" />
|
|
<ComboBox HorizontalAlignment="Stretch"
|
|
ItemsSource="{Binding SortOptions}"
|
|
SelectedItem="{Binding SelectedSortOption}"
|
|
SelectedIndex="0"
|
|
Padding="10,8"
|
|
FontSize="13"
|
|
Margin="0 0 0 18">
|
|
|
|
</ComboBox>
|
|
<Button Classes="accented"
|
|
Padding="16,9"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Stretch"
|
|
Command="{Binding LoadPageStrCommand}" CommandParameter="1">
|
|
<TextBlock Text="Apply Filters"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource BgBase}"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Button>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</Border>
|
|
|
|
<!--
|
|
RIGHT PANEL — Transaction List
|
|
-->
|
|
<Grid Grid.Column="1" RowDefinitions="Auto,*">
|
|
|
|
<!-- Top Bar -->
|
|
<Grid Grid.Row="0"
|
|
ColumnDefinitions="*,Auto"
|
|
Margin="28,28,28,0">
|
|
<StackPanel Grid.Column="0">
|
|
<TextBlock Text="{Binding FilteredTransactionCount, StringFormat='{}{0} transactions'}"
|
|
Classes="muted" />
|
|
<TextBlock Text="Transactions"
|
|
FontSize="26"
|
|
FontWeight="Bold"
|
|
Foreground="{DynamicResource TextPrimary}"
|
|
Margin="0,2,0,0" />
|
|
</StackPanel>
|
|
|
|
<!-- REPLACE: Command="{Binding AddTransactionCommand}" -->
|
|
<Button Grid.Column="1"
|
|
Classes="accented"
|
|
Padding="16,9"
|
|
VerticalAlignment="Center"
|
|
Command="{Binding CreateTransactionCommand}">
|
|
<StackPanel Orientation="Horizontal" Spacing="8">
|
|
<Svg Path="../Assets/Icons/plus.svg"
|
|
Width="14" Height="14"
|
|
Css="{DynamicResource SvgBase}" />
|
|
<TextBlock Text="Add Transaction"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource BgBase}"
|
|
VerticalAlignment="Center" />
|
|
</StackPanel>
|
|
</Button>
|
|
</Grid>
|
|
|
|
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
|
|
<Grid RowDefinitions="Auto,*,Auto">
|
|
<!-- Column Headers -->
|
|
<Border Grid.Row="0"
|
|
Margin="28,16,28,0"
|
|
Background="{DynamicResource BgSurface}"
|
|
BorderBrush="{DynamicResource BorderSubtle}"
|
|
BorderThickness="1"
|
|
CornerRadius="12,12,0,0"
|
|
Padding="20,12">
|
|
<Grid ColumnDefinitions="44,*,160,120,100,100">
|
|
<TextBlock Grid.Column="0"
|
|
Classes="label"
|
|
Text=""
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Grid.Column="1"
|
|
Classes="label"
|
|
Text="DESCRIPTION"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Grid.Column="2"
|
|
Classes="label"
|
|
Text="CATEGORY"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
<TextBlock Grid.Column="3"
|
|
Classes="label"
|
|
Text="ACCOUNT"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
<TextBlock Grid.Column="4"
|
|
Classes="label"
|
|
Text="DATE"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
<TextBlock Grid.Column="5"
|
|
Classes="label"
|
|
Text="AMOUNT"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Transaction List -->
|
|
<!-- REPLACE: ItemsSource="{Binding FilteredTransactions}" with DataTemplate -->
|
|
<ScrollViewer Grid.Row="1"
|
|
Margin="28,0,28,0"
|
|
VerticalScrollBarVisibility="Auto"
|
|
HorizontalScrollBarVisibility="Disabled" Name="TransactionsScrollViewer">
|
|
<Border Background="{DynamicResource BgSurface}"
|
|
BorderBrush="{DynamicResource BorderSubtle}"
|
|
BorderThickness="1,0,1,1"
|
|
CornerRadius="0,0,0,0">
|
|
<StackPanel>
|
|
<ItemsControl ItemsSource="{Binding PagedTransactions}">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate x:DataType="model:Transaction">
|
|
<Panel>
|
|
<Border Padding="20,14,20,6" IsVisible="{Binding GroupHeader}">
|
|
<TextBlock Text="{Binding Description}"
|
|
Classes="label" />
|
|
</Border>
|
|
<Border Classes="editable" Padding="20,12" IsVisible="{Binding !GroupHeader}"
|
|
BorderBrush="{DynamicResource BorderSubtle}" Background="{DynamicResource BgSurface}"
|
|
BorderThickness="0,1,0,0">
|
|
<Grid ColumnDefinitions="44,*,160,120,100,100">
|
|
|
|
<Panel Grid.Column="0"
|
|
Width="34" Height="34"
|
|
VerticalAlignment="Center">
|
|
<!-- Category icon (income / expense) -->
|
|
<Border CornerRadius="{DynamicResource RadiusIcon}"
|
|
Width="34" Height="34"
|
|
IsVisible="{Binding !IsTransfer}">
|
|
<Border.Background>
|
|
<SolidColorBrush
|
|
Color="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
|
Opacity="0.15" />
|
|
</Border.Background>
|
|
<Svg Classes="hide"
|
|
Path="{Binding Category.Icon,Converter={StaticResource SvgPathFromName}}"
|
|
Width="16" Height="16"
|
|
Css="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
|
</Border>
|
|
<!-- Transfer icon -->
|
|
<Border CornerRadius="{DynamicResource RadiusIcon}"
|
|
Width="34" Height="34"
|
|
Background="{DynamicResource IconBgBlue}"
|
|
IsVisible="{Binding IsTransfer}">
|
|
<Svg Path="../Assets/Icons/arrow-right-left.svg"
|
|
Width="16" Height="16"
|
|
Css="{DynamicResource SvgBlue}" />
|
|
</Border>
|
|
<!-- Edit button overlay -->
|
|
<Button Classes="base reveal"
|
|
CornerRadius="{DynamicResource RadiusSmall}"
|
|
Width="34" Height="34" Margin="0"
|
|
Command="{Binding DataContext.EditTransactionCommand,ElementName=transactionsControl}"
|
|
CommandParameter="{Binding .}">
|
|
<Svg Path="../Assets/Icons/pencil.svg" Width="16" Height="16"
|
|
Css="{DynamicResource SvgSecondary}" />
|
|
</Button>
|
|
</Panel>
|
|
|
|
<StackPanel Grid.Column="1"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,16,0">
|
|
<!-- REPLACE: bind to Transaction.Description -->
|
|
<TextBlock Text="{Binding Description}"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource TextPrimary}" />
|
|
<!-- REPLACE: bind to Transaction.Note -->
|
|
<TextBlock Text="{Binding Note}"
|
|
FontSize="11"
|
|
Foreground="{DynamicResource TextMuted}" />
|
|
</StackPanel>
|
|
|
|
<Panel Grid.Column="2"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center">
|
|
<!-- Normal category badge -->
|
|
<StackPanel Orientation="Horizontal" Spacing="6"
|
|
IsVisible="{Binding !IsTransfer}">
|
|
<Border CornerRadius="6" Padding="6,3">
|
|
<Border.Background>
|
|
<SolidColorBrush Opacity="0.15"
|
|
Color="{Binding Category.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=color}" />
|
|
</Border.Background>
|
|
<StackPanel Orientation="Horizontal" Spacing="5">
|
|
<Svg Path="{Binding Category.Icon, Converter={StaticResource SvgPathFromName}}"
|
|
Width="11" Height="11"
|
|
Css="{Binding Category.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
|
<TextBlock Text="{Binding Category.Name}"
|
|
FontSize="12"
|
|
Foreground="{Binding Category.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=brush}"
|
|
VerticalAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
</StackPanel>
|
|
<!-- Transfer badge -->
|
|
<Border CornerRadius="6" Padding="6,3"
|
|
Background="{DynamicResource IconBgBlue}"
|
|
IsVisible="{Binding IsTransfer}">
|
|
<StackPanel Orientation="Horizontal" Spacing="5">
|
|
<Svg Path="../Assets/Icons/arrow-right-left.svg"
|
|
Width="11" Height="11"
|
|
Css="{DynamicResource SvgBlue}" />
|
|
<TextBlock Text="Transfer"
|
|
FontSize="12"
|
|
Foreground="{DynamicResource AccentBlue}"
|
|
VerticalAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
</Panel>
|
|
|
|
<TextBlock Grid.Column="3"
|
|
Text="{Binding AccountDisplayText}"
|
|
FontSize="12"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
|
|
<!-- REPLACE: bind to Transaction.DateFormatted -->
|
|
<TextBlock Grid.Column="4"
|
|
Text="{Binding Date, Converter={StaticResource DateFormatConverter}}"
|
|
FontSize="12"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
|
|
<!-- Dual-currency amount display -->
|
|
<StackPanel Grid.Column="5"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center"
|
|
Spacing="1">
|
|
<TextBlock Text="{Binding PrimaryAmountFormatted}"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
HorizontalAlignment="Right"
|
|
Foreground="{Binding Type, Converter={StaticResource AmountColorConverter}}" />
|
|
<TextBlock Text="{Binding OriginalAmountFormatted}"
|
|
FontSize="11"
|
|
HorizontalAlignment="Right"
|
|
IsVisible="{Binding IsMultiCurrency}"
|
|
Foreground="{DynamicResource TextMuted}" />
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
</Panel>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
<StackPanel HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
Spacing="12"
|
|
Margin="0,60"
|
|
IsVisible="{Binding HasNoTransactions}">
|
|
<Svg Path="../Assets/Icons/search.svg"
|
|
Css="{DynamicResource SvgPrimary}"
|
|
Height="40"
|
|
Width="40" />
|
|
<TextBlock Text="No transactions found"
|
|
FontSize="15"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource TextPrimary}"
|
|
HorizontalAlignment="Center" />
|
|
<TextBlock Text="Try adjusting your filters or search query."
|
|
FontSize="13"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
HorizontalAlignment="Center" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
</ScrollViewer>
|
|
|
|
<!-- Pagination Footer -->
|
|
<Border Grid.Row="2"
|
|
Margin="28,0,28,24"
|
|
Background="{DynamicResource BgSurface}"
|
|
BorderBrush="{DynamicResource BorderSubtle}"
|
|
BorderThickness="1"
|
|
CornerRadius="0,0,12,12"
|
|
Padding="20,12">
|
|
<Grid ColumnDefinitions="*,Auto,*">
|
|
|
|
<!-- Left: result count -->
|
|
<!-- REPLACE: bind to PaginationSummaryText -->
|
|
<TextBlock Grid.Column="0"
|
|
Text="{Binding PaginationSummaryText}"
|
|
FontSize="12"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
VerticalAlignment="Center" />
|
|
|
|
<!-- Center: page buttons -->
|
|
<StackPanel Grid.Column="1"
|
|
Orientation="Horizontal"
|
|
Spacing="4">
|
|
<!-- REPLACE: Command="{Binding PreviousPageCommand}" IsEnabled="{Binding HasPreviousPage}" -->
|
|
<Button Classes="base"
|
|
Width="32" Height="32"
|
|
Padding="0"
|
|
HorizontalContentAlignment="Center"
|
|
Command="{Binding PreviousPageCommand}">
|
|
<Svg Path="../Assets/Icons/chevron-left.svg"
|
|
Width="14" Height="14"
|
|
Css="{DynamicResource SvgMuted}" />
|
|
</Button>
|
|
|
|
<!-- REPLACE: ItemsSource="{Binding PageNumbers}" — render dynamically -->
|
|
<ItemsControl ItemsSource="{Binding VisiblePageNumbers}">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel Orientation="Horizontal" />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Panel>
|
|
<Button Background="{DynamicResource AccentBlue}"
|
|
CornerRadius="{DynamicResource RadiusSmall}"
|
|
Width="32" Height="32" Name="btnActive">
|
|
<Button.IsVisible>
|
|
<MultiBinding Converter="{StaticResource EqualValueConverter}">
|
|
<Binding Path="." />
|
|
<Binding Path="DataContext.CurrentPage" ElementName="transactionsControl" />
|
|
</MultiBinding>
|
|
</Button.IsVisible>
|
|
<TextBlock Text="{Binding .}"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{DynamicResource BgBase}"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Button>
|
|
<Button Background="Transparent" IsVisible="{Binding !#btnActive.IsVisible}"
|
|
CornerRadius="{DynamicResource RadiusSmall}"
|
|
Width="32" Height="32"
|
|
Command="{Binding DataContext.LoadPageCommand, ElementName=transactionsControl}"
|
|
CommandParameter="{Binding .}">
|
|
<TextBlock Text="{Binding .}"
|
|
FontSize="13"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Button>
|
|
</Panel>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
|
|
|
|
<!-- REPLACE: Command="{Binding NextPageCommand}" IsEnabled="{Binding HasNextPage}" -->
|
|
<Button Classes="base"
|
|
Width="32" Height="32"
|
|
Padding="0"
|
|
HorizontalContentAlignment="Center"
|
|
Command="{Binding NextPageCommand}">
|
|
<Svg Path="../Assets/Icons/chevron-right.svg"
|
|
Width="14" Height="14"
|
|
Css="{DynamicResource SvgMuted}" />
|
|
</Button>
|
|
</StackPanel>
|
|
|
|
<!-- Right: per-page selector -->
|
|
<StackPanel Grid.Column="2"
|
|
Orientation="Horizontal"
|
|
Spacing="8"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center">
|
|
<TextBlock Text="Rows per page"
|
|
FontSize="12"
|
|
Foreground="{DynamicResource TextMuted}"
|
|
VerticalAlignment="Center" />
|
|
<!-- REPLACE: SelectedItem="{Binding PageSize}" -->
|
|
<ComboBox SelectedIndex="{Binding PageSizeIndex}"
|
|
Padding="8,4"
|
|
FontSize="12"
|
|
Width="64">
|
|
<ComboBoxItem Content="25" />
|
|
<ComboBoxItem Content="50" />
|
|
<ComboBoxItem Content="100" />
|
|
</ComboBox>
|
|
</StackPanel>
|
|
|
|
</Grid>
|
|
</Border>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
|
|
</UserControl> |