


  <div class="main-content">
    <h2>Transaction Summary</h2>
    
   

<!-- Filters Section -->
<div  class="transactions-filter">
  <!-- Item Name Filter -->

    <label for="item-name-filter">Item Name:</label>
    <input type="text" id="item-name-filter" placeholder="Search...">


  <!-- Date Filters -->

    <label for="date-from-filter">From:</label>
    <input type="date" id="date-from-filter">
    
    <label for="date-to-filter">To:</label>
    <input type="date" id="date-to-filter">

  
  <!-- Transaction Type Filter -->
  
    <label for="transaction-type-filter">Type:</label>
    <select id="transaction-type-filter">
      <option value="selling">Selling</option>
      <option value="purchasing">Purchasing</option>
      <option value="using">Using</option>
      <option value="producing">Producing</option>
    </select>

</div>




    
    <!-- Table for Transaction Summary -->
    <div id="summary-container">
      <table id="summary-table">
        <thead>
        
            <!-- Dynamically add branch columns here with colspan -->
        
        </thead>
        <tbody>
          <!-- Summary rows will be dynamically added here -->
        </tbody>
      </table>
      
      <!-- Summary section for totals -->
      <div id="summary-section"></div>
    </div>
  </div>



  <!-- Modal for Transaction Details -->
  <div id="details-modal" class="modal">
    <div class="modal-content">
    
      <span class="close" onclick="closeDetailsModal()">&times;</span>
      <h3>Transaction Details</h3>
      <table id="transaction-details-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
            <th>Customer</th>
          </tr>
        </thead>
        <tbody>
          <!-- Details rows will be dynamically added here -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- Link to your JavaScript file -->
  <script src="./js/summary.js"></script>
</body>
</html>
