<div class="main-content">
    <div class="container">
      <h1>Expense Groups</h1>
      
      <!-- Form for Creating/Updating Expense Group -->
      <div class="form-wrapper">
        <form id="expenseGroupForm">
          <label for="groupName">Group Name:</label>
          <input type="text" id="groupName" name="groupName" required>
  
          <input type="hidden" id="expenseGroupId"> <!-- Hidden field for editing -->
          <button type="submit">Submit</button>
        </form>
      </div>
  
      <!-- Table for Displaying Expense Groups -->
      <div class="table-wrapper">
        <table id="expenseGroupsTable">
          <thead>
            <tr>
              <th>Group Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <!-- Expense groups will be dynamically added here -->
          </tbody>
        </table>
      </div>
    </div>
  
    <script src="./js/expenseGroups.js"></script>
  </body>
  </html>
  