kaui 3.0.9 → 4.0.0

data/app/views/kaui/admin_allowed_users/_form.html.erb

@@ -1,60 +1,80 @@
-<% # Unclear why this url/method hack is needed %>
 <%= form_for @allowed_user, :url => @allowed_user.persisted? ? admin_allowed_user_path(@allowed_user.id) : admin_allowed_users_path, :method => @allowed_user.persisted? ? :put : :post, :html => {:class => 'form-horizontal'} do |f| %>
     <input type="hidden" id="killbillManaged" value="<%= @is_killbill_managed %>" />
-    <div class='form-group'>
-      <div class="col-sm-offset-2 col-sm-9">
+    <div class='form-group d-flex pb-3'>
+      <%= f.label ' ', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <div class="checkbox">
-          <%= f.label :external do %>
-                  <%= check_box_tag :external, '1', false, { :disabled => !@allowed_user.id.blank? } %>Managed externally (LDAP, Okta, etc.)?
-          <% end %>
+          <label for="external" class="d-flex align-items-center gap-2 control-label">
+            <%= check_box_tag :external, '1', false, disabled: !@allowed_user.id.blank?, id: 'external', class: "pt-2" %>
+            Managed externally (LDAP, Okta, etc.)?
+          </label>
         </div>
+
       </div>
     </div>
-    <div class="form-group">
-      <%= f.label :kb_username, 'Name', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label :kb_username, 'Name', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= f.text_field :kb_username, :class => 'form-control', :required => true, :disabled => @allowed_user.persisted?, :readonly => @allowed_user.persisted? %>
       </div>
     </div>
-    <div class="form-group">
-      <%= f.label  :password, 'Password', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label  :password, 'Password', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= password_field_tag :password, nil, class:'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <%= f.label :description, 'Description', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label :description, 'Description', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <%= f.text_field :description, :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <%= label_tag :roles, 'Roles', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= text_field_tag :roles, @roles.join(','), :class => 'form-control' %>
-        <p class="help-block">Comma separated, e.g. customer_support,finance.</p>
-        <p class="help-block">Create a new role <%= link_to 'here', new_role_definition_path %>.</p>
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :roles, 'Roles', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9 d-flex gap-2">
+        <div id="chip-container" class="chip-input-container form-control d-flex flex-wrap align-items-center p-2" onclick="focusChipInput()">
+          <span id="chip-input" class="chip-text-input" contenteditable="true"></span>
+        </div>
+        <%= hidden_field_tag :roles, @roles.join(','), id: 'roles-hidden' %>
+
+        <%= link_to new_role_definition_path, class: "border-button custom-hover add-role-button" do %>
+          <%= image_tag("kaui/modal/plus.svg", width: 16, height: 16) %>
+        <% end %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= f.submit 'Save', :class => 'btn btn-default' %>
-      </div>
+    <div class="form-group d-flex justify-content-end pt-3 border-top mb-3">
+      <%= render "kaui/components/button/button", {
+        label: 'Close',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "button",
+        html_class: "kaui-button custom-hover mx-2",
+        html_options: {
+          id: "closeButton",
+          onclick: "window.history.back();"
+        }
+      } %>
+      <%= render "kaui/components/button/button", {
+        label: 'Save User',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "submit",
+        html_class: "kaui-dropdown custom-hover",
+      } %>
     </div>
 <% end %>
 
 <!-- is the user been edited? -->
 <% if @allowed_user.persisted? %>
-  <div class="footer-notice managed-externally-notice">
-    <div class="modal-footer">
-      <div class="alert alert-warning">
-        <strong>Notice</strong>
-        <p id="noticeMessage">This user is managed externally (LDAP, Okta, etc.) or via Shiro configuration file.</p>
-      </div>
+  <div class="notice-worning">
+    <%= image_tag("kaui/warning.png", width: 35, height: 35) %>
+    <div>
+      <strong>Notice</strong>
+      <p id="noticeMessage">This user is managed externally (LDAP, Okta, etc.) or via Shiro configuration file.</p>
     </div>
   </div>
 <% end %>
 
+
 <%= javascript_tag do %>
     $(document).ready(function() {
 
@@ -68,12 +88,18 @@
             if ($('#external').is(":checked") || !isKillbillManaged) {
                 $('#password').attr('disabled', true);
                 $('#roles').attr('disabled', true);
+                $('.add-role-button').hide();
+                $('#chip-container').addClass('disabled-container');
+                $('#chip-input').attr('contenteditable', false).addClass('disabled');
                 $('.help-block').hide();
                 $('.managed-externally-notice').show();
             }
             else {
                 $('#password').attr('disabled', false);
                 $('#roles').attr('disabled', false);
+                $('.add-role-button').show();
+                $('#chip-input').attr('contenteditable', true).removeClass('disabled');
+                $('#chip-container').removeClass('disabled-container');
                 $('.help-block').show();
                 $('.managed-externally-notice').hide();
             }
@@ -81,4 +107,70 @@
 
         is_killbill_managed();
     });
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const chipContainer = document.getElementById("chip-container");
+      const chipInput = document.getElementById("chip-input");
+      const hiddenInput = document.getElementById("roles-hidden");
+
+      function addChip(text) {
+        if (!text) return;
+        const chip = document.createElement("span");
+        chip.className = "chip";
+        chip.innerHTML = `
+          ${text}
+          <span class="remove-chip">
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8.50049 1.5L1.50049 8.50001M1.50049 1.5L8.50049 8.50001" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        `;
+        chip.querySelector(".remove-chip").addEventListener("click", () => {
+          chip.remove();
+          updateHiddenInput();
+        });
+        chipContainer.insertBefore(chip, chipInput);
+        updateHiddenInput();
+      }
+
+      function updateHiddenInput() {
+        const chips = chipContainer.querySelectorAll(".chip");
+        const values = Array.from(chips).map(chip => chip.childNodes[0].nodeValue.trim());
+        hiddenInput.value = values.join(",");
+      }
+
+      chipInput.addEventListener("keydown", function (e) {
+        if (e.key === ',' || e.key === 'Enter') {
+          e.preventDefault();
+          const text = chipInput.innerText.trim().replace(/,$/, '');
+          if (text !== "") {
+            addChip(text);
+            chipInput.innerText = "";
+          }
+        } else if (e.key === 'Backspace' && chipInput.innerText === '') {
+          const lastChip = chipContainer.querySelectorAll(".chip");
+          if (lastChip.length > 0) {
+            lastChip[lastChip.length - 1].remove();
+            updateHiddenInput();
+          }
+        }
+      });
+
+      chipInput.addEventListener("blur", () => {
+        const text = chipInput.innerText.trim();
+        if (text !== "") {
+          addChip(text);
+          chipInput.innerText = "";
+        }
+      });
+
+      // Load initial roles if any
+      const initialRoles = hiddenInput.value.split(',').filter(Boolean);
+      initialRoles.forEach(role => addChip(role));
+
+      // Focus handler
+      window.focusChipInput = function () {
+        chipInput.focus();
+      };
+    });
 <% end %>

data/app/views/kaui/admin_allowed_users/edit.html.erb

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Update user</h1>
-      <%= render 'form' %>
+<div class="register kaui-container kaui-tenant-select kaui-new-admin-allowed-users">
+  <div class="">
+        <div class="" style="max-width: 37.5rem; margin: 0 auto;">
+            <h5 class="new-user-title border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10.0001 9.16667C8.15913 9.16667 6.66675 7.67428 6.66675 5.83333C6.66675 3.99238 8.15913 2.5 10.0001 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8334 15.8337C15.8334 13.5325 13.9679 11.667 11.6667 11.667H8.33341C6.03223 11.667 4.16675 13.5325 4.16675 15.8337V17.5003H15.8334V15.8337Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Update user
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
-</div>
+</div>

data/app/views/kaui/admin_allowed_users/index.html.erb

@@ -1,40 +1,160 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Kaui users
-      <% if can? :create, Kaui::AdminTenant %>
-          <%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, new_admin_allowed_user_path %>
-      <% end %></h1>
-
-    <% unless @allowed_users.empty? %>
-        <table id="allowed-users-table" class="table table-condensed table-striped mobile-data">
-          <thead>
-          <tr>
-            <th>Name</th>
-            <th>Description</th>
-          </tr>
-          </thead>
-          <tbody>
-          <% @allowed_users.each do |u| %>
+<div class="kaui-container kaui-users-index">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Users", href: '#' }
+    ]
+  } %>
+
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_setting_sidebar' %>
+
+    <div class="users-details w-100">
+      <div class="d-flex flex-column">
+        <div class="users-details-header">
+          <h2>Users</h2>
+          <span>
+            <% if can? :create, Kaui::AdminTenant %>
+              <%= link_to new_admin_allowed_user_path do %>
+                <%= render "kaui/components/button/button", {
+                  label: "Create User",
+                  icon: "kaui/plus.svg",
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "button",
+                  html_class: "kaui-dropdown custom-hover",
+                } %>
+                <% end %>
+            <% end %>
+          </span>
+        </div>
+
+        <div class="mt-4">
+         <% unless @allowed_users.empty? %>
+            <table id="allowed-users-table" class="allowed-users-table">
+              <thead>
               <tr>
-                <td><%= link_to u.kb_username, admin_allowed_user_path(u.id) %></td>
-                <td><%= u.description %></td>
+                <th class="sortable-header" data-column="0">
+                  <div class="header-content">
+                    <span class="header-text">Name</span>
+                    <div class="sort-icons">
+                      <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                      <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                    </div>
+                  </div>
+                </th>
+                <th class="sortable-header" data-column="1">
+                  <div class="header-content">
+                    <span class="header-text">Description</span>
+                    <div class="sort-icons">
+                      <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                      <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                    </div>
+                  </div>
+                </th>
+                <th></th>
               </tr>
-          <% end %>
-          </tbody>
-        </table>
-    <% end %>
+              </thead>
+              <tbody>
+              <% @allowed_users.each do |u| %>
+                  <tr>
+                    <td><%= link_to u.kb_username, admin_allowed_user_path(u.id) %></td>
+                    <td><%= u.description %></td>
+                    <td class="text-end">
 
-  </div>
+                        
+                      <%= render "kaui/components/button/button", {
+                        label: 'Delete',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "button",
+                        html_class: "kaui-button delete-button custom-hover",
+                        html_options: { 
+                          data: { 
+                            confirm: "Are you sure?",
+                            method: "delete",
+                            turbo: false,
+                            "url": kaui_engine.admin_allowed_user_path(u.id)
+                          }
+                        }
+                      } %>
+                      <%= link_to kaui_engine.edit_admin_allowed_user_path(u.id), :class => '' do %>
+                        <%= render "kaui/components/button/button", {
+                          label: "Edit",
+                          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                          type: "button",
+                          html_class: "kaui-button edit-button custom-hover",
+                        } %>
+                      <% end %>
+                    </td>
+                  </tr>
+              <% end %>
+              </tbody>
+            </table>
+        <% end %>
 
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <%= javascript_tag do %>
   $(document).ready(function() {
-      $('#allowed-users-table').dataTable({
-      "dom": "t",
-      "paging": false
-    });
+    // Initialize DataTable for allowed users table
+    var allowedUsersTable;
+    
+    // Wait for the table to be available
+    setTimeout(function() {
+      try {
+        // Check if table is already initialized as DataTable
+        if ($.fn.DataTable.isDataTable('#allowed-users-table')) {
+          allowedUsersTable = $('#allowed-users-table').DataTable();
+        } else {
+          allowedUsersTable = $('#allowed-users-table').DataTable({
+            "dom": "t",
+            "paging": false,
+            "ordering": true
+          });
+        }
+        
+        // Custom sorting functionality for allowed users table
+        var currentSortColumn = -1;
+        var currentSortDirection = 'asc';
+
+        // Handle custom header clicks
+        $('.sortable-header').on('click', function() {
+          var columnIndex = parseInt($(this).data('column'));
+          var newDirection = 'asc';
+          
+          // If clicking the same column, toggle direction
+          if (currentSortColumn === columnIndex) {
+            newDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
+          }
+          
+          currentSortColumn = columnIndex;
+          currentSortDirection = newDirection;
+          
+          // Update visual indicators
+          updateSortIndicators(columnIndex, newDirection);
+          
+          // Apply DataTable sorting
+          if (allowedUsersTable && allowedUsersTable.order) {
+            allowedUsersTable.order([columnIndex, newDirection]).draw();
+          }
+        });
+
+        // Function to update sort indicators
+        function updateSortIndicators(columnIndex, direction) {
+          // Reset all headers
+          $('.sortable-header').removeClass('sort-asc-active sort-desc-active');
+          $('.sort-icon').removeClass('active');
+          
+          // Set active state for current column
+          var $header = $('.sortable-header[data-column="' + columnIndex + '"]');
+          $header.addClass(direction + '-active');
+          $header.find('.sort-' + direction).addClass('active');
+        }
+        
+      }
+    }, 100);
   });
 <% end %>

data/app/views/kaui/admin_allowed_users/new.html.erb

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new user</h1>
-      <%= render 'form' %>
+<div class="register kaui-container kaui-tenant-select kaui-new-admin-allowed-users">
+  <div class="">
+        <div class="" style="max-width: 37.5rem; margin: 0 auto;">
+            <h5 class="new-user-title border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10.0001 9.16667C8.15913 9.16667 6.66675 7.67428 6.66675 5.83333C6.66675 3.99238 8.15913 2.5 10.0001 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8334 15.8337C15.8334 13.5325 13.9679 11.667 11.6667 11.667H8.33341C6.03223 11.667 4.16675 13.5325 4.16675 15.8337V17.5003H15.8334V15.8337Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Add new user
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

data/app/views/kaui/admin_allowed_users/show.html.erb

@@ -1,39 +1,86 @@
-<div class="column-block">
-
-  <h1>User details
-    <%= link_to 'Edit',
-                kaui_engine.edit_admin_allowed_user_path(@allowed_user.id),
-                :class => 'btn btn-xs' %>
-    &nbsp;
-    <%= link_to '<i class="fa fa-times"></i>'.html_safe,
-                kaui_engine.admin_allowed_user_path(@allowed_user.id),
-                :method => :delete,
-                data: {:confirm => 'Are you sure?'} -%>
-  </h1>
+<div class="kaui-container">
+  <div class="user-details-container">
+    <div class="d-flex flex-column">
+      <div class="user-details-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+          <h2>User details</h2>
+        </div>
+        <span>
+          <%= render "kaui/components/button/button", {
+            label: 'Delete',
+            variant: "outline-secondary d-inline-flex align-items-center gap-1",
+            type: "button",
+            html_class: "kaui-button delete-button custom-hover",
+            html_options: { 
+              data: { 
+                confirm: "Are you sure?",
+                method: "delete",
+                turbo: false, # Optional: disable Turbo if using Rails Turbo
+                "url": kaui_engine.admin_allowed_user_path(@allowed_user.id)
+              },
+              onclick: "if (confirm(this.dataset.confirm)) { Rails.ajax({ url: this.dataset.url, type: this.dataset.method }); }"
+            }
+          } %>
 
-  <b>Name:</b> <%= @allowed_user.kb_username %>
-  <br/>
-  <b>Description:</b> <%= @allowed_user.description %>
-  <br/>
-  <b>Roles:</b> <%= @roles.join(',') %>
+          <%= link_to kaui_engine.edit_admin_allowed_user_path(@allowed_user.id), 
+                      :class => '' do %>
+            <%= render "kaui/components/button/button", {
+                  label: "Edit",
+                  icon: "kaui/account/edit.svg", 
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "button",
+                  html_class: "kaui-dropdown custom-hover",
+                } %>
+          <% end %>
 
+        </span>
+      </div>
+      <div class="row">
+        <div class="col-md-4 d-flex flex-column">
+          <b>Name:</b> <span><%= @allowed_user.kb_username %></span>
+        </div>
+        <div class="col-md-4 d-flex flex-column">
+          <b>Description:</b> <span><%= @allowed_user.description %></span>
+        </div>
+        <div class="col-md-4 d-flex flex-column">
+          <b>Roles:</b> <span><%= @roles.join(', ') %></span>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
-<% if can? :create, Kaui::AdminTenant %>
-    <div class="register">
-      <div class="col-md-8 col-md-offset-2">
 
-        <div class="column-block">
-          <h1>Configured tenants</h1>
+<% if can? :create, Kaui::AdminTenant %>
+  <div class="kaui-container mt-4">
+    <div class="user-details-container">
+      <div class="d-flex flex-column">
+        <div class="user-details-header mb-3">
+          <div class="d-flex align-items-start flex-column">
+            <h2>Configured tenants</h2>
+          </div>
+          <span>
+          </span>
+        </div>
+        <div>
           <%= form_for @allowed_user, :url => {:action => :add_tenant}, :html => {:method => :post, :class => 'form-horizontal'} do |f| %>
               <%= f.hidden_field(:id) %>
 
               <div class='form-group'>
                 <div class="col-sm-offset-2 col-sm-10">
+                  <!-- Check All/Uncheck All Section -->
+                  <div class="checkbox pb-2">
+                    <label class="d-flex align-items-center gap-2 control-label">
+                      <%= check_box_tag "check_all_tenants", "all", false, :disabled => !current_user.root?, class: "pt-2", id: "check_all_tenants" %>
+                      <span class="fw-bold"><strong>All Tenants</strong></span>
+                    </label>
+                  </div>
+                  
+                  <!-- Individual Tenant Checkboxes -->
                   <% @tenants.each do |tenant| %>
-                      <div class="checkbox">
-                        <label>
-                          <%= check_box_tag "tenant_#{tenant.id}", tenant.id, @allowed_user.kaui_tenants.map(&:id).include?(tenant.id), :disabled => !current_user.root? %>
+                      <div class="checkbox pb-2">
+                        <label class="d-flex align-items-center gap-2 control-label">
+                          <%= check_box_tag "tenant_#{tenant.id}", tenant.id, @allowed_user.kaui_tenants.map(&:id).include?(tenant.id), :disabled => !current_user.root?, class: "pt-2 tenant-checkbox"  %>
                           <span><%= tenant.name || tenant.api_key %></span>
                         </label>
                       </div>
@@ -41,16 +88,74 @@
                 </div>
               </div>
               <% unless !current_user.root? %>
-                  <div class="form-group">
-                    <div class="col-sm-offset-2 col-sm-10">
-                      <%= f.submit 'Save', :class => 'btn btn-default' %>
-                    </div>
-                  </div>
+                <div class="form-group d-flex justify-content-end pt-3 border-top">
+                  <%= render "kaui/components/button/button", {
+                    label: 'Close',
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button custom-hover mx-2",
+                    html_options: {
+                      id: "closeButton",
+                      onclick: "window.history.back();"
+                    }
+                  } %>
+                  <%= render "kaui/components/button/button", {
+                    label: 'Save User',
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "submit",
+                    html_class: "kaui-dropdown custom-hover",
+                  } %>
+                </div>
               <% end %>
           <% end %>
-
         </div>
-
       </div>
     </div>
+  </div>
 <% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const checkAllCheckbox = document.getElementById('check_all_tenants');
+    const tenantCheckboxes = document.querySelectorAll('.tenant-checkbox');
+    
+    if (checkAllCheckbox && tenantCheckboxes.length > 0) {
+      // Handle "Check All" checkbox change
+      checkAllCheckbox.addEventListener('change', function() {
+        const isChecked = this.checked;
+        tenantCheckboxes.forEach(function(checkbox) {
+          if (!checkbox.disabled) {
+            checkbox.checked = isChecked;
+          }
+        });
+      });
+      
+      // Handle individual tenant checkbox changes
+      tenantCheckboxes.forEach(function(checkbox) {
+        checkbox.addEventListener('change', function() {
+          updateCheckAllState();
+        });
+      });
+      
+      // Update "Check All" state based on individual checkboxes
+      function updateCheckAllState() {
+        const enabledCheckboxes = Array.from(tenantCheckboxes).filter(cb => !cb.disabled);
+        const checkedCount = enabledCheckboxes.filter(cb => cb.checked).length;
+        
+        if (checkedCount === 0) {
+          checkAllCheckbox.checked = false;
+          checkAllCheckbox.indeterminate = false;
+        } else if (checkedCount === enabledCheckboxes.length) {
+          checkAllCheckbox.checked = true;
+          checkAllCheckbox.indeterminate = false;
+        } else {
+          checkAllCheckbox.checked = false;
+          checkAllCheckbox.indeterminate = true;
+        }
+      }
+      
+      // Initialize the check all state
+      updateCheckAllState();
+    }
+  });
+</script>