148 lines
8.0 KiB
Plaintext
148 lines
8.0 KiB
Plaintext
@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;
|
|
}
|
|
}
|