You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.7 KiB
59 lines
2.7 KiB
@using Biskilog_Accounting.Shared.CustomModels;
|
|
@using Biskilog_Accounting.Shared.Interfaces;
|
|
@using Microsoft.Fast.Components.FluentUI
|
|
@inject ICalculator m_calculator
|
|
|
|
@if (!IsLoading)
|
|
{
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex align-items-center justify-content-between">
|
|
<h5 class="card-title m-0 me-2">Top 50 most purchased items</h5>
|
|
</div>
|
|
<div class="card-body" style="padding:5px !important;">
|
|
<RadzenDataGrid Data="@MostPurchasedItems" TItem="MostPurchasedItem" AllowPaging="true" AllowSorting="true" PageSize="5" GridLines="DataGridGridLines.Horizontal">
|
|
<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
|
|
{
|
|
<FluentCard class="card-padding">
|
|
<FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="SkeletonShape.Circle" Shimmer="true"></FluentSkeleton>
|
|
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
|
|
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
|
|
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
|
|
<FluentSkeleton style="
|
|
border-radius: 4px;
|
|
width: 75px;
|
|
height: 30px;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
"
|
|
Shape="SkeletonShape.Rect"
|
|
Shimmer="true"></FluentSkeleton>
|
|
</FluentCard>
|
|
}
|
|
<style>
|
|
.rz-paginator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|
|
|