kaui 3.0.9 → 4.0.0

data/app/views/kaui/admin_tenants/_show_catalog_xml.erb

@@ -1,41 +1,66 @@
-<div id="catalog_xml">
-  <hr/>
-
-  <div>
-    <h1>Catalog XML
-      <a class="btn btn btn-xs" href="javascript:void(0);" onclick="switchBasicConfig();">Enable Simple Configuration</a>
-    </h1>
-
-
-    <table id="catalog-xml-for-tenant" class="table table-condensed">
-
-      <thead>
-      <tr>
-        <th>Catalog Version</th>
-        <th>Effective Date</th>
-        <th>Catalog XML</th>
-      </tr>
-      </thead>
-      <tbody>
-      <% @catalog_versions.each do |catalog| %>
-          <tr>
-            <td><%= catalog[:version] %></td>
-            <td><%= catalog[:version_date] %></td>
-            <td>
-              <%= form_tag(kaui_engine.admin_tenant_display_catalog_xml_path, :id => "submit_form_xml_#{catalog[:version]}", :method => 'post', :multipart => true, :class => "hide") do %>
-                  <%= hidden_field_tag(:effective_date, catalog[:version_date]) %>
-                  <%= hidden_field_tag(:id, @tenant.id) %>
-                  <%= submit_tag 'submit' %>
-              <% end %>
-              <a class='btn btn-xs' href="javascript:void(0);" onclick="submit_xml(<%= catalog[:version] %>);">view xml</a>
-            </td>
-          </tr>
-      <% end %>
-      </tbody>
-    </table>
-
+<div class="kaui-container show-catalog-xml" id="catalog_xml">
+    <div class="catalog-container mt-4">
+      <div class="d-flex flex-column">
+        <div class="catalog-header mb-3">
+          <div class="d-flex align-items-start flex-column">
+            <h2>Catalog XML</h2>
+          </div>
+          <span>
+            <%= link_to "javascript:void(0);", onclick: "switchBasicConfig();", class:"text-decoration-none" do %>
+                <%= render "kaui/components/button/button", {
+                    label: "Simple Configuration",
+                    icon: "kaui/view-doc.svg",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button custom-hover"
+                } %>
+            <% end %>
+          </span>
+        </div>
+        <div class="">
+          <table id="catalog-xml-for-tenant" class="catalog-table">
+            <thead>
+              <tr>
+                <th>Catalog Version</th>
+                <th>Effective Date</th>
+                <th class="text-end">Catalog XML</th>
+              </tr>
+            </thead>
+            <tbody>
+            <% @catalog_versions.each do |catalog| %>
+                <tr>
+                  <td><%= catalog[:version] %></td>
+                  <td><%= catalog[:version_date] %></td>
+                  <td class="text-end">
+                    <div class="d-flex align-items-center justify-content-end gap-2 w-fit">
+                      <%= form_tag(kaui_engine.admin_tenant_display_catalog_xml_path, :id => "submit_form_xml_#{catalog[:version]}", :method => 'post', :multipart => true, :class => "d-none") do %>
+                          <%= hidden_field_tag(:effective_date, catalog[:version_date]) %>
+                          <%= hidden_field_tag(:id, @tenant.id) %>
+                          <%= render "kaui/components/button/button", {
+                            label: "Submit",
+                            variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                            type: "submit",
+                            html_class: "kaui-dropdown custom-hover py-0 px-2 rounded-pill",
+                          } %>
+                      <% end %>
+                        <%= link_to "javascript:void(0);", onclick: "submit_xml(#{catalog[:version]});", class: "text-decoration-none" do %>
+                          <%= render "kaui/components/button/button", {
+                              label: "View XML",
+                              variant: "outline-secondary d-inline-flex align-items-center",
+                              type: "button",
+                              html_class: "currency-button kaui-button",
+                          } %>
+                        <% end %>
+                    </div>
+                  </td>
+                </tr>
+            <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
 
 <%= javascript_tag do %>
 function submit_xml(version_id) {

data/app/views/kaui/admin_tenants/_show_overdue.erb

@@ -1,97 +1,113 @@
-<div class="tab-pane fade" id="OverdueShow">
-
-
-  <hr/>
-
-  <h1>Existing Overdue Config
-    <% if can? :config_upload, Kaui::AdminTenant %>
-        <%= link_to '<i class="fa fa-plus-square"></i>'.html_safe,
-                    kaui_engine.admin_tenant_new_overdue_config_path(:id => @tenant.id),
-                    :class => 'btn btn-xs' %>
-    <% end %>
-    <a class='btn btn-xs' href="javascript:void(0);" onclick="submit_overdue_xml();">View overdue xml</a>
-  </h1>
-
-  <table id="existing-overdue-config-for-tenants" class="table table-condensed">
-
-    <span class='label'>
-    </span>
-    <% if @overdue.nil? || @overdue.has_states %>
-        No overdue configuration defined for tenant
-    <% else %>
-        <thead>
-        <tr>
-          <th>Name</th>
-          <th>External Message</th>
-          <th>Actions</th>
-          <th>Conditions</th>
-        </tr>
-        </thead>
-        <tbody>
-        <% @overdue.overdue_states.reverse_each do |state| %>
-            <tr class="overdue_state_<%= state %>">
-              <td><%= state.name %></td>
-              <td><%= state.external_message %></td>
-              <td>
-                <ul>
-                  <% if state.is_block_changes %>
-                      <li>
-                        <%= 'Block changes:' %><%= state.is_block_changes %>
-                      </li>
-                  <% end %>
-                  <% if state.is_disable_entitlement %>
-                      <li>
-                        <%= 'Cancel subscriptions:' %><%= state.is_disable_entitlement %>
-                        (policy:<%= state.subscription_cancellation_policy %>)
-                      </li>
-                  <% end %>
-                </ul>
-              </td>
-              <td>
-                <% if state.condition %>
+<div class="kaui-container tab-pane fade" id="OverdueShow">
+  <div class="existing-overdue-config-for-tenants-container mt-4">
+    <div class="d-flex flex-column">
+      <div class="existing-overdue-config-for-tenants-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+          <h2>Existing Overdue Config</h2>
+        </div>
+        <span>
+          <%= link_to "javascript:void(0);", onclick: "submit_overdue_xml();", class:"text-decoration-none" do %>
+              <%= render "kaui/components/button/button", {
+                  label: "XML View",
+                  icon: "kaui/view-doc.svg",
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "button",
+                  html_class: "kaui-button custom-hover"
+              } %>
+          <% end %>
+          <% if can? :config_upload, Kaui::AdminTenant %>
+            <%= link_to kaui_engine.admin_tenant_new_overdue_config_path(:id => @tenant.id), class:"text-decoration-none" do %>
+              <%= render "kaui/components/button/button", {
+                  label: "Add Overdue",
+                  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>
+        <table id="existing-overdue-config-for-tenants" class="existing-overdue-config-for-tenants-table">
+          <span class='label'>
+          </span>
+          <% if @overdue.nil? || @overdue.has_states %>
+            No overdue configuration defined for tenant
+          <% else %>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>External Message</th>
+                <th>Actions</th>
+                <th>Conditions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @overdue.overdue_states.reverse_each do |state| %>
+                <tr class="overdue_state_<%= state %>">
+                  <td><%= state.name %></td>
+                  <td><%= state.external_message %></td>
+                  <td>
                     <ul>
-                      <% if state.condition.time_since_earliest_unpaid_invoice_equals_or_exceeds %>
+                      <% if state.is_block_changes %>
+                        <li>
+                          <%= 'Block changes:' %><%= state.is_block_changes %>
+                        </li>
+                      <% end %>
+                      <% if state.is_disable_entitlement %>
+                        <li>
+                          <%= 'Cancel subscriptions:' %><%= state.is_disable_entitlement %>
+                          (policy:<%= state.subscription_cancellation_policy %>)
+                        </li>
+                      <% end %>
+                    </ul>
+                  </td>
+                  <td>
+                    <% if state.condition %>
+                      <ul>
+                        <% if state.condition.time_since_earliest_unpaid_invoice_equals_or_exceeds %>
                           <li>
                             <%= 'Time Since earliest unpaid invoice >=' %> <%= state.condition.time_since_earliest_unpaid_invoice_equals_or_exceeds.number %><%= state.condition.time_since_earliest_unpaid_invoice_equals_or_exceeds.unit %>
                           </li>
-                      <% end %>
-                      <% if state.condition.control_tag_inclusion %>
+                        <% end %>
+                        <% if state.condition.control_tag_inclusion %>
                           <li>
                             <%= 'Control tag inclusion' %> <%= state.condition.control_tag_inclusion %>
                           </li>
-                      <% end %>
-                      <% if state.condition.control_tag_exclusion %>
+                        <% end %>
+                        <% if state.condition.control_tag_exclusion %>
                           <li>
                             <%= 'Control tag exclusion' %> <%= state.condition.control_tag_exclusion %>
                           </li>
-                      <% end %>
-                      <% if state.condition.number_of_unpaid_invoices_equals_or_exceeds %>
+                        <% end %>
+                        <% if state.condition.number_of_unpaid_invoices_equals_or_exceeds %>
                           <li>
                             <%= 'Number of unpaid invoices >=' %> <%= state.condition.number_of_unpaid_invoices_equals_or_exceeds %>
                           </li>
-                      <% end %>
-                      <% if state.condition.total_unpaid_invoice_balance_equals_or_exceeds %>
+                        <% end %>
+                        <% if state.condition.total_unpaid_invoice_balance_equals_or_exceeds %>
                           <li>
                             <%= 'Total unpaid invoice balance >=' %> <%= state.condition.total_unpaid_invoice_balance_equals_or_exceeds %>
                           </li>
-                      <% end %>
-                    </ul>
-                <% end %>
-              </td>
-            </tr>
+                        <% end %>
+                      </ul>
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+            <% end %>
+          </tbody>
+        </table>
+        <%= form_tag(kaui_engine.admin_tenant_display_overdue_xml_path, :id => "submit_overdue_form_xml", :method => 'post', :multipart => true, :class => "hide") do %>
+          <%= hidden_field_tag(:xml, @overdue_xml) %>
+          <%= submit_tag 'submit', class: 'd-none' %>
         <% end %>
-    <% end %>
-    </tbody>
-  </table>
-
-  <%= form_tag(kaui_engine.admin_tenant_display_overdue_xml_path, :id => "submit_overdue_form_xml", :method => 'post', :multipart => true, :class => "hide") do %>
-      <%= hidden_field_tag(:xml, @overdue_xml) %>
-      <%= submit_tag 'submit' %>
-  <% end %>
-
+      </div>
+    </div>
+  </div>
 </div>
 
-
 <%= javascript_tag do %>
     function submit_overdue_xml() {
     $("#submit_overdue_form_xml").submit();

data/app/views/kaui/admin_tenants/_tenant_details.html.erb

@@ -1,21 +1,110 @@
-<div class="col-md-6">
+<div class="kaui-container gap-container">
+  <div class="tenant-details-container">
+    <div class="d-flex flex-column">
+      <div class="tenant-details-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+          <h2>Tenant details</h2>
+        </div>
+        <span>
+        </span>
+      </div>
+      <div class="row tenant-details">
+        <div class="col-sm-3">
+          <b>Name:</b> 
+          <p><%= @tenant.name %>&nbsp; 
+            <% if session[:kb_tenant_name] == @tenant.name %>
+              <i class="fa fa-toggle-on switch-tenant-active" title="Currently selected"></i>
+            <% else %>
+              <%= link_to("<i class=\"fa fa-toggle-off\" aria-hidden=\"true\"></i>".html_safe, switch_tenant_path(:kb_tenant_id => @tenant.kb_tenant_id), title: 'Click the toggle to switch tenant') %>
+            <% end %>
+          </p>
+        </div>
+        <div class="col-sm-3">
+          <b>Tenant ID:</b> 
+          <p>
+            <%= @tenant.kb_tenant_id %>
+            <%= render "kaui/components/button/button", {
+              label: '',
+              icon: "kaui/copy.svg",
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "button",
+              html_class: "dots-menu kaui-button",
+              html_options: {
+                onclick: "navigator.clipboard.writeText('#{@tenant.kb_tenant_id}')"
+              }
+            } %>
+          </p>
+        </div>
+        <div class="col-sm-3">
+          <b>API Key:</b> 
+          <p class="d-flex align-items-center gap-2 flex-nowrap">
+            <%= @tenant.api_key %>
+            <%= render "kaui/components/button/button", {
+              label: '',
+              icon: "kaui/copy.svg",
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "button",
+              html_class: "dots-menu kaui-button flex-shrink-0",
+              html_options: {
+                onclick: "navigator.clipboard.writeText('#{@tenant.api_key}')"
+              }
+            } %>
+          </p>
+        </div>
+        <div class="col-sm-3">
+          <b>API Secret:</b>
+          <p class="d-flex align-items-center gap-2 flex-nowrap">
+            <span class="mx-0" id="api-secret">
+              <%= @tenant.api_secret %>
+            </span>
 
-  <div class="column-block">
+            <%= render "kaui/components/button/button", {
+              label: '',
+              icon: "kaui/eye.svg",
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "button",
+              html_class: "dots-menu kaui-button flex-shrink-0",
+              html_options: {
+                id: "toggle-eye-btn",
+                onclick: "toggleSecret()"
+              }
+            } %>
+            <%= render "kaui/components/button/button", {
+              label: '',
+              icon: "kaui/copy.svg",
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "button",
+              html_class: "dots-menu kaui-button flex-shrink-0",
+              html_options: {
+                onclick: "navigator.clipboard.writeText('#{@tenant.api_secret}')"
+              }
+            } %>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-    <h1>Tenant details</h1>
+<script>
+  function toggleSecret() {
+    const secretSpan = document.getElementById("api-secret");
+    const eyeBtn = document.getElementById("toggle-eye-btn").querySelector("img");
 
-    <b>Name:</b> <%= @tenant.name %>&nbsp;
-      <% if session[:kb_tenant_name] == @tenant.name %>
-        <i class="fa fa-toggle-on switch-tenant-active" title="Currently selected"></i>
-      <% else %>
-        <%= link_to("<i class=\"fa fa-toggle-off\" aria-hidden=\"true\"></i>".html_safe,
-                  switch_tenant_path(:kb_tenant_id => @tenant.kb_tenant_id), title: 'Click the toggle to switch tenant') %>
-      <% end %>
-    <br/>
-    <b>Tenant ID:</b> <%= @tenant.kb_tenant_id %>
-    <br/>
-    <b>API Key:</b> <%= @tenant.api_key %>
+    if (secretSpan.dataset.visible === "true") {
+      secretSpan.textContent = "✴✴✴✴✴";
+      secretSpan.dataset.visible = "false";
+      eyeBtn.src = "/assets/kaui/eye.svg"; // eye closed
+    } else {
+      secretSpan.textContent = "<%= j @tenant.api_secret %>";
+      secretSpan.dataset.visible = "true";
+      eyeBtn.src = "/assets/kaui/eye-off.svg"; // eye open
+    }
+  }
 
-  </div>
-
-</div>
+  document.addEventListener("DOMContentLoaded", () => {
+    const secretSpan = document.getElementById("api-secret");
+    secretSpan.dataset.visible = "false";
+    secretSpan.textContent = "✴✴✴✴✴";
+  });
+</script>

data/app/views/kaui/admin_tenants/_tenants_table.html.erb

@@ -1,9 +1,33 @@
-<table id="tenants-table" class="table table-condensed table-striped mobile-data">
+<table id="tenants-table" class="tenants-table">
   <thead>
   <tr>
-    <th>Name</th>
-    <th>Tenant Id</th>
-    <th>Api Key</th>
+    <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">Tenant Id</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="2">
+      <div class="header-content">
+        <span class="header-text">Api Key</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>
   </tr>
   </thead>
   <tbody>
@@ -19,9 +43,46 @@
 
 <%= javascript_tag do %>
   $(document).ready(function() {
-    $('#tenants-table').dataTable({
+    var table = $('#tenants-table').DataTable({
       "dom": "t",
-      "paging": false
+      "paging": false,
+      "ordering": true
     });
+
+    // Custom sorting functionality
+    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
+      table.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');
+    }
   });
 <% end %>

data/app/views/kaui/admin_tenants/_useful_links.html.erb

@@ -1,18 +1,23 @@
-<div class="col-md-6">
-
-  <div class="column-block">
-
-    <h1>Useful links</h1>
-
-    <ul>
-      <li><%= link_to 'Parked accounts', kaui_engine.tags_path(:q => '__PARK__') %></li>
-      <li><%= link_to 'AUTO_INVOICING_OFF accounts', kaui_engine.tags_path(:q => 'AUTO_INVOICING_OFF') %></li>
-      <li><%= link_to 'AUTO_PAY_OFF accounts', kaui_engine.tags_path(:q => 'AUTO_PAY_OFF') %></li>
-      <li><%= link_to 'PENDING payments', kaui_engine.payments_path(:q => 'PENDING') %></li>
-      <li><%= link_to 'UNKNOWN and PLUGIN_FAILURE payments', kaui_engine.payments_path(:q => 'UNKNOWN') %></li>
-      <li><%= link_to 'Queues', kaui_engine.queues_path %></li>
-    </ul>
-
+<div class="kaui-container pb-0">
+  <div class="useful-links-container">
+    <div class="d-flex flex-column">
+      <div class="useful-links-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+          <h2>Useful links</h2>
+        </div>
+        <span>
+        </span>
+      </div>
+      <div class="useful-links">
+        <ul>
+          <li><%= link_to 'Parked accounts', kaui_engine.tags_path(:q => '__PARK__') %></li>
+          <li><%= link_to 'AUTO_INVOICING_OFF accounts', kaui_engine.tags_path(:q => 'AUTO_INVOICING_OFF') %></li>
+          <li><%= link_to 'AUTO_PAY_OFF accounts', kaui_engine.tags_path(:q => 'AUTO_PAY_OFF') %></li>
+          <li><%= link_to 'PENDING payments', kaui_engine.payments_path(:q => 'PENDING') %></li>
+          <li><%= link_to 'UNKNOWN and PLUGIN_FAILURE payments', kaui_engine.payments_path(:q => 'UNKNOWN') %></li>
+          <li><%= link_to 'Queues', kaui_engine.queues_path %></li>
+        </ul>
+      </div>
+    </div>
   </div>
-
 </div>

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

@@ -1,16 +1,40 @@
-<div class="search">
+<div class="kaui-container admin-tenant-details">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Tenants", href: '#' }
+    ]
+  } %>
 
-  <div class="column-block">
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_setting_sidebar' %>
+    
+    <div class="w-100">
+      <div class="d-flex flex-column">
+        <div class="admin-tenant-details-header">
+          <h2>Tenants</h2>
+          <span>
+            <% if can? :create, Kaui::AdminTenant %>
+              <%= link_to new_admin_tenant_path do %>
+                <%= render "kaui/components/button/button", {
+                  label: "Create Tenant",
+                  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>
 
-    <h1>Kaui tenants
-      <% if can? :create, Kaui::AdminTenant %>
-          <%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, new_admin_tenant_path %>
-      <% end %></h1>
-
-    <% unless @tenants.empty? %>
-        <%= render :partial => 'kaui/admin_tenants/tenants_table', :locals => {:tenants => @tenants} %>
-    <% end %>
+        <div class="mt-4">
+          <% unless @tenants.empty? %>
+            <%= render :partial => 'kaui/admin_tenants/tenants_table', :locals => {:tenants => @tenants} %>
+          <% end %>
 
+        </div>
+      </div>
+    </div>
   </div>
-
 </div>

data/app/views/kaui/admin_tenants/index.js.erb

@@ -0,0 +1,3 @@
+$('#kb_clock').html("<%= @clock['currentUtcTime'] %>");
+
+scheduleRefresh();

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

@@ -1,14 +1,20 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <% if can? :create, Kaui::AdminTenant %>
-        <div class="column-block">
-          <h1>Add new tenant</h1>
-          <%= render 'form' %>
-        </div>
-    <% else %>
+<div class="register add-new-tenant-details">
+  <div>
+    <div class="mx-auto" style="max-width:  37.5rem;">
+      <% if can? :create, Kaui::AdminTenant %>
+        <h5 class="add-new-tenant-title border-bottom pb-3 mb-3">
+          <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 Tenant
+        </h5>
+        <%= render 'form' %>
+      <% else %>
         <p>You are not allowed to create tenants, please contact your administrator.</p>
-    <% end %>
-
-  </div>
-</div>
+      <% end %> 
+    </div>
+    </div>
+</div>