  <!-- Main Content -->
  <div class="main-content">
  <h1>Transfer Report</h1>

  <div class="row-group">
    <div class="filter-group">
      <label for="startDate">Start Date:</label>
      <input type="date" id="startDate" name="startDate">
    </div>
  
    <div class="filter-group">
      <label for="endDate">End Date:</label>
      <input type="date" id="endDate" name="endDate">
    </div>
  
    <button id="filterButton" class="filter-button">Filter</button>
  </div>
  
  <!-- Table to display all transfers -->
  <table id="transfers-table">
    <thead>
      <tr>
        <th>Item Name</th>
        <th>Quantity</th>
        <th>(In/Out)</th>
        <th>Branch</th>
        <th>Status</th> <!-- New balance column -->
        <th>Date</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>


  <div id="confirmation-modal" class="confirmation-modal">
    <div class="confirmation-modal-content">
      <p id="confirmation-message"></p>
      <button id="confirm-action">Confirm</button>
      <button id="cancel-action">Cancel</button>
    </div>
  </div>
  <script src="./js/getTransfer.js">
   
  </script>
</body>
</html>
