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

@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailStatsViewModel

<swp-detail-grid>
    <swp-card>
        <swp-card-header>
            <swp-card-title>@Model.LabelPerformance</swp-card-title>
        </swp-card-header>
        <swp-stats-row>
            <swp-stat-card class="teal">
                <swp-stat-value>@Model.BookingsThisYear</swp-stat-value>
                <swp-stat-label>@Model.LabelBookingsThisYear</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card class="purple">
                <swp-stat-value>@Model.RevenueThisYear</swp-stat-value>
                <swp-stat-label>@Model.LabelRevenueThisYear</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card class="amber">
                <swp-stat-value>@Model.Rating</swp-stat-value>
                <swp-stat-label>@Model.LabelAvgRating</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>87%</swp-stat-value>
                <swp-stat-label>@Model.LabelOccupancy</swp-stat-label>
            </swp-stat-card>
        </swp-stats-row>
    </swp-card>

    <swp-card class="stats-bookings">
        <swp-card-header>
            <swp-card-title>@Model.LabelCompletedBookings</swp-card-title>
        </swp-card-header>
        <swp-data-table>
            <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>
            @foreach (var booking in Model.CompletedBookings)
            {
                <swp-data-table-row>
                    <swp-data-table-cell>@booking.Date</swp-data-table-cell>
                    <swp-data-table-cell>@booking.Time</swp-data-table-cell>
                    <swp-data-table-cell>@booking.Customer</swp-data-table-cell>
                    <swp-data-table-cell>@booking.Services</swp-data-table-cell>
                    <swp-data-table-cell>@booking.Duration</swp-data-table-cell>
                    <swp-data-table-cell>@booking.Amount</swp-data-table-cell>
                    <swp-data-table-cell>
                        <swp-status-badge class="@booking.StatusClass">@booking.Status</swp-status-badge>
                    </swp-data-table-cell>
                </swp-data-table-row>
            }
        </swp-data-table>
    </swp-card>
</swp-detail-grid>