lux/Lux.UI/Components/Compo/Stats/OfferStats.razor

<div class="row px-2">
    <div class="col-2 px-2">
        <div class="pb-2">
            <div class="card border-0 rounded-3 shadow">
                <div class="card-header bg-primary bg-gradient bg-opacity-25 p-2 rounded">
                    <div class="d-flex align-items-center justify-content-center">
                        <span class="fw-bold text-dark fs-5">Stato offerte</span>
                    </div>
                </div>
            </div>
        </div>
        <PieChart CanvasId="pieOfferCount" PieDict="@DatasetCount" DictColorFill="@FillColors" DictColorBorder="@BorderColors" Label="# Offerte" />
    </div>
    <div class="col-2 px-2">
        <div class="pb-2">
            <div class="card border-0 rounded-3 shadow">
                <div class="card-header bg-primary bg-gradient bg-opacity-25 p-2 rounded">
                    <div class="d-flex align-items-center justify-content-center">
                        <span class="fw-bold text-dark fs-5">Venditori</span>
                    </div>
                </div>
            </div>
        </div>
        <PieChart CanvasId="pieDealerCount" PieDict="@DatasetDealerCount" DictColorFill="@FillDealerColors" DictColorBorder="@BorderDealerColors" Label="# Offerte" />
    </div>
    <div class="col-8 ps-5">
        <div class="row">
            <div class="col-12">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center justify-content-center gap-2">
                            <span class="fw-bold text-dark fs-5 ps-1">Offerte confermate</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row pt-3">
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-coins fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-5 ps-1">Margine medio:</span>
                            <span class="text-primary fs-5 fw-semibold">@MargineMedio() %</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-coins fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-6 ps-1">Margine min:</span>
                            <span class="text-primary fs-6 fw-semibold">@MargineMin() %</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-coins fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-6 ps-1">Margine max:</span>
                            <span class="text-primary fs-6 fw-semibold">@MargineMax() %</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row pt-3">
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-home fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-5 ps-1">Finestre/Offerta medio:</span>
                            <span class="text-primary fs-5 fw-semibold">@NumFinestreMedio()</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-home fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-6 ps-1">N° Finestre min:</span>
                            <span class="text-primary fs-6 fw-semibold">@NumFinestreMin()</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 rounded-3 shadow">
                    <div class="card-header bg-primary bg-gradient bg-opacity-25 p-3 rounded">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-primary"><i class="fa-solid fa-home fa-2x"></i></span>
                            <span class="fw-bold text-dark fs-6 ps-1">N° Finestre max:</span>
                            <span class="text-primary fs-6 fw-semibold">@NumFinestreMax()</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>