kaui 3.0.9 → 4.0.0

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

@@ -1,48 +1,110 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Audit logs</h1>
-    <%= render :partial => 'multi_functions_bar' %>
-    <input type="hidden" id="audit-logs" value="<%= @audit_logs_json %>">
-    <table id="audit-logs-table" class="table table-condensed table-colored-rows mobile-data">
-      <thead>
-      <tr>
-        <th>Created date</th>
-        <th>Object id</th>
-        <th>Object type</th>
-        <th>Change type</th>
-        <th>Username</th>
-        <th>Reason</th>
-        <th>Comment</th>
-        <th>User token</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty">Loading data from server</td>
-      </tr>
-      </tbody>
-    </table>
-
+<div class="kaui-container kaui-audit-logs-index">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex " style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="audit-logs">
+      <div class="d-flex flex-column ">
+        <div class="audit-logs-header mb-4">
+          <div class="d-flex align-items-center">
+            <h2>Audit logs</h2>
+          </div>
+          <span>
+            <%= render :partial => 'multi_functions_bar' %>
+            <input type="hidden" id="audit-logs" value="<%= @audit_logs_json %>">
+          </span>
+        </div>
+        <table id="audit-logs-table" class="audit-logs-table">
+          <thead>
+          <tr>
+            <th class="sortable-header" data-column="0">
+              <div class="header-content">
+                <span class="header-text">Created date</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">Object 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">Object type</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="3">
+              <div class="header-content">
+                <span class="header-text">Change type</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="4">
+              <div class="header-content">
+                <span class="header-text">Username</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="5">
+              <div class="header-content">
+                <span class="header-text">Reason</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="6">
+              <div class="header-content">
+                <span class="header-text">Comment</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="7">
+              <div class="header-content">
+                <span class="header-text">User token</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>
+          </tbody>
+        </table>
+      </div>
+      <%= render :partial => 'show_history_modal' %>
+    </div>
   </div>
-
-  <%= render :partial => 'show_history_modal' %>
-
 </div>
 
-<style>
-  #audit-logs-table td, #audit-logs-table tr {
-    white-space: nowrap;
-  }
-</style>
-
-
 <%= javascript_tag do %>
     $(document).ready(function() {
         var auditLogs = JSON.parse($("#audit-logs").val());
-        $('#audit-logs-table').DataTable({
+        var table = $('#audit-logs-table').DataTable({
             dom: "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
+            pagingType: "full_numbers",
             data: auditLogs,
             "scrollX": true,
             order: [[ 0, 'desc' ]],
@@ -54,11 +116,48 @@
                 } else if ( data[3] == "DELETE" ) {
                     $(row).addClass( 'delete' );
                 }
+                if (data[4] || data[3]) {
+                  $(row).each(function () {
+                    $(this).find('td').each(function () {
+                      const content = $(this).text().trim();
+                      $(this).html(`<span>${content}</span>`);
+                    });
+                  });
+                }
             },
             drawCallback: function() {
                 setObjectIdPopover();
             }
         });
+
+        // Custom sorting functionality and indicators
+        (function() {
+          var currentSortColumn = 0;
+          var currentSortDirection = 'desc';
+
+          updateSortIndicators(currentSortColumn, currentSortDirection);
+
+          $('#audit-logs-table thead .sortable-header').on('click', function() {
+            var columnIndex = parseInt($(this).data('column'));
+            var newDirection = (currentSortColumn === columnIndex && currentSortDirection === 'asc') ? 'desc' : 'asc';
+            currentSortColumn = columnIndex;
+            currentSortDirection = newDirection;
+            updateSortIndicators(columnIndex, newDirection);
+            table.order([columnIndex, newDirection]).draw();
+          });
+
+          function updateSortIndicators(columnIndex, direction) {
+            var $table = $('#audit-logs-table');
+            $table.find('.sortable-header').removeClass('sort-asc-active sort-desc-active');
+            $table.find('.sort-icon').removeClass('active');
+            var $header = $table.find('.sortable-header[data-column="' + columnIndex + '"]');
+            $header.addClass(direction + '-active');
+            $header.find('.sort-' + direction).addClass('active');
+          }
+        })();
     });
 
+    setTimeout(() => {
+
+    }, 50);
 <% end %>

data/app/views/kaui/bundle_tags/_form_bar.html.erb

@@ -5,14 +5,21 @@
     <% end %>
 
     <% available_tags.each do |tag| %>
-        <%= check_box_tag "tag_#{tag.id}", tag.name, tag_names.include?(tag.name), :disabled => !can_change_tags, :readonly => !can_change_tags %>
-        <label class='tag-description' rel='tooltip' title='<%= tag.description %>'><%= tag.name %></label>
+        <div class="label-group-item-manual">
+            <%= check_box_tag "tag_#{tag.id}", tag.name, tag_names.include?(tag.name), :disabled => !can_change_tags, :readonly => !can_change_tags %>
+            <label class='tag-description text-start' rel='tooltip' title='<%= tag.description %>'><%= tag.name %></label>
+        </div>
     <% end %>
 
     <% if can_change_tags %>
-        <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
+        <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label text-start' %>
         <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
-        <%= submit_tag 'Update', :class => 'btn btn-default' %>
+        <%= render "kaui/components/button/button", {
+            label: "Update",
+            variant: "outline-secondary gap-1",
+            type: "submit",
+            html_class: "kaui-dropdown custom-hover",
+        } %>
     <% end %>
 <% end %>
 

data/app/views/kaui/bundles/_bundle_details.html.erb

@@ -1,12 +1,24 @@
-<table class="transparent subtitle">
-  <tr>
-    <th>Bundle ID</th>
-    <td><%= bundle.bundle_id %></td>
-  </tr>
-  <% unless bundle.bundle_id == bundle.external_key %>
-    <tr>
-      <th>Bundle key</th>
-      <td><%= bundle.external_key %></td>
-    </tr>
-  <% end %>
-</table>
+<div class="d-flex align-items-center w-100 mb-4 bundle-details-header">
+  <div class="col-sm-6">
+    <b>Bundle ID</b>
+    <p class="text-muted small d-flex align-items-center mb-0">
+      <%= bundle.bundle_id %>
+      <svg 
+        class="mx-2" 
+        width="16" 
+        height="16" 
+        viewBox="0 0 16 16" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+        style="cursor: pointer;"
+        onclick="navigator.clipboard.writeText('<%= bundle.bundle_id %>')"
+      >
+        <path d="M11.3332 5.94864V2.66659C11.3332 1.93021 10.7363 1.33325 9.99989 1.33325H2.66659C1.93021 1.33325 1.33325 1.93021 1.33325 2.66659V9.99992C1.33325 10.7363 1.93021 11.3333 2.66659 11.3333H5.94864" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M13.3333 6C14.0697 6 14.6666 6.59695 14.6666 7.33333M7.33331 6C6.59695 6 6 6.59695 6 7.33333M13.3333 14.6667C14.0697 14.6667 14.6666 14.0697 14.6666 13.3333M7.33331 14.6667C6.59695 14.6667 6 14.0697 6 13.3333M9.33331 6H11.3333M9.33331 14.6667H11.3333M14.6666 9.33333V11.3333M6 9.33333V11.3333" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </p>
+  </div>
+  <div class="col-sm-6">
+    <%= render :partial => 'kaui/custom_fields/list_bar', :locals => {:custom_fields => @custom_fields_per_bundle[bundle.bundle_id] || []} %>
+  </div>
+</div>

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

@@ -1,113 +1,88 @@
-<div class="column-block subscription-bundle">
-
-  <h1>Subscription Bundles
-    <% if can? :create, Kaui::Subscription %>
-        <%= link_to '<i class="fa fa-plus-square"></i>'.html_safe,
-                    kaui_engine.new_subscription_path(:params => {:account_id => @account.account_id, :product_category => 'BASE'}),
-                    :class => 'btn btn-xs' %>
-    <% end %>
-  </h1>
-
-  <% @bundles.each_with_index do |bundle, idx| %>
-      <div class="row">
-        <div class="col-md-6">
-          <%= render :partial => Kaui.bundle_details_partial, :locals => { :bundle => bundle, :account => @account, :catalog => @catalog } %>
+<div class="kaui-container subscription-bundl-index pb-5">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex mb-5" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="subscription-bundle">
+      <div class="d-flex flex-column ">
+        <div class="subscription-bundle-header mb-4">
+          <div class="d-flex align-items-center">
+          <h2>Subscription Bundles</h2>
+          </div>
+          <span>
+            <% if can? :create, Kaui::Subscription %>
+              <%= link_to kaui_engine.new_subscription_path(:params => { :account_id => @account.account_id, :product_category => 'BASE' }) do %>
+                <%= render "kaui/components/button/button", {
+                      label: "Create Subscription",
+                      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>
-
-      <div class="info-wrapper">
-
-        <div class="tag-bar">
-          <% unless @available_tags.empty? %>
-            <div class="tag-select" onclick="void(0)">
-              <span><i class="fa fa-tag"></i><i class="fa fa-caret-down"></i></span>
-
-              <div class="tag-select-box">
-                <strong>Tag as:</strong>
-
-                <%= render :partial => 'kaui/bundle_tags/form_bar',
-                           :locals => {:params => { :bundle_id => bundle.bundle_id},
-                                       :tag_names => (@tags_per_bundle[bundle.bundle_id] || []).map { |tag| tag.tag_definition_name },
-                                       :available_tags => @available_tags,
-                                       :update_tags_path => update_bundle_tags_path
-                           } %>
+        <div class="subscriptions-scroll">
+          <% @bundles.each_with_index do |bundle, idx| %>
+            <div class="row">
+              <div class="d-flex">
+                <%= render :partial => Kaui.bundle_details_partial, :locals => { :bundle => bundle, :account => @account, :catalog => @catalog } %>
               </div>
+              <% if bundle.subscriptions.present? %>
+                  <div class="search">
+                    <%= render :partial => 'kaui/subscriptions/subscriptions_table', :locals => {:bundle => bundle, :account => @account, :catalog => @catalog} %>
+                  </div>
+              <% end %>
             </div>
           <% end %>
-          <%= render :partial => 'kaui/custom_fields/list_bar',
-                     :locals => {:custom_fields => @custom_fields_per_bundle[bundle.bundle_id] || []} %>
-
-          <% if !subscription_cancelled?(@subscription[bundle.bundle_id]) &&
-              (can?(:create, Kaui::Subscription) || can?(:transfer, Kaui::Subscription) || can?(:pause_resume, Kaui::Subscription)) %>
-              <div class="tag-select" onclick="void(0)">
-                <span><i class="fa fa-gift"></i><i class="fa fa-caret-down"></i></span>
-
-                <div class="tag-select-box">
-                  <% if can?(:create, Kaui::Subscription) && @subscription[bundle.bundle_id].present? %>
-                      <%= link_to "<i class='fa fa-plus'></i>&nbsp;#{@subscription[bundle.bundle_id].product_category == 'BASE' ? 'Add add-on' : 'Add standalone subscription'}".html_safe,
-                                  kaui_engine.new_subscription_path(:params => {
-                                      :account_id => bundle.account_id,
-                                      :bundle_id => bundle.bundle_id,
-                                      :base_product_name => @subscription[bundle.bundle_id].product_name,
-                                      :product_category => @subscription[bundle.bundle_id].product_category == 'BASE' ? 'ADD_ON' : 'STANDALONE'}) %>
-                  <% end %>
-                  <% if can? :transfer, Kaui::Subscription %>
-                      <%= link_to '<i class="fa fa-random"></i>&nbsp;Transfer Ownership'.html_safe, kaui_engine.transfer_bundle_path(bundle.bundle_id) %>
-                  <% end %>
-                  <% if can? :pause_resume, Kaui::Subscription %>
-                      <%= link_to '<i class="fa fa-pause"></i>&nbsp;Pause / resume'.html_safe, kaui_engine.pause_resume_bundle_path(:account_id => bundle.account_id, :id => bundle.bundle_id) %>
-                  <% end %>
-                </div>
-              </div>
-          <% end %>
 
-        </div>
-
-        <% if bundle.subscriptions.present? %>
-            <div class="search">
-              <%= render :partial => 'kaui/subscriptions/subscriptions_table', :locals => {:bundle => bundle, :account => @account, :catalog => @catalog} %>
-            </div>
-        <% end %>
-
-      </div>
-
-      <% if idx < @bundles.size - 1 %>
-          <hr class="breathe"/>
-      <% end %>
-  <% end %>
-
-  <div class="text-right" style="margin-top: 20px;">
-    <%= link_to 'First', account_bundles_path(page: 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
-    <%= link_to 'Previous', account_bundles_path(page: @page - 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
-
-    <% if @total_pages <= 10 %>
-        <% (1..@total_pages).each do |num| %>
-            <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
-        <% end %>
-    <% else %>
-        <%= link_to 1, account_bundles_path(page: 1), class: paging_button_class(1, @page) %>
-        <% if @page < 5 %>
-            <% (2..5).each do |num| %>
-                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+          
+          <div class="text-right d-flex justify-content-end pagination" style="">
+            <%= link_to account_bundles_path(page: @page - 1), class: "btn btn-custom #{'disabled' if @page == 1}" do %>
+              <%= render "kaui/components/button/button", {
+                    label: "Previous",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button custom-hover"
+                  } %>
             <% end %>
-            <%= '...' %>
-        <% elsif @page > @total_pages - 4 %>
-            <%= '...' %>
-            <% (@total_pages-4..@total_pages-1).each do |num| %>
-                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+
+            <% if @total_pages <= 10 %>
+                <% (1..@total_pages).each do |num| %>
+                    <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+                <% end %>
+            <% else %>
+                <%= link_to 1, account_bundles_path(page: 1), class: paging_button_class(1, @page) %>
+                <% if @page < 5 %>
+                    <% (2..5).each do |num| %>
+                        <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+                    <% end %>
+                    <%= '...' %>
+                <% elsif @page > @total_pages - 4 %>
+                    <%= '...' %>
+                    <% (@total_pages-4..@total_pages-1).each do |num| %>
+                        <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+                    <% end %>
+                <% else %>
+                    <%= '...' %>
+                    <% (@page-1..@page+1).each do |num| %>
+                        <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+                    <% end %>
+                    <%= '...' %>
+                <% end %>
+                <%= link_to @total_pages, account_bundles_path(page: @total_pages), class: paging_button_class(@total_pages, @page) %>
             <% end %>
-        <% else %>
-            <%= '...' %>
-            <% (@page-1..@page+1).each do |num| %>
-                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+            <%= link_to account_bundles_path(page: @page + 1), class: "btn btn-custom #{'disabled' if @page == @total_pages}" do %>
+              <%= render "kaui/components/button/button", {
+                    label: "Next",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button custom-hover"
+                  } %>
             <% end %>
-            <%= '...' %>
-        <% end %>
-        <%= link_to @total_pages, account_bundles_path(page: @total_pages), class: paging_button_class(@total_pages, @page) %>
-    <% end %>
-
-    <%= link_to 'Next', account_bundles_path(page: @page + 1), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
-    <%= link_to 'Last', account_bundles_path(page: @total_pages), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-
-</div>
+</div>

data/app/views/kaui/bundles/pause_resume.html.erb

@@ -1,42 +1,77 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <% if @base_subscription.state == 'BLOCKED' %>
-          <h1>Resume</h1>
-      <% else %>
-          <h1>Pause / Resume</h1>
-      <% end %>
-
-      <%= form_tag do_pause_resume_bundle_path(:account_id => @account.account_id, :id => @bundle.bundle_id), :class => 'form-horizontal', :method => :put do %>
-          <% if @base_subscription.state != 'BLOCKED' %>
-              <div class="form-group">
-                <%= label_tag :pause_requested_date, 'Pause date', :class => 'col-sm-2 control-label' %>
-                <div class="col-sm-3">
-                  <input class="form-control" name="pause_requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-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="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                <% if @base_subscription.state == 'BLOCKED' %>
+                  Resume
+                <% else %>
+                  Pause / Resume
+                <% end %>
+            </h5>
+            <%= form_tag do_pause_resume_bundle_path(:account_id => @account.account_id, :id => @bundle.bundle_id), :class => 'form-horizontal', :method => :put do %>
+              <% if @base_subscription.state != 'BLOCKED' %>
+                <div class="form-group d-flex pb-3" id="form_effective_from_date">
+                  <%= label_tag :pause_requested_date, 'Pause date', :class => 'col-sm-3 control-label' %>
+                  <div class="col-sm-9">
+                      <div class="custom-date-input-wrapper kaui-button custom-hover">
+                          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                              <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                              <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                              <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                          </svg>
+                          <input class="form-control" name="pause_requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                      </div>
+                  </div>
                 </div>
+              <% end %>
+              <div class="form-group d-flex pb-3" id="form_effective_from_date">
+                <%= label_tag :resume_requested_date, 'Resume date', :class => 'col-sm-3 control-label' %>
+                <div class="col-sm-9">
+                    <div class="custom-date-input-wrapper kaui-button custom-hover">
+                        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <input class="form-control" name="resume_requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                    </div>
+                </div>
+              </div>
+              <div class="form-group d-flex pb-3 border-bottom mb-3">
+                <%= label_tag :comment, 'Comment', :class => 'col-sm-3 control-label' %>
+                <div class="col-sm-9">
+                  <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
+                </div>
+              </div>
+              <div class="form-group d-flex justify-content-end pb-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: @base_subscription.state == 'BLOCKED' ? 'Resume' : 'Pause / Resume',
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "submit",
+                    html_class: "kaui-dropdown custom-hover"
+                } %>
               </div>
-          <% end %>
-          <div class="form-group">
-            <%= label_tag :resume_requested_date, 'Resume date', :class => 'col-sm-2 control-label' %>
-            <div class="col-sm-3">
-              <input class="form-control" name="resume_requested_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
-            </div>
-          </div>
-          <div class="form-group">
-            <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
-            <div class="col-sm-10">
-              <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <%= submit_tag @base_subscription.state == 'BLOCKED' ? 'Resume' : 'Pause / Resume', :class => 'btn btn-default' %>
-            </div>
-          </div>
-      <% end %>
-
+            <% end %>
+        </div>
     </div>
-
-  </div>
 </div>