nok/wms-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Orders: order, return, invoice

Browse Source
This commit is contained in:
Thanakorn S
2026-05-02 16:49:21 +07:00
parent ac4fd9a5ad
commit a90975d9f1
47 changed files with 4838 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/order/manage_invoice.php
+358
View File
@@ -0,0 +1,358 @@
<?php
session_start();
require '../config.php';
require '../include_header.php';
$invoice_id = (int)($_GET['id'] ?? 0);
?>
<body>
<?php require '../include_topbar.php'; ?>
<?php require '../include_sidebar.php'; ?>
<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" id="page_title">Invoice Detail</h1>
<p class="mb-0 text-muted" id="page_subtitle"></p>
</div>
<a href="<?php echo $server_url?>order/invoice.php" class="btn btn-light">
<i class="ti ti-arrow-left me-1"></i>Back
</a>
</div>
</div>
</div>
<div class="row g-5">
<!-- Left: Items table -->
<div class="col-lg-8">
<div class="card mb-5">
<div class="card-body p-5">
<h2 class="fs-5 mb-4">Items</h2>
<div class="table-responsive">
<table class="table mb-0">
<thead class="table-light">
<tr>
<th>Product</th>
<th class="text-end">Qty</th>
<th class="text-end">Unit Price</th>
<th class="text-end">Total</th>
</tr>
</thead>
<tbody id="item_tbody"></tbody>
<tfoot id="item_tfoot"></tfoot>
</table>
</div>
</div>
</div>
<!-- Linked credit notes -->
<div class="card d-none" id="cn_card">
<div class="card-body p-5">
<h2 class="fs-5 mb-4">Credit Notes</h2>
<div class="table-responsive">
<table class="table mb-0 table-hover">
<thead class="table-light">
<tr>
<th>CN #</th>
<th>Date</th>
<th class="text-end">Amount</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody id="cn_tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Right: Info + actions -->
<div class="col-lg-4">
<!-- Status + info -->
<div class="card mb-5">
<div class="card-body p-4">
<h2 class="fs-5 mb-3">Document Info</h2>
<div class="mb-2 d-flex gap-2">
<span id="badge_doc_type"></span>
<span id="badge_status"></span>
</div>
<div class="mb-2 small">
<span class="text-muted">Order:</span>
<a href="#" id="link_order" class="ms-1 fw-semibold"></a>
</div>
<div class="mb-2 small">
<span class="text-muted">Contact:</span>
<span class="ms-1 fw-semibold" id="display_contact"></span>
</div>
<div class="mb-2 small">
<span class="text-muted">Issued:</span>
<span class="ms-1" id="display_issued"></span>
</div>
<div class="mb-2 small">
<span class="text-muted">Due:</span>
<input type="text" id="due_date" class="form-control form-control-sm ms-1 d-inline-block"
style="width:140px;" placeholder="DD/MM/YYYY">
</div>
<div class="mt-3 small">
<span class="text-muted">Notes:</span>
<textarea id="notes" class="form-control form-control-sm mt-1" rows="2"></textarea>
</div>
</div>
</div>
<!-- Actions -->
<div class="card">
<div class="card-body p-4 d-flex flex-column gap-2">
<button class="btn btn-primary w-100" id="btn_save"
onclick="save_invoice()">
<i class="ti ti-device-floppy me-1"></i>Save
</button>
<button class="btn btn-success w-100" id="btn_issue"
onclick="issue_invoice()">
<i class="ti ti-send me-1"></i>Issue Invoice
</button>
<!-- Status selector (issued and above) -->
<div class="" id="invoice_status_group">
<label class="form-label small text-muted mb-1">Invoice Status</label>
<div class="d-flex gap-2">
<select id="invoice_status_select" class="form-select form-select-sm">
<option value="1">Issued</option>
<option value="2">Paid</option>
<option value="3">Overdue</option>
<option value="4">Void</option>
</select>
<button class="btn btn-sm btn-outline-primary text-nowrap"
onclick="update_invoice_status($('#invoice_status_select').val())">
<i class="ti ti-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<?php require '../include_ending.php'; ?>
<script>
var invoice_id = <?php echo $invoice_id; ?>;
var invoice_data = null;
function doc_type_badge(doc_type) {
const map = {
'invoice': '<span class="badge bg-primary">Invoice</span>',
'credit_note': '<span class="badge bg-warning text-dark">Credit Note</span>',
'debit_note': '<span class="badge bg-info text-white">Debit Note</span>',
};
return map[doc_type] ?? '—';
}
function invoice_status_badge(status) {
const map = {
'0': '<span class="badge bg-secondary">Draft</span>',
'1': '<span class="badge bg-info text-white">Issued</span>',
'2': '<span class="badge bg-success">Paid</span>',
'3': '<span class="badge bg-danger">Overdue</span>',
'4': '<span class="badge bg-light text-dark">Void</span>',
};
return map[String(status)] ?? '—';
}
function set_mode(inv) {
var status = parseInt(inv.status);
var doc_type = inv.doc_type;
var is_invoice = doc_type === 'invoice';
var is_draft = status === 0;
var is_active = status >= 1 && status <= 3;
// Fields editable only on draft invoice
$('#due_date, #notes').prop('disabled', !(is_draft && is_invoice));
// Save + Issue
var is_draft_invoice = is_draft && is_invoice;
var not_invoice_hint = doc_type !== 'invoice' ? 'Only original invoices can be edited' : '';
set_btn_state('#btn_save', is_draft_invoice,
not_invoice_hint || 'Only draft invoices can be edited');
set_btn_state('#btn_issue', is_draft_invoice,
not_invoice_hint || (status > 0 ? 'Invoice has already been issued' : 'Only draft invoices can be issued'));
// Status selector
var can_change_status = is_active && is_invoice;
var status_hint = !is_invoice ? 'Status cannot be changed on credit/debit notes'
: status === 0 ? 'Issue the invoice first before changing status'
: status === 4 ? 'Invoice is void' : '';
set_btn_state('#invoice_status_group button', can_change_status, status_hint);
$('#invoice_status_select').prop('disabled', !can_change_status);
}
function retrieve_invoice() {
return ajax_request({
url: '<?php echo $server_url?>order/api/engine/retrieve_invoice.php',
autoPrepare: true,
checkRequired: 0,
action: 'read',
data: { invoice_id: invoice_id },
onSuccess: function(res) {
invoice_data = res.output;
var inv = invoice_data;
$('#page_title').text(inv.invoice_number);
$('#badge_doc_type').html(doc_type_badge(inv.doc_type));
$('#badge_status').html(invoice_status_badge(inv.status));
$('#display_contact').text(inv.contact_name || '—');
$('#display_issued').text(format_date(inv.issued_date) || '—');
$('#due_date').val(inv.due_date ? format_date(inv.due_date) : '');
$('#notes').val(inv.notes || '');
if (inv.order_id) {
$('#link_order')
.attr('href', '<?php echo $server_url?>order/manage_order.php?id=' + inv.order_id)
.text(inv.order_number || 'Order #' + inv.order_id);
}
// Items
var items = inv.items || [];
var tbody = '';
$.each(items, function(i, item) {
tbody += `<tr>
<td>${item.product_name || item.product_sku}</td>
<td class="text-end">${format_number(item.quantity, 2)}</td>
<td class="text-end">${format_number(item.price, 2)}</td>
<td class="text-end">${format_number(item.total_price, 2)}</td>
</tr>`;
});
$('#item_tbody').html(tbody);
// Totals
var tfoot = `
<tr><td colspan="3" class="text-muted border-bottom-0">Subtotal</td><td class="text-end border-bottom-0">${format_number(inv.subtotal, 2)}</td></tr>
<tr><td colspan="3" class="text-muted border-bottom-0">Discount</td><td class="text-end border-bottom-0">${format_number(inv.discount, 2)}</td></tr>
<tr><td colspan="3" class="text-muted border-bottom-0">Tax</td><td class="text-end border-bottom-0">${format_number(inv.tax, 2)}</td></tr>
<tr><td colspan="3" class="text-muted">Shipping</td><td class="text-end">${format_number(inv.shipping_fee, 2)}</td></tr>
<tr><td colspan="3" class="fw-bold">Grand Total</td><td class="text-end fw-bold">${format_number(inv.grand_total, 2)}</td></tr>`;
$('#item_tfoot').html(tfoot);
// Linked credit notes
if (res.credit_notes && res.credit_notes.length) {
var cn_rows = '';
$.each(res.credit_notes, function(i, cn) {
cn_rows += `<tr>
<td>${cn.invoice_number}</td>
<td>${format_date(cn.issued_date)}</td>
<td class="text-end text-danger">${format_number(cn.grand_total, 2)}</td>
<td>${invoice_status_badge(cn.status)}</td>
<td><a href="<?php echo $server_url?>order/manage_invoice.php?id=${cn.id}"><i class="ti ti-eye fs-5"></i></a></td>
</tr>`;
});
$('#cn_tbody').html(cn_rows);
$('#cn_card').removeClass('d-none');
}
set_mode(inv);
$('#invoice_status_select').val(inv.status);
}
});
}
function save_invoice() {
ajax_request({
url: '<?php echo $server_url?>order/api/engine/manage_invoice.php',
autoPrepare: true,
checkRequired: 0,
action: 'update',
data: {
id: invoice_id,
due_date: $('#due_date').val().split('/').reverse().join('-'),
notes: $('#notes').val(),
},
onSuccess: function() { retrieve_invoice(); }
});
}
function issue_invoice() {
bootbox.confirm({
message: 'Issue this invoice? It will be sent to the customer.',
buttons: {
confirm: { label: 'Issue', className: 'btn-success' },
cancel: { label: 'Back', className: 'btn-secondary' }
},
callback: function(result) {
if (!result) return;
ajax_request({
url: '<?php echo $server_url?>order/api/engine/issue_invoice.php',
autoPrepare: true,
checkRequired: 0,
action: 'update',
data: { invoice_id: invoice_id },
onSuccess: function() { retrieve_invoice(); }
});
}
});
}
function update_invoice_status(status) {
const labels = { 2: 'Mark as Paid', 3: 'Mark as Overdue', 4: 'Void Invoice' };
const classes = { 2: 'btn-success', 3: 'btn-warning', 4: 'btn-danger' };
const messages = {
2: 'Mark this invoice as paid?',
3: 'Mark this invoice as overdue?',
4: '<strong>Void this invoice?</strong><br>This action cannot be undone.',
};
bootbox.confirm({
message: messages[status],
buttons: {
confirm: { label: labels[status], className: classes[status] },
cancel: { label: 'Back', className: 'btn-secondary' }
},
callback: function(result) {
if (!result) return;
ajax_request({
url: '<?php echo $server_url?>order/api/engine/update_invoice_status.php',
autoPrepare: true,
checkRequired: 0,
action: 'update',
data: { invoice_id: invoice_id, status: status },
onSuccess: function() { retrieve_invoice(); }
});
}
});
}
$(function() {
if (invoice_id) {
retrieve_invoice();
}
flatpickr('#due_date', { dateFormat: 'd/m/Y', allowInput: true });
});
</script>
</body>
</html>