eaae745c42
Refactors employee statistics view with comprehensive charts and tables Adds detailed revenue, utilization, and booking tracking components Introduces dynamic data loading and chart visualization for employee performance
85 lines
3.9 KiB
Text
85 lines
3.9 KiB
Text
@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 -->
|
|
<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>
|
|
</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>
|
|
</swp-detail-grid>
|