116 lines
4.5 KiB
Plaintext
116 lines
4.5 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Dashboard";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
|
<div class="container" id="invAdmin">
|
|
<div class="row">
|
|
<div class="text-center">
|
|
<p><h1 class="display-4">Inventory Admin Dashboard</h1></p>
|
|
<p v-show="currentUserCompanyDept.departmentName"><h2 class="display-6">Store: {{ currentUserCompanyDept.departmentName }}</h2></p>
|
|
</div>
|
|
</div>
|
|
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml");
|
|
<div class="row card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Inventory Report</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div v-if="reportData">
|
|
<div class="row justify-content-center">
|
|
<div class="col-3">
|
|
<h4>Statistic</h4>
|
|
<p>Total Number of Item Registered: {{ reportData.itemCountRegistered }}</p>
|
|
<p>Total Number of Item Still in Stock: {{ reportData.itemCountStillInStock }}</p>
|
|
</div>
|
|
<div class="col-3">
|
|
<h4>Item Registered </h4>
|
|
<p>This Month: {{ reportData.itemCountRegisteredThisMonth }}</p>
|
|
<p>Last Month: {{ reportData.itemCountRegisteredLastMonth }}</p>
|
|
</div>
|
|
<div class="col-3">
|
|
<h4>Item Stock Out </h4>
|
|
<p>This Month: {{ reportData.itemCountStockOutThisMonth }}</p>
|
|
<p>Last Month: {{ reportData.itemCountStockOutLastMonth }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
$(function () {
|
|
app.mount('#invAdmin');
|
|
|
|
$('.closeModal').on('click', function () {
|
|
// Show the modal with the ID 'addManufacturerModal'.
|
|
$('.modal').modal('hide');
|
|
});
|
|
});
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
currentUser: null,
|
|
currentUserCompanyDept: {
|
|
departmentName: null,
|
|
departmentId: null
|
|
},
|
|
reportData: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchUser();
|
|
},
|
|
methods: {
|
|
async fetchUser() {
|
|
try {
|
|
const response = await fetch(`/IdentityAPI/GetUserInformation/`, {
|
|
method: 'POST',
|
|
});
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.currentUser = data?.userInfo || null;
|
|
const companyDeptData = await this.currentUser.department;
|
|
const userRole = this.currentUser.role;
|
|
if(userRole == "SuperAdmin" || userRole == "SystemAdmin"){
|
|
this.currentUserCompanyDept = {departmentId : 0, departmentName : "All"}
|
|
this.fetchInventoryReport(0);
|
|
}
|
|
else{
|
|
this.currentUserCompanyDept = companyDeptData;
|
|
this.fetchInventoryReport(companyDeptData.departmentId);
|
|
}
|
|
}
|
|
else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
}
|
|
},
|
|
async fetchInventoryReport(deptId){
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/GetInventoryReport/` + deptId, {
|
|
method: 'POST',
|
|
});
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.reportData = data;
|
|
}
|
|
else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
} |