admin/Ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish purchasing cockpit visuals

Browse Source
This commit is contained in:
metacube
2026-06-05 10:17:25 +02:00
parent bf20b3a240
commit 989ff66102
2 changed files with 508 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TrafagSalesExporter/Components/Pages/PurchasingSection.razor
+71 -5
View File
@@ -1,9 +1,14 @@
@inject TrafagSalesExporter.Services.IUiTextService UiText
@using TrafagSalesExporter.Models
<MudPaper Class="pa-3" Outlined="true">
<MudText Typo="Typo.h6">@T(TitleDe, TitleEn)</MudText>
<MudText Typo="Typo.body2" Class="mb-3 purchasing-section-muted">@T(DescriptionDe, DescriptionEn)</MudText>
<MudPaper Class="pa-3 purchasing-section-shell" Outlined="true">
<div class="purchasing-section-head">
<div>
<MudText Typo="Typo.h6">@T(TitleDe, TitleEn)</MudText>
<MudText Typo="Typo.body2" Class="purchasing-section-muted">@T(DescriptionDe, DescriptionEn)</MudText>
</div>
<MudChip T="string" Color="@ResolveSectionColor()" Variant="Variant.Outlined" Size="Size.Small">@ResolveSectionStatus()</MudChip>
</div>
<MudGrid Spacing="2" Class="mb-3">
@foreach (var kpi in Kpis)
@@ -21,7 +26,10 @@
<MudGrid Spacing="2" Class="mb-3">
<MudItem xs="12" lg="7">
<MudPaper Class="pa-3 purchasing-section-panel" Outlined="true">
<MudText Typo="Typo.subtitle1" Class="mb-2">@T(ChartTitleDe, ChartTitleEn)</MudText>
<div class="purchasing-section-panel-head">
<MudText Typo="Typo.subtitle1">@T(ChartTitleDe, ChartTitleEn)</MudText>
<MudIcon Icon="@Icons.Material.Filled.StackedBarChart" Color="Color.Info" Size="Size.Small" />
</div>
<div class="purchasing-bars">
@foreach (var item in ChartRows)
{
@@ -38,7 +46,10 @@
</MudItem>
<MudItem xs="12" lg="5">
<MudPaper Class="pa-3 purchasing-section-panel" Outlined="true">
<MudText Typo="Typo.subtitle1" Class="mb-2">@T("Datenstatus", "Data status")</MudText>
<div class="purchasing-section-panel-head">
<MudText Typo="Typo.subtitle1">@T("Datenstatus", "Data status")</MudText>
<MudIcon Icon="@Icons.Material.Filled.Route" Color="Color.Info" Size="Size.Small" />
</div>
@foreach (var status in StatusRows)
{
<div class="purchasing-status-row">
@@ -93,6 +104,20 @@
: source.Equals("Wartet auf SAP", StringComparison.OrdinalIgnoreCase)
? Color.Warning
: Color.Primary;
private Color ResolveSectionColor()
=> DetailRows.Any(row => row.Source.Equals("SAP live", StringComparison.OrdinalIgnoreCase))
? Color.Success
: DetailRows.Any(row => row.Source.Equals("Simulation", StringComparison.OrdinalIgnoreCase))
? Color.Info
: Color.Warning;
private string ResolveSectionStatus()
=> DetailRows.Any(row => row.Source.Equals("SAP live", StringComparison.OrdinalIgnoreCase))
? T("Live + Analyse", "Live + analysis")
: DetailRows.Any(row => row.Source.Equals("Simulation", StringComparison.OrdinalIgnoreCase))
? T("Simulation aktiv", "Simulation active")
: T("Wartet auf SAP", "Waiting for SAP");
}
<style>
@@ -100,12 +125,39 @@
color: var(--mud-palette-text-secondary);
}
.purchasing-section-shell {
border-radius: 8px;
background:
linear-gradient(180deg, rgba(21,101,192,.045), rgba(21,101,192,0) 210px),
var(--mud-palette-surface);
}
.purchasing-section-head,
.purchasing-section-panel-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 14px;
}
.purchasing-section-head {
margin-bottom: 14px;
}
.purchasing-section-panel-head {
align-items: center;
margin-bottom: 12px;
}
.purchasing-section-kpi {
min-height: 104px;
border-top: 4px solid var(--mud-palette-primary);
background: var(--mud-palette-surface);
}
.purchasing-section-panel {
min-height: 240px;
background: rgba(255,255,255,.02);
}
.purchasing-bars {
@@ -142,10 +194,24 @@
height: 100%;
border-radius: 4px;
min-width: 26px;
box-shadow: inset 0 -8px 16px rgba(0,0,0,.12);
}
.purchasing-bar-value {
font-weight: 700;
text-align: right;
}
@@media (max-width: 760px) {
.purchasing-bar-row,
.purchasing-status-row,
.purchasing-section-head {
grid-template-columns: 1fr;
}
.purchasing-section-head,
.purchasing-section-panel-head {
display: grid;
}
}
</style>