
  <div class="small-container">
    <h1>Bank Transaction</h1>

    <!-- Tabs for switching between Form and History -->
    <div class="tab-container row">
      <button class="tab-button active" onclick="openTab(event, 'form-container')">Create Transaction</button>
      <button class="tab-button" onclick="openTab(event, 'transaction-list-container')">Transaction History</button>
    </div>

    <!-- Bank Transaction Form -->
    <div id="form-container" class="tab-content" style="display: block;">
      <h2>Create a Transaction</h2>
      <form id="transactionForm" class="form-group">
        
        <!-- Bank Account Selection -->
        <div class="row-group">
          <label for="bankAccountSelect">Bank Account:</label>
          <select id="bankAccountSelect" class="form-control" required>
            <option value="">Select Bank Account</option>
          </select>
        </div>
        
        <!-- Current Balance -->
        <div class="row-group">
          <label for="currentBalance">Current Balance:</label>
          <input type="text" id="currentBalance" class="form-control" readonly>
        </div>

        <!-- Transaction Type -->
        <div class="row-group">
          <label for="transactionType">Transaction Type:</label>
          <select id="transactionType" class="form-control" required>
            <option value="">Select Transaction Type</option>
            <option value="deposit">Deposit</option>
            <option value="withdrawal">Withdrawal</option>
          </select>
        </div>

        <!-- Amount -->
        <div class="row-group">
          <label for="amount">Amount:</label>
          <input type="number" id="amount" class="form-control" required>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="submit-btn">Submit</button>
      </form>
    </div>

    <!-- Transaction History -->
    <div id="transaction-list-container" class="tab-content" style="display: none;">
      <h2>Transaction History</h2>
      <table id="transactionTable">
        <thead>
          <tr>
            <th>Transaction Type</th>
            <th>Amount</th>
            <th>New Balance</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <!-- Rows will be added dynamically -->
        </tbody>
      </table>
    </div>

  </div>

  <script src="./js/bankTransaction.js"></script>

