avo 1.25.0 → 2.1.1

data/app/components/avo/panel_component.html.erb

@@ -1,34 +1,46 @@
 <div <%== data_attributes %>>
-  <div class="mb-6">
-    <div>
-      <% if display_breadcrumbs? %>
-        <div class="breadcrumbs">
-          <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+  <% if render_header? %>
+    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mb-6">
+      <div class="overflow-hidden mr-4">
+        <% if display_breadcrumbs? %>
+          <div class="breadcrumbs truncate mb-2">
+            <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+          </div>
+        <% end %>
+
+        <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate" data-target="title">
+          <%= @title %>
         </div>
-      <% end %>
-      <div class="text-2xl tracking-normal font-bold text-gray-800 truncate" data-target="title">
-        <%= @title %>
-      </div>
-      <div class="text-sm tracking-normal text-gray-600" data-target="description">
-        <%== description %>
+
+        <% if description.present? %>
+        <div class="text-base tracking-normal font-medium text-gray-600 truncate" data-target="description">
+          <%== description %>
+        </div>
+        <% end %>
       </div>
-    </div>
 
-    <div>
-      <div class="flex justify-end space-x-2 mb-6">
+      <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
         <%= tools %>
       </div>
     </div>
-  </div>
+  <% end %>
 
-  <div class="relative bg-white rounded-xl shadow-xl mb-8 <%= @body_classes %>">
+  <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
     <%= body %>
   </div>
 
-  <div class="relative mb-8">
+  <div class="relative">
     <%= bare_content %>
   </div>
 
+  <% if footer_tools.present? %>
+    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mt-6">
+      <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
+        <%= footer_tools %>
+      </div>
+    </div>
+  <% end %>
+
   <div class="flex justify-end w-full">
     <div>
       <%= footer %>

data/app/components/avo/panel_component.rb

@@ -1,9 +1,12 @@
 # frozen_string_literal: true
 
 class Avo::PanelComponent < ViewComponent::Base
+  attr_reader :title
+
   renders_one :tools
   renders_one :body
   renders_one :bare_content
+  renders_one :footer_tools
   renders_one :footer
 
   def initialize(title: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil)
@@ -17,6 +20,10 @@ class Avo::PanelComponent < ViewComponent::Base
 
   private
 
+  def white_panel_classes
+    'bg-white rounded shadow'
+  end
+
   def data_attributes
     @data.merge({'panel-index': @index}).map do |key, value|
       " data-#{key}=\"#{value}\""
@@ -24,12 +31,20 @@ class Avo::PanelComponent < ViewComponent::Base
   end
 
   def display_breadcrumbs?
-    @display_breadcrumbs
+    @display_breadcrumbs == true && Avo.configuration.display_breadcrumbs == true
   end
 
   def description
     return @description if @description.present?
 
-    '&nbsp;'
+    ""
+  end
+
+  def render_header?
+    @title.present? || description.present? || tools.present? || display_breadcrumbs?
+  end
+
+  def render_footer_tools?
+    footer_tools.present?
   end
 end

data/app/components/avo/profile_item_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to @path, class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-blue-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
+  <%= @icon if @icon.present? %> <%= @label %>
+<% end %>

data/app/components/avo/profile_item_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::ProfileItemComponent < ViewComponent::Base
+  def initialize(label: nil, icon: nil, path: nil, active: :inclusive, target: nil)
+    @label = label
+    @icon = icon
+    @path = path
+    @active = active
+    @target = target
+  end
+end

data/app/components/avo/referrer_params_component.html.erb

@@ -0,0 +1,4 @@
+<%= hidden_field_tag :via_resource_class, params[:via_resource_class] if params[:via_resource_class] %>
+<%= hidden_field_tag :via_resource_id, params[:via_resource_id] if params[:via_resource_id] %>
+<%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
+<%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>

data/app/components/avo/referrer_params_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Avo::ReferrerParamsComponent < ViewComponent::Base
+  attr_reader :back_path
+
+  def initialize(back_path: nil)
+    @back_path = back_path
+  end
+end

data/app/components/avo/resource_component.rb

@@ -17,7 +17,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     if @reflection.present?
       reflection_resource = ::Avo::App.get_resource_by_model_name(@reflection.active_record.name)
       reflection_resource.hydrate(model: @parent_model) if @parent_model.present?
-      association_name = params['related_name']
+      association_name = params["related_name"]
 
       if association_name.present?
         method_name = "#{policy_method}_#{association_name}?".to_sym

data/app/components/avo/show/field_wrapper_component.html.erb

@@ -1,16 +1,9 @@
-<div class="flex items-start leading-tight <%= @classes %> min-h-16" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
-  <div class="h-16 flex self-start items-center text-slate-800">
-    <div class="w-48 md:w-64 px-8" data-slot="label">
-      <%= @field.name %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
-    </div>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, dash_if_blank: @dash_if_blank, full_width: @full_width) do %>
+  <div class="self-center <% if @full_width %> w-full <% else %> w-full md:w-8/12 <% end %>" data-slot="value">
+    <% if @field.value.blank? and @dash_if_blank %>
+      —
+    <% else %>
+      <%= content %>
+    <% end %>
   </div>
-  <div class="flex-1 flex flex-row h-full ml-2 min-h-inherit">
-    <div class="px-6 py-3 self-center <% if @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
-      <% if @field.value.blank? and @dash_if_blank %>
-        —
-      <% else %>
-        <%= content %>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/components/avo/show/field_wrapper_component.rb

@@ -7,9 +7,5 @@ class Avo::Show::FieldWrapperComponent < ViewComponent::Base
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
     @full_width = full_width
-
-    if (@index != 0) || @displayed_in_modal
-      @classes += " border-t"
-    end
   end
 end

data/app/components/avo/sidebar_component.html.erb

@@ -0,0 +1,51 @@
+<div class="fixed z-[60] application-sidebar hidden lg:flex h-full bg-white text-white w-64 border-r" data-mobile-target="sidebar">
+  <div class="flex flex-col w-full h-full">
+    <div class="flex justify-between">
+      <%= render partial: "avo/partials/logo" %>
+      <div class="flex items-center mr-4">
+        <%= helpers.a_button class: "lg:hidden", icon: 'menu-back', data: { action: 'click->mobile#toggleSidebar' } %>
+      </div>
+    </div>
+    <div class="flex-1 flex flex-col justify-between overflow-auto mt-3">
+      <div class="space-y-6">
+        <%= render Avo::SidebarItemComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil?  %>
+
+        <% if dashboards.present? %>
+          <div>
+            <%= render Avo::SidebarHeadingComponent.new label: t('avo.dashboards'), icon: helpers.svg('dashboards-icon', class: 'h-4') %>
+
+            <div class="w-full space-y-1">
+              <% dashboards.sort_by { |r| r.navigation_label }.each do |dashboard| %>
+                <%= render Avo::SidebarItemComponent.new label: dashboard.navigation_label, path: dashboard.navigation_path %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <div>
+          <%= render Avo::SidebarHeadingComponent.new label: t('avo.resources'), icon: helpers.svg('resources-icon', class: 'h-4') %>
+
+          <div class="w-full space-y-1">
+            <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
+              <%= render Avo::SidebarItemComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource) %>
+            <% end %>
+          </div>
+        </div>
+
+        <% if tools.present? %>
+          <div>
+            <%= render Avo::SidebarHeadingComponent.new label: t('avo.tools'), icon: helpers.svg('tools-icon', class: 'h-4') %>
+
+            <div class="w-full space-y-1">
+              <% tools.each do |partial| %>
+                <%= render partial: "/avo/sidebar/items/#{partial}" %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%= helpers.render_license_warnings %>
+    <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
+  </div>
+</div>

data/app/components/avo/sidebar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Avo::SidebarComponent < ViewComponent::Base
+  def dashboards
+    return [] if Avo::App.license.lacks_with_trial(:dashboards)
+
+    Avo::App.get_dashboards(helpers._current_user).select do |dashboard|
+      dashboard.is_visible?
+    end
+  end
+
+  def resources
+    Avo::App.resources_navigation(helpers._current_user)
+  end
+
+  def tools
+    return [] if Avo::App.license.lacks_with_trial(:custom_tools)
+
+    Avo::App.get_sidebar_partials
+  end
+end

data/app/components/avo/sidebar_heading_component.html.erb

@@ -0,0 +1,3 @@
+<div class="flex items-center p-4 py-2 text-gray-500 text-sm uppercase font-semibold leading-none space-x-1">
+  <%= icon %> <span><%= label %></span>
+</div>

data/app/components/avo/sidebar_heading_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::SidebarHeadingComponent < ViewComponent::Base
+  attr_reader :label
+  attr_reader :icon
+
+  def initialize(label: nil, icon: nil)
+    @label = label
+    @icon = icon
+  end
+end

data/app/components/avo/sidebar_item_component.html.erb

@@ -0,0 +1,3 @@
+<%= active_link_to @path, class: 'px-4 block mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-150', active: @active, target: @target do %>
+  <%= @label %>
+<% end %>

data/app/components/avo/sidebar_item_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Avo::SidebarItemComponent < ViewComponent::Base
+  def initialize(label: nil, path: nil, active: :inclusive, target: nil)
+    @label = label
+    @path = path
+    @active = active
+    @target = target
+  end
+end

data/app/components/avo/sidebar_profile_component.html.erb

@@ -0,0 +1,36 @@
+<div class="text-black border-t border-gray-200 p-4 flex">
+  <div class="flex-1 flex space-x-4">
+    <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">
+      <%= image_tag avatar, class: "object-cover min-w-full min-h-full h-full" %>
+    </div>
+    <div class="flex flex-col">
+      <div class="font-medium">
+        <%= name %>
+      </div>
+      <div class="text-xs text-gray-500 uppercase">
+        <%= title %>
+      </div>
+    </div>
+  </div>
+  <div class="relative" data-controller="toggle-panel">
+    <% if can_destroy_user? %>
+      <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle-panel#togglePanel">
+        <%= helpers.svg 'three-dots', class: 'h-4' %>
+      </a>
+      <div
+        class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full"
+        data-toggle-panel-target="panel"
+      >
+        <%# Example link below %>
+        <%#= render Avo::ProfileItemComponent.new label: 'Profile', path: '/profile', icon: helpers.svg('user-circle', class: 'h-4 mr-1') %>
+        <%= button_to helpers.main_app.send(destroy_user_session_path),
+          method: :delete,
+          form: { "data-turbo" => "false" },
+          class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full",
+          form_class: 'flex-1' do %>
+          <%= helpers.svg 'logout', class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/avo/sidebar_profile_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class Avo::SidebarProfileComponent < ViewComponent::Base
+  attr_reader :user
+
+  def initialize(user:)
+    @user = user
+  end
+
+  def avatar
+    if user.respond_to?(:avatar) && user.avatar.present?
+      user.avatar
+    else
+      ""
+    end
+  end
+
+  def name
+    if user.respond_to?(:name) && user.name.present?
+      user.name
+    elsif user.respond_to?(:email) && user.email.present?
+      user.email
+    else
+      "Avo user"
+    end
+  end
+
+  def title
+    if user.respond_to?(:avo_title) && user.avo_title.present?
+      user.avo_title
+    else
+      ""
+    end
+  end
+
+  def destroy_user_session_path
+    "destroy_#{Avo.configuration.current_user_resource_name}_session_path".to_sym
+  end
+
+  def can_destroy_user?
+    helpers.main_app.respond_to?(destroy_user_session_path)
+  end
+end

data/app/components/avo/turbo_frame_wrapper_component.html.erb

@@ -1,11 +1,10 @@
 <% if name.present? %><turbo-frame id="<%= name %>"><% end %>
-  <%
-    # When rendering the frames the flashed content gets lost.
-    # By including the alerts partial, the stimulus will pick them up and display them to the user.
-  %>
-  <% if helpers.turbo_frame_request? %>
-    <%= render Avo::AlertsComponent.new if helpers.flash.present? && name.present? %>
-  <% end %>
-
-  <%= content %>
+<%
+  # When rendering the frames the flashed content gets lost.
+  # We're appending it back if it's a turbo_frame_request.
+%>
+<% if helpers.turbo_frame_request? %>
+  <%= helpers.turbo_stream_action_tag :append, target: 'alerts', template: render(Avo::FlashAlertsComponent.new(flashes: helpers.flash)) %>
+<% end %>
+<%= content %>
 <% if name.present? %></turbo-frame><% end %>

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,31 +1,41 @@
 <div data-model-id="<%= @resource.model.id %>">
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
-                  scope: @resource.form_scope,
-                  url: helpers.resource_path(model: @resource.model, resource: @resource),
-                  method: :put,
-                  multipart: true do |form| %>
-      <%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>
-
+        scope: @resource.form_scope,
+        url: helpers.resource_path(model: @resource.model, resource: @resource),
+        method: :put,
+        local: true,
+        multipart: true do |form| %>
+      <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
-          <div class="flex justify-end space-x-2">
-            <%= a_link back_path do %>
-              <%= helpers.svg 'arrow-left' %> <%= t('avo.cancel').capitalize %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
+            <%= t('avo.cancel').capitalize %>
+          <% end %>
+          <% if can_see_the_save_button? %>
+            <%= a_button color: :green, spinner: true, type: :submit, icon: 'save' do %>
+              <%= t('avo.save').capitalize %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% if Avo.configuration.buttons_on_form_footers %>
+          <% c.footer_tools do %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
+              <%= t('avo.cancel').capitalize %>
             <% end %>
-
             <% if can_see_the_save_button? %>
-              <%= a_button color: 'green', variant: 'outlined', spinner: true, type: :submit do %>
-                <%= helpers.svg 'save' %> <%= t('avo.save').capitalize %>
+              <%= a_button color: :green, spinner: true, type: :submit, icon: 'save' do %>
+                <%= t('avo.save').capitalize %>
               <% end %>
             <% end %>
-          </div>
+          <% end %>
         <% end %>
-
         <% c.body do %>
-          <% @resource.get_fields.each_with_index do |field, index| %>
-            <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
-          <% end %>
+          <div class="divide-y">
+            <% @resource.get_fields.each_with_index do |field, index| %>
+              <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
+            <% end %>
+          </div>
         <% end %>
       <% end %>
     <% end %>

data/app/components/avo/views/resource_index_component.html.erb

@@ -1,58 +1,67 @@
 <div>
-  <%= render Avo::PanelComponent.new(title: title, description: description, body_classes: 'py-4', data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
+  <%= render Avo::PanelComponent.new(title: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
     <% c.tools do %>
       <% if can_see_the_actions_button? %>
-        <%= render 'actions' %>
+        <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
       <% end %>
-
       <% if can_see_the_create_button? %>
-        <%= a_link create_path, 'data-target': 'create' do %>
-          <%= svg 'plus' %> <%= t('avo.create_new_item', item: singular_resource_name.downcase ) %>
+        <%= a_link create_path, icon: 'heroicons/outline/plus', 'data-target': 'create', color: :primary do %>
+          <%= t('avo.create_new_item', item: singular_resource_name.downcase ) %>
         <% end %>
       <% end %>
-
       <% if can_attach? %>
-        <%= a_link attach_path, color: 'indigo', 'data-turbo-frame': 'attach_modal', 'data-target': 'attach' do %>
-          <%= svg 'view-grid-add' %> <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
+        <%= a_link attach_path, icon: 'heroicons/outline/link', color: :primary, 'data-turbo-frame': 'attach_modal', 'data-target': 'attach' do %>
+          <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
         <% end %>
       <% end %>
     <% end %>
-
     <% c.body do %>
-      <div class="flex justify-between pt-2 pb-2 min-h-16"
-        data-selected-resources-name="<%= @resource.model_key %>"
-        data-selected-resources="[]"
-      >
-        <div class="flex items-center px-6 w-64">
-          <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_key} if @resource.search_query.present? %>
-        </div>
-        <div class="flex justify-end items-center px-6 space-x-3">
-          <%= render partial: 'avo/partials/view_toggle_button', locals: { available_view_types: available_view_types, view_type: view_type, turbo_frame: @turbo_frame } if @models.present? %>
-          <%= render 'filters' if @filters.present? %>
-        </div>
-      </div>
-
-      <% if view_type.to_sym == :table %>
-        <div class="w-full overflow-auto flex flex-col mt-4">
-          <div class="relative flex-1 flex">
-            <%= render(Avo::Index::ResourceTableComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model)) %>
-          </div>
-
-          <% if @models.present? %>
-            <div class="py-4">
-              <%= render partial: 'avo/partials/paginator', locals: { pagy: @pagy, turbo_frame: @turbo_frame || 'none' } %>
+      <% if @resource.search_query.present? || @filters.present? || available_view_types.count > 1 %>
+        <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4"
+          data-selected-resources-name="<%= @resource.model_key %>"
+          data-selected-resources="[]"
+        >
+          <% if @resource.search_query.present? %>
+            <div class="flex items-center px-4 w-64">
+              <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_key} %>
+            </div>
+          <% else %>
+            <%# Offset for the space-y-2 property when the serach is missing %>
+            <div class="-mb-2"></div>
+          <% end %>
+          <% if @filters.present? || available_view_types.count > 1 %>
+            <div class="justify-self-end flex justify-start xs:justify-end items-center px-4 space-x-3">
+              <%= render Avo::FiltersComponent.new filters: @filters, resource: @resource %>
+              <%= render partial: 'avo/partials/view_toggle_button', locals: { available_view_types: available_view_types, view_type: view_type, turbo_frame: @turbo_frame } if available_view_types.count > 1 %>
             </div>
           <% end %>
         </div>
       <% end %>
+      <% if view_type.to_sym == :table %>
+        <% if @resources.present? %>
+          <div class="w-full overflow-auto flex flex-col mt-0">
+            <div class="relative flex-1 flex">
+              <%= render(Avo::Index::ResourceTableComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model)) %>
+            </div>
+          </div>
+        <% else %>
+          <%= helpers.empty_state resource_name: @resource.name.downcase.pluralize, related_name: params[:related_name], view_type: view_type, add_background: true %>
+        <% end %>
+      <% end %>
     <% end %>
-
     <% c.bare_content do %>
+      <% if view_type.to_sym == :table %>
+        <% if @models.present? %>
+          <div class="mt-8">
+            <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_resource: @parent_resource %>
+          </div>
+        <% end %>
+      <% end %>
+
       <% if view_type.to_sym == :grid %>
         <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model) %>
-
-        <div class="bg-white rounded-xl shadow-xl mt-8 py-6">
-          <%= render partial: 'avo/partials/paginator', locals: { pagy: @pagy, turbo_frame: @turbo_frame || 'none' } %>
+        <div class="mt-14">
+          <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_resource: @parent_resource %>
         </div>
       <% end %>
     <% end %>

data/app/components/avo/views/resource_new_component.html.erb

@@ -1,33 +1,48 @@
 <div>
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
-                  scope: @resource.form_scope,
-                  url: helpers.resources_path(resource: @resource,
-                                              via_relation_class: params[:via_relation_class],
-                                              via_relation: params[:via_relation],
-                                              via_resource_id: params[:via_resource_id]),
-                  local: true,
-                  multipart: true do |form| %>
+      scope: @resource.form_scope,
+      url: helpers.resources_path(
+        resource: @resource,
+        via_relation_class: params[:via_relation_class],
+        via_relation: params[:via_relation],
+        via_resource_id: params[:via_resource_id]
+      ),
+      local: true,
+      multipart: true do |form| %>
+      <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
           <div class="flex justify-end space-x-2">
-            <%= a_link back_path do %>
-              <%= svg 'arrow-left' %> <%= t('avo.cancel').capitalize %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
+              <%= t('avo.cancel').capitalize %>
             <% end %>
-
             <% if can_see_the_save_button? %>
-              <%= a_button color: 'green', spinner: true, type: :submit do %>
-                <%= svg 'save' %> <%= t('avo.save').capitalize %>
+              <%= a_button color: 'green', spinner: true, type: :submit, icon: 'save' do %>
+                <%= t('avo.save').capitalize %>
               <% end %>
             <% end %>
           </div>
         <% end %>
-
-        <% c.body do %>
-          <% @resource.get_fields.each_with_index do |field, index| %>
-            <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
+        <% if Avo.configuration.buttons_on_form_footers %>
+          <% c.footer_tools do %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
+              <%= t('avo.cancel').capitalize %>
+            <% end %>
+            <% if can_see_the_save_button? %>
+              <%= a_button color: :green, spinner: true, type: :submit, icon: 'save' do %>
+                <%= t('avo.save').capitalize %>
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
+        <% c.body do %>
+          <div class="divide-y">
+            <% @resource.get_fields.each_with_index do |field, index| %>
+              <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
+            <% end %>
+          </div>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>