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

accounting workflows

Browse Source
This commit is contained in:
Thanakorn S
2026-05-20 10:17:02 +07:00
parent 04a683bd02
commit 7396db6ffc
199 changed files with 23539 additions and 5345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/order/invoice.php
+150 -134
View File
@@ -11,61 +11,108 @@
<main id="content" class="content py-15">
<div class="container-fluid">
<!-- Page header -->
<div class="row">
<div class="row mb-6">
<div class="col-12">
<div class="mb-6 d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-between align-items-center">
<div>
<h1 class="fs-3 mb-1">Invoices</h1>
<p class="mb-0">Invoices and credit notes</p>
<p class="mb-0 text-muted">Invoices and credit notes</p>
</div>
</div>
</div>
</div>
<!-- Tabs -->
<div class="row mb-5">
<div class="col-12">
<ul class="nav nav-tabs" id="invoice_tabs">
<li class="nav-item">
<a class="nav-link active" href="#" onclick="switch_tab('invoice'); return false;">
<i class="ti ti-file-invoice me-1"></i>Invoices
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switch_tab('credit_note'); return false;">
<i class="ti ti-file-minus me-1"></i>Credit Notes
</a>
</li>
</ul>
<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-file-invoice fs-4"></i>
</div>
<div>
<p class="mb-0 text-muted small">Total</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-pencil 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-send fs-4"></i>
</div>
<div>
<p class="mb-0 text-muted small">Issued</p>
<h3 class="fw-bold mb-0" id="stat_issued">—</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-danger bg-opacity-10 text-danger rounded-2">
<i class="ti ti-clock fs-4"></i>
</div>
<div>
<p class="mb-0 text-muted small">Overdue</p>
<h3 class="fw-bold mb-0" id="stat_overdue">—</h3>
</div>
</div>
</div>
</div>
</div>
<!-- Filter bar -->
<div class="row g-5 mb-5">
<div class="row g-5">
<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="col-lg-4">
<div class="position-relative">
<input type="text" id="search_input" class="form-control ps-9"
placeholder="Search number or contact...">
placeholder="Search invoice number or contact...">
<span class="position-absolute top-25 ms-4">
<i class="ti ti-search text-muted"></i>
</span>
</div>
</div>
<div class="col-lg-3" id="status_filter_wrap">
<div class="col-lg-2">
<select id="filter_type" class="form-select">
<option value="">All Types</option>
<option value="invoice">Invoice</option>
<option value="credit_note">Credit Note</option>
</select>
</div>
<div class="col-lg-2">
<select id="filter_status" class="form-select">
<option value="">All Status</option>
<option value="0">Draft</option>
<option value="1">Issued</option>
<option value="2">Paid</option>
<option value="3">Overdue</option>
<option value="overdue">Overdue</option>
<option value="4">Void</option>
</select>
</div>
<div class="col-lg-2">
<select id="filter_dept" class="form-select">
<option value="">All Departments</option>
</select>
</div>
<div class="col-lg-2">
<button class="btn btn-secondary w-100" onclick="retrieve_invoices()">
<i class="ti ti-search me-1"></i>Search
@@ -75,22 +122,19 @@
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body p-5">
<div class="table-responsive">
<!-- Invoice table -->
<table class="table table-hover mb-0 table-centered" id="invoice_list">
<thead class="table-primary border-light">
<tr>
<th class="py-3">Invoice #</th>
<th class="py-3">Type</th>
<th class="py-3">Order #</th>
<th class="py-3">Contact</th>
<th class="py-3">Department</th>
<th class="py-3">Issued Date</th>
<th class="py-3">Due Date</th>
<th class="py-3">Grand Total</th>
@@ -101,24 +145,6 @@
<tbody></tbody>
<tfoot></tfoot>
</table>
<!-- Credit Note table -->
<table class="table table-hover mb-0 table-centered d-none" id="cn_list">
<thead class="table-warning border-light">
<tr>
<th class="py-3">CN #</th>
<th class="py-3">Order #</th>
<th class="py-3">Ref Invoice #</th>
<th class="py-3">Contact</th>
<th class="py-3">Date</th>
<th class="py-3">Amount</th>
<th class="py-3">Action</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
@@ -132,121 +158,108 @@
<script>
var current_tab = 'invoice';
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>',
};
return map[doc_type] ?? '—';
}
function is_overdue(inv) {
if (String(inv.status) !== '1' || !inv.due_date) return false;
var today = new Date().toISOString().slice(0, 10);
return inv.due_date < today;
}
// ── Badges ────────────────────────────────────────────────────────────────
function invoice_status_badge(status) {
function invoice_status_badge(inv) {
if (inv.payment_state === 'partial') return '<span class="badge bg-warning text-dark">Partial</span>';
if (inv.payment_state === 'paid') {
return inv.doc_type === 'credit_note'
? '<span class="badge bg-success">Settled</span>'
: '<span class="badge bg-success">Paid</span>';
}
if (is_overdue(inv)) return '<span class="badge bg-danger">Overdue</span>';
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)] ?? '—';
return map[String(inv.status)] ?? '—';
}
// ── Tab switch ────────────────────────────────────────────────────────────
function switch_tab(tab) {
current_tab = tab;
// Update nav tabs
$('#invoice_tabs .nav-link').each(function() {
var is_active = $(this).attr('onclick').includes("'" + tab + "'");
$(this).toggleClass('active', is_active);
});
// Show/hide tables
$('#invoice_list').toggleClass('d-none', tab !== 'invoice');
$('#cn_list').toggleClass('d-none', tab !== 'credit_note');
// Status filter — CN has no draft/paid/overdue, simpler
if (tab === 'credit_note') {
$('#filter_status').html(`
<option value="">All Status</option>
<option value="1">Issued</option>
<option value="4">Void</option>
`);
} else {
$('#filter_status').html(`
<option value="">All Status</option>
<option value="0">Draft</option>
<option value="1">Issued</option>
<option value="2">Paid</option>
<option value="3">Overdue</option>
<option value="4">Void</option>
`);
}
retrieve_invoices();
}
// ── Retrieve ──────────────────────────────────────────────────────────────
function retrieve_invoices() {
return ajax_request({
url: '<?php echo $server_url?>order/api/engine/retrieve_invoice.php',
autoPrepare: true,
checkRequired: 0,
action: 'read',
data: { doc_type: current_tab },
data: { doc_type_group: 'sales' },
onSuccess: function(res) {
var all = res.output || [];
var keyword = $('#search_input').val().toLowerCase();
var fil_st = $('#filter_status').val();
var data = all.filter(function(i) {
var match_kw = !keyword ||
(i.invoice_number || '').toLowerCase().includes(keyword) ||
(i.contact_name || '').toLowerCase().includes(keyword);
var match_st = fil_st === '' || String(i.status) === fil_st;
return match_kw && match_st;
var all = (res.output || []).filter(function(inv) {
return inv.doc_type === 'invoice' || inv.doc_type === 'credit_note';
});
if (current_tab === 'invoice') {
render_invoice_table(data);
} else {
render_cn_table(data);
}
var keyword = $('#search_input').val().toLowerCase();
var fil_type = $('#filter_type').val();
var fil_status = $('#filter_status').val();
var fil_dept = $('#filter_dept').val();
var data = all.filter(function(inv) {
var match_kw = !keyword ||
(inv.invoice_number || '').toLowerCase().includes(keyword) ||
(inv.contact_name || '').toLowerCase().includes(keyword);
var match_type = !fil_type || inv.doc_type === fil_type;
var match_st = !fil_status
|| String(inv.status) === fil_status
|| (fil_status === 'overdue' && is_overdue(inv));
var match_dept = !fil_dept || String(inv.department_id) === fil_dept;
return match_kw && match_type && match_st && match_dept;
});
var today = new Date().toISOString().slice(0, 10);
$('#stat_total').text(format_number(all.length));
$('#stat_draft').text(format_number(all.filter(i => String(i.status) === '0').length));
$('#stat_issued').text(format_number(all.filter(i => String(i.status) === '1').length));
$('#stat_overdue').text(format_number(all.filter(i => is_overdue(i)).length));
alasql('CREATE TABLE IF NOT EXISTS invoice_list');
alasql.tables.invoice_list.data = data;
$('table#invoice_list tfoot').html(generate_pagination('invoice_list', data.length));
change_page_invoice_list(1);
}
});
}
// ── Render invoice table ──────────────────────────────────────────────────
function render_invoice_table(data) {
alasql('DROP TABLE IF EXISTS invoice_list');
alasql('CREATE TABLE invoice_list');
alasql.tables.invoice_list.data = data;
var page = generate_pagination('invoice_list', data.length);
$('table#invoice_list tfoot').html(page);
if (typeof change_page_invoice_list === 'function') {
change_page_invoice_list(1);
}
}
function change_page_invoice_list(page_num) {
var offset = (page_num - 1) * prop_limit;
var page_data = alasql(`SELECT * FROM invoice_list LIMIT ${prop_limit} OFFSET ${offset}`);
var body = '';
var offset = (page_num - 1) * prop_limit;
var rows = alasql(`SELECT * FROM invoice_list LIMIT ${prop_limit} OFFSET ${offset}`);
var body = '';
$.each(page_data, function(i, inv) {
var status = parseInt(inv.status);
var can_void = status >= 1 && status <= 3;
if (!rows.length) {
$('table#invoice_list tbody').html(
'<tr><td colspan="10" class="text-center py-5 text-muted">No invoices found.</td></tr>'
);
return;
}
$.each(rows, function(i, inv) {
var status = parseInt(inv.status);
var can_void = inv.doc_type === 'invoice' && status >= 1 && status !== 4;
body += `<tr>
<td class="py-3 fw-semibold">${inv.invoice_number}</td>
<td class="py-3">${inv.order_number || '<span class="text-muted">—</span>'}</td>
<td class="py-3">${inv.contact_name || '<span class="text-muted">—</span>'}</td>
<td class="py-3 fw-semibold">${escape_html(inv.invoice_number || '')}</td>
<td class="py-3">${doc_type_badge(inv.doc_type)}</td>
<td class="py-3">${inv.order_number
? `<a href="<?php echo $server_url?>order/manage_order.php?id=${inv.order_id}">${escape_html(inv.order_number)}</a>`
: '<span class="text-muted">—</span>'}</td>
<td class="py-3">${escape_html(inv.contact_name || '—')}</td>
<td class="py-3">${get_dept_label(inv.department_id)}</td>
<td class="py-3">${inv.issued_date ? format_date(inv.issued_date) : '<span class="text-muted">—</span>'}</td>
<td class="py-3">${inv.due_date ? format_date(inv.due_date) : '<span class="text-muted">—</span>'}</td>
<td class="py-3 fw-semibold">${format_number(inv.grand_total, 2)}</td>
<td class="py-3">${invoice_status_badge(inv.status)}</td>
<td class="py-3">${invoice_status_badge(inv)}</td>
<td class="py-3">
<a href="<?php echo $server_url?>order/manage_invoice.php?id=${inv.id}" title="View">
<i class="ti ti-eye fs-5"></i>
@@ -329,11 +342,14 @@
// ── Boot ─────────────────────────────────────────────────────────────────
$(function() {
$(async function() {
await load_dept_cache();
populate_dept_filter('filter_dept');
retrieve_invoices();
$('#search_input').on('keyup', function(e) {
if (e.key === 'Enter') retrieve_invoices();
});
$('#filter_type, #filter_status, #filter_dept').on('change', retrieve_invoices);
});
</script>