Biskilog_Accounting/Client/Pages/Dashboard/Elements/MostPurchasedElement.razor

@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@inject ICalculator m_calculator

@if (!IsLoading)
{
    <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
                <h5 class="text-nowrap mb-2">Top 50 most purchased items</h5>
            </div>
        </div>
        <div class="card-body" style="padding:5px !important;">
            <RadzenDataGrid Data="@MostPurchasedItems" TItem="MostPurchasedItem" AllowPaging="true" AllowSorting="true" PageSize="5">
                <Columns>
                    <RadzenDataGridColumn TItem="MostPurchasedItem" Property="Revenue" Title="Product">
                        <Template Context="detail">
                            <RadzenRow>
                                <RadzenColumn>
                                    <span> <b>@detail.ProductName</b></span> <br />
                                    <span> @detail.ProductId</span>
                                </RadzenColumn>
                                <RadzenColumn style="justify-content:end !important;">
                                    <span><b>Revenue:</b> @m_calculator.FormatMoneyWithCurrencyKilo((double)detail.Revenue)</span> <br />
                                    <span><b>Quantity Sold:</b> @detail.NbrTimesSold</span>
                                </RadzenColumn>
                            </RadzenRow>
                        </Template>
                    </RadzenDataGridColumn>
                </Columns>
            </RadzenDataGrid>
        </div>
    </div>
}
else
{
    <div class="card h-100">
        <div class="card-body" style="padding:5px !important;">
        </div>
    </div>
}
<style>
    .rz-datatable-thead th, .rz-grid-table thead th {
        background-color: #a4d5d3;
        padding: 0;
        color: white;
    }

    .rz-paginator {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
</style>