wms-app/app/accounting/departments.php

<?php
  session_start();
  require '../config.php';
  require '../include_header.php';
?>

<body>
  <?php require '../include_topbar.php'; ?>
  <?php require '../include_master_sidebar.php'; ?>

  <main id="content" class="content py-15">
    <div class="container-fluid">

      <!-- Page header -->
      <div class="row">
        <div class="col-12">
          <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
            <div>
              <h1 class="fs-3 mb-1">Departments</h1>
              <p class="mb-0">GL department dimensions for journal entries</p>
            </div>
            <div>
              <a href="<?php echo $server_url?>accounting/manage_department.php" class="btn btn-primary">
                <i class="ti ti-plus me-1"></i>Add Department
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Stats -->
      <div class="row g-5 mb-5">
        <div class="col-xl-4 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-primary bg-opacity-10 text-primary rounded-2">
                  <i class="ti ti-building fs-4"></i>
                </div>
                <div>
                  <span>Total</span>
                  <h2 class="fw-bold mb-0" id="stat_total">—</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-success bg-opacity-10 text-success rounded-2">
                  <i class="ti ti-check fs-4"></i>
                </div>
                <div>
                  <span>Active</span>
                  <h2 class="fw-bold mb-0" id="stat_active">—</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-secondary bg-opacity-10 text-secondary rounded-2">
                  <i class="ti ti-x fs-4"></i>
                </div>
                <div>
                  <span>Inactive</span>
                  <h2 class="fw-bold mb-0" id="stat_inactive">—</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Table -->
      <div class="row">
        <div class="col-12">
          <div class="card overflow-hidden">
            <div class="card-body p-6">

              <div class="mb-5 d-flex justify-content-end">
                <div class="position-relative" style="min-width:240px;">
                  <input type="search" id="search_dept" class="form-control ps-9" placeholder="Search code or name…">
                  <span class="position-absolute top-25 ms-4">
                    <i class="ti ti-search text-muted"></i>
                  </span>
                </div>
              </div>

              <div class="table-responsive">
                <table class="table mb-0 text-nowrap table-hover table-centered" id="dept_table">
                  <thead class="table-primary border-light">
                    <tr>
                      <th>Code</th>
                      <th>Name</th>
                      <th>Description</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                  <tfoot></tfoot>
                </table>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </main>

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

  <script>
  var search_term = '';

  function retrieve_departments() {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/department.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        alasql('CREATE TABLE IF NOT EXISTS md_department');
        alasql.tables.md_department.data = res.output || [];
        change_page(1);
      }
    });
  }

  function change_page(page_num) {
    var offset = (page_num - 1) * prop_limit;
    var kw = search_term.toLowerCase();

    var filtered = kw
      ? alasql(`SELECT * FROM md_department WHERE LOWER(dept_code) LIKE '%${kw}%' OR LOWER(dept_name) LIKE '%${kw}%' ORDER BY dept_code`)
      : alasql(`SELECT * FROM md_department ORDER BY dept_code`);

    $('table#dept_table tfoot').html(generate_pagination('dept_table', filtered.length));

    if (filtered.length === 0) {
      $('table#dept_table tbody').html('<tr><td colspan="5" class="text-center py-5 text-muted">No departments found.</td></tr>');
      return;
    }

    var page_data = filtered.slice(offset, offset + prop_limit);
    var body = '';
    $.each(page_data, function(i, item) {
      body += `<tr>
        <td class="py-3 fw-semibold">${escape_html(item.dept_code)}</td>
        <td class="py-3">${escape_html(item.dept_name)}</td>
        <td class="py-3 text-muted">${item.description ? escape_html(item.description) : '—'}</td>
        <td class="py-3">${item.status ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'}</td>
        <td class="py-3">
          <a href="<?php echo $server_url?>accounting/manage_department.php?id=${item.id}"><i class="ti ti-eye fs-5"></i></a>
          <a href="javascript:;" class="link-danger ms-2" onclick="remove_department(${item.id}, $(this))"><i class="ti ti-trash fs-5"></i></a>
        </td>
      </tr>`;
    });
    $('table#dept_table tbody').html(body);
  }

  function remove_department(id, element) {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/remove_department.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'delete',
      data: { id: id },
      onSuccess: function() { element.closest('tr').remove(); }
    });
  }

  function retrieve_stats() {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/department_stats.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        $('#stat_total').text(res.total || 0);
        $('#stat_active').text(res.active || 0);
        $('#stat_inactive').text(res.inactive || 0);
      }
    });
  }

  function debounce(fn, ms) {
    var t;
    return function() { var a = arguments, c = this; clearTimeout(t); t = setTimeout(function() { fn.apply(c, a); }, ms); };
  }

  $('#search_dept').on('input', debounce(function() {
    search_term = $(this).val().trim();
    change_page(1);
  }, 200));

  $(async function() {
    try {
      await retrieve_stats();
      await retrieve_departments();
    } catch(e) { console.log(e); }
  });
  </script>

</body>
</html>