avo 1.21.1.pre.1 → 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|
@@ -39,10 +39,19 @@
       >
       <%= 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" %>
+          <%= 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), @field.value&.class == type ? @field.field_value : nil),
+          <%= @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,
             },
             {
@@ -58,7 +67,13 @@
 <% 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]] },
         {

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>

data/app/components/avo/navigation_heading_component.rb

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

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

@@ -1,3 +1,3 @@
-<%= active_link_to @path, class: 'text-gray-800 py-2 px-4 block font-normal hover:bg-gray-100 rounded-md mb-1 mx-3 text-sm leading-none', active: @active do %>
-  <div class="w-4"></div> <%= @label %>
+<%= active_link_to @path, class: 'px-4 block mx-6 leading-none py-3 text-black rounded font-medium hover:bg-blue-50', active: @active do %>
+  <%= @label %>
 <% end %>

data/app/components/avo/navigation_link_component.rb

@@ -1,6 +1,11 @@
 # frozen_string_literal: true
 
 class Avo::NavigationLinkComponent < ViewComponent::Base
+  attr_reader :label
+  attr_reader :path
+  attr_reader :active
+  attr_reader :size
+
   def initialize(label: nil, path: nil, active: :inclusive, size: :md)
     @label = label
     @path = path

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

@@ -6,10 +6,12 @@
           <%= 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-bold text-gray-800 truncate" data-target="title">
+
+      <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate" data-target="title">
         <%= @title %>
       </div>
-      <div class="text-sm tracking-normal text-gray-600" data-target="description">
+
+      <div class="text-base tracking-normal font-medium text-gray-600" data-target="description">
         <%== description %>
       </div>
     </div>
@@ -21,7 +23,7 @@
     </div>
   </div>
 
-  <div class="relative bg-white rounded-xl shadow-xl mb-8 <%= @body_classes %>">
+  <div class="relative bg-white rounded-lg shadow mb-8 <%= @body_classes %>">
     <%= body %>
   </div>
 

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

@@ -0,0 +1,28 @@
+<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>
+    <% if can_destroy_user? %>
+      <a class="flex items-center h-full cursor-pointer">
+        <%= helpers.svg 'three-dots' %>
+      </a>
+
+      <%# if main_app.respond_to?(destroy_user_session_path)
+        <div class="hidden absolute inset-auto right-0 mr-6 mt-0 py-4 bg-white rounded-xl min-w-[200px] shadow-context" data-toggle-panel-target="panel">
+          <%= button_to t('avo.sign_out'), main_app.send(:destroy_user_session_path), method: :delete, form: { "data-turbo" => "false" }, class: "appearance-none bg-white text-left cursor-pointer text-green-600 font-semibold hover:text-white hover:bg-green-500 block px-4 py-1 w-full"
+        </div>
+      <%# end %>
+    <% end %>
+  </div>
+</div>