wms-app/app/accounting/gl_movement.php

<?php
  require_once __DIR__ . '/../session.php';
  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 mb-5">
        <div class="col-12">
          <h1 class="fs-3 mb-1">GL Movement</h1>
          <p class="mb-0 text-muted">Per-account ledger with opening balance and running total</p>
        </div>
      </div>

      <!-- Filters -->
      <div class="card p-4 mb-4">
        <div class="row g-2 align-items-end">
          <div class="col-md-2">
            <label class="form-label mb-1 small">Account</label>
            <select id="f_account" class="form-select form-select-sm">
              <option value="">— Select account —</option>
            </select>
          </div>
          <div class="col-auto">
            <label class="form-label mb-1 small">From Date</label>
            <input type="text" id="f_from" class="form-control form-control-sm" placeholder="DD/MM/YYYY" style="width:160px;">
          </div>
          <div class="col-auto">
            <label class="form-label mb-1 small">To Date</label>
            <input type="text" id="f_to" class="form-control form-control-sm" placeholder="DD/MM/YYYY" style="width:160px;">
          </div>
          <div class="col-auto">
            <label class="form-label mb-1 small">Department</label>
            <select id="f_department" class="form-select form-select-sm" style="width:200px;">
              <option value="0">All Departments</option>
            </select>
          </div>
          <div class="col-auto">
            <button class="btn btn-secondary btn-sm" onclick="load_report()">
              <i class="ti ti-search me-1"></i>Run
            </button>
          </div>
          <div class="col-auto">
            <div class="dropdown">
              <a href="#" role="button" class="btn btn-outline-secondary btn-sm text-nowrap" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-download me-1"></i>Export
              </a>
              <div class="dropdown-menu dropdown-menu-end p-0" style="min-width:160px;">
                <div class="d-flex gap-3 align-items-center border-bottom px-3 py-3">
                  <i class="ti ti-download"></i><div><h4 class="mb-0 small">Export</h4></div>
                </div>
                <div class="p-3 d-flex flex-column gap-1 small lh-lg">
                  <a href="javascript:;" class="ac-export-link" onclick="export_report('csv')"><i class="ti ti-file-type-csv me-2"></i>CSV</a>
                  <a href="javascript:;" class="ac-export-link" onclick="export_report('xlsx')"><i class="ti ti-file-type-xls me-2"></i>Excel</a>
                  <a href="javascript:;" class="ac-export-link" onclick="export_report('pdf')"><i class="ti ti-file-type-pdf me-2"></i>PDF</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Report -->
      <div id="glm_header_card" class="card p-4 mb-3" style="display:none!important;">
        <div class="d-flex gap-5">
          <div><p class="text-muted small mb-0">Account</p><strong id="glm_account_title">—</strong></div>
          <div><p class="text-muted small mb-0">Date Range</p><strong id="glm_period_title">—</strong></div>
          <div class="ms-auto text-end"><p class="text-muted small mb-0">Opening Balance</p><strong id="glm_opening">—</strong></div>
        </div>
      </div>

      <div class="card">
        <div class="card-body p-0">
          <table class="table table-hover mb-0 table-sm">
            <thead class="table-primary border-light">
              <tr>
                <th>Date</th>
                <th>Period</th>
                <th>Department</th>
                <th>Reference</th>
                <th>Description</th>
                <th class="text-end">Debit</th>
                <th class="text-end">Credit</th>
                <th class="text-end">Balance</th>
              </tr>
            </thead>
            <tbody id="glm_tbody">
              <tr><td colspan="8" class="text-center text-muted py-5">Select an account and date range, then click Run.</td></tr>
            </tbody>
            <tfoot id="glm_tfoot"></tfoot>
          </table>
        </div>
      </div>

    </div>
  </main>

  <?php require '../include_ending.php'; ?>

  <script>
  var export_data = [];
  var now = new Date();
  var curMonth = now.getFullYear() + '-' + String(now.getMonth()+1).padStart(2,'0');
  document.getElementById('f_from').value = curMonth + '-01';
  document.getElementById('f_to').value   = curMonth + '-' + String(new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()).padStart(2,'0');
  flatpickr('#f_from, #f_to', { dateFormat: 'Y-m-d', altInput: true, altFormat: 'd/m/Y', allowInput: true });

  // Load posting accounts into dropdown
  ajax_request({
    url: server_url + 'accounting/api/engine/account.php',
    autoPrepare: true,
    checkRequired: 0,
    noLoading: true,
    queueLock: false,
    action: 'read',
    onSuccess: function(res) {
      var opts = '<option value="">— Select account —</option>';
      (res.output || []).filter(function(a){ return a.is_posting == 1 && a.status == 1; })
        .forEach(function(a) {
          opts += '<option value="' + escape_html(a.account_code) + '">' +
            escape_html(a.account_code + ' — ' + a.account_name) + '</option>';
        });
      document.getElementById('f_account').innerHTML = opts;
    }
  });

  load_departments();

  function load_departments() {
    ajax_request({
      url: server_url + 'accounting/api/engine/department.php',
      autoPrepare: true,
      checkRequired: 0,
      noLoading: true,
      action: 'read',
      onSuccess: function(res) {
        var html = '<option value="0">All Departments</option>';
        (res.output || []).filter(function(d){ return String(d.status) === '1'; }).forEach(function(d) {
          html += '<option value="' + d.id + '">' + escape_html(d.dept_code + ' - ' + d.dept_name) + '</option>';
        });
        document.getElementById('f_department').innerHTML = html;
      }
    });
  }

  function load_report() {
    var code = document.getElementById('f_account').value;
    var from = document.getElementById('f_from').value;
    var to   = document.getElementById('f_to').value;
    var dept = document.getElementById('f_department').value || '0';
    if (!code) { bootbox.alert('Select an account.'); return; }
    if (!from || !to) { bootbox.alert('Select both dates.'); return; }

    export_data = [];
    document.getElementById('glm_tbody').innerHTML =
      '<tr><td colspan="8" class="text-center text-muted py-5"><span class="spinner-border spinner-border-sm me-2"></span>Loading...</td></tr>';
    document.getElementById('glm_tfoot').innerHTML = '';

    ajax_request({
      url: server_url + 'accounting/api/engine/get_gl_movement.php',
      autoPrepare: true,
      checkRequired: 0,
      noLoading: true,
      action: 'read',
      data: { account_code: code, from_date: from, to_date: to, department_id: dept },
      onSuccess: function(res) {
        var d    = res.output;
        var rows = d.rows || [];

        document.getElementById('glm_account_title').textContent = d.account_code + ' — ' + d.account_name;
        document.getElementById('glm_period_title').textContent  = d.from_date + ' → ' + d.to_date;
        document.getElementById('glm_opening').textContent       = format_number(d.opening_balance);
        document.getElementById('glm_header_card').style.removeProperty('display');

        if (rows.length === 0) {
          document.getElementById('glm_tbody').innerHTML =
            '<tr><td colspan="8" class="text-center text-muted py-5">No movement in this date range.</td></tr>';
          document.getElementById('glm_tfoot').innerHTML = '';
          return;
        }

        var running = parseFloat(d.opening_balance) || 0;
        var total_dr = 0, total_cr = 0;
        var html = '';
        export_data.push({ date:'Opening Balance', period:'', department:'', reference:'', description:'', debit:'', credit:'', balance: running });
        rows.forEach(function(r) {
          var dr = parseFloat(r.debit)  || 0;
          var cr = parseFloat(r.credit) || 0;
          running  += dr - cr;
          total_dr += dr;
          total_cr += cr;
          export_data.push({ date:r.entry_date||'', period:r.period||'', department:r.dept_code||'', reference:r.reference||'', description:r.line_description||r.gl_description||'', debit:dr||'', credit:cr||'', balance:running });
          var bal_color = running >= 0 ? '' : 'text-danger';
          html += '<tr>' +
            '<td class="small">' + escape_html(format_date(r.entry_date)) + '</td>' +
            '<td class="small">' + escape_html(r.period) + '</td>' +
            '<td class="small">' + (r.dept_code ? escape_html(r.dept_code) : '<span class="text-muted">—</span>') + '</td>' +
            '<td class="small">' + escape_html(r.reference || '—') + '</td>' +
            '<td class="small text-muted">' + escape_html(r.line_description || r.gl_description || '—') + '</td>' +
            '<td class="text-end small">' + (dr ? format_number(dr) : '—') + '</td>' +
            '<td class="text-end small">' + (cr ? format_number(cr) : '—') + '</td>' +
            '<td class="text-end small fw-semibold ' + bal_color + '">' + format_number(running) + '</td>' +
          '</tr>';
        });
        document.getElementById('glm_tbody').innerHTML = html;
        document.getElementById('glm_tfoot').innerHTML =
          '<tr class="table-light fw-semibold">' +
            '<td colspan="5" class="text-end">Closing Balance</td>' +
            '<td class="text-end">' + format_number(total_dr) + '</td>' +
            '<td class="text-end">' + format_number(total_cr) + '</td>' +
            '<td class="text-end">' + format_number(running) + '</td>' +
          '</tr>';
      }
    });
  }
  function export_report(format) {
    if (export_data.length === 0) { bootbox.alert('No data to export. Run the report first.'); return; }
    var code = document.getElementById('f_account').value;
    var from = document.getElementById('f_from').value;
    var to   = document.getElementById('f_to').value;
    var filename = 'gl_movement_' + code + '_' + from + '_' + to;
    if (format === 'csv') {
      alasql('SELECT * INTO CSV("' + filename + '.csv",{headers:true}) FROM ?', [export_data]);
    } else if (format === 'xlsx') {
      alasql('SELECT * INTO XLSX("' + filename + '.xlsx",{headers:true}) FROM ?', [export_data]);
    } else if (format === 'pdf') {
      var { jsPDF } = window.jspdf;
      var doc = new jsPDF({ orientation: 'landscape' });
      doc.setFontSize(11);
      doc.text('GL Movement  ' + code + '  ' + from + ' to ' + to, 14, 14);
      doc.autoTable({
        startY: 20,
        head: [['Date','Period','Department','Reference','Description','Debit','Credit','Balance']],
        body: export_data.map(function(r){ return [r.date,r.period,r.department,r.reference,r.description,r.debit,r.credit,r.balance]; }),
        styles: { fontSize: 7 },
        headStyles: { fillColor: [41,128,185] },
      });
      doc.save(filename + '.pdf');
    }
  }
  </script>

  <script src="<?php echo $server_url?>assets/vendor/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script src="<?php echo $server_url?>assets/vendor/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="<?php echo $server_url?>assets/vendor/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

</body>
</html>