spree_admin 5.0.0.rc1

data/app/views/spree/admin/roles/_form.html.erb

@@ -0,0 +1,6 @@
+<div class="form-group">
+  <%= f.label :name, raw(Spree.t(:name) + required_span_tag) %>
+  <%= f.text_field :name, class: 'form-control' %>
+  <%= f.error_message_on :name %>
+<% end %>
+

data/app/views/spree/admin/roles/edit.html.erb

@@ -0,0 +1,13 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_roles_url %>
+  <%= @role.name.capitalize %>
+<% end %>
+
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @role } %>
+
+<%= form_for [:admin, @role] do |f| %>
+  <fieldset>
+    <%= render 'form', f: f %>
+    <%= render 'spree/admin/shared/edit_resource_links', f: f %>
+  </fieldset>
+<% end %>

data/app/views/spree/admin/roles/index.html.erb

@@ -0,0 +1,32 @@
+<% content_for :page_title do %>
+  <%= Spree.t(:roles) %>
+<% end %>
+
+<% content_for :page_actions do %>
+  <%= button_link_to Spree.t(:new_role), new_object_url, class: "btn-primary", icon: 'plus', id: 'admin_new_role_link' %>
+<% end if can? :create, Spree::Role %>
+
+<% if @roles.any? %>
+  <div class="table-responsive card-lg p-0">
+    <table class="table">
+      <thead class="text-muted">
+        <tr>
+          <th><%= Spree.t(:role_id) %></th>
+          <th class="actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @roles.each do |role| %>
+          <tr id="<%= spree_dom_id role %>">
+            <td><%= role.name %></td>
+            <td class="actions">
+              <%= link_to_edit(role, no_text: true) if can? :edit, role %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% else %>
+  <%= render 'spree/admin/shared/no_resource_found' %>
+<% end %>

data/app/views/spree/admin/roles/new.html.erb

@@ -0,0 +1,15 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_roles_url %>
+  <%= Spree.t(:new_role) %>
+<% end %>
+
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @role } %>
+
+<%= form_for [:admin, @role] do |f| %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <%= render 'form', f: f %>
+    </div>
+  </div>
+  <%= render 'spree/admin/shared/new_resource_links' %>
+<% end %>

data/app/views/spree/admin/shared/_address.html.erb

@@ -0,0 +1,42 @@
+<% cache spree_base_cache_scope.call(address) do %>
+  <div class="address vcard">
+    <% if address.full_name.present? %>
+      <div class="fn"><%= address.full_name %></div>
+    <% end %>
+    <% unless address.company.blank? %>
+      <div class="org">
+        <%= address.company %>
+      </div>
+    <% end %>
+    <div class="adr">
+      <div class="street-address">
+        <div class="street-address-line">
+          <%= address.address1 %>
+        </div>
+        <% unless address.address2.blank? %>
+          <div class="street-address-line">
+            <%= address.address2 %>
+          </div>
+        <% end %>
+      </div>
+      <div class="local">
+        <span class="locality"><%= address.city %></span>
+        <span class="region"><%= address.state_text %></span>
+        <span class="postal-code"><%= address.zipcode %></span>
+        <div class="country-name"><%= address.country.try(:name) %></div>
+      </div>
+    </div>
+    <% unless address.phone.blank? %>
+      <div class="tel">
+        <span class="type"><%= Spree.t(:phone) %></span>
+        <%= address.phone %>
+      </div>
+    <% end %>
+    <% unless address.alternative_phone.blank? %>
+      <div class="alternative-phone tel">
+        <span class="type"><%= Spree.t(:alternative_phone) %></span>
+        <%= address.alternative_phone %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/shared/_alerts.html.erb

@@ -0,0 +1,22 @@
+<%= turbo_frame_tag :alerts do %>
+  <% flash.to_h.each do |msg_type, text| %>
+    <div class="alerts-container" style="pointer-events: none;">
+      <div class="d-flex justify-content-center px-2">
+        <div
+          data-controller="notification"
+          data-notification-delay-value="5000"
+          class="animate__animated animate__fadeInDown animate__faster hidden alert d-flex align-items-center <%= admin_flash_class_for(msg_type) %> align-items-center" style="min-width: 300px; pointer-events: all;">
+          <div class="d-flex align-items-center justify-content-between w-100">
+            <div class="d-flex align-items-center justify-content-between">
+              <span><%= text %></span>
+            </div>
+            <button type="button" class="btn ml-3 p-1" data-action="notification#hide" aria-label="<%= Spree.t(:close) %>">
+              <%= icon('x', height: 20, class: 'mr-0') %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <% flash.clear if request.xhr? %>
+<% end %>

data/app/views/spree/admin/shared/_analytics_loader_skeleton.html.erb

@@ -0,0 +1,76 @@
+  <div class="card mb-4">
+    <div class="card-header d-block border-0 h-auto p-2">
+      <div class="row">
+        <div class="col-6 col-lg-4 pr-1">
+          <div class="analytics-card-tab active" style="min-height: 82px;">
+            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
+              <span class="font-size-sm text-muted">Total Sales</span>
+              <span class="font-size-lg text-dark font-weight-bold mt-1">
+                <%= @sales_total %>
+              </span>
+              <div>
+                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-6 col-lg-2 pl-0 pr-2">
+          <div class="analytics-card-tab" >
+            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
+              <span class="font-size-sm text-muted">Avg. Order Value</span>
+              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_average %></span>
+              <div>
+                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-6 col-lg-2 pl-0 pr-2">
+          <div class="analytics-card-tab" >
+            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
+              <span class="font-size-sm text-muted">Total Orders</span>
+              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_total  %></span>
+              <div>
+                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
+              </div>
+            </div>
+          </div>
+        </div>
+        <% if defined?(Ahoy) %>
+          <div class="col-6 col-lg-2 pl-0 pr-2">
+            <div class="analytics-card-tab" >
+              <div class="d-flex justify-content-center flex-column">
+                <span class="font-size-sm text-muted">Visits</span>
+                <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @visits_total %></span>
+                <div>
+                  <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="col-6 col-lg-2 pl-0">
+          <div class="analytics-card-tab" >
+            <div class="d-flex justify-content-center flex-column">
+              <span class="font-size-sm text-muted">Sign-ups</span>
+              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @audience_total %></span>
+              <div>
+                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  <div class="card-body p-2">
+    <div class="tab-content d-flex align-items-center justify-content-center" id="pills-tabContent" style="height: 300px">
+      <div class="spinner-border text-muted align-middle opacity-50" role="status">
+        <span class="sr-only"><%= Spree.t(:loading) %>...</span>
+      </div>
+    </div>
+  </div>
+  <!-- End Body -->
+</div>

data/app/views/spree/admin/shared/_audit_nav.html.erb

@@ -0,0 +1,3 @@
+<% content_for :page_title do %>
+  <%= Spree.t('admin.audit_log') %>
+<% end %>

data/app/views/spree/admin/shared/_bulk_modal.html.erb

@@ -0,0 +1,21 @@
+<div class="modal fade" id="bulk-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <%= turbo_frame_tag :bulk_modal do %>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:loading) %>...</h5>
+          <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
+        </div>
+        <div class="modal-body text-center">
+          <div class="spinner-border text-muted" role="status">
+            <span class="sr-only"><%= Spree.t(:loading) %>...</span>
+          </div>
+        </div>
+        <div class="modal-footer d-flex justify-content-between">
+          <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t(:close) %></button>
+          <button type="button" class="btn btn-primary" disabled="disabled"><%= Spree.t(:save_changes) %></button>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/spree/admin/shared/_calculator_fields.html.erb

@@ -0,0 +1,34 @@
+<div data-controller="calculator-fields">
+  <% calculators.each do |calculator| %>
+    <template id="<%= calculator.name.demodulize.underscore %>_fields">
+      <div class="calculator-settings">
+        <%= f.fields_for :calculator, calculator.new do |calc_form| %>
+          <%= calc_form.hidden_field :type, value: calculator.name %>
+          <%= preference_fields calculator.new(calculable: @object.dup), calc_form %>
+        <% end %>
+      </div>
+    </template>
+  <% end %>
+
+  <div id="calculator_fields" class="card mb-4">
+    <div class="card-header">
+      <h5 class="card-title">
+        <%= Spree.t(:calculator) %>
+      </h5>
+    </div>
+    <div id="preference-settings" class="card-body">
+      <div class="form-group">
+        <%= f.label(:calculator_type, Spree.t(:calculator), for: 'calculator_type') %>
+        <%= select_tag(:calculator_type, options_for_select(calculators.map { |c| [c.description, c.name] }, @object.calculator_type), {id: 'calculator_type', class: 'custom-select', data: { action: 'calculator-fields#replaceFields' }}) %>
+      </div>
+      <div class="form-group" data-calculator-fields-target="container">
+        <div class="calculator-settings">
+          <%= f.fields_for :calculator do |calculator_form| %>
+            <%= calculator_form.hidden_field :type, value: @object.calculator_type %>
+            <%= preference_fields @object.calculator, calculator_form %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/shared/_calendar_range_picker.html.erb

@@ -0,0 +1,28 @@
+<% date_from_input_name ||= :date_from %>
+<% date_to_input_name ||= :date_to %>
+<% css_classes ||= "btn btn-light d-inline-flex align-items-center h-100 dropdown-toggle" %>
+
+<% date_from_value ||= params[date_from_input_name] %>
+<% date_to_value ||= params[date_to_input_name] %>
+
+<% dropdown_direction ||= 'left' %>
+
+<div data-controller="calendar-range" class="dropdown h-100" 
+     data-action="click->calendar-range#open">
+  <div class="<%= css_classes %>" data-toggle="dropdown">
+    <%= icon('calendar', class: 'mr-2') %>
+    <div data-calendar-range-target="label">
+      <% if date_from_value.present? && date_to_value.present? %>
+        <%= date_from_value.to_date %> - <%= date_to_value.to_date %>
+      <% else %>
+        <%= Spree.t(:all_time) %>
+      <% end %>
+    </div>
+  </div>
+  <div class="dropdown-menu dropdown-menu-<%= dropdown_direction %> pb-0 pr-0 pl-1 pt-1" onclick="event.stopPropagation()">
+    <div data-calendar-range-target="picker" class="d-none"></div>
+  </div>
+
+  <%= hidden_field_tag date_from_input_name, date_from_value&.to_date, data: { 'calendar-range-target': 'dateFrom' } %>
+  <%= hidden_field_tag date_to_input_name, date_to_value&.to_date, data: { 'calendar-range-target': 'dateTo' } %>
+</div>

data/app/views/spree/admin/shared/_close_bulk_modal.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_render_alerts %>
+<%= turbo_close_modal('bulk-modal') %>

data/app/views/spree/admin/shared/_content_header.html.erb

@@ -0,0 +1,81 @@
+<% record = @customer_return || @order || @product || @vendor || @user || @taxon || @object %>
+<% record = nil if @user&.is_a?(Spree.admin_user_class) %>
+
+<% show_record_subtitle = record && record.persisted? && record.has_attribute?(:updated_at) %>
+<% content_for(:page_subtitle) do %>
+  <%= local_time record.updated_at, class: 'badge badge-light with-tip', title: 'Last update' %>
+<% end if show_record_subtitle && !content_for(:page_subtitle) %>
+
+<% if content_for?(:page_title) %>
+  <header id="page-header" class="container">
+    <h3 class="page-header-title mb-0 d-flex align-items-center gap-3">
+      <%= yield :page_title %>
+    </h3>
+    <div id="page_actions" class="ml-auto page-actions d-flex align-items-center gap-2">
+      <% if action_name == 'index' && defined?(model_class) && model_class && Spree::Export.available_models.include?(model_class) && can?(:create, Spree::Export) %>
+        <span data-toggle="modal" data-target="#modal">
+          <%= link_to spree.new_admin_export_path(export: { search_params: params[:q]&.to_json, type: Spree::Export.type_for_model(model_class) }), class: 'btn btn-light bg-transparent with-tip', title: 'Download records as CSV file', data: { turbo_frame: :dialog_modal } do %>
+            <%= icon 'table-export', class: 'mr-0 mr-lg-2' %>
+            <span class="d-none d-lg-inline"><%= Spree.t(:export) %></span>
+          <% end %>
+        </span>
+      <% end %>
+
+      <%= yield :page_actions if content_for?(:page_actions) %>
+
+      <% if action_name == 'edit' && @object %>
+        <%= turbo_save_button_tag Spree.t('actions.update'), class: 'btn btn-primary', form: "edit_#{@object.class.name.demodulize.underscore}_#{@object.id}" %>
+      <% end %>
+
+      <% if show_record_subtitle || content_for(:page_actions_dropdown) %>
+        <div class="dropdown h-100" id="page_actions_dropdown">
+          <%= link_to '#', class: 'btn btn-light bg-transparent h-100 p-2', data: { toggle: 'dropdown' }, id: 'more-actions-link' do %>
+            <%= icon 'dots', class: 'mr-0' %>
+          <% end %>
+          <div class="dropdown-menu dropdown-menu-right">
+            <%= yield :page_actions_dropdown if content_for(:page_actions_dropdown) %>
+            <% if record %>
+              <% if record.respond_to?(:audits) && spree.respond_to?(:admin_audits_path) && defined?(Audited) && can?(:read, Audited.audit_class) %>
+                <a href="<%= spree.admin_audits_path(q: { auditable_id_eq: record.id, auditable_type_eq: record.class.to_s }) %>" target="_blank" class="dropdown-item">
+                  <%= icon 'history' %>
+                  <%= Spree.t(:audit_log) %>
+                </a>
+              <% end %>
+              <% if record.respond_to?(:number) %>
+                <div data-controller="clipboard">
+                  <%= hidden_field_tag :record_number, record.number, data: { clipboard_target: 'source' } %>
+                  <button data-action="clipboard#copy" class="text-left dropdown-item">
+                    <%= icon 'files' %>
+                    <%= 'Copy number' %>
+                  </button>
+                </div>
+              <% end %>
+              <div data-controller="clipboard">
+                <%= hidden_field_tag :record_id, record.id, data: { clipboard_target: 'source' } %>
+                <button data-action="clipboard#copy" class="text-left dropdown-item">
+                  <%= icon 'files.svg' %>
+                  <%= Spree.t(:copy_id) %>
+                </button>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </header>
+<% end %>
+
+<% if content_for?(:page_tabs) %>
+  <div class="container">
+    <ul class="nav nav-pills flex-nowrap overflow-auto w-100 mb-3">
+      <%= yield :page_tabs %>
+    </ul>
+  </div>
+<% end %>
+<% if content_for(:page_alerts) %>
+  <div class="container">
+    <div class="page-alerts">
+      <%= yield(:page_alerts) %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/shared/_developers_nav.html.erb

@@ -0,0 +1,7 @@
+<%= content_for :page_title do %>
+  <%= Spree.t(:developers) %>
+<% end %>
+<%= content_for :page_tabs do %>
+  <%= nav_pill_list_item(:api_keys, label: Spree.t(:api_keys), url: spree.admin_oauth_applications_path) if can?(:manage, Spree::OauthApplication) %>
+  <%= nav_pill_list_item(:webhooks, label: Spree.t(:webhooks), url: spree.admin_webhooks_subscribers_path) if can?(:manage, Spree::Webhooks::Subscriber) %>
+<% end %>

data/app/views/spree/admin/shared/_edit_resource_links.html.erb

@@ -0,0 +1,6 @@
+<div class="form-actions">
+  <%= turbo_save_button_tag Spree.t('actions.update') %>
+  <% if f.object.can_be_deleted? && can?(:delete, f.object) %>
+    <%= link_to Spree.t('actions.destroy'), object_url(f.object), data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure_delete), turbo_frame: defined?(turbo_frame) ? turbo_frame : nil }, class: 'btn btn-danger ml-auto' %>
+  <% end %>
+</div>

data/app/views/spree/admin/shared/_error_messages.html.erb

@@ -0,0 +1,22 @@
+<% only_for ||= [] %>
+
+<% if target && target.errors.any? && (only_for.empty? || (target.errors.to_hash.keys & only_for).any?) %>
+  <div class="alert alert-danger">
+    <p>
+      <strong><%= Spree.t(:errors_prohibited_this_record_from_being_saved, count: target.errors.size) %>:</strong><br>
+    </p>
+    <ul class="list-unstyled mb-0">
+      <% if only_for.any? %>
+        <% only_for.each do |attribute_name| %>
+          <% target.errors.full_messages_for(attribute_name).each do |msg| %>
+            <li><%= msg %></li>
+          <% end %>
+        <% end %>
+      <% else %>
+        <% target.errors.full_messages.each do |msg| %>
+          <li><%= msg %></li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/spree/admin/shared/_filter_badge_template.erb

@@ -0,0 +1,3 @@
+<template data-filters-target="badgeTemplate">
+  <span class="badge py-1 px-2 bg-light text-dark d-flex-inline align-items-center mb-0">LABEL<a href="DELETE_URL" class="btn-close ml-2" title="Remove"></a></span>
+</template>

data/app/views/spree/admin/shared/_filters_button.html.erb

@@ -0,0 +1,8 @@
+<button
+  class="btn btn-light h-100 py-2"
+  type="button"
+  data-action="reveal#toggle"
+>
+  <%= icon "adjustments", class: "mr-1" %>
+  <%= Spree.t("admin.filters") %>
+</button>

data/app/views/spree/admin/shared/_filters_search_bar.html.erb

@@ -0,0 +1,15 @@
+<% label ||= Spree.t(:query) %>
+<% badge_name ||= label %>
+<% placeholder ||= [Spree.t(:search), controller_name.humanize.downcase].join(' ') %>
+
+<div class="form-control d-flex align-items-center py-0 focus-shadow focus-border flex-grow-1 mb-3 mb-lg-0 w-auto">
+  <%= icon "search", class: "mr-3 text-muted" %>
+  <%= search_field_tag "q[#{param}]",
+  params.dig(:q, param),
+  class: "form-control-plaintext px-0",
+  placeholder: placeholder,
+  data: {
+    filters_target: :input,
+    badge_name: badge_name,
+  } %>
+</div>

data/app/views/spree/admin/shared/_footer.html.erb

@@ -0,0 +1,2 @@
+<footer class="text-muted py-3 text-center">
+</footer>

data/app/views/spree/admin/shared/_growth_rate_badge.html.erb

@@ -0,0 +1,17 @@
+<% growth_rate ||= 0 %>
+
+<div class="d-flex">
+  <% if growth_rate == 0 %>
+    <svg viewBox="0 0 11 16" height="16" width="11" role="img" class="_SVG_1ou8g_150" tabindex="-1"><title>No change</title><path d="M0.519531 1.79395H12.0039V0.249023H0.519531V1.79395Z" fill="var(--p-icon-subdued, #8c9196)" transform="translate(0, 7)"></path></svg>
+  <% elsif growth_rate > 0 %>
+    <span class="text-success">
+      <%= icon 'arrow-up', class: 'mr-1 font-size-base' %>
+      <%= number_to_percentage(growth_rate, strip_insignificant_zeros: true) %>
+    </span>
+  <% else %>
+    <span class="text-danger">
+      <%= icon 'arrow-down', class: 'mr-1 font-size-base' %>
+      <%= number_to_percentage(growth_rate.abs, strip_insignificant_zeros: true) %>
+    </span>
+  <% end %>
+</div>

data/app/views/spree/admin/shared/_head.html.erb

@@ -0,0 +1,52 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+<%= csrf_meta_tags %>
+
+<title>
+  <% if content_for? :title %>
+    <%= yield :title %>
+  <% else %>
+    <% if @object.present? && @object.persisted? %><%= @object.try(:name) || @object.try(:title) %> - <% end %>
+    <% if @order.present? && @order.persisted? %><%= @order.number %> - <% end %>
+    <%= Spree.t(controller_name, default: controller_name.titleize) %>
+  <% end %>
+  <% if defined?(current_store) && current_store.present? %>
+    - <%= current_store.name.capitalize %>
+  <% end %>
+</title>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+
+<%= stylesheet_link_tag 'spree/admin/application', media: :all, data: { turbo_track: "reload" } %>
+<%= stylesheet_link_tag 'spree/admin/actiontext', media: :all, data: { turbo_track: "reload" } %>
+<%= action_cable_meta_tag %>
+
+<%= favicon_link_tag 'favicon_256x256.png' %>
+
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css"
+/>
+
+<%= tag.meta name: "direct-upload-url", content: main_app.rails_direct_uploads_path %>
+
+<%= tinymce_assets %>
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.1.12/dist/trix.css">
+
+<%= javascript_importmap_tags 'application-spree-admin', importmap: Rails.application.config.spree_admin.importmap %>
+
+<%= yield :head %>
+
+<% if Rails.env.test? %>
+  <style>
+    .text-uppercase {
+      text-transform: none !important;
+    }
+  </style>
+<% end %>
+
+<%= render 'spree/shared/google_places_api_loader' %>

data/app/views/spree/admin/shared/_header.html.erb

@@ -0,0 +1,28 @@
+<div id="scroll-header"></div>
+
+<%= render 'spree/admin/shared/offcanvas_nav' %>
+
+<header id="header" data-turbo-permanent>
+  <nav class="navbar navbar-expand-lg py-2 px-lg-5 d-lg-none">
+    <button type="button" class="btn d-flex align-items-center p-0 h-100 pull-bs-canvas-left d-lg-none text-white text-decoration-none">
+      <%= icon('menu-2', height: 32, class: 'm-0 h-100') %>
+    </button>
+
+    <div class="navbar-collapse d-none d-lg-flex">
+      <%= form_with url: spree.admin_search_admin_path, method: :post, class: 'd-none' do |form| %>
+        <div class="w-50 d-lg-flex align-items-center pr-2">
+          <%= icon('search', class: 'text-muted') %>
+          <%= text_field_tag :search, params[:search], class: 'px-3 py-2 bg-transparent w-100 outline-none border-0', placeholder: 'Search...', oninput: "this.form.requestSubmit()" %>
+        </div>
+      <% end if spree.respond_to?(:admin_search_admin_path) && defined?(current_store) && current_store %>
+    </div>
+
+    <%= link_to spree.admin_dashboard_path, class: 'navbar-brand d-flex d-lg-none h-100 align-items-center mx-0 text-white' do %>
+      <%= current_store.name %>
+    <% end %>
+
+    <div class="text-right d-flex justify-content-end p-0" id="header-user-account" data-turbo-permanent>
+      <%= render 'spree/admin/shared/user_dropdown' %>
+    </div>
+  </nav>
+</header>

data/app/views/spree/admin/shared/_index_table_options.html.erb

@@ -0,0 +1,22 @@
+<% args = params.clone %>
+<% entry_name ||= nil %>
+
+<% if defined?(per_page_action) %>
+  <% args[:action] = per_page_action %>
+<% end %>
+
+<% if collection.any? && collection.total_pages > 1 %>
+  <div class="py-2 border-top">
+    <div class="index-pagination-row d-flex align-items-center">
+      <div class="col-6 col-lg-3">
+        <%= per_page_dropdown %>
+      </div>
+      <div class="d-none d-lg-block col-lg-6 text-center text-muted small">
+        <%= page_entries_info(collection, entry_name: entry_name) %>
+      </div>
+      <div class="col-6 col-lg-3 text-right pr-lg-2">
+        <%= paginate collection, theme: 'admin-twitter-bootstrap-4' %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/shared/_map.html.erb

@@ -0,0 +1,9 @@
+<% if Mapkick.options[:access_token] && map_object.latitude.present? && map_object.longitude.present? %>
+  <div class="rounded overflow-hidden">
+    <%= js_map [{
+      latitude: map_object.latitude,
+      longitude: map_object.longitude,
+      label: label,
+    }], zoom: 15, controls: true, height: '300px' %>
+  </div>
+<% end %>

data/app/views/spree/admin/shared/_modal.html.erb

@@ -0,0 +1,37 @@
+<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <%= turbo_frame_tag :dialog_modal do %>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:loading) %>...</h5>
+          <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
+        </div>
+        <div class="modal-body text-center">
+          <div class="spinner-border text-light mx-auto my-5" role="status">
+            <span class="sr-only"><%= Spree.t(:loading) %>...</span>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<div class="modal fade" id="modal-lg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <%= turbo_frame_tag :dialog_modal_lg do %>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:loading) %>...</h5>
+          <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
+        </div>
+        <div class="modal-body text-center" style="min-height: 200px">
+          <div class="spinner-border text-light" role="status">
+            <span class="sr-only"><%= Spree.t(:loading) %>...</span>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<%= turbo_frame_tag :modal_scripts %>