accounting workflows

app/revenue/invoice.php

@@ -11,18 +11,176 @@
   <main id="content" class="content py-15">
     <div class="container-fluid">
 
-      <div class="row mb-6">
+      <div class="row">
         <div class="col-12">
-          <h1 class="fs-3 mb-1">Sales Invoices</h1>
-          <p class="mb-0 text-muted">Sales invoice management</p>
+          <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 p-5 text-center text-muted">
-            <i class="ti ti-file-invoice fs-1 mb-3 d-block"></i>
-            <p class="mb-0">Sales Invoices coming soon.</p>
+          <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>
@@ -32,5 +190,241 @@
 
   <?php require '../include_ending.php'; ?>
 
+  <script>
+  var current_tab = <?php echo json_encode($_GET['tab'] ?? 'invoice'); ?>;
+  var all_invoices = [];
+  var formula_map  = {};
+
+  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">
+          <a href="<?php echo $server_url?>revenue/manage_invoice.php?id=${inv.id}" title="View">
+            <i class="ti ti-eye 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">
+          <a href="<?php echo $server_url?>revenue/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);
+  }
+
+  $(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>
+
 </body>
 </html>