avo 1.25.0 → 2.1.1

data/app/helpers/avo/application_helper.rb

@@ -16,8 +16,8 @@ module Avo
       }
     end
 
-    def empty_state(resource_name)
-      render partial: "avo/partials/empty_state", locals: {resource_name: resource_name}
+    def empty_state(**args)
+      render Avo::EmptyStateComponent.new **args
     end
 
     def turbo_frame_wrap(name, &block)
@@ -26,56 +26,26 @@ module Avo
       end
     end
 
-    def a_button(label = nil, **args, &block)
-      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
+    def a_button(**args, &block)
+      render Avo::ButtonComponent.new(is_link: false, **args) do
+        capture(&block) if block_given?
       end
     end
 
-    def a_link(label, url = nil, **args, &block)
-      args[:class] = button_classes(args[:class], color: args[:color], variant: args[:variant], size: args[:size])
-
-      if block
-        url = label
-      end
-
-      locals = {
-        label: label,
-        url: url,
-        args: args
-      }
-
-      if block
-        render layout: "avo/partials/a_link", locals: locals do
-          capture(&block)
-        end
-      else
-        render partial: "avo/partials/a_link", locals: locals
+    def a_link(path = nil, **args, &block)
+      render Avo::ButtonComponent.new(path, is_link: true, **args) do
+        capture(&block) if block_given?
       end
     end
 
-    def button_classes(extra_classes = nil, color: nil, variant: nil, size: :md)
-      classes = "inline-flex flex-grow-0 items-center text-sm font-bold leading-none fill-current whitespace-nowrap transition duration-100 rounded-lg shadow-xl transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
+    def button_classes(extra_classes = nil, color: nil, variant: nil, size: :md, active: false)
+      classes = "inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 rounded transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
 
       if color.present?
         if variant.present? && (variant.to_sym == :outlined)
           classes += " bg-white border"
 
-          classes += " hover:border-#{color}-700 border-#{color}-600 text-#{color}-600 hover:text-#{color}-700 disabled:border-gray-300 disabled:text-gray-600"
+          classes += " hover:border-#{color}-700 border-#{color}-500 text-#{color}-600 hover:text-#{color}-700 disabled:border-gray-300 disabled:text-gray-600"
         else
           classes += " text-white bg-#{color}-500 hover:bg-#{color}-600 disabled:bg-#{color}-300"
         end
@@ -88,9 +58,11 @@ module Avo
       when :xs
         " p-2 py-1"
       when :sm
-        " p-3"
+        " py-1 px-4"
       when :md
-        " p-4"
+        " py-2 px-4"
+      when :xl
+        " py-3 px-4"
       else
         " p-4"
       end
@@ -100,9 +72,19 @@ module Avo
 
     def svg(file_name, **args)
       options = {}
-      options[:class] = args[:class].present? ? args[:class] : "h-4 mr-1"
+      options[:class] = args[:class].present? ? args[:class] : ""
       options[:class] += args[:extra_class].present? ? " #{args[:extra_class]}" : ""
 
+      if args[:'data-target'].present?
+        options[:'data-target'] = args[:'data-target']
+      end
+      if args[:'data-tippy'].present?
+        options[:'data-tippy'] = args[:'data-tippy']
+      end
+      if args[:title].present?
+        options[:title] = args[:title]
+      end
+
       # Create the path to the svgs directory
       file_path = "#{Avo::Engine.root}/app/assets/svgs/#{file_name}"
       file_path = "#{file_path}.svg" unless file_path.end_with? ".svg"
@@ -110,7 +92,7 @@ module Avo
       # Create a cache hash
       hash = Digest::MD5.hexdigest "#{file_path.underscore}_#{options}"
 
-      svg_content = Avo::App.cache_store.fetch "svg_file_#{hash}", expires_in: 1.year, cache_nils: false do
+      svg_content = Avo::App.cache_store.fetch "svg_file_#{hash}", expires_in: 1.week, cache_nils: false do
         if File.exist?(file_path)
           file = File.read(file_path)
 
@@ -134,12 +116,12 @@ module Avo
     end
 
     def input_classes(extra_classes = "", has_error: false)
-      classes = "appearance-none inline-flex bg-slate-100 disabled:bg-slate-300 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-700 rounded-md py-2 px-3 leading-tight border outline-none outline"
+      classes = "appearance-none inline-flex bg-gray-100 disabled:cursor-not-allowed text-gray-600 disabled:opacity-50 rounded py-2 px-3 leading-tight border focus:border-gray-600 focus-visible:ring-0 focus:text-gray-700"
 
       classes += if has_error
         " border-red-600"
       else
-        " border-slate-300"
+        " border-gray-200"
       end
 
       classes += " #{extra_classes}"

data/app/helpers/avo/resources_helper.rb

@@ -47,7 +47,7 @@ module Avo
 
     def item_selector_input(floating: false, size: :md)
       "<input type='checkbox'
-        class='mx-3 #{"absolute inset-auto left-0 mt-2 z-10 hidden group-hover:block checked:block" if floating} #{size.to_sym == :lg ? "w-5 h-5" : "w-4 h-4"}'
+        class='mx-3 rounded #{"absolute inset-auto left-0 mt-2 z-10 hidden group-hover:block checked:block" if floating} #{size.to_sym == :lg ? "w-5 h-5" : "w-4 h-4"}'
         data-action='input->item-selector#toggle input->item-select-all#update'
         data-item-select-all-target='itemCheckbox'
         name='#{t "avo.select_item"}'
@@ -58,7 +58,7 @@ module Avo
 
     def item_select_all_input
       "<input type='checkbox'
-        class='mx-3 w-4 h-4'
+        class='mx-3 rounded w-4 h-4'
         data-action='input->item-select-all#toggle'
         data-item-select-all-target='checkbox'
         name='#{t "avo.select_all"}'

data/app/helpers/avo/url_helpers.rb

@@ -4,12 +4,12 @@ module Avo
       return if resource.nil?
 
       existing_params = {}
-      begin
-        if keep_query_params
+      if keep_query_params
+        begin
           existing_params =
             Addressable::URI.parse(request.fullpath).query_values.symbolize_keys
+        rescue
         end
-      rescue
       end
 
       # This entry uses `route_key` instead of `model_key` because it's rails that needs `fish_index` to build the correct path

data/app/javascript/avo.js

@@ -8,16 +8,23 @@ import { Turbo } from '@hotwired/turbo-rails'
 import Rails from '@rails/ujs'
 import tippy from 'tippy.js'
 
+import 'chartkick/chart.js/chart.esm'
+
 // Toastr alerts
 import './js/active-storage'
 import './js/controllers'
-import './js/toastr'
 
 Rails.start()
 
 window.Turbolinks = Turbo
 
-Mousetrap.bind('r r r', () => Turbo.visit(window.location.href, { action: 'replace' }))
+let scrollTop = null
+Mousetrap.bind('r r r', () => {
+  // Cpture scroll position
+  scrollTop = document.scrollingElement.scrollTop
+
+  Turbo.visit(window.location.href, { action: 'replace' })
+})
 
 function isMac() {
   const isMac = window.navigator.userAgent.indexOf('Mac OS X')
@@ -36,6 +43,7 @@ function initTippy() {
     content(reference) {
       const title = reference.getAttribute('title')
       reference.removeAttribute('title')
+      reference.removeAttribute('data-tippy')
 
       return title
     },
@@ -49,14 +57,27 @@ document.addEventListener('turbo:load', () => {
   document.body.classList.remove('turbo-loading')
   initTippy()
   isMac()
+
+  // Restore scroll position after r r r turbo reload
+  if (scrollTop) {
+    setTimeout(() => {
+      document.scrollingElement.scrollTo(0, scrollTop)
+      scrollTop = 0
+    }, 50)
+  }
 })
 
-document.addEventListener('turbo:before-fetch-response', (e) => {
+document.addEventListener('turbo:frame-load', () => {
+  initTippy()
+})
+
+document.addEventListener('turbo:before-fetch-response', async (e) => {
   if (e.detail.fetchResponse.response.status === 500) {
-    const id = e.srcElement.getAttribute('id')
-    e.srcElement.src = `${window.Avo.configuration.root_path}/failed_to_load?turbo_frame=${id}`
+    const { id, src } = e.target
+    e.target.src = `${window.Avo.configuration.root_path}/failed_to_load?turbo_frame=${id}&src=${src}`
   }
 })
+
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-end', () => document.body.classList.remove('turbo-loading'))

data/app/javascript/js/application.js

@@ -1,5 +1,5 @@
+import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
-import { Popover } from 'tailwindcss-stimulus-components'
 
 const application = Application.start()
 
@@ -8,6 +8,7 @@ application.debug = false
 window.Stimulus = application
 
 // Register stimulus-components controller
+application.register('alert', Alert)
 application.register('popover', Popover)
 
 export { application }

data/app/javascript/js/controllers/actions_picker_controller.js

@@ -4,30 +4,32 @@ import { Controller } from '@hotwired/stimulus'
 export default class extends Controller {
   static targets = ['resourceAction', 'standaloneAction']
 
+  static classes = ['enabled', 'disabled']
+
   target = {}
 
+  get targetIsDisabled() {
+    return this.target.dataset.disabled === 'true'
+  }
+
   enableTarget() {
-    if (this.targetIsDisabled(this.target)) {
-      this.target.classList.remove('cursor-wait', 'text-gray-500', 'hover:bg-blue-300')
-      this.target.classList.add('text-gray-700', 'hover:bg-blue-500')
+    if (this.targetIsDisabled) {
+      this.target.classList.remove(...this.disabledClasses)
+      this.target.classList.add(...this.enabledClasses)
       this.target.dataset.disabled = false
     }
   }
 
   disableTarget() {
-    this.target.classList.add('cursor-wait', 'text-gray-500', 'hover:bg-blue-300')
-    this.target.classList.remove('text-gray-700', 'hover:bg-blue-500')
+    this.target.classList.remove(...this.enabledClasses)
+    this.target.classList.add(...this.disabledClasses)
     this.target.dataset.disabled = true
   }
 
-  targetIsDisabled() {
-    return this.target.dataset.disabled === 'true'
-  }
-
   visitAction(event) {
     this.target = event.target
 
-    if (this.targetIsDisabled()) {
+    if (this.targetIsDisabled) {
       event.preventDefault()
 
       return

data/app/javascript/js/controllers/dashboard_card_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['card'];
+
+  interval;
+
+  get parentTurboFrame() {
+    return this.context.scope.element.closest('turbo-frame')
+  }
+
+  get refreshInterval() {
+    if (this.cardTarget.dataset.refreshEvery) {
+      return parseInt(this.cardTarget.dataset.refreshEvery, 10) * 1000
+    }
+
+    return undefined
+  }
+
+  connect() {
+    if (this.refreshInterval) {
+      this.interval = setInterval(() => {
+        this.parentTurboFrame.reload()
+      }, this.refreshInterval)
+    }
+  }
+
+  cardTargetDisconnected() {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  }
+}

data/app/javascript/js/controllers/item_selector_controller.js

@@ -5,6 +5,10 @@ export default class extends Controller {
 
   checkbox = {};
 
+  enabledClasses = ['text-black', 'hover:bg-blue-500', 'hover:text-white']
+
+  disabledClasses = ['text-gray-500']
+
   get actionsPanelPresent() {
     return this.actionsButtonElement !== null
   }
@@ -72,8 +76,8 @@ export default class extends Controller {
 
   enableResourceActions() {
     this.actionLinks.forEach((link) => {
-      link.classList.add('text-gray-700')
-      link.classList.remove('text-gray-500')
+      link.classList.add(...this.enabledClasses)
+      link.classList.remove(...this.disabledClasses)
       link.setAttribute('data-href', link.getAttribute('href'))
       link.dataset.disabled = false
     })
@@ -81,8 +85,8 @@ export default class extends Controller {
 
   disableResourceActions() {
     this.actionLinks.forEach((link) => {
-      link.classList.remove('text-gray-700')
-      link.classList.add('text-gray-500')
+      link.classList.remove(...this.enabledClasses)
+      link.classList.add(...this.disabledClasses)
       link.setAttribute('href', link.getAttribute('data-href'))
       link.dataset.disabled = true
     })

data/app/javascript/js/controllers/mobile_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['sidebar']
+
+  toggleSidebar() {
+    this.sidebarTarget.classList.toggle('hidden')
+  }
+}

data/app/javascript/js/controllers/select_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+import URI from 'urijs'
+
+export default class extends Controller {
+  static targets = ['select']
+
+  get parentTurboFrame() {
+    return this.context.scope.element.closest('turbo-frame')
+  }
+
+  onChange(e) {
+    if (!this.parentTurboFrame.src) return
+
+    // Get the frame URL
+    const url = new URI(this.parentTurboFrame.src)
+    // update the url with the new range param
+    url.search({ ...url.query(true), range: e.currentTarget.value })
+    // change the src of the frame
+    this.parentTurboFrame.src = url.toString()
+    // reload the frame with new range
+    this.parentTurboFrame.reload()
+  }
+}

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/{relations → associations}/new.html.erb

@@ -1,6 +1,7 @@
 <%= 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| %>
@@ -8,7 +9,8 @@
       <% c.heading do %>
         <%= t 'avo.choose_item', item: @related_resource.name.downcase %>
       <% end %>
-      <div class="flex-1 flex items-center justify-center px-8 text-lg mt-8 mb-12">
+
+      <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,
@@ -17,17 +19,26 @@
             resource: @resource
           %>
         <% else %>
-          <div class="flex-1 flex flex-col items-center justify-center px-24 text-base">
+          <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') }
+              {
+                include_blank: t('avo.choose_an_option'),
+              },
+              {
+                class: input_classes('w-full'),
+              }
             %>
           </div>
         <% end %>
       </div>
+
       <% c.controls do %>
-        <%= a_button t('avo.cancel'), 'data-action': 'click->modal#close', size: :sm %>
-        <%= a_button t('avo.attach'), type: :submit, color: :green, size: :sm %>
+        <%= 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 %>

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 %>