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

Dashboard & Mitarbeiterverwaltung

Browse Source
This commit is contained in:
Marc Wieland
2026-03-18 23:07:45 +01:00
parent 9a8789a7ae
commit d54d01e62a
53 changed files with 415 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
OnProfNext.Client/Pages/ManagerDashboard.razor Normal file
View File

@@ -0,0 +1,147 @@
@page "/manager-dashboard"
@using MudBlazor
<PageTitle>Team-Dashboard | OnProf</PageTitle>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-8">
<div class="d-flex justify-space-between align-center mb-6">
<MudText Typo="Typo.h4" Class="fw-bold">Team-Dashboard</MudText>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.FileDownload">Als PDF exportieren</MudButton>
</div>
<MudGrid>
<!-- Top KPI Cards -->
<MudItem xs="12" sm="6" md="3">
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-primary);">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team-Stunden (Aktueller Monat)</MudText>
<div class="d-flex align-end justify-space-between mt-2">
<MudText Typo="Typo.h3">850 <small style="font-size: 1rem">h</small></MudText>
<MudIcon Icon="@Icons.Material.Filled.Group" Color="Color.Primary" Size="Size.Large" />
</div>
</MudPaper>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-success);">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Auslastung (Durchschnitt)</MudText>
<MudText Typo="Typo.h3">92 <small style="font-size: 1rem">%</small></MudText>
<MudProgressLinear Color="Color.Success" Value="92" Class="mt-2" />
</MudPaper>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-info);">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Aktive Auftragsprojekte</MudText>
<div class="d-flex align-end justify-space-between mt-2">
<MudText Typo="Typo.h3">14</MudText>
<MudIcon Icon="@Icons.Material.Filled.Domain" Color="Color.Info" Size="Size.Large" />
</div>
</MudPaper>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-warning);">
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Überstundenkonto gesamt</MudText>
<div class="d-flex align-end justify-space-between mt-2">
<MudText Typo="Typo.h3">185 <small style="font-size: 1rem">h</small></MudText>
<MudIcon Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" Size="Size.Large" />
</div>
</MudPaper>
</MudItem>
<!-- Charts Row -->
<MudItem xs="12" md="8">
<MudPaper Elevation="2" Class="pa-6" Style="height: 400px; display: flex; flex-direction: column;">
<MudText Typo="Typo.h6" Class="mb-4">Gebuchte Stunden der letzten 5 Wochen</MudText>
<div class="flex-grow-1">
<MudChart T="double" ChartType="ChartType.Bar" ChartSeries="@_barSeries" XAxisLabels="@_xAxisLabels" Width="100%" Height="280px" />
</div>
</MudPaper>
</MudItem>
<MudItem xs="12" md="4">
<MudPaper Elevation="2" Class="pa-6" Style="height: 400px; display: flex; flex-direction: column;">
<MudText Typo="Typo.h6" Class="mb-4">Projektverteilung gesamt</MudText>
<div class="flex-grow-1 d-flex justify-center align-center">
<MudChart T="double" ChartType="ChartType.Donut" InputData="@_donutData" InputLabels="@_donutLabels" Width="200px" Height="200px" />
</div>
</MudPaper>
</MudItem>
<!-- Top Mitarbeiter Table -->
<MudItem xs="12">
<MudPaper Elevation="2" Class="pa-6 mt-2">
<MudText Typo="Typo.h6" Class="mb-4">Performance der Mitarbeiter im aktuellen Monat</MudText>
<MudDataGrid T="EmployeeStat" Items="@_employees" Hover="true" Bordered="false" Striped="true" Dense="true" Elevation="0">
<Columns>
<TemplateColumn T="EmployeeStat" Title="Mitarbeiter" SortBy="@(x => x.Name)">
<CellTemplate>
<div class="d-flex align-center">
<MudAvatar Size="Size.Small" Color="Color.Primary" Class="mr-3">
@context.Item.Name.Substring(0, 1)
</MudAvatar>
<MudText Typo="Typo.body2"><b>@context.Item.Name</b></MudText>
</div>
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Role" Title="Rolle" />
<PropertyColumn Property="x => x.ProjectCount" Title="Aktive Projekte" />
<TemplateColumn T="EmployeeStat" Title="Stunden (Monat)" SortBy="@(x => x.HoursBooked)">
<CellTemplate>
<MudText Typo="Typo.body2"><b>@context.Item.HoursBooked</b> <small class="mud-text-secondary ml-1">h</small></MudText>
</CellTemplate>
</TemplateColumn>
<TemplateColumn T="EmployeeStat" Title="Auslastung" SortBy="@(x => x.Utilization)">
<CellTemplate>
<div class="d-flex align-center">
<MudProgressLinear Color="@GetUtilizationColor(context.Item.Utilization)" Value="@context.Item.Utilization" Class="mr-2" Style="width: 100px; min-width: 60px;" />
<MudText Typo="Typo.caption" Color="@GetUtilizationColor(context.Item.Utilization)"><b>@context.Item.Utilization%</b></MudText>
</div>
</CellTemplate>
</TemplateColumn>
</Columns>
</MudDataGrid>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>
@code {
public class EmployeeStat
{
public string Name { get; set; } = string.Empty;
public string Role { get; set; } = string.Empty;
public int ProjectCount { get; set; }
public double HoursBooked { get; set; }
public double Utilization { get; set; }
}
private List<EmployeeStat> _employees = new()
{
new EmployeeStat { Name = "Marc Mustermann", Role = "Entwickler", ProjectCount = 3, HoursBooked = 160, Utilization = 100 },
new EmployeeStat { Name = "Anna Schmidt", Role = "Projektleiterin", ProjectCount = 5, HoursBooked = 145, Utilization = 90 },
new EmployeeStat { Name = "John Doe", Role = "Entwickler", ProjectCount = 4, HoursBooked = 175, Utilization = 110 },
new EmployeeStat { Name = "Maria Mayer", Role = "Testerin", ProjectCount = 2, HoursBooked = 150, Utilization = 95 },
new EmployeeStat { Name = "Peter Parker", Role = "Designer", ProjectCount = 2, HoursBooked = 80, Utilization = 50 },
};
private string[] _xAxisLabels = { "KW 08", "KW 09", "KW 10", "KW 11", "KW 12" };
private List<ChartSeries<double>> _barSeries = new()
{
new ChartSeries<double>() { Name = "Kundenaufträge", Data = new double[] { 300, 320, 280, 350, 400 } },
new ChartSeries<double>() { Name = "Intern", Data = new double[] { 60, 40, 50, 30, 20 } },
new ChartSeries<double>() { Name = "Gleitzeit / Urlaub", Data = new double[] { 40, 50, 60, 45, 30 } },
};
private double[] _donutData = { 65, 15, 20 };
private string[] _donutLabels = { "Kundenaufträge", "Intern", "Gleitzeit / Urlaub" };
private Color GetUtilizationColor(double utilization)
{
if (utilization > 105) return Color.Warning;
if (utilization < 75) return Color.Error;
return Color.Success;
}
}