wms-app/app/ics/stock_transfer.php

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

?>

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


  <!-- MAIN CONTENT -->
  <main id="content" class="content py-15">
    <div class="container-fluid">
      <div class="row ">
        <div class="col-12">
          <div class="mb-6 d-flex justify-content-between align-items-center">
            <h1 class="fs-3 mb-0">Stock Transfer
            </h1>
            <a href="<?php echo $server_url?>ics/manage_stock_transfer.php" class="btn btn-primary">
              <span><i class="ti ti-plus"></i></span>
              <span>ADD Stock Transfer</span></a>

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

      <div class="row g-5">

        <div class="mb-3 col-lg-2">
          <input class="form-control" value='Warehouse From' disabled>
        </div>
        <div class="mb-3 col-lg-4">
          <select name="warehouse" id="warehouse" class="form-select" required></select>
        </div>
        <div class="mb-3 col-lg-4">
          <button class='btn btn-secondary' onclick='retrieve_stock_transfer()'>Search</button>
        </div>

        <div class="col-12">
          <div class="card">
            <div class="card-body p-5">
              <h2 class="mb-4 fs-5">Item List</h2>
              <div class="table-responsive">
                <table class="table table-hover mb-0 table-centered" id="stock_transfer">
                  <thead class="table-primary border-light">
                    <tr>
                      <th>Date</th>
                      <th>Product</th>
                      <th>Quantity</th>
                      <th>Zone</th>
                      <th>Aisle</th>
                      <th>Rack</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                  <tfoot class="">

                  </tfoot>
                </table>
              </div>
            </div>

          </div>

        </div>

      </div>

    </div>
  </main>

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

  <script>
  function retrieve_stock_transfer() {

    return ajax_request({
      url: "<?php echo $server_url?>ics/api/engine/stock_transfer.php",
      autoPrepare: true,
      checkRequired: 0,
      debugMode: 0,
      action: 'read',
      onSuccess: function(res) {

        // Register the array as a table name
        alasql('CREATE TABLE IF NOT EXISTS stock_transfer');
        alasql.tables.stock_transfer.data = res.output || [];

        var total_records = alasql.tables.stock_transfer.data.length;

        var table_id = 'stock_transfer';

        var page = generate_pagination(table_id, total_records);
        $(`table#${table_id} tfoot`).html(page);

        // dynamic function name
        if (typeof window[`change_page_${table_id}`] === "function") {
          window[`change_page_${table_id}`](1);
        } else {
          console.error(`Function change_page_${table_id} does not exist.`);
        }
      }
    });

  }



  function change_page_stock_transfer(page_num) {

    var offset = (page_num - 1) * prop_limit;

    var page_data = alasql(`SELECT * FROM stock_transfer LIMIT ${prop_limit} OFFSET ${offset}`);

    var body = ``;

    var warehouse = $(`select#warehouse`).val();

    $.each(page_data, function(key, item) {
      body += `<tr>
            <td class="py-3">${format_date(item["date"])}</td>
            <td class="py-3">${item["product_sku"]}: ${item['product_name']}</td>
            <td class="py-3">${item['quantity']}</td>
            <td class="py-3">${item['zone']}</td>
            <td class="py-3">${item['aisle']}</td>
            <td class="py-3">${item['rack']}</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?>ics/manage_stock_transfer.php?id=${item['id']}&wh=${warehouse}" class=""><i class="ti ti-eye fs-5"></i></a>
              <a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
            </td>
          </tr>`;
    })

    $("table#stock_transfer > tbody").html(body);

  }



  function retrieve_warehouse() {

    return ajax_request({
      url: "<?php echo $server_url?>inventory/api/engine/warehouse.php",
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        var option = ``;
        $.each(res.output, function(key, item) {
          option += `<option value='${item.id}'>${item.warehouse_name}</option>`;
        })
        $(`select#warehouse`).html(option);
      }
    });

  }

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

</body>

</html>