Reports
This commit is contained in:
@@ -1,13 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/ReportManager.php';
|
||||
|
||||
$report = new ReportManager($pdo2, $company_id);
|
||||
$answer['output'] = $report->getLotStockLog(
|
||||
$data['product_sku'] ?? '',
|
||||
$data['lot_number'] ?? ''
|
||||
);
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -1,16 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/ReportManager.php';
|
||||
|
||||
$report = new ReportManager($pdo2, $company_id);
|
||||
$result = $report->getProductLots();
|
||||
|
||||
$answer['output'] = $result['rows'];
|
||||
$answer['total'] = $result['total'];
|
||||
$answer['active'] = $result['active'];
|
||||
$answer['expired'] = $result['expired'];
|
||||
$answer['near'] = $result['near'];
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -1,18 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/ReportManager.php';
|
||||
|
||||
$rack_id = (int)($data['rack_id'] ?? 0);
|
||||
|
||||
if (!$rack_id) {
|
||||
$answer['output'] = [];
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
}
|
||||
|
||||
$report = new ReportManager($pdo2, $company_id);
|
||||
$answer['output'] = $report->getRackLog($rack_id);
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -1,16 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/ReportManager.php';
|
||||
|
||||
$report = new ReportManager($pdo2, $company_id);
|
||||
$total = $report->getTotalCapacity();
|
||||
$occupied = $report->getSpaceUsed();
|
||||
|
||||
$answer['output'] = $report->getRackOccupancy();
|
||||
$answer['total'] = $total;
|
||||
$answer['occupied'] = $occupied;
|
||||
$answer['empty'] = $total - $occupied;
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -1,525 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
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-5 gap-3">
|
||||
<div>
|
||||
<h1 class="fs-3 mb-1">Rack Occupancy</h1>
|
||||
<p class="mb-0">View occupied and available rack positions across all warehouses</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="icon-shape icon-lg bg-primary bg-opacity-10 text-primary rounded-2">
|
||||
<i class="ti ti-box-seam fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span>Total Racks</span>
|
||||
<h2 class="fw-bold mb-0" id="stat_total">—</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="icon-shape icon-lg bg-danger bg-opacity-10 text-danger rounded-2">
|
||||
<i class="ti ti-lock fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span>Occupied</span>
|
||||
<h2 class="fw-bold mb-0" id="stat_occupied">—</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="icon-shape icon-lg bg-success bg-opacity-10 text-success rounded-2">
|
||||
<i class="ti ti-lock-open fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span>Available</span>
|
||||
<h2 class="fw-bold mb-0" id="stat_empty">—</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="icon-shape icon-lg bg-info bg-opacity-10 text-info rounded-2">
|
||||
<i class="ti ti-chart-pie fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span>Occupancy Rate</span>
|
||||
<h2 class="fw-bold mb-0" id="stat_rate">—</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-pills mb-3 bg-light p-2 rounded-2 d-inline-flex" id="pills-tab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill"
|
||||
data-bs-target="#pills-all" type="button" role="tab">All</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="pills-occupied-tab" data-bs-toggle="pill"
|
||||
data-bs-target="#pills-occupied" type="button" role="tab">Occupied</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="pills-empty-tab" data-bs-toggle="pill"
|
||||
data-bs-target="#pills-empty" type="button" role="tab">Available</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- All tab -->
|
||||
<div class="row g-5 mb-5 tab-pane fade show active" id="pills-all" role="tabpanel">
|
||||
<div class="col-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body p-6">
|
||||
<div class="mb-6 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h3 class="mb-1 fs-4">All Racks</h3>
|
||||
<p class="mb-0">Complete rack list across all warehouses</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 mb-5">
|
||||
<div class="position-relative">
|
||||
<input type="search" id="search_all" class="form-control ps-9"
|
||||
placeholder="Search by warehouse, zone, aisle, rack, or SKU…">
|
||||
<span class="position-absolute top-25 ms-4">
|
||||
<i class="ti ti-search text-muted"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 text-nowrap table-hover table-centered" id="tbl_all">
|
||||
<thead class="table-primary border-light">
|
||||
<tr>
|
||||
<th>Warehouse</th>
|
||||
<th>Zone</th>
|
||||
<th>Aisle</th>
|
||||
<th>Rack</th>
|
||||
<th>SKU</th>
|
||||
<th>Product</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Occupied tab -->
|
||||
<div class="row g-5 mb-5 tab-pane fade" id="pills-occupied" role="tabpanel">
|
||||
<div class="col-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body p-6">
|
||||
<div class="mb-6 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h3 class="mb-1 fs-4">Occupied Racks</h3>
|
||||
<p class="mb-0">Racks currently holding stock</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 mb-5">
|
||||
<div class="position-relative">
|
||||
<input type="search" id="search_occupied" class="form-control ps-9"
|
||||
placeholder="Search by warehouse, zone, aisle, rack, or SKU…">
|
||||
<span class="position-absolute top-25 ms-4">
|
||||
<i class="ti ti-search text-muted"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 text-nowrap table-hover table-centered" id="tbl_occupied">
|
||||
<thead class="table-danger border-light">
|
||||
<tr>
|
||||
<th>Warehouse</th>
|
||||
<th>Zone</th>
|
||||
<th>Aisle</th>
|
||||
<th>Rack</th>
|
||||
<th>SKU</th>
|
||||
<th>Product</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available tab -->
|
||||
<div class="row g-5 mb-5 tab-pane fade" id="pills-empty" role="tabpanel">
|
||||
<div class="col-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body p-6">
|
||||
<div class="mb-6 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h3 class="mb-1 fs-4">Available Racks</h3>
|
||||
<p class="mb-0">Empty racks ready to receive stock</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 mb-5">
|
||||
<div class="position-relative">
|
||||
<input type="search" id="search_empty" class="form-control ps-9"
|
||||
placeholder="Search by warehouse, zone, aisle, or rack…">
|
||||
<span class="position-absolute top-25 ms-4">
|
||||
<i class="ti ti-search text-muted"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 text-nowrap table-hover table-centered" id="tbl_empty">
|
||||
<thead class="table-success border-light">
|
||||
<tr>
|
||||
<th>Warehouse</th>
|
||||
<th>Zone</th>
|
||||
<th>Aisle</th>
|
||||
<th>Rack</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Rack Log Modal -->
|
||||
<div class="modal fade" id="rackLogModal" tabindex="-1" aria-labelledby="rackLogModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="rackLogModalLabel">Rack Log</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table mb-0 table-hover table-centered">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Date / Time</th>
|
||||
<th>Action</th>
|
||||
<th>SKU</th>
|
||||
<th>User</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rack_log_body">
|
||||
<tr><td colspan="4" class="text-center py-4 text-muted">Loading...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<?php require "../include_ending.php";?>
|
||||
|
||||
<script>
|
||||
var search_all = '';
|
||||
var search_occupied = '';
|
||||
var search_empty = '';
|
||||
|
||||
|
||||
// ── Fetch ─────────────────────────────────────────────────────────────
|
||||
function retrieve_rack_occupancy() {
|
||||
|
||||
return ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/rack_occupancy.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
debugMode: 0,
|
||||
onSuccess: function(res) {
|
||||
|
||||
// Stats
|
||||
var total = res.total || 0;
|
||||
var occupied = res.occupied || 0;
|
||||
var empty = res.empty || 0;
|
||||
var rate = total > 0 ? Math.round((occupied / total) * 100) : 0;
|
||||
|
||||
$('#stat_total').text(format_number(total));
|
||||
$('#stat_occupied').text(format_number(occupied));
|
||||
$('#stat_empty').text(format_number(empty));
|
||||
$('#stat_rate').text(rate + '%');
|
||||
|
||||
// Store in alasql
|
||||
alasql('CREATE TABLE IF NOT EXISTS rack_all');
|
||||
alasql.tables.rack_all.data = res.output || [];
|
||||
|
||||
change_page_all(1);
|
||||
change_page_occupied(1);
|
||||
change_page_empty(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ── Render: All ───────────────────────────────────────────────────────
|
||||
function change_page_all(page_num) {
|
||||
|
||||
var offset = (page_num - 1) * prop_limit;
|
||||
var kw = search_all.toLowerCase();
|
||||
|
||||
var filtered = kw ? alasql(
|
||||
`SELECT * FROM rack_all
|
||||
WHERE LOWER(warehouse_name) LIKE '%${kw}%'
|
||||
OR LOWER(zone) LIKE '%${kw}%'
|
||||
OR LOWER(aisle) LIKE '%${kw}%'
|
||||
OR LOWER(rack) LIKE '%${kw}%'
|
||||
OR LOWER(product_sku) LIKE '%${kw}%'
|
||||
OR LOWER(product_name) LIKE '%${kw}%'`
|
||||
) : alasql('SELECT * FROM rack_all');
|
||||
|
||||
$('table#tbl_all tfoot').html(generate_pagination('tbl_all', filtered.length));
|
||||
|
||||
if (filtered.length === 0) {
|
||||
$('table#tbl_all > tbody').html(
|
||||
'<tr><td colspan="7" class="text-center py-5 text-muted">No racks match your search.</td></tr>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
$.each(filtered.slice(offset, offset + prop_limit), function(i, item) {
|
||||
var badge = item.status === 'occupied'
|
||||
? '<span class="badge bg-danger">Occupied</span>'
|
||||
: '<span class="badge bg-success">Available</span>';
|
||||
body += `<tr>
|
||||
<td class="py-3">${item.warehouse_name}</td>
|
||||
<td class="py-3">${item.zone}</td>
|
||||
<td class="py-3">${item.aisle}</td>
|
||||
<td class="py-3">${item.rack}</td>
|
||||
<td class="py-3">${item.product_sku || '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3">${item.product_name || '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3">${badge}</td>
|
||||
<td class="py-3"><a href="javascript:;" onclick="view_rack_log(${item.id}, '${item.warehouse_name} ${item.zone}-${item.aisle}-${item.rack}')"><i class="ti ti-history fs-5"></i></a></td>
|
||||
</tr>`;
|
||||
});
|
||||
$('table#tbl_all > tbody').html(body);
|
||||
}
|
||||
|
||||
|
||||
// ── Render: Occupied ─────────────────────────────────────────────────
|
||||
function change_page_occupied(page_num) {
|
||||
|
||||
var offset = (page_num - 1) * prop_limit;
|
||||
var kw = search_occupied.toLowerCase();
|
||||
|
||||
var base = alasql("SELECT * FROM rack_all WHERE status = 'occupied'");
|
||||
|
||||
var filtered = kw ? base.filter(function(item) {
|
||||
return (item.warehouse_name || '').toLowerCase().includes(kw)
|
||||
|| (item.zone || '').toLowerCase().includes(kw)
|
||||
|| (item.aisle || '').toLowerCase().includes(kw)
|
||||
|| (item.rack || '').toLowerCase().includes(kw)
|
||||
|| (item.product_sku || '').toLowerCase().includes(kw)
|
||||
|| (item.product_name || '').toLowerCase().includes(kw);
|
||||
}) : base;
|
||||
|
||||
$('table#tbl_occupied tfoot').html(generate_pagination('tbl_occupied', filtered.length));
|
||||
|
||||
if (filtered.length === 0) {
|
||||
$('table#tbl_occupied > tbody').html(
|
||||
'<tr><td colspan="6" class="text-center py-5 text-muted">No occupied racks found.</td></tr>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
$.each(filtered.slice(offset, offset + prop_limit), function(i, item) {
|
||||
body += `<tr>
|
||||
<td class="py-3">${item.warehouse_name}</td>
|
||||
<td class="py-3">${item.zone}</td>
|
||||
<td class="py-3">${item.aisle}</td>
|
||||
<td class="py-3">${item.rack}</td>
|
||||
<td class="py-3">${item.product_sku}</td>
|
||||
<td class="py-3">${item.product_name || '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3"><a href="javascript:;" onclick="view_rack_log(${item.id}, '${item.warehouse_name} ${item.zone}-${item.aisle}-${item.rack}')"><i class="ti ti-history fs-5"></i></a></td>
|
||||
</tr>`;
|
||||
});
|
||||
$('table#tbl_occupied > tbody').html(body);
|
||||
}
|
||||
|
||||
|
||||
// ── Render: Available ─────────────────────────────────────────────────
|
||||
function change_page_empty(page_num) {
|
||||
|
||||
var offset = (page_num - 1) * prop_limit;
|
||||
var kw = search_empty.toLowerCase();
|
||||
|
||||
var base = alasql("SELECT * FROM rack_all WHERE status = 'empty'");
|
||||
|
||||
var filtered = kw ? base.filter(function(item) {
|
||||
return (item.warehouse_name || '').toLowerCase().includes(kw)
|
||||
|| (item.zone || '').toLowerCase().includes(kw)
|
||||
|| (item.aisle || '').toLowerCase().includes(kw)
|
||||
|| (item.rack || '').toLowerCase().includes(kw);
|
||||
}) : base;
|
||||
|
||||
$('table#tbl_empty tfoot').html(generate_pagination('tbl_empty', filtered.length));
|
||||
|
||||
if (filtered.length === 0) {
|
||||
$('table#tbl_empty > tbody').html(
|
||||
'<tr><td colspan="4" class="text-center py-5 text-muted">No available racks found.</td></tr>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
$.each(filtered.slice(offset, offset + prop_limit), function(i, item) {
|
||||
body += `<tr>
|
||||
<td class="py-3">${item.warehouse_name}</td>
|
||||
<td class="py-3">${item.zone}</td>
|
||||
<td class="py-3">${item.aisle}</td>
|
||||
<td class="py-3">${item.rack}</td>
|
||||
<td class="py-3"><a href="javascript:;" onclick="view_rack_log(${item.id}, '${item.warehouse_name} ${item.zone}-${item.aisle}-${item.rack}')"><i class="ti ti-history fs-5"></i></a></td>
|
||||
</tr>`;
|
||||
});
|
||||
$('table#tbl_empty > tbody').html(body);
|
||||
}
|
||||
|
||||
|
||||
// ── Search ────────────────────────────────────────────────────────────
|
||||
function debounce(fn, ms) {
|
||||
var t;
|
||||
return function() {
|
||||
clearTimeout(t);
|
||||
t = setTimeout(fn, ms);
|
||||
};
|
||||
}
|
||||
|
||||
$('#search_all').on('input', debounce(function() {
|
||||
search_all = $(this).val().trim();
|
||||
change_page_all(1);
|
||||
}, 200));
|
||||
|
||||
$('#search_occupied').on('input', debounce(function() {
|
||||
search_occupied = $(this).val().trim();
|
||||
change_page_occupied(1);
|
||||
}, 200));
|
||||
|
||||
$('#search_empty').on('input', debounce(function() {
|
||||
search_empty = $(this).val().trim();
|
||||
change_page_empty(1);
|
||||
}, 200));
|
||||
|
||||
|
||||
// ── Re-render on tab switch ───────────────────────────────────────────
|
||||
$('#pills-occupied-tab').on('shown.bs.tab', function() { change_page_occupied(1); });
|
||||
$('#pills-empty-tab').on('shown.bs.tab', function() { change_page_empty(1); });
|
||||
$('#pills-all-tab').on('shown.bs.tab', function() { change_page_all(1); });
|
||||
|
||||
// Remember last active tab
|
||||
$(document).ready(function() {
|
||||
$('button.nav-link').on('click', function() {
|
||||
sessionStorage.setItem('rack_nav_id', $(this).attr('id'));
|
||||
});
|
||||
var nav_id = sessionStorage.getItem('rack_nav_id');
|
||||
if (nav_id) $(`button#${nav_id}`).trigger('click');
|
||||
});
|
||||
|
||||
|
||||
// ── Rack Log ─────────────────────────────────────────────────────────
|
||||
function view_rack_log(rack_id, label) {
|
||||
|
||||
$('#rackLogModalLabel').text('Rack Log — ' + label);
|
||||
$('#rack_log_body').html('<tr><td colspan="4" class="text-center py-4 text-muted">Loading...</td></tr>');
|
||||
var modal = new bootstrap.Modal(document.getElementById('rackLogModal'));
|
||||
modal.show();
|
||||
|
||||
ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/rack_log.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
data: { "rack_id": rack_id },
|
||||
onSuccess: function(res) {
|
||||
|
||||
if (!res.output || res.output.length === 0) {
|
||||
$('#rack_log_body').html('<tr><td colspan="4" class="text-center py-4 text-muted">No log entries.</td></tr>');
|
||||
return;
|
||||
}
|
||||
|
||||
var action_badge = {
|
||||
'occupy': '<span class="badge bg-danger">Occupy</span>',
|
||||
'release': '<span class="badge bg-success">Release</span>',
|
||||
'transfer_in': '<span class="badge bg-primary">Transfer In</span>',
|
||||
'transfer_out': '<span class="badge bg-warning text-dark">Transfer Out</span>',
|
||||
};
|
||||
|
||||
var body = '';
|
||||
$.each(res.output, function(i, row) {
|
||||
body += `<tr>
|
||||
<td class="py-3">${format_date(row.dt)}</td>
|
||||
<td class="py-3">${action_badge[row.action] || row.action}</td>
|
||||
<td class="py-3">${row.product_sku || '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3">${row.user_name || '<span class="text-muted">—</span>'}</td>
|
||||
</tr>`;
|
||||
});
|
||||
$('#rack_log_body').html(body);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ── Boot ─────────────────────────────────────────────────────────────
|
||||
$(async function() {
|
||||
try {
|
||||
await retrieve_rack_occupancy();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,364 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
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="mb-6 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h1 class="fs-3 mb-1">Product Lots</h1>
|
||||
<p class="mb-0">Track lot numbers, expiry dates and stock transactions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary stats — single card, 4 sections -->
|
||||
<div class="row mb-5 g-5">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap">
|
||||
|
||||
<div class="p-6 flex-grow-1 d-flex justify-content-between" id="stat_total">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fs-2 fw-bold mb-3 d-block">—</span>
|
||||
<span class="fs-5">Total Lots</span>
|
||||
<small class="text-primary">All registered lots</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-primary">
|
||||
<i class="ti ti-layers fs-1"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex-grow-1 d-flex justify-content-between" id="stat_active">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fs-2 fw-bold mb-3 d-block">—</span>
|
||||
<span class="fs-5">Active Lots</span>
|
||||
<small class="text-success">Balance > 0</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-success">
|
||||
<i class="ti ti-circle-check fs-1"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex-grow-1 d-flex justify-content-between" id="stat_expired">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fs-2 fw-bold mb-3 d-block">—</span>
|
||||
<span class="fs-5">Expired Lots</span>
|
||||
<small class="text-danger">Past expiry date</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-danger">
|
||||
<i class="ti ti-trash fs-1"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex-grow-1 d-flex justify-content-between" id="stat_near">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fs-2 fw-bold mb-3 d-block">—</span>
|
||||
<span class="fs-5">Near Expiry</span>
|
||||
<small class="text-warning">Within 30 days</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-warning">
|
||||
<i class="ti ti-clock fs-1"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lot table -->
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-5">
|
||||
|
||||
<div class="mb-6 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h2 class="fs-4 mb-2">Lot List</h2>
|
||||
<p class="mb-0">All lot numbers with expiry and stock balance</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="col-lg-12 mb-5">
|
||||
<div class="position-relative">
|
||||
<input type="search" id="search_lot" class="form-control ps-9"
|
||||
placeholder="Search by product, SKU, or lot number…">
|
||||
<span class="position-absolute top-25 ms-4">
|
||||
<i class="ti ti-search text-muted"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 text-nowrap table-hover table-centered" id="tbl_lot">
|
||||
<thead class="table-primary border-light">
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>SKU</th>
|
||||
<th>Lot Number</th>
|
||||
<th>Expiry Date</th>
|
||||
<th>Days Remaining</th>
|
||||
<th>Balance</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lot Stock Log Modal -->
|
||||
<div class="modal fade" id="lotLogModal" tabindex="-1" aria-labelledby="lotLogModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="lotLogModalLabel">Stock Log</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table mb-0 table-hover table-centered">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Type</th>
|
||||
<th>Warehouse</th>
|
||||
<th>Location</th>
|
||||
<th>In</th>
|
||||
<th>Out</th>
|
||||
<th>Serial</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="lot_log_body">
|
||||
<tr><td colspan="7" class="text-center py-4 text-muted">Loading...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer py-2">
|
||||
<div id="lot_log_pagination" class="w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php require "../include_ending.php";?>
|
||||
|
||||
<script>
|
||||
var search_term_lot = '';
|
||||
var lot_log_data = [];
|
||||
var lot_log_page = 1;
|
||||
var lot_log_limit = 10;
|
||||
|
||||
var type_badge = {
|
||||
'in': '<span class="badge bg-success">Stock In</span>',
|
||||
'out': '<span class="badge bg-danger">Stock Out</span>',
|
||||
'transfer': '<span class="badge bg-primary">Transfer</span>',
|
||||
};
|
||||
|
||||
var status_badge = {
|
||||
'ok': '<span class="badge bg-success">OK</span>',
|
||||
'near': '<span class="badge bg-warning text-dark">Near Expiry</span>',
|
||||
'critical': '<span class="badge bg-danger">Critical</span>',
|
||||
'expired': '<span class="badge bg-secondary">Expired</span>',
|
||||
};
|
||||
|
||||
|
||||
// ── Fetch ─────────────────────────────────────────────────────────────
|
||||
function retrieve_product_lot() {
|
||||
|
||||
return ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/product_lot.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
debugMode: 0,
|
||||
onSuccess: function(res) {
|
||||
|
||||
// Stats
|
||||
$('#stat_total span.fs-2').text(format_number(res.total));
|
||||
$('#stat_active span.fs-2').text(format_number(res.active));
|
||||
$('#stat_expired span.fs-2').text(format_number(res.expired));
|
||||
$('#stat_near span.fs-2').text(format_number(res.near));
|
||||
|
||||
// Store
|
||||
alasql('CREATE TABLE IF NOT EXISTS lot_all');
|
||||
alasql.tables.lot_all.data = res.output || [];
|
||||
|
||||
change_page_lot(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ── Render ────────────────────────────────────────────────────────────
|
||||
function change_page_lot(page_num) {
|
||||
|
||||
var offset = (page_num - 1) * prop_limit;
|
||||
var kw = search_term_lot.toLowerCase();
|
||||
|
||||
var filtered = kw ? alasql(
|
||||
`SELECT * FROM lot_all
|
||||
WHERE LOWER(product_name) LIKE '%${kw}%'
|
||||
OR LOWER(product_sku) LIKE '%${kw}%'
|
||||
OR LOWER(lot_number) LIKE '%${kw}%'`
|
||||
) : alasql('SELECT * FROM lot_all');
|
||||
|
||||
$('table#tbl_lot tfoot').html(generate_pagination('tbl_lot', filtered.length));
|
||||
|
||||
if (filtered.length === 0) {
|
||||
$('table#tbl_lot > tbody').html(
|
||||
'<tr><td colspan="8" class="text-center py-5 text-muted">No lots match your search.</td></tr>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
$.each(filtered.slice(offset, offset + prop_limit), function(i, item) {
|
||||
var days = parseInt(item.days_remaining);
|
||||
var days_lbl = days < 0
|
||||
? `<span class="text-danger">${Math.abs(days)} overdue</span>`
|
||||
: `<span class="${days <= 7 ? 'text-danger' : days <= 30 ? 'text-warning' : ''}">${days} days</span>`;
|
||||
|
||||
body += `<tr>
|
||||
<td class="py-3">${item.product_name}</td>
|
||||
<td class="py-3">${item.product_sku}</td>
|
||||
<td class="py-3">${item.lot_number}</td>
|
||||
<td class="py-3">${item.expiry_date || '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3">${days_lbl}</td>
|
||||
<td class="py-3">${Number(item.balance).toLocaleString()}</td>
|
||||
<td class="py-3">${status_badge[item.status] || ''}</td>
|
||||
<td class="py-3">
|
||||
<a href="javascript:;" onclick="view_lot_log('${item.product_sku}','${item.lot_number}')">
|
||||
<i class="ti ti-history fs-5"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>`;
|
||||
});
|
||||
$('table#tbl_lot > tbody').html(body);
|
||||
}
|
||||
|
||||
|
||||
// ── Lot Stock Log modal ───────────────────────────────────────────────
|
||||
function render_lot_log(page) {
|
||||
|
||||
lot_log_page = page;
|
||||
var offset = (page - 1) * lot_log_limit;
|
||||
var total = lot_log_data.length;
|
||||
var page_data = lot_log_data.slice(offset, offset + lot_log_limit);
|
||||
var total_pages = Math.ceil(total / lot_log_limit);
|
||||
|
||||
if (total === 0) {
|
||||
$('#lot_log_body').html('<tr><td colspan="7" class="text-center py-4 text-muted">No transactions found.</td></tr>');
|
||||
$('#lot_log_pagination').html('');
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
$.each(page_data, function(i, row) {
|
||||
body += `<tr>
|
||||
<td class="py-3">${format_date(row.date)}</td>
|
||||
<td class="py-3">${type_badge[row.type] || row.type}</td>
|
||||
<td class="py-3">${row.warehouse_name}</td>
|
||||
<td class="py-3">${row.zone}-${row.aisle}-${row.rack}</td>
|
||||
<td class="py-3 text-success">${parseFloat(row.stock_in) > 0 ? '+' + Number(row.stock_in).toLocaleString() : '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3 text-danger">${parseFloat(row.stock_out) > 0 ? '-' + Number(row.stock_out).toLocaleString() : '<span class="text-muted">—</span>'}</td>
|
||||
<td class="py-3">${row.serial_number || '<span class="text-muted">—</span>'}</td>
|
||||
</tr>`;
|
||||
});
|
||||
$('#lot_log_body').html(body);
|
||||
|
||||
if (total_pages <= 1) { $('#lot_log_pagination').html(''); return; }
|
||||
|
||||
var pag = '<nav><ul class="pagination pagination-sm mb-0 justify-content-end">';
|
||||
pag += `<li class="page-item ${page===1?'disabled':''}"><a class="page-link" href="javascript:;" onclick="render_lot_log(${page-1})">«</a></li>`;
|
||||
for (var p = 1; p <= total_pages; p++) {
|
||||
pag += `<li class="page-item ${p===page?'active':''}"><a class="page-link" href="javascript:;" onclick="render_lot_log(${p})">${p}</a></li>`;
|
||||
}
|
||||
pag += `<li class="page-item ${page===total_pages?'disabled':''}"><a class="page-link" href="javascript:;" onclick="render_lot_log(${page+1})">»</a></li>`;
|
||||
pag += '</ul></nav>';
|
||||
$('#lot_log_pagination').html(pag);
|
||||
}
|
||||
|
||||
function view_lot_log(product_sku, lot_number) {
|
||||
|
||||
lot_log_data = [];
|
||||
lot_log_page = 1;
|
||||
$('#lotLogModalLabel').text('Stock Log — Lot: ' + lot_number);
|
||||
$('#lot_log_body').html('<tr><td colspan="7" class="text-center py-4 text-muted">Loading...</td></tr>');
|
||||
$('#lot_log_pagination').html('');
|
||||
|
||||
var modal = new bootstrap.Modal(document.getElementById('lotLogModal'));
|
||||
modal.show();
|
||||
|
||||
ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/lot_stock_log.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
data: { "product_sku": product_sku, "lot_number": lot_number },
|
||||
onSuccess: function(res) {
|
||||
lot_log_data = res.output || [];
|
||||
render_lot_log(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ── Search ────────────────────────────────────────────────────────────
|
||||
function debounce(fn, ms) {
|
||||
var t;
|
||||
return function() { clearTimeout(t); t = setTimeout(fn, ms); };
|
||||
}
|
||||
|
||||
$('#search_lot').on('input', debounce(function() {
|
||||
search_term_lot = $(this).val().trim();
|
||||
change_page_lot(1);
|
||||
}, 200));
|
||||
|
||||
|
||||
// ── Boot ─────────────────────────────────────────────────────────────
|
||||
$(async function() {
|
||||
try {
|
||||
await retrieve_product_lot();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user