kaui 3.0.9 → 4.0.0

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

@@ -1,38 +1,55 @@
 <%= form_for @credit, :url => {:action => :create}, :html => {:class => 'form-horizontal'} do |f| %>
     <%= f.hidden_field :invoice_id %>
 
-    <div class="form-group">
-      <%= f.label :amount, 'Amount', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.number_field :amount, :step => :any, :id => 'amount', :class => 'form-control' %>
-        <% if @invoice.present? %>
-            <p class="help-block">Currency: <%= @invoice.currency %></p>
-        <% end %>
+    <div class="form-group d-flex pb-3">
+      <%= f.label :amount, 'Amount', class: 'col-sm-3 control-label' %>
+      <div class="input-group">
+        <%= f.number_field :amount, step: :any, id: 'charge_amount', class: 'form-control', placeholder: '$ 0.00' %>
+        
+        <div>
+          <% if @invoice.present? %>
+            <span class="input-group-text"><%= @invoice.currency %></span>
+            <%= f.hidden_field :currency %>
+          <% else %>
+            <%= f.select :currency, currencies, {}, class: 'form-control currency-select' %>
+          <% end %>
+        </div>
       </div>
+      <% if @invoice.present? %>
+        <p class="help-block mt-1">Currency: <%= @invoice.currency %></p>
+      <% end %>
     </div>
-    <% unless @invoice.present? %>
-        <div class="form-group">
-          <%= f.label :currency, 'Currency', :class => 'col-sm-2 control-label' %>
-          <div class="col-sm-10">
-            <%= f.select :currency, currencies, {}, :class => 'form-control' %>
-          </div>
-        </div>
-    <% end %>
-    <div class="form-group">
-      <%= label_tag :reason, 'Reason', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :reason, 'Reason', :class => 'col-sm-3 control-label' %>
+      <div class="input-group">
         <%= select_tag :reason, options_for_select(Kaui.credit_reason_codes), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3 border-bottom mb-3">
+      <%= label_tag :comment, 'Comment', :class => 'col-sm-3 control-label' %>
+      <div class="input-group">
         <%= 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 'Save', :class => 'btn btn-default' %>
-      </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: 'Save Credit',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "submit",
+        html_class: "kaui-dropdown custom-hover",
+        html_options: {
+          id: "saveButton"
+        }
+      } %>
     </div>
 <% end %>

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

@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new credit</h1>
-      <%= render 'form' %>
+<div class="register add-new-credit-modal">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-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="M9.58325 9.1665H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M12.0833 5.8335H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M16.6666 17.9165V3.33317C16.6666 2.4127 15.9204 1.6665 14.9999 1.6665H4.99992C4.07944 1.6665 3.33325 2.4127 3.33325 3.33317V17.9165L6.66659 16.2498L9.99992 18.3332L13.3333 16.2498L16.6666 17.9165Z" stroke="#414651" stroke-width="1.5" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                Add new credit
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

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

@@ -1,31 +1,43 @@
 <%= form_for @custom_field, :html => {:class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
-      <%= f.label :object_id, 'Object ID', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_field :object_id, :class => 'form-control' %>
-      </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :object_id, 'Object ID', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= f.text_field :object_id, :class => 'form-control' %>
     </div>
-    <div class="form-group">
-      <%= f.label :object_type, 'Object type', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.select :object_type, [:ACCOUNT, :BUNDLE, :SUBSCRIPTION, :INVOICE, :INVOICE_ITEM, :PAYMENT], {:selected => :account}, :class => 'form-control' %>
-      </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :object_type, 'Object type', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= f.select :object_type, [:ACCOUNT, :BUNDLE, :SUBSCRIPTION, :INVOICE, :INVOICE_ITEM, :PAYMENT], {:selected => :account}, :class => 'form-control' %>
     </div>
-    <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' %>
-      </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :name, 'Name', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= f.text_field :name, :class => 'form-control' %>
     </div>
-    <div class="form-group">
-      <%= f.label :value, 'Value', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_field :value, :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= submit_tag 'Save', :class => 'btn btn-default' %>
-      </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :value, 'Value', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= f.text_field :value, :class => 'form-control' %>
     </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 Field',
+      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/custom_fields/_list_bar.html.erb

@@ -1,12 +1,13 @@
-<% unless custom_fields.blank? %>
-    <div class="tag-select" onclick="void(0)">
-      <span><i class="fa fa-sticky-note"></i><i class="fa fa-caret-down"></i></span>
+<% container_class = ['tag-select custom-fields', local_assigns[:container_class]].compact.join(' ') %>
+<% label_class = ['tag-description', local_assigns[:label_class]].compact.join(' ') %>
 
-      <div class="tag-select-box">
-        <strong>Custom fields:</strong>
-        <% custom_fields.each do |cf| %>
-            <label class='tag-description'><%= cf.name %>: <%= cf.value %></label>
-        <% end %>
-      </div>
+<% unless custom_fields.blank? %>
+  <div class="<%= container_class %> list-bar-custom-fields">
+    <strong>Custom fields</strong>
+    <div class="tag-select-box">
+      <% custom_fields.each do |cf| %>
+        <label class="<%= label_class %>"><%= cf.name %>: <%= cf.value %></label>
+      <% end %>
     </div>
-<% end %>
+  </div>
+<% end %>

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

@@ -1,31 +1,82 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Custom Fields
-      <% if can? :add, Kaui::CustomField %>
-          <%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, new_custom_field_path %>
-      <% end %>
-    </h1>
-
-    <table id="custom_fields-table" class="table table-condensed mobile-data">
-      <thead>
-      <tr>
-        <th>Object ID</th>
-        <th>Object type</th>
-        <th>Name</th>
-        <th>Value</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty">Loading data from server</td>
-      </tr>
-      </tbody>
-    </table>
+<div class="kaui-container kaui-custom-fields-index">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Custom Fields", href: '#' }
+    ]
+  } %>
 
-  </div>
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_setting_sidebar' %>
+
+    <div class="custom-fields-details w-100">
+      <div class="d-flex flex-column">
+        <div class="custom-fields-details-header">
+          <h2>Custom Fields</h2>
+          <span>
+            <% if can? :add, Kaui::CustomField %>
+              <%= link_to new_custom_field_path do %>
+                <%= render "kaui/components/button/button", {
+                  label: "Create Field",
+                  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">
+          <table id="custom_fields-table" class="table table-condensed mobile-data">
+            <thead>
+            <tr>
+              <th class="sortable-header" data-column="0">
+                <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="1">
+                <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="2">
+                <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="3">
+                <div class="header-content">
+                  <span class="header-text">Value</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>
+      </div>
+    </div>
+  </div>
 </div>
 
 <%= javascript_tag do %>
@@ -44,9 +95,52 @@ $(document).ready(function() {
     <% end %>
     "processing": true,
     "serverSide": true,
-    "ajax": "<%= custom_fields_pagination_path(:ordering => @ordering, :format => :json) %>"
+    "ajax": "<%= custom_fields_pagination_path(:ordering => @ordering, :format => :json, :advance_search_query => @advance_search_query) %>"
   });
 
+  // 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');
+  }
+
+  // Initialize sort indicators based on current ordering
+  <% unless @ordering.blank? %>
+    currentSortColumn = 0;
+    currentSortDirection = '<%= @ordering %>';
+    updateSortIndicators(0, '<%= @ordering %>');
+  <% end %>
+
   <!-- When we don't know the total number of pages, we need to hide the legend and next button manually -->
   <% if @max_nb_records.nil? %>
     $('#custom_fields-table').on('draw.dt', function() {

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

@@ -1,10 +1,21 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new custom field</h1>
-      <%= render 'form' %>
+<div class="register add-new-custom-field-details">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+          <% if can? :create, Kaui::AdminTenant %>
+            <h5 class="add-new-custom-field-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="M1.66699 5.83366C1.66699 4.91318 2.41318 4.16699 3.33366 4.16699H16.667C17.5875 4.16699 18.3337 4.91318 18.3337 5.83366V14.167C18.3337 15.0875 17.5875 15.8337 16.667 15.8337H3.33366C2.41318 15.8337 1.66699 15.0875 1.66699 14.167V5.83366Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M11.667 8.74967L13.3337 7.08301L15.0003 8.74967M11.667 11.2497L13.3337 12.9163L15.0003 11.2497" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M5 10H8.33333" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Add New Custom Field
+            </h5>
+            <%= render 'form' %>
+          <% else %>
+                  <p>You are not allowed to create tenants, please contact your administrator.</p>
+          <% end %> 
+        </div>
     </div>
-
-  </div>
 </div>

data/app/views/kaui/errors/500.html.erb

@@ -8,7 +8,7 @@
         width: 35em; /* Increase the width of the dialog */
         padding: 1em 6em; /* Increase the padding of the dialog */
         margin: 4em auto 0 auto;
-        border: 1px solid #ccc;
+        border: 0.0625rem solid #ccc;
         border-right-color: #999;
         border-bottom-color: #999;
         font-size: 1.2em; /* Increase the font size in the dialog */

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

@@ -1,38 +1,85 @@
-<div class="home">
-  <div class="row">
-    <div class="col-md-6 col-md-offset-3 text-center">
+<div class="pt-4">
+    <div class="kaui-container py-5">
+        <div class="row">
+            <div class="col-md-9 col-lg-9 mb-4">
+                <h5 class="fw-semibold pb-4 text-black-900 fs-4 fw-500">Get Started</h5>
+                <div class="row mb-4">
+                    <%= render partial: "kaui/components/dashboard/card", locals: { title: "Accounts", count: @max_records[:account], icon: "kaui/header/account.svg", path: kaui_engine.accounts_path } %>
+                    <%= render partial: "kaui/components/dashboard/card", locals: { title: "Invoices", count: @max_records[:invoice], icon: "kaui/header/invoice.svg", path: kaui_engine.invoices_path } %>
+                    <%= render partial: "kaui/components/dashboard/card", locals: { title: "Payments", count: @max_records[:payment], icon: "kaui/header/payment.svg", path: kaui_engine.payments_path } %>
+                </div>
 
-      <%= form_tag search_path, :id => 'home_searchform', :method => 'get' do %>
-          <%= text_field_tag :q, @search_query, :id => 'search', :placeholder => 'What are you looking for?' %>
-          <%= submit_tag 'Search' %>
+                <!-- Settings Section -->
+                <h5 class="fw-semibold pb-4 text-black-900 pt-4 fs-4 fw-500">Settings</h5>
+                <div class="row row-cols-1 row-cols-md-2 g-4 mb-5">
+                    <%= render partial: "kaui/components/dashboard/setting", locals: { path: kaui_engine.admin_tenants_path, icon: "kaui/dashboard/users.svg", title: "Tenant", desc: "Run multiple tenants for each Kill Bill deployment." } %>
+                    <%= render partial: "kaui/components/dashboard/setting", locals: { path: kaui_engine.admin_allowed_users_path, icon: "kaui/dashboard/users.svg", title: "Users", desc: "Manage users in Kaui – create user roles, create and edit users, assign roles and tenants to users." } %>
+                    <%= render partial: "kaui/components/dashboard/setting", locals: { path: kaui_engine.tags_path, icon: "kaui/dashboard/tags.svg", title: "Tags", desc: "Apply one or more tags to accounts and invoices, a tag being a single value." } %>
+                    <%= render partial: "kaui/components/dashboard/setting", locals: { path: kaui_engine.custom_fields_path, icon: "kaui/dashboard/custom-field.svg", title: "Custom Fields", desc: "Create custom fields (key/value pairs) and attach them to objects like accounts, payments." } %>
+                    <% if kpm_plugin_installed %>
+                        <%= render partial: "kaui/components/dashboard/setting", locals: { path: "kpm", icon: "kaui/dashboard/plugins.svg", title: "Plugins", desc: "Install and uninstall plugins, as well as start, stop, and restart them at runtime." } %>
+                    <% end %>
+                    <% if aviate_plugin_installed %>
+                        <%= render partial: "kaui/components/dashboard/setting", locals: { path: "/aviate", icon: "kaui/dashboard/aviate.svg", title: "Aviate", desc: "Enhanced system observability, streamlined configurations, and valuable business intelligence." } %>
+                    <% end %>
+                </div>
+            </div>
 
-          <div id="advanced">
-            <%= link_to('Advanced search','#advancedSearchModal', data: { toggle: 'modal', target: '#advancedSearchModal' }) %>
-          </div>
-      <% end %>
+            <div class="col-md-3 col-lg-3 mb-4">
+                <!-- Documentation Section -->
+                <h5 class="fw-semibold mb-3 text-black-900 fs-4 fw-500">Documentation</h5>
+                <div class="card border-0 shadow-sm rounded-3 p-4" style="max-width: 22.5rem;">
 
+                    <%= image_tag 'kaui/dashboard/kaui-doc-img.png', class: "mb-3 img-fluid" %>
+                    <h6>Kaui</h6>
+                    <p class="text-muted small">Kill Bill's Admin User Interface for Subscription Management</p>
+                    <%= link_to "View Docs", "https://docs.killbill.io/", class: "text-primary text-decoration-none fw-medium small" %>
+                </div>
+            </div>
+        </div>
     </div>
-    <div class="col-md-6 col-md-offset-3 legend">
-      <p class="text-center">
-        <%= link_to 'Latest accounts', kaui_engine.accounts_path %> /
-        <%= link_to 'Latest invoices', kaui_engine.invoices_path %> /
-        <%= link_to 'Latest payments', kaui_engine.payments_path %>
-      </p>
-    </div>
-  </div>
-  <span class="duck_help">Accounts are searched by default. For complex searches, use <b>Advanced Search</b>.</span>
 
-</div>
 
-<%= render :partial => 'advanced_search_modal' %>
+    <%
+=begin%>
+    <div class="home">
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3 text-center">
+
+                <%= form_tag search_path, :id => 'home_searchform', :method => 'get' do %>
+                <%= text_field_tag :q, @search_query, :id => 'search', :placeholder => 'What are you looking for?' %>
+                <%= submit_tag 'Search' %>
+
+                <div id="advanced">
+                    <%= link_to('Advanced search','#advancedSearchModal', data: { toggle: 'modal', target: '#advancedSearchModal' }) %>
+                </div>
+                <% end %>
+
+            </div>
+            <div class="col-md-6 col-md-offset-3 legend">
+                <p class="text-center">
+                    <%= link_to 'Latest accounts', kaui_engine.accounts_path %> /
+                    <%= link_to 'Latest invoices', kaui_engine.invoices_path %> /
+                    <%= link_to 'Latest payments', kaui_engine.payments_path %>
+                </p>
+            </div>
+        </div>
+        <span class="duck_help">Accounts are searched by default. For complex searches, use <b>Advanced Search</b>.</span>
+
+    </div>
+
+    <%= render :partial => 'advanced_search_modal' %>
 
-<script language="javascript">
-    $(document).ready(function() {
-        function alignToSearch() {
-            var leftPosition = $('#search').position().left + 25;
-            $('#advanced').css('padding-left',leftPosition);
-        }
+    <script language="javascript">
+        $(document).ready(function() {
+            function alignToSearch() {
+                var leftPosition = $('#search').position().left + 25;
+                $('#advanced').css('padding-left', leftPosition);
+            }
 
-        alignToSearch();
-    });
-</script>
+            alignToSearch();
+        });
+    </script>
+    <%
+=end%>
+</div>

data/app/views/kaui/invoice_items/_edit_form.html.erb

@@ -4,28 +4,44 @@
     <%= f.hidden_field :account_id %>
     <%= f.hidden_field :currency %>
 
-    <div class="form-group">
-      <%= f.label :amount, 'Item amount', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label :amount, 'Item amount', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9  d-flex currency-group">
         <%= f.text_field :amount, :class => 'form-control' %>
-        <p class="help-block">Currency: <%= @invoice_item.currency %></p>
+        <div class="currency"><%= @invoice_item.currency %></div>
       </div>
     </div>
-    <div class="form-group">
-      <%= label_tag :reason, 'Reason', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :reason, 'Reason', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9  d-flex">
         <%= select_tag :reason, options_for_select(Kaui.invoice_item_reason_codes), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <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  d-flex">
         <%= 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">
-        <%= f.submit 'Save', :class => 'btn btn-default' %>
-      </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: 'Save Invoice',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "submit",
+        html_class: "kaui-dropdown custom-hover",
+        html_options: {
+          id: "saveButton"
+        }
+      } %>
     </div>
 <% end %>

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

@@ -1,10 +1,18 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
 
-    <div class="column-block">
-      <h1>Adjust invoice item</h1>
-      <%= render 'edit_form' %>
+<div class="register adjust-invoice-item-modal">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-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="M9.58325 9.16699H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M12.0833 5.83301H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M16.6666 17.917V3.33366C16.6666 2.41318 15.9204 1.66699 14.9999 1.66699H4.99992C4.07944 1.66699 3.33325 2.41318 3.33325 3.33366V17.917L6.66659 16.2503L9.99992 18.3337L13.3333 16.2503L16.6666 17.917Z" stroke="#414651" stroke-width="1.5" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                Adjust Invoice Item
+            </h5>
+            <%= render 'edit_form' %>
+        </div>
     </div>
-
-  </div>
 </div>