
<!-- Main Content without Sidebar -->
<div class="main-content">

 
  <div class="container">
   
    <div class="filter-container ">

      <div>  
      <label for="companySelect">Company:</label>
      <select id="companySelect" class="form-control">
        <!-- Options will be populated dynamically -->
      </select>
    </div>

    <div> 
      <label for="branchSelect">Branch:</label>
      <select id="branchSelect" class="form-control">
        <!-- Options will be populated dynamically -->
      </select>
    </div> 
      <button id="fetchSummaryBtn">Fetch Summary</button>
    </div>

    <table id="financialSummaryTable">
      <thead>
        <tr>
          <th>Branch Name</th>
          <th>Stock Value</th>
          <th>Total Sales</th>
          <th>Total Purchases</th>
          <th>Total Expense</th>
          <th>Bank Deposit</th>
          <th>Bank Withdraw</th>
        </tr>
      </thead>
      <tbody>
        <!-- Financial summary data will be inserted here dynamically -->
      </tbody>
    </table>
  </div>

  <script src="./js/financeSummary.js"></script> <!-- Include your JS -->
</body>
</html>
