wms-app/app/asset/categories.php

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

<body>
  <?php require '../include_topbar.php'; ?>
  <?php require '../include_sidebar_asset.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">Asset Categories</h1>
              <p class="mb-0">Useful life and GL accounts used by each kind of asset</p>
            </div>
            <div>
              <a href="<?php echo $server_url?>asset/manage_category.php" class="btn btn-primary" data-min-role="admin">
                <i class="ti ti-plus me-1"></i>Add Category
              </a>
            </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-between align-items-center gap-3">
                <span class="text-muted small" id="category_summary"></span>
                <div class="position-relative" style="min-width:240px;">
                  <input type="search" id="search_category" 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="category_table">
                  <thead class="table-primary border-light">
                    <tr>
                      <th>Code</th>
                      <th>Name</th>
                      <th>Class</th>
                      <th class="text-end">Life (months)</th>
                      <th>Cost / Accumulated / Expense</th>
                      <th class="text-end">Assets</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 src="<?php echo $server_url?>assets/js/asset.js"></script>

  <script>
  var search_term = '';

  function retrieve_categories() {
    return ajax_request({
      url: server_url + 'asset/api/engine/category.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        alasql('CREATE TABLE IF NOT EXISTS md_asset_category');
        alasql.tables.md_asset_category.data = res.output || [];
        var s = res.stats || {};
        $('#category_summary').text((s.total || 0) + ' categories · ' + (s.active || 0) + ' active');
        change_page(1);
      }
    });
  }

  function change_page(page_num) {
    var offset = (page_num - 1) * prop_limit;
    var kw = search_term.toLowerCase();
    var rows = alasql('SELECT * FROM md_asset_category ORDER BY category_code').filter(function(r) {
      return !kw || String(r.category_code).toLowerCase().indexOf(kw) !== -1 || String(r.category_name).toLowerCase().indexOf(kw) !== -1;
    });

    $('table#category_table tfoot').html(generate_pagination('category_table', rows.length));

    if (!rows.length) {
      $('table#category_table tbody').html('<tr><td colspan="8" class="text-center py-5 text-muted">No categories yet. Add one before creating assets.</td></tr>');
      return;
    }

    var body = '';
    rows.slice(offset, offset + parseInt(prop_limit, 10)).forEach(function(item) {
      body += `<tr>
        <td class="py-3 fw-semibold">${escape_html(item.category_code)}</td>
        <td class="py-3">${escape_html(item.category_name)}</td>
        <td class="py-3">${asset_class_badge(item.asset_class)}</td>
        <td class="py-3 text-end">${item.useful_life_months}</td>
        <td class="py-3 small text-muted">${escape_html(item.cost_account_code)} / ${escape_html(item.accum_account_code)} / ${escape_html(item.expense_account_code)}</td>
        <td class="py-3 text-end">${item.asset_count}</td>
        <td class="py-3">${String(item.status) === '1' ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'}</td>
        <td class="py-3">
          <a href="${server_url}asset/manage_category.php?id=${item.id}"><i class="ti ti-eye fs-5"></i></a>
          ${String(item.status) === '1' ? `<a href="javascript:;" class="link-danger ms-2" data-min-role="admin" onclick="remove_category(${item.id})"><i class="ti ti-ban fs-5"></i></a>` : ''}
        </td>
      </tr>`;
    });
    $('table#category_table tbody').html(body);
  }

  function remove_category(id) {
    bootbox.confirm({
      message: 'Deactivate this category? Existing assets keep using its accounts.',
      buttons: { confirm: { label: 'Deactivate', className: 'btn-danger' }, cancel: { label: 'Back', className: 'btn-secondary' } },
      callback: function(ok) {
        if (!ok) return;
        ajax_request({
          url: server_url + 'asset/api/engine/remove_category.php',
          autoPrepare: true,
          checkRequired: 0,
          action: 'delete',
          data: { id: id },
          onSuccess: function() { retrieve_categories(); }
        });
      }
    });
  }

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

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

</body>
</html>