kaui 3.0.9 → 4.0.0

data/app/views/kaui/payments/_payment_filterbar.html.erb

@@ -1,46 +1,71 @@
+
 <div class="modal fade" id="advanceSearchModal" tabindex="-1" role="dialog" aria-labelledby="advanceSearchModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="advanceSearchModalLabel">Advance Search</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <h5 class="modal-title d-flex align-items-center gap-3" id="advanceSearchModalLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/modal/search.svg", width: 20, height: 20) %>
+          </span>
+          Advance Search
+        </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 id="advanceSearchForm">
             <div class="form-group d-flex align-items-center">
-            <label for="searchFieldSelect" class="mr-2" style="width: 30%;">Search Fields:</label>
-            <select id="searchFieldSelect" class="form-control mr-2">
-              <% if @account.account_id.present? %>
-                <% @search_fields.reject { |value, _| value == 'account_id' }.each do |value, title| %>
-                  <option value="<%= value %>"><%= title %></option>
-                <% end %>
-              <% else %>
-                <% @search_fields.each do |value, title| %>
-                  <option value="<%= value %>"><%= title %></option>
+              <label for="searchFieldSelect" class="mr-2 field-label" style="width: 30%;">Search Field</label>
+              <select id="searchFieldSelect" class="form-control mr-2">
+                <% if @account.account_id.present? %>
+                  <% @search_fields.reject { |value, _| value == 'account_id' }.each do |value, title| %>
+                    <option value="<%= value %>"><%= title %></option>
+                  <% end %>
+                <% else %>
+                  <% @search_fields.each do |value, title| %>
+                    <option value="<%= value %>"><%= title %></option>
+                  <% end %>
                 <% end %>
-              <% end %>
-            </select>
-            <button type="button" class="btn btn-secondary" id="addSearchField">Add</button>
+              </select>
+              <button type="button" class="border-button custom-hover" id="addSearchField">
+                <%= image_tag("kaui/modal/plus.svg", width: 16, height: 16) %>
+              </button>
           </div>
           <div id="search-fields-container">
           </div>
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" id="applyAdvanceSearch">Apply Search</button>
-        <button type="button" class="btn btn-danger" id="clearAdvanceSearch">Clear Search</button>
+        <%= render "kaui/components/button/button", {
+          label: 'Clear Search',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-button custom-hover",
+          html_options: {
+            id: "clearAdvanceSearch"
+          }
+        } %>
+        <%= render "kaui/components/button/button", {
+          label: 'Apply Search',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-dropdown custom-hover",
+          html_options: {
+            id: "applyAdvanceSearch"
+          }
+        } %>
       </div>
     </div>
   </div>
 </div>
 
 <template id="search-field-template">
-  <div class="form-group row align-items-center search-field">
-    <label class="col-sm-4 col-form-label search-field-label"></label>
-    <div class="col-sm-3">
+  <div class="form-group row align-items-center justify-content-between search-field">
+    <label class="col-sm-3 col-form-label search-field-label"></label>
+    <div class="col-sm-4">
       <select class="form-control search-field-filter">
         <option value="eq">Equals</option>
         <option value="neq">Not Equals</option>
@@ -54,61 +79,12 @@
     <div class="col-sm-4">
       <input type="text" class="form-control search-field-value">
     </div>
-    <div class="col-sm-1">
-      <i class="glyphicon glyphicon-remove" id=remove-search-field></i>
-    </div>
+    <button type="button" class="button custom-hover" id="remove-search-field">
+      <%= image_tag("kaui/modal/red-close.svg", width: 16, height: 16) %>
+    </button>
   </div>
 </template>
 
-<style>
-  .form-group.row.align-items-center {
-    display: flex;
-    align-items: center;
-  }
-
-  .form-group.row.align-items-center label {
-    margin-bottom: 0; /* Remove default margin */
-  }
-
-  .form-group.row.align-items-center .form-control {
-    margin-right: 10px; /* Add some space between elements */
-  }
-
-  .form-group.d-flex {
-    display: flex;
-    align-items: center;
-  }
-
-  .form-group.d-flex label {
-    margin-bottom: 0; /* Remove default margin */
-  }
-
-  .form-group.d-flex .form-control {
-    margin-right: 10px; /* Add some space between the select box and the button */
-  }
-
-  #search-labels-container .label {
-    margin-left: 5px; /* Add space between labels */
-    margin-bottom: 5px; /* Add space below labels if they wrap to the next line */
-    color: white;
-  }
-
-  .filter-bar-container {
-    display: flex;
-    justify-content: flex-start; /* Align items to the left */
-    align-items: center; /* Center items vertically */
-  }
-
-  .filter-bar {
-    display: flex;
-    align-items: center; /* Center items vertically */
-  }
-
-  .filter-bar label {
-    margin: 10px; /* Add some space between the label and the select box */
-  }
-</style>
-
 <%= javascript_tag do %>
 $(document).ready(function() {
   populateSearchLabelsFromUrl();
@@ -157,18 +133,26 @@ $(document).ready(function() {
     }
 
     searchFields.each(function() {
-      var filter = $(this).find('.search-field-filter option:selected').text();
-      var value = $(this).find('.search-field-value').val();
-      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '');
+      var filter = $(this).find('.search-field-filter option:selected').text().trim();
+      var value = $(this).find('.search-field-value').val().trim();
+      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '').trim();
 
       // Create and append the search label
       if (value !== '') {
         var label = $('<span>', {
-          class: 'label label-info',
-          text: columnName + ' [' + filter + '] ' + value
+          class: 'label label-info d-inline-flex align-items-center gap-2',
+          'data-field': columnName,
+          'data-filter': filter,
+          'data-value': value
         });
+        var labelText = $('<span>', { text: columnName + ' [' + filter + '] ' + value });
+        var closeIcon = $('<span>', {
+          class: 'filter-close-icon',
+          style: 'cursor: pointer; margin-left: 5px; display: inline-flex; align-items: center;'
+        }).html('<svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8337 4.1665L4.16699 15.8332M4.16699 4.1665L15.8337 15.8332" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+        label.append(labelText).append(closeIcon);
+        searchLabelsContainer.append(label);
       }
-      searchLabelsContainer.append(label);
     });
     $('#advanceSearchModal').modal('hide');
   });

data/app/views/kaui/payments/_payment_invoice_table.html.erb

@@ -0,0 +1,105 @@
+<div class="info-wrapper" >
+
+  <div class="tag-bar">
+    <!--<div class="tag-select">-->
+    <!--<span><i class="fa fa-tag"></i><i class="fa fa-caret-down"></i></span>-->
+    <!--<div class="tag-select-box">-->
+    <!--<strong>Tag As:</strong>-->
+    <!--</div>-->
+    <!--</div>-->
+
+    <%= render :partial => 'kaui/custom_fields/list_bar',
+               :locals => {:custom_fields => custom_fields} %>
+
+    <% gateway_url = gateway_url(payment_method, payment) %>
+    <% unless gateway_url.nil? %>
+        <div class="gateway-link">
+          <span><%= link_to 'See in gateway', gateway_url, :target => '_blank' %></span>
+        </div>
+    <% end %>
+  </div>
+
+  <div style="overflow-x: auto;">
+    <table id="payment_<%= payment.payment_id %>" class="payment-table">
+      <thead>
+      <tr>
+        <th><%= I18n.translate('date') %></th>
+        <th><%= I18n.translate('type') %></th>
+        <th><%= I18n.translate('amount') %></th>
+        <th><%= I18n.translate('transaction_external_key') %></th>
+        <th><%= I18n.translate('first_id') %></th>
+        <th><%= I18n.translate('second_id') %></th>
+        <th><%= I18n.translate('gateway_code') %></th>
+        <th><%= I18n.translate('gateway_message') %></th>
+        <th><%= I18n.translate('status') %></th>
+      </tr>
+      </thead>
+      <tbody>
+      <% (payment.transactions || []).each do |transaction| %>
+          <tr>
+            <td><%= format_date(transaction.effective_date, account.time_zone).html_safe %></td>
+            <td><span class="phase-type"><%= transaction.transaction_type %></span></td>
+            <td>
+              <% if transaction.amount.present? %>
+                  <% if transaction.amount != transaction.processed_amount %>
+                  <%= humanized_money_with_symbol Kaui::Transaction.processed_amount_to_money(transaction) %>
+                  (<%= transaction.currency %>)
+                  <a href="#" data-toggle="tooltip" class="kb-tooltip" title="<%= I18n.translate('requested_amount_colon') %> <%= humanized_money_with_symbol Kaui::Transaction.amount_to_money(transaction) %>(<%= transaction.currency %>)">(?)</a>
+                  <% else%>
+                  <%= humanized_money_with_symbol Kaui::Transaction.amount_to_money(transaction) %>
+                  (<%= transaction.currency %>)
+                  <% end %>
+              <% end %>
+            </td>
+            <td><%= transaction.transaction_external_key %></td>
+            <td><%= transaction.first_payment_reference_id %></td>
+            <td><%= transaction.second_payment_reference_id %></td>
+            <td><%= transaction.gateway_error_code %></td>
+            <td><%= transaction.gateway_error_msg %></td>
+            <td>
+              <ul style="list-style: none; padding-left: 0">
+                <li>
+                  <%= colored_transaction_status(transaction.status) %>
+                  <% if current_user.root? %>
+                      <%= link_to '&nbsp;<i class="fa fa-eraser"></i>'.html_safe, kaui_engine.new_account_transaction_path(payment.account_id,
+                                                                                                                           :payment_id => payment.payment_id,
+                                                                                                                           :transaction_id => transaction.transaction_id) %>
+                  <% end %>
+                </li>
+                <% if transaction.next_retry_date %>
+                    <li>
+                      Scheduled retry:
+                      <%= transaction.next_retry_date %>
+                      <% if can? :trigger, Kaui::Payment %>
+                          <%= link_to '<i class="fa fa-times"></i>'.html_safe, kaui_engine.payment_cancel_scheduled_payment_path(payment.payment_id, :account_id => payment.account_id, :transaction_external_key => transaction.transaction_external_key), :method => :delete %>
+                      <% end %>
+                    </li>
+                <% end %>
+                <% (transaction.properties || []).sort_by { |p| p.key }.each do |property| %>
+                    <% next if property.value.blank? %>
+                    <li><strong><%= property.key %>:</strong>
+                        <%= json?(property.value) ? "<pre>#{JSON.pretty_generate(JSON.parse(property.value))}</pre>".html_safe : property.value %></li>
+                <% end %>
+              </ul>
+            </td>
+          </tr>
+      <% end %>
+      </tbody>
+    </table>
+  </div>
+
+</div>
+
+<%= javascript_tag do %>
+  $(document).ready(function() {
+    $('#payment_<%= payment.payment_id %>').dataTable({
+      "dom": "t",
+      "paging": false
+    });
+
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
+
+  });
+<% end %>

data/app/views/kaui/payments/_payment_table.html.erb

@@ -1,71 +1,8 @@
-<div class="info-wrapper" >
-
-  <div class="tag-bar">
-    <!--<div class="tag-select">-->
-    <!--<span><i class="fa fa-tag"></i><i class="fa fa-caret-down"></i></span>-->
-    <!--<div class="tag-select-box">-->
-    <!--<strong>Tag As:</strong>-->
-    <!--</div>-->
-    <!--</div>-->
-
-    <%= render :partial => 'kaui/custom_fields/list_bar',
-               :locals => {:custom_fields => custom_fields} %>
-
-    <% if payment.capturable? || payment.voidable? || (payment.refundable? && (can?(:refund, Kaui::Payment) || can?(:chargeback, Kaui::Payment))) %>
-
-      <div class="tag-select" onclick="void(0)">
-        <span><i class="fa fa-credit-card"></i><i class="fa fa-caret-down"></i></span>
-
-        <div class="tag-select-box">
 
-          <% if payment.refundable? %>
-            <% if can? :refund, Kaui::Payment %>
-                <% if payment.target_invoice_id.present? %>
-                    <%= link_to '<i class="fa fa-money"></i>&nbsp;Refund'.html_safe, kaui_engine.new_account_refund_path(payment.account_id, :params => {:payment_id => payment.payment_id,
-                                                                                                                                                         :invoice_id => payment.target_invoice_id}) %>
-                <% else %>
-                    <%= link_to '<i class="fa fa-money"></i>&nbsp;Refund'.html_safe, kaui_engine.new_account_transaction_path(payment.account_id,
-                                                                                                                              :payment_id => payment.payment_id,
-                                                                                                                              :payment_method_id => payment.payment_method_id,
-                                                                                                                              :amount => payment.amount_refundable,
-                                                                                                                              :currency => payment.currency,
-                                                                                                                              :transaction_type => 'REFUND') %>
-                <% end %>
-            <% end %>
-            <% if can? :chargeback, Kaui::Payment %>
-                <% if payment.target_invoice_id.present? %>
-                    <%= link_to '<i class="fa fa-undo"></i>&nbsp;Chargeback'.html_safe, kaui_engine.new_account_chargeback_path(payment.account_id,
-                                                                                                                                :payment_id => payment.payment_id,
-                                                                                                                                :invoice_id => payment.target_invoice_id) %>
-                <% else %>
-                    <%= link_to '<i class="fa fa-undo"></i>&nbsp;Chargeback'.html_safe, kaui_engine.new_account_transaction_path(payment.account_id,
-                                                                                                                                 :payment_id => payment.payment_id,
-                                                                                                                                 :payment_method_id => payment.payment_method_id,
-                                                                                                                                 :amount => payment.amount_refundable,
-                                                                                                                                 :currency => payment.currency,
-                                                                                                                                 :transaction_type => 'CHARGEBACK') %>
-                <% end %>
-            <% end %>
-          <% end %>
-          <% if payment.capturable? %>
-                <%= link_to '<i class="fa fa-credit-card"></i>&nbsp;Capture'.html_safe, kaui_engine.new_account_transaction_path(payment.account_id,
-                                                                                                                                 :payment_id => payment.payment_id,
-                                                                                                                                 :payment_method_id => payment.payment_method_id,
-                                                                                                                                 :amount => payment.amount_capturable,
-                                                                                                                                 :currency => payment.currency,
-                                                                                                                                 :transaction_type => 'CAPTURE') %>
-          <% end %>
-          <% if payment.voidable? %>
-                <%= link_to '<i class="fa fa-times-circle-o"></i>&nbsp;Void'.html_safe, kaui_engine.new_account_transaction_path(payment.account_id,
-                                                                                                                                 :payment_id => payment.payment_id,
-                                                                                                                                 :payment_method_id => payment.payment_method_id,
-                                                                                                                                 :transaction_type => 'VOID') %>
-          <% end %>
+<div class="info-wrapper" >
 
-        </div>
+  <div class="d-flex justify-content-end align-items-center mb-2">
 
-      </div>
-    <% end %>
     <% gateway_url = gateway_url(payment_method, payment) %>
     <% unless gateway_url.nil? %>
         <div class="gateway-link">
@@ -74,8 +11,8 @@
     <% end %>
   </div>
 
-  <div style="overflow-x: auto;">
-    <table id="payment_<%= payment.payment_id %>" class="table table-condensed mobile-data">
+  <div style="overflow-x: auto;" class="scrollable-payment-table">
+    <table id="payment_<%= payment.payment_id %>" class="payment-table">
       <thead>
       <tr>
         <th><%= I18n.translate('date') %></th>

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

@@ -1,30 +1,44 @@
-<div class="search">
-  <div class="column-block">
-    <h1><%= I18n.translate('payments') %></h1>
-    <%= render :partial => 'multi_functions_bar' %>
-    <table id="payments-table" class="table table-condensed mobile-data" style="width:100%">
-      <thead>
-        <tr>
-          <% Kaui.account_payments_columns.call()[0].each do |title| %>
-            <th><%= title %></th>
-          <% end %>
-        </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty"><%= I18n.translate('loading_data_from_server') %></td>
-      </tr>
-      </tbody>
-    </table>
+<div class="kaui-container payments-index">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex " style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="payments" style="max-width: <%= request.path.include?('/accounts/') ? '67.5rem' : '80rem' %>;">
+      <div class="d-flex flex-column ">
+        <div class="payments-header mb-4">
+          <div class="d-flex align-items-center">
+          <h2><%= I18n.translate('payments') %></h2>
+          </div>
+          <span>
+            <%= render :partial => 'multi_functions_bar' %>
+          </span>
+        </div>
+        <div id="search-labels-container" class="ml-2">
+          <!-- Dynamic search labels will be added here -->
+        </div>
+        <table id="payments-table" class="payments-table">
+          <thead class="table-header">
+            <tr>
+              <% Kaui.account_payments_columns.call()[0].each_with_index do |title, index| %>
+                <th class="sortable-header" data-column="<%= index %>">
+                  <div class="header-content">
+                    <span class="header-text"><%= title %></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>
+              <% end %>
+            </tr>
+          </thead>
+          <tbody class="table-body">
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </div>
 
-<style>
-  #payments-table td, #payments-table tr {
-    white-space: nowrap;
-  }
-</style>
-
 <%= javascript_tag do %>
 $(document).ready(function() {
   var stateKey = 'DataTables_payments-table';
@@ -52,7 +66,8 @@ $(document).ready(function() {
       "pagingType": <% if @max_nb_records.nil? -%>"simple"<% else -%>"full_numbers"<% end -%>,
       "language": {
         <!-- See DefaultPaginationSqlDaoHelper.java -->
-        "info": <% if @max_nb_records.nil? -%>"Showing _START_ to _END_ of <%= number_with_delimiter(Kaui::EngineControllerUtil::SIMPLE_PAGINATION_THRESHOLD) -%>+ entries"<% else -%>"Showing _START_ to _END_ of _TOTAL_ entries"<% end -%>
+        "info": <% if @max_nb_records.nil? -%>"Showing _START_ to _END_ of <%= number_with_delimiter(Kaui::EngineControllerUtil::SIMPLE_PAGINATION_THRESHOLD) -%>+ entries"<% else -%>"Showing _START_ to _END_ of _TOTAL_ entries"<% end -%>,
+        "infoFiltered": ""
       },
       "pageLength": <%= @limit %>,
       "displayStart": <%= @offset %>,
@@ -93,7 +108,7 @@ $(document).ready(function() {
       },
     <% end %>
     <% if @search_query.blank? %>
-      "ordering": false,
+      "ordering": true,
     <% elsif !@ordering.blank? %>
       "order": [[ 0, "<%= @ordering %>" ]],
     <% end %>
@@ -102,8 +117,57 @@ $(document).ready(function() {
     "search": {"search": "<%= @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 state
+  <% if !@ordering.blank? %>
+    var initialColumn = 0;
+    var initialDirection = "<%= @ordering %>";
+    updateSortIndicators(initialColumn, initialDirection);
+  <% end %>
+
   <!-- When we don't know the total number of pages, we need to hide the legend and next button manually -->
   $('#payments-table').on('draw.dt', function() {
+
+    $("td.dataTables_empty").each(function() {
+      var text = $(this).text().trim();
+      $(this).html('<p class="max-text-container">' + text + '</p>');
+    });
+
     <% if @max_nb_records.nil? %>
       var noMoreData = table.column(0)
                             .data()

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

@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Process payment</h1>
-      <%= render 'form' %>
+<div class="register process-payment-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="M16.6667 3.33301H3.33341C2.41294 3.33301 1.66675 4.0792 1.66675 4.99967V14.9997C1.66675 15.9202 2.41294 16.6663 3.33341 16.6663H16.6667C17.5872 16.6663 18.3334 15.9202 18.3334 14.9997V4.99967C18.3334 4.0792 17.5872 3.33301 16.6667 3.33301Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M8.33325 13.333H9.58325M12.0833 13.333H14.9999" stroke="#414651" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M1.66675 7.5H18.3334" stroke="#414651" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                Process payment
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>