Files
wms-app/app/revenue/invoice.php
T

527 lines
22 KiB
PHP

<?php
session_start();
require '../config.php';
require '../include_header.php';
?>
<body>
<?php require '../include_topbar.php'; ?>
<?php require '../include_sidebar_ac.php'; ?>
<main id="content" class="content py-15">
<div class="container-fluid">
<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">Sales Invoices</h1>
<p class="mb-0 text-muted">All sales invoices and credit notes</p>
</div>
<a href="<?php echo $server_url?>revenue/manage_credit_note.php" class="btn btn-primary">
<i class="ti ti-plus me-1"></i>New Credit Note
</a>
</div>
</div>
</div>
<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">Invoices</p>
<h3 class="fw-bold mb-0" id="stat_invoice">—</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">Paid</p>
<h3 class="fw-bold mb-0" id="stat_paid">—</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">Open</p>
<h3 class="fw-bold mb-0" id="stat_open">—</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-file-minus fs-4"></i>
</div>
<div>
<p class="mb-0 text-muted small">Credit Notes</p>
<h3 class="fw-bold mb-0" id="stat_cn">—</h3>
</div>
</div>
</div>
</div>
</div>
<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>
</div>
<div class="row g-5 mb-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-4">
<div class="position-relative">
<input type="text" id="search_input" class="form-control ps-9"
placeholder="Search invoice number, order 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-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="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
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<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="invoice_list">
<thead class="table-primary border-light">
<tr>
<th>Invoice #</th>
<th>Order #</th>
<th>Contact</th>
<th>Department</th>
<th>Issued Date</th>
<th>Due Date</th>
<th>Grand Total</th>
<th>GL Formula</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
<table class="table table-hover mb-0 table-centered d-none" id="cn_list">
<thead class="table-warning border-light">
<tr>
<th>CN #</th>
<th>Order #</th>
<th>Ref Invoice #</th>
<th>Contact</th>
<th>Department</th>
<th>Date</th>
<th>Amount</th>
<th>GL Formula</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<?php require '../include_ending.php'; ?>
<script>
var current_tab = <?php echo json_encode($_GET['tab'] ?? 'invoice'); ?>;
var all_invoices = [];
var formula_map = {};
const can_delete = ['admin', 'owner'].includes(user_role);
function is_invoice_overdue(status, due_date) {
if (String(status) !== '1' || !due_date) return false;
var d = new Date();
var today = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
return due_date < today;
}
function invoice_status_badge(status, due_date, payment_state, doc_type) {
if (payment_state === 'partial') {
return '<span class="badge bg-warning text-dark">Partial</span>';
}
if (payment_state === 'paid') {
return doc_type === 'credit_note'
? '<span class="badge bg-success">Settled</span>'
: '<span class="badge bg-success">Paid</span>';
}
if (is_invoice_overdue(status, due_date)) {
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>',
'4': '<span class="badge bg-light text-dark">Void</span>',
};
return map[String(status)] || '—';
}
function switch_tab(tab) {
current_tab = tab;
$('#invoice_tabs .nav-link').each(function() {
var active = $(this).attr('onclick').includes("'" + tab + "'");
$(this).toggleClass('active', active);
});
$('#invoice_list').toggleClass('d-none', tab !== 'invoice');
$('#cn_list').toggleClass('d-none', tab !== 'credit_note');
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="overdue">Overdue</option>
<option value="4">Void</option>
`);
}
retrieve_invoices();
}
function update_stats() {
$('#stat_invoice').text(format_number(all_invoices.filter(i => i.doc_type === 'invoice').length));
$('#stat_paid').text(format_number(all_invoices.filter(i => i.doc_type === 'invoice' && String(i.status) === '2').length));
$('#stat_open').text(format_number(all_invoices.filter(i => i.doc_type === 'invoice' && ['0', '1'].includes(String(i.status))).length));
$('#stat_cn').text(format_number(all_invoices.filter(i => i.doc_type === 'credit_note').length));
}
function load_formula_map() {
return ajax_request({
url: '<?php echo $server_url?>accounting/api/engine/account_formula.php',
autoPrepare: true,
checkRequired: 0,
action: 'read',
data: {},
onSuccess: function(res) {
formula_map = {};
$.each(res.output || [], function(i, f) {
formula_map[f.id] = f.formula_name;
});
}
});
}
function retrieve_stats_source() {
return ajax_request({
url: '<?php echo $server_url?>order/api/engine/retrieve_invoice.php',
autoPrepare: true,
checkRequired: 0,
action: 'read',
data: { doc_type: '' },
onSuccess: function(res) {
all_invoices = res.output || [];
update_stats();
}
});
}
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 },
onSuccess: function(res) {
var all = res.output || [];
var keyword = $('#search_input').val().toLowerCase();
var 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.order_number || '').toLowerCase().includes(keyword) ||
(inv.contact_name || '').toLowerCase().includes(keyword);
var match_status = status === ''
|| String(inv.status) === status
|| (status === 'overdue' && is_invoice_overdue(inv.status, inv.due_date));
var match_dept = !fil_dept || String(inv.department_id) === fil_dept;
return match_kw && match_status && match_dept;
});
if (current_tab === 'invoice') {
render_invoice_table(data);
} else {
render_cn_table(data);
}
}
});
}
function render_invoice_table(data) {
alasql('DROP TABLE IF EXISTS invoice_list');
alasql('CREATE TABLE invoice_list');
alasql.tables.invoice_list.data = data;
$('table#invoice_list tfoot').html(generate_pagination('invoice_list', data.length));
change_page_invoice_list(1);
}
function change_page_invoice_list(page_num) {
var offset = (page_num - 1) * prop_limit;
var rows = alasql(`SELECT * FROM invoice_list LIMIT ${prop_limit} OFFSET ${offset}`);
var body = '';
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 formula_name = inv.formula_id && formula_map[inv.formula_id]
? escape_html(formula_map[inv.formula_id])
: '<span class="text-muted">—</span>';
body += `<tr>
<td class="py-3 fw-semibold">${escape_html(inv.invoice_number || '')}</td>
<td class="py-3">${inv.order_number ? escape_html(inv.order_number) : '<span class="text-muted">—</span>'}</td>
<td class="py-3">${inv.contact_name ? escape_html(inv.contact_name) : '<span class="text-muted">—</span>'}</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 small">${formula_name}</td>
<td class="py-3">${invoice_status_badge(inv.status, inv.due_date, inv.payment_state, inv.doc_type)}</td>
<td class="py-3 text-nowrap">
<a href="<?php echo $server_url?>revenue/manage_invoice.php?id=${inv.id}" title="View" class="me-2">
<i class="ti ti-eye fs-5"></i>
</a>
<a href="javascript:;" title="View GL Entry" class="me-2" onclick="show_gl_modal('invoice',${inv.id})">
<i class="ti ti-book fs-5 text-secondary"></i>
</a>
${can_delete ? `<a href="javascript:;" title="Delete" class="link-danger" onclick="delete_invoice(${inv.id},'${escape_html(inv.invoice_number)}')"><i class="ti ti-trash fs-5"></i></a>` : ''}
</td>
</tr>`;
});
$('table#invoice_list tbody').html(body);
}
function render_cn_table(data) {
alasql('DROP TABLE IF EXISTS cn_list');
alasql('CREATE TABLE cn_list');
alasql.tables.cn_list.data = data;
$('table#cn_list tfoot').html(generate_pagination('cn_list', data.length));
change_page_cn_list(1);
}
function change_page_cn_list(page_num) {
var offset = (page_num - 1) * prop_limit;
var rows = alasql(`SELECT * FROM cn_list LIMIT ${prop_limit} OFFSET ${offset}`);
var body = '';
if (!rows.length) {
$('table#cn_list tbody').html('<tr><td colspan="10" class="text-center py-5 text-muted">No credit notes found.</td></tr>');
return;
}
$.each(rows, function(i, cn) {
var formula_name = cn.formula_id && formula_map[cn.formula_id]
? escape_html(formula_map[cn.formula_id])
: '<span class="text-muted">—</span>';
body += `<tr>
<td class="py-3 fw-semibold">${escape_html(cn.invoice_number || '')}</td>
<td class="py-3">${cn.order_number ? escape_html(cn.order_number) : '<span class="text-muted">—</span>'}</td>
<td class="py-3">${cn.ref_invoice_number ? escape_html(cn.ref_invoice_number) : '<span class="text-muted">—</span>'}</td>
<td class="py-3">${cn.contact_name ? escape_html(cn.contact_name) : '<span class="text-muted">—</span>'}</td>
<td class="py-3">${get_dept_label(cn.department_id)}</td>
<td class="py-3">${cn.issued_date ? format_date(cn.issued_date) : '<span class="text-muted">—</span>'}</td>
<td class="py-3 fw-semibold text-danger">${format_number(cn.grand_total, 2)}</td>
<td class="py-3 small">${formula_name}</td>
<td class="py-3">${invoice_status_badge(cn.status, cn.due_date, cn.payment_state, cn.doc_type)}</td>
<td class="py-3 text-nowrap">
<a href="<?php echo $server_url?>revenue/manage_invoice.php?id=${cn.id}" title="View" class="me-2">
<i class="ti ti-eye fs-5"></i>
</a>
<a href="javascript:;" title="View GL Entry" class="me-2" onclick="show_gl_modal('credit_note',${cn.id})">
<i class="ti ti-book fs-5 text-secondary"></i>
</a>
${can_delete ? `<a href="javascript:;" title="Delete" class="link-danger" onclick="delete_invoice(${cn.id},'${escape_html(cn.invoice_number)}')"><i class="ti ti-trash fs-5"></i></a>` : ''}
</td>
</tr>`;
});
$('table#cn_list tbody').html(body);
}
function delete_invoice(id, doc_number) {
bootbox.confirm({
message: '<strong>Delete ' + escape_html(doc_number) + '?</strong><br>This cannot be undone. The document number will be freed for reuse.',
buttons: {
confirm: { label: 'Delete', className: 'btn-danger' },
cancel: { label: 'Back', className: 'btn-secondary' }
},
callback: function(result) {
if (!result) return;
ajax_request({
url: server_url + 'order/api/engine/delete_invoice.php',
autoPrepare: true, checkRequired: 0, action: 'delete',
data: { id: id },
onSuccess: function() { retrieve_invoices(); }
});
}
});
}
var _GL_SOURCE_LABELS = { invoice:'Invoice', credit_note:'Credit Note', purchase_invoice:'Purchase Invoice', supplier_credit_note:'Supplier Credit Note', receipt:'Receipt', payment:'Payment', manual:'Manual', reversal:'Reversal' };
var _GL_SOURCE_BADGE = { invoice:'bg-success-subtle text-success', credit_note:'bg-warning-subtle text-warning', purchase_invoice:'bg-primary-subtle text-primary', supplier_credit_note:'bg-secondary-subtle text-secondary', receipt:'bg-info-subtle text-info', payment:'bg-danger-subtle text-danger', manual:'bg-dark-subtle text-dark', reversal:'bg-danger-subtle text-danger' };
function _gl_source_badge(t) { return '<span class="badge ' + (_GL_SOURCE_BADGE[t]||'bg-light text-dark') + '">' + (_GL_SOURCE_LABELS[t]||t) + '</span>'; }
function show_gl_modal(doc_type, source_id) {
$('#gl-modal-body').html('<div class="text-center text-muted py-4"><i class="ti ti-loader ti-spin me-1"></i>Loading…</div>');
$('#glModal').modal('show');
ajax_request({
url: server_url + 'accounting/api/engine/get_gl_by_source.php',
autoPrepare: true, checkRequired: 0, noLoading: true, action: 'read',
data: { doc_type: doc_type, source_id: source_id },
onSuccess: function(res) {
if (!res.output) {
$('#gl-modal-body').html('<p class="text-muted text-center py-4">No GL entry posted for this document.</p>');
return;
}
var h = res.output.header, lines = res.output.lines || [];
var total_debit = 0, total_credit = 0, lines_html = '';
$.each(lines, function(i, l) {
total_debit += parseFloat(l.debit) || 0;
total_credit += parseFloat(l.credit) || 0;
var dept = l.dept_code ? escape_html(l.dept_code + (l.dept_name ? ' - ' + l.dept_name : '')) : '<span class="text-muted">—</span>';
lines_html += '<tr>' +
'<td class="fw-semibold">' + escape_html(l.account_code) + '</td>' +
'<td>' + escape_html(l.account_name) + '</td>' +
'<td>' + dept + '</td>' +
'<td class="text-end">' + (parseFloat(l.debit) ? format_number(l.debit, 2) : '<span class="text-muted">—</span>') + '</td>' +
'<td class="text-end">' + (parseFloat(l.credit) ? format_number(l.credit, 2) : '<span class="text-muted">—</span>') + '</td>' +
'<td class="text-muted small">' + escape_html(l.description || '—') + '</td></tr>';
});
lines_html += '<tr class="table-light fw-semibold"><td colspan="3">Total</td>' +
'<td class="text-end">' + format_number(total_debit, 2) + '</td>' +
'<td class="text-end">' + format_number(total_credit, 2) + '</td><td></td></tr>';
var balanced = Math.abs(total_debit - total_credit) < 0.01;
var bal_badge = balanced ? '<span class="badge bg-success-subtle text-success ms-2">Balanced</span>' : '<span class="badge bg-danger-subtle text-danger ms-2">Unbalanced</span>';
$('#gl-modal-body').html(
'<div class="row g-3 mb-4 text-sm">' +
'<div class="col-sm-4"><div class="text-muted small">Source</div><div>' + _gl_source_badge(h.source_type) + '</div></div>' +
'<div class="col-sm-4"><div class="text-muted small">Period</div><div class="fw-semibold">' + escape_html(h.period) + '</div></div>' +
'<div class="col-sm-4"><div class="text-muted small">Formula</div><div>' + escape_html(h.formula_name || '—') + '</div></div>' +
'<div class="col-sm-4"><div class="text-muted small">Posted At</div><div class="text-muted small">' + escape_html(h.posted_at) + '</div></div>' +
'<div class="col-sm-4"><div class="text-muted small">Updated At</div><div class="text-muted small">' + escape_html(h.updated_at_fmt) + '</div></div>' +
'</div>' +
'<div class="d-flex align-items-center mb-2"><span class="fw-semibold">Journal Lines</span>' + bal_badge + '</div>' +
'<table class="table table-sm table-hover mb-0 table-centered">' +
'<thead class="table-light"><tr><th>Account Code</th><th>Account Name</th><th>Department</th><th class="text-end">Debit</th><th class="text-end">Credit</th><th>Description</th></tr></thead>' +
'<tbody>' + lines_html + '</tbody></table>'
);
}
});
}
$(async function() {
try {
await load_dept_cache();
populate_dept_filter('filter_dept');
await retrieve_stats_source();
await load_formula_map();
$('#search_input').on('keyup', function(e) {
if (e.key === 'Enter') retrieve_invoices();
});
$('#filter_status, #filter_dept').on('change', retrieve_invoices);
if (current_tab !== 'invoice') {
switch_tab(current_tab);
} else {
await retrieve_invoices();
}
} catch(e) { console.log(e); }
});
</script>
<!-- GL Entry Modal -->
<div class="modal fade" id="glModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gl-modal-title"><i class="ti ti-book me-2"></i>GL Entry</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="gl-modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>