kaui 3.0.9 → 4.0.0

data/app/views/kaui/accounts/_multi_functions_bar.html.erb

@@ -95,10 +95,37 @@
             </div>
           </div>
           <div class="row">
-            <div class="col-md-6">
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input" id="allFields" name="allFields">
-                <label class="form-check-label" for="allFields">All fields</label>
+            <div class="d-flex align-items-center">
+              <label for="searchFieldSelect" class="field-label col-sm-3">Include fields</label>
+              <div class="col-md-9">
+                <div class="chip-select">
+                  <input type="checkbox" id="dropdown-toggle" hidden />
+
+                  <label for="dropdown-toggle" class="chip-input-box position-relative" style="position: relative; overflow: hidden;">
+                    <div class="chip-list" id="selected-fields-chips">
+                      <%# This will be dynamically populated with chips for selected fields %>
+                      <span class="chip" style="color: #999;">No fields selected</span>
+                      <svg width="16" height="16" class="position-absolute" style="top: 0.625rem; right: 0.625rem;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </div>
+                    <div id="" class="position-absolute" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
+                  </label>
+                  <div class="chip-dropdown">
+                    <label class="chip-option">
+                      <input type="checkbox" id="allFields" />
+                      All fields
+                    </label>
+                    <div class="mt-2" id="field-selection">
+                      <% Kaui.account_search_columns.call[0].each_with_index do |title, index| %>
+                        <label class="chip-option d-flex align-items-center gap-2">
+                          <input type="checkbox" class="field-toggle" data-field-index="<%= index %>" checked />
+                          <span><%= title %></span>
+                        </label>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -114,49 +141,49 @@
 
 <style>
   .dropdown-menu#column-visibility {
-    max-height: 300px;
-    width: 200px;
+    max-height: 18.75rem;
+    width: 12.5rem;
     overflow-y: auto;
   }
 
   .dropdown-menu#column-visibility::before {
     content: 'Drag to reorder columns';
     display: block;
-    height: 30px;
+    height: 1.875rem;
     text-align: center;
     color: darkgrey;
-    padding-top: 5px;
+    padding-top: 0.3125rem;
   }
-  
+
   .dropdown-menu {
-    padding: 5px;
+    padding: 0.3125rem;
   }
 
   .toggle-button-right {
     float: right;
-    margin-bottom: 10px;
-    margin-left: 10px;
+    margin-bottom: 0.625rem;
+    margin-left: 0.625rem;
     background-color: white;
     color: black;
     text-transform: none;
-    border: 1px solid #ccc;
-    padding: 8px 15px;
+    border: 0.0625rem solid #ccc;
+    padding: 0.5rem 0.9375rem;
   }
 
   .download-button-right {
     float: right;
-    margin-bottom: 10px;
-    margin-left: 10px;
+    margin-bottom: 0.625rem;
+    margin-left: 0.625rem;
     background-color: white;
     color: black;
     text-transform: none;
-    border: 1px solid #ccc;
-    padding: 8px 15px;
+    border: 0.0625rem solid #ccc;
+    padding: 0.5rem 0.9375rem;
   }
 
   .icon-drag {
     float: right;
-    padding: 5px;
+    padding: 0.3125rem;
   }
 
   .dropdown-container {
@@ -165,12 +192,13 @@
   }
 
   .label-group-item-manual {
-    margin: 5px;
+    margin: 0.3125rem;
     width: -webkit-fill-available;
     cursor: grab;
   }
+
   .label-group-item-manual:active {
-      cursor: grabbing;
+    cursor: grabbing;
   }
 </style>
 
@@ -231,18 +259,29 @@ $(document).ready(function() {
     downloadButton.addEventListener('click', function() {
       event.preventDefault();
 
-      var allFieldsChecked = document.getElementById('allFields').checked;
+      var allFieldsChecked = $('#allFields').is(':checked');
       var startDate = $('#startDate').val();
       var endDate = $('#endDate').val();
       var downloadAll = $('#allData').is(':checked');
-      var thElements = document.querySelectorAll('#accounts-table th');
-      var columnTitles = Array.from(thElements).map(function(th) {
-        return th.textContent.trim();
-      });
-      var columnsString = columnTitles.join(',')
+      
+      // Get selected fields
+      var selectedFields = [];
+      if (!allFieldsChecked) {
+        $('#field-selection input.field-toggle:checked').each(function() {
+          var labelText = $(this).closest('label').find('span').text().trim();
+          selectedFields.push(labelText);
+        });
+      } else {
+        // If all fields checked, get all column titles from the table
+        var thElements = document.querySelectorAll('#accounts-table th');
+        selectedFields = Array.from(thElements).map(function(th) {
+          return th.textContent.trim();
+        });
+      }
+
       var url = new URL("<%= download_accounts_path %>", window.location.origin);
       var params = new URLSearchParams();
-      params.append('columnsString', columnsString);
+      params.append('columnsString', selectedFields.join(','));
       if (!downloadAll) {
         params.append('startDate', startDate);
         params.append('endDate', endDate);

data/app/views/kaui/accounts/_payment_gateways.html.erb

@@ -0,0 +1,43 @@
+<div class="payment-methods">
+
+  <div class="d-flex flex-column">
+
+    <div class="payment-methods-header">
+      <h2>Payment Methods</h2>
+      <span>
+        <% if can? :create, Kaui::PaymentMethod %>
+          <%= form_tag kaui_engine.refresh_payment_methods_path(params.to_h), :method => :post, :class => 'form-force-inline form-right' do %>
+              <%= render "kaui/components/button/button", {
+                    label: "Update",
+                    icon: "kaui/account/refresh.svg",
+                    variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                    type: "submit",
+                    html_class: "kaui-button custom-hover",
+                  } %>
+          <%= link_to kaui_engine.new_payment_method_path(:account_id => @account.account_id) do %>
+            <%= render "kaui/components/button/button", {
+                  label: "Add Method",
+                  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 %>
+        <% end %>
+      </span>
+    </div>
+
+
+    <% unless @payment_methods.empty? %>
+        <div class="info-wrapper">
+
+          <%= render :partial => 'kaui/payment_methods/payment_methods_table', :locals => {:account => @account,
+                                                                                           :payment_methods => @payment_methods,
+                                                                                           :last_transaction_by_payment_method_id => @last_transaction_by_payment_method_id} %>
+        </div>
+    <% end %>
+
+  </div>
+
+</div>

data/app/views/kaui/accounts/_personal_details.html.erb

@@ -0,0 +1,67 @@
+<div class="personal-details">
+
+  <div class="personal-details-header">
+    <h2>Personal Information</h2>
+  </div>
+
+  <div class="row">
+
+    <div class="col-md-4">
+      <div class="info-item">
+        <b>Name</b>
+        <p><%= @account.name %></p>
+      </div>
+      <div class="info-item">
+        <b>Address1</b>
+        <p><%= @account.address1 %></p>
+      </div>
+      <div class="info-item">
+        <b>Address2</b>
+        <p><%= @account.address2 %></p>
+      </div>
+      <div class="info-item">
+        <b>City</b>
+        <p><%= @account.city %></p>
+      </div>
+    </div>
+
+    <div class="col-md-4">
+      <div class="info-item">
+        <b>State</b>
+        <p><%= @account.state %></p>
+      </div>
+      <div class="info-item">
+        <b>Country</b>
+        <p><%= @account.country %></p>
+      </div>
+      <div class="info-item">
+        <b>Postal Code</b>
+        <p><%= @account.postal_code %></p>
+      </div>
+      <div class="info-item">
+        <b>Phone</b>
+        <p><%= @account.phone %></p>
+      </div>
+    </div>
+
+    <div class="col-md-4">
+      <div class="info-item">
+        <b>Company</b>
+        <p><%= @account.company %></p>
+      </div>
+      <div class="info-item">
+        <b>Primary email</b>
+        <p><%= @account.email %></p>
+      </div>
+      <div class="info-item contact_email_tags">
+        <b>Contact emails</b>
+        <div class="email-tags">
+          <%= render :partial => 'kaui/account_emails/account_emails_table',
+                             :locals => {:account_emails => @account_emails} %>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>

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

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Update account</h1>
-      <%= render 'form' %>
+<div class="register kaui-new-account">
+    <div class="">
+        <div class="mx-auto" style="max-width: 37.5rem;">
+            <h5 class="add-account-title">
+            <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M13.3333 5.83333C13.3333 7.67428 11.8409 9.16667 9.99996 9.16667C8.15901 9.16667 6.66663 7.67428 6.66663 5.83333C6.66663 3.99238 8.15901 2.5 9.99996 2.5C11.8409 2.5 13.3333 3.99238 13.3333 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15.8333 15.8332C15.8333 13.532 13.9678 11.6665 11.6666 11.6665H8.33329C6.03211 11.6665 4.16663 13.532 4.16663 15.8332V17.4998H15.8333V15.8332Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+            </span>
+                Update account
+            </h5>
+            <%= render 'form_account' %>
+        </div>
     </div>
-
-  </div>
-</div>
+</div>

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

@@ -1,34 +1,69 @@
-<div class="search">
+<div class="kaui-container kaui-accounts-index">
+  <div class="search">
+    <div>
+      
+      <%= render "kaui/components/breadcrumb/breadcrumb" %>
+      <%= render :partial => 'account_filterbar' %>   
 
-  <div class="column-block">
-    <%= render :partial => 'multi_functions_bar' %>
+      <%= render partial: 'functions_bar', locals: {
+        title: "Accounts",
+        actions: [
+          {
+            label: "Advanced Search",
+            icon: 'kaui/search.svg',
+            html_class: "kaui-button custom-hover",
+            path: "#",
+            variant: "outline-secondary",
+            data: {
+              bs_toggle: "modal",
+              bs_target: "#advanceSearchModal"
+            }
+          },
+          {
+            label: "Download CSV",
+            icon: 'kaui/download.svg',
+            html_class: "kaui-button custom-hover",
+            path: "#",
+            variant: "outline-secondary",
+            id: "modalDownloadButton"
+          },
+          {
+            label: "Edit Columns",
+            icon: 'kaui/setting.svg',
+            html_class: "kaui-button custom-hover",
+            path: "#",
+            variant: "outline-secondary",
+            id: "dropdownMenu1"
+          },
+          {
+            label: "Create Account",
+            icon: 'kaui/plus.svg',
+            path: kaui_engine.new_account_path,
+            html_class: "kaui-dropdown custom-hover",
+            variant: "outline-secondary"
+          }
+        ]
+      } %>
+
+      <div id="search-labels-container" class="ml-2">
+        <!-- Dynamic search labels will be added here -->
+      </div>
 
-    <table id="accounts-table" class="table table-condensed mobile-data" style="width:100%">
-      <thead>
-      <tr>
-        <% Kaui.account_search_columns.call[0].each do |title| %>
-          <th><%= title %></th>
-        <% end %>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty">Loading data from server</td>
-      </tr>
-      </tbody>
-    </table>
+      <table id="accounts-table" class="table table-condensed mobile-data" style="width:100%">
+        <thead>
+          <tr>
+            <% Kaui.account_search_columns.call[0].each do |title| %>
+              <th><%= title %></th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table> 
+    </div>
   </div>
 </div>
 
-<style>
-  #accounts-table td, #accounts-table tr {
-    white-space: nowrap;
-  }
-  .custom-checkbox {
-    pointer-events: none;
-  }
-</style>
-
 <%= javascript_tag do %>
 $(document).ready(function() {
   var table = $('#accounts-table').DataTable({
@@ -36,6 +71,12 @@ $(document).ready(function() {
       "enable": false
     },
     "stateSave": true,
+    "stateSaveCallback": function(settings, data) {
+      localStorage.setItem('DataTables_accounts-table_' + window.location.pathname, JSON.stringify(data));
+    },
+    "stateLoadCallback": function(settings) {
+      return JSON.parse(localStorage.getItem('DataTables_accounts-table_' + window.location.pathname));
+    },
     "scrollX": true,
     "dom": "<'row'r>t<'row'<'col-md-6'i><'col-md-6'p>>",
     "pagingType": <% if @max_nb_records.nil? -%>"simple"<% else -%>"full_numbers"<% end -%>,
@@ -67,7 +108,10 @@ $(document).ready(function() {
         return reorderedData;
       }
     },
-    "columns": <%= raw @visible_columns.to_json %>
+    "columns": <%= raw @visible_columns.to_json %>,
+    "stateSaveParams": function(settings, data) {
+      data.start = 0; // always first page when restoring state
+    }
   });
 
   <!-- When we don't know the total number of pages, we need to hide the legend and next button manually -->
@@ -79,6 +123,12 @@ $(document).ready(function() {
       $(".next.paginate_button").toggleClass("disabled", noMoreData);
       $(".dataTables_info").toggle(!noMoreData);
     <% end %>
+
+    $("td.dataTables_empty").each(function() {
+      var text = $(this).text().trim();
+      $(this).html('<p class="max-text-container">' + text + '</p>');
+    });
+
     populateSearchLabelsFromUrl();
   });
 });

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

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new account</h1>
-      <%= render 'form' %>
+<div class="register kaui-new-account">
+    <div class="">
+        <div class="mx-auto" style="max-width: 37.5rem;">
+            <h5 class="add-account-title">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M13.3333 5.83333C13.3333 7.67428 11.8409 9.16667 9.99996 9.16667C8.15901 9.16667 6.66663 7.67428 6.66663 5.83333C6.66663 3.99238 8.15901 2.5 9.99996 2.5C11.8409 2.5 13.3333 3.99238 13.3333 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15.8333 15.8332C15.8333 13.532 13.9678 11.6665 11.6666 11.6665H8.33329C6.03211 11.6665 4.16663 13.532 4.16663 15.8332V17.4998H15.8333V15.8332Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </span>
+                Add New Account
+            </h5>
+            <%= render 'form_account' %>
+        </div>
     </div>
-
-  </div>
 </div>

data/app/views/kaui/accounts/show.html.erb

@@ -1,16 +1,22 @@
-<div class="row">
-  <%= render :partial => 'account_info' %>
-
-  <%= render :partial => 'billing_info' %>
-</div>
-<div class="row">
-  <%= render :partial => 'personal_info' %>
-
-  <%= render :partial => 'payment_methods' %>
+<div class="kaui-container">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex" style="gap: 4rem;">
+    <% if params[:account_id].present? %>
+      <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <% end %>
+    <div class="d-flex flex-column w-100">
+      <%= render :partial => 'account_details' %>
+
+      <%= render :partial => 'billing_details' %>
+
+      <%= render :partial => 'personal_details' %>
+
+      <%= render :partial => 'payment_gateways' %>
+    </div>
+  </div>
 </div>
 
-
-<%= render :partial => 'link_parent_modal' %>
+<%= render :partial => 'link_parent_to_modal' %>
 
 <% if email_notifications_plugin_available? %>
   <%= render :partial => 'kenui/email_notifications/configure_events_modal' %>

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

@@ -1,26 +1,48 @@
-<div class="column-block">
+<div class="kaui-container ">
+  <div class="clock-container">
+    <div class="d-flex flex-column">
+      <div class="clock-header mb-3">
+        <div class="d-flex align-items-start flex-column">
+          <h2>Clock</h2>
+          <p>Current date/time: <span id="kb_clock"><%= @clock['currentUtcTime'] %></span></p>
+        </div>
+        <span>
+        </span>
+      </div>
+      <div>
+        <%= form_tag kaui_engine.admin_set_clock_path(params.to_h), :method => :put, :class => 'form-horizontal' do %>
 
-  <h1>Clock</h1>
+          <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>
 
-  <ul>
-    <li>Current date/time: <span id="kb_clock"><%= @clock['currentUtcTime'] %></span></li>
-  </ul>
+              <%= 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>
-    <%= form_tag kaui_engine.admin_set_clock_path(params.to_h), :method => :put, :class => 'form-horizontal' do %>
-        <div class="form-group">
-          <%= label_tag :new_date, 'Set new date', :class => 'col-sm-2 control-label' %>
-          <div class="col-sm-2">
-            <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>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <%= submit_tag 'Submit', :class => 'btn btn-default' %>
-            <%= button_tag 'Reset', :class => 'btn btn-danger' %>
           </div>
-        </div>
-    <% end %>
+        <% end %>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -37,3 +59,6 @@
     $.ajax({url: "<%= admin_path(:format => :js) %>"});
   }
 <% end %>
+
+
+