PowderCoatingLogix/src/PowderCoating.Web/Views/Reports/OperationsReport.cshtml

@model PowderCoating.Web.ViewModels.Reports.OperationsReportViewModel
@{ ViewData["Title"] = "Operations Report"; }

<partial name="_ReportHeader" model="Model" />

<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="card text-bg-primary">
            <div class="card-body py-2">
                <div class="small">Active Jobs</div>
                <div class="fs-5 fw-bold">@Model.ActiveJobsCount</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-info">
            <div class="card-body py-2">
                <div class="small">Appointments (period)</div>
                <div class="fs-5 fw-bold">@Model.TotalAppointments</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-success">
            <div class="card-body py-2">
                <div class="small">Appt Completion Rate</div>
                <div class="fs-5 fw-bold">@Model.AppointmentCompletionRate.ToString("N1")%</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-warning">
            <div class="card-body py-2">
                <div class="small">Low Stock Items</div>
                <div class="fs-5 fw-bold">@Model.LowStockItems.Count</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Jobs by Status</div>
            <div class="card-body">
                <canvas id="statusChart" height="250"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Active Jobs by Priority</div>
            <div class="card-body">
                <canvas id="priorityChart" height="250"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Appointments by Day of Week</div>
            <div class="card-body">
                <canvas id="apptDayChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

@if (Model.WorkerStats.Any())
{
    <div class="card mb-3">
        <div class="card-header fw-semibold">Worker Performance</div>
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light">
                    <tr><th>Worker</th><th>Role</th><th class="text-end">Jobs Assigned</th><th class="text-end">Jobs Completed</th><th class="text-end">Completion Rate</th><th class="text-end">Appts</th></tr>
                </thead>
                <tbody>
                    @foreach (var w in Model.WorkerStats)
                    {
                        <tr>
                            <td>@w.Name</td>
                            <td class="text-muted small">@w.Role</td>
                            <td class="text-end">@w.JobsAssigned</td>
                            <td class="text-end">@w.JobsCompleted</td>
                            <td class="text-end">
                                <div class="d-flex align-items-center justify-content-end gap-2">
                                    <div class="progress flex-grow-1" style="height:6px;max-width:80px">
                                        <div class="progress-bar bg-success" style="width:@w.CompletionRate%"></div>
                                    </div>
                                    @w.CompletionRate.ToString("N0")%
                                </div>
                            </td>
                            <td class="text-end">@w.AppointmentsAssigned</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
}

@if (Model.LowStockItems.Any())
{
    <div class="card">
        <div class="card-header fw-semibold d-flex justify-content-between">
            <span>Low Stock Alert</span>
            <a asp-controller="Inventory" asp-action="Index" class="btn btn-sm btn-outline-warning">View Inventory</a>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light">
                    <tr><th>Item</th><th>Color</th><th class="text-end">On Hand</th><th class="text-end">Reorder Point</th><th>Unit</th><th>Status</th></tr>
                </thead>
                <tbody>
                    @foreach (var i in Model.LowStockItems)
                    {
                        <tr class="@(i.QuantityOnHand == 0 ? "table-danger" : "table-warning")">
                            <td>@i.Name</td>
                            <td>@Html.Raw(i.ColorName ?? "&mdash;")</td>
                            <td class="text-end fw-semibold text-danger">@i.QuantityOnHand.ToString("N1")</td>
                            <td class="text-end">@i.ReorderPoint.ToString("N1")</td>
                            <td class="text-muted small">@i.UnitOfMeasure</td>
                            <td>
                                @if (i.QuantityOnHand == 0)
                                {
                                    <span class="badge bg-dark">Out of Stock</span>
                                }
                                else
                                {
                                    <span class="badge bg-warning text-dark">Low Stock</span>
                                }
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
}

@section Scripts {
<script src="~/lib/chartjs/chart.umd.min.js"></script>
<script>
(function () {
    const palette = ['#0d6efd','#6610f2','#6f42c1','#d63384','#dc3545','#fd7e14','#ffc107','#198754','#20c997','#0dcaf0','#adb5bd','#343a40','#6c757d','#495057','#212529','#ced4da'];

    const statusLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.JobsByStatus.Keys));
    const statusData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.JobsByStatus.Values));
    new Chart(document.getElementById('statusChart'), {
        type: 'doughnut',
        data: { labels: statusLabels, datasets: [{ data: statusData, backgroundColor: palette }] },
        options: { responsive: true, plugins: { legend: { position: 'right', labels: { font: { size: 10 } } } } }
    });

    const prioLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.ActiveJobsByPriority.Keys));
    const prioData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.ActiveJobsByPriority.Values));
    new Chart(document.getElementById('priorityChart'), {
        type: 'bar',
        data: { labels: prioLabels, datasets: [{ label: 'Jobs', data: prioData, backgroundColor: ['#6c757d','#0d6efd','#ffc107','#dc3545','#842029'] }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });

    const dayLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.AppointmentsByDayOfWeek.Keys));
    const dayData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.AppointmentsByDayOfWeek.Values));
    new Chart(document.getElementById('apptDayChart'), {
        type: 'bar',
        data: { labels: dayLabels, datasets: [{ label: 'Appointments', data: dayData, backgroundColor: 'rgba(13,202,240,0.7)' }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });
})();
</script>
}