mrcwlnd/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design updates

Browse Source
This commit is contained in:
MarcWieland
2026-06-08 23:52:22 +02:00
parent f92dd2659c
commit 2029524379
12 changed files with 436 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
timetracker.Client/Components/Layout/ChatbotWidget.razor.css
+11 -11
View File
@@ -14,13 +14,13 @@
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid #3F51B5;
border: 2px solid #0EA5E9;
}
.timebot-launcher:hover {
transform: scale(1.1) translateY(-4px);
box-shadow: 0 12px 28px rgba(63, 81, 181, 0.4);
border-color: #1A237E;
box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
border-color: #0284C7;
}
.timebot-launcher img {
@@ -83,7 +83,7 @@
/* Header */
.timebot-header {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
background: #0F172A;
padding: 14px 16px;
display: flex;
align-items: center;
@@ -211,10 +211,10 @@
}
.user-bubble {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
color: white;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(63, 81, 181, 0.2);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
/* Typing Indicator */
@@ -271,8 +271,8 @@
}
.timebot-suggestions button:hover {
background: rgba(63, 81, 181, 0.15);
border-color: #3F51B5;
background: rgba(14, 165, 233, 0.15);
border-color: #0EA5E9;
color: white;
transform: translateY(-1px);
}
@@ -300,9 +300,9 @@
}
.timebot-input:focus {
border-color: #3F51B5;
border-color: #0EA5E9;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}
.timebot-send-btn {
@@ -319,7 +319,7 @@
}
.timebot-send-btn:hover {
background: #e3e6ff;
background: #e0f2fe;
transform: scale(1.05);
}
timetracker.Client/Components/Layout/MainLayout.razor
+10 -10
View File
@@ -11,7 +11,7 @@
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="2" Style="background: linear-gradient(90deg, #3F51B5 0%, #1A237E 100%);">
<MudAppBar Elevation="2" Style="background: #0F172A;">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="ml-2">
<MudIcon Icon="@Icons.Material.Filled.AccessTime" Style="color:white; font-size:1.6rem" />
@@ -64,17 +64,17 @@
{
PaletteLight = new PaletteLight
{
Primary = "#3F51B5",
PrimaryDarken = "#1A237E",
PrimaryLighten = "#7986CB",
Secondary = "#009688",
SecondaryDarken = "#00695C",
AppbarBackground = "#3F51B5",
Background = "#F4F6F9",
Primary = "#1E293B",
PrimaryDarken = "#0F172A",
PrimaryLighten = "#475569",
Secondary = "#0EA5E9",
SecondaryDarken = "#0284C7",
AppbarBackground = "#0F172A",
Background = "#F8FAFC",
DrawerBackground = "#FFFFFF",
Surface = "#FFFFFF",
TextPrimary = "#212121",
TextSecondary = "#757575",
TextPrimary = "#0F172A",
TextSecondary = "#475569",
}
};
timetracker.Client/Components/Layout/NavMenu.razor
+17 -12
View File
@@ -1,8 +1,9 @@
<div style="display:flex; flex-direction:column; height:100%;">
<div style="display:flex; flex-direction:column; height:100%;">
<MudNavMenu Style="flex:1">
<MudDivider Class="mb-2" />
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth">Wochenübersicht</MudNavLink>
<MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth">Monatsübersicht</MudNavLink>
<MudNavLink Href="stats" Icon="@Icons.Material.Filled.BarChart">Statistiken</MudNavLink>
<MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration">Feiertage</MudNavLink>
<MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome">Urlaubs-Maximizer</MudNavLink>
<MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings">Einstellungen</MudNavLink>
@@ -16,21 +17,25 @@
<AuthorizeView>
<Authorized>
<MudDivider />
<MudStack Row="true" AlignItems="AlignItems.Center" Class="px-4 py-2" Spacing="1">
<MudIcon Icon="@Icons.Material.Filled.AccountCircle" Color="Color.Primary" Size="Size.Small" />
<MudText Typo="Typo.body2" Style="font-weight:600">@context.User.Identity?.Name</MudText>
</MudStack>
<MudNavMenu>
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
</MudNavMenu>
@* Username Display - Styled to match NavLink layout exactly *@
<div class="mud-nav-link px-4 py-3" style="display: flex; align-items: center; color: var(--mud-palette-text-secondary); cursor: default; user-select: none;">
<MudIcon Icon="@Icons.Material.Filled.AccountCircle" Class="mr-6" Size="Size.Medium" Style="color: var(--mud-palette-text-secondary);" />
<MudText Typo="Typo.body2" Style="font-weight: 600; color: var(--mud-palette-text-primary);">@context.User.Identity?.Name</MudText>
</div>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
<MudNavMenu>
<MudNavMenu>
<AuthorizeView>
<Authorized>
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases"
Style="color: var(--mud-palette-text-disabled); font-size:0.75rem;">
Version 1.4
</MudNavLink>
</MudNavMenu>
</MudTooltip>
</MudTooltip>
</MudNavMenu>
</div>
timetracker.Client/Components/Pages/AdminUsers.razor
+1 -1
View File
@@ -22,7 +22,7 @@ else
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #B71C1C 0%, #7F0000 100%); color:white;">
Style="background: #991B1B; color:white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
<MudIcon Icon="@Icons.Material.Filled.AdminPanelSettings" Style="color:white; font-size:2rem" />
<MudStack Spacing="0">
timetracker.Client/Components/Pages/Changelog.razor
+3 -2
View File
@@ -8,7 +8,7 @@
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color:white;">
Style="background: #1E293B; color:white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
<MudIcon Icon="@Icons.Material.Filled.NewReleases" Style="color:white; font-size:2rem" />
<MudStack Spacing="0">
@@ -71,7 +71,8 @@
new("1.4", "08.06.2026", true,
[
new("Neu", "Timebot implementiert"),
new("Upgrade", "Security hardening")
new("Upgrade", "Security hardening"),
new("Upgrade", "Changed coloring")
]),
new("1.3", "08.06.2026", false,
[
timetracker.Client/Components/Pages/Feiertage.razor
+2 -2
View File
@@ -20,7 +20,7 @@ else
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #00897B 0%, #004D40 100%); color: white;">
Style="background: #0F766E; color: white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
Style="color:white" Size="Size.Large" OnClick="PrevYear" />
@@ -140,7 +140,7 @@ else
@* ── Zusammenfassung ── *@
<MudPaper Elevation="2" Class="pa-4 rounded-xl"
Style="background: linear-gradient(90deg, rgba(0,137,123,0.08) 0%, transparent 100%); border-left: 4px solid #00897B;">
Style="background: linear-gradient(90deg, rgba(15,118,110,0.08) 0%, transparent 100%); border-left: 4px solid #0F766E;">
<MudStack Row="true" Spacing="4" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
<MudIcon Icon="@Icons.Material.Filled.Celebration" Style="color:#00897B" />
timetracker.Client/Components/Pages/Home.razor
+3 -3
View File
@@ -21,7 +21,7 @@ else
@* ── Wochen-Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color: white;">
Style="background: #1E293B; color: white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
Style="color:white" Size="Size.Large" OnClick="PrevWeek" />
@@ -95,7 +95,7 @@ else
@* ── Arbeitstag: vollständige Karte ── *@
<MudCard @key="@day.Date" Elevation="@(isToday ? 6 : 2)" Class="rounded-xl"
Style="@($"border-left: 4px solid {borderColor};")">
<MudCardHeader Style="@(isToday ? "background: linear-gradient(90deg, rgba(63,81,181,0.07) 0%, transparent 100%);" : "")">
<MudCardHeader Style="@(isToday ? "background: linear-gradient(90deg, rgba(14,165,233,0.07) 0%, transparent 100%);" : "")">
<CardHeaderContent>
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudStack Spacing="0">
@@ -270,7 +270,7 @@ else
@* ── Wochensumme ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #1A237E 0%, #283593 100%); color:white;">
Style="background: #0F172A; color:white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-4">
<MudIcon Icon="@Icons.Material.Filled.Summarize" Style="color:rgba(255,255,255,0.8)" />
<MudText Typo="Typo.h6" Style="color:white; font-weight:600">Wochensumme</MudText>
timetracker.Client/Components/Pages/Login.razor
+2 -2
View File
@@ -12,8 +12,8 @@
@* ── Logo / Header ── *@
<MudStack AlignItems="AlignItems.Center" Spacing="1">
<MudIcon Icon="@Icons.Material.Filled.AccessTime"
Style="font-size:4rem; color:#1565C0" />
<MudText Typo="Typo.h4" Style="font-weight:700; color:#1565C0">Timetracker</MudText>
Style="font-size:4rem; color:#0EA5E9" />
<MudText Typo="Typo.h4" Style="font-weight:700; color:#0EA5E9">Timetracker</MudText>
</MudStack>
<MudPaper Elevation="4" Class="pa-6 rounded-xl" Style="width:100%">
timetracker.Client/Components/Pages/Month.razor
+3 -3
View File
@@ -20,7 +20,7 @@ else
@* ── Monats-Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color: white;">
Style="background: #1E293B; color: white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
Style="color:white" Size="Size.Large" OnClick="PrevMonth" />
@@ -51,7 +51,7 @@ else
<MudCardContent Class="pa-0">
<MudSimpleTable Dense="true" Striped="false" Hover="true" Style="overflow-x:auto">
<thead>
<tr style="background: rgba(63,81,181,0.08);">
<tr style="background: rgba(14,165,233,0.08);">
<th style="font-weight:700; padding:10px 16px">Tag</th>
<th style="font-weight:700; padding:10px 16px">Start</th>
<th style="font-weight:700; padding:10px 16px">Ende</th>
@@ -95,7 +95,7 @@ else
@* ── Monatszusammenfassung ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, rgba(63,81,181,0.08) 0%, rgba(26,35,126,0.04) 100%); border-left: 6px solid #3F51B5;">
Style="background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.02) 100%); border-left: 6px solid #0EA5E9;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-4">
<MudIcon Icon="@Icons.Material.Filled.CalendarViewMonth" Color="Color.Primary" />
<MudText Typo="Typo.h6" Style="font-weight:700">Monatszusammenfassung</MudText>
timetracker.Client/Components/Pages/Settings.razor
+1 -1
View File
@@ -20,7 +20,7 @@ else
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color:white;">
Style="background: #1E293B; color:white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
<MudIcon Icon="@Icons.Material.Filled.Settings" Style="color:white; font-size:2rem" />
<MudStack Spacing="0">
timetracker.Client/Components/Pages/Stats.razor
+382
View File
@@ -0,0 +1,382 @@
@page "/stats"
@rendermode InteractiveWebAssembly
@attribute [Authorize]
@inject ITimetrackerService TrackerService
@inject AuthenticationStateProvider AuthStateProvider
@using System.Security.Claims
@using timetracker.Shared
<PageTitle>Statistiken – Timetracker</PageTitle>
@if (_loading)
{
<MudStack AlignItems="AlignItems.Center" Class="mt-16" Spacing="3">
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
<MudText Color="Color.Secondary">Lade Statistiken…</MudText>
</MudStack>
}
else
{
<MudStack Spacing="4">
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl" Style="background: #1E293B; color: white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
<MudIcon Icon="@Icons.Material.Filled.BarChart" Style="color:white; font-size:2.2rem" />
<MudStack Spacing="0">
<MudText Typo="Typo.h5" Style="color:white; font-weight:700">Statistiken</MudText>
<MudText Typo="Typo.caption" Style="color:rgba(255,255,255,0.72)">Auswertung deiner Arbeitsleistung und Gleitzeitkonto</MudText>
</MudStack>
</MudStack>
</MudPaper>
<MudGrid Spacing="4">
@* ── Card 1: Wochen-Fortschritt ── *@
<MudItem xs="12" md="4">
<MudCard Elevation="3" Class="rounded-xl" Style="height:100%;">
<MudCardContent>
<MudStack AlignItems="AlignItems.Center" Spacing="3">
<MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Wochenfortschritt</MudText>
@{
var pct = _weekTargetHours > 0 ? (int)Math.Min((_weekWorkedHours / _weekTargetHours) * 100, 100) : 0;
var displayPct = _weekTargetHours > 0 ? (int)Math.Round((_weekWorkedHours / _weekTargetHours) * 100) : 0;
}
<div style="position:relative; display:inline-flex;">
<MudProgressCircular Value="@pct" Color="Color.Secondary" Size="Size.Large" StrokeWidth="6" Style="height:120px; width:120px;" />
<div style="position:absolute; top:0; left:0; bottom:0; right:0; display:flex; align-items:center; justify-content:center; flex-direction:column;">
<MudText Typo="Typo.h5" Style="font-weight:800; color:#0F172A;">@displayPct%</MudText>
<MudText Typo="Typo.caption" Color="Color.Secondary">Erreicht</MudText>
</div>
</div>
<MudStack Spacing="1" Style="width:100%;" Class="mt-2">
<MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.body2" Color="Color.Secondary">Arbeitszeit (Ist):</MudText>
<MudText Typo="Typo.body2" Style="font-weight:700; color:#0F172A">@FormatHours(_weekWorkedHours) Std.</MudText>
</MudStack>
<MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.body2" Color="Color.Secondary">Wochensoll (Soll):</MudText>
<MudText Typo="Typo.body2" Style="font-weight:700">@FormatHours(_weekTargetHours) Std.</MudText>
</MudStack>
</MudStack>
</MudStack>
</MudCardContent>
</MudCard>
</MudItem>
@* ── Card 2: Wochensaldo ── *@
<MudItem xs="12" sm="6" md="4">
<MudCard Elevation="3" Class="rounded-xl" Style="height:100%; border-left: 6px solid #0EA5E9;">
<MudCardContent>
<MudStack Spacing="2">
<MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Wochensaldo</MudText>
<MudStack Row="true" AlignItems="AlignItems.Center" Class="py-3">
<MudIcon Icon="@(_weekOvertimeHours >= 0 ? Icons.Material.Filled.TrendingUp : Icons.Material.Filled.TrendingDown)"
Style="@($"color:{(_weekOvertimeHours >= 0 ? "#10B981" : "#EF4444")}; font-size:3rem")" />
<MudStack Spacing="0">
<MudText Typo="Typo.h3" Style="@($"font-weight:800; color:{(_weekOvertimeHours >= 0 ? "#10B981" : "#EF4444")};")">
@FormatTs(TimeSpan.FromHours(_weekOvertimeHours), sign: true)
</MudText>
<MudText Typo="Typo.caption" Color="Color.Secondary">Überstunden-Veränderung diese Woche</MudText>
</MudStack>
</MudStack>
</MudStack>
</MudCardContent>
</MudCard>
</MudItem>
@* ── Card 3: Gesamtsaldo ── *@
<MudItem xs="12" sm="6" md="4">
<MudCard Elevation="3" Class="rounded-xl" Style="@($"height:100%; border-left: 6px solid {(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")};")">
<MudCardContent>
<MudStack Spacing="2">
<MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Gleitzeitkonto</MudText>
<MudStack Row="true" AlignItems="AlignItems.Center" Class="py-3">
<MudIcon Icon="Icons.Material.Filled.AccountBalance"
Style="@($"color:{(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")}; font-size:3rem")" />
<MudStack Spacing="0">
<MudText Typo="Typo.h3" Style="@($"font-weight:800; color:{(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")};")">
@FormatTs(_totalOvertime, sign: true)
</MudText>
<MudText Typo="Typo.caption" Color="Color.Secondary">Gesamtsaldo aller erfassten Tage</MudText>
</MudStack>
</MudStack>
</MudStack>
</MudCardContent>
</MudCard>
</MudItem>
@* ── Säulendiagramm (Tagesverteilung) ── *@
<MudItem xs="12">
<MudCard Elevation="3" Class="rounded-xl">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.h6" Style="font-weight:700; color:#0F172A">Arbeitszeitverteilung diese Woche</MudText>
<MudText Typo="Typo.caption" Color="Color.Secondary">Geleistete Nettoarbeitsstunden pro Wochentag</MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<div class="chart-container" style="width:100%; overflow-x:auto;">
<svg viewBox="0 0 640 320" width="100%" height="320" style="min-width: 500px; display: block; overflow: visible;">
<style>
.chart-bar {
transition: height 0.4s ease, y 0.4s ease, fill 0.3s;
cursor: pointer;
}
.chart-bar:hover {
filter: brightness(1.1) drop-shadow(0px 4px 8px rgba(14, 165, 233, 0.3));
}
</style>
@{
double plotLeft = 50;
double plotRight = 580;
double plotTop = 30;
double plotBottom = 270;
double plotWidth = plotRight - plotLeft;
double plotHeight = plotBottom - plotTop;
double barWidth = 36;
double spacing = plotWidth / 7;
}
<!-- Horizontal Grid Lines -->
@for (int i = 0; i <= 4; i++)
{
double val = (_maxHoursValue / 4.0) * i;
double yPos = plotBottom - (val / _maxHoursValue) * plotHeight;
<line x1="@plotLeft" y1="@yPos" x2="@plotRight" y2="@yPos" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="2" />
@((MarkupString)$"<text x=\"{plotLeft - 8}\" y=\"{yPos + 4}\" fill=\"#64748B\" font-size=\"11\" font-weight=\"500\" text-anchor=\"end\">{val:F1}h</text>")
}
<!-- Bars and Labels -->
@for (int i = 0; i < 7; i++)
{
var d = _days[i];
double xPos = plotLeft + (i * spacing) + (spacing - barWidth) / 2;
double bHeight = (d.WorkedHours / _maxHoursValue) * plotHeight;
double yPos = plotBottom - bHeight;
string fillCol = "#94A3B8"; // Default light slate
if (d.IsToday)
{
fillCol = "#0EA5E9"; // Sky Blue for today
}
else if (d.WorkedHours >= d.TargetHours && d.TargetHours > 0)
{
fillCol = "#475569"; // Slate Blue for normal completed target
}
else if (d.WorkedHours > 0 && d.TargetHours == 0)
{
fillCol = "#10B981"; // Emerald Green for weekend work (pure overtime)
}
else if (d.WorkedHours > 0)
{
fillCol = "#64748B"; // Slate Medium for incomplete target
}
else
{
fillCol = "#E2E8F0"; // Very light grey for zero hours
}
<!-- Render Rect with hover tooltip -->
<rect x="@xPos" y="@(d.WorkedHours > 0 ? yPos : plotBottom - 4)" width="@barWidth" height="@(d.WorkedHours > 0 ? bHeight : 4)"
rx="6" fill="@fillCol" class="chart-bar">
<title>@d.DayName: @FormatHours(d.WorkedHours) Std. (Soll: @FormatHours(d.TargetHours) Std.)</title>
</rect>
<!-- Value Label above bar -->
@if (d.WorkedHours > 0)
{
@((MarkupString)$"<text x=\"{xPos + barWidth / 2}\" y=\"{yPos - 6}\" fill=\"#0F172A\" font-size=\"11\" font-weight=\"700\" text-anchor=\"middle\">{FormatHours(d.WorkedHours)}</text>")
}
<!-- Wochentag Text -->
@((MarkupString)$"<text x=\"{xPos + barWidth / 2}\" y=\"{plotBottom + 20}\" fill=\"#64748B\" font-size=\"11\" font-weight=\"700\" text-anchor=\"middle\">{d.DayShortName}</text>")
}
<!-- Sollzeit Target Line (Only if target hours > 0) -->
@if (_settings.DailyTargetHours > 0)
{
double yTarget = plotBottom - (_settings.DailyTargetHours / _maxHoursValue) * plotHeight;
<line x1="@plotLeft" y1="@yTarget" x2="@plotRight" y2="@yTarget" stroke="#EF4444" stroke-width="2" stroke-dasharray="4" style="opacity: 0.75;" />
@((MarkupString)$"<text x=\"{plotRight - 10}\" y=\"{yTarget - 6}\" fill=\"#EF4444\" font-size=\"10\" font-weight=\"700\" text-anchor=\"end\">Soll ({_settings.DailyTargetHours} h)</text>")
}
</svg>
</div>
</MudCardContent>
</MudCard>
</MudItem>
@* ── Diagnostics Panel ── *@
<MudItem xs="12">
<MudExpansionPanels>
<MudExpansionPanel Text="Diagnose-Daten (Debug)">
<MudText Typo="Typo.body2">Benutzer-ID: @_userId</MudText>
<MudText Typo="Typo.body2">Wochensoll: @_weekTargetHours Std. | Netto-Arbeitszeit: @_weekWorkedHours Std. | Wochensaldo: @_weekOvertimeHours Std.</MudText>
<MudText Typo="Typo.body2">Anzahl erfasste Tage aus DB: @_rawDbDaysCount</MudText>
<MudSimpleTable Style="margin-top: 10px;">
<thead>
<tr>
<th>Datum</th>
<th>Tag</th>
<th>Ist (Std)</th>
<th>Soll (Std)</th>
<th>Ist > 0</th>
<th>Arbeitstag (Einst.)</th>
<th>Aus DB zugeordnet</th>
</tr>
</thead>
<tbody>
@foreach (var d in _days)
{
<tr>
<td>@d.Date.ToString("yyyy-MM-dd")</td>
<td>@d.DayName</td>
<td>@d.WorkedHours</td>
<td>@d.TargetHours</td>
<td>@(d.WorkedHours > 0 ? "Ja" : "Nein")</td>
<td>@(d.IsWorkDay ? "Ja" : "Nein")</td>
<td>@(_dbMatchStatus.GetValueOrDefault(d.Date, "Nein"))</td>
</tr>
}
</tbody>
</MudSimpleTable>
</MudExpansionPanel>
</MudExpansionPanels>
</MudItem>
</MudGrid>
</MudStack>
}
@code {
private bool _loading = true;
private int _userId;
private AppSettings _settings = new();
private List<DayStat> _days = [];
private TimeSpan _totalOvertime;
private double _weekWorkedHours;
private double _weekTargetHours;
private double _weekOvertimeHours;
private double _maxHoursValue = 10.0;
// Debug variables
private int _rawDbDaysCount = 0;
private Dictionary<DateOnly, string> _dbMatchStatus = new();
private static readonly System.Globalization.CultureInfo _deCulture = new("de-DE");
protected override async Task OnInitializedAsync()
{
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
var claim = authState.User.FindFirst(ClaimTypes.NameIdentifier);
if (claim == null) return;
_userId = int.Parse(claim.Value);
_settings = await TrackerService.GetSettingsAsync(_userId);
var today = DateOnly.FromDateTime(DateTime.Today);
var monday = GetMonday(today);
var dbDays = await TrackerService.GetWeekAsync(_userId, monday);
_rawDbDaysCount = dbDays.Count;
_totalOvertime = await TrackerService.GetTotalOvertimeAsync(_userId, _settings);
_weekTargetHours = 0;
_weekWorkedHours = 0;
_dbMatchStatus.Clear();
_days = Enumerable.Range(0, 7).Select(i =>
{
var date = monday.AddDays(i);
bool isWorkDay = _settings.IsWorkDay(date.DayOfWeek);
double target = isWorkDay ? _settings.DailyTargetHours : 0.0;
if (isWorkDay)
{
_weekTargetHours += _settings.DailyTargetHours;
}
var wd = dbDays.FirstOrDefault(d => d.Date == date);
double worked = 0.0;
if (wd != null)
{
_dbMatchStatus[date] = $"Ja (Id={wd.Id}, Start={wd.StartTime}, Ende={wd.EndTime})";
if (wd.StartTime != null && wd.EndTime != null)
{
var gross = wd.EndTime.Value.ToTimeSpan() - wd.StartTime.Value.ToTimeSpan();
if (gross > TimeSpan.Zero)
{
var breakTotal = wd.Breaks
.Where(b => b.StartTime.HasValue && b.EndTime.HasValue && b.EndTime > b.StartTime)
.Aggregate(TimeSpan.Zero, (s, b) =>
s + (b.EndTime!.Value.ToTimeSpan() - b.StartTime!.Value.ToTimeSpan()));
worked = (gross - breakTotal).TotalHours;
if (worked < 0) worked = 0.0;
}
}
}
else
{
_dbMatchStatus[date] = "Nein";
}
_weekWorkedHours += worked;
return new DayStat
{
Date = date,
DayName = date.ToString("dddd", _deCulture),
DayShortName = date.ToString("ddd", _deCulture),
WorkedHours = worked,
TargetHours = target,
IsToday = date == today,
IsWorkDay = isWorkDay
};
}).ToList();
_weekOvertimeHours = _weekWorkedHours - _weekTargetHours;
var maxWorked = _days.Max(d => d.WorkedHours);
_maxHoursValue = Math.Max(10.0, Math.Max(maxWorked, _settings.DailyTargetHours));
_loading = false;
}
private static DateOnly GetMonday(DateOnly date)
{
int diff = ((int)date.DayOfWeek - (int)DayOfWeek.Monday + 7) % 7;
return date.AddDays(-diff);
}
private string FormatHours(double hours)
{
var ts = TimeSpan.FromHours(hours);
return $"{(int)ts.TotalHours}:{ts.Minutes:D2}";
}
private string FormatTs(TimeSpan ts, bool sign = false)
{
if (ts == TimeSpan.Zero && sign) return "±0:00";
var prefix = sign ? (ts >= TimeSpan.Zero ? "+" : "−") : (ts < TimeSpan.Zero ? "−" : "");
var abs = ts.Duration();
return $"{prefix}{(int)abs.TotalHours}:{abs.Minutes:D2}";
}
private sealed class DayStat
{
public DateOnly Date { get; set; }
public string DayName { get; set; } = "";
public string DayShortName { get; set; } = "";
public double WorkedHours { get; set; }
public double TargetHours { get; set; }
public bool IsToday { get; set; }
public bool IsWorkDay { get; set; }
}
}
timetracker.Client/Components/Pages/UrlaubsMaximizer.razor
+1 -1
View File
@@ -21,7 +21,7 @@ else
@* ── Header ── *@
<MudPaper Elevation="4" Class="pa-5 rounded-xl"
Style="background: linear-gradient(135deg, #F57F17 0%, #E65100 100%); color:white;">
Style="background: #C2410C; color:white;">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
Style="color:white" Size="Size.Large" OnClick="PrevYear" />