Utopia-Canteen-System/Views/ScannerDashboardView.xaml

489 lines
28 KiB
XML

<UserControl x:Class="UtopiaCanteenSystem.Views.ScannerDashboardView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:UtopiaCanteenSystem.Converters">
<UserControl.Resources>
<local:StringToVisibilityConverter x:Key="StringToVisibility"/>
<SolidColorBrush x:Key="AccentBrush" Color="#5BA3A0"/>
<SolidColorBrush x:Key="AccentBorderBrush" Color="#995BA3A0"/>
<SolidColorBrush x:Key="MutedTextBrush" Color="#718096"/>
<SolidColorBrush x:Key="TitleTextBrush" Color="#2D3748"/>
<SolidColorBrush x:Key="ErrorTextBrush" Color="#E53E3E"/>
<SolidColorBrush x:Key="ConnectedBrush" Color="#38A169"/>
<SolidColorBrush x:Key="SuccessTextBrush" Color="#38A169"/>
<SolidColorBrush x:Key="SettingsIconBrush" Color="#5BA3A0"/>
<Style x:Key="RoundedButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="{StaticResource AccentBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="24,12"/>
<Setter Property="MinHeight" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="8"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondaryButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="{StaticResource TitleTextBrush}"/>
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="BorderBrush" Value="#e2e8f0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Padding" Value="20,12"/>
<Setter Property="MinHeight" Value="52"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="10">
<Grid>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="8,0">
<TextBlock Text="⚙"
FontSize="16"
Foreground="{StaticResource SettingsIconBrush}"
Margin="0,0,8,0"
VerticalAlignment="Center"/>
<TextBlock Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#f8fafc"/>
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="{StaticResource AccentBrush}"/>
<Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#f1f5f9"/>
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="#4a918e"/>
<Setter Property="Foreground" Value="#4a918e"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LogoutLinkButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Padding" Value="16,12"/>
<Setter Property="MinHeight" Value="52"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder"
Background="{TemplateBinding Background}"
CornerRadius="10"
BorderBrush="#fee2e2"
BorderThickness="1">
<Grid>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="⎋"
FontSize="16"
Foreground="#e53e3e"
Margin="0,0,8,0"
VerticalAlignment="Center"/>
<TextBlock Text="Logout"
Foreground="#e53e3e"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#fef2f2"/>
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="#fca5a5"/>
<Setter Property="Foreground" Value="#dc2626"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" Value="#fee2e2"/>
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="#f87171"/>
<Setter Property="Foreground" Value="#b91c1c"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="StatusTextStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource MutedTextBrush}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Connected">
<Setter Property="Foreground" Value="{StaticResource ConnectedBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="StatusIconStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Text" Value=""/>
<Setter Property="Foreground" Value="{StaticResource ErrorTextBrush}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ScannerStatus}" Value="Connected">
<Setter Property="Foreground" Value="{StaticResource ConnectedBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="StatusBorderStyle" TargetType="Border">
<Setter Property="Background" Value="#dcfce7"/>
<Setter Property="BorderBrush" Value="#86efac"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="14"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSuccess}" Value="False">
<Setter Property="Background" Value="#fee2e2"/>
<Setter Property="BorderBrush" Value="#fca5a5"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid Background="#F0F2F5">
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
Padding="40">
<Border HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ViewportWidth}"
MaxWidth="900"
Padding="40"
Background="White"
CornerRadius="12">
<Border.Effect>
<DropShadowEffect BlurRadius="24"
ShadowDepth="0"
Opacity="0.08"
Color="#000000"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Menu button (top-right, prominent) -->
<ToggleButton x:Name="MenuToggleButton"
Grid.Row="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,0,0,8"
IsChecked="{Binding IsMenuOpen, Mode=TwoWay}"
Unchecked="MenuToggleButton_Unchecked"
Background="#f4f7f7"
BorderBrush="#e2e8f0"
BorderThickness="1"
Padding="14,10"
MinWidth="48"
MinHeight="44"
FontSize="22"
FontWeight="SemiBold"
Foreground="{StaticResource TitleTextBrush}"
Focusable="False"
IsTabStop="False"
ToolTip="Menu"
Cursor="Hand">
<ToggleButton.Content></ToggleButton.Content>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="MenuBtnBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MenuBtnBorder" Property="Background" Value="#e8eeed"/>
<Setter TargetName="MenuBtnBorder" Property="BorderBrush" Value="{StaticResource AccentBrush}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="MenuBtnBorder" Property="Background" Value="#e0e7e6"/>
<Setter TargetName="MenuBtnBorder" Property="BorderBrush" Value="{StaticResource AccentBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<!-- Inline menu panel (opens inside dashboard) -->
<Border x:Name="MenuPanel"
Grid.Row="1"
Background="#f8fafc"
BorderBrush="#e2e8f0"
BorderThickness="1"
CornerRadius="8"
Padding="16"
Margin="0,0,0,12"
Visibility="{Binding IsMenuOpen, Converter={StaticResource BoolToVisibility}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
<TextBlock Text="SITE :" VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" Foreground="{StaticResource TitleTextBrush}" Margin="0,0,8,0"/>
<TextBox x:Name="SiteNumberTextBox"
Text="{Binding SiteNumber, UpdateSourceTrigger=PropertyChanged}"
Width="80"
FontSize="14"
Padding="8,6"
VerticalContentAlignment="Center"
PreviewTextInput="SiteNumberTextBox_PreviewTextInput"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Content="Settings"
Command="{Binding OpenSettingsCommand}"
Style="{StaticResource SecondaryButtonStyle}"
Margin="0,0,12,0"
Focusable="False"
IsTabStop="False"/>
<Button Command="{Binding LogoutCommand}"
Style="{StaticResource LogoutLinkButtonStyle}"
Focusable="False"
IsTabStop="False">
<StackPanel Orientation="Horizontal">
<TextBlock Text="⎋" FontSize="14" Margin="0,0,8,0" VerticalAlignment="Center"/>
<TextBlock Text="Logout" FontSize="14" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Border>
<!-- Top section -->
<StackPanel Grid.Row="2" HorizontalAlignment="Center">
<Image Source="pack://siteoforigin:,,,/assets/logo4.png"
Height="180"
MaxWidth="480"
Stretch="Uniform"
Margin="0,0,0,16"/>
<TextBlock Text="Tap card to place order"
FontSize="16"
Foreground="{StaticResource MutedTextBrush}"
HorizontalAlignment="Center"
Margin="0,8,0,0"/>
</StackPanel>
<!-- Order input -->
<StackPanel Grid.Row="3" Margin="0,24,0,0">
<Border MinHeight="50"
CornerRadius="8"
BorderBrush="{StaticResource AccentBorderBrush}"
BorderThickness="2">
<Grid>
<TextBox x:Name="RfidInputTextBox"
Text="{Binding CardIdInput, UpdateSourceTrigger=PropertyChanged}"
Background="Transparent"
BorderThickness="0"
FontSize="18"
MinHeight="50"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Focusable="True"
KeyDown="RfidInputTextBox_OnKeyDown"
LostKeyboardFocus="RfidInputTextBox_OnLostKeyboardFocus"/>
<TextBlock Text="Scan..."
Foreground="Gray"
FontSize="18"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextAlignment="Center"
IsHitTestVisible="False"
Visibility="{Binding IsWatermarkVisible, Converter={StaticResource BoolToVisibility}}"/>
</Grid>
</Border>
<Button Content="PLACE ORDER"
Command="{Binding ScanCommand}"
Margin="0,16,0,0"
HorizontalAlignment="Stretch"
Style="{StaticResource RoundedButtonStyle}"/>
</StackPanel>
<!-- Status row + timestamp -->
<StackPanel Grid.Row="4" Margin="0,18,0,0" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Style="{StaticResource StatusIconStyle}" Margin="0,0,8,0"/>
<TextBlock Text="{Binding ScannerStatusDisplay}" Style="{StaticResource StatusTextStyle}"/>
</StackPanel>
<TextBlock Text="{Binding CurrentTime}"
FontSize="14"
Foreground="{StaticResource MutedTextBrush}"
Margin="0,10,0,0"
HorizontalAlignment="Center"/>
</StackPanel>
<!-- Divider -->
<Border Grid.Row="5"
Height="1"
Background="#e2e8f0"
Margin="0,24,0,24"/>
<!-- Cooldown alert: ask customer to rescan after countdown -->
<Border Grid.Row="6"
Background="#fef2f2"
BorderBrush="#fca5a5"
BorderThickness="2"
CornerRadius="8"
Padding="20"
Margin="0,0,0,16"
Visibility="{Binding ShowCooldownAlert, Converter={StaticResource BoolToVisibility}}">
<TextBlock Text="{Binding CooldownAlertMessage}"
FontSize="20"
FontWeight="Bold"
Foreground="{StaticResource ErrorTextBrush}"
TextWrapping="Wrap"
TextAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
<!-- Dashboard section -->
<Grid Grid.Row="7">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="#f4f7f7" CornerRadius="8" Padding="24" Margin="0,0,8,0">
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="{Binding TodaysScans}"
FontSize="56"
FontWeight="Bold"
Foreground="{StaticResource TitleTextBrush}"
HorizontalAlignment="Center"/>
<TextBlock Text="Today's Customer"
FontSize="16"
Foreground="{StaticResource MutedTextBrush}"
HorizontalAlignment="Center"
Margin="0,6,0,0"/>
</StackPanel>
</Border>
<Border Grid.Column="1" Background="#f4f7f7" CornerRadius="8" Padding="24" Margin="8,0,0,0">
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="{Binding TotalOrders}"
FontSize="56"
FontWeight="Bold"
Foreground="{StaticResource TitleTextBrush}"
HorizontalAlignment="Center"/>
<TextBlock Text="Total Orders"
FontSize="16"
Foreground="{StaticResource MutedTextBrush}"
HorizontalAlignment="Center"
Margin="0,6,0,0"/>
</StackPanel>
</Border>
</Grid>
<Border Grid.Row="1" BorderBrush="#e2e8f0" BorderThickness="1" CornerRadius="8" Padding="16" Margin="0,0,0,16">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="0,0,12,12">
<TextBlock Text="LAST CARD" FontSize="12" Foreground="{StaticResource MutedTextBrush}" FontWeight="SemiBold"/>
<TextBlock Text="{Binding LastCardId}" FontSize="20" FontWeight="SemiBold" Foreground="{StaticResource TitleTextBrush}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12,0,0,12">
<TextBlock Text="LAST ORDER TIME" FontSize="12" Foreground="{StaticResource MutedTextBrush}" FontWeight="SemiBold"/>
<TextBlock Text="{Binding LastScanTimeDisplay}" FontSize="20" FontWeight="SemiBold" Foreground="{StaticResource TitleTextBrush}" />
</StackPanel>
</Grid>
</Border>
<Border Grid.Row="2"
Style="{StaticResource StatusBorderStyle}"
Visibility="{Binding Message, Converter={StaticResource StringToVisibility}}">
<TextBlock Text="{Binding Message}"
FontSize="16"
FontWeight="SemiBold"
Foreground="{StaticResource SuccessTextBrush}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource SuccessTextBrush}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSuccess}" Value="False">
<Setter Property="Foreground" Value="{StaticResource ErrorTextBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Border>
</Grid>
</Grid>
</Border>
</ScrollViewer>
</Grid>
</UserControl>