kaui 3.0.9 → 4.0.0

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

@@ -0,0 +1,606 @@
+<%# Required variables: title (string), actions (array of hashes) %>
+<div class="d-flex justify-content-between align-items-center custom-border-bottom mb-4">
+  <h4 class="fw-semibold mb-4 title"><%= title %></h4>
+
+  <div class="d-flex gap-2 mb-auto">
+    <% actions.each_with_index do |action, index| %>
+      <% if action[:type] == "dropdown" %>
+        <%= render "kaui/components/menu_dropdown/menu_dropdown", {
+          label: action[:label],
+          icon: action[:icon],
+          dropdown_id: "menuDropdown#{index}",
+          menu_items: action[:items]
+        } %>
+      <% else %>
+        <%= render "kaui/components/button/button", {
+          label: action[:label],
+          icon: action[:icon],
+          variant: "btn-#{action[:variant] || 'outline-secondary'} d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: action[:html_class],
+          html_options: {
+            id: action[:id],
+            onclick: "window.location='#{action[:path]}'",
+            data: action[:data]
+          }
+        } %>
+      <% end %>
+    <% end %>
+
+    <div class="dropdown position-relative">
+      <ul class="dropdown-menu" id="column-visibility" style="display: none;">
+        <% Kaui.account_search_columns.call[0].each_with_index do |title, index| %>
+          <li class="list-group-item-manual" data-id="<%= index %>">
+           <label class="label-group-item-manual">
+              <input type="checkbox" class="column-toggle" draggable="true" data-column="<%= index %>" <%= 'checked' if @dropdown_default[index][:visible] %> >
+              <%= title %>
+              <span class="icon-drag" aria-hidden="true">
+              </span>
+            </label>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title d-flex align-items-center gap-3" id="downloadCsvModalLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/download-csv.svg") %>
+          </span>
+          Download
+        </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="downloadCsvForm">
+          <div class="row">
+            <div class="d-flex align-items-center">
+              <label for="searchFieldSelect" class="field-label col-sm-3">Account Creation Date</label>
+                <div class="fake-select-wrapper col-sm-9">
+                  <input type="checkbox" id="single-toggle" hidden />
+                  <div class="d-flex align-items-center position-relative">
+                    <label for="single-toggle" class="fake-select-display">
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14.5833 12.5V18.3333M17.5 15.4167H11.6666" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M17.5 10.8335V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H10" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M2.5 8.3335H17.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </label>
+                    <input type="text" class="form-control center-input" id="startDate" placeholder="All Accounts" name="startDate">
+                    <div id="dash" class="dash">–</div>
+                    <input type="text" class="form-control right-input" id="endDate" placeholder="" name="endDate">
+                    <div id="toggle-wrapper" class="position-absolute" style="width: 100%; height: 100%;" onclick="document.getElementById('single-toggle').click()"></div>
+                  </div>
+
+                  <% today = Date.today %>
+
+                  <% start_of_year = Date.new(today.year, 1, 1) %>
+                  <% end_of_year = Date.new(today.year, 12, 31) %>
+                  <% this_year_range = "#{start_of_year.strftime('%b %-d, %Y')} – #{end_of_year.strftime('%b %-d, %Y')}" %>
+
+                  <% start_of_month = Date.new(today.year, today.month, 1) %>
+                  <% end_of_month = Date.new(today.year, today.month, -1) %>
+                  <% this_month_range = "#{start_of_month.strftime('%b %-d, %Y')} – #{end_of_month.strftime('%b %-d, %Y')}" %>
+
+                  <% start_of_week = today - ((today.wday - 1) % 7) %>
+                  <% end_of_week = start_of_week + 6 %>
+                  <% this_week_range = "#{start_of_week.strftime('%b %-d, %Y')} – #{end_of_week.strftime('%b %-d, %Y')}" %>
+
+
+                  <div class="fake-select-dropdown">
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="allData" />
+                      <span>All accounts</span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisWeek" />
+                      <span>This week <small>(<%= this_week_range %>)</small></span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisMonth" />
+                      <span>This month <small>(<%= this_month_range %>)</small></span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisYear" />
+                      <span>This year <small>(<%= this_year_range %>)</small></span>
+                    </label>
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="customDate" />
+                      <span>Custom date</span>
+                    </label>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="row">
+            <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="allFields" hidden />
+                  <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="allFieldsDropdown" />
+                      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>
+        </form>
+      </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: 'Download CSV',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-dropdown custom-hover m-0",
+          html_options: {
+            id: "downloadButton"
+          }
+        } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<%= javascript_tag do %>
+$(document).ready(function() {
+  $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
+    event.stopPropagation();
+  });
+
+  $('#modalDownloadButton').click(function() {
+    $('#downloadCsvModal').modal('show');
+  });
+
+  // Native date inputs are used; no jQuery UI datepicker initialization needed
+
+  // Open native date picker on input click/focus
+  $('#startDate, #endDate').on('click focus', function() {
+    if (!this.disabled && typeof this.showPicker === 'function') {
+      this.showPicker();
+    }
+  });
+
+  $('#downloadCsvModal').on('show.bs.modal', function (e) {
+    $('#allData').prop('checked', true);
+    $('#startDate, #endDate').prop('disabled', true);
+    $('#toggle-wrapper').show();
+    $('#dash').hide();
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+  });
+
+  $('#allData').change(function() {
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+    $('#toggle-wrapper').show();
+    $('#dash').hide();
+    $('#startDate, #endDate').prop('disabled', true);
+    // Change to text inputs to show placeholder
+    $('#startDate, #endDate').attr('type', 'text');
+  });
+
+  $('#thisWeek').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("week");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
+    }
+  });
+
+  $('#thisMonth').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("month");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
+    }
+  });
+
+  $('#thisYear').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("year");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
+    }
+  });
+
+  $('#customDate').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("day");
+      $('#startDate, #endDate').prop('disabled', false);
+      $('#toggle-wrapper').hide();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
+    }
+  });
+
+  $('#dropdownMenu1').click(function(event) {
+    event.stopPropagation();
+    $('#column-visibility').toggle();
+  });
+
+  // Clicking outside closes the dropdown
+  $(document).click(function() {
+    $('#column-visibility').hide();
+  });
+
+  // Clicking inside the dropdown should not close it
+  $('#column-visibility').click(function(event) {
+    event.stopPropagation();
+  });
+
+  // Example: Checkbox column visibility toggle (DataTable logic if needed)
+  $('.column-toggle').on('change', function() {
+    var columnIdx = $(this).attr('data-column');
+    var table = $('#accounts-table').DataTable();
+    var column = table.column(columnIdx);
+    column.visible(!column.visible());
+    table.state.save();
+  });
+
+  // Make columns sortable (optional, requires jQuery UI Sortable)
+  $('#column-visibility').sortable({
+    axis: "y",
+    containment: "parent",
+    stop: function(event, ui) {
+      var order = $("#column-visibility").sortable('toArray', {attribute: 'data-id'});
+      reorderTableColumns(order);
+    }
+  }).disableSelection();
+
+  function reorderTableColumns(order) {
+    var table = $('#accounts-table').DataTable();
+    var newOrder = order.map(Number);
+    table.colReorder.order(newOrder);
+    table.state.save();
+  }
+
+  var downloadButton = document.getElementById('downloadButton');
+  if (downloadButton) {
+    downloadButton.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      var allFieldsChecked = document.getElementById('allFields').checked;
+      var startDate = $('#startDate').val();
+      var endDate = $('#endDate').val();
+      var downloadAll = $('#allData').is(':checked');
+      var url = new URL("<%= download_accounts_path %>", window.location.origin);
+      var params = new URLSearchParams();
+      
+      if (allFieldsChecked) {
+        // Include all table columns when "All fields" is checked
+        var thElements = document.querySelectorAll('#accounts-table th');
+        var columnTitles = Array.from(thElements).map(function(th) {
+          return th.textContent.trim();
+        });
+        params.append('columnsString', columnTitles.join(','));
+      } else {
+        // Only include selected fields when "All fields" is unchecked
+        var selectedFields = [];
+        $('#field-selection input.field-toggle:checked').each(function() {
+          var labelText = $(this).closest('label').find('span').text().trim();
+          selectedFields.push(labelText);
+        });
+        params.append('columnsString', selectedFields.join(','));
+      }
+      
+      if (!downloadAll) {
+        params.append('startDate', startDate);
+        params.append('endDate', endDate);
+      }
+      params.append('allFieldsChecked', allFieldsChecked);
+      params.append('search', searchQuery());
+      url.search = params.toString();
+      window.open(url.toString(), '_blank');
+    });
+  }
+
+  function searchQuery(){
+    var searchFields = $('.search-field');
+    var searchLabelsContainer = $('#search-labels-container');
+    searchLabelsContainer.empty();
+
+    var searchLabels = searchFields.map(function() {
+      var filter = $(this).find('.search-field-filter').val();
+      var value = $(this).find('.search-field-value').val();
+      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '').toLowerCase().replace(/\s+/g, '_');
+
+      if (value !== '') {
+        if (filter === 'like') {
+          return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent('%' + value + '%');
+        } else {
+          return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent(value);
+        }
+      }
+    }).get().join('&');
+
+    var searchLabelString = searchLabels.length > 0 ? ('_q=1&' + searchLabels) : '';
+    return searchLabelString;
+  };
+
+  updateDropdownOrder();
+
+  function updateDropdownOrder() {
+    var state = JSON.parse(localStorage.getItem('DataTables_accounts-table_' + window.location.pathname));
+    if (state === null) {
+      // On initial load, ensure the existing checkboxes work
+      setupColumnToggleEvents();
+      return;
+    }
+    var columnOrder = state.ColReorder;
+    var $list = $('#column-visibility');
+    var thElements = document.querySelectorAll('#accounts-table th');
+    var $columnTitles = Array.from(thElements).map(function(th) {
+      return th.textContent.trim();
+    });
+
+    if (columnOrder !== undefined) {
+      $list.empty();
+      var state = JSON.parse(localStorage.getItem('DataTables_accounts-table_' + window.location.pathname));
+      if (state !== null) {
+        var colsOrder = state.ColReorder;
+      }
+
+      columnOrder.forEach(function(colIdx, index) {
+        if (colsOrder) {
+          var data_id = colsOrder[index];
+        } else {
+          var data_id = index;
+        }
+
+        var $item = $('<li>', { class: "list-group-item-manual", "data-id": data_id });
+        var column = state.columns[colIdx];
+        var col_name = $columnTitles[colIdx];
+
+        var $label = $('<label>', {
+          class: "label-group-item-manual",
+        });
+
+        var $checkbox = $("<input>", {
+          type: "checkbox",
+          value: colIdx,
+          checked: column.visible,
+          "data-column": colIdx,
+          class: "column-toggle"
+        });
+
+        $label.append($checkbox).append(" " + col_name);
+
+        var $icon = $(`
+          <span class="icon-drag" aria-hidden="true">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.66669 5H6.67198M6.66669 10H6.67198M6.66669 15H6.67198M13.3281 5H13.3334M13.3281 10H13.3334M13.3281 15H13.3334" stroke="#A4A7AE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        `);
+
+        $label.append($icon);
+        $item.append($label);
+        $list.append($item);
+      });
+    }
+
+    resetDataColumn();
+    resetDataId();
+    setupColumnToggleEvents();
+  }
+
+
+  $("#column-visibility").sortable({
+    axis: "y",
+    containment: "parent",
+    stop: function(event, ui) {
+      var order = $("#column-visibility").sortable('toArray', {attribute: 'data-id'});
+      reorderTableColumns(order);
+    }
+  });
+  $("#column-visibility").disableSelection();
+
+  function reorderTableColumns(order) {
+    var table = $('#accounts-table').DataTable();
+    var columnIndexes = order.map(Number);
+    table.colReorder.order(columnIndexes);
+    table.state.save();
+    resetDataColumn();
+    resetDataId();
+  }
+
+  function resetDataId() {
+    var elements = document.querySelectorAll('.list-group-item-manual');
+    elements.forEach(function(element, index) {
+      element.setAttribute('data-id', index);
+    });
+  }
+
+  function resetDataColumn() {
+    var elements = document.querySelectorAll('.column-toggle');
+    elements.forEach(function(element, index) {
+      element.setAttribute('data-column', index);
+    });
+  }
+
+  function setupColumnToggleEvents() {
+    $('.column-toggle').off('change').on('change', function() {
+      var table = $('#accounts-table').DataTable();
+      var column = table.column($(this).attr('data-column'));
+      column.visible(!column.visible());
+      table.state.save();
+    });
+  }
+
+  document.addEventListener('click', function (e) {
+    const wrapper = document.querySelector('.chip-select');
+    const toggle = document.getElementById('dropdown-toggle');
+
+    if (wrapper && !wrapper.contains(e.target)) {
+      toggle.checked = false; // close dropdown
+    }
+  });
+
+  document.addEventListener('click', function (e) {
+    const wrapper = document.querySelector('.fake-select-wrapper');
+    const toggle = document.getElementById('single-toggle');
+    if (!wrapper.contains(e.target)) toggle.checked = false;
+  });
+
+  // No longer disabling fields - users can freely select/deselect
+  function setFieldsDisabled(disabled) {
+    // Function kept for compatibility but no longer disables fields
+  }
+
+  // Initialize on modal open
+  $('#downloadCsvModal').on('show.bs.modal', function () {
+    $('#allFields').prop('checked', true);
+    updateChipLabel();
+  });
+
+  // Initial binding
+  bindAllFieldsToggle();
+  bindDropdownAllFieldsToggle();
+
+  // Toggle behavior - this will be re-bound in updateChipLabel
+  function bindAllFieldsToggle() {
+    $('#allFields').off('change').on('change', function() {
+      var checked = $(this).is(':checked');
+      
+      // When "All fields" is checked, select all individual fields
+      // When unchecked, deselect all individual fields
+      $('#field-selection input.field-toggle').prop('checked', checked);
+      $('#allFieldsDropdown').prop('checked', checked);
+      
+      updateChipLabel();
+    });
+  }
+
+  // Also bind to the dropdown "All fields" checkbox
+  function bindDropdownAllFieldsToggle() {
+    $('#allFieldsDropdown').off('change').on('change', function() {
+      var checked = $(this).is(':checked');
+      
+      // Sync with the main checkbox
+      $('#allFields').prop('checked', checked);
+      
+      // When "All fields" is checked, select all individual fields
+      // When unchecked, deselect all individual fields
+      $('#field-selection input.field-toggle').prop('checked', checked);
+      
+      updateChipLabel();
+    });
+  }
+
+  // Update chip display based on selected fields
+  function updateChipLabel() {
+    var allFieldsChecked = $('#allFields').is(':checked');
+    var $chipList = $('#selected-fields-chips');
+    
+    if (allFieldsChecked) {
+      // Show "All fields" chip
+      $chipList.html(`
+        <span class="chip">All fields</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>
+      `);
+    } else {
+      // Show individual field chips
+      var selectedFields = [];
+      $('#field-selection input.field-toggle:checked').each(function() {
+        var labelText = $(this).closest('label').find('span').text().trim();
+        selectedFields.push(labelText);
+      });
+      
+      if (selectedFields.length === 0) {
+        $chipList.html(`
+          <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>
+        `);
+      } else {
+        var chipsHtml = selectedFields.map(function(field) {
+          return `<span class="chip">${field}</span>`;
+        }).join('');
+        chipsHtml = chipsHtml + `
+          <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>
+        `;
+        $chipList.html(chipsHtml);
+      }
+    }
+  }
+
+  // Update chip label when individual fields change
+  $('#field-selection input.field-toggle').on('change', function() {
+    // Check if all individual fields are selected
+    var totalFields = $('#field-selection input.field-toggle').length;
+    var checkedFields = $('#field-selection input.field-toggle:checked').length;
+    
+    // Update "All fields" checkbox based on individual field selections
+    if (checkedFields === totalFields) {
+      $('#allFields').prop('checked', true);
+      $('#allFieldsDropdown').prop('checked', true);
+    } else {
+      $('#allFields').prop('checked', false);
+      $('#allFieldsDropdown').prop('checked', false);
+    }
+    
+    updateChipLabel();
+  });
+});
+<% end %>

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

@@ -1,4 +1,4 @@
-<div class="modal fade" id="link_account" tabindex="-1" role="dialog">
+<div class="modal fade" id="link_account1" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content column-block">
       <div>

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

@@ -0,0 +1,62 @@
+<div class="link-to-parent-account modal fade" id="link_account" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content column-block">
+      <div class="modal-header">
+        <h5 class="modal-title d-flex align-items-center gap-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="M13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10.0001 9.16667C8.15913 9.16667 6.66675 7.67428 6.66675 5.83333C6.66675 3.99238 8.15913 2.5 10.0001 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M15.8334 15.8332C15.8334 13.532 13.9679 11.6665 11.6667 11.6665H8.33341C6.03223 11.6665 4.16675 13.532 4.16675 15.8332V17.4998H15.8334V15.8332Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+          Link to parent
+        </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>
+        <%= form_for @account, :url =>  link_to_parent_path(@account.account_id), :method => :put, :html => {:class => 'form-horizontal'} do |f| %>
+          <div class="modal-body">
+            <div class='form-group'>
+              <%= f.label :parent_account_id, 'Parent account id', :class => 'col-sm-3 control-label col-form-label' %>
+              <div class="col-sm-9">
+                <%= f.text_field :parent_account_id, :class => 'form-control', :required => true %>
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-3"></div>
+              <div class="col-sm-offset-4 col-sm-8">
+                <div class="checkbox ">
+                  <%= f.label :is_payment_delegated_to_parent, :class => 'label-group-item-manual' do %>
+                      <%= f.check_box :is_payment_delegated_to_parent, {:checked => @account.is_payment_delegated_to_parent} %>Is payment delegated to parent?
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <%= render "kaui/components/button/button", {
+              label: 'Close',
+              variant: "outline-secondary d-inline-flex align-items-center gap-1 m-0 mx-2",
+              type: "button",
+              html_class: "kaui-button custom-hover",
+              html_options: {
+                data: {
+                  bs_dismiss: "modal"
+                }
+              }
+            } %>
+            <%= render "kaui/components/button/button", {
+              label: 'Save',
+              variant: "outline-secondary d-inline-flex align-items-center gap-1 m-0",
+              type: "submit",
+              html_class: "kaui-dropdown custom-hover"
+            } %>
+          
+          </div>
+        <% end %>
+    </div>
+  </div>
+</div>