add dayStatisticChart

src/Koogle.Application/DependencyInjection.cs

@@ -42,6 +42,7 @@ namespace Koogle.Application
             // Note: Game types are registered in Koogle.Web where Blazor components are defined
             // Use services.AddGameType<TDefinition, TLogicService>() to register game types
 
+
             return services;
         }
     }

src/Koogle.Web/Components/Pages/Days/DayDetails.razor

@@ -103,15 +103,17 @@ else
 
     <!-- Main Content with Tabs -->
     <MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
-        <!-- Tab 1: Details (existing content) -->
+    
+    <!-- Tab 1: Details (existing content) -->
         <MudTabPanel Text="Details" Icon="@Icons.Material.Filled.Info">
-    <MudGrid>
+        <MudGrid>
+
         <!-- Participants Section -->
         <MudItem xs="12" md="6">
             <MudPaper Class="pa-4">
                 <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-4">
                     <MudText Typo="Typo.h6">
-                        <MudIcon Icon="@Icons.Material.Filled.People" Class="mr-2" />
+                        <MudIcon Icon="@Icons.Material.Filled.People" Class="mr-2"/>
                         Teilnehmer (@Day.ParticipantCount)
                     </MudText>
                     @if (Day.Status != DayStatus.Closed)
@@ -164,7 +166,7 @@ else
                                                        Size="Size.Small"
                                                        Color="Color.Error"
                                                        OnClick="@(() => RemoveParticipant(participant))"
-                                                       OnClickStopPropagation="true" />
+                                                       OnClickStopPropagation="true"/>
                                     }
                                 </MudStack>
                             </MudListItem>
@@ -182,77 +184,20 @@ else
             </MudPaper>
         </MudItem>
 
-        <!-- Status/Info Section -->
+        <!-- Statistics -->
         <MudItem xs="12" md="6">
-            <MudPaper Class="pa-4">
+            <PlayerStatisticsChart DayId="DayState.Value.SelectedDay.Id"/>
-                <MudText Typo="Typo.h6" Class="mb-4">
-                    <MudIcon Icon="@Icons.Material.Filled.Info" Class="mr-2" />
-                    Details
-                </MudText>
-
-                <MudSimpleTable Dense="true" Hover="true" Striped="true">
-                    <tbody>
-                        <tr>
-                            <td><strong>Status</strong></td>
-                            <td>
-                                <MudChip T="string" Size="Size.Small" Color="GetStatusColor(Day.Status)">
-                                    @GetStatusLabel(Day.Status)
-                                </MudChip>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><strong>Datum</strong></td>
-                            <td>@Day.PostDate.ToString("dd.MM.yyyy")</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Teilnehmer</strong></td>
-                            <td>@Day.ParticipantCount</td>
-                        </tr>
-                        <tr>
-                            <td><strong>Erstellt</strong></td>
-                            <td>@Day.CreatedAt.ToString("dd.MM.yyyy HH:mm")</td>
-                        </tr>
-                        @if (Day.ModifiedAt.HasValue)
-                        {
-                            <tr>
-                                <td><strong>Geändert</strong></td>
-                                <td>@Day.ModifiedAt.Value.ToString("dd.MM.yyyy HH:mm")</td>
-                            </tr>
-                        }
-                    </tbody>
-                </MudSimpleTable>
-
-                <MudDivider Class="my-4" />
-
-                <MudText Typo="Typo.subtitle2" Class="mb-2">Status-Workflow</MudText>
-                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
-                    <MudChip T="string" Size="Size.Small"
-                             Color="@(Day.Status == DayStatus.New ? Color.Info : Color.Success)"
-                             Icon="@(Day.Status == DayStatus.New ? Icons.Material.Filled.FiberNew : Icons.Material.Filled.Check)">
-                        Neu
-                    </MudChip>
-                    <MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default" />
-                    <MudChip T="string" Size="Size.Small"
-                             Color="@GetWorkflowStepColor(DayStatus.Started)"
-                             Icon="@GetWorkflowStepIcon(DayStatus.Started)">
-                        Gestartet
-                    </MudChip>
-                    <MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default" />
-                    <MudChip T="string" Size="Size.Small"
-                             Color="@GetWorkflowStepColor(DayStatus.Closed)"
-                             Icon="@GetWorkflowStepIcon(DayStatus.Closed)">
-                        Abgeschlossen
-                    </MudChip>
-                </MudStack>
-            </MudPaper>
         </MudItem>
 
+
+
+
         <!-- PersonExpense Section -->
         <MudItem xs="12">
             <MudPaper Class="pa-4">
                 <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-4">
                     <MudText Typo="Typo.h6">
-                        <MudIcon Icon="@Icons.Material.Filled.AttachMoney" Class="mr-2" />
+                        <MudIcon Icon="@Icons.Material.Filled.AttachMoney" Class="mr-2"/>
                         Strafen / Kosten (@FilteredExpenses.Count@(_selectedParticipantId.HasValue && Expenses.Count != FilteredExpenses.Count ? $"/{Expenses.Count}" : ""))
                     </MudText>
                     @if (Day.Status != DayStatus.Closed)
@@ -292,7 +237,7 @@ else
 
                 @if (DayState.Value.IsLoadingExpenses)
                 {
-                    <MudProgressLinear Indeterminate="true" Class="mb-4" />
+                    <MudProgressLinear Indeterminate="true" Class="mb-4"/>
                 }
 
                 @if (Day.Participants.Count == 0)
@@ -388,7 +333,7 @@ else
                                                        Size="Size.Small"
                                                        Color="Color.Success"
                                                        OnClick="@(() => MarkAsPaid(context))"
-                                                       Title="Als bezahlt markieren" />
+                                                       Title="Als bezahlt markieren"/>
                                     }
                                     else
                                     {
@@ -396,7 +341,7 @@ else
                                                        Size="Size.Small"
                                                        Color="Color.Warning"
                                                        OnClick="@(() => MarkAsOpen(context))"
-                                                       Title="Als offen markieren" />
+                                                       Title="Als offen markieren"/>
                                     }
                                     @if (Day.Status != DayStatus.Closed)
                                     {
@@ -404,7 +349,7 @@ else
                                                        Size="Size.Small"
                                                        Color="Color.Error"
                                                        OnClick="@(() => ConfirmDeleteExpense(context))"
-                                                       Title="Löschen" />
+                                                       Title="Löschen"/>
                                     }
                                 </MudStack>
                             </MudTd>
@@ -413,10 +358,80 @@ else
                 }
             </MudPaper>
         </MudItem>
-    </MudGrid>
 
-            <!-- Completed Games List at bottom of Details tab -->
+
-            <CompletedGamesList DayId="DayId" />
+        <!-- Completed Games List at bottom of Details tab -->
+        <MudItem xs="12" md="6">
+            <CompletedGamesList DayId="DayId"/>
+        </MudItem>
+
+
+        <!-- Status/Info Section -->
+        <MudItem xs="12" md="6">
+            <MudPaper Class="pa-4">
+                <MudText Typo="Typo.h6" Class="mb-4">
+                    <MudIcon Icon="@Icons.Material.Filled.Info" Class="mr-2"/>
+                    Details
+                </MudText>
+
+                <MudSimpleTable Dense="true" Hover="true" Striped="true">
+                    <tbody>
+                    <tr>
+                        <td><strong>Status</strong></td>
+                        <td>
+                            <MudChip T="string" Size="Size.Small" Color="GetStatusColor(Day.Status)">
+                                @GetStatusLabel(Day.Status)
+                            </MudChip>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><strong>Datum</strong></td>
+                        <td>@Day.PostDate.ToString("dd.MM.yyyy")</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Teilnehmer</strong></td>
+                        <td>@Day.ParticipantCount</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Erstellt</strong></td>
+                        <td>@Day.CreatedAt.ToString("dd.MM.yyyy HH:mm")</td>
+                    </tr>
+                    @if (Day.ModifiedAt.HasValue)
+                    {
+                        <tr>
+                            <td><strong>Geändert</strong></td>
+                            <td>@Day.ModifiedAt.Value.ToString("dd.MM.yyyy HH:mm")</td>
+                        </tr>
+                    }
+                    </tbody>
+                </MudSimpleTable>
+
+                <MudDivider Class="my-4"/>
+
+                <MudText Typo="Typo.subtitle2" Class="mb-2">Status-Workflow</MudText>
+                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
+                    <MudChip T="string" Size="Size.Small"
+                             Color="@(Day.Status == DayStatus.New ? Color.Info : Color.Success)"
+                             Icon="@(Day.Status == DayStatus.New ? Icons.Material.Filled.FiberNew : Icons.Material.Filled.Check)">
+                        Neu
+                    </MudChip>
+                    <MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default"/>
+                    <MudChip T="string" Size="Size.Small"
+                             Color="@GetWorkflowStepColor(DayStatus.Started)"
+                             Icon="@GetWorkflowStepIcon(DayStatus.Started)">
+                        Gestartet
+                    </MudChip>
+                    <MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default"/>
+                    <MudChip T="string" Size="Size.Small"
+                             Color="@GetWorkflowStepColor(DayStatus.Closed)"
+                             Icon="@GetWorkflowStepIcon(DayStatus.Closed)">
+                        Abgeschlossen
+                    </MudChip>
+                </MudStack>
+            </MudPaper>
+        </MudItem>
+        
+        </MudGrid>
         </MudTabPanel>
 
         <!-- Tab 2: Eingabe (Game Input) -->

src/Koogle.Web/Components/Shared/PlayerStatisticsChart.razor

@@ -0,0 +1,128 @@
+@using ApexCharts
+@using Koogle.Application.DTOs
+@using Koogle.Application.Interfaces
+@using Color = MudBlazor.Color
+@using Size = MudBlazor.Size
+
+@inject IPlayerStatisticsService StatisticsService
+@inject ISnackbar Snackbar
+
+<MudPaper Class="pa-4">
+    <MudText Typo="Typo.h6" Class="mb-4">
+        <MudIcon Icon="@Icons.Material.Filled.BarChart" Class="mr-2" />
+        Statistik
+    </MudText>
+@if (_isLoading)
+{
+    <MudProgressCircular Indeterminate="true" Size="Size.Small" />
+}
+else if (_stats != null)
+    {
+        @if (_stats.PlayerStats.Count == 0)
+        {
+            <MudText Typo="Typo.body2" Color="Color.Secondary">
+                Noch keine Statistiken vorhanden. Spiele ein paar Runden!
+            </MudText>
+        }
+        else
+        {
+            <ApexChart TItem="MyData"
+                       Title="">
+
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="Kegel"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalPins"/>
+
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="Gossen"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalGutters"/>
+
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="Würfe"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalThrows" />
+
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="alle 9"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalStrikes" />
+
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="Kränze"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalCircles" />
+                
+                <ApexPointSeries TItem="MyData"
+                                 Items="Data"
+                                 Name="Abgeräumt"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="e => e.Name"
+                                 YValue="e => e.TotalCleared" />
+            </ApexChart>
+        }
+    }
+</MudPaper>
+
+
+@code {
+    private List<MyData> Data { get; set; } = new();
+    
+    public class MyData
+    {
+        public string Name { get; set; } = string.Empty;
+        public int TotalPins { get; set; }
+        public int TotalGutters { get; set; }
+        public int TotalThrows { get; set; }
+        public int TotalStrikes { get; set; }
+        public int TotalCircles { get; set; }
+        public int TotalCleared { get; set; }
+    }
+
+
+    [Parameter, EditorRequired]
+    public Guid DayId { get; set; }
+
+    private DayStatisticsDto? _stats;
+    private bool _isLoading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            _stats = await StatisticsService.GetDayStatisticsAsync(DayId);
+            Data.AddRange(
+            _stats.PlayerStats.Select(s => new MyData 
+                { 
+                    Name = s.PersonName, 
+                    TotalPins = s.TotalPins,
+                    TotalGutters = s.TotalGutters,
+                TotalThrows = s.TotalThrows,
+                TotalStrikes = s.TotalStrikes,
+                TotalCircles = s.TotalCircles,
+                TotalCleared = s.TotalCleared
+                })
+            );
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Fehler beim Laden der Statistiken: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+}

src/Koogle.Web/Koogle.Web.csproj

@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
     <PackageReference Include="Fluxor.Blazor.Web" Version="6.9.0" />
     <PackageReference Include="Fluxor.Blazor.Web.ReduxDevTools" Version="6.9.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.11">

src/Koogle.Web/Program.cs

@@ -1,12 +1,13 @@
-using System.Reflection;
+using ApexCharts;
 using Fluxor;
 using Fluxor.Blazor.Web.ReduxDevTools;
 using Koogle.Application;
 using Koogle.Application.Games;
-using Koogle.Application.Games.Training;
-using Koogle.Application.Games.Shit;
 using Koogle.Application.Games.DeathBox;
+using Koogle.Application.Games.Shit;
+using Koogle.Application.Games.Training;
 using Koogle.Infrastructure;
+using Koogle.Infrastructure.Data;
 using Koogle.Infrastructure.Security;
 using Koogle.Web.Components;
 using Koogle.Web.Hubs;
@@ -15,7 +16,7 @@ using Koogle.Web.Store.AuthState;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Components.Server;
 using MudBlazor.Services;
-using Koogle.Infrastructure.Data;
+using System.Reflection;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -65,6 +66,18 @@ builder.Services.AddScoped<IHostEnvironmentAuthenticationStateProvider>(sp =>
 
 builder.Services.AddMudServices();
 
+
+// ApexCharts - https://github.com/apexcharts/Blazor-ApexCharts
+builder.Services.AddApexCharts(e =>
+{
+    e.GlobalOptions = new ApexChartBaseOptions
+    {
+        Debug = true,
+        Theme = new Theme { Palette = PaletteType.Palette6 }
+    };
+});
+
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.