

  <!-- Main Content -->
  <div class="main-content">
    <h3>Transaction Management</h3>

    <!-- Filters Section -->
   
  <!-- Filters Section -->
<div class="transactions-filter">
  <!-- Start Date Filter -->
  <label for="start-date-filter">Start Date:</label>
  <input type="date" id="start-date-filter">

  <!-- End Date Filter -->
  <label for="end-date-filter">End Date:</label>
  <input type="date" id="end-date-filter">

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

  
    <!-- Filter Buttons -->
    <button id="today-btn">Today</button>
    <button id="yesterday-btn">Yesterday</button>
    <button id="week-btn">Week</button>
</div>

    <!-- Transactions Table -->
    <div class="transactions-container">
      <table id="transactions-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>No of Items</th>
            <th>Total Price</th>
            <th>Customer Name</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <!-- Transactions will be dynamically added here -->
        </tbody>
      </table>
    </div>

    <!-- Transaction Details Modal -->
    <div id="transaction-details-modal" class="modal">
      <div class="modal-content">
        <span class="close" style="color: rgb(250, 57, 57);">&times;</span>
        <h2>Transaction Details</h2>
        <table id="transaction-details-table">
          <thead>
            <tr>
              <th>Item Name</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>Total</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <!-- Transaction details will be dynamically added here -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script src="./js/transactions.js"></script> <!-- JavaScript for managing transactions -->
</body>
</html>
