605 lines
23 KiB
Plaintext
605 lines
23 KiB
Plaintext
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-info shadow-dark text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">inventory</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">New P.R.</p>
|
|
<a asp-controller="PRMgmt" asp-action="Index">
|
|
<h4 class="mb-0" id="pr-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than lask week</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">remove</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Item for delivered</p>
|
|
<a asp-controller="Receiving" asp-action="Index">
|
|
<h4 class="mb-0" id="item-not-yet-delivered"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than last month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">upload</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Ready for P.O.</p>
|
|
<a asp-controller="POMgmt" asp-action="POPrepApproval">
|
|
<h4 class="mb-0" id="ready-for-po-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-warning shadow-warning text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">balance</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Partial Received</p>
|
|
<a asp-controller="Receiving" asp-action="Index">
|
|
<h4 class="mb-0" id="partial-received-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-purple shadow-warning text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">schedulesend</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">For Canvass</p>
|
|
<a asp-controller="CanvassMgmt" asp-action="Canvass">
|
|
<h4 class="mb-0" id="for-canvass-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-teal shadow-success text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">paid</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Supplier Bid</p>
|
|
<a asp-controller="CanvassMgmt" asp-action="SupplierBid">
|
|
<h4 class="mb-0" id="supp-bid-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-pink shadow-danger text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">report</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Supplier W.O. response</p>
|
|
<a asp-controller="CanvassMgmt" asp-action="WOResponse">
|
|
<h4 class="mb-0" id="supp-no-response-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-cyan shadow-info text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">verified</span>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Approved P.O.</p>
|
|
<a asp-controller="POMgmt" asp-action="ApprovedPO">
|
|
<h4 class="mb-0" id="approved-po-count"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div class="icon-align icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
|
|
<span class="material-symbols">feedback</span>
|
|
</div>
|
|
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Denied Item</p>
|
|
<a asp-controller="PRMgmt" asp-action="DeniedItem">
|
|
<h4 class="mb-0" id="denied-item"></h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+1% </span>than last month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<br />
|
|
<div class="row mt-4">
|
|
<div class="col-lg-4 mt-4 mb-3">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-info shadow-info border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="pr-chart-bars" class="chart-canvas" height="170"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 ">PR Transactions</h6>
|
|
<p class="text-sm ">PR week</p>
|
|
<hr class="dark horizontal">
|
|
<div class="d-flex ">
|
|
<i class="material-icons text-sm my-auto me-1">schedule</i>
|
|
<p class="mb-0 text-sm">just updated</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mt-4 mb-4">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 ">Week Transactions</h6>
|
|
<p class="text-sm ">Item Without stocks per week</p>
|
|
<hr class="dark horizontal">
|
|
<div class="d-flex ">
|
|
<i class="material-icons text-sm my-auto me-1">schedule</i>
|
|
<p class="mb-0 text-sm"> campaign sent 2 days ago </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mt-4 mb-4">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="chart-line" class="chart-canvas" height="170"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 "> PO Per Month </h6>
|
|
<p class="text-sm "> (<span class="font-weight-bolder">+15%</span>) increase in today PO. </p>
|
|
<hr class="dark horizontal">
|
|
<div class="d-flex ">
|
|
<i class="material-icons text-sm my-auto me-1">schedule</i>
|
|
<p class="mb-0 text-sm"> updated 4 min ago </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mt-4 mb-3">
|
|
<div class="card z-index-2 ">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
|
|
<div class="bg-gradient-warning shadow-warning border-radius-lg py-3 pe-1">
|
|
<div class="chart">
|
|
<canvas id="chart-line-tasks-loan" class="chart-canvas" height="170"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="mb-0 ">Total partial received</h6>
|
|
<p class="text-sm ">Loan request for reserved item</p>
|
|
<hr class="dark horizontal">
|
|
<div class="d-flex ">
|
|
<i class="material-icons text-sm my-auto me-1">schedule</i>
|
|
<p class="mb-0 text-sm">just updated</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var ctx = document.getElementById("chart-bars").getContext("2d");
|
|
|
|
new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
|
datasets: [{
|
|
label: "Sales",
|
|
tension: 0.4,
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
borderSkipped: false,
|
|
backgroundColor: "rgba(255, 255, 255, .8)",
|
|
data: [50, 20, 10, 22, 50, 10, 40],
|
|
maxBarThickness: 6
|
|
},],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 0,
|
|
suggestedMax: 500,
|
|
beginAtZero: true,
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
color: "#fff"
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
|
|
|
new Chart(ctx2, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Mobile apps",
|
|
tension: 0,
|
|
borderWidth: 0,
|
|
pointRadius: 5,
|
|
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
|
pointBorderColor: "transparent",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
|
|
maxBarThickness: 6
|
|
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
var ctx3 = document.getElementById("pr-chart-bars").getContext("2d");
|
|
|
|
new Chart(ctx3, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
|
datasets: [{
|
|
label: "Sales",
|
|
tension: 0.4,
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
borderSkipped: false,
|
|
backgroundColor: "rgba(255, 255, 255, .8)",
|
|
data: [50, 20, 10, 22, 50, 10, 40],
|
|
maxBarThickness: 6
|
|
},],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 0,
|
|
suggestedMax: 500,
|
|
beginAtZero: true,
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
color: "#fff"
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
var ctx4 = document.getElementById("chart-line-tasks-loan").getContext("2d");
|
|
|
|
new Chart(ctx4, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Mobile apps",
|
|
tension: 0,
|
|
borderWidth: 0,
|
|
pointRadius: 5,
|
|
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
|
pointBorderColor: "transparent",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
|
maxBarThickness: 6
|
|
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
padding: 10,
|
|
color: '#f8f9fa',
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
window.onload = function () {
|
|
// Hide the loader once the page has loaded
|
|
var loader = document.getElementById('loader');
|
|
if (loader) {
|
|
loader.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<div id="overlay" class="overlay" style="display: none;">
|
|
<div id="loader" class="loader"></div>
|
|
</div> |