avo 1.24.2 → 2.1.0

data/app/javascript/js/controllers.js

@@ -7,6 +7,7 @@ import AttachmentsController from './controllers/attachments_controller'
 import BelongsToFieldController from './controllers/fields/belongs_to_field_controller'
 import BooleanFilterController from './controllers/boolean_filter_controller'
 import CodeFieldController from './controllers/fields/code_field_controller'
+import DashboardCardController from './controllers/dashboard_card_controller'
 import DateFieldController from './controllers/fields/date_field_controller'
 import FilterController from './controllers/filter_controller'
 import HiddenInputController from './controllers/hidden_input_controller'
@@ -14,10 +15,12 @@ import ItemSelectAllController from './controllers/item_select_all_controller'
 import ItemSelectorController from './controllers/item_selector_controller'
 import KeyValueController from './controllers/fields/key_value_controller'
 import LoadingButtonController from './controllers/loading_button_controller'
+import MobileController from './controllers/mobile_controller'
 import ModalController from './controllers/modal_controller'
 import MultipleSelectFilterController from './controllers/multiple_select_filter_controller'
 import PerPageController from './controllers/per_page_controller'
 import SearchController from './controllers/search_controller'
+import SelectController from './controllers/select_controller'
 import SelectFilterController from './controllers/select_filter_controller'
 import SimpleMdeController from './controllers/fields/simple_mde_controller'
 import TextFilterController from './controllers/text_filter_controller'
@@ -30,15 +33,18 @@ application.register('actions-picker', ActionsPickerController)
 application.register('alerts', AlertsController)
 application.register('attachments', AttachmentsController)
 application.register('boolean-filter', BooleanFilterController)
+application.register('dashboard-card', DashboardCardController)
 application.register('filter', FilterController)
 application.register('hidden-input', HiddenInputController)
 application.register('item-select-all', ItemSelectAllController)
 application.register('item-selector', ItemSelectorController)
 application.register('loading-button', LoadingButtonController)
+application.register('mobile', MobileController)
 application.register('modal', ModalController)
 application.register('multiple-select-filter', MultipleSelectFilterController)
 application.register('per-page', PerPageController)
 application.register('search', SearchController)
+application.register('select', SelectController)
 application.register('select-filter', SelectFilterController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)

data/app/views/avo/actions/show.html.erb

@@ -10,30 +10,36 @@
     <%= form_with model: @model,
       scope: 'fields',
       url: "#{@resource.records_path}/actions/#{@action.param_id}",
+      local: true,
       data: @action.class.form_data_attributes do |form|
     %>
-      <%= render Avo::ModalComponent.new do |c| %>
-        <% c.heading do %>
-          <%= @action.action_name %>
-        <% end %>
-
-        <div class="flex-1 flex items-center justify-center px-8 text-lg mt-8 mb-12">
-          <%= @action.message %>
-        </div>
-
-        <%= form.hidden_field :resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
-
-        <% if @action.get_fields.present? %>
+    <%= render Avo::ModalComponent.new do |c| %>
+      <% c.heading do %>
+        <%= @action.action_name %>
+      <% end %>
+      <div class="flex-1 flex">
+        <%= @action.message %>
+      </div>
+      <%= form.hidden_field :resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
+      <% if @action.get_fields.present? %>
+        <div class="mt-4">
           <% @action.get_fields.each_with_index do |field, index| %>
             <%= render field.component_for_view(:edit).new field: field, resource: @resource, index: index, form: form, displayed_in_modal: true %>
           <% end %>
+        </div>
+      <% end %>
+      <% c.controls do %>
+        <%= a_button data: { action: 'click->modal#close' }, size: :sm do %>
+          <%= @action.cancel_button_label %>
         <% end %>
-
-        <% c.controls do %>
-          <%= a_button @action.cancel_button_label, data: { action: 'click->modal#close' }, size: :sm %>
-          <%= a_button @action.confirm_button_label, type: :submit, color: :green, size: :sm, data: @action.class.submit_button_data_attributes %>
+        <%= a_button type: :submit,
+            color: :green,
+            size: :sm,
+            data: @action.class.submit_button_data_attributes do %>
+          <%= @action.confirm_button_label %>
         <% end %>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
+</div>
 <% end %>

data/app/views/avo/associations/new.html.erb

@@ -0,0 +1,45 @@
+<%= turbo_frame_tag 'attach_modal' do %>
+  <%= form_with scope: 'fields',
+    url: "#{avo.root_path}resources/#{params[:resource_name]}/#{params[:id]}/#{params[:related_name]}/",
+    local: true,
+    data: {
+      'turbo-frame': '_top'
+    } do |form| %>
+    <%= render Avo::ModalComponent.new do |c| %>
+      <% c.heading do %>
+        <%= t 'avo.choose_item', item: @related_resource.name.downcase %>
+      <% end %>
+
+      <div class="flex-1 flex items-center justify-center px-0 lg:px-8 text-lg mt-8 mb-12">
+        <% if @field.searchable %>
+          <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: form,
+            field: @field,
+            model_key: @field.target_resource&.model_key,
+            foreign_key: 'related_id',
+            resource: @resource
+          %>
+        <% else %>
+          <div class="flex-1 flex flex-col items-center justify-center px-0 md:px-24 text-base">
+            <%= form.select :related_id, options_for_select(@options, nil),
+              {
+                include_blank: t('avo.choose_an_option'),
+              },
+              {
+                class: input_classes('w-full'),
+              }
+            %>
+          </div>
+        <% end %>
+      </div>
+
+      <% c.controls do %>
+        <%= a_button 'data-action': 'click->modal#close', size: :sm do %>
+          <%= t('avo.cancel') %>
+        <% end %>
+        <%= a_button type: :submit, color: :green, size: :sm do %>
+          <%= t('avo.attach') %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/avo/base/_multiple_select_filter.html.erb

@@ -15,7 +15,11 @@
       'data-filter-class': filter.class.to_s,
       'data-multiple-select-filter-target': 'selector'
     %>
-    <%= a_button "Filter by #{filter.name}", class: 'mt-4', color: 'blue', data: { action: "multiple-select-filter#changeFilter" } %>
+    <div class="flex justify-end">
+      <%= a_button class: 'mt-4', color: :blue, size: :sm, data: { action: "multiple-select-filter#changeFilter" } do %>
+        Filter by <%=filter.name %>
+      <% end %>
+    </div>
     <%= link_to 'url_redirect', request.url, data: { 'multiple-select-filter-target': 'urlRedirect', 'turbo-frame': params[:turbo_frame] }, style: 'hidden', class: 'hidden' %>
   <% end %>
 </div>

data/app/views/avo/base/_text_filter.html.erb

@@ -16,7 +16,9 @@
       'data-action': 'keypress->text-filter#tryToSubmit'
     %>
     <div class="flex justify-end">
-      <%= a_button filter.button_label || "Filter by #{filter.name}", class: 'mt-4', color: 'blue', data: { action: "text-filter#changeFilter" }, size:   :sm %>
+      <%= a_button class: 'mt-4', color: :blue, data: { action: "text-filter#changeFilter" }, size: :sm do %>
+        <%= filter.button_label || "Filter by #{filter.name}" %>
+      <% end %>
     </div>
     <%= link_to 'url_redirect', request.url, data: { 'text-filter-target': 'urlRedirect', 'turbo-frame': params[:turbo_frame] }, style: 'hidden', class: 'hidden' %>
   <% end %>

data/app/views/avo/base/show.html.erb

@@ -1,3 +1,3 @@
 <%= turbo_frame_wrap(params[:turbo_frame]) do %>
-  <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection) %>
+  <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection, actions: @actions) %>
 <% end %>

data/app/views/avo/dashboards/_chartkick_card.html.erb

@@ -0,0 +1,3 @@
+<div class="relative flex flex-col <%= @card.chartkick_classes %>">
+  <%= send(@card.chart_type, @card.compute_result.result_data, **@card.chartkick_options) %>
+</div>

data/app/views/avo/dashboards/_metric_card.html.erb

@@ -0,0 +1,5 @@
+<div class="flex mt-4 items-end">
+  <span class="text-3xl"><%= @card.prefix %></span>
+  <span class="text-5xl"><%= @card.compute_result.result_data %></span>
+  <span class="text-3xl"><%= @card.suffix %></span>
+</div>

data/app/views/avo/dashboards/card.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+  <%= render Avo::CardComponent.new card: @card %>
+<% end %>

data/app/views/avo/dashboards/show.html.erb

@@ -0,0 +1,35 @@
+<%= render Avo::PanelComponent.new(title: @dashboard.name, description: @dashboard.description) do |c| %>
+  <% c.bare_content do %>
+    <% if @dashboard.items.present? %>
+      <div class="min-h-24">
+        <%= content_tag(:div, class: "grid gap-4 grid-cols-1 #{@dashboard.classes}") do %>
+          <% @dashboard.items.each do |item| %>
+            <% if item.is_divider? %>
+              <%= render Avo::Dashboards::DividerComponent.new(divider: item) %>
+            <% elsif item.is_card? %>
+              <%= content_tag(:div, class: "relative bg-white rounded shadow-panel space-y-2 #{item.card_classes} overflow-hidden") do %>
+                <turbo-frame id="<%= item.turbo_frame %>" src="<%= item.frame_url(enforced_range: @range) %>">
+                  <%= render(Avo::LoadingComponent.new(title: item.label)) %>
+                </turbo-frame>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="w-full h-full">
+        <% if Rails.env.development? %>
+          <%= render Avo::PanelComponent.new do |c| %>
+            <% c.body do %>
+              <div class="p-6">
+                <%= t 'avo.empty_dashboard_message' %>. <%= link_to 'Docs', 'https://docs.avohq.io/2.0/dashboards.html', target: '_blank' %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= empty_state message: t('avo.no_cards_present') %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/avo/home/failed_to_load.html.erb

@@ -1,3 +1,23 @@
 <%= turbo_frame_wrap(params[:turbo_frame]) do %>
-  <%= render 'avo/partials/failed_state' %>
+  <%
+  classes = 'absolute inset-auto left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
+  label = t 'avo.failed_to_load'
+%>
+  <div class="relative flex-1 py-12">
+    <div class="relative block text-gray-300 h-40 w-full">
+      <%= svg 'avocado', class: "#{classes} h-20 text-gray-400" %>
+      <%= svg 'code', class: "#{classes} h-8 -ml-20 -mt-12" %>
+      <%= svg 'fire', class: "#{classes} h-8 -ml-10 -mt-24" %>
+      <%= svg 'color-swatch', class: "#{classes} h-8 ml-8 -mt-24" %>
+      <%= svg 'globe', class: "#{classes} h-8 ml-20 -mt-12" %>
+      <%= svg 'library', class: "#{classes} h-8 -ml-20 mt-4" %>
+      <%= svg 'photograph', class: "#{classes} h-8 ml-20 mt-4" %>
+    </div>
+    <div class="relative block text-center text-lg text-gray-400 font-semibold -mt-10"><%= label %> <span class="border-b-2 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
+  </div>
+  <% if Rails.env.development? %>
+    <div class="text-center text-sm w-full">
+      This is not an issue with Avo. Click <%= link_to 'this link', params[:src], target: :_blank %> to see why this frame failed to load.
+    </div>
+  <% end %>
 <% end %>

data/app/views/avo/home/index.html.erb

@@ -1,9 +1,5 @@
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new title: 'Welcome to Avo' do |c| %>
-    <% c.tools do %>
-      <div class="text-sm italic">This page is visible only in development. It will be hidden in other environments.</div>
-    <% end %>
-
+  <%= render Avo::PanelComponent.new title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.' do |c| %>
     <% c.body do %>
       <div class="flex flex-col justify-between py-6 min-h-24">
         <div class="px-6 space-y-4">

data/app/views/avo/partials/_custom_tools_alert.html.erb

@@ -1,6 +1,6 @@
 <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-  <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-green-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
-    <%= svg "exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0" %> Warning. Your license is invalid or doesn't support custom tools. This page will not be visible in a production environment.
+  <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
+    <%= svg "exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
   </a>
 </div>
 

data/app/views/avo/partials/_global_search.html.erb

@@ -1,11 +1,11 @@
-<div data-controller="search" class="global-search" data-turbo-remove-before-cache>
-  <div class="inline-block"
+<div data-controller="search" class="relative flex global-search rounded border border-gray-200 sm:min-w-[16rem]" data-turbo-remove-before-cache>
+  <div class="flex-1 text-gray-500"
     data-search-target="autocomplete"
     data-search-resource="global"
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>", "placeholder": "<%= I18n.translate 'avo.search.placeholder' %>", "cancel_button": "<%= I18n.translate 'avo.search.cancel_button' %>"}'
   >
   </div>
-  <div class="relative top-[-5px] inline-flex text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md cursor-pointer"
+  <div class="absolute top-1/2 hidden sm:inline-flex text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md cursor-pointer -translate-y-1/2 left-auto right-0 mr-4"
     data-search-target="button"
   >
     <span class="sr-only">Press </span>

data/app/views/avo/partials/_header.html.erb

@@ -1 +1 @@
-<%= link_to Avo.configuration.app_name, '/', class: 'text-green-600 font-semibold', target: :_blank %>
+<%= link_to Avo.configuration.app_name, '/', class: 'text-blue-500 font-semibold', target: :_blank %>

data/app/views/avo/partials/_logo.html.erb

@@ -1,3 +1,3 @@
-<%= link_to root_path, class: 'logo-placeholder h-16 bg-white p-2 flex justify-center' do %>
+<%= link_to root_path, class: 'logo-placeholder h-20 bg-white p-4 flex justify-start' do %>
   <%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
 <% end %>

data/app/views/avo/partials/_navbar.html.erb

@@ -0,0 +1,11 @@
+<div class="relative bg-white p-2 w-full flex flex-shrink-0 items-center z-50 px-4 lg:px-8 border-b space-x-4 lg:space-x-0 min-h-[4rem]" v-if="layout !== 'blank'">
+  <%= a_button class: 'lg:hidden', icon: 'menu', data: { action: 'click->mobile#toggleSidebar' } %>
+  <div class="flex-1 flex items-center justify-between lg:justify-start space-x-8">
+    <div class="m-0">
+      <%= render partial: "avo/partials/header" %>
+    </div>
+    <div class="flex">
+      <%= render partial: "avo/partials/global_search" if ::Avo::App.license.has_with_trial(:global_search) && ::Avo.configuration.feature_enabled?(:global_search) %>
+    </div>
+  </div>
+</div>

data/app/views/avo/partials/_resource_search.html.erb

@@ -5,5 +5,5 @@
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>"}'
   >
   </div>
-  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded-full cursor-pointer" data-search-target="button"></div>
+  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded cursor-pointer" data-search-target="button"></div>
 </div>

data/app/views/avo/partials/_sortable_component.html.erb

@@ -11,4 +11,4 @@
   end
 %>
 
-<%= svg icon, class: 'inline-block fill-current text-gray-500 relative leading-none min-w-4 min-h-full ml-1 h-4' %>
+<%= svg icon, class: 'inline-block fill-current text-gray-500 relative leading-none min-w-[1rem] min-h-full ml-1 h-4' %>

data/app/views/avo/partials/_table_header.html.erb

@@ -1,6 +1,6 @@
 
-<thead class="bg-slate-100 border-t border-b border-gray-300 pb-1">
-  <th>
+<thead class="bg-white border-b border-gray-200 pb-1">
+  <th class="rounded-lg">
     <%== item_select_all_input %>
   </th>
   <%
@@ -28,9 +28,9 @@
         sort_by = field.id
         sort_direction = 'desc'
       end
-      classes = "text-slate-600 tracking-tight leading-tight text-xs font-semibold"
+      classes = "text-gray-500 tracking-tight leading-tight text-sm font-semibold"
   %>
-    <th class="text-left uppercase px-3 py-2 whitespace-nowrap">
+    <th class="text-left uppercase px-3 py-4 whitespace-nowrap rounded-l">
       <% if field.sortable %>
         <%= link_to params.permit!.merge(sort_by: sort_by, sort_direction: sort_direction), class: "flex items-center #{classes} #{'cursor-pointer' if field.sortable}", 'data-turbo-frame': params[:turbo_frame] do %>
           <%= field.name %>

data/app/views/avo/partials/_view_toggle_button.html.erb

@@ -1,17 +1,37 @@
-<%
-  if available_view_types.count > 1
-    case view_type.to_sym
-    when :table
-      new_view_type = 'grid'
-      new_icon = 'view-grid'
-      translation_key = 'avo.grid_view'
-    when :grid
-      new_view_type = 'table'
-      new_icon = 'view-list'
-      translation_key = 'avo.table_view'
-    end
-%>
-  <%= a_link params.permit!.merge(view_type: new_view_type), color: :blue, 'data-turbo-frame': turbo_frame, title: t('avo.switch_to_view', view_type: new_view_type), 'data-tippy': 'tooltip' do %>
-    <%= svg new_icon %> <%= t translation_key, item: @resource.model_class.model_name.human.downcase %>
-  <% end %>
+<% if available_view_types.count > 1 %>
+  <%
+    info = {
+      table: {
+        new_view_type: 'table',
+        new_icon: 'table-view-type',
+        translation_key: 'avo.table_view',
+      },
+      grid: {
+        new_view_type: 'grid',
+        new_icon: 'grid-view-type',
+        translation_key: 'avo.grid_view',
+      },
+    }
+  %>
+  <div class="flex">
+    <div class="button-group">
+      <% available_view_types.each do |type| %>
+        <% is_active_view = view_type.to_s == type.to_s %>
+
+        <%= a_link url_for(params.permit!.merge(view_type: type)).to_s,
+          icon: info[type][:new_icon],
+          color: is_active_view ? :gray : :primary,
+          rounded: false,
+          size: :sm,
+          class: is_active_view ? ' bg-gray-100 border-gray-300' : ' z-20',
+          title: t('avo.switch_to_view', view_type: type),
+          data: {
+            tippy: 'tooltip',
+            'turbo-frame': turbo_frame,
+            control: "view-type-toggle-#{type}"
+          }
+        %>
+      <% end %>
+    </div>
+  </div>
 <% end %>

data/app/views/avo/private/_links_and_buttons.html.erb

@@ -0,0 +1,57 @@
+<%
+  entities = [:button, :link]
+  sizes = [:lg, :md, :sm, :xs]
+  styles = [:primary, :outline]
+  colors = [:primary, :gray, :red, :orange, :green]
+  states = [:regular, :hover, :disabled, :active]
+%>
+<div class="px-6 space-y-4">
+  <% entities.each do |entity| %>
+    <h3><%= entity.to_s.humanize.capitalize.pluralize %></h3>
+    <div class="flex flex-col space-y-4">
+      <% sizes.each do |size| %>
+        <div class="text-lg">size: <%= size %></div>
+        <div class="flex flex-col space-y-1">
+          <% styles.each do |style| %>
+            <% colors.each do |color| %>
+              <% next if style == :primary && color != :primary %>
+              <div class="flex space-x-1">
+                <% states.each do |state| %>
+                  <%
+                    extra_classes = ""
+                    case state
+                    when :active
+                      extra_classes += " active"
+                    when :hover
+                      extra_classes += " hover"
+                    end
+                  %>
+                  <%
+                    a_button_or_link = "a_#{entity}"
+                    args = {icon: 'arrow-left', style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
+                  %>
+                  <% if entity == :link %>
+                    <div>
+                      <%= send a_button_or_link, '/admin/avo_private/design', **args do %>
+                        <%= entity.to_s.humanize.capitalize %> <%= state %>
+                      <% end %>
+                    </div>
+                  <% else %>
+                    <div>
+                      <%= send a_button_or_link, **args do %>
+                        <%= entity.to_s.humanize.capitalize %> <%= state %>
+                      <% end %>
+                    </div>
+                    <div>
+                      <%= a_button icon: 'bell', style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
+                    </div>
+                  <% end %>
+                <% end %>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/avo/private/design.html.erb

@@ -0,0 +1,27 @@
+<div class="flex flex-col">
+  <%= render Avo::PanelComponent.new title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.' do |c| %>
+    <% c.tools do %>
+      <%= a_link('/admin', icon: 'arrow-left', style: :primary, is_link: true) do %>
+        Primary
+      <% end %>
+
+      <%= a_link('/admin', icon: 'arrow-left', style: :outline, is_link: true) do %>
+        Secondary
+      <% end %>
+
+      <%= a_link('/admin', icon: 'arrow-left', style: :outline, color: :red, is_link: true) do %>
+        Red
+      <% end %>
+
+      <%= a_link('/admin', icon: 'arrow-left', style: :outline, color: :orange, is_link: true) do %>
+        Red
+      <% end %>
+    <% end %>
+
+    <% c.body do %>
+      <div class="flex flex-col justify-between py-6 min-h-24">
+        <%= render 'links_and_buttons' %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/layouts/avo/application.html.erb

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= display_meta_tags site: Avo.configuration.app_name, reverse: true, separator: "—" %>
 
   <%= csrf_meta_tags %>
@@ -17,43 +18,38 @@
     <%= stylesheet_link_tag "avo", "data-turbo-track": "reload", defer: true %>
   <% end %>
 </head>
-<body class="bg-slate-200 os-mac">
-
-<div id="app" class="flex min-h-screen flex-row h-full">
-  <div class="flex flex-1 w-full">
-    <%= render partial: 'avo/sidebar/sidebar' %>
-
-    <div class="flex-1 flex flex-col h-full overflow-auto">
-      <div class="relative bg-white p-2 shadow-md h-16 w-full flex flex-shrink-0 items-center z-50 px-6" v-if="layout !== 'blank'">
-        <div>
-          <%= render partial: "avo/partials/header" %>
-        </div>
-        <div class="flex-1 flex ml-4 pl-4">
-          <%= render partial: "avo/partials/global_search" if ::Avo::App.license.has_with_trial(:global_search) && ::Avo.configuration.feature_enabled?(:global_search) %>
-        </div>
-        <div class="align-end">
-          <%= render partial: "avo/partials/profile_dropdown" %>
-        </div>
-      </div>
+<body class="bg-application os-mac">
+<div class="relative flex flex-1 w-full min-h-full" data-controller="mobile">
+  <%= render Avo::SidebarComponent.new %>
+
+  <div class="lg:pl-64 flex-1 flex flex-col min-h-full max-w-full">
+    <%= render partial: "avo/partials/navbar" %>
 
-      <div class="content p-8 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">
-        <%= render partial: "avo/partials/custom_tools_alert" if @custom_tools_alert_visible %>
+    <div class="content py-4 lg:py-8 px-4 lg:px-8 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">
+      <%= render partial: "avo/partials/custom_tools_alert" if @custom_tools_alert_visible %>
 
-        <div class="flex flex-1 flex-col justify-between items-stretch">
-          <%= yield %>
-          <%= render partial: "avo/partials/footer" %>
-        </div>
+      <div class="flex flex-1 flex-col justify-between items-stretch space-y-8">
+        <%= yield %>
+        <%= render partial: "avo/partials/footer" %>
       </div>
     </div>
   </div>
-  <%= turbo_frame_tag 'actions_show' %>
-  <%= turbo_frame_tag 'attach_modal' %>
-  <%= turbo_frame_tag 'destroy_attachment_form' %>
+</div>
 
-  <%= turbo_frame_tag 'alerts' do %>
-    <%= render Avo::AlertsComponent.new %>
+<%= turbo_frame_tag 'actions_show' %>
+<%= turbo_frame_tag 'attach_modal' %>
+<%= turbo_frame_tag 'destroy_attachment_form' %>
+
+<%= turbo_frame_tag 'alerts', class: "fixed inset-0 bottom-0 flex flex-col space-y-4 items-end justify-right px-4 py-6 sm:p-6 justify-end z-50 pointer-events-none" do %>
+  <%= render Avo::FlashAlertsComponent.new flashes: flash %>
+
+  <% # In case we have other general error messages %>
+  <% if @errors.present? %>
+    <% @errors.each do |message| %>
+      <%= render Avo::AlertComponent.new :error, message %>
+    <% end %>
   <% end %>
-</div>
+<% end %>
 
 <%= render partial: "avo/partials/scripts" %>
 <!-- Avo version: <%= Avo::VERSION %> -->

data/avo.gemspec

@@ -10,8 +10,8 @@ Gem::Specification.new do |spec|
   spec.authors = ["Adrian Marin", "Mihai Marin"]
   spec.email = ["avo@avohq.io"]
   spec.homepage = "https://avohq.io"
-  spec.summary = "Configuration-based, no-maintenance, extendable Ruby on Rails admin."
-  spec.description = "Avo is a beautiful next-generation framework that empowers you, the developer, to create fantastic admin panels for your Ruby on Rails apps with the flexibility to fit your needs as you grow."
+  spec.summary = "Configuration-based, no-maintenance, extendable Ruby on Rails admin panel framework."
+  spec.description = "Avo abstracts away the common parts of building apps, letting your engineers work on your app's essential components. The result is a full-featured admin panel that works out of the box, ready to give to your end-users."
   spec.license = "Commercial"
 
   # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
@@ -27,6 +27,7 @@ Gem::Specification.new do |spec|
       "public gem pushes."
   end
 
+  spec.required_ruby_version = ">= 2.4.0"
   spec.post_install_message = "Thank you for using Avo 💪  Docs are available at https://docs.avohq.io"
 
   spec.files = Dir["{bin,app,config,db,lib,public}/**/*", "MIT-LICENSE", "Rakefile", "README.md", "avo.gemspec", "Gemfile", "Gemfile.lock"]
@@ -44,5 +45,6 @@ Gem::Specification.new do |spec|
   spec.add_dependency "addressable"
   spec.add_dependency "meta-tags"
   spec.add_dependency "breadcrumbs_on_rails"
+  spec.add_dependency "chartkick"
   spec.add_dependency "dry-initializer"
 end

data/bin/dev

@@ -1,9 +1,10 @@
 #!/usr/bin/env bash
 
-if ! command -v foreman &> /dev/null
-then
-  echo "Installing foreman..."
-  gem install foreman
-fi
+PORT="${PORT:-3030}"
+export PORT
 
-foreman start -f Procfile.dev
+if command -v overmind &> /dev/null; then
+  overmind start -f Procfile.dev "$@"
+else
+  foreman start -f Procfile.dev "$@"
+fi