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

Update finance training and dashboard UI

Browse Source
This commit is contained in:
metacube
2026-06-11 11:32:35 +02:00
parent 2444a01fc7
commit f751295449
18 changed files with 938 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TrafagSalesExporter/Components/Pages/ExportDashboard.razor
+76 -73
View File
@@ -37,16 +37,26 @@
}
</MudText>
</MudStack>
<div class="dashboard-manometer" aria-label="Export activity manometer">
<div class="manometer-arc">
<span class="tick tick-0"></span>
<span class="tick tick-1"></span>
<span class="tick tick-2"></span>
<span class="tick tick-3"></span>
<span class="tick tick-4"></span>
<span class="needle"></span>
<span class="hub"></span>
</div>
<div class="dashboard-manometer">
<svg class="manometer-svg" viewBox="0 0 210 118" role="img" aria-label="Export activity manometer">
<path class="manometer-outer" d="M25 98 A80 80 0 0 1 185 98" />
<path class="manometer-inner" d="M47 98 A58 58 0 0 1 163 98" />
<line class="manometer-tick" x1="38" y1="98" x2="56" y2="98" />
<line class="manometer-tick" x1="61" y1="54" x2="74" y2="67" />
<line class="manometer-tick" x1="105" y1="34" x2="105" y2="52" />
<line class="manometer-tick" x1="149" y1="54" x2="136" y2="67" />
<line class="manometer-tick" x1="172" y1="98" x2="154" y2="98" />
<text class="manometer-label" x="43" y="89">0</text>
<text class="manometer-label" x="67" y="53">25</text>
<text class="manometer-label" x="105" y="28">50</text>
<text class="manometer-label" x="143" y="53">75</text>
<text class="manometer-label" x="167" y="89">100</text>
<text class="manometer-caption" x="105" y="113">EXPORT</text>
<g class="manometer-needle">
<line class="needle-line" x1="105" y1="98" x2="105" y2="38" />
</g>
<circle class="manometer-hub" cx="105" cy="98" r="11" />
</svg>
</div>
</div>
</MudPaper>
@@ -211,87 +221,80 @@
justify-self: end;
width: 210px;
height: 118px;
display: flex;
align-items: flex-end;
justify-content: center;
background: #fff;
border: 1px solid #111;
border-radius: 6px;
padding: 12px 14px 10px;
overflow: hidden;
}
.manometer-arc {
position: relative;
width: 170px;
height: 86px;
border: 8px solid #111;
border-bottom: 0;
border-radius: 170px 170px 0 0;
background: #fff;
overflow: visible;
.manometer-svg {
display: block;
width: 100%;
height: 100%;
}
.manometer-arc::before {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -1px;
height: 70px;
border: 2px solid #111;
border-bottom: 0;
border-radius: 140px 140px 0 0;
.manometer-outer,
.manometer-inner {
fill: none;
stroke: #111;
stroke-linecap: square;
}
.tick {
position: absolute;
left: 50%;
bottom: 0;
width: 3px;
height: 16px;
background: #111;
transform-origin: 50% 78px;
.manometer-outer {
stroke-width: 8;
}
.tick-0 { transform: translateX(-50%) rotate(-70deg); }
.tick-1 { transform: translateX(-50%) rotate(-35deg); }
.tick-2 { transform: translateX(-50%) rotate(0deg); }
.tick-3 { transform: translateX(-50%) rotate(35deg); }
.tick-4 { transform: translateX(-50%) rotate(70deg); }
.manometer-inner {
stroke-width: 2;
}
.needle {
position: absolute;
left: 50%;
bottom: 0;
width: 4px;
height: 72px;
background: #111;
border-radius: 4px;
transform-origin: 50% 100%;
.manometer-tick,
.needle-line {
stroke: #111;
stroke-width: 3;
stroke-linecap: square;
}
.manometer-needle {
transform-box: view-box;
transform-origin: 105px 98px;
animation: manometer-sweep 5.8s infinite cubic-bezier(.45, 0, .25, 1);
}
.hub {
position: absolute;
left: 50%;
bottom: -8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #111;
transform: translateX(-50%);
.manometer-hub {
fill: #111;
}
.manometer-label,
.manometer-caption {
fill: #111;
font-family: Arial, sans-serif;
text-anchor: middle;
dominant-baseline: middle;
user-select: none;
}
.manometer-label {
font-size: 10px;
font-weight: 600;
}
.manometer-caption {
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
}
@@keyframes manometer-sweep {
0% { transform: translateX(-50%) rotate(-52deg); }
11% { transform: translateX(-50%) rotate(18deg); }
19% { transform: translateX(-50%) rotate(-8deg); }
33% { transform: translateX(-50%) rotate(63deg); }
48% { transform: translateX(-50%) rotate(4deg); }
61% { transform: translateX(-50%) rotate(38deg); }
74% { transform: translateX(-50%) rotate(-41deg); }
88% { transform: translateX(-50%) rotate(55deg); }
100% { transform: translateX(-50%) rotate(-52deg); }
0% { transform: rotate(-52deg); }
11% { transform: rotate(18deg); }
19% { transform: rotate(-8deg); }
33% { transform: rotate(63deg); }
48% { transform: rotate(4deg); }
61% { transform: rotate(38deg); }
74% { transform: rotate(-41deg); }
88% { transform: rotate(55deg); }
100% { transform: rotate(-52deg); }
}
@@media (max-width: 900px) {
TrafagSalesExporter/Components/Pages/ManagementCockpit.razor
+11 -13
View File
@@ -51,7 +51,7 @@
@if (_financeResult is not null)
{
<MudTabs Elevation="1" Rounded="false" PanelClass="pt-4" @bind-ActivePanelIndex="_activeOverviewTabIndex">
<MudTabs Class="management-side-nav-tabs" Elevation="0" Rounded="false" PanelClass="pt-0" @bind-ActivePanelIndex="_activeOverviewTabIndex">
<MudTabPanel Text="@T("Schnelluebersicht", "Quick overview")" Icon="@Icons.Material.Filled.Speed">
<MudGrid Class="mb-4">
<MudItem xs="12" sm="6" md="3">
@@ -84,9 +84,7 @@
</MudItem>
</MudGrid>
<MudTabs Elevation="0" Rounded="false" PanelClass="pt-4">
<MudTabPanel Text="@T("Freigabe", "Approval")" Icon="@Icons.Material.Filled.FactCheck">
<MudPaper Class="pa-4" Elevation="1">
<MudPaper Class="pa-4 mb-4" Elevation="1">
<MudText Typo="Typo.h6" Class="mb-2">@T("Finance-Freigabe je Land", "Finance approval by country")</MudText>
<MudTable Items="_financeResult.CountryRows" Dense Hover Striped>
<HeaderContent>
@@ -109,9 +107,7 @@
</RowTemplate>
</MudTable>
</MudPaper>
</MudTabPanel>
<MudTabPanel Text="@T("Datenstand", "Data status")" Icon="@Icons.Material.Filled.Storage">
<MudPaper Class="pa-4" Elevation="1">
<MudPaper Class="pa-4 mb-4" Elevation="1">
<MudText Typo="Typo.h6" Class="mb-2">@T("Letzter Datenstand je Standort", "Latest data status by site")</MudText>
<MudTable Items="_financeResult.DataStatusRows" Dense Hover Striped>
<HeaderContent>
@@ -139,8 +135,6 @@
</RowTemplate>
</MudTable>
</MudPaper>
</MudTabPanel>
<MudTabPanel Text="@T("Sparten", "Divisions")" Icon="@Icons.Material.Filled.AccountTree">
<MudPaper Class="pa-4" Elevation="1">
<MudText Typo="Typo.h6" Class="mb-2">@T("Sparten-Abdeckung nach Land", "Division coverage by country")</MudText>
<MudTable Items="_financeResult.ProductFinanceCountryRows" Dense Hover Striped>
@@ -162,12 +156,10 @@
</RowTemplate>
</MudTable>
</MudPaper>
</MudTabPanel>
</MudTabs>
</MudTabPanel>
<MudTabPanel Text="@T("Experten", "Experts")" Icon="@Icons.Material.Filled.Tune">
<MudTabs Elevation="0" Rounded="false" PanelClass="pt-4" @bind-ActivePanelIndex="_activeFinanceTabIndex">
<MudTabs Class="management-side-nav-tabs" Elevation="0" Rounded="false" PanelClass="pt-0" @bind-ActivePanelIndex="_activeFinanceTabIndex">
<MudTabPanel Text="@T("Finance Summary", "Finance summary")" Icon="@Icons.Material.Filled.Dashboard">
<MudGrid Class="mb-4">
<MudItem xs="12" sm="6" md="3">
@@ -409,7 +401,7 @@
</MudPaper>
</MudTabPanel>
<MudTabPanel Text="@T("Spartenanalyse", "Division analysis")" Icon="@Icons.Material.Filled.AccountTree">
<MudTabs Elevation="0" Rounded="false" PanelClass="pt-4" @bind-ActivePanelIndex="_activeDivisionTabIndex">
<MudTabs Class="management-side-nav-tabs" Elevation="0" Rounded="false" PanelClass="pt-0" @bind-ActivePanelIndex="_activeDivisionTabIndex">
<MudTabPanel Text="@T("Finanzanalyse", "Finance analysis")" Icon="@Icons.Material.Filled.PieChart">
<MudGrid Class="mb-4">
<MudItem xs="12" sm="6" md="3">
@@ -1108,6 +1100,12 @@
</MudTabs>
}
<style>
.management-side-nav-tabs .mud-tabs-toolbar {
display: none;
}
</style>
@code {
[Parameter]
[SupplyParameterFromQuery(Name = "section")]