spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -1,16 +1,16 @@
 <% content_for(:title, Spree.t(:login)) %>
 
-<h1 class="mb-3 font-weight-light">Welcome back</h1>
+<h1 class="mb-4 font-light">Welcome back</h1>
 <%= form_for resource, as: resource_name, url: session_path(resource_name), data: { controller: 'enable-button', turbo: false } do |f| %>
-  <div class="form-group mb-3">
+  <div class="form-group mb-4">
     <%= f.label :email, Spree.t(:email), required: true, class: 'form-label' %>
-    <%= f.email_field :email, required: true, class: 'form-control form-control-lg rounded-sm', placeholder: 'steve@getvendo.com', data: { enable_button_target: :input }, autocomplete: :email, autofocus: true %>
+    <%= f.email_field :email, required: true, class: 'form-input form-input-lg', placeholder: 'steve@getvendo.com', data: { enable_button_target: :input }, autocomplete: :email, autofocus: true %>
   </div>
-  <div class="form-group mb-3">
+  <div class="form-group mb-4">
     <%= f.label :password, Spree.t(:password), required: true, class: 'form-label' %>
-    <%= f.password_field :password, required: true, class: 'form-control form-control-lg rounded-sm', placeholder: '********', autocomplete: 'current-password' %>
+    <%= f.password_field :password, required: true, class: 'form-input form-input-lg', placeholder: '********', autocomplete: 'current-password' %>
   </div>
   <%= render 'spree/admin/shared/devise/links', f: f %>
-  <%= turbo_save_button_tag Spree.t(:login), class: 'btn btn-primary btn-lg w-100' %>
+  <%= turbo_save_button_tag Spree.t(:login), class: 'btn btn-primary btn-lg w-full' %>
 <% end %>
 

data/app/views/spree/admin/users/_billing.html.erb

@@ -1,5 +1,5 @@
 <div class="card" id="user-bill-address" data-controller="reveal">
-  <div class="card-header d-flex align-items-center justify-content-between">
+  <div class="card-header flex items-center justify-between">
     <h5 class="card-title"><%= Spree.t(:billing_address) %></h5>
 
     <% if @user.billing_address.present? %>
@@ -22,7 +22,7 @@
     <% if @user.billing_address %>
       <div data-reveal-target="item">
         <% if @user.billing_address == @user.shipping_address %>
-          <div class="text-muted">
+          <div class="text-gray-600">
             <%= Spree.t(:same_as_shipping_address) %>
           </div>
         <% else %>
@@ -52,7 +52,7 @@
           <% end %>
         <% else %>
           <%= form_for [:admin, @user], as: :user, url: spree.admin_user_path(@user), method: :put, data: { controller: 'auto-submit' } do |f| %>
-            <div class="custom-control custom-radio mb-4">
+            <div class="custom-control custom-radio mb-6">
               <%= f.radio_button :bill_address_id, @user.ship_address_id,
                 checked: false,
                 id: 'user_bill_address_id',
@@ -69,7 +69,7 @@
       </div>
     <% else %>
       <%= turbo_frame_tag :new_address_billing do %>
-        <div class="text-center p-5 text-muted">
+        <div class="text-center p-12 text-gray-600">
           <%= Spree.t(:not_available) %>
         </div>
       <% end %>

data/app/views/spree/admin/users/_details.html.erb

@@ -1,53 +1,62 @@
-<div class="card mb-4" id="user-details">
-  <%= turbo_frame_tag :edit_user do %>
-    <div class="card-header d-flex align-items-center justify-content-between">
-      <h5 class="card-title">
-        <%= Spree.t(:details) %>
-      </h5>
-      <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_user_path(@user), class: 'btn btn-light btn-sm', data: { turbo_frame: :edit_user } %>
-    </div>
-    <div class="card-body p-0">    
-      <ul class="list-group list-group-flush">
-        <li class="list-group-item d-flex justify-content-between align-items-center">
+<div class="card" id="user-details">
+  <div class="card-header flex items-center justify-between">
+    <h5 class="card-title">
+      <%= Spree.t(:details) %>
+    </h5>
+    <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_user_path(@user),
+          class: 'btn btn-light btn-sm', data: { turbo_frame: :drawer, action: 'drawer#open' } %>
+  </div>
+  <div class="card-body p-0">
+    <ul class="list-group list-group-flush">
+      <% cache [spree_base_cache_key, @user] do %>
+        <li class="list-group-item flex justify-between items-center">
           <%= Spree.t(:email) %>
           <span>
             <%= @user.email %>
             <%= clipboard_component(@user.email) %>
           </span>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
+        <li class="list-group-item flex justify-between items-center">
           <%= Spree.t(:phone) %>
           <span>
             <%= @user.phone.presence || Spree.t(:not_available) %>
           </span>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
+        <li class="list-group-item flex justify-between items-center">
           <%= Spree.t(:name) %>
           <span>
             <%= customer_full_name(@user) %>
           </span>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
+        <li class="list-group-item flex justify-between items-center">
           <%= Spree.t(:email_marketing) %>
           <%= active_badge(@user.accepts_email_marketing?) %>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <%= Spree.t(:tags) %>
+        <li class="list-group-item flex justify-between items-center">
+          <%= Spree.t(:customer_groups) %>
           <span>
-            <% @user.tag_list.each do |tag| %>
-              <span class="tag small"><%= tag %></span>
+            <% @user.customer_groups.each do |group| %>
+              <%= link_to group.name, spree.admin_customer_group_path(group), class: 'inline-flex items-center text-blue-500 no-underline hover:text-blue-600 hover:bg-blue-50 p-1 rounded' %>
             <% end %>
           </span>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
+        <li class="list-group-item flex justify-between items-center">
           <%= Spree.t(:roles) %>
           <span>
-            <% @user.spree_roles.each do |role| %>
-              <span class="tag small"><%= role.name %></span>
+            <% @user.spree_roles.pluck(:name).each do |role_name| %>
+              <span class="badge badge-light"><%= role_name %></span>
+            <% end %>
+          </span>
+        </li>
+        <li class="list-group-item flex justify-between items-center">
+          <%= Spree.t(:tags) %>
+          <span>
+            <% @user.tag_list.each do |tag| %>
+              <span class="badge badge-light"><%= tag %></span>
             <% end %>
           </span>
         </li>
-      </ul>
-    </div>
-  <% end %>
-</div>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/views/spree/admin/users/_filters.html.erb

@@ -1,5 +1,5 @@
 <%= search_form_for [:admin, @search], url: spree.admin_users_url, class: "filter-wrap", data: {controller: "filters dialog"} 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: :multi_search, placeholder: Spree.t('admin.users.filters.search_placeholder') %>
 
       <%= render "spree/admin/shared/calendar_range_picker",
@@ -8,22 +8,22 @@
             date_from_value: params.dig(:q, :created_at_gt),
             date_to_value: params.dig(:q, :created_at_lt) %>
 
-      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+      <%= button_tag type: 'button', class: 'btn btn-light flex items-center', data: { action: 'dialog#open' } do %>
         <%= icon "adjustments", class: "mr-1" %>
         <%= Spree.t("admin.filters") %>
       <% end %>
     </div>
 
-  <dialog class="drawer" data-dialog-target="dialog" id="user-filters-drawer">
+  <%= drawer(id: 'user-filters-drawer', controller_name: 'dialog') do %>
     <%= drawer_header(Spree.t(:filter), 'dialog') %>
     <div class="drawer-body">
     <div class="form-group">
       <%= f.label :bill_address_firstname_i_cont_any, Spree.t(:first_name) %>
-      <%= f.text_field :bill_address_firstname_i_cont_any, class: "form-control", data: { filters_target: :input } %>
+      <%= f.text_field :bill_address_firstname_i_cont_any, class: "form-input", data: { filters_target: :input } %>
     </div>
     <div class="form-group">
       <%= f.label :bill_address_lastname_eq, Spree.t(:last_name) %>
-      <%= f.text_field :bill_address_lastname_eq, class: "form-control", data: { filters_target: :input } %>
+      <%= f.text_field :bill_address_lastname_eq, class: "form-input", data: { filters_target: :input } %>
     </div>
     <div class="form-group">
       <%= f.label :addresses_country_name_eq, Spree.t(:location) %>
@@ -31,7 +31,7 @@
       active_option: params.dig(:q, :addresses_country_name_eq),
       options: Spree::Country.all.to_tom_select_json,
       value_field: :name,
-      select_class: "w-100",
+      select_class: "w-full",
       select_data: {
         filters_target: "input",
       } %>
@@ -43,7 +43,7 @@
       options: user_tags_json_array,
       multiple: true,
       value_field: :name,
-      select_class: "w-100",
+      select_class: "w-full",
       select_data: {
         filters_target: "input",
       } %>
@@ -53,7 +53,7 @@
       <%= f.select :accepts_email_marketing_eq,
                 options_for_select([["Yes", true], ["No", false]], params.dig(:q, :accepts_email_marketing_eq)),
                 { include_blank: true },
-                { class: "custom-select", data: { filters_target: :input } } %>
+                { class: "form-select", data: { filters_target: :input } } %>
     </div>
     <div class="form-group">
       <%= f.label :spree_roles_name_in, Spree.t(:roles) %>
@@ -62,7 +62,7 @@
       options: user_roles_json_array,
       multiple: true,
       value_field: :name,
-      select_class: "w-100",
+      select_class: "w-full",
       select_data: {
         filters_target: "input",
       } %>
@@ -73,7 +73,7 @@
       <%= drawer_discard_button('dialog') %>
       <%= render 'spree/admin/shared/filter_submit' %>
     </div>
-  </dialog>
+  <% end %>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

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

@@ -1,5 +1,25 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-body">
-    <%= render 'spree/admin/users/form_fields', f: f %>  
+    <%= f.spree_email_field :email, required: true, autofocus: f.object.new_record? %>
+    <%= f.spree_text_field :first_name, required: true %>
+    <%= f.spree_text_field :last_name, required: true %>
+    <%= f.spree_text_field :phone %>
+    <div class="form-group">
+      <%= f.label :tag_list, Spree.t(:tags) %>
+      <%= tom_select_tag 'user[tag_list]', multiple: true, class: 'w-full', options: user_tags_json_array, active_option: @user.tag_list, value_field: :name, create: true %>
+    </div>
+    <% if current_store.customer_groups.any? %>
+      <%= f.spree_select :customer_group_ids,
+              options_from_collection_for_select(current_store.customer_groups, 'id', 'name', @user.customer_group_ids),
+              { prompt: false, label: Spree.t(:customer_groups), autocomplete: true },
+              { multiple: true } %>
+    <% end %>
+    <% if @user.class == Spree.admin_user_class && can?(:manage, Spree::Role) %>
+      <%= f.spree_select :spree_role_ids,
+              options_from_collection_for_select(Spree::Role.all, 'id', 'name', @user.spree_roles.pluck(:id)),
+              { prompt: false, label: Spree.t(:roles), autocomplete: true },
+              { multiple: true } %>
+    <% end %>
+    <%= f.spree_check_box :accepts_email_marketing %>
   </div>
-</div>
+</div>

data/app/views/spree/admin/users/_form_fields.html.erb

@@ -4,7 +4,7 @@
 <%= f.spree_text_field :phone %>
 <div class="form-group">
   <%= f.label :tag_list, Spree.t(:tags) %>
-  <%= tom_select_tag 'user[tag_list]', multiple: true, class: 'w-100', options: user_tags_json_array, active_option: @user.tag_list, value_field: :name, create: true %>
+  <%= tom_select_tag 'user[tag_list]', multiple: true, class: 'w-full', options: user_tags_json_array, active_option: @user.tag_list, value_field: :name, create: true %>
 </div>
 <% if @user.class == Spree.admin_user_class && can?(:manage, Spree::Role) %>
   <%= f.spree_select :spree_role_ids,

data/app/views/spree/admin/users/_last_order.html.erb

@@ -1,5 +1,5 @@
 <% if @last_order.present? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5 class="card-title">
         <%= Spree.t('admin.user.last_order_placed') %>
@@ -9,19 +9,19 @@
       <% cache spree_base_cache_scope.call(@last_order) do %>
         <ul class="list-group list-group-flush">
           <li class="list-group-item">
-            <div class="row">
-              <div class="col-lg-9">
+            <div class="grid grid-cols-12 gap-6">
+              <div class="col-span-12 lg:col-span-9">
                 <p class="mb-1">
-                  <%= link_to @last_order.number, spree.edit_admin_order_path(@last_order), class: 'font-weight-bold' %>
+                  <%= link_to @last_order.number, spree.edit_admin_order_path(@last_order), class: 'font-bold' %>
                   <%= order_payment_state(@last_order, class: 'ml-2') %>
                   <%= order_shipment_state(@last_order, class: 'ml-2') %>
                 </p>
-                <span class="text-muted" data-controller="tooltip">
+                <span class="text-gray-600" data-controller="tooltip">
                   <%= spree_time_ago(@last_order.completed_at) %>
                   <%= tooltip(spree_time(@last_order.completed_at)) %>
                 </span>
               </div>
-              <div class="col-lg-3 text-lg-right font-weight-bold">
+              <div class="col-span-12 lg:col-span-3 text-lg-right font-bold">
                 <%= @last_order.display_total %>
               </div>
             </div>

data/app/views/spree/admin/users/_last_order_line_item.html.erb

@@ -1,18 +1,18 @@
 <li class="list-group-item">
-  <div class="row">
-    <div class="col-8">
-      <%= link_to spree.edit_admin_product_path(line_item.product), class: 'd-flex text-decoration-none' do %>
-        <%= render 'spree/admin/shared/product_image', object: line_item.product %>
-        <span class="ml-3 text-dark">
+  <div class="grid grid-cols-12 gap-4">
+    <div class="col-span-8">
+      <%= link_to spree.edit_admin_product_path(line_item.variant), class: 'flex no-underline' do %>
+        <%= render 'spree/admin/shared/product_image', object: line_item.variant %>
+        <span class="ml-6 text-gray-900">
           <strong><%= line_item.name %></strong><br />
           <%= line_item.options_text %>
         </span>
       <% end %>
     </div>
-    <div class="col-2 text-lg-right">
+    <div class="col-span-2 text-lg-right">
       x <%= line_item.quantity %>
     </div>
-    <div class="col-2 text-lg-right">
+    <div class="col-span-2 text-lg-right">
       <%= line_item.display_total %>
     </div>
   </div>

data/app/views/spree/admin/users/_lifetime_stats.html.erb

@@ -1,65 +1,56 @@
-<div class="card mb-4">
-  <div class="card-body">
-    <div class="row">
-      <div class="col-lg-4">
-        <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
-          <span class="text-muted"><%= Spree.t('admin.amount_spent') %></span>
-          <span class="font-size-lg text-dark font-weight-bold mt-1">
+<% cache [spree_base_cache_key, @user, can?(:create, Spree::StoreCredit)], expires_in: 1.hour do %>
+  <div class="card mb-6">
+    <div class="card-body">
+      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+          <span class="text-sm text-gray-500"><%= Spree.t('admin.amount_spent') %></span>
+          <span class="text-lg text-gray-900 font-bold">
             <%= @user.display_lifetime_value %>
           </span>
         </div>
-      </div>
 
-      <div class="col-lg-4">
-        <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
-          <span class="text-muted"><%= Spree.t(:orders) %></span>
-          <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
+        <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+          <span class="text-sm text-gray-500"><%= Spree.t(:orders) %></span>
+          <span class="text-lg text-gray-900 font-bold">
             <%= @user.completed_orders.count %>
           </span>
         </div>
-      </div>
 
-      <div class="col-lg-4">
-        <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
-          <span class="text-muted"><%= Spree.t('admin.avg_order_value') %></span>
-          <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
+        <div class="flex flex-col mb-6 lg:mb-0 gap-2">
+          <span class="text-sm text-gray-500"><%= Spree.t('admin.avg_order_value') %></span>
+          <span class="text-lg text-gray-900 font-bold">
             <%= @user.display_average_order_value %>
           </span>
         </div>
-      </div>
-    </div>
-
-    <hr />
 
-    <div class="row">
-      <div class="col-lg-4">
-        <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
-          <span class="text-muted"><%= Spree.t(:store_credits) %></span>
-          <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
+        <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+          <span class="text-sm text-gray-500"><%= Spree.t(:store_credits) %></span>
+          <span class="text-lg text-gray-900 font-bold">
             <%= Spree::Money.new(@user.total_available_store_credit(current_currency, current_store), currency: current_currency) %>
           </span>
+          <% if can?(:create, Spree::StoreCredit) %>
+            <span>
+              <%= link_to_with_icon 'plus', Spree.t(:add_store_credit), spree.new_admin_user_store_credit_path(@user), class: 'btn btn-secondary btn-sm' %>
+            </span>
+          <% end %>
         </div>
-      </div>
 
-      <div class="col-lg-4">
-        <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
-          <span class="text-muted"><%= Spree.t(:created_at) %></span>
-          <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
+        <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+          <span class="text-sm text-gray-500"><%= Spree.t(:created_at) %></span>
+          <span class="text-lg text-gray-900 font-bold">
             <%= spree_time(@user.created_at) %>
           </span>
         </div>
-      </div>
 
-      <% if @visits_count.present? %>
-        <div class="col-lg-4">
-          <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
-            <span class="text-muted"><%= Spree.t(:visits) %></span>
-            <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
+        <% if @visits_count.present? %>
+          <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+            <span class="text-sm text-gray-500"><%= Spree.t(:visits) %></span>
+            <span class="text-lg text-gray-900 font-bold">
               <%= @visits_count %>
             </span>
           </div>
-        </div>
-      <% end %>
+        <% end %>
+      </div>
     </div>
   </div>
-</div>
+<% end %>

data/app/views/spree/admin/users/_search_result.html.erb

@@ -0,0 +1,13 @@
+<div class="search-picker__option" data-action="click->search-picker#toggle">
+  <%= check_box_tag "ids[]", user.id, false, id: "ids_#{user.id}", data: { action: 'search-picker#toggle', search_picker_target: "checkbox" } %>
+  <label for="ids_<%= user.id %>">
+    <%= render_avatar(user, width: 40, height: 40) %>
+    <div class="ml-4">
+      <% if customer_full_name(user).present? %>
+        <span class="font-medium"><%= highlight(customer_full_name(user), params[:q]) %></span>
+        <br>
+      <% end %>
+      <span class="text-gray-600 text-sm"><%= highlight(user.email, params[:q]) %></span>
+    </div>
+  </label>
+</div>

data/app/views/spree/admin/users/_search_results.html.erb

@@ -0,0 +1,9 @@
+<div id="users_search_results" class="search-results">
+  <% if users.any? %>
+    <%= render collection: users, partial: 'spree/admin/users/search_result', as: :user %>
+  <% else %>
+    <p class="text-gray-600 text-center py-12">
+      <%= Spree.t(:no_customers_found) %>
+    </p>
+  <% end %>
+</div>

data/app/views/spree/admin/users/_shipping.html.erb

@@ -1,5 +1,5 @@
-<div class="card mb-4" id="user-ship-address">
-  <div class="card-header d-flex align-items-center justify-content-between">
+<div class="card" id="user-ship-address">
+  <div class="card-header flex items-center justify-between">
     <h5 class="card-title"><%= Spree.t(:shipping_address) %></h5>
 
     <% if @user.shipping_address.present? %>
@@ -18,13 +18,13 @@
     <% if @user.shipping_address %>
       <%= turbo_frame_tag :edit_address_shipping do %>
         <%= render 'spree/admin/shared/map', map_object: @user.ship_address, label: customer_full_name(@user) || @user.email %>
-        <div class="mt-3">
+        <div class="mt-6">
           <%= render 'spree/admin/shared/address', address: @user.shipping_address %>
         </div>
       <% end %>
     <% else %>
       <%= turbo_frame_tag :new_address_shipping do %>
-        <div class="text-center p-5 text-muted">
+        <div class="text-center p-12 text-gray-600">
           <%= Spree.t(:not_available) %>
         </div>
       <% end %>

data/app/views/spree/admin/users/_tabs.html.erb

@@ -1,5 +1,5 @@
 <div data-controller="tabs">
-  <ul class="nav nav-pills mb-3" role="tablist">
+  <ul class="nav nav-pills mb-4" role="tablist">
     <% if spree.respond_to?(:admin_user_visits_path) %>
       <li class="nav-item" role="presentation">
         <a class="nav-link active" id="pills-overview-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-overview" aria-selected="true">Timeline</a>
@@ -29,41 +29,35 @@
   </ul>
 
   <% if spree.respond_to?(:admin_user_visits_path) %>
-    <div data-tabs-target="panel" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview" class="pt-3 animate__animated animate__fadeIn">
+    <div data-tabs-target="panel" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview" class="pt-4 animate-fade-in">
       <%= turbo_frame_tag :user_visits, src: spree.admin_user_visits_path(@user), target: '_top' %>
     </div>
   <% end %>
 
   <% if can?(:read, Spree::Order) %>
-    <div data-tabs-target="panel" id="pills-orders2" role="tabpanel" aria-labelledby="pills-orders2" class="animate__animated animate__fadeIn" <%= 'hidden' if spree.respond_to?(:admin_user_visits_path) %>>
-      <div class="card-lg">
-        <%= turbo_frame_tag :orders_list, src: spree.admin_user_orders_path(@user, frame_name: :orders_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
-          <%= render 'spree/admin/shared/spinner' %>
-        <% end %>
-      </div>
+    <div data-tabs-target="panel" id="pills-orders2" role="tabpanel" aria-labelledby="pills-orders2" class="animate-fade-in" <%= 'hidden' if spree.respond_to?(:admin_user_visits_path) %>>
+      <%= turbo_frame_tag :orders, src: spree.admin_user_orders_path(@user), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
+        <%= render 'spree/admin/shared/spinner' %>
+      <% end %>
     </div>
 
-    <div data-tabs-target="panel" id="pills-checkouts" role="tabpanel" aria-labelledby="pills-checkouts" hidden class="animate__animated animate__fadeIn">
-      <div class="card-lg">
-        <%= turbo_frame_tag :orders_list, src: spree.admin_user_checkouts_path(@user, frame_name: :orders_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
-          <%= render 'spree/admin/shared/spinner' %>
-        <% end %>
-      </div>
+    <div data-tabs-target="panel" id="pills-checkouts" role="tabpanel" aria-labelledby="pills-checkouts" hidden class="animate-fade-in">
+      <%= turbo_frame_tag :checkouts, src: spree.admin_user_checkouts_path(@user), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
+        <%= render 'spree/admin/shared/spinner' %>
+      <% end %>
     </div>
   <% end %>
 
   <% if spree.respond_to?(:admin_user_gift_cards_path) && can?(:read, Spree::GiftCard) %>
-    <div data-tabs-target="panel" id="pills-gift-cards" role="tabpanel" aria-labelledby="pills-gift-cards" hidden class="animate__animated animate__fadeIn">
-      <div class="card-lg">
-        <%= turbo_frame_tag :gift_cards_list, src: spree.admin_user_gift_cards_path(@user, frame_name: :gift_cards_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
-          <%= render 'spree/admin/shared/spinner' %>
-        <% end %>
-      </div>
+    <div data-tabs-target="panel" id="pills-gift-cards" role="tabpanel" aria-labelledby="pills-gift-cards" hidden class="animate-fade-in">
+      <%= turbo_frame_tag :gift_cards, src: spree.admin_user_gift_cards_path(@user), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
+        <%= render 'spree/admin/shared/spinner' %>
+      <% end %>
     </div>
   <% end %>
 
   <% if can?(:read, Spree::StoreCredit) %>
-    <div data-tabs-target="panel" id="pills-store-credits" role="tabpanel" aria-labelledby="pills-store-credits" hidden class="animate__animated animate__fadeIn">
+    <div data-tabs-target="panel" id="pills-store-credits" role="tabpanel" aria-labelledby="pills-store-credits" hidden class="animate-fade-in">
       <div class="card-lg">
         <%= turbo_frame_tag :store_credits_list, src: spree.admin_user_store_credits_path(@user, frame_name: :store_credits_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
           <%= render 'spree/admin/shared/spinner' %>

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

@@ -2,17 +2,17 @@
   <td class="pr-0 w-5">
     <%= bulk_operations_checkbox(user) %>
   </td>
-  <td class='w-50 text-nowrap py-0 pl-1 pr-0'>
+  <td class='w-1/2 whitespace-nowrap py-0 pl-1 pr-0'>
     <%= render 'spree/admin/shared/user', user: user %>
   </td>
   <td class="cursor-pointer" data-action="click->row-link#openLink">
     <%= active_badge(user.accepts_email_marketing?) %>
   </td>
-  <td class="w-25 cursor-pointer" data-action="click->row-link#openLink">
+  <td class="w-1/4 cursor-pointer" data-action="click->row-link#openLink">
     <%= customer_location_flag(user) %>
     <%= customer_location(user) %>
   </td>
-  <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.completed_orders_for_store(current_store).count %></td>
-  <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.display_amount_spent_in(current_currency) %></td>
-  <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= spree_time(user.created_at) %></td>
+  <td class='w-10 whitespace-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.completed_orders_for_store(current_store).count %></td>
+  <td class='w-10 whitespace-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.display_amount_spent_in(current_currency) %></td>
+  <td class='w-10 whitespace-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= spree_time(user.created_at) %></td>
 </tr>

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

@@ -1,17 +1 @@
-<%= turbo_frame_tag :edit_user do %>
-  <div class="card-header d-flex align-items-center justify-content-between">
-    <h5 class="card-title">
-      <%= Spree.t(:details) %>
-    </h5>
-    <%= link_to Spree.t('actions.discard'), spree.admin_user_path(@user), class: 'btn btn-light btn-sm' %>
-  </div>
-  <%= form_for [:admin, @user], as: :user, url: spree.admin_user_path(@user), method: :put do |f| %>
-    <div class="card-body pb-0">    
-      <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @user } %>
-      <%= render 'form_fields', f: f %>
-    </div>
-    <div class="card-footer">
-      <%= render 'spree/admin/shared/edit_resource_links', f: f, turbo_frame: '_top' %>
-    </div>
-  <% end %>
-<% end%>
+<%= render 'spree/admin/shared/edit_resource_in_drawer' %>