PlanTempusApp/PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml

86 lines
3.9 KiB
Text
Raw Permalink Normal View History

2026-01-12 22:10:57 +01:00
@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailStatsViewModel
<swp-detail-grid class="stats-layout">
<!-- Stats Row (4 cards) -->
<swp-stats-row class="cols-4 full-width">
<swp-stat-card class="highlight">
<swp-stat-value id="statBookingsMonth">42</swp-stat-value>
<swp-stat-label>Bookinger denne måned</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value id="statBookedValue">30.825 kr</swp-stat-value>
<swp-stat-label>Værdi af bookede services</swp-stat-label>
<swp-stat-subtitle id="statBookedSubtitle">Baseret på 49 bookinger</swp-stat-subtitle>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value id="statRevenueMonth">28.450 kr</swp-stat-value>
<swp-stat-label>Omsætning denne måned</swp-stat-label>
</swp-stat-card>
<swp-stat-card>
<swp-stat-value id="statReturnCustomers">68%</swp-stat-value>
<swp-stat-label>Gengangere</swp-stat-label>
</swp-stat-card>
</swp-stats-row>
<!-- Revenue & Utilization Chart (dual-axis: bars + line) -->
<swp-card class="full-width">
<swp-card-header>
<swp-card-title>Omsætning & Belægningsgrad</swp-card-title>
<span class="chart-hint">3 måneder bagud · 3 måneder frem</span>
</swp-card-header>
<swp-chart-container id="employeeRevenueUtilizationChart" style="height: 300px;"></swp-chart-container>
</swp-card>
<!-- Two column layout: Revenue chart + Recent bookings -->
2026-01-12 22:10:57 +01:00
<swp-card>
<swp-card-header>
<swp-card-title>Omsætning (sidste 6 mdr)</swp-card-title>
<swp-chart-legend>
<swp-chart-legend-item>
<swp-chart-legend-dot class="services"></swp-chart-legend-dot>
<span>Services</span>
</swp-chart-legend-item>
<swp-chart-legend-item>
<swp-chart-legend-dot class="products"></swp-chart-legend-dot>
<span>Produkter</span>
</swp-chart-legend-item>
</swp-chart-legend>
</swp-card-header>
<swp-chart-container id="employeeRevenueChart" style="height: 220px;"></swp-chart-container>
</swp-card>
<swp-card class="recent-bookings">
<swp-card-header>
<swp-card-title>Seneste bookinger</swp-card-title>
</swp-card-header>
<swp-data-table id="recentBookingsTable">
<swp-data-table-header>
<swp-data-table-cell>Kunde</swp-data-table-cell>
<swp-data-table-cell>Service</swp-data-table-cell>
<swp-data-table-cell>Dato</swp-data-table-cell>
<swp-data-table-cell>Beløb</swp-data-table-cell>
</swp-data-table-header>
<!-- Rows populated by JavaScript -->
</swp-data-table>
2026-01-12 22:10:57 +01:00
</swp-card>
<!-- Completed Bookings Table -->
<swp-card class="stats-bookings full-width">
<swp-card-header>
<swp-card-title>@Model.LabelCompletedBookings</swp-card-title>
</swp-card-header>
<swp-data-table id="completedBookingsTable">
<swp-data-table-header>
<swp-data-table-cell>@Model.LabelDate</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelTime</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelCustomer</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelServices</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelDuration</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelAmount</swp-data-table-cell>
<swp-data-table-cell>@Model.LabelStatus</swp-data-table-cell>
</swp-data-table-header>
<!-- Rows populated by JavaScript -->
</swp-data-table>
</swp-card>
2026-01-12 22:10:57 +01:00
</swp-detail-grid>