kaui 3.0.9 → 4.0.0

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

@@ -2,37 +2,54 @@
     <%= f.hidden_field :payment_id %>
     <%= f.hidden_field :currency %>
 
-    <div class="form-group">
-      <%= f.label :amount, 'Amount', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= f.label :amount, 'Amount', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9  d-flex currency-group">
         <%= f.number_field :amount, :step => :any, :id => 'chargeback_amount', :class => 'form-control' %>
-        <p class="help-block">Currency: <%= @chargeback.currency %></p>
+        <div class="currency"><%= @chargeback.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">
         <%= select_tag :reason, options_for_select(Kaui.chargeback_reason_codes), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="form-group d-flex pb-3">
+      <%= label_tag :cancel_all_subs, '', :class => 'col-sm-3 control-label' %>
+      <div class="col-sm-9">
         <div class="checkbox">
           <%= label_tag :cancel_all_subs do %>
-              <%= check_box_tag :cancel_all_subs %>Cancel account subscriptions?
+              <%= check_box_tag :cancel_all_subs %>Cancel Account Subscriptions
           <% end %>
         </div>
       </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">
         <%= 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 Payment',
+        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 %>
+<% end %>

data/app/views/kaui/chargebacks/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 chargeback</h1>
-      <%= render 'form' %>
+<div class="register process-chargeback-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 chargeback
+        </h5>
+        <%= render 'form' %>
+      </div>
     </div>
-
-  </div>
-</div>
+</div>

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

@@ -1,52 +1,64 @@
 <%= form_for @charge, :url => {:action => :create}, :html => {:class => 'form-horizontal'} do |f| %>
-    <%= f.hidden_field :invoice_id %>
+  <%= f.hidden_field :invoice_id %>
 
-    <% if @invoice.nil? %>
-        <div class='form-group'>
-          <div class="col-sm-offset-2 col-sm-10">
-            <div class="checkbox">
-              <%= label_tag :auto_commit do %>
-                  <%= check_box_tag :auto_commit, '1', true %>Auto-commit?
-              <% end %>
-            </div>
+  <% if @invoice.nil? %>
+      <div class="form-group d-flex pb-3">
+        <div class="col-sm-3"></div>
+        <div class="col-sm-offset-2 ">
+          <div class="checkbox">
+            <%= label_tag :auto_commit do %>
+                <%= check_box_tag :auto_commit, '1', true %>Auto-commit?
+            <% end %>
           </div>
         </div>
-    <% end %>
-    <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 => 'charge_amount', :class => 'form-control' %>
+      </div>
+  <% 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 amount-input', placeholder: '$ 0.00' %>
+      <div class="input-group-append">
         <% if @invoice.present? %>
-            <p class="help-block">Currency: <%= @invoice.currency %></p>
+          <span class="input-group-text"><%= @invoice.currency %></span>
+          <%= f.hidden_field :currency %>
+        <% else %>
+          <%= f.select :currency, currencies, {}, class: 'form-control' %>
         <% end %>
       </div>
     </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>
-    <% else %>
-        <!--https://github.com/killbill/killbill/issues/388-->
-        <%= f.hidden_field :currency %>
-    <% end %>
-    <div class="form-group">
-      <%= f.label :description, 'Description', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= f.text_area :description, :rows => 3, :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
-      <div class="col-sm-10">
-        <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
-      </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= f.label :description, 'Description', :class => 'col-sm-3 control-label' %>
+    <div class="input-group">
+      <%= f.text_area :description, :rows => 3, :class => 'form-control' %>
     </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 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>
-<% end %>
+  </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 Charge',
+      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/charges/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 charge</h1>
-      <%= render 'form' %>
+<div class="register add-new-charge-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 charge
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

data/app/views/kaui/components/breadcrumb/_breadcrumb.html.erb

@@ -0,0 +1,146 @@
+<%# Accept optional breadcrumbs array (e.g., passed via locals) %>
+<% custom_breadcrumbs = local_assigns[:breadcrumbs] %>
+
+<%# Improved dynamic root detection %>
+<% 
+  # Try to determine root path dynamically
+  if request.path.start_with?('/kaui')
+    dynamic_root = '/kaui'
+  else
+    dynamic_root = '/'
+  end
+%>
+
+<% if custom_breadcrumbs.present? %>
+<nav class="breadcrumb-nav" aria-label="Breadcrumb">
+  <span class="breadcrumb-home">
+      <%= link_to '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.33331 6.99994L7.16705 2.33295C7.65398 1.94338 8.34598 1.94338 8.83291 2.33295L14.6666 6.99994" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.66669 6V13C2.66669 13.7364 3.26364 14.3333 4.00002 14.3333H12C12.7364 14.3333 13.3334 13.7364 13.3334 13V6" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 11.6667V12.3334" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>'.html_safe,
+  dynamic_root, class: "breadcrumb-home" %>
+  </span>
+  <span class="breadcrumb-separator">/</span>
+  <% custom_breadcrumbs.each_with_index do |item, index| %>
+    <% is_last = index == custom_breadcrumbs.size - 1 %>
+
+    <% if index > 0 %>
+      <span class="breadcrumb-separator">/</span>
+    <% end %>
+
+    <% if is_last %>
+      <span class="breadcrumb-current"><%= item[:label] %></span>
+    <% else %>
+      <% href = item[:href] == "/" ? dynamic_root : item[:href] %>
+      <%= link_to item[:label], href, class: "breadcrumb-link" %>
+    <% end %>
+  <% end %>
+</nav>
+<% else %>
+  <% full_path = request.fullpath.gsub(/\?.*/, '') %>
+  <% segments = full_path.split("/").reject(&:blank?) %>
+
+  <% if params[:account_id].present? && full_path.starts_with?("/kaui/queues") %>
+    <% segments = ["kaui", "accounts", params[:account_id], "queues"] %>
+  <% end %>
+
+  <% segment_label_map = {
+    'accounts' => 'Account',
+    'bundles' => 'Subscriptions',
+    'invoices' => 'Invoices',
+    'payments' => 'Payments',
+    'timelines' => 'Timeline',
+    'account_tags' => 'Tags',
+    'custom_fields' => 'Custom Fields',
+    'queues' => 'Queues',
+    'logs' => 'Audit',
+    'payment_methods' => 'Payment Methods',
+    'subscriptions' => 'Subscriptions',
+    'credits' => 'Credits',
+    'refunds' => 'Refunds',
+    'chargebacks' => 'Chargebacks',
+    'transactions' => 'Transactions',
+    'admin' => 'Admin',
+    'tenants' => 'Tenants',
+    'home' => 'Dashboard'
+  } %>
+
+  <nav class="breadcrumb-nav" aria-label="Breadcrumb">
+    <%# Always show home icon first %>
+    <% if segments.empty? || (segments.size == 1 && segments.first == "kaui") %>
+      <%# Home is the current/last page %>
+      <span class="breadcrumb-home">
+        <%= raw <<~SVG
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.33331 6.99994L7.16705 2.33295C7.65398 1.94338 8.34598 1.94338 8.83291 2.33295L14.6666 6.99994" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M2.66669 6V13C2.66669 13.7364 3.26364 14.3333 4.00002 14.3333H12C12.7364 14.3333 13.3334 13.7364 13.3334 13V6" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M8 11.6667V12.3334" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        SVG
+        %>
+      </span>
+    <% else %>
+      <%# Home is a link %>
+      <%= link_to dynamic_root, class: "breadcrumb-home-link" do %>
+        <%= raw <<~SVG
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.33331 6.99994L7.16705 2.33295C7.65398 1.94338 8.34598 1.94338 8.83291 2.33295L14.6666 6.99994" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M2.66669 6V13C2.66669 13.7364 3.26364 14.3333 4.00002 14.3333H12C12.7364 14.3333 13.3334 13.7364 13.3334 13V6" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M8 11.6667V12.3334" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        SVG
+        %>
+      <% end %>
+    <% end %>
+
+    <%# Process remaining segments (excluding root "kaui" segment) %>
+    <% sanitized_segments = segments.map { |segment| CGI.escapeHTML(segment) } %>
+    <% 
+      # Skip the first segment if it's "kaui" since we already handled home
+      display_segments = sanitized_segments.first == "kaui" ? sanitized_segments[1..-1] : sanitized_segments
+    %>
+    
+    <% display_segments.each_with_index do |segment, index| %>
+      <% is_last = index == display_segments.size - 1 %>
+      <% 
+        # Reconstruct path for this segment
+        if sanitized_segments.first == "kaui"
+          segment_path = "/" + (["kaui"] + display_segments[0..index]).join("/")
+        else
+          segment_path = "/" + display_segments[0..index].join("/")
+        end
+      %>
+
+      <span class="breadcrumb-separator">/</span>
+
+      <% if segment.match?(/\A[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\z/i)
+          if defined?(@account) && @account&.account_id == segment
+            label = @account.name.present? ? @account.name : "Account #{@account.account_id[0..7]}..."  
+          elsif defined?(@payment) && @payment&.payment_id == segment
+            label = @payment.payment_number.present? ? "Payment #{@payment.payment_number}" : "Payment #{@payment.payment_id[0..7]}..."
+          elsif defined?(@invoice) && @invoice&.invoice_id == segment
+            label = @invoice.invoice_number.present? ? "Invoice #{@invoice.invoice_number}" : "Invoice #{@invoice.invoice_id[0..7]}..."
+          elsif defined?(@bundle) && @bundle&.bundle_id == segment
+            label = @bundle.external_key.present? ? "Bundle #{@bundle.external_key}" : "Bundle #{@bundle.bundle_id[0..7]}..."
+          elsif defined?(@subscription) && @subscription&.subscription_id == segment
+            label = @subscription.external_key.present? ? "Subscription #{@subscription.external_key}" : "Subscription #{@subscription.subscription_id[0..7]}..."
+          # Additional checks for common patterns using params
+          elsif segment == params[:account_id] && defined?(@account)
+            label = @account.name.present? ? @account.name : "Account #{@account.account_id[0..7]}..."
+          elsif segment == params[:payment_id] && defined?(@payment)
+            label = @payment.payment_number.present? ? "Payment #{@payment.payment_number}" : "Payment #{@payment.payment_id[0..7]}..."
+          elsif segment == params[:invoice_id] && defined?(@invoice)
+            label = @invoice.invoice_number.present? ? "Invoice #{@invoice.invoice_number}" : "Invoice #{@invoice.invoice_id[0..7]}..."
+          else
+            label = segment[0..7] + "..."
+          end
+        elsif segment_label_map[segment] %>
+          <% label = segment_label_map[segment] %>
+        <% else %>
+          <% label = segment.titleize %>
+        <% end %>
+      <% if is_last %>
+        <span class="breadcrumb-current"><%= label %></span>
+      <% else %>
+        <%= link_to label, CGI.escapeHTML(segment_path), class: "breadcrumb-link" %>
+      <% end %>
+    <% end %>
+  </nav>
+<% end %>

data/app/views/kaui/components/button/_button.html.erb

@@ -0,0 +1,16 @@
+<% variant ||= "btn-primary" %>
+<% type ||= "button" %>
+<% label ||= "Submit" %>
+<% icon ||= nil %>
+<% trailing_icon ||= nil %>
+<% html_class ||= "" %>
+<% html_options ||= {} %>
+
+<% icon_html = icon.present? ? image_tag(icon, class: "me-1", size: "16x16") : "" %>
+<% trailing_icon_html = trailing_icon.present? ? image_tag(trailing_icon, class: "ms-1", size: "16x16") : "" %>
+
+<%= tag.button raw("#{icon_html}#{label}#{trailing_icon_html}"),
+  type: type,
+  class: "btn #{variant} #{html_class}",
+  **html_options
+%>

data/app/views/kaui/components/dashboard/_card.html.erb

@@ -0,0 +1,15 @@
+<div class="col-md-4">
+    <div class="dashboard-card border rounded-4 d-flex flex-column justify-content-between h-100">
+        <div class="d-flex px-4 py-3 align-items-center gap-3">
+            <div class="flex items-center justify-content-center dashboard-card-icon border rounded-3">
+                <%= image_tag "#{icon}", height: 24 %>
+            </div>
+            <div>
+                <h6 class="mb-0 fw-600 text-black-900"><%= title %></h6>
+                <p class="text-muted fw-normal text-tertiary small mb-0"><%= count %></p>
+            </div>
+        </div>
+        <div class="w-full dashboard-card-divider"></div>
+        <%= link_to "View All", path, class: "text-primary fw-medium small px-4 py-3 text-decoration-none text-end" %>
+    </div>
+</div>

data/app/views/kaui/components/dashboard/_setting.html.erb

@@ -0,0 +1,15 @@
+<div class="col mb-3">
+    <%= link_to path, class: "text-decoration-none text-reset custom-hover" do %>
+        <div class="d-flex gap-3">
+            <div class="flex-shrink-0">
+                <div class="flex items-center justify-content-center setting-card-icon border rounded-3">
+                    <%= image_tag "#{icon}", height: 20 %>
+                </div>
+            </div>
+            <div>
+                <h6 class="mb-0 fw-600 text-black-900"><%= title %></h6>
+                <p class="text-muted fw-normal text-tertiary small mb-0 mt-1"><%= desc %></p>
+            </div>
+        </div>
+    <% end %>
+</div>

data/app/views/kaui/components/form_input/_form_input.html.erb

@@ -0,0 +1,4 @@
+<div class="mb-3">
+    <%= f.label field, label, class: "form-label text-gray-700 fs-7" %>
+    <%= f.text_field field, class: "form-control text-gray-700 fs-7", placeholder: placeholder %>
+</div>

data/app/views/kaui/components/form_password/_form_password.html.erb

@@ -0,0 +1,6 @@
+<div class="mb-3">
+    <div class="d-flex justify-content-between align-items-center">
+        <%= f.label field, label, class: "form-label text-gray-700 fs-7" %>
+    </div>
+    <%= f.password_field field, class: "form-control text-gray-700 fs-7", placeholder: placeholder %>
+</div>

data/app/views/kaui/components/logo/_logo.html.erb

@@ -0,0 +1 @@
+<%= link_to image_tag('kaui/logo.svg', :alt => 'Kill Bill Logo'), kaui_engine.home_path %>

data/app/views/kaui/components/menu_dropdown/_menu_dropdown.html.erb

@@ -0,0 +1,59 @@
+<% variant ||= "btn-primary" %>
+<% type ||= "button" %>
+<% label ||= "Submit" %>
+<% icon ||= nil %>
+<% html_class ||= "" %>
+<% html_options ||= {} %>
+<% dropdown_id ||= "menuDropdown" %>
+
+<% icon_html = icon.present? ? image_tag(icon, class: "me-1", size: "16x16") : "" %>
+
+<div class="dropdown dropdown-menu-end position-relative" id="<%= dropdown_id %>_wrapper">
+  <%= tag.button raw("#{icon_html}#{label}"),
+      type: type,
+      class: "btn kaui-dropdown custom-hover #{variant} #{html_class}",
+      id: "#{dropdown_id}_button",
+      aria: { expanded: "false" } %>
+
+  <ul class="dropdown-menu header-menu shadow border-0 rounded-3"
+      id="<%= dropdown_id %>_menu"
+      style="min-width: 6.25rem; display: none;">
+    <% menu_items&.each do |item| %>
+      <li>
+        <%= link_to item[:path], class: "dropdown-item d-flex align-items-center gap-2" do %>
+          <%= image_tag(item[:icon], alt: "#{item[:label]} Icon", size: "16x16") if item[:icon].present? %>
+          <span class="text-black-700 fs-6 text-normal" style="font-weight: 500; font-size: 0.875rem !important; line-height: 1.25rem;"><%= item[:label] %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>
+
+<%= javascript_tag do %>
+  document.addEventListener('DOMContentLoaded', function () {
+    const button = document.getElementById('<%= dropdown_id %>_button');
+    const menu = document.getElementById('<%= dropdown_id %>_menu');
+    const wrapper = document.getElementById('<%= dropdown_id %>_wrapper');
+
+    button.addEventListener('click', function (e) {
+      e.stopPropagation();
+      const isShown = menu.style.display === 'block';
+
+      // Close all other open dropdowns first (including other dots menus)
+      document.querySelectorAll('.dropdown-menu').forEach(function (m) {
+        if (m !== menu) {
+          m.style.display = 'none';
+        }
+      });
+
+      // Toggle this one
+      menu.style.display = isShown ? 'none' : 'block';
+    });
+
+    document.addEventListener('click', function (e) {
+      if (!wrapper.contains(e.target)) {
+        menu.style.display = 'none';
+      }
+    });
+  });
+<% end %>

data/app/views/kaui/components/search_input/_search_input.html.erb

@@ -0,0 +1,81 @@
+<div class="position-relative mx-auto search-container">
+    <%= form_tag kaui_engine.search_path, method: :get, id: "searchform", role: "search", class: "d-flex align-items-center m-0" do %>
+    <div class="input-group border overflow-hidden search-box">
+        <span class="input-group-text bg-white border-0 ps-3">
+            <%= link_to image_tag('kaui/header/search_icon.svg', :alt => 'Search Icon'), kaui_engine.home_path %>
+        </span>
+
+        <%= text_field_tag :q, params[:q], class: "form-control border-0", placeholder: "What are you looking for?", autocomplete: "off", id: "search-box" %>
+
+        <span class="input-group-text bg-white border-0 pe-3 text-muted">⌘K</span>
+    </div>
+    <% end %>
+
+    <!-- Autocomplete dropdown -->
+    <div id="search-suggestions" class="autocomplete-box position-absolute bg-white rounded-4 shadow mt-1 p-3 w-100 d-none border">
+        <div class="mb-2 fw-semibold text-muted">Jump to…</div>
+        <div class="d-flex flex-wrap gap-2 mb-3">
+
+            <div class="d-flex header-tag custom-hover align-items-center gap-2 border-secondary px-2 border-2 rounded-4 ">
+                <%= link_to image_tag('kaui/header/account.svg', :alt => 'Account Icon'), kaui_engine.home_path %>
+                <%= link_to "All Accounts", kaui_engine.accounts_path, class: "text-decoration-none text-black-700" %>
+            </div>
+            <div class="d-flex header-tag custom-hover align-items-center gap-2 border-secondary px-2 border-2 rounded-4 ">
+                <%= link_to image_tag('kaui/header/invoice.svg', :alt => 'Account Icon'), kaui_engine.home_path %>
+                <%= link_to "All Invoices", kaui_engine.invoices_path, class: "text-decoration-none text-black-700" %>
+            </div>
+            <div class="d-flex header-tag custom-hover align-items-center gap-2 border-secondary px-2 border-2 rounded-4 ">
+                <%= link_to image_tag('kaui/header/payment.svg', :alt => 'Account Icon'), kaui_engine.home_path %>
+                <%= link_to "All Payments", kaui_engine.payments_path, class: "text-decoration-none text-black-700" %>
+            </div>
+        </div>
+
+        <div class="mb-1 fw-semibold text-muted mb-2">Suggested search queries</div>
+        <div class="mb-3">
+            <div class="inline-block me-2 my-4">
+                <span class="me-2 header-tag custom-hover text-black-900 fw-500 align-items-center gap-2 border-secondary px-2 py-2 border-2 rounded-4 ">account:</span>
+                <span>account: Flavio Ruggiero</span>
+            </div>
+            <div class="inline-block me-2 my-4">
+                <span class="me-2 header-tag custom-hover text-black-900 fw-500 align-items-center gap-2 border-secondary px-2 py-2 border-2 rounded-4 ">invoice:</span>
+                <span>invoice: af58a92c-bdc4-...</span>
+            </div>
+            <div class="inline-block me-2 my-4">
+                <span class="me-2 header-tag custom-hover text-black-900 fw-500 align-items-center gap-2 border-secondary px-2 py-2 border-2 rounded-4 ">payment:</span>
+                <span>payment: 3c4c0263-b06f-...</span>
+            </div>
+        </div>
+
+        <div class="fw-semibold text-muted mb-2">Other search queries</div>
+        <div class="d-flex flex-wrap gap-2">
+            <% %w[custom\ field: subscription: tag:].each do |term| %>
+            <span class="badge text-dark border border-secondary rounded-3 px-3 py-2 custom-hover"><%= term %></span>
+            <% end %>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const input = document.getElementById("search-box");
+        const dropdown = document.getElementById("search-suggestions");
+
+        input.addEventListener("input", () => {
+            dropdown.classList.remove("d-none");
+        });
+
+        document.addEventListener("click", (e) => {
+            if (!dropdown.contains(e.target) && e.target !== input) {
+                dropdown.classList.add("d-none");
+            }
+        });
+
+        // Optional: shortcut CMD+K
+        document.addEventListener("keydown", (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+                e.preventDefault();
+                input.focus();
+            }
+        });
+    });
+</script>