phronCare/phronCare.UIBlazor/Pages/Sales/Quotes/QuoteDashboard.razor

@page "/quotes/dashboard"
@using PSC.Blazor.Components.Chartjs
@using PSC.Blazor.Components.Chartjs.Models.Pie
@using PSC.Blazor.Components.Chartjs.Models.Bar
@using PSC.Blazor.Components.Chartjs.Models.Line
@using PSC.Blazor.Components.Chartjs.Models.Common
@inject NavigationManager Navigation
<div class="container py-4" style="zoom:0.8;">

    <!-- Header visual -->
    <div class="bg-dark text-white p-4 rounded-3 mb-4 shadow-sm">
        <h2 class="text-center m-0">Dashboard Operativo de Presupuestos</h2>
    </div>

    <!-- KPI Cards estilo limpio -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="d-flex align-items-center shadow-sm p-3 rounded border bg-white">
                <i class="fas fa-calculator fa-2x text-success me-3"></i>
                <div>
                    <div class="fw-bold fs-5">120</div>
                    <div class="text-muted small">Total Quotes</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="d-flex align-items-center shadow-sm p-3 rounded border bg-white">
                <i class="fas fa-check-circle fa-2x text-success me-3"></i>
                <div>
                    <div class="fw-bold fs-5">65%</div>
                    <div class="text-muted small">Approval Rate</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="d-flex align-items-center shadow-sm p-3 rounded border bg-white">
                <i class="fas fa-dollar-sign fa-2x text-warning me-3"></i>
                <div>
                    <div class="fw-bold fs-5">$150,000</div>
                    <div class="text-muted small">Total Quoted</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="d-flex align-items-center shadow-sm p-3 rounded border bg-white">
                <i class="fas fa-chart-line fa-2x text-info me-3"></i>
                <div>
                    <div class="fw-bold fs-5">$2,500</div>
                    <div class="text-muted small">Average Quote</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Botonera debajo del gráfico -->
    <div class="d-flex justify-content-center flex-wrap gap-3 mb-4">
        <button class="quote-action-button" @onclick="@(() => Navigation.NavigateTo("/quotes"))">
            <i class="fas fa-search"></i>
            <span>Buscar</span>
        </button>

        <button class="quote-action-button" @onclick="@(() => Navigation.NavigateTo("/quotes/create"))">
            <i class="fas fa-plus"></i>
            <span>Nuevo</span>
        </button>

        <button class="quote-action-button success" disabled @onclick="@(() => Navigation.NavigateTo("/quotes/authorize"))">
            <i class="fas fa-check-circle"></i>
            <span>Autorizar</span>
        </button>
    </div>

    <!-- Charts -->
    <div class="row g-4">
        <div class="col-md-6">
            <div class="card p-3 shadow-sm rounded-3">
                <h6 class="text-center">Quotes by Status</h6>
                <Chart Config="@_pieChartConfig" />
            </div>
        </div>

<div class="col-md-6">
    <div class="card p-3 shadow-sm rounded-3">
        <h6 class="text-center">Top Productos Presupuestados</h6>
        <Chart Config="@_barChartConfig" />
    </div>
</div>

        <div class="col-12">
            <div class="card p-3 shadow-sm rounded-3">
                <h6 class="text-center">Quoted Amount Over Time</h6>
                <Chart Config="@_lineChartConfig" />
            </div>
        </div>
    </div>
</div>

@code {
    private PieChartConfig _pieChartConfig;
    private BarChartConfig _barChartConfig;
    private LineChartConfig _lineChartConfig;

    protected override void OnInitialized()
    {
        InitPieChart();
        InitBarChart();
        InitLineChart();
    }

    private void InitPieChart()
    {
        _pieChartConfig = new PieChartConfig
        {
            Options = new PieOptions
            {
                Plugins = new Plugins
                {
                    Legend = new Legend
                    {
                        Display = true,
                        Position = LegendPosition.Bottom
                    }
                }
            },
            Data = new PieData
            {
                Labels = new List<string> { "Aprobado", "Pendiente", "Rechazado" },
                Datasets = new List<PieDataset>
                {
                    new PieDataset
                    {
                        Data = new List<decimal?> { 60, 25, 15 },
                        BackgroundColor = new List<string> { "#4CAF50", "#FFC107", "#F44336" }
                    }
                }
            }
        };
    }

    private void InitBarChart()
    {
        _barChartConfig = new BarChartConfig
        {
            Options = new Options
            {
                Plugins = new Plugins { Legend = new Legend { Display = false } },
                Scales = new Dictionary<string, Axis>
                {
                    ["x"] = new Axis { Title = new AxesTitle { Display = true, Text = "Producto" } },
                    ["y"] = new Axis { Title = new AxesTitle { Display = true, Text = "Cantidad" } }
                }
            },
            Data = new BarData
            {
                Labels = new List<string> { "Prod A", "Prod B", "Prod C", "Prod D", "Prod E" },
                Datasets = new List<BarDataset>
                {
                    new BarDataset
                    {
                        Data = new List<decimal?> { 10, 8, 6, 5, 4 },
                        BackgroundColor = Enumerable.Repeat("#2196F3", 5).ToList()
                    }
                }
            }
        };
    }

    private void InitLineChart()
    {
        _lineChartConfig = new LineChartConfig
        {
            Options = new Options
            {
                Plugins = new Plugins { Legend = new Legend { Display = true } },
                Scales = new Dictionary<string, Axis>
                {
                    ["x"] = new Axis { Title = new AxesTitle { Display = true, Text = "Mes" } },
                    ["y"] = new Axis { Title = new AxesTitle { Display = true, Text = "Monto ($)" } }
                }
            },
            Data = new LineData
            {
                Labels = new List<string> { "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio" },
                Datasets = new List<LineDataset>
                {
                    new LineDataset
                    {
                        Label = "Total Presupuestado",
                        Data = new List<decimal?> { 10000, 12000, 13000, 14000, 16000, 20000 },
                        Fill = false,
                        BorderColor = "#4CAF50",
                        Tension = 0.3m
                    }
                }
            }
        };
    }
}