350 lines
15 KiB
PHP
350 lines
15 KiB
PHP
<?php
|
|
require_once __DIR__ . '/../session.php';
|
|
require '../config.php';
|
|
require '../include_header.php';
|
|
?>
|
|
|
|
<body>
|
|
<?php require '../include_topbar.php';?>
|
|
<?php require '../include_sidebar.php';?>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main id="content" class="content py-15">
|
|
<div class="container-fluid">
|
|
|
|
<!-- Page header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-6 gap-3">
|
|
<div>
|
|
<h1 class="fs-3 mb-1">Stock Overview</h1>
|
|
<p class="mb-0">Warehouse performance and stock summary</p>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<label class="mb-0 text-nowrap fw-semibold">Warehouse</label>
|
|
<select id="warehouse" class="form-select" style="min-width:200px;" required>
|
|
<option value="">Select warehouse...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div id="overview_content">
|
|
|
|
<!-- Stat cards -->
|
|
<div class="row g-5 mb-5">
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="mb-4 d-block">Total Capacity</span>
|
|
<h3 class="fw-bold mb-0 text-info" id="stat_capacity">—</h3>
|
|
<p class="mb-0 small text-secondary" id="stat_capacity_sub">Bins in warehouse</p>
|
|
</div>
|
|
<i class="ti ti-box-seam fs-3 text-muted"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_capacity">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="mb-4 d-block">Total Stock In</span>
|
|
<h3 class="fw-bold mb-0 text-success" id="stat_stock_in">—</h3>
|
|
<p class="mb-0 small text-secondary">Units added</p>
|
|
</div>
|
|
<i class="ti ti-trending-up fs-3 text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_stock_in">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="mb-4 d-block">Total Stock Out</span>
|
|
<h3 class="fw-bold mb-0 text-danger" id="stat_stock_out">—</h3>
|
|
<p class="mb-0 small text-secondary">Units removed</p>
|
|
</div>
|
|
<i class="ti ti-trending-down fs-3 text-danger"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_stock_out">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="mb-4 d-block">Low Stock Alerts</span>
|
|
<h3 class="fw-bold mb-0 text-warning" id="stat_low_stock">—</h3>
|
|
<p class="mb-0 small text-secondary">Items need attention</p>
|
|
</div>
|
|
<i class="ti ti-alert-triangle fs-3 text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_low_stock">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="row g-5 mb-5">
|
|
<div class="col-lg-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<h5 class="mb-0">Stock Movement</h5>
|
|
<div id="ics_stockMovementChart"></div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_movement">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<h5 class="mb-0">Stock Level Trend</h5>
|
|
<div id="ics_stockLevelTrendChart"></div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_trend">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent activity -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card" style="position:relative;">
|
|
<div class="card-body p-5">
|
|
<h3 class="fs-5 mb-4">Recent Stock Activity</h3>
|
|
<div id="activity_list"></div>
|
|
</div>
|
|
<div class="card-loader-overlay" id="overlay_activity">
|
|
<div class="spinner-border spinner-border-sm text-primary"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /overview_content -->
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<?php require "../include_ending.php";?>
|
|
|
|
<script>
|
|
var stockMovementChart = null;
|
|
var stockLevelTrendChart = null;
|
|
|
|
// ── Show all overlays before fetching ────────────────────────────────
|
|
function show_overlays() {
|
|
$('#overlay_capacity, #overlay_stock_in, #overlay_stock_out, #overlay_low_stock, #overlay_movement, #overlay_trend, #overlay_activity').show();
|
|
}
|
|
|
|
|
|
// ── Load all overview data in a single call ───────────────────────────
|
|
function retrieve_overview() {
|
|
|
|
var warehouse_id = $('#warehouse').val();
|
|
if (!warehouse_id) return;
|
|
|
|
show_overlays();
|
|
|
|
return ajax_request({
|
|
url: "<?php echo $server_url?>ics/api/engine_report/warehouse_overview.php",
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
debugMode: 0,
|
|
onSuccess: async function(res) {
|
|
|
|
var d = res.output;
|
|
|
|
// ── Stats ──────────────────────────────────────────────────────
|
|
$('#stat_capacity').text(format_number(d.total_capacity));
|
|
$('#stat_capacity_sub').text(format_number(d.space_used) + ' occupied');
|
|
$('#stat_stock_in').text(format_number(d.total_in, 2));
|
|
$('#stat_stock_out').text(format_number(d.total_out, 2));
|
|
$('#stat_low_stock').text(format_number(d.low_stock));
|
|
|
|
$('#overlay_capacity, #overlay_stock_in, #overlay_stock_out, #overlay_low_stock').hide();
|
|
|
|
// ── Stock Movement chart ───────────────────────────────────────
|
|
var mv = d.stock_movement;
|
|
if (stockMovementChart) {
|
|
await stockMovementChart.updateOptions({ xaxis: { categories: mv.labels || [] } }, false, false);
|
|
await stockMovementChart.updateSeries([
|
|
{ name: 'Stock In', data: mv.stock_in || [] },
|
|
{ name: 'Stock Out', data: mv.stock_out || [] }
|
|
]);
|
|
} else {
|
|
// Empty container to destroy any instance pre-rendered by main.js
|
|
$('#ics_stockMovementChart').empty();
|
|
stockMovementChart = new ApexCharts(document.querySelector('#ics_stockMovementChart'), {
|
|
series: [
|
|
{ name: 'Stock In', data: mv.stock_in || [] },
|
|
{ name: 'Stock Out', data: mv.stock_out || [] }
|
|
],
|
|
chart: { type: 'bar', height: 350, toolbar: { show: false } },
|
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5, borderRadiusApplication: 'end' } },
|
|
colors: ['#00C951', '#E66239'],
|
|
dataLabels: { enabled: false },
|
|
stroke: { show: true, width: 2, colors: ['transparent'] },
|
|
xaxis: { categories: mv.labels || [] },
|
|
yaxis: { title: { text: 'Quantity' } },
|
|
fill: { opacity: 1 },
|
|
tooltip: { y: { formatter: function(a) { return Number(a).toLocaleString() + ' units'; } } }
|
|
});
|
|
await stockMovementChart.render();
|
|
}
|
|
$('#overlay_movement').hide();
|
|
|
|
// ── Stock Trend chart ──────────────────────────────────────────
|
|
var tr = d.stock_trend;
|
|
if (stockLevelTrendChart) {
|
|
await stockLevelTrendChart.updateOptions({ xaxis: { categories: tr.labels || [] } }, false, false);
|
|
await stockLevelTrendChart.updateSeries([
|
|
{ name: 'Stock Balance', data: tr.balance || [] }
|
|
]);
|
|
} else {
|
|
// Empty container to destroy any instance pre-rendered by main.js
|
|
$('#ics_stockLevelTrendChart').empty();
|
|
stockLevelTrendChart = new ApexCharts(document.querySelector('#ics_stockLevelTrendChart'), {
|
|
series: [{ name: 'Stock Balance', data: tr.balance || [] }],
|
|
chart: { height: 350, type: 'area', toolbar: { show: false } },
|
|
colors: ['#E66239'],
|
|
dataLabels: { enabled: false },
|
|
stroke: { curve: 'smooth', width: 3 },
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: { shadeIntensity: 1, inverseColors: false, opacityFrom: 0.45, opacityTo: 0.05, stops: [20, 100] }
|
|
},
|
|
xaxis: { categories: tr.labels || [], axisBorder: { show: false }, axisTicks: { show: false } },
|
|
yaxis: { title: { text: 'Quantity' }, labels: { formatter: function(a) { return Number(a).toLocaleString(); } } },
|
|
tooltip: { y: { formatter: function(a) { return Number(a).toLocaleString() + ' units'; } } },
|
|
grid: { show: true, borderColor: '#e2e8f0' }
|
|
});
|
|
await stockLevelTrendChart.render();
|
|
}
|
|
$('#overlay_trend').hide();
|
|
|
|
// ── Recent activity ────────────────────────────────────────────
|
|
var $list = $('#activity_list');
|
|
$list.empty();
|
|
|
|
if (!d.activities || d.activities.length === 0) {
|
|
$list.html('<div class="text-center text-muted py-4">No recent activity</div>');
|
|
$('#overlay_activity').hide();
|
|
return;
|
|
}
|
|
|
|
var html = '';
|
|
d.activities.forEach(function(item) {
|
|
var isIn = item.direction === 'in';
|
|
var colorCls = isIn ? 'success' : 'danger';
|
|
var icon = isIn ? 'ti-trending-up' : 'ti-trending-down';
|
|
var sign = isIn ? '+' : '-';
|
|
var label = isIn ? 'Stock In' : 'Stock Out';
|
|
|
|
html += '<div class="border-bottom d-flex justify-content-between align-items-center mb-4 pb-3">'
|
|
+ '<div class="d-flex gap-3 align-items-center py-3">'
|
|
+ '<div class="icon-shape icon-md bg-' + colorCls + ' bg-opacity-10 text-' + colorCls + ' rounded-2">'
|
|
+ '<i class="ti ' + icon + '"></i>'
|
|
+ '</div>'
|
|
+ '<div>'
|
|
+ '<h5 class="mb-0">' + escapeHtml(item.product_name) + '</h5>'
|
|
+ '<p class="mb-0 small text-secondary">' + label + '</p>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="d-flex flex-column align-items-end">'
|
|
+ '<span class="fs-5 text-' + colorCls + '">' + sign + Number(item.qty).toLocaleString() + '</span>'
|
|
+ '<span class="small text-muted">' + time_ago(item.date) + '</span>'
|
|
+ '</div>'
|
|
+ '</div>';
|
|
});
|
|
$list.html(html);
|
|
$('#overlay_activity').hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── Load warehouse dropdown ───────────────────────────────────────────
|
|
function retrieve_warehouse() {
|
|
return ajax_request({
|
|
url: "<?php echo $server_url?>ics/api/engine/retrieve_warehouse.php",
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function(res) {
|
|
var option = '';
|
|
$.each(res.output, function(key, item) {
|
|
option += `<option value='${item.id}'>${item.warehouse_name}</option>`;
|
|
});
|
|
$('#warehouse').html(option);
|
|
|
|
if (res.output.length > 0) {
|
|
$('#warehouse').val(res.output[0].id);
|
|
retrieve_overview();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
function time_ago(dateStr) {
|
|
if (!dateStr) return '';
|
|
var diff = Math.floor((new Date() - new Date(dateStr.replace(/-/g,'/'))) / 1000);
|
|
if (diff < 60) return 'Just now';
|
|
if (diff < 3600) return Math.floor(diff / 60) + ' min ago';
|
|
if (diff < 86400) return Math.floor(diff / 3600) + ' hour ago';
|
|
if (diff < 2592000) return Math.floor(diff / 86400) + ' day ago';
|
|
if (diff < 31536000) return Math.floor(diff / 2592000) + ' month ago';
|
|
return Math.floor(diff / 31536000) + ' year ago';
|
|
}
|
|
|
|
|
|
// ── Boot ─────────────────────────────────────────────────────────────
|
|
$(async function() {
|
|
try {
|
|
await retrieve_warehouse();
|
|
} catch(e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
|
|
$('#warehouse').on('change', function() {
|
|
retrieve_overview();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|