
<div  class="main-content">

  <h3> Branch Summary</h3>
 <div class="row">

  <div id="common-modal" >
 
    <div class="common-modal-content">
  
      <span id="close-btn" class="close-btn">&times;</span>
      <div class="transactions-filter">
      <!-- Quick filter buttons for day filters -->
      <div class="filter-buttons">
        <button id="todayButton">T</button>
        <button id="last7DaysButton">7 </button>
        <button id="last30DaysButton"> 30 </button>
        <button onclick="toggleColumns()" style="width: 100px; height: 30px; background-color: rgb(5, 163, 248); align-self: flex-end;"> More</button>
    
      </div>
    
    <label for="startDate">Start Date:</label>
    <input type="date" id="startDate" name="startDate">

    <label for="endDate">End Date:</label>
    <input type="date" id="endDate" name="endDate">

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

<button id="show-modal" class="fas fa-calendar-alt"> </button>

<div id="table-wrapper">
  <table id="financialSummaryTable">
    <thead>


      <tr >

        <th>Date</th>
     
        <th>Selling S</th>
        <th>Selling-C</th>
    
        <th>Purchase</th>
        <th>Exp</th>
        <th>Using D</th>  
        <th>Selling D</th> 
         <th>Profit-S</th>
        <th>Profit-C</th>

        <th>Adv</th>
        <th>Order</th>
        <th>Stock Value</th>
        <th>Bank Deposit</th>
        <th>Bank Withdraw</th>
       
      </tr>
    </thead>
    <tbody>


      <!-- Rows will be dynamically added here -->
    </tbody>
  </table>
</div>


  <div  id="loadingDiv" class="spinner-container" style="display: none;">
    <div class="spinner"></div>
  </div>
  


</div>

<script src="./js/total-summary-all.js">
 
</script>


<script>



</script>
</body>
</html>
