budget-view, dashboard-view displayed correct, transactions-form finalized
This commit is contained in:
@@ -296,7 +296,7 @@
|
||||
Foreground="{Binding Type,Converter={StaticResource AmountColorConverter}}"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock.Text>
|
||||
<MultiBinding Converter="{StaticResource AmountSignConverter}">
|
||||
<MultiBinding Converter="{StaticResource AmountSignConverter}" ConverterParameter="round">
|
||||
<Binding Path="Amount" />
|
||||
<Binding Path="Type" />
|
||||
</MultiBinding>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -9,17 +9,16 @@
|
||||
x:Class="Clario.Views.AuthView">
|
||||
<Grid>
|
||||
|
||||
<!-- ── Background ────────────────────────── -->
|
||||
<Border Background="{DynamicResource BgBase}" />
|
||||
<!-- Background -->
|
||||
<!-- <Calendar SelectionMode="SingleRange"> -->
|
||||
<!-- </Calendar> -->
|
||||
|
||||
<!-- ── Subtle grid pattern overlay ──────── -->
|
||||
<!-- <Border Opacity="0.03" Background="{DynamicResource BgBase}"> -->
|
||||
<!-- -->
|
||||
|
||||
|
||||
<!-- <Border Background="{DynamicResource AccentBlue}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="400" Width="400" Padding="10"> -->
|
||||
<!-- -->
|
||||
<!-- </Border> -->
|
||||
|
||||
<!-- ── Center card ───────────────────────── -->
|
||||
<!-- Center card -->
|
||||
<Border HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Background="{DynamicResource BgSurface}"
|
||||
@@ -31,7 +30,7 @@
|
||||
BoxShadow="0 24 64 0 #40000000">
|
||||
<StackPanel Spacing="0">
|
||||
|
||||
<!-- ── Logo + App name ─────────────── -->
|
||||
<!-- Logo + App name -->
|
||||
<StackPanel HorizontalAlignment="Center"
|
||||
Spacing="0"
|
||||
Margin="0,0,0,32">
|
||||
@@ -39,7 +38,7 @@
|
||||
CornerRadius="16"
|
||||
Height="100"
|
||||
HorizontalAlignment="Center">
|
||||
<Image Source="../Assets/Logo textmark.png"></Image>
|
||||
<!-- <Image Source="../Assets/Logo textmark.png"></Image> -->
|
||||
</Border>
|
||||
<!-- REPLACE: app name -->
|
||||
<StackPanel Spacing="4" HorizontalAlignment="Center">
|
||||
@@ -55,7 +54,7 @@
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<!-- ── Tab switcher ────────────────── -->
|
||||
<!-- Tab switcher -->
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
@@ -433,7 +432,7 @@
|
||||
|
||||
</StackPanel>
|
||||
|
||||
<!-- ── Footer ──────────────────────── -->
|
||||
<!-- Footer -->
|
||||
<Separator Margin="0,0,0,16" />
|
||||
<TextBlock Text="Your data is encrypted and synced securely."
|
||||
FontSize="11"
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
using System;
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
xmlns:views="clr-namespace:Clario.Views"
|
||||
xmlns:system="clr-namespace:System;assembly=System.Runtime"
|
||||
xmlns:skiaSharpView="clr-namespace:LiveChartsCore.SkiaSharpView;assembly=LiveChartsCore.SkiaSharpView"
|
||||
xmlns:model="clr-namespace:Clario.Models"
|
||||
x:DataType="vm:BudgetViewModel"
|
||||
mc:Ignorable="d" d:DesignWidth="1180" d:DesignHeight="800"
|
||||
x:Class="Clario.Views.BudgetView">
|
||||
@@ -28,7 +29,7 @@
|
||||
|
||||
<StackPanel Grid.Column="0">
|
||||
<!-- REPLACE: bind to CurrentPeriodLabel e.g. "March 2026" -->
|
||||
<TextBlock Text="March 2026"
|
||||
<TextBlock Text="{Binding CurrentPeriodFormatted}"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text="Budget"
|
||||
@@ -51,15 +52,17 @@
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<!-- REPLACE: Command="{Binding PreviousPeriodCommand}" -->
|
||||
<Button Background="Transparent"
|
||||
Classes="nav textless"
|
||||
BorderThickness="0"
|
||||
Padding="10,8"
|
||||
Cursor="Hand">
|
||||
Cursor="Hand"
|
||||
Command="{Binding PreviousPeriodCommand}">
|
||||
<Svg Path="../Assets/Icons/chevron-left.svg"
|
||||
Width="14" Height="14"
|
||||
Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
<!-- REPLACE: bind to CurrentPeriodLabel -->
|
||||
<TextBlock Text="Mar 2026"
|
||||
<TextBlock Text="{Binding CurrentPeriodFormatted}"
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}"
|
||||
@@ -67,9 +70,11 @@
|
||||
Margin="4,0" />
|
||||
<!-- REPLACE: Command="{Binding NextPeriodCommand}" -->
|
||||
<Button Background="Transparent"
|
||||
Classes="nav textless"
|
||||
BorderThickness="0"
|
||||
Padding="10,8"
|
||||
Cursor="Hand">
|
||||
Cursor="Hand"
|
||||
Command="{Binding NextPeriodCommand}">
|
||||
<Svg Path="../Assets/Icons/chevron-right.svg"
|
||||
Width="14" Height="14"
|
||||
Css="{DynamicResource SvgMuted}" />
|
||||
@@ -116,365 +121,139 @@
|
||||
VerticalScrollBarVisibility="Auto"
|
||||
HorizontalScrollBarVisibility="Disabled"
|
||||
Margin="0,0,12,0" Padding="0 0 8 0">
|
||||
<StackPanel Spacing="12" Margin="0 0 0 28">
|
||||
|
||||
<!-- ── On Track ───────────────────────── -->
|
||||
<TextBlock Text="ON TRACK"
|
||||
Classes="label"
|
||||
Margin="0,0,0,4" />
|
||||
|
||||
<!-- REPLACE: ItemsSource="{Binding OnTrackBudgets}" with DataTemplate -->
|
||||
|
||||
<!-- Budget Card — Food (healthy) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
|
||||
<!-- Header row -->
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0"
|
||||
Background="{DynamicResource IconBgGreen}"
|
||||
CornerRadius="10"
|
||||
Width="40" Height="40"
|
||||
Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/utensils.svg"
|
||||
Width="18" Height="18"
|
||||
Css="{DynamicResource SvgGreen}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<!-- REPLACE: bind to Budget.CategoryName -->
|
||||
<TextBlock Text="Food & Dining"
|
||||
FontSize="14"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<!-- REPLACE: bind to Budget.TransactionCount -->
|
||||
<TextBlock Text="8 transactions"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<!-- Spent / Limit -->
|
||||
<StackPanel Grid.Column="2"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"
|
||||
Spacing="2"
|
||||
Margin="0,0,12,0">
|
||||
<!-- REPLACE: bind to Budget.SpentFormatted -->
|
||||
<TextBlock Text="$340"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}"
|
||||
HorizontalAlignment="Right" />
|
||||
<!-- REPLACE: bind to Budget.LimitFormatted -->
|
||||
<TextBlock Text="of $500"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}"
|
||||
HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<!-- Edit button -->
|
||||
<!-- REPLACE: Command="{Binding EditBudgetCommand}" CommandParameter="{Binding}" -->
|
||||
<Button Grid.Column="3"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="4"
|
||||
VerticalAlignment="Center"
|
||||
<ItemsControl ItemsSource="{Binding VisibleBudgets}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Spacing="12" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="model:Budget">
|
||||
<Panel>
|
||||
<TextBlock IsVisible="{Binding GroupHeader}"
|
||||
Text="{Binding Category.Name}"
|
||||
Classes="label"
|
||||
Margin="0,0,0,4" />
|
||||
<Border IsVisible="{Binding !GroupHeader}"
|
||||
Classes.budget-card="{Binding IsOnTrack}"
|
||||
Classes.budget-card-warning="{Binding IsWarning}"
|
||||
Classes.budget-card-over="{Binding IsOverBudget}"
|
||||
Background="{DynamicResource BgSurface}"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg"
|
||||
Width="15" Height="15"
|
||||
Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="14">
|
||||
<!-- Header row -->
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0"
|
||||
CornerRadius="10"
|
||||
Width="40" Height="40"
|
||||
Margin="0,0,14,0">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding Category.Icon, Converter={StaticResource SvgPathFromName}}"
|
||||
Width="18" Height="18"
|
||||
Css="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<!-- REPLACE: bind to Budget.CategoryName -->
|
||||
<TextBlock Text="{Binding Category.Name}"
|
||||
FontSize="14"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<!-- REPLACE: bind to Budget.TransactionCount -->
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock Text="{Binding TransactionsCount}"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text=" transactions"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
<!-- Spent / Limit -->
|
||||
<StackPanel Grid.Column="2"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"
|
||||
Spacing="2"
|
||||
Margin="0,0,12,0">
|
||||
<!-- REPLACE: bind to Budget.SpentFormatted -->
|
||||
<TextBlock Text="{Binding SpentFormatted}"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}"
|
||||
HorizontalAlignment="Right" />
|
||||
<!-- REPLACE: bind to Budget.LimitFormatted -->
|
||||
<TextBlock Text="{Binding AmountFormatted}"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}"
|
||||
HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<!-- Edit button -->
|
||||
<!-- REPLACE: Command="{Binding EditBudgetCommand}" CommandParameter="{Binding}" -->
|
||||
<Button Grid.Column="3"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="4"
|
||||
VerticalAlignment="Center"
|
||||
Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg"
|
||||
Width="15" Height="15"
|
||||
Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<!-- Progress bar + remaining -->
|
||||
<StackPanel Spacing="6">
|
||||
<!-- REPLACE: Value="{Binding Budget.PercentageUsed}" -->
|
||||
<ProgressBar Classes.green="{Binding IsOnTrack}"
|
||||
Classes.yellow="{Binding IsWarning}"
|
||||
Classes.red="{Binding IsOverBudget}"
|
||||
Value="{Binding Spent}"
|
||||
Minimum="0"
|
||||
Maximum="{Binding LimitAmount}"
|
||||
Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="6">
|
||||
<Border Classes.badge-green="{Binding IsOnTrack}"
|
||||
Classes.badge-warning="{Binding IsWarning}"
|
||||
Classes.badge-over="{Binding IsOverBudget}"
|
||||
CornerRadius="20"
|
||||
Padding="6,2">
|
||||
<StackPanel Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/triangle-alert.svg" Css="{DynamicResource SvgYellow}"
|
||||
IsVisible="{Binding IsWarning}" Height="13" VerticalAlignment="Center" />
|
||||
<Svg Path="../Assets/Icons/circle-alert.svg" Css="{DynamicResource SvgRed}"
|
||||
IsVisible="{Binding IsOverBudget}" Height="13" VerticalAlignment="Center" />
|
||||
<TextBlock Text="{Binding PercentageFormatted}"
|
||||
FontSize="11" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
<!-- REPLACE: bind to Budget.RemainingFormatted -->
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="{Binding RemainingFormatted}"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
|
||||
<!-- Progress bar + remaining -->
|
||||
<StackPanel Spacing="6">
|
||||
<!-- REPLACE: Value="{Binding Budget.PercentageUsed}" -->
|
||||
<ProgressBar Classes="green"
|
||||
Value="68"
|
||||
Minimum="0"
|
||||
Maximum="100"
|
||||
Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="6">
|
||||
<Border Background="{DynamicResource IconBgGreen}"
|
||||
CornerRadius="20"
|
||||
Padding="6,2">
|
||||
<TextBlock Text="68% used"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource AccentGreen}" />
|
||||
</Border>
|
||||
</StackPanel>
|
||||
<!-- REPLACE: bind to Budget.RemainingFormatted -->
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="$160 left"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- Budget Card — Transport (healthy) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgBlue}" CornerRadius="10" Width="40" Height="40" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/car.svg" Width="18" Height="18" Css="{DynamicResource SvgBlue}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Transport" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="3 transactions" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="2" Margin="0,0,12,0">
|
||||
<TextBlock Text="$110" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource TextPrimary}"
|
||||
HorizontalAlignment="Right" />
|
||||
<TextBlock Text="of $200" FontSize="11" Foreground="{DynamicResource TextMuted}" HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="3" Background="Transparent" BorderThickness="0" Padding="4" VerticalAlignment="Center" Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg" Width="15" Height="15" Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="6">
|
||||
<ProgressBar Classes="green" Value="55" Minimum="0" Maximum="100" Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgGreen}" CornerRadius="20" Padding="6,2"
|
||||
HorizontalAlignment="Left">
|
||||
<TextBlock Text="55% used" FontSize="11" Foreground="{DynamicResource AccentGreen}" />
|
||||
</Border>
|
||||
<TextBlock Grid.Column="1" Text="$90 left" FontSize="11" Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- Budget Card — Health (healthy) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgPink}" CornerRadius="10" Width="40" Height="40" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/heart-pulse.svg" Width="18" Height="18" Css="{DynamicResource SvgPink}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Health" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="2 transactions" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="2" Margin="0,0,12,0">
|
||||
<TextBlock Text="$69" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource TextPrimary}"
|
||||
HorizontalAlignment="Right" />
|
||||
<TextBlock Text="of $150" FontSize="11" Foreground="{DynamicResource TextMuted}" HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="3" Background="Transparent" BorderThickness="0" Padding="4" VerticalAlignment="Center" Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg" Width="15" Height="15" Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="6">
|
||||
<ProgressBar Classes="green" Value="46" Minimum="0" Maximum="100" Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgGreen}" CornerRadius="20" Padding="6,2"
|
||||
HorizontalAlignment="Left">
|
||||
<TextBlock Text="46% used" FontSize="11" Foreground="{DynamicResource AccentGreen}" />
|
||||
</Border>
|
||||
<TextBlock Grid.Column="1" Text="$81 left" FontSize="11" Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- ── Approaching Limit ───────────────── -->
|
||||
<TextBlock Text="APPROACHING LIMIT"
|
||||
Classes="label"
|
||||
Margin="0,12,0,4" />
|
||||
|
||||
<!-- REPLACE: ItemsSource="{Binding WarningBudgets}" with DataTemplate -->
|
||||
|
||||
<!-- Budget Card — Leisure (warning ~85%) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource AccentYellow}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgPurple}" CornerRadius="10" Width="40" Height="40" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/gamepad-2.svg" Width="18" Height="18" Css="{DynamicResource SvgPurple}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Entertainment" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="5 transactions" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="2" Margin="0,0,12,0">
|
||||
<TextBlock Text="$170" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource AccentYellow}"
|
||||
HorizontalAlignment="Right" />
|
||||
<TextBlock Text="of $200" FontSize="11" Foreground="{DynamicResource TextMuted}" HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="3" Background="Transparent" BorderThickness="0" Padding="4" VerticalAlignment="Center" Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg" Width="15" Height="15" Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="6">
|
||||
<ProgressBar Classes="yellow" Value="85" Minimum="0" Maximum="100" Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource BadgeBgYellow}" CornerRadius="20" Padding="6,2"
|
||||
HorizontalAlignment="Left">
|
||||
<StackPanel Orientation="Horizontal" Spacing="5">
|
||||
<Svg Path="../Assets/Icons/triangle-alert.svg" Width="11" Height="11"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #F5C842; }" />
|
||||
<TextBlock Text="85% used" FontSize="11" Foreground="{DynamicResource AccentYellow}" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<TextBlock Grid.Column="1" Text="$30 left" FontSize="11" Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- Budget Card — Housing (warning ~90%) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource AccentYellow}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgOrange}" CornerRadius="10" Width="40" Height="40" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/house.svg" Width="18" Height="18" Css="{DynamicResource SvgOrange}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Housing" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="4 transactions" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="2" Margin="0,0,12,0">
|
||||
<TextBlock Text="$540" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource AccentYellow}"
|
||||
HorizontalAlignment="Right" />
|
||||
<TextBlock Text="of $600" FontSize="11" Foreground="{DynamicResource TextMuted}" HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="3" Background="Transparent" BorderThickness="0" Padding="4" VerticalAlignment="Center" Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg" Width="15" Height="15" Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="6">
|
||||
<ProgressBar Classes="yellow" Value="90" Minimum="0" Maximum="100" Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource BadgeBgYellow}" CornerRadius="20" Padding="6,2"
|
||||
HorizontalAlignment="Left">
|
||||
<StackPanel Orientation="Horizontal" Spacing="5">
|
||||
<Svg Path="../Assets/Icons/triangle-alert.svg" Width="11" Height="11"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #F5C842; }" />
|
||||
<TextBlock Text="90% used" FontSize="11" Foreground="{DynamicResource AccentYellow}" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<TextBlock Grid.Column="1" Text="$60 left" FontSize="11" Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- ── Over Budget ────────────────────── -->
|
||||
<TextBlock Text="OVER BUDGET"
|
||||
Classes="label"
|
||||
Margin="0,12,0,4" />
|
||||
|
||||
<!-- REPLACE: ItemsSource="{Binding OverBudgets}" with DataTemplate -->
|
||||
|
||||
<!-- Budget Card — Other (over budget) -->
|
||||
<Border Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource AccentRed}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="16"
|
||||
Padding="20"
|
||||
Cursor="Hand">
|
||||
<StackPanel Spacing="14">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgRed}" CornerRadius="10" Width="40" Height="40" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/shopping-bag.svg" Width="18" Height="18" Css="{DynamicResource SvgRed}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Shopping" FontSize="14" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="7 transactions" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="2" Margin="0,0,12,0">
|
||||
<TextBlock Text="$380" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource AccentRed}" HorizontalAlignment="Right" />
|
||||
<TextBlock Text="of $300" FontSize="11" Foreground="{DynamicResource TextMuted}" HorizontalAlignment="Right" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="3" Background="Transparent" BorderThickness="0" Padding="4" VerticalAlignment="Center" Cursor="Hand">
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="BottomEdgeAlignedRight"
|
||||
FlyoutPresenterTheme="{StaticResource TransparentFlyoutPresenter}">
|
||||
<views:BudgetCardMenuView />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<Svg Path="../Assets/Icons/ellipsis.svg" Width="15" Height="15" Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<StackPanel Spacing="6">
|
||||
<!-- Clamped to 100 visually, real % shown in badge -->
|
||||
<ProgressBar Classes="red" Value="100" Minimum="0" Maximum="100" Height="6" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource BadgeBgRed}" CornerRadius="20" Padding="6,2"
|
||||
HorizontalAlignment="Left">
|
||||
<StackPanel Orientation="Horizontal" Spacing="5">
|
||||
<Svg Path="../Assets/Icons/circle-alert.svg" Width="11" Height="11"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #FF5E5E; }" />
|
||||
<TextBlock Text="$80 over budget" FontSize="11" Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<TextBlock Grid.Column="1" Text="127%" FontSize="11" Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
</StackPanel>
|
||||
</Panel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</ScrollViewer>
|
||||
|
||||
<!-- ─────────────────────────────────────
|
||||
@@ -503,22 +282,25 @@
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Total Budgeted" FontSize="12" Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to TotalBudgetedFormatted -->
|
||||
<TextBlock Grid.Column="1" Text="$1,950" FontSize="13" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding TotalBudgeted, StringFormat='$0'}" FontSize="13" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
</Grid>
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Total Spent" FontSize="12" Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to TotalSpentFormatted -->
|
||||
<TextBlock Grid.Column="1" Text="$1,609" FontSize="13" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding TotalSpent, StringFormat='$0'}" FontSize="13" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
</Grid>
|
||||
|
||||
<!-- Overall progress bar -->
|
||||
<StackPanel Spacing="5" Margin="0,4,0,0">
|
||||
<!-- REPLACE: Value="{Binding OverallPercentageUsed}" -->
|
||||
<ProgressBar Classes="green" Value="82" Minimum="0" Maximum="100" Height="8" />
|
||||
<ProgressBar Classes="green" Value="{Binding TotalSpent}" Minimum="0" Maximum="{Binding TotalBudgeted}" Height="8" />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="82% of total budget" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Grid.Column="0" Text="{Binding SpentPercentageFormatted}" FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to TotalRemainingFormatted -->
|
||||
<TextBlock Grid.Column="1" Text="$341 left" FontSize="11" Foreground="{DynamicResource AccentGreen}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding TotalLeftFormatted}" FontSize="11" Foreground="{DynamicResource AccentGreen}" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
@@ -540,7 +322,7 @@
|
||||
<TextBlock Grid.Column="1" Text="On track" FontSize="13" Foreground="{DynamicResource TextSecondary}"
|
||||
VerticalAlignment="Center" />
|
||||
<!-- REPLACE: bind to OnTrackCount -->
|
||||
<TextBlock Grid.Column="2" Text="3 budgets" FontSize="12" Foreground="{DynamicResource AccentGreen}"
|
||||
<TextBlock Grid.Column="2" Text="{Binding OnTrackCountFormatted}" FontSize="12" Foreground="{DynamicResource AccentGreen}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
|
||||
@@ -557,7 +339,8 @@
|
||||
<TextBlock Grid.Column="1" Text="Approaching limit" FontSize="13" Foreground="{DynamicResource TextSecondary}"
|
||||
VerticalAlignment="Center" />
|
||||
<!-- REPLACE: bind to WarningCount -->
|
||||
<TextBlock Grid.Column="2" Text="2 budgets" FontSize="12" Foreground="{DynamicResource AccentYellow}"
|
||||
<TextBlock Grid.Column="2" Text="{Binding ApproachingCountFormatted}" FontSize="12"
|
||||
Foreground="{DynamicResource AccentYellow}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
|
||||
@@ -574,7 +357,7 @@
|
||||
<TextBlock Grid.Column="1" Text="Over budget" FontSize="13" Foreground="{DynamicResource TextSecondary}"
|
||||
VerticalAlignment="Center" />
|
||||
<!-- REPLACE: bind to OverBudgetCount -->
|
||||
<TextBlock Grid.Column="2" Text="1 budget" FontSize="12" Foreground="{DynamicResource AccentRed}"
|
||||
<TextBlock Grid.Column="2" Text="{Binding OverBudgetCountFormatted}" FontSize="12" Foreground="{DynamicResource AccentRed}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
|
||||
@@ -602,17 +385,23 @@
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<TextBlock Text="Period Progress" FontSize="13" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<!-- REPLACE: bind to PeriodProgressLabel e.g. "22 of 31 days" -->
|
||||
<TextBlock Text="22 of 31 days elapsed" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock Text="{Binding PeriodDaysPassed}" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text=" of " FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text="{Binding PeriodLength}" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text=" days elapsed" FontSize="11" Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<!-- REPLACE: Value="{Binding PeriodDayPercentage}" -->
|
||||
<ProgressBar Classes="blue" Value="71" Minimum="0" Maximum="100" Height="6" />
|
||||
<ProgressBar Classes="blue" Value="{Binding PeriodDaysPassed}" Minimum="0" Maximum="{Binding PeriodLength}" Height="6" />
|
||||
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Days remaining" FontSize="12" Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to DaysRemainingLabel -->
|
||||
<TextBlock Grid.Column="1" Text="9 days" FontSize="12" FontWeight="SemiBold" Foreground="{DynamicResource AccentBlue}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding PeriodDaysLeftFormatted}" FontSize="12" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentBlue}" />
|
||||
</Grid>
|
||||
|
||||
<Separator />
|
||||
@@ -625,7 +414,7 @@
|
||||
</StackPanel>
|
||||
<!-- REPLACE: bind to DailyRemainingFormatted -->
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="$37.90"
|
||||
Text="{Binding DailyBudgetLeftFormatted}"
|
||||
FontSize="16"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}"
|
||||
@@ -649,30 +438,22 @@
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
|
||||
<Border Height="150" ClipToBounds="True">
|
||||
<lvc:PieChart SeriesSource="{Binding SpendingBreakdown}" Height="300" LegendPosition="Hidden" InitialRotation="-180"
|
||||
<lvc:PieChart Series="{Binding SpendingBreakdownChartSeries}" Height="300" LegendPosition="Hidden" InitialRotation="-180"
|
||||
MaxAngle="180" FlowDirection="LeftToRight" VerticalAlignment="Top" Background="{DynamicResource BgSurface}">
|
||||
<lvc:PieChart.SeriesTemplate>
|
||||
<DataTemplate x:DataType="vm:PieData">
|
||||
<lvc:XamlPieSeries SeriesName="{Binding Name}"
|
||||
Values="{Binding Values}"
|
||||
Fill="{Binding Fill}"
|
||||
InnerRadius="{Binding InnerRadius}"
|
||||
ToolTipLabelFormatter="{Binding Formatter}" />
|
||||
</DataTemplate>
|
||||
</lvc:PieChart.SeriesTemplate>
|
||||
</lvc:PieChart>
|
||||
</Border>
|
||||
<ItemsControl ItemsSource="{Binding SpendingBreakdown}" Margin="0 16 0 0">
|
||||
<ItemsControl ItemsSource="{Binding SpendingBreakdownLegends}" Margin="0 16 0 0">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<WrapPanel ItemSpacing="16" />
|
||||
<WrapPanel ItemSpacing="0" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:PieData">
|
||||
<StackPanel Orientation="Horizontal" Spacing="4">
|
||||
<Border Height="10" Width="10" CornerRadius="5" Background="{Binding Bg}" />
|
||||
<TextBlock Text="{Binding Name}" />
|
||||
<DataTemplate DataType="model:Budget">
|
||||
<StackPanel Orientation="Horizontal" Spacing="4" IsVisible="{Binding !GroupHeader }" Margin="0 0 8 0">
|
||||
<Border Height="10" Width="10" CornerRadius="5"
|
||||
Background="{Binding Category.Color,Converter={StaticResource HexToColorConverter},ConverterParameter='brush'}" />
|
||||
<TextBlock Text="{Binding Category.Name}" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
@@ -788,30 +569,32 @@
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Monthly goal" FontSize="12" Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to SavingsGoalFormatted -->
|
||||
<TextBlock Grid.Column="1" Text="$500" FontSize="12" FontWeight="SemiBold" Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding Profile.SavingsGoal, StringFormat='$0'}" FontSize="12" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
</Grid>
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Projected savings" FontSize="12" Foreground="{DynamicResource TextMuted}" />
|
||||
<!-- REPLACE: bind to ProjectedSavingsFormatted -->
|
||||
<TextBlock Grid.Column="1" Text="$341" FontSize="12" FontWeight="SemiBold" Foreground="{DynamicResource AccentYellow}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding TotalLeftFormatted}" FontSize="12" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentYellow}" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
|
||||
<!-- REPLACE: Value="{Binding SavingsGoalPercentage}" -->
|
||||
<ProgressBar Classes="yellow" Value="68" Minimum="0" Maximum="100" Height="6" />
|
||||
<ProgressBar Classes="yellow" Value="{Binding TotalLeft}" Minimum="0" Maximum="{Binding Profile.SavingsGoal}" Height="6" />
|
||||
|
||||
<Border Background="{DynamicResource BadgeBgYellow}"
|
||||
CornerRadius="10"
|
||||
Padding="12,8">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/info.svg" Width="14" Height="14"
|
||||
<Grid ColumnDefinitions="Auto,*" ColumnSpacing="8">
|
||||
<Svg Grid.Column="0" Path="../Assets/Icons/info.svg" Width="14" Height="14"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #F5C842; }" />
|
||||
<TextBlock Text="Reduce spending by $159 to hit your goal"
|
||||
<TextBlock Grid.Column="1" Text="{Binding SavingsHint}"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource AccentYellow}"
|
||||
TextWrapping="Wrap"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:vm="clr-namespace:Clario.ViewModels"
|
||||
xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
|
||||
xmlns:model="clr-namespace:Clario.Models"
|
||||
mc:Ignorable="d" d:DesignWidth="1180" d:DesignHeight="800"
|
||||
MinWidth="780" MinHeight="600"
|
||||
x:DataType="vm:DashboardViewModel"
|
||||
@@ -12,11 +13,9 @@
|
||||
<vm:DashboardViewModel />
|
||||
</Design.DataContext>
|
||||
<Grid ColumnDefinitions="*">
|
||||
|
||||
<!-- ───────────────────────────────────── MAIN CONTENT ───────────────────────────────────── -->
|
||||
<ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
|
||||
<ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Name="mainScrollviewer">
|
||||
<StackPanel Spacing="24" Margin="32,28,32,32">
|
||||
<!-- ── Top Bar ─────────────────────── -->
|
||||
<!-- Top Bar -->
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Classes="muted" Text="Friday, March 6, 2026" />
|
||||
@@ -28,18 +27,16 @@
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1" Padding="14,8">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/calendar-days.svg" Height="13" Width="13" />
|
||||
|
||||
<TextBlock Text="Jan – Mar 2026" FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextSecondary}" VerticalAlignment="Center" />
|
||||
<TextBlock Text="Jan – Mar 2026" FontSize="{StaticResource FontSizeBody}" Foreground="{DynamicResource TextSecondary}"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<Button Background="{DynamicResource AccentBlue}" Foreground="{DynamicResource BgBase}"
|
||||
FontWeight="SemiBold" FontSize="{StaticResource FontSizeBody}" CornerRadius="{StaticResource RadiusControl}" Padding="16,8"
|
||||
BorderThickness="0" Cursor="Hand" Content="+ Add Transaction" />
|
||||
|
||||
<Button Background="{DynamicResource AccentBlue}" Foreground="{DynamicResource BgBase}" FontWeight="SemiBold"
|
||||
FontSize="{StaticResource FontSizeBody}" CornerRadius="{StaticResource RadiusControl}" Padding="16,8" BorderThickness="0"
|
||||
Cursor="Hand" Content="+ Add Transaction" Command="{Binding CreateTransactionCommand}" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
<!-- ── KPI Cards Row ───────────────── -->
|
||||
<!-- KPI Cards Row -->
|
||||
<Grid ColumnDefinitions="*,*,*" HorizontalAlignment="Stretch" MaxHeight="160">
|
||||
<Grid.Styles>
|
||||
<Style Selector="Grid > Border">
|
||||
@@ -51,17 +48,15 @@
|
||||
<StackPanel Spacing="12">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Border Background="{DynamicResource IconBgGreen}" CornerRadius="{StaticResource RadiusIcon}" Padding="7">
|
||||
<Svg Path="../Assets/Icons/trending-up.svg" Height="14" Width="14"
|
||||
Css="{DynamicResource SvgGreen}" />
|
||||
<Svg Path="../Assets/Icons/trending-up.svg" Height="14" Width="14" Css="{DynamicResource SvgGreen}" />
|
||||
</Border>
|
||||
<TextBlock Classes="label" Text="MONTHLY INCOME" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="$6,850.00" FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold"
|
||||
<TextBlock Text="{Binding MonthlyIncome, StringFormat='$0.00'}" FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Border Classes="badge-green">
|
||||
<TextBlock Text="↑ 3.2%"
|
||||
FontSize="{StaticResource FontSizeLabel}" FontWeight="SemiBold"
|
||||
<TextBlock Text="{Binding MonthlyIncomeChangeFormatted}" FontSize="{StaticResource FontSizeLabel}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentGreen}" />
|
||||
</Border>
|
||||
<TextBlock Classes="muted" Text="vs last month" VerticalAlignment="Center" />
|
||||
@@ -73,16 +68,15 @@
|
||||
<StackPanel Spacing="12">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Border Background="{DynamicResource IconBgOrange}" CornerRadius="{StaticResource RadiusIcon}" Padding="7">
|
||||
<Svg Path="../Assets/Icons/trending-down.svg" Height="14" Width="14"
|
||||
Css="{DynamicResource SvgRed}" />
|
||||
<Svg Path="../Assets/Icons/trending-down.svg" Height="14" Width="14" Css="{DynamicResource SvgRed}" />
|
||||
</Border>
|
||||
<TextBlock Classes="label" Text="MONTHLY EXPENSES" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="$3,240.00" FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold"
|
||||
<TextBlock Text="{Binding MonthlyExpenses, StringFormat='$0.00'}" FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Border Classes="badge-red">
|
||||
<TextBlock Text="↑ 5.1%" FontSize="{StaticResource FontSizeLabel}" FontWeight="SemiBold"
|
||||
<TextBlock Text="{Binding MonthlyExpenseChangeFormatted}" FontSize="{StaticResource FontSizeLabel}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentRed}" />
|
||||
</Border>
|
||||
<TextBlock Classes="muted" Text="vs last month" VerticalAlignment="Center" />
|
||||
@@ -94,21 +88,25 @@
|
||||
<StackPanel Spacing="12">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Border Background="{DynamicResource IconBgPurple}" CornerRadius="{StaticResource RadiusIcon}" Padding="7">
|
||||
<Svg Path="../Assets/Icons/landmark.svg" Height="14" Width="14"
|
||||
Css="{DynamicResource SvgPurple}" />
|
||||
<Svg Path="../Assets/Icons/landmark.svg" Height="14" Width="14" Css="{DynamicResource SvgPurple}" />
|
||||
</Border>
|
||||
<TextBlock Classes="label" Text="SAVINGS RATE" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="52.7%" FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<ProgressBar Classes="green" Minimum="0" Maximum="100" Value="52.7" />
|
||||
|
||||
<TextBlock FontSize="{StaticResource FontSizePageTitle}" FontWeight="Bold" Foreground="{DynamicResource TextPrimary}">
|
||||
<TextBlock.Text>
|
||||
<MultiBinding Converter="{StaticResource PercentageConverter}">
|
||||
<Binding Path="MonthlyExpenses" /> <Binding Path="MonthlyIncome" />
|
||||
</MultiBinding>
|
||||
</TextBlock.Text>
|
||||
</TextBlock>
|
||||
<ProgressBar Classes="green" Minimum="0" Maximum="{Binding MonthlyIncome}" Value="{Binding MonthlyExpenses}" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Grid>
|
||||
<!-- ── Mid Row: Spending Chart + Budget ─ -->
|
||||
<!-- Mid Row: Spending Chart + Budget -->
|
||||
|
||||
<Grid ColumnDefinitions="*,340" MaxHeight="470">
|
||||
<!-- Spending Breakdown (placeholder chart area) -->
|
||||
<!-- Spending Breakdown -->
|
||||
<Border Grid.Column="0" Classes="card" Margin="0,0,16,0">
|
||||
<StackPanel Spacing="20">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
@@ -117,22 +115,14 @@
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Classes="muted" Text="March 2026" />
|
||||
</StackPanel>
|
||||
<ComboBox Grid.Column="1" SelectedIndex="0" Background="{DynamicResource BgHover}"
|
||||
Foreground="{DynamicResource TextSecondary}"
|
||||
BorderBrush="{DynamicResource BorderAccent}" CornerRadius="{StaticResource RadiusIcon}" Padding="10,6">
|
||||
<ComboBoxItem Content="This Month" /> <ComboBoxItem Content="Last Month" />
|
||||
<ComboBoxItem Content="This Quarter" />
|
||||
<ComboBox Grid.Column="1" SelectedIndex="0" ItemsSource="{Binding ChartTimePeriods}"
|
||||
SelectedItem="{Binding SelectedChartTimePeriod}" Background="{DynamicResource BgHover}"
|
||||
Foreground="{DynamicResource TextSecondary}" BorderBrush="{DynamicResource BorderAccent}"
|
||||
CornerRadius="{StaticResource RadiusIcon}" Padding="10,6">
|
||||
</ComboBox>
|
||||
</Grid>
|
||||
|
||||
<lvc:CartesianChart SeriesSource="{Binding ChartData}" Height="250" Background="{DynamicResource BgSurface}"
|
||||
LegendPosition="Hidden" TooltipPosition="Hidden">
|
||||
<lvc:CartesianChart.SeriesTemplate>
|
||||
<DataTemplate x:DataType="vm:ChartData">
|
||||
<lvc:XamlColumnSeries SeriesName="{Binding Name}" Fill="{Binding Fill}" Values="{Binding Values}" Padding="4"
|
||||
MaxBarWidth="9999999" YToolTipLabelFormatter="{Binding ToolTipFormatter}" />
|
||||
</DataTemplate>
|
||||
</lvc:CartesianChart.SeriesTemplate>
|
||||
<lvc:CartesianChart Series="{Binding SpendingByCategoryChartSeries}" Height="250" Background="{DynamicResource BgSurface}"
|
||||
LegendPosition="Hidden" TooltipPosition="Hidden" ZoomMode="None" Name="chart">
|
||||
<lvc:CartesianChart.XAxes>
|
||||
<lvc:XamlAxis IsVisible="False" />
|
||||
</lvc:CartesianChart.XAxes>
|
||||
@@ -140,179 +130,93 @@
|
||||
<lvc:XamlLogarithmicAxis LogBase="10" IsVisible="False" MinLimit="1" />
|
||||
</lvc:CartesianChart.YAxes>
|
||||
</lvc:CartesianChart>
|
||||
<ItemsControl ItemsSource="{Binding ChartData}" Margin="0 -10 ">
|
||||
<ItemsControl ItemsSource="{Binding SpendingByCategoryChartData}" Margin="0 -10 ">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Rows="1" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="vm:ChartData">
|
||||
<DataTemplate x:DataType="model:ColumnChartData">
|
||||
<TextBlock Text="{Binding Name}" HorizontalAlignment="Center" Foreground="{DynamicResource TextDisabled}" />
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
<Border HorizontalAlignment="Stretch" Height="1" Background="{DynamicResource BorderSubtle}" Margin="5 0" />
|
||||
<ItemsControl ItemsSource="{Binding ChartData}" Margin="0 -10 0 0 ">
|
||||
<ItemsControl ItemsSource="{Binding SpendingByCategoryChartData}" Margin="0 -10 0 0 ">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Rows="1" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="vm:ChartData">
|
||||
<DataTemplate x:DataType="model:ColumnChartData">
|
||||
<TextBlock Text="{Binding Values, Converter={StaticResource FirstValueConverter},StringFormat='$0,00'}"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="{Binding Fill, Converter={StaticResource SkPaintToBrushConverter}}" FontWeight="SemiBold" />
|
||||
HorizontalAlignment="Center" Foreground="{Binding Fill, Converter={StaticResource SkPaintToBrushConverter}}"
|
||||
FontWeight="SemiBold" />
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
<!-- <Grid RowDefinitions="*,Auto" Height="200"> -->
|
||||
<!-- <Grid Grid.Row="0" ColumnDefinitions="*,*,*,*,*,*" VerticalAlignment="Stretch"> -->
|
||||
<!-- <Grid Grid.Column="0" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="140" Background="{DynamicResource AccentBlue}" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Housing" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- <Grid Grid.Column="1" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="80" Background="{DynamicResource AccentGreen}" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Food" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- <Grid Grid.Column="2" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="55" Background="{DynamicResource AccentYellow}" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Transport" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- <Grid Grid.Column="3" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="45" Background="#FF7E5E" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Health" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- <Grid Grid.Column="4" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="35" Background="{DynamicResource AccentPurple}" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Leisure" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- <Grid Grid.Column="5" RowDefinitions="*,Auto" Margin="6,0"> -->
|
||||
<!-- <Border Grid.Row="0" VerticalAlignment="Bottom" CornerRadius="4,4,0,0" -->
|
||||
<!-- Height="25" Background="{DynamicResource AccentPink}" /> -->
|
||||
<!-- <TextBlock Grid.Row="1" Text="Other" Classes="muted" -->
|
||||
<!-- HorizontalAlignment="Center" Margin="0,6,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- ~1~ baseline @1@ -->
|
||||
<!-- <Border Grid.Row="1" Height="1" Background="{DynamicResource BorderSubtle}" -->
|
||||
<!-- Margin="0,8,0,0" /> -->
|
||||
<!-- </Grid> -->
|
||||
<!-- ~1~ Legend amounts @1@ -->
|
||||
<!-- <Grid ColumnDefinitions="*,*,*,*,*,*"> -->
|
||||
<!-- <TextBlock Grid.Column="0" Text="$1,200" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="{DynamicResource AccentBlue}" HorizontalAlignment="Center" /> -->
|
||||
<!-- <TextBlock Grid.Column="1" Text="$680" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="{DynamicResource AccentGreen}" HorizontalAlignment="Center" /> -->
|
||||
<!-- <TextBlock Grid.Column="2" Text="$420" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="{DynamicResource AccentYellow}" HorizontalAlignment="Center" /> -->
|
||||
<!-- <TextBlock Grid.Column="3" Text="$340" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="#FF7E5E" HorizontalAlignment="Center" /> -->
|
||||
<!-- <TextBlock Grid.Column="4" Text="$290" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="{DynamicResource AccentPurple}" HorizontalAlignment="Center" /> -->
|
||||
<!-- <TextBlock Grid.Column="5" Text="$210" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold" -->
|
||||
<!-- Foreground="{DynamicResource AccentPink}" HorizontalAlignment="Center" /> -->
|
||||
<!-- </Grid> -->
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<!-- Budget Tracker -->
|
||||
<Border Grid.Column="1" Classes="card">
|
||||
<ScrollViewer>
|
||||
<ScrollViewer Padding="12 0" Margin="-12 0">
|
||||
<StackPanel Spacing="20">
|
||||
<StackPanel>
|
||||
<TextBlock Text="Budget Tracker" FontSize="{StaticResource FontSizeSectionHeading}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Classes="muted" Text="Monthly limits" />
|
||||
</StackPanel>
|
||||
<!-- Budget Item 1 -->
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/house.svg" Height="13" Width="13"
|
||||
VerticalAlignment="Center" />
|
||||
<TextBlock Text="Housing" FontSize="{StaticResource FontSizeBody}" VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="$1,200 / $1,500" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</Grid>
|
||||
<ProgressBar Classes="green" Minimum="0" Maximum="100" Value="80" />
|
||||
</StackPanel>
|
||||
<Separator />
|
||||
<!-- Budget Item 2 -->
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/hamburger.svg" Height="13" Width="13" />
|
||||
<TextBlock Text="Food" FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="$680 / $700" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</Grid>
|
||||
<ProgressBar Classes="yellow" Minimum="0" Maximum="100" Value="97" />
|
||||
</StackPanel>
|
||||
<Separator />
|
||||
<!-- Budget Item 3 -->
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/car.svg" Height="13" Width="13" />
|
||||
<TextBlock Text="Transport" FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="$420 / $400" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource AccentRed}" />
|
||||
</Grid>
|
||||
<ProgressBar Classes="red" Minimum="0" Maximum="100" Value="105" />
|
||||
</StackPanel>
|
||||
<Separator />
|
||||
<!-- Budget Item 4 -->
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/heart-pulse.svg" Height="13" Width="13" />
|
||||
<TextBlock Text="Health" FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="$340 / $500" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</Grid>
|
||||
<ProgressBar Classes="green" Minimum="0" Maximum="100" Value="68" />
|
||||
</StackPanel>
|
||||
<Separator />
|
||||
<!-- Budget Item 5 -->
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="../Assets/Icons/gamepad-2.svg" Height="13" Width="13" />
|
||||
<TextBlock Text="Entertainment" FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="$290 / $300" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</Grid>
|
||||
<ProgressBar Classes="yellow" Minimum="0" Maximum="100" Value="96" />
|
||||
</StackPanel>
|
||||
|
||||
<ItemsControl ItemsSource="{Binding BudgetsTrackerData}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Spacing="20" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="model:Budget">
|
||||
<StackPanel Spacing="8">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4">
|
||||
<Svg Path="{Binding Category.Icon, Converter={StaticResource SvgPathFromName}}" Height="13" Width="13"
|
||||
VerticalAlignment="Center" />
|
||||
<TextBlock Text="{Binding Category.Name}" FontSize="{StaticResource FontSizeBody}"
|
||||
VerticalAlignment="Center" Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
<Panel Grid.Column="1">
|
||||
<StackPanel Orientation="Horizontal" IsVisible="{Binding !IsOverBudget}">
|
||||
<TextBlock Text="{Binding Spent, StringFormat='$0'}" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text=" / " FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Text="{Binding LimitAmount, StringFormat='$0'}" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal" IsVisible="{Binding IsOverBudget}">
|
||||
<TextBlock Text="{Binding Spent, StringFormat='$0'}" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource AccentRed}" />
|
||||
<TextBlock Text=" / " FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource AccentRed}" />
|
||||
<TextBlock Text="{Binding LimitAmount, StringFormat='$0'}" FontSize="{StaticResource FontSizeMeta}"
|
||||
Foreground="{DynamicResource AccentRed}" />
|
||||
</StackPanel>
|
||||
</Panel>
|
||||
</Grid>
|
||||
<ProgressBar Classes.green="{Binding IsOnTrack}" Classes.yellow="{Binding IsWarning}"
|
||||
Classes.red="{Binding IsOverBudget}" Minimum="0" Value="{Binding Spent}"
|
||||
Maximum="{Binding LimitAmount}" />
|
||||
<Separator Margin="-8 4" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
|
||||
</Border>
|
||||
</Grid>
|
||||
<!-- ── Bottom Row: Recent Transactions + Accounts ─ -->
|
||||
<!-- Bottom Row: Recent Transactions + Accounts -->
|
||||
|
||||
<Grid ColumnDefinitions="*,300" MaxHeight="500">
|
||||
<!-- Recent Transactions -->
|
||||
<Border Grid.Column="0" Classes="card" Margin="0,0,16,0">
|
||||
@@ -321,181 +225,110 @@
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Text="Recent Transactions" FontSize="{StaticResource FontSizeSectionHeading}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Classes="muted" Text="Last 7 days" />
|
||||
<TextBlock Classes="muted" Text="Last 5 transactions" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="1" Background="Transparent"
|
||||
Foreground="{DynamicResource AccentBlue}" BorderThickness="0" FontSize="{StaticResource FontSizeBody}"
|
||||
Cursor="Hand" Content="View all →" VerticalAlignment="Center" Command="{Binding ViewAllTransactionsCommand}" />
|
||||
</Grid>
|
||||
|
||||
<!-- Transaction Row Template -->
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,4,0,0">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgGreen}" CornerRadius="{StaticResource RadiusControl}"
|
||||
Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/shopping-cart.svg" Height="18" Width="18"
|
||||
Css="{DynamicResource SvgGreen}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Grocery Shopping" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Food · Mar 5" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="- $127.40" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgPurple}" CornerRadius="{StaticResource RadiusControl}"
|
||||
Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/banknote-arrow-up.svg" Height="18" Width="18"
|
||||
Css="{DynamicResource SvgPurple}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Salary Deposit" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Income · Mar 4" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="+ $3,425.00" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentGreen}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgOrange}" CornerRadius="{StaticResource RadiusControl}"
|
||||
Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/zap.svg" Height="18" Width="18"
|
||||
Css="{DynamicResource SvgOrange}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Electricity Bill" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Utilities · Mar 3" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="- $88.00" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgPink}" CornerRadius="{StaticResource RadiusControl}"
|
||||
Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/pill.svg" Height="18" Width="18"
|
||||
Css="{DynamicResource SvgPink}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Pharmacy" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Health · Mar 2" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="- $34.50" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgGreen}" CornerRadius="{StaticResource RadiusControl}"
|
||||
Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Svg Path="../Assets/Icons/hand-coins.svg" Height="18" Width="18"
|
||||
Css="{DynamicResource SvgGreen}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Freelance Payment" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Income · Mar 1" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="+ $850.00" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource AccentGreen}" VerticalAlignment="Center" />
|
||||
<Button Grid.Column="1" Background="Transparent" Foreground="{DynamicResource AccentBlue}" BorderThickness="0"
|
||||
FontSize="{StaticResource FontSizeBody}" Cursor="Hand" Content="View all →" VerticalAlignment="Center"
|
||||
Command="{Binding ViewAllTransactionsCommand}" />
|
||||
</Grid>
|
||||
<ItemsControl ItemsSource="{Binding RecentTransactions}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Spacing="18" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="model:Transaction">
|
||||
<StackPanel Spacing="4">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,4,0,0">
|
||||
<Border Grid.Column="0" CornerRadius="{StaticResource RadiusControl}" Width="42" Height="42" Margin="0,0,14,0">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding Category.Color, Converter={StaticResource HexToColorConverter},ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding Category.Icon,Converter={StaticResource SvgPathFromName}}" Height="18" Width="18"
|
||||
Css="{Binding Category.Color, Converter={StaticResource HexToColorConverter},ConverterParameter=css}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding Description}" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock Text="{Binding Category.Name}" Classes="muted" /> <TextBlock Text=" · " Classes="muted" />
|
||||
<TextBlock
|
||||
Text="{Binding Date,Converter={StaticResource DateFormatConverter},ConverterParameter='MMM d'}"
|
||||
Classes="muted" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" FontSize="{StaticResource FontSizeAmount}" FontWeight="SemiBold"
|
||||
Foreground="{Binding Type, Converter={StaticResource AmountColorConverter}}"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock.Text>
|
||||
<MultiBinding Converter="{StaticResource AmountSignConverter}">
|
||||
<Binding Path="Amount" /> <Binding Path="Type" />
|
||||
</MultiBinding>
|
||||
</TextBlock.Text>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
<Separator />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<!-- Accounts Summary -->
|
||||
<Border Grid.Column="1" Classes="card">
|
||||
<StackPanel Spacing="18">
|
||||
<StackPanel>
|
||||
<Grid RowDefinitions="Auto,*,Auto" RowSpacing="18">
|
||||
<StackPanel Grid.Row="0">
|
||||
<TextBlock Text="Accounts" FontSize="{StaticResource FontSizeSectionHeading}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
|
||||
<TextBlock Classes="muted" Text="4 linked accounts" />
|
||||
<TextBlock Classes="muted" Text="{Binding AccountsSubtitle}" />
|
||||
</StackPanel>
|
||||
<!-- Account 1 -->
|
||||
<Border Background="{DynamicResource BgBase}" CornerRadius="{StaticResource RadiusInset}" Padding="14,12"
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgBlue}" CornerRadius="{StaticResource RadiusIcon}"
|
||||
Width="36" Height="36" Margin="0,0,12,0">
|
||||
<Svg Path="../Assets/Icons/landmark.svg" Height="16" Width="16"
|
||||
Css="{DynamicResource SvgBlue}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Main Checking" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="•••• 4821" FontSize="{StaticResource FontSizeLabel}" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="$12,450" FontSize="{StaticResource FontSizeBody}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" VerticalAlignment="Center" />
|
||||
<ItemsControl ItemsSource="{Binding AccountsSummaryData}" Grid.Row="1">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Spacing="18" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="model:Account">
|
||||
<Border Background="{DynamicResource BgBase}" CornerRadius="{StaticResource RadiusInset}" Padding="14,12"
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" CornerRadius="{StaticResource RadiusIcon}" Width="36" Height="36" Margin="0,0,12,0">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding Icon, Converter={StaticResource SvgPathFromName}}" Height="16" Width="16"
|
||||
Css="{Binding Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding Name}" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="{Binding Mask, Converter={StaticResource MaskToStringConverter}}"
|
||||
FontSize="{StaticResource FontSizeLabel}" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="{Binding CurrentBalance, StringFormat='$0'}"
|
||||
FontSize="{StaticResource FontSizeBody}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
<StackPanel Spacing="18" Grid.Row="2">
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Total Balance" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding TotalNetworth, StringFormat=$0}"
|
||||
FontSize="{StaticResource FontSizeSectionHeading}" FontWeight="Bold" Foreground="{DynamicResource TextPrimary}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<!-- Account 2 -->
|
||||
<Border Background="{DynamicResource BgBase}" CornerRadius="{StaticResource RadiusInset}" Padding="14,12"
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgGreen}" CornerRadius="{StaticResource RadiusIcon}"
|
||||
Width="36" Height="36" Margin="0,0,12,0">
|
||||
<Svg Path="../Assets/Icons/piggy-bank.svg" Height="16" Width="16"
|
||||
Css="{DynamicResource SvgGreen}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Savings Account" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="•••• 2034" FontSize="{StaticResource FontSizeLabel}" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="$38,700" FontSize="{StaticResource FontSizeBody}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource AccentGreen}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<!-- Account 3 -->
|
||||
<Border Background="{DynamicResource BgBase}" CornerRadius="{StaticResource RadiusInset}" Padding="14,12"
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgOrange}"
|
||||
CornerRadius="{StaticResource RadiusIcon}" Width="36" Height="36" Margin="0,0,12,0">
|
||||
<Svg Path="../Assets/Icons/credit-card.svg" Height="16" Width="16"
|
||||
Css="{DynamicResource SvgOrange}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Credit Card" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="•••• 9170" FontSize="{StaticResource FontSizeLabel}" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="-$1,830" FontSize="{StaticResource FontSizeBody}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource AccentRed}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<!-- Account 4 -->
|
||||
<Border Background="{DynamicResource BgBase}" CornerRadius="{StaticResource RadiusInset}" Padding="14,12"
|
||||
BorderBrush="{DynamicResource BorderSubtle}" BorderThickness="1">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Background="{DynamicResource IconBgPurple}"
|
||||
CornerRadius="{StaticResource RadiusIcon}" Width="36" Height="36" Margin="0,0,12,0">
|
||||
<Svg Path="../Assets/Icons/chart-column-big.svg" Height="16" Width="16"
|
||||
Css="{DynamicResource SvgPurple}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="Investment" FontSize="{StaticResource FontSizeMeta}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<TextBlock Text="Portfolio" FontSize="{StaticResource FontSizeLabel}" Classes="muted" />
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="$35,000" FontSize="{StaticResource FontSizeBody}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource AccentBlue}" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<!-- Total -->
|
||||
<Separator />
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<TextBlock Grid.Column="0" Text="Total Balance" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
|
||||
<TextBlock Grid.Column="1" Text="$84,320" FontSize="{StaticResource FontSizeSectionHeading}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
using Avalonia;
|
||||
using System;
|
||||
using System.Linq;
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Input;
|
||||
using Avalonia.Interactivity;
|
||||
using Avalonia.VisualTree;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
@@ -9,5 +13,17 @@ public partial class DashboardView : UserControl
|
||||
public DashboardView()
|
||||
{
|
||||
InitializeComponent();
|
||||
chart.AddHandler(PointerWheelChangedEvent, OnChartScroll, RoutingStrategies.Tunnel);
|
||||
}
|
||||
|
||||
private void OnChartScroll(object? sender, PointerWheelEventArgs e)
|
||||
{
|
||||
var offset = mainScrollviewer.Offset;
|
||||
mainScrollviewer.Offset = new Vector(
|
||||
offset.X,
|
||||
offset.Y - e.Delta.Y * mainScrollviewer.SmallChange.Height * 3
|
||||
);
|
||||
|
||||
e.Handled = true;
|
||||
}
|
||||
}
|
||||
14
Clario/Views/LoadingView.axaml
Normal file
14
Clario/Views/LoadingView.axaml
Normal file
@@ -0,0 +1,14 @@
|
||||
<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:avaloniaProgressRing="clr-namespace:AvaloniaProgressRing;assembly=AvaloniaProgressRing"
|
||||
Background="{DynamicResource BgBase}"
|
||||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
|
||||
x:Class="Clario.Views.LoadingView">
|
||||
<Panel>
|
||||
<avaloniaProgressRing:ProgressRing Width="100" Height="100" IsActive="True"
|
||||
Foreground="{DynamicResource AccentBlue}" HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center" />
|
||||
</Panel>
|
||||
</UserControl>
|
||||
13
Clario/Views/LoadingView.axaml.cs
Normal file
13
Clario/Views/LoadingView.axaml.cs
Normal file
@@ -0,0 +1,13 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
public partial class LoadingView : UserControl
|
||||
{
|
||||
public LoadingView()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:vm="using:Clario.ViewModels"
|
||||
xmlns:views="clr-namespace:Clario.Views"
|
||||
mc:Ignorable="d" d:DesignWidth="1400" d:DesignHeight="800"
|
||||
MinWidth="1000" MinHeight="600"
|
||||
x:Class="Clario.Views.MainView"
|
||||
x:DataType="vm:MainViewModel">
|
||||
x:DataType="vm:MainViewModel"
|
||||
x:Name="MainControl"
|
||||
Background="{DynamicResource BgBase}">
|
||||
<Design.DataContext>
|
||||
<!-- This only sets the DataContext for the previewer in an IDE,
|
||||
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
|
||||
<vm:MainViewModel />
|
||||
</Design.DataContext>
|
||||
<Grid RowDefinitions="Auto,*">
|
||||
@@ -110,18 +110,19 @@
|
||||
<Border DockPanel.Dock="Bottom" Background="{DynamicResource BgSurface}" CornerRadius="{StaticResource RadiusInset}"
|
||||
Padding="12,10">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="10">
|
||||
<Border Background="{DynamicResource BorderAccent}" CornerRadius="{StaticResource RadiusPill}" Width="34"
|
||||
<Grid Grid.Column="0" ColumnDefinitions="Auto,*" ColumnSpacing="10">
|
||||
<Border Grid.Column="0" Background="{DynamicResource BorderAccent}" CornerRadius="{StaticResource RadiusPill}" Width="34"
|
||||
Height="34">
|
||||
<TextBlock Text="N" FontSize="{StaticResource FontSizeAmount}" FontWeight="Bold"
|
||||
Foreground="{DynamicResource AccentBlue}" HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center" />
|
||||
</Border>
|
||||
<StackPanel VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding Profile.DisplayName}" FontSize="{StaticResource FontSizeBody}" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1" Text="{Binding Profile.DisplayName}" TextTrimming="CharacterEllipsis"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
FontWeight="SemiBold"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
</Grid>
|
||||
<Button Grid.Column="1" Classes="base" Width="24" Height="24" Padding="2" Focusable="False"
|
||||
Command="{Binding SwitchThemeCommand}" IsVisible="True">
|
||||
<Panel>
|
||||
@@ -185,7 +186,13 @@
|
||||
</StackPanel>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
<ContentControl Grid.Column="1" Content="{Binding CurrentView}" />
|
||||
<Grid Grid.Column="1">
|
||||
<ContentControl Content="{Binding CurrentView}" />
|
||||
<views:TransactionFormView
|
||||
DataContext="{Binding TransactionFormViewModel}"
|
||||
IsVisible="{Binding DataContext.IsTransactionFormVisible,ElementName=MainControl}">
|
||||
</views:TransactionFormView>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
|
||||
@@ -10,14 +10,5 @@
|
||||
Icon="/Assets/avalonia-logo.ico"
|
||||
Title="Clario"
|
||||
x:CompileBindings="False">
|
||||
|
||||
<Window.DataTemplates>
|
||||
<DataTemplate DataType="{x:Type vm:MainViewModel}">
|
||||
<views:MainView />
|
||||
</DataTemplate>
|
||||
<DataTemplate DataType="{x:Type vm:AuthViewModel}">
|
||||
<views:AuthView />
|
||||
</DataTemplate>
|
||||
</Window.DataTemplates>
|
||||
<ContentControl Content="{Binding}" />
|
||||
</Window>
|
||||
353
Clario/Views/TransactionFormView.axaml
Normal file
353
Clario/Views/TransactionFormView.axaml
Normal file
@@ -0,0 +1,353 @@
|
||||
<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:cc="clr-namespace:Clario.CustomControls"
|
||||
mc:Ignorable="d"
|
||||
x:Class="Clario.Views.TransactionFormView"
|
||||
x:DataType="vm:TransactionFormViewModel">
|
||||
<Design.DataContext>
|
||||
<vm:TransactionFormViewModel />
|
||||
</Design.DataContext>
|
||||
|
||||
<!-- ── Dim overlay ───────────────────────── -->
|
||||
<Grid>
|
||||
<Border Background="#70000000" />
|
||||
|
||||
<!-- ── Modal card ────────────────────────── -->
|
||||
<Border HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Background="{DynamicResource BgSurface}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="18"
|
||||
Padding="28"
|
||||
Width="460"
|
||||
BoxShadow="0 24 72 0 #60000000">
|
||||
<StackPanel Spacing="0">
|
||||
|
||||
<!-- ── Header ──────────────────────── -->
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,0,0,24">
|
||||
<Border Grid.Column="0"
|
||||
CornerRadius="10"
|
||||
Width="42" Height="42"
|
||||
Margin="0,0,14,0">
|
||||
<Border.Background>
|
||||
<!-- changes with type: red for expense, green for income -->
|
||||
<SolidColorBrush
|
||||
Color="{Binding IsExpense, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#FF2A0D0D|#0D2A1A'}" />
|
||||
</Border.Background>
|
||||
<Svg Path="../Assets/Icons/arrow-left-right.svg"
|
||||
Width="18" Height="18"
|
||||
Css="{Binding IsExpense, Converter={StaticResource BoolToCssConverter}, ConverterParameter='#FF5E5E|#2ECC8A'}" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
|
||||
<!-- switches between "New Transaction" / "Edit Transaction" -->
|
||||
<TextBlock Text="{Binding FormTitle}"
|
||||
FontSize="16"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="{Binding FormSubtitle}"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource TextMuted}" />
|
||||
</StackPanel>
|
||||
<Button Grid.Column="2"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="6"
|
||||
VerticalAlignment="Top"
|
||||
Cursor="Hand"
|
||||
Command="{Binding CancelCommand}">
|
||||
<Svg Path="../Assets/Icons/x.svg"
|
||||
Width="15" Height="15"
|
||||
Css="{DynamicResource SvgMuted}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<!-- ── Type toggle ─────────────────── -->
|
||||
<TextBlock Text="TYPE" Classes="label" Margin="0,0,0,6" />
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}"
|
||||
Padding="3"
|
||||
Margin="0,0,0,20">
|
||||
<Grid ColumnDefinitions="*,*">
|
||||
<!-- Expense -->
|
||||
<Button Grid.Column="0"
|
||||
Classes="nav"
|
||||
Classes.accented="{Binding IsExpense}"
|
||||
HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Center"
|
||||
CornerRadius="7"
|
||||
Padding="0,8"
|
||||
Focusable="False"
|
||||
Command="{Binding SetTypeCommand}"
|
||||
CommandParameter="expense">
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Svg Path="../Assets/Icons/arrow-up-right.svg"
|
||||
Width="13" Height="13"/>
|
||||
<TextBlock Text="Expense"
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<!-- Income -->
|
||||
<Button Grid.Column="1"
|
||||
Classes="nav"
|
||||
Classes.accented="{Binding IsIncome}"
|
||||
HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Center"
|
||||
CornerRadius="7"
|
||||
Padding="0,8"
|
||||
Focusable="False"
|
||||
Command="{Binding SetTypeCommand}"
|
||||
CommandParameter="income">
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Svg Path="../Assets/Icons/arrow-down-left.svg"
|
||||
Width="13" Height="13"/>
|
||||
<TextBlock Text="Income"
|
||||
FontSize="13"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- ── Amount ──────────────────────── -->
|
||||
<TextBlock Text="AMOUNT" Classes="label" Margin="0,0,0,6" />
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}"
|
||||
Padding="14,0"
|
||||
Margin="0,0,0,16">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<TextBlock Grid.Column="0"
|
||||
Text="$"
|
||||
FontSize="22"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextMuted}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="0,0,8,0" />
|
||||
<TextBox Grid.Column="1"
|
||||
Classes="ghost"
|
||||
Text="{Binding Amount, Mode=TwoWay}"
|
||||
Watermark="0.00"
|
||||
FontSize="22"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource TextPrimary}"
|
||||
Height="54"
|
||||
Padding="0"
|
||||
VerticalContentAlignment="Center" />
|
||||
<TextBlock Grid.Column="2"
|
||||
Text="{Binding Currency}"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource TextDisabled}"
|
||||
VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- ── Description ─────────────────── -->
|
||||
<TextBlock Text="DESCRIPTION" Classes="label" Margin="0,0,0,6" />
|
||||
<TextBox Text="{Binding Description, Mode=TwoWay}"
|
||||
Watermark="e.g. Grocery Shopping"
|
||||
FontSize="13"
|
||||
Height="38"
|
||||
Padding="12,0"
|
||||
VerticalContentAlignment="Center"
|
||||
Margin="0,0,0,16" />
|
||||
|
||||
<!-- ── Category + Account ──────────── -->
|
||||
<Grid ColumnDefinitions="*,14,*" Margin="0,0,0,16">
|
||||
|
||||
<!-- Category -->
|
||||
<StackPanel Grid.Column="0" Spacing="6">
|
||||
<TextBlock Text="CATEGORY" Classes="label" />
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}">
|
||||
<Grid ColumnDefinitions="Auto,*">
|
||||
<Border Grid.Column="0"
|
||||
CornerRadius="7"
|
||||
Width="30" Height="30"
|
||||
Margin="8,0,0,0"
|
||||
VerticalAlignment="Center">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding SelectedCategory.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding SelectedCategory.Icon, Converter={StaticResource SvgPathFromName}}"
|
||||
Width="14" Height="14"
|
||||
Css="{Binding SelectedCategory.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
</Border>
|
||||
<ComboBox Grid.Column="1"
|
||||
ItemsSource="{Binding Categories}"
|
||||
SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
|
||||
DisplayMemberBinding="{Binding Name}"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="8,10"
|
||||
FontSize="13"
|
||||
HorizontalAlignment="Stretch" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
|
||||
<!-- Account -->
|
||||
<StackPanel Grid.Column="2" Spacing="6">
|
||||
<TextBlock Text="ACCOUNT" Classes="label" />
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}">
|
||||
<Grid ColumnDefinitions="Auto,*">
|
||||
<Border Grid.Column="0"
|
||||
CornerRadius="7"
|
||||
Width="30" Height="30"
|
||||
Margin="8,0,0,0"
|
||||
VerticalAlignment="Center">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding SelectedAccount.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding SelectedAccount.Icon, Converter={StaticResource SvgPathFromName}}"
|
||||
Width="14" Height="14"
|
||||
Css="{Binding SelectedAccount.Color, Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
</Border>
|
||||
<ComboBox Grid.Column="1"
|
||||
ItemsSource="{Binding Accounts}"
|
||||
SelectedItem="{Binding SelectedAccount, Mode=TwoWay}"
|
||||
DisplayMemberBinding="{Binding Name}"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="8,10"
|
||||
FontSize="13"
|
||||
HorizontalAlignment="Stretch" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
|
||||
</Grid>
|
||||
|
||||
<!-- ── Date ────────────────────────── -->
|
||||
<TextBlock Text="DATE" Classes="label" Margin="0,0,0,6" />
|
||||
<Border Background="{DynamicResource BgBase}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}"
|
||||
Margin="0,0,0,16">
|
||||
<Grid ColumnDefinitions="*,Auto">
|
||||
<cc:DateRangePicker Grid.Column="0"
|
||||
Classes="ghost"
|
||||
SelectionMode="SingleDate"
|
||||
SelectedDates="{Binding Dates}"
|
||||
HorizontalAlignment="Stretch"
|
||||
Padding="12,10"/>
|
||||
<Button Grid.Column="1"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="8,0"
|
||||
Cursor="Hand"
|
||||
VerticalAlignment="Center"
|
||||
Command="{Binding SetTodayCommand}">
|
||||
<TextBlock Text="Today"
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource AccentBlue}" />
|
||||
</Button>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- ── Note ────────────────────────── -->
|
||||
<TextBlock Text="NOTE (OPTIONAL)" Classes="label" Margin="0,0,0,6" />
|
||||
<TextBox Text="{Binding Note, Mode=TwoWay}"
|
||||
Watermark="Add a note..."
|
||||
FontSize="13"
|
||||
Height="38"
|
||||
Padding="12,0"
|
||||
VerticalContentAlignment="Center"
|
||||
Margin="0,0,0,8" />
|
||||
|
||||
<!-- ── Validation error ─────────────── -->
|
||||
<Border Background="{DynamicResource BadgeBgRed}"
|
||||
BorderBrush="{DynamicResource AccentRed}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="10"
|
||||
Padding="12,8"
|
||||
Margin="0,8,0,16"
|
||||
IsVisible="{Binding HasError}">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/circle-alert.svg"
|
||||
Width="13" Height="13"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #FF5E5E; }" />
|
||||
<TextBlock Text="{Binding ErrorMessage}"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource AccentRed}"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- ── Delete button (edit mode only) ── -->
|
||||
<Button HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Center"
|
||||
Background="#1A0808"
|
||||
BorderBrush="#3A1515"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{DynamicResource RadiusControl}"
|
||||
Padding="0,10"
|
||||
Margin="0,0,0,10"
|
||||
IsVisible="{Binding IsEditMode}"
|
||||
Command="{Binding DeleteCommand}">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/trash-2.svg"
|
||||
Width="13" Height="13"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #FF5E5E; }" />
|
||||
<TextBlock Text="Delete Transaction"
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="#FF5E5E"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
|
||||
<!-- ── Actions ──────────────────────── -->
|
||||
<Grid ColumnDefinitions="*,*">
|
||||
<Button Grid.Column="0"
|
||||
Classes="base"
|
||||
Margin="0,0,6,0"
|
||||
Padding="0,11"
|
||||
HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Center"
|
||||
FontSize="13"
|
||||
Content="Cancel"
|
||||
Command="{Binding CancelCommand}" />
|
||||
<Button Grid.Column="1"
|
||||
Classes="accented"
|
||||
Margin="6,0,0,0"
|
||||
Padding="0,11"
|
||||
HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Center"
|
||||
IsEnabled="{Binding IsValid}"
|
||||
Command="{Binding SaveCommand}">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/check.svg"
|
||||
Width="13" Height="13"
|
||||
Css="path, circle, rect, ellipse, line, polyline, polygon, text, use { stroke: #0D0F14; }" />
|
||||
<TextBlock Text="{Binding SaveButtonLabel}"
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource BgBase}"
|
||||
VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
13
Clario/Views/TransactionFormView.axaml.cs
Normal file
13
Clario/Views/TransactionFormView.axaml.cs
Normal file
@@ -0,0 +1,13 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Clario.Views;
|
||||
|
||||
public partial class TransactionFormView : UserControl
|
||||
{
|
||||
public TransactionFormView()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
@@ -325,7 +325,8 @@
|
||||
<Button Grid.Column="1"
|
||||
Classes="accented"
|
||||
Padding="16,9"
|
||||
VerticalAlignment="Center">
|
||||
VerticalAlignment="Center"
|
||||
Command="{Binding CreateTransactionCommand}">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Svg Path="../Assets/Icons/plus.svg"
|
||||
Width="14" Height="14"
|
||||
@@ -334,7 +335,7 @@
|
||||
FontSize="13"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource BgBase}"
|
||||
VerticalAlignment="Center" />
|
||||
VerticalAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</Grid>
|
||||
@@ -405,23 +406,34 @@
|
||||
<TextBlock Text="{Binding Description}"
|
||||
Classes="label" />
|
||||
</Border>
|
||||
<Border Padding="20,12" IsVisible="{Binding !GroupHeader}"
|
||||
BorderBrush="{DynamicResource BorderSubtle}"
|
||||
<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">
|
||||
|
||||
<Border Grid.Column="0"
|
||||
CornerRadius="{DynamicResource RadiusIcon}"
|
||||
Width="34" Height="34"
|
||||
VerticalAlignment="Center">
|
||||
VerticalAlignment="Center" Padding="0">
|
||||
<Border.Background>
|
||||
<SolidColorBrush
|
||||
Color="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=color}"
|
||||
Opacity="0.15" />
|
||||
</Border.Background>
|
||||
<Svg Path="{Binding Category.Icon,Converter={StaticResource SvgPathFromName}}"
|
||||
Width="16" Height="16"
|
||||
Css="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
<Panel>
|
||||
<Svg Classes="hide" Path="{Binding Category.Icon,Converter={StaticResource SvgPathFromName}}"
|
||||
Width="16"
|
||||
Height="16"
|
||||
Css="{Binding Category.Color,Converter={StaticResource HexToColorConverter}, ConverterParameter=css}" />
|
||||
<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>
|
||||
|
||||
</Border>
|
||||
|
||||
<StackPanel Grid.Column="1"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Controls;
|
||||
using Clario.Messages;
|
||||
using CommunityToolkit.Mvvm.Messaging;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user