342 lines
12 KiB
PHP
342 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 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">Invoices</h1>
|
|
<p class="mb-0">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>
|
|
</div>
|
|
|
|
<!-- Filter bar -->
|
|
<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-5">
|
|
<div class="position-relative">
|
|
<input type="text" id="search_input" class="form-control ps-9"
|
|
placeholder="Search 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">
|
|
<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="4">Void</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>
|
|
|
|
<!-- 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">Order #</th>
|
|
<th class="py-3">Contact</th>
|
|
<th class="py-3">Issued Date</th>
|
|
<th class="py-3">Due Date</th>
|
|
<th class="py-3">Grand Total</th>
|
|
<th class="py-3">Status</th>
|
|
<th class="py-3">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<?php require '../include_ending.php'; ?>
|
|
|
|
<script>
|
|
|
|
var current_tab = 'invoice';
|
|
|
|
|
|
// ── Badges ────────────────────────────────────────────────────────────────
|
|
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)] ?? '—';
|
|
}
|
|
|
|
|
|
// ── 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 },
|
|
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;
|
|
});
|
|
|
|
if (current_tab === 'invoice') {
|
|
render_invoice_table(data);
|
|
} else {
|
|
render_cn_table(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── 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 = '';
|
|
|
|
$.each(page_data, function(i, inv) {
|
|
var status = parseInt(inv.status);
|
|
var can_void = status >= 1 && status <= 3;
|
|
|
|
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">${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">
|
|
<a href="<?php echo $server_url?>order/manage_invoice.php?id=${inv.id}" title="View">
|
|
<i class="ti ti-eye fs-5"></i>
|
|
</a>
|
|
${can_void ? `
|
|
<a href="javascript:void(0);" class="link-danger ms-2" title="Void"
|
|
onclick="void_invoice(${inv.id})">
|
|
<i class="ti ti-ban fs-5"></i>
|
|
</a>` : ''}
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
|
|
$('table#invoice_list > tbody').html(body);
|
|
}
|
|
|
|
|
|
// ── Render credit note table ──────────────────────────────────────────────
|
|
function render_cn_table(data) {
|
|
alasql('DROP TABLE IF EXISTS cn_list');
|
|
alasql('CREATE TABLE cn_list');
|
|
alasql.tables.cn_list.data = data;
|
|
|
|
var page = generate_pagination('cn_list', data.length);
|
|
$('table#cn_list tfoot').html(page);
|
|
|
|
if (typeof change_page_cn_list === 'function') {
|
|
change_page_cn_list(1);
|
|
}
|
|
}
|
|
|
|
function change_page_cn_list(page_num) {
|
|
var offset = (page_num - 1) * prop_limit;
|
|
var page_data = alasql(`SELECT * FROM cn_list LIMIT ${prop_limit} OFFSET ${offset}`);
|
|
var body = '';
|
|
|
|
$.each(page_data, function(i, cn) {
|
|
var amount = '<span class="text-danger">' + format_number(cn.grand_total, 2) + '</span>';
|
|
|
|
body += `<tr>
|
|
<td class="py-3 fw-semibold">${cn.invoice_number}</td>
|
|
<td class="py-3">${cn.order_number || '<span class="text-muted">—</span>'}</td>
|
|
<td class="py-3">${cn.ref_invoice_number || '<span class="text-muted">—</span>'}</td>
|
|
<td class="py-3">${cn.contact_name || '<span class="text-muted">—</span>'}</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">${amount}</td>
|
|
<td class="py-3">
|
|
<a href="<?php echo $server_url?>order/manage_invoice.php?id=${cn.id}" title="View">
|
|
<i class="ti ti-eye fs-5"></i>
|
|
</a>
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
|
|
$('table#cn_list > tbody').html(body);
|
|
}
|
|
|
|
|
|
// ── Void invoice ──────────────────────────────────────────────────────────
|
|
function void_invoice(id) {
|
|
bootbox.confirm({
|
|
message: '<strong>Void this invoice?</strong><br>This action cannot be undone.',
|
|
buttons: {
|
|
confirm: { label: 'Void Invoice', 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/update_invoice_status.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'update',
|
|
data: { invoice_id: id, status: 4 },
|
|
onSuccess: function() { retrieve_invoices(); }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// ── Boot ─────────────────────────────────────────────────────────────────
|
|
$(function() {
|
|
retrieve_invoices();
|
|
$('#search_input').on('keyup', function(e) {
|
|
if (e.key === 'Enter') retrieve_invoices();
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|