mirror of
https://github.com/Sea-Haven-Industries/shoc-backend.git
synced 2026-09-30 10:43:13 +00:00
285 lines
12 KiB
Text
285 lines
12 KiB
Text
@page "/reporting"
|
|
<Header pagename="Reporting" icon='<i class="material-icons-round opacity-10">account_box</i>'></Header>
|
|
<style>
|
|
.rz-progressbar-circular-md {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="row mt-2">
|
|
<div class="col-md-6 col-lg-6 position-relative mt-3 mx-3" style="background-image:url('./assets/img/bg.png'); background-size: cover; background-repeat:no-repeat; background-position: right;height: 178px; width:568px; border-radius: 19px;">
|
|
<div class="row px-2 py-4">
|
|
<div class="col-md-9 col-lg-9">
|
|
<h2 class="d-block py-4 fw-bold ps-5">
|
|
Reports
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-lg-3 px-2">
|
|
<div class="card mt-3">
|
|
<div class="card-header p-2 pt-2">
|
|
<div class="d-block d-md-flex">
|
|
<div class="me-auto">
|
|
<h6 class="mb-0" style="color: #919EAB !important">Created Workorders</h6>
|
|
<p class="mb-0">@DashboardViewModel.Total</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-2 pt-0">
|
|
<div class="chart">
|
|
<canvas id="lineChart1" style="width: 100%;" width="300" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-lg-3">
|
|
<div class="card mt-3">
|
|
<div class="card-header p-2 pt-2">
|
|
<div class="d-block d-md-flex">
|
|
<div class="me-auto">
|
|
<h6 class="mb-0" style="color: #919EAB !important">Completed Workorders</h6>
|
|
<p class="mb-0">@DashboardViewModel.Completed</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-2 pt-0">
|
|
<div class="chart">
|
|
<canvas id="lineChart2" style="width: 100%;" width="300" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 pt-3">
|
|
<div class="card">
|
|
<div class="d-flex px-5 py-3">
|
|
<div class="d-flex w-100 align-items-center justify-content-center me-3">
|
|
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Success" @bind-Value="@DashboardViewModel.Sev1Per" />
|
|
<h6 class="mt-2 text-center w-50">
|
|
<span>@DashboardViewModel.Sev1</span>
|
|
<span class="d-block text-body text-sm">Sev 1</span>
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="d-flex w-100 align-items-center justify-content-center me-3">
|
|
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" @bind-Value="@DashboardViewModel.Sev2Per" />
|
|
<h6 class="mt-2 text-center w-50">
|
|
<span>@DashboardViewModel.Sev2</span>
|
|
<span class="d-block text-body text-sm">Sev 2</span>
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="d-flex w-100 align-items-center justify-content-center me-3">
|
|
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Info" @bind-Value="@DashboardViewModel.Sev3Per" />
|
|
<h6 class="mt-2 text-center w-50">
|
|
<span>@DashboardViewModel.Sev3</span>
|
|
<span class="d-block text-body text-sm">Sev 3</span>
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="d-flex w-100 align-items-center justify-content-center me-3">
|
|
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Warning" @bind-Value="@DashboardViewModel.Sev4Per" />
|
|
<h6 class="mt-2 text-center w-50">
|
|
<span>@DashboardViewModel.Sev4</span>
|
|
<span class="d-block text-body text-sm">Sev 4</span>
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="d-flex w-100 align-items-center justify-content-center">
|
|
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Danger" @bind-Value="@DashboardViewModel.Sev5Per" />
|
|
<h6 class="mt-2 text-center w-50">
|
|
<span>@DashboardViewModel.Sev5</span>
|
|
<span class="d-block text-body text-sm">Sev 5</span>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-3 justify-content-center">
|
|
<div class="col-md-8 px-2 py-3">
|
|
<div class="card h-100">
|
|
<div class="card-header pb-0 p-3">
|
|
<h6 class="mb-0">Work Order Status</h6>
|
|
</div>
|
|
<div class="card-body mb-5">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<div class="chart">
|
|
<canvas id="chart-consumption" class="chart-canvas" height="190" @ref="chartCanvas"></canvas>
|
|
</div>
|
|
<h4 class="font-weight-bold mt-n8">
|
|
<span class="d-block text-body text-sm">Total</span>
|
|
<span>@DashboardViewModel.Total</span>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer p-3 mb-4">
|
|
<div class="d-flex mt-5">
|
|
<span class="badge badge-md badge-dot me-2 d-block text-start">
|
|
<i class="bg-info"></i>
|
|
<span class="text-xs">Open</span>
|
|
</span>
|
|
<span class="badge badge-md badge-dot me-2 d-block text-start">
|
|
<i class="bg-danger"></i>
|
|
<span class="text-xs">On Hold</span>
|
|
</span>
|
|
<span class="badge badge-md badge-dot me-2 d-block text-start">
|
|
<i class="bg-dark"></i>
|
|
<span class="text-xs">In Progress</span>
|
|
</span>
|
|
<span class="badge badge-md badge-dot me-2 d-block text-start">
|
|
<i class="bg-warning"></i>
|
|
<span class="text-xs">Done</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-4 pt-3">
|
|
<div class="card">
|
|
<h6 class="px-2 py-2">Work Orders</h6>
|
|
<div class="">
|
|
<table class="table align-items-center ">
|
|
<tbody>
|
|
@if (DashboardViewModel != null && DashboardViewModel.Dashboardworkorders != null)
|
|
{
|
|
foreach (var itm in DashboardViewModel.Dashboardworkorders)
|
|
{
|
|
var userNameInitials = "";
|
|
if (itm.UserName != null && !string.IsNullOrEmpty(itm.UserName))
|
|
{
|
|
var nameParts = itm.UserName.Split(' ', StringSplitOptions.RemoveEmptyEntries);
|
|
if (nameParts.Length > 1)
|
|
{
|
|
// Take the first letter of the first two words
|
|
userNameInitials = string.Concat(nameParts[0][0], nameParts[1][0]).ToUpper();
|
|
}
|
|
else
|
|
{
|
|
// Take the first letter of the single word
|
|
userNameInitials = nameParts[0][0].ToString().ToUpper() + nameParts[0][1].ToString().ToUpper();
|
|
}
|
|
}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex px-2 py-1 align-items-center">
|
|
<div>
|
|
@if (userNameInitials != "" && userNameInitials != null)
|
|
{
|
|
<span class="text-xs" style="border-radius:50%;background: #7dcced;color: black;padding:8px">@userNameInitials</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="text-xs" style="border-radius:50%;background: #7dcced;color: black;padding:8px">NA</span>
|
|
}
|
|
@* <img class="w-100" src="./assets/img/team-3.jpg" alt="Country flag">
|
|
*@
|
|
</div>
|
|
<div class="ms-4">
|
|
<p class="text-xs font-weight-bold mb-0 " style=" max-width: 180px; overflow: hidden; text-overflow: ellipsis;">@itm.Name</p>
|
|
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="text-end">
|
|
@if (itm.Status == "Open")
|
|
{
|
|
<div class="btn btn-sm btn-outline-success ">Open</div>
|
|
}
|
|
else if (itm.Status == "On Hold")
|
|
{
|
|
<div class="btn btn-sm btn-outline-warning ">On Hold</div>
|
|
}
|
|
else if (itm.Status == "In Progress")
|
|
{
|
|
<div class="btn btn-sm btn-outline-danger">In Progress</div>
|
|
}
|
|
else if (itm.Status == "Done")
|
|
{
|
|
<div class="btn btn-sm btn-outline-info ">Done</div>
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (isLoading)
|
|
{
|
|
<div class="loading">Loading…</div>
|
|
|
|
}
|
|
@using Microsoft.JSInterop
|
|
@inject IJSRuntime JSRuntime
|
|
@using SeaHavenIndustries.Data.IRepository;
|
|
@inject IWorkOrderRepository _service;
|
|
@using SeaHavenIndustries.Helper.ViewModels
|
|
@using SeaHavenIndustries.ViewModel
|
|
@using System.Text.Json
|
|
@using global::Data.SeaHavenIndustries
|
|
@inject NavigationManager Navigation
|
|
@inject ISettingsRepository _Seservice;
|
|
|
|
@code {
|
|
private bool isLoading = true;
|
|
private ElementReference chartCanvas;
|
|
private DashboardViewModel DashboardViewModel = new DashboardViewModel();
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
isLoading = true;
|
|
await Task.Delay(50);
|
|
|
|
StateHasChanged();
|
|
|
|
DashboardViewModel = await _Seservice.Getdashboarddata();
|
|
isLoading = false;
|
|
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (firstRender)
|
|
{
|
|
await JSRuntime.InvokeVoidAsync("LineChartMUI");
|
|
await JSRuntime.InvokeVoidAsync("LineChartMUI2");
|
|
await EnsureDataLoadedAndInvokeJS();
|
|
|
|
}
|
|
}
|
|
private async Task EnsureDataLoadedAndInvokeJS()
|
|
{
|
|
while (DashboardViewModel.Sev1 == null || DashboardViewModel.Sev1Per == null)
|
|
{
|
|
await Task.Delay(50);
|
|
}
|
|
|
|
List<int> list = new List<int>();
|
|
list.Add(DashboardViewModel.Open.Value);
|
|
list.Add(DashboardViewModel.Onhold.Value);
|
|
list.Add(DashboardViewModel.Inprogress.Value);
|
|
list.Add(DashboardViewModel.Completed.Value);
|
|
await JSRuntime.InvokeVoidAsync("ConsumptionGraph", list);
|
|
|
|
|
|
}
|
|
|
|
}
|