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.
39 lines
1.9 KiB
39 lines
1.9 KiB
@using Biskilog_Accounting.Shared.Interfaces
|
|
@using Microsoft.Fast.Components.FluentUI
|
|
@inject ICalculator m_calculator
|
|
|
|
@if (!IsLoading)
|
|
{
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card-title d-flex align-items-start justify-content-between">
|
|
<div class="avatar flex-shrink-0">
|
|
<img src="@Icon"
|
|
alt="chart success"
|
|
class="rounded" />
|
|
</div>
|
|
</div>
|
|
<span class="fw-semibold d-block mb-1">@Title</span>
|
|
<h6 class="card-title mb-2">@(m_calculator.FormatMoneyWithCurrency(Value))</h6>
|
|
<small class="@(Percentage > 0 ? "text-success" : Percentage == 0 ? "bx-forward-arrow-alt" : "text-danger") fw-semibold"><i class="bx @(Percentage > 0 ? "bx-up-arrow-alt" : Percentage == 0 ? "bx-forward-arrow-alt" : "bx-down-arrow-alt")"></i> @(Percentage.ToString("0.00")) %</small>
|
|
</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>
|
|
}
|