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

@model PowderCoating.Web.ViewModels.Reports.RevenueTrendsViewModel
@{ ViewData["Title"] = "Revenue Trends"; }

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

<div class="row g-3 mb-3">
    <div class="col-6 col-md-4">
        <div class="card text-bg-primary">
            <div class="card-body py-2">
                <div class="small">Total Revenue</div>
                <div class="fs-5 fw-bold">@Model.TotalRevenue.ToString("C")</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4">
        <div class="card border-secondary">
            <div class="card-body py-2 text-center">
                <div class="small text-muted">Completed Jobs</div>
                <div class="fs-5 fw-bold">@Model.TotalCompletedJobs</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4">
        <div class="card border-secondary">
            <div class="card-body py-2 text-center">
                <div class="small text-muted">Avg Job Value</div>
                <div class="fs-5 fw-bold">@Model.AverageJobValue.ToString("C")</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header fw-semibold">Revenue & Job Count by Month</div>
            <div class="card-body">
                <canvas id="revenueChart" height="160"></canvas>
            </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">Revenue by Customer Type</div>
            <div class="card-body">
                <canvas id="typeChart" height="220"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Revenue by Priority</div>
            <div class="card-body">
                <canvas id="priorityChart" height="220"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Top Customers</div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead class="table-light">
                        <tr><th>Customer</th><th class="text-end">Revenue</th><th class="text-end">Jobs</th></tr>
                    </thead>
                    <tbody>
                        @foreach (var c in Model.TopCustomers)
                        {
                            <tr>
                                <td class="small">@c.Name</td>
                                <td class="text-end fw-semibold">@c.Revenue.ToString("C")</td>
                                <td class="text-end text-muted">@c.JobCount</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script src="~/lib/chartjs/chart.umd.min.js"></script>
<script>
(function () {
    const labels  = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthLabels));
    const revenue = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthlyRevenue));
    const jobs    = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthlyJobCount));
    const avgOv   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.AverageOrderValueTrend));

    new Chart(document.getElementById('revenueChart'), {
        type: 'bar',
        data: {
            labels,
            datasets: [
                { label: 'Revenue ($)', data: revenue, backgroundColor: 'rgba(13,110,253,0.7)', yAxisID: 'y' },
                { label: 'Jobs', data: jobs, type: 'line', borderColor: '#ffc107', backgroundColor: 'transparent', yAxisID: 'y2', tension: 0.3 },
                { label: 'Avg Order ($)', data: avgOv, type: 'line', borderColor: '#20c997', backgroundColor: 'transparent', yAxisID: 'y', tension: 0.3, borderDash: [5,5] }
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'top' } },
            scales: {
                y:  { beginAtZero: true, position: 'left',  ticks: { callback: v => '$' + v.toLocaleString() } },
                y2: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false } }
            }
        }
    });

    const typeLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.RevenueByCustomerType.Keys));
    const typeData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.RevenueByCustomerType.Values));
    new Chart(document.getElementById('typeChart'), {
        type: 'pie',
        data: { labels: typeLabels, datasets: [{ data: typeData, backgroundColor: ['#0d6efd','#6f42c1','#20c997','#fd7e14'] }] },
        options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
    });

    const prioLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.RevenueByPriority.Keys));
    const prioData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.RevenueByPriority.Values));
    new Chart(document.getElementById('priorityChart'), {
        type: 'bar',
        data: { labels: prioLabels, datasets: [{ label: 'Revenue', data: prioData, backgroundColor: ['#6c757d','#0d6efd','#ffc107','#dc3545','#842029'] }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: v => '$' + v.toLocaleString() } } } }
    });
})();
</script>
}