spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -1,6 +1,6 @@
 <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">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 <%= csrf_meta_tags %>
 
@@ -22,20 +22,12 @@
 <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"
-/>
+<%= tinymce_assets %>
 
+<%= action_cable_meta_tag %>
 <%= 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">
+<%= favicon_link_tag 'favicon_256x256.png' %>
 
 <% if Rails.application.importmap.packages["application"].present? && Spree::Admin::RuntimeConfig.include_application_importmap %>
   <%= javascript_importmap_tags "application" %>
@@ -49,7 +41,7 @@
 
 <% if Rails.env.test? %>
   <style>
-    .text-uppercase {
+    .uppercase {
       text-transform: none !important;
     }
   </style>

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

@@ -1,33 +1,21 @@
 <div id="scroll-header"></div>
 
-<header id="header" class="sticky-top py-0">
-  <nav class="navbar navbar-expand-lg p-0 d-flex align-items-center pr-3">
-    <div class="d-lg-none pr-3 border-right">
-      <button type="button" class="btn btn-light px-2 ml-3 text-decoration-none" data-action="click->sidebar#openMobile">
+<header id="header" class="sticky top-0 z-[1020] py-0">
+  <nav class="py-0 flex items-center px-3 h-full">
+    <div class="lg:hidden">
+      <button type="button" class="btn btn-light px-2 no-underline" data-action="click->sidebar#openMobile">
         <%= icon('menu-2', class: 'mr-0') %>
       </button>
     </div>
 
+    <button type="button" class="sidebar-toggle-btn hidden lg:flex mr-3" data-action="click->sidebar#toggle" aria-label="<%= Spree.t('admin.expand_sidebar') %>">
+      <%= icon('layout-sidebar-left-collapse') %>
+    </button>
+
     <% if settings_area? %>
       <%= render 'spree/admin/shared/back_to_dashboard' %>
-    <% else %>
-      <% if defined?(current_vendor) && current_vendor.present? %>
-        <%= render 'spree/admin/shared/sidebar/vendor_dropdown' %>
-      <% else %>
-        <%= render 'spree/admin/shared/sidebar/store_dropdown' %>
-      <% end %>
     <% end %>
 
-    <button type="button" class="sidebar-toggle-btn ml-3 mr-3 d-none d-lg-block" data-action="click->sidebar#toggle" aria-label="<%= Spree.t('admin.expand_sidebar') %>">
-      <%= icon('layout-sidebar-left-collapse') %>
-    </button>
-
-    <div class="d-none d-lg-block">
-      <%= render 'spree/admin/shared/breadcrumbs' %>
-    </div>
+    <%= render 'spree/admin/shared/breadcrumbs' %>
   </nav>
-</header>
-
-<div class="d-lg-none py-3 border-bottom">
-  <%= render 'spree/admin/shared/breadcrumbs' %>
-</div>
+</header>

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

@@ -1,19 +1,34 @@
-<% args = params.clone %>
 <% entry_name ||= nil %>
 
-<% if defined?(per_page_action) %>
-  <% args[:action] = per_page_action %>
-<% end %>
-
-<% if collection.any? && collection.respond_to?(:current_page) %>
+<% if collection.any? && defined?(@pagy) && @pagy %>
   <div class="pagination-container">
-    <div class="index-pagination-row d-flex align-items-center justify-content-between px-2">
+    <div class="index-pagination-row flex items-center justify-between p-2">
       <%= per_page_dropdown %>
-      <div class="d-none d-lg-block text-center text-muted">
-        <%= page_entries_info(collection, entry_name: entry_name) %>
+      <div class="hidden lg:block text-center text-gray-600 text-sm">
+        <%== @pagy.info_tag(item_name: entry_name) %>
       </div>
-      <div class="text-right">
-        <%= paginate collection, theme: 'admin-twitter-bootstrap-4' %>
+      <div class="text-right flex gap-1.5">
+        <% unless @pagy.page == 1 %>
+          <%= link_to icon('chevron-left', class: 'text-gray-900 mr-0'),
+              url_for(request.query_parameters.merge(page: @pagy.previous)),
+              class: "btn btn-light p-2",
+              'aria-label': 'Previous page' %>
+        <% else %>
+          <button class="btn btn-light p-2 cursor-not-allowed opacity-50" disabled>
+            <%= icon('chevron-left', class: 'text-gray-900 mr-0') %>
+          </button>
+        <% end %>
+
+        <% unless @pagy.page == @pagy.pages %>
+          <%= link_to icon('chevron-right', class: 'text-gray-900 mr-0'),
+              url_for(request.query_parameters.merge(page: @pagy.next)),
+              class: "btn btn-light p-2",
+              'aria-label': 'Next page' %>
+        <% else %>
+          <button class="btn btn-light p-2 cursor-not-allowed opacity-50" disabled>
+            <%= icon('chevron-right', class: 'text-gray-900 mr-0') %>
+          </button>
+        <% end %>
       </div>
     </div>
   </div>

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

@@ -0,0 +1,41 @@
+<%# locals: (notable:, form_url: nil, param_key: nil) %>
+<% form_url ||= spree.polymorphic_path([:admin, notable]) %>
+<% param_key ||= notable.model_name.param_key %>
+
+<div class="card mb-6" id="internal_note" data-controller="dialog">
+  <div class="card-header flex justify-between items-center">
+    <h5 class="card-title">
+      <%= Spree.t(:internal_note) %>
+    </h5>
+    <% if can?(:update, notable) %>
+      <%= button_tag type: 'button', class: 'btn btn-light btn-sm', data: { action: 'dialog#open' } do %>
+        <%= icon('pencil', class: 'mr-1') %>
+        <%= Spree.t('actions.edit') %>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="card-body">
+    <% if notable.internal_note.present? %>
+      <div class="prose prose-sm max-w-none">
+        <%= notable.internal_note %>
+      </div>
+    <% else %>
+      <p class="text-gray-500 text-sm"><%= Spree.t(:no_internal_note) %></p>
+    <% end %>
+  </div>
+
+  <% if can?(:update, notable) %>
+    <%= dialog do %>
+      <%= dialog_header(Spree.t(:internal_note)) %>
+      <%= form_with url: form_url, scope: param_key, method: :put do |f| %>
+        <div class="dialog-body">
+          <%= f.spree_rich_text_area :internal_note, label: false %>
+        </div>
+        <div class="dialog-footer">
+          <%= dialog_discard_button %>
+          <%= turbo_save_button_tag Spree.t('actions.save') %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -1,5 +1,5 @@
 <% if Mapkick.options[:access_token] && map_object.latitude.present? && map_object.longitude.present? %>
-  <div class="rounded overflow-hidden">
+  <div class="rounded-md overflow-hidden">
     <%= js_map [{
       latitude: map_object.latitude,
       longitude: map_object.longitude,

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

@@ -1,13 +1,13 @@
 <div id="<%= spree_dom_id(asset) %>" class="media-form__image" data-sortable-update-url="<%= spree.admin_asset_path(asset) %>">
-  <div class="custom-control custom-checkbox d-none">
+  <div class="custom-control form-checkbox hidden">
     <%= check_box_tag "ids[]", asset.id, false, class: "custom-control-input", id: "#{asset.id}-checkbox", data: { media_form_target: "checkbox", action: 'media-form#showDeleteButton' } %>
     <label class="custom-control-label" for="<%= asset.id %>-checkbox"><span></span></label>
   </div>
-  <div class="move-handle text-center d-none ml-auto">
+  <div class="move-handle text-center hidden ml-auto">
     <button class="btn btn-light btn-sm px-1"><%= icon('grip-vertical', class: 'mr-0') %></button>
   </div>
 
   <%= link_to spree.edit_admin_asset_path(asset), data: { turbo_frame: 'dialog', action: 'dialog#open' } do %>
-    <%= spree_image_tag(asset.attachment, width: 200, height: 200, alt: asset.alt, class: 'w-100 d-block h-100 position-absolute') %>
+    <%= spree_image_tag(asset.attachment, width: 200, height: 200, alt: asset.alt, class: 'w-full block h-full absolute') %>
   <% end %>
 </div>

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

@@ -1,7 +1,7 @@
-<%= turbo_frame_tag 'media-form', class: 'card mb-4', data: { controller: 'media-form', media_form_delete_url_value: spree.bulk_destroy_admin_assets_path(viewable_id: viewable&.id) } do %>
+<%= turbo_frame_tag 'media-form', class: 'card mb-6', data: { controller: 'media-form', media_form_delete_url_value: spree.bulk_destroy_admin_assets_path(viewable_id: viewable&.id) } do %>
   <div class="card-header">
     <h5 class="card-title mr-2"><%= Spree.t(:media) %></h5>
-    <button type="button" data-media-form-target="deleteButton" class="btn btn-sm btn-danger btn-outline d-none ml-auto" data-action="media-form#deleteSelected">
+    <button type="button" data-media-form-target="deleteButton" class="btn btn-sm btn-danger btn-outline hidden ml-auto" data-action="media-form#deleteSelected">
       <%= icon('trash') %>
       <%= Spree.t(:delete_selected) %>
     </button>
@@ -23,8 +23,8 @@
           action: 'asset-uploader#open',
           media_form_target: 'addButton'
         }  do %>
-        <%= icon('upload', class: 'mt-5', style: 'font-size: 2rem;') %>
-        <p class="form-text mt-2 mb-5">
+        <%= icon('upload', class: 'mt-12 text-4xl') %>
+        <p class="text-sm mt-2 mb-12">
           <%= Spree.t('admin.upload_new_asset') %>
         </p>
       <% end %>

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

@@ -3,10 +3,8 @@
     <%= turbo_frame_tag :dialog_modal do %>
       <div class="modal-content">
         <%= modal_header(Spree.t(:loading)) %>
-        <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 class="modal-body text-center min-h-[300px]">
+          <%= render 'spree/admin/shared/spinner' %>
         </div>
       </div>
     <% end %>
@@ -18,10 +16,8 @@
     <%= turbo_frame_tag :dialog_modal_lg do %>
       <div class="modal-content">
         <%= modal_header(Spree.t(:loading)) %>
-        <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 class="modal-body text-center min-h-[300px]">
+          <%= render 'spree/admin/shared/spinner' %>
         </div>
       </div>
     <% end %>

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

@@ -1,16 +1,16 @@
 <%= turbo_frame_tag :dialog do %>
   <div data-controller="search-picker">
     <%= dialog_header(Spree.t(:add_products)) %>
-    <div class="dialog-body border-bottom">
+    <div class="dialog-body border-b">
       <%= form_with url: spree.search_admin_products_path, method: :post, data: { controller: 'auto-submit'} do |form| %>
         <%= form.hidden_field :omit_ids, value: parent.product_ids.join(',') %>
-        <%= form.search_field :q, value: params[:q], class: 'form-control', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
+        <%= form.search_field :q, value: params[:q], class: 'form-input', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
       <% end %>
     </div>
     <%= form_with url: url do |form| %>
       <div class="dialog-body">
         <div id="products_search_results" class="search-results">
-          <p class="text-muted text-center py-5">
+          <p class="text-gray-600 text-center py-12">
             <%= Spree.t(:start_typing_to_search_for_products) %>
           </p>
         </div>

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

@@ -1,5 +1,3 @@
-<ul class="nav flex-column">
-  <% items.each do |item| %>
-    <%= render 'spree/admin/shared/navigation_item', item: item, context: context %>
-  <% end %>
+<ul class="nav flex-col">
+  <%= render collection: items, partial: 'spree/admin/shared/navigation_item', as: :item, locals: { context: context } %>
 </ul>

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

@@ -33,8 +33,8 @@
 
 <% if item.section? %>
   <%# Section header %>
-  <li class="nav-item nav-section-header mt-3 border-top pt-3 pl-2">
-    <span class="text-muted text-uppercase font-weight-light font-size-sm"><%= item.section_label %></span>
+  <li class="nav-item nav-section-header mt-4 border-t pt-4 pl-2">
+    <span class="text-gray-600 uppercase font-light text-sm"><%= item.section_label %></span>
   </li>
 <% else %>
   <% if has_children %>
@@ -42,20 +42,16 @@
     <%= nav_item(complete_label, item_url, icon: item.icon, active: is_active, data: data_attrs, **html_options) %>
 
     <%# Submenu for expanded sidebar (only shown when active) %>
-    <ul class="nav-submenu <% unless is_active %>d-none<% end %>" id="nav-submenu-<%= item.key %>">
-      <% item.children.select { |child| child.visible?(self) }.each do |child_item| %>
-        <%= render 'spree/admin/shared/navigation_item', item: child_item, context: context %>
-      <% end %>
+    <ul class="nav-submenu <% unless is_active %>hidden<% end %>" id="nav-submenu-<%= item.key %>">
+      <%= render collection: item.children.select { |child| child.visible?(self) }, partial: 'spree/admin/shared/navigation_item', as: :item, locals: { context: context } %>
     </ul>
 
     <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
-    <ul class="nav-submenu-dropdown d-none dropdown-container" id="nav-submenu-dropdown-<%= item.key %>">
+    <ul class="nav-submenu-dropdown hidden dropdown-container" id="nav-submenu-dropdown-<%= item.key %>">
       <%# Add parent item as first item in dropdown %>
       <%= nav_item(item_label, item_url, icon: nil) %>
 
-      <% item.children.select { |child| child.visible?(self) }.each do |child_item| %>
-        <%= render 'spree/admin/shared/navigation_item', item: child_item, context: context %>
-      <% end %>
+      <%= render collection: item.children.select { |child| child.visible?(self) }, partial: 'spree/admin/shared/navigation_item', as: :item, locals: { context: context } %>
     </ul>
   <% else %>
     <%# Regular item without children %>

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

@@ -1,5 +1,5 @@
 <%= dropdown id: 'new-item-dropdown' do %>
-  <%= dropdown_toggle class: 'btn-light btn-sm px-1' do %>
+  <%= dropdown_toggle class: 'btn-light btn-sm px-1 rounded-lg' do %>
     <%= icon 'plus', class: 'mr-0' %>
   <% end %>
   <%= dropdown_menu do %>

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

@@ -1,4 +1,4 @@
-<% col_class ||= 'col-lg-6 offset-lg-3' %>
+<% col_class ||= 'col-span-12 lg:col-span-6 lg:col-start-4' %>
 <% page_header_back_button_url ||= collection_url %>
 <% form_url ||= collection_url %>
 
@@ -8,7 +8,7 @@
 <% end %>
 
 <%= form_with model: [:admin, @object], url: form_url, id: "new_#{controller_name.singularize}", data: local_assigns[:data] || {} do |f| %>
-  <div class="row">
+  <div class="grid grid-cols-12 gap-4">
     <div class="<%= col_class %>">
       <%= render 'spree/admin/shared/error_messages', target: @object %>
       <%= render 'form', f: f %>

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

@@ -1,6 +1,6 @@
 <% width ||= 50 %>
 <% height ||= 50 %>
 
-<div class="rounded bg-light text-muted d-flex align-items-center justify-content-center border" style="width: <%= width %>px; height: <%= height %>px">
-  <%= icon('camera-off', class: 'text-muted opacity-50') %>
+<div class="rounded-md bg-gray-25 text-gray-600 flex items-center justify-center border" style="width: <%= width %>px; height: <%= height %>px">
+  <%= icon('camera-off', class: 'text-gray-600 opacity-50') %>
 </div>

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

@@ -1,9 +1,9 @@
 <% resource_name ||= model_class.name.demodulize.underscore.humanize %>
 
-<div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
-  <%= icon 'map-search', class: 'mb-3 opacity-50', style: 'font-size: 2rem;' %>
+<div class="text-gray-600 p-12 flex items-center w-full justify-center flex-col gap-4">
+  <%= icon 'map-search', class: 'opacity-50 text-4xl' %>
   <p>
     <%= Spree.t(:no_resource_found, resource: resource_name) %>
   </p>
-  <%= link_to_with_icon 'plus', Spree.t(:add_one), new_object_url, class: 'btn btn-primary btn-sm ml-3', data: { 'turbo-frame': '_top' } if can?(:create, model_class) && defined?(new_object_url) && new_object_url.present? %>
+  <%= link_to_with_icon 'plus', Spree.t(:add_one), new_object_url, class: 'btn btn-primary btn-sm', data: { 'turbo-frame': '_top' } if can?(:create, model_class) && defined?(new_object_url) && new_object_url.present? %>
 </div>

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

@@ -1,5 +1,5 @@
 <% if content_for(:page_alerts) %>
-  <div class="container mb-2" id="page-alerts">
+  <div class="container mx-auto px-4 max-w-screen-xl mb-2" id="page-alerts">
     <%= yield(:page_alerts) %>
   </div>
 <% end %>

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

@@ -1,6 +1,6 @@
 <% if content_for?(:page_tabs) %>
   <div id="page-tabs">
-    <div class="container mb-2">
+    <div class="container mx-auto px-4 max-w-screen-xl mb-2">
       <ul class="nav">
         <%= yield :page_tabs %>
       </ul>

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

@@ -1,10 +1,10 @@
 <% if object.preferences.present? %>
   <p class="mb-0">
   <% object.preferences.each do |key, value| %>
-      <% next if value.blank? %>
+      <% next if value.blank? && key != :max_quantity %>
       <% next if key == :eligible_values %>
       <span><%= Spree.t(key) %>:</span>
-      <strong><%= value %></strong>
+      <strong><%= format_preference_value(key, value) %></strong>
     <% end %>
   </p>
-<% end %>
+<% end %>

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

@@ -5,8 +5,8 @@
 
 <% if image.present? && image.attached? && image.variable? %>
   <% alt ||= image.alt || object.name %>
-  <div class="admin-product-image-container">
-    <%= spree_image_tag(image, variant: variant, alt: alt, width: width, height: height) %>
+  <div class="overflow-hidden rounded-md border border-gray-300" style="width: <%= width %>px; height: <%= height %>px;">
+    <%= spree_image_tag(image, variant: variant, width: width, height: height, alt: alt, class: 'object-cover transition-transform duration-300 ease-out hover:scale-120') %>
   </div>
 <% else %>
   <%= render 'spree/admin/shared/no_image', width: width, height: height %>

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

@@ -1,7 +1,7 @@
 <div class="table-responsive card-lg">
   <table class="table table-condensed" id='refunds' data-order-id='<%= @order.number %>'>
     <thead>
-      <tr data-hook="refunds_header" class="border-bottom">
+      <tr data-hook="refunds_header" class="border-b">
         <th scope="col"><%= "#{Spree.t('date')}/#{Spree.t('time')}" %></th>
         <th scope="col"><%= Spree.t(:amount) %></th>
         <th scope="col"><%= Spree.t(:reason) %></th>

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

@@ -1,32 +1,32 @@
-<div class="card mb-4 seo-form">
-  <div class="card-header d-flex justify-content-between">
+<div class="card mb-6 seo-form">
+  <div class="card-header flex justify-between">
     <h5 class="card-title"><%= Spree.t(:search_engine_listing) %></h5>
     <button class="btn btn-light btn-sm ml-auto" data-action="click->seo-form#toggleInputs" type="button">Edit</button>
   </div>
-  <div class="card-body d-flex flex-column">
-    <div class="seo__preview <% if title.blank? && description.blank? %>d-none<% else %>d-flex flex-column<% end %>" data-seo-form-target="preview">
-      <div class="seo__preview__title h4 font-weight-normal mb-0 text-break" data-seo-form-target="titlePreview">
+  <div class="card-body flex flex-col">
+    <div class="seo__preview <% if title.blank? && description.blank? %>hidden<% else %>flex flex-col<% end %>" data-seo-form-target="preview">
+      <div class="seo__preview__title text-xl font-normal mb-0 break-words" data-seo-form-target="titlePreview">
         <%= meta_title.presence || title %>
       </div>
       <div class="seo__preview__link">
         <%= current_store.formatted_url_or_custom_domain %>/<%= slug_path %>/<span data-seo-form-target="slugPreview"><%= slug %></span>
       </div>
-      <div class="seo__preview__description text-break" data-seo-form-target="descriptionPreview"></div>
+      <div class="seo__preview__description break-words" data-seo-form-target="descriptionPreview"></div>
     </div>
-    <div class="seo__add-info <% if title.present? || description.present? %>d-none<% end %>" data-seo-form-target="placeholder">
+    <div class="seo__add-info <% if title.present? || description.present? %>hidden<% end %>" data-seo-form-target="placeholder">
       <%= placeholder %>
     </div>
-    <div class="seo__inputs d-none" data-seo-form-target="inputsContainer">
+    <div class="seo__inputs hidden" data-seo-form-target="inputsContainer">
       <%= f.spree_text_field :meta_title, data: { seo_form_target: 'titleInput', action: 'input->seo-form#updatePreviews' } %>
       <%= f.spree_text_area :meta_description, rows: 4, data: { seo_form_target: 'descriptionInput', action: 'input->seo-form#updatePreviews' } %>
       
       <div class="form-group">
         <% if defined?(slug_attribute_name) %>
           <%= label_tag slug_attribute_name, Spree.t(:slug) %>
-          <%= text_field_tag slug_attribute_name, slug, class: 'form-control',  data: { seo_form_target: 'slugInput', action: 'input->seo-form#updatePreviews', slug_form_target: 'url' } %>
+          <%= text_field_tag slug_attribute_name, slug, class: 'form-input',  data: { seo_form_target: 'slugInput', action: 'input->seo-form#updatePreviews', slug_form_target: 'url' } %>
         <% else %>
           <%= f.label :slug, Spree.t(:slug) %>
-          <%= f.text_field :slug, class: 'form-control', data: { seo_form_target: 'slugInput', action: 'input->seo-form#updatePreviews', slug_form_target: 'url' } %>
+          <%= f.text_field :slug, class: 'form-input', data: { seo_form_target: 'slugInput', action: 'input->seo-form#updatePreviews', slug_form_target: 'url' } %>
         <% end %>
       </div>
     </div>

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

@@ -1,5 +1,15 @@
 <%# Desktop Sidebar %>
-<aside id="main-sidebar" class="overflow-y-auto" data-sidebar-target="desktop">
+<aside id="main-sidebar" class="overflow-y-auto scrollbar-thin" data-sidebar-target="desktop">
+  <% if settings_area? %>
+    <%= render 'spree/admin/shared/back_to_dashboard' %>
+  <% else %>
+    <% if defined?(current_vendor) && current_vendor.present? %>
+      <%= render 'spree/admin/shared/sidebar/vendor_dropdown' %>
+    <% else %>
+      <%= render 'spree/admin/shared/sidebar/store_dropdown' %>
+    <% end %>
+  <% end %>
+
   <div class="sidebar-content">
     <% if defined?(current_vendor) && current_vendor.present? %>
       <%= render 'spree/admin/shared/sidebar/vendor_nav' %>
@@ -12,11 +22,18 @@
 </aside>
 
 <%# Mobile Sidebar Overlay %>
-<div class="sidebar-mobile d-lg-none" data-sidebar-target="mobile">
+<div class="sidebar-mobile lg:hidden" data-sidebar-target="mobile">
   <div class="sidebar-backdrop" data-action="click->sidebar#closeMobile"></div>
   <div class="sidebar-panel">
     <div class="sidebar-mobile-header">
-      <button type="button" class="btn btn-sm" data-action="click->sidebar#closeMobile" aria-label="<%= Spree.t('admin.close_sidebar') %>">
+      <% unless settings_area? %>
+        <% if defined?(current_vendor) && current_vendor.present? %>
+          <%= render 'spree/admin/shared/sidebar/vendor_dropdown' %>
+        <% else %>
+          <%= render 'spree/admin/shared/sidebar/store_dropdown' %>
+        <% end %>
+      <% end %>
+      <button type="button" class="btn btn-sm ml-auto" data-action="click->sidebar#closeMobile" aria-label="<%= Spree.t('admin.close_sidebar') %>">
         <%= icon('x') %>
       </button>
     </div>

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

@@ -1,7 +1,8 @@
 <% spinner_id = defined?(id) ? id : 'turbo-spinner' %>
 
-<div class="d-flex w-100 align-items-center justify-content-center" id="<%= spinner_id %>">
-  <div class="spinner-border text-muted align-middle" role="status">
+<div class="flex flex-col w-full h-full min-h-[200px] items-center justify-center" id="<%= spinner_id %>">
+  <div class="inline-block w-8 h-8 border-4 border-current border-r-transparent rounded-full animate-spin text-gray-300 align-middle opacity-50 mb-3" role="status">
     <span class="sr-only"><%= Spree.t(:loading) %>...</span>
   </div>
+  <span class="text-gray-300"><%= Spree.t(:loading) %>...</span>
 </div>

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

@@ -0,0 +1,23 @@
+<dialog id="turbo-confirm-dialog" class="dialog" data-dialog-target="dialog" data-controller="dialog">
+  <div class="dialog-header">
+    <h5 class="dialog-title"><%= Spree.t(:are_you_sure) %></h5>
+    <form method="dialog">
+      <button type="submit" value="cancel" class="btn-close" aria-label="<%= Spree.t(:close) %>"></button>
+    </form>
+  </div>
+  <div class="dialog-body">
+    <p id="turbo-confirm-message" class="text-base text-gray-700 m-0"></p>
+  </div>
+  <div class="dialog-footer">
+    <form method="dialog">
+      <button type="submit" value="cancel" class="btn btn-light">
+        <%= Spree.t(:cancel) %>
+      </button>
+    </form>
+    <form method="dialog">
+      <button type="submit" value="confirm" id="turbo-confirm-button" class="btn btn-primary">
+        <%= Spree.t(:confirm) %>
+      </button>
+    </form>
+  </div>
+</dialog>

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

@@ -1,16 +1,16 @@
-<%= link_to spree.admin_user_path(user), class: 'rounded p-2 d-flex justify-content-start align-items-center text-decoration-none hover-light', data: {turbo_frame: :_top, row_link_target: :link} do %>
+<%= link_to spree.admin_user_path(user), class: 'rounded-md p-2 flex justify-start items-center no-underline hover:bg-gray-25 gap-4', data: {turbo_frame: :_top, row_link_target: :link} do %>
   <% if user.name.present? %>
-    <%= render_avatar(user, width: 48, height: 48, class: 'mr-3 avatar') %>
+    <%= render_avatar(user, width: 48, height: 48) %>
   <% else %>
-    <div style="width: 48px; height: 48px" class="mr-3 avatar bg-light"></div>
+    <div class="flex items-center justify-center bg-gray-200 rounded-full text-gray-600 w-12 h-12"></div>
   <% end %>
   <div class="text-left">
     <% if customer_full_name(user) %>
-      <span class="font-weight-bold text-dark"><%= customer_full_name(user) %></span>
+      <span class="font-bold text-gray-900"><%= customer_full_name(user) %></span>
       <br />
     <% end %>
     <% unless defined?(current_vendor) && current_vendor %>
-      <span class="text-muted" data-controller="tooltip">
+      <span class="text-gray-600" data-controller="tooltip">
         <%= user.email %>
         <%= tooltip(user.email) %>
       </span>

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

@@ -3,7 +3,7 @@
     <%= dropdown do %>
       <%= dropdown_toggle class: 'user-dropdown-button dropdown-toggle' do %>
         <%= render_avatar(try_spree_current_user, width: 32, height: 32) %>
-        <span class="user-name d-none d-lg-block">
+        <span class="user-name hidden lg:block">
           <% if try_spree_current_user.name.present? %>
             <%= try_spree_current_user.name&.full %>
           <% else %>
@@ -12,12 +12,12 @@
         </span>
       <% end %>
       <%= dropdown_menu class: 'ml-2', style: 'min-width: 250px;' do %>
-        <div class="d-flex align-items-center p-2 bg-light rounded-lg">
+        <div class="flex items-center p-2 bg-gray-25 rounded-xl">
           <%= render_avatar(try_spree_current_user, width: 34, height: 34) %>
-          <span class="d-flex flex-column ml-2">
+          <span class="flex flex-col ml-2">
             <% if try_spree_current_user.name.present? %>
               <%= try_spree_current_user.name&.full %>
-              <small class="text-muted"><%= try_spree_current_user.email %></small>
+              <small class="text-gray-600"><%= try_spree_current_user.email %></small>
             <% else %>
               <%= try_spree_current_user.email %>
             <% end %>
@@ -44,7 +44,7 @@
 
       <div class="dropdown-divider"></div>
 
-        <%= button_to spree_admin_logout_path, class: 'dropdown-item mb-0 btn-danger', method: :delete do %>
+        <%= button_to spree_admin_logout_path, class: 'dropdown-item text-danger hover:bg-red-100 mb-0', method: :delete do %>
           <%= icon('logout', class: "icon icon-logout")  %>
           <%= Spree.t(:logout) %>
         <% end if defined?(spree_admin_logout_path) %>

data/app/views/spree/admin/shared/devise/_links.html.erb

@@ -1,13 +1,13 @@
-<div class="mb-2 d-flex justify-content-between">
+<div class="mb-2 flex justify-between">
   <div>
     <% if defined?(devise_mapping) && devise_mapping.rememberable? && controller_name == 'user_sessions' %>
-      <div class="custom-control custom-checkbox">
+      <div class="custom-control form-checkbox">
         <%= f.check_box :remember_me, class: "custom-control-input" %>
         <%= f.label :remember_me, Spree.t(:remember_me), class: "custom-control-label" %>
       </div>
     <% end %>
   </div>
-  <div class="d-flex align-items-center gap-2">
+  <div class="flex items-center gap-2">
     <% if controller_name != 'user_sessions' %>
       <p><%= link_to Spree.t(:log_in), new_session_path(resource_name) %></p>
     <% end %>