kaui 3.0.9 → 4.0.0

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

@@ -1,29 +1,56 @@
-<div class="modal fade" id="addAllowedUserModal" tabindex="-1" role="dialog">
+<div class="modal fade addAllowedUserModal" id="addAllowedUserModal" tabindex="-1" role="dialog" aria-labelledby="addAllowedUserModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
-    <div class="modal-content column-block">
-      <div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h1 class="modal-title">Add allowed user</h1>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title d-flex align-items-center gap-3" id="addAllowedUserModalLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/header/account.svg", width: 20, height: 20) %>
+          </span>
+          Add allowed user
+        </h5>
+        <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">
+            <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+          </span>
+        </button>
       </div>
       <div class="modal-body">
         <%= form_for :allowed_user, :url =>  add_allowed_user_path, :method => :put, :html => {:class => 'form-horizontal', :id => 'tenantAllowedUserForm'} do |f| %>
-            <div class='form-group'>
-              <%= f.label :kb_username, 'User name', :class => 'col-sm-4 control-label' %>
-              <div class="col-sm-8">
+            <div class='form-group d-flex align-items-center p-3'>
+              <%= f.label :kb_username, 'User Name', :class => 'col-sm-3 control-label' %>
+              <div class="col-sm-9">
                 <%= f.text_field :kb_username, :class => 'form-control', :required => true %>
               </div>
             </div>
             <input type="hidden" name="tenant_id" value="<%= @tenant.id %>" />
-            <div class="form-group">
-              <div class="col-sm-offset-4 col-sm-10">
-                <%= submit_tag 'Add', :class => 'btn btn-default' %>
-              </div>
+             <div class="modal-footer">
+              <%= 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 my-0",
+                html_options: {
+                  data: {
+                    bs_dismiss: "modal"
+                  },
+                }
+              } %>
+              <%= 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 m-0",
+                html_options: {
+                  id: "applyAdvanceSearch"
+                }
+              } %>
             </div>
         <% end %>
       </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+     
+    </div>
+  </div>
+</div>
 
 <%= javascript_tag do %>
     $(document).ready(function() {

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

@@ -0,0 +1,72 @@
+<div class="kaui-container mb-3">
+  <div class="clock-container">
+    <div class="d-flex flex-column">
+      <div class="clock-header mb-3">
+        <div class="d-flex align-items-center justify-content-between w-100">
+          <h2>Clock</h2>
+          <p>Current date/time: 
+            <span id="kb_clock"><%= @clock&.[]('currentUtcTime') || 'N/A' %></span>
+          </p>
+        </div>
+        <span></span>
+      </div>
+
+      <div>
+        <%= form_tag admin_tenant_set_clock_path(@tenant.id), method: :put, class: 'form-horizontal' do %>
+          <div class="trigger-invoice-box form-group">
+            <b>Set new date</b>
+            <div class="d-flex align-items-center">
+              <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="new_date" type="text" 
+                       data-provide="datepicker" 
+                       data-date-format="yyyy-mm-dd" 
+                       data-date-today-highlight="true" 
+                       value="<%= @clock&.[]('localDate') || '' %>">
+              </div>
+
+              <%= render "kaui/components/button/button", {
+                label: "Submit",
+                variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                type: "submit",
+                html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3",
+                html_options: {
+                  name: "commit",
+                  value: "Submit"
+                }
+              } %>
+            </div>
+
+            <%= button_tag type: 'submit', name: 'commit', value: 'Reset', class: 'kaui-button dots-menu custom-hover' do %>
+              <%= image_tag('kaui/setting/reset.svg', alt: 'Reset Icon', class: 'me-2', size: '16x16') %>
+              Reset
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= javascript_tag do %>
+  $(document).ready(function() {
+    scheduleRefresh();
+  });
+
+  function scheduleRefresh() {
+    setTimeout(refreshClock, 1000);
+  }
+
+  function refreshClock() {
+    $.ajax({url: "<%= admin_tenant_path(@tenant.id, :format => :js) %>"});
+  }
+<% end %>
+
+
+

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

@@ -1,25 +1,37 @@
 <%= form_for @tenant, :url => admin_tenants_path, :html => {:class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
-      <%= f.label :name, 'Name', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_field :name, :class => 'form-control', :required => true %>
-      </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :name, 'Name', :class => 'col-sm-2 control-label' %>
+    <div class="col-sm-10">
+      <%= f.text_field :name, :class => 'form-control', :required => true %>
     </div>
-    <div class="form-group">
-      <%= f.label :api_key, 'API Key', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_field :api_key, :class => 'form-control', :required => true %>
-      </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :api_key, 'API Key', :class => 'col-sm-2 control-label' %>
+    <div class="col-sm-10">
+      <%= f.text_field :api_key, :class => 'form-control', :required => true %>
     </div>
-    <div class="form-group">
-      <%= f.label :api_secret, 'API Secret', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.password_field :api_secret, :class => 'form-control', :required => true %>
-      </div>
-    </div>
-    <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 pb-3">
+    <%= f.label :api_secret, 'API Secret', :class => 'col-sm-2 control-label' %>
+    <div class="col-sm-10">
+      <%= f.password_field :api_secret, :class => 'form-control', :required => true %>
     </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: {
+        onclick: "window.history.back();"
+      }
+    } %>
+    <%= render "kaui/components/button/button", {
+      label: 'Save Tenant',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "submit",
+      html_class: "kaui-dropdown custom-hover"
+    } %>
+  </div>
 <% end %>

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

@@ -3,21 +3,34 @@
       <%= form_tag({:action => :upload_catalog_translation}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
           <%= hidden_field_tag(:id, @tenant.id) %>
 
-          <div class="form-group">
-            <div class="col-sm-10">
-              <%= file_field_tag 'catalog_translation', :class => 'form-control', :required => true %>
+          <div class="upload-box form-group" data-file="">
+            <div class="upload-content">
+              <%= image_tag 'kaui/file-upload.svg', alt: 'Upload Icon' %>
+              <p>
+                <span class="highlight">Click to upload</span> or drag and drop
+              </p>
             </div>
+
+            <%= file_field_tag 'catalog_translation', 
+              class: 'form-control', 
+              required: true,
+              data: { file: '' },
+              onchange: "this.parentNode.setAttribute('data-file', this.files[0]?.name || '')" 
+            %>
           </div>
-          <div class="form-group">
+          <div class="form-group d-flex pb-3 border-bottom mb-3">
             <%= label_tag :translation_locale, 'Locale', :class => 'col-sm-2 control-label' %>
             <div class="col-sm-10">
               <%= text_field_tag :translation_locale, nil, :class => 'form-control' %>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-10">
-              <%= submit_tag 'Upload', :class => 'btn btn-default' %>
-            </div>
+          <div class="d-flex justify-content-end">
+            <%= render "kaui/components/button/button", {
+              label: 'Upload',
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "submit",
+              html_class: "kaui-dropdown custom-hover m-0"
+            } %>
           </div>
       <% end %>
     </div>

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

@@ -1,14 +1,27 @@
 <% if can? :config_upload, Kaui::AdminTenant %>
-    <div class="tab-pane fade" id="InvoiceTemplate">
+    <div class="tab-pane fade invoice-template form-invoice-template" id="InvoiceTemplate">
       <%= form_tag({:action => :upload_invoice_template}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
           <%= hidden_field_tag(:id, @tenant.id) %>
 
-          <div class="form-group">
-            <div class="col-sm-10">
-              <%= file_field_tag 'invoice_template', :class => 'form-control', :required => true %>
+          <div class="upload-box form-group" data-file="">
+            <div class="upload-content">
+              <%= image_tag 'kaui/file-upload.svg', alt: 'Upload Icon' %>
+              <p>
+                <span class="highlight">Click to upload</span> or drag and drop
+              </p>
             </div>
+
+            <%= file_field_tag 'invoice_template', 
+              class: 'form-control', 
+              required: true,
+              data: { file: '' },
+              onchange: "this.parentNode.setAttribute('data-file', this.files[0]?.name || '')" 
+            %>
           </div>
-          <div class="form-group">
+
+
+
+          <div class="form-group pb-3 border-bottom mb-3">
             <div class="col-sm-10">
               <div class="checkbox">
                 <label>
@@ -18,10 +31,13 @@
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <%= submit_tag 'Upload', :class => 'btn btn-default' %>
-            </div>
+          <div class="d-flex justify-content-end">
+            <%= render "kaui/components/button/button", {
+              label: 'Upload',
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "submit",
+              html_class: "kaui-dropdown custom-hover m-0"
+            } %>
           </div>
       <% end %>
     </div>

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

@@ -1,24 +1,40 @@
 <% if can? :config_upload, Kaui::AdminTenant %>
-    <div class="tab-pane fade" id="InvoiceTranslation">
-      <%= form_tag({:action => :upload_invoice_translation}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
-          <%= hidden_field_tag(:id, @tenant.id) %>
+  <div class="tab-pane fade" id="InvoiceTranslation">
+    <%= form_tag({:action => :upload_invoice_translation}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
+        <%= hidden_field_tag(:id, @tenant.id) %>
 
-          <div class="form-group">
-            <div class="col-sm-10">
-              <%= file_field_tag 'invoice_translation', :class => 'form-control', :required => true %>
-            </div>
+        <div class="upload-box form-group" data-file="">
+          <div class="upload-content">
+            <%= image_tag 'kaui/file-upload.svg', alt: 'Upload Icon' %>
+            <p>
+              <span class="highlight">Click to upload</span> or drag and drop
+            </p>
           </div>
-          <div class="form-group">
-            <%= label_tag :translation_locale, 'Locale', :class => 'col-sm-2 control-label' %>
-            <div class="col-sm-10">
-              <%= text_field_tag :translation_locale, nil, :class => 'form-control' %>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-10">
-              <%= submit_tag 'Upload', :class => 'btn btn-default' %>
-            </div>
+
+          <%= file_field_tag 'invoice_translation', 
+            class: 'form-control', 
+            required: true,
+            data: { file: '' },
+            onchange: "this.parentNode.setAttribute('data-file', this.files[0]?.name || '')" 
+          %>
+        </div>
+        <div class="form-group d-flex pb-3 border-bottom mb-3">
+          <%= label_tag :translation_locale, 'Locale', :class => 'col-sm-2 control-label' %>
+          <div class="col-sm-10">
+            <%= text_field_tag :translation_locale, nil, :class => 'form-control' %>
           </div>
-      <% end %>
-    </div>
-<% end %>
+        </div>
+        <div class="d-flex justify-content-end">
+          <%= render "kaui/components/button/button", {
+            label: 'Upload',
+            variant: "outline-secondary d-inline-flex align-items-center gap-1",
+            type: "submit",
+            html_class: "kaui-dropdown custom-hover m-0",
+            html_options: {
+              id: "applyAdvanceSearch"
+            }
+          } %>
+        </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -1,11 +1,6 @@
 <% if can? :config_upload, Kaui::AdminTenant %>
     <div class="tab-pane fade" id="PluginConfig">
 
-      </br>
-      <div>
-        <h1>Upload Plugin Configuration
-        </h1>
-      </div>
 
       <%= form_tag({:action => :upload_plugin_config}, :method => 'post', :multipart => true, :class => 'form-horizontal') do %>
           <%= hidden_field_tag(:id, @tenant.id) %>
@@ -15,22 +10,20 @@
 
           <input type="hidden" id="plugin_repository" value="<%= plugin_repository.to_json %>" >
 
-          <div id="plugin" class="form-group">
+          <div id="plugin" class="form-group d-flex py-3">
             <%= label_tag :entered_plugin_name, 'Plugin name', :class => 'col-sm-2 control-label' %>
 
-            <div class="col-sm-4">
+            <div class="col-sm-8">
               <select class="form-control" id="select_plugin_name"></select>
               <%= text_field_tag :entered_plugin_name, nil, :placeholder => 'as defined in the plugin Activator file',  :class => 'form-control', :tenant_plugin_config => @tenant_plugin_config.to_json %>
               <div class="text plugin-suggestion text-danger"></div>
             </div>
-            <div class="col-sm-1 spinner"><i class="fa fa-cog fa-2x fa-spin"></i></div>
-            <label class="col-sm-1 toggle-container control-label">
-              <label class="switch">
+            <div class="col-sm-2">
+              <label class="checkbox d-flex align-items-center justify-content-end">
                 <input id="toggle_input" type="checkbox">
-                <span class="slider round"></span>
+                <span class="round mx-2"> Manual Entry</span>
               </label>
-            </label>
-            <label class="col-sm-3 control-label toggle-label text-muted">manual entry</label>
+            </div>
           </div>
 
           <div id="plugin_config_properties_header" class="form-group">
@@ -42,17 +35,20 @@
               </label>
             </label>
           </div>
-          <div class="form-group">
+          <div class="form-group d-flex pb-3 border-bottom mb-3">
             <%= label_tag :configuration, 'Configuration', :class => 'col-sm-2 control-label' %>
-            <div class="col-sm-6">
-              <textarea name="plugin_properties[raw_config]" id="raw_config" rows="20" class="form-control"></textarea>
+            <div class="col-sm-10">
+              <textarea name="plugin_properties[raw_config]" id="raw_config" rows="20" class="form-control" style="height: 6.25rem;"></textarea>
             </div>
           </div>
 
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <%= submit_tag 'Upload', :class => 'btn btn-default' %>
-            </div>
+          <div class="d-flex justify-content-end">
+            <%= render "kaui/components/button/button", {
+              label: 'Upload',
+              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+              type: "submit",
+              html_class: "kaui-dropdown custom-hover m-0"
+            } %>
           </div>
       <% end %>
     </div>

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

@@ -7,18 +7,25 @@
 <%= javascript_tag do %>
 
 function switchBasicConfig() {
-    $('#catalog_xml').hide();
-    initBasicConfig();
-    $('#catalog_simple').show();
+    $('#catalog_xml').removeClass('active').hide();
+    if (typeof initBasicConfig === 'function') {
+        initBasicConfig();
+    }
+    $('#catalog_simple').addClass('active').show();
 }
 
 function switchXMLConfig() {
-    $('#catalog_simple').hide();
-    $('#catalog_xml').show();
+    $('#catalog_simple').removeClass('active').hide();
+    $('#catalog_xml').addClass('active').show();
 }
 
 $(document).ready(function() {
-    switchBasicConfig();
+    // Ensure both sections exist before switching
+    if ($('#catalog_simple').length && $('#catalog_xml').length) {
+        switchBasicConfig();
+    } else {
+        console.error('Catalog sections not found');
+    }
 });
 
 <% end %>

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

@@ -1,49 +1,89 @@
-<div id="catalog_simple">
-  <hr/>
-
-    <h1>Existing Plans
-        <% if can? :config_upload, Kaui::AdminTenant %>
-            <%= link_to '<i class="fa fa-plus-square"></i>'.html_safe,
-                        admin_tenant_new_catalog_path(:id => @tenant.id),
-                        :class => 'btn btn-xs' %>
+<div class="kaui-container show-catalog-simple" id="catalog_simple">
+<div class="existing-plans-container mt-4">
+    <div class="d-flex flex-column">
+    <div class="existing-plans-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+        <h2>Existing Plans</h2>
+        </div>
+        <span>
+        <% if @catalog_versions.present? %>
+            <div class="select-catalog-version d-inline-flex align-items-center gap-1">
+                <b>Catalog Versions:</b>
+                <select id="select_catalog" class="selectpicker show-menu-arrow">
+                    <% @catalog_versions.reverse_each do |catalog, i| %>
+                        <option idx="<%= catalog[:version] %>">
+                            <%= catalog[:version_date] %>
+                        </option>
+                    <% end %>
+                </select>
+            </div>
         <% end %>
-        <%= link_to '<i class="fa fa-arrow-down" aria-hidden="true"></i>'.html_safe,
-                    download_catalog_xml_path(:id => @tenant.id, :effective_date => @latest_version),
-                    :class => 'btn btn-xs', :id => 'download_link' %>
+
+
         <% if can?(:delete, Kaui::AdminTenant) %>
-            <%= link_to '<i class="fa fa-times"></i>'.html_safe,
-                        admin_tenant_delete_catalog_path(:id => @tenant.id), :method => :delete, :class => 'btn btn-xs' %>
+            <%= link_to admin_tenant_delete_catalog_path(id: @tenant.id), :method => :delete, class: "text-decoration-none" do %>
+                <%= render "kaui/components/button/button", {
+                    label: "Delete Catalog",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "button",
+                    html_class: "kaui-button dots-menu custom-hover",
+                } %>
+            <% end %>
+        <% end %>
+        <%= link_to download_catalog_xml_path(id: @tenant.id, effective_date: @latest_version), id: "download_link", class: "text-decoration-none" do %>
+            <%= render "kaui/components/button/button", {
+                label: "Download XML",
+                icon: "kaui/download.svg",
+                variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                type: "button",
+                html_class: "kaui-button custom-hover"
+            } %>
+        <% end %>
+        
+        <%= link_to "javascript:void(0);", onclick: "switchXMLConfig();", 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 %>
-        <a class='btn btn-xs' href="javascript:void(0);" onclick="switchXMLConfig();">Enable XML View</a>
-    </h1>
-
-  <table id="existing-plans-for-tenants" class="table table-condensed">
-
-    <span class='label'>
-        <b>Catalog Versions:</b>
-    </span>
-    <select id="select_catalog" class="selectpicker show-menu-arrow">
-      <% @catalog_versions.reverse_each do |catalog, i| %>
-          <option idx="<%= catalog[:version] %>"><%= catalog[:version_date] %></option>
-      <% end %>
-    </select>
 
-    <thead>
-    <tr>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.plan_id') %></th>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.product') %></th>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.category') %></th>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.billing_period') %></th>
-      <th id="currency_select"></th>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.trial') %></th>
-      <th><%= I18n.translate('views.catalogs.show.plan_table.final_phase_duration') %></th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody id="catalog_detail">
-
-    </tbody>
-  </table>
+        <% if can? :config_upload, Kaui::AdminTenant %>
+            <%= link_to admin_tenant_new_catalog_path(:id => @tenant.id) do %>
+                <%= render "kaui/components/button/button", {
+                    label: "Add Catalog",
+                    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="">
+        <table id="existing-plans-for-tenants" class="existing-plans-table">
+            <thead>
+            <tr>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.plan_id') %></th>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.product') %></th>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.category') %></th>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.billing_period') %></th>
+            <th id="currency_select"></th>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.trial') %></th>
+            <th><%= I18n.translate('views.catalogs.show.plan_table.final_phase_duration') %></th>
+            <th></th>
+            </tr>
+            </thead>
+            <tbody id="catalog_detail">
+
+            </tbody>
+        </table>
+    </div>
+    </div>
+</div>
 </div>
 
 <script id="currencies_template" type="text/template">
@@ -62,7 +102,7 @@
         <tr class="selected_catalog">
           <td>{{plan_id}}</td>
           <td>{{#humanized_product_name}}{{product_name}}{{/humanized_product_name}}</td>
-          <td>{{#humanized_product_category}}{{product_category}}{{/humanized_product_category}}</td>
+          <td> <span class="category">{{#humanized_product_category}}{{product_category}}{{/humanized_product_category}}</span></td>
           <td>{{#humanized_billing_period}}{{billing_period}}{{/humanized_billing_period}}</td>
           <td>
             {{#currenciesWithPrices}}
@@ -75,11 +115,20 @@
           </td>
 
           <td>
-            {{final_phase_duration}}
+            <span class="phase-duration">{{final_phase_duration}}</span>
           </td>
 
-          <td><a class="btn btn-xs"
-                 href="{{new_plan_currency_path}}"><i class="fa fa-plus-square"></i> currency</a></td>
+          <td>
+            <%= link_to "{{new_plan_currency_path}}", class:"text-decoration-none" do %>
+                <%= render "kaui/components/button/button", {
+                    label: "Currency",
+                    icon: "kaui/setting/plus.svg",
+                    variant: "outline-secondary d-inline-flex align-items-center",
+                    type: "button",
+                    html_class: "currency-button kaui-button",
+                } %>
+            <% end %>
+          </td>
         </tr>
       {{/plans}}
     {{/catalog}}