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.
71 lines
3.4 KiB
71 lines
3.4 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" style="min-height:480px;">
|
|
<div class="row row-bordered g-0">
|
|
<div class="col-md-7">
|
|
<h5 class="card-header m-0 me-2 pb-3">@Title</h5>
|
|
<ApexChart TItem="WeeklySaleItem" Options=m_options>
|
|
|
|
<ApexPointSeries TItem="WeeklySaleItem"
|
|
Items="@Series"
|
|
Name="Sales"
|
|
YValue="@(e => e.Total)"
|
|
XValue="@(e => e.Date.ToString("dd MMM"))"
|
|
SeriesType="SeriesType.Bar" />
|
|
</ApexChart>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="text-center fw-semibold pt-3 mb-2">@SubTitle</div>
|
|
<ApexChart TItem="WeeklySaleItem" Options="options">
|
|
<ApexPointSeries TItem="WeeklySaleItem" Items="@Series" Name="Sales" YValue="@(e => e.Total)" XValue="@(e => e.Date.ToString("dd MMM"))"
|
|
SeriesType="SeriesType.Area" />
|
|
</ApexChart>
|
|
<div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
|
|
<div class="d-flex">
|
|
<div class="me-2">
|
|
<span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<small>Best Day</small>
|
|
<small class="mb-0">@m_bestDay</small>
|
|
<small class="mb-0">@m_bestSales</small>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="me-2">
|
|
<span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<small>Worst Day</small>
|
|
<small class="mb-0">@m_worstDay</small>
|
|
<small class="mb-0">@m_worstSales</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
}
|