944 lines
41 KiB
Plaintext
944 lines
41 KiB
Plaintext
@using Microsoft.AspNetCore.Components
|
|
@using TrafagSalesExporter.Models
|
|
@using TrafagSalesExporter.Services
|
|
@inject IUiTextService UiText
|
|
@inject IJSRuntime JsRuntime
|
|
|
|
<MudTabs Elevation="1" Rounded="false" PanelClass="pt-4">
|
|
<MudTabPanel Text="@T("Ueberblick", "Overview")" Icon="@Icons.Material.Filled.Dashboard">
|
|
@PrintToolbar("hr-kpi-print-overview", T("Ueberblick als PDF", "Overview as PDF"))
|
|
<div id="hr-kpi-print-overview" class="hr-print-section">
|
|
@PrintHeader(T("Ueberblick", "Overview"))
|
|
@MetricGrid(Result.Metrics)
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="7">
|
|
@TrafficLightPanel(Result.TrafficLights)
|
|
</MudItem>
|
|
<MudItem xs="12" md="5">
|
|
@MetricGrid(Result.PeriodComparisonMetrics)
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@HeadcountByOrganisationTable(Result.HeadcountByOrganisation)
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
@CriticalBalancesTable(Result.CriticalTimeBalances)
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Fluktuation", "Turnover")" Icon="@Icons.Material.Filled.TrendingDown">
|
|
@PrintToolbar("hr-kpi-print-turnover", T("Fluktuation als PDF", "Turnover as PDF"))
|
|
<div id="hr-kpi-print-turnover" class="hr-print-section">
|
|
@PrintHeader(T("Fluktuation", "Turnover"))
|
|
@MetricGrid(Result.TurnoverMetrics)
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@TurnoverRelevantTable(Result.FluctuationRelevantLeavers)
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
@LeaverExclusionTable(Result.Leavers)
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@GroupValueTable(T("Austritte nach Austrittsart", "Leavers by exit type"), Result.LeaversByType, T("Austritte", "Leavers"))
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
@GroupValueTable(T("Austritte nach Organisation", "Leavers by organisation"), Result.LeaversByOrganisation, T("Austritte", "Leavers"))
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="4">
|
|
@TurnoverGauge(Result.TurnoverVisuals)
|
|
</MudItem>
|
|
<MudItem xs="12" md="4">
|
|
@TurnoverFunnel(Result.TurnoverVisuals.FunnelSteps)
|
|
</MudItem>
|
|
<MudItem xs="12" md="4">
|
|
@TurnoverDonut(Result.TurnoverVisuals.ExclusionReasons)
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@HorizontalBars(Result.TurnoverVisuals.RelevantByOrganisation)
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
@MonthlyBars(Result.TurnoverVisuals)
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Ampel", "Status")" Icon="@Icons.Material.Filled.Traffic">
|
|
@PrintToolbar("hr-kpi-print-status", T("Ampel als PDF", "Status as PDF"))
|
|
<div id="hr-kpi-print-status" class="hr-print-section">
|
|
@PrintHeader(T("Ampel", "Status"))
|
|
@TrafficLightPanel(Result.TrafficLights)
|
|
@MetricGrid(Result.PeriodComparisonMetrics)
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Absenzen", "Absences")" Icon="@Icons.Material.Filled.Sick">
|
|
@PrintToolbar("hr-kpi-print-absences", T("Absenzen als PDF", "Absences as PDF"))
|
|
<div id="hr-kpi-print-absences" class="hr-print-section">
|
|
@PrintHeader(T("Absenzen", "Absences"))
|
|
@MetricGrid(Result.AbsenceMetrics)
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@GroupValueTable(T("Absenzen nach Organisation", "Absences by organisation"), Result.AbsenceByOrganisation, T("Krankheitstage", "Sick days"))
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
@TopAbsencesTable(Result.Absences)
|
|
</MudItem>
|
|
</MudGrid>
|
|
<MudPaper Class="pa-4 mt-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Absenzen je Mitarbeiter", "Absences by employee")</MudText>
|
|
<MudTable Items="Result.Absences.OrderByDescending(x => x.KrankheitstageGesamt).Take(100)" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Personalnr.", "Personnel no.")</MudTh>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Kurz", "Short")</MudTh>
|
|
<MudTh>@T("Lang", "Long")</MudTh>
|
|
<MudTh>@T("Gesamt", "Total")</MudTh>
|
|
<MudTh>@T("Quote", "Rate")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Personalnummer</MudTd>
|
|
<MudTd>@DisplayPersonName(context.Name, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.KrankheitstageKurz.ToString("N1")</MudTd>
|
|
<MudTd>@context.KrankheitstageLang.ToString("N1")</MudTd>
|
|
<MudTd>@context.KrankheitstageGesamt.ToString("N1")</MudTd>
|
|
<MudTd>@context.KrankenquoteMa.ToString("P1")</MudTd>
|
|
</RowTemplate>
|
|
<PagerContent>
|
|
<MudTablePager />
|
|
</PagerContent>
|
|
</MudTable>
|
|
</MudPaper>
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Zeit / Ferien", "Time / Vacation")" Icon="@Icons.Material.Filled.EventAvailable">
|
|
@PrintToolbar("hr-kpi-print-time-vacation", T("Zeit/Ferien als PDF", "Time/vacation as PDF"))
|
|
<div id="hr-kpi-print-time-vacation" class="hr-print-section">
|
|
@PrintHeader(T("Zeit / Ferien", "Time / Vacation"))
|
|
@MetricGrid(Result.TimeVacationMetrics)
|
|
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12" md="6">
|
|
@CriticalBalancesTable(Result.CriticalTimeBalances)
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Kritische Restferien", "Critical vacation balance")</MudText>
|
|
<MudTable Items="Result.Employees.OrderByDescending(x => x.UrlaubRest).Take(25)" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Rest", "Left")</MudTh>
|
|
<MudTh>@T("Ausstehend", "Open")</MudTh>
|
|
<MudTh>@T("Ampel", "Status")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@DisplayPersonName(context.NameVoll, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.UrlaubRest.ToString("N1")</MudTd>
|
|
<MudTd>@context.FerienAusstehend.ToString("N1")</MudTd>
|
|
<MudTd>
|
|
<MudChip T="string" Size="Size.Small" Color="@TrafficLightColor(context.RestferienAmpel)" Variant="Variant.Outlined">
|
|
@context.RestferienAmpel
|
|
</MudChip>
|
|
</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Mitarbeitende", "Employees")" Icon="@Icons.Material.Filled.Groups">
|
|
@PrintToolbar("hr-kpi-print-employees", T("Mitarbeitende als PDF", "Employees as PDF"))
|
|
<div id="hr-kpi-print-employees" class="hr-print-section">
|
|
@PrintHeader(T("Mitarbeitende", "Employees"))
|
|
@EmployeesTable(Result.Employees)
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Datenstatus", "Data status")" Icon="@Icons.Material.Filled.FactCheck">
|
|
@PrintToolbar("hr-kpi-print-data-status", T("Datenstatus als PDF", "Data status as PDF"))
|
|
<div id="hr-kpi-print-data-status" class="hr-print-section">
|
|
@PrintHeader(T("Datenstatus", "Data status"))
|
|
@FileStatusTable(Result.FileStatuses)
|
|
<MudGrid Class="mt-4">
|
|
<MudItem xs="12">
|
|
@DataQualityTable(Result.DataQualityIssues)
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
</MudTabPanel>
|
|
|
|
<MudTabPanel Text="@T("Anleitung", "Guide")" Icon="@Icons.Material.Filled.HelpOutline">
|
|
@GuidePanel()
|
|
</MudTabPanel>
|
|
</MudTabs>
|
|
|
|
@code {
|
|
[Parameter, EditorRequired] public HrKpiResult Result { get; set; } = new();
|
|
|
|
private string T(string german, string english) => UiText.Text(german, english);
|
|
|
|
private RenderFragment PrintToolbar(string targetId, string label) => @<MudStack Row Justify="Justify.FlexEnd" Class="mb-3 hr-print-toolbar">
|
|
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small"
|
|
StartIcon="@Icons.Material.Filled.PictureAsPdf"
|
|
OnClick="@(() => PrintSectionAsync(targetId))">
|
|
@label
|
|
</MudButton>
|
|
</MudStack>;
|
|
|
|
private RenderFragment PrintHeader(string title) => @<div class="hr-print-header">
|
|
<h1>@title</h1>
|
|
<p>@Result.Options.DataFolder</p>
|
|
<p>@BuildFilterSummary()</p>
|
|
</div>;
|
|
|
|
private async Task PrintSectionAsync(string targetId)
|
|
{
|
|
await JsRuntime.InvokeVoidAsync("trafagDownload.printElement", targetId);
|
|
}
|
|
|
|
private string BuildFilterSummary()
|
|
{
|
|
var parts = new List<string>();
|
|
if (Result.Options.FromDate.HasValue || Result.Options.ToDate.HasValue)
|
|
parts.Add($"{T("Zeitraum", "Period")}: {FormatDate(Result.Options.FromDate)} - {FormatDate(Result.Options.ToDate)}");
|
|
if (Result.Options.Year.HasValue)
|
|
parts.Add($"{T("Austrittsjahr", "Leaver year")}: {Result.Options.Year.Value}");
|
|
parts.Add($"{T("Organisation", "Organisation")}: {BlankAsAll(Result.Options.Organisationseinheit)}");
|
|
parts.Add($"{T("Mitarbeitertyp", "Employee type")}: {BlankAsAll(Result.Options.Mitarbeitertyp)}");
|
|
if (!string.IsNullOrWhiteSpace(Result.Options.KostenstelleText))
|
|
parts.Add($"{T("Kostenstelle", "Cost center")}: {Result.Options.KostenstelleText}");
|
|
return string.Join(" | ", parts);
|
|
}
|
|
|
|
private string BlankAsAll(string? value)
|
|
=> string.IsNullOrWhiteSpace(value) ? T("Alle", "All") : value;
|
|
|
|
private static Color MetricColor(string severity)
|
|
=> severity == "Warning" ? Color.Warning : Color.Default;
|
|
|
|
private static Color TrafficLightColor(string value)
|
|
=> value switch
|
|
{
|
|
"Rot" => Color.Error,
|
|
"Gelb" => Color.Warning,
|
|
_ => Color.Success
|
|
};
|
|
|
|
private static Color MapQualityColor(string severity)
|
|
=> severity switch
|
|
{
|
|
"Error" => Color.Error,
|
|
"Warning" => Color.Warning,
|
|
_ => Color.Info
|
|
};
|
|
|
|
private static string DisplayPersonName(string name, int? personalnummer, bool managementView)
|
|
=> managementView
|
|
? (personalnummer.HasValue ? $"Personalnr. {personalnummer.Value}" : "Person anonymisiert")
|
|
: name;
|
|
|
|
private static string FormatDate(DateTime? value)
|
|
=> value?.ToString("dd.MM.yyyy") ?? "-";
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiMetric>> MetricGrid => metrics => @<MudGrid Class="mb-4">
|
|
@foreach (var metric in metrics)
|
|
{
|
|
<MudItem xs="12" sm="6" md="3" lg="2">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.caption">@metric.Label</MudText>
|
|
<MudText Typo="Typo.h5">@metric.Value</MudText>
|
|
<MudText Typo="Typo.body2" Color="@MetricColor(metric.Severity)">@metric.Detail</MudText>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiGroupValue>> HeadcountByOrganisationTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Headcount nach Organisation", "Headcount by organisation")</MudText>
|
|
<MudTable Items="items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Headcount", "Headcount")</MudTh>
|
|
<MudTh>FTE</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Label</MudTd>
|
|
<MudTd>@context.Count.ToString("N0")</MudTd>
|
|
<MudTd>@context.Value.ToString("N1")</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiTrafficLight>> TrafficLightPanel => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("HR-Ampel", "HR status")</MudText>
|
|
<MudGrid>
|
|
@foreach (var item in items)
|
|
{
|
|
<MudItem xs="12" sm="6" md="4">
|
|
<MudPaper Class="pa-3" Elevation="0">
|
|
<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
|
|
<MudChip T="string" Size="Size.Small" Color="@TrafficLightColor(item.Status)" Variant="Variant.Filled">
|
|
@item.Status
|
|
</MudChip>
|
|
<MudText Typo="Typo.subtitle2">@item.Area</MudText>
|
|
</MudStack>
|
|
<MudText Typo="Typo.h6">@item.Value</MudText>
|
|
<MudText Typo="Typo.body2">@item.Detail</MudText>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiDataQualityIssue>> DataQualityTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Datenqualitaet", "Data quality")</MudText>
|
|
<MudTable Items="items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Schwere", "Severity")</MudTh>
|
|
<MudTh>@T("Bereich", "Area")</MudTh>
|
|
<MudTh>@T("Pruefpunkt", "Check")</MudTh>
|
|
<MudTh>@T("Anzahl", "Count")</MudTh>
|
|
<MudTh>@T("Hinweis", "Note")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>
|
|
<MudChip T="string" Size="Size.Small" Color="@MapQualityColor(context.Severity)" Variant="Variant.Outlined">
|
|
@context.Severity
|
|
</MudChip>
|
|
</MudTd>
|
|
<MudTd>@context.Area</MudTd>
|
|
<MudTd>@context.Issue</MudTd>
|
|
<MudTd>@context.Count.ToString("N0")</MudTd>
|
|
<MudTd>@context.Detail</MudTd>
|
|
</RowTemplate>
|
|
<NoRecordsContent>
|
|
<MudText Typo="Typo.body2">@T("Keine Datenqualitaetswarnungen.", "No data quality warnings.")</MudText>
|
|
</NoRecordsContent>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<(string Title, IReadOnlyList<HrKpiGroupValue> Items, string ValueLabel)> GroupValueTableTuple => data => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@data.Title</MudText>
|
|
<MudTable Items="data.Items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Gruppe", "Group")</MudTh>
|
|
<MudTh>@data.ValueLabel</MudTh>
|
|
<MudTh>%</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Label</MudTd>
|
|
<MudTd>@(context.Value != 0 ? context.Value.ToString("N1") : context.Count.ToString("N0"))</MudTd>
|
|
<MudTd>@context.Percent.ToString("N1")</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment GroupValueTable(string title, IReadOnlyList<HrKpiGroupValue> items, string valueLabel)
|
|
=> GroupValueTableTuple((title, items, valueLabel));
|
|
|
|
private RenderFragment<IReadOnlyList<HrAbsenceRow>> TopAbsencesTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Hoechste Absenzen", "Highest absences")</MudText>
|
|
<MudTable Items="items.OrderByDescending(x => x.KrankheitstageGesamt).Take(25)" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Kurz", "Short")</MudTh>
|
|
<MudTh>@T("Lang", "Long")</MudTh>
|
|
<MudTh>@T("Gesamt", "Total")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@DisplayPersonName(context.Name, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.KrankheitstageKurz.ToString("N1")</MudTd>
|
|
<MudTd>@context.KrankheitstageLang.ToString("N1")</MudTd>
|
|
<MudTd>@context.KrankheitstageGesamt.ToString("N1")</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiEmployeeRow>> CriticalBalancesTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Kritische GLZ-Saldi", "Critical time balances")</MudText>
|
|
<MudTable Items="items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Saldo", "Balance")</MudTh>
|
|
<MudTh>@T("Ampel", "Status")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@DisplayPersonName(context.NameVoll, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.StundenSaldo.ToString("N1")</MudTd>
|
|
<MudTd>
|
|
<MudChip T="string" Size="Size.Small" Color="@TrafficLightColor(context.GlzAmpel)" Variant="Variant.Outlined">
|
|
@context.GlzAmpel
|
|
</MudChip>
|
|
</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrLeaverRow>> TurnoverRelevantTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Fluktuationsrelevante Austritte", "Turnover relevant leavers")</MudText>
|
|
<MudTable Items="items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Austritt", "Exit")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Austrittsart", "Exit type")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@DisplayPersonName(context.NameVoll, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@FormatDate(context.Austrittsdatum)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.Austrittsart</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrLeaverRow>> LeaverExclusionTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Ausschlussgruende", "Exclusion reasons")</MudText>
|
|
<MudTable Items="BuildLeaverExclusionRows(items)" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Grund", "Reason")</MudTh>
|
|
<MudTh>@T("Anzahl", "Count")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Label</MudTd>
|
|
<MudTd>@context.Count.ToString("N0")</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiEmployeeRow>> EmployeesTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Mitarbeitende", "Employees")</MudText>
|
|
<MudTable Items="items.Take(250)" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Personalnr.", "Personnel no.")</MudTh>
|
|
<MudTh>@T("Name", "Name")</MudTh>
|
|
<MudTh>@T("Organisation", "Organisation")</MudTh>
|
|
<MudTh>@T("Kostenstelle", "Cost center")</MudTh>
|
|
<MudTh>FTE</MudTh>
|
|
<MudTh>@T("Alter", "Age")</MudTh>
|
|
<MudTh>@T("Dienstjahre", "Service years")</MudTh>
|
|
<MudTh>@T("Typ", "Type")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Personalnummer</MudTd>
|
|
<MudTd>@DisplayPersonName(context.NameVoll, context.Personalnummer, Result.Options.ManagementView)</MudTd>
|
|
<MudTd>@context.Organisationseinheit</MudTd>
|
|
<MudTd>@context.KostenstelleText</MudTd>
|
|
<MudTd>@context.Fte.ToString("N2")</MudTd>
|
|
<MudTd>@context.AlterJahre</MudTd>
|
|
<MudTd>@context.Dienstjahre</MudTd>
|
|
<MudTd>@context.Mitarbeitertyp</MudTd>
|
|
</RowTemplate>
|
|
<PagerContent>
|
|
<MudTablePager />
|
|
</PagerContent>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiFileStatus>> FileStatusTable => items => @<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Dateistatus", "File status")</MudText>
|
|
<MudTable Items="items" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Quelle", "Source")</MudTh>
|
|
<MudTh>@T("Status", "Status")</MudTh>
|
|
<MudTh>@T("Stand", "Modified")</MudTh>
|
|
<MudTh>@T("Alter", "Age")</MudTh>
|
|
<MudTh>@T("Zeilen", "Rows")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>
|
|
<MudText Typo="Typo.body2">@context.Label</MudText>
|
|
<MudText Typo="Typo.caption">@context.Path</MudText>
|
|
</MudTd>
|
|
<MudTd>
|
|
<MudChip T="string" Size="Size.Small" Color="@(context.Exists ? Color.Success : Color.Error)" Variant="Variant.Outlined">
|
|
@(context.Message ?? "-")
|
|
</MudChip>
|
|
</MudTd>
|
|
<MudTd>@FormatDate(context.LastModified)</MudTd>
|
|
<MudTd>@(context.AgeDays.HasValue ? $"{context.AgeDays:N0} Tage / {context.FreshnessStatus}" : "-")</MudTd>
|
|
<MudTd>@context.RowCount.ToString("N0")</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment GuidePanel() => @<MudGrid>
|
|
<MudItem xs="12" md="8">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Ablauf fuer HR", "HR workflow")</MudText>
|
|
<div class="hr-guide-steps">
|
|
<div class="hr-guide-step">
|
|
<MudIcon Icon="@Icons.Material.Filled.Download" Size="Size.Large" />
|
|
<span>1</span>
|
|
<strong>@T("Rexx exportieren", "Export from Rexx")</strong>
|
|
<p>@T("Die benoetigten Rexx-Abfragen manuell herunterladen. Excel/XLSX verwenden, nicht PDF.", "Download the required Rexx queries manually. Use Excel/XLSX, not PDF.")</p>
|
|
</div>
|
|
<div class="hr-guide-step">
|
|
<MudIcon Icon="@Icons.Material.Filled.FolderCopy" Size="Size.Large" />
|
|
<span>2</span>
|
|
<strong>@T("Dateien ablegen", "Place files")</strong>
|
|
<p>@T("Downloads in den Datenordner kopieren und exakt wie unten benennen.", "Copy downloads into the data folder and name them exactly as listed below.")</p>
|
|
</div>
|
|
<div class="hr-guide-step">
|
|
<MudIcon Icon="@Icons.Material.Filled.Refresh" Size="Size.Large" />
|
|
<span>3</span>
|
|
<strong>@T("Cockpit laden", "Load cockpit")</strong>
|
|
<p>@T("Im HR-KPI-Cockpit den Datenordner kontrollieren und Laden klicken.", "Check the data folder in the HR KPI cockpit and click Load.")</p>
|
|
</div>
|
|
<div class="hr-guide-step">
|
|
<MudIcon Icon="@Icons.Material.Filled.FactCheck" Size="Size.Large" />
|
|
<span>4</span>
|
|
<strong>@T("Datenstatus pruefen", "Check data status")</strong>
|
|
<p>@T("Im Reiter Datenstatus muessen die erwarteten Dateien gruen erscheinen.", "In the Data status tab, the expected files should be green.")</p>
|
|
</div>
|
|
</div>
|
|
</MudPaper>
|
|
</MudItem>
|
|
<MudItem xs="12" md="4">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Datenordner", "Data folder")</MudText>
|
|
<MudText Typo="Typo.body1">@Result.Options.DataFolder</MudText>
|
|
<MudAlert Severity="Severity.Info" Dense Variant="Variant.Outlined" Class="mt-3">
|
|
@T("Der Standardordner ist konfigurierbar. Fuer einen anderen Ordner oben im HR-KPI-Filter den Datenordner anpassen und neu laden.",
|
|
"The default folder is configurable. To use another folder, change the data folder in the HR KPI filter above and reload.")
|
|
</MudAlert>
|
|
<MudAlert Severity="Severity.Warning" Dense Variant="Variant.Outlined" Class="mt-2">
|
|
@T("HR-Dateien enthalten Personendaten. Nicht per E-Mail weiterleiten und keine Kopien in ungeschuetzten Ordnern liegen lassen.",
|
|
"HR files contain personal data. Do not forward them by email and do not leave copies in unprotected folders.")
|
|
</MudAlert>
|
|
</MudPaper>
|
|
</MudItem>
|
|
<MudItem xs="12">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Neue Auswertungen im Cockpit", "New cockpit views")</MudText>
|
|
<MudGrid>
|
|
<MudItem xs="12" md="6">
|
|
<ul class="mb-0">
|
|
<li>@T("Managementsicht anonymisiert Personendaten fuer Fuehrungsberichte.", "Management view anonymizes personal data for management reports.")</li>
|
|
<li>@T("Dateistatus zeigt Pfad, Zeilen, Aenderungsdatum, Alter und Frische.", "File status shows path, rows, modification date, age and freshness.")</li>
|
|
<li>@T("HR-Ampel fasst Fluktuation, Krankheit, GLZ, Restferien und Datenqualitaet zusammen.", "HR status summarizes turnover, sickness, time balance, vacation balance and data quality.")</li>
|
|
<li>@T("GLZ- und Restferien-Ampeln koennen gefiltert werden.", "Time-balance and vacation status can be filtered.")</li>
|
|
<li>@T("Periodenvergleich zeigt die wichtigsten Vorjahreswerte, soweit Daten vorhanden sind.", "Period comparison shows key prior-year values where data is available.")</li>
|
|
</ul>
|
|
</MudItem>
|
|
<MudItem xs="12" md="6">
|
|
<ul class="mb-0">
|
|
<li>@T("Datenqualitaet markiert fehlende Dateien, alte Dateien und auffaellige Werte.", "Data quality flags missing files, old files and suspicious values.")</li>
|
|
<li>@T("Austritte werden nach Austrittsart und Organisation gruppiert.", "Leavers are grouped by exit type and organisation.")</li>
|
|
<li>@T("Absenzen werden nach Organisation ausgewertet.", "Absences are evaluated by organisation.")</li>
|
|
<li>@T("Top-Absenzen und kritische Detailtabellen helfen bei der operativen Pruefung.", "Top absences and critical detail tables support operational checks.")</li>
|
|
<li>@T("Drucken/PDF erzeugt eine weitergebbare Ansicht aus dem Browser.", "Print/PDF creates a shareable browser view.")</li>
|
|
</ul>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudPaper>
|
|
</MudItem>
|
|
<MudItem xs="12">
|
|
<MudPaper Class="pa-4" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Erwartete Dateien", "Expected files")</MudText>
|
|
<MudTable Items="Result.FileStatuses" Dense Hover Striped>
|
|
<HeaderContent>
|
|
<MudTh>@T("Inhalt", "Content")</MudTh>
|
|
<MudTh>@T("Datei/Pfad", "File/path")</MudTh>
|
|
<MudTh>@T("Status", "Status")</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd>@context.Label</MudTd>
|
|
<MudTd>@context.Path</MudTd>
|
|
<MudTd>
|
|
<MudChip T="string" Size="Size.Small" Color="@(context.Exists ? Color.Success : Color.Error)" Variant="Variant.Outlined">
|
|
@(context.Exists ? T("gefunden", "found") : T("fehlt", "missing"))
|
|
</MudChip>
|
|
</MudTd>
|
|
</RowTemplate>
|
|
</MudTable>
|
|
</MudPaper>
|
|
</MudItem>
|
|
</MudGrid>;
|
|
|
|
private static IEnumerable<HrKpiGroupValue> BuildLeaverExclusionRows(IReadOnlyList<HrLeaverRow> items)
|
|
=> items
|
|
.GroupBy(x => x.FluktuationAusschlussgrund ?? "Relevant")
|
|
.Select(g => new HrKpiGroupValue { Label = g.Key, Count = g.Count(), Value = g.Count() })
|
|
.OrderByDescending(x => x.Count);
|
|
|
|
private RenderFragment<HrTurnoverVisuals> TurnoverGauge => visual => @<MudPaper Class="pa-4 hr-viz-panel" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@visual.RateTitle</MudText>
|
|
<div class="hr-gauge" style="@($"--gauge-color:{visual.GaugeColor}; --gauge-deg:{visual.GaugeRotationDegrees.ToString("0", System.Globalization.CultureInfo.InvariantCulture)}deg")">
|
|
<div class="hr-gauge-track"></div>
|
|
<div class="hr-gauge-needle"></div>
|
|
<div class="hr-gauge-center">
|
|
<div class="hr-gauge-value">@visual.YearRateLabel</div>
|
|
<div class="hr-gauge-caption">0-20%</div>
|
|
</div>
|
|
</div>
|
|
<div class="hr-gauge-scale">
|
|
<span>0%</span>
|
|
<span>8%</span>
|
|
<span>12%</span>
|
|
<span>20%+</span>
|
|
</div>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiGroupValue>> TurnoverFunnel => items => @<MudPaper Class="pa-4 hr-viz-panel" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Austritts-Funnel", "Leaver funnel")</MudText>
|
|
<div class="hr-funnel">
|
|
@foreach (var item in items)
|
|
{
|
|
<div class="hr-funnel-row">
|
|
<div class="hr-funnel-label">@item.Label</div>
|
|
<div class="hr-funnel-bar-wrap">
|
|
<div class="hr-funnel-bar" style="@($"width:{Math.Max(item.Percent, 3).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture)}%; background:{item.Color}")">
|
|
<span>@item.Count.ToString("N0")</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiGroupValue>> TurnoverDonut => items => @<MudPaper Class="pa-4 hr-viz-panel" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Ausschlussgruende", "Exclusion reasons")</MudText>
|
|
<div class="hr-donut-wrap">
|
|
<div class="hr-donut" style="@BuildDonutStyle(items)">
|
|
<div class="hr-donut-hole">@items.Sum(x => x.Count).ToString("N0")</div>
|
|
</div>
|
|
<div class="hr-donut-legend">
|
|
@foreach (var item in items.Take(7))
|
|
{
|
|
<div class="hr-legend-row">
|
|
<span class="hr-legend-dot" style="@($"background:{item.Color}")"></span>
|
|
<span>@item.Label</span>
|
|
<strong>@item.Count.ToString("N0")</strong>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<IReadOnlyList<HrKpiGroupValue>> HorizontalBars => items => @<MudPaper Class="pa-4 hr-viz-panel" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@T("Relevante Austritte nach Organisation", "Relevant leavers by organisation")</MudText>
|
|
<div class="hr-bars">
|
|
@foreach (var item in items)
|
|
{
|
|
<div class="hr-bar-row">
|
|
<div class="hr-bar-label">@item.Label</div>
|
|
<div class="hr-bar-track">
|
|
<div class="hr-bar-fill" style="@($"width:{Math.Max(item.Percent, 3).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture)}%; background:{item.Color}")"></div>
|
|
</div>
|
|
<div class="hr-bar-value">@item.Count.ToString("N0")</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</MudPaper>;
|
|
|
|
private RenderFragment<HrTurnoverVisuals> MonthlyBars => visual => @<MudPaper Class="pa-4 hr-viz-panel" Elevation="1">
|
|
<MudText Typo="Typo.h6" Class="mb-2">@visual.TimelineTitle</MudText>
|
|
<div class="hr-month-bars">
|
|
@foreach (var item in visual.MonthlyRelevantLeavers)
|
|
{
|
|
<div class="hr-month">
|
|
<div class="hr-month-bar" style="@($"height:{Math.Max(item.Percent, item.Count > 0 ? 8 : 1).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture)}%; background:{item.Color}")"></div>
|
|
<div class="hr-month-value">@item.Count</div>
|
|
<div class="hr-month-label">@item.Label</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</MudPaper>;
|
|
|
|
private static string BuildDonutStyle(IReadOnlyList<HrKpiGroupValue> items)
|
|
{
|
|
var total = items.Sum(x => x.Count);
|
|
if (total <= 0)
|
|
return "background:#e0e0e0";
|
|
var current = 0m;
|
|
var segments = new List<string>();
|
|
foreach (var item in items)
|
|
{
|
|
var start = current;
|
|
current += item.Count / (decimal)total * 100m;
|
|
segments.Add($"{item.Color} {start.ToString("0.##", System.Globalization.CultureInfo.InvariantCulture)}% {current.ToString("0.##", System.Globalization.CultureInfo.InvariantCulture)}%");
|
|
}
|
|
return $"background:conic-gradient({string.Join(", ", segments)})";
|
|
}
|
|
}
|
|
|
|
<style>
|
|
.hr-viz-panel {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.hr-print-header {
|
|
display: none;
|
|
}
|
|
|
|
.hr-print-toolbar {
|
|
width: 100%;
|
|
}
|
|
|
|
.hr-guide-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(150px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.hr-guide-step {
|
|
min-height: 175px;
|
|
padding: 16px;
|
|
border: 1px solid var(--mud-palette-lines-default);
|
|
border-top: 5px solid var(--mud-palette-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
background: var(--mud-palette-surface);
|
|
}
|
|
|
|
.hr-guide-step span {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
color: var(--mud-palette-primary-text);
|
|
background: var(--mud-palette-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hr-guide-step p {
|
|
margin: 0;
|
|
color: var(--mud-palette-text-secondary);
|
|
}
|
|
|
|
@@media (max-width: 1100px) {
|
|
.hr-guide-steps {
|
|
grid-template-columns: repeat(2, minmax(150px, 1fr));
|
|
}
|
|
}
|
|
|
|
@@media (max-width: 700px) {
|
|
.hr-guide-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.hr-gauge {
|
|
--gauge-color: #2e7d32;
|
|
--gauge-deg: 0deg;
|
|
position: relative;
|
|
height: 170px;
|
|
display: grid;
|
|
place-items: end center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hr-gauge-track {
|
|
width: 260px;
|
|
height: 130px;
|
|
border-radius: 260px 260px 0 0;
|
|
background: conic-gradient(from 270deg at 50% 100%, #2e7d32 0deg 72deg, #f9a825 72deg 108deg, #c62828 108deg 180deg, transparent 180deg 360deg);
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.hr-gauge-track::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 34px;
|
|
right: 34px;
|
|
bottom: 0;
|
|
height: 96px;
|
|
border-radius: 192px 192px 0 0;
|
|
background: var(--mud-palette-surface);
|
|
}
|
|
|
|
.hr-gauge-needle {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
width: 4px;
|
|
height: 112px;
|
|
background: #263238;
|
|
transform-origin: bottom center;
|
|
transform: rotate(calc(var(--gauge-deg) - 90deg));
|
|
border-radius: 4px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hr-gauge-center {
|
|
z-index: 3;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.hr-gauge-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--gauge-color);
|
|
}
|
|
|
|
.hr-gauge-caption,
|
|
.hr-gauge-scale {
|
|
color: var(--mud-palette-text-secondary);
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.hr-gauge-scale {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
max-width: 280px;
|
|
margin: 4px auto 0;
|
|
}
|
|
|
|
.hr-funnel-row,
|
|
.hr-bar-row,
|
|
.hr-legend-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(110px, 1fr) 2fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin: 9px 0;
|
|
}
|
|
|
|
.hr-funnel-bar-wrap,
|
|
.hr-bar-track {
|
|
background: rgba(0,0,0,.08);
|
|
border-radius: 4px;
|
|
height: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hr-funnel-bar,
|
|
.hr-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 8px;
|
|
min-width: 26px;
|
|
}
|
|
|
|
.hr-donut-wrap {
|
|
display: grid;
|
|
grid-template-columns: 150px 1fr;
|
|
gap: 18px;
|
|
align-items: center;
|
|
}
|
|
|
|
.hr-donut {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.hr-donut::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 34px;
|
|
border-radius: 50%;
|
|
background: var(--mud-palette-surface);
|
|
}
|
|
|
|
.hr-donut-hole {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
z-index: 2;
|
|
font-weight: 700;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.hr-legend-row {
|
|
grid-template-columns: auto 1fr auto;
|
|
margin: 6px 0;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.hr-legend-dot {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.hr-bars {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.hr-bar-row {
|
|
grid-template-columns: minmax(130px, 1.2fr) 2fr auto;
|
|
}
|
|
|
|
.hr-month-bars {
|
|
height: 240px;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
|
|
.hr-month {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto auto;
|
|
align-items: end;
|
|
text-align: center;
|
|
color: var(--mud-palette-text-secondary);
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.hr-month-bar {
|
|
width: 100%;
|
|
min-height: 2px;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.hr-month-value {
|
|
color: var(--mud-palette-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@@media (max-width: 700px) {
|
|
.hr-donut-wrap {
|
|
grid-template-columns: 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.hr-funnel-row,
|
|
.hr-bar-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
</style>
|
|
|