initial commit
This commit is contained in:
@@ -0,0 +1,186 @@
|
||||
@page
|
||||
@attribute [Authorize(Roles = "Dashboards")]
|
||||
@{
|
||||
ViewData["Title"] = "Default Dashboard";
|
||||
}
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="form-card" id="formcard">
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-chart-line fa-3x" style="color: #E94649;"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Sales</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardSalesQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-undo-alt fa-3x" style="color: #F6B53F;"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Sales Rtrn.</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardSalesReturnQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-shopping-cart fa-3x text-primary"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Purchase</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardPurchaseQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-undo fa-3x" style="color: #C4C24A;"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Purchase Rtrn.</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardPurchaseReturnQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-truck fa-3x" style="color: #C4C24A;"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Delivery Order</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardDeliveryOrderQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-boxes fa-3x text-primary"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Goods Receive</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardGoodsReceiveQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-sign-out-alt fa-3x" style="color: #F6B53F;"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Transfer Out</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardTransferOutQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="bg-white rounded d-flex align-items-center justify-content-between p-4">
|
||||
<i class="fas fa-sign-in-alt fa-3x" style="color: #E94649"></i>
|
||||
<div class="ms-3">
|
||||
<p class="mb-2">Transfer In</p>
|
||||
<h6 class="mb-0 text-end"><span ref="cardTransferInQtyRef"></span> Qty.</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Customer Group</h6>
|
||||
<a href="/SalesReports/SalesReportList">Sales</a>
|
||||
</div>
|
||||
<div ref="customerGroupChartRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Vendor Group</h6>
|
||||
<a href="/PurchaseReports/PurchaseReportList">Purchases</a>
|
||||
</div>
|
||||
<div ref="vendorGroupChartRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Customer Category</h6>
|
||||
<a href="/SalesReports/SalesReportList">Sales</a>
|
||||
</div>
|
||||
<div ref="customerCategoryChartRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Vendor Category</h6>
|
||||
<a href="/PurchaseReports/PurchaseReportList">Purchases</a>
|
||||
</div>
|
||||
<div ref="vendorCategoryChartRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Latest Sales</h6>
|
||||
<a href="/SalesOrders/SalesOrderList">Sales</a>
|
||||
</div>
|
||||
<div ref="salesOrderGridRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-6">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Latest Purchase</h6>
|
||||
<a href="/PurchaseOrders/PurchaseOrderList">Purchases</a>
|
||||
</div>
|
||||
<div ref="purchaseOrderGridRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-xl-12">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Inventory Stock</h6>
|
||||
<a href="/StockReports/StockReportList">Stocks</a>
|
||||
</div>
|
||||
<div ref="stockChartRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid pt-4 px-4">
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-sm-12 col-xl-12">
|
||||
<div class="bg-white text-center rounded p-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h6 class="mb-0">Inventory Transaction</h6>
|
||||
<a href="/TransactionReports/TransactionReportList">Transactions</a>
|
||||
</div>
|
||||
<div ref="inventoryTransactionGridRef" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section scripts {
|
||||
<script src="~/FrontEnd/Pages/Dashboards/DefaultDashboard.cshtml.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
cardsData: {},
|
||||
salesData: {},
|
||||
purchaseData: {},
|
||||
inventoryData: {}
|
||||
});
|
||||
|
||||
const cardSalesQtyRef = Vue.ref(null);
|
||||
const cardSalesReturnQtyRef = Vue.ref(null);
|
||||
const cardPurchaseQtyRef = Vue.ref(null);
|
||||
const cardPurchaseReturnQtyRef = Vue.ref(null);
|
||||
const cardDeliveryOrderQtyRef = Vue.ref(null);
|
||||
const cardGoodsReceiveQtyRef = Vue.ref(null);
|
||||
const cardTransferOutQtyRef = Vue.ref(null);
|
||||
const cardTransferInQtyRef = Vue.ref(null);
|
||||
|
||||
const salesOrderGridRef = Vue.ref(null);
|
||||
const inventoryTransactionGridRef = Vue.ref(null);
|
||||
const purchaseOrderGridRef = Vue.ref(null);
|
||||
const customerGroupChartRef = Vue.ref(null);
|
||||
const vendorGroupChartRef = Vue.ref(null);
|
||||
const customerCategoryChartRef = Vue.ref(null);
|
||||
const vendorCategoryChartRef = Vue.ref(null);
|
||||
const stockChartRef = Vue.ref(null);
|
||||
|
||||
const services = {
|
||||
getCardsData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Dashboard/GetCardsDashboard', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getSalesData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Dashboard/GetSalesDashboard', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getPurchaseData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Dashboard/GetPurchaseDashboard', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getInventoryData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Dashboard/GetInventoryDashboard', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
populateCardsData: async () => {
|
||||
const response = await services.getCardsData();
|
||||
state.cardsData = response?.data?.content?.data;
|
||||
methods.populateCards();
|
||||
},
|
||||
populateSalesData: async () => {
|
||||
const response = await services.getSalesData();
|
||||
state.salesData = response?.data?.content?.data;
|
||||
methods.populateSalesOrderGrid();
|
||||
methods.populateSalesByCustomerGroupChart();
|
||||
methods.populateSalesByCustomerCategoryChart();
|
||||
},
|
||||
populatePurchaseData: async () => {
|
||||
const response = await services.getPurchaseData();
|
||||
state.purchaseData = response?.data?.content?.data;
|
||||
methods.populatePurchaseOrderGrid();
|
||||
methods.populatePurchaseByVendorGroupChart();
|
||||
methods.populatePurchaseByVendorCategoryChart();
|
||||
},
|
||||
populateInventoryData: async () => {
|
||||
const response = await services.getInventoryData();
|
||||
state.inventoryData = response?.data?.content?.data;
|
||||
methods.populateInventoryTransactionGrid();
|
||||
methods.populateInventoryStockChart();
|
||||
},
|
||||
populateCards: () => {
|
||||
const cardsDashboard = state.cardsData?.cardsDashboard;
|
||||
|
||||
if (cardsDashboard) {
|
||||
cardSalesQtyRef.value.textContent = cardsDashboard.salesTotal || 0;
|
||||
cardSalesReturnQtyRef.value.textContent = cardsDashboard.salesReturnTotal || 0;
|
||||
cardPurchaseQtyRef.value.textContent = cardsDashboard.purchaseTotal || 0;
|
||||
cardPurchaseReturnQtyRef.value.textContent = cardsDashboard.purchaseReturnTotal || 0;
|
||||
cardDeliveryOrderQtyRef.value.textContent = cardsDashboard.deliveryOrderTotal || 0;
|
||||
cardGoodsReceiveQtyRef.value.textContent = cardsDashboard.goodsReceiveTotal || 0;
|
||||
cardTransferOutQtyRef.value.textContent = cardsDashboard.transferOutTotal || 0;
|
||||
cardTransferInQtyRef.value.textContent = cardsDashboard.transferInTotal || 0;
|
||||
} else {
|
||||
console.error('CardsDashboard data is not available.');
|
||||
}
|
||||
},
|
||||
populateSalesOrderGrid: () => {
|
||||
const salesOrderDashboard = state.salesData?.salesOrderDashboard ?? [];
|
||||
new ej.grids.Grid({
|
||||
dataSource: salesOrderDashboard,
|
||||
allowFiltering: false,
|
||||
allowSorting: true,
|
||||
allowSelection: false,
|
||||
allowGrouping: false,
|
||||
allowTextWrap: false,
|
||||
allowResizing: false,
|
||||
allowPaging: true,
|
||||
allowExcelExport: false,
|
||||
sortSettings: { columns: [{ field: 'orderDate', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 10 },
|
||||
autoFit: false,
|
||||
showColumnMenu: false,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{ field: 'salesOrder.orderDate', headerText: 'Order Date', width: 70, type: 'dateTime', format: 'yyyy-MM-dd', textAlign: 'Left' },
|
||||
{ field: 'salesOrder.number', headerText: '#Number', width: 90 },
|
||||
{ field: 'product.name', headerText: 'Product', width: 150 },
|
||||
{ field: 'total', headerText: 'Total', width: 70, type: 'number', format: 'N2', textAlign: 'Right' },
|
||||
],
|
||||
}, salesOrderGridRef.value);
|
||||
},
|
||||
populateInventoryTransactionGrid: () => {
|
||||
const inventoryTransactionDashboard = state.inventoryData?.inventoryTransactionDashboard ?? [];
|
||||
new ej.grids.Grid({
|
||||
dataSource: inventoryTransactionDashboard,
|
||||
allowFiltering: false,
|
||||
allowSorting: true,
|
||||
allowSelection: false,
|
||||
allowGrouping: false,
|
||||
allowTextWrap: false,
|
||||
allowResizing: false,
|
||||
allowPaging: true,
|
||||
allowExcelExport: false,
|
||||
sortSettings: { columns: [{ field: 'movementDate', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 10 },
|
||||
autoFit: false,
|
||||
showColumnMenu: false,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{ field: 'movementDate', headerText: 'Date', width: 150, format: 'yyyy-MM-dd', textAlign: 'Left', type: 'dateTime' },
|
||||
{ field: 'warehouse.name', headerText: 'Warehouse', width: 150 },
|
||||
{ field: 'product.name', headerText: 'Product', width: 150 },
|
||||
{ field: 'number', headerText: 'Number', width: 150 },
|
||||
{ field: 'stock', headerText: 'Movement', width: 100, type: 'number', format: '+0.00;-0.00;0.00', textAlign: 'Right' },
|
||||
{ field: 'moduleName', headerText: 'Module Name', width: 150 },
|
||||
{ field: 'moduleCode', headerText: 'Module Code', width: 150 },
|
||||
{ field: 'moduleNumber', headerText: 'Module Number', width: 150 },
|
||||
{ field: 'warehouseFrom.name', headerText: 'Warehouse From', width: 150 },
|
||||
{ field: 'warehouseTo.name', headerText: 'Warehouse To', width: 150 },
|
||||
],
|
||||
}, inventoryTransactionGridRef.value);
|
||||
},
|
||||
populatePurchaseOrderGrid: () => {
|
||||
const purchaseOrderDashboard = state.purchaseData?.purchaseOrderDashboard ?? [];
|
||||
new ej.grids.Grid({
|
||||
dataSource: purchaseOrderDashboard,
|
||||
allowFiltering: false,
|
||||
allowSorting: true,
|
||||
allowSelection: false,
|
||||
allowGrouping: false,
|
||||
allowTextWrap: false,
|
||||
allowResizing: false,
|
||||
allowPaging: true,
|
||||
allowExcelExport: false,
|
||||
sortSettings: { columns: [{ field: 'orderDate', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 10 },
|
||||
autoFit: false,
|
||||
showColumnMenu: false,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{ field: 'purchaseOrder.orderDate', headerText: 'Order Date', width: 70, type: 'dateTime', format: 'yyyy-MM-dd', textAlign: 'Left' },
|
||||
{ field: 'purchaseOrder.number', headerText: '#Number', width: 90 },
|
||||
{ field: 'product.name', headerText: 'Product', width: 150 },
|
||||
{ field: 'total', headerText: 'Total', width: 70, type: 'number', format: 'N2', textAlign: 'Right' },
|
||||
],
|
||||
}, purchaseOrderGridRef.value);
|
||||
},
|
||||
populateSalesByCustomerGroupChart: () => {
|
||||
const salesByCustomerGroupDashboard = state.salesData?.salesByCustomerGroupDashboard ?? [];
|
||||
new ej.charts.Chart(
|
||||
{
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, labelIntersectAction: 'None', labelRotation: ej.base.Browser.isDevice ? -45 : 0, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis: {
|
||||
title: 'Quantity',
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 },
|
||||
},
|
||||
series: salesByCustomerGroupDashboard,
|
||||
title: 'Sales by Customer Group',
|
||||
tooltip: { enable: true, header: "<b>${point.tooltip}</b>", shared: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
palettes: ["#E94649", "#F6B53F", "#009CFF", "#C4C24A"],
|
||||
},
|
||||
customerGroupChartRef.value);
|
||||
},
|
||||
populatePurchaseByVendorGroupChart: () => {
|
||||
const purchaseByVendorGroupDashboard = state.purchaseData?.purchaseByVendorGroupDashboard ?? [];
|
||||
new ej.charts.Chart(
|
||||
{
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, labelIntersectAction: 'None', labelRotation: ej.base.Browser.isDevice ? -45 : 0, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis: {
|
||||
title: 'Quantity',
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 },
|
||||
},
|
||||
series: purchaseByVendorGroupDashboard,
|
||||
title: 'Purchase by Vendor Group',
|
||||
tooltip: { enable: true, header: "<b>${point.tooltip}</b>", shared: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
palettes: ["#E94649", "#F6B53F", "#009CFF", "#C4C24A"],
|
||||
},
|
||||
vendorGroupChartRef.value);
|
||||
},
|
||||
populateSalesByCustomerCategoryChart: () => {
|
||||
const salesByCustomerCategoryDashboard = state.salesData?.salesByCustomerCategoryDashboard ?? [];
|
||||
new ej.charts.Chart(
|
||||
{
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, labelIntersectAction: 'None', labelRotation: ej.base.Browser.isDevice ? -45 : 0, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis: {
|
||||
title: 'Quantity',
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 },
|
||||
},
|
||||
series: salesByCustomerCategoryDashboard,
|
||||
title: 'Sales by Customer Category',
|
||||
tooltip: { enable: true, header: "<b>${point.tooltip}</b>", shared: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
palettes: ["#E94649", "#F6B53F", "#009CFF", "#C4C24A"],
|
||||
},
|
||||
customerCategoryChartRef.value);
|
||||
},
|
||||
populatePurchaseByVendorCategoryChart: () => {
|
||||
const purchaseByVendorCategoryDashboard = state.purchaseData?.purchaseByVendorCategoryDashboard ?? [];
|
||||
new ej.charts.Chart(
|
||||
{
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, labelIntersectAction: 'None', labelRotation: ej.base.Browser.isDevice ? -45 : 0, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis: {
|
||||
title: 'Quantity',
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 },
|
||||
},
|
||||
series: purchaseByVendorCategoryDashboard,
|
||||
title: 'Purchase by Vendor Category',
|
||||
tooltip: { enable: true, header: "<b>${point.tooltip}</b>", shared: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
palettes: ["#E94649", "#F6B53F", "#009CFF", "#C4C24A"],
|
||||
},
|
||||
vendorCategoryChartRef.value);
|
||||
},
|
||||
populateInventoryStockChart: () => {
|
||||
const inventoryStockDashboard = state.inventoryData?.inventoryStockDashboard ?? [];
|
||||
new ej.charts.Chart(
|
||||
{
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, labelIntersectAction: 'None', labelRotation: -15, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis: {
|
||||
title: 'Quantity',
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 },
|
||||
},
|
||||
series: inventoryStockDashboard,
|
||||
title: 'Stock by Warehouse',
|
||||
tooltip: { enable: true, header: "<b>${point.tooltip}</b>", shared: true },
|
||||
legendSettings: { visible: true },
|
||||
palettes: ["#E94649", "#F6B53F", "#009CFF", "#C4C24A"],
|
||||
},
|
||||
stockChartRef.value);
|
||||
},
|
||||
};
|
||||
|
||||
Vue.onMounted(async () => {
|
||||
try {
|
||||
await SecurityManager.authorizePage(['Dashboards']);
|
||||
await SecurityManager.validateToken();
|
||||
|
||||
await methods.populateCardsData();
|
||||
await methods.populateSalesData();
|
||||
await methods.populatePurchaseData();
|
||||
await methods.populateInventoryData();
|
||||
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
cardSalesQtyRef,
|
||||
cardSalesReturnQtyRef,
|
||||
cardPurchaseQtyRef,
|
||||
cardPurchaseReturnQtyRef,
|
||||
cardDeliveryOrderQtyRef,
|
||||
cardGoodsReceiveQtyRef,
|
||||
cardTransferOutQtyRef,
|
||||
cardTransferInQtyRef,
|
||||
salesOrderGridRef,
|
||||
inventoryTransactionGridRef,
|
||||
purchaseOrderGridRef,
|
||||
customerGroupChartRef,
|
||||
vendorGroupChartRef,
|
||||
customerCategoryChartRef,
|
||||
vendorCategoryChartRef,
|
||||
stockChartRef,
|
||||
state,
|
||||
methods
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
Reference in New Issue
Block a user