spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -10,62 +10,4 @@
 
 <%= render_admin_partials(:users_header_partials) %>
 
-<div class="card-lg">
-  <%= turbo_frame_tag "customers", autoscroll: true, data: { autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
-    <%= render 'spree/admin/shared/export_modal', export_type: Spree::Exports::Customers %>
-    <%= render "spree/admin/users/filters" %>
-
-    <% if @collection.any? %>
-      <div data-controller="bulk-operation bulk-dialog" data-action="keydown.esc->bulk-operation#cancel" tabindex="0">
-        <%= form_tag spree.admin_users_path, data: { 'bulk-operation-target': 'form' } do %>
-          <%= render 'spree/admin/shared/bulk_modal' %>
-          <div id="bulk-panel" class="d-none" data-bulk-operation-target="panel">
-            <div class="bulk-panel-container">
-              <%= bulk_operations_counter %>
-
-              <% if can?(:manage_tags, Spree.user_class) %>
-                <%= bulk_action_link(
-                  Spree.t("admin.bulk_ops.users.title.add_tags"),
-                  spree.bulk_modal_admin_users_path(kind: :add_tags),
-                  icon: "tag-plus",
-                  url: spree.bulk_add_tags_admin_users_path
-                ) %>
-                <%= bulk_action_link(
-                  Spree.t("admin.bulk_ops.users.title.remove_tags"),
-                  spree.bulk_modal_admin_users_path(kind: :remove_tags),
-                  icon: "tag-minus",
-                  url: spree.bulk_remove_tags_admin_users_path
-                ) %>
-              <% end %>
-              <%= bulk_operations_close_button %>
-            </div>
-          </div>
-
-          <div class="table-responsive">
-            <table class="table" id="listing_users">
-              <thead>
-                <tr data-hook="admin_users_index_headers">
-                  <th scope="col" class="pr-0 w-5">
-                    <%= bulk_operations_select_all_checkbox %>
-                  </th>
-                  <th scope="col"><%= Spree.t(:name) %></th>
-                  <th scope="col"><%= Spree.t(:email_marketing) %></th>
-                  <th scope="col"><%= Spree.t(:location) %></th>
-                  <th scope="col"><%= Spree.t('admin.num_orders') %></th>
-                  <th scope="col"><%= Spree.t('admin.amount_spent') %></th>
-                  <th scope="col"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
-                </tr>
-              </thead>
-              <tbody>
-                <%= render collection: @collection, partial: "spree/admin/users/user", cached: spree_base_cache_scope %>
-              </tbody>
-            </table>
-          </div>
-        <% end %>
-      </div>
-      <%= render "spree/admin/shared/index_table_options", collection: @collection %>
-    <% else %>
-      <%= render "spree/admin/shared/no_resource_found" %>
-    <% end %>
-  <% end %>
-</div>
+<%= render_table @collection, :users, bulk_operations: true, export_type: Spree::Exports::Customers %>

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

@@ -1 +1 @@
-<%= render 'spree/admin/shared/new_resource' %>
+<%= render 'spree/admin/shared/new_resource' %>

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

@@ -1,7 +1,7 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.admin_users_path, @user %>
   <%= customer_full_name(@user) || @user.email %>
-  <span class="font-size-base font-weight-normal">
+  <span class="text-base font-normal">
     <%= customer_location_flag(@user) %>
     <%= customer_location(@user) %>
   </span>
@@ -17,17 +17,18 @@
   <% end %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-8 mb-4">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8 mb-6">
     <%= render 'spree/admin/users/lifetime_stats' %>
     <%= render 'spree/admin/users/last_order' %>
 
     <%= render 'spree/admin/users/tabs' %>
   </div>
-  <div class="col-lg-4">
+  <div class="col-span-12 lg:col-span-4 flex flex-col gap-6">
     <%= render 'spree/admin/users/details' %>
     <%= render 'spree/admin/users/shipping' %>
     <%= render 'spree/admin/users/billing' %>
+    <%= render 'spree/admin/shared/internal_note', notable: @user, form_url: spree.admin_user_path(@user) %>
   </div>
 </div>
 

data/app/views/spree/admin/users/update.turbo_stream.erb

@@ -0,0 +1,24 @@
+<% if @user.valid? %>
+  <%= turbo_close_drawer %>
+  <%= turbo_render_alerts %>
+
+  <%= turbo_stream.replace 'user-details' do %>
+    <%= render 'spree/admin/users/details' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'user-ship-address' do %>
+    <%= render 'spree/admin/users/shipping' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'user-bill-address' do %>
+    <%= render 'spree/admin/users/billing' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'internal_note' do %>
+    <%= render 'spree/admin/shared/internal_note', notable: @user, form_url: spree.admin_user_path(@user) %>
+  <% end %>
+<% else %>
+  <%= turbo_stream.replace :drawer do %>
+    <%= render 'spree/admin/shared/edit_resource_in_drawer' %>
+  <% end %>
+<% end %>

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

@@ -1,14 +1,14 @@
 <div class="search-picker__option <% if variant.purchasable? || params[:all] %>cursor-pointer<% else %>opacity-50 disabled<% end %>" data-action="click->search-picker#toggle">
   <%= radio_button_tag "#{params[:param_name]}[variant_id]", variant.id, false, class: "custom-control-input", id: "ids_#{variant.id}", data: { action: 'search-picker#toggle', search_picker_target: "checkbox" }, disabled: !params[:all] && !variant.purchasable? %>
   <label for="ids_<%= variant.id %>" class="pr-2 <% unless variant.purchasable? %>cursor-not-allowed<% end %>">
-    <div class="w-70 d-flex align-items-center">
+    <div class="w-70 flex items-center">
       <div class="variant-image">
         <%= render 'spree/admin/shared/product_image', object: variant %>
       </div>
-      <div class="ml-3 variant-info">
+      <div class="ml-6 variant-info">
         <strong class="variant-name"><%= highlight(variant.name, params.dig(:q)) %></strong>
         <% if variant.options_text.present? %>
-          <p class="text-muted my-1 font-size-sm">
+          <p class="text-gray-600 my-1 text-sm">
             <%= variant.options_text %>
           </p>
         <% end %>
@@ -18,7 +18,7 @@
       <% if params[:stock_location_id].present? %>
         <% stock_item = variant.stock_items.find { |si| si.stock_location_id == params[:stock_location_id] } %>
         <span><%= stock_item&.count_on_hand || 0 %> at location</span>
-        <% if stock_item&.backorderable? %> <span class="text-muted"><%= Spree.t(:backorderable) %></span><% end %>
+        <% if stock_item&.backorderable? %> <span class="text-gray-600"><%= Spree.t(:backorderable) %></span><% end %>
       <% else %>
         <%= display_inventory(variant) %>
       <% end %>

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

@@ -2,7 +2,7 @@
   <% if variants.any? %>
     <%= render collection: variants, partial: 'spree/admin/variants/search_result', as: :variant %>
   <% else %>
-    <p class="text-muted text-center py-5">
+    <p class="text-gray-600 text-center py-12">
       <%= Spree.t('admin.variants.search_results.no_variants') %>
     </p>
   <% end %>

data/app/views/spree/admin/variants/_variant.html.erb

@@ -5,12 +5,12 @@
     <% variant_url = spree.edit_admin_product_variant_path(variant.product, variant) %>
   <% end %>
 
-  <%= link_to variant_url, id: spree_dom_id(variant), data: { turbo_permanent: true, turbo_frame: :_top }, class: 'd-flex align-items-center justify-content-start text-decoration-none' do %>
+  <%= link_to variant_url, id: spree_dom_id(variant), data: { turbo_permanent: true, turbo_frame: :_top }, class: 'flex items-center justify-start no-underline' do %>
     <%= render "spree/admin/shared/product_image", object: variant %>
-    <div class="ml-3">
+    <div class="ml-6">
       <strong><%= variant.name %></strong>
       <% if !variant.is_master? && variant.options_text.present? %>
-        <p class="text-muted my-1 font-size-sm">
+        <p class="text-gray-600 my-1 text-sm">
           <%= variant.options_text %>
         </p>
       <% end %>

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

@@ -4,8 +4,8 @@
 <% end %>
 
 <%= form_for [:admin, @product, @variant] do |f| %>
-  <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 partial: 'spree/admin/shared/error_messages', locals: { target: @variant } %>
       <%= render 'spree/admin/variants/form/basic', f: f %>
       <%= render 'spree/admin/variants/form/pricing', f: f %>

data/app/views/spree/admin/variants/form/_basic.html.erb

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:settings) %>

data/app/views/spree/admin/variants/form/_dimensions.html.erb

@@ -1,19 +1,14 @@
-<div class="row">
-  <div class="col-lg-6">
-    <%= f.spree_text_field :width, value: number_with_precision(f.object.width, precision: 2) %>
-    <%= f.spree_text_field :height, value: number_with_precision(f.object.height, precision: 2) %>
-  </div>
-
-  <div class="col-lg-6">
-    <%= f.spree_text_field :depth, value: number_with_precision(f.object.depth, precision: 2) %>
-    <%= f.spree_select :dimensions_unit, options_for_select(dimension_units(current_store), f.object.dimensions_unit), { include_blank: false, label: Spree.t(:unit) } %>
-  </div>
+<div class="grid grid-cols-2 gap-3">
+  <%= f.spree_text_field :width, value: number_with_precision(f.object.width, precision: 2) %>
+  <%= f.spree_text_field :height, value: number_with_precision(f.object.height, precision: 2) %>
+  <%= f.spree_text_field :depth, value: number_with_precision(f.object.depth, precision: 2) %>
+  <%= f.spree_select :dimensions_unit, options_for_select(dimension_units(current_store), f.object.dimensions_unit), { include_blank: false, label: Spree.t(:unit) } %>
 </div>
 
 <div class="form-group">
   <%= f.label :weight %>
-  <div class="form-control d-flex align-items-center py-0 focus-border focus-shadow">
-    <%= f.text_field :weight, value: number_with_precision(f.object.weight, precision: 2), class: 'form-control-plaintext pl-0' %>
-    <%= f.select :weight_unit, options_for_select(weight_units(current_store), f.object.weight_unit), { include_blank: false }, { class: 'form-control-plaintext w-auto border-left' } %>
+  <div class="input-group">
+    <%= f.text_field :weight, value: number_with_precision(f.object.weight, precision: 2), class: 'border-0 focus:ring-0 focus:outline-none grow rounded-lg text-base' %>
+    <%= f.select :weight_unit, options_for_select(weight_units(current_store), f.object.weight_unit), { include_blank: false }, { class: 'border-0 focus:ring-0 focus:outline-none rounded-lg text-base' } %>
   </div>
 </div>

data/app/views/spree/admin/variants/form/_inventory.html.erb

@@ -1,15 +1,15 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:inventory) %>
     </h5>
   </div>
-  <div class="card-body p-0" data-controller="reveal" data-reveal-hidden-class="d-none">
-    <div class="mb-4 m-3">
+  <div class="card-body p-0" data-controller="reveal" data-reveal-hidden-class="hidden!">
+    <div class="p-3">
       <%= f.spree_check_box :track_inventory, data: { action: 'change->reveal#toggle' } %>
     </div>
 
-    <table class="table <%= 'd-none' unless f.object.track_inventory? %>" data-reveal-target="item">
+    <table class="table <%= 'hidden!' unless f.object.track_inventory? %>" data-reveal-target="item">
       <thead>
         <tr>
           <th scope="col"><%= Spree.t(:stock_location) %></th>
@@ -30,19 +30,16 @@
               <%= link_to stock_item_form.object.stock_location.name, spree.edit_admin_stock_location_path(stock_item_form.object.stock_location) %>
             </td>
             <td class="w-20">
-              <%= stock_item_form.number_field :count_on_hand, min: 0, class: 'form-control', disabled: !can?(:manage, stock_item_form.object) %>
+              <%= stock_item_form.spree_number_field :count_on_hand, min: 0, disabled: !can?(:manage, stock_item_form.object), label: false %>
             </td>
             <td class="w-40">
-              <div class="custom-control custom-checkbox">
-                <%= stock_item_form.check_box :backorderable, class: 'custom-control-input', disabled: !can?(:manage, stock_item_form.object) %>
-                <%= stock_item_form.label :backorderable, Spree.t(:continue_selling_when_out_of_stock),class: 'custom-control-label' %>
-              </div>
+              <%= stock_item_form.spree_check_box :backorderable, disabled: !can?(:manage, stock_item_form.object), label: Spree.t(:continue_selling_when_out_of_stock) %>
             </td>
           </tr>
         <% end %>
       </tbody>
     </table>
-    <div class="card-footer border-top text-center bg-light text-muted">
+    <div class="card-footer border-t text-center bg-gray-25 text-gray-600 py-2 text-sm">
       <%= Spree.t('admin.variants_form.stock_locations_link', link: spree.admin_stock_locations_path).html_safe %>
     </div>
   </div>

data/app/views/spree/admin/variants/form/_pricing.html.erb

@@ -1,5 +1,5 @@
-<div class="card mb-4" data-product-form-target="pricesForm">
-  <div class="card-header d-flex align-items-center justify-content-between">
+<div class="card mb-6" data-product-form-target="pricesForm">
+  <div class="card-header flex items-center justify-between">
     <h5 class="card-title">
       <%= Spree.t(:pricing) %>
     </h5>
@@ -23,22 +23,23 @@
         </tr>
       </thead>
       <tbody>
-        <%= f.fields_for :prices do |price_form| %>
+        <% base_prices = f.object.prices.select { |p| p.price_list_id.nil? } %>
+        <%= f.fields_for :prices, base_prices do |price_form| %>
           <%= price_form.hidden_field :id if price_form.object.persisted? %>
           <%= price_form.hidden_field :currency %>
           <tr>
             <td><%= price_form.object.currency %></td>
             <td>
-              <div class="form-control align-items-center py-0 focus-shadow focus-border mr-2 price-input-container d-flex">
-                <%= price_form.text_field :amount, class: 'form-control-plaintext px-0', disabled: !can?(:manage, price_form.object), value: price_form.object.amount.present? ? Spree::Money.new(price_form.object.amount, currency: price_form.object.currency, symbol: '').to_s : '' %>
-                <span><%= currency_symbol(price_form.object.currency) %></span>
-              </div>
+              <%= price_form.spree_money_field :amount,
+                                               disabled: !can?(:manage, price_form.object),
+                                               currency: price_form.object.currency,
+                                               label: false %>
             </td>
             <td>
-              <div class="form-control align-items-center py-0 focus-shadow focus-border mr-2 price-input-container d-flex">
-                <%= price_form.text_field :compare_at_amount, class: 'form-control-plaintext px-0', disabled: !can?(:manage, price_form.object), value: price_form.object.compare_at_amount.present? ? Spree::Money.new(price_form.object.compare_at_amount, currency: price_form.object.currency, symbol: '').to_s : '' %>
-                <span><%= currency_symbol(price_form.object.currency) %></span>
-              </div>
+              <%= price_form.spree_money_field :compare_at_amount,
+                                               disabled: !can?(:manage, price_form.object),
+                                               currency: price_form.object.currency,
+                                               label: false %>
             </td>
           </tr>
         <% end %>
@@ -46,4 +47,3 @@
     </table>
   </div>
 </div>
-

data/app/views/spree/admin/webhook_deliveries/_table_header.html.erb

@@ -0,0 +1,8 @@
+<tr>
+  <th scope="col"><%= sort_link(@search, :event_name, Spree.t('admin.webhook_deliveries.event')) %></th>
+  <th scope="col"><%= sort_link(@search, :success, Spree.t(:status)) %></th>
+  <th scope="col"><%= sort_link(@search, :delivered_at, Spree.t('admin.webhook_deliveries.delivered_at')) %></th>
+  <th scope="col"><%= sort_link(@search, :execution_time, Spree.t('admin.webhook_deliveries.execution_time')) %></th>
+  <th scope="col"><%= sort_link(@search, :response_code, Spree.t('admin.webhook_deliveries.response_code')) %></th>
+  <th scope="col"><%= Spree.t(:details) %></th>
+</tr>

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

@@ -0,0 +1,22 @@
+<tr id="<%= spree_dom_id webhook_delivery %>">
+  <td class="w-40">
+    <code><%= webhook_delivery.event_name %></code>
+  </td>
+  <td class="text-center w-10">
+    <%= webhook_delivery_status_badge(webhook_delivery) %>
+  </td>
+  <td class="w-20">
+    <%= webhook_delivery.delivered_at ? spree_time(webhook_delivery.delivered_at) : '-' %>
+  </td>
+  <td class="w-20">
+    <%= webhook_delivery.execution_time ? "#{webhook_delivery.execution_time}ms" : '-' %>
+  </td>
+  <td class="w-20">
+    <code><%= webhook_delivery.response_code || '-' %></code>
+  </td>
+  <td class="w-20">
+    <%= link_to icon('eye'), spree.admin_webhook_endpoint_webhook_delivery_path(webhook_delivery.webhook_endpoint, webhook_delivery), 
+            class: 'btn btn-sm btn-light px-2', 
+            data: { action: 'drawer#open', turbo_frame: :drawer } %>
+  </td>
+</tr>

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

@@ -0,0 +1 @@
+<%= render_table @collection, :webhook_deliveries %>

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

@@ -0,0 +1,61 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= drawer_header(Spree.t(:details)) %>
+  <div class="drawer-body flex flex-col gap-6">
+
+    <ul class="list-group">
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600"><%= Spree.t(:event) %></span> 
+        <span><code><%= @webhook_delivery.event_name %></code></span>
+      </li>
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600"><%= Spree.t(:status) %></span> 
+        <span><%= webhook_delivery_status_badge(@webhook_delivery) %></span>
+      </li>
+
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600"><%= Spree.t(:url) %></span> 
+        <span><%= external_link_to(@webhook_delivery.url, @webhook_delivery.url) %></span>
+      </li>
+      <% if @webhook_delivery.delivered_at.present? %>
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600"><%= Spree.t('admin.webhook_deliveries.delivered_at') %></span> 
+          
+          <span><%= l(@webhook_delivery.delivered_at, format: :long) %></span>
+        </li>
+      <% end %>
+      <% if @webhook_delivery.response_code.present? %>
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600"><%= Spree.t(:response_code) %></span> 
+          <code><%= @webhook_delivery.response_code %></code>
+        </li>
+      <% end %>
+      <% if @webhook_delivery.execution_time.present? %>
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600"><%= Spree.t('admin.webhook_deliveries.execution_time') %></span> 
+          <code><%= @webhook_delivery.execution_time %>ms</code>
+        </li>
+      <% end %>
+      <% if @webhook_delivery.error_type.present? %>
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600"><%= Spree.t('admin.webhook_deliveries.error_type') %></span> 
+          <code><%= @webhook_delivery.error_type %></code>
+        </li>
+      <% end %>
+      <% if @webhook_delivery.request_errors.present? %>
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600"><%= Spree.t('admin.webhook_deliveries.request_errors') %></span>
+          <code><%= @webhook_delivery.request_errors %></code>
+        </li>
+      <% end %>
+    </ul>
+
+    <h5 class="text-lg font-bold"><%= Spree.t('admin.webhook_deliveries.request_payload') %></h5>
+    <%= code_block JSON.pretty_generate(@webhook_delivery.payload) %>
+
+    <% if @webhook_delivery.response_body.present? %>
+      <h5 class="text-lg font-bold"><%= Spree.t('admin.webhook_deliveries.response_body') %></h5>
+      <%= code_block @webhook_delivery.response_body.truncate(2000) %>
+    <% end %>
+
+  </div>
+<% end %>

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

@@ -0,0 +1,50 @@
+<div class="card mb-6" id="<%= spree_dom_id(@webhook_endpoint) %>_details">
+  <div class="card-header flex justify-between">
+    <h5 class="card-title">
+      <%= Spree.t(:details) %>
+    </h5>
+    <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_webhook_endpoint_path(@webhook_endpoint), 
+          class: 'btn btn-sm btn-light', data: { turbo_frame: :drawer, action: 'drawer#open' } %>
+  </div>
+  <div class="card-body p-0">
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600">
+          <%= Spree.t(:active) %>
+        </span>
+        <span>
+          <%= active_badge(@webhook_endpoint.active?) %>
+        </span>
+      </li>
+
+      <li class="list-group-item flex justify-between items-top gap-10">
+        <span class="text-gray-600">
+          <%= Spree.t('admin.webhook_endpoints.event_subscriptions') %>
+        </span>
+        <span class="flex gap-2 flex-wrap justify-end">
+          <% @webhook_endpoint.subscriptions.each do |subscription| %>
+            <span class="badge badge-light"><%= subscription %></span>
+          <% end %>
+        </span>
+      </li>
+
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600">
+          <%= Spree.t(:created_at) %>
+        </span>
+        <span>
+          <%= spree_time(@webhook_endpoint.created_at, format: :long) %>
+        </span>
+      </li>
+
+      <li class="list-group-item flex justify-between items-center">
+        <span class="text-gray-600">
+          <%= Spree.t(:updated_at) %>
+        </span>
+        <span>
+          <%= spree_time(@webhook_endpoint.updated_at, format: :long) %>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+<div class="card mb-6">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t('admin.webhook_endpoints.endpoint_settings') %></h5>
+  </div>
+  <div class="card-body">
+    <%= f.spree_text_field :url, required: true, autofocus: f.object.new_record?, placeholder: 'https://example.com/webhooks', disabled: f.object.persisted? %>
+    <%= f.spree_check_box :active %>
+  </div>
+</div>
+
+<div class="card mb-6">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t('admin.webhook_endpoints.event_subscriptions') %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-gray-600 mb-3"><%= Spree.t('admin.webhook_endpoints.event_subscriptions_help') %></p>
+    <div class="grid lg:grid-cols-2 gap-4">
+      <% available_webhook_events.each do |event| %>
+        <div class="form-checkbox">
+          <%= check_box_tag 'webhook_endpoint[subscriptions][]', event, @webhook_endpoint.subscriptions&.include?(event), id: "subscription_#{event.parameterize}", class: 'custom-control-input' %>
+          <label class="custom-control-label" for="subscription_<%= event.parameterize %>">
+            <code><%= event %></code>
+          </label>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/webhook_endpoints/_secret_key.html.erb

@@ -0,0 +1,23 @@
+<div class="card mb-6">
+    <div class="card-header flex justify-between">
+      <h5 class="card-title">
+        <%= Spree.t('admin.webhook_endpoints.secret_key') %>
+      </h5>
+    </div>
+    <div class="card-body">
+      <p class="text-gray-600 mb-3"><%= Spree.t('admin.webhook_endpoints.secret_key_help') %></p>
+      <div data-controller="password-visibility" class="input-group gap-0 pr-1">
+        <input type="password" class="grow text-truncate" data-password-visibility-target="input" spellcheck="false" value="<%= @webhook_endpoint.secret_key %>" readonly>
+
+        <button type="button" class="btn hover:bg-gray-100 p-1 mr-1 rounded" data-action="password-visibility#toggle">
+          <span data-password-visibility-target="icon"><%= icon 'eye', class: 'mr-0' %></span>
+          <span data-password-visibility-target="icon" class="hidden"><%= icon 'eye-off', class: 'mr-0' %></span>
+        </button>
+
+        <%= clipboard_component(@webhook_endpoint.secret_key, 
+              button_class: 'btn hover:bg-gray-100 p-1 rounded', 
+              icon_class: 'mr-0') %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/webhook_endpoints/_summary.html.erb

@@ -0,0 +1,26 @@
+<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.webhook_endpoints.deliveries') %></span>
+        <span class="text-lg text-gray-900 font-bold">
+          <%= @webhook_endpoint.webhook_deliveries.count %>
+        </span>
+      </div>
+
+      <div class="flex flex-col mb-6 lg:mb-0 border-r gap-2">
+        <span class="text-sm text-gray-500"><%= Spree.t('admin.webhook_endpoints.successful_deliveries') %></span>
+        <span class="text-lg text-gray-900 font-bold">
+          <%= @webhook_endpoint.webhook_deliveries.successful.count %>
+        </span>
+      </div>
+
+      <div class="flex flex-col mb-6 lg:mb-0 gap-2">
+        <span class="text-sm text-gray-500"><%= Spree.t('admin.webhook_endpoints.failed_deliveries') %></span>
+        <span class="text-lg text-gray-900 font-bold">
+          <%= @webhook_endpoint.webhook_deliveries.failed.count %>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/webhook_endpoints/_table_header.html.erb

@@ -0,0 +1,7 @@
+<tr>
+  <th scope="col"><%= Spree.t(:url) %></th>
+  <th scope="col" class="text-center"><%= Spree.t(:active) %></th>
+  <th scope="col"><%= Spree.t('admin.webhook_endpoints.subscriptions') %></th>
+  <th scope="col"><%= Spree.t('admin.webhook_endpoints.deliveries') %></th>
+  <th scope="col"><%= Spree.t(:created_at) %></th>
+</tr>

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

@@ -0,0 +1,24 @@
+<tr id="<%= spree_dom_id webhook_endpoint %>" data-controller="row-link">
+  <td class="w-40 p-0">
+    <%= link_to webhook_endpoint.url, 
+                spree.admin_webhook_endpoint_path(webhook_endpoint), 
+                class: 'font-bold w-full h-full block p-3',
+                data: { row_link_target: 'link', turbo_frame: '_top' } %>
+  </td>
+  <td class="text-center w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <%= active_badge(webhook_endpoint.active?) %>
+  </td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <span class="text-gray-600">
+      <%= webhook_endpoint.subscriptions.size %> <%= Spree.t('admin.webhook_endpoints.events') %>
+    </span>
+  </td>
+  <td class="w-20 cursor-pointer" data-action="click->row-link#openLink">
+    <span class="text-green-500">
+      <%= webhook_endpoint.webhook_deliveries.successful.count %>
+    </span> / <%= webhook_endpoint.webhook_deliveries.count %>
+  </td>
+  <td class="w-20 cursor-pointer" data-action="click->row-link#openLink">
+    <%= spree_time(webhook_endpoint.created_at) %>
+  </td>
+</tr>

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

@@ -0,0 +1 @@
+<%= render 'spree/admin/shared/edit_resource_in_drawer' %>

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

@@ -0,0 +1,9 @@
+<%= render 'spree/admin/shared/developers_nav' %>
+
+<%= content_for(:title, Spree.t(:webhook_endpoints)) %>
+
+<% content_for :page_actions do %>
+  <%= link_to_with_icon 'plus', Spree.t(:new_webhook_endpoint), new_object_url, class: "btn btn-primary" if can? :create, Spree::WebhookEndpoint %>
+<% end %>
+
+<%= render_table @collection, :webhook_endpoints %>

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

@@ -0,0 +1 @@
+<%= render 'spree/admin/shared/new_resource' %>

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

@@ -0,0 +1,18 @@
+<%= content_for :page_title do %>
+  <%= page_header_back_button(collection_url) %>
+  <%= @webhook_endpoint.url %>
+<% end %>
+
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8">
+    <%= render 'summary' %>
+
+    <%= turbo_frame_tag :webhook_deliveries, src: spree.admin_webhook_endpoint_webhook_deliveries_path(@webhook_endpoint), loading: :lazy do %>
+      <%= render 'spree/admin/shared/spinner' %>
+    <% end %>
+  </div>
+
+  <div class="col-span-12 lg:col-span-4">
+    <%= render 'details' %>
+    <%= render 'secret_key' %>
+</div>

data/app/views/spree/admin/webhook_endpoints/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_render_alerts :drawer_alerts %>
+
+<%= turbo_stream.replace spree_dom_id(@webhook_endpoint) + '_details' do %>
+  <%= render 'spree/admin/webhook_endpoints/details', webhook_endpoint: @webhook_endpoint %>
+<% end %>