327 lines
12 KiB
PHP
327 lines
12 KiB
PHP
<?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 justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="fs-3 mb-1">Orders</h1>
|
|
<p class="mb-0">Manage and track all sales orders</p>
|
|
</div>
|
|
<a href="<?php echo $server_url?>order/manage_order.php" class="btn btn-primary">
|
|
<i class="ti ti-plus"></i>
|
|
<span>New Order</span>
|
|
</a>
|
|
</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">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="icon-shape icon-md bg-primary bg-opacity-10 text-primary rounded-2">
|
|
<i class="ti ti-shopping-cart fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 text-muted small">Total Orders</p>
|
|
<h3 class="fw-bold mb-0" id="stat_total">—</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="card p-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="icon-shape icon-md bg-warning bg-opacity-10 text-warning rounded-2">
|
|
<i class="ti ti-clock fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 text-muted small">Draft</p>
|
|
<h3 class="fw-bold mb-0" id="stat_draft">—</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="card p-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="icon-shape icon-md bg-info bg-opacity-10 text-info rounded-2">
|
|
<i class="ti ti-package fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 text-muted small">Confirmed</p>
|
|
<h3 class="fw-bold mb-0" id="stat_confirmed">—</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="card p-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="icon-shape icon-md bg-success bg-opacity-10 text-success rounded-2">
|
|
<i class="ti ti-circle-check fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 text-muted small">Completed</p>
|
|
<h3 class="fw-bold mb-0" id="stat_completed">—</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter + Table -->
|
|
<div class="row g-5">
|
|
|
|
<!-- Search & filter bar -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-lg-5">
|
|
<div class="position-relative">
|
|
<input type="text" id="search_input" class="form-control ps-9"
|
|
placeholder="Search order number, contact, or tracking...">
|
|
<span class="position-absolute top-25 ms-4">
|
|
<i class="ti ti-search text-muted"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<select id="filter_status" class="form-select">
|
|
<option value="">All Status</option>
|
|
<option value="-1">Cancelled</option>
|
|
<option value="0">Draft</option>
|
|
<option value="1">Confirmed</option>
|
|
<option value="2">Processing</option>
|
|
<option value="3">Completed</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<select id="filter_payment" class="form-select">
|
|
<option value="">All Payment</option>
|
|
<option value="0">Unpaid</option>
|
|
<option value="1">Paid</option>
|
|
<option value="2">Partial</option>
|
|
<option value="3">Refunded</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<button class="btn btn-secondary w-100" onclick="retrieve_orders()">
|
|
<i class="ti ti-search me-1"></i>Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-5">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0 table-centered" id="order_list">
|
|
<thead class="table-primary border-light">
|
|
<tr>
|
|
<th class="py-3">Order #</th>
|
|
<th class="py-3">Date</th>
|
|
<th class="py-3">Contact</th>
|
|
<th class="py-3">Items</th>
|
|
<th class="py-3">Grand Total</th>
|
|
<th class="py-3">Status</th>
|
|
<th class="py-3">Fulfillment</th>
|
|
<th class="py-3">Tracking #</th>
|
|
<th class="py-3">Payment</th>
|
|
<th class="py-3">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
<tfoot></tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<?php require '../include_ending.php'; ?>
|
|
|
|
<script>
|
|
|
|
// ── Status helpers ────────────────────────────────────────────────────────
|
|
function order_status_badge(status) {
|
|
status = parseInt(status);
|
|
const map = {
|
|
'-1': '<span class="badge bg-secondary">Cancelled</span>',
|
|
'0': '<span class="badge bg-warning text-dark">Draft</span>',
|
|
'1': '<span class="badge bg-info text-white">Confirmed</span>',
|
|
'2': '<span class="badge bg-primary">Processing</span>',
|
|
'3': '<span class="badge bg-success">Completed</span>',
|
|
};
|
|
return map[status] ?? '<span class="badge bg-light text-dark">—</span>';
|
|
}
|
|
|
|
function payment_status_badge(status) {
|
|
status = parseInt(status);
|
|
const map = {
|
|
'0': '<span class="badge bg-warning text-dark">Unpaid</span>',
|
|
'1': '<span class="badge bg-success">Paid</span>',
|
|
'2': '<span class="badge bg-info text-white">Partial</span>',
|
|
'3': '<span class="badge bg-secondary">Refunded</span>',
|
|
};
|
|
return map[status] ?? '<span class="badge bg-light text-dark">—</span>';
|
|
}
|
|
|
|
function fulfillment_status_badge(status) {
|
|
const map = {
|
|
'1': '<span class="badge bg-warning text-dark"><i class="ti ti-list-check me-1"></i>Picking</span>',
|
|
'2': '<span class="badge bg-info text-white"><i class="ti ti-package me-1"></i>Packed</span>',
|
|
'3': '<span class="badge bg-success"><i class="ti ti-truck me-1"></i>Shipped</span>',
|
|
};
|
|
return map[String(status)] ?? '<span class="text-muted">—</span>';
|
|
}
|
|
|
|
|
|
// ── Retrieve orders ───────────────────────────────────────────────────────
|
|
function retrieve_orders() {
|
|
return ajax_request({
|
|
url: '<?php echo $server_url?>order/api/engine/retrieve_order.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function(res) {
|
|
|
|
var all = res.output || [];
|
|
|
|
// Client-side filter
|
|
var keyword = $('#search_input').val().toLowerCase();
|
|
var fil_status = $('#filter_status').val();
|
|
var fil_payment = $('#filter_payment').val();
|
|
|
|
var data = all.filter(function(o) {
|
|
var match_kw = !keyword ||
|
|
(o.order_number || '').toLowerCase().includes(keyword) ||
|
|
(o.contact_name || '').toLowerCase().includes(keyword) ||
|
|
(o.shipping_tracking_number || '').toLowerCase().includes(keyword);
|
|
var match_st = fil_status === '' || String(o.status) === fil_status;
|
|
var match_pm = fil_payment === '' || String(o.payment_status) === fil_payment;
|
|
return match_kw && match_st && match_pm;
|
|
});
|
|
|
|
// Stat cards
|
|
$('#stat_total').text(format_number(all.length));
|
|
$('#stat_draft').text(format_number(all.filter(o => parseInt(o.status) === 0).length));
|
|
$('#stat_confirmed').text(format_number(all.filter(o => parseInt(o.status) === 1).length));
|
|
$('#stat_completed').text(format_number(all.filter(o => parseInt(o.status) === 3).length));
|
|
|
|
// Pagination via alasql
|
|
alasql('CREATE TABLE IF NOT EXISTS order_list');
|
|
alasql.tables.order_list.data = data;
|
|
|
|
var page = generate_pagination('order_list', data.length);
|
|
$('table#order_list tfoot').html(page);
|
|
|
|
if (typeof change_page_order_list === 'function') {
|
|
change_page_order_list(1);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── Render page ───────────────────────────────────────────────────────────
|
|
function change_page_order_list(page_num) {
|
|
var offset = (page_num - 1) * prop_limit;
|
|
var page_data = alasql(`SELECT * FROM order_list LIMIT ${prop_limit} OFFSET ${offset}`);
|
|
var body = '';
|
|
|
|
$.each(page_data, function(i, o) {
|
|
var items = JSON.parse(o.items || '[]');
|
|
var item_count = items.length;
|
|
var can_edit = parseInt(o.status) === 0;
|
|
var can_cancel = parseInt(o.status) >= 0 && parseInt(o.status) <= 1;
|
|
|
|
body += `<tr>
|
|
<td class="py-3 fw-semibold">${o.order_number}</td>
|
|
<td class="py-3">${format_date(o.order_date)}</td>
|
|
<td class="py-3">${o.contact_name || '<span class="text-muted">—</span>'}</td>
|
|
<td class="py-3">${item_count} item${item_count !== 1 ? 's' : ''}</td>
|
|
<td class="py-3 fw-semibold">${format_number(o.grand_total, 2)}</td>
|
|
<td class="py-3">${order_status_badge(o.status)}</td>
|
|
<td class="py-3">${fulfillment_status_badge(o.fulfillment_status)}</td>
|
|
<td class="py-3">${o.shipping_tracking_number || '<span class="text-muted">—</span>'}</td>
|
|
<td class="py-3">${payment_status_badge(o.payment_status)}</td>
|
|
<td class="py-3">
|
|
<a href="<?php echo $server_url?>order/manage_order.php?id=${o.id}" title="View">
|
|
<i class="ti ti-eye fs-5"></i>
|
|
</a>
|
|
${can_cancel ? `
|
|
<a href="javascript:void(0);" class="link-danger ms-2" title="Cancel"
|
|
onclick="cancel_order(${o.id})">
|
|
<i class="ti ti-x fs-5"></i>
|
|
</a>` : ''}
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
|
|
$('table#order_list > tbody').html(body);
|
|
}
|
|
|
|
|
|
// ── Cancel order ─────────────────────────────────────────────────────────
|
|
function cancel_order(id) {
|
|
bootbox.confirm({
|
|
message: 'Cancel this order? All pending stock-out rows will be cancelled.',
|
|
buttons: {
|
|
confirm: { label: 'Yes, Cancel Order', className: 'btn-danger' },
|
|
cancel: { label: 'Back', className: 'btn-secondary' }
|
|
},
|
|
callback: function(result) {
|
|
if (!result) return;
|
|
ajax_request({
|
|
url: '<?php echo $server_url?>order/api/engine/cancel_order.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'update',
|
|
data: { id: id },
|
|
onSuccess: function() {
|
|
retrieve_orders();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── Boot ─────────────────────────────────────────────────────────────────
|
|
$(function() {
|
|
retrieve_orders();
|
|
|
|
$('#search_input').on('keyup', function(e) {
|
|
if (e.key === 'Enter') retrieve_orders();
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|