avo 1.20.2.pre.2 → 1.22.0.pre.1

data/app/assets/stylesheets/avo.css

@@ -70,7 +70,7 @@ body {
 
 .application-sidebar .active:hover,
 .application-sidebar .active {
-  @apply bg-gray-200;
+  @apply bg-blue-100 text-blue-500;
 }
 
 .turbo-progress-bar {

data/app/assets/stylesheets/css/fonts.css

@@ -24,3 +24,56 @@
       url('/avo-assets/fonts/nunito-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/avo-assets/fonts/nunito-v16-latin-700.svg#Nunito') format('svg'); /* Legacy iOS */
 }
+
+/* inter-regular - latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/avo-assets/fonts/inter-v7-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('/avo-assets/fonts/inter-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/avo-assets/fonts/inter-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/avo-assets/fonts/inter-v7-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+}
+/* inter-500 - latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/avo-assets/fonts/inter-v7-latin-500.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('/avo-assets/fonts/inter-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/avo-assets/fonts/inter-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-500.woff') format('woff'), /* Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/avo-assets/fonts/inter-v7-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
+}
+/* inter-600 - latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/avo-assets/fonts/inter-v7-latin-600.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('/avo-assets/fonts/inter-v7-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/avo-assets/fonts/inter-v7-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-600.woff') format('woff'), /* Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/avo-assets/fonts/inter-v7-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
+}
+/* inter-700 - latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/avo-assets/fonts/inter-v7-latin-700.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('/avo-assets/fonts/inter-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/avo-assets/fonts/inter-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-700.woff') format('woff'), /* Modern Browsers */
+       url('/avo-assets/fonts/inter-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/avo-assets/fonts/inter-v7-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
+}

data/app/assets/stylesheets/css/pagination.css

@@ -21,18 +21,18 @@
 .pagy-nav-js .page a,
 .pagy-combo-nav-js .page a,
 .pagy-combo-nav-js .pagy-combo-input a {
-  @apply rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
+  @apply rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md;
 
   &:focus{
     @apply border-blue-300;
   }
 
   &:hover{
-    @apply bg-gray-300;
+    @apply bg-gray-200;
   }
 
   &:active{
-    @apply bg-gray-400 text-white;
+    @apply bg-gray-200;
   }
 }
 
@@ -42,26 +42,26 @@
 .pagy-nav .page.next.disabled,
 .pagy-nav-js .page.next.disabled,
 .pagy-combo-nav-js .page.next.disabled {
-  @apply text-gray-400 cursor-default;
+  @apply text-gray-300 cursor-default;
 
   &:hover {
-    @apply text-gray-400 bg-gray-200;
+    @apply text-gray-300 bg-white;
   }
 
   &:active {
-    @apply text-gray-400 bg-gray-200;
+    @apply text-gray-300 bg-white;
   }
 }
 
 .pagy-nav .page.active,
 .pagy-nav-js .page.active {
-  @apply text-white cursor-default bg-gray-400;
+  @apply text-white cursor-default bg-gray-500;
 
   &:hover {
-    @apply text-white bg-gray-400;
+    @apply text-white bg-gray-500;
   }
 
   &:active {
-    @apply bg-gray-400 text-white;
+    @apply bg-gray-500 text-white;
   }
 }

data/app/assets/stylesheets/css/search.css

@@ -1,13 +1,14 @@
 :root {
   --aa-primary-color: --tw-ring-color;
   --aa-selected-color: --tw-ring-color;
-  --aa-primary-color-rgb: 5, 150, 105;
+  --aa-primary-color-rgb: 117, 125, 138;
 }
 
 .global-search {
   .aa-DetachedSearchButton:focus,
   .aa-DetachedSearchButton {
     border: none !important;
+    @apply text-gray-500;
   }
 }
 
@@ -17,7 +18,7 @@
   }
 
   .aa-DetachedSearchButton {
-    @apply rounded-full border-gray-300;
+    @apply rounded border-gray-300 ;
   }
 }
 

data/app/assets/svgs/dashboards-icon.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.4 2H2V8.4H8.4V2Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 2H11.6V8.4H18V2Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.4 11.6001H2V18.0001H8.4V11.6001Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 11.6001H11.6V18.0001H18V11.6001Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/svgs/resources-icon.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_47_764)">
+<path d="M1.52386 18V11.1428H6.8572" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.0476 18H0" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.85718 18.0001V6.57153H12.1905" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5238 2H12.1905V18H17.5238V2Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_47_764">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

data/app/assets/svgs/three-dots.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="2" cy="2" r="2" fill="#757D8A"/>
+<circle cx="9" cy="2" r="2" fill="#757D8A"/>
+<circle cx="16" cy="2" r="2" fill="#757D8A"/>
+</svg>

data/app/assets/svgs/tools-icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5702 5.2533C18.0073 6.27384 18.1143 7.4055 17.8762 8.48986C17.6381 9.57423 17.0669 10.557 16.2425 11.3006C15.4182 12.0442 14.3819 12.5114 13.2788 12.6367C12.1757 12.7621 11.061 12.5394 10.0908 11.9997V11.9997L5.41832 17.4135C5.04279 17.789 4.53348 18 4.0024 18C3.47133 18 2.96201 17.789 2.58649 17.4135C2.21097 17.038 2 16.5287 2 15.9976C2 15.4665 2.21097 14.9572 2.58649 14.5817L8.00028 9.90916C7.46064 8.93895 7.23791 7.82427 7.36328 6.72119C7.48864 5.6181 7.95582 4.58183 8.69941 3.75746C9.443 2.93308 10.4258 2.36188 11.5101 2.12381C12.5945 1.88574 13.7262 1.99273 14.7467 2.4298L11.2486 5.91962L11.7233 8.2767L14.0804 8.75144L17.5702 5.2533Z" stroke="#757D8A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1 @@
+<%= output %>

data/app/components/avo/button_component.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+class Avo::ButtonComponent < ViewComponent::Base
+  def initialize(size: :md, type: :secondary, icon: nil, is_link: false, href: nil, **args)
+    @size = size
+    @type = type
+    @icon = icon
+    @href = href
+    @is_link = is_link
+    @args = args || {}
+  end
+
+  def args
+    if @args[:spinner]
+      @args[:"data-controller"] = "loading-button"
+    end
+
+    @args
+  end
+
+  def label
+    'lalb'
+  end
+
+  def is_link?
+    @is_link
+  end
+
+  def the_content
+    result = ""
+
+    result += @icon if @icon.present?
+    result += content if content.present?
+
+    result.html_safe
+  end
+
+  def output
+    if is_link?
+      output_link
+    else
+      output_button
+    end
+  end
+
+  def output_link
+    if content.empty?
+      link_to label, @href, **args
+    else
+      link_to @href, **args do
+        content
+      end
+    end
+  end
+
+  def output_button
+    if content.empty?
+      button_tag label, **args
+    else
+      button_tag **args do
+        the_content
+      end
+    end
+  end
+
+
+
+
+
+
+
+
+  # args[:class] = button_classes(args[:class], color: args[:color], variant: args[:variant], size: args[:size])
+  # if args[:spinner]
+  #   args[:"data-controller"] = "loading-button"
+  # end
+
+  # locals = {
+  #   label: label,
+  #   args: args
+  # }
+
+  # if block
+  #   render layout: "avo/partials/a_button", locals: locals do
+  #     capture(&block)
+  #   end
+  # else
+  #   render partial: "avo/partials/a_button", locals: locals
+  # end
+
+
+
+
+  # <% if is_link? %>
+  #   <% if content.empty? %>
+  #     <%= link_to label, @href, **args %>
+  #   <% else %>
+  #     <%= link_to @href, **args do %>
+  #     <% end %>
+  #   <% end %>
+  # <% else %>
+  #   <% if content.empty? %>
+  #     <%= button_tag label, **args %>
+  #   <% else %>
+  #     <%= button_tag **args do %>
+  #       <%= the_content %>
+  #     <% end %>
+  #   <% end %>
+  # <% end %>
+
+end

data/app/components/avo/fields/belongs_to_field/autocomplete_component.html.erb

@@ -8,15 +8,22 @@
   <div class="relative w-full" autocomplete="off">
     <%= @form.text_field @field.foreign_key,
       value: field_label,
-      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)), 'data-search-target': 'button clearValue',
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
       placeholder: @field.placeholder,
+      'data-search-target': 'button clearValue',
+      # This instructs the search_controller if it should enable/disabled this field when the user switches polymorphic associations
+      # It should not enable the field if the record is being created through an association
+      'data-should-be-disabled': @disabled,
       disabled: true %>
-    <div class="absolute top-1/2 left-auto right-3 mr-px -mt-2 cursor-pointer hidden text-gray-500"
-      data-tippy="tooltip"
-      data-search-target="clearButton"
-      title="<%= I18n.translate 'avo.clear_value' %>"
-      data-action="click->search#clearValue"
-      ><%= helpers.svg 'x', class: 'h-4' %></div>
+    <% unless @disabled %>
+      <div class="absolute top-1/2 left-auto right-3 mr-px -mt-2 cursor-pointer hidden text-gray-500"
+        data-tippy="tooltip"
+        data-search-target="clearButton"
+        title="<%= I18n.translate 'avo.clear_value' %>"
+        data-action="click->search#clearValue"
+        ><%= helpers.svg 'x', class: 'h-4' %>
+      </div>
+    <% end %>
   </div>
   <%= @form.hidden_field @foreign_key, value: field_value, 'data-search-target': 'hiddenId clearValue' %>
 </div>

data/app/components/avo/fields/belongs_to_field/autocomplete_component.rb

@@ -1,17 +1,25 @@
 # frozen_string_literal: true
 
 class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
-  def initialize(form:, field:, type: nil, model_key:, foreign_key:)
+  def initialize(form:, field:, model_key:, foreign_key:, disabled:, type: nil, resource: nil, polymorphic_record: nil)
     @form = form
     @field = field
     @type = type
     @model_key = model_key
     @foreign_key = foreign_key
+    @resource = resource
+    @disabled = disabled
+    @polymorphic_record = polymorphic_record
   end
 
   def field_label
     if searchable?
-      @field.value&.class == @type ? @field.field_label : nil
+      # New records won't have the value (instantiated model) present but the polymorphic_type and polymorphic_id prefilled
+      if new_record? && has_polymorphic_association?
+        @polymorphic_record.send(polymorphic_fields[:label])
+      else
+        @field.value&.class == @type ? @field.field_label : nil
+      end
     else
       @field.field_label
     end
@@ -19,7 +27,12 @@ class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
 
   def field_value
     if searchable?
-      @field.value&.class == @type ? @field.field_value : nil
+      # New records won't have the value (instantiated model) present but the polymorphic_type and polymorphic_id prefilled
+      if new_record? && has_polymorphic_association?
+        @polymorphic_record.send(polymorphic_fields[:id])
+      else
+        @field.value&.class == @type ? @field.field_value : nil
+      end
     else
       @field.field_value
     end
@@ -30,4 +43,35 @@ class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
   def searchable?
     @type.present?
   end
+
+  def new_record?
+    @resource.model.new_record?
+  end
+
+  def has_polymorphic_association?
+    polymorphic_class.present? && polymorphic_id.present?
+  end
+
+  # Get the polymorphic class
+  def polymorphic_class
+    @resource.model["#{@field.foreign_key}_type"]
+  end
+
+  # Get the polymorphic id
+  def polymorphic_id
+    @resource.model["#{@field.foreign_key}_id"]
+  end
+
+  # Get the resource for that polymorphic class
+  def polymorphic_resource
+    ::Avo::App.get_resource_by_model_name polymorphic_class
+  end
+
+  # Extract the needed fields to identify the record for polymorphic associations
+  def polymorphic_fields
+    {
+      id: polymorphic_resource.id,
+      label: polymorphic_resource.title
+    }
+  end
 end

data/app/components/avo/fields/belongs_to_field/edit_component.html.erb

@@ -1,5 +1,5 @@
 <%
-  if @field.types.present? # It's a polymorphic association
+  if is_polymorphic?
 
   # Set the model keys so we can pass them over
   model_keys = @field.types.map do |type|
@@ -7,58 +7,73 @@
     [type.to_s, resource.model_key]
   end.to_h
 %>
-  <div data-controller="belongs-to-field"
+<div data-controller="belongs-to-field"
     data-searchable="<%= @field.searchable %>"
     data-association="<%= @field.id %>"
     data-association-class="<%= @field&.target_resource&.model_class || nil %>"
   >
-    <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
-      <%= @form.select "#{@field.foreign_key}_type", @field.types.map { |type| [type.to_s.underscore.humanize, type.to_s] },
-        {
-          value: @field.value,
-          include_blank: @field.placeholder,
-        },
-        {
-          class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-          disabled: disabled,
-          'data-belongs-to-field-target': "select",
-          'data-action': 'change->belongs-to-field#changeType'
-        }
-        %>
-      <%
+  <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+    <%= @form.select "#{@field.foreign_key}_type", @field.types.map { |type| [type.to_s.underscore.humanize, type.to_s] },
+      {
+        value: @field.value,
+        include_blank: @field.placeholder,
+      },
+      {
+        class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+        disabled: disabled,
+        'data-belongs-to-field-target': "select",
+        'data-action': 'change->belongs-to-field#changeType'
+      }
+    %>
+    <%
         # If the select field is disabled, no value will be sent. It's how HTML works.
         # Thus the extra hidden field to actually send the related id to the server.
         if disabled %>
-        <%= @form.hidden_field "#{@field.foreign_key}_type" %>
-      <% end %>
+      <%= @form.hidden_field "#{@field.foreign_key}_type" %>
     <% end %>
-    <% @field.types.each do |type| %>
-      <div class="hidden"
+  <% end %>
+  <% @field.types.each do |type| %>
+    <div class="hidden"
         data-belongs-to-field-target="type"
         data-type="<%= type %>"
       >
-        <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, label: type.to_s.underscore.humanize do %>
-          <% if @field.searchable %>
-            <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form, field: @field, type: type, model_key: model_keys[type.to_s], foreign_key: "#{@field.foreign_key}_id" %>
-          <% else %>
-            <%= @form.select "#{@field.foreign_key}_id", options_for_select(@field.values_for_type(type), @field.value&.class == type ? @field.field_value : nil),
-              {
-                include_blank: @field.placeholder,
-              },
-              {
-                class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
-                disabled: disabled
-              }
-            %>
-          <% end %>
+      <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, label: type.to_s.underscore.humanize do %>
+        <% if @field.searchable %>
+          <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
+            field: @field,
+            type: type,
+            model_key: model_keys[type.to_s],
+            foreign_key: "#{@field.foreign_key}_id",
+            resource: @resource,
+            disabled: disabled,
+            polymorphic_record: polymorphic_record
+          %>
+        <% else %>
+          <%= @form.select "#{@field.foreign_key}_id", options_for_select(@field.values_for_type(type), @resource.present? && @resource.model.present? ? @resource.model["#{@field.foreign_key}_id"] : nil),
+            {
+              value: @resource.model["#{@field.foreign_key}_id"].to_s,
+              include_blank: @field.placeholder,
+            },
+            {
+              class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+              disabled: disabled
+            }
+          %>
         <% end %>
-      </div>
-    <% end %>
-  </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>
 <% else %>
   <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
     <% if @field.searchable %>
-      <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form, field: @field, model_key: @field.target_resource&.model_key, foreign_key: @field.foreign_key %>
+      <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
+        field: @field,
+        model_key: @field.target_resource&.model_key,
+        foreign_key: @field.foreign_key,
+        resource: @resource,
+        disabled: disabled
+      %>
     <% else %>
       <%= @form.select @field.foreign_key, @field.options.map { |o| [o[:label], o[:value]] },
         {
@@ -69,6 +84,12 @@
           disabled: disabled
         }
       %>
+      <%
+        # If the select field is disabled, no value will be sent. It's how HTML works.
+        # Thus the extra hidden field to actually send the related id to the server.
+        if disabled %>
+        <%= @form.hidden_field @field.foreign_key %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/belongs_to_field/edit_component.rb

@@ -1,6 +1,12 @@
 # frozen_string_literal: true
 
 class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
+  def initialize(field: nil, resource: nil, index: 0, form: nil, displayed_in_modal: false)
+    super field: field, resource: resource, index: index, form: form, displayed_in_modal: displayed_in_modal
+
+    @polymorphic_record = nil
+  end
+
   def disabled
     return true if @field.readonly
     return true if @field.target_resource.present? && @field.target_resource.model_class.name == params[:via_resource_class]
@@ -8,4 +14,35 @@ class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
 
     false
   end
+
+  def is_polymorphic?
+    @field.types.present?
+  end
+
+  def has_polymorphic_association?
+    polymorphic_class.present? && polymorphic_id.present?
+  end
+
+  # Get the polymorphic class
+  def polymorphic_class
+    @resource.model["#{@field.foreign_key}_type"]
+  end
+
+  # Get the polymorphic id
+  def polymorphic_id
+    @resource.model["#{@field.foreign_key}_id"]
+  end
+
+  # Get the actual resource
+  def polymorphic_record
+    return unless has_polymorphic_association?
+
+    return unless is_polymorphic?
+
+    return @polymorphic_record if @polymorphic_record.present?
+
+    @polymorphic_record = polymorphic_class.safe_constantize.find polymorphic_id
+
+    @polymorphic_record
+  end
 end

data/app/components/avo/fields/boolean_field/index_component.html.erb

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, dash_if_blank: false do %>
+<%= index_field_wrapper field: @field, dash_if_blank: false, center_content: true do %>
   <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
 <% end %>

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

@@ -1,7 +1,13 @@
-<td class="px-4 py-2 leading-tight whitespace-nowrap h-12 text-slate-800 <%= @classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+<td class="px-4 py-3 leading-tight whitespace-nowrap h-full text-slate-800 <%= @classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
   <% if @field.value.blank? && @dash_if_blank %>
     —
   <% else %>
-    <%= content %>
+    <% if @center_content %>
+    <div class="flex items-center justify-center">
+      <%= content %>
+    </div>
+    <% else %>
+      <%= content %>
+    <% end %>
   <% end %>
 </td>

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

@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 class Avo::Index::FieldWrapperComponent < ViewComponent::Base
-  def initialize(field: nil, dash_if_blank: true, **args)
+  def initialize(field: nil, dash_if_blank: true, center_content: false, **args)
     @field = field
     @dash_if_blank = dash_if_blank
+    @center_content = center_content
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
   end

data/app/components/avo/index/resource_table_component.html.erb

@@ -1,8 +1,8 @@
-<div class="w-full">
+<div class="w-full ">
   <% if @resources.present?%>
-    <table class="w-full px-4 overflow-hidden" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
+    <table class="w-full px-4 overflow-hidden bg-white rounded shadow " data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
       <%= render partial: 'avo/partials/table_header', locals: {fields: @resource.get_fields(reflection: @reflection)} %>
-      <tbody>
+      <tbody class="divide-y">
         <% @resources.each_with_index do |resource, index| %>
           <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_model) do %>
             <%= render Avo::Index::TableRowComponent.new(resource: resource, reflection: @reflection, parent_model: @parent_model) %>

data/app/components/avo/index/table_row_component.html.erb

@@ -1,5 +1,5 @@
 <tr
-  class="hover:bg-sky-50 hover:shadow-row relative z-20 border-b"
+  class="bg-white hover:bg-sky-50 hover:shadow-row relative z-20 border-b"
   <%== item_selector_init @resource %>
 >
   <td class="w-10">

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

@@ -1,3 +1,3 @@
-<div class="flex items-center my-2 p-3 text-gray-500 font-bold text-sm -mb-1 leading-none">
-  <div class="w-4"></div> <%= @label %>
+<div class="flex items-center p-4 text-gray-500 text-sm uppercase font-semibold leading-none">
+  <%= icon %> <%= label %>
 </div>