spree_admin 5.2.6 → 5.3.0.rc1

data/app/views/spree/admin/properties/_table_row.html.erb

@@ -1,12 +1,12 @@
 <tr id="<%= spree_dom_id property %>" data-controller="row-link" data-sortable-update-url="<%= spree.admin_property_path(property) %>">
   <td class="w-5 move-handle text-center">
-    <%= icon('grip-vertical', class: 'rounded hover-gray p-2') %>
+    <%= icon('grip-vertical', class: 'rounded-md hover:bg-gray-100 p-2') %>
   </td>
   <td class="w-20 cursor-pointer py-0" data-action="click->row-link#openLink">
     <code><%= property.name %></code>
   </td>
   <td class="w-20 cursor-pointer" data-action="click->row-link#openLink">
-    <%= link_to property.presentation, spree.edit_admin_property_path(property), class: 'text-decoration-none d-flex align-items-center font-weight-bold text-dark', data: { row_link_target: :link, turbo_frame: '_top' } %>
+    <%= link_to property.presentation, spree.edit_admin_property_path(property), class: 'no-underline flex items-center font-bold text-gray-900', data: { row_link_target: :link, turbo_frame: '_top' } %>
   </td>
   <td class="w-20 cursor-pointer" data-action="click->row-link#openLink">
     <span class="badge badge-light"><%= property.kind.humanize %></span>
@@ -16,7 +16,7 @@
   </td>
   <td>
     <%= form_with model: property, url: admin_property_path(property), method: :patch, data: { controller: 'auto-submit' } do |f| %>
-      <%= f.select :display_on, display_on_options, {}, { class: 'custom-select custom-select-sm w-auto', data: { action: 'auto-submit#submit' } } %>
+      <%= f.select :display_on, display_on_options, {}, { class: 'form-select form-select-sm', data: { action: 'auto-submit#submit' } } %>
     <% end %>
   </td>
   <td class="w-10 actions">

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

@@ -1,5 +1,5 @@
 <% if f.object.new_record? %>
-  <%= f.spree_text_field :amount, label: Spree.t(:amount), append: currency_symbol(@order.currency), required: true %>
+  <%= f.spree_money_field :amount, label: Spree.t(:amount), currency: @order.currency, required: true %>
 <% end %>
 
 <%= f.spree_collection_select :refund_reason_id, refund_reasons, :id, :name, { include_blank: true, label: Spree.t(:reason), required: true } %>

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

@@ -3,16 +3,16 @@
   <%= Spree.t(:new_refund) %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-6 offset-lg-3">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-6 lg:col-start-4">
     <%= render 'spree/admin/shared/error_messages', target: @refund %>
 
     <%= form_for [:admin, @refund.payment.order, @refund.payment, @refund] do |f| %>
-      <div class="card mb-4">
+      <div class="card mb-6">
         <div class="card-header">
-          <h6 class="card-title">
+          <h5 class="card-title">
             <%= Spree.t(:new_refund) %>
-          </h6>
+          </h5>
         </div>
         <div class="card-body">
           <div class="form-group">

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

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-body">
     <%= f.spree_text_field :name, autofocus: f.object.new_record?, required: true %>
 

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

@@ -1,6 +1,6 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.edit_admin_order_path(@reimbursement.order) %>
-  <div class="d-flex gap-3 align-items-center">
+  <div class="flex gap-6 items-center">
     <span><%= Spree.t(:reimbursement) %></span>
     <span><%= @reimbursement.number %></span>
 
@@ -16,7 +16,7 @@ locals: {
 } %>
 
 <%= form_for [:admin, @order, @reimbursement] do |f| %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:items_to_be_reimbursed) %></h5>
     </div>
@@ -53,7 +53,7 @@ locals: {
               </td>
               <td>
                 <%= item_fields.text_field :pre_tax_amount,
-                                       { class: "refund-amount-input form-control" } %>
+                                       { class: "refund-amount-input form-input" } %>
               </td>
               <td>
                 <%= return_item.display_total %>
@@ -69,7 +69,7 @@ locals: {
                                                 { include_blank: true },
                                                 {
                                                   class:
-                                                    "custom-select return-item-exchange-selection",
+                                                    "form-select return-item-exchange-selection",
                                                 } %>
                 <% end %>
               </td>
@@ -80,12 +80,12 @@ locals: {
     </div>
   </div>
 
-  <div class="form-actions filter-actions actions mb-4">
+  <div class="form-actions filter-actions actions mb-6">
     <%= turbo_save_button_tag Spree.t("actions.update"), class: "btn btn-primary" %>
   </div>
 <% end %>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5><%= Spree.t(:calculated_reimbursements) %></h5>
   </div>
@@ -112,7 +112,7 @@ locals: {
 </div>
 
 <% if @order.has_non_reimbursement_related_refunds? %>
-  <div class="alert alert-danger mb-2">
+  <div class="alert alert-danger mb-6">
     <%= "#{Spree.t("note")}: #{Spree.t("this_order_has_already_received_a_refund")}. #{Spree.t("make_sure_the_above_reimbursement_amount_is_correct")}." %>
   </div>
 <% end %>

data/app/views/spree/admin/reimbursements/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.edit_admin_order_path(@reimbursement.order) %>
-  <div class="d-flex gap-3 align-items-center">
+  <div class="flex gap-6 items-center">
     <span><%= Spree.t(:reimbursement) %></span>
     <span><%= @reimbursement.number %></span>
 
@@ -15,7 +15,7 @@ locals: {
   target: @reimbursement,
 } %>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:items_reimbursed) %></h5>
   </div>
@@ -60,7 +60,7 @@ locals: {
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:refunds) %></h5>
   </div>

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

@@ -4,7 +4,7 @@
 <% end %>
 
 <%= content_for :page_actions do %>
-  <%= form_for @report, url: spree.admin_reports_path, as: :report, html: { class: 'd-inline-block' } do |f| %>
+  <%= form_for @report, url: spree.admin_reports_path, as: :report, html: { class: 'inline-block' } do |f| %>
     <%= f.hidden_field :type %>
     <%= f.hidden_field :date_from %>
     <%= f.hidden_field :date_to %>
@@ -26,16 +26,15 @@
   <%= form_tag spree.new_admin_report_path, method: :get, data: { controller: 'auto-submit' } do %>
     <%= hidden_field_tag :type, params[:type] %>
 
-    <div class="d-flex gap-2">
+    <div class="flex gap-2">
       <%= render 'spree/admin/shared/calendar_range_picker',
-        date_from_value: @report.date_from,
-        date_to_value: @report.date_to,
-        css_classes: 'custom-select d-flex cursor-default bg-transparent' %>
+        date_from_value: params[:date_from] || 1.month.ago.in_time_zone(current_store.preferred_timezone).beginning_of_day,
+        date_to_value: params[:date_to] || Time.current.in_time_zone(current_store.preferred_timezone).end_of_day %>
 
       <div class="form-group">
         <%= select_tag :currency,
           options_for_select(current_store.supported_currencies_list, @report.currency),
-          class: 'custom-select bg-transparent',
+          class: 'form-select bg-transparent pr-8!',
           data: { action: 'change->auto-submit#submit' } %>
       </div>
 

data/app/views/spree/admin/return_authorizations/_table_row.html.erb

@@ -21,7 +21,7 @@
   <td data-action="click->row-link#openLink">
     <%= link_to return_authorization.number,
     return_url,
-    class: "font-weight-bold",
+    class: "font-bold",
     data: {
       row_link_target: :link,
     } %>
@@ -29,7 +29,7 @@
   <td data-action="click->row-link#openLink">
     <%= link_to spree_time_ago(return_authorization.created_at),
     return_url,
-    class: "text-dark" %>
+    class: "text-gray-900" %>
   </td>
   <td data-action="click->row-link#openLink">
     <%= render "spree/admin/orders/customer_summary", order: return_authorization.order %>

data/app/views/spree/admin/return_authorizations/filters.html.erb

@@ -1,10 +1,10 @@
 <%= search_form_for [:admin, @search], url: spree.admin_return_authorizations_path, class: "filter-wrap", data: {controller: "filters"} do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
+  <div class="flex flex-col lg:flex-row gap-2">
     <%= render "spree/admin/shared/filters_search_bar", param: :number_cont %>
 
     <%= dropdown do %>
       <%= dropdown_toggle class: 'btn-light dropdown-toggle' do %>
-        <span class="text-muted font-weight-normal mr-1">
+        <span class="text-gray-600 font-normal mr-1">
           <%= Spree.t(:show) %>:
         </span>
         <% if params.dig(:q, :state_eq).present? %>

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

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-body">
     <%= f.spree_text_field :name, required: true %>
   </div>

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

@@ -3,16 +3,16 @@
 <%= turbo_frame_tag frame_name 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 class="flex justify-center px-2">
         <div
           data-controller="notification"
           data-notification-delay-value="5000"
-          class="animate__animated animate__fadeInDown animate__faster hidden alert pr-2 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">
+          class="animate-fade-in-down-fast hidden alert pr-2 flex items-center <%= admin_flash_class_for(msg_type) %> items-center" style="min-width: 300px; pointer-events: all;">
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center justify-between">
               <span><%= text %></span>
             </div>
-            <button type="button" class="btn ml-3 p-1" data-action="notification#hide" aria-label="<%= Spree.t(:close) %>">
+            <button type="button" class="btn ml-4 p-1" data-action="notification#hide" aria-label="<%= Spree.t(:close) %>">
               <%= icon('x', height: 20, class: 'mr-0') %>
             </button>
           </div>

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

@@ -1,11 +1,11 @@
-  <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="card mb-6 animate-pulse">
+    <div class="card-header block border-0 h-auto p-2">
+      <div class="grid grid-cols-12">
+        <div class="col-span-6 lg:col-span-4 gap-2">
           <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">
+            <div class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-600">Total Sales</span>
+              <span class="text-lg text-gray-900 font-bold mt-1">
                 <%= @sales_total %>
               </span>
               <div>
@@ -15,11 +15,11 @@
           </div>
         </div>
 
-        <div class="col-6 col-lg-2 pl-0 pr-2">
+        <div class="col-span-6 lg:col-span-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 class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-600">Avg. Order Value</span>
+              <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @orders_average %></span>
               <div>
                 <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
               </div>
@@ -27,11 +27,11 @@
           </div>
         </div>
 
-        <div class="col-6 col-lg-2 pl-0 pr-2">
+        <div class="col-span-6 lg:col-span-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 class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-600">Total Orders</span>
+              <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @orders_total  %></span>
               <div>
                 <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
               </div>
@@ -39,11 +39,11 @@
           </div>
         </div>
         <% if defined?(Ahoy) %>
-          <div class="col-6 col-lg-2 pl-0 pr-2">
+          <div class="col-span-6 lg:col-span-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 class="flex justify-center flex-col">
+                <span class="text-sm text-gray-600">Visits</span>
+                <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @visits_total %></span>
                 <div>
                   <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
                 </div>
@@ -52,11 +52,11 @@
           </div>
         <% end %>
 
-        <div class="col-6 col-lg-2 pl-0">
+        <div class="col-span-6 lg:col-span-2">
           <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 class="flex justify-center flex-col">
+              <span class="text-sm text-gray-600">Sign-ups</span>
+              <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @audience_total %></span>
               <div>
                 <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: 0 %>
               </div>
@@ -66,11 +66,7 @@
       </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>
+    <%= render 'spree/admin/shared/spinner' %>
   </div>
   <!-- End Body -->
 </div>

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

@@ -1 +1 @@
-<%= link_to_with_icon 'arrow-back', Spree.t('admin.back_to_dashboard'), spree.admin_path, class: 'store-dropdown hover-gray justify-content-start gap-2 px-4' %>
+<%= link_to_with_icon 'arrow-back', Spree.t('admin.back_to_dashboard'), spree.admin_path, class: 'store-dropdown hover:bg-gray-100 justify-start gap-2 px-4 no-underline' %>

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

@@ -5,9 +5,9 @@
       <li>
         <%= active_link_to Spree.t(:settings), spree.edit_admin_store_path %>
       </li>
-      <%= icon('slash', class: 'text-muted font-size-sm') %>
+      <%= icon('slash', class: 'text-gray-600 text-sm') %>
     <% end %>
 
-    <%= render_breadcrumbs tag: :li, separator: icon('slash', class: 'text-muted font-size-sm') %>
+    <%= render_breadcrumbs tag: :li, separator: icon('slash', class: 'text-gray-600 text-sm') %>
   </ol>
 </nav>

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

@@ -1,14 +1,13 @@
-<dialog class="dialog overflow-visible" data-bulk-dialog-target="dialog" id="bulk-dialog">
+<%= dialog(id: 'bulk-dialog', controller_name: 'bulk-dialog') do %>
   <%= turbo_frame_tag :bulk_dialog do %>
     <%= dialog_header(Spree.t(:loading), 'bulk-dialog') %>
-    <div class="dialog-body text-center overflow-visible">
-      <div class="spinner-border text-muted" role="status">
-        <span class="sr-only"><%= Spree.t(:loading) %>...</span>
+    <div class="dialog-body text-center">
+      <div class="flex flex-col w-full h-full items-center justify-center">
+        <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>
     </div>
-    <div class="dialog-footer">
-      <%= dialog_discard_button('bulk-dialog') %>
-      <%= turbo_save_button_tag %>
-    </div>
   <% end %>
-</dialog>
+<% end %>

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

@@ -10,7 +10,7 @@
     </template>
   <% end %>
 
-  <div id="calculator_fields" class="card mb-4">
+  <div id="calculator_fields" class="card mb-6">
     <div class="card-header">
       <h5 class="card-title">
         <%= Spree.t(:calculator) %>
@@ -19,7 +19,7 @@
     <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' }}) %>
+        <%= select_tag(:calculator_type, options_for_select(calculators.map { |c| [c.description, c.name] }, @object.calculator_type), {id: 'calculator_type', class: 'form-select', data: { action: 'calculator-fields#replaceFields' }}) %>
       </div>
       <div class="form-group" data-calculator-fields-target="container">
         <div class="calculator-settings">

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

@@ -1,15 +1,15 @@
 <% date_from_input_name ||= :date_from %>
 <% date_to_input_name ||= :date_to %>
-<% css_classes ||= "btn btn-light d-inline-flex align-items-center dropdown-toggle" %>
+<% css_classes ||= "btn-light inline-flex items-center dropdown-toggle" %>
 
 <% date_from_value ||= params[date_from_input_name] %>
 <% date_to_value ||= params[date_to_input_name] %>
 
 <% dropdown_direction ||= 'left' %>
 
-<%= dropdown direction: dropdown_direction, data: { controller: 'dropdown calendar-range', action: 'click->calendar-range#open' }, class: 'h-100', portal: false do %>
+<%= dropdown direction: dropdown_direction, data: { controller: 'dropdown calendar-range', action: 'click->calendar-range#open' }, class: 'h-full', portal: false do %>
   <%= dropdown_toggle class: css_classes do %>
-    <%= icon('calendar', class: 'mr-2') %>
+    <%= icon('calendar') %>
     <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 %>
@@ -19,7 +19,7 @@
     </div>
   <% end %>
   <%= dropdown_menu class: "pt-2 px-2 pb-1", style: 'min-width: 29rem' do %>
-    <div data-calendar-range-target="picker" class="d-none"></div>
+    <div data-calendar-range-target="picker" class="hidden"></div>
   <% end %>
 
   <%= hidden_field_tag date_from_input_name, date_from_value&.to_date, data: { 'calendar-range-target': 'dateFrom' } %>

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

@@ -9,11 +9,11 @@
 <% end if show_record_subtitle && !content_for(:page_subtitle) %>
 
 <% if content_for?(:page_title) %>
-  <header id="page-header" class="container" data-controller="sticky">
-    <h3 class="page-header-title mb-0 d-flex align-items-center gap-3">
+  <header id="page-header" class="container mx-auto px-4 max-w-screen-xl" data-controller="sticky">
+    <h3 class="page-header-title mb-0 flex items-center gap-4" id="page_title">
       <%= yield :page_title %>
     </h3>
-    <div id="page_actions" class="ml-auto page-actions d-flex align-items-center gap-2">
+    <div id="page_actions" class="ml-auto page-actions flex items-center gap-2">
       <%= yield :page_actions if content_for?(:page_actions) %>
 
       <% if action_name == 'edit' && @object %>
@@ -22,8 +22,8 @@
       <% end %>
 
       <% if show_record_subtitle || content_for(:page_actions_dropdown) %>
-        <%= dropdown id: 'page_actions_dropdown', class: 'h-100', portal: false do %>
-          <%= dropdown_toggle id: 'more-actions-link', class: 'btn-light h-100 p-2' do %>
+        <%= dropdown id: 'page_actions_dropdown', portal: false do %>
+          <%= dropdown_toggle id: 'more-actions-link', class: 'btn-light h-[35px] px-2' do %>
             <%= icon 'dots-vertical', class: 'mr-0' %>
           <% end %>
           <%= dropdown_menu id: 'page_actions_dropdown_menu' do %>
@@ -61,7 +61,7 @@
 
               <% if defined?(object_url) && %w[show edit].include?(action_name) && record.respond_to?(:can_be_deleted?) && record.can_be_deleted? && can?(:destroy, record) %>
                 <div class="dropdown-divider"></div>
-                <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), object_url, class: 'dropdown-item btn-danger', data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure) } %>
+                <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), object_url, class: 'dropdown-item text-red-600 hover:bg-red-100', data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure) } %>
               <% end %>
             <% end %>
           <% end %>

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

@@ -1,4 +1,4 @@
-<dialog class="dialog" data-dialog-target="dialog" id="main-dialog">
+<%= dialog(id: 'main-dialog') do %>
   <%= turbo_frame_tag :dialog_alerts %>
   <%= turbo_frame_tag :dialog %>
-</dialog>
+<% end %>

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

@@ -1,4 +1,4 @@
-<dialog class="drawer" data-drawer-target="dialog" id="drawer-dialog">
+<%= drawer(id: 'drawer-dialog') do %>
   <%= turbo_frame_tag :drawer_alerts %>
   <%= turbo_frame_tag :drawer %>
-</dialog>
+<% end %>

data/app/views/spree/admin/shared/_edit_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 %>
 
 <%= content_for :page_title do %>
@@ -7,7 +7,7 @@
 <% end %>
 
 <%= form_with model: [:admin, @object], url: object_url, scope: @resource.object_name, id: "edit_#{controller_name.singularize}_#{@object.id}", data: local_assigns[:data] || {} do |f| %>
-  <div class="row">
+  <div class="grid grid-cols-12 gap-6">
     <div class="<%= col_class %>">
       <%= render 'spree/admin/shared/error_messages', target: @object %>
       <%= render 'form', f: f %>

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

@@ -0,0 +1,13 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= form_with model: [:admin, @object], url: object_url, scope: @resource.object_name, id: "edit_#{controller_name.singularize}_#{@object.id}", data: local_assigns[:data] || {} do |f| %>
+    <%= drawer_header(local_assigns[:title] || Spree.t(:edit)) %>
+    <div class="drawer-body">
+      <%= render 'spree/admin/shared/error_messages', target: @object %>
+      <%= render 'form', f: f %>
+    </div>
+    <div class="drawer-footer">
+      <%= turbo_save_button_tag %>
+      <%= drawer_discard_button %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -5,7 +5,7 @@
     <p>
       <strong><%= Spree.t(:errors_prohibited_this_record_from_being_saved, count: target.errors.size) %>:</strong><br>
     </p>
-    <ul class="list-unstyled mb-0">
+    <ul class="list-none p-0 mb-0">
       <% if only_for.any? %>
         <% only_for.each do |attribute_name| %>
           <% target.errors.full_messages_for(attribute_name).each do |msg| %>

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

@@ -1,3 +1,3 @@
-<dialog class="dialog" data-export-dialog-target="dialog" id="export-dialog">
+<%= dialog(id: 'export-dialog', controller_name: 'export-dialog') do %>
   <%= turbo_frame_tag :export_dialog, src: spree.new_admin_export_path(export: { search_params: params[:q]&.to_json, type: export_type }) %>
-</dialog>
+<% end %>

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

@@ -1,3 +1,3 @@
 <template data-filters-target="badgeTemplate">
-  <span class="badge py-0 pl-2 pr-0 bg-light text-dark d-flex-inline align-items-center mb-0">LABEL<a href="DELETE_URL" class="btn-close ml-2" title="<%= Spree.t('actions.remove') %>"></a></span>
+  <span class="badge py-0 pl-2 pr-0 bg-gray-25 text-gray-900 flex-inline items-center mb-0">LABEL<a href="DELETE_URL" class="btn-close ml-2" title="<%= Spree.t('actions.remove') %>"></a></span>
 </template>

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

@@ -1,5 +1,5 @@
 <button
-  class="btn btn-light d-flex align-items-center"
+  class="btn btn-light flex items-center"
   type="button"
   data-action="dropdown#toggle click@window->dropdown#hide"
 >

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

@@ -2,14 +2,7 @@
 <% 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" id="filters-search-bar">
-  <%= 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 class="form-input flex items-center py-0 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-blue-500 grow max-lg:max-w-[300px] mr-auto h-[2.125rem] max-lg:mb-4 transition-all duration-100 ease-in-out" id="filters-search-bar">
+  <%= icon "search", class: "mr-4 text-gray-600" %>
+  <%= search_field_tag "q[#{param}]", params.dig(:q, param), class: "outline-none border-0 h-full focus:border-0 focus:ring-0 p-0 text-base w-full", placeholder: placeholder, data: { filters_target: :input, badge_name: badge_name } %>
 </div>

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

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

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

@@ -1,16 +1,16 @@
 <% growth_rate ||= 0 %>
 
-<div class="d-flex">
+<div class="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' %>
+    <span class="text-green-700">
+      <%= icon 'arrow-up', class: 'mr-1 text-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' %>
+      <%= icon 'arrow-down', class: 'mr-1 text-base' %>
       <%= number_to_percentage(growth_rate.abs, strip_insignificant_zeros: true) %>
     </span>
   <% end %>