reports
This commit is contained in:
Thanakorn S
@@ -44,10 +44,7 @@ class Reports
|
||||
}
|
||||
|
||||
/**
|
||||
* Master Data Summary:
|
||||
* - Total Categories: Count of all categories in md_product_category for the company.
|
||||
* - Active Categories: Count of categories where status = 1.
|
||||
* - Inactive Categories: Count of categories where status = 0.
|
||||
* Master Data Summary
|
||||
*/
|
||||
public function getTotalCategory(): int
|
||||
{
|
||||
@@ -93,10 +90,6 @@ class Reports
|
||||
return (int) $this->fetchScalar($sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* Total capacity = total count of active racks across all warehouses.
|
||||
* One rack = one storage position (holds one product unit).
|
||||
*/
|
||||
public function getTotalCapacity(): int
|
||||
{
|
||||
$sql = "SELECT COUNT(*)
|
||||
@@ -105,9 +98,6 @@ class Reports
|
||||
return (int) $this->fetchScalar($sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* Space Used = count of racks currently occupied (product_sku IS NOT NULL).
|
||||
*/
|
||||
public function getSpaceUsed(): int
|
||||
{
|
||||
$sql = "SELECT COUNT(*)
|
||||
@@ -117,10 +107,6 @@ class Reports
|
||||
return (int) $this->fetchScalar($sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* Product Count = total count of distinct products in the md_product table for the company.
|
||||
* Low Stock Count = count of products where current stock balance (total_in - total_out) is less than the min_stock defined in md_product.
|
||||
*/
|
||||
public function getTotalProduct(): int
|
||||
{
|
||||
$sql = "SELECT COUNT(*)
|
||||
@@ -130,7 +116,7 @@ class Reports
|
||||
}
|
||||
|
||||
public function getTotalProductInStock(): int
|
||||
{
|
||||
{
|
||||
$sql = "SELECT COUNT(DISTINCT product_sku)
|
||||
FROM warehouse_balance
|
||||
WHERE company_id = :company_id
|
||||
@@ -167,17 +153,6 @@ class Reports
|
||||
return $this->fetchAll($sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* Low Stock Items
|
||||
*
|
||||
* Returns per-warehouse rows where balance has fallen to/below reorder_point.
|
||||
*
|
||||
* Status tiers:
|
||||
* critical — balance <= min_stock (safety floor breached)
|
||||
* warning — balance <= reorder_point (reorder trigger hit, still above min)
|
||||
*
|
||||
* Products with reorder_point = 0 are skipped (no threshold defined).
|
||||
*/
|
||||
public function getLowStockItems(): array
|
||||
{
|
||||
$sql = "SELECT
|
||||
@@ -210,9 +185,6 @@ class Reports
|
||||
foreach ($rows as $row) {
|
||||
$balance = (float) $row['balance'];
|
||||
$min_stock = (float) $row['min_stock'];
|
||||
|
||||
$is_critical = ($balance <= $min_stock);
|
||||
|
||||
$items[] = [
|
||||
'warehouse_id' => (int) $row['warehouse_id'],
|
||||
'warehouse_name' => $row['warehouse_name'],
|
||||
@@ -222,25 +194,18 @@ class Reports
|
||||
'balance' => max(0, round($balance, 2)),
|
||||
'min_stock' => (float) $row['min_stock'],
|
||||
'reorder_point' => (float) $row['reorder_point'],
|
||||
'status' => $is_critical ? 'critical' : 'warning',
|
||||
'status' => ($balance <= $min_stock) ? 'critical' : 'warning',
|
||||
];
|
||||
}
|
||||
|
||||
return $items;
|
||||
}
|
||||
|
||||
/**
|
||||
* Count of low-stock items at CRITICAL level (balance <= min_stock).
|
||||
*/
|
||||
public function getCriticalStockCount(): int
|
||||
{
|
||||
$items = $this->getLowStockItems();
|
||||
return count(array_filter($items, fn($i) => $i['status'] === 'critical'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Count of low-stock items at WARNING level (balance <= reorder_point, > min_stock).
|
||||
*/
|
||||
public function getWarningStockCount(): int
|
||||
{
|
||||
$items = $this->getLowStockItems();
|
||||
@@ -282,6 +247,180 @@ class Reports
|
||||
return (int) $this->fetchScalar($sql);
|
||||
}
|
||||
|
||||
// DASHBOARD REPORTS (cross-warehouse, month-filtered via warehouse_balance)
|
||||
|
||||
public function getDashboardStats(string $month): array
|
||||
{
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT
|
||||
ROUND(COALESCE(SUM(total_in), 0), 2) AS total_in,
|
||||
ROUND(COALESCE(SUM(total_out), 0), 2) AS total_out,
|
||||
COUNT(DISTINCT product_sku) AS active_products
|
||||
FROM warehouse_balance
|
||||
WHERE company_id = :company_id
|
||||
AND month = :month"
|
||||
);
|
||||
$sth->execute([':company_id' => $this->companyId, ':month' => $month]);
|
||||
return $sth->fetch(PDO::FETCH_ASSOC) ?: [
|
||||
'total_in' => 0, 'total_out' => 0, 'active_products' => 0
|
||||
];
|
||||
}
|
||||
|
||||
public function getDashboardLowStockCount(): int
|
||||
{
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT wb.product_sku,
|
||||
ROUND(SUM(wb.total_in) - SUM(wb.total_out), 2) AS balance,
|
||||
mp.min_stock
|
||||
FROM warehouse_balance wb
|
||||
INNER JOIN md_product mp
|
||||
ON mp.company_id = wb.company_id
|
||||
AND mp.sku = wb.product_sku
|
||||
WHERE wb.company_id = :company_id
|
||||
GROUP BY wb.product_sku, mp.min_stock"
|
||||
);
|
||||
$sth->execute([':company_id' => $this->companyId]);
|
||||
$rows = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
$count = 0;
|
||||
foreach ($rows as $row) {
|
||||
if ((float)$row['balance'] < (float)$row['min_stock']) $count++;
|
||||
}
|
||||
return $count;
|
||||
}
|
||||
|
||||
public function getStockMovementChart(int $months = 12): array
|
||||
{
|
||||
$now = new DateTime();
|
||||
$start = (clone $now)->modify("-" . ($months - 1) . " months")->format('Y-m');
|
||||
$end = $now->format('Y-m');
|
||||
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT
|
||||
month,
|
||||
ROUND(SUM(total_in), 2) AS stock_in,
|
||||
ROUND(SUM(total_out), 2) AS stock_out
|
||||
FROM warehouse_balance
|
||||
WHERE company_id = :company_id
|
||||
AND month BETWEEN :start AND :end
|
||||
GROUP BY month
|
||||
ORDER BY month ASC"
|
||||
);
|
||||
$sth->execute([
|
||||
':company_id' => $this->companyId,
|
||||
':start' => $start,
|
||||
':end' => $end,
|
||||
]);
|
||||
$rows = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
$dataByMonth = [];
|
||||
foreach ($rows as $row) {
|
||||
$dataByMonth[$row['month']] = $row;
|
||||
}
|
||||
|
||||
$labels = []; $stock_in = []; $stock_out = [];
|
||||
for ($i = $months - 1; $i >= 0; $i--) {
|
||||
$key = (clone $now)->modify("-{$i} months")->format('Y-m');
|
||||
$labels[] = (clone $now)->modify("-{$i} months")->format('M Y');
|
||||
$stock_in[] = isset($dataByMonth[$key]) ? (float)$dataByMonth[$key]['stock_in'] : 0;
|
||||
$stock_out[] = isset($dataByMonth[$key]) ? (float)$dataByMonth[$key]['stock_out'] : 0;
|
||||
}
|
||||
|
||||
return ['labels' => $labels, 'stock_in' => $stock_in, 'stock_out' => $stock_out];
|
||||
}
|
||||
|
||||
public function getMostMovedProducts(string $month, int $limit = 10): array
|
||||
{
|
||||
$limit = (int) $limit;
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT
|
||||
wb.product_sku,
|
||||
ROUND(SUM(wb.total_in), 2) AS total_in,
|
||||
ROUND(SUM(wb.total_out), 2) AS total_out,
|
||||
p.product_name,
|
||||
pc.category AS category_name
|
||||
FROM warehouse_balance wb
|
||||
INNER JOIN md_product p
|
||||
ON p.company_id = wb.company_id
|
||||
AND p.sku = wb.product_sku
|
||||
LEFT JOIN md_product_category pc
|
||||
ON pc.company_id = wb.company_id
|
||||
AND pc.id = p.category
|
||||
WHERE wb.company_id = :company_id
|
||||
AND wb.month = :month
|
||||
GROUP BY wb.product_sku, p.product_name, pc.category
|
||||
ORDER BY total_out DESC
|
||||
LIMIT {$limit}"
|
||||
);
|
||||
$sth->execute([
|
||||
':company_id' => $this->companyId,
|
||||
':month' => $month,
|
||||
]);
|
||||
return $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
|
||||
public function getAvailableMonths(): array
|
||||
{
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT DISTINCT month
|
||||
FROM warehouse_balance
|
||||
WHERE company_id = :company_id
|
||||
ORDER BY month DESC"
|
||||
);
|
||||
$sth->execute([':company_id' => $this->companyId]);
|
||||
return $sth->fetchAll(PDO::FETCH_COLUMN);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recent stock activity across all warehouses — last N transactions.
|
||||
*/
|
||||
public function getRecentActivity(int $limit = 10): array
|
||||
{
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT id, warehouse_name FROM md_warehouse
|
||||
WHERE company_id = :company_id AND status = 1"
|
||||
);
|
||||
$sth->execute([':company_id' => $this->companyId]);
|
||||
$warehouses = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
if (empty($warehouses)) return [];
|
||||
|
||||
$unions = implode("\nUNION ALL\n", array_map(
|
||||
fn($wh) => "SELECT s.date, s.product_sku, s.type,
|
||||
ROUND(COALESCE(s.`in`, 0), 2) AS stock_in,
|
||||
ROUND(COALESCE(s.`out`, 0), 2) AS stock_out,
|
||||
p.product_name,
|
||||
'{$wh['warehouse_name']}' AS warehouse_name
|
||||
FROM `td_stock_{$wh['warehouse_name']}` s
|
||||
LEFT JOIN md_product p
|
||||
ON p.company_id = s.company_id
|
||||
AND p.sku = s.product_sku
|
||||
WHERE s.company_id = {$this->companyId}",
|
||||
$warehouses
|
||||
));
|
||||
|
||||
$limit = (int) $limit;
|
||||
$sth = $this->pdo->query(
|
||||
"SELECT * FROM ({$unions}) AS all_stock
|
||||
ORDER BY date DESC
|
||||
LIMIT {$limit}"
|
||||
);
|
||||
|
||||
$items = [];
|
||||
foreach ($sth->fetchAll(PDO::FETCH_ASSOC) as $row) {
|
||||
$is_in = (float)$row['stock_in'] > 0;
|
||||
$items[] = [
|
||||
'product_name' => $row['product_name'] ?: $row['product_sku'],
|
||||
'product_sku' => $row['product_sku'],
|
||||
'warehouse_name' => $row['warehouse_name'],
|
||||
'direction' => $is_in ? 'in' : 'out',
|
||||
'qty' => $is_in ? (float)$row['stock_in'] : (float)$row['stock_out'],
|
||||
'type' => $row['type'],
|
||||
'date' => $row['date'],
|
||||
];
|
||||
}
|
||||
return $items;
|
||||
}
|
||||
|
||||
// WAREHOUSE OVERVIEW
|
||||
public function getWarehouseCapacity(int $warehouse_id): int
|
||||
{
|
||||
@@ -386,7 +525,6 @@ class Reports
|
||||
$start = (clone $now)->modify('-12 months')->format('Y-m-d 00:00:00');
|
||||
$end = $now->format('Y-m-d 23:59:59');
|
||||
|
||||
// Prior balance before the 12-month window
|
||||
$sth = $this->pdo->query(
|
||||
"SELECT ROUND(COALESCE(SUM(`in`) - SUM(`out`), 0), 2) AS balance
|
||||
FROM `{$table}`
|
||||
@@ -461,9 +599,6 @@ class Reports
|
||||
// EXPIRED / NEAR EXPIRY STOCK
|
||||
public function getExpiredStock(int $warehouse_id = 0): array
|
||||
{
|
||||
// Step 1: get warehouses from md_warehouse — fast, indexed, company-scoped
|
||||
// avoids hitting information_schema on every request
|
||||
// if warehouse_id is passed, restrict to that warehouse only
|
||||
$where_wh = $warehouse_id > 0 ? "AND id = {$warehouse_id}" : '';
|
||||
$sth = $this->pdo->prepare(
|
||||
"SELECT id, warehouse_name
|
||||
@@ -477,8 +612,6 @@ class Reports
|
||||
|
||||
if (empty($warehouses)) return [];
|
||||
|
||||
// Step 2: build UNION only across known warehouse tables
|
||||
// warehouse_id (integer) carried through for a fast indexed JOIN later
|
||||
$unions = implode("\nUNION ALL\n", array_map(
|
||||
fn($wh) => "SELECT
|
||||
s.id,
|
||||
@@ -496,8 +629,6 @@ class Reports
|
||||
$warehouses
|
||||
));
|
||||
|
||||
// Step 3: join md_lot by (company_id, product_sku, lot_number)
|
||||
// join md_warehouse by integer warehouse_id — no string concat, index-friendly
|
||||
$sql = "SELECT
|
||||
stock.id,
|
||||
stock.product_sku,
|
||||
@@ -509,7 +640,7 @@ class Reports
|
||||
l.expiry_date,
|
||||
DATEDIFF(l.expiry_date, CURDATE()) AS days_remaining,
|
||||
p.product_name,
|
||||
pc.category as category_name,
|
||||
pc.category AS category_name,
|
||||
mw.warehouse_name
|
||||
FROM ($unions) AS stock
|
||||
INNER JOIN md_lot l
|
||||
@@ -537,17 +668,11 @@ class Reports
|
||||
foreach ($rows as $row) {
|
||||
$days = (int) $row['days_remaining'];
|
||||
|
||||
if ($days < 0) {
|
||||
$status = 'expired';
|
||||
} elseif ($days <= 7) {
|
||||
$status = 'critical';
|
||||
} elseif ($days <= 14) {
|
||||
$status = 'warning';
|
||||
} elseif ($days <= 30) {
|
||||
$status = 'caution';
|
||||
} else {
|
||||
continue; // beyond 30 days — not relevant for this report
|
||||
}
|
||||
if ($days < 0) { $status = 'expired'; }
|
||||
elseif ($days <= 7) { $status = 'critical'; }
|
||||
elseif ($days <= 14) { $status = 'warning'; }
|
||||
elseif ($days <= 30) { $status = 'caution'; }
|
||||
else { continue; }
|
||||
|
||||
$items[] = [
|
||||
'id' => (int) $row['id'],
|
||||
@@ -571,7 +696,4 @@ class Reports
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
?>
|
||||
@@ -145,13 +145,15 @@ class WarehouseManager {
|
||||
public function adjustBalance($type, $warehouse_id, $product_sku, $old_qty, $new_qty) {
|
||||
|
||||
// Upsert the balance row (atomic, no race condition)
|
||||
// Partitioned by month (YYYY-MM) for efficient monthly reporting
|
||||
$column = $type === 'in' ? 'total_in' : 'total_out';
|
||||
$delta = $new_qty - $old_qty;
|
||||
$month = date('Y-m');
|
||||
|
||||
$sql = "INSERT INTO warehouse_balance
|
||||
(company_id, warehouse_id, product_sku, `$column`)
|
||||
(company_id, warehouse_id, product_sku, month, `$column`)
|
||||
VALUES
|
||||
(:company_id, :warehouse_id, :product_sku, :delta)
|
||||
(:company_id, :warehouse_id, :product_sku, :month, :delta)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
`$column` = `$column` + VALUES(`$column`)";
|
||||
|
||||
@@ -160,6 +162,7 @@ class WarehouseManager {
|
||||
":company_id" => $this->company_id,
|
||||
":warehouse_id" => $warehouse_id,
|
||||
":product_sku" => $product_sku,
|
||||
":month" => $month,
|
||||
":delta" => $delta
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
|
||||
$product_sku = $data['product_sku'] ?? '';
|
||||
$lot_number = $data['lot_number'] ?? '';
|
||||
|
||||
if (!$product_sku || !$lot_number) {
|
||||
$answer['output'] = [];
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
}
|
||||
|
||||
// Discover all warehouses
|
||||
$sth = $pdo2->prepare(
|
||||
"SELECT id, warehouse_name FROM md_warehouse
|
||||
WHERE company_id = :company_id AND status = 1"
|
||||
);
|
||||
$sth->execute([':company_id' => $company_id]);
|
||||
$warehouses = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
$rows = [];
|
||||
foreach ($warehouses as $wh) {
|
||||
$safe = preg_replace('/[^a-zA-Z0-9_]/', '', $wh['warehouse_name']);
|
||||
$table = "td_stock_{$safe}";
|
||||
|
||||
$sth = $pdo2->prepare(
|
||||
"SELECT
|
||||
s.id,
|
||||
s.date,
|
||||
s.type,
|
||||
s.zone,
|
||||
s.aisle,
|
||||
s.rack,
|
||||
ROUND(COALESCE(s.`in`, 0), 2) AS stock_in,
|
||||
ROUND(COALESCE(s.`out`, 0), 2) AS stock_out,
|
||||
s.serial_number,
|
||||
s.description,
|
||||
'{$wh['warehouse_name']}' AS warehouse_name
|
||||
FROM `{$table}` s
|
||||
WHERE s.company_id = :company_id
|
||||
AND s.product_sku = :product_sku
|
||||
AND s.lot_number = :lot_number
|
||||
ORDER BY s.date DESC"
|
||||
);
|
||||
$sth->execute([
|
||||
':company_id' => $company_id,
|
||||
':product_sku' => $product_sku,
|
||||
':lot_number' => $lot_number,
|
||||
]);
|
||||
$rows = array_merge($rows, $sth->fetchAll(PDO::FETCH_ASSOC));
|
||||
}
|
||||
|
||||
// Sort all rows by date DESC
|
||||
usort($rows, fn($a, $b) => strcmp($b['date'], $a['date']));
|
||||
|
||||
$answer['output'] = $rows;
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
|
||||
// All lots with running balance across all warehouses
|
||||
$sth = $pdo2->prepare(
|
||||
"SELECT
|
||||
l.id,
|
||||
l.product_sku,
|
||||
l.lot_number,
|
||||
l.expiry_date,
|
||||
l.description,
|
||||
p.product_name,
|
||||
DATEDIFF(l.expiry_date, CURDATE()) AS days_remaining,
|
||||
COALESCE(
|
||||
(SELECT ROUND(SUM(wb.total_in) - SUM(wb.total_out), 2)
|
||||
FROM warehouse_balance wb
|
||||
WHERE wb.company_id = l.company_id
|
||||
AND wb.product_sku = l.product_sku),
|
||||
0
|
||||
) AS balance
|
||||
FROM md_lot l
|
||||
INNER JOIN md_product p
|
||||
ON p.company_id = l.company_id
|
||||
AND p.sku = l.product_sku
|
||||
WHERE l.company_id = :company_id
|
||||
ORDER BY l.product_sku, l.expiry_date ASC"
|
||||
);
|
||||
$sth->execute([':company_id' => $company_id]);
|
||||
db_check($sth, $answer);
|
||||
|
||||
$rows = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
$total = count($rows);
|
||||
$active = 0;
|
||||
$expired = 0;
|
||||
$near = 0;
|
||||
|
||||
foreach ($rows as &$row) {
|
||||
$days = (int) $row['days_remaining'];
|
||||
$balance = (float) $row['balance'];
|
||||
|
||||
if ($balance > 0) $active++;
|
||||
if ($days < 0) $expired++;
|
||||
if ($days >= 0 && $days <= 30) $near++;
|
||||
|
||||
// Status
|
||||
if ($days < 0) $row['status'] = 'expired';
|
||||
elseif ($days <= 7) $row['status'] = 'critical';
|
||||
elseif ($days <= 30) $row['status'] = 'near';
|
||||
else $row['status'] = 'ok';
|
||||
}
|
||||
unset($row);
|
||||
|
||||
$answer['output'] = $rows;
|
||||
$answer['total'] = $total;
|
||||
$answer['active'] = $active;
|
||||
$answer['expired'] = $expired;
|
||||
$answer['near'] = $near;
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
|
||||
$rack_id = (int)($data['rack_id'] ?? 0);
|
||||
|
||||
if (!$rack_id) {
|
||||
$answer['output'] = [];
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
}
|
||||
|
||||
$sql = "SELECT
|
||||
rl.id,
|
||||
rl.dt,
|
||||
rl.action,
|
||||
rl.product_sku,
|
||||
rl.td_stock_id,
|
||||
rl.login,
|
||||
u.name AS user_name
|
||||
FROM md_rack_log rl
|
||||
LEFT JOIN {$db_database}.user u
|
||||
ON u.user_id = rl.user_id
|
||||
WHERE rl.company_id = :company_id
|
||||
AND rl.md_rack_id = :rack_id
|
||||
ORDER BY rl.dt DESC";
|
||||
|
||||
$sth = $pdo2->prepare($sql);
|
||||
$sth->execute([
|
||||
':company_id' => $company_id,
|
||||
':rack_id' => $rack_id,
|
||||
]);
|
||||
db_check($sth, $answer);
|
||||
|
||||
$answer['output'] = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/Reports.php';
|
||||
|
||||
$report = new Reports($pdo2, $company_id);
|
||||
|
||||
// Stats
|
||||
$total = $report->getTotalCapacity();
|
||||
$occupied = $report->getSpaceUsed();
|
||||
$empty = $total - $occupied;
|
||||
|
||||
// All racks with warehouse name, product info and stock info
|
||||
$sql = "SELECT
|
||||
r.id,
|
||||
r.zone,
|
||||
r.aisle,
|
||||
r.rack,
|
||||
r.product_sku,
|
||||
r.td_stock_id,
|
||||
mw.warehouse_name,
|
||||
mw.id AS warehouse_id,
|
||||
p.product_name,
|
||||
CASE WHEN r.product_sku IS NOT NULL THEN 'occupied' ELSE 'empty' END AS status
|
||||
FROM md_rack r
|
||||
INNER JOIN md_warehouse mw
|
||||
ON mw.company_id = r.company_id
|
||||
AND mw.id = r.warehouse
|
||||
LEFT JOIN md_product p
|
||||
ON p.company_id = r.company_id
|
||||
AND p.sku = r.product_sku
|
||||
WHERE r.company_id = :company_id
|
||||
ORDER BY mw.warehouse_name, r.zone, CAST(r.aisle AS UNSIGNED), r.aisle, CAST(r.rack AS UNSIGNED), r.rack";
|
||||
|
||||
$sth = $pdo2->prepare($sql);
|
||||
$sth->execute([':company_id' => $company_id]);
|
||||
db_check($sth, $answer);
|
||||
|
||||
$answer['output'] = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||
$answer['total'] = $total;
|
||||
$answer['occupied'] = $occupied;
|
||||
$answer['empty'] = $empty;
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../../../assets/utils/db_auth.php';
|
||||
require '../../../assets/utils/classes/Reports.php';
|
||||
|
||||
$month = $data['month'] ?? date('Y-m');
|
||||
$report = new Reports($pdo2, $company_id);
|
||||
|
||||
$stats = $report->getDashboardStats($month);
|
||||
|
||||
$answer['output'] = [
|
||||
'total_in' => $stats['total_in'],
|
||||
'total_out' => $stats['total_out'],
|
||||
'active_products' => $stats['active_products'],
|
||||
'low_stock' => $report->getDashboardLowStockCount(),
|
||||
'stock_movement' => $report->getStockMovementChart(12),
|
||||
'most_moved' => $report->getMostMovedProducts($month),
|
||||
'low_stock_items' => $report->getLowStockItems(),
|
||||
'recent_activity' => $report->getRecentActivity(10),
|
||||
'months' => $report->getAvailableMonths(),
|
||||
];
|
||||
$answer['success'] = 1;
|
||||
exit(json_encode($answer));
|
||||
?>
|
||||
+329
-436
@@ -2,496 +2,389 @@
|
||||
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">
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="mb-6">
|
||||
<h1 class="fs-3 mb-1">Dashboard</h1>
|
||||
<p>Your main content goes here…</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-lg-3 col-12">
|
||||
<div class="card p-4 bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-2">
|
||||
<div class="d-flex gap-3 ">
|
||||
<div class="icon-shape icon-md bg-primary text-white rounded-2">
|
||||
<i class="ti ti-report-analytics fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Total Sales</h2>
|
||||
<h3 class="fw-bold mb-0">$25,000</h3>
|
||||
<p class="text-primary mb-0 small">+5% since last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-lg-3 col-12">
|
||||
|
||||
<div class="card p-4 bg-success bg-opacity-10 border border-success border-opacity-25 rounded-2">
|
||||
|
||||
<div class="d-flex gap-3 ">
|
||||
<div class="icon-shape icon-md bg-success text-white rounded-2">
|
||||
<i class="ti ti-repeat fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Total Purchase</h2>
|
||||
<h3 class="fw-bold mb-0">$18,000</h3>
|
||||
<p class="text-success mb-0 small">+22% since last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-lg-3 col-12">
|
||||
|
||||
<div class="card p-4 bg-info bg-opacity-10 border border-info border-opacity-25 rounded-2">
|
||||
|
||||
<div class="d-flex gap-3 ">
|
||||
<div class="icon-shape icon-md bg-info text-white rounded-2">
|
||||
<i class="ti ti-currency-dollar fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Total Expenses</h2>
|
||||
<h3 class="fw-bold mb-0">$9,000</h3>
|
||||
<p class="text-info mb-0 small">+10% since last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-lg-3 col-12">
|
||||
|
||||
<div class="card p-4 bg-warning bg-opacity-10 border border-warning border-opacity-25 rounded-2">
|
||||
|
||||
<div class="d-flex gap-3 ">
|
||||
<div class="icon-shape icon-md bg-warning text-white rounded-2">
|
||||
<i class="ti ti-notes fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Invoice Due</h2>
|
||||
<h3 class="fw-bold mb-0">$25,000</h3>
|
||||
<p class="text-warning mb-0 small">+35% since last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
|
||||
<div>
|
||||
<h3 class="fw-bold h4">$25,458</h3>
|
||||
<span>Total Profit</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ti ti-layers-subtract fs-1 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<div class="text-muted"><span class="text-success">+35%</span> vs Last Month</div>
|
||||
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
|
||||
<div>
|
||||
<h3 class="fw-bold h4">$45,458</h3>
|
||||
<span>Total Payment Returns</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ti ti-credit-card fs-1 text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<div class="text-muted"><span class="text-danger">-20%</span> vs Last Month</div>
|
||||
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
|
||||
<div>
|
||||
<h3 class="fw-bold h4">$34,458</h3>
|
||||
<span>Total Expenses</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ti ti-cash-banknote fs-1 text-warning"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<div class="text-muted"><span class="text-warning">-20%</span> vs Last Month</div>
|
||||
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
|
||||
<h3 class="h5 mb-0">Sales vs Purchase</h3>
|
||||
<div>
|
||||
<select class="form-select form-select-sm">
|
||||
<option selected>This Year</option>
|
||||
<option>This Month</option>
|
||||
<option>This Week</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-6">
|
||||
|
||||
<div id="salesPurchaseChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
|
||||
<h3 class="h5 mb-0">Overall Information</h3>
|
||||
<div>
|
||||
<select class="form-select form-select-sm">
|
||||
<option selected>Last 6 Months</option>
|
||||
<option>This Month</option>
|
||||
<option>This Week</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-6">
|
||||
<h3 class="h6">Customers Overview</h3>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-6">
|
||||
<div id="customerChart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<!-- Page header -->
|
||||
<div class="row">
|
||||
<div class="col-6 border-end">
|
||||
<div class="text-center ">
|
||||
<h2 class="mb-1">5.5K</h2>
|
||||
<p class="text-success mb-2">First Time</p>
|
||||
<span class="badge bg-success"><i class="ti ti-arrow-up-left me-1"></i>25%</span>
|
||||
<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">Dashboard</h1>
|
||||
<p class="mb-0">Inventory overview across all warehouses</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-1">3.5K</h2>
|
||||
<p class="text-warning mb-2">Return</p>
|
||||
<span class="badge bg-success badge-xs d-inline-flex align-items-center"><i
|
||||
class="ti ti-arrow-up-left me-1"></i>21%</span>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<label class="mb-0 text-nowrap fw-semibold">Month</label>
|
||||
<select id="month_filter" class="form-select" style="min-width:160px;">
|
||||
<option value="">Loading...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat cards -->
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<div class="card p-4 bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-2" style="position:relative;">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="icon-shape icon-md bg-primary text-white rounded-2">
|
||||
<i class="ti ti-trending-up fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Total Stock In</h2>
|
||||
<h3 class="fw-bold mb-0" id="stat_total_in">—</h3>
|
||||
<p class="text-primary mb-0 small">Units received this month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-loader-overlay" id="overlay_in">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<div class="card p-4 bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded-2" style="position:relative;">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="icon-shape icon-md bg-danger text-white rounded-2">
|
||||
<i class="ti ti-trending-down fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Total Stock Out</h2>
|
||||
<h3 class="fw-bold mb-0" id="stat_total_out">—</h3>
|
||||
<p class="text-danger mb-0 small">Units dispatched this month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-loader-overlay" id="overlay_out">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<div class="card p-4 bg-success bg-opacity-10 border border-success border-opacity-25 rounded-2" style="position:relative;">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="icon-shape icon-md bg-success text-white rounded-2">
|
||||
<i class="ti ti-package fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Active Products</h2>
|
||||
<h3 class="fw-bold mb-0" id="stat_active_products">—</h3>
|
||||
<p class="text-success mb-0 small">SKUs with movement</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-loader-overlay" id="overlay_active">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<div class="card p-4 bg-warning bg-opacity-10 border border-warning border-opacity-25 rounded-2" style="position:relative;">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="icon-shape icon-md bg-warning text-white rounded-2">
|
||||
<i class="ti ti-alert-triangle fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-3 fs-6">Low Stock Alerts</h2>
|
||||
<h3 class="fw-bold mb-0" id="stat_low_stock">—</h3>
|
||||
<p class="text-warning mb-0 small">Products below min stock</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-loader-overlay" id="overlay_low">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock Movement Chart -->
|
||||
<div class="row g-5 mb-5">
|
||||
<div class="col-12">
|
||||
<div class="card" style="position:relative;">
|
||||
<div class="card-body p-5">
|
||||
<h3 class="h5 mb-0">Stock Movement</h3>
|
||||
<p class="mb-4 small text-secondary">Last 12 months across all warehouses</p>
|
||||
<div id="ics_dashboardMovementChart"></div>
|
||||
</div>
|
||||
<div class="row text-center border-top mt-4 pt-4">
|
||||
<div class="col-4 border-end">
|
||||
<h3 class="fw-bold mb-2">6987</h3>
|
||||
<small class="text-secondary">Suppliers</small>
|
||||
</div>
|
||||
<div class="col-4 border-end">
|
||||
<h3 class="fw-bold mb-2">4896</h3>
|
||||
<small class="text-secondary">Customers</small>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h3 class="fw-bold mb-2">487</h3>
|
||||
<small class="text-secondary">Orders</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-loader-overlay" id="overlay_chart">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom 3 cards -->
|
||||
<div class="row g-5">
|
||||
|
||||
<!-- CARD 1 — Top Selling Products -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<!-- Most Moved Products -->
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card h-100" style="position:relative;">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
|
||||
<h4 class="mb-0 h5">Top Selling Products</h4>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="ti ti-calendar"></i> Today
|
||||
</button>
|
||||
<h4 class="mb-0 h5">Most Moved Products</h4>
|
||||
<span class="small text-muted" id="most_moved_month"></span>
|
||||
</div>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
|
||||
<!-- item -->
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-2.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Wireless Earphones</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">$89 </small>
|
||||
<small>•</small>
|
||||
<small>1,250 Units</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger">18%</span>
|
||||
</li>
|
||||
|
||||
<!-- repeat -->
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-1.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Gaming Joy Stick</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">$49 </small>
|
||||
<small>•</small>
|
||||
<small>5,420 Units</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-primary-subtle text-primary border border-primary">32%</span>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-3.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Smart Watch Pro</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">$98 </small>
|
||||
<small>•</small>
|
||||
<small>862 Units</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-info-subtle text-info border border-info">22%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-4.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">USB-C Fast Charger</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">$35 </small>
|
||||
<small>•</small>
|
||||
<small>3,200 Units</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-success-subtle text-success border border-success">28%</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-5.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Portable Bluetooth Speaker</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">$65 </small>
|
||||
<small>•</small>
|
||||
<small>2,890 Units</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-warning-subtle text-warning border border-warning">25%</span>
|
||||
</li>
|
||||
<ul class="list-group list-group-flush" id="list_most_moved">
|
||||
<li class="list-group-item text-center text-muted py-5">Loading...</li>
|
||||
</ul>
|
||||
<div class="card-loader-overlay" id="overlay_moved">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 2 — Low Stock Products -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<!-- Low Stock Products -->
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card h-100" style="position:relative;">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<h4 class="mb-0 h5">Low Stock Products</h4>
|
||||
<a href="<?php echo $server_url?>dashboard/low-stock-products.php" class="small text-primary text-decoration-underline">View All</a>
|
||||
</div>
|
||||
<a href="#" class="small text-primary text-decoration-underline">View All</a>
|
||||
</div>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-8.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Wireless Headphones</p>
|
||||
<small>ID: #554433</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-0 align-items-center">
|
||||
<span class="fw-semibold text-primary">06</span>
|
||||
<small class="text-muted">In Stock</small>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-4.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">USB-C Cable Pack</p>
|
||||
<small>ID: #887766</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-0 align-items-center">
|
||||
<span class="fw-semibold text-primary">09</span>
|
||||
<small class="text-muted">In Stock</small>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-10.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Phone Screen Protector</p>
|
||||
<small>ID: #332211</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-0 align-items-center">
|
||||
<span class="fw-semibold text-primary">03</span>
|
||||
<small class="text-muted">In Stock</small>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-4.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Portable Charger 20000mAh</p>
|
||||
<small>ID: #998877</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-0 align-items-center">
|
||||
<span class="fw-semibold text-primary">07</span>
|
||||
<small class="text-muted">In Stock</small>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-6.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Mechanical Keyboard RGB</p>
|
||||
<small>ID: #665544</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-0 align-items-center">
|
||||
<span class="fw-semibold text-primary">02</span>
|
||||
<small class="text-muted">In Stock</small>
|
||||
</div>
|
||||
</li>
|
||||
<ul class="list-group list-group-flush" id="list_low_stock">
|
||||
<li class="list-group-item text-center text-muted py-5">Loading...</li>
|
||||
</ul>
|
||||
<div class="card-loader-overlay" id="overlay_low_list">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 3 — Recent Sales -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<!-- Recent Activity -->
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card h-100" style="position:relative;">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
|
||||
<h4 class="mb-0 h5">Recent Sales</h4>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="ti ti-calendar-event"></i> Weekly
|
||||
</button>
|
||||
<h4 class="mb-0 h5">Recent Activity</h4>
|
||||
<span class="small text-muted">All warehouses</span>
|
||||
</div>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-7.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">MacBook Pro 16"</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">Computers </small>
|
||||
<small>•</small>
|
||||
<small>2,$2,499</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-success-subtle text-success">Completed</span>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-9.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">AirPods Pro Max</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">Audio </small>
|
||||
<small>•</small>
|
||||
<small>$549</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-primary-subtle text-primary">Processing</span>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-8.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">iPad Air 11"</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">Tablets </small>
|
||||
<small>•</small>
|
||||
<small>$799</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-success-subtle text-success">Completed</span>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-3.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Apple Watch Ultra</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">Wearables </small>
|
||||
<small>•</small>
|
||||
<small>$799</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge bg-warning-subtle text-warning">Pending</span>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item d-flex align-items-center gap-3">
|
||||
<img src="<?php echo $server_url?>assets/images/product-6.png" class="rounded" width="48">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-1">Magic Keyboard</p>
|
||||
<div class="d-flex align-items-center gap-2 text-muted">
|
||||
<small class="fw-semibold">Accessories </small>
|
||||
<small>•</small>
|
||||
<small>$299</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="badge bg-danger-subtle text-danger">Cancelled</span>
|
||||
</li>
|
||||
<ul class="list-group list-group-flush" id="list_recent_activity">
|
||||
<li class="list-group-item text-center text-muted py-5">Loading...</li>
|
||||
</ul>
|
||||
<div class="card-loader-overlay" id="overlay_activity">
|
||||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php require "../include_ending.php";?>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script>
|
||||
var movementChart = null;
|
||||
|
||||
|
||||
// ── Show all overlays ─────────────────────────────────────────────────
|
||||
function show_overlays() {
|
||||
$('#overlay_in, #overlay_out, #overlay_active, #overlay_low, #overlay_chart, #overlay_moved, #overlay_low_list, #overlay_activity').show();
|
||||
}
|
||||
|
||||
|
||||
// ── Render all sections ───────────────────────────────────────────────
|
||||
async function render(d, month) {
|
||||
|
||||
// Stats
|
||||
$('#stat_total_in').text(format_number(d.total_in, 2));
|
||||
$('#stat_total_out').text(format_number(d.total_out, 2));
|
||||
$('#stat_active_products').text(format_number(d.active_products));
|
||||
$('#stat_low_stock').text(format_number(d.low_stock));
|
||||
$('#overlay_in, #overlay_out, #overlay_active, #overlay_low').hide();
|
||||
|
||||
// Chart
|
||||
var mv = d.stock_movement;
|
||||
if (movementChart) {
|
||||
await movementChart.updateOptions({ xaxis: { categories: mv.labels || [] } }, false, false);
|
||||
await movementChart.updateSeries([
|
||||
{ name: 'Stock In', data: mv.stock_in || [] },
|
||||
{ name: 'Stock Out', data: mv.stock_out || [] }
|
||||
]);
|
||||
} else {
|
||||
$('#ics_dashboardMovementChart').empty();
|
||||
movementChart = new ApexCharts(document.querySelector('#ics_dashboardMovementChart'), {
|
||||
series: [
|
||||
{ name: 'Stock In', data: mv.stock_in || [] },
|
||||
{ name: 'Stock Out', data: mv.stock_out || [] }
|
||||
],
|
||||
chart: { type: 'bar', height: 300, 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 movementChart.render();
|
||||
}
|
||||
$('#overlay_chart').hide();
|
||||
|
||||
// Most Moved Products
|
||||
$('#most_moved_month').text(format_month(month));
|
||||
var moved_html = '';
|
||||
if (!d.most_moved || d.most_moved.length === 0) {
|
||||
moved_html = '<li class="list-group-item text-center text-muted py-4">No data for this month.</li>';
|
||||
} else {
|
||||
$.each(d.most_moved.slice(0, 5), function(i, item) {
|
||||
moved_html += `<li class="list-group-item d-flex align-items-center gap-3 py-3">
|
||||
<div class="icon-shape icon-sm bg-danger bg-opacity-10 text-danger rounded-2 flex-shrink-0">
|
||||
<i class="ti ti-trending-down"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-semibold">${item.product_name || item.product_sku}</p>
|
||||
<small class="text-muted">${item.product_sku}</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-danger">-${Number(item.total_out).toLocaleString()}</span><br>
|
||||
<small class="text-success">+${Number(item.total_in).toLocaleString()}</small>
|
||||
</div>
|
||||
</li>`;
|
||||
});
|
||||
}
|
||||
$('#list_most_moved').html(moved_html);
|
||||
$('#overlay_moved').hide();
|
||||
|
||||
// Low Stock Products
|
||||
var low_html = '';
|
||||
if (!d.low_stock_items || d.low_stock_items.length === 0) {
|
||||
low_html = '<li class="list-group-item text-center text-muted py-4">No low stock items.</li>';
|
||||
} else {
|
||||
$.each(d.low_stock_items.slice(0, 5), function(i, item) {
|
||||
var status_cls = item.status === 'critical' ? 'danger' : 'warning';
|
||||
low_html += `<li class="list-group-item d-flex align-items-center gap-3 py-3">
|
||||
<div class="icon-shape icon-sm bg-${status_cls} bg-opacity-10 text-${status_cls} rounded-2 flex-shrink-0">
|
||||
<i class="ti ti-alert-triangle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-semibold">${item.product_name || item.product_sku}</p>
|
||||
<small class="text-muted">${item.product_sku}</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-${status_cls}">${Number(item.balance).toLocaleString()}</span><br>
|
||||
<small class="text-muted">min: ${Number(item.min_stock).toLocaleString()}</small>
|
||||
</div>
|
||||
</li>`;
|
||||
});
|
||||
}
|
||||
$('#list_low_stock').html(low_html);
|
||||
$('#overlay_low_list').hide();
|
||||
|
||||
// Recent Activity
|
||||
var act_html = '';
|
||||
if (!d.recent_activity || d.recent_activity.length === 0) {
|
||||
act_html = '<li class="list-group-item text-center text-muted py-4">No recent activity.</li>';
|
||||
} else {
|
||||
$.each(d.recent_activity.slice(0, 5), function(i, item) {
|
||||
var is_in = item.direction === 'in';
|
||||
var color = is_in ? 'success' : 'danger';
|
||||
var icon = is_in ? 'ti-trending-up' : 'ti-trending-down';
|
||||
var sign = is_in ? '+' : '-';
|
||||
act_html += `<li class="list-group-item d-flex align-items-center gap-3 py-3">
|
||||
<div class="icon-shape icon-sm bg-${color} bg-opacity-10 text-${color} rounded-2 flex-shrink-0">
|
||||
<i class="ti ${icon}"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-semibold">${item.product_name}</p>
|
||||
<small class="text-muted">${item.warehouse_name}</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="fw-bold text-${color}">${sign}${Number(item.qty).toLocaleString()}</span><br>
|
||||
<small class="text-muted">${time_ago(item.date)}</small>
|
||||
</div>
|
||||
</li>`;
|
||||
});
|
||||
}
|
||||
$('#list_recent_activity').html(act_html);
|
||||
$('#overlay_activity').hide();
|
||||
}
|
||||
|
||||
|
||||
// ── Fetch + render ────────────────────────────────────────────────────
|
||||
function retrieve_dashboard() {
|
||||
|
||||
var month = $('#month_filter').val() || '<?php echo date('Y-m'); ?>';
|
||||
show_overlays();
|
||||
|
||||
return ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/reports_stats.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
data: { "month": month },
|
||||
onSuccess: async function(res) {
|
||||
await render(res.output, month);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────
|
||||
function format_month(ym) {
|
||||
if (!ym) return '';
|
||||
var parts = ym.split('-');
|
||||
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
return months[parseInt(parts[1]) - 1] + ' ' + parts[0];
|
||||
}
|
||||
|
||||
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) + ' hr ago';
|
||||
if (diff < 2592000) return Math.floor(diff / 86400) + ' day ago';
|
||||
return Math.floor(diff / 2592000) + ' mo ago';
|
||||
}
|
||||
|
||||
|
||||
// ── Boot ─────────────────────────────────────────────────────────────
|
||||
$(async function() {
|
||||
try {
|
||||
var month = '<?php echo date('Y-m'); ?>';
|
||||
show_overlays();
|
||||
|
||||
await ajax_request({
|
||||
url: "<?php echo $server_url?>dashboard/api/engine_report/reports_stats.php",
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
data: { "month": month },
|
||||
onSuccess: async function(res) {
|
||||
|
||||
// Populate month picker
|
||||
var option = '';
|
||||
var months = res.output.months || [month];
|
||||
$.each(months, function(i, m) {
|
||||
var sel = (m === month) ? 'selected' : '';
|
||||
option += `<option value="${m}" ${sel}>${format_month(m)}</option>`;
|
||||
});
|
||||
if (!months.length) {
|
||||
option = `<option value="${month}">${format_month(month)}</option>`;
|
||||
}
|
||||
$('#month_filter').html(option);
|
||||
|
||||
await render(res.output, month);
|
||||
}
|
||||
});
|
||||
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// ── Month filter change ───────────────────────────────────────────────
|
||||
$('#month_filter').on('change', function() {
|
||||
retrieve_dashboard();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,525 @@
|
||||
<?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>
|
||||
@@ -0,0 +1,364 @@
|
||||
<?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>
|
||||
@@ -1,186 +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">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-5">
|
||||
<div class="">
|
||||
<h1 class="fs-3 mb-1">Reports</h1>
|
||||
<p class="mb-0">View your inventory analytics and reports</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-5 mb-5">
|
||||
<!-- Stat cards -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-6">
|
||||
<h6 class="mb-5 ">Total Revenue</h6>
|
||||
<h3 class="mb-1 fw-bold">$45,231</h3>
|
||||
<p class="mb-0 text-success small"><i class="ti ti-arrow-up"> </i>12% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-6">
|
||||
<h6 class="mb-5 ">Products Sold</h6>
|
||||
<h3 class="mb-1 fw-bold">1,234</h3>
|
||||
<p class="mb-0 text-success small"><i class="ti ti-arrow-up"> </i> 8% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-6">
|
||||
<h6 class="mb-5 ">Low Stock Items</h6>
|
||||
<h3 class="mb-1 fw-bold">23</h3>
|
||||
<p class="mb-0 text-danger small"><i class="ti ti-arrow-down"> </i> 3% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-6">
|
||||
<h6 class="mb-5 ">Out of Stock</h6>
|
||||
<h3 class="mb-1 fw-bold">5</h3>
|
||||
<p class="mb-0 text-danger small"><i class="ti ti-arrow-down"> </i> 2% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<!-- Sales Overview (full width) -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start mb-3 gap-2">
|
||||
<div>
|
||||
<h2 class="mb-0 fs-5">Sales Overview</h2>
|
||||
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button id="btn-random" class="btn btn-light btn-sm">Randomize Data</button>
|
||||
<button id="btn-update" class="btn btn-primary btn-sm">Show This Year Only</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart placeholder: replace with canvas or chart container when integrating chart library -->
|
||||
|
||||
<div id="salesChart"></div>
|
||||
|
||||
|
||||
<div class="d-flex justify-content-end">
|
||||
<a href="#" class="small">View detailed report</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Top Products -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body p-6">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h2 class="mb-0 fs-5">Top Products</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product rows -->
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item p-3 d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<img src="./assets/images/product-1.png" alt="Product A" class="rounded"
|
||||
style="width:48px; height:48px; object-fit:cover;">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-0">Gaming Joy Stick</h6>
|
||||
<small class="text-secondary">156 units sold</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<strong>$3,120</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item p-3 d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<img src="./assets/images/product-2.png" alt="Product B" class="rounded"
|
||||
style="width:48px; height:48px; object-fit:cover;">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-0">Wireless Headphones</h6>
|
||||
<small class="text-secondary">134 units sold</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<strong>$2,680</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item p-3 d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<img src="./assets/images/product-3.png" alt="Product C" class="rounded"
|
||||
style="width:48px; height:48px; object-fit:cover;">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-0">Smartwatch</h6>
|
||||
<small class="text-secondary">98 units sold</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<strong>$1,960</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php require "../include_ending.php";?>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -27,9 +27,16 @@
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="nav-link" href="<?php echo $server_url?>dashboard/reports.php">
|
||||
<a class="nav-link" href="<?php echo $server_url?>dashboard/occupy_rack.php">
|
||||
<i class="ti ti-receipt"></i>
|
||||
<span class="nav-text">Reports</span>
|
||||
<span class="nav-text">Occupied Racks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="nav-link" href="<?php echo $server_url?>dashboard/product_lot.php">
|
||||
<i class="ti ti-receipt"></i>
|
||||
<span class="nav-text">Product Lots</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user